Modul

Model View Controller (MVC)

A. Tujuan Pembelajaran
Melalui kegiatan pembelajaran dengan pendekatan saintifik dengan model
pedagoge genre, saintifik, dan PjBL, peserta didik dapat menganalisis,
menerapkan, merancang, membuat, dan menguji program aplikasi web berbasis
MVC dengan rasa ingin tahu, tanggung jawab, disiplin, dan kreatif
(integritas) selama proses pembelajaran dan bersikap jujur, percaya diri,
serta pantang menyerah.
B. Materi Pembelajaran
1. Definisi Model View Controller (MVC)
Model View Controller atau disingkat MVC adalah sebuah metode untuk membuat
sebuah aplikasi dengan memisahkan antara data (model) dari tampilan (view) dan
cara bagaimana memprosesnya (controller). Dalam implementasinya, kebanyakan
framework dalam aplikasi website berbasis arsitektur MVC. Dalam rekayasa
perangkat lunak, Model View Controller (MVC) adalah pola desain atau arsitektur
aplikasi yang dengan jelas memisahkan antara data (model) dengan user interface
atau tampilan (view). MVC memisahkan pengembangan aplikasi berdasarkan
komponen utama yang membangun sebuah aplikasi, seperti manipulasi data, user
interface, dan bagian yang menjadi pengontrol aplikasi.
Penggunaan MVC terbukti sangat efektif dalam semua aplikasi, tidak hanya
terbatas pada aplikasi berbasis web. MVC pertama kali dirancang oleh Trygve
Reenskaug dan dipublikasikan pertama kali oleh XEROX PARAC dan Smalltalk,
sekitar 1970-1980. Implementasi dari gagasan MVC dituangkan dalam tulisan
berjudul “Application Programming in Smalltalk-80: How to Use Model-View-
Controller”. Inti penemuan arsitektur MVC adalah pemisahan tampilan pengguna dari
kendali asupan pengguna, dan model informasi yang mendasarinya.
OOP (Object Oriented Programming) atau Pemrograman Berbasis Objek telah
berkembang pesat selaras dengan perkembangan PHP di versi 5. Sekarang ini,
banyak aplikasi perusahaan swasta maupun perusahaan pemerintah lebih memilih
menggunakan aplikasi website PHP dikarenakan memang aplikasi website sekarang
ini sangat kompleks.

1|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

 Hal itu juga didukung dengan script pemrograman lainnya seperti AJAX, jQuery,
CSS, HTML yang digabungkan menjadi satu aplikasi website dengan PHP sebagai
script utama website-nya. Mulai dari aplikasi yang menggunakan API berbentuk
SOAP, API WDSL, maupun aplikasi website yang membutuhkan formulir yang
kompleks.
Dari situlah perusahaan besar yang fokus di PHP development, yaitu ElissLab
mulai mengembangkan framework PHP dengan nama Code Igniter / CI (Pembakar
Kode) yang merupakan opensource. Eliss Lab mempunyai produk berbayar yang
bernama Expression Engine dan Mojo Motor. Mereka telah berdiri sejak 2001.
Model MVC sering digunakan oleh programmer karena memiliki banyak
keuntungan dalam proses perancangan aplikasi. Beberapa keuntungan model MVC
antara lain sebagai berikut:
a. Kemampuan untuk menggunakan ulang komponen-komponen antarmuka.
b. Kemampuan untuk mengembangkan aplikasi dengan antarmuka pengguna
secara terpisah.
c. Kemampuan untuk melakukan pewarisan (inheritance) dan berbagai bagian yang
berbeda pada suatu hierarki class.
d. Kemampuan untuk mendefinisikan class-class pengaturan tampilan (control
style), yang menyediakan fitur-fitur yang akan ditampilkan oleh aplikasi yang
dikembangkan.
2. Bagian-bagian MVC
Dalam implementasinya, model MVC memiliki tiga bagian, yaitu memisahkan
data (model) dari tampilan (view) dan cara memprosesnya (controller). Setiap bagian
dapat dijelaskan sebagai berikut:
a. Data (model)
MVC memiliki layer yang disebut dengan model, yang mempresentasikan data
yang digunakan oleh aplikasi sebagaimana proses bisnis yang diasosiasikan
terhadapnya. Dengan memilahnya sebagai bagian terpisah, seperti penampungan
data, persistence, serta proses manipulasi, maka akan terpisah dari bagian lain
aplikasi. Terdapat beberapa kelebihan dalam pendekatan ini, diantaranya sebagai
berikut:
1) Membuat detail dari data dan operasinya dapat ditempatkan pada area yang
ditentukan (model) dibandingkan tersebar dalam keseluruhan lingkup

2|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

 aplikasi. Hal ini memberikan keuntungan dalam proses pemeliharaan
aplikasi.
2) Dengan pemisahan total antara data dengan implementasi interface, maka
komponen model dapat digunakan kembali oleh aplikasi lain yang memiliki
kegunaan yang hampir sama.
b. Tampilan (view)
Layer view mengandung keseluruhan detail dari implementasi user interface.
Pada layer ini, komponen grafis menyediakan representasi proses internal aplikasi
dan menuntun alur interaksi user terhadap aplikasi. Dalam model MVC, tidak ada layer
lain yang berinteraksi dengan pengguna, kecuali view. Penggunaan layer view
memiliki beberapa kelebihan, yaitu memudahkan penggabungan divisi desain dalam
tim development. Dimana, divisi desain dapat berkonsentrasi pada style, look and feel,
dan sebagainya, dalam aplikasi tanpa harus memperhatikan lebih pada detail yang
lain. Dengan memiliki layer view yang terpisah memungkinkan ketersediaan multiple
interface dalam aplikasi. Jika inti dari aplikasi terletak pada bagian lain (dalam model),
maka multiple interface dapat dibuat (Swing, Web, dan Console) secara keseluruhan
dengan tampilan yang berbeda, namun mengeksekusi komponen model sesuai
fungsionalitas yang diharapkan.
c. Cara pemrosesan (controller)
Arsitektur MVC memiliki layer controller. Layer ini menyediakan detail alur
program dan transisi layer, serta bertanggung jawab akan penampungan event yang
dibuat oleh user dari view, dan melakukan pembaruan terhadap komponen model
menggunakan data yang dimasukkan oleh user. Kelebihan dalam penggunaan layer
controller secara terpisah, yaitu:
1) Dengan menggunakan komponen terpisah untuk menampung detail dari
transisi layer, komponen view dapat didesain tanpa harus memperhatikan
bagian lain secara berlebih. Hal ini memudahkan tim pengembang multiple
interface bekerja secara tepisah dari yang lain secara simultan. Interaksi
antarkomponen view terabstraksi dalam controller.
2) Dengan menggunakan layer terpisah yang melakukan pembaruan terhadap
komponen model, maka detail tersebut dihapus dari layer presentasi. Layer
presentasi kembali pada fungsi utamanya untuk menampilkan data kepada
user, Detail tentang bagaimana data dari user mengubah ketetapan aplikasi

3|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

 disembunyikan oleh controller. Hal ini memisahkan dengan jelas antara
logika presentasi dengan logika bisnis.

Gambar 1. Alur MVC (Model View Controller)

Alur kerja suatu aplikasi web ketika user mengunjungi salah satu halaman web,
sebagai berikut:
a) Browser berhubungan dengan server untuk akses halaman.
b) Request (permintaan) browser ditangani oleh bagian controller dari kode kita.
c) Controller akan melakukan pemanggilan ke model untuk mendapatkan data
yang relevan, kemudian mempersiapkan data tersebut untuk ditampilkan.
d) Controller memberikan data yang diperlukan kepada view.
e) View menampilkan data dan berbagai elemen antarmuka tambahan yang
diperlukan.
Seperti namanya, ada tiga komponen yang dapat dideskripsikan sebagai berikut:
 Model berfungsi untuk mengatur data, fungsi dan aturan dari aplikasi
 View berfungsi untuk mengatur tampilan atau output yang tampil di layar, tidak
hanya berupa data, namun juga termasuk komponen lain, seperti gambar, video,
diagram, dan sebagainya.
 Controller merupakan program yang mengatur menerima input dan menjalankan
beberapa perintah untuk dijalankan di model.

4|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

 Gambar 2. Diagram interaksi antar komponen MVC
Sebenarnya sistem dari MVC cukup sederhana, membeda-bedakan setiap bagian
sesuai dengan fungsinya. Jadi, halaman yang di-request oleh user akan di kontrol oleh
Controller, lalu Controller akan memberikan tampilan kepada user yaitu View, dan
untuk bagian data akan diatur oleh Model.
Langkah-langkah aliran MVC, adalah sebagai berikut:
a) Browser client mengirimkan permintaan ke aplikasi MVC.
b) Global.ascx menerima permintaan ini dan melakukan routing berdasarkan URL
permintaan masuk menggunakan Route Table, Route Data, UrlRouting Module,
dan MVC Route Handler objek.
c) Operasi routing ini memanggil controller yang sesuai dan mengeksekusinya
menggunakan objek dengan metode Controller Factory, dan MVC Handler
objek.
d) Controller memproses data menggunakan model dan memanggil metode yang
tepat menggunakan Controller Action Invoker objek.
e) Model diproses, kemudian dilewatkan ke view yang pada gilirannya membuat
keluaran terakhir.

5|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

3. Pemrograman web berbasis Model View Controller (MVC) dengan PHP
Dalam pembuatan aplikasi web, pola MVC adalah pola yang paling sering
digunakan saat ini. Pola MVC digunakan untuk pertama kali dalam Smalltalk dan
kemudian diadopsi serta dipopulerkan oleh Java. Pada saat ini, terdapat lebih dari
belasan framework web PHP berbasiskan pada pola MVC. Terlepas dari fakta bahwa
pola MVC sangat populer dalam PHP, maka sangat sulit untuk menemukan sebuah
panduan/tutorial yang tepat, yang disertai oleh sebuah contoh source code yang
sederhana.
Contoh singkat PHP di sini mempunyai sebuah struktur sederhana, yang
meletakkan tiap modul MVC dalam satu folder yang berbeda. Perhatikan gambar
berikut ini:

Gambar 2. Struktur sederhana MVC

a. Controller
Controller adalah hal pertama yang mengambil sebuah permintaan, melakukan
penguraian terhadap permintaan tersebut, menginisialisasi dan memanggil model,
serta mengambil sebuah respons model, dan mengirimkan pada layer presentasi.
Controller secara praktis merupakan bahan pengikat antara model dan view, serta
sebuah framework kecil dimana model dan view dipasang.
Controller merupakan bagian yang mengatur hubungan antara bagian model dan
bagian view. Controller berfungsi untuk menerima request dan data dari user,
kemudian menentukan apa yang akan diproses oleh aplikasi.
Dalam implementasi PHP sederhana kita, controller diimplementasikan oleh
hanya satu class yang tidak diduga, yang dinamakan controller. Titik masuk aplikasi
akan berada pada index. File PHP index akan mengutus semua permintaan pada
controller.
Contoh:
// index.php file
include_once(“controller/Controller.php”);

6|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

 $controller = new Controller();
$controller->invoke();

Pada contoh di atas, class controller yang dipakai hanya mempunyai satu fungsi
dan konstruktor. Konstruktor menginstal sebuah class model dan ketika sebuah
permintaan dilakukan, controller memutuskan data mana yang dibutuhkan dari model.
Kemudian, controller memanggil class model untuk mengambil data. Setelah itu,
controller memanggil data yang datang dari model yang dilewatkan yang
berpasangan. Kode yang dipakai sangat sederhana. Perlu dicatat bahwa controller
tidak mengetahui apa pun dari database atau bagaimana halaman dihasilkan.
Perhatikan kode program berikut:
include_once (“model/Model.php”);
class Controller {
public $model;
public function contruct()
{
$this->model = new Model();
}
public function invoke()
{
if (!isset($_GET[‘book’]))
{
//no special book is requested, we’ll show a list of all available
books
$books = $this->model->getBookList();
include ‘view/booklist.php’;
}
else
{
//show the requested book
$book = $this->model->getBook($_GET[‘book’]);
include ‘view/viewbook.php’;
}
}
}

b. Class model dan entitas

Model biasanya berhubungan langsung dengan database untuk memanipulasi
data (Insert, Update, Delete, SearchI, menangani validasi dari bagian Controller
Pada class model dan entitas, model mewakili data dan logika dari sebuah
aplikasi. Kebanyakan orang menyebutnya logika bisnis. Biasanya, model bertanggung
jawab untuk hal-hal berikut:
1) Menyimpan, menghapus, dan memperbarui data aplikasi

7|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

 Secara umum, model memasukkan operasi database, namun
mengimplementasikan operasi sama yang memanggil layanan web luar atau
API bukanlah hal yang tidak biasa sama sekali.
2) Membungkus logika aplikasi
Lapisan ini adalah lapisan yang harus mengimplementasikan semua logika
dari aplikasi. Sebagian besar kesalahan umum, yaitu mengimplementasikan
operasi logika aplikasi di dalam lapisan controller atau view (presentasi).

Dalam contoh yang kita pakai, model mewakili oleh dua class, yaitu class Model
dan class Book. Model tidak membutuhkan penyajian lain. Class Book adalah sebuah
class entitas. Class ini seharusnya diekspos ke layer view dan menyajikan format yang
dikirim oleh tampilan class Model. Dalam implementasi, pola MVC yang bagus hanya
class entitas yang harus diekspos oleh model, dan class entitas tersebut tidak
seharusnya membungkus logika bisnis apa pun. Class entitas mempunyai tujuan
utama untuk menyimpan data. Tergantung pada implementasi, objek entitas bisa
digantikan oleh potongan data XML atau JSON. Dalam contoh berikut, Anda dapat
melihat bagaimana model mengembalikan sebuah buku tertentu, atau sebuah daftar
semua buku yang tersedia.
Perhatikan contoh class Model berikut:
include_once(“model/Book.php”);
class Model {
public function getBookList()
{
// here goes some hardcoded values to simulate the database
return array (
“Jingle Book” => new Book (“Jungle Book”, “R. Kipling”, “A classic
book.”),
“Moonwalker” => new Book(“Moonwalker”, “J. Walker”, “”),
“PHP for Dummies” => new Book(“PHP for Dummies”, “Some Smart
Guy”, “”)
);
}
public function getBook($title)
{
// we use the previous function to get all the books and then we return
the requested one
// in a real life scenario this will be done through a db select command
$allBooks = $this->getBookList();
return $allBooks[$title];
}
}

8|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

 Dalam contoh yang dipakai, layer model memasukkan class Book. Dalam
sebuah skenario yang sebenarnya, model akan memasukkan semua entitas dan
class-class untuk menahan data ke dalam database dan class yang membungkus
logika bisnis.
class Book {
public $title;
public $author;
public $description;

public function construct($title, $author, $description)

{
$this->title = $title;
$this->author = $author;
$this->description = $description;
}
}

c. View (presentasi)
View merupakan bagian yang menangani presentation logic. Pada suatu aplikasi
web, bagian ini biasanya berupa file template HTML yang diatur oleh Controller. View
berfungsi untuk menerima dan merepresentasikan data kepada user. Bagian ini tidak
memiliki akses langsung terhadap bagian model.
Layer presentasi (view) bertanggung jawab untuk pemformatan data yang
diterima dari model dalam sebuah bentuk yang bisa diakses oleh pengguna. Data bisa
datang dari model berupa objek sederhana (kadang-kadang disebut objek nilai),
struktur XML, dan JSON. View tidak seharusnya membuat bingung dengan
mekanisme template, tapi terkadang keduanya bekerja dengan cara yang sama dan
juga menangani permasalahan yang sama. Keduanya akan mengurangi
ketergantungan dari layer presentasi terhadap keseluruhan sisten dan memisahkan
unsur penyajian (HTML) dari kode.
Controller mengutus data dari model pada sebuah unsur view tertentu, biasanya
berhubungan dengan entitas utama di dalam model. Sebagai contoh, operasi “display
account” akan berhubungan dengan sebuah view “display account”. Layer view bisa
menggunakan sebuah sistem template untuk menghasilkan sebuah halaman HTML.
Mekanisme template bisa menggunakan kembali bagian tertentu dari halaman
header, menu, footer, list dan tabel, yaitu jika kita berbicara dalam konteks pola MVC.
Dalam contoh yang terpakai, view hanya berisi dua file, yaitu satu untuk menampilkan
satu buku, dan yang lainnya untuk menampilkan sebuah daftar buku.
Perhatikan kode program berikut:

9|SMKN 1 SUKOREJO By: Aman Maathoba, S.Pd

 //viewbook.php
<html>
<head>
</head>
<body>
<?php
echo ‘Title:’ . $book->title . ‘<br />’;
echo ‘Author:’ . $book->author . ‘<br />’;
echo ‘Description:’ . $book->description . ‘<br />’;
?>
</body>
</html>

//booklist.php
<html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td>Title</td>
<td>Author</td>
<td>Description</td>
</tr>
</tbody>
<?php
foreach ($book as $title => $book)
{
echo ‘<tr><td><a href=’index.php?book=’ .book ->
title.’”>’.$book -> title.’</a></td><td>’.$book -> author.’ </td><td>’.$book ->
description.’</td></tr>’
}
?>
</table>
</body>
</html>

Contoh program di atas merupakan sebuah implementasi konsep MVC

sederhana dalam PHP. Sebagian besar framework web PHP yang berbasis pada
MVC mempunyai implementasi berbeda, namun dalam sebuah bentuk yang lebih
baik. Hal ini bisa terjadi kemungkinan disebabkan oleh pola MVC tidak terbatas.
Sebagai contoh, layer yang berbeda bisa diimplementasikan dalam bahasa yang
berbeda, atau tersebar pada mesin yang berbeda. Aplikasi AJAX bisa
mengimplementasikan layer view secara langsung dalam JavaScript melalui browser,
yang memanggil layanan JSON. Controller bisa secara parsial diimplementasikan
pada client, dan sebagian lagi di server.

C. Latihan

10 | S M K N 1 S U K O R E J O By: Aman Maathoba, S.Pd

 1) Buatlah struktur file seperti tampilan di bawah ini!

2) Ketikkan kode program di bawah ini:

11 | S M K N 1 S U K O R E J O By: Aman Maathoba, S.Pd

 3) Ketikkan kode program di bawah ini:

4) Ketikkan kode program di bawah ini:

12 | S M K N 1 S U K O R E J O By: Aman Maathoba, S.Pd

13 | S M K N 1 S U K O R E J O By: Aman Maathoba, S.Pd
 5) Ketikkan kode program di bawah ini:

6) Ketikkan kode program di bawah ini:

7) Ketikkan kode program di bawah ini:

14 | S M K N 1 S U K O R E J O By: Aman Maathoba, S.Pd

 8) Jalankan pada localhost

D. Tugas Individu
1) Buatlah database agar tampilan di atas dapat dijalankan dengan baik !
2) Kemudian perbaikilah kode program pada Latihan di atas yang terdapat
tulisan Notice !
3) Silahkan di-screenshoot disertai dengan Nama Kalian dan Absennya pada
tampilan di localhost dan dikirimkan ke website online yang telah disediakan
oleh guru mapel !

E. Tugas Kelompok
Buatlah sebuah program aplikasi web dengan memanfaatkan Model View
Controller untuk memasukkan dan menampilkan data buku yang telah di-
inputkan !

F. Kesimpulan
Model View Controller (MVC) yang merupakan salah satu design pattern yang
sekarang banyak dipergunakan oleh berbagai framework merupakan salah satu
metode pengembangan aplikasi yang harus dikuasai. Dengan menggunakan MVC
perawatan sebuah program akan lebih mudah, mengingat semua bagian program
telah dipetakan dalam struktur yang jelas, sehingga pengubahan desain tidak
mengubah logic maupun data. Demikian pula pengubahan data akan terhindar dari

15 | S M K N 1 S U K O R E J O By: Aman Maathoba, S.Pd

pengubahan tampilan secara tidak sengaja. Pengubahan logic atau program juga
lebih dimudahkan karena dapat dilakukan di bagian program yang terpisah.

G. Daftar Pustaka
1) Naista, David. 2016. Bikin Framework PHP Sendiri dengan Teknik OOP dan
MVC. Yogyakarta: CV: Lokomedia.
2) Raditya, Nizar Rabbi. 2015. Konsep Dasar MVC (Model View
Controller).UNIKOM: S1 Sistem Informasi.
3) Wahyudi, Stephanus Eko. Sistem Pemrograman Model View Controller
(MVC). Informatika Universitas Ciputra, https://informatika.uc.ac.id
4) Wikipedia, Model-View-Controller, http://en.wikipedia.org/wiki/Model-view-
controller

16 | S M K N 1 S U K O R E J O By: Aman Maathoba, S.Pd