Cara Membuat Form Login dengan Bootstrap [Part 1]

Form Login adalah salah satu form yang harus dibuat saat mengembangkan sebuah aplikasi. Form ini akan menangani hak akses seseorang dalam sebuah aplikasi. Apakah sesorang tersebut diperbolehkan mengakses aplikasi atau tidak.

Nah, dikesempatan ini saya akan membagikan cara untuk membuat form login dengan menggunakan Bootstrap. 

form login bootstrap

Bootstrap ? Apa itu Bootstrap ?

Bootstrap sendiri merupakan framework yang dapat digunakan untuk membuat aplikasi website secara responsif dan cepat. 

Responsif disini mempunyai arti, tampilan website yang kita buat akan mengikuti ukuran layar perangkat yang digunakan untuk mengakses.

Saat kita mengakses menggunakan ponsel, maka tampilan website akan mengecil dan mengikuti ukuran layar ponsel kalian. Sebaliknya, ketika kita mengakses website menggunakan desktop, maka tampilan website akan membesar mengikuti ukuran layar PC kalian.

Lalu cepat ? Kenapa cepat ? Saat kita menggunakan bootstrap, maka kita akan lebih cepat dalam membuat tampilan website. Karena element-element seperti field input, tombol, grid, tabel, dan lainnya sudah disediakan.

Cara Membuat Form Login dengan Bootstrap

Untuk membuat form login ini, kita membutuhkan css (gaya webstie), javascript, dan fonts dari bootstrap. Selain itu, kita akan membuat format form login untuk aplikasi website :

1. Pertama, silahkan unduh terlebih dahulu bootsrap versi 3.4 dari https://getbootstrap.com/ atau kalian bisa unduh disini. 
2. Kemudian jalankan aplikasi xampp kalian.
3. Lalu buat folder baru "login" di htdocs.

   

   membuat folder login di htdocs

4. Selanjutnya bikin folder "assets" di dalam folder login.
5. Kemudian ekstrak hasil unduhan bootstrap di folder "assets".

   

   buat folder assets di dalam folder login dan ekstrak file bootstrap

6. Setelah itu bikin form login seperti menggunakan kode dibawah ini :
   
7. Kemudian jalankan dengan mengakses "localhost/login".
8. Pasti hasilnya akan seperti ini :

   

   login tanpa bootstrap

9. Masih jelek kan ? 
10. Untuk memperindah tampilan form login. Kita buat dulu stylenya. Silahkan buat css style seperti dibawah ini :
    
11. Kemudian simpan dengan nama "style.css" di folder assets.

    

    css style

12. Setelah membuat style tambahkan bootstrap ke dalam codingan kalian.
13. Untuk memanggil css kita akan menggunakan <link rel="stylesheet" type="text/css" href="lokasi_file"> dan untuk javascript  <script type="text/javascript" src="lokasi_file"></script>
14. Jadi kodingan form menjadi seperti ini :
    
15. Jika sudah coba reload lagi halaman form login kalian.
16. Akan berubah menjadi seperti ini bukan ?

    

    tampilan login dengan bootstrap

17. Selesai.

Demikian sedikit yang bisa saya bagikan tentang cara pembuatan form login dengan bootstrap. Semoga dapat bermanfaat, sekian dari saya dan sampai jumpa di artikel selajutnya.

Share this post