Tips All

Pada tutorial ini, kita akan belajar bagaimana membuat website apotek online dengan sistem multi-tenant menggunakan Laravel 11 dan Filament. Dalam sistem ini, terdapat beberapa user dengan hak akses berbeda, seperti super admin dan doctor, di mana masing-masing memiliki fitur yang sesuai dengan perannya. Menggunakan Laravel sebagai framework back-end dan Filament sebagai admin panel, kita dapat membangun website apotek online yang scalable, aman, dan mudah dikelola. Laravel menawarkan fitur-fitur yang memudahkan pengembangan, sedangkan Filament mempermudah pembuatan dashboard admin yang intuitif dan user-friendly. Berikut ini adalah langkah-langkah lengkap dalam membangun projek apotek online multi-tenant ini. 1. Membuat File Model dan Migration Menggunakan Artisan Command Sebelum memulai pengkodean, kita perlu menyiapkan struktur database yang akan digunakan untuk menyimpan data di aplikasi apotek. Tabel-tabel yang kita perlukan meliputi: Categories: Menyimpan kategori obat (misalnya: antibiotik, vitamin, dll.)Medicines: Menyimpan informasi obat yang tersediaPatients: Menyimpan data pasien yang telah mendaftarTransactions: Menyimpan catatan transaksi pembelian obatDoctors: Menyimpan informasi dokter yang terdaftar di sistem Untuk membuat model dan migration, kita menggunakan Artisan command dari Laravel. Jalankan perintah berikut di terminal: php artisan make:model Category -m php artisan make:model Medicine -m php artisan make:model Patient -m php artisan make:model Transaction -m php artisan make:model Doctor -m Perintah di atas membuat model beserta file migration untuk masing-masing entitas. Berikut adalah beberapa contoh migration yang harus disesuaikan untuk setiap tabel. Migration untuk Tabel Categories 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'); } } Migration untuk Tabel Medicines use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateMedicinesTable extends Migration { public function up() { Schema::create('medicines', function (Blueprint $table) { $table->id(); $table->string('name'); $table->text('description'); $table->integer('quantity'); $table->decimal('price', 8, 2); $table->foreignId('category_id')->constrained()->onDelete('cascade'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('medicines'); } } Migration untuk Tabel Patients use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreatePatientsTable extends Migration { public function up() { Schema::create('patients', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->string('phone_number'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('patients'); } } Migration untuk Tabel Transactions use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateTransactionsTable extends Migration { public function up() { Schema::create('transactions', function (Blueprint $table) { $table->id(); $table->foreignId('patient_id')->constrained()->onDelete('cascade'); $table->foreignId('medicine_id')->constrained()->onDelete('cascade'); $table->integer('quantity'); $table->decimal('total_price', 8, 2); $table->timestamps(); }); } public function down() { Schema::dropIfExists('transactions'); } } Migration untuk Tabel Doctors use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateDoctorsTable extends Migration { public function up() { Schema::create('doctors', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->string('phone_number'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('doctors'); } } Setelah seluruh migration selesai dibuat, jalankan perintah berikut untuk meng-migrate struktur database ke dalam aplikasi: php artisan migrate 2. Mengisi Mass Assignment dan Mengatur Relationship pada Model Langkah selanjutnya adalah menambahkan mass assignment dan relationship antar model yang telah kita buat. Dalam Laravel, kita perlu mendefinisikan field apa saja yang bisa diisi secara otomatis melalui mass assignment. Selain itu, kita juga harus mengatur relasi antara tabel yang berhubungan, seperti relasi antara Category dan Medicine, Patient dan Transaction, serta Doctor dan Medicine. 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 medicines() { return $this->hasMany(Medicine::class); } } Model Medicine namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Medicine extends Model { use HasFactory; protected $fillable = ['name', 'description', 'quantity', 'price', 'category_id']; public function category() { return $this->belongsTo(Category::class); } public function transactions() { return $this->hasMany(Transaction::class); } } Model Patient namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Patient extends Model { use HasFactory; protected $fillable = ['name', 'email', 'phone_number']; public function transactions() { return $this->hasMany(Transaction::class); } } Model Transaction namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Transaction extends Model { use HasFactory; protected $fillable = ['patient_id', 'medicine_id', 'quantity', 'total_price']; public function patient() { return $this->belongsTo(Patient::class); } public function medicine() { return $this->belongsTo(Medicine::class); } } Model Doctor namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Doctor extends Model { use HasFactory; protected $fillable = ['name', 'email', 'phone_number']; public function medicines() { return $this->hasMany(Medicine::class); } } 3. Menginstall Filament dan Membuat Akun Super Admin serta Doctor Langkah ini akan membahas cara menginstal Filament dan mengelola hak akses untuk dua jenis pengguna, yaitu super admin dan doctor, dengan fitur yang berbeda. Langkah 1: Menginstal Filament Pertama, pastikan Anda telah menyelesaikan setup model dan relasi database pada proyek Laravel. Filament akan digunakan untuk membangun admin panel yang intuitif dan efisien untuk mengelola data aplikasi seperti medicines, patients, dan transactions. Untuk menginstal Filament, jalankan perintah berikut di terminal: composer require filament/filament Setelah instalasi selesai, Anda perlu melakukan beberapa konfigurasi dasar pada Filament. Langkah 2: Mengonfigurasi Filament Setelah Filament berhasil diinstal, Anda dapat membuat admin panel yang bisa diakses melalui URL khusus, misalnya /admin. Untuk melakukan ini, jalankan perintah berikut: php artisan make:filament-user Perintah ini akan membuat user admin baru yang bisa digunakan untuk login ke dashboard Filament. Anda akan diminta mengisi beberapa informasi seperti email, password, dan nama pengguna. Setelah proses ini selesai, user baru tersebut bisa login ke admin panel. Selain itu, Filament juga memberikan kemudahan untuk membuat custom dashboard, resource management, dan role-based access control (RBAC). Langkah 3: Menambah Role dan Permission untuk Super Admin dan Doctor Kita akan menggunakan Spatie Permission package untuk menambahkan role dan permission pada sistem. Untuk menginstalnya, jalankan perintah berikut: composer require spatie/laravel-permission Setelah instalasi, publish konfigurasi package ini dengan perintah: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" Dan jangan lupa untuk menjalankan migrasi: php artisan migrate Sekarang, kita siap untuk menambahkan role super admin dan doctor. Pertama, tambahkan HasRoles trait ke dalam model User: use Spatie\\\\Permission\\\\Traits\\\\HasRoles; class User extends Authenticatable { use HasRoles; } Langkah 4: Membuat Seeder untuk Menambahkan Super Admin dan Doctor Untuk membuat akun super admin dan doctor, kita akan membuat sebuah seeder. Jalankan perintah berikut untuk membuat file seeder: php artisan make:seeder RoleSeeder Di dalam file RoleSeeder.php, tambahkan kode berikut: namespace Database\\\\Seeders; use Illuminate\\\\Database\\\\Seeder; use Spatie\\\\Permission\\\\Models\\\\Role; use App\\\\Models\\\\User; class RoleSeeder extends Seeder { public function run() { // Membuat role super admin dan doctor $superAdmin = Role::create(['name' => 'super_admin']); $doctor = Role::create(['name' => 'doctor']); // Membuat user super admin $userAdmin = User::create([ 'name' => 'Super Admin', 'email' => 'admin@apotek.com', 'password' => bcrypt('password'), ]); $userAdmin->assignRole($superAdmin); // Membuat user doctor $userDoctor = User::create([ 'name' => 'Doctor', 'email' => 'doctor@apotek.com', 'password' => bcrypt('password'), ]); $userDoctor->assignRole($doctor); } } Seeder ini akan membuat dua user, satu untuk super admin dan satu untuk doctor, serta akan langsung memberikan role yang sesuai kepada masing-masing user. Jangan lupa untuk menjalankan seeder: php artisan db:seed --class=RoleSeeder Setelah seeder dijalankan, kita akan memiliki dua akun dengan role berbeda yang siap digunakan. Langkah 5: Membuat Fitur Khusus untuk Setiap Role Sekarang, kita akan mengatur perbedaan fitur yang bisa diakses oleh masing-masing role. Dalam hal ini, super admin memiliki akses untuk mengelola semua data seperti medicines dan transactions, sedangkan doctor hanya bisa melihat data medicines dan patients. Untuk mengatur hak akses ini, tambahkan middleware role ke dalam route di file web.php. Berikut contohnya: use App\\\\Http\\\\Controllers\\\\MedicineController; use App\\\\Http\\\\Controllers\\\\TransactionController; use App\\\\Http\\\\Controllers\\\\PatientController; Route::middleware(['role:super_admin'])->group(function () { Route::resource('medicines', MedicineController::class); Route::resource('transactions', TransactionController::class); }); Route::middleware(['role:doctor'])->group(function () { Route::get('medicines', [MedicineController::class, 'index'])->name('medicines.index'); Route::get('patients', [PatientController::class, 'index'])->name('patients.index'); }); Dengan konfigurasi di atas, hanya user dengan role super admin yang bisa mengakses dan mengelola data obat dan transaksi, sementara doctor hanya dapat melihat daftar obat dan pasien. 4. Membuat Navigation Blade untuk Role Super Admin dan Doctor Selanjutnya, kita perlu membuat navigasi yang menyesuaikan dengan role masing-masing pengguna. Dengan begitu, pengguna hanya melihat menu yang sesuai dengan hak akses mereka. Di dalam file Blade, kita bisa menambahkan logika untuk memeriksa role user saat ini dan menampilkan menu yang relevan: <ul> @if(auth()->user()->hasRole('super_admin')) <li><a href="{{ route('medicines.index') }}">Kelola Obat</a></li> <li><a href="{{ route('transactions.index') }}">Kelola Transaksi</a></li> @endif @if(auth()->user()->hasRole('doctor')) <li><a href="{{ route('medicines.index') }}">Lihat Obat</a></li> <li><a href="{{ route('patients.index') }}">Lihat Pasien</a></li> @endif </ul> Dengan kode di atas, ketika user super admin login, mereka akan melihat menu untuk mengelola data obat dan transaksi. Sedangkan doctor hanya akan melihat menu untuk melihat data obat dan pasien. Menambahkan Fitur Role dan Permission Management pada Dashboard Filament Setelah kita selesai mengatur role dan permission di aplikasi Laravel, langkah selanjutnya adalah memungkinkan pengguna untuk mengelola roles dan permissions langsung dari dashboard Filament. Ini sangat memudahkan administrator untuk membuat, mengedit, dan menghapus role serta mengatur permissions tanpa harus mengakses kode secara manual. Langkah 1: Membuat Resource untuk Role dan Permission di Filament Filament menyediakan cara yang mudah untuk membuat halaman resource yang terhubung dengan model seperti Role dan Permission. Kita akan membuat resource untuk Role dan Permission menggunakan command artisan. Pertama, buat resource untuk Role: php artisan make:filament-resource Role Command di atas akan menghasilkan sebuah resource yang bisa kita gunakan di dashboard Filament. Selanjutnya, buka file resource yang dihasilkan di app/Filament/Resources/RoleResource.php dan sesuaikan dengan menambahkan field yang diperlukan: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\RoleResource\\\\Pages; use Filament\\\\Forms; use Filament\\\\Tables; use Spatie\\\\Permission\\\\Models\\\\Role; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Form; use Filament\\\\Resources\\\\Table; class RoleResource extends Resource { protected static ?string $model = Role::class; protected static ?string $navigationIcon = 'heroicon-o-shield-check'; public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->unique(Role::class, 'name'), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('name') ->sortable() ->searchable(), Tables\\\\Columns\\\\TextColumn::make('created_at') ->dateTime('d M Y') ->sortable(), ]) ->filters([ // ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListRoles::route('/'), 'create' => Pages\\\\CreateRole::route('/create'), 'edit' => Pages\\\\EditRole::route('/{record}/edit'), ]; } } Langkah di atas akan menambahkan kemampuan untuk membuat, mengedit, dan menghapus roles di dalam dashboard Filament. Sekarang, kita akan melakukan hal yang sama untuk Permission. Jalankan command berikut untuk membuat resource permission: php artisan make:filament-resource Permission Kemudian buka file app/Filament/Resources/PermissionResource.php dan sesuaikan dengan menambahkan field seperti yang kita lakukan pada resource Role: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\PermissionResource\\\\Pages; use Filament\\\\Forms; use Filament\\\\Tables; use Spatie\\\\Permission\\\\Models\\\\Permission; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Form; use Filament\\\\Resources\\\\Table; class PermissionResource extends Resource { protected static ?string $model = Permission::class; protected static ?string $navigationIcon = 'heroicon-o-key'; public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->unique(Permission::class, 'name'), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('name') ->sortable() ->searchable(), Tables\\\\Columns\\\\TextColumn::make('created_at') ->dateTime('d M Y') ->sortable(), ]) ->filters([ // ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListPermissions::route('/'), 'create' => Pages\\\\CreatePermission::route('/create'), 'edit' => Pages\\\\EditPermission::route('/{record}/edit'), ]; } } Dengan menambahkan resource ini, kita sekarang memiliki halaman untuk membuat, mengedit, dan menghapus permissions di dashboard Filament. Langkah 2: Menambahkan Menu Navigasi untuk Role dan Permission Setelah kita membuat resource untuk Role dan Permission, kita juga harus memastikan bahwa mereka muncul di menu navigasi dashboard Filament. Secara default, Filament akan menampilkan resource di sidebar navigasi, tetapi kita bisa mengatur urutannya atau menambahkan ikon khusus agar lebih mudah dikenali. Jika ingin mengatur navigasi dan menambahkan ikon yang sesuai, buka masing-masing file resource (RoleResource.php dan PermissionResource.php) dan pastikan navigationIcon sudah terisi, seperti contoh berikut: protected static ?string $navigationIcon = 'heroicon-o-shield-check'; // Untuk Role protected static ?string $navigationIcon = 'heroicon-o-key'; // Untuk Permission Sekarang, ketika Anda login ke dashboard Filament, Anda akan melihat menu Role dan Permission di sidebar. Super admin dapat menambah, mengedit, dan menghapus role serta permission sesuai kebutuhan sistem. Langkah 3: Mengelola Role dan Permission di Dashboard Filament Setelah semuanya selesai, Anda dapat mengakses dashboard Filament dan mengelola role serta permission melalui interface yang disediakan. Akses halaman ini melalui URL seperti http://your-app-domain/admin, kemudian login menggunakan akun super admin yang telah dibuat sebelumnya. Di dalam dashboard, Anda dapat: Membuat role baru dengan memberikan nama role dan menambahkannya ke user.Menambah permission baru, misalnya akses khusus untuk mengelola data transaksi atau akses khusus untuk melihat laporan.Assign role dan permission ke user yang berbeda. Sebagai contoh, untuk menambahkan permission baru pada sebuah role, Anda bisa membuka halaman Role, pilih salah satu role (misalnya doctor), lalu tambahkan permission seperti view medicines dan view patients. Filament akan secara otomatis menangani relasi antara Role dan Permission di back-end. Kesimpulan Dengan menambahkan fitur Role dan Permission pada dashboard Filament, Anda memberikan fleksibilitas kepada admin untuk mengelola hak akses pengguna dengan lebih mudah tanpa harus memodifikasi kode secara manual. Hal ini sangat penting dalam proyek dengan sistem multi-tenant di mana user memiliki peran dan hak akses yang berbeda-beda. Langkah-langkah di atas meliputi cara menginstal Filament, menambah role dan permission menggunakan Spatie Permission, membuat resource untuk role dan permission di dashboard Filament, serta mengatur navigasi dan fitur untuk mengelola hak akses user. Dengan pendekatan ini, aplikasi apotek online Anda akan memiliki kontrol penuh atas manajemen user dan fitur yang dapat diakses oleh mereka. Penutup Laravel adalah framework yang sangat cocok dipelajari, terutama bagi pengembang web yang ingin membangun aplikasi yang scalable, aman, dan mudah dikelola. Dengan popularitas yang terus meningkat selama beberapa tahun terakhir, Laravel akan tetap menjadi pilihan utama dalam pengembangan aplikasi web, baik untuk proyek kecil maupun besar. Ditambah dengan ekosistem yang terus berkembang, Laravel menawarkan banyak kemudahan dan dukungan komunitas yang luas. Bagi Anda yang sedang mengerjakan proyek skripsi atau sedang mempersiapkan diri untuk menjadi developer web profesional, belajar Laravel bersama BuildWithAngga adalah pilihan yang tepat. Di sini, Anda akan belajar dari mentor expert dan berpengalaman yang akan membantu Anda menguasai Laravel dari dasar hingga tingkat lanjut. Anda juga mendapatkan akses seumur hidup ke semua materi pembelajaran, dengan benefit bertanya langsung kepada mentor jika mengalami kendala dalam belajar. Dengan begitu, Anda bisa lebih produktif dan yakin dalam menyelesaikan proyek-proyek Anda dengan hasil yang lebih menarik dan profesional. Jadi, tunggu apa lagi? Segera bergabung di BuildWithAngga dan mulailah belajar Laravel untuk membangun aplikasi yang mengesankan!

Laravel 11 dan Filament adalah kombinasi yang luar biasa untuk membangun dashboard admin dan CMS untuk website toko baju yang sedang trending. Artikel ini akan memberikan panduan lengkap, mulai dari instalasi hingga mengupload proyek Laravel ke shared hosting. Tutorial ini akan membahas langkah-langkah praktis serta tips penting yang perlu dipahami oleh programmer, terutama pemula yang ingin memperdalam pengetahuan mereka dalam web development. Mengapa Laravel 11 dan Filament? Laravel 11 adalah versi terbaru dari framework PHP yang terkenal dengan kesederhanaan, keamanan, dan skalabilitasnya. Ditambah dengan Filament, sebuah package yang memungkinkan pembuatan panel admin yang powerful dan intuitif, kombinasi ini sangat cocok untuk membangun website modern seperti toko baju. Website toko baju yang memiliki berbagai produk, kategori, dan data pelanggan membutuhkan sistem yang kuat, mudah di-maintenance, serta kaya fitur untuk memudahkan pemilik toko mengelola bisnis mereka. Dengan Laravel 11 dan Filament, kita bisa membangun dashboard admin yang membantu pengelolaan data seperti produk, transaksi, dan pelanggan dengan lebih efisien. Langkah-langkah Membuat Dashboard Website Toko Baju Berikut adalah tahapan-tahapan lengkap dalam membuat dashboard website toko baju menggunakan Laravel 11 dan Filament: 1. Membuat Proyek Laravel 11 Terbaru Menggunakan Composer Langkah pertama, kita perlu menginstall Laravel 11 menggunakan Composer. Composer adalah dependency manager untuk PHP yang membantu mengelola library dan package yang diperlukan dalam proyek Laravel. composer create-project laravel/laravel toko-baju Setelah proses instalasi selesai, kita dapat masuk ke direktori proyek: cd toko-baju Kemudian jalankan server development Laravel: php artisan serve Proyek Laravel 11 Anda sekarang sudah berjalan di browser, biasanya di alamat http://localhost:8000. 2. Menginstall Package Filament PHP dan Membuat User Admin Baru Untuk menambahkan kemampuan CMS atau dashboard admin, kita akan menggunakan Filament. Pertama, instal Filament menggunakan Composer: composer require filament/filament Setelah instalasi selesai, kita perlu menjalankan beberapa perintah untuk membuat dashboard dan user admin: php artisan make:filament-user Ikuti instruksi yang muncul di terminal untuk membuat user admin baru yang akan memiliki akses penuh ke dashboard Filament. 3. Membuat File Migrations Langkah selanjutnya adalah membuat file migrations yang dibutuhkan untuk menyimpan data yang diperlukan dalam proyek toko baju. Kita akan membuat beberapa tabel berikut: Categories: Menyimpan informasi kategori produk.Fashion Designers: Menyimpan data desainer fashion yang bekerja sama dengan toko.Products: Menyimpan informasi produk seperti nama, harga, dan stok.Customers: Menyimpan data pelanggan.Transactions: Menyimpan data transaksi yang dilakukan oleh pelanggan. Jalankan perintah berikut untuk membuat migration file: php artisan make:migration create_categories_table php artisan make:migration create_fashion_designers_table php artisan make:migration create_products_table php artisan make:migration create_customers_table php artisan make:migration create_transactions_table Selanjutnya, buka masing-masing file migration di direktori database/migrations dan atur kolom yang dibutuhkan. Sebagai contoh, berikut adalah contoh migration untuk tabel Products: Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('name'); $table->decimal('price', 8, 2); $table->integer('stock'); $table->unsignedBigInteger('category_id'); $table->unsignedBigInteger('fashion_designer_id'); $table->timestamps(); // Definisi foreign key $table->foreign('category_id')->references('id')->on('categories'); $table->foreign('fashion_designer_id')->references('id')->on('fashion_designers'); }); Setelah semua migration siap, jalankan perintah berikut untuk membuat tabel di database: php artisan migrate 4. Membuat File Models dan Relationship ORM Setelah tabel siap, kita perlu membuat file models untuk setiap tabel. Models di Laravel akan mewakili setiap entitas di database. Untuk membuat model, jalankan perintah berikut: php artisan make:model Product php artisan make:model Category php artisan make:model FashionDesigner php artisan make:model Customer php artisan make:model Transaction Di dalam file model, atur mass assignment dan definisikan relationship antar tabel. Contohnya, untuk model Product, kita bisa menambahkan relationship dengan kategori dan desainer fashion: class Product extends Model { protected $fillable = ['name', 'price', 'stock', 'category_id', 'fashion_designer_id']; public function category() { return $this->belongsTo(Category::class); } public function fashionDesigner() { return $this->belongsTo(FashionDesigner::class); } } 5. Filament Resources untuk Proses CRUD Berikut adalah tata cara lengkap beserta contoh koding untuk Filament Resource pada setiap tabel yang telah dibuat di proyek website toko baju. Kita akan membuat resource Filament untuk setiap tabel, termasuk Categories, Fashion Designers, Products, Customers, dan Transactions. Dengan Filament, kita dapat memudahkan pengguna dalam melakukan proses CRUD (Create, Read, Update, Delete) melalui dashboard admin. 1. Membuat Filament Resource untuk Tabel Categories Pertama, kita akan membuat resource Filament untuk tabel Categories. Jalankan perintah berikut untuk membuat resource: php artisan make:filament-resource Category Perintah ini akan membuat file CategoryResource.php di dalam folder app/Filament/Resources. Mengatur Form pada Categories Resource Di dalam file CategoryResource.php, kita dapat mengatur schema form untuk input data kategori. Misalnya, kita akan meminta nama kategori dengan menggunakan field TextInput: public static function form(Form $form): Form { return $form ->schema([ TextInput::make('name') ->required() ->label('Category Name') ->maxLength(255), ]); } Mengatur Tabel pada Categories Resource Selanjutnya, kita juga dapat mengatur tampilan data kategori dalam bentuk tabel dengan menambahkan kolom: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name')->label('Category Name')->sortable()->searchable(), TextColumn::make('created_at')->label('Created At')->date(), ]); } Dengan konfigurasi ini, pengguna dapat melihat data kategori dalam bentuk tabel, dengan opsi untuk mengurutkan (sortable) dan mencari (searchable) berdasarkan nama kategori. 2. Membuat Filament Resource untuk Tabel Fashion Designers Untuk tabel Fashion Designers, langkah-langkahnya mirip dengan yang sebelumnya. Jalankan perintah berikut: php artisan make:filament-resource FashionDesigner Kemudian buka file FashionDesignerResource.php dan sesuaikan form dan tabelnya. Mengatur Form pada Fashion Designers Resource Di form ini, kita akan menambahkan input untuk nama desainer: public static function form(Form $form): Form { return $form ->schema([ TextInput::make('name') ->required() ->label('Designer Name') ->maxLength(255), TextInput::make('brand') ->label('Brand') ->maxLength(255), ]); } Mengatur Tabel pada Fashion Designers Resource Di tabel, kita akan menampilkan nama desainer dan brand mereka: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name')->label('Designer Name')->sortable()->searchable(), TextColumn::make('brand')->label('Brand')->sortable()->searchable(), TextColumn::make('created_at')->label('Created At')->date(), ]); } 3. Membuat Filament Resource untuk Tabel Products Untuk tabel Products, kita akan membuat resource yang lebih kompleks karena ada relationship dengan kategori dan desainer. Jalankan perintah berikut: php artisan make:filament-resource Product Mengatur Form pada Products Resource Di form produk, kita akan menambahkan input untuk nama produk, harga, stok, kategori, dan desainer. Kategori dan desainer akan menggunakan field Select yang terkait dengan tabel Categories dan Fashion Designers: public static function form(Form $form): Form { return $form ->schema([ TextInput::make('name') ->required() ->label('Product Name') ->maxLength(255), TextInput::make('price') ->required() ->label('Price') ->numeric(), TextInput::make('stock') ->required() ->label('Stock') ->numeric(), Select::make('category_id') ->relationship('category', 'name') ->required() ->label('Category'), Select::make('fashion_designer_id') ->relationship('fashionDesigner', 'name') ->required() ->label('Designer'), ]); } Mengatur Tabel pada Products Resource Di tabel, kita akan menampilkan nama produk, harga, stok, kategori, dan desainer: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name')->label('Product Name')->sortable()->searchable(), TextColumn::make('price')->label('Price')->money('usd')->sortable(), TextColumn::make('stock')->label('Stock')->sortable(), TextColumn::make('category.name')->label('Category'), TextColumn::make('fashion_designer.name')->label('Designer'), TextColumn::make('created_at')->label('Created At')->date(), ]) ->filters([ SelectFilter::make('category_id')->relationship('category', 'name'), ]); } 4. Membuat Filament Resource untuk Tabel Customers Untuk tabel Customers, jalankan perintah berikut: php artisan make:filament-resource Customer Mengatur Form pada Customers Resource Di form pelanggan, kita bisa menambahkan input untuk nama, email, dan nomor telepon: public static function form(Form $form): Form { return $form ->schema([ TextInput::make('name') ->required() ->label('Customer Name') ->maxLength(255), TextInput::make('email') ->required() ->label('Email') ->email(), TextInput::make('phone') ->required() ->label('Phone Number') ->tel(), ]); } Mengatur Tabel pada Customers Resource Tabel untuk pelanggan akan menampilkan nama, email, dan nomor telepon: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name')->label('Customer Name')->sortable()->searchable(), TextColumn::make('email')->label('Email')->sortable()->searchable(), TextColumn::make('phone')->label('Phone Number')->sortable(), TextColumn::make('created_at')->label('Created At')->date(), ]); } 5. Membuat Filament Resource untuk Tabel Transactions Terakhir, untuk tabel Transactions, jalankan perintah: php artisan make:filament-resource Transaction Mengatur Form pada Transactions Resource Form transaksi akan menampilkan input untuk memilih pelanggan, produk, dan jumlah produk yang dibeli: public static function form(Form $form): Form { return $form ->schema([ Select::make('customer_id') ->relationship('customer', 'name') ->required() ->label('Customer'), Select::make('product_id') ->relationship('product', 'name') ->required() ->label('Product'), TextInput::make('quantity') ->required() ->label('Quantity') ->numeric(), ]); } Mengatur Tabel pada Transactions Resource Tabel transaksi akan menampilkan nama pelanggan, nama produk, dan jumlah produk yang dibeli: public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('customer.name')->label('Customer Name')->sortable()->searchable(), TextColumn::make('product.name')->label('Product Name')->sortable(), TextColumn::make('quantity')->label('Quantity')->sortable(), TextColumn::make('created_at')->label('Transaction Date')->date(), ]); } 6. Menampilkan Data di Table Berikut adalah tata cara lengkap menampilkan data menggunakan $table pada Filament Resource untuk setiap tabel yang telah dibuat, yaitu Categories, Fashion Designers, Products, Customers, dan Transactions. Dengan menggunakan $table, kita bisa menampilkan data dari database dalam bentuk tabel yang dapat diurutkan, difilter, dan dicari dengan mudah melalui dashboard admin. 1. Menampilkan Data pada CategoriesResource Untuk menampilkan data kategori, kita bisa menggunakan $table dengan beberapa kolom yang menampilkan informasi seperti nama kategori dan waktu pembuatan. Setiap kolom bisa disesuaikan agar bisa diurutkan (sortable) dan dicari (searchable). Contoh Penggunaan $table pada CategoriesResource public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name') ->label('Nama Kategori') ->sortable() // Kolom ini bisa diurutkan ->searchable(), // Kolom ini bisa dicari TextColumn::make('created_at') ->label('Dibuat Pada') ->date() // Menampilkan tanggal dengan format ->sortable(), ]); } Pada contoh di atas: Kolom name akan menampilkan nama kategori dan bisa diurutkan serta dicari.Kolom created_at akan menampilkan waktu pembuatan kategori dalam format tanggal. 2. Menampilkan Data pada FashionDesignerResource Untuk menampilkan data desainer fashion, kita akan menampilkan nama desainer, brand, dan waktu pembuatan. Setiap kolom juga bisa diurutkan dan dicari. Contoh Penggunaan $table pada FashionDesignerResource public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name') ->label('Nama Desainer') ->sortable() ->searchable(), TextColumn::make('brand') ->label('Brand') ->sortable() ->searchable(), TextColumn::make('created_at') ->label('Dibuat Pada') ->date() ->sortable(), ]); } Pada tabel di atas: name dan brand bisa diurutkan dan dicari untuk memudahkan navigasi di dashboard.created_at menampilkan waktu pembuatan data desainer dalam format tanggal. 3. Menampilkan Data pada ProductResource Tabel Products akan menampilkan nama produk, harga, stok, kategori, dan desainer. Kita juga bisa menambahkan filter untuk kategori agar memudahkan pengguna dalam mencari produk tertentu. Contoh Penggunaan $table pada ProductResource public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name') ->label('Nama Produk') ->sortable() ->searchable(), TextColumn::make('price') ->label('Harga') ->money('idr') // Menampilkan harga dengan format mata uang ->sortable(), TextColumn::make('stock') ->label('Stok') ->sortable(), TextColumn::make('category.name') ->label('Kategori'), TextColumn::make('fashion_designer.name') ->label('Desainer'), TextColumn::make('created_at') ->label('Dibuat Pada') ->date() ->sortable(), ]) ->filters([ SelectFilter::make('category_id') ->relationship('category', 'name') // Filter berdasarkan kategori ->label('Kategori'), ]); } Pada tabel produk: name, price, dan stock bisa diurutkan dan dicari.category.name dan fashion_designer.name menampilkan relasi dengan tabel Categories dan Fashion Designers.created_at menampilkan tanggal pembuatan data produk.Filter pada category_id memungkinkan pengguna untuk memfilter produk berdasarkan kategori. 4. Menampilkan Data pada CustomerResource Untuk tabel Customers, kita akan menampilkan nama pelanggan, email, nomor telepon, dan waktu pendaftaran pelanggan. Contoh Penggunaan $table pada CustomerResource public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name') ->label('Nama Pelanggan') ->sortable() ->searchable(), TextColumn::make('email') ->label('Email') ->sortable() ->searchable(), TextColumn::make('phone') ->label('Nomor Telepon') ->sortable(), TextColumn::make('created_at') ->label('Dibuat Pada') ->date() ->sortable(), ]); } Pada tabel pelanggan: name, email, dan phone dapat diurutkan dan dicari.created_at menampilkan tanggal pendaftaran pelanggan. 5. Menampilkan Data pada TransactionResource Tabel Transactions akan menampilkan nama pelanggan, nama produk, jumlah produk yang dibeli, dan waktu transaksi. Contoh Penggunaan $table pada TransactionResource public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('customer.name') ->label('Nama Pelanggan') ->sortable() ->searchable(), TextColumn::make('product.name') ->label('Nama Produk') ->sortable(), TextColumn::make('quantity') ->label('Jumlah') ->sortable(), TextColumn::make('created_at') ->label('Tanggal Transaksi') ->date() ->sortable(), ]); } Pada tabel transaksi: customer.name dan product.name akan menampilkan nama pelanggan dan produk yang terkait, dengan relasi ke tabel Customers dan Products.quantity menampilkan jumlah produk yang dibeli.created_at menampilkan tanggal transaksi. Dengan menggunakan $table pada setiap Filament Resource, kita bisa menampilkan data dari database dengan cara yang interaktif dan mudah digunakan. Fitur sortable dan searchable memudahkan pengguna dalam mengelola data, sementara fitur filters memberikan opsi untuk memfilter data berdasarkan relasi atau kondisi tertentu. Hal ini sangat berguna untuk proyek-proyek yang melibatkan banyak data seperti toko baju online. Cara Lengkap Mengupload Proyek Laravel ke Shared Hosting Hostinger.com Jika Anda telah menyelesaikan proyek Laravel 11 dan siap menguploadnya ke shared hosting seperti Hostinger.com, berikut ini adalah langkah-langkah lengkap yang perlu Anda ikuti untuk memastikan proyek berjalan dengan baik di server hosting Anda. Persiapan Sebelum Upload: Sebelum mengupload proyek Laravel, pastikan proyek sudah siap dengan hal-hal berikut: Semua dependensi yang diperlukan telah diatur.Database lokal sudah disiapkan dan diverifikasi.Proyek telah diuji di lingkungan lokal untuk memastikan tidak ada bug atau kesalahan besar. Langkah-Langkah Mengupload Proyek Laravel ke Shared Hosting Hostinger: 1. Zip Semua File Proyek Laravel Pertama, zip seluruh file proyek Laravel Anda, kecuali folder vendor dan node_modules. Kedua folder ini bisa dibuat ulang di server hosting, sehingga tidak perlu disertakan dalam file zip untuk menghemat waktu dan ruang penyimpanan. Cara zip file proyek: Pilih seluruh file proyek di folder lokal Anda kecuali vendor dan node_modules.Klik kanan dan pilih opsi untuk Compress atau Zip file.Simpan file hasil kompresi ini dengan nama yang sesuai, misalnya toko-baju.zip. 2. Upload File Zip ke Hosting Menggunakan File Manager atau FTP Ada dua cara untuk mengupload file zip proyek Laravel Anda ke Hostinger: menggunakan File Manager di cPanel Hostinger atau menggunakan FTP Client seperti FileZilla. Metode 1: Menggunakan File Manager Login ke akun Hostinger Anda.Buka hPanel (Hostinger Panel) dan cari opsi File Manager.Masuk ke direktori public_html.Klik tombol Upload dan unggah file zip yang telah Anda buat tadi. Metode 2: Menggunakan FTP (FileZilla) Buka FileZilla atau FTP client lainnya.Masukkan detail akun FTP yang bisa Anda dapatkan dari hPanel Hostinger, termasuk hostname, username, password, dan port.Setelah terhubung, masuk ke direktori public_html.Drag-and-drop file zip proyek ke direktori tersebut. 3. Ekstrak File Zip di Direktori public_html Setelah file zip selesai diupload, langkah berikutnya adalah mengekstrak file tersebut di direktori public_html. Di File Manager, cari file zip proyek Laravel yang sudah diupload.Klik kanan pada file tersebut dan pilih Extract.Ekstrak semua file ke dalam direktori public_html. 4. Jalankan Perintah composer install di Terminal Hosting Setelah semua file diunggah dan diekstrak, Anda harus menjalankan perintah composer install untuk mengunduh semua dependensi yang dibutuhkan oleh Laravel. Di hPanel, buka menu Hosting.Cari opsi SSH Access di Hostinger dan aktifkan jika belum diaktifkan.Gunakan SSH Terminal (bisa dari command prompt atau terminal di lokal Anda) untuk masuk ke server Hostinger menggunakan detail akses SSH Anda.Setelah berhasil masuk, arahkan terminal Anda ke direktori public_html: cd public_htmlJalankan perintah berikut untuk menginstall semua dependensi yang diperlukan: composer installTunggu hingga proses selesai. Composer akan membuat folder vendor yang berisi semua dependensi Laravel. 5. Edit File .env untuk Konfigurasi Hosting Selanjutnya, Anda perlu mengedit file .env yang berisi pengaturan konfigurasi proyek Laravel, seperti detail database, URL proyek, dan lain-lain. Buka File Manager di hPanel dan cari file .env di dalam direktori public_html.Edit file .env untuk menyesuaikan pengaturan proyek dengan environment hosting Anda, seperti mengatur database dan URL. Contoh konfigurasi yang mungkin perlu disesuaikan: APP_NAME=TokoBaju APP_ENV=production APP_KEY=base64:APP_KEY_ANDA APP_URL=https://domainanda.com DB_CONNECTION=mysql DB_HOST=localhost DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=username_database DB_PASSWORD=password_database Catatan: Anda bisa mendapatkan detail database di bagian MySQL Databases di hPanel Hostinger. 6. Atur Permissions untuk Folder Storage dan Bootstrap Cache Setelah mengupload file dan mengedit file .env, Anda perlu mengatur permission pada folder storage dan bootstrap/cache agar Laravel dapat menulis ke dalam folder tersebut. Jalankan perintah berikut di terminal SSH: chmod -R 775 storage chmod -R 775 bootstrap/cache Perintah ini akan memberi Laravel izin untuk menulis dan mengakses folder yang diperlukan. 7. Jalankan Migrasi Database Jika proyek Anda menggunakan database, langkah berikutnya adalah menjalankan migrasi untuk membuat tabel di database yang sudah disiapkan. Pastikan Anda sudah membuat database melalui MySQL Databases di hPanel.Setelah database dibuat dan file .env sudah dikonfigurasi dengan benar, jalankan perintah migrasi berikut melalui terminal SSH: php artisan migrate Perintah ini akan membuat tabel di database sesuai dengan file migrasi yang ada di proyek Anda. 8. Setel Akses Domain dan Public Folder Pada shared hosting, public folder Laravel harus diarahkan ke folder public. Secara default, root direktori Hostinger adalah public_html, namun kita perlu mengarahkan agar hanya folder public yang menjadi root proyek Laravel. Buat file baru bernama .htaccess di dalam folder public_html.Masukkan konfigurasi berikut untuk mengarahkan semua request ke folder public: <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^(.*)$ public/$1 [L] </IfModule> Konfigurasi ini akan mengarahkan semua akses dari domain utama ke folder public di proyek Laravel. Mengupload proyek Laravel 11 ke shared hosting Hostinger.com membutuhkan beberapa langkah penting, mulai dari mengupload file, menjalankan perintah Composer, hingga mengatur permission dan menjalankan migrasi. Dengan mengikuti langkah-langkah di atas, Anda akan dapat menghosting proyek Laravel Anda dengan mudah dan memastikan bahwa aplikasi berjalan dengan baik di lingkungan shared hosting. Ilmu Penting Lainnya untuk Dipelajari Berikut beberapa ilmu penting yang perlu dipelajari oleh programmer pemula untuk meningkatkan kemampuan mereka dalam web development menggunakan Laravel: Middleware: Mengontrol akses ke bagian tertentu dari aplikasi.Service Container: Mengatur dependency injection dan memudahkan pengelolaan class dalam aplikasi.Event dan Listener: Membuat aplikasi lebih modular dengan pemisahan logika.Queue: Memproses pekerjaan dalam antrian untuk meningkatkan performa aplikasi.Testing: Penting untuk memastikan aplikasi bekerja sesuai ekspektasi. Belajar dari Mentor BuildWithAngga Programmer pemula bisa mendapatkan manfaat besar dengan belajar dari mentor BuildWithAngga. Beberapa benefit yang bisa diperoleh: Akses seumur hidup ke semua materi belajar.Bonus konsultasi dengan mentor yang berpengalaman.Grup diskusi antar siswa untuk saling bertukar ilmu dan pengalaman.Persiapan kerja yang lebih matang, dengan materi yang disesuaikan dengan kebutuhan industri. Belajar dari mentor akan membantu mempercepat proses belajar, memberikan insight yang berguna, dan memastikan Anda mendapatkan pemahaman yang mendalam mengenai Laravel dan Filament. Dengan tutorial ini, Anda sekarang memiliki dasar yang kuat untuk membangun dashboard website toko baju yang modern dan kaya fitur menggunakan Laravel 11 dan Filament.

Pada artikel ini, kita akan belajar cara menggunakan fitur seeder dan faker pada Laravel 11. Fitur ini sangat bermanfaat untuk mempercepat kinerja pengembangan website, terutama ketika kita perlu membuat data dummy atau data palsu untuk keperluan pengujian. Bayangkan jika kita harus mengisi data secara manual untuk setiap tabel di proyek kita—tentu sangat memakan waktu. Dengan seeder dan faker, kita bisa membuat data dengan cepat dan efisien. Kita akan membahas secara lengkap bagaimana cara membuat seeder dalam proyek toko kopi online yang memiliki tabel-tabel seperti categories, coffees, ingredients, dan transactions. Di dalam tutorial ini, akan dijelaskan langkah-langkah mulai dari membuat model, mengatur file migration, mengatur fillable pada model, mengatur relationship antar tabel, membuat seeder dan faker, serta menghubungkan proyek pada setting MySQL database lokal. Apa Itu Seeder dan Faker di Laravel? Sebelum kita masuk ke tahap teknis, mari kita pahami dulu apa itu seeder dan faker di Laravel. Seeder adalah fitur di Laravel yang memungkinkan kita untuk mengisi tabel database dengan data dummy secara otomatis. Ini sangat membantu saat kita butuh banyak data untuk pengujian, tanpa perlu menginput data secara manual satu per satu.Faker adalah library yang digunakan Laravel untuk menghasilkan data palsu. Dengan faker, kita bisa membuat berbagai tipe data, seperti nama, alamat, nomor telepon, tanggal, dan masih banyak lagi, dengan cepat dan otomatis. Langkah-Langkah Membuat Seeder di Laravel 11 untuk Proyek Toko Kopi Online Berikut adalah langkah-langkah lengkap untuk membuat seeder di proyek toko kopi online. Dalam proyek ini, kita akan bekerja dengan tabel categories, coffees, ingredients, dan transactions. Membuat Model dan Migration Langkah pertama adalah membuat model beserta migration-nya. Di Laravel, model mewakili struktur tabel dalam database dan migration digunakan untuk mendefinisikan kolom-kolom yang akan ada di dalam tabel tersebut. Buat model Category beserta migration dengan perintah berikut: php artisan make:model Category -m Perintah ini akan membuat file model di folder app/Models dan file migration di folder database/migrations. File migration ini nantinya akan digunakan untuk membuat tabel categories di database. Lakukan hal yang sama untuk Coffees, Ingredients, dan Transactions: php artisan make:model Coffee -m php artisan make:model Ingredient -m php artisan make:model Transaction -m 2. Mengatur File Migration Setelah file migration dibuat, langkah selanjutnya adalah mendefinisikan struktur tabel di masing-masing file migration. Contohnya, untuk tabel categories, buka file migration yang baru dibuat dan edit isinya menjadi seperti ini: public function up() { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); } Lakukan hal serupa untuk tabel coffees, ingredients, dan transactions. Contohnya, tabel coffees bisa memiliki struktur seperti ini: public function up() { Schema::create('coffees', function (Blueprint $table) { $table->id(); $table->string('name'); $table->foreignId('category_id')->constrained(); $table->decimal('price', 8, 2); $table->timestamps(); }); } Tabel coffees memiliki hubungan dengan categories melalui category_id, yang menunjukkan bahwa setiap kopi memiliki kategori. 3. Mengatur Fillable di Model Agar Laravel dapat melakukan mass-assignment (mengisi banyak data sekaligus), kita perlu mengatur properti fillable di model. Contoh untuk model Category: protected $fillable = ['name']; Untuk model Coffee: protected $fillable = ['name', 'category_id', 'price']; Lakukan hal yang sama untuk model Ingredient dan Transaction. 4. Mengatur Relationship Antar Tabel Selanjutnya, kita perlu mendefinisikan relationship antar tabel di model. Contohnya, di model Category, kita dapat mendefinisikan bahwa satu kategori bisa memiliki banyak kopi: public function coffees() { return $this->hasMany(Coffee::class); } Di model Coffee, kita bisa mendefinisikan bahwa setiap kopi berhubungan dengan satu kategori: public function category() { return $this->belongsTo(Category::class); } Untuk Ingredients dan Transactions, kita bisa menggunakan relasi many-to-many jika perlu, namun untuk sekarang, kita fokus pada relasi one-to-many antara categories dan coffees. 5. Membuat Seeder dan Faker Setelah model dan relationship diatur, saatnya membuat seeder. Seeder ini akan digunakan untuk mengisi tabel-tabel dengan data palsu. Laravel sudah menyediakan perintah untuk membuat seeder: php artisan make:seeder CategorySeeder Setelah itu, buka file seeder di folder database/seeders, dan gunakan faker untuk menghasilkan data palsu: use App\\\\Models\\\\Category; use Faker\\\\Factory as Faker; public function run() { $faker = Faker::create(); for ($i = 1; $i <= 10; $i++) { Category::create([ 'name' => $faker->word, ]); } } Lakukan hal yang sama untuk CoffeeSeeder, IngredientSeeder, dan TransactionSeeder. Contoh untuk CoffeeSeeder: use App\\\\Models\\\\Coffee; use App\\\\Models\\\\Category; use Faker\\\\Factory as Faker; public function run() { $faker = Faker::create(); $categories = Category::all(); foreach ($categories as $category) { for ($i = 1; $i <= 5; $i++) { Coffee::create([ 'name' => $faker->word, 'category_id' => $category->id, 'price' => $faker->randomFloat(2, 1, 10), ]); } } } 5. Menjalankan Migration Setelah kita selesai mengatur file migration, langkah berikutnya adalah menjalankan perintah migration untuk membuat tabel di database. Gunakan perintah berikut: php artisan migrate Perintah ini akan membuat semua tabel yang telah didefinisikan dalam file migration (categories, coffees, ingredients, dan transactions) di database MySQL lokal yang sudah terhubung. Pastikan konfigurasi database di file .env sudah benar agar proses migration berjalan lancar. 6. Menjalankan Seeder Setelah semua seeder dibuat, kita bisa menjalankannya dengan perintah berikut: php artisan db:seed --class=CategorySeeder php artisan db:seed --class=CoffeeSeeder php artisan db:seed --class=IngredientSeeder php artisan db:seed --class=TransactionSeeder Ini akan mengisi tabel categories, coffees, ingredients, dan transactions dengan data palsu. 7. Menghubungkan Proyek ke Database MySQL Lokal Agar seeder dapat berjalan, pastikan kita sudah menghubungkan proyek Laravel ke database MySQL lokal. Buka file .env dan atur konfigurasi database seperti berikut: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=toko_kopi DB_USERNAME=root DB_PASSWORD= Pastikan juga MySQL sudah berjalan di komputer lokal. Penutup Laravel terus berkembang menjadi salah satu framework web development yang paling populer di dunia karena berbagai update menarik yang dirilis secara berkala. Setiap pembaruan membawa fitur-fitur baru yang tidak hanya memudahkan para developer, tetapi juga mempercepat proses pengembangan aplikasi. Dari fitur keamanan yang semakin baik hingga peningkatan kinerja dan dokumentasi yang komprehensif, Laravel terus menjaga reputasinya sebagai framework yang aman, fleksibel, dan mudah dipelajari. Dengan kemudahan dan fleksibilitas yang ditawarkan, Laravel memungkinkan developer untuk membangun aplikasi skala kecil hingga besar dengan lebih cepat dan efisien. Selain itu, Laravel terus mendukung para developer dengan tools dan paket-paket yang terus diperbarui, sehingga memudahkan untuk menangani berbagai kebutuhan proyek, dari pengelolaan database, otentikasi, hingga pengembangan API. Bagi Anda yang ingin terus memperdalam ilmu Laravel atau bahkan belajar framework ini dari nol, Buildwithangga adalah tempat yang tepat. Mereka secara rutin menghadirkan kelas-kelas gratis dengan studi kasus nyata yang dapat langsung diterapkan dalam proyek Anda. Studi kasus ini membantu Anda memahami cara mengimplementasikan Laravel dalam skenario kehidupan nyata, sehingga Anda lebih siap dalam menghadapi tantangan proyek web development sesungguhnya. Selain itu, Buildwithangga juga menawarkan akses kelas seumur hidup yang memberikan Anda kebebasan untuk belajar kapan saja tanpa batasan waktu. Anda juga dapat belajar dari mentor berpengalaman yang siap membimbing dan menjawab pertanyaan Anda di sepanjang proses belajar. Dengan adanya fitur diskusi kelompok, Anda juga bisa bertukar pikiran dengan sesama pelajar, meningkatkan pemahaman Anda tentang topik yang sedang dipelajari. Pantau terus website Buildwithangga untuk tidak ketinggalan update kelas terbaru dan kesempatan belajar gratis yang bisa membantu meningkatkan skill Anda sebagai developer Laravel. Ini adalah langkah tepat untuk mengembangkan karir Anda di bidang web development dan menjadi lebih siap menghadapi berbagai proyek teknologi yang lebih kompleks di masa depan.

Di era digital seperti sekarang, website desa memiliki peran yang sangat penting dalam mengelola dan mendukung pertumbuhan ekonomi desa. Dengan adanya website desa, semua informasi terkait perkembangan ekonomi, kegiatan masyarakat, layanan publik, serta peluang usaha di desa bisa disebarluaskan secara lebih cepat dan efisien. Website desa juga berfungsi sebagai jembatan untuk meningkatkan transparansi dan keterlibatan warga dalam pengambilan keputusan di tingkat lokal. Selain itu, website desa dapat menjadi media untuk mempromosikan produk lokal atau pariwisata desa, yang pada akhirnya akan meningkatkan perekonomian desa tersebut. Fitur Penting dalam Pengelolaan Website Desa Ada beberapa fitur penting yang harus ada dalam website pengelolaan desa untuk memastikan fungsionalitas dan kemudahan penggunaan. Beberapa fitur tersebut antara lain: Layanan Informasi Publik: Informasi terkait administrasi desa, layanan kependudukan, serta pengumuman resmi dari pemerintah desa.Toko Online: Tempat warga desa memasarkan produk-produk lokal seperti kerajinan tangan, makanan khas, dan sebagainya.Manajemen Acara: Untuk mengelola berbagai acara dan kegiatan yang diadakan di desa, baik acara tradisional, olahraga, maupun kegiatan sosial.Sistem Pengelolaan Pengguna: Pengaturan hak akses berdasarkan peran seperti admin desa, perangkat desa, warga desa, dan pengunjung.Struktur Organisasi: Menampilkan struktur pemerintahan desa dan organisasi terkait lainnya untuk meningkatkan transparansi. Membangun Website Desa dengan Laravel 11 Laravel 11 adalah pilihan yang tepat untuk membangun website desa karena framework ini menyediakan berbagai fitur yang memudahkan dalam pengembangan website secara cepat, aman, dan scalable. Dengan fitur-fitur seperti authentication, authorization, dan integrasi yang baik dengan berbagai package, Laravel 11 memungkinkan kita membangun fitur-fitur seperti Role-Based Access Control (RBAC) dengan cepat dan efisien. Salah satu package yang sangat populer untuk menangani RBAC adalah Spatie Permission. Implementasi Lengkap RBAC dengan Spatie Permission di Laravel 11 untuk Website Desa Dalam mengimplementasikan Role-Based Access Control (RBAC) dengan Spatie Permission pada proyek website desa, kita akan melalui beberapa tahapan, mulai dari membuat model yang dibutuhkan, menambahkan field-field pada migrations, mengatur relationship antar model, menggunakan factory dan seeder, serta penerapan middleware pada navigasi yang berbeda untuk setiap role dan fitur. 1. Install Laravel dan Spatie Permission Pertama, kita perlu menginstal Laravel 11 dan package Spatie Permission: composer require spatie/laravel-permission Setelah itu, kita jalankan perintah untuk mempublikasi file konfigurasi dan migrasi dari Spatie: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" php artisan migrate 2. Membuat Model dan Migrations untuk Proyek Dalam proyek ini, kita akan membuat beberapa model dan tabel, yaitu users, online_stores, events, roles, dan structure_of_people. Setiap model ini akan memiliki field-field khusus yang disesuaikan dengan kebutuhan website desa. a. Membuat Model User Laravel sudah menyediakan model User secara default. Namun, kita perlu menambahkan relasi dengan role dan permission. // User.php use Spatie\\\\Permission\\\\Traits\\\\HasRoles; class User extends Authenticatable { use HasRoles; protected $fillable = [ 'name', 'email', 'password', ]; public function stores() { return $this->hasMany(OnlineStore::class); } public function events() { return $this->hasMany(Event::class); } } b. Membuat Model OnlineStore php artisan make:model OnlineStore -m Pada migration OnlineStore, kita akan menambahkan field user_id untuk relasi one-to-many antara user dan toko online. // create_online_stores_table.php Schema::create('online_stores', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('user_id'); $table->string('store_name'); $table->text('description'); $table->timestamps(); $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade'); }); Kemudian di model OnlineStore, kita tambahkan relasi ke model User. // OnlineStore.php class OnlineStore extends Model { protected $fillable = ['user_id', 'store_name', 'description']; public function user() { return $this->belongsTo(User::class); } } c. Membuat Model Event php artisan make:model Event -m Pada migration Event, kita tambahkan field user_id untuk relasi one-to-many. // create_events_table.php Schema::create('events', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('user_id'); $table->string('event_name'); $table->date('event_date'); $table->timestamps(); $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade'); }); Di model Event, tambahkan relasi ke model User. // Event.php class Event extends Model { protected $fillable = ['user_id', 'event_name', 'event_date']; public function user() { return $this->belongsTo(User::class); } } d. Membuat Model StructureOfPeople php artisan make:model StructureOfPeople -m Pada migration StructureOfPeople, kita tambahkan field yang relevan. // create_structure_of_people_table.php Schema::create('structure_of_people', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('position'); $table->timestamps(); }); Kemudian di model StructureOfPeople: // StructureOfPeople.php class StructureOfPeople extends Model { protected $fillable = ['name', 'position']; } 3. Mengatur Relationship pada Setiap Model Setiap model sudah diatur untuk memiliki relasi one-to-many sesuai dengan struktur yang diperlukan di website desa. User memiliki banyak OnlineStore.User memiliki banyak Event. 4. Menggunakan Factory dan Seeder a. Factory untuk User Kita bisa membuat factory untuk model User untuk menghasilkan data dummy: php artisan make:factory UserFactory --model=User Isi UserFactory dengan contoh data berikut: // UserFactory.php public function definition() { return [ 'name' => $this->faker->name(), 'email' => $this->faker->unique()->safeEmail(), 'password' => bcrypt('password'), ]; } b. Seeder untuk User, Role, dan Permission Selanjutnya, kita buat seeder untuk menambahkan data pengguna beserta role dan permission: php artisan make:seeder RolePermissionSeeder Isi RolePermissionSeeder sebagai berikut: // RolePermissionSeeder.php use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; public function run() { // Membuat roles Role::create(['name' => 'admin_desa']); Role::create(['name' => 'perangkat_desa']); Role::create(['name' => 'warga_desa']); Role::create(['name' => 'pengunjung']); // Membuat permissions Permission::create(['name' => 'manage_online_store']); Permission::create(['name' => 'manage_events']); Permission::create(['name' => 'manage_structure']); // Menambahkan role dan permission ke user $admin = User::factory()->create(); $admin->assignRole('admin_desa'); } Jalankan seeder: php artisan db:seed --class=RolePermissionSeeder 5. Penerapan Middleware dan Navigasi Berdasarkan Role Sekarang kita bisa menerapkan middleware untuk membatasi akses berdasarkan role dan permission. Route::group(['middleware' => ['role:admin_desa']], function() { Route::get('/admin/dashboard', [AdminController::class, 'index']); Route::get('/admin/stores', [StoreController::class, 'index']); Route::get('/admin/events', [EventController::class, 'index']); }); Route::group(['middleware' => ['role:warga_desa']], function() { Route::get('/warga/stores', [StoreController::class, 'manageOwn']); Route::get('/warga/events', [EventController::class, 'create']); }); Dengan middleware ini, hanya admin_desa yang dapat mengakses seluruh toko dan acara, sementara warga_desa hanya dapat mengelola toko dan acara milik mereka sendiri. 5 Kesalahan Umum dalam Implementasi RBAC dengan Spatie Laravel 11 Tidak Memahami Perbedaan antara Roles dan Permissions: Beberapa developer sering menyamakan role dan permission. Padahal, role adalah sekumpulan izin (permissions) yang diberikan kepada pengguna, sementara permission adalah izin spesifik yang mengatur akses ke fitur tertentu. Role dapat berisi beberapa permissions dan dapat diberikan kepada banyak pengguna. Contoh kode: // Membuat role dan permission secara terpisah use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; // Membuat role Role::create(['name' => 'admin_desa']); // Membuat permission Permission::create(['name' => 'manage_online_store']); // Memberikan permission ke role $role = Role::findByName('admin_desa'); $role->givePermissionTo('manage_online_store'); Mengabaikan Middleware untuk Mengamankan Route: Salah satu kesalahan umum adalah tidak menerapkan middleware yang membatasi akses berdasarkan role atau permission. Middleware ini sangat penting untuk memastikan pengguna hanya dapat mengakses fitur yang sesuai dengan hak akses mereka. Contoh kode: Route::group(['middleware' => ['role:admin_desa']], function() { Route::get('/admin/dashboard', [AdminController::class, 'index']); }); Route::group(['middleware' => ['permission:manage_online_store']], function() { Route::get('/store/manage', [StoreController::class, 'manage']); }); Tidak Menggunakan Cache Permissions: Setiap kali aplikasi memeriksa role atau permission, aplikasi melakukan query ke database. Hal ini bisa memperlambat performa jika tidak menggunakan caching. Developer sering lupa untuk mengaktifkan caching yang disediakan oleh Spatie Permission. Contoh kode untuk mengaktifkan caching: // Menjalankan command untuk cache role dan permission php artisan permission:cache-reset Hardcoding Role dan Permission di Controller: Mengatur role dan permission langsung di controller tanpa menggunakan mekanisme yang lebih fleksibel dapat menyebabkan kesulitan maintenance di masa depan. Sebaiknya, role dan permission dikelola melalui seeder atau command. Contoh kesalahan: public function index() { if (auth()->user()->role != 'admin_desa') { abort(403, 'Akses ditolak'); } } Solusi: public function index() { if (!auth()->user()->hasRole('admin_desa')) { abort(403, 'Akses ditolak'); } } Tidak Melakukan Testing pada Fitur RBAC: Banyak developer tidak melakukan pengujian (testing) yang cukup untuk memastikan bahwa fitur RBAC berfungsi dengan baik. Pengujian sangat penting, terutama ketika ada perubahan pada role atau permission, untuk memastikan aplikasi tetap aman. Contoh kode untuk pengujian: public function test_admin_can_access_dashboard() { $admin = User::factory()->create(); $admin->assignRole('admin_desa'); $response = $this->actingAs($admin)->get('/admin/dashboard'); $response->assertStatus(200); } public function test_non_admin_cannot_access_dashboard() { $user = User::factory()->create(); $response = $this->actingAs($user)->get('/admin/dashboard'); $response->assertStatus(403); } Dengan menghindari kesalahan-kesalahan ini, developer dapat memastikan implementasi RBAC berjalan dengan baik dan aman. Belajar Lebih Lanjut dengan Buildwithangga Jika Anda ingin memperdalam pengetahuan tentang Laravel dan fitur-fitur penting lainnya dalam pengembangan web, Buildwithangga adalah pilihan tepat. Di sini, Anda akan mendapatkan akses ke kursus berkualitas dengan berbagai manfaat yang mendukung perjalanan belajar Anda. Dengan akses seumur hidup, Anda bisa belajar kapan saja tanpa batasan waktu, menjadikan pembelajaran fleksibel sesuai dengan kesibukan Anda. Selain itu, bonus konsultasi dengan mentor memungkinkan Anda bertanya langsung kepada para ahli, mempercepat pemahaman tentang topik yang sedang dipelajari. Tidak hanya itu, grup diskusi antar siswa memberikan kesempatan untuk berdiskusi, berbagi pengalaman, dan memecahkan masalah secara kolaboratif dengan sesama pelajar. Persiapan Anda dalam menghadapi dunia kerja juga akan semakin matang dengan dukungan persiapan kerja yang disediakan oleh Buildwithangga. Kursus ini dirancang untuk memberikan keterampilan praktis yang dicari oleh perusahaan, membuat portofolio yang menarik, dan meningkatkan peluang karir Anda sebagai web developer profesional. Dengan pembelajaran yang terstruktur dan materi yang selalu up-to-date, Anda akan lebih siap untuk menghadapi tantangan dan menjadi lebih kompetitif di pasar kerja. Mulailah perjalanan Anda bersama Buildwithangga, dan buat portofolio proyek nyata yang dapat menunjukkan kemampuan Anda dalam pengembangan web.

Membangun sebuah website yang baik tidak hanya tentang tampilan yang menarik, tetapi juga tentang bagaimana data di dalamnya dikelola. Salah satu aspek terpenting dalam pengelolaan data adalah desain database. Database yang didesain dengan baik akan mempermudah proses maintenance dan memperbesar skala sistem di masa depan. Salah satu cara terbaik untuk mengelola data di dalam database adalah dengan memahami dan menggunakan relasi antar tabel, seperti One to Many. Dalam artikel ini, kita akan membahas tentang cara membangun relasi One to Many menggunakan Laravel 11. Selain itu, kita juga akan melihat contoh implementasi pada proyek website pemesanan kopi, serta membahas beberapa kesalahan umum yang sering terjadi ketika mengatur relasi tabel. Artikel ini ditulis dengan gaya yang mudah dipahami, sehingga cocok untuk pemula yang baru belajar Laravel maupun programmer yang ingin mengasah kembali pengetahuan mereka. Pentingnya Menyimpan Data dengan Baik dalam Database Ketika kita mengembangkan sebuah website, terutama yang bersifat dinamis, kita seringkali perlu menyimpan data penting untuk memberikan pengalaman pengguna yang lebih baik. Misalnya, pada sebuah website pemesanan kopi, kita perlu menyimpan data pelanggan, kategori kopi, lokasi toko, dan berbagai informasi lainnya agar pengguna dapat melakukan pemesanan dengan mudah. Database adalah solusi yang ideal untuk menyimpan semua data tersebut secara terstruktur dan mudah diakses. Dengan menyimpan data secara benar, kita bisa memudahkan pengguna dalam berinteraksi dengan sistem, seperti mencari produk yang diinginkan, melihat kategori tertentu, atau menemukan lokasi toko terdekat. Apa Itu Relasi One to Many? Relasi One to Many adalah salah satu jenis relasi dalam database yang menunjukkan bahwa satu entitas dapat memiliki banyak entitas lain yang terkait dengannya. Contohnya, dalam sebuah website pemesanan kopi, satu kategori kopi bisa memiliki banyak produk kopi. Dengan kata lain, setiap kategori (satu) bisa memiliki beberapa produk kopi (banyak). Mari kita lihat bagaimana cara mengimplementasikan relasi One to Many menggunakan Laravel 11. Implementasi Relasi One to Many di Laravel 11 Di Laravel, kita dapat mengelola relasi antar tabel dengan sangat mudah menggunakan Eloquent ORM. Mari kita implementasikan relasi One to Many pada proyek Order Coffee. Misalkan kita memiliki tabel-tabel berikut: customers: Menyimpan data pelanggan.categories: Menyimpan data kategori kopi.coffees: Menyimpan data produk kopi.beverages: Menyimpan data minuman selain kopi.store_locations: Menyimpan data lokasi toko. Kita akan fokus pada relasi antara categories dan coffees. Setiap kategori bisa memiliki banyak produk kopi, dan setiap produk kopi hanya bisa masuk ke satu kategori. Langkah 1: Membuat Model dan Migrasi Pertama-tama, kita perlu membuat model dan migrasi untuk tabel categories dan coffees. php artisan make:model Category -m php artisan make:model Coffee -m Migrasi untuk tabel categories mungkin akan terlihat seperti ini: Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); Sedangkan migrasi untuk tabel coffees: Schema::create('coffees', function (Blueprint $table) { $table->id(); $table->string('name'); $table->foreignId('category_id')->constrained()->onDelete('cascade'); $table->timestamps(); }); Dalam tabel coffees, kita menambahkan kolom category_id untuk menyimpan referensi ke tabel categories. Kolom ini juga diberi foreign key constraint agar relasi tetap konsisten. Langkah 2: Menentukan Relasi di Model Setelah migrasi selesai, kita bisa mendefinisikan relasi di model. Di model Category, kita tambahkan fungsi berikut untuk menunjukkan bahwa kategori memiliki banyak produk kopi. class Category extends Model { public function coffees() { return $this->hasMany(Coffee::class); } } Sedangkan di model Coffee, kita tambahkan fungsi berikut untuk menunjukkan bahwa produk kopi hanya memiliki satu kategori. class Coffee extends Model { public function category() { return $this->belongsTo(Category::class); } } Langkah 3: Menggunakan Relasi di Controller Setelah relasi didefinisikan, kita bisa mulai menggunakan relasi ini di controller. Misalnya, untuk menampilkan semua kopi dari kategori tertentu, kita bisa menggunakan relasi yang sudah kita buat. $category = Category::find(1); $coffees = $category->coffees; foreach ($coffees as $coffee) { echo $coffee->name; } Di sini, kita mengambil kategori dengan ID 1 dan kemudian mengambil semua produk kopi yang ada di kategori tersebut. Kesalahan Umum dalam Mengatur Relasi Tabel Meskipun Laravel mempermudah pengaturan relasi antar tabel, ada beberapa kesalahan umum yang sering dilakukan oleh programmer, terutama bagi yang baru belajar. 1. Lupa Menambahkan Foreign Key Salah satu kesalahan paling umum adalah tidak menambahkan foreign key di tabel yang seharusnya memiliki relasi. Sebagai contoh, jika kita lupa menambahkan foreign key di tabel coffees, maka relasi antara categories dan coffees tidak akan berjalan dengan baik. Contoh kesalahan: Schema::create('coffees', function (Blueprint $table) { $table->id(); $table->string('name'); // Lupa menambahkan category_id sebagai foreign key $table->timestamps(); }); 2. Tidak Menangani Cascade Delete Saat mendesain relasi One to Many, penting untuk menangani penghapusan data dengan benar. Jika kita tidak menggunakan cascade delete, maka saat kita menghapus sebuah kategori, produk kopi yang terkait dengannya tidak akan terhapus, dan ini dapat menyebabkan data yang tidak konsisten. Contoh kesalahan: Schema::create('coffees', function (Blueprint $table) { $table->id(); $table->string('name'); $table->foreignId('category_id')->constrained(); // Lupa menambahkan onDelete('cascade') $table->timestamps(); }); 3. Tidak Menggunakan Eager Loading Kesalahan lainnya adalah tidak menggunakan eager loading saat mengambil data yang memiliki relasi. Ini bisa menyebabkan n+1 query problem, di mana aplikasi mengirimkan terlalu banyak query ke database, sehingga memperlambat performa. Contoh kesalahan: $categories = Category::all(); foreach ($categories as $category) { // Ini akan mengirimkan query tambahan untuk setiap kategori foreach ($category->coffees as $coffee) { echo $coffee->name; } } Solusi yang benar adalah menggunakan eager loading: $categories = Category::with('coffees')->get(); foreach ($categories as $category) { foreach ($category->coffees as $coffee) { echo $coffee->name; } } Belajar Lebih Lanjut dengan Buildwithangga Jika kamu serius ingin memperdalam pengetahuan tentang Laravel dan memahami cara mengelola database dengan optimal, Buildwithangga adalah tempat yang tepat untuk memulai. Platform ini menyediakan berbagai kelas yang dirancang untuk mencakup semua level kemampuan, mulai dari pemula yang baru terjun ke dunia pemrograman hingga developer berpengalaman yang ingin memperbarui skill mereka. Di Buildwithangga, kamu tidak hanya mendapatkan materi yang lengkap dan terstruktur, tetapi juga berbagai keuntungan lain yang akan membantu mempercepat proses belajar kamu. Berikut ini beberapa manfaat yang bisa kamu dapatkan: Akses Seumur Hidup ke Semua Materi: Setiap materi yang sudah kamu pelajari akan tetap bisa diakses kapan saja tanpa batas waktu. Ini memungkinkan kamu untuk belajar dengan ritme sendiri, tanpa tekanan waktu, serta mengulang kembali pelajaran jika diperlukan.Konsultasi Bonus dengan Mentor Berpengalaman: Salah satu fitur unggulan dari Buildwithangga adalah kesempatan untuk berkonsultasi langsung dengan mentor yang ahli di bidangnya. Kamu bisa mendapatkan feedback personal, menyelesaikan masalah coding yang kompleks, dan mendapatkan wawasan industri dari para profesional.Grup Diskusi dengan Sesama Pelajar: Di samping akses ke materi, kamu juga akan bergabung dengan komunitas belajar yang solid. Grup diskusi ini memungkinkan kamu untuk bertukar ide, berbagi pengalaman, dan belajar bersama dengan pelajar lain. Belajar dalam komunitas sering kali mempercepat proses pemahaman dan membuat proses belajar menjadi lebih interaktif dan menyenangkan.Persiapan Kerja Lebih Matang: Materi yang diajarkan di Buildwithangga disesuaikan dengan kebutuhan industri saat ini. Kamu akan belajar keterampilan yang relevan untuk pasar kerja, termasuk implementasi proyek nyata dan studi kasus. Dengan mengikuti kelas ini, kamu akan lebih siap menghadapi tantangan dunia kerja dan mampu bersaing di industri pengembangan web. Buildwithangga tidak hanya memberikan materi pembelajaran, tetapi juga memberikan pengalaman belajar yang terarah dan menyeluruh. Dengan mentor berpengalaman dan komunitas pendukung, kamu bisa mengembangkan kemampuan coding dengan cepat, menyelesaikan tantangan proyek, dan siap menjadi developer yang kompetitif di pasar kerja yang semakin ketat. Jadi, tunggu apa lagi? Bergabunglah dengan Buildwithangga, nikmati akses ke semua manfaat ini, dan tingkatkan karier kamu sebagai developer profesional yang handal.

Pelajari cara menerapkan Role-Based Access Control (RBAC) di Laravel 11 dengan efektif untuk website toko obat. Tutorial ini menjelaskan langkah-langkah menggunakan package Spatie Role Permission, memberikan contoh kode lengkap untuk setiap peran pengguna seperti pemilik toko, kasir, customer, dan penulis artikel, serta membahas kesalahan umum yang perlu dihindari dalam penerapan RBAC. Membangun website toko obat tentunya bukan pekerjaan yang mudah. Ada banyak fitur yang perlu disiapkan, dan setiap pengguna memiliki peran serta akses yang berbeda-beda. Misalnya, pemilik toko dapat mengelola seluruh operasional, kasir memiliki akses untuk transaksi, customer hanya dapat melihat dan membeli produk, sedangkan penulis artikel bertanggung jawab dalam menulis konten untuk promosi atau edukasi. Fitur-fitur ini bisa kita kelola menggunakan RBAC (Role-Based Access Control) di Laravel 11. Mengapa RBAC Penting di Website Toko Obat? Setiap toko obat online tentu memiliki banyak pengguna dengan tugas yang berbeda-beda. Berikut adalah beberapa contoh fitur yang berbeda berdasarkan peran pengguna: Pemilik Toko: Mengelola produk, mengawasi transaksi, melihat laporan penjualan, dan mengatur hak akses pengguna lain.Kasir Toko: Melakukan transaksi penjualan, mencetak struk, dan melihat riwayat transaksi.Customer: Melihat produk, menambahkan produk ke keranjang, dan melakukan pembelian.Penulis Artikel: Menulis dan mempublikasikan artikel mengenai produk baru, tips kesehatan, dan promo. Dengan RBAC, kita dapat memastikan bahwa setiap pengguna hanya bisa mengakses fitur yang relevan dengan peran mereka. Misalnya, kasir tidak perlu memiliki akses ke pengaturan stok atau artikel, dan penulis artikel tidak perlu mengelola transaksi. Penerapan RBAC Menggunakan Laravel 11 Laravel 11 memungkinkan kita menerapkan RBAC dengan mudah menggunakan sistem authorization-nya. Kamu bisa menggunakan middleware dan gate untuk mengatur peran pengguna dalam aplikasi. Namun, jika kamu ingin solusi yang lebih cepat, kamu bisa menggunakan package Spatie Laravel Permission yang sangat populer dan mudah diterapkan. Cara Menggunakan Spatie Role Permission di Laravel 11 Berikut langkah-langkah sederhana untuk menerapkan RBAC di Laravel 11 menggunakan package Spatie Role Permission: Instal Package Spatie: Kamu bisa menginstal package ini melalui composer: composer require spatie/laravel-permission Publikasikan Config dan Migrate: Setelah menginstal package, kamu perlu mempublikasikan konfigurasi dan menjalankan migrasi. php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" php artisan migrate Menambahkan Peran dan Hak Akses: Dalam contoh projek toko obat, kamu bisa membuat beberapa peran dan memberikan hak akses yang sesuai. Misalnya: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; // Membuat peran $owner = Role::create(['name' => 'pemilik toko']); $cashier = Role::create(['name' => 'kasir toko']); $customer = Role::create(['name' => 'customer']); $writer = Role::create(['name' => 'penulis artikel']); // Menambahkan hak akses Permission::create(['name' => 'manage products']); Permission::create(['name' => 'manage transactions']); Permission::create(['name' => 'write articles']); Assign Peran ke Pengguna: Setelah peran dan hak akses dibuat, kamu bisa mengassign peran tersebut ke pengguna. $user = User::find(1); // Ambil user berdasarkan ID $user->assignRole('pemilik toko'); // Assign peran pemilik toko ke user Mengatur Middleware: Untuk membatasi akses berdasarkan peran, kamu bisa menambahkan middleware pada route. Route::group(['middleware' => ['role:pemilik toko']], function () { Route::get('/manage-products', 'ProductController@index'); }); Dengan langkah-langkah ini, RBAC sudah berjalan di website toko obat kamu. Setiap pengguna hanya bisa mengakses fitur yang sesuai dengan perannya. Contoh Penerapan RBAC Pada Toko Obat Mari kita eksplorasi lebih jauh bagaimana penerapan Role-Based Access Control (RBAC) dalam website toko obat dengan berbagai peran pengguna: pemilik toko, kasir, customer, dan penulis artikel. Setiap peran ini memiliki akses yang berbeda tergantung pada fungsinya dalam sistem. Kita akan menggunakan Laravel 11 dengan package Spatie Laravel Permission. 1. Pemilik Toko Sebagai pemilik toko, pengguna memiliki akses penuh ke seluruh fitur website, seperti mengelola produk, melihat laporan penjualan, mengatur hak akses pengguna lain, dan sebagainya. Pemilik toko biasanya memiliki kontrol penuh atas sistem. Contoh lengkap penerapan kode untuk pemilik toko di controller: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; class OwnerController extends Controller { public function __construct() { // Memastikan user memiliki role pemilik toko $this->middleware(['role:pemilik toko']); } public function index() { // Memastikan user memiliki izin untuk mengelola produk $this->authorize('manage products'); // Logika untuk menampilkan dashboard pemilik toko return view('owner.dashboard', [ 'products' => Product::all(), 'salesReport' => Sale::getMonthlyReport() ]); } public function manageUsers() { // Mengelola hak akses pengguna lain $this->authorize('manage users'); return view('owner.manage_users', [ 'users' => User::all(), ]); } public function updateProduct(Product $product, Request $request) { // Memastikan hanya pemilik toko yang bisa mengupdate produk $this->authorize('manage products'); // Logika update produk $product->update($request->all()); return redirect()->back()->with('success', 'Produk berhasil diupdate!'); } } Pada contoh di atas: Pemilik toko diberikan akses ke seluruh produk dan laporan penjualan.authorize('manage products') digunakan untuk memastikan hanya pengguna dengan izin manage products yang dapat mengakses fitur tersebut.Terdapat juga fitur manageUsers untuk mengelola pengguna lain dan memberikan hak akses. 2. Kasir Toko Sebagai kasir, pengguna hanya memiliki akses untuk melakukan transaksi, melihat riwayat transaksi, dan mencetak struk. Mereka tidak bisa mengelola produk atau pengguna lain. Contoh kode untuk kasir: class CashierController extends Controller { public function __construct() { // Memastikan user memiliki role kasir $this->middleware(['role:kasir toko']); } public function processTransaction(Request $request) { // Memastikan user memiliki izin untuk memproses transaksi $this->authorize('manage transactions'); // Logika transaksi $transaction = new Transaction(); $transaction->customer_id = $request->customer_id; $transaction->total_amount = $request->total_amount; $transaction->save(); return redirect()->route('cashier.dashboard')->with('success', 'Transaksi berhasil diproses!'); } public function transactionHistory() { // Memastikan hanya kasir yang bisa melihat riwayat transaksi $this->authorize('view transactions'); $transactions = Transaction::where('cashier_id', auth()->user()->id)->get(); return view('cashier.transactions', compact('transactions')); } } Pada contoh di atas: Kasir hanya bisa mengakses halaman proses transaksi dan melihat riwayat transaksi mereka sendiri.Middleware role:kasir toko memastikan bahwa hanya kasir yang bisa mengakses controller ini. 3. Customer Sebagai customer, pengguna hanya memiliki akses untuk melihat produk dan melakukan pembelian. Mereka tidak bisa mengakses fitur-fitur administrasi seperti manajemen produk atau transaksi. Berikut contoh kode untuk customer: class ProductController extends Controller { public function index() { // Customer hanya bisa melihat produk yang tersedia return view('products.index', [ 'products' => Product::available()->get(), ]); } public function show(Product $product) { // Memastikan produk tersedia abort_if(!$product->isAvailable(), 404); return view('products.show', compact('product')); } public function addToCart(Product $product) { // Logika untuk menambahkan produk ke keranjang Cart::add($product); return redirect()->route('cart.index')->with('success', 'Produk berhasil ditambahkan ke keranjang'); } } Pada contoh di atas: Customer bisa melihat semua produk yang tersedia dengan Product::available().abort_if(!$product->isAvailable(), 404) memastikan bahwa customer hanya bisa melihat produk yang masih tersedia.Fungsi addToCart menambahkan produk ke keranjang belanja. 4. Penulis Artikel Sebagai penulis artikel, pengguna hanya memiliki akses untuk menulis dan mengelola artikel. Mereka tidak bisa melakukan transaksi atau mengelola produk. Berikut adalah contoh kode untuk penulis artikel: class ArticleController extends Controller { public function __construct() { // Memastikan user memiliki role penulis artikel $this->middleware(['role:penulis artikel']); } public function create() { // Memastikan user memiliki izin menulis artikel $this->authorize('write articles'); return view('articles.create'); } public function store(Request $request) { // Logika menyimpan artikel baru $article = new Article(); $article->title = $request->title; $article->content = $request->content; $article->author_id = auth()->user()->id; $article->save(); return redirect()->route('articles.index')->with('success', 'Artikel berhasil dipublikasikan!'); } public function edit(Article $article) { // Memastikan hanya penulis yang bisa mengedit artikel mereka sendiri $this->authorize('update', $article); return view('articles.edit', compact('article')); } public function update(Request $request, Article $article) { // Memastikan hanya penulis yang bisa mengupdate artikel mereka sendiri $this->authorize('update', $article); $article->update($request->all()); return redirect()->route('articles.index')->with('success', 'Artikel berhasil diupdate!'); } } Pada contoh di atas: Penulis artikel hanya bisa menulis, mengedit, dan menghapus artikel mereka sendiri.authorize('update', $article) memastikan bahwa penulis hanya bisa mengedit artikel yang mereka buat. Kesalahan Umum dalam Menerapkan RBAC di Laravel 11 (Dengan Contoh Koding) Ketika menerapkan RBAC (Role-Based Access Control) di Laravel 11, ada beberapa kesalahan umum yang sering terjadi. Memahami kesalahan ini dan menghindarinya dapat membantu memastikan bahwa aplikasi kamu aman dan efisien. 1. Tidak Memvalidasi Akses dengan Baik Salah satu kesalahan paling umum adalah tidak memvalidasi hak akses pengguna di setiap tindakan. Kadang-kadang, programmer hanya mengatur middleware di beberapa route, tetapi lupa untuk menambahkan validasi akses di dalam controller atau di method tertentu. Akibatnya, pengguna dapat mengakses fitur yang seharusnya dibatasi. Contoh Kesalahan: Misalkan kita memiliki controller di mana hanya admin yang boleh menghapus produk, tetapi kita lupa memvalidasi akses pengguna. class ProductController extends Controller { public function delete(Product $product) { // Kesalahan: Tidak ada validasi akses di sini $product->delete(); return redirect()->route('products.index')->with('success', 'Produk berhasil dihapus'); } } Dalam contoh di atas, siapa pun yang bisa mengakses method delete() dapat menghapus produk, bahkan jika mereka tidak memiliki hak akses. Solusi: Pastikan kamu menggunakan metode authorize atau middleware untuk memeriksa apakah pengguna memiliki izin yang tepat sebelum melakukan tindakan. class ProductController extends Controller { public function delete(Product $product) { // Solusi: Validasi hak akses pengguna $this->authorize('delete', $product); $product->delete(); return redirect()->route('products.index')->with('success', 'Produk berhasil dihapus'); } } Dengan menambahkan validasi akses menggunakan authorize, hanya pengguna yang memiliki hak akses yang bisa menghapus produk. 2. Menambahkan Terlalu Banyak Peran Kesalahan lain adalah membuat terlalu banyak peran yang sebenarnya tidak perlu. Misalnya, kamu mungkin tergoda untuk membuat peran khusus untuk setiap tindakan kecil dalam sistem. Hal ini dapat membuat manajemen hak akses menjadi rumit dan membingungkan. Contoh Kesalahan: Misalnya, kamu membuat peran terpisah untuk "editor produk", "penulis deskripsi produk", "pengelola gambar produk", dan sebagainya. Ini akan membuat sistem peran menjadi sangat kompleks dan sulit diatur. $role1 = Role::create(['name' => 'product editor']); $role2 = Role::create(['name' => 'product description writer']); $role3 = Role::create(['name' => 'product image manager']); Solusi: Sederhanakan peran pengguna dengan membuat peran yang lebih umum dan gunakan izin yang lebih spesifik. Misalnya, kamu bisa membuat peran "editor produk" yang memiliki beberapa izin terkait produk. $role = Role::create(['name' => 'product editor']); $role->givePermissionTo(['edit product', 'update product description', 'manage product images']); Dengan cara ini, manajemen peran dan hak akses menjadi lebih mudah dan terstruktur. 3. Mengandalkan Middleware Saja Tanpa Validasi di Controller Beberapa programmer menganggap bahwa dengan menambahkan middleware di route, mereka sudah melindungi aplikasi mereka sepenuhnya. Namun, middleware hanya berfungsi di level route dan tidak selalu mencakup semua skenario. Jika ada akses yang tidak diatur melalui route (misalnya melalui API atau form submission), pengguna mungkin masih bisa melakukan tindakan yang tidak diinginkan. Contoh Kesalahan: Mengandalkan middleware di route tanpa validasi tambahan di dalam method. // Di file routes/web.php Route::delete('/product/{id}', 'ProductController@delete')->middleware('role:admin'); Ini bagus, tetapi jika route diakses melalui jalur yang berbeda, tidak ada jaminan bahwa hanya admin yang bisa menghapus produk. Solusi: Selalu tambahkan validasi akses di dalam controller atau metode yang relevan, di samping middleware. class ProductController extends Controller { public function delete(Product $product) { // Validasi di controller, selain dari middleware $this->authorize('delete', $product); $product->delete(); return redirect()->route('products.index')->with('success', 'Produk berhasil dihapus'); } } 4. Tidak Menggunakan Cache untuk Hak Akses Saat aplikasi berkembang, memuat hak akses untuk setiap permintaan dari database bisa menjadi lambat. Menggunakan cache untuk menyimpan informasi hak akses adalah cara yang lebih efisien dan mempercepat performa aplikasi. Contoh Kesalahan: Setiap kali pengguna memuat halaman, Laravel mengecek hak akses pengguna langsung dari database tanpa menggunakan cache. $permissions = Permission::where('role', 'admin')->get(); Solusi: Kamu bisa menggunakan cache untuk menyimpan hak akses sementara, sehingga tidak perlu memuat ulang dari database setiap kali pengguna memuat halaman. $permissions = Cache::remember('permissions:admin', 60, function () { return Permission::where('role', 'admin')->get(); }); Dengan menggunakan cache, performa aplikasi akan meningkat karena data tidak perlu dimuat dari database berulang kali. Belajar Lebih Lanjut dengan Mentor Buildwithangga Jika kamu ingin belajar lebih dalam tentang penerapan RBAC dan fitur lain di Laravel 11, kamu bisa belajar dari mentor Buildwithangga. Berikut beberapa benefit yang bisa kamu dapatkan: Akses Seumur Hidup: Kamu akan mendapatkan akses penuh ke materi pembelajaran yang bisa diakses kapan saja.Bonus Konsultasi dengan Mentor: Kamu bisa berkonsultasi langsung dengan mentor untuk mendapatkan solusi dari permasalahan coding yang kamu hadapi.Grup Diskusi Antar Student: Kamu bisa berdiskusi dengan sesama student untuk saling berbagi pengetahuan dan pengalaman.Persiapan Kerja Lebih Matang: Dengan belajar di Buildwithangga, kamu akan mendapatkan persiapan kerja yang lebih baik, sehingga kamu bisa lebih siap menghadapi tantangan di dunia kerja. Kesimpulan Menerapkan RBAC pada website toko obat menggunakan Laravel 11 sangatlah mudah dengan bantuan package Spatie Role Permission. RBAC memungkinkan kita mengelola akses pengguna berdasarkan peran mereka, sehingga fitur-fitur yang ada tetap aman dan terorganisir dengan baik. Dengan pemahaman yang baik tentang RBAC, kamu bisa membangun aplikasi yang aman dan fungsional. Jangan ragu untuk belajar lebih lanjut dengan Buildwithangga dan manfaatkan berbagai keuntungan belajar yang tersedia.

User-Interface (UI) dan User-Experience (UX) design adalah elemen kunci dalam pembuatan produk digital yang sukses. Namun, bagi para UI/UX designer pemula, seringkali menemukan kesalahan umum yang dapat menghambat progress pekerjaan mereka. Dalam artikel ini, kita akan membahas lima kesalahan yang sering dilakukan oleh UI/UX Designer pemula besera tips-tipsnya! 1. Mengabaikan Riset Pengguna Salah satu kesalahan besar yang sering dilakukan oleh desainer UI/UX pemula adalah mengabaikan riset pengguna. Mereka mungkin terlalu fokus pada aspek estetika desain tanpa memahami kebutuhan dan preferensi pengguna. Kebanyakan mereka berpikir bahwa pekerjaan UI/UX hanya membuat desain yang menarik dan eye-catching. Tanpa riset yang baik, desainer bisa saja menghasilkan desain yang tidak sesuai dengan kebutuhan pengguna, sehingga mengurangi efektivitas produk digital tersebut. Di sinilah “empati” designer diuji. UI/UX designer harus memiliki empati yang tinggi agar kita bisa memberi pengaruh yang tepat dalam desain aplikasi/website ke pengguna. 2. Overdesign Seringkali, desainer pemula cenderung terlalu banyak membuat desain elemen-elemen antarmuka. Ini dapat mengakibatkan tampilan yang berlebihan dan membingungkan bagi pengguna. Terlalu banyak elemen dekoratif dan animasi yang tidak perlu dapat mengganggu fokus pengguna dan memperlambat kinerja aplikasi. Desain haruslah sederhana, intuitif, dan efisien. 3. Kurang Memahami Prinsip-prinsip UX Image by https://lawsofux.com/ “Tidak Memahami Prinsip-prinsip UX” Desainer UI/UX pemula sering tidak memahami prinsip-prinsip dasar UX design, seperti fokus desain harus sesuai kebutuhan pengguna, desain harus konsisten, desain mudah digunakan, dan memastikan hierarki desain yang tepat. Kekurangpahaman terhadap prinsip-prinsip ini dapat mengakibatkan desain yang tidak mudah digunakan dan membingungkan bagi user. Mempelajari prinsip-prinsip UX design adalah langkah kunci dalam menghindari kesalahan ini. 4. Tidak Mendengarkan feedback Kesalahan lain yang sering dilakukan oleh desainer UI/UX pemula adalah tidak mendengarkan umpan balik pengguna. Feedback dari pengguna/user sangat penting untuk meningkatkan pengalaman pengguna dan mengidentifikasi masalah dalam desain. Mengabaikan feedback dapat mengakibatkan kesalahan yang tidak terdeteksi dan merugikan produktivitas. 5. Tidak Menguji Desain Terakhir, banyak UI/UX designer pemula gagal melakukan pengujian desain. Hal ini adalah tahap kunci dalam mengidentifikasi masalah dan memastikan bahwa desain berfungsi sesuai yang diharapkan. Tanpa tahap pengujian, kesalahan dapat terlewatkan dan mengakibatkan produk digital yang kita buat jadi kurang efektif. Ketika ingin menjadi UI/UX designer yang lebih baik, penting untuk menghindari kesalahan-kesalahan tersebut. Terlibatlah dalam riset pengguna, terapkan prinsip-prinsip UX design, memahami dan mendengarkan feedback pengguna, dan uji desain Anda secara teratur. Dengan begitu, Anda dapat impove kualitas desain Anda dan menampilkan pengalaman pengguna yang lebih baik m produk digital yang Anda buat. Kesimpulan 💬 Sebagai seorang UI/UX designer pemula, kesalahan adalah hal yang wajar dalam proses pembelajaran. Namun, dengan menyadari kesalahan-kesalahan umum ini dan berusaha untuk menghindarinya, kamu dapat mengembangkan keterampilan desain kamu dengan lebih cepat dan menciptakan produk yang lebih baik. “Design” adalah seni yang terus berkembang, dan selalu ada ruang untuk belajar dan meningkatkan diri 😊 Berikut beberapa tips untuk UI/UX pemula 💯: 1. Lack of Emphaty to User? Melakukan Penelitian Pengguna: Lakukan penelitian berupa wawancara, survey, dan observasi terhadap pengguna yang sesungguhnya. Pahami kebutuhan, masalah, dan preferensi mereka. Buat Persona Pengguna: Kita bisa juga membuat profil pengguna yang mencerminkan karakteristik utama audiens kamu, sehingga Anda dapat merujuknya selama proses desain. 2. Bagi Anda yang merasa terlalu banyak informasi dalam UI-mu: Prioritaskan Informasi: Identifikasi informasi utama yang harus diberikan kepada pengguna dan tampilkan dengan jelas. Informasi tambahan bisat ditempatkan pada halaman atau layar yang berbeda. Hierarki Visual: Gunakan elemen desain seperti ukuran, warna, dan tata letak untuk menyoroti informasi yang paling penting dan menarik perhatian pengguna. 3. Tidak menerapkan/memahami prinsip-prinsip UX? Perbanyak Belajar Prinsip-prinsip Desain: Pahami prinsip-prinsip dasar seperti konsistensi, kesederhanaan, dan fokus pada pengguna. Rajin Pantau Perkembangan Desain: Selalu ikuti tren dan perkembangan terbaru dalam desain UI/UX untuk tetap relevan dan up-to-date. 4. Dengarkan dan pahami feedback! Bekerja dalam Tim: Kerja sama dengan rekan-rekan tim dan pengguna untuk mengumpulkan perspektif dan feedback yang berbeda dan memperkaya desain Anda. Terbuka terhadap Feedback: Terima feedback dengan pikiran terbuka, dan jadikan hal tersebut sebagai kesempatan untuk memperbaiki desainmu. 5. Jangan lupa menguji desain apakah sudah responsive dan mudah diakses atau belum Pastikan desain Anda responsif, sehingga dapat menyesuaikan dengan berbagai ukuran layar dan perangkat (Mobile/Web design). Perhatikan aksesibilitas dengan memastikan bahwa produk Anda dapat diakses oleh semua orang, termasuk mereka yang memiliki disabilitas. Ikuti pedoman/arahan aksesibilitas web seperti WCAG (Web Content Accessibility Guidelines). Jadi gimana? Sudah tahu kan apa yang harus dilakukan dan apa yang harus dihindari sebagai UI/UX designer pemula? Yuk ikut kelas UI/UX Design untuk belajar lebih dalam tentang UI/UX supaya kamu terhindar dari kesalahan-kesalahan di atas dan bangun portofolio berkualitas! Semoga bermanfaat ya! 😊

Dalam dunia web development, menyimpan data customer dengan baik merupakan hal yang sangat penting. Bayangkan jika Anda memiliki sebuah toko mobil mewah online. Setiap kali ada customer yang membeli mobil, data mereka harus disimpan dengan aman agar kepercayaan mereka terhadap toko Anda tetap terjaga. Sebuah website yang tidak menjaga data customernya dengan baik bisa kehilangan kepercayaan dari pelanggan dan akhirnya merugikan bisnis tersebut. Laravel, sebagai salah satu framework PHP paling populer, menawarkan berbagai fitur canggih yang memudahkan developer untuk membuat aplikasi web yang aman dan cepat. Salah satu fitur tersebut adalah Soft Deletes. Dalam artikel ini, kita akan membahas apa itu Soft Deletes, bagaimana menggunakannya dalam proyek Laravel 11, dan mengapa fitur ini penting untuk digunakan. Laravel dan FilamentPHP: Membuat CRUD dengan Cepat dan Aman Laravel dikenal sebagai framework yang sangat kuat dan fleksibel. Salah satu keunggulannya adalah kemudahan dalam membuat fitur CRUD (Create, Read, Update, Delete). Fitur CRUD adalah dasar dari hampir setiap aplikasi web karena memungkinkan pengelolaan data dengan cara yang mudah dan efisien. Dengan kombinasi Laravel dan FilamentPHP, developer bisa dengan cepat membuat aplikasi yang tidak hanya berfungsi dengan baik, tetapi juga aman. FilamentPHP adalah tool yang mempermudah pembuatan backend CRUD di Laravel. Dengan FilamentPHP, Anda bisa membangun fitur-fitur CRUD yang canggih tanpa harus menulis banyak kode dari awal. Apa Itu Soft Delete pada Laravel dan Mengapa Penting? Soft Delete adalah fitur di Laravel yang memungkinkan Anda untuk menandai data sebagai 'dihapus' tanpa benar-benar menghapusnya dari database. Ini sangat berguna ketika Anda ingin memberikan opsi kepada user untuk memulihkan data yang terhapus atau hanya ingin menjaga rekam jejak data tanpa benar-benar kehilangan informasi. Sebagai analogi, bayangkan Anda memiliki sebuah lemari arsip di kantor. Alih-alih membuang dokumen yang sudah tidak terpakai, Anda hanya memindahkannya ke rak arsip "Dihapus". Dengan begitu, dokumen tersebut tidak lagi terlihat dalam rak utama, tetapi masih dapat diakses jika suatu saat dibutuhkan. Mengapa fitur ini penting? Karena dalam beberapa kasus, menghapus data secara permanen bisa menjadi kesalahan yang fatal, terutama jika data tersebut masih dibutuhkan di masa mendatang. Dengan Soft Delete, Anda dapat menghindari risiko kehilangan data penting. Tutorial Penggunaan Soft Delete pada Proyek Toko Mobil Mewah Sekarang, mari kita lihat bagaimana cara menggunakan Soft Delete dalam sebuah proyek Laravel 11, misalnya pada toko mobil mewah online. Mengaktifkan Soft Delete pada Model Pertama, tambahkan trait SoftDeletes pada model yang ingin Anda gunakan. Misalnya, kita memiliki model Car yang mewakili mobil-mobil mewah yang dijual di toko online kita. namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Model; use Illuminate\\\\Database\\\\Eloquent\\\\SoftDeletes; class Car extends Model { use SoftDeletes; protected $dates = ['deleted_at']; } Trait SoftDeletes memungkinkan Laravel untuk menandai data yang dihapus dengan timestamp deleted_at. Menjalankan Migrasi Anda perlu menambahkan kolom deleted_at pada tabel cars di database. Anda bisa melakukannya dengan menambahkan kolom ini pada file migrasi. Schema::table('cars', function (Blueprint $table) { $table->softDeletes(); }); Kemudian, jalankan migrasi untuk menerapkan perubahan pada database. php artisan migrate Menghapus Data dengan Soft Delete Untuk menghapus data menggunakan Soft Delete, Anda hanya perlu menggunakan metode delete seperti biasa. $car = Car::find(1); $car->delete(); Data ini tidak akan benar-benar dihapus dari database, tetapi hanya akan ditandai dengan deleted_at. Menampilkan Data yang Terhapus Jika Anda ingin menampilkan data yang sudah dihapus, Anda bisa menggunakan metode withTrashed. $cars = Car::withTrashed()->get(); Ini akan menampilkan semua data, baik yang sudah dihapus maupun yang belum. Mengembalikan Data yang Terhapus Untuk mengembalikan data yang telah dihapus, Anda bisa menggunakan metode restore. $car = Car::withTrashed()->find(1); $car->restore(); Data yang dihapus akan dikembalikan dan deleted_at akan dihapus. Ilmu Penting Laravel Lainnya yang Perlu Dipelajari Programmer Pemula Setelah memahami Soft Delete, ada beberapa ilmu penting lainnya dalam Laravel yang sangat berguna untuk dipelajari, terutama bagi programmer pemula: Eloquent ORM: Memahami bagaimana Laravel menangani hubungan antar tabel dengan Eloquent ORM akan sangat membantu dalam mengelola data dengan efisien.Middleware: Belajar bagaimana menggunakan middleware untuk mengontrol akses dan manipulasi request di aplikasi Laravel.Event & Listener: Memahami cara kerja event dan listener akan membantu dalam membuat aplikasi yang lebih responsif dan modular.API Resource: Dengan API Resource, Anda dapat membuat API yang lebih terstruktur dan mudah untuk di-maintain. Belajar dari Mentor Buildwithangga Jika Anda ingin mendalami ilmu Laravel lebih jauh, belajar dari mentor di Buildwithangga bisa menjadi pilihan yang tepat. Dengan bergabung, Anda mendapatkan berbagai benefit, seperti: Akses Seumur Hidup: Belajar tanpa batas waktu, sehingga Anda bisa terus mengasah keterampilan kapan saja.Bonus Konsultasi dengan Mentor: Mendapatkan panduan langsung dari para ahli di bidangnya.Grup Diskusi Antar Student: Berbagi pengalaman dan belajar bersama komunitas.Persiapan Kerja Lebih Matang: Mendapatkan insight tentang dunia kerja dan bagaimana mempersiapkan diri sebagai developer yang profesional. Dengan memanfaatkan semua fitur dan pembelajaran ini, Anda bisa menjadi developer yang lebih kompeten dan siap menghadapi tantangan dalam dunia web development.

Dalam dunia web development modern, API (Application Programming Interface) adalah salah satu komponen yang sangat penting. API memungkinkan aplikasi untuk berkomunikasi satu sama lain, baik itu aplikasi yang dibangun oleh tim yang sama atau aplikasi yang dikembangkan oleh pihak ketiga. Di antara berbagai framework yang digunakan untuk membuat API, Laravel menonjol sebagai salah satu yang paling populer dan efisien. Artikel ini akan membahas bagaimana mengamankan API RESTful yang dibangun dengan Laravel menggunakan custom API key, lengkap dengan analogi sederhana, contoh koding, dan tips praktis. Manfaat Utama Membuat API Endpoint dengan Framework Laravel Laravel adalah framework PHP yang kuat dan mudah digunakan. Membuat API endpoint dengan Laravel memiliki beberapa manfaat utama: Kemudahan Penggunaan: Laravel menyediakan berbagai alat dan fitur bawaan yang membuat pembuatan API menjadi lebih sederhana dan cepat, bahkan bagi developer yang baru mengenal framework ini.Keamanan yang Terjamin: Laravel dilengkapi dengan berbagai mekanisme keamanan seperti CSRF protection, hashing, dan middleware yang membantu melindungi API dari serangan.Skalabilitas: Dengan Laravel, API yang dibuat dapat dengan mudah diskalakan sesuai dengan kebutuhan aplikasi, baik itu aplikasi kecil atau besar.Dukungan Komunitas: Laravel memiliki komunitas yang besar dan aktif, yang berarti developer dapat dengan mudah menemukan bantuan atau dokumentasi yang diperlukan ketika menghadapi masalah. Skenario Ketika API Endpoint Dibutuhkan Dalam pengembangan aplikasi, ada berbagai situasi di mana API endpoint menjadi komponen krusial untuk menghubungkan berbagai sistem atau layanan. Berikut adalah beberapa skenario utama: 1. Integrasi Layanan Pihak Ketiga Ketika sebuah aplikasi perlu berinteraksi dengan layanan eksternal, seperti payment gateway atau layanan pengiriman, API endpoint memainkan peran penting. Misalnya, saat pengguna melakukan pembayaran di aplikasi e-commerce, aplikasi tersebut perlu berkomunikasi dengan payment gateway untuk memproses transaksi. Contoh Koding: Misalkan Anda ingin mengintegrasikan aplikasi dengan layanan pembayaran seperti Stripe. Berikut adalah contoh cara membuat API endpoint untuk memproses pembayaran: use Illuminate\\\\Http\\\\Request; use Stripe\\\\Stripe; use Stripe\\\\Charge; class PaymentController extends Controller { public function processPayment(Request $request) { // Set API key Stripe Stripe::setApiKey(env('STRIPE_SECRET')); // Membuat charge dengan Stripe try { $charge = Charge::create([ 'amount' => $request->input('amount'), 'currency' => 'usd', 'source' => $request->input('stripeToken'), 'description' => 'Pembayaran dari ' . $request->input('email'), ]); return response()->json(['status' => 'success', 'data' => $charge], 200); } catch (\\\\Exception $e) { return response()->json(['status' => 'error', 'message' => $e->getMessage()], 500); } } } API endpoint di atas memungkinkan aplikasi untuk menerima token pembayaran dari frontend, memproses pembayaran dengan Stripe, dan mengembalikan respons ke frontend. 2. Aplikasi Mobile API endpoint sangat penting dalam pengembangan aplikasi mobile, di mana aplikasi perlu mengakses data dari server secara real-time. Contohnya, aplikasi mobile untuk toko online mungkin membutuhkan data produk, stok, dan harga yang selalu up-to-date. Contoh Koding: Misalnya, Anda ingin menyediakan API endpoint untuk mendapatkan daftar produk yang tersedia: use App\\\\Models\\\\Product; use Illuminate\\\\Http\\\\Request; class ProductController extends Controller { public function getProducts() { $products = Product::all(); return response()->json(['status' => 'success', 'data' => $products], 200); } } API endpoint ini memungkinkan aplikasi mobile untuk mengambil semua data produk dari database dan menampilkannya kepada pengguna. 3. Microservices Dalam arsitektur microservices, berbagai layanan yang independen berkomunikasi satu sama lain melalui API. Ini memungkinkan setiap layanan untuk berfungsi secara terpisah, namun tetap dapat saling terhubung untuk mencapai tujuan yang sama. Misalnya, layanan otentikasi dapat memverifikasi identitas pengguna, sementara layanan pemesanan menangani proses pemesanan, dan keduanya berkomunikasi melalui API. Contoh Koding: Misalnya, Anda memiliki layanan otentikasi terpisah dan ingin membuat endpoint untuk verifikasi token pengguna: use Illuminate\\\\Http\\\\Request; use Firebase\\\\JWT\\\\JWT; use Firebase\\\\JWT\\\\Key; class AuthService { public function verifyToken(Request $request) { $token = $request->header('Authorization'); if (!$token) { return response()->json(['status' => 'error', 'message' => 'Token not provided'], 401); } try { $decoded = JWT::decode($token, new Key(env('JWT_SECRET'), 'HS256')); return response()->json(['status' => 'success', 'data' => $decoded], 200); } catch (\\\\Exception $e) { return response()->json(['status' => 'error', 'message' => 'Invalid token'], 401); } } } API endpoint ini memungkinkan layanan lain dalam arsitektur microservices untuk memverifikasi token otentikasi pengguna dan melanjutkan operasi yang membutuhkan otorisasi. Dengan adanya API endpoint ini, berbagai sistem dan layanan dapat terintegrasi dengan baik, memberikan pengalaman pengguna yang mulus dan fungsionalitas yang handal. Mengapa API Perlu Dilindungi dengan API Key API yang tidak terlindungi dapat menjadi target empuk bagi serangan seperti penyalahgunaan atau akses tidak sah. Salah satu cara efektif untuk melindungi API adalah dengan menggunakan API key. Berikut adalah beberapa alasan mengapa API key penting: Otentikasi Pengguna: API key memungkinkan Anda untuk mengidentifikasi dan memverifikasi pengguna atau aplikasi yang mengakses API. Ini memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses endpoint tertentu.Pembatasan Akses: Dengan API key, Anda dapat membatasi akses ke API tertentu berdasarkan key yang diberikan. Ini membantu mencegah penyalahgunaan API oleh pihak yang tidak bertanggung jawab.Pelacakan Penggunaan: API key memungkinkan Anda untuk melacak penggunaan API, sehingga Anda dapat mengidentifikasi pola penggunaan yang tidak biasa atau potensi ancaman. Tata Cara Membuat Middleware dan Custom API Key dengan Laravel Untuk mengamankan API RESTful dengan custom API key di Laravel, Anda dapat mengikuti langkah-langkah berikut. Langkah-langkah ini akan mencakup pembuatan middleware, pengujian dengan Postman, dan penggunaan header API key. 1. Membuat Middleware Middleware berfungsi sebagai filter untuk memproses permintaan yang masuk sebelum mencapai controller. Untuk membuat middleware, jalankan perintah berikut di terminal: php artisan make:middleware CheckApiKey Perintah ini akan membuat file middleware di direktori app/Http/Middleware. Selanjutnya, buka file CheckApiKey.php yang baru dibuat tersebut dan tambahkan logika berikut: namespace App\\\\Http\\\\Middleware; use Closure; use Illuminate\\\\Http\\\\Request; class CheckApiKey { public function handle(Request $request, Closure $next) { // Mengambil API key dari header request $apiKey = $request->header('X-API-KEY'); // Memeriksa apakah API key sesuai dengan yang disimpan di .env if ($apiKey !== config('services.api_key')) { return response()->json(['message' => 'Unauthorized'], 401); } // Jika API key valid, lanjutkan ke proses berikutnya return $next($request); } } 2. Mendaftarkan Middleware Setelah middleware dibuat, Anda perlu mendaftarkannya di file app/Http/Kernel.php. Tambahkan middleware baru di array $routeMiddleware: protected $routeMiddleware = [ // Middleware lainnya 'check.api.key' => \\\\App\\\\Http\\\\Middleware\\\\CheckApiKey::class, ]; 3. Menggunakan Middleware pada Route Setelah middleware terdaftar, Anda dapat menerapkannya pada route tertentu di file routes/api.php: use App\\\\Http\\\\Controllers\\\\DataController; Route::middleware('check.api.key')->get('/data', [DataController::class, 'index']); Dengan ini, setiap kali endpoint /data diakses, middleware CheckApiKey akan memeriksa apakah permintaan memiliki API key yang valid sebelum melanjutkan ke controller. 4. Mengatur API Key di .env Untuk menjaga keamanan, simpan API key di file .env: API_KEY=your-custom-api-key Kemudian, tambahkan konfigurasinya di file config/services.php agar dapat diakses di middleware: 'api_key' => env('API_KEY'), 5. Menguji API Endpoint dengan Postman Setelah konfigurasi selesai, Anda dapat menguji API endpoint dengan Postman. Buka Postman dan buat permintaan GET ke endpoint /api/data.Tambahkan Header dengan key X-API-KEY dan nilai sesuai dengan API key yang Anda simpan di .env.Klik Send untuk mengirim permintaan. Jika API key valid, Anda akan menerima respons sukses dari endpoint.Jika API key tidak valid atau tidak disertakan, Anda akan menerima respons Unauthorized dengan status 401. Contoh Respons di Postman Respons Berhasil (200 OK): { "status": "success", "data": { "id": 1, "name": "Sample Data", "description": "This is a sample data entry." } } Respons Gagal (401 Unauthorized): { "message": "Unauthorized" } Dengan langkah-langkah ini, Anda dapat memastikan bahwa hanya permintaan yang disertai dengan API key yang valid yang dapat mengakses endpoint API Anda, sehingga meningkatkan keamanan aplikasi Anda. Kesalahan dalam Membuat Endpoint API RESTful Meskipun API RESTful adalah metode yang sangat populer dalam mengembangkan layanan web, terdapat beberapa kesalahan umum yang sering dilakukan oleh developer. Kesalahan-kesalahan ini dapat mengakibatkan API yang tidak efisien, tidak aman, atau sulit untuk dipelihara. Berikut adalah beberapa kesalahan tersebut dan cara menghindarinya: 1. Tidak Menggunakan Versi API Mengabaikan versi API dapat menyebabkan masalah kompatibilitas di masa depan ketika Anda melakukan perubahan pada API. Tanpa versi, perubahan pada API bisa menyebabkan aplikasi yang menggunakan versi sebelumnya mengalami kegagalan fungsi. Oleh karena itu, penting untuk menambahkan versi pada endpoint API Anda, seperti /api/v1/resource. Contoh Koding: use Illuminate\\\\Support\\\\Facades\\\\Route; use App\\\\Http\\\\Controllers\\\\ProductController; Route::prefix('api/v1')->group(function () { Route::get('/products', [ProductController::class, 'index']); Route::post('/products', [ProductController::class, 'store']); }); Dengan menambahkan prefix('api/v1'), semua endpoint di dalam grup tersebut akan menggunakan versi 1 (v1). Jika di masa depan Anda perlu memperbarui API, Anda dapat membuat versi baru tanpa mengganggu pengguna API versi sebelumnya. 2. Penggunaan Metode HTTP yang Salah Setiap metode HTTP (GET, POST, PUT, DELETE) memiliki tujuan yang spesifik. Menggunakan metode yang salah dapat menyebabkan kebingungan bagi pengguna API dan memicu bug. Misalnya, menggunakan GET untuk operasi yang seharusnya mengubah data (yang seharusnya menggunakan POST atau PUT) adalah praktik yang salah. Contoh Koding: use App\\\\Http\\\\Controllers\\\\ProductController; // Menggunakan metode yang benar untuk setiap operasi Route::get('/products', [ProductController::class, 'index']); // Mendapatkan daftar produk Route::post('/products', [ProductController::class, 'store']); // Menambahkan produk baru Route::put('/products/{id}', [ProductController::class, 'update']); // Mengupdate produk Route::delete('/products/{id}', [ProductController::class, 'destroy']); // Menghapus produk Dalam contoh di atas, setiap metode HTTP digunakan sesuai dengan operasinya: GET untuk mendapatkan data, POST untuk menambah data, PUT untuk memperbarui data, dan DELETE untuk menghapus data. 3. Kurangnya Validasi Data Menerima atau mengirim data tanpa validasi yang tepat dapat menyebabkan berbagai masalah, termasuk rentan terhadap serangan seperti SQL Injection atau data corruption. Validasi memastikan bahwa data yang diterima oleh API sesuai dengan aturan yang telah ditetapkan. Contoh Koding: use Illuminate\\\\Http\\\\Request; use App\\\\Models\\\\Product; use Illuminate\\\\Support\\\\Facades\\\\Validator; class ProductController extends Controller { public function store(Request $request) { // Validasi data yang diterima $validator = Validator::make($request->all(), [ 'name' => 'required|string|max:255', 'price' => 'required|numeric|min:0', 'description' => 'nullable|string', ]); if ($validator->fails()) { return response()->json(['errors' => $validator->errors()], 400); } // Jika validasi berhasil, simpan data produk $product = Product::create($request->all()); return response()->json(['product' => $product], 201); } } Dalam contoh ini, validasi diterapkan sebelum data disimpan ke database. Jika data yang dikirim tidak valid, API akan mengembalikan respons dengan status kode 400 dan pesan error yang sesuai. Dengan menghindari kesalahan-kesalahan ini, Anda dapat membangun API RESTful yang lebih baik, lebih aman, dan lebih mudah dipelihara. Pastikan untuk selalu memikirkan versi API, memilih metode HTTP yang tepat, dan menerapkan validasi data untuk setiap endpoint yang Anda buat. Kesimpulan Mengamankan API RESTful adalah langkah krusial dalam pengembangan aplikasi modern, terutama ketika API tersebut mengakses data sensitif atau digunakan oleh aplikasi pihak ketiga. Dengan menggunakan custom API key dan middleware di Laravel, Anda dapat meningkatkan keamanan API Anda secara signifikan. Selain itu, memahami kesalahan umum dalam pembuatan API dapat membantu Anda menghindari masalah di masa depan. Bagi programmer pemula, penting untuk terus belajar dan meningkatkan keterampilan. Belajar dari mentor di Buildwithangga adalah pilihan yang sangat baik. Dengan benefit seperti akses selamanya, konsultasi dengan mentor, roadmap belajar yang terstruktur, dan lain-lain, Anda dapat lebih siap untuk menghadapi tantangan dalam dunia web development. Dengan memahami dan menerapkan langkah-langkah di atas, Anda dapat memastikan bahwa API yang Anda bangun aman, efisien, dan siap digunakan oleh pengguna atau aplikasi lain. Selamat mencoba dan jangan ragu untuk terus belajar dari para mentor yang berpengalaman!

Dalam dunia web development yang terus berkembang, JavaScript telah menjadi bahasa yang sangat penting dan mendominasi. Salah satu alasan utama mengapa JavaScript sangat populer adalah karena fleksibilitasnya dan dukungan ekosistem yang sangat luas. Di antara banyaknya framework dan library JavaScript, React JS dan Next JS menjadi dua pilihan populer bagi developer yang ingin membangun projek website modern. Namun, bagaimana cara memilih antara React JS dan Next JS? Artikel ini akan membahas secara mendalam alasan-alasan di balik pemilihan kedua teknologi ini serta memberikan tips untuk memilih framework yang tepat sesuai kebutuhan proyek. JavaScript dan Ekosistemnya: Banyak Pilihan, Banyak Manfaat JavaScript merupakan salah satu bahasa pemrograman yang paling banyak digunakan di dunia web development. Salah satu kelebihan utama JavaScript adalah ekosistemnya yang kaya dengan berbagai framework dan library yang dapat membantu developer bekerja lebih cepat dan berkolaborasi dengan lebih baik. Di antara sekian banyak pilihan, React JS dan Next JS seringkali menjadi andalan dalam membangun projek website modern. React JS: Dikembangkan oleh Facebook, React JS adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI). React sangat terkenal karena kemampuannya dalam mengelola komponen UI secara efisien, membuatnya menjadi pilihan utama bagi banyak developer.Next JS: Sementara itu, Next JS adalah framework yang dibangun di atas React. Framework ini menyediakan fitur tambahan seperti server-side rendering (SSR) dan static site generation (SSG), yang membuatnya sangat kuat untuk membangun aplikasi web modern yang cepat dan scalable. Kedua teknologi ini tidak hanya populer, tetapi juga didukung oleh komunitas yang besar, dokumentasi yang lengkap, dan berbagai sumber daya pembelajaran yang tersedia di internet. image next js Tips Memilih Framework JavaScript untuk Projek Website Modern Saat memulai projek website, memilih framework yang tepat bisa menjadi tugas yang menantang. Berikut beberapa tips yang dapat membantu Anda dalam menentukan pilihan: Skala dan Kompleksitas Proyek: Tentukan skala dan kompleksitas proyek Anda. Jika proyek Anda adalah aplikasi web yang kompleks dengan banyak halaman dinamis, maka framework seperti Next JS mungkin lebih sesuai. Namun, jika Anda hanya membutuhkan library untuk mengelola UI dengan cepat dan efisien, React JS bisa menjadi pilihan yang tepat.Kebutuhan Rendering: Apakah proyek Anda memerlukan server-side rendering atau static site generation? Jika ya, maka Next JS menyediakan fitur-fitur ini secara native, sementara React JS akan memerlukan konfigurasi tambahan.SEO dan Kecepatan Loading: Jika SEO dan kecepatan loading halaman menjadi prioritas utama, Next JS dapat memberikan keuntungan lebih besar karena kemampuannya dalam server-side rendering, yang membuat konten lebih mudah diindeks oleh mesin pencari.Kompatibilitas dengan Teknologi Lain: Periksa apakah framework atau library yang Anda pilih kompatibel dengan teknologi lain yang akan digunakan dalam proyek. Misalnya, Next JS sangat kompatibel dengan API GraphQL, sementara React JS memiliki integrasi yang kuat dengan banyak state management library seperti Redux.Kemudahan Belajar dan Dokumentasi: Pastikan framework atau library yang Anda pilih memiliki dokumentasi yang baik dan komunitas yang aktif. Ini penting untuk memudahkan Anda saat menghadapi masalah teknis. Tidak Semua Projek Memerlukan Framework: Pertimbangkan Penggunaan Library Sederhana Perlu diingat bahwa tidak semua proyek website membutuhkan framework yang kompleks seperti React JS atau Next JS. Untuk proyek yang lebih sederhana, mungkin Anda hanya memerlukan library yang lebih ringan seperti Alpine JS. image alpine js Alpine JS: Adalah library yang ringan dan mudah digunakan untuk menambahkan interaktivitas ke halaman web. Alpine JS cocok digunakan untuk website yang tidak memerlukan pengelolaan state yang kompleks atau struktur komponen yang rumit. Jika proyek Anda hanya membutuhkan fungsionalitas dasar seperti toggle, modal, atau interaksi pengguna sederhana, Alpine JS bisa menjadi pilihan yang lebih efisien daripada menggunakan framework yang lebih besar dan kompleks. Mengenal React dan Next JS Apa Itu React JS? Kelebihan dan Fitur Utamanya React JS adalah library JavaScript yang fokus pada pembuatan antarmuka pengguna (UI). Salah satu alasan utama mengapa React JS begitu populer adalah karena pendekatannya yang berbasis komponen, yang memungkinkan developer untuk membangun UI dengan cara yang modular dan terstruktur. image react js Pendekatan Berbasis Komponen: Setiap bagian dari UI dapat dipecah menjadi komponen yang terpisah, yang kemudian dapat digunakan kembali di berbagai bagian aplikasi. Ini membantu dalam mengelola dan memelihara kode dengan lebih mudah.Virtual DOM: React menggunakan Virtual DOM, yang memungkinkan update UI dilakukan dengan sangat efisien. Alih-alih melakukan update langsung pada DOM, React melakukan update pada Virtual DOM terlebih dahulu, kemudian hanya melakukan perubahan yang diperlukan pada DOM asli. Ini meningkatkan performa aplikasi, terutama pada aplikasi yang kompleks dan interaktif.Komunitas dan Ekosistem yang Besar: Dengan dukungan komunitas yang besar, React memiliki banyak library dan tool pendukung yang bisa mempermudah pekerjaan developer. Mulai dari state management hingga routing, hampir semua kebutuhan Anda bisa diakomodasi oleh ekosistem React.React Hooks: Fitur ini memungkinkan developer untuk mengelola state dan efek samping (side effects) di dalam komponen fungsional tanpa perlu menggunakan class. Hooks seperti useState dan useEffect telah menjadi standar dalam pengembangan aplikasi menggunakan React. image vscode react js Apa Itu Next JS? Kelebihan dan Fitur Utamanya Next JS adalah framework yang dibangun di atas React dan menawarkan lebih banyak fitur untuk pengembangan aplikasi web modern. Dengan Next JS, developer mendapatkan berbagai kemampuan tambahan yang tidak ada di React secara default. Server-Side Rendering (SSR): Salah satu fitur utama dari Next JS adalah kemampuannya untuk melakukan server-side rendering. Ini berarti halaman web dapat di-render di server sebelum dikirim ke browser, yang sangat berguna untuk SEO dan kecepatan loading halaman.Static Site Generation (SSG): Selain SSR, Next JS juga mendukung static site generation. Ini memungkinkan halaman web di-generate sebagai file statis pada waktu build, yang kemudian dapat disajikan dengan sangat cepat.Routing Otomatis: Next JS menyediakan sistem routing yang otomatis berdasarkan struktur folder. Anda tidak perlu mengkonfigurasi router secara manual, karena Next JS akan mengatur semuanya untuk Anda berdasarkan file yang ada di dalam folder pages.API Routes: Next JS memungkinkan Anda untuk membuat API langsung di dalam aplikasi tanpa perlu menggunakan server terpisah. Ini sangat berguna untuk membangun aplikasi full-stack dengan mudah.Optimasi Performa: Next JS dilengkapi dengan berbagai fitur optimasi performa, seperti code splitting otomatis dan optimasi gambar. Ini membuat aplikasi yang dibangun dengan Next JS cenderung lebih cepat dan lebih efisien. 5 Perbedaan Utama Antara React JS dan Next JS React JS dan Next JS adalah dua teknologi populer yang sering digunakan bersamaan, tetapi mereka memiliki perbedaan mendasar yang penting untuk dipahami sebelum memilih framework yang tepat untuk proyek Anda. React JS adalah library JavaScript yang khusus untuk membangun antarmuka pengguna (UI). Fungsinya terutama fokus pada pembuatan komponen UI yang dapat digunakan kembali. React tidak menyediakan fitur bawaan untuk routing, server-side rendering, atau pengelolaan API. image code editor next js Jika Anda menggunakan React, Anda harus menambahkan library tambahan untuk menangani hal-hal tersebut. Misalnya, untuk mengatur routing, Anda bisa menggunakan react-router-dom. Contoh penggunaan React dengan routing sederhana: // App.js import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; function App() { return ( <Router> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Switch> </Router> ); } export default App; Di sini, React JS menangani client-side rendering, dan routing diatur secara manual menggunakan react-router-dom. Anda perlu menambah library untuk berbagai kebutuhan seperti state management atau pengelolaan data API. Sebaliknya, Next JS adalah framework yang dibangun di atas React dan mencakup fitur-fitur tambahan. Next JS menyediakan server-side rendering (SSR), static site generation (SSG), routing otomatis, dan API routes secara bawaan. Ini menjadikannya solusi yang lebih lengkap untuk proyek web yang kompleks. Contoh sederhana Next JS dengan routing otomatis: // pages/index.js import React from 'react'; const Home = () => { return <h1>Welcome to the Home Page</h1>; }; export default Home; // pages/about.js import React from 'react'; const About = () => { return <h1>About Us</h1>; }; export default About; Dengan Next JS, Anda cukup membuat file dalam folder pages, dan framework ini akan mengatur routing secara otomatis berdasarkan struktur folder. Selain itu, Next JS mendukung server-side rendering tanpa konfigurasi tambahan, yang bermanfaat untuk SEO dan performa. Scenario lainnya, jika Anda membutuhkan API sederhana dalam aplikasi Next JS, Anda dapat membuatnya langsung di dalam folder pages/api: // pages/api/greet.js export default function handler(req, res) { res.status(200).json({ message: 'Hello from Next.js API!' }); } API ini dapat diakses di /api/greet dan akan di-handle secara otomatis oleh Next JS, memberikan fleksibilitas lebih dalam pengembangan aplikasi full-stack. Dengan React JS, fitur-fitur ini memerlukan setup manual dan integrasi library tambahan. Sebagsai contoh, jika Anda ingin melakukan server-side rendering dengan React, Anda perlu menggunakan tool seperti Next JS atau melakukan setup manual dengan Express dan React. Roadmap untuk frontend developer pemula Bagi programmer pemula yang ingin masuk ke dunia web development modern, memutuskan apakah akan belajar React atau Next.js bisa menjadi pertanyaan yang penting. Keduanya adalah teknologi yang sangat populer, tetapi ada perbedaan mendasar yang perlu dipertimbangkan berdasarkan tingkat pengalaman dan tujuan pembelajaran. image programmer React atau Next.js: Mana yang Lebih Baik untuk Pemula? Untuk programmer pemula, umumnya lebih baik memulai dengan belajar React terlebih dahulu. React adalah library JavaScript yang fokus pada pembangunan antarmuka pengguna (UI) dan memberikan fondasi yang kuat dalam memahami konsep dasar seperti komponen, state management, dan lifecycle methods. Karena React hanya fokus pada UI, Anda dapat mempelajari konsep-konsep ini tanpa harus langsung berurusan dengan fitur-fitur yang lebih kompleks seperti server-side rendering atau routing otomatis yang disediakan oleh Next.js. Setelah Anda merasa nyaman dengan React dan memahami cara kerja komponen, event handling, dan pengelolaan state, Anda akan lebih siap untuk melangkah ke Next.js. Next.js dibangun di atas React dan menambahkan banyak fitur yang lebih lanjut, seperti server-side rendering, static site generation, dan routing otomatis. Ini adalah framework yang kuat untuk membangun aplikasi web yang lebih kompleks dan skalabel. image kelas gratis web bwa Materi Prasyarat untuk Belajar React dan Next.js Sebelum memulai belajar React atau Next.js, ada beberapa materi prasyarat yang sebaiknya dikuasai terlebih dahulu: HTML dan CSS: Memahami dasar-dasar HTML dan CSS sangat penting karena keduanya merupakan pondasi dari setiap halaman web. Anda perlu memahami cara membuat struktur halaman dengan HTML dan bagaimana mendesainnya dengan CSS.JavaScript Dasar: Sebelum mempelajari React, Anda harus memiliki pemahaman yang kuat tentang JavaScript, termasuk konsep dasar seperti variabel, fungsi, array, objek, dan manipulasi DOM. React dan Next.js adalah framework dan library yang dibangun di atas JavaScript, jadi memahami dasar-dasar ini adalah langkah penting.ES6+ JavaScript: Familiaritas dengan fitur-fitur ES6+ seperti arrow functions, destructuring, template literals, dan modul juga sangat penting. Banyak sintaks dalam React menggunakan ES6+, jadi menguasai ini akan memudahkan proses belajar Anda.NPM/Yarn: Memahami cara kerja Node Package Manager (NPM) atau Yarn untuk mengelola dependensi dalam proyek JavaScript Anda. Ini adalah alat yang akan Anda gunakan untuk menginstal React, Next.js, dan berbagai library lainnya.Git dan Version Control: Mempelajari dasar-dasar Git dan version control sangat dianjurkan, karena ini adalah keterampilan penting dalam pengembangan perangkat lunak modern. Anda akan sering bekerja dalam proyek bersama tim atau mengelola kode Anda sendiri, dan Git membantu melacak perubahan serta bekerja secara kolaboratif. Dengan dasar-dasar ini, Anda akan lebih siap untuk belajar React, dan kemudian, jika diperlukan, melanjutkan ke Next.js. Langkah bertahap ini akan memberi Anda fondasi yang kuat untuk memahami lebih lanjut teknologi web development modern dan membangun aplikasi web yang efektif dan skalabel. Waktunya upgrade skills frontend developer Programmer yang ingin meningkatkan keterampilan mereka dapat belajar dari mentor di Buildwithangga, yang menawarkan berbagai manfaat yang sangat berharga. Dengan mengikuti kursus di Buildwithangga, Anda akan mendapatkan akses seumur hidup ke semua materi pembelajaran. Ini berarti Anda bisa belajar kapan saja dan sepuasnya tanpa batasan waktu, sehingga Anda bisa terus mengasah kemampuan Anda seiring dengan perkembangan teknologi. image learning code Selain itu, sebagai peserta kursus, Anda juga mendapatkan bonus berupa konsultasi langsung dengan mentor. Ini adalah kesempatan emas untuk mendapatkan bimbingan dan solusi atas masalah yang Anda hadapi dalam proses belajar atau proyek yang sedang Anda kerjakan. Konsultasi ini membantu mempercepat pemahaman Anda dan membuat Anda lebih siap dalam menghadapi tantangan di dunia kerja. Buildwithangga juga menyediakan grup diskusi antar student, di mana Anda bisa bertukar pikiran, berbagi pengalaman, dan belajar dari satu sama lain. Grup ini menjadi komunitas yang mendukung, sehingga Anda tidak belajar sendirian, melainkan bersama orang-orang yang memiliki minat dan tujuan yang sama. image projek figma Terakhir, persiapan kerja Anda akan menjadi lebih matang karena materi kursus di Buildwithangga dirancang untuk memenuhi kebutuhan industri. Dengan bimbingan mentor dan dukungan dari komunitas, Anda akan lebih siap untuk memasuki dunia kerja dengan kepercayaan diri yang lebih tinggi dan keterampilan yang sesuai dengan apa yang dibutuhkan oleh perusahaan. Sampai jumpa di kelas!