Bab Iv Vi

BAB 4
PERENCANAAN DAN ANALISA PERANCANGAN SISTEM
4.1. Perencanaan Sistem

Pada tahap perancangan sistem monitoring penjualan pada I.US
Aguaria Purwodadi, dilakukan perancangan ulang dan perbaikan yang
dianggap perlu setelah dilakukannya analisis sistem yang ada.
Perancangan yang dilakukan oleh penulis adalah sebagai berikut:
1. Model desain sistem menggunakan UML yang terdiri dari Use Case,
Skenario Diagram, Class Diagram, Activity Diagram dan Sequence
Diagram
2. Perancangan tabel database
3. Perancangan wireframe atau kerangka desain antar muka yang
meliputi halaman transaksi, halaman utama dan lain lainnya.
4.2. Analisa Sistem

CV. I.US Aguaria Purwodadi saat ini memiliki sebuah komputer
yang digunakan sebagai media penyimpanan terkait monitoring penjualan
dimana langkah sebelumnya masih menggunakan tulis menulis pada
sebuah buku besar. Langkah tersebut dilakukan karena belum adanya
system yang dapat mencatat kebutuhan penjualan menyeluruh secara
langsung, oleh karena itu, pemilik mengisyaratkan untuk melakukan
pencatatan menggunakan buku besar dan kemudian ditulis ulang ke Excel.
Hal tersebut dinilai tidak efektif dalam penyesuaian waktu dan tenaga
karena pencatatan harus melalui dua tahap yang terkesan berlebihan.
Dengan masalah yang terjadi, sistem monitoring yang didalamnya sudah
teridentifikasi sesuai kebutuhan perusahaan sangat dibutuhkan karena
sistem tersebut dapat berjalan dalam kurun waktu yang lama dan
signifikan.
1
2
4.2.1. Identifikasi kebutuhan Perangkat Keras (Hardware)

Dari analisa diatas, dapat disimpulkan bahwa kebutuhan
perangkat keras yang dibutuhkan dengan target minimum adalah
sebagai berikut:
1. Prosesor Intel ® Core™ 2 Duo / AMD Setara
2. 2048MB RAM
3. Monitor
4. Keyboard
5. Mouse.
4.2.2. Identifikasi Kebutuhan Perangkat Lunak (Software)

Kebutuhan perangkat lunak yang diperlukan dan wajib
untuk melengkapi hardware yang telah dijelaskan diatas adalah
sebagai berikut:
1. Sistem Operasi : Minimum Windows 10 x86
2. Web Server : Apache (v.7.0)
3. Database Server : MySQL (v.3.2.4)
4. Browser : Minimum Google Chrome
5. Text Editor : VS Code atau Sublime Text 3 (Opsional)
4.2.3. Identifikasi Kebutuhan Fungsional (Brainware)

Dari analisa diatas dapat disimpulkan bahwa kebutuhan
fungsional yang diperlukan adalah sebagai berikut:
1. Admin
a. Mengelola Transaksi
b. Mengelola Produk
c. Mengelola Kategori
d. Mengelola Supplier
e. Mengelola Customer
f. Mengelola User
g. Mengelola Grafik dan Laporan.
3
2. Admin Gudang
a. Mengelola Produk Masuk
b. Mengelola Stok Produk
c. Mengelola Laporan Harian
d. Mengelola Pengiriman Produk
3. Pemilik
a. Memantau Laporan Harian
b. Memantau Grafik Harian, Bulanan hingga Tahunan
4.3. Perancangan Sistem

4.3.1. Use case Diagram
Gambar 4.1. Use Case Diagram
Penjelasan pada gambar 4.1. Use Case Diagram:

1. Terdapat 3 aktor utama, yaitu admin, admin gudang dan
pemilik
2. Terdapat 11 use case yang dapat dilakukan oleh para aktor
utama
3. Admin dapat mengelola data produk, kategori, supplier, grafik,
transaksi, pelanggan, pengguna, dan laporan
4
4. Admin gudang dapat mengelola produk masuk, stok produk,

dan pengiriman produk
5. Pemilik dapat memantau perkembangan penjualan dengan
melihat grafik atau tabel penjualan secara langsung
6. Terdapat 1 aktor opsional, yaitu pelanggan, dimana aktor
tersebut dapat memesan secara langsung.
4.3.2. Skenario Diagram

1. Use Case Diagram: Kelola Produk
Aktor : Admin
Deskripsi : Tambah, Edit, Hapus, Simpan, Cetak
Kondisi Awal : Terbuka halaman utama setelah login
Kondisi Akhir : Menyimpan dan Update data.
Tabel 4.1. Skenario Use Case Kelola Produk

Aktor Sistem
Skenario Normal
1. Tampil halaman utama
2. Aktor pilih menu kelola
produk
3. Sistem tampilkan
halaman kelola produk
4. Aktor klik tombol tambah
5. Sistem tampilkan form
tambah produk
6. Aktor input data produk
7. Sistem menyimpan data
Skenario Alternatif 1
1. Aktor mencari dan
memilih data dan klik
tombol edit
dari data yang dipilih
3. Aktor mengedit data
produk
5
4. Sistem update data

tombol hapus
2. Sistem memproses data
dan tampilkan verifikasi
hapus data
3. Aktor konfirmasi
4. Sistem merespon dan
update data
tombol CSV, PDF / Excel
untuk mencetak
download data
2. Use Case Diagram: Kelola Kategori

Aktor : Admin
Tabel 4.2. Skenario Use Case Kelola Kategori

Aktor Sistem
Skenario Normal
kategori
3. Sistem tampilkan
halaman kelola kategori
tambah kategori
6. Aktor input data kategori
6

tombol edit
kategori
tombol hapus
hapus data
3. Aktor konfirmasi
update data
3. Use Case Diagram: Kelola Supplier

Aktor : Admin
Tabel 4.3. Skenario Use Case Kelola Supplier

Aktor Sistem
Skenario Normal
supplier
3. Sistem tampilkan
halaman kelola supplier
7
tambah supplier
6. Aktor input data supplier
tombol edit
supplier
tombol hapus
hapus data
3. Aktor konfirmasi
update data
untuk mencetak
download data
4. Use Case Diagram: Kelola Stok Produk

Aktor : Admin dan Admin Gudang
8
Tabel 4.4. Skenario Use Case Kelola Stok Produk

Aktor Sistem
Skenario Normal
2. Aktor pilih menu produk
3. Sistem tampilkan
halaman produk
tombol stok
6. Aktor mengedit stok data
5. Use Case Diagram: Kelola Transaksi

Aktor : Admin
Tabel 4.5. Skenario Use Case Kelola Transaksi

Aktor Sistem
Skenario Normal
transaksi
3. Sistem tampilkan
halaman kelola transaksi
tambah transaksi
6. Aktor input data transaksi

9
tombol edit
transaksi
tombol hapus
hapus data
3. Aktor konfirmasi
update data
untuk mencetak
download data
6. Use Case Diagram: Kelola Produk Masuk

Aktor : Admin Gudang
Tabel 4.6. Skenario Use Case Kelola Produk Masuk

Aktor Sistem
Skenario Normal
10

produk masuk
3. Sistem tampilkan
halaman kelola produk
masuk
tambah produk masuk
6. Aktor input data produk
masuk
tombol edit
produk masuk
tombol hapus
hapus data
3. Aktor konfirmasi
update data
untuk mencetak
download data
11
7. Use Case Diagram: Kelola Customer

Aktor : Admin
Tabel 4.7. Skenario Use Case Kelola Customer

Aktor Sistem
Skenario Normal
2. Aktor pilih menu
customer
3. Sistem tampilkan
halaman customer
tambah customer
6. Aktor input data
customer
tombol edit
customer
tombol hapus
hapus data
3. Aktor konfirmasi
12
update data
untuk mencetak
download data
8. Use Case Diagram: Kelola Pengiriman Produk

Aktor : Admin Gudang
Tabel 4.8. Skenario Use Case Kelola Pengiriman Produk

Aktor Sistem
Skenario Normal
2. Aktor pilih menu
pengiriman produk
3. Sistem tampilkan
halaman pengiriman
produk
tambah pengiriman
produk
6. Aktor input data
pengiriman produk
tombol edit
13

pengiriman produk
tombol hapus
hapus data
3. Aktor konfirmasi
update data
untuk mencetak
download data
9. Use Case Diagram: Kelola Grafik

Aktor : Admin dan Pemilik
Kondisi Akhir : Monitoring dan mencetak data grafik.
Tabel 4.9. Skenario Use Case Kelola Grafik
Aktor Sistem
Skenario Normal
2. Aktor pilih menu grafik
3. Sistem tampilkan
halaman grafik
4. Aktor memantau atau
mencetak grafik

14
1. Aktor pilih tombol grafik
harian
2. Sistem tampilkan data
grafik harian
mencetak grafik
bulanan
grafik bulanan
mencetak grafik
tahunan
grafik tahunan
mencetak grafik
10. Use Case Diagram: Kelola User

Aktor : Admin
Tabel 4.10. Skenario Use Case Kelola User

Aktor Sistem
Skenario Normal
user
15
3. Sistem tampilkan
halaman kelola user
tambah user
6. Aktor input data user
tombol edit
3. Aktor mengedit data user
tombol hapus
hapus data
3. Aktor konfirmasi
update data
1. Aktor memilih edit profil
dan klik tombol edit
data profil
profil
1. Aktor memilih edit profil
dan klik tombol ganti
password
ganti password
16
3. Aktor mengganti
password
4. Sistem memverifikasi
dan update
5. Sistem konfirmasi untuk
melakukan re-login
6. Aktor memilih re-login
7. Sistem redirect ke
halaman login
11. Use Case Diagram: Kelola Laporan

Aktor : Admin dan Pemilik
Deskripsi : Cetak Data
Kondisi Akhir : Cetak Data.
Tabel 4.11. Skenario Use Case Kelola Laporan

Aktor Sistem
Skenario Normal
2. Aktor pilih menu yang
akan dilaporkan
3. Sistem tampilkan
halaman yang
diinginkan
untuk mencetak
download data
1. Aktor pilih menu grafik
2. Sistem tampilkan menu
grafik
3. Aktor pilih tombol
download grafik yang
akan dicetak
17

download data
4.3.3. Class Diagram

Berikut ini adalah class diagram dari sistem monitoring
CV. I.US Aguaria:
Gambar 4.2. Class Diagram
Penjelasan Gambar 4.2. :

a. Terdapat 8 tabel database yang terdiri dari tabel produk,
supplier, pengiriman, kategori, user, transaksi, customer
dan produk masuk
b. Hampir semua Primary Key pada tiap tabel mempunyai
field Foreign Key pada tabel lain, terkecuali tabel user yang
memiliki fungsi utama sebagai otentifikasi
c. Operasi CRUD (Create, Read, Update, Delete) dimiliki
oleh setiap tabel, dan terdapat beberapa tabel yang memiliki
fungsi cetak.
18
4.3.4. Activity Diagram

a. Activity Diagram Kelola Data Produk
Gambar 4.3. Activity Diagram Kelola Data Produk

1) Aktivitas tersebut hanya dapat dilakukan oleh Admin
2) Admin berhak untuk mengubah data produk sesuai arahan
dari pemilik
3) Admin bertanggung jawab atas segala aktivitas
pengelolaan data produk
19
b. Activity Diagram Kelola Data Kategori
Gambar 4.4. Activity Diagram Kelola Data Kategori

2) Admin berhak untuk mengubah data kategori sesuai
arahan dari pemilik
pengelolaan data kategori
4) Aktivitas pengelolaan data dilakukan pada form yang
sama
20
21
c. Activity Diagram Kelola Data Supplier
Gambar 4.5. Activity Diagram Kelola Data Supplier

2) Admin berhak untuk mengubah data supplier sesuai
arahan dari pemilik dan supplier terkait
pengelolaan data supplier
22
d. Activity Diagram Kelola Data Stok Produk
Gambar 4.6. Activity Diagram Kelola Data Stok Produk

1) Aktivitas tersebut dapat dilakukan oleh Admin dan
Admin Gudang
2) Admin Gudang berhak untuk mengubah data stok produk
sesuai arahan dari pemilik
3) Admin Gudang bertanggung jawab atas aktivitas
pengelolaan data stok produk saat adanya penambahan
stok oleh gudang.
23
e. Activity Diagram Kelola Data Transaksi
Gambar 4.7. Activity Diagram Kelola Data Transaksi

2) Admin berhak untuk mengubah data transaksi sesuai
arahan dari pemilik
pengelolaan data transaksi
24
f. Activity Diagram Kelola Data Produk Masuk
Gambar 4.8. Activity Diagram Kelola Data Produk Masuk

1) Aktivitas tersebut dapat dilakukan oleh Admin dan
Admin Gudang
2) Admin Gudang berhak untuk mengubah data produk
masuk sesuai arahan dari pemilik dan keadaan dari
produk terkait
3) Admin Gudang bertanggung jawab atas segala aktivitas
pengelolaan data produk masuk
25
g. Activity Diagram Kelola Data Customer
Gambar 4.9. Activity Diagram Kelola Data Customer

2) Admin berhak untuk mengubah data customer sesuai
arahan dari pemilik
pengelolaan data customer
26
h. Activity Diagram Kelola Data Pengiriman
Gambar 4.10. Activity Diagram Kelola Data Pengiriman

1) Aktivitas tersebut dapat dilakukan oleh Admin Gudang
2) Admin Gudang berhak untuk mengubah data pengiriman
produk sesuai arahan dari pemilik
pengelolaan data pengiriman produk
27
i. Activity Diagram Kelola Data Grafik
Gambar 4.11. Activity Diagram Kelola Data Grafik

1) Aktivitas tersebut dapat dilakukan oleh semua aktor
2) Terkait dengan setiap grafik, download data akan
menghasilkan sebuah gambar berupa chart yang telah
dikompresi sedemikian rupa agar tidak pecah dalam
penggunaan.
28
j. Activity Diagram Kelola Data User
Gambar 4.12. Activity Diagram Kelola Data User

1) Aktivitas tersebut dapat dilakukan oleh Admin
2) Admin berhak untuk mengubah data user sesuai arahan
dari pemilik
pengelolaan data user
4) Selain Admin, semua user dapat melakukan beberapa
aktivitas, yaitu aktivitas edit data yang sesuai dengan user
yang melakukan dan penggantian password.
29
k. Activity Diagram Kelola Data Laporan
Gambar 4.13. Activity Diagram Kelola Data Laporan

1) Aktivitas tersebut dapat dilakukan oleh semua aktor
2) Admin harus melakukan aktivitas berupa laporan harian
(jika diperlukan), bulanan dan tahunan pada setiap
halaman yang diperlukan
3) Admin Gudang harus melakukan aktivitas berupa laporan
harian terkait produk masuk dan pengiriman barang
4) Laporan yang digunakan berupa PDF, Excel atau CSV
30
4.3.5. Sequence Diagram

a. Sequence Diagram Kelola Produk
Gambar 4.14. Sequence Diagram Kelola Produk

1) Aktivitas diatas hanya dapat dijalankan oleh Admin
pengelolaan produk
3) Admin dapat mengubah dan menghapus data sesuai
arahan dari pemilik
4) Admin dapat mencetak data produk per hari, bulan atau
tahun sesuai permintaan pemilik.
31
b. Sequence Diagram Kelola Kategori
Gambar 4.15. Sequence Diagram Kelola Kategori

pengelolaan kategori
arahan dari pemilik.
32
c. Sequence Diagram Kelola Supplier
Gambar 4.16. Sequence Diagram Kelola Supplier

pengelolaan supplier
arahan dari pemilik
tahun sesuai permintaan pemilik.
33
d. Sequence Diagram Kelola Stok Produk
Gambar 4.17. Sequence Diagram Kelola Stok Produk

1) Aktivitas diatas dapat dijalankan oleh Admin dan
Admin Gudang
2) Para aktor bertanggung jawab atas segala aktivitas
pengelolaan stok barang
3) Aktivitas tersebut dilakukan di halaman pengelolaan
produk, selain Admin, aktor lainnya tidak dapat
mengubah apapun kecuali stok data
34
e. Sequence Diagram Kelola Transaksi
Gambar 4.18. Sequence Diagram Kelola Transaksi

pengelolaan transaksi
arahan dari pemilik
tahun sesuai permintaan pemilik
5) Data pengiriman produk harus disimpan pada transaksi
dimana telah disediakan dropdown untuk melihat daftar
pengiriman produk menggunakan nomor pengiriman.
35
f. Sequence Diagram Kelola Produk Masuk
Gambar 4.19. Sequence Diagram Kelola Produk Masuk

Admin Gudang
2) Admin Gudang bertanggung jawab penuh atas segala
aktivitas pengelolaan produk masuk
arahan dari pemilik
4) Kedua aktor dapat mencetak data produk per hari, bulan
atau tahun sesuai permintaan pemilik.
36
g. Sequence Diagram Kelola Pengiriman Produk
Gambar 4.20. Sequence Diagram Kelola Pengiriman Produk

Admin Gudang
2) Admin Gudang bertanggung jawab penuh atas segala
aktivitas pengelolaan pengiriman produk
arahan dari pemilik
atau tahun sesuai permintaan pemilik.
37
h. Sequence Diagram Kelola Customer
Gambar 4.21. Sequence Diagram Kelola Customer

1) Aktivitas diatas dapat dijalankan oleh Admin
2) Admin bertanggung jawab penuh atas segala aktivitas
pengelolaan customer
arahan dari pemilik
atau tahun sesuai permintaan pemilik
5) Data customer dimasukkan berdasarkan jenis pelanggan
38
i. Sequence Diagram Grafik
Gambar 4.22. Sequence Diagram Grafik

Pemilik
2) Aktivitas diatas hanya berupa read dan download data
3) Kedua aktor dapat men-download grafik barang terlaris
dan barang yang masuk per hari, bulan, atau tahunan.
39
j. Sequence Diagram Kelola User
Gambar 4.23. Sequence Diagram Kelola User

1) Aktivitas diatas dapat dijalankan oleh Admin
2) Admin bertanggung jawab penuh atas segala aktivitas
pengelolaan user
arahan dari pemilik
4) Selain Admin, aktor lain hanya dapat mengakses edit
dan penggantian password dari akun aktor itu sendiri
40
k. Sequence Diagram Laporan
Gambar 4.24. Sequence Diagram Laporan

Admin Gudang
2) Aktivitas tersebut dibatasi sesuai dengan job desk
masing – masing karyawan
3) Laporan tersebut berada pada tiap halaman pengelolaan
(contoh: produk, kategori, user, dll ) yang
berdampingan dengan tabel data
41
4.3.6. Desain Database

Berikut ini adalah desain tabel dari database ius-
monitoring-app untuk sistem monitoring penjualan CV. I.US
Aguaria Purwodadi:
1. Tabel produk
Tabel 4.12. Tabel tbl_produk
Field Type Value Keterangan
id_produk int 11 (AI) Primary Key
nama_produk varchar 100
kode_produk varchar 25 Unique Key
id_kategori int 11 Foreign Key
id_supplier int 11 Foreign Key
stok_minimum int 11
stok_produk int 6
hpp int 11
harga_produk int 6
satuan_produk varchar 20
detail_produk text
tgl_input timestamp
2. Tabel Kategori
Tabel 4.13. Tabel tbl_kategori
id_kategori int 11 (AI) Primary Key
jenis_kategori varchar 100
3. Tabel Supplier
Tabel 4.14. Tabel tbl_supplier
id_supplier int 11 (AI) Primary Key
nama_supplier varchar 100
alamat text
no_telpon varchar 20
keterangan text
42
4. Tabel Produk Masuk

Tabel 4.15. Tabel tbl_produk_masuk
id_p_masuk int 11 (AI) Primary Key
resi varchar 50 Unique Key
id_produk int 11 Foreign Key
id_kategori int 11 Foreign Key
id_supplier int 11 Foreign Key
jumlah int 11
harga_beli int 11
satuan_p_masuk varchar 20
detail_p_masuk text
tgl_masuk
5. Tabel Transaksi
Tabel 4.16. Tabel tbl_transaksi
id_transaksi int 11 Primary Key
no_pengiriman varchar 20 Foreign Key
invoice varchar 20 Unique Key
id_produk int 11 Foreign Key
id_customer int 11 Foreign Key
qty int 11
harga_dasar int 11
diskon double
ppn double
subtotal int 11
tipe_pembayaran varchar 20
jatuh_tempo date
status_pembayaran varchar 20
ket_transaksi text
tgl_transaksi timestamp
6. Tabel Pengiriman Produk

Tabel 4.17. Tabel tbl_delivery_order
id_delivery int 11 Primary Key
43
no_pengiriman varchar 20 Unique Key

id_customer int 50 Foreign Key
alamat_tujuan text 50
id_produk int Foreign Key
jumlah_pesan int 50
harga_basic int 50
potongan_delivery double
ppn_delivery double
total_bayar int 11
catatan_order text
7. Tabel User
Tabel 4.18. Tabel tbl_user
id_user int 11 Primary Key
username varchar 100 Unique Key
password varchar 100 MD5 Encrypt
email varchar 100 Unique Key
nama_lengkap varchar 100
j_kelamin enum
image varchar 100
status smallint 6
created_at datetime
updated_at timestamp
log timestamp
8. Tabel Customer
Tabel 4.19. Tabel tbl_customer
id_customer int 11 Primary Key
nama_customer varchar 100
telpon_customer varchar 20
alamat_customer text
date_modified timestamp
44
4.3.7. Desain Antar Muka

Perancangan tampilan disesuaikan berdasarkan kebutuhan
dari perusahaan dan dirancang sedemikian rupa agar nyaman
digunakan oleh pengguna. Dengan desain tampilan yang telah
dibuat ini, diharapkan pengguna tidak kesulitan dalam
menggunakannya. Berikut adalah desain antarmuka dari sistem
monitoring penjualan CV. I.US Aguaria Purwodadi:
a. Halaman Sign-in
Halaman ini merupakan halaman awal saat akan masuk
ke sistem. Halaman ini diperlukan agar sistem tidak dapat
dimanipulasi pihak yang tidak bertanggung jawab. Halaman ini
mempunyai keamanan yang cukup kuat dengan adanya plugin
validasi yang akan terpasang.
Gambar 4.25. Halaman Sign-in

45
b. Halaman Dashboard
Halaman ini merupakan halaman awal Ketika sudah
masuk ke sistem. Halaman ini memuat data log per user dan
penjualan 3 tahun terakhir.
Gambar 4.26. Halaman Dashboard
c. Halaman Kelola Produk

Halaman ini merupakan halaman yang memuat data
produk. Selain manipulasi data (CRUD), update stok juga
dilakukan di halaman ini.
Gambar 4.27. Halaman Kelola Produk

46
d. Form Pengelolaan
Halaman ini merupakan halaman form dari segala
pengelolaan. Desain ini dapat berubah seiring dengan
kebutuhan form itu sendiri, seperti penambahan foto,
combobox, atau lainnya.
Gambar 4.28. Form Pengelolaan
e. Halaman Kelola Kategori

kategori. Pada halaman ini manipulasi data seperti
penambahan, pengubahan serta penghapusan dapat dilakukan.
Gambar 4.29. Halaman Kategori

47
f. Form Kelola Kategori

Form ini merupakan lanjutan dari halaman kategori
pada poin sebelumnya. Form ini digunakan sebagai aksi
penambahan dan pengubahan.
Gambar 4.30. Form Kelola Kategori
g. Halaman Kelola Supplier

supplier. Pada halaman ini manipulasi data seperti
penambahan, pengubahan serta penghapusan dapat dilakukan.
Gambar 4.31. Halaman Supplier

48
h. Form Kelola Supplier

Form ini merupakan lanjutan dari halaman supplier
pada poin sebelumnya. Form ini digunakan sebagai aksi
penambahan dan pengubahan.
Gambar 4.32. Form Kelola Supplier
i. Halaman Produk Masuk

produk masuk. Pada halaman ini manipulasi data seperti
pengubahan dan penghapusan dapat dilakukan. Sedangkan
proses tambah akan dilakukan pada form pengelolaan.
Gambar 4.33. Halaman Produk Masuk

49
j. Halaman Pengiriman Produk

pengiriman produk. Selain manipulasi data, halaman ini
memuat data pengiriman yang terperinci, seperti data barang,
invoice, hingga subtotal layaknya transaksi. Perbedaannya
terletak pada pembelian, dimana pembelian ini berdasarkan
pesanan.
Gambar 4.34. Halaman Pengiriman Produk
k. Halaman Transaksi
produk masuk. Pada halaman ini manipulasi data seperti
pengubahan dan penghapusan dapat dilakukan. Sedangkan
proses tambah akan dilakukan pada form pengelolaan.
50
Gambar 4.35. Halaman Transaksi

l. Halaman Grafik
grafik. Halaman ini digunakan layaknya menu untuk memilih
data grafis penjualan per harian, bulanan atau tahunan.
Sedangkan penambahan ada pada grafik 12 bulan terakhir.
Gambar 4.36. Halaman Grafik
m. Halaman Grafik Harian/Bulanan/Tahunan

grafik harian, bulanan atau tahunan. Pada halaman ini terdapat
hasil penjualan, grafik penjualan, serta grafik barang yang
masuk ke gudang.
Gambar 4.37. Halaman Grafik Harian/Bulanan/Tahunan

BAB 5
PERENCANAAN DAN ANALISA PERANCANGAN SISTEM
5.1. Implementasi Sistem

Implementasi sistem merupakan sebuah tahapan lanjut pada sebuah
perancangan perangkat lunak. Tahapan implementasi ini dilakukan setelah
penganalisaan dan pembuatan desain sistem tersebut berhasil dilakukan
dan siap untuk diimplementasikan. Berikut adalah hasil pengembangan
yang telah diimplementasikan ke Sistem monitoring penjualan CV. I.US
Aguaria Purwodadi:
5.1.1. Implementasi Antar Muka
a. Halaman Sign-in
Berikut ini adalah tampilan dari halaman sign-in atau login
dimana semua aktor wajib memasukkan nama akun dan
password untuk masuk ke sistem ini.
Gambar 5.38. Halaman Sign-in
51
52
b. Halaman Dashboard
Berikut ini adalah tampilan dari halaman dashboard yang
memuat data penjualan 3 tahun terakhir dan log user.
Gambar 5.39. Halaman Dashboard
c. Halaman Kelola Data Produk

Berikut ini adalah tampilan dari halaman kelola data
produk, dimana aktor akan mendata semua produk yang
tersedia pada CV. I.US Aguaria Purwodadi.
Gambar 5.40. Halaman Kelola Data Produk

53
d. Form Data Produk

Berikut ini adalah tampilan dari form data produk yang
dipergunakan untuk menambah dan meng-edit data produk.
Gambar 5.41. Form Data Produk
e. Halaman Kelola Data Kategori

kategori, dimana setiap kategori yang ada di gudang akan
didata untuk pratinjau data transaksi.
Gambar 5.42. Halaman Kelola Data Kategori

54
f. Form Data Kategori

Berikut ini adalah tampilan dari form data kategori yang
dipergunakan untuk menambah dan meng-edit data kategori.
Gambar 5.43. Form Data Kategori
g. Halaman Kelola Data Supplier

supplier, dimana setiap supplier yang tersedia di gudang akan
didata untuk pratinjau data transaksi.
Gambar 5.44. Halaman Kelola Data Supplier

55
h. Form Data Supplier

Berikut ini adalah tampilan dari form data supplier yang
dipergunakan untuk menambah dan meng-edit data supplier.
Gambar 5.45. Form Data Supplier
i. Halaman Kelola Data Transaksi

transaksi, dimana setiap transaksi yang sudah selesai akan
ditampilkan secara detail.
Gambar 5.46. Halaman Kelola Data Transaksi

56
j. Form Data Transaksi

Berikut ini adalah tampilan dari form data transaksi yang
dipergunakan untuk menambah dan meng-edit data transaksi.
Terdapat sebuah fungsi untuk menambahkan transaksi
pengiriman produk secara otomatis agar tidak mengisi form
secara manual lagi.
Gambar 5.47. Form Data Transaksi
k. Halaman Produk Masuk

Berikut ini adalah tampilan dari halaman produk masuk.
Halaman ini memuat data produk yang akan di stok ulang dari
berbagai supplier.
Gambar 5.48. Halaman Produk Masuk

57
l. Form Produk Masuk

Berikut ini adalah tampilan dari form produk masuk.
Hampir sama seperti form lainnya, form ini menampilkan detail
input yang dibutuhkan ketika aktivitas stok ulang dilakukan.
Gambar 5.49. Form Produk Masuk
m. Halaman Pengiriman Produk

Berikut ini adalah tampilan dari halaman pengiriman
produk, dimana memuat data pembelian produk melalui
pesanan dan pada halaman ini akan dimuat detail – detailnya.
Gambar 5.50. Halaman Pengiriman Produk

58
n. Form Pengiriman Produk

Berikut ini adalah tampilan dari form pengiriman produk,
form ini akan digunakan untuk fungsi tambah dan edit stok
produk.
Gambar 5.51. Form Pengiriman Produk
o. Halaman Kelola Data Customer

customer, dimana setiap customer yang telah dan akan menjadi
langganan dicatat.
Gambar 5.52. Halaman Kelola Data Customer

59
p. Form Customer
Berikut ini adalah tampilan dari form customer, form ini
akan digunakan untuk fungsi tambah dan edit customer, dimana
hanya admin yang dapat mengaksesnya.
Gambar 5.53. Form Customer
q. Halaman Grafik
Berikut ini adalah tampilan dari halaman grafik. Halaman
ini memuat data grafik seperti penjualan per hari, bulan dan
tahun.
Gambar 5.54. Halaman Kanal Produk masuk

60
r. Halaman Grafik Harian, Bulanan dan Tahunan

Berikut ini adalah tampilan dari setiap grafik harian,
bulanan, dan tahunan. Pada setiap halaman akan memuat data
seperti total penjualan, grafik produk masuk, dan produk
terlaris.
Gambar 5.55. Halaman Grafik Harian
Gambar 5.56. Halaman Grafik Bulanan

61
Gambar 5.57. Halaman Grafik Tahunan
s. Halaman Kelola Data User

Berikut ini adalah tampilan dari halaman user. Halaman ini
memuat berbagai data user yang merupakan pegawai dan
pemilik dari CV. I.US Aguaria Purwodadi.
Gambar 5.58. Halaman Kelola Data User

62
t. Form Data User

Berikut ini adalah tampilan dari form data user, form ini
akan digunakan untuk fungsi tambah dan edit user, dimana
hanya admin dan user aktif yang dapat mengaksesnya.
Gambar 5.59. Form Data User
u. Form Ganti Password

Berikut ini adalah tampilan dari form ganti password. Form
ini memuat data password dari setiap user yang akan
melakukan penggantian password.
Gambar 5.60. Form Ganti Password

63
5.1.2. Implementasi Database

Implementasi database adalah sebuah tahapan yang telah
dikembangkan dan telah diimplementasikan ke sistem dari
perancangan usecase dan class diagram. Berikut adalah hasil
perancangan database yang telah diimplementasikan ke Sistem
monitoring penjualan pada CV. I.US Aguaria Purwodadi:
a. Implementasi Tabel Produk
Gambar 5.61. Implementasi Tabel Produk
b. Implementasi Tabel Kategori
Gambar 5.62. Implementasi Tabel Kategori
c. Implementasi Tabel Supplier
Gambar 5.63. Implementasi Tabel Supplier

64
d. Implementasi Tabel Produk Masuk
Gambar 5.64. Implementasi Tabel Produk Masuk
e. Implementasi Tabel Pengiriman Produk
Gambar 5.65. Implementasi Tabel Pengiriman Produk
f. Implementasi Tabel Transaksi
Gambar 5.66. Implementasi Tabel Transaksi

65
g. Implementasi Tabel Customer
Gambar 5.67. Implementasi Tabel Customer
h. Implementasi Tabel User
Gambar 5.68. Implementasi Tabel User
5.2. Pengujian Sistem

Pengujian sistem adalah sebuah tahapan dimana sistem yang telah
dibuat dan dikembangkan akan diuji fungsi, logika, dan tampilannya agar
bekerja sesuai dengan harapan. Pengujian sistem ini akan dilakukan
menggunakan pengujian white box dan black box. Berikut adalah hasil dari
pengujian sistem monitoring penjualan CV. I.US Aguaria Purwodadi:
5.2.1. Pengujian White Box
Pengujian White Box digunakan untuk melakukan
pengecekan detail pada program. Pengujian ini difokuskan untuk
mendeteksi kondisi – kondisi dalam sistem yang tidak sesuai atau
mengalami kesalahan logika dalam penulisan program. Berikut ini
hasil pengujian fungsi tambah barang masuk dari sisi admin
gudang pada sistem monitoring penjualan CV. I.US Aguaria
Purwodadi:
66
a. Alur Tambah Data Produk
Gambar 5.69. Bagan Alur Tambah Data Produk
b. List Fungsi Tambah Data Produk

Tabel 5.20. List Alur Tambah Data Produk
Node Syntax
$data['title'] = 'Tambah Produk Baru';
$data['action'] = site_url('content/produk/tambah-
1
produk');
$produk = $this->produk_m;
} else {
2
$produk->save();
$validation = $this->form_validation;
3 $validation->set_rules($produk->rules());
$validation->set_error_delimiters('');
$this->session->set_flashdata('success', 'Data
Berhasil Disimpan!');
4
redirect("content/produk", "refresh");
}
if ($validation->run() == false) {
$data['kategori'] = $produk->getKategori();
5 $data['supplier'] = $produk->getSupplier();
$this->show->display('produk/tambah',
$data);
6 }
67
c. Grafik Alur Tambah Data Produk
Gambar 5.70. Grafik Alur Tambah Data Produk

Keterangan Gambar 5.33. Grafik Alur Tambah Data
Produk adalah sebagai berikut:
1. Mulai
2. Input Data
3. Cek Data
4. Simpan Data
5. Error/Invalid Data
6. Selesai
d. Cyclomatic Complexity
Region (R) =6
Node (N) =6
a) Penghitungan dengan rumus :
V(G) = E – N + 2
V(G) = 6 – 6 + 2
V(G) = 2
68
b) Penghitungan dengan rumus :

V(G) = P + 1
V(G) = 1 + 1
V(G) = 2
Dari hasil perhitungan tersebut maka dapat diketahui
jumlah jalur independen / jalur dasar dari Tambah Data
Produk, yaitu 2 jalur independen sebagai berikut :
Path I : 1 – 2 – 3 – 4 – 6
Path II : 1 – 2 – 3 – 4 – 5 – 6
c) Pengujian Basis Path

Tabel 5.21. List Alur Tambah Data Produk
Jalur/
Input Proses Keterangan
Path
Tambah data
Klik produk
tombol Input dan berhasil.
1
Tambah Simpan Data Selanjutnya
Data menampilkan
data produk.
Tambah data
Klik produk
tombol Input dan gagal.
2
Tambah Simpan Data Selanjutnya
Data menampilkan
data produk.
1) Test Case Jalur 1

Jalur ini adalah jalur pengecekan data produk, kemudian
bisa menambahkan data produk, pengecekan get data
produk, data berhasilkan di simpan, menampilkan data
produk.
2) Test Case Jalur 2
Jalur ini adalah jalur pengecekan data produk, kemudian
bisa menambahkan data produk, pengecekan get data
69
produk, data tidak berhasilkan di simpan, menampilkan

data produk.
5.2.2. Pengujian Black Box
Pengujian Black Box digunakan untuk pengecekan
kesesuaian antara input dengan output. Hal tersebut dilakukan
untuk memastikan fungsi – fungsi sistem berjalan sesuai dengan
yang direncanakan. Berikut adalah hasil pengujian black box
Sistem Sistem monitoring penjualan CV. I.US Aguaria Purwodadi:
Tabel 5.22. Hasil Pengujian Black Box
Hasil Yang
No Kasus Uji Langkah Uji Hasil Akurat Keterangan
Diharapkan
Isi form
Tampil Tampil
Tombol Login, klik
1. halaman halaman Sesuai
Login tombol
utama utama
Login
Menampilkan Menampilkan
halaman yang halaman yang
Tombol Top Klik salah
2. sesuai dengan sesuai dengan Sesuai
Menu satu menu
menu yang menu yang
ditekan ditekan
Klik tombol
Tombol tambah pada
3. tambah data halaman Simpan Data Simpan Data Sesuai
produk kelola
produk
Klik tombol
edit pada
Tombol edit
4. halaman Simpan Data Simpan Data Sesuai
data produk
kelola
produk
Klik tombol
Tombol hapus pada
Data Data
5. hapus data halaman Sesuai
Terhapus Terhapus
produk kelola
produk
Klik tombol
Tombol tambah pada
kategori kelola
kategori
Klik tombol
edit pada
Tombol edit
data kategori
kelola
kategori
Klik tombol
Tombol hapus pada
Data Data
Terhapus Terhapus
kategori kelola
kategori
9. Tombol Klik tombol Simpan Data Simpan Data Sesuai
tambah data tambah pada
70
halaman
user
kelola user
Klik tombol
Tombol edit edit pada
10. Simpan Data Simpan Data Sesuai
data user halaman
kelola user
Klik tombol
Tombol
hapus pada Data Data
11. hapus data Sesuai
halaman Terhapus Terhapus
user
kelola user
Klik tombol
Tombol tambah pada
supplier kelola
supplier
Klik tombol
edit pada
Tombol edit
data supplier
kelola
supplier
Klik tombol
Tombol hapus pada
Data Data
Terhapus Terhapus
supplier kelola
supplier
Klik tombol
Tombol tambah pada
tambah data halaman
15. Simpan Data Simpan Data Sesuai
produk kelola
masuk produk
masuk
Klik tombol
edit pada
Tombol edit
halaman
16. data produk Simpan Data Simpan Data Sesuai
kelola
masuk
produk
masuk
Klik tombol
Tombol hapus pada
hapus data halaman Data Data
17. Sesuai
produk kelola Terhapus Terhapus
masuk produk
masuk
Klik tombol
Tombol tambah pada
transaksi kelola
transaksi
Klik tombol
19. data halaman Simpan Data Simpan Data Sesuai
transaksi kelola
transaksi
Klik tombol
Tombol hapus pada
Data Data
Terhapus Terhapus
transaksi kelola
transaksi
21. Tombol Klik tombol Simpan Data Simpan Data Sesuai
tambah data tambah pada
customer halaman
71
kelola
customer
Klik tombol
22. data produk halaman Simpan Data Simpan Data Sesuai
customer kelola
customer
Klik tombol
Tombol hapus pada
Data Data
Terhapus Terhapus
customer kelola
customer
Klik tombol
print pada
Tombol Data berhasil Data berhasil
24. halaman Sesuai
print di download di download
pengelolaan
data
Tombol Klik tombol Data Data
simpan pada simpan pada tersimpan tersimpan
25. halaman halaman dan redirect dan redirect Sesuai
ganti ganti ke halaman ke halaman
password password login login
Dari hasil pengujian tersebut dapat disimpulkan pengujian

Black Box yang meliputi uji input, proses dan output dengan acuan
rancangan perangkat lunak telah terpenuhi dengan hasil sesuai
rancangan.
5.3. Pemeliharaan Sistem

Agar sebuah sistem performanya terkontrol dan memungkinkan
untuk dikembangkan lebih lanjut, maka sistem memerlukan sebuah proses
pemeliharaan. Pemeliharaan sistem tersebut bertujuan untuk sebagai
berikut:
1. Untuk menemukan bug atau error atau kesalahan – kesalahan sistem
yang sebelumnya belum ditemukan dalam tahap pengujian sistem.
Kesalahan – kesalahan sistem yang ditemukan digunakan untuk bahan
evaluasi dan dasar dalam memperbaiki sistem dan atau
mengembangkan sistem
2. Langkah berikutnya dalam pemeliharaan sistem yaitu back up data
secara berkala, hal tersebut dilakukan untuk menjaga sistem dari
kehilangan atau kerusakan data karena kesalahan teknis. Pemantauan
72
sistem juga dilakukan secara berkala untuk menjaga sistem dari

gangguan luar sistem.
BAB 6
PENUTUP
6.1. Kesimpulan
Dari pembahasan pada bab sebelumnya, penulis mengambil
beberapa kesimpulan terkait sistem yang telah dibuat, yaitu:
a. Sistem ini mempunyai fungsi penyimpanan yang besar dan aman
karena dengan disimpannya segala data ke dalam database
b. Respon sistem terhadap kuantitas penjualan yang banyak berhasil
menjawab permasalahan yang terjadi sebelumnya, terlebih dengan
adanya fungsi responsive dari sistem yang membantu melancarkan
pelaporan harian, bulanan hingga tahunan melalui tabel dan grafik
c. Dengan adanya sistem ini, tenaga yang dikeluarkan pun relatif menjadi
lebih sedikit karena dengan adanya input yang sesuai dengan kriteria
yang dibutuhkan.
6.2. Saran
Untuk pengembangan dari Sistem monitoring penjualan I.US
Aguaria Purwodadi kedepannya, penulis memberikan beberapa saran,
yaitu:
a. Memberikan perawatan yang rutin ke database, seperti pembersihan
data tabel yang telah usang atau terlewat beberapa tahun
b. Penulis menyarankan untuk menggunakan sarana local networking,
agar pengguna sistem dapat mengakes secara lokal pada jaringan yang
sama melalui wi-fi secara bersamaan dengan satu komputer sistem
c. Memberikan fungsi dark mode ke light mode dan disimpan ke local
session dari setiap pengguna. Fungsi ini berguna untuk kenyamanan
setiap pengguna dalam menggunakan sistem ini.
73

Bab Iv Vi

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab Iv Vi

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 4

PERENCANAAN DAN ANALISA PERANCANGAN SISTEM

4.1. Perencanaan Sistem

4.2. Analisa Sistem

4.2.1. Identifikasi kebutuhan Perangkat Keras (Hardware)

4.2.2. Identifikasi Kebutuhan Perangkat Lunak (Software)

4.2.3. Identifikasi Kebutuhan Fungsional (Brainware)

4.3. Perancangan Sistem

Gambar 4.1. Use Case Diagram

Penjelasan pada gambar 4.1. Use Case Diagram:

4. Admin gudang dapat mengelola produk masuk, stok produk,

4.3.2. Skenario Diagram

Tabel 4.1. Skenario Use Case Kelola Produk

4. Sistem update data

2. Use Case Diagram: Kelola Kategori

Tabel 4.2. Skenario Use Case Kelola Kategori

7. Sistem menyimpan data

3. Use Case Diagram: Kelola Supplier

Tabel 4.3. Skenario Use Case Kelola Supplier

4. Use Case Diagram: Kelola Stok Produk

Tabel 4.4. Skenario Use Case Kelola Stok Produk

5. Use Case Diagram: Kelola Transaksi

Tabel 4.5. Skenario Use Case Kelola Transaksi

7. Sistem menyimpan data

6. Use Case Diagram: Kelola Produk Masuk

Tabel 4.6. Skenario Use Case Kelola Produk Masuk

2. Aktor pilih menu kelola

7. Use Case Diagram: Kelola Customer

Tabel 4.7. Skenario Use Case Kelola Customer

8. Use Case Diagram: Kelola Pengiriman Produk

Tabel 4.8. Skenario Use Case Kelola Pengiriman Produk

3. Aktor mengedit data

9. Use Case Diagram: Kelola Grafik

5. Sistem memproses data

10. Use Case Diagram: Kelola User

Tabel 4.10. Skenario Use Case Kelola User

11. Use Case Diagram: Kelola Laporan

Tabel 4.11. Skenario Use Case Kelola Laporan

4. Sistem merespon dan

4.3.3. Class Diagram

Gambar 4.2. Class Diagram

Penjelasan Gambar 4.2. :

4.3.4. Activity Diagram

Gambar 4.3. Activity Diagram Kelola Data Produk

Penjelasan Gambar 4.3. :

b. Activity Diagram Kelola Data Kategori

Gambar 4.4. Activity Diagram Kelola Data Kategori

Penjelasan Gambar 4.4. :

c. Activity Diagram Kelola Data Supplier

Gambar 4.5. Activity Diagram Kelola Data Supplier

Penjelasan Gambar 4.5. :

d. Activity Diagram Kelola Data Stok Produk

Gambar 4.6. Activity Diagram Kelola Data Stok Produk

Penjelasan Gambar 4.6. :

e. Activity Diagram Kelola Data Transaksi

Gambar 4.7. Activity Diagram Kelola Data Transaksi

Penjelasan Gambar 4.7. :

f. Activity Diagram Kelola Data Produk Masuk

Gambar 4.8. Activity Diagram Kelola Data Produk Masuk

Penjelasan Gambar 4.8. :

g. Activity Diagram Kelola Data Customer

Gambar 4.9. Activity Diagram Kelola Data Customer

Penjelasan Gambar 4.9. :