57

MODUL 5
Model View Controller

A. Kompetensi Dasar
3.5 Menerapkan aplikasi web dengan Model View Controller
4.5 Membuat aplikasi web menggunakan Model View Controller

B. Tujuan Pembelajaran
1. Setelah mencermati materi di buku dan mengakses berbagai literatur, siswa
mampu merumuskan konsep Model View Controller dengan baik.
2. Setelah mencermati materi di buku dan mengakses berbagai literatur, siswa
mampu menjelaskan prosedur pemrograman aplikasi web dengan MVC dengan
tepat.
3. Setelah berdiskusi dan meyimak penjelasan guru, siswa mampu menerapkan
aplikasi web dengan MVC dengan benar
4. Setelah menyimak beberapa contoh dan berlatih, siswa mampu merancang dan
membuat kode program aplikasi web menggunakan MVC dengan benar
5. Setelah berdiskusi dan menelaah berbagai informasi di buku dan literatur lainnya,
siswa mampu menguji program aplikasi web berbasis MVC dengan baik

C. Teori
1. Konsep MVC Pada Aplikasi Web
Guna memahami framework di PHP, minimal harus memahami konsep MVC
(Model, View, Controller). MVC memisahkan pengembangan aplikasi
berdasarkan kompinen utama yang membangun sebuah aplikasi seperti
manipulasi data, user interface dan bagian yang menjadi kontrol aplikasi. MVC
menjadi konsep yang populer, karena dinilai dapat mempercepat tugas Developer
untuk pembangunan aplikasi web ataupun mobile. Bahkan, karena kecepatannya
hingga dianggap efektif dalam membantu pembangunan aplikasi, MVC sudah
banyak diterapkan pada beberapa framework PHP, seperti Laravel, CodeIgniter,
Zend, dan Symfony.

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 58

Komponen yang membangun suatu MVC dalam suatu aplikasi adalah sebagai
berikut:
a. Model
Model mewakili struktur data. Model merupakan bagian yang bertugas untuk
mengatur, menyiapkan, memanipulasi, dan mengorganisir data (biasanya dari
basis data). Tugas yang ia lakukan meliputi memasukkan data ke basis data,
pembaruan data, menghapus data, dan lain-lain. Model menjalankan tugasnya
berdasarkan instruksi dari controller.
b. View
View merupakan bagian yang mengatur tampilan ke pengguna. Bisa dikatakan
berupa halaman web.
c. Controller
Controller merupakan bagian yang menjembatani model dan view. Controller
berisi perintah-perintah yang berfungsi untuk memproses suatu data dan
mengirimkannya ke halaman web.
Pada dasarnya fungsi utama MVC adalah mendukung proses pengembangan
aplikasi web atau mobile menjadi lebih cepat. Kenapa bisa lebih cepat? Karena
MVC memisahkan aplikasi menjadi tiga bagian, sehingga orang yang
mengerjakannya pun lebih banyak. Pada bagian model dan controller biasanya
akan ditangani oleh Back End Developer. Sementara itu, untuk bagian view akan
dikerjakan oleh Front End Developer bersama tim dari UI/UX.
Tak hanya itu saja, masih ada fungsi lain dari MVC yang tak kalah hebatnya,
seperti:
a. Penyelesaian bug atau error jadi lebih mudah ditangani. Adanya pemisahan
aplikasi pada konsep MVC membuat Developer lebih fokus menangani error
yang terjadi pada bagiannya masing-masing.
b. Pemeliharaan aplikasi bisa dilaksanakan lebih cepat. Adanya MVC membantu
tim Developer untuk memelihara atau mengembangkan suatu bagian dari
aplikasi. Contoh jika ingin menambahkan fitur, “tambahkan diskon” pada
aplikasi toko online. Tim Developer hanya perlu mengubah dan
menambahkan kode pada script.
c. Efektif waktu saat melakukan testing. Hal yang perlu dilakukan untuk
memastikan apakah aplikasi yang dibuat sudah bisa dipakai adalah dengan
melakukan testing. Umumnya, testing dilakukan setelah seluruh pembuatan

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 59

aplikasi telah selesai. Namun, pada konsep MVC kamu bisa menjalani testing
pada bagian mana pun yang telah siap, tanpa menunggu semuanya selesai.

2. Prosedur Pemrograman Aplikasi Web dengan MVC

Setelah mempelajari apa itu MVC, sekarang saatnya memahami bagaimana alur
kerja dari MVC. Mari lihat bagan berikut ini:

a. Bagian view akan merequest informasi untuk bisa ditampilkan kepada

pengguna.
b. Request tersebut kemudian diambil oleh controller dan diserahkan bagian
model untuk diproses;
c. Model akan mengolah dan mencari data informasi tersebut di dalam database;
d. Model memberikan kembali pada controller untuk ditampilkan hasilnya di
view;
e. Controller mengambil hasil olahan yang dilakukan di bagian model dan
menatanya di bagian view.

Alur kerja MVC dalam sistem website sebenarnya cukup sederhana seperti
ditunjukkan pada bagan di atas. Namun, kalau penjelasannya masih terlalu teknis,
begini analoginya:

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 60

Sekarang, anggaplah Anda sedang berada di sebuah restoran. Dalam konsep MVC
ini, Anda adalah view, pelayan adalah controller, dan chef adalah model. Ketika
Anda memesan salah satu menu, pelayan akan mencatat pesanan Anda dan
memberikannya pada chef. Setelah itu, chef akan mencari bahan yang diperlukan
di kulkas (database) dan mulai memasaknya untuk Anda. Setelah selesai dimasak,
chef akan memberikan pada pelayan untuk diantarkan pada Anda. Nah, seperti
itulah cara kerja MVC pada setiap bagiannya.

3. Penerapan MVC pada Aplikasi Web

a. Perancangan
Sebelum membuat kode program, kita buat harus membuat folder dan file
dalam document root, sehingga menjadi struktur seperti di bawah ini:

1) Buatlah file index.php dalam folder utama (dalam modul ini nama
foldernya adalah mvc)
2) Buatlah file .htaccess dalam folder utama
Cara membuatnya adalah sebagai berikut:
o Buka notepad
o Kemudian klik menu file – Save As
o Pilih lokasi penyimpanan kemudian ketikkan nama file .htaccess
o Kemudian pada Save As Type pilih All File

o Kemudian klik tombol save

3) Buatlah file init.php dalam folder app
4) Buatlah file config.php dan routes.php dalam folder config

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 61

5) Buatlah file App.php, Controller.php dan Database.php dalam folder

core
6) Dalam folder controller buatlah 2 file baru, yaitu HomeController.php
dan Siswa.php
7) Dalam folder models buatlah 1 file baru yaitu SiswaModel.php
8) Dalam folder views buatlah 5 buatlah file yaitu, AwalView.php,
Siswa.php, SiswaEdit.php, SiswaTambah.php, dan TampilData.php
9) Buatlah file .htaccess dan gaya.css pada folder public
Tampilan keseluruhan folder dan file yang akan dibuat ditunjukan pada
gambar di bawah ini:

b. Pembuatan Kode
1) File .htaccess
.htaccess atau yang sering disebut dengan hypertext access adalah file
konfigurasi server web Apache yang umumnya tersedia di File Manager
akun hosting Anda. File .htaccess umumnya digunakan untuk
memodifikasi dan menambahkan fungsi dan pengaturan tambahan ke
server Anda — bahkan jika Anda tidak memiliki akses ke server inti.

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 62

.htaccess dapat dimanfaatkan untuk memblokir alamat IP tertentu hingga

pelindungi kata sandi.
file .htaccess yang akan dibuat ini digunakan untuk konfigurasi webserver,
dan nantinya akan berdampak pada url yang akan kita gunakan, agar URL
tidak terlalu panjang, hal ini juga akan berdampak sangat signifikan
kepada aplikasi website kita. URL yang tadinya
localhost/frameku/index.php?param1=val2&param1=val2 akan
menjadi localhost/frameku/controller/function/value/value/value/…
Fungsi dari .htaccess yang kita buat yaitu untuk menyembunyikan get
url=”.
<IfModule mod_rewrite.c>
Options All -Indexes
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?url=$1 [L]
</IfModule>
2) index.php
<?php
require_once 'app/init.php';
$app = new App;
3) app/init.php
<?php
require_once 'core/App.php';
require_once 'core/Controller.php';
require_once 'core/Database.php';
require_once 'config/config.php';
4) app/config/config.php
<?php
//base url
define('BASEURL', 'http://localhost/rpl1/mvc');
//db
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_NAME','sesi_1111');
5) app/config/routes.php
<?php
//set Default Controller
$route['default_controller'] = 'HomeController';
6) app/core/App.php
<?php
class App {
protected $controller;
protected $method ='index';
protected $params = [];
public function __construct(){
// controller
require_once 'app/config/routes.php';

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 63

$this->controller = $route['default_controller'];
$url = $this->parseURL();
if(is_null($url)){
$url[0] = 'public';
}

if(file_exists('app/controller/'.$url[0].'.php')){
$this->controller = $url[0];
unset($url[0]);
}

require_once 'app/controller/'. $this->controller.

'.php';
$this->controller = new $this->controller;

// method
if(isset($url[1])){
if(method_exists($this->controller, $url[1])){
$this->method = $url[1];
unset($url[1]);
}
}

if(!empty($url)){
$this->params = array_values($url);
}
call_user_func_array([$this->controller, $this-
>method], $this->params);
}

public function parseURL(){

if(isset($_GET['url'])){
$url = rtrim($_GET['url'],'/');
$url = filter_var($url, FILTER_SANITIZE_URL);
$url = explode('/', $url);
return $url;
}
}
}
7) app/core/Controller.php
<?php
class Controller {
public function view($view, $data=[]){
require_once 'app/views/'.$view.'.php';
}

public function model($model){

require_once 'app/models/'.$model.'.php';
return new $model;
}
}
8) app/core/Database.php
<?php
class Database{
private $host = DB_HOST;
private $user = DB_USER;
private $pass = DB_PASS;
private $db_name = DB_NAME;

private $dbh;
private $stmt;

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 64

public function __construct(){

$dsn ='mysql:host='.$this->host.';
dbname='.$this->db_name;

$option =[
PDO::ATTR_PERSISTENT => true,
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
];

try{
$this->dbh = new PDO($dsn, $this->user,$this-
>pass, $option);
}catch(PDOException $e){
die($e->getMessage());
}
}

public function query($query){

$this->stmt = $this->dbh->prepare($query);
}

public function bind($param, $value, $type=null){

if(is_null($type)){
switch(true){
case is_int($value):
$type = PDO::PARAM_INT;
break;
case is_bool($value):
$type = PDO::PARAM_BOOL;
break;
case is_null($value):
$type = PDO::PARAM_NULL;
break;
default :
$type = PDO::PARAM_STR;
}
}
$this->stmt->bindValue($param, $value, $type);
}

public function execute(){

$this->stmt->execute();
}

//memanggil data dalam jumlah banyak

public function resultSet(){
$this->execute();
return $this->stmt->fetchAll(PDO::FETCH_ASSOC);
}

//memanggil data satu aja

public function single(){
$this->execute();
return $this->stmt->fetch(PDO::FETCH_ASSOC);
}

public function rowCount(){

return $this->stmt->rowCount();
}
}

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 65

9) app/controller/HomeController.php
<?php
class HomeController extends Controller {
public function index(){
$this->view('AwalView');
}
}
10) app/controller/Siswa.php
<?php
class Siswa extends Controller {
public function index(){
$this->view('Siswa');

//menampilkan semua data

$data =$this->model('SiswaModel')->fungsi_satu();
$this->view('tampilData',$data);
}

public function tambah(){

$this->view('SiswaTambah');
}

public function edit($dt){

//mencari data tertentu
$data =$this->model('SiswaModel')->fungsi_dua($dt);
$this->view('SiswaEdit',$data);
}

public function store(){

$data=[$_POST['nis'],$_POST['nama'],$_POST['jk'],$_P
OST['stt']];
$this->model('SiswaModel')->simpan($data);
return $this->index();
}

public function update(){

$data=[$_POST['nis'],$_POST['nama'],$_POST['jk'],$_P
OST['stt']];
$this->model('SiswaModel')->update($data);
return $this->index();
}

public function delete($dt){

$this->model('SiswaModel')->hapus($dt);
return $this->index();
}
}
11) app/models/SiswaModel.php
<?php
class SiswaModel{
private $db;

public function __construct(){

$this->db = new Database;
}
public function fungsi_satu(){
$this->db->query('SELECT * FROM siswa');
return $this->db->resultSet();
}

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 66

public function fungsi_dua($id){

$this->db->query('SELECT * FROM siswa where nis like
:cari or nama like :cari');
$this->db->bind('cari','%'.$id.'%');
return $this->db->single();
}

public function simpan($data){

$this->db->query('insert into siswa set
nis=:nis,nama=:nama,jenis_kelamin=:jk,status=:stt');
$this->db->bind('nis',$data[0]);
$this->db->bind('nama',htmlentities($data[1]));
$this->db->bind('jk',$data[2]);
$this->db->bind('stt',$data[3]);
$this->db->execute();
}

public function update($data){

$this->db->query('update siswa set
nama=:nama,jenis_kelamin=:jk,status=:stt where nis=:nis');
$this->db->bind('nis',$data[0]);
$this->db->bind('nama',htmlentities($data[1]));
$this->db->bind('jk',$data[2]);
$this->db->bind('stt',$data[3]);
$this->db->execute();
}

public function hapus($id){

$this->db->query('delete FROM siswa where
nis=:cari');
$this->db->bind('cari',$id);
$this->db->execute();
}
}
12) app/views/AwalView.php
<html>
<head>
<link rel="stylesheet" type="text/css"
href='<?=BASEURL?>/public/gaya.css'>
</head>
<body>
Halaman Awal MVC Sederhana<br>
<a href="siswa/"><button class="bt bt-edit">lihat data
siswa</button></a>
</body>
</html>
13) app/views/Siswa.php
<html>
<head>
<link rel="stylesheet" type="text/css"
href='<?=BASEURL?>/public/gaya.css'>
</head>
<body>
Selamat Datang<br>Ini tampilan view 1<br>
<a href="<?=BASEURL?>/Siswa/tambah"><button class="bt bt-
edit">+ Tambah Data</button></a>
</body>
14) app/views/SiswaEdit.php
<form action="<?=BASEURL?>/Siswa/update" method="post">
<fieldset>

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 67

<legend>Edit Data</legend>
Nomor Induk Siswa<br>
<input type="text" name="nis" value="<?=$data['nis']?>"
readonly><br>
Nama siswa<br>
<input type="text" name="nama"
value="<?=$data['nama']?>" required><br>
Jenis Kelamin<br>
<select name="jk" required>
<option value="">-- Pilih Jenis Kelamin --</option>
<option value="Laki-Laki"
<?=($data['jenis_kelamin']=="Laki-
Laki")?"selected":""?>>Laki-Laki</option>
<option value="Perempuan"
<?=($data['jenis_kelamin']=="Perempuan")?"selected":""?>>P
erempuan</option>
</select>
<br>
Status<br>
<select name="stt" required>
<option value="">-- Pilih Status --</option>
<option value="1"
<?=($data['status']=="1")?"selected":""?>>Aktif</option>
<option value="0"
<?=($data['status']=="0")?"selected":""?>>Tidak
Aktif</option>
</select>
<br><br>
<input type="submit" name="update" value="Perbaharui">
</fieldset>
</form>
15) app/views/SiswaTambah.php
<form action="store" method="post">
<fieldset>
<legend>Input Data</legend>
Nomor Induk Siswa<br>
<input type="text" name="nis" placeholder="Nomor Induk
Siswa" required><br>
Nama siswa<br>
<input type="text" name="nama" placeholder="Nama Siswa"
required><br>
Jenis Kelamin<br>
<select name="jk" required>
<option value="">-- Pilih Jenis Kelamin --</option>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
<br>
Status<br>
<select name="stt" required>
<option value="">-- Pilih Status --</option>
<option value="1">Aktif</option>
<option value="0">Tidak Aktif</option>
</select>
<br><br>
<input type="submit" name="insert" value="Simpan">
</fieldset>
</form>
16) app/views/TampilData.php
<hr>ini hasil dari view 2<br>
<table>

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 68

<tr>
<td>NIS</td>
<td>Nama</td>
<td>Jenis Kelamin</td>
<td>Status</td>
</tr>
<?php
foreach($data as $dt){
echo"<tr>";
foreach ($dt as $v2) {
echo "<td>$v2</td>";
}
echo "<td><a href='".BASEURL."/Siswa/edit/$dt[nis]'>Edit
Data</a></td>";
echo "<td><a
href='".BASEURL."/Siswa/delete/$dt[nis]'>Hapus</a></td></t
r>";
}
?>
</table>
17) public/.htaccess
<IfModule mod_rewrite.c>
Options All -Multiviews
</IfModule>
18) public/gaya.css
body{
margin:0px;
font-family:calibri;
}
table{
width:100%;
border-collapse:collapse;
}
table tr td, table tr th{
padding:5px;
}
table tr th{
background:#eee;
}
legend{
background:#666;
color: #fff;
padding: 2px 10px;
}
.bt{
color:#fff;
padding:5px 10px;
border:none;
}
.bt-edit{
background:#fa0;
}
.bt-del{
background:#707;
}
.bt-login{
background:#707;
font-size:18px;
}

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 69

c. Pengujian aplikasi
Untuk menguji aplikasi web mvc yang telah dibuat, silakan lakukan pengujian
fungsi dari setiap tombol dan inputan yang ada. Apabila ada yang kurang
sesuai, mintalah bantuan kepada guru anda untuk mengatasi masalah yang
dihadapi.

D. Aktivitas
1. Pendahuluan
a. Pelajari kembali materi tentang pemrograman berorientasi objek!
2. Percobaan
a. Buatlah tampilan agar lebih menarik!
3. Pengetahuan
a. Apa itu hypertext access? Berikan penjelasan yang mudah dipahami!
b. Apa itu class dan objek? berikan juga contoh dalam kode program PHP!
c. Gambarkan alur komunikasi HTTP request dan reply yang umum digunakan
saat membuat website dengan menggunakan MVC!
d. Apa yang dimaksud dengan konstruktor dan apa fungsinya! Berikan contoh
penulisan kode program PHP!
e. Tuliskan contoh kode program PHP untuk mengakses method dalam suatu
class!
4. Proyek
Buatlah pengelolaan data buku dengan menggunakan konsep MVC!

E. Penilaian Proyek
Nama Peserta Didik :
Kelas :

No Komponen/Sub Komponen Skor

1 Persiapan (Skor maksimal 20)
1. Memahami class dan objek (10)
2. Memahami konsep mvc (10)
Jumlah skor komponen persiapan
2 Proses/Pelaksanaan (Skor maksimal 70)
1. Membuat controller (20)
2. Membuat model (20)
3. Membuat view dengan baik (20)
4. Aplikasi bebas error (10)
Jumlah skor komponen proses/pelaksanaan

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ

 70

3 Sikap Kerja (Skor maksimal 10)

1. Waktu penyelesaian proyek (5)
2. Sikap dalam menyelesaikan proyek (5)
Jumlah skor komponen sikap kerja
TOTAL NILAI (1+2+3)

Wonosobo, 20__
Peserta didik Guru Mapel

------------------------------ ------------------------------

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMKTAQ