Cara menggunakan membuat form dengan bootstrap

Ilustrasi programmer yang membuat website. Foto: Jexo/Unsplash

Membuat form login dengan bootstrap wajib diketahui oleh pengembang situs web yang menyediakan fungsi registrasi dan login.

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 tutorialmembuat 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:

  • Bentuk vertikal (ini default)

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

  • 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 merah.

  • Kelas ini digunakan untuk membuat formulir sebaris.

  • Kelas digunakan untuk menyembunyikan label.

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.

  1. Masuk ke PHPMyAdmin, kemudian klik tab 'Database' untuk membuat database baru.

  2. Selanjutnya, masukkan nama database kamu. Lalu, klik tombol 'Create Database'.

  3. Selanjutnya, buat tabel di dalam database tersebut yang berisi, ID, nama pengguna, e-mail, kata sandi, dan tanggal akun dibuat dengan cara memasukkan kode skrip atau kueri di tab SQL.

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.

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.

Itulah cara untuk membuat form login dengan Bootstrap yang bisa kamu lakukan.