BAB IV PERANCANGAN SISTEM Tujuan dari desain sistem secara umum adalah untuk memberikan gambaran secara umum kepada user tentang sistem yang baru. Data skenario yang digambarkan dalam bentuk diagram sequence (Sequence Diagram). Sequence diagram menjelaskan interaksi antar obyek yang disusun dalam suatu urutan waktu yaitu urutan kejadian yang dilakukan oleh seorang actor dalam menjalankan sistem 5.1. Sequence Diagram Pengembangan dari use-case yang dapat mengimplementasikan skenario dalam use- case adalah adalah Interaction Diagram. Salah satu jenis dari Interaction diagram yang biasa digunakan yaitu sequence diagram. Sequence diagram dapat memodelkan analisis lebih spesifik dengan memodelkan interaksi antar objek melalui urutan aktifitas serta pesan yang dikirim dari satu objek ke objek lain. Berikut adalah rancangan sequence diagram yang dipetakan dari skenario untuk menggambarkan interaksi antar objek di dalam dan di sekitar sistem. a. Sequence Diagram permintaan informasi akademik siswa Pada sequence diagram permintaan informasi akademik siswa oleh wali murid, wali murid akan mengirimkan sms berupa format yang telah disediakan ke sistem kemudian sistem akan memeriksa format pesan apakah sesuai dengan format yang disediakan dan sistem akan mengirim pesan info ke wali murid.
78 wali murid Sistem database kirim sms ke sistem verifikasi cari data sesuai permintaan Kirim Info Pesan Gambar 4.1 Sequence Diagram permintaan informasi akademik siswa b. Sequence Diagram Akses halaman control panel Admin Pada Sequence Diagram Akses halaman control panel Admin, admin akan diminta memasukkan username dan password yang valid untuk bisa mengakses halaman control panel sebagai admin. Tampilan utama Aplikasi content login Halaman Control Panel : admin 1 : akses aplikasi() 2 : sistem menampilkan halaman aplikasi() 3 : akses content login() 4 : sistem memproses request halaman() 5 : menampilkan form login() 6 : masukan username dan password() 7 : verifikasi user() 8 : pesan : login sebagai admin berhasil() 9 : sistem memproses reqest halaman() 10 : halaman control panel() 11 : akses halaman control panel() Gambar 4.2 Sequence Diagram Akses Halaman Control Panel Admin
79 c. Sequence Diagram Akses halaman hak akses guru Pada Sequence Diagram Akses halaman Hak akses guru, guru akan diminta memasukkan username dan password yang valid untuk bisa mengakses halaman control panel sebagai guru. Guru Halaman Utama Perangkat Lunak bantu nilai siswa Page Login Halaman Hak Akses Guru Akses sistem Tampilkan halaman Utama Sistem Akses Page Login TAmpilkan Page Login Request Page Login Masukan Username dan Password verifikasi Pesan Login Berhasil Proses halaman hak akses Tampilkan Halaman hak akses guru Akses Halaman Hak Akses guru Gambar 4.3 Sequence Diagram Akses Halaman Hak akses guru d. Sequence Diagram Akses Halaman Hak Akses Staff TU Pada Sequence Diagram Akses halaman Hak akses Staff TU, Staff TU akan diminta memasukkan username dan password yang valid untuk bisa mengakses halaman control panel sebagai Staff TU
80 Staff TU Halaman Utama Perangkat Lunak bantu nilai siswa Page Login Halaman Hak Akses Staff TU Akses sistem Tampilkan halaman Utama Sistem Akses Page Login TAmpilkan Page Login Request Page Login Masukan Username dan Password verifikasi Pesan Login Berhasil Proses halaman hak akses Tampilkan Halaman hak akses Staff TU Akses Halaman Hak Akses Staff TU. Gambar 4.4 Sequence Diagram Akses Halaman Hak akses Staff TU e. Seqeunce Diagram Akses halaman User Pada Sequence Diagram Akses halaman Member, Admin akan mengakses halaman memberuntuk mengoperasikan input, edit, dan delete pada data user.
81 Admin Halaman control Panel Halaman Login halaman user Add User edit user Simpan data login verifikasi berhasil login Akses Halaman Control Panel; Akses halaman user Proses halaman user Tampilkan halaman user: add, edit, delete Pilih Menu Add user request halaman add user Tampilkan halaman add user isi halaman add user Pesan data berhasil disimpan Simpan data data berhasil disimpan verifikasi data Pilih menu edit user request halaman edit user halaman edit user Simpan data verifikasi data tersimpan ubah data yang tersedia Pesan perubahan data berhasil Gambar 4.5 Sequence Diagram Akses halaman User
82 f. Sequence Diagram Akses Halaman Nilai Pada Sequence Diagram Akses halaman Member, guru akan mengakses halaman memberuntuk mengoperasikan input, edit, pada data nilai. Guru Login Halaman hak Akses Guru Halaman Nilai Halaman Input Nilai Halaman Edit nilai Database Login() Berhasil Login Tampilkan halaman ha akses Akses Halaman Nilai Request Halaman Tampilkan halaman nilai (input, update)() pilih operasi input nilai Tampilkan Form input nilai Masukan data ke dalam Form Simpan data PIlih Content Edit Nilai Tampilkan Form Edit Nilai Simpan Ubah data yang tersdia di Form edit Data Tersimpan Gambar 4.6 Sequence Diagram Akses Halaman Nilai
83 g. Sequence Diagram Akses Halaman Absensi Pada sequence diagram akses halaman absensi, staff TU akan mengakses halaman absensi untuk memasukan dan mengubah data absensi siswa. Staff TU Login Halaman hak Akses Staf f TU Halaman Absensi Halaman Input Absensi Halaman Edit Absensi Database Login() Berhasil Login Tampilkan halaman ha akses Akses Halaman Absensi Request Halaman Tampilkan halaman Absensi(input, update)() pilih operasi input Absensi Tampilkan Form input Absensi Masukan data ke dalam Form Simpan data PIlih Content Edit Absensi Tampilkan Form Edit Absensi Simpan Ubah data yang tersdia di Form edit Data Tersimpan Gambar 4.7 Sequence Diagram Akses halaman Absensi
84 h. Sequence Diagram Akses Halaman SPP Pada sequence diagram akses halaman absensi, staff TU akan mengakses halaman absensi untuk memasukan dan mengubah data absensi siswa. Staff TU Login Halaman hak Akses Staf f TU Halaman SPP Halaman Input SPP Halaman Update SPP Database Login() Berhasil Login Tampilkan halaman ha akses Akses Halaman SPP Request Halaman Tampilkan halaman SPP(input, update)() pilih operasi input SPP Tampilkan Form input SPP Masukan data ke dalam Form Simpan data PIlih Content Update SPP Tampilkan Form Update SPP Simpan Ubah data yang tersdia di Form edit Data Tersimpan Gambar 4.8 Sequence Diagram Akses halaman SPP
85 5.2. Class Diagram Dari seluruh sequence diagram di atas, kita bisa melihat gambaran calon kelas yang akan digunakan dalam perancangan sistem. Calon kelas tersebut dapat kita peroleh dari objek-objek yang ada dalam sequence diagram. Diagram kelas merupakan gambaran relasi yang terjadi antar objek yang didalamnya terdapat class dan interface berserta atributnya. Diagram kelas mendiskripsikan jenis-jenis objek dalam sistem dan berbagai macam hubungan statis. Diagram kelas juga menunjukan properti dan operasi sebuah kelas dan batasan-batasan yang terdapat dalam hubungan-hubungan objek tersebut. User id_user jenis_user add() edit() delete() guru id_guru : char (10) nama : varchar (30) jk : boolean id_user jenis_user edit() add() delete() Admin id_admin user_name password id_user add() edit() delete() Staff TU id_pegawai : sting nama : string id_user jenis_user add() edit() delete() mata pelajaran id_mp nama_mp id_guru add() edit() delete() 1..n 1 1 nilai id_mp nis nilai_mp Input() update() 1..n Siswa nis : char 9 nama : varchar(30) jk : boolean kelas add() edit() delete() 1 1 1 Absensi id_kelas nis bulan : varchar(15) jml_absen : integer input() update() n SPP nis : char 9 1 n kelas id_kelas nama_kelas add() edit() delete() n n id_kelas status_lunas input() update() Gambar 4.9 Class Diagram
86 5.3 Perancangan Tabel a. Tabel Admin Tabel 5.1 Rancangan Tabel Admin Nama Field Tipe Data Ukuran Keterangan Id_admin Int Id admin yang dijadikan sebagai primary key tabel admin. Nama String 30 Username yang digunakan sebagai nama account Password String 30 Password yang digunakan untuk login admin b. Tabel guru Tabel 5.2 Rancangan Tabel Guru Nama Field Tipe Data Ukuran Keterangan Nama String 30 Nama guru mata pelajaran Jk Boolean 2 Jenis kelamin guru Id_user Int Id_user yang di jadikan sebagai foreign key dari tabel user Jenis_user String 50 Jenis user yang digunakan untuk mengkategorikan user : staff TU dan guru. c. Tabel Staff TU Tabel 5.3 Rancangan Tabel Staff TU Nama Field Tipe Data Ukuran Keterangan Id_pegawai Int Id Staff TU yang dijadikan sebagai primary key table staff TU. nama String 30 Nama guru pegawai Staff TU Id_user Int Id_user yang di jadikan sebagai foreign key dari tabel user Jenis_user String 50 Jenis user yang digunakan untuk mengkategorikan user : staff TU dan guru.
87 d. Tabel Siswa Tabel 5.4 Rancangan Tabel Siswa Nama Field Tipe Data Ukuran Keterangan nis String 10 Nomor induk siswa yang dijadikan sebagai primary key tabel guru. Nama String 30 Nama guru siswa Jk Boolean 2 Jenis kelamin siswa Kelas String 6 Kelas siswa e. User Tabel 5.5 Rancangan Tabel User Nama Field Id_user Int Tipe Data Size Jenis_user String 30 Keterangan Id user yang dijadikan primary key tabel user Jenis user yang digunakan untuk mengkategorikan user : admin, guru, dan member. f. Tabel Kelas Tabel 5.6 Rancangan Tabel Kelas Nama Field Tipe Data Size Keterangan Id_kelas Int Id kelas yang dijadikan primary key tabel kelas Nama_kelas String 30 Nama kelas siswa g. Tabel Mata Pelajaran Tabel 5.7 Rancangan Tabel Mata Pelajaran Nama Field Tipe Data Ukuran Keterangan Id_mp Int Id mata pelajaran yang dijadikan sebagai primary key table mata pelajaran. Nama_mp String 30 Nama mata pelajaran Id_guru Int Id_guru yang di jadikan sebagai foreign key dari tabel guru
88 h. Tabel Nilai Tabel 5.8 Rancangan Tabel Nilai Nama Field Tipe Data Ukuran Keterangan nis Int Nomor induk siswa yang dijadikan foreign key. Id_mp Int Id mata pelajaran yang dijadikan foreign key Nilai_mp Int Nilai pelajaran siswa i. Tabel Absensi Tabel 5.9 Rancangan Tabel Absensi Nama Field Tipe Data Ukuran Keterangan Id_kelas Int Id kelas yang dijadikan foreign key dari tabel kelas nis Int Nomor induk siswa yang dijadikan foreign key. Bulan String 15 Nama Bulan absensi siswa Jml_absen Int Jumlah absensi siswa dalam satu bulan j. Tabel SPP Tabel 5.10 Rancangan Tabel SPP Nama Field Tipe Data Ukuran Keterangan Id_kelas Int Id kelas yang dijadikan foreign key dari tabel kelas nis Int Nomor induk siswa yang dijadikan foreign key. Status_lunas string 10 Status pelunasan pembayaran 5.4 Perancangan Antar Muka Perangkat Lunak Perancangan antar muka (tampilan program) merupakan gambaran mengenai tampilan-tampilan program yang nanti akan digunakan didalam sistem, adapun tampilan program yang akan digunakan adalah sebagai berikut:
89 5.4.1 Desain Tampilan Front-end a. Tampilan saat server sms sedang berjalan Logo MAN CIKARANG PERANGKAT LUNAK BANTU PENYEDIA NILAI SISWA MAN CIKARANG SERVER SMS SEDANG BERJALAN Gambar 5.10 Desain Tampilan saat server SMS sedang berjalan b. Tampilan saat terima informasi nilai Nilai PAI anda adalah 75 Gambar 5.11 Desain Tampilan terima SMS informasi nilai
90 c. Tampilan saat terima informasi absensi Absensi bulan Juni adalah 4 Gambar 5.12 Desain Tampilan terima SMS informasi nilai 5.4.2 Desain Tampilan Back-end a. Desain Tampilan Form Login Login Username Password Login Gambar 5.13 desain tampilan Login b. Desain Tampilan halaman Utama perangkat Lunak LOGO MAN CIKARANG PERANGKAT LUNAK BANTU PENYEDIA NILAI SISWA MAN CIKARANG Presesnsi Nilai Tagihan Gambar 5.14 desain tampilan halaman utama
91 c. Desain Tampilan Control Panel Admin menentukan jenis hak user Gambar 5.15 Desain tampilan Halaman Control Panel d. Desain Tampilan Control Panel Admin Add User Gambar 5.16 Desain tampilan Halaman Control Panel add user
92 e. Desain Tampilan Kelola Nilai HEADER PERANGKAT LUNAK BANTU NILAI Guru Kelola Nilai Log out NIS Kode MP Nilai Add Footer perangkat lunak bantu nilai Gambar 5.17 Desain tampilan Halaman add Nilai f. Desain Tampilan Kelola Absensi HEADER PERANGKAT LUNAK BANTU NILAI Guru Kelola Nilai Log out NIS Kode Kelas Absensi Januari Sakit Ijin Alpha Add Gambar 5.18 Desain tampilan Halaman add Nilai
93 g. Desain Tampilan SMS Masuk Pesan Masuk Dari Nomor Isi Pesan Waktu Aksi 08121xxx 0856xxx X X 1 2 next>> Gambar 5.19 Desain tampilan Halaman SMS masuk h. Desain Tampilan SMS keluar OUT BOX PESAN No. Tujuan Isi Pesan Status Aksi 08121xxx 0856xxx Terkirim X X 1 2 next>> Gambar 5.20 Desain tampilan Halaman SMS keluar