Artikel cara design website dengan bootstrap ini merupakan kelanjutan dari artikel sebelumya (https://soft-gain.com/2020/05/30/tutorial-laravel-menggunakan-seeder-aplikasi-inventory-part-3/). Pada kesempatan kali ini kita akan coba menggunakan tempate binary admin (https://www.free-css.com/free-css-templates/page204/binary-admin) yang design website nya menggunakan bootstrap, template ini bisa kita dapatkan dengan gratis, saya memilih menggunakan template ini karena design nya yang simple dan mudah di aplikasikan menurut saya. Terlebih lagi template ini sudah mengusung tema responsive jadi kita tidak perlu repot lagi membuat versi mobile nya.
Tamplate ini juga menggunakan bootstrap, apa itu bootstrap? bootstrap adalah sebuah library CSS yang biasa di gunakan oleh front end developer untuk mempermudah pengerjaan di sisi front end / tampilan. Mengapa bisa memudahkan? karena dengan menggunakan bootstrap, developer tinggal memanggil kelas yang sudah di sediakan, seperti ingin membuat tombol, menu navigasi, table dan lain-lain. Bootstrap sendiri dengan konsep 12 grid column nya sudah mendukung untuk pembuatan website yang responsive. Untuk lebih detail nya bisa di lihat di official website nya (https://getbootstrap.com/).
Berikut ini adalah contoh penerapan template binary admin pada apikasi yang sudah kita buat sebelumnya :
Sebenarnya masih banyak sekali komponen yang saya temukan dalam pembuatan tampilan dengan template ini, di dalam nya ia juga menggunakan jquery sebagai library pengganti Js native, menggunakan font-awesome sebagai tool-kit pembuatan icon dan lain-lain.
Pada artikel kali ini saya tidak akan terlalu panjang lebar karena saya hanya memindahkan template yang sudah ada ke dalam projek yang sedang di kembangkan. Mungkin jika ada kesempatan saya akan membahas secara khusus bagaimana kebiasaan dan pengalaman saya dalam menggunakan bootstrap. Untuk full source nya seperti biasa bisa di ambil dari repo saya (https://github.com/ImmanuelJL/belajar-laravel), ambil dari cabang aplikasi stok barang. Terima kasih.