Docstoc

Membuat Login Form di Dreamweaver

Document Sample
Membuat Login Form di Dreamweaver Powered By Docstoc
					               MEMBUAT LOGIN FORM DI DREAMWEAVER


Konten dinamis merupakan hal yang biasa kita temukan pada website saat ini. Salah satu
fitur dinamis dalam suatu website adalah Login Form. Login Form digunakan oleh admin
antara lain untuk membatasi akses pengguna ke halaman tertentu, atau untuk membuat
catatan tentang para pengunjung website. Nah, dalam tutorial kali ini kita akan membahas
tentang proses pembuatan Login Form pada aplikasi Macromedia Dreamweaver 8. Kita juga
akan membahas bagaimana cara memasukkan informasi-informasi yang tercatat pada form
tersebut ke table database yang tersimpan di localhost, hingga bagaimana cara melihat
data-data yang telah di input tersebut.

Tutorial ini khusus diperuntukkan bagi siapa saja yang belum paham atau baru sedikit
paham tentang PHP dan MySQL, sebab dalam prosesnya nanti kita akan menggunakan
wizard-wizard yang telah disediakan oleh Dreamweaver. Sehingga walaupun kita minim
pengetahuan tentang PHP dan MySQL, namun kita pasti bisa melakukannya, Insya Allah.
Oke, tanpa memperpanjang kalam kita akan segera mulai tutorialnya.

Tahap Pertama: Membuat Form Login

1. Buatlah sebuah file baru dengan nama login.php dengan Dreamweaver.
2. Buatlah sebuah form dengan struktur sebagai berikut:
    TextField             Char Width           Max Chars          Type
    Nama                  50                   50                 Single line
    Email                 25                   25                 Single line
    Password              25                   25                 Password

   Sehingga nanti hasilnya akan seperti ini:




   Jangan lupa untuk memberikan beberapa aturan tentang pengisian form, atau yang lebih
   dikenal dengan validasi form. Validasi form sangat bermanfaat untuk memastikan bahwa
   data-data yang di input adalah data-data yang valid, atau untuk memastikan tidak ada
   field yang kosong. Bila anda belum tahu cara melakukan validasi form, silahkan klik disini
   untuk mendapatkan tutorialnya.




Membuat Login Form               ©2012 http://olah-olah.web.id                        Page 1
di Dreamweaver
Tahap Kedua: Membuat Database dan Tabel Login

1. Buka XAMPP Control Panel




2. Klik MySQL Admin… untuk membuka Panel kontrol phpMyAdmin
3. Buatlah sebuah database baru dengan nama tertentu yang mudah diingat, misalnya
   ‘databaseku’. Perhatikan gambar berikut untuk memudahkan anda.




4. Klik tombol Create
5. Pada bagian Create new table on database databaseku, masukkan nama table ‘login’
   dengan jumlah field sebanyak 4, dan selanjutnya klik tombol Go. Perhatikan gambar
   berikut ini:




6. Buatlah struktur table sebagai berikut:




7. Field id secara otomatis berfungsi sebagai kunci pengurutan data sebab field id berisi
   Nomor Urut yang akan ditambahkan secara otomatis setelah seseorang mengisi dan
   mengirimkan data melalui form.
8. Tutup window phpMyAdmin.




Membuat Login Form               ©2012 http://olah-olah.web.id                     Page 2
di Dreamweaver
Tahap Ketiga: Koneksi Form dan Database

1. Aktifkan kembali Dreamweaver dan buka file login.php
2. Aktifkan tab Application di bagian kanan layar program Dreamweaver.




3. Bila urutan langkah yang ditunjukkan pada tab Server Behaviors telah tercentang mulai
   dari nomor 1 s/d 3, maka kita sudah siap untuk melanjutkan ke nomor 4. Bila tidak,
   maka lakukan urutan langkah seperti yang ditunjukkan, mulai dari nomor 1 s/d 4.
4. Saya anggap sudah tidak ada masalah dengan langkah nomor 1 s/d 3, maka sekarang
   klik tombol   , dan klik Recordset. Akan tampil kotak dialog Recordset:




5. Isi kotak dialog tersebut dengan informasi-informasi yang diperlukan, yaitu:
   a. Name, adalah nama kumpulan data. Boleh dibiarkan seperti aslinya (Recordset#)
        atau ganti dengan nama lain. Misal kita ganti dengan nama ‘data_login’.
   b. Connection, dipakai untuk menentukan jenis koneksi yang akan menghubungkan
        antara form ‘login.php’ dengan table database ‘login’ yang ada di phpMyAdmin.
        Untuk dapat melakukan koneksi, maka langkah-langkahnya adalah:

Membuat Login Form              ©2012 http://olah-olah.web.id                     Page 3
di Dreamweaver
      -   Klik Define… akan tampil sebuah kotak dialog…




      -   Klik New, dan kali ini akan tampil kotak dialog MySQL New Connection seperti ini:




      -   Isikan informasi-informasi sebagai berikut:
           Connection name: localhost
           MySQL server: localhost
           User name: root
           Password: [boleh kosong jika phpMyAdmin tidak memakai password, jika
              sebelumnya password telah diset, masukkan password tersebut di kolom ini]
           Database: masukkan nama databasenya, misal ‘database_saya’.
      -   Klik Test untuk menguji koneksi




          Bila peringatan tersebut muncul di layar, centang ‘Don’t show me again’ lalu klik
          OK

          Bila uji koneksi sukses, akan tampil pesan:


Membuat Login Form              ©2012 http://olah-olah.web.id                         Page 4
di Dreamweaver
   c. Klik OK, kemudian klik OK lagi sekali untuk menutup kotak dialog New MySQL
      Connection.
   d. Selanjutnya klik Done di kotak dialog Connection for site ‘nama_site’.
   e. Klik tombol panah pilihan di kotak Connection dan pilih localhost, setelah itu secara
      otomatis akan muncul beberapa informasi terkait dengan table database.
   f. Pilih nama table di kotak Table
   g. Pilihan Columns dipakai untuk menentukan kolom-kolom yang akan terkoneksi
      dengan form.
   h. Pilihan Sort untuk menentukan kolom kunci pengurutan data dalam table. Dalam hal
      ini biasanya adalah kolom id atau no_urut.
   i. Klik OK jika sudah selesai melakukan setting.

6. Klik kembali tombol    dan pilih Insert Record. Lengkapi informasi seperti contoh yang
   tampak pada kotak dialog berikut ini:




7. Klik OK
8. Yupp… semua sudah selesai. Sekarang tampilan formnya menjadi…




Membuat Login Form               ©2012 http://olah-olah.web.id                        Page 5
di Dreamweaver
Tahap keempat: Uji Coba Form

Saatnya mencoba form yang sudah dibuat.

1. Tekan F12 dan isi formnya dan klik LOGIN.




2. Bila berhasil, kita akan di arahkan ke halaman download.html seperti berikut ini, sesuai
   dengan setting yang telah kita tentukan.




3. Lakukan beberapa kali pengisian form dengan benar. Bila terjadi error seperti ini:




   Artinya ada kesalahan dalam pengisian form, yaitu alamat email harus ditulis dengan
   benar. Itulah kegunaan dari aturan Validasi Form, yaitu untuk menjaga keakuratan data
   yang diinput.


Membuat Login Form               ©2012 http://olah-olah.web.id                          Page 6
di Dreamweaver
Tahap Kelima: Mengecek Data Login

Kini saatnya kita mengecek apakah data-data yang telah diinput melalui form telah
tersimpan dalam table database ataukah belum. Caranya:

1. Aktifkan phpMyAdmin dari kotak dialog XAMPP Control Panel atau ketik
   http://localhost/phpmyadmin di address bar browser anda.
2. Pilih Database dan table yang akan di cek. Dalam contoh ini ‘database_saya’ dan tabel
   ‘login’.
3. Klik Browse untuk melihat data.
   Tampilan data adalah sebagai berikut|:




Dari tampilan diatas tentunya anda bisa menyimpulkan bahwa user telah berhasil menginput
data-datanya dari form Login. Semakin banyak user yang berkunjung dan mengisi login
form, tentunya jumlah record-nya pun akan semakin bertambah. Oh iya, kita bisa membuat
laporan atau sejenisnya dengan cara klik pada Print view, Print view (with full text) atau
Export. Contoh kita menggunakan pilihan Print view (with full text), maka hasilnya adalah:




                     Akhirul kalam, Selamat Mencoba – semoga sukses!




Membuat Login Form               ©2012 http://olah-olah.web.id                       Page 7
di Dreamweaver

				
DOCUMENT INFO
Shared By:
Stats:
views:5466
posted:2/19/2012
language:Indonesian
pages:7
Description: Khusus di dedikasikan bagi yang ingin belajar membuat konten-konten dinamis dengan Dreamweaver.
Abdul Syukri Abdul Syukri Sekolah Menengah Kejuruan http://smkn1lingsar.sch.id
About Hi, I'm a teacher. I teach at a vocational school in Lombok. I teach English and some computer related subjects. I'm particularly interested in the development of teaching media.