T0 562011011 BAB III

BAB III
PERANCANGAN SISTEM
3.1 Diagram Contect
Diagram contect pada system pembuatan e-commerce
ditunjukkan pada gambar 3.1

2
ADMIN
1

Sistem informasi website ecommerce Konveksi
“Fausta Gallery”

6

3

PENGUNJUNG
WEBSITE

4


5

PEMBELI/
MEMBER

Gambar 3.1 Diagram contect
Keterangan :
1. Info identitas Fausta Gallery, info data kategori, info data
produk, info laporan penjualan, info data customers, info
data pesan, info no resi pengiriman, info berita, info
artikel, info polling.

19

20

2. Data identitas Fausta Gallery, data kategori, data produk,
data laporan penjualan, data customers, data pesan, data
resi pengiriman, data berita, data artikel, data polling.

3. Informasi identitas Fausta Gallery, info produk, info
berita, info artikel, info testimoni, info resi pengiriman,
info rss, info syarat dan ketentuan belanja, info cara
pembelian.
4. Data identitas Fausta Gallery, data produk, data berita,
data artikel, data testimoni, data resi pengiriman, data rss,
data syarat dan ketentuan belanja, data cara pembelian.
5. Info data login, info identitas Fausta Gallery, info data
kategori,

info

data

produk,

info

data


keranjang

belanja/shopping cart, info konfirmasi pembelian, info
data berita, info data artikel, info rss, info testimony, info
polling.
6. Data login, data identitas Fausta Gallery, data kategori,
data

produk,

data

keranjang/shopping

cart,

data

konfirmasi pembelian, data berita, data artikel, data rss,
data testimoni, data polling.


1.2 Lembar Kerja Tampilan (LKT)
1.2.1 Lembar Kerja Tampilan 1
LKT ini digunakan pada halaman index. Pada
halaman home terdapat form login member, member
harus memasukkan username dan password apabila

21

akan membeli barang yang ada pada konveksi Fausta
Gallery.

Apabila

member

tidak

memasukkan


username dan password maka member atau customer
tidak dapat membeli produk-produk yang ada pada
website Fausta Gallery. Tampilan dapat dilihat pada
gambar. 3.2
No. sheet 1
Index

Navigasi

Judul

Isi

......................
Judul

Isi

......................


Keterangan :
Judul pakai Calibri , 12 point, biru
Teks pakai Calibri, 12 point, hitam
Medan data pakai Calibri, kuning
Button pakai Calibri, hitam

Gambar 3.2 LKT index

- Klik
login
maka
akan
masuk
pada
halaman
home.

22

1.2.2 Lembar Kerja Tampilan 2

Pada LKT ini digunakan pada halaman home,
requirement, how to buy, no resi, artikel, berita, rss,
karena pada tampilan ini sama, hanya isi pada
halaman

masing-masing

yang

membedakannya.

Tampilan dapat dilihat pada gambar. 3.3
No. sheet 2
home, requirement, how to buy,

Navigasi

no resi, artikel, berita, rss

Judul


Isi

......................
Judul

Isi

......................

Keterangan :
Judul pakai Calibri , 12 point, biru
Teks pakai Calibri, 12 point, hitam
Medan data pakai Calibri, kuning
Button pakai Calibri, hitam
Gambar 3.3 LKT home, requirement, how to buy, no
resi, artikel, berita, rss

23


1.2.3 Lembar Kerja Tampilan 3
Lembar Kerja Tampilan 3 ini digunakan untuk form
testimony. Form testimony di isi oleh pengunjung
website.Testimoni ini berguna sebagai statemen yang
muncul dalam bentuk rekomendasi dari seseorang ke
orang lain.
No. sheet 3
Testimoni

Navigasi

Nama
pengunjung
Email
Website

http://

Komentar
Submit


Reset

-Klik
submit
maka data
akan
dikirim
pada
database
-Klik reset
maka
borang akan
kosong

Keterangan :
Judul pakai Calibri , 12 point, biru
Teks pakai Calibri, 12 point, hitam
Medan data pakai Calibri, kuning
Button pakai Calibri, hitam

Gambar 3.4 LKT Testimoni

24

1.2.4 Lembar Kerja Tampilan 4
Lembar Kerja Tampilan 4 ini digunakan untuk
tampilan halaman contact. Tampilan dapat dilihat
pada gambar. 3.5
No. sheet 4
Contact

Navigasi
- Klik

Nama
Jenis

Pria

kelamin

Wanita

Alamat

- Klik reset,
borang akan
merefresh
dan kosong

Email
Phone
Pesan

Kirim

kirim, data
akan
tersimpan
pada database
dan borang
akan kosong

Reset

Keterangan :
Judul pakai Calibri , 12 point, biru
Teks pakai Calibri, 12 point, hitam
Medan data pakai Calibri, kuning
Button pakai Calibri, hitam
Gambar 3.5 LKT Contact

25

1.2.5 Lembar Kerja Tampilan 5
Tampilan 5 ini digunakan pada LKT polling. Pada
LKT polling ini customer atau pelanggan bisa
memilih jawaban yang sudah tersedia pada website.
Tampilan dapaat dilihat pada gambar. 3.6
No. sheet 5
Polling

Navigasi
- Klik

Judul
Pilihan 1
Pilihan 2
Pilihan 3
Kirim
Hasil
-----------------------

Keterangan :
Judul pakai Calibri , 12 point, biru
Teks pakai Calibri, 12 point, hitam
Medan data pakai Calibri, kuning
Button pakai Calibri, hitam
Gambar 3.6 LKT polling

Klik kirim,
data akan
tersim-pan
dan hasil
akan tampil
di bawah
form
polling

26

1.2.6 Lembar Kerja Tampilan 6
Pada LKT ini digunakan pada halaman home admin.
Pada home admin menampilkan informasi tentang
Fausta Gallery, jam kerja, social network, dan
information. Jam kerja digunakan sebagai pengingat
admin. Tampilan dapat dilihat pada gambar. 3.7
No. sheet 6
Home admin

Navigasi

Judul
Isi
------------------------------------------------------------------------------------------------

Keterangan :
Judul pakai Calibri , 12 point, biru
Teks pakai Calibri, 12 point, hitam

Gambar 3.7 LKT home admin

27

1.2.7 Lembar Kerja Tampilan 7
Pada LKT ini digunakan pada halaman admin,
laporan pj, daftar customer, daftar pesan. Pada
tampilan ini sama, hanya isi pada halaman masingmasing yang membedakannya. Tampilan dapat
dilihat pada dambar 3.8
No. sheet 7
Admin, laporan pj, daftar
customer, daftar pesan

Navigasi

Judul
Isi
-------------------Tabel (admin/ laporan pj/ daftar
customer/ daftar pesan)

Keterangan :
Judul pakai Arial , 12 point, biru
Teks pakai Calibri, 12 point, hitam
Isi pakai Times new roman, 12 point, hitam
Tabel pakai times new roman , 12 point, hitam
Gambar 3.8 LKT Admin, laporan pj, daftar customer,
daftar pesan

28

1.2.8 Lembar Kerja Tampilan 8
Pada LKT ini digunakan pada halaman admin
produk, kategori, no resi, news, artike, polling dan
about. Pada tampilan ini sama, hanya isi pada
halaman masing-masing yang membedakannya.
Tampilan dapat dilihat pada gambar. 3.9
No. sheet 8
Produk, kategori, no resi,
news, artike, polling dan
about
Judul
Tambah
Tabel
(produk/kategori/no
resi/news/artike/polling/
about)
Edit/hapus
Edit/hapus
dst

Navigasi
- Klik tambah
akan masuk
pada
halaman
tambah
- Klik edit, akan
masuk pada
halaman edit
data
- Klik Hapus,
akan menhapus
data yang telan
ada.

Keterangan :
Judul pakai Arial , 12 point, biru
Teks pakai Calibri, 10 point, hitam
Tabel pakai times new roman , 12 point, hitam
Isi pakai Times new roman, 12 point, hitam
Gambar 3.9 LKT Produk, kategori, no resi, news,
artike, polling dan about

29

3.3 Data Flow Diagram Level 0

Pengunjung
website

ADMIN

5
6

4
3
2

Sistem informasi website ecommerce Konveksi “Fausta
Gallery”

7
8
9

1

15 14
10
13 12 11

Pembeli/member

Gambar 3.10 Data Flow Diagram Level 0

Keterangan :
Data yang mengalir dan atau dari admin :
1. Username dan password
2. Data identitas Fausta Gallery
3. Input/edit data
4. Update data

30

Data yang mengalir dari atau pengunjung website :
5. Informasi identitas Fausta Gallery
6. Info produk, requirement, how to buy, no resi, news,
artikel, rss.
7. Isi testimoni
8. Data testimoni
9. Isi contact data
Data yang mengalir dari atau Pembeli/member :
10. Input data pembeli/member
11. Username dan password
12. Data produk, identitas Fausta Gallery
13. Beli produk
14. Data shopping cart
15. Data konformasi pembelian
16. Konfirmasi pembelian

31

3.4 Flowchart
3.4.1 Admin
MULAI

Input username
dan password

Username dan
password

Tidak

Form admin

Ya
Info Identitas Gallery
Gombal

Input/edit data produk,
katefori, laporan pj, daftar
customer, no resi, about,
artikel, news, polling

Input/edit
data

Tidak

Halaman roduk, katefori, laporan
pj, daftar customer, no resi, about,
artikel, news, polling

Ya
Update
Data

Logout

SELESAI

Gambar 3.11 Flowchat Admin

32

3.4.2 Pengunjung website
MULAI

Informasi
identitas Gallery
Gombal
Input
testimoni

Reset

Tidak

testimoni
lengkap
Ya

Input
contact

Info produk,
requirement, how to
buy, no resi, news,
artikel, rss

Contact
lengkap

Tidak Reset

Data
testimon
i

Ya
SELESAI

Gambar 3.12 Flowchat Pengunjung Website

33

3.4.3 Pembeli/member
MULAI
Input data
pembeli/
member

Lengkap

Tidak

Form
member

Tidak

Reset

Ya
Username dan
password

Benar

Ya
Identitas Gallery Gombal,
kategori, data produk,
requirement, how to buy,
no resi, berita, artikel,
polling

Detail
Produk

Tidak
Lihat

Beli
produk

Ya

Ya

Tambah
Barang
Tidak
Data konfirmasi
pembelian

Konfirmasi
Pembelian

SELESAI

Gambar 3.13 Data Flow Diagram Level 0
Pembeli/member

34

3.4.5 Jaringan Semantik Tampilan (JST)
a. JST Website pembeli/member

T5

Reset

Reset

T6

T7

Kirim
Kembali
Lihat

T4

Submit

Kembali
T8

Lihat
Lihat

T3

Loop
kembali
Lihat

T2
Kembali

T1

LOGIN
LOGPUT
T9

T10

T13

T12

T11

Gambar 3.14 JST Website pembeli/member
Keterangan :
T1, T2, . . ., T13 adalah nomor tampilan (lembar kerja),
tulisan yang ada seperti kembali,save, reset dan lainlain menyatakan event, dan anak panah menunjukkan
transisi yang terjadi. Event yang menyebabkan terjadinya
transisi dari satu tampilan ke tampilan berikutnya,
seperti yang dikatakan di atas.
T1 : Login
T2 : Home

35

T3 : Requirement
T4 : How to buy
T5 : No Resi
T6 : Testimoni
T7 : Contact
T8 : Artikel
T9 : News
T10 : RSS
T11 : Produk
T12 :Shopping cart
T13 : Halaman Konfirmasi Pembelian

36

b. JST Website admin
T4

Kembali
Lihat
T3

Lihat

T5

Loop
simpan
tambah

T1

Kembali
Kembali
Lihat

T2

Tambah

login

T13

T6

Simpan

logout

simpan
Tambah
tambah
simpan

T7

tambah
simpan
simpan
tambah

T9

T9

T9

T8

Gambar 3.15 JST Website admin

Keterangan :
T1, T2, . . ., T13 adalah nomor tampilan (lembar
kerja), tulisan yang ada seperti kembali,simpan,
tambah dan lain-lain menyatakan event, dan anak
panah menunjukkan transisi yang terjadi. Event yang
menyebabkan terjadinya transisi dari satu tampilan ke
tampilan berikutnya, seperti yang dikatakan di atas.
T1 : Login
T2 : Home

37

T3 : Produk
T4 : Kategori
T5 : Laporan Penjualan
T6 : Daftar Customer
T7 : Daftar Pesan
T8 : No Resi
T9 : About
T10 : News
T11 : Artikel
T12 :Polling
T13 : Logout

38

3.4.6 ERD(Entity Relationship Diagram)
id

cp

tang
gal

isi

Judul
waktu

cp

paragr
af

artikel
judul
isi

news
id

name

id

Input data

id

id

Jenis_
kelamin

nama

pertanyan

input

Contact

Polling

nama

id

phone

email

id

tanggal

Resi

Testimoni

Input data

input

Id_
user

level

tangg
al

id

Admin/
administrasi

input

about

input

pilihan jumlah
alamat

password

pesan

phone

url

Id_
Produk

Member
_id

Username

pesan

id
First_
name

members

mengorder

komentar

Id_
pemesan
an

Order_
product

email
Last_
name

Jenis_
kelamin

alamat

addres
s

Resi_
pengirima
n

id

Username

Produk_
name

nama

passwor
d

Input data

judul

id

price

memilih

product

mempunyai

category

category

produk
image

phone

Id_
catefory

deskripsi

status

Id_produ
ct

qty
Id_
keranja
ng

email

nam
a

Order
Keranjang

Tanggal_
keranjan
g

Id_sesi
on

Gambar 3.16 ERD (Entity Relationship Diagram

isi