BAB III PEMBAHASAN. Dalam rancangan website ini penulis akan membuat website yang akan

(1)

18 3.1. Analisis Kebutuhan

Dalam rancangan website ini penulis akan membuat website yang akan memudahkan para pengguna untuk memperoleh informasi dalam mengakses data ataupun melakukan transaksi pembelian secara online. Atas dasar analisa kebutuhan yang telah dijelaskan diatas maka penulis membagi website ini menjadi dua bagian, yaitu :

1. Halaman Back End

Halaman ini adalah halaman yang hanya dikelola oleh para admin. Pada halaman admin ini penulis menyediaakan pembahasan menampilkan data semua produk, menambahkan produk baru, mengubah produk, menghapus produk, menampilkan semua kategori, menambahkan kategori baru, mengubah kategori, menghapus kategori, menampilkan pemesanan yang masuk, mengubah pemesanan.

2. Halaman Front End

Di halaman ini, user dapat langsung melihat produk terbaru, produk berdasarkan kategori dan berdasarkan urutan harga. User dapat melakukan pencarian produk, memilih produk yang ingin dibeli dan menambahkannya ke keranjang belanja. Untuk melanjutkan ke proses transaksi pengunjung diharuskan mendaftar terlebih dahulu, yang sudah terdaftar pada website ini dapat langsung login pada form yang telah disediakan.

(2)

3.2. Perancangan Perangkat Lunak 3.2.1. Rancangan Antar Muka

1. Rancangan Antar Muka Halaman Index User

Rancangan antar muka halaman index user digunakan sebagai halaman utama pada saat user mengakses situs pertama kali.

(3)

2. Rancangan Antar Muka Halaman Produk Detail

Rancangan antar muka halaman produk detail digunakan untuk melihat detail produk.

(4)

3. Rancangan Antar Muka Halaman Keranjang Belanja

Rancangan antar muka halaman keranjang belanja digunakan untuk melihat barang atau pesanan yang akan dipesan.

(5)

4. Rancangan Antar Muka Halaman Alamat Pengiriman

Rancangan antar muka halaman alamat pengiriman digunakan sebagai tujuan alamat pengiriman.

(6)

5. Rancangan Antar Muka Halaman Metode Pembayaran

Rancangan antar muka halaman metode pembayaran digunakan untuk user sehingga dapat memilih metode pembayaran.

(7)

6. Rancangan Antar Muka Halaman Selesai Berbelanja

Rancangan antar muka selesai berbelanja adalah rancangan dimana proses transaksi telah selesai.

(8)

7. Rancangan Antar Muka Halaman Panduan Belanja

Rancangan antar muka panduan belanja adalah rancangan yang akan digunakan user sehingga dapat mengetahui panduan berbelanja dengan baik dan benar

(9)

8. Rancangan Antar Muka Halaman Syarat Ketentuan

Rancangan antar muka syarat ketentuan digunakan user untuk dapat mengetahui apa saja syarat-syarat dan ketentuan berbelanja.

(10)

9. Rancangan Antar Muka Halaman Kontak

Rancangan antar muka halaman kontak digunakan user untuk menghubungi admin.

(11)

10. Rancangan Antar Muka Halaman Cek Order

Rancangan antar muka halaman cek order digunakan user untuk mengetahui apakah pesanannya sudah dikirim atau belum.

(12)

11. Rancangan Antar Muka Halaman Konfirmasi Pembayaran

Rancangan antar muka halaman konfirmasi pembayaran digunakan untuk user mengkonfirmasi pembayaran.

(13)

12. Rancangan Antar Muka Halaman Daftar

Rancangan antar muka daftar member adalah rancangan antar muka yang digunakan untuk halaman user mendaftar sebagai member.

(14)

13. Rancangan Antar Muka Halaman Login

Rancangan antarmuka login member adalah rancangan antar muka yang digunakan untuk halaman login member yang telah mendaftar.

(15)

14. Rancangan Antar Muka Halaman Login Admin

Rancangan antar muka login admin adalah rancangan antar muka yang digunakan admin melakukan login untuk mengakses halaman beranda admin.

(16)

15. Rancangan Antar Muka Halaman Index Admin

Rancangan antar muka halaman index admin adalah halaman saat pertama kali admin mengakses website.

(17)

16. Rancangan Antar Muka Halaman Semua Produk

Rancangan antar muka halaman semua produk digunakan admin untuk melihat semua produk.

(18)

17. Rancangan Antar Muka Halaman Tambah Produk

Rancangan antar muka halaman tambah produk digunakan admin untuk menambah produk.

(19)

18. Rancangan Antar Muka Halaman Semua Kategori

Rancangan antar muka halaman semua kategori adalah halaman untuk melihat semua kategori di halaman admin.

(20)

19. Rancangan Antar Muka Halaman Tambah Kategori

Rancangan antar muka halaman tambah produk digunakan untuk admin menambahkan kategori.

(21)

3.2.2 Rancangan Basis Data

Perancangan basis data menghasilkan pemetaan tabel-tabel yang

digambarkan dengan Entity Relationship Diagram (ERD), Logical Record Structure (LRS) dan Spesifikasi File yang terbentuk dari file-file penunjang web yang tersimpan pada database daniel.sql seperti berikut ini:

1 Entity Relationship Diagram (ERD)

(22)

2 Logical Record Structure (LRS)

Gambar III.21 Logical Record Structure

3 Spesifikasi File

a. Spesifikasi File Tabel User

Nama File : users

Akronim : user.myd

Fungsi : Untuk menyimpan data user

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Random

(23)

Panjang Record : 409 Karakter

Kunci Field : user_id

Software : phpmyadmin

Tabel III.1 Spesifikasi Tabel User

No. Elemen Data Nama Field Type Size Ket

1 User_id User_id Int 10 Primary Key

2 Name Name Varchar 24

3 Email Email Varchar 16

4 Password Password Varchar 255

5 Role Role Tinyint 4

6 Remember_token Remember_token Varchar 100

7 Created_at Created_at Timesstamp

8 Updated_at Updated_at Timesstamp

b. Spesifikasi File Tabel Product

Nama File : products

Akronim : products.myd

Fungsi : Untuk menyimpan data produk

Media : Harddisk

(24)

Kunci Field : product_id

Tabel III.2 Spesifikasi Tabel Product

1. Product_id Product_id Int 10 Primary key

2. Name Name Varchar 20

3. Description Description Varchar 555

4. Author Author Varchar 16

5. Stock Image Int 11

6. Image Image Varchar 255

7. Category_id Category_id Varchar 20

8. Weight Weight Decimal 10,2

9. Created_at Created_at Timesstamp

10. Updated_at Updated_at Timesstamp

c. Spesifikasi File Categories

Nama File : categories

Akronim : categories.myd

Fungsi : Untuk menyimpan data kategori

(25)

Kunci Field : category_id

Tabel III.3 Spesifikasi Tabel Categories

1 Category_id Category_id Int 10 Primary

Key

2 Title Title Varchar 20

d. Spesifikasi File Orders

Nama File : orders

Akronim : orders.myd

Fungsi : Untuk menyimpan data order

Tipe File : File Transaksi

Media : Harddisk

Kunci Field : order_id

(26)

Tabel III.4 Spesifikasi Tabel Orders

1 Order_id Order_id Int 10 Primary

Key

2 User_id User_id Int 11

3 Total Total Varchar 15

4 Delivered Delivered Tinyint 25

5 Bank Bank Varchar 25

6 Sender Sender Varchar 20

e. Spesifikasi File Order Product

Nama File : order_product

Akronim : orderproduct.myd

Fungsi : Untuk menyimpan data order product

Media : Harddisk

Kunci Field : product_id

(27)

Tabel III.5 Spesifikasi Tabel Order Product

1 Detail_id Detail_id Int 10 Primary

Key

2 Product_id Product_id Int 11

3 Order_id Order_id Int 11

4 Qty Qty Int 11

5 Total Updated_at Varchar 25

6 Created_at Created_at Timesstamp 7 Updated_at Updated_at Timesstamp

f. Spesifikasi File Adresses

Nama File : addresses

Akronim : addresses.myd

Fungsi : Untuk menyimpan data alamat

Media : Harddisk

Kunci Field : address_id

(28)

Tabel III.6 Spesifikasi Tabel Addresses

1 Address_id Address_id Int 10 Primary

Key

3 addressline Addressline Varchar 255

4 City City Varchar 20

5 Province Province Varchar 20

6 postalcode Postalcode Int 7

7 Phone Phone Varchar 12

8 User_id User_id Int 11

9 Created_at Created_at 10 Updated_at Updated_at

f. Spesifikasi File Confirm

Nama File : confirm

Akronim : confirm.myd

Fungsi : Untuk menyimpan konfirmasi pembayaran

Media : Harddisk

(29)

Tabel III.7 Spesifikasi Tabel Confirm

1 Confirm_id Confirm_id Int 10 Primary

Key

2 Order_id Order_id Int 11

4 Image Image Varchar 255

5 Message Message Varchar 255

6 Created_at Created_at 7 Updated_at Updated_at

(30)

3.2.3. Rancangan Struktur Navigasi

Struktur navigasi digunakan untuk menggambarkan bagaimana alur suatu

website. Struktur navigasi yang digunakan web ini adalah struktur navigasi

campuran (composite) karena memiliki link yang saling berhubungan pada tiap-tiap halamannya.

1. Rancangan Back End

(31)

2. Rancangan Front End Member

(32)

3. Rancangan Front End Pengunjung

(33)

3.3. Implementasi dan Pengujian Unit

3.3.1 Implementasi

1. Implementasi Rancangan Antar Muka

1. Halaman Index User

Halaman produk adalah halaman yang menampilkan semua data produk yang dijual.

(34)

2. Halaman Produk Detail

Pada halaman detail produk menampilkan keterangan dari produk terdiri dari nama produk, stok, harga dan keterangan lainnya.

Gambar III.25 Halaman Produk Detail

3. Halaman Keranjang Belanja

Halaman keranjang belanja adalah halaman untuk melihat barang atau pesanan yang akan dipesan sementara ditampung dalam keranjang belanja (cart).

(35)

4. Halaman Alamat Pengiriman

Halaman ini digunakan untuk user untuk mengisi alamat untuk pengiriman.

Gambar III.27 Halaman Alamat Pengiriman

5. Halaman Metode Pembayaran

Halaman metode pembayaran digunakan user untuk memilih bank untuk melakukan pembayaran.

(36)

6. Halaman Selesai Berbelanja

Halaman ini digunakan sebagai notifikasi kepada user jika telah berhasil berbelanja.

Gambar III.29 Halaman Selesai Berbelanja

7. Halaman Panduan Belanja

Halaman panduan belanja adalah halaman yang menampilkan cara berbelanja dengan benar.

(37)

8. Halaman Syarat Ketentuan

Halaman ini berisi syarat-syarat dan ketentuan yang berlaku dalam berbelanja.

Gambar III.31 Syarat Ketentuan

9. Halaman Kontak

Halaman ini digunakan untuk mengkontak admin, tentang pelayanan, keluhan dan saran.

(38)

10. Halaman Cek Order

Halaman yang digunakan user untuk mengecek status order nya apakah pending atau sudah delivered.

Gambar III.33 Cek Order

11. Halaman Konfirmasi Pembayaran

Halaman yang digunakan user untuk mengkonfirmasi

pembayarannya.

(39)

12. Halaman Daftar

Halaman yang digunakan pengunjung untuk membuat akun.

Gambar III.35 Halaman Daftar

13. Halaman Login

Halaman yang digunakan member untuk masuk sehingga dapat melakukan pembelian produk.

(40)

14. Halaman Login Admin

Halaman yang digunakan admin untuk masuk ke backend.

Gambar III.37 Halaman Login Admin

15. Halaman Index Admin

Halaman utama yang diakses admin pertama kali setelah melakukan login.

(41)

16. Halaman Semua Produk

Halaman yang digunakan admin untuk melihat, mengubah dan menghapus semua produk yang ada di front end.

(42)

17. Halaman Tambah Produk

Halaman yang digunakan admin untuk menambahkan produk.

Gambar III.40 Halaman Tambah Produk

18. Halaman Semua Kategori

Halaman yang digunakan admin untuk melihat, mengubah dan menghapus kategori.

(43)

19. Halaman Tambah Kategori

Halaman yang digunakan admin untuk menambah kategori.

Gambar III.42 Halaman Tambah Kategori

2. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak yang digunakan untuk mengimplementasikan website penjualan buku anak-anak.

A. Spesifikasi Perangkat Keras. 1. CPU

a. AMD A6-3400M APU dengan Radeon(tm) HD Grapics 1.40 GHz

b. RAM 2GB

c. Hard Disk 500 GB

2. Mouse 3. Keyboard

(44)

5. Koneksi internet B. Spesifikasi Perangkat Lunak

1. Server

a. Sistem operasi yang digunakan seperti: Microsoft Windows dan Linux

b. Aplikasi bundle web server seperti: Xampp, yang terdiri dari beberapa komponen, diantaranya:

1. Aplikasi Apache Server v2 2. Aplikasi PHP Server v7 3. Aplikasi MySQL Server v5 4. Aplikasi phpMyAdmin v4

c. Aplikasi Web Browser seperti Mozilla Firefox, Opera, Internet Explorer, Google Chrome.

2. Client

a. Sistem operasi yang umum digunakan seperti: Microsoft Windows

b. Aplikasi web browser seperti Mozilla Firefox, dan Google Chrome.

(45)

3.3.2 Pengujian Unit

Pengujian terhadap program yang dibuat menggunakan black box Testing yang fokus terhadap proses masukan dan keluaran program.

1. Pengujian Form Login

Tabel III.8 Pengujian Form Login No

.

Skenario Pengujian Test Case Hasil yang

diharapkan

Hasil pengujian

Kesimpulan 1 E-mail dan Kata

sandi tidak diisi kemudian klik Masuk E-mail: (Kosong) Kata sandi: (Kosong) Sistem akan menolak akses user dan menampilkan “E-mail dan Password field is required.” Sesuai Harapan Valid 2 Mengetikkan

E-mail dan Kata sandi tidak diisi

kemudian klik Masuk. Username: (daniel@gm ail.com) Kata sandi: (kosong) Sistem akan menolak akses user dan menampilkan teks “The password field id required ” Sesuai Harapan Valid

3 E-mail tidak diisi dan password diisi

kemudian klik Masuk. Username: (Kosong) Passsword: (daniel) Sistem menolak akses user dan tetap menampilkan “The password field id required” Sesuai Harapan Valid 4 Mengetikkan salah

satu kondisi salah pada E-mail atau

Kata sandi kemudian klik Masuk Username: daniel@gm ail.com (benar) Password: 1234 (salah) Sistem akan menolak akses user karena data tidak tersimpan di web dan akan menampilkan

“These

Sesuai Harapan

(46)

credentials do not match our reqords.”

5 Mengetikkan

E-mail dan Kata sandi dengan benar

kemudian klik Masuk Username: (daniel@gm ail.com) Password: (daniel) Sistem menerima akses login User, dan menuju halaman index Admin Sesuai harapan Valid

2. Pengujian Form Register

Tabel III.9 Pengujian Form Register

No. Skenario

Pengujian

Test Case Hasil yang diharapkan Hasil pengujian Kesimpulan 1 Nama, E-mail dan Kata sandi tidak diisi kemudian klik Daftar. Nama: (Kosong) E-mail: (Kosong) Kata sandi: (Kosong) Sistem akan menolak akses user dan menampilkan “Name, E-mail dan Password field is required.” Sesuai Harapan Valid 2 Mengetikkan Nama, E-mail dan Kata sandi tidak diisi kemudian klik Daftar. Nama: daniel E-Mail: (kosong) Kata sandi: (kosong) Sistem akan menolak akses user dan menampilkan teks “The e-mail and password field id required ” Sesuai Harapan Valid

(47)

3 Mengetikkan Nama dan E-mail, Kata sandi tidak diisi kemudian klik Daftar. Nama: daniel E-Mail: (daniel@gmail.com) Kata sandi: (kosong) Sistem menolak akses user dan tetap menampilkan “The password field id required” Sesuai Harapan Valid 4 Mengetikkan Nama, E-mail dan Kata sandi dengan benar kemudian klik Daftar. Nama: daniel E-Mail: (daniel@gmail.com) Kata sandi: (daniel) Sistem menerima akses login User, dan menuju halaman index. Sesuai Harapan Valid

3. Pengujian Form Pemesanan Produk

Tabel III.10 Pengujian Form Pemesanan Produk No

.

diharapkan

Hasil pengujian

Kesimpulan

1 Semua kolom tidak

diisi kemudian klik Lanjut. Nama: (kosong) Alamat: (kosong) Kota: (kosong) Provinsi: (belum pilih) Telepon: (kosong) Sistem akan tetap menampilkan halaman data diri pemesan. Sesuai Harapan Valid

2 Semua data diisi,

tetapi ada satu kolom yang tidak

teriisi, misal nya kolom Kota tidak diisi kemudian klik

Lanjut. Nama: Daniel Alamat (diisi) Kota: (kosong) Dan lainnya teriisi. Sistem akan tetap kembali pada Halaman isi data diri pemesan. Sesuai Harapan Valid

(48)

3 Semua Kolom Terisi dengan benar

kemudian klik Lanjut. Nama: (diisi) Alamat: (diisi) Kota: (diisi) Dan kolom-kolom selanjut nya diisi. Sistem menerima data dan akan

memunculka n halaman pembayaran Sesuai Harapan Valid

4. Pengujian Form Pembayaran

Tabel III.11 Pengujian Form Pembayaran

No. Skenario Pengujian Test Case Hasil yang

diharapkan

Hasil pengujian

Kesimpulan

1 Semua kolom tidak

diisi kemudian klik Lanjut. Bank: (Kosong) Nama Pengirim: (Kosong) Sistem menolak dan menampilkan “Please fill out this field”

Sesuai Harapan

Valid

2 Bank dipilih dan

kolom nama diisi kemudian klik Lanjut. Bank: (BCA) Nama Pengirim: (daniel) Sistem menerima data dan akan memunculkan

halaman Berhasil.

(49)

5. Pengujian Form Konfirmasi Pembayaran

Tabel III.12 Pengujian Form Konfirmasi Pembayaran

No. Skenario

Pengujian

Test Case Hasil yang diharapkan Hasil pengujian Kesimpulan 1 Semua kolom tidak diisi kemudian klik Lanjut. Order ID: (Kosong) Nama: (Kosong) Gambar: (Kosong) Pesan: (kosong)

Sistem menolak dan menampilkan “The Order ID, Name, Image,

Messege field is required” Sesuai Harapan Valid 2 Order ID dan Nama diisi sedangkan gambar dan pesan kosong. Order ID: (142) Nama: (daniel) Gambar: (kosong) Pesan: (kosong

Sistem menolak dan menampilkan “The Image and Messege field

is required” Sesuai Harapan Valid 3 Semua kolom terisi lalu klik lanjut Order ID: (142) Nama: (daniel) Gambar: (contoh.jpg) Pesan: (test)

Sistem menerima data dan

menampilkan”Konfirmasi pembayaran terkirim”

(50)

6. Pengujian Form Ganti Password

Tabel III.13 Pengujian Form Ganti Password

No. Skenario

Pengujian

Test Case Hasil yang diharapkan Hasil pengujian Kesimpulan 1 Semua kolom tidak diisi kemudian klik Lanjut. Sandi Lama: (kosong) Sandi Baru: (kosong) Sistem menolak dan menampilkan

“Please fill out this field” pada kedua kolom.

Sesuai Harapan

Valid

2 Kolom sandi

lama diisi dan sandi baru kosong. Sandi lama: (daniel) Sandi Baru: (kosong) Sistem menolak dan menampilkan

“Please fill out this field” pada kolom sandi baru.

Sesuai Harapan

Valid

3 Semua kolom

terisi lalu klik ubah. Sandi lama: (daniel) Sandi Baru: (dani5000) Sistem menerima data dan menampilkan”Kata sandi berhasil diubah”

7. Pengujian Form Input Tambah Produk

Tabel III.14 Pengujian Form Input Tambah Produk No

.

diharapkan

Hasil pengujian

Kesimpulan

1 Semua kolom tidak

diisi kemudian klik simpan. Nama: (Kosong) Deskripsi: (Kosong) Harga: (kosong) Kategori: Sistem akan menampilkan Halama tambah produk dan terdapat pesan field is Sesuai Harapan Valid

(51)

(kosong) Author: (kosong) required” pada setiap kolom.

2 Semua data diisi

tapi kolom deskripsi tidak diisi, lalu klik

Simpan. Nama: (diisi) Deskripsi: (kosong) Harga: (diisi) Harga: (diisi) Sistem akan menampilkan “the descpription field is required” pada kolom deskripsi. Sesuai Harapan Valid 3 Hanya kolom

Nama produk yang diisi, selain itu

tidak diisi kemudian klik Simpan. Nama: (diisi) Deskripsi: (kosong) Harga: (kosong) Kategori: (kosong) Sistem akan menampilkan pesan pada setiap kolom berisikan “field is required” Sesuai Harapan Valid

4 Semua kolom diisi

kemudian klik Simpan. Nama: (diisi) Deskripsi: (diisi) Harga: (diisi) Kategori: (diisi) Stok: (diisi) Gambar: (diisi) Sistem menerima dan menampilkan data produk, pada halaman semua produk. Sesuai Harapan Valid