Selamat datang! Apakah kamu seorang pengembang web yang ingin mempelajari cara membuat aplikasi CRUD (Create, Read, Update, Delete) menggunakan Laravel 9? Kalau iya, kamu berada di tempat yang tepat! Tutorial ini akan memandu kamu langkah demi langkah, dari awal hingga akhir, untuk membangun aplikasi CRUD yang fungsional dan efisien. Laravel 9 adalah framework PHP yang populer dan powerful, membuatnya ideal untuk mengembangkan aplikasi web modern. Mari kita mulai!
Apa itu CRUD dan Mengapa Penting?
CRUD adalah singkatan dari Create, Read, Update, dan Delete. Ini adalah empat operasi dasar yang dilakukan pada sebagian besar data dalam database. Setiap aplikasi web yang berinteraksi dengan database, mulai dari blog sederhana hingga sistem manajemen inventaris yang kompleks, menggunakan operasi CRUD.
- Create (Buat): Menambah data baru ke database.
- Read (Baca): Mengambil data dari database.
- Update (Ubah): Memperbarui data yang sudah ada di database.
- Delete (Hapus): Menghapus data dari database.
Memahami dan mengimplementasikan CRUD dengan benar adalah kunci untuk membangun aplikasi web yang dinamis dan interaktif. Laravel, dengan fitur-fiturnya yang kaya, menyederhanakan proses CRUD, memungkinkan pengembang untuk fokus pada logika bisnis daripada detail teknis yang rumit.
Persiapan Awal: Instalasi dan Konfigurasi Laravel 9
Sebelum kita mulai membuat CRUD dengan Laravel 9, pastikan kamu sudah memiliki beberapa hal berikut:
Related Post
- PHP: Versi 8.0 ke atas. Kamu bisa mengecek versi PHP dengan menjalankan perintah
php -vdi terminal. - Composer: Dependency manager untuk PHP. Unduh dan instal Composer dari https://getcomposer.org/.
- Database: MySQL, PostgreSQL, atau database lain yang didukung Laravel. Tutorial ini akan menggunakan MySQL.
- Text Editor/IDE: Visual Studio Code, Sublime Text, PHPStorm, atau text editor favorit kamu.
- Node.js & NPM (Optional): Hanya jika kamu ingin menggunakan Laravel Mix untuk mengelola asset frontend (CSS, JavaScript).
Setelah semua persyaratan terpenuhi, mari kita mulai instalasi Laravel 9:
-
Buka Terminal/Command Prompt: Navigasikan ke direktori tempat kamu ingin membuat proyek Laravel.
-
Jalankan Perintah Composer: Gunakan perintah berikut untuk membuat proyek Laravel baru:
composer create-project laravel/laravel:^9.0 nama-proyekGanti
nama-proyekdengan nama proyek yang kamu inginkan. -
Masuk ke Direktori Proyek:
cd nama-proyek -
Konfigurasi Database: Buka file
.envdi direktori proyek. Cari variabel yang berhubungan dengan database:DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=nama_pengguna_database DB_PASSWORD=password_databaseGanti nilai-nilai di atas sesuai dengan konfigurasi database kamu. Pastikan database sudah dibuat sebelum melanjutkan.
-
Migrasi Database: Jalankan perintah berikut untuk membuat tabel-tabel default Laravel:
php artisan migrateJika kamu mendapatkan error terkait key length, tambahkan kode berikut ke
app/Providers/AppServiceProvider.phpdi dalam methodboot():use IlluminateSupportFacadesSchema; public function boot() { Schema::defaultStringLength(191); }Kemudian jalankan kembali perintah
php artisan migrate.
Dengan langkah-langkah di atas, kamu sudah berhasil menginstal dan mengkonfigurasi Laravel 9. Sekarang kita siap untuk membuat model dan migrasi untuk aplikasi CRUD kita.
Membuat Model dan Migrasi: Dasar Struktur Data
Langkah selanjutnya dalam tutorial membuat CRUD dengan Laravel 9 adalah mendefinisikan struktur data yang akan kita kelola. Dalam contoh ini, kita akan membuat aplikasi sederhana untuk mengelola data buku.
-
Membuat Model: Gunakan perintah Artisan untuk membuat model
Buku:php artisan make:model Buku -mPerintah ini akan membuat dua file:
app/Models/Buku.php(model) dandatabase/migrations/xxxx_xx_xx_xxxxxx_create_bukus_table.php(migrasi). Opsi-mmenandakan bahwa kita juga ingin membuat file migrasi sekaligus. -
Modifikasi Migrasi: Buka file migrasi yang baru saja dibuat. Tambahkan definisi kolom-kolom yang akan ada di tabel
bukus. Contoh:use IlluminateDatabaseMigrationsMigration; use IlluminateDatabaseSchemaBlueprint; use IlluminateSupportFacadesSchema; return new class extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('bukus', function (Blueprint $table) { $table->id(); $table->string('judul'); $table->string('penulis'); $table->text('deskripsi')->nullable(); $table->integer('tahun_terbit'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('bukus'); } };Kode di atas mendefinisikan tabel
bukusdengan kolomid,judul,penulis,deskripsi,tahun_terbit,created_at, danupdated_at. -
Jalankan Migrasi: Jalankan perintah berikut untuk membuat tabel di database:
php artisan migrate -
Modifikasi Model: Buka file
app/Models/Buku.phpdan tambahkan properti$fillableuntuk menentukan kolom mana yang boleh diisi secara massal (mass assignment):namespace AppModels; use IlluminateDatabaseEloquentFactoriesHasFactory; use IlluminateDatabaseEloquentModel; class Buku extends Model { use HasFactory; protected $fillable = [ 'judul', 'penulis', 'deskripsi', 'tahun_terbit', ]; }
Dengan ini, model dan migrasi sudah selesai. Sekarang kita bisa melanjutkan ke pembuatan controller untuk menangani logika CRUD.
Membuat Controller: Logika Bisnis Aplikasi
Controller adalah jantung dari aplikasi CRUD kita. Controller akan menerima request dari user, berinteraksi dengan model, dan mengembalikan response (biasanya berupa view).
-
Membuat Controller: Gunakan perintah Artisan untuk membuat controller
BukuControllerdengan opsi--resource:php artisan make:controller BukuController --resourceOpsi
--resourceakan membuat controller dengan method-method standar untuk operasi CRUD (index, create, store, show, edit, update, destroy). -
Implementasi Method Controller: Buka file
app/Http/Controllers/BukuController.phpdan implementasikan method-method CRUD:<?php namespace AppHttpControllers; use AppModelsBuku; use IlluminateHttpRequest; class BukuController extends Controller { /** * Display a listing of the resource. * * @return IlluminateHttpResponse */ public function index() { $bukus = Buku::all(); return view('bukus.index', compact('bukus')); } /** * Show the form for creating a new resource. * * @return IlluminateHttpResponse */ public function create() { return view('bukus.create'); } /** * Store a newly created resource in storage. * * @param IlluminateHttpRequest $request * @return IlluminateHttpResponse */ public function store(Request $request) { $request->validate([ 'judul' => 'required', 'penulis' => 'required', 'tahun_terbit' => 'required|integer', ]); Buku::create($request->all()); return redirect()->route('bukus.index') ->with('success','Buku berhasil ditambahkan.'); } /** * Display the specified resource. * * @param AppModelsBuku $buku * @return IlluminateHttpResponse */ public function show(Buku $buku) { return view('bukus.show',compact('buku')); } /** * Show the form for editing the specified resource. * * @param AppModelsBuku $buku * @return IlluminateHttpResponse */ public function edit(Buku $buku) { return view('bukus.edit',compact('buku')); } /** * Update the specified resource in storage. * * @param IlluminateHttpRequest $request * @param AppModelsBuku $buku * @return IlluminateHttpResponse */ public function update(Request $request, Buku $buku) { $request->validate([ 'judul' => 'required', 'penulis' => 'required', 'tahun_terbit' => 'required|integer', ]); $buku->update($request->all()); return redirect()->route('bukus.index') ->with('success','Buku berhasil diupdate.'); } /** * Remove the specified resource from storage. * * @param AppModelsBuku $buku * @return IlluminateHttpResponse */ public function destroy(Buku $buku) { $buku->delete(); return redirect()->route('bukus.index') ->with('success','Buku berhasil dihapus.'); } }Perhatikan penggunaan validasi di method
storedanupdateuntuk memastikan data yang disimpan ke database valid.
Dengan controller yang sudah dibuat, langkah selanjutnya adalah membuat view untuk menampilkan data dan formulir.
Membuat View: Antarmuka Pengguna
View adalah bagian dari aplikasi CRUD yang bertanggung jawab untuk menampilkan data kepada user dan menyediakan formulir untuk memasukkan data baru atau mengubah data yang sudah ada.
-
Membuat Direktori Views: Buat direktori
bukusdi dalam direktoriresources/views. Direktori ini akan berisi semua view yang berhubungan dengan data buku. -
Membuat File View: Buat file-file view berikut di dalam direktori
resources/views/bukus:index.blade.php: Menampilkan daftar buku.create.blade.php: Formulir untuk membuat buku baru.show.blade.php: Menampilkan detail buku.edit.blade.php: Formulir untuk mengubah data buku.
Berikut contoh isi dari masing-masing file view (gunakan Bootstrap untuk tampilan yang lebih baik):
index.blade.php:<!DOCTYPE html> <html> <head> <title>Daftar Buku</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Daftar Buku</h2> </div> <div class="pull-right"> <a class="btn btn-success" href="{{ route('bukus.create') }}"> Buat Buku Baru</a> </div> </div> </div> @if ($message = Session::get('success')) <div class="alert alert-success"> <p>{{ $message }}</p> </div> @endif <table class="table table-bordered"> <tr> <th>No</th> <th>Judul</th> <th>Penulis</th> <th>Tahun Terbit</th> <th width="280px">Action</th> </tr> @foreach ($bukus as $buku) <tr> <td>{{ ++$i }}</td> <td>{{ $buku->judul }}</td> <td>{{ $buku->penulis }}</td> <td>{{ $buku->tahun_terbit }}</td> <td> <form action="{{ route('bukus.destroy',$buku->id) }}" method="POST"> <a class="btn btn-info" href="{{ route('bukus.show',$buku->id) }}">Show</a> <a class="btn btn-primary" href="{{ route('bukus.edit',$buku->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:<!DOCTYPE html> <html> <head> <title>Buat Buku Baru</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Buat Buku Baru</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('bukus.index') }}"> Kembali</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('bukus.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="judul" class="form-control" placeholder="Judul"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Penulis:</strong> <input type="text" name="penulis" class="form-control" placeholder="Penulis"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Deskripsi:</strong> <textarea class="form-control" style="height:150px" name="deskripsi" placeholder="Deskripsi"></textarea> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Tahun Terbit:</strong> <input type="number" name="tahun_terbit" class="form-control" placeholder="Tahun Terbit"> </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:<!DOCTYPE html> <html> <head> <title>Detail Buku</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2> Detail Buku</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('bukus.index') }}"> Kembali</a> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Judul:</strong> {{ $buku->judul }} </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Penulis:</strong> {{ $buku->penulis }} </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Deskripsi:</strong> {{ $buku->deskripsi }} </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Tahun Terbit:</strong> {{ $buku->tahun_terbit }} </div> </div> </div> </div> </body> </html>edit.blade.php:<!DOCTYPE html> <html> <head> <title>Edit Buku</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Edit Buku</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('bukus.index') }}"> Kembali</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('bukus.update',$buku->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="judul" value="{{ $buku->judul }}" class="form-control" placeholder="Judul"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Penulis:</strong> <input type="text" name="penulis" value="{{ $buku->penulis }}" class="form-control" placeholder="Penulis"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Deskripsi:</strong> <textarea class="form-control" style="height:150px" name="deskripsi" placeholder="Deskripsi">{{ $buku->deskripsi }}</textarea> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Tahun Terbit:</strong> <input type="number" name="tahun_terbit" value="{{ $buku->tahun_terbit }}" class="form-control" placeholder="Tahun Terbit"> </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
APP_DEBUG=truedi.env: Ini akan membantu menampilkan error secara detail jika ada masalah pada view.
Setelah view dibuat, kita perlu menghubungkannya dengan controller melalui route.
Membuat Route: Menghubungkan URL ke Controller
Route adalah bagian penting dari aplikasi Laravel yang menghubungkan URL (Uniform Resource Locator) dengan controller yang sesuai.
-
Definisikan Route Resource: Buka file
routes/web.phpdan tambahkan route resource untukBukuController:use AppHttpControllersBukuController; 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 (string $name = 'Guest') { return view('welcome', ['name' => $name]); }); Route::resource('bukus', BukuController::class);Route
resourceakan secara otomatis membuat route untuk semua method CRUD diBukuController. Kamu bisa melihat daftar route yang terdaftar dengan menjalankan perintahphp artisan route:list.
Dengan route yang sudah didefinisikan, kamu sekarang bisa mengakses aplikasi CRUD buku melalui browser.
Menguji Aplikasi CRUD: Memastikan Semuanya Berfungsi
Setelah semua komponen (model, migrasi, controller, view, route) dibuat, saatnya untuk menguji aplikasi CRUD kita.
-
Jalankan Server Development: Jalankan perintah berikut untuk menjalankan server development Laravel:
php artisan serveIni akan menjalankan server pada alamat
http://127.0.0.1:8000. -
Akses Aplikasi melalui Browser: Buka browser dan akses URL
http://127.0.0.1:8000/bukus. Kamu akan melihat halaman daftar buku (yang masih kosong karena belum ada data). -
Uji Fungsi CRUD:
- Create: Klik tombol “Buat Buku Baru”. Isi formulir dan klik “Submit”. Buku baru akan ditambahkan ke database dan ditampilkan di halaman daftar buku.
- Read: Klik tombol “Show” di baris buku yang ingin dilihat detailnya.
- Update: Klik tombol “Edit” di baris buku yang ingin diubah datanya. Ubah data dan klik “Submit”. Data buku akan diperbarui di database.
- Delete: Klik tombol “Delete” di baris buku yang ingin dihapus. Konfirmasi penghapusan. Buku akan dihapus dari database.
Jika semua fungsi berjalan dengan baik, selamat! Kamu sudah berhasil membuat CRUD dengan Laravel 9.
Tips Tambahan: Meningkatkan Kualitas Aplikasi CRUD
Berikut beberapa tips tambahan untuk meningkatkan kualitas aplikasi CRUD kamu:
- Gunakan Validasi yang Lebih Kompleks: Validasi bawaan Laravel sudah cukup baik, tetapi kamu bisa membuat validasi yang lebih kompleks menggunakan custom validation rules.
- Implementasikan Pagination: Jika data buku sudah banyak, implementasikan pagination untuk memecah data menjadi beberapa halaman.
- Gunakan Eloquent Relationships: Jika ada hubungan antara tabel buku dengan tabel lain (misalnya tabel kategori), gunakan Eloquent relationships untuk mempermudah query data.
- Gunakan Middleware: Gunakan middleware untuk mengamankan aplikasi kamu, misalnya middleware untuk autentikasi dan otorisasi.
- Tulis Unit Test: Tulis unit test untuk memastikan kode kamu berfungsi dengan baik dan mencegah bug.
- Gunakan Template Engine yang Lebih Baik: Jika kamu ingin tampilan yang lebih modern, gunakan template engine seperti Vue.js atau React.js.
- Optimalkan Query Database: Hindari query database yang lambat dengan menggunakan eager loading dan indexing.
- Gunakan Caching: Gunakan caching untuk menyimpan data yang sering diakses sehingga aplikasi berjalan lebih cepat.
Kesimpulan: Menguasai CRUD dengan Laravel 9
Selamat, kamu telah berhasil menyelesaikan tutorial membuat CRUD dengan Laravel 9. Kamu sekarang memiliki pemahaman yang kuat tentang dasar-dasar CRUD dan bagaimana mengimplementasikannya dengan Laravel 9. Teruslah berlatih dan bereksperimen untuk menguasai Laravel 9 sepenuhnya dan membangun aplikasi web yang luar biasa.
Dengan mengikuti tutorial ini, kamu telah mempelajari cara:
- Menginstal dan mengkonfigurasi Laravel 9.
- Membuat model dan migrasi.
- Membuat controller untuk menangani logika CRUD.
- Membuat view untuk menampilkan data dan formulir.
- Membuat route untuk menghubungkan URL ke controller.
- Menguji aplikasi CRUD.
Semoga tutorial ini bermanfaat dan membantu kamu dalam perjalanan pengembangan web dengan Laravel 9. Selamat berkarya!
