BAB 4 ANALISIS DAN DESAIN SISTEM - thesis.binus.ac.idthesis.binus.ac.id/Asli/Bab4/2009-1-00438-SI...

107

BAB 4

ANALISIS DAN DESAIN SISTEM

4.1 Usulan Prosedur Yang Baru

Dari hasil analisa yang dilakukan terhadap sistem yang berjalan di sekolah

PATMOS, di temukan bahwa sistem pembelajaran yang dilakukan kurang maksimal.

Terdapat beberapa kendala yang di hadapi diantaranya dalam hal waktu belajar,

keterbatasan kemampuan murid untuk dapat berkonsentrasi dalam belajar, kurangnya

komunikasi yang dilakukan antara orang tua dan guru dalam hal melaporakan

perkembangan murid di kelas. Selain itu, pembelajaran yang dilakukan oleh murid juga

masih terbatas hanya di dalam kelas.

Untuk mengatasi hal tersebut, maka di usulkan perancangan sebuah sistem

pembelajaran bagi murid dan guru di sekolah PATMOS. Adapun sistem yang di

kembangkan adalah sistem pembelajaran yang didistribusikan melalui komputer dengan

menggunakan internet atau yang di kenal dengan e-Learning. Sistem pembelajaran ini

diharapkan dapat mendukung terciptanya komunikasi yang baik antara orang tua dan

guru sehingga dapat mendukung sistem belajar mengajar di sekolah. Selain itu,

perancangan sistem ini di harapkan akan dapat membantu sekolah PATMOS dalam

mencapai visi dan misi serta dapat meningkatkan minat belajar para murid diluar jam

sekolah

108

4.2 Perancangan Sistem

Dibawah ini di jelaskan perancangan learning management system sekolah

PATMOS

4.2.1 Class Diagram

Gambar 4.1 Class Diagram

109

4.2.2 Statechart

4.2.2.1 Nilai Perilaku

Proses/ memilih_jawaban

Aktif

/ menyimpan_jawaban_dan_keterangan[gagal_mempublish]

[sukses_mempublish]

Pending/ menginput_keterangan

available/ membaca_nilai_perilaku

Gambar 4.2 Statechart Nilai Perilaku

4.2.2.2 Guru

Proses/ melakukan_login / melakukan_logout

/ membaca/ mengirim

/ mempublish

/ menginput

Gambar 4.3 Statechart Guru

4.2.2.3 Orang Tua


/ membaca

/ mengirim

/ mendownload

/ mempublish / menginput

Gambar 4.4 Statechart Orang Tua

110

4.2.2.4 Admin


/ mengupload

/ mendownload

/ menginput

/ mempublish

Gambar 4.5 Statechart Admin

4.2.2.5 Murid


/ melihat / mengerjakan

Gambar 4.6 Statechart Murid

4.2.2.6 Catatan Guru

Pending/ menginput_catatan_guru

Proses

/ mempublish_catatan_guru

[gagal_mempublish]

[sukses_menyimpan]Aktif

/ membaca_catatan_guru

Gambar 4.7 Statechart Catatan Guru

111

4.2.2.7 Agenda

Pending/ menginput_agenda_harian

Proses/ mempublish_agenda_harian

[gagal_mempublish]

[sukses_menyimpan]

Aktif/ membaca_agenda

Gambar 4.8 Statechart Agenda

4.2.2.8 Pengumuman

Proses/ menginput_pengumuman

Aktif

[sukses_mempublish]

[gagal_mempublish]

/ membaca_pengumuman

Pending/ mempublish_pengumuman

Gambar 4.9 Statechart Pengumuman

112

4.2.2.9 Sent

Proses/ menginput_pesan

Aktif

[sukses_mengirim_pesan]

[gagal_mengirim_pesan]

/ membaca_pesan

Pending/ mengirim_pesan

Gambar 4.10 Statechart Sent

4.2.2.10 Inbox

Proses/ menginput_pesan

Aktif

[sukses_mengirim_pesan]

[gagal_mengirim_pesan]

/ membaca_pesan

Pending/ mengirim_pesan

Gambar 4.11 Statechart Inbox

4.2.2.11 Materi

Proses/ memilih_materi

Aktif

[berhasil_mengupload]

[gagal_mengupload]

/ mendownload_materi

Pending/ mengupload_materi

.Gambar 4.12 Statechart Materi

113

4.2.2.12 Video

Proses/ mempublish_video

Aktif[berhasil_mempublish]

[gagal_mempublish]

/ melihat_video

Gambar 4.13 Statechart Video

4.2.2.13 Games

Proses/ mempublish_games

Aktif[berhasil_mempublish]

[gagal_mempublish]

/ mengerjakan_games

Gambar 4.14 Statechart Games

4.2.2.14 Ulangan Umum

Proses/ menginput_nilai_ulangan_umum

Aktif

[sukses_mempublish]

[gagal_mempublish]

/ membaca_ulangan_umum

Pending/ mempublish_nilai_ulangan_umum

Gambar 4.15 Statechart Ulangan Umum

114

4.2.2.15 Ulangan Harian

Proses/ menginput_nilai_ulangan_harian

Aktif

[sukses_mempublish]

[gagal_mempublish]

/ membaca_ulangan_harian

Pending/ mempublish_nilai_ulangan_harian

Gambar 4.16 Statechart Ulangan Harian

4.2.2.16 Tugas

Proses/ menginput_nilai_tugas

Aktif

[sukses_mempublish]

[gagal_mempublish]

/ membaca_tugas

Pending/ mempublish_nilai_tugas

Gambar 4.17 Statechart Tugas

4.2.2.17 Forum

Pending/ menginput_forum

Proses/ mempublish_forum

[gagal_mempublish]

[sukses_mempublish]Aktif

/ membaca_forum

Gambar 4.18 Statechart Forum

115

4.2.2.18 Artikel

Proses/ menginput_artikel

Aktif

[sukses_mempublish]

[gagal_mempublish]

/ membaca_artikel

Pending/ mempublish_artikel

Gambar 4.19 Statechart Artikel

4.2.2.19 Mapel

Proses/ memilih_mata_pelajaran / membaca_mata_pelajaran

Gambar 4.20 Statechart Mapel

116

4.2.3 Usecase

Sistem Informasi Sekolah Patmos

melakukan_login_member

melihat_pengumuman

mengakses_pesan

melihat_artikel

melihat_nilai

melihat_laporan

melihat_agenda_harian

mengakses_forum

menambah_catatan_guru

menambah_agenda

mengakses_file_nilai

mengakses_pengumuman

mengakses_member

menambah_materi

melihat_profile

mengakses_game_dan_video

mengakses_materi

mengakses_laporan

mengakses_nilai

mengakses_artikel

orang tua

guru

murid

admin

Gambar 4.21 Usecase

117

Usecase Spesification

4.2.3.13 Melakukan Login Member

• Semua member ( Guru, Orang Tua, Admin ) dapat

melakukan login dengan mengisi user id dan password.

• Object : Guru, Orang Tua, Admin, Form Login.

• Function : Create, read.

4.2.3.14 Melihat Pengumuman

• Setelah login, Guru dan Orang Tua dapat melihat

pengumuman terbaru yang telah di publish oleh admin.

• Object : Guru, Orang Tua, form pengumuman.

• Function : Create, Read.

4.2.3.3 Melihat Artikel

• Setelah login, Guru dan Orang Tua dapat melihat artikel

untuk mendapatkan informasi – informasi terbaru yang

telah di publish oleh admin.

• Object : Guru, Orang Tua, form artikel.


4.2.3.4 Mengakses Pesan

• Orang tua dapat menuliskan dan mengirimkan pesan

kepada guru, begitu pula sebaliknya, guru dapat

118

menuliskan pesan kepada orang tua. Menu itu bertujuan

supaya guru dan orang tua dapat saling berinteraksi

melalui menu pesan yang telah di sediakan. Sehingga

dapat terjalin komunikasi yang baik antara guru dan orang

tua

• Object : Guru, Orang Tua, Form Pesan.

• Function : Create, Read, Input, Delete, save, update.

4.2.3.5 Mengakses Game Dan Video

• Murid dapat mengakses game yang telah di sediakan,

dimana game tersebut bertujuan untuk membantu murid

dalam memahami materi yang diajarkan. Game tersebut

juga bertujuan untuk meningkatkan minat murid dalam

belajar. Selain itu, murid juga dapat mengakses materi

pelajaran mereka, dimana materi pelajaran yang diakses

oleh murid berupa video yang dapat lebih menarik minat

murid untuk belajar karena di sertai oleh gambar dan

suara.

• Object : Murid, aplikasi game, video

• Function : create, read, update

119

4.2.3.6 Melihat Laporan

• Pada menu ini orang tua dapat melihat perkembangan

perilaku anak mereka. Nilai perilaku yang dilaporkan oleh

guru mereka, menentukan kebutuhan khusus setiap murid.

• Object : Orang Tua, Form Penilaian Perilaku, nilai.

• Function : Create, read

4.2.3.7 Melihat Nilai

• Guru dapat melihat perkembangan nilai dari seluruh murid

yang mereka bimbing. Selain guru, orang tua juga dapat

melihat perkembangan nilai dari anak mereka. Dimana

pada menu ini, nilai yang di tampilkan yaitu nilai tugas,

nilai ulangan harian, nilai ulangan umum

• Object : Guru, Orang Tua, form nilai, nilai.


4.2.3.8 Melihat Agenda Harian

• Orang tua dapat melihat agenda harian dari anak mereka

setiap harinya. Dimana dalam agenda harian tersebut juga

berisi catatan guru yang melaporkan perkembangan anak

setiap harinya serta berisi mengenai pelajaran yang di

120

pelajari di kelas hari ini dan jadwal pelajaran anak untuk

besok.

• Object : Orang Tua, form agenda harian.


4.2.3.9 Mengakses Forum

• Setelah melakukan login, orang tua dan guru dapat

mengakses forum. Dimana dalam forum tersebut, seluruh

orang tua dan guru dapat melakukan komunikasi dan

saling berbagi informasi antara sesama orang tua murid,

guru maupun antara guru dan orang tua murid yang

bersifat lebih umum.

• Object : orang tua, guru, forum, informasi.

• Function : create, read, update, save

4.2.3.10 Melihat Materi

• Orang tua dapat mengakses materi pelajaran murid yang

telah diupload oleh admin. Materi tersebut berguna untuk

mendukung pehaman anak mengenai pelajaran yang telah

di ajarkan oleh guru.

• Object : Orang tua, murid, video, file materi

• Function : create, read

121

4.2.3.11 Mengakses Profil

• Setelah login, guru dapat melihat profil mereka masing –

masing dalam form profil.

• Object : Guru, Form Profil.


4.2.3.12 Menambah Catatan Guru

• Guru dapat menuliskan catatan mengenai perkembangan

dan kegiatan murid dikelas setiap harinya kepada orang

tua

• Object : Guru, Form catatan guru.

• Function : Create, Update, Save, read.

4.2.3.13 Mengakses File Nilai

• Guru dapat mengupload file nilai murid kepada admin,

sehingga dapat mempermudah admin dalam menginput

dan mempublish nilai setiap murid. Selain itu, admin juga

dapat mendownload file nilai yang telah di upload oleh

guru.

• Object : Guru, admin, file nilai

• Function : Create, update, save

122

4.2.3.14 Mengakses Laporan

• Guru memiliki hak akses untuk menginput laporan

penilaian perilaku murid bimbingan mereka. Saat

menginput laporan penilaian perilaku, guru harus memilih

pernyataan yang tepat berdasarkan pernyataan yang telah

disediakan. Hasil dari pilihan atau pernyataan guru, akan

dihitung nilainya. Apabila total nilai lebih dari 40, maka

anak tersebut akan dinyatakan bermasalah ( anak ADHD ).

Guru juga dapat menginput keterangan mengenai nilai

laporan perilaku anak kepada Orang Tua Murid.

• Object : Form Laporan Penilaian Perilaku, Guru,

Orang Tua, Nilai, Pernyataan, Jawaban.

• Function : Create, Update, Save, Read, Compute.

4.2.3.15 Menambah Agenda

• Guru dapat menginput halaman buku pelajaran yang telah

di pelajari hari ini dan perkiraan halaman dari buku

pelajaran yang akan di pelajari besok berdasarkan jadwal

pelajaran yang telah disediakan.

• Object : Guru, Orang Tua, Form Agenda Harian, Jadwal

Pelajaran

123

• Function : Create, Update, Edit, Save, read.

4.2.3.16 Mengakses Nilai

• admin menginput nilai dari setiap murid berdasarkan file

nilai yang telah di upload oleh guru. Dimana nilai tersebut

terdiri dari nilai tugas, nilai ulangan harian dan nilai

ulangan umum. Selain menginput, admin juga dapat

mengedit nilai murid apabila terjadi kesalahan.

• Object : Form Nilai, admin, nilai, file.

• Function : Create, Update, Save, Read, edit.

4.2.3.17 Mengakses Pengumuman

• Admin dapat menambahkan pengumuman yang akan

dipublish. Pengumuman yang dipublish bertujuan supaya

orang tua dan guru dapat mengetahui event – event dan

pengumuman di sekolah

• Object : Artikel, pengumuman, Admin, form

pengumuman.

• Function : Create, Save, Update, Edit, Delete, read.

4.2.3.18 Mengakses Artikel

• Admin dapat menambahkan artikel yang akan dipublish.

Dimana artikel tersebut di harapkan dapat bermanfaat bagi

124

Orang Tua dan Guru untuk menambah informasi

mengenai anak berkebutuhan khusus.

• Object : Artikel, pengumuman, Admin, form

artikel.

• Function : Create, Save, Update, Edit, Delete, read.

4.2.3.19 Mengakses Member

• Admin dapat menambahkan data murid dan orang tua,

serta guru. Dimana ID murid dan guru digunakan untuk

melakukan login.

• Object : Admin, form add murid, form add guru

• Function : Create, Save, Update, edit, delete, read.

4.2.3.20 Menambah Materi

• Admin dapat menambahkan materi pelajaran murid.

Materi tersebut berguna untuk mendukung pemahaman

anak mengenai pelajaran yang telah di ajarkan oleh guru.

• Object : Admin, file materi

• Function : create, update

125

4.2.4 Sequence Diagram

4.2.4.1 Melakukan Login Member

4.2.4.1.1 Melakukan Login Guru

Guru UI Logincreate()

entry_require_field()

klik_signin()

Member

validasi()

data_invalid()

validasi()

data_valid()

Home UIcreate()

X x

Gambar 4.22 Sequence Melakukan Login Guru

Keterangan gambar sequence login guru

Sebelum dapat mengakses website, Guru harus melakukan login

terlebih dahulu dengan mengisi username dan password

126

kemudian mengklik log in.Setelah guru log in, maka guru dapat

mengakses dan melakukan aktivitas dalam website.

4.2.4.1.2 Melakukan Login Admin

Admin UI Logincreate()


klik_signin()

Member

validasi()

data_invalid()

validasi()

data_valid()

Home UIcreate()

XX

Gambar 4.23 Sequence Melakukan Login Admin

Keterangan gambar sequence login admin

Sebelum dapat mengakses website, admin harus melakukan login

terlebih dahulu dengan mengisi username dan password kemudian

127

mengklik log in Setelah admin log in, maka admin dapat

mengakses dan melakukan aktivitas dalam website.

4.2.4.1.3 Melakukan Login Orang Tua

Orang Tua UI Logincreate()


klik_signin()

Member

validasi()

data_invalid()

validasi()

data_valid()

Home UIcreate()

XX

Gambar 4.24 Sequence Melakukan Login Orang Tua

Keterangan gambar sequence login orangtua

Sebelum dapat mengakses website, orangtua harus melakukan

login terlebih dahulu dengan mengisi username dan password

128

kemudian mengklik log in Setelah orangtua log in, maka orangtua

dapat mengakses dan melakukan aktivitas dalam website.

4.2.4.2 Melihat Pengumuman

4.2.4.2.1 Melihat Pengumuman (Guru)

Guru

UI Pengumumancreate() Agenda

get()

result()

X

Gambar 4.25 Sequence Melihat Pengumuman (Guru)

Keterangan gambar sequence melihat pengumuman

Setelah login, pengumuman dapat langsung dilihat dan diakses.

Dalam menu pengumuman terdapat tanggal pengumuman beserta

berita-berita yang ada di sekolah.

129

4.2.4.2.2 Melihat Pengumuman (Orang Tua)

Orang Tua

UI Pengumumancreate() Agenda

get()

result()

X

Gambar 4.26 Sequence Melihat Pengumuman (Orang Tua)

Keterangan gambar sequence melihat pengumuman

Setelah login, pengumuman dapat langsung dilihat dan diakses.

Dalam menu pengumuman terdapat tanggal pengumuman beserta

berita-berita yang ada di sekolah.

130

4.2.4.3 Melihat Artikel

4.2.4.3.1 Melihat Artikel (Orang Tua)

orang tua UI Artikelcreate() Artikel

get_artikel()

result()

klik_name()

get_artikel()

result()

List Tanggalcreate() Tanggal

get()

result()

select_tanggal()

find()

klik_go()

get_artikel()

result() x xx

Gambar 4.27 Sequence Melihat Artikel (Orang Tua)

131

Keterangan gambar sequence melihat artikel (orang tua)

Artikel yang tampil pada halaman artikel dapat dilihat

berdasarkan tanggal, bulan, tahun. Artikel dapat dibaca oleh

member untuk menambah wawasan pembaca.

132

4.2.4.3.2 Melihat Artikel (Guru)

Guru UI Artikelcreate() Artikel

get_artikel()

result()

klik_name()

get_artikel()

result()


get()

result()

select_tanggal()

find()

klik_go()

get_artikel()

result() x xx

Gambar 4.28 Sequence Melihat Artikel (Guru)

Keterangan gambar sequence melihat artikel (guru)

133

Artikel yang tampil pada halaman artikel dapat dilihat

berdasarkan tanggal, bulan, tahun. Artikel dapat dibaca oleh

member untuk menambah wawasan pembaca.

4.2.4.4 Mengakses Pesan

4.2.4.4.1 Mengakses Pesan (Orang Tua)

Orang Tua UI Pesancreate() Sent

get()

result()

klik_tulis_pesan()

UI Tulis Pesancreate()

List Gurucreate() Guru

get()

result()

select_guru()

entry_pesan()

klik_save()

update()

klik_terkirim()

get()

result()

find()

Inbox

X

XX X

Gambar 4.29 Sequence Mengakses Pesan (Orang Tua)

Keterangan gambar sequence mengakses pesan (orang tua)

Guru dan orangtua dapat mengakses pesan. Guru dan orangtua

dapat saling mengirimkan pesan lewat website. Setelah

134

menuliskan pesan, orang tua juga dapat memilih kepada siapa

pesan akan dikirimkan. Pesan yang telah terkirim juga dapat

dilihat kembali, sedangkan pesan yang tidak dibutuhkan juga

dapat dihapus. Dengan adanya fasilitas pengiriman pesan lewat

website, akan memudahkan komunikasi antara guru dan orangtua.

4.2.4.4.2 Mengakses Pesan (Guru)

Guru UI Pesancreate() Inbox

get()

result()

klik_tulis_pesan()

UI Tulis Pesancreate()

List Muridcreate() Murid

get()

result()

select_guru()

entry_pesan()

klik_save()

update()

klik_terkirim()

get()

result()

find()

Sent

X

X XX

Gambar 4.30 Sequence Mengakses Pesan (Guru)

Keterangan gambar sequence mengakses pesan (guru)

Guru dan orangtua dapat mengakses pesan. Guru dan orangtua

dapat saling mengirimkan pesan lewat website. Setelah

menuliskan pesan, guru juga dapat memilih kepada siapa pesan

135

akan dikirimkan. Pesan yang telah terkirim juga dapat dilihat

kembali, sedangkan pesan yang tidak dibutuhkan juga dapat

dihapus. Dengan adanya fasilitas pengiriman pesan lewat website,

akan memudahkan komunikasi antara guru dan orangtua.

4.2.4.5 Mengakses Game Dan Video

4.2.4.5.1 Mengakses Game

Murid UI Home Gamescreate()

get()

result()

File Games

UI Games

klik_game()

create()

get()

result()

XX

Gambar 4.31 Sequence Mengakses Game

Keterangan gambar sequence mengakses game

Murid dapat mengakses game yang terdapat pada menu murid.

Setelah murid mengklik menu game tersebut, murid dapat

langsung memainkan game tersebut. Game tersebut bertujuan

136

untuk membantu murid dalam memahami materi pelajaran yang

diajarkan

4.2.4.5.2 Mengakses Video

Murid UI My Classcreate() Mata Pelajaran

get()

result()

klik_mata_pelajaran()

create() UI Mata Pelajaran File Video

UI Video

get()

result()

klik_video()

create()

get()

result()

X

XX

Gambar 4.32 Sequence Mengakses Video

Keterangan gambar sequence mengakses video

Murid dapat mengakses video yang terdapat pada menu murid.

Setelah murid mengklik menu myclass dan memilih matapelajaran

yang akan di pelajari serta memilih bab pelajaran yang akan di

pelajari, murid dapat langsung memainkan mengakses video

tersebut.Video tersebut bertujuan untuk membantu murid dalam

memahami materi pelajaran yang diajarkan

137

4.2.4.6 Melihat Laporan

Orang Tua UI Laporan Nilai Semestercreate()

List Semestercreate() Semester

get()

result()

select_semester()

find()

klik_go() Ulangan

get()

result() Tugas

get()

result() Ulangan Umum

get()

result()

compute_target_ulangan_umum()

klik_laporan_penilaian_perilaku()UI Laporan Penilaian

Perilakucreate() Nilai Perilaku

get()

result()

X X

X X

Gambar 4.33 Sequence Melihat Laporan

Keterangan gambar sequence melihat laporan

Pada menu laporan, terdapat laporan nilai semester dan laporan penilaian

perilaku. Laporan nilai akan tampil setelah memilih semester. Laporan

nilai semester menampilkan rata-rata nilai ulangan harian, tugas dan

ulangan umum serta target nilai ulangan umum yang harus didapatkan.

Laporan penilaian perilaku, terdapat nilai perilaku murid setiap semester

serta keterangan kondisi anak.

138

4.2.4.7 Melihat Nilai

4.2.4.7.1 Melihat Nilai (Orang Tua)

Orang Tua UI Nilai Tugascreate() Tugas

get_nilai()

return()

List Keterangan & Semestercreate() Keterangan & Semester

get()

result()

select_keterangan_&_Semester()

find()klik_go()

get_nilai()

return()

UI Nilai Ulangancreate() Ulangan

get_nilai()

return()

get()

result()

select_keterangan_&_Semester()

find()klik_go()

get_nilai()

return()

UI Nilai Ulangan Umumcreate() Ulangan Umum

get_nilai()

return()

get()

result()

Select_Keterangan_&_Semester()

find()klik_go()

get_nilai()

return()

X

X

XX X

Gambar 4.34 Sequence Melihat Nilai (Orang Tua)

139

Keterangan gambar sequence melihat nilai (orang tua)

Pada menú nilai, terdapat seluruh hasil nilai murid. Nilai terdiri

dari nilai tugas, ulangan harian, dan nilai ulangan umum. Nilai

dapat ditampilkan berdasarkan mata pelajaran dan jenis nilai per

semester.

140

4.2.4.7.2 Melihat Nilai (Guru)

Guru UI Daftar Nilaicreate()

klik_nilai_tugas()

List Semestercreate() Semester

get()

result()

select_semester()

find()

klik_go() Tugas

get_nilai()

result()

klik_ulangan_harian()


get()

result()

select_semester()

find()

klik_go() Ulangan

get_nilai()

result()

klik_ulangan_umum()


get()

result()

select_semester()

find()

klik_go() Ulangan Umum

get_nilai()

result()

X

X X

Gambar 4.35 Sequence Melihat Nilai (Guru)

141

Keterangan gambar sequence melihat nilai (guru)

Pada menú nilai, terdapat seluruh hasil nilai murid. Nilai terdiri

dari nilai tugas, ulangan harian, dan nilai ulangan umum. Nilai

dapat ditampilkan berdasarkan mata pelajaran dan jenis nilai per

semester.

4.2.4.8 Melihat Agenda Harian

Orang Tua UI Agenda Agendacreate()

get()

result() Catatan Guru

get()

result()

X

Gambar 4.36 Sequence Melihat Agenda Harian

Keterangan gambar sequence melihat agenda harian

Agenda dapat diakses oleh orangtua dan guru. Pada menu agenda

terdapat jadwal pelajaran hari ini dan besok. Pada jadwal hari ini juga

142

terdapat pesan dari guru. Setiap harinya guru akan memberikan pesan

kepada orangtua tentang murid.

4.2.4.9 Mengakses Forum

4.2.4.9.1 Mengakses Forum (Guru)

Guru UI Index Forum UI View Forum

UI New Topic Forum

create()

klik_your_first_forum()

klik_new_topic()

create()

entry_field()

klik_save()

update()

klik_post_reply()

UI Post Replycreate()

entry_field()

klik_save()

update()

X X

X

X

Gambar 4.37 Sequence Mengakses Forum (Guru)

Keterangan gambar sequence mengakses forum (guru)

Guru dapat mengakses forum dengan mengklik new topic untuk

membuat topic baru dan guru juga dapat mengirim balesan dari

topic yang telah ada dengan mengklik post reply

143

4.2.4.9.2 Mengakses Forum (Orang Tua)

Orang Tua UI Index Forum UI View Forum

UI New Topic Forum

create()

klik_your_first_forum()

klik_new_topic()

create()

entry_field()

klik_save()

update()

klik_post_reply()

UI Post Replycreate()

entry_field()

klik_save()

update()

X

X X

X

Gambar 4.38 Sequence Mengakses Forum (Orang Tua)

Keterangan gambar sequence mengakses forum (orang tua)

Orang tua dapat mengakses forum dengan mengklik new topic

untuk membuat topic baru dan guru juga dapat mengirim balesan

dari topic yang telah ada dengan mengklik post reply

144

4.2.4.10 Mengakses Materi

Orang Tua

UI Matericreate() File Materi

get()

result()

klik_file()

find()

result()

X

Gambar 4.39 Sequence Mengakses Materi

Keterangan gambar sequence mengakses materi

Orang tua dapat mengakses materi yang telah di upload oleh admin.

Materi tersebut merupakan materi yang murid pelajari di sekolah. Melalui

menu akses materi, diharapkan orang tua dapat mendukung pembelajaran

murid disekolah dengan mengajari anak mereka di rumah.

145

4.2.4.11 Melihat Profil

Guru

UI Profilecreate() Member

get_data()

result()

X

Gambar 4.40 Sequence Melihat Profil

Keterangan gambar sequence melihat profil

Pada menu profil, guru dapat terlihat profil guru yang terdiri dari nama ,

tempat/tgl lahir , agama, alamat, kode pos, dan nomor telepon dan catatan

146

4.2.4.12 Menambah Catatan Guru

Guru

UI Catatan Gurucreate() Member

get_nama_siswa()

result()

entry_catatan()

save()

Catatan Guru

update()

close()

XGambar 4.41 Sequence Menambah Catatan Guru

Keterangan gambar sequence menambah catatan guru

Guru dapat menuliskan catatan kepada murid setiap harinya. Catatan guru

berisikan nama-nama murid yang diperoleh dari database member. Guru

mengentry kegiatan masing – masing murid secara keseluruhan pada hari

itu dan akan dilaporkan setiap harinya kepada orangtua murid.

147

4.2.4.13 Mengakses File Nilai

4.2.4.13.1 Mengakses File Nilai (Admin)

Admin

UI File Nilaicreate() File Nilai

get_data()

result()

select_file()

X

Gambar 4.42 Sequence Mengakses File Nilai (Admin)

Keterangan gambar sequence mengakses file nilai

Pada menu file nilai, Admin dapat menerima file dari guru, file

tersebut berisi nilai-nilai murid. File tersebut berisi nilai – nilai

murid yang harus di input ke dalam halaman nilai murid.

148

4.2.4.13.2 Mengakses File Nilai (guru)

Guru UI File Nilaicreate()

klik_browse()

Folder File

find()

File Nilai

klik_open()

upload()

update()

X

X

Gambar 4.43 Sequence Akses File Nilai (Guru)

Keterangan gambar sequence mengakses file nilai

Pada menu file nilai, guru dapat mengirimkan file yang berisi nilai

murid ke admin. Guru mencari file yang ingin dikirimkan.

Kemudian mengklik upload, maka semua file akan disimpan pada

folder file.

149

4.2.4.14 Mengakses Laporan

Guru UI Murid Member

UI Penilaian Perilaku

List Semester & Kelas Semester & Kelas

create()

get_nama_siswa()

return()

klik_nama_siswa()

create()

create()

get()

result()

select_semester_&_kelas()

find()

select_jawaban()

klik_ok()

UI Keterangancreate()

compute_jawaban()

entry_keterangan()

klik_ok() Nilai Perilaku

update()

X

X

X

XX

Gambar 4.44 Sequence Mengakses Laporan

Keterangan gambar sequence mengakses laporan

Guru dapat menginput laporan penilaian perilaku setiap murid.

Sebelumnya guru harus memilih menu laporan dan setelah itu pilih nama

murid yang akan di input laporan penilaian perilakunya terlebih dahulu.

Kemudian pilih jawaban yang sesuai berdasarkan pernyataan yang telah

disediakan apabila jawaban telah dipilih maka guru dapat mengklik

button ok dan jawaban yang telah dipilih akan dihitung secara otomatis.

150

Kemudian guru dapat menginput keterangan berdasarkan hasil dari

penilaian perilaku tersebut. Apabila data tersebut telah benar, klik ok dan

hasil laporan tersebut akan diupdate dalam database nilai perilaku

4.2.4.15 Menambah Agenda

Guru UI Agendacreate() Agenda

get()

result()

input_required_field()

klik_save()

update()

X

Gambar 4.45 Sequence Menambah Agenda

Keterangan gambar sequence menambah agenda

Guru dapat menuliskan agenda harian dimana agenda harian merupakan

jadwal pelajaran murid setiap hari, untuk jadwal hari ini dan besok.

Setelah guru menginput agenda harian, agenda tersebut disave didalam

database agenda.

151

4.2.4.16 Mengakses Nilai

4.2.4.16.1 Mengakses Nilai Tugas

Admin UI Muridcreate() Member

get_nama_siswa()

result()

klik_nama_siswa()

UI Nilai Tugascreate()

List Keterangan Semestercreate() Keterangan & Semester

get()

result()

select_tugas_&_semester()

find()klik_go()

Tugas

get_nilai()

result()

klik_edit()


klik_save()

update()

XX

X X

Gambar 4.46 Sequence Mengakses Nilai Tugas

Keterangan gambar sequence mengakses nilai tugas

Admin dapat mengakses nilai dengan mengklik daftar nama murid

dari database member. Setelah itu memilih list nilai dan semester

dan kemudian klik go, maka nilai dari database akan tampil.

Apabila admin memilih tugas dan klik go maka akan tampil daftar

nilai tugas murid dan rata-rata nilai tugas murid. Admin juga

dapat mengedit semua nilai dengan mengklik edit dan mengentry

152

semua data yang diminta,database terupdate, kemudian nilai akan

terganti dengan nilai yang baru.

4.2.4.16.2 Mengakses Nilai Ulangan


get_nama_siswa()

result()

klik_nama_siswa()

UI Nilai Ulangancreate()


get()

result()


find()klik_go()

Ulangan

get_nilai()

result()

klik_edit()


klik_save()

update()

XX

X X

Gambar 4.47 Sequence Mengakses Nilai Ulangan

Keterangan gambar sequence mengakses nilai ulangan




Apabila admin memilih ulangan harian dan klik go maka akan

tampil daftar nilai ulangan harian murid dan nilai remedial murid.

153

Admin juga dapat mengedit semua nilai,dengan mengklik edit dan

mengentry semua data yang diminta database terupdate,

kemudian nilai akan terganti dengan nilai yang baru.

4.2.4.16.3 Mengakses Nilai UlanganUmum


get_nama_siswa()

result()

klik_nama_siswa()

UI Nilai Ulangan Umumcreate()


get()

result()


find()klik_go()

Ulangan Umum

get_nilai()

result()

klik_edit()


klik_save()

update()

XX

X X

Gambar 4.48 Sequence Mengakses Nilai Ulangan Umum

Keterangan gambar sequence mengakses nilai ulangan umum



154


Apabila admin memilih ulangan umum dan klik go maka akan

tampil daftar nilai ulangan umum. Admin juga dapat mengedit

semua nilai dengan mengklik edit dan mengentry semua data yang

diminta database terupdate, kemudian nilai akan terganti dengan

nilai yang baru.

4.2.4.17 Mengakses Pengumuman

Admin UI Pengumumancreate() Pengumuman

get_pengumuman()

result()

klik_create_new()

UI Pengumuman Barucreate()


klik_save()

update()

klik_edit()

get_pengumuman()

result()

edit_require_field()

save()

update()

klik_delete()

update()

X

X

Gambar 4.49 Sequence Mengakses Pengumuman

155

Keterangan gambar sequence mengakses pengumuman

Admin dapat menambah pengumuman dengan mengklik menu

pengumuman dan kemudian menginput pengumuman yang akan

dipublish. Pengumuman yang akan dipublish tersebut disimpan dalam

database pengumuman.

4.2.4.18 Mengakses Artikel

156

Admin UI Artikelcreate() Artikel

get_artikel()

result()

klik_create_new() UI Artikel Baru


klik_save()

update()

klik_edit()

get_artikel()

result()

edit_require_field()

klik_save()

update()

klik_delete()

update()


get()

result()

select_tanggal,_bulan,_tahun()

find()

klik_go()

get_artikel()

result()

X

X

XX

Gambar 4.50 Sequence Mengakses Artikel

Keterangan gambar sequence mengakses Artikel

157

Admin dapat menambah artikel yang akan dipublish dengan mengklik

menu artikel kemudian input artikel yang akan dipublish. Artikel tersebut

kemudian akan disimpan dalam database artikel.

4.2.4.19 Mengakses Member

4.2.4.19.1 Mengakses Member (Murid)

Admin UI Gurucreate() Member

get_nama_murid()

result()

klik_nama_murid()

UI Edit Data Muridcreate()

entry_required_field()

klik_save()

update()

klik_delete()

update()

klik_create_new()

UI Tambah Data Muridcreate()


klik_save()

update()

X

X

X

Gambar 4.51 Sequence Mengakses Member (Murid)

158

Keterangan gambar sequence mengakses member (murid)

Pada menu murid, terdapat daftar nama murid dari database

member. Untuk mengedit data murid, nama murid diklik, lalu akan

tampil data-data database member. Semua data murid bisa diedit,

setelah itu disave, maka database terupdate dan akan tampil data

murid yang baru. Admin bertugas untuk mengupdate data murid

dan juga dapat menambahkan data murid yang terbaru. Apabila

ada murid yang keluar atau pindah sekolah, maka data juga bisa

dihapus, dengan mengklik delete maka data murid akan berhasil

terhapus dari database.Untuk menambahkan data murid, admin

harus mengklik create new dan mengisi field – field yang telah

disediakan. Setelah admin mengklik save, data tersebut akan

disimpan dalam database member.

159

4.2.4.19.2 Mengakses Member (Guru)

Admin UI Gurucreate() Member

get_nama_murid()

result()

klik_nama_murid()

UI Edit Data Gurucreate()

entry_required_field()

klik_save()

update()

klik_delete()

update()

klik_create_new()

UI Tambah Data Gurucreate()


klik_save()

update()

X

X

X

Gambar 4.52 Sequence Mengakses Member (Guru)

Keterangan gambar sequence mengakses member (guru)

Admin dapat mengedit data guru,dengan mengklik nama guru, lalu

akan tampil data-data database member. Semua data guru bisa

diedit, setelah itu disave, maka database terupdate dan akan

tampil data guru yang baru. Admin bertugas untuk mengupdate

160

data guru dan juga dapat menambahkan data guru yang terbaru.

Apabila ada guru yang keluar atau pindah sekolah, maka data juga

bisa dihapus, dengan mengklik delete maka data guru akan

berhasil terhapus dari database. Untuk menambahkan guru ,

admin harus mengklik create new dan mengisi field – field yang

telah disediakan. Setelah admin mengklik save, data tersebut akan

disimpan dalam database member.

4.2.4.20 Menambah Materi

Admin UI File Matericreate()

klik_browse()

Folder File

find()

File Materi

klik_open()

upload()

update()

X

X

Gambar 4.53 Sequence Menambah Materi

161

Keterangan gambar sequence menambah materi

Pada menu upload, Admin dapat mengupload materi tambahan kepada

orangtua murid. Admin mencari file yang ingin dikirimkan, setelah klik

upload, maka semua file akan disimpan pada folder materi dan bisa

didownload oleh orangtua murid.

4.2.5 Rancangan Database

Rancangan database yang di gunakan dalam pembuatan learning

management system sekolah PATMOS:

• DB_File_nilai

Tabel 4.1 DB_File_nilai

• DB_File_games

Tabel 4.2 DB_File_games

Nama Field Tipe Data Size

id_file_nilai int 4

Nama_file_nilai text

Tipe_file_nilai char 5


id_file_games int 4

Nama_file_games text

Tipe_file_games char 5

162

• DB_File_video

Tabel 4.3 DB_File_video

• DB_File_materi

Tabel 4.4 DB_File_materi

• DB_artikel

Tabel 4.5 DB_artikel


id_file_video int 4

Nama_file_video text

Tipe_file_video char 5


id_file_materi int 4

Nama_file_materi text

Tipe_file_materi char 5


id_artikel Int 3

tgl_artikel date

title_artikel Varchar 80

body_artikel Varchar 5000

id_member Varchar 3

163

• DB_agenda

Tabel 4.6 DB_agenda

• DB_ket_mapel

Tabel 4.7 DB_ket_mapel

• DB_mata_pelajaran

Tabel 4.8 DB_mata_pelajaran


Id_agenda Int 3

Id_mpel Int 2

Ket_agenda varchar 25

hari varchar 6


Id_member Varchar 3

Id_mpel Int 1

Ket-mapel varchar 20


Id_mpel Int 1

Nama_mpel Varchar 20

164

• DB_member

Tabel 4.9 DB_member


Id_member Varchar 3

Nama_member Text

Nama_anak Text

Alamat_member Varchar 30

Tlp_member Varchar 12

Kode_pos Varchar 5

Tempat_lahir Varchar 15

Tgl_lahir Varchar 17

Agama_member Text

Status_member Int 1

Kelas_anak Int 1

Jenis_kelamin Text

Catatan_member Varchar 300

Password Varchar 10

165

• DB_inbox

Tebl 4.10 Db_inbox


Id_inbox Int 3

Title_inbox Varchar 30

Body_inbox Varchar 300

Tgl_inbox Timestamp

Id_member Varchar 3

Id_sent Varchar 3

• DB_nilai_perilaku

Tabel 4.11 DB_nilai _perilaku


Id_nilai_perilaku Int 2

Class Int 1

Semester Int 1

Id_member Int 3

Nilai_p Int 3

Ket_perilaku Varchar 300

166

• DB_pengumuman

Tabel 4.12 DB_pengumuman


Id_pengumuman Int 3

Tgl_pengumuman Int 2

Isi_pengumuman Varchar 300

Bln_pengumuman Int 2

• DB_sent

Tabel 4.13 DB_sent


Id_sent Int 3

Title_sent Varchar 30

Body_sent Varchar 300

Tgl_sent Int 2

Id_msg Varchar 3

Id_member Varchar 3

167

• DB_tugas

Tabel 4.14 DB_tugas


Id_tugas Int 2

T1 Float

Id_mpel Int 2

Id_member Varchar 3

Semester Int 1

• DB_ulangan

Tabel 4.15 DB_ulangan


Id_ulangan Int 2

U1 Float

Id_mpel Int 2

Id_member Varchar 3

U2 Float

Semester Int 1

168

• DB_forum

Tabel 4.16 DB_forum


Id_topik Varchar 4

Nama Topik Text

Isi_pesan Text

Balas_pesan Int 4

View Int 4

Last_posts Timestamp

Id_member Varchar 3

• DB_catatan_guru

Tabel 4.17 DB_catatan_guru


Id_catatan_guru Int 4

Id_member Int 3

Isi Text

169

• DB_ulangan_umum

Tabel 4.18 DB_ulangan_umum


Id_ulum Int 2

Nilai_ulum Float

Id_mpel Int 2

Id_member Varchar 3

Semester Int 1

4.3 Perancangan Sistem Yang Diusulkan

4.3.1 Perancangan Layar Orang tua

4.3.1.1 Perancangan Layar Login Orang Tua

Logo Sekolah

Menu Utama

Home Forum Artikel

Sign in here User Login Username Password Forgot Password

Log In

©Copyright 2009 Gambar 4.54 Perancangan Layar Login Orang Tua

170

Halaman login merupakan halaman pertama yang akan di jumpai

sebelum orang tua dapat melakukan akses ke dalam halaman selanjutnya.

Pada halaman ini, akan di jumpai logo sekolah pada bagian paling atas

layar dan pada bagian tengah akan dijumpai username yang harus di isi

dengan ID murid dan password yang telah di berikan oleh admin, pada

bagian bawahnya terdapat tombol log in untuk masuk kehalaman

selanjutnya setelah username dan password telah terisi dengan benar.

Terdapat juga link forgot password, link ini di gunakan apabila orang tua

lupa akan password mereka. Link ini akan memberikan petunjuk bagi

orang tua bagaimana untuk mendapatkan password mereka. Pada bagian

bawah layar terdapat tulisan ©Copyright 2009

4.3.1.2 Perancangan Layar Forget Password

Logo Sekolah

Menu Utama

Home Forum Artikel

Artikel

Sign in Forget Password Form ………………………………………………

©Copyright 2009 Gambar 4.55 Perancangan Layar Forget Password

171

Pada halaman ini dijelaskan mengenai petunjuk bagaimana untuk

mendapatkan password baru, apabila mereka lupa dengan password

mereka. Pada halaman ini, akan di jumpai logo sekolah pada bagian

paling atas layar dan pada bagian tengah terdapat petunjuk mengenai

bagaimana untuk mendapatkan password baru dan Pada bagian bawah

layar terdapat tulisan ©Copyright 2009

4.3.1.3 Perancangan Layar Utama Orang Tua

Logo Sekolah

Menu Utama

Orang Tua Anak

Artikel

Log out Halaman Orang Tua

GAMBAR

Halaman Anak

GAMBAR

Galery

Photo Photo Photo Photo

Read More

©Copyright 2009 Gambar 4.56 Perancangan Layar Utama Orang Tua

Setelah orangtua melakukan login, layar pertama yang akan mereka

jumpai yaitu halaman utama. Pada halaman ini, akan di jumpai logo

sekolah pada bagian paling atas layar dan pada bagian tengah akan

terdapat 2 gambar yaitu gambar orang tua dan gambar murid. Dimana

172

dalam halaman orang tua ini, di bagi menjadi 2 bagian yaitu bagian orang

tua dan bagian murid. Orang tua tinggal mengklik bagian yang ingin

dilihat apakan bagian orang tua maupun murid. Pada bagian bawah layar

terdapat tulisan ©Copyright 2009

4.3.1.4 Perancangan Layar Home Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman

Agenda Forum Artikel Pesan Nilai

Laporan Materi

Menu Anak

Artikel

Log out LATAR BELAKANG PATMOS SCHOOL Galery


Read More

©Copyright 2009 Gambar 4.57 Perancangan Layar Home Orang Tua


layar dan pada bagian tengah akan dijumpai Halaman berisi mengenai

latar belakang sekolah PATMOS dan menu yang terdapat pada halaman

173

orang tua yaitu menu home, pengumuman, agenda, forum, artikel, pesan,

nilai laporan, materi dan menu anak, selain itu juga terdpat galeri foto

anak. Pada bagian bawah layar terdapat tulisan ©Copyright 2009

4.3.1.5 Perancangan Layar Pengumuman Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Pengumuman Tanggal Berita

Back

©Copyright 2009 Gambar 4.58 Perancangan Layar Pengumuman Orang Tua


layar dan pada bagian tengah akan dijumpai penguman yang terdiri dari

tanggal pengumuman tersebut dipublish, dan isi dari pengumuman

tersebut. Selain itu juga terdapat link back yang berguna untuk kembali

174

kepada halaman yang sebelumnya di akses. Pada bagian sebelah kananya

terdapat menu – menu yang terdapat pada halaman orang tua beserta

tombol logout. Pada bagian bawah layar terdapat tulisan ©Copyright

2009

4.3.1.6 Perancangan Layar Agenda Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Jadwal Hari, Tanggal Bulan Tahun

No MataPelajaran Bahan

Catatan: ………………….. Jadwal Hari, Tanggal Bulan Tahun


Galery


Read More

©Copyright 2009 Gambar 4.59 Perancangan Layar Agenda Orang Tua


layar dan pada bagian tengah akan dijumpai jadwal pelajaran murid untuk

hari ini dan besok serta halaman dari buku pelajaran yang di pelajari hari

ini dan besok serta catatan dari guru mengenai kegiatan anak di kelas

175

pada hari tersebut. Pada halaman ini juga terdapat galeri foto anak. Pada

sebelah kanan layar terdapat menu – menu orang tua. Pada bagian bawah


4.3.1.7 Perancangan Layar Forum

New Topic Search this forum search

Topic Replies Views Last Topic

New Topic

Jump To V Go

Display Topic From Previous

V Sort By V V GO

Gambar 4.60 Perancangan Layar Forum

Pada halaman ini akan di jumpai tombol new topic yang di gunakan

untuk membuat topik baru. Selain itu. Juga terdapat text box yang

digunakan untuk membantu user mencari informasi yang di butuhkan.

Apabila user sudah mengetikan kata kunci dari informasi yang ingin di

cari, user dapat mengklik search.

176

4.3.1.8 Perancangan Layar Forum<< New Topic

Your First Forum

Topic Icon O O O

Subject

Save Previous Submit

Gambar 4.61 Perancangan Layar Forum << New Topic

Pada halaman ini akan dijumpai icon – icon yang dapat di gunakan dan

user juga dapat menulis judul dari forum yang akan di upload. User juga

dapat menulis informasi untuk di upload dalam forum pada text area

yang telah di sediakan

4.3.1.9 Perancangan Layar Artikel Orang Tua

177

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Artikel Judul Artikel, tahun – bulan – tanggal ……………………………………………………………… selanjutnya

Tanggal V Bulan V Tahun V go

©Copyright 2009 Gambar 4.62 Perancangan Layar Artikel Orang Tua


layar dan pada bagian tengah akan dijumpai artikel – artikel yang telah di

publish dimana terdapat juga keterangan tanggal, bulan dan tahun

publish. Pada bagian ini juga terdapat link selanjutnya pada setiap artikel

yang di publish, apabila orang tua ingin membaca artikel yang telah di

publish tersebut dengan lebih jelas dan lengkap, maka orang tua murid

dapat mengklik link more. Orang tua murid juga dapat memilih artikel

yang ingin di baca nya berdasarkan tanggal, bulan dan tahun. Setelah

orang tua memilih tanggal, bulan dan tahun dari artikel yang ingin di

bacanya, apabila orang tua murid telah memilih taanggal, bulan dan

178

tahunnya, mereka dapat mengklik tombol go. Pada sebelah kanan layar

terdapat menu – menu orang tua. Pada bagian bawah layar terdapat

tulisan ©Copyright 2009

4.3.1.10 Perancangan Layar Pesan Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Pesan Masuk Tulis Pesan Terkirim Pengirim Pesan Keterangan Hapus

Galery


Read More

©Copyright 2009 Gambar 4.63 Perancangan Layar pesan Orang Tua


layar dan pada bagian tengah akan dijumpai pesan yang masuk. Pada

bagian table pesan terdapat tanda kotak yang di gunakan untuk

menghapus pesan. Dimana orangtua murid dapat menandakan pesan yang

ingin di hapus kemudian mengklik tombol hapus. Pada halaman ini juga

179

terdapat link tulis pesan dan link terkirim. Link tulis pesan berguna untuk

menulis pesan baru. Sedangkan link terkirim diguankan untuk melihat

pesan yang telah kita kirimkan. Pada halaman ini juga terdapat galeri foto

Pada sebelah kanan layar terdapat menu – menu orang tua. Pada bagian


4.3.1.11 Perancangan Layar Pesan << Tulis Pesan Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Tulis Pesan Topik Kepada Pesan Back

©Copyright 2009 Gambar 4.64 Perancangan Layar Pesan<<Tulis Pesan Orang

Tua


layar dan pada bagian tengah akan dijumpai topik, kepada, dan pesan.

Save

180

Orang tua murid dapat mengisi topik sebagai judul dari pesan yang akan

dikirim, pada bagian kepada terdapat combo box yang berisi nama guru

yang megajar di sekolah PATMOS, orang tua murid memilih kepada

siapa surat tersebut akan di berikan. Orang tua murid juga dapat

menuliskan pesan mereka pada textarea yang ada setelah semua diisi,

klik tombol save dan pesan tersebut akan dikirm. Pada sebelah kanan

layar terdapat menu – menu orang tua. Pada bagian bawah layar terdapat


4.3.1.12 Perancangan Layar Pesan << Terkirim Orang Tua

181

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Pesan Terkirim Tulis Pesan Pesan Kepada Pesan Keterangan

Galery


Read More

©Copyright 2009 Gambar 4.65 Perancangan Layar Pesan<<Terkirim Orang

Tua



bagian tabel pesan terdapat tanda kotak yang di gunakan untuk

menghapus pesan. Dimana orangtua murid dapat menandakan pesan yang

ingin di hapus kemudian mengklik tombol hapus. Pada halaman ini juga

terdapat link tulis pesan dan pesan. Link tulis pesan berguna untuk

menulis pesan baru. Sedangkan link pesan digunakan untuk melihat pesan

yang masuk. Pada halaman ini juga terdapat galeri foto Pada sebelah

182

kanan layar terdapat menu – menu orang tua. Pada bagian bawah layar


4.3.1.13 Perancangan Layar Nilai Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Nilai Tugas Tugas √ Semester √ go

MataPelajaran #1 #2 #3 #4 #5 #6 #7 #8 Rata -

Rata

Back Galery


Read More

©Copyright 2009 Gambar 4.66 Perancangan Layar Nilai Orang Tua


layar dan pada bagian tengah akan dijumpai combo box yang terdiri dari

pilihan tugas, ulangan harian, ulangan umum, selain itu juga terdapat

combo box yang terdiri dari semester 1 dan 2 apabila orang tua murid

sudah memilih pilihan yang diinginkan, mereka dapat mengklik tombol

go. Setelah itu, maka akan keluar nilai yang dipilih. Pada bagian ini juga

terdapat link back untuk kembali kelayar sebelumnya, terdapat juga galeri

183

foto. Pada sebelah kanan layar terdapat menu – menu orang tua. Pada

bagian bawah layar terdapat tulisan ©Copyright 2009

4.3.1.14 Perancangan Layar Nilai << Tugas Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Nilai Tugas Tugas √ Semester √ go

MataPelajaran #1 #2 #3 #4 #5 #6 #7 #8 Rata -

Rata

Back Galery


Read More

©Copyright 2009 Gambar 4.67 Perancangan Layar Nilai << Tugas Orang Tua




combo box yang terdiri dari semester 1 dan 2. Pada halaman ini juga akan

ditampilkan nilai tugas murid dan juga rata – rata dari nilai tugas murid

Pada bagian ini juga terdapat link back untuk kembali kelayar

sebelumnya, terdapat juga galeri foto. Pada sebelah kanan layar terdapat

184

menu – menu orang tua. Pada bagian bawah layar terdapat tulisan

©Copyright 2009

4.3.1.15 Perancangan Layar Nilai << Ulangan Harian Orang

Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Nilai Ulangan Ulangan Harian √ 1 √ go

MataPelajaran U1 R1 U2 R2

Back Galery


Read More

©Copyright 2009 Gambar 4.68 Perancangan Layar Nilai<<Ulangan Harian

Orang Tua





185

ditampilkan nilai ulangan harian murid dan juga nilai remedial murid.

Pada bagian ini juga terdapat link back untuk kembali kelayar

sebelumnya, terdapat juga galeri foto. Pada sebelah kanan layar terdapat


©Copyright 2009

4.3.1.16 Perancangan Layar Nilai << Ulangan Umum Orang

Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Nilai Ulangan Umum Ulangan Umum √ 1 √ go

MataPelajaran Nilai

Back Galery


Read More

©Copyright 2009 Gambar 4.69 Perancangan Layar Nilai<<Ulangan Umum

Orang Tua

186





ditampilkan nilai ulangan umum murid berdasarkan bidang studi. Pada

bagian ini juga terdapat link back untuk kembali kelayar sebelumnya,

terdapat juga galeri foto. Pada sebelah kanan layar terdapat menu – menu

orang tua. Pada bagian bawah layar terdapat tulisan ©Copyright 2009

4.3.1.17 Perancangan Layar Laporan Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Laporan Nilai semester Semester V

Mata Pelajaran

U1 U2 U3 U4 Rata – rata Ulangan

Rata – rata Tugas

Target Ulangan Umum

Laporan Penilaian Perilaku Back Galery


Read More

©Copyright 2009 Gambar 4.70 Perancangan Layar Laporan Orang Tua

187



pilihan semester 1 dan 2. Pada halaman ini juga akan ditampilkan seluruh

nilai ulangan yang terdiri dari nilai ulangan harian murid yang terbagus

setelah dilakukan remedial, rata – rata ulangan harian murid, rata – rata

nilai tugas murid dan nilai ulangan umum yang harus di capai oleh murid

supaya dapat memnuhi standart kelulusan berdasarkan bidang studi. Pada

bagian ini juga terdapat link laporan penilaian perilaku untuk memilih

nilai dari laporan penilaian perilaku murid dan link back untuk kembali

kelayar sebelumnya, terdapat juga galeri foto. Pada sebelah kanan layar

terdapat menu – menu orang tua. Pada bagian bawah layar terdapat


188

4.3.1.18 Perancangan Layar Laporan <<Laporan Penilaian

Perilaku Orang Tua

Logo Sekolah

Menu Utama

Home Pengumuman


Laporan Materi

Menu Anak

Artikel

Log out Laporan Nilai Perilaku (nama murid) Kelas Semester Nilai Perilaku Keterangan

Laporan Nilai Semester Back

©Copyright 2009 Gambar 4.71 Perancangan Layar Laporan<<Laporan

Penilaian Perilaku Orang Tua


layar dan pada bagian tengah akan dijumpai laporan penilaian perilaku

murid dimana pada judul layar terdapat nama murid tersebut,. Pada layar

ini juga terdapat link laporan nilai semester yang dapat menghubungkan

orangtua kepada laporan penilaian semester murid dan terdapat link back

untuk kembali kelayar sebelumnya. Pada sebelah kanan layar terdapat

189


©Copyright 2009

4.3.1.19 Perancangan Layar Materi Orang Tua

Index of/ Hyper/ Materi

Name Last Modified Size Description

Gambar 4.72 Perancangan Layar Materi Orang Tua

Pada layar ini terdapat materi yang dapat di download oleh orang tua

murid sebagai materi balajar murid. Dimana terdapat nama materi yang

akan di download, tanggal dan waktu upload materi, dan besarnya materi

yang akan di download

190

4.3.2 Perancangan Layar Murid

4.3.2.1 Perancangan Layar My Class

Logo Sekolah

Menu Murid

My Class Games

Orang Tua

Artikel

Log out My Class

Mata Pelajaran ……………. …………….. Galery


Read More

©Copyright 2009 Gambar 4.73 Perancangan Layar My Class


layar dan pada bagian tengah akan dijumpai mata pelajaran dari murid

tersebut yang berupa link untuk menghubungkan murid dengan

matapelajaran yang bersangkutan. Pada bagian ini juga terdapat galeri

foto. Pada sebelah kanan layar terdapat menu – menu murid yang terdiri

dari menu my class, games, orang tua. Pada bagian bawah layar terdapat


191

4.3.2.2 Perancangan Layar My Class << Matapelajaran

Logo Sekolah

Menu Murid

My Class Games

Orang Tua

Artikel

Log out

Mata Pelajaran ……

Bab 1 + Video Bab 2 + Video Galery


Read More

©Copyright 2009 Gambar 4.74 Perancangan Layar My Class<<Matapelajaran


layar dan pada bagian tengah akan dijumpai bab dari mata pelajaran yang

telah dipilih dan disertai dengan link untuk menghubungkan murid

dengan materi yang berupa video dari matapelajaran yang bersangkutan.

Pada sebelah kanan layar terdapat menu – menu murid yang terdiri dari

menu my class, games, orang tua. Pada bagian bawah layar terdapat


192

4.3.2.3 Perancangan Layar My Class<< Matapelajaran <<

Video

Logo Sekolah

Menu Murid

My Class Games

Orang Tua

Artikel

Log out

©Copyright 2009 Gambar 4.75 Perancangan Layar My

Class<<,Matapelajaran<<Video


layar dan pada bagian tengah akan dijumpai video dari bab mata

pelajaran yang telah dipilih Pada sebelah kanan layar terdapat menu –

menu murid yang terdiri dari menu my class, games, orang tua. Pada


193

4.3.2.4 Perancangan Layar Games

Logo Sekolah

Menu Murid

My Class Games

Orang Tua

Artikel

Log out

Games

Games .. + ……. Galery


Read More

©Copyright 2009 Gambar 4.76 Perancangan Layar Games


layar dan pada bagian tengah akan dijumpai games disertai dengan link

materi dari games tersebut untuk menghubungkan murid dengan games.

Dimana tujuan dari penyediaan games adalah untuk mendukung

pemahaman murid mengenai materi yang diajarkan serta menarik minat

murid untuk belajar. Pada sebelah kanan layar terdapat menu – menu

murid yang terdiri dari menu my class, games, orang tua. Pada bagian


194

4.3.2.5 Perancangan Layar Games << Games

Logo Sekolah

Menu Murid

My Class Games

Orang Tua

Artikel

Log out

©Copyright 2009 Gambar 4.77 Perancangan Layar Games <<Games


layar dan pada bagian tengah akan dijumpai games yang telah dipilih

Pada sebelah kanan layar terdapat menu – menu murid yang terdiri dari

menu my class, games, orang tua. Pada bagian bawah layar terdapat


195

4.3.3 Perancangan Layar Guru

4.3.3.1 Perancangan Layar Login Guru

Logo Sekolah

Menu Utama

Home Forum Artikel

Sign in User Login Username Password Forgot Password

Log In

©Copyright 2009 Gambar 4.78 Perancangan Layar Login Guru


sebelum guru dapat melakukan akses ke dalam halaman selanjutnya.



dengan ID guru dan password yang telah di berikan oleh admin, pada

bagian bawahnya terdapat tombol log in untuk masuk kehalaman

selanjutnya setelah username dan password telah terisi dengan benar.

Terdapat juga link forgot password, link ini di gunakan apabila guru lupa

akan password mereka. Link ini akan memberikan petunjuk bagi guru

bagaimana untuk mendapatkan password mereka. Pada bagian bawah


196

4.3.3.2 Perancangan Layar Home Guru

Logo Sekolah

Menu Guru

Home Pesan Profil Forum Nilai

Catatan Guru Agenda Upload Laporan

Pengumuman

Artikel

Log out LATAR BELAKANG PATMOS SCHOOL Galery


Read More

©Copyright 2009 Gambar 4.79 Perancangan Layar Home Guru


layar dan pada bagian tengah akan dijumpai halaman berisi mengenai

latar belakang sekolah PATMOS dan galeri foto anak. Pada bagian

sebelah kanan layar terdapat menu pada halaman guru yaitu menu home,

pesan,. profil, forum, nilai, catatan guru, agenda, upload, laporan,

pengumuman selain itu juga terdapat artikel. Pada bagian bawah layar


197

4.3.3.3 Perancangan Layar Pesan Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Pesan Masuk Tulis Pesan Terkirim Pengirim Pesan Keterangan Hapus

Galery


Read More

©Copyright 2009 Gambar 4.80 Perancangan Layar Pesan Guru




menghapus pesan. Dimana guru dapat menandakan pesan yang ingin di

hapus kemudian mengklik tombol hapus. Pada halaman ini juga terdapat

link tulis pesan dan terkirim. Link tulis pesan berguna untuk menulis

pesan baru. Sedangkan link terkirim digunakan untuk melihat pesan yang

telah kita kirimkan. Pada halaman ini juga terdapat galeri foto Pada

198

sebelah kanan layar terdapat menu guru. Pada bagian bawah layar


4.3.3.4 Perancangan Layar Pesan << Tulis Pesan Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Tulis Pesan Topik Kepada Pesan Back

©Copyright 2009 Gambar 4.81 Perancangan Layar Pesan<<Tulis Pesan Guru


layar dan pada bagian tengah akan dijumpai topik, kepada, dan pesan.

Guru dapat mengisi topik sebagai judul dari pesan yang akan dikirim,

pada bagian kepada terdapat combo box yang berisi nama murid yang

bimbing oleh guru tersebut di sekolah PATMOS, kemudian guru

Save

199

memilihnya. Guru murid juga dapat menuliskan pesan mereka pada

textarea yang ada setelah semua diisi, klik tombol save dan pesan tersebut

akan dikirim. Pada sebelah kanan layar terdapat menu – menu guru. Pada


4.3.3.5 Perancangan Layar Pesan << Terkirim Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Pesan Terkirim Tulis Pesan Pesan Kepada Pesan Keterangan

Galery


Read More

©Copyright 2009 Gambar 4.82 Perancangan Layar Pesan<<Terkirim Guru




200

menghapus pesan. Dimana guru dapat menandakan pesan yang ingin di

hapus kemudian mengklik tombol hapus. Pada halaman ini juga terdapat

link tulis pesan dan pesan. Link tulis pesan berguna untuk menulis pesan

baru. Sedangkan link pesan digunakan untuk melihat pesan yang masuk.

Pada halaman ini juga terdapat galeri foto Pada sebelah kanan layar

terdapat menu – menu guru. Pada bagian bawah layar terdapat tulisan

©Copyright 2009

4.3.3.6 Perancangan Layar Profil Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Profil Guru Nama ………… Tempat/Tanggal Lahir …………. Agama ………….. Alamat …………... Kode Pos …………. No Telepon ………….. Catatan …………..

©Copyright 2009 Gambar 4.83 Perancangan Layar Profil Guru

201


layar dan pada bagian tengah akan dijumpai profil guru yang terdiri dari

nama, tempat tanggal lahir, agama, alamat, kode pos, no telepon, catatan.

Pada bagian kanan layar terdapat menu guru dan artikel. Pada bagian


4.3.3.7 Perancangan Layar Forum Guru

4.84 Perancangan Layar Forum Guru

Pada halaman ini akan di jumpai tombol new topic yang di gunakan

untuk membuat topik baru. Selain itu. Juga terdapat text box yang

digunakan untuk membantu user mencari informasi yang di butuhkan.

New Topic Search this forum search

Topic Replies Views Last Topic

New Topic

Display Topic From Previous

V Sort By

V V GO

Jump To V Go

202

Apabila user sudah mengetikan kata kunci dari informasi yang ingin di

cari, user dapat mengklik search.

4.3.3.8 Perancangan Layar Forum<< New Topic Guru

Your First Forum

Topic Icon O O O

Subject

Save Previous Submit

Gambar 4.85 Perancangan Layar Forum<<New Topic Guru

Pada halaman ini akan dijumpai icon – icon yang dapat di gunakan dan

user juga dapat menulis judul dari forum yang akan di upload. User juga

dapat menulis informasi untuk di upload dalam forum pada text area

yang telah di sediakan

203

4.3.3.9 Perancangan Layar Nilai Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Daftar Nilai Tugas Nilai Tugas Ulangan Harian Ulangan Umum • MataPelajaran • Mata Pelajaran • Mata Pelajaran

Back

Galery


Read More

©Copyright 2009 Gambar 4.86 Perancangan Layar Nilai Guru


layar dan pada bagian tengah akan dijumpai link nilai tugas, ulangan

harian, ulangan umum. Dimana link tersebut dapat menghubungkan guru

dengan form nilai tugas, ulangan harian, ulangan umum. Selain itu, juga

terdapat link matapelajaran yang berguna untuk memilih nilai dari mata

pelajaran apa yang akan dilihat. Terdapat link back untuk kembali kelayar

sebelumnya dan terdapat galeri foto anak. Pada bagian kanan layar

204

terdapat menu guru dan artikel. Pada bagian bawah layar terdapat tulisan

©Copyright 2009

4.3.3.10 Perancangan Layar Nilai << Nilai Tugas Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Nilai Tugas ….. Semester V

Nama Murid #1 #2 #3 #4 #5 #6 #7

Back Galery


Read More

©Copyright 2009 Gambar 4.87 Perancangan Layar Nilai<<Nilai Tugas Guru


layar dan pada bagian tengah akan dijumpai combo box yang berisi

semester 1 dan 2. Setelah guru memilih nilai semester berapa yang akan

dipilih, guru dapat mengklik tombol go. Nilai tugas dari seluruh murid

yang di bimbing berdasarkan semester yang telah dipilih akan

ditampilkan. Pada bagian ini juga terdapat link back untuk kembali

Go

205

kelayar sebelumnya dan terdapat galeri foto anak. Pada bagian kanan

layar terdapat menu guru dan artikel. Pada bagian bawah layar terdapat


4.3.3.11 Perancangan Layar Nilai << Ulangan Harian Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Nilai Ulangan Harian ….. Semester V

Nama Murid U1 R1 U2 R2 U3 R3

Back Galery


Read More

©Copyright 2009 Gambar 4.88 Perancangan Layar Nilai<<Ulangan Harian

Guru




dipilih, guru dapat mengklik tombol go. Nilai ulangan harian dari seluruh

murid yang di bimbing berdasarkan semester yang telah dipilih akan

Go

206


kelayar sebelumnya dan terdapat galeri foto anak. Pada bagian kanan



4.3.3.12 Perancangan Layar Nilai << Ulangan Umum Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Nilai Ulangan Umum ….. Semester V

Nama Murid Nilai Ulangan umum

Back Galery


Read More

©Copyright 2009 Gambat 4.89 Perancangan Layar Nilai <<Ulangan Umum

Guru




Go

207

dipilih, guru dapat mengklik tombol go. Nilai ulangan umum dari seluruh

murid yang di bimbing berdasarkan semester yang telah dipilih akan


kelayar sebelumnyadan terdapat galeri foto anak. Pada bagian kanan



4.3.3.13 Perancangan Layar Catatan Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Catatan Guru Hari, Tanggal Bulan Tahun Nama Murid

Nama Murid

Nama Murid

ok back

©Copyright 2009 Gambar 4.90 Perancangan Layar Catatan Guru

208


layar dan pada bagian tengah akan dijumpai nama setiap murid yang

dibimbing oleh guru tersebut dan textbox yang dapat di isi oleh guru

untuk menginformasikan mengenai kegiatan murid di kelas. Apabila guru

telah menulis catatan yang akan di informasikan kepada orangtua, guru

dapat mengklik tombol ok. Pada bagian ini juga terdapat link back untuk

kembali kelayar sebelumnya. Pada bagian kanan layar terdapat menu

guru dan artikel. Pada bagian bawah layar terdapat tulisan ©Copyright

2009

209

4.3.3.14 Perancangan Layar Agenda Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Jadwal Hari, Tanggal Bulan Tahun


Jadwal Hari, Tanggal Bulan Tahun


save back

Galery


Read More

©Copyright 2009 Gambar 4.91 Perancangan Layar Agenda Guru


layar dan pada bagian tengah akan dijumpai jadwal pelajaran murid untuk

hari ini dan besok serta textbox yang dapat diisi dengan halaman dari

buku pelajaran yang di pelajari hari ini dan besok. Pada halaman ini juga

terdapat galeri foto anak. Pada sebelah kanan layar terdapat menu – menu

guru dan artikel. Pada bagian bawah layar terdapat tulisan ©Copyright

2009

210

4.3.3.15 Perancangan Layar Upload Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Upload File Browse Upload

Galery


Read More

©Copyright 2009 Gambar 4.92 Perancangan Layar Upload Guru


layar dan pada bagian tengah akan dijumpai tombol browse yang dapat di

gunakan untuk mengambil file yang akan di upload. Setelah file tersebut

di pilih, guru dapat mengklik upload dan file tersebut akan terkirim. Pada

halaman ini juga terdapat galeri foto anak. Pada sebelah kanan layar

terdapat menu – menu guru dan artikel. Pada bagian bawah layar terdapat


211

4.3.3.16 Perancangan Layar Laporan Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Form Penilaian Perilaku Murid Nama Murid Nama Murid Nama Murid

©Copyright 2009 Gambar 4.93 Perancangan Layar Laporan Guru


layar dan pada bagian tengah terdapat link nama murid yang di bimbing

oleh guru tersebut yang dapat menghubungkan guru dengan form

penilaian perilaku yang akan dimasukan kedalam database penilaian

perilaku masing – masing murid. Pada sebelah kanan layar terdapat menu

– menu guru dan artikel. Pada bagian bawah layar terdapat tulisan

©Copyright 2009

212

4.3.3.17 Perancangan Layar Laporan << Nama Murid Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Form Penilaian Perilaku Murid Nama : …………… Semester : 1 √ Kelas : 1 √ No Pertanyaan Sama sekali

tidak/sangat jarang

Kadang –

kadang

seringkali Selalu demikian

o o o o o o o o o o o o Total Skor

Keterangan:

ok

©Copyright 2009 Gambar 4.94 Perancangan Layar Laporan<<Nama Murid

Guru


layar dan pada bagian tengah terdapat nama murid dan combo box

semester serta kelas yang akan dipilih oleh guru. Pada bagian ini juga

terdapat pertanyaan – pertanyaan yang akan di pilih oleh guru. Dimana

jawaban dari pertanyaan tersebut dinyatakan dalam radio button.

Jawaban dari guru atas pertanyaan tersebut akan di jumlahkan untuk

menentukan kebutuhan khusus seorang anak.

213

4.3.3.18 Perancangan Layar Laporan<<Nama

Murid<<Keterangan Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Form Penilaian Perilaku Murid Nilai Perilaku:

Keterangan:

ok

Back

©Copyright 2009 Gambar 4.95 Perancangan Layar Laporan<<Nama

Murid<<Keterangan Guru

Guru juga dapat menginput keterangan mengenai hasil penilaian perilaku

tersebut dalam textarea yang ada. Apabila semua telah dijawab guru

mengklik ok dan seluruh jawaban akan tersimpan. Pada sebelah kanan

layar terdapat menu – menu guru dan artikel. Pada bagian bawah layar


214

4.3.3.19 Perancangan Layar Pengumuman Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Pengumuman Tanggal Berita

Back

©Copyright 2009 Gambar 4.96 Perancangan Layar Pengumuman Guru


layar dan pada bagian tengah akan dijumpai penguman yang terdiri dari

tanggal pengumuman tersebut dipublish, dan isi dari pengumuman

tersebut. Selain itu juga terdapat link back yang berguna untuk kembali

kepada halaman yang sebelumnya di akses. Pada bagian sebelah

kanannya terdapat menu – menu yang terdapat pada halaman orang tua

beserta tombol log out. Pada bagian bawah layar terdapat tulisan

©Copyright 2009

215

4.3.3.20 Perancangan Layar Artikel Guru

Logo Sekolah

Menu Guru



Pengumuman

Artikel

Log out Artikel Judul Artikel, tahun – bulan – tanggal ……………………………………………………………… selanjutnya

Tanggal V Bulan V Tahun V go

©Copyright 2009

Gambar 4.97 Perancangan Layar Artikel Guru





yang di publish, apabila guru ingin membaca artikel yang telah di publish

tersebut dengan lebih jelas dan lengkap, maka orang tua murid dapat

mengklik link selanjutnya. Guru juga dapat memilih artikel yang ingin di

216

baca nya berdasarkan tanggal, bulan dan tahun. Setelah guru memilih

tanggal, bulan dan tahun dari artikel yang ingin di bacanya, apabila guru

telah memilih tanggal, bulan dan tahunnya, mereka dapat mengklik

tombol go. Pada sebelah kanan layar terdapat menu – menu guru. Pada


4.3.4 Perancangan Layar Admin

4.3.4.1 Perancangan Layar Login Admin

Logo Sekolah

Menu Administrator

Home Forum Artikel

Sign in User Login Username Password Forgot Password

Log in

©Copyright 2009 Gambar 4.98 Perancangan Layar Login Admin


sebelum admin dapat melakukan akses ke dalam halaman selanjutnya.



dengan ID admin dan password admin, pada bagian bawahnya terdapat

tombol log in untuk masuk kehalaman selanjutnya setelah username dan

217

password telah terisi dengan benar. Pada bagian bawah layar terdapat


4.3.4.2 Perancangan Layar Home Admin

Logo Sekolah

Menu Administrator

Home Artikel

Pengumuman Nilai Murid Guru

Upload File Nilai

Log out LATAR BELAKANG PATMOS SCHOOL

Galery Photo Photo Photo Photo

Read More

©Copyright 2009 Gambar 4.99 Perancangan Layar Home Admin


layar dan pada bagian tengah akan dijumpai halaman berisi mengenai

latar belakang sekolah PATMOS dan galeri foto anak. Pada bagian

sebelah kanan layar terdapat menu pada halaman admin yaitu menu

home, artikel, pengumuman, nilai, murid, guru, upload, file nilai. Pada


218

4.3.4.3 Perancangan Layar Artikel Admin

Logo Sekolah

Menu Adinistrator

Home Artikel


Upload File Nilai

Log out Artikel Judul Artikel, tahun – bulan – tanggal Isi selanjutnya ubah hapus

Tanggal V Bulan V Tahun V go Back Buat Baru

©Copyright 2009 Gambar 4.100 Perancangan Layar Artikel Admin





yang di publish, apabila admin ingin membaca artikel yang telah di

publish tersebut dengan lebih jelas dan lengkap, maka admin dapat

mengklik link selanjutnya. Admin dapat mengubah dan menghapus

artikel yang telah di publish dengan mengklik link ubah dan hapus yang

ada. Admin juga dapat memilih artikel yang ingin di baca berdasarkan

tanggal, bulan dan tahun. Setelah admin memilih tanggal, bulan dan

219

tahun dari artikel yang ingin di bacanya, apabila admin telah memilih

tanggal, bulan dan tahunnya, mereka dapat mengklik tombol go. Admin

juga dapat mempublish artikel baru dengan mengklik link buat baru. Pada

sebelah kanan layar terdapat menu – menu admin. Selain itu juga terdapat

link back yang berguna untuk kembali kepada halaman yang sebelumnya

di akses Pada bagian bawah layar terdapat tulisan ©Copyright 2009

4.3.4.4 Perancangan Layar Artikel << Buat Baru

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Buat Artikel Baru Topik Isi Back Back

©Copyright 2009 Gambar 4.101 Perancangan Layar Artikel <<Buat Baru


layar dan pada bagian tengah akan dijumpai topik dan isi. Admin dapat

mengisi topik sebagai judul dari artikel yang akan dipublish. admin dapat

menuliskan artikel pada textarea yang ada setelah semua diisi, klik

Save

220

tombol save dan artikel tersebut akan di publish. Pada sebelah kanan

layar terdapat menu – menu guru. link back yang berguna untuk kembali

kepada halaman yang sebelumnya di akses. Pada bagian bawah layar


4.3.4.5 Perancangan Layar Artikel << Ubah

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Ubah Artikel Title Message Back Back

©Copyright 2009 Gambar 4.102 Perancangan Layar Artikel<<Ubah


layar dan pada bagian tengah akan dijumpai title dan message. Admin

dapat mengedit judul artikel yang dipublish. Admin dapat mengedit

artikel pada textarea yang ada setelah semua yang telah diisi benar, klik

tombol save dan artikel tersebut akan di publish. Pada sebelah kanan

layar terdapat menu – menu admin. Link back yang berguna untuk

Save

221

kembali kepada halaman yang sebelumnya di akses. Pada bagian bawah


4.3.4.6 Perancangan Layar Artikel << Hapus

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Artikel Artikel anda pilih telah berhasil dihapus Judul Artikel, tahun – bulan – tanggal Isi selanjutnya ubah Hapus

Tanggal V Bulan V Tahun V go Back Buat Baru

©Copyright 2009 Gambar 4.103 Perancangan Layar Artikel<<Hapus




publish. Pada bagian ini juga terdapat link selanjutntya pada setiap artikel

yang di publish, apabila admin ingin membaca artikel yang telah di

publish tersebut dengan lebih jelas dan lengkap, maka admin dapat

mengklik link selanjutnya. Admin dapat menhapus artikel yang telah di

publish dengan mengklik link hapus yang ada. Apabila artikel telah

222

berhasil di hapus, maka akan tampilan tulisan artikel yang telah anda

pilih telah berhasil di hapus. Pada sebelah kanan layar terdapat menu –

menu admin. Selain itu juga terdapat link back yang berguna untuk

kembali kepada halaman yang sebelumnya di akses Pada bagian bawah


4.3.4.7 Perancangan Layar Pengumuman Admin

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Pengumuman

Tanggal Berita Action Ubah Hapus

Back Buat Baru

©Copyright 2009 PATMOS School Gambar 4.104 Perancangan Layar Pengumuman Admin


layar dan pada bagian tengah akan dijumpai pengumuman yang telah di


publish. Admin dapat mengubah dan menghapus pengumuman yang telah

di publish dengan mengklik link ubah dan hapus yang ada. Admin juga

223

dapat memilih artikel yang ingin di baca nya berdasarkan tanggal, bulan

dan tahun. Admin juga dapat mempublish artikel baru dengan mengklik

link bust baru. Pada sebelah kanan layar terdapat menu – menu admin.

Selain itu juga terdapat link back yang berguna untuk kembali kepada

halaman yang sebelumnya di akses Pada bagian bawah layar terdapat


4.3.4.8 Perancangan Layar Pengumuman << Buat Baru

Logo Sekolah

Menu Adminstrator

Home Artikel


Upload File Nilai

Log out Membuat Pengumuman Baru Tanggal Pengumuman Back Back

©Copyright 2009 Gambar 4.105 Perancangan Layar Pengumuman <<Buat Baru


layar dan pada bagian tengah akan dijumpai tanggal dan pengumuman.

admin dapat mengisi tanggal pengumuman dipublish. admin dapat

menuliskan pengumuman pada textarea yang ada setelah semua diisi,

Save

224

klik tombol save dan artikel tersebut akan di publish. Pada sebelah kanan

layar terdapat menu – menu admin. link back yang berguna untuk

kembali kepada halaman yang sebelumnya di akses. Pada bagian bawah


4.3.4.9 Perancangan Layar Pengumuman << Ubah

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Ubah Pengumuman Tanggal Pengumuman Back Back

©Copyright 2009 Gambar 4.106 Perancangan Layar Pengumuman<<Ubah


layar dan pada bagian tengah akan dijumpai tanggal dan pengumuman.

admin dapat mengubah pengumuman pada textarea yang ada setelah

semua yang telah diisi benar, klik tombol save dan pengumuman tersebut

akan di publish. Pada sebelah kanan layar terdapat menu – menu admin.

Save

225

link back yang berguna untuk kembali kepada halaman yang sebelumnya

di akses. Pada bagian bawah layar terdapat tulisan ©Copyright 2009

4.3.4.10 Perancangan Layar Pengumuman <<Hapus

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Pengumuman Pengumuman Telah Berhasil Di Hapus

Tanggal Berita Action Edit Delete

Back Create New

©Copyright 2009 Gambar 4.107 Perancangan Layar Pengumuman<<Hapus


layar dan pada bagian tengah akan dijumpai pengumuman yang telah di


publish. Admin dapat menghapus pengumuman yang telah di publish

dengan mengklik link hapus yang ada. Apabila pengumuman telah

berhasil di hapus, maka akan tampilan tulisan pengumuman telah berhasil

di hapus. Pada sebelah kanan layar terdapat menu – menu admin. Selain

itu juga terdapat link back yang berguna untuk kembali kepada halaman

226

yang sebelumnya di akses Pada bagian bawah layar terdapat tulisan

©Copyright 2009

4.3.4.11 Perancangan Layar Nilai Admin

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Daftar Nilai Semester • Nama Murid • Nama Murid • Nama Murid • Nama Murid • Nama Murid

©Copyright 2009 Gambar 4.108 Perancangan Layar Nilai Admin


layar dan pada bagian tengah terdapat link nama murid yang dapat

menghubungkan nilai murid tersebut.Pada sebelah kanan layar terdapat

menu – menu admin. Pada bagian bawah layar terdapat tulisan

©Copyright 2009

227

4.3.4.12 Perancangan Layar Nilai << Nama Murid<< Tugas

Admin

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Daftar Nilai Semester ….. Tugas √ 1 √ go

MataPelajaran #1 #2 #3 #4 Rata

- Rata

Nilai ubah Nilai ubah Nilai ubah Nilai ubah Galery


Read More

©Copyright 2009 Gambar 4.109 Perancangan Layar Nilai <<Nama

Murid <<Tugas Admin





ditampilkan nilai tugas murid dan juga rata – rata dari nilai tugas murid.

Admin juga dapat mengubah nilai yang telah di publish dengan mengklik

link ubah Pada bagian ini juga terdapat juga galeri foto. Pada sebelah

228

kanan layar terdapat menu – menu admin. Pada bagian bawah layar


4.3.4.13 Perancangan Layar Nilai <<Nama

Murid<<Tugas<<Ubah

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Daftar Nilai Semester ….. Mata Pelajaran ok

Tugas √ 1 √ go

MataPelajaran #1 #2 #3 #4 Rata

- Rata

Nilai ubah Nilai ubah Nilai ubah Nilai ubah Galery


Read More

©Copyright 2009 Gambar 4.110 Perancangan Layar Nilai<<Nama

Murid<<Tugas<<ubah





229

ditampilkan nilai tugas murid dan juga rata – rata dari nilai tugas murid.

Setelah admin mengklik link ubah maka nilai yang akan di ubah akan

tampil pada textbox mata pelajaran dan admin dapat mengubah nilai

tersebut. Apabila nilai telah selesai di ubah, admin dapat mengklik ok dan

nilai akan langsung di save. Pada bagian ini juga terdapat juga galeri foto.

Pada sebelah kanan layar terdapat menu – menu admin. Pada bagian


4.3.4.14 Perancangan Layar Nilai <<Nama Murid<<Ulangan

Harian Admin

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Daftar Ulangan Semester … Tugas √ 1 √ go

MataPelajaran U1 R1 U2 R2 U3 R3 Nilai Nilai edit Nilai Nilai edit Nilai Nilai edit

Galery


Read More


Murid<<Ulangan Harian Admin



230



ditampilkan nilai ulangan harian murid dan remedial murid. Admin juga

dapat mengedit nilai yang telah di publish dengan mengklik link edit Pada

bagian ini juga terdapat juga galeri foto. Pada sebelah kanan layar

terdapat menu – menu admin. Pada bagian bawah layar terdapat tulisan

©Copyright 2009


Harian << Edit

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Daftar Ulangan Semester ….. Mata Pelajaran Mata Pelajaran save

Tugas √ 1 √ go

MataPelajaran U1 R1 U2 R2 U3 R3 Nilai Nilai edit Nilai Nilai edit Nilai Nilai edit

Galery


Read More


Murid<<Ulangan Harian<<Edit

231






Setelah admin mengklik link edit maka nilai ulanagn dan remedial yang

akan di edit akan tampil pada textbox mata pelajaran dan admin dapat

mengedit nilai tersebut. Apabila nilai telah selesai di edit, admin dapat

mengklik ok dan nilai akan langsung di save. Pada bagian ini juga


admin. Pada bagian bawah layar terdapat tulisan ©Copyright 2009

232


Umum Admin

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Daftar Ulangan Umum Semester …. Tugas √ 1 √ go

MataPelajaran Nilai edit

Galery


Read More


Murid<<Ulangan Umum Admin





ditampilkan nilai ulangan umum murid. Admin juga dapat mengedit nilai

yang telah di publish dengan mengklik link edit Pada bagian ini juga



233


Umum<<Edit

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Daftar Ulangan Umum Semester ….. Mata Pelajaran save

Tugas √ 1 √ go

MataPelajaran Nilai Nilai

edit Galery


Read More


Murid<<Ulangan Umum<<Edit






Setelah admin mengklik link edit maka nilai ulangan umum yang akan di

edit akan tampil pada textbox mata pelajaran dan admin dapat mengedit

234

nilai tersebut. Apabila nilai telah selesai di edit, admin dapat mengklik ok

dan nilai akan langsung di save. Pada bagian ini juga terdapat juga galeri

foto. Pada sebelah kanan layar terdapat menu – menu admin. Pada bagian


4.3.4.18 Perancangan Layar Murid

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Ubah Data Murid • Nama Murid hapus • Nama Murid hapus • Nama Murid hapus • Nama Murid hapus • Nama Murid hapus

Back Buat Baru

©Copyright 2009

Gambar 4.115 Perancangan Layar Murid


layar dan pada bagian tengah terdapat link nama murid yang dapat

menghubungkan data murid tersebut. Pada bagian ini juga terdapat link

hapus, dimana admin memliki hak untuk menghapus murid. Admin juga

dapat menginput data murid yang baru masuk ke sekolah PATMOS.


235

halaman yang sebelumnya di akses Pada sebelah kanan layar terdapat


©Copyright 2009

4.3.4.19 Perancangan Layar Murid << Nama Murid

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Ubah Data Murid Orang tua Nama Anak Kelas Anak Alamat Kode Pos Telepon Tempat Lahir Tanggal Lahir Agama Jenis Kelamin Catatan

Back

©Copyright 2009 Gambar 4.116 Perancangan Layar Murid<<,Nama

Murid


layar dan pada bagian tengah terdapat data murid yang akan di ubah.

Administrator dapat mengubah data – data murid, apabila data murid

telah selesai di ubah, klik save dan data murid tersebut akan langsung di

Save

236

update kedalam database. Selain itu juga terdapat link back yang berguna

untuk kembali kepada halaman yang sebelumnya di akses Pada sebelah

kanan layar terdapat menu – menu admin. Pada bagian bawah layar


4.3.4.20 Perancangan Layar Murid << Nama Murid<<Hapus

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Edit Data Murid Data Murid Telah Berhasil Dihapus Orang tua Nama Anak Kelas Anak Alamat Kode Pos Telepon Tempat Lahir Tanggal Lahir Agama Jenis Kelamin Catatan

Back

©Copyright 2009 Gambar 4.117 Perancangan Layar Murid<<Nama

Murid<<Hapus


layar. Admin memiliki hak akses untuk menghapus murid yang sudah

Save

237

tidak menjadi murid sekolah PATMOS, apabila admin telah mengklik

hapus maka akan tampil tulisan data murid telah berhasil di hapus. Selain

itu juga terdapat link back yang berguna untuk kembali kepada halaman

yang sebelumnya di akses Pada sebelah kanan layar terdapat menu –

menu admin. Pada bagian bawah layar terdapat tulisan ©Copyright 2009

4.3.4.21 Perancangan Layar Murid << Nama Murid<<Buat

Baru

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Menambah Data Murid Orang tua Nama Anak Kelas Anak Alamat Kode Pos Telepon Tempat Lahir Tanggal Lahir Agama Jenis Kelamin Catatan

Back

©Copyright 2009 Gambar 4.118 Perancangan Layar Murid<<Nama

Murid<<Buat Baru

Save

238


layar dan pada bagian tengah terdapat textbox yang akan diisi oleh admin

sebagai data murid. Apabila data murid telah selesai di input, klik save

dan data murid tersebut akan langsung di update kedalam database.


halaman yang sebelumnya di akses Pada sebelah kanan layar terdapat


©Copyright 2009

4.3.4.22 Perancangan Layar Guru

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Edit Data Guru • Nama Guru delete • Nama Guru delete • Nama Guru delete • Nama Guru delete • Nama Guru delete

Back Create New

©Copyright 2009 Gambar 4.119 Perancangan Layar Guru


layar dan pada bagian tengah terdapat link nama guru yang dapat

239

menghubungkan data guru tersebut. Pada bagian ini juga terdapat link

delete, dimana admin memliki hak untuk mendelete murid. Admin juga

dapat menginput data guru baru. Selain itu juga terdapat link back yang

berguna untuk kembali kepada halaman yang sebelumnya di akses Pada

sebelah kanan layar terdapat menu – menu admin. Pada bagian bawah


4.3.4.23 Perancangan Layar Guru << Nama Guru

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Ubah Data Guru Nama Alamat KodePos Telepon Tempat Lahir Tanggal Lahir Agama Jenis Kelamin Catatan

Back

©Copyright 2009 Gambar 4.120 Perancangan Layar Guru<<Nama Guru


layar dan pada bagian tengah terdapat data guru yang akan di edit.

Administrator dapat mengedit data – data guru, apabila data guru telah

Save

240

selesai di edit, klik save dan data guru tersebut akan langsung di update

kedalam database. Selain itu juga terdapat link back yang berguna untuk

kembali kepada halaman yang sebelumnya di akses Pada sebelah kanan

layar terdapat menu – menu admin. Pada bagian bawah layar terdapat


4.3.4.24 Perancangan Layar Guru << Nama Guru<<Delete

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Ubah Data Guru Data Guru Telah Berhasil Dihapus Nama Alamat KodePos Telepon Tempat Lahir Tanggal Lahir Agama Jenis Kelamin Catatan

Back

©Copyright 2009 Gambar 4.121 Perancangan Layar Guru<<Nama

Guru<<Delete


layar. Admin memiliki hak akses untuk mendelete guru yang sudah tidak

Save

241

mengajar disekolah PATMOS, apabila admin telah mengklik delete maka

akan tampil tulisan data guru telah berhasil di hapus. Selain itu juga

terdapat link back yang berguna untuk kembali kepada halaman yang

sebelumnya di akses Pada sebelah kanan layar terdapat menu – menu


4.3.4.25 Perancangan Layar Guru << Nama Guru<<Create

New

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Menambah Data Guru Nama Alamat KodePos Telepon Tempat Lahir Tanggal Lahir Agama Jenis Kelamin Catatan

Back

©Copyright 2009 Gambar 4.122 Perancangan Layar Guru<<Nama

Guru<<Create New


layar dan pada bagian tengah terdapat textbox yang akan diisi oleh admin

Save

242

sebagai data guru. Apabila data guru telah selesai di input, klik save dan

data murid tersebut akan langsung di update kedalam database. Selain itu

juga terdapat link back yang berguna untuk kembali kepada halaman

yang sebelumnya di akses Pada sebelah kanan layar terdapat menu –

menu admin. Pada bagian bawah layar terdapat tulisan ©Copyright 2009

4.3.4.26 Perancangan Layar Upload Admin

Logo Sekolah

Menu Administrator

Home Artikel


Upload File Nilai

Log out Upload File Browse Upload

Galery Photo Photo Photo Photo

Read More

©Copyright 2009 Gambar 4.123 Perancangan Layar Upload Admin


layar dan pada bagian tengah akan dijumpai tombol browse yang dapat di

gunakan untuk mengambil file yang akan di upload. Setelah file tersebut

di pilih, admin dapat mengklik upload dan file tersebut akan terkirim.

Pada halaman ini juga terdapat galeri foto anak. Pada sebelah kanan layar

243

terdapat menu – menu admin. Pada bagian bawah layar terdapat tulisan

©Copyright 2009

4.3.4.27 Perancangan Layar File Nilai Admin

Index of/ Hyper/ Materi

Name Last Modified Size Description

Gambar 4.124 Perancangan Layar File Nilai Admin

Pada layar ini terdapat file nilai yang dapat di download oleh admin.

Dimana didalamnya terdapat nama materi yang akan di download,

tanggal dan waktu upload materi, dan besarnya materi yang akan di

download. Tujuannya untuk mempermudah admin dalam menginput nilai

murid

244

4.4 Navigation Diagram

4.4.1 Navigation Diagram Orang Tua

Gambar 4.125 Navigation Diagram Orangtua

245

4.4.2 Navigation Diagram Murid

Gambar 4.126 Navigation Diagram Murid

246

4.4.3 Navigation Diagram Guru

LoginGuru

KlikPesan

KlikCreatePesan

KlikLog out

KlikProfile

KlikForum

KlikCreateNewTopic

KlikNilai

KlikTugas

KlikUlanganHarian

KlikUlanganUmum

KlikCatatan

Guru

KlikLog out

KlikAgenda

KlikLog out

KlikUpload

KlikLaporan

KlikNama Siswa

Klik OK

KlikPengumuman

KlikLog out

KlikLog out

KlikLog out

KlikArtikel

Gambar 4.127 Navigation Diagram Guru

247

4.4.4 Navigation Diagram Admin

LoginAdmin

KlikLog In

KlikArtikel

KlikCreateNew

KlikLog out

KlikPengumuman

KlikCreate New

KlikLog out

KlikNilai

KlikNama Murid

KlikUlangan Harian

PilihUlangan Umum

KlikLog out

KlikMurid

KlikCreateNew

KlikLog out

Klik Uploadi

KlikLog out

KlikFileNilai

KlikLog out

KlikGuru

KlikCreate New

KlikLog out

Gambar 4.128 Navigation Diagram Admin

248

4.5 Component Diagram dan Deployment Diagram

4.5.1 Component Diagram

<<Client Guru >>

<<Client Admin >><<Client Murid >>

<< Server >>

<<Client Orangtua >>

U:Orangtua

F:Orangtua

F:Server

M:Server

U:Guru

F:Guru

U:Murid

F:Murid

U:Admin

F:Admin

Gambar 4.129 Component Diagram

249

4.5.2 Deployment Diagram

; client Orangtua

U: Orangtua

SI:Orangtua

F: Orangtua

; Server

SI : Server

M: Server

; Client Guru

SI:Guru

F: Guru

U: Guru

; client Murid

U: Murid

SI:Murid

F: Murid

F : Server

; Client Admin

SI: Admin

F: Admin

M: Admin

Gambar 4.130 Deployment Diagram

BAB 4 ANALISIS DAN DESAIN SISTEM - thesis.binus.ac.idthesis.binus.ac.id/Asli/Bab4/2009-1-00438-SI...

Documents

Transcript of BAB 4 ANALISIS DAN DESAIN SISTEM - thesis.binus.ac.idthesis.binus.ac.id/Asli/Bab4/2009-1-00438-SI...