Cara Membuat Pagination pada Card View PHP

Cara Membuat Pagination pada Card View PHP – Hai ketemu lagi dengan saya dan postingan merupakan lanjutan dari postingan saya sebelumnya yaitu tentang Cara Menampilkan Data Pada Card Dinamis dari Database MySQL pada PHP. Karena pada postingan itu saya hanya membahas tentang cara menampilkan data di database ke dalam card view namun jika ada 1000 data maka akan diload semua dan akan menjadikan aplikasi menjadi lambat. Oleh karena itu saya memberikan solusi dengan pagination. Sebenarnya pagination sudah saya bahas namun pada postingan saya tentang pagination sebelumnya menggunakan tabel untuk menampilkan datanya dan kali ini menggunakan card untuk menampilkan datanya.

Baca juga :

Cara Membuat Pagination dengan Database MySQL pada PHP

Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP

 

Pada postingan ini saya hanya akan mencontohkan pagination standar, jika sobat ingin menampilkan dengan pagination menggunakan sehingga bisa menampilkan tanpa loading atau refresh halaman maka sobat perlu mengunjungi lagi postingan saya sebelumnya. Berikut adalah cara membuat card view dengan sama tinggi dan menggunakan pagination.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

 

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

 

3. Kemudian daripada sobat memasukkan datanya satu-persatu maka sobat bisa jalankan perintah query dibawah

Pada contoh gambarnya semua saya samakan yaitu artikel1.png jadi sobat harus menambahkan file dengan nama tersebut agar gambarnya muncul pada card.

 

Menampilkan Card View dan Membuat Pagination

Berikut adalah cara membuat card secara dinamis dan mempunyai tinggi yang sama dalam satu baris dan dengan pagination

1. Pertama tentunya seperti biasa kita membuat file koneksi.php yang berfungsi untuk menyambungkan dengan database dan isikan dengan script dibawah

 

2. Selanjutnya buat file index.php, dan masukkan kode cssnya karena untuk membuat card kita menggunakan bootstrap maka wajib hukumnya kita untuk memasukkan kode dibawah pada tag <head>

Karena untuk keperluan demo jadi saya menggunakan css dan js online, namun jika sobat ingin menggunakannya untuk keperluan development maka sobat harus mendownloadnya terlebih dahulu karena nanti tidak akan jalan jika dalam keadaan offline atau sobat bisa mendownloadnya bersama dengan project ini di akhir postingan.

 

3. Masih di file index.php pada tag body kita tambahkan kode dibawah untuk menampilkan datanya

Penjelasan :

Pada kode dibawah artinya kita batasi maksimal jumlah kata pada judulnya adalah 60 karakter sehingga jika judul sangat panjang maka judul akan dipotong dan ditambahkan “…” begitu pula pada deskripsinya. Untuk card saya tampilkan 8 pada setiap halamannya.

 

4. Untuk menambahkan pagination, sobat tambahkan kode dibawah ini terserah sobat mau dibawah sendiri atau diatas sendiri asalkan masih pada tag <body>, pada contoh saya contohkan saja paginationnya dibawah dan tengah. Scriptnya seperti dibawah

 

5. Jika sobat jalankan kode diatas sudah bisa namun ada masalah lagi jika ada 1 judul atau deskripsi yang sangat pendek maka tinggi dari card tidak sama sehingga terlihat tidak rapi. Oleh karena itu kita perlu menambahkan cssnya lagi yang bisa sobat buat pada file style.css atau bisa sobat masukkan pada tag <head> kode dibawah ini

Begitulah cara kita membuat card sama tinggi sehingga lebih rapi.

 

6. Jika sobat jalankan project maka akan muncul tampilan seperti dibawah

 

Bagaimana? jika sobat sudah melihat postingan saya tentang simple pagination pasti hampir sama bukan karena kita hanya merubah tabel menjadi card saja. Tentunya jika sobat menggunakan Ajax supaya saat pindah halaman tidak perlu loading/refresh halaman bisa sobat coba-coba juga dengan melihat postingan saya tentang pagination dengan ajax.Selain paginationnya tentu menu searchnya juga sama kita hanya mengubah dari search menampilkan ke dalam tabel menjadi search menampilkan ke dalam card. Untuk selanjutnya saya akan membahas juga cara menambahkan tombol load more. Jadi kita mengganti pagination dengan tombol load more. Dan karena kita menggunakan bootstrap tentunya card diatas menjadi responsive design mengikuti lebar layarnya.

Sekian postingan saya tentang Cara Membuat Pagination pada Card View PHP. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah dan apabila ada kesalahan saya mohon maaf. Kunjungi postingan saya lainnya untuk menambah wawasan sobat.

Baca juga :

Cara Membuat Pagination dengan Database MySQL pada PHP

Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP

Cara Membuat Tombol Loadmore Menggunakan Ajax pada PHP

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

Leave a Reply

Your email address will not be published. Required fields are marked *

five − one =