news-card-video
Jakarta
imsak
subuh
terbit
dzuhur
ashar
maghrib
isya

Membuat Form Login dengan Bootstrap, Begini Caranya

Konten dari Pengguna
21 April 2022 17:58 WIB
·
waktu baca 3 menit
comment
0
sosmed-whatsapp-white
copy-link-circle
more-vertical
Tulisan dari How To Tekno tidak mewakili pandangan dari redaksi kumparan
Ilustrasi programmer yang membuat website. Foto: Jexo/Unsplash
zoom-in-whitePerbesar
Ilustrasi programmer yang membuat website. Foto: Jexo/Unsplash
ADVERTISEMENT
Membuat form login dengan bootstrap wajib diketahui oleh pengembang situs web yang menyediakan fungsi registrasi dan login.
ADVERTISEMENT
Form login ini digunakan untuk membatasi hak akses pengguna agar tidak bisa masuk ke bagian dalam sistem yang hanya bisa diakses oleh admin. Form login juga berguna untuk mengamankan data-data dari masing-masing akun pengguna website tersebut.
Di artikel ini, kamu bisa mengikuti pembahasan tutorial membuat form login dengan bootstrap 5 dan lainnya serta penjelasannya yang memudahkanmu. Nantinya, pengguna website dapat memasukkan nama pengguna, kata sandi, dan e-mail.

Tutorial Membuat Form Login dengan Bootstrap

Ilustrasi membuat form login dengan bootstrap. Foto: olia danilevich/Pexels
Pada Bootstrap, membuat halaman web responsif adalah hal yang mudah, karena Bootstrap memiliki kelas untuk membuat desain web.
Bootstrap sendiri memiliki berbagai jenis tata letak formulir yang diberikan di bawah ini:
ADVERTISEMENT
Sekarang, buat semua bentuk gaya secara satu per satu. Berikut adalah penjelasan lengkapnya.

1. Bentuk Vertikal

Gunakan beberapa kelas seperti form-group, form-control, checkbox, btn dan btn-primary.
Kelas ini mengikat label dan input dalam grup.
Kelas ini membuat formulir input.
Kelas ini digunakan untuk membuat kotak centang.
Kelas digunakan untuk membuat tombol warna biru.

2. Bentuk Horizontal

Gunakan beberapa kelas seperti form-horizontal, form-group, control-label col-sm-2, form-control, checkbox dan btn btn-primary.

3. Bentuk Sebaris

Gunakan beberapa kelas seperti form-inline, form-group, form-control, sr-only, checkbox dan btn btn-danger.

4. Output

bentuk-kelompok
bentuk-kontrol
kotak centang
btn btn-bahaya
ADVERTISEMENT
bentuk-sebaris
sr-saja
Selain kamu bisa membuat form login dengan bootstrap, kamu juga bisa membuatnya di PHP dan MySQL database

Membuat Form Login dengan Bootstrap dan PHP

Ilustrasi membuat form login dengan bootstrap. Foto: Shahadat Rahman/Unsplash

1. Membuat Database

Langkah awal cara membuat form login dengan PHP dan MySQL database adalah membuat database terlebih dahulu.

2. Menghubungkan Database

Setelah tabel jadi, cara membuat form login dan register dengan PHP dan MySQL database adalah memasukkan kode skrip yang berisi kode untuk menghubungkan PHP MySQL dengan server database MySQL. Jadi, buatlah file baru dan masukkan kode skripnya.
ADVERTISEMENT

3. Buat Sesi Khusus untuk Pengguna

Jangan lupa untuk membuat sesi bagi pengguna. Kamu bisa membuat file baru dan memasukkan kode skripnya.

4. Membuat Form Registrasi

Setelah membuat file baru, masukkan kueri atau kode skrip. Kamu bisa mengkreasikan jenis font, warna, dan ukuran sesuai keinginan di dalam kode skrip. Nantinya, hal itu akan berisi halaman untuk pengguna saat melakukan pendaftaran akun.

5. Membuat Form Login

Form login untuk website yang sedang kamu bangun sama seperti saat membuat from registrasi. Setelah itu, buat file baru yang berisi kode skrip atau kueri, di mana berisi formulir login dengan nama pengguna dan kata sandi.

6. Buat Halaman Dashboard

Pastinya, setelah pengguna login nantinya akan diarahkan ke halaman dashboard. Buatlah file baru, kemudian masukkan di dalamnya.

7. Membuat Perintah Logout

Terakhir, jangan lupa membuat perintah logout. Saat pengguna mengklik tombol logout, maka kamu harus menghancurkan sesi yang telah dibuka pengguna sebelumnya dan mengarahkan ke halaman login.
ADVERTISEMENT
Itulah cara untuk membuat form login dengan Bootstrap yang bisa kamu lakukan.
(DEEM)