T0 562011003 BAB III
BAB III
PERANCANGAN SISTEM
1.1. Data Flow Diagram (DFD)
1.1.1. Data Flow Diagram Level 0
Customer
3 4
1
Pengunjung web
7
5 6
2
Website penjualan online berbasis
e-commerce Venus Computer Equipment
Penjelasan
Data yang mengalir dari atau ke customer
1. Info produk
2. Menampilkan produk
3. Beli produk
4. Menampilkan form order
5. Mengirim identitas untuk order
6. Data customer
Data yang mengalir dari atau Pengunjung web
7. Info data produk
Gambar 3.1. DFD Level 0 Website Venus Computer Equipment
16
1.1.2. Data Flow Diagram Level 1
Pengunjung web
Melihat produk
admin
Login admin
Proses admin
Sistem Toko Venus
Computer
Memilih barang dan
melakukan pembelian
customer
Proses customer
Gambar 3.2. DFD Level 1 Website Venus Computer Equipment
17
1.1.3. Data Flow Diagram Level 2
Data admin
Pengolahan
data admin
Data berita
Pengolahan
data berita
Data admin
Data berita
Data admin
Data berita
Baca berita
Data categories
Pengolahan
data categories
Data categories
Data categories
Pilih Categories
Admin
Customer
Data produk
Data transaksi
Pengolahan
data produk
Data produk
Pengolahan
data transaksi
Data transaksi
Data produk
Data transaksi
Pilih Produk
Melakukan
transaksi
Gambar 3.3. DFD Level 2 Website Venus Computer Equipment
18
1.2. Flowchart Sistem
1.2.1. Flowchart Customer
M ulai
Info D ata
P roduk
In p u t d a ta cu sto m e r
P em belian
ke d a ta b a se
In fo D a ta C u sto m e r
Data Customer
T idak
T r ansaksi
Ya
S eles ai
Gambar 3.4. Flowchart Customer
1.2.2. Flowchart Visitors / Pengunjung Web
Mulai
Info Data
Produk
Selesai
Gambar 3.5. Flowchart Visitors / Pengunjung Web
19
1.3. Jaringan Semantik Tampilan (JST)
1.3.1. Jaringan Semantik Tampilan (JST) Web
Pembelian
Service
Tentang
kami
Order
Power
bank
Home
USB/FD
Headpho
ne
Charger
Mp3
Player
Acesories
Speaker
Gambar 3.6. Jaringan Semantik Tampilan (JST) Web
Keterangan Warna Line / garis
Line Biru Muda :
Dari page Home, dapat mengakses dengan klik ke page Tentang Kami, page
Pembelian, page Service, page Order, sub kategori untuk tiap produk seperti
20
Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan
USB/FD.
Line Hijau :
Dari page Tentang Kami, dapat mengakses dengan klik ke page Pembelian,
page Service, page Order, sub kategori untuk tiap produk seperti seperti
Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan
USB/FD.
Line Merah :
Dari page Pembelian, dapat mengakses dengan klik ke page Order, sub
kategori untuk tiap produk seperti seperti Power Bank, Charger, Mp3 Player,
Speaker, Accessories, Headphone dan USB/FD.
Line Hitam :
Dari page Service, dapat mengakses dengan klik ke page Tentang Kami,
page Pembelian, page Order, sub kategori untuk tiap produk seperti seperti
Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan
USB/FD.
Line Ungu :
Dari page Order, dapat mengakses dengan klik ke sub kategori untuk tiap
produk seperti seperti Power Bank, Charger, Mp3 Player, Speaker,
Accessories, Headphone dan USB/FD.
Line Pink :
Dari sub kategori produk Power Bank, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Charger, Mp3 Player, Speaker,
Accessories, Headphone dan USB/FD.
Line Hijau Tua :
Dari sub kategori produk Charger, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Mp3 Player, Speaker, Accessories,
Headphone dan USB/FD.
21
Line Oranye :
Dari sub kategori produk Mp3 Player, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Speaker, Accessories, Headphone dan
USB/FD.
Line Abu-abu :
Dari sub kategori produk Speaker, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Accessories, Headphone dan USB/FD.
Line Biru Muda :
Dari sub kategori produk Accessories, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Headphone dan USB/FD.
Line Coklat :
Dari sub kategori produk Headphone, dapat mengakses dengan klik ke sub
kategori untuk produk lain seperti USB/FD.
22
1.3.2. Jaringan Semantik Tampilan (JST) Admin
Home
Tambah
Produk
Tambah
Berita
Gambar 3.7. JST Admin
Keterangan :
Line Ungu : Dari page Home dapat mengakses ke page Tambah Produk dan
Tambah Berita
Line Merah : Dari page Tambah Produk dapat mengakses ke page Home dan
Tambah Berita
Line Biru : Dari page Tambah Berita dapat mengakses ke page Home dan
Tambah Produk
23
1.4. Lembar Kerja Tampilan (LKT)
1.4.1. Lembar Kerja Tampilan (LKT) Web
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Selamat datang di Venus Computer Equipment
Categories
News
No Rekening
Admin Login
footer
Gambar 3.8. LKT untuk tampilan Home
24
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Tentang Kami
Categories
News
No Rekening
Admin Login
footer
Gambar 3.9. LKT untuk tampilan Tentang Kami
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Cara Pembelian
Categories
News
No Rekening
Admin Login
footer
Gambar 3.10. LKT untuk tampilan Cara Pembelian
25
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Service
Categories
News
No Rekening
Admin Login
footer
Gambar 3.11. LKT untuk tampilan Service
26
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
home
Tentang
kami
Cara
pembelian
Service
Order
Order Barang
Nama Anda :
Categories
Nama barang :
Email Anda :
Keterangan :
News
kirim
No Rekening
reset
Admin Login
footer
Gambar 3.12. LKT untuk form Order Barang
Navigasi
header
Home
Tentang
kami
Cara
pembelian
Service
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
Produk : berisi jenis-jenis produk yang
ditawarkan
Order
Produk
Categories
News
No Rekening
Admin Login
footer
Gambar 3.13. LKT untuk tampilan Produk dari tiap Categories
27
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
Detail Barang : berisi detail dari barang yang
dipilih barik berupa pilihan warna atau harga
header
home
Tentang
kami
Cara
pembelian
Service
Order
Detail Barang
Categories
News
No Rekening
Admin Login
footer
Gambar 3.14. LKT untuk tampilan Detail Barang dari tiap Produk
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
Berita Teknologi : berisi sebuah berita yang
lengkap dengan gambarnya yang menyangkut
teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Berita Teknologi
Categories
(gambar)
News
(isi berita)
No Rekening
Admin Login
footer
Gambar 3.15. LKT untuk tampilan Berita Teknologi daru sub menu News
28
1.4.2. Lembar Kerja Tampilan (LKT) Admin
logout
Venus Computer Website Administration
Home
Tambah
Product
Navigasi
Tab Home : Untuk tampilan awal page Admin berisi untuk
iupdate delete produk dan berita
Tab Tambah Produk : Untuk menambahkan produk
Tab Tambah Berita : Untuk menambahkan berita pada web
Tambah
Berita
Content untuk update delete Produk dan Berita
Gambar 3.16. LKT untuk Tampilan Home pada Admin
logout
Venus Computer Website Administration
Home
Tambah
Product
Tambah
Berita
Navigasi
Tab Home : Untuk tampilan awal page Admin berisi untuk
iupdate delete produk dan berita
Tab Tambah Produk : Untuk menambahkan produk
Tab Tambah Berita : Untuk menambahkan berita pada web
Text box Nama produk : untuk memberi nama produk yang
akan ditambahkan
Buttton Pilih File : untuk pilih gambar dari produk yang akan
ditambahkan
Text box harga : untuk mencantumkan harga produk yang
akan ditambahkan
Text box Spesifikasi : untuk menambahkan Spesifikasi
produk yang akan ditambahkan
Text bos Kategori : untuk memilih jenis kategori pada produk
yang akan ditambahkan
Tambah Produk
Nama Produk
Images
Pilih file
Harga
Spesifikasi
Kategori
Submit
Gambar 3.17. LKT untuk tampilan Tambah Produk
29
logout
Venus Computer Website Administration
Home
Tambah
Product
Tambah
Berita
Navigasi
Tab Home : Untuk tampilan awal page Admin berisi untuk
iupdate delete produk dan berita
Tab Tambah Produk : Untuk menambahkan produk
Tab Tambah Berita : Untuk menambahkan berita pada web
Text box Tanggal : untuk memilih tanggal berita
Button Gambar : untuk memilih gambar dari berita yang
akan ditambahkan
Text box Judul Berita : untuk memasukkan Judul berita yang
akan ditambahkan
Text box Isi : untuk memasukkan isi berita yang akan
ditambahkan
Tambah Berita
Tanggal
Gambar
Pilih file
Judul Berita
Isi
Submit
Gambar 3.18. LKT untuk Tampilan Tambah Berita
30
PERANCANGAN SISTEM
1.1. Data Flow Diagram (DFD)
1.1.1. Data Flow Diagram Level 0
Customer
3 4
1
Pengunjung web
7
5 6
2
Website penjualan online berbasis
e-commerce Venus Computer Equipment
Penjelasan
Data yang mengalir dari atau ke customer
1. Info produk
2. Menampilkan produk
3. Beli produk
4. Menampilkan form order
5. Mengirim identitas untuk order
6. Data customer
Data yang mengalir dari atau Pengunjung web
7. Info data produk
Gambar 3.1. DFD Level 0 Website Venus Computer Equipment
16
1.1.2. Data Flow Diagram Level 1
Pengunjung web
Melihat produk
admin
Login admin
Proses admin
Sistem Toko Venus
Computer
Memilih barang dan
melakukan pembelian
customer
Proses customer
Gambar 3.2. DFD Level 1 Website Venus Computer Equipment
17
1.1.3. Data Flow Diagram Level 2
Data admin
Pengolahan
data admin
Data berita
Pengolahan
data berita
Data admin
Data berita
Data admin
Data berita
Baca berita
Data categories
Pengolahan
data categories
Data categories
Data categories
Pilih Categories
Admin
Customer
Data produk
Data transaksi
Pengolahan
data produk
Data produk
Pengolahan
data transaksi
Data transaksi
Data produk
Data transaksi
Pilih Produk
Melakukan
transaksi
Gambar 3.3. DFD Level 2 Website Venus Computer Equipment
18
1.2. Flowchart Sistem
1.2.1. Flowchart Customer
M ulai
Info D ata
P roduk
In p u t d a ta cu sto m e r
P em belian
ke d a ta b a se
In fo D a ta C u sto m e r
Data Customer
T idak
T r ansaksi
Ya
S eles ai
Gambar 3.4. Flowchart Customer
1.2.2. Flowchart Visitors / Pengunjung Web
Mulai
Info Data
Produk
Selesai
Gambar 3.5. Flowchart Visitors / Pengunjung Web
19
1.3. Jaringan Semantik Tampilan (JST)
1.3.1. Jaringan Semantik Tampilan (JST) Web
Pembelian
Service
Tentang
kami
Order
Power
bank
Home
USB/FD
Headpho
ne
Charger
Mp3
Player
Acesories
Speaker
Gambar 3.6. Jaringan Semantik Tampilan (JST) Web
Keterangan Warna Line / garis
Line Biru Muda :
Dari page Home, dapat mengakses dengan klik ke page Tentang Kami, page
Pembelian, page Service, page Order, sub kategori untuk tiap produk seperti
20
Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan
USB/FD.
Line Hijau :
Dari page Tentang Kami, dapat mengakses dengan klik ke page Pembelian,
page Service, page Order, sub kategori untuk tiap produk seperti seperti
Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan
USB/FD.
Line Merah :
Dari page Pembelian, dapat mengakses dengan klik ke page Order, sub
kategori untuk tiap produk seperti seperti Power Bank, Charger, Mp3 Player,
Speaker, Accessories, Headphone dan USB/FD.
Line Hitam :
Dari page Service, dapat mengakses dengan klik ke page Tentang Kami,
page Pembelian, page Order, sub kategori untuk tiap produk seperti seperti
Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan
USB/FD.
Line Ungu :
Dari page Order, dapat mengakses dengan klik ke sub kategori untuk tiap
produk seperti seperti Power Bank, Charger, Mp3 Player, Speaker,
Accessories, Headphone dan USB/FD.
Line Pink :
Dari sub kategori produk Power Bank, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Charger, Mp3 Player, Speaker,
Accessories, Headphone dan USB/FD.
Line Hijau Tua :
Dari sub kategori produk Charger, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Mp3 Player, Speaker, Accessories,
Headphone dan USB/FD.
21
Line Oranye :
Dari sub kategori produk Mp3 Player, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Speaker, Accessories, Headphone dan
USB/FD.
Line Abu-abu :
Dari sub kategori produk Speaker, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Accessories, Headphone dan USB/FD.
Line Biru Muda :
Dari sub kategori produk Accessories, dapat mengakses dengan klik ke sub
kategori untuk tiap produk seperti Headphone dan USB/FD.
Line Coklat :
Dari sub kategori produk Headphone, dapat mengakses dengan klik ke sub
kategori untuk produk lain seperti USB/FD.
22
1.3.2. Jaringan Semantik Tampilan (JST) Admin
Home
Tambah
Produk
Tambah
Berita
Gambar 3.7. JST Admin
Keterangan :
Line Ungu : Dari page Home dapat mengakses ke page Tambah Produk dan
Tambah Berita
Line Merah : Dari page Tambah Produk dapat mengakses ke page Home dan
Tambah Berita
Line Biru : Dari page Tambah Berita dapat mengakses ke page Home dan
Tambah Produk
23
1.4. Lembar Kerja Tampilan (LKT)
1.4.1. Lembar Kerja Tampilan (LKT) Web
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Selamat datang di Venus Computer Equipment
Categories
News
No Rekening
Admin Login
footer
Gambar 3.8. LKT untuk tampilan Home
24
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Tentang Kami
Categories
News
No Rekening
Admin Login
footer
Gambar 3.9. LKT untuk tampilan Tentang Kami
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Cara Pembelian
Categories
News
No Rekening
Admin Login
footer
Gambar 3.10. LKT untuk tampilan Cara Pembelian
25
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Service
Categories
News
No Rekening
Admin Login
footer
Gambar 3.11. LKT untuk tampilan Service
26
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
header
home
Tentang
kami
Cara
pembelian
Service
Order
Order Barang
Nama Anda :
Categories
Nama barang :
Email Anda :
Keterangan :
News
kirim
No Rekening
reset
Admin Login
footer
Gambar 3.12. LKT untuk form Order Barang
Navigasi
header
Home
Tentang
kami
Cara
pembelian
Service
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
Produk : berisi jenis-jenis produk yang
ditawarkan
Order
Produk
Categories
News
No Rekening
Admin Login
footer
Gambar 3.13. LKT untuk tampilan Produk dari tiap Categories
27
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
Detail Barang : berisi detail dari barang yang
dipilih barik berupa pilihan warna atau harga
header
home
Tentang
kami
Cara
pembelian
Service
Order
Detail Barang
Categories
News
No Rekening
Admin Login
footer
Gambar 3.14. LKT untuk tampilan Detail Barang dari tiap Produk
Navigasi
Tab Home : menampilkan halaman awal pada
web
Tab Tentang Kami : menampilkan identitas toko
Tab Cara pembelian : menampilkan tata cara
pembelian dalam web ini
Tab Service : menampilkan jenis jasa yang
ditawarkan toko berupa service
Tab Order : menampilkan form untuk memesan
barang
Categories : berisi daftar kategori produk yang
ditawarkan
No Rekening : berisi daftar nomor rekening
untuk transaksi pembelian
Admin Login : apabila admin akan masuk ke
page admin dan update isi web
News : berisi berita teknologi terbaru
Berita Teknologi : berisi sebuah berita yang
lengkap dengan gambarnya yang menyangkut
teknologi terbaru
header
Home
Tentang
kami
Cara
pembelian
Service
Order
Berita Teknologi
Categories
(gambar)
News
(isi berita)
No Rekening
Admin Login
footer
Gambar 3.15. LKT untuk tampilan Berita Teknologi daru sub menu News
28
1.4.2. Lembar Kerja Tampilan (LKT) Admin
logout
Venus Computer Website Administration
Home
Tambah
Product
Navigasi
Tab Home : Untuk tampilan awal page Admin berisi untuk
iupdate delete produk dan berita
Tab Tambah Produk : Untuk menambahkan produk
Tab Tambah Berita : Untuk menambahkan berita pada web
Tambah
Berita
Content untuk update delete Produk dan Berita
Gambar 3.16. LKT untuk Tampilan Home pada Admin
logout
Venus Computer Website Administration
Home
Tambah
Product
Tambah
Berita
Navigasi
Tab Home : Untuk tampilan awal page Admin berisi untuk
iupdate delete produk dan berita
Tab Tambah Produk : Untuk menambahkan produk
Tab Tambah Berita : Untuk menambahkan berita pada web
Text box Nama produk : untuk memberi nama produk yang
akan ditambahkan
Buttton Pilih File : untuk pilih gambar dari produk yang akan
ditambahkan
Text box harga : untuk mencantumkan harga produk yang
akan ditambahkan
Text box Spesifikasi : untuk menambahkan Spesifikasi
produk yang akan ditambahkan
Text bos Kategori : untuk memilih jenis kategori pada produk
yang akan ditambahkan
Tambah Produk
Nama Produk
Images
Pilih file
Harga
Spesifikasi
Kategori
Submit
Gambar 3.17. LKT untuk tampilan Tambah Produk
29
logout
Venus Computer Website Administration
Home
Tambah
Product
Tambah
Berita
Navigasi
Tab Home : Untuk tampilan awal page Admin berisi untuk
iupdate delete produk dan berita
Tab Tambah Produk : Untuk menambahkan produk
Tab Tambah Berita : Untuk menambahkan berita pada web
Text box Tanggal : untuk memilih tanggal berita
Button Gambar : untuk memilih gambar dari berita yang
akan ditambahkan
Text box Judul Berita : untuk memasukkan Judul berita yang
akan ditambahkan
Text box Isi : untuk memasukkan isi berita yang akan
ditambahkan
Tambah Berita
Tanggal
Gambar
Pilih file
Judul Berita
Isi
Submit
Gambar 3.18. LKT untuk Tampilan Tambah Berita
30