repository.bsi.ac.id · web viewbab iii pembahasan analisis kebutuhan hal pertama yang perlu...

BAB III

PEMBAHASAN

3.1. Analisis Kebutuhan

Hal pertama yang perlu dilakukan dalam analisis kebutuhan ini adalah

menentukan dan mengungkapkan kebutuhan dalam perancangan yaitu :

Halaman Pengunjung:

A1. Index Pengunjung

Pengunjung dapat melihat tampilan website

A2. Produk

Pengunjung dapat melihat semua produk

A3. Kategori

Pengunjung dapat melihat semua kategori produk

A4. Syarat&Ketentuan

Pengunjung dapat dan harus mengikuti aturan website

A5. Cara Pembelian

Cara pembelian di kacamata online

A6. Tentang Kami

Pengunjung dapat melihat informasi website

A7. Cari Produk

Pengunjung dapat mencari produk yang diinginksn

A8. Daftar Member

Pengunjung dapat melakukann registrasi pelanggan

25

26

Halaman Member:

B1. Profil member

Pelanggan dapat melihat profil, data pemesanan, dan detail pembayaran.

B2. Keranjang Belanja

Pelanggan dapat melakukan pembelian lagi, atau langsung memproses.

B3. Cetak Bukti Pemesanan

Pelanggan bisa melihat pemesanan beserta total harga bayar.

B4. Konfirmasi Pembayaran

Pelanggan menkonfirmasi telah melakukan pembayaran.

Halaman Administrator :

C1. Index Admin

Admin melakukan Login

C2. Halaman Home Admin

Admin Mengelola halaman admin

C3. Data Produk

Admin dapat memanipulasi data produk menambah, mengedit, menghapus

C4. Data Kategori

Admin dapat memanipulasi data kategori menambah, mengedit, menghapus

C5. Halaman

Admin dapat memanipulasi halaman

C6. Data Order

Admin memproses order dari pelanggan

27

C7. Laporan Penjualan

Admin dapat memeriksa laporan harian penjualan

C8. UserAdmin

Admin dapat menambahkan user untuk admin

C9. Buku Tamu

Admin dapat menghapus komentar pelanggan.

3.2. Perancangan Perangkat Lunak

3.2.1. Rancangan Antar Muka Pengunjung

A1. Index Pengunjung

Gambar III.1.

Rancangan Antar Muka Index Pengunjung

A2. Produk

28

Gambar III.2.

Rancangan Antar Muka Produk

A3. Kategori

Gambar III.3.

Rancangan Antar Muka Kategori Produk

A4. Syarat&Ketentuan

29

Gambar III.4.

Rancangan Antar Muka Syarat&Ketentuan

A5. Cara Pembelian

Gambar III.5.

Rancangan Antar Muka Cara Pembelian

A6. Tentang Kami

30

Gambar III.6.

Rancangan Antar Muka Tentang Kami

A7. Cari Produk

Gambar III.7.

Rancangan Antar Muka Cari Produk

A8. Daftar Member

31

Gambar III.8.

Rancangan Antar Muka Daftar Member

2. Perancangan Antar Muka Member

B1. Profil member

Gambar III.9.

Rancangan Antar Muka Profil Member

B2. Keranjang Belanja

32

Gambar III.10.

Rancangan Antar Muka Keranjang Belanja

B3. Cetak Bukti Pemesanan

Gambar III.11.

Rancangan Antar Muka Cetak Bukti Pemesanan

B4. Konfirmasi Pembayaran

33

Gambar III.12.

Rancangan Antar Muka Konfirmasi Pembayaran

3. Rancangan Antar Muka Admin

C1. Index Admin

34

Gambar III.13.

Rancangan Antar Muka Login Admin

C2. Halaman Home Admin

Gambar III.14.

Rancangan Antar Muka Home Admin

C3. Data Produk

35

Gambar III.15.

Rancangan Antar Muka Produk

C4. Data Kategori

Gambar III.16.

Rancangan Antar Muka Data Kategori

C5. Data Order Masuk

36

Gambar III.17.

Rancangan Antar Muka Data Order

C6. Buku Tamu

Gambar III.18.

Rancangan Antar Muka Buku Tamu

C7. Halaman

37

Gambar III.19.

Rancangan Antar Muka Halaman

C8. Ongkos Kirim

Gambar III.20.

Rancangan Antar Muka Data Ongkos Kirim

C9. User Admin

38

Gambar III.21.

Rancangan Antar Muka User Admin

C10. Laporan

Gambar III.22.

Rancangan Antar Muka Laporan

3.2.2. Rancangan Basis Data

39

A. Entity Relationship Diagram (ERD)

Gambar III.23.

Entity Relationship Diagram (ERD)

B. Logical Relational Structure (LRS)

40

Gambar III.24.

Logical Relational Structure (LRS)

C. Spesifikasi File

41

1. Spesifikasi File admin

Nama File : Tabel Admin

Akronim : admin.myd

Fungsi : Untuk menyimpan data admin

Tipe File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang record : 73

Kunci Field : id_user

Software : Mysql

Tabel III.1N

o

Elemen Data Nama Filed Tipe Size Extra Ket

1. Id user id_user Int 3 auto_increment Primary Key

2. Username Username Varchar 25

3. Password Password Varchar 50 MD5

Spesifikasi File admin

2. Spesifikasi File bukutamu

Nama File : Tabel bukutamu

Akronim : bukutamu.myd

Fuhjngsi : menyimpan data buku tamu



42

Akses File : Random

Media : Harddisk

Panjang record : 85

Kunci Field : id

Software : Mysql

Tabel III.2Spesifikasi File bukutamu

No Elemen Data Nama Filed Tipe Size Extra Ket

1. Id tamu Id_tamu Int 3 auto_increment Primary Key

2. Nama tamu Nama_tamu Varchar 225

3. Email tamu Email_tamu Varchar 225

4. Isi tamu Isi_tamu Longtext -

5. Tanggal Tanggal Varchar 100

3. Spesifikasi File halaman

Nama File : Tabel halaman

Akronim : halaman.myd

Fungsi : menyimpan data halama seperti cara beli, tentang kami dan

cara pembayaran



Akses File : Random

Media : Harddisk

Panjang record : 35

Kunci Field : id_halaman

43

Software : Mysql

Tabel III.3Spesifikasi File halaman


1. Id halaman id_halaman Int 3 auto_increment Primary Key

2. Halaman judul halaman_judul Varchar 20

3. Halaman isi halaman_isi Longtext -

4. Halaman tanggal halaman_tanggal Varchar 25

4. Spesifikasi File ketegori

Nama File : Tabel Kategori

Akronim : kategori.myd

Fungsi : menyimpan data kategori produk



Akses File : Random

Media : Harddisk

Panjang record : 18

Kunci Field : id_kategori

Software : Mysql

Tabel III.4Spesifikasi File kategori

44


1. Id kategori id_kategori Int 3 auto_increment Primary Key

2. Nama Kategori nama_kategori Varchar 25

5. Spesifikasi File konfirmasi pembayaran

Nama File : Tabel konfirmasi

Akronim : konfirmasi.myd

Fungsi : untuk menyimpan data konfirmasi pembayaran



Akses File : Random

Media : Harddisk

Panjang record : 218

Kunci Field : id_konfirmasi

Software : Mysql

Tabel III.5Spesifikasi File bayar


1. Id bayar Id_bayar Int 11 auto_increment Primary Key

2. Nama nama Varchar 100

3. Email email Varchar 50

4. No pesan no_pesan Varchar 7

5. Tanggal tanggal Date -

6. Jumlah jumlah Int 12

7. Bank terima bank_terima Varchar 100

8. Bank kirim bank_kirim Varchar 100

45

9. Type type Varchar 50

10. Akun bank akun_bank Varchar 50

11. No rekening no_rekening Varchar 50

6. Spesifikasi File Member

Nama File : Tabel Member

Akronim : member.myd

Fungsi : Menyimpan data pelanngan



Akses File : Random

Media : Harddisk


Kunci Field : id_member

Software : Mysql

Tabel III.6Spesifikasi File member


1. Id member id_member Int 3 auto_increment Primary Key


3. Email email Varchar 30

4. Password password Varchar 50

5. Alamat alamat Varchar 50

6. Telpon telpon Varchar 12

7. Spesifikasi File orders

46

Nama File : Tabel orders

Akronim : orders.myd

Fungsi : menyimpan data pesanan pelanggan



Akses File : Random

Media : Harddisk


Kunci Field : id_orders

Software : Mysql

Tabel III.7Spesifikasi File orders


1. Id orders id_orders Int 3 auto_increment Primary Key

2. No order no_order Varchar 7

3. Nama

customer

nama_kustomer Varchar 25

4. Alamat Alamat Text -

5. Telpon Telpon Varchar 20

6. Email Email Varchar 50

7. status_order status_order Enum “Panding”,

”Proses”,

”Terkirim”

, ”Batal”

8. tgl order tam_order Date -

47

9. Jam order jam_order Time -

10. Total bayar Total_bayar Int 3

11. Id kota Id_kota Int 3

8. Spesifikasi File orders_detail

Nama File : Tabel orders detail

Akronim : orders_detail.myd

Fungsi : untuk menyimpan data pesanan detail



Akses File : Random

Media : Harddisk

Panjang record : 15

Kunci Field : id_orders

Software : Mysql

Tabel III.8Spesifikasi File orders_detail


1. Id orders id_orders Int 5 auto_increment Primary Key

2. Id produk id_produk Int 5 Foreign key

3. Jumlah jumlah Int 5

9. Spesifikasi File Produk

Nama File : Tabel produk

48

Akronim : produk.myd

Fungsi : menyimpan data produk



Akses File : Random

Media : Harddisk


Kunci Field : id_produk

Software : Mysql

Tabel III.9Spesifikasi File produk


1. Id produk id_produk Int 3 auto_increment Primary

Key

2. Id kategori id_kategori Int 3 Foreign Key


4. Harga harga Int 11

5. Stok stok Int 10

6. Deskripsi deskripsi Longtext -

7. Gambar gambar Varchar 100

8. Tanggal tanggal Varchar 20

3.2.3. Rancangan Struktur Navigasi

Navigasi merupakan unsur penting dalam banyak halaman web. Tujuannya

agar seseorang merasa mudah mengemudikan suatu halaman web. Biasanya

49

komponen navigasi tersebut berupa fasilitas yang berfungsi untuk berpindah

kehalaman web lainnya, yang diwujudkan dalam berbagai cara.

Program web browser sendiri, seperti Intenet Explorer dan Google Chrome

dilengkapi fasilitas untuk mempermudah seseorang dalam menjelajah dunia Internet.

Dalam membuat web (situs web) pribadi, penulis menggunakan peta navigasi untuk

mengetahui arah dari perjalanan halaman web penjualan tanki CB ini. Struktur

navigasi ini fleksibel karena alur program dapat bergerak bebas. Setelah menentukan

struktur navigasi maka dibuatlah peta navigasi, peta navigasi adalah bentuk detail dari

struktur navigasi. Peta navigasi dapat dilihat seperti gambar dibawah ini

a. Struktur Navigasi Pengunjung

50

Gambar III.25.

Struktur Navigasi Halaman Pengunjung

b. Struktur Navigasi Pelanggan

51

Gambar III.26.

Struktur Navigasi Halaman Pelanggan

c. Struktur Navigasi Admin

Gambar III.27.

Struktur Navigasi Halaman admin

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

A. Implementasi Rancangan Antar Muka

52

Implementasi rancangan antar muka pada aplikasi e-commerce berdasarkan

hasil rancangan antar muka.

1. Implementasi Rancangan Antar Muka pengunjung

a. Implementasi Rancangan Antar Muka index pengunjung

Gambar III.28.

Implementasi Rancangan Antar Muka index Pengunjung

b. Implementasi Rancangan Antar Muka Produk

53

Gambar III.29.

Implementasi Rancangan Antar Muka Produk

c. Implementasi Rancangan Antar Muka Kategori

Gambar III.30.

Implementasi Rancangan Antar Muka Kategori

d. Implementasi Rancangan Antar Muka Syarat&Ketentuan

54

Gambar III.31.

Implementasi Rancangan Antar Muka Syarat&Ketentuan

e. Implementasi Rancangan Antar Muka Cara Pembelian

Gambar III.32.

Implementasi Rancangan Antar Muka Cara Pembelian

f. Implementasi Rancangan Antar Muka Tentang Kami

55

Gambar III.33.

Implementasi Rancangan Antar Muka Tentang Kami

g. Implementasi Rancangan Antar Muka Cari Produk

Gambar III.34.

Implementasi Rancangan Antar Muka Cari Produk

h. Implementasi Rancangan Antar Muka Daftar Member

56

Gambar III.35.

Implementasi Rancangan Antar Muka Daftar Member

2. Implementasi Rancangan Antar Muka Pelanggan

a. Implementasi Rancangan Antar Muka Profile Member

Gambar III.36.

Implementasi Rancangan Antar Muka Profile Member

b. Implementasi Rancangan Antar Muka Keranjang Belanja

57

Gambar III.37.

Implementasi Rancangan Antar Muka Keranjang Belanja

c. Implementasi Rancangan Antar Muka Bukti Pemesanan

Gambar III.38.

Implementasi Rancangan Antar Muka Bukti Pemesanan

d. Implementasi Rancangan Antar Muka Konfirmasi Pembayaran

58

Gambar III.39.

Implementasi Rancangan Antar Muka Konfirmasi Pembayaran

3. Implementasi Rancangan Antar Muka Admin

a. Implementasi Rancangan Antar Muka Login Admin

Gambar III.40.

Implementasi Rancangan Antar Muka Login Admin

b. Implementasi Rancangan Antar Muka Home Admin

59

Gambar III.41.

Implementasi Rancangan Antar Muka Home Admin

c. Implementasi Rancangan Antar Muka Data Produk

Gambar III.42.

Implementasi Rancangan Antar Muka Data Produk

d. Implementasi Rancangan Antar Muka Data Kategori

60

Gambar III.43.

Implementasi Rancangan Antar Muka Data Kategori

e. Implementasi Rancangan Antar Muka Data Order Masuk

Gambar III.44.

Implementasi Rancangan Antar Muka Data Order Masuk

f. Implementasi Rancangan Antar Muka Buku Tamu

61

Gambar III.45.

Implementasi Rancangan Antar Muka Buku Tamu

g. Implementasi Rancangan Antar Muka Data Halaman

Gambar III.46.

Implementasi Rancangan Antar Muka Data Halaman

h. Implementasi Rancangan Antar Data Ongkir

62

Gambar III.47.

Implementasi Rancangan Antar Muka Data Ongkir

i. Implementasi Rancangan Antar Data User Admin

Gambar III.48.

Implementasi Rancangan Antar Muka User Admin

j. Implementasi Rancangan Antar Data Laporan

63

Gambar III.49.

Implementasi Rancangan Antar Muka Data Laporan

B. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum

yang dibutuhkan untuk mengimplementasikan aplikasi e-commerce pada toko

kacamata.

1. Spesifikasi Perangkat Keras

a. Server

1) CPU

a) Processor Intel® Core™ i3-370M

b) RAM DDR3 2GB

c) Hard Disk 320 GB

2) Mouse

3) Keyboard

4) Monitor 14.0” HD LED LCD

64

5) Koneksi internet dengan kecepatan 2 Mbps.

b. Client

1) CPU

a) Processor Intel® Core™ i3-370M

b) RAM DDR3 2GB

c) Hard Disk 320 GB

d) Mouse

e) Keyboard

f) Monitor 14.0” HD LED LCD

g) Koneksi internet dengan kecepatan 2 Mbps.

2. Spesifikasi Perangkat Lunak

1) Server

1) Sistem operasi yang umum digunakan seperti: Microsoft Windows atau Linux

(Ubuntu, Fedora, dan lain-lain).

2) Aplikasi bundle web server seperti: Xampp, WampServer, php2triad yang

terdiri dari beberapa komponen, diantaranya:

a) Aplikasi Appserv Server v2

b) Aplikasi PHP Server v5

c) Aplikasi MySQL Server v5

d) Aplikasi phpMyAdmin v3

e) Aplikasi web browser yang sudah mengunakan bahasa pemograman HTML

5 seperti Mozilla Firefox, Opera, Safari, Google Chrome.

2. Client

65

a. Sistem operasi yang umum digunakan seperti: Microsoft Windows atau

Linux (Ubuntu, Backtrak, dan lain-lain).

b. Aplikasi web browser yang sudah mengunakan bahasa pemograman

HTML 5 seperti Mozilla Firefox, Opera, Safari, Google Chrome.

3.3.2. Pengujian Unit

Pengujian terhadap program yang penulis rancang menggunakan black box

testing untuk mengetahui kesalahan dan kekurangan yang ada pada program.

Pengujian black box testing fokus terhadap proses masukan dan keluaran program.

1. PengujianTerhadap Form Login Member

Tabel III.10PengujianTerhadap Form Login Member

No Skenario pengujian

Test Case Hasil yang diharapkan Hasil pengujian

Kesimpulan

1. Tidak mengisi semua form

atau salah satu form kemudian

klik tombol login

email : (kosong)Password: (kosong)

Sistem akan menolak akses dan menampilkan “Harap isi bidang ini”Di form yang kosong

Sesuai harapan

Valid

2. Mengetikkan salah satu from dengan salah

pada email atau password

kemudian klik tombol login

email : vemb

[email protected]: 1234

Sistem akan menolak akses dan menampilkan “email atau password

salah”

Sesuai harapan

Valid

3. Mengetikkan email dan

email : vemb

Sistem menerima akses login , kemudian

Sesuai harapan

Valid

mailto:[email protected]

66

password dengan data yang benar kemudian klik tombol login

i @yahoo.com (Benar)

Password: 123 (Benar)

langsung menampilkan”Selamat datang vembi, Selamat

Berbelanja.”

2. Pengujian Terhadap Form Pendaftaran Member

Tabel III.11Pengujian Terhadap Form Pendaftaran Member


Test Case Hasil yang diharapkan

Hasil pengujian

Kesimpulan

1. Tidak mengisi semua form atau salah satu form kemudian klik tombol daftar

Nama:(kosong)Email : (kosong)

Password: (kosong)Telpon:(kosong)Alamat:(kosong)

Sistem akan menolak akses dan

menampilkan “Harap isi bidang

ini”Di from yang

kosong

Sesuai harapan

Valid

2 Form email tidak mengunakan “@”kemudian klik tombol daftar

Nama : (vembi)email : (vembi)

Password : (123)Telpon:(08965481)Alamat : (jakarta)


menampilkan “Sertakan ‘@’ pada

alamat email. ‘vembi’ tidak

memiliki ‘@’ “Di from email

Sesuai harapan

Valid

3 Mengisi semua form dengan email yang sudah terdaftar kemudian klik tombol daftar

Nama : (vembi)email :

([email protected])Password : (123)

Telpon:(08965481)Alamat : (jakarta)


menampilkan “Email Sudah

Terdaftar di database kami”

Sesuai harapan

Valid

4. Mengisi semua form dengan benar kemudian klik tombol Daftar

Nama : (vembi)email :

([email protected])Password : (123)

Telpon:(08965481)

Sistem menerima akses, kemudian

langsung menampilkan ”

Anda Telah Menjadi

Sesuai harapan

Valid

mailto:[email protected]

67

Alamat : (jakarta) Member, Silakan Login Untuk Berbelanja”

3. Pengujian Terhadap Form Konfirmasi pembayaran

Tabel III.12Pengujian Terhadap Form Konfirmsi Pembayaran


Test Case Hasil yang diharapkan

Hasil pengujian

Kesimpulan

1. Tidak mengisi semua atau salah

satu form kemudian klik tombol kirim

Tanggal:(kosong)Bank Terima: (kosong)

Bank Pengirim: (kosong)

Tipe Transaksi:(kosong)Atas Nama:(kosong)

No Rekening:(kosong)


menampilkan “Harap isi bidang ini”

Di from yang kosong

Sesuai harapan Valid

2 Mengisi semua form dengan benar kemudian klik tombol kirim

Tanggal:(08-02-2015)Bank Terima: (BCA

Bogor Rek.313001.,a/n.vembi)Bank Pengirim: (BCA)Tipe Transaksi:(ATM)

Atas Nama:(vembi)No Rekening:(887021)

Sistem akan mengakses dan menampilkan “

Konfirmasi Pembayaran Anda

Akan Kami Peroses”


4. Pengujian Terhadap Form Login Administrator

Tabel III.13Pengujian Terhadap Form Login Administrator

68

No Skenario pengujian Test Case Hasil yang diharapkan Hasil pengujian

Kesimpulan

1. Tidak mengisi semua form

kemudian klik tombol login

username: (kosong)

Password: (kosong)

Sistem akan menolak akses dan menampilkan “Harap

Isi Bidang Ini”


2 Tidak mengisi salah satu form kemudian klik tombol login

Username : admin

Password:(kosong)

Sistem akan menolak akses dan menampilkan “Harap

Mengisi Bidang Ini“


3. Mengetikkan salah satu form dengan

salah pada username atau

password kemudian klik tombol login

username : vembi

Password : admin

Sistem akan menolak akses dan menampilkan “Anda Gagal Login ,Username Atau Password Salah”


4. Mengetikkan username dan

password dengan data yang benar kemudian klik tombol login

username : vembi

Password : 123

Sistem menerima akses login, dan akan

menampilkan “Selamat Datang vembi” dan

langsung masuk kedalam halaman admin


5. Pengujian Terhadap Form Tambah Produk

Tabel III.14Pengujian Terhadap Form Tambah Produk

69

No

Skenario pengujian


Kesimpulan

1.

Tidak mengisi semua atau salah

satu form kemudian klik tombol simpan

Nama produk: (kosong)

kategori: (kosong) harga: (kosong)stok: (kosong)

gambar:(kosong)deskipsi:(kosong)

Sistem akan menolak akses dan menampilkan “Harap isi bidang ini”Di from yang kosong


2 Mengisi di salah satu form harga dan stok tidak

dengan menggunakan

angka kemudian klik tombol

simpan

Nama produk: (cb 125 orange)

kategori: (cb 125)harga: (qwe)stok: (qwe)

gambar:(image.jpg)deskipsi: (cat oven,

body galvanis, emblem, tutup

tanki)

Sistem akan menolak akses dan menampilkan

“Masukan Nomor”Di from harga, atau stok


3.

Mengetikkan semua from

dengan benar kemudian klik tombol simpan

Nama produk: (cb 125 orange)

kategori: (cb 125)harga: (650.000)

stok: (6)gambar:(image.jpg)deskipsi: (cat oven,

body galvanis, emblem, tutup

tanki)

Sistem akan menerima akses dan menampilkan

“berhasil menambah produk”


6. Pengujian Terhadap Form Pencarian

Tabel III.15Pengujian Terhadap Form Pencarian Produk

No Skenario Test Case Hasil yang diharapkan Hasil Kesimpulan

70

pengujian pengujian1. Tidak mengisi

form Pencarian kemudian klik

tombol cari

Pencarian: (kosong)

Sistem akan menolak akses dan menampilkan “Maaf Kolom Pencarian Tidak Boleh Kosong!”

Sesuai harapan

Valid

2 Mengisi form Pencarian

dengan Produk yang tidak ada kemudian klik

tombol cari

Pencarian: (tanki harley)


“kata kunci tidak Ditemukan”

Sesuai harapan

Valid

3. Mengisi form Pencarian

dengan Produk yang ada

kemudian klik tombol cari

Pencarian: (cb 125)


produk yang di cari

Sesuai harapan

Valid

7. Pengujian Terhadap Form Tambah Kategori

Tabel III.16Pengujian Terhadap Form Tambah Kategori



Kesimpulan

1. Tidak mengisi form nama

kategori kemudian klik tombol simpan

Nama kategori: (kosong)


Harap isi bidang ini”


2 mengisi form nama kategori kemudian klik tombol simpan

Nama kategori: (CB 125)


“Kategori Berhasil Disimpan”


repository.bsi.ac.id · web viewbab iii pembahasan analisis kebutuhan hal pertama yang perlu...

Documents