Perancangan Antarmuka Perancangan Sistem

136 10. Perancangan Halaman Data Guru Admin T13 Logo Data Guru No Nip Nama Jenis Kelamin [Detail] Nama Cari E-Learning SMA Negeri 9 Bandung Halaman : First | Prevoius | 1 | 2 | Next | Last Uk uran Form 1024 x 768 Warna background abu - abu 11pt Font helvetica Menu Administrator Import Data Master Kelas Mata Pelajaran Tahun Ajaran Data Guru Data Sis wa Profiil Pengumuman Data Master Pembelajaran Profil dan Akun Mengajar Akun Pengumuman Tambah Data Guru Logout Administrator |Beranda | - Klik import data master maka akan menuju T 63 - Klik Tahun Ajaran maka akan menuju T 05 - Klik Beranda maka akan menuju T 04 - Klik Kelas mak a akan menuju T06 - Klik Mata Pelajaran maka ak an menuju T08 - Klik Data Siswa maka akan menuju T 15 - Klik Profil maka akan menuju T20 - Klik Akun maka akan menuju T64 - Klik Pengumuman maka akan menuju T21 - Klik Administrator mak a akan menuju T20 - Klik Mengajar maka akan menuju T 09 Gambar 3.44 Perancangan Halaman Data Guru Admin 11. Perancangan Halaman Detail Guru Admin Gambar 3.45 Perancangan Halaman Detail Guru Admin 137 12. Perancangan Halaman Data Siswa Admin Gambar 3.46 Perancangan Halaman Data Siswa Admin 13. Perancangan Halaman Detail Data Siswa Admin Gambar 3.47 Perancangan Halaman Detail Data Siswa Admin 138 14. Perancangan Halaman Profil Admin Gambar 3.48 Perancangan Halaman Profil 15. Perancangan Halaman Akun Admin Gambar 3.49 Perancangan Halaman Akun 139 16. Perancangan Halaman Pengumuman Admin Gambar 3.50 Perancangan Halaman Pengumuman 17. Perancangan Halaman Ubah Pengumuman Admin Gambar 3.51 Perancangan Halaman Ubah Pengumuman Admin 140 18. Perancangan Halaman Utama Guru Gambar 3.52 Perancangan Halaman Utama Guru 19. Perancangan Halaman Materi Guru Gambar 3.53 Perancangan Halaman Materi 141 20. Perancangan Halaman Kelola Materi Guru Gambar 3.54 Perancangan Halaman Kelola Materi 21. Perancangan Halaman Tugas Guru Gambar 3.55 Perancangan Halaman Tugas Guru 142 22. Perancangan Halaman Kelola Tugas Guru Gambar 3.56 Perancangan Halaman Kelola Tugas Guru 23. Perancangan Halaman Tugas Siswa Gambar 3.57 Perancangan Tugas Siswa Guru 143 24 Perancangan Halaman Akses Tugas Siswa Guru Gambar 3.58 Perancangan Halaman Akses Tugas Siswa Guru 25. Perancangan Halaman Soal Latihan Guru Gambar 3.59 Perancangan Halaman Soal Latihan Guru 144 26. Perancangan Halaman Kelola Soal Latihan Guru Gambar 3.60 Perancangan Halaman Kelola Soal Latihan Guru 27. Perancangan Halaman Profil Guru Gambar 3.61 Perancangan Halaman Profil Guru 145 28. Perancangan Halaman Akun Guru Gambar 3.62 Perancangan Halaman Akun Guru 29. Perancangan Halaman Forum Guru Gambar 3.63 Perancangan Halaman Tambah Tugas 146 30. Perancangan Halaman Kelola Forum Guru Gambar 3.64 Perancangan Halaman Kelola Forum Guru 31. Perancangan Halaman Topik Forum Guru Gambar 3.65 Perancangan Halaman Topik Forum Guru 147 32. Perancangan Halaman Pengumuman Guru Gambar 3.66 Perancangan Halaman Pengumuman 33. Perancangan Halaman Ubah Pengumuman Guru Gambar 3.67 Perancangan Halaman Ubah Pengumuman Guru 148 34. Perancangan Halaman Nilai Guru T59 Logo E-Learning SMA Negeri 9 Bandung Ukuran Form 1024 x 768 Warna background abu - abu 11pt Font helvetica Logout Guru | Beranda | - Klik Materi maka akan menuju T24 - Klik Tugas maka akan menuju T26 - Klik Tugas Siswa maka akan menuju T29 - Klik Soal Latihan maka akan menuju T31 - Klik Nilai maka akan menuju T59 - Klik Profil dan Akun maka akan menuju T34 - Klik Forum maka akan menuju T35 - Klik Pengumuman maka akan menuju T38 - Klik Beranda maka akan menuju T23 - Klik Guru maka akan menuju T34 Mata Pelajaran Kelas TIK X-1 Kelola Nilai TIK XI-IPA-4 Kelola Nilai Nilai Menu Guru Materi Latihan Soal Nilai Tugas Profiil Pengumuman Pembelajaran Profil dan Akun Akun Forum dan Pengumuman Forum Gambar 3.68 Perancangan Halaman Nilai 35. Perancangan Halaman Utama Siswa Gambar 3.69 Perancangan Halaman Utama Siswa 149 36. Perancangan Halaman Materi Siswa Gambar 3.70 Perancangan Halaman Materi Siswa 37. Perancangan Halaman Akses Materi Siswa Gambar 3.71 Perancangan Halaman Akses Materi Siswa 150 38. Perancangan Halaman Tugas Siswa Gambar 3.72 Perancangan Halaman Tugas Siswa 39. Perancangan Halaman Akses Tugas Siswa Gambar 3.73 Perancangan Halaman Akses Tugas Siswa 151 40. Perancangan Halaman Soal Latihan Siswa Gambar 3.74 Perancangan Halaman Soal Latihan Siswa 41. Perancangan Halaman Daftar Soal Latihan Siswa Gambar 3.75 Perancangan Daftar Soal Latihan Siswa 152 42. Perancangan Halaman Kerjakan Soal Latihan Siswa Gambar 3.76 Perancangan Halaman Kerjakan Soal Latihan Siswa 43. Perancangan Halaman Nilai Siswa Gambar 3.77 Perancangan Halaman Nilai Siswa 153 44. Perancangan Halaman Profil Siswa Gambar 3.78 Perancangan Profil dan Akun Siswa 45. Perancangan Halaman Forum Siswa Gambar 3.79 Perancangan Halaman Forum Siswa 154 46. Perancangan Halaman Masuk Forum Siswa Gambar 3.80 Perancangan Halaman Masuk Forum Siswa 47. Perancangan Halaman Pengumuman Siswa Gambar 3.81 Halaman Pengumuman Siswa 155 48. Perancangan Halaman Akun Siswa Gambar 3.82 Halaman Akun Siswa 49. Perancangan Halaman Utama Kepala Sekolah Gambar 3.83 Perancangan Halaman Utama Kepala Sekolah 156 50. Perancangan Halaman Grafik Aktivitas Guru Gambar 3.84 Perancangan Halaman Grafik Aktivitas Guru Kepala Sekolah 51. Perancangan Halaman Grafik Nilai Kepala Sekolah Gambar 3.85 Perancangan Halaman Grafik Nilai Kepala Sekolah 157 52. Perancangan Halaman Profil Kepala Sekolah Gambar 3.86 Perancangan Halaman Profil Kepala Sekolah 53. Perancangan Halaman Akun Kepala Sekolah Gambar 3.87 Perancangan Halaman Akun Kepala Sekolah 158

3.5.5 Perancangan Pesan

Berikut adalah perancangan pesan yang digunakan dalam sistem yang akan dibanngun. 159 Gambar 3.88 Perancangan Pesan 160

3.5.6 Jaringan Semantik

Struktur aplikasi dijelaskan secara terperinci dengan dibuat menjadi modul- modul kecil yang mudah dibuat, dites dan dimodifikasi. Dalam pembuatan aplikasi ini menggunakan bantuan bagan struktural yang disebut juga jaringan semantik. Berikut adalah jaringan semantik yang menggambarkan struktur dari aplikasi ini. 1. Jaringan Semantik Administrator T02 M5 T04 T05 T06 T63 T08 T09 T13 T10 T14 T15 T16 T20 T21 T22 M7 M7 M7 M1, M3, M4 M7 M7 M2 M2 M1 M2 Gambar 3.89 Jaringan Semantik Admin 161

2. Jaringan Semantik Kepala Sekolah

Gambar 3.90 Jaringan Semantik Kepala Sekolah 162

3. Jaringan Semantik Guru

Gambar 3.91 Jaringan Semantik Guru 163

4. Jaringan Semantik Siswa

Gambar 3.92 Jaringan Semantik Siswa

3.5.7 Perancangan Prosedural

Perancangan prosedural mentransformasi elemen-elemen struktural dari arsitektur program ke dalam suatu deskripsi prosedural dari komponen-komponen perangkat lunak. Adapun perancangan prosedural untuk aplikasi yang akan dibangun adalah sebagai berikut: