Panduan Lengkap: Cara Membuat Aplikasi CRUD dengan Laravel 10 untuk Pemula
Laravel merupakan salah satu kerangka kerja (framework) PHP paling populer di dunia saat ini. Dikembangkan dengan fokus pada produktivitas dan sintaksis yang elegan, Laravel memudahkan pengembang dalam membangun aplikasi web modern. Salah satu konsep dasar yang wajib dikuasai oleh setiap pengembang web adalah pembuatan fitur CRUD.
CRUD merupakan singkatan dari Create, Read, Update, dan Delete. Empat fungsi dasar ini menjadi fondasi utama dalam sebagian besar aplikasi berbasis data. Dalam panduan ini, Anda akan mempelajari cara membuat aplikasi CRUD dengan Laravel 10 secara terstruktur, mulai dari persiapan lingkungan kerja hingga aplikasi siap dijalankan.
Persiapan Lingkungan Pengembangan
Sebelum memulai proses pembuatan aplikasi, Anda perlu memastikan bahwa komputer Anda telah memenuhi beberapa persyaratan sistem. Laravel 10 membutuhkan versi PHP yang terbarukan agar dapat berjalan secara optimal.
Persyaratan Sistem
Pastikan perangkat lunak berikut sudah terpasang di komputer Anda:
- PHP versi 8.1 atau yang lebih baru.
- Composer sebagai manajemen paket PHP.
- Database Server seperti MySQL atau MariaDB.
- Teks editor seperti Visual Studio Code.
Pemasangan Laravel 10 via Composer
Langkah pertama dalam cara membuat aplikasi CRUD dengan Laravel 10 adalah mengunduh dan memasang kerangka kerja tersebut. Buka terminal atau command prompt, lalu jalankan perintah berikut untuk membuat proyek baru:
composer create-project laravel/laravel:^10.0 laravel-crud-appTunggu hingga proses pengunduhan selesai. Setelah selesai, masuk ke direktori proyek Anda dengan mengetikkan perintah cd laravel-crud-app.
Konfigurasi Database dan Environment
Aplikasi yang akan kita bangun memerlukan media penyimpanan berupa basis data relasional. Pada tahap ini, kita akan menghubungkan proyek Laravel dengan basis data MySQL.
Pengaturan File .env
Buka direktori proyek menggunakan teks editor pilihan Anda. Cari file bernama .env yang berada di akar direktori. File ini digunakan untuk menyimpan konfigurasi lingkungan aplikasi Anda.
Ubah bagian konfigurasi database sesuai dengan pengaturan server lokal Anda:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_laravel_crud
DB_USERNAME=root
DB_PASSWORD=Membuat Database Baru
Buka aplikasi manajemen database Anda, seperti phpMyAdmin atau DBeaver. Buatlah sebuah basis data baru dengan nama db_laravel_crud sesuai dengan nama yang telah ditentukan pada file .env.
Pastikan nama database di .env persis sama dengan nama database yang Anda buat di MySQL. Hal ini penting agar sistem tidak mengalami kesalahan koneksi saat menjalankan migrasi.
Membuat Model, Migrasi, dan Controller
Laravel menggunakan arsitektur Model-View-Controller (MVC). Pendekatan ini memisahkan logika bisnis, struktur data, dan tampilan antarmuka secara rapi.
Membuat File Migration dan Model
Kita akan membuat contoh aplikasi pengelola data produk. Jalankan perintah Artisan berikut untuk membuat model Product sekaligus file migrasinya:
php artisan make:model Product -mOpsi -m pada perintah di atas secara otomatis akan membuatkan file migrasi untuk tabel produk di dalam folder database/migrations.
Mengatur Skema Tabel Database
Buka file migrasi yang baru saja dibuat di dalam folder database/migrations/xxxx_xx_xx_xxxxxx_create_products_table.php. Tambahkan beberapa kolom yang dibutuhkan pada fungsi up():
public function up(): void
Schema::create('products', function (Blueprint $table)
$table->id();
$table->string('title');
$table->text('description');
$table->integer('price');
$table->integer('stock');
$table->timestamps();
);
Menjalankan Artisans Migrate
Setelah skema kolom selesai ditentukan, jalankan perintah migrasi untuk menerapkan struktur tabel ke dalam database MySQL:
php artisan migratePerintah ini akan mengeksekusi file migrasi dan membuat tabel products secara otomatis di dalam database Anda.
Mengkonfigurasi Model Product
Buka file model app/Models/Product.php. Tambahkan properti $fillable agar kolom-kolom pada tabel dapat diisi secara massal (mass assignment):
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Product extends Model
use HasFactory;
protected $fillable = ;
Mengatur Routing Aplikasi
Routing bertugas mengarahkan permintaan (request) dari pengguna ke fungsi controller yang sesuai. Dalam alur cara membuat aplikasi CRUD dengan Laravel 10, pengoperasian rute dapat disederhanakan menggunakan Resource Router.
Buka file routes/web.php, kemudian tambahkan kode berikut:
use AppHttpControllersProductController;
use IlluminateSupportFacadesRoute;
Route::get('/', function ()
return redirect()->route('products.index');
);
Route::resource('products', ProductController::class);Penggunaan Route::resource secara otomatis menyediakan rute-rute standar untuk fungsi index, create, store, show, edit, update, dan destroy.
Mengimplementasikan Controller Resource
Controller berfungsi mengolah logika aplikasi. Jalankan perintah berikut untuk membuat ProductController yang sudah dilengkapi dengan metode resource:
php artisan make:controller ProductController --resourceFile controller baru akan tercipta di folder app/Http/Controllers/ProductController.php. Selanjutnya, kita akan melengkapi setiap metode di dalamnya.
Menampilkan Data (Read)
Metode index digunakan untuk mengambil seluruh data produk dari basis data dan menampilkannya pada halaman utama:
use AppModelsProduct;
use IlluminateHttpRequest;
use IlluminateViewView;
use IlluminateHttpRedirectResponse;
public function index(): View
$products = Product::latest()->paginate(10);
return view('products.index', compact('products'));
Form dan Proses Simpan (Create & Store)
Metode create berfungsi menampilkan form input data, sedangkan metode store bertugas menyimpan data baru tersebut ke database:
public function create(): View
return view('products.create');
public function store(Request $request): RedirectResponse
$request->validate();
Product::create();
return redirect()->route('products.index')->with();
Form dan Proses Update (Edit & Update)
Metode edit menampilkan formulir perubahan data, sementara metode update memproses pembaruan data berdasarkan ID produk:
public function edit(string $id): View
$product = Product::findOrFail($id);
return view('products.edit', compact('product'));
public function update(Request $request, string $id): RedirectResponse
$request->validate();
$product = Product::findOrFail($id);
$product->update();
return redirect()->route('products.index')->with();
Menghapus Data (Delete)
Metode destroy digunakan untuk menghapus entri data dari tabel basis data:
public function destroy(string $id): RedirectResponse
$product = Product::findOrFail($id);
$product->delete();
return redirect()->route('products.index')->with();
Membuat Tampilan dengan Blade Template
Laravel menggunakan mesin template bernama Blade. Kita akan membuat beberapa file tampilan di dalam folder resources/views/products.
Halaman Utama Data Produk (index.blade.php)
Buat file resources/views/products/index.blade.php untuk menampilkan tabel daftar produk. Kita dapat menggunakan kerangka Bootstrap 5 agar tampilan terlihat rapi secara cepat.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Produk - CRUD Laravel 10</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: #f4f6f9;">
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<a href=" route('products.create') " class="btn btn-md btn-success mb-3">TAMBAH PRODUK</a>
@if(session('success'))
<div class="alert alert-success">
session('success')
</div>
@endif
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">JUDUL</th>
<th scope="col">HARGA</th>
<th scope="col">STOK</th>
<th scope="col" style="width: 20%">AKSI</th>
</tr>
</thead>
<tbody>
@forelse ($products as $product)
<tr>
<td> $product->title </td>
<td> "Rp " . number_format($product->price,0,',','.') </td>
<td> $product->stock </td>
<td class="text-center">
<form onsubmit="return confirm('Apakah Anda Yakin ?');" action=" route('products.destroy', $product->id) " method="POST">
<a href=" route('products.edit', $product->id) " class="btn btn-sm btn-primary">EDIT</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-danger">HAPUS</button>
</form>
</td>
</tr>
@empty
<div class="alert alert-danger">
Data Produk Belum Tersedia.
</div>
@endforelse
</tbody>
</table>
$products->links()
</div>
</div>
</div>
</div>
</div>
</body>
</html>Form Tambah Data (create.blade.php)
Buat file resources/views/products/create.blade.php untuk memfasilitasi penambahan data baru oleh pengguna.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tambah Produk Baru</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: #f4f6f9;">
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form action=" route('products.store') " method="POST">
@csrf
<div class="form-group mb-3">
<label class="font-weight-bold">JUDUL PRODUK</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value=" old('title') " placeholder="Masukkan Judul Produk">
@error('title')
<div class="alert alert-danger mt-2"> $message </div>
@enderror
</div>
<div class="form-group mb-3">
<label class="font-weight-bold">DESKRIPSI</label>
<textarea class="form-control @error('description') is-invalid @enderror" name="description" rows="5" placeholder="Masukkan Deskripsi Produk"> old('description') </textarea>
@error('description')
<div class="alert alert-danger mt-2"> $message </div>
@enderror
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-3">
<label class="font-weight-bold">HARGA</label>
<input type="number" class="form-control @error('price') is-invalid @enderror" name="price" value=" old('price') " placeholder="Masukkan Harga Produk">
@error('price')
<div class="alert alert-danger mt-2"> $message </div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-3">
<label class="font-weight-bold">STOK</label>
<input type="number" class="form-control @error('stock') is-invalid @enderror" name="stock" value=" old('stock') " placeholder="Masukkan Stok Produk">
@error('stock')
<div class="alert alert-danger mt-2"> $message </div>
@enderror
</div>
</div>
</div>
<button type="submit" class="btn btn-md btn-primary">SIMPAN</button>
<a href=" route('products.index') " class="btn btn-md btn-secondary">KEMBALI</a>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Form Edit Data (edit.blade.php)
Buat file resources/views/products/edit.blade.php untuk memperbarui data produk yang sudah ada di database.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Data Produk</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: #f4f6f9;">
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form action=" route('products.update', $product->id) " method="POST">
@csrf
@method('PUT')
<div class="form-group mb-3">
<label class="font-weight-bold">JUDUL PRODUK</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value=" old('title', $product->title) ">
@error('title')
<div class="alert alert-danger mt-2"> $message </div>
@enderror
</div>
<div class="form-group mb-3">
<label class="font-weight-bold">DESKRIPSI</label>
<textarea class="form-control @error('description') is-invalid @enderror" name="description" rows="5"> old('description', $product->description) </textarea>
@error('description')
<div class="alert alert-danger mt-2"> $message </div>
@enderror
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-3">
<label class="font-weight-bold">HARGA</label>
<input type="number" class="form-control @error('price') is-invalid @enderror" name="price" value=" old('price', $product->price) ">
@error('price')
<div class="alert alert-danger mt-2"> $message </div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-3">
<label class="font-weight-bold">STOK</label>
<input type="number" class="form-control @error('stock') is-invalid @enderror" name="stock" value=" old('stock', $product->stock) ">
@error('stock')
<div class="alert alert-danger mt-2"> $message </div>
@enderror
</div>
</div>
</div>
<button type="submit" class="btn btn-md btn-primary">UPDATE</button>
<a href=" route('products.index') " class="btn btn-md btn-secondary">KEMBALI</a>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Pengujian dan Menjalankan Aplikasi
Langkah terakhir dari cara membuat aplikasi CRUD dengan Laravel 10 adalah menguji seluruh fitur yang telah dibuat. Pastikan database MySQL Anda dalam keadaan aktif.
Jalankan perintah berikut di terminal untuk memulai server pengembangan lokal:
php artisan serveTerminal akan menampilkan alamat URL lokal, biasanya http://127.0.0.1:8000. Buka peramban (browser) Anda lalu akses URL tersebut.
Cobalah untuk melakukan pengujian alur kerja berikut secara berurutan:
- Klik tombol Tambah Produk dan isi formulir dengan data sampel, lalu simpan.
- Pastikan data baru muncul pada tabel halaman utama.
- Klik tombol Edit pada salah satu baris data, ubah nilainya, lalu simpan perubahan.
- Klik tombol Hapus untuk memastikan fitur penghapusan data bekerja sebagaimana mestinya.
Kesimpulan
Memahami cara membuat aplikasi CRUD dengan Laravel 10 merupakan fondasi penting bagi pengembang web dalam menguasai kerangka kerja PHP modern. Fitur-fitur bawaan Laravel seperti Eloquent ORM, Migration, dan Resource Controller sangat membantu mempercepat proses rekayasa perangkat lunak.
Dengan mengikuti panduan langkah demi langkah di atas, Anda kini memiliki aplikasi pengelola data yang berfungsi secara penuh. Anda dapat mengembangkan proyek ini lebih lanjut dengan menambahkan fitur upload gambar, sistem otentikasi pengguna, atau pencarian data sesuai kebutuhan aplikasi Anda.
