Persiapan CRUD Laravel dan Vue.js

Hal yang pertama Anda lakukan pada tutorial ini cuma melakukan instalasi dan beberapa konfigurasi berkas. Jadi di sini Anda akan menggunakan Laravel 8 dan Vue.js 3 yang saat ini sedang banyak dicari, karena tutorial ini menggunakan SPA (Single Page Application) itu cukup menyenangkan dengan Vue.js.

Daftar isi:

Instalasi Laravel

Lakukan instalasi Laravel menggunakan composer saya harap Anda sudah menginstalnya dan lakukan perintah ini pada terminal Anda.

laravel new CrudLaravelVuejs

Belum melakukan instalasi global Laravel, gunakan cara ini:

composer create-project --prefer-dist laravel/laravel CrudLaravelVuejs

Instal paket

Pada Laravel 8 belum mendukung Laravel Mix 6 sejak pertama kali artikel ini dibuat, maka dari itu membutuhkan peningkatan Laravel Mix agar mendukung Vue.js 3. Perlu diketahui Anda akan menggunakan kerangka kerja CSS Bulma, silakan lakukan instalasi di terminal Anda pada direktori utama projek Laravel.

npm instal bulma vue@^3 vue-router@4 @vue/compiler-sfc vue-loader@^16

atau menggunakan yarn:

yarn add bulma vue@^3 vue-router@4 @vue/compiler-sfc vue-loader@^16

Catatan: Lihat permintaan tarik dari repositori Laravel, peningkatan Laravel Mix 6 telah dibahas https://github.com/laravel/laravel/pull/5505. Saat ini permintaan tarik tersebut sudah disetujui, sekarang Anda tidak perlu melakukan peningkatan Laravel Mix.

Struktur berkas

Berikut hasil struktur berkas yang harus Anda persiapkan sejak awal dan tutorial berikutnya Anda tidak menggalami kebingungan 😅. Oke!, lakukan ini segera dan ikuti tahapan selanjutnya. Ingat!, apabila ada berkas yang sudah ada jangan melakukan penghapusan.

resources
|
|---css
|       app.css
|
|---js
|   |   app.js
|   |   App.vue
|   |   bootstrap.js
|   |   router.js
|   |   
|   `---pages
|       |   index.vue
|       |
|       `---users
|               create.vue
|               edit.vue
|               index.vue
|               show.vue
|
`---views
        app.blade.php

Lihat gambar dibawah ini:

gambar 1

Menambahkan controller

Seperti biasanya saya masih menggunakan tabel users untuk tutorial CRUD seperti tutorial CRUD dengan Eloquent Laravel. Alasannya karena tabel users Anda dituntut untuk membuat password hash, disitulah mengapa saya menggunakan tabel tersebut dan tidak membuat tabel sendiri. Silakan buat controller dengan nama berkas UserController.php jalankan perintah ini di terminal Anda.

php artisan make:controller UserController --resource

Setelah selesai membuat berkas tersebut tambahkan model User, seperti dibawah ini:

use App\Models\User;

Silakan lihat gambar dibawah ini:

gambar 2

Catatan: Hapus fungsi create() dan edit() karena tidak akan digunakan pada seri tutorial ini pada berkas UserController.php.

Membuat rute API

Saatnya Anda membuat REST API Laravel yang cukup sederhana lakukan pada berkas api.php pada direktori routes dan sesuaikan skrip ini di berkas tersebut.

use App\Http\Controllers\UserController;

...

Route::resource('users', UserController::class);

Lihat gambar dibawah ini:

gambar 3

Catatan: Jika Anda meletakan di berkas api.php secara bawaan akan menambahkan prefix api jadi http://127.0.0.1:8000/api. Ingat!, rute ini dibuat tidak menggunakan middleware autentikasi.

Membuat rute WEB

Jadikan rute bawaan menjadi seperti dibawah ini pada berkas web.php di direktori routes.

Route::get('/{path}', function () {
    return view('app');
})->where('path', '.*');

Lihat gambar dibawah ini:

gambar 4

Skrip app.blade.php

Salin dan tempelkan skrip dibawah ini pada berkas app.blade.php yang seharusnya sudah dibuat berdasarkan struktur berkas yang ada pada langkah diatas.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ config('app.name') }}</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Sekarang saatnya Anda melanjutkan tutorial selanjutnya, saat ini belum kelihatan hasil dari tutorial ini. Selamat mencoba.