Think Different [vokasi] Materi Pem. Web + Kisi UAS 11_Konsep MVC

Konsep MVC

atau penulisan source code dalam pemrograman dari suatu aplikasi yang dibuat agar tampak lebih rapi, lebih mudah untuk dimaintain dan dikembangkan. MVC merupakan suatu konsep pemrograman yang juga banyak diterapkan oleh pengembang perangkat lunak. Dengan menerapkan MVC ketika membuat suatu aplikasi akan berguna pada kemudahan saat aplikasi tersebut memasuki fase maintenance. Proses pengembangan dan integrasi pun menjadi lebih mudah untuk dilakukan. Ide dasar dari MVC

sebenarnya sangat sederhana, yaitu mencoba untuk memisahkan antara

model, view, dan controller.

1.2 Tujuan

Penguasaan materi dalam modul ini dirancang agar mahasiswa mampu untuk :  Menjelaskan dan memahami tentang definisi dan konsep arsitektur MVC.  Menjelaskan dan memahami layer-layer dalam arsitektur MVC.

 Menjelaskan dan memahami kelebihan dan kekurangan arsitektur MVC pada Aplikasi.

 Menjelaskan dan memahami arsitektur MVC pada aplikasi dekstop dan aplikasi web.

 Mampu merancang aplikasi sederhana dengan konsep arsitektur MVC.

1.3 Definisi MVC

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.

Model View Controller (MVC) pertama sekali didengungkan oleh peneliti XEROX PARAC yang bekerja dalam pembuatan bahasa pemograman Smalltalk sekitar tahun 1970-1980. Smalltalk adalah bahasa pemrograman murni berbasis object oriented, dan konsep MVC adalah fitur kunci utamanya.

Sebelum mengenal konsep MVC perhatikan gambar dibawah:

Gambar diatas akan memberikan ilustrasi

sederhana mengenai konsep arsitektur MVC.

Katakanlah besok adalah ulang tahun

saudara Anda. Anda akan memutuskan untuk membeli kue dan mengunjungi toko Bakery. Anda memesan ke pembuat kue (baker) untuk dibuatkan kue yang indah. Pembuat kue akan mengumpulkan semua bahan untuk membuat kue. Setelah mengumpulkan semua bahan, pembuat kue memutuskan bagaimana kue akan dibentuk dan memilih pan untuk mencetak kue yang tepat (mungkin persegi, lingkaran dll). Ketika sudah kue siap, pembuat kue merespon yaitu memberikan kembali kue ke anda. Dari ilustrasi ini bisa kita umpamakan anda sebagai view-nya tempat untuk request dan menerima hasil response dari suatu aplikasi, pembuat kue (baker) sebagai controller-nya yang akan memutuskan proses apa yang harus dilakukan ketika ada permintaan dari user sedangkan bahan baku kue, pan sebagai alat pencetak merupakan ilustrasi model yang langsung berhubungan dengan data yang diproses. Dalam membuat aplikasi apapun, bagian dalam kode yang sering mengalami perubahan adalah bagian user interface. User interface adalah bagian yang paling terlihat oleh pengguna dan merupakan tempat bagi pengguna berinteraksi dengan aplikasi. Business-logic yang rumit pada user-interface akan membuat pengubahan pada user interface menjadi lebih kompleks dan mudah terjadi kesalahan. Perubahan pada satu bagian memiliki potensi keterkaitan dengan keseluruhan aplikasi.

Pola arsitektur MVC menyediakan sebuah solusi terhadap permasalahan tersebut dengan membagi aplikasi menjadi bagian – bagian tersendiri yaitu Model, View dan Controller, yang memisahkan antara proses bisnis dengan tampilan yang mempunyai fokus terhadap

Gambar 11.1 Konsep MVC

Brawijaya University

2012

perubahan pada komponen model, maka komponen view tidak harus selalu dirubah/dirombak total, demikian juga sebaliknya.

2. Layer Utama pada Arsitektur MVC

Gambar 11.2 Arsitektur MVC

Ada tiga layer utama dalam arsitektur MVC, yaitu :

1. Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang membantu seseorang dalam pengelolaan basis data seperti memasukkan data ke basis data, pembaruan data dan lain-lain. 2. View adalah bagian yang mengatur tampilan ke pengguna. Bisa di

katakan berupa halaman web atau dalam pemrograman kita kenal dengan halaman tempat interaksi antara manusia dan komputer (User Interface).

3.

4. Controller merupakan bagian yang menjembatani model dan view.

Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web.

Untuk memahami metode pengembangan aplikasi menggunakan arsitektur MVC diperlukan pengetahuan tentang pemrograman berorientasi objek (Object Oriented Programming).

2.1 Model

Pola arsitektur MVC memiliki layer yang disebut dengan Model yang merepresentasikan data yang digunakan oleh aplikasi sebagaimana proses bisnis yang diasosiasikan terhadapnya. Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang membantu seseorang dalam pengelolaan basis data seperti memasukkan data ke basis data, pembaruan data dan lain-lain. Dengan memilahnya sebagai bagian

terpisah, seperti penampungan data, serta proses manipulasi, terpisah dari bagian lain aplikasi terdapat beberapa kelebihan yang didapatkan antara lain:

 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 maintenance aplikasi.

 Kedua, dengan pemisahan total antara data dengan implementasi

interface, komponen model dapat digunakan kembali oleh aplikasi lain yang memiliki kegunaan yang hampir sama.

Setiap kali method / function dari suatu aplikasi butuh untuk melakukan akses ke dalam suatu data, maka function / method tersebut tidak langsung berinteaksi dengan sumber data tersebut melainkan harus melalui model terlebih dahulu. Dalam hal ini hanya model yang diijinkan untuk berinteraksi langsung dengan sumber data. Secara singkat, layer

model ini menangani content dari aplikasi.

2.2 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 user, hanya View. Sebisa mungkin, didalam View tidak berisi logika-logika kode tetapi hanya berisi variabel-variabel yang berisi data yang siap ditampilkan. Di dalam view

jangan pernah ada kode untuk melakukan koneksi ke basis data. View hanya dikhususkan untuk menampilkan data-data hasil dari model dan

controller.

Penggunaan layer View memiliki beberapa kelebihan :

 Pertama, memudahkan pengabungan divisi desain dalam

development team. Divisi desain dapat berkonsentrasi pada style, look & feel, dan sebagainya, dalam aplikasi tanpa harus memperhatikan lebih pada detail yang lain.

 Kedua, 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.

2.3 Controller

Layer ini menyediakan detail alur program dan transisi layer, dan juga bertanggung jawab akan penampungan events yang dibuat oleh user dari

View dan melakukan update terhadap komponen Model menggunakan data yang dimasukkan oleh user.

process dari aplikasi yang dibangun. Controller akan merespon setiap inputan dari user dengan melakukan pemanggilan terhadap model dan

view yang sesuai sehingga request / permintaan dari user tersebut dapat terpenuhi dengan baik. Biasanya layer controller juga digunakan untuk mengatur ijin akses dan permission.

Controller merupakan penghubung antara Model dan View. Didalam

Controller inilah terdapat class dan fungsi-fungsi yang memproses permintaan dari View ke dalam struktur data di dalam Model. Controller

juga tidak boleh berisi kode untuk mengakses basis data. Tugas controller

adalah menyediakan berbagai variabel yang akan ditampilkan di view, memanggil model untuk melakukan akses ke basis data, menyediakan penanganan error, mengerjakan proses logika dari aplikasi serta melakukan validasi atau cek terhadap input.

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 logic dengan business logic.

3. Kelebihan dan Kekurangan Arsitektur MVC

3.1 Kelebihan Arsitektur MVC

Tujuan utama dari pola desain arsitektur MVC adalah pemisahan antara

business logic (proses bisnis) dengan view (tampilan). Model arsitektur ini akan memberikan perlindungan antara view yang menampilkan data di antarmuka pengguna dari bagaimana data tersebut sebenarnya diproses. Berikut beberapa keuntungan jika kita menggunakan konsep arsitektur MVC dalam membangun aplikasi:

 Ketika kita menggunakan arsitektur MVC akan memisahkan user interface dari logika bisnis, logika bisnis dari logika akses data. Jadi arsitektur MVC akan meningkatkan fleksibilitas, pemeliharaan dan skalabilitas.

 Keuntungan lain dari arsitektur MVC adalah penggunaan kembali (re-usable) komponen. Sebagai contoh jika kita ingin mengembangkan antarmuka pengguna berbasis dekstop dari pada antarmuka berbasis web browser, yang sudah lebih dahulu dikembangkan, dengan cara yang mudah dan cepat kita hanya

mengganti komponen UI. Semua komponen lain seperti akses logika bisnis, akses data dan model database tetap sama. Arsitektur berlapis memungkinkan untuk swap dan menggunakan kembali komponen sesuka hati.

 Arsitektur MVC akan membantu kita kerja lebih mudah dalam bentuk tim (team work) yang membutuhkan pembagian kerja yang jelas dan bisa meminimalkan ketergantungan antar anggota tim.

 Arsitektur MVC model memudahkan kita dalam me-maintain dan pengembangan aplikasi.

 Dalam Arsitektur MVC kita dapat membuat komponen yang berbeda dari aplikasi yang dapat kita kembangkan sendiri meskipun saat ini belum digunakan.

 Arsitektur MVC juga memungkinkan untuk mengkonfigurasi

berbagai tingkat keamanan untuk komponen yang berbeda. Jadi Arsitektur MVC membantu kita untuk mengamankan bagian komponen tertentu dan membuat komponen lainnya dapat diakses dari Internet.

 Arsitektur MVC juga membantu kita untuk menguji komponen secara bebas tidak tergantung dari kelas lain.

3.1 Kekurangan Arsitektur MVC

Berikut beberapa kekurangan jika kita menggunakan konsep arsitektur MVC dalam membangun aplikasi:

 Banyak layer yang dirancang sehingga akan menurunkan kemampuan aplikasi yang dirancang. Dalam hal ini pengaksesan data dalam layer view tidak efisien, karena harus melewati layer

controller dan layer model.

 Pengembangan aplikasi akan lebih lama karena banyak layer yang harus dibuat.

 Kompleksitas kode semakin tinggi, sehingga tidak cocok untuk aplikasi yang sederhana.

 Memungkinkan akan membutuhkan lebih banyak programmer.  Pengetahuan terhadap beberapa teknologi sangat dibutuhkan.

4. Arsitektur MVC pada Aplikasi

4.1 Aplikasi dekstop

Dalam aplikasi dekstop, arsitektur MVC akan menempatkan model, view

dan controller dalam satu komputer yang sama dengan pengguna. Aplikasi yang dirancang akan lebih mudah diimplementasikan. Secara umum konsep arsitektur MVC akan berjalan lancar jika diterapkan, hanya akan muncul kekurangan yang sama dengan kekurangan yang ada pada aplikasi dekstop secara umum jika dibandingkan dengan aplikasi web.

4.2 Aplikasi web

1. Server Side MVC, biasa terjadi pada aplikasi web tradisional, yang tidak melibatkan client side seperti Javascript, Java applet, flash dan lain-lain. Server Side MVC menyerahkan keseluruhan proses bisnis pada server, aplikasi pada sisi pengguna hanya dapat menerima. MVC jenis ini kadang-kadang disebut juga dengan nama thin client.

Gambar 11.4 Arsitektur Server-side MVC

2. Mixed Client Side and Server Side MVC, Pada Mixed Client Side and Server Side MVC 1 client menggunakan controller seperti Javascript, Java applet, flash dan lain-lain. Arsitektur ini memiliki tingkat kompleksitas yang lebih tinggi karena lebih banyak komponen yang terlibat. Untuk selanjutnya arsitektur ini disebut, dengan Mixed MVC 1.

Gambar 11.5 Arsitektur Mixed Client dan Server-side MVC

Pada Mixed Client Side and Server Side MVC 2, client menggunakan model sebagai jembatan untuk melakukan komunikasi pada server, dibandingkan dengan arsitektur MVC yang lain, arsitektur ini

memiliki tingkat kompleksitas yang paling tinggi karena lebih banyak komponen yang terlibat, sehingga membutuhkan sumber daya yang lebih besar pula. Untuk selanjutnya arsitektur ini disebut dengan Mixed MVC 2.

Gambar 11.6 Arsitektur Mixed MVC 2

Gambar 11.7 Arsitektur RIA MVC

REFERENSI

Wikipedia (http:// wikipedia . org / wiki/Model-View-Controller)

J. Deitel, Paul. 2007, Java How To Program, 6th Edition, Prentice Hall.

Matt Zandstra, 2010, PHP Objects, Patters and Practice, 3rd Edition, Apress.

PROPAGASI

A. Latihan dan Diskusi (Propagasi Vertikal dan Horizontal) 1. Jelaskan konsep arsitektur MVC.

2. Untuk menguasai konsep arsitektur MVC sangat dibutuhkan pemahaman tentang konsep pemodelan berorientasi objek. Jelaskan.

3. Apa keuntungan dan kekurangan jika perancangan aplikasi menggunakan model arsitektur MVC.

4. Apa yang membedakan penerapan model arsitektur MVC pada aplikasi dekstop dan aplikasi web.

5. Jelaskan beberapa jenis model arsitektur MVC pada web.

B. Tugas (Evaluasi mandiri)