56

BAB 3

ANALISIS DAN PERANCANGAN SISTEM

3.1 Analisis Sistem

Analisis sistem (systems analysis) didefinisikan sebagai penguraian suatu

sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan

maksud untuk mengidentifikasikan dan mengevaluasi permasalahan-

permasalahan, kesempatan, hambatan yang terjadi dan kebutuhan yang

diharapkan sehingga dapat diusulkan sebagai solusi dalam sebuah perbaikannya.

3.1.1 Analisis Sistem Yang Sedang Berjalan

Prosedur merupakan urutan kegiatan yang tepat dari tahapan-tahapan yang

menerangkan mengenai proses apa yang dikerjakan, siapa yang mengerjakan

proses tersebut, bagaimana proses tersebut dapat dikerjakan dan dokumen apa saja

yang terlibat.

Berdasakan hasil wawancara dengan pihak Unit Peternakan PT.DaFa

Techno Agro, prosedur penjualan produk yang sedang berjalan adalah sebagai

berikut :

3.1.1.1 Prosedure Penjualan

1. Konsumen memilih produk yang akan dibelinya. Setelah konsumen

mendapatkan produk, kemudian mereka menawarkan produk yang lain

sebagai salah satu sarana mengiklan produk-produk lain.

57

2. Petugas penjualan(bendahara) akan memasukan data transaksi ke database,

membuat struk sebagai bukti transaksi dan memberi tahu kepada konsumen

berapa total harga dari produk yang dibelinya.

3. Konsumen memberikan sejumlah uang ke Petugas penjualan(bendahara)

sesuai dengan total harga dari produk yang dibelinya.

4. Petugas penjualan(bendahara) akan mencetak struk dan diberikan konsumen

beserta produk yang dibeli, dan uang kembalian bila uang yang diberikan

konsumen berlebih.

Konsumen Bagian KeuanganUnit Pengolahan

Produk

barang yang

akan dibeli

Barang yang

akan dibeli

konsumen

Daftar barang

A1

Menghitung

total harga

Packing

barang yg di

packing

barang yg di

packing

Buat Bon

Penjualan

Bon penjualan

Bon penjualan

Bon penjualan

Barang

dengan harga

total

1

2

Gambar 3.1 Flowmap Sistem penjualan produk yang sedang berjalan

58

Keterangan

A1 : Arsip Struk penjualan produk

3.1.1.2 Rekapitulasi Penjualan Harian

1. Petugas mengumpulkan nota pembelian kemudian petugas melakukan

rekapitulasi penjualan per harinya.

2. Petugas akan mencatat data transaksi ke dalam buku besar.

3. Petugas memberikan laporan rekpitulasi kepada perusahaan.

Sistem Penjualan pada Unit Peternakan

PT Dafa Techno Agro

Bagian Keuangan perusahaan

A1

Pencatatan data

transaksi

Laporan rekapitulasi

penjualan

Laporan rekapitulasi

penjualan

A2

Data penjualan

Gambar 3.2 Flow map Rekapitulasi Penjualan

Keterangan :

A1 : Arsip nota penjualan

A2 : Arsip laporan rekapitulasi penjualan

59

3.1.2 Analisis Masalah

Ada beberapa permasalahan yang yang timbul dalam sistem yang sedang

berjalan saat ini. Permasalahan-permasalahan tersebut diuraikan pada tabel

analisis masalah berikut:

Tabel 3.1 Tabel Analisis Masalah

No Permasalahan Bagian/pihak

1 Proses transaksi yang dilakukan di tempat

mengharuskan konsumen datang ke tempat tujuan

untuk mendapatkan produk, dengan kata lain sistem

yang berjalan masih offline.

Konsumen

2 Melalui sistem yang berjalan sekarang, pemberian

informasi kepada customer dirasakan kurang efektif

sehingga konsumen belum tentu mendapatkan

informasi secara lengkap.

Konsumen

3 Proses pembayaran yang dilakukan di tempat

mengharuskan konsumen datang ke perusahaan

untuk melakukan pembayaran.

Konsumen

4 Media promosi yang ada masih sederhana Perusahaan

5 Dengan sistem yang berjalan sekarang, pemberian

informasi kepada komsumen dirasakan kurang

efektif sehingga konsumen belum tentu

mendapatkan informasi secara lengkap.

Konsumen

6 Selama ini pengarsipan dilakukan dengan

menggunakan computer offline atau menggunakan

kertas, sehingga mudah hilang dan using.

Perusahaan

3.1.3 Analisis Konsep Bisnis

Sistem penjualan Business to Business (B2B) dimana pembelian dalam

jumlah besar untuk dijual kembali, sebagaimana nominal yang telah ditetapkan

60

perusahaan. Khususnya bisnis yang menjual produk dan jasa ke konsumen pada

website e-commerce yang menyediakan halaman Web yang menarik, katalog

multimedia, proses pemesanan yang interaktif, sistem pembayaran elektronik

yang aman, dan dukungan customer secara online.

3.1.4 Solusi yang ditawarkan

Berdasarkan hasil eveluasi sistem yang berjalan, solusi yang tawarkan

adalah:

1. pembuatan aplikasi e-commerce di Unit Peternakan PT.DaFa Techno

Agro. Dalam sistem ini, konsumen dapat melihat informasi produk dan

dapat melakukan pemesanan secara online.

2. Dengan sistem ini juga dapat menyelesaikan permasalahan promosi

3. Dapat meminimalkan jumlah karyawan.

4. Dapat mengefisienkan waktu

5. Dapat memudahkan dalam menjalankan transaksi jual beli dan menjadikan

pekerjaan lebih praktis.

3.1.5 Analisis Kebutuhan Non-fungsional

Analisis kebutuhan non fungsional merupakan analisis yang dibutuhkan

untuk menentukan spesifikasi kebutuhan sistem. Spesifikasi ini juga meliputi

elemen atau komponen-komponen apa saja yang dibutuhkan untuk sistem yang

akan dibangun sampai dengan sistem tersebut diimplementasikan. Analisis

kebutuhan ini juga menentukan spesifikasi masukan yang diperlukan sistem,

keluaran yang akan dihasilkan sistem dan proses yang dibutuhkan untuk

mengolah masukan sehingga menghasilkan suatu keluaran yang diinginkan.

61

3.1.5.1 Analisis Pengguna

Sistem yang akan dibangun digunakan oleh dua jenis pengguna, yaitu

administrator dan member. Administrator dapat melakukan semua operasi di

dalam perangkat lunak ini seperti tambah data, edit data, dan hapus data.

Sedangkan member(agen) hanya dapat melakukan pemesanan produk saja.

Tabel 3.2 Karakteristik pengguna

Pengguna Hak akses Tingkat keterampilan

Administrator Melakukan

pengolahan data

master

Menguasai komputer,

pemahaman yang cukup untuk

mengelola data dalam web

serta memiliki pengetahuan

tentang internet.

Agen Pemesanan produk Mampumengoprasikan

komputer dan dapat melakukan

browsing di internet.

Pengunjung Mampumengoprasikan

komputer dan dapat melakukan

browsing di internet.

3.1.5.2 Analisis Perangkat Keras

Analisis perangkat keras dimaksudkan untuk mengetahui spesifikasi

perangkat keras yang sedang digunakan di Unit Peternakan PT. DaFa Techno

Agro. Perangkat keras yang sedang digunakan di Unit Peternakan PT. DaFa

Techno Agro adalah sebagai berikut :

1. Pocessor dengan kecepatan 2.0 GHz + Motherboard

2. VGA card 512 MB

3. RAM 512 MB

62

4. Hard diskspace 120 GB terpasang

5. Monitor

6. Mouse

7. Keyboard

8. Internet menggunakan paket speedy Telkom

Berdasarkan analisis perangkat keras diatas, spesifikasi komputer yang ada

sangat mencukupi, akses internet di perusahaan juga berjalan cukup baik sehingga

bisa memudahkan dalam pengolahan database. dan printer standar untuk

mencetak laporan persediaan produk dan pejualan produk.

Sedangkan rekomendasi spesifikasi komputer untuk client agar dapat

menjalankan aplikasi ini adalah sebagai berikut :

1. Processor dengan kecepatan minimal 1 GHz+ Motherboard

2. Kapasitas Harddisk minimal 40 GB

3. RAMminimal 256 MB

4. VGACard minimal 64 MB

5. Monitor

6. Lan Card 10/100Mbps

7. Koneksi internet minimal 64kbps

8. Mouse

9. keyboard

3.1.5.3 Analisis Perangkat Lunak

Sistem Operasi yang digunakan di Unit Peternakan PT. DaFa Techno

Agro adalah Windows XP SP2 sehingga sudah sangat mencukupi untuk dapat

63

menjalankan perangkat lunak yang akan dibagun. Perangakat lunak yang

dibutuhkan dalam pembangunan aplikasi ini adalah :

1. XAMPP sebagai Web Server

2. PHP

3. Macromedia Dreamweaver 8 sebagai editor PHP.

4. MySQL sebagai DBMS

5. Tool antarmuka design Microsoft Visio 2007

6. Mozila Firefox/Flock sebagai browser

3.1.5.4 Analisis Jaringan

Aplikasi ini bekerja pada jaringan tingkat internet dimana komputer client dan

server terkoneksi dengan internet agar bisa saling berhubungan dengan jaringan

internet maka administrator dan user harus memiliki kontrak dengan provider

internet.

3.1.6 Analisis Basis Data

3.1.6.1 Entity relationshipdiagram

Dalam memodelkan data dan menggambarkan hubungan antara data yang

ada pada sistem digunakan alat bantu yaitu diagram E-R. Sistem yang akan di

bangun dapat dilihat hubungan antar entitas. Untuk itu sistem baru yang akan

dirancang memiliki usulan ERD yaitu:

64

TRANSPORTASIKATEGORI_TRANSPORTASI

ADMIN

HUBUNGI

TIPS

BUKUTAMU

BANNER

INFORMASI

T_PROVINSI T_KABKOTA

AGEN

PRODUK

KATEGORI

TEMP_PEMESANAN

Mempunyai1 N

Mengelola

N

1

Memiliki N1

Punya

1

N

Pembelian

N

N

Dimiliki

1

N

Simpan

N

1

Mengelola

Mengelola

Mengelola

Mengelola

Mengelola

Lakukan

Pengiriman

N

1

1

1

1

1

1

N

N

N

N

N

Mengelola

1

N

MilikN 1DETAIL_PRODUK

Nama_provinsi

Id_provinsi

Id_katransportasi

Jenis_transportasi

Id_provinsi

Id_kabkota

Nama_kabkota

Id_agen

Id_detailp

Id_produk

Id_produk

Id_temp

Nama_kategori

Id_kategori

Id_pembelian

Id_agen

Id_detailp

Id_katransportasi

Nomor_plat

produk

Id_hubungi

nama

nama

Id_detailp

Id_banner

judul

Id_informasi

Judul_informasi

Id_tips

Judul_tips

Id_bukutamu

nama

Mengelola

1

N

Gambar 3.3 ER Diagram

3.1.7 Analisis Fungsional

3.1.7.1 Diagram Konteks

Diagram Konteks adalah diagram yang menggambarkan secara umum

yang menjadi masukan, proses dan keluaran yang terjadi pada sebuah sistem.

Diagram konteks untuk perangkat lunak yang akan dibangun sebagai berikut :

65

Aplikasi

e-commerce

pada Unit Peternakan

PT. DaFa Techno Agro

Admin

Agen

Pengunjung

Data Agen

Data Aktivasi/Registrasi

Data Login Agen

Data Transaksi

Data Hubungi

Data Buku Tamu

Data Pembayaran

Info Registrasi

Info Data Aktivasi

Info Login Invalid

Info Data Produk

Info Data Informasi

Info Data Tips

Info Data Hubungi

Info Transaksi

Info Konfirmasi Pembayaran

Data Login

Data Produk

Data Agen

Data Informasi

DataTransaksi

Data Tips

Data Provinsi

Data Kota

Data Buku Tamu

Data Laporan

Data Hubungi

Info Data Login

Info Data Produk

Info Data Agen

Info Data Informasi

Info DataTransaksi

Info Data Pembayaran

Info Data Tips

Info Data Provinsi

Info Data Kota

Info Data Buku Tamu

Info Data Laporan

Info Data Hubungi

Info Data Aktivasi Agen

Info Data Hubungi

Info Data Buku Tamu

Info Data Informasi

Info Data Tips

Info Data Produk

Data Hubungi

Data Buku Tamu

Data Registrasi Agen

Paypal

Info pembayaran

Data Pembayaran

Web Mail

Konfirmasi pemesanan

Konfirmasi pembayaran

Konfirmasi Pengiriman

konfirmasi Registrasi

Status Registrasi

Gambar 3.4 Diagram Konteks

3.1.7.2 Data Flow Diagram

Data Flow Diagram merupakan suatu media yang digunakan untuk

menggambarkan aliran data yang mengalir pada suatu sistem informasi. DFD

Sistem informasi pemesanan dan penjualan yang diusulkan terdiri dari beberapa

bagian, berikut data flow diagram selengkapnya :

66

1. DFD Level 1

1.0

Proses

Registrasi

2.0

Proses

Login

4.0

Cari

Produk

7.0

Pengolahan

transaksi

6.0

Pengolahan

Keranjang

Belanja

5.0

Pengolahan Data

Master

8.0

Pengolahan

History 9

Pengolahan

Laporan

Agen AdminPengunjung

Produk Kategori

Provinsi

Kota

HubungiDetail_produk

Agen

Buku Tamu

InformasiTips

Admin

3.0

Pengolahan

Data User

Da

ta

Bu

ku

Ta

mu

Info

Bu

ku

Ta

mu

Da

ta In

form

asi

Info Informasi

Info Tips

Data Tips

Info ProvinsiData Provinsi

Data Kota

Info kota

Info

hu

bu

ng

i

Da

ta K

ate

go

ri

Info

Ka

teg

ori

Da

ta P

rod

uk

Info

Pro

du

k

Info

de

tail_

pro

du

k

Da

ta H

ub

un

gi

Login Admin Valid

In

fo L

og

in A

dm

in

Da

ta L

og

in

Info

Lo

gin

Ag

en

Lo

gin

Va

lid

Data Admin

Info AdminData Login

Data Login

Info

lo

gin

Ag

en

Info Login Admin Valid

Data login Admin

Data Admin

Info Data Admin

Data Agen

Info Data Agen

Da

ta A

ge

n

Info

Ag

en

Data Produk

Data Informasi

Data Tips

Data Provinsi

Data Kota

Data Kategori

Data Transportasi

Data Produk

Data Informasi

Data Tips

Data Provinsi

Data Kota

Data pembayaran

Data Kategori

Data Hubungi

Data transaksi

Data Agen

Data Transportasi

Da

ta R

eg

istr

asi A

ge

n

Info

re

gis

tra

si

Data

Registrasi Agen

Info Data Registrasi Agen

Da

ta P

rod

uk y

an

g d

i ca

ri

Info Produk

Data detail_produk

Da

ta D

eta

il

pe

mb

elia

n

Info

De

tail

pe

mb

elia

n

Info

Ke

ran

jan

g b

ela

nja

Da

ta K

era

nja

ng

be

lan

ja

Da

ta D

eta

il

pe

mb

elia

n Info

De

tail

pe

mb

elia

n

Info Laporan

Rekap Laporan

Re

qu

est D

ata

De

tail

pe

mb

elia

n

Info Detail pembelian

Data Detail pembelian

Info

His

tory

Re

qu

est D

ata

His

tori A

ge

n

Info

Ord

er

Request Data Produk

Info Data Produk

Request Data Produk

Info

Da

ta P

rod

uk

Info

De

tail_

pe

mb

elia

n

Re

qu

est

Da

ta H

isto

ry

Info

Da

ta H

isto

ry

banner

Info

ba

nn

er

Da

ta b

an

ne

r

Pembelian

Info pembelian

Info pembelian

Data pembelian

Info

pembelian

PaypalData

Pembayaran

Info

Pembayaran

10

Proses

Ubah data

Agen

Da

ta A

ge

n

Info

da

ta u

ba

h a

ge

n

Data AgenInfo Data Agen

Te

mp_

pe

mb

elia

n

Data temp

pembelianDe

tail_

tra

nsp

ort

asi

Info

tra

nsp

ort

asi

data_detail

transportasi

da

ta_d

eta

il

tra

nsp

ort

asi

transportasi

Data Transportasi

Da

ta tra

nsp

ort

asi

Info

tra

nsp

ort

asi

Detail_pembelian

Gambar 3.5 DFD Level 1

67

2. DFD Level 2 Proses 1.0 Proses Registrasi

Agen

1.1

Input Data

Registrasi

Pengunjung

1.2

Account

Activasi

Data Registrasi Agen

Info Data registrasi Agen

Data Registrasi Agen

Data Registrasi Agen

Data Registrasi Agen

Info Aktivasi account

Data Aktivasi account

Web Mail

Info Aktivasi

Da

ta A

ktiv

asi

Gambar 3.6 DFD level 2 Proses 1.0 Proses Registrasi

3. DFD Level 2 Proses 2.0 Proses Login

2.2

Verifikasi

Login

2.1

Input Data

Login

2.3

Lupa

Password

Admin Agen

AdminAgen

Data Login Admin Data Login Agen

Dat

a E

mai

l A

dm

in

Info

Pas

swo

rd B

aru

Info

Pas

swo

rd B

aru

Dat

a E

mai

l M

emb

er

Info Login Admin Info Login Agen

dat

a lo

gin

Info Data Valid

Cek Data Login Admin

Info Data Valid

Cek Data Login Agen

Lo

gin

Ad

min

Val

id

Lo

gin

Mem

ber

Val

id

Gambar 3.7 DFD Level 2 Proses 2.0 proses login

68

4. DFD Level 2 Proses 4.0 Cari Produk

4.1

Cari

Kategori

Agen 4.2

Cari

Produk

Info

kat

ago

ri

Info katagori

Dat

a k

atag

oti

Info

bar

ang

Data Kategori

Produkkategori

Pengunjung

Info Produk

Data Produk

Info Produk

Data Produk

Data Kategori

Info Kategori

Gambar 3.8 DFD Level 2 Proses 4.0 Cari Produk

5. DFD Level 2 Proses 5.0 Pengolahan Data Master

Banner

5.1

Pengolahan

Data Kategori

Admin

5.2

Pengolahan

Data Produk

ProvinsiKota

Tips

Informasi

Kategori

Hubungi

Produk

5.3

Pengolahan

Data Tips

5.5

Pengolahan

Data Kota

5.9

Pengolahan

Data Banner

5.7

Pengolahan

Data

Informasi

5.8

Pengolahan

Data Hubungi

5.6

Pengolahan

Data Provinsi

5.10

Pengolahan

Data Buku

Tamu

Buku Tamu

Info

In

form

asi

Data Informasi

Info Buku Tamu

Da

ta B

uku

Ta

mu

Da

ta H

ub

un

gi

Info

hu

bu

ng

i

Data Banner

Info Banner

Da

ta K

ate

go

ri

Info

Ka

teg

ori

Info Kota Da

ta K

ota

Info

Pro

du

k

Da

ta P

rod

uk

Da

ta P

rovin

si

Info Provinsi

Info Tips

Da

ta T

ips

Info Kategori

Da

ta K

ate

go

ri

Info

ProdukData

Produk

Da

ta T

ips

Info

Tip

s

Data Provinsi

Info Provinsi

Data

Banner

Info Banner

Da

ta H

ub

un

gi

Info

Hu

bu

ng

i

Da

ta

Bu

ku

Ta

mu

Info

Bu

ku

Ta

mu

Info

Info

rma

si

Da

ta

Info

rma

si

Info Kota

Data Kota

Info Kategori

Produk

Data Produk

5.10

Pengolahan

Data

transportasi

Data Transportasi

Info Transportasi

Transportasi

Data Transportasi

Info transportasi

Gambar 3.9 DFD Level 2 proses 5.0 pengolahan data master

69

6. DFD Level 2 Proses 7.0 Pengolahan Data Transaksi

Agen

7.2

Check out

Admin Info detail pembelian

Info detail pembelian

Da

ta p

em

esa

na

n

Temp_pemesanan

Agen Info Data Agen

Detail Pemesanan Info pembelian

Produk

Data detail pembelian Info pemesanan

Pembelian

Info

pe

mb

elia

n

7.3

Konfirmasi

pengiriman

7.4

pembayaran

Pembelian

Data Pengiriman

Info pengiriman

Info pengiriman

Data Pengiriman

Info Pembayaran

Data Pembelian

Info

Pe

mb

elia

n

Info Pembayaran

7.1

Keranjang

belanja

Info data detail pemesananData Detail Pemesanan

Web Mail Info pembayaranInfo Konfirmasi Pengiriman

Info

Pe

me

sa

na

n

Gambar 3.10 DFD Level 2 proses 7.0 Pengolahan data transaksi

7. DFD Level 2 Proses 9.0 Pengolahan Laporan

Pembelian

9.1

Pilih

Laporan

Admin9.2

Cetak

Laporan

Info Data Laporan

Data Laporan

Data Info Laporan Detail

Pemesanan

Data Laporan

Data Laporan

Data Laporan

Info Laporan

Info Laporan

Info Detail Pembelian

Info Pembelian

Gambar 3.11 DFD Level 2 proses 9.0 Pengolahan Laporan

70

8. DFD Level 3 Proses 5.1 Pengolahan Data Kategori

Admin5.1.2

Edit Kategori

5.1.1

Tambah

Kategori

Kategori

Info Kategori

Data Kategori

Info Kategori Info Kategori

Info Kategori

Data Kategori

Data Kategori

Data Kategori

Gambar 3.12 DFD Level 3 Proses 5.1 Pengolahan data kategori

9. DFD Level 3 Proses 5.2 Pengolahan Data Produk

Admin5.2.2

Edit Produk

5.2.1

Tambah

Produk

Produk

Info Produk

Data Produk

Info Produk Info Produk

Info Produk

Data Produk

Data Produk

Data Produk

Kategori

Data Kategori

Data Kategori

Gambar 3.13 DFD Level 3 Proses 5.2 pengolahan data produk

71

10. DFD Level 3 Proses 5.3 Pengolahan Data Tips

Admin

5.3.3

Hapus Tips

5.3.2

Edit Tips

5.3.1

Tambah Tips

Tips

Info Tips

Info Tips

Data Tips

Info Tips

Info Tips Info Tips

Data Tips

Info Tips

Data Tips

Data Tips

Data Tips

Data Tips

Gambar 3.14 DFD Level 3 Proses 5.3 pengolahan data tips

11. DFD Level 3 Proses 5.4 Pengolahan Data Kota

Admin5.4.2

Edit Kota

5.4.1

Tambah Kota

Kota

Info Kota

Data Kota

Info Kota Info Kota

Info Kota

Data Kota

Data Kota

Data Kota

Provinsi

Data Provinsi

Data Provinsi

Gambar 3.15 DFD Level 3 Proses 5.4 pengolahan data kota

72

12. DFD Level 3 Proses 5.5 Pengolahan Data Provinsi

Admin5.5.2

Edit Provinsi

5.5.1

Tambah

Provinsi

Provinsi

Info Provinsi

Data Provinsi

Info Provinsi Info Provinsi

Info Provinsi

Data Provinsi

Data Provinsi

Data Provinsi

Gambar 3.16 DFD Level 3 Proses 5.5 pengolahan data provinsi

13. DVD Level 3 Proses 5.6 Pengolahan Data Informasi

Admin

5.6.3

Hapus

Informasi

5.6.2

Edit Informasi

5.6.1

Tambah

Informasi

Informasi

Info Informasi

Info Informasi

Data Informasi

Info Informasi

Info Informasi Info Informasi

Data Informasi

Info Informasi

Data Informasi

Data Informasi

Data Informasi

Data Informasi

Gambar 3.17 DFD Level 3 Proses 5.6 pengolahan data informasi

73

14. DVD Level 3 Proses 5.7 Pengolahan Data Hubungi

Admin5.7.2

Hapus Hubungi

5.7.1

Tambah

Hubungi

Hubungi

Info Hubungi

Data Hubungi

Info Hubungi

Data Hubungi

Info Proses Hubungi

Data Hubungi

Data Hubungi

Agen

Pengunjung

Data Hubungi

Info Proses Hubungi

Gambar 3.18 DFD Level 3 Proses 5.7 pengolahan data hubungi

15. DVD Level 3 Proses 5.8 Pengolahan Data Banner

Admin

5.8.3

Hapus

Banner

5.8.2

Edit

Banner

5.8.1

Tambah

Banner

Banner

Info Banner

Info Banner

Data Banner

Info Banner

Info Banner Info Banner

Data Banner

Info Banner

Data Banner

Data Banner

Data Banner

Data Banner

Gambar 3.19 DFD Level 3 Proses 5.8 pengolahan data banner

74

16. DVD Level 3 Proses 5.9 Pengolahan Data Buku Tamu

Admin

5.9.2

Hapus

Buku

Tamu

5.9.1

Tambah

Buku

Tamu

Buku Tamu

Info Buku Tamu

Data Buku Tamu

Info Buku Tamu

Data Buku Tamu

Data Buku Tamu

Data Buku Tamu

Agen

Pengunjung

Data Buku Tamu

Info Proses Buku Tamu

Info Proses Buku Tamu

Gambar 3.20 DFD Level 3 Proses 5.9 pengolahan data buku tamu

17. DVD Level 3 Proses 5.10 Pengolahan Data Transportasi

Admin

5.10.2

Edit

Transportasi

5.10.1

Tambah

Transportasi

Transportasi

Info Transportasi

Data Transportasi

Info Transportasi Info Transportasi

Info Transportasi

Data Transportasi

Data Transportasi

Data Transportasi

Kategori_transportasi

Data Kategori_transportasi

Data Kategori_transportasi

Gambar 3.20 DFD Level 3 Proses 5.9 pengolahan data transportasi

75

3.1.7.3 Spesifikasi Proses

Spesifikasi proses digunakan untuk menggambarkan proses model aliran

yang terdapat pada DFD. Spesifikasi proses merupakan deskripsi dari setiap

elemen proses yang terdapat dalam program, yang meliputi nama proses, input,

output dan keterangan dari proses. Berikut ini spesifikasi proses dari aplikasi e-

commerce Unit peternakan PT. Dafa techno Agro:

Table 3.3 Spesifikasi Proses

No Proses Keterangan

1 No.Proses 1.0

Nama Registrasi

Source Pengunjung

Input Data registrasi

Output Info registrasi

Destination Pengunjung

Logika proses 1. Pengunjung Memasukkan data registrasi

pada form registrasi agen.

2. Apabila Pengisian form valid maka akan

menampilkan pesan data berhasil registrasi

dan informasi data telah dikirim ke email

untuk aktivasi

3. Apabila pengisian form invalid maka

menampilkan pesan data invalid

2 No.proses 1.0

Nama Proses Registrasi

Source Pengunjung

Input Data Registrasi

Output Info Registrasi

Destination Pengunjung

Logika proses 1. Pengunjung Memasukkan data registrasi

pada form registrasi agen.

2. Apabila Pengisian form valid maka akan

menampilkan pesan data berhasil registrasi

dan informasi data telah dikirim ke email

untuk aktivasi

3. Apabila pengisian form invalid maka

menampilkan pesan data invalid

3 No.proses 1.1

Nama Input Data Registrasi

Source Pengunjung

76

Input Data Registrasi

Output Info Aktivasi account

Destination Agen

Logika proses 1. Setelah pendaftaran berhasil, menampilkan

pesan pendaftaran berhasil,

2. Apabila aktivasi valid maka akan muncul

informasi valid dan Pengunjung

diperbolehkan untuk login.

4 No.proses 1.2

Nama Account Aktivasi

Source Pengunjung

Input Data Registrasi

Output Info Aktivasi account

Destination Agen

Logika proses 1. Setelah pendaftaran berhasil, menampilkan

pesan pendaftaran berhasil,

2. Info aktivasi terkirim ke email, dan

pengunjung klik link untuk aktivasi account

5 No.proses 2.1

Nama Input Data Login

Source Admin, Agen

Input Data login admin, Data login agen

Output Info login admin invalid, Login admin valid, Info

login agen invalid, Login agen valid

Destination Admini, Agen

Logika proses 1. Pengguna (Admin, Agen) mengisi data

login pada form login.

2. Apabila data login valid, sistem akan

menampilkan halaman akun sesuai dengan

akun pengguna.

1. Apabila data login invalid maka sistem akan

menampilkan pesan kesalahan, dan pengguna

diminta login kembali.

6 No.proses 2.2

Nama Verifikasi Login

Source Agen, Admin

Input Data login Agen dan Data loginAdmin, email agen

dan email admin

Output Info login

Destination Admin, Agen

Logika proses 1. Admin, Agen melakukan login

2. Sistem akan memverifikasi untuk

kesesuaian data

1. Sistem akan menampilkan data valid atau invalid

7 No.proses 2.3

77

Nama Lupa Password

Source Agen, Admin

Input Data Email

Output Password Baru

Destination Info Password

Logika proses 1. Pengguna (Admin, Agen) memilih menu

lupa password

2. Sistem akan menampilkan form lupa

password

3. Pengguna menginputkan email

1. Data password akan dikirim ke email

pengguna

8 No.proses 3.0

Nama Pengolahan Data User

Source Agen, Admin

Input Data Agen, Data Admin

Output Info Data Admin, Info Data Agen

Destination Admin, Agen

Logika proses 1. Tampilkan info valid ke user

2. Tampilkan info tidak valid ke user.

9 No.proses 4.1

Nama Cari Kategori

Source Pengunjung, agen

Input Produk yang dicari berdasarkan kategori

Output Info data produk yang dicari

Destination Agen, pengunjung

Logika proses 1. User masukkan data yang ingin dicari

2. Apabila data ditemukan, tampilkan data

yang dicari

3. Apabila data tidak ditemukan, tampilkan

pesan data tidak ditemukan

10 No.proses 4.2

Nama Cari Produk

Source Pengunjung, agen

Input Produk yang dicari

Output Info data produk yang dicari

Destination Agen, pengunjung

Logika proses 1. User masukkan produk yang dicari

2. Apabila produk yang dicari ditemukan,

tampilkan produk yang dicari

3. Apabila tidak ditemukan, tampilkan pesan

produk yang dicari tidak ditemukan.

11 No.proses 5.0

Nama Pengolahan Data Master

Source Admin

78

Input Data informasi, data tips, data kategori, data

hubungi, data buku tamu, data benner, data kota,

data provinsi, data produk

Output Info informasi, info data tips, info data kategori,

info data hubungi, info data buku tamu, info data

benner, info data kota, info data provinsi, info data

produk.

Destination Admin

Logika proses 1. Admin memilih menu data master

2. Sistem akan menampilkan menu data master

seperti : banner, informasi, buku tamu,

produk, transaksi, kota, provinsi, laporan.

3. Admin kemudian mengolah data master

tersebut.

12 No.proses 5.1

Nama Pengolahan Data Kategori

Source Admin

Input Data kategori

Output Info data kategori

Destination Admin

Logika proses 1. Admin mengolah data kategori, apabila

admin memasukkan data kategori, jika

sudah ada didatabase tampilkan pesan

kategori sudah ada, jika tidak maka

masukkan kedalam database.

2. Mengubah data kategori, jika sudah ada

didatabase tampilkan pesan kategori sudah

ada, jika tidak maka masukkan kedalam

database.

3. Menghapus data kategori, tampilkan pesan

konfirmasi penghapusan data, jika yam aka

data dihapus dari database, jika tidak maka

kembali ke halaman kategori.

13 No.proses 5.2

Nama Pengolahan Data Produk

Source Admin

Input Data Produk

Output Info data Produk

Destination Admin

Logika proses 1. Admin mengolah data produk, apabila

admin memasukkan data produk, jika sudah

ada didatabase tampilkan pesan produk

sudah ada, jika tidak maka masukkan

kedalam database.

2. Mengubah data produk, jika sudah ada

79

didatabase tampilkan pesan produk sudah

ada, jika tidak maka masukkan kedalam

database.

3. Menghapus data produk, tampilkan pesan

konfirmasi penghapusan data, jika yam aka

data dihapus dari database, jika tidak maka

kembali ke halaman produk.

14 No.proses 5.3

Nama Pengolahan Data Tips

Source Admin

Input Data data Tips

Output Info data Tips

Destination Admin

Logika proses 1. Admin mengolah data tips, ketika admin

memasukkan data tips, tampilkan pesan,

data berhasil ditambah ke databases.

2. Mengubah data tips, tampilkan data tips

yang akan di ubah, kemudian admin

mengubah data tips kemudian simpan dan

data masuk kedatabase.

3. Menghapus data tips, tampilkan pesan

konfirmasi penghapusan data, jika ya aka

data dihapus dari database, jika tidak maka

kembali ke halaman tips.

15 No.proses 5.4

Nama Pengolahan Data Kota

Source Admin

Input Data Kota

Output Info data Kota

Destination Admin

Logika proses 1. Admin mengolah data kota, ketikan

memasukkan data kota, jika sudah ada

didatabase tampilkan pesan kota sudah ada,

jika tidak maka masukkan kedalam

database.

2. Mengubah data kota, jika sudah ada

didatabase tampilkan pesan kota sudah ada,

jika tidak maka masukkan kedalam

database.

16 No.proses 5.5

Nama Pengolahan Data Provinsi

Source Admin

Input Data Provinsi

Output Info data provinsi

Destination Admin

80

Logika proses 1. Admin mengolah data provinsi, ketika

admin memasukkan data kota, jika sudah

ada didatabase tampilkan pesan kota sudah

ada, jika tidak maka masukkan kedalam

database.

2. Mengubah data kota, jika sudah ada

didatabase tampilkan pesan kota sudah ada,

jika tidak maka masukkan kedalam

database.

17 No.proses 5.6

Nama Pengolahan Data Informasi

Source Admin

Input Data Informasi

Output Info data Informasi

Destination Admin

Logika proses 1. Admin mengolah data informasi, apabila

admin memasukkan data informasi,

tampilkan pesan, data berhasil ditambah ke

databases.

2. Mengubah data informasi, tampilkan data

informasi yang akan di ubah, kemudian

admin mengubah data informasi kemudian

simpan dan data masuk kedatabase.

3. Menghapus data informasi, tampilkan pesan

konfirmasi penghapusan data, jika ya aka

data dihapus dari database, jika tidak maka

kembali ke halaman informasi.

18 No.proses 5.7

Nama Pengolahan Data Banner

Source Admin

Input Data Banner

Output Info data banner

Destination Admin

Logika proses 1. Admin mengolah data banner, apabila

admin memasukkan data banner, tampilkan

pesan, data berhasil ditambah ke databases.

2. Mengubah data banner, tampilkan data

banner yang akan di ubah, kemudian admin

mengubah data banner kemudian simpan

dan data masuk kedatabase.

3. Menghapus data banner, tampilkan pesan

konfirmasi penghapusan data, jika ya aka

data dihapus dari database, jika tidak maka

kembali ke halaman banner.

19 No.proses 5.8.1

81

Nama Tambah Data Hubungi

Source Agen

Input Data hubungi

Output Info data Hubungi

Destination Agen, pengunjung

Logika proses 1. Agen, pengunjung menambah data hubungi

pada form hubungi,

2. Agen, pengunjung mengirim data hubungi

kedalam database.

20 No.proses 5.8.2

Nama Hapus Data Hubungi

Source Admin

Input Data Hubungi yang ingin dihapus

Output Info data Hubungi terhapus

Destination Admin

Logika proses 1. Admin menghapus data hubungi, muncul

pesan, apakah data ingin dihapus, jika ya,

data akan dihapus dari database, jika tidak

maka data tidak akan dihapus dari database.

21 No.proses 5.9.1

Nama Tambah Data Buku Tamu

Source Agen

Input Data Buku Tamu

Output Info data Buku Tamu

Destination Agen, pengunjung

Logika proses 1. Agen, Pengunjung mengisi form buku tamu,

2. Apabila Agen, pengunjung telah selesai

mengisi form buku tamu, kemudian

mengirim data buku tamu

3. Data buku tamu tersimpan kedalam

database.

22 No.proses 5.9.2

Nama Hapus Data Buku Tamu

Source Admin

Input Data Buku Tamu yang ingin dihapus

Output Info data Buku Tamu terhapus

Destination Admin

Logika proses 1. Admin menghapus buku tamu, kemudian

muncul pesan, apakah data ingin dihapus,

jika tidak kembali ke halaman buku tamu

dan data tidak dihapus dari database, jika

yam aka data dihapus dari databases.

23 No.proses 5.10.1

Nama Tambah Data Transportasi

Source Admin

82

Input Data Transportasi yang ingin ditambah

Output Info Data Transportasi

Destination Admin

Logika proses 1. Agen, Pengunjung mengisi form buku tamu,

2. Apabila Agen, pengunjung telah selesai

mengisi form buku tamu, kemudian

mengirim data buku tamu

3. Data buku tamu tersimpan kedalam database

24 No.proses 5.10.2

Nama Edit Data Buku Tamu

Source Admin

Input Data Buku Tamu yang ingin diedit

Output Info data Buku Tamu

Destination Admin

Logika proses 1. Admin memilih data yang ingin diedit

2. mengedit data Transportasi,

3. apabila data selesai di edit maka data

disimpan kedalam database.

25 No.proses 6.0

Nama Keranjang Belanja

Source Agen

Input Data Produk yang Dipesan

Output Info Produk

Destination Agen

Logika proses 1. Pemesan memilih menu pemesanan atau

keranjang belanja

2. Sistem akan menampilkan data barang yang

telah dipesan dan data keranjang belanja

3. Sistem akan menampilkan detail pesanan

barang yang telah dipesan dan keranjang

belanja

26 No.proses 7.0

Nama Pengolahan Transaksi

Source Agen

Input Data Detail Produk

Output Info Pembelian

Destination Agen

Logika proses Begin

Input (data Detail Pembelian)

End

27 No.proses 7.1

Nama Data Keranjang Belanja

Source Agen

Input Request Isi keranjang belanja

Output Info keranjang belanja

83

Destination Agen

Logika proses 1. Agen memilih menu untuk melihat data

keranjang belanja

2. Apabila keranjang belanja kosong,

Menampilkan pesan keranjang belanja

kosong dan lanjut belanja

3. Apabila keranjang belanja sudah terisi,

tampilkan isi keranjang belanja, dan lanjut

belanja atau checkout.

28 No.proses 7.2

Nama Check Out

Source Agen

Input Data Pembelian

Output Info Pembelian

Destination Agen

Logika proses 1. Agen melakukan checkout, kemudian

menampilkan data pembelian

2. Apabila setuju tekan ok, jika tidak maka

tekan tombol batal.

29 No.proses 7.3

Nama Konfirmasi Data Pengiriman

Source Agen

Input Data Pengiriman

Output Info Pengiriman

Destination Agen

Logika proses 1. Agen melakukan konfirmasi data

pengiriman

2. Apabila setuju maka tekan tombol ok, jika

tidak maka ubah data pengiriman barang.

30 No.proses 7.4

Nama Pembayaran

Source Agen

Input Data Pembayaran

Output Info Pembayaran

Destination Agen

Logika proses 1. Agen memilih jenis pembayaran

2. Apabila pilihan dengan menggunakan

paypal maka akan dibawa link ke paypal

3. Apabila memilih pembayaran dengan

rekening, maka menampilkan form

pembayaran dengan rekening

4. Jika pembayaran berhasil dilakukan, status

berubah menjadi lunas.

31 No.proses 8.0

Nama History

84

Source Agen

Input Request history

Output Info data detail pembelian, Info data pembelian

Destination Agen

Logika proses 1. Agen melihat data history

2. Apabila belum melakukan pembayaran

maka agen dapat memilih menu detail untuk

melakukan pembayaran.

3. Apabila agen sudah melakukan pembayaran,

agen hanya melihat daftar transaksi yang

pernah dilakukan.

32 No.proses 9.0

Nama Laporan

Source Admin

Input Request data laporan

Output Info data laporan

Destination Admin

Logika proses 1. Admin memilih menu laporan,

2. Menampilkan menu laporan

33 No.proses 9.1

Nama Pilih Laporan

Source Admin

Input Request data laporan

Output Info data laporan

Destination Admin

Logika proses 1. Admin memilih laporan yang akan lilihat

2. Menampilkan laporan yang akan dilihat

3. Apabila pilihan laporan produk, maka admin

memilih produk berdasarkan kategori untuk

dilihat

4. Apabila admin memilih menu laporan

penjualan, maka pilih jenis laporan

penjualan berdasarkan harian, bulanan,

tahunan.

5. Tampilkan laporan.

34 No.proses 9.2

Nama Cetak Laporan

Source Admin

Input Request data laporan

Output Info data laporan

Destination Admin

Logika proses 1. Admin memilih laporan yang akan di cetak

2. Tampilkan laporan dalam bentuk pdf.

35 No.proses 10.0

Nama Proses Ubah Data Agen

85

Source Agen

Input Request Data Agen

Output Info data Agen Yang telah diubah

Destination Agen

Logika proses 1. User(Agen , Admin) memilih data yang

akan dirubah,

2. Apabila data valid maka data agen akan

dirubah dari database.

3. Apabila tidak valid, maka akan

menampilkan data tidak valid.

3.1.7.4 Kamus Data

Kamus data merupakan deskripsi formal mengenai seluruh elemen yang

tercakup dalam DFD. Kamus data juga merupakan sebuah daftar yang tersusun

dari elemen data yang berhubungan dengan sistem.

Kamus data atau data dictionary adalah katalog data tentang fakta dan

kebutuhan-kebutuhan informasi dari suatu sistem informasi. Dengan

menggunakan kamus data, analisis sistem dapat mengidentifikasikan data yang

mengalir dalam sistem yang lengkap. Kamus data dibuat berdasarkan arus data

yang ada dalam data flow diagram (DFD). Arus data yang ada dalam data flow

diagram (DFD) sifatnya adalah global, hanya ditunjukkan arus datanya saja.

Untuk lebih jelas dapat dilihat pada tabel berikut :

Table 3.4 Kamus Data

No Kamus Keterangan

1. Nama aliran data Data registrasi

Where used/ how used Pengunjung - proses 1.0

Proses 1.0 - Data registrasi

Deskripsi Data ini merupakan data registrasi

86

untuk menjadi agen baru.

Struktur data id_agen + nama + status + password

+ email + telepon + alamat +

id_kabkota + kodepos +

tgl_registrasi

Id_agen

nama

Status

Password

Email

telepon

Alamat

Id_kabkota

kodepos

tgl_registrasi

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[0-9]

[A-Z|a-z|0-9]

[0-9]

[0-9]

[0-9]

2. Nama aliran data Data login agen

Where used/ how used Agen – proses 2.0

Proses 2.0 – Data login Agen

Deskripsi Data ini merupakan data login agen

agar dapat mengakses website

Struktur data username + password

email

password

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

87

3. Nama aliran data Data login admin

Where used/ how used Admin – proses 2.0

Proses 2.0 – Data login admin

Deskripsi Data ini merupakan data login

admin agar dapat mengakses

website.

Struktur data username + password

email

password

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

4. Nama aliran data Data produk

Where used/ how used Agen – proses 4.0

Admin – proses 5.2

Agen – proses 6.0

Proses 4.0 – Data produk

Proses 5.2 – Data produk

Proses 6.0 – Data Produk

Deskripsi Data ini merupakan data ketika

admin akan mengelola data produk

dan agen dapat melihat tampilan

katalog produk. Dalam pencarian

dan proses pengisian keranjang

belanja, data produk juga digunakan

untuk memperoleh info produk.

88

Struktur data Id_produk + Id_kategori + produk +

detail + diskon + harga + stok +

berat + tgl_input + gambar

Id_produk

Id_kategori

Produk

Detail

Diskon

Harga

Stok

Berat

Tgl_input

Gambar

Dibeli

[0-9]

[0-9]

[A-Z|a-z|]

[A-Z|a-z|]

[0-9]

[0-9]

[0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[0-9]

5. Nama aliran data Data kategori

Where used/ how used Agen – proses 4.0

Admin – proses 5.2

Proses 4.0 – Data kategori

Proses 5.2 – Data kategori

Deskripsi Data ini merupakan data ketika

admin akan mengelola data kategori,

dan ketika agen melakukan

pencarian produk berdasarkan

kategori.

89

Struktur data Id_kategori + nama_kategori

Id_kategori

nama_kategori

[0-9]

[A-Z|a-z|0-9]

6. Nama aliran data Data Provinsi

Where used/ how used Admin – Proses 5.4

Agen – Proses 7.2

Proses 5.4 – Data Provinsi

Proses 7.2 – Data Provinsi

Deskripsi Berisi data provinsi

Struktur data Id_provinsi + nama_provinsi

id_provinsi

nama_provinsi

[0-9]

[A-Z|a-z|]

7. Nama aliran data Data Kota

Where used/ how used Admin – Proses 5.4

Agen – Proses 7.2

Proses 5.4 – Data kota

Proses 7.2 – Data kota

Deskripsi Data ini merupakan data ketika

admin akan mengelola data kota.

Dan pada saat pengolahan data

transaksi.

Struktur data Id_kabkota + id_provinsi +

nama_kota + kabkota + ongkos

90

id_kabkota

id_provinsi

nama_kota

kabkota

ongkos

[0-9]

[0-9]

[A-Z|a-z]

[A-Z|a-z|0-9]

[0-9]

8. Nama aliran data Data hubungi

Where used/ how used Admin – proses 5.8.2

Agen – proses 5.8.1

Proses 5.8.2 – Data hubungi

Proses 5.8.1 – Data hubungi

Deskripsi Data ini merupakan informasi ketika

admin mengelola data hubungi, agen

memasukkan data hubungi.

Struktur data Id_hubungi + Nama + Email +

Subjek

+ Pesan + Tanggal

Id_hubungi

Nama

Email

Subjek

Pesan

Tanggal

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9|]

[0-9]

9. Nama aliran data Data pembelian

Where used/ how used Admin – proses 7.0

91

Agen – proses 7.1

Agen, Admin – proses 8.0

Admin – proses 9.0

Proses 7.2 – data check out

Proses 7.4 – Data pembayaran,

Proses 8.0 – Data pembelian

Proses 9.0 – Data pembelian

Deskripsi Data ini merupakan data ketika

admin akan mengelola data

pembelian, dan agen melakukan

pembelian barang.

Struktur data Id_pembelian + Id_admin +

Id_agen + Session_id + Tgl_beli +

Tgl_bayar + status + pembayaran +

Kirim_nama + Kirim_alamat +

Kirim_telp + Kirim_kota +

Kirim_kodepos + Kirim_ongkos +

Transfer_bank + Transfer_rekening

+ Transfer_jumlah + Transfer_tgl +

Penerima_bank +

Penerima_rekening + totalbayar

Id_pembelian

Id_admin

Id_agen

Session_id

Tgl_beli

Tgl_bayar

[0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|]

[A-Z|a-z|0-9]

92

status

pembayaran

Kirim_nama

Kirim_alamat

Kirim_telp

Kirim_kota

Kirim_kodepos

Kirim_ongkos

Transfer_bank

Transfer_rekening

Transfer_jumlah

Transfer_tgl

Penerima_bank

Penerima_rekening

totalbayar

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[0-9]

[A-Z|a-z|0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[0-9]

10. Nama aliran data Data detail pembelian

Where used/ how used Admin – proses 7.0

Agen – proses 7.1

Admin – proses 8.0

Admin – proses 9.0

Proses 7.2 – Data detail pembelian

Proses 7.4 – Data detail pembelian

Proses 8.0 – Data pembelian

93

Proses 9.0 – Data pembelian

Deskripsi Data ini merupakan informasi ketika

admin mengelola data detail

Pembelian produk.

Struktur data Id_detailbeli + Id_pembelian +

Id_produk + Hargabeli + Rasa +

Qty + Diskon

Id_detailbeli

Id_pembelian

Id_produk

Hargabeli

Rasa

Qty

Diskon

[0-9]

[0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[0-9]

[0-9]

3.1.7.5 Perancangan Basis Data

Perancangan basis data adalah menciptakan atau merancang kumpulan

data yang terhubung dan tersimpan secara bersama-sama.

3.2 Perancangan Sistem

3.2.1 Skema Relasi

Skema relasi menggambarkan hubungan antar data, arti data dan

batasannya dijelaskan dengan baris dan kolom. Skema relasi ini sudah mengalami

tahap normalisasi seperti yang terdapat pada gambar berikut ini.

94

Admins

PK id_admin

username

password

email

verifikasi

Bukutamu

PK id_bukutamu

FK1 id_admin

nama

email

komentar

Informasi

PK id_informasi

judul_informasi

isi_informasi

Gambar

tgl

FK2 id_admin

tips

PK id_tips

FK1 id_admin

judul_tips

isi_tips

gambar

tgl

Hubungi

PK id_hubungi

FK1 id_admin

nama

email

subjek

pesan

tanggal

banner

PK id_banner

judul

url

gambar

FK1 id_admin

temp_pemesanan

PK id_temp

FK1 id_produk

session_id

jumlah

tgl_pesan

temp_hargadiskon

stok_temp

temp_size

pembelian

PK id_pembelian

FK3 id_agen

FK1 id_produk

FK4 id_detailproduk

FK2 id_admin

session_id

tgl_beli

tgl_bayar

status

pembayaran

kirim_nama

kirim_alamat

kirim_telp

kirim_kota

kirim_kodepos

kirim_ongkos

transfer_bank

transfer_rekening

transfer_jumlah

transfer_tgl

penerima_bank

penerima_rekening

totalbayar

detail_pembelian

PK id_detailbeli

FK1 id_produk

hargabeli

rasa

qty

diskon

agen

PK id_agen

nama

status

username

password

email

telepon

alamat

FK1 id_kabkota

kodepos

tgl_registrasi

produk

PK id_produk

FK2 id_kategori

produk

detail

harga

stok

berat

tgl_input

image

dibeli

FK1 id_temp

detail_produk

PK id_detailproduk

FK1 id_produk

stok

rasa

kategori

PK id_kategori

FK1 id_admin

kategori

kategori_transportasi

PK id_katransportasi

jenis_transportasi

FK1 id_transportasi

transportasi

PK id_transportasi

id_katransportasi

nomor_plat

status

FK1 id_admin

t_provinsi

PK id_provinsi

nama_provinsi

t_kabkota

PK id_kabkota

FK1 id_provinsi

kabkota

ongkos

Gambar 3.21 Skema Relasi

3.2.2 Perancangan Struktur Tabel

Tabel-tabel yang terdapat dalam basis data yang digunakan dalam

pembangunan aplikasi e-commerce di aplikasi e-commerce Unit peternakan PT.

Dafa techno adalah sebagai berikut:

95

1. Tabel Admin

Tabel 3.5 Tabel Admin

Nama Tabel : admin

Primarykey : id_admin,username, password

Nama Field Tipe Data Kunci Keterangan

Id_admin Int(11) prymerikey Not null

Username Varchar(50) Prymerikey Not null

Password Varchar(50) Prymerikey Not null

Email Varchar(50) Unique, Not null

verifikation Varbinary(40) Not null

2. Tabel Agen

Tabel 3.6 Tabel Agen

Nama Tabel : agen

Primarykey : id_agen

Nama Field Tipe Data Kunci Keterangan

Id_agen Int(11) Primarykey Not null

Nama Varchar(100) Not null

password Varchar(20) Not null

Email Varchar(20) Unique, Not null

Alamat Text Not null

Telpon Varchar(20) Not null

96

Tabel 3.6 Tabel Agen(lanjutan)

Nama Tabel : agen

Primarykey : id_agen

Id_provinsi Int(11) FK, reference

tabel

provinsi(id_pr

ovinsi)

Not null

Id_kabkota Int(11) FK, reference

tabel

kota(id_kota)

Not null

Tgl_registrasi Date time Not null

Status Int(11) Not null

3. Tabel Pembelian

Tabel 3.7 Tabel Pembelian

Nama Tabel : pembelian

Primarykey : id_pembelian

Nama Field Tipe Data kunci Keterangan

Id_pembelian Int(11) Prymerikey Not null

Session_id Varchar(32) Not null

Status Enum Not null

Pembayaran Enum Not null

97

Tabel 3.7 Tabel Pembelian (lanjutan)

Nama Tabel : pembelian

Primarykey : id_pembelian

Id_agen Int(11) FK, preference to

table agen

Not null

Tgl_beli Date time Not null

Tgl_bayar Date time Not null

Kirim_nama Varchar (50) Not null

Kirim_alamat Varchar(text) Not null

Kirim_telepon Int(11) Not null

Kirim_kota Int(11) Not null

Kirim_kodepos Int(11) Not null

Kirim_ongkos Int(32) Not null

Jenis_kurier Varchar(15) Not null

Transfer_bank Varchar(15) Not null

Transfer_rekening Varchar(30) Not null

Transfer_jumlah Int(32) Not null

Transfer_tgl Date Not null

Penerima_bank Varchar(15) Not null

Penerima_rekening Varchar(30) Not null

Totalbayar Int(32) Not null

Id_admin Int(11) Foreignkey

preference to table

admin

Nut null

98

4. Tabel detail pembelian

Tabel 3.8 Tabel detail pembelian

Nama Tabel : detail_pembelian

Primarykey : id_detailpembelian

Nama Field Tipe Data Kunci Keterangan

Id_pembelian Int(11) primerykey Not null

Id_produk Int(11) FK reference tabel

produk(id_produk

)

Not null

Id_pembelian Int(11) FK reference tabel

pembelian(id_pem

belian)

Not null

Hargabeli Int(11) Not null

Rasa Varchar(20) Not null

Qty Int(11) Not null

Diskon Int(11) Not null

5. Tabel temp pemesanan

Tabel 3.9 Tabel temp_pemesanan

Nama Tabel : temp_pemesanan

Primarykey : id_temp

Nama Field Tipe Data Kunci Keterangan

Id_temp Int(11) primarykey Not null

99

Tabel 3.9 Tabel temp_pemesanan(lanjutan)

Nama Tabel : temp_pemesanan

Primarykey : id_temp

Id_produk Int(11) FK reference

tabel

produk(idprodu

k)

Not null

Session_id Varchar(32) Not null

Temp_size Varchar (9) Not null

Temp_hargadiskon Int(20) Not null

Tgl_pesan Date Not null

6. Tebel Produk

Tabel 3.10 Tabel Produk

Nama Tabel : produk

Primarykey : id_produk

Nama Field Tipe Data Kunci Keterangan

id_produk Int(11) Primarykey Not null

Id_kategori Int(11) FK reference

tabel

kategori(id_kateg

ori)

Not null

Produk Varchar(30) Not null

Detail Text Not null

100

Tabel3.10 Tabel Produk(lanjutan)

Nama Tabel : produk

Primarykey : id_produk

Harga Int(20) Not null

Berat Decimal(5,2) Not null

Tgl_input Date Not null

Image Varchar(100) Not null

Dibeli Int(11) Not null

7. Tabel Hubungi

Tabel 3.11 Tabel Hubungi

Nama Tabel : hubungi

Primarykey : id_hubungi

Nama Field Tipe Data Kunci Keterangan

Id_hubungi Int(5) Primarykey Not null

Nama Varchar(50) Not null

Email Varchar(100) Unique, Not

null

Subjek Varchar(100) Not null

Pesan Text Not null

Tanggal Date Not null

Id_admin Int(11) Foreignkey

preference to table

admin

Nut null

101

8. Tabel Kategori

Tabel 3.12 Tabel kategori

Nama Tabel : kategori

Primarykey : id_kategori

Nama Field Tipe Data Ukuran Keterangan

Id_kategori Int(5) Primarykey Not null

Nama_kategori Varchar(100) Not null

9. Tabel Informasi

Tabel 3.13 Tabel Informasi

Nama Tabel : informasi

Primarykey : id_informasi

Nama Field Tipe Data Ukuran Keterangan

Id_informasi Int(11) Primarykey Not null

Judul_informasi Varchar(50) Not null

Isi Text Not null

Tgl Date Not null

Id_admin Int(11) Foreignkey

preference to table

admin

Nut null

102

10. Tabel Tips

Tabel 3.14 Tabel Tips

Nama Tabel : tips

Primarykey : id_tips

Nama Field Tipe Data Kunci Keterangan

Id_tips Int(11) Primarykey Not null

judul Varchar(50) Not null

Isi Text Not null

Gambar Varchar(50) Not null

Tgl Date Not null

Id_admin Int(11) Foreignkey

preference to

table admin

Nut null

11. Tabel Provinsi

Tabel 3.15 Tabel Provinsi

Nama Tabel : provinsi

Primarykey : id_provinsi

Nama Field Tipe Data Ukuran Keterangan

Id_provinsi Int(11) Not null

Nama_provinsi Varchar(100) Not null

103

12. Tabel Kota

Tabel 3.16 Tabel kota

Nama Tabel : kota

Primarykey : id_kota

Nama Field Tipe Data Kunci Keterangan

Id_kabkota Int(11) Primarykey Not Null

Nama_kota Varchar(100) Not Null

Ongkos Int(11) Not Null

Id_provinsi Int(11) FK, reference tabel

provinsi(id_provin

si)

Not Null

13. Tabel detail Produk

Tabel 3.17 Tabel detail produk

Nama Tabel : detail_produk

Primarykey : id_detailproduk

Nama Field Tipe Data Kunci Keterangan

Id_detailproduk Int(11) Primarykey Not Null

Id_produk Int(11) FK, reference

tabel

provinsi(id_provi

nsi)

Not Null

Stok Int(11) Not Null

Rasa Varchar(20) Not Null

104

14. Tabel Banner

Tabel 3.18 Tabel Banner

Nama Tabel : banner

Primarykey : id_banner

Nama Field Tipe Data Kunci Keterangan

Id_banner Int(11) Primarykey Not Null

Judul Varchar(100) Not Null

url Varchar(100) Not Null

Gambar Varchar(100) Not null

Tgl_posting Date Not Null

Id_admin Int(11) Foreignkey

preference to table

admin

Nut null

15. Tabel Buku Tamu

Tabel 3.29 Tabel Buku Tamu

Nama Tabel : bukutamu

Primarykey : id_bukutamu

Nama Field Tipe Data Kunci Keterangan

Id_bukutamu Int(11) Primarykey Not Null

nama Varchar(100) Not Null

email Varchar(100) Unique, Not

Null

alamat Varchar(100) Not Null

Komentar Text Not Null

105

Tabel 3.29 Tabel Bukutamu(lanjutan)

Nama Tabel : bukutamu

Primarykey : id_bukutamu

Id_admin Int(11) Foreignkey

preference to table

admin

Nut null

16. Tabel Kategori Transportasi

Tabel 3.30 Tabel Kategori Transportasi

Nama Tabel : kategori_transportasi

Primarykey : id_katransportasi

Nama Field Tipe Data Kunci Keterangan

Id_transportasi Int(11) Primarykey Not Null

Id_admin Int(11) Foreignkey

preference to table

admin

Not Null

Jenis_transportasi Varchar(20) Not null

17. Tabel Tranportasi

Tabel 3.31 Tabel transportasi

Nama Tabel : transportasi

Primarykey : nomor_plat

Nama Field Tipe Data Kunci Keterangan

Nomor_plat Int(11) Primarykey Not Null

Id_katransportasi Int(11) Foreignkey

preference to table

transportasi

Not Null

106

Tabel 3.31 Tabel Transportasi(lanjutan)

Nama Tabel : transportasi

Primarykey : nomor_plat

Status Enum(beroperasi,

tidak beroperasi)

Not null

3.2.3 Perancangan Struktur Menu

1. Perancangan Struktur Menu Pengunjung

Menu Utama

Beranda Produk Registrasi Profil Hubungi Buku Tamu Informasi Tips Cara Belanja Login

LoginLupa

Password

Gambar 3. 22 Perancangan struktur menu pengunjung

2. Perancangan Struktur Menu Agen

Login

Beranda Produk Profil HubungiBuku

TamuInformasi Tips Cara Belanja Agen Logout

Lihat HistoryUbah Profil

Home

Lupa Password

Gambar 3.23 Perancangan struktur menu Agen

107

3. Perancangan Struktur Menu Admin

Menu Utama

Beranda

Admin

Kategori

Produk

Agen

Provinsi

Kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Banner

Logout

Laporan

Transportasi

Backup Data

Restore

Kategori

Transportasi

Gambar 3.24 Perancangan struktur menu admin

3.2.4 Perancangan Antar Muka

Interface atau antar muka merupakan tampilan dari suau program aplikasi

yang berperan sebagai media komunikasi yang digunakan sebagai sarana

berdialog antara program dengan user. Sistem yang akan dibangun diharapkan

menyediakan interface yang mudah dipahami dan digunakan oleh user.

Perancangan interface untuk aplikasi E-Commerce unit peternakan PT Dafa

techno Agro adalah sebagai berikut :

108

3.2.4.1 Perancangan Antar Muka Pengunjung

1. Perancangan Antamuka Menu Utama (Beranda)

Berikut dapat dilihat perancangan antar muka menu utama (beranda) dari

pembangunan aplikasi e-commerce unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P01 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Darul Fallah Unit Peternakan

Slide Show Image

Pencarian

Cari

Produk Terbaru Kami

Image1

Image2

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

Kalender

--------------------------------

--------------------------------

--------------------------------

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Produk Paling Laku

Slide Gambar

Gambar 3.25 Perancangan Antarmuka Menu Utama (beranda)

109

2. Perancangan Antarmuka Menu Produk

Berikut dapat dilihat perancangan antarmuka menu Produk dari

pembangunan aplikasi e-commerce unit peternakan PT.dafa techno Agro yang

tercantum pada dibawah ini:

LOGO PRODUK DAFA

P02 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P011

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Koleksi Produk Dafa Unit Peternakan

Image1

Image2

Image3

Image4

---- Baca detail

---- Baca detail

---- Baca detail

---- Baca detail

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.26 Perancangan Antarmuka Menu Produk

110

3. Perancangan Antarmuka Registrasi

Berikut dapat dilihat perancangan antarmuka menu Registrasi dari

pembangunan aplikasi e-commerce unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P03 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Form Pendaftaran Agen

Nama Perusahaan

Alamat Perusahaan

Telpon Perusahaan

Email Perusahaan

Password

Konfirmasi Password

Provinsi

Kota

Kode Captcha

Refresh Captcha

Register

Kode captcha

Kode Post

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah :-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.27 Perancangan Antarmuka Menu Registrasi

111

4. Perancangan Antarmuka Menu Profil

Berikut dapat dilihat perancangan antarmuka menu Profil dari

pembangunan aplikasi e-commerce unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P04 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Tentang Darul Fallah Unit Peternakan

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.28 Perancangan Antarmuka Menu Profil

112

5. Perancangan Antarmuka Menu Hubungi

Berikut dapat dilihat perancangan antarmuka menu Hubungi dari

pembangunan aplikasi e-commerce unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P05 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Hubungi Kami

Nama

Email

Kode Captcha

Refresh

Captcha

Kirim

Kode captcha

Komentar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Best Seler

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.29 Perancangan Antarmuka Menu Hubungi

113

6. Perancangan Antarmuka Menu Buku Tamu

Berikut dapat dilihat perancangan antarmuka menu Buku tamu dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P06 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Buku Tamu

Nama

Email

Kirim

Komentar

Reset

Http://Url

Daftar Buku Tamu

Marquee direction:’’up’

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.30 Perancangan Antarmuka Buku tamu

114

7. Perancangan Antarmuka Informasi

Berikut dapat dilihat perancangan antarmuka menu Informasi dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P07 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

INFORMASI

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.31 Perancangan Antarmuka Menu Informasi

115

8. Perancangan Antarmuka Tips

Berikut dapat dilihat perancangan antarmuka menu Tips dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P08 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

TIPS

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.32 Perancangan Antarmuka Menu Tips

116

9. Perancangan Antarmuka Cara Belanja

Berikut dapat dilihat perancangan antarmuka menu Cara belanja dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P09 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

CARA BELANJA

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.33 Perancangan Antarmuka Cara belanja

117

10. Perancangan Antarmuka Login

Berikut dapat dilihat perancangan antarmuka menu Login dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P10 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

LOGIN

Email

Login

Lupa Password?

Password

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.34 Perancangan Antarmuka Menu Login

118

11. Perancangan Antarmuka Keranjang Belanja

Berikut dapat dilihat perancangan antarmuka menu Keranjang belanja dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P11 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

KERANJANG BELANJA

Isi keranjang belanja

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.35 Perancangan Antarmuka Keranjang Belanja

119

12. Perancangan Antarmuka Kategori Produk

Berikut dapat dilihat perancangan antarmuka menu Kategori produk dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P12 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

KATEGORI PRODUK

Gambar1 Gambar2

Gambar3

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar4

Gambar 3.36 Perancangan antarmuka menu Kategori Produk

120

13. Perancangan Antarmuka Baca Detail

Berikut dapat dilihat perancangan antarmuka menu Baca detail dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P13 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P11

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Detail Produk

Gambar

Nama Produk

ID Produk

Kategori

Harga

Diskon

Rasa

Stok

QTY

:-------

:-------

: -------

: -------

:

: -------

:

Produk Sejenis

Gambar1 Gambar2

Add To Card

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.37 Perancangan antarmuka menu Baca detail

121

14. Perancangan Antarmuka Menu Lupa Password

Berikut dapat dilihat perancangan antarmuka menu Lupa password dari

pembangunan aplikasi e-commerce di unit peternakan PT.dafa techno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

P14 Klik menu Beranda menuju ke form

P01

Klik menu Produk menuju ke form

P02

Klik menu Registrasi menuju ke form

P03

Klik menu Profil menuju ke form P04

Klik menu Hubungi menuju ke form

P05

Klik Menu Buku tamu menuju ke form

P06

Klik menu Informasi menuju ke form

P07

Klik menu Tips menuju ke form P08

Klik menu Cara Belanja menuju ke

form P09

Klik menu Login menuju ke form P10

Klik menu Keranjang belanja menuju

ke form P011

Klik Menu Kategori Produk menuju ke

form P12

Klik menu Baca detail menuju ke form

P13

Klik menu Lupa Password menuju ke

form P14

Klik menu Add to card menuju ke

form P11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Lupa Password

Kirim Password

Email

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

BERANDA PRODUK REGISTRASI PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGIN

Gambar 3.38 Perancangan antarmuka menu Lupa Password

122

3.2.6.4.2 Perancangan Antarmuka Agen

1. Perancangan Antarmuka Menu Utama (beranda)

Berikut dapat dilihat perancangan antarmuka menu utama (beranda) agen

dari pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro

yang tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

A01

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Darul Fallah Unit Peternakan

Slide Show Image

Pencarian

Cari

Produk Terbaru Kami

Image1

Image2

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUT

Selamat Datang Nama Agen

AGEN

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

Gambar 3.39 perancangan antarmuka beranda Agen

123

2. Perancangan Antarmuka Produk

Berikut dapat dilihat perancangan antarmuka menu produk dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

A02

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Koleksi Produk Dafa Unit Peternakan

Image1Image2

Image3Image4

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.40 perancangan antarmuka Produk

124

3. Perancangan Antarmuka Profil

Berikut dapat dilihat perancangan antarmuka menu profil dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A03

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Tentang Darul Fallah Unit Peternakan

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Best Seler

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.41 Perancangan Antarmuka Profil

125

4. Perancangan Antarmuka Hubungi

Berikut dapat dilihat perancangan antarmuka menu hubungi dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

A04

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Hubungi Kami

Nama

Email

Kode Captcha

Refresh

Captcha

Kirim

Kode captcha

Komentar

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.42 Perancangan Antarmuka Hubungi

126

5. Perancangan Antarmuka Menu Buku Tamu

Berikut dapat dilihat perancangan antarmuka menu buku tamu dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA

A05

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Buku Tamu

Nama

Email

Kirim

Komentar

Reset

Http://Url

Daftar Buku Tamu

Tampilan Buku Tamu

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.43 Perancangan Antarmuka Menu Buku Tamu

127

6. Perancangan Antarmuka Menu Informasi

Berikut dapat dilihat perancangan antarmuka menu informasi dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A06

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

INFORMASI

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.45 Perancangan Antarmuka Menu Informasi

128

7. Perancangan Antarmuka Menu Tips

Berikut dapat dilihat perancangan antarmuka menu tips dari pembangunan

aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang tercantum

pada gambar dibawah ini:

LOGO PRODUK DAFA A07

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

TIPS

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Lakua

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.46 Perancangan Antarmuka Menu Tips

129

8. Perancangan Antarmuka Cara Belanja

Berikut dapat dilihat perancangan antarmuka menu cara belanja dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A08

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

CARA BELANJA

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------------------------------------------------------

--------

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.47 Perancangan Antarmuka Cara Belanja

130

9. Perancangan Antarmuka Menu Agen

Berikut dapat dilihat perancangan antarmuka menu Agen dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A09

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Agen

Selamat Datang Nama Agen

Nama

Provinsi

Kota

Alamat

Telepon

Email

:-------

:-------

: -------

: -------

: -------

: -------

Selamat Datang Nama Agen

Ubah Profil

Lihat Data History

-------------------------------------------------------------------

-----------------------------------------

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.48 Perancangan Antarmuka Agen

131

10. Perancangan Antarmuka Menu Ubah Profil

Berikut dapat dilihat perancangan antarmuka menu Ubah Profil dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A10

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Agen

Ubah Data Agen

Nama lengkap

Email

Password Lama

Password Baru

Konfirmasi Password

Alamat

Provinsi

Kota

Kode Pos

Telepon

: -------

: -------

:

:

:

: -------

: -------

: -------

: --------

: -------

Selamat Datang Nama Agen

-------------------------------------------------------------------

-----------------------------------------

Simpan Batal

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.49 Perancangan Antarmuka Menu Ubah Profil

132

11. Perancangan Antarmuka Menu Lihat History

Berikut dapat dilihat perancangan antarmuka menu lihat history dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A11

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

History Pembelian

Selamat Datang Nama Agen

IDPembelian Total Bayar Status Menu Detail

-- ------------- ------------ ----------------

-- ------------- ------------ ----------------

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.50 Perancangan Antarmuka Menu Lihat History

133

12. Perancangan Antarmuka Menu Baca Detail

Berikut dapat dilihat perancangan antarmuka menu baca detail dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A13

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Detail Produk

Gambar

Nama Produk

ID Produk

Kategori

Harga

Diskon

Rasa

Stok

QTY

:-------

:-------

: -------

: -------

:

: -------

:

Produk Sejenis

Gambar1 Gambar2

Tambah Kekeranjang

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A13

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.51 Perancangan Antarmuka Menu Lihat detail

134

13. Perancangan Antarmuka Menu Keranjang Belanja

Berikut dapat dilihat perancangan antarmuka menu Keranjang Belanja dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

Selamat Datang Nama Agen

LOGO PRODUK DAFA A14 Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form

A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form

A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke

form A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke

form A10

Klik menu Lihat History menuju ke

form A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Add to card menuju ke

form A15

Klik menu Simpan menuju ke form

A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form

P01

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Keranjang Belanja

Isi keranjang belanja

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.52 Perancangan Antarmuka Keranjang Belanja

135

14. Perancangan Antarmuka Menu Kategori Produk

Berikut dapat dilihat perancangan antarmuka menu Kategori Produk dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A15

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

KATEGORI PRODUK

Gambar1 Gambar2

Gambar3

Selamat Datang Nama Agen

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Kategori menuju ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.53 Perancangan Antarmuka Kategori Produk

136

15. Perancangan Antarmuka Menu Detail

Berikut dapat dilihat perancangan antarmuka menu detail dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

LOGO PRODUK DAFA A12

Keterangan

Ukuran layar : dinamis (default 1024 x 900)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

History Detail Pembelian

Selamat Datang Nama Agen

IDPembelian Total Bayar Status Menu Detail

-- ------------- ------------ ----------------

-- ------------- ------------ ----------------

Klik menu Home menuju ke form A01

Klik menu Produk menuju ke form A02

Klik menu Profil menuju ke form A03

Klik menu Hubungi menuju ke form A04

Klik Menu Buku tamu menuju ke form

A05

Klik menu Informasi menuju ke form

A06

Klik menu Tips menuju ke form A07

Klik menu Cara Belanja menuju ke form

A08

Klik menu Agen menuju ke form P09

Klik menu Ubah Profil menuju ke form

A10

Klik menu Lihat History menuju ke form

A11

Klik Menu Detail menuju ke form A12

Klik menu Baca detail menuju ke form

A13

Klik menu Keranjang Belanja menuju

ke form A14

Klik menu Keranjang Belanja menuju

ke form A15

Klik menu Add to card menuju ke form

A16

Klik menu Simpan menuju ke form A09

Klik menu Batal menuju ke form A09

Klik menu Logout menuju ke form P01

Pilih Pembayaran

Konfirmasi Pengiriman

Keranjang Belanja

Gambar

keranjangJumlah Item:-----

Total : ------

Produk Dafa Yang Diskon

Slide Gambar

Kategori Produk

--------------------------------

--------------------------------

--------------------------------

Link Unit Dafa

--------------------------------

--------------------------------

--------------------------------

Produk Paling Laku

Slide Gambar

Kalender

Jam

Kalender

Yahoo Messenger

Icon YM

No Kontak

---------------------

---------------------

Sosial Network

Facebook

Twitter

Pembayaran

Logo Paypal

Logo Mandiri Syariah

Counter Pengunjung

-------------------------

BERANDA PRODUK PROFIL HUBUNGI BUKU TAMU INFORMASI TIPS CARA BELANJA LOGOUTAGEN

Gambar 3.54 Perancangan Antarmuka Detail

137

2.3.4.3 Perancangan Antarmuka Admin

1. Perancangan Antarmuka Menu Utama (Home)

Berikut dapat dilihat perancangan antarmuka menu utama (Home) dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D01

Beranda

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Selamat Datang Nama Admin Dihalaman

Administrator Dafa Unit Peternakan

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.55 Perancangan Antarmuka Menu Home Admin

2. Perancangan Antarmuka Menu Admin

Berikut dapat dilihat perancangan antarmuka menu admin dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

138

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D02

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Admin

Tambah Admin

No

---

Username

---

PilihanEmail

--- UbahHapus

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.56 Perancangan Antarmuka Menu Admin

3. Perancangan Antarmuka Menu Kategori

Berikut dapat dilihat perancangan antarmuka menu Kategori dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

139

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D03

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Kategori

No

---

Nama Kategori

---

Pilihan

Ubah

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.57 Perancangan Antarmuka Menu Kategori

4. Perancangan Antarmuka Produk

Berikut dapat dilihat perancangan antarmuka menu Produk dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

140

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D04

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Produk

No

---

IdProduk

---

PilihanNama

Produk

--- UbahTambah Detail

Tambah Produk Cari

Hapus

Harga Kategori Berat

------ ------ ------

Gambar

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.58 Perancangan Antarmuka Menu Produk

5. Perancangan Antarmuka Agen

Berikut dapat dilihat perancangan antarmuka menu Agen dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

141

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D05

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Agen

No

---

Nama

---

Pilihankota

--- Ubah

Tambah Agen

Hapus

Telepon Email Status

------ ------ ------

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.59 Perancangan Antarmuka Menu Agen

6. Perancangan Antarmuka Provinsi

Berikut dapat dilihat perancangan antarmuka menu Profinsi dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

142

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D06

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Provinsi

No

---

Provinsi

---

Pilihan

UbahHapus

Tambah Provinsi Cari

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.60 Perancangan Antarmuka Menu Provinsi

7. Perancangan Antarmuka Kota

Berikut dapat dilihat perancangan antarmuka menu Kota dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

143

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D07

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Kota

No

---

Kota

---

Pilihan

UbahHapus

Tambah Kota Cari

Kabupaten

Kota

-------

Ongkos

Kirim

--------

Provinsi

---------

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.61 Perancangan Antarmuka Menu Kota

8. Perancangan Antarmuka Tips

Berikut dapat dilihat perancangan antarmuka menu tips dari pembangunan

aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang tercantum

pada gambar dibawah ini:

144

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D08

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Tips

No

---

Judul

---

PilihanTgl Input

--- Ubah

Tambah Tips

Hapus

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.62 Perancangan Antarmuka Menu Tips

9. Perancangan Antarmuka Informasi

Berikut dapat dilihat perancangan antarmuka menu informasi dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

145

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D09

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Informasi

No

---

Judul

---

PilihanTgl Input

--- Ubah

Tambah Informasi

Hapus

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.63 Perancangan Antarmuka Menu Informasi

10. Perancangan Antarmuka Transaksi

Berikut dapat dilihat perancangan antarmuka menu transaksi dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

146

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D10

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Transaksi

No

---

ID

Beli

---

PilihanNama

Agen

--- HapusDetail

StatusAlamat

Pengiriman

Jenis

pembayaran

Total

Bayar

------ ------ ------ -------

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.64 Perancangan Antarmuka Menu Transaksi

11. Perancangan Antarmuka Buku Tamu

Berikut dapat dilihat perancangan antarmuka menu buku tamu dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

147

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D11

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Buku Tamu

No

---

Nama

---

PilihanTgl Input

--- Hapus

Alamat

---

Komentar

---

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.65 Perancangan Antarmuka Menu Buku Tamu

12. Perancangan Antarmuka Hubungi

Berikut dapat dilihat perancangan antarmuka menu Hubungi dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

148

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D12

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Buku Tamu

No

---

Nama

---

PilihanTgl Input

--- Replay

Alamat

---

Komentar

--- Hapus

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.66 Perancangan Antarmuka Menu Hubungi

13. Perancangan Antarmuka Laporan

Berikut dapat dilihat perancangan antarmuka menu laporan dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

149

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D13

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Laporan

Produk

Penjualan

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.67 Perancangan Antarmuka Menu Laporan

14. Perancangan Antarmuka Laporan Produk

Berikut dapat dilihat perancangan antarmuka menu laporan produk dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

150

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D14

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Laporan Produk

Produk

Penjualan

1. Laporan Semua Data Produk

3. Laporan Produk Per Kategori

urut

urutKategori

Cetak

Cetak

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

2. Laporan Semua Data Produk Cetak

Gambar 3.68 Perancangan Antarmuka Menu Laporan Produk

15. Perancangan Antarmuka Laporan Penjualan

Berikut dapat dilihat perancangan antarmuka menu laporan Penjualan dari

pembangunan aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro yang

tercantum pada gambar dibawah ini:

151

Klik menu Home menuju ke form

D01

Klik menu Admin menuju ke form

D02

Klik menu Kategori menuju ke form

D03

Klik menu Produk menuju ke form

D04

Klik menu Agen menuju ke form D05

Klik Menu Provinsi menuju ke form

D06

Klik menu Kota menuju ke form D07

Klik menu Tips Kami menuju ke form

D08

Klik menu Informasi menuju ke form

D09

Klik menu Transaksi menuju ke

form D10

Klik menu Buku Tamu menuju ke

form D011

Klik Menu Hubungi menuju ke form

D12

Klik menu Laporan menuju ke form

D13

Klik menu Laporan Produk menuju

ke form D14

Klik menu Laporan Penjualan

menuju ke form D15

Klik menu Logout menuju ke form

P01

LOGO

D15

Keterangan

Ukuran layar : dinamis (default 930 x 600)

Type ukuran font : hevetica 11Px

Warna latar : #FFFFFF

Halaman Laporan Penjualan

Produk

Penjualan

Laporan Penjualan Per tahun

Laporan Penjualan Per Bulan

urut

urutBulan

Tampilkan

Tampilkan

Laporan Penjualan Per Hari

Tahun

Dari tgl..

Tahun

Tampilkansampai tgl.. urut

Beranda

Admin

Kategori

Agen

Produk

Provinsi

kota

Tips

Informasi

Transaksi

Buku Tamu

Hubungi

Laporan

Logout

Transportasi

Kategori Transportasi

Backup Basis Data

Restore Basis Data

Gambar 3.69 Perancangan Antarmuka Menu Laporan Penjualan

3.2.5 Perancangan Pesan

Pada gambar dibawah ini merupakan perancangan pesan yang terdapat

pada aplikasi e-commerce di Unit Peternakan PT Dafa Tekno Agro. Adapun

tampilan pesan yang ada adalah sebagai berikut :

152

M01

Field ini harus diisiHarus Diisi Angka

M02

Anda Belum Login,

Apabila sudah memiliki account

silahkan login

Jika Belum punya account

silahkan registrasi,

Data berhasil dihapusData berhasil diubah

M03

Anda Telah Melakukan

Registrasi Silahkan Cek

Email Anda untuk

melakukan aktivasi

Silahkan lakukan

pembayaran

Anda Telah Berhasil

Logout, Terimakasih Telah

Melakukan Login

M11

Anda yakin data ini

untuk dihapus

OK BATAL

M09 M10

M05 M06 M07

Keranjang Belanja Masih

Kosong

M12

Anda Telah Melakukan

Aktivasi

M13

Anda Salah Memasukkan

Kode Captcha, Silahkan

Ulangi

M14

Registrasi Gagal, Password

Harus > 6

M15

Maaf, Email tidak

ditemukan. Masukkan email

dan password dengan

benar

M16

Email Anda Tidak Terdaftar

di sistem kami

M17

Username Atau Password

Yang Anda Masukkan

Salah, Silahkan ulangi lagi

M04

Login Berhasil

M08

Logout Sukses

M18

Gambar 3.69 Perancangan Pesan

3.2.6 Jaringan Semantik

Aliran dari menu-menu yang ada di program akan dijelaskan pada gambar

berikut :

1. Jaringan semantik interface pengunjung

P02

P03

P04P05

P06

P07

P08

P09

P10P12

P13

P14

P11

M03

M12

M17

M16

M08

M14

M14

M09

M01

M02

M15

P01

Gambar 3.70 Jaringan Semantik Pengunjung

153

2. Jaringan Semantik Interface Agen

A14

A03

A04

A05

A06

A07

A08

A09

A10

A11

A12

A13A02

A15

A16

P01

M10

M07

M12

A01

Gambar 3.71 Jaringan Semantik Agen

3. Jaringan Semantik Admin

D02

D03

D04

D05D06

D07

D08

D09

D10

D11

D12

D13P01

D14 D15

M07

M05

M07

M07

M05

M07

M05

M07 M05

M07

M05

M07

M05

M07M05

M07

M05

M05

M05M18D16

D17

D01

Gambar 3.72 Jaringan Semantik Admin

154

3.2.7 Perancangan Prosedural

Sebagai langkah terakhir dalam perancangan yaitu merancang prosedural

yang akan diimplementasikan ke dalam sistem. Prosedur ini akan digunakan

sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun

perancangan prosedural untuk pembangunan aplikasi e-commerce yang akan

dibangun adalah sebagai berikut :

1. Flowchart Tambah Data, merupakan prosedur yang terjadi ketika Admin,

pengunjung atau Agen menginputkan data baru.

Mulai

Pilih Menu Data Yang

Akan Ditambah

Isi Data Yang Akan

Ditambah

Input Data

Kedalam

databases

Databases

Selesai

Gambar 3.73 Proses Prosedural tambah data

2. Flowchart Ubah Data, merupakan prosedur yang terjadi ketika Admin atau

Agen mengubah data yang dianggap perlu dilakukan perubahan.

155

Mulai

Pilih Data Yang Akan

Diubah

Tampil Data Yang

Akan Diubah

Input Data

Kedalam

databases

Databases

Selesai

Gambar 3.74 Proses Prosedural ubah data

3. Flowchart Hapus Data, merupakan prosedur yang terjadi ketika Admin

menghapus data.

Mulai

Pilih Data Yang Akan

Dihapus

Tampil Data Yang

Akan Dihapus

Hapus data

Hapus Data

di dalam

databases

Databases

Selesai

T

Yakin mau

dihapus?

Y

Gambar 3.75 Prosedural proses hapus data

156

4. Flowchart proses Registrasi, yaitu prosedur yang terjadi ketika pengunjung

ingin mendaftarkan diri menjadi agen.

Mulai

Input Data

Registrasi

Simpan data

Tampil pesan telah

melakukan

registrasi

Data disimpan

ke dalam

databases

Registrasi

berhasil

Selesai

Gambar 3.76 Prosedural Proses Registrasi Agen

5. Flowchart login, merupakan prosedur yang terjadi ketika admin dan agen

melakukan login,

Mulai

Input email dan

password

Cek email dan

password kosong

Selesai

N

Pesan Email

dan password

belum di isi

y

Cek email dan

passwordPesan Email

tidak ditemukaninvalid

Masuk Ke

menu Agen

Val

id

Gambar 3.77 Prosedural Proses Login Agen

157

6. Gambar Prosedural Ganti Password yang digunakan pada saat admin atau

agen melakukan pergantian password

Mulai

Input data password

baru

Cek cek password

Baru

Selesai

valid

Pesan data

salahinvalid

Ubah

Password

berhasil

Password Baru

Gambar 3.78 Prosedural Proses Ganti Password

7. Prosedur proses pemesanan barang, proses ini berlaku ketika agen melakukan

pemesanan barang.

Mulai

Login

Cek email dan

password

Login sukses

valid

invalid

Pilih Kategori

Pilih produk

checkout Bayar

Selesai

Gambar 3.79 prosedur proses pemesanan barang