Membuat Form Login dengan Bootstrap Modal

Membuat Form Login dengan PHP memang sangat menarik untuk terus dibahas ditambah lagi dengan request-request dari teman-teman ONPHPID yang akhir-akhir ini tengah membombardir (maaf sidikit lebay). Selain itu Form login atau halaman login adalah sebuah fitur yang sangat penting  dan harus dimiliki oleh setiap website untuk membedakan antara pengunjung website dan admin atau pengurus website, dimana Admin bertugas mengatur konten-konten yang akan dilihat oleh para pengunjung jadi jangan sampai tercampur. 

Untuk sementara kita kesampingkan dulu masalah tercampurnya pengujung dan admin diatas, sebab kita akan fokus dalam membuat form login dengan bootstrap modal yang akan kita bahas pada tutorial ini.

Dan bagi teman-teman ONPHPID yang ingin membaca-baca tutorial membuat form login dengan php lainnya bisa klik link-link berikut :

wah kok banyak yaa…, iya seperti ONPHPID katakan diatas bahwa membahas tentang form login itu mengasikan dan ditutorial ini beda dengan tutorial membuat form login sebelum-sebelumnya kenapa ? karena pada tutorial-tutorial sebelumnya kita selalu membuat form login dihalaman khusus atau tersendiri dan ditutorial ini kita akan membuat form login berada dalam satu halaman dengan halaman home atau depan dengan memanfaatkan Bootstrap Modal.

Membuat Form Login Dengan Bootstrap Modal

Disini ONPHPID asumsikan teman-teman sudah bisa menggunakan atau mengimplementasikan bootstrap pada file berekstensi PHP dan sudah bisa menggunakan PHP di XAMPP, dan jika memang belum teman-teman bisa mencoba untuk mengikuti video tutorial Membuat Template Web dengan Bootstrap  atau  Membuat Form Login dengan Bootstrap  kalian akan dijelaskan bagaimana mengimplementasikan bootstrap di file PHP dan menggunakan XAMPP.

Langkah Pertama

Buatlah Database dengan nama bootstrap melalui localhost/phpmyadmin kemudian import dengan cara save as Kode SQL ini lalu import sebagai file sql.

Langkah Kedua

  • Buatlah Folder baru di htdocs dengan nama “form-login“.
  • Didalam folder form-login buatlah file config.php, index.php, admin.php, check-login.php, logout.php dan folder assets.
  • Unduh bootstrap di sini lalu letakan di folder assets, kurang lebih strukturnya akan tampak seperti gambar berikut :

  • Lalu unduh jquery  disini dengan cara save as, dan letakkan di folder assets/js/

Langkah Ketiga

Karena tadi kita sudah membuat dan meng-import database, maka pada step ini kita akan membuat fungsi koneksi dengan database.  buka file config.php dan tuliskan kode berikut

untuk mengujinya kalian bisa mengakses url berikut :

jika BLANK maka koneksi telah sukses, namun jika muncul Oops!! bla bla bla berarti ada yang salah.

baik ONPHPID asumsikan sudah berhasil. maka selanjutnya kita buat tampilah home, tentunya akan kita lakukan secara bertahap.

Membuat Halaman Login dengan Bootstrap

Pada tahap pertama kita akan memasang bootstrap terlebih dulu. Buka File index.php dan tuliskan kode berikut :

Masih tetap di file index.php, selanjutnya kita akan buat Navbar atau navigasi bar dengan menambahkan kode berikut tepat dibawah <!-- Navbar -->

Perhatikan link atau tag <a> dibawah <!-- menu login --> di sana terdapat dua buat attribute data-toggle="modal" dan data-target="#onphpidLogin", fungsi attribut tersebut adalah untuk menandakan bahwa link atau tag <a> memiliki hubungan dengan modal, dimana ketika di klik maka modal  dengan attribut id="onphpidLogin" akan muncul. Namun untuk sekarang modal tidak akan pernah muncul… kenapa ? karena belum kita buat hehehe…

Ok sekarang akan kita buat Form Login dan Modalnya :

Nah sekarang Modal dengan attribut id="onphpidLogin" sudah kita buat.  kalian sudah bisa menampilkan modal dengan melakukan klik pada menu login. berikutnya kita akan bahas form loginnya.

baik perhatikan pada <!-- form login --> di tag <form> terdapat sebuah attribut action="check-login" bukan ? attribut tersebut menandakan kalau kita klik login maka data yang kita inputkan seperti username dan password akan dikirim ke halaman/file check-login.php untuk dilakukan validasi dan pengecekan data pada database. seperti apa validasi dan pengecekannya, yuk kita buka file check-login.php dan isi dengan kode berikut :

 

Mari kita bahas satu persatu, pertama kita mulai dari kode berikut :

kode tersebut memiliki fungsi untuk mengaktifkan penyimpanan informasi pada server melalui $_SESSION  yang bisa digunakan secara global, pada kasus ini kita akan menyimpan nama siapa yang login kedalam $_SESSION['namaLog'] yang nanti akan kita panggil setelah login berhasil.

kode tersebut bertugas untuk mengecek apakah ada request post atau tidak, dari mana dapatnya post ? request post di peroleh dari  method="post" attribut form dan  username  adalah attribut name dari tag <input>.

apa itu md5() ? md5() adalah sebuah hashing untuk mengubah sebuah data teks  tertentu menjadi sebuah angka dan huruf secara acak, biasanya digunakan untuk pengamanan data sensitif seperti password.

kode diatas merupakan perintah kepada SQL (database) dimana kita meminta kepada DB untuk mencarikan data yang sama dengan username dan password yang kita kirim.

kode diatas untuk mengecek apakah data yang kita minta pada database itu ada ? jika ada maka akan dilanjutkan dengan menyimpan data pada session seperti kode berikut

kemudian akan diarahkan kehalaman admin.php dengan kode berikut :

 

oleh karena halaman atau file admin.php belum ada isininya ONPHPID pastikan tidak akan muncul apapun di admin.php, nah biar muncul nama siapa yang login. isi file admin.php dengan kode berikut :

Oke, ONPHPID pastikan jika kalian berhasil login pasti akan muncul nama siapa yang login.

jika kalian perhatikan, diakhir file admin.php ada kata logout bukan ? itu adalah fungsi logout, bagaimana cara membuatnya ? langsung aja buka file logout.php dan isi dengan kode berikut :

 

Sampai disini kita sudah selesai membuat form login dengan bootstrap modal. untuk menguji form login yang kita buat WORK atau tidak kalian bisa gunakan username dan password berikut

Username : admin

Password : admin

 

Hmmm saat ini halaman hanya terdapat navbar dengan latar putih, jika kalian ingin menambahkan konten kalian bisa menambah kode berikut di file index.php tepat dibawah <!-- body text -->

kurang lebih hasil akhirnya akan seperti berikut :

 

Baik Cukup sekian tutorial membuat form login dengan bootstrap modal, untuk mengunduh file lengkapnya kalian bisa ke sini. jika ada pertanyaan kalian bisa sampaikan melalui kolom komentar dan JANGAN Lupa Like FansPage ONPHPID dan Subscribe Channel ONPHPID Tutorial di Youtube, terimkasih dan selamat bereksperimen.

Scroll to Top
Scroll to Top