BAB III

PERANCANGAN SISTEM

A. Sekilas Tempat PKL

1. Sejarah SMA Negeri 3 Selong

SMA Negeri 3 Selong ini di buka pada tahun 1998 dan

terakreditasi B dengan status mutu sekolahnya adalah PraSSN

(Sistem Standardisasi Nasional). Sekolah ini beralamat di Jln. H.

M. Faisal No.01 Selong, Kecamatan Selong, Kabupaten Lombok

Timur, provinsi Nusa Tenggara Barat.

SMA Negeri 3 Selong memiliki jumlah siswa 631 siswa

dengan total jumlah gurunya sebanyak 53 orang. Dan jumlah guru

PNS sebanyak 33 orang dan guru non PNS sebanyak 20 orang.

SMA Negeri 3 Selong memiliki 2 jurusan yaitu IPA dan IPS.

Fasilitas yang ada disekolah ini adalah 2 Lab komputer dan 1

perpustakaan.

2. Profil SMA Negeri 3 Selong

a. Nama sekolah : SMA Negeri 3 Selong

b. Nomor Pokok Sekolah Nasional : 50219579

c. Akreditasi Sekolah :B

d. Tahun akreditasi : 2012

e. Alamat Sekolah : Jln. H. M. Faisal No.01

Selong, Kecamatan Selong, Kabupaten Lombok Timur

30
 31

f. SK Pendirian Sekolah : 188.45/48/PDK/2004

g. SK izin operasional : 188.45/236/PDK/2008

h. NPWP Sekolah : 002852762915000

i. Nama kepala Sekolah : Irmansyah, S.Pd

j. Luas lahan : 5139 m2

k. Data Siswa :

Tabel 3.1 Data Siswa SMA Negeri 3 Selong

No Kelas Jumlah Total

1 X 209
2 XI 180
3 XII 242
Jumlah

3. Visi dan Misi SMA Negeri 3 Selong

a. Visi

Terwujudnya Sekolah Unggul Dalam Prestasi dan Berakhlak

Mulia Berlandaskan Imtaq dan Iptek

b. Misi

1. Meningkatkan efisiensi dan efektifitas proses

pembelajaran (KBM) yang berbasis IT.

2. Meningkatkan disiplin dan etos kerja warga sekolah

untuk menggapai prestasi.

3. Meningkatkan pembinaan dan pengamalan ajaran agama

dengan akhlakul karimah dalam kehidupan sehari-hari.

4. Meningkatkan hubungan kemitraan warga sekolah

yang harmonis baik internal dan eksternal.

 32

5. Meningkatkan dukungan lingkungan sekolah

yang harmonis, dinamis dan berwawasan wiyata mandala.

4. Struktur Organisasi

STRUKTUR ORGANISASI SMAN 3 SELONG

Gambar 3.1 Struktur Organisasi SMAN 3 Selong

A. Sistem Berjalan (Sistem Lama)

 33

Berdasarkan hasil analisis yang dilakukan selama ini,

bahwa sistem yang sedang berjalan pada SMA Negeri 3 Selong

masih berjalan secara manual yaitu dengan menggunakan buku

besar untuk mencatat setiap siswa yang melakukan permbayaran.

Gambar 3.2 Sistem Lama

B. Sistem Alternatif (Sistem Baru)

 34

Untuk mengatasi permasalahan yang dihadapi dalam

pembayaran SPP pada SMA Negeri 3 Selong maka dikembangkan

sistem baru yang akan memudahkan bendahara untuk mendata

dan mengelola data pembayaran SPP. Sistem baru tersebut dapat

dijelaskan pada gambar di bawah ini :

Gambar 3.3 Sistem Baru

C. Unified Modeling Language (UML)

 35

1. Use Case Diagram

a. Use Case Admin

Gambar 3.4 Use Case Diagram

2. Activity Diagram
 36

a. Activity Diagram Login

Gambar 3.5 Activity Diagram Login

Pada diagram aktivitas login ini admin atau bendahara

memasukkan username dan password. Jika username dan

password yang dimasukkan benar maka admin atau

bendaharaakan berhasil login. Sedangkan jika username dan

password yang dimasukkan salah maka admin atau bendahara

harus mengulang dan memasukkan username dan password

sampai benar.

b. Activity Diagram data user

 37

Gambar 3.6 Activity Diagram data user

Pada diagram aktivitas ini admin atau bendahara

melakukan banyak aktifitas seperti tambah data, simpan, edit,

dan hapus data serta dapat melakukan pencarian data pada

button yang tersedia di fasilitas menu user tersebut.

c. Activity Diagram Data SPP

 38

Gambar 3.7 Activity Diagram Data SPP

Pada diagram aktivitas pengolahan data SPP admin

atau bendahara melakukan input data SPP jika ada

perubahan baru yang menyangkut biaya pembayaran

dengan mengisi lengkap form tabel yang tersedia,setelah itu

admin menyimpan data.

d. Activity Diagram Data Siswa

 39

Gambar 3.8 Activity Diagram Data Siswa

Pada diagram aktivitas pengolahan data siswa admin

atau bendahara melakukan input data siswa jika ada siswa

baru yang membayar, setelah data diisi dengan lengkap

admin menyimpan data. Dan admin dapat mengedit data

siswa pada button ubah jika ada data yang salah, dan dapat

menghapus data pada button hapus.

e. Activity Diagram Transaksi Pembayaran

 40

Gambar 3.9 Activity Diagram Transaksi Pembayaran

Pada diagram aktivitas pengolahan data transaksi

admin atau bendahara melakukan pengolahan data

pembayaran seperti pencarian siswa, hapus data dan

melakukan proses pembayaran lalu menyimpan data

pembayaran siswa, serta mencetak kwitansi.

f. Activity Diagram Laporan

 41

Gambar 3.10 Activity Diagram Laporan

Pada diagram aktivitas pengolahan laporan admin

atau bendahara melakukan pengolahan data laporan seperti

mencetak laporan dari tanggal sekian sampai tanggal

sekian.

G. Entity Relationship Diagram (ERD)

Diagram untuk menggambarkan model Entity Relationship ini

disebut Entity Relationship diagram, ER diagram atau ERD. Entity

Relationship Diagram pada sistem informasi berbasis web dapat

dilihat pada gambar 3.11 berikut :

Gambar 3.11 Desain ERD Database

 42

Pada ERD diatas menjelaskan bahwa tabel siswa berelasi

ke tabel pembayaran dengan Nis sebagai primary key, tabel spp

juga relasinya ke tabel pembayaran dengan kode_spp sebagai

primary keynya, dan tabel userpun berelasi ke tabel pembayaran

dengan username sebagai primary keynya.

H. Normalisasi

1. Bentuk Tidak Normal (Unnormalized Form)

Bentuk tidak normal dapat di lihat pada tabel dibawah ini:

Tabel 3.2 Bentuk Tidak Normal

Username Tahun_ajaran

Password Kode_spp

Level Lama_bayar

Nama_lengkap Dari_bulan

Nis Sampai_bulan

Nama Total bayar

Kelas Tanggal_bayar

Jenis_kelamin Status

Tempat_lahir

Tanggal_lahir

Alamat

Tahun_angkatan

Kode_SPP
 43

Tahun_Angkatan

SPP

No_kwitansi

Nis

Semester

2. Bentuk normal pertama (1 NF)

Berikut tabel normalisasi pertama yang ditunjukan pada

tabel 3.2 di bawah ini :

Tabel 3.3 Normalisasi Pertama (1 NF)

Username* No_Kwitansi*

Password Nis

Level Semester

Nama_Lengkap Tahun_ajaran

Nis* Kode_spp

Nama Lama_bayar

Kelas Dari_bulan

Jenis_kelamin Sampai_bulan

Tempat_lahir Total_bayar

Tanggal_lahir Tanggal_bayar

Alamat Status

Tahun_angkatan

Kode_SPP*
 44

Tahun_angkatan

SPP

Keterangan: * adalah candidat key.

3. Bentuk normal kedua (2 NF)

Berikut tabel normalisasi kedua yang di tunjukan pada tabel.

Tabel 3.4 Normalisasi Kedua (2 NF)

User Siswa SPP Pembayaran

Username* Kode_SPP* No_kwitansi*
Nis*
Password Tahun_angkatan Semester
Nama
Level SPP Tahun_ajaran
Kelas
Nama_lengkap Lama_bayar
Jenis_kelamin
Dari_bulan
Tempat_lahir
Sampai_bulan
Tanggal_lahir
Total_bayar
Alamat
Tanggal_bayar
Keterangan: Tahun_angkatan * adalah primary
Status
key.
 45

4. Bentuk normal ketiga (3 NF)

Tabel 3.5 Normalisasi ketiga (3 NF)

Siswa
Pembayaran
Nis*
User No_Kwitansi*
Username* Nama
Nis**
Password Kelas
Kode_spp**
Level Jenis_Kelamin
Semester
Nama_lengkap Tempat_Lahir
Tahun_ajaran
Tanggal_Lahir
Lama_bayar
Alamat
Dari_bulan
SPP
Kode_SPP* Tahun_angakata
Sampai_bulan
Tahun_angkatan n
Total_bayar
SPP
Tanggal_bayar
Status
Username**

Keterangan: * adalah Primary Key

** adalah Foreign
Key
 46

I. Struktur Database

Melalui perancangan ERD yang telah dilakukan sebelumya,

maka di bentuklah kamus data sebagai berikut :

1. Tabel User

Tabel 3.6 ini merupakan tabel yang berisi data user yang bisa

mengakses program, adapun strukturnya adalah sebagai berikut :

pada table dibawah ini yang menjadi primary keynya adalah

Username.

Tabel 3.6 Struktur Tabel User

Field Tipe Size Keterangan

username* varchar 20 Username pengguna
password varchar 32 Password user
level varchar 15 Level admin
Nama yang akan ditampilkan
nama varchar 25
di program
 47

2. Tabel Siswa

Tabel 3.7 ini merupakan tabel yang berisi data siswa,

adapun strukturnya adalah sebagai berikut : pada table

dibawah ini yang menjadi primary keynya adalah Nis.

Tabel 3.7 Struktur Tabel Siswa

Field Tipe Size Keterangan

Nis* Char 4 Nomor induk siswa

Nama_siswa Varchar 40 Nama siswa

Kelas Varchar 10 Kelas siswa

Jenis_Kelamin Varchar 9 Jenis kelamin siswa

Tempat_lahir Varchar 25 Tempat lahir siswa

Tanggal_lahir Date 0 Tanggal lahir siswa

Alamat Varchar 50 Alamat tempat tinggal siswa

Tahun_angkata
Int 4 Tahun angkatan siswa
n
 48

3. Tabel SPP

Tabel 3.8 ini merupakan tabel yang berisi data SPP

adapun strukturnya adalah sebagai berikut : pada table

dibawah ini yang menjadi primary keynya adalah Kode_SPP.

Tabel 3.8 Struktur Tabel SPP

Field Tipe Size Keterangan

Kode Sumbangan
Kode_spp* Char 4
pembinaan pendidikan

Tahun_angkatan Varchar 9 Tahun angkatan siswa

Sumbangan
SPP Varchar 12
pembinaan pendidikan
 49

4. Tabel Pembayaran

Tabel 3.9 ini merupakan tabel yang berisi mata adapun

strukturnya adalah sebagai berikut : pada table di bawah ini

yang menjadi primary keynya adalah No_kwitansi.

Tabel 3.9 Struktur Tabel Pembayaran

Field Tipe Size Keterangan

No_kwitansi* Int 10 Nomor kwitansi

Nis Char 4 Nomor induk siswa

Semester Varchar 6 Semester siswa

Tahun_ajaran Varchar 9 Tahun ajaran siswa

Kode Sumbangan
Kode_spp Char 4
pembinaan pendidikan

Berapa lama telah

Lama_bayar Int 12
membayar

Dari_bulan Varchar 20 Dari bulan keberapa

Sampai_bulan Varchar 10 Sampai bulan keberapa

Total_bayar Int 11 Total pembayaran

Tanggal_bayar Date 0 Tanggal Pembayaran

Status Varchar 20 Status Lunas/Tidak

 50

J. Arsitektur Program (Struktur Program)

Untuk mempermudah pembuatan sistem, diperlukan

perancangan struktur menu program yang akan dibangun.

Perancangan struktur menu program ini membantu dalam

merancang bagian-bagian dari sistem yang sebenarnya dan untuk

mengetahui bagian mana yang terlebih dahulu nantinya yang akan

diakses setelah program tersebut selesai.

1. Arsitektur program untuk Admin

LOGIN

HALAMAN MENU
UTAMA

MASTER TRANSAKSI LAPORAN Logout

Data User Transaksi Pembayaran Laporan Pembayaran

Data SPP

Data Siswa

Gambar 3.12 Perancangan Arsitektur Program untuk Admin

 51

K. Desain Interface

Desain interface merupakan aspek komputer atau program

yang dapat dilihat atau dipersepsikan oleh pengguna manusia dan

perintah-perintah atau mekanisme yang digunakan pemakai untuk

mengendalikan operasi dan memasukkan data. Berikut ini

merupakan desain interface aplikasi pembayaran spp.

1. Desain Form

a. Halaman Login Admin.

Pada halaman login ini admin melakukan validasi

dengan memasukkan username dan password, setelah itu

admin menekan tombol sign in dan masuk kehalaman

berikutnya.

Gambar 3.13 Halaman Login

Admin
 52

b. Halaman Depan Admin

Tampilan halaman depan dibuat semenarik mungkin

namun juga dibuat senyaman mungkin, yaitu menampilkan

berbagai fitur yang diperlukan admin seperti menu data user,

spp, siswa yang berada dalam menu master, ada menu

transaksi juga untuk melakukan pembayaran serta laporan.

Dan di tampilan tengah pada halaman utama ini

ditambahkan logo SMAN 3 Selong.

Sistem Informasi Pembayaran SPP Adminn

L Beranda
L Master
L Transaksi

Logo SMAN 3 Selong

L Laporan

Logout

Gambar 3.14 Halaman Utama Admin

 53

c. Halaman Tampil Data User Admin

Ini adalah halaman data user admin dimana bisa

dilihat button tambah yang fungsinya untuk menambah data

user atau pengguna sesuai dengan kebutuhannya. Selain itu

juga ada combobox data perhalaman yang berfungsi untuk

menampilkan data sesuai dengan berapa banyaknya data

yang diinginkan dalam sekali tampil ada juga teks box cari

yang berfungsi untuk mencari nama user dan tabel akan

mucul ketika data user sudah diisi, dimana isi tabel tersebut

ada no, username, password, level, nama lengkap, dan aksi

yang berisikan edit dan hapus.

Sistem Informasi Pembayaran SPP Admin

L
L Data User ˄×
Menu

++ Tambah
Tambah
L Menu

Data Per
Cari :
halaman
L Menu

NO Username Password Level Nama Lengkap Aksi

Ubah I Hapus

Gambar 3.15 Halaman Tambah Data User Admin

 54

d. Halaman Data SPP Admin

Ini adalah halaman data spp admin dimana bisa

dilihat button tambah yang fungsinya untuk menambah data

spp. Selain itu juga ada combobox data perhalaman yang

berfungsi untuk menampilkan data sesuai dengan berapa

banyaknya data yang diinginkan dalam sekali tampil ada

juga teks box cari yang berfungsi untuk mencari kode spp

dan tabel akan mucul ketika data spp sudah diisi, dimana isi

tabel tersebut ada no, kode spp, tahun ajaran, spp, dan aksi

yang berisikan button edit dan hapus.

Sistem Informasi Pembayaran SPP Admin

L
L Data SPP ˄×
Menu

+ Tambah
Tambah
L Menu

Data Per
Cari :
halaman
L Menu

NO Kode SPP Tahun Angkatan SPP Aksi

Ubah I Hapus

Gambar 3.16 Halaman Data SPP Admin

 55

e. Halaman Data Siswa Admin

Halaman ini adalah halaman data siswa admin

dimana bisa dilihat button tambah yang fungsinya untuk

menambah data siswa. Selain itu juga ada combobox data

perhalaman yang berfungsi untuk menampilkan data sesuai

dengan berapa banyaknya data yang diinginkan dalam

sekali tampil ada juga teks box cari yang berfungsi untuk

mencari nama siswa dan tabel akan mucul ketika data siswa

sudah diisi, dimana isi tabel tersebut ada no, nis, nama, jenis

kelamin, tempat lahir, tanggal lahir, alamat, tahun angkatan

dan aksi yang berisikan button edit dan hapus.

Sistem Informasi Pembayaran SPP Admin

L
L Data Siswa ˄×
Menu

++ Tambah
Tambah
L Menu

Data Per
Cari :
halaman
L Menu
Jenis
Tanggal Tahun
NO NIS Nama Kelamin Tempat lahir Alamat Aksi
Lahir angkatan

Ubh I Hps

Gambar 3.17 Halaman Data Siswa Admin

 56

f. Halaman Data Pembayaran Admin

Halaman ini adalah halaman data pembayaran admin

dimana bisa dilihat button tambah yang fungsinya untuk

menambah data pembayaran. Selain itu juga ada combobox

data perhalaman yang berfungsi untuk menampilkan data

sesuai dengan berapa banyaknya data yang diinginkan

dalam sekali tampil ada juga teks box cari yang berfungsi

untuk mencari nama siswa yang akan melakukan

pembayaran dan tabel akan mucul ketika data pembayaran

sudah diisi, dimana isi tabel tersebut ada no kwitansi, nis,

nama, angkatan, spp, lama bayar, dari bulan, sampai bulan,

total, tanggal bayar, dan aksi yang berisikan button edit dan

hapus.

Sistem Informasi Pembayaran SPP Admin

L
L ˄×
Menu

+ Tambah

Data Per halaman Cari :

No Dari Sampai
NIS Nama SPP Total Aksi
Kwitansi Bulan Bulan
 57

Gambar 3.18 Halaman Data Pembayaran Admin

g. Halaman Cetak Data Pembayaran Admin

Di halaman ini Admin dapat melihatkan hasil cetakan

kwitansi yang ada dibawah ini setelah siswa melakukan

pembayaran. Dan isi kwitansinya ada nis, nama, kelas,

semester, tahun ajaran, dan no kwitansi. Dibagian depan

ada tabel yang ditampilkan beupa tanggal bayar, lama

bayar, dari bulan apa yang dibabyar sampai bulan apa, dan

terkhir jumlah yang dibayar oleh siswa tersebut.

SMA NEGERI 7 MATARAM

SMA NEGERI 3 SELONG
Jl. H.Moh.Faisal
Jl. Adi SuciptoNo.1
No.69Selong telp.(0376)
Ampenan 2923415
telp. (0370) 6162545 Selong
Mataram 83612
83113
Logo Email : smantigaselong@yahoo.com | Website : Logo
Email : smanju_mataram@yahoo.com I Website : www.smanju-mataram.com
sman3selong.sch.id

Nis : Semester :
Nama : Tahun Ajaran :
Kelas : No. Kwitansi :

# Tanggal Lama Bayar Dari Bulan Sampai Bulan Jumlah

Total

Tanggal Cetak

Bendahara Komite Siswa

( ) ( )
 58

Gambar 3.19 Halaman Cetak Kwitansi

h. Halaman Proses Pembayaran Admin

Pada halaman ini digunakan datetimepicker otomatis

untuk melihat pembayaran siswa mulai dari tanggal sampai

dengan tanggal berapa agar admin dapat melihat hasil

laporannya. Selain itu juga ada combobox kelas yang

berfungsi untuk melihat hasil laporan sesuai dengan

kelasnya dan button proses yang berfungsi untuk

memproses tanggal yang diinputkan.

Proses
 59

Gambar 3.20 Halaman Proses Laporan

i. Halaman Laporan Pembayaran Admin

Pada halaman ini admin dapat mengklik button cetak

untuk mencetak hasil laporan pembayaran spp sedangkan

button batal untuk membatalkan proses cetak.

Sistem Informasi Pembayaran SPP Admin

Cetak
Cetak Batal
Batal
L
Menu SMA NEGERI 3 SELONG
Logo
Logo SMA NEGERI 7 MATARAM
Jl. H.Moh.Faisal No.1 Selong telp.(0376) 2923415 Selong Logo
Jl. Adi Sucipto
83612 Email No.69 Ampenan telp. (0370) 6162545 Mataram
: smantigaselong@yahoo.com 83113 :
| Website
Email : smanju_mataram@yahoo.com I Website : www.smanju-mataram.com
sman3selong.sch.id

LAPORAN PEMBAYARAN SPP

Total
No Tanggal NIS Nama Kelas Tahun Ajaran SPP Lama Bayar Dari Bulan Sampai Bulan
Bayar

Batal

Tanggal Cetak

Bendahara Komite Siswa

( ) ( )

Gambar 3.21 Halaman Laporan Pembayaran Admin

 60

2. Desain Output

a. Halaman Laporan Pembayaran Admin

Pada halaman ini adalah hasil cetakan laporan

pembayaran spp yang dilakukan oleh admin. Dihalaman ini

terdapat tabel laporan pembayaran, dimana isinya ada no,

tanggal, nis, nama, kelas, tahun ajaran, spp, lama bayar,

dari bulan, sampai bulan, dan total bayar.

SMA NEGERI 3 SELONG

Logo SMA NEGERI 7 MATARAM Logo
Jl. H.Moh.Faisal No.1 Selong telp.(0376) 2923415 Selong
83612 Email : smantigaselong@yahoo.com | Website :
Jl. Adi Sucipto No.69 Ampenan telp. (0370) 6162545 Mataram 83113
sman3selong.sch.id
Email : smanju_mataram@yahoo.com I Website : www.smanju-mataram.com

LAPORAN PEMBAYARAN SPP

Total
No Tanggal NIS Nama Kelas Tahun Ajaran SPP Lama Bayar Dari Bulan Sampai Bulan
Bayar

Tanggal Cetak
Bendahara Komite Siswa

( ) ( )
 61

Gambar 3.22 Desain Output