Rancangan Antar Muka Perancangan Design

91

1.6.6 Rancangan Antar Muka

1. Halaman Utama Website WSI 1. Halaman Utama Home Gambar 4.17 Halaman Home Utama 2. Halaman Profile Gambar 4.18 Halaman Profile Contact Online HOME Register Login Contact Advantage Guestbook Profile Home Link Logo Banner PROFILE Register Login Contact Advantage Guestbook Profile Home Link Logo Banner 92 3. Halaman Advantage Gambar 4.19 Gambar Halaman Advantage 4. Halaman Guestbook Gambar 4.20 Gambar Halaman Guestbook ADVANTAGE Register Login Contact Advantage Guestbook Profile Home Link Logo Banner Name : Email : Register Login Contact Advantage Guestbook Profile Home Link Logo Banner Send Cancel From : Date Email Review Comment Review 93 5. Halaman Contact Gambar 4.21 Gambar Halaman Contact 6. Halaman Login Gambar 4.22 Gambar Pilih Login Register Login Contact Advantage Guestbook Profile Home Link Logo Banner MAP Address Telp :: Choose To Login :: Register Login Contact Advantage Guestbook Profile Home Link Logo Banner Admin Guest Student 94 7. Halaman Register Gambar 4.23 Gambar Halaman Register 2. Halaman Otorisasi Admin 1. Halaman Login Admin Gambar 4.24 Gambar Halaman login Admin Fullname : Gender : Address : Telephone : Mobilephone : Username : Email : Password : Verify Password : Register Login Contact Advantage Guestbook Profile Home Link Logo Banner Submit Username : Password : : Register Login Contact Advantage Guestbook Profile Home Link Logo Banner Login :: Login Admin :: 95 2. Home Gambar 4.25 Gambar Home pada Admin 3. Guest Gambar 4.26 Gambar halaman guest untuk admin Logout Student Guest Home Logo Banner Welcome To Authorized page of Administrator of Wall Street Institute Logout Student Guest Home Logo Banner Olah Appointment Olah Register Olah Guestbook 96 3.1 Olah Guestbook Gambar 4.27 Gambar olah guestbook pada laman admin 3.2 Olah Register Gambar 4.28 Gambar olah register pada laman admin Logo Banner Luvillalive.com Fridaaayblah.co Email Villa Friday K. Name www.luvilla.com 1 Homepage Seems good Great course Comment Delete | Edit Delete | Edit Action Back :: Olah Guestbook :: Logo Banner M F Gender Reza Friday K. Name Bintaro Address Back :: Olah Register :: 9777101 6718100 Phone 085656565 081119999 Mobile zareza fay Username Sya.rzlive. com faygmail.c om Email zareza fayfay Password zareza fayfay Password 2 97 3.3 Olah Appointment Halaman ini dibuat untuk mengganti atau mengubah data yang ada pada Appointment. Gambar 4.29 Gambar olah appointment pada laman admin 4. Student Gambar 4.30 Gambar olah student pada laman admin Logo Banner Date Name Time AE Delete | Edit Delete | Edit Action Back :: Olah Appointment :: Message Logout Student Guest Home Logo Banner Olah Schedule Olah Student Olah Booking 98 4.1 Olah booking Gambar 4.31 Gambar olah booking pada laman admin Logo Banner Name Studentcode Level Back :: Olah Booking :: Class Tittle Date Time Phone Edit | Delete Action 99 4.2 Olah Student Halaman ini dibuat untuk mendata siswa – siswi WSI dan menyimpannya dalam database dan mengubah data siswa apabila ada kesalahan. Gambar 4.32 Gambar olah student pada laman admin Logo Banner Name Studentcode Email Back :: Olah Student :: Mobile Reeceipt No AE Start-End Edit | View Action 100 4.3 Olah Schedule Halaman ini berfungsi untuk menghapus jadwal yang sudah lewat dan mengubah data jadwal yang salah. Gambar 4.33 Gambar olah schedule pada laman admin :: Olah Schedule :: Day Date : Session : Time : Class : Level : Tittle : Native : Logo Banner Submit :: Schedule Table :: Sessio n Date Time Time Back Class Level Tittle Native Edit | Delete Action 101 3. Halaman Otorisasi Guest 3.1 Login Guest Gambar 4.34 Gambar Login Guest 3.2 Guest Home Gambar 4.35 Gambar home pada laman guest Username : Password : : Register Login Contact Advantage Guestbook Profile Home Logo Banner Login :: Login Guest :: Appointment Price List Level Home Logo Banner Welcome To Guest’s page of Wall Street Institute Logout 102 3.3 Page of Level Halaman ini sebagai penjelasan mengenai tingkatan kelas yang ada di WSI. Dan sebagai media informasi tambahan bagi calon siswa – siswi WSI. Gambar 4.36 Gambar level pada laman guest Appointment Price List Level Home Logo Banner Level Logout 103 3.4 Page of Price List Memudahkan calon siswa atau guest untuk menentukan banyaknya level yang akan diambil dengan menyesuaikan anggaran biaya masing – masing. Gambar 4.37 Gambar Price list package pada laman guest Appointment Price List Level Home Logo Banner Logout :: Schedule Table :: Price Level package Price Level 104 3.5 Page of Appointment Halaman Appointment ini dibuat sebagai media penghubung antara guest dengan Account Executive WSI sebagai konsultan kursus bahasa inggris di WSI. Gambar 4.38 Gambar appointment pada laman guest :: Appointment :: Name : Day Date : Time : AE : Message : Logo Banner Submit Cancel Appointment Price List Level Home Logout 105 2. Halaman Otorisasi Student 3.1 Login Student Gambar 4.39 Gambar Login student 3.2 Student Home Merupakan halaman utama dari halaman untuk siswa Gambar 4.40 Gambar home pada laman student Username : Password : : Register Login Contact Advantage Guestbook Profile Home Logo Banner Login :: Login Student :: Data Study Record Schedule Booking Home Logo Banner Welcome To Student page of Wall Street Institute Logout 106 3.3 Booking Inilah salah satu halaman terpenting yang merupakan otak dari aplikasi sistem informasi akademik di WSI karena booking melatarbelakangi dibuatnya pengembangan sistem informasi yang penulis buat. Gambar 4.41 Gambar booking class pada laman student :: Booking Class :: Student code : Name : Level : Class : Tittle : Date : Logo Banner Submit Cancel Back 107 3.4 Schedule Halaman schedule ini diperuntukkan bagi siswa – siswi agar dapat melihat langsung jadwal kelas dan memilih langsung kelas yang ingin dipesan sehingga tidak perlu mendatangi venue. Gambar 4.42 Gambar schedule table pada laman student Logo Banner :: Schedule Table :: Sessio n Date Time Time Back Class Level Tittle Native 108 3.5 Data Study Record Halaman ini dibuat untuk memberikan informasi kepada siswa – siswi Wall Street Institute agar dapat memperbaiki track records -nya sebagai siswa – siswi yang baik, yaitu dengan menghadiri setiap kelas yang telah dipesan. Selain itu, halaman Data study record sebagai acuan guru untuk mengetahui perkembangan siswa – siswi yang bersangkutan. Gambar 4.43 Gambar Data study record pada laman student Logo Banner :: Data Study Record :: Name Student code Level Back Class Attendance Date Time 109

4.6.7 Aktifitas Member dalam