Model View Controller -...
-
Upload
truonghuong -
Category
Documents
-
view
268 -
download
0
Transcript of Model View Controller -...
![Page 1: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/1.jpg)
Model View Controller
Agi Putra Kharisma, S.T.,M.T.
![Page 2: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/2.jpg)
Architectural Pattern
• Konteks
• Latar Belakang
• Rumusan Masalah
• Solusi
![Page 3: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/3.jpg)
Konteks
• Aplikasi menampilkan data dari sumber data (misal: basis data) kepada pengguna melalui antarmuka pengguna.
• Pengguna memanipulasi data melalui antarmuka pengguna untuk dieksekusi di sumber data.
![Page 4: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/4.jpg)
Latar Belakang
• Data yang sama seringkali ditampilkan dalam format yang berbeda (misal: data daftar mahasiswa dalam format HTML, JSON, dan XML).
• Format/struktur data/antarmuka yang diberikan pada pengguna relatif sering berubah, akan tetapi struktur sumber data relatif jarang berubah.
• Merancang dan membuat antarmuka pengguna (misal: HTML) pada umumnya memerlukan keahlian khusus (misal: web designer).
![Page 5: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/5.jpg)
Rumusan Masalah
Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular) sehingga mudah dimodifikasi secara individual?
![Page 6: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/6.jpg)
Solusi: MVC
Model View Controller memisahkan antara pemodelan domain, presentasi, dan aksi pengguna menjadi 3 kelas, yaitu:
- Model adalah domain pada aplikasi yang dibuat, dia mengatur perilaku dan data pada domain aplikasi.
- View mengatur representasi suatu resource/informasi.
- Controller menerjemahkan masukan/permintaan/request dari pengguna/klien, kemudian memberi informasi atau instruksi tentang apa yang harus dilakukan oleh model atau view.
![Page 7: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/7.jpg)
![Page 8: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/8.jpg)
![Page 9: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/9.jpg)
1. The Event is intercepted by the Controller. 2. The Controller evaluates the event and maps it to the appropriate handler in the Model. 3. The Model carries out the action or state change, and the result is returned to the
Controller. 4. The Controller determines the appropriate View to be displayed, and causes the
application to forward to that View. 5. The View, when loading, may retrieve data from the Model through a data interface, but
it is unable to execute actions (such as a database call) directly. 6. The View is displayed to the user.
http://msdn.microsoft.com/en-us/library/aa478961.aspx
![Page 10: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/10.jpg)
MVC yang mana?
• Istilah MVC banyak dijumpai, dengan konsepnya yang cukup bervariasi.
• Jika dilihat dari sejarah, maka istilah MVC berasal dari seorang programmer bernama Trygve Reenskaug pada tahun 1970-an.
![Page 11: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/11.jpg)
Intinya adalah...?
• Kembali ke permasalahan yang ingin diselesaikan dengan MVC (lihat pada slide bagian awal).
• Tujuan utama bukan untuk menerapkan MVC secara ‘benar’, tetapi untuk menyelesaikan permasalahan yang seharusnya dapat diselesaikan oleh MVC.
• Jika masalah tersebut berhasil terselesaikan, SELESAI.
![Page 12: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/12.jpg)
Studi Kasus
• Lihat kembali aplikasi daftar mahasiswa pada bahasan array yang lalu.
• Modifikasi aplikasi tersebut menggunakan MVC.
• Tambahkan fitur berupa representasi JSON, sehingga user agent dapat memilih representasi HTML atau JSON.
![Page 13: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/13.jpg)
Alternatif MVC?
• MVP (Model View Presenter)
• MVVM (Model View ViewModel)
• MVA (Model View Adapter)
• HMVC (Hierarchical MVC)
• PAC (Presentation Abstraction Control)
• ...dsb
![Page 14: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/14.jpg)
FRAMEWORK
![Page 15: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/15.jpg)
Apa itu framework?
• Framework merupakan salah satu teknik reuse berorientasi objek.
• Framework merupakan perancangan sistem yang dapat digunakan kembali (reusable design) yang direpresentasikan dalam bentuk kelas abstrak dan bagaimana mekanisme instances kelas tersebut berinteraksi. Perancangan tersebut dapat mencakup sistem secara keseluruhan maupun sebagian saja.
• Framework merupakan kerangka (skeleton) dari suatu aplikasi yang dapat dikostumisasi oleh pengembang perangkat lunak.
- Fayad, Mohamed E, et al. Building Application Frameworks
![Page 16: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/16.jpg)
Kelebihan dan Kekurangan Framework
Kelebihan
• Modularitas
• Reusability
• Extensibility
• Inversion of Control, Hollywood Principle (“Don’t call us, we’ll call you”)
Kekurangan
• Learning curve
• Efisiensi
• Standarisasi
![Page 17: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/17.jpg)
https://code.google.com/p/maashaack/wiki/InversionOfControl
![Page 18: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/18.jpg)
http://www.sitepoint.com/best-php-frameworks-2014/
![Page 19: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/19.jpg)
Arsitektur Laravel
http://laravelbook.com/laravel-architecture/
![Page 20: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/20.jpg)
Struktur Direktori Projek Laravel
http://laravelbook.com/laravel-architecture/
![Page 21: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/21.jpg)
Latihan Mandiri
• Buat Framework PHP sederhana dengan mengikuti tutorial berikut ini:
Membangun Framework PHP Sederhana (oleh: Alex Xandra Albert Sim).
http://bertzzie.com/knowledge/framework-php/index.html
![Page 22: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/22.jpg)
http://bertzzie.com/knowledge/framework-php/index.html
![Page 23: Model View Controller - agipk.lecture.ub.ac.idagipk.lecture.ub.ac.id/files/2014/02/PW-20132014-09-MVC.pdf · Bagaimana membuat fungsionalitas antarmuka pengguna secara terpisah (modular)](https://reader031.fdocument.pub/reader031/viewer/2022012309/5c93028609d3f206488bd869/html5/thumbnails/23.jpg)
Next
• Javascript & AJAX
Bahan bacaan:
Javascript: Sebuah Pembedahan (oleh: Alex Xandra Albert Sim)
http://bertzzie.com/knowledge/javascript/index.html