Pengenalan konsep MVC pada PHP
Halo halo 👋, gimana nih libur lebarannya sudah puas belum? kalau sudah kita lanjut pelatihan lagi yuk!. Pada pelatihan ke-tujuh ini kita akan mengupas tuntas apa itu MVC dan bagaimana cara kerjanya. MVC merupkan fundamental sebelum kita mempelajari Laravel. “Kenapa kita harus belajar MVC kak? kenapa gak langsung belajar Laravel”, Seperti yang sudah dibilang di awal tadi, MVC merupakan fundamental dari Laravel, karena Laravel dibalik layar menggunakan konsep MVC ini. Jadi dengan kita memahami cara kerja dari MVC maka dapat dipastikan kita dapat lebih mudah mempelajari Laravel kedepannya. Maka dari itu pastikan kalian memahami modul kali ini sebelum kita memasuki Laravel pada pertemuan berikutnya.
Table Of Contents
· Composer
∘ Instalasi composer
∘ Membuat project composer
· Apa itu MVC
· Framework MVC
∘ Struktur direktori
∘ Composer autoload
∘ Model
∘ View
∘ Controller
∘ Router
· Implementasi MVC dengan Todolist App
∘ Membuat model
∘ Membuat view
∘ Membuat controller
∘ Menambahkan route
Composer
Composer merupakan dependency management tool milik PHP. Dengan menggunakan composer maka akan memudahkan kita untuk me-manage dependensi seperti misalnya menambah, menghapus mengubah versi dan sebagainya. Selain itu composer juga mempunyai fitur autoload yang akan kita pakai pada projek kali ini. Fitur autoload memungkinkan untuk me-load file secara otomatis jadi tidak perlu require satu persatu. Jika kamu menggunakan Laragon kamu bisa skip step ini, karena Laragon sudah terinstall composer secara default. Kamu bisa membuktikannya dengan cara membuka terminal milik laragon lalu ketikkan composer
Instalasi composer
Jika kamu menggunakan XAMPP maka kamu harus menginstall composer secara manual, tapi tenang saja untuk instalasi composer ini sangat mudah kamu bisa langsung download file installer melalui link berikut ini Composer-Installer. Setelah itu buka installer maka akan ada tampilan seperti berikut ini lalu klik next
Setelah itu kamu akan diminta menentukan lokasi dari php.exe , file ini berada di lokasi instalasi XAMPP maka dari itu sesuaikan dengan lokasi instalasi kalian masing masing
Setelah itu kamu bisa klik next-next saja sampai instalasi selesai. Setelah selesai, buka command prompt lalu ketikkan composer jika muncul informasi detail tentang composer makan instalasi telah berhasil
Membuat project composer
Untuk membuat project composer sangat mudah sekali caranya dengan satu command saja yaitu composer init . Tapi sebelum itu pastikan kalian telah membuat folder, jika menggunakan XAMPP maka buat folder didalam htdocs jika menggunakan Laragon buat didalam folder www . Setelah itu buka command prompt jika menggunakan XAMPP atau buka terminal bawaan Laragon, pastikan path-nya sudah berada didalam folder yang barusan dibuat. Jika belum kalian bisa menggunakan command cd untuk mengarahkan ke folder yang barusan dibuat
Setelah menjalankan command composer init kamu akan diminta untuk mengisi data terkait project composer kamu, sesuaikan saja ya!
Setelah itu maka akan ada file baru bernama composer.json . Selamat kamu telah membuat project composer sebenarnya penggunaan composer masih banyak lagi namun karena materi ini berfokus membahas MVC dan kita hanya menggunakan fitur autoload pada composer maka pembahasan tentang composer cukup sampai sini kalian bisa ngulik diluar materi ini
Apa itu MVC
MVC merupakan sebuah software design pattern yang sering digunakan untuk mengembangakan aplikasi berbasis user interface seperti misalnya pengembangan web. MVC merupakan singkatan dari Model-View-Controller, sesuai dengan namanya MVC dibagi menjadi tiga komponen utama yaitu, yang pertama Model, model berfungsi untuk mengelola data aplikasi. Model biasanya berinteraksi dengan database atau sumber data lainnya untuk mengambil, menyimpan, dan memanipulasi data. Model juga bisa di representasikan sebagai entitas suatu data di database seperti misalnya table dan data di dalamnya. Komponen yang kedua yaitu View, view merupakan bagian yang merepresentasikan tampilan seperti misalnya tampilan pada halaman web. Komponen yang ketiga adalah Controller, controller merupakan bagian terpenting dari MVC. Controller bertugas untuk mengurus alur kerja dari menerima request yang dibuat oleh user lalu mengolah data model hingga menampilkan hasil menggunakan view
Framework MVC
Untuk memahami lebih lanjut tentang MVC kita akan menggunakan langsung framework MVC sederhana dan melihat bagaimana cara MVC bekerja di balik layar. Kamu bisa download framework melalui github repository ini, setelah itu ekstrak dan pindahkan ke folder htdocs jika menggunakan XAMPP atau www jika menggunakan Laragon. Jika sudah lalu akses melalui localhost/<nama-folder> kalau masih belum menampilkan halaman welcome, tambahkan /public pada akhir url sehingga hasilnya seperti ini localhost/<nama-folder>/public
Gambar diatas merupakakan flow atau alur kerja dari framework MVC. Dimulai dari user yang melakukan request melalui web browser, lalu request tersebut akan di handle oleh komponen yang bernama Route. Route akan memilih controller dan method mana yang akan dipilih untuk meng-handle request sesuai dengan url. Misal url-nya / maka controllernya HomeController dan methodnya index atau jika url-nya /about maka controllernya adalah HomeController dan methodnya about , hal inilah yang dinamakan routing. Setelah controller terpilih maka controller tersebut akan mengolah request dari user seperti misalnya mengubah, menambah, menghapus data di database melalui Model atau bisa menampilkan halaman menggunakan View
Struktur direktori
Ada empat folder utama dalam framework ini, yang pertama public, public merupakan folder yang bisa dikases oleh siapa saja lalu didalam folder ini terdapat file index.php yang akan menjadi entrypoint atau pintu masuk ke aplikasi, untuk entrypoint ini kita akan bahas lebih lanjut di bab selanjutnya. Folder yang kedua adalah src, didalam folder inilah semua aplikasi kita disimpan seperti misalnya konfigurasi database, controller, model dan sebagainya. Selanjutnya adalah vendor, folder ini tidak dibuat secara manual melainkan secara otomatis jika menggunkan composer autoload, folder ini juga akan menyimpan dependensi yang digunakan pada framework ini. Yang terakhir yaitu views, folder ini menyimpan tampilan dari web kita, seperti misalnya halaman welcome , about us , login dan sebagainya.
Composer autoload
"autoload": {
"psr-4": {
"AMCC\\MVC\\": "src"
}
}Untuk menggunakan autoload kita harus melakukan konfigurasi di file composer.json . Pada kode diatas kita melakukan konfigurasi agar semua file yang ada di folder src dapat di autoload. File dapat di autoload dengan syarat namespace harus diawali dengan AMCC\MVC dan nama folder harus sesuai dengan nama namespace, misal file yang berada di folder controller maka namespace-nya harus AMCC\MVC\Controller
Pada file index.php kita memanggil file autoload yang berguna untuk me-load file otomatis jadi tidak perlu memanggil file satu persatu cukup panggil dengan namespacenya saja seperti diatas use AMCC\MVC\Route\Router . File index.php merupakan entrypoint dari aplikasi kita, jadi sebenarnya semua request yang masuk hasilnya akan di tampilkan di index.php , tampilannya berbeda beda karena sudah di konfigurasi menggunakan router. Pembahasan tentang router akan dibahas di bab selanjutnya
Model
class Mahasiswa
{
public $nama;
public $nim;
public function __construct($nama, $nim)
{
$this->nama = $nama;
$this->nim = $nim;
}
}Seperti yang sudah dijelaskan diatas, Model adalah representasi data atau sebuah entitas. Pada file src/model/Mahasiswa.php adalah model yang merepresentasikan entitas mahasiswa. Model tersebut masih statis belum terhubung dengan database tapi pada bab selanjutnya kita akan implementasi model yang terhubung dengan database
View
Pada framework ini terdapat dua folder view yaitu src/view dan views . Folder src/view berisi kumpulan class yang berfungsi untuk me-load file tampilan yang berada di folder views . Pada file Page.php terdapat class Page yang mempunyai static function render . Static function inilah yang akan kita pakai untuk me-load file tampilan di controller
Controller
class HomeController
{
public function index()
{
Page::render('welcome_page', [
'nama' => 'Member Backend',
]);
}
public function about()
{
Page::render('about_page');
}
public function listMahasiswa()
{
$data = [
new Mahasiswa('Ahmad Basikal', '22.99.9999'),
new Mahasiswa('Tulung Agung', '22.77.7777'),
];
Page::render('list_mahasiswa', [
'mahasiswa' => $data,
]);
}
}Bisa dibilang controller merupakan inti dari MVC, karena pada controller inilah semua logika kita berada seperti misalnya manipulasi data dengan model dan memilih tampilan mana yang ingin ditampilkan dengan View. Pada framework ini sudah ada satu controller yang tersedia yaitu HomeController , didalam controller ini terdapat tiga method yaitu index , about , listMahasiswa . Method inilah yang akan di render di entrypoint yaitu index.php . Method juga merupakan representasi dari halaman itu sendiri semisal untuk halaman About dengan url /about maka akan menjalankan method about .
Router
Sesuai dengan namanya, fungsi dari router adalah membuat rute. Rute yang dimaksud disini adalah rute untuk mengarahkan request ke method controller berdasarkan url. Misalkan user mengkases /about maka Router akan akan mencari controller serta method yang terdaftar untuk url /about , jika ada jalankan method controller tersebut.
public static function add(string $requestMethod, string $path, string $controller, string $method)
{
// kita simpan route kedalam variabel $routes
// karena variabel $routes adalah static maka kita membutuhkan keyword self untuk mengaksesnya
self::$routes[] = [
'requestMethod' => $requestMethod,
'path' => $path,
'controller' => $controller,
'method' => $method,
];
}Pada src/route/Router.php terdapat class Router , class ini memiliki dua static method yaitu add dan run . Method add berfungsi untuk menambahkan rute, rute yang ditambahkan akan disimpan di variabel routes yang dimana kita akan gunakan di method run nantinya. Method add ini membutuhkan empat parameter yaitu request method seperti GET , POST , lalu path atau url seperti misalnya /about lalu ada controller disini kita menentukan controller mana. Controller harus ditulis dengan namespacenya misal AMCC\MVC\Controller\HomeController . Dan yang terakhir adalah method dari controller tersebut misal about . Jadi hasil akhirnya nanti akan disimpan dalam bentuk array asosiatif ['requestMethod' => 'GET', 'path' => '/about', 'controller' => 'AMCC\MVC\Controller\HomeController', 'method' => 'about'] .
public static function run()
{
$path = '/'; // default path
$requestMethod = $_SERVER['REQUEST_METHOD'];
if (isset($_SERVER['PATH_INFO'])) {
// cek apakah variabel global $_SERVER['PATH_INFO'] mempunyai nilai
// variabel global $_SERVER['PATH_INFO'] menyimpan info path yang sedang kita akses
// misalnya /category, /product dan lain lain
$path = $_SERVER['PATH_INFO']; // jika ada maka timpa default path dengan yang baru
}
// lakukan perulangan untuk mencari route yang sesuai dengan path dan request method
foreach (self::$routes as $route) {
if ($route['path'] === $path && $route['requestMethod'] === $requestMethod) {
// buat instance controller yang tersimpan di $routes
$controller = new $route['controller'];
// ambil method yang tersimpan di $routes
// kita gunakan untuk memanggil method dari suatu controller
$method = $route['method'];
// panggil method milik controller
$controller->$method();
return; // return untuk menghentikan perulangan
}
}
}Method run inilah dimana rute akan di ekseskusi jika memenuhi kondisi. Kondisi yang dimksud adalah path dan request method-nya harus sama dengan yang ada di global variabel $_SERVER . Jika semua kondisi terpenuhi maka buat instance controller yang sebelumnya kita tambahakan di rute setelah itu panggil method milik controller tersebut
Pada entrypoint atau index.php kita menambahkan rute menggunakan method add, seperti pada gambar diatas. Lalu jangan lupa untuk memanggil method run untuk menjalankan router
Implementasi MVC dengan Todolist App
Agar memahami lebih lanjut tentang bagaimana MVC bekerja kita akan coba implementasi Todolist App yang sudah kita buat pada pertemuan sebelumnya menggunakan framework MVC. Pastikan kalian telah membuat database todolistnya, jika belum maka harus buat baru melalui phpmyadmin setelah itu copy script yang ada di url ini dan paste pada bagian SQL di ditabase yang barusan dibuat.
Membuat model
Seperti yang dikatakan di awal tadi, kita akan membuat model yang terhubung dengan database jadi langkah pertama kita adalah konfigurasi database. Konfigurasi terletak di src/config/Database.php , sesuaikan username , password dan nama database kalian masing masing. Setelah itu buat model Todo dengan cara buat file baru di folder src/model lalu beri nama Todo.php setelah itu paste kode dibawah ini kedalam file yang barusan dibuat
<?php
namespace AMCC\MVC\Model;
use AMCC\MVC\Config\Database;
class Todo
{
public $id;
public $user_id;
public $todo;
public $status;
public function __construct($id, $todo, $status = false, $user_id = null)
{
$this->id = $id;
$this->user_id = $user_id;
$this->todo = $todo;
$this->status = $status;
}
public static function getAllTodos()
{
$results = Database::getConnection()->query('SELECT * FROM lists')
->fetch_all(MYSQLI_ASSOC);
$todos = [];
foreach ($results as $result) {
$todo = new Todo($result['id'], $result['todo'], $result['status'], $result['user_id']);
array_push($todos, $todo);
}
return $todos;
}
}Pada model Todo terdapat static method getAllTodos . Method ini berfungsi untuk mengambil todo dari database. Pertama tama kita buat koneksi dulu menggunakan static method getConnection milik class Database lalu query semua todo dan simpan ke variabel $results . Variable $results kita foreach lalu hasilnya kita jadikan instance object todo baru hal inilah yang dinamakan dengan mapping . Setelah itu instance object todo yang baru dibuat kita masukkan ke array $todos menggunakan fungsi bawaan PHP yaitu array_push . Setelah perulangan selesai kita return array $todos . Kita akan gunakan method getAllTodos ini di controller nantinya
Membuat view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Todolist</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-4/5 sm:w-3/5 mx-auto mt-10">
<h3 class="text-3xl md:text-4xl text-center font-bold mb-5">
Todolist App
</h3>
<form action="./create.php" method="POST" class="flex space-x-4 mb-4">
<input
type="text"
id="todo"
name="todo"
aria-describedby="helper-text-explanation"
class="bg-gray-50 basis-3/4 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="Todo"
/>
<button
type="submit"
class="text-white basis-1/4 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
>
Tambah Todo
</button>
</form>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left rtl:text-right text-gray-500">
<thead class="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3">Todo</th>
<th scope="col" class="px-6 py-3">Status</th>
<th scope="col" class="px-6 py-3">Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($todos as $todo): ?>
<tr class="odd:bg-white even:bg-gray-50 border-b">
<th
id="list-<?=$todo->id?>"
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap <?php echo $todo->status > 0 ? 'line-through' : ''; ?>"
>
<?php echo $todo->todo ?>
</th>
<td class="px-6 py-4">
<input
<?php echo $todo->status > 0 ? 'checked' : ''; ?>
type="checkbox"
onchange="checkTodo(this)"
value="1"
data-list="<?=$todo->id?>"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
/>
</td>
<td class="px-6 py-4">
<a href="./delete.php?todo_id=<?=$todo->id?>" class="font-medium text-blue-600">Hapus</a>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Buat file baru bernama list_todos.php didalam folder views . File ini yang akan menampilkan list todo kita nantinya. Karena file ini akan menampilkan list todo maka file ini membutuhkan todo yang ada di database, lalu bagaimana caranya kita mengirimkan todo ke file tersebut?. Kita akan mengirimkan todo ke file tersebut melalui controller
Membuat controller
<?php
namespace AMCC\MVC\Controller;
use AMCC\MVC\Model\Todo;
use AMCC\MVC\View\Page;
class TodoController
{
public function index()
{
$data = Todo::getAllTodos();
Page::render('list_todos', [
'todos' => $data,
]);
}
}Buat controller baru dengan cara membuat file dengan nama TodoController.php didalam folder src/controller lalu copy paste kode diatas ke dalam file yang barusan dibuat. Controller tersebut memiliki satu method yaitu index , method inilah yang nantinya akan menampilkan list todo kita. Pertama tama kita mengambil semua todo dari database menggunakan static method getAllTodos milik model Todo lalu hasilnya disimpan di variabel $data . Lalu kita panggil juga tampilan list_todo yang sebelumnya kita buat menggunakan static method render , tak lupa kita juga mengirimkan todo yang sebelumnya sudah kita query dari database.
Menambahkan route
Walaupun kita sudah membuat model, view dan controller tetapi kita tidak mendaftarkannya dengan router maka semua itu tidak akan pernah bisa diakses atau tidak bisa tampil di browser. Maka dari itu kita harus mendaftarkannya dengan router di entrypoint yaitu index.php
Router::add('GET', '/todos', TodoController::class, 'index');Dengan menggunakan static method add kita dapat dengan mudah menambahkan rute baru, seperti pada contoh diatas kita menambahkan rute baru dengan url /todos . Jadi begitu kalian mengakses /todos pada browser kalian maka method index milik TodoController lah yang akan memproses permintaan kalian. Sekarang coba buka localhost/<nama-folder-kalian>/public/index.php/todos lihat apa yang ditampilkan
Referensi
- Penjelasan dan contoh penggunaan static function
- Perbedaan keyword $this, parent, static dan self
- Penjelasan dan contoh penggunaan class name resolution
- Penjelasan variabel $_SERVER sudah dibahas pada pertemuan sebelumnya atau bisa mengakses artikel ini
- Cara integrasi PHP dengan MySQL
