BAB III PEMBAHASAN...Header produk akun search informasi Profil Kontak Kami Keranjang HOME flooter facebook instagram twitter KATEGORI Kategori 1 MEREK Kategori Kategori Kategori Merek

22

BAB III

PEMBAHASAN

3.1. Analisa Kebutuhan

Dalam kesempatan ini penulis membuat sebuah Website yang bertujuan

untuk Memberikan informasi mengenai jam tangan yang dijual pemilik kepada

calon pembeli sehingga mempermudah calon pembeli untuk mendapatkan barang

yang mereka inginkan. Penulis berharap dengan membaca setiap informasi yang

dimuat dalam Website ini, para pengunjung Web nantinya bisa mendapatkan

gambaran mengenai jam tangan yang dijual.

Dalam Website ini, terdapat dua pengguna yang dapat saling berkaitan satu

sama lain dalam lingkungan sistem yaitu: bagian admin dan user. Kedua peran

tersebut memiliki karakteristik dengan sistem yang berbeda-beda:

A. Analisa kebutuhan pengguna

Dalam sistem ini user dapat melakukan kegiatan sebagai berikut :

1. User dapat melihat-lihat produk yang ada di Website .

2. User dapat melakukan pendaftaran sebagai Member.

3. User dapat melihat detail produk.

4. User dapat Login dan membeli produk.

5. User Bisa merubah kuantitas atau menghapus item produk pada keranjang

belanja.

6. User dapat mengisi komentar di halaman komentar.

23

B. Admin

Dalam sistem ini Admin dibagi menjadi 2 level sebagai berikut :

1. Super Admin

a. Super admin dapat merubah data admin

b. Super admin dapat mengelola tampilan admin

2. Admin

a. Admin dapat menambah atau mengurangi produk yang di jual.

b. Admin dapat meng-upload dan menghapus komentar.

c. Admin dapat menambah atau mengurangi kategori.

d. Admin dapat melihat hasil transaksi.

e. Admin dapat melihat file konfirmasi.

f. Admin dapat melihat dan mencetak laporan penjualan

C. Sistem

1. Sisten dapat Memberikan layanan transaksi secara online.

2. Sistem dapat Memberikan keamanan dengan Login terlebih dahulu sebelum

mengakses menu Home.

3. Sistem dapat melakukan konfirmasi pembelian via e-mail yang dikirimkan

ke e-mail pembeli.

4. Sistem dapat melakukan konfirmasi jika belum menjadi Member tidak bisa

membeli produk yang di inginkan.

5. Sistem dapat mememeriksa pengimputan email saat pendaftaran apakan

sudah digunakan oleh user lain ataupun penulisan yang salah

.

24

3.2. Perancangan Prangkat Lunak

3.2.1. Rancangan Antar Muka

Rancangan antar muka Website merupakan penjelasan secara terperinci

yang harus dibuat untuk mendefinisikan bagian dari tampilan dalam mendesign

tampilan Web tersebut. Rancangan harus sesuai dengan struktur navigasi yang

telah dibuat, sehingga design menjadi terarah. Berikut ini merupakan tampilan

Web toko alat komputer sebagai berikut.

A. Halaman User

1. Rancangan Halaman Index (Home)

Index adalah halaman depan dari semua halaman yang ada pada

Website. Halaman ini juga dapat disebut sebagai halaman pembuka karena pada

saat pertama Website dibuka maka halaman inilah yang akan tampil sebelum

halaman yang lainnya. Pada halaman Index akan dirancang cukup kompleks

karena akan ada link untuk kesemua halaman. Rancangan tampilan sebagai

berikut:

Gambar III.1.

Rancangan Halaman Index (Home)

25

2. Rancangan Halaman Produk

Merupakan halaman yang menjelaskan tentang data produk yang terdapat

pada Website kami. Rancangan adalah sebagai berikut:

Header

produk

searchakun

Kontak KamiProfilinformasi

Keranjang

HOME

flooter facebook twitterinstagram

KATEGORI

Kategori 1

MEREK

Kategori

Kategori

Kategori

Merek 1

Merek 6

Merek 5

Merek 4

Merek 3

Merek 2

produk

produk

produkprodukprodukproduk

produkprodukproduk

produkprodukproduk

Show page halaman

12

Gambar III.2.

Rancangan Halaman Produk

26

3. Rancangan Halaman Informasi

Halaman cara pemesanan adalah halaman bagi pengunjung baru yang belum

tahu prosedur pembelian Website ini, Rancangan sebagai berikut:

Header

produk

searchakun


Keranjang

HOME

Footer facebook twitterinstagram

Cara pembelian

Gambar III.3.

Rancangan Halaman Informasi

27

4. Rancangan Halaman Cara Pembayaran

Halaman tentang kami berisi segala infomasi tentang tata cara pembayaran di

Website ini. Rancangan tampilan sebagai berikut:

Header

produk

searchakun


Keranjang

HOME

footer facebook twitterinstagram

Cara pembayaran

Gambar III.4.

Rancangan Halaman Cara Pembayaran

28

5. Rancangan Halaman Hubungi Kami

Halaman ini berisi segala informasi yang membuat Website ini pada

halaman ini beriskan alamat nomer telpon dan jejaring sosial Website ini

Rancangan sebagai berikut:

Header

produk

searchakun


Keranjang

HOME

footer facebook twitterinstagram

KONTAK KAMI

Anda bisa menghubingi kami pada

facebook

Twitter

instagram

Gambar III.5.

Rancangan Halaman Hubungi Kami

29

6. Rancangan Halaman Profil

Halaman ini berisi tentang Profil Pemilik Website toko jam tangan,

Rancangannya sebagai berikut:

Header

produk

searchakun


Keranjang

HOME


Profil

Gambar III.6.

Rancangan Halaman Profil

30

7. Rancangan Halaman Produk Detail

Halaman produk detail adalah halaman yang berisi segala informasi tentang

detail produk yang akan dibeli, dari rincian deskripsi barang hingga harga barang

semua ada di dalam halaman produk detail. Rancangan tampilan sebagai berikut :

Header

produk

searchakun


Keranjang

HOME


Produk

sliderslider slider

Nama produk

harga

Produk ini bergaransi

sosmed

sosmed

sosmed

sosmed

Masukan keranjang

Jumlah beli

Produk Terkait

ProdukDetail

deskripsi komentarinformasi

Gambar III.7.

Rancangan Halaman Produk Detail

31

8. Rancangan Halaman Keranjang Belanja

Halaman keranjang belanja berisi segala informasi tentang prosduk apa saja

yang telah di pilih oleh customer untuk di beli dan akan di proses. Rancangan

tampilan sebagai berikut:

Header

produk

searchakun


Keranjang

HOME


Produk

Nama produk

Keranjang ku

Jumlah beli

Lanjutkan belanja

Harga

berat

xxxx

xxxx

TOTAL BELANJA

Biaya kirim

disc

total

TOTAL BAYAR

Tolong bayar sebelum 3 hari

Kirim Pesanan

Ganti alamat

Gambar III.8.

Rancangan Halaman Keranjang Belanja

32

9. Rancangan Halaman Daftar Member

Untuk dapat memesan barang pada Website e-commerce ini, pembeli yang

belum terdaftar harus registasi terlebih dahulu melalui halaman registrasi. Data

pembeli yang tersimpan digunakan sebagai data untuk Login masuk halaman

Website dan sebagai informasi acuan bagi administrator tentang pemesanan

barang yang dilakukan pembeli. Rancangan tampilan sebagai berikut:

Header

produk

searchakun


Keranjang

HOME


DAFTAR MEMBER

Email

No telpon

Kode pos

Propinsi

Alamat

Password

Nama User

Nama Pelanggan xxxxxxxx

xxxxxxxx

xxxxxxxx

xxxxxxxx

xxxxxxxx

xxxxxxxx

xxxxxxxx

xxxxxxxx

Gambar III.9.

Rancangan Halaman Daftar Member

33

10. Rancangan Halaman Login

Pembeli yang sudah terdaftar harus Login terlebih dahulu untuk dapat

masuk ke halaman pemesanan produk. Rancangan tampilan sebagai berikut :

Header

produk

searchakun


Keranjang

HOME


ACCOUNT

Email

xxxxx

Password

xxxxxxx

Masuk

Gambar

Daftar Baru

Gambar III.10.

Rancangan Halaman Login

34

11. Rancangan Halaman Konfirmasi Bayar

Pembeli yang telah melakukan pemesanan pada Website ini harus melakukan

konfirmasi pembayaran maxsimal 3 hari setelah pemesanan produk di Website ini.

Rancangan tampilan sebagai berikut:

Gambar III.11.

Rancangan Halaman Konfirmasi Bayar

B. Halaman Admin

1. Rancangan Halaman

Merupakan halaman untuk admin yang ingin mengelola Data Produk yaitu

melakukan input data, edit dan hapus data pada

update. Rancangan tampilan sebagai berikut:

z

B. Halaman Admin

Rancangan Halaman Login Admin


melakukan input data, edit dan hapus data pada Website sehingga data bisa ter

update. Rancangan tampilan sebagai berikut:

Gamabar III.12.

Rancangan Halaman Login Admin

35


sehingga data bisa ter-


Merupakan halaman

Rancangan Halaman Home Admin

kan halaman awal pada halaman admin. Rancangan

Gambar III.13.

Rancangan Halaman Home Admin

36

sebagai berikut:

3. Rancangan Halaman Tambah Admin

Halaman tambah admin adalah halaman untuk menambahkan admin baru yang

dapat masuk ke dalam halaman admin.

Rancangan Halaman Tambah Admin


dapat masuk ke dalam halaman admin. Rancangan tampilan sebagai berikut

Gambar III.14.

Rancangan Halaman Tambah Admin

37



4. Rancanga Halaman Kategori Admin

Halaman tambah katagori adalah halaman yang berisi tentang informasi

menambahkan kategori pada produk agar produk tersusun pada kate

sudah ditentukan. Rancangan

R

Rancanga Halaman Kategori Admin


menambahkan kategori pada produk agar produk tersusun pada kate

ancangan tampilan sebagai berikut :

Gambar III.15.

Rancangan Halaman Kategori Admin

38


menambahkan kategori pada produk agar produk tersusun pada kategori yang

5. Rancangan Halaman Produk Admin

Halaman tambah produk adalah halaman yang berisi tentang informasi

admin. Pada halaman ini admin dapat menambah produk, mengedit produk dan

menghapus produk. Rancangan tampilan sebagai berikut :

Rancangan Halaman Produk Admin

Halaman tambah produk adalah halaman yang berisi tentang informasi


. Rancangan tampilan sebagai berikut :

Gambar III.16.

Rancangan Halaman Produk Admin

39

Halaman tambah produk adalah halaman yang berisi tentang informasi user



Halaman Member

mendaftar, agar admin tau data diri

Rancangan Halaman Member Admin

Member adalah halaman yang berisi tentang data

mendaftar, agar admin tau data diri Member. Rancangan tampilan sebagai berikut

Gambar III.17.

Rancangan Halaman Member Admin

40

adalah halaman yang berisi tentang data Member yang


7. Rancangan Halaman Komentar

Halaman testimoni

menghapus komentar

berikut:

R

Rancangan Halaman Komentar Admin

testimoni adalah halaman dimana admin dapat melihat dan

menghapus komentar Member tentang Website-nya. Rancangan tampilan sebagai

Gambar III.18.

Rancangan Halaman Komentar Admin

41

adalah halaman dimana admin dapat melihat dan

nya. Rancangan tampilan sebagai


Halaman data kota

menambahkan, dan mengedit

nya. Rancangan tampilan sebagai berikut:

R

Rancangan Halaman Data Kota Admin

data kota adalah halaman dimana admin dapat melihat

menambahkan, dan mengedit data kota untuk sistem pengiriman barang

nya. Rancangan tampilan sebagai berikut:

Gambar III.19.

Rancangan Halaman Data Kota Admin

42

adalah halaman dimana admin dapat melihat,

data kota untuk sistem pengiriman barang Website-

9. Rancangan Halaman Laporan

Halaman laporan adalah halaman yang berisi tentang laporan produk, laporan

Member baru, dan laporan penjualan. Berikut adalah rancangannya:

Rancangan Halaman Laporan


baru, dan laporan penjualan. Berikut adalah rancangannya:

Gambar III.20.

Rancangan Halaman Laporan

43


44

3.2.2. Rancangan Basis Data

Basis data bertujuan untuk menentukan rancangan Website ecommerce.

Perancangan sistem dimulai dengan perancangan Entity Relationship Diagram

(ERD), Logical Relational Structure(LRS), Spesifikasi File. Perancangan dan

desain Website dimulai dengan perancangan detail dari halaman yang akan

ditampilkan dalam Website.

1. Entity Relationship Diagram (ERD)

Gambar III.20

Entitiy Relationship Diagram

45

2. Logical Relational Structure(LRS)

Gambar III.21

Logical Relational Structure

46

3. Spesifikasi File

Dalam program ini menggunakan satu buah file database dengan nama took

jam. sql, didalam database tersebut terdapat beberapa tabel, yaitu :

1. Nama File : File admin

Akronim : admin.MYD

Fungsi : Sebagai tempat penyimpanan data admin

Tipe : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Hardisk

Panjang Record : 69 karakter

Kunci Field : id_admin

Software : MySQL

Table III.1.

Spesifikasi File admin

No Elemen Data Akronim Tipe Size Keterangan

1. Id admin id_admin Integer 11 Primary Key

2. Nama admin nama_admin Varchar 30

3. Username user_admin Varchar 20

4. Password password_admin Varchar 8

47

2. Nama File : File kategori

Akronim : kategori.MYD

Fungsi : Sebagai tempat penyimpanan data kategori

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : id_kategori

Software : MySQL

Table III.2. Spesifikasi File kategori


1. id_kategori id_kategori Integer 11 Primary Key

2. nama_kategori nama_kategori Varchar 50

3. Gambar Gambar Text

48

3. Nama File : File keranjang

Akronim : keranjang.MYD

Fungsi : Sebagai tempat penyimpanan data keranjang

Tipe : File Transaksi


Akses File : Random

Media : Hardisk


Kunci Field : idkeranjang

Software : MySQL

Table III.3. Spesifikasi File keranjang


1. Idkeranjang Id_keranjang Charakrer 11 Primary Key

2. Id_Member Id_Member Varchar 11 Foreign Key

3. Id_produk Id_produk Varchar 10 Foreign Key

4. nama_produk nama_produk Varchar 50

5. Harga Harga Double 0

6. Jumbel Jumbel Integer 11

7. Subtotal Subtotal Double

49

4. Nama File : File produk

Akronim : produk.MYD

Fungsi : Sebagai tempat penyimpanan data produk

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : id_produk

Software : MySQL

Table III.4. Spesifikasi File produk


1. id_produk id_produk Char 11 Primary Key

2. id_kategori id_kategori Varchar 3 Foreign Key

3. nama_produk nama_produk Varchar 50

4. detail_produk detail_produk Text

5. Harga Harga Integer 11

6. Stok Stok Interger 3

7. Gambar Gambar Text

50

5. Nama File : File Member

Akronim : Member.MYD

Fungsi : Sebagai tempat penyimpanan data Member

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : id_Member

Software : MySQL

Table III.5. Spesifikasi File Member


1. id_Member id_Member Integer

Auto_increment

2. nama_Member nama_Member Varchar

3. Username Username Varchar 10

4. Password Password Text 8 Text

5. Email Email Varchar 20

6. Alamat Alamat Text

7. Kota Kota Varchar 30

8. kode_pos kode_pos Varchar 10

9. no_telpon no_telpon Varchar 14

51

6. Nama File : File kota

Akronim : kota.MYD

Fungsi : Sebagai tempat penyimpanan data kota pengiriman

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : id_kota

Software : MySQL

Table III.6. Spesifikasi File kota


1 id_kota id_kota Integer 5 Primary Key

2 nama_kota nama_kota Varchar 30

3 ongkos_kirim ongkos_kirim Integer 6

52

7. Nama File : File pesanan

Akronim : pesanan.MYD

Fungsi : Sebagai tempat penyimpanan data pesan

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : idpesan

Software : MySQL

Table III.7. Spesifikasi File pesanan


1. Idpesan Idpesan Varchar 15 Primary Key

2. id_Member id_Member Integer 5 Foreign Key

3. Jumbar Jumbar Integer 11

4. Total Total Double

5. Tglpesan Tglpesan Varchar 30

6. id_kota id_kota Integer 5 Foregn key

7. Statuspesan Statuspesan Varchar 15

8 Tgl_kirim Tgl_kirim Date

53

8. Nama File : File detail_pesanan

Akronim : detail_pesanan.MYD

Fungsi : Sebagai tempat penyimpanan data detail pesan

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : -

Software : MySQL

Table III.8. Spesifikasi File detail pesanan


1. Idpesan Idpesan Varchar 15 Foreign Key

2. id_produk id_ produk Varchar 10 Foreign Key

3. Nama_produk Nama_produk Varchar 50

4. Harga Harga Integer 11

5. Jumble Jumbel Integer 11

6. Subtotal Subtotal Double

54

9. Nama File : File konfirmasi

Akronim : konfirmasi.MYD

Fungsi : Sebagai tempat penyimpanan data konfirmasi

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : -

Software : MySQL

Table III.9. Spesifikasi File konfirmasi

No. Elemen Data Akronim Type Panjang Keterangan

1. id_pesan id_pesan Varchar 10 Primary key

2. nama_pemesan nama_pemesan Varchar 50

3. pemilik_rekening pemilik_rekening Varchar 30

4. Bank Bank Varchar 30

5. jumlah_bayar jumlah_bayar Integer 11

6. tanggal_transfer tanggal_transfer Date

7. bukti_transfer bukti_transfer Text

55

10. Nama File : File komentar

Akronim : komentar

Fungsi : Sebagai tempat penyimpanan data komentar

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : id_komentar

Software : MySQL

Table III.10. Spesifikasi File komentar


1. id_komentar id_komentar Interger 11 Primary Key

2. Id produk Id_produk Interger 11 Foreign Key

3. Tglkomentar Tglkomentar Date 50

4. Nmpengirim Nmpengirim varchar 50

5. Emailpengirim Emailpengirim varchar 50

6 Pesan Pesan Text

7 Status Status varchar 15

56

11. Nama File : File hakakses

Akronim : hakakses

Fungsi : Sebagai pembeda akses antara admin dan super

admin

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : level

Software : MySQL

Table III.11. Spesifikasi File hakakses


1. Level Level varchar 25 Primary Key

2. Data admin data_admin Bolean

3. Data kategori data_kategori Bolean

4. Data produk data_produk Bolean

5. Data Member data_Member Bolean

6 Komentar Komentar Bolean

7 Data_kota data_kota Bolean

57

12. Nama File : File alamat_kirim

Akronim : alamat_kirim.MYD

Fungsi : Sebagai penyimpan data alamat kirim

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field : id_pesan

Software : MySQL

Table III.12. Spesifikasi File alamat_kirim


1. Id_pesan id_pesan Int 11 Primary Key

2. Nama_penerima nama_penerima varchar 50

3. Alamat Alamat Text

4. Kota Kota varchar 30

5. Kode_pos node_pos varchar 10

6 No_telpon no_telpon varchar 20

58

13. Nama File : File merk

Akronim : merk

Fungsi : Sebagai tempat penyimpanan data merk

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field :kd_ merk

Software : MySQL

Table III.13. Spesifikasi File merk


1. kd_merk kd_merk varchar 3 Primary Key

2. nm_merk nm_merk Interger 11

59

14. Nama File : File produk promo

Akronim : produk_promo

Fungsi : Sebagai tempat penyimpanan data produk promo

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field :id_hubung

Software : MySQL

Table III.14. Spesifikasi File produk promo


1. Id_hubung id_hubung Interger 11 Primary Key

2. Id_promo id_promo Interger 6 Foreign Key

3 Id_produk id_produk Interger 11

60

15. Nama File : File promo

Akronim : promo

Fungsi : Sebagai tempat penyimpanan data testimoni

Tipe : File Master


Akses File : Random

Media : Hardisk


Kunci Field :id_promo

Software : MySQL

Table III.15. Spesifikasi File promo


1. Id_promo id_promo Interger 6 Primary Key

2. nama_promo nama_promo varchar 75

3 Gambar Gambar Text

4 Deskripsi Deskripsi Text

5 Tgl_mulai Tgl_mulai Date

6 Tgl_keluar Tgl_keluar Date

7 Disc Disc intterger 2

61

3.2.3. Rancangan struktur navigasi

Struktur navigasi digunakan untuk menggambarkan hubungan antara satu

halaman Web dengan halaman Web lain. Struktur navigasi yang digunakan dalam

Website ini adalah struktur navigasi non linier, jadi tiap-tiap tampilan mempunyai

kedudukan yang sama tidak ada master page dan slave page. Melalui struktur

navigasi Website ini, terlihat bagaimana isi dan susunan dari sebuah Website toko

alat musik gitar listrik dan akustik online ini, terlihat bagaimana isi dan susunan

dari sebuah Website secara menyeluruh. Pembuatan struktur navigasi ini akan

sangat membantu nantinya ketika akan membuat rancangan seluruh halaman Web.

1. Struktur Navigasi User

Gambar III.22.

Struktur Navigasi User

62

2. Struktur Navigasi Member

Gambar III.23.

Struktur Navigasi Member

63

3. Struktur Navigas Admin

Gambar III.24.

Struktur Navigasi Admin

Home

Produk

Admin Komentar Transaksi Member Berita Laporan

Index

Tambah

kategori Logout

Ubah

hapus

Tambah Ubah hapus

Tambah Ubah

hapus

hapus hapus hapus

hapus Ubah Tambah

64

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

1. Implementasi Rancangan Antar Muka Halaman Admin

Implementasi Rancangan Antar Muka halaman admin pada Website toko alat gitar

listrik dan akustik online berdasarkan hasil rancangan antar muka sebagai berikut :

a. Halaman Login Admin

Administrator harus melakukan Login terlebih dahulu untuk dapat

menggunakan modul-modul yang tersedia Jika Login berhasil, maka menu-menu

yang sesuai dengan kategori user tersebut akan ditampilkan

Gambar III.25.

Login Admin

65

b. Halaman Home Admin

Administrator yang sudah dapat Login lalu masuk ke dalam halaman Home

admin. Dalam halaman ini tersedia panel-panel admin. Berikut tampilannya:

Gambar III.26

Home Admin

c. Halaman Tambah Admin


dapat masuk ke dalam halaman admin. Berikut adalah tampilannya:

alaman Tambah Admin


halaman admin. Berikut adalah tampilannya:

Gambar III.27.

Tambah Admin

66


67

Gambar III.28.

Produk Admin

d. Halaman Produk Admin

Admin dapat meng-input data barang/produk yang akan di jual pada Website

melalui halaman produk.

68

e. Halaman Menu Kategori Admin

Pada halman ini admin dapat menambahkan kategori pada produk agar produk

tersusun pada kateori yang sudah ditentukan. Berikut adalah tampilannya:

Gambar III.29.

Halaman Menu Kategori Admin

69

f. Halaman Transaksi

Pada halaman ini admin dapat melihat transaksi yang terjadi pada stiap harinya.

Berikut adalah tampilannya:

Gambar III.30.

Halaman Transaksi Admin

70

g. Halaman Member Admin

Member yang talah mendaftar semua datanya dapat terlihat di panel Member,

bertujuan agar admin dapat mengetahui data diri Member yang membeli. Berikut adalah

tampilannya:

Gambar III.31.

Halaman Member Admin

71

h. Halaman komentar

Pada menu komentar, admin dapat mengelola data komentar terbaru. Berikut

adalah tampilannya :

Gambar III.32.

komentar Admin

72

i. Halaman Laporan Admin

Halaman laporan adalah adalah halaman yang berisi tentang laporan produk,

laporan Member baru, dan laporan penjualan yang berbentuk pdf yang dapat di

download . Berikut adalah tampilannya:

Gambar III.34

Halaman Laporan Admin

2. Implementasi Rancangan Antar Muka Halaman

Implementasi Rancangan Antar Muka halaman

music gitar listrik dan akustik

berikut :

a. Halaman Index (Home

Index adalah ha

Halaman ini juga dapat d

Website dibuka maka ha

Pada halaman Index

kesemua halaman. Berikut adalah tampilannya:

Implementasi Rancangan Antar Muka Halaman Member

Implementasi Rancangan Antar Muka halaman Member pada Website

music gitar listrik dan akustik online berdasarkan hasil rancangan antar muka sebagai

Home)

halaman depan dari semua halaman yang ada pada

dapat disebut sebagai halaman pembuka karena pada

halaman inilah yang akan tampil sebelum halam

akan dirancang cukup kompleks karena akan ada

Berikut adalah tampilannya:

Gambar III.35

Halaman Index (Home)

73

Website toko alat

berdasarkan hasil rancangan antar muka sebagai

ada pada Website.

pada saat pertama

man yang lainnya.

karena akan ada link untuk

74

b. Halaman Produk

Pada halaman ini pembeli dapat meliat produk-produk yang akan di tampilkan,

kemudian setelah mendapat produk yang sesuai keinginan dapat melakukan pemesanan

produk, berikut tampilannya:

Gambar III.36

Halaman Produk

c. Halaman Cara Order

Halaman cara pemesanan adalah halaman bagi pengunjung baru yang belum tahu

prosedur pembelian Website

awal smpai proses akhir hingga barang diterima oleh

sebagai berikut:

Order


Website ini, di sini akan di jelaskan secara detail bagai mana lngkah

akhir hingga barang diterima oleh customer. Tampilannya

Gambar III.37

Halaman Cara Pemesanan

75


ini, di sini akan di jelaskan secara detail bagai mana lngkah

. Tampilannya adalah

d. Halaman Tentang Kami

Halaman tentang kami berisi segala infomasi tentang

terdapat informasi tentang kami, berikut adalah tampilannya:

Halaman Tentang Kami

Halaman tentang kami berisi segala infomasi tentang Website ini. Pada halam ini

terdapat informasi tentang kami, berikut adalah tampilannya:

Gambar III.38

Halaman Tentang Kami

76

ini. Pada halam ini

e. Halaman Kontak

Halaman ini berisi segala informasi yang membuat

beriskan alamat no telpon dan jejaringsosial

berikut:

Halaman Kontak

Halaman ini berisi segala informasi yang membuat Website ini pada halaman ini

beriskan alamat no telpon dan jejaringsosial Website ini. tampilannya

Gambar III.39

Halaman Kontak

77

ini pada halaman ini

tampilannya adalah sebagai

f. Halaman Daftar Member

Untuk dapat memesan barang pada


pembeli yang tersimpan digunakan sebagai data untuk

Website dan sebagai informasi acuan bagi administrator tentang pe

dilakukan pembeli. Berikut adalah rancangannya

Member

Untuk dapat memesan barang pada Website e-commerce ini, pembeli yang


pembeli yang tersimpan digunakan sebagai data untuk Login

dan sebagai informasi acuan bagi administrator tentang pemesanan barang yang

dilakukan pembeli. Berikut adalah rancangannya

Gambar III.40

Daftar Member

78

ini, pembeli yang


masuk halaman

mesanan barang yang

g. Halaman Login Member

Member yang sudah mendaftar lalu masuk ke

meneruskan pembelian. Berikut adalah tampilannya :

Member

yang sudah mendaftar lalu masuk ke Login Member

meneruskan pembelian. Berikut adalah tampilannya :

Gambar III.41

Halaman Login Member

79

Member agar dapat

h. Halaman keranjang

Member yang sudah mendaftar lalu dapat mengklik tombol beli dan masuk ke

dalam halaman okeranjang

barang yang akan dibeli. Berikut

keranjang

yang sudah mendaftar lalu dapat mengklik tombol beli dan masuk ke

keranjang, didalamnya dapat menghapus dan menambahkan jumlah

barang yang akan dibeli. Berikut adalah tampilannya :

Gambar III.42

Halaman keranjang

80

yang sudah mendaftar lalu dapat mengklik tombol beli dan masuk ke

, didalamnya dapat menghapus dan menambahkan jumlah

i. Halaman konfirmasi pembayaran

Member yang sudah memilih produk yang akan di beli lalu mengklik tombol chack

out dan muncul halaman confirmasi pembayaran. Yaitu halaman semua tentang cara

pembayaran. Berikut adalah tampilannya :

Halaman konfirmasi pembayaran

yang sudah memilih produk yang akan di beli lalu mengklik tombol chack


pembayaran. Berikut adalah tampilannya :

Gambar III.43

Halaman Konfirmasi Pembayaran

81

yang sudah memilih produk yang akan di beli lalu mengklik tombol chack


82

4. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi prangkat keras dan perangkat lunak minimum yang

dibutuhkan untuk mengimplementasikan aplikasi Website toko alat musik gitar listrik dan

akustik online.

1. Spesifikasi Prangkat Keras

Yang dimaksud dengan perangkat keras disini adalah seperangkat alat yang

membantu sistem yang diusulkan dengan alat bantu lain. Yang terdiri dari unit masukan

(input), unit pemerosesan (process), unit untuk keluaran (output), dan untuk simpanan

luar (memory). Pemilihan suatu komputer antara lain ditentukan oleh kapasitas komputer

dan unit pengolahan datanya (CPU), unit pemasukkan datanya yaitu keyboard dan media

penyimpanan datanya berupa harddisk atau disk drive. Penulis menerangkan juga bahwa

perangkat keras yang digunakan pada sistem berjalan saat ini adalah sebagai berikut :

a. CPU

1) Processor Intel® Core™ i3-4005U CPU@ 1.70GHz 1.70GHz

2) RAM DDR3 2 GB

3) Hard Disc 500 GB

4) VGA AMD Radeon HD 6250 Graphics

b. Mouse optical usb

c. Keyboard 108 keys usb

d. Monitor lcd dengan resolusi layar minimum 1024x768

e. Printer Inkjet

f. Koneksi internet dengan kecepatan 2 Mbps.

2. Spesifikasi Prangkat Lunak

Perangkat lunak atau yang disebut sofware adalah seluruh fase dari system

pengolahan data yang diluar dari peralatan komputernya sendiri. fasilitas sofware itu

sendiri terdiri dari sistem design, program data prosedur-prosedur lainnya. Disini penulis

83

menerangkan bahwa sistem komputer perangkat lunak yang digunakan saat ini sebagai

berikut:

a. Sistem Operasi : Microsoft windows 7 ultimate

b. Program Design : Adobe Dreamweaver CS5

c. Bahasa script : PHP

d. Web Server : Apache

e. Browser : Mozilla Firefox dan Google Chrome

f. Database : MySQL

3.3.2. Pengujian Unit

Pengujian terhadap program yang dibuat menggunakan blackbox testing

yang fokus terhadap proses masukan dan keluaran program.

1. Pengujian Terhadap Form Daftar pelanggan

No Skenario pengujian

Test Case Hal yang diharapkan Hasil Pengujia

n

Kesimpulan

1 Data diisi semua dan klik tombol simpan

Nama pelanggan: (dadang) Nama user : (dadang) Password: (123456) Alamat: (Ngawi) Propinsi : (Jawa timur) Kode pos : (63271) No.Telp / Hp: (085775550504)

Sistem akan menerima dan menampilkan pesan (Pendaftaran berhasil,silakan login)

Sesuai harapan

valid

Tabel III.16. Hasil Pengujian Black Box Testing Halaman Daftar pelanggan

84

Email : ([email protected])

2 Nama pelanggan tidak diisi kemudian klik simpan

Nama pelanggan: (kosong)

Sistem akan menolak dan menampilkan pesan (maaf data belum lengkap)

Sesuai harapan

valid

3 Mengisikan nama pelanggan yang sudah dipakai kemudian klik simpan

Nama pelanggan : (dadang)

Sistem akan menolak dan menampilkan pesan (maaf, user sudah dipakai)

Sesuai harapan

valid

4 Nama user tidak diisi kemudian klik simpan

Nama user : (kosong)


Sesuai harapan

valid

5 Mengisikan nama user yang sudah dipakai kemudian klik simpan

Nama user: (dadang)

Sistem akan menolak dan menampilkan pesan (maaf, user sudah dipakai)

Sesuai harapan

valid

6 Password tidak diisi kemudian klik simpan

Password : (kosong)


Sesuai harapan

Valid

7 Alamat tidak diisi kemudian klik simpan

Alamat : (kosong)


Sesuai harapan

Valid

8 Propinsi tidak diisi kemudian klik simpan

Propinsi : (kosong)


Sesuai harapan

Valid

9 Kode pos tidak diisikemudian klik simpan

Kode pos : (kosong)


Sesuai harapan

Valid

10 No telp / Hp tidak diisi kemudian klik simpan

No telp / Hp : (kosong)

Sistem akan menolak dan menampilkan pesan (maaf data belum

Sesuai harapan

Valid

85

lengkap) 11 Email tidak diisi

dan kemudian klik simpan

Email : (kosong)


Sesuai harapan

Valid

12 Mengisikan Email tanpa tanda titik (.) atau tanda (@) kemudian klik simpan

Email : (dadang)

Sistem akan menolak dan menampilkan pesan (mohon masukkan (@) dan (.) di alamat email ‘dadang’)

Sesuai harapan

Valid

2. Pengujian Terhadap Form Login Pelanggan

Tabel.III.17

Hasil Pengujian Black Box Halaman Login Pelanggan

No

Skenario pengujian Test Case Hasil yang diharapkan

Hasil pengujian

Kesimpulan

1 Email dan password diisi kemudian klik login

Email :( [email protected]) Password: (123456)

Sistem akan menerima dan menampilkan pesan (Selamat datang!)

Sesuai harapan

Valid

2 Email tidak diisi dan password diisi kemudian klik login

Email : (kosong) Password : (123456)

Sistem akan menolak dan menampilkan pesan (email belum diisi )

Sesuai harapan

Valid

3 Email diisi dan password tidak diisi kemudian klik login

Email : ([email protected]) Password : (kosong)

Sistem akan menolak dan menampilkan pesan (pass belum diisi )

Sesuai harapan

Valid

4 Mengetikan salah satu kondisi salah pada email atau password kemudian klik login

Email : [email protected] (benar) Password : 1234 (salah)

Sistem akan menolak dan menampilkan pesan (email atau password salah)

Sesuai harapan

Valid

5 Email dan password tidak diisi kemudian klik login

Email : (kosong) Password : (kosong)

Sistem akan menolak dan menmpilkan pesan (email belum diisi)

Sesuai harapan

Valid

mailto:[email protected]






86

3. Pengujian Terhadap Form Pemesanan Barang

Tabel.III.18 Hasil Pengujian Black Box Halaman Pemesanan Barang

4. Pengujian Terhadap Form Login Admin

Tabel.III.19 Hasil Pengujian Black Box Testing Login Admin

No Skenario Pengujian Test Case Hal yang diharapkan

Hasil Pengujian

Kesimpulan

1 Username diisi password tidak diisi kemudian klik Login

Username: (admin) Password: (kosong)

Sistem akan menolak dan akan memberikam pesan (password harus diisi)

Sesuai harapan

Valid

2 Username diisi dan password salah lalu klik Login

Username: (admin) Password: (abcd)

Sistem akan menolak dan akan memberikam pesan (Username atau password salah)

Sesuai harapan

Valid

No Skenario pengujian Test case Hasil yang di harapkan

Hasil pengujian

kesimpulan

1 Pengunjung belum belum Login klik tombol masuk untuk beli

Pengunjung : (blm Login) Klik : masuk untuk beli

Sistem akan menolak dan akan di alihkan ke halaman Login

Sesuai harapan

valid

2 Pengunjung sudah Login lalu klik masukan ke keranjang

Pengunjung : (sdh Login), klik : masukan ke keranjang

Sistem akan menerima dan menampilkan pesan item telah dipilih dan kembali kehalaman produk

Sesuai harapan

valid

3 Pengunjung belum Login dan klik tombol detail

Pengunjung : (blm Login) Klik : tombol detail

Sistem akan menerima dan menampilkan halman produk detail

Sesuai harapan

valid

4 Pengunjung sudah Login dan klik tombol detail

Pengunjung : (sudah Login) Klik : tombol detail

Sistem akan menerima dan menampilkan halman produk detail

Sesuai harapan

valid

87

3 Username dan password tidak diisi kemudian klik Login

Username: (kosong) Password: (kosong)

Sistem akan menolak dan akan memberikam pesan (Username atau password salah)

Sesuai harapan

Valid

4 Username diisi benar dan password diisi benar lalu klik Login

Username: (Admin) Password: (abcde)

Sistem akan menerima dan masuk ke halaman admin

Sesuai harapan

Valid

5. Pengujian Terhadap Input Data Produk

Tabel III.21

Hasil Pengujian Blackbox Testing Tambah Produk

No Skenario Pengujian Test Case Hal yang diharapkan

Hasil Pengujia

n

Kesimpulan


Kategori: (pria) Merk: (Casio) Promo: (promo baru) Nama produk: (8437SRGLH240x300) Detail : (ukuran 3.6 x 5.5 x 4.5 x 1 (cm) bahan tali rantai,bentuk case bulat/oval.warna case silver.) Berat : (300 gr) Stok : (50) Harga : (750000) Gambar : (8437SRGLH240x300)

Sistem akan menerima dan menampilkan pesan (Data berhasil disimpan)

Sesuai harapan

valid

2 Kategori tidak diisi kemudian klik tombol simpan

Kategori: (kosong)

Sistem akan menolak dan menampilkan pesan (Data belum lengkap)

Sesuai harapan

valid

88

3 Merk tidak diisi kemudian klik tombol simpan

Merk: (kosong) Sistem akan menolak dan menampilkan pesan (Data belum lengkap)

Sesuai harapan

valid

4 Nama produk tidak diisi kemudian klik tombol simpan

Nama produk : (kosong)


Sesuai harapan

valid

5 Detail tidak diisi kemudian klik simpan

Detail : (kosong) Sistem akan menolak dan menampilkan pesan (Data belum lengkap)

Sesuai harapan

valid

6 Berat tidak diisi kemudian klik simpan

Berat : (kosong) Sistem akan menolak dan menampilkan pesan (Data belum lengkap)

Sesuai harapan

valid

7 Stok tidak diisi kemudian klik simpan

Stok : (kosong) Sistem akan menolak dan menampilkan pesan (Data belum lengkap)

Sesuai harapan

valid

8 Harga tidak diisi kemudian klik simpan

Harga : (kosong) Sistem akan menolak dan menampilkan pesan (Data belum lengkap)

Sesuai harapan

valid

9 Gambar tidak diisi kemudian klik simpan

Gambar: (kosong)


Sesuai harapan

valid

7. Pengujian Terhadap Input Kategori

Tabel III.20. Hasil Pengujian Black Box Testing Input Kategori

No Skenario pengujian Test Case Hal yang diharapkan

Hasil pengujian

Kesimpulan


Nama Kategori: Pria / Wanita (benar) Gambar : (8437SRGLH240x300)

Sistem akan menerima dan menampilkan pesan: (Data berhasil di simpan)

Sesuai Harapan

valid

89

2 Nama Kategori tidak diisi kemudian klik simpan

Nama Kategori: (Kosong)

Sistem akan menolak dan akan menampilkan pesan: (Data belum lengkap)

Sesuai harapan

valid

3 Gambar tidak diisi kemudian klik simpan

Gambar: (kosong)

Sistem akan menolak dan akan menampilkan pesan: (Data belum lengkap)

Sesuai harapan

valid

Documents

BAB III PEMBAHASAN...Header produk akun search informasi Profil Kontak Kami Keranjang HOME flooter facebook instagram twitter KATEGORI Kategori 1 MEREK Kategori Kategori Kategori Merek