- Back to Home »
- Pelajaran , Sekilas Info , Software »
- Implementasi MVC dalam HTML
Posted by : Iqbal
28 Sept 2019
Model-View-Controller atau MVC adalah sebuah metode untuk
membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan (View) dan
cara bagaimana memprosesnya (Controller). Dalam implementasinya kebanyakan
framework dalam aplikasi website adalah berbasis arsitektur MVC. MVC memisahkan
pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi
seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi kontrol
dalam sebuah aplikasi web. Berikut
ini penjelasan beserta cara kerja masing masing:
Data (Model)
Pola MVC memiliki layer yang disebut dengan Model yang
merepresentasikan data yang digunakan oleh aplikasi sebagaimana proses bisnis
yang diasosiasikan terhadapnya. Dengan memilahnya sebagai bagian terpisah,
seperti penampungan data, persistence, serta proses manipulasi, terpisah dari
bagian lain aplikasi.
Terdapat beberapa kelebihan dalam pendekatan ini. Pertama,
membuat detail dari data dan operasinya dapat ditempatkan pada area yang
ditentukan (Model) dibanding tersebar dalam keseluruhan lingkup aplikasi. Hal
ini memberikan keuntungan dalam proses pemeliharaan aplikasi.
Kedua, dengan pemisahan total antara data dengan
implementasi interface, komponen model dapat digunakan kembali oleh aplikasi
lain yang memiliki kegunaan yang hampir sama.
Tampilan (View)
Layer ini mengandung keseluruhan detail dari implementasi
user interface. Disini, komponen grafis menyediakan representasi proses
internal aplikasi dan menuntun alur interaksi user terhadap aplikasi. Tidak ada
layer lain yang berinteraksi dengan pengguna, hanya View.
Penggunaan layer View memiliki beberapa kelebihan: Pertama,
memudahkan pengabungan divisi desain dalam development team. 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), multiple interfaces dapat dibuat
(Swing, Web, Console), secara keseluruhan memiliki tampilan yang berbeda namun
mengeksekusi komponen Model sesuai fungsionalitas yang diharapkan.
Cara pemprosesan (Controller)
Terakhir, arsitektur MVC memiliki layer Controller. Layer
ini menyediakan detail alur program dan transisi layer, dan juga
bertanggungjawab akan penampungan events yang dibuat oleh user dari View dan
melakukan update terhadap komponen Model menggunakan data yang dimasukkan oleh
user.
Kelebihan dalam penggunaan layer Controller secara terpisah:
Pertama, dengan menggunakan komponen terpisah untuk menampung detail dari
transisi layer, komponen view dapat didesain tanpa harus memperhatikan bagian
lain secara berlebih. Hal ini memudahkan team pengembang multiple interface
bekerja secara terpisah dari yang lain secara simultan. Interaksi antar
komponen View terabstraksi dalam Controller.
Kedua, dengan menggunakan layer terpisah yang melakukan
update terhadap komponen Model, 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
disembunyikan oleh Controller. Hal ini memisahkan dengan jelas antara
presentation logic dengan business logic
Dengan menggunakan metode MVC maka aplikasi akan lebih mudah
untuk dirawat dan dikembangkan. Untuk memahami metode pengembangan aplikasi
menggunakan MVC diperlukan pengetahuan tentang pemrograman berorientasi objek.
Alur kerja aplikasi web kita ketika user mengunjungi salah
satu halaman yaitu:
- Browser berhubungan dengan server untuk akses halaman.
- Request (permintaan) browser ditangani oleh bagian Controller dari kode kita.
- Controller akan melakukan pemanggilan ke Model untuk mendapatkan data yang relevan, dan kemudian mempersiapkan data tersebut untuk ditampilkan.
- Controller memberikan data yang diperlukan kepada view.
- View menampilkan data dan berbagai elemen antarmuka tambahan yang diperlukan.
Sumber :