MVC

MVC adalah pola arsitektur atau desain yang membagi kode pada aplikasi menjadi tiga komponen, yaitu model, view, dan controller, di mana ketiganya memiliki fungsi berbeda.

Software Engineering

Mau Belajar

Software Engineering

GRATIS?

Di RevoU, tidak hanya teori, penerapan, serta career coaching. Kamu juga mendapatkan akses ke Community Hub dengan 6000+ member. Di sini, kamu akan selalu terupdate informasi seputar job openings, industry news, dan upskilling events!

IKUT KURSUS GRATIS

Mau Belajar

Software Engineering

GRATIS?

Apa itu MVC?

Definisi MVC
Definisi MVC

Untuk mengembangkan website atau aplikasi, developer dan programmer membutuhkan kerangka atau framework berisi kode agar situs atau aplikasi bisa berfungsi dan melakukan tugas tertentu dengan baik. 

Ada banyak jenis framework yang digunakan untuk web development, salah satunya adalah MVC. 

Dikutip dari Geeks for Geeks, Model View Controller atau disingkat MVC adalah pola arsitektur atau desain yang membagi kode pada aplikasi menjadi tiga komponen, yaitu model, view, dan controller. Setiap komponen memiliki peran masing-masing namun saling berkaitan. 

Karena dibagi menjadi tiga komponen atau unit, pemeliharaan dan pengoptimalan sistem jadi lebih mudah. Cara kerja ini populer disebut dengan separation of concerns

Apa Saja Komponen MVC?

Seperti yang telah disebutkan di atas, ada tiga komponen atau bagian MVC yaitu model, view, dan controller

Berikut penjelasan dari masing-masing komponen MVC dan fungsinya:

#1 Model

Komponen model berhubungan dengan seluruh data logis (data-related logic) yang digunakan pengguna. 

Data logis adalah data yang relevan dengan konteks tertentu. Misalnya ketika ingin membuat database pelanggan, maka data yang dikumpulkan berupa nama pelanggan, usia, alamat, nomor kontak, dan riwayat pembelian. 

Komponen model dapat mewakili data apa saja yang sedang ditransfer antara komponen view dan controller, atau data logis lainnya. 

Selain itu, model juga dapat mengambil data dari database, memodifikasi, dan menambahkan data ke dalam database

#2 View

Komponen view bertanggung jawab untuk membuat tampilan muka (UI/user interface) pada seluruh situs atau aplikasi.

Komponen ini dibuat dari data yang dikumpulkan oleh model, dan diberikan kepada view melalui komponen controller. Namun pada beberapa kasus, view bisa berinteraksi langsung dengan model tanpa bantuan controller

#3 Controller

Komponen controller berfungsi sebagai penghubung antara model dengan view

Tugas controller hanyalah memproses data dan permintaan yang masuk, kemudian memberitahu komponen model apa yang harus dikerjakan, dan hasilnya akan ditampilkan oleh komponen view

Alur Kerja Model View Controller

Umumnya alur kerja MVC yaitu controller berinteraksi dengan user, lalu meneruskan perintah user ke model untuk menampilkan data yang diminta. Selanjutnya model akan memberikan data tersebut ke controller agar ditampilkan oleh view. 

Alur kerja MVC
Alur kerja MVC

Misalnya, Andin membuka aplikasi Netflix di ponselnya, memilih menu Category di homepage dan mengeklik opsi “Romance”. Sistem app kemudian mengirimkan permintaan (request) kepada server Netflix untuk menampilkan daftar film ber-genre romantis. Server akan meneruskan permintaan tersebut kepada controller

Setelah permintaan diterima, controller akan berinteraksi dengan model untuk mengambil data tentang film romantis di database. Setelah data terkumpul, model akan mengirimkan data tersebut kembali ke controller

Controller mengirim data daftar film romantis ke view dan memintanya untuk melakukan proses rendering, atau menggabungkan beberapa objek agar bisa ditampilkan

Setelah data selesai dirender, view mengirimkannya kembali ke controller agar bisa ditampilkan pada tampilan aplikasi Netflix yang digunakan Andin. 

Manfaat MVC

Berikut ini beberapa manfaat MVC:

  • Pemeliharaan kode aplikasi jauh lebih mudah karena MVC terbagi menjadi tiga unit terpisah.
  • Aplikasi mampu melakukan tugas kompleks karena memiliki fondasi yang kuat, dibandingkan jika ketika kode digabungkan menjadi satu unit.
  • User interface (UI) bisa dimodifikasi lebih mudah hanya dengan mengubah komponen view, controlling, atau keduanya.
  • Komponen MVC bisa diuji secara terpisah, namun bisa dikembangkan secara bersamaan.
  • Terintegrasi dengan framework, seperti framework JavaScript. 
  • Mampu menampilkan berbagai format data, seperti file audio, dokumen, gambar, dan video.
  • MVC mendukung pengembangan website yang ramah SEO, sehingga dapat meningkatkan pengunjung situs.

Kekurangan MVC

Namun ada juga kekurangan dari MVC, yaitu:

  • Untuk mengimplementasikan MVC, developer perlu memiliki pengetahuan yang luas tentang bahasa pemrograman dan teknologi. 
  • Karena tersusun atas tiga komponen, kode navigasi jadi lebih sulit dibaca sehingga butuh waktu lama untuk melakukan update sistem.
  • MVC hanya cocok digunakan untuk situs atau aplikasi dengan tugas yang kompleks.
  • Meskipun pengujian komponen bisa dilakukan terpisah, seluruh komponen harus terintegrasi terlebih dahulu.
  • Pengujian kinerja aplikasi (skalabilitas) harus dilakukan sebagai satu unit MVC, bukan sebagai tiga unit terpisah.
  • Biaya pemeliharaan MVC lebih mahal dan kompleks dibandingkan framework lain.

FAQ (Frequently Asked Question)

Apa komponen dalam MVC yang bertugas menyajikan informasi kepada user agar mudah dipahami?

Komponen view dalam MVC bertugas untuk menyajikan informasi yang diminta user dengan bahasa yang mudah dipahami. 

Sebelum memberikan informasi tersebut kepada user, komponen view akan menerima instruksi terlebih dahulu dari controller untuk mengetahui informasi apa yang diminta. Selain itu, informasi tersebut berasal dari komponen model yang mengakses data dari database.

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program:

Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion.

Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program:
Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion.

Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program:

Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion.

Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Kata kunci lainnya

Mulai karirmu dalam

Software Engineering

Di RevoU, tidak hanya teori, penerapan, serta career coaching. Kamu juga mendapatkan akses ke Community Hub dengan 6000+ member. Di sini, kamu akan selalu terupdate informasi seputar job openings, industry news, dan upskilling events!
ikut kursus gratis
Menu