MODUL 1 IMPLEMENTASI MODEL VIEW CONTROLLER (MVC) DESIGN PATTERN Design Pattern dapat didefinisikan : - Setiap pola yang menggambarkan permasalahan yang terjadi secara berulang, serta menjelaskan cara utama penyelesaian permasalahan tersebut dengan langkah tertentu yang dapat digunakan secara berulang pula. - Menggambarkan komunikasi antara object dan class dengan caraa tertentu sebagai rancangan untuk menyelesaikan permasalahan secara umum. Model View Controller (MVC) pertama kali diperkenalkan oleh Trygve Reenskaug, pengembang software Smalltalk pada Xerox Palo Alto Research Center pada tahun 1979. Konsep ini membantu memisahkan antara akses dataa (data access) dengan logika bisnis (business logic). Secara lebih detail, MVC dibagi menjadi 3 komponen yaitu : Model Model mewakili data dan aturan yang berkaitan dengan akses dan perubahan terhadap data. View View menerjemahkan isi dari model. View mendefinisikan bagaimana data dari model akan ditampilkan. Jika dataa dari model berubah, view harus meng-update tampilan yang dibutuhkan. Hal tersebut dalam dilakukan dengan menggunakan (1) push model yang mana view mendaftarkan dirinya kepada model untuk mendapatkan notifikasi perubahan data,
atau (2) pull model yang mana view bertanggung jawab memanggil model ketika butuh mengambil data terbaru. Controller Controller menerjemahkan interaksi pengguna (user) dengan view ke dalam aksi yang terhadap model. Dalam aplikasi client GUI, interaksi pengguna dapat berbentuk antara lain klik pada button atau pemilihan menu, sedangkan dalam aplikasi web, dapat berupa request HTTP GET atau HTTP POST.. Latihan 1 Pada latihan pertama ini akan dibuat sebuah aplikasi sederhana yang digunakan untuk menampilkan dan mengupdate pesan dan info weather. Aplikasi ini memiliki 1 tampilan/1 view yang digunakan untuk mengupdate dan menampilkan info weather dan pesan weather. 1. Jalankan netbeans 6.8 2. Buat Project Baru -> Java Application o Project name : InfoTool o Project Location : <tentukan sendiri> o Create Main Class : De-select <jangan di pilih> o Set as Main Project : Select <pilih> o Use Dedicated Folder for Storing Libraries : Select<pilih> Klik Finish
3. Buat package baru dengan nama InfoTool, 4. Dalam project InfoTool buat package baru dengan nama InfoTool kemudian buatlah 1 buah kelas dengan nama InfoModel 5. Lengkapi kode program InfoModel.java agar sama dengan kode program berikut berikut public class InfoModel { private String message; private String weather; public InfoModel(String message, String weather) { this.message = message; this.weather = weather; public String getmessage() { return message; public void setmessage(string message) { this.message = message; public String getweather() { return weather; public void setweather(string weather) { this.weather = weather;
6. Buatlah 1 buah kelas dengan nama InfoController, kelas ini nantinya untuk menangani interarksi yang diberikan oleh pengguna yaitu mengupdate model dan mengupdate view. public class InfoController { private List<InfoView> list; private InfoModel infomodel; public InfoController() { list = new ArrayList<InfoView>(); infomodel = new InfoModel("Dingiiiin", "Ujan derez"); public void addinfoview(infoview viewinfo) { list.add(viewinfo); public void updatemessage(string message) { infomodel.setmessage(message); for (InfoView infoview : list) { infoview.getlblmessage().settext("message : " + message); public void updateweather(string weather) { infomodel.setweather(weather); for (InfoView infoview : list) { infoview.getlblweather().settext("weather : " + weather); public String getweather() { return infomodel.getweather(); public String getmessage() { return infomodel.getmessage();
7. Buatlah 1 buah JFrame lagi untuk mengupdate pesan dan menampilkan pesan, beri nama InfoView 8. Atur agar layout dari InfoView ini adalah BorderLayout, kemudian tambahkan 2 buah JPanel, jika dilihat dari Inspector tampak seperti berikut 9. Atur agar jpanel1 dan jpanel2 layoutnya menjadi FlowLayout 10. Tambahkan 1 buah JLabel, 1 buah JTextField dan 1 buah JButton pada JPanel2, tambahkan pula 1 buah JLabel, 1 buah JTextfield dan 1 buah JButton pada JPanel1
11. Apabila dilihat dari Inspector tampak seperti berikut 12. Ubah variable name dan text sesuai table berikut Komponen Variabel Name yang lama Variabel Name yang baru Text JLabel jlabel1 lblmessage Message JTextField jtextfield1 txtmessage JButton jbutton1 btnmessage Update Message JLabel jlabel2 lblweather Weather JTextField jtextfield2 txtweather JButton jbutton2 btnweather Update Sehingga tampak seperti gambar berikut Weather
13. Apabila dilihat dari inspector tampak seperti gambar berikut 14. Ubah ukuran dari txtweather dan txtmessage, width menjadi 120 dan height menjadi 20 sehingga tampilan menjadi berikut 15. Tambahkan kode program yang dicetak tebal mengikuti posisi seperti contoh berikut ini // Variables declaration - do not modify private javax.swing.jbutton btnmessage; private javax.swing.jbutton btnweather; private javax.swing.jpanel jpanel1; private javax.swing.jpanel jpanel2; private javax.swing.jlabel lblmessage; private javax.swing.jlabel lblweather; private javax.swing.jtextfield txtmessage; private javax.swing.jtextfield txtweather; // End of variables declaration public JLabel getlblmessage() { return lblmessage; public JLabel getlblweather() { return lblweather;
16. Tambahkan kode program yang dicetak tebal mengikuti posisi seperti contoh berikut ini private InfoController infocontroller; /** Creates new form InfoViewAdmin */ public InfoViewAdmin() { initcomponents(); public void setinfocontroller(infocontroller infocontroller) { this.infocontroller = infocontroller; 17. Berikan event pada btnmessage dengan cara klik kanan Events Action actionperformed 18. Tuliskan kode program yang ditebali private void btnmessageactionperformed(java.awt.event.actionevent evt) { // TODO add your handling code here: infocontroller.updatemessage(txtmessage.gettext()); 19. Tambahkan kode program yang ditebali pada kelas Main.java anda public class Main { /** * @param args the command line arguments */ public static void main(string[] args) { // TODO code application logic here InfoView infoview1=new InfoView(); infoview1.setvisible(true); InfoView infoview2=new InfoView(); infoview2.setvisible(true); InfoController infocontroller=new InfoController(); infocontroller.addinfoview(infoview1); infocontroller.addinfoview(infoview2); infoview1.setinfocontroller(infocontroller); infoview2.setinfocontroller(infocontroller);
20. Silahkan anda jalankan program, maka akan muncul 2 form 21. Silahkan anda ketik Udaranya dingin atau pesan apapun kemudian anda klik Update Message