T0 562011010 BAB III
BAB III
PERANCANGAN SISTEM
Didalam perancangan sistem diperlukan beberapa diagram alur
pembuatan sistem, diantaranya :
3.1 DFD (Data Flow Diagram)
ADMIN
Data produk & kategori
1.0
INPUT
PRODUK &
CATEGORY
Data produk & kategori
Data produk &
kategori
Data produk & kategori
Data produk & kategori
2.0
UPDATE
DATABASE
PRODUK &
KATEGORI
Data produk & kategori
CUSTOMERS
Data Pesanan
3.0
ORDER
PRODUCT
Data Pesanan
Data Pesanan
Data Order
Konfirmasi Pemesanan
Data Pesanan
4.0
LAPORAN
ORDER
Gambar 3.1 Data Flow Diagram
13
14
3.2 Flowchart
3.2.1 Flowchart Admin
START
INPUT
USERNAME &
PASSWORD
PROCESS DATA
ADMIN
NO
FORM
LOGIN
ADMIN
BERHASIL
LOGIN ?
YES
INPUT
CATEGORY
INPUT
PRODUCT
UPDATE
DATABASE
FINISH
Gambar 3.2 Flowchart Admin
15
3.2.2 Flowchart Customers
START
INPUT USERNAME
& PASSWORD
PROCESS DATA
CUSTOMERS
BERHASIL LOGIN ?
NO
FORM
CUSTOMERS
YES
INPUT
PRODUCT
ORDER
ORDER LAGI ?
YES
FORM
ORDER
NO
UPDATE DATABASE
ORDER
FINISH
Gambar 3.3 Flowchart Customers
16
3.3 JST (Jaringan Semantik Tampilan)
Partner
About
About
T2
...
...
.
Pa
rtn
er
..
...
...
...
...
.
er
rtn ct
Pa du
o
Pr
e
.
...
...
...
..
.
.
...
...
..--
t
ou
Ab me
Ho
Ab
Pro out
duc
t
Ho
m
.
Partner
T3
-
---
l
ia
M
at
er
t
e
Ma
......Log out
gin
l
teria
uc
od
Pr
t
ou
Hom
g
Lo
Lo
Product
T4
Product
Home
Home
T1
Partner
Material
Login
t
ou
Ab terial
Ma
Customers
T7
Admin
T6
Material
T5
Gambar 3.4 JST (Jaringan Semantik Tampilan)
17
3.4 LKT (Lembar Kerja Tampilan)
3.4.1 LKT Index
No. sheet 1
Index
Navigasi
Home About Partner Product
Material
LOGIN
Isi
......................
Isi
......................
1. Klik
Home,
ganti tampilan
No.1
2. Klik
About,
ganti tampilan
No.2
3. Klik Partner ,
ganti tampilan
No.3
4. Klik Product,
ganti tampilan
No.4
5. Klik Material,
ganti tampilan
No.5
6. Klik
login
Admin, ganti
tampilan No.6
Keterangan :
1. Background memakai image
2. Teks Menu pakai Calibri, Bold 14 point
3. Teks isi pakai Time New Roman, 12 point
Gambar 3.5 LKT index.php
18
3.4.2 LKT About
No. sheet 2
About
Navigasi
Home About Partner Product
Material
Image
Kategori
................
Isi
......................
................
................
Isi
......................
................
................
................
1. Klik
ganti
No.1
2. Klik
ganti
No.2
3. Klik
ganti
No.3
4. Klik
ganti
No.4
5. Klik
ganti
No.5
Keterangan :
1. Background memakai image
2. Teks Menu pakai Calibri, Bold 14 point
3. Teks isi pakai Time New Roman, 12 point
Gambar 3.6 LKT About.php
Home,
tampilan
About,
tampilan
Partner ,
tampilan
Product,
tampilan
Material,
tampilan
19
3.4.3 LKT Partner
No. sheet 3
Partner
Navigasi
Home About Partner Product
Material
Kategori
Keterangan
................
................
Isi
......................
................
................
Isi
......................
................
................
1. Klik
ganti
No.1
2. Klik
ganti
No.2
3. Klik
ganti
No.3
4. Klik
ganti
No.4
5. Klik
ganti
No.5
Keterangan :
1. Background memakai image
2. Teks Menu pakai Calibri, Bold 14 point
3. Teks isi pakai Time New Roman, 12 point
Gambar 3.7 LKT Partner.php
Home,
tampilan
About,
tampilan
Partner ,
tampilan
Product,
tampilan
Material,
tampilan
20
3.4.4 LKT Product
No. sheet 4
Product
Navigasi
Home About Partner Product
Material
Kategori
Image product
................
Keterangan
................
Image product
................
Keterangan
................
Image product
Keterangan
footer
................
................
1. Klik
Home,
ganti tampilan
No.1
2. Klik
About,
ganti tampilan
No.2
3. Klik Partner ,
ganti tampilan
No.3
4. Klik Product,
ganti tampilan
No.4
5. Klik Material,
ganti tampilan
No.5
6. Klik salah satu
image masuk
ke detail.php
Keterangan :
1. Background memakai image
2. Teks Menu pakai Calibri, Bold 14 point
3. Teks isi pakai Time New Roman, 12 point
Gambar 3.8 LKT Product.php
21
3.4.5 LKT Material
No. sheet 5
Material
Navigasi
Home About Partner Product
Material
Kategori
................
KETERANGAN
Image matetrial
................
................
Image matetrial
................
................
Image matetrial
................
1. Klik
Home,
ganti tampilan
No.1
2. Klik
About,
ganti tampilan
No.2
3. Klik Partner ,
ganti tampilan
No.3
4. Klik Product,
ganti tampilan
No.4
5. Klik Material,
ganti tampilan
No.5
6. Klik salah satu
kategori ganti
ke
tampilan
No.4
Keterangan :
4. Background memakai image
5. Teks Menu pakai Calibri, Bold 14 point
6. Teks isi pakai Time New Roman, 12 point
Gambar 3.9 LKT Material.php
22
3.4.6 LKT Login Admin
No. sheet 6
Login Admin
Navigasi
Login administrator
LOGO
1. Klik button
login, ganti
tampilan
No.8
Username
Password
login
welcome
Keterangan :
1. Teks pakai Time New Roman, 12 point
2. Teks “welcome” pakai image.png
Gambar 3.10 LKT login admin.php
23
3.4.7 LKT Login customers
No. sheet 7
Customers
Navigasi
Login administrator
LOGO
1. Klik button
login, ganti
tampilan
No.9
Username
Password
login
welcome
Keterangan :
2. Teks pakai Time New Roman, 12 point
3. Teks “welcome” pakai image.png
Gambar 3.11 LKT login customers
24
3.4.8 LKT home admin
No. sheet 8
Home admin
Navigasi
Logout
Isi
........................
........................
........................
Menu
............
............
............
............
............
1. Klik produk ,
ganti
ketampilan
produk admin
2. Klik kategori
,ganti
ketampilan
kategori
admin.
3. Klik laporan,
ganti
ke
tampilan
laporan
admin
4. Klik Logout
ganti
ketampilan
No.1
Keterangan :
1. Teks pakai Time New Roman, 12 point
Gambar 3.12 LKT home admin
25
3.4.9 LKT Home Customers
No. sheet 9
Home customers
Home About
Navigasi
NewProduct
Kategori
Nama customers
................
Logout
................
................
................
................
................
Keterangan
..................
..................
..................
..................
..................
1. Klik
salah
satu produk,
ganti
tampilan
detail produk.
2. Klik about,
ganti
tampilan
No.2
3. Klik
Newproduct
ganti
tampilan
Newporduct.
php
4. Klik Logout
ganti
tampilan
No.1
atau
keluar
dari
sistem
customers
Keterangan :
1. Teks ISI pakai Time New Roman, 12 point
2. Teks judul pakai Clibri, 14 point , bold.
Gambar 3.13 LKT home customers
PERANCANGAN SISTEM
Didalam perancangan sistem diperlukan beberapa diagram alur
pembuatan sistem, diantaranya :
3.1 DFD (Data Flow Diagram)
ADMIN
Data produk & kategori
1.0
INPUT
PRODUK &
CATEGORY
Data produk & kategori
Data produk &
kategori
Data produk & kategori
Data produk & kategori
2.0
UPDATE
DATABASE
PRODUK &
KATEGORI
Data produk & kategori
CUSTOMERS
Data Pesanan
3.0
ORDER
PRODUCT
Data Pesanan
Data Pesanan
Data Order
Konfirmasi Pemesanan
Data Pesanan
4.0
LAPORAN
ORDER
Gambar 3.1 Data Flow Diagram
13
14
3.2 Flowchart
3.2.1 Flowchart Admin
START
INPUT
USERNAME &
PASSWORD
PROCESS DATA
ADMIN
NO
FORM
LOGIN
ADMIN
BERHASIL
LOGIN ?
YES
INPUT
CATEGORY
INPUT
PRODUCT
UPDATE
DATABASE
FINISH
Gambar 3.2 Flowchart Admin
15
3.2.2 Flowchart Customers
START
INPUT USERNAME
& PASSWORD
PROCESS DATA
CUSTOMERS
BERHASIL LOGIN ?
NO
FORM
CUSTOMERS
YES
INPUT
PRODUCT
ORDER
ORDER LAGI ?
YES
FORM
ORDER
NO
UPDATE DATABASE
ORDER
FINISH
Gambar 3.3 Flowchart Customers
16
3.3 JST (Jaringan Semantik Tampilan)
Partner
About
About
T2
...
...
.
Pa
rtn
er
..
...
...
...
...
.
er
rtn ct
Pa du
o
Pr
e
.
...
...
...
..
.
.
...
...
..--
t
ou
Ab me
Ho
Ab
Pro out
duc
t
Ho
m
.
Partner
T3
-
---
l
ia
M
at
er
t
e
Ma
......Log out
gin
l
teria
uc
od
Pr
t
ou
Hom
g
Lo
Lo
Product
T4
Product
Home
Home
T1
Partner
Material
Login
t
ou
Ab terial
Ma
Customers
T7
Admin
T6
Material
T5
Gambar 3.4 JST (Jaringan Semantik Tampilan)
17
3.4 LKT (Lembar Kerja Tampilan)
3.4.1 LKT Index
No. sheet 1
Index
Navigasi
Home About Partner Product
Material
LOGIN
Isi
......................
Isi
......................
1. Klik
Home,
ganti tampilan
No.1
2. Klik
About,
ganti tampilan
No.2
3. Klik Partner ,
ganti tampilan
No.3
4. Klik Product,
ganti tampilan
No.4
5. Klik Material,
ganti tampilan
No.5
6. Klik
login
Admin, ganti
tampilan No.6
Keterangan :
1. Background memakai image
2. Teks Menu pakai Calibri, Bold 14 point
3. Teks isi pakai Time New Roman, 12 point
Gambar 3.5 LKT index.php
18
3.4.2 LKT About
No. sheet 2
About
Navigasi
Home About Partner Product
Material
Image
Kategori
................
Isi
......................
................
................
Isi
......................
................
................
................
1. Klik
ganti
No.1
2. Klik
ganti
No.2
3. Klik
ganti
No.3
4. Klik
ganti
No.4
5. Klik
ganti
No.5
Keterangan :
1. Background memakai image
2. Teks Menu pakai Calibri, Bold 14 point
3. Teks isi pakai Time New Roman, 12 point
Gambar 3.6 LKT About.php
Home,
tampilan
About,
tampilan
Partner ,
tampilan
Product,
tampilan
Material,
tampilan
19
3.4.3 LKT Partner
No. sheet 3
Partner
Navigasi
Home About Partner Product
Material
Kategori
Keterangan
................
................
Isi
......................
................
................
Isi
......................
................
................
1. Klik
ganti
No.1
2. Klik
ganti
No.2
3. Klik
ganti
No.3
4. Klik
ganti
No.4
5. Klik
ganti
No.5
Keterangan :
1. Background memakai image
2. Teks Menu pakai Calibri, Bold 14 point
3. Teks isi pakai Time New Roman, 12 point
Gambar 3.7 LKT Partner.php
Home,
tampilan
About,
tampilan
Partner ,
tampilan
Product,
tampilan
Material,
tampilan
20
3.4.4 LKT Product
No. sheet 4
Product
Navigasi
Home About Partner Product
Material
Kategori
Image product
................
Keterangan
................
Image product
................
Keterangan
................
Image product
Keterangan
footer
................
................
1. Klik
Home,
ganti tampilan
No.1
2. Klik
About,
ganti tampilan
No.2
3. Klik Partner ,
ganti tampilan
No.3
4. Klik Product,
ganti tampilan
No.4
5. Klik Material,
ganti tampilan
No.5
6. Klik salah satu
image masuk
ke detail.php
Keterangan :
1. Background memakai image
2. Teks Menu pakai Calibri, Bold 14 point
3. Teks isi pakai Time New Roman, 12 point
Gambar 3.8 LKT Product.php
21
3.4.5 LKT Material
No. sheet 5
Material
Navigasi
Home About Partner Product
Material
Kategori
................
KETERANGAN
Image matetrial
................
................
Image matetrial
................
................
Image matetrial
................
1. Klik
Home,
ganti tampilan
No.1
2. Klik
About,
ganti tampilan
No.2
3. Klik Partner ,
ganti tampilan
No.3
4. Klik Product,
ganti tampilan
No.4
5. Klik Material,
ganti tampilan
No.5
6. Klik salah satu
kategori ganti
ke
tampilan
No.4
Keterangan :
4. Background memakai image
5. Teks Menu pakai Calibri, Bold 14 point
6. Teks isi pakai Time New Roman, 12 point
Gambar 3.9 LKT Material.php
22
3.4.6 LKT Login Admin
No. sheet 6
Login Admin
Navigasi
Login administrator
LOGO
1. Klik button
login, ganti
tampilan
No.8
Username
Password
login
welcome
Keterangan :
1. Teks pakai Time New Roman, 12 point
2. Teks “welcome” pakai image.png
Gambar 3.10 LKT login admin.php
23
3.4.7 LKT Login customers
No. sheet 7
Customers
Navigasi
Login administrator
LOGO
1. Klik button
login, ganti
tampilan
No.9
Username
Password
login
welcome
Keterangan :
2. Teks pakai Time New Roman, 12 point
3. Teks “welcome” pakai image.png
Gambar 3.11 LKT login customers
24
3.4.8 LKT home admin
No. sheet 8
Home admin
Navigasi
Logout
Isi
........................
........................
........................
Menu
............
............
............
............
............
1. Klik produk ,
ganti
ketampilan
produk admin
2. Klik kategori
,ganti
ketampilan
kategori
admin.
3. Klik laporan,
ganti
ke
tampilan
laporan
admin
4. Klik Logout
ganti
ketampilan
No.1
Keterangan :
1. Teks pakai Time New Roman, 12 point
Gambar 3.12 LKT home admin
25
3.4.9 LKT Home Customers
No. sheet 9
Home customers
Home About
Navigasi
NewProduct
Kategori
Nama customers
................
Logout
................
................
................
................
................
Keterangan
..................
..................
..................
..................
..................
1. Klik
salah
satu produk,
ganti
tampilan
detail produk.
2. Klik about,
ganti
tampilan
No.2
3. Klik
Newproduct
ganti
tampilan
Newporduct.
php
4. Klik Logout
ganti
tampilan
No.1
atau
keluar
dari
sistem
customers
Keterangan :
1. Teks ISI pakai Time New Roman, 12 point
2. Teks judul pakai Clibri, 14 point , bold.
Gambar 3.13 LKT home customers