BAB II LANDASAN TEORI
4.2. Desain / Perancangan Sistem Akses Informas
4.2.4. Perancangan Antar Muka ( Interface Design )
Perancangan antar muka yang dimaksud untuk menggambarkan pilihan masukan dari user berupa menu-menu kemudian dilakukan proses pemanggilan data yang tersedia dalam database server dan menjadikan keluaran (output). Perancangan tampilan input sebagai berikut :
a. Design tampilan pada WAP
1. Halaman Utama
Halaman utama yang dibuat berisi beberapa program yang sifatnya statis. Fungsi halaman utama selain sebagai index juga terdapat beberapa halaman informasi dan menu yang menghubungkan dengan program utama lainnya.
a) Halaman Index
Pada saat pertama kali halaman WAP diakses, program akan menampilkan ucapan “Selamat Datang”. Halaman index ini akan muncul selama duapuluh lima detik, kemudian akan segera berganti menuju kehalaman Menu Utama (Home).
b) Halaman Menu Utama (Home)
Dari halaman Index, setelah duapuluh lima detik, halaman akan brpindah pada file Home. Halaman ini berisi daftar menu yang dapat menghubungkan dengan halaman informasi lainnya.
Gambar 4.48. Rancangan Tampilan Home pada WAP
2. Halaman Syarat
Halaman ini digunakan untuk menampilkan daftar syarat- syarat untuk mlakukan akses pada layanan informasi akademik berbasis WAP.
Gambar 4.49. Rancangan Tampilan halaman Syarat pada WAP
3. Halaman Anggota
Halaman member merupakan sebuah pintu utama dimana
user harus memasukkan NIS dan password yang sesuai dengan apa yang telah didaftarkan, tujuan utama dari halaman login
adalah untuk autentifikasi keamanan sistem. Sebagai validasinya, maka NIS dan password akan disamakan sesuai yang tertera pada tabel siswa. Wali siswa yang ingin mengakses informasi anaknya harus mengetahui NIS dan passwordnya.
Title Header Kembali LOGO NIS Password PROSES
Gambar 4.50. Rancangan Tampilan login anggota pada WAP
4. Halaman Konfirmasi
Jika NIS dan password yang dimasukkan salah atau tidak dikenali sistem maka akan muncul halaman konfirmasi bahwa proses login gagal.
Gambar 4.51. Rancangan Tampilan konfirmasi login gagal pada WAP
Apabila ingin mengulangi proses login, dapat dipilih link
Ulangi, maka program akan membawa ke halaman login user
dan apabila ingin keluar dari sistem maka pilih Keluar.
5. Halaman Login Sukses
Jika NIS dan password sesuai dengan yang ada pada data base system maka akan muncul tambilan sebagai berikut :
Gambar 4.52. Rancangan Tampilan login sukses pada WAP
6. Halaman Jadwal
Pada halaman ini user yang telah mendapat hak akses diminta untuk memasukkan hari yang diinginkan untuk menampilkan jadwal yang ada pada hari itu.
Gambar 4.53. Rancangan Tampilan akses jadwal
7. Halaman Nilai
Halaman ini dapat ditampilkan jika user telah memasukan data yang diperlukan oleh sistem dan valid. Nilai siswa yang dapat ditampilkan, yang terdiri dari nilai UTS dan nialai UAS.
8. Halaman Rapor
User yang telah mendapat akses dapat melihat hasil rapor siswa
Gambar 4.55. Rancangan Tampilan permintaan hasil rapor siswa
9. Halaman Profil MALHIKDUA
Halaman profil MALHIKDUA digunakan untuk menampilkan profil singkat dari Madrasah Aliyah Al Hikmah 2 Brebes dan terdapat beberapa informasi tentang Alamat, Program dan Spesifikasi yang dimiliki oleh MALHIKDUA. Data profil dibuat dalam file yang berekstensi .wml sehingga
Gambar 4.56. Rancangan Tampilan halaman Profil
10. Halaman Hot News
Halaman Hot News merupakan halaman yang berisikan tentang berita yang ada di lingkungan sekolah, Pondok Pesantren ataupun peristiwa menghebohkan yang ada di luar lingkungan Pondok. Halaman ini dapat diakses oleh user yang tidak login.
b. Design tampilan pada WEB
1) Tampilan Index untuk User (Tata Usaha, Wali Kelas, Guru Matapelajaran)
Gambar 4.58. Rancangan tampilan index pilihan user
Pada tampilan awal user diharuskan untuk memilih, apakah user akan masuk sebagai Tata Usaha, Guru Matapelajaran ataukah sebagai Wali Kelas.
2) Tampilan Login untuk User
Gambar 4.59. Rancangan tampilan login user
Setelah user menentukan pilihan pada halaman index sebelumnya, maka akan tampil dimana mereka harus login, untuk masuk dan mengelola sistem sesuai yang telah ditentukan.
Untuk masuk halaman berikutnya dan agar bisa mengelola datanya user diwajibkan untuk mengisi id user, dan password sesuai yang telah didaftarkan pada pengelola.
3) Tampilan Halaman Utama Tata Usaha
Halaman utama tata usaha ini menampilkan menu yang akan terhubungkan dengan halaman data siswa, data matapelajaran, data kelas, data wali kelas, data jadwal pelajaran, data guru matapelajaran, data jadwal UTS, data jadwal UAS, data berita dan tombol untuk keluar.
Tombol keluar untuk keluar dari aplikasi ini, tombol homepage untuk kembali pada halaman utama jika sedang berada pada halaman lain.
4) Tampilan web untuk halaman input dan output data siswa
Gambar 4.62. Rancangan tampilan halaman input atau edit data siswa
5) Tampilan web untuk halaman data matapelajaran
Gambar 4.63. Rancangan tampilan halaman data Matapelajaran
Gambar 4.64. Rancangan tampilan halaman input atau edit data matapelajaran
6) Tampilan web untuk halaman data kelas
Gambar 4.66. Rancangan tampilan halaman input atau edit data kelas
7) Tampilan web untuk halaman data wali kelas
Gambar 4.68. Rancangan tampilan halaman input atau edit data wali kelas
8) Tampilan web untuk halaman data jadwal pelajaran
Gambar 4.70. Rancangan tampilan halaman input atau edit data jadwal pelajaran, jadwal UTS, jadwal UAS
9) Tampilan web untuk halaman data guru matapelajaran
Gambar 4.71. Rancangan tampilan halaman data Guru Matapelajaran
Gambar 4.72. Rancangan tampilan halaman input atau edit data Guru
Matapelajaran
10) Tampilan web untuk halaman data jadwal UTS
11) Tampilan web untuk halaman data jadwal UAS
Gambar 4.74. Rancangan tampilan halaman data Jadwal UAS
Gambar 4.75. Rancangan tampilan halaman data Jadwal matapelajaran, jadwal UTS dan Jadwal UAS jika di View
12) Tampilan web untuk halaman data berita
Gambar 4.76. Rancangan tampilan halaman data Berita sekolah
Gambar 4.78. Rancangan tampilan halaman input atau edit data Berita sekolah
13) Tampilan Halaman Utama Guru Matapelajaran
Gambar 4.79. Rancangan tampilan halaman utama guru matapelajaran
Halaman utama pada guru matapelajaran hanya terhubung pada data nilai, karena guru matapelajaran hanya mengolah nilai-nilai siswa.
Tombol keluar untuk keluar dari aplikasi ini, tombol homepage untuk kembali pada halaman utama jika sedang berada pada halaman lain.
14) Tampilan web untuk halaman nilai untuk user Guru Matapelajaran
Gambar 4.81 Rancangan tampilan halaman input atau edit data Nilai
15) Tampilan Halaman Utama Wali Kelas
Gambar 4.82. Rancangan tampilan halaman utama wali kelas Halaman utama pada wali kelas hanya terhubung pada data rapor, karena wali kelas hanya mengolah rapor siswa yang dibimbingnya.
Tombol keluar untuk keluar dari aplikasi ini, tombol homepage untuk kembali pada halaman utama jika sedang berada pada halaman lain.
16) Tampilan web untuk halaman rapor untuk user Wali kelas
Gambar 4.84 Rancangan tampilan halaman input atau edit data Nilai
4.3.Pembuatan (Construction)