BAB III PEMBAHASAN
3.1.5 Rancangan Program Aplikasi
3.1.5.2 Perancangan Antarmuka
Tahap ini adalah tahapan pembuatan rancangan antarmuka untuk digunakan pada website yayasan.
3.1.5.2.1 Perancangan Halaman Utama
Halaman utama merupakan halaman beranda. Halaman ini berisi tentang artikel dan info seputar yayasan yang sebelumnya telah admin tambahkan kedalam konten yayasan. Dalam halaman ini juga terdapat form login untuk admin mengelola website. Berikut adalah perancangan halaman beranda.
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Form Login
Alamat Yayasan
Peta Lokasi Yayasan Artikel / Info Yayasan
Footer T01
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
· Klik Login, jika benar akan masuk ke A01, jika salah akan masuk T01
· Klik menu Lihat Selengkapnya akan masuk ke S01
· Klik menu Beri Komentar akan masuk ke S01
Lihat Lengkap
Beri Komentar
43
3.1.5.2.2 Perancangan Halaman Baca Artikel
Halaman ini berisi tentang artikel yang admin tambahkan kedalam website. Baca Artikel merupakan baca selengkapnya dari yang di tampilkan di beranda.
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Artikel / Info Yayasan
Footer S01
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
· Klik kirim jika sesuai akan menambahkan komentar
Nama E-mail Komentar
Kirim Reset
44
3.1.5.2.3 Perancangan Halaman SMA / Sederajat
Halaman ini berisi tentang info tentang SMA / Sederajat yang termasuk kedalam yayasan Al-Mukhtariyah.
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Info SMA Sederajat
Footer T02
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
45
3.1.5.2.4 Perancangan Halaman MTs / Sederajat
Halaman ini berisi tentang info tentang MTs / Sederajat yang termasuk kedalam yayasan Al-Mukhtariyah.
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Info MTs Sederajat
Footer T03
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
46
3.1.5.2.5 Perancangan Halaman MI / Sederajat
Halaman ini berisi tentang info tentang MI / Sederajat yang termasuk kedalam yayasan Al-Mukhtariyah.
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Info MI Sederajat
Footer T04
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
47
3.1.5.2.6 Perancangan Halaman RA Sederajat
Halaman ini berisi tentang info tentang RA / Sederajat yang termasuk kedalam yayasan Al-Mukhtariyah.
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Info RA Sederajat
Footer T05
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
48
3.1.5.2.7 Perancangan Halaman Profil
Halaman ini berisi tentang profil Yayasan.
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Info Profil Yayasan
Footer T06
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
49
3.1.5.2.8 Perancangan Halaman Galeri
Halaman ini berisi tentang foto-foto galeri Yayasan.
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Foto Galeri
Footer T07
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
Gambar 3.17 Perancangan halaman galeri
3.1.5.2.9 Perancangan Halaman Menu Admin
Admin yang telah login dapat melakukan beberapa aktivitas pengolahan data. Menu yang disediakan bagi admin yang telah login antara lain :
1. Membuat artikel, yaitu halaman untuk menambah artikel terbaru yang akan dimunculkan di halaman beranda.
2. Edit artikel, yaitu halaman untuk mengubah suatu artikel yang telah tersimpan sebelumnya.
50 3. Hapus Artikel, yaitu halaman untuk menghapus artikel yang telah
tersimpan.
4. Log out, yaitu menu untuk keluar dari sistem.
Berikut ini rancangan halaman-halaman yang diperuntukkan bagi admin :
3.1.5.2.9.1 Rancangan Halaman Utama Menu Admin
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Isi Artikel
Footer A01
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
· Klik menu Lihat Selengkapnya akan masuk ke S01
· Klik menu Beri Komentar akan masuk ke S01
· Klik menu Buat Artikel akan masuk ke A02
· Klik menu Hapus akan masuk ke A03
· Klik menu Edit akan masuk ke A04
· Klik menu Logout akan masuk ke T01 Buat Artikel Logout Hapus Edit Beri Komentar Lihat Selengkapnya
51
3.1.5.2.9.2 Perancangan Halaman Buat Artikel
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Footer A02
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
Judul
Gambar
Isi
Simpan Ulang
52
3.1.5.2.9.3 Perancangan Halaman Hapus Artikel
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan
Footer A03
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
· Klik menu Buat Artikel akan masuk ke A01
· Klik menu Logout akan masuk ke T01
Buat Artikel
Logout Yakin Hapus Artikel ?
Hapus Batal
53
3.1.5.2.9.4 Perancangan Halaman Edit Artikel
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Footer A04
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
Judul
Gambar
Isi
Simpan Ulang
54
3.1.5.2.10 Perancangan Halaman Penanganan Kesalahan 3.1.5.2.10.1 Perancangan Halaman Gagal Login
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Pesan Kesalahan
GAGAL LOGIN
Footer S02
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
55
3.1.5.2.10.2Perancangan Halaman Gagal Upload Gambar
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Pesan Kesalahan
GAGAL UPLOAD
Footer S03
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
56
3.1.5.2.10.3 Perancangan Halaman Gagal Update Artikel
MI Sederajat
RA
Sederajat Profil Galeri MTs
Sederajat SMA
Sederajat Baranda
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Pesan Kesalahan
GAGAL UPDATE
Footer S04
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
· Klik menu MI Sederajat akan masuk ke T04
· Klik menu RA Sederajat akan masuk ke T05
· Klik menu Profil akan masuk ke T06
· Klik menu Galeri akan masuk ke T07
Gambar 3.24 Perancangan halaman gagal update gambar
3.1.5.2.10.4 Perancangan Pesan Wajib Isi
Gambar 3.25 Perancangan pesan wajib isi
M01
57