BAB 3 ANALISIS DAN PERANCANGAN SISTEM

BAB 3 ANALISIS DAN PERANCANGAN SISTEM

3. 1 Analisis Sistem Analisis sistem (system analysis) dapat didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan

maksud

untuk

mengidentifikasikan

permasalahan-permasalahan,

hambatan-hambatan, kesempatan-kesempatan dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. 3.1.1 Analisis Masalah Dari hasil analisis terhadap sistem yang sedang berjalan, proses penjualan produk yang dilakukan oleh Distro Ournation masih secara konvensional artinya pembeli harus mendatangi toko yang dituju untuk membeli barang yang di inginkan. Selain itu kurangnya media promosi terhadap produk-produk Distro Ourantion, sehingga informasi mengenai produk terbaru kepada pelanggan menjadi lambat. Begitu juga

dalam proses pencatatan, penyimpanan dan

penyajian dalam pengolahan data barang masih secara manual. 3.1.2 Analisis Sistem yang Sedang Berjalan Berdasarkan hasil observasi dan wawancara secara langsungdengan pihak Distro Ournation, prosedur penjualan produk yang saat ini dilakukan oleh Distro Ournation dapat digambarkan pada flowmap dibawah ini:

68

69

3.1.2.1 Prosedur Penjualan Langsung Prosedur penjualan langsung adalah tahap - tahap yang harus dilalui oleh pembeli dalam membeli barang secara langsung ke Distro Ournation, dimulai dari tahap memberikan daftar barang yang akan dibeli, pembuatan kwitansi, hingga proses penerimaan barang oleh pembeli. Adapun alur prosedur penjualan langsung (Gambar 3.1) adalah sebagai berikut : 1. Pembeli memberikan daftar barang yang akan dibeli pada kasir. 2. Kasir menerima daftar barang yang akan dibeli dari pembeli, kemudian melakukan pengecekan persediaan barang. 3. Jika barang yang akan dibeli tidak tersedia, maka kasir akan memberikan informasi pada pembeli bahwa daftar barang yang akan dibeli tidak tersedia. 4. Jika barang yang akan dibeli tersedia maka akan dilanjutkan dengan pembuatan kwitansi. 5. Kasir melakukan pembuatan kwitansi penjualan rangkap 2, 1 kwitansi diberikan kepada konsumen, 1 kwitansi disimpan di kasir untuk pencatatan data penjualan. 6. Kasir mencatat data penjualan kedalam buku penjualan.

70

Flowmap Penjualan Langsung Pembeli

Kasir

Daftar barang yang akan dibeli

Daftar barang yang akan dibeli

Pengecekan persediaan barang

Daftar barang yang akan dibeli tidak tersedia

Daftar barang yang akan dibeli tidak tersedia

Tidak Tersedia?

Ya

Daftar barang yang akan dibeli tersedia

Pembuatan kwitansi penjualan

2 1 Kwitansi

1 Kwitansi

Pencatatan data penjualan

Buku Penjualan barang

Kwitansi

A1

A2

2

Keterangan : A1 : Arsip buku penjualan kasir A2 : Arsip transaksi untuk kasir

Gambar 3.1 Flowmap Penjualan yang sedang berjalan

71

3.1.2.2. Prosedur Pelaporan Penjualan Harian Prosedur pelaporan ini meliputi barang apa saja yang telah terjual setiap harinya di Distro Ournation. Sehingga dari data penjualan barang dapat dijadikan evaluasi untuk mengetahui jenis barang apa saja yang disukai oleh pembeli. Adapun alur prosedur pelaporan adalah sebagai berikut : 1. Kasir mengumpulkan kwitansi, kemudian kasir menyesuaikan dengan buku penjualan. 2. Kasir mencatat laporan penjualan harian dari buku penjualan. 3. Kasir menyerahkan laporan rekapitulasi penjualan harian kepada pemilik. 4. Pemilik memeriksa laporan penjualan harian, sesuai atau tidak. Jika tidak sesuai, maka laporan penjualan harian dikembalikan pada kasir. Jika lengkap, maka disimpan di arsip penjualan harian.

72

Flowmap Pelaporan Penjualan Harian Kasir

Pemilik

Kwitansi

A1

Pencatatan laporan penjualan

Laporan penjualan harian

Laporan penjualan harian

Lengkap? Tidak

Laporan penjualan harian tidak sesuai

Laporan penjualan harian tidak sesuai

Ya

Laporan penjualan harian sesuai

A3

Keterangan : A3 : Arsip penjualan harian

Gambar 3.2 Flowmap Pelaporan penjualan harian 3.1.3 Solusi yang ditawarkan Untuk mengurangi permasalahan-permasalahan yang ada di Ournation, maka penulis

memberikan solusi dengan membangun sebuah sistem berupa

website penjualan

online. Dengan sistem tersebut diharapkan masalah

pengolahan barang yang manual, penjualan yang bersifat konvensional dan

73

masalah

promosi produk dapat teratasi. Sehingga pihak Ournation

memperluas jangkauan promosi dan penjualan, selain itu

dapat

memberikan

kemudahan kepada pelanggan untuk pembelian barang dengan melakukan pemesanan barang secara online. 3.1.4 Analisis Kebutuhan Non-Fungsional Tahap ini meliputi elemen-elemen apa saja yang dibutuhkan untuk sebuah sistem yang akan dibangun, spesifikasi masukan yang diperlukan sistem, keluaran yang akan dihasilkan sistem dan proses yang dibutuhkan sampai dengan sistem tersebut diimplementasikan. Kebutuhan non-fungisonal terbagi menjadi tiga yaitu analisis perangkat keras, perangkat lunak dan analisis pengguna. 3.1.4.1

Analisis Perangkat Keras Perangkat keras atau hardware merupakan salah satu hal yang sangat

penting, karena tanpa hardware yang memenuhi syarat, aplikasi yang akan dibangun tidak akan bisa berjalan. Berikut perangkat keras yang dapat direkomendasikan untuk aplikasi ini adalah sebagai berikut : 1. Admin a. Processor dengan kecepatan minimal 1,8 Ghz + matherboard b. Kapasitas Hardisk minimal 120 GB c. RAM minimal 512 MB d. VGA Card minimal 256 MB e. Monitor dengan resolusi minimal 1024 X 678 f. LAN Card 10/100 Mbps

74

g. Koneksi internet minimal 64 Kbps h. Keyboard dan Mouse 2. Member a. Processor dengan kecepatan minimal 1,8 Ghz + matherboard b. Kapasitas Hardisk minimal 80 GB c. RAM minimal 256 MB d. VGA Card minimal 128 MB e. Monitor dengan resolusi minimal 1024 X 678 f. LAN Card 10/100 Mbps g. Koneksi internet minimal 64 Kbps h. Keyboard dan Mouse 3.1.4.2

Analisis Perangkat Lunak

Kebutuhan perangkat lunak merupakan faktor yang harus dipenuhi untuk merancang sebuah perangkat lunak sehingga sesuai dengan maksud dan tujuan aplikasi yang dibangun. Perangkat lunak yang akan digunakan untuk Pembangunan Aplikasi E-Commerse di Distro Ournation adalah sebagai berikut: 1. Microsoft Windows XP. 2. XAMPP sebagai Web Server. 3. Macromedia Dreamwever sebagai editor HTML, PHP. 4. MySQL sebagai Server Database Management System 5. Mozila Firefox sebagai Browser

75

3.1.4.3

Analisis Pengguna Analisi pengguna atau user dilakukan untuk mengetahui siapa saja yang

akan menggunakan sistem penjualan

online. Pengguna atau

menggunakan sistem penjualan online terbagi menjadi 3 jenis

user

yang

yaitu admin,

member damn pengunjung. Admin bertugas dalam mengelola semua data yang ada pada website penjualan online mulai dari input data, update data, dan delete data. Member hanya dapat melakukan pemesanan barang secara online. Sedangkan Pengunjung hanya dapat melihat catalog produk. Spesifikasi pengguna pada website penjualan online sebagai berikut : 1. Administrator Melakukan pengolahan

data

operator. Karakteristik

yang harus

dimiliki adalah mengerti dan menguasai komputer dengan baik, mengetahui bagaimana melakukan pengolahan dan perawatan terhadap database yang ada pada website, dan memiliki pengetahuan tentang internet. 2. Member Member dapat melihat konten website dan melakukan pemesanan barang. Karakteristik yang dimiliki adalah memiliki kemampuan dibidang komputer dan dapat melakukan browsing di internet. 3. Pengunjung Pengunjung adalah pengguna biasa yang hanya dapat melihat konten yang ada di website tanpa dapat melakukan pemesanan. Karakteristik

76

yang dimiliki adalah memiliki kemampuan dibidang komputer dan dapat melakukan browsing di internet. 3.1.5 Analisis Perancangan Basis Data 3.1.5.1 Entity Relationship Diagram (ERD) Entity Relationship Diagram (ERD) merupakan suatu alat pemodelan yang digunakan untuk menggambarkan hubungan antar entitas yang terjadi, berisi komponen-komponen entitas dan relationship yang masing-masing dilengkapi dengan atribut-atribut yang merepresentasikan seluruh fakta dari sebagian dunia nyata. Entity Relationship dalam pemmbangun aplikasi e-commerce adalah suatu model jaringan susunan data yang disimpan dalam sistem secara abstrak, atau sebuah teknik untuk menggambarkan informasi yang dibutuhkan dalam sistem dan hubungan antar data-data tersebut berisi komponen-komponen entitas dan relationship

yang

masing-masing

dilengkapi

atribut-atribut

yang

mempresentasikan seluruh fakta dari sebagian dunia nyata. Aplikasi e-commerce di Distro Ournation terdiri dari beberapa entitas, atribut, dan beberapa relasi, dapat dilihat pada Gambar 3.3 berikutnya :

77

memiliki

1 kota mengelola

N

N

Id_cara Id_kab_kota

N

cara 1

memiliki N

1

Id_provinsi

Id_jenis N

Provinsi

mengelola

mengelola

1

1

memiliki

N

Jenis_jasa

1

jasa

1

1

mengelola

N

mengelola

1

1

Id_jasa memiliki

1

admin

1

1

1

1

1 1

N

memiliki

username

mengelola

mengelola mengelola

Id_pesanan

Ongkos kirim

dikirim

Id_ongkos

N

Id_member

mengelola

Id_produk

N

1

N

1

N

member

membeli

N

produk N

N

Id_retur

memiliki

N

foto

memiliki

1

1

1

1

1

1

Id_foto

N

memiliki

1

N

memiliki

kategori

memilki

Id_kategori N

N

stok Id_stok

Merk

1

memiliki

memilki

1

mengelola

1

N

mengelola

retur

N

memiliki

N

ukuran

Id_pesanandetail Id_merk Id_ukuran memiliki

N

N

Pesanandetail

memiliki

Gambar 3.3. ERD Sistem aplikasi e-commerce di Distro Ournation.

78

Kamus data : Admin = {#username, password} Cara = {# id_cara, nama_cara, isi_cara} Foto = {# id_foto, nama_foto, produk_foto, main_foto} Jasa = {#id_jasa, nama_jasa} Jenis_jasa = {# id_jenis, id_jasa, nama_jenis} Kategori = {#id_kategori, nama_kategori, gambar_kategori} Kota = { #id_kab_kota, id_provinsi, kab_kota } Member = {#id_member, username_member, password_member, nama_member, alamat_member, kodepos_member, telepon_member, email_member, provinsi_member, kota_member, aktivasi_member, login_terakhir_member } Merk = {#id_merk, nama_merk, gambar_merk} Ongkos_kirim = {#id_ongkos, id_jenis_jasa, id_kab_kota, harga_ongkos} Pesanan = {#id_pesanan, nama_pesanan, alamat_pesanan, telepon_pesanan, email_pesanan, kota_pesanan, status_pesanan, tanggal_pesanan, jam_pesanan, member_pesanan, provinsi_pesanan, kodepos_pesanan, jasa_pesanan, jenis_jasa_pesanan, ongkos_pesanan, total_pesanan, no_track_pesanan, batas_pesanan} Pesanandetail= {#id_pesanan, id_produk, jumlah, diskon, harga, nama, merk, kategori, ukuran, berat} Produk = {#id_produk, nama_produk, harga_produk, deskripsi_produk, kategori_produk, merk_produk, tgl_masuk_produk, diskon_produk, berat_produk, terjual_produk, dilihat_produk} Provinsi = {#id_provinsi, provinsi}

79

Retur = {#id_retur, id_pesanan, tgl_retur, alasan_retur, id_member, status_retur} Stock = {#id_produk, id_ukuran, stock_produk } Ukuran = {# id_ukuran, nama_ukuran }

80

3.1.6 Analisis Kebutuhan Fungsional Analisis kebutuhan fungsional bertujuan untuk mengetahui proses informasi yang mengalir melalui perangkat lunak. Untuk menggambarkan proses informasi secara umum digunakan alat bantu, yaitu Context Diagram (Diagram Konteks), Data Flow Diagram (DFD), kamus data dan spesifikasi proses.

81

3.1.6.1 Diagram Konteks (Context Diagram) Diagram konteks adalah diagram yang menggambarkan masukan, proses dan keluaran secara umum yang terjadi pada sistem. Diagram konteks untuk sistem penjualan online di Distro Ournation dapat digambarkan sebagai berikut :

Webmail Info Data Aktivasi Mail Info Data Konfirmasi Info Data Pesanan Info Data Pembayaran Info Data Pengiriman

Data Aktivasi Mail Data Konfirmasi Data Pesanan Data Pembayaran Data Pengiriman

Jasa Pengiriman

Kurs Dolar

Info Kurs Info Data Pengiriman Data Pengiriman

Data login Data member Data kategori Data Merk Data Ukuran Data Produk Data pesanan Data cara pesanan Data provinsi Data kota Data Kota ongkos kirim Data laporan Pemasukan Data Laporan Produk

Aplikasi E-commerce Distro Ournation

Admin

Info Data login Info Data member Info Data kategori Info Data Merk Info Data Ukuran Info Data Produk Info Data pesanan Info Data cara pesanan Info Data provinsi Info Data kota Info Data Kota ongkos kirim Info Data laporan Pemasukan Info Data Laporan Produk

Data login member Data lupa password member Data Profil member Data pencarian Data pesanan Melihat Data Kategori Melihat Data Produk Data keranjang belanja Data Pengiriman Data History Data konfirmasi Pembayaran Member

Info Data login member Info Data lupa password member Info Data Profil member Info Data pencarian Info Data pesanan Info Data Kategori Info Data Produk Info Data keranjang belanja Info Data Pengiriman Info Data History Info Data konfirmasi Pembayaran Data Registrasi Member Data pencarian Melihat Data Kategori Melihat Data Produk Melihat Data Petunjuk

Data Konfirmasi Pembayaran

Paypal

Info Pembayaran

Info Data Registrasi Member Info Data pencarian Info Data Kategori Info Data Produk Info Data Petunjuk

Pengunjung

Gambar 3.4 Diagram Konteks sistem aplikasi e-commerse di Distro Ournation.

82

3.1.6.2 Data Flow Diagram Data Flow Diagram merupakan suatu media yang digunakan untuk menggambarkan aliran data yang mengalir pada suatu sistem informasi. Dalam Data Flow Diagram (DFD) terdiri dari entitas luar, aliran data, proses, dan penyimpanan data.

Salah satu keuntungan

menggunakan

DFD adalah

memudahkan pemakai yang kurang menguasai bidang komputer untuk mengerti sistem yang akan dikerjakan. 1. DFD Level 1 DFD level 1 merupakan rincian dari proses yang telah dikemukakan pada gambar 3.4 diagram konteks. Adapun proses- proses yang terdapat di DFD Level 1 yaitu: proses registrasi, proses login, proses pengolahan data member, proses lihat produk, proses pengolahan data master, proses keranjang belanja, proses pengolahan data transaksi, proses history, proses laporan. DFD level 1 dapat dilihat pada Gambar 3.5 berikut:

83

Info Data Member Data Member Data Login Member Valid

Data pendaftaran Webmail

pengunjung

Info kurs dolar

Info aktivasi valid Data aktivasi

Member

Data login member

4 Lihat Produk

Info login valid, invalid

Info login valid, invalid 2 Login member Valid Data Kategori Login Data Produk Info Data Kategori Login Member Valid Info Data Produk Info Info data login valid, invalid Data Data retur produk Pembelian Info data retur produk Data login member Member 6 Keranjang Belanja

Kurs Dolar

Data login admin Info login admin valid, invalid

10 Retur

8 Histori

Login Data Admin Valid

Info kurs dolar Data Konfirmasi Info Konfirmasi

Konfirmasi

Info konfirmasi pembayaran

Data Member Data Kategori Data Ukuran Data Merk Data Produk Data Cara Pesanan Data Pesanan Data Provinsi Data Kota Data Ongkos kirim Data Retur

Kategori

Data Member 7 Data Pengiriman Pengolahan Data Info Data Pengiriman Transaksi Data Pembayaran Status Pembayaran

Data Login Valid

Admin

9 Laporan

Info Data Member Info Data Kategori Info Laporan Penjualan Info Data Ukuran Info Data Merk Info Data Produk Info Cara Pesanan Info Retur Info Data Pesanan Info Data Provinsi Info Data Kota Info Data Ongkos kirim Info Data Retur Info pesanandetail Info retur

Info Pesanan Info Data Kategori

Info data retur Data retur

Data Member Info Data Member

Data Pembelian Data Pesanan Info Data Pesanan

3 Pengolahan Data Member

Admin

Data login admin

1 Registrasi

Data registrasi Info registrasi

Data Kategori Data Produk

Info data pendaftaran

Info Kategori

Data Kategori

Info Data retur

Info Ukuran Data Ukuran Data Merk Info Merk Data Produk Info Produk

Ukuran

5 Pengolahan Data Master

Data Retur Info Data Kirim Data Ongkos Kirim Info Data Kota

Data Pesanan

Retur

Data Kota

Info Pesanan Merk

Info Pesanan detail

Ongkos Kirim

Info DataProvinsi

Data Provinsi

Jasa Pengiriman

Info Data Produk Info Data Produk Info Data pemesanan Data Pemesanan

Produk Pesanan

Info Pemesanan Data Pemesanan Paypal

Provinsi

Info Pesanandetail

Kota

Pesanandetail

Data Pesanandetail Info pesanan detail

Info Data Provinsi Info Data Kota Info Data Ongkos Kirim

Info Produk

Gambar 3.5 DFD Level 1

Info Data retur

Data retur

84

2. DFD Level 2 proses 1 Registrasi

Data Registrasi

Pengunjung

1.1 Input Data Registrasi

Data Registrasi Info Data Registrasi

Info Data Registrasi

Info Aktivasi Account

Member 1.2 Aktivasi Account

Data member Info Data member Data Aktivasi mail

Webmail

Info Data Aktivasi mail

Gambar 3.6 DFD Level 2 Proses 1 Registrasi

3. DFD Level 2 proses 2 Login Informasi login admin invalid

Admin

Admin

Data Login admin

Info Data Login Admin invalid Data login admin Login Admin valid

2.3 Lupa password 2.1 Input login

Data login admin Data login member

Data login member Data password baru

Info password baru

Member

2.2 Verifikasi Login

Info Data Login Member Invalid Data Member Login Member Informasi login Member invalid

Gambar 3.7 DFD Level 2 Proses 2 Login

Login Member valid

85

4.

DFD Level 2 Proses 3 Pengolahan data Member Info Data member Berhasil diubah

Data Member yang akan diubah

Member

Member Data Member yang akan di ubah

Info data member berhasil diubah

3.1 Ubah Profil

Data Password baru Info Data Password baru

3.2 Ubah Password

Data Password baru Info Data Password baru

Gambar 3.8 DFD Level 2 Proses 3 Pengolahan data Member

5. DFD Level 2 Proses 4 Lihat produk

info Diskon

Info diskon 4.2 Tampil Produk diskon

Data produk diskon

info data Produk terbaru Data Produk terbaru

info data Produk terlaris

info data produk banyak dilihat

data Produk telaris

Produk data Produk terlaris

Info data produk diskon

4.3 Tampil Data Produk Terlaris

data produk terlaris

pesanan

info data produk terlaris

Data Produk diskon

4.4 Tampil Data Produk data produk banyak dilihatPaling banyak dilihat

Data Produk banyak dilihat

data Produk terbaru

4.1 Tampil Data Produk Terbaru

info Produk

info data Produk terbaru Data Produk terbaru

Pengunjung

Data produk diskon

info data Produk terlaris

Member

info data produk banyak dilihat

data Produk banyak dilihat

Produk

Info Produk banyak dilihat

Gambar 3.9 DFD Level 2 Proses 4 Lihat produk

86

6. DFD level 2 Proses 5 Pengolahan Data Master Ongkos Kirim

Data Ongkos Kirim Info Ongkos Kirim

5.8 Pengolahan Data Ongkos Kirim

Pesanan

Data Kategori

gi n Va Ad l i d mi n

Data Member

Info Merk

Ukuran

Data Ukuran Info Data Ukuran

Info Data Retur

Retur

Data Retur

5.6 Pengolahan Merk

5.5 Pengolahan Data Ukuran

Info Merk

Data Kategori

Data Merk

Info data Ukuran Data Ukuran

Data Retur

5.9 Pengolahan Data Retur

Info Data Kategori

Data Produk

Admin

Data Provinsi

Data Merk

Info data Provinsi

Merk

Kategori

Info Kategori

Info member

Lo

Data Member

Data Kategori 5.7 Pengolahan Data Member

Data Pesanan Info Data Pesanan

5.1 Pengolahan Data Kategori

Info data Kategori

Info Data Member

Member

5.10 Pengolahan Data Pesanan


Data Ongkos Kirim Info Data Ongkos kirim

Info produk

Info data Kota Data Kota

5.2 Pengolahan Produk

5.3 Pengolahan Data Kota

Info Data Retur

Data Produk

Produk

Info produk

Data Kota

Kota

Info Data Kota

Data Provinsi Info Data Provinsi

5.4 Pengolahan Data Provinsi

Info Data provinsi

provinsi

Data provinsi

Gambar 3. 10 DFD level 2 Proses 5 Pengolahan Data Master

7. DFD level 2 Proses 6 Keranjang Belanja Data Produk

Info Data Produk Data Produk yang dibeli

6.1 Lanjut Belanja

Produk

Info Produk


Data produk Info produk

Member

6.2 Ubah jumlah


Info Data Produk Info Data Pesanan

Data Produk

6.3 Hapus produk

Pesanan

Data Pesanan

Info Data pesanan Data pesanan

6.4 Selesai Belanja

Info pesanan Data Pesanan

Gambar 3. 11 DFD level 2 Proses 6 Keranjang Belanja

87

8. DFD Level 2 Proses 7 Pengolahan Data Transaksi Data pemesanan Info Data Pemesanan

Member

Lo in m Ad n lid gi Va

Lo

gin M Va em lid be

Info Data Pesanan

r 7.1 Pengolahan Data Pesanan

Info Status pesanan Konfirmasi Status pesanan

Pesanan

Data Pesanan Data pesanandetail Info Data pesanandetail Data pesanandetail

Konfirmasi Status Pembayaran Info Status Pembayaran Status Pembayaran

Admin

7.2 Pengolahan Data Pembayaran

Data Pembayaran Data Pembayaran

Paypal

Pesanandetail

Info Data pesanandetail Konfirmasi Data Pembayaran Info Data Pembayaran Info Konfirmasi Pembayaran

Data Konfirmasi Pembayaran

Konfirmasi

Info Konfirmasi Pembayaran

Status Pembayaran Konfirmasi Status Pengiriman Info Status Pengiriman Info Data Jasa Pengiriman

Jasa Pengiriman

Data Jasa Pengiriman

Kota

Data Konfirmasi pembayaran

7.3 Pengolahan Data Pengiriman

Data Konfirmasi Pembayaran Info Konfirmasi Pembayaran Data Ongkos Kirim

Ongkos Kirim

Info Ongkos Kirim

Info Data Kota

Info Data Provinsi

Provinsi

Gambar 3.12 DFD Level 2 Proses 7 Pengolahan Data Transaksi

9. DFD Level 2 Proses 8 Lihat History Lo Me g i n m Va ber lid

8.1 Tampil Data Pemesanandet ail Info Pemesanandetail

Data Pesanandetail

Info pemesanandetail Data Pemesanandetail

pesanandetail

Info Data Pesanandetail Data Pesanandetail Info Data konfirmasi pembayaran

Member

Data konfirmasi pembayaran

Info retur Data Retur

8.3 Tampil data Retur

8.2 Tampil Data Konfirmasi Pembayaran

Data konfirmasi pembayaran

Konfirmasi Pembayaran

Info Data konfirmasi pembayaran

Data Retur Info Retur

Retur

Gambar 3. 13 DFD Level 2 Proses 8 Lihat History

88

10. DFD Level 2 Proses 9 Laporan Data Produk

9.1 Laporan Data Produk

Data laporan

Produk Info Produk

Info laporan Info data penjualan produk

Admin Data penjualan

Data laporan

Info Data Laporan

9.2 Laporan Penjualan

Konfirmasi

Info penjualan

Gambar 3. 14 DFD Level 2 Proses 9 Laporan

11. DFD Level 3 Proses 5.1 Proses Pengolahan Data Kategori

Tambah data kategori

5.1.1 Tambah kategori

Info kategori berhasil ditambah

Tambah Data Kategori Info kategori berhasil ditambah

data kategori berhasil diubah

Admin

Data Kategori yang akan diubah

5.1.2 Edit Kategori

Data kategori yang akan diubah

Kategori

Data Kategori Berhasil di ubah

Info Kategori Berhasil dihapus Data Kategori yang akan dihapus

5.1.3 Hapus Kategori

Hapus Data kategori Info kategori berhasil dihapus

Gambar 3. 15 DFD Level 3 Proses 5.1 Proses Pengolahan Data Kategori

89

12. DFD Level 3 Proses 5.2 Proses Pengolahan Data Produk Kategori

Data kategori

Info data kategori

Tambah data produk

5.2.1 Tambah Produk

Info produk berhasil ditambah

Tambah Data produk Info produk berhasil ditambah

data barang berhasil diubah

Admin

Data barang yang akan diubah

5.2.2 Edit Produk

Data produk yang akan diubah

Produk

Data produk Berhasil di ubah

Info produk berhasil dihapus

Data produk yang akan dihapus Info produk Berhasil dihapus

5.2.3 Hapus Produk

Hapus Data produk

Gambar 3. 16 DFD Level 3 Proses 5.2 Proses Pengolahan Data Produk 13. DFD Level 3 Proses 5.3 Proses Pengolahan Data Kota Provinsi Info data Provinsi

Tambah data Kota

Data provinsi

5.3.1 Tambah Kota

Info Kota berhasil ditambah

Tambah Data Kota Info Kota berhasil ditambah

data Kota berhasil diubah

Admin

Data Kota yang akan diubah

5.3.2 Edit Kota

Data Kota yang akan diubah

Kota

Data Kota Berhasil di ubah

Info Kota Berhasil dihapus Data Kota yang akan dihapus

5.3.3 Hapus Kota

Hapus Data Kota Info Kota berhasil dihapus

Gambar 3. 17 DFD Level 3 Proses 5.3 Proses Pengolahan Data Kota

90

14. DFD Level 3 Proses 5.4 Proses Pengolahan Data Provinsi

Tambah data Provinsi

5.4.1 Tambah Provinsi

Info Provinsi berhasil ditambah

Tambah Data Provinsi Info Provinsi berhasil ditambah

data Provinsi berhasil diubah

Data Provinsi yang akan diubah

Admin

5.4.2 Ubah Provinsi

Data Provinsi yang akan diubah

Provinsi Data Provinsi Berhasil di ubah

Info Provinsi Berhasil dihapus Data Provinsi yang akan dihapus

5.4.3 Hapus Provinsi

Hapus Data Provinsi Info Provinsi berhasil dihapus

Gambar 3. 18 DFD Level 3 Proses 5.4 Proses Pengolahan Data Provinsi

15. DFD Level 3 Proses 5.5 Proses Pengolahan Data Ukuran

Tambah Ukuran Propinsi Info Ukuran berhasil ditambah

5.5.1 Tambah Ukuran

Tambah Data Ukuran Info Ukuran berhasil ditambah

data Ukuran berhasil diubah

Admin

Data Ukuran yang akan diubah

5.5.2 Ubah Ukuran

Data Ukuran yang akan diubah

Ukuran

Data Ukuran Berhasil di ubah

Data Ukuran yang akan dihapus Info Ukuran Berhasil dihapus

5.5.3 Hapus Ukuran

Info Ukuran berhasil dihapus Hapus Data Ukuran

Gambar 3. 19 DFD Level 3 Proses 5.5 Proses Pengolahan Data Ukuran

91

16. DFD Level 3 Proses 5.6 Proses Pengolahan Data Merk 5.6.1 Tambah Merk

Tambah Merk Info Merk berhasil ditambah

Tambah Data Merk Info Merk berhasil ditambah

data Merk berhasil diubah

Admin

Data Merk yang akan diubah

5.6.2 Ubah Merk

Data Merk yang akan diubah

Merk

Data Merk Berhasil di ubah

Data Merk yang akan dihapus Info Merk Berhasil dihapus

5.6.3 Hapus Merk

Info Merk berhasil dihapus Hapus Data Merk

Gambar 3. 20 DFD Level 3 Proses 5.6 Proses Pengolahan Data Merk

17. DFD Level 3 Proses 5.7 Proses Pengolahan Data member Data Member yang akan dihapus

Admin Info data member berhasil dihapus

Data yang dicari Info data member ditemukan

5.7.1 Hapus Member

5.7.2 Pencarian

Data Member yang akan dihapus

Member

Info data member berhasil dihapus

Cek data yang dicari Data Member ditemukan

Gambar 3. 21 DFD Level 3 Proses 5.7 Proses Pengolahan Member

92

18. DFD Level 3 Proses 5.8 Proses Pengolahan Data Ongkos kirim

Kota

Data kota

Jasa pengiriman

Data jasa pengiriman Info Data jasa pengiriman

Info data kota Info Data jasa pengiriman 5.8.1 Tambah Data Ongkos Kirim Tambah Ongkos Kirim

Tambah data Ongkos Kirim

Info data provinsi

Info Ongkos Kirim berhasil ditambah

Info Ongkos Kirim berhasil ditambah data Ongkos Kirim berhasil diubah

Data jasa pengiriman

Data Ongkos Kirim yang akan diubah

Admin

Data provinsi

5.8.2 Edit Ongkos Kirim

Data Ongkos Kirim yang akan diubah

Ongkos_Kirim

Data Ongkos Kirim Berhasil di ubah Data yang dicari

5.8.4 pencarian

Cek kata yang dicari Ongkos kirim ditemukan

Data ongkos kirim ditemukan Data Ongkos Kirim yang akan dihapus Info Ongkos Kirim Berhasil dihapus

Info Ongkos Kirim berhasil dihapus

5.8.3 Hapus Ongkos Kirim

Hapus Data Ongkos Kirim

Provinsi

Gambar 3. 22 DFD Level 3 Proses 5.8 Proses Pengolahan Ongkos Kirim 3.1.6.3 Spesifikasi proses Spesifikasi proses digunakan untuk menggambarkan proses model aliran yang terdapat pada DFD. Spesifikasi proses dari gambaran DFD diatas akan dijelaskan pada table 3.1 dibawah ini : No 1.

Proses

Keterangan

No.Proses

1

Nama

Registrasi

Source

Pengunjung

Input

Data registrasi

Output

Info registrasi

Destination

Pengunjung

Logika proses

1. Pengunjung memilih menu Registrasi Member 2. Sistem menampilkan form registrasi 3. Pengunjung mengisi data registrasi

93

4. Sistem melakukan validasi data pendaftaran yang telah di isi oleh pengunjung 5. Jika data pendaftaran valid maka sistem akan menyimpan data pendaftaran dan mengirim link aktivasi ke email pengunjung untuk melakukan aktivasi 2.

No Proses

2

Nama

Login

Source

Admin, Member

Input

Data login Admin, Data login Member

Output

Info login admin, Info login Member

Destination

Admin, Member

Logika Proses

3.

1. Admin dan Member memasukan data login. 2. Apabila e-mail dan password yang dimasukan salah maka akan ada info login invalid. 3. Apabila e-mail dan password benar maka login valid, akan menuju ke halaman utama.

No Proses

3

Nama

Pengolahan Data Member

Source

Member

Input

Data member

Output

Info data member

Destination

Member

Logika Proses 4.

1. Member masuk ke menu profil 2. Member masuk ke menu ubah password

No.proses

4

Nama

Lihat Produk

Source

Member, Pengunjung

Input

Data Produk

Output

Info Produk

94

Destination

Member, Pengunjung

Logika proses

5.

1. Member atau Pengunjung masuk ke website Distro Ournation 2. Member dan pengunjung masuk ke halaman Home 3. Tampil data produk terbaru, produk terlaris, produk diskon, produk paling banyak dilihat

No.Proses

5

Nama

Pengolahan Data Master

Source

Admin

Input

Output

Data Member, Data Kategori, Data Ukuran, Data Merk, Data Produk, Data Cara Pesanan, Data Pesanan, Data Provinsi, Data Kota, Data Ongkos kirim, Data Retur Info Data Member, Info Data Kategori, Info Data Ukuran, Info Data Merk, Info Data Produk, Info Data Cara Pesanan, Info Data Pesanan, Info Data Provinsi, Info Data Kota, Info Data Ongkos kirim, Data Retur

Destination

Admin

Logika proses

6.

1. Admin masuk ke halaman admin 2. Admin mengelola data member, data kategori, data ukuran, data merk, data produk, data cara pesanan, data pesanan, data provinsi, data kota, data ongkos kirim, data retur

No.Proses

6

Nama

Keranjang Belanja

Source

Member

Deskripsi

Digunakan untuk mengolah data Pemesanan, melihat produk, mengubah dan menghapus produk pesanan.

Input

Data pesanan

Output

Info data pesanan

Destination

Member

Logika proses

1. Member melakukan login 2. Member melakukan pemesanan 3. Member mengolah data pesanan

95

7.

No.Proses

7

Nama

Pengolahan Data Transaksi

Source

Admin

Input

data pembelian

Output

Info konfirmasi pembelian

Destination

Admin

Logika proses

8.

1. Member melakukan pemesanan 2. Sistem akan menampilkan data pesanan dan biaya pesanan yang harus dibayar dan kemudian akan di kirim ke alamat email member. 3. Sistem menyimpan data daftar pemesanan 4. Admin mengolah data pesanan.

No.Proses

8

Nama

Lihat History

Source

Member

Input

Data Pemesanan, Data Konfirmasi pembayaran,

Output

Info Pemesanan, konfirmasi Pembayaran

Destination

Member

Logika proses

9.

1. Member masuk ke halaman member 2. Member melihat history 3. Member melakukan konfirmasi

No.Proses

9

Nama

Laporan

Source

Admin

Input

Data Laporan Produk, Data Laporan Penjualan

Output

Info Data Laporan Produk, Info Data Laporan Penjualan

Destination

Admin

Logika proses

1. Admin masuk ke data laporan produk dan laporan penjualan

96

2. Admin melihat laporan produk dan laporan penjualan. 10. No.Proses

1.1

Nama

Input Data Registrasi

Source

Pengunjung

Input

Data registrasi member

Output

Info registrasi member

Destination

Pengunjung

Logika proses

11. No.Proses

1. Pengunjung masuk ke registrasi member 2. Sistem menampilkan form registrasi 3. Pengunjung mengisi data registrasi 4. Sistem melakukan validasi data registrasi yang telah di isi oleh pengunjung 1.2

Nama

Aktivasi Account

Source

Webmail

Input

Data registrasi

Output

Info login member

Destination

Pengunjung

Logika proses

12. No.proses

1. sistem akan menyimpan data aktivasi dan mengirim link aktivasi ke email pengunjung untuk melakukan aktifasi 2. Member mengklik link aktivasi 2.1

Nama

Input Login

Source

Member, admin

Input

Data login member, Data login admin,data login

Output

Info login admin invalid, Info login member invalid,info invalid.

Destination

Member, admin,

Logika proses

1. Member dan admin memasukan data login untuk masuk ke halaman member dan admin

97

13. No.proses

2.2

Nama

Verifikasi login

Source

Member, admin

Input

Data login member, Data login admin,data login

Output

Info login admin invalid, Info login member invalid, info invalid.

Destination

Member, admin

Logika proses

14. No.proses

1. 2. 3. 4.

Admin dan member mengisi data login Periksa data login Jika data login salah, maka muncuk info kesalahan Jika data login benar, maka masuk valid dan menuju ke halaman utama

2.3

Nama

Lupa Password

Source

Member

Input

Data Login Member

Output

Info Login Member Invalid

Destination

Member

Logika proses

15. No.proses

1. Member mengklik lupa password 2. Sistem akan mengirimkan link konfirmasi password melalui email 3.1

Nama

Ubah Profil

Source

Member

Input

Data member yang akan di ubah

Output

info Data member yang akan di ubah

Destination

Member

Logika proses

1. Member memasukkan data pada profil yang akan diubah 2. Apabila ada data yang salah, maka akan muncul pesan kesalahan 3. Apabila data yang kosong, maka akan ada pesan data masih kosong 4. Apabila data masukan benar, maka data yang baru

98

pada profil admin dan pelanggan disimpan ke database 16. No.proses

3.2

Nama

Ubah Password

Source

Member

Input

Data Password baru

Output

Info Data Password baru

Destination

Member

Logika proses

17. No.proses

1. Member memasukkan data password lama dan data password baru 2. Jika data password lama tidak cocok, maka akan muncul pesan kesalahan 3. member memasukkan data password baru dan konfirmasi password baru 4. Jika password baru dan konfirmasi password baru tidak cocok maka akan ada pesan kesalahan dan apabila cocok, maka data password baru akan disimpan ke database 4.1

Nama

Tampil produk terbaru

Source

Pengunjung dam member

Input

Data Produk terbaru

Output

Informasi data produk terbaru

Destination

Pengunjung dam member

Logika proses 18. No.Proses

1. Pengunjung dan member mengklik halaman home 2. Tampil data produk terbaru 4.2

Nama

Tampil Produk Diskon

Source

Pengunjung dan Member

Input

Data Produk Diskon

Output

Info Diskon

Destination


Logika proses

1. Pengunjung dan member mengklik halaman home

99

2. Tampil data produk diskon 19. No.Proses

4.3

Nama

Tampil produk terlaris

Source


Input

Data Produk terlaris

Output

Informasi data produk terlaris

Destination


Logika proses 20. No.Proses

1. Pengunjung dan member mengklik halaman home 2. Tampil data produk terlaris 4.4

Nama

Tampil data produk paling banyak dilihat

Source


Input

Data Produk banyak dilihat

Output

Info produk banyak dilihat

Destination


Logika proses 21. No.proses

1. Pengunjung dan member mengklik halaman home 2. Tampil data produk paling banyak dilihat 5.1

Nama

Pengolahan data kategori

Source

Admin

Input

Data kategori

Output

Info kategori

Destination

Admin 1. Admin memilih menu pengolahan kategori 2. Admin dapat menekan tombol tambah data, hapus dan ubah

Logika proses

22. No.proses

5.2

Nama

Pengolahan data produk

Source

Admin

100

Input

Data produk

Output

Info produk

Destination

Admin 1. Admin memilih menu pengolahan produk 2. Admin dapat menekan tombol tambah data, hapus dan ubah

Logika proses

23. No.proses

5.3

Nama

Pengolahan data kota

Source

Admin

Input

Data kota

Output

Info data kota

Destination

Admin 1. Admin memilih menu pengolahan data kota 2. Admin dapat menekan tombol tambah data, hapus dan ubah

Logika proses

24. No.proses

5.4

Nama

Penolahan data Provinsi

Source

Admin

Input

Data provinsi

Output

Info provinsi

Destination

Admin 1. Admin memilih menu pengolahan data provinsi 2. Admin dapat menekan tombol tambah data, hapus dan ubah

Logika proses

25. No.proses

5.5

Nama

Pengolahan Data Ukuran

Source

Admin

Input

Data Ukuran

Output

Info Data Ukuran

Destination

Admin

Logika proses

1. Admin memilih menu pengolahan data ukuran 2. Admin dapat menekan tombol tambah data, hapus

101

dan ubah 26. No.proses

5.6

Nama

Pengolahan data Merk

Source

Admin

Input

Data Merk

Output

Info Merk

Destination

Admin 1. Admin memilih menu pengolahan data merk 2. Admin dapat menekan tombol tambah data, hapus dan ubah

Logika proses

27. No.proses

5.7

Nama

Pengolahan Data Member

Source

Admin

Input

Data Member

Output

Info Member

Destination

Admin 1. Admin memilih menu pengolahan data member 2. Admin dapat menekan tombol hapus dan detail


5.8

Nama

Pengolahan Data Ongkos Kirim

Source

Admin

Input

Data Ongkos Kirim

Output

Info Data Ongkos Kirim

Destination

Admin

Logika proses

1. Admin memilih menu pengolahan data ongkos kirim 2. Admin dapat menekan tombol tambah data, hapus dan ubah 5.10

29. No.proses Nama

Pengolahan Data Pesanan

Source

Admin

102

Input

Data Data Pesanan

Output

Info Data Pesanan

Destination

Admin 1. Admin memilih menu pengolahan data pesanan 2. Admin dapat menekan tombol detail, hapus dan ubah

Logika proses

30. No.proses

6.1

Nama

Lanjut Belanja

source

Member

Input

Data produk yang dibeli

Output

Info data produk

Destination

Member

Logika proses

31. No.proses

1. Member menekan tombol lajut belanja untuk memilih produk yang berbeda 2. Klik masukan keranjang untuk menyimpan data pesanan dalam keranjang 6.2

Nama

Edit Jumlah

Source

Member

Input

Data Produk

Output

Info Produk

Destination

Member

Logika proses

32. No.proses

1. Member merubah jumlah produk yang akan dibeli 2. Member kemudian menekan tombol ubah jumlah untuk menyimpan perubahan jumlah produk yang akan dibeli 6.3

Nama

Hapus Produk

Source

Member

Input

Data produk

Output

Info data produk

103

Destination

Member 1.

Logika proses

33. No.proses

Member menekan tombol hapus pada salah satu produk yang akan dihapus. 3. Klik ok untuk menghapus, klik batal untuk membatalkan penghapusan

6.4

Nama

Selesai Belanja

Source

Member

Input

Data pesanan

Output

Info data pesanan

Destination

Member


1. Klik tombol selesai belanja 2. Tampil data konfirmasi pengiriman 7.1

Nama

Pengolahan data pesanan

Source

Admin, Member

Input

Konfirmasi status pesanan, data pemesanan

Output

Info status pesanan, info data pemesanan

Destination

Admin, Member

Logika proses

35. No.proses

1. Member selesai melakukan pemesanan 2. Data pesanan akan masuk ke halaman pesanan di admin 7.2

Nama

Pengolahan data pembayaran

Source

Admin, Member

Input

Info status pembayaran, Konfirmasi data pembayaran

Output

Konfirmasi status pembayaran, info data pembayaran

Destination

Admin, Member

Logika proses

1. Apabila telah melakukan pembayaran, pelanggan dapat melakukan konfirmasi dengan memilih menu history pemesanan

104

2. Kemudian menekan tombol konfirmasi 3. Masukan data konfirmasi pembayaran, jika data masih kosong atau salah, maka akan muncul pesan kesalahan 4. Apabila data benar, klik tombol konfirmasi 36. No.proses

7.3

Nama

Pengolahan data pengiriman

Source

Admin

Input

Informasi status pengiriman

Output

Konfirmasi status pengiriman

Destination

Admin 1. Pelanggan memilih jasa pengiriman yang diinginkan 2. Kemudian pelanggan memilih propinsi dan kota tujuan 3. Untuk alamat pengiriman, pelanggan dapat menggunakan alamat pada saat pendaftaran 4. Jika ingin alamat lain, pelanggan memasukkan alamat lain yang diinginkan 5. Jika data masih kosong, maka akan muncul pesan data masih kosong 6. Jika data sudah benar, maka tekan tombol pesan sekarang dan secara otomatis info pemesanan akan dikirimkan ke email member

Logika proses

37. No.proses

8.1

Nama

Tampil data pesanandetail

Source

Member

Input

data pesanandetail

Output

Info data pesanandetail

Destination

Member


1. Member masuk ke menu history 2. Kemudian menekan tombol detail 8.2

Nama

Tampil data Konfirmasi pembayaran

Source

Member

Input

data Konfirmasi pembayaran

105

Output

Info data Konfirmasi pembayaran

Destination

Member

Logika proses

39. No.proses

1. Klik tombol history pemesanan 2. Klik tombol konfirmasi untuk konfirmasi pemesanan 8.3

Nama

Tampil data retur

Source

Member

Input

data retur

Output

data retur

Destination

Member

Logika proses

40. No.proses

1. Klik tombol history pemesanan 2. Jika produk yang dibeli sudah sampai maka bisa melakukan retur dengan klik tombol retur 9.1

Nama

Laporan Data produk

Source

Admin

Input

Data laporan

Output

Info Data laporan

Destination

Admin

Logika proses

41. No.proses

1. Admin masuk ke halaman admin 2. Admin menekan tombol laporan produk 9.2

Nama

Laporan Penjualan

Source

Admin

Input

Data laporan

Output

Info Data laporan

Destination

Admin

Logika proses

melakukan

1. Admin masuk ke halaman admin 2. Admin menekan tombol laporan penjualan

106

42. No.proses

5.1.1

Nama

Tambah Kategori

Source

Admin

Input

Tambah data kategori

Output

Info kategori telah ditambah

Destination

Admin

Logika proses

43. No.proses

1. 2. 3. 4.

Admin memilih menu kategori Admin menekan tombol tambah data Admin mengisi form tambah kategori Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi data yang kosong tersebut 5.1.2

Nama

Edit kategori

Source

Admin

Input

Edit data kategori

Output

Info data kategori telah diubah

Destination

Admin

Logika proses

1. Admin memilih menu kategori 2. Admin menekan tombol edit 3. Admin mengisi form edit kategori 4. Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi data yang kosong tersebut 5.1.3

44. No.proses Nama

Hapus kategori

Source

Admin

Input

Data kategori

Output

Info data kategori dihapus

Destination

Admin

107

Logika proses

45. No.proses

1. Admin memilih menu kategori 2. Admin menekan tombol hapus 3. Muncul konfimasi penghapusan data 5.2.1

Nama

Tambah produk

Source

Admin

Input

Tambah data produk

Output

Info produk telah ditambah

Destination

Admin

Logika proses

46. No.proses

1. 2. 3. 4.

Admin memilih menu produk Admin menekan tombol tambah data Admin mengisi form tambah produk Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi data yang kosong tersebut 5.2.2

Nama

Edit produk

Source

Admin

Input

Edit produk

Output

Info data produk telah diubah

Destination

Admin

Logika proses

47. No.proses

1. 2. 3. 4.

Admin memilih menu produk Admin menekan tombol edit Admin mengisi form edit produk Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi 5.2.3

Nama

Hapus produk

Source

Admin

Input

Data produk

Output

Info data Produk dihapus

108

Destination

Admin

Logika proses

1. Admin memilih menu produk 2. Admin menekan tombol hapus 3. Muncul konfimasi penghapusan data 5.3.1

48. No.proses Nama

Tambah Kota

Source

Admin

Input

Tambah data Kota

Output

Info Kota telah ditambah

Destination

Admin

Logika proses

49. No.proses

1. 2. 3. 4.

Admin memilih menu kota Admin menekan tombol tambah data Admin mengisi form tambah kota Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi data yang kosong tersebut 5.3.2

Nama

Edit Kota

Source

Admin

Input

Edit data Kota

Output

Info data Kota telah diubah

Destination

Admin

Logika proses

50. No.proses

1. 2. 3. 4.

Admin memilih menu kota Admin menekan tombol edit Admin mengisi form edit kota Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi 5.3.3

Nama

Hapus Kota

Source

Admin

Input

Data provinsi

109

Output

Info data Kota dihapus

Destination

Admin

Logika proses

1. Admin memilih menu kota 2. Admin menekan tombol hapus 3. Muncul konfimasi penghapusan data 5.4.1

51. No.proses Nama

Tambah Provinsi

Source

Admin

Input

Tambah data Provinsi

Output

Info Provinsi telah ditambah

Destination

Admin

Logika proses

52. No.proses

1. 2. 3. 4.

Admin memilih menu provinsi Admin menekan tombol tambah data Admin mengisi form tambah provinsi Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi data yang kosong tersebut 5.4.2

Nama

Edit Provinsi

Source

Admin

Input

Edit data Provinsi

Output

Info data kota telah diubah

Destination

Admin

Logika proses

53. No.proses

1. 2. 3. 4.

Admin memilih menu provinsi Admin menekan tombol edit Admin mengisi form edit kota Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi 5.4.3

Nama

Hapus Provinsi

Source

Admin

110

Input

Data Provinsi

Output

Info data provinsi dihapus

Destination

Admin

Logika proses

1. Admin memilih menu provinsi 2. Admin menekan tombol hapus 3. Muncul konfimasi penghapusan data 5.5.1

54. No.proses Nama

Tambah Ukuran

Source

Admin

Input

Tambah data ukuran

Output

Info produk telah ditambah

Destination

Admin

Logika proses

55. No.proses

1. 2. 3. 4.

Admin memilih menu Ukuran Admin menekan tombol tambah data Admin mengisi form tambah Ukuran Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi data yang kosong tersebut 5.5.2

Nama

Ubah Ukuran

Source

Admin

Input

Edit data ukuran

Output

Info data ukuran telah diubah

Destination

Admin

Logika proses

56. No.proses Nama

1. 2. 3. 4.

Admin memilih menu ukuran Admin menekan tombol edit Admin mengisi form edit ukuran Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi 5.5.3 Hapus Ukuran

111

Source

Admin

Input

Data ukuran

Output

Info data ukuran dihapus

Destination

Admin

Logika proses

1. Admin memilih menu ukuran 2. Admin menekan tombol hapus 3. Muncul konfimasi penghapusan data 5.6.1

57. No.proses Nama

Tambah merk

Source

Admin

Input

Tambah merk

Output

Info merk telah ditambah

Destination

Admin

Logika proses

58. No.proses

1. 2. 3. 4.

Admin memilih menu merk Admin menekan tombol tambah data Admin mengisi form tambah merk Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi data yang kosong tersebut 5.6.2

Nama

Edit merk

Source

Admin

Input

Data merk yang akan di ubah

Output

Data merk berhasil di ubah

Destination

Admin

Logika proses

59. No.proses

1. 2. 3. 4.

Admin memilih menu merk Admin menekan tombol edit Admin mengisi form edit merk Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi 5.6.3

112

Nama

Hapus merk

Source

Admin

Input

Data merk yang akan di hapus

Output

Info merk berhasil di hapus

Destination

Admin

Logika proses

1. Admin memilih menu merk 2. Admin menekan tombol hapus 3. Muncul konfimasi penghapusan data 5.7.1

60. No.proses Nama

Hapus Member

Source

Admin

Input

Data member yang akan di hapus

Output

Info data member berhasil di hapus

Destination

Admin

Logika proses

1. Admin memilih menu member 2. Admin menekan tombol hapus 3. Muncul konfimasi penghapusan data 5.7.2

61. No.proses Nama

pencarian member

Source

Admin

Input

Data member yang akan di cari

Output

Info data member ditemukan

Destination

Admin

Logika proses

1. Admin memilih menu member 2. Admin menekan tombol search 3. Tampil data admin 5.8.1

62. No.proses Nama

Tambah ongkos kirim

Source

Admin

Input

Tambah data ongkos kirim

Output

Info ongkos kirim berhasil ditambah

113

Destination Logika proses

63. No.proses

Admin 1. 2. 3. 4.

Admin memilih menu ongkos kirim Admin menekan tombol tambah data Admin mengisi form tambah ongkos kirim Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi data yang kosong tersebut 5.8.2

Nama

Edit ongkos kirim

Source

Admin

Input

Data ongkos kirim yang akan diubah

Output

Data ongkos kirim berhasil diubah

Destination

Admin

Logika proses

64. No.proses

1. 2. 3. 4.

Admin memilih menu Ongkos kirim Admin menekan tombol edit Admin mengisi form edit Ongkos kirim Apabila data tidak kosong dan benar maka data kategori akan disimpan ke dalam database 5. Apabila data kosong maka akan ada informasi data tidak boleh kosong dan admin harus mengisi 5.8.3

Nama

Hapus ongkos kirim

Source

Admin

Input

Data ongkos kirim yang akan dihapus

Output

Info ongkos kirim berhasil dihapus

Destination

Admin

Logika proses

1. Admin memilih menu Ongkos kirim 2. Admin menekan tombol hapus 3. Muncul konfimasi penghapusan data 5.8.4

65. No.proses Nama

pencarian

Source

Admin

Input

Data kota Ongkos kirim yang akan di cari

114

Output

Data ongkos kirim ditemukan

Destination

Admin

Logika proses

1. Admin memilih menu Ongkos kirim 2. Admin menekan tombol search 3. Tampil data ongkos kirim yang di cari

3.1.6.4 Kamus Data Kamus data adalah kumpulan dari elemen-elemen atau simbol yang digunakan untuk membantu dalam penggambaran atau pengidentifikasian setiap field atau

file didalam sistem. Kamus data merupakan deskripsi

formal

mengenai seluruh elemen yang mencakup DFD. Kamus data untuk diagram alir data pada aplikasi penjualan online di Distro Ournation ini akan dijelaskan sebagai berikut : 3.2 Tabel Kamus Data Kamus

Keterangan

Nama aliran data

Data Member

Where used/how used Deskripsi Struktur Data

Proses 1, Proses 2, proses 3, proses 4, proses 6. proses 7, proses 8 Berisi data member id_member+username_member+Password_member+nam a_member+alamat_member+kodepos_member+telepon_ member+email_member+provinsi_member+kota_membe r+aktivasi_member.

115

Id_member

[0-9]

username_member

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

Password_member

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

nama_member

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

alamat_member

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

kodepos_member

[0-9]

telepon_member

[0-9]

email_member

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

provinsi_member

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

kota_member

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

Nama Aliran Data

Data Admin

Where used/how used

proses 2.1, proses 2.2, proses 5, proses 9

Deskripsi

Berisi Data Admin

Struktur Data

Username+password

Username

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

Password

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

Nama Aliran Data

Data Provinsi

Where used/how used

Proses 5.3, Proses 5.4, Proses 5.8 , Proses 7.3,

Deskripsi

Berisi Data provinsi

Struktur Data

Id_Kategori+Nama_provinsi

Id_Kategori

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

Nama_provinsi Nama Aliran Data

Data Produk

Where used/how used

Proses 4, Proses 5.2, Proses 6, Proses 9 .2.

Deskripsi

id_produk

Berisi Data Produk id_produk+nama_produk+harga_produk+deskripsi_produ k+kategori_produk+merk_produk+tgl_masuk_produk+dis kon_produk+berat_produk+terjual_produk+dilihat_produ k [0-9]

nama_produk

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

Struktur Data

116

harga_produk

[0-9]

deskripsi_produk

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

kategori_produk

[0-9]

merk_produk

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

tgl_masuk_produk

[0-9]

diskon_produk

[0-9]

berat_produk

[0-9]

terjual_produk

[0-9]

dilihat_produk

[0-9]

Nama Aliran Data

Data Kota

Where used/how used

Proses 5 .3, Proses 7,3

Deskripsi

Berisi Data Kota

Struktur Data id_kab_kota

id_kab_kota+id_provinsi+kab_kota+kab [0-9]

id_provinsi

[|0-9]

kab_kota

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

kab

[A-Z|a-z|0-9] Nama Aliran Data

Data Provinsi

Where used/how used

Proses 5 .4, proses 7.3

Deskripsi

Berisi Data Provinsi

Struktur Data id_provinsi

Id_provinsi+provinsi [0-9]

provinsi

[A-Z|a-z]

Nama Aliran Data Where used/how used

Data Ukuran

Deskripsi

Proses 5 .5. Berisi Data Ukuran

Struktur Data

id_ukuran+nama_ukuran

id_ukuran

[0-9]

nama_ukuran

[A-Z|a-z]

Nama Aliran Data

Data Kategori

Where used/how used

Proses 5 .1, Proses 5 .2.

Deskripsi

Berisi data Kategori

Struktur Data

id_kategori+nama_kategori

117

id_kategori

[0-9]

nama_kategori

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

Nama Aliran Data

Data Merk

Where used/how used

Proses 5 .6.

Deskripsi

Berisi Data Merk

Struktur Data

id_merk+nama_merk

id_merk

[0-9]

nama_merk

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

Nama Aliran Data

Data Ongkos Kirim

Where used/how used

Proses 5 .8, proses 7.3.

Deskripsi

Berisi Data Ongkos Kirim

Struktur Data

id_ongkos+id_jenis_jasa+id_kab_kota+harga_ongkos

id_ongkos

[0-9]

id_jenis_jasa

[A-Z|a-z|]

id_kab_kota

[0-9]

harga_ongkos

[0-9]

Nama Aliran Data Where used/how used Deskripsi

Data Pesanan Proses 5.10, proses 6.2, proses 6 .3, proses 6.4, proses 7.1, proses 7.2, proses 7.3 Berisi data pesanan id_pesanan+nama_pesanan+alamat_pesanan+telepon_pes anan+email_pesanan+kota_pesanan+status_pesanan+tang

Struktur Data

gal_pesanan+jam_pesanan+member_pesanan+provinsi_p esanan+kodepos_pesanan+jasa_pesanan+jenis_jasa_pesan an+ongkos_pesanan+total_pesanan+no_track_pesanan

id_pesanan

[0-9]

nama_pesanan

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

alamat_pesanan

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

telepon_pesanan

[0-9]

email_pesanan

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

kota_pesanan

[A-Z|a-z|]

118

status_pesanan

[A-Z|a-z]

tanggal_pesanan

[0-9]

jam_pesanan

[0-9]

member_pesanan

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

provinsi_pesanan

[A-Z|a-z|]

kodepos_pesanan

[0-9]

jasa_pesanan

[A-Z|a-z|]

jenis_jasa_pesanan

[A-Z|a-z|]

ongkos_pesanan

[0-9]

total_pesanan

[0-9]

no_track_pesanan

[0-9]

Nama Aliran Data

Data Pesanandetail

Where used/how used

Proses 8.1, proses 8.2

Deskripsi

Berisi data pesanandetail id_pesanan+id_produk+jumlah+diskon+harga+nama+mer

Struktur Data k+kategori+ukuran+berat

id_pesanan

[0-9]

id_produk

[0-9]

jumlah

[0-9]

diskon

[0-9]

harga

[0-9]

nama

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

merk

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

kategori

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

ukuran

[A-Z|a-z]

berat

[0-9]

119

3.2 Perancangan Basis Data 3.2.1 Skema Relasi pesanan

pesanandetail PK

id_pesanandetail

FK1 FK2

jumlah diskon harga nama merk kategori ukuran berat id_pesanan id_member

provinsi PK

id_provinsi

FK1

provinsi Username

PK

id_pesanan

FK1 FK2 FK3

nama_pesanan alamat_pesanan telepon_pesanan email_pesanan kota_pesanan status_pesanan tanggal_pesanan jam_pesanan member_pesanan provinsi_pesanan kodepos_pesanan jasa_pesanan jenis_jasa_pesanan ongkos_pesanan total_pesanan id_jasa id_member id_kab_kota

Cara PK

Id_cara

FK1

Nama_cara Isi_cara Username

kategori

retur PK

id_retur

FK1

tgl_retus alasan_retur status retur id_pesanan

PK

id_kategori

FK1

nama_kategori gambar_kategori Username

stock PK

id_stock

FK1

stock_produk Username

Admin PK

Username Password

foto PK

id_foto

FK1

nama_foto main_foto Username

merk

kota PK

id_kab_kota

PK

id_merk

FK1 FK2

kab_kota id_provinsi Username

FK1

nama_merk gambar_merk Username produk

member PK

id_member

FK1 FK2 FK3

username_member password_member nama_member alamat_member kodepos_member telepon_member email_member aktivasi_member id_kab_kota id_provinsi Username

ongkos_kirim PK

id_ongkos

FK1 FK2 FK3

id_jenis_jasa harga_ongkos id_jenis id_kab_kota Username

PK

id_produk

FK1 FK2 FK3 FK4 FK5 FK6

nama_produk harga_produk deskripsi_produk kategori_produk merk_produk tgl_masuk_produk diskon_produk berat_produk Username id_kategori id_stock id_foto id_merk id_ukuran

ukuran PK

id_ukuran

FK1

nama_ukuran Username

jasa PK

id_jasa

FK1

nama_jasa Username

jenis_jasa PK

id_jenis

FK1

nama_jenis id_jasa

Gambar 3. 23 Skema Relasi 3.2.2 Struktur Tabel Tabel merupakan tempat penyimpanan informasi dari sebuah aliran data dalam sebuah aplikasi. Berikut merupakan struktur dari beberapa tabel sistem yang akan dibangun.

120

1. Tabel Admin Fungsi = Menyimpan data admin Primary Key = username Struktur tabel :

Nama Field username password

3.3 Struktur Tabel Admin Tipe data Ukuran Kunci * Varchar 50 Varchar 50

Keterangan Auto_Increment Not null

2. Tabel Cara Fungsi = Menyimpan data cara (petunjuk) Primary Key = id_cara Struktur tabel : 3.4 Struktur Tabel Cara Tipe data Ukuran Integer 11 Varchar 50 Text Varchar 15

Nama Field id_cara nama_cara Isi_cara Username

Kunci *

Keterangan Auto_Increment Not null Not null Not null

3. Tabel Foto Fungsi = Menyimpan data foto Primary Key = id_foto Struktur tabel :

Nama Field id_foto nama_foto produk_foto main_foto Id_produk

3.5 Struktur Tabel Foto Tipe data Ukuran Kunci * Integer 5 Varchar 50 Integer 5 Varchar 3 Integer 5

Keterangan Auto_Increment Not null Not null Not null Not null

121

4. Tabel Jasa Fungsi = Menyimpan data Jasa Primary Key = id_jasa Struktur tabel : 3.6 Struktur Tabel Jasa Tipe data Ukuran Kunci * Integer 5 Varchar 100

Nama Field id_jasa nama_jasa


5. Tabel Jenis_jasa Fungsi = Menyimpan data jenis_jasa Primary Key = id_jenis Struktur tabel :

Nama Field id_jenis id_jasa nama_jenis

3.7 Struktur Tabel Jenis_jasa Tipe Ukuran Kunci data * Integer 5 Integer 5 Varchar 50

Keterangan Auto_Increment Not null Not null

6. Tabel Kategori Fungsi = Menyimpan data Kategori Primary Key = id_kategori Struktur tabel :

Nama Field id_kategori nama_kategori gambar_kategori

3.8 Struktur Tabel Kategori Tipe data Ukuran Kunci * Integer 5 Varchar 50 Varchar 50


122

7. Tabel Kota Fungsi = Menyimpan data kota Primary Key = id_kab_kota Struktur tabel :

Nama Field id_kab_kota id_provinsi kab_kota kab

3.9 Struktur Tabel Kota Tipe data Ukuran Kunci * Integer 5 Integer 5 Varchar 100 Varchar 50


8. Tabel Member Fungsi = Menyimpan data Member Primary Key = id_member Struktur tabel : 3.10 Struktur Tabel Member Nama Field Tipe data Ukuran id_member Integer 5 username_member Varchar 50 password_member Varchar 50 nama_member Varchar 50 alamat_member Varchar 100 kodepos_member Integer 5 telepon_member Varchar 20 email_member Varchar 50 provinsi_member Integer 5 kota_member Integer 5 aktivasi_member Integer 1 login_terakhir_member Date Id_kab_kota Integer 5

Kunci *

Keterangan Auto_Increment Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null

123

9. Tabel Merk Fungsi = Menyimpan data merk Primary Key = id_merk Struktur tabel : 3.11 Struktur Tabel Merk Tipe data Ukuran Kunci * Integer 5 Varchar 50 Varchar 50

Nama Field id_merk nama_merk gambar_merk


10. Tabel Omgkos kirim Fungsi = Menyimpan data Ongkos kirim Primary Key = id_ongkos Struktur tabel :

Nama Field id_ongkos id_jenis_jasa id_kab_kota harga_ongkos

3.12 Struktur Tabel Ongkos_kirim Tipe data Ukuran Kunci * Integer 5 Integer 5 Integer 5 Integer 15


11. Tabel Pesanan Fungsi = Menyimpan data Pesanan Primary Key = id_pesanan Struktur tabel :

Nama Field id_pesanan nama_pesanan alamat_pesanan telepon_pesanan

3.13 Struktur Tabel Pesanan Tipe data Ukuran Kunci * Integer 5 Varchar 100 Varchar 100 Varchar 15


124

email_pesanan kota_pesanan status_pesanan tanggal_pesanan jam_pesanan member_pesanan provinsi_pesanan kodepos_pesanan jasa_pesanan jenis_jasa_pesanan ongkos_pesanan total_pesanan no_track_pesanan id_produk id_member

Varchar Varchar Varchar Date Time Varchar Varchar Integer Varchar Varchar Integer Integer Varchar Integer Integer

100 50 20

50 50 5 50 50 15 15 20 5 5

Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null

12. Tabel Pesanandetail Fungsi = Menyimpan detail pesanan Primary Key = id_pesanandetail Struktur tabel : 3.14 Struktur Tabel Pesanandetail Nama Field Tipe data Ukuran Kunci id_pesanandetail * Integer 5 id_produk Integer 5 jumlah Integer 5 diskon Integer 3 harga Integer 20 nama Varchar 50 Merk Varchar 50 kategori Varchar 50 ukuran Varchar 5 berat Float id_pesanan Integer 5

Keterangan Auto_Increment Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null

125

13. Tabel Produk Fungsi = Menyimpan data produk Primary Key = id_produk Struktur tabel : 3.15 Struktur Tabel Produk Nama Field Tipe data Ukuran Kunci * id_produk Integer 5 nama_produk Varchar 50 harga_produk Integer 15 deskripsi_produk Text kategori_produk Integer 5 merk_produk Integer 5 tgl_masuk_produk date diskon_produk Integer 5 berat_produk Float terjual_produk Integer 5 dilihat_produk Integer 5 id_merk Integer 5 id_kategori Integer 5 id_ukuran Integer 5

Keterangan Auto_Increment Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null Not null

14. Tabel Provinsi Fungsi = Menyimpan data provinsi Primary Key = id_provinsi Struktur tabel :

Nama Field id_provinsi provinsi

3.16 Struktur Tabel Provinsi Tipe data Ukuran Kunci * Integer 5 Varchar 100


126

15. Tabel Rekening Fungsi = Menyimpan data rekening Primary Key = id_rekening Struktur tabel :

Nama Field id_rekening bank_rekening no_rekening atas_nama cabang

3.17 Struktur Tabel Rekening Tipe data Ukuran Kunci * Integer 5 Varchar 50 Varchar 15 Varchar 50 Varchar 50

Keterangan Auto_Increment Not null Not null Not null Not null

16. Tabel Retur Fungsi = Menyimpan data retur Primary Key = id_retur Struktur tabel :

Nama Field id_retur id_pesanan tgl_retur alasan_retur id_member status_retur id_pesanan id_member

3.18 Struktur Tabel Retur Tipe data Ukuran Kunci * Integer 5 Integer 5 Date Text Integer 5 Varchar 30 Integer 5 Integer 5

Keterangan Auto_Increment Not null Not null Not null Not null Not null Not null Not null

127

17. Tabel stock Fungsi = Menyimpan data Stock Primary Key = id_stok Struktur tabel :

Nama Field id_stok id_ukuran stock_produk Id_produk

3.19 Struktur Tabel Stock Tipe data Ukuran Kunci * Integer 5 Integer 5 Integer 5 Integer 5


18. Tabel Ukuran Fungsi = Menyimpan data ukuran Primary Key = id_ukuran Struktur tabel :

Nama Field id_ukuran nama_ukuran

3.20 Struktur Tabel Ukuran Tipe data Ukuran Kunci * Integer 5 Varchar 10


3.3 Perancangan Arsitektur 3.3.1 Perancangan Struktur Menu Perancangan struktur menu berisikan menu dan submenu yang berfungsi memudahkan user didalam menggunakan sistem. Menu-menu tersebut dibagi berdasarkan hak akses masing-masing user. Terdapat tiga pengguna aplikasi ini yaitu admin, member dan pengunjung. Berikut ini gambaran mengenai struktur menu website penjualan online di Distro Ournation.

128

1. Perancangan Struktur meu Pengunjung

Menu utama

Home

Produk

Petunjuk

About Us

Lihat

Registrasi Member

Login

Tambah

Gambar 3. 24 Struktur Menu Pengunjung 2. Perancangan Struktur meu Member

Menu Utama

Login

Home

History Pemesanan

Lihat

Ubah Profile

Ubah Password

Tambah

Lupa Password

Produk

Keranjang

Ubah

Gambar 3. 25 Struktur Menu Member

Petunjuk

Hapus

About Us

Logout

129

3. Perancangan Struktur Menu Admin

Login

Menu Utama

Member

kategori

Merk

Ukuran

produk

Pesanan

Lihat

Cara Pesanan

provinsi

Tambah

Kota

Jasa Kirim

Ubah

Jenis Jasa Kirim

Hapus

Gambar 3. 26 Struktur Menu Admin

Ongkos Kirim

Laporan Penjualan

Laporan Produk

Retur

Logout

130

3.3.2 Perancangan Antarmuka Perancangan antarmuka bertujuan untuk memberikan gambaran tentang aplikasi yang akan dibangun. Sehingga akan mempermudah dalam mengimplementasikan aplikasi. Berikut ini adalah tampilan antar muka yang dirancang pada website penjualan online di Distro Ournation : A. Perancangan Antarmuka Pengunjung 1. Antarmuka home pengunjung (P01) P01 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· ·

Header

· · Produk terbaru

·

Kurs Dollar

· Gambar

Gambar

Gambar

Gambar

Search Produk

· Go

Diskon

Klik Home Menuju P01 Klik Produk menuju P02 Klik Petunjuk P03 Klik About us Menuju P04 Klik Registrasi Menuju P05 Klik Login menuju P06 Klik Lupa Password Menuju P07

Login User name :

Gambar

Gambar

Gambar

Gambar Password :

Login Produk Terlaris

Gambar

Gambar

Gambar

Gambar

Registrasi Member Lupa Password JNE Gambar JNE Contact Us

Produk Paling Banyak Dilihat Twitter Gambar

Gambar

Gambar

Gambar

Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.27 Perancangan Antarmuka home pengunjung

131

2. Antarmuka produk (P02) P02 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

Header

·

T-Shirt

· ·

Kurs Dollar

Gambar

Gambar

Gambar

· · · ·

Gambar


Search Produk Go

See More Login

Jacket

User name : Gambar

Gambar

Gambar

Password :

Gambar

Login See More Registrasi Member Lupa Password

Celana

JNE Gambar

Gambar

Gambar

Gambar

Gambar JNE

See More Boxer

Contact Us Twitter

Facebook

Yahoo Messenger Gambar

Gambar

Gambar

Gambar Gambar Bank See More

Footer

Gambar 3.28 Perancangan Antarmuka produk 3. Antarmuka petunjuk (P03) P03 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· ·

Header

· · petunjuk

·

Kurs Dollar

·

Petunjuk Registrasi Petunjuk Pembayaran Petunjuk... Petunjuk…. Petunjuk….

·

Search Produk Go


Login User name : Password :

Login Registrasi Member Lupa Password JNE Gambar JNE Contact Us Twitter

Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.29 Perancangan Antarmuka petunjuk

132

4. Antarmuka About Us (P04) P04 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

·


·

Header

· · About Us

·

Kurs Dollar

· ·

Search Produk Go Login User name : Password :


Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.30 Perancangan Antarmuka About Us 5. Antarmuka Registrasi (P05) P05 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· ·

Header

· · Registrasi Member

·

Kurs Dollar

· ·

*Semua atribut wajib di isi. Email

:

Username

:

Password

:

Ulangi Password

:

Nama Lengkap

:

Alamat

:

Telepon

:

Provinsi

:

Search Produk


Go Login User name : Password :

Login

Kota

:

Kode pos

:

Registrasi Member Lupa Password JNE Gambar JNE Contact Us Twitter

Facebook

Yahoo Messenger Submit

Gambar Bank

Footer

Gambar 3.31 Perancangan Antarmuka Registrasi

133

6. Antarmuka Login (P06) P06 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· ·

Header


·

Kurs Dollar

· Gambar

Gambar

Gambar

Gambar

·

Search Produk Go Diskon


Login User name :

Gambar

Gambar

Gambar

Gambar Password :


Gambar

Gambar

Gambar

Registrasi Member Lupa Password JNE

Gambar

Gambar JNE Contact Us Produk Paling Banyak Dilihat Twitter Gambar

Gambar

Gambar

Facebook

Yahoo Messenger

Gambar

Gambar Bank

Footer

Gambar 3.32 Perancangan Antarmuka Login 7. Antarmuka Lupa password (P07) P07 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

Header

· · · · ·

Lupa Password

· ·

Kurs Dollar


Silahkan mengisi email Anda. Secara otomatis username dan password Anda akan kami kirim ke email Anda Email

Search Produk

:

Go Submit Query Login User name : Password :


Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.33 Perancangan Antarmuka Lupa password

134

B. Perancangan Antar Muka Member 1. Antarmuka Login Member (M01) M01 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

·

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik tombol About Us menuju tampilan M04 Klik tombol Produk menuju tampilan M07 Klik gambar untuk menuju tampilan M08 Klik tombol Login untuk proses Login

· ·

Header


Gambar

Gambar

Gambar

Gambar

Kurs Dollar

·

Search Produk Go Diskon

Login User name :

Gambar

Gambar

Gambar

Gambar Password :


Gambar

Gambar

Gambar

Registrasi Member Lupa Password JNE

Gambar

Gambar JNE Contact Us Produk Paling Banyak Dilihat Twitter Gambar

Gambar

Gambar

Facebook

Yahoo Messenger

Gambar

Gambar Bank

Footer

Gambar 3.34 Perancangan Antarmuka Login Member 2. Antarmuka Home Member (M02) M02 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· · ·

Header


Kurs Dollar · · Keranjang

Gambar

Gambar

Gambar

·

Gambar Banyak Barang Total Harga Total Berat Diskon

: : :

Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju M04 Klik Tombol Ubah profile menuju M05 Klik Tombol Ubah password Menuju M06 Klik Tombol Produkmenuju M07 Klik gambar menuju M08 Klik Tombol Keranjang meunu M09 Klik Tombol Histro pemesanan Menuju M14

Search Produk Go

Gambar

Gambar

Gambar

Gambar Welcome ….

Produk Terlaris

Gambar

Gambar

Gambar

Gambar

· · · · ·

History Pemesanan Member Profile Ubah Profile Ubah password Logout

JNE Gambar JNE Contact Us

Produk Paling Banyak Dilihat Twitter Gambar

Gambar

Gambar

Gambar

Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.35 Perancangan Antarmuka Home Member

135

3. Antarmuka Petunjuk (M03) M03 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

·

About Us

· ·

Header

· petunjuk

·

Kurs Dollar

·

Petunjuk Registrasi Petunjuk Pembayaran Petunjuk Pembayaran Petunjuk Retur

Keranjang

·

Banyak Barang Total Harga Total Berat

: : :

·

Search Produk

Klik tombol Home menuju tampilan M02 Klik Tombol About Us menuju M04 Klik Tombol Ubah profile menuju M05 Klik Tombol Ubah password Menuju M06 Klik Tombol Produkmenuju M07 Klik gambar menuju M08 Klik Tombol Keranjang meunu M09 Klik Tombol Histro pemesanan Menuju M14

Go Welcome …. · · · · ·


JNE Gambar JNE Contact Us Twitter

Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.36 Perancangan Antarmuka Petunjuk 4. Antarmuka About Us (M04) M04 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· · ·

Header

· About Us

·

Kurs Dollar

· Keranjang

·


: : :

Search Produk

·

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol Ubah profile menuju M05 Klik Tombol Ubah password Menuju M06 Klik Tombol Produkmenuju M07 Klik gambar menuju M08 Klik Tombol Keranjang meunu M09 Klik Tombol Histro pemesanan Menuju M14

Go Welcome …. · · · · ·



Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.37 Perancangan Antarmuka About Us

136

5. Antarmuka Ubah Profile (M05) M05 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

·

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju M04 Klik Tombol Ubah password Menuju M06 Klik Tombol Produkmenuju M07 Klik gambar menuju M08 Klik Tombol Keranjang meunu M09 Klik Tombol Histro pemesanan Menuju M14

·

Ubah Profile Username

:

· ·

Kurs Dollar

·

Nama Lengkap :

· ·

Search Produk

Alamat

: Go

Telepon

·

: Keranjang

Provinsi

:

Kota

:

Kodepos

:

Email

:


: : :

Welcome …. · · · · · Cancel


JNE

Ubah

Gambar JNE Contact Us Twitter

Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.38 Perancangan antarmuka Ubah Profile 6. Antarmuka Ubah Password (M06) M06 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· ·

Ubah Password Password

:

Ulangi Password

:

· ·

Kurs Dollar

· ·

Search Produk Go

· ·

Keranjang Banyak Barang Total Harga Total Berat

: : :

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju M04 Klik Tombol Ubah profile menuju M05 Klik Tombol Produkmenuju M07 Klik gambar menuju M08 Klik Tombol Keranjang meunu M09 Klik Tombol Histro pemesanan Menuju M14

Welcome …. · · · · · Cancel

Ubah



Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.39 Perancangan antarmuka Ubah Password

137

7. Antarmuka Produk (M07) M07 ·

Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju M04 Klik Tombol Ubah profile menuju M05 Klik Tombol Ubah password Menuju M06 Klik gambar menuju M08 Klik Tombol Keranjang meunu M09 Klik Tombol Histro pemesanan Menuju M14

About Us · ·

Header

· ·

T-Shirt

Gambar

Gambar

Gambar

Kurs Dollar

· ·

Keranjang

·

Gambar

See More Search Produk

Jacket

Go Gambar

Gambar

Gambar

Welcome ….

Gambar

See More Celana

· · · · ·


JNE Gambar

Gambar

Gambar

Gambar

Gambar JNE

See More

Contact Us

Boxer

Twitter

Facebook


Gambar

Gambar

Gambar Gambar Bank See More

Footer

Gambar 3.40 Perancangan antarmuka Produk 8. Antarmuka Detail Produk (M08) M08 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· · ·

Header

· · Produk Distro / T - Shirt / Kategori Merk Nama Produk Harga Deskripsi Berat Stok S size Stok M size Stok L size Stok XL size

: : : : : : : : : :

FB Like

Tweet

Beli Produk Ukuran Banyak

Kurs Dollar

· ·

Keranjang

· · Search Produk

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju tampilan M04 Klik Tombol Ubah profile menuju tampilan M05 Klik Tombol Ubah password Menuju tampilan M06 Klik Tombol Produk menuju tampilan M07 Klik Tombol Keranjang meunu tampilan M09 Klik Tombol History pemesanan Menuju tampilan M14 Klik Tombol Beli Menuju tampilan M10

Go Share

: Beli Produk Lain

Welcome …. · · · · ·


JNE Gambar JNE

Gambar

Gambar

Gambar

Gambar

Contact Us Twitter

Facebook


Gambar

Gambar

Gambar Gambar Bank

Footer

Gambar 3.41 Perancangan antarmuka Detail Produk

138

9. Antarmuka Keranjang (M09) M09 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

·

About Us Keranjang

· ·

Keranjang

Detail Pembayaran

Data Pengiriman Lanjut Belanja

Selesai Belanja

Ukuran

Harga

· · ·

No.

Kategori Merk

Nama Produk

Jumlah

Sub Berat

Diskon

Sub Total

Aksi

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju tampilan M04 Klik Tombol Produk menuju tampilan M07 Klik lanjut Belanja menuju tampilan M07 Klik selesai belanja menuju tampilan M10

hapus

Ubah

Footer

Gambar 3.42 Perancangan antarmuka Keranjang 10. Antarmuka Data Pengiriman (M10) M10 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· ·

Detail Pesanan · Keranjang

Detail Pembayaran

Data Pengiriman

*Klik ALAMAT BARU untuk menggunakan alamat baru Email

:

Nama Lengkap

:

Kurs Dollar

· ·

Keranjang

· · ·

Search Produk

Alamat

: Go

Telepon

:

Provinsi

:

Kota

:

Kode pos

:

Jasa Pengiriman

:

· ·

Welcome …. · · · · ·

·


Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju tampilan M04 Klik Tombol Ubah profile menuju tampilan M05 Klik Tombol Ubah password Menuju tampilan M06 Klik Tombol Produk menuju tampilan M07 Klik gambar menuju tampilan M08 Klik Tombol Keranjang meunu tampilan M09 Klik Tombol History pemesanan Menuju tampilan M14 Klik Tombol Alamat baru menuju tampilan M11 Klik Tombol Selesai menuju tampilan M12

JNE Gambar JNE

Jenis Jasa Pengiriman :

Contact Us Twitter Cancel

Selesai

Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.43 Perancangan antarmuka Data Pengiriman

139

11. Antarmuka Data Pengiriman Alamat Baru (M11) M11 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· ·

Detail Pesanan

· Keranjang

Detail Pembayaran

Data Pengiriman

Kurs Dollar

·

*Klik ALAMAT AKUN untuk menggunakan alamat baru

·

Keranjang

Email

:

Nama Lengkap

:

Alamat

:

Telepon

:

· · ·

Search Produk Go

Provinsi

·

:

Kota

:

Kode pos

:

Jasa Pengiriman

:

·

Welcome …. · · · · ·


·

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju tampilan M04 Klik Tombol Ubah profile menuju tampilan M05 Klik Tombol Ubah password Menuju tampilan M06 Klik Tombol Produk menuju tampilan M07 Klik gambar menuju tampilan M08 Klik Tombol Keranjang meunu tampilan M09 Klik Tombol History pemesanan Menuju tampilan M14 Klik Tombol Alamat akun menuju tampilan M10 Klik Tombol Selesai menuju tampilan M12

JNE Gambar JNE

Jenis Jasa Pengiriman :

Contact Us Twitter Cancel

Selesai

Facebook

Yahoo Messenger

Gambar Bank

Footer

Gambar 3.44 Perancangan antarmuka Data Pengiriman Alamat Baru 12. Antarmuka Detail Pesanan (M12) M12 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

History Pemesanan / Id Order….

· · ·

Keranjang

Nama

:

Alamat Lengkap

:

Telepon/HP

:

Email

:

Provinsi Tujuan

:

Kota Tujuan

:

Kodepos

:

Status

:

No.

Detail Pembayaran

· ·

Welcome ….

·

· · · · ·

·


· ·

Tanggal Pemesanan Jasa Pengiriman

Data Pengiriman

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju tampilan M04 Klik Tombol Ubah profile menuju tampilan M05 Klik Tombol Ubah password Menuju tampilan M06 Klik Tombol Produk menuju tampilan M07 Klik Tombol Keranjang meuju tampilan M09 Klik Tombol History pemesanan Menuju tampilan M14 Klik disini menuju tampilan M13

:

:

Kategori

Jasa Pengiriman

Merk

Nama Produk

Ukuran

Paket

Jumlah

Harga

Diskon

Ongkos Kirim per Kg

Sub Berat

Tot. Berat

Sub Total

Total Biaya Kirim

TOTAL BELANJA : Rp…..,- Total berat dibulatkan keatas

Untuk melakukan pembayaran lihat history pemesanan atau klik disini

Footer

Gambar 3.45 Perancangan antarmuka Detail Pesanan

140

13. Antarmuka Konfirmasi Pembayaran (M13) M13 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

History Pemesanan / Id Order….

· · ·

Nama

:

Alamat Lengkap

:

Telepon/HP

:

Email

:

Provinsi Tujuan

:

Kota Tujuan

:

Kodepos

:

Welcome …. · · · · ·

·


· · · · ·

Tanggal Pemesanan Status Pesanan No.

: ·

:

Kategori

Merk

Nama Produk

Jasa Pengiriman

Ukuran

Jumlah

Paket

Harga

Diskon

Sub Berat

Ongkos Kirim per Kg

Tot. Berat

Sub Total

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju tampilan M04 Klik Tombol Ubah profile menuju tampilan M05 Klik Tombol Ubah password Menuju tampilan M06 Klik Tombol Produk menuju tampilan M07 Klik Tombol Keranjang meuju tampilan M09 Klik Tombol History pemesanan Menuju tampilan M14 Klik konfirmasi untuk melakukan pembayaran via rekening bank dan masuk ke tampilan M14 Klik paypal untuk melakukan pembayaran via paypal

Total Biaya Kirim

TOTAL BELANJA : Rp…..,- Total berat dibulatkan keatas transfer Pilih Bank Tujuan

Pembayaran * Bank Pembayaran

:

* Rekening Pembayaran

:

Tgl pesan

:

Tgl batas bayar

:

* Tanggal Pembayaran

: Rupiah

Jumlah Transfer Pembayaran

Konfirmasi paypal Paypal

Footer

Gambar 3.46 Perancangan antarmuka Konfirmasi Pembayaran 14. Antarmuka History (M14) M14 Ournation Distro all about airbrush™

Home

Produk

Keranjang

Petunjuk

About Us

· ·

History Pemesanan · No

No Order

Tanggal

Atas Nama

Total Harga

Status

Status Konfimasi | Detail

· · · ·

Klik tombol Home menuju tampilan M02 Klik tombol Petunjuk menuju tampilan M03 Klik Tombol About Us menuju tampilan M04 Klik Tombol Produk menuju tampilan M07 Klik Tombol Keranjang meunu tampilan M09 Klik konfirmasi untuk masuk ke tampilan M13 Klik Detail untuk melihat detail pesanan

Footer

Gambar 3.47 Perancangan antarmuka History

141

C. Perancangan Antar Muka Admin 1. Antarmuka Login Admin (A01) A01 Ournation Distro all about airbrush™ ·

Klik tombol Login menuju tampilan A02

Login Admin Username

Password

Login

Footer

Gambar 3.48 Perancangan antarmuka Login Admin 2. Antarmuka Home Admin (A02) A02 Ournation Distro all about airbrush™ Welcome Admin Pilih menu yang ada di sidebar

· ·

·

Member

·

·

Kategori

·

·

Merk

·

·

Ukuran

·

·

Produk

·

·

Pesanan

·

Cara Pesanan

·

Provinsi

·

Kota

·

Ongkos Kirim

·

Laporan Penjualan

·

·

Laporan Produk

·

·

Retur

·

Kuesioner

·

Logout

· · · ·

· · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01

Footer

Gambar 3.49 Perancangan antarmuka Home Admin

142

3. Antarmuka Pengolahan data member (A03) A03 Ournation Distro all about airbrush™ ·

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

JASA KIRIM

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

·

KUESIONER

·

·

LOGOUT

·

No

Username

Email

Status

Terkhir Login

Aksi · Detail | Hapus

· · · · · · · ·

·

Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01

Footer

Gambar 3.50 Perancangan antarmuka Pengolahan data member 4. Antarmuka pengolahan data kategori (A04) A04 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

·

Tambah Kategori No

Nama kategori

Aksi Edit | Hapus

· ·

· · · · · · · · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01 Klik Tambah kategori menuju tampilan A19 Klik Edit menuju tampilan A20

Footer

Gambar 3.51 Perancangan antarmuka pengolahan data kategori

143

5. Perancangan antarmuka Pengolahan data merk (A05) A05 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

·

RETUR

·

KUESIONER

·

LOGOUT

Tambah Merek No

· Nama Merk

Aksi

·

Edit | Hapus

·

· · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Cara Pesanan menuju tampilan A08 Klik tombol Provinsi menuju tampilan A09 Klik tombol Kota menuju tampilan A10 Klik tombol Jasa Kirim menuju tampilan A11 Klik tombol Jenis Jasa Kirim menuju tampilan A12 Klik tombol Ongkos Kirim menuju tampilan A13 Klik tombol Laporan Penjualan menuju tampilan A14 Klik tombol Laporan Produk menuju tampilan A15 Klik tombol Retur menuju tampilan A16 Klik tombol Kuesioner menuju tampilan A17 Klik tombol Logout menuju tampilan A01 Klik Tambah Merk menuju tampilan A21 Klik Edit menuju tampilan A22

Footer

Gambar 3.52 Perancangan antarmuka pengolahan data merk 6. Perancangan antarmuka Pengolahan data Ukuran (A06) A06 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

·

Tambah Ukuran No

Nama Ukuran

Aksi Edit | Hapus

· ·

· · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Produk menuju tampilan A07 Klik tombol Cara Pesanan menuju tampilan A08 Klik tombol Provinsi menuju tampilan A09 Klik tombol Kota menuju tampilan A10 Klik tombol Jasa Kirim menuju tampilan A11 Klik tombol Jenis Jasa Kirim menuju tampilan A12 Klik tombol Ongkos Kirim menuju tampilan A13 Klik tombol Laporan Penjualan menuju tampilan A14 Klik tombol Laporan Produk menuju tampilan A15 Klik tombol Retur menuju tampilan A16 Klik tombol Kuesioner menuju tampilan A17 Klik tombol Logout menuju tampilan A01 Klik Tambah Ukuran menuju tampilan A23 Klik Edit menuju tampilan A24

Footer

Gambar 3.53 Perancangan antarmuka pengolahan data ukuran

144

7. Perancangan antarmuka Pengolahan data produk (A07) A07 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

Tambah Produk

Search

· ·

No

Kategori Produk

Merk Produk

Nama Produk

Aksi · Edit | Hapus

· · · · · · · · · · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Cara Pesanan menuju tampilan A08 Klik tombol Provinsi menuju tampilan A09 Klik tombol Kota menuju tampilan A10 Klik tombol Jasa Kirim menuju tampilan A11 Klik tombol Jenis Jasa Kirim menuju tampilan A12 Klik tombol Ongkos Kirim menuju tampilan A13 Klik tombol Laporan Penjualan menuju tampilan A14 Klik tombol Laporan Produk menuju tampilan A15 Klik tombol Retur menuju tampilan A16 Klik tombol Kuesioner menuju tampilan A17 Klik tombol Logout menuju tampilan A01 Klik Tambah produk menuju tampilan A25 Klik Edit menuju tampilan A26

1 Brikutnya>

Footer

Gambar 3.54 Perancangan antarmuka pengolahan data produk 8. Perancangan antarmuka Pengolahan data pesanan (A08) A08 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

Search No order

· ·

Nama Pemesan

Tgl. pesanan

Jumlah

Status

Aksi

·

MERK

·

UKURAN

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

·

RETUR

·

KUESIONER

·

LOGOUT

Edit

· ·

· · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01

Footer

Gambar 3.55 Perancangan antarmuka pengolahan data pesanan

145

9. Perancangan antarmuka Pengolahan data cara pesanan (A09) A09 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

·

RETUR

·

KUESIONER

·

LOGOUT

·

Tambah Cara No

Nama Cara

·

Aksi

·

Edit | Hapus

· · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01 Klik Tambah Cara menuju tampilan A27 Klik Edit menuju tampilan A28

Footer

Gambar 3.56 Perancangan antarmuka pengolahan data cara pesanan 10. Perancangan antarmuka Pengolahan data provinsi (A10) A10 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

·

RETUR

·

KUESIONER

·

LOGOUT

Tambah Provinsi No

· Nama Provinsi

Aksi

·

Edit | Hapus

·

· · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01 Klik Tambah provinsi menuju tampilan A29 Klik Edit menuju tampilan A30

Footer

Gambar 3.57 Perancangan antarmuka pengolahan data provinsi

146

11. Perancangan antarmuka Pengolahan data kota(A11) A11 Ournation Distro all about airbrush™ ·

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

Tambah Kota

· No

Nama Provinsi

Nama Kota

Aksi · Edit | Hapus

· · · · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01 Klik Tambah Kota menuju tampilan A31 Klik Edit menuju tampilan A32

Footer

Gambar 3.58 Perancangan antarmuka pengolahan data kota 12. Perancangan antarmuka Pengolahan data jasa (A12) A12 Ournation Distro all about airbrush™ Tambah Jasa

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

KOTA

·

JASA KIRIM

·

JENIS JASA KIRIM

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

·

No

Jasa

Aksi

·

Edit | Hapus

·

· · · · · · · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01 Klik Tambah jasai menuju tampilan A33 Klik Edit menuju tampilan A34

Footer

Gambar 3.59 Perancangan antarmuka pengolahan data jasa

147

13. Perancangan antarmuka Pengolahan data jenis jasa (A13) A13 Ournation Distro all about airbrush™ Tambah Jenis

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

JASA KIRIM

·

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

·

RETUR

·

·

KUESIONER

·

·

LOGOUT

·

No

·

Jasa

Jenis Jasa

Aksi

·

Edit | Hapus

·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01 Klik Tambah Jenis menuju tampilan A35 Klik Edit menuju tampilan A36

·

·

Footer

Gambar 3.60 Perancangan antarmuka pengolahan data jenis jasa 14. Perancangan antarmuka Pengolahan data ongkos kirim (A14) A14 Ournation Distro all about airbrush™ ·

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

JASA KIRIM

·

·

JENIS JASA KIRIM

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

·

LOGOUT

·

Tambah Ongkos · No

Jasa

Jenis Jasa

Nama Kota

Ongkos

Aksi

·

Edit | Hapus

·

· · ·

· · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01 Klik Tambah Ongkos menuju tampilan A37 Klik Edit menuju tampilan A38

Footer

Gambar 3.61 Perancangan antarmuka pengolahan data ongkos kirim

148

15. Perancangan antarmuka Pengolahan data laporan Penjualan (A15) A15 Ournation Distro all about airbrush™ ·

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

JASA KIRIM

·

JENIS JASA KIRIM

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

Cetak

Awal

S/D

Akhir

Search ·

No Order

No

Nama

Tgl Beli

Jenis Pembayaran

Tanggal konfirmasi

·

Total Beli

· · · · · · · ·

· · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01

Footer

Gambar 3.62 Perancangan antarmuka pengolahan data laporan penjualan 16. Perancangan antarmuka Pengolahan data laporan produk (A16) A16 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

JASA KIRIM

·

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

Cetak

Search

· ·

No

Kategori

Merk Produk

Nama Produk

Harga

Gambar

·

· · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01

Footer

Gambar 3.63 Perancangan antarmuka pengolahan data laporan produk

149

17. Perancangan antarmuka Pengolahan data retur (A17) A17 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

JASA KIRIM

·

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

·

LOGOUT

·

Search

· ·

No

No Order

Nama User

Tgl Retur

Status

Aksi

·

Edit

·

·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01

Footer

Gambar 3.64 Perancangan antarmuka pengolahan data retur 19. Perancangan antarmuka tambah kategori (A19) A19 Ournation Distro all about airbrush™

Tambah Kategori

·

·

MEMBER

·

KATEGORI

Nama Kategori

:

·

MERK

Gambar Kategori

:

·

UKURAN

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

· Browse Submit

· ·

· · · · · · · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Cara Pesanan menuju tampilan A08 Klik tombol Provinsi menuju tampilan A09 Klik tombol Kota menuju tampilan A10 Klik tombol Jasa Kirim menuju tampilan A11 Klik tombol Jenis Jasa Kirim menuju tampilan A12 Klik tombol Ongkos Kirim menuju tampilan A13 Klik tombol Laporan Penjualan menuju tampilan A14 Klik tombol Laporan Produk menuju tampilan A15 Klik tombol Retur menuju tampilan A16 Klik tombol Kuesioner menuju tampilan A17 Klik tombol Logout menuju tampilan A01 Klik Submit menuju tampilan A04

Footer

Gambar 3.65 Perancangan antarmuka tambah kategori

150

20. Perancangan antarmuka edit kategori (A20) A20 Ournation Distro all about airbrush™ ·

Edit Kategori

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

Nama Kategori

:

Gambar Kategori

:

Ganti Gambar Kategori

:

· · · Browse

· ·

Submit

·

· · · · · · ·

Klik tombol Member menuju tampilan A03 Klik tombol Kategori menuju tampilan A04 Klik tombol Merk menuju tampilan A05 Klik tombol Ukuran menuju tampilan A06 Klik tombol Produk menuju tampilan A07 Klik tombol Pesanan menuju tampilan A08 Klik tombol Cara Pesanan menuju tampilan A09 Klik tombol Provinsi menuju tampilan A10 Klik tombol Kota menuju tampilan A11 Klik tombol Jasa Kirim menuju tampilan A12 Klik tombol Jenis Jasa Kirim menuju tampilan A13 Klik tombol Ongkos Kirim menuju tampilan A14 Klik tombol Laporan Penjualan menuju tampilan A15 Klik tombol Laporan Produk menuju tampilan A16 Klik tombol Retur menuju tampilan A17 Klik tombol Kuesioner menuju tampilan A18 Klik tombol Logout menuju tampilan A01 Klik Submit menuju tampilan A04

Footer

Gambar 3.66 Perancangan antarmuka edit kategori 21. Perancangan antarmuka tambah merk (A21) A20 Ournation Distro all about airbrush™ ·

Tambah Merk

·

MEMBER

·

KATEGORI

Nama Merk

:

·

MERK

Gambar Merk

:

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

· · Browse Submit

· · ·

· · · · · · ·


Footer

Gambar 3.67 Perancangan antarmuka tambah merk

151

22. Perancangan antarmuka edit merk (A22) A21 Ournation Distro all about airbrush™ ·

Edit Merk

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

Nama Merk

:

Gambar Merk

:

Ganti Gambar Merk

:

· · · Browse

·

Submit

·

· · · · · · ·


Footer

Gambar 3.68 Perancangan antarmuka edit merk 23. Perancangan antarmuka tambah ukuran (A23) A22 Ournation Distro all about airbrush™

Tambah Ukuran

·

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

·

RETUR

·

·

KUESIONER

·

LOGOUT

Nama Ukuran

·

: Submit

·

· · · ·

· · · · ·


Footer

Gambar 3.69 Perancangan antarmuka tambah ukuran

152

24. Perancangan antarmuka edit ukuran (A24) A23 Ournation Distro all about airbrush™

Edit Ukuran

·

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

·

RETUR

·

·

KUESIONER

·

LOGOUT

Nama Ukuran

·

:

·

Submit

· · · ·

· · · · ·


Footer

Gambar 3.70 Perancangan antarmuka edit ukuran 25. Perancangan antarmuka tambah produk (A25) A24 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

Tambah Produk · Kategori Produk

:

Pilih

·

Merk Produk

:

Pilih

·

Nama Produk

:

Gambar Utama produk

:

Harga Produk

:

Berat Produk

:

Kg

·

Stock Produk S

:

Unit

·

Stock Produk M

:

Unit

·

Stock Produk L

:

Unit

·

Stock Produk XL

:

Unit

· ·

Browse

·

Rupiah

· · Deskripsi Produk

:

·

LOGOUT Tools

· ·

Diskon Produk

:

%

· Submit

·


Footer

Gambar 3.71 Perancangan antarmuka produk

153

26. Perancangan antarmuka edit produk (A26) A25 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

·

Edit Produk

· Kategori Produk

:

Pilih

·

Merk Produk

:

Pilih

·

Nama Produk

:

Gambar Utama Produk

:

· · · · · Browse

Ganti Gambar Utama Produk :

·

Harga Produk

:

Berat Produk

:

Kg

·

Stock Produk S

:

Unit

·

Stock Produk M

:

Unit

Stock Produk L

:

Unit

Stock Produk XL

:

Unit

Rupiah

· · ·

Deskripsi Produk

·

:

· Tools

Diskon Produk

:


% Submit

Footer

Gambar 3.72 Perancangan antarmuka edit produk 27. Perancangan antarmuka tambah cara pesanan (A27) A27 Ournation Distro all about airbrush™ ·

Tambah Cara

·

MEMBER

·

KATEGORI

Nama Cara

:

·

MERK

Isi Cara

:

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

·

RETUR

·

·

KUESIONER

·

LOGOUT

· · · · · · · ·

Tools

· Submit

·

· · · · ·


Footer

Gambar 3.73 Perancangan antarmuka cara pesanan

154

28. Perancangan antarmuka edit cara pesanan (A28) A28 Ournation Distro all about airbrush™ ·

Edit Cara

·

MEMBER

·

KATEGORI

Nama Cara

:

·

MERK

Isi Cara

:

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

·

RETUR

·

·

KUESIONER

·

LOGOUT


· · · · · · · ·

Tools

· Submit

·

· · · · ·

Footer

Gambar 3.74 Perancangan antarmuka edit cara pesanan 29. Perancangan antarmuka tambah provinsi (A29) A29 Ournation Distro all about airbrush™

Tambah Provinsi

·

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

Nama Provinsi

·

: Submit

·

· · · · · · · · · · ·


Footer

Gambar 3.75 Perancangan antarmuka tambah provinsi

155

30. Perancangan antarmuka edit provinsi (A30) A30 Ournation Distro all about airbrush™ ·

Edit Provinsi

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

·

LOGOUT

·

Nama Provinsi

·

:

· Submit · · · · · · · · · ·

· · ·


Footer

Gambar 3.76 Perancangan antarmuka edit provinsi 31. Perancangan antarmuka tambah kota (A31) A31 Ournation Distro all about airbrush™

Tambah Kota

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

Provinsi : Kota

· Pilih

· ·

:

· Submit

·

· · · · · · ·


Footer

Gambar 3.77 Perancangan antarmuka tambah kota

156

32. Perancangan antarmuka edit kota (A32) A32 Ournation Distro all about airbrush™ ·

Edit Kota

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

·

KOTA

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

· Provinsi : Kota

Pilih

·

:

· · Submit

· ·

· · · · · · ·


Footer

Gambar 3.78 Perancangan antarmuka edit kota 33. Perancangan antarmuka tambah jasa (A33) A33 Ournation Distro all about airbrush™ ·

MEMBER

Tambah Jasa

·

·

KATEGORI

Nama Jasa :

·

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

KOTA

·

JASA KIRIM

·

JENIS JASA KIRIM

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

·

RETUR

·

KUESIONER

·

LOGOUT

Submit

·

· · · ·

· · · · ·


Footer

Gambar 3.80 Perancangan antarmuka tambah jasa

157

34. Perancangan antarmuka edit jasa (A34) A34 Ournation Distro all about airbrush™

Edit Jasa

·

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

JASA KIRIM

·

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

·

Nama Jasa : Submit

·

· · · · ·


Footer

Gambar 3.81 Perancangan antarmuka edit jasa 35. Perancangan antarmuka tambah jenis jasa (A35) A35 Ournation Distro all about airbrush™

Tambah Jenis Jasa

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

JASA KIRIM

·

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

·

LOGOUT

·

· ·

Nama Jasa :

·

Nama Jenis : Submit

·

·

· ·


Footer

Gambar 3.82 Perancangan antarmuka tambah jenis jasa

158

36. Perancangan antarmuka edit jenis jasa (A36) A36 Ournation Distro all about airbrush™ ·

Edit Jenis Jasa

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

·

PESANAN

·

·

CARA PESANAN

·

·

PROVINSI

·

·

KOTA

·

·

JASA KIRIM

·

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

·

LOGOUT

·

·

Nama Jasa :

· Nama Jenis : · Submit

·

· ·


Footer

Gambar 3.83 Perancangan antarmuka edit jenis jasa 37. Perancangan antarmuka tambah ongkos kirim (A37) A37 Ournation Distro all about airbrush™ ·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

Tambah Ongkos Krim

·

Provinsi :

· Kota

:

Jasa

:

Jenis

:

Ongkos

:

· ·

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

JASA KIRIM

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

·

LAPORAN PENJUALAN

·

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

·

LOGOUT

·

· · · · Submit

·

·

· ·


Footer

Gambar 3.84 Perancangan antarmuka ongkos kirim

159

38. Perancangan antarmuka edit ongkos kirim (A38) A38 Ournation Distro all about airbrush™ ·

Edit Ongkos Krim

·

MEMBER

·

KATEGORI

·

MERK

·

UKURAN

·

PRODUK

·

PESANAN

·

CARA PESANAN

·

PROVINSI

·

KOTA

·

JASA KIRIM

·

·

JENIS JASA KIRIM

·

·

ONGKOS KIRIM

·

LAPORAN PENJUALAN

·

LAPORAN PRODUK

·

RETUR

·

KUESIONER

·

LOGOUT

·

Provinsi :

· Kota

:

Jasa

:

Jenis

:

Ongkos

:

· · · · · Submit ·

· · · · · · ·


Footer

Gambar 3.85 Perancangan antarmuka edit ongkos kirim

160

3.3.3 Perancangan Pesan Pada gambar dibawah ini merupakan perancangan pesan yang terdapat pada aplikasi e-commerce di distro Ournation. Adapun tampilan pesan yang ada adalah sebagai berikut : PS01

PS02 Email harus valid

PS06

PS03

Isi ulang password harus sama dengan password

PS11

PS08

PS12

Ukuran harus di isi

PS16

PS13

Banyak harus di isi

PS18 bank harus di isi

PS21

Username tidak dikenal!

Password salah!

PS15

Stok tidak ada sebanyak jumlah yang Anda beli

PS19

Jasa harus di isi

PS20

bank harus di isi

PS22

Anda tidak dapat melakukan konfirmasi jika tanggal konfirmasi lebih kecil daripada tanggal pesanan dan tanggal konfirmasi tidak boleh lebih dari batas pembayaran, yaitu 3 hari setelah tanggal pesanan

Username sudah ada yang memakai

PS10

PS14

Hanya boleh di isi angka

PS17

Jenis jasa harus di isi

PS09

Terima kasih Anda sudah meregistrasi pada web kami. Untuk mengaktivasi Akun Anda silahkan periksa email Anda.

Kota harus di isi

PS05 Email sudah ada yang memakai

Hanya boleh di isi angka

PS07

Provinsi harus di isi

PS04

di isi

isi angka

PS23

Bila barang-barang pesanan dengan nomor Bila barang-barang pesanan dengan nomor order order 30 (Lihat detail) telah terkirim, diharap 30 (Lihat detail) telah terkirim, diharap Anda Anda segera melakukan konfirmasi dengan klik segera melakukan konfirmasi dengan klik disini. disini.

Bila barang-barang pesanan dengan nomor order 30 (Lihat detail) telah terkirim, diharap Batalkan Lanjutkan pembayaran Anda segera melakukan konfirmasi dengan klik disini.

Gambar 3.86 Perancangan pesan 3.3.4 Jaringan Semantik Setelah melakukan perancangan antarmuka dan perancangan pesan maka dilakukanlah perancangan terhadap aliran dari menu-menu yang ada di program yang akan digambarkan dalam sebuah jaringan simantik. Yang terdiri dari jaringan semantik pengunjung, member dan admin.

161

1. Jaringan semantik Pengunjung

P03 P02 P04

P01

P07

P05 PS01,PS02,PS03 PS04,PS05,PS06 PS07,PS08

P06 PS09 PS10

Gambar 3.87 Jaringan semantik pengunjung 2. Jaringan semantik Member PS17 PS18 PS19 PS20 PS21

M13 PS22 PS23

M03

M14

M04 PS15 PS16

M02

M09

M11

M05 PS06 PS07

M06 M07

M10

M12

PS15 PS16

PS11 PS12 PS13 PS14

M08

Gambar 3.88 Jaringan semantik member

162

3. Jaringan semantik Admin A20

A21

A19

A22

PS09 PS10

A23

A01 A03

A04

A05

A24 A06

A25 A17

A07

A26 A16

A02

A08

A27 A09

A15

A28 A14 A38

A10 A13

A12

A11 A29

A37

A36

A30 A35

A31 A34

A33

A32

Gambar 3.89 Jaringan semantik admin 3.4 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 :

163

b. Prosedur Registrasi Prosedur Registrasi, prosedur ini dilakukan ketika pengguna akan melakukan registrasi. Prosedur registrasi dapat dilihat pada gambar 3.90. Start

Input data registrasi

Tampil pesan Data Harus diisi

Pengecekan Data Kosong

Data Kosong

Ya

Tidak Data terisi

Cek Validasi data

Salah

Tampil pesan Data Salah

Benar

Simpan Data

Tampil Pesan Terima kasih Anda sudah meregistrasi pada web kami. Untuk mengaktivasi Akun Anda silahkan periksa email Anda.

Registrasi Berhasil

Finish

Gambar 3.90 Prosedur Registrasi

164

c. Prosedura Login Prosedur Login, prosedur ini dilakukan ketika pengguna telah melakukan registrasi. Dan akan melakukan Login. Prosedur Login dapat dilihat pada gambar 3.91.

Mulai

Masukkan Username dan Password

Cek username dan Password

Invalid

Tampilkan pesan Username tidak dikenal

Valid

Masuk Menu Member

Selesai

Gambar 3.91 Prosedur Login

165

d. Prosedur Ubah Password Prosedur ubah password, merupakan prosedur yang terjadi ketika member ingin mengganti password. Prosedur ubah password dapat dilihat pada gambar 3.92.

Mulai

Input data password Baru

Password Baru

Cek password baru?

Tampil pesan data salah

invalid

valid Ubah Password berhasil

Selesai

Gambar 3.92 Prosedur Ubah password

166

e. Prosedur Edit Data Member Prosedur edit data member, merupakan prosedur yang terjadi ketika member ingin mengedit profil. Prosedur edit data member dapat dilihat pada gambar 3.93.

Mulai

Input data member yang akan di ubah Data gagal disimpan Data profil Member

Cek kelengkapan data profil?

Tidak

Valid Data Profil member berhasil diubah

Selesai

Gambar 3.93 Prosedur Edit data member

167

f. Prosedur Pembelian Prosedur pembelian, prosedur ini dilakukan ketika member akan melakukan pembelian. Prosedur pembelian dapat dilihat pada gambar 3.94.

Start

login

member pilih produk pembelian

Cek stok produk

Tampil pesan Stok tidak mencukupi

tidak Tersedia

ya Simpan pesanan di keranjang belanja

Konfirmasi pengiriman

Konfirmasi pembayaran

Bayar

Finish

Gambar 3.94 Prosedur Pembelian

168

g. Prosedur Tambah Data Prosedur tambah data, prosedur ini dilakukan ketika admin akan melakukan penambahan data. Prosedur tambah data dapat dilihat pada gambar 3.95.

Mulai

Input data yang akan ditambah

Data

Data Kosong

Tampil Pesan Data tidak Boleh Kosong

Ya

Tidak Penambahan tersimpan

Tambah data berhasil

Selesai

Gambar 3.95 Prosedur Tambah data

169

h. Prosedur Ubah Data Prosedur ubah data, prosedur ini dilakukan ketika admin akan melakukan perubahan data. Prosedur ubah data dapat dilihat pada gambar 3.96. Mulai

Input data yang akan diubah

Data diubah

Perubahan tersimpan

Ubah data berhasil

Selesai

Gambar 3.96 Prosedur Ubah data

BAB 3 ANALISIS DAN PERANCANGAN SISTEM

Recommend Documents