Membuat Form Login Dengan Bootstrap dan PHP

Tugas Praktik Desain Web

Andhika Guntur Slamet ( 16832015 )

Gina Rahayu ( 16832008 )

3A-Pendidikan Teknologi Informasi

Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat form login dengan menggunakan framework bootstrap dan PHP. Dengan menggunakan bootstrap, kita bisa membuat tampilan Website dengan mudah serta memperoleh hasil yang bagus. Berikut adalah langkah-langkahnya.

1. Terlebih dahulu silahkan download bootstrap dari getbootstrap.com (rekomendasi). Silahkan jika kalian memiliki link lain untuk mendapatkan bootstrap.
2. Karena form yang akan kita buat masih berbasis offline, maka terlebih dahulu kita perlu menginstall xampp.
3. Setelah terinstall pergi ke C:\xampp\htdocs . Kemudian buatlah folder dan file didalamnya seperti gambar berikut :

3. Ekstrak Bootstrap yang telah kita download tadi kedalam folder assest.

Setelah proses pembuatan folder dan file selesai, sekarang buka file login.php dan setelah itu masukkan script berikut


Jika sudah kalian bisa cek hasilnya dengan cara buka browser lalu akses localhost/nama-folder/login.php. Sebelumnya jangan lupa buka xampp dan aktifkan apache dan MySql.

Ketika dibuka maka tampilannya akan seperti berikut :

4. Selanjutnya kita akan membuat fungsi check login. Fungsi ini digunakan untuk mengecek apakah data yang di inputkan sesuai dengan data yang berada di database atau tidak. Jika data sesuai maka login berhasil, jika tidak maka login gagal!
Caranya adalah buka check-login.php dan isi coding berikut:

5. Langkah berikutnya yaitu membuat koneksi halaman login yang telah kita buat dengan database. Dalam fungsi check-login.php kita perlu mencocokkan data user yang dimasukkan atau inputkan saat login dengan data yang berada di dalam database. Dalam hal ini adalah ini data yang perlu kita sinkronkan adalah username dan password. Jadi kita perlu membuat file koneksi dengan menuliskan script berikut pada file config.php agar bisa berinteraksi/terkoneksi dengan database.

6. Kemudian buat halaman index. Ketika login sebagai admin, buat file index.php didalam folder on-admin yg telah dibuat sebelumnya. Pada index.php masukkan script berikut.
7. Langkah terakhir adalah mengisi script logout.php. Fungsinya agar ketika tombol logout yang berada di index.php di klik maka akan dialihkan kehalaman login awal. Scriptnya adalah berikut:


Selesai, sekian untuk tutorial kali ini semoga bermanfaat :)