BAB III

PERANCANGAN SISTEM

3.1. Studi Kasus

Lembaga kursus Be Smart In English adalah sebuah lembaga

pendidikan kursus untuk siswa SMP. Dimana yang dulunya pendaftaran

ditempat kursus ini dilakukan secara manual dan dimana orang tua siswa

harus datang langsung ketempat kursus untuk mendaftarkan anaknya.

Namun tentunya para orang tua tersebut akan mengalami kesulitan

dikarenakan mereka harus bekerja pada saat jam buka tempat kursus.

Jadi jika para orang tua merasa sulit untuk mendaftarkan anaknya

karena terkendala waktu yang bertabrakan dengan jam kerja dan jarak

tempuh tempat kerjanya dengan tempat kursus maka berdasarkan analisa

tersebut pendaftaran kursus bahasa inggris Be Smart In English untuk siswa

ini akan dilakukan secara online akan memudahkan bagi admin kursus

tersebut maupun para pendaftar yang dalam hal ini adalah para orang tua

siswa dalam mendaftarkan anakanya di lembaga kursus, sehingga system ini

dibuat dimana orang tua menjadi peserta yang melakukan pendaftaran di

form registrasi dan setelah di verifikasi oleh admin maka bisa login untuk

melihat dan mengedit data dirinya sekaligus melihat statistik pembayaran

yang telah dilakukannya. Untuk admin sendiri dapat melihat daftar seluruh

peserta, mengedit sekaligus juga menambahkan peserta.

3.2. Perancangan Diagram

Untuk membuat sebuah sistem yang dapat berjalan baik dan sesuai

harapan yang diinginkan maka tentunya terlebih dahulu haruslah membuat

tahapan perencanaan sistem berupa use case diagram, class diagram,

sequence diagram, activity diagram dan component diagramnya.

29

30

3.2.1. Use Case

Use case diagram dari sistem pendaftaran online lembaga kursus Be

Smart In English adalah sebagai berikut :

1. Diagram Use Case

2. Definisi aktor

Tabel 3.1. Definisi aktor

No Aktor Deskripsi

1 Peserta Peserta adalah orang yang melakukan registrasi

pada sistem untuk mendaftarkan anaknya atau

dirinya sendiri dengan mengisi form registrasi,

lalu melakukan pembayaran melalui transfer bank

setelah registrasi telah diverifikasi oleh admin

2 Admin Admin adalah orang yang bertugas dan memiliki

hak akses untuk melakukan verifikasi registrasi

Gambar 3. 1. Use case diagram

31

yang telah dilakukan peserta, lalu mengirimkan

tagihan, setelah tagihan terbayarkan maka admin

akan mengaktifkan status siswa tersebut sebagai

siswa kursus.

3. Definisi Use Case

Tabel 3.2. Definisi use case

No Nama Honor

1 registrasi Proses yang dilakukan oleh peserta untuk bisa

masuk kedalam sistem nantinya.

2 Pembayaran Merupakan proses yang dilakukan oleh peserta.

3 Menerima

tagihan

Proses yang dilakukan oleh peserta setelah

admin mengirimkan tagihan.

4 Validasi Merupakan proses pengecekan hak akses siapa

yang berhak mengakses proses pengelolaan

data pendaftaran online yang dalam hal ini

adalah admin.

Validasi merupakan generalisasi dari proses

login, logout, verifikasi registrasi, dan

memeriksa status login

5 Login Merupakan proses untuk melakukan login oleh

admin

6 Logout Merupakan proses untuk melakukan logout

oleh admin ataupun peserta

7 Mengelola

peserta

Mengelola pendaftar merupakan generalisasi

dari proses menghapus, mencari, menambah,

mengubah dan melihat peserta.

8 Menghapus

peserta

Merupakan proses yang dapat dilakukan oleh

admin setelah login untuk menghapus peserta

9 Menambah Merupakan proses yang dapat dilakukan oleh

32

peserta admin setelah login untuk menambah peserta

dan bagi peserta dalam hal ini dalam hal

registrasi

10 Mencari

peserta

Merupakan proses yang dapat dilakukan oleh

admin setelah login untuk mencari list peserta

yang telah registrasi

11 Mengubah

peserta

Merupakan proses yang dapat dilakukan oleh

admin atau peserta setelah login untuk

mengubah data peserta jika ada peserta yang

ingin melakukan perubahan datanya

12 Melihat

peserta

Merupakan proses yang dapat dilakukan oleh

admin dan peserta setelah login untuk melihat

list peserta bagi admin dan melihat data diri

bagi peserta

13 Mengelola

admin

Merupakan proses generalisasi dari proses

verifikasi registrasi, kelola nilai dan status

pembayaran

14 Verifikasi

registrasi

Merupakan proses yang dilakukan oleh admin

setelah login untuk memverifikasi form

registrasi yang telah diisi oleh peserta yang

ingin mendaftarkan anaknya atau dirinya

sendiri lalu mengirimkan tagihan jika form

telah terverifikasi dengan data yang benar

15 Kirim

tagihan

Merupakan tindakan yang dilakukan oleh

admin jika form telah teregistrasi maka admin

akan mengirimkan tagihan sesuai alamat

peserta

16 Verifikasi

pembayaran

Proses yang dilakukan oleh admin untuk

mengecek apakah peserta telah mengirimkan

pembayarannya

17 Status Merupakan proses yang dilakukan oleh admin

33

pembayaran jika proses registrasi dan pembayaran telah

selesai maka admin akan memberitahukan

status pembayaran peserta dengan mengedit

datanya

18 Memeriksa

status login

Proses yang dilakukan oleh sistem untuk

memeriksa username dan password

3.2.2. Class Diagram

Class diagram untuk pendaftaran online lemabaga kursus Be Smart

In English adalah sebagai berikut :

34

Keterangan :

Tabel 3.3. Keterangan Class diagram

Nama Kelas Keterangan

Main Merupakan kelas main

Antarmuka Merupakan kelas yang menangani tampilan

Validasi Merupakan kelas proses yan diambil dari pendifinisian

use case validasi

Koneksi

Basis Data

Merupakan kelas utilias untuk koneksi ke basis data dan

melakukan query

Mengelola

Peserta

Merupakan kelas proses yang diambil dari pendifinisian

use case mengelola peserta yang didalamnya harus juga

menangani proses menghapus peserta, mencari peserta,

mengubah peserta, menambah peserta dan melihat

peserta.

Mengelola Merupakan kelas proses yang diambil dari pendifinisian

Gambar 3. 2. Class diagram

35

Admin use case mengelola peserta yang didalamnya harus juga

menangani proses verifikasi registrasi dan status

pembayaran.

Admin Merupakan kelas data yang digunakan untuk memproses

segala pengaksesan terhadap tabel admin

Peserta Merupakan kelas data yang digunakan untuk memproses

segala pengaksesan terhadap tabel peserta

3.2.3. Sequence Diagram

Sequence diagram untuk pendaftaran online lembaga kursus Be

Smart in English adalah sebagai berikut :

1. Registrasi

2. Login

Gambar 3. 3. Sequence diagram registrasi

36

3. Melihat peserta

Gambar 3. 4. Sequence diagram login

37

4. Menghapus peserta

Gambar 3. 5. Sequence diagram melihat peserta

38

5. Mencari peserta

Gambar 3. 6. Sequence diagram menghapus peserta

39

6. Mengubah peserta

Gambar 3. 7. Sequence diagram mencari peserta

40

7. Menambah Peserta

41

8. Logout

3.2.4. Activity Diagram

Activity diagram untuk pendaftaran online lembaga kursus Be

Smart In English adalah sebagai berikut :

Gambar 3. 9. Sequence diagram menambah peserta

Gambar 3. 10. Sequence diagram logout

42

3.2.5. Component Diagram

Untuk komponen diagram dari perancangan sistem Be Smart

In English adalah sebagai berikut :

Gambar 3. 11. Activity diagram

43

3.3. Perancangan User Interface

Setelah perancangan diagram telah dibuat maka selanjutnya adalah

perancangan user interface sebagai berikut :

1. Halaman awal

Gambar 3. 12. Component diagram

44

2. Halaman registrasi

3. Halaman utama admin

Gambar 3. 14. Perancangan UI halaman registrasi

Gambar 3. 13. Halaman awal

45

4. Halaman view peserta oleh admin

5. Halaman edit peserta oleh admin

Gambar 3. 15. Perancangan UI halaman admin

Gambar 3. 16. Perancangan UI view peserta

46

6. Halaman tambah peserta oleh admin

7. Halaman utama peserta

Gambar 3. 17. Perancangan UI edit peserta

Gambar 3. 18. Perancangan UI tambah peserta

47

8. Halaman view data diri oleh peserta

9. Halaman edit data diri peserta

Gambar 3. 19. Perancangan UI halaman utama

Gambar 3. 20. Perancangan UI view data

48

10. Halaman statistik pembayaran kursus

Gambar 3. 21. Perancangan UI edit data diri

Gambar 3. 22. Perancangan UI halaman statistik