BAB IV

IMPLEMENTASI

Tahap implementasi merupakan tahap dimana proses pembuatan project

aplikasi telah selesai dibuat dan dibagi menjadi beberapa bagian, yakni
implementasi data, implementasi proses, dan implementasi antarmuka, serta
pengujian project aplikasi. Ketiga bagian ini, akan memberikan informasi
mengenai proses, user interface, fitur-fitur aplikasi, dan fungsi dari setiap fitur
yang dibuat. Berikut ini, adalah penjelasan detailnya :

4.1. IMPLEMENTASI DATA

Data diimplementasikan dengan menggunakan Mysql. Pengelolaan data
terhadapat implementasi terdiri atas dua bagian, yakni untuk untuk server
database dan website database. Server database digunakan untuk penyimpanan
data internal/primer. Semua data aplikasi disimpan berdasarkan kategori yang
terstruktur atas tables dan field tables pada server database. Website database
merupakan replikasi dari tables yang ada pada server database.

4.2. IMPLEMENTASI PROSES

Implementasi proses adalah pengembangan dari perancangan proses.
Penjelasan untuk implementasi proses ini menggunakan sequence diagram dari
masing-masing proses.
Proses – proses yang penting dalam situs ini adalah sebagai berikut :
a. Administrator, Teachers, dan Students melakukan proses login pada
halaman login dengan memasukkan username dan password yang telah
dimiliki, apabila username dan password yang diberikan benar maka akan
masuk kehalaman administrator, jika tidak maka akan ada notifikasi jika
data login salah dan kembali kehalaman login.
b. Dihalaman administrator ada beberapa aktivitas yang dapat dilakukan
oleh admin apabila telah login dengan benar. Aktivitas tersebut adalah
mengelola data users seperti data administrator, teachers, dan students.
Selain itu, mengelola data akademik seperti jam pelajaran, kelas, semester,
tahun, mata pelajaran, dan galeri sekolah. Kemudian, mengelola data

54
 modul dan tugas, serta jadwal pelajaran. Semua fitur menggunakan aksi
Create, Read, Update, dan Delete.
c. Beberapa aktivitas yang dapat dilakukan pada halaman teachers, setelah
pengguna melakukan proses login adalah melihat data galeri sekolah.
Selain itu, mengelola fitur modul, dan tugas menggunakan operasi Create,
Read, Update, dan Delete.
d. Sedangkan students hanya dapat melakukan aktivitas melihat galeri
sekolah, serta download modul dan tugas.

4.3. IMPLEMENTASI ANTARMUKA

Untuk perancangan antarmuka digunakan tiga komponen utama dalam
proses coding web application ini, yaitu aplikasi server menggunakan Database
MySQL, bahasa pemrograman menggunakan HTML, CSS, JS, dan PHP, serta
menggunakan Bootstrap Framework. Pada perancangan aplikasi server digunakan
fasilitas user control untuk pembuatan fungsi-fungsi yang sering dipakai oleh
beberapa Class. Sedangkan untuk fungsi yang dapat berinteraksi dengan sistem
lain digunakan fungsi Web Service. Teknik pemrograman menggunakan Object
Oriented Programming, yakni dengan cara pemanggilan class disetiap source
code yang disisipkan dan disetiap objek yang dipanggil mewakili atau representasi
dari suatu class yang dipanggil untuk ditampilkan.

4.4. PENGUJIAN WEB APPLICATION

Pada bagian ini akan dilakukan percobaan untuk semua proses aktivitas
yang dimiliki oleh administrator, teachers, dan students sesuai dengan fungsi
yang telah dibuat pada web application ini. Proses – proses yang dilakukan uji
coba adalah sebagai berikut :
1. Proses login administrator, teachers, dan students
2. Aktivitas administrator web pages
3. Aktivitas teachers web pages
4. Aktivitas students web pages
5. Proses logout administrator, teachers, dan students
6. Blackbox Testing
Proses – proses diatas akan di jelaskan pada halaman selanjutnya.

55
 4.4.1. Uji Coba Proses Login Administrator, Teachers, dan Students
Administrator berperan untuk mengatur semua data masuk dan keluar
dalam basis data web application. Aktivitas yang dilakukan oleh administrator
mengupdate berita dan informasi pada web application yang nantinya akan
ditampilkan pada web pages. Semua fitur yang terdapat pada web application ini,
dapat digunakan seluruhnya oleh administrator secara leluasa dan fleksibel.
Untuk teachers, hanya bisa melakukan pembaharuan informasi pada fitur modul
dan tugas sekolah, sedangkan students adalah sebagai aktor penerima berita dan
informasi, yang hanya bisa mendownload informasi dan menampilkan informasi
yang diberikan oleh teachers, dan administrator. Halaman login pada web
application ini, hanya memiliki satu form login dan dapat dilakukan proses login
dengan beda users sekaligus berdasarkan level. Berikut ini adalah landing page
sekaligus form login pengguna :

Gambar 4.1 User Interface : Landing Page

Landing page merupakan halaman web yang pertama kali dilihat oleh
users saat masuk melalui link tertentu. Pada UI terlihat terdapat informasi
mengenai title dari web application, lalu dilanjutkan dengan kata sambutan, dan
nama sekolah. Kemudian terdapat button “please login” yang berfungsi untuk
menuju kehalaman form login, dan button ”contact us” yang berfungsi untuk
direct ke pembuat web application.

56
 Gambar 4.2 User Interface : Form Login

Halaman form login dapat digunakan oleh administrator, teachers, dan

students untuk bisa masuk kedalam sistem web application. Form login berisi
kolom masukkan berupa username dan password, serta login button. Jika kedua
form tidak diisi dengan masukkan, maka akan ada notifikasi untuk mengisikan
kedua form tersebut, seperti pada gambar berikut.

Gambar 4.3 Notifikasi form login wajib diisi

Lalu, jika data username dan password yang dimasukkan benar, maka
akan ada login success pop up, dan secara otomatis akan masuk kehalaman
dashboard seperti pada gambar dihalaman selanjutnya.

57
 Gambar 4.4 Login Success Pop Up
Jika data username dan password yang dimasukkan salah, maka akan ada
login failure pop up, dan akan direct kehalaman landing page seperti pada gambar
berikut ini.

Gambar 4.5 Login Failure Pop Up

4.4.2. Aktivitas Administrator Web Pages

Aktivitas dihalaman administrator diatur menggunakan CMS agar
mempermudah dalam memodifikasi content dari web application, yang menjadi
satu package dalam Bootstrap Framework. Termasuk user interface yang
dinamis, form editor yang fleksibel, dan terintegrasi dengan Java Script serta PHP
agar dapat terhubung/terkoneksi dengan database server. Selain itu, dibantu
dengan plugins yang open source dapat membantu mempercantik tampilan web

58
application, seperti datatables plugin, input-mask, fast-click, dan select2 plugin.
Berikut ini UI pada dashboard administrator :

Gambar 4.6 User Interface : Administrator Front Dashboard Page

Dari semua fitur/menu yang ada pada gambar diatas, akan

diimplementasikan secara detail mengenai masing-masing fitur dan sub fitur yang
terdapat pada web application ini, sebagai berikut :
a. Users
Menu users adalah menu ketiga setelah menu nama users login dan
home. Home adalah link direct menuju ke landing page. Sedangkan untuk
users login menampilkan informasi nama users yang sedang masuk
kedalam dashboard. Menu users terdiri sub menu : administrator,
teachers, dan student. Yang didalamnya terdapat operasi Create, Read,
Update, dan Delete, seperti gambar dibawah ini :

Gambar 4.7 Sub Menu Users

Gambar 4.8 Interface : Informasi Data Administrator

59
 Data yang ditampilkan berupa data tabel yang berisi nama,
username, telepon, e-mail, dan status users, serta aksi yang dapat
dimodifikasi seperti perintah edit, dan delete. Kerangka pada penampilan
data tabel ini merupakan satu kesatuan dari plugins yang telah
diberikan/disisipkan pada Bootstrap Framework, yakni datatables plugin.

Gambar 4.9 Interface : Form Tambah Data Administrator

Form diatas, digunakan untuk menambahkan users administrator,

jadi akan ada administrator baru yang dapat memodifikasi ataupun
mengupdate informasi pada sistem web application ini. Form input terdiri
dari nama lengkap, username, password, e-mail,telepon, alamat, status,
dan file foto.

60
 Gambar 4.10 Interface : Form Edit Data Administrator

Pada tabel sebelumnya yang berisi informasi data administrator,

jika salah satu baris informasi diberikan aksi edit, maka form edit akan
muncul seperti pada gambar diatas, jika proses edit selesai maka lakukan
update dengan mengarahkan ke button update.
Pada sub menu teachers, dan students kurang lebih form tambah
data, view data, form edit data adalah sama, hanya yang membedakan
terdapat penambahan field seperti pada form teachers ditambahkan field
nomor induk pegawai, dan pada form students terdapat field nomor induk
siswa. Secara keseluruhan sistem pengaplikasiannya sama dengan sub
menu kelola data administrator.

b. Akademik
Menu akademik adalah menu keempat setelah menu users, yang
berisi informasi : jam pelajaran, kelas, semester, tahun, mata pelajaran,
dan galeri skolah, sama seperti pada menu sebelumnya, semua sub menu
pada menu akademik menggunakan CMS dan operasi CRUD, agar kelola
data lebih dinamis. Menu akademik ini berfungsi untuk menambahkan
informasi guna melengkapi menu terakhir, yakni menu jadwal pelajaran.
Data dari pencarian jadwal pelajaran dan kelola data jadwal pelajaran,
akan diambil dari menu akademik, secara keseluruhan kecuali pada sub
menu galeri sekolah. Berikut ini adalah tampilan menu akademik :

61
 Gambar 4.11 Sub Menu Akademik

Gambar 4.12 Interface : Informasi Data Jam Pelajaran

Users akan dibawa kepada informasi berupa tabel yang berisi jam
pelajaran, dan action terdiri dari edit dan delete data.

Gambar 4.13 Interface : Form Tambah Data Jam Pelajaran

Jika dilihat dari tabel informasi data jam pelajaran, terdapat button
create, apabila users mengarahkan ke button tersebut, maka akan muncul
form tambah data seperti pada gambar diatas. Pada form jam pelajaran,
dapat diisi seperti “07.00 – 09.30” ataupun bisa juga ditambah dengan
“WIB”, dapat disesuaikan oleh masukkan yang diberikan oleh users
administrator. Form tersebut dapat diisi dengan karakter, angka, ataupun

62
huruf. Jadi, dapat disimpulkan bahwa kolom inputan pada gambar diatas
fleksibel.

Gambar 4.14 Interface : Form Edit Data Jam Pelajaran

Form edit data jam pelajaran akan muncul, jika pada tabel
informasi jam pelajaran yang sebelumnya, pada pilihan aksi, dan
diarahkan pada button edit, maka akan muncul form masukkan, form
masukkan, yang berisi data sebelumnya, serta siap untuk
dimodifikasi/diupdate.

Gambar 4.15 Interface : Informasi Data Kelas

Sama seperti pada sub menu akademik sebelumnya, informasi

yang ditampilkan pada data kelas berupa data tabel, yang berisi nama
kelas, wali kelas, dan action yang terdiri dari edit dan delete.

Gambar 4.16 Interface : Form Tambah Data Kelas

Form diatas terdiri inputan nama, dan pilihan/selection yang

diambil dari table database guru.

63
 Gambar 4.17 Interface : Form Edit Data Kelas

Form diatas akan tampil, jika pada tabel informasi data kelas
memilih salah satu baris informasi, dan mengarahkan pada button edit,
maka akan muncul form seperti diatas, maka data yang dpilih siap untuk
dimodifikasi/diupdate.

Gambar 4.18 Interface : Informasi Data Semester

Sama seperti sub fitur akademik sebelumnya, data semester ini

menampilkan tabel yang terdiri dari nama semester, dan action berupa edit
dan delete. Pada data ini, hanya bisa menambahkan data sebanyak 2 data,
karena pada umumnya, disekolah menerapkan hanya 2 semester. Jika
salah satu tabel informasi diatas dihapus, maka button create akan tampil,
dan dapat dilakukan penambahan data hingga mencapai 2 data. Jika data
sudah mencapai maksimal, maka button create akan secara otomatis
disable. Untuk form tambah data, dan form edit data kurang lebih sama
dengan sub menu akademik sebelumnya.

Gambar 4.19 Interface : Informasi Data Tahun Ajaran

64
 Pada gambar dihalaman sebelumnya, merupakan halaman
informasi yang berisi tahun ajaran, sub menu ini nantinya juga akan dipake
pada fitur jadwal pelajaran, agar mempermudah, pengelolaan jadwal
pelajaran.

Gambar 4.20 Interface : Form Tambah Data Tahun Ajaran

Masukkan nama tahun pada form diatas dapat dimodifikasi seperti

”2016/2017”, atau “2016-2017”. Pengisiannya bisa dilakukan secara
leluasa oleh administrator.

Gambar 4.21 Interface : Form Edit Data Tahun Ajaran

Sama seperti pada sub menu sebelumnya, proses edit data akan
dilakukan jika pada tabel informasi dipilih pada action dan diarahkan pada
button edit.

Gambar 4.22 Interface : Informasi Data Mata Pelajaran

Gambar diatas memberikan informasi mata pelajaran dan

ditampilkan menggunakan tabel secara terurut. Administrator dapat
melakukan operasi create, edit, dan delete data pada halaman ini. Button
create difungsikan untuk direct ke form tambah data mata pelajaran,
sedangkan button edit yang terdapat pada tabel, digunakan untuk direct ke

65
form edit mata pelajaran, sesuai dengan data tabel yang dipilih oleh
administrator.

Gambar 4.23 Interface : Form Tambah Data Mata Pelajaran

User administrator dapat menambahkan mata pelajaran, pada

kolom input seperti pada gambar diatas, setelah selesai maka tinggal
memberikan operasi create, dengan mengarahkan pada button create.

Gambar 4.24 Interface : Form Edit Data Mata Pelajaran

Gambar 4.25 Interface : Informasi Data Galeri Sekolah

Informasi yang ditampilkan pada gambar diatas berupa data tabel

yang terdiri dari nama file/foto, lalu alamat/link penyimpanan foto, dan
action yang terdiri dari edit dan delete. Terdapat button create, yang
digunakan untuk masuk ke form tambah data galeri sekolah, dan button
view, untuk menampilkan foto secara berurutan kebawah, seperti pada
gambar dihalaman selanjutnya :

66
 Gambar 4.26 Modal Pop Up : Tampil Data Galeri Sekolah

Setelah menekan button view pada halaman informasi galeri

sekolah, maka akan tampil foto yang telah disisipkan sebelumnya,
ditampilkan secara dropdown.

Gambar 4.27 Interface : Form Tambah Data Galeri Sekolah

Cara menambahkan data galeri adalah dengan mengisi form input

nama galeri, kemudian memilih file foto dengan mengarahkan pada
browse..., selanjutnya dengan menekan button create, file foto akan
tersimpan secara otomatis.

c. Modul
Menu modul adalah menu kelima setelah menu akademik, yang
berisi sub menu yang terdiri dari operasi upload dan download
modul/materi ajar. Berikut ini adalah sub menu pada menu modul :

67
 Gambar 4.28 Sub Menu Modul
Gambar 4.29 Interface : Form Upload Data Modul

Dihalaman sebelumnya, terdapat form upload data modul yang

terdiri dari seleksi dari nama mata pelajaran yang diambil dari data
akademik, lalu nama modul, selanjutnya users diperintahkan untuk
memilih file yang akan dimasukkan, dan terakhir adalah memilih nama
guru yang mengupload modul disertai dengan keterangan untuk
memberitahukan rincian isi dari modul.
Gambar 4.30 Interface : Informasi Data Modul

Informasi diatas ditampilkan menggunakan tabel, informasi terdiri

dari judul, tanggal upload, pelajaran, guru, keterangan, dan action yang
meliputi button download, edit, dan delete.

68
 Gambar 4.31 Interface : Form Edit Data Modul

Saat users memilih aksi edit disalah satu baris data pada informasi
data modul, maka akan tampil form edit, yang dapat langsung dimodifikasi
oleh user administrator.
d. Tugas
Menu ini kurang lebih sama dengan menu modul yang memiliki
operasi Create, Read, Update, Delete dan Download. Data yang
ditampilkan juga sama seperti menu-menu yang telah dijelaskan
sebelumnya, berikut ini tampilan dari navigasi menu tugas web application
yang dibuat :

Gambar 4.32 Sub Menu Tugas

Gambar 4.33 Interface : Form Upload Data Tugas

69
 Gambar 4.34 Interface : Informasi Data Tugas

e. Jadwal Pelajaran
Pada menu ini, semua data masukkan diambil dari data akademik,
hal ini akan memudahkan pemasukkan jadwal secara rinci, dan akan
masuk ke database dengan baik, terperinci.

Gambar 4.35 Sub Menu Jadwal Pelajaran

Gambar 4.36 Interface : Form Tambah Data Jadwal Pelajaran

Untuk menambahkan data jadwal pelajaran, user administrator

diperintahkan untuk memilih sesuai form yang telah disediakan sesuai
pada gambar diatas, jika telah selesai maka selnajutnya menekan button
create.

70
 Gambar 4.37 Interface : Halaman Pencarian Jadwal Pelajaran

Halaman diatas merupakan form untuk pencarian jadwal pelajaran.

Pencarian jadwal pelajaran berdasarkan tahun ajaran, semester, dan kelas.
Selanjutnya dengan mengarahkan dan menekan ke button search, maka
data jadwal akan tampil dari hari senin, hingga hari sabtu.
4.4.3. Aktivitas Teachers Web Pages
Aktivitas yang dilakukan oleh teachers pada web application ini hanya
sebatas pengelolaan modul pembelajaran sekolah dan tugas-tugas siswa, dengan
operasi Create, Read, Update, dan Delete. Dari segi user interface tambah data,
edit data, hingga tampil data sama seperti pada administrator, yang membedakan
adalah teachers tidak dapat mengelola menu users, menu akademik, dan
menambah serta memodifikasi data jadwal pelajaran. Berikut ini tampilan
dashboarh teachers :

Gambar 4.38 User Interface : Teachers Front Dashboard Page

User teachers hanya dapat mengakses fitur galeri sekolah, yakni

menampilkan data galeri sekolah secara keseluruhan, lalu memodifikasi data
modul dan tugas, seta menampilkan jadwal pelajaran yang telah diinputkan oleh
administrator.

4.4.4. Aktivitas Students Web Pages

Pada implementasi web application ini user students bertindak sebagai
penerima informasi yang diberikan oleh administrator maupun teachers. Cara
kerja dari users students sama seperti kedua users sebelumnya, yakni dengan cara
login pada landing page. Lalu, jika data yang dimasukkan benar, akan masuk
kedalam halaman dashboard seperti pada gambar dihalaman selanjutnya :

Gambar 4.39 User Interface : Students Front Dashboard Page

Halaman dashboard pada user students sama dengan user teachers.

Perbedaannya adalah user students hanya bisa melakukan operasi Read dan
Download pada web application ini. User students dapat mengakses galeri

71
sekolah, dengan menampilkan foto kegiatan sekolah secara terurut. Lalu, user
students dapat mendownload modul dan tugas sekolah, serta menampilkan jadwal
pelajaran yang telah diinputkan oleh administrator sebelumnya.

4.4.5. Uji Coba Proses Logout Administrator, Teachers, dan Students

Untuk melakukan proses logout, caranya adalah dengan menekan pop up
pada navbar menu users, seperti pada gambar dibawah ini :

Gambar 4.40 Menu Users

Kemudian, arahkan pada button logout lalu pilih dan klik, maka secara
otomatis users akan keluar dari halaman dashboard dan kembali pada landing
page. Dengan disertai notifikasi seperti berikut :

Gambar 4.41 Logout Success Pop Up

4.4.6. Blackbox Testing

4.4.6.1. User Administrator
No. Biodata Penguji
1. Nama :
2. Pekerjaan :
3. Tanggal :
4. Tanda Tangan :

a. Login Administrator Testing

Pengujian Halaman untuk login Administrator dapat dilihat pada tabel
berikut ini. Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.1 BlackBox Testing Login Administrator
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil

72
 Test
1. Administrator Mengisi username yang Login gagal
melakukan login salah dan password
benar
2. Administrator Mengisi username yang Login gagal
melakukan login benar dan password
kembali yang salah
3. Administrator Mengisi username yang Login berhasil
melakukan login benar dan password dan masuk
kembali benar kehalaman
dashboard
administrator

b. Kelola Menu Users

Untuk mengelola menu users dapat dilihat pada tabel berikut ini. Tanda
() merupakan tanda yang berarti halaman yang diuji berhasil.

Tabel 4.2 BlackBox Testing Kelola Menu Users

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Administrator Administrator dibawa Menampilkan
mengklik menu kehalaman informasi halaman
users dan mengklik data administrator informasi data
navbar berupa data tabel administrator
administrator pada
sub menu users
2. Administrator Mengisi kolom inputan, Data
menambahkan data berupa nama, administrator
administrator username, password, e- yang baru
dengan mengklik mail, telepon, alamat, berhasil

73
 button create status yang terdiri dari 2 disimpan, dan
opsi yakni PNS atau ditampilkan
honorer, dan pada informasi
mengunggah file foto data
lalu ditambahkan administrator
dengan mengklik button
create
3. Administrator Memodifikasi data Data
melakukan proses nama, username, e- administrator
edit data pada tabel mail, telepon, dan berhasil
informasi data alamat. Kemudian dimodifikasi,
administrator mengklik button update disimpan, dan
dengan mengklik ditampilkan
button edit pada pada informasi
kolom action data
administrator

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil

Test
4. Administrator Mengklik button delete Data 
melakukan proses pada kolom action administrator
delete data pada informasi data yang dipilih
tabel informasi data administrator berhasil dihapus
administrator
5. Administrator Administrator dibawa Menampilkan 
mengklik navbar kehalaman informasi halaman
guru/tata usaha data guru/tata usaha informasi data
pada sub menu yang berupa data tabel guru/tata usaha
users
6. Administrator Mengisi kolom inputan, Data guru yang 

74
 menambahkan data berupa nomor induk baru berhasil
guru dengan pegawai, nama, disimpan, dan
mengklik button username, password, e- ditampilkan
create mail, telepon, alamat, pada informasi
status yang terdiri dari 2 data guru/tata
opsi yakni PNS atau usaha
honorer, dan
mengunggah file foto
lalu ditambahkan
dengan mengklik button
create
7. Administrator Memodifikasi data Data guru 
melakukan proses nomor induk pegawai, berhasil
edit data pada tabel nama, username, e- dimodifikasi,
informasi data mail, telepon, dan disimpan, dan
guru/tata usaha alamat. Kemudian ditampilkan
dengan mengklik mengklik button update pada informasi
button edit pada data guru/tata
kolom action usaha
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
8. Administrator Mengklik button delete Data guru yang 
melakukan proses pada kolom action dipilih berhasil
delete data pada informasi data guru/tata dihapus
tabel informasi data usaha
guru/tata usaha
9. Administrator Administrator dibawa Menampilkan 
mengklik navbar kehalaman informasi halaman
siswa pada sub data siswa yang berupa informasi data
menu users data tabel siswa
10. Administrator Mengisi kolom inputan, Data siswa yang 
menambahkan data berupa nomor induk baru berhasil

75
 siswa dengan siswa, nama, username, disimpan, dan
mengklik button password, e-mail, ditampilkan
create telepon, alamat, status pada informasi
yang terdiri dari 2 opsi data siswa
yakni Aktif atau Non
Aktif, kelas dan
mengunggah file foto
lalu ditambahkan
dengan mengklik button
create
11. Administrator Memodifikasi data Data siswa 
melakukan proses nomor induk siswa, berhasil
edit data pada tabel nama, username, dimodifikasi,
informasi data password, e-mail, disimpan, dan
siswa dengan telepon, alamat, status, ditampilkan
mengklik button dan kelas. Kemudian pada informasi
edit pada kolom mengklik button update data siswa
action

c. Kelola Menu Akademik

Menu akademik adalah menu yang berisi data-data penting, guna
melengkapi data-data pada fitur selanjutnya. Hal ini akan memudahkan proses
pemasukkan data baru yang efektif pada menu selanjutnya dengan cara
menggabungkan atau mendapatkan data dari menu akademik, yang terdiri dari sub
menu jam pelajaran, kelas, semester, tahun ajaran, mata pelajaran, dan galeri
sekolah.
Untuk mengelola menu akademik dapat dilihat pada tabel dihalaman
selanjutnya. Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.

Tabel 4.3 BlackBox Testing Kelola Menu Akademik

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test

76
1. Administrator Administrator dibawa Menampilkan
mengklik navbar kehalaman informasi halaman
jam pelajaran pada data jam pelajaran yang informasi data
sub menu berupa data tabel jam pelajaran
akademik

2. Administrator Mengisi kolom inputan Data jam

menambahkan data jam pelajaran pelajaran yang
jam pelajaran baru berhasil
dengan mengklik disimpan, dan
button create ditampilkan
pada informasi
data jam pelajar

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil

Test
3. Administrator Memodifikasi data jam Data jam
melakukan proses pelajaran pelajaran
edit data pada tabel berhasil
informasi data jam dimodifikasi,
pelajaran dengan disimpan, dan
mengklik button ditampilkan
edit pada kolom pada informasi
action data jam
pelajaran
4. Administrator Mengklik button delete Data jam 

77
 melakukan proses pada kolom action pelajaran yang
delete data pada informasi data jam dipilih berhasil
tabel informasi data pelajaran dihapus
jam pelajaran
5. Administrator Administrator dibawa Menampilkan
mengklik navbar kehalaman informasi halaman
kelas pada sub datakelas yang berupa informasi data
menu akademik data tabel kelas
6. Administrator Mengisi kolom inputan Data kelas yang
menambahkan data nama kelas dan wali baru berhasil
kelas dengan kelas yang diambil dari disimpan, dan
mengklik button data users guru/tata ditampilkan
create usaha pada informasi
data kelas

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil

Test
7. Administrator Memodifikasi data Data kelas yang
melakukan proses nama kelas, dan wali dipilih berhasil
edit data pada tabel kelas dimodifikasi,
informasi data disimpan, dan
kelas dengan ditampilkan
mengklik button pada informasi
edit pada kolom data kelas
action
8. Administrator Mengklik button delete Data kelas yang 
melakukan proses pada kolom action dipilih berhasil

78
 delete data pada informasi data kelas dihapus
tabel informasi data
kelas
9. Administrator Administrator dibawa Menampilkan
mengklik navbar kehalaman informasi halaman
semester pada sub data semester yang informasi data
menu akademik berupa data tabel semester
10. Administrator Mengisi kolom inputan Data semester
menambahkan data semester yang baru
semester dengan berhasil
mengklik button disimpan, dan
create ditampilkan
pada informasi
data semester,
dengan
ketentuan jika
semester lebih
dari 2, maka
tidak bisa
menambah data
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
11. Administrator Memodifikasi data Data semester
melakukan proses semester berhasil
edit data pada tabel dimodifikasi,
informasi data disimpan, dan
semester dengan ditampilkan
mengklik button pada informasi
edit pada kolom data semester
action
12. Administrator Mengklik button delete Data semester 
melakukan proses pada kolom action yang dipilih

79
 delete data pada informasi data semester berhasil dihapus
tabel informasi data
semester
13. Administrator Administrator dibawa Menampilkan
mengklik navbar kehalaman informasi halaman
tahun pada sub data tahun yang berupa informasi data
menu akademik data tabel tahun
14. Administrator Mengisi kolom inputan Data tahun yang
menambahkan data nama tahun baru berhasil
tahun dengan disimpan, dan
mengklik button ditampilkan
create pada informasi
data tahun
15. Administrator Memodifikasi data Data tahun yang
melakukan proses tahun dipilih berhasil
edit data pada tabel dimodifikasi,
informasi data disimpan, dan
tahun dengan ditampilkan
mengklik button pada informasi
edit dikolom action data tahun
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
16. Administrator Mengklik button delete Data tahun yang 
melakukan proses pada kolom action dipilih berhasil
delete data pada informasi data tahun dihapus
tabel informasi data
tahun
17. Administrator Administrator dibawa Menampilkan
mengklik navbar kehalaman informasi halaman
mata pelajaran data mata pelajaran informasi data
pada sub menu yang berupa data tabel mata pelajaran
akademik

80
18. Administrator Mengisi kolom inputan Data mata
menambahkan data nama mata pelajaran pelajaran yang
mata pelajaran baru berhasil
dengan mengklik disimpan, dan
button create ditampilkan
pada informasi
data mata
pelajaran
19. Administrator Memodifikasi data mata Data mata
melakukan proses pelajaran pelajaran yang
edit data pada tabel dipilih berhasil
informasi data mata dimodifikasi,
pelajaran dengan disimpan, dan
mengklik button ditampilkan
edit pada kolom pada informasi
action data mata
pelajaran

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil

Test
20. Administrator Mengklik button delete Data mata 
melakukan proses pada kolom action pelajaran yang
delete data pada informasi data mata dipilih berhasil
tabel informasi data pelajaran dihapus
mata pelajaran
21. Administrator Administrator dibawa Menampilkan
mengklik navbar kehalaman informasi halaman
galeri pada sub data galeri yang berupa informasi data
menu akademik data tabel galeri
22. Administrator Mengisi kolom inputan Data galeri yang

81
 menambahkan data nama foto, dan baru berhasil
galeri dengan mengunggah file foto disimpan, dan
mengklik button ditampilkan
create pada informasi
data galeri
23. Administrator Mengklik button view Data foto
melakukan proses untuk menampilkan ditampilkan
view data pada foto berupa modal
tabel informasi data pop up
galeri
24. Administrator Mengklik button delete Data galeri yang 
melakukan proses pada kolom action dipilih berhasil
delete data pada informasi data galeri dihapus
tabel informasi data
galeri

d. Kelola Menu Modul

Untuk mengelola menu modul dapat dilihat pada tabel dibawah ini. Tanda
() merupakan tanda yang berarti halaman yang diuji berhasil.

Tabel 4.4 BlackBox Testing Kelola Menu Modul (Administrator)

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Administrator Administrator mengisi Data modul
mengklik navbar inputan berupa nama berhasil
upload pada sub mata pelajaran, nama disimpan, dan
menu modul dan modul, file modul, guru ditampilkan
akan dibawa mata pelajaran, dan pada informasi
kehalaman upload keterangan lalu data modul
modul mengklik create
2. Administrator Administrator dibawa Menampilkan

82
 mengklik navbar kehalaman informasi halaman
download pada sub data modul berupa data informasi data
menu modul tabel, informasi terdiri modul
dari judul, tanggal
upload, pelajaran, guru
mata pelajaran, disertai
keterangan
3. Administrator Mengklik button Data modul 
melakukan proses download pada kolom yang dipilih
download data action informasi data berhasil diunduh
pada tabel modul
informasi data
modul
4. Administrator Memodifikasi data Data modul
melakukan proses modul yang dipilih
edit data pada tabel berhasil
informasi data dimodifikasi,
modul dengan disimpan, dan
mengklik button ditampilkan
edit pada kolom pada informasi
action data modul
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
5. Administrator Mengklik button delete Data modul 
melakukan proses pada kolom action yang dipilih
delete data pada informasi data modul berhasil dihapus
tabel informasi data
modul

e. Kelola Menu Tugas

Untuk mengelola menu tugas dapat dilihat pada tabel dihalaman
selanjutnya. Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.5 BlackBox Testing Kelola Menu Tugas (Administrator)

83
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Administrator Administrator mengisi Data tugas
mengklik navbar inputan berupa nama berhasil
upload pada sub mata pelajaran, nama disimpan, dan
menu tugas dan tugas, file tugas, guru ditampilkan
akan dibawa mata pelajaran, dan pada informasi
kehalaman upload keterangan lalu data tugas
tugas mengklik create

2. Administrator Administrator dibawa Menampilkan

mengklik navbar kehalaman informasi halaman
download pada sub data tugas berupa data informasi data
menu tugas tabel, informasi terdiri tugas
dari judul, tanggal
upload, pelajaran, guru
mata pelajaran, disertai
keterangan

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil

Test
3. Administrator Mengklik button Data tugas yang 
melakukan proses download pada kolom dipilih berhasil
download data action informasi data diunduh
pada tabel tugas
informasi data
tugas

4. Administrator Memodifikasi data Data tugas yang

melakukan proses tugas dipilih berhasil

84
 edit data pada tabel dimodifikasi,
informasi data disimpan, dan
tugas dengan ditampilkan
mengklik button pada informasi
edit pada kolom data tugas
action

5. Administrator Mengklik button delete Data tugas yang 

melakukan proses pada kolom action dipilih berhasil
delete data pada informasi data tugas dihapus
tabel informasi data
tugas

f. Kelola Menu Jadwal Pelajaran

Data yang diambil untuk mengelola jadwal pelajaran diambil dari menu
akademik secara keseluruhan, hal ini akan memudahkan pengelolaan jadwal
pelajaran. Untuk mengelola menu jadwal pelajaran dapat dilihat pada tabel berikut
ini. Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.6 BlackBox Testing Kelola Menu Jadwal Pelajaran
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Administrator Administrator mengisi Data jadwal
mengklik navbar inputan selection pelajaran
tambah jadwal berupa tahun ajaran, berhasil
pada sub menu semester, hari, jam disimpan, dan
jadwal pelajaran pelajaran, mata ditampilkan
dan akan dibawa pelajaran, dan kelas. dihalaman
kehalaman tambah Kemudian mengklik pencarian
data jadwal button create

85
 pelajaran

2. Administrator Administrator memilih Menampilkan

mengklik navbar informasi jadwal halaman
tampil jadwal pada pelajaran dikolom informasi data
sub menu jadwal pencarian berdasarkan jadwal
pelajaran dan akan tahun ajaran, semester, pelajaran,
dibawa kehalaman dan kelas. Lalu berdasarkan
pencarian data mengklik button search pencarian yang
jadwal pelajaran, dilakukan
informasi terdiri Administrator
dari tahun ajaran,
semester, dan kelas
yang data
sebelumnya
diambil pada menu
akademik

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil

Test
3. Administrator Administrator mengklik Data berhasil 
berada pada button edit pada kolom dimodifikasi dan
halaman informasi action dan disimpan
data jadwal memodifikasi data yang
pelajaran ada, kemudian
berdasarkan mengklik button update
pencarian
4. Administrator Administrator mengklik Data yang 
berada pada button delete pada dipilih berhasil

86
 halaman informasi kolom action dihapus
data jadwal
pelajaran yang
sebelumnya telah
dilakukan
pencarian

Masukan / Saran :

4.4.6.2. User Teachers

No. Biodata Penguji
1. Nama :
2. Pekerjaan :
3. Tanggal :
4. Tanda Tangan :

a. Login Teachers Testing

Pengujian Halaman untuk login Teachers dapat dilihat pada tabel berikut
ini. Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.

87
 Tabel 4.7 BlackBox Testing Login Teachers
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Teachers Mengisi username yang Login gagal
melakukan login salah dan password
benar

2. Teachers Mengisi username yang Login gagal

melakukan login benar dan password
kembali yang salah

3. Teachers Mengisi username yang Login berhasil

melakukan login benar dan password dan masuk
kembali benar kehalaman
dashboard
Teachers

b. Tampil Menu Galeri

Untuk melihat menu galeri sekolah dapat dilihat pada tabel berikut ini.
Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.

Tabel 4.8 BlackBox Testing View Galeri (Teachers)

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Teachers mengklik Teachers dibawa ke Menampilkan
navbar menu galeri modal pop up yang halaman pop up
berisi foto galeri data foto galeri
sekolah yang diupload sekolah
oleh Administrator

c. Kelola Menu Modul

88
 Untuk mengelola menu modul dapat dilihat pada tabel dibawah ini. Tanda
() merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.9 BlackBox Testing Kelola Menu Modul (Teachers)
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Teachers mengklik Teachers mengisi Data modul
navbar upload inputan berupa nama berhasil
pada sub menu mata pelajaran, nama disimpan, dan
modul dan akan modul, file modul, guru ditampilkan
dibawa kehalaman mata pelajaran, dan pada informasi
upload modul keterangan lalu data modul
mengklik create

2. Teachers mengklik Teachers dibawa Menampilkan

navbar download kehalaman informasi halaman
pada sub menu data modul berupa data informasi data
modul tabel, informasi terdiri modul
dari judul, tanggal
upload, pelajaran, guru
mata pelajaran, disertai
keterangan

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil

Test
3. Teachers Mengklik button Data modul 
melakukan proses download pada kolom yang dipilih
download data action informasi data berhasil diunduh
pada tabel modul
informasi data
modul

89
 4. Teachers Mengklik button delete Data modul 
melakukan proses pada kolom action yang dipilih
delete data pada informasi data modul berhasil dihapus
tabel informasi data
modul

5. Teachers Memodifikasi data Data modul

melakukan proses modul yang dipilih
edit data pada tabel berhasil
informasi data dimodifikasi,
modul dengan disimpan, dan
mengklik button ditampilkan
edit pada kolom pada informasi
action data modul

d. Kelola Menu Tugas

Untuk mengelola menu tugas dapat dilihat pada tabel berikut ini. Tanda
() merupakan tanda yang berarti halaman yang diuji berhasil.

Tabel 4.10 BlackBox Testing Kelola Menu Tugas (Teachers)

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Teachers mengklik Teachers mengisi Data tugas
navbar upload inputan berupa nama berhasil
pada sub menu mata pelajaran, nama disimpan, dan
tugas dan akan tugas, file tugas, guru ditampilkan
dibawa kehalaman mata pelajaran, dan pada informasi
upload tugas keterangan lalu data tugas

90
 mengklik create
2. Teachers mengklik Teachers dibawa Menampilkan
navbar download kehalaman informasi halaman
pada sub menu data tugas berupa data informasi data
tugas tabel, informasi terdiri tugas
dari judul, tanggal
upload, pelajaran, guru
mata pelajaran, disertai
keterangan
3. Teachers Mengklik button Data tugas yang 
melakukan proses download pada kolom dipilih berhasil
download data action informasi data diunduh
pada tabel tugas
informasi data
tugas
4. Teachers Memodifikasi data Data tugas yang
melakukan proses tugas dipilih berhasil
edit data pada tabel dimodifikasi,
informasi data disimpan, dan
tugas dengan ditampilkan
mengklik button pada informasi
edit pada kolom data tugas
action
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
5. Teachers Mengklik button delete Data tugas yang 
melakukan proses pada kolom action dipilih berhasil
delete data pada informasi data tugas dihapus
tabel informasi data
tugas

e. Tampil Jadwal Pelajaran

91
 Untuk menampilkan jadwal pelajaran dapat dilihat pada tabel berikut ini.
Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.11 BlackBox Testing View Jadwal Pelajaran (Teachers)
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Teachers mengklik Teachers melakukan Menampilkan
navbar tampil pencarian jadwal informasi data
jadwal sub menu pelajaran, dan mengklik jadwal pelajaran
mata pelajaran button search

Masukan / Saran :

4.4.6.3. User Students

No. Biodata Penguji
1. Nama :
2. Pekerjaan :
3. Tanggal :
4. Tanda Tangan :

a. Login Students Testing

92
 Pengujian Halaman untuk login Students dapat dilihat pada tabel berikut
ini. Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.12 BlackBox Testing Login Students
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Students Mengisi username yang Login gagal
melakukan login salah dan password
benar

2. Students Mengisi username yang Login gagal

melakukan login benar dan password
kembali yang salah

3. Students Mengisi username yang Login berhasil

melakukan login benar dan password dan masuk
kembali benar kehalaman
dashboard
Students

b. Tampil Menu Galeri

Untuk melihat menu galeri sekolah dapat dilihat pada tabel berikut ini.
Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.

Tabel 4.13 BlackBox Testing View Galeri (Students)

No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Students mengklik Students dibawa ke Menampilkan
navbar menu galeri modal pop up yang halaman pop up
berisi foto galeri data foto galeri
sekolah yang diupload sekolah
oleh Administrator

93
 c. Download Modul
Untuk melakukan proses download modul dapat dilihat pada tabel berikut
ini. Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.14 BlackBox Testing Download Modul
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Students mengklik Students dibawa Menampilkan
navbar download kehalaman informasi halaman
pada sub menu data modul berupa data informasi data
modul tabel, informasi terdiri modul
dari judul, tanggal
upload, pelajaran, guru
mata pelajaran, disertai
keterangan
2. Students Mengklik button Data modul 
melakukan proses download pada kolom yang dipilih
download data action informasi data berhasil diunduh
pada tabel modul
informasi data
modul

d. Download Tugas
Untuk melakukan proses download tugas dapat dilihat pada tabel berikut
ini. Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.15 BlackBox Testing Download Tugas
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Students mengklik Students dibawa Menampilkan
navbar download kehalaman informasi halaman
pada sub menu data tugas berupa data informasi data
tugas tabel tugas

94
 2. Students Mengklik button Data tugas yang 
melakukan proses download pada kolom dipilih berhasil
download data action informasi data diunduh
pada tabel tugas
informasi data
tugas

e. Tampil Jadwal Pelajaran

Untuk menampilkan jadwal pelajaran dapat dilihat pada tabel berikut ini.
Tanda () merupakan tanda yang berarti halaman yang diuji berhasil.
Tabel 4.16 BlackBox Testing View Jadwal Pelajaran (Students)
No. Kondisi Awal Hal yang dilakukan Kondisi Akhir Hasil
Test
1. Students mengklik Students memilih Menampilkan
navbar tampil informasi jadwal halaman
jadwal pada sub pelajaran dikolom informasi data
menu jadwal pencarian berdasarkan jadwal
pelajaran dan akan tahun ajaran, semester, pelajaran,
dibawa kehalaman dan kelas. Lalu berdasarkan
pencarian data mengklik button search pencarian
jadwal pelajaran

Masukan / Saran :

95
96