80 barang pada controller akan akan memanggil kelas Barang pada model. Model
merupakan komponen yang digunakan untuk mengelola informasi. Model mengandung data dan fungsi yang berhubungan dengan pemrosesan data. Kelas-
kelas pada package model berhubungan dengan database. Model melakukan pemrosesan data berdasarkan instruksi yang diberikan oleh controller.
Berdasarkan contoh tersebut, model menerima intruksi dari controller dan memroses perintah tersebut melalui kelas Barang pada model menggunakan
methode LihatBarang. Methode ini berfungsi memroses perintah tersebut. Selanjutnya, controller akan memilih view Barang untuk merepresentasikan
perintah tersebut. View merupakan komponen yang bertanggung jawab terhadap tampilan perangkat lunak kepada pengguna. View berfungsi menerima dan
merepresentasikan data kepada user. Selanjutnya, view Barang menampilkan tampilan tampil barang kepada pengguna melalui browser.
c. Perancangan Antarmuka
Perancangan antarmuka digunakan sebagai pedoman dalam implementasi tampilan program. Perancangan antarmuka digambarkan dalam bentuk layout.
1 Halaman Login Pada halaman login terdapat form username dan password. Tombol login
digunakan untuk masuk ke sistem.
Gambar 26. Desain Antarmuka Halaman Login
81 2 Halaman Menu Barang
Menu barang Gambar 27 adalah contoh desain antarmuka tampilan data barang. Pada data barang tersebut memuat data kode barang, nama barang,
jumlah kondisi barang yang baik, tidak baik dan rusak. Pada menu ini terdapat menu tampil barang, detail barang, dan tambah barang. Menu tampil barang
menampilkan daftar barang yang ada di masing-masing Laboratorium. Oleh karena itu, menu barang terbagi menjadi tiga, yaitu menu Laboratorium Bengkel,
Laboratorium Jaringan 1, dan Laboratorium Jaringan 2. Menu detail barang menampilkan data barang secara lebih detail, sedangkan menu tambah barang
digunakan untuk melakukan tambah data barang.
Gambar 27. Desain Antarmuka Halaman Tampil Barang 3 Halaman Menu Tambah Peminjaman
Menu peminjaman akan tampil setelah menekan menu transaksi. Menu ini digunakan pada saat siswa melakukan peminjaman barang. Pada halaman ini,
terdapat menu peminjaman, pengembalian, peminjaman yang melebihi batas peminjaman, serta riwayat peminjaman. Desain antarmukan menu tambah
peminjaman ditunjukkan pada Gambar 28.
82 Gambar 28. Desain Antarmukan Halaman Tambah Peminjaman
4 Halaman Tambah Peminjaman Harian Peminjaman harian dilakukan pada saat pembelajaran dilakukan. Peminjaman
dilakukan sebelum kegiatan pembelajaran dimulai. Pengembalian dilakukan setelah pembelajaran berakhir. Pada menu peminjaman harianm terdapat sub
menu peminjaman harian, pengembalian harian, peminjaman yang sedang berlangsung, serta riwayat peminjaman harian. Input data pada halaman ini adalah
input data kelas, mata pelajaran, ruang laboratorium, nama barang beserta jumlahnya, dan catatan peminjaman. Desain antarmukan menu peminjaman
harian ditunjukkan pada Gambar 29.
83 Gambar 29. Desain Antarmukan Halaman Tambah Peminjaman Harian
5 Laporan Data Barang Desain laporan data barang terdapat pada Gambar 30. Laporan data barang
merupakan laoran data barang setiap ruang. Laporan ini menampilkan barang– barang di ruang laboratorium yang telah dipilih beserta jumlah barang sesuai
kondisinya.
Gambar 30. Desain Antarmuka Tampilan Laporan Barang
84 Selain keempat perancangan antarmuka tersebut, perancangan antarmuka yang
lebih lengkap untuk masing-masing halaman terdapat dalam lampiran
d. Perancangan Komponen
