BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN. kebutuhan untuk merancang website sebagai berikut:

(1)

18

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1 Analisis Kebutuhan Software

A. Tahap Analisis

Dari hasil analisis pada prosedur sistem berjalan, didapatkan spesifikasi kebutuhan untuk merancang website sebagai berikut:

Halaman Pelanggan :

A1. Pelanggan melakukan daftar akun A2. Pelanggan melakukan login A3. Pelanggan booking antrian A4. Pelanggan kirim pesan Halaman Admin :

B1. Admin melakukan login B2. Admin mengelola data pegawai B3. Admin mengelola data pelanggan B4. Admin mengelola paket layanan B5. Admin mengelola booking layanan B6. Admin mengelola pesan

(2)

B. Use Case Diagram

Penggambaran use case dari website sistem informasi pelayanan pelanggan yang akan dibangun sebagai berikut:

A. Use Case Diagram Halaman Pelanggan

Gambar IV.1. Use Case Diagram Halaman Pelanggan

Gambar IV.1 dapat dijelaskan bahwa pada halaman pelanggan, sebelum melakukan booking antrian, pelanggan harus daftar sebagai akun untuk mendapatkan username dan password, setelah mendapatkan username dan password, pelanggan memilih menu login untuk login ke halaman, setelah login pelanggan melakukan booking no antrian dan mencetak bukti booking. Apabila pelanggan ingin melakukan konsultasi dengan salon, maka pelanggan pilih menu pesan.

Tabel IV.1.

Deskripsi Use Case Diagram Halaman Pelanggan Daftar Akun

Use Case Name Halaman Pelanggan Daftar

Requirements A1

Goal Pelanggan dapat melakukan daftar akun Pre-condition Pelanggan isi data daftar akun

uc Pelanggan

Pelanggan

Login

Booking Antrian Cetak Bukti Booking

Pesan Daftar Akun

Input Username dan passw ord

«extend» «include»

(3)

Post-condition Data tersimpan pada database Failed end condition URL tidak bisa diakses Primary Actor Pelanggan

Main Flow/Basic Path 1.Pelanggan melakukan daftar akun 2.Data tersimpan

Invariant -

Tabel IV.2.

Deskripsi Use Case Diagram Halaman Pelanggan Booking Antrian

Use Case Name Booking Antrian

Requirements A2,A3

Goal Pelanggan dapat no antrian Pre-condition Pelanggan login

Main Flow/Basic Path 1.Pelanggan melakukan login 2.pelanggan booking no antrian

Invariant -

Tabel IV.3.

Deskripsi Use Case Diagram Halaman Pelanggan Kirim Pesan

Use Case Name Kirim Pesan

Requirements A2,A4

Goal Pelanggan dapat kirim pesan Pre-condition Pelanggan login

Main Flow/Basic Path 1.Pelanggan melakukan login 2.pelanggan kirim pesan

(4)

B. Use Case Diagram Halaman Admin

Gambar IV.2.Use Case Diagram Halaman Admin

Gambar IV.2 dapat dijelaskan bahwa pada halaman admin dapat mengelola beberapa menu, diantaranya admin sebelum masuk ke halaman utama, admin harus login terlebih dahulu, dengan memasukan username dan password, setelah melakukan login admin akan masuk kehalaman utama, dapat mengelola data pegawai, data pelanggan, data paket layanan, data booking layanan, data pesan dan data laporan.

Tabel IV.4.

Deskripsi Use Case Diagram Mengelola Data Pegawai

Use Case Name Data Pegawai

Requirements B1,B2

Goal Data pegawai tersimpan

Pre-condition Admin melalukan login Post-condition Data disimpan pada database Failed end condition URL tidak bisa diakses

Primary Actor Admin

Main Flow /Basic Path 1. Admin login

2. Admin kelola data pewagai

Invariant2 -

uc Admin

Admin

Login Data Pegaw ai

Data Pelanggan

Data Paket Layanan

Booking Layanan

Data Pesan Laporan

Input Username dan Passw ord

(5)

Tabel IV.5.

Deskripsi Use Case Diagram Mengelola Data Pelanggan

Use Case Name Data Pelanggan

Goal Data pelanggan tersimpan

2. Admin kelola data pelanggan

Invariant2 -

Tabel IV.6.

Deskripsi Use Case Diagram Mengelola Data Paket Layanan

Use Case Name Paket Layanan

Goal Data paket tersimpan

2. Admin kelola data paket layanan

Invariant2 -

Tabel IV.7.

Deskripsi Use Case Diagram Mengelola Data Booking Layanan

Use Case Name Booking Layanan

Goal Data booking antrian update

Pre-condition Admin melalukan login Post-condition Update berhasil di simpan Failed end condition URL tidak bisa diakses

2. Admin kelola data booking layanan

Invariant2 -

Tabel IV.8.

Deskripsi Use Case Diagram Mengelola Data Pesan

Use Case Name Data Pesan

Goal Data pesan tersimpan

Pre-condition Admin melalukan login Post-condition Data pesan di simpan Failed end condition URL tidak bisa diakses

(6)

2. Admin kelola data pesan

Invariant2 -

Tabel IV.9.

Deskripsi Use Case Membuat Laporan

Use Case Name Membuat laporan

Goal Admin menampilkan laporan

Pre-condition Admin melakukan login Post-condition Menampilkan laporan

Failed end condition Admin tidak melakukan pelaporan Primary Actor Admin

Main Flow/Basic Path Admin melihat laporan

Invariant -

C. Activity Diagram

1. Activity Diagram Halaman Pelanggan

Gambar IV.3. Activity Diagram Halaman Pelanggan

act Business Process Model

Sistem Pelanggan

Start

End Melakukan Login

Input username &

password Validasi Login

Tampil Menu Utama Pilih Menu? Booking No Antrian Pesan Simpan Data [Ya] [Tidak]

(7)

Gambar IV.3 Activity Diagram halaman pelanggan, dimulai dari pelanggan melakukan login, input username dan password. Setelah diinput sistem akan memvalidasi, jika username dan password salah, maka akan muncul validasi dan kembali ke menu login, dan jika validasi benar makan akan langsung ke halaman utama pelanggan. Pada halaman utama pelanggan ada dua menu yaitu booking no antrian dan konsultasi online atau pesan. Setelah isi booking antrian atau konsultasi online, pelanggan klik tombol simpan, data akan tersimpan kedalam database.

2. Activity Diagram Input Data Pegawai Halaman Admin

Gambar IV.4. Activity Diagram Input Data Pegawai Halaman Admin

Gambar IV.4 dapat dijelaskan bahwa proses Activity Diagram halaman admin mengelola data konsultasi online atau pesan, dimulai dari admin melakukan login terlebih dahulu, dengan menginput username dan password, setelah itu sistem akan memvalidasi, jika salah username dan password maka akan muncul validasi dan kembali ke menu login, jika benar makan akan langsung ke

act Aktiv ity Admin

Halaman Admin Admin

Start

Melakukan Login Validasi Login

Menampilkan Halaman Admin

Pilih Input Data Pegawai

End

Simpan Data

[Ya] [Tidak]

(8)

menu utama. Pilih menu data pegawai, maka admin dapat mengelola data pegawai, dan terimpan pada database.

3. Activity Diagram Kelola Booking Layanan Halaman Admin

Gambar IV.5. Activity Diagram Kelola Booking Layanan Halaman Admin

Gambar IV.5 dapat dijelaskan bahwa proses Activity Diagram halaman admin mengelola data konsultasi online atau pesan, dimulai dari admin melakukan login terlebih dahulu, dengan menginput username dan password, setelah itu sistem akan memvalidasi, jika salah username dan password maka akan muncul validasi dan kembali ke menu login, jika benar makan akan langsung ke menu utama. Pilih menu data booking layanan, maka admin dapat mengelola data booking layanan, dan terimpan pada database.

Start

Melakukan Login Validasi Login

Menampilkan Halaman Admin

Pilih Booking Layanan

End

Update Status

Simpan Data

[Ya] [Tidak]

(9)

4. Activity Diagram Kelola Pesan Halaman Admin

Gambar IV.6. Activity Diagram Kelola Pesan Halaman Admin

Gambar IV.6 dapat dijelaskan bahwa proses Activity Diagram halaman admin mengelola data konsultasi online atau pesan, dimulai dari admin melakukan login terlebih dahulu, dengan menginput username dan password, setelah itu sistem akan memvalidasi, jika salah username dan password maka akan muncul validasi dan kembali ke menu login, jika benar makan akan langsung ke menu utama. Pilih menu data pesan, maka admin dapat mengelola data pesan, dan terimpan pada database.

Start

Melakukan Login _{Validasi Login}

Menampilkan Halaman Admin Pilih Pesan End Balas Pesan Simpan Data [Ya] [Tidak]

(10)

5. Activity Diagram Menu Laporan Halaman Admin

Gambar IV.7. Activity Diagram Menu Laporan Halaman Admin

Gambar IV.7 dapat dijelaskan bahwa proses Activity Diagram admin mengelola data laporan, dimulai dari admin pilih data laporan, maka akan tampil data laporan, admin dapat memilih tanggal laporan yang akan dicetak dan laporan diserahkan kepada pemilik.

act Activ ity Cetak Laporan

Start

Pilih Menu Laporan Tampil Form Laporan

Filter Tanggal

Cetak Laporan

(11)

4.2 Desain 4.2.1 Database

1. Entity Relationship Diagram

Pelanggan Orderlayanan memiliki id_pelanggan nama_pelanggan email_pelanggan alamat_pelanggan no_telepon no_order tgl_kujungan id_pelanggan no_order no_order isi 1 Pegawai level Nama_pegawai Alamat_pegawai Telepon_pegawai password nip nip 1 password blokir Pesan Balas isi id_pelanggan no_pesan no_pesan nip pesan no_pesan tgl_sekarang jam_sekarang Pelayanan nama_pelayanan harga_layanan id_pelayanan memiliki diskon status_layanan id_pelayanan no_order 1 1 1 1 M 1 1 M

Gambar IV.8. Entity Relationshop Diagram Pendaftaran Pelanggan

Pada gambar IV.8 Entity Relationshop Diagram, entitas pelanggan dapat melakukan booking no antrian dimana data tersebut tersimpan pada tabel orderlayanan, untuk itu ada hubungan kardinalitas 1 to 1 dari entitas pelanggan dengan entitas orderlayanan. Pelanggan dapat mengisi konsultasi online atau pesan yang tersimpan pad atabel pesan, begitu juga pegawai dapat membalas pesan dari pelanggan dengan hubungan kardinalitas 1 to M.

(12)

2. Logical Record Structure Orderlayanan Pelanggan no_order tgl_kujungan id_pelayanan ** id_pelanggan ** nip ** id_pelanggan nama_pelanggan email_pelanggan alamat_pelanggan no_telepon password id_pelanggan Pegawai nip Nama_pegawai Alamat_pegawai Telepon_pegawai Password Level blokir Pesan no_pesan pesan tgl_sekarang jam_sekarang Nip ** id_pelanggan nip Pelayanan id_pelayanan nama_pelayanan harga_layanan Diskon status_layanan id_pelayanan nip

Gambar IV.9. Logical Record Structure Pendaftaran Pelanggan

Pada gambar IV.9 Logical Record Structure, dapat di penjelaskan bahwa Logical Record Structure sudah dikelompokan dan terbentuk tabel-tabel yang saling berelasi.

3. Spesifikasi File

a. Spesifikasi File Tabel Pegawai

Nama Database : db_salon Nama File : Tabel Pegawai Akronim : pegawai.myd Tipe File : File Master Akses File : Random Panjang Record : 65 Byte Kunci Field : nip

Tabel IV.10.

Spesifikasi File Tabel Admin

No Nama Field Type Size Keterangan

1 Nip Varchar 15 Primary Key

2 nama_pegawai Varchar 35

3 alamat_pegawai Text -

4 telepon_pegawai Varchar 15

(13)

6 Level enum('Admin','Kasir') -

7 Blokir Enum(„Y‟,‟T‟) -

b. Spesifikasi File Tabel Pelanggan

Nama Database : db_salon

Nama File : Tabel Pelanggan Akronim : Pelanggan.myd Tipe File : File Master Akses File : Random Panjang Record : 156 Byte Kunci Field : id_pelanggan

Tabel IV.11.

Spesifikasi File Tabel Pelanggan

1 Id_pelanggan Int 11 Primary Key

2 nama_Pelanggan Varchar 30

3 Email_pelanggan Varchar 20

4 No_telepon Varchar 15

5 alamat_Pelanggan Varchar 30

6 password Varchar 50

c. Spesifikasi File Tabel Pelayanan

Nama File : Tabel Pelayanan Akronim : pelayanan.myd Tipe File : File Transaksi Akses File : Random Panjang Record : 46 Byte Kunci Field : id_pelayanan

Tabel IV.12.

Spesifikasi File Tabel Pelayanan

1 id_pelayanan Int 11 Primary Key

2 nama_pelayanan Varchar 15

3 harga_layanan Varchar 10

4 diskon Varchar 10

5 status_layanan Enum(„Sudah‟,‟Belum‟) -

d. Spesifikasi File Tabel Order Layanan

Nama File : Tabel Order Layanan Akronim : orderlayanan.myd

(14)

Tipe File : File Transaksi Akses File : Random Panjang Record : 33 Byte Kunci Field : no_order

Tabel IV.13.

Spesifikasi File Tabel Order Layanan

1 no_order Int 11 Primary Key

2 tgl_kujungan Date -

3 id_pelayanan Int 11 Foreign Key

4 Id_pelanggan Int 11 Foreign Key

e. Spesifikasi File Tabel Pesan

Nama Database : db_salon Nama File : Tabel Pesan Akronim : pesan.myd Tipe File : File Transaksi Akses File : Random Panjang Record : 33 Byte Kunci Field : no_pesan

Tabel IV.14.

Spesifikasi File Tabel Pesan

1 no_pesan Int 11 Primary Key

2 Id_pelanggan Int 11 Foreign Key

3 nip Int 11 Foreign Key

4 pesan Text -

5 tgl_sekarang Date -

6 jam_sekarang Time -

(15)

4.2.2. Software Architecture A. Component Diagram

Gambar IV.10. Component Diagram

Gambar IV.10 menunjukan Componen Diagram pada aplikasi berbasis web, diaman pengguna baik client atau admin mengakses website pada laman dengan menggunakan browser, aplikasi yang sudah tersimpan pada server.

cmp Component Model

Serv er Aplikasi

database aplikasi Web Serv er Admin

Client «use»

(16)

B. Deployment Diagram

Gambar IV.11. Deployment Diagram

Gambar IV.11menunjukan Componen Diagram pada aplikasi berbasis web, diaman pengguna baik client atau admin mengakses website pada laman dengan menggunakan browser, aplikasi yang sudah tersimpan pada server.

4.2.3. User Interface

1. Halaman Utama

Gambar IV.12. Halaman Utama

deployment Use Case Model

«executionEnvironment» Serv er Aplikasi Web Aplikasi «interface» Serv er Aplikasi:: Serv er Web «device» Client «interface» database «use»

(17)

Gambar IV.12 dapat dijelaskan bahwa halaman depan untuk bagain pelanggan akan menampilkan beberapa menu termasuk menu promo atau diskon dari desty salon.

2. Halaman Booking No Antrian

Gambar IV.13. Halaman Booking No Antrian

Gambar IV.13 Pelanggan dapat melakukan booking no antrian pada halaman ini.

3. Halaman Login Pegawai

Gambar IV.14. Halaman Login Pegawai

Gambar IV.14 dpaat dijelaskan bahwa admin tidak dapat menngelola langsung kehalaman utama, admin harus melakukan login terlebih dahulu pada form login.

(18)

4. Halaman Utama Pegawai

Gambar IV.15. Halaman Utama Pegawai

Gambar IV.15 Merupakan gambar halaman utama halaman pegawai, pada halaman utama ini, pegawai dapat mengelola data baik data master, transaksi maupun laporan.

5. Halaman Input Data Pegawai

Gambar IV.16. Halaman Input Data Pegawai

Gambar IV.16 Merupakan gambar halaman pegawai mengelola data pegawai yang dapat mengakses halaman web, pada halaman ini, pegawai dapat ditambah, edit, dan hapus.

(19)

6. Halaman Data Booking Tiket

Gambar IV.17. Halaman Data Booking Tiket

Gambar IV.17 Merupakan gambar halaman pegawai mengelola data booking pelanggan, pada halaman ini, pegawai dapat mengelola data booking antrian. 7. Halaman Laporan

Gambar IV.18. Halaman Laporan

Gambar IV.18 Merupakan gambar halaman pegawai untuk mengelola data laporan, pada halaman ini, pegawai dapat menampilkan laporan berdasarkan tanggal, bulan dan tahun.

(20)

4.3. Code Generation

<?php

include "back/inc/inc.koneksi.php"; $today=date("Ymd");

$query = "SELECT max(no_order) AS last FROM tb_orderlayanan WHERE no_order LIKE '$today%'";

$hasil = mysql_query($query)or die(mysql_error()); $data = mysql_fetch_array($hasil);

$lastNoTransaksi = $data['last'];

$lastNoUrut = substr($lastNoTransaksi, 8, 4); $nextNoUrut = $lastNoUrut + 1;

$nextNoTransaksi = $today.sprintf('%04s', $nextNoUrut); ?>

<h2 class="text-white font-weight-light mb-2 display-1">Online Booking</h2> </div>

</div> </div> </div>

<form class="p-5 bg-white" method="post" action="simpan_booking.php"> <h2 class="mb-4 site-section-heading">Booking Sekarang</h2>

<label class="text-black" for="fname">Nama Lengkap</label> <input type="hidden" name="no" id="no" value="<?php echo $nextNoTransaksi; ?>" readonly="readonly" />

<input type="hidden" name="pelanggan" id="no" value="<?php echo $_SESSION['username'] ?>" readonly="readonly" />

<input type="text" id="fname" class="form-control" name="nama" value="<?php echo $_SESSION['nama'] ?>" placeholder="First Name" readonly> </div>

</div>

<label class="text-black" for="date">Tanggal Berkunjung</label> <input type="date" id="date" class="form-control " name="tgl" placeholder="Date of visit" required>

</div>

<label class="text-black" for="email">Email</label>

<input type="email" id="email" class="form-control" value="<?php echo $_SESSION['email'] ?>" placeholder="Email" readonly>

</div> </div>

(21)

<label class="text-black" for="treatment">Layanan </label> <select name="layanan" id="poli" class="form-control"> <option value="Belum">-- Silahkan Pilih Layanan--</option> <?php $poli=mysql_query("SELECT*FROM tb_pelayanan"); while($tampil=mysql_fetch_array($poli))

{ ?>

<label class="text-black" for="note">Catatan</label>

</div> </div>

<div class="p-4 mb-3 bg-white"> <p class="mb-0 font-weight-bold">Alamat</p>

<p class="mb-4">203 Fake St. Mountain View, Sukabumi, Jawa Barat, Indonesia</p>

<p class="mb-0 font-weight-bold">Telepon</p>

<p class="mb-4"><a href="#">+1 232 3235 324</a></p> <p class="mb-0 font-weight-bold">Email Address</p>

<p class="mb-0"><a href="#">youremail@domain.com</a></p> </div>

<h3 class="h5 text-black mb-3">Info Antrian</h3> <p> <table class="table table-responsive table-bordered"> <tr > <th width="50%">Layanan</th> <th>Jumlah Antrian</th> <th>Kuota</th> <th>Sisa</th> </tr> <?php include "Admin/inc/inc.koneksi.php"; $hari=date('Y-m-d');

$sql=mysql_query("SELECT * FROM tb_pelayanan"); while($data = mysql_fetch_array($sql))

(22)

$hitung=mysql_query("SELECT * FROM tb_orderlayanan WHERE tgl_kunjungan='$hari' AND id_pelayanan='$data[id_pelayanan]'");

$data1=mysql_num_rows($hitung); $kurang=(20-$data1) ?> <tr> <td><?php echo $data['nama_pelayanan'] ?></td> <td><?php echo $data1 ?></td> <td>20</td> <td><?php echo $kurang ?></td> </tr> <?php } ?> </table> </p> </div> </div> </div> 4.4.Testing

A. Form Pendaftaran Pelanggan

Tabel IV.15.

Hasil Pengujian Blackbox Testing Form Pendaftaran Pelanggan

NO Skenario

Pengujian

Test Case Hasil Yang

diharapkan

Hasil Pengujian

Kesimpulan

1 Mengosongkan semua isian data daftar lalu klik tombol “Daftar” Nama Pelanggan (Kosong) Email : (Kosong) Password: (Kosong) No Telepon: (Kosong) Alamat: (Kosong) Sistem akan menolak akses daftar dan menampilkan pesan “Isi Isian ini” di kolom yang masih kosong datanya. Sesuai Harapan Valid 2 Hanya mengisi salah satu data dan

mengosongkan data yang lainnya lalu klik tombol “daftar” Nama Pelanggan Rangga Email : (Kosong) Password: (Kosong) No Telepon: (Kosong) Alamat: (Kosong) Sistem akan menolak akses daftar dan menampilkan pesan “Isi Isian ini” di kolom yang masih kosong datanya. Sesuai harapan Valid 3 Hanya mengisi semua data lalu klik tombol “daftar” Nama Pelanggan Rangga Email : rangga@gmail.com Password: 112345 No Telepon: 085748848 Alamat: Cibadak Sistem akan menolak akses login dan menampilkan pesan “Data Sudah Tersimpan” Sesuai harapan Valid

(23)

B. Form Login Pelanggan

Tabel IV.16.

Hasil Pengujian Blackbox Testing Form Login Pelanggan

NO Skenario

Pengujian

diharapkan

Hasil Pengujian

Kesimpulan

1 Mengosongkan semua isian data login pada login lalu klik tombol “masuk” Email : (Kosong) Password : (Kosong) Sistem akan menolak akses login dan menampilkan pesan “Harap isi bidang ini”

Sesuai Harapan Valid 2 Hanya mengisi Nip dan mengosongkan password lalu klik tombol “masuk” Email: rangg@gmail.com Password : (Kosong) Sistem akan menolak akses login dan menampilkan pesan “anda belum mengisi password” Sesuai harapan Valid 3 Menginputkan dengan kondisi salah lalu klik “masuk” Email : rangg@gmail.com Password : salah Sistem akan menolak akses login dan menampilkan pesan “Maaf silahkan cek kembali password anda” Sesuai harapan Valid 4 Menginputkan dengan kondisi yang benar lalu klik “masuk” Email: benar Password : benar Sistem menerima akses login dan kemudian langsung menampilkan halaman utama Sesuai Harapan Valid

C. Form Input Booking Antrian

Tabel IV.17.

Hasil Pengujian Blackbox Testing Form Input Booking Antrian

NO Skenario

Pengujian

diharapkan Hasil Pengujian Kesimpul an 1 Mengosongkan semua isian data lalu klik “simpan data” Tanggal Kunjungan: (kosong) Sistem akan menolak dan muncul pesan “Isi Isian ini”

Sesuai Harapan

Valid

2 Hanya mengisi data lalu klik “simpan data” Tanggal Kunjungan: 09/08/2020 Sistem akan simpan data booking antrian Sesuai harapan Valid

(24)

4.5. Support

Agar dapat terealisasi sistem ini memerlukan beberapa poin penting diantaranya :

4.5.1. Spesifikasi Hardware dan Software Tabel IV.18.

Tabel Spesifikasi Hardware dan Software

Kebutuhan Keterangan

Sistem Operasi Windows

Processor Pentium IV RAM 512 MB Hardisk 120 GB CD-ROM 52x Monitor SVGA 12” Keyboard 108 key

Printer Laser Jet

Mouse Standard

Browser Mozila Firefox, Google Chrome, Safari

Software Dreamweaver, Adobe Photoshop,

PhpMyAdmin

4.5.2. Publikasi Web

Beberapa hal yang perlu diperhatikan dalam publikasi web diantaranya adanya nama domain dan kapasitas hosting. Berikut penjelasannya:

Nama domain untuk website ini adalah www.salondesty.xyz yang didaftarkan melalui situs Niagahoster. Situs ini menggunakan layanan hosting gratis dari idhostinger.com dengan kapasitas berikut :

Tabel IV.19. Tabel Kapasitas Hosting

Paket Hosting Impresif A

Disk Space 11,79 / 2.000 MB

Bandwidth/Bulan 16,09 / 100.000 MB

Biaya Bulanan (Rp) 0

Biaya SetUp 0

Biaya Upgrade (Rp)/Bulan 38.000

Akun E-mail 0 / 2

(25)

Parkir Domain 0 / 2

Tambah Domain 0 / 5

Subdomain 0 / 2