III. ANALISIS DAN PERANCANGAN
8. Tabel Entitas Spend Tabel 12 Entitas Spend
3.3.3 Desain Interface
Desain interface pada Aplikasi Perpustakaan SMP Negeri 1 Raman Utara sebagai berikut.
a. Desain Interface Halaman Utama
Pada Gambar 19 terdapat desain interface halaman utama, dimana pada halaman ini siswa diberi akses untuk melihat informasi ketersediaan buku yang ada pada perpustakaan seperti stok buku yang tersedia dan letak rak dimana buku disediakan.
39
Gambar 19 Desain Interface Halaman Utama
b. Desain Interface Halaman Login
Gambar 20 menjelaskan interface login, petugas harus memasukkan kode admin dan password, serta mengklik tombol login untuk masuk ke halaman dashboard.
Gambar 20 Desain Interface Halaman Login
40
c. Desain Interface Halaman Dashboard
Pada Gambar 21 terdapat interface halaman dashboard, dimana halaman tersebut menampilkan 3 menu utama yang ada pada aplikasi yaitu berisi data master, transaksi dan laporan.
Gambar 21 Desain Interface Halaman Dashboard
d. Desain Interface Halaman Data Master
Gambar 22 menjelaskan interface halaman data master, tampilan halaman tersebut berisi informasi mengenai data anggota, data buku, data petugas, backup data, dan restore data.
Gambar 22 Desain Interface Halaman Data Master
41
e. Desain Interface Halaman Data Anggota
Gambar 23 terdapat interface halaman data anggota, dimana petugas meng-input-kan form data anggota seperti id siswa, nama siswa, kelas, jenis kelamin, no telp, dan status anggota. Pada halaman data anggota memiliki button berupa input, edit, hapus, batal dan cetak kartu anggota.
Gambar 23 Desain Interface Halaman Data Anggota
Gambar 24 Desain Interface Halaman Input Anggota
42
Gambar 24 merupakan desain interface halaman input data anggota yang menampilkan form input untuk mengisi data anggota. Ketika petugas mengklik button input maka button edit, hapus, dan batal tidak akan aktif. Kemudian jika sudah selesai meng-input-kan form data anggota button input akan menjadi button simpan
Gambar 25 Desain Interface Halaman Edit Anggota
Pada Gambar 25 merupakan interface halaman edit data anggota yang menampilkan form edit untuk mengedit data anggota dan button edit data, ketika klik edit data aplikasi menampilkan kembali halaman data anggota yang sudah di edit. Ketika petugas mengklik button edit maka button input, hapus, dan batal tidak akan aktif.
43
Gambar 26 Desain Interface Halaman Hapus Anggota
Gambar 26 menjelaskan halaman hapus anggota, jika petugas ingin menghapus salah satu data anggota yang ada pada tabel maka klik button hapus kemudian data akan terhapus.
f. Desain Interface Halaman Data Buku
Gambar 27 Desain Interface Halaman Data Buku
Gambar 27 terdapat interface halaman data buku, dimana petugas meng-input-kan form data anggota seperti kode buku, judul buku,
44
kategori buku, penerbit, no rak, dan stok. Pada halaman data anggota memiliki button berupa input, edit, hapus, dan batal.
Gambar 28 Desain Interface Halaman Input Buku
Gambar 28 merupakan desain interface halaman input data buku yang menampilkan form input untuk mengisi data buku. Ketika petugas mengklik button input maka button edit, hapus, dan batal tidak akan aktif. Kemudian jika sudah selesai meng-input-kan form data buku button input akan menjadi button simpan.
Gambar 29 Desain Interface Halaman Edit Buku
45
Pada Gambar 29 merupakan interface halaman edit data buku yang menampilkan form edit untuk mengedit data buku dan button edit data, ketika klik edit data aplikasi menampilkan kembali halaman data buku yang sudah di edit. Ketika petugas mengklik button edit maka button input, hapus, dan batal tidak akan aktif.
Gambar 30 Desain Interface Halaman Hapus Buku
Gambar 30 menjelaskan halaman hapus buku, jika petugas ingin menghapus salah satu data buku yang ada pada tabel maka klik button hapus kemudian data akan terhapus.
g. Desain Interface Halaman Data Petugas
Gambar 31 terdapat interface halaman data petugas, dimana petugas meng-input-kan form data petugas seperti kode admin, nama, password, dan level. Pada halaman data anggota memiliki button berupa input, edit, hapus, dan batal.
46
Gambar 31 Desain Interface Halaman Data Petugas
Gambar 32 Desain Interface Halaman Input Petugas
Gambar 32 merupakan desain interface halaman input petugas yang menampilkan form input untuk mengisi data petugas. Ketika petugas mengklik button input maka button edit, hapus, dan batal tidak akan aktif. Kemudian jika sudah selesai meng-input-kan form data buku button input akan menjadi button simpan.
47
Gambar 33 Desain Interface Halaman Edit Petugas
Pada Gambar 33 merupakan interface halaman edit data petugas yang menampilkan form edit untuk mengedit data petugas dan button edit data, ketika klik edit data aplikasi menampilkan kembali halaman data petugas yang sudah di edit. Ketika petugas mengklik button edit maka button input, hapus, dan batal tidak akan aktif.
Gambar 34 Desain Interface Halaman Hapus Petugas
48
Gambar 34 menjelaskan halaman hapus petugas, jika petugas ingin menghapus salah satu data petugas yang ada pada tabel maka klik button hapus kemudian data akan terhapus.
h. Desain Interface Halaman Backup Data
Gambar 35 menjelaskan halaman backup data, jika petugas ingin mem-backup keseluruhan data yang ada pada database maka petugas klik fitur backup data.
Gambar 35 Desain Interface Halaman Backup Data
i. Desain Interface Halaman Restore Data
Gambar 36 menjelaskan halaman backup data, jika petugas ingin me-restore data maka petugas perlu mengklik fitur restore data kemudian petugas akan diminta memasukkan nama file yang sudah di backup sebelumnya.
49
Gambar 36 Desain Interface Halaman Restore Data
j. Desain Interface Halaman Transaksi
Gambar 37 menjelaskan interface halaman transaksi, tampilan halaman tersebut berisi informasi mengenai data peminjaman buku, pengembalian buku, riwayat buku pinjam, buku favorit, dan kartu bebas pustaka.
Gambar 37 Desain Interface Halaman Transaksi
50
k. Desain Interface Halaman Riwayat Buku Pinjam
Gambar 38 Desain Interface Halaman Riwayat Buku Pinjam
Gambar 38 menjelaskan interface halaman riwayat buku pinjam, dimana pada halaman ini siswa diberikan akses untuk melihat informasi ketersediaan buku yang akan dipinjam seperti mengecek stok buku yang tersedia dan dimana letak rak buku berada.
l. Desain Interface Halaman Peminjaman Buku
Gambar 39 Desain Interface Halaman Peminjaman Buku
51
Gambar 39 terdapat interface halaman peminjaman buku, dimana petugas meng-input-kan form peminjaman buku seperti id siswa, dan kode buku. Pada halaman peminjaman buku memiliki button berupa input, simpan, dan batal.
Gambar 40 Desain Interface Halaman Input Peminjaman Buku
Gambar 40 merupakan desain interface halaman input peminjaman buku yang menampilkan form input untuk mengisi data peminjaman buku.
m. Desain Interface Halaman Pengembalian Buku
Gambar 41 terdapat interface halaman pengembalian buku, dimana petugas meng-input-kan form pengembalian buku seperti id siswa, dan kode buku. Pada halaman pengembalian buku memiliki button berupa input, simpan, dan batal.
52
Gambar 41 Desain Interface Halaman Pengembalian Buku
Gambar 42 Desain Interface Halaman Input Pengembalian Buku
Gambar 42 merupakan desain interface halaman input pengembalian buku yang menampilkan form input untuk mengisi data pengembalian buku.
53
n. Desain Interface Halaman Buku Favorit
Gambar 43 Desain Interface Halaman Buku Favorit
Gambar 43 merupakan desain interface halaman buku favorit yang menampilkan data buku terfavorit atau buku yang sering dipinjam oleh siswa.
o. Desain Interface Halaman Kartu Bebas Pustaka
Gambar 44 merupakan desain interface halaman kartu bebas pustaka untuk siswa yang memerlukan kartu bebas pustaka dapat di cetak jika tidak memiliki tanggungan meminjam buku.
Gambar 44 Desain Interface Halaman Kartu Bebas Pustaka
54
p. Desain Interface Halaman Laporan
Gambar 45 menjelaskan interface halaman laporan, tampilan halaman tersebut berisi informasi mengenai laporan data peminjaman buku, dan laporan data pengembalian buku. Terdapat pilihan rentang waktu pada halaman laporan yang akan di cetak.
Gambar 45 Desain Interface Halaman Laporan
q. Desain Interface Halaman Cetak Laporan Peminjaman
Gambar 46 Desain Interface Halaman Cetak Laporan Peminjaman
55
Gambar 46 merupakan tampilan dari cetak laporan peminjaman buku yang menampilkan data peminjaman. Ketika ingin mencetak laporan dapat memilih rentang waktu sesuai dengan keinginan.
r. Desain Interface Halaman Cetak Laporan Pengembalian
Gambar 47 merupakan tampilan dari cetak laporan pengembalian buku yang menampilkan data dari peminjaman. Ketika ingin mencetak laporan dapat memilih rentang waktu sesuai dengan keinginan.
Gambar 47 Desain Interface Halaman Cetak Laporan Pengembalian