3.4 Usulan Pemecahan Masalah
3.4.2 Perancangan Layar Pada S olusi
3.4.2.1 Perancangan Layar Untuk Siswa
Dari perancangan aplikasi yang telah dilakukan, dihasilkan rancangan layar yang akan digunakan sebagai acuan dalam pengembangan aplikasi e-learning berbasis web sebagai berikut :
Gambar 3.93 Rancangan Layar Untuk Halaman Login
Layar ini adalah layar awal yang pertama kali akan muncul ketika website ini diakses oleh user. Lambang dan nama institusi diletakkan di bagian banner. Dibagian tengah terdapat textbox untuk memasukkan username serta password dan terdapat tombol submit untuk pengecekan password agar dapat masuk ke halaman berikutnya. Dibagian footer terdapat hak cipta E-learning berbasis web SM A Negeri 26 Jakarta. BANNER LOGO Picture Login area ID Login Passwod Status
Forget Password, click here
Copyrighted @ 2008 SMA Negeri 26 Jakarta
Gambar 3.94 Rancangan Layar Untuk Halaman Forget Password Login
Layar ini muncul ketika user mengklik link “forget password” pada layar login. Layar ini untuk membantu user apabila user lupa password untuk mengakses aplikasi ini. Untuk mendapatkan kembali password aksesnya, user perlu mengisi form yang ada di layar ini dan klik tombol “reset password”. Pada halaman ini terdapat field untuk mengisi ID Login, Email, Status dan terdapat tombol reset password untuk mendapatkan password yang baru.
BANNER LOGO Picture Forget Password ID Login Email Status
Copyrighted @ 2008 SMA Negeri 26 Jakarta
Gambar 3.95 Rancangan Layar Home Siswa
Ketika inputan password serta username cocok dan statusnya adalah siswa, maka akan dilanjutkan ke halaman siswa utama. Di halaman ini terdapat pilihan menu di sebelah kiri tedapat pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Di bagian atas juga terdapat pilihan menu home, dan logout. Di layar tengah ditampilkan frame history login untuk melihat record kapan terakhir kali user login, daftar pelajaran untuk melihat pelajaran apa saja yang akan ditempuh dan private message dan news center untuk melihat apakah ada pesan khusus dari guru atau pengumuman-pengumuman yang diterbitkan sekolah. BANNER LOGO Menu Panel
Copyrighted @ 2008 SMA Negeri 26 Jakarta
JADWAL MATERI FORUM DATA PRIBADI NILAI Learning Panel UBAH PIN DOWNLOAD
Hari ini : home | logout
History Login
xxxxxxxx xxxxxxxxxxxxxx
xxxxxxx
xxxxxxxxxxxxxxxxx
Daftar Pelaj aran
xxxxxxxxxxx xxxxxxxxx xxxxxxxxxxx xxxxxxxxx xxxxxxxxxxx xxxxxxxxx xxxxxxxxxxx xxxxxxxxx xxxxxxxxxxx xxxxxxxxx
Private Message & News
x x xx xx xx xx xx x x x xx xx xx xx xx xx xx x x xx xx xx xx xx
x x xx xx xx xx xx xx x x x xx xx xx xx xx xx xx Ju du l News Tan g g al Po st Tip e
Gambar 3.96 Rancangan Layar S iswa Menu Jadwal Pelajaran
Ketika user memilih pilihan dari button jadwal, maka akan muncul halaman ini. Dihalaman ini akan ditampilkan semua pilihan pelajaran yang dipelajari siswa dan siswa dapat memilih ke pelajaran mana siswa akan masuk. Sama seperti halaman siswa utama, dihalaman ini terdapat plihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO
Menu Panel
Jadwal Pelaj aran >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Jadwal > Jadwal Pelajaran
xxxxxxxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxxxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxxxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxxxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxxxxxxx xxxxxx xxxxxx xxxxxxxx UBAH PIN DOWNLOAD
Hari ini : home | logout
Gambar 3.97 Rancangan Layar S iswa Menu Materi Pelajaran
Ketika user memilih menu materi pada menu panel maka akan keluar materi pelajaran apa saja yang ada di kelas siswa tersebut. Dihalaman ini akan ditampilkan nama mata pelajaran yang diajarkan dan terdapat link materi untuk masuk ke materi utama. Sama seperti halaman siswa utama, dihalaman ini terdapat plihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO Menu Panel Lihat Materi >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Materi > Lihat Materi
xxxxxxxxxx xxxxxxx
xxxxxxxxxx xxxxxxx xxxxxxxxxx xxxxxxx
UBAH PIN
DOWNLOAD
Hari ini : home | logout
Gambar 3.98 Rancangan Layar S iswa Lihat Materi Pelajaran
Layar ini muncul jika pada layar menu materi, siswa mengklik salah satu mata pelajaran yang tersedia. Pada layar ini, siswa dapat memilih materi mana yang ingin dilihat atau didownload. Pada layar ini terdapat informasi tentang materi apa saja yang ada pada pelajaran tersebut.
BANNER LOGO Menu Panel Lihat Materi >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Materi > Lihat Materi
xxxxxxxxxx xxxxxxx
xxxxxxxxxx xxxxxxx xxxxxxxxxx xxxxxxx
UBAH PIN
DOWNLOAD
Hari ini : home | logout
Gambar 3.99 Rancangan Layar S iswa Lihat Materi Detail
Halaman ini merupakan link dari lihat materi, jika siswa memilih link materi yang ada di lihat materi maka akan langsung masuk ke halaman ini. Di halaman ini terdapat informasi tentang materi utama dan materi pendukung yang dapat di download oleh siswa, dan juga terdapat deadline materi untuk batas akhir pengumpulan jawaban. Di halaman ini juga terdapat tombol untuk upload file jawaban. BANNER LOGO Menu Panel Lihat Materi >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Materi > Lihat Detail Materi
Judul Materi : xxxxxxx Materi Utama : download Materi Tambahan : download Link Pendukung 1 : xxxxxxxx Link Pendukung 2 : xxxxxxxx Soal Materi : download Deadline Materi : xxxxxxxx
UBAH PIN
DOWNLOAD
Hari ini : home | logout
JADWAL
Gambar 3.100 Rancangan Layar S iswa Upload Jawaban Tugas
Halaman ini merupakan link dari halaman lihat detail materi. Pada halaman ini siswa dapat mencari file yang akan di upload dengan menekan tombol browse dan setelah file didapatkan maka siswa dapat menguploadnya dengan menekan tombol upload. Selain itu siswa juga dapat memasukan pesan tambahan yang dapat di dikirimkan ke guru yang bersangkutan. Setelah itu ada tombol submit untuk mengirim file tersebut.
BANNER LOGO Menu Panel Lihat Materi >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Materi > Upload Tugas File :
Pesan Tabahan :
UBAH PIN
DOWNLOAD
Hari ini : home | logout
Browse.. Upload
Gambar 3.101 Rancangan Layar S iswa Lihat Nilai
Pada Halaman ini siswa dapat melihat nila yang dia peroleh untuk masing – masing pelajaran. Dihalaman ini terdapat nama mata pelajaran yang dia peroleh dan kemudian terdapat link di setiap pelajaran untuk dapat melihat detail nilai yang diperoleh. Dihalaman ini terdapat pilihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO Menu Panel Lihat Nilai >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Nilai > Lihat Nilai
xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxx UBAH PIN DOWNLOAD
Hari ini : home | logout
Gambar 3.102 Rancangan Layar S iswa Lihat Nilai Detail
Halaman ini merupakan link dari halaman lihat nilai. Dihalaman ini siswa dapat melihat nilai secar keseluruhan yang dia peroleh, mulai dari nilai harian sampai dengan nilai akhir. Dihalaman ini terdapat plihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO Menu Panel Lihat Nilai >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Nilai > Lihat Nilai
xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxx ID Siswa : xxxxxxxxxx Nama Pelaj aran : xxxxxxxxxx Nilai Harian 1 : xxxxxxxxxx Nilai Harian 2 : xxxxxxxxxx Nilai Harian 3 : xxxxxxxxxx Nilai UTS : xxxxxxxxxx Nilai UAS : xxxxxxxxxx Nilai Akhir : xxxxxxxxxx UBAH PIN DOWNLOAD
Hari ini : home | logout
Gambar 3.103 Rancangan Layar S iswa Lihat Data Pribadi BANNER LOGO Menu Panel
Lihat Data Pribadi >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA P RIBADI
Data Pribadi > Lihat Data Pribadi
Data Lengkap Siswa : xxxxxxxxx ID Siswa : xxxxxxxxxxxx
ID Kelas : xxxxxxxxxxxx ID Orang Tua / Wali : xxxxxxxxxxxx Nama Lengkap : xxxxxxxxxxxx Em ail : Alamat Lengkap : xxxxxxxxxxxxxxxxxxxxxxx Telepon : Kota : xxxxxxxxxxxx Kode Pos : xxxxxxxxxxxx Negara : xxxxxxxxxxxx Agama : xxxxxxxxxxxx Tem pat Tanggal Lahir: xxxxxxxxxxxx Terakhir Login : xxxxxxxxxxxx Terakhir Logout : xxxxxxxxxxxx IP Login : xxxxxxxxxxxx Profile Update : xxxxxxxxxxxx
Data Lengkap Orang Tua : xxxxxxxxx
ID Orang Tua : xxxxxxxxxxxx Nama Ayah : xxxxxxxxxxxx Pekerj aan Ay ah : xxxxxxxxxxxx Nama Ibu : xxxxxxxxxxxx Pekerj aan Ibu : xxxxxxxxxxxx Alamat : xxxxxxxxxxxx Telepon : xxxxxxxxxxxx Kota : xxxxxxxxxxxx Kode Pos : xxxxxxxxxxxx Negara : xxxxxxxxxxxx UBAH PIN DOWNLOAD
Hari ini : home | logout
Pada halaman ini siswa dapat melihat informasi tentang data pribadi dan data orang tuanya, selain itu siswa juga dapat mengupdate alamat email dan nomor telepon jika sewaktu – waktu ada perubahan.
Gambar 3.104 Rancangan Layar S iswa Menu Forum
Pada halaman ini siswa dapat melihat forum pelajaran yang ada di kelas mereka masing- masing. untuk masuk ke pelajaran tertentu siswa harus menekan link nama pelajaran untuk masuk ke forum pelajaran tersebut. selain itu terdapat juga tombol untuk masuk kedalam forum mata pelajaran tersebut.
BANNER LOGO Menu Panel Lihat Forum >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Forum > Lihat Forum
xxxxxx xxxxxxxxxx xxxxxx xxxxxxxxxx xxxxxx xxxxxxxxxx xxxxxx xxxxxxxxxx UBAH PIN DOWNLOAD
Hari ini : home | logout
Gambar 3.105 Rancangan Layar S iswa Lihat Topik Forum
Halaman ini merupakan link dari halaman lihat forum. Jika siswa memilih forum mata pelajaran tertentu maka akan masuk ke dalam forum mata pelajaran tersebut, dihalaman ini siswa akan mendapatkan informasi tentang topik – topik yang ada dan siapa yang memposting topik tersebut, dan terdapat juga button reply untuk mereply topik tersebut. Dihalaman ini terdapat pilihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO Menu Panel Lihat Forum >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Forum > Lihat Forum
xxxxxx xxxxxxxxxx xxxxxxx xxxxxx xxxxxxxxxx xxxxxxx xxxxxx xxxxxxxxxx xxxxxxx xxxxxx xxxxxxxxxx xxxxxxx UBAH PIN DOWNLOAD
Hari ini : home | logout
Gambar 3.106 Rancangan Layar S iswa Lihat Detail Forum
Halaman ini merupakan halaman untuk membaca topik forum yang ada, dihalaman ini terdapat informasi tentang apa saja yang ada di dalam topik tersebut dan siapa saja yang mengirimkannya. Dari halaman ini siswa dapat mereply topik tersebut. Dihalaman ini terdapat pilihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO Menu Panel Lihat Forum >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Forum > Baca Forum
xxxxxxx xxxxxxxx
UBAH PIN
DOWNLOAD
Hari ini : home | logout
xxxxx xxxxxxxx xxxxx xxxxxxxx xxxxx xxxxxxxx xxxxx xxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx
Gambar 3.107 Rancangan Layar S iswa Reply Topik
Halaman ini merupakan halaman untuk siswa menulis isi reply yang akan di kirim ke topik tersebut. terdapat textbox dan button untuk mengirim reply tersebut. Dihalaman ini terdapat plihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO Menu Panel Lihat Forum >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Forum > Reply Topik
xxxxxxxx xxxxxxxxxxx
Isi Reply :
UBAH PIN
DOWNLOAD
Hari ini : home | logout
Gambar 3.108 Rancangan Layar S iswa Ubah PIN
Halaman ini merupakan halaman untuk mengganti PIN standar yang didapatkan dengan PIN baru sesuai dengan kemauan user. Dihalaman ini terdapat textbox untuk memasukan PIN lama dan terdapat juga textbox untuk memasukan PIN baru dan tombol submit untuk merubahnya. Dihalaman ini terdapat pilihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO Menu Panel Ubah PIN >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Ubah PIN > Ubah PIN Masukan Password Lama :
Masukan Password Baru :
Masukan Kembali Password Baru :
UBAH PIN
DOWNLOAD
Hari ini : home | logout
Gambar 3.109 Rancangan Layar S iswa Download File
Halaman ini untuk mendownload file yang telah di posting oleh admin. Dihalaman ini terdapat informasi tentang judul file, keterangan file dan tanggal file tersebut di kirim. Dihalaman ini terdapat pilihan menu di samping kiri yang ada di layar seperti pilihan jadwal, materi, nilai, data pribadi, forum, ubah pin dan download. Dan dibagian atas terdapat pilihan menu home, dan logout.
BANNER LOGO Menu Panel Link Download >>
Copyrighted @ 2008 SMA Negeri 26 Jakarta
MATERI
JADWAL
FORUM
NILAI
DATA PRIBADI
Download > Link Download
xxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxx UBAH PIN DOWNLOAD
Hari ini : home | logout
Gambar 3.110 Rancangan Layar S iswa Lihat Pengumuman Detail
Layar ini ditampilkan ketika siswa mengklik salah satu link pengumuman yang ada di layar siswa home. Pada layar ini ditampilkan detail dari pengumuman tersebut. BANNER LOGO Menu Panel
Copyrighted @ 2008 SMA Negeri 26 Jakarta
JADWAL MATERI FORUM DATA PRIBADI NILAI Learning Panel JUDUL : xxxxxxxxxxxxxxxxxxxx ISI : xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx TANGGAL POST : xxxxxxxxxxxx kembali UBAH PIN DOWNLOAD
Gambar 3.111 Rancangan Layar S iswa Lihat Pesan Detail
Layar ini ditampilkan ketika siswa mengklik salah satu pesan pribadi yang dikirim oleh guru. Pada layar ini ditampilkan detail dari pesan tersebut.
BANNER LOGO
Menu Panel
Copyrighted @ 2008 SMA Negeri 26 Jakarta
JADWAL MATERI FORUM DATA PRIBADI NILAI Learning Panel JUDUL : xxxxxxxxxxxxxxxxxxxx ISI : xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx TANGGAL POST : xxxxxxxxxxxx kembali UBAH PIN DOWNLOAD