PERANCANGAN SISTEM
4.4 Perancangan User Interface
Tampilan utama situs ini dirancang dengan bantuan software dreamweaver 8. Perancangan tampilan utama pada situs ini dibagi menjadi dua bagian yaitu header dan isi halaman. Header adalah merupakan dari halaman yang terletak pada bagian
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
atas yang berisikan logo, sedangkan bagian isi adalah bagian terpenting karena merupakan tempat menampilkan informasi yang akan disampaikan.
4.4.1 Perancangan Halaman Utama Website
NNNN
Gambar 4.2 Perancangan Halaman Utama Website
a. Penjelasan Rancangan Halaman Utama Website
Tabel 4.1 Penjelasan Peancangan Halaman Utama Website
Item Keterangan
Logo Bagian yang berisi bagian gambar dan logo tutwuri
handayani
Menu Link Button yang apabila di klik akan mengelink ke website yang Header Administrator Logo Guestbook News
Visi dan Misi Profil HALAMAN UTAMA Sumber Inspirasi Agenda Kegiatan Polling Pengunjung Home Guestbook News Visi dan Misi
Profil
Login Gambar
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
dituju
Home Button yang apabila di klik akan mengelink ke halaman home pada web
Guestbook Button yang apabila di klik akan mengelink ke halaman guestbook
Tabel 4.1 Penjelasan Perancangan Halaman Utama Website (Sambungan)
News Button yang apabila di klik akan mengelink ke halaman berita
Visi dan Misi Button yang apabila di klik akan mengelink ke halaman visi misi
Profil Text box yang berisi informasi mengenai profil SMA
Negeri 5 Medan
Gambar Bagian gambar sekolah, laboraturium komputer dan
perpustakaan.
Pengunjung Text yang bertuliskan jumlah pengunjung dan pengunjung ke berapa.
Halaman Utama Text yang menampilkan menu- menu utama yang berada di tengah- tengah web ini
Login Bagian untuk masuk sebagai admin, guru, dan siswa.
Sumber inspirasi Text yang menampilkan inspirasi- inspirasi mengenai sumber acuan kehidupan
Agenda kegiatan Berisi agenda kegiatan yang akan diadakan oleh SMA Negeri 5 Medan.
Polling Berisi polling yang memuat seberapa besar web ini. Footer Teks yang berisi copyrigth pembuat web
b. Algoritma Umum Halaman Utama Website
Tabel 4.2 Algoritma Umum Halaman Utama Website
Proses Data in Data out Logika Proses
Guestbook Data guestbook Informasi Data guestbook If (login=halaman utama)and (pilihan=guestbook) then Tampilan halaman guestbook
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
News Data news Informasi data news If (login=halaman
utama) and (pilihan=news) then Tampilan halaman news
Tabel 4.2 Algoritma Umum Halaman Utama Website (Sambungan)
Visi dan Misi Data Visi dan Misi Informasi Visi dan Misi If (login=halaman utama) and (pilihan=visi dan misi) then Tampilan halaman visi dan misi
Profil Data profil Informasi profil If (login=halaman
utama)
and(pilihan=profil) then
Tampilan halaman profil
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
Gambar 4. 3 Perancangan Halaman Utama Admin
a. Penjelasan Peancangan Halaman Utama Admin
Tabel 4.3 Penjelasan Perancangan Halaman Utama Admin
Item Keterangan
Header Bagian yang berisi bagian nama dan logo sma negeri 5
medan
Lihat tabel Button yang apabila di klik akan mengelink ke halaman lihat tabel, terdapat beberapa menu di lihat tabel ini
Tambah data Button yang apabila di klik akan mengelink ke halaman tambah data, didalamnya terdapat beberapa menu untuk tambah data
Menu utama Button yang apabila di klik akan mengelink ke halaman home admin
Tulisan berjalan Teks yang berisi tulisan berjalan.
Logout Button yang apabila di klik akan keluar dari halaman
Admin dan akan kembali kemenu utama
Tulisan berjalan M
mmkmkm
MM HEADER MENU UTAMA ADMINISTRATORCreated By Ade Yulia Sari Menu Utama >>
Lihat Tabel >> >> Tambah Data
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
b. Algoritma Umum Halaman Utama Admin
Tabel 4.4 Algoritma Halaman Utama Admin
Proses Data in Data out Logika Proses
Lihat table - Hak akses admin - Lihat tabel
-Data lihat table If (login=admin) and (pilihan= lihat tabel) then
Tampilan halaman Lihat tabel
Tambah data -Hak akses admin - Tambah Data -Informasi Pengolahan tambah data If (login=admin) and(pilihan=tambah data) then Tampilan halaman tambah data
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
Gambar 4.4 Perancangan Halaman Utama Siswa
a. Penjelasan Perancangan Halaman Utama Siswa
Tabel 4.5 Penjelasan Perancangan Halaman Utama Siswa
Item Keterangan
Header Bagian yang berisi bagian nama dan logo sma negeri 5 medan
Logout Button yang apabila di klik akan keluar dari halaman siswa dan
akan kembali ke menu utama
Home Button yang apabila di klik akan mengelink ke halaman utama
siswa
Absensi Button yang apabila di klik akan mengelink ke halaman absensi
siswa
Nilai Button yang apabila di klik akan mengelink ke halama nilai siswa
Jadwal Button yang apabila di klik akan mengelink ke halama jadwal
mata pelajaran siswa
Profil Button yang apabila di klik akan mengelink ke halama profil
siswa
b. Algoritma Umum Halaman Utama Siswa
Tulisan berjalan M
mmkmkm
MM P HEADER MENU UTAMA SISWACreated By Ade Yulia Sari Menu LOGOUT Home Absensi Jadwal Menu Nilai Profil
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
Tabel 4.6 Algoritma Umum Halaman Utama Siswa
Proses Data in Data out Logika Proses
Absensi -Hak akses admin - lihat absensi - informasi Pengolahan data absensi If (login=guru) and (pilihan= lihat tabel) then Tampilan halaman Lihat absensi
Nilai -Hak akses admin
- lihat nilai
-informasi Pengolahan data nilai
If (login= guru) and (pilihan=tambah data) then
Tampilan halaman lihat nilai
Jadwal -Hak akses admin - lihat jadwal
-informasi Pengolahan data jadwal pelajaran
If (login= guru) and (pilihan=tambah data) then
Tampilan halaman lihat jadwal pelajaran
Profil -Hak akses admin - lihat profil
-informasi Pengolahan data profil
If (login= guru) and (pilihan=tambah data) then
Tampilan halaman lihat profil
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
Tabel 4.6 Algoritma Umum halaman guru
Gambar 4.5 Perancangan Halaman Utama Guru
a. Penjelasan Perancangan Halaman Utama Guru
Tabel 4.7 Penjelasan Perancangan Halaman Utama Guru
Item Keterangan
Header Bagian yang berisi bagian nama dan logo sma negeri 5 medan
Logout Button yang apabila di klik akan keluar dari halaman guru dan
akan kembali ke menu utama
Home Button yang apabila di klik akan mengelink ke halaman utama
guru
Absensi Button yang apabila di klik akan mengelink ke halama absensi
guru
Nilai Button yang apabila di klik akan mengelink ke halama nilai guru
Jadwal Button yang apabila di klik akan mengelink ke halaman jadwal
mata pelajaran siswa
Profil Button yang apabila di klik akan mengelink ke halaman profil
siswa
b. Algoritma Umum Halaman Utama Guru
Tulisan berjalan
Created By Ade Yulia Sari
Header Menu LOGOUT Menu Home Absensi Nilai Jadwal Profil HALAMAN UTAMA GURU
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
Tabel 4.8 Algoritma Umum Halaman Utama Guru
Proses Data in Data out Logika Proses
Absensi -Hak akses admin - lihat absensi - informasi Pengolahan data absensi If (login=guru) and (pilihan= lihat tabel) then Tampilan halaman Lihat absensi
Nilai -Hak akses admin
- lihat nilai
-informasi Pengolahan data nilai
If (login= guru) and (pilihan=tambah data) then
Tampilan halaman lihat nilai
Jadwal -Hak akses admin - lihat jadwal
-informasi Pengolahan data jadwal pelajaran
If (login= guru) and (pilihan=tambah data) then
Tampilan halaman lihat jadwal pelajaran Profil -Hak akses admin
- lihat profil
-informasi Pengolahan data profil
If (login= guru) and (pilihan=tambah data) then
Tampilan halaman lihat profil
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
Nama Modul Deskripsi
Login Administrator Sistem melakukan validasi atas user yang masuk ke dalam sistem dengan mencocokkan id dan password dari inputan dengan id dan password serta hak akses pada database
Algoritma Mulai
Masukkan id dan password Identifikasi id dan password If id dan password valid then Masuk ke halaman administrator Else
Muncul pesan “Login Gagal,username dan password tidak benar”
Kembali ke halaman login Endif
Selesai
Tabel 4.10 Algoritma Login Guru
Nama Modul Deskripsi
Login Guru Sistem melakukan validasi atas user yang masuk ke dalam sistem dengan mencocokkan id dan password dari inputan dengan id dan password serta hak akses pada database
Algoritma Mulai
Masukkan id dan password Identifikasi id dan password If id dan password valid then Masuk ke halaman guru Else
Muncul pesan “Login Gagal,username dan password tidak benar”
Kembali ke halaman login Endif
Selesai
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
Nama Modul Deskripsi
Login Siswa Sistem melakukan validasi atas user yang masuk ke dalam sistem dengan mencocokkan id dan password dari inputan dengan id dan password serta hak akses pada database
Algoritma Mulai
Masukkan id dan password Identifikasi id dan password If id dan password valid then Masuk ke halaman siswa Else
Muncul pesan “Login Gagal,username dan password tidak benar”
Kembali ke halaman login Endif
Selesai
Tabel 4.12 Algoritma Pengolahan Jadwal
Nama Modul Deskripsi
Pengolahan Data User Dalam proses ini Administrator dapat melakukan penambahan, pengubahan, dan penghapusan data mengenai user.
Algoritma Mulai
Masukkan id dan password Identifikasi id dan password If id dan password valid then
Masuk ke halaman Administrator Pilih menu Tambah data
Klik link jadwal
Masukkan id kelas, nama mata
pelajaran,nama guru,hari, jam,id semester If input valid then
Muncul pesan “input data berhasil”
Kembali ke halaman Daftar User
endif Else
Kembali ke halaman admin Endif
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
Nama Modul Deskripsi
Pengolahan Absensi Siswa Dalam proses ini admin dapat melakukan penambahan, pengubahan, dan penghapusan data mengenai absensi siswa.
Algoritma Mulai
Masukkan id dan password Identifikasi id dan password If id dan password valid then
Masuk ke halaman Absensi siswa Pilih menu Tambah data
Klik link data absensi siswa
Masukkan nis,tahun, hari, id kelas, semester, id matpel, keterangan.
If input valid then
Muncul pesan “input data berhasil”
Kembali ke halaman Daftar Absensi siswa
endif Else
Kembali ke halaman admin Endif
Selesai
Tabel 4.14 Algoritma Pengolahan Nilai Siswa
Nama Modul Deskripsi
Pengolahan Nilai siswa Dalam proses ini admin dapat melakukan penambahan, pengubahan, dan penghapusan data mengenai nilai siswa.
Algoritma Mulai
Masukkan id dan password Identifikasi id dan password If id dan password valid then
Masuk ke halaman Administrator Pilih menu Daftar Tambah data Klik link data nilai
Masukkan nis, id matpel, id semester, tahun, uas, uts, uh.
If input valid then
Muncul pesan “input data
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.
berhasil”
Kembali ke halaman Daftar nilai siswa
endif Else
Kembali ke halaman admin Endif
Selesai
Tabel 4.15 Algoritma Pengolahan Absensi Guru
Nama Modul Deskripsi
Pengolahan Absensi Guru Dalam proses ini admin dapat melakukan penambahan, pengubahan, dan penghapusan data mengenai absensi guru
Algoritma Mulai
Masukkan id dan password Identifikasi id dan password If id dan password valid then
Masuk ke halaman Absensi siswa Pilih menu Tambah data
Klik link data absensi guru
Masukkan nis,tahun, hari, id kelas, semester, id matpel, keterangan.
If input valid then
Muncul pesan “input data berhasil”
Kembali ke halaman Daftar Absensi guru
endif Else
Kembali ke halaman admin Endif
Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.