MODUL 1 IMPLEMENTASI MODEL VIEW CONTROLLER CONTROL (MVC) DESIGN PATTERN
Design Pattern dapat didefinisikan : -
Setiap pola yang menggambarkan permasalahan yang terjadi secara berulang, berulang serta menjelaskan cara utama penyelesaian permasalahan tersebut dengan langkah tertentu yang dapat digunakan secara berulang pula.
-
Menggambarkan komunikasi antara object dan class dengan cara 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 data (data access) dengan logika bisnis (business logic). Secara lebih detail, MVC dibagi menjadi 3 komponen yaitu y : •
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 data dari model berubah, view harus meng-update 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
:
o
Create Main Class
: De-select <jangan di pilih>
o
Set as Main Project
: Select
o
Use Dedicated Folder for Storing Libraries : Select
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 list; private InfoModel infoModel; public InfoController() { list = new ArrayList(); 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
JTextField
jTextField2
txtWeather
JButton
jButton2
btnWeather
Weather
Update Weather
Sehingga tampak seperti gambar berikut
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
