BAB IV ANALISIS DAN PERANCANGAN SISTEM
4.4 Perancangan Sistem
4.4.3 Perancangan Antarmuka
4.4.3.2 Antarmuka Administrator
Gambar 4.54 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman beranda admin.
Tanggal Link Atas
Beranda Admin
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Sekilas Pendaftaran
Sekilas Pemesanan
Tabel Pengguna yang Tidak Aktif Dan Link
Konfirmasi serta Hapus
Tabel Pemesanan Buku Dan Link
Konfirmasi serta Hapus
Gambar 4.54 Antarmuka Halaman Beranda Admin
2. Antarmuka halaman kelola anggota
Gambar 4.55 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola anggota.
Tanggal Link Atas
Kelola Anggota
Sub Keterangan Halaman
Cari
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Lihat Anggota
Kategori Cari Data Anggota
Konfirmasi | Edit | Hapus
Gambar 4.55 Antarmuka Halaman Kelola Anggota
Gambar 4.56 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman edit anggota.
Tanggal Link Atas
Edit Anggota
Sub Keterangan Halaman
Simpan
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Edit Anggota
Form Isian Pengeditan Data - Data Anggota
Batal
Gambar 4.56 Antarmuka Halaman Edit Anggota
4. Antarmuka halaman pencarian anggota
Gambar 4.57 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian anggota.
Tanggal Link Atas
Cari Anggota
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Anggota
Data Anggota
Konfirmasi | Edit | Hapus Hasil Pencarian Anggota
5. Antarmuka halaman kelola buku
Gambar 4.58 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola buku.
Tanggal Link Atas
Kelola Buku
Sub Keterangan Halaman
Cari
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Lihat Buku
Kategori Cari Data Buku
Edit | Hapus Tambah
Gambar 4.58 Antarmuka Halaman Kelola Buku
6. Antarmuka halaman tambah buku
Gambar 4.59 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman tambah buku.
Tanggal Link Atas
Tambah Buku
Sub Keterangan Halaman
Simpan Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Buku
Batal Form Isian Data - Data Buku
Gambar 4.59 Antarmuka Halaman Tambah Buku
7. Antarmuka halaman edit buku
Gambar 4.60 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman edit buku.
Tanggal Link Atas
Edit Buku
Sub Keterangan Halaman
Simpan
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Edit Buku
Batal Form Isian Pengeditan
Data - Data Buku
Gambar 4.60 Antarmuka Halaman Edit Buku
8. Antarmuka halaman pencarian buku
Gambar 4.61 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian buku.
Tanggal Link Atas
Cari Buku
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Buku
Data Buku
Edit | Hapus Hasil Pencarian Buku
Gambar 4.61 Antarmuka Halaman Pencarian Buku
9. Antarmuka halaman kelola artikel
Gambar 4.62 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola artikel.
Tanggal Link Atas
Kelola Artikel
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Lihat Artikel Tambah Cari Kategori Cari Data Artikel Edit | Hapus
Gambar 4.62 Antarmuka Halaman Kelola Artikel
Gambar 4.63 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman tambah artikel.
Tanggal Link Atas
Tambah Artikel
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Artikel
Form Isian
Simpan Batal Data - Data Artikel
Gambar 4.63 Antarmuka Halaman Tambah Artikel
11.Antarmuka halaman edit artikel
Gambar 4.64 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman edit artikel.
Tanggal Link Atas
Edit Artikel
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Edit Artikel
Form Isian Pengeditan
Simpan Batal Data - Data Artikel
12.Antarmuka halaman pencarian artikel
Gambar 4.65 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian artikel.
Tanggal Link Atas
Cari Artikel
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Artikel
Data Artikel
Edit | Hapus Hasil Pencarian Artikel
Gambar 4.65 Antarmuka Halaman Pencarian Artikel
13.Antarmuka halaman kelola Video
Gambar 4.66 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola video.
Tanggal Link Atas
Kelola Video
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Lihat Video Tambah Cari Kategori Cari Data Video Edit | Hapus
Gambar 4.66 Antarmuka Halaman Kelola Video
14.Antarmuka halaman tambah video
Gambar 4.67 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman tambah video.
Tanggal Link Atas
Tambah Video
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Video
Form Isian
Simpan Batal Data - Data Video
Gambar 4.67 Antarmuka Halaman Tambah Video
15.Antarmuka halaman edit video
Gambar 4.68 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman edit video.
Tanggal Link Atas
Edit Video
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Edit Video
Form Isian Pengeditan
Simpan Batal Data - Data Video
Gambar 4.68 Antarmuka Halaman Edit Video
16.Antarmuka halaman pencarian video
Gambar 4.69 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian video.
Tanggal Link Atas
Cari Video
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Video
Data Video
Edit | Hapus Hasil Pencarian Video
Gambar 4.69 Antarmuka Halaman Pencarian Video
Gambar 4.70 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola kategori.
Tanggal Link Atas
Kelola Kategori
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Kategori Cari Kategori Cari Data Kategori Edit | Hapus Form Isian Simpan Batal Data - Data Kategori
Gambar 4.70 Antarmuka Halaman Kelola Kategori
18.Antarmuka halaman edit kategori
Gambar 4.71 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman edit kategori.
Tanggal Link Atas
Edit Kategori
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Edit Kategori
Form Isian Pengeditan
Simpan Batal Data - Data Kategori
19.Antarmuka halaman pencarian kategori
Gambar 4.72 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian kategori.
Tanggal Link Atas
Cari Kategori
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Kategori
Data Kategori
Edit | Hapus Hasil Pencarian Kategori
Gambar 4.72 Antarmuka Halaman Pencarian Kategori
20.Antarmuka halaman kelola penerbit
Gambar 4.73 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola penerbit.
Tanggal Link Atas
Kelola Penerbit
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Penerbit Cari Kategori Cari Data Penerbit Edit | Hapus Form Isian Simpan Batal Data - Data Penerbit
Gambar 4.73 Antarmuka Halaman Kelola Penerbit
21.Antarmuka halaman edit penerbit
Gambar 4.74 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman edit penerbit.
Tanggal Link Atas
Edit Penerbit
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Edit Penrbit
Form Isian Pengeditan
Simpan Batal Data - Data Penerbit
Gambar 4.74 Antarmuka Halaman Edit Penerbit
22.Antarmuka halaman pencarian penerbit
Gambar 4.75 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian penerbit.
Tanggal Link Atas
Cari Penerbit
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Penerbit
Data Penerbit
Edit | Hapus Hasil Pencarian Penerbiti
Gambar 4.75 Antarmuka Halaman Pencarian Penerbit
23.Antarmuka halaman kelola pengarang
Gambar 4.76 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola pengarang.
Tanggal Link Atas
Kelola Pengarang
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Pengarang Cari Kategori Cari Data Pengarang Edit | Hapus Form Isian Simpan Batal Data - Data Pengarang
Gambar 4.76 Antarmuka Halaman Kelola Pengarang
Gambar 4.77 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman edit pengarang.
Tanggal Link Atas
Edit Pengarang
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Edit Pengarang
Form Isian Pengeditan
Simpan Batal Data - Data Pengarang
Gambar 4.77 Antarmuka Halaman Edit Pengarang
25.Antarmuka halaman pencarian pengarang
Gambar 4.78 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian pengarang.
Tanggal Link Atas
Cari Pengarang
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Pengarang
Data Pengarang
Edit | Hapus Hasil Pencarian Pengarang
Gambar 4.78 Antarmuka Halaman Pencarian Pengarang
Gambar 4.79 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola posisi.
Tanggal Link Atas
Kelola Posisi
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Posisi Cari Kategori Cari Data Posisi Edit | Hapus Form Isian Simpan Batal Data - Data Posisi
Gambar 4.79 Antarmuka Halaman Kelola Posisi
27.Antarmuka halaman edit posisi
Gambar 4.80 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman edit posisi.
Tanggal Link Atas
Edit Posisi
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Edit Posisi
Form Isian Pengeditan
Simpan Batal Data - Data Posisi
28.Antarmuka halaman pencarian posisi
Gambar 4.81 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian posisi.
Tanggal Link Atas
Cari Posisi
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Posisi
Data Posisi
Edit | Hapus Hasil Pencarian Posisi
Gambar 4.81 Antarmuka Halaman Pencarian Posisi
29.Antarmuka halaman kelola pemesanan
Gambar 4.82 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola pemesanan.
Tanggal Link Atas
Kelola Pemesanan
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Lihat Pemesanan
Cari Kategori Cari
Data pemesanan
Konfirmasi | Detail | Hapus
30.Antarmuka halaman detail pemesan
Gambar 4.83 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman detail pemesan.
Tanggal Link Atas
Detail Pemesan
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Detail Pemesanan
Form Detail Pemesanan
Kembali Data - Data Pemesanan
Gambar 4.83 Antarmuka Halaman Detail Pemesan
31.Antarmuka halaman kelola peminjaman
Gambar 4.84 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola peminjaman.
Tanggal Link Atas
Kelola Peminjaman
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Lihat Peminjaman Cari Kategori Cari Data Posisi Detail | Kembali Tambah
32.Antarmuka halaman tambah peminjam
Gambar 4.85 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman tambah peminjam.
Tanggal Link Atas
Tambah Peminjam
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Peminjam
Form Isian
Simpan Batal Data - Data Peminjam
Gambar 4.85 Antarmuka Halaman Tambah Peminjam
33.Antarmuka halaman detail peminjam
Gambar 4.86 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman detail peminjam.
Tanggal Link Atas
Detail Peminjam
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Detail Peminjaman
Form Detail Peminjaman
Kembali Data - Data Peminjaman
Gambar 4.86 Antarmuka Halaman Detail Peminjam
34.Antarmuka halaman pencarian peminjaman
Gambar 4.87 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian peminjaman.
Tanggal Link Atas
Cari Peminjam
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Peminjaman
Data Peminjaman
Detail | Kembali Hasil Pencarian Peminjaman
Gambar 4.87 Antarmuka Halaman Pencarian Peminjaman
35.Antarmuka halaman kelola pengembalian
Gambar 4.88 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola pengembalian.
Tanggal Link Atas
Kelola Pengembalian
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Lihat Pengembalian
Cari Kategori Cari
Data Posisi
Detail
Gambar 4.88 Antarmuka Halaman Kelola Pengembalian
36.Antarmuka halaman detail pengembalian
Gambar 4.89 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman detail pengembalian.
Tanggal Link Atas
Detail Pengembalian
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Detail Pengembalian
Form Detail Pengembalian
Kembali
Data - Data Pengembalian
Gambar 4.89 Antarmuka Halaman Detail Pengembalian
Gambar 4.90 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman pencarian pengembalian.
Tanggal Link Atas
Cari Pengembalian
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Pencarian Pengembalian
Data Peminjaman
Detail Hasil Pencarian Pengembalian
Gambar 4.90 Antarmuka Halaman Pencarian pengembalian
38.Antarmuka halaman kelola komentar
Gambar 4.91 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman kelola komentar.
Tanggal Link Atas
Kelola Komentar
Sub Keterangan Halaman
Link Pengelolaan
Profile Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Lihat Komentar
Tambah
Data-Data Komentar Pengguna
Hapus
Gambar 4.91 Antarmuka Halaman Kelola Komentar
Gambar 4.92 dibawah ini menggambarkan perancangan antarmuka admin untuk halaman tambah komentar.
Tanggal Link Atas
Tambah Komentar
Sub Keterangan Halaman
Link Pengelolaan
Profile
Link Pengelolaan Data Yang Dapat Dikelola Admin
Informasi Profile Pengguna
Tambah Komentar
Form Isian
Simpan Batal Data - Data Komentar
Gambar 4.92 Antarmuka Halaman Tambah Komentar