BAB IV PERANCANGAN SISTEM USULAN

(1)

18

BAB IV

PERANCANGAN SISTEM USULAN

4.1. Tahapan Perancangan Sistem 4.1.1. Analisis Kebutuhan

A. Kebutuhan Pengguna

Analisis kebutuhan dalam perancangan sistem pemesanan jasa percetakan pada CV. Hikmah Grafika Barokah sebagai berikut:

1) Skenario Kebutuhan User/Customer

A1. User dapat melakukan registrasi member A2. User dapat melakukan login

A3. User dapat melakukan pemesanan jasa percetakan A4. User dapat melakukan logout

2) Skenario Kebutuhan Admin B1. Admin dapat melakukan login

B2. Admin dapat mengelola data pemesanan B3. Admin dapat melihat data member B4. Admin dapat mengelola jenis percetakan B5. Admin dapat melihat dan cetak laporan.

B. Kebutuhan Sistem

1) Setiap pengguna harus melakukan login terlebih dahulu untuk mengakses sistem dengan menggunakan username dan password masing-masing pengguna agar tetap terjaga keamanannya.

2) Setiap pengguna mendapatkan hak akses untuk menggunakan sistem pemesanan jasa percetakan.

(2)

3) Setelah menggunakan sistem tersebut pengguna diwajibkan untuk logout.

4) Sistem akan merekap data pemesanan jasa percetakan CV. Hikmah Grafika Barokah.

4.1.2. Rancangan Diagram Use Case

A. Use Case Diagram Customer

uc Actors

User

Login

Registrasi Member

Pemesanan Jasa Percetakan

Logout

Username dan Passw ord

«include»

Sumber: Data Olahan, 2021

Gambar IV. 1 Use Case Diagram Halaman Custumer

(3)

Tabel IV. 1. Use Case Diagram Registrasi Member Use Case Name Registrasi Member

Requirment A1

Goal User dapat melakukan registrasi member Pre-condition User memilih menu registrasi

Post-condition Tampil form registrasi

Failed end condition User tidak memilih menu registrasi Primary Actor User/Customer

Main Flow/Basic Path 1. User/Customer membuka website 2. User/Customer memilih menu registrasi 3. User/Customer melengkapi data diri

4. Sistem menyimpan data member ke databse

Invariant -

Tabel IV. 2. Use Case Diagram Login Use Case Name Login

Requirment A2

Goal User melakukan login

Pre-condition User memilih menu login Post-condition Tampil form login

Failed end condition User tidak memilih menu login Primary Actor User/Customer

Main Flow/Basic Path 1. User/Customer memilih menu login 2. User/Customer mengisi username dan password

3. Sistem melakukan validasi data 4. Jika sesuai, sistem akan menampilkan halaman utama

Invariant -

Tabel IV. 3. Use Case Diagram Pemesanan Use Case Name Pemesanan

Requirment A3

Goal User melakukan pemesanan

Pre-condition User memilih menu pemesanan Post-condition Tampil form pemesanan

Failed end condition User tidak memilih menu pemesanan Primary Actor User/Customer

Main Flow/Basic Path 1. User/Customer memilih menu pemesanan 2. User/Customer melengkapi data pemesanan 3. Sistem menyimpan data pemesanan

Invariant -

(4)

B. Use Case Diagram Admin

uc Actors

Admin

Login

Kelola Pemesanan

Lihat Data Member

Kelola Jenis Percetakan

Username dan Passw ord

Kelola Laporan

Logout

Cetak Laporan

«include»

«extend»

Gambar IV. 2 Usee Case Diagram Halaman Admin

(5)

Tabel IV. 4. Use Case Diagram Login Admin Use Case Name Login Admin

Requirment B1

Goal Admin dapat melakukan login Pre-condition Admin memilih menu login Post-condition Tampil form login

Failed end condition Admin tidak memilih menu login Primary Actor Admin

Main Flow/Basic Path 1. Admin memilih menu login

2. Admin memasukan username dan password 3. Sistem melakukan validasi data

4. Jika data sesuai, sistem menampilkan halaman beranda

Invariant -

Tabel IV. 5. Use Case Diagram Kelola Data Pemesanan Use Case Name Kelola Data Pemesanan

Requirment B2

Goal Admin mengelola data pemesanan Pre-condition Admin memilih menu pemesanan Post-condition Tampil data pemesanan

Failed end condition Admin tidak memilih menu pemesanan Primary Actor Admin

Main Flow/Basic Path 1. Admin memilih menu pemesanan 2. Sistem menampilkan data pemesanan 3. Admin melakukan pengecekan status pemesanan

4. Jika customer sudah membayar, admin mengubah status pemesanan

5. Sistem mengupdate data pemesanan

Invariant -

Tabel IV. 6. Use Case Diagram Lihat Data Member Use Case Name Lihat Data Member

Requirment B3

Goal Admin dapat melihat data member Pre-condition Admin memilih menu data member Post-condition Tampil data member

Failed end condition Admin tidak memilih menu data member Primary Actor Admin

Main Flow/Basic Path 1. Admin memilih menu data member 2. Sistem menampilkan data member

Invariant -

(6)

Tabel IV. 7 Use Case Diagram Kelola Jenis Percetakan Use Case Name Kelola Jenis Percetakan

Requirment B4

Goal Admin dapat menambah, mengedit dan menghapus data jenis percetakan Pre-condition Admin memilih menu jenis percetakan Post-condition Tampil data jenis percetakan

Failed end condition Admin tidak memilih menu jenis percetakan Primary Actor Admin

Main Flow/Basic Path 1. Admin memilih menu jenis percetakan 2. Sistem menampilkan data jenis percetakan 3. Admin menambah, mengedit atau menghapus data jenis percetakan

4. Sistem mengupdate data jenis percetakan

Invariant -

Tabel IV. 8. Use Case Diagram Laporan Use Case Name Laporan

Requirment B5

Goal Admin dapat melihat dan mencetak laporan Pre-condition Admin memilih menu laporan

Post-condition Tampil laporan

Failed end condition Admin tidak memilih menu laporan Primary Actor Admin

Main Flow/Basic Path 1. Admin memilih menu laporan

2. Sistem menampilkan laporan pemesanan jasa percetakan

3. Jika admin memilih button cetak, sistem akan melakukan proses cetak laporan

Invariant -

(7)

4.1.3. Rancangan Diagram Aktivitas A. Activity Diagram Registrasi Member

act Proj ect Model

User/Customer Sistem

Mulai

Memilih menu registrasi Menampilkan form

regitrasi

Melengkapi data registrasi

selesai

Memilih button registrasi Melakukan penyimpanan data registrasi

Gambar IV. 3 Activity Diagram Registrasi Member

(8)

B. Activity Diagram Login Customer

Gambar IV. 4 Activity Diagram Login Custumer

(9)

C. Activity Diagram Pemesanan Jasa

User/Customer Sistem

Mulai

Memilih menu pemesanan Menampilkan form pemesanan

Melengkapi data pemesanan

selesai

Memilih button pesan Menyimpan data

pemesanan

Gambar IV. 5 Activity Diagram Pemesanan Jasa

(10)

D. Activity Diagram Login Admin

Gambar IV. 6 Activity Diagram Login Admin

(11)

E. Activity Diagram Kelola Data Pemesanan

Admin Sistem

Mulai

Memilih menu data pemesanan

Menampilkan data pemesanan

Mengupdate status pemesanan

selesai

Memilih button simpan Mengupdate status

pemesanan

Gambar IV. 7 Activity Diagram Kelola Data Pemesanan

(12)

F. Activity Diagram Lihat Data Member

Admin Sistem

Mulai

Memilih menu data member Menampilkan data member

selesai

Gambar IV. 8 Activity Diagram Lihat Data Member

(13)

G. Activity Diagram Kelola Jenis Percetakan

Admin Sistem

Mulai

Memilih menu j enis percetakan

Menampilkan data j enis percetakan

Mengupdate j enis percetakan

selesai Memilih button simpan Mengupdate data j enis

percetakan

Gambar IV. 9 Activity Diagram Kelola Jenis Percetakan

(14)

H. Activity Diagram Laporan

Admin Sistem

Mulai

Memilih menu laporan Menampilkan laporan data pemesanan

Cetak laporan

selesai

Gambar IV. 10 Activity Diagram Laporan

4.1.4. Rancangan Dokumen Sistem Usulan A. Dokumen Masukan

Nama Dokumen : Bukti Pemesanan

Fungsi : Untuk bukti pemesanan jasa percetakan

Sumber : Sistem

Tujuan : Customer

Media : Tampilan layar

(15)

Jumlah : Satu form

Frekuensi : Setiap terjadinya pemesanan jasa percetakan Bentuk : Lampiran C1

B. Dokumen Keluaran

Nama Dokumen : Laporan

Fungsi : Sebagai laporan pemasukan jasa pemesanan

Sumber : Sistem

Tujuan : Manager

Media : Tampilan Layar Jumlah : Satu form Frekuensi : Setiap bulan Bentuk : Lampiran D1

4.2. Perancangan Prtotype 4.2.1. Entity Relatinship Diagram

(16)

Gambar IV. 11 Entity Relationship Diagram 4.2.2. Logical Record Structure

Customer id_customer*

nama_lengkap alamat no_hp email username password

Admin id_admin*

nama_admin username password

Jenis id_jenis*

produk bahan mesin potong finishing harga

Pemesanan id_pemesanan*

id_customer produk bahan mesin finishing potong harga tanggal status 1

1

1 N

1

Gambar IV. 12 Logical Record Structure

(17)

4.2.3. Spesifikasi File

1) Spesifikasi File Customer

Nama File : Customer

Akronim : Customer

Fungsi : Untuk menyimpan data customer

Tipe File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Hardisk Panjang Record : 83 karakter

Kunci Field : id_customer

Software : MySQL

Tabel IV. 9 Spesifikasi File Custumer

No Elemen Data Akronim Tipe Panjang Keterangan 1 Id Customer Id_customer Varchar 6 Primary Key 2 Nama lengkap Nama_lengkap Varchar 30

3 Alamat Alamat Text

4 No Hp No_hp Varchar 20

5 Email Email Varchar 11

6 Username Username Varchar 8 7 Password Password Varchar 8

2) Spesifikasi File Admin

Nama File : Admin

Akronim : Admin

Fungsi : Untuk menyimpan data admin

(18)

Media : Hardisk

Panjang Record : 52 karakter

Kunci Field : id_admin

Software : MySQL

Tabel IV. 10. Spesifikasi File Admin

No Elemen Data Akronim Tipe Panjang Keterangan

1 Id Admin Id_admin Integer 6 Primary Key

2 Username Username Varchar 8 3 Password Password Varchar 8 4 Nama Admin Nama_Admin Varchar 30

3) Spesifikasi File Pemesanan

Nama File : Pemesanan

Akronim : Pemesanan

Fungsi : Untuk menyimpan data pemesanan

Media : Hardisk

Kunci Field : id_pemesanan

Software : MySQL

Tabel IV. 11. Spesifikasi File Pemesanan

No Elemen Data Akronim Tipe Panjang Keterangan 1 Id pemesanan Id_pemesanan Varchar 6 Primary Key 2 Id Customer Id_customer Varchar 6

3 Produk Produk Varchar 30

(19)

4 Bahan Bahan Varchar 30

5 Mesin Mesin Varchar 30

6 Finishing Finishing Varchar 30

7 Potong Potong Varchar 30

8 Harga Harga Double

9 Tanggal Tanggal Date

10 Status Status Varchar 30

4) Spesifikasi File Jenis Percetakan

Nama File : Jenis Percetakan

Akronim : jenis_percetakan

Fungsi : Untuk menyimpan data jenis percetakan

Organisasi File : Indexed Sequensial

Media : Hardisk

Kunci Field : id_jenis

Software : MySQL

Tabel IV. 12. Spesifikasi File Jenis Percetakan

No Elemen Data Akronim Tipe Panjang Keterangan

1 Id jenis Id_jenis Varchar 6 Primary Key

2 Produk Produk Varchar 30

3 Bahan Bahan Varchar 30

4 Mesin Mesin Varchar 30

5 Finishing Finishing Varchar 30

6 Potong Potong Varchar 30

7 Harga Harga Double

4.2.4. Class Model/Class Diagram

(20)

Customer

+ id_customer +nama_lengkap +alamat + no_hp + email + username +password Created_at() : void

Admin

+id_admin +nama_admin +username +password Delete_at() : Void

Jenis

+id_jenis +produk +bahan +mesin +potong +finishing +harga

Creaed_at() : Void Updated_at() : Void Delete_at() : Void

Pemesanan

+id_pemesanan +id_customer +produk +bahan +mesin +finishing +potong +harga +tanggal +status

Updated_at() : Void 1

1

1 N

1

Gambar IV. 13 Class Diagram 4.2.5. Sequence Diagram

Gambar IV. 14 Sequence Diaram

(21)

4.2.6. Rancangan Antarmuka

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021

Gambar IV. 15 User Interface Dashboard User/Custumer Sebelum Login

Gambar IV. 16 User Interface Dashboard Setelah Login

(22)

Gambar IV. 17 User Interface Registrasi Member

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021 Gambar IV. 18 User Interface Login Custumer

(23)

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021 Gambar IV. 19 User Interface Pemesanan

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021 Gambar IV. 20 User Interface Login Admin

(24)

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021 Gambar IV. 21 User Interface Dashboard Admin

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021 Gambar IV. 22 User Interface Data Pemesanan

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021 Gambar IV. 23 User Interface Jenis Percetakan

(25)

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021 Gambar IV. 24 User Interface Data Member

Sumber: Rancangan Sistem Pemesanan Jasa Percetakan, 2021 Gambar IV. 25 User Interface Laporan 4.2.7. Spesifikasi Hardware dan Software

A. Spesifikasi Hardware 1) Server

a) CPU Processor AMD A10-5800K, RAM 2,00 GB, Harddisk 550 GB b) Mouse

c) Keyboard

d) Monitor dengan resolusi layar minimum 1028x768 e) Koneksi internet dengan kecepatan 2Mbps

2) Client

(26)

a) CPU Processor AMD Sempron 3850, RAM 2,00, Harddisk 450 GB b) Mouse

c) Keyboard

d) Monitor dengan resolusi layar minimum 1024x768 e) Koneksi internet dengan kecepatan 1 Mbps

B. Spesifikasi Software 1). Server

a) Sistem operasi yang umum digunakan sepeti Microsoft Windows 10 b) Aplikasi bundle web server seperti XAMPP, WampServer, php2triad

c) Aplikasi web seperti Mozzila Firefox, Opera, Internet Explore, Google Chrome.

2) Client

a) Sistem operasi yang diumumkan seperti Microsoft Windows

b) Aplikasi web browser seperti Mozilla Firework, Opera, Internet Explore, Google Chrome.

4.3. Pengujian Rancangan Antar Muka A. Pengujian Front-End (User/Karyawan)

Tabel IV. 13. Hail Pengujian Front-End(User/Custumer) Partisipan Registrasi

Member Login Melakukan

Pemesanan

1 √ √ √

2 √ √ √

3 √ √ √

4 √ √ √

5 √ √ √

Sukses 5 5 5

(27)

Nilai

Kesuksesan 100% 100% 100%

B. Pengujian Back-End (Admin)

Tabel IV. 14. Hail Pengujian Back-End(Admin)

Partisipan Login

Kelola Data Pemesana

n

Lihat Data Member

Kelola Jenis Percetaka

n

Lihat dan Cetak Laporan

1 √ √ √ √ √

Sukses 1 1 1 1 1

Nilai

Kesuksesan 100% 100% 100% 100% 100%

4.4. Jadwal Implementasi

Tabel IV. 15. Jadwal Implementasi

No KEGIATAN

WAKTU

BULAN I BULAN II BULAN III 1 2 3 4 1 2 3 4 1 2 3 4 1 Persiapan data awal

2 Melengkapi referensi 3 Pengumpulan data 4 Analisa data

6 Perancangan sistem usulan 7 Design prototype 8 Evaluasi sistem