Perancangan Antarmuka 1. Perancangan Antarmuka Layout

108 4.3.5. Perancangan Antarmuka 4.3.5.1. Perancangan Antarmuka Layout 1. Rancangan interface layout untuk pengunjung Gambar 4. 37. Rancangan antarmuka layout untuk pengunjung 2. Rancangan interface layout untuk anggota Gambar 4. 38. Rancangan antar muka layout untuk anggota Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Content Footer Login NIS : Password: Login Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Content Footer Menu Logout Siswa xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx 109 3. Rancangan interface layout Account admin, pustakawan, kepala sekolah Gambar 4. 39. Rancangan antarmuka layout untuk petugas

4.3.5.2. Rancangan Antarmuka Input

1. Rancangan interface registrasi Account pengunjung 2. Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Content Footer Menu Logout Admin xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi NIS : xxxx Nama : xxxxxxx Kata sandi : xxxxxx Ulangi : xxxxxx Kelas : xx Angkatan : xxxx Jenis kelamin : xxx Tempat lahit : xxxxxx Tanggal lahit : dd-mm-yyyy Alamat : xxxxxxxxxx Footer Login NIS : Password: Login Form Registrasi Daftar Gambar 4. 40. Rancangan interface registrasi 110 2. Rancangan interface input pencarian buku account anggota Gambar 4 . 41. Rancangan interface input pencarian buku 3. Rancangan interface input form pemesanan buku account anggota Gambar 4. 42. Rancangan interface input form pemesanan buku Id buku : XXXXXX Judul Buku : XXXXXXXXXXXXXXXXXXXXX Pengarang : XXXXXXXXXXXXXXXXXX Penerbit : XXXXXXXXXXXXX Tempat terbit : XXX Jumlah buku : XXXXXXXXXXXXXXXXXXX status : XXXXXX Buku tersedia silahkan tekan booking untuk melakukan pembookingan | Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Footer Menu Logout Siswa xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx Batal Booking Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Pencarian Buku Kata kunci Filter Footer Menu Logout Siswa xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx Cari 111 4. Rancangan interface input cek peminjaman account anggota Gambar 4. 43. Rancangan interface input cek peminjaman 5. Rancangan interface input form ganti password account anggota Gambar 4. 44. Rancangan interface input form ganti password Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Data Peminjaman Buku Footer Menu Logout Siswa xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx Id Pinjam : [ ] Cek Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Nama : xxxxxxxx Password : xxxxxx Kelas : xx Angkatan : xxxxx Tempat lahit : xxxxx Tanggal lahit : dd-mm-yyyy Alamat : xxxxxxxxxx Kosongkan jika tidak ingin mengganti password Footer Profil Update Logout Siswa Menu xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx 112 6. Rancangan interface input form edit anggota account admin dan pustakawan Gambar 4. 45. Rancangan interface input form edit anggota 7. Rancangan interface input form tambah buku account admin dan pustakawan Gambar 4. 46. Rancangan interface input form tambah buku Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Nama : xxxxx Password : xxxxxx Kelas : xx Angkatan : xxxxx Tempat lahit : xxxxxx Tanggal lahit : dd-mm-yyyy Alamat : xxxxxxxxxxxxxx Jenis kelamin : Laki-laki Perempuan Kosongkan jika tidak ingin mengganti password Footer Data Siswa Proses Logout Admin Batal Menu xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi ISBN : xxxx Judul : xxxxxxxxxx Penerbit : xxxxxxxx Tempat terbit : xxxx Pengarang : xxxxxxx Jumlah buku : xxx Jumlah halaman : xxx Tahun terbit : xxxxx Isi semua kolom Footer Penambahan Buku Tambah Logout Admin Menu xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx 113 8. Rancangan interface input form edit buku account admin dan pustakawan Gambar 4. 47. Rancangan interface input form edit buku 9. Rancangan interface input form tambah peminjaman buku account admin dan pustakawan Gambar 4. 48. Rancangan interface input form tambah peminjaman buku Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi ISBN : xxxx Judul : xxxxxxxxx Penerbit : xxxxxxx Tempat terbit : xxxxx Pengarang : xxxxxx Jumlah buku : xxx Jumlah halaman : xxx Tahun terbit : xxxx x Footer Penambahan Buku Update Logout Admin Menu xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Id Booking : xxx Judul : xxxxxxxxx Nama siswa : xxxxxx Tgtl booking : dd-mm-yyyy Batas booking : dd-mm-yyyy √ tekan tombol proses untuk melanjutkan proses peminjaman Footer Tambah peminjaman Proses Logout Admin Menu xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx 114 10. Rancangan interface input form tambah pengembalian account admin dan pustakawan Gambar 4. 48. Rancangan interface input form tambah pengembalian 11. Rancangan interface input form edit petugas account admin dan pustakawan 4.3.5.3. Gambar 4. 49. Rancangan interface input form edit petugas Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Id Pinjam : xxx Judul : xxxxxxxx Nama siswa : xxxxx Tgtl pinjam : dd-mm-yyyy Tgl sekarang : dd-mm-yyyy Status : xxxx Denda : xxx √ tekan tombol proses untuk melanjutkan proses pengembalian buku Footer Tambah peminjaman Proses Logout Admin Menu xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx Perpustakaan Online SDI Al-Azhar 15 Pamulang Profil Sekolah Album Foto Informasi Nama : xxx Email : xxxxxxxx Password : xxxxx Kosongkan jika tidak ingin mengganti password Footer Profil Update Logout Admin Menu xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx 115

4.3.5.4. Perancangan Antarmuka Output

1. Rancangan interface output detail buku account anggota Tabel 4.23. Output buku id Buku ISBN Judul Penerbit Tempat terbit Pengarang Jumlah buku Jumlah halaman Tahun terbit 2. Rancangan interface output hasil pencarian data buku account anggota Tabel 4.24. Output hasil pencarian data buku ID KODE BUKU JUDUL BUKU STOK AKSI 1 XXXXXX XXXXXXXXXXXXX XXX Lihat buku 2 XXXXXX XXXXXXXXXXXXX XXX Lihat buku 3 XXXXXX XXXXXXXXXXXXX XXX Lihat buku 3. Rancangan interface output data buku account admin dan pustakawan Tabel 4.25. Output data buku ID KODE BUKU JUDUL BUKU STOK AKSI 1 XXXXXX XXXXXXXXXXXXX XXX Ubah | Hapus 2 XXXXXX XXXXXXXXXXXXX XXX Ubah | Hapus 3 XXXXXX XXXXXXXXXXXXX XXX Ubah | Hapus 116 4. Rancangan interface output data anggota account admin Tabel 4.26. Output data anggota NO ANGGOTA NAMA ANGGOTA KELAS GENDER AKSI XXXXXX XXXXXXXX X XXX XXX Detail | Ubah | Hapus XXXXXX XXXXXXXX X XXX XXX Detail | Ubah | Hapus XXXXXX XXXXXXXXX X XXX XXX Detail | Ubah | Hapus 5. Rancangan interface output data pinjam account admin dan pustakawan Tabel 4.27. Output data pinjam ID PINJAM ID ANGGOTA TGL. PINJAM TGL BATAS AKSI XXX XXXXXX XXX XX-XX-XXXX Kembali Ubah | Hapus XXX XXXXXX XXX XX-XX-XXXX Kembali Ubah | Hapus XXX XXXXXX XXX XX-XX-XXXX Kembali Ubah | Hapus 6. Rancangan interface output data kembali account admin dan pustakawan Tabel 4.28. Output data kembali ID PINJAM JUDUL TGL. KEMBALI DENDA Rp AKSI XXX XXXXXX XXX XX-XX-XXXX XXXXX Ubah | Hapus XXX XXXXXX XXX XX-XX-XXXX XXXXX Ubah | Hapus XXX XXXXXX XXX XX-XX-XXXX XXXXX Ubah | Hapus 7. Rancangan interface output data booking account admin dan pustakawan Tabel 4.29. Output data booking NO ID BOOKING ID ANGGOTA TGL. PEMESANAN STATUS AKSI 1 XXXXX XXXXXX XXX XX-XX-XXXX Pinjam Ubah | Hapus 2 XXXXX XXXXXX XXX XX-XX-XXXX Pinjam Ubah | Hapus 3 XXXXX XXXXXX XXX XX-XX-XXXX Pinjam Ubah | Hapus 117

4.4. Penerapan Sistem