T0 562011040 BAB III
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 tampilantampilan 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
oleh aplikasi ini antara lain:
17
a. Data Primer
Yaitu data atau segala informasi yang
diperoleh
dan didapat
langsung dari sumber
pertama, baik individu atau elemen bagian dari
objek penelitian, seperti melakukan wawancara
dan
observasi
langsung
pada objek
yang
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
berikut:
18
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
UD.Naga Santosa.
19
Update Data Category
Update Data Product
Melihat Data Product
Update Data Customers
Customers
System Penjualan
UD. Naga Santosa
Admin
Melakukan Order
Melihat Grafik
Data User Login
Memberi Report
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
penjualan
20
Memasukan kategori
Memasukan kategori
ADMIN
Data kategori
Data kategori
TAMBAH
PRODUK
VIEW
PRODUK
Data kategori
Memasukan kategori
HAPUS
PRODUK
EDIT PRODUK
DataData
kategori
kategori
TABEL
CATEGORY
Memasukan 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
edit produk dan hapus produk.
21
Customers
id
LOGIN
MENU UTAMA
PEMESANAN
BARANG
Menyimpan data
keranjang
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
yang masuk akan disimpan kedalam tabel keranjang.
22
3.2.2
Flowchart
a. Flowchart Proses Login
Start
Input
Username
& Password
Cek Username &
Password
Ya
Ulangi ?
Tidak
Tidak
Benar ?
Ya
Cek Status
User
Stop
Ya
Admin ?
Tidak
A
B
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
dan B untuk Customers.
23
b. Flowchart Proses Pemesanan Produk
Oleh Customers
B
PILIH MENU
Pilih Kategori
Pesan Produk
Detail
Shopping Cart
Insert Into
Keluar
Belanja Lagi
Hapus pesanan
Database
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
berdasar kategori, melihat detail produk maupun langsung
24
memesannya dan selanjutanya akan tercatat kedalam
database.
c. Flowchart halaman admin
A
Pilih Menu
Keluar
Home
Tambah
Produk
Produk
Hapus
Produk
Kategori
Edit
Report
Add Kategori
Hapus
Produk
Nama
Barang
Kategori,
Deskripsi,
Gambar
Nama
Kategori
Edit
Nama
Kategori
Update Data
Select Data
Select Data
Database
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
adalah sebagai berikut:
25
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
kedalam shoppong cart. Pada menu detail akan
26
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 namanama ketegori barang yang dijual. Setaiap 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
disimpan dalam database.
27
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
T2
Login
T3
Admin
Pilih menu
Customers
Home
T5
Kategori
Report
T4
Produk
T14
Pilih Menu
T11
T12
Tambah Produk
T13
Edit produk
T6
Hapus produk
Hapus produk
Add kategori
Pilih Kategori
Pesan Produk
Edit produk
T15
Detail
T16
T17
Logout
T18
T7
T8
T9
T19
T20
T10
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
ini disajikan dalam gambar-gambar sebagai berikut:
28
Gambar 4.1 Perancangan alur basis data padaSistem Informasi Point Of
Sales berbasis Website UD.Naga Santosa
a. Tabel User
user
id_user
password
email
level
varchar(50)
varchar(50)
varchar(100)
varchar(50)
Gambar 5.1 Data User
29
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
member
member_id
UserName
Password
Firstname
Lastname
int(11)
varchar(200)
varchar(200)
varchar(200)
varchar(200)
Gambar 5.3Data Member
Tabel member menampung data customer.
Username digunakan untuk login kedalam
sistem.
30
d. Tabel Keranjang
keranjang
id_keranjang
id_product
id_session
tgl_keranjang
qty
int(5)
int(5)
varchar(100)
date
int(4)
Gambar 5.4Data Keranjang
Pada
tabel
keranjang
ini
menampung
data
pembelian yang telah dilakukan oleh customer.
e. Tabel Product
product
id
product_name
price
image
id_category
deskripsi
int(11)
varchar(100)
bigint(20)
varchar(1000)
int(11)
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
pada tabel kategori.
31
f. Tabel Order_Produk
order_product
id
id_product
id_pemesan
name
email
address
phone
status
jumlah
tanggal
int(11)
int(11)
varchar(100)
varchar(100)
varchar(100)
varchar(1000)
bigint(20)
varchar(30)
int(4)
date
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
sebagai berikut:
32
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
berdasarkan
untuk
merk
mengelompokan
produk.
Menu
produk
pesan
digunakan untuk memesan produk, jika di klik
maka akan masuk pada halaman shopping cart.
Menu detail masuk pada halaman deskripsi.
33
Gambar 6.2LKT Menu Utama
c. Lembar Kerja Tampilan halaman detail produk
Menu logout digunakan untuk keluar dari
sistem.
Menu
mengelompokan
ketegori
digunakan
untuk
produk
berdasarkan
merk
produk. Menu kembali digunakan untuk kembali
ke menu utama. Ketika menu beli di klik maka
akan masuk pada halaman shopping cart.
34
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
dipesan.
35
Gambar 6.4LKT shopping cart
e. Lembar Kerja Tampilan login administrator
Halaman ini berisi form usernama dan
password untuk melakukan login kedalam
sistem.
36
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.
Menu 3 jika diklik maka masuk halaman report.
37
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
halaman report.
38
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
maka masuk halaman report.
39
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
menyimpan data yang telah diisi.
40
Gambar 6.8LKT tambah kategori
j. Lembar Kerja Tampilan Laporan
Halaman in berisi laporan penjualan
produk
berupa
penjualan.
41
kolom-kolom
dengan
data
Gambar 6.9LKT halaman laporan
42
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 tampilantampilan 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
oleh aplikasi ini antara lain:
17
a. Data Primer
Yaitu data atau segala informasi yang
diperoleh
dan didapat
langsung dari sumber
pertama, baik individu atau elemen bagian dari
objek penelitian, seperti melakukan wawancara
dan
observasi
langsung
pada objek
yang
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
berikut:
18
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
UD.Naga Santosa.
19
Update Data Category
Update Data Product
Melihat Data Product
Update Data Customers
Customers
System Penjualan
UD. Naga Santosa
Admin
Melakukan Order
Melihat Grafik
Data User Login
Memberi Report
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
penjualan
20
Memasukan kategori
Memasukan kategori
ADMIN
Data kategori
Data kategori
TAMBAH
PRODUK
VIEW
PRODUK
Data kategori
Memasukan kategori
HAPUS
PRODUK
EDIT PRODUK
DataData
kategori
kategori
TABEL
CATEGORY
Memasukan 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
edit produk dan hapus produk.
21
Customers
id
LOGIN
MENU UTAMA
PEMESANAN
BARANG
Menyimpan data
keranjang
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
yang masuk akan disimpan kedalam tabel keranjang.
22
3.2.2
Flowchart
a. Flowchart Proses Login
Start
Input
Username
& Password
Cek Username &
Password
Ya
Ulangi ?
Tidak
Tidak
Benar ?
Ya
Cek Status
User
Stop
Ya
Admin ?
Tidak
A
B
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
dan B untuk Customers.
23
b. Flowchart Proses Pemesanan Produk
Oleh Customers
B
PILIH MENU
Pilih Kategori
Pesan Produk
Detail
Shopping Cart
Insert Into
Keluar
Belanja Lagi
Hapus pesanan
Database
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
berdasar kategori, melihat detail produk maupun langsung
24
memesannya dan selanjutanya akan tercatat kedalam
database.
c. Flowchart halaman admin
A
Pilih Menu
Keluar
Home
Tambah
Produk
Produk
Hapus
Produk
Kategori
Edit
Report
Add Kategori
Hapus
Produk
Nama
Barang
Kategori,
Deskripsi,
Gambar
Nama
Kategori
Edit
Nama
Kategori
Update Data
Select Data
Select Data
Database
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
adalah sebagai berikut:
25
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
kedalam shoppong cart. Pada menu detail akan
26
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 namanama ketegori barang yang dijual. Setaiap 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
disimpan dalam database.
27
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
T2
Login
T3
Admin
Pilih menu
Customers
Home
T5
Kategori
Report
T4
Produk
T14
Pilih Menu
T11
T12
Tambah Produk
T13
Edit produk
T6
Hapus produk
Hapus produk
Add kategori
Pilih Kategori
Pesan Produk
Edit produk
T15
Detail
T16
T17
Logout
T18
T7
T8
T9
T19
T20
T10
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
ini disajikan dalam gambar-gambar sebagai berikut:
28
Gambar 4.1 Perancangan alur basis data padaSistem Informasi Point Of
Sales berbasis Website UD.Naga Santosa
a. Tabel User
user
id_user
password
level
varchar(50)
varchar(50)
varchar(100)
varchar(50)
Gambar 5.1 Data User
29
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
member
member_id
UserName
Password
Firstname
Lastname
int(11)
varchar(200)
varchar(200)
varchar(200)
varchar(200)
Gambar 5.3Data Member
Tabel member menampung data customer.
Username digunakan untuk login kedalam
sistem.
30
d. Tabel Keranjang
keranjang
id_keranjang
id_product
id_session
tgl_keranjang
qty
int(5)
int(5)
varchar(100)
date
int(4)
Gambar 5.4Data Keranjang
Pada
tabel
keranjang
ini
menampung
data
pembelian yang telah dilakukan oleh customer.
e. Tabel Product
product
id
product_name
price
image
id_category
deskripsi
int(11)
varchar(100)
bigint(20)
varchar(1000)
int(11)
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
pada tabel kategori.
31
f. Tabel Order_Produk
order_product
id
id_product
id_pemesan
name
address
phone
status
jumlah
tanggal
int(11)
int(11)
varchar(100)
varchar(100)
varchar(100)
varchar(1000)
bigint(20)
varchar(30)
int(4)
date
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
sebagai berikut:
32
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
berdasarkan
untuk
merk
mengelompokan
produk.
Menu
produk
pesan
digunakan untuk memesan produk, jika di klik
maka akan masuk pada halaman shopping cart.
Menu detail masuk pada halaman deskripsi.
33
Gambar 6.2LKT Menu Utama
c. Lembar Kerja Tampilan halaman detail produk
Menu logout digunakan untuk keluar dari
sistem.
Menu
mengelompokan
ketegori
digunakan
untuk
produk
berdasarkan
merk
produk. Menu kembali digunakan untuk kembali
ke menu utama. Ketika menu beli di klik maka
akan masuk pada halaman shopping cart.
34
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
dipesan.
35
Gambar 6.4LKT shopping cart
e. Lembar Kerja Tampilan login administrator
Halaman ini berisi form usernama dan
password untuk melakukan login kedalam
sistem.
36
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.
Menu 3 jika diklik maka masuk halaman report.
37
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
halaman report.
38
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
maka masuk halaman report.
39
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
menyimpan data yang telah diisi.
40
Gambar 6.8LKT tambah kategori
j. Lembar Kerja Tampilan Laporan
Halaman in berisi laporan penjualan
produk
berupa
penjualan.
41
kolom-kolom
dengan
data
Gambar 6.9LKT halaman laporan
42