YURISTGAMEINIGAMEID101

Cara Membuat Form Login Sederhana Dengan Bootstrap 4

Login sangatlah dibutuhkan untuk sebuah website utuh. Untuk membuat form login tersebut, kita biasanya akan membuatnya secara manual dengan HTML dan CSS. Tetapi, ada satu cara alternatif yaitu Bootstrap. Dengan adanya bootstrap, kita dapat mendirikan sebuah desain website dengan lebih mudah.

Kali ini saya akan memberitahu bagaimana cara untuk membuat form login menggunakan Bootstrap. Sebelumnya, apa sih Bootstrap itu? Singkatnya, bootstrap adalah framework dari HTML, CSS, dan Javascript. Bootstrap adalah framework yang paling terkenal diantara para web developer. Tetapi, apa keuntungan memakai bootstrap? Yang paling dirasakan perbedaannya ketika memakai bootstrap itu lebih simple, responsive, gak ribet.


Tidak seperti jika kita menggunakan native (coding manual) yang harus mengatur suatu fungsi secara manual dari desain default, bootstrap ini sudah menggunakan desain secara otomatis bawaaan bootstrap. Cara menggunakannya sangat mudah, hanya tinggal seret kode yang sudah disediakan oleh bootstrap itu sendiri. Nah disini kita akan membuat form login, pastinya membuatnya tidak akan memakan waktu yang lama, karena desain sudah bawaan dari bootstrap.

Untuk bootstrap mempunyai beberapa versi, yang versi terbaru adalah versi 4. Disini kita akan membuat form login menggunakan bootstrap. Oh ya, kalian juga bisa membuat form register dengan tutorial ini. Untuk mengikuti tutorial ini kalian bisa menggunakan text-editor apa saja seperti Sublime Text, Atom, Notepad++, dan lain-lain.

Yuk simak tutorial berikut ini.


Install bootstrap
Yang dimaksud dengan install disini bukan menginstall installer ya, tetapi mengkoneksikan file html dengan CSS dan Javascriptnya bootstrap. Langsung saja copy paste source code dibawah ini lalu pastekan ke index.html. 



Jika kita lihat di browser, disana akan terlihat hanya tulisan Hello World. Sekarang hapus <h1> yang berisikan Hello World

Mulai Membuat Form
Setelah selesai membuat template default bawaan bootstrap, kita akan membuat form loginnya. 
Sekarang coba hapus terlebih dahulu tulisan Hello World dari yang tadi sudah di paste. 

Sebelum membuat form, kita akan membuat row terlebih dahulu. Kenapa menggunakan row? Karena agar form yang kita buat terlihat lebih rapih. Cara membuat row bisa copy source code dibawah ini lalu pastekan diantara <body> dan </body>.


Sekarang, buka getbootstrap.com 

Lalu masuk ke menu Documentation, Di menu bagian kiri akan terlihat sebuah sidebar menu. Klik menu Components.

Jika Components sudah diklik, maka akan ada menu baru yang muncul yaitu isi dari komponen-komponen yang bisa kita gunakan di bootstrap.

Masuk ke Components -> Forms


Di bagian form, scroll sedikit ke bawah dan kalian akan menemukan contoh dari pembuatan form dengan bootstrap. 

Langsung saja copy contoh form yang sudah disediakan di bootstrap.



Jika sudah dicopy, sekarang pastekan dibawah <h3> yang tadi sudah dibuat.


Sekarang save lalu lihat hasilnya di browser, pasti akan terlihat seperti dibawah ini.


Ups.. Rupanya desain dari form loginnya belum terlihat bagus. Ini dikarenakan kita belum menambahkan css untuk lebih merapihkannya lagi.

Buatlah style.css lalu link css tersebut di index.html. Lalu isi style.css seperti dibawah ini

Selesai! Sekarang coba save dan lihat hasilnya. Semoga artikel ini bermanfaat.

Related Post