Mempercantik Halaman Login dengan Bootstrap

Onphpid – Baiklah pada tutorial php cara membuat website bagian ke 5 kita akan membuat template form login dengan bootstap agar halaman login terlihat cantik sehingga enak dipandang dengan memanfaatkan fitur bootstrap, form login akan lebih mudah dibuat dibandingkan kita membuat template sendiri. Perlu diketahui bahwa tamplian merupakan nilai plus pada pembuatan website karena berpengaruh pada pengguna saat menggunakan website yang kita buat.

Mungkin kalian perlu membaca tutorial Membuat Form login dengan bootstrap dan PHP sebelum melanjutkan cara membuat website bagian kedua.

Cara Membuat Website bagian Kedua

Sebelum kita lanjutkan ada baiknya kalian baca (bagi yang belum membaca) tutorial php cara membuat website bagian ke empat bagi yang belum membacanya. Karena tutorial php ini adalah lanjutan dari tutorial sebelumnya atau dengan kata lain ini adalah tutorial php cara membuat website series. Nah pada bagian ini kita memerlukan framework css dari bootstrap karena kita akan belajar bootstrap dan dapat kalian download dari situs bootstrap secara langsung. Setelah didownload silahkan ekstrak di folder assets yang sudah dibuat sebelumnya. Dan selanjutnya download jQuery dari google library atau situs jQuery langsung. Dan buatlah folder atau direktori baru di dalam assets dengan nama jquery, hal ini dilakukan agar file dan folder dapat terorganisir dengan baik.

Untuk langkah-langkah membuat website kita akan memulai dengan membuat file login.css pada folder assets dan bisa dibiarkan kosong. File login.css ini akan kita gunakan untuk menambah style custom selain bootstrap, sehingga kita tidak perlu merubah-rubah isi dari bootstrap sendiri, tentunya ini mempermudah kita dalam membuat website.

Berikut struktur direktori yang baru setelah kita tambah dengan bootstrap:

cara membuat website, mempercantik halaman login, mempercantik template login from

Langkah kedua silahkan ganti script yang ada di dalam file login.php dengan scrpit berikut:

Dapat kita lihat pada tutorial bootstrap di atas bahwa yang kita ambil adalah bootstrap.min.css, hal ini dilakukan agar website yang kita buat lebih ringan, karena ukuran bootstrap.min.css lebih kecil dari bootstrap.css. Kemudian dibawahnya kita letakkan login.css hal ini dilakukan agar selector yang sudah diset pada bootstrap ter-reset sehingga memiliki properti yang baru.

Pada line berikutnya kita juga menggunakan jquery.min.js yang bisa diperoleh dari google library atau situs jquery sendiri, karena script bootstrap.min.js tidak bisa berjalan tanpa jquery.min.js tersebut. Dan karena itu juga jquery.min.js ini diletakan di atas bootstrap.min.js. dan kenapa diletakkan di atas tag </body>. Hal ini dilakukan agar browser membaca script js ini belakangan sehingga tidak mengganggu script css-nya.

Kemudian pada file login.css di isi dengan script css berikut :

Adapun fitur – fitur dari bootstrap yang kita pergunakan dalam template login, seperti css form , glyphicon dan grid system yang memungkinkan template website yang kita buat responsive. Artinya dapat menyesuaikan ukuran layar baik layar Monitor, Laptop, Tablet maupun mobile.

Contoh CSS From dari bootstrap adalah “.form-control” dibaca class form-control yang peruntukan untuk tag input dan select kemudian .btn sebagai style button (tombol). Di dalam bootstrap tersedia .btn-primary, .btn-warning, .btn-danger, dan .btn-success.

Sedangkan untuk grid system bootstrap kita menggunakan .col-md-4 dan .col-md-offset-*. Artinya ruang dalam tag div lebarnya akan dibagai 4 dari totalnya yakni 12. Dan glyphicon adalah icon-icon yang sengaja disediakan oleh bootstrap agar kita lebih mudah dan tidak perlu susah-susah mencari icon untuk website kita. Nah di sini kita tidak akan membahas terlalu banyak tetang bootstrap kalian bisa membaca dokumentasi secara langsung di getbootstrap.com atau baca Belajar Bootstrap: Mengenal System Grid Bootstrap 3.

Untuk menguji hasil membuat form login kita,  silahkan buka http://localhost/website/admin

kurang lebih hasil seperti ini

membuat halaman login dengan php bootsrtap

Sekian dulu tutorial php cara membuat website bag. Mempercantik halaman login dengan bootstrap nantikan tutorial cara membuat website berikutnya dan jangan lupa untuk LIKE FANS PAGE onphpid untuk info lebih lanjut. Serta jangan lupa komentarnya.

Mungkin Kamu Suka