• Tidak ada hasil yang ditemukan

Perancangan Layar Murid dan Guru .1. Perancangan Layar Login

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 56-91)

10. Apakah anda mengetahui sistem pembelajaran e-learning? Tabel 3.16 Hasil Kuesioner Siswa Nomor 10

3.5 Perancangan Layar Murid dan Guru .1. Perancangan Layar Login

Halaman ini merupakan halaman pertama ketika pengguna login, dengan status murid dan guru membuka aplikasi ini. Pada halaman ini murid dan guru harus menginput nama dan password mereka untuk ke halaman selanjutnya.

       Gambar 3.20 Perancangan Layar Login

3.5.2. Perancangan Layar Home

Halaman ini merupakan halaman home untuk user yang berhasil

login. Pada bagian atas terdapat menu Home yang berfungsi untuk kembali

ke halaman Home, menu Profile untuk masuk ke halaman Profile, menu

News untuk masuk ke halaman News dan menu Visi dan Misi untuk masuk

ke halaman Visi dan Misi. Di bagian kiri terdapat menu Kelasku untuk masuk ke halaman Kelasku, menu Data Pribadi untuk masuk ke halaman Data Pribadi, menu Jadwal Pelajaran untuk masuk ke halaman Jadwal Pelajaran, menu Nilai Akademis untuk masuk ke halaman Nilai Akademis, menu Forum Diskusi untuk masuk ke halaman Forum Diskusi, Menu Ganti

Password untuk masuk ke halaman Ganti Password dan terdapat fungsi Logout untuk keluar dari situs.

Gambar 3.21 Perancangan Layar Home  

3.5.3. Perancangan Layar Profile

Halaman ini berisi tentang sejarah singkat didirikannya SMA Islamic Centre yang mencakup siapa yang mendirikannya, tanggal berapa di dirikannya dan kapan di resmikannya di bawah naungan Depdiknas Propinsi Jawa barat.

Gambar 3.22 Perancangan Layar Profile 

3.5.4. Perancangan Layar News

Halaman ini berisi tentang berita-berita atau pengumuman-pengumuman yang ditampilkan berdasarkan Judul News dan Tanggal News yang mencakup SMA Islamic Centre yang dapat memberikan informasi kepada murid yang dilengkapi dengan menu View untuk masuk ke halaman

View. Pada halaman ini juga dilengkapi dengan fasilitas search untuk

Gambar 3.23 Perancangan Layar News 

3.5.5. Perancangan Layar Detail News

Halaman ini berisi tentang detail dari halaman news yang menampikan judul news, isi dari news dan tanggal news.

Home Profile News Visi dan misi Kelasku Data Pribadi Jadwal Pelajaran Forum Diskusi Log Out Nilai Akademis Ganti Password Footer Judul News Isi News Tanggal News xxx yyy dd-m-yyyy

Gambar 3.24 Perancangan Layar Detail News

3.5.6. Perancangan Layar Visi dan Misi Murid dan Guru

Halaman ini berisi tentang visi dan misi dari SMA Islamic Centre yang dibuat oleh pihak sekolah. Pada halaman ini pula user dapat berpindah ke halaman berikutnya.

Gambar 3.25 Perancangan Layar Visi dan Misi Murid dan Guru 

3.5.7. Perancangan Layar KelasKu Murid

Halaman ini merupakan halaman Data murid untuk menampilkan daftar mata pelajaran setiap murid, dan terdapat menu View untuk melihat detail pelajaran.

Gambar 3.26 Perancangan Layar Kelasku Murid  

3.5.8. Perancangan Layar View Detail Pelajaran

Halaman ini detail pelajaran dimana ditampilkan button yang dapat menuju halaman download materi dan tugas murid sesuai data pelajaran yang di pilih pada halaman kelasku murid.

Gambar 3.27 Perancangan Layar View Detail Pelajaran

3.5.9. Perancangan Layar Download Materi Murid

Halaman ini merupakan tampilan dari daftar Materi yang telah di

upload oleh guru yang dapat didownload oleh murid sebagai bahan pelajaran

di rumah dan di tempat lainnya yang ditampilkan secara paging. Dan juga disediakan fasilitas pencarian berdasarkan nama materi yang diupload oleh guru.

Gambar 3.28 Perancangan Layar Download Materi Murid

3.5.10. Perancangan Layar Tugas Murid

Halaman ini merupakan tampilan dari daftar Tugas yang telah di upload oleh guru yang dapat didownload oleh murid sebagai tugas yang harus dikerjakan yang ditampilkan secara paging dan disediakan button

download agar murid dapat mendownload file yang telah di berikan oleh

guru, disediakan juga button yang akan menuju halaman upload jawaban murid dan juga disediakan fasilitas pencarian berdasarkan nama materi yang diupload oleh guru.

Gambar 3.29 Perancangan Layar Tugas Murid

3.5.11. Perancangan Layar Upload Jawaban Murid

Pada Halaman ini murid dapat mengupload file yang akan digunakan sebagai data atas jawaban soal yang telah diberikan Guru. File tersebut nantinya akan disimpan ke dalam folder jawaban yang ada di dalam aplikasi dan nama file tugasnya akan disimpan ke dalam database.

Gambar 3.30 Perancangan Layar Upload Jawaban Murid

3.5.12. Perancangan Layar Kelasku Guru

Halaman ini merupakan halaman Data Guru untuk menampilkan daftar mata pelajaran yang diajarkan setiap Guru, dan terdapat menu View untuk melihat detail pelajaran.

Gambar 3.31 Perancangan Layar Kelasku Guru

3.5.13. Perancangan Layar View Detail Pelajaran Guru

Halaman ini detail pelajaran dimana ditampilkan button yang dapat menuju halaman materi, tugas, update nilai, dan lihat jadwal untuk guru sesuai data pelajaran yang di pilih pada halaman kelasku guru.

Gambar 3.32 Perancangan Layar View Detail Pelajaran Guru

3.5.14. Perancangan Layar Upload Materi Guru

Halaman ini merupakan tampilan dari daftar Materi yang telah di upload oleh guru yang dapat didownload oleh Guru sebagai materi yang dapat menambah materi bagi murid yang ditampilkan secara paging dan disediakan button download agar murid dapat mendownload file, disediakan juga button delete untuk menghapus data di database dan file yang terhubung dengan data, dan button input new materi untuk menuju halaman upload new materi dan juga disediakan fasilitas pencarian berdasarkan nama materi.

Gambar 3.33 Perancangan Layar Upload Materi Guru

3.5.15. Perancangan Layar Upload New Materi Guru

Pada Halaman ini Murid dapat mengupload file yang akan digunakan sebagai data atas jawaban soal yang telah diberikan Guru. File tersebut nantinya akan disimpan ke dalam folder jawaban yang ada di dalam aplikasi dan nama file tugasnya akan disimpan ke dalam database.

Gambar 3.34 Perancangan Layar Upload New Materi Guru

3.5.16. Perancangan Layar Upload Tugas Guru

Halaman ini merupakan tampilan dari daftar Tugas yang telah di upload oleh guru yang dapat didownload oleh guru yang ditampilkan secara

paging dan disediakan button download agar guru dapat mendownload file,

disediakan button delete untuk mendelete file tugas dan data-data yang ada di MsTugas dan file jawaban yang berhubungan di tugas dan data-data jawaban yang berhubungan tugas tersebut, dan disediakan juga button yang akan menuju halaman jawaban tugas yang mana isi dari halaman tersebut adalah data-data atas hasil jawaban dari tugas yang telah di berikan oleh Guru dan

juga disediakan fasilitas pencarian berdasarkan nama materi yang diupload oleh guru.

Gambar 3.35 Perancangan Layar Upload Tugas Guru

3.5.17. Perancangan Layar Upload New Tugas Guru

Pada Halaman ini Guru dapat mengupload file yang akan digunakan sebagai data atas soal yang akan diberikan Guru kepada Murid.

File tersebut nantinya akan disimpan ke dalam folder jawaban yang ada di

Gambar 3.36 Perancangan Layar Upload New Tugas Guru

3.5.18. Perancangan Layar Jawaban Tugas

Halaman ini merupakan tampilan dari daftar Jawaban dari tugas yang telah diupload oleh guru yang dapat didownload oleh guru yang ditampilkan secara paging. Dan juga disediakan fasilitas pencarian berdasarkan nama murid.

Gambar 3.37 Perancangan Layar Jawaban Tugas

3.5.19. Perancangan Layar Data Nilai Guru

Halaman ini merupakan tampilan dari data nilai guru untuk murid dimana guru dapat membuat data nilai murid, melihat nilai murid, dan mengupdate nya sesuai dengan pelajaran yang diajar guru tersebut atau sesuai data dari msheaderpelajaran. Pada button create nilai setiap murid yang berada pada kelas tersebut dan pelajaran itu di buat data nilainya, pada

button view menuju halaman view detail nilai murid, dan button update

Gambar 3.38 Perancangan Layar Data Nilai Guru

3.5.20. Perancangan Layar View Detail Nilai Murid

Halaman ini merupakan tampilan dari detail data nilai Murid sesuai dengan data header pelajaran.

Gambar 3.39 Perancangan Layar View Detail Nilai Murid

3.5.21. Perancangan Layar Update Nilai Murid

Halaman ini merupakan tampilan dari detail data nilai Murid dan dapat mengupdate nilai sesuai dengan data header pelajaran. Dan juga terdapat button add nilai akhir yang dapat menghitung nilai akhir dari nilai murid.

Gambar 3.40 Perancangan Layar Update Nilai Murid

3.5.22. Perancangan Layar Jadwal Kelas Guru

Halaman ini merupakan Jadwal Guru di kelas xxx yang sesuai dengan data header jadwal dan header pelajaran yang nantinya akan menampilkan data detail jadwal pelajaran.

Gambar 3.41 Perancangan Layar Jadwal Kelas Guru

3.5.23. Perancangan Layar Data Pribadi Murid dan Guru

Halaman ini merupakan tampilan dari daftar data pribadi murid dan guru. Pada murid terdapat data pribadi murid dan data orang tua, sedangkan pada guru terdapat data pribadi guru.

Gambar 3.42 Perancangan Layar Data Pribadi Murid dan Guru  

3.5.24. Perancangan Layar Jadwal Pelajaran Murid

Halaman ini memperlihatkan daftar pelajaran dari murid. Dimana pada menampilkan detail jadwal pelajaran.

Gambar 3.43 Perancangan Layar Jadwal Pelajaran Murid

3.5.25. Perancangan Layar Lihat Jadwal Guru Header Pelajaran

Halaman ini merupakan halaman lihat jadwal guru berdasarkan

header pelajaran dimana jadwal guru akan ada apabila guru merupakan

pengajar suatu mata pelajaran dan terdapat menu View untuk melihat detail jadwal pelajaran guru di kelas.

Gambar 3.44 Perancangan Lihat Jadwal Guru Header Pelajaran

3.5.26. Perancangan Layar Jadwal Guru Detail

Halaman ini merupakan Jadwal Guru di kelas xxx yang sesuai dengan data header jadwal dan header pelajaran yang nantinya akan menampilkan data detail jadwal pelajaran.

Gambar 3.45 Perancangan Layar Jadwal Guru Detail

3.5.27. Perancangan Layar Nilai Akademis Murid

Halaman ini menampilkan nilai murid selama satu semester, dimana terdapat nilai ulangan 1, ulangan 2, ulangan 3, UTS, UAS dan nilai akhir.

Gambar 3.46 Perancangan Layar Nilai Akademis Murid   

3.5.28. Perancangan Layar Lihat Nilai Guru

Halaman ini menampilkan Nama murid keseluruhan dan juga menampilkan dropdown list yang berfungsi sebagai data tahun ajaran untuk dapat melihat nilai murid berdasarkan tahun ajaran dan semester nilai dan mata pelajaran murid. Button view berfungsi melihat nilai si murid tersebut apabila sudah memilih tahun ajaran dan semester di fungsi dropdown list.

Gambar 3.47 Perancangan Layar Lihat Nilai Guru 

3.5.29. Perancangan Layar Lihat Nilai Detail Guru

Halaman ini Guru menampilkan nilai murid selama satu semester, dimana terdapat nilai ulangan 1, ulangan 2, ulangan 3, UTS, UAS dan nilai akhir.

Gambar 3.48 Perancangan Layar Lihat Nilai Detail Guru  

3.5.30. Perancangan Layar Forum Diskusi Murid dan Guru

Halaman ini merupakan halaman forum diskusi pada SMA Islamic Centre yang digunakan oleh murid dan guru untuk saling berinteraksi satu sama lain. Pada halaman ini juga terdapat menu View untuk masuk kehalaman View.

Gambar 3.49 Perancangan Layar Forum Diskusi Murid dan Guru  

3.5.31. Perancangan Layar View Forum Diskusi Murid dan Guru

Halaman ini menampilkan detail forum dimana terdapat menu

search yang dapat dipilih berdasarkan Nama Topik atau Created. Pada

bagian atas terdapat menu Insert New Topik untuk masuk ke halaman Insert

New Topik dan dibagian bawah terdapat menu View untuk masuk kehalaman View.

Gambar 3.50 Perancangan Layar View Forum Diskusi Murid dan Guru  

3.5.32. Perancangan Layar Insert New Topik Murid dan Guru

Halaman ini digunakan untuk memasukan topik baru pada forum dengan format judul topik dan isi topiknya.

Gambar 3.51 Perancangan Layar Insert New Topik Murid dan Guru

3.5.33. Perancangan Layar Comment Murid dan Guru

Halaman ini merupakan detail dari view forum yang dilengkapi dengan menu Insert new comment untuk memberikan komentar pada topik yang bersangkutan dan fungsi search berdasarkan nama comment.

Gambar 3.52 Perancangan Layar Comment Murid dan Guru  

3.5.34. Perancangan Layar Insert New Comment Murid dan Guru

Halaman ini merupakan halaman untuk murid dan guru yang ingin memberikan komentar.

Gambar 3.53 Perancangan Layar Insert New Comment Murid dan Guru  

3.5.35. Perancangan Layar Ganti Password Murid dan Guru

Halaman ini merupakan halaman ganti password untuk murid dan guru dengan format memasukan password lama kemudian memasukan

Gambar 3.54 Perancangan Layar Ganti Password Murid dan Guru

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 56-91)

Dokumen terkait