Pelajari cara menginstal Laravel 11 terbaru dan mengkonfigurasi stack modern termasuk Vite, Breeze, Sanctum, serta Tailwind CSS secara step‑by‑step untuk membangun aplikasi web yang cepat, aman, dan siap produksi.
1. Persiapan Lingkungan
Pastikan sistem Anda sudah terinstall:
- PHP >= 8.2
- Composer 2.x
- Node.js >= 20 (untuk Vite)
- Git
- Database (MySQL, PostgreSQL, atau SQLite)
1.1. Verifikasi Versi
php -v
composer -V
node -v
npm -v2. Instalasi Laravel 11
Gunakan Composer untuk membuat proyek baru dengan nama myapp:
composer create-project laravel/laravel myapp "^11.0"Masuk ke folder proyek:
cd myapp3. Konfigurasi Basis
3.1. File .env
Salin file contoh dan sesuaikan koneksi database:
cp .env.example .env
php artisan key:generateEdit .env:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_demo
DB_USERNAME=root
DB_PASSWORD=3.2. Migrasi Awal
php artisan migrate4. Integrasi Vite (Asset Bundler)
4.1. Install Dependencies
npm install --save-dev vite laravel-vite-plugin
npm install tailwindcss@latest postcss@latest autoprefixer@latest4.2. Inisialisasi Tailwind
npx tailwindcss init -pUbah tailwind.config.js:
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: { extend: {} },
plugins: [],
};4.3. 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,
}),
],
});4.4. Buat File CSS & JS
resources/css/app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;resources/js/app.js:
import '../css/app.css';
import.meta.glob(['../../vendor/laravel/framework/src/Illuminate/Views/**/*.blade.php']);4.5. Jalankan Dev Server
npm run devLaravel otomatis menambahkan 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>Laravel 11</title>
@vite(['resources/js/app.js'])
</head>
<body>
@yield('content')
</body>
</html>5. Instalasi Laravel Breeze (Starter Kit)
5.1. Install Package
composer require laravel/breeze --dev5.2. Scaffold Auth dengan Blade + Vite
php artisan breeze:installJika ingin menggunakan Inertia (Vue) atau React, tambahkan opsi --vue atau --react.
5.3. Install Frontend Dependencies
npm install && npm run dev5.4. Migrasi Auth Tables
php artisan migrate6. Mengamankan API dengan Laravel Sanctum
6.1. Install Sanctum
composer require laravel/sanctum6.2. Publish Config & Migration
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate6.3. Tambahkan Middleware
Di app/Http/Kernel.php tambahkan:
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,di dalam grup api (default sudah ada pada Laravel 11).
6.4. Definisikan Route API
// routes/api.php
use AppHttpControllersAPIAuthController;
use Illuminate\Support\Facades\Route;
Route::post('/login', [AuthController::class, 'login']);
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});6.5. Contoh Controller
namespace App\Http\Controllers\API;
use App\Models\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use Laravel\Sanctum\PersonalAccessToken;
class AuthController extends Controller
{
public function login(Request $request)
{
$request->validate([
'email' => 'required|email',
'password' => '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('api-token')->plainTextToken;
return response()->json(['token' => $token]);
}
}
7. Best Practice untuk Proyek Modern
- Environment Variables: Simpan rahasia (APP_KEY, DB_PASSWORD, SANCTUM_STATEFUL_DOMAINS) di file
.envdan jangan pernah commit. - Branching Git: Gunakan git flow –
mainuntuk release,devuntuk pengembangan, dan feature branch untuk tiap fitur. - Testing: Tuliskan unit & feature test menggunakan PHPUnit & Pest. Contoh:
php artisan test. - Code Style: Terapkan Laravel Pint (phpcs) untuk standar kode:
composer require laravel/pint --dev && ./vendor/bin/pint. - Cache Config & Routes di production:
php artisan config:cache && php artisan route:cache. - Queue & Jobs: Untuk email atau proses berat, gunakan Laravel Queues (database driver atau Redis).
8. Deploy ke Production
- Pastikan
APP_ENV=productiondanAPP_DEBUG=falsedi.env. - Jalankan migrasi dan optimasi:
php artisan migrate --force php artisan config:cache php artisan route:cache php artisan view:cache npm run build - Set permission storage dan bootstrap/cache menjadi writable.
- Gunakan web server (NGINX atau Apache) dengan PHP-FPM, pastikan puning
publicsebagai document root.
Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang terstruktur modern: Vite untuk asset bundling, Breeze sebagai starter kit UI, Sanctum untuk API token, serta best practice yang siap menghadapi skala produksi. Selanjutnya, Anda dapat menambahkan paket tambahan (mis. Spatie Permission, Livewire) sesuai kebutuhan aplikasi.
Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tailwind. Panduan step‑by‑step, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web dengan Laravel, PHP Framework, Web Development.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
Tidak ada komentar:
Posting Komentar