Panduan Membuat Load More pada Website

Bagi kamu yang kerap mengakses website, pasti sering menemukan fitur Load More. Biasanya fitur ini ditampilkan di bagian tertentu agar audience dapat melihat tambahan informasi yang tersedia.

Load More merupakan bagian dari fitur pagination. Fitur panigation ini berfungsi untuk membatasi tampilan pada website supaya lebih efisien. Misalnya, informasi pada halaman website terlalu panjang, maka pagination akan membuatnya terlihat sebagian dan sisanya seolah disembunyikan. Sehingga tampilan website terlihat lebih baik dan rapi, serta lebih responsive saat diakses melalui berbagai perangkat. Untuk membuat tampilan website seperti itu Anda dapat memanfaatkan framework, seperti Laveral dan Codeigniter.

Lantas, bagaimana cara membuat Load More menggunakan framework? Simak penjelasannya berikut ini!

Cara Membuat Load More melalui Lavarel dan Fitur VueJS

1) Siapkan Komponen Pendukung

Umumnya, untuk memulai proses pembuatan Load More diperlukan web server, composer, dan node Js. Maka dari itu, bagi Anda yang belum mempunyai ketiga komponen pendukung tersebut Anda bisa menginstalnya terlebih dahulu supaya dapat memudahkan proses pembuatan fiturnya nanti.

2) Install Laveral dengan Composer

Selanjutnya, Anda diharuskan untuk install Laveral versi terbaru dengan menggunakan Composer. Caranya cukup dengan mengetik perintah pada Composer untuk kemudian segera memasuki direktori projek yang dibuat.

3) Install Node Js dan Paket Pendukungnya

Setelah masuk ke direktori projek, lanjutkan proses install paket Laveral UI. Lalu lanjutkan dengan menginstall komponen VueJS, komponen npm, serta komponen Vue Axios. Dan jangan lupa juga untuk menginstall Vue Router serta MomentJs. Dengan demikian, persiapan awal telah selesai dilakukan.

4) Tambahkan Route Web dan API

Langkah selanjutnya, yaitu menambahkan Route Web dan API. Anda dapat melakukannya dengan membuka file web.php pada direktori Routes. Lalu lanjutkan dengan menambahkan beberapa script api.php pada direktori yang sama.

5) Buat Tampilan Utama

Tampilan utama ini berupa template. Buatlah file baru untuk mendukung hal ini lalu simpan di dalam direktori Resources.

6) Buat API Control User

Sebelum membuat komponen pada VueJs, diperlukan pembuatan API untuk melakukan proses pada data user untuk front end. Dengan cara membuat controller baru dan menambahkan index baru. Kemudian daftarkan controller pada Route supaya nantinya bisa di akses.

Secara umum langkah ini dibuat untuk merespon permintaan data dari user saat komponen dimuat. Jika ada data yang termuat di halaman berikutnya, bukan pada halaman utama website, maka otomatis tombol Load More akan muncul. Dan jika tombol tersebut ditekan, otomatis akan menjalankan perintah kembali pada API user dengan memunculkan data yang ada tersebut.

7) Membuat Komponen VueJs

Langkah terakhir yaitu membuat komponen VueJs, yaitu dengan cara menambahkan berkas baru pada direktori Resources. Pertama-tama, lakukan definisi data komponen untuk menyimpan data yang diperlukan pada API user. Lalu, tambahkan method baru dan lakukan looping data. Terakhir daftarkan komponen yang telah dibuat supaya dapat memberikan tampilan yang diminta.

8) Lakukan Pengujian

Jika seluruh rangkain di atas telah selesai dilakukan. Langkah selanjutnya, yaitu melakukan pengujian dengan menyesuaikan VueJs di dalam website. Jika semua proses penyesuaian berjalan lancar dan berhasil, maka cukup membuka URL website dan lihat apakah fitur Load More telah sukses terpasang pada website. Jika sudah, itu artinya Anda telah berhasil membuat fitur ini pada website.

Cara Membuat Load More Melalui Codeigniter melalui Fitur jQuery

1) Lakukan Persiapan

Hal pertama yang harus dilakukan, yaitu menginstall Codeigniter dan sekaligus melakukan install jQuery pada website. Cukup dengan mendownload file lalu menginstallnya satu demi satu secara bergantian. Jika keduanya sudah terpasang maka dapat memulai pada langkah berikutnya.

2) Buat Tombol Load More

Langkah selanjutnya yaitu Anda harus menyiapkan tombol yang berguna sebagai tombol Load More dalam website. Caranya cukup mudah, cukup dengan membuat script CSS untuk memasang tombol tersebut. Langkah ini hanya membantu menampilkan tombol di dalam website sebagai front end saja sehingga nantinya akan muncul tombol Load More pada website. Namun, belum mengarah pada data yang ingin ditampilkan.

3) Buat Fitur Load More dengan jQuery

Untuk membuat desain pada back end atau menampilkan data saat tombol Load More diakses, maka diperlukan pembuatan scripti. Yang terpenting, yaitu memastikan bahwa seluruh library pada jQuery telah terinstall semuanya sehingga tidak ada kendala saat memasukkan script program untuk menghasilkan fitur Load More.

Jika sudah, maka script dapat ditambahkan lalu disimpan sebagai template. Berikut ini prosesnya secara lebih lengkap dijabarkan sebagai berikut:

• Membuat index.php untuk sejumlah data yang ingin ditampilkan lebih dulu. Misalnya menampilkan sebuah data lalu kemudian menghubungkan data tersebut pada data selanjutnya pada tombol Load More
• Lanjutkan dengan melakukan definisi fungsi jQuery untuk memanggil data selanjutnya dengan menggunakan AJAX.
• Selanjutnya pisahkan script data yang ditampilkan dan data yang akan dimunculkan setelah mengakses tombol Load More. Caranya dengan menyisipkan parameter GET di antara kedua script data tersebut, yaitu antara data yang tampil dengan data yang hanya tampil setelah diakses. Untuk melakukan hal ini sebaiknya buatlah pada file yang baru.
• Setelah proses ini selesai, maka percantik tampilan dengan menambahkan CSS pada script. Lakukan hal ini sesuai tampilan yang diinginkan misalnya dari sisi penggunaan font maupun ukuran font yang dipilih. Sehingga saat ditampilkan baik data awal maupun data lanjutan akan terlihat tepat.
• Terakhit lakukan pengujian pada website. Lihat hasil dari langkah tersebut dan tekan tombol Load More pada website. Apabila data yang diharapkan muncul terlihat dengan baik dan rapi, artinya seluruh proses telah dilaksanakan dengan baik.

Itulah penjelasan singkat tentang Cara Membuat Load More. Semoga bermanfaat!