28

BAB IV

PERANCANGAN SISTEM USULAN

4.1. Tahapan Perancangan Sistem

Sistem dibuat untuk memudahkan kinerja manusia.dalam hal ini

perancangan sistem berbasis web dibuat untuk memudahkan melakukan transaksi

jual beli. Adapun tahapan perancangan sistem memiliki beberapa langkah

diantaranya sebagai berikut:

4.1.1. Analisa Kebutuhan

Dalam tahap ini menjelaskan kebutuhan fungsional program yang akan

diusulkan.

A. Kebutuhan Pengguna

Dalam aplikasi web penjualan ini terdapat dua pengguna yang dapat saling

berinteraksi dalam lingkungan sistem, yaitu: bagian admin (back-end) dan

pelanggan (front-end). Kedua pengguna tersebut memliki karakteristik interaksi

dengan sistem yang berbeda-beda dan memliki kebutuhan informasi yang berbda

pula, sebagai berikut:

A.1. Skenario Kebutuhan Bagian Admin

a) Admin dapat megelola data produk

b) Admin dapat mengelola data pelanggan

c) Admin dapat mengelola laporan penjualan

29

A.2. Skenario Bagian Pelanggan

a) Pelanggan dapat melihat detail produk

b) Pelanggan dapat mendaftar member

c) Pelanggan dapat melakukan login member

d) Pelanggan dapat melihat data pembelian produk secara online

B. Kebutuhan Sistem

a) Admin harus melakukan login terlebih dahulu untuk dapat mengakses

aplikasi ini dengan memasukkan username dan password.

b) Pelanggan melakukan login sebagai member untuk membeli suatu produk

dalam aplikasi web ini.

c) Sistem melakukan pencatatan transaksi penjualan serta kalkulasi stok

barang.

d) Sistem akan menampilkan halaman yang diakses oleh pengguna.

4.1.2. Rancangan Diagram Usecase

Diagram usecase mendeskripsikan sebuah interaksi antara satu atau lebih

aktor dengan sistem yang akan dibuat. Diagram usecase digunakan untuk

mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang

berhak menggunakan fungsi-fungsi tersebut.

30

ADMINPELANGGAN

mengelola data produk

mengelola data pelanggan

validasi

memilih halaman produk

memilih halaman keranjang

mengelola data pembelian

memeriksa status login

melihat data produk

mengubah data produk

mencari data produk

menambah data produk

menghapus data produk

melihat data pelanggan

mencari data pelanggan

mengubah data pelanggan

menghapus data pelanggan

menambah data pelanggan

login logout

melihat detail produk

memasukkan produk ke keranjang

melihat foto produk

menambah produk

menghapus produk melakukan checkout

menghapus data pembelian

mencari data pembelian

melihat data pembelian

mengubah data pembelian

membuat laporan

melihat laporan

mencari data pembelian

menghapus laporan

Gambar IV.1.

Usecase Diagram Sistem Usulan

Tabel IV.1.

Deskripsi Usecase Mengelola Data Produk

Use Case Name Mengelola Data Admin

Requirements Admin dapat mengelola data produk

Goal Bagian admin mengelola data produk

Pre-Conditions Admin melakukan login untuk dapat

mengakses halaman data produk

Post-Conditions Mengelola website penjualan

Failed end Condition Admin tidak dapat membeli barang /

berbelanja

Actors Admin

Main Flow/ Basic Path 1. Admin dapat melihat data produk

31

2. Admin dapat mencari data produk 3. Admin dapat mengubah data produk 4. Admin dapat menghapus data produk 5. Admin dapat menambah data produk

Alternate Flow/Invariant A A1. Admin mengetikan nama atau kode

produk. A2. Admin memilih tombol “cari”. A3. Sistem menampilkan data produk yang

dicari.

A4. Admin memilih tombol “Edit”.

A5. Sistem menampilkan form data

produk.

A6. Admin mengedit data produk

Invariant B

B1. Admin memilih data produk

B2. Admin memilih tombol “hapus”

B3. Sistem menampilkan dialog

konfirmasi penghapusan

B4. Admin memilih tombol “Yes”.

B5. Sistem menghapus data produk

Invariant C

C1. Admin memilih data produk

C2. Admin memilih tombol “tambah”

C3. Sistem menampilkan form data produk

C4. Admin menambah data produk

C5. Admin memilih tombol “simpan”

C6. Sistem akan menyimpan data produk

Tabel IV.2.

Deskripsi Usecase Mengelola Data Pelanggan

Use Case Name Mengelola Data Pelanggan

Requirements Admin dapat mengelola data pelanggan

Goal Bagian admin mengelola data pelanggan

Pre-Conditions Admin melakukan login untuk dapat

mengakses halaman data pelanggan

Post-Conditions Mengelola website penjualan

Failed end Condition Admin tidak dapat membeli barang /

32

berbelanja

Actors Admin

Main Flow/ Basic Path 1. Admin dapat melihat data pelanggan 2. Admin dapat mencari data pelanggan 3. Admin dapat mengubah data pelanggan 4. Admin dapat menghapus data pelanggan 5. Admin dapat menambah data pelanggan

Alternate Flow/Invariant A A1. Admin mengetikan nama atau kode

pelanggan A2. Admin memilih tombol “cari”. A3. Sistem menampilkan data pelanggan

yang dicari.

A4. Admin memilih tombol “Edit”.

A5. Sistem menampilkan form data

pelanggan

A6. Admin mengedit data pelanggan

Invariant B

B1. Admin memilih data pelanggan

B2. Admin memilih tombol “hapus”

B3. Sistem menampilkan dialog

konfirmasi penghapusan

B4. Admin memilih tombol “Yes”.

B5. Sistem menghapus data pelanggan

Invariant C

C1. Admin memilih data pelanggan

C2. Admin memilih tombol “tambah”

C3. Sistem menampilkan form data

pelanggan

C4. Admin menambah data pelanggan

C5. Admin memilih tombol “simpan”

C6. Sistem akan menyimpan data pelanggan

Tabel IV.3.

Deskripsi Usecase Mengelola Data Pembelian

Use Case Name Mengelola Data Pembelian

Requirements Admin dapat mengelola data pembelian

Goal Bagian admin mengelola data pembelian

33

Pre-Conditions Admin melakukan login untuk dapat

mengakses halaman data pembelian

Post-Conditions Mengelola website penjualan

Failed end Condition Admin tidak dapat membeli barang /

berbelanja

Actors Admin

Main Flow/ Basic Path 1. Admin dapat melihat data pembelian 2. Admin dapat mencari data pembelian 3. Admin dapat mengubah data pembelian 4. Admin dapat menghapus data pembelian

Alternate Flow/Invariant A A1. Admin mengetikan kode pembelian A2. Admin memilih tombol “cari”. A3. Sistem menampilkan data pembelian

yang dicari.

A4. Admin memilih tombol “Edit”.

A5. Sistem menampilkan form data

pembelian

A6. Admin mengedit data

pembelian

Invariant B

B1. Admin memilih data pembelian

B2. Admin memilih tombol “hapus”

B3. Sistem menampilkan dialog

konfirmasi penghapusan

B4. Admin memilih tombol “Yes”.

B5. Sistem menghapus data pembelian

Tabel IV.4.

Deskripsi Usecase Membuat Laporan

Use Case Name Membuat Laporan

Requirements Admin dapat mengelola data laporan

Goal Bagian admin mengelola data laporan

Pre-Conditions Admin melakukan login untuk dapat

mengakses halaman data laporan

Post-Conditions Mengelola website penjualan

34

Failed end Condition Admin tidak dapat membeli barang /

berbelanja

Actors Admin

Main Flow/ Basic Path 1. Admin dapat melihat data laporan 2. Admin dapat mencari data laporan 3. Admin dapat menghapus data pembelian

Alternate Flow/Invariant A A1. Admin melihat data laporan A2. Admin memilih tombol “hapus” A3. Sistem menampilkan dialog

konfirmasi penghapusan

A4. Admin memilih tombol “Yes”

A5. Sistem menghapus data laporan

Tabel IV.5.

Deskripsi Usecase Memilih Halaman Produk

Use Case Name Memilih Halaman Produk

Requirements Pengguna dapat melihat data produk

Goal Pengguna dapat melihat semua data produk

Pre-Conditions Pengguna mengakses langsung halaman

produk

Post-Conditions Membeli produk

Failed end Condition Pengguna tidak dapat membeli produk

sebelum menjadi member dan melakukan

login

Actors Pengguna

Main Flow/ Basic Path 1. Pengguna dapat melihat foto produk 2. Pengguna dapat melihat detail produk 3. Pengguna dapat memasukkan produk ke

keranjang

Alternate Flow/Invariant A A1. Pengguna melihat halaman produk A2. Pengguna memilih produk A3. Sistem menampilkan detail

produk

A4. Pengguna memilih foto produk

A5. Sistem menampilkan foto

35

produk

Alternate Flow/Invariant B B1. Pengguna melakukan login B2. Pengguna memilih produk B3. Sistem menampilkan detail

produk

B4. Pengguna memilih masukkan ke

keranjang

B5. Sistem memasukkan produk

yang di pilih ke form keranjang

Tabel IV.6.

Deskripsi Usecase Memilih Halaman Keranjang

Use Case Name Memilih Halaman Keranjang

Requirements Pengguna dapat melihat data produk di form

keranjang

Goal Pengguna dapat melihat semua data produk

yang ada di form keranjang

Pre-Conditions Pengguna mengakses langsung halaman

keranjang

Post-Conditions Membeli produk

Failed end Condition Pengguna tidak dapat membeli produk

sebelum menjadi member dan melakukan

login

Actors Pengguna

Main Flow/ Basic Path 1. Pengguna dapat menambah produk ke keranjang

2. Pengguna dapat menghapus produk dari keranjang

3. Pengguna dapat melakukan checkout

Alternate Flow/Invariant A A1. Pengguna melihat halaman keranjang A2. Pengguna menambahkan produk ke

keranjang A3. Sistem menampilkan

jumlah produk yang akan dibeli

A4. Pengguna memilih tombol

“hapus”

A5. Sistem menampilkan

36

dialog konfirmasi

penghapusan

A6. Pengguna memilih tombol

“Yes”

A7. Sistem menghapus produk dari

keranjang

Alternate Flow/Invariant B B1. Pengguna melihat data produuk di

keranjang B2. Pengguna memilih checkout untuk

pembayaran B3. Sistem menampilkan total

pembayaran

4.1.3. Rancangan Diagram Aktivitas

Diagram Aktivitas merupakan penggambaran aliran kerja yang dilakukan

oleh sistem atau proses bisnis. Berikut rancangan diagram aktivitas yang

diusulkan.

ADMIN PELANGGAN

login

Menu Utama

mengelola produk mengelola pelangganmengelola pembelian membuat laporan

logout

memilih halaman produk

login

memilih halaman keranjang

Gambar IV.2.

Diagram Aktivitas Sistem Usulan

37

4.1.4 Rancangan Dokumen Sistem Usulan

A. Nama Dokumen : Data Produk

Fungsi : Melihat data produk

Sumber : Sales Marketing

Tujuan : Admin

Media : Kertas

Jumlah : 1-3 lembar

Frekuensi : Setiap ada produk baru

Bentuk : Lihat Lampiran C.1

B. Nama Dokumen : Data Pelanggan

Fungsi : Untuk mengetahui data pelanggan

Sumber : Pelanggan

Tujuan : Admin

Media : web

Jumlah : 1 lembar

Frekuensi : Setiap pendaftaran pelanggan baru

Bentuk : Lihat Lampiran C.2

C. Nama Dokumen : Laporan Penjualan

Fungsi : Untuk mengetahui berapa banyak barang terjual

dan total penjualan

Sumber : Admin

Tujuan : Kepala Cabang

Media : Kertas

Jumlah : 1 lembar

38

Frekuensi : Print untuk mengetahui hasil penjualan

Bentuk : Lihat Lampiran C.3

4.1.5 Rancangan Prototype

Pada tahap ini berisi mengenai penggambaran interface atau tampilan dari

program usulan yang telah dibuat.

A. Interface halaman Pengunjung (Front End)

Gambar IV.3.

Tampilan Halaman Pengunjung

39

B. Interface halaman Admin (Back End)

Gambar IV.4.

Tampilan Halaman Admin

4.2. Perancangan Perangkat Lunak

Pada tahap ini perancangan perangkat lunak difokuskan pada enam atribut

yaitu ERD, LRS, Spesifikasi File, Diagram Kelas, Diagram Sequence, dan

Spesifikasi Hardware serta Software.

4.2.1. Entity Relationship Diagram (ERD)

Berikut merupakan rancang bangun basis data yang dimodelkan

menggunakan Diagram-ER.

40

produk

id_produk

nama_produk

foto_produk

harga_produkdeskripsi_produk berat_produk

pelanggan

id_pelanggan

nama_pelanggan

email_pelanggan

password_pelanggan

no_telp

pembelian

id_pelanggan

tanggal_pembelian

id_pembeliantotal_pembelian

pembelian_produk

id_produk

jumlah

id_pembelian

id_pembelian_produk

melakukan

memiliki

memiliki

1 M

1

M1

M

Gambar IV.5.

Diagram-ER Sistem Usulan

4.2.2. Logical Record Structure (LRS)

Berikut merupakan pemodelan LRS basis data beserta korelasinya

terhadap setiap tabel yang ada.

pelanggan

pembelian

produk

pembelian_produk

id_pelangganPK

email_pelangan

nama_pelanggan

id_pembelianPK

id_pelanggan

total_pembelian

id_produkPK

nama_produk

foto_produk

id_pembelian_produkPK

id_pembelian

jumlah

password_pelanggan

no_telp

tanggal_pembelian

id_produk

harga_produk

berat_produk

deskripsi_produk

M

1

1M

1M

Gambar IV.6.

LRS Sistem Usulan

41

4.2.3. Spesifikasi File

Mendeskripsikan tentang file atau tabel yang terbentuk dari transformasi

Diagram-ER.

1. Spesifikasi File Produk

a. Nama File : Produk

b. Akronim : produk

c. Fungsi : untuk menyimpan data produk

d. Tipe File : File Master

e. Organisasi File : indexed sequential

f. Akses File : Random

g. Media : Harddisk

h. Panjang record : 100

i. Kunci Field : id_produk

j. Software : Mysql

Tabel IV.7.

Spesifikasi Tabel Produk

No Elemen Data Akronim Tipe Panjang Keterangan

1 ID Produk id_produk Int 11 Primary Key

2 Nama Produk nama_produk Varchar 100

3 Harga Produk harga_produk Int 11

4 Berat Produk berat_produk Int 11

5 Foto Produk foto_produk Varchar 100

6 Deskripsi Produk deskripsi_produk Text

2. Spesifikasi Pembelian Produk

a. Nama File : Pembelian Produk

b. Akronim : pembelian_produk

42

c. Fungsi : untuk menyimpan data pembelian

sementara

d. Tipe File : File Master

e. Organisasi File : indexed sequential

f. Akses File : Random

g. Media : Harddisk

h. Panjang record : 100

i. Kunci Field : id_pembelian_produk

j. Software : Mysql

Tabel IV.8.

Spesifikasi Tabel Pembelian Produk

No Elemen Data Akronim Tipe Panjang Keterangan

1 ID Pembelian

Produk id_pembelian_produk Int 11

2 ID Pembelian id_pembelian Int 11

3 ID Produk id_produk Int 11

4 Jumlah jumlah Int 11

3. Spesifikasi File Pembelian

a. Nama File : Pembelian

b. Akronim : pembelian

c. Fungsi : untuk menyimpan data pembelian

d. Tipe File : File Master

e. Organisasi File : indexed sequential

f. Akses File : Random

g. Media : Harddisk

h. Panjang record : 100

43

i. Kunci Field : id_pembelian

j. Software : Mysql

Tabel IV.9.

Spesifikasi Tabel Pembelian

No Elemen Data Akronim Type Panjang Keterangan

1 ID Pembelian id_pembelian Int 11 Primary Key

2 ID Pelanggan id_pelanggan Int 11

3 Tanggal

Pembelian tanggal_pembelian Date

4 Total Pembelian total_pembelian Int 11

4. Spesifikasi File Pelanggan

a. Nama File : Pelanggan

b. Akronim : pelanggan

c. Fungsi : untuk menyimpan data pelanggan yang

terdaftar

d. Tipe File : File Master

e. Organisasi File : indexed sequential

f. Akses File : Random

g. Media : Harddisk

h. Panjang record : 100

i. Kunci Field : id_pelanggan

j. Software : Mysql

Tabel IV.10.

Spesifikasi Tabel Pelanggan

No Elemen Data Akronim Type Panjang Keterangan

1 ID Pelanggan id_pelanggan Int 11 Primary Key

2 Email Pelanggan email_pelanggan Varchar 100

44

3 Password

Pelanggan password_pelanggan Varchar 50

4 Nama Pelanggan nama_pelanggan Varchar 100

5 No. Telepon no_telp Varchar 20

4.2.4. Class Model/Class Diagram

Berikut merupakan pemodelan Diagram Kelas dari basis data beserta

korelasinya terhadap setiap tabel yang ada.

produk

-id_produk

-nama_produk-harga_produk-berat_produk-foto_produk-deskripsi_produk

+ delete():void+ insert():void+ update():void+ create():void+ getharga_produk()+ getnama_produk()+ getberat_produk()+ getfoto_produk()+ getdeskripsi_produk()

pembelian_produk

-id_pembelian_produk

-id_pembelian-id_produk-jumlah

+ delete():void

+ insert():void+ update():void

+ create():void+ getid_pembelian_produk()+ getid_pembelian()+ getid_produk()+ getjumlah()

pembelian

-id_pembelian

-id_pelanggan

-total_pembelian-tanggal_pembelian

+ delete():void+ insert():void+ update():void+ create():void+ getid_pembelian()+ getid_pelanggan()+ gettanggal_pembelian()+ gettotal_pembelian()

pelanggan

-id_pelanggan

-email_pelanggan-password_pelanggan-nama_pelanggan-no_telp

+ delete():void+ insert():void+ update():void+ create():void+ getid_pelanggan()+ getemail_pelanggan()+ getpassword_pelanggan()+ getnama_pelanggan()+ getno_telp()

melakukan1 * *...1

*...1

1 *

1 **...1

memiliki

memiliki

Gambar IV.7.

Class Model/Class Diagram Sistem Usulan

4.2.5. Sequence Diagram

Berikut merupakan pemodelan Diagram Sequence dari sistem yang

diusulkan.

A. Diagram Sequence Login Member

45

Pelanggan M : main an : antarmuka V : validasi k : KoneksiBasisData U : member

XX

1 : main()

2 : formLogin()

3 : username dan password 4: login

5 :

6 :

7 : open()

8 : queryCekLogin

9 : execute()10 : getResult ()

11 : username dan password pelanggan

12 : close()

13 :

14 :

Gambar IV.8.

Diagram Sequence Login Member

B. Diagram Sequence Transaksi Pembelian

Member Form Transaksi PenjualanProses Pencarian

ProdukProduk Proses Kalkulasi Admin

XX

1 : masukkan kata kunci (nama produk)

2 : memilih tombol cari

4: getid_produk

9 : tampil total harga

10 : data tersimpan

3 : tampil data produk

5 : getnama_produk

6 : getfoto_produk

7 : getdeskripsi_produk

8 : masukkan jumlah produk

11 : setid_produk

12 : setjumlah

Gambar IV.9.

Diagram Sequence Transaksi Pembelian

46

4.2.6. Spesifikasi Hardware dan Software

Pada pembuatan tugas akhir ini, dibutuhkan perangkat keras dan perangkat lunak

yang mendukung untuk perancangan dan pembuatan sitem, diantaranya sebagai berikut:

A. Spesifikasi Hardware

1. Spesifikasi perangkat keras server, yaitu PC dengan spesifikasi minimal :

1) CPU

(a) Processor Intel® Pentium® Core i3

(b) RAM DDR2 4 GB

(c) Hard Disk 500 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

5) Koneksi internet dengan kecepatan 2 Mbps

2. Spesifikasi perangkat keras client, yaitu PC dengan spesifikasi minimal :

1) CPU

(a) Processor Intel® Pentium® Core 2 duo

(b) RAM DDR2 4 GB

(c) Hard Disk 500 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768 Koneksi internet

dengan kecepatan 2 Mbps

47

B. Spesifikasi Software

1. Spesifikasi perangkat lunak server :

b. Sistem operasi yang umum digunakan seperti: Microsoft Windows atau

Linux (Ubuntu, Fedora, dll)

c. Aplikasi bundle web server seperti: Xampp, Wampserver, php2triad yang

terdiri atas beberapa komponen, diantaranya:

(1) Aplikasi Apache Server v2

(2) Aplikasi PHP Server v5

(3) Aplikasi MySQL Server v5

(4) Aplikasi phpMyAdmin v3

d. Aplikasi Web seperti Mozilla Firefox, Opera, Safari, Internet Explorer,

Google Chrome.

2. Spesifikasi perangkat lunak Client

a. Sistem operasi yang umum digunakan seperti: Microsoft Windows XP, 7,

8, 10

b. Aplikasi web browser seperti Mozilla Firefox, Opera, Safari, Internet

Explorer, Google Chrome.

48

4.3. Jadwal Implementasi

Jadwal Implementasi merupakan suatu tahap dari persiapan data awal

sampai operasional penerapan sistem atau realisasi sistem usulan. Berikut tersaji

jadwal implementasi berupa tabel.

Tabel IV.11.

Spesifikasi Tabel Pelanggan

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 Analisa

3 Desain Sistem

4 Desain perangkat lunak

5 Pembuatan & tes program

6 Tes sistem

7 Pelatihan

8 Pembuatan buku petunjuk

9 Evaluasi & operasional

49

C1. Data Produk

C2. Data Pelanggan