BAB III.
PERANCANGAN SISTEM
3.1 Analisa Kebutuhan
Sebagaima dijelaskan pada bab satu tentang
konsep point of sales berbasis website yang mampu
memudahkan pencatatan data produk penjualan. Penulis
dalam membangun aplikasi ini memerlukan beberapa
kebutuhan antara lain sebagai berikut:
3.1.1 Kebutuhan Antar Muka
Kebutuhan antar muka yang diperlukan untuk
membangun sistem informasi ini meliputi:
a. Sistem yang dibangun harus mempunyai
tampilan-tampilan yang familiar bagi user.
b. Sistem yang akan dibangun harus mampu
menyimpan data-data yang dimasukkan oleh user
ke dalam storage.
c. Sistem yang akan dibangun memiliki fasilitas
untuk menambah, memperbaharui dan menghapus
data yang ada di dalam storage.
d. Sistem yang akan dibangun dapat memberikan
laporan penjualan.
3.1.2 Kebutuhan Data
Data-data yang dibutuhkan dan akan diolah
a. Data Primer
diteliti. Data primer yang dibutuhkan antara lain
sebagai berikut:
Data Produk, meliputi atribut produk
yang digunakan untuk mengisi field.
Field tersebut antara lain nama barang,
harga barang, deskripsi barang dan kode
barang.
b. Data Sekunder
Meliputi data-data yang diperoleh dari
internet, buku literatur, studi pustaka mengenai
arsitektur web application, database dan teknologi
pemrograman dengan aplikasi web.
3.1.3 Kebutuhan Fungsional
Layanan yang disediakan oleh aplikasi yang
akan dibangun ini antara lain antara lain sebagai
a. Mengelola otoritas passcode, yaitu data
passcode yang dimasukan oleh user dengan
benar dan selanjutnya
b. Mengelola data produk, harga produk, dan
deskripsi produk
c. Memberikan laporan penjualan
d. Memberikan fasilitas insert, update, dan
delete produk.
3.2 Perancangan Aplikasi
Proses perancangan meliputi:
a. Pemodelan arsitektur aplikasi web yang sesuai
kebutuhan.
b. Perancangan interface (antarmuka).
c. Pembuatan database.
Pendekatan yang dilakukan pada proses perancangan
aplikasi ini antara lain:
3.2.1 DFD (Data Flow Diagram)
Sebuah teknik grafis yang menggambarkan aliran
informasi dan transformasi yang diaplikasikan pada saat
data bergerak dari input menjadi output. Berikut ini DFD
sistem informasi point of sales berbasis web untuk
System Penjualan
Gambar 1.1 Diagram Konteks Sistem point of sales berbasis website
Pada diagram diatas menunjukan adanya dua dua interaksi
antara admin dan customers. Admin dapat dapat melakukan
update data category, data product dan data customers.
Sedangkan customers dapat melakukan order dengan cara login
terlebih dahulu. Data-data yang telah masuk dari customer
selanjutnya dapat dilihat oleh admin melalui halaman admin
berupa report. Selain report admin juga dapat melihat grafik
ADMIN
Memasukan kategori Memasukan kategori
Data kategori
Data kategori Data kategori
Gambar 1.2 Data Flow Diagram Level 1 Sistem point of sales berbasis
website untuk proses update kategori oleh admin
Pada halaman admin yang dapat dilakukan adalah proses
tambah produk dengan memilih kategori terlebih dahulu
selanjutnya mengisi form tambah produk, selanjutnya data-data
tersebut disimpan kedalam tabel category. Begitu pula dengan
LOGIN id
MENU UTAMA
PEMESANAN
BARANG Menyimpan data keranjang
Customers
Gambar 1.3Data Flow Diagram Level 1 Sistem point of sales berbasis website
untuk proses pembelian produk oleh customers.
Pada data flow diagram level 1 dijelaskan customer
masuk ke sistem melalui login, selanjutnya customers dapat
masuk ke menu utama dan melakukan pemesanan barang. Data
3.2.2 Flowchart
a. Flowchart Proses Login
Start
Cek Username & Password
Gambar 2.1 Flowchart untuk Login Sistem Informasi Point Of Sales berbasis Website
UD.Naga Santosa
Alur flowchart diatas menerangkan proses
login sistem. Alur akhir dari flowchart ini adalah
masuk ke halaman web, namun untuk admin dan
customer memiliki halaman berbeda. Maka dari
itu dibedakan menjadi dua yaitu A untuk Admin
b. Flowchart Proses Pemesanan Produk
Oleh Customers
B PILIH MENU
Pesan Produk
Pilih Kategori Detail
Shopping Cart
Insert Into
Belanja Lagi
Database
Hapus pesanan
Keluar
Keluar
Gambar 2.2Flowchart untuk Proses Pemesanan pada Sistem Informasi Point
Of Sales berbasis Website UD.Naga Santosa
Flowchart diatas menerangkan proses pemesanan
barang oleh customer. Customer dapat memilih beberapa
menu utama yang disediakan seperti memilih produk
memesannya dan selanjutanya akan tercatat kedalam
database.
c. Flowchart halaman admin
A Pilih Menu
Home Produk Kategori Report
Tambah
Gambar 2.3 Flowchart untuk Halaman Admin pada Sistem Informasi Point
Of Sales berbasis Website UD.Naga Santosa
Pada gambar diatas dapat dijelaskan sistem informasi
point of sales berbasis web untuk UD.NAGA SANTOSA
a. Saat aplikasi dijalankan
b. Sistem meminta user memasukan username dan
password yang akan menentukan menu yang dapat
diakses sesuai tipe autentifikasinya. Proses
pencocokan username dan password dengan data
yang tersimpan dalam database. Bila data sesuai
aplikasi akan menampilkan pilihan menu sesuai
dengan hak akses user, bila data tidak sesuai user
dapat melakukan proses ulang login atau memilih
menutup aplikasi.
c. Proses pencocokan username dan password
dengan data yang tersimpan dalam database. Bila
data sesuai aplikasi akan menampilkan pilihan menu
sesuai dengan hak akses user, bila data tidak
sesuai user dapat melakukan proses ulang login
atau memilih menutup aplikasi.
d. Tampilan menu berisi navigasi menuju fitur-fitur
yang ada pada aplikasi seperti:
Kategori, meliputi halaman yang menampilkan
data produk yang dibedakan berdasarkan merk
produk atau kategori. Pada halaman ini
customer. Halaman ini memiliki sub menu pesan
barang dan detail. Pada menu pesan barang
maka otomatis barang yang dipilih akan masuk
menampilkan deskripsi barang. Selanjutnya
setelah customer memilih barang, customer
dapat kembali ke halaman sebelumnya untuk
memilih barang kembali dengan menu kembali
yang telah disediakan atau customer dapat
memesan barang menu selesai dan barang yang
telah dipesan akan langsung otomatis masuk ke
database dan ditampilkan ke halaman report
admin untuk diproses.
Produk, meliputi tampilan daftar barang yang
siap dibeli oleh customer. Halaman ini terdiri
dari submenu tambah barang, edit dan hapus.
Pada menu tambah barang, admin dapat mengisi
field berupa nama barang, kategori, harga,
deskripsi barang dan gambar barang. Pada menu
edit teradapat field-field yang sama pada
halaman tambah barang, admin hanya
melakukan editing saja.
Kategori, menu kategori menampilkan
nama-nama ketegori barang yang dijual. Setaiap nama-nama
kategori dapat diedit dan dihapus. Selain itu
terdapat menu tambah kategori yang berguna
untuk menambahkan kategori dengan cara
mengisi field nama kategori yang selanjutnya
Report, menu report berisi daftar pemesan
barang. Data ini diperoleh dari database
order_produk.
e. Sistem menyimpan data kedalam database.
3.2.3 Jaringan Semantik
T1
Gambar 3.1 Jaringan Semantik untuk Sistem Informasi Point Of Sales
berbasis Website UD.Naga Santosa
3.3 Perancangan Basis Data
Tabel-tabel beserta relasinya yang digunakan
dalam sistem informasi point of sales berbasis website
Gambar 4.1 Perancangan alur basis data padaSistem Informasi Point Of
Sales berbasis Website UD.Naga Santosa
a. Tabel User
user
id_user varchar(50) password varchar(50) email varchar(100) level varchar(50)
Tabel User berisi data login admin, id_user
adalah id yang digunakan saat login.
b. Tabel Category
category
id int(11) category varchar(100)
Gambar 5.2Data Category
Tabel category berisi daftar kategori
produk atau pengelompokan barang
beradasarkan merk.
c. Tabel Member
Tabel member menampung data customer.
Username digunakan untuk login kedalam
d. Tabel Keranjang
pembelian yang telah dilakukan oleh customer.
e. Tabel Product
product
id int(11) product_name varchar(100) price bigint(20) image varchar(1000) id_category int(11)
deskripsi text
Gambar 5.5Data Product
Tabel ini menampung data produk yang dijual,
meliputi nama produk, harga, gambar dan
deskripsi produk. Field kategori berguna untuk
memilah produk berdasar kategori yang ada
f. Tabel Order_Produk
order_product
id int(11) id_product int(11) id_pemesan varchar(100)
Gambar 5.6Data Order Produk
Tabel ini menampung semua data pembelian oleh
customer, mulai detail barang yang dibeli dan
nama customer. Sehingga ketika data tersebut telah
tertampung dapat diproses pembeliannya.
3.4 Perancangan Antar Muka
Pada tampilan awal sistem informasi point of sales
berbasis website ini penulis merancang halaman login
untuk dapat mengakses tampilan menu utama sistem
ini. Penulis memberikan dua halaman login untuk
member dan login untuk admin. Adapun perancangan
tampilan setiap halaman website untuk member dan
admin yang dijelaskan dalam lembar kerja tampilan
a. Lembar Kerja Tampilan Halaman Login
Halaman ini berisi form username dan
form password untuk melakukan login kedalam
sistem.
Gambar 6.1 LKT halaman login
b. Lembar Kerja Tampilan Halaman Menu Utama
Pada halaman utama menampilkan pilihan
menu-menu utama. Menu logout digunakan
untuk keluar dari sistem. Menu ketegori
digunakan untuk mengelompokan produk
berdasarkan merk produk. Menu pesan
digunakan untuk memesan produk, jika di klik
maka akan masuk pada halaman shopping cart.
Gambar 6.2LKT Menu Utama
c. Lembar Kerja Tampilan halaman detail produk
Menu logout digunakan untuk keluar dari
sistem. Menu ketegori digunakan untuk
mengelompokan produk berdasarkan merk
produk. Menu kembali digunakan untuk kembali
ke menu utama. Ketika menu beli di klik maka
Gambar 6.3LKT detail produk
d. Lembar Kerja Tampilan Shopping cart
Pada halaman shopping cart berisi list
produk yang telah dipesan. Tombol hapus
digunakan untuk menghapus list produk yang
Gambar 6.4LKT shopping cart
e. Lembar Kerja Tampilan login administrator
Halaman ini berisi form usernama dan
password untuk melakukan login kedalam
Gambar 6.1 LKT login administrator
f. Lembar Kerja Tampilan menu utama
Tampilan menu utama admin berisi chart
yang menunjukan banyaknya penjualan terakhir
per tanggal. Menu 1 merupakan menu home.
Jika diklik maka akan kembali ke halaman
home. Menu 2 merupakan menu produk. Dalam
menu tersebut mengarah pada halaman produk
yang berisi daftar produk yang ada. Menu 3
adalah menu kategori, jika diklik akan mengarah
pada halaman untuk megelola kategori produk.
Gambar 6.5LKT halaman login
g. Lembar Kerja Tampilan Tambah Produk
Halaman ini berisi list produk yang sudah
ada, pada halaman ini admin dapat mengedit dan
menghapus produk dengan menu edit dan delete
yang telah tersedia. Menu 1 merupakan menu
home. Jika diklik maka akan kembali ke
halaman home. Menu 2 merupakan menu
produk. Dalam menu tersebut mengarah pada
halaman produk yang berisi daftar produk yang
ada. Menu 3 adalah menu kategori, jika diklik
akan mengarah pada halaman untuk megelola
kategori produk. Menu 3 jika diklik maka masuk
Gambar 6.6 LKT tambah produk
h. Lembar Kerja Tampilan add Product
Halaman ini berisi form untuk
menambahkan produk yang nantinya akan
otomatis masuk kedalam database. Menu 1
merupakan menu home. Jika diklik maka akan
kembali ke halaman home. Menu 2 merupakan
menu produk. Dalam menu tersebut mengarah
pada halaman produk yang berisi daftar produk
yang ada. Menu 3 adalah menu kategori, jika
diklik akan mengarah pada halaman untuk
megelola kategori produk. Menu 3 jika diklik
Gambar 6.7LKT add product
i. Lembar Kerja Tampilan Tambah Kategori
Halaman ini berisi menu untuk menambah
kategori produk yang akan otomatis masuk
kedalam database. Menu 1 merupakan menu
home. Jika diklik maka akan kembali ke
halaman home. Menu 2 merupakan menu
produk. Dalam menu tersebut mengarah pada
halaman produk yang berisi daftar produk yang
ada. Menu 3 adalah menu kategori, jika diklik
akan mengarah pada halaman untuk megelola
kategori produk. Menu 3 jika diklik maka masuk
halaman report. Button simpan digunakan untuk
Gambar 6.8LKT tambah kategori
j. Lembar Kerja Tampilan Laporan
Halaman in berisi laporan penjualan
produk berupa kolom-kolom dengan data
