Perancangan Layar untuk Admin - Perancangan Layar pada S olusi

II. Gambaran Umum S istem Informasi

4. Membantu sekolah dalam pemberitahuan pengumuman dan

3.3.4 Perancangan Layar pada S olusi

3.3.4.1 Perancangan Layar untuk Admin

Gambar 3.86 Rancangan Layar Admin Home

Ketika memasuki halaman web pertama kali maka akan masuk ke halaman index, dalam halaman ini user memasukkan user name dan password. Apabila user name dan

berstatus admin maka akan masuk ke halaman admin utama. Dalam halaman ini di sebelah kiri terdapat pilihan menu utama yaitu menu halaman utama, bantuan, ubah

password dan logout. Kemudian menu kedua yaitu siswa, guru, kelas, jadwal, pelajaran,

pengumuman, forum, dan pesan pribadi. Dan bagian content terdapat informasi mengenai pengumuman, berita terkini, kegiatan, dan pengumuman terbatas dari sekolah.

No NIS Nama Kelas Proses

1 1234 Anton X1 Lihat Detail | Ubah | Hapus

2 1111 Dimas X1 Lihat Detail | Ubah | Hapus

Bila user memilih salah satu siswa maka akan muncul halaman ini. Dalam halaman ini akan ditampilkan daftar siswa yang dapat dimunculkan berdasarkan NIS yang diketikkan pada textfield diatas dan dapat ditampilkan menurut daftar kelas yang ada, atau menurut daftar siswa yang ada. Jika ingin menambahkan daftar siswa baru maka tombol ”Tambah Data Siswa” dapat dipilih. Tersedia juga link ”Pencarian Detail” jika ingin melakukan pencarian terhadap field siswa yang lebih spesifik lagi. Pada list siswa yang ditampilkan diberikan link ”lihat Detail” untuk melihat detail data siswa, ubah untuk mengubah data siswa, dan hapus untuk menghapus data siswa dari database.

Dalam halaman ini di sebelah kiri terdapat pilihan menu utama yaitu menu halaman utama, bantuan, ubah password dan logout. Kemudian menu kedua yaitu siswa, guru, kelas, jadwal, pelajaran, pengumuman, forum, dan pesan pribadi.

Bila user memilih pencarian detail pada halaman siswa maka akan muncul halaman ini. Dalam halaman ini menampilkan data siswa secara lengkap beserta textfield disisinya. Text field ini dapat diisi sebagai bahan pencarian data terhadap siswa yang dicari.

Bila user memilih tombol ”Tambah data Siswa” pada halaman siswa maka akan muncul halaman ini. Dalam halaman ini ditampilkan data lengkap siswa secara detail beserta textfield disisinya. Teks field ini diisi untuk membuat data siswa baru pada database.

Bila user memilih link ”lihat detail” pada halaman siswa maka akan muncul halaman ini. Dalam halaman ini akan menampilkan data siswa secara lengkap. Jika ada data yang ingin diubah, maka tombol ”ubah data?” dapat dipilih yang akan mengantarkan user kehalaman ubah data siswa.

Bila user memilih link ”Ubah” pada halaman siswa maka akan muncul halaman ini. Dalam halaman ini dimunculkan field data user dan textfield disisinya. Pada textfield terisi data detail siswa, Admin daat mengubah nilai pada data untuk update pada database jika tombol ubah data ditekan.

Gambar 3.92 Rancangan Layar Admin Delete Siswa

Bila user memilih link ”hapus” pada halaman siswa maka akan muncul halaman ini. Dalam halaman ini merupakan halaman konfirmasi yang menunjukkan data siswa pada database akan dihapus dengan mengklik, ”yes” untuk menghapus dan ”no” untuk membatalkan penghapusan data dan kembali ke halaman data siswa.

No NIP Nama Mengajar Proses

1 G.00.001 Fahrudin Matemat ika Lihat Detail | Ubah | Hapus

2 G.00.002 Hizriah Biologi Lihat Detail | Ubah | Hapus

3 G.00.003 Hamzah Fisika Lihat Detail | Ubah | Hapus

Gambar 3.93 Rancangan Layar Admin Guru

Bila user memilih menu ”guru” maka akan muncul halaman ini. Dalam halaman akan menampilkan daftar guru yang ada dan dapat dipilih berdasarkan NIP yang dituliskan pada textfield NIP dan juga dapat ditampilkan menurut mata pelajaran yang diajar oleh guru tersebut. Bila admin ingin menambahkan data guru maka tombol ”Tambah data Guru” dapat dipilih. Link ”Pencarian Detail” dipilih jika ingin mencari guru berdasarkan data yang lebih spesifik. Link ”Lihat Detail”dapat dipilih untuk masuk kehalaman detail data guru, untuk mengubah data guru dapat dipilih ”Ubah”, jika ingin menghapus data guru, dapat dipilih ”hapus” .

Gambar 3.94 Rancangan Layar Admin Tambah Data Guru

Bila user memilih tombol tambah data guru pada halaman guru maka akan muncul halaman ini. Dalam halaman ini menampilkan field data guru secara lengkap

beserta textfield disisinya. Textfield ini diisi untuk kemudian disimpan kedalam database sebagai data guru baru.

Gambar 3.95 Rancangan Layar Admin Lihat Detail

Bila user memilih link ”lihat detail” pada halaman guru maka akan muncul halaman ini. Dalam halaman ini akan menampilkan data guru secara lengkap. Tombol

”ubah data?” dapat dipilih jika ada data yang ingin diubah, dan akan membuka halaman ubah data.

Bila user memilih link ”ubah” pada halaman guru atau tombol ”ubah data” pada halaman ”lihat detail” maka akan muncul halaman ini. Dalam halaman ini akan menampilkan field data guru secara lengkap dan textfield disisinya yang berisi data dari database. Nilai pada textfield dapa diubah sesuai data terbaru. Jika tombol ’simpan data’ ditekan maka data akan disimpan dan berubah.

Bila user memilih link ”hapus” pada halaman guru maka akan muncul halaman ini. Dalam halaman ini akan menampilkan data guru yang akan dihapus. Dan akan dihapus dengan mengklik, ”yes” untuk menghapus dan ”no” untuk membatalkan penghapusan data dan kembali ke halaman data guru.

No Kode Kelas Nama Kelas Jurusan Tingkat Proses

1 XA IA - I Lihat Detail | update | delete | Tambah M urid

2 XB IB - I Lihat Detail | update | delete | Tambah M urid

Bila user memilih menu ”kelas” maka akan muncul halaman ini. Dalam halaman akan menampilkan data kelas yang tersedia. Setiap list kelas diikuti link-link, yaitu untuk melihat data kelas ”Lihat Detail” , untuk mengubah data kelas ”update”, untuk menghapus data kelas dari database ”delete”, dan untuk memasukkan murid ke dalam kelas tertentu ”Tambah murid”. Untuk M enambah kelas tertentu yang diiinginkan, dapat menekan tombol ”Tambah kelas dan halaman tambah kelas baru akan muncul. Dan jika ingin memasukkan murid kedalam kelas tertentu, tombol ”Tambah M urid Dalam Kelas” dapat dipilih.

Gambar 3.99 Rancangan Layar Admin Tambah kelas

Bila user memilih menu ”Tambah Kelas” pada halaman kelas maka akan muncul halaman ini. Dalam halaman data kelas dimasukkan ke textfield yang tersedia dan dipilih dari combo box yang ada. Data akan dismpan jika tombol ”Simpan Data” dipilih.

Gambar 3.100 Rancangan Layar Admin Lihat Detail Kelas

Pada halaman ini user dapat memilih menu ”Lihat Detail” pada halaman kelas kemudian akan muncul halaman seperti ini. Dihalaman ini ditampilkan data kelas dari database dan apabila data ingin diubah, user dapat memilih tombol ”Ubah Data”.

Selain itu di dalam halaman ini di sebelah kiri terdapat pilihan menu utama yaitu menu halaman utama, bantuan, ubah password dan logout. Kemudian menu kedua yaitu siswa, guru, kelas, jadwal, pelajaran, pengumuman, forum, dan pesan pribadi.

Gambar 3.101 Rancangan Layar Admin Ubah Data Kelas

Bila user memilih menu ”Ubah Data” pada halaman kelas maka akan muncul halaman ini. Dihalaman ini menampilkan data kelas yang ada yang terisi didalam

textfield. Data dalam textfield ini dapat diubah dengan data terbaru. Data yang baru akan

disimpan dalam database jika tombol ”Simpan Data” dipilih.

NIS Nama Kelas Asal Nilai Total

1234 Resha XA

1111 Dhydha XA

Gambar 3.102 Rancangan Layar Admin Pengisian Kelas

Dihalaman ini akan tampil seperti ini bila user memilih menu ”Tambah M urid” atau tombol ”Tambah M urid Dalam Kelas” dan akan menampilkan list murid yang dapat difilter berdasarkan NIS atau berdasarkan kelas tertentu. Ditampilkan juga dropdown list dari kelas yang tersedia. Check box didepan list murid dicentang jika ingin menambahkan murid ke kelas tertentu. Jika data yang diinginkan sudah didapat maka tekan tombol ”simpan data” untuk meng-update data kelas yang baru.

No Kode Pelajaran Nama Pelajaran Proses pelajaran Proses materi

1 mat 1 matemat ika Lihat Detail | Ubah | Hapus _{Lihat M ateri}

2 bio1 biologi Lihat Detail | Ubah | Hapus Lihat M ateri

Gambar 3.103 Rancangan Layar Admin Pelajaran

Bila user memilih menu pelajaran maka dihalaman ini akan menampilkan list pelajaran yang dapat difilter berdasarkan kode pelajaran atau berdasarkan tingkat pelajaran. Tiap listnya diikuti link ”Lihat detail”, ”Ubah”, ”hapus”, dan ”Lihat M ateri”

untuk mengganti dan menghapus bab materi kedalam pelajaran. Lalu terdapat juga tombol ”Tambah Pelajaran” untuk memasukan data pelajaran yang baru.

No Kode Materi Judul Materi Proses

1 1 bangun ruang Lihat Detail | Ubah | Hapus

2 2 trigonomet ri Lihat Detail | Ubah | Hapus

Bila user memilih link ”Lihat M ateri” maka akan ditampilkan list materi dari pelajaran yang ada. Pada setiap list terdapat link ”Lihat Detail”, ”ubah”, dan ”hapus”. Tombol ”Tambah M ateri” yang digunakan untuk mengubah dan menghapus data materi pelajaran.

Pada halaman ini bila user memilih tombol ”tambah Pelajaran” maka akan menampilkan field data pelajaran yang harus diisi untuk menambahkan pelajaran ke dalam database. Jika data ingin disimpan maka tekan tombol ”Simpan Data”.

Bila user memilih link ”Lihat Detail” pada halaman pelajaran maka akan menampilkan data detail pelajaran yang ada. Bila ingin mengubah data tekan tombol ”Ubah Data”.

Bila user memilih link ”Ubah data” pada halaman lihat detail maka akan menampilkan field data pelajaran yang terdapat field berisikan nilai data dari database untuk diubah dengan data yang baru.

Bila user memilih link ”hapus” pada halaman pelajaran maka akan menanyakan konfirmasi penghapusan data pelajaran yang ingin dihapus. Dalam halaman ini di sebelah kiri terdapat pilihan menu utama yaitu menu halaman utama, bantuan, ubah password dan

logout. Kemudian menu kedua yaitu siswa, guru, kelas, jadwal, pelajaran, pengumuman,

forum, dan pesan pribadi.

Gambar 3.109 Rancangan Layar Admin Konfirmasi penghapusan data materi

Bila user memilih memilih link ”hapus” pada halaman materi maka akan menanyakan konfirmasi penghapusan materi pelajaran yang ingin dihapus. Dalam

halaman ini di sebelah kiri terdapat pilihan menu utama yaitu menu halaman utama, bantuan, ubah password dan logout. Kemudian menu kedua yaitu siswa, guru, kelas, jadwal, pelajaran, pengumuman, forum, dan pesan pribadi.

Gambar 3.110 Rancangan Layar Admin tambah materi pelajaran

Bila user memilih tombol ”Tambah M ateri” maka akan muncul halaman ini. Dihalaman ini terdapat textfield untuk mengisi data materi yang ingin ditambahkan ke dalam pelajaran tertentu.

Gambar 3.111 Rancangan Layar Admin Lihat Detail Materi

Bila user memilih link ”Lihat Detail” pada halaman materi maka akan menampilkan data detail tentang materi tertentu yang diambil dari database. Jika ingin mengubah data yang ada tekan tombol ”ubah data”.

Gambar 3.112 Rancangan Layar Admin ubah data materi pelajaran

Bila user memilih tombol ”ubah data” pada halaman lihat detail materi maka akan menampilkan data detail materi dalam textfield yang nilainya dapat diubah. Bila data sudah diubah maka tekan tombol ”Simpan Data” untuk mengupdate data yang terdapat di database.

Tanggal Judul Kategori

01/ 01/2008 Pert emuan Pert ama di t ahun 2008 Pengumuman hapus pengumuman

04/ 12/2008 Pent as Seni menyambut tahun baru dan nat a Event hapus pengumuman

Gambar 3.113 Rancangan Layar Admin Pengumuman

Bila user memilih menu ”pengumuman” maka akan menampilkan daftar pengumuman yang telah dibuat. Setiap list pengumuman terdapat link ”Hapus pengumuman” untuk menghapus data pengumuman dari database. Pada bagian kiri list

pengumuman terdapat cek box yang digunakan untuk memberi tanda pada pengumuman yang akan dihapus jika ingin melakukan penghapusan lebih dari satu pengumuman.

Bila user memilih tombol ”Tambah Pengumuman” maka akan manampilkan textfield untuk mengisi judul pengumuman, tanggal terbit pengumuman, dan penggolongan kategori pengumuman.

Pada halaman ini bila user memilih link ”Judul Pengumuman” maka akan menampilkan data detail tentang pengumuman tertentu yang diambil dari database. Dalam halaman ini di sebelah kiri terdapat pilihan menu utama yaitu menu halaman utama, bantuan, ubah password dan logout. Kemudian menu kedua yaitu siswa, guru, kelas, jadwal, pelajaran, pengumuman, forum, dan pesan pribadi.

No Kode Kelas Nama Kelas Jurusan Tingkat Jadwal

1 XA X1 - I Lihat Detail | Ubah jadwal | hapus

2 XB X2 - I Lihat Detail | Tambah jadwal | hapus

Bila user memilih menu ”jadwal” maka akan menampilkan daftar kelas yang tiap listnya terdapat link ”Lihat Detail”, ”Ubah Jadwal” jika data jadwal sudah ada, ”Buat Jadwal” jika data jadwal belum tersedia bagi kelas tersebut dan ”hapus”.

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

1 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

2 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

3 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

4 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

5 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

6 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

7 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

8 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

9 guru T guru T guru T guru T guru T

Jumat Kamis

Selasa

Senin Rabu

Bila user memilih link ”Buat jadwal” pada halaman jadwal maka akan menampilkan tabel dengan shift dan hari yang masing-masing setiap cellnya terdapat drop down list guru dan pelajaran yang dapat diubah datanya. Bila sudah selesai membuat jadwal maka tekan tombol ”Simpan Data” untuk menyimpan pada database.

Dalam halaman ini di sebelah kiri terdapat pilihan menu utama yaitu menu halaman utama, bantuan, ubah password dan logout. Kemudian menu kedua yaitu siswa, guru, kelas, jadwal, pelajaran, pengumuman, forum, dan pesan pribadi.

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

1 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

2 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

3 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

4 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

5 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

6 guru T guru T guru T guru T guru T

shift pelajaran T pelajaran T pelajaran T pelajaran T pelajaran T

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 98-145)