Membuat Login Form Dengan 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.

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.
   

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:
   
   1. Name, adalah nama kumpulan data. Boleh dibiarkan seperti aslinya (Recordset#) atau ganti dengan nama lain. Misal kita ganti dengan nama ‘data_login’.
      
   2. 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:
      

• 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:
  
  
  

1. Klik OK, kemudian klik OK lagi sekali untuk menutup kotak dialog New MySQL Connection.
   
2. Selanjutnya klik Done di kotak dialog Connection for site ‘nama_site’.
   
3. Klik tombol panah pilihan di kotak Connection dan pilih localhost, setelah itu secara otomatis akan muncul beberapa informasi terkait dengan table database.
   
4. Pilih nama table di kotak Table
   
5. Pilihan Columns dipakai untuk menentukan kolom-kolom yang akan terkoneksi dengan form.
   
6. Pilihan Sort untuk menentukan kolom kunci pengurutan data dalam table. Dalam hal ini biasanya adalah kolom id atau no_urut.
   
7. Klik OK jika sudah selesai melakukan setting.
   

1. Klik kembali tombol dan pilih Insert Record. Lengkapi informasi seperti contoh yang tampak pada kotak dialog berikut ini:
   
   
   
2. Klik OK
   
3. Yupp… semua sudah selesai. Sekarang tampilan formnya menjadi…
   
   
   

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.
   

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!

di Copy dari http://olaholah.wordpress.com/2012/02/19/membuat-login-form-dengan-dreamweaver/