BAB IV

USULAN PENELITIAN

4.1 Deskripsi Usulan Penelitian

Pada penelitian ini, penulis mengambil judul “Sistem Informasi

Pelayanan Lembaga Belajar Berbasis Web Dengan Menggunakan Metode

Customer Relationship Management” Lembaga Kursus NSP (New Smart People)

merupakan Lembaga kursus yang bergerak dibidang pendidikan nonformal yang

sudah berjalan selama 10 tahun di Serang. Yang di tuntut harus mendapatkan

peserta kursus atau siswa dan mempertahankannya, oleh karena itu Lembaga

Kursus NSP (New Smart People) harus menjaga hubungan baik dengan peserta

kursus atau siswa, dengan cara menyediakan pelayanan berupa website agar

peserta kursus atau siswa dapat mendapatkan pelayanan kursus yang baik. Sistem

informasi ini dibangun menggunakan bahasa pemrograman HTML, CSS, PHP,

Bootstrap dan Laravel sebagai framework dan MySQL sebagai database. Dengan

di sediakannya sarana pelayanan ini diharapkan dapat mempermudah pihak

lembaga kursus dalam mengakses data kursus dan penilaian yang diberikan

peserta kursus atau siswa yang masuk ke sistem yang sudah dibuat berupa website

dan bisa diakses kapan saja.

4.2 Rancangan Usulan Penelitian

Proses perancangan program dalam pembuatan sistem ini menggunakan

diagram Unified Modelling Language (UML) untuk menggambarkan perancangan

sistem yang akan dibangun secara umum. Diagram UML membantu untuk
 29

menjelaskan suatu fitur yang tersedia dan bagaimana suatu masukan diproses pada

sistem yang dalam proses pemodelannya meliputi use case diagram dengan use

case, Activity diagram, Sequence diagram dan class pada class diagram.

4.2.1 Use Case Diagram

Use case diagram menunjukkan actor, dan use case, serta

relationship-nya. Use case diagram sangat penting untuk pembuatan

model dan pengorganisasian sistem. Berikut adalah use case diagram

yang digunakan untuk mengakses website ini:

Gambar 4.1 Use Case Diagram

(Sumber :Dokumen Pribadi)

4.2.2 Deskripsi Use Case

Use Case Diagram pada Gambar 4.1 tersebut memiliki fungsi sebagai

berikut :
 30

1. Use Case login

Use Case Login merupakan gambaran untuk bisa masuk ke

halaman utama. Deskripsi bisa dilihat pada gambar 4.2, sedangkan untuk

melihat tabel login bisa dilihat pada Tabel 4.1.

Gambar 4.2 Use Case Login Admin dan User

(Sumber :Dokumen Pribadi)

Tabel 4.1 Deskripsi Use Case Login

Name Of Use Case Login

Actor User dan Admin
Deskripsi User dan Admin melakukan
proses login agar bisa
masuk ke halaman masing-
masing yang tersedia
Pre Condition User dan Admin melakukan
login
Flow Of Event User atau Admin
memasukan username dan
password masing-masing
dengan benar dan klik
tombol login
Post Condition User dan Admin masuk ke
halaman masing-masing
yang tersedia
Alternative Flow Jika User atau Admin
memasukan data yang salah
maka sistem akan
menampilkan pesan
kesalahan dan meminta
input ulang
 31

2. Use Case Registrasi

Use Case ini untuk menggambarkan User registrasi. Deskripsi

untuk User registrasi bisa dilihat pada Gambar 4.3 dan Tabel 4.2.

Gambar 4.3 Use Case Registrasi

(Sumber : Dokumen Pribadi)

Tabel 4.2 Deskripsi Use Case Registrasi

Name Of Use Case Registrasi

Actor User
Deskripsi User melakukan registrasi
dengan melengkapi data diri
agar bisa melakukan
pendaftaran kursus
Pre Condition Berada dihalaman registrasi
Flow Of Event User masuk, setelah masuk
tampil form kelengkapan
diri pada halaman registrasi
Post Condition Sistem akan menampilkan
form registrasi
Alternative Flow
 32

3. Use Case Melihat Rekomendasi Kursus

Use Case ini untuk menggambarkan User melihat rekomendai

kursus. Deskripsi untuk User melihat rekomendasi kursus bisa dilihat pada

Gambar 4.4 dan Tabel 4.3.

Gambar 4.4 Use Case Melihat Rekomendasi Kursus

(Sumber :Dokumen Pribadi)

Tabel 4.3 Deskripsi Use Case Melihat Rekomendasi Kursus

Name Of Use Case Melihat Rekomendasi

Kursus.
Actor User
Deskripsi Use case ini
menggambarkan User
melihat rekomendai kursus
Pre Condition Menampilkan halaman
rekomendasi kursus
Flow Of Event User masuk, setelah masuk
tampil detail kursus
Post Condition Sistem akan menampilkan
deskripsi detail kursus
Alternative Flow
 33

4. Use Case User Memilih Kursus

Use Case ini untuk menggambarkan User memilih kursus.

Deskripsi untuk User memilih kursus yang di inginkan dilihat pada

Gambar 4.5 dan Tabel 4.4.

Gambar 4.6 Use Case Admin Memilih Kursus

(Sumber :Dokumen Pribadi)

Tabel 4.5 Deskripsi Use Case User Mengelola Data User

Name Of Use Case Memilih Kursus

Actor User
Deskripsi User memilih kursus yang
diinginkan
Pre Condition User menambahkan kursus
yang ingin diikuti oleh User
Flow Of Event User memillih kursus
Post Condition User berhasil melakukan
pemilihan kursus
Alternative Flow
 34

5. Use Case User Melakukan Pembayaran

Use Case ini untuk menggambarkan User Melakukan

Pembayaran. Deskripsi untuk User melakukan pembayaran yang di

inginkan dilihat pada Gambar 4.6 dan Tabel 4.5.

Gambar 4.6 Use Case Admin Melakukan Pembayaran

(Sumber :Dokumen Pribadi)

Tabel 4.5 Deskripsi Use Case User Melakukan Pembayaran

Name Of Use Case Melakukan Pembayaran

Actor User
Deskripsi User melakukan
pembayaran
Pre Condition User melakukan
pembayaran setelah
memilih kursus yang ingin
di ikuti
Flow Of Event User membayar
Post Condition User berhasil melakukan
pembayaran
Alternative Flow
 35

6. Use Case User Mengikuti Kursus

Use Case ini untuk menggambarkan User mengikuti kursus.

Deskripsi untuk User mengikuti kursus dilihat pada Gambar 4.7 dan Tabel

4.6.

Gambar 4.7 Use Case User Mengikuti Kursus

(Sumber :Dokumen Pribadi)

Tabel 4.6 Deskripsi Use Case User Mengikuti Kursus

Name Of Use Case Mengikuti Kursus

Actor User
Deskripsi User mengikuti kursus
Pre Condition
Flow Of Event User memUseri materi yang
diberikan Admin
Post Condition Selesai
Alternative Flow

7. Use Case User Memberikan Rating

Use Case ini untuk menggambarkan User memberikan rating.

Deskripsi untuk User memberikan rating dilihat pada Gambar 4.8 dan

Tabel 4.7.
 36

Gambar 4.8 Use Case User Memberikan Rating

(Sumber :Dokumen Pribadi)

Tabel 4.7 Deskripsi Use Case User Mengelola Data Pesanan

Name Of Use Case Memberikan Rating

Actor User
Deskripsi User memberikan rating
disistem
Pre Condition User melakukan
memberikan rating 1
sampai 5
Flow Of Event User memberikan rating
Post Condition Selesai
Alternative Flow

8. Use Case User Mengelola Data Pribadi

Use Case ini untuk menggambarkan User mengelola data pribadi.

Deskripsi untuk User mengelola data pribadi dilihat pada Gambar 4.9 dan

Tabel 4.8.

Gambar 4.9 Use Case User Mengelola Data Pribadi

(Sumber :Dokumen Pribadi)

Tabel 4.8 Deskripsi Use Case User Mengelola Data Pribadi

Name Of Use Case Mengelola Data Pribadi

Actor User
Deskripsi User melakukan pengolahan
data pribadi
Pre Condition User melakukan olah data
pribadi
Flow Of Event User mengolah data dengan
 37

membaca atau menghapus

data pribadi
Post Condition User berhasil melakukan
olah data pribadi
Alternative Flow

9. Use Case Admin Mengelola Kursus

Use Case ini untuk menggambarkan Admin mengelola data kursus.

Deskripsi untuk Admin mengelola data kursus dilihat pada Gambar 4.10

dan Tabel 4.9.

Gambar 4.10 Use Case Admin Mengelola Kursus

(Sumber :Dokumen Pribadi)

Tabel 4.9 Deskripsi Use Case User Mengelola Kursus

Name Of Use Case Mengelola Kursus

Actor Admin
Deskripsi Admin melakukan
pengolahan kurus
Pre Condition Admin melakukan olah
kurus
Flow Of Event Admin mengolah data
dengan membaca atau
menghapus data kurus
Post Condition Admin berhasil melakukan
olah kursus
Alternative Flow
 38

10. Use Case Admin Mengelola Data User

Use Case ini untuk menggambarkan Admin mengelola data user.

Deskripsi untuk Admin mengelola data user dilihat pada Gambar 4.11 dan

Tabel 4.10.

Gambar 4.11 Use Case Admin Mengelola Data User

(Sumber :Dokumen Pribadi)

Tabel 4.10 Deskripsi Use Case Admin Mengelola Data User

Name Of Use Case Mengelola Data User

Actor Admin
Deskripsi Admin melakukan
pengolahan data user
Pre Condition Admin melakukan olah data
user
Flow Of Event Admin mengolah data
dengan membaca atau
menghapus data user
Post Condition Admin berhasil melakukan
olah data user
Alternative Flow

11. Use Case Admin Melihat Rating

Use Case ini untuk menggambarkan Admin mengelola data diri.

Deskripsi untuk Admin mengelola data diri dilihat pada Gambar 4.12 dan

Tabel 4.11.
 39

Gambar 4.12 Use Case Admin Melihat Rating

(Sumber :Dokumen Pribadi)

Tabel 4.11 Deskripsi Use Case Admin Melihat Rating

Name Of Use Case Admin Melihat Rating

Actor Admin
Deskripsi Admin melihat rating yang
sudah di berikan oleh User
Pre Condition Admin melihat rating
Flow Of Event Admin membaca rating
yang di berikan User
Post Condition Admin berhasil melihat
rating
Alternative Flow

4.2.3 Activity Diagram

Activity Diagram merupakan rancangan aliran aktivitas atau aliran

kerja dalam sebuah sistem yang akan dijalankan. Activity Diagram juga

digunakan untuk mendefinisikan atau mengelompokan aluran tampilan

dari sistem tersebut. Activity Diagram memiliki komponen dengan bentuk

tertentu yang dihubungkan dengan tanda panah. Panah tersebut mengarah

ke-urutan aktivitas yang terjadi dari awal hingga akhir.

 40

1. Activity Diagram Registrasi

Gambar 4.13 Activity Diagram Registrasi

(Sumber : Dokumen Pribadi)

User masuk ke halaman utama dan menekan klik menu registrasi

dan sistem akan menampilkan form pendaftaran, kemudian User mengisi

form pendaftaran dengan lengkap, lalu sistem akan menyimpan kedalam

database.
 41

2. Activity Diagram Login User

Gambar 4.14 Activity Diagram Login User

(Sumber : Dokumen Pribadi)

Pada activity diagram login User di atas User masuk ke halaman

utama, setelah halaman utama terbuka User memasukkan username dan

password yang telah dibuat. User masuk ke halaman utama dan menekan

klik menu registrasi dan sistem akan menampilkan form pendaftaran,

kemudian User mengisi form pendaftaran dengan lengkap, lalu sistem

 42

akan menyimpan kedalam database. Jika username dan password salah

maka User akan diminta untuk memasukkan kembali username dan

password yang benar, kemudian setelah username dan password yang

diinputkan sudah benar maka User akan langsung diarahkan ke menu

home aplikasi User.

3. Activity Diagram Login Admin

Gambar 4.15 Activity Diagram Login Admin

(Sumber : Dokumen Pribadi)

 43

Pada activity diagram login Admin di atas Admin masuk ke halaman

utama, setelah halaman utama terbuka Admin memasukkan username

dan password yang telah dibuat. Jika username dan password salah

maka Admin akan diminta untuk memasukkan kembali username dan

password yang benar, kemudian setelah username dan password yang

diinputkan sudah benar maka Admin akan langsung diarahkan ke menu

home Admin.

4. Activity Diagram Memilih Kursus

Gambar 4.16 Activity Diagram Memilih Kursus

(Sumber : Dokumen Pribadi)

 44

5. Activity Diagram Melakukan pembayaran

Gambar 4.17 Activity Diagram Melakukan Pembayaran

(Sumber : Dokumen Pribadi)

 45

6. Activity Diagram Mengikuti Kursus

Gambar 4.16 Activity Diagram Mengikuti Kursus

(Sumber : Dokumen Pribadi)

 46

7. Activity Diagram Memberi Rating

Gambar 4.14 Activity Diagram Memberi Rating

(Sumber : Dokumen Pribadi)

 47

8. Activity Diagram User Mengelola Data Diri

Gambar 4.15 Activity Diagram User Mengelola Data Diri

(Sumber : Dokumen Pribadi)

 48

9. Activity Diagram Admin Kelola Kursus

Gambar 4.16 Activity Diagram Admin Kelola Kursus

(Sumber : Dokumen Pribadi)

 49

10. Activity Diagram Admin Mengelola Data User

Gambar 4.17 Activity Diagram Admin Mengelola Data User

(Sumber : Dokumen Pribadi)

 50

11. Activity Diagram Admin Melihat Rating

Gambar 4.17 Activity Diagram Admin Melihat Rating

(Sumber : Dokumen Pribadi)

 51

4.2.4 Squence Diagram

Sequence Diagram merupakan urutan yang menunjukan interkasi

objek yang di atur dalam urutan waktu. Sequence diagram bisa

digunakan untuk menggambarkan skenario atau rangkaian langkah-

langkah yang dilakukan sebagai respons dari sebuah event untuk

menghasilkan output tertentu.

1. Squence Diagram Registrasi

Gambar 4.18 Squence Diagram Registrasi

(Sumber : Dokumen Pribadi)

User masuk ke halaman utama dan menekan klik menu registrasi

dan sistem akan menampilkan form pendaftaran, kemudian User

mengisi form pendaftaran dengan lengkap, lalu sistem akan menyimpan

kedalam database.
 52

2. Squence Diagram Login User Dan Admin

Gambar 4.19 Squence Diagram Login User Dan Admin

(Sumber : Dokumen Pribadi)

Pada login User dan Admin di atas User dan Admin masuk ke

halaman utama, setelah halaman utama terbuka User dan pengajaar

memasukkan username dan password yang telah dibuat. Jika username

dan password salah maka User akan diminta untuk memasukkan

kembali username dan password yang benar, kemudian setelah

username dan password yang diinputkan sudah benar maka User akan

langsung diarahkan ke menu home User atau Admin.

 53

3. Squence Diagram Melihat Rekomendasi Kursus

Gambar 4.20 Squence Diagram Melihat Rekomendasi Kursus

(Sumber : Dokumen Pribadi)

4. Squence Diagram Memillih Kursus

Gambar 4.20 Squence Diagram Melakukan Pembayaran

 54

(Sumber : Dokumen Pribadi)

5. Squence Diagram Melakukan Pembayarn

Gambar 4.21 Squence Diagram Memilih Kursus

(Sumber : Dokumen Pribadi)

6. Squence Diagram Mengikuti Kursus

 55

Gambar 4.22 Squence Diagram Mengikuti Kursus

(Sumber : Dokumen Pribadi)

7. Squence Diagram Memberi Rating

Gambar 4.23 Squence Diagram Memberi Rating

(Sumber : Dokumen Pribadi)

 56

8. Squence Diagram Mengelola Data Pribadi

Gambar 4.24 Squence Diagram Mengelola Data Pribadi

(Sumber : Dokumen Pribadi)

9. Squence Diagram Admin Mengelola Kursus

Gambar 4.25 Squence Diagram Admin Mengelola Kursus

 57

10. Squence Diagram Admin Mengelola Data User

Gambar 4.26 Squence Diagram Admin Mengelola Data User

11. Squence Diagram Admin Melihat Rating

Gambar 4.27 Squence Diagram Admin Melihat Rating

(Sumber : Dokumen Pribadi)

 58

4.2.5 Class Diagram

Class Diagram yang terdapat di bawah ini adalah class diagram

pengolah data yang terdiri dari User, Admin, kursus dan pembayaran

kursus yang dilakukan oleh peserta kursus.

Gambar 4.28 Class Diagram

(Sumber : Dokumen Pribadi)

 59

4.2.6 Rancang Basis Data

Rancangan basis data atau database digunakan untuk memberikan

gambaran lebih detail tentang tabel-tabel yang digunakan pada sistem.

Adapun rancangan basis data adalah sebagai berikut :

1. Tabel Product
Nama tabel : product
Keterangan : tabel ini berisi data produk
Tabel 4.8 Product

Tipe Jumlah
Field Indeks Keterangan
Data Karakter
Id int 11 PRIMARY Id atau kode
KEY untuk
mengurutkan
secara
otomatis
Nama_produk Varch 50 Input nama
ar produk
Lama_kursus Varch 50 Input lama
ar kursus
Harga Int 8 Input harga
produk
Foto_produk Varch 100 Input foto
ar produk
 60

2. Tabel User
Nama tabel : User
Keterangan : tabel ini berisi keranjang User
Tabel 4.9 User

Tipe Jumlah
Field Indeks Keterangan
Data Karakter
Id Int 11 PRIMARY Nomor
KEY identitas User
Username Text - Berisi
username
User

Password Text - Berisi

password
User
Notelpon Varchar 15 Berisi nomor
telepon User

3. Tabel Ordered_Product
Nama tabel : Ordered_Product
Keterangan : tabel ini berisi data User
Tabel 4.10 Ordered_Product

Jumlah
Tipe
Field Karakte Indeks Keterangan
Data
r
Id Int 11 PRIMARY Id atau kode
KEY untuk
mengurutkan
secara
otomatis
Pesanan Varch 50 Input pesanan
ar
totalPaid Int 11 Input total
pembayaran
Atasnama Int 11 Input nama
User
Tanggal Date - Input tanggal
pemesanan
 61

Bukti_pembayara Varch 100 Input bukti

n ar pembayaran

4. Tabel Users
Nama tabel : Users
Keterangan : tabel ini berisi data Users
Tabel 4.11 Users

Tipe Jumlah
Field Indeks Keterangan
Data Karakter
Id int 11 PRIMARY Id atau kode
KEY untuk
mengurutkan
secara
otomatis
username Text - Input
username
User
Password Text - Input
password
User
 62

4.2.7 Rancangan Antar Muka

1. Interface Login User

Pada halaman ini sebelum masuk ke menu utama maka

diharuskan untuk login terlebih dahulu, gambar dibawah ini adalah

rancangan tampilan login User. Terlihat pada gambar dibawah ini :

Gambar 4.21 Rancangan antar muka login User

(Sumber : Dokumen Pribadi)

2. Halaman Dashboard User

Gambar 4.22 Rancangan dashboard User

(Sumber : Dokumen Pribadi)

 63

3. Halaman User Pesanan

Gambar 4.23 Rancangan antar User Pesanan

(Sumber : Dokumen Pribadi)

4. Halaman User Validation

Gambar 4.24 Rancangan antar muka User Validation

(Sumber : Dokumen Pribadi)

 64

5. Halaman User Products

Gambar 4.25 Rancangan antar muka User Products

(Sumber : Dokumen Pribadi)

6. Halaman User Users

Gambar 4.26 Rancangan antar muka User Users

(Sumber : Dokumen Pribadi)

 65

7. Halaman User Users

Gambar 4.27 Rancangan antar muka User Users

(Sumber : Dokumen Pribadi)

8. Halaman registrasi User

Gambar 4.28 Rancangan antar muka halaman registrasi User

(Sumber : Dokumen Pribadi)

 66

9. Halaman Login User

Gambar 4.29 Rancangan antar muka login User

(Sumber : Dokumen Pribadi)

10. Halaman Beranda User

Gambar 4.30 Rancangan antar muka beranda User

(Sumber : Dokumen Pribadi)

 67

11. Halaman Pesanan

Gambar 4.31 Rancangan antar muka halaman pesanan

(Sumber : Dokumen Pribadi)

12. Halaman Cek Pesanan

Gambar 4.32 Rancangan antar muka halaman cek pesanan

(Sumber : Dokumen Pribadi)

 68

13. Halaman Products

Gambar 4.33 Rancangan antar muka halaman products

(Sumber : Dokumen Pribadi)

4.3 Rancangan Pengujian

Pengujian sistem pada aplikasi menggunakan metode pengujian black

box. Pengujian black box berfokus pada persyaratan kebutuhan fungsional

sistem yang dibuat. Dibawah ini adalah rancangan pengujian sistem.

1. Pengujian Form User

Berikut adalah tabel perancangan pengujian pada fungsi Form User:

Tabel 4.11 Rancangan Pengujian Sistem User

Halaman Yang Di Uji Aksi Aktor Hasil Pengujian

Akses Halaman Login Membuka Halaman Blackbox
Login
Login User Memasukkan Username Blackbox
dan Password
Halaman Dashboard Akses Halaman Blackbox
Dashboard
Halaman Order Detail Order Blackbox
 69

Halaman Kelola User Akses User yang Blackbox

terdaftar
Halaman Produk Edit, Delete Product Blackbox

Halaman Validasi Validasi Pesanan Blackbox

2. Pengujian Form User

Berikut adalah tabel perancangan pengujian pada fungsi Form

User:

Tabel 4.12 Rancangan Pengujian Sistem User

Halaman yang diuji Aksi Aktor Hasil

Pengujian
Halaman Register User Mengakses Menu Register Blackbox
Halaman Login User Mengakses Menu Login Blackbox
Memasukkan Email dan Blackbox
Password
Halaman Home Mengakses Halaman Home Blackbox
Halaman Produk Mengakses Halaman Blackbox
produk

Halaman Pesan User Membuat Pesanan Blackbox

User Dapat Menambahkan Blackbox
Halaman Cek Pesanan Bukti Pembayaran Dan
Melihat Detail Pesanan
Logout User Klik Menu Logout Blackbox
102