Laravel 9, framework PHP yang powerful dan elegan, memudahkan kita untuk membangun aplikasi web modern. Salah satu fitur fundamental dalam pengembangan aplikasi web adalah CRUD, singkatan dari Create, Read, Update, dan Delete. CRUD memungkinkan pengguna untuk berinteraksi dengan data, menambah, melihat, memperbarui, dan menghapus record dari database.
Dalam panduan lengkap ini, kita akan membahas secara mendalam cara membuat CRUD dengan Laravel 9, lengkap dengan contoh kode yang mudah dipahami. Kita akan memulai dari persiapan lingkungan pengembangan, membuat model, migration, controller, route, hingga view. Jadi, siapkan kopi Anda dan mari kita mulai!
1. Persiapan Lingkungan Pengembangan Laravel 9 untuk CRUD
Sebelum kita mulai membuat CRUD, pastikan Anda telah menyiapkan lingkungan pengembangan Laravel 9 yang sesuai. Berikut adalah beberapa langkah penting yang perlu Anda perhatikan:
- PHP: Pastikan PHP terinstal di sistem Anda. Laravel 9 membutuhkan PHP versi 8.0 atau lebih tinggi. Anda bisa mengecek versi PHP Anda dengan menjalankan perintah
php -vdi terminal. - Composer: Composer adalah dependency manager untuk PHP. Anda akan menggunakannya untuk menginstal Laravel dan berbagai paket yang dibutuhkan. Instal Composer dari situs resminya: https://getcomposer.org/
- Database: Pilih database yang ingin Anda gunakan (MySQL, PostgreSQL, SQLite, dll.). Pastikan database server sudah berjalan dan Anda memiliki akses ke database tersebut. Untuk panduan ini, kita akan menggunakan MySQL.
- Text Editor/IDE: Gunakan text editor atau IDE favorit Anda (Visual Studio Code, Sublime Text, PhpStorm, dll.).
- Laravel Installer (Opsional): Anda dapat menginstal Laravel Installer secara global dengan perintah
composer global require laravel/installer. Ini memudahkan Anda untuk membuat proyek Laravel baru.
Setelah semua persiapan selesai, mari kita buat proyek Laravel 9 baru:
Related Post
composer create-project laravel/laravel crud-example
cd crud-examplePerintah ini akan membuat folder crud-example yang berisi proyek Laravel 9 baru.
Selanjutnya, kita perlu mengkonfigurasi koneksi database di file .env. Buka file .env dan ubah konfigurasi database sesuai dengan informasi database Anda:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud_example
DB_USERNAME=root
DB_PASSWORD=Pastikan Anda mengganti nilai-nilai di atas dengan informasi yang sesuai dengan pengaturan database Anda.
2. Membuat Model dan Migrasi untuk Data yang Akan Di-CRUD
Setelah proyek Laravel siap, langkah selanjutnya adalah membuat model dan migrasi. Model merepresentasikan tabel di database, sedangkan migrasi adalah cara untuk membuat dan memodifikasi skema database secara terprogram.
Misalkan kita ingin membuat CRUD untuk data “Artikel”. Kita akan membuat model Article dan migrasi untuk membuat tabel articles. Jalankan perintah berikut di terminal:
php artisan make:model Article -mPerintah ini akan membuat dua file:
app/Models/Article.php(Model)database/migrations/[timestamp]_create_articles_table.php(Migrasi)
Buka file migrasi database/migrations/[timestamp]_create_articles_table.php dan modifikasi metode up() untuk mendefinisikan struktur tabel articles:
<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('articles', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('articles');
}
};Dalam kode di atas, kita mendefinisikan tabel articles dengan kolom:
id: Primary key (auto-incrementing integer)title: Judul artikel (string)body: Isi artikel (text)created_at: Timestamp saat record dibuatupdated_at: Timestamp saat record diperbarui
Setelah selesai memodifikasi migrasi, jalankan migrasi untuk membuat tabel di database:
php artisan migrate3. Membuat Controller untuk Menangani Logic CRUD
Controller bertanggung jawab untuk menangani request HTTP dan memproses data sebelum mengirimkannya ke view. Mari kita buat controller ArticleController untuk menangani logic CRUD untuk artikel:
php artisan make:controller ArticleController --resourceOpsi --resource secara otomatis membuat metode-metode yang diperlukan untuk operasi CRUD (index, create, store, show, edit, update, destroy).
Buka file app/Http/Controllers/ArticleController.php dan kita akan mengisi setiap metode dengan logic CRUD yang sesuai.
-
index(): Menampilkan daftar semua artikel.public function index() { $articles = Article::all(); return view('articles.index', compact('articles')); } -
create(): Menampilkan form untuk membuat artikel baru.public function create() { return view('articles.create'); } -
store(): Menyimpan artikel baru ke database.public function store(Request $request) { $request->validate([ 'title' => 'required', 'body' => 'required', ]); Article::create($request->all()); return redirect()->route('articles.index') ->with('success','Artikel berhasil ditambahkan.'); } -
show(): Menampilkan detail artikel tertentu.public function show(Article $article) { return view('articles.show',compact('article')); } -
edit(): Menampilkan form untuk mengedit artikel yang sudah ada.public function edit(Article $article) { return view('articles.edit',compact('article')); } -
update(): Memperbarui artikel yang sudah ada di database.public function update(Request $request, Article $article) { $request->validate([ 'title' => 'required', 'body' => 'required', ]); $article->update($request->all()); return redirect()->route('articles.index') ->with('success','Artikel berhasil diperbarui.'); } -
destroy(): Menghapus artikel dari database.public function destroy(Article $article) { $article->delete(); return redirect()->route('articles.index') ->with('success','Artikel berhasil dihapus.'); }
Perhatikan bahwa kita menggunakan validation untuk memastikan data yang masuk valid sebelum disimpan ke database. Kita juga menggunakan flash message untuk memberikan umpan balik kepada pengguna setelah operasi berhasil.
4. Mendefinisikan Routes untuk Mengakses Controller
Setelah controller siap, kita perlu mendefinisikan routes untuk menghubungkan URL ke metode-metode di controller. Buka file routes/web.php dan tambahkan resource route untuk ArticleController:
<?php
use IlluminateSupportFacadesRoute;
use AppHttpControllersArticleController;
/*
|--------------------------------------------------------------------------
| 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('articles', ArticleController::class);Baris Route::resource('articles', ArticleController::class); secara otomatis membuat routes untuk semua operasi CRUD yang didefinisikan di ArticleController. Anda dapat melihat daftar routes yang tersedia dengan menjalankan perintah php artisan route:list.
5. Membuat View untuk Menampilkan Data dan Form
Langkah terakhir adalah membuat view untuk menampilkan data artikel dan form untuk membuat dan mengedit artikel. Kita akan membuat beberapa file blade template di folder resources/views/articles:
-
index.blade.php: Menampilkan daftar semua artikel.<!DOCTYPE html> <html> <head> <title>CRUD Artikel</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Daftar Artikel</h1> @if ($message = Session::get('success')) <div class="alert alert-success"> <p>{{ $message }}</p> </div> @endif <a class="btn btn-success" href="{{ route('articles.create') }}"> Buat Artikel Baru</a> <table class="table table-bordered"> <tr> <th>No</th> <th>Judul</th> <th>Isi</th> <th width="280px">Action</th> </tr> @foreach ($articles as $article) <tr> <td>{{ ++$i }}</td> <td>{{ $article->title }}</td> <td>{{ $article->body }}</td> <td> <form action="{{ route('articles.destroy',$article->id) }}" method="POST"> <a class="btn btn-info" href="{{ route('articles.show',$article->id) }}">Show</a> <a class="btn btn-primary" href="{{ route('articles.edit',$article->id) }}">Edit</a> @csrf @method('DELETE') <button type="submit" class="btn btn-danger">Delete</button> </form> </td> </tr> @endforeach </table> </div> </body> </html> -
create.blade.php: Menampilkan form untuk membuat artikel baru.<!DOCTYPE html> <html> <head> <title>Buat Artikel Baru</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Buat Artikel Baru</h1> @if ($errors->any()) <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action="{{ route('articles.store') }}" method="POST"> @csrf <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Judul:</strong> <input type="text" name="title" class="form-control" placeholder="Judul"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Isi:</strong> <textarea class="form-control" style="height:150px" name="body" placeholder="Isi"></textarea> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 text-center"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </body> </html> -
show.blade.php: Menampilkan detail artikel tertentu.<!DOCTYPE html> <html> <head> <title>Tampilkan Detail Artikel</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Tampilkan Detail Artikel</h1> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Judul:</strong> {{ $article->title }} </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Isi:</strong> {{ $article->body }} </div> </div> </div> <a class="btn btn-primary" href="{{ route('articles.index') }}"> Kembali</a> </div> </body> </html> -
edit.blade.php: Menampilkan form untuk mengedit artikel yang sudah ada.<!DOCTYPE html> <html> <head> <title>Edit Artikel</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Edit Artikel</h1> @if ($errors->any()) <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action="{{ route('articles.update',$article->id) }}" method="POST"> @csrf @method('PUT') <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Judul:</strong> <input type="text" name="title" value="{{ $article->title }}" class="form-control" placeholder="Judul"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Isi:</strong> <textarea class="form-control" style="height:150px" name="body" placeholder="Isi">{{ $article->body }}</textarea> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 text-center"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </body> </html>
Pastikan Anda menyesuaikan styling dan layout view sesuai dengan kebutuhan aplikasi Anda. Dalam contoh ini, kita menggunakan Bootstrap untuk styling dasar.
6. Menguji Aplikasi CRUD Laravel 9 yang Telah Dibuat
Setelah semua langkah di atas selesai, sekarang saatnya untuk menguji aplikasi CRUD kita. Jalankan server pengembangan Laravel dengan perintah:
php artisan serveBuka browser Anda dan akses URL http://localhost:8000/articles. Anda akan melihat daftar artikel (jika ada). Anda dapat membuat artikel baru, mengedit artikel yang sudah ada, dan menghapus artikel.
Penjelasan singkat:
- Create: Klik tombol “Buat Artikel Baru” untuk membuka form pembuatan artikel. Isi judul dan isi artikel, lalu klik tombol “Submit”. Artikel baru akan ditambahkan ke database dan ditampilkan di daftar artikel.
- Read: Klik tombol “Show” untuk melihat detail artikel tertentu.
- Update: Klik tombol “Edit” untuk membuka form edit artikel. Ubah judul dan isi artikel, lalu klik tombol “Submit”. Artikel yang ada akan diperbarui di database dan ditampilkan di daftar artikel.
- Delete: Klik tombol “Delete” untuk menghapus artikel. Artikel akan dihapus dari database.
7. Validasi Lebih Lanjut dan Keamanan CRUD Laravel 9
Selain validasi dasar yang telah kita implementasikan, ada beberapa hal penting lainnya yang perlu diperhatikan untuk memastikan keamanan dan integritas data dalam aplikasi CRUD Anda:
- Otorisasi: Pastikan hanya pengguna yang berwenang yang dapat mengakses dan memodifikasi data. Implementasikan sistem otorisasi menggunakan middleware Laravel atau paket otorisasi seperti Laravel Sanctum atau Laravel Passport.
- Escaping Data: Selalu escape data yang ditampilkan di view untuk mencegah serangan XSS (Cross-Site Scripting). Gunakan fungsi
{{ }}atauhtmlspecialchars()untuk escape data. - CSRF Protection: Laravel secara otomatis menyediakan proteksi CSRF (Cross-Site Request Forgery). Pastikan Anda menyertakan CSRF token di semua form yang mengirim data ke server. Gunakan direktif
@csrfdi dalam form blade. - Input Sanitization: Selain validasi, pertimbangkan untuk melakukan input sanitization untuk membersihkan data yang masuk dari karakter-karakter yang berbahaya.
- Prepared Statements: Gunakan prepared statements untuk mencegah serangan SQL injection. Laravel secara otomatis menggunakan prepared statements saat Anda menggunakan Eloquent ORM atau Query Builder.
8. Fitur Lanjutan untuk CRUD Laravel 9
Setelah memahami dasar-dasar pembuatan CRUD dengan Laravel 9, Anda dapat meningkatkan aplikasi Anda dengan menambahkan fitur-fitur lanjutan, seperti:
- Pagination: Implementasikan pagination untuk menangani daftar artikel yang besar. Laravel menyediakan fitur pagination yang mudah digunakan.
- Search: Tambahkan fitur pencarian untuk memungkinkan pengguna mencari artikel berdasarkan kata kunci.
- Sorting: Implementasikan fitur pengurutan untuk memungkinkan pengguna mengurutkan artikel berdasarkan kolom tertentu (misalnya, judul, tanggal pembuatan).
- Upload Gambar: Tambahkan fitur untuk mengunggah gambar terkait dengan artikel.
- Relasi Database: Jika data Anda kompleks, manfaatkan fitur relasi database Eloquent untuk mengelola relasi antar tabel (misalnya, artikel memiliki banyak komentar).
- API CRUD: Buat API (Application Programming Interface) untuk memungkinkan aplikasi lain berinteraksi dengan data artikel Anda. Laravel memudahkan pembuatan API dengan menggunakan resource controllers dan API resources.
9. Kesimpulan dan Sumber Daya Tambahan
Dalam panduan ini, kita telah membahas secara mendalam cara membuat CRUD dengan Laravel 9, mulai dari persiapan lingkungan pengembangan hingga implementasi fitur-fitur lanjutan. Dengan memahami konsep dan contoh kode yang telah diberikan, Anda dapat dengan mudah membangun aplikasi web dengan fitur CRUD yang lengkap dan aman.
Ingatlah untuk selalu memperhatikan keamanan dan integritas data saat mengembangkan aplikasi CRUD. Implementasikan validasi yang ketat, otorisasi yang tepat, dan proteksi terhadap serangan-serangan umum seperti XSS dan SQL injection.
Sumber Daya Tambahan:
- Dokumentasi Resmi Laravel: https://laravel.com/docs/9.x
- Laravel Bootcamp: https://bootcamp.laravel.com/
- Laracasts: https://laracasts.com/
Semoga panduan ini bermanfaat! Selamat mencoba dan semoga sukses dalam pengembangan aplikasi web Anda dengan Laravel 9. Dengan latihan dan eksplorasi lebih lanjut, Anda akan semakin mahir dalam membangun aplikasi CRUD yang kompleks dan canggih.
