Tips All

Saat kita membangun sebuah website untuk bisnis jasa laundry, tentu kita membutuhkan sebuah halaman admin dan content management system (CMS) yang memungkinkan kita untuk mengelola data seperti pesanan, pelanggan, layanan, hingga laporan keuangan. Pada artikel ini, kita akan membahas cara membuat halaman admin beserta CMS pada projek website jasa laundry menggunakan Laravel dan Filament, tanpa masuk ke detail coding. Laravel dan Filament: Kombinasi Tepat untuk Dashboard dan CMS Laravel dikenal sebagai framework PHP yang populer karena kemudahan penggunaannya, fitur-fitur yang lengkap, dan keamanannya. Laravel juga memiliki banyak package dan ekosistem yang bisa membantu developer membangun aplikasi web dengan cepat dan efisien. Salah satu paket yang sering digunakan untuk membuat dashboard dan CMS adalah Filament. Filament merupakan package untuk Laravel yang dirancang khusus untuk membangun interface admin yang modern, cepat, dan mudah dimaintenance. Dengan menggunakan Laravel dan Filament, kita bisa membuat dashboard dan CMS yang memiliki tampilan menarik, interaktif, dan fungsionalitas yang lengkap tanpa perlu banyak effort dalam coding. Mengapa Laravel dan Filament Cocok untuk Projek Web Laundry? Keamanan Terjamin: Dalam website jasa laundry, kita akan menangani banyak data pelanggan dan transaksi. Laravel dilengkapi dengan fitur keamanan yang sangat baik seperti CSRF protection, session management, dan lain-lain yang membantu melindungi data dari akses yang tidak sah.Pengelolaan Data yang Mudah: Filament menyediakan banyak fitur bawaan seperti CRUD generator, data table yang interaktif, dan form builder yang memudahkan kita dalam mengelola data. Misalnya, kita bisa dengan mudah membuat form untuk menambahkan layanan laundry baru, melihat daftar pesanan, atau mengelola pelanggan tanpa perlu menulis banyak kode.User Interface yang Modern dan Responsif: Dashboard admin yang dibuat menggunakan Filament memiliki tampilan yang modern dan user-friendly. Hal ini penting karena administrator yang mengelola sistem perlu menggunakan interface yang mudah dipahami dan navigasi yang intuitif.Cepat dan Efisien: Laravel dan Filament memanfaatkan komponen frontend seperti Alpine.js dan Tailwind CSS yang membuat loading halaman menjadi cepat dan performa aplikasi lebih optimal. Ini sangat membantu ketika kita ingin memantau pesanan dan laporan secara real-time tanpa ada lag.Mudah Dimaintenance: Salah satu kelebihan menggunakan Laravel adalah struktur kodenya yang bersih dan rapi. Dengan tambahan Filament, maintenance dashboard dan CMS menjadi lebih mudah karena kita bisa dengan cepat menambahkan fitur baru atau memperbarui fungsionalitas yang ada tanpa merusak sistem yang sudah berjalan. Analogi Sederhana Bayangkan Anda memiliki sebuah toko laundry. Laravel adalah bangunan toko yang kuat, aman, dan siap untuk ditempati. Di dalamnya, ada berbagai ruang untuk menyimpan data, melakukan proses, dan menerima pelanggan. Namun, untuk membuat toko tersebut lebih efektif, Anda membutuhkan rak yang terorganisir, meja kasir yang modern, dan sistem manajemen stok yang canggih. Di sinilah Filament berperan sebagai perabotan modern yang mengisi toko laundry Anda, menjadikan toko Anda tidak hanya kuat dan aman, tetapi juga nyaman untuk dikelola dan menarik bagi pelanggan. Dengan kombinasi Laravel dan Filament, Anda bisa fokus mengelola bisnis tanpa harus khawatir dengan kerumitan teknis yang biasanya terjadi pada sistem manajemen konten dan halaman admin. Tata Cara Membuat Projek Laravel Terbaru Menggunakan Composer dan Mengatur File .env untuk MySQL Membangun projek Laravel terbaru bisa dimulai dengan menggunakan command line sederhana. Laravel menyediakan berbagai cara untuk menginstall framework ini, tetapi cara yang paling umum dan disarankan adalah menggunakan Composer, dependency manager untuk PHP. Setelah instalasi, kita perlu mengatur file .env agar Laravel dapat terhubung dengan database MySQL. Berikut ini adalah penjelasan langkah-langkahnya beserta contoh kode lengkap. 1. Instalasi Laravel Menggunakan Composer Pastikan terlebih dahulu bahwa Composer sudah terinstall di komputer Anda. Jika belum, Anda bisa mengikuti panduan instalasi di Composer. Setelah Composer terinstall, buka terminal atau command prompt, lalu jalankan perintah berikut untuk membuat projek Laravel baru: composer create-project --prefer-dist laravel/laravel nama-projek-anda Perintah ini akan membuat sebuah folder projek baru dengan nama yang telah Anda tentukan (ganti nama-projek-anda dengan nama projek Anda). Laravel akan mengunduh semua file yang diperlukan dan mengatur struktur direktori projek secara otomatis. 2. Mengatur Koneksi Database di File .env Setelah projek Laravel berhasil dibuat, langkah selanjutnya adalah mengatur koneksi database. Laravel menggunakan file .env yang berada di root directory projek untuk menyimpan konfigurasi lingkungan, termasuk konfigurasi database. Buka file .env tersebut menggunakan text editor pilihan Anda, dan temukan bagian berikut: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=username_database DB_PASSWORD=password_database Ubah nilai-nilai pada variabel di atas sesuai dengan informasi koneksi MySQL yang Anda gunakan: DB_CONNECTION: Jenis koneksi database yang digunakan. Secara default, Laravel menggunakan mysql.DB_HOST: Alamat host database Anda, biasanya 127.0.0.1 atau localhost.DB_PORT: Port yang digunakan oleh MySQL, biasanya 3306.DB_DATABASE: Nama database yang akan digunakan oleh Laravel. Pastikan database ini sudah dibuat di MySQL.DB_USERNAME: Username untuk mengakses database.DB_PASSWORD: Password untuk mengakses database. Contoh konfigurasi lengkap: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=projek_laundry DB_USERNAME=root DB_PASSWORD= Dalam contoh ini, database yang digunakan bernama projek_laundry, dengan username root dan tanpa password. Pastikan untuk mengganti informasi ini sesuai dengan pengaturan MySQL Anda. 3. Membuat Database di MySQL Sebelum menjalankan projek Laravel, pastikan database yang disebutkan di file .env sudah ada. Anda bisa membuatnya menggunakan command line atau tools seperti phpMyAdmin. Jika menggunakan command line, jalankan perintah berikut di terminal MySQL: CREATE DATABASE projek_laundry; Ini akan membuat database kosong dengan nama projek_laundry yang akan digunakan oleh Laravel. 4. Menjalankan Projek Laravel Setelah konfigurasi database selesai, jalankan projek Laravel menggunakan perintah berikut di terminal: php artisan serve Perintah ini akan menjalankan server built-in Laravel di http://127.0.0.1:8000. Buka alamat tersebut di browser untuk melihat halaman default Laravel. 5. Menguji Koneksi Database Untuk memastikan bahwa koneksi database sudah benar, kita bisa menjalankan migrasi bawaan Laravel yang akan membuat beberapa tabel default di database. Jalankan perintah berikut di terminal: php artisan migrate Jika tidak ada error, berarti Laravel sudah berhasil terhubung ke database dan membuat tabel-tabel yang diperlukan. Tata Cara Membuat File Migration dan Model Beserta Fillable dan Relationship untuk Tabel Projek Kelas Dalam membangun aplikasi Laravel, kita sering membutuhkan beberapa tabel untuk menyimpan data. Untuk proyek seperti website jasa laundry, kita bisa membuat beberapa tabel seperti categories, laundry_services, cities, dan transactions. Setiap tabel memiliki hubungan (relationship) satu sama lain yang harus didefinisikan di dalam model. Berikut ini adalah langkah-langkah untuk membuat file migration dan model beserta fillable dan relationship untuk masing-masing tabel tersebut. 1. Membuat File Migration Untuk membuat file migration, kita bisa menggunakan perintah artisan make:migration. Berikut adalah contoh perintah untuk membuat file migration untuk setiap tabel: php artisan make:migration create_categories_table php artisan make:migration create_laundry_services_table php artisan make:migration create_cities_table php artisan make:migration create_transactions_table Setelah menjalankan perintah di atas, file migration akan dibuat di folder database/migrations. Setiap file tersebut berisi blueprint struktur tabel yang akan dibuat di database. Contoh kode untuk file migration create_categories_table: 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->timestamps(); }); } public function down() { Schema::dropIfExists('categories'); } } Contoh kode untuk file migration create_laundry_services_table: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateLaundryServicesTable extends Migration { public function up() { Schema::create('laundry_services', function (Blueprint $table) { $table->id(); $table->string('name'); $table->unsignedBigInteger('category_id'); $table->decimal('price', 8, 2); $table->timestamps(); $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade'); }); } public function down() { Schema::dropIfExists('laundry_services'); } } Contoh kode untuk file migration create_cities_table: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateCitiesTable extends Migration { public function up() { Schema::create('cities', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('cities'); } } Contoh kode untuk file migration create_transactions_table: 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->unsignedBigInteger('laundry_service_id'); $table->unsignedBigInteger('city_id'); $table->integer('quantity'); $table->decimal('total_price', 10, 2); $table->timestamps(); $table->foreign('laundry_service_id')->references('id')->on('laundry_services')->onDelete('cascade'); $table->foreign('city_id')->references('id')->on('cities')->onDelete('cascade'); }); } public function down() { Schema::dropIfExists('transactions'); } } 2. Membuat Model Beserta Fillable dan Relationship Setelah membuat file migration, langkah berikutnya adalah membuat model untuk setiap tabel yang sudah kita buat. Model digunakan untuk berinteraksi dengan tabel di database dan mendefinisikan relasi antar tabel. Contoh kode untuk model Category: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Category extends Model { use HasFactory; protected $fillable = [ 'name', ]; public function laundryServices() { return $this->hasMany(LaundryService::class); } } Pada model Category, terdapat relasi hasMany ke model LaundryService, yang berarti satu kategori dapat memiliki banyak layanan laundry. Contoh kode untuk model LaundryService: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class LaundryService extends Model { use HasFactory; protected $fillable = [ 'name', 'category_id', 'price', ]; public function category() { return $this->belongsTo(Category::class); } public function transactions() { return $this->hasMany(Transaction::class); } } Pada model LaundryService, terdapat relasi belongsTo ke model Category dan hasMany ke model Transaction. Contoh kode untuk model City: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class City extends Model { use HasFactory; protected $fillable = [ 'name', ]; public function transactions() { return $this->hasMany(Transaction::class); } } Pada model City, terdapat relasi hasMany ke model Transaction. Contoh kode untuk model Transaction: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Transaction extends Model { use HasFactory; protected $fillable = [ 'laundry_service_id', 'city_id', 'quantity', 'total_price', ]; public function laundryService() { return $this->belongsTo(LaundryService::class); } public function city() { return $this->belongsTo(City::class); } } Pada model Transaction, terdapat relasi belongsTo ke model LaundryService dan belongsTo ke model City. Relasi ini menunjukkan bahwa setiap transaksi hanya dapat memiliki satu layanan laundry dan satu kota. Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat file migration dan model beserta fillable dan relationship untuk tabel categories, laundry_services, cities, dan transactions. Anda dapat melanjutkan dengan menjalankan perintah php artisan migrate untuk membuat tabel-tabel ini di database Anda. Tata Cara Menginstall Package Filament dan Membuat Akun Admin Filament adalah package Laravel yang memudahkan pembuatan dashboard admin dengan fitur CRUD yang interaktif dan user-friendly. Untuk menginstall package Filament dan membuat akun admin, berikut ini adalah langkah-langkahnya beserta contoh koding lengkap. Menginstall Package Filament Pastikan projek Laravel Anda sudah siap dan Composer telah terinstall di sistem Anda. Buka terminal di direktori projek Laravel Anda dan jalankan perintah berikut untuk menginstall Filament: composer require filament/filament Perintah ini akan mengunduh dan menginstall package Filament beserta dependensinya ke dalam projek Laravel Anda. Setelah instalasi selesai, jalankan perintah berikut untuk mengatur Filament dan membuat beberapa file konfigurasi dasar yang diperlukan: php artisan filament:install Perintah ini akan melakukan beberapa hal, seperti menambahkan route dan file konfigurasi Filament, serta mempersiapkan projek Laravel Anda untuk menggunakan package ini. Menambahkan Middleware Filament Pastikan middleware Filament sudah terdaftar dalam file app/Http/Kernel.php di bagian $middlewareGroups. Ini memastikan bahwa route admin hanya bisa diakses oleh pengguna yang sudah terautentikasi. protected $middlewareGroups = [ 'web' => [ // Middleware default Laravel ], 'filament' => [ \\\\Filament\\\\Http\\\\Middleware\\\\Authenticate::class, \\\\Filament\\\\Http\\\\Middleware\\\\DispatchServingFilamentEvent::class, \\\\Filament\\\\Http\\\\Middleware\\\\ShareFilamentData::class, ], ]; Jika middleware ini belum ada, tambahkan ke dalam array filament seperti pada contoh di atas. Membuat Akun Admin Setelah Filament terinstall, langkah berikutnya adalah membuat akun admin yang dapat digunakan untuk login ke dashboard Filament. Jalankan perintah berikut untuk membuat user admin baru: php artisan make:filament-user Anda akan diminta untuk mengisi informasi user seperti nama, email, dan password. Contoh output perintah di terminal: Name: Admin Email: [email protected] Password: ******** Setelah proses ini selesai, user admin baru akan dibuat dan dapat digunakan untuk login ke dashboard admin Filament. Mengakses Dashboard Admin Untuk mengakses dashboard admin Filament, buka browser dan pergi ke URL berikut: <http://localhost:8000/admin> Gantilah localhost:8000 dengan URL projek Laravel Anda jika berbeda. Gunakan email dan password yang telah dibuat pada langkah sebelumnya untuk login. Menyesuaikan Configurasi Filament Anda dapat mengatur beberapa konfigurasi tambahan untuk Filament, seperti nama aplikasi, URL login, dan sebagainya, di file config/filament.php. Contoh konfigurasi dasar: return [ 'brand' => 'Laundry Admin', 'path' => 'admin', 'auth' => [ 'guard' => 'web', ], 'resources' => [ // Daftar resource yang terdaftar ], ]; Konfigurasi ini memungkinkan Anda untuk mengatur beberapa aspek visual dan fungsional dari dashboard admin Filament. Dengan mengikuti langkah-langkah di atas, Anda telah berhasil menginstall package Filament dan membuat akun admin untuk mengakses dashboard admin. Anda bisa mulai menambahkan resource dan fitur lainnya ke dalam dashboard sesuai kebutuhan aplikasi Anda. Tata Cara Membuat Resource untuk CRUD Seluruh Tabel dengan Filament Setelah menginstall package Filament dan membuat akun admin, langkah berikutnya adalah membuat resource untuk CRUD (Create, Read, Update, Delete) pada tabel-tabel yang sudah ada, seperti categories, laundry_services, cities, dan transactions. Resource ini akan membantu mengatur dan menampilkan data dari tabel-tabel tersebut di dashboard admin Filament. Berikut adalah langkah-langkah beserta contoh koding lengkap untuk membuat resource CRUD tersebut. Membuat Resource CRUD untuk Tabel Categories Jalankan perintah berikut di terminal untuk membuat resource Filament untuk tabel categories: php artisan make:filament-resource Category Perintah ini akan membuat beberapa file resource yang berada di direktori app/Filament/Resources/CategoryResource. Berikut adalah contoh kode lengkap untuk file CategoryResource.php: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\CategoryResource\\\\Pages; use App\\\\Models\\\\Category; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Resources\\\\Form; use Filament\\\\Tables; use Filament\\\\Forms; class CategoryResource extends Resource { protected static ?string $model = Category::class; protected static ?string $navigationIcon = 'heroicon-o-collection'; protected static ?string $navigationGroup = 'Laundry Management'; public static function form(Form $form): Form { return $form->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->maxLength(255), ]); } public static function table(Table $table): Table { return $table->columns([ Tables\\\\Columns\\\\TextColumn::make('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('name')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ])->filters([ // ])->actions([ Tables\\\\Actions\\\\EditAction::make(), ])->bulkActions([ Tables\\\\Actions\\\\DeleteBulkAction::make(), ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ManageCategories::route('/'), ]; } } File ini mengatur form dan tabel untuk resource Category. Bagian form menentukan schema form input yang digunakan untuk menambah dan mengedit data, sedangkan bagian table mengatur kolom apa saja yang akan ditampilkan di tabel, serta actions dan bulk actions yang tersedia. Membuat Resource CRUD untuk Tabel LaundryServices Jalankan perintah berikut untuk membuat resource Filament untuk tabel laundry_services: php artisan make:filament-resource LaundryService Berikut adalah contoh kode lengkap untuk file LaundryServiceResource.php: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\LaundryServiceResource\\\\Pages; use App\\\\Models\\\\LaundryService; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Resources\\\\Form; use Filament\\\\Tables; use Filament\\\\Forms; class LaundryServiceResource extends Resource { protected static ?string $model = LaundryService::class; protected static ?string $navigationIcon = 'heroicon-o-collection'; protected static ?string $navigationGroup = 'Laundry Management'; public static function form(Form $form): Form { return $form->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->maxLength(255), Forms\\\\Components\\\\Select::make('category_id') ->relationship('category', 'name') ->required(), Forms\\\\Components\\\\TextInput::make('price') ->required() ->numeric(), ]); } public static function table(Table $table): Table { return $table->columns([ Tables\\\\Columns\\\\TextColumn::make('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('name')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('category.name')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('price')->sortable(), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ])->filters([ // ])->actions([ Tables\\\\Actions\\\\EditAction::make(), ])->bulkActions([ Tables\\\\Actions\\\\DeleteBulkAction::make(), ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ManageLaundryServices::route('/'), ]; } } Bagian form pada resource ini memiliki input untuk name, category_id (yang menggunakan relationship), dan price. Pada bagian table, kolom category.name digunakan untuk menampilkan nama kategori layanan laundry. Membuat Resource CRUD untuk Tabel Cities Untuk membuat resource Filament pada tabel cities, jalankan perintah berikut: php artisan make:filament-resource City Berikut adalah contoh kode lengkap untuk file CityResource.php: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\CityResource\\\\Pages; use App\\\\Models\\\\City; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Resources\\\\Form; use Filament\\\\Tables; use Filament\\\\Forms; class CityResource extends Resource { protected static ?string $model = City::class; protected static ?string $navigationIcon = 'heroicon-o-collection'; protected static ?string $navigationGroup = 'Location Management'; public static function form(Form $form): Form { return $form->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->maxLength(255), ]); } public static function table(Table $table): Table { return $table->columns([ Tables\\\\Columns\\\\TextColumn::make('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('name')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ])->filters([ // ])->actions([ Tables\\\\Actions\\\\EditAction::make(), ])->bulkActions([ Tables\\\\Actions\\\\DeleteBulkAction::make(), ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ManageCities::route('/'), ]; } } Resource ini hanya memiliki satu input name di dalam form schema, karena tabel cities hanya menyimpan nama kota. Membuat Resource CRUD untuk Tabel Transactions Jalankan perintah berikut untuk membuat resource Filament untuk tabel transactions: php artisan make:filament-resource Transaction Berikut adalah contoh kode lengkap untuk file TransactionResource.php: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\TransactionResource\\\\Pages; use App\\\\Models\\\\Transaction; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Resources\\\\Form; use Filament\\\\Tables; use Filament\\\\Forms; class TransactionResource extends Resource { protected static ?string $model = Transaction::class; protected static ?string $navigationIcon = 'heroicon-o-collection'; protected static ?string $navigationGroup = 'Order Management'; public static function form(Form $form): Form { return $form->schema([ Forms\\\\Components\\\\Select::make('laundry_service_id') ->relationship('laundryService', 'name') ->required(), Forms\\\\Components\\\\Select::make('city_id') ->relationship('city', 'name') ->required(), Forms\\\\Components\\\\TextInput::make('quantity') ->required() ->numeric(), Forms\\\\Components\\\\TextInput::make('total_price') ->required() ->numeric(), ]); } public static function table(Table $table): Table { return $table->columns([ Tables\\\\Columns\\\\TextColumn::make('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('laundryService.name')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('city.name')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('quantity')->sortable(), Tables\\\\Columns\\\\TextColumn::make('total_price')->sortable(), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ])->filters([ // ])->actions([ Tables\\\\Actions\\\\EditAction::make(), ])->bulkActions([ Tables\\\\Actions\\\\DeleteBulkAction::make(), ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ManageTransactions::route('/'), ]; } } Resource ini mengatur form schema dengan input laundry_service_id dan city_id yang menggunakan relationship, serta quantity dan total_price. Pada bagian table, nama layanan laundry dan kota ditampilkan melalui relasi. Dengan mengikuti langkah-langkah di atas, resource CRUD untuk setiap tabel telah berhasil dibuat. Resource ini memungkinkan kita untuk mengelola data dari tabel categories, laundry_services, cities, dan transactions langsung dari dashboard admin Filament. Anda bisa menyesuaikan resource ini sesuai dengan kebutuhan projek Anda. Penutup dan Kesimpulan Dengan menggunakan Laravel dan Filament, kita dapat membangun sistem manajemen konten yang kuat dan fleksibel untuk berbagai jenis aplikasi, termasuk website jasa laundry. Filament memungkinkan pembuatan dashboard admin yang interaktif dengan fitur CRUD yang lengkap dan mudah digunakan tanpa harus menulis banyak kode dari awal. Dalam artikel ini, kita telah membahas langkah-langkah untuk menginstall Filament, membuat akun admin, serta membuat resource CRUD untuk tabel categories, laundry_services, cities, dan transactions. Menggunakan kombinasi Laravel dan Filament memberikan banyak keuntungan, seperti kemudahan dalam pengelolaan data, tampilan antarmuka yang modern, serta keamanan yang baik. Proses ini tidak hanya mempercepat pembangunan aplikasi, tetapi juga memudahkan maintenance dan pengembangan lebih lanjut. Laravel terus berkembang dan menjadi pilihan utama bagi banyak developer karena berbagai pembaruan menarik yang selalu memudahkan proses pengembangan aplikasi. Dengan komunitas yang aktif dan dokumentasi yang lengkap, framework ini menawarkan solusi yang efisien dan efektif untuk membangun aplikasi web yang aman, cepat, dan scalable. Jika Anda ingin terus mengikuti perkembangan terbaru Laravel dan belajar dari studi kasus nyata, pantau terus website BuildWithAngga. Mereka secara rutin mengupdate kelas-kelas gratis yang dilengkapi dengan studi kasus menarik, dipandu oleh mentor berpengalaman. Selain itu, Anda akan mendapatkan akses seumur hidup untuk setiap kelas yang diikuti, memungkinkan Anda untuk belajar kapan saja dan di mana saja. Jangan lewatkan kesempatan untuk terus mengasah kemampuan Anda bersama komunitas yang solid dan sumber belajar yang berkualitas. Selamat belajar dan tetap semangat dalam mengembangkan proyek Anda!

Dalam dunia web development, salah satu aspek yang sering menjadi perhatian adalah performa aplikasi. Untuk memastikan website yang kita bangun berjalan dengan lancar, penting bagi kita untuk memahami berbagai teknik optimisasi. Salah satunya adalah dengan mempelajari tipe data array pada Golang. Meskipun Golang sering digunakan untuk backend programming, memahami cara kerja array di Golang dapat membantu kita meningkatkan performa aplikasi Laravel, terutama dalam pengolahan data yang kompleks. Pentingnya Tipe Data Array dalam Web Development Bayangkan kita sedang membangun sebuah website jual beli mobil dengan Laravel. Di website ini, kita memiliki data mobil yang sangat banyak, mulai dari jenis mobil, harga, hingga detail spesifikasi lainnya. Untuk menyimpan dan mengelola data-data ini dengan efisien, kita bisa menggunakan tipe data array pada Golang. Array memungkinkan kita untuk menyimpan banyak data dalam satu variabel dengan tipe yang sama. Ini sangat penting karena dapat mengurangi beban memory dan mempercepat proses pengolahan data. Analogi Sederhana: Bayangkan kita memiliki banyak kotak penyimpanan (array), di mana setiap kotak hanya bisa menyimpan barang dengan tipe yang sama, misalnya hanya buku. Jadi, jika kita ingin menyimpan buku, kita bisa memasukkan semua buku ke dalam satu kotak (array) ini, tanpa perlu membuat banyak variabel berbeda untuk setiap buku. Hal ini tentu lebih efisien dan mudah dikelola. Contoh Penggunaan Tipe Data Array dalam Proyek Website Jual Mobil Online Untuk membangun website jual mobil online, kita sering kali perlu mengelola berbagai macam data seperti daftar mobil, detail spesifikasi, hingga data pelanggan. Tipe data array di Golang sangat berguna untuk menyimpan dan mengelola data-data tersebut dengan efisien. Berikut ini beberapa contoh sederhana hingga kompleks penggunaan array dalam konteks proyek ini. Daftar Mobil Tersedia Misalkan kita memiliki daftar mobil yang tersedia di website. Kita bisa menggunakan array untuk menyimpan nama-nama mobil tersebut. var daftarMobil = [5]string{"Toyota Camry", "Honda Civic", "Ford Mustang", "BMW X5", "Mercedes-Benz C-Class"} Array di atas menyimpan lima jenis mobil yang tersedia di website. Dengan array ini, kita bisa dengan mudah menampilkan daftar mobil di halaman utama. Harga Mobil Untuk menyimpan harga masing-masing mobil, kita bisa menggunakan array yang menyimpan nilai integer. var hargaMobil = [5]int{350000000, 250000000, 500000000, 750000000, 900000000} Harga dari setiap mobil tersimpan dalam urutan yang sama dengan array daftarMobil. Ini memudahkan kita untuk mencocokkan harga dengan mobil yang bersangkutan. Menyimpan Status Ketersediaan Untuk mengetahui apakah mobil tersedia atau tidak, kita bisa menggunakan array boolean. var statusTersedia = [5]bool{true, false, true, true, false} Array ini menunjukkan bahwa mobil pertama, ketiga, dan keempat tersedia, sedangkan mobil kedua dan kelima tidak tersedia. Menyimpan Detail Spesifikasi Jika kita ingin menyimpan detail spesifikasi dari setiap mobil, kita bisa menggunakan array dua dimensi. var spesifikasiMobil = [5][3]string{ {"2000 cc", "Automatic", "Sedan"}, {"1500 cc", "Manual", "Hatchback"}, {"5000 cc", "Automatic", "Coupe"}, {"3000 cc", "Automatic", "SUV"}, {"2500 cc", "Manual", "Sedan"}, } Setiap mobil memiliki tiga detail spesifikasi yang berbeda seperti kapasitas mesin, jenis transmisi, dan tipe bodi. Mengelola Data Pelanggan Untuk menyimpan nama-nama pelanggan yang telah membeli mobil, kita bisa menggunakan array string. var pelanggan = [3]string{"Andi", "Budi", "Citra"} Array ini menyimpan nama pelanggan yang melakukan pembelian. Menghitung Total Penjualan Jika kita ingin menghitung total penjualan dari setiap mobil, kita bisa menggunakan array integer. var penjualan = [5]int{3, 0, 5, 2, 1} Nilai dalam array ini menunjukkan jumlah unit terjual dari masing-masing mobil. Menggabungkan Nama Mobil dan Harganya Kita bisa membuat array yang menyimpan gabungan nama mobil dan harganya dalam format string. var mobilDenganHarga = [5]string{ "Toyota Camry - 350 Juta", "Honda Civic - 250 Juta", "Ford Mustang - 500 Juta", "BMW X5 - 750 Juta", "Mercedes-Benz C-Class - 900 Juta", } Dengan array ini, kita bisa menampilkan informasi mobil beserta harganya secara langsung. Memfilter Mobil yang Tersedia Untuk mencari mobil yang tersedia, kita bisa menggunakan loop pada array status ketersediaan. for i, tersedia := range statusTersedia { if tersedia { fmt.Println(daftarMobil[i]) } } Kode ini akan menampilkan hanya mobil-mobil yang statusnya tersedia. Menampilkan Spesifikasi Berdasarkan Nama Mobil Jika kita ingin menampilkan spesifikasi berdasarkan input nama mobil, kita bisa menggunakan fungsi sederhana. func tampilkanSpesifikasi(namaMobil string) { for i, mobil := range daftarMobil { if mobil == namaMobil { fmt.Println("Spesifikasi:", spesifikasiMobil[i]) } } } tampilkanSpesifikasi("BMW X5") Kode ini akan menampilkan spesifikasi dari mobil yang namanya cocok dengan input yang diberikan. Mengelola Keranjang Pembelian Untuk menyimpan daftar mobil yang dipilih oleh pelanggan sebelum melakukan pembelian, kita bisa menggunakan array dinamis. var keranjangPembelian []string func tambahKeKeranjang(namaMobil string) { keranjangPembelian = append(keranjangPembelian, namaMobil) } tambahKeKeranjang("Toyota Camry") tambahKeKeranjang("Ford Mustang") fmt.Println("Keranjang Pembelian:", keranjangPembelian) Array keranjangPembelian menyimpan mobil-mobil yang dipilih pelanggan sebelum mereka melakukan checkout. Penjelasan lengkap contoh koding var spesifikasiMobil = [5][3]string{ {"2000 cc", "Automatic", "Sedan"}, {"1500 cc", "Manual", "Hatchback"}, {"5000 cc", "Automatic", "Coupe"}, {"3000 cc", "Automatic", "SUV"}, {"2500 cc", "Manual", "Sedan"}, } 1. var spesifikasiMobil = [5][3]string var: Kata kunci ini digunakan untuk mendeklarasikan variabel baru di Golang.spesifikasiMobil: Nama variabel yang kita gunakan untuk menyimpan data array. Nama ini dipilih agar mudah dimengerti bahwa variabel ini menyimpan data spesifikasi mobil.[5][3]: Ini adalah deklarasi ukuran dari array dua dimensi.5: Angka pertama menunjukkan jumlah baris dalam array, yang berarti ada 5 jenis mobil yang spesifikasinya akan disimpan.3: Angka kedua menunjukkan jumlah kolom dalam array, yang berarti ada 3 spesifikasi untuk setiap mobil yang akan disimpan.string: Tipe data dari setiap elemen dalam array. Dalam kasus ini, setiap elemen adalah string yang merepresentasikan informasi spesifikasi mobil. 2. Mengisi Nilai Array Nilai array diisi menggunakan format {} untuk setiap baris dan elemen-elemen string di dalamnya dipisahkan dengan koma ,. Setiap baris merepresentasikan spesifikasi dari satu jenis mobil. Baris 1: {"2000 cc", "Automatic", "Sedan"} "2000 cc": Kapasitas mesin mobil, dalam hal ini 2000 cc."Automatic": Jenis transmisi mobil, yaitu automatic."Sedan": Jenis bodi mobil, yaitu sedan. Baris 2: {"1500 cc", "Manual", "Hatchback"} "1500 cc": Kapasitas mesin mobil, dalam hal ini 1500 cc."Manual": Jenis transmisi mobil, yaitu manual."Hatchback": Jenis bodi mobil, yaitu hatchback. Baris 3: {"5000 cc", "Automatic", "Coupe"} "5000 cc": Kapasitas mesin mobil, dalam hal ini 5000 cc, yang merupakan kapasitas besar untuk mobil sport."Automatic": Jenis transmisi mobil, yaitu automatic."Coupe": Jenis bodi mobil, yaitu coupe, yang biasanya mobil sport atau mewah dengan dua pintu. Baris 4: {"3000 cc", "Automatic", "SUV"} "3000 cc": Kapasitas mesin mobil, dalam hal ini 3000 cc, yang umum untuk mobil jenis SUV."Automatic": Jenis transmisi mobil, yaitu automatic."SUV": Jenis bodi mobil, yaitu SUV (Sport Utility Vehicle), mobil dengan bodi besar dan ground clearance tinggi. Baris 5: {"2500 cc", "Manual", "Sedan"} "2500 cc": Kapasitas mesin mobil, dalam hal ini 2500 cc."Manual": Jenis transmisi mobil, yaitu manual."Sedan": Jenis bodi mobil, yaitu sedan. Penggunaan Array Dua Dimensi Array dua dimensi ini sangat berguna untuk menyimpan data yang memiliki hubungan antara satu baris dengan yang lainnya. Setiap baris menyimpan data dari satu mobil, sedangkan setiap kolom menyimpan tipe spesifikasinya seperti kapasitas mesin, jenis transmisi, dan jenis bodi mobil. Cara Mengakses Data dari Array Dua Dimensi Misalnya, jika kita ingin mengakses spesifikasi transmisi dari mobil ketiga, kita bisa melakukannya seperti ini: fmt.Println(spesifikasiMobil[2][1]) Output: Automatic Penjelasan: spesifikasiMobil[2]: Mengakses baris ketiga dalam array, yaitu spesifikasi mobil ketiga.spesifikasiMobil[2][1]: Mengakses kolom kedua dari baris ketiga, yang berisi informasi jenis transmisi dari mobil ketiga, yaitu "Automatic". Kapan Harus Menggunakan Array atau Slice di Golang Pemilihan antara array atau slice di Golang sangat penting tergantung pada kebutuhan spesifik dalam proyek. Array dan slice adalah struktur data dasar yang digunakan untuk menyimpan koleksi data dengan tipe yang sama. Namun, ada beberapa perbedaan utama yang menentukan kapan kita harus menggunakan salah satu dari mereka. Berikut adalah tiga alasan utama untuk memilih menggunakan array atau slice dalam pengembangan aplikasi. Ukuran Data yang Tetap Array cocok digunakan ketika kita tahu pasti jumlah elemen yang akan disimpan dan jumlah tersebut tidak akan berubah selama masa eksekusi program. Array memiliki ukuran tetap yang ditentukan saat deklarasi, sehingga efisiensi penggunaan memori dapat lebih terjaga. Misalnya, jika kita sedang membangun fitur di website jual mobil untuk menampilkan jumlah kursi dari berbagai jenis mobil yang hanya memiliki 5 opsi tetap, kita bisa menggunakan array. var jumlahKursi = [5]int{2, 4, 5, 7, 8} // Mengakses jumlah kursi dari mobil ke-3 fmt.Println(jumlahKursi[2]) // Output: 5 Pada contoh di atas, kita tahu bahwa hanya ada 5 jenis jumlah kursi yang mungkin, sehingga array dengan panjang tetap sesuai untuk menyimpan data ini. Data yang Dinamis dan Bertambah Slice lebih fleksibel dibandingkan array karena ukurannya dapat berubah selama runtime. Jika kita tidak tahu pasti berapa banyak elemen yang akan ditambahkan atau kita perlu menambah dan menghapus elemen secara dinamis, maka slice adalah pilihan yang lebih tepat. Misalnya, jika kita ingin menambahkan berbagai jenis mobil baru ke dalam daftar secara dinamis berdasarkan input dari user. var daftarMobil []string daftarMobil = append(daftarMobil, "Toyota Camry") daftarMobil = append(daftarMobil, "Honda Civic", "BMW X5") // Menampilkan seluruh daftar mobil fmt.Println(daftarMobil) // Output: [Toyota Camry Honda Civic BMW X5] Pada contoh ini, slice daftarMobil dapat dengan mudah diubah ukurannya dengan menambahkan elemen-elemen baru menggunakan fungsi append(). Manipulasi Data yang Kompleks Slice menyediakan banyak fungsi dan metode built-in yang memudahkan manipulasi data, seperti menambah, menghapus, atau mengiris sebagian data. Jika kita memerlukan berbagai operasi kompleks pada data yang kita simpan, slice sangat direkomendasikan. Misalnya, jika kita ingin mengambil hanya 3 mobil pertama dari daftar mobil yang tersedia. daftarMobil := []string{"Toyota Camry", "Honda Civic", "Ford Mustang", "BMW X5", "Mercedes-Benz C-Class"} // Mengambil tiga mobil pertama mobilFavorit := daftarMobil[:3] fmt.Println(mobilFavorit) // Output: [Toyota Camry Honda Civic Ford Mustang] Dengan slice, kita bisa menggunakan teknik slicing [:3] untuk mengambil sebagian data dari slice utama daftarMobil dengan sangat mudah. Array lebih cocok digunakan ketika ukuran data sudah pasti dan tidak berubah, sedangkan slice lebih fleksibel dan direkomendasikan untuk data yang dinamis serta memerlukan manipulasi lebih lanjut. Memahami kapan menggunakan array atau slice dapat membantu kita dalam menulis kode yang lebih efisien dan sesuai dengan kebutuhan aplikasi yang sedang dibangun. Penutup Menguasai Golang merupakan langkah penting bagi seorang developer yang ingin berkembang di dunia web development modern. Golang dikenal dengan performanya yang tinggi, efisiensi penggunaan memori, serta dukungan untuk concurrency yang sangat baik. Kemampuan ini menjadikan Golang pilihan utama bagi banyak perusahaan besar untuk membangun aplikasi backend yang skalabel dan cepat. Dengan terus belajar dan mengasah kemampuan Golang, peluang karier di industri teknologi akan semakin terbuka lebar. Developer Golang sangat dicari oleh perusahaan yang membutuhkan aplikasi dengan performa tinggi, seperti platform e-commerce, sistem pembayaran, hingga layanan cloud. Dengan keahlian ini, kamu dapat mengisi berbagai posisi strategis seperti backend developer, DevOps engineer, hingga software architect. Agar pembelajaran menjadi lebih terarah, kamu dapat belajar di BuildWithAngga.com. Platform ini menawarkan berbagai kursus berkualitas dengan beberapa benefit utama, seperti: Akses Selamanya: Kamu dapat belajar kapan saja tanpa batasan waktu, sehingga proses pembelajaran menjadi lebih fleksibel.Portfolio Berkualitas Baik: Setiap kelas disusun untuk membantu kamu menghasilkan portfolio yang menarik dan profesional, sesuai dengan standar industri.Bimbingan Mentor Expert: Kamu bisa berdiskusi langsung dengan mentor berpengalaman yang siap membantu menjawab pertanyaan dan memberikan arahan dalam proses pembelajaran. Dengan dukungan penuh dari BuildWithAngga, kamu dapat belajar Golang dengan lebih efektif dan siap bersaing di industri teknologi yang terus berkembang. Jadi, jangan ragu untuk terus belajar dan kembangkan potensimu bersama BuildWithAngga!

Saat kita membangun website langganan katering, penting untuk memahami bahwa pengalaman pengguna atau user experience adalah kunci utama. Tidak hanya soal tampilan yang menarik, tetapi juga performa, kecepatan, dan keamanan. Sebuah website yang lambat atau sering bermasalah bisa membuat calon customer beralih ke kompetitor. Pentingnya User Experience pada Website Katering Analoginya seperti restoran. Bayangkan kita datang ke sebuah restoran yang terlihat menarik dari luar, tapi saat masuk, pelayanannya lambat, makanan tidak sesuai harapan, dan tempatnya kotor. Meski rasa makanannya enak, pengalaman yang buruk tersebut bisa membuat kita enggan kembali. Begitu juga dengan website katering. Website yang lambat atau tidak aman dapat membuat calon pelanggan merasa tidak nyaman, meskipun produk yang ditawarkan bagus. Dalam dunia web development, kita perlu memastikan bahwa website kita tidak hanya berfungsi dengan baik, tetapi juga memberikan pengalaman yang menyenangkan bagi pengguna. Inilah sebabnya mengapa optimasi sangat penting dalam setiap aspek website kita, terutama pada projek yang menggunakan Laravel. Mengapa CRUD Saja Tidak Cukup? Banyak developer yang berfokus pada fitur CRUD (Create, Read, Update, Delete) saja saat membangun aplikasi Laravel. Meskipun ini adalah dasar dari hampir semua aplikasi web, ada beberapa hal penting lainnya yang perlu diperhatikan untuk membuat website kita lebih optimal, aman, dan cepat. Berikut beberapa optimasi yang bisa kita terapkan: Caching: Menggunakan cache dapat mempercepat akses data yang sering di-request oleh user. Laravel memiliki dukungan untuk berbagai jenis cache, seperti file cache, database cache, dan memcached. Dengan caching, kita bisa mengurangi waktu pemrosesan data yang sama berulang kali.Optimasi Query Database: Query yang tidak optimal dapat memperlambat performa website. Gunakan Eloquent ORM dengan bijak dan pastikan untuk memanfaatkan eager loading untuk mengurangi jumlah query yang dieksekusi. Misalnya, daripada menggunakan foreach untuk mengambil data relasi satu per satu, gunakan with() untuk mengambil semua data yang dibutuhkan dalam satu query.Optimasi Autoload: Laravel menggunakan Composer untuk autoloading. Pastikan kita mengoptimalkan autoload class dengan perintah composer dump-autoload -o. Ini akan mengurangi waktu yang dibutuhkan untuk memuat class yang dibutuhkan dalam aplikasi.Mengurangi Ukuran Response: Kita bisa menggunakan teknik kompresi seperti gzip untuk mengurangi ukuran response yang dikirimkan ke browser user. Ini akan mempercepat waktu loading halaman. Selain itu, pastikan kita hanya mengirimkan data yang dibutuhkan oleh user.Keamanan: Gunakan fitur keamanan Laravel seperti CSRF protection, XSS protection, dan validasi input untuk melindungi data user. Keamanan yang baik akan membuat user lebih percaya untuk menggunakan layanan kita.Optimasi Gambar: Gambar yang terlalu besar bisa memperlambat loading halaman. Gunakan gambar dengan resolusi yang tepat dan kompresi yang baik. Kita bisa menggunakan library seperti Intervention Image untuk memanipulasi gambar sebelum disimpan ke server.Monitoring dan Profiling: Gunakan tool seperti Laravel Telescope untuk memantau kinerja aplikasi secara real-time. Kita bisa melihat query yang lambat, request yang memakan waktu lama, dan berbagai hal lain yang bisa dioptimasi. Contoh Implementasi Optimasi Sederhana Misalkan kita memiliki fitur untuk menampilkan daftar menu katering di website. Tanpa optimasi, query yang dieksekusi mungkin memanggil data menu, kategori, dan gambar satu per satu. Ini bisa menyebabkan banyak query yang tidak efisien. Untuk mengoptimalkannya, kita bisa menggunakan eager loading seperti ini: $menus = Menu::with(['category', 'images'])->get(); Dengan menggunakan with(), Laravel hanya akan menjalankan satu query untuk menu, kategori, dan gambar, sehingga performa lebih cepat. Mengapa Laravel Pilihan Tepat untuk Website Langganan Katering? Laravel adalah salah satu framework PHP yang paling populer dan sangat cocok untuk membangun website langganan katering. Mengapa? Karena Laravel memiliki banyak fitur bawaan yang memudahkan developer dalam mengembangkan aplikasi web yang kompleks, termasuk CRUD, autentikasi, manajemen sesi, hingga integrasi API. Selain itu, Laravel sangat fleksibel sehingga bisa ditingkatkan performanya jika kita paham cara melakukan optimasi dengan benar. Dengan Laravel, kita dapat membangun sistem pemesanan dan manajemen langganan yang cepat, aman, dan scalable. Ketika proyek berkembang, Laravel juga menyediakan berbagai tools dan library untuk meningkatkan performa aplikasi tanpa perlu membangun ulang dari awal. Hal-hal yang Perlu Dioptimalkan dalam Proyek Langganan Katering Menggunakan Laravel 11 Penggunaan Redis untuk Cache dan Queue Redis adalah pilihan yang baik untuk mengelola cache dan queue dalam aplikasi Laravel. Dengan memanfaatkan Redis, kita bisa menyimpan data yang sering diakses di dalam memori, sehingga mengurangi beban pada database. Misalnya, untuk menyimpan data user yang sering login, kita bisa menambahkan konfigurasi Redis pada .env: CACHE_DRIVER=redis QUEUE_CONNECTION=redis Kemudian gunakan Redis pada middleware atau logic tertentu: $user = Cache::remember('user:' . $userId, 600, function() use ($userId) { return User::find($userId); }); Mengoptimalkan Query dengan Indexing Pastikan kolom-kolom yang sering digunakan dalam kondisi where atau join memiliki index pada database. Ini akan meningkatkan kecepatan query secara signifikan. Misalnya, jika kita sering mencari data menu berdasarkan category_id, tambahkan index seperti berikut: Schema::table('menus', function (Blueprint $table) { $table->index('category_id'); }); Menggunakan Kompresi HTTP untuk Response Kompresi HTTP seperti gzip dapat mengurangi ukuran response yang dikirimkan ke browser user, sehingga mempercepat waktu loading halaman. Kita dapat mengaktifkan gzip pada server atau menggunakan middleware di Laravel: public function handle($request, Closure $next) { $response = $next($request); $response->header('Content-Encoding', 'gzip'); return $response; } Penerapan Lazy Loading untuk Mengurangi Beban Database Ketika menggunakan Eloquent, hindari lazy loading yang berlebihan. Misalnya, saat menampilkan daftar menu bersama kategori dan gambar, gunakan eager loading untuk mengurangi jumlah query: $menus = Menu::with(['category', 'images'])->get(); Dengan cara ini, kita hanya melakukan satu query untuk mengambil semua data yang diperlukan. Manajemen Session dengan Database atau Redis Untuk proyek besar seperti langganan katering, kita perlu mengelola session dengan lebih efisien. Laravel mendukung session dengan berbagai driver seperti Redis atau database. Ini bisa membantu mengurangi beban pada file system: SESSION_DRIVER=redis Optimasi Penggunaan Storage dengan CDN Jika kita menyimpan banyak gambar menu atau dokumentasi lainnya, lebih baik menggunakan layanan CDN seperti Cloudflare atau AWS S3 untuk menyimpan file tersebut. Kita bisa mengatur storage di Laravel agar terhubung ke CDN: FILESYSTEM_DRIVER=s3 Dan konfigurasi filesystems.php untuk S3: 's3' => [ 'driver' => 's3', 'key' => env('AWS_ACCESS_KEY_ID'), 'secret' => env('AWS_SECRET_ACCESS_KEY'), 'region' => env('AWS_DEFAULT_REGION'), 'bucket' => env('AWS_BUCKET'), 'url' => env('AWS_URL'), ], Penggunaan Model Binding untuk Keamanan dan Efisiensi Manfaatkan route model binding untuk mengurangi query manual dan meningkatkan keamanan. Dengan menggunakan model binding, kita bisa memastikan bahwa hanya data yang benar-benar ada yang akan diproses: Route::get('menu/{menu}', function (Menu $menu) { return view('menu.show', compact('menu')); }); Ini akan secara otomatis mencari menu berdasarkan id dan melemparkan error jika tidak ditemukan. Optimasi Blade View dengan View Composer Jika ada data yang sering digunakan di beberapa view, gunakan View Composer untuk menghindari pengulangan query yang sama: View::composer('partials.menu', function ($view) { $view->with('categories', Category::all()); }); Dengan ini, data kategori akan otomatis tersedia di semua view partials.menu. Meminimalkan Penggunaan Session Start pada Middleware Middleware seperti session start dapat menambah waktu eksekusi jika tidak diperlukan. Gunakan session hanya jika diperlukan pada route tertentu: Route::group(['middleware' => 'web'], function () { Route::get('profile', 'UserController@profile'); }); Monitoring dengan Laravel Telescope Gunakan Laravel Telescope untuk memonitor aplikasi secara real-time. Ini akan membantu kita menemukan query lambat, request yang berat, atau error yang perlu diperbaiki: composer require laravel/telescope php artisan telescope:install php artisan migrate Dengan Telescope, kita bisa melihat log, query yang lambat, dan antrian pekerjaan secara detail. Kesalahan Programmer Pemula Saat Menggunakan Laravel 11 Tanpa Optimasi Ketika baru memulai dengan Laravel, sangat mudah untuk terjebak pada praktik yang kurang optimal. Meskipun Laravel mempermudah pengembangan aplikasi web, ada beberapa kesalahan umum yang sering dilakukan oleh programmer pemula ketika mereka lupa untuk melakukan optimasi pada aplikasi mereka. Berikut ini adalah tiga kesalahan umum beserta contohnya: Menggunakan Query Berulang Kali (N+1 Problem) Kesalahan ini terjadi ketika programmer tidak menyadari bahwa setiap loop yang mengakses relasi data menyebabkan query yang berulang-ulang ke database. Sebagai contoh, ketika menampilkan daftar menu beserta kategori pada halaman utama: $menus = Menu::all(); foreach ($menus as $menu) { echo $menu->category->name; } Pada contoh di atas, setiap kali loop berjalan, Laravel akan mengeksekusi satu query untuk mengambil data kategori dari setiap menu. Jika ada 100 menu, maka akan ada 101 query yang dijalankan. Solusinya adalah menggunakan eager loading: $menus = Menu::with('category')->get(); foreach ($menus as $menu) { echo $menu->category->name; } Dengan cara ini, hanya akan ada dua query yang dieksekusi, satu untuk mengambil semua menu dan satu lagi untuk mengambil semua kategori yang terkait. Mengabaikan Penggunaan Cache Banyak programmer pemula yang tidak memanfaatkan cache, padahal ini adalah salah satu cara paling efektif untuk mengurangi beban pada database dan mempercepat respon aplikasi. Misalnya, ketika mengambil data yang jarang berubah seperti daftar kategori: $categories = Category::all(); // Query ini akan selalu dipanggil setiap kali request dilakukan Untuk mengoptimalkannya, kita bisa menggunakan cache: $categories = Cache::remember('categories', 60, function () { return Category::all(); }); Dengan menggunakan cache, query hanya akan dieksekusi sekali setiap 60 menit, dan data selanjutnya akan diambil dari cache. Ini sangat mengurangi beban pada database dan mempercepat waktu respon. Menggunakan Session atau File Storage untuk Data yang Sering Diakses Menyimpan data yang sering diakses atau berubah-ubah dalam session atau file storage adalah praktik yang kurang baik. Misalnya, menyimpan daftar pesanan pengguna dalam session: session(['orders' => Order::where('user_id', auth()->id())->get()]); Pendekatan ini bisa menyebabkan masalah ketika jumlah data besar, karena akan memakan banyak memori dan memperlambat aplikasi. Solusinya adalah menggunakan database atau cache yang lebih efisien dalam manajemen data: $orders = Cache::remember('orders_user_' . auth()->id(), 60, function () { return Order::where('user_id', auth()->id())->get(); }); Dengan menggunakan cache, kita bisa memastikan bahwa data pesanan diambil dengan lebih cepat tanpa membebani session storage. Menghindari kesalahan-kesalahan ini dan memanfaatkan fitur optimasi yang tersedia di Laravel akan sangat membantu dalam menjaga performa aplikasi agar tetap stabil dan cepat. Sebagai developer, kita harus selalu mencari cara untuk meningkatkan efisiensi kode yang kita tulis. Link atau Panduan untuk Memulai Untuk kamu yang baru ingin mulai belajar Laravel, Buildwithangga menyediakan berbagai kelas yang bisa diakses kapan saja. Langkah pertama yang bisa dilakukan adalah memahami dasar-dasar PHP dan konsep MVC (Model-View-Controller) yang menjadi fondasi dari Laravel. Setelah itu, kamu bisa mengikuti tutorial dasar untuk membuat project sederhana seperti sistem manajemen data dengan fitur CRUD (Create, Read, Update, Delete). Setelah memahami konsep dasar, lanjutkan dengan mempelajari fitur-fitur lanjutan seperti routing, middleware, Eloquent ORM, dan relasi database. Jika ingin lebih mendalami, kamu juga bisa mencoba membuat API dengan Laravel dan mempelajari bagaimana mengintegrasikannya dengan front-end modern seperti Vue.js atau React. Dengan memanfaatkan materi yang ada di Buildwithangga, kamu bisa belajar Laravel secara bertahap, mulai dari dasar hingga tingkat lanjut, dengan bimbingan mentor yang siap membantu jika ada kendala selama proses belajar. Penutup Laravel adalah framework yang cocok dipelajari oleh siapa saja, baik pemula maupun yang sudah berpengalaman, karena menawarkan kemudahan dalam pengembangan aplikasi web yang kompleks dan scalable. Dengan komunitas yang terus berkembang dan dukungan fitur-fitur modern, Laravel diprediksi akan tetap menjadi salah satu framework PHP terpopuler untuk beberapa tahun ke depan. Oleh karena itu, menguasai Laravel bisa menjadi investasi yang sangat berharga, terutama bagi mahasiswa yang sedang mengerjakan proyek skripsi. Untuk mendapatkan pemahaman yang lebih mendalam, kamu bisa belajar Laravel bersama mentor expert dan berpengalaman di Buildwithangga. Dengan akses seumur hidup, kamu akan mendapatkan berbagai benefit, seperti bisa bertanya langsung kepada mentor jika mengalami kendala dalam belajar. Ini akan membantu kamu lebih produktif dan membuat proyek skripsi menjadi lebih menarik dan berkualitas. Jangan lewatkan kesempatan ini untuk meningkatkan skill programming-mu dan jadilah developer yang siap menghadapi tantangan di dunia kerja!

Sebagai seorang web developer, tugas kita bukan hanya sekadar membuat website yang fungsional. Kita juga perlu memastikan bahwa website tersebut dapat diakses dengan cepat, aman, dan mudah dikelola, terutama jika menggunakan framework seperti Laravel 11. Dalam dunia web development, performa dan keandalan website sangat penting untuk memberikan pengalaman terbaik kepada pengguna. Oleh karena itu, kita perlu melakukan beberapa langkah optimisasi pada proyek Laravel 11 kita. Bayangkan sebuah toko online. Jika tokonya berantakan dan sulit ditemukan, pengunjung akan pergi ke tempat lain. Begitu juga dengan website. Jika website lambat atau sering mengalami masalah, pengguna akan beralih ke website lain yang lebih cepat dan stabil. Maka dari itu, penting bagi kita untuk meningkatkan performa dan keandalan website yang kita buat. Mengapa Optimisasi Penting dalam Proyek Laravel 11? Ketika kita bekerja dalam tim dan mengembangkan proyek yang besar, optimisasi sangat penting agar proyek lebih mudah dipelihara dan dikelola bersama-sama. Laravel 11 sendiri sudah menawarkan berbagai fitur yang memudahkan kita dalam membangun website yang kuat, namun ada beberapa hal yang bisa kita lakukan untuk membuatnya lebih baik lagi. Hal ini juga akan meningkatkan skill kita sebagai seorang web developer, karena kita akan lebih memahami bagaimana Laravel bekerja dan bagaimana cara mengoptimalkan penggunaannya. Langkah-langkah Optimisasi Proyek Laravel 11 Untuk memulai optimisasi pada proyek Laravel 11, kita perlu memahami beberapa konsep dasar yang bisa membantu kita dalam meningkatkan performa aplikasi. Berikut ini beberapa langkah yang bisa dilakukan: 1. Menggunakan Caching Caching adalah salah satu cara paling efektif untuk meningkatkan performa aplikasi Laravel. Dengan menyimpan data yang sering diakses di memori, kita bisa mengurangi waktu yang dibutuhkan untuk memproses data tersebut. Laravel menyediakan beberapa jenis caching seperti query caching, view caching, dan route caching. Berikut cara sederhana untuk mengaktifkan caching di Laravel 11: // Mengaktifkan cache pada routes php artisan route:cache // Mengaktifkan cache pada views php artisan view:cache Dengan melakukan caching, kita bisa mengurangi waktu eksekusi aplikasi dan meningkatkan performanya. 2. Menggunakan Eager Loading Eager loading adalah teknik untuk mengurangi jumlah query yang dikirim ke database. Misalnya, ketika kita ingin mengambil data user beserta data postingannya, daripada mengirim dua query yang berbeda, kita bisa menggunakan eager loading untuk mengirim satu query saja. Berikut contoh penggunaan eager loading di Laravel 11: // Mengambil data user beserta data postingannya $users = User::with('posts')->get(); Dengan menggunakan eager loading, kita bisa mengurangi waktu yang dibutuhkan untuk mengambil data dari database. 3. Optimisasi Query Database Optimisasi query adalah langkah penting untuk meningkatkan performa aplikasi Laravel. Kita bisa menggunakan indeks pada tabel database untuk mempercepat proses pencarian data. Selain itu, hindari penggunaan query yang kompleks dan pastikan hanya mengambil data yang dibutuhkan. // Mengambil hanya nama dan email dari tabel users $users = User::select('name', 'email')->get(); Dengan cara ini, kita bisa mengurangi beban pada server database. 4. Menggunakan Observer untuk Memantau Perubahan Data Observer adalah cara yang efektif untuk memisahkan logika bisnis dari model utama. Dengan menggunakan observer, kita bisa memantau perubahan data seperti ketika data dibuat, diperbarui, atau dihapus. Ini sangat berguna untuk menjaga konsistensi data di aplikasi kita. Misalnya, kita bisa menggunakan observer untuk mengirim email notifikasi ketika user baru dibuat. // Membuat observer untuk model User php artisan make:observer UserObserver --model=User Setelah itu, kita bisa mendaftarkan observer tersebut di AppServiceProvider: use App\\\\Models\\\\User; use App\\\\Observers\\\\UserObserver; public function boot() { User::observe(UserObserver::class); } Dengan memanfaatkan observer, kita bisa lebih mudah mengelola logika bisnis dan menjaga kebersihan kode. 5. Memanfaatkan Komposer Autoload Optimisasi Laravel menggunakan autoloading untuk memuat file-file yang dibutuhkan. Kita bisa mengoptimalkan proses ini dengan menggunakan perintah composer dump-autoload -o. Ini akan menghasilkan file autoload yang lebih efisien sehingga aplikasi kita bisa berjalan lebih cepat. composer dump-autoload -o Meningkatkan Skills sebagai Web Developer Dengan melakukan optimisasi pada proyek Laravel 11, kita tidak hanya membuat aplikasi kita lebih cepat dan kuat, tetapi juga meningkatkan pemahaman kita tentang cara kerja Laravel dan bagaimana cara mengoptimalkannya. Ini akan sangat bermanfaat ketika kita bekerja dalam tim atau menangani proyek besar yang memerlukan performa dan keandalan tinggi. Mengoptimalkan Proyek Website Rumah Sakit dengan Laravel 11 Ketika mengerjakan proyek website untuk rumah sakit menggunakan Laravel 11, ada beberapa aspek yang perlu dioptimalkan agar aplikasi berjalan dengan cepat, aman, dan efisien. Optimisasi ini penting karena website rumah sakit sering kali memiliki data yang sensitif dan fitur yang kompleks, seperti manajemen pasien, jadwal dokter, dan pemesanan janji temu. Berikut adalah beberapa hal yang perlu diperhatikan: Memastikan Query Database Efisien Website rumah sakit umumnya memiliki banyak data yang harus dikelola, seperti informasi pasien, dokter, dan rekam medis. Untuk memastikan aplikasi berjalan dengan cepat, penting untuk mengoptimalkan query database agar tidak membebani server. Salah satu caranya adalah dengan menggunakan eager loading untuk mengurangi jumlah query yang dikirim ke database. Contoh penggunaan eager loading: // Mengambil data pasien beserta jadwal konsultasi $patients = Patient::with('appointments')->get(); Dengan menggunakan with(), kita bisa mengambil data pasien dan jadwal konsultasi dalam satu query, sehingga lebih efisien daripada mengambilnya satu per satu. Menggunakan Caching untuk Data yang Sering Diakses Caching dapat meningkatkan performa aplikasi dengan menyimpan data yang sering diakses, seperti daftar dokter atau jadwal praktek. Hal ini akan mengurangi beban pada database karena data yang sama tidak perlu diambil berkali-kali. Laravel menyediakan fitur caching yang mudah digunakan. Contoh penggunaan caching: // Menyimpan daftar dokter dalam cache selama 60 menit $doctors = Cache::remember('doctors', 60, function () { return Doctor::all(); }); Dengan menggunakan Cache::remember(), data dokter akan disimpan dalam cache dan diambil dari sana jika ada permintaan dalam 60 menit ke depan. Mengoptimalkan Middleware untuk Keamanan Keamanan adalah aspek yang sangat penting pada website rumah sakit karena melibatkan data pasien yang sensitif. Laravel 11 menyediakan berbagai macam middleware yang bisa digunakan untuk meningkatkan keamanan aplikasi. Misalnya, kita bisa menggunakan middleware untuk memverifikasi apakah user yang mengakses halaman adalah seorang dokter atau bukan. Contoh penggunaan middleware: // Menambahkan middleware pada route untuk halaman dokter Route::group(['middleware' => ['auth', 'role:doctor']], function () { Route::get('/doctor-dashboard', [DoctorController::class, 'index']); }); Middleware auth memastikan bahwa hanya user yang sudah login yang bisa mengakses halaman tersebut, sementara role:doctor memastikan bahwa hanya user dengan peran dokter yang bisa mengakses halaman dashboard dokter. Optimisasi Penggunaan Storage dan File Handling Website rumah sakit mungkin membutuhkan fitur untuk mengunggah dan menyimpan file, seperti foto pasien atau hasil scan medis. Agar file handling lebih efisien, kita bisa menggunakan sistem penyimpanan Laravel yang mendukung berbagai layanan penyimpanan seperti Amazon S3 atau Google Cloud Storage. Menggunakan penyimpanan cloud dapat mengurangi beban server dan meningkatkan kecepatan akses. Contoh penggunaan storage: // Mengunggah file foto pasien ke storage lokal $filePath = $request->file('photo')->store('patient_photos'); Dengan menggunakan store(), file foto akan disimpan di folder patient_photos yang ada di storage Laravel. Kita bisa dengan mudah mengganti penyimpanan ini ke cloud tanpa harus mengubah kode yang ada. Implementasi Observer untuk Monitoring Perubahan Data Mengelola data pasien atau dokter memerlukan perhatian khusus, terutama jika data tersebut sering berubah. Dengan menggunakan observer, kita bisa memantau perubahan data dan menjalankan logika tertentu seperti mengirim email notifikasi saat data pasien diperbarui atau dokter baru ditambahkan. Contoh implementasi observer dapat dimulai dengan membuat observer untuk model Patient. Gunakan perintah berikut di terminal: php artisan make:observer PatientObserver --model=Patient Setelah observer berhasil dibuat, tambahkan logika yang diinginkan pada file PatientObserver. Misalnya, jika kita ingin mengirim email notifikasi saat data pasien diperbarui, kita bisa menambahkan kode berikut pada fungsi updated: use App\\\\Models\\\\Patient; class PatientObserver { public function updated(Patient $patient) { // Kirim email notifikasi saat data pasien diperbarui Mail::to($patient->email)->send(new PatientUpdated($patient)); } } Terakhir, daftarkan observer ini di AppServiceProvider agar Laravel mengenali dan menggunakan observer yang telah kita buat. Caranya dengan menambahkan kode berikut: use App\\\\Models\\\\Patient; use App\\\\Observers\\\\PatientObserver; public function boot() { Patient::observe(PatientObserver::class); } Dengan implementasi observer ini, kita dapat memastikan bahwa setiap perubahan penting pada data pasien atau dokter dapat dipantau dengan baik dan direspon sesuai kebutuhan aplikasi. Penutup dan saran Laravel adalah salah satu framework PHP yang sangat cocok untuk dipelajari, terutama bagi kamu yang ingin mengembangkan website dengan fitur lengkap dan performa tinggi. Dengan berbagai fitur yang dimilikinya, Laravel telah menjadi pilihan populer di kalangan web developer, dan popularitas ini diperkirakan akan terus meningkat selama beberapa tahun ke depan. Belajar Laravel bukan hanya akan membuka peluang karier yang lebih luas, tetapi juga memudahkan kamu dalam menyelesaikan berbagai proyek, termasuk projek skripsi yang lebih menarik dan inovatif. Untuk memaksimalkan pembelajaran Laravel, kamu bisa belajar bersama mentor expert dan berpengalaman di BuildWithAngga. Di sini, kamu bisa mendapatkan akses seumur hidup ke berbagai materi pembelajaran yang lengkap, serta kesempatan bertanya langsung kepada mentor jika mengalami kendala saat belajar. Dengan dukungan mentor yang siap membantu, proses belajar menjadi lebih produktif dan menyenangkan. Tidak hanya itu, kamu juga bisa bergabung dalam komunitas yang aktif untuk berdiskusi dan saling berbagi ilmu. Jadi, tunggu apa lagi? Yuk, mulai belajar Laravel sekarang juga dan buat proyek skripsi kamu jadi lebih menarik dan bermakna!

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!