BAB III ANALISA DAN PERANCANGAN SISTEM

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN SISTEM 5.1 Objek Penelitian Sejarah Mutiara College adalah salah satu lembaga contoh tempat bimbingan UN yang terdapat di daerah Tangerang. Lembaga ini memiliki focus dalam bidang pendidikan mengajarkan soal soal UN melalui penyediaan tempat bimbel dan pengajar yang terpercaya. Mutiara College sudah berdiri sejak beberapa tahun yang lalu dan sudah mencetak siswa siswa yang sukses dalam mengerjakan soal soal UN nya. Yang beralamatkan Ruko Elok Indah 1 Blok B1 no.10 Kota Bumi, Tangerang Kota Sms/WA : Sebagai lembaga kursus Mutiara College selalu memberi layanan terbaik, pengajar yang berkualitas, dan metode belajar yang membuat siswa merasa mudah dan puas.hal ini yang menjadikan kami sebagai lembaga penyedia guru privat yang paling diminati ditangerang Visi dan Misi Visi Menjadi lembaga pendidikan yang dibutuhkan oleh masyarakat. selalu memberikan layanan program bimbingan belajar yang bermutu untuk meningkatkan prestasi akademik siswa disekolah. Misi Memberikan layanan jasa pendidikan yang progresif, kreatif, dan inovatif dengan memperhatikan potensi dan kebutuhan individu. Membangun Profesionalisme manajemen lembaga, program kemitraan, dan instruktur yang berkualitas. Menjadi sahabat bagi siswa untuk meraih prestasi dan menjadi juara. 33

2 Membantu Peserta didik mengembangkan kualitas diri untuk mencapai prestasi terbaik. Menjadi mitra kerja yang mampu membantu menjawab kebutuhan dalam pengembangan dalam dunia pendidikan Struktur Organisasi Manajer Guru istrasi Pembantu Umum Petugas Keamanan Gambar 3.1 Sturktur Oraganisasi Perusahaan 1. Manajer Melakukan proses belajar meengajar. Mengorganisasikan kegiatan. Mengkoordinasikan kegiatan. Melakukan evaluasi terhadap kegiatan. Mengambil keputusan. 2. Guru Membuat perangkat program pengajaran. Melakukan Program pembelajaran. Melaksanakan kegiatan penilaian proses belajar. 34

3 3. istrasi Penyusunan program kerja istrasi kursus. Pengelolaan keuangan kursus. Pengurusan administrasi ketenagaan dan siswa. Penyusunan administrasi perlengkapan kursus. 4. Pembantu Umum Menatur dan mengembangkan hubungan dengan masyarakat. Menyelenggarakan bakti social, karyawisata. Menyelenggarakan pameran hasil pendidikan di tempat kursus. Menyusun laporan. 5. Keamanan Mengisi keamanan catatan kejadiaan. Mengantar/meberi petunjuk tamu kursus Analisa Sistem Berjalan Pembayaran kursus bimbel di Mutiara College selama ini masih menggunakan berkas atau form yang berupa fisik/kertas, sehingga hal ini dapat sangat mengganggu kegiatan manajer yang di tuntut untuk melakukan pengambilan keputusan yang relatif singkat. Penumpukan dokumen selain memerlukan tempat penyimpanan yang berlebihan dan riskan untuk terjadinya kerusakan atau kehilangan, penumpukan dokumen juga dapat menyulitkan admin untuk mengelola dokumen. 35

4 Use Case Berjalan Mengisi Form Pembayaran Melakukan Pembayaran Siswa Mengecek Form Pembayaran Mendata Pembayaran Manager Laporan Gambar 3.2 Use Case Berjalan Tabel 3.1 Deskripsi Usecase Berjalan Mengisi Form Pembayaran Nama Use case Aktor Deskripsi Pra kondisi Tindakan Utama Pasca kondisi Mengisi Form Pembayaran Siswa Siswa Mengisi Form Pembayaran Siswa mengisi form pembayaran sesuai kebutuhan siswa Use case ini mendeskripsikan proses siswa mengisi form pembayaran yang sudah disediakan oleh pihak BIMBEL Siswa memberikan form pembayaran ke admin 36

5 Tabel 3.2 Deskripsi Usecase Berjalan Melakukan Pembayaran Nama Use case Melakukan Pembayaran Aktor Deskripsi Pra kondisi Tindakan Utama Pasca kondisi Siswa Siswa Melakukan Pembayaran Siswa Melakukan Pembayaran, setelah siswa mengisi form pembayaran sesuai kebutuhan siswa Use case ini mendeskripsikan proses siswa yang harus membayar sesuai kebutuhan, Setelah melakukan pembayaran, bukti pembayaran nya diberikan kepada admin. Tabel 3.3 Deskripsi Usecase Berjalan Mengecek Form Pembayaran Nama Use case Mengecek Form Pembayaran Aktor Deskripsi Pra kondisi - Tindakan Utama Pasca kondisi - Mengecek Pembayaran Use case ini mendeskripsikan proses hanya mengecek pembayaran. Tabel 3.4 Deskripsi Usecase Berjalan Mendata Pembayaran Nama Use case Mendata Pembayaran Aktor Deskripsi Pra kondisi - Tindakan Utama Pasca kondisi - Mendata Pembayaran Use case ini mendeskripsikan proses hanya mendata pembayaran yang siswa sudah diberikan kepada admin. 37

6 Tabel 3.5 Deskripsi Usecase Berjalan Laporan Nama Use case Laporan Aktor Deskripsi Pra kondisi - Tindakan Utama Pasca kondisi dan Manajer memberikan laporan kepada manajer Use case ini mendeskripsikan proses hanya mengecek pembayaran. memberikan laporan berbentuk print out. 3.2 Analisa Sistem Yang Diusulkan Dari beberapa permasalahan yang terjadi di tempat kursus bimbel Mutiara College tersebut, maka dibuatlah sistem yang baru untuk Mutiara College untuk memberikan kemudahan dalam transaksi pembayaran dengan siswa dan mempercepat proses bisnis di Mutiara College tersebut Perancangan Sistem Dalam perancangan website ini, penulis menggunakan metode UML (United Modeling Language). Perlu diketahui metodeuml merupakan metode objek oriented programing (oop) atau pemograman berorientasi objek yang menggunakan notasi grafik dalam menyatakan suatu desain. Pemodelan dengan UML menggambarkan yang ada dalam dunia nyata ke dalam bentuk yang dapat dipahami dengan menggunakan notasi standar UML Use Case Diagram Untuk Mutiara College Use case adalah rangkaian/uraian sekelompok yang saling terkait dan membentuk sistem secara teratur yang dilakukan atau diawasi oleh sebuah actor. Berikut dibawah ini : Diagram Use case pada sistem perancangan aplikasi web ini melibatkan aktor administrator. Sistem diawali dengan use case admin yang dilakukan oleh 38

7 administrator, kemudian admin akan membaca alur dari use case tersebut, lalu dilanjutkan dengan admin menginput data, mengubah data, dan menghapus data. Dibawah ini diagram use case dari perancangan aplikasi berbasis web yang dilakukan oleh actor administrator. Use Case Usulan Mengelola Data Master Siswa <<Include>> Mengelola Data Master Paket <<Include>> Cek Data Siswa <<Include>> <<Include>> Login Manajer Input Pembayaran <<Include>> Cetak Laporan Gambar 3.3 Use Case Sistem Usulan Deskripsi use case digunakan untuk memudahkan dalam menganalisa skenario yang akan kita gunakan pada fase-fase selanjutnya dengan melakukan penilaian terhadap skenario tersebut. Berikut deskripsi use case yang diusulkan: 39

8 Tabel 3.6 Deskripsi Usecase Sistem Ususlan Mengelola Data Master Siswa Nama Use case Mengelola Data Master Siswa Aktor Deskripsi Jika admin berhasil login maka sistem akan menampilkan halaman menu utama, setelah itu admin memilih menu data master. Lalu sistem akan menampilkan menu data master, setelah itu admin memilih menu siswa sesuai kebutuhan yang ingin dikelola oleh admin. Setelah itu sistem akan menampilkan data master yang ingin dikelola oleh admin dari menu siswa. Setelah itu admin harus menginput data yang ingin dikelola oleh admin. Lalu sistem akan menyimpen data langsung kedalam database. Tabel 3.7 Deskripsi Usecase Sistem Ususlan Mengelola Data Master Paket Nama Use case Mengelola Data Master Paket Aktor Deskripsi Jika admin berhasil login maka sistem akan menampilkan halaman menu utama, setelah itu admin memilih menu data master. Lalu sistem akan menampilkan menu data master, setelah itu admin memilih menu siswa sesuai kebutuhan yang ingin dikelola oleh admin. Setelah itu sistem akan menampilkan data master yang ingin dikelola oleh admin dari menu paket. Setelah itu admin harus menginput data yang ingin dikelola oleh admin. Lalu sistem akan menyimpen data langsung kedalam database. Tabel 3.8 Deskripsi Usecase Sistem Usulan Cek Data Siswa Nama Use case Cek Data Siswa Aktor 40

9 Deskripsi Dimulai dari admin mengisi kolom login pada halaman login, admin memilih menu pembayaran dan sistem akan menampilkan menu pembayaran. Setelah itu admin menginput nomor induk siswa, lalu sistem akan menampilkan data dan save data pembayaran. Tabel 3.9 Deskripsi Usecase Sistem Ususlan Input Pembayaran Nama Use case Input Pembayaran Aktor Deskripsi Dimulai dari admin mengisi kolom login pada halaman login, admin memilih menu pembayaran, lalu sistem akan menampilkan menu pembayaran. Setelah itu admin memilih tambah transaksi jika ingin menginput pembayaran. Setelah itu admin masukan input NIS, sistem akan menampilakan data pembayaran sesuai NIS. Lalu admin cetak transaksi untuk bukti bahwa siswa sudah transaksi pembayaran. Tabel 3.10 Deskripsi Usecase Sistem Ususlan Cetak Laporan Nama Use case Cetak Laporan Aktor Deskripsi dan Manajer Dimulai dari admin mengisi kolom login pada tampilan halaman login, admin memilih menu laporan lalu sistem akan menampilkan menu laporan. Setelah itu admin menginput data laporan periode. Dan setelah itu sistem akan menampilkan menu laporan dan save data laporan tetapi berbentuk print, lalu admin cetak laporan dan manajer menerima laporan. 41

10 Tabel 3.11 Deskripsi Usecase Sistem Ususlan Login Nama Use case Login Aktor Deskripsi Untuk mengakses informasi maka aktor harus Mengisi Form Login terlebih dahulu yang akan di validasi kesesuaiannya oleh sistem Activity diagram Activitydiagrammenggambarkan urutan aktifitas untuk suatu proses tertentu. Berdasarkan use case yang ada, dibuat activity diagram untuk masingmasing use case. Berikut ini adalah diagram aktivitas website Mutiara College. Sistem Membuka Website Menampilkan Halaman Login Masukan dan Password Pada Form Login Gagal Berhasil Masuk Ke Halaman Selanjutnya Gambar 3.4 Tampilan Login 42

11 Pada Gambar 3.4 di atas aktivitas dimulai jika admin sudah membuka website. Lalu sistem akan menampilkan halaman login, setelah itu admin masukan username dan password pada form login, jika sukses maka sistem akan menampilkan halaman selanjutnya jika gagal sistem akan menampilkan halaman login. Sistem Membuka Website Menampilkan Halaman Login Gagal Isi Username dan password Berhasil Data Master Menampilkan Menu Home Pilih Menu Siswa Menampilkan Menu Siswa Tambah Edit Hapus Menampilkan data sesuai kebutuhan admin dan simpan data Gambar 3.5 Activity Diagram Menginput Dan Mengelola Data Siswa Pada Gambar 3.5 di atas aktivitas jika admin berhasil login maka sistem akan menampilkan halaman menu utama, setelah itu admin memilih menu data master. Lalu sistem akan menampilkan menu data master, setelah itu admin memilih menu siswa sesuai kebutuhan yang ingin dikelola oleh admin. Setelah itu sistem akan menampilkan data master yang ingin dikelola oleh admin dari menu siswa. Setelah itu admin harus menginput data yang ingin dikelola oleh admin. Lalu sistem akan menyimpen data langsung kedalam database. 43

12 Sistem Membuka Website Menampilkan Halaman Login Gagal Isi Username dan password Berhasil Data Master Menampilkan Menu Home Pilih Menu Paket Menampilkan Menu Paket Tambah Edit Hapus Menampilkan data sesuai kebutuhan admin dan simpan data Gambar 3.6 Activity Diagram Menginput Dan Mengelola Data Paket Pada Gambar 3.6 di atas aktivitas jika admin berhasil login maka sistem akan menampilkan halaman menu utama, setelah itu admin memilih menu data master. Lalu sistem akan menampilkan menu data master, setelah itu admin memilih menu paket sesuai kebutuhan yang ingin dikelola oleh admin. Setelah itu sistem akan menampilkan data master yang ingin dikelola oleh admin dari menu paket. Setelah itu admin harus menginput data yang ingin dikelola oleh admin. Lalu sistem akan menyimpen data langsung kedalam database. 44

13 Sistem Pilih Menu Pembayaran Menampilkan Menu Pembayaran Input NIS Klik Simpan Menampilkan dan Save Detail Pembayaran Cetak Transaksi Gambar 3.7 Activity Diagram Input Pembayaran Pada Gambar 3.7 di atas aktivitas dimulai admin memilih menu pembayaran, lalu sistem akan menampilkan menu pembayaran. Setelah itu admin memilih tambah transaksi jika ingin menginput pembayaran. Setelah itu admin masukan input NIS, sistem akan menampilakan data pembayaran sesuai NIS. Lalu sistem cetak transaksi untuk bukti bahwa siswa sudah transaksi pembayaran. 45

14 Sistem Pilih Menu Pembayaran Menampilkan Menu Pembayaran Input NIS Klik Simpan Menampilkan dan Save Detail Pembayaran Gambar 3.8 Activity Diagram Cek Data Siswa Pada Gambar 3.8 di atas aktivitas dimulai dari admin memilih menu pembayaran dan sistem akan menampilkan menu pembayaran. Setelah itu admin menginput nomor induk siswa, lalu sistem akan menampilkan data dan save data pembayaran. 46

15 Sistem Manajer Pilih Menu Laporan Menampilkan Menu Laporan Input Periode Klik Simpan Menampilkan dan Save Data Laporan yang berbentuk print out Cetak Laporan Terima Laporan Print Out Gambar 3.9 Activity Diagram Cetak Laporan Pada Gambar 3.9 di atas aktivitas dimulai dari admin memilih menu laporan lalu sistem akan menampilkan menu laporan. Setelah itu admin menginput data laporan periode. Dan setelah itu sistem akan menampilkan menu laporan dan save data laporan, lalu sistem cetak laporan dan manajer terima laporan berupa print out. 47

16 3.2.4 Sequence Diagram Sequence diagram digunakan untuk mengambarkan perilaku pada sebuah skenario. Diagram ini menunjukan sejumlah contoh objek dan message (pesan) yang diletakan diantara obyek-obyek ini di dalam use case.sequence diagram menggambarkan interaksi antar objek di dalam dan disekitar sistem (termasuk pengguna, display, dan sebagainya) berupa pesan yang digambarkan terhadap waktu. Menu Utama Pembayaran Menu Transaksi Transaksi Buka Pilih Buka Get Data Menampilkan Form Transaksi Input No Transaksi Menampilkan Input NIS Save Gambar 3.10 Sequence Diagram Pembayaran Pada Gambar 3.10 di atas menggambarkan proses yang sedang terjadi saat admin ingin mengetahui proses pembayaran. Proses dimulai saat admin membuka menu utama, dan setelah itu admin memilih menu pembayaran. Lalu admin membuka menu transaksi dan sistem akan menampilkan menu form transaksi. Setelah itu admin 48

17 menginput data transaksi yang ingin di kelola oleh admin, admin hanya bisa menghapus data transaksi. Menu Utama Data Master Menu Siswa Siswa Buka Pilih Buka Get Data Menampilkan Form Siswa Menampilkan Input Nama Lengkap Input Umur Input Jenis Kelamin Input No Hp Input Alamat Lengkap Input Pilih Paket Save Gambar 3.11 Sequence Diagram Data Master Siswa Pada Gambar 3.11 di atas menggambarkan proses yang sedang terjadi saat admin ingin mengetahui proses mengelola data master siswa. Proses dimulai saat admin membuka menu utama, dan setelah itu admin memilih menu data master siswa. Lalu admin membuka menu siswa dan sistem akan menampilkan menu form siswa. Setelah itu admin menginput data siswa yang ingin di kelola oleh admin, admin hanya bisa menghapus dan mengedit data siswa. 49

18 Tampilan Login User Menu Utama Tampilan Login Input User Name dan Password Validasi Gagal Login Masuk Menu Utama Gambar 3.12 Sequence Diagram Tampilan Login Pada Gambar 3.12 di atas menggambarkan proses yang sedang terjadi saat admin ingin mengetahui proses login. Proses dimulai saat admin membuka website, dan setelah itu sistem akan menampilkan menu halaman login. lalu menginput username dan password . Dan jika proses login berhasil maka sistem akan memproses menu utama. Dan jika gagal sistem akan kembali ke halaman tampilan login. 50

19 Menu Utama Data Master Menu Paket Paket Buka Pilih Buka Get Data Menampilkan Form Paket Menampilkan Input Nama Paket Input Harga Paket Input Fasilitas Input Keterangan Save Gambar 3.13 Sequence Diagram Data Master Paket Pada Gambar 3.13 di atas menggambarkan proses yang sedang terjadi saat admin ingin mengetahui proses mengelola data master paket. Proses dimulai saat admin membuka menu utama, dan setelah itu admin memilih menu data master paket. Lalu admin membuka menu paket dan sistem akan menampilkan menu form paket. Setelah itu admin menginput data paket yang ingin di kelola oleh admin, admin hanya bisa menghapus dan mengedit data paket. 51

20 Menu Utama Pembayaran Transaksi Buka Pilih Buka Menampilkan Form Transaksi Gambar 3.14 Sequence diagram Cek Data Siswa Pada Gambar 3.14 di atas menggambarkan proses yang sedang terjadi saat admin ingin mengetahui proses cek data. Proses dimulai saat admin membuka menu utama, dan setelah itu admin memilih menu pembayaran. Lalu admin membuka menu transaksi dan sistem akan menampilkan from transaksi, setelah itu admin mengecek data siswa ada berapa siswa yang masuk kedalam admin. 52

21 Menu Utama Laporan Laporan Transaksi Manajer Buka Pilih Menampilkan Form Laporan Input Dari Tanggal Buka Input Sampai Tanggal Print Print Terima Laporan Gambar 3.15 Sequence Diagram Laporan Pada Gambar 3.15 di atas menggambarkan proses yang sedang terjadi saat admin ingin mengetahui proses laporan. Proses dimulai saat admin membuka menu utama, dan setelah itu admin memilih menu laporan. Lalu admin membuka menu laporan transaksi dan setelah itu sistem akan menampilkan form laporan. Setelah itu admin menginput data laporan, dan sistem akan menampilkan data laporan yang ingin dicetak atau di print oleh admin. 53

22 3.2.5 Class Diagram Class diagram menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi keadaan tersebut (metode/fungsi).class diagram menggambarkan struktur dan deskripsi class, package dan objek beserta hubungan satu sama lain seperti containment, pewarisan, dan asosiasi. Paket Siswa -* Id -NIS -nama -umur -jk -no_hp -alamat -created_at -updated_at -** paket_id -flag +Edit() +Hapus() +Tambah() 1 1 M 1 -*id -nama_paket -harga_paket -fasilitas -keterangan -created_at -updated_at +Edit() +Hapus() +Tambah() 1 M Transaksi -id -no_transaksi -** siswa_id -** paket_id -tgl -created_at -updated_at +Edit() +Hapus() +Tambah() Users -*id -name -username - -password -remember_token -created_at -updated_at +Edit() +Hapus() +Tambah() Gambar 3.16 Class Diagram Keterangan Pada Gambar 3.16 diatas menjelaskan dalam satu program dapat melakukan beberapa kali kegiatan semisalnya: Siswa hanya dapat mendaftar satu paket. Kemudian admin mengelola data siswa dan mengelola pembayaran siswa. 54

23 Tabel 3.12 Tabel Siswa No Nama Field Tipe Data Panjang Keterangan 1. Id Siswa Int 10 Primary key 2. NIS Varchar 15 NIS Siswa 3. Nama Siswa Varchar 30 Nama Siswa 4. Umur Varchar 2 Umur SIswa 5. Jk Varchar 1 Jenis Kelamin 6. No_hp Varcharr 12 No_hp 7. Alamat Text Alamat 8. Created_at Timestamp 9. Update_at Timestamp 10. Paket_Id Int 11 Paket 11. Flag Int 11 Tabel 3.13 Tabel Paket No Nama Field Tipe Data Panjang Keterangan 1. Id Paket Int 10 Primary key 2. Nama_paket Varchar 15 Nama paket 3. Harga_paket Varchar 10 Harga paket 4. Fasilitas Varchar 50 Fasilitas 5. Keterangan Text 50 Keterangan 6. Created_at Timestamp 7. Updated_at Timestamp 55

24 Tabel 3.14 Tabel Transaksi No Nama Field Tipe Data Panjang Keterangan 1. Id Transaksi Int 10 Primary key 2. No_transaksi Varchar 20 No Transaksi 3. Siswa_id Int 11 Id Siswa 4. Paket_id Int 11 Id Paket 5. Tanggal Datetime Tanggal 6. Created_at Timestamp 7. Updated_at Timestamp Tabel 3.15 Tabel User No Nama Field Tipe Data Panjang Keterangan 1. Id User Int 10 Primary key 2. Nama Varchar 15 Nama User 3. Username Varchar 25 Username 4. Varchar 25 User 5. Password Varchar 10 Password User 6. Remember_token Varchar Created_at Timestamp 8. Updated_at Timestamp 56

25 3.2.6 Rancangan Antar Muka Perancangan tampilan website merupakan rancangan dari desain website yang akan dibangun, desain ini akn menentukan sebuah karakteristik dari website yang dibangun, serta memperlihatkan dilingkunga seperti apa website nanti akan ditempatkan. Berikut ini desain tampilandari website yang akan dibangun Rancangan Login Tampilan dibawah ini adalah rancangan antar muka Halaman Login pada aplikasi Mutiara College. Gambar 3.17 Rancangan Halaman Login 57

26 Rancangan Halaman Home Tampilan dibawah ini adalah rancangan antar muka menu halaman home pada aplikasi Mutiara College. Gambar 3.18 Rancangan Halaman Home Rancangan Halaman Data Master Tambah Siswa Tampilan dibawah ini adalah rancangan antar muka menu halaman Data Master Tambah Siswa pada aplikasi Mutiara College. Gambar 3.19 Rancangan Halaman Data Master Tambah Siswa 58

27 Rancangan Halaman Data Master Daftar Siswa Tampilan dibawah ini adalah rancangan antar muka menu halaman Data Master Daftar Siswa pada aplikasi Mutiara College. Gambar 3.20 Rancangan Halaman Data Master Daftar Siswa Rancangan Halaman Data Master Tambah Paket Tampilan dibawah ini adalah rancangan antar muka menu halaman Data Master Tambah Paket pada aplikasi Mutiara College. Gambar 3.21 Rancangan Halaman Data Master Tambah Paket 59

28 Rancangan Halaman Data Master Daftar Paket Tampilan dibawah ini adalah rancangan antar muka menu halaman Data Master Daftar Paket pada aplikasi Mutiara College. Gambar 3.22 Rancangan Halaman Data Master Daftar Paket Rancangan Halaman Data Master Transaksi Tampilan dibawah ini adalah rancangan antar muka menu halaman Data Master Tambah Transaksi pada aplikasi Mutiara College. Gambar 3.23 Rancangan Halaman Data Master Tambah Transaksi 60

29 Rancangan Halaman Data Master Daftar Transaksi Tampilan dibawah ini adalah rancangan antar muka menu halaman Data Master Daftar Transaksi pada aplikasi Mutiara College. Gambar 3.24 Rancangan Halaman Data Master Daftar Transaksi Rancangan Halaman Data Master Tampilan dibawah ini adalah rancangan antar muka menu halaman Data Master Tambah pada aplikasi Mutiara College. Gambar 3.25 Rancangan Halaman Data Master Tambah 61

30 Rancangan Halaman Data Master Laporan Tampilan dibawah ini adalah rancangan antar muka menu halaman Data Master laporan pada aplikasi Mutiara College. Gambar 3.26 Tampilan Laporan 62