DAFTAR ISI

DAFTAR ISI..............................................................................................................
BAB III ANALISA DAN PERANCANGAN.....................................................
3.1. Analisa..............................................................................................
3.1.1. Analisa Sistem Berjalan..........................................................
3.1.2. Activity Diagram Proses Sistem Berjalan...............................
3.1.3. Analisa Data............................................................................
3.2. Perancangan......................................................................................
3.2.1. Perancangan Basis Data (Database).......................................
3.2.1.1.....................................................................Normalisasi
.....................................................................................
3.2.1.2..............................Entity Relationship Diagram (ERD)
.....................................................................................
3.2.1.3....................................................................Relasi Tabel
.....................................................................................
3.2.2. Perencanaan Aplikasi..............................................................
3.2.2.1..........................................................Use Case Diagram
.....................................................................................
3.2.2.2................................................................Class Diagram
...................................................................................12
3.2.2.3..........................................................Sequence Diagram
...................................................................................13
3.2.2.4.............................................................Activity Diagram
...................................................................................15
3.2.2.5..............................................Rancangan User Interface
...................................................................................19

i
 BAB III
ANALISA DAN PERANCANGAN

3.1. Analisa
Permasalahan yang terjadi pada Toko Guente Koi adalah dalam
pengolahan data transaksi sebelumnya belum bisa dimanfaatkan secara optimal
sehingga stok produk penjualan tersebut belum memiliki pola penjualan yang
efektif.

3.1.1. Analisa Sistem Berjalan

Analisa sistem berjalan menjelaskan secara detail dan terstruktur jelas
tentang terjadinya sistem informasi penjualan produk ikan koi yang terjadi di
Toko Guente Koi saat ini, untuk kemudian penulis mengidentifikasi serta
mengevaluasi beberapa permasalahan yang terjadi hingga dapat dijadikan bahan
usulan sistem yang baru. Berikut adalah prosedur sistem yang sedang berjalan di
Toko Guente Koi:
1. Tahap Awal Pemesanan Produk
Untuk Pelanggan (customer) bisa melakukan pemesan produk ikan koi
melalui beberapa cara yaitu menghubungi via telepon ataupun lewat whatsApp.
Kemudian Pelanggan (Customer) mengirimkan PO lalu PO di terima oleh bagian
Kasir setelah itu bagian Kasir melakukan beberapa tahap seperti masuk order dan
membuat sales contract. Lalu sales contract bisa di e-mail atau di kirim via
whatsapp untuk diberikan kepada pelanggan agar dapat ditandatangani. Apabila
pelanggan (customer) sudah menyetujui form sales contract tersebut maka telah
terjadi ikatan kesepakatan terkait pemesanan.

2. Tahap Proses Pengiriman Produk

Setelah tahap pengiriman PO dari pelanggan (customer). Bagian Kasir
membuat laporan pemesanan produk yang telah di pesan, kemudian di diberikan
untuk koreksi oleh Kepala Toko apabila udah sesuai maka pesanan disetujui. Lalu

1
 2

Kasir memberikan konfirmasi kepada pelanggan (customer) agar produk sedang

diproses. Kemudian Kasir mengecek stok untuk menyiapkan produk yang dipesan
agar segera dikirim sesuai PO. Jika stok produk kurang atau habis maka bagian
produk melapor kebagian Kepala Toko untuk mengatasi permasalahan ini.

3. Tahap Pembayaran
Setelah tahap pengiriman pesanan produk ke pelanggan (customer).
Bagian Kasir membuat laporan tagihan (invoice) produk yang telah di pesan,
kemudian di diberikan untuk koreksi oleh Kepala Toko. Untuk pembayaran
biasanya dapat dilakukan secara Transfer atau Cash On Delivery (COD), semua
tergantung kesepakatan dan penjual dan pembeli. Dan setelah invoice diberikan ke
pelanggan (customer) harus diwajibkan membayar pesanan produk yang sudah
diterima.

3.1.2. Activity Diagram Proses Sistem Berjalan

Pada activity diagram berjalan terdapat tiga aktor yaitu pelanggan
(customer), Kasir dan Kepala Toko. Berikut dibawah ini activity diagram yang
pada sistem berjalan yang terdapat di Toko Guente Koi.
 3

Gambar 3.1. Analisa Sistem Berjalan Toko Guente Koi

3.1.3. Analisa Data

Dalam penelitian ini dilakukan analisis secara rinci dan mendasar terhadap
kebutuhan pengguna. Analisis fitur-fitur pada aplikasi dibutuhkan untuk
memenuhi kebutuhan sistem. Fitur-fitur tersebut dibuat untuk memudahkan admin
dalam mengelola data. Berikut ini adalah analisa kebutuhan admin.
1. Admin dapat melakukan login.
2. Admin dapat mengolah data produk.
3. Admin dapat mengelola data user.
 4

4. Admin dapat mengelola data transaksi penjualan.

5. Admin dapat melihat laporan penjualan.
6. Admin dapat mencetak invoice transaksi.

3.2. Perancangan
Perancangan sistem pada penelitian ini melibatkan perancangan basis data
serta perencanaan apliaksi menggunakan diagram-diagram perancangan yang ada
di UML seperti usecase, class diagram, sequence diagram dan activity diagram
serta rancangan desain tampilan antarmuka pengguna (user interface).

3.2.1 Perancangan Basis Data (Database)

3.2.1.1. Normalisasi
Normalisasi merupakan proses mengubah tabel menjadi bentuk normal
atau proses untuk mengidentifikasi dan meng-eliminasi anomaly. Perancangan
normalisasi pada penelitian ini menjelaskan tentang file-file yang tersimpan di
dalam database sistem informasi penjualan produk Toko Guente Koi pada
program rancangan web. Dalam web ini terdapat sebuah database dengan nama
db_guentekoi yang memiliki beberapa tabel, antara lain:
1. Spesifikasi File Tabel Admin
Nama File : admin
Fungsi : Untuk menyimpan data admin
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 75 karakter
Kunci Field : id_admin

Tabel 4.1. Spesifikasi File Tabel Admin

No. Elemen Data Tipe Size Keterangan

1. id_admin int 11 Primary key

 5

No. Elemen Data Tipe Size Keterangan

2. username varchar 25

3. password char 30 MD5

2. Spesifikasi File Tabel Produk

Nama File : produk
Fungsi : Untuk menyimpan data admin
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 75 karakter
Kunci Field : id_admin

Tabel 4.2. Spesifikasi File Tabel Produk

No. Elemen Data Tipe Size Keterangan

1. id_produk int 30 Primary key

2. id_kategori int 11

3. nama_produk varchar 50

4. brand_produk varchar 50

5. harga_beli varchar 25

6. harga_jual varchar 25

7. satuan varchar 25

8. stok int 11

9. tgl_input varchar 25

10. tgl_update varchar 25

 6

3. Spesifikasi File Tabel Kategori

Nama File : kategori
Fungsi : Untuk menyimpan data kategori produk
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 91 karakter
Kunci Field : id_kategori

Tabel 4.3. Spesifikasi File Tabel Kategori

No. Elemen Data Tipe Size Keterangan

1. id_kategori int 11 Primary key

2. nama_kategori varchar 25

3. tgl_input varchar 25

4. Spesifikasi File Tabel Penjualan

Nama File : penjualan
Fungsi : Untuk menyimpan data penjualan
Tipe File : File Transaksi
Organisasi File : Index Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 82 karakter
Kunci Field : id_admin

Tabel 4.4. Spesifikasi File Tabel Penjualan

No. Elemen Data Tipe Size Keterangan

1. id_penjualan int 30 Primary key

2. id_produk varchar 11
 7

No. Elemen Data Tipe Size Keterangan

3. id_admin int 50

4. jumlah int 50

5. total int 30

6. tgl_input varchar 30

5. Spesifikasi File Tabel Detail Transaksi

Nama File : detail _transaksi
Fungsi : Untuk menyimpan data detail transaksi
Tipe File : File Transaksi
Organisasi File : Index Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 83 karakter
Kunci Field : id_ detail _transaksi

Tabel 4.5. Spesifikasi File Tabel Detail Transaksi

No. Elemen Data Tipe Size Keterangan

1. id_detail_transaksi int 11 Primary key

2. id_penjualan int 11

3. id_produk varchar 25

4. id_admin int 11

5. jumlah int 10

6. total int 10

3.2.1.2. Entity Relationship Diagram (ERD)

Tahap perancangan Entity Relationship Diagram (ERD) pada sistem
informasi penjualan produk Toko Guente Koi berbasis web seperti digambarkan
 8

pada desain dibawah ini. Desain dibuat menggunakan software draw.io versi
13.6.2.
 9

Gambar 3.2. Entity Relationship Diagram (ERD)

 10

3.2.1.3. Relasi Tabel

Tahap perancangan Relasi Tabel pada sistem informasi penjualan produk
Toko Guente Koi berbasis web seperti digambarkan pada desain dibawah ini.
Desain dibuat menggunakan software draw.io versi 13.6.2.

Gambar 3.3. Relasi Tabel

3.2.2 Perencanaan Aplikasi

3.2.2.1. Use Case Diagram
Berikut use case diagram mengelola halaman admin pada penelitian ini.
Terdapat use case admin dan use case pengguna (user).
 11

Gambar 3.3. Use Case Diagram Sebagai Admin

1.1. Tabel 3.1. Narrative Use Case Diagram Mengelola Halaman Admin

Use Case Name Mengelola Halaman Admin

Requirements A1 sampai A6
Admin dapat melihat, mengelola, mengedit, cetak
Goal
dan menghapus data-data
Pre-conditions Admin telah login
Data tampil, tersimpan, terupdate, tercetak dan
Post-conditions
terhapus
Gagal menampilkan, menyimpan, mengupdate,
Failed End Conditions
cetak dan menghapus
Primary Actors Admin
1. Admin melihat data
2. Admin menambahkan data
Main Flow / Basic Path 3. Admin menghapus data
4. Admin menyimpan data
5. Admin mencetak data
 12

Gambar 3.4. Use Case Diagram Halaman User

Tabel 3.2. Narrative Use Case Diagram Halaman User

Use Case Name Mengelola Halaman User

Requirements B1 sampai B4
User dapat melakukan dan mencetak data
Goal
transaksi pembelian produk
Pre-conditions User telah login

Post-conditions Data tersimpan, terupdate, tampil, dan tercetak

Gagal menyimpan, mengupdate, menampilkan
Failed End Conditions
dan mencetak
Primary Actors User
1. User melihat data transaksi
Main Flow / Basic Path 2. User mencetak data transaksi
3. User menyimpan data transaksi
 13

3.2.2.2. Class Diagram

Class Diagram merupakan deskripsi kelompok obyek-obyek dengan
properti, perilaku (operasi) dan relasi yang sama. Sehingga dengan adanya class
diagram dapat memberikan pandangan global atas sebuah sistem. Hal tersebut
tercermin dari class-class yang ada dan relasinya satu dengan yang lainnya.

Gambar 3.5. Class Diagram

 14

3.2.2.3. Sequence Diagram

1. Sequence Diagram Admin

Gambar 3.6. Sequence Diagram Halaman Admin

2. Sequence Diagram Halaman Produk

Gambar 3.7. Sequence Diagram Halaman Produk

 15

3. Sequence Diagram Kategori

Gambar 3.8. Sequence Diagram Halaman Kategori

4. Sequence Diagram Penjualan

Gambar 3.9. Sequence Diagram Halaman Penjualan

 16

5. Sequence Diagram User

Gambar 3.10. Sequence Diagram Halaman User

6. Sequence Diagram Laporan

Gambar 3.11. Sequence Diagram Halaman Laporan

3.2.2.4. Activity Diagram

Pada proses rancangan activity diagram yang terdapat pada prototype
sistem informasi penjualan produk terdiri atas :
 17

1. Activity Diagram Mengolah Data Produk

Pada Gambar 3.12. terlihat admin melakukan pilih data produk lalu
menampilkan halaman produk dan pilih menu produk dan saat tampilan menu
produk, admin dapat melakukan edit menu : tambah, ubah dan hapus data produk.

Gambar 3.12. Activity Diagram Admin Mengolah Data Produk

Pada Gambar 3.12 terlihat admin melakukan pilih data produk lalu menampilkan
halaman produk dan pilih menu produk dan saat tampilan menu produk, admin
dapat melakukan edit menu : tambah, ubah dan hapus data produk.

2. Activity Diagram Mengolah Data User

Pada Gambar 3.13 terlihat admin melakukan pilih data user lalu
menampilkan halaman user dan data user lalu pilih menu dan saat tampilan menu
user, admin dapat melakukan edit menu data user : tambah, ubah dan hapus data
user.
 18

Gambar 3.13. Activity Diagram Admin Mengelola Data User

Pada Gambar 3.13 terlihat admin melakukan pilih data user lalu menampilkan
halaman user dan data user lalu pilih menu dan saat tampilan menu user, admin
dapat melakukan edit menu data user : tambah, ubah dan hapus data user.

3. Activity Diagram Transaksi

Pada Gambar 3.14 terlihat user melakukan pilih transaksi pemesanan lalu
tampil halaman pembelian produk dan user pun dapat mencari dan memilih
produk yang akan dipesan. Setelah proses pembelian dikonfirmasi akan tampil
harga pembelian pesanan produk dan system akan otomatis menampilkan halaman
invoice untuk dicetak oleh user.
 19

Gambar 3.14. Activity Diagram Transaksi Penjualan

Pada Gambar 3.14 terlihat user melakukan pilih transaksi pemesanan lalu tampil
halaman pembelian produk dan user pun dapat mencari dan memilih produk yang
akan dipesan. Setelah proses pembelian dikonfirmasi akan tampil harga pembelian
pesanan produk dan system akan otomatis menampilkan halaman invoice untuk
dicetak oleh user.

4. Activity Diagram Laporan

Pada Gambar 3.15. terlihat admin memilih menu laporan pada halaman
sistem dan tampil menu laporan pada tanggal berapa laporan akan dicetak sesuai
kebutuhan.
 20

Gambar 3.15. Activity Diagram Laporan Penjualan Produk

Pada Gambar 3.15. terlihat admin memilih menu laporan pada halaman sistem
dan tampil menu laporan pada tanggal berapa laporan akan dicetak sesuai
kebutuhan.

3.2.2.5. Rancangan User Interface

Pada tahap analisis pra-rancangan input output sistem dibuat sebuah sketsa
bentuk aplikasi yang dibuat menggunakan software Balsamic Wireframes versi
4.0.25. Tahap ini menjelaskan terjadinya input, proses dan output pada sistem.
Berikut beberapa analisis pra-rancangan tampilan input output pada sistem yang
akan dibuat.
 21

Gambar 3.16. Rancangan User Interface Halaman Login

Gambar 3.16. memperlihatkan tampilan login terdapat input yang harus diisi oleh
pengguna. Actor admin dan user harus memasukkan username dan password agar
bisa akses ke halaman awal sistem (dashboard) atau halaman utama untuk dapat
mengakses halaman yang terdapat pada aplikasi web.

Gambar 3.17. Rancangan User Interface Halaman Menu Utama (Dashboard)

 22

Pada Gambar 3.17. merupakan halaman dimana pengguna admin telah selesai
melakukan input username dan password, maka admin akan menuju ke halaman
utama yang berisi menu-menu yang terdapat pada sistem. Halaman ini disebut
halaman utama (dashboard).

Gambar 3.18. Rancangan User Interface Halaman Data Supplier

Pada Gambar 3.18. merupakan halaman dimana pengguna admin memilih menu
Data Supplier, maka tampilan akan seperti pada gambar diatas. Halaman data
supplier berisikan data-data supplier yang dapat diatur oleh pengguna admin
dengan menu “tambah data” dan “reset data”.
 23

Gambar 3.19. Rancangan User Interface Halaman Data Produk

Pada Gambar 3.19. merupakan halaman dimana pengguna admin memilih menu
data Jenis Produk, maka tampilan akan seperti pada gambar diatas. Halaman data
jenis produk berisikan data-data produk yang dijual yang dapat diatur oleh
pengguna admin dengan menu “tambah data” dan “reset data”.

Gambar 3.20. Rancangan User Interface Menu Laporan

 24

Pada Gambar 3.20. merupakan halaman dimana pengguna admin memilih menu
Pengaturan, maka tampilan akan seperti pada gambar diatas. Halaman pengaturan
berisikan data-data laporan yang dapat diatur oleh pengguna admin. Laporan
berisikan data-data seperti: laporan penjualan, laporan produk dan laporan
supplier. Laporan dapat ter-update sesuai tanggal otomatis.