MEMBUAT FORM LOGIN MENGGUNAKAN ADOBE DREAMWEAVER CS5

Oleh peistar

Tuesday, 17 May 2016

Bagikan :

Tweet

Kali ini saya akan memberikan tutorial mengenai cara pembuatan Form Login menggunakan Aplikasi Adobe Dreamweaver Cs5.  Untuk mempersingkat waktu kita langsung saja pada materi dan dapat saudara ikuti langkah – langkah dibawah ini dengan benar.

- Langkah Pertama : Kita tambahkan 1 (satu) tabel yang diberi nama Login dengan Field Username dan Password seperti gambar dibawah ini.

- Langkah Kedua : Isi tabel  Login tersebut secara manual atau saudara bisa membuat Form Input Data Login pada Sistem.

- Langkah Ketiga : Pada langkah ketiga ini kita menuju Dreamweaver dan menambahkan dokumen baru untuk mendesain Form Login dengan cara pilih Menu Insert => Form => Form.

Keterangan : Pada area Form dengan kotak berwarna merah kita dapat menambahkan tabel untuk mendesain Form Login, pastikan posisi kursor dalam area Form.

- Langkah Keempat : Untuk membuat tabel pilih Menu Insert => Table.

Keterangan : Pada halaman table kita dapat menambahkan 4 baris dan 3 kolom dengan lebar 500 pixels.

- Langkah Kelima : Desain Form login seperti gambar dibawah ini => Simpan dengan nama Index.php

- Langkah Keenam : Setelah Form Login kita Simpan selanjutnya kita dapat membuat proses Login dengan cara pilih Menu Insert => Data Objects => User Authentication => log in User.

Katerangan : Pada halaman log In User kita dapat mengatur proses loginya sebagai berikut.

• Get input form form => Mengatur form yang akan kita gunakan.
• Username field => Posisi username yang akan diinputkan.
• Password field => Posisi password yang akan kita inputkan.
• Validate using connection => Name MySQL Connection.
• Tabel => Tabel yang digunakan yang menyimpan Field Username dan Password.
• Username column => Name Field yang ada ditabel.
• Password column => Name Field yang ada ditabel.
• If login succeeds, go to => Digunakan setelah berhasil Login kemudian mengarahkan tujuan yang akan ditampilkan.
• If login fails, go to => Apabila Username dan Password salah mengarahkan tujuan yang akan ditampilkan.
• OK => Selesai.

Selamat mencoba...!!! Pastikan saudara mengikuti langkah – langkah ini dengan benar. Wasallammm...!!!

Tampilan Form Login

Tag : Dreamweaver