Home - Blog

Laravel Filament - Customizing Forms and Tables

Tutorial Customizing Forms Tables Laravel 11 Fillament V3

Progress

Laravel Filament - Setting Up Resource

Tutorial Models Databases Resource Laravel 11 Fillament V3

Halo teman-teman! Sebelumnya kita sudah belajar tentang instalasi filament V3 laravel 11 di Episode 1. Dan pada tutorial kali ini, kita akan menyelami cara mengatur database, model, dan resource di Filament. Setelah memahami dasar-dasar pemasangan Filament, penting untuk mengonfigurasi backend kita dengan benar agar panel admin dapat berfungsi secara maksimal. Kita akan memulai dengan pengaturan database untuk memastikan data tersimpan dengan rapi, lalu melanjutkan dengan pembuatan model yang akan menjadi representasi dari data kita di aplikasi Laravel.

Selanjutnya, kita akan mengintegrasikan model-model tersebut ke dalam Filament sebagai sumber daya, sehingga kalian bisa mengelola dan memanipulasi data dengan mudah melalui antarmuka admin yang telah kita siapkan. Dengan mengikuti langkah-langkah ini, kalian akan memperoleh pemahaman yang lebih baik tentang bagaimana Filament berfungsi dengan data di aplikasi kalian dan bagaimana memanfaatkan fitur-fiturnya untuk meningkatkan efisiensi pengelolaan data.

Setting up the database and models

Sebelum kita masuk ke pembahasan tentang apa itu Resource, kita harus mempersiapkan database dan models nya terlebih dahulu. Untuk contoh pembelajaran kali ini, kita cukup pakai 2 table yang saling berelasi, yaitu Table Pegawai dan Table Jabatan.

Database Migration

Kita tentukan terlebih dahulu untuk struktur table yang nantinya akan kita buatkan sebuah migration di project laravel kita. Seperti yang sudah saya sampaikan diatas, kita memiliki 2 table yang akan kita buat.

Struktur Table

Untuk struktur Table Pegawais seperti ini :

Name	Type	Length	Not Null	Description
id	int	11	✓	Primary
name	string	255	✓	-
no_pegawai	string	20	✓	Unique
jabatan_id	int	11	✓	Foreign

Dan untuk struktur Table Jabatans seperti ini :

Name	Type	Length	Not Null	Description
id	int	11	✓	Primary
name	string	255	✓	-

Kedua table tersebut saling berelasi, bisa dilihat di Table Pegawais pada field jabatan_id tertulis diketerangannya yaitu Foreign yang artinya, Foreign key jabatan_id dari Table pegawais ke Table jabatans adalah sebuah kolom di tabel pegawai yang digunakan untuk membuat hubungan antara dua tabel dalam sebuah basis data.

Migrations

Kita mempunyai struktur database yang sudah kita rancang, selanjutnya kita implementasikan struktur tersebut kedalam migrations kita, untuk nantinya kita jalankan code migration tersebut dan mengimport table kedalam database yang sudah kita buat. kita buat migrationnya dengan cara buka terminal lalu masukkan code berikut kedalam terminal kalian :

  {{-- Untuk membuat Model Pegawai --}}
 php artisan make:model Pegawai -m

 {{-- Untuk Membuat Model Jabatan --}}
 php artisan make:model Jabatan -m  

Setelah menjalankan code tersebut di terminal, maka kita mempunyai file Model dan Migrations, kalian bisa cek untuk migration di folder database/migrations/nama_file_migration. Buka file migration jabatans, lalu jadikan code nya seperti ini :

  <?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
       Schema::create('jabatans', function (Blueprint $table) {
         $table->id();
         $table->string('name');
         $table->timestamps();
       });
    }

    /**
    * Reverse the migrations.
    */
    public function down(): void
    {
         Schema::dropIfExists('jabatans');
    }
};  

Lalu buka fle migrations pegawais, dan isi seperti ini :

  <?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
       Schema::create('pegawais', function (Blueprint $table) {
         $table->id();
         $table->string('name');
         $table->string('no_pegawai')->unique();
         $table->foreignId('jabatan_id')->constrained('jabatans')->cascadeOnDelete();
         $table->timestamps();
       });
    }

    /**
    * Reverse the migrations.
    */
    public function down(): void
    {
         Schema::dropIfExists('pegawais');
    }
};  

Perhatikan pada bagian field jabatan_id terdapat fungsi ->cascadeOnDelete(); yang artinya, jika id jabatan tersebut di hapus pada table jabatans, maka data pegawais yang terkait pun akan ikut terhapus. Nah setelah kita selesai membuat migration, kita buka terminal lalu jalankan code berikut :

php artisan migrate

Setelah proses migrate berhasil, maka table tersebut akan masuk kedalam database anda.

Models

Setting model pun harus kita lakukan setelah kita berhasil menjalankan migrations diatas. Kita cukup tambahkan protected $fillable dari masing-masing model yang sudah kita buat, dan tambahkan pula belongsTo di Model Pegawai karena table pegawai dan jabatan saling berelasi, agar mempermudah pemanggilan field dari kedua table tersebut. Untuk mengimplementasikan hal tersebut, kalian buka file Modelnya, dan terapkan hal berikut :

{{-- Model Pegawai --}} <?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Pegawai extends Model
{
     use HasFactory;

     protected $fillable = [
       'name',
       'no_pegawai',
       'jabatan_id',
     ];

     public function jabatan(): BelongsTo
     {
       return $this->belongsTo(Jabatan::class);
     }
}

Dan ini untuk model jabatan nya :

{{-- Model Pegawai --}} <?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Jabatan extends Model
{
     use HasFactory;

     protected $fillable = [
       'name',
     ];
}

Kita telah selesai menyiapkan model dari kedua table tersebut. Dan sekarang kita bisa maju ke tahap pembahasan mengenai Resource Filament.

Resource Filament

Filament Resource adalah fitur dalam Laravel Filament yang mempermudah pengelolaan data di panel admin. Resource ini menghubungkan model Laravel dengan antarmuka pengguna yang intuitif, memungkinkan pengguna untuk melakukan operasi CRUD (Create, Read, Update, Delete) secara otomatis. Dengan menggunakan Resource, developer dapat dengan cepat membuat form dan tabel untuk entitas tertentu, serta menambahkan logika bisnis atau kustomisasi tampilan yang diperlukan tanpa menulis terlalu banyak kode manual. Ini membantu mempercepat pengembangan aplikasi dengan fitur yang kaya dan mudah diatur melalui panel admin yang powerful.

Create Resource

Kita ingin membuat 2 Resource yaitu Jabatan dan Pegawai yang nantinya kita bisa setting dari kedua tersebut agar saling berelasi/berkaitan. Kita buka terminal pada Vscode lalu masukkan code berikut :

 {{-- Resource Jabatan --}}
php artisan make:filament-resource Jabatan

 {{-- Resource Pegawai --}}
php artisan make:filament-resource Pegawai

Setelah menjalankan code tersebut di terminal, maka akan muncul file filament yang nantinya kita akan custom interface dan lain-lain di file tersebut. Kalian buka filenya di directory app/Filament/Resource di folder tersebut terdapat file-file Resource yang sudah kita buat. Dan istimewanya Filament disini, cukup kalian menjalankan code tersebut di terminal, maka boom, akan muncul sidebar jabatan dan pegawainya seperti ini :



Tampilan form create data :



Mudah bukan? nantinya kita akan custom tampilan-tampilan lainnya disini seperti penambahan filters, sort by, datatables, dan form masih kosong disini karena kita belum menambahkannya melalui JabatanResource.

Sebagai penutup, kita telah berhasil menambahkan Filament Resource ke dalam project Laravel, yang menjadi fondasi untuk pengelolaan data di panel admin. Meskipun kita belum menambahkan form, filter, atau fitur lain, langkah ini sudah membuka jalan untuk mempermudah pengaturan CRUD di aplikasi kita. Pada episode berikutnya, kita akan membahas lebih lanjut tentang cara menambahkan form, filter, dan berbagai fitur lainnya untuk meningkatkan fungsionalitas resource yang telah kita buat. Jadi, pastikan kalian tetap mengikuti agar tidak ketinggalan langkah-langkah penting berikutnya!.

Laravel Filament - Instalasi

Tutorial Instalasi Laravel 11 Fillament V3

Halo guys! Pada episode kali ini, kita akan mempelajari salah satu fitur istimewa yang ada di Laravel 10+, yaitu FILAMENT. Dalam seri tutorial ini, kita akan membahas bagaimana cara menggunakan Filament untuk membangun antarmuka admin yang modern, dinamis, dan mudah diintegrasikan ke dalam aplikasi Laravel. Mungkin sebagian dari kalian sudah pernah mendengar tentang Filament, tapi untuk yang belum, jangan khawatir! Kita akan mulai dari dasar-dasar sampai ke fitur-fitur lanjutannya. So, siap-siap buat belajar bareng di episode Filament ini!

Filament adalah sebuah library untuk Laravel yang dirancang khusus untuk membangun panel admin dengan cepat dan mudah. Filament menyediakan berbagai komponen siap pakai seperti tabel, form, dan manajemen sumber daya, yang memungkinkan pengembang untuk membuat antarmuka administrasi yang elegan dan fungsional tanpa perlu menulis banyak kode dari awal. Filament juga sangat fleksibel dan dapat disesuaikan sesuai kebutuhan, mendukung fitur seperti manajemen pengguna, otorisasi, dan integrasi dengan berbagai paket Laravel lainnya. Dengan pendekatan modular, Filament membantu mempercepat pengembangan backend dengan tampilan yang modern dan mudah digunakan.

Selain kemudahan penggunaannya, Filament juga didukung oleh ekosistem plugin yang terus berkembang, memungkinkan pengembang untuk memperluas fungsionalitas panel admin tanpa banyak usaha. Filament mendukung pembuatan CRUD (Create, Read, Update, Delete) dengan sangat efisien, dan memiliki komponen visual yang responsif serta dapat diintegrasikan dengan Tailwind CSS. Dengan dokumentasi yang lengkap dan komunitas yang aktif, Filament menjadi pilihan populer bagi pengembang yang ingin membangun dashboard admin yang powerful dan scalable di atas framework Laravel. Kombinasi kemudahan, fleksibilitas, dan estetika menjadikan Filament solusi ideal untuk berbagai proyek Laravel.

Jika kalian tertarik untuk mengeksplorasi lebih lanjut dan mendalami penggunaan Filament di Laravel, sangat disarankan untuk mengunjungi dokumentasi resminya. Dokumentasi Filament sangat lengkap dan mudah diikuti, memberikan panduan mulai dari instalasi dasar hingga konfigurasi lanjutan. Dengan berbagai contoh kasus dan penjelasan mendetail, kalian bisa memaksimalkan potensi Filament dalam membangun panel admin yang sesuai dengan kebutuhan proyek kalian. Jangan ragu untuk mengaksesnya di dokumentasi filament. Oke kita akan masuk kedalam pembahasan instalasinya.

Instalation

Instalasi Laravel sebelum memakai filament, tentunya temen-temen harus install terlebih dahulu laravelnya, kalian bisa instal melalui terminal menggunakan composer dengan cara sebagai berikut:

composer create-project laravel/laravel nama-project

Saat kalian menjalankan code tersebut diterminal kalian, maka otomatis laravel akan terinstal dengan versi 11 atau versi yang paling terbaru. Karena memang di episode kali ini kita akan menggunakan laravel 11 sebagai framework PHP nya. Lalu, saat penginstalan sudah berhasil, kalian setting terlebih dahulu database pada file .env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=belajar-filament
DB_USERNAME=root
DB_PASSWORD=

Laravel 11, akan mensetting DB_CONNECTION=sqlite, dan kita cukup ubah menjadi MySQL karena pada episode ini kita akan menggunakan MySQL sebagai DMBS nya.

Instalasi Filament V3

Kita sudah menginstall Laravel 11, selanjutnya kita akan menginstall library filament kedalam project laravel kita. Temen-temen bisa buka dokumentasi filament nya untuk penjelasan lebih lengkap, disini saya akan menjelaskan secara simple dan to the point hehe. oke, langkah pertama kita buka terminal kita, jika kalian menggunakan Vscode sebagai text editor nya, kalian cukup tekan shortcut CTRL + ` maka akan terbuka terminalnya. lalu kalian instal library filament dengan memasukkan code berikut kedalam terminal:

composer require filament/filament

Jika proses instalasi filament sudah berhasil, kita perlu Migrate terlebih dahulu migration yang sudah ada pada database/migrations dengan cara memasukkan code berikut ke terminal kalian :

php artisan migrate

Jika sudah, langkah selanjutnya kalian bisa menambahkan Filament Panel Builder. apa itu? Filament Panel Builder adalah salah satu fitur inti dari Filament yang memungkinkan pengembang untuk dengan mudah membangun panel admin atau dashboard di aplikasi Laravel mereka. Dengan Panel Builder, pengembang dapat membuat antarmuka pengguna yang kaya fitur tanpa perlu menulis banyak kode manual. Fitur ini mempermudah pembuatan halaman administrasi, mengelola sumber daya seperti model database, serta menyediakan komponen siap pakai untuk CRUD (Create, Read, Update, Delete). Kalian bisa masukkan code berikut kedalam terminal :

php artisan filament:install --panels

Saat kalian menjalankan code tersebut didalam terminal kalian, maka akan muncul 1 bar form di terminal untuk memasukkan name panel yang anda inginkan, disini kita akan mengisi form tersebut dengan isi "admin" lalu tekan enter. Maka filament akan menginstal panel yang kita request.

Saat ini kita sudah mempuyai panel dengan nama "admin", selanjutnya kita perlu membuat akun login nya terlebih dahulu untuk kita pakai sebagai akun admin. Dan biasanya, jika kita tidak menggunakan filament, kita harus membuat Seeder untuk memasukkan data akun user yang sudah di isi kedalam database kita, iya bukan? Tapi, fillament mempermudah itu semua tanpa harus membuat seeder terlebih dahulu. Caranya sangat mudah, kalian cukup masukkan code berikut kedalam terminal kalian :

php artisan make:filament-user

Saat code tersebut dijalankan, maka akan ada 3 bar form yang harus diisi, yaitu name, email dan password. Kalian cukup isi semua formnya sesuai yang kalian inginkan, nantinya akun tersebut akan kalian gunakan sebagai akun login masuk ke dalam dashboard admin.

Jika sudah selesai menambahkan akun loginnya, coba kalian buka project laravel kalian dengan cara ketik code berikut di terminal kalian php artisan serve. lalu buka browser, dan masukkan link berikut http://127.0.0.1:8000/admin maka akan muncul halaman login admin dari filament seperti ini.

Masukkan email dan password yang sudah kalian buat sebelumnya, lalu tekan login. Maka jika email dan password tersebut benar, kalian akan di alihkan ke halaman dashboard admin filament seperti ini.

Kesimpulan

Sebagai kesimpulan, setelah mengikuti langkah-langkah instalasi Filament, instalasi panel, dan penambahan akun user, kita telah berhasil menyiapkan sebuah dashboard admin yang fungsional di aplikasi Laravel. Filament menawarkan solusi yang sangat efisien dan mudah dipahami untuk membangun antarmuka administrasi yang elegan dan modern. Dengan panel yang dapat diatur sesuai kebutuhan dan fitur pengelolaan pengguna yang kuat, Filament menjadi pilihan tepat untuk mempercepat pengembangan proyek Laravel kalian. Semoga tutorial ini membantu, dan jangan ragu untuk mengeksplorasi lebih jauh fitur-fitur canggih yang ditawarkan oleh Filament!

Mungkin untuk EPS 1 - Instalasi Filament kali ini cukup sekian, kita akan melanjutkan sesi pembelajaran berikutnya dipertemuan Episode 2 - Setting up the database, models and resource. Thanks guys, See You!

NGOTER EPS 4 - Routing Configuration

NgoterNgoding CodeigniterEpisode 4RoutingFramework PHP

Halo guys, mari kita teruskan pembahasan kita mengenai CodeIgniter 4. Sebelumnya, kita telah mempelajari tentang MVC pada NGOTER EPISODE 3. Saat ini, kita akan fokus pada episode berikutnya, yakni NGOTER EPS 4 - Routing.

Pada CodeIgniter 4, konsep MVC (Model, View, Controller) merupakan fondasi utama dalam pengembangan aplikasi. Namun, salah satu aspek penting dalam struktur MVC adalah Routing. Routing memainkan peran kunci dalam menentukan bagaimana URL aplikasi diarahkan ke berbagai fungsi controller.

Dengan mekanisme routing yang efektif, CodeIgniter 4 memungkinkan pengembang untuk dengan mudah mengatur dan mengonfigurasi pola URL, sehingga memudahkan pengelolaan rute dan penanganan permintaan HTTP. Routing yang baik membantu memisahkan logika aplikasi dari URL, meningkatkan keterbacaan kode, dan mempermudah pemeliharaan proyek.

Selanjutnya, pada NGOTER EPS 4 - ROUTING CODEIGNITER 4, kita akan mendalami lebih lanjut tentang cara menggunakan dan mengonfigurasi routing di CodeIgniter 4 untuk membangun aplikasi web yang lebih terstruktur dan efisien.

Routing

Routing berperan penting dalam sebuah pembangunan aplikasi web, yang nantinya segala sesuatu terkait tentang alur atau rute aplikasi anda akan diatur oleh routing dari mulai perpindahan halaman, proses pengalihan controller dan lain-lain. Itu semua diatur melalui Route. Berikut adalah beberapa konsep dasar tentang Routing yang ada di Codeigniter 4.

Routes Configuration

Konfigurasi routing biasanya ditempatkan dalam file app/Config/Routes.php. Di sini, Anda dapat menentukan aturan-aturan routing untuk mengarahkan URL ke controller dan metodenya.

Basic Routing

perlu temen-temen ketahui, pastinya dalam sebuah website terdapat proses pengalihan atau perpindahan halaman dan awal perintah yang digunakan pada proses pengalihan halaman tersebut yaitu menggunakan routing yang nantinya routing tersebut akan mengalihkan lagi prosesnya ke Controller yang dituju. Contoh basic routing untuk perpindahan halaman, kita akan menggunakan method GET. temen-temen bisa buka file Routes.php yang terletak di folder app/Config/Routes.php. lalu ini adalah contoh isi didalamnya :

$routes->get('biodata', 'BiodataController::index');

Temen-temen perhatikan code diatas, kita menggunakan method GET untuk mengakses function index yang ada pada BiodataController. Jadi kita harus mempunyai file Controller dengan namaBiodataController.php yang didalamnya terdapat code seperti ini :

<?php

namespace App\Controllers;

class Home extends BaseController
{
   public function index()
   {
     return view('pages/biodata');
   }
}

Nah sekarang kita sudah memiliki $routes dan BiodataController, Selanjutnya apa? kita tinggal membuat sebuah button yang nantinya akan diarahkan ke $routes yang sudah kita buat. Kita buat seperti ini :

<a type="button" class="btn btn-primary btn-sm" href="<?= base_url('biodata') ?>"> Biodata </a>

Saat button tersebut diklik, maka sistem akan mencari $routes dengan nama biodata lalu akan dialihkan prosesnya ke BiodataController pada function index.

HTTP Methods

Codeigniter tidak hanya mempunyai method GET saja, tetapi ada juga method lain yang akan sering kita gunakan untuk mengirim data dari klien ke server. Method tersebut dinamakan POST dan PUT.

Dalam konteks HTTP, POST dan PUT adalah dua metode yang digunakan untuk mengirim data dari klien (browser) ke server. Kedua metode ini memiliki tujuan yang berbeda dan umumnya digunakan dalam skenario tertentu.

Fungsi Method POST

Pertama, Metode POST digunakan untuk mengirimkan data ke server untuk membuat sumber daya baru.

kedua, Data yang dikirim dengan metode POST dikirim dalam tubuh permintaan HTTP, sehingga tidak terlihat di Url. maksudnya gimana? sebelumnya kan kalau kita pakai GET dengan routes seperti diatas maka akan terlihat di url, sebagai contoh perbedaan POST dan GET:

<-- Misal Kita mengakses halaman add biodata dengan routes seperti ini -->
<-- Method GET -->
$routes->get('admin/biodata/add', 'BiodataController::add');

   <-- Hasil URL GET -->
   http://localhost:8080/admin/biodata/add

<-- Saat kita post/kirim ke server -->
<-- Method POST -->
$routes->post('admin/biodata/create', 'BiodataController::create');

   <-- Hasil URL akan tetap seperti ini -->
   http://localhost:8080/admin/biodata/add

   <-- Tidak akan berubah menjadi -->
   http://localhost:8080/admin/biodata/create
   <-- Karena ini adalah method POST bukan GET -->

ketiga, Metode ini sering digunakan untuk mengirimkan formulir web atau mengirimkan data yang tidak ingin terlihat di URL, seperti data formulir yang besar atau sensitif. Contoh penggunaan dalam HTML form:

<form method="post" action="<?= base_url('admin/biodata/create') ?>">
   <input type="text" name="username">
   <input type="password" name="password">
   <button type="submit">Submit</button>
</form>

Di sisi server (dalam CodeIgniter Controller):

$username = $this->request->getPost('username');
$password = $this->request->getPost('password');

Fungsi Method PUT

Pertama, Metode PUT digunakan untuk mengirimkan data ke server untuk mengupdate sumber daya yang sudah ada atau membuat sumber daya baru jika belum ada.

Kedua, Dalam praktiknya, beberapa lingkungan atau server web mungkin tidak secara standar mendukung metode PUT. Untuk mengatasi hal ini, seringkali dalam aplikasi web, Anda akan melihat penggunaan metode POST dengan data tambahan yang menunjukkan bahwa ini adalah operasi PUT. Contoh penggunaan dalam HTML form (dengan menggunakan metode POST):

<form method="post" action="<?= base_url('admin/biodata/update/' . $biodata['id_biodata']) ?>">
   <input type="hidden" name="_method" value="put">
   <input type="text" name="updatedField">
   <button type="submit">Submit</button>
</form>

Di sisi server (dalam CodeIgniter Controller):

$method = $this->request->getMethod(); // mendapatkan metode (POST atau PUT)
$updatedField = $this->request->getPost('updatedField');

Dalam contoh di atas, kita menggunakan input tersembunyi (_method) untuk menentukan bahwa meskipun form menggunakan metode POST, seharusnya diinterpretasikan sebagai operasi PUT.

Fungsi Method MATCH

Pertama, MATCH digunakan untuk menangani beberapa metode HTTP pada suatu rute tertentu. Artinya, Anda dapat menentukan bahwa suatu rute dapat menanggapi lebih dari satu metode HTTP. Contoh Penggunaan

$routes->match(['get', 'post'], 'biodata', 'BiodataController::index');

Ini berarti rute '/biodata' akan menanggapi baik metode GET maupun POST, dan akan memanggil metode index pada BiodataController.

Fungsi Method DELETE

Pertama, DELETE digunakan untuk menangani permintaan HTTP dengan metode DELETE. Ini menyediakan cara untuk mengarahkan permintaan HTTP DELETE ke suatu rute dan menghubungkannya dengan fungsi yang sesuai dalam controller. Contoh Penggunaan :

$routes->delete('biodata/delete/(:num)', 'BiodataController::deleteBiodata/$1');

Ini berarti jika ada permintaan HTTP DELETE ke rute '/biodata/delete/1', maka akan memanggil metode deleteBiodata pada BiodataController dengan parameter 1.

Kesimpulan

Pada NGOTER EPS 4 - Routing, kita dapat menyimpulkan bahwa konsep MVC (Model, View, Controller) tetap menjadi fondasi utama dalam pengembangan aplikasi web menggunakan CodeIgniter 4. Routing, sebagai salah satu aspek penting dalam struktur MVC, memainkan peran kunci dalam menentukan bagaimana URL aplikasi diarahkan ke berbagai fungsi controller. Dengan mekanisme routing yang efektif, CodeIgniter 4 memungkinkan pengembang untuk dengan mudah mengatur dan mengonfigurasi pola URL, meningkatkan keterbacaan kode, dan mempermudah pemeliharaan proyek. Sebuah routing yang baik membantu memisahkan logika aplikasi dari URL, sehingga memperbaiki organisasi dan skalabilitas proyek.

Pentingnya HTTP methods seperti POST dan PUT dalam routing CodeIgniter 4 juga dapat disimpulkan. Metode POST digunakan untuk mengirimkan data ke server untuk membuat sumber daya baru, sementara metode PUT digunakan untuk mengirimkan data ke server untuk mengupdate sumber daya yang sudah ada atau membuat sumber daya baru jika belum ada. Dalam konteks aplikasi web, CodeIgniter 4 memfasilitasi penggunaan metode POST dan PUT dengan mudah, membantu pengembang mengelola data yang dikirim dari klien ke server. Dengan demikian, konsep routing dan penggunaan metode HTTP menjadi landasan penting dalam mengembangkan aplikasi web yang efisien dan terstruktur menggunakan CodeIgniter. Dan perlu kalian ketahui, metode routing codeigniter 4 tidak hanya sebatas ini, saya hanya menjelaskan basic saja yang nantinya sering kita gunakan saat praktek. Tetapi, jika waktu saya mencukupi untuk menjelaskan semua tentang routing, insya allah akan saya jelaskan di sesi-sesi berikutnnya.

Mungkin untuk NGOTER EPS 4 - Routing kali ini cukup sekian, kita akan melanjutkan step berikutnya dipertemuan Episode 5 - Models, Databases & Seeder. Thanks guys, See You!

NGOTER EPS 3 - Konsep MVC

NgoterNgoding CodeigniterEpisode 3MCVFramework PHPModelViewController

Hallo guys, kita lanjutkan pembahasan kita mengenai codeingiter 4. sebelumnya kita sudah belajar tentang instalasi codeigniter 4 pada NGOTER EPS 2 - INSTALASI. Sekarang kita akan lanjut ke episode selanjutnya yaitu NGOTER EPS 3 - KONSEP MVC (Model, View & Controller).

Perlu temen-temen ketahui, codeigniter itu memakai arsitektur konsep Model, View dan Controller atau bisa disebut MVC. Nantinya, saat temen-temen membuat project menggunakan codeginter 4, kalian akan selalu menggunakan arsitektur tersebut. lalu apa sih View itu? apa sih Model itu? dan apa sih Controller itu?, semua itu akan kita bahasa semua guys di sesi ini beserta dengan praktek yang akan saya contohkan. Oke, kita masuk kesesi penjelasannya dulu yah.

Konsep MVC

Model-View-Controller (MVC) adalah suatu pendekatan dalam pengembangan aplikasi yang membantu kita mengorganisir kode agar lebih terstruktur dan mudah dimengerti. Dalam konsep ini, Model berperan sebagai tempat penyimpanan data, seperti database atau berkas. Model menangani operasi-operasi terkait data, seperti pengambilan atau penyimpanan informasi. Di sisi lain, View bertanggung jawab untuk menampilkan data kepada pengguna akhir. Misalnya, jika model menyimpan informasi tentang pengguna, tampilan akan menentukan cara informasi itu ditampilkan, mungkin dalam bentuk halaman web atau antarmuka grafis. Controller bertindak sebagai perantara antara Model dan View, mengelola alur logika aplikasi. Jadi, ketika pengguna melakukan sesuatu, seperti mengklik tombol, Controller akan menanggapi dan memutuskan apa yang harus dilakukan, berkomunikasi dengan Model atau mengarahkan tampilan yang sesuai.

MVC membantu menghindari kekacauan dalam kode dan mempermudah pemeliharaan aplikasi. Dengan memisahkan tugas-tugas ini, jika kita perlu mengubah cara tampilan bekerja, kita hanya perlu mengubah kode di bagian View tanpa memengaruhi Model atau Controller. Ini memungkinkan kolaborasi tim pengembang yang lebih efisien dan memudahkan pemahaman bagi mereka yang bekerja pada proyek yang sama. Keseluruhan konsep ini membantu dalam membangun aplikasi yang lebih bersih, mudah diubah, dan lebih mudah untuk dipahami, terutama saat proyek menjadi lebih besar dan lebih kompleks.

Models (M)

Model (M) dapat diibaratkan sebagai gudang penyimpanan data aplikasi, mirip dengan rak buku di perpustakaan. Di sini, setiap buku di rak mewakili suatu entitas data dalam aplikasi, seperti informasi pengguna atau entitas lainnya. Model bertanggung jawab atas pengelolaan dan manipulasi data ini, termasuk operasi-operasi seperti menyimpan, mengambil, atau memperbarui informasi.

View (V)

View (V) dapat dianggap sebagai cara kita melihat data yang disimpan dalam Model. Kita bisa membayangkan View sebagai tampilan rak buku di perpustakaan, di mana kita dapat melihat buku-buku dan interaksi dengan mereka. View bertugas menentukan bagaimana data dari Model ditampilkan kepada pengguna akhir. Ini mungkin berupa halaman web, antarmuka pengguna grafis, atau format tampilan lainnya. Dengan kata lain, View memberikan representasi visual atau presentasi dari data yang disimpan di dalam Model.

Controller (C)

Controller (C) berperan sebagai pengendali atau pustakawan yang memfasilitasi interaksi antara pengguna, Model, dan View. Misalnya, ketika pengguna ingin meminjam buku tertentu dari rak (Model), pengguna memberi tahu pustakawan (Controller). Pustakawan kemudian berbicara dengan rak buku (Model) untuk mendapatkan buku yang diinginkan dan memberitahu tampilan (View) untuk menunjukkan buku tersebut kepada pengguna. Dengan demikian, Controller memanage alur logika aplikasi, menanggapi input pengguna, dan memastikan komunikasi yang lancar antara Model dan View.

Pemisahan tugas ini membantu dalam pengembangan aplikasi yang terstruktur, mudah dipelihara, dan memudahkan kolaborasi tim pengembang. Setiap bagian memiliki peran spesifiknya sendiri, dan ini membantu menghindari kekacauan dan meningkatkan kejelasan dalam kode sumber aplikasi.

Bagaimana? sudah paham tentang konsep MVC yang sudah dibahas diatas?. intinya guys, dari ketiga tetrsebut saling membutuhkan satu sama lain,sehingga bisa dikatakan program kita tidak bisa berjalan jika salah satu dari mereka ntah itu M/V/C tidak dijalankan, sebagai contoh kita ingin menampilkan data dari database sebut saja databasnya bernama tb_biodata yang didalamnya terdapat field berikut ini:

Sekarang kita mempunyai tb_biodata dengan jumlah field sebanyak 5. Dan kita akan memunculkan data tersebut ke view, atau ke interface tampilan codeigniter 4 yang akan kita buat nantinya. Dan untuk memunculkan data tersebut kedalam view, pastinya kita memakai konseo MVC.

Pertama, Kita buat Model terlebih dahulu dengan cara memakai Terminal, temen-temen bisa pakai GIT/CMD atau Terminal lainnya. teman-teman cukup ketik seperti ini untuk membuat Modelsnya:

php spark make:model BiodataModel

Setelah temen-temen klik enter maka akan dibuatkan otomatis Modelsnya yang bisa temen-temen lihat di folder app/Models/BiodataModel.php Temen-temen buka filenya lalu masukkan semua field yang ada table database diatas kedalam BiodataModel.php. maka akan jadinya seperti ini:

<?php
namespace App\Models;
use CodeIgniter\Model;

class BiodataModel extends Model
{
   protected $table = 'tb_biodata';
   protected $primaryKey = 'id';
   protected $allowedFields = [
   'nama', 
   'email', 
   'jk', 
   'alamat' 
   ];
}

Kedua, temen-temen siapkan controller untuk membuat proses penampilan data dari database ke view yang dituju. Kita perlu membuat terlebih dahulu controllernya dengan cara:

php spark make:controller BiodataController

Setelah menjalankan code tersebut diteminal, maka akan secara otomatis BiodataController.php dibuat dan bisa kalian buka di folde app/Controllers/BiodataController.php. lalu temen-temen tinggal panggil BiodataModels kedalam BiodataController :

<?php
namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\BiodataModel;

class BiodataController extends BaseController
{
    public function index()
    {
        $model = new BiodataModel();
        $biodata = $model->findAll();

        $data = [
  'biodata' => $biodata,
        ];

        return view('index', $data);
    }
}

Setelah menerapkan code tersebut kedalam BiodataController maka temen-temen sudah bisa memanggil data dari BiodataModel yang sudah terkoneksi dengan database kedalam view interface kalian. Perhatikan pada bagian return view('index', $data);, disini kita menggunakan return view untuk menampilkan file index.php yang ada di folder Views. Jadi artinya, temen-temen harus mempunyai file bernama index.php didalam folder Views kalian. jika sudah dibuat, kalian tinggal memanggil data yang sudah dikirim dengan variable $biodata. caranya, anggapkan tampilan view temen-temen seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Biodata - Mosyahizuku</title>
</head>
<body>

<div class="container mt-4">
  <table class="table table-bordered">
   <thead>
    <tr>
    <th scope="col">No</th>
    <th scope="col">Nama</th>
    <th scope="col">Email</th>
    <th scope="col">Jenis Kelamin</th>
    <th scope="col">Alamat</th>
    </tr>
   </thead>
   <tbody>
   <?php $i = 1; ?>
   <?php foreach ($biodata as $item) : ?>
    <tr>
    <th scope="row"><?= $i++; ?></th>
    <th scope="row"><?= $item['nama'] ?></th>
    <td><?= $item['email'] ?></td>
    <td><?= $item['jk'] ?></td>
    <td><?= $item['alamat'] ?></td>
    </tr>
   <?php endforeach; ?>
   </tbody>
  </table>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dengan kalian menerapkan hal tersebut, maka data dari database yang ada di tb_biodata akan ditampilkan di view tersebut. Kita menggunakan foreach atau pengulangan (loop) yang fungsinya untuk mengulangi setiap elemen dalam suatu array atau objek. Konstruksi ini memungkinkan kita mengakses setiap elemen satu per satu dan melakukan operasi tertentu pada setiap elemen tersebut.

Mungkin untuk NGOTER EPS 3 - Konsep MVC kali ini cukup sekian, kita akan melanjutkan step berikutnya dipertemuan Episode 4 - Routing. Thanks guys, See You!

NGOTER EPS 2 - Instalasi

NgoterNgoding CodeigniterEpisode 2InstalasiFramework PHPTools

Hallo guys, kita lanjutkan pembahasan kita mengenai codeingiter 4. sebelumnya kita sudah belajar mengenali apa itu codeigniter 4 pada NGOTER EPS 1 - PEGNGENALAN CODEIGNITER. Sekarang kita akan lanjut ke episode selanjutnya yaitu NGOTER EPS 2 - INSTALASI yang nantinya kita akan membahas step by step instalasi codeingiter 4. Pastikan temen-temen harus sudah menginstall tools yang diperlukan. berikut adalah tools yang harus temen-temen install terlebih dahulu:

Instalasi Composer

Temen-temen bisa buka linknya disini lalu klik Composer-setup.exe jika temen-temen memakai operasi windows. tetapi jika temen-temen memakai operasi lain, maka silahkan download composer yang sesuai dengan operasi anda. Disini kita akan download versi operasi windows yah.

nah kalau temen-temen sudah install, kita cek dulu melalu terminal atau cmd dengan cara klik Windows + R lalu ketik cmd lalu tekan enter. setelah itu silahkan temen-temen ketik di terminal seperti ini:

composer -v

maka akan muncul seperti ini di terminal kalian:

jika tampilannya sudah seperti itu, berarti tandanya composer berhasil terinstall di pc anda.

Instalasi Xampp

Temen-temen bisa buka linknya disini lalu silahkan download xampp yang anda inginkan, pilih dengan versi php 7.4 keatas, saya sarankan php versi terbaru.

Nah setelah sudah berhasil terinstall, temen-temen harus menambahkan Environment Variable terlebih dahulu, dengan cara sebagai berikut :

Silahkan tekan logo windows atau klik search pada pc kalian lalu ketik env maka akan muncul edit environment variable seperti ini:

Saat diklik maka akan muncul tampilan system properties dan dibagian bawah ada button environment variables silahkan di klik maka akan muncul jendela tampilan environment variables. Pada tampilan bagian atas terdapat User Variables dan bagian bawah System Variables, temen-temen fokus kebagian System Variables karena kita akan menambahkan path php disitu. silahkan klik path lalu tekan edit. maka akan muncul jendela edit environment variables. Selanjutnya, silahkan klik new, lalu tambahkan seperti ini (fokus ke xampp/php):

setelah edit environment selesai, silahkan temen-temen cek versi php melalui cmd untuk mengetahui apakah php sudah terbaca atau belum. jika berhasil, maka tampilan cmd anda akan seperti ini :

Instalasi Text Editor

Text editor: untuk tools ini yaitu text editor, temen-temen bebas menggunakan text editor apa saja, ntah itu Vscode, Sublime text atau yang lainnya. Silahkan install terlebih dahulu sesuai dengan text editor yang kalian inginkan. Saya sendiri disini menggunakan text editor Sublime Text.

Instalasi GIT

GIT: untuk tools ini sifatnya opsional, temen-temen bisa pakai atau tidak tergantung dengan keinginan masing-masing.

Instalasi Codeigniter 4

Oke, setelah semua tools sudah kita install, saatnya kita masuk ke sesi instalasi codeigniter 4 nya. Silahkan klik disini untuk membukan halaman dokumentasi ci 4 dengan menggunakan composer sebagai instalasinya. caranya bagaimana?

Pertama: silahkan buka folder C:\xampp\htdocs lalu buka terminalnya didalam folder htdocs. jika terminal sudah terbuka, masukkan code berikut :

composer create-project codeigniter4/appstarter nama-folder

Temen-temen bisa ubah nama-foldernya sesuai keinginan kalian, lalu jika sudah silahkan tekan enter, maka proses instalasi akan berjalan. Oh iya, pakai akses internet ya broo.

Selanjutnya: silahkan buka folder yang sudah berhasil diinstall tadi, lalu buka folder tersebut ke text editor kalian, disini saya pakai sublime text. Didalam folder, terdapat folder-folder lain diantaraya app, public, test, vendor dan writable.

Kita ga akan explore terlalu jauh dulu, disini kita cukup melakukan proses instalasi dan menjalankan project ci 4 kita. kita tidak akan membuat controller, model, migration dan lain-lain disesi ini.

Selanjutnya: temen-temen bisa lihat di folder project-nya, terdapat env yang nantinya kita gunakan untuk setting database, app.baseURL, app.name dan lain-lain. kita bisa copy env terlebih dahulu melalui terminal dengan cara :

cp env .env

setelah itu, silahkan bukan file env yang ada titiknya yaitu .env

Selanjutnya: temen-temen hapus # pada bagian CI_ENVIRONMENT lalu ubah production menjadi development untuk kita alihkan project kita ke mode developer agar kita bisa diberitahuakn oleh CI saat codingan kita terdapat error. berikut adalah perubahannya :

{-- Default --}
# CI_ENVIRONMENT = production

{-- Ubah menjadi --}
CI_ENVIRONMENT = development

Kita ubah juga bagian app.baseURL menjadi sebagai berikut :

{-- Default --}
# app.baseURL = '';

{-- Ubah menjadi --}
app.baseURL = 'http://localhost:8080/';

Last Setting: silahkan buka directory app/Config/App.php dan sesuaikan perubahannya menjadi sebagai berikut :

{-- pastikan bagian baseURL --}
public string $baseURL = 'http://localhost:8080/';

{-- Hapus index.php --}
public string $indexPage = 'index.php';

{-- menjadi --}
public string $indexPage = '';

Fungsi menghapus index.php adalah agar saat kita buka project-an kita di browser, index.php-nya tidak ngikut di url, biasanya kalau kita tidak hapus index.php maka urlnya akan menjadi seperti ini di browser :

http://localhost:8080/public/index.php/login

Oke, jika sudah semua, sekarang kita coba buka project kita di browser, caranya, kita aktifkan dulu apache dan mysql kita di xampp, lalu selanjutnya buka terminal dan masukkan :

php spark serve

setelah itu buka browser dengan url http://localhost:8080/ maka tampilannya akan seperti ini :

Dengan begitu, anda sudah berhasil menjalankan project CI 4 dipc anda.

Mungkin untuk NGOTER EPS 2 - INSTALASI kali ini cukup sekian, kita akan melanjutkan step berikutnya dipertemuan Episode 3. Thanks guys, See You!

NGOTER EPS 1 - Pengenalan Codeingiter 4

Ngoter Ngoding Codeigniter Episode 1 Pengenalan Framework PHP

CodeIgniter adalah kerangka kerja pengembangan aplikasi web berbasis PHP yang sederhana dan ringan. Dirancang untuk mempercepat proses pengembangan, CodeIgniter menawarkan struktur yang mudah dipahami, dengan menggabungkan fitur yang komprehensif dan dokumentasi yang kuat. Dengan pendekatan "konvensi atas konfigurasi", memungkinkan pengembang untuk fokus pada logika aplikasi mereka tanpa harus terlalu terikat pada aturan tertentu, memberikan kebebasan dan keinginan dalam membangun aplikasi web yang efisien dan andal.

Kelebihan Codeigniter

CodeIgniter memiliki beberapa kelebihan yang membuatnya diminati oleh pengembang:

Ringan dan Cepat :  Strukturnya yang ringan membuatnya mudah dipelajari dan diimplementasikan. Kinerjanya yang cepat memungkinkan pengembangan aplikasi yang responsif.

Dokumentasi yang Baik : CodeIgniter memiliki dokumentasi yang komprehensif, membantu pengembang dalam memahami dan menggunakan fitur-fiturnya dengan mudah. Klik disini untuk melihat dokumentasi resmi dari codeigniter

Kebebasan dalam Penggunaan : Pendekatan "konvensi atas konfigurasi" memberi pengembang kebebasan untuk menyesuaikan aplikasi mereka tanpa terlalu banyak aturan yang harus diikuti.

Keamanan yang Ditingkatkan: Memiliki fitur keamanan bawaan yang membantu melindungi aplikasi dari serangan umum seperti SQL injection dan cross-site scripting (XSS).

Komunitas yang Aktif: Terdapat komunitas yang besar dan aktif, yang berarti ada banyak sumber daya, tutorial, dan dukungan yang tersedia.

Mudah Diperluas: Memiliki beragam pustaka, helper, dan plugin yang memudahkan pengembangan dan perluasan fungsionalitas aplikasi.

Kekurangan Codeigniter

Kurangnya fitur bawaan: Meskipun telah memasukkan beberapa fitur modern, CodeIgniter 4 tetap lebih ringan daripada beberapa framework PHP modern lainnya, sehingga beberapa fitur mungkin perlu diimplementasikan secara manual atau menggunakan pustaka eksternal.

Komunitas yang lebih kecil dibandingkan Laravel: Komunitas CodeIgniter 4, meskipun aktif, mungkin tidak sebesar komunitas Laravel. Ini dapat mempengaruhi ketersediaan sumber daya dan dukungan.

Tidak secanggih framework lain: Beberapa framework modern seperti Laravel mungkin menawarkan lebih banyak fitur terkini dan ekosistem yang lebih besar.

Kurangnya model terintegrasi secara bawaan: CodeIgniter 4 tidak memiliki dukungan modul terintegrasi secara bawaan, meskipun Anda dapat menerapkan pola desain modul secara manual.

PERKENALAN CODE

Oke kita sudah mengetahui penjelasan umum tentang codeigniter 4 beserta dengan kelebihan dan kekurangannya. selanjutnya, sebelum sesi ini berakhir, saya ingin memberikan sedikit contoh mengenai codingan CI 4 untuk menampilkan Hello World. berikut contoh sederhananya :

STEP 1

Buka terminal atau command prompt dan buatlah controller baru. Misalnya, kita akan buat controller dengan nama HelloController.php.

php spark make:controller Hello

STEP 2

Buka file yang baru saja dibuat, HelloController.php, di direktori app/Controllers. Kemudian, ubah isinya menjadi seperti berikut:

namespace App\Controllers;

class HelloController extends BaseController
{
  public function index()
  {
    return view('hello.php');
  }
}

{-- Cara ini dipakai apabila ingin membuka halaman dalam file php tertentu,
jadi nantinya anda harus mempunyai file hello.php di folder Views anda. --}

Simpan perubahan, dan Anda dapat menjalankan aplikasi web Anda.

php spark serve

Akses http://localhost:8080/hello di browser Anda. Anda seharusnya melihat output "Hello, World!".