Tutorial Bootstrap Part 14 : Pagination dan Breadcrumb
Oke pada kesempatan kali ini rekayasaternaklele akan membahas tentang Pagination dan Breadcrumb pada Bootstrap.
Judul
Tutorial Bootstrap Part 14 : Pagination dan Breadcrum
Pengertian
Menurut Wikipedia, Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website
yang dapat mempercepat pekerjaan seorang pengembang website ataupun
pendesain halaman website. Sesuai namanya, website yang dibuat dengan
alat bantu ini memiliki tampilan halaman yang sama / mirip dengan
tampilan halaman Twitter atau desainer juga dapat mengubah tampilan
halaman website sesuai dengan kebutuhan.
Latar Belakang
Mencari
kemudahan dalam membuat front-end website yang cepat,responsive dan
praktis sehingga kita tidak perlu menulis kode CSS dari nol.
Maksud dan Tujuan
Memahami dan bisa menggunakan Bootsrap sehingga pengembangan fron end website lebih efektif dan efisien.
Alat dan Bahan
Text Editor dan PC
Jangka Waktu
1 Jam
Pembahasan
Pagination, adalah sebuah fitur yang digunakan untuk membatasi tampilan data agar tidak terlalu panjang dan lebih rapi. Penggunaan pagination lazim digunakan untuk menampilkan data dalam jumlah banyak, sehingga dapat dipisah / dipilih berapa data yang akan ditampilkan terlebih dahulu. Contohnya saat blog kita memiliki banyak artikel maka kita bsia membaginya menajdi beberapa halaman.
Untuk membuat Pagination, tambahkan class .pagination untuk elemen <ul>. Kemudian tambahkan .page-item untuk elemen <li> dan .page-link class untuk setiap link dalam <li> ( tag a).
Berikut script pagination pada bootsrap:
Keterangan :
- class active -> untuk menandai halaman yangs edang aktif saat ini.
- disabled -> untuk mematikan link yang menuju halaman tertentu.
Breadcrumb Navigation adalah sebuah menu navigasi/penunjuk arah halaman yang sedang dibuka berupa link horizontal berurut yang diawali dengan menu Home/Beranda >> Label >> Judul Halaman Yang Sedang Dibuka.
Breadcrumb ini memiliki fungsi yaitu untuk mempermudah pengunjung melacak lokasi dalam dokumen dan kembali ke awal halaman/home-page dengan mudah.
Menurut Jacob Nielsen, ditinjau dari sisi kegunaanya breadcrumb navigation berfungsi untuk menunjukkan lokasi/path dari halaman web/blog yang sedang dikunjungi, relatif terhadap struktur di atasnya serta menyediakan fitur one click access ke level halaman web/blog di atasnya sekaligus menghindari pengunjung tersesat karena terlalu dalam menjelajah web/blog kita.
Berikut scriptnya :
Kesimpulan
Referensi
https://www.w3schools.com/bootstrap4/bootstrap_pagination.asp
Pagibation digunakan untuk menampilkan data dalam jumlah banyak, sehingga dapat dipisah / dipilih berapa data yang akan ditampilkan terlebih dahulu. Sedangkan, Breadcrumb memiliki fungsi yaitu untuk mempermudah pengunjung melacak lokasi dalam dokumen dan kembali ke awal halaman/home-page dengan mudah.
0 Response to "Tutorial Bootstrap Part 14 : Pagination dan Breadcrumb"
Post a Comment