Cara Membuat Auto Load More saat Scroll pada PHP

Cara Membuat Auto Load More saat Scroll pada PHP – Setelah sebelumnya saya membahas tentang Cara Membuat Tombol Loadmore Menggunakan Ajax pada PHP, pada postingan sebelumnya kita membutuhkan action klik untuk menampilkan data selanjutnya. Tapi pada postingan ini kita akan membuat data akan muncul atau load more secara otomatis jika pengguna sudah mencapai halaman paling bawah. Berikuta adalah cara membuat loadmore/showmore otomatis saat discroll.

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.

 

Cara Menampilkan Data dan Membuat Load More Otomatis

Berikut adalah cara menampilkan card dari database MySQL dan membuat tombol loadmore/showmore otomatis saat scroll paling bawah

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 dan menggunakan ajax untuk loadmorenya 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 index.php kita buat tampilan atau div untuk menampilkan cardnya menggunakan ajax nanti. Kodenya adalah seperti berikut

 

4. Untuk menjalankan membuat load more secara otomatis maka kita perlu kode javascript dan ajaxnya. Scriptnya adalah seperti dibawah dan dimasukkan pada index.php pada tag <body> paling bawah

Penjelasan :

Pada script diatas berarti kita menampilkan hanya 4 data sekali load. Untuk card hanya ada pada file ambil_data.php yang kemudian ditampilkan menggunakan ajax.

 

5. Kemudian buat file ambil_data.php yang berisi kode untuk menampilkan data selanjutnya berupa card juga. Isikan ambil_data.php dengan script dibawah

Pada saat load data saya juga hanya menampilkan 4 card, jika sobat ingin menambahknya sobat hanya mengubah limit pada ajaxnya.

 

6. 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> pada file index.php kode dibawah ini

Begitulah cara kita membuat card sama tinggi sehingga lebih rapi.

 

7. Kemudian jalankan project dan akan muncul tampilan seperti dibawah

Jika sobat scroll kebawah maka akan muncul lagi 4 card. Cara ini tentunya ada kekurangannya juga loh.. coba bayangkan jika data ada 1000 dan yang dilihat ada di halaman 50 maka pengguna harus klik load more 50 kali beda dengan pagination pengguna bisa langsung klik halaman 50 atau jika belum muncul bisa ganti url menjadi page=50. Namun untuk mensiasatinya tenntu kita perlu menambahkan menu search yang mana sudah saya bahas bedanya pada postingan sebelumnya data ditampilkan pada tabel dan ini ditampilkan pada card. Dan karena kita menggunakan bootstrap tentunya card diatas menjadi responsive design mengikuti lebar layarnya.

Sekian postingan saya tentang Cara Membuat Auto Load More saat Scroll pada 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 Pagination pada Card View 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 *

fourteen + thirteen =