110
4. Perancangan State Transition Diagram
a. State Transition Diagram Halaman Siswa
Gambar 4.20. State Transition Diagram Halaman Siswa
111
Siswa yang tidak melakukan login hanya dapat melihat halaman menu utama yang berisi Profil
sekolah, Berita terkini, info – info tentang sekolah
yang disediakan untuk informasi umum, kemudian siswa yang telah melakukan login maka akan dapat
melakukan proses untuk melihat jadwal mata pelajaran,
jadwal UAS
dan UTS,
daftar nilai,pembayaran serta rapor.
112
b. State Transition Diagram Halaman Staf Tata usaha
Gambar 4.21. State Transition Diagram Halaman Staf Tata Usaha
113
Gambar diatas merupakan perancangan halaman Staf yang berbasis web yang digunakan oleh Staf untuk
mengelola sistem, melakukan penambahan, perubahan, dan penghapusan data
– data informasi akademik pada database yang akan digunakan user.
c. State Transition Diagram Halaman Guru
Gambar 4.22. State Transition Diagram Halaman Guru
Gambar diatas merupakan perancangan halaman Guru yang berbasis web, berguna bagi Guru untuk melakukan
pengolahan data nilai yang dibutuhkan oleh siswa.
114
d. State Transition Diagram Halaman Walikelas
Gambar 4.23. State Transition Diagram Halaman Walikelas
Gambar diatas merupakan perancangan halaman Wali kelas yang berbasis web, berguna bagi Wali kelas untuk
melakukan pengolahan data rapor yang dibutuhkan oleh siswa.
5. Perancangan Antarmuka
Dalam perancangan antarmuka aplikasi sistem informasi akademik yang berbasis WAP ini, dibuat beberapa form yang
akan ditampilkan, terdapat dua jenis form yang ditampilkan, yang pertama berbasis WAP yang digunakan oleh muird dan orang tua
murid, kemudian dengan berbasis web yang akan digunakan oleh Staf, Guru dan Wali kelas.
115
a. Desain Tampilan pada WAP
1 Halaman Menu Utama
Halaman menu utama merupakan tampilan dari menu utama yang menghubungkan dengan halaman
informasi lainnya.
Gambar 4.24. Rancangan halaman menu utama
116
2 Halaman Profil
Halaman ini digunakan untuk menampilkan profil singkat SMP PERWIRA Jakarta, terdapat juga
informasi mengenai sejarah singkat, visi dan misi, dan fasilitas dan ekstrakulikuler. Halaman ini dapat
diakses oleh user yang tidak login.
Gambar 4.25. Rancangan halaman profil
3 Halaman Berita
Halaman berita terkini berisi tentang berita –
berita yang terbaru saat ini.
Gambar 4.26. Rancangan halaman berita
117
4 Halaman Info
Halaman info berisi tentang info yang ada dilingkungan sekolah. Halaman ini dapat diakses oleh
user yang tidak login.
Gambar 4.27. Rancangan halaman info – info
5 Halaman Tentang Kami
Halaman tentang kami berisi tentang kontak person dan alamat sekolah. Halaman ini dapat diakses
oleh user yang tidak login.
Gambar 4.28. Rancangan halaman Tentang kami
118
6 Halaman Login
Pada halaman ini bagi user, yaitu siswa dan orang tua atau wali siswa harus memasukan NIS dan
password yang sesuai dengan miliknya, NIS dan password akan diberikan kepada setiap siswa dan
orang tua atau wali siswa.
Gambar 4.29. Rancangan halaman login
7 Halaman konfirmasi
Apabila NIS dan password yang dimasukan tidak sesuai atau salah maka akan dimunculkan
halaman konfirmasi, sebagai pemberitahuan proses login telah gagal.
Gambar 4.30. Rancangan halaman konfirmasi
119
8 Halaman Login Sukses
Apabila NIS dan password yang dimasukan sesuai maka user akan masuk ke halaman login
sukses.
Gambar 4.31. Rancangan halaman login sukses
9 Halaman Jadwal Pelajaran
Halaman jadwal pelajaran merupakan halaman dimana user dapat melihat jadwal pelajaran yang
ingin ditampilkan sesuai hari yang diinginkan.
Gambar 4.32. Rancangan halaman jadwal
120
10 Halaman Nilai
Halaman nilai merupakan halaman dimana user dapat melihat nilai yang telah diberikan oleh guru
sesuai dengan matapelajaran dan semester yang diinginkan oleh user. Nilai yang ditampilkan terdiri
dari nilai UAS, UTS, Rapor.
Gambar 4.33. Rancangan halaman nilai
11 Halaman Rapor
Halaman rapor merupakan halaman dimana user dapat melihat data rapor yang telah diisi oleh wali
kelas masing – masing sesuai dengan semester.
Gambar 4.34. Rancangan halaman rapor
121
12 Halaman Bayaran
Halaman bayaran menampilkan bulan beserta keterangan pembayaran apakah telah lunas atau
belum.
Gambar 4.35. Rancangan halaman bayaran
b. Desain Tampilan pada Web
1 Halaman index User Tata Usaha, Guru, Wali kelas
Pada halaman ini akan menampilkan info singkat untuk semua user, beserta form login untuk
masing masing user.
Gambar 4.36. Rancangan halaman index
122
2 Halaman login
Pada halaman ini, setelah pilihan login maka user, akan masuk ke halaman login, disini user
diminta memasukan user_id dan password masing –
masing.
Gambar 4.37. Rancangan halaman login
3 Halaman Beranda Staf Tata Usaha
Halaman beranda staf tata usaha akan menampilkan menu yang akan terhubung dengan data
siswa, mata pelajaran, kelas, wali kelas, jadwal pelajaran, jadwal UTS, jadwal UAS, guru, berita,
bayaran.
Gambar 4.38. Rancangan halaman menu utama tata usaha
123
4 Halaman siswa
Pada halaman siswa akan menampilkan data siswa yang ada di database, lalu ada pilihan menu
untuk menambah, menghapus atau merubah data siswa.
Gambar 4.39. Rancangan halaman siswa
Pada halaman edit atau tambah siswa akan tampil form untuk mengubah atau menambah data
siswa
Gambar 4.40. Rancangan halaman form edit atau tambah siswa
124
5 Halaman matapelajaran
Pada halaman mata pelajaran akan ditampilkan data mata pelajaran yang akan digunakan disekolah
Gambar 4.41. Rancangan halaman mata pelajaran
Pada halaman edit atau tambah matapelajaran tampil form untuk mengubah atau menambah data
mata pelajaran.
Gambar 4.42. Rancangan halaman form edit atau tambah mata pelajaran.
125
6 Halaman kelas
Halaman kelas akan menampilkan daftar kelas yang ada, lalu ada pilihan menu untuk menambah,
menghapus atau merubah data kelas.
Gambar 4.43. Rancangan halaman kelas
Halaman rubah atau tambah kelas menampilkan form untuk merubah atau menambah data
Gambar 4.44. Rancangan form edit atau tambah kelas
126
7 Halaman wali kelas
Halaman wali kelas menampilkan data wali kelas dari setiap kelas, lalu ada pilihan menu untuk
menambah. Menghapus atau merubah data.
Gambar 4.45. Rancangan halaman wali kelas
Halaman tambah atau rubah wali kelas menampilkan form untuk menambah atau mengubah
data wali kelas.
Gambar 4.46. Rancangan halaman form edit atau tambah walikelas.
127
8 Halaman Jadwal Pelajaran
Halaman jadwal pelajaran menampilkan jadwal pelajaran dari masing
– masing kelas dengan memilih terlebih dahulu kelas yang akan dilihat.
Gambar 4.47. Rancangan halaman jadwal pelajaran
Halaman tambah atau ubah jadwal pelajaran menampilkan form untuk menambah atau mengubah
data jadwal pelajaran.
Gambar 4.48. Rancangan halaman form edit atau tambah jadwal pelajaran.
128
9 Halaman jadwal UTS
Halaman jadwal menampilkan jadwal UTS dari masing
– masing kelas dengan memilih terlebih dahulu kelas yang akan dilihat.
Gambar 4.49. Rancangan halaman jadwal UTS
Halaman tambah atau ubah jadwal UTS menampilkan form untuk menambah atau mengubah
data jadwal UTS.
Gambar 4.50. Rancangan halaman form edit atau tambah jadwal UTS
129
10 Halaman Jadwal UAS
Halaman jadwal menampilkan jadwal UAS dari masing
– masing kelas dengan memilih terlebih dahulu kelas yang akan dilihat.
Gambar 4.51. Rancangan halaman jadwal UAS
Halaman tambah atau ubah jadwal UAS menampilkan form untuk menambah atau mengubah
data jadwal UAS.
Gambar 4.52. Rancangan halaman form edit atau tambah jadwal UAS
130
11 Halaman guru
Halaman guru menampilkan daftar guru yang ada, lalu terdapat pilihan menu untuk hapus, tambah
atau ubah.
Gambar 4.53. Rancangan halaman guru
Halaman tambah atau ubah guru menampilkan form untuk tambah dan rubah guru.
Gambar 4.54. Rancangan halaman form edit atau tambah guru
131
12 Halaman berita
Halaman berita menampilkan daftar berita yang ada, kemudian terdapat menu pilihan untuk tambah,
hapus dan ubah.
Gambar 4.55. Rancangan halaman berita.
Halaman ubah atau tambah berita akan menampilkan form untuk ubah dan tambah berita.
Gambar 4.56. Rancangan halaman form edit atau tambah berita.
132
13 Halaman bayaran
Halaman bayaran menampilkan daftar bayaran tiap siswa dengan terlebih dahulu memilih kelas dan
siswa.
Gambar 4.57. Rancangan halaman bayaran.
Halaman rubah atau tambah berita akan menampilkan form untuk rubah atau tambah data
bayaran.
Gambar 4.58. Rancangan halaman form edit atau tambah bayaran.
133
14 Halaman beranda guru
Halaman beranda guru terhubung dengan data nilai, jadwal pelajaran, uts dan uas untuk siswa. Disini
user memiliki hak untuk pengolahan nilai siswa.
Gambar 4.59. Rancangan halaman utama guru
15 Halaman nilai
Disini guru akan memilih siswa yang akan diubah nilainya.
Gambar 4.60. Rancangan halaman nilai
Halaman tambah atau rubah nilai menampilkan form untuk menambah atau merubah nilai pada siswa.
Gambar 4.61. Rancangan halaman form edit atau tambah nilai.
134
16 Halaman beranda wali kelas
Halaman beranda wali kelas terhubung dengan data rapor untuk siswa. Disini user memiliki hak
untuk pengolahan rapor siswa.
Gambar 4.62. Rancangan halaman utama wali kelas
17 Halaman rapor
Halaman rapor akan menampilkan daftar rapor , nilai akhir dan rata
– rata nilai dari tiap siswa
Gambar 4.63. Rancangan halaman rapor.
Halaman tambah atau rubah menampilkan form untuk melakukan penambahan atau perubahan data
rapor.
Gambar 4.64. Rancangan halaman form edit atau tambah rapor.
135
4.2.3. Fase Konstruksi
Pada fase ini, dilakukan pengkodean terhadap rancangan- rancangan yang telah didefinisikan sebelumnya menggunakan bahasa
pemrograman PHP 5.2.5 dan WML 1.0., MySQL 5.0.51.sebagai basis datanya, Apachewin32 2.2.8. sebagai web server, semua tergabung
dalam XAMPP 1.6.6a. Untuk pengolahan gambar digunakan photoshop 7.0. sedangkan untuk pengkodean aplikasi ini menggunakan software
Dreamweaver 8.0, untuk mengedit source code program, sebuah ponsel dengan fitur WAP, mozzilla firefox sebagai microbrowsernya.
Adapun coding aplikasi WAP untuk layanan informasi akademik ini, dapat dilihat pada lampiran I.
4.2.4. Fase Pelaksanaan Implementasi
Pengujian yang dilakukan terhadap aplikasi sistem informasi akademik ini adalah pengujian dengan metode blackbox. Pengujian
dilakukan dengan menjalankan semua fungsi dan fitur yang ada dari aplikasi ini dan kemudian dilihat apakah hasil dari fungsi-fungsi
tersebut sesuai dengan yang diharapkan.
Untuk Aplikasi WAP dijalankan dengan menggunakan sebuah ponsel yang dilengkapi fasilitas internet,
kemudian untuk aplikasi Web dijalankan dengan menggunakan web browser di komputer, client dan user mencoba melakukan proses input dan
menghasilkan output sesuai dengan yang diharapkan.
136
1. Konfigurasi WAP
Kategori