Laravel adalah framework PHP yang populer karena kemudahan, fleksibilitas, dan fitur-fitur canggihnya. Salah satu kemampuan dasar yang perlu dikuasai setiap developer Laravel adalah CRUD (Create, Read, Update, Delete). Tutorial ini akan memandu Anda langkah demi langkah tentang cara membuat CRUD sederhana dengan Laravel 10. Kita akan belajar Laravel dengan praktik langsung, sehingga Anda tidak hanya memahami teorinya, tetapi juga mampu mengimplementasikannya. Mari kita mulai!
1. Persiapan Awal: Instalasi Laravel 10 dan Konfigurasi Database
Sebelum kita mulai membuat CRUD sederhana dengan Laravel 10, pastikan Anda sudah memiliki lingkungan pengembangan yang siap. Ini termasuk PHP (versi 8.1 atau lebih tinggi), Composer, dan database (seperti MySQL atau PostgreSQL).
Langkah 1: Instalasi Laravel
Gunakan Composer untuk membuat proyek Laravel baru. Buka terminal atau command prompt Anda dan jalankan perintah berikut:
Related Post
composer create-project laravel/laravel:^10 crud-laravel-10
cd crud-laravel-10Perintah ini akan mengunduh dan menginstal Laravel 10 ke dalam direktori bernama crud-laravel-10.
Langkah 2: Konfigurasi Database
Setelah instalasi selesai, kita perlu mengkonfigurasi koneksi database. Buka file .env di root proyek Anda. Cari bagian yang dimulai dengan DB_ dan sesuaikan nilai-nilainya dengan konfigurasi database Anda. Contohnya:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud_db
DB_USERNAME=root
DB_PASSWORD=Pastikan Anda telah membuat database dengan nama crud_db di server database Anda. Jika Anda menggunakan database yang berbeda, sesuaikan DB_CONNECTION dengan tipe database yang sesuai.
Langkah 3: Migrasi Database Awal
Laravel menyediakan mekanisme migrasi untuk membuat dan memodifikasi skema database. Kita akan membuat tabel untuk menyimpan data kita nanti. Untuk saat ini, mari jalankan migrasi default:
php artisan migratePerintah ini akan membuat tabel users dan password_resets di database Anda. Kita akan menambahkan tabel kita sendiri nanti.
2. Membuat Model dan Migrasi untuk Data Kita: Studi Kasus “Produk”
Sekarang kita akan membuat model dan migrasi untuk menyimpan data “Produk”. Ini adalah langkah penting dalam tutorial membuat CRUD sederhana dengan Laravel 10 ini.
Langkah 1: Membuat Model Produk
Jalankan perintah berikut untuk membuat model Product:
php artisan make:model ProductIni akan membuat file Product.php di direktori app/Models.
Langkah 2: Membuat Migrasi Produk
Selanjutnya, kita akan membuat migrasi untuk tabel products. Jalankan perintah berikut:
php artisan make:migration create_products_tableIni akan membuat file migrasi baru di direktori database/migrations. Buka file migrasi tersebut dan tambahkan kode berikut di dalam method up():
<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('description')->nullable();
$table->decimal('price', 10, 2);
$table->integer('stock');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('products');
}
};Kode ini mendefinisikan skema tabel products dengan kolom id, name, description, price, stock, created_at, dan updated_at.
Langkah 3: Menjalankan Migrasi Produk
Jalankan migrasi untuk membuat tabel products di database Anda:
php artisan migrateLangkah 4: Mendefinisikan Model Mass Assignment
Buka file Product.php dan tambahkan kode berikut di dalam class Product:
<?php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Product extends Model
{
use HasFactory;
protected $fillable = [
'name',
'description',
'price',
'stock',
];
}Variabel $fillable menentukan kolom mana yang boleh diisi secara massal (mass assignment). Ini penting untuk keamanan agar pengguna tidak dapat mengisi kolom yang tidak seharusnya.
3. Membuat Controller untuk Mengelola Produk: ProductController
Controller bertanggung jawab untuk menangani logika aplikasi dan berinteraksi dengan model. Kita akan membuat ProductController untuk mengelola operasi CRUD produk. Bagian ini adalah inti dari tutorial membuat CRUD sederhana dengan Laravel 10.
Langkah 1: Membuat Controller
Jalankan perintah berikut untuk membuat ProductController:
php artisan make:controller ProductControllerIni akan membuat file ProductController.php di direktori app/Http/Controllers.
Langkah 2: Mengimplementasikan Metode CRUD
Buka file ProductController.php dan tambahkan kode berikut:
<?php
namespace AppHttpControllers;
use AppModelsProduct;
use IlluminateHttpRequest;
class ProductController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$products = Product::all();
return view('products.index', compact('products'));
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
return view('products.create');
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'price' => 'required|numeric',
'stock' => 'required|integer',
]);
Product::create($request->all());
return redirect()->route('products.index')
->with('success', 'Produk berhasil ditambahkan.');
}
/**
* Display the specified resource.
*/
public function show(Product $product)
{
return view('products.show', compact('product'));
}
/**
* Show the form for editing the specified resource.
*/
public function edit(Product $product)
{
return view('products.edit', compact('product'));
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, Product $product)
{
$request->validate([
'name' => 'required',
'price' => 'required|numeric',
'stock' => 'required|integer',
]);
$product->update($request->all());
return redirect()->route('products.index')
->with('success', 'Produk berhasil diperbarui.');
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Product $product)
{
$product->delete();
return redirect()->route('products.index')
->with('success', 'Produk berhasil dihapus.');
}
}Controller ini memiliki metode-metode berikut:
index(): Menampilkan daftar semua produk.create(): Menampilkan form untuk membuat produk baru.store(): Menyimpan produk baru ke database.show(): Menampilkan detail produk tertentu.edit(): Menampilkan form untuk mengedit produk yang sudah ada.update(): Memperbarui produk di database.destroy(): Menghapus produk dari database.
Langkah 3: Import Model yang Dibutuhkan
Pastikan Anda sudah mengimport model Product dan class Request di bagian atas file ProductController.php. Jika belum ada, tambahkan baris berikut:
use AppModelsProduct;
use IlluminateHttpRequest;4. Membuat Views untuk Interaksi Pengguna: Tampilan CRUD Produk
Views adalah bagian dari aplikasi yang bertanggung jawab untuk menampilkan data ke pengguna. Kita akan membuat views untuk menampilkan daftar produk, form pembuatan, form pengeditan, dan detail produk. Ini adalah langkah krusial dalam tutorial membuat CRUD sederhana dengan Laravel 10.
Langkah 1: Membuat Direktori products di dalam resources/views
Buat direktori products di dalam direktori resources/views. Kita akan menyimpan semua views terkait produk di dalam direktori ini.
Langkah 2: Membuat index.blade.php
Buat file index.blade.php di dalam direktori resources/views/products dan tambahkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Daftar Produk</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Daftar Produk</h1>
<a href="{{ route('products.create') }}" class="btn btn-primary mb-3">Tambah Produk</a>
@if ($message = Session::get('success'))
<div class="alert alert-success">
{{ $message }}
</div>
@endif
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Harga</th>
<th>Stok</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($products as $product)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $product->name }}</td>
<td>{{ $product->price }}</td>
<td>{{ $product->stock }}</td>
<td>
<form action="{{ route('products.destroy',$product->id) }}" method="POST">
<a class="btn btn-info" href="{{ route('products.show',$product->id) }}">Lihat</a>
<a class="btn btn-primary" href="{{ route('products.edit',$product->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Hapus</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>Langkah 3: Membuat create.blade.php
Buat file create.blade.php di dalam direktori resources/views/products dan tambahkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tambah Produk Baru</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Tambah Produk Baru</h1>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('products.store') }}" method="POST">
@csrf
<div class="mb-3">
<label for="name" class="form-label">Nama:</label>
<input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}">
</div>
<div class="mb-3">
<label for="description" class="form-label">Deskripsi:</label>
<textarea class="form-control" id="description" name="description">{{ old('description') }}</textarea>
</div>
<div class="mb-3">
<label for="price" class="form-label">Harga:</label>
<input type="number" step="0.01" class="form-control" id="price" name="price" value="{{ old('price') }}">
</div>
<div class="mb-3">
<label for="stock" class="form-label">Stok:</label>
<input type="number" class="form-control" id="stock" name="stock" value="{{ old('stock') }}">
</div>
<button type="submit" class="btn btn-primary">Simpan</button>
<a href="{{ route('products.index') }}" class="btn btn-secondary">Batal</a>
</form>
</div>
</body>
</html>Langkah 4: Membuat edit.blade.php
Buat file edit.blade.php di dalam direktori resources/views/products dan tambahkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Edit Produk</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Edit Produk</h1>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('products.update', $product->id) }}" method="POST">
@csrf
@method('PUT')
<div class="mb-3">
<label for="name" class="form-label">Nama:</label>
<input type="text" class="form-control" id="name" name="name" value="{{ $product->name }}">
</div>
<div class="mb-3">
<label for="description" class="form-label">Deskripsi:</label>
<textarea class="form-control" id="description" name="description">{{ $product->description }}</textarea>
</div>
<div class="mb-3">
<label for="price" class="form-label">Harga:</label>
<input type="number" step="0.01" class="form-control" id="price" name="price" value="{{ $product->price }}">
</div>
<div class="mb-3">
<label for="stock" class="form-label">Stok:</label>
<input type="number" class="form-control" id="stock" name="stock" value="{{ $product->stock }}">
</div>
<button type="submit" class="btn btn-primary">Perbarui</button>
<a href="{{ route('products.index') }}" class="btn btn-secondary">Batal</a>
</form>
</div>
</body>
</html>Langkah 5: Membuat show.blade.php
Buat file show.blade.php di dalam direktori resources/views/products dan tambahkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Detail Produk</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Detail Produk</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ $product->name }}</h5>
<p class="card-text">{{ $product->description }}</p>
<p class="card-text">Harga: {{ $product->price }}</p>
<p class="card-text">Stok: {{ $product->stock }}</p>
</div>
</div>
<a href="{{ route('products.index') }}" class="btn btn-primary mt-3">Kembali</a>
</div>
</body>
</html>Kita menggunakan Bootstrap untuk tampilan yang lebih menarik. Pastikan Anda telah menginstal Bootstrap atau menggunakan CDN seperti yang ditunjukkan di atas.
5. Mendefinisikan Routes untuk CRUD: routes/web.php
Routes menentukan bagaimana aplikasi Anda merespons permintaan dari pengguna. Kita akan mendefinisikan routes untuk operasi CRUD produk. Ini adalah langkah penting dalam tutorial membuat CRUD sederhana dengan Laravel 10.
Buka file routes/web.php dan tambahkan kode berikut:
<?php
use IlluminateSupportFacadesRoute;
use AppHttpControllersProductController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::resource('products', ProductController::class);Baris Route::resource('products', ProductController::class); mendefinisikan semua routes yang diperlukan untuk operasi CRUD produk. Ini secara otomatis membuat routes untuk index, create, store, show, edit, update, dan destroy methods di ProductController.
6. Uji Coba Aplikasi CRUD Produk: Memastikan Semuanya Berfungsi
Setelah semua langkah di atas selesai, saatnya untuk menguji coba aplikasi CRUD produk kita. Ini adalah tahap akhir dari tutorial membuat CRUD sederhana dengan Laravel 10.
Langkah 1: Jalankan Server Pengembangan Laravel
Jalankan perintah berikut untuk memulai server pengembangan Laravel:
php artisan serveIni akan memulai server pengembangan di alamat http://127.0.0.1:8000.
Langkah 2: Akses Aplikasi Melalui Browser
Buka browser Anda dan kunjungi alamat http://127.0.0.1:8000/products. Anda akan melihat daftar produk (yang saat ini kosong).
Langkah 3: Uji Operasi CRUD
- Klik tombol “Tambah Produk” untuk membuat produk baru.
- Isi form dan klik tombol “Simpan”.
- Produk baru akan muncul di daftar produk.
- Klik tombol “Lihat” untuk melihat detail produk.
- Klik tombol “Edit” untuk mengedit produk.
- Klik tombol “Hapus” untuk menghapus produk.
Pastikan semua operasi CRUD berfungsi dengan benar. Jika ada kesalahan, periksa kembali kode Anda dan pastikan Anda telah mengikuti semua langkah dengan benar.
7. Validasi Lebih Lanjut dan Keamanan Aplikasi: Tips Tambahan
Validasi data dan keamanan adalah aspek penting dalam pengembangan aplikasi web. Berikut adalah beberapa tips tambahan untuk meningkatkan validasi dan keamanan aplikasi CRUD produk Anda:
- Validasi Server-Side yang Lebih Ketat: Selain validasi sederhana di controller, Anda bisa menggunakan Form Request untuk validasi yang lebih kompleks dan reusable. Buat Form Request baru dengan perintah
php artisan make:request StoreProductRequestdanphp artisan make:request UpdateProductRequest, kemudian definisikan aturan validasi di dalam class tersebut. - Sanitasi Input: Pastikan Anda menyaring dan membersihkan input pengguna untuk mencegah serangan XSS (Cross-Site Scripting). Gunakan fungsi
htmlspecialchars()atau library sepertiHTMLPurifier. - Otorisasi dan Authentication: Implementasikan sistem otorisasi dan autentikasi untuk membatasi akses ke operasi CRUD hanya untuk pengguna yang berwenang. Laravel menyediakan fitur-fitur built-in untuk mempermudah implementasi ini. Anda bisa memanfaatkan Laravel Sanctum atau Passport untuk API authentication.
- Lindungi dari Mass Assignment: Meskipun kita sudah mendefinisikan
$fillable, selalu berhati-hati terhadap input yang tidak terduga. Jika memungkinkan, gunakan metodeonly()atauexcept()pada request untuk memastikan hanya data yang diharapkan yang diproses. - Gunakan HTTPS: Pastikan aplikasi Anda menggunakan HTTPS untuk mengenkripsi komunikasi antara server dan browser.
- Update Laravel secara Teratur: Selalu perbarui Laravel ke versi terbaru untuk mendapatkan perbaikan keamanan dan bug.
8. Optimasi Performa: Meningkatkan Kecepatan Aplikasi CRUD
Performa adalah kunci untuk memberikan pengalaman pengguna yang baik. Berikut adalah beberapa tips untuk mengoptimalkan performa aplikasi CRUD produk Anda:
- Gunakan Caching: Manfaatkan caching untuk menyimpan data yang sering diakses dan mengurangi beban database. Laravel menyediakan berbagai opsi caching, termasuk file-based caching, Redis, dan Memcached.
- Eager Loading: Hindari masalah N+1 query dengan menggunakan eager loading untuk mengambil data terkait dalam satu query. Contohnya, jika Anda memiliki relasi antara
ProductdanCategory, gunakanProduct::with('category')->get()untuk mengambil semua produk beserta kategori mereka. - Indexing Database: Pastikan Anda memiliki indeks yang tepat pada kolom yang sering digunakan dalam query. Ini dapat mempercepat pencarian dan penyaringan data.
- Optimasi Query: Tulis query yang efisien dan hindari penggunaan
SELECT *jika tidak perlu. Gunakan kolom yang spesifik untuk mengurangi jumlah data yang diambil. - Gunakan Pagination: Tampilkan data dalam halaman-halaman kecil untuk mengurangi waktu pemuatan halaman dan beban server.
- Kompresi Aset: Kompresi file CSS, JavaScript, dan gambar untuk mengurangi ukuran file dan mempercepat waktu pemuatan halaman.
- Gunakan CDN: Gunakan CDN (Content Delivery Network) untuk menghosting aset statis Anda (seperti gambar dan file CSS/JavaScript) di server yang tersebar di seluruh dunia. Ini akan mempercepat waktu pemuatan halaman bagi pengguna di berbagai lokasi.
9. Menggunakan Resource Controller Lebih Lanjut: Pendekatan Alternatif
Selain menggunakan Route::resource, Anda juga dapat menggunakan Resource Controller dengan cara yang lebih eksplisit. Ini memberikan kontrol lebih besar atas routes yang didefinisikan.
Langkah 1: Modifikasi routes/web.php
Hapus baris Route::resource('products', ProductController::class); dan ganti dengan kode berikut:
Route::get('/products', [ProductController::class, 'index'])->name('products.index');
Route::get('/products/create', [ProductController::class, 'create'])->name('products.create');
Route::post('/products', [ProductController::class, 'store'])->name('products.store');
Route::get('/products/{product}', [ProductController::class, 'show'])->name('products.show');
Route::get('/products/{product}/edit', [ProductController::class, 'edit'])->name('products.edit');
Route::put('/products/{product}', [ProductController::class, 'update'])->name('products.update');
Route::delete('/products/{product}', [ProductController::class, 'destroy'])->name('products.destroy');Kode ini secara eksplisit mendefinisikan setiap route dan menghubungkannya ke method yang sesuai di ProductController.
Langkah 2: Sesuaikan Parameter di Controller (Jika Perlu)
Jika Anda mengubah nama parameter di route (misalnya, dari {product} menjadi {productId}), Anda perlu menyesuaikan nama parameter di method controller yang sesuai.
10. Penutup: Selamat! Anda Telah Berhasil Membuat CRUD Sederhana dengan Laravel 10
Selamat! Anda telah berhasil menyelesaikan tutorial membuat CRUD sederhana dengan Laravel 10 ini. Anda sekarang memiliki pemahaman dasar tentang bagaimana membuat aplikasi CRUD dengan Laravel 10. Jangan ragu untuk bereksperimen dan mengembangkan aplikasi Anda lebih lanjut.
Belajar Laravel dengan praktik adalah cara terbaik untuk menguasai framework ini. Teruslah mencoba, dan Anda akan menjadi developer Laravel yang handal!
Semoga tutorial ini bermanfaat. Selamat mencoba dan semoga sukses!
