51 Bab IV Analisa Perancangan Desain 4.1 User Interface Pada bab ini di gambarkan mengenai user interface dari sistem yang akan di buat, yang merupakan bentuk tampilan grafis yang berhubungan langsung dengan pengguna. Antar muka atau User Interface berfungsi untuk menghubungkan antara pengguna dengan siste oprasi, sehingga sistem tersebut dapat berguna 4.2 Struktur Tampilan 4.2.1. Tampilan Menu Admin Menu Utama HOME LOGOUT PROFIL GURU KELAS PELAJARAN NILAI ABSEN LATIHAN PENGUMUMAN FORUM QUISIONER Gambar 4.1 Perancangan Layar Halaman Utama Admin
52 4.2.2. Tampilan Menu Guru dan Siswa Menu Utama HOME PROFIL GURU PELAJARAN NILAI ABSEN LATIHAN FORUM QUISIONER LOGOUT 4.3. Rancangan Layar 4.3.1 Tampilan Home Page Gambar 4.2 Perancangan Layar Halaman Utama Guru dan Siswa Gambar 4.3 Perancangan Layar Home Page
53 Tampilan ini adalah tampilan home page atau halaman utama sistem e-learning SMA N 3 Kabupaten Tangerang. Pada halaman utama ini terdapat empat pilihan menu, yaitu home, profil, organisasi dan login. Kemudian terpadat kalender dan map yang menunjukan wilayah sekolah berada. Dan pada halaman ini juga terpadat beberapa slide show foto dari SMA N 3 Kabupaten Tangerang dan sejarah singkat tentang sekolah. Tabel 4.1 Tabel Home Page 1. Image Field Logo, kalender, map, foto sekolah 2. Label Field Nama sekolah, SMA N 3 Kabupaten Tangerang 3. Text Field Isi SMA N 3 Kabupaten Tangerang 4. Button Home, profil, organisasi, log in 4.3.2 Tampilan Profil Gambar 4.4 Perancangan Layar Profil
54 Tampilan ini adalah tampilan dari menu profil yang menjelaskan visi dan misi dari SMA N 3 Kabupaten Tangerang. Pada halaman ini juga terdapat beberapa poin penting penjelasan tentang visi dan misi sekolah pada tampilan ini untuk para siswa. Tabel 4.2 Tampilan Profil 1. Image Field Logo, kalender, map 2. Label Field Nama sekolah, visi dan misi 3. Text Field - 4. Button Home, profil, organisasi, log in 4.3.3 Tampilan Layar Organisasi Gambar 4.5 Perancangan Layar Organisasi
55 Tampilan ini adalah tampilan dari menu organisasi yang menjelaskan tentang beberapa organisasi yang ada di SMA N 3 Kabupaten Tangerang. Pada halaman ini terpadat beberapa video dan penjelasan dari masing-masing organisasi yang ada. Tabel 4.3 Tampilan Organisasi 1. Image Field Logo, kalender, map 2. Label Field Nama sekolah, organisasi, paskibra 3. Text Field Isi paskibra 4. Button Home, profil, organisasi, log in, video, halaman 4.3.4 Tampilan Log In Gambar 4.6 Perancangan Layar Log In
56 Tampilan ini adalah tampilan menu log in untuk para user ( admin, guru dan siswa ). Pada halaman ini para user harus melakukan log in untuk masuk ke sistem e-learning. User ( admin, guru dan siswa ) harus terlebih dahulu mempunyai akun untuk dapat masuk ke sistem e- learning. Jika user ( admin, guru dan siswa ) sudah mempunyai akun bisa langsung log in dengan memasukan username dan password lalu klik tombol log in, jika berhasil sistem akan langsung menampilkan sistem e-learning, jika tidak berhasil user ( admin, guru dan siswa ) akan kembali ke menu ini. Tabel 4.4. Tampilan Log In 1. Image Field Logo, foto profil, log in, kalender, map 2. Label Field Nama sekolah, log in, username, password 3. Text Field Username, password 4. Button Home, profil, organisasi, log in, buat akun, log in 4.3.5 Tampilan Buat Akun Log In Gambar 4.7 Perancangan Layar Buat Akun Log In
57 Tampilan ini adalah tampilan dari menu log in untuk buat akun. Pada halaman ini bagi user ( admin, guru dan siswa ) yang belum mempunyai akun, terlebih dahulu harus mengisi beberapa data untuk di simpan ke dalam database sistem. Jika user( admin, guru dan siswa ) sudah mengisi data tersebut, sistem akan langsung mengarahkan user ( admin, guru dan siswa ) ke menu log in untuk melakukan log in kambali. Tabel 4.5 Tampilan Buat Akun Log In 1. Image Field Logo, kalender, map 2. Label Field Nama sekolah, buat akun, username (nip/nis), password, nama, jenis kelamin, tempat/tanggal/lahir, alamat 3. Text Field username (nip/nis), password, nama, jenis kelamin, tempat/tanggal/lahir, alamat 4. Button Home, profil, organisasi, log in, buat akun 4.3.6 Tampilan Lihat Nilai Pelajaran Untuk Siswa Gambar 4.8 Perancangan Layar Lihat Nilai Pelajaran Siswa
58 Tampilan ini adalah tampilan dari sistem e-learning untuk siswa di SMA N 3 Kabupaten Tangerang. Pada halaman ini terdapat beberapa pilihan menu untuk siswa mengikuti e-learning. Ada home, nilai, forum, quisioner, dan video call. Disebelah kiri terdapat pencarian nama siswa yang mengikuti e-learning, pengumumman, kalender. Pada bagian atas sebelah kanan ada pilihan setting dan log out. Pada halaman ini siswa bisa melihat nilai dengan mengklik menu nilai pada tampilan di atas, kemudian akan muncul tulisan selamat datang (nama siswa), foto profil dan table nilai pelajaran. Tabel 4.4 Tampilan Lihat Nilai Pelajaran Siswa 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang, nilai pelajaran 3. Text Field - 4. Button Home, nilai, forum, quisioner, video call, setting, log out, search 5. Tabel List nilai pelajaran 4.3.7 Tampilan Buat Nilai Pelajaran Guru Gambar 4.9 Perancangan Layar Buat Nilai Pelajaran Guru
59 Tampilan ini adalah tampilan dari sistem e-learning untuk guru di SMA N 3 Kabupaten Tangerang. Pada halaman ini terdapat beberapa pilihan menu untuk guru mengadakan e-learning. Ada home, pelajaran, nilai, forum, quisioner, dan video call. Disebelah kiri terdapat pencarian nama siswa yang mengikuti e-learning, pengumumman, kalender. Pada bagian atas sebelah kanan ada pilihan setting dan log out. Pada halaman ini guru bisa menginput nilai pelajaran dengan mengklik menu pelajaran, dan aka nada 3 opsi lagi, yaitu nilai pelajaran, mata pelajaran, dan jadwal pelajaran. Untuk menginput nilai pelajaran guru harus memilih opsi nilai pelajaran, kemudian sistem akan menampilkan tabel menu nilai mata pelajaran, guru harus mengisi beberapa data untuk menginput nilai, yaitu nama siswa, mata pelajaran, kelas dan nilai, setelah selesai klik simpan untuk langsung di simpan ke dalam database. Selain ada tulisan selamat datang (nama guru) dan foto profil gutu pada halaman ini. Tabel 4.5 Tampilan Buat Nilai Pelajaran Untuk Guru 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang, nilai mata pelajaran, input nilai mata pelajaran, nama siswa, mata pelajaran, kelas, nilai 3. Text Field Nama siswa, mata pelajaran, kelas, nilai, search 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out, search, nilai pelajaran, mata pelajaran, jadwal pelajaran, simpan
60 4.3.8 Tampilan Buat Nilai Pelajaran Baru Guru Gambar 4.10 Perancangan Layar Kelola Nilai Pelajaran Baru Guru Tampilan ini adalah tampilan kelola nilai pelajaran untuk guru. Pada halaman ini guru bisa mengelola menu pelajaran dengan memilih opsi nilai pelajaran. Pada opsi nilai pelajaran akan muncul tabel nilai pelajaran, pencarian nama siswa, input nilai pelajaran dan pilihan halaman. Tabel nilai pelajaran berisi nama siswa, mata pelajaran, kelas, dan nilai. Pada halaman ini juga guru bisa menambah, mengedit dan menghapus data tabel nilai pelajaran dengan mengklik input nilai pelajaran. Bagian atas terdapat tulisan selamat datang (nama guru) dan foto profil. Tabel 4.6 Tampilan Kelola Nilai Pelajaran Baru Guru 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang, tabel nilai pelajaran 3. Text Field Search
61 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out, search, nilai pelajaran, mata pelajaran, jadwal pelajaran, search, input nilai pelajaran, halaman 5. Tabel List nilai mata pelajaran 4.3.9 Tampilan Kelola Mata Pelajaran Untuk Admin Gambar 4.11 Perancangan Layar Kelola Mata Pelajaran Admin Tampilan ini adalah tampilan kelola mata pelajaran untuk admin di SMA N 3 Kabupaten Tangerang. Pada halaman ini admin yang ingin mengelola data mata pelajaran, harus masuk ke dalam menu pelajaran, dan memilih opsi mata pelajaran di sebelah kiri. Setelah admin memilih opsi mata pelajaran akan muncul tabel mata pelajaran yang berisi kode pelajaran, mata pelajaran, nama guru, dank ode kelas. Dengan mengklik buat mata pelajaran, admin bisa mengelola data pelajaran yang akan ditambah, di edit dan dihapus dari sistem. Bagian atas terdapat tulisan selamat datang (nama admin) dan foto profil admin.
62 Tabel 4.7 Tampilan Kelola Mata Pelajaran Admin 1. Image Field Logo, foto profil, pengumumman, kalender 2. Label Field Nama sekolah, selamat datang, tabel mata pelajaran 3. Text Field - 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out, search, nilai pelajaran, mata pelajaran, jadwal pelajaran, buat mata pelajaran, halaman 5. Tabel List mata pelajaran 4.3.10 Tampilan Buat Mata Pelajaran Baru Admin Gambar 4.11 Perancangan Layar Buat Mata Pelajaran Baru Admin Tampilan ini adalah tampilan buat mata pelajaran baru untuk admin. Pada halaman ini, setelah admin mengklik buat mata pelajaran, sistem akan menampilkan tampilan mata pelajaran
63 yang haru diisi. Seperti, kode pelajaran, mata pelajaran, dan nama guru. Setelah itu klik simpan agar data masuk ke dalam database. Dan mata pelajaran baru ditambahkan. Bagian atas terdapat tulisan selamat datang (nama admin) dan foto profil admin. Tabel 4.8 Tampilan Buat Mata Pelajaran Baru Admin 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang, mata pelajaran 3. Text Field Mata pelajaran, nama guru 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out, search, nilai pelajaran, mata pelajaran, jadwal pelajaran, select, simpan 4.3.11 Tampilan Kelola Jadwal Pelajaran Admin Gambar 4.12 Perancangan Layar Kelola Jadwal Pelajaran Admin
64 Tampilan ini adalah tampilan kelola jadwal pelajaran untuk admin di SMA N 3 Kabupaten Tangerang. Pada halaman ini admin yang ingin mengelola data jadwal pelajaran, harus masuk ke dalam menu pelajaran, dan memilih opsi jadwal pelajaran di sebelah kiri. Setelah admin memilih opsi jadwal pelajaran akan muncul tabel jadwal pelajaran yang berisi kode pelajaran, mata pelajaran, nama guru, kelas, dan jam. Dengan mengklik buat jadwal mata pelajaran, admin bisa mengelola data pelajaran yang akan ditambah, di edit dan dihapus dari sistem. Bagian atas terdapat tulisan selamat datang (nama admin) dan foto profil admin. Tabel 4.9 Tampilan Kelola Jadwal Pelajaran Admin 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang, tabel jadwal pelajaran 3. Text Field Search 4. Button Home, pelajaran, nilai, forum, quisioner, video call, search, setting, log out, nilai pelajaran, mata pelajaran, jadwal pelajaran, buat jadwal pelajaran, halaman, search 5. Tabel List jadwal pelajaran
65 4.3.12 Tampilan Jadwal Pelajaran Gambar 4.13 Perancangan Layar Jadwal Pelajaran Tampilan ini adalah hasil dari kelola menu pelajaran yang ditampilkan oleh sistem pada sistem e-learning di SMA N 3 Kabupaten Tangerang. Pada halaman ini terdapat tabel jadwal pelajaran yang sudah dikelola oleh admin. Yang berisi kode pelajaran, mata pelajaran, jam mengajar, dan kode kelas. Halaman yang dikelola admin ini bisa terlihat pada sistem e-learning guru. Tabel 4.10 Tampilan Jadwal Pelajaran 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang, buat jadwal pelajaran 3. Text Field Search 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out,
66 5. Tabel List jadwal pelajaran search, nilai pelajaran, mata pelajaran, jadwal pelajaran, halaman 4.3.13 Tampilan Buat Jadwal Pelajaran Baru Admin Gambar 4.14 Perancangan Layar Buat Jadwal Pelajaran Baru Admin Tampilan ini adalah tampilan buat jadwal pelajaran baru untuk admin. Pada halaman ini, setelah admin mengklik buat jadwal pelajaran, sistem akan menampilkan tampilan jadwal pelajaran yang haru diisi. Seperti, nama pelajaran. nama guru, kelas dan jam. Setelah itu klik simpan agar data masuk ke dalam database. Dan jadwal pelajaran baru ditambahkan. Bagian atas terdapat tulisan selamat datang (nama admin) dan foto profil admin. Tabel 4.11 Tampilan Buat Jadwal Pelajaran Baru Admin 1. Image Field Logo, pengumumman, kalender, foto profil
67 2. Label Field Nama sekolah, selamat datang, buat jadwal pelajaran, nama pelajaran, nama guru, kelas, jam 3. Text Field Search, nama guru, kelas, jam 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out, search, nilai pelajaran, mata pelajaran, jadwal pelajaran, select, simpan, halaman 4.3.14 Tampilan Forum Gambar 4.15 Perancangan Layar Forum Tampilan ini adalah tampilan dari forum e-learing di SMA N 3 Kabupaten Tangerang. Pada halaman ini terdapat tabel dari forum e-learning antara guru dan siswa. Yang berisi judul forum, pembuat dan hasil balasan dari forum tersebut. Forum ini diadakan untuk membahas tentang perkembangan dunia IT terbaru. Halaman forum ini bisa untuk guru dan siswa.
68 Tabel 4.12 Tampilan Forum 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang, forum 3. Text Field Search 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out, search, buat diskusi baru, halaman, search 5. Tabel List forum 4.3.15 Tampilan Buat Forum Baru Gambar 4.16 Perancangan Layar Buat Forum Baru Tampilan ini adalah tampilan untuk membuat forum baru di SMA N 3 Kabupaten Tangerang. Pada halaman ini bagi guru atau siswa yang ingin membuat forum baru bisa langsung mengklik buat diskusi baru pada tampilan sebelumnya, dan sistem akan menampilkan
69 tabel buat forum baru yang terdiri dari judul, isi, dan upload gambar. Setelah itu klik buat diskusi baru dan secara otomastis sistem akan menyimpan ke dalam database dan di tampilkan ke dalam sistem e-learning. Tabel 4.13 Tampilan Buat Forum Baru 1. Image Field Logo, pengumumman, kalender, foto profil, upload 2. Label Field Nama sekolah, selamat datang, buat forum baru, judul, isi 3. Text Field Search, judul, isi 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out, search, buat diskusi baru, search 4.3.16 Tampilan Quisioner Guru dan Siswa Gambar 4.17 Perancangan Layar Quisioner Guru dan Siswa
70 Tampilan ini adalah tampilan quisioner untuk siswa di SMA N 3 Kabupaten Tangerang. Pada halaman ini siswa diharuskan mengerjakan quisioner yang telah dibuat oleh guru. Halaman menu quisioner ini berisi selamat datang (nama siswa), foto profil, soal pelajaran, jawaban, serta opsi pilih pelajaran. Setelah siswa selesai mengerjakan quisioner ini dapat langsung mengklik simpan agar masuk ke dalam database. Tabel 4.14 Tampilan Quisioner Guru dan Siswa 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang, nama pelajaran, soal pelajaran, jawaban 3. Text Field Soal pelajaran, jawaban 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out, pilih pelajaran, tampilkan, search, simpan
71 4.3.17 Tampilan Video Call Untuk Guru dan Siswa Gambar 4.18 Perancangan Layar Video Call Guru dan Siswa Tampilan ini adalah tampilan video call di SMA N 3 Kabupaten Tangerang. Pada halaman ini sistem menampilkan proses pembelajaran e-learning antara guru dan siswa yang sedang mengikuti proses pembelajaran. Pada halaman ini juga muncul beberapa siswa yang sedang melakukan video call dengan guru. Menu video call ini bisa digunakan oleh guru dan siswa. Tabel 4.15 Tampilan Video Call Guru dan Siswa 1. Image Field Logo, pengumumman, kalender, foto profil 2. Label Field Nama sekolah, selamat datang 3. Text Field - 4. Button Home, pelajaran, nilai, forum, quisioner, video call, setting, log out