BAB III PEMBAHASAN
3.2 Perancangan Sistem
3.2.3 Perancangan Antarmuka
Rancangan antarmuka merupakan media yang dipergunakan komputer untuk berkomunikasi dengan manusia. Interface di komputer dikenal dengan GUI(graphical user interface). Dalam terminologi perangkat lunak, interface atau antarmuka bisa diartikan sebagai tampilan atau cara perangkat lunak yang bersangkutan berinteraksi dengan penggunanya. Sedangkan dalam terminologi perangkat keras, interface atau antarmuka mengacu kepada standar yang digunakan oleh suatu peripheral tertentu untuk berhubungan dengan peripheral lainnya dalam suatu sistem. Gambar 3.29 menjelaskan tentang spesifikasiantarmuka.
55 | P a g e
Gambar 3.16 Antarmuka form home (T01) HOME PROFI CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Berita terbaru Kategori buku Pencarian Isi Login Waktu Game Wallpaper
Klik home maka akan tampil form home (T01)
Klik profil maka akan tampil form profil (T02)
Klik contact maka akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05)
Ketika login maka akan tampil form sesuai jabatan (T06 & T11)
56 | P a g e
Gambar 3.17 Antarmuka Profil (T02) HOME PROFIL CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Berita terbaru Kategori buku Pencarian Profil sekolah Login Waktu Game Wallpaper
Klik home maka akan tampil form home (T01)
Klik profil maka akan tampil form profil (T02)
Klik contact maka akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05)
Ketika login maka akan tampil form sesuai jabatan (T06 & T11)
57 | P a g e
Gambar 3.18 Antarmuka contact (T03)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Ketika login maka
akan tampil form sesuai jabatan (T06 & T11)
Klik submit maka pesan akan tersimpan dan akan melanjutkan ke form home (T01)
HOME PROFI L
CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Berita terbaru Kategori buku Pencarian Login Waktu Game Wallpaper nama email subjec message submit reset Logo sekolah
58 | P a g e
Gambar 3.19 Antarmuka koleksi buku (T04) HOME PROFI
L
CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Berita terbaru Kategori buku Pencarian Koleksi buku Login Waktu Game Wallpaper
Klik home maka akan tampil form home (T01)
Klik profil maka akan tampil form profil (T02)
Klik contact maka akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05)
Ketika login maka akan tampil form sesuai jabatan (T06 & T11)
59 | P a g e
Gambar 3.20 Antarmuka berita (T05) HOME PROFI CONTACT KOLEKSI BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Berita terbaru Kategori buku Pencarian Berita tarbaru Login Waktu Game Wallpaper
Klik home maka akan tampil form home (T01)
Klik profil maka akan tampil form profil (T02)
Klik contact maka akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05)
Ketika login maka akan tampil form sesuai jabatan (T06 & T11)
60 | P a g e
Gambar 3.21 Antarmuka form user (T06)
HOME PROFI CONTACT KOLEKSIBUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Kategori buku Pencarian Nama user : logout Sumbang buku Daftar buku anda
Biodata user
Berita terbaru
Daftar buku yang diupload user
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Ketika login maka
akan tampil form sesuai jabatan (T06 & T11)
61 | P a g e
Gambar 3.22 Antarmuka lupa password (T07)
Logo sekolah Username Home | Profile | Contact Lupa password Masukan Username Anda !
Belum punya account ?
Klik disini untuk
Klik username maka akan melanjutkan ke form sesuai jabatan (T06 & T11) Klik mendaftar
untuk menuju ke form pendaftaran (T08)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03)
62 | P a g e
Gambar 3.23 Antarmuka pendaftaran (T08)
Klik daftar maka akan melanjutkan ke form member (T06) Klik home maka
akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03)
Home | Profile | Contact
Logo sekolah Username password Confirm Password Nama lengkap Jenis kelamin Tanggal lahir Alamat Email Data Pribadi User ID reset
63 | P a g e
Gambar 3.24 Antarmuka upload data (T09)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Klik simpan maka
ebook akan tersimpan dan melanjutkan ke koleksi buku user (T10)
Klik sumbang buku maka akan tampil form upload (T09) Klik daftar buku
maka akan tampil form (T10)
HOME PROFIL CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Berita terbaru Kategori buku Nama user : logout Sumbang buku Daftar buku anda
Judul Penulis Penerbit Kategori Sinopsis Ebook browse Simpan Ulan Pencarian
64 | P a g e
Gambar 3.25 Antarmuka daftar buku yang diupload user (T10)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Klik sumbang buku
maka akan tampil form upload (T09) Klik daftar buku
maka akan tampil form (T10)
HOME PROFIL CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Berita terbaru Kategori buku Nama user : logout Sumbang buku Daftar buku anda
Daftar buku yang diupload user
Berita terbaru
65 | P a g e
Gambar 3.26 Antarmuka form admin (T11)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Klik post lalu berita
akan terimpan dan dilanjutkan ke form berita (T05) Klik logout maka
akan tampil form home (T01) Klik daftar buku
maka akan tampil form daftar buku (T10)
Klikdaftar user maka akan tampil form daftar user (T13) Klik berita di menu
admin maka akan menampilkan tampilan form post berita (T14) Klik approve buku
maka akan tampil form (T15)
HOME PROFIL CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Kategori buku pencarian MENU : Logout Daftar buku Daftar user Berita Approvebuku home
Data berita, data user, dan data buku yang belum di approve
Daftar buku terbaru
Post berita Berita terbaru
Berita terbaru
66 | P a g e
Gambar 3.27 Antarmuka daftar buku untuk edit atau hapus (T12)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Klik logout maka
akan tampil form home (T01) Klik daftar buku
maka akan tampil form daftar buku (T10)
Klikdaftar user maka akan tampil form daftar user (T13) Klik berita di menu
admin maka akan menampilkan tampilan form post berita (T14) Klik approve buku
maka akan tampil form (T15)
HOME PROFIL CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Kategori buku pencarian MENU : Logout Daftar buku Daftar user Berita Approvebuku home
Daftar buku untuk di edit atau hapus oleh admin
Berita terbaru
67 | P a g e
Gambar 3.28 Antarmuka daftar member untuk di edit atau hapus (T13)
Klik home maka akan tampil form home (T01) Klik profil maka akan
tampil form profil (T02)
Klik contact maka akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Klik logout maka
akan tampil form home (T01) Klik daftar buku
maka akan tampil form daftar buku (T10)
Klikdaftar user maka akan tampil form daftar user (T13) Klik berita di menu
admin maka akan menampilkan tampilan form post berita (T14) Klik approve buku
maka akan tampil form (T15)
HOME PROFIL CONTACT KOLEKSIBUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Kategori buku pencarian MENU : Logout Daftar buku Daftar user Berita Approvebuku home
Daftar member untuk di edit atau hapus oleh admin
Berita terbaru
68 | P a g e
Gambar 3.29 Antarmuka berita (T14)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Klik logout maka
akan tampil form home (T01) Klik daftar buku
maka akan tampil form daftar buku (T10)
Klikdaftar user maka akan tampil form daftar user (T13)
Klik berita di menu admin maka akan menampilkan tampilan form post berita (T14) Klik approve buku
maka akan tampil form (T15)
HOME PROFIL CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Kategori buku pencarian MENU : Logout Daftar buku Daftar user Berita Approvebuku home
Post isi berita
Berita terbaru judul pos t res et
69 | P a g e
Gambar 3.30 Antarmuka daftar buku yang belum di approve (T15)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Klik logout maka
akan tampil form home (T01) Klik daftar buku
maka akan tampil form daftar buku (T10)
Klikdaftar user maka akan tampil form daftar user (T13)
Klik berita di menu admin maka akan menampilkan tampilan form post berita (T14) Klik approve buku
HOME PROFIL CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Kategori buku pencarian MENU : Logout Daftar buku Daftar user Berita Approvebuku home
Daftar buku yang menunggu persetujuan admin
Berita terbaru
70 | P a g e
Gambar 3.31 Antarmuka edit data buku (T16)
Klik home maka akan tampil form home (T01) Klik profil maka
akan tampil form profil (T02) Klik contact maka
akan tampil form kontak (T03) Klik koleksi buku
maka akan tampil form koleksi buku (T04)
Klik berita maka akan tampil form berita (T05) Klik logout maka
akan tampil form home (T01) Klik daftar buku
maka akan tampil form daftar buku (T10)
Klikdaftar user maka akan tampil form daftar user (T13)
Klik berita di menu admin maka akan menampilkan tampilan form post berita (T14) Klik approve buku
maka akan tampil form (T15)
HOME PROFIL CONTACT KOLEKSI BUKU BERITA
Logo Sekolah BUKU BARU BUKU BARU BUKU BARU Kategori buku pencarian MENU : Logout Daftar buku Daftar user Berita Approvebuku home Judul Penulis Penerbit Kategori Sinopsis Ebook Choose Simpan Ulang Berita terbaru
71 | P a g e
Gambar 3.32 Antarmuka edit data member (T17)