LAPORAN HASIL PERANCANGAN WEBSITE AGENDA

PKL BERBASIS CODEIGNITER 4

LAPORAN BASIS DATA

Oleh:

KEVIN FERNANDO

NIS. 21161062

SMK PERMATA HARAPAN BATAM

JURUSAN REKAYASA PERANGKAT LUNAK

2023
A. Perancangan
1. Context Diagram (DFD Level 0)

Context diagram diatas dapat dijelaskan sebagai berikut, admin dapat

menginput dan mengelola data user. Siswa dapat mengisi agenda dan melihat
absensi siswa. Guru dapat mengisi absensi siswa dan melihat data agenda
siswa. Instruktur dapat mengisi agenda siswa, dan melihat data agendanya.

2. DFD Level 1
 Lanjut dari context diagram, alur dapat dijelaskan sebagai berikut,
semua user harus login terlebih dahulu. Admin dapat mengelola data user,
guru
mengelola data absensi siswa dan data agenda. Siswa dapat mengisi agenda
dan melihat absensinya. Kesiswaan dapat mengisi absensi siswa di sekolah.
Instruktur dapat mengisi agenda dan melihat absensi.
3. DFD Level 2

Lanjut dari dfd level 1, alurnya dapat dijelaskan seperti berikut, semua
user harus login terlebih dahulu. Admin dapat melakukan menginput dan
mengelola data user baru. Siswa dapat menginput data agenda. Guru dapat
menginput data absensi dan melihat data agenda. Kesiswaan dapat menginput
data absensi siswa sekolah. Instruktur dapat menginput data agenda siswa dan
mengedit data instruktur.
4. Class Diagram

Alur dari class diagram di atas dapat dijelaskan sebagai berikut, satu
level dapat memuat banyak user. Satu siswa memiliki satu user, satu guru
memiliki satu user, dan satu instruktur memiliki satu user. Satu guru memiliki
banyak siswa. Saya siswa memiliki satu agenda. Satu siswa memiliki banyak
absensi. Satu instruktur memiliki banyak siswa.
5. Use Case Diagram
 Alur use case diagram diatas dapat dijelaskan sebagai berikut. Semua
user harus melakukan login terlebih dahulu dengan cara memasukkan
username dan password. Admin dapat melakukan input user baru. Instruktur
dapat melakukan melihat dan mengisi agenda. Siswa dapat mengisi agenda,
dan melihat absensi. Guru dapat mengisi absensi siswa dan melihat agenda
siswa.
6. Sequence Diagram

Sequence diagram diatas dapat dijelaskan sebagai berikut. Semua user

dapat melakukan login terlebih dahulu. Admin dapat mengelola data user.
Siswa dapat mengisi agenda. Guru membuat absensi siswa. Instruktur
menerima agenda dan menilai agenda. Kesiswaan dapat membuat absensi
siswa di sekolah.

7. ERD
a. 0NF

b. 1NF

c. 2NF
d. 3NF

e. ERD

Alur ERD diatas dapat dijelaskan sebagai berikut. Siswa, guru, dan
instruktur memiliki sebuah user. Siswa memiliki dan mengelola data agenda,
dan instruktur dapat mengisi dan mengecek agenda siswa. Siswa memiliki
dan dapat melihat absensinya, dan guru dapat mengisi absensi siswa.
Kesiswaan dapat mengisi absensi siswa di sekolah.
8. Activity Diagram

Alur pada activity diagram diatas dapat dijelaskan sebagai berikut.

Setelah user melakukan login, user dapat melakukan aktivitas sesuai level
mereka. Admin dapat melakukan menginput dan mengelola data user. Siswa
dapat melihat absensi dan mengisi absensi. Instruktur menerima agenda siswa
dan menilai agenda. Guru mengisi absensi siswa. Kesiswaan dapat mengisi
absensi siswa di sekolah.
B. Implementasi
AKUN ADMIN
1. Menu Login
Ketika user mengakses website agenda pkl ini, maka halaman login
akan ditampilkan. Di halaman login ini user akan diminta memasukkan
username dan password. Di field password terdapat tombol hide / unhide
password yang diketik user. Terdapat juga checkbox untuk “Ingat saya”,
dimana browser akan menyimpan username dan password setelah user log
out. Terdapat captcha yang harus diisi oleh user agar dapat login. Setelah
mengisi username , password, dan captcha dengan benar maka user harus
mengklik tombol log in untuk masuk.

2. Menu Dashboard
Setelah user login, maka akan diarahkan ke menu dashboard. Jadi, di
menu dashboard ada 3 elemen penting dan juga ada di menu lain, yaitu menu
samping, menu atas, dan konten halaman. Di menu samping terdapat logo
perusahaan, lalu terdapat tombol toggle dark mode untuk mode gelap, dan
navigasi untuk ke menu-menu lain. Lalu di menu atas, terdapat tombol untuk
mengecilkan menu samping, dan di bagian kanan menu atas terdapat identitas
user yang login, jika diklik di bagian foto profil maka akan muncul halaman
kecil yang berisi tombol log out. Terakhir, di bagian konten halaman, terdapat
isi utama dari sebuah menu, di menu ini terdapat konten seperti sambutan
untuk user, galeri dan aturan sekolah.
3. Menu Data User
Di menu user, terdapat tabel yang dibuat dengan plugin dataTables
JQuery, yang ada fitur pencarian data, pagination, dan pengurutan data.
Semua tabel yang ada di website ini menggunakan dataTables JQuery.
Selanjutnya, di menu user terdapat data-data user, seperti username, email
dan level.

4. Menu Data Kesiswaan

Di menu ini terdapat tabel dengan data-data kesiswaan seperti nik,
nama, telepon dan lain-lain. Terdapat juga tombol tambah, edit, hapus, dan
import data kesiswaan. Juga terdapat menu samping dan menu atas, seperti
pada menu sebelumnya.
5. Tombol Tambah Data Kesiswaan
Setelah user mengklik tombol tambah, maka user akan diarahkan ke
menu tambah. Di menu ini terdapat form untuk mengisi data kesiswaan,
terdapat juga tempat upload gambar profil. Di bawah terdapat tombol cancel
dan submit, tombol cancel berfungsi untuk kembali ke halaman sebelumnya
dan submit untuk menambah data kesiswaan.

6. Tombol Edit Data Kesiswaan

Setelah user mengklik tombol edit, maka user akan diarahkan ke menu
edit. Di menu ini terdapat form untuk mengedit data kesiswaan yang sudah
terisi oleh data-data kesiswaan yang sudah ada sebelumnya, terdapat juga
tampilan dari foto lama. Di bawah terdapat tombol cancel dan submit, tombol
cancel berfungsi untuk kembali ke halaman sebelumnya, dan submit untuk
mengedit data kesiswaan.
7. Tombol Hapus Data Kesiswaan
Setelah mengklik tombol hapus, maka data kesiswaan akan terhapus
secara softdelete, yang artinya tidak benar-benar terhapus, tetapi hanya di
tidak ditampilkan saja datanya, karena data dari database tidak boleh langsung
dihapus.
8. Tombol Import Data Kesiswaan
Setelah mengklik tombol import, maka akan muncul 2 opsi, yang
pertama “download template” yang digunakan untuk mendownload file excel
yang berisi template untuk data kesiswaan, dan kedua “import data” yang
digunakan untuk memasukkan file excel yang berisi data kesiswaan, dan
menginput data tersebut ke database.

9. Menu Data Ketua Jurusan

Di menu ini terdapat tabel dengan data-data kajur seperti nik, nama,
telepon dan lain-lain. Terdapat juga tombol tambah, edit, hapus, dan import
data kajur. Juga terdapat menu samping dan menu atas, seperti pada menu
sebelumnya.
10. Tombol Tambah Data Ketua Jurusan
Setelah user mengklik tombol tambah, maka user akan diarahkan ke
menu tambah. Di menu ini terdapat form untuk mengisi data kajur, terdapat
juga tempat upload gambar profil. Di bawah terdapat tombol cancel dan
submit, tombol cancel berfungsi untuk kembali ke halaman sebelumnya dan
submit untuk menambah data kajur.

11. Tombol Edit Data Ketua Jurusan

Setelah user mengklik tombol edit, maka user akan diarahkan ke menu
edit. Di menu ini terdapat form untuk mengedit data kajur yang sudah terisi
oleh data-data kajur yang sudah ada sebelumnya, terdapat juga tampilan dari
foto lama. Di bawah terdapat tombol cancel dan submit, tombol cancel
berfungsi untuk kembali ke halaman sebelumnya, dan submit untuk mengedit
data kajur.
12. Tombol Hapus Data Ketua Jurusan
Setelah mengklik tombol hapus, maka data kajur akan terhapus secara
softdelete, yang artinya tidak benar-benar terhapus, tetapi hanya di tidak
ditampilkan saja datanya, karena data dari database tidak boleh langsung
dihapus.
13. Tombol Import Data Ketua Jurusan
Setelah mengklik tombol import, maka akan muncul 2 opsi, yang
pertama “download template” yang digunakan untuk mendownload file excel
yang berisi template untuk data kajur, dan kedua “import data” yang
digunakan untuk memasukkan file excel yang berisi data kajur, dan menginput
data tersebut ke database.

14. Menu Data Guru Pembimbing

Di menu ini terdapat tabel dengan data-data guru pembimbing seperti
nik, nama, telepon dan lain-lain. Terdapat juga tombol tambah, edit, hapus,
dan import data guru pembimbing. Juga terdapat menu samping dan menu
atas, seperti pada menu sebelumnya.
15. Tombol Tambah Data Guru Pembimbing
Setelah user mengklik tombol tambah, maka user akan diarahkan ke
menu tambah. Di menu ini terdapat form untuk mengisi data guru
pembimbing, terdapat juga tempat upload gambar profil. Di bawah terdapat
tombol cancel dan submit, tombol cancel berfungsi untuk kembali ke halaman
sebelumnya dan submit untuk menambah data guru pembimbing.

16. Tombol Edit Data Guru Pembimbing

Setelah user mengklik tombol edit, maka user akan diarahkan ke menu
edit. Di menu ini terdapat form untuk mengedit data guru pembimbing yang
sudah terisi oleh data-data guru pembimbing yang sudah ada sebelumnya,
terdapat juga tampilan dari foto lama. Di bawah terdapat tombol cancel dan
submit, tombol cancel berfungsi untuk kembali ke halaman sebelumnya, dan
submit untuk mengedit data guru pembimbing.
17. Tombol Hapus Data Guru Pembimbing
Setelah mengklik tombol hapus, maka data guru pembimbing akan
terhapus secara softdelete, yang artinya tidak benar-benar terhapus, tetapi
hanya di tidak ditampilkan saja datanya, karena data dari database tidak boleh
langsung dihapus.
18. Tombol Import Data Guru Pembimbing
Setelah mengklik tombol import, maka akan muncul 2 opsi, yang
pertama “download template” yang digunakan untuk mendownload file excel
yang berisi template untuk data guru pembimbing, dan kedua “import data”
yang digunakan untuk memasukkan file excel yang berisi data guru
pembimbing, dan menginput data tersebut ke database.

19. Menu Data Instruktur

Di menu ini terdapat tabel dengan data-data instruktur seperti nama,
nama perusahaan, telepon dan lain-lain. Terdapat juga tombol tambah, edit,
hapus, dan import data instruktur. Juga terdapat menu samping dan menu atas,
seperti pada menu sebelumnya.
20. Tombol Tambah Data Instruktur
Setelah user mengklik tombol tambah, maka user akan diarahkan ke
menu tambah. Di menu ini terdapat form untuk mengisi data instruktur,
terdapat juga tempat upload gambar profil. Di bawah terdapat tombol cancel
dan submit, tombol cancel berfungsi untuk kembali ke halaman sebelumnya
dan submit untuk menambah data instruktur.

21. Tombol Edit Data Instruktur

Setelah user mengklik tombol edit, maka user akan diarahkan ke menu
edit. Di menu ini terdapat form untuk mengedit data instruktur yang sudah
terisi oleh data-data instruktur yang sudah ada sebelumnya, terdapat juga
tampilan dari foto lama. Di bawah terdapat tombol cancel dan submit, tombol
cancel berfungsi untuk kembali ke halaman sebelumnya, dan submit untuk
mengedit data instruktur.
22. Tombol Hapus Data Instruktur
Setelah mengklik tombol hapus, maka data instruktur akan terhapus
secara softdelete, yang artinya tidak benar-benar terhapus, tetapi hanya di
tidak ditampilkan saja datanya, karena data dari database tidak boleh langsung
dihapus.
23. Tombol Import Data Instruktur
Setelah mengklik tombol import, maka akan muncul 2 opsi, yang
pertama “download template” yang digunakan untuk mendownload file excel
yang berisi template untuk data instruktur, dan kedua “import data” yang
digunakan untuk memasukkan file excel yang berisi data instruktur, dan
menginput data tersebut ke database.

24. Menu Data Siswa

Di menu ini terdapat tabel dengan data-data siswa seperti nis, nama,
jenis kelamin dan lain-lain. Terdapat juga tombol tambah, edit, hapus, dan
import data siswa. Juga terdapat menu samping dan menu atas, seperti pada
menu sebelumnya.
25. Tombol Tambah Data Siswa
Setelah user mengklik tombol tambah, maka user akan diarahkan ke
menu tambah. Di menu ini terdapat form untuk mengisi data siswa , terdapat
juga tempat upload gambar profil. Di bawah terdapat tombol cancel dan
submit, tombol cancel berfungsi untuk kembali ke halaman sebelumnya dan
submit untuk menambah data siswa .

26. Tombol Edit Data Siswa

Setelah user mengklik tombol edit, maka user akan diarahkan ke menu
edit. Di menu ini terdapat form untuk mengedit data siswa yang sudah terisi
oleh data-data siswa yang sudah ada sebelumnya, terdapat juga tampilan dari
foto lama. Di bawah terdapat tombol cancel dan submit, tombol cancel
berfungsi untuk kembali ke halaman sebelumnya, dan submit untuk mengedit
data siswa.
27. Tombol Hapus Data Siswa
Setelah mengklik tombol hapus, maka data siswa akan terhapus secara
softdelete, yang artinya tidak benar-benar terhapus, tetapi hanya di tidak
ditampilkan saja datanya, karena data dari database tidak boleh langsung
dihapus.
28. Tombol Import Data Siswa
Setelah mengklik tombol import, maka akan muncul 2 opsi, yang
pertama “download template” yang digunakan untuk mendownload file excel
yang berisi template untuk data siswa, dan kedua “import data” yang
digunakan untuk memasukkan file excel yang berisi data siswa, dan
menginput data tersebut ke database.

29. Menu Data Level

Di menu ini terdapat tabel dengan data level seperti nama level.
Terdapat juga tombol tambah, edit, dan hapus data level. Juga terdapat menu
samping dan menu atas, seperti pada menu sebelumnya.
30. Tombol Tambah Data Level
Setelah user mengklik tombol tambah, maka user akan diarahkan ke
menu tambah. Di menu ini terdapat form untuk mengisi data level. Di bawah
terdapat tombol cancel dan submit, tombol cancel berfungsi untuk kembali ke
halaman sebelumnya dan submit untuk menambah data level.

31. Tombol Edit Data Level

Setelah user mengklik tombol edit, maka user akan diarahkan ke menu
edit. Di menu ini terdapat form untuk mengedit data level yang sudah terisi
oleh data-data level yang sudah ada sebelumnya. Di bawah terdapat tombol
cancel dan submit, tombol cancel berfungsi untuk kembali ke halaman
sebelumnya, dan submit untuk mengedit data level.
32. Tombol Hapus Data Level
Setelah mengklik tombol hapus, maka data level akan terhapus secara
softdelete, yang artinya tidak benar-benar terhapus, tetapi hanya di tidak
ditampilkan saja datanya, karena data dari database tidak boleh langsung
dihapus.
 AKUN KESISWAAN

1. Menu Login
Ketika user mengakses website agenda pkl ini, maka halaman login
akan ditampilkan. Di halaman login ini user akan diminta memasukkan
username dan password. Di field password terdapat tombol hide / unhide
password yang diketik user. Terdapat juga checkbox untuk “Ingat saya”,
dimana browser akan menyimpan username dan password setelah user log
out. Terdapat captcha yang harus diisi oleh user agar dapat login. Setelah
mengisi username , password, dan captcha dengan benar maka user harus
mengklik tombol log in untuk masuk.

2. Menu Dashboard
Setelah user login, maka akan diarahkan ke menu dashboard. Jadi, di
menu dashboard ada 3 elemen penting dan juga ada di menu lain, yaitu menu
samping, menu atas, dan konten halaman. Di menu samping terdapat logo
perusahaan, lalu terdapat tombol toggle dark mode untuk mode gelap, dan
navigasi untuk ke menu-menu lain. Lalu di menu atas, terdapat tombol untuk
mengecilkan menu samping, dan di bagian kanan menu atas terdapat identitas
user yang login, jika diklik di bagian foto profil maka akan muncul halaman
kecil yang berisi tombol log out. Terakhir, di bagian konten halaman, terdapat
isi utama dari sebuah menu, di menu ini terdapat konten seperti sambutan
untuk user, galeri dan aturan sekolah.
3. Menu Data Absensi Sekolah
Di menu ini terdapat 3 tombol untuk memilih jurusan untuk melihat
data absensi dari seluruh siswa pada jurusan tersebut.

Setelah mengklik salah satu jurusan maka muncul halaman seperti

dibawah ini. Ini adalah halaman absensi dari seluruh siswa di jurusan yang
dipilih sebelumnya. Di halaman ini terdapat tombol absensi dan tombol detail.

4. Tombol Tambah Absensi Sekolah (Seluruh Siswa)

Setelah user mengklik tombol absensi, maka user akan diarahkan ke
menu absensi sekolah. Di menu ini terdapat form untuk mengisi data absensi
dari seluruh siswa sesuai dengan jurusan yang dipilih sebelumnya. Di bawah
terdapat tombol cancel dan submit, tombol cancel berfungsi untuk kembali ke
 halaman sebelumnya dan submit untuk menambah data absensi seluruh siswa
sesuai dengan jurusan yang telah dipilih sebelumnya.

5. Tombol Detail Absensi Sekolah

Di menu ini terdapat tabel dengan data-data absensi seorang siswa
seperti nama, keterangan dan lain-lain. Terdapat juga tombol tambah, edit, dan
hapus. Juga terdapat menu samping dan menu atas, seperti pada menu
sebelumnya.

6. Tombol Tambah Absensi Sekolah (Perorangan)

Setelah user mengklik tombol tambah, maka user akan diarahkan ke
menu tambah absensi. Di menu ini terdapat form untuk mengisi kehadiran
seorang siswa, dan tanggal kehadiran otomatis sesuai tanggal saat data di
submit. Di bawah terdapat tombol cancel dan submit, tombol cancel berfungsi
untuk kembali ke halaman sebelumnya dan submit untuk menambah data
absensi.
7. Tombol Edit Absensi Sekolah (Perorangan)
Setelah user mengklik tombol edit, maka user akan diarahkan ke menu
edit absensi. Di menu ini terdapat form untuk mengedit data absensi siswa
yang sudah terisi oleh data-data absensi siswa yang sudah ada sebelumnya. Di
bawah terdapat tombol cancel dan submit, tombol cancel berfungsi untuk
kembali ke halaman sebelumnya, dan submit untuk mengedit data absensi
siswa.

8. Tombol Hapus Absensi Sekolah (Perorangan)

Setelah mengklik tombol hapus, maka data absensi siswa akan terhapus
secara softdelete, yang artinya tidak benar-benar terhapus, tetapi hanya di
tidak ditampilkan saja datanya, karena data dari database tidak boleh langsung
dihapus.
9. Menu Print Absensi Sekolah
Di menu ini terdapat 3 tombol untuk memilih jurusan untuk mengprint
data absensi dari seluruh siswa pada jurusan tersebut.
 Setelah mengklik salah satu jurusan maka muncul halaman seperti
dibawah ini. Ini adalah halaman print absensi dari jurusan yang telah dipilih
sebelumnya. Disini terdapat 3 jenis print, yaitu windows print, print excel, dan
print PDF. Cara mengprint sebuah laporan absensi itu pertama, memilih nama
siswa (hanya akan menampilkan nama siswa yang sesuai dengan jurusan yang
telah diklik sebelumnya), kedua pilih tanggal awal dan akhir untuk filter nya,
dan ketiga klik tombol print. Maka data akan keluar dan bisa di download atau
di print langsung.
 AKUN KETUA JURUSAN

1. Menu Login
Ketika user mengakses website agenda pkl ini, maka halaman login
akan ditampilkan. Di halaman login ini user akan diminta memasukkan
username dan password. Di field password terdapat tombol hide / unhide
password yang diketik user. Terdapat juga checkbox untuk “Ingat saya”,
dimana browser akan menyimpan username dan password setelah user log
out. Terdapat captcha yang harus diisi oleh user agar dapat login. Setelah
mengisi username , password, dan captcha dengan benar maka user harus
mengklik tombol log in untuk masuk.

2. Menu Dashboard
Setelah user login, maka akan diarahkan ke menu dashboard. Jadi, di
menu dashboard ada 3 elemen penting dan juga ada di menu lain, yaitu menu
samping, menu atas, dan konten halaman. Di menu samping terdapat logo
perusahaan, lalu terdapat tombol toggle dark mode untuk mode gelap, dan
navigasi untuk ke menu-menu lain. Lalu di menu atas, terdapat tombol untuk
mengecilkan menu samping, dan di bagian kanan menu atas terdapat identitas
user yang login, jika diklik di bagian foto profil maka akan muncul halaman
kecil yang berisi tombol log out. Terakhir, di bagian konten halaman, terdapat
isi utama dari sebuah menu, di menu ini terdapat konten seperti sambutan
untuk user, galeri dan aturan sekolah.
3. Menu Data Absensi Sekolah
Di menu ini terdapat sebuah tombol untuk memilih jurusan untuk
melihat data absensi sekolah dari seluruh siswa sesuai jurusan dari ketua
jurusan.

Setelah mengklik jurusan maka muncul halaman seperti dibawah ini.

Ini adalah halaman absensi sekolah dari seluruh siswa di jurusan yang dipilih
sebelumnya. Di halaman ini terdapat tombol detail.

4. Tombol Detail Absensi Sekolah

Di menu ini terdapat tabel dengan data-data absensi sekolah dari
seorang siswa seperti nama, keterangan dan lain-lain. Terdapat juga tombol
 back untuk kembali ke halaman sebelumnya. Juga terdapat menu samping dan
menu atas, seperti pada menu sebelumnya.

5. Menu Print Absensi Sekolah

Setelah mengklik salah satu jurusan maka muncul halaman seperti
dibawah ini. Ini adalah halaman print absensi dari jurusan kajur yang login.
Disini terdapat 3 jenis print, yaitu windows print, print excel, dan print PDF.
Cara mengprint sebuah laporan absensi itu pertama, memilih nama siswa
(hanya akan menampilkan nama siswa yang sesuai dengan jurusan yang telah
diklik sebelumnya), kedua pilih tanggal awal dan akhir untuk filter nya, dan
ketiga klik tombol print. Maka data akan keluar dan bisa di download atau di
print langsung.

6. Menu Data Agenda

Di menu ini terdapat sebuah tombol untuk memilih jurusan untuk
melihat data agenda dari seluruh siswa sesuai jurusan dari ketua jurusan.
 Setelah mengklik jurusan maka muncul halaman seperti dibawah ini.
Ini adalah halaman agenda dari seluruh siswa di jurusan yang dipilih
sebelumnya. Di halaman ini terdapat tombol detail.

7. Tombol Detail Data Agenda

Di menu ini terdapat tabel dengan data-data agenda dari seorang siswa
seperti nama, tanggal dan lain-lain. Terdapat tombol info untuk melihat isi
agenda, dan terdapat status di sampingnya yang menandakan belum atau
sudah direview agenda tersebut. Juga terdapat menu samping dan menu atas,
seperti pada menu sebelumnya.
8. Menu Print Agenda
Ini adalah halaman print agenda siswa berdasarkan jurusan kajur yang
login. Disini hanya terdapat print PDF. Cara mengprint sebuah agenda itu
pertama, memilih nama siswa (hanya akan menampilkan nama siswa yang
sesuai dengan jurusan yang dimiliki kajur), kedua pilih tanggal awal dan akhir
untuk filter nya, dan ketiga klik tombol print. Maka data akan keluar dan bisa
di download atau di print langsung.

9. Menu Data Siswa

Di menu ini terdapat tabel dengan data-data siswa seperti nama,
jurusan, nama PT dan lain-lain. Terdapat juga tombol edit yang berfungsi
untuk mengedit guru dan instruktur dari siswa yang dipilih. Juga terdapat
menu samping dan menu atas, seperti pada menu sebelumnya.

10. Menu Data Instruktur

Di menu ini terdapat tabel dengan data-data instruktur seperti nama,
nama perusahaan, telepon dan lain-lain. Terdapat juga tombol tambah, edit,
hapus, dan import data instruktur. Juga terdapat menu samping dan menu atas,
seperti pada menu sebelumnya.
11. Tombol Tambah Data Instruktur
Setelah user mengklik tombol tambah, maka user akan diarahkan ke
menu tambah. Di menu ini terdapat form untuk mengisi data instruktur,
terdapat juga tempat upload gambar profil. Di bawah terdapat tombol cancel
dan submit, tombol cancel berfungsi untuk kembali ke halaman sebelumnya
dan submit untuk menambah data instruktur.

12. Tombol Edit Data Instruktur

Setelah user mengklik tombol edit, maka user akan diarahkan ke menu
edit. Di menu ini terdapat form untuk mengedit data instruktur yang sudah
terisi oleh data-data instruktur yang sudah ada sebelumnya, terdapat juga
tampilan dari foto lama. Di bawah terdapat tombol cancel dan submit, tombol
cancel berfungsi untuk kembali ke halaman sebelumnya, dan submit untuk
mengedit data instruktur.
13. Tombol Hapus Data Instruktur
Setelah mengklik tombol hapus, maka data instruktur akan terhapus
secara softdelete, yang artinya tidak benar-benar terhapus, tetapi hanya di
tidak ditampilkan saja datanya, karena data dari database tidak boleh langsung
dihapus.
14. Tombol Import Data Instruktur
Setelah mengklik tombol import, maka akan muncul 2 opsi, yang
pertama “download template” yang digunakan untuk mendownload file excel
yang berisi template untuk data instruktur, dan kedua “import data” yang
digunakan untuk memasukkan file excel yang berisi data instruktur, dan
menginput data tersebut ke database.
 AKUN GURU PEMBIMBING

1. Menu Login
Ketika user mengakses website agenda pkl ini, maka halaman login
akan ditampilkan. Di halaman login ini user akan diminta memasukkan
username dan password. Di field password terdapat tombol hide / unhide
password yang diketik user. Terdapat juga checkbox untuk “Ingat saya”,
dimana browser akan menyimpan username dan password setelah user log
out. Terdapat captcha yang harus diisi oleh user agar dapat login. Setelah
mengisi username , password, dan captcha dengan benar maka user harus
mengklik tombol log in untuk masuk.

2. Menu Dashboard
Setelah user login, maka akan diarahkan ke menu dashboard. Jadi, di
menu dashboard ada 3 elemen penting dan juga ada di menu lain, yaitu menu
samping, menu atas, dan konten halaman. Di menu samping terdapat logo
perusahaan, lalu terdapat tombol toggle dark mode untuk mode gelap, dan
navigasi untuk ke menu-menu lain. Lalu di menu atas, terdapat tombol untuk
mengecilkan menu samping, dan di bagian kanan menu atas terdapat identitas
user yang login, jika diklik di bagian foto profil maka akan muncul halaman
kecil yang berisi tombol log out. Terakhir, di bagian konten halaman, terdapat
isi utama dari sebuah menu, di menu ini terdapat konten seperti sambutan
untuk user, galeri dan aturan sekolah.
3. Menu Data Absensi Sekolah
Setelah mengklik tombol data absensi sekolah maka muncul halaman
seperti dibawah ini. Ini adalah halaman absensi sekolah dari siswa yang
dibimbing oleh guru tersebut, dan guru tersebut tidak bisa melihat data absensi
siswa yang tidak dibimbingnya. Di halaman ini terdapat tombol detail.

4. Tombol Detail Absensi Sekolah

Di menu ini terdapat tabel dengan data-data absensi siswa seperti nama,
keterangan dan lain-lain. Terdapat juga tombol back untuk kembali ke
halaman sebelumnya. Juga terdapat menu samping dan menu atas, seperti
pada menu sebelumnya.
5. Menu Print Absensi Sekolah
Ini adalah halaman print absensi siswa. Disini terdapat 3 jenis print,
yaitu windows print, print excel, dan print PDF. Cara mengprint sebuah
laporan absensi itu pertama, memilih nama siswa (hanya akan menampilkan
nama siswa yang dibimbing oleh guru berkaitan), kedua pilih tanggal awal dan
akhir untuk filter nya, dan ketiga klik tombol print. Maka data akan keluar dan
bisa di download atau di print langsung.

6. Menu Data Agenda

Setelah mengklik tombol data agenda maka muncul halaman seperti
dibawah ini. Ini adalah halaman agenda dari siswa yang dibimbing oleh guru
tersebut, dan guru tersebut tidak bisa melihat data absensi siswa yang tidak
dibimbingnya. Di halaman ini terdapat tombol detail.

7. Tombol Detail Data Agenda

Di menu ini terdapat tabel dengan data-data agenda dari seorang siswa
seperti nama, tanggal dan lain-lain. Terdapat tombol info untuk melihat isi
agenda, dan terdapat status di sampingnya yang menandakan belum atau
sudah direview dan diapprove agenda tersebut. Tombol dengan logo “jempol”
 itu untuk approve atau menyetujui agenda siswa. Juga terdapat menu samping
dan menu atas, seperti pada menu sebelumnya.

8. Menu Print Data Agenda

Ini adalah halaman print agenda siswa berdasarkan yang dibimbing oleh
guru. Disini hanya terdapat print PDF. Cara mengprint sebuah agenda itu
pertama, memilih nama siswa (hanya akan menampilkan nama siswa yang
sesuai dengan jurusan yang dimiliki kajur), kedua pilih tanggal awal dan akhir
untuk filter nya, dan ketiga klik tombol print. Maka data akan keluar dan bisa
di download atau di print langsung.
 AKUN INSTRUKTUR

1. Menu Login
Ketika user mengakses website agenda pkl ini, maka halaman login
akan ditampilkan. Di halaman login ini user akan diminta memasukkan
username dan password. Di field password terdapat tombol hide / unhide
password yang diketik user. Terdapat juga checkbox untuk “Ingat saya”,
dimana browser akan menyimpan username dan password setelah user log
out. Terdapat captcha yang harus diisi oleh user agar dapat login. Setelah
mengisi username , password, dan captcha dengan benar maka user harus
mengklik tombol log in untuk masuk.

2. Menu Dashboard
Setelah user login, maka akan diarahkan ke menu dashboard. Jadi, di
menu dashboard ada 3 elemen penting dan juga ada di menu lain, yaitu menu
samping, menu atas, dan konten halaman. Di menu samping terdapat logo
perusahaan, lalu terdapat tombol toggle dark mode untuk mode gelap, dan
navigasi untuk ke menu-menu lain. Lalu di menu atas, terdapat tombol untuk
mengecilkan menu samping, dan di bagian kanan menu atas terdapat identitas
user yang login, jika diklik di bagian foto profil maka akan muncul halaman
kecil yang berisi tombol log out. Terakhir, di bagian konten halaman, terdapat
isi utama dari sebuah menu, di menu ini terdapat konten seperti sambutan
untuk user, galeri dan aturan sekolah.
3. Menu Data Absensi Kantor
Setelah mengklik tombol data absensi kantor maka muncul halaman
seperti dibawah ini. Ini adalah halaman absensi kantor dari siswa yang pkl di
perusahaan instruktur. Di halaman ini terdapat tombol detail.

4. Tombol Detail Absensi Kantor

Di menu ini terdapat tabel dengan data-data absensi kantor dari seorang
siswa seperti nama, keterangan dan lain-lain. Terdapat juga tombol tambah
untuk menambah data absensi dikantor, edit untuk mengedit data absensi, dan
delete untuk menghapus data absensi secara softdelete. Juga terdapat menu
samping dan menu atas, seperti pada menu sebelumnya.
5. Menu Print Absensi Kantor
Ini adalah halaman print absensi kantor. Disini terdapat 3 jenis print,
yaitu windows print, print excel, dan print PDF. Cara mengprint sebuah
laporan absensi itu pertama, memilih nama siswa (hanya akan menampilkan
nama siswa yang pkl di perusahaan dari instrukturnya), kedua pilih tanggal
awal dan akhir untuk filter nya, dan ketiga klik tombol print. Maka data akan
keluar dan bisa di download atau di print langsung.

6. Menu Data Agenda

Setelah mengklik tombol data agenda maka muncul halaman seperti
dibawah ini. Ini adalah halaman agenda dari siswa yang pkl di perusahaan
instrukturnya. Di halaman ini terdapat tombol detail.

7. Tombol Detail Data Agenda

Di menu ini terdapat tabel dengan data-data agenda dari seorang siswa
seperti nama, tanggal dan lain-lain. Terdapat tombol info untuk melihat isi
agenda, dan terdapat status di sampingnya yang menandakan belum atau
sudah direview agenda tersebut. Tombol back digunakan untuk kembali ke
halaman sebelumnya. Tombol review untuk menilai agenda siswa. Juga
terdapat menu samping dan menu atas, seperti pada menu sebelumnya.
8. Tombol Review Agenda
Setelah user mengklik tombol review, maka user akan diarahkan ke
menu review agenda. Di menu ini terdapat form untuk mengisi penilaian
harian dari agenda siswa. Di bawah terdapat tombol cancel dan submit,
tombol cancel berfungsi untuk kembali ke halaman sebelumnya dan submit
untuk mengisi penilaian harian dari agenda siswa.

9. Menu Print Agenda

Ini adalah halaman print agenda yang pkl di perusahaan instrukturnya.
Disini hanya terdapat print PDF. Cara mengprint sebuah agenda itu pertama,
memilih nama siswa (hanya akan menampilkan nama siswa pkl di perusahaan
instrukturnya), kedua pilih tanggal awal dan akhir untuk filter nya, dan ketiga
klik tombol print. Maka data akan keluar dan bisa di download atau di print
langsung.
 AKUN SISWA
1. Menu Login
Ketika user mengakses website agenda pkl ini, maka halaman login
akan ditampilkan. Di halaman login ini user akan diminta memasukkan
username dan password. Di field password terdapat tombol hide / unhide
password yang diketik user. Terdapat juga checkbox untuk “Ingat saya”,
dimana browser akan menyimpan username dan password setelah user log
out. Terdapat captcha yang harus diisi oleh user agar dapat login. Setelah
mengisi username , password, dan captcha dengan benar maka user harus
mengklik tombol log in untuk masuk.

2. Menu Dashboard
Setelah user login, maka akan diarahkan ke menu dashboard. Jadi, di
menu dashboard ada 3 elemen penting dan juga ada di menu lain, yaitu menu
samping, menu atas, dan konten halaman. Di menu samping terdapat logo
perusahaan, lalu terdapat tombol toggle dark mode untuk mode gelap, dan
navigasi untuk ke menu-menu lain. Lalu di menu atas, terdapat tombol untuk
mengecilkan menu samping, dan di bagian kanan menu atas terdapat identitas
user yang login, jika diklik di bagian foto profil maka akan muncul halaman
kecil yang berisi tombol log out. Terakhir, di bagian konten halaman, terdapat
isi utama dari sebuah menu, di menu ini terdapat konten seperti sambutan
untuk user, galeri dan aturan sekolah.
3. Menu Data Absensi Sekolah
Di menu ini terdapat tabel dengan data-data absensi sekolah siswa
seperti nama, keterangan dan lain-lain. Terdapat juga tombol back untuk
kembali ke halaman sebelumnya. Juga terdapat menu samping dan menu atas,
seperti pada menu sebelumnya.

4. Menu Data Absensi Kantor

Di menu ini terdapat tabel dengan data-data absensi kantor siswa seperti
nama, keterangan dan lain-lain. Terdapat juga tombol back untuk kembali ke
halaman sebelumnya. Juga terdapat menu samping dan menu atas, seperti
pada menu sebelumnya.
5. Menu Data Agenda
Di menu ini terdapat tabel dengan data-data agenda dari seorang siswa
seperti nama, tanggal dan lain-lain. Terdapat tombol info untuk melihat isi
agenda yang hanya muncul ketika agenda sudah di review oleh instruktur, dan
terdapat status di sampingnya yang menandakan belum atau sudah direview
dan diapprove agenda tersebut. Tombol tambah digunakan untuk menambah
agenda baru sesuai tanggal saat tombol tersebut di klik. Juga terdapat menu
samping dan menu atas, seperti pada menu sebelumnya.

6. Tombol Tambah Agenda

Akan muncul sebuah agenda baru ketika tombol tambah agenda di klik,
dan siswa dapat mengisi agenda tersebut dengan tombol abu-abu, dan siswa
dapat mengklik tombol kuning atau log off saat pulang dari tempat pkl untuk
menginput jam keluar di agenda, dan setelah tombol log off di klik maka
tombol edit akan menghilang yang menyisakan status dari agenda tersebut.
Sedangkan untuk jam masuk sudah otomatis terinput ketika siswa mengklik
tombol tambah.
7. Tombol Edit Agenda
Siswa dapat mengisi agenda di halaman ini yang berisi tentang rencana
pekerjaan, realisasi pekerjaan, penugasan khusus, dan penemuan masalah.
Semua disatukan dalam 1 form, dan siswa dapat mengklik tombol next dan
previous untuk navigasi form di halaman ini. Dan jika sudah ke halaman
terakhir maka akan muncul tombol submit yang berfungsi untuk mengirim
data agenda ke database.