Cara Membuat Load More Dengan Mudah

Dalam sebuah website, cukup umum jika menemukan fitur berupa Load More. Fitur ini biasanya akan ditampilkan di bagian tertentu supaya pengguna dapat melihat tambahan informasi yang diinginkan. Salah satunya pada e-commerce, biasanya fitur Load More digunakan supaya pelanggan dapat melihat lebih banyak produk.

Nah, tentu Anda penasaran bukan bagaimana fitur ini dibuat? Untuk yang ingin tahu lebih lengkapnya, simak beberapa cara membuat Load More dengan mudah berikut ini.

Opsi Menambahkan Load More Pada Website

Sebelum melihat lebih jauh tentang detail langkah menambahkan fitur ini, ada baiknya memahami lebih dulu opsi-opsi yang ada dalam memunculkan fitur tersebut. Perlu diketahui bahwa membuat Load More tidak hanya dapat dilakukan dengan satu cara.

Seperti halnya membuat desain sebuah website secara utuh, ada banyak langkah serta cara yang dapat digunakan. Demikian halnya untuk membuat fitur Load More dapat melalui berbagai macam cara.

Load More sendiri sebenarnya merupakan bagian dari pagination namun dengan menambahkan sedikit modifikasi pada saat membuatnya. Sedangkan pagination merupakan fitur yang dapat membatasi tampilan pada website supaya lebih efisien.

Contohnya jika informasi pada halaman website terlalu panjang, maka pagination akan membuat tampilan tersebut terlihat sebagian dan sisanya akan seolah disembunyikan. Sehingga pada akhirnya tampilan website terlihat lebih baik dan rapi serta dapat membantu tampilan website yang lebih responsive saat diakses melalui beberapa perangkat.

Contoh dari Loadmore

Dalam mendesain website untuk memiliki tampilan seperti ini, maka yang kebanyakan dilakukan oleh para desainer website yaitu memanfaatkan framework yang dipilih. Sebagian besar para desainer web menyukai penggunaan framework Laravel dan Codeigniter. Maka dari itu, artikel ini akah memilih untuk membahas cara membuat Load More melalui kedua jenis framework tersebut. Mengenai detail langkah-langkahnya, dapat melihat lebih lanjut pada paragraph di bawah ini.

Cara Membuat Load More Melalui Lavarel Dengan Fitur VueJS

Yang pertama yaitu cara membuat Load More dengan memanfaatkan framework Lavarel serta fitur VueJS. Ini merupakan salah satu metode yang paling banyak dipilih saat mendesain website yang kompleks dengan banyak informasi penting maupun plugin di dalamnya.

Contohnya saat membuat website untuk e-commerce atau situs jual beli online. Biasanya kebanyakan akan memilih melakukan opsi yang satu ini. Untuk dapat membuat fitur Load More, maka lakukan langkah-langkah berikut.

Menyiapkan Komponen Pendukung

Pastinya pertama-tama hal penting yang harus dilakukan untuk memulai proses pembuatan fitur ini yaitu dengan menyiapkan apa saja komponen pendukungnya. Secara umum sudah pasti akan diperlukan webserver, composer, serta node Js. Terlebih dahulu lakukan proses install para pendukung ini supaya dapat memudahkan berjalannya proses pembuatan fitur nantinya.

Menginstall Laravel Dengan Composer

Selanjutnya yang perlu dilakukan yaitu melakukan install Laravel dengan menggunakan Composer. Sebagai informasi, sebaiknya hal ini dilakukan pada versi Laravel terbaru, yaitu Laravel 8. Supaya nantinya seluruh pendukung yang tersedia untuk menjalankan pembuatan fitur Load More berjalan lancar. Baru setelahnya lakukan proses install Laravel melalui Composer. Caranya cukup dengan mengetik perintah pada Composer untuk kemudian segera memasuki direktori projek yang dibuat.

Menginstall Node Js Dan Paket Pendukungnya

Setelah masuk ke dalam direktori projek yang dibuat, maka lanjutkan dengan melakukan proses install paket Laravel UI. Kemudian lanjutkan dengan menginstall komponen VueJS, komponen npm, serta komponen Vue Axios. Sebagai penutup, jangan lupa juga untuk menginstal Vue Router serta MomentJs. Apabila seluruhnya selesai dilakukan, artinya persiapan awal telah dilaksanakan.

Menambahkan Route Web Dan API

Beralih pada langkah berikutnya, yaitu untuk menambahkan Route Web serta API. Untuk melakukan hal tersebut, cukup membuka file web.php pada direktori Routes. Lanjutkan dengan menambahkan beberapa script juga pada direktori api.php pada direktori yang sama. Jika keduanya telah dilakukan, maka proses yang satu ini telah terselesaikan dengan baik.

Membuat Tampilan Utama

Langkah selanjutnya yaitu membuat tampilan utama yang berupa template. Buatlah file baru untuk mendukung hal ini kemudian simpan di dalam direktori Resources.

Membuat API Control User

Adapun sebelum beranjak lebih jauh untuk membuat komponen pada VueJs maka diperlukan pembuatan API untuk membantu melakukan proses pada data user untuk front end. Caranya dengan membuat controller baru dan menambahkan index baru sekaligus. Kemudian daftarkan controller pada Route supaya nantinya dapat diakses.

Mungkin bagi para pemula masih kesulitan memahami alur berpikir langkah yang satu ini. Adapun secara umum langkah ini dibuat untuk merespon permintaan data dari user saat komponen dimuat. Jika terdapat data yang termuat di halaman berikutnya, bukan pada halaman utama website, maka otomatis tombol Load More akan muncul. Apabila tombol tersebut ditekan, otomatis akan menjalankan perintah kembali pada API user dengan memunculkan data yang ada tersebut.

Membuat Komponen VueJS

Terakhir yaitu membuat komponen VueJs dengan jalan menambahkan berkas baru pada direktori Resources. Awali dengan melakukan definisi data komponen untuk menyimpan data yang diperlukan pada API user. Kemudian tambahkan method baru dan melakukan looping data. Terakhir daftarkan komponen yang telah dibuat supaya dapat memberikan tampilan yang diminta nantinya.

Melakukan Pengujian

Terakhir jika seluruh langkah di atas telah selesai dilaksanakan, maka lakukan pengujian dengan menyesuaikan Vue Js di dalam website. Setelah semua proses penyesuaian berjalan lancar, maka cukup membuka URL website dan lihatlah apakah fitur Load More telah sukses terpasang pada website. Jika sudah, artinya Anda telah berhasil membuat fitur ini pada website.

Cara Membuat Load More Melalui Codeigniter Dengan Fitur jQuery

Opsi selanjutnya bagi yang ingin membuat fitur Load More untuk website yang lebih ringan dan sederhana bisa melalui framework Codeigniter melalui fitur jQuery. Umumnya hal ini dilakukan oleh website-website yang bersifat memberikan informasi, misalnya website berisi Company Profile, atau untuk tipe website dengan model landing page. Dalam membuat Load More pada website semacam ini, berikut langkah-langkah yang dapat dilakukan.

Melakukan Persiapan

Hal pertama yang harus dilakukan yaitu memastikan persiapan untuk membuat fitur ini sudah siap sedia. Pastikan untuk memulai harus terlebih dahulu melakukan install Codeigniter dan sekaligus melakukan install jQuery pada website. Untuk melakukan hal ini cukup dengan mendownload file lalu menginstallnya satu demi satu secara bergantian. Jika keduanya sudah terpasang maka dapat memulai pada langkah berikutnya.

Membuat Tombol Load More

Berikutnya lanjutkan dengan terlebih dahulu menyiapkan tombol yang akan berguna sebagai tombol Load More dalam website. Untuk melakukan hal ini caranya cukup mudah, cukup dengan membuat script CSS untuk memasang tombol tersebut. Untuk 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.

Membuat Fitur Load More Dengan jQuery

Untuk melakukan desain pada back end atau menampilkan data yang dimaksud saat tombol Load More diakses, maka diperlukan pembuatan script untuk hal ini. Yang terpenting yaitu memastikan bahwa seluruh library pada jQuery telah terinstall seluruhnya, sehingga tidak ada kendala saat memasukkan script program untuk menghasilkan fitur yang diinginkan tersebut.

Baca juga : Cloud VPS server terbaik

Sesudahnya maka script dapat ditambahkan lalu disimpan sebagai template. Adapun proses tersebut 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 saat tombol Load More
• Lanjutkan dengan melakukan definisi fungsi jQuery untuk memanggil data selanjutnya dengan menggunakan AJAX.
• Sesudahnya 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.
• Sesudahnya maka 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.

Cara Membuat Load More Dengan Opsi Lainnya

Dari kedua penjelasan di atas, jika ingin membuat fitur Load More tidak hanya terbatas dengan menggunakan Lavarel dan Codeigniter saja. Namun dapat pula menggunakan source berupa framework lainnya yang juga beredar di kalangan desainer website. Hanya saja umumnya opsi-opsi lain kurang diminati karena memiliki fitur yang lebih minim dan langkah yang lebih kompleks. Namun demikian untuk memberikan pilihan, berikut ini beberapa cara lain yang bisa dipilih untuk dilakukan.

Membuat Auto Load More Dengan PHP Mysql

Untuk dapat memunculkan fitur Load More melalui langkah tersebut, cukup membuat database file pertama dan database file kedua. File pertama untuk data yang muncul pertama, dan file kedua untuk data yang muncul setelah menekan tombol Load More. Kemudian hubungkan keduanya dengan membuat file koneksi. Terakhir buatlah file untuk proses data dan file untuk auto load. Simpan semua file tersebut dan jalankan pada website.

Membuat Load More Dengan CSS Dan Java Script di WordPress

Jika ingin membuat fitur ini melalui CSS dan Java Script untuk WordPress, maka buatlah HMTL untuk frame Load More lebih dulu dan lanjutkan dengan membuat CSS. Terakhir buatlah script dengan jQuery untuk memunculkan sejumlah data yang ingin ditampilkan saat tombol Load More ditekan. Mudah, cepat, dan sederhana.

Itulah beberapa cara membuat Load More dengan mudah pada sebuah website. Tentunya bagi para pemula yang sedang mencoba membuat desain website sendiri, ada baiknya mengikuti langkah-langkah yang diberikan di atas.

Sehingga tampilan website yang mengandung fitur tersebut dapat dimunculkan dan membantu menghasilkan tampilan yang optimal seperti keinginan. Dengan demikian konsumen juga dapat melihat lebih jauh informasi apalagi yang dapat mereka peroleh saat mengakses fitur ini pada website Anda. Selamat mencobanya!