Gambar 4.1 Database Pengembangan Sistem Informasi Sekolah
4.2 Implementasi User interface
User interface merupakan tampilan untuk user yang akan mengakses sistem. User interface dibuat agar user dapat dengan mudah menjalankan program tersebut.
Beberapa user interface yang ada pada sistem ini antara lain :
User Interface Profil Sekolah
Gambar 4.2 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.
User Interface Berita dan Pengumuman
Gambar 4.3 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.
User Interface Forum
Gambar 4.4 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
Forum maka nama dan komentar pengguna akan ditampilkan pada halaman tersebut.
User Interface Fasilitas
Gambar 4.5 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 4.6 User Interface Login Admin
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 Peringatan Kesalahan Login Admin
Gambar 4.7 User Interface Peringatan Kesalahan Login Admin
Tampilan di atas merupakan peringatan bagi admin yang melakukan kesalahan saat memasukkan username dan password. Pada saat salah memasukkan
username dan password maka akan kembali ke halaman login admin.
User Interface Halaman Admin
Gambar 4.8 User Interface 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.
User Interface Data Guru
Gambar 4.9 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 4.10 User Interface Insert Data Guru
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 4.11 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.
User Interface Edit Data Guru
Gambar 4.12 User Interface Edit Data Guru
Tampilan di atas merupakan interface bagi admin yang melakukan edit data guru. Halaman edit data guru merupakan kelanjutan dari menu yang ada pada
halaman update data guru. Pertama admin memilih guru yang akan di edit, setelah guru yang akan di edit terpilih, admin baru dapat mengubah data guru. Saat pengisian
selesai, admin akan mengklik tombol Simpan, setelah tombol Simpan diklik maka data guru yang dimasukkan dalam form edit data guru tersimpan ke dalam database.
User Interface Konfirmasi Hapus Data Guru
Gambar 4.13 User Interface Konfirmasi Hapus Data Guru
Tampilan di atas merupakan interface bagi admin yang akan menghapus data guru. Konfirmasi hapus data guru merupakan kelanjutan dari menu yang ada pada
halaman update data guru. Pada saat admin memilih menu hapus data guru dan mengklik tombol OK, maka data guru terhapus dari database.
User Interface Detail Data Guru
Gambar 4.14 User Interface Detail Data Guru
Tampilan di atas merupakan interface bagi admin yang ingin melihat data guru secara detail. Halaman detail data guru merupakan kelanjutan dari menu yang
ada pada halaman update data guru. Pada saat admin memilih menu detail data guru, maka halaman web akan menampilkan data guru secara detail.
User Interface Data Siswa
Gambar 4.15 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 4.16 User Interface Insert Data Siswa
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 4.17 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
User Interface Edit Data Siswa
Gambar 4.18 User Interface Insert Data Siswa
Tampilan di atas merupakan interface bagi admin yang melakukan edit data siswa. Halaman edit data siswa merupakan kelanjutan dari menu yang ada pada
halaman update data siswa. Pertama admin memilih siswa yang akan di edit, setelah siswa yang akan di edit terpilih, admin baru dapat mengubah data siswa. Saat
pengisian selesai, admin akan mengklik tombol Simpan, setelah tombol Simpan diklik maka data siswa yang dimasukkan dalam form edit data siswa tersimpan ke
dalam database.
User Interface Konfirmasi Hapus Data Siswa
Gambar 4.19 User Interface Konfirmasi Hapus Data Siswa
Tampilan di atas merupakan interface bagi admin yang akan menghapus data siswa. Konfirmasi hapus data siswa merupakan kelanjutan dari menu yang ada pada
halaman update data siswa. Pada saat admin memilih menu hapus data siswa dan mengklik tombol OK, maka data siswa terhapus dari database.
User Interface Detail Data Siswa
Gambar 4.20 User Interface Detail Data Siswa
Tampilan di atas merupakan interface bagi admin yang ingin melihat data siswa secara detail. Halaman detail data siswa merupakan kelanjutan dari menu yang
ada pada halaman update data siswa. Pada saat admin memilih menu detail data siswa, maka halaman web akan menampilkan data siswa secara detail.
User Interface Ambil Pelajaran Siswa
Gambar 4.21 User Interface Ambil Pelajaran Siswa
Tampilan di atas merupakan interface bagi admin yang akan menambahkan pelajaran untuk siswa SMP Santo Aloysius Sleman. Halaman ambil pelajaran
merupakan kelanjutan dari menu yang ada pada halaman update data siswa. 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 simpan, maka pelajaran tertentu telah ditambahkan ke database berdasarkan
nama dan kelas siswa.
User Interface Data Pelajaran
Gambar 4.22 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 4.23 User Interface Insert Data Pelajaran
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 4.24 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.
User Interface Edit Data Pelajaran
Gambar 4.25 User Interface Edit Data Pelajaran
Tampilan di atas merupakan interface bagi admin yang melakukan edit data pelajaran. Halaman edit data pelajaran merupakan kelanjutan dari menu yang ada
pada halaman update data pelajaran. Pertama admin memilih pelajaran yang akan di edit, setelah pelajaran yang akan di edit terpilih, admin baru dapat mengubah data
pelajaran. Saat pengisian selesai, admin akan mengklik tombol Simpan, setelah tombol Simpan diklik maka data pelajaran yang dimasukkan dalam form edit data
pelajaran tersimpan ke dalam database.
User Interface Konfirmasi Hapus Data Pelajaran
Gambar 4.26 User Interface Konfirmasi Hapus Data Pelajaran
Tampilan di atas merupakan interface bagi admin yang akan menghapus data pelajaran. Konfirmasi hapus data pelajaran merupakan kelanjutan dari menu yang ada
pada halaman update data pelajaran. Pada saat admin memilih menu hapus data pelajaran dan mengklik tombol OK, maka data pelajaran terhapus dari database.
User Interface Berita dan Pengumuman
Gambar 4.27 User Interface Berita dan Pengumuman
Tampilan di atas merupakan interface bagi admin yang akan mengelola berita dan pengumuman, dalam halaman ini ditampilkan berita dan pengumuman sekolah
bagi guru maupun siswa di SMP Santo Aloysius Sleman. Dalam menu berita dan pengumuman terdapat sub menu insert dan update berita dan pengumuman.
User interface Insert Berita Pengumuman
Gambar 4.28 User Interface Insert Berita dan Pengumuman
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 Berita dan Pengumuman
Gambar 4.29 User Interface Update Berita dan Pengumuman
Tampilan di atas merupakan interface bagi admin yang akan melakukan update berita dan pengumuman jika diperlukan. Ada dua menu dalam update data
berita dan pengumuman yaitu edit dan hapus berita dan pengumuman. Menu edit data berita dan pengumuman berfungsi untuk mengubah keterangan data berita dan
pengumuman, hapus untuk menghapus data berita dan pengumuman.
User Interface Edit Berita dan Pengumuman
Kategori