Campus Life · Tekno
Original PostInilah Pengertian dan Contoh dari Model View Controller (MVC)
18 Feb 2023 0
.png "Inilah Pengertian dan Contoh dari Model View Controller (MVC)")
Assalamu‘alaikum wr. wb.
Halo gais! Jika kita sebelumnya sudah membahas tentang Client-Server Architecture, sekarang kita akan membahas tentang Model View Controller (MVC) dalam Arsitektur Perangkat Lunak.
.png) |
| Ilustrasi Model View Controller (MVC) |
Sumber Artikel Materi : Codecademy.com (Article), Dicoding.com (Blog), Codingstudio.id (Blog), Ekrut.com, dan Jagoanhosting.com (Blog)
MVC adalah salah satu konsep yang sering digunakan dalam framework populer seperti Laravel dan CodeIgniter. Tentunya saat belajar memprogram, istilah framework tidak akan terdengar asing lagi. Kerangka kerja adalah kerangka kerja berguna yang memungkinkan Developer untuk menulis kode yang lebih terstruktur dan bersih.
Framework ini membutuhkan akses web dan pengembangan aplikasi seluler untuk merampingkan proses. Salah satu konsep yang paling populer dan banyak digunakan adalah MVC. MVC adalah singkatan dari Model, View dan Controller, masing-masing dengan perannya sendiri. Simak pembahasan berikut untuk lebih jelasnya mengenai pengertian, operasi, konsep, fungsi dan manfaat MVC beserta contohnya.
A. Pengertian Model View Controller (MVC)
Model View Controller atau yang dapat disingkat MVC adalah model arsitektur untuk membangun aplikasi dengan membagi kode menjadi tiga bagian yang terdiri dari :
1. Model
Bagian yang bertugas untuk menyiapkan, mengatur, memanipulasi, dan mengorganisasikan data yang ada di database.
2. View
Bagian yang bertugas untuk menampilkan informasi dalam bentuk Graphical User Interface (GUI).
3. Controller
Bagian yang bertugas untuk menghubungkan serta mengatur model dan view agar dapat saling terhubung.
B. Fungsi Model View Controller (MVC)
Pada dasarnya fungsi utama MVC adalah untuk mendukung proses pengembangan aplikasi web atau mobile yang lebih cepat. Bisa lebih cepat disebabkan MVC memecah aplikasi menjadi tiga bagian, lebih banyak orang mengerjakannya. 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 :
- 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.
- 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.
- 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 aplikasi telah selesai. Namun, pada konsep MVC kamu bisa menjalani testing pada bagian mana pun yang telah siap, tanpa menunggu semuanya selesai.
- Penulisan kode menjadi lebih rapi. Karena kode dibagi menjadi tiga bagian, penulisan kode menjadi lebih bersih dan lebih mudah bagi pengembang lain untuk mengembangkan kode tersebut.
C. Konsep Alur Model View Controller (MVC)
MVC adalah konsep yang jelas dalam tiga bagian, yakni model, view, dan controller. Ketiga komponen ini sebenarnya memiliki arti dan fungsinya masing-masing untuk mendukung pengembangan aplikasi web atau mobile. Berikut pembahasan lebih lanjut mengenai konsep dasar dari ketiga komponen MVC tersebut.
1. Model
Komponen model terkait dengan database dan interaksi. Model biasanya mewakili struktur data aplikasi dalam bentuk Database, seperti File Teks, File XML, atau Layanan Web (Web Services). Model menentukan data apa yang harus ada di dalam aplikasi. Jika suatu keadaan aplikasi berubah, model akan memberitahu tampilan dan controller.
Apabila masih kurang paham, mudahnya begini, Misalnya, aplikasi web belanja online memiliki produk favorit atau fitur keranjang belanja. Model menentukan informasi apa yang berisi produk atau keranjang belanja tersebut, misalnya harga, nama barang, nama toko, jumlah dan lainnya.
2. View
Komponen kedua dari konsep MVC adalah view. Tampilan menjadi bagian yang berhubungan langsung dengan layar pengguna atau menangani logika presentasi. Dalam aplikasi web, tampilan berupa file template HTML yang dikelola oleh controller.
Tampilan menentukan bagaimana daftar disajikan kepada pengguna dan juga menerima data untuk ditampilkan dari model. Namun, tampilan tidak memiliki akses langsung ke model yang dapat diintervensi.
3. Controller
Konsep terakhir dari bagian MVC adalah controller. Pengontrol berisi logika yang dapat memperbarui model atau tampilan sebagai respons terhadap tindakan pengguna dalam aplikasi. Tugas controller sebenarnya cukup banyak, yakni menyediakan variabel yang akan tampil pada bagian view, menyediakan penanganan error, mengerjakan proses logika aplikasi, melakukan validasi, dan memanggil model untuk akses ke basis data.
Sederhananya, controller adalah bagian yang bertanggung jawab untuk menghapus atau menambahkan produk ke toko online. Jika Anda memutuskan untuk menghapus item dari keranjang belanja online, pengontrol perlu memperbarui template dan kemudian mengambil input, memproses template sesuai keinginan pengguna, baru ditampilkan pada bagian view.
Namun, controller juga dapat memperbarui tampilan secara langsung tanpa model. Misalnya, jika pengguna ingin mengubah daftar item dalam urutan abjad. Controller bisa dikatakan sebagai “otak” dari semua bagian MVC.
D. Cara Kerja Model View Controller (MVC)
Ada juga cara kerja dari MVC yang prosesnya agak unik. MVC adalah konsep desain arsitektur yang mendukung pengembangan aplikasi web atau seluler. Selama masa percobaan atau pengujian aplikasi, ada beberapa cara untuk bekerja dengan MVC yang harus Anda ketahui, antara lain :
1. View akan menampilkan user interface aplikasi
Pada aplikasi uji coba konsep MVC, view pertama kali akan menampilkan user interface dan informasi tambahan lain yang terdapat di aplikasi pada pengguna. Tahap ini harus dilakukan semenarik mungkin, karena tampilan awal sebuah aplikasi menjadi penentu pengguna menyukainya atau tidak.
Ketika pengguna melakukan request di aplikasi, view akan menampung hal tersebut dan melanjutkannya ke bagian controller. Apabila sudah dilanjutkan, controller menerima request aplikasi dari bagian view.
2. Controller memberikan instruksi pada model
Sesudah menerima request aplikasi dari view, controller perlu memberikan instruksi pada model untuk menyiapkan informasi yang berkaitan dengan permintaan bagian view.
Setelah menemukan informasi yang berkaitan dengan permintaan bagian view, model tidak bisa langsung mengirimkannya begitu saja ke controller. Model perlu mengelola informasi yang telah terkumpul di database. Hal ini dilakukan untuk menyaring kembali mana informasi yang benar-benar penting dan tidak.
3. Model menyerahkan hasil pengolahan informasi database
Saat mengelola informasi di database, model tak melakukannya sendirian saja, ada bantuan logika pemrograman yang membuat proses pengelolaan lebih cepat. Setelah selesai, model harus menyerahkan hasil pengolahan informasi database ke controller, bukan bagian view. Kemudian, view menggunakan data yang telah siap diterima controller dari model untuk ditampilkan pada pengguna.
E. Kelebihan dari Model View Controller (MVC)
Menggunakan konsep MVC sangat bermanfaat bagi para developer, baik developer web maupun mobile. Misalnya, pengembang dibantu dengan Manajemen Source Code, Keamanan, Validasi Data, Kueri Database, dan topik lainnya. MVC adalah konsep yang sangat menyederhanakan implementasi aplikasi, sehingga jumlah baris programnya kecil. Di bawah ini adalah beberapa manfaat lain menggunakan MVC.
1. Mampu mendukung pemrograman asinkron
MVC merupakan konsep desain arsitektur dengan teknik pemrograman universal karena terintegrasi dengan framework JavaScript. Dalam kondisi ini, aplikasi yang menggunakan konsep MVC berarti dapat bekerja dengan file PDF, widget desktop, dan browser untuk situs tertentu. Selain itu, komponen logika ini juga mendukung teknik pemrograman asinkron yang dapat membantu developer mengembangkan aplikasi dengan cepat.
2. Dapat mengembangkan web menjadi SEO friendly
Siapa yang tidak ingin website-nya mendapatkan banyak kunjungan dari pengguna? Tentu saja semua orang menginginkannya. MVC adalah salah satu platform desain arsitektur yang dapat mendukung aplikasi web masuk dalam kategori SEO friendly. Hal ini memudahkan kamu untuk mengembangkan aplikasi web melalui banyaknya traffic kunjungan.
3. Adanya perubahan kode program tidak berpengaruh
Pada Aplikasi Web mana pun, User Interface (UI) adalah komponen yang paling banyak berubah dibandingkan yang lain. Perubahan ini dapat mencakup font, warna, layout fitur tertentu, dan penambahan atau pengurangan fitur untuk web maupun mobile. Perubahan pada UI biasanya mempengaruhi bagian lain. Pilihannya hanya ada dua, ganti semua komponen website atau tampilkan UI apa adanya
Dengan konsep MVC, Anda tidak perlu khawatir akan hal itu. Ini karena MVC memungkinkan kita untuk menambahkan atau mengubah sesuatu di Tampilan UI melalui komponen View dan Model.
F. Contoh Implementasi Program Model View Controller (MVC)
Berikut, inilah contoh Implementasi Program Aplikasi MVC sederhana menggunakan Python yang saya ambil dari ChatGPT :
# Modelclass PersonModel:def __init__(self, name, age):self.name = nameself.age = agedef get_name(self):return self.namedef get_age(self):return self.age# Viewclass PersonView:def print_person_details(self, name, age):print("Name: {}".format(name))print("Age: {}".format(age))# Controllerclass PersonController:def __init__(self, model, view):self.model = modelself.view = viewdef set_person_name(self, name):self.model.name = namedef set_person_age(self, age):self.model.age = agedef update_view(self):self.view.print_person_details(self.model.name, self.model.age)# Usagename = input("Instert Name : ")age = int(input("Insert Age : "))print("\nController View")person = PersonModel(name, age)view = PersonView()controller = PersonController(person, view)controller.update_view()print("\nController Set")controller.set_person_name(name)controller.set_person_age(age)controller.update_view()
Output :
Instert Name : Inzaghi Insert Age : 20 Controller View Name: Inzaghi Age: 20 Controller Set Name: Inzaghi Age: 20
Pada contoh program di atas, Model-nya adalah kelas Person yang memiliki properti name dan age. View-nya adalah kelas PersonView yang berfungsi untuk menampilkan detail seseorang ke layar. Controller-nya adalah kelas PersonController yang bertindak sebagai perantara antara Model dan View.
Pada saat dijalankan, program akan mencetak detail seseorang ke layar menggunakan View yang sudah ditentukan, kemudian mengubah nama dan umur orang tersebut menggunakan Controller dan mencetak kembali detail yang telah diubah ke layar menggunakan View.
Untuk Implementasi dari MVC lebih lanjut, akan diarahkan ke beberapa Link di bawah ini untuk Pemrograman Java :
Itulah Materi tentang Model View Controller (MVC) pada Arsitektur Perangkat Lunak. Sebenarnya, ada lagi Jenis-jenis dari Arsitektur Perangkat Lunak lainnya seperti Model View-View Model (MVVM). Semoga bermanfaat untuk kalian semua.
Terima Kasih 😄😘👌👍 :)
Wassalamu‘alaikum wr. wb.
.png)
.png)
.png)