18
BAB III
PEMBAHASAN
3.1. Analisa Kebutuhan3.1.1. Analisa Kebutuhan Sistem
Analisa kebutuhan sistem Program Web Penjualan Helm SNI adalah sebagai berikut:
A. Website dapat langsung diakses tanpa harus login terlebih dahulu, guna
memudahkan pengunjung untuk mengakses website.
B. Website memiliki empat menu utama yaitu Halaman Produk, Halaman
Detail Produk, Halaman Keranjang Belanja, dan Halaman Proses Pembayaran.
C. Sistem dapat melakukan transaksi dari pengunjung tanpa menggunakan
username dan password, tetapi dapat menggunakan alamat email
sebagai identitas pengunjung.
D. Pengunjung wajib mengisi formulir pembelian yang berisi nama pembeli, alamat email, kota, alamat lengkap, kode pos, dan nomor telpon.
3.1.2. Analisa Kebutuhan Pengguna
A. Analisa kebutuhan Admin adalah sebagai berikut:
1) Admin dapat mengelola data produk seperti menambahkan produk, menghapus produk, dan mengedit produk.
2) Admin dapat mengelola data admin seperti mengganti password 3) Mengelola data pesanan yang dilakukan oleh user.
B. Analisa kebutuhan Pengunjung adalah sebagai berikut:
1) Pengunjung dapat masuk kedalam website tanpa harus login terlebih dahulu.
2) Pengunjung dapat melihat-lihat produk yang ada di dalam website. 3) Pengunjung dapat melihat detail produk yang dipilih oleh pengunjung. 4) Pengunjung dapat melakukan pembelian online.
5) Pengunjung dapat melihat status pemesanan
6) Pengunjung dapat melakukan transaksi tanpa harus login terlebih dahulu.
7) Pengunjung dapat membeli barang dengan metode pembayaran via ATM.
3.2. Perancangan Perangkat Lunak.
Untuk menghasilkan suatu rancangan yang baik diperlukan suatu bentuk masukan dan keluaran sebagai berikut:
3.2.1. Rancangan Antar Muka
Rancangan Antar Muka merupakan rancangan interface yang akan digunakan sebagai perantara User dengan perangkat lunak yang dikembangkan. Rancangan Interface dari Website Penjualan Helm ini adalah sebagai berikut:
A. Rancangan Antar Muka Halaman Front End
Rancangan Antar Muka Halaman Front End merupakan rancangan interface yang akan digunakan sebagai perantara bagi pengunjung website. Rancangan Antar Muka Halaman Front End dari Website Penjualan Helm ini adalah sebagai berikut: 1) Rancangan Antar Muka Halaman Utama.
Halaman paling depan yang ada pada semua website. Halaman Utama juga disebut sebagai halaman pembuka karena saat pertama kali membuka sebuah
halaman utama akan dirancang cukup kompleks, karena ada banyak link yang mengarah ke semua halaman website. Rancangan halaman utama (beranda) adalah sebagai berikut:
Gambar III.1.
Rancangan Antar Muka Halaman Utama
2) Rancangan Antar Muka Halaman Produk
Halaman Produk adalah halaman yang menampilkan isi berupa barang-barang atau produk yang dijual dalam sebuah website. Rancangan halaman produk adalah sebagai berikut:
Gambar III.2.
Rancangan Antar Muka Produk
3) Rancangan Antar Muka Keranjang Belanja
Halaman Keranjang Belanja adalah halaman yang paling penting dan harus ada dalam sebuah website ecommerce, karna pengunjung dapat melakukan transaksi pembelian di dalam halaman ini, tanpa adanya halaman keranjang belanja pengunjung tidak dapat melakukkan transaksi pembelian di dalam
website. Rancangan halaman keranjang belanja (Shopping Cart) adalah
sebagai berikut:
Gambar III.3.
Rancangan Antar Muka Keranjang Belanja
4) Rancangan Antar Muka Form Checkout Produk
Halaman Proses Checkout adalah halaman yang digunakan pengunjung untuk mengisi sebuah form yang isinya berupa nama pembeli, alamat email, nomor telepon, alamat tujuan pengiriman barang, dan lain-lain. Rancangan halaman proses checkout adalah sebagai berikut:
Gambar III.4.
Rancangan Antar Muka Halaman Proses Checkout Produk
5) Rancangan Antar Muka Informasi Tata Cara Pembelian
Halaman ini berisi tentang tata cara pembelian dalam sebuah website
ecommerce. Pengunjung dapat membaca tata cara pembelian ini untuk
memudahkan pengunjung dalam melakukkan proses pembelian di sebuah
website ecommerce. Rancangan halaman utama (beranda) adalah sebagai
berikut:
Gambar III.5.
B. Rancangan Antar Muka Halaman Back End
Rancangan Antar Muka Halaman Back End merupakan sebuah halaman yang berinteraksi langsung dengan admin untuk mengatur halaman front end dari
website. Rancangan Halaman Antar Muka Back End dari Website Penjualan Helm
SNI ini adalah sebagai berikut:
1) Rancangan Antar Muka Login Admin
Halaman Login Admin ini adalah halaman yang digunakan admin untuk masuk ke dalam halaman admin. Dalam halaman ini admin diharuskan mengisi ID admin dan kata sandi agar dapat masuk ke dalam website. Rancangan halaman login admin adalah sebagai berikut:
Gambar III.6.
Rancangan Antar Muka Login Admin
2) Rancangan Antar Muka Halaman Utama Admin
Halaman Utama Admin ini adalah halaman awal yang dari bagian back end sebuah website. Halaman ini sama seperti halaman utama pada fornt end,
tetapi link-link yang terdapat di dalam halaman utama admin berbeda dengan yang ada di halaman front end. Rancangan halaman admin adalah sebagai berikut:
Gambar III.7.
Rancangan Antar Muka Halaman Utama Admin
3) Rancangan Antar Muka Halaman Kelola Produk
Halaman Kelola Produk adalah halaman yang terdapat di halaman back end
website yang digunakan admin untuk mengelola produk-produk yang
ditampilkan di halaman front end. Dalam halaman kelola produk admin dapat menambahkan produk, menghapus produk, ataupun mengedit produk. Rancangan halaman kelola produk adalah sebagai berikut:
Gambar III.8.
4) Rancangan Antar Muka Halaman Kelola Pesanan
Halaman Kelola Pesanan adalah halaman yang digunakan admin untuk mengelola pesanan yang diberikan oleh pengunjung website. Dalam halaman ini admin dapat menghapus pesanan dan memproses pesanan. Rancangan halaman kelola pesanan adalah sebagai berikut:
Gambar III.9.
Rancangan Antar Muka Halaman Kelola Pesanan
5) Rancangan Antar Muka Halaman Pengaturan Admin
Halaman Pengaturan Admin adalah halaman yang digunakan admin unuk mengganti kata sandi atau password admin. Rancangan halaman kelola pesanan adalah sebagai berikut:
Gambar III.10.
3.2.2. Rancangan Basis Data
A. Entity Relationship Diagram (ERD)
Gambar III.11.
B. Logical Relation Structure (LRS)
Gambar III.12.
B. Spesifikasi File
Database adalah kumpulan data-data yang saling berhubungan satu sama
lain, data tersebut terorganisir dengan baik agar bisa digunakan dengan mudah dan cepat untuk keperluan berbagai macam pengolahan data.
Dalam program website ini menggunakan satu buah file database dengan nama penjualan.sql. Di dalam database tersebut beberapa tabel, adapun tabel-tabel tersebut adalah sebagai berikut:
1. Nama File : File Admin
Akronim : Admin
Fungsi : Sebagai tempat penyimpanan data admin
Tipe : File master
Organisasi File : Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 80 karakter
Kunci Field : id_admin
Tabel III.1 Spesifikasi file admin
No Elemen Data Akronim Tipe Size Keterangan 1. ID Admin Id_admin Varchar 10 Primary key
2. Password Password Varchar 20
2. Nama File : File Barang
Akronim : Barang
Fungsi : Sebagai tempat penyimpanan data barang
Tipe : File master
Organisasi File : Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 194 karakter
Kunci Field : br_id
Tabel III.2 Spesifikasi file barang
No Elemen Data Akronim Tipe Size Keterangan
1. ID Barang br_id Int 11 Primary key
(Auto Increment)
2. Nama Barang br_nm Varchar 50
3. Harga Barang br_hrg Int 10
4. Barang Stok br_stok Int 3
5. Satuan Barang br_satuan Varchar 20 6. Gambar Barang br_gbr Varchar 100
3. Nama File : File Transaksi
Akronim : Transaksi
Fungsi : Sebagai tempat penyimpanan data
Transaksi
Tipe : File Transaksi
Organisasi File : Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 154 karakter
Kunci Field : id_tr
Tabel III.3 Spesifikasi file transaksi
No Elemen Data Akronim Tipe Size Keterangan
1. ID Transaksi Id_tr Int 11 Primary key
(Auto Increment)
2. Nama Pembeli Nama Varchar 30
3. Email Pembeli Email Varchar 30 Foreign Key
4. Alamat Pembeli Alamat Varchar 50
5. Ongkos Kirim Id_ongkir Int 11
6. Nomer Telpon Telp Varchar 14
7. Status Pemesanan Status Varchar 7
4. Nama File : File Pembeli
Akronim : Pembeli
Fungsi : Sebagai tempat penyimpanan data
pembeli
Tipe : File master
Organisasi File : Index Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 238 karakter
Kunci Field : email
Tabel III.4 Spesifikasi file pembeli
No Elemen Data Akronim Tipe Size Keterangan
1. Email Email Varchar 50 Primary
key
2. Nama Pembeli Nama Varchar 50
3. Alamat pembeli Alamat Varchar 100
4. Telepon Telp Varchar 13
5. Nama File : File Pemesanan
Akronim : Bukti
Fungsi : Sebagai tempat penyimpanan data bukti pemesanan
Tipe : File master
Akses File : Random
Media : Hard Disk
Panjang Record : 125 karakter
Kunci Field : bukti
3.2.3. Rancangan Struktur Navigasi
Struktur navigasi website digunakan untuk menggambarkan secara garis besar isi dari seluruh bagian website, meliputi isi website dan hubungan antara isi-isi tersebut. Struktur navigasi website yang diterapkan pada situs penjualan Helm ini adalah menggunakan Struktur Navigasi Bercabang (Hierarki). Melalui struktur navigasi website ini, dapat dilihat bagaimana tampilan website secara menyeluruh. Pembuatan struktur navigasi website ini tentu akan sangat membantu nantinya ketika ingin membuat rancangan keseluruhan dari halaman website. Harapannya, dari struktur navigasi website ini para member yang ingin berbelanja dapat mengetahui mereka sedang berada pada bagian website yang mana dan dapat memperkirakan halaman mana saja yang bisa dikunjungi dari halaman mereka berada sekarang.
Pada rancangan struktur navigasi website ini, penulis membuat dua buah rancangan terpisah yang tujuannya agar lebih mudah dipahami. Rancangan struktur navigasi ini terdiri dari rancangan untuk member dan rancangan untuk
A. Struktur Navigasi Front End (User)
Gambar III.13.
B. Struktur Navigasi Back End (Admin)
Gambar III.14.
3.3. Implementasi dan Pengujian Unit 3.3.1. Implementasi
a. Implementasi Rancangan Antarmuka
Implementasi rancangan antar muka pada website Penjualan Helm berdasarkan hasil rancangan antar muka.
Contoh Implementasi Rancangan Antarmuka:
1) Halaman Login Admin
Administrator harus melakukan login terlebih dahulu untuk dapat
menggunakan modul-modul yang tersedia. Jika login berhasil, maka menu-menu tersebut akan ditampilkan.
Gambar III.15.
2) Halaman Utama Admin
Halaman Utama Admin berisi menu-menu yang dapat digunakan untuk mengatur website.
Gambar III.16.
Halaman Utama Admin
3) Halaman Kelola Produk
Halaman ini digunakan admin untuk mengelola produk-produk yang akan ditampilkan di website, seperti menambahkan produk ataupun menghapus produk.
Gambar III.17.
4) Halaman Kelola Pesanan
Halaman ini digunakan admin untuk mengelola pesanan yang telah dipesan, admin bisa mengubah pesanan maupun menghapus pesanan.
Gambar III.18.
Halaman Kelola Pesanan
5) Halaman Utama User
Halaman ini adalah halaman utama user yang ditampilkan paling awal saat website sedang diakses. Di halaman ini berisi menu-menu yang dapat user gunakan untuk melakukan transaksi pembelian di website ini.
Gambar III.19.
6) Halaman Keranjang Belanja
Halaman ini digunakan untuk melakukan transaksi pembelian jika user sudah memilih barang yang akan dibeli.
Gambar III.20.
Halaman Keranjang Belanja
7) Halaman Proses Checkout
Halaman ini digunakan user untuk mengisikan beberapa informasi penting yang nantinya dapat digunakan untuk proses pengiriman barang seperti Nama Lengkap, Alamat Email, Nomor Telepon, Alamat Lengkap, dan sebagainya.
Gambar III.21.
Halaman Proses Checkout
b. Spesifikasi Sistem Komputer
Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum yang dibutuhkan untuk mengimplementasikan Website Penjualan Helm.
Contoh Spesifikasi Sistem Komputer:
a. Spesifikasi Perangkat Keras 1) Komputer
a) Processor Celeron® 1007U @ 1.50GHz (2 CPUs) ~ 1.5GHz
b) RAM DDR3 2GB
c) Hard Disk 500 GB
2) Mouse/Track Pad
3) Keyboard
b. Spesifikasi Perangkat Lunak
1) Sistem Operasi Windows 10 Pro 32 Bit (10.0 Build 10586)
2) Aplikasi Web Server yang digunakan adalah Xampp Server yang terdiri dari:
a) Aplikasi Apache Server Versi 2.2.14 b) Aplikasi PHP Server Versi 5.3.1 c) Aplikasi MySql Server Versi 5.1.41 d) Aplikasi phpMyadmin Versi 3.2.4
3) Aplikasi Web Browser yang digunakan adalah Google Chrome dan
Mozilla Firefox dan UC Browser. 3.3.2. Pengujian Unit
Pengujian terhadap program yang dibuat menggunakan blackbox testing yang fokus terhadap proses masukan dan keluaran program.
Contoh Pengujian Unit:
A. Pengujian Terhadap Form Login
Tabel III.5
Hasil Pengujian Black Box Testing Halaman Login
N o
Skenario
pengujian Test case
Hasil yang diharapkan Hasil pengujian Kesimpulan 1 . Id Admin dan password tidak diisi kemudian klik tombol login
Id Admin : (kosong) Password: (kosong) Sistem akan menolak akses user dan menampilkan “Id Admin dan password tidak dikenal” Sesuai Harapan Valid 2. Mengetikkan Id admin dan password tidak diisi atau kosong
Id admin: admin Password : (kosong) Sistem akan menolak akses dan menampilkan “Id Admin dan
Sesuai
B. Pengujian Terhadap Form Tambah Produk
Tabel III.6
Hasil Pengujian Black Box Testing Tambah Produk
N o Skenario Pengujian Test Case Hasil yang diharap kan Hasil pengujia n Kesimp ulan 1 Nama barang tidak diisi kemudian klik simpan (kosong) Sistem menolak untuk menyim pan Sesuai Harapan Valid 2 Harga Barang tidak diisi kemudian klik simpan (kosong) Sistem menolak untuk menyim pan Sesuai Harapan Valid 3 Stok Barang tidak diisi (kosong) Sistem menolak Sesuai Harapan Valid kemudian klik tombol login password tidak dikenal” 3. Id Admin tidak diisi (kosong) dan password diisi kemudian klik tombol login Id Admin: (kosong) Password: 111 Sistem akan menolak akses user dan menampilkan “Id Admin dan password tidak dikenal” Sesuai Harapan Valid 4. Mengetikkan salah satu kondisi salah pada Id Admin atau password kemudian klik tombol login User ID: admin (benar) Password: 456 (salah) Sistem akan menolak akses user dan menampilkan “Id Admin dan password tidak dikenal”. Sesuai Harapan Valid 5. Mengetikkan Id Admin dan password dengan data yang benar kemudian klik tombol login User ID: admin (benar) Password: 111 (benar) Sistem menerima akses login dan kemudian langsung menampilkan menu utama. Sesuai Harapan Valid
kemudian klik simpan untuk menyim pan 4 Satuan tidak dipilih kemudian klik simpan (kosong) Sistem menolak untuk menyim pan Sesuai Harapan Valid 5 Tidak memilih file yang akan di upload (kosong) Sistem menolak untuk menyim pan Sesuai Harapan Valid 6 Kolom keterangan tidak di isi (kosong) Sistem menolak untuk menyim pan Sesuai Harapan Valid 7 Mengetikka n semua kolom dengan data yang benar kemudian klik tombol simpan Semua kolom teisi dengan benar Sistem akan menerim a akses simpan Sesuai harapan Valid
