Perancangan Halaman Login Menu Admin Perancangan Halaman Utama Web Admin Perancangan Halaman Bantuan Web Admin Perancangan Halaman Pengelolaan Petugas Web Admin

4.2.2.1 Perancangan Halaman Login Menu Admin

Gambar. 4.19 Perancangan Halaman Login Admin backend

4.2.2.2 Perancangan Halaman Utama Web Admin

Gambar. 4.20 Perancangan Halaman Utama Web Admin backend Username : ‐ Ukuran layar menyesuaikan ‐ Font Times New Roman ‐ Warna,hitam - Isi Text 1 dan Text 2 lalu tekan Tombol 1 maka akan muncul tampilan T02 T01 Text 1 Username : Text 2 Password : Tombol 1 Username : ‐ Ukuran layar menyesuaikan ‐ Font Times New Roman ‐ Warna,hitam - Klik menu “File” dan klik Bantuan maka akan muncul tampilan T03. Serta tombol keluar untuk keluar dari aplikasi. - Klik menu “File Master” dan klik Kelola Petugas Maka akan muncul tampilan T04 - Klik menu “Cerita” dan klik Kelola Cerita Maka akan muncul tampilan T06 - Klik menu “Tentang” dan klik Pembuat Maka akan muncul tampilan T08 T02 Tombol 2 Home File Master Cerita Tentang CERITA ANAK INDONESIA

4.2.2.3 Perancangan Halaman Bantuan Web Admin

Gambar. 4.21 Perancangan Halaman Bantuan Web Admin backend

4.2.2.4 Perancangan Halaman Pengelolaan Petugas Web Admin

Gambar. 4.22 Perancangan Halaman Pengelolaan Petugas Web Admin backend Username : 1. Ukuran layar menyesuaikaKlik hyperlink“Edit” maka akan muncul tampilan T04. 2. Klik hyperlink “Hapus” maka akan menghapus data yang aktif di tabel. 3. Pilih Gambar 1 maka akan muncul tampilan T02. • Pilih Gambar 2 maka akan mUkuran layar menyesuaikan - Klik hyperlink “Menu Utama, atau “Pengelolaan Petugas”, atau Pengelolaan Cerita”. Maka Akan menampilan gambar serta keterangan cara penggunaan Program Web Admin T03 Bantuan Penggunaan Sistem 1. Menu Utama 2. Penglolaan Petugas 3. Pengelolaan Cerita Username : ‐ Ukuran layar menyesuaikan ‐ Font Times New Roman ‐ Warna,hitam - Klik hyperlink“Edit” maka akan muncul tampilan T05. - Klik hyperlink “Hapus” maka akan menghapus data yang aktif di tabel. - Pilih No petugas untuk pencarian petugas berdasarkan No. petugas. T04 EditHapus EditHapus EditHapus No Petugas Cari

4.2.2.5 Perancangan Halaman Pengisian Data Petugas Web Admin