BAB III PEMBAHASAN. Origami Zone, penulis melakukan observasi dan wawancara kepada pemilik distro

(1)

34

PEMBAHASAN

3.1. Tinjauan Perusahaan

Sebelum merancang sebuah website, penulis melakukan riset pada distro

Origami Zone, penulis melakukan observasi dan wawancara kepada pemilik distro

serta mengamati sistem menyangkut penjualan produk pada distro Origami Zone.

3.1.1. Sejarah Perusahaan

Origami Zone adalah sebuah distro yang bergerak dibidang fashion menjual

berbagai produk yang bertemakan anime, distro ini berdiri pada tanggal 16 April 2016 dan berada di daerah Cikampek, tepatnya berlokasi di Jalan Cilegon No. 47, masuk Gang Rambutan, desa Sarimulya, Kota Baru - Karawang dengan keyword @origamizone pada aplikasi google maps. Produk yang di jual pada distro ini yaitu kaos, sweater, tas, topi, dan assesoris lainnya yang bertemakan anime.

Origami Zone merupakan satu – satunya distro yang menjual produk

bertemakan anime didaerah Cikampek, sehingga produk yang di jual pada distro ini berbeda dengan produk yang dijual distro lain pada umumnya. Hadir dengan konsep „anime’ tentunya membuat ciri khas tersendiri pada distro ini, yang unik dan terkenal diberbagai kalangan usia baik anak – anak, remaja sampai dewasa, khususnya bagi para pecinta anime dalam konsep yang dibuatnya tersebut. Demi memenuhi kebutuhan pelanggan Origami Zone menjual produk yang berkualitas tinggi, dengan

(2)

design yang menarik dan terus ber inovasi agar dapat mengikuti trend fashion masa kini, tentunya masih dengan konsep anime yang di andalkannya.

3.1.2. Visi dan Misi Perusahaan

1. Visi

Menjadi sebuah perusahaan dibidang fashion yang maju dan kreatif dalam setiap design dan produknya, memiliki kredibilitas dari masa ke masa dengan ciri khas unik, namun tetap trendy dalam mengikuti trend mode fashion dunia, serta mempu bersaing secara optimal di pasar global.

2. Misi

Memasarkan produk yang berkualitas dan inovatif, Selalu menomorsatukan orisinilitas, serta memberikan kepuasan pada pelanggan, menjaga komitmen dan kepercayaan dengan pelayanan yang terbaik.

3.1.3. Struktur Organisasi dan Fungsi

Distro Origami Zone belum lama berdiri, dan masih dalam tahap berkembang, sehingga hanya memiliki beberapa karyawan saja, yang terdiri dari 2 orang store

keeper. Berikut ini adalah gambaran dari struktur organisasi yang terdapat pada distro Origami Zone.

(3)

A. Struktur Organisasi Distro Origami Zone

Sumber : Distro Origami Zone

Gambar III.1

Struktur Organisasi Distro Origami Zone

B. Fungsi Struktur Organisasi Distro Origami Zone

Berikut ini merupakan fungsi dari setiap bagian :

1. Pemilik

Memimpin dan mengelola distro Origami Zone dalam mengembangkan pemasaran dan bertanggung jawab atas wewenang perusahaan. Serta mengawasi dan bertanggung jawab atas bentuk pengeluaran dan pemasukan pada distro dalam bentuk materi.

2. Store Keeper (Penjaga Distro)

Menata dan mengelola barang yang di jual, menjual produk atau mencapai produktivitas kerja secara maksimal, memberikan informasi dan melayani pelanggan dengan baik, membuka serta menutup distro pada waktu yang ditentukan, menjaga kebersihan area distro serta menjaga keamanan pada distro.

Pemilik

(4)

C. Fasilitas

Fasilitas yang terdapat pada distro Origami Zone adalah sebagai berikut : 1. Area Penjualan dengan AC

2. Kamar Mandi

3. Area Parkir Kendaraan

3.2. Analisa Kebutuhan

Dengan adanya web yang penulis rancang untuk distro Origami Zone di tujukan agar dapat memenuhi kebutuhan user dan pemilik (admin).

1. User

Dapat mempermudah user dalam melihat produk – produk yang baru, mengisi testimoni tentang produk, melihat kontak alamat lengkap distro, sejarah singkat mengenai distro pada halaman tentang kami dan mendapatkan informasi lainnya tanpa harus pergi ke distro, serta memudahkan user dalam pembelian produk secara online.

2. Pemilik (Admin)

Memudahkan admin dalam melakukan pengolahan dan pengelolaan data, admin dapat langsung melihat data barang, data pemesanan, laporan penjualan, konfirmasi pembayaran, serta memperluas media promosi distro dengan mudah dan murah, juga transaksi penjualan pada distro secara online.

(5)

3.3. Perancangan Perangkat Lunak 3.3.1. Rancangan Antar Muka

Untuk menjelaskan bagaimana program ini dapat berjalan, berikut penulis sampaikan beberapa rancangan halaman antar muka (interface), rancangan sistem basis data dan rancangan struktur navigasi.

A. Rancangan Antar Muka Halaman Admin 1. Rancangan Antar Muka Login Admin

Halaman login admin merupakan halaman yang digunakan untuk masuk ke halaman admin web, pada halaman ini terdapat form memasuki username dan

password, sehingga yang tertentu saja yang dapat mengakses.

Gambar III.2

Rancangan Antar Muka Login Admin

HEADER Gambar LOGIN ADMIN Username : Password : LOGIN Login

(6)

HEADER

Home Selamat datang . . . ! Anda login sebagai Administrator Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout

2. Rancangan Antar Muka Beranda Admin

Tampilan halaman beranda ini merupakan halaman pembuka. Pada halaman ini admin dapat langsung melanjutkan untuk memilih menu yang akan dikerjakan.

Gambar III.3

Rancangan Antar Muka Beranda Admin

3. Rancangan Antar Muka Password Admin

Pada halaman password admin ini adalah halaman yang digunakan untuk mengubah atau mengganti password admin, sehingga pada saat login admin dapat mengakses dengan password yang baru.

(7)

HEADER Home Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout

GANTI PASSWORD ADMIN Username : Password Lama : Password Baru : admin SIMPAN Password Admin Gambar III.4

Rancangan Antar Muka Password Admin

4. Rancangan Antar Muka Data Provinsi Admin

Tampilan halaman data provinsi ini adalah halaman untuk melihat data provinsi dan ongkos kirim pada setiap provinsi, yang menjadi acuan untuk ongkos kirim digunakan pada biaya pengiriman produk, admin dapat menambahkan data provinsi, mengubah data, dan juga menghapusnya.

(8)

HEADER Home Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout DATA PROVINSI Add data

No Nama Provinsi Biaya Kirim (Rp) Tools Aceh, D.I Bali 1 30.000 Edit 2 20.000 Delete Edit Delete

3 Banten 20.000 Edit Delete

Tools Data Provinsi

Gambar III.5

Rancangan Antar Muka Data Provinsi Admin

5. Rancangan Antar Muka Data Kategori Admin

Tampilan halaman data kategori ini adalah halaman untuk melihat data kategori produk – produk yang dijual agar memudahkan user dalam mencari dan memilih barang yang telah di kategorikan, admin dapat menambahkan data kategori, mengubah data dan juga menghapus data.

(9)

HEADER Home Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout DATA KATEGORI Add data

No Nama Kategori Tools

Kaos Polo 1 Edit 2 Delete Edit Delete

3 Sepatu Edit Delete

Tools Data Kategori

Gambar III.6

Rancangan Antar Muka Data Kategori Admin

6. Rancangan Antar Muka Data Barang Admin

Tampilan halaman data barang ini adalah halaman untuk melihat data barang produk – produk yang dijual yang telah diinputkan oleh admin, pada halaman ini admin dapat menambahkan produk terbaru, mengubah data dan juga menghapusnya.

(10)

HEADER Home Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout DATA BARANG Add data

No Kode Harga (Rp) Tools

B0001 1 110.000 Edit 2 Delete Edit Delete 3 Edit Delete Tools Nama Barang B0003 B0002

Hinata Shoyo T-Shirt Naruto Hokage T-Shirt Kakashi Obito T-Shirt

Stok 110.000 110.000 5 6 6

Jumalah Data : 3 Halaman Ke : 1

Data Barang

Gambar III.7

Rancangan Antar Muka Data Barang Admin

7. Rancangan Antar Muka Data Pelanggan Admin

Tampilan halaman data pelanggan ini adalah halaman untuk melihat data pelanggan yang sudah mendaftar, pada halaman ini admin dapat mencari informasi mengenai pelanggan, dan juga menghapus data pelanggan.

(11)

HEADER Home Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout DATA PELANGGAN Cari No Kode No Telepon P00009 1 081511112 2 Delete Delete 3 Delete Tools Nama Pelanggan P00007 P00008 Rizal Firmansyah Elsa Agustina Boy Furqon Kelamin 0812555566 081233334

Username Laki-laki Perempuan Laki-laki rizal Elsa A boyz Cari Nama Data Pelanggan Gambar III.8

Rancangan Antar Muka Data Pelanggan Admin

8. Rancangan Antar Muka Data Pemesanan Admin

Tampilan halaman data pemesanan ini adalah halaman untuk melihat data pemesanan yang sudah masuk. Pada halaman ini admin dapat melihat detail pemesanan barang dari pelanggan dan mengubah status pemesanan dari „Pesan‟ menjadi „Lunas‟ (sebelumnya admin melihat halaman konfirmasi transfer terlebih dahulu) setelah pesanan tersebut berstatus Lunas barulah admin dapat memproses pengiriman barang kepada pelanggan tersebut .

(12)

HEADER Home Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout DAFTAR PEMESANAN FILTER DATA

Periode : DD-MM-YYYY s/d DD-MM-YYYY Tampilkan

No No Pesan Set Bayar

PS000017 1 2 Tools Tanggal PS000016 01-06-2017 Status Lunas Pesan Total Transfer 01-06-2017 Rp. 375.884 Rp. 375.432 Lihat Batalkan Set Bayar Batalkan Lihat Bayar Lihat Tools Pemesanan Barang Gambar III.9

Rancangan Antar Muka Data Pemesanan Admin

9. Rancangan Antar Muka Konfirmasi Transfer Admin

Tampilan halaman data konfirmasi transfer ini adalah halaman untuk melihat data transfer uang dari pelanggan yang sudah masuk. Pada halaman ini admin dapat melihat konfirmasi yang dilakukan oleh pelanggan mengenai jumlah transfer yang dikirim dan mengecek apakah benar sudah dikirim pada rekening admin, setelah itu barulah admin dapat memproses pesanan pelanggan dengan merubah statusnya pada halaman data pemesanan, admin juga dapat menghapus data konfirmasi yang telah masuk.

(13)

HEADER Home Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout KONFIRMASI TRANSFER No Tanggal Keterangan P00009 1 2 Delete Delete 3 Delete Tools Nama Pelanggan P00007 P00008 Rizal Firmansyah Elsa Agustina Boy Furqon Transfer (Rp) 375.432 375.884 245.000 No Pesan 01-06-2017 01-06-2017 01-06-2017 sudah transfer sudah dibayar segera kirim

Konfirmasi Transfer

Gambar III.10

Rancangan Antar Muka Konfirmasi Transfer Admin

10. Rancangan Antar Muka Laporan Admin

Tampilan halaman laporan ini adalah halaman untuk melihat data laporan provinsi, barang, kategori, pelanggan, dan pemesanan. Pada halaman ini admin dapat melihat semua laporan data yang ada di halaman admin dengan memilih laporan berdasarkan tanggal dan periode.

(14)

Gambar III.11

Rancangan Antar Muka Laporan Admin

B. Rancangan Antar Muka Halaman User 1. Rancangan Antar Muka Beranda atau Index

Tampilan halaman beranda atau index ini merupakan halaman depan dari semua halaman yang ada di web user. Halaman index ini yang akan muncul pertama kali dan dirancang cukup kompleks karena akan ada link untuk ke semua halaman.

HEADER Home Password Admin Data Provinsi Data Kategori Data Barang Data Pelanggan Pemesanan Barang Konfirmasi Transfer Laporan Logout

Laporan Data Provinsi Laporan Data Kategori Laporan Data Barang Laporan Data Pelanggan Laporan Pemesanan Masuk - Periode Laporan Pemesanan Lunas - Tanggal Laporan Pemesanan Lunas - Periode

(15)

HEADER

Cari Barang Cari Status : Belum Login User : T amu

HEADER

Beranda Produk Cara Order Kontak Kami T entang Kami Konfirmasi

LOGIN WELCOME T O ORIGAMI ZONE

KAT EGORI T EST IMONI SLIDER Username : Password : LOGIN >Pendaftaran Baru > ZZZZZ > ZZZZZ > ZZZZZ > ZZZZZ T eks Berjalan Koleksi Barang > Isi T estimoni Gambar BELI NAMA PRODUK Deskripsi Produk Stok : Kategori : Rp. Harga Halaman : FOOT ER Nama, T anggal post

Isi T estimonial

Nama, T anggal post Isi T estimonial

Beranda

Gambar III.12

(16)

Cari Barang Cari Status : Belum Login User : T amu

HEADER

Beranda Produk Cara Order Kontak Kami T entang Kami Konfirmasi

LOGIN Koleksi Barang

KAT EGORI T EST IMONI Username : Password : LOGIN >Pendaftaran Baru > ZZZZZ > ZZZZZ > ZZZZZ > ZZZZZ > Isi T estimoni Gambar BELI NAMA PRODUK Deskripsi Produk Stok : Kategori : Rp. Harga Halaman : FOOT ER Nama, T anggal post

Isi T estimonial

Nama, T anggal post Isi T estimonial Gambar NAMA PRODUK Stok : Kategori : Deskripsi Produk Rp. Harga BELI Produk

2. Rancangan Antar Muka Produk

Tampilan halaman produk ini adalah halaman untuk menampilkan produk – produk dari Origami Zone.

Gambar III.13

(17)

Cari Barang Cari Status : Belum Login User : Tamu

HEADER

Beranda Produk Kontak Kami Tentang Kami Konfirmasi

LOGIN KATEGORI TESTIMONI Username : Password : LOGIN >Pendaftaran Baru > ZZZZZ > ZZZZZ > ZZZZZ > ZZZZZ > Isi Testimoni FOOTER Nama, Tanggal post

Isi Testimonial

Nama, Tanggal post Isi Testimonial

Ketentuan Order Barang

Teks Panduan Order Barang

Cara Order

3. Rancangan Antar Muka Cara Order

Tampilan halaman cara order ini adalah halaman panduan untuk pelanggan agar dapat melakukan pemesanan dengan baik, aman, dan nyaman.

Gambar III.14

(18)

HEADER

Isi Testimonial

Nama, Tanggal post Isi Testimonial Kontak Kami FB WA IG MAPS WRcloth ozon_distro 0895 2653 1019 Origami Zone

Peta Lokasi Distro Origami Zone Cara Order Kontak Kami

4. Rancangan Antar Muka Kontak Kami

Tampilan halaman kontak ini adalah halaman yang berisi tentang kontak yang dapat di hubungi dan alamat lengkap lokasi Origami Zone.

Gambar III.15

(19)

HEADER

Isi Testimonial

Nama, Tanggal post Isi Testimonial

Tentang Kami

Teks Tentang Website Origami Zone

Cara Order Tentang Kami

5. Rancangan Antar Muka Tentang Kami

Tampilan halaman tentang kami ini adalah halaman tentang sejarah singkat

Origami Zone.

Gambar III.16

(20)

HEADER

Isi Testimonial

Nama, Tanggal post Isi Testimonial Konfirmasi Pembayaran Cara Order No. Pemesanan Nama Pelanggan Jumlah Transfer (Rp,) Keterangan Kirim Catatan :

Catatan mengenai penulisan No Transaksi dan Jumlah Transfer

Konfirmasi

6. Rancangan Antar Muka Konfirmasi

Tampilan halaman konfirmasi ini adalah halaman untuk melakukan konfirmasi pembayaran setelah pelanggan melakukan transfer ke rekening Origami Zone.

Gambar III.17

(21)

3.3.2. Basis Data

A. Entity Relationship Diagram (ERD)

Melakukan Memiliki Memproses Pemesanan Pemesanan_detail Barang Memiliki Kategori Provinsi Tujuan id* nm_pelanggan testimonial kd_pelanggan* nm_pelanggan kelamin email no_telepon username passsword tgl_daftar Pelanggan Mengisi Melakukan Testimoni Konfirmasi email id* no_pemesanan nm_pelanggan jumlah_transfer keterangan tanggal kd_provinsi* nm_provinsi biaya_kirim no_pemesanan* kd_pelanggan** tgl_pemesanan nama_penerima alamat_lemgkap kd_provinsi** kota kode_pos no_telepon status_bayar id* no_pemesanan** kd_barang** harga jumlah kd_barang* nm_barang harga_modal harga_jual stok keterangan kd_kategori* nm_kategori 1 M 1 1 1 1 1 M 1 1 1 M M 1 Gambar III.18 Entity Relationship Diagram

(22)

B. Logical Relationship Structure (LRS) provinsi kd_provinsi * nm_provinsi biaya_kirim pelanggan kd_pelanggan * nm_pelanggan kelamin email no_telepon username password tgl_daftar barang kd_barang * nm_barang harga_modal harga_jual stok keterangan file_gambar kd_kategori ** pemesanan no_pemesanan * kd_pelanggan ** tgl_pemesanan nama_penerima alamat_lengkap kd_provinsi ** kota kode_pos no_telepon status_bayar konfirmasi id * no_pemesanan nm_pelanggan jumlah_transfer keterangan tanggal pemesanan_detail id * no_pemesanan ** kd_barang ** harga jumlah kategori kd_kategori * nm_kategori testimonial id * nm_pelanggan email testimonial 1 M 1 1 1 M 1 1 1 M 1 1 1 M Gambar III.19

(23)

C. Spesifikasi File

1. Spesifikasi Tabel Admin

Nama file : Admin

Akronim : admin.myd

Fungsi : untuk menyimpan data admin dan password

Tipe file : File Master

Organisasi File : Indexed Sequential

Akses File : Sequential

Media : Harddisk

Panjang Record : 42

Kunci Field : id

Software : MySQL

Tabel III.1

Spesifikasi Tabel Admin

No Elemen Data Akronim Type Size Keterangan

1. Admin id Id Int 2 Auto_increment,

Primary Key

2. Admin Nama username Varchar 30

(24)

2. Spesifikasi Tabel Barang

Nama file : Barang

Akronim : barang.myd

Fungsi : untuk menyimpan data produk

Media : Harddisk

Kunci Field : kd_barang

Tabel III.2

Spesifikasi Tabel Barang

No Elemen Data Akronim Type Size Keterangan

1. Kode Barang kd_barang Char 5 Auto_increment,

Primary Key

2. Nama Barang nm_barang Varchar 30

3. Harga Modal harga_modal Int 12

4. Harga Jual harga_jual Int 12

5. Stok Barang Stok Int 4

(25)

7. Gambar file_gambar Varchar 100

8. Kode Kategori kd_kategori Char 4

3. Spesifikasi Tabel kategori

Nama file : kategori

Akronim : counter.myd

Fungsi : untuk menyimpan data pengelompokkan produk

Media : Harddisk

Kunci Field : kd_kategori

Tabel III.3

Spesifikasi Tabel Kategori

1. Kode Kategori kd_kategori Char 4 Primary Key

(26)

4. Spesifikasi Tabel Konfirmasi

Nama file : Konfirmasi

Akronim : konfirmasi.myd

Fungsi : untuk menyimpan data konfirmasi pelanggan

Media : Harddisk

Kunci Field : id

Tabel III.4

Spesifikasi Tabel Konfirmasi

1. Id Id Int 4 Auto_increment,

Primary Key

2. No Pemesanan no_pemesanan Varchar 8

3. Nama Pelanggan nm_pelanggan Varchar 30

4. Jumlah Transfer jumlah_transfer Int 12

5. Keterangan keterangan Text -

(27)

5. Spesifikasi Tabel Pelanggan

Nama file : Pelanggan

Akronim : pelanggan.myd

Fungsi : untuk menyimpan data pelanggan

Media : Harddisk

Kunci Field : kd_pelanggan

Tabel III.5

Spesifikasi Tabel Pelanggan

1. Kode

Pelanggan

kd_pelanggan Char 6 Primary Key

2. Nama

Pelanggan nm_pelanggan Varchar 30

3. Jenis Kelamin Kelamin Enum Laki-laki,

Perempuan

4. Email Email Varchar 40

(28)

6. Username Username Varchar 20

7. Password Password Varchar 10

8. Tanggal Daftar Tgl_daftar Date -

6. Spesifikasi Tabel Pemesanan

Nama file : Pemesanan

Akronim : pemesanan.myd

Fungsi : untuk menyimpan data pemesanan pelanggan

Media : Harddisk

Kunci Field : no_pemesanan

Tabel III.6

Spesifikasi Tabel Pemesanan

1. No Pemesanan no_pemesanan Char 8 Primary Key

(29)

3. Tanggal

Pemesanan tgl_pemesanan Date -

4. Nama Penerima nama_penerima Varchar 30

5. Alamat Penerima alamat_lengkap Varchar 100

6. Kode Provinsi kd_provinsi Char 3

7. Kota kota Varchar 20

8. Kode Pos kode_pos Varchar 6

9. No Telepon no_telepon Varchar 13

10. Status Bayar status_bayar Enum Lunas

, Batal

7. Spesifikasi Tabel Pemesanan Item

Nama file : pemesanan_item

Akronim : pemesanan.myd

Fungsi : untuk menyimpan data detail pemesanan pelanggan

Media : Harddisk

Kunci Field : id

(30)

Tabel III.7

Spesifikasi Tabel pemesanan_item

1. Id Id Int 4 Primary Key

2. No Pemesanan no_pemesanan Char 8

3. Kode Barang kd_barang Char 5

4. Harga harga Int 12

5. Jumlah jumlah Int 3

8. Spesifikasi Tabel Provinsi

Nama file : Provinsi

Akronim : provinsi.myd

Fungsi : untuk menyimpan data tujuan biaya kirim

Media : Harddisk

Kunci Field : kd_provinsi

(31)

Tabel III.8

Spesifikasi Tabel Provinsi

1. Kode Provinsi kd_provinsi Char 3 Primary Key

2. Nama Provinsi nm_provinsi Varchar 30

3. Biaya Kirim biaya_kirim Int 12

9. Spesifikasi Tabel Testimonial

Nama file : testimonialtbl

Akronim : testimonialtbl.myd

Fungsi : untuk menyimpan data testimony pelanggan

Media : Harddisk

Kunci Field : id

(32)

Tabel III.9

Spesifikasi Tabel Testimonial

1.

Id id Int 11 Auto_increment,

Primary Key

2. Nama nama Varchar 30

3. Email email Varchar 40

4. Tanggal tanggal Date -

5. Testimonial testimonial Text -

10. Spesifikasi Tabel Keranjang Belanja

Nama file : temp_keranjang

Akronim : temp_keranjang.myd

Fungsi : untuk menyimpan data keranjang belanja

Media : Harddisk

Kunci Field : id

(33)

Tabel III.10

Rancangan Tabel Keranjang Belanja

1. Id Id Int 5 Primary Key

2. Kode Barang kd_barang Char 5

3. Harga harga Int 12

4. Jumlah jumlah Int 3

5. Tanggal tanggal Date -

6. Kode Pelanggan kd_pelanggan Char 6

3.3.3. Rancangan Struktur Navigasi

Struktur navigasi website digunakan untuk menggambarkan secara garis besar isi di seluruh situs website dn menggambarkan hubungan antara isi halaman dengan halaman yang lain. Struktur navigasi website origami zone ini adalah struktur navigasi campuran. Melalui struktur navigasi ini, terlihat bagaimana isi dan susunan dari website secara menyeluruh.

Pembuatan struktur navigasi website ini akan sangat membantu ketika akan membuat rancangan seluruh halaman website. Struktur navigasi website yang baik adalah yang mampu memberitahukan kepada pengunjung tentang lokasi mereka sekarang dan lokasi yang bisa dikunjungi dari lokasi sekarang.

(34)

1. Struktur Navigasi Admin

Gambar III.20

(35)

2. Struktur Navigasi User

Gambar III.21

(36)

3.3.4. Implementasi dan Pengujian Unit 3.4.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada website origami zone berdasarkan

hasil rancangan antar muka admin.

1. Halaman Login Admin

Gambar III.22

(37)

2. Halaman Beranda Admin

Gambar III.23

Rancangan Antar Muka Halaman Beranda Admin

3. Halaman Password Admin

Gambar III.24

(38)

4. Halaman Data Provinsi Admin

Gambar III.25

Rancangan Antar Muka Halaman Data Provinsi Admin

5. Halaman Data Kategori Admin

Gambar III.26

(39)

6. Halaman Data Barang Admin

Gambar III.27

Rancangan Antar Muka Halaman Data Barang Admin

7. Halaman Data Pelanggan Admin

Gambar III.28

(40)

8. Halaman Pemesanan Barang Admin

Gambar III.29

Rancangan Antar Muka Halaman Pemesanan Barang Admin

9. Halaman Konfirmasi Transfer Admin

Gambar III.30

(41)

10. Halaman Laporan Admin

Gambar III.31

Rancangan Antar Muka Halaman Laporan Admin

11. Halaman Beranda User

Gambar III.32

(42)

12. Halaman Produk User

Gambar III.33

Rancangan Antar Muka Halaman Produk User

13. Halaman Cara Order User

Gambar III.34

(43)

14. Halaman Kontak Kami User

Gambar III.35

Rancangan Antar Muka Halaman Kontak Kami User

15. Halaman Tentang Kami User

Gambar III.36

(44)

16. Halaman Konfirmasi User

Gambar III.37

Rancangan Antar Muka Halaman Konfirmasi User

B. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum yang dibutuhkan untuk mengimplementasikan aplikasi pendaftar member dan pembelian produk pada Toko Paris Tas.

1. Spesifikasi Perangkat Keras

a. Server 1) CPU

a) Processor Intel® Pentium® Core 2 Duo b) RAM DDR4 2GB

(45)

2) Mouse 3) Keyboard

4) Monitor dengan resolusi layar minimum 1024 x 768 5) Koneksi internet dengan kecepatan 2 Mbps

b. Client 1) CPU 2) Mouse 3) Keyboard

4) Monitor dengan resolusi layar minimum 1024 x 768 5) Koneksi internet dengan kecepatan 56 Kbps

2. Spesifikasi Perangkat Lunak

a. Server

1) System Operasi : Microsoft Windows

2) Web server : Apache2Triad

3) Web Browser : Mozilla Firefox dan Google Chrome

b. Client

1) System Operasi : Microsoft Windows

(46)

3.4.2. Pengujian Unit

A. Pengujian Terhadap Form Login Admin

Tabel III.11

Hasil Pengujian Black Box Testing Halaman Login Admin

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Username dan password tidak diisi kemudian klik tombol login Username: (kosong) Password : (kosong) Sistem akan menolak dan menampilkan “Data Username tidak boleh kosong, Data Password tidak boleh kosong” Sesuai Harapan Valid 2. Memasukan username dan password tidak diisi kemudian klik tombol login Username: admin Password : (kosong) Sistem akan menolak dan menampilkan “Data Password tidak boleh kosong” Sesuai Harapan Valid 3. Mengkosongkan username dan password diisi

lalu klik tombol

login Username: (kosong) Password : admin Sistem akan menolak dan menampilkan Data Username tidak boleh kosong” Sesuai Harapan Valid 4. Memasukkan dengan kondisi salah satu data benar dan salah satu data salah lalu klik tombol

login Username:ad min (benar) Password : adm (salah) Sistem akan menolak dan menampilkan “password atau username anda salah, silahkan coba lagi” Sesuai Harapan Valid 5. Menginput data

login yang benar

lalu klik tombol

Username:ad

min (benar)

Password :

Sistem

menerima akses

login lalu masuk

Sesuai

(47)

login admin(benar) sebagai admin

B. Pengujian Terhadap halaman Password Admin

Tabel III.12

Hasil Pengujian Black Box Testing Halaman Password Admin

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Melihat Menu Password Admin Klik Password Admin Muncul halaman ganti password Sesuai Harapan Valid 2. Mengosongka n field password lama dan baru kemudian klik Simpan Password Lama: (kosong) Password Baru : (kosong) Sistem menolak menampikan pesan “Data Password baru belum diisi, Maaf Password Anda Salah” Sesuai Harapan Valid 3. Mengisi field password lama

yang salah dan mengisi password baru kemudian Klik Simpan Password Lama: (diisi salah) Password Baru : (diisi) Sistem menolak menampikan pesan “Maaf Password Anda Salah” Sesuai Harapan Valid 4. Mengisi field password lama yang benar dan megosongkan password baru kemudian Klik Simpan Password Lama: (diisi benar) Password Baru : (kosong) Sistem menolak menampikan pesan “Data Password baru belum diisi” Sesuai Harapan Valid 5. Mengisi field password lama yang benar dan mengisi Password Lama: (diisi benar) Password Baru : Sistem merubah Password Sesuai Harapan Valid

(48)

password baru

kemudian Klik Simpan

(diisi)

C. Pengujian Terhadap halaman Data Provinsi Admin

Tabel III.13

Hasil Pengujian Black Box Testing Halaman Data Provinsi Admin

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Melihat Data Provinsi Admin Klik Data Provinsi Muncul halaman Data Provinsi Sesuai Harapan Valid 2. Menambah

data provinsi Klik Add Data

Muncul halaman form tambah Data Provinsi Sesuai Harapan Valid 3. Semua form tambah data provinsi diisi dan mengosongk an satu field kemudian Klik Simpan Nama Provinsi : (kosong) Biaya Kirim(Rp): 30000 Sistem menolak menampikan pesan “Data Nama Provinsi tidak boleh kosong” Sesuai Harapan Valid 4. Semua form tambah data provinsi diisi, biaya kirim diisi dengan huruf kemudian Klik Simpan Nama Provinsi : Papua Biaya Kirim(Rp): Tigapuluh ribu Sistem menolak menampikan pesan “Data Biaya Kirim (Rp) tidak boleh kosong, dan harus diisi angka” Sesuai Harapan Valid 5. Semua form tambah data provinsi diisi dengan benar kemudian Nama Provinsi : Papua Biaya Kirim(Rp): Sistem menambah Data Provinsi Sesuai Harapan Valid

(49)

Klik Simpan 30000 Klik SIMPAN 6. Mengubah data provinsi dan mengisi semua form kemudian Klik Simpan

Klik Edit Data Provinsi

Dan mengubah isi semua form klik Simpan Sistem merubah Data Provinsi Sesuai Harapan Valid 7. Menghapus data provinsi

Klik Delete Data Provinsi Sistem menghapus Data Provinsi Sesuai Harapan Valid

D. Pengujian Terhadap halaman Data Kategori Admin

Tabel III.14

Hasil Pengujian Black Box Testing Halaman Data Kategori Admin

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Melihat Data Kategori Klik Data Kategori Muncul halaman Data Kategori Sesuai Harapan Valid 2. Menambah data kategori

Klik Add Data Data Kategori Muncul halaman form tambah Data Kategori Sesuai Harapan Valid 3. Semua form tambah data Barang diisi dan mengosongkan satu field kemudian Klik Simpan Nama Kategori : (kosong) Sistem menolak menampikan pesan “Data Nama Kategori tidak boleh kosong” Sesuai Harapan Valid

4. Semua form _{tambah data} provinsi diisi Nama Kategori : Dompet Sistem menambah Data Sesuai Harapan Valid

(50)

dengan benar kemudian Klik Simpan Kategori 5. Mengubah data Kategori dan mengisi semua form kemudian Klik Simpan

Klik Edit Data Provinsi Dan mengubah isi form Sistem merubah Data Kategori Sesuai Harapan Valid 6. Menghapus data Kategori Klik Delete Data Kategori Sistem menghapus Data Kategori Sesuai Harapan Valid

E. Pengujian Terhadap halaman Data Barang Admin

Tabel III.15

Hasil Pengujian Black Box Testing Halaman Data Barang Admin

No Skenario

Pengujian Test Case

Hasil yang diharapkan

Hasil

Pengujian Kesimpulan 1. Melihat Data

Barang Admin Klik Data Barang

Muncul halaman Data Barang Sesuai Harapan Valid 2. Menambah data Barang

Klik Add Data Data Barang Muncul halaman form tambah Data Barang Sesuai Harapan Valid 3. Semua form tambah data Barang diisi dan mengosongkan satu field kemudian Klik Simpan Nama Barang: (diisi) Harga Modal(Rp): (Diisi Angka) Harga Jual (Rp): (Diisi Angka) Jumlah Stok: Sistem menolak menampikan pesan “Data Stok tidak boleh kosong, dan harus diisi angka”

Sesuai

(51)

(kosong) File Gambar:(Diisi) Keterangan: (Diisi) Kategori: (Diisi) 4. Semua form tambah data Barang diisi benar, Harga Modal, Harga Jual, Stok diisi dengan huruf kemudian Klik Simpan Nama Barang: (Diisi) Harga Modal(Rp): (Diisi Huruf) Harga Jual (Rp): (Diisi Huruf) Jumlah Stok: (Diisi Huruf) File Gambar:(Diisi) Keterangan: (Diisi) Kategori: (Diisi) Sistem menolak menampikan pesan “Data Harga Modal (Rp) tidak boleh kosong, dan harus diisi angka ! Data Harga Jual (Rp) tidak boleh kosong, dan harus diisi angka ! Data Stok tidak boleh kosong, dan harus diisi angka” Sesuai Harapan Valid 5. Semua form tambah data Barang diisi dengan benar kemudian Klik Simpan Nama Barang: (Diisi) Harga Modal(Rp): (Diisi Angka) Harga Jual (Rp): (Diisi Angka) Jumlah Stok: (Diisi Angka) File Gambar:(Diisi) Keterangan: (Diisi) Kategori: (Diisi) Sistem menambah Data Barang Sesuai Harapan Valid

(52)

6. Mengubah data Barang dan mengisi semua form kemudian Klik Simpan

Klik Edit Data Barang

Dan mengubah isi semua form Sistem merubah Data Barang Sesuai Harapan Valid 7. Menghapus data Barang

Klik Delete Data Barang Sistem menghapus Data Barang Sesuai Harapan Valid

F. Pengujian Terhadap halaman Data Pelanggan Admin

Tabel III.16

Hasil Pengujian Black Box Testing Halaman Data Pelanggan Admin

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Melihat Data Pelanggan Admin Klik Data Pelanggan Muncul halaman Data Pelanggan Sesuai Harapan Valid 2. Mencari data Pelanggan Mengisi field Pencarian dan Klik Cari Muncul halaman hasil pencarian Sesuai Harapan Valid 3. Menghapus data Pelanggan Klik Delete Data Pelanggan Sistem menghapus Data Pelanggan Sesuai Harapan Valid

(53)

G. Pengujian Terhadap halaman Pemesanan Barang Admin

Tabel III.17

Hasil Pengujian Black Box Testing Halaman Pemesanan Barang Admin

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Melihat Pemesanan Barang Admin Klik Pemesanan Barang Muncul halaman Pemesanan Barang Sesuai Harapan Valid 2. Menampilkan daftar pemesanan Memilih tanggal periode klik Tampilkan Muncul halaman hasil daftar pemesanan sesuai tanggal Sesuai Harapan Valid 3. Mencetak detail transaksi pemesanan

Klik Lihat pada menu Tools Muncul halaman detail transaksi pemesanan Sesuai Harapan Valid 4. Mengubah status pembayaran Klik Bayar Sistem merubah Status Pemesanan menjadi „Lunas‟ Sesuai Harapan Valid

H. Pengujian Terhadap halaman Konfirmasi Pemesanan Admin

Tabel III.18

Hasil Pengujian Black Box Testing Halaman Konfirmasi Pemesanan Admin

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Melihat Konfirmasi Pemesanan Klik Konfirmasi Pemesanan Muncul halaman Konfirmasi Pemesanan Sesuai Harapan Valid 2. Menhapus Konfirmasi Pemesanan Klik Delete Sistem menghapus data Konfirmasi Pemesanan Sesuai Harapan Valid

(54)

I. Pengujian Terhadap halaman Laporan Admin

Tabel III.19

Hasil Pengujian Black Box Testing Halaman Laporan Admin

No Skenario

Pengujian Test Case

Hasil

Pengujian Kesimpulan 1. Melihat

Laporan Klik Laporan

Muncul halaman pilahan Laporan Sesuai Harapan Valid 2. Melihat menu laporan yang dipilih Klik menu laporan yang ingin dilihat Muncul halaman Laporan yang dipilih Sesuai Harapan Valid

J. Pengujian Terhadap halaman Pendaftaran Baru User

Tabel III.20

Hasil Pengujian Black Box Testing Halaman Pendaftaran Baru User

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Mendaftar pelanggan baru Klik pendaftaran baru Muncul halaman pendaftaran baru Sesuai Harapan Valid 2. Mengisi semua form pendaftaran baru dan mengosongkan satu field kemudian Klik Daftar Nama Pelanggan : (diisi) Kelamin : (diisi) Email : (diisi) No Telepon : (kosong) Username : (diisi) Password : (diisi) Sistem menolak menampikan pesan “Data No. Telepon masih kosong, dan harus diisi angka !”

Sesuai

(55)

Password (Lagi) : (diisi) 3. Semua form pendaftaran baru diisi benar, No Telepon diisi dengan huruf kemudian Klik Daftar Nama Pelanggan : (diisi) Kelamin : (diisi) Email : (diisi) No Telepon : (diisi huruf) Username : (diisi) Password : (diisi) Password (Lagi) : (diisi) Sistem menolak menampikan pesan “Data No. Telepon masih kosong, dan harus diisi angka !” Sesuai Harapan Valid 4. Semua form pendaftaran baru diisi benar kemudian Klik Daftar Nama Pelanggan : (diisi) Kelamin : (diisi) Email : (diisi) No Telepon : (diisi angka) Username : (diisi) Password : (diisi) Password (Lagi) : (diisi) Sistem menyimpan Data pelanggan baru Sesuai Harapan Valid

(56)

K. Pengujian Terhadap Form Login User

Tabel III.21

Hasil Pengujian Black Box Testing Halaman Login User

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Username dan password tidak diisi kemudian klik tombol login Username: (kosong) Password : (kosong) Sistem akan menolak dan menampilkan “Data Username kosong, silahkan isi dengan benar. Data Password kosong, silahkan isi dengan benar. Data Username dan Password yang Anda masukan belum benar” Sesuai Harapan Valid 2. Memasukan username dan password tidak diisi kemudian klik tombol login Username: boyz Password : (kosong) Sistem akan menolak dan menampilkan “Data Password kosong, silahkan isi dengan benar. Data Username dan Password yang Anda masukan Sesuai Harapan Valid

(57)

belum benar” 3. Memasukkan

dengan kondisi salah satu data benar dan salah satu data salah lalu klik tombol

login Username: boyz (benar) Password : adm (salah) Sistem akan menolak dan menampilkan “Data Username dan Password yang Anda masukan belum benar” Sesuai Harapan Valid 4. Menginput data

login yang benar

lalu klik tombol

login Username: boyz (benar) Password : 1234 (benar) Sistem menerima akses

login lalu masuk

sebagai anggota

Sesuai

Harapan Valid

L. Pengujian Terhadap halaman Keranjang Belanja User

Tabel III.22

Hasil Pengujian Black Box Testing Halaman Keranjang Belanja User

No Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1. Melihat halaman Keranjang Belanja Klik Keranjang Belanja Muncul halaman Keranjang Belanja Sesuai Harapan Valid 2. Mengubah jumlah beli

Ubah data pada field jumlah dan klik update Sistem akan menrubah Data jumlah beli Sesuai Harapan Valid 4. Memproses keranjang belanja Klik Lanjutkan Sistem akan menampilkan halaman konfirmasi belanja Sesuai Harapan Valid

5. Mengisi semua _form konfirmasi

Nama Penerima : Sistem _menolak menampikan

Sesuai

(58)

belanja dengan benar dan mengosongkan satu field kemudian klik Simpan dan Lanjutkan Transaksi (diisi) Alamat Tujuan : (diisi) Provinsi Tujuan : (diisi) Kota Tujuan : (diisi) Kode Pos : (kosong) No. Telepon : (diisi angka) pesan “Data Kode Pos masih kosong, dan harus diisi angka !” 6. Mengisi semua form konfirmasi belanja dengan benar, mengisi kode pos dan no telepon dengan huruf kemudian klik Simpan dan Lanjutkan Transaksi Nama Penerima : (diisi) Alamat Tujuan : (diisi) Provinsi Tujuan : (diisi) Kota Tujuan : (diisi)

Kode Pos : (diisi huruf) No. Telepon : (diisi huruf) Sistem menolak menampikan pesan “Data Kode Pos masih kosong, dan harus diisi angka ! Data No. Telepon masih kosong, dan harus diisi angka !” Sesuai Harapan Valid 7. Mengisi semua form konfirmasi belanja dengan benar kemudian klik Simpan dan Lanjutkan Transaksi Nama Penerima : (diisi) Alamat Tujuan : (diisi) Provinsi Tujuan : (diisi) Kota Tujuan : (diisi)

Kode Pos : (diisi angka) Sistem menyimpan data konfirmasi belanja Sesuai Harapan Valid

(59)

No. Telepon : (diisi angka)

M. Pengujian Terhadap halaman Isi Testimoni User

Tabel III.23

Hasil Pengujian Black Box Testing Halaman Isi Testimoni User

No Skenario

Pengujian Test Case

Hasil

Pengujian Kesimpulan 1. Mengisi form

Testimoni Klik Isi Testimoni

Muncul halaman Isi Testimoni Sesuai Harapan Valid 2. Mengisi semua form Isi Testimoni dan mengosongkan satu field kemudian klik Simpan Nama : (Kosong) Email : (diisi) Testimonial : (diisi) Sistem menolak menampikan pesan “Nama tidak boleh kosong” Sesuai Harapan Valid 3. Semua form pendaftaran baru diisi benar kemudian klik Simpan Nama : (diisi) Email : (diisi) Testimonial : (diisi) Sistem menyimpan data Testimoni Sesuai Harapan Valid

(60)

N. Pengujian Terhadap halaman Isi Konfirmasi User

Tabel III.24

Hasil Pengujian Black Box Testing Halaman Konfirmasi User

No Skenario

Pengujian Test Case

Hasil

Pengujian Kesimpulan 1. Mengisi form

Konfirmasi Klik Konfirmasi

Muncul halaman Konfirmasi Sesuai Harapan Valid 2. Mengisi semua form Isi Konfirmasi dan mengosongkan satu field kemudian klik Kirim No Pemesanan: (diisi) Nama Penerima: (diisi) Jumlah Ditransfer(Rp): (kosong) Keterangan: (diisi) Sistem menolak menampikan pesan “Data Jumlah Ditransfer (Rp) masih kosong, dan harus ditulis angka” Sesuai Harapan Valid 3. Semua form Konfirmasi diisi benar kemudian klik Kirim No Pemesanan: (diisi) Nama Penerima: (diisi) Jumlah Ditransfer(Rp): (diisi angka) Keterangan: (diisi) Sistem menyimpan data Konfirmasi Sesuai Harapan Valid