Perancangan Desain User interface

Home Admin Guru Siswa Orang Tua Fasilitas Footer Gambar Sekolah Berita dan Pengumuman Profil Sekolah Tanggal Forum

3.2.2 Perancangan Desain User interface

Desain user interface merupakan desain untuk beberapa halaman dalam sistem yang akan dibangun dan akan di tampilkan untuk pengguna. Pengguna akan mengakses sistem untuk mengetahui berbagai informasi yang ada di dalamnya. User Interface Profil Sekolah Gambar 3.16 User Interface Profil Sekolah Tampilan di atas merupakan interface profil sekolah yang merupakan tampilan awal dari sistem. Data yang di tampilkan mengenai profil sekolah, visi dan misi, berita dan pengumuman, tanggal, isi forum serta gambar dari SMP Santo Aloysius Sleman. Home Admin Guru Siswa Orang Tua Fasilitas Footer Detail Berita dan Pengumuman Berita dan Pengumuman Tanggal Forum User Interface Berita dan Pengumuman Gambar 3.17 User Interface Berita dan Pengumuman Tampilan di atas merupakan interface halaman berita dan pengumuman. Pengguna dapat melihat berita dan pengumuman terbaru di SMP Santo Aloysius Sleman. Berbagai berita dan pengumuman sekolah disajikan di halaman ini. Home Admin Guru Siswa Orang Tua Fasilitas Footer Berita dan Pengumuman Tanggal Forum Nama Email Isi Pesan Isi User Interface Forum Gambar 3.18 User Interface Forum Tampilan di atas merupakan interface forum yang menampung kritik dan saran untuk sekolah. Pengguna dapat melihat dan mengisi forum pada halaman web SMP Santo Aloysius Sleman. Pengguna harus mengisikan nama dan komentar pada kolom yang telah disediakan untuk mengisi forum. Setelah mengklik tombol Isi maka nama dan komentar pengguna akan ditampilkan pada halaman tersebut. Home Admin Guru Siswa Orang Tua Fasilitas Footer Berita dan Pengumuman Tanggal Forum Fasilitas Home Admin Guru Siswa Orang Tua Fasilitas Footer Keterangan Tanggal Login User Interface Fasilitas Gambar 3.19 User Interface Fasilitas Tampilan di atas merupakan interface fasilitas yang menampilkan fasilitas SMP Santo Aloysius Sleman. Pengguna dapat melihat semua fasilitas yang dimiliki SMP Santo Aloysius Sleman di halaman ini. User Interface Login Admin Gambar 3.20 User Interface Login Admin Footer Keterangan Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Tampilan di atas merupakan interface bagi admin yang mengelola data SMP Santo Aloysius Sleman. Untuk dapat mengelola data maka admin harus melakukan login terlebih dahulu, jika username dan password benar, maka admin dapat mengelola data, jika username dan password salah maka akan kembali ke halaman ini. User interface Halaman Admin Gambar 3.21 User Interface Halaman Admin Tampilan di atas merupakan interface bagi admin yang berhasil login ke dalam sistem untuk mengelola data sistem informasi SMP Santo Aloysius Sleman. Pada samping kiri terdapat beberapa menu pilihan untuk admin seperti data guru, data siswa, data pelajaran, berita pengumuman, data fasilitas, hapus forum dan logout. Footer Data Guru Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert Guru Update Guru Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert Data Guru Kode Guru Password NUPTK Nama Guru Tempat lahir Tanggal lahir Jenis Kelamin Agama Tugas Ajar Foto Alamat Laki - laki Perempuan Browse Jabatan Simpan User interface Data Guru Gambar 3.22 User Interface Data Guru Tampilan di atas merupakan interface bagi admin yang akan mengelola data guru, pada halaman ini ditampilkan data guru yang mengajar di SMP Santo Aloysius Sleman. Dalam menu data guru terdapat sub menu insert data guru dan update data guru. User interface Insert Data Guru Gambar 3.23 User Interface Insert Data Guru Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Update Data Guru Kode Guru Nama Guru Jenis Kelamin Jabatan Tugas Ajar Edit Hapus Edit Hapus Edit Hapus Edit Hapus Tampilan di atas merupakan interface bagi admin yang akan memasukkan data guru SMP Santo Aloysius Sleman. Pada halaman ini admin dipersilahkan untuk mengisi form insert data guru. Setelah pengisian selesai, admin akan mengklik tombol Simpan, setelah tombol Simpan diklik maka data guru yang dimasukkan dalam form insert data guru tersimpan ke dalam database. User interface Update Data Guru Gambar 3.24 User Interface Update Data Guru Tampilan di atas merupakan interface bagi admin yang akan melakukan update data guru. Ada tiga menu dalam update data guru yaitu edit, hapus dan detail dari data guru. Menu edit data guru berfungsi untuk mengubah keterangan data guru, hapus untuk menghapus data guru dan detail untuk melihat keterangan guru secara detail. Footer Data Siswa Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert Siswa Update Siswa Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert Data Siswa No Induk Password Nama Siswa Kelas Tempat lahir Tanggal lahir Jenis Kelamin Agama Alamat Laki - laki Perempuan Nama Orang Tua Simpan 1 User interface Data Siswa Gambar 3.25 User Interface Data Siswa Tampilan di atas merupakan interface bagi admin yang akan mengelola data siswa, pada halaman ini menampilkan data siswa yang bersekolah di SMP Santo Aloysius Sleman. Dalam menu data siswa terdapat sub menu insert data siswa dan update data siswa. User interface Insert Data Siswa Gambar 3.26 User Interface Insert Data Siswa Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Update Data Siswa No Induk Nama Siswa Jenis Kelamin kelas Agama Edit Hapus Edit Hapus Edit Hapus Edit Hapus Tambah Pelajaran Tambah Pelajaran Tambah Pelajaran Tambah Pelajaran Tampilan di atas merupakan interface bagi admin yang akan memasukkan data siswa SMP Santo Aloysius Sleman. Pada halaman ini admin dipersilahkan untuk mengisi form insert data siswa. Setelah pengisian selesai, admin akan mengklik tombol Simpan, setelah tombol Simpan diklik maka data siswa yang dimasukkan dalam form insert data siswa tersimpan ke dalam database. User interface Update Data Siswa Gambar 3.27 User Interface Update Data Siswa Tampilan di atas merupakan interface bagi admin yang akan melakukan update data siswa. Ada empat menu dalam update data siswa yaitu edit data siswa, hapus data siswa detail data siswa dan ambil pelajaran. Menu edit data siswa berfungsi untuk mengubah keterangan data siswa, hapus untuk menghapus data siswa detail untuk melihat keterangan siswa secara detaildan ambil pelajaran untuk menambahkan pelajaran yang ditempuh siswa. Tambah Pelajaran Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Ambil Pelajaran No Induk Nama Siswa Jenis Kelamin kelas Kode Pelajaran Nama Pelajaran Kode 1 Kode 2 Kode 3 Pelajaran 1 Pelajaran 2 Pelajaran 3 Pelajaran 4 Pelajaran 5 Pelajaran 6 Pelajaran 7 Pelajaran 8 Pelajaran 9 Tambah Pelajaran User interface Tambah Pelajaran Siswa Gambar 3.28 User Interface Tambah Pelajaran Siswa Tampilan di atas merupakan interface bagi admin yang akan menambahkan pelajaran untuk siswa SMP Santo Aloysius Sleman. Pada saat admin akan menambahkan data pelajaran siswa, maka halaman web akan menampilkan data siswa dan juga mata pelajaran yang akan diambil. Kemudian admin memilih mata pelajaran siswa sesuai dengan kelasnya. Saat admin mengklik tombol Tambah Pelajaran, maka pelajaran tertentu telah ditambahkan ke database berdasarkan nama dan kelas siswa. Footer Data Pelajaran Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert Pelajaran Update Pelajaran Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert Data Pelajaran Kode Pelajaran Pelajaran Simpan User interface Data Pelajaran Gambar 3.29 User Interface Data Pelajaran Tampilan di atas merupakan interface bagi admin yang akan mengelola data pelajaran, pada halaman ini ditampilkan data pelajaran yang ditempuh oleh siswa berdasarkan kelas tertentu. Dalam menu data pelajaran terdapat sub menu insert data pelajaran dan update data pelajaran User interface Insert Data Pelajaran Gambar 3.30 User Interface Insert Data Pelajaran Footer Data Guru Data Siswa Data Pelajaran Data Fasilitas Hapus Forum Logout Update Data Pelajaran Kode Pelajaran Nama Pelajaran Edit Hapus Edit Hapus Edit Hapus Edit Hapus Berita Tampilan di atas merupakan interface bagi admin yang akan memasukkan data pelajaran di SMP Santo Aloysius Sleman. Pada halaman ini admin dipersilahkan untuk mengisi form insert data pelajaran jika ada tambahan pelajaran baru. Setelah pengisian selesai, admin akan mengklik tombol Simpan, setelah tombol Simpan diklik maka data pelajaran yang dimasukkan dalam form insert data pelajaran tersimpan ke dalam database. User interface Update Data Pelajaran Gambar 3.31 User Interface Update Data Pelajaran Tampilan di atas merupakan interface bagi admin yang akan melakukan update data pelajaran jika diperlukan. Ada dua menu dalam update data pelajaran yaitu edit dan hapus data pelajaran. Menu edit data pelajaran berfungsi untuk mengubah keterangan data pelajaran, hapus untuk menghapus data pelajaran. Footer Berita Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert Berita Update Berita Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert Data Berita Kode Berita Tanggal Berita Simpan Nama Berita Isi Berita User interface Berita Gambar 3.32 User Interface Berita Tampilan di atas merupakan interface bagi admin yang akan mengelola berita, dalam halaman ini ditampilkan berita sekolah bagi guru maupun siswa di SMP Santo Aloysius Sleman. Dalam menu berita terdapat sub menu insert dan update berita. User interface Insert Data Berita Gambar 3.33 User Interface Insert Berita dan Pengumuman Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Update Berita Kode Berita Tanggal Berita Isi Berita Nama Berita Edit Hapus Edit Hapus Edit Hapus Edit Hapus Tampilan di atas merupakan interface bagi admin yang akan memasukkan data ke berita dan pengumuman di SMP Santo Aloysius Sleman. Pada halaman ini admin dipersilahkan untuk mengisi form insert berita dan pengumuman jika ada pengumuman baru. Setelah pengisian selesai, admin akan mengklik tombol Simpan, setelah tombol Simpan diklik maka data berita dan pengumuman yang dimasukkan dalam form insert berita dan pengumuman tersimpan ke dalam database. User interface Update Data Berita Gambar 3.34 User Interface Update Berita dan Pengumuman Tampilan di atas merupakan interface bagi admin yang akan melakukan update berita jika diperlukan. Ada dua menu dalam update data berita yaitu edit dan hapus berita. Menu edit data berita berfungsi untuk mengubah keterangan data berita, hapus untuk menghapus data berita. Footer Data Fasilitas Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Insert fasilitas Update fasilitas Footer Data Guru Data Siswa Data Pelajaran Data Fasilitas Hapus Forum Logout Insert Data Fasilitas Kode Fasilitas Nama Fasilitas Simpan Keterangan Foto Browse Berita User interface Fasilitas Gambar 3.35 User Interface Fasilitas Tampilan di atas merupakan interface bagi admin yang akan mengelola data fasilitas sekolah, dalam halaman ini ditampilkan data fasilitas sekolah di SMP Santo Aloysius Sleman. Dalam menu data fasilitas terdapat sub menu insert dan update data fasilitas. User interface Insert Fasilitas Gambar 3.36 User Interface Insert Fasilitas Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Update Data Fasilitas Foto Nama Fasilitas Edit Hapus Edit Hapus Keterangan Tampilan di atas merupakan interface bagi admin yang akan memasukkan data fasilitas milik SMP Santo Aloysius Sleman. Pada halaman ini admin dipersilahkan untuk mengisi form insert data fasilitas jika ada penambahan fasilitas sekolah yang baru. Setelah pengisian selesai, admin akan mengklik tombol Simpan, setelah tombol Simpan diklik maka data fasilitas yang dimasukkan dalam form insert data fasilitas tersimpan ke dalam database. User interface Update Fasilitas Gambar 3.37 User Interface Update Fasilitas Tampilan di atas merupakan interface bagi admin yang akan melakukan update data fasilitas jika ada pembaharuan tentang data fasilitas yang lama. Ada dua menu dalam update data fasilitas yaitu edit dan hapus data fasilitas. Menu edit data fasilitas berfungsi untuk mengubah keterangan data fasilitas, hapus untuk menghapus data fasilitas. Footer Data Guru Data Siswa Data Pelajaran Berita Data Fasilitas Hapus Forum Logout Hapus Forum No Nama Pesan Email Hapus Hapus Hapus Hapus Home Admin Guru Siswa Orang Tua Fasilitas Footer Daftar Guru Tanggal Login User interface Hapus Forum Gambar 3.38 User Interface Hapus Forum Tampilan di atas merupakan interface bagi admin yang akan menghapus data forum. Pada saat admin akan menghapus data forum, admin terlebih dulu memilih data yang akan dihapus, setelah data terpilih dan admin mengklik tombol Hapus, maka data forum terhapus dari database. User Interface Login Guru Gambar 3.39 User Interface Login Guru Footer Nilai Siswa Logout Keterangan Tampilan di atas merupakan interface bagi guru yang akan memasukkan data nilai siswa SMP Santo Aloysius Sleman. Untuk dapat memasukkan data nilai siswa, guru harus melakukan login terlebih dahulu, jika username dan password benar, maka guru dapat mengelola data nilai siswa, jika username dan password salah maka akan kembali ke halaman ini. User interface Halaman Guru Gambar 3.40 User Interface Halaman Guru Tampilan di atas merupakan interface bagi guru yang berhasil login ke dalam sistem untuk mengelola data nilai siswa SMP Santo Aloysius Sleman. Pada samping kiri guru akan memilih menu nilai siswa untuk memasukkan nilai siswa. Footer Nilai Siswa Logout Halaman Guru Mata Pelajaran : Submit Pelajaran 1 Pelajaran 2 Pelajaran 3 Pelajaran 4 Pelajaran 5 Pelajaran 6 Pelajaran 7 Pelajaran 8 Footer Nilai Siswa Logout Halaman Guru Update Nilai Siswa No No Induk Nama Siswa Kelas UL1UL2UL3UL4UL5TGS1TGS2 UTS2UAS UTS1 Update User interface Pilih Pelajaran Gambar 3.41 User Interface Pilih Pelajaran Tampilan di atas merupakan interface bagi guru yang akan memilih mata pelajaran sesuai dengan pelajaran yang diampu untuk memasukkan nilai siswa. User interface Update Nilai Siswa Gambar 3.42 User Interface Update Nilai Siswa Home Admin Guru Siswa Orang Tua Fasilitas Footer Daftar Siswa Tanggal Login Tampilan di atas merupakan interface bagi guru yang akan mengupdate nilai siswa berdasarkan mata pelajaran yang diampu. Ada 10 nilai yang akan guru isikan ke nilai siswa, yaitu : UL1, UL2, UL3, UL4, UL5, TGS1, TGS2, UTS1, UTS2, UAS. User interface Login Siswa Gambar 3.43 User Interface Login Siswa Tampilan di atas merupakan interface bagi siswa yang akan login untuk dapat melihat nilai siswa dan mengganti password. Pertama siswa harus melakukan login terlebih dahulu, jika username dan password benar, maka siswa dapat masuk kehalaman siswa, jika username dan password salah maka akan kembali ke halaman ini. Footer Nilai Siswa Logout Keterangan Siswa Lihat Nilai Ubah Password Footer Data Guru Nilai Siswa No Induk Nama Siswa Jenis Kelamin kelas Nama Pelajaran Pelajaran 1 Pelajaran 2 Pelajaran 3 Update Logout Pelajaran 4 UL1UL2UL3UL4UL5TGS1TGS2 UTS2UAS UTS1 Rata Rata User Interface Halaman Siswa Gambar 3.44 User Interface Halaman Siswa Tampilan di atas merupakan interface bagi siswa yang berhasil login ke dalam sistem. Pada samping kiri siswa akan memilih menu lihat nilai dan ubah password. User interface Lihat Nilai Siswa Gambar 3.45 User Interface Lihat Nilai Siswa Footer Data Siswa Logout Edit Password Siswa No Induk Password Simpan Tampilan di atas merupakan interface bagi siswa tertentu yang ingin melihat nilai ulangan, nilai tugas, maupun nilai ujian. Hasil dari semua nilai dijumlah kemudian dibagi dan akan mendapatkan nilai rata – rata. User interface Edit Password Siswa Gambar 3.46 User Interface Edit Password Siswa Tampilan di atas merupakan interface bagi siswa yang melakukan edit password siswa. Pada saat siswa akan mengubah password siswa harus login terlebih dahulu, setelah login siswa baru dapat mengubah password. Saat siswa selesai mengisi form edit password siswa, siswa akan mengklik Simpan, setelah tombol Simpan dikloik, maka password siswa yang ada dalam database telah diubah. 87

BAB IV IMPLEMENTASI SISTEM

Setelah perancangan sistem dilakukan, langkah selanjutnya adalah mencoba untuk mengimplementasikan rancangan tersebut ke dalam bahasa yang dapat dimengerti oleh mesin. Sistem ini akan dibuat menggunakan spesifikasi software dan harware sebagai berikut, Software : 1. Sistem operasi Windows 2. XAMPP 3. SQLyog 4. Notepad ++ 5. Mozila Firefox Hardware : 1. Komputer dengan prosesor minimal Pentium IV

4.1 Implementasi Subsistem Manajemen Data

Langkah pertama yang dilakukan dalam pembuatan sistem ini adalah membuat database terlebih dahulu. Database pada sistem ini bernama smp yang dibuat menggunakan MySQL. Untuk melakukan pengolahan query digunakan SQLyog sebagai aplikasi pendukung. Langkah-langkah dalam pembuatan database adalah : 1. Membuat database baru menggunakan SQLyog yang didalamnya terdapat tabel-tabel yang diperlukan.