Materi ini cocok untuk membangun aplikasi web modern menggunakan Laravel sebagai Backend (API) dan Vue.js sebagai Frontend, terhubung dengan database MySQL.
Gambaran Arsitektur
[ Vue.js (Frontend) ] ---> [ Laravel (REST API) ] ---> [ MySQL Database ]
Axios Controller / Model Tabel
- Vue.js: tampilan & interaksi user
- Laravel: logika bisnis & API
- Database: penyimpanan data
Studi Kasus
Kita akan membuat Aplikasi Manajemen Berita Sederhana:
- CRUD Berita (Create, Read, Update, Delete)
- Backend: Laravel API
- Frontend: Vue.js
Tabel: beritas
- id
- judul
- isi
- created_at
- updated_at
BAGIAN A — BACKEND (Laravel)
1. Instalasi Laravel
composer create-project laravel/laravel api-berita
cd api-berita
php artisan serveAkses:
http://127.0.0.1:80002. Konfigurasi Database
Edit file .env
DB_DATABASE=db_berita
DB_USERNAME=root
DB_PASSWORD=Buat database db_berita di phpMyAdmin.
3. Membuat Migration
php artisan make:migration create_beritas_tableEdit file migration:
public function up(): void
{
Schema::create('beritas', function (Blueprint $table) {
$table->id();
$table->string('judul');
$table->text('isi');
$table->timestamps();
});
}Jalankan:
php artisan migrate4. Membuat Model
php artisan make:model Beritaapp/Models/Berita.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Berita extends Model
{
protected $fillable = ['judul', 'isi'];
}
5. Membuat Controller API
php artisan make:controller Api/BeritaControllerIsi controller:
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
//use App\Http\Controllers\Api\BeritaController;
use Illuminate\Http\Request;
use App\Models\Berita;
class BeritaController extends Controller
{
public function index() {
return Berita::all();
}
public function store(Request $request) {
return Berita::create($request->all());
}
public function show($id) {
return Berita::find($id);
}
public function update(Request $request, $id) {
$berita = Berita::find($id);
$berita->update($request->all());
return $berita;
}
public function destroy($id) {
return Berita::destroy($id);
}
}
6. Routing API
Routing API di routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\BeritaController;
Route::get('/', function () {
return view('welcome');
});
Route::prefix('api')->group(function () {
Route::apiResource('berita', BeritaController::class);
});
Hasil endpoint: php artisan route:list
GET /api/berita
POST /api/berita
GET /api/berita/{id}
PUT /api/berita/{id}
DELETE /api/berita/{id}BAGIAN B — FRONTEND (Vue.js)
7. Instalasi Vue.js (Vite)
npm create vite@latest vue-berita
cd vue-berita
npm install
npm run dev✅ Pilihan yang DISARANKAN (Pemula / Kelas Laravel + Vue)
Saat muncul pilihan seperti ini di npm create vite@latest vue-berita, PILIH SEPERTI INI:
✔ Vue
✔ JavaScript
✖ TypeScript
✖ JSX Support
✔ Router (SPA development)
✖ Pinia (state management)
✖ Vitest (unit testing)
✖ End-to-End Testing
✖ Linter
✖ PrettierRouter (SPA development) → ✅ WAJIB
Kenapa?
- Hampir semua web modern butuh halaman:
/login/berita/dashboard
- Sangat relevan dengan Laravel API
8. Install Axios
👉 install di folder vue-berita, BUKAN di root Laravel.
npm install axiosStruktur project kita sekarang kira-kira seperti ini:
project/
├─ api-berita/ ← Laravel (Backend)
│ └─ composer.json
│
├─ vue-berita/ ← Vue + Vite (Frontend)
│ ├─ package.json
│ └─ node_modules/🔹 Axios itu milik siapa?
- Axios = library JavaScript
- Dipakai oleh Vue (Frontend)
- Didaftarkan di
package.jsonmilik Vue
9. Struktur Komponen
src/
├─ components/
│ └─ Berita.vue
├─ App.vue10. Komponen Berita.vue
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const beritas = ref([])
const judul = ref('')
const isi = ref('')
const loadData = async () => {
const res = await axios.get('http://127.0.0.1:8000/api/berita')
beritas.value = res.data
}
const simpan = async () => {
await axios.post('http://127.0.0.1:8000/api/berita', {
judul: judul.value,
isi: isi.value
})
judul.value = ''
isi.value = ''
loadData()
}
onMounted(loadData)
</script>
<template>
<h2>Manajemen Berita</h2>
<input v-model="judul" placeholder="Judul" />
<textarea v-model="isi" placeholder="Isi"></textarea>
<button @click="simpan">Simpan</button>
<ul>
<li v-for="b in beritas" :key="b.id">
<b>{{ b.judul }}</b><br />
{{ b.isi }}
</li>
</ul>
</template>
11. Gunakan di App.vue
<template>
<Berita />
</template>
<script setup>
import Berita from './components/Berita.vue'
</script>
BAGIAN C — Integrasi & Testing
12. Jalankan Server
- Laravel:
php artisan serve
- Vue:
npm run dev
Buka Vue → data tersimpan ke database via Laravel API.
🔴 Jika Muncul Masalah tidak bisa submit
POST /api/berita → 419 (unknown status)
👉 419 = CSRF TOKEN ERROR
Laravel menganggap request kamu sebagai request web, padahal itu API dari Vue.
Kenapa Ini Terjadi (Versi Mudah Dipahami)
- Laravel 12 → semua route ada di
web.php web.phpotomatis pakai middleware CSRF- Vue tidak mengirim CSRF token
- Laravel menolak → 419
✅ SOLUSI RESMI & BENAR (Laravel 12+)
🔧 Langkah 1 — Buka file:
bootstrap/app.php
🔧 Langkah 2 — Cari bagian withMiddleware
Biasanya seperti ini:
->withMiddleware(function (Middleware $middleware) {
//
})
🔧 Langkah 3 — Tambahkan CSRF Exception untuk API
Ubah jadi seperti ini:
use Illuminate\Foundation\Configuration\Middleware;
->withMiddleware(function (Middleware $middleware) {
$middleware->validateCsrfTokens(except: [
'api/*',
]);
})
✅ SELESAI
🔄 Langkah 4 — Restart Server (WAJIB)
php artisan serve
Refresh Vue → coba POST lagi
👉 Error 419 akan HILANG
