Pengantar Arsitektur MVC: Contoh Dijelaskan

Arsitektur Model-View-Controller (MVC) adalah salah satu pola pengembangan perangkat lunak yang paling populer. Logika di balik arsitektur MVC menggunakan prinsip desain pemisahan masalah. Prinsip ini bertujuan untuk memisahkan aplikasi menjadi bagian distrik, di mana setiap bagian membahas masalah yang spesifik dan terpisah.

Arsitektur MVC mengikuti prinsip pemisahan perhatian ke surat. Faktanya, setiap huruf dalam akronim MVC mewakili bagian penting dari aplikasi Anda. Artikel ini mengeksplorasi setiap bagian arsitektur MVC secara rinci dan menunjukkan cara menggunakannya untuk mengembangkan perangkat lunak.

Apa Modelnya?

Model arsitektur MVC adalah komponen utama dari pola desain. Ini karena model aplikasi Anda menyimpan logika data. Model menentukan bagaimana Anda menyimpan dan mengambil data Anda.

Untuk aplikasi yang menggunakan arsitektur pengontrol MVC, data merupakan komponen penting dari operasinya.

Apa Pemandangannya?

Tampilan arsitektur MVC adalah antarmuka pengguna (UI) aplikasi Anda. UI adalah apa yang dilihat pengguna di perangkat mereka saat mereka berinteraksi dengan program Anda. Status View bergantung pada data yang disimpan menggunakan model.

Apa itu Pengendali?

Anda dapat menganggap Controller sebagai jembatan antara komponen Model dan View.

Saat pengguna memasok data melalui antarmuka pengguna Anda (Tampilan), Tampilan meneruskan data tersebut ke Pengontrol. Controller menggunakan data tersebut untuk memperbarui database (melalui Model). Controller juga menarik data dari database (melalui Model) dan mengembalikannya ke View.

Selain sebagai saluran data, Controller juga merupakan otak dari operasi tersebut. Ini memutuskan operasi apa yang harus dilakukan pada data mana, dan data apa yang akan dikembalikan ke UI.

Bagaimana Semuanya Bisa Bersatu?

Arsitektur MVC menciptakan loop semi-tertutup yang bergantung pada semua komponen untuk berfungsi secara memadai. Ilustrasi berikut menunjukkan bagaimana arsitektur MVC beroperasi.

Seperti yang Anda lihat dari ilustrasi di atas, aplikasi MVC menerima input data awal dari pengguna melalui UI. Kemudian aplikasi meneruskan data tersebut melalui berbagai komponen arsitektur MVC, dan dalam beberapa kasus, memanipulasi data tersebut dalam komponen Controller.

Menerapkan Arsitektur MVC

Katakanlah Anda sedang mengembangkan aplikasi untuk pompa bensin yang ingin membuat catatan semua gas yang dijual di pompa bensin dan membantu petugas pengisian bahan bakar dengan perhitungan harga. Menggunakan arsitektur MVC, Anda akan mulai dengan Model, kemudian beralih ke Controller, dan setelah Anda mengetahui semua logika aplikasi Anda, Anda dapat mengimplementasikan View.

Saat membuat model untuk aplikasi Anda, Anda harus mengetahui jenis data yang ingin Anda simpan, bagaimana Anda ingin menyimpan data tersebut, dan seberapa mudah diaksesnya data tersebut.

Membuat Model Aplikasi

//Perpustakaan Java
impor java.io. Serialisasi;
publikkelas GasHargaModel mengimplementasikan Serializable{
 //attributes
pribadistatisterakhirpanjangserialVersionUID = 1L;
pribadi Nama driver string;
pribadimengambang jumlah gas;
pribadi String tipe gas;
pribadimengambang biaya;
// konstruktor default
publik ModelHargaGas() {
ini.namapengemudi = "";
ini.gasJumlah = 0.00f;
ini.gasType = "";
ini.biaya = 0.00f;
 }
 //konstruktor utama
publik GasPriceModel (Nama driver String, mengambang gasJumlah, String gasType, mengambang biaya) {
ini.driverName = namapengemudi;
ini.gasAmount = jumlah gas;
ini.gasTipe = gasTipe;
ini.biaya = biaya;
 }
 //getter dan setter yang mengambil dan memanipulasi data
publik String getDriverName() {
kembali nama pengemudi;
 }
publikruang kosong setDriverName (String driverName) {
ini.driverName = namapengemudi;
 }
publikmengambang getGasAmount() {
kembali jumlah gas;
 }
publikruang kosong setGasJumlah(mengambang jumlah gas) {
ini.gasAmount = jumlah gas;
 }
publik String getGasType() {
kembali jenis gas;
 }
publikruang kosong setGasType (String gasType) {
ini.gasTipe = gasTipe;
 }
publikmengambang dapatkanBiaya() {
kembali biaya;
 }
publikruang kosong setBiaya(mengambang biaya) {
ini.biaya = biaya;
 }
}

Ada beberapa hal penting yang harus diidentifikasi dalam kode Model di atas. Yang pertama adalah mengimplementasikan antarmuka Serializable. Antarmuka ini memungkinkan Anda untuk menyimpan status setiap objek yang dibuat menggunakan GasHargaModel kelas dengan mengubahnya menjadi aliran byte. Menerapkan antarmuka Serializable berarti Anda juga perlu membuat ID versi, yang dilakukan oleh atribut pertama di kelas di atas.

Terkait: Pelajari Cara Membuat Kelas di Java Empat atribut lainnya dalam GasHargaModel class sama pentingnya karena mereka memberi tahu Anda siapa yang akan mengakses data yang akan dibuat model ini. Ini juga memberi tahu Anda jenis data apa yang akan disimpan model (string dan float).

Membuat Pengontrol Aplikasi

//Perpustakaan Jawa
impor java.io. Mengajukan;
impor java.io. FileNotFoundException;
impor java.io. FileOutputStream;
impor java.io. IOException;
impor java.io. ObyekOutputStream;
publikkelas Pengontrol Harga Gas {
 //menghitung biaya gas pelanggan dan mengembalikannya
publikmengambang menghitungBiaya(mengambang jumlah, String tipe gas){
mengambang biaya = 0,00 f;
terakhirmengambang solarHarga = 4.925f;
terakhirmengambang harga premium = 5.002f;
terakhirmengambang harga reguler = 4.680f;
jika (gasType == "Diesel")
 biaya = jumlah * harga solar;
jika (gasType == "Premium")
 biaya = jumlah * harga premium;
jika (gasType == "Biasa")
 biaya = jumlah * harga reguler;
kembali biaya;
 }
//menyimpan data dari setiap penjualan ke file menggunakan model
publikboolean simpanEntry (data ModelHargaGas){
mencoba {
FileOutputStream fs = baru FileOutputStream(baru File("data.dat"), benar);
 ObjectOutputStream os = baru ObjectOutputStream (fs);
 os.writeObject (data);
 os.flush();
 os.close();
kembalibenar;
 } menangkap (FileNotFoundException e) {
 e.printStackTrace();
 } menangkap (IOException e) {
 e.printStackTrace();
 }
kembaliSalah;
 }
}

Kontroler di atas melakukan dua hal, melakukan perhitungan pada data yang diterima dari tampilan, dan memutuskan data apa yang akan dikembalikan. Kontroler di atas juga menggunakan model aplikasi untuk menyimpan objek yang dibuat dari input tampilan, menggunakan: simpanMasuk() metode.

Membuat Tampilan Aplikasi

//Perpustakaan Java
impor java.awt. Tata Letak Perbatasan;
impor java.awt. Tata Letak Kotak;
impor java.awt.event. AcaraAksi;
impor java.awt.event. Pendengar Tindakan;
impor javax.swing. JTombol;
impor javax.swing. JComboBox;
impor javax.swing. JFrame;
impor javax.swing. JLabel;
impor javax.swing. JOptionPane;
impor javax.swing. JPanel;
impor javax.swing. JTextField;
kelas publik GasPriceView memperluas JFrame mengimplementasikan ActionListener {
//attributes
 private static final long serialVersionUID = 1L;
 pengontrol GasPriceController pribadi;
 nama driver JLabel pribadi;
 namaField JTextField pribadi;
 jumlah gas JLabel pribadi;
 jumlah field JTextField pribadi;
 jenis gas JLabel pribadi;
 JComboBox pribadi jenisKombo;
 pribadi JButton btnClear;
 pribadi JButton btnSave;
 private static final String[] ketik =
 {"Diesel", "Premium", "Biasa"};
//konstruktor default
 GasPriceView publik() {
 ini (GasPriceController baru());
 }
//konstruktor utama yang menyebabkan UI
 GasPriceView publik (pengontrol GasPriceController) {
super("Aplikasi Penjualan Gas");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400.500);
 setVisible (benar);
this.controller = pengontrol;
configureView();
 }
//menghasilkan UI untuk aplikasi
 private void configureView() {
setLayout (BorderLayout baru());
 JPanel pnl = JPanel baru (GridLayout baru (4,2,2,2));
driverName = new JLabel("Nama Driver:");
 pnl.add (namapengemudi);
 nameField = baru JTextField();
 pnl.add (namaField);
 gasAmount = new JLabel("Jumlah Gas (Galon):");
 pnl.add (jumlah gas);
 jumlahField = baru JTextField();
 pnl.add (jumlahField);
 gasType = new JLabel("Jenis Gas:");
 pnl.add (Tipe gas);
 typeCombo = JComboBox baru(Tipe);
 pnl.add (typeCombo);
 btnClear = new JButton("Hapus");
 pnl.add (btnClear);
 btnSimpan = new JButton("Simpan");
 pnl.add (btnSimpan );
tambahkan (pnl, BorderLayout. TENGAH);
Pendengar Tindakan();
}
 //mendengarkan klik salah satu dari dua tombol
 kekosongan publik ActionListener() {
 btnClear.addActionListener (ini);
btnSave.addActionListener (ini);
 }
//melakukan tindakan jika tombol tertentu diklik
 @Mengesampingkan
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 namaField.setText("");
 jumlahField.setText("");
 }
if (ev.getSource().equals (btnSave)){
String gasType = (String) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (jumlahField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 String driverName = namaField.getText();
 JOptionPane.showMessageDialog (null, driverName +" harus membayar $" + driverTotal );
Pelanggan GasPriceModel = GasPriceModel baru (namapengemudi, Jumlah gas, Tipe gas, Total driver);
controller.saveEntry (pelanggan);
 }
}
}

Tampilan di atas membuat antarmuka pengguna menggunakan konfigurasiTampilan() metode. Kemudian mengumpulkan data setelah suatu peristiwa terjadi (melalui pendengar tindakan). View di atas kemudian mengirimkan data yang dikumpulkan ke Controller, yang kemudian melakukan beberapa perhitungan dan mengembalikan data ke View.

Menjalankan Aplikasi MVC

impor jawa.awt. AcaraAntrian;
publikkelas Aplikasi {
publikstatisruang kosong main (String argumen[]) {
 AcaraAntrian.panggil Nanti(
baru Dapat dijalankan() {
@Mengesampingkan
publikruang kosong berlari() { 
 Pengontrol GasPriceController = baru GasPriceController(); 
baru GasPriceView (pengontrol); 
 }
 });
 }
}

Mengeksekusi Aplikasi kelas di atas akan menghasilkan UI berikut:

Mengisi UI dengan data yang relevan akan menghasilkan UI popup berikut:

Jika Anda melihat di sebelah kiri gambar di atas, Anda akan melihat bahwa aplikasi juga membuat file baru bernama “data.dat.” Jadi, aplikasi MVC ini mengumpulkan data dari pengguna melalui UI (Tampilan), yang mengirimkan data tersebut ke Pengendali. Kontroler memanipulasi data dengan melakukan beberapa perhitungan, kemudian menyimpan data tersebut dalam file menggunakan Model. Terkait: Input dan Output Java: Panduan Pemula

Input dan Output Java: Panduan Pemula

Jika Anda melihat dari dekat aplikasi yang dibuat dalam artikel ini, ada beberapa manfaat nyata. Beberapa manfaat tersebut antara lain:

• Skalabilitas
• Pengujian kode lebih mudah
• Pembuatan kode yang lebih ringkas

Tetapi arsitektur MVC bukan satu-satunya pola desain yang berguna yang dapat meningkatkan proses pengembangan Anda.

Cara Membuat Kode yang Dapat Digunakan Kembali Dalam JavaScript Menggunakan Pola Desain

Memahami cara menggunakan pola desain akan memungkinkan Anda menggunakan kode yang dapat digunakan kembali dalam JavaScript. Inilah yang perlu Anda ketahui.

Baca Selanjutnya

Tentang Penulis