BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

3.1

Analisis Analisis merupakan suatu penelaahan dan penelitian dengan melakukan suatu percobaan yang menghasilkan suatu kesimpulan dari penguraian suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi segala permasalahan yang timbul, hambatan yang terjadi serta kesempatan dan kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikan yang dapat membangun dan mempertinggi sistem kerja alat yang dibuat. Analisis yang dilakukan terhadap aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web ini yang dibuat menggunakan UML (Unified Modeling Language), yang memberikan gambaran tentang proses yang terjadi dalam aplikasi, yang dapat berupa suatu proses untuk mengelola data.

19

20

3.1.1 Prosedur Sistem Berjalan Dibawah ini adalah gambar prosedur sistem yang sedang berjalan di Mitra Batik Shop. Operator

Manual (MS.Excel)

Mulai

Data pergudangan dan penjualan

pilih

pergudangan

Input data ke excel

save

File pergudangan penjualan

Input data ke excel

save

File penjualan

Selesai

Gambar 3.1 Flow Map Sistem pergudangan dan penjualan yang sedang berjalan

Gambar diatas menjelaskan sistem yang sedang berjalan masih manual, yaitu: 1. operator memilih data yang ingin diolah, data pergudangan atau penjualan. 2. Lalu operator memasukan data ke excel. 3. Setelah selesai maka file di save. 4. Selesai.

21

3.1.2 Analisis Dokumen yang Digunakan Di dalam sistem yang saat ini sedang berjalan terdapat beberapa dokumen yang digunakan sebagai arsip untuk menyimpan segala data dari transaksi penjualan, pengecekan stok barang.

3.1.3 Permasalahan Hasil Analisis Dokumen Dalam pembuatan aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web ini mempunyai beberapa permasalahan yang dihadapi, yaitu : 1. Bagaimana cara mendesain aplikasi pergudangan batik agar mudah dikelola? 2. Bagaimana cara mendesain aplikasi penjualan batik agar lebih menarik pengunjung? 3. Bagaimana cara memberikan kemudahan dalam pelayanan pemesanan dan transaksi batik di Mitra batik shop?

3.1.4 Alternatif Pemecahan Masalah Dari adanya permasalahan diatas, dibawah ini adalah alternatif pemecahan masalah, yaitu : 1. Dibuatnya aplikasi pergudangan batik untuk memudahkan admin dalam mengelola pergudangan batik; 2. Dibuatnya aplikasi penjualan batik untuk meningkatkan penjualan dan mempromosikan Mitra Batik Shop;

22

3. Dibuatnya form pemesanan dan transaksi batik untuk memudahkan pemesanan di Mitra Batik Shop.

3.2

Perancangan Perancangan ini menitikberatkan kepada aplikasi Penjualan, tahap perancangan desain pada perangkat lunak tersebut dipakai ke dalam pemodelan yang umum yang digunakan yaitu menggunakan diagram alir (flowchart), UML (Unified Modelling Language).

3.2.1 Analisis Kebutuhan Perangkat 3.2.1.1 Perangkat Lunak Kebutuhan

perangkat

lunak

yang

akan

digunakan

dalam

pembangunan sistem ini antara lain : Tabel 3.1 Perangkat Lunak

No Perangkat . Lunak 1. Sistem Operasi 2. 3.

Database Pemrograman

4.

Desain Grafis

Spesifikasi Perangkat Lunak

Alasan

Stabilitas dan fisiensi serta tampilan userfriendly. MySQL Cepat PHP Mudah dipelajari, merupakan webscripting open source. Adobe Dreamweaver, Adobe Software pendukung Flash, Adobe Photosop. dalam pembuatan website Microsoft Windows 7

23

3.2.1.2 Perangkat Keras Kebutuhan perangkat keras yang akan digunakan dalam pembangunan aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web ini antara lain : Tabel 3.2 Perangkat Keras

No Perangkat . Keras 1. Processor

Intel core 2 duo

2.

Memory

2 GB

3.

VGA

NVIDIA G102M 512 MB

4.

Harddisk

320 GB

Spesifikasi Perangkat Keras

Alasan Agar memproses lebih cepat. Agar mendukung multitasking Untuk mendukung aplikasi grafis yang digunakan. Membutuhkan space yang besar

3.2.2 Prosedur Sistem yang Akan Dibangun 3.2.2.1 Flow Map Website Administrator yang akan dibangun Dibawah ini adalah gambar prosedur sistem yang akan dibangun di aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web untuk administrator ini.

24

ADMINISTRATOR

SISTEM

Mulai Cek Database

T_admin

Website

Valid Mengisi Identitas Ya Ya Tidak Login

Simpan

Ya

Kelola barang

Db_gudang batik Tidak

Tidak

Simpan Data

Selesai

Gambar 3.2 Flow Map Website Administrator

Gambar di atas merupakan sistem yang akan dibangun. Sistem ini dimulai dengan admin mengisi identitas (username dan password), setelah itu login. Jika ada pengecekan dan perubahan data maka admin akan mengupdate dan menyimpannya di database.

3.2.2.2 Flow Map Website Member Transaksi Batik Dibawah ini adalah gambar prosedur sistem yang akan dibangun di aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web untuk member melakukan transaksi pembelian batik.

25

Member User

Sistem

Mulai

Isi_Identitas

T_member

Website Tidak Ya

Valid

Registrasi Ya

Member Simpan

Produk Batik

Tidak

Shopping Cart Order

Ya

T_transaksi

Selesai Belanja

Valid

Ya

Bayar

Tidak

Simpan Tidak

Selesai Bayar Cek

Konfirmasi Valid

Tidak

Terima Barang

Selesai

Kirim Barang

Tidak

Gambar 3.3 Flow Map Member Transaksi Batik

Gambar di atas merupakan sistem transaksi yang akan dibangun. Sistem ini dimulai dengan pengunjung browsing menggunakan internet ke web-online tersebut. Pengunjung dapat melihat tampilan website. Jika ingin melakukan pemesanan/pembelian barang, maka pengunjung harus melakukan login terlebih dahulu. Bila belum menjadi member, dari menu login terdapat link untuk melakukan registrasi. Setelah melakukan login, member akan memilih produk dan produk yang telah dipilih akan masuk ke shopping cart.

26

Bila telah selesai memilih produk, member akan melakukan checkout dan harus melakukan pembayaran ke rekening yg telah ditentukan. Setelah pembayaran, member melakukan konfirmasi ke admin untuk diproses. Admin akan mengecek apakah pembayaran sesuai dengan data order. Bila sesuai, maka barang pesanan akan dikirim ke alamat yang telah diberikan. Member akan menerima barang pesanan segera.

3.2.3 Unified Modeling Language (UML) UML (Unified Modeling Language) adalah sebuah bahasa untuk menetukan, kontruksi, dan mendokumentasikan artifact (bagian dari informasi yang digunakan atau dihasilkan dalam suatu proses pembuatan perangkat lunak.

27

3.2.3.1 Use Case Diagram Dibawah ini adalah gambar use case diagram aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web. System

<>

Registrasi Member

Beranda

Tentanng Kami

Produk

Pengunjung

Layanan Service

<<extend>>

Kontak <<extend>> <>

Validasi Login Member

Profil Member

<>

<<extend>>

Login Member Member

Shopping Cart

<<extend>> <>

Konfirmasi Logout Member

<<extend>>

<<extend>> daftar transaksi

Validasi Login Admin

<>

<> Kelola Member <> Login Admin

<<extend>>

Kelola Kontak Administrator

<> Kelola Suplier

<> Logout Admin

Kelola Produk <>

Kelola Transaksi

<> <>

Kelola Laporan

<> Kelola Iklan

kelola tarif kirim

<>

kelola rekening <>

Gambar 3.4 Use Case Diagram aplikasi pergudangan dan penjualan batik

3.2.3.2 Class Diagram Dibawah ini adalah gambar class diagram aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web.

t_admin +user_admin: Varchar +pass_admin: Varchar +kelola +kelola +kelola +kelola +kelola +kelola +kelola

member() guestbook() suplier() produk() transaksi() laporan() iklan()

t_produk

t_suplier

+id_produk: Integer +id_suplier: Integer +nama_produk: Varchar +kategori_produk: Varchar +jenis_produk: Varchar +stok_produk: Varhcar +iklan

+id_suplier: Integer +nama_suplier: Varhcar +alamat: Varchar +jenis_produk: Varchar

+tambah produk() +edit produk() +hapus produk()

+tambah suplier() +edit suplier() +hapus suplier()

t_kategori

t_jenis_produk

+id_kategori: Integer +nama_kategori: Varchar

+id_jns_produk: Integer +id_produk: Integer +nama_jenis_produk: Varchar

+tambah kategori() +edit kategori() +hapus kategori()

+tambah jenis produk() +edit jenis produk() +hapus jenis produk()

t_iklan

t_rekening

+id_iklan: Integer +id_produk: Integer +id_kategori: Integer +nama_produk: Varchar +nama_kategori: Varchar

+id_rekening: Integer +no_rekening: Varchar +Atas_nama_rekening: Varchar +nama_bank: Varchar

+tambah iklan() +edit iklan() +hapus iklan()

t_tarif_kirim +id_tarif kirim: Integer +provinsi: Varchar +kabupaten_kota: Varchar +tarif_kirim: Varchar

login_admin +username: Varchar +password: Varchar +memasukan username() +memasukan password()

+memasukan username() +memasukan password()

web +open web()

+tambah tarif kirim() +edit tarif kirim() +hapus tarif kirim()

t_shopping_cart +id_shopping_cart: Integer +id_member: Integer +id_produk: Integer +jumlah_produk: Varchar

login_member +username: Varchar +password: Varchar

+tambah rekening() +edit rekening() +hapus rekening()

+login() +tambah member() +edit profil() +tambah buku tamu()

Laporan Transaksi t_transaksi

Member +id_member: Integer +username: Varchar +password: Varchar +nama: Varchar +alamat: Varchar +kota: Varchar +propinsi: Varchar +kd_pos: Integer +e-mail: Varchar +telp: Varchar +hp: Varchar

registrasi +id_pengunjung: Integer +user_id: Varchar +password: Varchar +nama: Varchar +alamat: Varchar +kota: Varchar +kd_pos: Varchar +e-mail: Varchar +telp: Varchar +hp: Varchar

t_pengunjung t_guestbook +nama: Varchar +e-mail: Varchar +pesan: Varchar

+id_transaksi: Integer +id_member: Integer +id_produk: Integer +jumlah_produk: Integer +tgl_transaksi: datetime +tgl_konfirmasi: datetime +total_harga: Integer +Operation1()

+tambah guestbook() +edit guestbook() +hapus guestbook()

+tambah registrasi()

Gambar 3.5 Class Diagram aplikasi pergudangan dan penjualan batik

28

+no_transaksi: Integer +id_produk: Integer +tgl_transaksi: date +cetak transaksi()

29

3.2.3.3 Sequence Diagram 3.2.3.3.1

Sequence Diagram Administrator Dibawah ini adalah gambar sequence diagram administrator aplikasi

sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web. 3.2.3.3.1.1

Sequence Diagram Administrator Login : web

: admin

: login_admin

1 : open()

3 : tampilan website 5 : masukan username dan password()

7 : validasi username dan password() 9 : konfirmasi login

Gambar 3.6 Sequence Diagram Administrator Login

3.2.3.3.1.2

Sequence Diagram Administrator Kelola Member : web

: admin

: login_admin

: Member

1 : open()


4 : validasi username dan password() 5 : konfirmasi login 6 : tambah member() 7 : edit member 8 : hapus member 9 : validasi tambah,edit dan hapus member() 10 : konfirmasi tambah,edit dan hapus member

Gambar 3.7 Sequence Diagram Administrator Kelola Member

30

3.2.3.3.1.3

Sequence Diagram Administrator Kelola Supplier

: web

: admin

: login_admin

: t_suplier

11 : open()

12 : tampilan website 13 : masukan username dan password() 14 : validasi username dan password()

16 : tambah suplier() 17 : edit suplier 19 : hapus suplier

15 : konfirmasi login

18 : validasi tambah,edit dan hapus suplier() 20 : konfirmasi tambah,edit dan hapus suplier

Gambar 3.8 Sequence Diagram Administrator Kelola Suplier

3.2.3.3.1.4

Sequence Diagram Administrator Kelola Produk

: web

: admin

: login_admin

: t_produk

2 : open()


8 : validasi username dan password() 10 : konfirmasi login 13 : tambah produk() 15 : edit produk 17 : hapus produk 18 : validasi tambah,edit dan hapis produk() 20 : konfirmasi tambah,edit dan hapus

Gambar 3.9 Sequence Diagram Administrator Kelola Produk

31

3.2.3.3.1.5

Sequence Diagram Administrator Kelola Transaksi

: login_admin

: web

: admin

: t_transaksi

23 : open()


28 : validasi username dan password() 34 : konfirmasi login 35 : tambah transaksi() 36 : edit transaksi 38 : hapus transaksi 39 : validasi tambah,edit dan hapis transaksi() 40 : konfirmasi tambah,edit dan hapus transaksi

Gambar 3.10 Sequence Diagram Administrator Kelola Transaksi

3.2.3.3.1.6

Sequence Diagram Administrator Kelola Iklan

: web

: admin

: login_admin

: t_iklan

41 : open() 43 : tampilan website 45 : masukan username dan password()

47 : validasi username dan password()

49 : kofirmasi login

51 : tambah iklan() 53 : edit iklan 55 : hapis iklan 56 : validasi tambah,edit dan hapus iklan()

59 : konfirmasi tambah,edit dan hapus iklan

Gambar 3.11 Sequence Diagram Administrator Kelola Iklan

32

3.2.3.3.1.7

Sequence Diagram Administrator Kelola Guestbook

: web

: admin

: login_admin

: t_guestbook

42 : open()




52 : tambah guestbook() 54 : edit guestbook 57 : hapus guestbook 58 : validasi tambah,edit dan hapus guestbook()

60 : konfirmasi tambah,edit dan hapus guestbook

Gambar 3.12 Sequence Diagram Administrator Kelola Guestbook

3.2.3.3.1.8

Sequence Diagram Administrator Kelola Rekening

: web

: admin

: login_admin

: t_rekening

1 : open()



5 : konfirmasi login admin

6 : tambah_rekening() 7 : edit_rekening 8 : hapus_rekening 9 : validasi tambah,edit,hapus rekening()

10 : konfirmasi tambah,edit dan hapus rekening

Gambar 3.13 Sequence Diagram Administrator Kelola Rekening

33

3.2.3.3.1.9

Sequence Diagram Administrator Kelola Tarif Kirim

: web

: admin

: login_admin

: t_tarif_kirim

11 : open()


14 : validasi username dan password() 15 : konfirmasi login 16 : tambah_tarif_kirim() 17 : edit_tarif_kirim 18 : hapus_tarif_kirim 19 : validasi tambah,edit dan hapus tarif kirim()

20 : konfirmasi tambah,edit dan hapus tarif kirim

Gambar 3.14 Sequence Diagram Administrator Kelola Tarif Kirim

3.2.3.3.2

Sequence Diagram Pengunjung Dibawah ini adalah gambar sequence diagram pengunjung aplikasi sistem

pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web.

3.2.3.3.2.1

Sequence Diagram Pengunjung Melakukan Registrasi

: web

: registrasi

: pengunjung 1 : open()

2 : tampilan website 3 : tambah registrasi() 4 : validasi registrasi()

5 : konfirmasi tambah registrasi

Gambar 3.15 Sequence Diagram Pengunjung Melakukan Registrasi

34

3.2.3.3.2.2

Sequence Diagram Pengunjung Melihat Produk

: web

: t_produk

: pengunjung 2 : open() 4 : tampilan website

6 : lihat prouk() 7 : validasi produk()

9 : konfirmasi lihat produk

Gambar 3.16 Sequence Diagram Pengunjung Melihat Produk

3.2.3.3.2.3

Sequence Diagram Pengunjung Mengisi Guestbook

: web

: t_guestbook

: pengunjung 11 : open()

13 : tampilan website

15 : tambah guestbook() 17 : lihat guestbook 18 : validasi tambah dan lihat guestbook()

20 : konfirmasi tambah dan lihat guestbook

Gambar 3.17 Sequence Diagram Pengunjung Mengisi Guestbook

35

3.2.3.3.2.4

Sequence Diagram Pengunjung Melihat Iklan

: web

: pengunjung

: t_iklan

12 : open()


16 : lihat iklan()

19 : validasi lihat iklan() 21 : konfirmasi lihat iklan

Gambar 3.18 Sequence Diagram Pengunjung Melihat Iklan

3.2.3.3.3 Sequence Diagram Member Dibawah ini adalah gambar sequence diagram member aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web. 3.2.3.3.3.1

Sequence Diagram Login Member

: web

: member

: login_member

1 : open()

3 : tampilan website 5 : masukan username da password()

7 : validasi username da password()


Gambar 3.19 Sequence Diagram Login Member

36

3.2.3.3.3.2

Sequence Diagram Profil Member : web

: member

: login_member

: Member

1 : open()

3 : tampilan website 5 : masukan username da password()

7 : validasi username da password()

11 : edit profil() 13 : lihat profil


14 : validasi edit dan lihat profil()

16 : konfirmasi edit dan lihat profil

Gambar 3.20 Sequence Diagram Member Mengupdate Profil Member

3.2.3.3.3.3

Sequence Diagram Member Melihat Produk : web

: member

: login_member

: t_produk

2 : open()


6 : masukan username dan password()

8 : validasi username dan password() 10 : konfirmasi login 11 : lihat produk()

12 : validasi lihat produk() 13 : konfirmasi lihat produk

Gambar 3.21 Sequence Diagram Member Melihat Produk

37

Sequence Diagram Member Melakukan Shopping Cart

3.2.3.3.3.4

: web : member

: login_member

: t_shopping_cart

14 : open()



24 : lihat shopping cart()


26 : tambah shopping cart 28 : edit shopping cart 30 : validasi lihat,tambah dan edit shopping cart()

32 : konfirmasi lihat,tambah dan edit shopping cart

Gambar 3.22 Sequence Diagram Member Melakukan Shopping Cart

3.2.3.3.3.5

Sequence Diagram Member Melakukan Transaksi : web

: member

: login_member

: t_transaksi

15 : open()




25 : tambah transaksi() 27 : lihat transaksi 29 : validasi tambah dan lihat transaksi()

31 : konfirmasi tambah dan lihat transaksi

Gambar 3.23 Sequence Diagram Member Melakukan Transaksi

38

Sequence Diagram Member Mengisi Guestbook

3.2.3.3.3.6

: web

: member

: login_member

: t_guestbook

34 : open()

36 : tampilan guestbook

37 : masukan username dan password()



44 : tambah guestbook() 45 : lihat guestbook 47 : validasi tambah dan lihat guestbook()

49 : konfirmasi tambah dan lihat guestbook

Gambar 3.24 Sequence Diagram Member Mengisi Guestbook

3.2.3.3.3.7

Sequence Diagram Member Melihat Iklan

: web

: member

: login_member

: t_iklan

33 : open()




43 : lihat iklan()

46 : validasi lihat iklan()

48 : konfirmasi lihat iklan

Gambar 3.25 Sequence Diagram Member Melihat Iklan

39

3.2.3.4 Activity Diagram 3.2.3.4.1 Activity Diagram Administrator Dibawah ini adalah gambar Activity Diagram Administrator aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web. 3.2.3.4.1.1

Activity Diagram Login Administrator Administrator

Sistem

Web

Login

input username

input password

Validasi Login

tidak

tampil menu utama

ya

Gambar 3.26 Activity Diagram Login Administrator

3.2.3.4.1.2

Activity Diagram Administrator Kelola Member Administrator

Sistem

tampil menu utama

kelola member

input member

validasi data member

tidak ya simpan data member

Gambar 3.27 Activity Diagram Administrator Kelola Member

40

3.2.3.4.1.3

Activity Diagram Administrator Kelola Produk Administrator

Sistem

tampil menu utama

kelola produk

input data produk

Validasi data produk

tidak ya simpan data produk

Gambar 3.28 Activity Diagram Administrator Kelola Produk

3.2.3.4.1.4

Activity Diagram Administrator Kelola Supplier Administrator

Sistem

tampil menu utama

kelola supplier

input data supplier

validasi data supplier

tidak ya simpan data supplier

Gambar 3.29 Activity Diagram Administrator Kelola Supplier

41

3.2.3.4.1.5

Activity Diagram Administrator Kelola Transaksi Administrator

Sistem

tampil menu utama

kelola transaksi

update data transaksi

validasi data transaksi

tidak ya simpan data transaksi

Gambar 3.30 Activity Diagram Administrator Kelola Transaksi

3.2.3.4.1.6

Activity Diagram Administrator Kelola Iklan Administrator

Sistem

tampil menu utama

kelola iklan

input iklan

validasi data iklan

tidak ya simpan data iklan

Gambar 3.31 Activity Diagram Administrator Kelola Iklan

42

3.2.3.4.1.7

Activity Diagram Administrator Kelola Guestbook Administrator

Sistem

tampil menu utama

kelola guest book

hapus guest book

validasi data guest book

tidak ya hapus data guest book

Gambar 3.32 Activity Diagram Administrator Kelola Guestbook

3.2.3.4.1.8

Activity Diagram Administrator Kelola Laporan Administrator

Sistem

tampil menu utama

Kelola laporan

view laporan

validasi data Laporan

tidak

tampil data laporan

ya

Gambar 3.33 Activity Diagram Administrator Kelola Laporan

43

3.2.3.4.1.9

Activity Diagram Administrator Kelola Rekening Administrator

Sistem

tampil menu utama

kelola rekening

input data rekening

validasi data rekening

tidak ya simpan data rekening

Gambar 3.34 Activity Diagram Administrator Kelola Rekening

3.2.3.4.1.10

Activity Diagram Administrator Kelola Tarif Kirim Administrator

Sistem

tampil menu utama

Kelola Tarif Kirim

Input Data Tarif Kirim

Validasi Data Tarif Kirim

tidak

ya Simpan Data Tarif Kirim

Gambar 3.35 Activity Diagram Administrator Kelola Tarif Kirim

44

3.2.3.4.2 Activity Diagram Pengunjung Dibawah ini adalah gambar Activity Diagram Pengunjung aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web. 3.2.3.4.2.1

Activity Diagram Registrasi Pengunjung Pengunjung

Sistem

Web

Registrasi

input data registrasi

validasi data registrasi

tidak ya simpan data registrasi

Login

Gambar 3.36 Activity Diagram Registrasi Pengunjung

3.2.3.4.2.2

Activity Diagram Pengunjung Lihat Produk Pengunjung

Sistem

Web

produk

view produk

validasi data produk

tidak

tampil data produk

ya

Gambar 3.37 Activity Diagram Pengunjung Lihat Produk

45

3.2.3.4.2.2

Activity Diagram Guestbook Pengunjung Pengunjung

Sistem

Web

guest book

input guest book

validasi data guest book

tidak ya simpan data guest book

Gambar 3.38 Activity Diagram Guestbook Pengunjung

3.2.3.4.3 Activity Diagram Member Dibawah ini adalah gambar Activity Diagram Member aplikasi sistem pergudangan dan penjualan batik secara online di Mitra batik shop berbasis web. 3.2.3.4.3.1

Activity Diagram Login Member Member

Sistem

Web

Login

input username

input password

validasi Login

tidak

Tampil Menu Utama

ya

Gambar 3.39 Activity Diagram Login Member

46

3.2.3.4.3.2

Activity Diagram Shopping Cart Member Member

Sistem

Tampil Menu Utama

lihat produk

tambah produk ke shopping cart

simpan data shoppping cart

cekout

tidak

ya

tambah data transaksi

simpan data transaksi

bon pemesanan

Gambar 3.40 Activity Diagram Shopping Cart Member

3.2.3.4.3.3

Activity Diagram Konfirmasi Member Member

Sistem

Pzonna Batik Shop

bon pemesanan

Bayar / Transfer

konfirmasi

input konfirmasi

simpan konfirmasi

validasi konfirmasi

tidak

update konfirmasi

ya

kirim barang

terima barang

Gambar 3.41 Activity Diagram Member Konfirmasi

47

3.2.3.4.3.4

Activity Diagram Shopping Edit Profil Member Member

Sistem

Tampil Menu Utama

kelola profil

edit profil

validasi data profil

tidak ya simpan data profil

Gambar 3.42 Activity Diagram Member Edit Profil

3.2.3.9 Daftar Entitas Data Tabel 3.3 Entitas Data t_admin

Attribute

Type

Panjang

Keterangan

id_admin

Int

11

Id Admin

username_admin

Varchar

50

Username Admin

password_admin

Varchar

50

Password Admin

Tabel 3.4 Entitas Data t_buku_tamu

Attribute

Type

Panjang

Keterangan

id_buku_tamu

Int

11

Id buku tamu

nama_tamu

Varchar

50

Nama tamu

email_tamu

Varchar

50

E-mail tamu

isi_buku_tamu

Text

FullText

Isi Pesan Buku Tamu

tgl_tamu

DateTime

-

Tanggal Masuk

48

Tabel 3.5 Entitas Data t_kabupaten_kota

Attribute

Type

Panjang

Keterangan

id_kabupaten_kota Int

50

Id kabupaten/kota

provinsi

Varchar

50

Nama Provinsi

kabupaten_kota

Varchar

50

Nama Kabupaten/kota

Tabel 3.6 Entitas Data t_member

Attribute

Type

Panjang

Keterangan

id_member

Int

11

Id Member

username_member

Varchar

50

Username Member

password_member

Varchar

50

Password member

nama_member

Varchar

50

Nama member

email_member

Varchar

50

E-mail member

alamat_member

Text

FullText

Alamat member

provinsi_member

Varchar

50

Provinsi member

kabupaten_kota_member Varchar

50

Kabupaten/kota member

kode_pos_member

Int

11

Kode Pos member

no_telp_member

Varchar

13

Nomor Telepon member

tgl_register

DateTime

-

Tanggal Registrasi

Tabel 3.7 Entitas Data t_product

Attribute

Type

Panjang

Keterangan

id_product

Int

11

Id Produk

code_product

Varchar

50

Kode Produk

code_category

Varchar

50

Kategori Produk

code_type_product

Varchar

50

Jenis Produk

code_supplier

Varchar

50

Kode Supplier

nama_product

Varchar

50

Nama Produk

keterangan_product Varchar

50

Keterangan Produk

harga_product

50

Harga produk

Varchar

49

discount_product

Varchar

50

Diskon Produk

berat_product

Varchar

50

Berat Produk

stock_product

Varchar

50

Stock Produk

image_product

Varchar

50

Gambar Produk

status_product

Varchar

50

Status Produk

view_product

Varchar

50

Total Dilihat

Tabel 3.8 Entitas Data t_product_categories

Attribute

Type

Panjang

Keterangan

id_category

Int

11

Id Kategori

code_category

Varchar

2

Kode Kategori

nama_category

Varchar

50

Nama Kategori

Tabel 3.9 Entitas Data t_product_suppliers

Attribute

Type

Panjang

Keterangan

id_supplier

Int

11

Id Supplier

code_supplier

Varchar

3

Kode Supplier

nama_supplier

Varchar

50

Nama Supplier

alamat_supplier

Varchar

255

Alamat Supplier

50

Nama Jenis Produk

nama_type_product Varchar

Tabel 3.10 Entitas Data t_product_type

Attribute

Type

Panjang

Keterangan

id_type_product

Integer

11

Id Jenis Produk

code_type_product

Varchar

2

Kode Jenis Produk

50

Nama Jenis Produk

nama_type_product Varchar

50

Tabel 3.11 Entitas Data t_provinsi

Attribute

Type

Panjang

Keterangan

id_provinsi

Integer

11

Id Provinsi

provinsi

Varchar

50

Nama Provinsi

Tabel 3.12 Entitas Data t_rekening

Attribute

Type

Panjang

Keterangan

id_rekening

Integer

11

Id Jenis Produk

no_rekening

Varchar

50

Nomer Rekening

atas_nama_rekening Varchar

50

Rekening Atas Nama

nama_bank

50

Nama Bank

Varchar

Tabel 3.13 Entitas Data t_shopping_cart

Attribute

Type

Panjang

Keterangan

id_shopping_cart

Int

11

Id Jenis Produk

no_transaksi

Varchar

50

Kode Jenis Produk

username_member

Varchar

50

Nama Jenis Produk

code_product

Varchar

50

Kode Produk

jumlah_product

Int

11

Jumlah Produk

berat_product

Float

-

Berat Produk

harga_product

Int

11

Harga Produk

50

Status Shopping Cart

status_shopping_cart Varchar

Tabel 3.14 Entitas Data t_tarif_kirim

Attribute

Type

Panjang

Keterangan

id_tarif_kirim

Int

11

Id Tarif Kirim

provinsi

Varchar

50

Nama Provinsi

kabupaten_kota

Varchar

50

Nama Kabupaten/Kota

tarif_kirim

Int

11

Tarif Kirim

51

Tabel 3.15 Entitas Data t_transaksi

Attribute

Type

Panjang

Keterangan

id_transaksi

Int

11

Id Transaksi

no_transaksi

Varchar

15

Nomer Transaksi

username_member

Varchar

50

Username Member

total_barang

Int

11

Total Barang

total_berat

Float

-

Total Berat

total_harga

Int

11

Total Harga

tarif_kirim

Int

11

Tarif Kirim

tanggal_transaksi

DateTime

-

Tanggal Transaksi

nama_transaksi

Varchar

255

Nama Transaksi

alamat_transaksi

Text

FullText

Alamat Transaksi

provinsi_transaksi

Varchar

50

Provinsi Transaksi

kabupaten_kota_transaksi Varchar

50

Kabupaten/Kota Transaksi

kota_transaksi

Varchar

50

Kota Transaksi

kode_pos_transaksi

Int

11

Kode Pos

no_telp_transaksi

Varchar

13

Nomer Telepon

status_transaksi

Varchar

50

Status Transaksi

tanggal_konfirmasi

DateTime

-

Tanggal Konfirmasi

nama_bank_asal

Varchar

255

Nama Bank Asal

rekening_atas_nama

Varchar

255

Rekening Atas Nama

jumlah_transfer

Int

11

Jumlah Transfer

no_rekening_tujuan

Varchar

50

Nomer Rekening Tujuan

pesan_konfirmasi

Text

FullText

Pesan Konfirmasi

tanggal_proses

DateTime

-

Tanggal Proses

tanggal_kirim

DateTime

-

Tanggal Kirim

tanggal_terima

DateTime

-

Tanggal Terima

52

3.2.4 Perancangan Antar Muka Antarmuka atau interface yang diberikan sistem kepada pengunjung yang mengakses halaman web ini, bisa juga kepada Admin yang hendak melakukan edit data-data yang ada pada web ini adalah sebagai berikut: 3.2.4.1 Struktur Menu 3.2.4.1.1 Struktur Menu Admin Admin

Login

Product

Contact

Sales

Warehouse

Report

Contact

Sales

Report Sales

Rekening

Tarif Kirim

Report Warehouse

Product

Product Type

Product Categories

Product Supplier

Gambar 3.43 Struktur Menu Admin di Aplikasi Sistem Pergudangan dan Penjualan

Batik Secara Online di Mitra Batik Shop Berbasis Web

53

3.2.4.1.2 Struktur Menu Pengunjung dan Member Website

Pengunjung

Home

Member

Login

About Us

Profil

Product

Daftar Transaksi

Service

Konfirmasi

Register

Shopping Cart

Gambar 3.44 Struktur Menu Member dan Pengunjung di Aplikasi Sistem Pergudangan

dan Penjualan Batik Secara Online di Mitra Batik Shop Berbasis Web

54

3.2.4.2 Perancangan Tampilan Antar Muka 3.2.4.2.1 Perancangan Tampilan Admin 3.2.4.2.1.1 Perancangan Tampilan Login Admin

Mitra Batik

1

Shop.com

2 Login Admin

Login as Administrator Username :

4

Password :

5

3

6

8 Gambar 3.45 Perancangan Tampilan Login Admin

Tabel 3.16 Keterangan Tampilan Login Admin No 1 2 3 4 5 6 7 8

Jenis Button Button Gambar Input Input Button Button Label

Keterangan Menu Home Menu Login Gambar Login Masukan untuk Username Admin Masukan untuk Password Admin Tombol untuk Login sebagai admin Tombol untuk Reset Tampilan footer

7

55

3.2.4.2.1.2 Perancangan Tampilan Utama Admin

Mitra Batik 1

2

Shop.com

3

4

5

6

7 You Are Now Logged In

Mitra Batik Shop.com

Calender

10 8 9

11

Gambar 3.46 Perancangan Tampilan Utama Admin

Tabel 3.17 Keterangan Tampilan Utama Admin No 1 2 3 4 5 6 7 8 9

Jenis Button Button Button Button Button Button Button Image Text

Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Gambar logo Mitra Batik shop Latar belakang Mitra Batik

56

10 11

Calender Label

Tampilan Calender Tampilan footer

3.2.4.2.1.3 Perancangan Tampilan Product Admin

Mitra Batik 1

Shop.com

2

3

4

5

6

7

Product Admin Menu Product Product Form Product

Product Type Produuct Categories

8

Product Supplier

Calender

10 9

11 Gambar 3.47 Perancangan Tampilan Product Admin Tabel 3.18 Keterangan Tampilan Product Admin No 1 2 3 4 5 6 7 8

Jenis Button Button Button Button Button Button Button Form

Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Form Input Product

57

9 10 11

Output Calender Label

Tampilan Data Product Tampilan Calender Tampilan footer

3.2.4.2.1.4 Perancangan Tampilan Product Type Admin

Mitra Batik 1

Shop.com

2

3

4

5

6

7

Product Type Admin Menu Product Product Type Form Product


8

Product Supplier

Calender

10 9

11

Gambar 3.48 Perancangan Tampilan Product Type Admin Tabel 3.19 Keterangan Tampilan Product Type Admin No 1 2 3 4 5 6 7 8 9

Jenis Button Button Button Button Button Button Button Form Output

Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Form Input Jenis Product Tampilan Data Jenis Product

58

10 Calender Tampilan Calender 13 Label Tampilan footer 3.2.4.2.1.5 Perancangan Tampilan Product Categories Admin Mitra Batik 1

2

Shop.com

3

4

5

6

7

Product Categories Admin Menu Product Product Categories Form Product


8

Product Supplier

Calender

10 9

11

Gambar 3.49 Perancangan Tampilan Product Categories Admin Tabel 3.20 Keterangan Tampilan Product Categories Admin No

Jenis

1 2 3 4 5 6 7 8 9 10 13

Button Button Button Button Button Button Button Form Output Calender Label

Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Form Input Kategori Product Tampilan Data Kategori Product Tampilan Calender Tampilan footer

59

3.2.4.2.1.6 Perancangan Tampilan Product Supplier Admin Mitra Batik 1

2

Shop.com

3

4

5

6

7

Product Suppliers Admin Menu Product Product Suppliers Form Product


8

Product Supplier

Calender

10 9

11

Gambar 3.50 Perancangan Tampilan Product Supplier Admin Tabel 3.21 Keterangan Tampilan Product Supplier Admin No

Jenis

1 2 3 4 5 6 7 8 9 10 13


Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Form Input Supplier Product Tampilan Data Supplier Product Tampilan Calender Tampilan footer

60

3.2.4.2.1.7 Perancangan Tampilan Contact Admin Mitra Batik 1

Shop.com

2

3

4

5

6

7

Contact Admin Menu Product

Calender

8

9

11

Gambar 3.51 Perancangan Tampilan Contact Admin Tabel 3.22 Keterangan Tampilan Contact Admin No

Jenis

1 2 3 4 5 6 7 8 9 12

Button Button Button Button Button Button Button Output Calender Label

Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Tampilan Data Contact Tampilan Calender Tampilan footer

61

3.2.4.2.1.8 Perancangan Tampilan Sales Admin Mitra Batik 1

2

Shop.com

3

4

5

6

7

Sales Admin Menu Sales Sales Admin Sales

Tarif Kirim

Calender

8

9

11

Gambar 3.52 Perancangan Tampilan Sales Admin Tabel 3.23 Keterangan Tampilan Sales Admin No

Jenis

1 2 3 4 5 6 7 8 9 12

Button Button Button Button Button Button Button Output Calender Label

Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Tampilan Data Sales Tampilan Calender Tampilan footer

62

3.2.4.2.1.9 Perancangan Tampilan Tarif Kirim Admin Mitra Batik 1

Shop.com

2

3

4

5

6

7

Tarif Kirim Admin Menu Sales Tarif Kirim Admin Sales

Tarif Kirim Provinsi

8

Kabupaten/Kota

Calender

10 9

11

Gambar 3.53 Perancangan Tampilan Tarif Kirim Admin Tabel 3.24 Keterangan Tampilan Tarif Kirim Admin No

Jenis

1 2 3 4 5 6 7 8 9 10 11


Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Form Tarif Kirim Tampilan Data Tarif Kirim Tampilan Calender Tampilan footer

63

3.2.4.2.1.10 Perancangan Tampilan Warehouse Admin Mitra Batik 1

2

Shop.com

3

4

5

6

You are now logged in

Warehouse Admin

Categories

8

Kode Product :

7

Hem

9

Kemeja Blus Kaos

Kain Koko

Calender

10

11

Gambar 3.54 Perancangan Tampilan Warehouse Admin Tabel 3.25 Keterangan Tampilan Warehouse Admin No

Jenis

1 2 3 4 5 6 7 8 9 10 11

Button Button Button Button Button Button Button Form Button Calender Label

Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Form Warehouse Tombol untuk mencari Data Warehouse Tampilan Calender Tampilan footer

64

3.2.4.2.1.11 Perancangan Tampilan Report Admin Mitra Batik 1

Shop.com

2

3

4

5

6

7

Report Admin Menu Report Report Sales Report Sales

8 9

Report Warehouse

Calender

10 11

12

Gambar 3.55 Perancangan Tampilan Report Admin Tabel 3.26 Keterangan Tampilan Report Admin No

Jenis

1 2 3 4 5 6 7 8 9 10 11 12

Button Button Button Button Button Button Button Input Input Button Calender Label

Keterangan Menu Home Menu Products Menu Contact Menu Sales Menu Warehouse Menu Report Menu Logout Tanggal Awal Tanggal Akhir Tombol untuk Mencari Data Penjualan Tampilan Calender Tampilan footer

65

3.2.4.2.2

Perancangan Tampilan Pengunjung

3.2.4.2.2.1 Perancangan Tampilan Utama Pengunjung Mitra Batik

Shop.com

1 2

3

4

5

6

Login Member Username :

Wellcome To Mitra Batik Shop.com

Password :

11

9 10 12

Categories Hem Kemeja

7

Blus Kaos Kain Koko

Calender

13

8

14

Gambar 3.56 Rancangan Tampilan Utama Pengunjung Tabel 3.27 Keterangan Tampilan Utama Pengunjung No

Jenis

1 2 3 4 5 6 7 8 9 10 11 12 13 16

Button Button Button Button Button Button Output Output Input Input Button Button Calender Label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Login Tampilan Home Tampilan Info Data Produk Baru dan Sale Username Member Password Member Submit “Login” Reset Tampilan Calender Tampilan footer

66

3.2.4.2.2.2 Perancangan Tampilan About Us Pengunjung Mitra Batik

Shop.com

1 2

3

4

5

6

Login Member

8 9

Username :

Mitra Batik Shop.com

Password :

10

11

Categories Hem Kemeja

7

Blus Kaos Kain Koko

Calender

12

13

Gambar 3.57 Rancangan Tampilan About Us Pengunjung Tabel 3.28 Keterangan About Us Pengunjung No

Jenis

1 2 3 4 5 6 7 8 9 10 11 12 13

Button Button Button Button Button Button Output Input Input Button Button Calender Label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Login Tampilan Home Username Member Password Member Submit “Login” Reset Tampilan Calender Tampilan footer

67

3.2.4.2.2.3 Perancangan Tampilan Product Pengunjung Mitra Batik

Shop.com

1 2

3

4

5

6

Login Member

8 9

Username :

Product Page

Password :

10

11

Categories Hem Kemeja Blus Kaos Kain Koko

7

Calender

12

13

Gambar 3.58 Rancangan Tampilan Product Pengunjung Tabel 3.29 Keterangan Tampilan Product Pengunjung No

Jenis

1 2 3 4 5 6 7 8 9 10 11 12

Button Button Button Button Button Button Output Input Input Button Button Calender

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Login Tampilan Data Produk Username Member Password Member Submit “Login” Reset Tampilan Calender

68

13

Label

Tampilan footer

3.2.4.2.2.4 Perancangan Tampilan Services Pengunjung Mitra Batik

2

3

Shop.com

4

5

6

Login Member

8 9

Username :

FAQ (Tanya Jawab)

Password :

10

11


7

Calender

12

13

Gambar 3.59 Rancangan Tampilan Services Pengunjung

Tabel 3.30 Keterangan Tampilan Services Pengunjung No

Jenis

1 2 3 4 5 6 7 8 9 10 11 12 15

Button Button Button Button Button Button Output Input Input Button Button Calender Label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Login Tampilan Services Username Member Password Member Submit “Login” Reset Tampilan Calender Tampilan footer

69

3.2.4.2.2.5 Perancangan Tampilan Contact Pengunjung Mitra Batik

2

3

Shop.com

4

5

6

Login Member

8 9

Username :

Contact Us

Password :

10

11


7

Calender

12

13

Gambar 3.60 Rancangan Tampilan Contact Pengunjung Tabel 3.31 Keterangan Tampilan Contact Pengunjung No

Jenis

1 2 3 4 5 6 7 8 9 10 11 12 15

Button Button Button Button Button Button Form Input Input Button Button Calender Label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Login Form Contact Username Member Password Member Submit “Login” Reset Tampilan Calender Tampilan footer

70

3.2.4.2.2.6 Perancangan Tampilan Registrasi Pengunjung Mitra Batik

1

Shop.com

2

3

4

5

6

Contact Us

7

Login Member Username : Password :

Register Form

24

Nama :

22 23 25

8 Email :

9 Username :

10 Password :

11 Ulangi Password :

12 Alamat :

13 Provinsi :

14 Kabupaten/Kota :

15 Kota :

16 Kode Pos :

17 No.Telp :

18 Verification code :

19 20

21

26

Gambar 3.61 Rancangan Tampilan Registrasi Pengunjung Tabel 3.32 Keterangan Tampilan Registrasi Pengunjung No 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Jenis Button Button Button Button Button Button Button Form Button Button Input Input Button Button Label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Login Register Form Registrasi Submit “Kirim” Reset Username Member Password Member Submit “Login” Reset Tampilan footer

71

3.2.4.2.3 Perancangan Tampilan Member 3.2.4.2.3.1 Perancangan Tampilan Login Member

Mitra Batik

1

2

Shop.com

3

4

5

6 Login Member

Login as Member Username :

7

Password :

8

12

9

10

Register Member Not already member ?? Click the button below

11 13 Gambar 3.62 Rancangan Tampilan Login Member

Tabel 3.33 Keterangan Tampilan Login Member No 1 2 3 4 5 6 7 8 9 10 11 12 13

Jenis Button Button Button Button Button Button Input Input Button Button Button Image label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Login Username Member Password Member Submit “Login” Reset Tombol untuk Register/Daftar menjadi member Login Here Tampilan Footer

72

3.2.4.2.3.2 Perancangan Tampilan Utama Member Mitra Batik

Shop.com

1

2

3

4

5

6

7

Hai dani !

Menu Member

Wellcome To Mitra Batik Shop.com

Profil Daftar Transaksi

Konfirmasi Shopping Cart

Categories Hem

Kemeja Blus Kaos

8

Kain Koko

9

Calender

10

11

Gambar 3.63 Rancangan Tampilan Utama Member Tabel 3.34 Keterangan Tampilan Utama Member No

Jenis

1 2 3 4 5 6 7 8 9 10 11

Button Button Button Button Button Button Output Output Output Calender label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Logout Tampilan Home Tampil Data Produk Baru Tampil Data Produk Sale Tampilan Calender Tampilan Footer

73

3.2.4.2.3.3 Perancangan Tampilan Profil Member Mitra Batik

Shop.com

1

2

3

4

5

6

7

8

Hai dani !

Menu Member

Profile Dani



Categories Hem

Kemeja

9

Blus Kaos

Kain Koko

Calender

10

11

12

Gambar 3.64 Rancangan Tampilan Profil Member

Tabel 3.35 Keterangan Tampilan Profil Member No

Jenis

1 2 3 4 5 6 7 8 9 10 11

Button Button Button Button Button Button Button Output Button Calender label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu My Profile Menu Logout Tampil Data Profil Member Tombol untuk Mengedit Profil Calender Tampilan Footer

74

3.2.4.2.3.4 Perancangan Tampilan Product Member Mitra Batik

Shop.com

1

2

3

4

5

6

7

Hai dani !

Menu Member

Product Page



8 Categories Hem

Kemeja Blus Kaos

Kain Koko

Calender

9

10

11

Gambar 3.65 Rancangan Tampilan Product Member Tabel 3.36 Keterangan Tampilan Product Member No 1 2 3 4 5 6 7 8 9

Jenis Button Button Button Button Button Button Output Calender label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Logout Tampil Data Produk Tampilan Calender Tampilan Footer

75

3.2.4.2.3.5 Perancangan Tampilan Shopping Cart Member Mitra Batik 1

2

Shop.com

3

4

5

6

7 Hai dani !

Shopping Cart

Menu Member Profil

Daftar Transaksi

8

Konfirmasi

Shopping Cart

Categories Hem

Kemeja Blus Kaos Kain Koko

Calender

9

10

Gambar 3.66 Rancangan Tampilan Shopping Cart Member Tabel 3.37 Keterangan Tampilan Shopping Cart Member No

Jenis

1 2 3 4 5 6 7 8 9 10

Button Button Button Button Button Button Button Output Calender label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu My Cart Menu Logout Tampil Data Produk yang akan dipesan Tampilan Calender Tampilan Footer

76

3.2.4.2.3.6 Perancangan Tampilan Checkout Member Mitra Batik 1

2

Shop.com

3

4

5

6

7 Hai dani !

Checkout

Menu Member Data Pengiriman

Profil

Daftar Transaksi Konfirmasi

Shopping Cart

Categories

8

Hem


Calender

9

10

Gambar 3.67 Rancangan Tampilan Checkout Member Tabel 3.38 Keterangan Tampilan Checkout Member No 1 2 3 4 5 6 7 8 9 10 11

Jenis Button Button Button Button Button Button Button Form Pengiriman Button Calender label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu My Cart Menu Logout Tampil Data Profil Tombol Untuk Checkout Tarif Kirim Tampilan Calender Tampilan Footer

77

3.2.4.2.3.7 Perancangan Tampilan Checkout Tarif Kirim Member Mitra Batik 1

2

Shop.com

3

4

5

6

7 Hai dani !

Checkout Tarif Kirim

Menu Member Data Pengiriman

Profil


Shopping Cart

Categories

8

Hem


Calender

9

10

Gambar 3.68 Rancangan Tampilan Checkout Tarif Kirim Member Tabel 3.39 Keterangan Tampilan Checkout Tarif Kirim Member No 1 2 3 4 5 6 7 8 9 10

Jenis Button Button Button Button Button Button Button Form Pengiriman Calender label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu My Cart Menu Logout Tampil Data Transaksi Tampilan Calender Tampilan Footer

78

3.2.4.2.3.8 Perancangan Tampilan Bukti Pemesanan Member Mitra Batik

Shop.com

Bukti Pemesanan

1

2 3

Gambar 3.69 Rancangan Tampilan Bukti Pemesanan Member Tabel 3.40 Keterangan Tampilan Bukti Pemesanan Member No 1 2 3 4

Jenis Output Link Button Label

Keterangan Tampilan Data Bukti Pemesanan Member Kembali ke Home Member Print Tampilan Footer

3.2.4.2.3.9 Perancangan Tampilan Konfirmasi Pembayaran Member Mitra Batik 1

2

Shop.com

3

4

5

6

7 Hai dani !

Konfirmasi Pembayaran

Menu Member Konfirmasi Pembayaran Form

Profil


Shopping Cart

Categories Hem

8


Calender

9

10

11

12

Gambar 3.70 Rancangan Tampilan Konfirmasi Pembayaran Member

79

Tabel 3.41 Keterangan Tampilan Konfirmasi Pembayaran Member No

Jenis

1 2 3 4 5 6 7 8 9 10 11 12

Button Button Button Button Button Button Button Form Button Button Calender Label

Keterangan Menu Home Menu About Us Menu Products Menu Services Menu Contact Menu Konfirmasi Menu Logout Form Konfirmasi Submit “Send” Reset Tampilan Calender Tampilan footer

BAB III ANALISIS DAN PERANCANGAN

Recommend Documents