Laravel, framework PHP yang elegan dan kuat, menjadi pilihan utama bagi banyak developer dalam membangun aplikasi web modern. Salah satu alasan utama popularitasnya adalah kemudahan dalam mengimplementasikan operasi CRUD (Create, Read, Update, Delete). Artikel ini akan memandu Anda melalui contoh project Laravel sederhana dengan CRUD, memberikan implementasi praktis dan efektif yang bisa langsung Anda terapkan. Mari kita mulai!
1. Mengenal Lebih Dekat: Apa itu CRUD dan Mengapa Penting dalam Pengembangan Aplikasi Laravel?
Sebelum kita menyelami contoh project Laravel sederhana dengan CRUD, mari pahami dulu apa itu CRUD. CRUD adalah singkatan dari Create (Membuat), Read (Membaca), Update (Memperbarui), dan Delete (Menghapus). Ini adalah empat operasi dasar yang sering digunakan dalam berinteraksi dengan database.
CRUD sangat penting karena hampir semua aplikasi web membutuhkan cara untuk menyimpan, mengambil, mengubah, dan menghapus data. Bayangkan aplikasi e-commerce tanpa kemampuan menambahkan produk (Create), menampilkan daftar produk (Read), mengubah harga produk (Update), atau menghapus produk yang tidak lagi dijual (Delete). Tentunya, aplikasi tersebut tidak akan berfungsi dengan baik.
Dalam konteks Laravel, framework ini menyediakan berbagai fitur dan tools yang memudahkan implementasi CRUD, seperti:
- Eloquent ORM (Object-Relational Mapper): Memungkinkan Anda berinteraksi dengan database menggunakan objek PHP, bukan query SQL langsung. Ini membuat kode Anda lebih mudah dibaca, ditulis, dan dipelihara.
- Migrations: Memungkinkan Anda membuat dan memodifikasi skema database dengan mudah.
- Form Requests: Membantu Anda memvalidasi input pengguna sebelum disimpan ke database.
- Routing: Menentukan bagaimana aplikasi Anda merespon permintaan HTTP.
Dengan memanfaatkan fitur-fitur ini, Anda dapat membangun aplikasi Laravel dengan CRUD yang efisien dan terstruktur.
2. Studi Kasus: Membuat Aplikasi To-Do List Sederhana dengan Laravel dan CRUD
Untuk memberikan contoh project Laravel sederhana dengan CRUD yang nyata, kita akan membangun aplikasi To-Do List. Aplikasi ini memungkinkan pengguna untuk:
- Menambahkan tugas baru (Create)
- Melihat daftar tugas yang belum selesai dan sudah selesai (Read)
- Menandai tugas sebagai selesai (Update)
- Menghapus tugas (Delete)
Aplikasi ini cukup sederhana namun mencakup semua operasi CRUD dasar dan sangat cocok untuk pemula yang ingin belajar Laravel.
3. Persiapan Awal: Instalasi Laravel dan Konfigurasi Database
Sebelum memulai coding, pastikan Anda sudah menginstal Laravel dan mengkonfigurasi koneksi database. Berikut langkah-langkahnya:
-
Instalasi Laravel: Pastikan Anda sudah menginstal Composer, package manager untuk PHP. Kemudian, buka terminal atau command prompt dan jalankan perintah berikut:
composer create-project --prefer-dist laravel/laravel crud-todo cd crud-todoIni akan membuat project Laravel baru dengan nama “crud-todo”.
-
Konfigurasi Database: Buka file
.envdi direktori project Anda. Cari bagian yang berkaitan dengan database dan sesuaikan dengan pengaturan database Anda. Misalnya:DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=crud_todo DB_USERNAME=root DB_PASSWORD=Pastikan Anda sudah membuat database dengan nama “crud_todo” di MySQL (atau database lain yang Anda gunakan).
-
Migrasi Database: Setelah konfigurasi database selesai, jalankan perintah berikut untuk membuat tabel
todos:php artisan make:migration create_todos_table --create=todosIni akan membuat file migration baru di folder
database/migrations. Buka file tersebut dan modifikasi seperti berikut:<?php use IlluminateDatabaseMigrationsMigration; use IlluminateDatabaseSchemaBlueprint; use IlluminateSupportFacadesSchema; class CreateTodosTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('todos', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('description')->nullable(); $table->boolean('completed')->default(false); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('todos'); } }Kemudian, jalankan perintah berikut untuk menjalankan migration:
php artisan migrateIni akan membuat tabel
todosdi database Anda dengan kolomid,title,description,completed,created_at, danupdated_at.
4. Membuat Model, Controller, dan Resource Route untuk To-Do List
Setelah database siap, kita akan membuat Model, Controller, dan Resource Route untuk aplikasi To-Do List kita.
-
Membuat Model: Jalankan perintah berikut untuk membuat model
Todo:php artisan make:model TodoIni akan membuat file model baru di folder
app/Models. Buka file tersebut dan tambahkan$fillableattribute untuk menentukan kolom mana yang boleh diisi:<?php namespace AppModels; use IlluminateDatabaseEloquentFactoriesHasFactory; use IlluminateDatabaseEloquentModel; class Todo extends Model { use HasFactory; protected $fillable = ['title', 'description', 'completed']; } -
Membuat Controller: Jalankan perintah berikut untuk membuat controller
TodoControllerdengan resource methods:php artisan make:controller TodoController --resourceIni akan membuat file controller baru di folder
app/Http/Controllersdengan methodsindex,create,store,show,edit,update, dandestroy. -
Menambahkan Resource Route: Buka file
routes/web.phpdan tambahkan route resource untuktodos:<?php use AppHttpControllersTodoController; use IlluminateSupportFacadesRoute; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::resource('todos', TodoController::class);Ini akan membuat semua route yang dibutuhkan untuk operasi CRUD pada resource
todos.
5. Implementasi Operasi CRUD: Create, Read, Update, Delete di Controller
Sekarang saatnya mengimplementasikan operasi CRUD di TodoController. Berikut implementasinya:
-
index()(Read): Menampilkan daftar semua to-do.public function index() { $todos = Todo::all(); return view('todos.index', compact('todos')); } -
create()(Create): Menampilkan form untuk membuat to-do baru.public function create() { return view('todos.create'); } -
store()(Create): Menyimpan to-do baru ke database.public function store(Request $request) { $request->validate([ 'title' => 'required|max:255', ]); Todo::create($request->all()); return redirect()->route('todos.index') ->with('success','To-do created successfully.'); } -
show()(Read): Menampilkan detail satu to-do.public function show(Todo $todo) { return view('todos.show',compact('todo')); } -
edit()(Update): Menampilkan form untuk mengedit to-do.public function edit(Todo $todo) { return view('todos.edit',compact('todo')); } -
update()(Update): Memperbarui to-do di database.public function update(Request $request, Todo $todo) { $request->validate([ 'title' => 'required|max:255', ]); $todo->update($request->all()); return redirect()->route('todos.index') ->with('success','To-do updated successfully'); } -
destroy()(Delete): Menghapus to-do dari database.public function destroy(Todo $todo) { $todo->delete(); return redirect()->route('todos.index') ->with('success','To-do deleted successfully'); }
6. Membuat View (Tampilan) untuk Aplikasi To-Do List
Untuk membuat tampilan, kita akan membuat beberapa file Blade di folder resources/views/todos.
-
index.blade.php: Menampilkan daftar to-do.<!DOCTYPE html> <html> <head> <title>Laravel CRUD To-Do List</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> @if ($message = Session::get('success')) <div class="alert alert-success"> <p>{{ $message }}</p> </div> @endif <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Laravel CRUD To-Do List</h2> </div> <div class="pull-right"> <a class="btn btn-success" href="{{ route('todos.create') }}"> Create New To-Do</a> </div> </div> </div> <table class="table table-bordered"> <tr> <th>No</th> <th>Title</th> <th>Description</th> <th>Completed</th> <th width="280px">Action</th> </tr> @foreach ($todos as $todo) <tr> <td>{{ $loop->iteration }}</td> <td>{{ $todo->title }}</td> <td>{{ $todo->description }}</td> <td>{{ $todo->completed ? 'Yes' : 'No' }}</td> <td> <form action="{{ route('todos.destroy',$todo->id) }}" method="POST"> <a class="btn btn-info" href="{{ route('todos.show',$todo->id) }}">Show</a> <a class="btn btn-primary" href="{{ route('todos.edit',$todo->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: Form untuk membuat to-do baru.<!DOCTYPE html> <html> <head> <title>Create New To-Do</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Add New To-Do</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('todos.index') }}"> Back</a> </div> </div> </div> @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('todos.store') }}" method="POST"> @csrf <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Title:</strong> <input type="text" name="title" class="form-control" placeholder="Title"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Description:</strong> <textarea class="form-control" style="height:150px" name="description" placeholder="Description"></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 satu to-do.<!DOCTYPE html> <html> <head> <title>Show To-Do</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2> Show To-Do</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('todos.index') }}"> Back</a> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Title:</strong> {{ $todo->title }} </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Description:</strong> {{ $todo->description }} </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Completed:</strong> {{ $todo->completed ? 'Yes' : 'No' }} </div> </div> </div> </div> </body> </html> -
edit.blade.php: Form untuk mengedit to-do.<!DOCTYPE html> <html> <head> <title>Edit To-Do</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Edit To-Do</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('todos.index') }}"> Back</a> </div> </div> </div> @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('todos.update',$todo->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>Title:</strong> <input type="text" name="title" value="{{ $todo->title }}" class="form-control" placeholder="Title"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Description:</strong> <textarea class="form-control" style="height:150px" name="description" placeholder="Description">{{ $todo->description }}</textarea> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Completed:</strong> <select name="completed" class="form-control"> <option value="0" {{ !$todo->completed ? 'selected' : '' }}>No</option> <option value="1" {{ $todo->completed ? 'selected' : '' }}>Yes</option> </select> </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>
7. Uji Coba Aplikasi To-Do List dengan CRUD
Setelah semua kode selesai, jalankan server development Laravel:
php artisan serve
Buka browser Anda dan kunjungi http://localhost:8000/todos. Anda akan melihat daftar to-do (yang masih kosong). Sekarang, coba tambahkan, edit, tampilkan, dan hapus to-do. Selamat! Anda telah berhasil membuat contoh project Laravel sederhana dengan CRUD!
8. Tips dan Trik untuk Implementasi CRUD yang Lebih Efektif di Laravel
Berikut beberapa tips dan trik untuk implementasi CRUD yang lebih efektif di Laravel:
- Gunakan Form Requests untuk Validasi: Hindari validasi langsung di controller. Gunakan Form Requests untuk memisahkan logika validasi dan membuat kode controller lebih bersih.
- Manfaatkan Eloquent Relationships: Jika aplikasi Anda memiliki relasi antar tabel, manfaatkan fitur Eloquent Relationships untuk mempermudah pengambilan dan manipulasi data.
- Gunakan Resource Controllers: Seperti yang kita lakukan di contoh ini, gunakan resource controllers untuk membuat struktur kode yang konsisten dan mudah dipahami.
- Pertimbangkan menggunakan Packages: Ada banyak packages Laravel yang dapat membantu Anda mengimplementasikan CRUD dengan lebih cepat dan mudah, seperti Laravel Nova atau Voyager.
- Tulis Test: Pastikan Anda menulis test untuk memastikan aplikasi CRUD Anda berfungsi dengan benar dan tidak ada bug.
9. Keuntungan Menggunakan Laravel untuk Pengembangan Aplikasi dengan CRUD
Mengapa memilih Laravel untuk pengembangan aplikasi dengan CRUD? Berikut beberapa keuntungannya:
- Kemudahan dan Kecepatan: Laravel menyediakan banyak fitur dan tools yang mempercepat proses pengembangan CRUD.
- Kode yang Terstruktur: Laravel mendorong penggunaan struktur kode yang terstruktur dan mudah dipelihara.
- Keamanan: Laravel memiliki fitur keamanan bawaan yang melindungi aplikasi Anda dari berbagai serangan.
- Komunitas yang Besar: Laravel memiliki komunitas developer yang besar dan aktif, sehingga Anda dapat dengan mudah mendapatkan bantuan jika menghadapi masalah.
- Dokumentasi yang Lengkap: Laravel memiliki dokumentasi yang lengkap dan mudah dipahami, sehingga Anda dapat dengan mudah mempelajari framework ini.
10. Kesimpulan: Laravel, Pilihan Tepat untuk Aplikasi CRUD
Dengan contoh project Laravel sederhana dengan CRUD yang telah kita buat, Anda telah melihat sendiri betapa mudahnya mengimplementasikan operasi CRUD di Laravel. Framework ini menyediakan berbagai fitur dan tools yang memudahkan proses pengembangan, mulai dari pembuatan database, model, controller, hingga tampilan.
Laravel adalah pilihan yang tepat untuk membangun aplikasi web dengan CRUD, baik aplikasi sederhana maupun kompleks. Dengan mengikuti panduan ini dan terus belajar, Anda akan menjadi developer Laravel yang handal. Selamat mencoba dan semoga sukses!
11. Langkah Selanjutnya: Mengembangkan Aplikasi To-Do List Lebih Lanjut
Setelah berhasil membuat aplikasi To-Do List sederhana, Anda dapat mengembangkan aplikasi ini lebih lanjut dengan menambahkan fitur-fitur berikut:
- Autentikasi Pengguna: Memungkinkan pengguna untuk membuat akun dan login.
- Kategori To-Do: Mengelompokkan to-do berdasarkan kategori.
- Prioritas To-Do: Menentukan prioritas untuk setiap to-do.
- Pencarian To-Do: Memungkinkan pengguna mencari to-do berdasarkan kata kunci.
- Notifikasi: Mengirimkan notifikasi kepada pengguna ketika to-do mendekati deadline.
Dengan menambahkan fitur-fitur ini, aplikasi To-Do List Anda akan menjadi lebih lengkap dan bermanfaat.
12. Referensi dan Sumber Daya Tambahan untuk Belajar Laravel dan CRUD
Berikut beberapa referensi dan sumber daya tambahan yang dapat Anda gunakan untuk belajar Laravel dan CRUD:
- Dokumentasi Resmi Laravel: https://laravel.com/docs/
- Laravel Bootcamp: https://bootcamp.laravel.com/
- Laravel News: https://laravel-news.com/
- Laracasts: https://laracasts.com/ (Berbayar)
- YouTube Channels: Banyak channel YouTube yang menyediakan tutorial Laravel, seperti FreeCodeCamp.org dan Traversy Media.
Dengan memanfaatkan sumber daya ini, Anda akan dapat memperdalam pengetahuan Anda tentang Laravel dan CRUD, serta membangun aplikasi web yang lebih kompleks dan canggih. Selamat belajar!









