Modul 12 - MVC

Unduh sebagai pdf atau txt
Unduh sebagai pdf atau txt
Anda di halaman 1dari 15

MODUL 12

“KONSEP SISTEM PEMROGRAMAN MODEL


VIEW CONTROLLER (MVC)”

Oleh
SAFIRA MAYA SHOVIE, S.Pd

1 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


KONSEP MODEL VIEW CONTROLLER (MVC)

A. TUJUAN PEMBELAJARAN
1. Memahami konsep Model View Controller (MVC) dalam pemrograman aplikasi berorientasi
obyek.
2. Merancang, membuat, dan menguji program aplikasi berorientasi obyek dengan penerapan
Model View Controller (MVC).
B. DASAR TEORI
Konsep MVC (Model-View-Controller) merupakan salah satu penerapan compound
design pattern dalam pemrograman berorientasi objek, dimana konsep ini membedakan kelas-
kelas yang merepresentasikan data (Model) dengan kelas-kelas yang mengatur tampilan
program (View) dan kelas-kelas pengaturan data (Controller).
Sesungguhnya, membangun program dengan menerapkan konsep MVC akan lebih
merepotkan dibandingkan cara biasa karena developer harus membuat lebih banyak kelas dan
package sesuai dengan konsep MVC di atas. Membangun program dengan cara biasa umumnya
hanya membuat 1 buah kelas untuk satu tampilan (contoh: NewStudentForm.java) dan fungsi-
fungsi seperti: pengontrollan data, koneksi ke database, dan pemrosesan data dilakukan pada 1
kelas tersebut. Pada MVC, fungsi-fungsi tersebut dipisah menjadi kelas-kelas baru dan saling
terhubung.
Walaupun konsep MVC sangat merepotkan di awal, namun dalam jangka panjang, kode-
kode program yang telah dibuat akan lebih mudah dalam maintenance karena developer bisa
mengubah salah satu kode program tanpa harus mengganggu kode program yang lainnya.
Contohnya, jika anda telah membangun Aplikasi Rumah Sakit yang berjalan pada Desktop dan
anda ingin membuatnya menjadi berbasis web, maka anda cukup mengganti kelas-kelas bagian
View-nya saja tanpa perlu mengubah kelas-kelas Controller dan Model.

2 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


MVC model pada Java
Dalam hal koneksi aplikasi ke database, penerapan MVC pada Java ditambahkan dengan
pembuatan kelas DAO (Data Access Object), yaitu kelas yang khusus menyediakan operasi
Insert, Update, Delete, dan Query ke database.
Menurut penulis, berdasarkan skema di atas, developer hendaknya membuat 5 buah
package, yaitu: view, controller, model, dao, dan database.
 Bagian View merupakan kelas-kelas yang mengimplementasikan user interface dari
program yang dibangun. Bagian inilah yang dilihat oleh user dan menjadi media user untuk
berinteraksi. Setiap ada request atau aksi yang diminta oleh user yang berhubungan dengan
data akan diteruskan ke bagian controller yang sesuai.
 Bagian Controller merupakan kelas-kelas yang mengendalikan alur program secara
keseluruhan, mengandung business logic, dan sebagai penghubung antara view dengan
model dan dao. Kelas ini akan merespon permintaan atau aksi dari view ke kelas dao yang
diinginkan.
 Bagian Model pada Java menggambarkan struktur data pada database. Bagian ini
direpresentasikan oleh POJO (Plain Old Java Object), yaitu kelas Java biasa yang lengkap
dengan property (atribut) dan method getter-setter terhadap atribut-atributnya. Biasanya
tidak memiliki method lain selain getter-setter. Contoh: Kelas Mahasiswa yang memiliki
atribut: nip, nama, jenisKelamin, alamat. Kelas Mahasiswa hanya memiliki method
getter-setter yang sesuai dengan atributnya yaitu: getNip, setNip, getNama, setNama,
getJenisKelamin, setJenisKelamin, getAlamat, setAlamat.
 Bagian DAO (Data Access Object) merupakan kelas-kelas yang melakukan manipulasi
data yang terdapat pada database. Manipulasi bisa berupa Create, Read, Update,
atau Delete (CRUD). Bagian ini terhubung ke Model (karena merupakan representasi
data) dan Database (untuk mendapatkan koneksi).
 Bagian Database, berisi kelas yang bertugas untuk membuka koneksi dengan database
tertentu dan memberikan objek connection ke kelas dao yang membutuhkan koneksi.

3 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


C. LATIHAN
1. Langkah pertama yang di lakukan adalah membuat Databasenya dahulu, namanya terserah.
2. Setelah membuat Databasenya, silahkan membuat tabelnya, namanya juga terserah,
Selanjutnya nanti saya jelaskan di letakkan di mana saja nama tabelnya

3. Buka Netbeans, lalu Buat Project dengan nama "MVC_mahasiswa".


4. Selanjutnya buat package fungsinya untuk memisahkan masing-masing fungsi, caranya klik
kanan pada tulisan source Packages, lihat gambar

5. Buat 4 buah package dengan masing- masing nama :


- com.controller *package ini nanti berfugsi sebagai penghubung dari model dan view
- com.model *package ini berfungsi sebagai memasukkan perintah
- com.view *package ini berfungsi sebagai tampilan program
- com.koneksi *package ini berfungsi sebagai jembatan hubungan database dan program
hasilnya seperti ini..

4 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


6. Langkah selanjudnya kita buat form nya kalo tidak form/tampilan, buat dengan nama
"Form_Mahasiswa" tanpa tanda petik dua ya, buatnya harus di dalam package com.view, cara
nya klik kana package nya, seperti berikut

7. Buat tampilannya seperti berikut, lalu ganti nama-namanya sesuai yang di gambar

Untuk "cbjurusan" silahkan masukkan item apa saja, yang di inginkan.


*Sedikit kesalahan, ternyata saya tidak melakukan perubahan variable modifers yang defaultnya
private, harus di rubah ke public, agar dapat di baca oleh class lain.
Cara nya sebagai berikut :
Klik kanan pada txtNim pilih properties-lalu pilih code - cari tulisan variable modifers - rubah
privatenya menjadi public, seperti berikut

5 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


Lakukan pada txtNama, rbLaki, rbPerempuan dan cbJurusan.
8. Sekarang kita masukkin dulu library yang di butuhkan, untuk saat ini kita hanya
membutuhkan MYSQL JDBC Driver aja, cara nya kita klik kanan pada Libraries lihat
foldernya di project kita, kita pilih add Library, lalu cari MYSQL JDBC Driver - klik add
Library, seperti berikut

9. Sekarang menuju com.koneksi pilih Java Class buat dengan nama "koneksi", fungsinya
sebagai penghubung ke database, berikut syntaxnya :

6 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


10. Jika sudah sekarang kita ke package com.controller klik kanan pilih Java Interface,
caranya seperti langkah ke 6, lalu buat dengan nama "controller_mahasiswa" . Berikut
Source Code :

“Sedikit penjelasan public void Simpan(Form_Mahasiswa mhs) : Ini berfungsi sebagai


penghubung untuk melakukan simpan data, yang lainnya bisa di artikan sendiri ya”.

7 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


11. Selanjutnya membuat model yang fungsinya sebagia tempat memasukkan perintah-perintah,
tapi disini ada yang unik, kita harus meng Override seluruh class yang mau dibuat, tapi sudah
di buat otomatis, tinggal mengikuti saja langkah-langkahnya, kita masuk ke com.model klik
kanan kita pilih Java Class, buat dengan nama "Model_Mahasiswa. kalo sudah liat gambarnya
berikut

jika anda benar akan muncul seperti ini.

Untuk tulisan "throw new UnsupportedOperationException ("Not supported yet."); //To change
body of generated methods, choose Tools | Templates" dihapus saja
8 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK
12. Masukkan perintah di dalam "public void Simpan(Form_Mahasiswa mhs)" untuk menyimpan
data

13. Masukkan perintah di dalam "public void Ubah(Form_Mahasiswa mhs)" untuk mengubah
data

9 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


14. Masukkan perintah di dalam "public void Hapus(Form_Mahasiswa mhs)" untuk menghapus
data

15. Masukkan perintah di dalam "public void Baru(Form_Mahasiswa mhs)" untuk membuat
keadaan tempat input form menjadi bersih / kosong.

10 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


16. Masukkan perintah di dalam "public void Tampil(Form_Mahasiswa mhs)" untuk
menampilkan isi records di tabel database kita

17. Masukkan perintah di dalam "public void KlikTabel(Form_Mahasiswa mhs)" untuk


memindahkan isi dari tabel ke input kita.

18. Sekarang kita masuk ke Form_Mahasiswa pilih Source, masukkan sintak ini kedalam
sourcode nya ya... *tolong di baca baik-baik setiap komentar di source code nya

11 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


19. Kita kembali ke desain ya, klik 2x tombol Baru atau bisa juga klik kanan- Event - Klik Action

12 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


20. Selanjudnya klik tombol Simpan, masukkan kode seperti ini

21. Klik tombol Ubah, masukkan kode seperti ini.

22. Klik tombol Hapus, masukkan kode seperti ini.

23. Klik tombol Keluar, masukkan kode seperti ini.

24. Yang terakhir, masuk ke Source, tarik cursor paling bawah, cari tulisan "public void
main(String args[])" kita tambahkan isinya seperti ini :

13 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


25. Jalankan program, jika berhasil hasil outputnya sebagai berikut

14 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK


Catatan :
1. Silahkan mengerjakan semua latihan yang terdapat diatas, bisa didiskusikan dengan teman
kalian. Tetapi untuk pengerjaan tugasnya tetap individu.
2. Materi diatas hanya sedikit rangkuman dari berbagai fungsi kode program yang sudah saya
buat. Silahkan untuk pemantaban pemahaman lebih dalam, kalian cari referensi contoh
program yang lain dengan menggunakan beberapa fungsi dari kode program diatas.
3. Deadline pengumpulan tugas, 1 minggu setelah materi dibagikan. Jika telat dalam
pengumpulan, tugas tidak diterima, terkecuali bila ada kendala, misal : laptop rusak dsb,
maka setelah laptop kembali normal tugas bisa menyusul.
4. Tugas dikumpulkan melalui link https://bit.ly/2absensidaringPBO, dengan catatan yang
dikumpulkan hanya laporan yang berisi screen shoot syntax program dan output program
serta penjelasan program. Project disimpan di laptop masing-masing, ketika sewaktu-
waktu saya meminta project, semua sudah tersedia.
5. Jangan lupa format laporan yaitu No.Absen_Nama Lengkap_Kelas.

SELAMAT MENGERJAKAN ^_^

15 | PBO XII REKAYASA PERANGKAT LUNAK SMKN 2 TRENGGALEK

Anda mungkin juga menyukai