Tutorial CRUD Laravel 7 & Vue JS #2 : Integrasi Dengan Vue JS - Halo teman-teman semuanya, di artikel sebelumnya kita sudah berhasil membuat Restful API menggunakan Laravel 7.
Di artikel kali ini kita semua akan membuat proses CRUD dengan Vue JS dengan cara mengintegrasikan Restful API yang sebelumnya kita sudah buat.
Langkah 1 - Install NPM
Langsung saja kita mulai, silahkan teman-teman masuk ke direktori projectnya menggunakan terminal atau CMD dengan cara :
cd lara-vue-spa
Kemudian jalankan perintah berikut ini untuk menginstall beberapa paket Node Module di project Laravel kita :
npm install
SIlahkan tunggu proses installasi paket-paket Node Module sampai selesai, ini akan membutuhkan waktu yang agak lebih lama karena akan mengunduh beberapa paketnya langsung dari internet.
Langkah 2 - Install Vue JS, Vue Router, Vue Axios
Oke, sekarang kita lanjutkan dengan menginstall Vue JS, Vue Router, Vue Axios di project Laravel kita, silahkan teman-teman jalankan perintah di bawah ini :
npm install vue vue-router vue-axios
Silahkan di tunggu juga, karena ini akan memakan waktu yang lama juga karena harus mengunduh paket-paket tersebut melalui internet.
Oke setelah selesai, kita bisa lanjutkan ke tahap selanjutnya, di tahap selanjutnya kita akan membuat beberapa file di dalam folder resourse/js.
Langkah 3 - Membuat Components Vue JS
Sekarang, silahkan teman-teman buat sebuah folder baru dengan nama components di dalam folder resourses/js. Dan setelah itu silahkan teman-teman buat folder lagi dengan nama posts di dalam folder components, kemudian di dalam folder posts silahkan buat 3 file, yaitu
- Index.vue
- Create.vue
- Edit.vue
Setelah itu silahkan teman-teman juga buat sebuah file baru lagi dengan nama App.vue di dalam folder resourses/js. Jadi jika struktur lengkapnya seperti berikut ini
resources/js/
├── components
├── posts
├── Index.vue
├── Create.vue
├── Edit.vue
├── App.vue
├── app.js
├── bootstrap.js
Langkah 4 - Mmebuat View di Laravel
Sekarang kita akan membuat View dengan nama app.blade.php di dalam folder resourses/views, kemudian silahkan teman-teman masukkan kode dibawah ini :
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app">
</div>
</body>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</html>
Kode di atas adalah view yang akan kita gunakan nanti untuk menampilkan hasil render dari Vue JS, dimana jika teman-teman perhatikan kita sudah menambahkan sebuah tag div dengan ID app.
Langkah 5 - Membuat Route di Laravel
Sekarang kita akan menambahkan sebuah route baru untuk menghandle SPA dari Vue JS agar di project Laravel kita tidak menghasilnya 404 / page not found.
Silahkan teman-teman buka file web.php di dalam folder routes, dan silahkan ganti semua kodenya menjadi seperti berikut ini :
<?php
Route::get('/', function () {
return view('app');
});
Route::get('/{any}', function () {
return view('app');
})->where('any','.*');
Dari route di atas, kita mengarahkan default project kita ke file view yang bernama app.blade.php dan kita juga menambahkan sebuah route apapun akan di arahkan ke app.blade.php.
KESIMPULAN
Pada artikel kali ini kita semua sudah berhasil menginstall Vue JS, Vue Router, Vue Axios di dalam project Laravel kita dan kita sudah berhasil membuat beberapa components yang akan kita gunakan dalam proses CRUD nanti.
Di artikel selanjutnya kita akan mencoba menampilkan data dari database menggunakan API dan kita akan panggil dengan component yang sudah kita buat dengan Vue JS.
Terima Kasih.