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
http://digilib.mercubuana.ac.id/
52
4.2.2. Tampilan Menu Guru dan Siswa Menu Utama
HOME
PROFIL
GURU
PELAJARAN
NILAI
ABSEN
LATIHAN
FORUM
QUISIONER
Gambar 4.2 Perancangan Layar Halaman Utama Guru dan Siswa
4.3. Rancangan Layar 4.3.1 Tampilan Home Page
Gambar 4.3 Perancangan Layar Home Page
http://digilib.mercubuana.ac.id/
LOGOUT
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
No.
Tools
Keterangan
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
5.
Tabel
-
4.3.2 Tampilan Profil
Gambar 4.4 Perancangan Layar Profil
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
1.
Image Field
Logo, kalender, map
2.
Label Field
Nama sekolah, visi dan misi
3.
Text Field
-
4.
Button
Home, profil, organisasi, log in
5.
Tabel
-
4.3.3 Tampilan Layar Organisasi
Gambar 4.5 Perancangan Layar Organisasi
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
5.
Tabel
-
4.3.4 Tampilan Log In
Gambar 4.6 Perancangan Layar Log In
http://digilib.mercubuana.ac.id/
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 elearning. 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
No.
Tools
Keterangan
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
5.
Tabel
-
4.3.5 Tampilan Buat Akun Log In
Gambar 4.7 Perancangan Layar Buat Akun Log In
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
5.
Tabel
-
4.3.6 Tampilan Lihat Nilai Pelajaran Untuk Siswa
Gambar 4.8 Perancangan Layar Lihat Nilai Pelajaran Siswa
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
5.
Tabel
-
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
1.
Image Field
Logo, pengumumman, kalender, foto profil
2.
Label Field
Nama sekolah, selamat datang, tabel nilai pelajaran
3.
Text Field
Search
http://digilib.mercubuana.ac.id/
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.
http://digilib.mercubuana.ac.id/
62 Tabel 4.7 Tampilan Kelola Mata Pelajaran Admin
No.
Tools
Keterangan
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
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
5.
Tabel
-
4.3.11 Tampilan Kelola Jadwal Pelajaran Admin
Gambar 4.12 Perancangan Layar Kelola Jadwal Pelajaran Admin
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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,
http://digilib.mercubuana.ac.id/
66
search, nilai pelajaran, mata pelajaran, jadwal pelajaran, halaman 5.
Tabel
List jadwal pelajaran
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
No. 1.
Tools Image Field
Keterangan Logo, pengumumman, kalender, foto profil
http://digilib.mercubuana.ac.id/
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
5.
Tabel
-
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.
http://digilib.mercubuana.ac.id/
68 Tabel 4.12 Tampilan Forum
No.
Tools
Keterangan
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
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
5.
Tabel
-
4.3.16 Tampilan Quisioner Guru dan Siswa
Gambar 4.17 Perancangan Layar Quisioner Guru dan Siswa
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
5.
Tabel
-
http://digilib.mercubuana.ac.id/
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
No.
Tools
Keterangan
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
5.
Tabel
-
http://digilib.mercubuana.ac.id/
