PEMROGRAMAN WEB : Membuat Halaman Login Dengan PHP




Pada kesempatan kali ini saya akan sedikit berbagi tips mengenai dasar pemrograman WEB yaitu membuat halaman Login di web, halaman login hampir selalu ada dan sangat penting dalam setiap web. Dalam membuat halaman Login ini, saya menggunakan Dreamweaver CS3 dan dalam kondisi kita sudah membuat database dan site definition dan juga Dreamweaver sudah terkoneksi dengan database


Berikut Langkah Membuat Halaman Login dengan Php

1. Seperti biasa buka terlebih dahulu Adobe Dreamweaver CS3, lalu buatlah file baru dengan nama login.php

2. Selanjutnya buatlah Form, dengan cara pilih Insert --> Form --> Form


3. Hasilnya akan tampak Seperti berikut




4. Langkah Selanjutnya, memasukkan tabel. Pilih Insert --> Tabel atau anda bisa menekan Ctrl + Alt + T

5. Atur Tabel seperti dibawah ini. Kemudian klik OK



6. Atur Tabel, Isi teks Nama dan Password pada kolom pertama tabel seperti dibawah ini


7. Pada kolom kedua tabel, tambahkan 2 textfield untuk menampung karakter/huruf yang akan diketik ketika kita login. Caranya, pilih menu Insert --> Form --> Text Field




8. Pada Kotak Dialog Text Field, masukkan ID dengan login, dan Label biarkan kosong, kemudian klik OK



9. Lakukan Langkah yang sama pada text field kedua (textfield Password), namun pada kolom ID masukkan password.

10. Selanjutnya set text field password agar ketika kita mengetikan password, password kita akan tampil bulet bulet khas password. caranya : klik text field password yang sudah kita buat tadi. Pada bagian Properties (ada dibawah tampilan) pilih tipe password


11. Tambahkan Button / tombol. Pada kali ini kita akan sediakan 2 button, button pertama untuk Login dan yang kedua untuk reset. Caranya nya hampir sama dengan menambahkan text field. yakni pilih menu Insert --> Form --> Button


12. Tentukan ID dan Label button pertama (button login), masukkan kolom ID dengan login, dan kolom Label biarkan kosong, kemudian Klik OK


13. Langkah selanjutnya, Atur button Login, caranya klik button login. Pada bagian Properties (ada dibawah tampilan) isi value dengan Login, dan pilih Action Submit Form

14. Atur juga button Reset, caranya klik button Reset. Pada bagian Properties (ada dibawah tampilan) isi value dengan Reset, dan pilih Action Reset Form

15. Selanjutnya adalah memberikan kode program/fungsi login. Pilih menu Insert --> Data Object --> Log In User --> Login Authentication

16. Atur Seperti dibawah ini :

Keterangan :
  • Get Input From Form : form login yang telah anda buat sebelumnya (terisi otomatis)
  • Username field : kolom tempat anda mengisikan nama / username anda (terisi otomatis)
  • Password field : kolom tempat anda mengisikan password anda (terisi otomatis)
  • Validate usig connection : adalah koneksi dari website yang telah kita buat
  • Table : pada kali ini anda memilih table admin yang ada dalam admin yang telah kita buat sebelumnya.
  • If login succeeds, go to : halaman yang dituju jika login berhasil
  • If login fails, go to : halaman yang dituju jika login gagal
  • Restric access base on : hak batasan login.


17. Selesai, tampilan login sudah selesai beserta fungsinya. Coba lakukan pengetesan. 


Tampilan pada halaman Login web ini masih sederhana, anda bisa melakukan editing tampilan agar terlihat lebih menarik dan enak dipandang mata.


Berikut tampilan login yang sudah saya edit :


Anda bisa mendownload Source Code lengkapnya Disini, include CSS dan image/ gambarnya:

Download : Halaman Login



About Unknown

Jika masa muda anda hanya berdiam diri dan tidak melalukan apapun, maka bersiapkan menderita di masa depan.
Previous
Next Post »