Tutorial step‑by‑step ini membahas cara menginstal Laravel 11 terbaru, mengkonfigurasi Vite untuk asset bundling, menambahkan Breeze untuk scaffolding auth, serta mengamankan API dengan Sanctum. Ikuti panduan praktis ini untuk memulai proyek Laravel yang modern, cepat, dan aman pada tahun 2026.
1. Persiapan Lingkungan
1.1. Persyaratan Sistem
- PHP >= 8.2
- Composer 2.x
- Node.js >= 20 (untuk Vite)
- Database MySQL atau Postgres
1.2. Instalasi Composer dan Node
Pastikan kedua paket sudah terinstall dan terkonfigurasi di PATH.
composer --version
node -v
npm -v2. Membuat Project Laravel 11 Baru
composer create-project laravel/laravel blog --prefer-dist "11.*"Masuk ke folder project:
cd blog3. Konfigurasi Vite (Asset Bundler Modern)
3.1. Instalasi Dependensi Front‑end
npm install
npm install --save-dev vite laravel-vite-plugin3.2. Update vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});3.3. Sesuaikan Blade Layout
Ganti tag @vite di resources/views/layouts/app.blade.php:
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ config('app.name', 'Laravel') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
@yield('content')
</body>
</html>3.4. Jalankan Development Server
npm run devVite akan meng‑hot‑reload perubahan file JS/CSS secara otomatis.
4. Menambahkan Laravel Breeze untuk Authentication Scaffold
4.1. Instalasi Breeze
composer require laravel/breeze --dev
php artisan breeze:install vueOpsional: gunakan react atau blade sesuai kebutuhan.
4.2. Install Front‑end Dependencies
npm install && npm run dev4.3. Migrasi Database
php artisan migrateSetelah ini, route /register dan /login sudah siap.
5. Mengamankan API dengan Laravel Sanctum
5.1. Instalasi Sanctum
composer require laravel/sanctum5.2. Publish Config & Migrations
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate5.3. Tambahkan Middleware
Di app/Http/Kernel.php, tambahkan:
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],5.4. Membuat Token API
// routes/api.php
use App\Models\User;
use Illuminate\Http\Request;
Route::post('/login', function (Request $request) {
$request->validate([
'email' => 'required|email',
'password' => 'required',
'device_name' => 'required'
]);
$user = User::where('email', $request->email)->first();
if (! $user || ! Hash::check($request->password, $user->password)) {
return response()->json(['message' => 'Invalid credentials'], 401);
}
$token = $user->createToken($request->device_name)->plainTextToken;
return response()->json(['token' => $token]);
});
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});5.5. Mengkonsumsi API di Front‑end (Vue contoh)
import axios from 'axios';
async function login(){
const res = await axios.post('/api/login', {
email: '[email protected]',
password: 'secret',
device_name: 'web'
});
axios.defaults.headers.common['Authorization'] = `Bearer ${res.data.token}`;
}
6. Best Practice Modern untuk Proyek Laravel 11
- Environment Variables: Simpan semua kredensial di
.envdan jangan pernah commit file tersebut. - Database Migrations & Seeders: Selalu gunakan migration untuk perubahan skema dan seeder untuk data dummy.
- Service Container: Bind service‑provider khusus di
app/Providers/AppServiceProvider.phpuntuk memudahkan testing. - Testing: Tuliskan unit test dengan PHPUnit dan feature test dengan Laravel Pest untuk memastikan integritas kode.
- Cache & Queue: Aktifkan Redis sebagai driver cache dan queue di
.env(CACHE_DRIVER=redis, QUEUE_CONNECTION=redis). - Code Style: Gunakan Laravel Pint (composer require laravel/pint --dev) untuk standar coding.
- Deploy: Manfaatkan Laravel Octane (Swoole) pada production untuk performa tinggi, dan gunakan CI/CD pipeline (GitHub Actions) yang menjalankan
php artisan migrate --forcesetelah deploy.
Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki proyek Laravel 11 yang terstruktur, cepat berkat Vite, lengkap dengan authentication scaffold dari Breeze, serta API yang aman melalui Sanctum. Terapkan best practice modern seperti service container, testing, dan caching untuk memastikan aplikasi tetap scalable dan maintainable di 2026.
Tutorial step‑by‑step setup Laravel 11 terbaru dengan Vite, Breeze, Sanctum, dan best practice modern untuk pengembangan web 2026.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
Tidak ada komentar:
Posting Komentar