Memperkenalkan NG Framework, Framework MVC untuk PHP

Bagikan jika Anda sukai postingan ini!

Diagram MVC
Diagram MVC (Model View Controller)

Nama NG Framework mungkin kurang lazim didengar di antara para developer PHP. Karena framework ini tidaklah populer. Tetapi, karena ketidakpopulerannya yang membuat saya tertarik untuk mempelajari framework ini. Jika Anda mencoba mencari tahu tentang NG Framework melalui mesin pencari, sepertinya akan sulit menemukan literasi tentang framework ini karena memang sudah tidak dikembangkan. Namun jika Anda tertarik dengan versi asli NG Framework, Anda dapat mengunduhnya pada tautan Github berikut ini: https://github.com/InochiSoft/NGFW.

Apa sih kelebihan NG Framework? Kecepatan? Keamanan? Kemudahan? Entahlah. Yang pasti saya menyukai framework ini karena strukturnya yang simpel menurut saya. Atas dasar tersebut, saya mencoba mengembangkan NG Framework. Kode sumber pengembangan ini bisa Anda unduh melalui tautan Github berikut ini: https://github.com/InochiSoft/ng-mod.

NG Framework sudah sepenuhnya menggunakan metode MVC (Model View Controller). Sepertinya saya tidak perlu menjelaskan apa itu MVC ya? Silakan Anda membaca artikel Wikipedia berikut ini: https://id.wikipedia.org/wiki/MVC jika belum mengenal MVC.

Artikel kali ini akan membahas contoh penggunaan NG Framework yang sudah dimodifikasi untuk membuat sebuah halaman web. Jika Anda tertarik mengikuti pembahasan ini, silakan mengunduh NG Framework modifikasi pada tautan Github berikut ini: https://github.com/InochiSoft/ng-mod. Selanjutnya siapkan sebuah folder pada server lokal Anda untuk mengekstrak kode sumber. Sebagai contoh, saya membuat sebuah folder dengan nama ng-test.

Lokasi pengekstrakan kode sumber NG Framework
Lokasi pengekstrakan kode sumber NG Framework

Kemudian yang perlu Anda lakukan adalah mengubah skrip pada berkas .htaccess menjadi seperti berikut ini.

RewriteEngine On
RewriteBase /ng-test
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [L]

Perubahan hanya sedikit saja, hanya pada baris ke-2 yaitu mengubah nama folder sesuai dengan nama folder tempat kode sumber disimpan. Saya mengubah dari sebelumnya adalah /ng-mod menjadi /ng-test.

Selanjutnya, buka folder \apps\Config, dan buka berkas config.ini.

Berkas config.ini pada alamat \apps\Config
Berkas config.ini pada alamat \apps\Config

Ubah nilai SUB_DIR sesuai dengan nama direktori tempat lokasi kode sumber, pada contoh kali ini saya mengubah dari sebelumnya ng-mod menjadi ng-test. Sehingga isi berkas config.ini menjadi seperti berikut ini.

[setting]
SUB_DIR = "ng-test";

SITE_NAME = "MyWebsite.Com";
SITE_TITLE = "My Website";
COMPACT_MODE = 0;

ROUTE_NAME_1 = "page";
ROUTE_NAME_2 = "post";
ROUTE_NAME_3 = "image";
ROUTE_NAME_4 = "download";
ROUTE_NAME_5 = "api";

ROUTE_PATH_1 = "halaman";
ROUTE_PATH_2 = "artikel";
ROUTE_PATH_3 = "gambar";
ROUTE_PATH_4 = "unduh";
ROUTE_PATH_5 = "api";

ROUTE_TITLE_1 = "Halaman";
ROUTE_TITLE_2 = "Artikel";
ROUTE_TITLE_3 = "Gambar";
ROUTE_TITLE_4 = "Unduh";
ROUTE_TITLE_5 = "API";

Sampai di sini Anda sudah dapat mencoba mengakses laman web NG Framework Anda.

Akses NG Framework
Mengakses laman web NG Framework pada peramban

Hanya tampilan sapaan sederhana memang. Namun cukup untuk menunjukkan bahwa NG Framework ini sudah dapat berjalan dengan normal.

Secara default NG Framework sudah menyediakan 5 (lima) buah route yang bisa Anda akses melalu peramban (browser). Kelima route ini dapat Anda temukan pada berkas config.ini yang baru saja Anda perbarui di atas, di antaranya: halaman, artikel, gambar, unduh, dan api.

Anda dapat menguji tiap route ini melalu peramban, sebagai berikut:

  • http://localhost/ng-test/halaman
  • http://localhost/ng-test/artikel
  • http://localhost/ng-test/unduh
  • http://localhost/ng-test/api

Untuk dapat menambahkan route baru, Anda harus melalui tahapan-tahapan berikut ini.

Pertama, tambahkan pengaturan konfigurasi pada berkas config.ini di alamat \apps\Config. Anda perlu menambahkan 3 (tiga) buah kunci baru yaitu: ROUTE_NAME_n, ROUTE_PATH_n, ROUTE_TITLE_n. Nilai n merepresentasikan indeks route yang dibuat saat ini. Karena indeks route terakhir adalah 5 (lima) maka nilai n adalah 6. Maka nama 3 (tiga) buah kunci baru yang perlu dibuat adalah ROUTE_NAME_6, ROUTE_PATH_6, ROUTE_TITLE_6.

Silakan menambahkan 3 (tiga) buah kunci baru sekaligus nilainya pada berkas configs.ini. Sebagai contoh, tambahkan 3 (tiga) buah kunci baru berikut ini.

 ROUTE_NAME_6 = "news";
 ROUTE_PATH_6 = "berita";
 ROUTE_TITLE_6 = "Berita";

Kedua, buka lokasi penyimpanan berkas Controller, yaitu di \apps\Controller. Tambahkan berkas Controller baru, di mana nama berkas disesuaikan dengan nilai yang Anda masukkan pada kunci ROUTE_NAME_n sebelumnya. Karena nilai yang diberikan adalah “news”, maka buatlah berkas baru berekstensi PHP dengan nama NewsController.php.

Controller Baru
Menambahkan Controller baru dengan nama NewsController.php

Lengkapi kode sumber NewsController.php seperti di bawah ini.

<?php
class NewsController extends NG\Controller {
    public function init() { 
        //TODO
    }
    
    public function IndexAction() {
        //TODO
    }
}
?>

Pastikan bahwa nama kelas (class) yang dideklarasikan sesuai/sama dengan nama berkas Controller yang ditambahkan. Serta pastikan pada class terdapat 2 (dua) buah fungsi utama yaitu init dan IndexAction.

Ketiga, buka lokasi penyimpanan View, yaitu di \apps\View. Buatlah sebuah folder baru sesuai dengan nilai dari kunci ROUTE_NAME_n di atas (dengan huruf awal berupa huruf kapital/huruf besar), yaitu News.

Folder baru News pada View
Folder baru News pada View

Buka folder News, buatlah sebuah berkas baru dengan nama Index.phtml.

Berkas baru Index.phtml
Berkas baru Index.phtml pada folder News

Keempat, buka folder pustaka NG Framework di \libs, kemudian buka berkas Route.php. Temukan deklarasi fungsi syncController pada kode sumber, tambahkan definisi kunci konfigurasi yang sudah Anda buat sebelumnya (pada config.ini). Sehingga hasil akhir fungsi syncController menjadi seperti di bawah ini.

    private static function syncController($controller){
        $arr_route_path = array(
            "index",
            "asset",
            defined("ROUTE_PATH_1") ? ROUTE_PATH_1 : "",
            defined("ROUTE_PATH_2") ? ROUTE_PATH_2 : "",
            defined("ROUTE_PATH_3") ? ROUTE_PATH_3 : "",
            defined("ROUTE_PATH_4") ? ROUTE_PATH_4 : "",
            defined("ROUTE_PATH_5") ? ROUTE_PATH_5 : "",
            //Menambahkan definisi baru
            defined("ROUTE_PATH_6") ? ROUTE_PATH_6 : ""
        );
        
        $arr_route_name = array(
            "index",
            "asset",
            defined("ROUTE_NAME_1") ? ROUTE_NAME_1 : "",
            defined("ROUTE_NAME_2") ? ROUTE_NAME_2 : "",
            defined("ROUTE_NAME_3") ? ROUTE_NAME_3 : "",
            defined("ROUTE_NAME_4") ? ROUTE_NAME_4 : "",
            defined("ROUTE_NAME_5") ? ROUTE_NAME_5 : "",
            //Menambahkan definisi baru
            defined("ROUTE_NAME_6") ? ROUTE_NAME_6 : ""
        );
        
        $new_control = $controller;
        
        for ($i = 0; $i < count($arr_route_path); $i++){
            $item_route_name = $arr_route_name[$i];
            $item_route_path = $arr_route_path[$i];
            if (strtolower($new_control) == strtolower($item_route_path)){
                $new_control = $item_route_name;
                break;
            }
        }
        return $new_control;
    }
Perubahan yang dilakukan pada berkas Route.php
Perubahan yang dilakukan pada berkas Route.php

Sampai di sini, tahapan penambahan route sudah selesai. Anda dapat mencoba perubahan pada peramban dengan mengakses laman:

http://localhost/ng-test/berita

Cukup mudah bukan? Apalagi jika Anda sudah terbiasa dengan framework PHP lain seperti CodeIgniter.