BAB III

ANALISA DAN PERANCANGAN

3.1 Analisa Sistem Berjalan

Analisa sistem adalah pengidentifikasian dan evaluasi dari suatu sistem yang
sedang berjalan dengan tujuan untuk mengetahui lebih jelas bagaimana cara kerja
sistem tersebut dan masalah yang dihadapi untuk dapat dijadikan landasan usulan
perancangan analisa sistem yang akan dilakukan. Sistem yang sedang berjalan di
SMK Yapan Indonesia sebagai berikut :

a) Proses Pengumpulan Data Nilai Siswa

Setiap guru mencatat nilai tugas harian, UTS dan UAS ke dalam buku
catatan nilai guru. Kemudian, guru akan menyerahkan nilai kepada
bagian Kurikulum untuk nantinya dilakukan rekap nilai. Setelah
melakukan perekapan nilai oleh bagian Kurikulum, rekap nilai akan
diberikan kepada masing-masing wali kelas untuk dilakukan proses
penginputan nilai siswa kedalam format rapor.

b) Proses Penginputan Nilai Siswa oleh Wali Kelas

Setiap wali kelas yang telah mendapat hasil rekap nilai siswanya, akan
melakukan penginputan nilai masing-masing siswa kedalam ledger rapor
menggunakan Microsoft Excel. Kemudian, wali kelas akan mencetak data
masing-masing murid ke dalam format rapor yang ada. Hasil format
inilah yang nantinya akan dijadikan laporan capaian kompetensi akhir
semester para siswa/i. Rapor yang sudah dicetak ini akan dilaporkan
kepada Kepala Sekolah terlebih dahulu untuk mendapatkan tanda tangan
dan cap stempel sekolah sebelum dibagikan kepada orang tua/wali murid.

27
 28

Adapun flowchart proses pengumpulan data pada sistem yang sedang berjalan
yaitu:

Gambar 3. 1 Flowchart sistem berjalan di SMK Yapan Indonesia

 29

3.2 Sistem yang Diusulkan

Berdasarkan analisis yang telah dilakukan pada sistem yang telah berjalan,
penulis mengusulkan perancangan sistem sebagai berikut:

mulai

selesai

Gambar 3. 2 Activity Diagram yang diusulkan

 30

Activity Diagram yang diusulkan di atas, meliputi:

a) Dalam sistem yang diusulkan, Admin dapat melakukan pengolahan data

yang meliputi; Kelola Data Master (data mata pelajaran, data kelas dan
data beban ajar guru) dan Kelola Data User (data siswa dan data guru).
b) Sedangkan user Guru (dalam hal ini sebagai guru mata pelajaran)
bertugas mengelola nilai siswa/i sesuai mata pelajaran yang di ampu
(nilai pengetahuan, nilai keterampilan, nilai sikap) sedangkan guru yang
juga bertugas sebagai wali kelas mempunyai akses tambahan dalam
menginput nilai yaitu nilai absensi dan nilai ekstra lainnya. Kemudian
nilai-nilai tersebut nantinya akan disimpan oleh sistem ke dalam database.
c) Setelah data disimpan pada database, data akan ditampilkan dalam bentuk
Ledger sebagai laporan admin dan kepala sekolah. Sedangkan user (orang
tua/siswa) akan dapat melihat hasil nilai dalam bentuk format rapor akhir
semester dengan cara masing-masing mengakses halaman web e-rapor
tersebut.

3.3 Perancangan Sistem

Perancangan basis data bertujuan untuk memperoleh basis data yang efisien
dalam penggunaan ruang penyimpanan, cepat dalam pengaksesan dan mudah
dalam memanipulasi data serta bebas dari redudansi data. Pada tahap ini akan
merancang basis data yang di butuhkan dalam sistem yang akan dibuat dengan
menggunakan Entity Relational Diagram (ERD) dan Logical Record Structure
(LRS).

3.3.1 ERD (Entity Relationship Diagram)

Berikut gambar 3.3 menunjukan hubungan antar tabel yang dibuat
dalam database sistem yang diusulkan:
 31

ubah semua pengubung ke kata dasar

Gambar 3. 3 ERD e-rapor usulan

3.3.2 Transformasi ERD ke LRS

Gambar 3.4 adalah transformasi ERD menjadi LRS pada sistem
pengolahan e-rapor:
 32

Gambar 3. 4 Transormasi ERD ke LRS

3.3.3 LRS (Logical Record Structure)

Gambar 3.5 menampilkan bentuk LRS pada sistem pengelohan e-
rapor usulan:
 33

Gambar 3. 5 LRS sistem e-rapor usulan

3.3.4 Spesifikasi Basis Data

Spesifikasi basis data menggambarkan struktur data fisik pada suatu
sistem atau penyajian dalam penyimpanan data yang dilakukan dalam aplikasi
yang dibuat. Berikut penjelasan secara detail tentang masing masing basis
data yang digunakan dalam sistem e-rapor yang diusulkan:
 34

a) Tabel Siswa

Nama Tabel : siswa

Isi tabel : Data siswa
Primary Key : nis
Foreign Key : id_kelas

Tabel 3. 1 Tabel Siswa

No. Nama Field Tipe Data Keterangan
1 *nis Varchar (10) Nomor Induk Siswa
2 **id_kelas Int (10) ID kelas
3 nama Varchar (50) Nama siswa
4 gender Varchar (10) Jenis kelamin
5 nama_ibu Varchar (50) Nama ibu siswa
6 alamat Varchar (100) Alamat siswa
7 tahun_mulai Varchar (9) Tahun mulai
8 ttl Date Tanggal lahir
9 nomor Varchar (14) Nomor handphone
10 email Varchar (50) E-mail siswa
11 password Varchar (10) Password user
Menyimpan token
12 remember_token Varchar (100)
user
13 created_at Timestamp Kapan data dibuat
14 updated_at Timestamp Kapan data diupdate

b) Tabel Guru

Nama Tabel : guru

Isi tabel : Data guru
Primary Key : kode_guru
Foreign Key :-
 35

Tabel 3. 2 Tabel Guru

No. Nama Field Tipe Data Keterangan
1 *kode_guru Int (10) Kode guru
Nomor Unik
2 nuptk Varchar (16) Pendidik dan Tenaga
Kependidikan
3 nama Varchar (50) Nama guru
4 gender Varchar (10) Jenis Kelamin
5 alamat Varchar (100) Alamat guru
6 tgl_lahir Date Tanggal lahir
7 nomor Varchar (14) Nomor handphone
8 email Varchar (50) E-mail guru
9 status_pegawai Varchar (30) Status kepegawaian
Jenis Penelitian
10 jenis_ptk Varchar (40)
Tindakan Kelas
11 gelar Varchar (20) Gelar guru
12 sertifikasi Varchar (30) Sertfikasi guru
13 password Varchar (10) Password user
Menyimpan token
14 remember_token Varchar (255)
user
15 created_at Timestamp Kapan data dibuat
16 updated_at Timestamp Kapan data diupdate

c) Tabel Nilai

Nama Tabel : nilai

Isi tabel : Data nilai siswa
Primary Key : id_nilai
Foreign Key : id_mapel, nis
 36

Tabel 3. 3 Tabel Nilai

No. Nama Field Tipe Data Keterangan
1 *id_nilai Int (10) ID nilai siswa
2 **id_mapel Int (10) ID mata pelajaran
3 **nis Varchar (10) Nomor Induk Siswa
Tahun ajaran yang
4 tahun_ajaran Varchar (10)
sedang berjalan
5 semester Decimal (3,0) Semester
Decimal (3,0) Nilai Ujian Tengah
6 UTS
Semester
Decimal (3,0) Nilai Ujian Akhir
7 UAS
Semester
8 pengetahuan Decimal (3,0) Nilai pengetahuan
9 keterampilan Decimal (3,0) Nilai keterampilan
10 sikap Decimal (3,0) Nilai sikap
11 jumlah Decimal (3,0) Jumlah nilai siswa
12 created_at Timestamp Tahun ajaran
13 updated_at Timestamp Kapan data dibuat

d) Tabel Tugas

Nama Tabel : tugas

Isi tabel : Data nilai tugas
Primary Key : id_tugas
Foreign Key : id_mapel, nis

Tabel 3. 4 Tabel Tugas

No. Nama Field Tipe Data Keterangan
1 *id_tugas Int (10) ID tugas siswa
 37

Tabel 3. 5 Tabel Tugas (Lanjutan)

2 **id_mapel Int (10) ID mata pelajaran
3 **nis Varchar (10) Nomor Induk Siswa
4 nilai Decimal (3,0) Nilai tugas siswa
5 keterangan Varchar (30) Keterangan tugas
6 semester Decimal (3,0) Semester
Tahun ajaran yang
7 tahun_ajaran Varchar (10)
sedang berjalan
8 created_at Timestamp Kapan data dibuat
9 updated_at Timestamp Kapan data diupdate

e) Tabel Absensi

Nama Tabel : absensi

Isi tabel : Data absensi siswa
Primary Key : id_absensi
Foreign Key : nis

Tabel 3. 6 Tabel Absensi

No. Nama Field Tipe Data Keterangan
1 *id_absensi Int (10) ID absensi
2 **nis Varchar (10) Nomor Induk Siswa
3 semester Decimal (3,0) Semester
Keterangan sakit
4 sakit Varchar (3)
siswa
Keterangan izin
5 izin Varchar (3)
siswa
Keterangan alfa
6 alfa Varchar (3)
siswa
7 created_at Timestamp Kapan data dibuat
 38

Tabel 3. 7 Tabel Absensi (Lanjutan)

8 updated_at Timestamp Kapan data diupdate

f) Tabel Ekstrakurikuler

Nama Tabel : ekstrakurikuler

Isi tabel : Data nilai ekstrakurikuler siswa
Primary Key : id_eks
Foreign Key : nis

Tabel 3. 8 Tabel Ekstrakurikuler

No. Nama Field Tipe Data Keterangan
1 *id_eks Int (10) ID ekstrakurikuler
2 **nis Varchar (10) Nomor Induk Siswa
Nama kegiatan
3 nama_eks Varchar (50)
ekstrakurikuler
4 semester Decimal (3,0) Semester
Predikat dalam
5 predikat Decimal (3,0)
ekstrakurikuler
6 created_at Timestamp Kapan data dibuat
7 updated_at Timestamp Kapan data diupdate

g) Tabel Rombel

Nama Tabel : rombel

Isi tabel : Data rombel
Primary Key : kode_rombel
Foreign Key :-
 39

Tabel 3. 9 Tabel Rombel

No. Nama Field Tipe Data Keterangan
1 *kode_rombel Int (10) ID rombel
2 nama_rombel Varchar (10) Nama rombel
4 jurusan Varchar (30) Jurusan
Kategori mata
5 kategori_mapel Text
pelajaran
6 created_at Timestamp Kapan data dibuat
7 updated_at Timestamp Kapan data diupdate

h) Tabel Kelas

Nama Tabel : kelas

Isi tabel : Data kelas
Primary Key : id_kelas
Foreign Key : kode_rombel, kode_guru

Tabel 3. 10 Tabel Kelas

No. Nama Field Tipe Data Keterangan
1 *id_kelas Int (10) ID kelas
2 **kode_rombel Int (10) ID rombel
3 **kode_guru Int (10) Kode guru
4 nama_kelas Varchar (15) Nama kelas
5 created_at Timestamp Kapan data dibuat
6 updated_at Timestamp Kapan data diupdate

i) Tabel Beban Ajar Guru

Nama Tabel : beban_ajar

Isi tabel : Data beban ajar pada guru
Primary Key : id_ajar
 40

Foreign Key : kode_guru, id_mapel, id_kelas

Tabel 3. 11 Tabel Beban Ajar Guru

No. Nama Field Tipe Data Keterangan
1 *id_ajar Int (10) ID beban ajar
Kode guru dalam
2 **kode_guru Int (10)
mengajar
3 **id_mapel Int (10) ID mata pelajaran
4 **id_kelas Int (10) ID kelas
5 created_at Timestamp Kapan data dibuat
6 updated_at Timestamp Kapan data diupdate

j) Tabel Mapel (Mata Pelajaran)

Nama Tabel : mapel

Isi tabel : Data mata pelajaran
Primary Key : id_mapel
Foreign Key :-

Tabel 3. 12 Tabel Mata Pelajaran

No. Nama Field Tipe Data Keterangan
1 *id_mapel Int (10) ID mata pelajaran
2 nama_mapel Varchar (50) Nama mata pelajaran
Kriteria Ketuntasan
3 KKM Varchar (3) Minimal pada mata
pelajaran
4 created_at Timestamp Kapan data dibuat
5 updated_at Timestamp Kapan data diupdate
 41

k) Tabel Kepribadian

Nama Tabel : mapel

Isi tabel : Data mata pelajaran
Primary Key : id_kepribadian
Foreign Key : nis

Tabel 3. 13 Tabel Kepribadian

No. Nama Field Tipe Data Keterangan
1 *id_kepribadian Int (10) ID Kepribadian
2 **nis Varchar (10) Nomor Induk Siswa
Tahun ajaran yang
3 tahun_ajaran Varchar (10)
sedang berlangsung
4 semester Decimal (3,0) Semester
5 nilai_kerajinan Decimal (3,0) Nilai kerajinan
6 nilai_kelakuan Decimal (3,0) Nilai kepribadian
7 nilai_kerapihan Decimal (3,0) Nilai kerapihan
8 catatan Varchar (30) Catatan untuk siswa
9 created_at Timestamp Kapan data dibuat
10 updated_at Timestamp Kapan data diupdate

3.3.5 Use Case Diagram

Use Case Diagram membantu menentukan fungsi dan fitur dari
perangkat lunak. Gambar 3.6 di bawah ini menunjukan bagaimana peran user
dalam sistem e-rapor yang disuulkan:
 42

Gambar 3. 6 Use Case Diagram e-rapor usulan

3.3.6 Activity Diagram

Activity diagram menggambarkan workflow (aliran kerja atau aktivitas
dari sebuah sistem atau proses bisnis atau menu yang ada pada seperangkat
lunak. Berikut activity diagram usulan pada sistem e-rapor:
 43

a) Activity Diagram Login

Activity diagram terkait login user memiliki alur proses seperti gambar di
bawah ini:

mulai

kembali kesini atau ke halaman login?

selesai

Gambar 3. 7 Activity Diagram Login

Sebelum masuk sistem pengolahan e-rapor, user diharuskan untuk login

terlebih dahulu dengan memasukan username dan password, kemudian sistem
akan memvalidasi username dan password. Jiika valid, sistem akan
menampilkan halaman utama masing-masing user, jika tidak valid maka
sistem akan menampilkan pesan kesalahan dan meminta user melakukan
login kembali.
 44

b) Activity Diagram Kelola Data (Admin)

Activity diagram menjelaskan aliran kerja terkait menu Kelola Data yang
digambarkan sebagai berikut:

mulai

selesai

Gambar 3. 8 Activity Diagram Kelola Data

Pada halaman admin terdapat menu Kelola Data yang meliputi; data guru,
data siswa, data mata pelajaran, data kelas dan data beban ajar guru. Di menu
inilah admin dapat mengelola (tambah, edit dan hapus) data yang ada. Data
yang dikelola nantinya akan disimpan oleh database dan dapat dicetak oleh
admin ke dalam bentuk PDF.
 45

c) Activity Diagram Kelola Nilai Siswa (Guru)

Activity diagram ini menjelaskan aliran kerja terkait menu Kelola Nilai
Siswa pada halaman guru yang digambarkan sebagai berikut:

Gambar 3. 9 Activity Diagram Kelola Nilai Siswa

Pada halaman guru terdapat menu Kelola Nilai Siswa, disini guru dapat
mengelola nilai siswa yang meliputi nilai tugas, nilai UTS dan nilai UAS
siswa. Untuk kelola nilai tugas terdapat halaman khusus pada menu kelola
nilai siswa, seperti yang akan dipaparkan pada gambar 3.10 dibawah ini.
 46

d) Activity Diagram Input Tugas (Guru)

Activity diagram di bawah menjelaskan aliran kerja terkait menu Input
Tugas yang digambarkan sebagai berikut:

Gambar 3. 10 Activity Diagram Input Tugas

Gambar diatas menjelaskan alur proses guru dalam mengelola nilai tugas
siswa, yaitu dengan mengakses form Kelola Nilai Siswa terlebih dahulu lalu
tekan button Input Tugas pada kolom siswa yang dipilih. Pada form tugas ini
guru melakukan kelola nilai tugas siswa.
 47

e) Activity Diagram Lihat Nilai (Siswa)

Activity diagram terkait halaman siswa pada alur menu Lihat Nilai
digambarkan sebagai berikut:

Gambar 3. 11 Activity Diagram Lihat Nilai

Pada gambar 3.11 yaitu alur dari halaman yang menyajikan laporan capaian
kompetensi akhir semester siswa yang telah dikelola oleh guru. Pada halaman
ini siswa dapat mencetak form nilai ke dalam bentuk PDF dengan menekan
button Cetak PDF.

f) Activity Diagram Laporan (Kepala Sekolah)

Activity diagram terkait halaman Laporan pada halaman kepala sekolah
digambarkan sebagai berikut:
 48

Gambar 3. 12 Activity Diagram Laporan

Gambar diatas adalah alur kerja dari menu Laporan yang ada pada halaman
kepala sekolah, menu ini ditujukan untuk kepala sekolah selaku pimpinan
sekolah dapat meLaporan siswa, data guru dan beban ajar guru. Form data
yang dipilih nantinya dapat dicetak ke dalam bentuk PDF jika sewaktu-waktu
diperlukan.

g) Activity Diagram Ledger(Kepala Sekolah & Admin)

Activity diagram terkait halaman Ledgeryang terdapat pada halaman
kepala sekolah dan admin digambarkan sebagai berikut:
 49

Gambar 3. 13 Activity Diagram Ledger

Gambar diatas memperlihatkan alur kerja dari menu Ledgeryang ada pada
halaman kepala sekolah dan halaman admin yang berguna sebagai laporan
akhir tahun ajaran pencapaian siswa/i pada sekolah tersebut. Disini user dapat
meLedgerberdasarkan rombel, user dapat mencetak Ledger ke dalam bentuk
PDF dengan menekan button Cetak PDF.

h) Activity Diagram Kelola Absensi & Ekstra (Guru)

Activity diagram di bawah menjelaskan aliran kerja terkait menu Kelola
Absensi & Ekstra yang digambarkan sebagai berikut:
 50

Gambar 3. 14 Activity Diagram Kelola Absensi & Ekstra

Alur kerja dari menu Kelola Absensi & Ekstra ditujukan kepada guru yang
juga menjadi wali kelas untuk dapat mengelola absensi siswa/i nya serta
mengelola nilai ekstra seperti ekstrakurikuler dan nilai kepribadian para
siswa/i di halaman tersebut.

i) Activity Diagram Kelola Profil

Activity diagram di bawah menjelaskan aliran kerja terkait menu Kelola
Profil yang digambarkan sebagai berikut:
 51

Gambar 3. 15 Activity Diagram Kelola Profil

Gambar diatas merupakan alur kerja dari halaman Kelola Profil yang terdapat
di semua halaman user (admin, guru, kepala sekolah dan siswa) yang berguna
sebagai informasi pribadi dari masing-masing user, serta berfungsi untuk
mengubah password user demi keamanan data pribadi user.

j) Activity Diagram Logout

Activity diagram di bawah menjelaskan aliran kerja terkait dengan proses
Logout yang digambarkan sebagai berikut:
 52

Gambar 3. 16 Activity Diagram Logout

Setelah user selesai melakukan aktuvitasnya dengan sistem, user dapat keluar
dari sistem dengan menekan button Keluar pada menu bar. Dengan begitu
sistem akan melakukan proses logout dan mengarahkan user ke menu login
utama.

3.3.7 Sequence Diagram

Sequence diagram menggambarkan kelakuan objek pada use case
dengan mendeskripsikan waktu hidup objek dan message yang dikirimkan
dan diterima antar objek. Sequence diagram pada perancangan sistem e-rapor
berbasis web usulan pada SMK Yapan Indonesia sebagai berikut:

a) Sequence Diagram Login

Sequence diagram login di bawah menjelaskan alur user dalam
melakukan login:
 53

sd LOGIN

User
HalamanLogin ControllerUser dbUser HalamanUtama

input username & password()

klikLogin()

validasiData()

getData()

login sukses()

tampil()

login gagal()

tampilPesanKesalahan()

Gambar 3. 17 Sequence Diagram Login

b) Sequence Diagram Kelola Data (Admin)

Sequence diagram kelola data menjelaskan alur objek admin dalam
mengelola data yang ada, sebagai berikut:
 54

sd Admin

Admin
HalamanUtama formTambahData formEditData ControllerAdmin Database

klik buttonKelolaData()

tampilData()

pilihData()
sendMessage()

getData()

tampilData()

tambahData()
prosesData()
simpanData()

tampilData()

editData()

prosesData()

getData()
tampilData()

updateData()

proses()
simpanData()
tampilData()

hapusData()

prosesHapusData()
data dihapus()

tampilData()

Gambar 3. 18 Sequence Diagram Kelola Data

c) Sequence Diagram Input Tugas (Guru)

Sequence diagram di bawah ini menjelaskan alur objek guru dalam
mengelola nilai tugas siswa:
 55

sd Input Tugas

Guru
formNilai formTugas formTambahTgs formEditTgs CtrlTugas Tugas

pilihRombel&Mapel()

tampilDataSiswa()

klikInputTugas()

tampil()

tambahNilaiTugas()

prosesNilai()
simpanNilai()

tampilNilaiTugas()

klikEdit()

proses()
getDataTugas()

tampilNilai()

updateTugas()

prosesNilai()

simpanNilai()

tampilNilaiTugas()

hapusNilaiTugas()

prosesHapus()

data dihapus()

tampilNilaiTugas()

Gambar 3. 19 Sequence Diagram Input Tugas

d) Sequence Diagram Kelola Nilai Siswa (Guru)

Sequence diagram kelola nilai siswa di bawah ini menjelaskan alur objek
guru dalam mengelola nilai siswa:
 56

sd Kelola Nilai Sisw a

Guru
HalamanUtama formNilai ControllerGuru Nilai

klikKelolaNilaiSiswa()

tampil()

pilihRombel&Mapel()

proses()

getData()
tampilData()

inputNilai()

prosesNilai()

simpanNilai()

Gambar 3. 20 Sequence Diagram Kelola Nilai Siswa

e) Sequence Diagram Kelola Absensi & Ekstra (Guru)

Sequence diagram di bawah menjelaskan alur objek guru dalam kelola
absensi & ekstra yang meliputi nilai ekstrakurikuler dan nilai kepribadian:
sd Kelola Absensi&Ekstra

Guru
HalamanUtama absensi&ekstra Ctrl Absensi
absensi&ekstra
klikAbsensi&Ekstra()

tampil()

pilihKelas()

pilihSiswa()

input data absen&ekstra()

prosesData()

simpanData()

tampilData()

Gambar 3. 21 Sequence Diagram kelola absensi & ekstra

 57

f) Sequence Diagram Lihat Nilai (Siswa)

Sequence diagram lihat nilai menjelaskan alur objek siswa dalam melihat
laporan capaian kompetensi akhir semster:
sd Sisw a

Si swa
HalamanSisw a formRapor CtrlSisw a Nilai

kl i kLi hatNi l ai ()

tampi l ()

pi l i hT ahunAj aran()

sendMessage()

getNi l ai ()
tampi l Ni l ai ()

kl i kCetakPDF()

prosesCetak()

berhasi l Cetak(al ert)

Gambar 3. 22 Sequence Diagram Lihat Nilai

g) Sequence Diagram Laporan (Kepala Sekolah)

Sequence diagram menjelaskan alur objek kepala sekolah dalam melihat
Laporan yang ada pada sekolah:
sd Lihat Data

Kepsek
HalamanUtama formData CtrlKepsek Database

kl i kLi hatData()
tampi l Data()

pi l i hData()
sendMessage()

getData()
tampi l Data()

kl i kCetakPDF()

prosesCetak()

berhasi l Cetak(al ert)

Gambar 3. 23 Sequence Diagram Laporan

 58

h) Sequence Diagram Ledger(Kepala Sekolah & Admin)

Sequence diagram Ledger menjelaskan alur objek user (kepala sekolah &
admin) dalam meLedgercapaian kompetensi akhir semester siswa/i SMK
Yapan Indonesia berdasrakan Rombel:

sd Lihat Ledger

User
HalamanUtama formLedger CtrlLedger Database

klikLihatLedger()

tampil()

pilihRombel()

proses()

getData()

tampilLedger()

klikCetakPDF()
prosesCetak()

berhasilCetak(alert)

Gambar 3. 24 Sequence Diagram Lihat Ledger

i) Sequence Diagram Kelola Profil

Sequence diagram kelola profil di bawah menjelaskan alur objek user
dalam mengelola profil, baik edit profil maupun ubah password:
 59

sd KelolaProfil

User
HalamanUtama formProfil CtrlProfil User

klikProfil()

sendMessage()

getData()

tampilProfil()

editProfil()
proses()
simpanProfil()

tampil Profil()

ubahPassword()

validasi()
simpanPassword()

Gambar 3. 25 Sequence Diagram Kelola Profil

j) Sequence Diagram Logout

Sequence diagram di bawah menjelaskan alur objek user ketika
melakukan aktivitas Logout:

sd Logout

User
HalamanUtama ctrlLogout menuLogin

aksesButtonKeluar()

prosesLogout()

tampil()

Gambar 3. 26 Sequence Diagram Logout

 60

3.3.8 Class Diagram

Class Diagram adalah sebuah spesifikasi yang jika diinstansiasi akan
menghasilkan sebuah objek dan merupakan inti dari pengembangan dan
desain berorientasi objek. Class menggambarkan keadaan (attribute dan
property) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi
keadaan tersebut (metoda dan fungsi). Berikut adalah class diagram terkait
sistem e-rapor usulan pada SMK Yapan Indonesia:

Gambar 3. 27 Class Diagram Usulan

 61

3.3.9 Perancangan Layar (User Interface)

Berikut ini, perancangan antarmuka pada sistem pengolahan e-rapor
yang diusulkan:
a) Halaman Login User
custom login

Logi n T ab2
www.erapor.yapan.com /Logi n

E-RAPOR SMK YAPAN INDONESIA

LOG IN

Username

Password

Logi n

Gambar 3. 28 Perancangan Layar Login

Gambar diatas menjelaskan rancangan layar pada halaman login untuk input
username dan password user guna masuk ke halaman utama sistem.

b) Halaman Kelola Data oleh Admin

custom login

Menu Utama Tab2

www.erapor.yapan.com/menu

TEXT

Button TEXT
Button
Tambah Siswa
TEXT
Button Column0 Column1 Column2 Column3 Column4 Column5
Row1 Butt... Butt... Text Text Text Text
Button Row2 Text Text Text Text
Row3 Text Text Text Text
Button
Row4 Text Text Text Text
Button Row5 Text Text Text Text

Button

Button

Button Cetak PDF

Gambar 3. 29 Perancangan Layar Kelola Data

 62

Gambar 3.29 menggambarkan rancangan layar yang ada pada halaman admin
setelah melakukan Login. Terdapat button Mulai Tahun Ajaran Baru, button
Ledgerdan menu Kelola Data yang berisi data mata pelajaran, data kelas, data
beban ajar, data siswa dan data guru pada panel sisi kiri. Panel isi terdapat
tabel data yang dipilih admin untuk dikelola (tambah, edit dan hapus).

c) Halaman Tambah Data oleh Admin

custom tambah

Menu Utama Tab2

www.erapor.yapan.com/menu

TEXT

Button Kembali

Button text 1
Text
Button
text 2
Button

Button
text 3
Button

Button
text 4
Button

Button

Simpan

Gambar 3. 30 Perancangan Layar Tambah Data

Gambar diatas menampilkan perancangan pada halaman Tambah Data dalam

sistem admin. Pada halaman ini admin melakukan aktivitas tambah data
sesuai dengan menu yang dipilih terlebih dahulu, baik data user maupun data
master.
 63

d) Halaman Edit Data oleh Admin

custom tambah

Menu Utama T ab2

www.erapor.yapan.com/menu

TEXT

Button Kembali

Button text 1
Text value
Button
text 2
Button
value
Button
text 3
Button
value
Button
text 4
Button

Button value

Simpan

Gambar 3. 31 Perancangan Layar Edit Data

Pada halaman ini admin dapat melakukan aktivitas edit data, isi pada textfield
adalah data yang diambil dari database. Halaman ini sama tampilannya
dengan kelola profil.

e) Halaman Kelola Nilai oleh Guru

custom kelola nilai

Menu Utama Guru Tab2

www.erapor.yapan.com

TEXT

Button
Text Text Text
Button
Text
Button

Column0 Column1 Column2 Tugas UTS UAS Aksi

Button
Row1 Text Text Input Tugas Text Text Simpan
Row2 Text Text
Row3 Text Text

Gambar 3. 32 Perancangan Layar Kelola Nilai

 64

Gambar 3.32 menunjukan halaman user guru dalam mengelola nilai siswa,
terdapat button Input Tugas yang mengarahkan user guru ke dalam form
tambah nilai tugas, seperti yang dijelaskan pada point selanjutnya.

f) Halaman Input Tugas oleh Guru

custom input tugas

Menu Utama Guru Tab2

www.erapor.yapan.com

TEXT TEXT

Button Kembali Nama Siswa

Button
Tambah Tugas
Button

Button Tugas 1 : 80 Edit Hapus

Tugas 2 : 78

Gambar 3. 33 Perancangan Layar Input Tugas

Gambar diatas merupakan halaman input tugas yang dikelola oleh user guru.
Terdapat button Tambah Tugas yang akan menampilkan pop up seperti
gambar 3.34 dibawah ini:
custom tambah

T ambah T ugas

Keterangan

Input Nama T ugas

Nilai
Input Ni l ai T ugas

Kembal i Si mpan

Gambar 3. 34 Tambah Tugas

 65

g) Halaman Kelola Absensi oleh Guru

custom tambah

Menu Utama T ab2

www.erapor.yapan.com/menu

TEXT

Button Kembali

Button text 1

Button
text 2
Button

text 3

text 4

Simpan

Gambar 3. 35 Perancangan Layar Kelola Absensi

Halaman di atas menggambarkan form kelola absensi siswa yang ada pada
sistem user guru.

h) Halaman Lihat Nilai oleh Siswa

custom lihatnilai

Menu Utama Tab2

www.erapor.yapan.com/menu

TEXT

Lihat Nilai
HASIL NILAI AKADEMIK
Profil 2020/2021

Keluar Column0 Column1 Column2 Column3 Column4 Column5 Column6

Row1 Text Text Text Text Text
Row2 Text Text Text Text Text
Row3 Text Text Text Text Text
Row4 Text Text Text Text Text
Row5 Text Text Text Text Text

Cetak PDF

Gambar 3. 36 Perancangan Layar Lihat Nilai

 66

Gambar 3.36 menunjukan rancangan layar menu Lihat Nilai pada sistem user
siswa. Di halaman ini menampilkan hasil kompetensi nilai akhir siswa dalam
bentuk format rapor dan dapat dicetak ke dalam bentuk PDF.

i) Halaman Ledger
custom cetak data

Menu Utama Tab2

www.erapor.yapan.com/menu

TEXT

Button
Value1 Value1 Cetak PDF

Button
Text Text Text
Text Text Text
Button

Column0 Column1 Column2 Column3 Column4 Column5 Column6

Row1 Text Text Text Text Text Text
Button
Row2 Text Text Text Text Text Text
Row3 Text Text Text Text Text Text
Row4 Text Text Text Text Text Text
Row5 Text Text Text Text Text Text

Gambar 3. 37 Perancangan Layar Halaman Ledger

Gambar di atas menunjukan halaman user kepala sekolah dan admin pada
halaman ledger.