BAB IV

PERANCANGAN SISTEM INFORMASI PENJUALAN SEMBAKO

PADA TOKO CATUR PAWAN

A. Gambaran Umum Sistem Usulan

Berdasarkan analisa sistem berjalan di Toko Catur Pawan pada bab

sebelumnya, maka penulis mengusulkan sebuah rancangan sistem informasi

untuk proses transaksi jual beli. Perancangan sistem usulan merupakan sebuah

pengembangan sistem baru yang dirancang oleh penulis, agar dapat

menyelesaikan permasalahan yang dihadapi oleh Toko Catur Pawan. Sistem

informasi penjualan berbasis web pada Toko Catur Pawan merupakan sistem

usulan yang dirancang oleh penulis, sistem informasi yang memanfaatkan

website sebagai media pemasaran dan penjualan secara online.

Penjualan secara online adalah transaksi yang dilakukan secara online

menggunakan media website yang dihubungkan dengan jaringan internet,

yang dapat diakses menggunakan smartphone dan komputer. Perancangan

sistem informasi ini bertujuan untuk meningkatkan omset penjualan dan

meningkatkan kinerja pelayanan pada Toko Catur Pawan. Dengan adanya

sistem ini pelanggan lebih mudah untuk memperoleh informasi barang dan

melakukan transaksi lebih cepat dan hemat waktu.

Rancangan yang diusulkan menggunakan bahasa pemrograman php

dan javascript. Aplikasi perancangan Visual Studio Code, perangkat lunak

XAMPP versi 3.3.0 serta database sistem menggunakan MariaDB versi

10.4.27 dan pembuatan laporan menggunakan FPDF.

51
 52

B. Prosedur Sistem Usulan

Prosedur baru yang penulis usulkan yaitu untuk memperbaiki prosedur

lama yang telah berjalan dan masih terdapat beberapa kekurangan dalam

proses transaksi. Oleh karena itu dibutuhkan sistem informasi yang dapat

meningkatkan kinerja yang lebih cepat dan akurat, sehingga membantu Toko

Catur Pawan untuk mencapai tujuan yang diinginkan. Adapun prosedur sistem

baru yang diusulkan oleh penulis sebagai berikut:

1. Prosedur Login

Prosedur login merupakan proses awal yang dilakukan oleh

pengguna untuk masuk ke dalam sistem yang akan dijalankan. Proses

login hanya dapat dilakukan oleh pemilik, bagian kasir dan pelanggan.

Pada halaman login, pengguna harus meng-input email dan password

terlebih dahulu pada form login sesuai yang tersimpan pada database. Jika

email dan password yang dimasukkan tidak sesuai dengan yang tersimpan

pada database, maka akan ada pemberitahuan bahwa email dan password

yang dimasukkan salah, sebaliknya jika email dan password yang

dimasukkan sesuai dengan yang tersimpan pada database, maka pengguna

akan diarahkan ke halaman utama sesuai dengan hak akses yang dimiliki.

2. Prosedur Pendaftaran

Pada proses pendaftaran, pelanggan diminta untuk mendaftarkan

diri supaya pelanggan memiliki akun untuk dapat mengakses sistem.

Pelanggan dapat mendaftar akun dengan cara mengisi form yang ada pada

halaman pendaftaran yang berupa nama, email, nomor hp dan password.

Apabila pelanggan sudah mendaftar maka pelanggan akan memiliki akun

 53

dan pelanggan dapat melakukan transaksi penjualan pada sistem.

Sedangkan, apabila pelanggan tidak melakukan pendaftaran, maka

pelanggan tidak dapat memiliki akun sehingga pelanggan hanya dapat

melihat produk yang dijual di sistem.

3. Prosedur Pembelian

Prosedur pembelian berawal dari bagian kasir yang mengecek

persediaan barang melalui sistem berdasarkan database, kemudian bagian

kasir mencetak daftar persediaan barang dan menyerahkannya kepada

pemilik. Selanjutnya pemilik melakukan pemesanan barang kepada

pemasok. Setelah menerima daftar pesanan, pemasok menyiapkan barang

pesanan dan mengirimkan barang pesanan.

Bagian penjualan akan memeriksa barang yang diterima. Apabila

barang yang diterima tidak mengalami kerusakan dan sesuai dengan data

yang tertera pada faktur pembelian, maka bagian penjualan akan

menyusun barang tersebut ke dalam toko serta menyerahkan faktur

pembelian barang kepada bagian kasir. Bagian kasir akan melakukan

pembayaran kepada pemasok dan meng-input data pembelian ke dalam

database.

4. Prosedur Kelola Kategori

Proses kelola data kategori meliputi tampilan data kategori,

penambahan data kategori, pengubahan data kategori dan penghapusan

data kategori. Bagian kasir akan mengelompokkan kategori-kategori dari

barang supaya memudahkan dalam membedakan jenis barang yang ada

 54

sehingga barang dapat dicari dengan mudah. Setelah disusun, sistem akan

menyimpan data ke dalam database.

5. Prosedur Kelola Data Produk

Proses kelola produk meliputi tampilan data produk, penambahan

data produk, pengubahan data produk dan penghapusan data produk.

Proses kelola produk dilakukan oleh bagian kasir dan bagian penjualan.

Bagian penjualan akan membantu bagian kasir memasukkan data barang

yang akan dijual ke dalam sistem. Sistem akan menyimpan data ke dalam

database.

6. Prosedur Kelola Data Penjualan

Proses kelola data penjualan meliputi tampilan data pesanan yang

meliputi: daftar pesanan, cek bukti pembayaran, konfirmasi data pesanan

dan menghapus data pesanan. Proses kelola data penjualan dilakukan oleh

bagian kasir. Bagian kasir dapat melakukan pengecekan bukti bayar,

mengubah status pengiriman, meng-input nomor resi dan menghapus

pesanan yang tidak dibayar oleh pelanggan. Setelah disusun, sistem akan

menyimpan data ke dalam database.

7. Prosedur Kelola Data Pelanggan

Proses kelola data pelanggan meliputi tampilan data pelanggan,

pengubahan data pelanggan dan penghapusan data pelanggan. Proses

kelola data pelanggan dilakukan oleh pemilik. Pemilik melakukan

pendataan siapa saja pelanggan yang terdaftar pada sistem. Setelah

disusun, sistem akan menyimpan data ke dalam database.

8. Prosedur Keranjang
 55

Pada proses keranjang terjadi setelah pelanggan memilih barang

yang dipilih pada halaman utama. Pelanggan dapat menambah barang,

mengubah barang dan menghapus barang pada halaman keranjang sesuai

yang diinginkan. Setelah disusun, sistem akan menyimpan data ke dalam

database.

9. Prosedur Checkout

Proses checkout terjadi apabila pelanggan selesai memilih dan

mengatur jumlah barang yang diinginkan. Pada proses checkout, akan

ditampilkan detail pembelian produk yang dibeli oleh pelanggan sebelum

pelanggan melakukan pembayaran. Di halaman checkout, pelanggan dapat

mengisi detail pengiriman seperti alamat lengkap dan memilih kurir

pengiriman serta pelanggan diinfokan total bayar.

10. Prosedur Kirim Pembayaran

Proses kirim pembayaran dilakukan pada saat pelanggan sudah

checkout atau sudah melakukan pemesanan barang, apabila pelanggan

sudah melakukan pembayaran, pelanggan dapat mengirimkan bukti bayar,

supaya bagian kasir dapat mengkonfirmasi pembayaran.

11. Prosedur Konfirmasi Pembayaran

Pada proses konfirmasi pembayaran, bagian kasir akan melakukan

verifikasi secara manual dengan mengecek foto yang telah diunggah oleh

pelanggan. Apabila sudah dikonfirmasi oleh bagian kasir maka sistem

akan memperbarui status pembayaran menjadi sudah bayar, kemudian

pesanan barang akan diproses.

12. Prosedur Pengiriman Pesanan

 56

Pada proses pengiriman pesanan, bagian kasir akan meminta

bagian penjualan untuk menyiapkan barang yang telah dipesan oleh

pelanggan. Kemudian mengirim barang sesuai dengan kurir pengiriman

yang telah dipilih. Bagian kasir akan mengakses halaman pesanan admin

dan mengubah info pengiriman menjadi paket dalam pengiriman. Sistem

akan menyimpan perubahan data pada database.

13. Prosedur Cek Status Pesanan

Pada proses cek status pesanan, pelanggan dapat mengecek status

pesanan yang meliputi: pesanan sedang di proses, pesanan sedang dalam

pengiriman dan pesanan diterima. Pelanggan yang telah menerima

pesanannya dapat mengkonfirmasi pesanannya dengan meng-klik tombol

Konfirmasi penerimaan. Data pesanan yang dipilih otomatis akan berubah

statusnya menjadi pesanan diterima.

14. Prosedur Laporan

Pada proses pembuatan laporan terdapat menu laporan yang dapat

diakses oleh pemilik dan bagian kasir. Laporan berupa laporan persediaan

dan laporan penjualan yang dapat ditampilkan dengan filter berdasarkan

bulan dan tahun. Laporan dapat dicetak oleh pemilik.

C. Diagram Unified Modelling Language Sistem Usulan

Untuk memberikan gambaran mengenai prosedur-prosedur yang

terapat pada sistem usulan yang nantinya akan berjalan, maka penulis

menggunakan Diagram Unified Modelling Language (UML). Diagram UML

akan memberikan gambaran mengenai proses-proses dan interaksi yang terjadi

 57

dalam sistem pembelian dan penjualan pada Toko Catur Pawan. Penulis

menggunakan Diagram Use Case, Diagram Sekuensial dan Diagram Kelas

dalam menggambarkan sistem yang akan diusulkan untuk Toko Catur Pawan.

1. Diagram Use Case Usulan

GAMBAR 4.1
Diagram Use Case Sistem Usulan

Diagram use case sistem usulan pada gambar 4.1 menggambarkan

fungsionalitas sistem atau persyaratan-persyaratan yang harus dipenuhi

sistem dari pandangan user. Adapun penjelasan dari diagram use case dia

atas sebagai berikut:

a. Pemilik dapat mengakses sistem melalui proses login yang terlibat

dalam proses transaksi pembelian, laporan dan pengelolaan data

pengguna.
 58

b. Bagian kasir dapat mengakses sistem melalui proses login yang terlibat

dalam proses transaksi penjualan kepada pelanggan, transaksi

pembelian dan laporan.

c. Pemasok tidak dapat mengakses sistem melalui proses login. Pemasok

terlibat dalam proses transaksi pembelian.

d. Pelanggan dapat mengakses sistem melalui proses login yang terlibat

dalam melakukan proses transaksi penjualan.

2. Diagram Sekuensial

a. Diagram Sekuensial Login

GAMBAR 4.2
Diagram Sekuensial Login

Berdasarkan gambar 4.2 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Pengguna dari bagian ini adalah pemilik, bagian kasir dan

pelanggan. Proses alur kerja berdasarkan waktu yaitu:

 59

1) Pengguna meng-akses halaman login. Sistem akan menampilkan

form login.

2) Pengguna meng-input email dan password.

3) Kemudian masukan akan diperiksa oleh sistem di database.

4) Jika email dan password tidak cocok maka sistem akan

menampilkan pesan email atau password salah dan pengguna akan

meng-input email dan password kembali.

5) Jika cocok maka login berhasil. Sistem akan membagi pengguna ke

halaman masing-masing sesuai dengan hak akses yang dimiliki.

6) Jika pengguna memasukkan akun admin maka akan dialihkan ke

halaman admin.

7) Jika pengguna memasukkan akun pelanggan maka akan dialihkan

ke halaman utama website.

b. Diagram Sekuensial Pendaftaran

DIAGRAM 4.3
Diagram Sekuensial Pendaftaran
 60

1) Pelanggan meng-akses halaman daftar akun. Sistem akan

menampilkan halaman daftar akun.

2) Pelanggan meng-input nama, email, nomor hp dan password pada

form daftar akun.

3) Jika masukan email salah, maka sistem akan menampilkan pesan:

sertakan @ pada alamat email. Jika masukan sesuai, maka data

masukan akan disimpan pada database.

4) Sistem akan menampilkan pesan pendaftaran berhasil.

c. Diagram Sekuensial Pembelian

Berdasarkan gambar 4.4 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu :

GAMBAR 4.4
Diagram Sekuensial Pembelian

1) Bagian kasir membuka halaman produk.

2) Sistem meminta data produk pada database.

 61

3) Database mengembalikan data produk pada halaman produk.

4) Bagian kasir meng-klik tombol Tambah.

5) Sistem menampilkan form tambah produk.

6) Bagian kasir meng-input detail produk yang meliputi nama

pemasok, kategori, nama produk, stok, berat, harga, keterangan dan

gambar.

7) Bagian kasir meng-klik tombol Simpan.

8) Sistem melakukan validasi data.

9) Data produk disimpan ke dalam database.

10) Sistem akan menampilkan pesan: berhasil tersimpan.

d. Diagram Sekuensial Kelola Kategori

 62

GAMBAR 4.5
Diagram Sekuensial Kelola Kategori

Berdasarkan gambar 4.5 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

1) Bagian kasir meng-akses halaman kategori.

2) Sistem meminta data kategori pada database. Database akan

merespon dan sistem menampilkan data kategori pada halaman

kategori.

3) Bagian kasir meng-klik tombol Tambah kategori.

 63

4) Sistem menampilkan form tambah kategori.

5) Bagian kasir meng-input form tambah kategori.

6) Sistem melakukan validasi data dan masukan disimpan pada

database.

7) Sistem akan menampikan pesan kategori berhasil tersimpan.

8) Jika bagian kasir ingin mengubah data kategori, maka bagian kasir

memilih data kategori dan meng-klik tombol Edit pada halaman

kategori.

9) Bagian kasir mengubah input-an data kategori yang akan di edit.

10) Bagian kasir meng-klik tombol Simpan.

11) Sistem melakukan validasi data dan masukan yang telah di edit

disimpan pada database.

12) Sistem akan menampilkan pesan kategori berhasil di update.

13) Jika bagian kasir ingin menghapus data kategori, maka bagian kasir

memilih data kategori dan meng-klik tombol Hapus pada halaman

kategori.

14) Sistem akan menampilkan peringatan konfirmasi hapus.

15) Bagian kasir meng-klik tombol Hapus.

16) Sistem melakukan validasi data dan data kategori yang di hapus

disimpan pada database.

17) Sistem akan menampilkan pesan kategori berhasil di hapus.

e. Diagram Sekuensial Kelola Data Produk

 64

GAMBAR 4.6
Diagram Sekuensial Kelola Data Produk

Berdasarkan gambar 4.6 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

1) Bagian kasir meng-akses halaman produk.

2) Sistem meminta data produk pada database. Kemudian sistem akan

menampilkan halaman produk.

3) Bagian kasir meng-klik tombol Tambah yang tersedia pada

halaman kelola produk.

 65

4) Kemudian meng-input data produk yang meliputi nama pemasok,

kategori, nama produk, stok, berat, harga, keterangan dan gambar.

5) Sistem melakukan validasi data. Data produk disimpan ke dalam

database.

6) Sistem akan menampilkan pesan produk berhasil tersimpan.

7) Jika bagian kasir ingin mengubah data produk, maka bagian kasir

memilih data produk dan meng-klik tombol Edit yang tersedia pada

halaman data produk.

8) Kemudian mengubah input-an data produk yang akan di edit.

9) Bagian kasir meng-klik tombol Simpan.

10) Sistem melakukan validasi data. Data produk yang di edit disimpan

ke dalam database.

11) Sistem akan menampilkan pesan produk berhasil di update.

12) Jika bagian kasir ingin menghapus data produk, maka bagian kasir

memilih data produk dan meng-klik tombol Hapus.

13) Sistem akan menampilkan peringatan konfirmasi hapus produk.

14) Bagian kasir meng-klik tombol Hapus.

15) Sistem melakukan validasi data. Data produk dihapus pada

database.

16) Sistem menampilkan pesan produk berhasil di hapus.

f. Diagram Sekuensial Kelola Data Penjualan

Berdasarkan gambar 4.7 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

 66

GAMBAR 4.7
Diagram Sekuensial Kelola Data Penjualan

1) Bagian kasir meng-akses halaman pesanan.

2) Sistem akan meminta data pesanan pada database. Kemudian

sistem menampilkan halaman pesanan.

3) Jika bagian kasir ingin mengecek pembayaran, maka bagian kasir

meng-klik tombol Cek.

4) Sistem menampilkan bukti pembayaran.

5) Bagian kasir akan mengecek bukti pembayaran. Kemudian meng-

klik tombol Konfirmasi.

 67

6) Sistem melakukan validasi data dan data pesanan yang telah

dikonfirmasi akan disimpan pada database.

7) Sistem menampilkan pesan: sudah bayar.

8) Jika bagian kasir ingin mengubah status pengiriman, maka bagian

kasir akan memilih data pesanan dan meng-klik tombol

Konfirmasi.

9) Sistem akan menampilkan form nomor resi dan info pengiriman.

10) Kemudian bagian kasir meng-input nomor resi dan info

pengiriman.

11) Sistem melakukan validasi data dan data pesanan akan disimpan

pada database.

12) Sistem menampilkan pesan: pesanan berhasil di update.

13) Jika bagian kasir ingin menghapus data pesanan, maka bagian kasir

akan memilih data pesanan yang akan di hapus dan meng-klik

tombol Hapus.

14) Sistem menampilkan peringatan hapus. Kemudian bagian kasir

meng-klik tombol Hapus.

15) Data pesanan yang dihapus divalidasi oleh sistem.

16) Data pesanan dihapus pada database.

17) Sistem akan menampilkan pesan: pesanan berhasil di hapus.

g. Diagram Sekuensial Kelola Data Pelanggan

 68

Berdasarkan gambar 4.8 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

GAMBAR 4.8
Diagram Sekuensial Kelola Data Pelanggan

1) Pemilik meng-akses halaman pelanggan.

2) Sistem akan meminta data pelanggan pada database. Kemudian

data pelanggan tampil di halaman pelanggan.

3) Jika pemilik ingin mengubah data pelanggan, maka pemilik

memilih data pelanggan dan meng-klik tombol Edit.

4) Sistem menampilkan form edit data pelanggan.

 69

5) Pemilik mengubah input-an data pelanggan yang akan di edit.

Kemudian meng-klik tombol Simpan.

6) Sistem melakukan validasi data dan data yang di edit disimpan

pada database.

7) Sistem akan menampilkan pesan pengguna berhasil di update.

8) Jika pemilik ingin menghapus data pelanggan, maka pemilik

memilih data pelanggan dan meng-klik tombol Hapus.

9) Sistem menampilkan peringatan konfirmasi hapus.

10) Pemilik meng-klik tombol Hapus.

11) Sistem melakukan validasi data dan data pelanggan di hapus pada

database.

12) Sistem akan menampilkan pesan pelanggan berhasil di hapus.

h. Diagram Sekuensial Keranjang

Berdasarkan gambar 4.9 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

GAMBAR 4.9
Diagram Sekuensial Keranjang
 70

1) Pelanggan memilih produk yang ingin dibeli pada halaman utama.

2) Sistem akan menampilkan detail produk.

3) Pelanggan meng-klik tombol Tambahkan Ke Keranjang.

4) Produk ditambahkan ke keranjang.

5) Sistem melakukan validasi data produk yang ditambahkan ke

keranjang.

6) Data produk pada keranjang disimpan pada database.

7) Sistem menampilkan pesan produk berhasil ditambahkan ke

keranjang.

i. Diagram Sekuensial Checkout

Berdasarkan gambar 4.10 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

GAMBAR 4.10
Diagram Sekuensial Checkout
 71

1) Pelanggan meng-akses halaman keranjang.

2) Sistem mengambil data keranjang pada database. Kemudian sistem

menampilkan data keranjang pada halaman keranjang.

3) Pelanggan meng-klik tombol Checkout.

4) Sistem menampilkan form checkout.

5) Pelanggan meng-input nama, no hp, berat, kota, ekspedisi, layanan

dan alamat.

6) Sistem menampilkan ongkos kirim dan total bayar.

7) Pelanggan meng-klik tombol Buat pesanan.

8) Sistem melakukan validasi data pesanan dan data pesanan akan

disimpan pada database.

9) Pelanggan dialihkan ke halaman pesanan.

j. Diagram Sekuensial Kirim Pembayaran

Berdasarkan gambar 4.11 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

GAMBAR 4.11
Diagram Sekuensial Kirim Pembayaran
 72

1) Pelanggan memilih pesanan produk yang akan di bayar pada

halaman pesanan.

2) Pelanggan akan dialihkan ke form pembayaran.

3) Sistem menampilkan form pembayaran.

4) Pelanggan meng-upload bukti transfer, kemudian meng-klik

tombol Input Bayar.

5) Sistem melakukan validasi data bukti transfer pelanggan. Database

akan menyimpan bukti transfer pelanggan.

6) Pelanggan akan dialihkan ke halaman pesanan dengan status sudah

bayar.

k. Diagram Sekuensial Konfirmasi Pembayaran

Berdasarkan gambar 4.12 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

GAMBAR 4.12
Diagram Sekuensial Konfirmasi Pembayaran
 73

1) Bagian kasir meng-akses halaman pesanan admin.

2) Sistem meminta data pesanan pada database. Kemudian sistem

menampilkan data pesanan pada halaman pesanan admin.

3) Bagian kasir meng-klik tombol Cek dan mengecek pembayaran

dari pelanggan.

4) Bagian kasir meng-klik tombol Konfirmasi.

5) Sistem melakukan validasi dan data disimpan pada database.

6) Sistem menampilkan perubahan status menjadi sudah bayar.

l. Diagram Sekuensial Pengiriman Pesanan

Berdasarkan gambar 4.13 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

GAMBAR 4.13
Diagram Sekuensial Pengiriman Pesanan
 74

1) Bagian kasir melakukan pengiriman lewat kurir yang telah dipilih

oleh pelanggan.

2) Bagian kasir meng-akses halaman pesanan admin.

3) Sistem meminta data pesanan pada database. Kemudian system

menampilkan halaman pesanan admin.

4) Bagian kasir memilih data pesanan yang telah dikirim.

5) Sistem menampilkan data pesanan.

6) Bagian kasir meng-klik tombol Konfirmasi.

7) Sistem menampilkan form pengiriman pesanan.

8) Bagian kasir meng-input nomor resi dan mengubah status sedang

di proses menjadi paket dalam pengiriman.

9) Sistem akan memvalidasi data masukan. Data akan disimpan pada

database.

10) Sistem menampilkan pesan berhasil di update.

m. Diagram Sekuensial Cek Status Pesanan

GAMBAR 4.14
Diagram Sekuensial Cek Status Pesanan
 75

Berdasarkan gambar 4.14 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

1) Pelanggan meng-akses halaman pesanan.

2) Sistem meminta data pesanan pada database.

3) Sistem menampilkan data pesanan pada halaman pesanan.

4) Jika pelanggan telah menerima pesanan, maka pelanggan memilih

pesanan yang telah diterima.

5) Sistem menampilkan detail pembelian pelanggan.

6) Pelanggan meng-klik tombol Konfirmasi penerimaan barang.

7) Sistem melakukan validasi data dan data disimpan pada database.

8) Sistem akan menampilkan status pesanan diterima.

n. Diagram Sekuensial Laporan

GAMBAR 4.15
Diagram Sekuensial Laporan
 76

Berdasarkan gambar 4.15 dijelaskan interaksi antar objek yang

disusun berdasarkan urutan waktu proses yang terjadi pada sistem yang

diusulkan. Proses alur kerja berdasarkan waktu yaitu:

1) Pemilik meng-akses halaman laporan.

2) Sistem menampilkan halaman laporan yang meliputi daftar pilihan

laporan.

3) Pemilik memilih jenis laporan dan filter periode laporan yang akan

di cetak. Kemudian Pemilik meng-klik tombol Print.

4) Sistem melakukan validasi data dan meminta data laporan pada

database.

5) Sistem menampilkan hasil cetak laporan.

3. Diagram Kelas Sistem Usulan

Berdasarkan gambar 4.16 menunjukkan diagram kelas sistem

usulan. Berikut adalah diagram kelas sistem usulan pada Toko Catur

Pawan:
 77

GAMBAR 4.16
Diagram Kelas Sistem Usulan

D. Normalisasi

Normalisasi merupakan suatu teknik yang digunakan untuk

meminimalkan kesalahan yang terjadi pada database agar memiliki integritas

data sehingga tidak terjadi anomali saat melakukan manipulasi data. Berikut

tahapan normalisasi pada sistem usulan:

1. Pembelian

a. Bentuk Tidak Normal

Pembelian = tanggal + nama_pemasok + alamat + no_faktur +

no + nama_barang + kode_barang + qty +

harga_satuan + discount + jumlah_harga +

jumlah_discount + total

b. Bentuk Normal Pertama

Pembelian = {@produk_id + tanggal + nama_pemasok +

alamat_pemasok + no_faktur + no +

nama_produk + stok_produk + harga_produk +

discount + jumlah discount + harga}

c. Bentuk Normal Kedua

Pemasok = {@id_pemasok + nama_pemasok +

alamat_pemasok}

Produk = {@produk_id + nama_produk + harga_produk}

Pembelian = {@id_pembelian + no_faktur + tanggal +

@id_pemasok}
 78

d. Bentuk Normal Ketiga

Pemasok = {@id_pemasok + nama_pemasok +

alamat_pemasok}

Produk = {@produk_id + nama_produk + harga_produk}

Pembelian = {@id_pembelian + no_faktur + tanggal +

@id_pemasok}

Detail Pembelian = {@detail_pesanan_id + @id_pembelian + no +

@produk_id + stok_produk + harga_produk +

discount + harga_produk + jumlah_discount +

harga}

2. Penjualan

a. Bentuk Tidak Normal

Penjualan = tanggal + nama_pelanggan + nota_no +

banyaknya + nama_barang + harga + jumlah +

jumlah_harga

b. Bentuk Normal Pertama

Penjualan = {@pesanan_id + tanggal + nama_pesanan +

nota_pesanan + qty + nama_produk +

harga_produk + total_harga + total_bayar}

c. Bentuk Normal Kedua

Transaksi = {@nota_pesanan + @pesanan_id + tanggal +

nama_pesanan}
 79

Produk = {@pesanan_id + nama_produk + harga_produk +

total_harga + total_bayar}

d. Bentuk Normal Ketiga

Transaksi = {@nota_pesanan + @pesanan_id + tanggal +

nama_pesanan}

Produk = {@pesanan_id + nama_produk + harga_produk}

Detail Penjualan = {@detail_pesanan_id + total_harga + total_bayar}

E. Kamus Data

Kamus data merupakan penyimpanan berisi data yang memiliki

hubungan dengan data lain yang terdapat pada database yang akan dibutuhkan

dalam sebuah sistem. Berikut ini masing-masing kamus simpanan data yang

akan dipakai pada sistem usulan:

1. Tabel User

User = {@user_id + nama_user + email_user + no_hp +

password + foto + level}

user_id = *99999999999*

nama_user = 1 {karakter} 30

email_user = 1 {karakter} 30

no_hp = 1 {karakter} 13

password = 1 {karakter} 15

foto = text

level = 1 {karakter} 10
 80

2. Tabel Produk

Produk = {@produk_id + id_kategori + id_pemasok +

nama_produk + slug_produk + harga_produk +

stok_produk + berat_produk +

keterangan_produk + gambar_produk}

produk_id = *99999999999*

id_kategori = *99999999999*

id_pemasok = *99999999999*

nama_produk = 1 {karakter} 50

slug_produk = 1 {karakter} 50

harga_produk = *999999*

stok_produk = *9999*

berat_produk = *99999*

keterangan_produk = text

gambar_produk = text

3. Tabel Kategori

Kategori = {@kategori_id + nama_kategori + slug_kategori}

kategori_id = *99999999999*

nama_kategori = 1 {karakter} 30

slug_kategori = 1 {karakter} 50

4. Tabel Pesanan

Pesanan = {@pesanan_id + bukti_id + id_user + no_pesanan

+ no_resi + nama_pesanan + no_hp_pesanan +

berat_pesanan + kurir_pesanan + layanan +

 81

total_harga + ongkos_kirim + total_bayar +

alamat_pesanan + status_pesanan +

tanggal_pesanan + info_pesanan}

pesanan_id = *99999999999*

bukti_id = *99999999999*

id_user = *99999999999*

no_pesanan = 1 {karakter} 15

no_resi = 1 {karakter} 15

nama_pesanan = 1 {karakter} 50

no_hp_pesanan = 1 {karakter} 13

berat_pesanan = *9999*

kurir_pesanan = 1 {karakter} 10

layanan = 1 {karakter} 100

total_harga = *999999*

ongkos_kirim = *999999*

total_bayar = *999999*

alamat_pesanan = text

status_pesanan = enum

tanggal_pesanan = dd-mm-yyyy

info_pesanan = 1 {karakter} 20

5. Tabel Detail Pesanan

Detail Pesanan = {@detail_pesanan_id + id_pesanan + id_user +

id_produk + nama_produk + harga + qty +

tanggal}
 82

detail_pesanan_id = *99999999999*

id_pesanan = *99999999999*

id_user = *99999999999*

id_produk = *99999999999*

nama_produk = 1 {karakter} 50

harga = *999999*

qty = *9999*

tanggal = dd-mm-yyyy

6. Tabel Keranjang

Keranjang = {@keranjang_id + id_user + id_produk +

qty_keranjang}

keranjang_id = *99999999999*

id_user = *99999999999*

id_produk = *99999999999*

qty_keranjang = *9999*

7. Tabel Kurir

Kurir = {@id + kode + nama}

id = *99999999999*

kode = 1 {karakter} 50

nama = 1 {karakter} 50

8. Tabel Kota

Kota = {@id + provinsi_id + kota_id + nama}

id = *99999999999*

provinsi_id = *99999999999*
 83

kota_id = *99999999999*

nama = 1 {karakter} 50

9. Tabel Bukti

Bukti = {@bukti_id + pesanan_id + gambar_bukti}

bukti_id = *99999999999*

pesanan_id = *99999999999*

gambar_bukti = text

F. Perancangan Database

Berikut adalah desain dari tabel-tabel yang dibuat di dalam database

toko_catur_pawan.sql:

TABEL 4.1
Tabel Pesanan

Nama Field Jenis Data Ukuran Keterangan

pesanan_id int 11 Primary Key
bukti_id int 11
id_user int 11
no_pesanan varchar 15
no_resi varchar 15
nama_pesanan varchar 50
no_hp_pesanan varchar 13
berat_pesanan int 4
kurir_pesanan varchar 10
layanan varchar 100
total_harga int 6
ongkos_kirim int 6
total_bayar int 6
 84

alamat_pesanan text
status_pesanan enum
tanggal_pesanan date
info_pesanan varchar 20
TABEL 4.2
Tabel User

Nama Field Jenis Data Ukuran Keterangan

user_id int 11 Primary Key
nama_user varchar 30

email_user varchar 30
no_hp int 13
password int 15
foto text
level varchar 10

TABEL 4.3
Tabel Detail Pesanan

Nama Field Jenis Data Ukuran Keterangan

detail_pesanan_id int 11 Primary Key
id_pesanan int 11
id_user int 11
id_produk int 11
nama_produk varchar 50
harga int 6
qty int 4
tanggal date

TABEL 4.4
Tabel Keranjang

Nama Field Jenis Data Ukuran Keterangan

keranjang_id int 11 Primary Key
 85

id_user int 11
id_produk int 11
qty_keranjang int 4

TABEL 4.5
Tabel Kategori

Nama Field Jenis Data Ukuran Keterangan

kategori_id int 11 Primary Key
nama_kategori varchar 30
slug_kategori text 50

TABEL 4.6
Tabel Kota

Nama Field Jenis Data Ukuran Keterangan

id int 11 Primary Key
provinsi_id int 11
kota_id int 11
nama varchar 50

TABEL 4.7
Tabel Produk

Nama Field Jenis Data Ukuran Keterangan

produk_id int 11 Primary Key
id_kategori int 11
id_pemasok int 11
nama_produk varchar 50
slug_produk varchar 50
harga_produk int 6
stok_produk int 4
berat_produk int 5
keterangan_produk text
gambar_produk text
 86

TABEL 4.8
Tabel Kurir

Nama Field Jenis Data Ukuran Keterangan

id int 11 Primary Key
kode varchar 50
nama varchar 50

TABEL 4.9
Tabel Bukti

Nama Field Jenis Data Ukuran Keterangan

bukti_id int 11 Primary Key
pesanan_id int 11
gambar_bukti text

G. Perancangan Masukan Sistem Usulan

Berikut ini rancangan tampilan halaman masukan sistem pada Toko

Catur Pawan:

1. Halaman Pendaftaran
 87

GAMBAR 4.17
Rancangan Halaman Pendaftaran

GAMBAR 4.18
Tampilan Halaman Pendaftaran

Halaman pendaftaran berfungsi sebagai pembuatan akun pelanggan

yang belum memiliki akun untuk mengakses sistem. Untuk dapat

berbelanja pada sistem, pelanggan terlebih dahulu harus memasukkan

biodata pada form pendaftaran yang meliputi: nama lengkap, nomor hp,

email dan password.

2. Halaman Menu Login

 88

GAMBAR 4.19
Rancangan Halaman Login

GAMBAR 4.20
Tampilan Halaman Login

Halaman login berfungsi sebagai protokol utama agar user dapat

mengakses sistem. Untuk dapat masuk ke sistem, user terlebih dahulu

harus memasukkan username dan password.

3. Halaman Utama
 89

GAMBAR 4.21
Rancangan Halaman Utama

GAMBAR 4.22
Tampilan Halaman Utama

Halaman utama merupakan tampilan pertama yang ditampilkan

ketika pengguna berhasil login sebagai pelanggan. Pada halaman utama

terdapat menu-menu yang diperlukan dalam proses penjualan.

4. Halaman Keranjang
 90

GAMBAR 4.23
Rancangan Halaman Keranjang

GAMBAR 4.24
Tampilan Halaman Keranjang

Halaman keranjang merupakan halaman tempat pelanggan dapat

melihat, mengelola dan mengkonfirmasi produk yang telah dipilih

pelanggan. Halaman ini dapat diakses oleh pelanggan setelah memilih

produk yang akan dibeli.

 91

5. Halaman Checkout

GAMBAR 4.25
Rancangan Halaman Checkout

GAMBAR 4.26
Tampilan Halaman Checkout

Halaman checkout merupakan halaman yang berisi form data diri

pelanggan dan ekspedisi pengiriman. Halaman ini dapat diakses oleh

pelanggan setelah membuat pesanan pada halaman keranjang. Pada

 92

halaman menu checkout, terdapat form yang meliputi: nama, no hp, berat,

kota, ekspedisi, layanan dan alamat.

6. Halaman Kirim Pembayaran

GAMBAR 4.27
Rancangan Halaman Kirim Pembayaran

GAMBAR 4.28
Tampilan Halaman Kirim Pembayaran

Halaman kirim pembayaran berfungsi sebagai pembayaran dari

pelanggan. Pada halaman ini pelanggan dapat meng-upload bukti

 93

pembayaran. Halaman ini dapat diakses oleh pelanggan setelah melewati

proses checkout.

7. Halaman Cek Status Pesanan

GAMBAR 4.29
Rancangan Halaman Cek Status Pesanan

GAMBAR 4.30
Tampilan Halaman Cek Status Pesanan
 94

Halaman cek status pesanan adalah halaman yang memungkinkan

pelanggan untuk melacak dan memeriksa status terkini dari pesanan yang

telah dibuat oleh pelanggan.

8. Halaman Penerimaan Barang

GAMBAR 4.31
Rancangan Halaman Penerimaan Barang
 95

GAMBAR 4.32
Tampilan Halaman Penerimaan Barang

Setelah pelanggan menerima barang yang dipesan, pelanggan dapat

mengkonfirmasi penerimaan barang pada halaman penerimaan barang.

Halaman ini dapat diakses oleh pelanggan pada halaman cek status

pesanan.

9. Halaman Utama Admin

GAMBAR 4.33
Rancangan Halaman Utama Admin
 96

GAMBAR 4.34
Tampilan Halaman Utama Admin

Halaman utama admin berfungsi adalah halaman untuk pengelola

atau admin setelah memasukkan akun admin pada halaman login.

Halaman ini dapat diakses oleh pemilik dan bagian kasir. Pada halaman ini

terdapat menu kelola pelanggan, pemasok, produk, kategori, pesanan dan

laporan.

10. Halaman Kelola Pelanggan

GAMBAR 4.35
Rancangan Halaman Kelola Pelanggan
 97

GAMBAR 4.36
Tampilan Halaman Kelola Pelanggan

Halaman kelola pelanggan berfungsi sebagai halaman yang

digunakan untuk mengelola data pelanggan yang telah terdaftar pada

sistem. Pada halaman ini, admin dapat mengubah data pelanggan dan

menghapus data pelanggan.

11. Halaman Kelola Kategori

GAMBAR 4.37
Rancangan Halaman Kelola Kategori
 98

GAMBAR 4.38
Tampilan Halaman Kelola Kategori

Halaman kelola kategori berfungsi sebagai halaman yang

digunakan untuk mengelola data kategori yang ada pada sistem. Pada

halaman ini, admin dapat menambah, mengubah dan menghapus data

kategori.

12. Halaman Kelola Produk

GAMBAR 4.39
 99

Rancangan Halaman Kelola Produk

GAMBAR 4.40
Tampilan Halaman Kelola Produk

Halaman kelola produk berfungsi sebagai halaman yang digunakan

untuk mengelola, data produk yang dijual pada sistem. Pada halaman ini,

admin dapat menambah, mengubah dan menghapus data produk.

13. Halaman Kelola Penjualan

GAMBAR 4.41
Rancangan Halaman Kelola Penjualan
 100

GAMBAR 4.42
Tampilan Halaman Kelola Penjualan

Halaman kelola penjualan berfungsi sebagai halaman yang

digunakan untuk mengelola data pesanan yang telah dipesan oleh

pelanggan. Pada halaman ini, admin dapat mengecek bukti transfer

pembayaran, mengkonfirmasi pembayaran, mengubah status pengiriman

pesanan dan menghapus data pesanan.

H. Perancangan Keluaran Sistem Usulan

Perancangan keluaran merupakan gambaran hasil masukan yang

diolah oleh sistem yang dirancang untuk menghasilkan informasi atau

laporan. Sistem informasi penjualan Toko Catur Pawan terdapat laporan

seperti laporan persediaan dan laporan penjualan. Berikut ini adalah tampilan

desain dan keluaran untuk menunjang sistem informasi persediaan dan

penjualan pada Toko Catur Pawan:

 101

1. Laporan Persediaan

GAMBAR 4.43
Rancangan Laporan Persediaan

GAMBAR 4.44
Tampilan Laporan Persediaan

Pada gambar 4.44 adalah laporan persediaan yang tampil ketika

admin ingin melihat laporan persediaan. Laporan akan menampilkan kode

produk, nama produk, pemasok dan stok. Laporan ini berbentuk Portable

Document Format (pdf).

 102

2. Laporan Penjualan

GAMBAR 4.45
Rancangan Laporan Penjualan

GAMBAR 4.46
Tampilan Laporan Penjualan

Pada gambar 4.46 adalah laporan penjualan yang tampil ketika

admin ingin melihat laporan penjualan. Laporan penjualan ditampilkan

dalam tiga pilihan, yaitu laporan dicetak berdasarkan harian, bulanan,

tahunan. Laporan akan menampilkan tanggal, barang, jumlah, harga,

 103

subtotal dan total keseluruhan penjualan sesuai dengan filter laporan yang

dipilih. Laporan ini berbentuk Portable Document Format (pdf).

I. Spesifikasi Sistem

1. Perangkat Lunak (Software)

Perangkat lunak yang diperlukan untuk mendukung sistem

informasi ini agar dapat digunakan dalam perancangan sistem informasi

berbasis web ini adalah sebagai berikut:

a. Operating System: Microsoft Windows 10.

b. Database: MySQL.

c. XAMPP.

d. Browser: Google Chrome, Microsoft Edge, Mozilla Firefox.

2. Perangkat Keras (Hardware)

Spesifikasi perangkat keras yang disarankan untuk mendukung

dalam perancangan sistem informasi berbasis web ini adalah sebagai

berikut:

a. Modem sebagai penghubung layanan internet.

b. Laptop dengan processor AMD.

c. Memory (RAM) 4GB.

d. SSD atau Harddisk.

e. Mouse.

f. Keyboard.

g. Printer InkJet sebagai alat untuk mencetak dokumen laporan.