Implementasi HMVC Pada Codeigniter 4

Hi sobat Jagowebdev.com, pada kesempatan kali ini kita akan membahas penerapan HMVC pada Framework PHP Codeigniter 4. Untuk mendownload framework ini, sobat dapat mengunjungi halaman official Codeigniter di https://codeigniter.com. Versi framework yang kita gunakan kali ini adalah versi 4.1.3

I. Konsep HMVC

HMVC merupakan kependekan dari Hierarical Model View Controller, Konsep HMVC ini merupakan pengembangan dari model MVC (Model View Controller) dengan menambahkan struktur Hierarkis pada MVC tersebut. Untuk lebih memahami konsep MVC dan HMVC, perhatikan gambar berikut:

Pada model MVC diatas, terlihat bahwa dalam satu aplikasi, hanya ada satu pengelompokan Model, View. Controller, bandingkan dengan HMVC berikut ini:

Pada HMVC, dalam satu aplikasi terdapat kelompok kelompok kecil dimana setiap kelompok tersebut memiliki Model, View, Controller sendiri. Masing masing kelompok tersebut dapat berhubungan satu dengan lain secara hierarkis.

II. Model HMVC Pada Codeigniter 4

Codeigniter 4 menggunakan model MVC dimana Model, View, dan Controller dipisahkan oleh masing masing folder, Model pada app/Models, View pada app/Views, dan Controller pada app/Controllers, selanjutnya jika ingin membuat halaman, misal produk, maka kita perlu membuat Controller Produk.php di folder app/Controllers, Model ProdukModel.php di folder app/Models, dan file .php untuk tampilan halaman pada folder app/Views. Contohnya adalah sebagai berikut:

Dengan semakin banyaknya halaman yang ditambahkan maka akan semakin banyak file yang ada di dalam folder Controllers, Models, dan Views, hal ini akan membingungkan ketika kita akan melakukan maintenance karena perlu mencari file terkait dari sekian banyak file yang ada, belum lagi jika dimasing masing Model, View, dan Controller tersebut terdapat sub folder, untuk mengatasi hal tersebut maka model HMVC dapat menjadi solusi.

Dalam praktik, penerapan HMVC bisa beraneka ragam sesuai dengan kebutuhan dilapangan, kita tidak harus strict pada konsep yang ada. Berikut contoh model alternatif penerapan HMVC pada Codeigniter

II.1. HMVC Model 1

Pada model ini, Model, View, dan Controller dikelompokkan menjadi satu folder dan disimpan pada folder app/Modules, misal kita ingin membuat halaman produk, maka (1) kita buat folder app/Modules/Produk (2) kita buat folder Models, Views, dan Controllers ke dalam folder Produk tersebut, contoh sebagai berikut:

Berikut ini contoh tampilan beserta dengan file php nya

Penamaan folder Modules ini hanya untuk memudahkan kita mengidentifikasi bahwa aplikasi terdiri dari module-module dimana module ini bersifat modular, Anda bisa memberi nama lain sesuai keinginan Anda. Module ini nantinya yang akan digunakan untuk menampilkan/memproses halaman.

Pada model pertama ini, kita dapat dengan mudah mencari file yang menyusun suatu module/halaman sehingga misal ada yang error pada halaman produk maka kita dapat langsung menuju ke folder app\Modules\Produk dan hanya fokus ke folder tersebut, tanpa harus dipusingkan dengan folder dan file ditempat lain. Pada model ini, setiap module tampak seperti mini application sehingga dapat dengan mudah dimaintenance atau di bagi ke user lain.

Namun demikian, dengan model seperti itu, akan kerepotan jika ingin membuat layout yang berbeda beda (yang biasanya berbentuk themes), karena harus memisahkan views untuk masing themes, misal kita ingin membuat themes dengan nama clear dan modern, maka kita perlu membuat folder clear dan modern di setiap folder views, misal seperti ini:

Pada contoh di atas, kita harus membuat view pada masing masing themes pada setiap Views yang ada di setiap module.

II.2. HMVC Model 2

Untuk mengatasi permasalahan pada model pertama, maka kita dapat mengelompokkan views pada masing masing module ke folder tersendiri, sebagai contoh kita pindahkan semua file views ke folder app/Views, selanjutnya masing masing views tersebut kita kelompokkan berdasarkan nama module nya

Misal untuk menyimpan views module Produk, kita buat folder Produk pada app/Views, di folder Produk ini kita letakkan semua file views yang berkaitan dengan module Produk tersebut, demikian juga dengan module lainnya, contoh sebagai berikut:

Pada model ini, konsentrasi kita terpecah karena file views tidak berada satu folder dengan Controllers dan Models sehingga ketika melakukan maintenance, harus mencari file terkait module tersebut di folder app/Modules dan app/Views

Namun demikian, model ini memudahkan ketika ingin mengembangkan themes, karena semua file views terkumpul menjadi satu yaitu di folder Views, sehingga kita cukup mengelompokkan file views tersebut berdasarkan themes nya, misal kita memiliki themes dengan nama clear dan modern, maka struktur foldernya tampak seperti berikut:

II.3 Model Yang Dipilih

Dari kedua model diatas, model mana yang sebaiknya kita pilih? Kembali ke pembahasan awal bahwa model yang digunakan disesuai dengan kebutuhan di lapangan, tidak perlu strict pada konsep yang ada. Pada tutorial kali ini, kita akan menggunakan model pertama, karena bentuk aplikasi kita hanya menggunakan satu themes.

III. Implementasi HMVC Pada Codeigniter 4

Selanjutnya mari kita bahas bagaimana penerapan HMVC pada codeigniter 4.

III.1 Routing

Secara default, ketika ada request melalui URL, Codeigniter akan memparsing URL tersebut untuk kemudian menentukan controller yang akan di load dan method yang akan dieksekusi. Secara default, Codeigniter akan meload controller yang ada di folder app/Controllers.

Pada model HMVC yang kita bangun, controller berada di dalam folder Modules\NamaModule\Controllers, untuk itu agar Codeigniter dapat membaca controller tersebut, kita perlu mengubah routing yang ada, pertama tama kita ubah routing untuk halaman depan: http://localhost, buka file app\Config\Routes.php dan isikan baris berikut setelah $routes->setAutoRoute(true);

$router = service('router');
$module = $router->controllerName();
$routes->get('/', '\App\Modules\\' . $module . '\Controllers\\' . $module . '::index');

Pada script diatas, perintah $router->controllerName(); digunakan untuk mendaparkan nilai default controller (secara default bernilai Home), selanjutnya dengan perintah $route->get() kita atur Class dan Method untuk default controller tersebut.

Berikutnya kita definisikan routing untuk module, misal untuk routing module produk, tambahkan baris berikut

$routes->add('produk', '\App\Modules\Produk\Controllers\Produk::index');

Selanjutnya jika kita ingin menambahkan halaman tambah produk dan edit produk dengan url http://localhost/produk/add dan http://localhost/produk/edit, maka kita perlu menambahkan routing sebagai berikut:

$routes->add('produk', '\App\Modules\Produk\Controllers\Produk::index');
$routes->add('produk/edit', '\App\Modules\Produk\Controllers\Produk::add');
$routes->add('produk/edit', '\App\Modules\Produk\Controllers\Produk::edit');

Demikian seterusnya, setiap kita akan menambahkan halaman kita perlu menambahkan routing, agar penulisan routing ini lebih singkat maka kita dapat membuat group sebagai berikut:

$routes->group('produk', ['namespace' => '\Modules\Produk\Controllers'], function ($routes) {
	$routes->get('/', 'Produk::index');
	$routes->get('/add', 'Produk::add');
	$routes->get('/edit', 'Produk::edit');
});

Jika digabungkan dengan routing default controller, maka scriptnya adalah sebagai berikut (ditulis di file app\Config\Routes.php setelah $routes->setAutoRoute(true);

$router = service('router');
$module = $router->controllerName();
$routes->get('/', '\App\Modules\\' . $module . '\Controllers\\' . $module . '::index');

$routes->group('produk', ['namespace' => '\Modules\Produk\Controllers'], function ($routes) {
	$routes->get('/', 'Produk::index');
	$routes->get('/add', 'Produk::add');
	$routes->get('/edit', 'Produk::edit');
});

Seiring dengan penambahan module, maka script routing yang ditambahkan akan semakin banyak, jika sudah demikian, maka maintenancenya akan semakin susah, untuk mengatasi hal tersebut, maka tambahan routing ini sebaiknya ditulis di file terpisah, caranya dengan membuat file Routes.php pada tiap tiap module, contoh sebagai berikut:

Selanjutnya pada file app/Config/Routes.php kita load file Routing.php sesuai dengan module yang ada di url sebagai berikut:

$router = service('router');
$module = $router->controllerName();
$routes->get('/', '\App\Modules\\' . $module . '\Controllers\\' . $module . '::index');
$uri = service('uri');
$module = ucfirst(strtolower($uri->getSegment(1)));
require_once ( 'app/Modules/' . $module . '/Routes.php' );

Pada script diatas, nama module kita ambil dari segment ke satu dari url, misal untuk url: http://localhost/produk, maka segement ke satunya adalah produk, kemudian dengan fungsi ucfirst kita beri awalan huruf besar pada nama module namun sebelumnya dengan fungsi strtolower kita ubah nama module tersbut ke lowercase semua, hal ini akan memastikan bahwa nama module berawalah dengan huruf besar dan diikuti dengan huruf kecil semua, misal produk, ProdUk, akan menjadi Produk.

Cara loading file Routers.php diatas tidak berfungsi jika ada perbedaan antara nama module di URL dengan nama module sebenarnya, misal, halaman artikel memiliki url: http://localhost/artikel/belajar-hmvc namun module untuk artikel kita beri nama blog, misal: app/Modules/Blog, untuk mengatasi hal ini, kita dapat meload semua file Routes.php yang ada di setiap module sebagai berikut:

$router = service('router');
$module = $router->controllerName();
$routes->get('/', '\App\Modules\\' . $module . '\Controllers\\' . $module . '::index');

$dir =  scandir('app/Modules/');
foreach ($dir as $module) {
	if ($module == '.' || $module == '..') {
		continue;
	}
	
	$file = scandir('app/Modules/' . $module);
	if (in_array('Routes.php', $file)) {
		include 'app/Modules/' . $module . '/Routes.php';
	}
}

III.2. Base Controller dan Base Model

Ketika mengembangkan aplikasi, maka biasanya terdapat controller digunakan oleh semua controller , controller tersebut bernama base controller. pada HMVC yang kita bangun, BaseController ini kita simpan di app\Controllers\BaseController.php selanjutnya setiap controller yang ada di setiap module meng extend base controller ini, misal class product yang ada di app/Modules/Produk/Controllers/Produk.php

namespace App\Modules\Produk\Controllers;
use App\Modules\Produk\Models\ProdukModel;

class Produk extends \App\Controllers\BaseController
{
	public function __construct() {
		$this->model = new ProdukModel;
	}
	
	public function index()
	{
		echo view('themes\modern\header.php');
		echo view('\App\Modules\Produk\Views\result.php');
		echo view('themes\modern\footer.php');
	}
	
	public function edit() 
	{
		echo view('\App\Modules\Produk\Views\edit.php');
	}
	
	public function add() {
		
		echo view('\App\Modules\Produk\Views\add.php');
	}
}

Demikian juga untuk model, kita buat class base model pada app/Models, selanjutnya setiap model yang ada pada modules meng extend base model ini App\Models\BaseModel.php, misal model yang ada di app\Modules\Produk\Models\ProdukModel.php

namespace App\Modules\Produk\Models;

class ProdukModel extends \App\Models\BaseModel
{
	public function __construct() {
		parent::__construct();
	}
	
	public function getProduk($where) {
		// Script mendapatkan produk dari database
	}
	
	public function saveData($id) 
	{
		// Script menyimpan data produk ke database
	}
}

III.3 Asset Statis

Ketika mengembangkan module, terkadang kita perlu me-load file statis seperti image, javascript, css, dll, misal untuk keperluan membuat halman interaktif, ajax, dll. Dalam Codeigniter, file statis tersebut harus ditempatkan di folder public, karena file tersebut sifatnya direct access, dimana untuk mengaksesnya kita langusung memanggil file tersebut misal http://localhost/public/assets/js/jquery.js jika file tersebut kita tempatkan di dalam folder app, maka file tersebut tidak dapat diakses.

Pada konsep HMVC, idealnya file statis tersebut disimpan jadi satu dengan module, namun karena environment Codeigniter tidak memungkinkan, maka file tersebut tetap kita simpan di folder public, namun tidak kita pisah per module karena tidak efisien, misal sebagai berikut:

Note: Kita bisa saja melakukan modifikasi agar file file statis tersebut bisa diakses melalui forlder app, namun kita tidak melakukan itu, karena akan menyusahkan jika ada update dari core frameworknya.

IV. Download

Untuk lebih memahami penerapan HMVC pada Codeigniter 4, berikut kami sertakan file framework Codeigniter 4 yang telah dimodifikasi sesuai dengan tutorial yang telah kita bahas diatas. Silakan download source codenya disini.

V. Next Step

Dari tutorial diatas, sobat dapat mulai mengembangkan aplikasi HMVC berbasis framework Codeigniter 4.

Jika sobat memerlukan aplikasi HMVC yang sudah jadi yang merupakan penyempurnaan model diatas, seperti:

• Loading assets (js, css) secara dinamis, sesuai keperluan
• Routing untuk ajax
• Membuat autorute sehingga tidak perlu membuat file Routes.php disetiap module

Serta dengan berbagai fitur yang siap digunakan untuk mengembangkan aplikasi, yaitu

• Sistem untuk mengaktifkan dan menonaktifkan module dengan user interface
• Sistem login dengan remember me, register, lupa password.
• Membuat menu dinamis
• Mengatur hak akses
• Manajemen user
• Berbagai contoh script seperti: data tables, file picker, download excel, export excel, dll

Sobat dapat mengunjungi halaman https://jagowebdev.com/demo/admin-template-ci4/ untuk mencoba demonya.

Untuk mendapatkannya, sobat dapat join sebagai member premium disini. Dengan join sebagai member premium, Sobat tidak hanya mendapatkan versi HMVC dari aplikasi Admin Template tersebut, melainkan juga versi MVC (default) nya, selain itu sobat juga mendapatkan aplikasi dan ebook terbaik lainnya yang khusus disediakan untuk member Premium Jagowebdev.

Demikian pembahasan mengenai implementasi HMVC pada Codeignieter 4

Semoga bermanfaat,

Salam