Materi 4 Gasal 2021/ 2022 Scan

MVC: Pengertian Dasar, Manfaat, dan Contohnya dalam Pengembangan

Website
March 2, 2021 3 min read

Jika Anda sedang belajar coding, Anda pasti sudah tak asing dengan yang namanya framework.
Saat ini hampir semua framework populer, seperti framework laravel, sudah menggunakan
konsep MVC untuk pengembangan website.

MVC sendiri merupakan pola desain arsitektur website yang terbagi menjadi tiga bagian, yaitu
model, view, dan controller. Konsep ini diyakini bisa mengefektifkan proses pembuatan
website.

Nah, seperti apa sih penjelasan lebih detail mengenai MVC? Tenang, kami akan membahasnya
di artikel ini pada bab berikutnya. Selain itu, kami juga akan membahas lengkap cara kerja,
manfaat, serta beberapa contohnya. Penasaran kan? Yuk simak artikel ini sampai selesai ya.

Daftar isi tutup

1 Apa itu MVC?

2 Alur Kerja MVC pada Sistem Pengembangan Website
3 Manfaat MVC
3.1 1. Proses Pengembangan Website Lebih Efisien
3.2 2. Testing Jadi lebih Mudah
3.3 3. Error atau Bug Lebih Cepat dan Mudah Ditangani
3.4 4. Pemeliharaan atau Maintenance Lebih Mudah
4 Contoh Penggunaan Konsep MVC
5 Kembangkan Website Lebih Efektif pakai Konsep MVC!

Apa itu MVC?

MVC atau Model View Controller adalah sebuah pola desain arsitektur dalam sistem
pengembangan website yang terdiri dari tiga bagian, yaitu:

• Model, bagian yang mengelola dan berhubungan langsung dengan database;

• View, bagian yang akan menyajikan tampilan informasi kepada pengguna;
• Controller, bagian yang menghubungkan model dan view dalam setiap proses request dari user.

Dengan konsep MVC ini, website seakan memiliki bagian yang terpisah dan bisa dikembangkan
masing-masing. Maka, proses pembuatan website bisa dilakukan lebih cepat karena developer
akan lebih fokus pada pengerjaan salah satu bagian saja.
Karena dianggap efektif, konsep MVC banyak diterapkan di berbagai framework. Sebagai
contoh, di framework PHP, Laravel, CodeIgniter, Symfony, Yii, dan Zend sudah
menggunakan konsep ini.

Alur Kerja MVC pada Sistem Pengembangan Website

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

1. Bagian view akan merequest informasi untuk bisa ditampilkan kepada pengguna.
2. Request tersebut kemudian diambil oleh controller dan diserahkan bagian model untuk
diproses;
3. Model akan mengolah dan mencari data informasi tersebut di dalam database;
4. Model memberikan kembali pada controller untuk ditampilkan hasilnya di view;
5. 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:

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. Lebih mudah dipahami?
 Manfaat MVC

Ada banyak keuntungan menggunakan framework MVC dalam pembuatan website seperti
berikut ini:

1. Proses Pengembangan Website Lebih Efisien

Konsep MVC bisa membuat proses pengembangan website lebih cepat. Sebab, MVC membagi
website menjadi tiga bagian terpisah. Bagian model dan controller bisa dikerjakan oleh back
end developer sementara view bisa dilakukan oleh front end developer dan UI UX tim.

Sebagai contoh, setelah tim UI UX menyelesaikan rancangan desain halaman depan, tim back
end dan front end bisa mulai membuat kode pemrograman untuk desain itu. Tim UI UX bisa
beralih merancang desain halaman lain misalnya halaman produk.

2. Testing Jadi lebih Mudah

Untuk memastikan website berfungsi dengan baik, langkah testing perlu dilakukan. Nah, dengan
menggunakan kerangka MVC, proses testing bisa dilakukan per bagian yang telah siap, alih-alih
menunggu keseluruhan website jadi.

Selain itu, pembuatan dokumentasi dari setiap fitur bisa lebih efisien dan rapi karena proses
testing bisa dilakukan per bagian.

3. Error atau Bug Lebih Cepat dan Mudah Ditangani

Pembagian website oleh MVC membuat developer bisa lebih fokus pada bagian
pengembangannya masing-masing. Jadi, mereka bisa lebih cepat menemukan bug dan
memperbaikinya.

Semisal, ketika fungsi keranjang pada website toko online tidak berfungsi, kemungkinan
kendalanya terletak pada data atau tombol. Nah, kalau ternyata error ditemukan pada tombol
(view), bagian front end bisa langsung memperbaiki error tersebut.

4. Pemeliharaan atau Maintenance Lebih Mudah

Konsep MVC memungkinkan penggunaan script yang lebih terstruktur dan rapi. Hal ini dapat
memudahkan tim developer dalam proses pengembangan dan maintenance website.
Anggaplah Anda ingin menambahkan fitur “tambahkan voucher diskon” pada website toko
online Anda. Tim developer baik back end maupun front end akan lebih mudah menemukan
kode script yang perlu ditambahkan dan diperbaharui.

Contoh Penggunaan Konsep MVC

Rasanya kurang afdol jika pembahasan konsep MVC ini tidak disertai dengan contoh, ya? Nah,
ini dia contoh pembuatan form data user di website dengan menggunakan CodeIgniter:

1. Download CodeIgniter dan ekstrak file tersebut ke web server Anda.

2. Buat folder model terlebih dulu supaya data pengguna bisa masuk ke database. Lalu, tambahkan
kode berikut:

1
<?php
2
class M_user extends CI_Model
3 {
4 public function insert_data($table, $data)
5 {
return $this->db->insert($table, $data);
6
}
7
}
8

3. Selanjutnya, untuk controller buat folder baru lagi dengan nama yang berbeda dari folder
model. Lalu tambahkan kode berikut:

1
<?php
2
class User extends CI_Controller
3 {
4 public function add()
5 {
$this->load->view('user_add');
6
}
7
}
8

4. Kemudian untuk tampilan (view) formnya, buat lagi folder baru dan isikan kode berikut:

1 <!DOCTYPE html>
2 <html>
 3 <head>
<title>Membuat Form Tambah User</title>
4
</head>
5
<body>
6 <center>
7 <h2>Form Tambah Data User</h2>
8 <form method="post" action="<?= base_url('user/save'); ?>">

9 <table border="1">
<tr>
1
<td>Email</td>
0
<td><input type="text" name="email"></td>
1 </tr>
1 <tr>
1 <td>Password</td>
<td><input type="password" name="password"></td>
2
</tr>
1
<tr>
3 <td>Nama</td>
1 <td><input type="text" name="nama"></td>
4 </tr>

1 <tr>
<td colspan="2"><input type="submit"
5
name="kirim" value="Masukkan Data"></td>
1
</tr>
6 </table>
1 </form>

7 </center>
</body>
1
</html>
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0

5. Setelah itu, cobalah akses di localhost untuk menguji hasilnya. Hasilnya akan muncul seperti ini:

Kembangkan Website Lebih Efektif pakai Konsep MVC!

M MVC adalah konsep arsitektur dalam sistem pengembangan website yang terbagi menjadi tiga
bagian, yaitu model, view, dan controller.

Model berfungsi untuk berhubungan dengan database agar dapat mengelola, memperbarui, dan
menginput data. Lalu, View akan mengatur tampilan supaya lebih mudah dipahami pengguna.
Sementara Controller bertugas menghubungkan model dan view.
Dengan konsep MVC ini, ada banyak manfaat yang bisa Anda dapatkan lho! Seperti:

1. Proses pengembangan website lebih efisien

2. Testing jadi lebih mudah
3. Error atau bug lebih cepat diatasi
4. Pemeliharaan atau maintenance lebih mudah

Nah, sekarang Anda sudah memahami bagaimana konsep MVC, bukan? Jadi, sudah siap
membangun website dengan konsep MVC dengan framework favorit Anda?