Bagian 7. Memperkenalkan pola MVC (Model-View-Controller).

Materi ini merupakan bagian dari seri "Pengantar Pengembangan Usaha". Artikel sebelumnya:

• tentang jaringan
• tentang arsitektur perangkat lunak
• tentang HTTP/HTTPS
• tentang dasar-dasar Maven
• tentang servlet (menulis aplikasi web sederhana)
• tentang wadah servlet

Pada artikel ini kita akan mengenal sesuatu yang disebut MVC. Kita akan berbicara tentang apa itu MVC, menyentuh sejarahnya, menjelajahi ide dan konsep dasar yang terkandung dalam MVC, melihat langkah demi langkah cara memecah aplikasi menjadi modul Model, View, dan Controller, menulis sebuah aplikasi web kecil menggunakan Spring Boot, dan, menggunakan Spring MVC sebagai contoh, lihat bagaimana data dikirim dari kode Java ke halaman HTML. Untuk memahami materi ini, Anda perlu mengenal pola desain, terutama pola pengamat dan fasad. Dan kenali permintaan dan respons HTTP, pahami dasar-dasar HTML, dan ketahui apa itu anotasi Java. Ambil secangkir kopi dan makanan ringan, dan merasa nyaman. Mari kita mulai.

Sejarah MVC

Ide dibalik MVC dirumuskan oleh Trygve Reenskaug saat bekerja di Xerox PARC pada akhir 1970-an. Pada masa itu, bekerja dengan komputer membutuhkan gelar dan studi terus-menerus tentang dokumentasi yang banyak. Tugas yang diselesaikan oleh Reenskaug bersama dengan sekelompok pengembang yang sangat kuat adalah menyederhanakan interaksi pengguna biasa dengan komputer. Itu perlu untuk membuat alat yang, di satu sisi, akan sangat sederhana dan mudah dipahami, dan di sisi lain, memungkinkan untuk mengontrol komputer dan aplikasi yang kompleks. Reenskaug bekerja dalam tim yang mengembangkan komputer laptop "untuk anak-anak segala usia" — Dynabook, serta bahasa SmallTalk di bawah kepemimpinan Alan Kay. Saat itulah konsep antarmuka yang ramah diletakkan. Dengan segala hormat, pekerjaan yang dilakukan oleh Reenskaug dan timnya memengaruhi evolusi bidang TI. Berikut adalah fakta menarik yang tidak berlaku untuk MVC secara langsung, tetapi mengilustrasikan pentingnya perkembangan ini. Alan Kaydikatakan, "Ketika saya pertama kali masuk ke Apple, yaitu pada tahun '84, Mac sudah keluar dan Newsweek menghubungi saya dan menanyakan pendapat saya tentang Mac. Saya berkata, 'Yah, Mac adalah komputer pribadi pertama yang cukup baik untuk dikritik.' Jadi, setelah mengumumkan iPhone pada tahun 2007, dia membawanya ke saya dan menyerahkannya kepada saya. Dia berkata, 'Alan, apakah ini cukup bagus untuk dikritik?' Dan saya berkata, 'Steve, jadikan ini sebesar tablet dan Anda akan menguasai dunia.'" Setelah 3 tahun, pada 27 Januari 2010, Apple memperkenalkan iPad dengan diagonal 9,7 inci. Dengan kata lain, Steve Jobs mengikuti nasihat Alan Kay hampir persis. Proyek Reenskaug berlangsung selama 10 tahun. Tetapi publikasi pertama tentang MVC terungkap setelah 10 tahun berikutnya. Martin Fowler, penulis beberapa buku dan artikel tentang arsitektur perangkat lunak, menyebutkan bahwa dia mempelajari MVC menggunakan versi kerja Smalltalk. Karena sudah lama tidak ada informasi tentang MVC dari sumber aslinya, dan karena beberapa alasan lain, banyak interpretasi berbeda dari konsep ini muncul. Akibatnya, banyak yang menganggap MVC sebagai pola desain. Lebih jarang, MVC disebut pola komposit atau kombinasi dari beberapa pola yang bekerja sama untuk membuat aplikasi yang kompleks. Namun, seperti yang disebutkan sebelumnya, MVC sebenarnya adalah sekumpulan ide/prinsip/pendekatan arsitektural yang dapat diimplementasikan dengan berbagai cara menggunakan pola yang berbeda... Selanjutnya, kita akan mempertimbangkan ide utama yang disematkan dalam konsep MVC. dan karena beberapa alasan lain, sejumlah besar interpretasi berbeda dari konsep ini muncul. Akibatnya, banyak yang menganggap MVC sebagai pola desain. Lebih jarang, MVC disebut pola komposit atau kombinasi dari beberapa pola yang bekerja sama untuk membuat aplikasi yang kompleks. Namun, seperti yang disebutkan sebelumnya, MVC sebenarnya adalah sekumpulan ide/prinsip/pendekatan arsitektural yang dapat diimplementasikan dengan berbagai cara menggunakan pola yang berbeda... Selanjutnya, kita akan mempertimbangkan ide utama yang disematkan dalam konsep MVC. dan karena beberapa alasan lain, sejumlah besar interpretasi berbeda dari konsep ini muncul. Akibatnya, banyak yang menganggap MVC sebagai pola desain. Lebih jarang, MVC disebut pola komposit atau kombinasi dari beberapa pola yang bekerja sama untuk membuat aplikasi yang kompleks. Namun, seperti yang disebutkan sebelumnya, MVC sebenarnya adalah sekumpulan ide/prinsip/pendekatan arsitektural yang dapat diimplementasikan dengan berbagai cara menggunakan pola yang berbeda... Selanjutnya, kita akan mempertimbangkan ide utama yang disematkan dalam konsep MVC.

MVC: Ide dan prinsip dasar

• VC adalah seperangkat ide dan prinsip arsitektur untuk membangun sistem informasi yang kompleks dengan antarmuka pengguna
• MVC adalah singkatan dari: Model-View-Controller

Penafian: MVC bukan pola desain. MVC adalah seperangkat ide dan prinsip arsitektur untuk membangun sistem yang kompleks dengan antarmuka pengguna. Tetapi untuk kenyamanan, agar tidak berulang kali mengatakan "seperangkat ide arsitektur ...", kami akan merujuk ke pola MVC. Mari kita mulai dengan yang sederhana. Apa yang tersembunyi di balik kata Model-View-Controller? Saat menggunakan pola MVC untuk mengembangkan sistem dengan antarmuka pengguna, Anda perlu membagi sistem menjadi tiga komponen. Mereka juga bisa disebut modul atau komponen. Sebut mereka sesuka Anda, tetapi bagi sistem menjadi tiga komponen. Setiap komponen memiliki tujuannya masing-masing. Model. Komponen/modul pertama disebut model. Ini berisi semua logika bisnis aplikasi. Melihat.Bagian kedua dari sistem adalah tampilan. Modul ini bertanggung jawab untuk menampilkan data kepada pengguna. Segala sesuatu yang dilihat pengguna dihasilkan oleh tampilan. Pengontrol.Tautan ketiga dalam rantai ini adalah pengontrol. Ini berisi kode yang bertanggung jawab untuk menangani tindakan pengguna (semua tindakan pengguna ditangani di controller). Model adalah bagian paling independen dari sistem. Sangat independen sehingga tidak tahu apa-apa tentang modul view dan controller. Model ini sangat independen sehingga pengembangnya mungkin tidak tahu apa-apa tentang tampilan dan pengontrol. Tujuan utama dari view adalah untuk memberikan informasi dari model dalam format yang dapat digunakan oleh pengguna. Keterbatasan utama tampilan adalah tidak boleh mengubah model dengan cara apa pun. Tujuan utama pengontrol adalah untuk menangani tindakan pengguna. Melalui pengontrollah pengguna membuat perubahan pada model. Atau lebih tepatnya, ke data yang disimpan dalam model. Inilah diagram yang Anda lihat sebelumnya dalam pelajaran: Dari semua ini, kita bisa menarik kesimpulan logis. Sistem yang kompleks perlu dibagi menjadi beberapa modul. Mari kita uraikan secara singkat langkah-langkah untuk mencapai pemisahan ini.

Langkah 1. Pisahkan logika bisnis aplikasi dari antarmuka pengguna

Gagasan utama MVC adalah bahwa aplikasi apa pun dengan antarmuka pengguna dapat dibagi menjadi 2 modul: modul yang bertanggung jawab untuk mengimplementasikan logika bisnis, dan antarmuka pengguna. Modul pertama akan mengimplementasikan fungsionalitas utama aplikasi. Modul ini adalah inti dari sistem, dimana model domain aplikasi diimplementasikan. Dalam paradigma MVC, modul ini adalah huruf M, yaitu modelnya. Modul kedua mengimplementasikan seluruh antarmuka pengguna, termasuk logika untuk menampilkan data ke pengguna dan menangani interaksi pengguna dengan aplikasi. Tujuan utama dari pemisahan ini adalah untuk memastikan bahwa inti dari sistem ("model" dalam terminologi MVC) dapat dikembangkan dan diuji secara independen. Setelah melakukan pemisahan ini, arsitektur aplikasi terlihat seperti ini:

Langkah 2 Gunakan pola pengamat untuk membuat model lebih mandiri dan menyinkronkan antarmuka pengguna

Di sini kami memiliki 2 tujuan:

1. Mencapai kemandirian yang lebih besar untuk model
2. Sinkronkan antarmuka pengguna

Contoh berikut akan membantu Anda memahami apa yang kami maksud dengan sinkronisasi antarmuka pengguna. Misalkan kita sedang membeli tiket bioskop secara online dan melihat jumlah kursi yang tersedia di bioskop tersebut. Pada saat yang sama, orang lain mungkin membeli tiket bioskop. Jika orang lain ini membeli tiket sebelum kami, kami ingin melihat penurunan jumlah kursi yang tersedia untuk waktu pertunjukan yang sedang kami pertimbangkan. Sekarang mari kita pikirkan bagaimana hal ini dapat diimplementasikan dalam sebuah program. Misalkan kita memiliki inti sistem (model kita) dan antarmuka (halaman web untuk membeli tiket). Dua pengguna mencoba memilih tempat duduk di teater secara bersamaan. Pengguna pertama membeli tiket. Halaman web harus menunjukkan kepada pengguna kedua bahwa ini telah terjadi. Bagaimana ini bisa terjadi? Jika kami memperbarui antarmuka dari inti, maka inti (model kita) akan bergantung pada antarmuka. Saat kami mengembangkan dan menguji model, kami harus mengingat berbagai cara memperbarui antarmuka. Untuk mencapai ini, kita perlu menerapkan pola pengamat. Pola ini memungkinkan model mengirim notifikasi perubahan ke semua pendengar. Sebagai pendengar acara (atau pengamat), antarmuka pengguna menerima pemberitahuan dan diperbarui. Di satu sisi, pola pengamat membiarkan model memberi tahu antarmuka (tampilan dan pengontrol) bahwa perubahan telah terjadi tanpa benar-benar mengetahui apa pun tentangnya, sehingga tetap independen. Di sisi lain, ini memungkinkan untuk menyinkronkan antarmuka pengguna. kita perlu menerapkan pola pengamat. Pola ini memungkinkan model mengirim notifikasi perubahan ke semua pendengar. Sebagai pendengar acara (atau pengamat), antarmuka pengguna menerima pemberitahuan dan diperbarui. Di satu sisi, pola pengamat membiarkan model memberi tahu antarmuka (tampilan dan pengontrol) bahwa perubahan telah terjadi tanpa benar-benar mengetahui apa pun tentangnya, sehingga tetap independen. Di sisi lain, ini memungkinkan untuk menyinkronkan antarmuka pengguna. kita perlu menerapkan pola pengamat. Pola ini memungkinkan model mengirim notifikasi perubahan ke semua pendengar. Sebagai pendengar acara (atau pengamat), antarmuka pengguna menerima pemberitahuan dan diperbarui. Di satu sisi, pola pengamat membiarkan model memberi tahu antarmuka (tampilan dan pengontrol) bahwa perubahan telah terjadi tanpa benar-benar mengetahui apa pun tentangnya, sehingga tetap independen. Di sisi lain, ini memungkinkan untuk menyinkronkan antarmuka pengguna.

Langkah 3 Pisahkan antarmuka menjadi view dan controller

Kami terus membagi aplikasi menjadi beberapa modul, tetapi sekarang berada di level yang lebih rendah dalam hierarki. Pada langkah ini, antarmuka pengguna (yang kami pisahkan menjadi modul berbeda pada langkah 1) dibagi menjadi tampilan dan pengontrol. Menggambar garis tegas antara tampilan dan pengontrol itu sulit. Jika kita mengatakan bahwa tampilan adalah apa yang dilihat pengguna, dan pengontrol adalah mekanisme yang memungkinkan pengguna berinteraksi dengan sistem, Anda mungkin menunjukkan kontradiksi. Elemen kontrol, seperti tombol di halaman web atau keyboard virtual di layar ponsel, pada dasarnya adalah bagian dari pengontrol. Tapi mereka terlihat oleh pengguna sebagai bagian dari tampilan. Apa yang sebenarnya kita bicarakan di sini adalah pemisahan fungsional. Tugas utama antarmuka pengguna adalah memfasilitasi interaksi pengguna dengan sistem.

• output dan dengan mudah menampilkan informasi sistem kepada pengguna
• masukkan data pengguna dan perintah (komunikasikan ke sistem)

Fungsi-fungsi ini menentukan bagaimana antarmuka pengguna harus dibagi menjadi beberapa modul. Pada akhirnya, arsitektur sistem terlihat seperti ini: Dan inilah cara kami sampai pada aplikasi yang terdiri dari tiga modul yang disebut model, tampilan, dan pengontrol. Mari kita rangkum:

1. Menurut prinsip paradigma MVC, suatu sistem harus dibagi menjadi beberapa modul.
2. Modul yang paling penting dan independen harus menjadi model.
3. Model adalah inti dari sistem. Harus dimungkinkan untuk mengembangkan dan mengujinya secara independen dari antarmuka pengguna.
4. Untuk mencapai ini, pada langkah pertama pembagian, kita perlu membagi sistem menjadi model dan antarmuka pengguna.
5. Kemudian, dengan menggunakan pola pengamat, kami memperkuat independensi model dan menyinkronkan antarmuka pengguna.
6. Langkah ketiga adalah membagi antarmuka pengguna menjadi pengontrol dan tampilan.
7. Semua yang diperlukan untuk menerima data pengguna ke dalam sistem ada di controller.
8. Semua yang diperlukan untuk menyampaikan informasi kepada pengguna ada di tampilan.

Satu hal lagi yang penting untuk didiskusikan sebelum Anda dapat meminum cokelat panas Anda.

Sedikit tentang bagaimana view dan controller berinteraksi dengan model

Dengan memasukkan informasi melalui pengontrol, pengguna mengubah model. Atau setidaknya, pengguna mengubah data model. Ketika pengguna menerima informasi melalui elemen antarmuka (melalui tampilan), pengguna menerima informasi tentang model. Bagaimana ini bisa terjadi? Dengan cara apa view dan controller berinteraksi dengan model? Lagi pula, kelas tampilan tidak dapat secara langsung memanggil metode kelas model untuk membaca/menulis data. Jika tidak, kita tidak dapat mengatakan bahwa model tersebut independen. Model adalah sekumpulan kelas yang terkait erat yang tidak boleh diakses oleh view maupun controller. Untuk menghubungkan model dengan view dan controller, kita perlu mengimplementasikan pola desain fasad. Fasad model adalah lapisan antara model dan antarmuka pengguna, di mana tampilan menerima data yang diformat dengan mudah, dan Pengontrol mengubah data dengan memanggil metode yang diperlukan pada fasad. Pada akhirnya, semuanya terlihat seperti ini:

MVC: Apa yang kita peroleh?

Tujuan utama paradigma MVC adalah memisahkan implementasi logika bisnis (model) dari visualisasinya (tampilan). Pemisahan ini meningkatkan kemungkinan penggunaan kembali kode. Manfaat MVC paling nyata ketika kita perlu menyajikan data yang sama dalam format yang berbeda. Misalnya sebagai tabel, grafik, atau bagan (menggunakan tampilan yang berbeda). Pada saat yang sama, tanpa memengaruhi penerapan tampilan, kami dapat mengubah cara kami menanggapi tindakan pengguna (klik tombol, entri data). Jika Anda mengikuti prinsip MVC, Anda dapat menyederhanakan pengembangan perangkat lunak, meningkatkan keterbacaan kode, dan meningkatkan ekstensibilitas dan pemeliharaan. Pada artikel terakhir di seri "Pengantar Pengembangan Perusahaan", kita akan melihat implementasi MVC yang dibangun menggunakan Spring MVC. Bagian 8. Mari menulis aplikasi kecil menggunakan Spring Boot