RSS
 

Belajar Java dengan Metode MVC

28 Sep

Belajar lebih menyenangkan apabila yang kita pelajari bisa kita bagi kepada yang lain :).  Sebenarnya metode MVC di java ini saya dapat belajar dari blog Mas Eko Kurniawan Khannedy, makasih ya mas semoga kebaikannya dibalas di dunia dan akherat. Saya sengaja membahas ulang di blog ini untuk mendapat pemahaman yang lebih mendalam dan bisa berbagi juga walaupun seadanya :)

Sebelumnya apasih 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.

Asik kan? Dengan MVC pengembangan dan perawatan aplikasi yang kita buat jadi lebih mudah :)

Bagian dari MVC

  1. Model, 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, View adalah bagian yang mengatur tampilan ke pengguna. Kalau dalam aplaikasi web, view bisa dikatakan berupa halaman web.
  3. Controller, Controller merupakan bagian yang menjembatani model dan view. Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web.

 

Dan untuk memahami metode pengembangan aplikasi menggunakan MVC diperlukan pengetahuan tentang pemrograman berorientasi objek (Object Oriented Programming). So, jangan lupa belajar OOP nya :)

Belajar java dengan metode mvc di blog saya ini adalah belajar melalui contoh. Aplikasi yang digunakan adalah NetBeans IDE 7.0.1 dan JDK 7. Kita mulai deh dengan contoh yang pertama :). Contoh yang pertama adalah contoh mvc pada form sederhana dengan submit dan reset.

Form Sederhana dengan button Submit dan Reset

Form Sederhana dengan button Submit dan Reset

Pertama, kita buat dulu view nya dengan membuat sebuah panel kita beri nama NameView.java dan design seperti di bawah ini:

Agar lebih rapih buat hirarki packages nya seperti ini:

Dalam view tersebut terdapat tiga buah jTextField dan dua buah jButton sebagai sarana interaksi penggunanya. Sekarang tinggal buat codenya untuk komponen-komponen tersebut agar bekerja dengan konsep MVC.

pertama kita buat getter untuk ketiga buah jTextField tersebut di dalam NameView.java:

    public JTextField getjTextFieldFirstName() {
        return jTextFieldFirstName;
    }

    public JTextField getjTextFieldLastName() {
        return jTextFieldLastName;
    }

    public JTextField getjTextFieldMiddleName() {
        return jTextFieldMiddleName;
    }

Langkah pertama sudah selesai, kita telah membuat view untuk form sederhana. Langkah selanjutnya kita buat modelnya.

Langkah kedua kita buat modelnya dengan membuat sebuah class dengan nama NameModel.java di dalam package sample1.model:

package sample1.model;

import javax.swing.JOptionPane;
import sample1.model.event.NameListener;

public class NameModel {
    private String FirstName;
    private String MiddleName;
    private String LastName;
    private NameListener nameListener;

    public NameListener getNameListener() {
        return nameListener;
    }

    public void setNameListener(NameListener nameListener) {
        this.nameListener = nameListener;
    }

    protected void fireOnChange(){
        if(nameListener!=null)
            nameListener.onChange(this);
    }

    public String getFirstName() {
        return FirstName;
    }

    public void setFirstName(String FirstName) {
        this.FirstName = FirstName;
        fireOnChange();
    }

    public String getLastName() {
        return LastName;
    }

    public void setLastName(String LastName) {
        this.LastName = LastName;
        fireOnChange();
    }

    public String getMiddleName() {
        return MiddleName;
    }

    public void setMiddleName(String MiddleName) {
        this.MiddleName = MiddleName;
        fireOnChange();
    }

    public void submitForm(){
        JOptionPane.showMessageDialog(null, "name success submited");
        resetForm();
    }

    public void resetForm(){
        setFirstName("");
        setMiddleName("");
        setLastName("");
    }
}

Di dalam model tersebut semua data yang dimasukan dianggap valid semua atau tidak perlu dilakukan pengecekan. Di dalam model ini kita buat juga sebuah listener dengan membuat sebuah interface baru dengan nama NameListener.java di dalam package sample1.model.evet:

package sample1.model.event;

import sample1.model.NameModel;

public interface NameListener {
    public void onChange(NameModel model);
}

Model sudah dibuat, sekarang kita tinggal buat controllernya. Buat sebuah class baru dengan nama NameController.java di dalam package sample1.controller:

package sample1.controller;

import javax.swing.JOptionPane;
import sample1.model.NameModel;
import sample1.view.NameView;

public class NameController {
    private NameModel model;

    public void setModel(NameModel model) {
        this.model = model;
    }

    public void resetForm(NameView view){
        String firstName = view.getjTextFieldFirstName().getText();
        String middleName = view.getjTextFieldMiddleName().getText();
        String lastName = view.getjTextFieldLastName().getText();

        if(firstName.equals("") && middleName.equals("") && lastName.equals("")){

        }else
            model.resetForm();
    }
    public void submitForm(NameView view){
        String firstName = view.getjTextFieldFirstName().getText();
        String middleName = view.getjTextFieldMiddleName().getText();
        String lastName = view.getjTextFieldLastName().getText();

        if(firstName.trim().equals(""))
            JOptionPane.showMessageDialog(view, "First Name is empty");
        else if(middleName.trim().equals(""))
            JOptionPane.showMessageDialog(view, "Middle Name is empty");
        else if(lastName.trim().equals(""))
            JOptionPane.showMessageDialog(view, "Last Name is empty");
        else
            model.submitForm();
    }
}

Seperti penjelasan di atas bahwa controller merupakan bagian yang menjembatani model dan view. Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data. Maka disinilah dilakukan proses pengecekan atau validasi data dari user sebelum diteruskan ke model.

Model, View, Controller sudah selesai kita buat. Sekarang tinggal bagaimana mengkomunikasikan ketiga kompunen tersebut agar dapat melakukan input, process dan output. Untuk menghubungkan ketiga komponen tersebut dilakukan di viewnya, NameView.java:

package sample1.view;

import javax.swing.JTextField;
import sample1.controller.NameController;
import sample1.model.NameModel;
import sample1.model.event.NameListener;

public class NameView extends javax.swing.JPanel implements NameListener {

    private NameModel model;
    private NameController controller;

    public JTextField getjTextFieldFirstName() {
        return jTextFieldFirstName;
    }

    public JTextField getjTextFieldLastName() {
        return jTextFieldLastName;
    }

    public JTextField getjTextFieldMiddleName() {
        return jTextFieldMiddleName;
    }

    /** Creates new form NameView */
    public NameView() {
        controller = new NameController();
        model = new NameModel();
        model.setNameListener(this);
        controller.setModel(model);

        initComponents();
    }

private void initComponents() {...}//</editor-fold>

private void jButtonResetActionPerformed(java.awt.event.ActionEvent evt) {
    controller.resetForm(this);
}

private void jButtonSubmitActionPerformed(java.awt.event.ActionEvent evt) {
    controller.submitForm(this);
}

    // Variables declaration - do not modify
    private javax.swing.JButton jButtonReset;
    private javax.swing.JButton jButtonSubmit;
    private javax.swing.JLabel jLabelFirstName;
    private javax.swing.JLabel jLabelLastName;
    private javax.swing.JLabel jLabelMiddleName;
    private javax.swing.JTextField jTextFieldFirstName;
    private javax.swing.JTextField jTextFieldLastName;
    private javax.swing.JTextField jTextFieldMiddleName;
    // End of variables declaration

    @Override
    public void onChange(NameModel model) {
        jTextFieldFirstName.setText(model.getFirstName());
        jTextFieldMiddleName.setText(model.getMiddleName());
        jTextFieldLastName.setText(model.getLastName());
    }
}

Pada NameView.java tersebut kita implementasikan interface NameListener.java dan melakukan override methode onChange:

public class NameView extends javax.swing.JPanel implements NameListener {

    @Override
    public void onChange(NameModel model) {
        jTextFieldFirstName.setText(model.getFirstName());
        jTextFieldMiddleName.setText(model.getMiddleName());
        jTextFieldLastName.setText(model.getLastName());
    }
}

Membuat variable private untuk NameModel dan NameController:

    private NameModel model;
    private NameController controller;

Membuat object baru untuk controller dan model pada konstraktor NameView(), kemudian memanggil methode model.setNameListener(this) dengan parameter this dan methode controller.setModel(model) dengan parameter model:

    public NameView() {
        controller = new NameController();
        model = new NameModel();
        model.setNameListener(this);
        controller.setModel(model);

        initComponents();
    }

Menambahkan event action performed untuk button reset dan submit:

private void jButtonResetActionPerformed(java.awt.event.ActionEvent evt) {
    controller.resetForm(this);
}

private void jButtonSubmitActionPerformed(java.awt.event.ActionEvent evt) {
    controller.submitForm(this);
}

Terkahir menjalankannya dengan membuat sebuah jFrame baru dengan nama NameRun.java. Lakukan drag and drop panel yang kita buat ke dalam jFrame tersebut.:

Selamat aplikasi form sederhana dengan MVC telah selesai kita buat. Jika ada yang ditanyakan atau saran untuk contoh pertama ini mohon comment di bawah, karena mungkin terlihat penjelasan MVC yang membingungkan dalam sebuah aplikasi form sederhana. Sourcecode project contoh aplikasi ini bisa di download di link berikut ini:

Download BelajarJavaDenganMVC1

Mohon maaf bila ada kesalahan dalam artikel ini.  Semoga artikel yang sederhana ini bermanfaat :)

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
 
 

Tags: , , ,

Leave a Reply

 

 
  1. glen fadly

    September 28, 2011 at 07:44

     
  2. ulfamizan

    October 6, 2011 at 11:28

    boleh minta ganti photonya gak mas??…