Membuat Fitur Loadmore di Laravel 7 dan Vue Js
Hari ini, saya akan sharing tentang fitur loadmore menggunakan Laravel 7 dan Vue Js. So, Sebenernya loadmore ini adalah pengembangan dari pagination. Jadi, loadmore ini konsepnya tidak jauh berbeda dengan pagination.
Agar cara membuat fitur loadmore di Laravel 7 dan Vue Js berjalan dengan lancar, mari ikuti step by step di bawah ini:
Step 1 – Siapkan Komponen Installasi
Ada beberapa tools yang saya gunakan, yaitu:
- Webserver (Laragon), Optional XAMPP, WAMP, Nginx dan lain-lain.
- Composer
- Node Js
Silahkan install komponennya jika belum memiliki salah satu dari komponen di atas.
Step 2 – Install Laravel 7 dengan Composer
Pada saat tutorial ini ditulis, versi terbaru dari Laravel itu sendiri adalah versi ke 7. Jadi, cukup mudah menginstallnya tanpa harus menyertakan versionnya.
Oke, langsung saja ketik perintah ini melalui composer:
composer create-project --prefer-dist laravel/laravel laravel7_loadmore_vuejs
Setelah itu masuk ke direktori project dengan mengetik:
cd laravel7_loadmore_vuejs
Step 3 – Install Node Js dan Package Pendukung
Setelah masuk ke dalam direktori project, silahkan ketik perintah berikut ini untuk menginstall package laravel ui:
composer require laravel/ui
Mulai versi ke 6 dan sekarang ke 7, Laravel telah memisahkan antara backend dengan UI. So, kita bisa memilih menggunakan bootstrap, react js atau vue js. Mantap.
Kemudian, silahkan ketik perintah berikut untuk menginstall komponen Vue Js di project kita:
php artisan ui vue
Setelah melakukan perintah di atas, kita akan diminta untuk mengetik npm install && npm run dev. Namun kali ini, kita akan melakukan npm install terlebih dahulu.
Ketik:
npm install
Selanjutnya kita akan menginstall Vue Axios untuk menghandle HTTP Request sebagai penghubung antara Backend dan Frondend.
Ketik perintah berikut ini:
npm install vue-axios
Kemudian kita membutuhkan Vue Router untuk menghandle perubahan page per page. Silahkan ketik perintah berikut:
npm install vue-router
Saya pun membutuhkan momentjs karena di field yang akan tampil (contohnya created at), akan di custom tampilannya. Untuk menghandlenya, ketik perintah berikut ini:
npm install moment --save
Oke, sampai di sini persiapannya sudah hampil selesai. Now, kita akan masuk ke bagian Laravelnya.
Step 4 – Tambahkan Route Web dan Api
First, silahkan buka file web.php yang ada di dalam direktori
routes/web.php. For example, saya akan menambahkan script di bawah ini:Route::get('/{any}', function () {
return view('app');
})->where('any', '.*');
Second, kita akan menambahkan beberapa script di bawah ini pada api.php yang ada di direktori
routes/api.php. So, ketik kode berikut ini:Route::get('/user', 'Api\UserController@index');
Oke, selesailah tahapan ini.
Step 5 – Buat View Utama
Walaupun kita menggunakan Vue Js, tetap saja di Laravel 7 kita membutuhkan vie utama yang berfungsi sebagai template. For example, saya akan membuat file baru bernama
app.blade.php dan simpan di resources/views. Silahkan ketik kode berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html><html lang="{{ app()->getLocale() }}"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel 7 Loadmore with Vue Js</title> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"></head><body> <div id="app"></div> <script src="{{ asset('js/app.js') }}"></script></body></html> |
Step 6 – Buat API Controller User
Sekarang kita akan membuat sebuah controller yang kita tujukan khusus menangani API. Silahkan ketik perintah berikut:
php artisan make:controller Api/UserController
So, kita buka file yang baru saja kita buat dan modifikasi sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <?phpnamespace App\Http\Controllers\Api;use App\Http\Controllers\Controller;use Illuminate\Http\Request;use Illuminate\Http\JsonResponse;class UserController extends Controller{ public function index(Request $request): JsonResponse { $users = \App\User::orderBy('name')->simplePaginate((int) $request->get('limit', 10)); return response()->json($users)->withCallback($request->callback); }} |
Konsep loadmore sendiri berbeda dari pagination. Jika di pagination kita menampilkan data yang lain dan menghilangkan data sebelumnya. But, di
loadmore justru kita tidak menghilangkan tampilan sebelumnya. Justru malah menambahkan data berikutnya.
Karena itu, saya menggunakan
Request $request setiap kali ada permintaan tampilan data dari client.
Kemudian pada method
withCallback($name) berfungsi untuk merender output yang kita inginkan menjadi JSONP. JSONP memiliki fungsi untuk menghindari kesalahan cross domain dari AJAX request apabila frontend dan backend berada di domain yang berbeda. Output JSONP akan dieksekusi jika menerima request dengan nama callback, seperti query string ?callback=users misalnya. (Sumber: Medium Laravel Id)
Meski begitu, Anda juga dapat menulis method callback sebagai berikut:
return response()->jsonp($request->callback, $user);
Step 7 – Create Data Dummy
Kita membutuhkan minimal 100 data dummy untuk mendukung fitur loadmore ini. So, langsung saja ketik perintah berikut ini:
php artisan make:seeder UserSeeder
Kemudian buka file
UserSeeder.php yang ada di direktori database/seeds. For example, saya akan memodifikasi filenya sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <?phpuse Illuminate\Database\Seeder;class UserSeeder extends Seeder{ /** * Run the database seeds. * * @return void */ public function run() { factory(App\User::class, 100)->create(); }} |
Kode di atas berguna untuk menggenerate 100 data dummy for users.
Jadi, Anda perlu membuat database bernama laravel7_loadmore_vue.
Kemudian buka file
.env dan modifikasi bagian konfigurasi databasenya. For example, ketik kode berikut:DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel7_loadmore_vuejs DB_USERNAME=root DB_PASSWORD=
So, silahkan ketik perintah berikut untuk memigrasi database:
php artisan migrate
Setelah berhasil migrate table users. Sekarang kita akan migrate data dummy dengan perintah:
php artisan db:seed --class="UserSeeder"
Jika sukses, di database Anda akan terdapat 100 data user.
Step 8 – Cek API melalui Postman
Cobalah untuk mengecek apakah API yang sudah kita buat berjalan dengan lancar atau belum.
Silahkan ketik perintah berikut ini:
php artisan serve
Kemudian buka URL berikut ini dengan method GET di Postman:
localhost:8000/api/user
Jika berhasil dan tidak ada error, ini lah hasilnya:
Jika sudah tampil seperti di atas, kita sudah siap untuk masuk ke bagian Vue Js nya.
Step 9 – Menyiapkan dan Memodifikasi Component Vue Js
Pertama-tama, silahkan lihat structur project di bawah ini:
Component yang kita tambahkan atau modifikasi adalah file
app.js, file components/App.vue dan components/user/Index.vue.
So, mari kita mulai dari
app.js, berikut isi kodenya:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */require('./bootstrap');window.Vue = require('vue');import VueRouter from 'vue-router';import VueAxios from 'vue-axios';import axios from 'axios';import moment from 'moment';import App from './components/App.vue';import UserIndex from './components/user/Index.vue';Vue.filter('formatDate', function(value) { if (value) { return moment(String(value)).format('DD/MM/YYYY'); }});Vue.use(VueRouter);Vue.use(VueAxios, axios);const routes = [ { name: 'home', path: '/', component: UserIndex }]; const router = new VueRouter({ mode: 'history', routes: routes});const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app'); |
Kemudian pada file
App.vue silahkan ketik kode berikut:
1
2
3
4
5
6
7
8
9
10
| <template> <div class="page"> <nav class='navbar navbar-dark bg-dark'> <div class='container'> <router-link :to="{ name: 'home' }" class="navbar-brand">Ilmu Coding</router-link> </div> </nav> <router-view></router-view> </div></template> |
Kemudian pada file user/Index.vue silahkan ketik kode berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <template> <div class='container py-4'> <div class='row justify-content-center'> <div class='col-md-8'> <div class='card'> <div class='card-header'>All User</div> <div class='card-body'> <div class="table-responsive"> <table class="table table-bordered table-hover"> <thead> <tr> <th width="50" class="text-center">No</th> <th>Name</th> <th>Email</th> <th>Created At</th> </tr> </thead> <tbody> <tr v-for="(user, index) in users.data" :key="user.id"> <td width="50" class="text-center">{{ index + 1 }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td>{{ user.created_at | formatDate}}</td> </tr> </tbody> </table> </div> <div v-if="users.next_page_url" class="card-footer"> <button @click.prevent="paginate(users.next_page_url)" type="button" class="btn btn-primary btn-block">Load More</button> </div> </div> </div> </div> </div> </div></template><script>export default { data() { return { users: {} } }, created() { this.paginate(); }, methods: { paginate(url = ''){ this.axios.get(url ? url : 'api/user') .then(response => { if(!this.users.data){ this.users = response.data; } else { this.users.data.push(...response.data.data) this.users.next_page_url = response.data.next_page_url } }).catch(error => console.log(error)); } } }</script> |
Selesai. Setelah ini kita bisa melakukan testing.
Step 10 – Compiling dan Testing
Sebelum menjalankan project, pastikan Anda mengetik perintah berikut untuk penyesuaian Vue js di project kita:
npm run dev
Kemudian jika belum, lakukan perintah ini untuk menjalankan project:
php artisan serve
Jika berjalan dengan lancar, silahkan buka URL berikut:
localhost:8000
Maka hasilnya adalah:
Silahkan lakukan ujicoba dengan mengetik tombol loadmore.
Apa Selanjutnya?
Alhamdulillah tutorial membuat fitur loadmore menggunakan Laravel 7 dan Vue js sudah selesai. But, jangan puas dulu.
Sebab Anda juga bisa mempelajari tutorial lainnya mengenai Laravel di Ilmu Coding.
Oh iya, source code tutorial ini bisa Anda download melalui link Github di bawah ini:
Oke, semoga tutorial kali ini bermanfaat dan selemat belajar.
No comments:
Post a Comment