Tips Backend Development

Membangun website dengan fitur backend atau admin memerlukan sebuah dashboard untuk mengelola konten. Laravel menyediakan dua package yang sangat membantu dalam hal ini, yaitu Filament dan Breeze. Apa Itu Filament? Filament adalah package Laravel yang memudahkan pembuatan dashboard admin, mirip seperti kotak perkakas lengkap untuk membangun CMS (Content Management System) pada website. Dengan Filament, kita tidak perlu membuat fitur admin dari nol. Package ini sudah menyediakan fitur siap pakai seperti CRUD, manajemen pengguna, dan pengelolaan konten. Bayangkan membangun rumah dengan kontraktor yang sudah menyediakan bahan bangunan, peralatan, dan pekerja ahli. Filament mempersingkat waktu dan tenaga, sehingga kita bisa fokus pada pengembangan fitur lainnya. Keunggulan Filament: User Interface Modern: Tampilan yang menarik dan user-friendly memudahkan admin dalam mengelola konten.Mudah Diintegrasikan: Filament bisa digabungkan dengan package lain yang diperlukan dalam proyek.Customizable: Kita bisa menyesuaikan fitur dan tampilan dashboard sesuai kebutuhan. Apa Itu Breeze? Breeze adalah package Laravel untuk membangun fitur login dan register dengan mudah. Jika Filament adalah kontraktor untuk membangun rumah, Breeze seperti paket starter yang menyediakan pintu dan kunci untuk rumah tersebut. Breeze fokus pada fitur autentikasi dasar seperti login, register, dan verifikasi pengguna. Keunggulan Breeze: Sederhana dan Mudah Digunakan: Cocok untuk proyek yang memerlukan fitur autentikasi dasar.Terintegrasi dengan Laravel: Breeze bekerja mulus dengan fitur Laravel lainnya.Starter Template: Breeze menyediakan template dasar untuk halaman login dan register, memudahkan kita memulai tanpa membuat semuanya dari awal. Mengapa Memilih Filament dan Breeze? Menggunakan Filament dan Breeze ibarat memilih alat yang tepat untuk pekerjaan tertentu. Filament membantu membangun CMS dengan cepat tanpa banyak detail teknis, sedangkan Breeze menyediakan fitur login dan register yang aman dan mudah. Dengan dua package ini, kita bisa menghemat waktu dan fokus pada fitur utama website tanpa perlu membuat semuanya dari nol. Latihan Membuat Dua Dashboard Berbeda dengan Filament dan Breeze Kali ini kita akan melakukan latihan menggunakan dua package Laravel yang sangat membantu, yaitu Filament dan Breeze, untuk membuat dua dashboard yang berbeda. Dashboard pertama akan kita buat untuk admin menggunakan Filament. Dashboard ini akan digunakan oleh admin untuk mengelola konten website, seperti menambah, mengedit, atau menghapus data dengan lebih mudah. Sementara itu, dashboard kedua akan kita buat untuk customer menggunakan Breeze. Dashboard ini akan fokus pada fitur-fitur yang berhubungan dengan pengguna biasa, seperti login, registrasi, dan manajemen profil. Dengan Breeze, kita bisa menyediakan halaman-halaman sederhana yang mudah digunakan oleh customer. Dengan menggunakan dua package ini, kita bisa membedakan antara hak akses dan tampilan untuk admin dan customer. Ini akan membantu kita mengelola website dengan lebih baik dan memberikan pengalaman pengguna yang optimal bagi kedua tipe pengguna tersebut. Tutorial Membuat Proyek Sewa Barang dengan Laravel 11 Pada tutorial ini, kita akan membuat proyek sewa barang menggunakan Laravel 11. Kita akan memulai dari tahap instalasi hingga membuat fitur-fitur penting seperti manajemen barang, pelanggan, dan transaksi sewa. Selain itu, kita juga akan mengintegrasikan package Filament untuk dashboard admin dan Breeze untuk fitur autentikasi customer. 1) Membuat Proyek Laravel 11 Pertama-tama, kita perlu membuat proyek Laravel 11. Pastikan Anda sudah menginstal Composer dan PHP di sistem Anda. composer create-project laravel/laravel sewa-barang "11.*" Setelah proyek selesai diunduh, masuk ke folder proyek dengan perintah berikut: cd sewa-barang 2) Menyiapkan Database Buat database baru di MySQL, misalnya dengan nama sewa_barang. Kemudian, buka file .env di proyek Laravel dan sesuaikan konfigurasi database seperti berikut: DB_DATABASE=sewa_barang DB_USERNAME=root DB_PASSWORD= Jangan lupa untuk menjalankan migrasi awal untuk membuat tabel-tabel bawaan Laravel: php artisan migrate 3) Membuat Model dan Migration Kita akan membuat model dan migration untuk entitas yang diperlukan, seperti Barang, Pelanggan, dan TransaksiSewa. php artisan make:model Barang -m php artisan make:model Pelanggan -m php artisan make:model TransaksiSewa -m Kemudian, buka file migrasi di folder database/migrations dan tambahkan struktur tabelnya. Barang Migration: Schema::create('barangs', function (Blueprint $table) { $table->id(); $table->string('nama'); $table->text('deskripsi'); $table->integer('stok'); $table->decimal('harga_sewa', 10, 2); $table->timestamps(); }); Pelanggan Migration: Schema::create('pelanggans', function (Blueprint $table) { $table->id(); $table->string('nama'); $table->string('email')->unique(); $table->string('telepon'); $table->text('alamat'); $table->timestamps(); }); TransaksiSewa Migration: Schema::create('transaksi_sewas', function (Blueprint $table) { $table->id(); $table->foreignId('barang_id')->constrained('barangs'); $table->foreignId('pelanggan_id')->constrained('pelanggans'); $table->date('tanggal_mulai'); $table->date('tanggal_selesai'); $table->decimal('total_harga', 10, 2); $table->timestamps(); }); Jalankan migrasi untuk membuat tabel-tabel tersebut: php artisan migrate 4) Membuat Relasi Antar Model Selanjutnya, tambahkan relasi antar model. Buka file model Barang, Pelanggan, dan TransaksiSewa yang berada di folder app/Models. Barang Model: public function transaksiSewa() { return $this->hasMany(TransaksiSewa::class); } Pelanggan Model: public function transaksiSewa() { return $this->hasMany(TransaksiSewa::class); } TransaksiSewa Model: public function barang() { return $this->belongsTo(Barang::class); } public function pelanggan() { return $this->belongsTo(Pelanggan::class); } Menginstall Package Filament dan Breeze 1) Menginstall Filament Filament digunakan untuk membuat dashboard admin. Instalasi Filament sangat mudah dan bisa dilakukan dengan langkah berikut: Jalankan perintah berikut untuk menginstal Filament: composer require filament/filament Setelah instalasi selesai, jalankan perintah berikut untuk mempublikasikan aset dan konfigurasi Filament: php artisan filament:install Buat user admin untuk login ke dashboard Filament: php artisan make:filament-user Ikuti instruksi yang muncul untuk membuat akun admin. 2) Menginstall Breeze Breeze digunakan untuk fitur autentikasi seperti login dan register untuk customer. Jalankan perintah berikut untuk menginstal Breeze: composer require laravel/breeze --dev Jalankan perintah untuk menginstal scaffolding Breeze: php artisan breeze:install Pilih Blade atau React sesuai kebutuhan tampilan autentikasi Anda, lalu jalankan perintah: npm install && npm run dev Jalankan migrasi untuk membuat tabel pengguna: php artisan migrate Dengan instalasi Filament dan Breeze, kita bisa memiliki dua dashboard yang berbeda: satu untuk admin dengan Filament dan satu untuk customer dengan Breeze. Selanjutnya, kita bisa mengembangkan fitur-fitur lebih lanjut seperti manajemen barang dan transaksi sewa. Membuat Akun Super Admin dan Resource di Filament Dalam proyek Laravel yang menggunakan Filament untuk dashboard admin, kita bisa dengan mudah membuat akun super admin dan resource yang dibutuhkan untuk mengelola data. Berikut adalah langkah-langkah membuat akun super admin menggunakan command Artisan, serta cara membuat resource seperti barang, pelanggan, dan transaksi. Membuat Akun Super Admin dengan Command Artisan Pastikan Filament sudah terinstal di proyek Laravel Anda. Jika belum, Anda bisa menginstalnya dengan perintah berikut: composer require filament/filament Untuk membuat akun super admin, jalankan command Artisan berikut: php artisan make:filament-user Anda akan diminta memasukkan beberapa informasi seperti nama, email, dan password. Masukkan informasi yang sesuai. Name: Super Admin Email: [email protected] Password: ***** Is Super Admin? (yes/no) [no]: yes Dengan memilih yes saat ditanya apakah akun tersebut adalah super admin, Anda memberikan hak akses penuh pada akun tersebut. Akun super admin ini dapat login ke dashboard Filament menggunakan email dan password yang sudah ditentukan. Membuat Resource di Filament Untuk mengelola data dari dashboard admin, kita bisa membuat resource di Filament. Resource ini memungkinkan kita untuk membuat fitur CRUD (Create, Read, Update, Delete) secara otomatis untuk model tertentu. Untuk membuat resource Barang, jalankan command berikut: php artisan make:filament-resource Barang Ini akan menghasilkan resource lengkap dengan file form dan table di folder app/Filament/Resources/BarangResource. Anda bisa menyesuaikan field di form dan table sesuai dengan struktur tabel Barang. Selanjutnya, untuk membuat resource Pelanggan, jalankan command: php artisan make:filament-resource Pelanggan Resource ini memungkinkan Anda untuk mengelola data pelanggan langsung dari dashboard. File resource akan dihasilkan di folder app/Filament/Resources/PelangganResource, dan Anda bisa menyesuaikan field dan validasi yang diperlukan. Terakhir, buat resource untuk TransaksiSewa dengan perintah: php artisan make:filament-resource TransaksiSewa Dengan resource ini, admin dapat mengelola transaksi sewa barang. File resource akan berada di folder app/Filament/Resources/TransaksiSewaResource. Anda dapat menambahkan validasi khusus atau menyesuaikan tampilan form sesuai dengan kebutuhan bisnis. Mengatur Form dan Table pada Resource Barang di Filament Dalam resource Barang, kita bisa mengatur tampilan form dan table agar sesuai dengan kebutuhan pengelolaan data barang. Pengaturan ini meliputi penambahan field, validasi, dan tampilan table yang lebih informatif. Berikut ini adalah cara mengatur form dan table pada file BarangResource.php. Mengatur Form pada Resource Barang Buka file BarangResource.php yang berada di folder app/Filament/Resources/BarangResource. Pada method form(), tambahkan field-field yang diperlukan. Misalnya, kita ingin menambahkan field nama, deskripsi, stok, dan harga_sewa. Berikut contoh konfigurasinya: public static function form(Form $form): Form { return $form ->schema([ TextInput::make('nama') ->required() ->label('Nama Barang'), Textarea::make('deskripsi') ->required() ->label('Deskripsi Barang'), NumberInput::make('stok') ->required() ->label('Stok Barang') ->min(1), TextInput::make('harga_sewa') ->required() ->label('Harga Sewa') ->numeric(), ]); } Penjelasan: TextInput::make('nama') membuat input teks untuk nama barang dengan validasi required.Textarea::make('deskripsi') membuat area teks untuk deskripsi barang.NumberInput::make('stok') membuat input angka untuk stok barang dengan minimum nilai 1.TextInput::make('harga_sewa') membuat input teks untuk harga sewa yang diharuskan numerik. Anda juga bisa menambahkan validasi tambahan atau logika khusus pada field dengan chaining method seperti minLength(), maxLength(), atau regex() sesuai kebutuhan. Mengatur Table pada Resource Barang Pada method table(), tambahkan kolom-kolom yang ingin ditampilkan di table. Berikut ini adalah contoh pengaturan table: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('id') ->label('ID') ->sortable(), TextColumn::make('nama') ->label('Nama Barang') ->sortable() ->searchable(), TextColumn::make('stok') ->label('Stok') ->sortable(), TextColumn::make('harga_sewa') ->label('Harga Sewa') ->money('idr', true), TextColumn::make('created_at') ->label('Tanggal Dibuat') ->dateTime('d-M-Y H:i'), ]) ->filters([ // Tambahkan filter jika diperlukan ]) ->actions([ Tables\\\\Actions\\\\EditAction::make(), Tables\\\\Actions\\\\DeleteAction::make(), ]) ->bulkActions([ Tables\\\\Actions\\\\DeleteBulkAction::make(), ]); } Penjelasan: TextColumn::make('id') menampilkan kolom ID dengan opsi sortable.TextColumn::make('nama') menampilkan nama barang yang bisa diurutkan dan dicari.TextColumn::make('stok') menampilkan stok barang.TextColumn::make('harga_sewa') menampilkan harga sewa dengan format mata uang Rupiah.TextColumn::make('created_at') menampilkan tanggal pembuatan dalam format d-M-Y H:i. Anda bisa menambahkan filter untuk memudahkan pencarian data spesifik dengan menambahkan konfigurasi pada >filters([]). Tambahkan aksi seperti edit dan delete untuk memudahkan pengelolaan data langsung dari table dengan konfigurasi pada >actions([]). Mengatur Form dan Table pada Resource Pelanggan Untuk mengelola data pelanggan dengan lebih efektif di dashboard admin, kita perlu mengatur form dan table pada resource Pelanggan. Berikut langkah-langkahnya: Mengatur Form pada Resource Pelanggan Buka file PelangganResource.php yang berada di folder app/Filament/Resources/PelangganResource. Pada method form(), tambahkan field-field yang diperlukan untuk input data pelanggan seperti nama, email, telepon, dan alamat. Berikut contoh konfigurasinya: public static function form(Form $form): Form { return $form ->schema([ TextInput::make('nama') ->required() ->label('Nama Lengkap'), TextInput::make('email') ->required() ->email() ->label('Email'), TextInput::make('telepon') ->required() ->label('Nomor Telepon'), Textarea::make('alamat') ->required() ->label('Alamat Lengkap'), ]); } Penjelasan: TextInput::make('nama') membuat input teks untuk nama lengkap pelanggan dengan validasi required.TextInput::make('email') membuat input teks untuk email dengan validasi required dan format email.TextInput::make('telepon') membuat input teks untuk nomor telepon yang juga diharuskan.Textarea::make('alamat') membuat area teks untuk alamat lengkap pelanggan. Sesuaikan field dan validasi sesuai kebutuhan, misalnya menambahkan validasi unik untuk email agar tidak ada data duplikat. Mengatur Table pada Resource Pelanggan Pada method table(), tambahkan kolom-kolom yang ingin ditampilkan di table, seperti id, nama, email, telepon, dan alamat. Berikut ini adalah contoh pengaturan table: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('id') ->label('ID') ->sortable(), TextColumn::make('nama') ->label('Nama Pelanggan') ->sortable() ->searchable(), TextColumn::make('email') ->label('Email') ->sortable() ->searchable(), TextColumn::make('telepon') ->label('Telepon') ->sortable(), TextColumn::make('alamat') ->label('Alamat') ->wrap(), TextColumn::make('created_at') ->label('Tanggal Bergabung') ->dateTime('d-M-Y H:i'), ]) ->filters([ // Tambahkan filter jika diperlukan ]) ->actions([ Tables\\\\Actions\\\\EditAction::make(), Tables\\\\Actions\\\\DeleteAction::make(), ]) ->bulkActions([ Tables\\\\Actions\\\\DeleteBulkAction::make(), ]); } Penjelasan: TextColumn::make('id') menampilkan ID pelanggan dengan opsi sortable.TextColumn::make('nama') dan TextColumn::make('email') bisa diurutkan dan dicari, memudahkan pencarian data spesifik.TextColumn::make('telepon') dan TextColumn::make('alamat') menampilkan data nomor telepon dan alamat pelanggan.TextColumn::make('created_at') menampilkan tanggal pelanggan bergabung dengan format d-M-Y H:i. Anda dapat menambahkan filter atau aksi lainnya sesuai dengan kebutuhan untuk memudahkan pengelolaan data pelanggan langsung dari table. Mengatur Form dan Table pada Resource TransaksiSewa Resource TransaksiSewa digunakan untuk mengelola data transaksi penyewaan barang. Berikut cara mengatur form dan table pada resource ini. Mengatur Form pada Resource TransaksiSewa Buka file TransaksiSewaResource.php yang berada di folder app/Filament/Resources/TransaksiSewaResource. Pada method form(), tambahkan field-field yang diperlukan untuk input data transaksi sewa, seperti barang_id, pelanggan_id, tanggal_mulai, tanggal_selesai, dan total_harga. Berikut contoh konfigurasinya: public static function form(Form $form): Form { return $form ->schema([ Select::make('barang_id') ->relationship('barang', 'nama') ->required() ->label('Barang yang Disewa'), Select::make('pelanggan_id') ->relationship('pelanggan', 'nama') ->required() ->label('Nama Pelanggan'), DatePicker::make('tanggal_mulai') ->required() ->label('Tanggal Mulai Sewa'), DatePicker::make('tanggal_selesai') ->required() ->label('Tanggal Selesai Sewa'), TextInput::make('total_harga') ->required() ->numeric() ->label('Total Harga Sewa'), ]); } Penjelasan: Select::make('barang_id') membuat dropdown untuk memilih barang yang disewa berdasarkan relasi dengan model Barang.Select::make('pelanggan_id') membuat dropdown untuk memilih pelanggan berdasarkan relasi dengan model Pelanggan.DatePicker::make('tanggal_mulai') dan DatePicker::make('tanggal_selesai') digunakan untuk memilih tanggal mulai dan selesai penyewaan.TextInput::make('total_harga') membuat input teks untuk total harga sewa dengan format numerik. Pastikan relasi barang dan pelanggan sudah didefinisikan pada model TransaksiSewa agar data bisa ditampilkan dengan benar di dropdown. Mengatur Table pada Resource TransaksiSewa Pada method table(), tambahkan kolom-kolom yang ingin ditampilkan di table seperti id, barang.nama, pelanggan.nama, tanggal_mulai, tanggal_selesai, dan total_harga. Berikut ini adalah contoh pengaturan table: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('id') ->label('ID') ->sortable(), TextColumn::make('barang.nama') ->label('Barang') ->sortable() ->searchable(), TextColumn::make('pelanggan.nama') ->label('Pelanggan') ->sortable() ->searchable(), TextColumn::make('tanggal_mulai') ->label('Tanggal Mulai') ->dateTime('d-M-Y'), TextColumn::make('tanggal_selesai') ->label('Tanggal Selesai') ->dateTime('d-M-Y'), TextColumn::make('total_harga') ->label('Total Harga') ->money('idr', true), ]) ->filters([ // Tambahkan filter jika diperlukan ]) ->actions([ Tables\\\\Actions\\\\EditAction::make(), Tables\\\\Actions\\\\DeleteAction::make(), ]) ->bulkActions([ Tables\\\\Actions\\\\DeleteBulkAction::make(), ]); } Penjelasan: TextColumn::make('id') menampilkan ID transaksi.TextColumn::make('barang.nama') dan TextColumn::make('pelanggan.nama') menampilkan nama barang dan nama pelanggan yang terhubung dengan relasi barang dan pelanggan.TextColumn::make('tanggal_mulai') dan TextColumn::make('tanggal_selesai') menampilkan tanggal mulai dan selesai penyewaan.TextColumn::make('total_harga') menampilkan total harga sewa dengan format mata uang Rupiah. Anda bisa menambahkan filter tambahan untuk memudahkan pencarian data transaksi berdasarkan tanggal atau pelanggan. Membuat Halaman Barang dan Transaksi untuk Customer Menggunakan Breeze Setelah customer berhasil mendaftar dan login menggunakan Breeze, kita perlu menyediakan halaman khusus untuk menampilkan data barang yang tersedia serta riwayat transaksi penyewaan mereka. Berikut adalah langkah-langkah lengkap untuk membuat halaman Barang dan Transaksi yang dapat diakses oleh customer. Mengatur Rute dan Controller Pertama, buat dua controller baru untuk mengelola halaman barang dan transaksi: php artisan make:controller Customer/BarangController php artisan make:controller Customer/TransaksiController Dua controller ini akan menangani logika untuk menampilkan barang dan transaksi kepada customer. Pada file BarangController.php, tambahkan method index() untuk menampilkan daftar barang: namespace App\\\\Http\\\\Controllers\\\\Customer; use App\\\\Http\\\\Controllers\\\\Controller; use App\\\\Models\\\\Barang; class BarangController extends Controller { public function index() { $barangs = Barang::all(); // Mengambil semua data barang return view('customer.barang.index', compact('barangs')); } } Selanjutnya, pada file TransaksiController.php, tambahkan method index() untuk menampilkan riwayat transaksi customer: namespace App\\\\Http\\\\Controllers\\\\Customer; use App\\\\Http\\\\Controllers\\\\Controller; use App\\\\Models\\\\TransaksiSewa; use Illuminate\\\\Support\\\\Facades\\\\Auth; class TransaksiController extends Controller { public function index() { $transaksis = TransaksiSewa::where('pelanggan_id', Auth::id())->get(); // Mengambil transaksi berdasarkan ID customer return view('customer.transaksi.index', compact('transaksis')); } } Pada method ini, kita menggunakan Auth::id() untuk mengambil ID customer yang sedang login. Selanjutnya, buat rute di file web.php untuk mengakses halaman barang dan transaksi: Route::middleware(['auth'])->group(function () { Route::get('/barang', [App\\\\Http\\\\Controllers\\\\Customer\\\\BarangController::class, 'index'])->name('customer.barang.index'); Route::get('/transaksi', [App\\\\Http\\\\Controllers\\\\Customer\\\\TransaksiController::class, 'index'])->name('customer.transaksi.index'); }); Pastikan rute ini dilindungi oleh middleware auth agar hanya customer yang sudah login yang bisa mengaksesnya. Membuat View untuk Halaman Barang Buat folder barang di dalam folder resources/views/customer dan buat file index.blade.php di dalamnya. File ini akan menampilkan daftar barang yang tersedia untuk disewa. Pada file index.blade.php, tambahkan kode berikut untuk menampilkan daftar barang: @extends('layouts.app') @section('content') <div class="container"> <h1>Daftar Barang</h1> <div class="row"> @foreach($barangs as $barang) <div class="col-md-4"> <div class="card mb-4"> <div class="card-body"> <h5 class="card-title">{{ $barang->nama }}</h5> <p class="card-text">{{ $barang->deskripsi }}</p> <p class="card-text">Stok: {{ $barang->stok }}</p> <p class="card-text">Harga Sewa: Rp{{ number_format($barang->harga_sewa, 0, ',', '.') }}</p> <a href="#" class="btn btn-primary">Sewa Sekarang</a> </div> </div> </div> @endforeach </div> </div> @endsection Penjelasan: Menggunakan @foreach($barangs as $barang) untuk menampilkan daftar barang dalam bentuk kartu.Setiap barang akan memiliki informasi seperti nama, deskripsi, stok, dan harga sewa. Membuat View untuk Halaman Transaksi Buat folder transaksi di dalam folder resources/views/customer dan buat file index.blade.php di dalamnya. File ini akan menampilkan riwayat transaksi penyewaan barang oleh customer. Pada file index.blade.php, tambahkan kode berikut untuk menampilkan daftar transaksi: @extends('layouts.app') @section('content') <div class="container"> <h1>Riwayat Transaksi</h1> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Barang</th> <th>Tanggal Mulai</th> <th>Tanggal Selesai</th> <th>Total Harga</th> </tr> </thead> <tbody> @foreach($transaksis as $transaksi) <tr> <td>{{ $transaksi->id }}</td> <td>{{ $transaksi->barang->nama }}</td> <td>{{ $transaksi->tanggal_mulai->format('d-m-Y') }}</td> <td>{{ $transaksi->tanggal_selesai->format('d-m-Y') }}</td> <td>Rp{{ number_format($transaksi->total_harga, 0, ',', '.') }}</td> </tr> @endforeach </tbody> </table> </div> @endsection Penjelasan: Menampilkan data transaksi dalam bentuk tabel dengan kolom seperti ID transaksi, nama barang, tanggal mulai dan selesai sewa, serta total harga.Menggunakan relasi barang->nama untuk menampilkan nama barang yang disewa pada setiap transaksi. Membuat Fitur Penyewaan Barang oleh Customer Untuk memungkinkan customer menyewa barang, kita perlu menambahkan beberapa fitur, termasuk form pemesanan, logika penyewaan, dan penyimpanan transaksi ke dalam database. Berikut adalah langkah-langkah lengkap untuk membuat fitur ini. Menambahkan Rute dan Controller untuk Proses Penyewaan Buat method baru sewa() di dalam BarangController untuk menampilkan form penyewaan barang: public function sewa($id) { $barang = Barang::findOrFail($id); // Mengambil data barang berdasarkan ID return view('customer.barang.sewa', compact('barang')); } Buat method storeSewa() di dalam BarangController untuk menyimpan data transaksi penyewaan: public function storeSewa(Request $request, $id) { $request->validate([ 'tanggal_mulai' => 'required|date', 'tanggal_selesai' => 'required|date|after:tanggal_mulai', ]); $barang = Barang::findOrFail($id); // Hitung total harga sewa $total_harga = $barang->harga_sewa * $request->input('lama_sewa'); // Simpan transaksi sewa TransaksiSewa::create([ 'barang_id' => $barang->id, 'pelanggan_id' => Auth::id(), 'tanggal_mulai' => $request->input('tanggal_mulai'), 'tanggal_selesai' => $request->input('tanggal_selesai'), 'total_harga' => $total_harga, ]); // Kurangi stok barang $barang->stok -= 1; $barang->save(); return redirect()->route('customer.transaksi.index')->with('success', 'Barang berhasil disewa!'); } Penjelasan: storeSewa() memvalidasi input dari form, menghitung total harga sewa, menyimpan data transaksi ke tabel transaksi_sewa, dan mengurangi stok barang. Tambahkan rute baru di web.php untuk proses penyewaan barang: Route::middleware(['auth'])->group(function () { Route::get('/barang/{id}/sewa', [App\\\\Http\\\\Controllers\\\\Customer\\\\BarangController::class, 'sewa'])->name('customer.barang.sewa'); Route::post('/barang/{id}/sewa', [App\\\\Http\\\\Controllers\\\\Customer\\\\BarangController::class, 'storeSewa'])->name('customer.barang.storeSewa'); }); Penjelasan: Rute get digunakan untuk menampilkan form penyewaan.Rute post digunakan untuk menyimpan data penyewaan setelah customer mengisi form. Membuat View untuk Form Penyewaan Barang Buat file sewa.blade.php di dalam folder resources/views/customer/barang. File ini akan berfungsi sebagai form untuk penyewaan barang. Tambahkan kode berikut pada file sewa.blade.php: @extends('layouts.app') @section('content') <div class="container"> <h1>Sewa Barang: {{ $barang->nama }}</h1> <form method="POST" action="{{ route('customer.barang.storeSewa', $barang->id) }}"> @csrf <div class="mb-3"> <label for="tanggal_mulai" class="form-label">Tanggal Mulai Sewa</label> <input type="date" class="form-control" id="tanggal_mulai" name="tanggal_mulai" required> </div> <div class="mb-3"> <label for="tanggal_selesai" class="form-label">Tanggal Selesai Sewa</label> <input type="date" class="form-control" id="tanggal_selesai" name="tanggal_selesai" required> </div> <button type="submit" class="btn btn-primary">Sewa Sekarang</button> </form> </div> @endsection Penjelasan: Form ini memungkinkan customer untuk memasukkan tanggal mulai dan tanggal selesai sewa.Aksi form mengarah ke method storeSewa() yang akan memproses data penyewaan. Menampilkan Data Penyewaan pada Halaman Transaksi Pada file TransaksiController.php, pastikan data barang yang disewa juga ditampilkan pada view index.blade.php di halaman transaksi: public function index() { $transaksis = TransaksiSewa::with('barang') // Menambahkan relasi barang ->where('pelanggan_id', Auth::id()) ->get(); return view('customer.transaksi.index', compact('transaksis')); } Tambahkan data barang di tabel transaksi di view index.blade.php: @extends('layouts.app') @section('content') <div class="container"> <h1>Riwayat Transaksi</h1> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Barang</th> <th>Tanggal Mulai</th> <th>Tanggal Selesai</th> <th>Total Harga</th> </tr> </thead> <tbody> @foreach($transaksis as $transaksi) <tr> <td>{{ $transaksi->id }}</td> <td>{{ $transaksi->barang->nama }}</td> <td>{{ $transaksi->tanggal_mulai->format('d-m-Y') }}</td> <td>{{ $transaksi->tanggal_selesai->format('d-m-Y') }}</td> <td>Rp{{ number_format($transaksi->total_harga, 0, ',', '.') }}</td> </tr> @endforeach </tbody> </table> </div> @endsection Penjelasan: Data barang yang disewa ditampilkan menggunakan relasi barang->nama.Semua transaksi disusun berdasarkan ID, nama barang, tanggal mulai, tanggal selesai, dan total harga. Cara Admin Mengkonfirmasi Transaksi dari Customer melalui Halaman Admin Filament Untuk mengelola dan mengkonfirmasi transaksi dari customer, admin dapat menggunakan halaman admin yang sudah disiapkan menggunakan Filament. Berikut adalah langkah-langkah yang perlu dilakukan untuk menambahkan fitur konfirmasi transaksi pada dashboard admin Filament. Menambahkan Status Konfirmasi pada Tabel TransaksiSewa Tambahkan kolom status pada tabel transaksi_sewas untuk menyimpan status konfirmasi transaksi. Buka file migrasi untuk transaksi_sewas atau buat migrasi baru untuk menambahkan kolom ini: php artisan make:migration add_status_to_transaksi_sewas_table --table=transaksi_sewas Pada file migrasi yang baru dibuat, tambahkan kolom status: Schema::table('transaksi_sewas', function (Blueprint $table) { $table->string('status')->default('pending'); // Default status adalah 'pending' }); Jalankan migrasi: php artisan migrate Dengan penambahan kolom ini, setiap transaksi yang masuk akan memiliki status pending secara default. Mengubah Resource TransaksiSewa di Filament Buka file TransaksiSewaResource.php yang ada di app/Filament/Resources/TransaksiSewaResource. Pada bagian form, tambahkan field status sebagai dropdown agar admin bisa memilih status konfirmasi: Select::make('status') ->options([ 'pending' => 'Pending', 'confirmed' => 'Confirmed', 'rejected' => 'Rejected', ]) ->label('Status Konfirmasi') ->required(), Pada bagian table, tambahkan kolom status agar admin bisa melihat status transaksi secara langsung: TextColumn::make('status') ->label('Status') ->sortable(), Dengan perubahan ini, admin bisa melihat dan mengubah status transaksi langsung dari halaman daftar transaksi di Filament. Menambahkan Aksi Kustom untuk Konfirmasi Transaksi Untuk memudahkan admin mengkonfirmasi transaksi, tambahkan aksi kustom di bagian table() pada file TransaksiSewaResource.php: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('id')->label('ID'), TextColumn::make('barang.nama')->label('Barang'), TextColumn::make('pelanggan.nama')->label('Pelanggan'), TextColumn::make('tanggal_mulai')->label('Tanggal Mulai')->dateTime('d-M-Y'), TextColumn::make('tanggal_selesai')->label('Tanggal Selesai')->dateTime('d-M-Y'), TextColumn::make('total_harga')->label('Total Harga')->money('idr', true), TextColumn::make('status')->label('Status')->sortable(), ]) ->actions([ Tables\\\\Actions\\\\EditAction::make(), Tables\\\\Actions\\\\DeleteAction::make(), Action::make('confirm') ->label('Konfirmasi') ->action(function ($record) { $record->status = 'confirmed'; $record->save(); Notification::make() ->title('Transaksi dikonfirmasi!') ->success() ->send(); }) ->visible(fn ($record) => $record->status === 'pending'), // Hanya tampil jika status pending Action::make('reject') ->label('Tolak') ->action(function ($record) { $record->status = 'rejected'; $record->save(); Notification::make() ->title('Transaksi ditolak!') ->danger() ->send(); }) ->visible(fn ($record) => $record->status === 'pending'), // Hanya tampil jika status pending ]); } Penjelasan: Aksi confirm dan reject ditambahkan untuk memudahkan admin mengubah status transaksi menjadi confirmed atau rejected.Aksi ini hanya akan terlihat jika status transaksi masih pending. Menggunakan Halaman Admin untuk Konfirmasi Setelah melakukan konfigurasi di atas, admin dapat masuk ke dashboard Filament, kemudian memilih menu Transaksi Sewa. Di sana, admin akan melihat daftar transaksi dengan opsi untuk mengedit, menghapus, atau mengkonfirmasi transaksi. Untuk mengkonfirmasi, admin cukup mengklik tombol Konfirmasi pada transaksi yang statusnya masih pending. Setelah itu, status transaksi akan berubah menjadi confirmed, dan customer akan mengetahui bahwa transaksi mereka telah dikonfirmasi. Dengan cara ini, admin dapat dengan mudah mengelola dan mengkonfirmasi transaksi penyewaan barang langsung dari halaman admin Filament tanpa perlu masuk ke database secara manual. Penutup Laravel adalah framework PHP yang sangat cocok dipelajari, terutama bagi yang ingin mengembangkan aplikasi web dengan cepat dan efisien. Dengan fitur-fitur modern yang dimilikinya, Laravel tidak hanya memudahkan pengembangan proyek skala kecil hingga besar, tetapi juga tetap relevan dan populer untuk beberapa tahun ke depan. Bagi Anda yang sedang mencari platform belajar Laravel yang komprehensif, BuildWithAngga adalah tempat yang tepat. Bersama para mentor expert dan berpengalaman, Anda bisa mempelajari Laravel dari dasar hingga tingkat lanjutan. Belajar di BuildWithAngga memberikan Anda akses seumur hidup ke semua kelas dan materi, sehingga Anda bisa belajar kapan saja dan di mana saja. Tidak hanya itu, jika Anda menemui kendala dalam proses belajar atau mengerjakan proyek seperti skripsi, Anda bisa bertanya langsung kepada mentor. Dengan demikian, Anda akan lebih produktif dan proyek skripsi Anda menjadi lebih menarik serta memiliki nilai lebih. Ayo, belajar Laravel sekarang di BuildWithAngga dan raih pengalaman belajar yang menyenangkan bersama para mentor terbaik!

Pada artikel ini, kita akan membahas penggunaan Observer pada Laravel 11 dan bagaimana penerapannya dalam proyek website sewa rumah. Observer merupakan fitur Laravel yang memudahkan kita untuk menangani event yang terjadi pada model, seperti saat data disimpan, diperbarui, atau dihapus. Dengan Observer, kita dapat mengeksekusi kode tertentu secara otomatis ketika ada perubahan pada model, sehingga proses pengembangan menjadi lebih rapi dan efisien. Analogi sederhana untuk memahami Observer adalah seperti seorang pengelola properti yang bertugas mencatat setiap perubahan yang terjadi di kompleks perumahan. Ketika ada penyewa baru yang masuk, pengelola ini akan mencatat data penyewa, mengirim notifikasi kepada pemilik rumah, dan memperbarui status rumah secara otomatis. Dengan menggunakan Observer, kita bisa memastikan semua proses berjalan tanpa perlu menambah kode secara manual di berbagai tempat. Namun, apa bedanya menggunakan Observer dengan tidak menggunakan Observer? Jika kita tidak menggunakan Observer, setiap event yang terjadi pada model harus ditangani di berbagai tempat seperti di controller atau service layer. Hal ini dapat menyebabkan kode menjadi berantakan, sulit dirawat, dan rawan kesalahan. Sementara dengan Observer, kita bisa memusatkan logika bisnis yang berkaitan dengan event pada satu tempat saja, sehingga kode lebih terstruktur dan mudah dikelola. Berikut ini adalah lima contoh penggunaan Observer Laravel 11 pada proyek website sewa rumah, lengkap dengan kode dan penjelasan. Perbedaan Menggunakan Observer dan Tidak Menggunakan Observer Tanpa Observer: Ketika kita tidak menggunakan Observer, kita harus menulis logika bisnis terkait event pada model di berbagai tempat, misalnya di controller atau service layer. Misalnya, jika kita ingin mencatat riwayat penyewaan setiap kali ada penyewa baru, kita perlu menambahkan kode pencatatan ini di setiap controller yang menangani penyewaan. // Controller Penyewaan public function store(Request $request) { $penyewaan = Penyewaan::create($request->all()); // Menyimpan riwayat penyewaan di sini RiwayatPenyewaan::create([ 'penyewaan_id' => $penyewaan->id, 'rumah_id' => $penyewaan->rumah_id, 'penyewa_id' => $penyewaan->penyewa_id, 'tanggal_mulai' => $penyewaan->tanggal_mulai, 'tanggal_selesai' => $penyewaan->tanggal_selesai, 'status' => 'Penyewaan baru' ]); // Logika lainnya... } Kode di atas harus diulang setiap kali kita ingin menyimpan riwayat penyewaan, baik di controller lain atau pada fungsi lain yang menangani penyewaan. Ini akan membuat kode menjadi sulit dikelola dan rentan kesalahan jika kita lupa menambahkan logika ini di tempat lain. Dengan Observer: Menggunakan Observer memungkinkan kita memusatkan logika bisnis yang berkaitan dengan event pada satu tempat, sehingga kode lebih terstruktur dan terorganisir. // Observer Penyewaan namespace App\\\\Observers; use App\\\\Models\\\\Penyewaan; use App\\\\Models\\\\RiwayatPenyewaan; class PenyewaanObserver { public function created(Penyewaan $penyewaan) { RiwayatPenyewaan::create([ 'penyewaan_id' => $penyewaan->id, 'rumah_id' => $penyewaan->rumah_id, 'penyewa_id' => $penyewaan->penyewa_id, 'tanggal_mulai' => $penyewaan->tanggal_mulai, 'tanggal_selesai' => $penyewaan->tanggal_selesai, 'status' => 'Penyewaan baru' ]); } } Dengan Observer, kita cukup menulis logika bisnis ini satu kali di PenyewaanObserver dan mendaftarkannya di AppServiceProvider, sehingga akan otomatis berjalan setiap kali ada event created pada model Penyewaan. Kode ini lebih mudah dikelola dan lebih rapi. Contoh Penerapan Observer pada Proyek Website Sewa Rumah 1. Menyimpan Riwayat Penyewaan Ketika Ada Transaksi Baru Setiap kali ada transaksi penyewaan baru, kita bisa menggunakan Observer untuk menyimpan riwayat penyewaan secara otomatis. php artisan make:observer PenyewaanObserver --model=Penyewaan namespace App\\\\Observers; use App\\\\Models\\\\Penyewaan; use App\\\\Models\\\\RiwayatPenyewaan; class PenyewaanObserver { public function created(Penyewaan $penyewaan) { RiwayatPenyewaan::create([ 'penyewaan_id' => $penyewaan->id, 'rumah_id' => $penyewaan->rumah_id, 'penyewa_id' => $penyewaan->penyewa_id, 'tanggal_mulai' => $penyewaan->tanggal_mulai, 'tanggal_selesai' => $penyewaan->tanggal_selesai, 'status' => 'Penyewaan baru' ]); } } Daftarkan observer ini di AppServiceProvider agar dapat dijalankan otomatis. public function boot() { Penyewaan::observe(PenyewaanObserver::class); } 2. Mengirim Notifikasi Email Ketika Penyewaan Akan Berakhir Observer ini berguna untuk mengirimkan notifikasi kepada penyewa dan pemilik rumah ketika masa penyewaan hampir berakhir. php artisan make:observer PenyewaanObserver --model=Penyewaan namespace App\\\\Observers; use App\\\\Models\\\\Penyewaan; use App\\\\Mail\\\\PenyewaanBerakhir; use Illuminate\\\\Support\\\\Facades\\\\Mail; class PenyewaanObserver { public function updated(Penyewaan $penyewaan) { if ($penyewaan->tanggal_selesai->isToday()) { Mail::to($penyewaan->penyewa->email)->send(new PenyewaanBerakhir($penyewaan)); Mail::to($penyewaan->rumah->pemilik->email)->send(new PenyewaanBerakhir($penyewaan)); } } } Pastikan observer ini terdaftar agar aktif pada saat aplikasi berjalan. public function boot() { Penyewaan::observe(PenyewaanObserver::class); } 3. Menghitung Harga Sewa Diskon Ketika Promo Diberlakukan Observer ini akan menghitung harga sewa rumah secara otomatis ketika ada promo atau diskon yang diberikan. php artisan make:observer PromoObserver --model=Promo namespace App\\\\Observers; use App\\\\Models\\\\Promo; use App\\\\Models\\\\Rumah; class PromoObserver { public function saving(Promo $promo) { $rumah = Rumah::find($promo->rumah_id); if ($promo->diskon > 0) { $rumah->harga_diskon = $rumah->harga_sewa - ($rumah->harga_sewa * $promo->diskon / 100); $rumah->save(); } } } Daftarkan observer ini di AppServiceProvider. public function boot() { Promo::observe(PromoObserver::class); } 4. Menghapus Data Terkait Ketika Rumah Dihapus Observer ini akan secara otomatis menghapus data terkait seperti penyewaan dan riwayat penyewaan ketika rumah dihapus. php artisan make:observer RumahObserver --model=Rumah namespace App\\\\Observers; use App\\\\Models\\\\Rumah; use App\\\\Models\\\\Penyewaan; class RumahObserver { public function deleted(Rumah $rumah) { Penyewaan::where('rumah_id', $rumah->id)->delete(); } } Daftarkan observer ini agar Laravel dapat memprosesnya secara otomatis. public function boot() { Rumah::observe(RumahObserver::class); } 5. Menghitung Pendapatan Total Ketika Penyewaan Baru Ditambahkan Observer ini secara otomatis akan memperbarui pendapatan total untuk setiap rumah ketika ada penyewaan baru yang masuk. php artisan make:observer PenyewaanObserver --model=Penyewaan namespace App\\\\Observers; use App\\\\Models\\\\Penyewaan; use App\\\\Models\\\\Rumah; class PenyewaanObserver { public function created(Penyewaan $penyewaan) { $rumah = Rumah::find($penyewaan->rumah_id); $rumah->total_pendapatan += $penyewaan->harga; $rumah->save(); } } Pastikan observer ini terdaftar pada AppServiceProvider. public function boot() { Penyewaan::observe(PenyewaanObserver::class); } Dengan menggunakan Observer, kita dapat memastikan bahwa setiap event yang terjadi pada model ditangani secara konsisten tanpa perlu menulis kode berulang di banyak tempat. Ini sangat berguna untuk proyek website sewa rumah yang melibatkan banyak transaksi dan data penting. Penerapan Observer yang tepat akan membuat proyek Anda lebih mudah dikembangkan dan dipelihara. Penutup Laravel akan terus populer berkat update-update terbaru yang memudahkan developer dalam membangun aplikasi web. Setiap versi baru selalu menghadirkan fitur-fitur canggih yang membuat Laravel tetap relevan dan kuat. Untuk Anda yang ingin terus mengikuti perkembangan Laravel dan belajar lebih dalam, pastikan untuk selalu mengunjungi BuildWithAngga. Mereka sering menyediakan kelas gratis dengan studi kasus menarik yang diajarkan langsung oleh mentor berpengalaman. Dengan akses kelas seumur hidup, Anda bisa belajar kapan saja sesuai kebutuhan. Jangan lewatkan kesempatan untuk terus meningkatkan skill programming Anda bersama BuildWithAngga!

Pada kesempatan kali ini, kita akan mempelajari penggunaan Observer pada Laravel 11 dan bagaimana penerapannya dalam sebuah proyek toko sepatu online. Observer adalah salah satu fitur yang sangat berguna dalam mengelola logika bisnis yang berkaitan dengan event pada model Laravel. Dengan Observer, kita dapat menangani berbagai event seperti menyimpan log perubahan data, mengirim notifikasi, atau memperbarui data terkait tanpa perlu menulis kode berulang di controller. Analoginya, bayangkan Observer seperti seorang supervisor di sebuah toko yang mengawasi setiap kali ada perubahan yang terjadi, seperti ada pelanggan yang membeli sepatu atau ada sepatu baru yang datang. Setiap perubahan ini bisa dicatat oleh supervisor tersebut tanpa kita harus memberitahunya setiap saat. Inilah manfaat utama dari Observer, yaitu memudahkan kita dalam memantau perubahan data dan mengurangi kode yang berulang. Mengapa Observer perlu diterapkan, terutama ketika bekerja sama dengan tim developer lain? Dalam pengembangan aplikasi yang dikerjakan oleh banyak developer, konsistensi dan kejelasan logika bisnis menjadi sangat penting. Observer membantu memastikan bahwa setiap perubahan yang terjadi pada model ditangani dengan cara yang seragam, tanpa harus menyelipkan kode yang sama di berbagai tempat. Ini juga membuat proses pengembangan lebih terorganisir dan meminimalkan potensi kesalahan. Berikut ini adalah lima contoh penggunaan Observer Laravel 11 pada proyek toko sepatu online beserta contoh kodingnya. Membuat Observer untuk Mencatat Riwayat Stok Sepatu Ketika ada penambahan atau pengurangan stok sepatu, kita perlu mencatat riwayat perubahan tersebut. Dengan Observer, kita bisa menangani event created dan updated pada model Stok untuk menyimpan data perubahan ke tabel RiwayatStok. php artisan make:observer StokObserver --model=Stok namespace App\\\\Observers; use App\\\\Models\\\\Stok; use App\\\\Models\\\\RiwayatStok; class StokObserver { public function created(Stok $stok) { RiwayatStok::create([ 'stok_id' => $stok->id, 'perubahan' => $stok->jumlah, 'keterangan' => 'Penambahan stok baru' ]); } public function updated(Stok $stok) { RiwayatStok::create([ 'stok_id' => $stok->id, 'perubahan' => $stok->jumlah, 'keterangan' => 'Pembaharuan stok' ]); } } Jangan lupa untuk mendaftarkan observer ini pada AppServiceProvider atau EventServiceProvider. public function boot() { Stok::observe(StokObserver::class); } Mengirim Notifikasi Email Ketika Pesanan Diterima Ketika pesanan berhasil diterima, kita dapat mengirim email notifikasi kepada pelanggan menggunakan Observer pada model Pesanan. php artisan make:observer PesananObserver --model=Pesanan namespace App\\\\Observers; use App\\\\Models\\\\Pesanan; use App\\\\Mail\\\\PesananDiterima; use Illuminate\\\\Support\\\\Facades\\\\Mail; class PesananObserver { public function updated(Pesanan $pesanan) { if ($pesanan->status == 'diterima') { Mail::to($pesanan->pelanggan->email)->send(new PesananDiterima($pesanan)); } } } Daftarkan observer ini di AppServiceProvider. public function boot() { Pesanan::observe(PesananObserver::class); } Menghitung Diskon Otomatis Ketika Produk Ditambahkan Observer ini akan secara otomatis menghitung diskon dan memperbarui harga produk ketika produk baru ditambahkan atau diperbarui. php artisan make:observer ProdukObserver --model=Produk namespace App\\\\Observers; use App\\\\Models\\\\Produk; class ProdukObserver { public function saving(Produk $produk) { if ($produk->diskon > 0) { $produk->harga_setelah_diskon = $produk->harga - ($produk->harga * $produk->diskon / 100); } } } Daftarkan observer ini di AppServiceProvider. public function boot() { Produk::observe(ProdukObserver::class); } Menyinkronkan Data Stok Ketika Produk Terhapus Ketika sebuah produk dihapus, kita juga perlu memastikan bahwa data stok terkait dihapus atau disinkronkan. php artisan make:observer ProdukObserver --model=Produk namespace App\\\\Observers; use App\\\\Models\\\\Produk; use App\\\\Models\\\\Stok; class ProdukObserver { public function deleted(Produk $produk) { Stok::where('produk_id', $produk->id)->delete(); } } Daftarkan observer ini di AppServiceProvider. public function boot() { Produk::observe(ProdukObserver::class); } Menghitung Total Pesanan Ketika Item Ditambahkan Observer ini akan menghitung total pesanan ketika item baru ditambahkan ke pesanan. php artisan make:observer PesananItemObserver --model=PesananItem namespace App\\\\Observers; use App\\\\Models\\\\PesananItem; class PesananItemObserver { public function created(PesananItem $item) { $pesanan = $item->pesanan; $pesanan->total += $item->harga * $item->jumlah; $pesanan->save(); } } Daftarkan observer ini di AppServiceProvider. public function boot() { PesananItem::observe(PesananItemObserver::class); } Dengan menggunakan Observer, kita bisa memisahkan logika bisnis terkait event pada model ke dalam kelas tersendiri, sehingga kode menjadi lebih terstruktur dan mudah dikelola. Dengan penerapan Observer yang tepat, proyek toko sepatu online Anda akan lebih mudah dikembangkan dan dipelihara, terutama ketika bekerja sama dengan tim developer lain. Jika ingin mempelajari lebih lanjut tentang Laravel Observer, Anda bisa mengunjungi dokumentasi resminya. Penutup dan saran Laravel terus menjadi salah satu framework yang paling populer di kalangan developer web karena berbagai update menarik yang terus dihadirkan untuk memudahkan proses development. Setiap versi terbaru membawa fitur-fitur yang semakin menyederhanakan pekerjaan developer, baik dari sisi performa maupun keamanan. Dengan banyaknya kemudahan yang ditawarkan, tidak heran jika Laravel tetap menjadi pilihan utama bagi banyak programmer. Untuk Anda yang ingin terus mengikuti perkembangan terbaru dan belajar Laravel secara mendalam, jangan lupa untuk selalu memantau website BuildWithAngga. Mereka sering mengadakan kelas gratis dengan studi kasus menarik yang diajarkan oleh mentor berpengalaman. Selain itu, Anda juga akan mendapatkan akses kelas seumur hidup, sehingga bisa belajar kapan saja dan di mana saja sesuai kebutuhan. Dengan begitu, kemampuan programming Anda akan terus berkembang seiring dengan perkembangan teknologi.

Jika kamu tertarik untuk berkarir sebagai backend engineer, ada beberapa hal yang perlu dipersiapkan. Pada artikel ini, kita akan memahami kira-kira apa saja yang perlu dipelajari dan skills apa saja yang penting dilatih apabila ingin berkarir sebagai backend engineer di tahun 2025. Mengapa Menjadi Backend Engineer? Pertumbuhan bisnis online meningkat pesat, dan banyak perusahaan mulai membangun platform mereka masing-masing untuk mempromosikan jasa dan produk secara online. Platform-platform ini membutuhkan backend engineer untuk mengatur alur data, keamanan, serta performa dari sebuah website atau aplikasi. Jika frontend diibaratkan sebagai bagian restoran yang berhadapan langsung dengan pelanggan, maka backend adalah dapurnya. Backend engineer bertanggung jawab untuk memastikan bahwa semua pesanan yang diterima oleh pelayan (frontend) dapat diproses dengan baik di dapur (backend) sehingga pelanggan mendapatkan makanan sesuai pesanan mereka. Skill yang Perlu Dikuasai Bahasa Pemrograman Backend: Backend engineer perlu menguasai minimal satu bahasa pemrograman yang sering digunakan di bagian backend, seperti PHP, Python, Ruby, atau Node.js. Bahasa-bahasa ini akan membantu dalam membangun logika bisnis dan mengatur data yang dikirimkan ke frontend.Framework: Selain bahasa pemrograman, penting juga untuk menguasai framework yang umum digunakan. Contohnya, Laravel untuk PHP, Django untuk Python, atau Express untuk Node.js. Framework ini mempermudah proses development dengan menyediakan struktur dan komponen yang sudah siap digunakan.Database Management: Sebagai backend engineer, kamu akan sering berinteraksi dengan database. Pelajari cara menggunakan SQL untuk mengelola database relasional seperti MySQL atau PostgreSQL, serta NoSQL seperti MongoDB untuk data yang tidak terstruktur. Memahami konsep normalisasi dan relasi antar tabel juga sangat penting.API Development: Backend engineer juga perlu memahami cara membuat API (Application Programming Interface) yang memungkinkan komunikasi antara frontend dan backend. Konsep RESTful API dan GraphQL perlu dipahami dengan baik agar dapat membuat API yang efisien dan scalable.Keamanan Data: Data yang diolah oleh backend harus dilindungi dengan baik. Pelajari teknik enkripsi, manajemen autentikasi dan otorisasi, serta praktik terbaik untuk mencegah serangan seperti SQL Injection dan XSS.Cloud Computing: Di tahun 2025, banyak perusahaan akan beralih ke solusi cloud untuk menyimpan data dan menjalankan aplikasi mereka. Memahami layanan cloud seperti AWS, Google Cloud, atau Azure akan menjadi nilai tambah yang besar. Analoginya Seperti Sebuah Pabrik Jika frontend adalah toko di mana pelanggan bisa melihat produk dan berinteraksi dengan penjual, maka backend adalah pabrik di belakang toko yang memastikan semua produk tersedia dan siap dijual. Backend engineer adalah orang yang mengatur bagaimana barang diproduksi, disimpan, dan dikirimkan ke toko. Mereka memastikan semua proses berjalan dengan lancar dan stok barang selalu tersedia. Persiapan Karir Untuk mempersiapkan diri menjadi backend engineer, kamu bisa memulai dengan beberapa langkah berikut: Belajar dan Praktek: Mulailah belajar bahasa pemrograman backend seperti PHP atau Node.js. Setelah itu, buatlah proyek kecil seperti sistem manajemen inventaris atau aplikasi blog sederhana untuk mempraktikkan pengetahuanmu.Ikuti Kursus dan Sertifikasi: Mengikuti kursus online atau program sertifikasi dapat membantu memperdalam pemahamanmu dan memberikan pengakuan atas kemampuanmu. Kamu bisa mengikuti kursus di platform seperti BuildWithAngga untuk mempelajari web development dan teknologi lainnya.Bangun Portfolio: Kumpulkan hasil karya coding-mu di GitHub atau platform sejenis. Buatlah proyek-proyek yang menunjukkan kemampuanmu dalam membangun sistem backend yang efisien dan aman.Bergabung dengan Komunitas: Ikuti komunitas developer seperti di GitHub, StackOverflow, atau forum-forum teknologi lainnya. Dengan begitu, kamu bisa belajar dari pengalaman orang lain, berdiskusi, dan berbagi ilmu. Pentingnya Peran Backend Engineer dalam Proses Digitalisasi Perusahaan Peran seorang backend engineer sangat penting dalam proses digitalisasi perusahaan. Mereka adalah pilar utama yang memastikan bahwa semua data dan logika bisnis yang berjalan di belakang layar dapat berfungsi dengan baik. Dalam ekosistem digital, backend engineer berperan seperti fondasi sebuah bangunan yang menopang keseluruhan sistem agar tetap kokoh dan stabil. Lima Tanggung Jawab Utama Backend Engineer Merancang Struktur Data yang Efisien: Backend engineer bertanggung jawab untuk merancang dan mengelola database yang digunakan oleh perusahaan. Mereka harus memastikan bahwa struktur data yang dibuat efisien, mudah diakses, dan mampu menyimpan data dalam jumlah besar tanpa mengorbankan performa.Membangun dan Mengelola API: API (Application Programming Interface) adalah jembatan penghubung antara berbagai layanan dalam ekosistem digital perusahaan. Backend engineer harus memastikan API yang dibangun dapat digunakan dengan mudah oleh frontend developer dan layanan pihak ketiga lainnya. API ini juga harus memiliki keamanan yang tinggi untuk melindungi data perusahaan.Menjamin Keamanan Data: Salah satu tanggung jawab terbesar backend engineer adalah menjaga keamanan data perusahaan. Mereka harus menerapkan berbagai metode enkripsi, manajemen autentikasi, dan otorisasi untuk memastikan bahwa hanya pengguna yang berhak yang dapat mengakses data tertentu. Selain itu, mereka juga harus mampu mengantisipasi dan mencegah serangan siber seperti SQL Injection, XSS, dan lainnya.Mengoptimalkan Performa Sistem: Backend engineer perlu memastikan bahwa sistem yang dibangun dapat menangani jumlah permintaan yang besar tanpa mengalami penurunan performa. Mereka akan melakukan optimasi kode, mengelola caching, serta melakukan load balancing untuk memastikan aplikasi tetap berjalan lancar meskipun mengalami peningkatan pengguna.Mengintegrasikan Layanan Pihak Ketiga: Dalam dunia digital yang semakin kompleks, perusahaan seringkali membutuhkan integrasi dengan layanan pihak ketiga, seperti payment gateway, layanan pengiriman, atau sistem ERP. Backend engineer bertanggung jawab untuk memastikan integrasi ini berjalan lancar dan sesuai dengan kebutuhan bisnis. Banyak Pilihan Bahasa Pemrograman dan Tools untuk Backend Engineer Saat ini, tersedia banyak bahasa pemrograman dan tools yang dapat digunakan oleh backend engineer dalam membangun sistem yang kuat dan reliable. Beberapa bahasa pemrograman yang populer di kalangan backend engineer adalah: PHP: Umum digunakan untuk web development dengan framework seperti Laravel. PHP terkenal karena mudah dipelajari dan memiliki banyak komunitas pendukung.Python: Sering digunakan untuk data analysis dan machine learning, serta web development dengan framework seperti Django dan Flask.Node.js: Menggunakan bahasa JavaScript untuk backend development, memungkinkan backend dan frontend developer menggunakan bahasa yang sama.Ruby: Digunakan dengan framework Ruby on Rails, sering digunakan untuk aplikasi web dengan skala kecil hingga menengah.Golang: Dikenal dengan performa yang tinggi dan manajemen concurrency yang baik, cocok untuk membangun sistem dengan skala besar. Selain bahasa pemrograman, ada juga berbagai tools yang membantu backend engineer menjaga performa dan keamanan sistem, seperti: Database Management Systems (DBMS): MySQL, PostgreSQL, MongoDB untuk mengelola data yang terstruktur maupun tidak terstruktur.Version Control Systems: Git digunakan untuk mengelola kode, memastikan kolaborasi yang baik antar developer.Containerization Tools: Docker digunakan untuk memastikan aplikasi dapat berjalan dengan konsisten di berbagai lingkungan.Cloud Services: AWS, Google Cloud, atau Azure untuk menyimpan data, menjalankan aplikasi, dan mengelola infrastruktur secara efisien. Dengan beragam pilihan bahasa dan tools ini, backend engineer dapat membangun sistem yang tidak hanya kuat dan reliable, tetapi juga mampu memenuhi kebutuhan bisnis perusahaan dengan fleksibilitas yang tinggi. Ini memungkinkan perusahaan untuk terus berinovasi dan beradaptasi dengan perubahan kebutuhan pasar dan teknologi. Alur Belajar Pemula untuk Menjadi Backend Engineer Berkarir sebagai backend engineer bisa menjadi pilihan yang menarik dan menantang, terutama di era digital seperti sekarang. Bagi pemula, perjalanan ini mungkin terasa panjang dan kompleks. Oleh karena itu, penting untuk memiliki alur belajar yang jelas, mulai dari dasar hingga siap mendapatkan pekerjaan pertama. Berikut adalah panduan langkah demi langkah yang bisa kamu ikuti. 1) Memahami Dasar-dasar Pemrograman Sebelum mempelajari hal-hal teknis terkait backend, kamu perlu memiliki dasar pemrograman yang kuat. Pilih satu bahasa pemrograman untuk dipelajari terlebih dahulu. Beberapa pilihan populer untuk pemula adalah: Python: Mudah dipahami, banyak digunakan, dan memiliki banyak sumber belajar untuk pemula.JavaScript: Bahasa yang fleksibel, bisa digunakan untuk frontend maupun backend (dengan Node.js).PHP: Sering digunakan untuk web development, memiliki banyak komunitas dan dokumentasi. Pada tahap ini, fokuslah untuk memahami konsep dasar seperti variabel, tipe data, loop, dan fungsi. Kamu bisa memulai dari tutorial dasar atau kursus online gratis seperti di BuildWithAngga. 2) Memahami Konsep Dasar Web Development Sebagai backend engineer, kamu perlu memahami cara kerja web development secara keseluruhan. Pelajari konsep seperti: HTTP dan HTTPS: Cara kerja protokol ini dalam pertukaran data antara client dan server.Client-Server Architecture: Bagaimana browser (client) berinteraksi dengan server untuk mendapatkan data.RESTful API: Konsep ini sangat penting untuk membangun backend yang bisa berkomunikasi dengan frontend atau aplikasi lain. 3) Mempelajari Dasar-dasar Database Backend engineer sering bekerja dengan database untuk menyimpan, mengelola, dan mengambil data. Mulailah dengan mempelajari: SQL: Bahasa standar untuk berinteraksi dengan database relasional seperti MySQL dan PostgreSQL.NoSQL: Konsep dan penggunaan database non-relasional seperti MongoDB untuk data yang lebih fleksibel. Pahami bagaimana cara membuat tabel, melakukan query dasar seperti SELECT, INSERT, UPDATE, DELETE, serta konsep normalisasi database untuk menjaga integritas data. 4) Mempelajari Framework Backend Setelah memahami dasar-dasar pemrograman dan database, saatnya belajar framework backend. Framework membantu mempercepat proses development dengan menyediakan struktur dan komponen siap pakai. Pilih salah satu framework sesuai bahasa yang kamu pelajari: Laravel (PHP): Framework yang banyak digunakan dengan dokumentasi lengkap, cocok untuk membangun aplikasi web skala kecil hingga besar.Django (Python): Menyediakan banyak fitur bawaan, cocok untuk pemula yang ingin membangun aplikasi dengan cepat.Express (Node.js): Framework minimalis yang fleksibel, cocok untuk membangun API sederhana. Di sini, kamu akan belajar tentang routing, middleware, pengelolaan request dan response, serta cara membuat API sederhana. 5) Membangun Proyek Sederhana Mulailah membangun proyek sederhana untuk mempraktikkan apa yang telah kamu pelajari. Beberapa ide proyek yang bisa kamu coba: To-Do List App: Aplikasi sederhana untuk menambahkan, mengedit, dan menghapus tugas.Blog: Aplikasi yang memungkinkan pengguna membuat, membaca, mengedit, dan menghapus artikel.API Sederhana: Buatlah API untuk manajemen data seperti pengguna, produk, atau buku. Proyek ini akan membantumu memahami bagaimana mengimplementasikan konsep backend secara nyata. 6) Mempelajari Keamanan Dasar Keamanan adalah aspek penting dalam pengembangan backend. Beberapa hal yang perlu dipelajari: Input Validation dan Sanitization: Mencegah data yang berbahaya masuk ke sistem.Authentication dan Authorization: Mengelola akses pengguna ke aplikasi dengan aman.Data Encryption: Melindungi data sensitif seperti password dengan enkripsi. Pahami juga ancaman umum seperti SQL Injection dan Cross-Site Scripting (XSS), serta bagaimana cara mengatasinya. 7) Menguasai Version Control System (Git) Menggunakan Git adalah keahlian yang wajib dimiliki oleh setiap developer. Git memungkinkanmu untuk melacak perubahan kode, bekerja secara kolaboratif, dan mengelola proyek dengan lebih baik. Pelajari konsep dasar seperti commit, push, pull, branch, dan merge. 8) Mempelajari Deploy dan Cloud Computing Memahami cara deploy aplikasi ke server adalah langkah penting untuk backend engineer. Pelajari cara menggunakan layanan cloud seperti AWS, Google Cloud, atau Heroku untuk meng-host aplikasi yang kamu buat. Pahami juga konsep containerization dengan Docker agar aplikasi bisa dijalankan di berbagai lingkungan dengan konsisten. 9) Membangun Portfolio dan CV Kumpulkan semua proyek yang telah kamu buat ke dalam portfolio. Upload proyekmu ke GitHub atau platform sejenis. Buatlah deskripsi yang jelas untuk setiap proyek, jelaskan teknologi yang digunakan, dan tantangan apa yang dihadapi. Portfolio yang baik akan menjadi nilai tambah saat melamar pekerjaan. 10) Mencari Pekerjaan Pertama Setelah membangun portfolio, saatnya mencari pekerjaan pertama. Beberapa tips yang bisa membantu: Mencari Internship atau Junior Position: Banyak perusahaan yang membuka peluang bagi pemula untuk belajar dan berkembang.Networking: Bergabunglah dengan komunitas developer di platform seperti GitHub, LinkedIn, atau forum-forum teknologi.Mendaftar ke Job Portal: Daftarkan diri di portal pekerjaan seperti LinkedIn, Glassdoor, atau platform lokal seperti JobStreet. Cara Membuat Portfolio Pertama sebagai Backend Engineer Pemula Membuat portfolio yang menarik dan profesional adalah langkah penting untuk memulai karir sebagai backend engineer. Portfolio yang baik dapat menjadi bukti konkret kemampuanmu dan meningkatkan peluang untuk diterima magang atau bekerja. Berikut adalah panduan langkah demi langkah untuk membuat portfolio pertama yang efektif sebagai backend engineer pemula. 1) Pilih Platform untuk Menyimpan Portfolio Pertama, pilih platform untuk menampilkan hasil karyamu. Beberapa platform populer yang dapat digunakan adalah: GitHub: Platform ini adalah tempat yang sangat baik untuk menyimpan kode dan proyekmu. Buatlah repository untuk setiap proyek yang telah kamu kerjakan, lengkapi dengan dokumentasi dan instruksi instalasi.Personal Website: Jika memungkinkan, buatlah website pribadi menggunakan layanan seperti GitHub Pages, Netlify, atau platform lainnya. Website ini bisa berfungsi sebagai showcase dari proyek-proyekmu dan mencantumkan link ke repository GitHub.LinkedIn: Tambahkan deskripsi singkat dan link ke portfolio atau GitHub di profil LinkedInmu agar mudah ditemukan oleh recruiter. 2) Pilih Proyek yang Menarik dan Relevan Pilih beberapa proyek yang menunjukkan kemampuanmu sebagai backend engineer. Beberapa proyek yang dapat dipilih antara lain: API Sederhana: Buat API untuk mengelola data seperti pengguna, produk, atau buku. Tunjukkan cara mengelola CRUD (Create, Read, Update, Delete) data dengan baik.Sistem Manajemen: Aplikasi seperti sistem manajemen inventaris atau sistem manajemen tugas yang menunjukkan kemampuanmu dalam mengelola data dan relasi antar entitas.Blog atau CMS: Buat sistem sederhana untuk menambah, mengedit, dan menghapus konten blog. Ini menunjukkan pemahamanmu tentang autentikasi pengguna dan manajemen konten. Pastikan setiap proyek ini menunjukkan pemahamanmu tentang konsep backend seperti manajemen database, API, dan keamanan dasar. 3) Dokumentasikan Setiap Proyek dengan Jelas Dokumentasi adalah kunci dari portfolio yang baik. Pastikan setiap proyek yang kamu tampilkan memiliki dokumentasi yang jelas. Dokumentasi ini harus mencakup: Deskripsi Proyek: Jelaskan tujuan dari proyek ini, apa yang ingin dicapai, dan bagaimana proyek ini bekerja.Teknologi yang Digunakan: Sebutkan bahasa pemrograman, framework, dan tools apa saja yang kamu gunakan dalam proyek ini.Cara Menginstal dan Menjalankan: Berikan instruksi yang jelas tentang cara meng-clone repository, menginstal dependensi, dan menjalankan proyek. Pastikan orang lain dapat dengan mudah menjalankan proyekmu di lingkungan mereka.Fitur Utama: Jelaskan fitur-fitur utama dari proyekmu. Misalnya, jika proyekmu adalah API, jelaskan endpoint apa saja yang tersedia dan bagaimana cara menggunakannya. 4) Sertakan Pengujian dan Keamanan Jika memungkinkan, tambahkan pengujian (testing) ke proyekmu untuk menunjukkan bahwa kamu peduli dengan kualitas kode. Gunakan tools seperti PHPUnit untuk proyek PHP atau Jest untuk Node.js. Jelaskan dalam dokumentasi bagaimana pengujian ini dapat dijalankan. Selain itu, jelaskan langkah-langkah keamanan yang telah kamu terapkan dalam proyek. Misalnya, jika kamu menggunakan autentikasi dan otorisasi, jelaskan mekanisme yang digunakan dan bagaimana data pengguna dilindungi. 5) Buat Readme yang Menarik di Setiap Repository File README adalah tempat pertama yang dilihat oleh orang yang mengunjungi repository GitHub-mu. Pastikan README memiliki struktur yang baik, seperti: Judul Proyek: Beri judul yang menarik dan deskriptif.Badge: Tambahkan badge seperti status build, lisensi, dan coverage test.Deskripsi: Deskripsikan proyekmu dengan jelas dan singkat.Fitur: Tulis daftar fitur utama proyekmu.Cara Instalasi: Jelaskan langkah-langkah instalasi dan menjalankan proyek.Contoh Penggunaan: Sertakan contoh penggunaan dari fitur utama atau endpoint API. 6) Buat Video Demo Proyek Untuk memberikan gambaran yang lebih jelas tentang proyekmu, buatlah video demo singkat yang menunjukkan cara kerja proyekmu. Upload video ini ke platform seperti YouTube, dan sertakan link ke video tersebut di dokumentasi proyek atau di website pribadimu. Video ini akan membantu recruiter atau calon employer untuk melihat hasil karyamu tanpa perlu menjalankan proyekmu secara langsung. 7) Sertakan Resume dan Deskripsi Diri di Portfolio Selain proyek, penting juga untuk mencantumkan resume dan deskripsi singkat tentang dirimu di website atau GitHub. Jelaskan: Latar Belakang Pendidikan: Sebutkan pendidikan yang relevan, seperti jurusan komputer atau teknologi informasi.Pengalaman: Jika kamu memiliki pengalaman magang atau freelance, sebutkan proyek apa saja yang pernah kamu kerjakan.Keahlian: Sebutkan keahlian utama seperti bahasa pemrograman, framework, dan tools yang kamu kuasai.Tujuan Karir: Jelaskan tujuan karirmu, misalnya ingin menjadi backend engineer yang fokus pada pengembangan API dan manajemen data. 8) Minta Feedback dari Developer Lain Setelah selesai membuat portfolio, mintalah feedback dari developer lain. Kamu bisa meminta saran dari teman, mentor, atau komunitas developer di GitHub dan LinkedIn. Feedback ini bisa membantumu memperbaiki kesalahan kecil dan membuat portfolio-mu lebih baik lagi. 9) Update Portfolio Secara Berkala Setelah membuat portfolio, pastikan untuk selalu meng-update-nya dengan proyek-proyek terbaru dan skill yang baru kamu pelajari. Ini menunjukkan bahwa kamu terus belajar dan berkembang sebagai seorang backend engineer. Rekomendasi Kelas Gratis Buildwithangga untuk belajar backend 1. Belajar Dasar Pemrograman PHP Kelas ini cocok bagi pemula yang ingin memulai karir sebagai backend engineer. Di sini, kamu akan belajar dasar-dasar PHP seperti sintaks dasar, variabel, fungsi, hingga manipulasi database menggunakan MySQL. Kelas ini memberikan pondasi yang kuat sebelum melangkah ke framework PHP seperti Laravel. 2. Membuat Restful API dengan Lumen Lumen adalah micro-framework dari Laravel yang digunakan untuk membangun RESTful API yang ringan dan cepat. Dalam kelas ini, kamu akan belajar cara membuat API sederhana mulai dari routing, controller, hingga menghubungkan API dengan database. Kelas ini sangat cocok bagi kamu yang ingin mempelajari cara membuat backend yang dapat berinteraksi dengan frontend seperti React atau Vue. 3. Pengenalan Node.js dan Express Node.js menjadi salah satu pilihan utama untuk pengembangan backend berbasis JavaScript. Kelas ini membahas dasar-dasar Node.js dan framework Express untuk membangun server yang cepat dan scalable. Kamu akan belajar cara mengelola request dan response, serta bagaimana menghubungkan server dengan database MongoDB. 4. Belajar Dasar Laravel 9 Laravel adalah framework PHP yang sangat populer dan memiliki banyak fitur untuk membangun aplikasi web yang kompleks. Di kelas ini, kamu akan mempelajari dasar-dasar Laravel seperti routing, controller, view, hingga cara membuat CRUD sederhana. Kelas ini menjadi batu loncatan yang bagus sebelum mendalami fitur-fitur lanjutan Laravel seperti middleware dan Eloquent ORM. 5. Membangun RESTful API dengan Laravel 11 Kelas ini dirancang untuk kamu yang sudah memahami dasar-dasar Laravel dan ingin mengembangkan kemampuan dalam membangun RESTful API. Di sini, kamu akan belajar cara membuat API mulai dari autentikasi, pengelolaan resource, hingga dokumentasi API menggunakan Swagger. Ini adalah langkah yang tepat untuk mempersiapkan diri dalam membangun microservices atau mengintegrasikan backend dengan berbagai platform frontend. Kelas-kelas ini dapat diakses secara gratis di BuildWithAngga, dan menyediakan materi yang disusun secara terstruktur serta mudah dipahami, sehingga cocok untuk pemula maupun yang sudah memiliki pengalaman dalam pemrograman backend. Penutup dan Saran untuk Programmer Pemula Menjadi seorang backend engineer membutuhkan pemahaman mendalam tentang logika pemrograman, manajemen database, dan pengembangan API. Langkah awal yang tepat adalah membangun fondasi yang kuat dengan mempelajari dasar-dasar pemrograman, algoritma, dan struktur data. Setelah itu, kamu bisa memilih framework backend yang populer seperti Laravel, Node.js, atau Django untuk mendalami pengembangan aplikasi yang lebih kompleks. Untuk programmer pemula yang ingin fokus menjadi backend engineer, disarankan untuk: Konsisten Belajar dan Praktik: Pemahaman teori saja tidak cukup. Lakukan praktik secara rutin dengan membangun proyek-proyek kecil seperti aplikasi CRUD sederhana, integrasi API, dan sistem autentikasi. Ini akan membantu kamu memahami konsep-konsep backend dengan lebih baik.Ikuti Kelas Online Berkualitas: Pilih kelas-kelas yang tidak hanya menyediakan materi teori, tetapi juga studi kasus yang aplikatif. Belajar bersama mentor expert di BuildWithAngga akan memberikan kamu pengalaman belajar yang lebih terarah dan efektif.Bangun Portofolio: Kumpulkan semua proyek yang sudah kamu buat dalam satu portofolio. Portofolio ini akan menjadi bukti nyata dari keterampilan yang kamu miliki dan dapat meningkatkan peluangmu untuk diterima bekerja sebagai backend engineer.Bergabung dengan Komunitas: Jangan ragu untuk bertanya dan berdiskusi dengan sesama programmer di forum atau komunitas online. Ini akan membantu kamu mendapatkan insight baru dan solusi untuk masalah yang mungkin kamu hadapi selama belajar.Belajar dari Mentor Expert: Bergabung dengan program belajar di BuildWithAngga yang menyediakan mentor expert akan membantumu memahami berbagai konsep backend secara lebih mendalam. Dengan bimbingan mentor, kamu bisa mendapatkan feedback langsung, menghindari kesalahan umum, dan belajar teknik-teknik yang efisien dalam pengembangan backend. Manfaat Belajar di BuildWithAngga Dengan belajar di BuildWithAngga, kamu akan mendapatkan berbagai benefit, seperti: Akses Materi Selamanya: Setelah bergabung, kamu bisa mengakses seluruh materi belajar kapan saja tanpa batasan waktu. Ini sangat berguna untuk revisi atau belajar ulang materi yang dirasa kurang dikuasai.Sertifikat Kerja: Setiap kelas yang kamu selesaikan akan memberikan sertifikat resmi yang dapat menjadi nilai tambah dalam CV atau LinkedIn kamu. Sertifikat ini menunjukkan bahwa kamu telah menyelesaikan pelatihan dan memahami materi yang diajarkan.Portofolio Berkualitas: Kamu akan dibimbing untuk membuat proyek yang layak dimasukkan dalam portofolio. Ini termasuk proyek-proyek yang mengikuti standar industri sehingga dapat memikat perhatian calon employer atau klien. Dengan semua manfaat ini, belajar bersama BuildWithAngga akan membantumu tidak hanya menguasai keahlian backend, tetapi juga mempersiapkan diri dengan baik untuk masuk ke dunia kerja sebagai backend engineer profesional. Jangan ragu untuk memulai perjalanan belajarmu sekarang dan wujudkan karier impianmu!

Ketika kita membangun sebuah website sewa mobil, keamanan dan manajemen otentikasi menjadi faktor yang sangat penting. Laravel Passport adalah salah satu solusi yang bisa kita gunakan untuk menangani otentikasi API dengan cara yang aman dan efisien. Passport memungkinkan kita untuk mengelola akses pengguna ke berbagai fitur di dalam aplikasi dengan cara yang mudah dan fleksibel. Ini sangat penting terutama jika kita berencana untuk membuat aplikasi sewa mobil yang melibatkan berbagai jenis pengguna seperti pelanggan, pemilik mobil, dan admin. Bayangkan sebuah sistem sewa mobil seperti rental mobil konvensional. Dalam rental konvensional, setiap pelanggan harus melalui proses verifikasi identitas sebelum bisa menyewa mobil. Proses ini bertujuan untuk memastikan bahwa hanya orang yang telah diverifikasi yang dapat menyewa mobil, sehingga mengurangi risiko penyalahgunaan. Laravel Passport berperan sebagai "petugas verifikasi" dalam dunia digital, memastikan bahwa hanya pengguna yang memiliki izin yang tepat yang dapat mengakses fitur-fitur tertentu di dalam aplikasi sewa mobil kita. 5 Fitur Penting untuk Website Sewa Mobil Manajemen Pengguna Sistem ini memungkinkan pengguna untuk mendaftar, login, dan mengelola akun. Dengan Laravel Passport, hanya pengguna terverifikasi yang dapat mengakses fitur tertentu seperti pemesanan mobil.Pemesanan Mobil Hanya pengguna dengan token otentikasi yang sah yang bisa melakukan pemesanan. Ini mencegah pengguna tak terdaftar dari melakukan pemesanan.Manajemen Kendaraan Pemilik mobil bisa mengelola informasi kendaraan mereka. Laravel Passport memastikan hanya pemilik yang sah yang dapat mengubah detail mobil seperti harga dan ketersediaan.Ulasan dan Rating Hanya pengguna yang telah menyewa mobil yang bisa memberikan ulasan. Ini menjaga keaslian ulasan dan menghindari spam.Riwayat Transaksi Pengguna dapat melihat riwayat transaksi mereka. Hanya pengguna terverifikasi yang bisa mengakses informasi ini, menjaga privasi dan keamanan data. Tutorial Membuat Projek Laravel 11 Sewa Mobil dengan Composer Pada tutorial kali ini, kita akan belajar cara membuat sebuah projek website sewa mobil menggunakan Laravel 11. Kita akan mulai dengan menginstal Laravel menggunakan Composer dan membuat beberapa file migration yang dibutuhkan untuk aplikasi ini, seperti categories, cities, cars, transactions, dan customers. 1) Instalasi Laravel 11 dengan Composer Untuk memulai projek ini, pastikan Composer sudah terpasang di komputer Anda. Jika belum, silakan unduh dan instal Composer terlebih dahulu dari situs resminya. Setelah Composer terinstal, buka terminal dan jalankan perintah berikut untuk membuat projek Laravel baru: composer create-project --prefer-dist laravel/laravel rental-car "11.*" Perintah ini akan membuat folder baru dengan nama rental-car yang berisi file-file projek Laravel 11. 2) Mengatur Koneksi Database Setelah projek berhasil dibuat, langkah selanjutnya adalah mengatur koneksi database di file .env. Buka file .env dan sesuaikan konfigurasi database seperti berikut: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=rental_car DB_USERNAME=root DB_PASSWORD= Pastikan database rental_car sudah dibuat di MySQL. 3) Membuat File Migration Categories Selanjutnya, kita akan membuat file migration untuk tabel categories. Tabel ini akan menyimpan data kategori mobil seperti SUV, sedan, atau hatchback. Jalankan perintah berikut di terminal: php artisan make:migration create_categories_table Buka file migration yang baru saja dibuat di folder database/migrations dan ubah menjadi seperti berikut: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; return new class extends Migration { public function up(): void { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); } public function down(): void { Schema::dropIfExists('categories'); } }; 4) Membuat File Migration Cities Tabel cities digunakan untuk menyimpan data kota di mana mobil tersedia untuk disewa. Buat file migration dengan perintah berikut: php artisan make:migration create_cities_table Kemudian, buka file migration tersebut dan ubah menjadi seperti ini: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; return new class extends Migration { public function up(): void { Schema::create('cities', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); } public function down(): void { Schema::dropIfExists('cities'); } }; 5) Membuat File Migration Cars Tabel cars akan menyimpan informasi tentang mobil yang tersedia untuk disewa. Mobil akan terkait dengan kategori dan kota. Jalankan perintah berikut: php artisan make:migration create_cars_table Buka file migration yang dibuat dan ubah menjadi seperti ini: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; return new class extends Migration { public function up(): void { Schema::create('cars', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('license_plate'); $table->unsignedBigInteger('category_id'); $table->unsignedBigInteger('city_id'); $table->integer('price_per_day'); $table->timestamps(); $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade'); $table->foreign('city_id')->references('id')->on('cities')->onDelete('cascade'); }); } public function down(): void { Schema::dropIfExists('cars'); } }; 6) Membuat File Migration Transactions Tabel transactions digunakan untuk mencatat transaksi penyewaan mobil oleh pelanggan. Buat file migration dengan perintah berikut: php artisan make:migration create_transactions_table Ubah file migration yang dibuat menjadi seperti ini: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; return new class extends Migration { public function up(): void { Schema::create('transactions', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('car_id'); $table->unsignedBigInteger('customer_id'); $table->date('rental_date'); $table->date('return_date'); $table->integer('total_price'); $table->timestamps(); $table->foreign('car_id')->references('id')->on('cars')->onDelete('cascade'); $table->foreign('customer_id')->references('id')->on('customers')->onDelete('cascade'); }); } public function down(): void { Schema::dropIfExists('transactions'); } }; 7) Membuat File Migration Customers Tabel customers digunakan untuk menyimpan data pelanggan yang menyewa mobil. Jalankan perintah berikut: php artisan make:migration create_customers_table Ubah file migration yang dibuat menjadi seperti ini: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; return new class extends Migration { public function up(): void { Schema::create('customers', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->string('phone'); $table->timestamps(); }); } public function down(): void { Schema::dropIfExists('customers'); } }; 8) Menjalankan Migration Setelah semua file migration selesai dibuat, jalankan perintah berikut untuk membuat tabel-tabel di database: php artisan migrate Perintah ini akan membuat semua tabel yang telah kita definisikan di dalam file migration ke dalam database rental_car. Membuat File Model dan Controller (CRUD) di Laravel 11 Setelah kita membuat file migration untuk tabel-tabel yang dibutuhkan, langkah selanjutnya adalah membuat file model dan controller untuk masing-masing tabel tersebut. Pada tutorial ini, kita akan membuat model dan controller untuk categories, cities, cars, transactions, dan customers dengan fitur CRUD (Create, Read, Update, Delete). 1) Membuat File Model dan Controller untuk Categories Untuk membuat model dan controller Category, kita bisa menjalankan perintah berikut: php artisan make:model Category -mcr Perintah ini akan membuat file model Category, migration, controller CategoryController, dan resource. Berikut adalah isi file Category.php di folder app/Models: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Category extends Model { use HasFactory; protected $fillable = ['name']; } Dan berikut adalah isi file CategoryController.php di folder app/Http/Controllers: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Category; use Illuminate\\\\Http\\\\Request; class CategoryController extends Controller { public function index() { $categories = Category::all(); return response()->json($categories); } public function store(Request $request) { $category = Category::create($request->all()); return response()->json($category); } public function show($id) { $category = Category::findOrFail($id); return response()->json($category); } public function update(Request $request, $id) { $category = Category::findOrFail($id); $category->update($request->all()); return response()->json($category); } public function destroy($id) { $category = Category::findOrFail($id); $category->delete(); return response()->json(['message' => 'Category deleted successfully']); } } 2) Membuat File Model dan Controller untuk Cities Buat model dan controller City dengan perintah berikut: php artisan make:model City -mcr Isi file City.php di folder app/Models: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class City extends Model { use HasFactory; protected $fillable = ['name']; } Dan berikut adalah isi file CityController.php di folder app/Http/Controllers: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\City; use Illuminate\\\\Http\\\\Request; class CityController extends Controller { public function index() { $cities = City::all(); return response()->json($cities); } public function store(Request $request) { $city = City::create($request->all()); return response()->json($city); } public function show($id) { $city = City::findOrFail($id); return response()->json($city); } public function update(Request $request, $id) { $city = City::findOrFail($id); $city->update($request->all()); return response()->json($city); } public function destroy($id) { $city = City::findOrFail($id); $city->delete(); return response()->json(['message' => 'City deleted successfully']); } } 3) Membuat File Model dan Controller untuk Cars Buat model dan controller Car dengan perintah berikut: php artisan make:model Car -mcr Isi file Car.php di folder app/Models: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Car extends Model { use HasFactory; protected $fillable = [ 'name', 'license_plate', 'category_id', 'city_id', 'price_per_day' ]; public function category() { return $this->belongsTo(Category::class); } public function city() { return $this->belongsTo(City::class); } } Dan berikut adalah isi file CarController.php di folder app/Http/Controllers: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Car; use Illuminate\\\\Http\\\\Request; class CarController extends Controller { public function index() { $cars = Car::with(['category', 'city'])->get(); return response()->json($cars); } public function store(Request $request) { $car = Car::create($request->all()); return response()->json($car); } public function show($id) { $car = Car::with(['category', 'city'])->findOrFail($id); return response()->json($car); } public function update(Request $request, $id) { $car = Car::findOrFail($id); $car->update($request->all()); return response()->json($car); } public function destroy($id) { $car = Car::findOrFail($id); $car->delete(); return response()->json(['message' => 'Car deleted successfully']); } } 4) Membuat File Model dan Controller untuk Transactions Buat model dan controller Transaction dengan perintah berikut: php artisan make:model Transaction -mcr Isi file Transaction.php di folder app/Models: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Transaction extends Model { use HasFactory; protected $fillable = [ 'car_id', 'customer_id', 'rental_date', 'return_date', 'total_price' ]; public function car() { return $this->belongsTo(Car::class); } public function customer() { return $this->belongsTo(Customer::class); } } Dan berikut adalah isi file TransactionController.php di folder app/Http/Controllers: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Transaction; use Illuminate\\\\Http\\\\Request; class TransactionController extends Controller { public function index() { $transactions = Transaction::with(['car', 'customer'])->get(); return response()->json($transactions); } public function store(Request $request) { $transaction = Transaction::create($request->all()); return response()->json($transaction); } public function show($id) { $transaction = Transaction::with(['car', 'customer'])->findOrFail($id); return response()->json($transaction); } public function update(Request $request, $id) { $transaction = Transaction::findOrFail($id); $transaction->update($request->all()); return response()->json($transaction); } public function destroy($id) { $transaction = Transaction::findOrFail($id); $transaction->delete(); return response()->json(['message' => 'Transaction deleted successfully']); } } 5) Membuat File Model dan Controller untuk Customers Buat model dan controller Customer dengan perintah berikut: php artisan make:model Customer -mcr Isi file Customer.php di folder app/Models: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Customer extends Model { use HasFactory; protected $fillable = [ 'name', 'email', 'phone' ]; } Dan berikut adalah isi file CustomerController.php di folder app/Http/Controllers: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Customer; use Illuminate\\\\Http\\\\Request; class CustomerController extends Controller { public function index() { $customers = Customer::all(); return response()->json($customers); } public function store(Request $request) { $customer = Customer::create($request->all()); return response()->json($customer); } public function show($id) { $customer = Customer::findOrFail($id); return response()->json($customer); } public function update(Request $request, $id) { $customer = Customer::findOrFail($id); $customer->update($request->all()); return response()->json($customer); } public function destroy($id) { $customer = Customer::findOrFail($id); $customer->delete(); return response()->json(['message' => 'Customer deleted successfully']); } } Menerapkan Laravel Passport untuk API Endpoint dengan React.js Laravel Passport memungkinkan kita untuk mengelola otentikasi API secara aman menggunakan token berbasis OAuth2. Dengan ini, kita bisa memastikan bahwa hanya pengguna yang sudah terverifikasi yang dapat mengakses endpoint API seperti categories, cities, cars, transactions, dan customers. Pada tutorial ini, kita akan menerapkan Laravel Passport untuk API endpoint tersebut dan mengaksesnya menggunakan React.js. 1) Menginstal dan Mengonfigurasi Laravel Passport Langkah pertama adalah menginstal Laravel Passport pada projek Laravel. Buka terminal dan jalankan perintah berikut: composer require laravel/passport Setelah instalasi selesai, jalankan perintah untuk mengatur tabel-tabel yang dibutuhkan oleh Passport: php artisan migrate php artisan passport:install Kemudian, buka file AuthServiceProvider.php di folder app/Providers dan tambahkan Passport ke dalam boot method: use Laravel\\\\Passport\\\\Passport; public function boot() { $this->registerPolicies(); Passport::routes(); } Di file config/auth.php, ubah driver API menjadi passport: 'guards' => [ 'api' => [ 'driver' => 'passport', 'provider' => 'users', ], ], 2) Membuat Endpoint API Terproteksi Setelah Laravel Passport terkonfigurasi, kita perlu membuat endpoint API yang hanya bisa diakses oleh pengguna yang terautentikasi. Buka file api.php di folder routes dan buat rute seperti berikut: use App\\\\Http\\\\Controllers\\\\CategoryController; use App\\\\Http\\\\Controllers\\\\CityController; use App\\\\Http\\\\Controllers\\\\CarController; use App\\\\Http\\\\Controllers\\\\TransactionController; use App\\\\Http\\\\Controllers\\\\CustomerController; Route::middleware('auth:api')->group(function () { Route::apiResource('categories', CategoryController::class); Route::apiResource('cities', CityController::class); Route::apiResource('cars', CarController::class); Route::apiResource('transactions', TransactionController::class); Route::apiResource('customers', CustomerController::class); }); Dengan konfigurasi ini, semua endpoint yang didefinisikan hanya bisa diakses oleh pengguna yang telah terautentikasi. 3) Membuat API Token untuk Pengguna Agar pengguna dapat mengakses API, mereka memerlukan token otentikasi. Untuk membuat token ini, tambahkan rute untuk login di file api.php: use Illuminate\\\\Http\\\\Request; use Illuminate\\\\Support\\\\Facades\\\\Auth; Route::post('login', function (Request $request) { $credentials = $request->only('email', 'password'); if (Auth::attempt($credentials)) { $user = Auth::user(); $token = $user->createToken('AccessToken')->accessToken; return response()->json(['token' => $token]); } else { return response()->json(['error' => 'Unauthorized'], 401); } }); Endpoint ini akan menghasilkan token yang bisa digunakan oleh pengguna untuk mengakses endpoint yang dilindungi. 4) Mengakses Endpoint API Menggunakan React.js Untuk mengakses API endpoint yang terproteksi menggunakan React.js, kita perlu mengirimkan token otentikasi bersama dengan permintaan (request). Pertama, kita buat file api.js untuk mengatur permintaan ke API. Misalnya, untuk mengambil data categories: import axios from 'axios'; const API_URL = '<http://localhost:8000/api>'; export const getCategories = async (token) => { try { const response = await axios.get(`${API_URL}/categories`, { headers: { 'Authorization': `Bearer ${token}` } }); return response.data; } catch (error) { console.error('Error fetching categories', error); throw error; } }; Kemudian, di file komponen React, kita bisa menggunakan fungsi ini untuk mengambil data: import React, { useState, useEffect } from 'react'; import { getCategories } from './api'; const CategoryList = () => { const [categories, setCategories] = useState([]); const [token, setToken] = useState(''); // Token didapatkan dari proses login useEffect(() => { const fetchCategories = async () => { try { const data = await getCategories(token); setCategories(data); } catch (error) { console.error(error); } }; if (token) { fetchCategories(); } }, [token]); return ( <div> <h3>List of Categories</h3> <ul> {categories.map(category => ( <li key={category.id}>{category.name}</li> ))} </ul> </div> ); }; export default CategoryList; Pastikan untuk mengganti token dengan token yang valid yang diperoleh dari proses login. 5) Mengirimkan Token dari Login Form Di aplikasi React.js, kita perlu membuat form login untuk mengambil token otentikasi: import React, { useState } from 'react'; import axios from 'axios'; const Login = ({ setToken }) => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleLogin = async (e) => { e.preventDefault(); try { const response = await axios.post('<http://localhost:8000/api/login>', { email, password }); setToken(response.data.token); } catch (error) { console.error('Login failed', error); } }; return ( <form onSubmit={handleLogin}> <h3>Login</h3> <div> <label>Email:</label> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <div> <label>Password:</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <button type="submit">Login</button> </form> ); }; export default Login; Dengan form ini, kita bisa mengambil token dari API Laravel Passport dan menyimpannya di state setToken untuk digunakan pada permintaan API lainnya. Membuat Data Transaksi Baru dengan React.js dan Laravel Passport Untuk membuat data transaksi baru menggunakan React.js dengan otentikasi Laravel Passport, kita perlu mengirim permintaan POST ke API endpoint yang telah dilindungi dengan token otentikasi. Berikut ini adalah langkah-langkahnya. 1) Mengatur State dan Mengirim Permintaan API Pertama, kita perlu membuat state untuk menampung data transaksi yang akan dikirim. Kemudian, kita buat fungsi untuk mengirim permintaan POST ke endpoint Laravel Passport. import React, { useState } from 'react'; import axios from 'axios'; const CreateTransaction = ({ token }) => { const [carId, setCarId] = useState(''); const [customerId, setCustomerId] = useState(''); const [rentalDate, setRentalDate] = useState(''); const [returnDate, setReturnDate] = useState(''); const [totalPrice, setTotalPrice] = useState(''); const handleCreateTransaction = async (e) => { e.preventDefault(); try { const response = await axios.post( '<http://localhost:8000/api/transactions>', { car_id: carId, customer_id: customerId, rental_date: rentalDate, return_date: returnDate, total_price: totalPrice }, { headers: { 'Authorization': `Bearer ${token}` } } ); console.log('Transaction created:', response.data); } catch (error) { console.error('Error creating transaction', error); } }; return ( <form onSubmit={handleCreateTransaction}> <h3>Create New Transaction</h3> <div> <label>Car ID:</label> <input type="text" value={carId} onChange={(e) => setCarId(e.target.value)} /> </div> <div> <label>Customer ID:</label> <input type="text" value={customerId} onChange={(e) => setCustomerId(e.target.value)} /> </div> <div> <label>Rental Date:</label> <input type="date" value={rentalDate} onChange={(e) => setRentalDate(e.target.value)} /> </div> <div> <label>Return Date:</label> <input type="date" value={returnDate} onChange={(e) => setReturnDate(e.target.value)} /> </div> <div> <label>Total Price:</label> <input type="number" value={totalPrice} onChange={(e) => setTotalPrice(e.target.value)} /> </div> <button type="submit">Create Transaction</button> </form> ); }; export default CreateTransaction; Pada kode di atas, form digunakan untuk mengumpulkan data transaksi seperti car_id, customer_id, rental_date, return_date, dan total_price. Kemudian, data tersebut dikirim ke endpoint API transactions menggunakan token otentikasi. 2) Menampilkan Hasil dan Validasi Setelah data dikirim, kita bisa menampilkan hasil atau pesan kesalahan dari permintaan API. Pastikan token yang dikirimkan pada header memiliki hak akses yang tepat untuk membuat transaksi baru. const handleCreateTransaction = async (e) => { e.preventDefault(); try { const response = await axios.post( '<http://localhost:8000/api/transactions>', { car_id: carId, customer_id: customerId, rental_date: rentalDate, return_date: returnDate, total_price: totalPrice }, { headers: { 'Authorization': `Bearer ${token}` } } ); console.log('Transaction created:', response.data); alert('Transaction successfully created!'); } catch (error) { console.error('Error creating transaction', error); alert('Failed to create transaction. Please try again.'); } }; Dengan kode ini, jika permintaan berhasil, kita akan menampilkan pesan bahwa transaksi berhasil dibuat, dan jika gagal, kita akan menampilkan pesan kesalahan. 3) Menghubungkan Form dengan Komponen Utama Terakhir, kita perlu menghubungkan komponen CreateTransaction dengan komponen utama atau halaman yang memuat token otentikasi untuk mengakses endpoint yang dilindungi. import React, { useState } from 'react'; import CreateTransaction from './CreateTransaction'; const App = () => { const [token, setToken] = useState(''); const handleLogin = async () => { try { const response = await axios.post('<http://localhost:8000/api/login>', { email: '[email protected]', password: 'password' }); setToken(response.data.token); } catch (error) { console.error('Login failed', error); } }; return ( <div> <h1>Rental Car Management</h1> <button onClick={handleLogin}>Login to Get Token</button> {token && <CreateTransaction token={token} />} </div> ); }; export default App; Pada komponen App di atas, kita membuat fungsi login untuk mendapatkan token otentikasi. Token ini kemudian digunakan sebagai prop yang dikirim ke komponen CreateTransaction untuk mengakses endpoint API yang dilindungi oleh Laravel Passport. Penutup dan saran dari mentor Laravel adalah salah satu framework PHP yang cocok dipelajari karena fleksibilitas dan kemudahan penggunaannya. Selain itu, Laravel juga menawarkan berbagai fitur lengkap yang dapat membantu pengembang membuat aplikasi web dengan cepat dan efisien. Popularitas Laravel terus meningkat dalam beberapa tahun terakhir, menjadikannya pilihan tepat bagi developer yang ingin menguasai web development modern. Untuk mempelajari Laravel lebih dalam, belajar di BuildWithAngga bisa menjadi solusi terbaik. Dengan bimbingan mentor expert dan berpengalaman, kamu bisa mengembangkan kemampuan coding sekaligus menjadikan projek skripsimu lebih menarik dan profesional. Di BuildWithAngga, kamu akan mendapatkan akses seumur hidup ke semua materi, sehingga bisa belajar kapan saja dan di mana saja. Tidak hanya itu, kamu juga bisa bertanya langsung kepada mentor jika menemui kendala dalam belajar atau mengerjakan projek. Ini akan membuat proses belajarmu lebih produktif dan terarah. Jadi, jangan ragu untuk mulai belajar Laravel dan tingkatkan skill coding-mu bersama BuildWithAngga!

Saat ini, JavaScript merupakan bahasa pemrograman yang sangat populer di dunia website development. JavaScript bisa digunakan di frontend maupun backend, sehingga membuatnya sangat fleksibel dan efisien. Dengan kemampuan ini, developer dapat membuat aplikasi web yang interaktif dan dinamis hanya dengan satu bahasa. Hal ini juga mempermudah proses development karena tidak perlu mempelajari bahasa pemrograman yang berbeda untuk frontend dan backend. Salah satu framework JavaScript yang sedang naik daun adalah Next.js. Framework ini dirancang untuk memudahkan developer dalam membangun aplikasi web modern dengan fitur-fitur canggih yang tidak dimiliki framework lain. Next.js adalah pilihan yang populer karena menyediakan pengalaman yang lebih baik dalam hal performa, SEO, dan fleksibilitas. Berikut ini adalah lima fitur hebat yang membuat Next.js begitu populer: Server-Side Rendering (SSR) dan Static Site Generation (SSG) Next.js mendukung Server-Side Rendering (SSR) dan Static Site Generation (SSG), yang memungkinkan halaman website dapat dirender di server atau dibuat statis pada waktu build. Ini sangat membantu untuk meningkatkan performa website dan juga memberikan dampak positif pada SEO.Routing Otomatis Dengan Next.js, Anda tidak perlu repot-repot membuat file routing secara manual. Setiap file yang Anda buat di dalam folder pages akan otomatis menjadi route. Ini sangat memudahkan developer dalam mengatur navigasi antar halaman.API Routes Next.js memungkinkan Anda membuat API endpoint langsung di dalam project Anda. Ini membuat Next.js tidak hanya bisa digunakan untuk frontend, tapi juga backend. Anda bisa membuat API sendiri tanpa memerlukan backend terpisah.Image Optimization Fitur ini memungkinkan optimisasi gambar secara otomatis. Next.js akan memuat gambar dengan ukuran yang tepat dan format yang optimal, yang berdampak pada waktu loading yang lebih cepat.Dukungan TypeScript Next.js mendukung penggunaan TypeScript secara penuh. TypeScript membantu developer untuk menulis kode yang lebih terstruktur dan aman, dengan fitur seperti type checking dan autocompletion. Membuat Fitur CRUD Sederhana dengan Next.js dan MongoDB Pada artikel ini, kita akan belajar bagaimana membangun fitur CRUD (Create, Read, Update, Delete) sederhana menggunakan framework Next.js dan database NoSQL, MongoDB. CRUD adalah fondasi dari hampir semua aplikasi web yang memungkinkan pengguna untuk mengelola data seperti menambah (create), melihat (read), memperbarui (update), dan menghapus (delete) data. Implementasi fitur CRUD sangat penting dalam aplikasi yang berhubungan dengan penyimpanan dan pengolahan data, seperti aplikasi e-commerce, manajemen tugas, blog, dan lain sebagainya. Mengapa Memilih Next.js dan MongoDB? Next.js adalah framework JavaScript yang memungkinkan kita untuk membuat aplikasi web modern dengan fitur-fitur canggih seperti Server-Side Rendering (SSR), Static Site Generation (SSG), dan API Routes. Keunggulan-keunggulan ini membuat Next.js sangat fleksibel dan cocok digunakan untuk membangun aplikasi web yang cepat dan SEO-friendly. MongoDB, di sisi lain, adalah database NoSQL yang sangat populer dan banyak digunakan untuk menyimpan data berbentuk dokumen dalam format JSON. Berbeda dengan database relasional yang menggunakan tabel dan baris, MongoDB menyimpan data dalam dokumen yang lebih fleksibel dan dapat menampung berbagai jenis data tanpa perlu mematuhi skema yang kaku. Menggabungkan Next.js dan MongoDB memberikan kita fleksibilitas untuk mengembangkan aplikasi full-stack yang efisien, di mana Next.js digunakan untuk membangun antarmuka pengguna dan API, sedangkan MongoDB digunakan untuk menyimpan data di backend. Manfaat Membuat Fitur CRUD dengan Next.js dan MongoDB Fleksibilitas dalam Pengelolaan Data: Dengan MongoDB, kita dapat menyimpan data dalam bentuk dokumen JSON yang mudah untuk dimanipulasi. Ini sangat berguna ketika kita bekerja dengan data yang kompleks dan tidak terstruktur.Pengembangan Full-Stack yang Efisien: Next.js memungkinkan kita untuk membuat API Routes di dalam aplikasi yang sama. Ini berarti kita dapat menangani logika backend (seperti pengelolaan database) tanpa memerlukan backend terpisah.Performa dan Skalabilitas: Next.js mendukung Server-Side Rendering dan Static Site Generation yang meningkatkan performa aplikasi. MongoDB juga dapat diakses dan diskalakan dengan mudah untuk menangani volume data yang besar.Pengembangan Cepat dan Mudah: Dengan menggunakan Next.js dan MongoDB, kita dapat memanfaatkan banyak library dan alat yang mempermudah pengembangan, seperti mongoose untuk menghubungkan aplikasi dengan MongoDB. Rencana Pembuatan Fitur CRUD Dalam pembuatan fitur CRUD ini, kita akan fokus pada beberapa operasi dasar: Create: Menambahkan data baru ke dalam database. Misalnya, kita dapat menambahkan item baru ke daftar produk dalam aplikasi e-commerce.Read: Mengambil dan menampilkan data dari database. Misalnya, menampilkan daftar produk yang tersedia.Update: Memperbarui data yang sudah ada. Misalnya, memperbarui informasi harga produk atau jumlah stok yang tersedia.Delete: Menghapus data dari database. Misalnya, menghapus produk yang sudah tidak dijual lagi dari daftar produk. Seluruh operasi ini akan diimplementasikan menggunakan API Routes di Next.js yang berfungsi sebagai endpoint untuk mengirimkan request ke database MongoDB. Meskipun kita tidak akan masuk ke detail kode dalam artikel ini, namun penting untuk memahami alur umum dari pembuatan fitur CRUD: Koneksi ke Database: Menghubungkan aplikasi Next.js dengan database MongoDB menggunakan library mongoose atau mongodb native.Membuat Model Data: Menentukan struktur data yang akan disimpan di MongoDB, misalnya, membuat model untuk produk yang memiliki atribut seperti nama, harga, dan deskripsi.Membuat API Routes: Membuat endpoint API untuk menangani permintaan CRUD dari frontend, seperti /api/products untuk menambahkan, melihat, memperbarui, dan menghapus produk.Integrasi dengan Antarmuka Pengguna: Menggunakan hook seperti useSWR untuk berkomunikasi dengan API Routes dan menampilkan data di halaman Next.js. 1) Membuat Proyek Toko Baju dengan Next.js Terbaru Menggunakan Terminal Untuk memulai proyek baru menggunakan Next.js tanpa instalasi MongoDB, ikuti langkah-langkah berikut: Langkah 1: Membuat Proyek Baru Buka terminal Anda, lalu jalankan perintah berikut untuk membuat proyek Next.js baru: npx create-next-app@latest toko-baju Proses ini akan meminta Anda untuk memilih beberapa opsi seperti menggunakan TypeScript atau JavaScript, mengaktifkan ESLint, dan sebagainya. Pilih sesuai kebutuhan Anda atau gunakan pengaturan default. Langkah 2: Masuk ke Direktori Proyek Setelah proyek berhasil dibuat, pindah ke direktori proyek: cd toko-baju Langkah 3: Menjalankan Proyek Jalankan proyek untuk memastikan semua telah terpasang dengan benar: npm run dev Buka http://localhost:3000 di browser untuk melihat tampilan awal proyek Next.js Anda. Anda sekarang memiliki proyek Next.js dasar yang siap untuk dikembangkan lebih lanjut. 2) Tata Cara Mendaftar Akun MongoDB dan Membuat Koneksi dengan MongoDB Atlas pada Windows dan Mac OS Langkah 1: Mendaftar Akun MongoDB Atlas Buka situs MongoDB Atlas dan klik Sign Up.Isi informasi yang diperlukan seperti nama, email, dan kata sandi.Atau, Anda dapat menggunakan akun Google atau GitHub untuk mendaftar.Setelah itu, verifikasi email yang dikirimkan untuk mengaktifkan akun Anda. Langkah 2: Membuat Cluster MongoDB Setelah masuk ke MongoDB Atlas, klik Build a Cluster.Pilih opsi Free Tier untuk membuat cluster gratis.Pilih wilayah yang terdekat dengan lokasi Anda.Klik Create Cluster dan tunggu hingga cluster selesai dibuat. Langkah 3: Membuat Pengguna dan Menambahkan IP Address Buka tab Database Access dan klik Add New Database User.Masukkan nama pengguna dan kata sandi untuk akses database Anda.Buka tab Network Access dan klik Add IP Address.Pilih opsi Allow Access from Anywhere atau masukkan IP address Anda untuk mengizinkan koneksi. Langkah 4: Mendapatkan String Koneksi Setelah cluster siap, klik Connect di cluster Anda.Pilih Connect your application.Pilih Node.js sebagai driver, lalu salin string koneksi yang ditampilkan. String ini akan digunakan untuk menghubungkan aplikasi Anda dengan MongoDB Atlas. 3) Menginstal MongoDB pada Proyek Toko Baju dan Menghubungkan dengan Akun MongoDB Atlas Langkah 1: Menginstal Mongoose Pastikan Anda berada di dalam direktori proyek toko-baju yang telah dibuat. Instal Mongoose dengan perintah berikut: npm install mongoose Langkah 2: Menyiapkan Koneksi MongoDB Buat file lib/mongodb.js di dalam proyek Anda dan tambahkan kode berikut untuk mengatur koneksi ke MongoDB Atlas: // lib/mongodb.js import mongoose from 'mongoose'; const connectMongo = async () => { try { await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log("MongoDB connected"); } catch (error) { console.error("MongoDB connection error", error); } }; export default connectMongo; Langkah 3: Menyimpan String Koneksi di File Environment Buat file .env.local di root proyek Anda dan tambahkan string koneksi dari MongoDB Atlas yang telah disalin sebelumnya: MONGODB_URI=mongodb+srv://:@cluster0.mongodb.net/myFirstDatabase?retryWrites=true&w=majority Ganti dan dengan nama pengguna dan kata sandi yang telah dibuat sebelumnya, dan myFirstDatabase dengan nama database yang ingin Anda gunakan. Langkah 4: Menghubungkan ke MongoDB dalam Aplikasi Next.js Import dan panggil fungsi connectMongo() di dalam file API atau komponen yang memerlukan koneksi database, misalnya: // pages/api/hello.js import connectMongo from '../../lib/mongodb'; export default async function handler(req, res) { await connectMongo(); res.status(200).json({ message: 'Connected to MongoDB' }); } Cara Membuat Fitur CRUD Data Produk Baju yang Terhubung dengan MongoDB Pada tutorial ini, kita akan membuat fitur CRUD (Create, Read, Update, Delete) untuk data produk baju yang terhubung dengan database MongoDB yang telah kita buat sebelumnya. Proses ini akan menggunakan Next.js dan Mongoose untuk mengelola data produk baju. 1) Membuat Model Produk dengan Mongoose Buat file baru models/Product.js untuk mendefinisikan schema produk baju: // models/Product.js import mongoose from 'mongoose'; const ProductSchema = new mongoose.Schema({ name: { type: String, required: true, }, price: { type: Number, required: true, }, description: { type: String, }, imageUrl: { type: String, }, }, { timestamps: true, }); export default mongoose.models.Product || mongoose.model('Product', ProductSchema); Schema ini berisi atribut name, price, description, dan imageUrl yang akan digunakan untuk menyimpan data produk baju. 2) Membuat API Routes untuk CRUD Produk Buat file baru di folder pages/api/products/index.js untuk menangani operasi Create dan Read: // pages/api/products/index.js import connectMongo from '../../../lib/mongodb'; import Product from '../../../models/Product'; export default async function handler(req, res) { await connectMongo(); if (req.method === 'POST') { try { const product = new Product(req.body); await product.save(); res.status(201).json({ success: true, data: product }); } catch (error) { res.status(400).json({ success: false, error }); } } else if (req.method === 'GET') { try { const products = await Product.find({}); res.status(200).json({ success: true, data: products }); } catch (error) { res.status(400).json({ success: false, error }); } } else { res.status(405).json({ success: false, message: 'Method not allowed' }); } } Kode ini akan membuat endpoint API untuk menambahkan (POST) dan mendapatkan (GET) semua produk. 3) Membuat API Route untuk Update dan Delete Produk Buat file baru di pages/api/products/[id].js untuk menangani operasi Update dan Delete berdasarkan id produk: // pages/api/products/[id].js import connectMongo from '../../../lib/mongodb'; import Product from '../../../models/Product'; export default async function handler(req, res) { await connectMongo(); const { id } = req.query; if (req.method === 'PUT') { try { const product = await Product.findByIdAndUpdate(id, req.body, { new: true, runValidators: true, }); if (!product) { return res.status(404).json({ success: false, message: 'Product not found' }); } res.status(200).json({ success: true, data: product }); } catch (error) { res.status(400).json({ success: false, error }); } } else if (req.method === 'DELETE') { try { const deletedProduct = await Product.findByIdAndDelete(id); if (!deletedProduct) { return res.status(404).json({ success: false, message: 'Product not found' }); } res.status(200).json({ success: true, data: deletedProduct }); } catch (error) { res.status(400).json({ success: false, error }); } } else { res.status(405).json({ success: false, message: 'Method not allowed' }); } } Kode ini memungkinkan pengguna untuk memperbarui (PUT) dan menghapus (DELETE) produk berdasarkan id. 4) Menambahkan Fungsi CRUD di Frontend Untuk menampilkan data produk di frontend dan menambahkan fitur CRUD, buat file pages/products.js: // pages/products.js import { useState, useEffect } from 'react'; import axios from 'axios'; export default function ProductsPage() { const [products, setProducts] = useState([]); const [name, setName] = useState(''); const [price, setPrice] = useState(''); const [description, setDescription] = useState(''); const [imageUrl, setImageUrl] = useState(''); useEffect(() => { fetchProducts(); }, []); const fetchProducts = async () => { try { const response = await axios.get('/api/products'); setProducts(response.data.data); } catch (error) { console.error('Failed to fetch products', error); } }; const addProduct = async () => { try { const newProduct = { name, price, description, imageUrl }; await axios.post('/api/products', newProduct); fetchProducts(); setName(''); setPrice(''); setDescription(''); setImageUrl(''); } catch (error) { console.error('Failed to add product', error); } }; return ( Daftar Produk Baju setName(e.target.value)} /> setPrice(e.target.value)} /> setDescription(e.target.value)} /> setImageUrl(e.target.value)} /> Tambah Produk {products.map((product) => ( {product.name} {product.price} {product.description} ))} ); } Kode ini menampilkan daftar produk, memungkinkan penambahan produk baru, dan menyimpan data ke MongoDB Atlas. Menambahkan Fitur CRUD dan Hapus Produk di Frontend Untuk menampilkan data produk, menambahkan fitur CRUD, dan menghapus produk dari frontend, kita akan memperbarui file pages/products.js. Berikut adalah langkah-langkahnya: // pages/products.js import { useState, useEffect } from 'react'; import axios from 'axios'; export default function ProductsPage() { const [products, setProducts] = useState([]); const [name, setName] = useState(''); const [price, setPrice] = useState(''); const [description, setDescription] = useState(''); const [imageUrl, setImageUrl] = useState(''); useEffect(() => { fetchProducts(); }, []); const fetchProducts = async () => { try { const response = await axios.get('/api/products'); setProducts(response.data.data); } catch (error) { console.error('Failed to fetch products', error); } }; const addProduct = async () => { try { const newProduct = { name, price, description, imageUrl }; await axios.post('/api/products', newProduct); fetchProducts(); // Refresh the product list after adding a new product setName(''); setPrice(''); setDescription(''); setImageUrl(''); } catch (error) { console.error('Failed to add product', error); } }; const deleteProduct = async (id) => { try { await axios.delete(`/api/products/${id}`); fetchProducts(); // Refresh the product list after deletion } catch (error) { console.error('Failed to delete product', error); } }; return ( Daftar Produk Baju setName(e.target.value)} /> setPrice(e.target.value)} /> setDescription(e.target.value)} /> setImageUrl(e.target.value)} /> Tambah Produk {products.map((product) => ( {product.name} {product.price} {product.description} deleteProduct(product._id)}>Hapus Produk ))} ); } Penjelasan State dan Hooks: useState digunakan untuk menyimpan data produk dan input dari form. useEffect dipakai untuk mengambil data produk saat komponen pertama kali dimuat.fetchProducts(): Fungsi ini mengambil data produk dari endpoint API /api/products dan menyimpannya di state products.addProduct(): Fungsi ini menambahkan produk baru dengan mengirimkan data dari form ke endpoint /api/products menggunakan metode POST.deleteProduct(id): Fungsi ini menghapus produk berdasarkan id dengan mengirimkan permintaan DELETE ke endpoint /api/products/[id]. Setelah produk dihapus, daftar produk diperbarui dengan memanggil fetchProducts(). Tata Cara Melakukan Uji Coba Seluruh Method API Menggunakan Postman Berikut ini adalah langkah-langkah lengkap untuk melakukan uji coba method API (GET, POST, PUT, DELETE) menggunakan Postman dengan struktur yang terorganisir. Pastikan API yang ingin diuji sudah berjalan di server lokal Anda. 1) Menguji Method GET untuk Mendapatkan Daftar Produk Buka aplikasi Postman.Pilih metode GET.Masukkan URL endpoint http://localhost:3000/api/products.Klik tombol Send.Pastikan respons yang diterima berupa daftar produk dalam format JSON, misalnya: { "success": true, "data": [ { "_id": "60d21b4667d0d8992e610c85", "name": "Kaos Polos", "price": 100000, "description": "Kaos polos berwarna putih", "imageUrl": "", "createdAt": "2023-09-20T07:00:00.000Z", "updatedAt": "2023-09-20T07:00:00.000Z" } ] } 2) Menguji Method POST untuk Menambahkan Produk Baru Pilih metode POST di Postman. Masukkan URL endpoint http://localhost:3000/api/products. Pilih tab Body, lalu pilih opsi raw dan JSON. Masukkan data JSON berikut untuk menambahkan produk baru: { "name": "Kemeja Batik", "price": 200000, "description": "Kemeja batik modern dengan motif kontemporer", "imageUrl": "" } Klik tombol Send. Pastikan respons yang diterima berupa data produk yang baru ditambahkan, misalnya: { "success": true, "data": { "_id": "60d21b4667d0d8992e610c86", "name": "Kemeja Batik", "price": 200000, "description": "Kemeja batik modern dengan motif kontemporer", "imageUrl": "", "createdAt": "2023-09-20T08:00:00.000Z", "updatedAt": "2023-09-20T08:00:00.000Z" } } 3) Menguji Method PUT untuk Memperbarui Produk Berdasarkan ID Pilih metode PUT di Postman. Masukkan URL endpoint http://localhost:3000/api/products/60d21b4667d0d8992e610c86 (ganti ID dengan ID produk yang ingin diperbarui). Pilih tab Body, lalu pilih opsi raw dan JSON. Masukkan data JSON berikut untuk memperbarui produk: { "name": "Kemeja Batik Terbaru", "price": 250000, "description": "Kemeja batik terbaru dengan desain elegan" } Klik tombol Send. Pastikan respons yang diterima berupa data produk yang telah diperbarui, misalnya: { "success": true, "data": { "_id": "60d21b4667d0d8992e610c86", "name": "Kemeja Batik Terbaru", "price": 250000, "description": "Kemeja batik terbaru dengan desain elegan", "imageUrl": "", "createdAt": "2023-09-20T08:00:00.000Z", "updatedAt": "2023-09-20T09:00:00.000Z" } } 4) Menguji Method DELETE untuk Menghapus Produk Berdasarkan ID Pilih metode DELETE di Postman. Masukkan URL endpoint http://localhost:3000/api/products/60d21b4667d0d8992e610c86 (ganti ID dengan ID produk yang ingin dihapus). Klik tombol Send. Pastikan respons yang diterima berupa pesan konfirmasi bahwa produk telah dihapus, misalnya: { "success": true, "data": { "_id": "60d21b4667d0d8992e610c86", "name": "Kemeja Batik Terbaru", "price": 250000, "description": "Kemeja batik terbaru dengan desain elegan", "imageUrl": "", "createdAt": "2023-09-20T08:00:00.000Z", "updatedAt": "2023-09-20T09:00:00.000Z" } } Jangan lewatkan kesempatan untuk belajar dan berkembang bersama BuildWithAngga!

Pada artikel ini, kita akan belajar cara membuat unit testing menggunakan Laravel 11. Unit testing adalah bagian penting dalam pengembangan sebuah website, terutama untuk memastikan bahwa sistem yang dibangun aman, kuat, dan bebas dari bug atau error. Dengan unit testing, kita bisa menguji bagian-bagian kecil dari kode secara terpisah untuk memastikan bahwa setiap fungsi berjalan sesuai harapan sebelum menggabungkannya dengan bagian lain dari sistem. Pentingnya Unit Testing Bayangkan kita sedang membangun sebuah rumah. Setiap bagian seperti fondasi, dinding, dan atap harus diuji secara individual untuk memastikan kekuatannya sebelum membangun keseluruhan rumah. Begitu juga dengan unit testing dalam proyek Laravel. Setiap fungsi atau fitur diuji secara terpisah untuk memastikan bahwa setiap bagian berjalan dengan benar sebelum digabungkan menjadi aplikasi yang utuh. Jika ada kesalahan pada salah satu bagian, kita dapat dengan mudah menemukannya dan memperbaikinya tanpa harus memeriksa seluruh aplikasi. 5 Fitur Utama pada Proyek Website Booking Ticket Dalam proyek website booking ticket wisata, ada beberapa fitur utama yang harus diuji menggunakan unit testing. Berikut adalah 5 fitur yang akan kita buat unit testing-nya: Registrasi dan Login Pengguna: Fitur ini memastikan bahwa pengguna dapat mendaftar dan masuk ke dalam sistem dengan aman. Unit testing akan menguji validasi data, seperti format email yang benar dan keamanan kata sandi.Pencarian dan Pemilihan Destinasi: Fitur ini memungkinkan pengguna untuk mencari dan memilih destinasi wisata yang tersedia. Unit testing akan menguji apakah pencarian berfungsi dengan benar dan menampilkan hasil yang relevan berdasarkan kata kunci yang dimasukkan pengguna.Pemesanan Ticket: Fitur ini adalah inti dari proyek booking ticket. Unit testing akan memastikan bahwa proses pemesanan berjalan dengan lancar, mulai dari pemilihan tanggal, jumlah tiket, hingga konfirmasi pemesanan.Pembayaran: Fitur ini memastikan bahwa pengguna dapat melakukan pembayaran secara aman dan transaksi tercatat dengan benar. Unit testing akan menguji berbagai metode pembayaran yang tersedia serta validasi data transaksi.Manajemen Pemesanan: Fitur ini memungkinkan pengguna untuk melihat dan mengelola pemesanan mereka. Unit testing akan menguji apakah pengguna dapat melihat riwayat pemesanan, mengubah, atau membatalkan pemesanan sesuai kebijakan yang berlaku. Metode Testing Selain Unit Testing Selain unit testing, ada beberapa metode testing lain yang dapat digunakan dalam proyek Laravel 11 untuk memastikan bahwa aplikasi berjalan dengan baik: Feature Testing: Metode ini menguji alur kerja atau proses tertentu dari aplikasi secara keseluruhan, seperti proses pemesanan dari awal hingga selesai. Feature testing lebih menyeluruh dibandingkan unit testing.Browser Testing: Menggunakan alat seperti Laravel Dusk untuk mensimulasikan interaksi pengguna pada browser. Cocok untuk menguji fitur yang melibatkan interaksi antarmuka pengguna.Integration Testing: Menguji interaksi antara beberapa bagian atau modul dalam aplikasi. Metode ini memastikan bahwa modul-modul tersebut bekerja dengan baik saat digabungkan. Dengan menggunakan berbagai metode testing ini, kita dapat memastikan bahwa proyek website booking ticket wisata berjalan dengan lancar dan bebas dari error. Tata Cara Membuat Projek Wisata Baru dengan Laravel 11 Menggunakan Composer Membuat proyek wisata baru dengan Laravel 11 menggunakan Composer sangatlah mudah dan efisien. Di sini, kita akan membahas langkah-langkah detail untuk membuat proyek Laravel dari awal, mulai dari instalasi hingga konfigurasi dasar. 1. Instalasi Composer Sebelum memulai, pastikan Anda sudah memiliki Composer terinstal di komputer Anda. Jika belum, Anda bisa mengunduhnya dari website resmi Composer. Composer adalah alat manajemen paket untuk PHP yang memudahkan instalasi dan pembaruan dependensi proyek PHP, termasuk Laravel. 2. Membuat Proyek Laravel Baru Setelah Composer terinstal, langkah selanjutnya adalah membuat proyek Laravel baru menggunakan perintah composer create-project. Berikut langkah-langkahnya: Buka terminal atau command prompt di komputer Anda. Pindah ke direktori tempat Anda ingin membuat proyek baru. Misalnya: cd /path/to/your/projects Jalankan perintah berikut untuk membuat proyek Laravel baru dengan nama wisata-booking: composer create-project --prefer-dist laravel/laravel wisata-booking Perintah ini akan melakukan beberapa hal: Mengunduh semua file Laravel 11 terbaru dari repositori resmi Laravel.Membuat struktur proyek baru di dalam folder wisata-booking.Menginstal semua dependensi yang dibutuhkan oleh Laravel. 3. Konfigurasi Proyek Laravel Setelah proyek berhasil dibuat, Anda perlu melakukan beberapa konfigurasi dasar: Masuk ke Direktori Proyek: cd wisata-booking Buat File .env Baru: Laravel sudah menyediakan file .env.example sebagai template. Anda bisa membuat file .env baru dengan menyalin file template ini: cp .env.example .env Generate Key Aplikasi: Laravel membutuhkan application key yang unik untuk menjaga keamanan data. Gunakan perintah berikut untuk menghasilkan key baru: php artisan key:generate Perintah ini akan mengisi nilai APP_KEY di file .env dengan key unik yang dihasilkan. Konfigurasi Koneksi Database: Buka file .env dan atur pengaturan koneksi database sesuai dengan konfigurasi lokal Anda: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=wisata_booking DB_USERNAME=root DB_PASSWORD= Gantilah DB_DATABASE, DB_USERNAME, dan DB_PASSWORD dengan informasi yang sesuai dengan pengaturan database Anda. 4. Menjalankan Server Lokal Laravel Untuk memastikan bahwa proyek Laravel sudah berhasil dibuat dan berjalan dengan baik, kita bisa menjalankan server lokal yang disediakan oleh Laravel: php artisan serve Setelah menjalankan perintah ini, Anda akan melihat pesan seperti ini di terminal: Starting Laravel development server: <http://127.0.0.1:8000> Buka browser dan akses URL http://127.0.0.1:8000 untuk melihat halaman default Laravel. Jika muncul halaman selamat datang Laravel, berarti proyek sudah berhasil dibuat dan berjalan dengan baik. 5. Struktur Proyek Laravel Berikut adalah penjelasan singkat mengenai struktur folder utama dalam proyek Laravel: app/: Berisi logika aplikasi seperti model, controller, service, dll.bootstrap/: Berisi file bootstraping aplikasi.config/: Berisi konfigurasi aplikasi.database/: Berisi file migration, seeder, dan factory untuk database.public/: Folder ini berisi file yang dapat diakses oleh publik, seperti file index.php dan asset front-end.resources/: Berisi view (Blade), file bahasa, dan asset yang dapat dikompilasi.routes/: Berisi definisi rute aplikasi.storage/: Berisi file yang dihasilkan oleh aplikasi, seperti log, cache, dan file yang diunggah.tests/: Berisi file untuk pengujian (testing).vendor/: Berisi semua library pihak ketiga yang diinstal oleh Composer. 6. Contoh Koding: Membuat Halaman Utama Untuk memastikan proyek ini sudah terhubung dengan baik, kita akan membuat route dan view sederhana sebagai contoh. Membuat Route: Buka file routes/web.php dan tambahkan route baru untuk halaman utama: use Illuminate\\\\Support\\\\Facades\\\\Route; Route::get('/', function () { return view('welcome'); }); Membuat View: Buka file resources/views/welcome.blade.php dan ubah kontennya menjadi seperti ini: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Projek Wisata</title> </head> <body> <h1>Selamat Datang di Projek Wisata</h1> <p>Ini adalah halaman utama untuk projek wisata menggunakan Laravel 11.</p> </body> </html> Lihat Perubahan di Browser: Simpan perubahan tersebut dan kembali ke browser. Muat ulang halaman http://127.0.0.1:8000. Anda akan melihat halaman baru dengan pesan "Selamat Datang di Projek Wisata". Tata Cara Membuat File Migration, Model, Controller, dan Service untuk Proyek Wisata Menggunakan Artisan Pada bagian ini, kita akan membuat beberapa file migration, model, controller, dan service untuk setiap tabel yang ada dalam proyek wisata seperti categories, places, transactions, customers, dan vouchers. Kita akan menggunakan Artisan commands yang disediakan oleh Laravel untuk mempercepat proses pembuatan file-file tersebut. 1) Membuat File Migration dan Model Untuk membuat file migration dan model secara bersamaan, kita dapat menggunakan command make:model dengan opsi -m untuk membuat file migration. Berikut adalah cara membuat file-file tersebut: 1.1) Membuat Model dan Migration untuk Tabel Categories: php artisan make:model Category -m 1.2) Membuat Model dan Migration untuk Tabel Places: php artisan make:model Place -m 1.3) Membuat Model dan Migration untuk Tabel Transactions: php artisan make:model Transaction -m 1.4) Membuat Model dan Migration untuk Tabel Customers: php artisan make:model Customer -m 1.5) Membuat Model dan Migration untuk Tabel Vouchers: php artisan make:model Voucher -m Setelah menjalankan command di atas, Laravel akan membuat file model di dalam folder app/Models dan file migration di dalam folder database/migrations dengan nama seperti 2024_09_20_000000_create_categories_table.php. 2) Mengedit File Migration Setelah file migration dibuat, kita perlu menyesuaikan struktur tabel di dalam file migration tersebut. Berikut adalah beberapa contoh struktur tabel untuk setiap entitas: 2.1) Struktur Tabel Categories: Buka file migration create_categories_table.php dan edit seperti berikut: <?php use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateCategoriesTable extends Migration { public function up() { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->text('description')->nullable(); $table->timestamps(); }); } public function down() { Schema::dropIfExists('categories'); } } 2.2) Struktur Tabel Places: Buka file migration create_places_table.php dan edit seperti berikut: <?php use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreatePlacesTable extends Migration { public function up() { Schema::create('places', function (Blueprint $table) { $table->id(); $table->string('name'); $table->text('description')->nullable(); $table->string('location'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('places'); } } 2.3) Struktur Tabel Transactions: Buka file migration create_transactions_table.php dan edit seperti berikut: <?php use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateTransactionsTable extends Migration { public function up() { Schema::create('transactions', function (Blueprint $table) { $table->id(); $table->foreignId('customer_id')->constrained()->onDelete('cascade'); $table->foreignId('place_id')->constrained()->onDelete('cascade'); $table->integer('quantity'); $table->decimal('total_price', 10, 2); $table->date('transaction_date'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('transactions'); } } 2.4) Struktur Tabel Customers: Buka file migration create_customers_table.php dan edit seperti berikut: <?php use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateCustomersTable extends Migration { public function up() { Schema::create('customers', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->string('phone_number'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('customers'); } } 2.5) Struktur Tabel Vouchers: Buka file migration create_vouchers_table.php dan edit seperti berikut: <?php use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateVouchersTable extends Migration { public function up() { Schema::create('vouchers', function (Blueprint $table) { $table->id(); $table->string('code')->unique(); $table->decimal('discount_amount', 10, 2); $table->date('valid_until'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('vouchers'); } } Setelah mengedit semua file migration, jalankan perintah berikut untuk membuat tabel di dalam database: php artisan migrate 3) Membuat File Controller Untuk setiap tabel, kita juga perlu membuat controller yang akan menangani logika bisnis dari masing-masing entitas. Gunakan perintah berikut untuk membuat controller: 3.1) Membuat Controller untuk Tabel Categories: php artisan make:controller CategoryController 3.2) Membuat Controller untuk Tabel Places: php artisan make:controller PlaceController 3.3) Membuat Controller untuk Tabel Transactions: php artisan make:controller TransactionController 3.4) Membuat Controller untuk Tabel Customers: php artisan make:controller CustomerController 3.5) Membuat Controller untuk Tabel Vouchers: php artisan make:controller VoucherController File controller yang dibuat akan berada di dalam folder app/Http/Controllers. 4) Membuat File Service Untuk memisahkan logika bisnis dari controller, kita dapat membuat service untuk setiap entitas. Service ini akan menangani pengolahan data dan komunikasi dengan model. Laravel tidak menyediakan command untuk membuat service secara langsung, jadi kita perlu membuatnya secara manual. 4.1) Membuat Folder Services: mkdir app/Services 4.2) Membuat File Service untuk Category: Buat file CategoryService.php di dalam folder app/Services dengan isi berikut: <?php namespace App\\\\Services; use App\\\\Models\\\\Category; class CategoryService { public function getAllCategories() { return Category::all(); } public function createCategory($data) { return Category::create($data); } public function updateCategory($id, $data) { $category = Category::findOrFail($id); $category->update($data); return $category; } public function deleteCategory($id) { $category = Category::findOrFail($id); $category->delete(); return $category; } } 4.3) Lakukan hal yang sama untuk entitas lainnya seperti PlaceService, TransactionService, CustomerService, dan VoucherService. Dengan langkah-langkah di atas, Anda telah berhasil membuat file migration, model, controller, dan service untuk setiap tabel pada proyek wisata menggunakan Artisan commands. Semua file ini siap digunakan untuk pengembangan fitur-fitur dalam aplikasi. Tata Cara Melakukan Unit Testing dengan Laravel 11 pada Proyek Wisata dengan Fitur Lebih Lengkap Dalam melakukan unit testing pada proyek wisata, penting untuk menguji semua fitur utama dari aplikasi. Pada panduan ini, kita akan menambahkan detail lebih lengkap untuk unit testing pada beberapa fitur utama seperti pengelolaan kategori, tempat wisata, transaksi, pelanggan, dan voucher. Setiap fitur akan diuji menggunakan berbagai skenario untuk memastikan bahwa setiap aspek dari aplikasi bekerja sesuai harapan. 1) Persiapan Lingkungan Testing 1.1) Pastikan bahwa file phpunit.xml sudah tersedia di root proyek Laravel. File ini berisi konfigurasi untuk pengujian menggunakan PHPUnit, yang merupakan framework testing default di Laravel. 1.2) Gunakan database khusus untuk pengujian agar tidak mengganggu data di database utama. Buka file .env.testing dan atur koneksi database pengujian: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=wisata_testing DB_USERNAME=root DB_PASSWORD= 1.3) Jalankan migrasi untuk membuat struktur tabel di database testing: php artisan migrate --env=testing 2) Membuat File Unit Test Untuk setiap fitur utama, kita akan membuat file unit test menggunakan command make:test. Berikut adalah cara membuat file-file tersebut: 2.1) Membuat File Test untuk Kategori: php artisan make:test CategoryTest --unit 2.2) Membuat File Test untuk Tempat Wisata: php artisan make:test PlaceTest --unit 2.3) Membuat File Test untuk Transaksi: php artisan make:test TransactionTest --unit 2.4) Membuat File Test untuk Pelanggan: php artisan make:test CustomerTest --unit 2.5) Membuat File Test untuk Voucher: php artisan make:test VoucherTest --unit 3) Menulis Kode Unit Test untuk Fitur Kategori Buka file tests/Unit/CategoryTest.php dan tambahkan berbagai skenario pengujian berikut: 3.1) Mengatur Kode Dasar Unit Test: <?php namespace Tests\\\\Unit; use Tests\\\\TestCase; use App\\\\Models\\\\Category; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; class CategoryTest extends TestCase { use RefreshDatabase; } Tambahkan metode-metode berikut ke dalam kelas CategoryTest untuk menguji berbagai skenario. 3.2) Pengujian Pembuatan Kategori: Metode ini menguji apakah kita bisa membuat kategori baru dengan data yang benar. /** @test */ public function it_can_create_a_category() { $data = [ 'name' => 'Adventure', 'description' => 'Category for adventure places' ]; $category = Category::create($data); $this->assertInstanceOf(Category::class, $category); $this->assertDatabaseHas('categories', ['name' => 'Adventure']); } 3.3) Pengujian Validasi Data Kategori: Metode ini menguji apakah validasi bekerja saat membuat kategori dengan data yang tidak lengkap. /** @test */ public function it_requires_a_name_to_create_category() { $this->expectException(\\\\Illuminate\\\\Database\\\\QueryException::class); Category::create([ 'description' => 'Category without name' ]); } 3.4) Pengujian Pembaruan Data Kategori: Metode ini menguji apakah kita bisa memperbarui data kategori dengan benar. /** @test */ public function it_can_update_a_category() { $category = Category::factory()->create(); $category->update([ 'name' => 'Updated Category Name' ]); $this->assertEquals('Updated Category Name', $category->name); $this->assertDatabaseHas('categories', ['name' => 'Updated Category Name']); } 3.5) Pengujian Penghapusan Kategori: Metode ini menguji apakah kita bisa menghapus kategori dengan benar. /** @test */ public function it_can_delete_a_category() { $category = Category::factory()->create(); $category->delete(); $this->assertSoftDeleted('categories', ['id' => $category->id]); } 3.6) Pengujian Pengambilan Semua Kategori: Metode ini menguji apakah kita bisa mengambil semua kategori yang tersedia. /** @test */ public function it_can_list_all_categories() { $categories = Category::factory()->count(3)->create(); $this->assertCount(3, Category::all()); } 4) Menulis Kode Unit Test untuk Fitur Tempat Wisata Buka file tests/Unit/PlaceTest.php dan tambahkan berbagai skenario pengujian berikut: 4.1) Pengujian Pembuatan Tempat Wisata: /** @test */ public function it_can_create_a_place() { $data = [ 'name' => 'Bali Beach', 'description' => 'Beautiful beach in Bali', 'location' => 'Bali' ]; $place = Place::create($data); $this->assertInstanceOf(Place::class, $place); $this->assertDatabaseHas('places', ['name' => 'Bali Beach']); } 4.2) Pengujian Pembaruan Tempat Wisata: /** @test */ public function it_can_update_a_place() { $place = Place::factory()->create(); $place->update([ 'name' => 'Updated Place Name' ]); $this->assertEquals('Updated Place Name', $place->name); $this->assertDatabaseHas('places', ['name' => 'Updated Place Name']); } 4.3) Pengujian Penghapusan Tempat Wisata: /** @test */ public function it_can_delete_a_place() { $place = Place::factory()->create(); $place->delete(); $this->assertSoftDeleted('places', ['id' => $place->id]); } 4.4) Pengujian Pengambilan Semua Tempat Wisata: /** @test */ public function it_can_list_all_places() { $places = Place::factory()->count(5)->create(); $this->assertCount(5, Place::all()); } 5) Menulis Kode Unit Test untuk Fitur Transaksi Buka file tests/Unit/TransactionTest.php dan tambahkan berbagai skenario pengujian berikut: 5.1) Pengujian Pembuatan Transaksi: /** @test */ public function it_can_create_a_transaction() { $customer = Customer::factory()->create(); $place = Place::factory()->create(); $transaction = Transaction::create([ 'customer_id' => $customer->id, 'place_id' => $place->id, 'quantity' => 2, 'total_price' => 500000, 'transaction_date' => now() ]); $this->assertInstanceOf(Transaction::class, $transaction); $this->assertDatabaseHas('transactions', ['total_price' => 500000]); } 5.2) Pengujian Pembaruan Transaksi: /** @test */ public function it_can_update_a_transaction() { $transaction = Transaction::factory()->create(); $transaction->update([ 'quantity' => 3, 'total_price' => 750000 ]); $this->assertEquals(3, $transaction->quantity); $this->assertDatabaseHas('transactions', ['total_price' => 750000]); } 5.3) Pengujian Penghapusan Transaksi: /** @test */ public function it_can_delete_a_transaction() { $transaction = Transaction::factory()->create(); $transaction->delete(); $this->assertSoftDeleted('transactions', ['id' => $transaction->id]); } 5.4) Pengujian Pengambilan Semua Transaksi: /** @test */ public function it_can_list_all_transactions() { $transactions = Transaction::factory()->count(4)->create(); $this->assertCount(4, Transaction::all()); } 6) Menulis Kode Unit Test untuk Fitur Pelanggan Buka file tests/Unit/CustomerTest.php dan tambahkan berbagai skenario pengujian berikut: 6.1) Pengujian Pembuatan Pelanggan: /** @test */ public function it_can_create_a_customer() { $data = [ 'name' => 'John Doe', 'email' => '[email protected]', 'phone_number' => '081234567890' ]; $customer = Customer::create($data); $this->assertInstanceOf(Customer::class, $customer); $this->assertDatabaseHas('customers', ['email' => '[email protected]']); } 6.2) Pengujian Validasi Data Pelanggan: /** @test */ public function it_requires_email_to_be_unique() { $customer1 = Customer::factory()->create(['email' => ' [email protected]']); $this->expectException(\\\\Illuminate\\\\Database\\\\QueryException::class); $customer2 = Customer::create([ 'name' => 'Jane Doe', 'email' => '[email protected]', 'phone_number' => '081234567891' ]); } 6.3) Pengujian Pembaruan Pelanggan: /** @test */ public function it_can_update_a_customer() { $customer = Customer::factory()->create(); $customer->update([ 'name' => 'Jane Doe' ]); $this->assertEquals('Jane Doe', $customer->name); $this->assertDatabaseHas('customers', ['name' => 'Jane Doe']); } 6.4) Pengujian Penghapusan Pelanggan: /** @test */ public function it_can_delete_a_customer() { $customer = Customer::factory()->create(); $customer->delete(); $this->assertSoftDeleted('customers', ['id' => $customer->id]); } 6.5) Pengujian Pengambilan Semua Pelanggan: /** @test */ public function it_can_list_all_customers() { $customers = Customer::factory()->count(5)->create(); $this->assertCount(5, Customer::all()); } 7) Menulis Kode Unit Test untuk Fitur Voucher Buka file tests/Unit/VoucherTest.php dan tambahkan berbagai skenario pengujian berikut: 7.1) Pengujian Pembuatan Voucher: /** @test */ public function it_can_create_a_voucher() { $data = [ 'code' => 'DISCOUNT50', 'discount_amount' => 50.00, 'valid_until' => now()->addDays(10) ]; $voucher = Voucher::create($data); $this->assertInstanceOf(Voucher::class, $voucher); $this->assertDatabaseHas('vouchers', ['code' => 'DISCOUNT50']); } 7.2) Pengujian Validasi Unik Kode Voucher: /** @test */ public function it_requires_code_to_be_unique() { $voucher1 = Voucher::factory()->create(['code' => 'UNIQUECODE']); $this->expectException(\\\\Illuminate\\\\Database\\\\QueryException::class); $voucher2 = Voucher::create([ 'code' => 'UNIQUECODE', 'discount_amount' => 30.00, 'valid_until' => now()->addDays(5) ]); } 7.3) Pengujian Pembaruan Voucher: /** @test */ public function it_can_update_a_voucher() { $voucher = Voucher::factory()->create(); $voucher->update([ 'discount_amount' => 25.00 ]); $this->assertEquals(25.00, $voucher->discount_amount); $this->assertDatabaseHas('vouchers', ['discount_amount' => 25.00]); } 7.4) Pengujian Penghapusan Voucher: /** @test */ public function it_can_delete_a_voucher() { $voucher = Voucher::factory()->create(); $voucher->delete(); $this->assertSoftDeleted('vouchers', ['id' => $voucher->id]); } 7.5) Pengujian Pengambilan Semua Voucher: /** @test */ public function it_can_list_all_vouchers() { $vouchers = Voucher::factory()->count(4)->create(); $this->assertCount(4, Voucher::all()); } 8) Menjalankan Unit Test Setelah menulis semua kode unit test, jalankan perintah berikut untuk melakukan pengujian: php artisan test --env=testing Laravel akan mengeksekusi semua file test yang ada di direktori tests/Unit dan menampilkan hasil pengujian di terminal. Pastikan semua pengujian lulus tanpa error. Hasil dari menjalankan unit test di terminal untuk proyek Laravel 11 akan terlihat seperti ini: $ php artisan test --env=testing PASS Tests\\\\Unit\\\\CategoryTest ✓ it can create a category ✓ it requires a name to create category ✓ it can update a category ✓ it can delete a category ✓ it can list all categories PASS Tests\\\\Unit\\\\PlaceTest ✓ it can create a place ✓ it can update a place ✓ it can delete a place ✓ it can list all places PASS Tests\\\\Unit\\\\TransactionTest ✓ it can create a transaction ✓ it can update a transaction ✓ it can delete a transaction ✓ it can list all transactions PASS Tests\\\\Unit\\\\CustomerTest ✓ it can create a customer ✓ it requires email to be unique ✓ it can update a customer ✓ it can delete a customer ✓ it can list all customers PASS Tests\\\\Unit\\\\VoucherTest ✓ it can create a voucher ✓ it requires code to be unique ✓ it can update a voucher ✓ it can delete a voucher ✓ it can list all vouchers Tests: 25 passed Assertions: 25 passed Time: 2.38s OK (25 tests, 25 assertions) Penjelasan Output di Terminal: PASS Tests\Unit\CategoryTest: Menunjukkan bahwa semua pengujian untuk kelas CategoryTest telah berhasil.✓ it can create a category: Menunjukkan bahwa pengujian untuk membuat kategori baru telah berhasil.Tests: 25 passed: Menunjukkan jumlah total pengujian yang berhasil dijalankan.Assertions: 25 passed: Menunjukkan jumlah total pernyataan (assertion) yang berhasil dilewati.Time: 2.38s: Menunjukkan total waktu yang diperlukan untuk menjalankan semua pengujian. Hasil ini menunjukkan bahwa semua unit test telah dijalankan dengan sukses, dan fitur-fitur yang diuji berfungsi sesuai dengan yang diharapkan. Penutup dan saran mentor Sebagai penutup, sangat penting untuk mempelajari middleware dan menerapkannya dalam proyek Laravel 11 kita. Middleware memainkan peran penting dalam menangani berbagai logika seperti otentikasi, otorisasi, dan keamanan aplikasi secara efisien. Dengan pemahaman yang kuat tentang middleware, kita bisa membangun aplikasi yang lebih aman dan terstruktur. Untuk yang ingin memperdalam pemahaman tentang middleware atau aspek lainnya dalam Laravel 11, Anda bisa belajar gratis dari mentor expert di BuildWithAngga. Selain itu, ada benefit istimewa berupa bebas tanya kepada mentor seumur hidup yang pastinya akan membantu Anda meningkatkan keterampilan coding lebih cepat dan tepat!

Pada artikel ini, kita akan belajar membuat website perpustakaan online dengan fitur login dan register menggunakan Laravel 11, MySQL 8, dan Breeze. Website ini akan memiliki beberapa fitur utama seperti pencarian buku berdasarkan kategori, melihat detail buku, peminjaman buku (hanya bisa dilakukan setelah login), dan pengelolaan stok buku oleh admin. Fitur Utama Website Perpustakaan Online Beberapa fitur utama yang akan kita bangun dalam proyek ini meliputi: Pencarian buku berdasarkan kategori: Pengguna dapat mencari buku dengan memilih kategori tertentu.Melihat detail buku: Setiap buku akan memiliki halaman detail yang memuat informasi lengkap seperti judul, penulis, deskripsi, dan ketersediaan stok.Peminjaman buku (wajib login): Pengguna yang telah login bisa meminjam buku, sedangkan pengguna yang belum login akan diarahkan ke halaman login.Pengelolaan stok buku: Admin memiliki akses untuk menambah, mengedit, dan menghapus buku serta mengelola stok buku. Instalasi PHP, MySQL, Composer, dan MAMP Sebelum memulai proyek Laravel, ada beberapa perangkat yang perlu diinstal terlebih dahulu. Berikut langkah-langkah untuk menginstalnya: 1. Instalasi PHP Laravel membutuhkan PHP minimal versi 8.0. Untuk memeriksa apakah PHP sudah terinstal di komputer kamu, buka terminal atau command prompt dan ketik: php -v Jika belum ada PHP, kamu bisa mendownload dan menginstal MAMP. MAMP adalah software yang menyediakan lingkungan web development yang sudah termasuk PHP dan MySQL. 2. Instalasi MySQL MySQL adalah database yang akan kita gunakan untuk menyimpan data buku, pengguna, dan peminjaman. Setelah MAMP terinstal, MySQL biasanya sudah otomatis terinstal juga. Untuk memeriksa, buka MAMP dan pastikan server MySQL aktif. 3. Instalasi Composer Composer adalah package manager untuk PHP yang akan kita gunakan untuk menginstal Laravel. Untuk menginstal Composer, kunjungi situs resmi Composer dan ikuti instruksi instalasi yang sesuai dengan sistem operasi kamu. Setelah Composer terinstal, periksa instalasinya dengan menjalankan perintah berikut di terminal: composer -v Jika Composer sudah terinstal dengan benar, kamu akan melihat versi Composer yang terpasang. 4. Menginstal MAMP MAMP adalah software yang menyatukan Apache, PHP, dan MySQL dalam satu paket. Untuk menginstalnya: Download MAMP dari situs resmi MAMP.Setelah download selesai, lakukan instalasi seperti software biasa.Jalankan MAMP, dan pastikan server Apache dan MySQL aktif. Dengan menggunakan MAMP, kita tidak perlu mengkonfigurasi MySQL secara manual karena sudah terintegrasi dengan MAMP. Cara Membuat Proyek Laravel dan Menginstal Laravel Breeze Setelah semua perangkat terinstal (PHP, MySQL, Composer, dan MAMP), kita bisa mulai membuat proyek Laravel untuk website perpustakaan online. 1. Membuat Proyek Laravel Untuk membuat proyek Laravel, buka terminal atau command prompt dan jalankan perintah berikut: composer create-project laravel/laravel perpustakaan_online Perintah ini akan mengunduh dan menginstal Laravel versi terbaru. Setelah selesai, masuk ke direktori proyek: cd perpustakaan_online 2. Mengonfigurasi Environment Sebelum melanjutkan, kita harus mengonfigurasi file .env untuk menghubungkan aplikasi ke database. Cari file .env di root direktori proyek, lalu ubah pengaturan berikut sesuai dengan konfigurasi database MySQL yang telah dibuat: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=perpustakaan_db DB_USERNAME=root DB_PASSWORD= 3. Menginstal Laravel Breeze Laravel Breeze digunakan untuk menyediakan sistem otentikasi yang sederhana namun efektif. Untuk menginstal Breeze, jalankan perintah berikut di terminal: composer require laravel/breeze --dev Setelah instalasi selesai, jalankan perintah untuk menginstal file Breeze: php artisan breeze:install Kemudian jalankan migrasi dan npm untuk membangun file frontend: php artisan migrate npm install npm run dev Breeze sekarang telah diinstal dan sistem login/register siap digunakan di website perpustakaan online. Cara Membuat Migration untuk Tabel books, categories, borrowers, loans, dan returns Setelah sistem otentikasi siap, kita akan membuat database untuk menyimpan data buku, kategori, peminjam, pinjaman, dan pengembalian. 1. Membuat Migration Tabel books Untuk membuat migration tabel books, jalankan perintah: php artisan make:migration create_books_table Kemudian, buka file migrasi di direktori database/migrations dan tambahkan skema berikut: Schema::create('books', function (Blueprint $table) { $table->id(); $table->string('title'); $table->string('author'); $table->text('description')->nullable(); $table->integer('stock'); $table->unsignedBigInteger('category_id'); $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade'); $table->timestamps(); }); 2. Membuat Migration Tabel categories Untuk membuat migration tabel categories, jalankan perintah: php artisan make:migration create_categories_table Kemudian tambahkan skema berikut: Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); 3. Membuat Migration Tabel borrowers Jalankan perintah berikut untuk membuat migration tabel borrowers: php artisan make:migration create_borrowers_table Tambahkan skema berikut: Schema::create('borrowers', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('user_id'); $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade'); $table->timestamps(); }); 4. Membuat Migration Tabel loans Untuk membuat tabel loans, jalankan perintah: php artisan make:migration create_loans_table Kemudian tambahkan skema: Schema::create('loans', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('book_id'); $table->unsignedBigInteger('borrower_id'); $table->date('loan_date'); $table->date('return_date')->nullable(); $table->foreign('book_id')->references('id')->on('books')->onDelete('cascade'); $table->foreign('borrower_id')->references('id')->on('borrowers')->onDelete('cascade'); $table->timestamps(); }); 5. Membuat Migration Tabel returns Untuk membuat tabel returns, jalankan perintah: php artisan make:migration create_returns_table Tambahkan skema berikut: Schema::create('returns', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('loan_id'); $table->date('returned_at'); $table->foreign('loan_id')->references('id')->on('loans')->onDelete('cascade'); $table->timestamps(); }); Cara Membuat Model dengan Fillable Mass Assignment dan ORM Relationships Setelah membuat migration, kita akan membuat model yang mewakili masing-masing tabel dan mengatur fillable serta relasi antar tabel menggunakan ORM (Object-Relational Mapping) di Laravel. 1. Model Book Buat model untuk tabel books dengan perintah: php artisan make:model Book Kemudian tambahkan fillable dan relasi belongsTo dengan Category, serta relasi hasMany dengan Loan: class Book extends Model { protected $fillable = ['title', 'author', 'description', 'stock', 'category_id']; public function category() { return $this->belongsTo(Category::class); } public function loans() { return $this->hasMany(Loan::class); } } 2. Model Category Buat model untuk tabel categories dengan perintah: php artisan make:model Category Tambahkan fillable dan relasi hasMany dengan Book: class Category extends Model { protected $fillable = ['name']; public function books() { return $this->hasMany(Book::class); } } 3. Model Borrower Buat model untuk tabel borrowers dengan perintah: php artisan make:model Borrower Tambahkan fillable dan relasi belongsTo dengan User, serta relasi hasMany dengan Loan: class Borrower extends Model { protected $fillable = ['user_id']; public function user() { return $this->belongsTo(User::class); } public function loans() { return $this->hasMany(Loan::class); } } 4. Model Loan Buat model untuk tabel loans dengan perintah: php artisan make:model Loan Tambahkan fillable dan relasi belongsTo dengan Book dan Borrower, serta relasi hasOne dengan Return: class Loan extends Model { protected $fillable = ['book_id', 'borrower_id', 'loan_date', 'return_date']; public function book() { return $this->belongsTo(Book::class); } public function borrower() { return $this->belongsTo(Borrower::class); } public function return() { return $this->hasOne(ReturnModel::class); } } 5. Model Return Buat model untuk tabel returns dengan perintah: php artisan make:model ReturnModel Tambahkan fillable dan relasi belongsTo dengan Loan: class ReturnModel extends Model { protected $fillable = ['loan_id', 'returned_at']; public function loan() { return $this->belongsTo(Loan::class); } } Dengan langkah-langkah di atas, kita telah membuat model beserta relasi ORM untuk tabel-tabel penting dalam website perpustakaan online. Cara Menginstal Spatie dan Mengatur Role serta Permissions Pada tahap ini, kita akan menggunakan package Spatie Laravel Permission untuk mengelola roles dan permissions dalam proyek website perpustakaan online. Dengan package ini, kita bisa membuat role seperti admin, librarian, dan member, serta menentukan permissions untuk setiap role, misalnya mengelola buku, meminjam buku, dan mengelola anggota. Berikut langkah-langkah instalasi dan pengaturan Spatie Permission. 1. Instalasi Spatie Laravel Permission Langkah pertama adalah menginstal package Spatie Permission. Jalankan perintah berikut di terminal: composer require spatie/laravel-permission Setelah itu, publikasikan konfigurasi dan migration bawaan dari Spatie dengan perintah: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" Perintah ini akan menghasilkan file konfigurasi config/permission.php dan migration untuk tabel roles, permissions, dan model_has_roles. Kemudian jalankan migration untuk membuat tabel yang diperlukan: php artisan migrate 2. Mengatur Model User untuk Role dan Permission Setelah instalasi berhasil, kita perlu menambahkan trait HasRoles ke dalam model User agar model tersebut bisa menggunakan fitur role dan permission. Buka file app/Models/User.php dan tambahkan HasRoles seperti berikut: namespace App\\\\Models; use Illuminate\\\\Foundation\\\\Auth\\\\User as Authenticatable; use Spatie\\\\Permission\\\\Traits\\\\HasRoles; class User extends Authenticatable { use HasRoles; // Properti dan method lainnya... } 3. Membuat Role dan Permission Setelah model siap, kita bisa membuat role seperti admin, librarian, dan member, serta beberapa permission yang terkait. Spatie menyediakan cara mudah untuk membuat role dan permission melalui seeder atau langsung melalui tinker. Pada tutorial ini, kita akan menggunakan seeder. a. Membuat Seeder untuk Role dan Permission Pertama, kita buat seeder untuk menambahkan role dan permission ke dalam database. Jalankan perintah berikut untuk membuat seeder: php artisan make:seeder RolePermissionSeeder Kemudian, buka file seeder yang baru dibuat di direktori database/seeders/RolePermissionSeeder.php dan tambahkan kode berikut untuk membuat role dan permission: use Illuminate\\\\Database\\\\Seeder; use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; class RolePermissionSeeder extends Seeder { public function run() { // Membuat permission Permission::create(['name' => 'manage books']); Permission::create(['name' => 'manage members']); Permission::create(['name' => 'borrow books']); // Membuat role Admin dan memberikan semua permission $admin = Role::create(['name' => 'admin']); $admin->givePermissionTo(Permission::all()); // Membuat role Librarian dan memberikan permission khusus $librarian = Role::create(['name' => 'librarian']); $librarian->givePermissionTo(['manage books', 'manage members']); // Membuat role Member dan memberikan permission peminjaman buku $member = Role::create(['name' => 'member']); $member->givePermissionTo('borrow books'); } } Kode di atas akan membuat permission seperti manage books, manage members, dan borrow books, kemudian menetapkan permission tersebut ke role yang sesuai, yaitu: Admin: memiliki semua permission.Librarian: hanya memiliki permission untuk mengelola buku dan anggota.Member: hanya memiliki permission untuk meminjam buku. b. Menjalankan Seeder Untuk menjalankan seeder dan menambahkan role serta permission ke dalam database, jalankan perintah: php artisan db:seed --class=RolePermissionSeeder 4. Mengelola Role dan Permission di Controller Setelah role dan permission dibuat, kita bisa menggunakannya dalam aplikasi, misalnya untuk membatasi akses ke fitur tertentu berdasarkan role. a. Menambahkan Role ke Pengguna Anda bisa menambahkan role ke pengguna dalam controller atau saat registrasi. Contoh, di controller RegisterController, tambahkan pengguna yang baru terdaftar sebagai member: use App\\\\Models\\\\User; use Spatie\\\\Permission\\\\Models\\\\Role; class RegisterController extends Controller { public function register(Request $request) { // Validasi dan pembuatan user $user = User::create([ 'name' => $request->name, 'email' => $request->email, 'password' => bcrypt($request->password), ]); // Menambahkan role "member" ke user yang baru dibuat $user->assignRole('member'); // Redirect atau respons lainnya } } b. Membatasi Akses Berdasarkan Role Untuk membatasi akses ke halaman atau fitur tertentu, kita bisa menggunakan middleware role atau permission yang disediakan oleh Spatie. Contoh, jika ingin membatasi akses ke halaman pengelolaan buku hanya untuk admin dan librarian, tambahkan middleware di routing: Route::middleware(['role:admin|librarian'])->group(function () { Route::get('/manage-books', [BookController::class, 'index'])->name('manage.books'); }); Atau, jika ingin membatasi berdasarkan permission, misalnya hanya pengguna dengan permission borrow books yang bisa meminjam buku: Route::middleware(['permission:borrow books'])->group(function () { Route::post('/borrow-book', [LoanController::class, 'borrow'])->name('borrow.book'); }); 5. Menampilkan Role dan Permission pada Tampilan Untuk menampilkan role atau permission pada tampilan Blade, kita bisa menggunakan directive bawaan dari Spatie seperti @role atau @can. Contoh, untuk menampilkan menu pengelolaan buku hanya untuk admin dan librarian: @role('admin|librarian') <li><a href="{{ route('manage.books') }}">Manage Books</a></li> @endrole Atau, untuk menampilkan tombol pinjam buku hanya untuk pengguna yang memiliki permission borrow books: @can('borrow books') <button>Pinjam Buku</button> @endcan Cara Membuat Blade Templates untuk CRUD Buku dan Manajemen Peminjaman Menggunakan Tailwind CDN Pada tahap ini, kita akan membuat Blade templates untuk CRUD buku dan manajemen peminjaman di website perpustakaan online. Kita akan menggunakan Tailwind CSS CDN untuk membuat tampilan yang responsif dan modern. 1. Menambahkan Tailwind CSS CDN ke Proyek Laravel Pertama, kita perlu menambahkan Tailwind CSS ke proyek. Buka file resources/views/layouts/app.blade.php dan tambahkan link Tailwind CDN di dalam <head>: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Perpustakaan Online</title> <!-- Tailwind CSS CDN --> <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css>" rel="stylesheet"> </head> <body class="bg-gray-100"> <div class="container mx-auto p-4"> @yield('content') </div> </body> </html> Dengan menambahkan Tailwind CDN, kita sekarang bisa menggunakan utility classes dari Tailwind CSS di dalam template. 2. Membuat Template CRUD Buku Untuk memudahkan pengguna dalam mengelola buku (CRUD), kita akan membuat beberapa tampilan: halaman untuk menampilkan daftar buku, menambahkan buku, mengedit buku, dan menghapus buku. a. Halaman Menampilkan Daftar Buku Buat file resources/views/books/index.blade.php untuk menampilkan daftar buku: @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold mb-4">Daftar Buku</h1> <a href="{{ route('books.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded-md mb-4 inline-block">Tambah Buku</a> <table class="min-w-full bg-white rounded-lg shadow-lg"> <thead> <tr class="w-full bg-gray-200"> <th class="py-2 px-4 text-left">Judul</th> <th class="py-2 px-4 text-left">Penulis</th> <th class="py-2 px-4 text-left">Stok</th> <th class="py-2 px-4 text-left">Aksi</th> </tr> </thead> <tbody> @foreach($books as $book) <tr class="border-b"> <td class="py-2 px-4">{{ $book->title }}</td> <td class="py-2 px-4">{{ $book->author }}</td> <td class="py-2 px-4">{{ $book->stock }}</td> <td class="py-2 px-4"> <a href="{{ route('books.edit', $book->id) }}" class="text-blue-500">Edit</a> <form action="{{ route('books.destroy', $book->id) }}" method="POST" class="inline-block"> @csrf @method('DELETE') <button type="submit" class="text-red-500 ml-2">Hapus</button> </form> </td> </tr> @endforeach </tbody> </table> @endsection Template ini menampilkan tabel yang memuat daftar buku, lengkap dengan aksi edit dan hapus untuk setiap buku. b. Halaman Tambah Buku Buat file resources/views/books/create.blade.php untuk menambahkan buku baru: @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold mb-4">Tambah Buku</h1> <form action="{{ route('books.store') }}" method="POST" class="bg-white p-6 rounded-lg shadow-lg"> @csrf <div class="mb-4"> <label for="title" class="block text-gray-700">Judul Buku:</label> <input type="text" id="title" name="title" class="w-full p-2 border rounded-lg" required> </div> <div class="mb-4"> <label for="author" class="block text-gray-700">Penulis:</label> <input type="text" id="author" name="author" class="w-full p-2 border rounded-lg" required> </div> <div class="mb-4"> <label for="stock" class="block text-gray-700">Stok:</label> <input type="number" id="stock" name="stock" class="w-full p-2 border rounded-lg" required> </div> <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md">Simpan</button> </form> @endsection Formulir ini memungkinkan admin untuk menambahkan informasi buku seperti judul, penulis, dan stok. c. Halaman Edit Buku Buat file resources/views/books/edit.blade.php untuk mengedit buku: @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold mb-4">Edit Buku</h1> <form action="{{ route('books.update', $book->id) }}" method="POST" class="bg-white p-6 rounded-lg shadow-lg"> @csrf @method('PUT') <div class="mb-4"> <label for="title" class="block text-gray-700">Judul Buku:</label> <input type="text" id="title" name="title" class="w-full p-2 border rounded-lg" value="{{ $book->title }}" required> </div> <div class="mb-4"> <label for="author" class="block text-gray-700">Penulis:</label> <input type="text" id="author" name="author" class="w-full p-2 border rounded-lg" value="{{ $book->author }}" required> </div> <div class="mb-4"> <label for="stock" class="block text-gray-700">Stok:</label> <input type="number" id="stock" name="stock" class="w-full p-2 border rounded-lg" value="{{ $book->stock }}" required> </div> <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md">Simpan Perubahan</button> </form> @endsection Form ini menampilkan data buku yang bisa diubah oleh admin atau librarian. 3. Membuat Template Manajemen Peminjaman Setelah template CRUD buku selesai, kita akan membuat template untuk manajemen peminjaman, di mana pengguna yang terdaftar dapat meminjam buku. a. Halaman Peminjaman Buku Buat file resources/views/loans/index.blade.php untuk menampilkan buku yang tersedia untuk dipinjam: @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold mb-4">Daftar Buku yang Tersedia untuk Dipinjam</h1> <table class="min-w-full bg-white rounded-lg shadow-lg"> <thead> <tr class="w-full bg-gray-200"> <th class="py-2 px-4 text-left">Judul</th> <th class="py-2 px-4 text-left">Penulis</th> <th class="py-2 px-4 text-left">Stok</th> <th class="py-2 px-4 text-left">Aksi</th> </tr> </thead> <tbody> @foreach($books as $book) <tr class="border-b"> <td class="py-2 px-4">{{ $book->title }}</td> <td class="py-2 px-4">{{ $book->author }}</td> <td class="py-2 px-4">{{ $book->stock }}</td> <td class="py-2 px-4"> @if($book->stock > 0) <form action="{{ route('loans.borrow', $book->id) }}" method="POST"> @csrf <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded-md">Pinjam Buku</button> </form> @else <span class="text-red-500">Stok Habis</span> @endif </td> </tr> @endforeach </tbody> </table> @endsection Template ini memungkinkan pengguna untuk melihat buku yang tersedia dan melakukan peminjaman jika stok masih ada. Cara Membuat Controller untuk Manajemen Buku, Peminjaman, dan Pengembalian serta Implementasi Role dan Permission Pada bagian ini, kita akan membuat controller untuk manajemen buku, peminjaman buku, dan pengembalian buku. Selain itu, kita akan menerapkan role dan permission yang sudah dibuat menggunakan package Spatie Laravel Permission untuk mengatur akses pengguna berdasarkan hak aksesnya (admin, librarian, dan member). 1. Membuat Controller untuk Manajemen Buku Pertama, kita akan membuat controller untuk manajemen buku yang akan menangani CRUD (Create, Read, Update, Delete) operasi untuk tabel books. a. Membuat BookController Jalankan perintah berikut di terminal untuk membuat controller: php artisan make:controller BookController Setelah controller dibuat, buka file app/Http/Controllers/BookController.php dan tambahkan kode berikut untuk setiap operasi CRUD: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Book; use Illuminate\\\\Http\\\\Request; class BookController extends Controller { // Constructor untuk mengatur middleware public function __construct() { // Hanya admin dan librarian yang bisa mengelola buku $this->middleware('role:admin|librarian'); } // Menampilkan daftar buku public function index() { $books = Book::all(); return view('books.index', compact('books')); } // Menampilkan form tambah buku public function create() { return view('books.create'); } // Menyimpan buku baru ke database public function store(Request $request) { $request->validate([ 'title' => 'required', 'author' => 'required', 'stock' => 'required|integer|min:0', ]); Book::create($request->all()); return redirect()->route('books.index')->with('success', 'Buku berhasil ditambahkan.'); } // Menampilkan form edit buku public function edit(Book $book) { return view('books.edit', compact('book')); } // Mengupdate data buku di database public function update(Request $request, Book $book) { $request->validate([ 'title' => 'required', 'author' => 'required', 'stock' => 'required|integer|min:0', ]); $book->update($request->all()); return redirect()->route('books.index')->with('success', 'Buku berhasil diperbarui.'); } // Menghapus buku dari database public function destroy(Book $book) { $book->delete(); return redirect()->route('books.index')->with('success', 'Buku berhasil dihapus.'); } } Dalam controller ini, kita menggunakan middleware untuk membatasi akses ke fitur manajemen buku hanya untuk pengguna dengan role admin atau librarian. Setiap metode bertanggung jawab atas CRUD operasi (menampilkan, menambah, memperbarui, dan menghapus buku). 2. Membuat Controller untuk Peminjaman Buku Selanjutnya, kita akan membuat controller untuk peminjaman buku yang memungkinkan pengguna member untuk meminjam buku. a. Membuat LoanController Jalankan perintah berikut untuk membuat controller: php artisan make:controller LoanController Setelah controller dibuat, buka file app/Http/Controllers/LoanController.php dan tambahkan kode berikut untuk manajemen peminjaman: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Book; use App\\\\Models\\\\Loan; use Illuminate\\\\Http\\\\Request; use Illuminate\\\\Support\\\\Facades\\\\Auth; class LoanController extends Controller { // Constructor untuk mengatur middleware public function __construct() { // Hanya member yang bisa meminjam buku $this->middleware('role:member'); } // Menampilkan daftar buku yang bisa dipinjam public function index() { $books = Book::where('stock', '>', 0)->get(); return view('loans.index', compact('books')); } // Proses peminjaman buku public function borrow(Request $request, Book $book) { if ($book->stock > 0) { Loan::create([ 'book_id' => $book->id, 'borrower_id' => Auth::user()->id, 'loan_date' => now(), ]); // Kurangi stok buku $book->decrement('stock'); return redirect()->route('loans.index')->with('success', 'Buku berhasil dipinjam.'); } return redirect()->route('loans.index')->with('error', 'Stok buku habis.'); } } Dalam LoanController, kita menggunakan middleware role:member untuk memastikan hanya pengguna dengan role member yang dapat meminjam buku. Metode borrow bertanggung jawab untuk mencatat peminjaman buku dan mengurangi stok buku. 3. Membuat Controller untuk Pengembalian Buku Selanjutnya, kita akan membuat controller untuk pengembalian buku yang memungkinkan admin atau librarian untuk mencatat pengembalian buku oleh member. a. Membuat ReturnController Jalankan perintah berikut untuk membuat controller: php artisan make:controller ReturnController Buka file app/Http/Controllers/ReturnController.php dan tambahkan kode berikut untuk manajemen pengembalian: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Loan; use App\\\\Models\\\\Book; use Illuminate\\\\Http\\\\Request; class ReturnController extends Controller { // Constructor untuk mengatur middleware public function __construct() { // Hanya admin dan librarian yang bisa mengelola pengembalian $this->middleware('role:admin|librarian'); } // Menampilkan daftar buku yang sedang dipinjam public function index() { $loans = Loan::whereNull('return_date')->get(); return view('returns.index', compact('loans')); } // Proses pengembalian buku public function returnBook(Request $request, Loan $loan) { $loan->update([ 'return_date' => now(), ]); // Tambah kembali stok buku $loan->book->increment('stock'); return redirect()->route('returns.index')->with('success', 'Buku berhasil dikembalikan.'); } } Di ReturnController, kita membatasi akses dengan middleware agar hanya admin dan librarian yang bisa mencatat pengembalian buku. Metode returnBook mencatat tanggal pengembalian buku dan mengembalikan stok buku yang dipinjam. 4. Implementasi Role dan Permission dalam Routing Untuk menghubungkan controller dengan Blade templates, kita perlu menambahkan routing yang sesuai di file routes/web.php. Pastikan routing menggunakan middleware role untuk membatasi akses sesuai role pengguna. use App\\\\Http\\\\Controllers\\\\BookController; use App\\\\Http\\\\Controllers\\\\LoanController; use App\\\\Http\\\\Controllers\\\\ReturnController; // Routing untuk manajemen buku (hanya untuk admin dan librarian) Route::middleware(['role:admin|librarian'])->group(function () { Route::resource('books', BookController::class); }); // Routing untuk peminjaman buku (hanya untuk member) Route::middleware(['role:member'])->group(function () { Route::get('loans', [LoanController::class, 'index'])->name('loans.index'); Route::post('loans/{book}/borrow', [LoanController::class, 'borrow'])->name('loans.borrow'); }); // Routing untuk pengembalian buku (hanya untuk admin dan librarian) Route::middleware(['role:admin|librarian'])->group(function () { Route::get('returns', [ReturnController::class, 'index'])->name('returns.index'); Route::post('returns/{loan}/return', [ReturnController::class, 'returnBook'])->name('returns.return'); }); Penutup Dalam tutorial ini, kita telah membangun sebuah website perpustakaan online menggunakan Laravel 11, MySQL 8, Laravel Breeze untuk autentikasi, serta Spatie Laravel Permission untuk mengelola role dan permission pengguna. Website ini dilengkapi dengan fitur CRUD buku, peminjaman buku, dan pengembalian buku, di mana setiap pengguna memiliki akses sesuai dengan peran mereka. Admin memiliki akses penuh untuk mengelola buku, anggota, serta pencatatan peminjaman dan pengembalian buku.Librarian memiliki hak yang mirip dengan admin dalam hal pengelolaan buku dan manajemen peminjaman.Member hanya dapat melakukan pencarian buku dan meminjam buku jika stok tersedia. Dengan pembagian hak akses ini, pengelolaan perpustakaan menjadi lebih efektif dan aman, karena setiap pengguna hanya dapat melakukan tindakan sesuai dengan peran dan tanggung jawab mereka. Pendekatan ini tidak hanya meningkatkan keamanan, tetapi juga memperjelas alur kerja di dalam sistem perpustakaan online. Semoga tutorial ini membantu dalam membangun aplikasi perpustakaan yang efisien dan terstruktur dengan baik! Saran Dari Mentor Laravel terus menjadi pilihan populer di kalangan developer karena framework ini selalu menghadirkan update menarik yang memudahkan proses pengembangan web. Dengan fitur-fitur terbaru seperti sistem otentikasi yang mudah, manajemen role dan permission yang efisien, serta komunitas yang kuat, Laravel membantu developer untuk membangun aplikasi yang aman, scalable, dan cepat. Bagi yang ingin terus memperdalam skill Laravel atau framework lain, pantau terus website Buildwithangga. Mereka sering memberikan update kelas gratis yang berfokus pada studi kasus menarik dan praktis, disertai bimbingan dari mentor berpengalaman. Selain itu, dengan akses kelas seumur hidup, Anda bisa belajar kapan saja dan dari mana saja, memastikan Anda selalu up-to-date dengan perkembangan teknologi terbaru. Terus tingkatkan kemampuan coding Anda bersama Buildwithangga dan raih kesempatan karier yang lebih baik di industri web development!

Pada artikel kali ini, kita akan belajar membuat website sederhana untuk paket pernikahan menggunakan Laravel 11, MySQL 8, dan Breeze untuk fitur register dan login. Website ini akan memiliki fitur pencarian dan pemesanan paket pernikahan berdasarkan kategori yang tersedia, melihat detail paket termasuk bonus-bonus, serta melakukan booking dan pembayaran (hanya bisa diakses jika sudah login). Dalam proses ini, kita juga akan menggunakan Spatie untuk mengelola role dan permission pengguna, sehingga website lebih terstruktur dan aman. Fitur-Fitur Utama yang Akan Dibangun Login dan Register: Memungkinkan pengguna untuk mendaftar dan masuk ke website.Mencari Paket Berdasarkan Kategori: Pengguna bisa mencari paket pernikahan yang sesuai dengan keinginan mereka berdasarkan kategori tertentu.Melihat Detail Paket: Pengguna bisa melihat deskripsi lengkap paket pernikahan, termasuk fasilitas dan bonus yang disediakan.Booking dan Pembayaran: Pengguna dapat memilih paket, melakukan booking, dan membayar setelah login. Sekarang, mari kita mulai dari instalasi alat-alat yang diperlukan seperti PHP, MySQL, Composer, dan MAMP. Menginstall PHP, MySQL, Composer Sebelum mulai membangun aplikasi, pastikan bahwa semua alat yang diperlukan seperti PHP, MySQL, dan Composer sudah terinstal di komputer. Di sini, saya akan menjelaskan langkah-langkah instalasinya secara detail. 1. Install PHP PHP adalah bahasa pemrograman utama yang digunakan oleh Laravel. Untuk menginstall PHP di Windows, unduh PHP dari situs resmi php.net, ekstrak file ke folder pilihan, kemudian tambahkan folder PHP ke PATH di environment variables agar bisa diakses melalui terminal. Setelah itu, cek instalasi dengan mengetik php -v di Command Prompt. Jika menggunakan macOS, instalasi PHP dapat dilakukan dengan menggunakan Homebrew. Jalankan perintah brew install php di terminal dan cek versi PHP dengan mengetik php -v. Untuk pengguna Linux seperti Ubuntu, instal PHP dengan menjalankan perintah sudo apt update diikuti dengan sudo apt install php. Setelah itu, cek instalasi dengan php -v. 2. Install MySQL MySQL digunakan sebagai database untuk menyimpan data pengguna, paket pernikahan, dan transaksi booking. Untuk Windows dan macOS, unduh MySQL dari mysql.com, ikuti langkah-langkah instalasinya, dan pastikan mencatat username serta password root. Untuk Linux, instal MySQL dengan menjalankan sudo apt update diikuti dengan sudo apt install mysql-server. Setelah instalasi selesai, amankan instalasi dengan menjalankan sudo mysql_secure_installation. 3. Install Composer Composer digunakan untuk mengelola dependensi proyek Laravel. Untuk Windows, unduh dan install Composer dari getcomposer.org. Pada macOS dan Linux, instal Composer dengan menjalankan perintah berikut di terminal: curl -sS <https://getcomposer.org/installer> | php sudo mv composer.phar /usr/local/bin/composer Cek instalasi dengan mengetik composer di terminal. 4. Install MAMP (Macintosh, Apache, MySQL, PHP) MAMP adalah perangkat lunak yang menyatukan web server Apache, MySQL, dan PHP ke dalam satu paket instalasi untuk kemudahan pengembangan lokal. Untuk menggunakannya, unduh MAMP dari mamp.info dan instal pada sistem kamu (tersedia untuk macOS dan Windows). Setelah instalasi selesai, jalankan MAMP dan pastikan server Apache dan MySQL berjalan. Kamu bisa mengakses phpMyAdmin dengan mengetik localhost:8888/phpMyAdmin di browser untuk membuat database baru bernama paket_pernikahan yang akan digunakan oleh Laravel. 1. Membuat Proyek Laravel Terbaru Menggunakan Composer Untuk membuat project Laravel terbaru, pastikan Composer sudah terinstall. Buka terminal atau Command Prompt dan jalankan perintah berikut untuk membuat project Laravel: composer create-project --prefer-dist laravel/laravel wedding-package Setelah project dibuat, masuk ke direktori proyek dengan menjalankan perintah: cd wedding-package Menginstall Laravel Breeze Laravel Breeze menyediakan scaffolding sederhana untuk fitur register dan login. Untuk menginstall Laravel Breeze, jalankan perintah berikut: composer require laravel/breeze --dev Selanjutnya, install Breeze dengan menjalankan perintah: php artisan breeze:install Lanjutkan dengan menginstall dependensi front-end menggunakan perintah: npm install && npm run dev Terakhir, jalankan migrasi untuk membuat tabel pengguna di database: php artisan migrate Dengan langkah-langkah ini, fitur login dan register pada website sudah siap digunakan. 2. Membuat File Migration untuk Database Selanjutnya, kita akan membuat beberapa tabel seperti categories, wedding_packages, wedding_package_bonuses, transactions, dan wedding_package_testimonials. 1. Migration untuk Tabel Categories Jalankan perintah berikut untuk membuat migration: php artisan make:migration create_categories_table Kemudian, buka file migration tersebut dan tambahkan kode berikut: public function up() { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); } 2. Migration untuk Tabel Wedding Packages Buat migration untuk wedding packages: php artisan make:migration create_wedding_packages_table Tambahkan kode berikut di dalam file migration: public function up() { Schema::create('wedding_packages', function (Blueprint $table) { $table->id(); $table->string('name'); $table->decimal('price', 10, 2); $table->text('description'); $table->foreignId('category_id')->constrained('categories')->onDelete('cascade'); $table->timestamps(); }); } 3. Migration untuk Tabel Wedding Package Bonuses Buat migration untuk bonus-bonus paket: php artisan make:migration create_wedding_package_bonuses_table Tambahkan kode berikut: public function up() { Schema::create('wedding_package_bonuses', function (Blueprint $table) { $table->id(); $table->string('bonus_name'); $table->foreignId('wedding_package_id')->constrained('wedding_packages')->onDelete('cascade'); $table->timestamps(); }); } 4. Migration untuk Tabel Transactions Buat migration untuk transaksi: php artisan make:migration create_transactions_table Tambahkan kode berikut: public function up() { Schema::create('transactions', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->constrained()->onDelete('cascade'); $table->foreignId('wedding_package_id')->constrained('wedding_packages')->onDelete('cascade'); $table->decimal('total_price', 10, 2); $table->timestamps(); }); } 5. Migration untuk Tabel Wedding Package Testimonials Buat migration untuk testimoni paket pernikahan: php artisan make:migration create_wedding_package_testimonials_table Tambahkan kode berikut: public function up() { Schema::create('wedding_package_testimonials', function (Blueprint $table) { $table->id(); $table->text('testimonial'); $table->foreignId('wedding_package_id')->constrained('wedding_packages')->onDelete('cascade'); $table->timestamps(); }); } Setelah membuat semua migration, jalankan perintah berikut untuk membuat tabel di database: php artisan migrate 3. Membuat Model dan Mengatur ORM Relationship Sekarang kita akan membuat model untuk setiap tabel dan mengatur fillable serta hubungan antar tabel. 1. Model Category Jalankan perintah berikut: php artisan make:model Category Di dalam file Category.php, tambahkan properti fillable dan relasi ORM: class Category extends Model { protected $fillable = ['name']; public function weddingPackages() { return $this->hasMany(WeddingPackage::class); } } 2. Model Wedding Package Buat model untuk wedding_packages: php artisan make:model WeddingPackage Tambahkan fillable dan relasi di WeddingPackage.php: class WeddingPackage extends Model { protected $fillable = ['name', 'price', 'description', 'category_id']; public function category() { return $this->belongsTo(Category::class); } public function bonuses() { return $this->hasMany(WeddingPackageBonus::class); } public function testimonials() { return $this->hasMany(WeddingPackageTestimonial::class); } } 3. Model Wedding Package Bonus Buat model untuk bonus paket: php artisan make:model WeddingPackageBonus Tambahkan relasi di dalam file WeddingPackageBonus.php: class WeddingPackageBonus extends Model { protected $fillable = ['bonus_name', 'wedding_package_id']; public function weddingPackage() { return $this->belongsTo(WeddingPackage::class); } } 4. Model Transaction Buat model untuk transaksi: php artisan make:model Transaction Tambahkan relasi di Transaction.php: class Transaction extends Model { protected $fillable = ['user_id', 'wedding_package_id', 'total_price']; public function weddingPackage() { return $this->belongsTo(WeddingPackage::class); } public function user() { return $this->belongsTo(User::class); } } 5. Model Wedding Package Testimonial Buat model untuk testimoni paket: php artisan make:model WeddingPackageTestimonial Tambahkan relasi di dalam file WeddingPackageTestimonial.php: class WeddingPackageTestimonial extends Model { protected $fillable = ['testimonial', 'wedding_package_id']; public function weddingPackage() { return $this->belongsTo(WeddingPackage::class); } } 4. Menginstall Spatie dan Mengelola Role serta Permission Spatie digunakan untuk mengatur role dan permission pada website. Untuk menginstall package Spatie, ikuti langkah berikut: Install Package Spatie Install Spatie dengan perintah: composer require spatie/laravel-permission Publikasikan file konfigurasi dan migration: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" php artisan migrate Membuat Seeder Role dan Permission Buat seeder untuk role dan permission: php artisan make:seeder RolesAndPermissionsSeeder Tambahkan kode berikut di dalam seeder: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; class RolesAndPermissionsSeeder extends Seeder { public function run() { $admin = Role::create(['name' => 'admin']); $user = Role::create(['name' => 'user']); Permission::create(['name' => 'manage packages']); Permission::create(['name' => 'book packages']); $admin->givePermissionTo('manage packages'); $user->givePermissionTo('book packages'); } } Jalankan seeder: php artisan db:seed --class=RolesAndPermissionsSeeder Membuat Akun Admin dan Assign Role Admin Untuk membuat akun admin, jalankan perintah berikut di tinker: php artisan tinker Buat user dan assign role: $user = User::create([ 'name' => 'Admin', 'email' => '[email protected]', 'password' => bcrypt('password'), ]); $user->assignRole('admin'); 5. Mengatur Routing Berdasarkan Role dan Permission Tambahkan middleware untuk memeriksa role dan permission di route file web.php: use App\\\\Http\\\\Controllers\\\\WeddingPackageController; Route::group(['middleware' => ['role:admin']], function () { Route::resource('wedding-packages', WeddingPackageController::class); }); Route::group(['middleware' => ['role:user']], function () { Route::get('wedding-packages/{id}', [WeddingPackageController::class, 'show']); Route::post('wedding-packages/book', [WeddingPackageController::class, 'book']); }); Dengan ini, rute wedding-packages hanya bisa diakses oleh admin untuk pengelolaan paket, sedangkan user bisa melihat dan memesan paket. Membuat File Blade untuk CRUD Wedding Packages Menggunakan Tailwind CDN CSS Pada bagian ini, kita akan membuat beberapa file Blade yang digunakan untuk fitur CRUD (Create, Read, Update, Delete) pada tabel Wedding Packages. Semua tampilan ini akan menggunakan Tailwind CSS CDN untuk mempermudah styling. 1. Tambahkan Tailwind CDN ke Layout Utama Pertama, kita perlu menambahkan Tailwind CSS ke dalam layout utama proyek Laravel. Buka atau buat file resources/views/layouts/app.blade.php dan tambahkan CDN Tailwind di bagian <head>: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wedding Packages</title> <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css>" rel="stylesheet"> </head> <body class="bg-gray-100"> <div class="container mx-auto px-4"> @yield('content') </div> </body> </html> Dengan ini, Tailwind CSS siap digunakan di seluruh tampilan website. 2. Membuat Halaman Index (Daftar Wedding Packages) Selanjutnya, kita akan membuat file Blade untuk menampilkan daftar wedding packages. Buat file resources/views/wedding_packages/index.blade.php. @extends('layouts.app') @section('content') <div class="flex justify-between items-center my-4"> <h1 class="text-2xl font-bold">Wedding Packages</h1> <a href="{{ route('wedding-packages.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add New Package</a> </div> <table class="min-w-full bg-white border"> <thead> <tr class="bg-gray-200"> <th class="py-2 px-4 border">Name</th> <th class="py-2 px-4 border">Price</th> <th class="py-2 px-4 border">Category</th> <th class="py-2 px-4 border">Actions</th> </tr> </thead> <tbody> @foreach ($weddingPackages as $package) <tr> <td class="py-2 px-4 border">{{ $package->name }}</td> <td class="py-2 px-4 border">{{ $package->price }}</td> <td class="py-2 px-4 border">{{ $package->category->name }}</td> <td class="py-2 px-4 border"> <a href="{{ route('wedding-packages.edit', $package->id) }}" class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-3 rounded">Edit</a> <form action="{{ route('wedding-packages.destroy', $package->id) }}" method="POST" class="inline-block"> @csrf @method('DELETE') <button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded">Delete</button> </form> </td> </tr> @endforeach </tbody> </table> @endsection 3. Membuat Halaman Create (Menambahkan Wedding Package) Buat file resources/views/wedding_packages/create.blade.php untuk menampilkan form menambah paket pernikahan. @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold my-4">Add New Wedding Package</h1> <form action="{{ route('wedding-packages.store') }}" method="POST" class="bg-white p-6 rounded-lg shadow-md"> @csrf <div class="mb-4"> <label class="block text-gray-700">Name:</label> <input type="text" name="name" class="w-full px-3 py-2 border rounded-lg" required> </div> <div class="mb-4"> <label class="block text-gray-700">Price:</label> <input type="text" name="price" class="w-full px-3 py-2 border rounded-lg" required> </div> <div class="mb-4"> <label class="block text-gray-700">Category:</label> <select name="category_id" class="w-full px-3 py-2 border rounded-lg"> @foreach ($categories as $category) <option value="{{ $category->id }}">{{ $category->name }}</option> @endforeach </select> </div> <div class="mb-4"> <label class="block text-gray-700">Description:</label> <textarea name="description" class="w-full px-3 py-2 border rounded-lg" required></textarea> </div> <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Save Package</button> </form> @endsection 4. Membuat Halaman Edit (Mengedit Wedding Package) Untuk halaman edit, buat file resources/views/wedding_packages/edit.blade.php yang serupa dengan form create, tetapi dengan data paket pernikahan yang telah ada. @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold my-4">Edit Wedding Package</h1> <form action="{{ route('wedding-packages.update', $package->id) }}" method="POST" class="bg-white p-6 rounded-lg shadow-md"> @csrf @method('PUT') <div class="mb-4"> <label class="block text-gray-700">Name:</label> <input type="text" name="name" value="{{ $package->name }}" class="w-full px-3 py-2 border rounded-lg" required> </div> <div class="mb-4"> <label class="block text-gray-700">Price:</label> <input type="text" name="price" value="{{ $package->price }}" class="w-full px-3 py-2 border rounded-lg" required> </div> <div class="mb-4"> <label class="block text-gray-700">Category:</label> <select name="category_id" class="w-full px-3 py-2 border rounded-lg"> @foreach ($categories as $category) <option value="{{ $category->id }}" {{ $package->category_id == $category->id ? 'selected' : '' }}>{{ $category->name }}</option> @endforeach </select> </div> <div class="mb-4"> <label class="block text-gray-700">Description:</label> <textarea name="description" class="w-full px-3 py-2 border rounded-lg" required>{{ $package->description }}</textarea> </div> <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Update Package</button> </form> @endsection Membuat File Blade untuk CRUD Wedding Testimonials, Transactions, dan Bonuses Menggunakan Tailwind CDN CSS Pada bagian ini, kita akan membuat beberapa file Blade untuk mengelola testimoni paket pernikahan, transaksi, dan bonus paket pernikahan. Sama seperti sebelumnya, kita akan menggunakan Tailwind CSS CDN untuk styling halaman. 1. Membuat File Blade untuk CRUD Wedding Testimonials a. Membuat Halaman Index (Daftar Testimoni) Buat file resources/views/wedding_testimonials/index.blade.php untuk menampilkan daftar testimoni. @extends('layouts.app') @section('content') <div class="flex justify-between items-center my-4"> <h1 class="text-2xl font-bold">Wedding Testimonials</h1> <a href="{{ route('wedding-testimonials.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add New Testimonial</a> </div> <table class="min-w-full bg-white border"> <thead> <tr class="bg-gray-200"> <th class="py-2 px-4 border">Testimonial</th> <th class="py-2 px-4 border">Package</th> <th class="py-2 px-4 border">Actions</th> </tr> </thead> <tbody> @foreach ($testimonials as $testimonial) <tr> <td class="py-2 px-4 border">{{ $testimonial->testimonial }}</td> <td class="py-2 px-4 border">{{ $testimonial->weddingPackage->name }}</td> <td class="py-2 px-4 border"> <a href="{{ route('wedding-testimonials.edit', $testimonial->id) }}" class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-3 rounded">Edit</a> <form action="{{ route('wedding-testimonials.destroy', $testimonial->id) }}" method="POST" class="inline-block"> @csrf @method('DELETE') <button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded">Delete</button> </form> </td> </tr> @endforeach </tbody> </table> @endsection b. Membuat Halaman Create (Menambahkan Testimoni) Buat file resources/views/wedding_testimonials/create.blade.php untuk menambahkan testimoni baru. @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold my-4">Add New Wedding Testimonial</h1> <form action="{{ route('wedding-testimonials.store') }}" method="POST" class="bg-white p-6 rounded-lg shadow-md"> @csrf <div class="mb-4"> <label class="block text-gray-700">Testimonial:</label> <textarea name="testimonial" class="w-full px-3 py-2 border rounded-lg" required></textarea> </div> <div class="mb-4"> <label class="block text-gray-700">Wedding Package:</label> <select name="wedding_package_id" class="w-full px-3 py-2 border rounded-lg"> @foreach ($weddingPackages as $package) <option value="{{ $package->id }}">{{ $package->name }}</option> @endforeach </select> </div> <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Save Testimonial</button> </form> @endsection c. Membuat Halaman Edit (Mengedit Testimoni) Buat file resources/views/wedding_testimonials/edit.blade.php untuk mengedit testimoni. @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold my-4">Edit Wedding Testimonial</h1> <form action="{{ route('wedding-testimonials.update', $testimonial->id) }}" method="POST" class="bg-white p-6 rounded-lg shadow-md"> @csrf @method('PUT') <div class="mb-4"> <label class="block text-gray-700">Testimonial:</label> <textarea name="testimonial" class="w-full px-3 py-2 border rounded-lg" required>{{ $testimonial->testimonial }}</textarea> </div> <div class="mb-4"> <label class="block text-gray-700">Wedding Package:</label> <select name="wedding_package_id" class="w-full px-3 py-2 border rounded-lg"> @foreach ($weddingPackages as $package) <option value="{{ $package->id }}" {{ $testimonial->wedding_package_id == $package->id ? 'selected' : '' }}>{{ $package->name }}</option> @endforeach </select> </div> <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Update Testimonial</button> </form> @endsection 2. Membuat File Blade untuk CRUD Transactions a. Membuat Halaman Index (Daftar Transaksi) Buat file resources/views/transactions/index.blade.php untuk menampilkan daftar transaksi. @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold my-4">Transactions</h1> <table class="min-w-full bg-white border"> <thead> <tr class="bg-gray-200"> <th class="py-2 px-4 border">User</th> <th class="py-2 px-4 border">Wedding Package</th> <th class="py-2 px-4 border">Total Price</th> <th class="py-2 px-4 border">Actions</th> </tr> </thead> <tbody> @foreach ($transactions as $transaction) <tr> <td class="py-2 px-4 border">{{ $transaction->user->name }}</td> <td class="py-2 px-4 border">{{ $transaction->weddingPackage->name }}</td> <td class="py-2 px-4 border">{{ $transaction->total_price }}</td> <td class="py-2 px-4 border"> <a href="{{ route('transactions.show', $transaction->id) }}" class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 rounded">View</a> </td> </tr> @endforeach </tbody> </table> @endsection b. Membuat Halaman Detail (Menampilkan Detail Transaksi) Buat file resources/views/transactions/show.blade.php untuk menampilkan detail transaksi. @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold my-4">Transaction Details</h1> <div class="bg-white p-6 rounded-lg shadow-md"> <p class="mb-4"><strong>User:</strong> {{ $transaction->user->name }}</p> <p class="mb-4"><strong>Wedding Package:</strong> {{ $transaction->weddingPackage->name }}</p> <p class="mb-4"><strong>Total Price:</strong> {{ $transaction->total_price }}</p> </div> @endsection 3. Membuat File Blade untuk CRUD Wedding Package Bonuses a. Membuat Halaman Index (Daftar Bonus) Buat file resources/views/wedding_bonuses/index.blade.php untuk menampilkan daftar bonus. @extends('layouts.app') @section('content') <div class="flex justify-between items-center my-4"> <h1 class="text-2xl font-bold">Wedding Package Bonuses</h1> <a href="{{ route('wedding-bonuses.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add New Bonus</a> </div> <table class="min-w-full bg-white border"> <thead> <tr class="bg-gray-200"> <th class="py-2 px-4 border">Bonus Name</th> <th class="py-2 px-4 border">Package</th> <th class="py-2 px-4 border">Actions</th> </tr> </thead> <tbody> @foreach ($bonuses as $bonus) <tr> <td class="py-2 px-4 border">{{ $bonus->bonus_name }}</td> <td class="py-2 px-4 border">{{ $bonus->weddingPackage->name }}</td> <td class="py-2 px-4 border"> <a href="{{ route('wedding-bonuses.edit', $bonus->id) }}" class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-3 rounded">Edit</a> <form action="{{ route('wedding-bonuses.destroy', $bonus->id) }}" method="POST" class="inline-block"> @csrf @method('DELETE') <button type="submit" class="bg-red -500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded">Delete</button> </form> </td> </tr> @endforeach </tbody> </table> @endsection b. Membuat Halaman Create (Menambahkan Bonus) Buat file resources/views/wedding_bonuses/create.blade.php untuk menambahkan bonus baru. @extends('layouts.app') @section('content') <h1 class="text-2xl font-bold my-4">Add New Wedding Package Bonus</h1> <form action="{{ route('wedding-bonuses.store') }}" method="POST" class="bg-white p-6 rounded-lg shadow-md"> @csrf <div class="mb-4"> <label class="block text-gray-700">Bonus Name:</label> <input type="text" name="bonus_name" class="w-full px-3 py-2 border rounded-lg" required> </div> <div class="mb-4"> <label class="block text-gray-700">Wedding Package:</label> <select name="wedding_package_id" class="w-full px-3 py-2 border rounded-lg"> @foreach ($weddingPackages as $package) <option value="{{ $package->id }}">{{ $package->name }}</option> @endforeach </select> </div> <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Save Bonus</button> </form> @endsection Dengan ini, kita sudah membuat beberapa file Blade untuk mengelola Wedding Testimonials, Transactions, dan Bonuses dengan menggunakan Tailwind CSS CDN. Setiap halaman memiliki tampilan yang responsif dan mudah dipahami. Membuat Controller untuk Business Logic CRUD dengan Implementasi Role dan Permission pada Wedding Testimonials, Transactions, dan Bonuses Dalam tutorial ini, kita akan membuat controller untuk Wedding Testimonials, Transactions, dan Wedding Bonuses, sekaligus menerapkan role dan permission menggunakan Spatie Laravel Permission untuk mengatur siapa yang memiliki akses ke berbagai operasi CRUD (Create, Read, Update, Delete). Ini memastikan bahwa hanya pengguna dengan izin tertentu yang dapat melakukan tindakan pada data tersebut. Berikut adalah langkah-langkahnya: 1. Membuat Controller untuk Wedding Testimonials Buat controller untuk Wedding Testimonials menggunakan artisan command: php artisan make:controller WeddingTestimonialController --resource Logika CRUD di WeddingTestimonialController Tambahkan logika CRUD berikut di app/Http/Controllers/WeddingTestimonialController.php, dan tambahkan middleware untuk role dan permission di setiap aksi: <?php namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\WeddingTestimonial; use App\\\\Models\\\\WeddingPackage; use Illuminate\\\\Http\\\\Request; class WeddingTestimonialController extends Controller { public function __construct() { // Hanya admin yang dapat mengelola CRUD testimonial $this->middleware('role:admin')->except(['index']); $this->middleware('permission:view testimonials')->only('index'); $this->middleware('permission:create testimonials')->only(['create', 'store']); $this->middleware('permission:edit testimonials')->only(['edit', 'update']); $this->middleware('permission:delete testimonials')->only('destroy'); } public function index() { $testimonials = WeddingTestimonial::with('weddingPackage')->get(); return view('wedding_testimonials.index', compact('testimonials')); } public function create() { $weddingPackages = WeddingPackage::all(); return view('wedding_testimonials.create', compact('weddingPackages')); } public function store(Request $request) { $request->validate([ 'testimonial' => 'required', 'wedding_package_id' => 'required|exists:wedding_packages,id', ]); WeddingTestimonial::create($request->all()); return redirect()->route('wedding-testimonials.index')->with('success', 'Testimonial created successfully.'); } public function edit(WeddingTestimonial $testimonial) { $weddingPackages = WeddingPackage::all(); return view('wedding_testimonials.edit', compact('testimonial', 'weddingPackages')); } public function update(Request $request, WeddingTestimonial $testimonial) { $request->validate([ 'testimonial' => 'required', 'wedding_package_id' => 'required|exists:wedding_packages,id', ]); $testimonial->update($request->all()); return redirect()->route('wedding-testimonials.index')->with('success', 'Testimonial updated successfully.'); } public function destroy(WeddingTestimonial $testimonial) { $testimonial->delete(); return redirect()->route('wedding-testimonials.index')->with('success', 'Testimonial deleted successfully.'); } } 2. Membuat Controller untuk Transactions Buat controller untuk Transactions: php artisan make:controller TransactionController --resource Logika CRUD di TransactionController Tambahkan logika berikut di app/Http/Controllers/TransactionController.php dengan middleware untuk role dan permission: <?php namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Transaction; use App\\\\Models\\\\User; use App\\\\Models\\\\WeddingPackage; use Illuminate\\\\Http\\\\Request; class TransactionController extends Controller { public function __construct() { // Hanya admin yang dapat mengelola transaksi $this->middleware('role:admin')->except(['index', 'show']); $this->middleware('permission:view transactions')->only(['index', 'show']); $this->middleware('permission:create transactions')->only(['create', 'store']); $this->middleware('permission:edit transactions')->only(['edit', 'update']); $this->middleware('permission:delete transactions')->only('destroy'); } public function index() { $transactions = Transaction::with(['user', 'weddingPackage'])->get(); return view('transactions.index', compact('transactions')); } public function show(Transaction $transaction) { return view('transactions.show', compact('transaction')); } public function create() { $users = User::all(); $weddingPackages = WeddingPackage::all(); return view('transactions.create', compact('users', 'weddingPackages')); } public function store(Request $request) { $request->validate([ 'user_id' => 'required|exists:users,id', 'wedding_package_id' => 'required|exists:wedding_packages,id', 'total_price' => 'required|numeric', ]); Transaction::create($request->all()); return redirect()->route('transactions.index')->with('success', 'Transaction created successfully.'); } public function edit(Transaction $transaction) { $users = User::all(); $weddingPackages = WeddingPackage::all(); return view('transactions.edit', compact('transaction', 'users', 'weddingPackages')); } public function update(Request $request, Transaction $transaction) { $request->validate([ 'user_id' => 'required|exists:users,id', 'wedding_package_id' => 'required|exists:wedding_packages,id', 'total_price' => 'required|numeric', ]); $transaction->update($request->all()); return redirect()->route('transactions.index')->with('success', 'Transaction updated successfully.'); } public function destroy(Transaction $transaction) { $transaction->delete(); return redirect()->route('transactions.index')->with('success', 'Transaction deleted successfully.'); } } 3. Membuat Controller untuk Wedding Package Bonuses Buat controller untuk Wedding Package Bonuses: php artisan make:controller WeddingPackageBonusController --resource Logika CRUD di WeddingPackageBonusController Tambahkan logika berikut di app/Http/Controllers/WeddingPackageBonusController.php dengan middleware untuk role dan permission: <?php namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\WeddingPackageBonus; use App\\\\Models\\\\WeddingPackage; use Illuminate\\\\Http\\\\Request; class WeddingPackageBonusController extends Controller { public function __construct() { // Hanya admin yang dapat mengelola bonus $this->middleware('role:admin')->except(['index']); $this->middleware('permission:view bonuses')->only('index'); $this->middleware('permission:create bonuses')->only(['create', 'store']); $this->middleware('permission:edit bonuses')->only(['edit', 'update']); $this->middleware('permission:delete bonuses')->only('destroy'); } public function index() { $bonuses = WeddingPackageBonus::with('weddingPackage')->get(); return view('wedding_bonuses.index', compact('bonuses')); } public function create() { $weddingPackages = WeddingPackage::all(); return view('wedding_bonuses.create', compact('weddingPackages')); } public function store(Request $request) { $request->validate([ 'bonus_name' => 'required', 'wedding_package_id' => 'required|exists:wedding_packages,id', ]); WeddingPackageBonus::create($request->all()); return redirect()->route('wedding-bonuses.index')->with('success', 'Bonus created successfully.'); } public function edit(WeddingPackageBonus $bonus) { $weddingPackages = WeddingPackage::all(); return view('wedding_bonuses.edit', compact('bonus', 'weddingPackages')); } public function update(Request $request, WeddingPackageBonus $bonus) { $request->validate([ 'bonus_name' => 'required', 'wedding_package_id' => 'required|exists:wedding_packages,id', ]); $bonus->update($request->all()); return redirect()->route('wedding-bonuses.index')->with('success', 'Bonus updated successfully.'); } public function destroy(WeddingPackageBonus $bonus) { $bonus->delete(); return redirect()->route('wedding-bonuses.index')->with('success', 'Bonus deleted successfully.'); } } 4. Mengatur Routing dengan Role dan Permission Tambahkan routing untuk setiap resource di routes/web.php dan pastikan hanya pengguna dengan izin yang tepat yang dapat mengakses rute tertentu: use App\\\\Http\\\\Controllers\\\\WeddingTestimonialController; use App\\\\Http\\\\Controllers\\\\TransactionController; use App\\\\Http\\\\Controllers\\\\WeddingPackageBonusController; Route::middleware(['auth'])->group(function () { // Wedding Testimonials Route::resource('wedding-testimonials', WeddingTestimonialController::class); // Transactions Route::resource('transactions', TransactionController::class); // Wedding Package Bonuses Route::resource('wedding-bonuses', WeddingPackageBonusController::class); }); Di atas, kita menggunakan middleware 'auth' untuk memastikan semua rute hanya bisa diakses oleh pengguna yang sudah login. Setiap controller telah diatur dengan middleware 'role' dan 'permission' untuk mengatur akses sesuai dengan role dan permission yang telah didefinisikan. 5. Mengatur Role dan Permission dengan Spatie Pastikan kamu telah menambahkan permission yang relevan untuk setiap resource . Contoh: use Spatie\\\\Permission\\\\Models\\\\Permission; use Spatie\\\\Permission\\\\Models\\\\Role; // Buat permission dan role $admin = Role::create(['name' => 'admin']); Permission::create(['name' => 'view testimonials']); Permission::create(['name' => 'create testimonials']); Permission::create(['name' => 'edit testimonials']); Permission::create(['name' => 'delete testimonials']); Permission::create(['name' => 'view transactions']); Permission::create(['name' => 'create transactions']); Permission::create(['name' => 'edit transactions']); Permission::create(['name' => 'delete transactions']); Permission::create(['name' => 'view bonuses']); Permission::create(['name' => 'create bonuses']); Permission::create(['name' => 'edit bonuses']); Permission::create(['name' => 'delete bonuses']); // Assign permission ke role $admin->givePermissionTo(Permission::all()); Penutup Dengan mengikuti tutorial ini, kita telah berhasil membangun aplikasi sederhana untuk mengelola Wedding Testimonials, Transactions, dan Bonuses pada sebuah proyek website paket pernikahan. Tidak hanya membahas logika CRUD (Create, Read, Update, Delete), kita juga telah mengimplementasikan role dan permission menggunakan Spatie Laravel Permission. Dengan ini, kita bisa memastikan bahwa setiap pengguna hanya bisa melakukan aksi sesuai dengan hak akses yang dimilikinya. Langkah-langkah ini memberikan pondasi yang kuat dalam membangun aplikasi web yang aman dan terstruktur. 10 Summary yang Telah Dipelajari Membuat Proyek Laravel: Kita belajar cara membuat proyek Laravel baru menggunakan Composer, serta bagaimana menginstal Laravel Breeze untuk fitur autentikasi dasar seperti login dan register.Membuat File Blade dengan Tailwind CSS: Kita mempelajari cara membuat tampilan untuk fitur CRUD menggunakan Blade dan Tailwind CDN, yang membuat proses styling lebih cepat dan mudah.Membuat Model dan Migration: Kita membuat beberapa file migration untuk tabel wedding testimonials, transactions, dan wedding bonuses, serta menghubungkannya melalui ORM (Object-Relational Mapping) dengan Eloquent di Laravel.Membuat CRUD untuk Testimonials: Kita belajar membuat controller WeddingTestimonialController untuk mengelola testimonial dengan fitur CRUD penuh, serta menampilkan data dengan Blade.Membuat CRUD untuk Transactions: Kita membangun logika CRUD pada transaksi paket pernikahan, termasuk menampilkan daftar transaksi dan detail transaksi setiap user.Membuat CRUD untuk Bonuses: Kita juga belajar membuat fitur CRUD untuk bonus paket pernikahan, yang memungkinkan admin menambah, mengedit, dan menghapus bonus-bonus yang ada.Menggunakan Spatie Laravel Permission: Kita mengimplementasikan role dan permission menggunakan package Spatie untuk mengatur hak akses pengguna pada setiap operasi CRUD, memastikan hanya pengguna yang memiliki izin yang tepat yang bisa mengakses fitur tertentu.Mengatur Middleware untuk Role dan Permission: Kita belajar menggunakan middleware untuk mengontrol akses ke rute dan aksi tertentu berdasarkan role dan permission yang sudah ditentukan.Menyusun Routing dengan Role dan Permission: Kita menyusun rute untuk setiap resource (testimonials, transactions, bonuses) dan memastikan hanya pengguna yang sudah login dan memiliki izin yang dapat mengakses rute-rute tersebut.Penerapan Validasi Data: Kita menerapkan validasi pada setiap operasi store dan update untuk memastikan data yang dimasukkan oleh pengguna valid sebelum disimpan ke database. Penutup Laravel akan terus menjadi salah satu framework paling populer di kalangan developer karena terus menghadirkan pembaruan dan fitur-fitur menarik yang memudahkan pengembangan aplikasi web. Dengan ekosistem yang kaya, dokumentasi yang lengkap, dan komunitas yang aktif, Laravel memberikan pengalaman pengembangan yang efisien dan menyenangkan bagi developer di berbagai tingkatan. Pantau terus website BuildWithAngga karena mereka sering mengadakan pembaruan kelas-kelas gratis dengan studi kasus menarik. Selain itu, kamu bisa belajar langsung dari mentor berpengalaman dan mendapatkan akses kelas seumur hidup. Dengan materi yang selalu up-to-date dan studi kasus nyata, ini akan sangat membantu dalam meningkatkan kemampuan coding dan memahami penerapan Laravel dalam proyek-proyek nyata. Jadi, jangan lewatkan kesempatan untuk terus belajar dan berkembang bersama BuildWithAngga!

Pada artikel ini, kita akan belajar bagaimana membangun CRUD (Create, Read, Update, Delete) untuk data role dan permission dalam sebuah projek website toko baju online. Dalam dunia web development, pengelolaan role dan permission sangat penting karena dapat meningkatkan pengalaman pengguna (user experience) sekaligus menjaga keamanan data yang ada di dalam sebuah website. Pentingnya Role dan Permission Setiap pengguna di dalam sebuah website memiliki peran dan hak akses yang berbeda-beda. Dengan membagi peran (role) dan hak akses (permission), kita dapat memastikan bahwa hanya pengguna dengan otorisasi tertentu yang dapat mengakses fitur-fitur sensitif. Hal ini dapat mencegah terjadinya kesalahan atau penyalahgunaan data. Bayangkan sebuah toko baju online sebagai sebuah toko fisik. Kasir mungkin memiliki akses untuk melihat dan memproses transaksi, tapi tidak dapat mengubah harga produk secara langsung—itu adalah tugas dari manajer toko. Role dan permission seperti ini menjaga efisiensi dan keamanan operasional website. 10 Fitur Unggulan Website Toko Baju Online dengan Role dan Permission Sebuah website toko baju online yang baik harus memiliki fitur yang mendukung kelancaran operasional bisnis sekaligus memberikan pengalaman terbaik bagi pengguna. Berikut adalah 10 fitur unggulan yang harus dimiliki beserta contoh role dan permission yang tepat untuk tiap fitur. Manajemen ProdukRole: Admin, Manajer ProdukPermission: Admin dan manajer produk dapat menambahkan, mengedit, dan menghapus produk. Pengguna biasa hanya bisa melihat produk tanpa akses untuk mengubah data.Analogi: Seperti menampilkan etalase toko fisik, hanya pemilik toko dan staf tertentu yang boleh mengubah produk yang ada di etalase.Manajemen TransaksiRole: Kasir, AdminPermission: Kasir dapat memproses transaksi pembelian, namun tidak dapat mengedit data produk atau diskon. Admin memiliki akses penuh terhadap semua transaksi.Analogi: Di sebuah toko fisik, hanya kasir yang bisa memproses pembayaran, tetapi mereka tidak bisa memutuskan harga produk.Manajemen PenggunaRole: Admin, HRPermission: Admin dapat mengelola semua pengguna di sistem (tambah, edit, hapus), sementara HR mungkin hanya dapat melihat atau mengelola profil karyawan.Analogi: Di perusahaan fisik, hanya HR yang bisa mengelola data karyawan, tetapi mungkin tidak semua staf memiliki akses untuk melihat data pribadi mereka.Pengelolaan Diskon dan KuponRole: Manajer Marketing, AdminPermission: Hanya manajer marketing dan admin yang dapat membuat, mengedit, dan menghapus diskon atau kupon. Pengguna biasa hanya bisa menggunakan kupon saat berbelanja.Analogi: Hanya departemen pemasaran yang boleh mengatur promosi di toko, sementara pelanggan hanya bisa memanfaatkan promosi yang tersedia.Laporan PenjualanRole: Admin, Manajer KeuanganPermission: Admin dan manajer keuangan bisa mengakses laporan penjualan dan analitik, sementara kasir mungkin hanya dapat melihat ringkasan penjualan hariannya.Analogi: Dalam sebuah toko, manajer keuangan memiliki akses penuh untuk melihat semua transaksi, sementara kasir hanya dapat melihat transaksi mereka sendiri.Pengaturan WebsiteRole: AdminPermission: Hanya admin yang dapat mengubah pengaturan global website, seperti tampilan, struktur, dan fitur.Analogi: Sama seperti dalam toko fisik, hanya pemilik toko yang berhak untuk merombak desain atau layout toko.Manajemen InventarisRole: Manajer Inventaris, AdminPermission: Manajer inventaris bertanggung jawab untuk menambah atau menghapus stok produk. Kasir tidak memiliki akses ke bagian ini.Analogi: Hanya staf gudang yang dapat mengelola stok di gudang, sementara kasir hanya memproses produk yang tersedia.Manajemen PengirimanRole: Admin, KurirPermission: Admin dapat mengatur semua data pengiriman dan kurir dapat memperbarui status pengiriman. Pengguna biasa hanya dapat melacak status pengiriman mereka.Analogi: Kurir di toko fisik bertugas mengantarkan barang dan memperbarui status pengiriman, tetapi mereka tidak bisa mengubah informasi pesanan.Manajemen Testimoni dan ReviewRole: Admin, PenggunaPermission: Pengguna dapat memberikan review, tetapi hanya admin yang bisa menghapus atau menanggapi review yang melanggar aturan.Analogi: Di dunia nyata, pelanggan dapat memberikan testimoni, tetapi hanya staf yang bertugas yang bisa menghapus atau menanggapi feedback pelanggan.Newsletter dan PromosiRole: Manajer Marketing, AdminPermission: Manajer marketing dan admin dapat mengirimkan newsletter atau promosi kepada pelanggan. Pengguna hanya dapat berlangganan atau berhenti berlangganan.Analogi: Sama seperti di toko fisik, hanya staf pemasaran yang boleh membuat dan mengirim promosi kepada pelanggan. Dengan memahami pembagian role dan permission, kita dapat menciptakan sebuah sistem yang tidak hanya aman, tetapi juga memberikan pengalaman yang lancar dan terstruktur kepada pengguna. Tutorial CRUD Role Permission dengan Laravel 11, Spatie, dan Filament Di tutorial ini, kita akan membahas langkah-langkah untuk membuat CRUD (Create, Read, Update, Delete) data role dan permission di Laravel 11 menggunakan package Spatie dan Filament. Kita juga akan membuat user admin, file seeder, dan resource untuk mengelola data melalui admin panel Filament. 1. Cara Membuat Proyek Laravel 11 Baru dengan Composer Langkah pertama adalah membuat proyek Laravel 11 baru dengan Composer. Berikut caranya: Buat Proyek Laravel 11: Jalankan perintah berikut di terminal untuk membuat proyek Laravel 11 baru: composer create-project laravel/laravel toko-baju "11.*" Setelah selesai, pindah ke direktori proyek: cd toko-baju Instalasi Spatie Permission: Instal package Spatie Permission untuk mengelola role dan permission: composer require spatie/laravel-permission Setelah itu, jalankan perintah berikut untuk mempublikasikan file konfigurasi Spatie: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" Lanjutkan dengan menjalankan migrasi untuk membuat tabel role dan permission di database: php artisan migrate Instalasi Filament: Instal package Filament untuk membuat admin panel: composer require filament/filament Setelah terinstal, buat user admin menggunakan command artisan Filament: php artisan make:filament-user 2. Cara Membuat Akun Admin dengan Command Artisan Filament Setelah instalasi selesai, kita dapat membuat user admin untuk mengelola role dan permission di panel admin Filament dengan menggunakan perintah berikut: php artisan make:filament-user Setelah menjalankan perintah ini, Anda akan diminta untuk mengisi informasi seperti nama, email, dan password untuk user admin. Jika Anda ingin memberikan akses penuh, pilih "yes" saat diminta: Is this user a super-admin? (yes/no) [no]: yes Dengan ini, user admin yang dibuat akan memiliki akses penuh ke seluruh fitur admin panel Filament, termasuk pengelolaan data role dan permission. 3. Cara Membuat File Seeder untuk Role dan Permission Setelah membuat user admin, langkah selanjutnya adalah menambahkan data role dan permission ke dalam database. Ini dapat dilakukan dengan membuat file seeder. Berikut adalah langkah-langkahnya: Buat file seeder menggunakan perintah berikut: php artisan make:seeder RolePermissionSeeder Buka file RolePermissionSeeder.php yang berada di direktori database/seeders dan tambahkan kode berikut: use Illuminate\\\\Database\\\\Seeder; use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; class RolePermissionSeeder extends Seeder { public function run() { // Buat permissions $permissions = ['view products', 'edit products', 'delete products', 'view orders', 'manage users']; foreach ($permissions as $permission) { Permission::create(['name' => $permission]); } // Buat role dan assign permissions $adminRole = Role::create(['name' => 'admin']); $adminRole->givePermissionTo($permissions); $managerRole = Role::create(['name' => 'manager']); $managerRole->givePermissionTo(['view products', 'edit products']); $userRole = Role::create(['name' => 'user']); $userRole->givePermissionTo(['view products']); } } Jalankan seeder ini untuk memasukkan data role dan permission ke database: php artisan db:seed --class=RolePermissionSeeder 4. Cara Membuat Filament Resource untuk Mengelola Role dan Permission Langkah selanjutnya adalah membuat resource di Filament untuk mengelola data role dan permission melalui admin panel. Buat Resource Role: Jalankan perintah berikut untuk membuat resource Role: php artisan make:filament-resource Role Ini akan membuat beberapa file di dalam direktori app/Filament/Resources/RoleResource.php. Buat Resource Permission: Jalankan perintah yang sama untuk membuat resource Permission: php artisan make:filament-resource Permission Setelah resource ini dibuat, Anda bisa menyesuaikan pengaturan CRUD yang ada di file RoleResource.php dan PermissionResource.php. 5. Cara Mengatur Form dan Table pada File Resource Filament Untuk mengatur form dan table dalam resource Filament, kita perlu mengedit file resource yang sudah dibuat. Berikut contoh pengaturan form dan table untuk mengelola Role dan Permission: Mengatur Form di RoleResource: Form ini digunakan untuk menambahkan atau mengedit data role. Buka file RoleResource.php dan tambahkan kode berikut di dalam metode form(): public static function form(Form $form): Form { return $form ->schema([ TextInput::make('name') ->required() ->label('Role Name'), MultiSelect::make('permissions') ->relationship('permissions', 'name') ->label('Permissions') ]); } Di sini, kita menggunakan input TextInput untuk nama role dan MultiSelect untuk memilih permission yang terkait dengan role tersebut. Mengatur Table di RoleResource: Table digunakan untuk menampilkan data role yang ada di database. Tambahkan kode berikut di dalam metode table(): public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name')->label('Role Name'), TagsColumn::make('permissions.name')->label('Permissions'), ]) ->filters([ // Anda bisa menambahkan filter di sini ]); } Pada table ini, kita menampilkan kolom name untuk role dan permissions.name untuk menampilkan permission yang dimiliki oleh role tersebut. Cara Mengimplementasikan Role dan Permission pada Navigation dan Routing di web.php dengan Laravel 11, Spatie, dan Filament Setelah kita mengatur role dan permission dengan Spatie dan Filament, langkah penting berikutnya adalah mengimplementasikan logika role dan permission ini dalam navigation (navigasi) dan routing pada file web.php. Ini memastikan bahwa hanya pengguna yang memiliki hak akses tertentu yang dapat melihat dan mengakses fitur tertentu pada website toko baju online kita. 1. Mengimplementasikan Role dan Permission pada Routing di web.php Salah satu cara untuk membatasi akses berdasarkan role atau permission adalah dengan menggunakan middleware. Spatie Permission menyediakan middleware yang memudahkan kita dalam mengatur akses ini. Middleware ini bisa digunakan di file web.php untuk mengatur hak akses pada setiap route. Berikut adalah langkah-langkah untuk mengimplementasikan middleware Spatie di routing: a. Middleware untuk Role Untuk membatasi akses berdasarkan role, kita bisa menggunakan middleware role. Misalnya, hanya pengguna dengan role 'admin' yang bisa mengakses halaman manajemen pengguna: use Illuminate\\\\Support\\\\Facades\\\\Route; Route::middleware(['role:admin'])->group(function () { Route::get('/manage-users', [UserController::class, 'index'])->name('manage.users'); }); Pada contoh ini: Kita menggunakan middleware role:admin untuk memastikan bahwa hanya pengguna dengan role admin yang dapat mengakses route /manage-users.Jika pengguna tanpa role 'admin' mencoba mengakses route ini, mereka akan diarahkan ke halaman 403 (forbidden). b. Middleware untuk Permission Jika Anda ingin lebih spesifik dan membatasi akses berdasarkan permission, gunakan middleware permission. Contoh berikut menunjukkan cara membatasi akses ke halaman pengelolaan produk hanya bagi pengguna yang memiliki permission edit products: Route::middleware(['permission:edit products'])->group(function () { Route::get('/manage-products', [ProductController::class, 'index'])->name('manage.products'); }); Di sini: Middleware permission:edit products hanya mengizinkan pengguna yang memiliki permission untuk mengedit produk mengakses route /manage-products. c. Menggabungkan Middleware Role dan Permission Anda juga bisa menggabungkan role dan permission pada satu route. Misalnya, hanya pengguna dengan role admin yang memiliki permission manage users yang bisa mengakses halaman manajemen pengguna: Route::middleware(['role:admin', 'permission:manage users'])->group(function () { Route::get('/admin/users', [AdminController::class, 'index'])->name('admin.users'); }); Pada contoh ini: Pengguna harus memiliki role admin dan permission manage users untuk bisa mengakses halaman /admin/users. 2. Mengimplementasikan Role dan Permission pada Navigasi Selain di routing, kita juga harus mengatur navigasi di frontend, agar pengguna hanya melihat link atau menu yang sesuai dengan role dan permission mereka. Kita bisa menggunakan helper dari Spatie untuk memeriksa apakah pengguna saat ini memiliki role atau permission tertentu. Berikut adalah beberapa contoh cara implementasinya di Blade template: a. Menampilkan Menu Berdasarkan Role Untuk menampilkan menu atau link hanya untuk pengguna dengan role tertentu, Anda bisa menggunakan direktif Blade berikut: @role('admin') <li><a href="{{ route('manage.users') }}">Manage Users</a></li> @endrole Kode di atas akan memastikan bahwa link "Manage Users" hanya akan ditampilkan jika pengguna memiliki role admin. b. Menampilkan Menu Berdasarkan Permission Jika Anda ingin menampilkan menu atau link berdasarkan permission, gunakan direktif Blade @can yang disediakan oleh Laravel: @can('edit products') <li><a href="{{ route('manage.products') }}">Manage Products</a></li> @endcan Link "Manage Products" hanya akan ditampilkan jika pengguna memiliki permission edit products. c. Menampilkan Menu untuk Multiple Role Jika Anda ingin menampilkan menu atau link untuk beberapa role sekaligus, Anda bisa menggunakan kombinasi logika @role dan @endrole: @role('admin|manager') <li><a href="{{ route('dashboard') }}">Dashboard</a></li> @endrole Pada contoh ini, link "Dashboard" akan ditampilkan jika pengguna memiliki role admin atau manager. 3. Contoh Lengkap Implementasi di web.php Berikut adalah contoh lengkap implementasi role dan permission pada routing di file web.php: use Illuminate\\\\Support\\\\Facades\\\\Route; use App\\\\Http\\\\Controllers\\\\UserController; use App\\\\Http\\\\Controllers\\\\ProductController; use App\\\\Http\\\\Controllers\\\\AdminController; // Route untuk pengguna dengan role admin Route::middleware(['role:admin'])->group(function () { Route::get('/admin/dashboard', [AdminController::class, 'index'])->name('admin.dashboard'); Route::get('/admin/users', [AdminController::class, 'manageUsers'])->name('admin.users'); }); // Route untuk manajemen produk dengan permission 'edit products' Route::middleware(['permission:edit products'])->group(function () { Route::get('/manage-products', [ProductController::class, 'index'])->name('manage.products'); }); // Route untuk mengelola pengguna hanya untuk admin dengan permission 'manage users' Route::middleware(['role:admin', 'permission:manage users'])->group(function () { Route::get('/manage-users', [UserController::class, 'index'])->name('manage.users'); }); Dalam contoh ini: Route /admin/dashboard dan /admin/users hanya dapat diakses oleh pengguna dengan role admin.Route /manage-products hanya dapat diakses oleh pengguna dengan permission edit products.Route /manage-users memerlukan role admin dan permission manage users. Sebagai salah satu framework PHP paling populer, Laravel terus mengalami perkembangan dengan banyak update menarik yang semakin memudahkan developer dalam membangun aplikasi web yang handal dan scalable. Fitur-fitur seperti Spatie Permission, Filament, dan lainnya membuat pengelolaan hak akses menjadi lebih mudah dan efisien. Dengan komunitas yang besar dan dukungan dokumentasi yang kuat, Laravel akan terus menjadi pilihan utama bagi banyak pengembang di seluruh dunia. Untuk mendapatkan lebih banyak pembelajaran dan studi kasus menarik, pastikan untuk memantau terus website BuildWithAngga. Mereka sering meng-update kelas gratis dengan studi kasus yang relevan, disertai mentor berpengalaman yang siap membantu Anda. Dengan akses kelas seumur hidup, Anda dapat belajar kapan saja dan memperdalam skill web development Anda. Jangan lewatkan kesempatan ini untuk meningkatkan kemampuan coding Anda dengan panduan yang terstruktur dan komunitas yang mendukung!