perancangan sistem informasi penjualan ......ix abstrak muhammad ikbal (12146779), ”perancangan...
TRANSCRIPT
PERANCANGAN SISTEM INFORMASI PENJUALAN
KOMPUTER DAN AKSESORIS PADA
REKA GADGETS STORE
JAKARTA
TUGAS AKHIR Diajukan untuk memenuhi salah satu syarat kelulusan Program Diploma III
MUHAMMAD IKBAL
NIM: 12146779
Program Studi Manajemen Informatika
AMIK BSI
Jakarta
2017
ix
ABSTRAK
Muhammad Ikbal (12146779), ”Perancangan Sistem Informasi Penjualan
Komputer dan Aksesoris Pada Reka Gadgets Store”
Dalam era globalisasi sekarang ini, teknologi informasi melaju dengan cepatnya.
Adapun komputer yang merupakan peralatan yang diciptakan untuk mempermudah
pekerjaan manusia, saat mencapai kemajuan baik di dalam pembuatan hardware
maupun software. Reka Gadgets Store membutukan sekali adanya suatu sistem
informasi yang menunjang dan memberikan pelayanan yang memuaskan bagi para
customer. Untuk itulah penulis mencoba membuat Tugas Akhir mengenai sistem
penjualan barang di Reka Gadgets Storeyang sampai saat ini belum terkomputerisasi.
Pada saat ini Reka Gadgets Store hanya berupa perusahaan yang bergerak dalam
bidang penjualan computer dan aksesoris. Sistem yang ada pada Reka Gadgets Store
ini masih dilakukan secara manual, mulai dari pencatatan customer yang membeli
barang, sampai penyimpanan data-data lainnya yang berhubungan dengan proses
penjualan hingga sampai pembuatan laporan, sehingga memungkinkan pada saat
proses berlangsung terjadi kesalahan dalam pencatatan, kurang akuratnya laporan
yang dibuat dan keterlambatan dalam pencarian data-data yang diperlukan. Dalam
merancang sistem ini digunakan metode penelitian pengembangan perangkat lunak
waterfall serta metode pengumpulan data observasi, wawancara dan studi pustaka.
Perancangan sistem informasi ini merupakan solusi yang terbaik untuk memecahkan
permasalahan- permasalahan yang ada pada perusahaan ini, serta dengan sistem yang
terkomputerisasi dapat tercapai suatu kegiatan yang efektif dan efisien dalam
menunjang aktifitas pada perusahaan ini. Sistem yang terkomputerisasi lebih baik
dari sistem yang manual agar berjalan lebih efektif dan efisien serta sistem
penjualan yang sekarang lebih kondusif dibandingkan dengan sistem yang terdahulu.
Kata Kunci: Perancangan Sistem Informasi, Sistem Penjualan Komputer.
x
ABSTRACT
Muhammad Ikbal (12146779), The Aplication of Selling Information System of
Trading Product in Reka Gadgets Store Jakarta.
Right now in this era of globalization, the information technology accelerates so fast.
Meanwhile with the presence of computer which is one of many sophisticated
instruments made by people is really helpful and to ease people’s work due to the
emerging of both the hardware and software. Reka Gadgets Store fully needs an
information system which supports and gives contented services to all customers.
That is why the writer tries to make her Final Assignment concerning with the
goods selling system in Reka Gadgets Store which is up to now the company has
not applied the computerized system yet. At this moment, Reka Gadgets Store is a
company which is operating in Computer and Accesoris sales fields. The system
which is being applied now in this company still done manually, starting from the
registration of customers who buy goods, the handling of other records or data
related to the selling process until the phase of making the reports, one of those
phases might trigger some mistakes in doing the registration, less of accurateness
from the reports made by and the lateness in finding required data or
documents. In the preparation of this system used research methods development of
waterfall software along methods of data observation, interviews and literature
study. The computerized system is not only the best solution to solve some problems
appeared in this company, but also with this computerized system the company would
attain enermous advantages since they are capable of doing those activities
effectively and efficiently. The use of computerized system is so much better than the
manual one because it can make the system runs smoothly, effectively and efficiently
and indeed, the current selling system is more conducive than the prior system.
Keywords: Design Information System, Trading Computer.
xi
DAFTAR ISI Lembar Judul Tugas Akhir ..................................................................................... i
Lembar Pernyataan Keaslian Tugas Akhir .............................................................. ii
Lembar Pernyataan Persetujuan Publikasi Karya Ilmiah ......................................... iii
Lembar Persetujuan dan Pengesahan Tugas Akhir.................................................. iv
Lembar Konsultasi Tugas Akhir ............................................................................. v
Kata Pengantar....................................................................................................... vii
Abstrak .................................................................................................................. ix
Daftar Isi ................................................................................................................ xi
Daftar Simbol ........................................................................................................
xiii
Daftar Gambar .......................................................................................................
xiv
Daftar Tabel ...........................................................................................................
xvi
BAB I PENDAHULUAN
1.1. Latar Belakang Masalah ................................................................ 1
1.2. Maksud dan Tujuan .................................................................. 2
1.3. Metode Penelitian ......................................................................... 3
1.4. Ruang Lingkup ............................................................................. 4
1.5.Sistematika Penulisan .................................................................... 5
BAB II LANDASAN TEORI
2.1. Konsep Dasar Web ............................................................. 7
2.2. Teori Pendukung ........................................................................... 12
BAB III PEMBAHASAN 3.1. Tinjauan Perusahaan ................................................................... 20
3.1.1. Sejarah Institusi ................................................................ 20
3.1.2. Struktur Organisasi .......................................................... 20
3.2. Analisa Kebutuhan ..................................................................... 23
3.3. Perancangan Perangkat Lunak .................................................... 25
3.3.1.Rancangan AntarMuka ...................................................... 25
3.3.2.Rancangan Basis Data ........................................................ 54
3.3.3.Rancangan Struktur Navigasi ............................................. 61
3.4. Implementasi dan Pengujian Unit ............................................... 62
3.3.1.Implementasi ..................................................................... 62
3.3.2.Pengujian Unit ................................................................... 80
xii
BAB IV PENUTUP 4.1. Kesimpulan ................................................................................ 90
4.2. Saran ......................................................................................... 90
DAFTAR PUSTAKA ......................................................................................... 92
DAFTAR RIWAYAT HIDUP ............................................................................ 93
SURAT KETERANGAN RISET/PKL .............................................................. 94
xiii
DAFTAR SIMBOL
Entitas / Entity
Entitas adalah suatu objek yang dapat
diidentifikasi dalam lingkungan pemakai
Relasi
Relasi Menunjukkan adanya hubungan di
antara sejumlah entitas yang berbeda
Atribut
Atribut berfungsi mendeskripsikan
karakter entitas (atribut yang berfungsi
sebagai key diberi garis bawah)
Garis
Garis sebagai penghubung antara relasi
dengan entitas atau dengan atribut
xiv
DAFTAR GAMBAR Halaman
Gambar II. 1 Model Waterfall ..................................................................... 10
Gambar II. 2 Navigasi Linier ....................................................................... 13
Gambar II. 3 Navigasi Hirearki ................................................................... 13
Gambar II. 4 Navigasi Non Linier ............................................................... 14
Gambar II. 5 Navigasi Campuran ................................................................ 15
Gambar III.1 Struktur Organisasi ................................................................. 21
Gambar III.2 Rancangan Halaman Login Admin ......................................... 26
Gambar III.3 Rancangan Halaman Dashboard Admin ................................. 27
Gambar III.4 Rancangan Menu Cara Pembelian Admin .............................. 28
Gambar III.5 Rancangan Menu Ganti Password Admin ............................... 30
Gambar III.6 Rancangan Menu Data Produk ............................................... 31
Gambar III.7 Rancangan Menu Data Subproduk ......................................... 33
Gambar III.8 Rancangan Menu Data Kategori ............................................. 34
Gambar III.9 Rancangan Menu Data Ongkos Kirim .................................... 36
Gambar III.10 Rancangan Menu Data Komentar ........................................... 37
Gambar III.11 Rancangan Menu Data Order Masuk ...................................... 39
Gambar III.12 Rancangan Halaman File Konfirmasi Admin .......................... 40
Gambar III.13 Rancangan Halaman Home Website ....................................... 41
Gambar III.14 Rancangan Halaman Kategori Produk ..................................... 42
Gambar III.15 Rancangan Halaman Cara Pembelian ..................................... 43
Gambar III.16 Rancangan Rancangan Halaman Produk ................................. 45
Gambar III.17 Rancangan Halaman Pendaftaran ........................................... 46
Gambar III.18 Rancangan Halaman Contact .................................................. 47
Gambar III.19 Rancangan Halaman Keranjang Belanja ................................. 49
Gambar III.20 Rancangan Checkout .............................................................. 50
Gambar III.21 Rancangan Status Order ........................................................ 52
Gambar III.22 Rancangan Halaman Konfirmasi User .................................... 53
Gambar III.23 Entity Relationship Diagram (ERD) ....................................... 54
Gambar III.24 Logical Relational Structure (LRS) ......................................... 55
Gambar III.25 Rancangan Struktur Navigasi Untuk Admin ........................... 61
Gambar III.26 Rancangan Struktur Navigasi Untuk Pengunjung.................... 61
Gambar III.27 Rancangan Struktur Navigasi Untuk User ............................... 62
Gambar III.28 Tampilan Halaman Login Admin ............................................ 63
Gambar III.29 Tampilan Halaman Panel Admin ............................................ 64
Gambar III.30 Tampilan Menu Cara Pembelian Admin ................................. 65
Gambar III.31 Tampilan Menu Ganti Password Admin ................................. 65
Gambar III.32 Tampilan Menu Data Produk .................................................. 66
Gambar III.33 Tampilan Menu Data Subproduk ............................................ 67
Gambar III.34 Tampilan Menu Data Kategori ................................................ 67
Gambar III.35 Tampilan Menu Data Ongkos Kirim ....................................... 68
Gambar III.36 Tampilan Menu Data Komentar .............................................. 69
xv
Gambar III.37 Tampilan Menu Data Order Masuk ......................................... 69
Gambar III.38 Tampilan Halaman File Konfirmasi Admin ............................ 70
Gambar III.39 Tampilan Halaman Home Website.......................................... 71
Gambar III.40 Tampilan Halaman Kategori Produk ....................................... 72
Gambar III.41 Tampilan Halaman Cara Pembelian ........................................ 73
Gambar III.42 Tampilan Halaman Produk ..................................................... 74
Gambar III.43 Tampilan Halaman Form Pendaftaran ..................................... 75
Gambar III.44 Tampilan Halaman Contact ..................................................... 76
Gambar III.45 Tampilan Halaman Keranjang Belanja .................................... 77
Gambar III.46 Tampilan Halaman Detail Checkout ....................................... 78
Gambar III.47 Tampilan Halaman Status Order User ..................................... 79
Gambar III.48 Tampilan Halaman File Konfirmasi ........................................ 80
xvi
DAFTAR TABEL
Halaman
Tabel III.1 Spesifikasi Tabel Admin ............................................................... 56
Tabel III.2 Spesifikasi Tabel Kategori ............................................................ 57
Tabel III.3 Spesifikasi Tabel Customer .......................................................... 57
Tabel III.4 Spesifikasi Tabel Produk .............................................................. 58
Tabel III.5 Spesifikasi Tabel Order ................................................................ 59
Tabel III.6 Spesifikasi Tabel Detail Order ...................................................... 60
Tabel III.7 Hasil Pengujian Black Box Testing Halaman Login User............... 80
Tabel III.8 Hasil Pengujian Black Box Testing Halaman Login Admin ........... 82
Tabel III.9 Hasil Pengujian Black Box Testing Halaman Daftar Member ........ 83
Tabel III.10 Hasil Pengujian Black Box Testing Halaman Data Produk ........... 84
Tabel III.11 Hasil Pengujian Black Box Testing Halaman Data Kategori ........ 85
Tabel III.12 Hasil Pengujian Black Box Testing Pembelian Produk ................ 86
Tabel III.13 Hasil Pengujian Black Box Testing Status Order ......................... 87
1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Reka Gadgets Store merupakan salah satu perusahaan yang bergerak di bidang
penjualan produk komputer dan aksesoris gadget yang menjual spare part komputer
seperti RAM, Mainboard, VGA dan lain sebagainya yang terletak di Jl. Mangga No.21
Perumahan Harapan Baru Bekasi Barat. Sebagaimana dengan perusahaan pada
umumnya, Reka Gadgets Store memiliki proses perkembangan dalam merintis
usahanya yang pada awalnya mempromosikan produk komputer dan aksesoris gadget
terbarunya hanya melalui poster yang dipasang tepat di depan halaman tokonya. Pada
Reka Gadgets Store juga customer masih harus datang ke lokasi langsung untuk
mengetahui informasi produk serta mengantri untuk melakukan pembelian.
Pada tugas akhir ini penulis bertujuan untuk memperbaiki sistem pemasaran dan
penjualan yang ada pada Reka Gadgets Store dengan menggunakan media internet
lewat konsep penjualan online. Artinya, masyarakat tidak perlu untuk mendatangi
lokasi penjualan dan bisa bertransaksi secara online. Selain itu, produk terbaru dari
Reka Gadgets Store dapat diketahui tidak hanya oleh penduduk yang tinggal di
sekitar lokasi penjualan tapi juga masyarakat luas.
Manfaat dari pembuatan situs penjualan online ini diharapkan mampu
memecahkan permasalahan yang dialami oleh Reka Gadgets Store dan konsumen
seperti konsumen dapat mengefektifkan waktu, tempat, sarana, dan tanpa harus
bertatapan langsung dengan penjual ataupun sebaliknya. Konsumen atau pelanggan
2
dilihat dari segi waktu, dapat memesan barang pada saat kapanpun mereka inginkan,
dari penjual sendiri dapat melihat jumlah pemesanan barang pada saat itu juga tanpa
harus selalu menunggu pembeli datang ke toko. Dari segi tempat dilihat, pembeli atau
konsumen yang berada cukup jauh dari toko tidak harus datang langsung, dapat
memesan dan barang akan diantar melalui jasa pengiriman dengan ketentuan yang
ditetapkan.
Kendala yang dialami oleh para penjual dan pembeli seperti waktu, jarak, tempat
seperti itu yang ingin penulis coba atasi dengan membuat Tugas Akhir dengan judul
“Perancangan Sistem Informasi Penjualan Komputer dan Aksesoris Pada Reka
Gadgets Store”
1.2 Maksud dan Tujuan
Maksud dari penulisan tugas akhir ini adalah sebagai berikut:
1. Mencoba menuangkan dan mempraktekan ilmu yang telah didapat selama
dalam menjalani proses perkuliahan baik secara teoritis maupun praktikum.
2. Merancang sebuah sistem informasi penjualan komputer dan aksesoris yang
menyediakan fasilitas bagi pihak Reka Gadgets Store dan Konsumen untuk
melakukan transaksi yang lebih efektif dan efisisen.
Sedangkan tujuan dari penulisan Tugas Akhir ini adalah sebagai salah satu syarat
untuk kelulusan Diploma Tiga (DIII) Program studi Manajemen Informatika pada
Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika (AMIK
BSI).
3
1.3 Metode Penelitian
Untuk mendapatkan data-data yang dapat menunjang penyusunan Tugas Akhir,
Penulis menggunakan metode pengumpulan data untuk penyusunan laporan Tugas
Akhir yaitu :
A. Metode Pengembangan Perangkat Lunak
Metode yang digunakan pada pengembangan perangkat lunak ini menggunakan
model water fall yang terbagi menjadi tiga tahapan, yaitu:
1. Analisis Kebutuhan
Tahapan ini menekankan pada masalah pengumpulan kebutuhan data
pengguna. Kebutuhan Admin: laporan penjualan, data pendaftaran user.
Kebutuhan User: data produk, data ongkos kirim.
2. Perancangan Sistem dan Perangkat Lunak
Proses perancangan sistem menggunakan perangkat lunak pendukung. PHP
untuk bahasa pemograman, Bracket 1.8 untuk editor, MySQL untuk database
dan XAMPP untuk web servernya. Sedangkan dalam perancagan dan
penggambaran entitas dan struktur database mengunakan rancangan ERD dan
LRS.
3. Implementasi Dan Pengujian Unik
Pada tahap ini, perancangan perangkat lunak direalisasikan sebagai web e-
commerce penjualan komputer dan aksesorisnya. Serta pengujian unitnya
menggunakan blackbox testing.
4
B. Pengumpulan Data
1. Observasi
Pengumpulan data yang dilakukan dengan sengaja dan secara sistematis.
Penulis terjun langsung ke Reka Gadgets Store mengamati sistem dan cara
kerja karyawan, kemudian dilakukan pencatatan guna mendapatkan data
yang dibutuhkan oleh penulis dalam menyusun tugas akhir ini.
2. Wawancara
Penulis melakukan terhadap kepala cabang, dan para karyawan (khususnya
yang dibagian marketing dan IT) Reka Gadgets Store.
3. Studi Pustaka
Penulis mempelajari sumber-sumber data yang ada dan sesuai dengan
bahan dan objek penelitian dan dari catatan-catatan selama penulis
mengikuti perkuliahan. Penulis mengutip sumber-sumber data yang sudah
tertulis dan jelas sumber datanya guna melengkapi tugas akhir.
1.4 Ruang Lingkup
Tulisan ini membahas tentang pembuatan situs penjualan online Reka
Gadgets Store. Situs ini dibuat menggunakan PHP dan MySQL sebagai
databasenya. Dalam situs penjualan Reka Gadgets Store ini terdapat halaman
penjualan produk komputer yang pada segmen pertama user atau member harus
melakukan registrasi member pada menu daftar apabila ingin melakukan
pemesanan produk pada situs, dan selanjutnya member dapat melakukan lihat
5
produk komputer pada halaman produk di situs, lalu setelah melakukan pemesanan
komputer maka member diharuskan untuk melakukan proses checkout agar
administrator dari website segera melakukan pengecekan proses pemesanan dari
member di halaman Administrator.
1.5 Sistematika Penulisan
Untuk memberi gambaran secara keseluruhan dari penulisan Tugas
Akhir ini, maka penulis membagi sistematika penulisan kedalam empat bab,
dimana satu dengan lainnya saling berhubungan. Adapun sistematika dari
penulisan ini adalah sebagai berikut:
BAB I : PENDAHULUAN
Bab ini membahas tentang latar belakang masalah , maksud
dan tujuan, metode penelitian, ruang lingkup dan sistematika
penulisan yang dipakai pada penulisan tugas akhir ini.
BAB II : LANDASAN TEORI
Bab ini membahas tentang teori-teori yang digunakan penulis
sebagai dasar untuk menyusun tugas akhir ini.
BAB III : PEMBAHASAN
Bab ini membahas tentang implementasi penjualan pada Reka
Gadgest Store dan spesifikasi software yang dipakai, serta
6
analisa hasil aplikasi toko online yang dibagi menjadi 3
interface, yaitu antar muka admin, user dan pengunjung.
BAB IV : PENUTUP
Bab ini membahas tentang kesimpulan dan saran yang penulis
ambil dari penulisan tugas akhir ini.
7
BAB II
LANDASAN TEORI
2.1. Konsep Dasar Web
Dalam merancang sebuah website, pertama-tama kita harus mengetahui apa
konsep dasarnya agar ide dan gagasan yang kita inginkan dapat termuat di halaman
web yang akan kita buat. Selain itu juga diperlukan suatu teori pendukung yang
berhubungan dengan perancangan dan pembuatan sebuah website. Adapun konsep
dasar yang penulis gunakan adalah sebagai berikut:
A. Website
Yuhefizar (2013:2) mengatakan “Secara definisi, website adalah kumpulan
halaman yang mengandung informasi”. Sebuah website dipanggil melalui nama
domain-nya dan halaman pertama dari sebuah website disebut dengan homepage.
Website mempunyai keunggulan yakni dapat diakses oleh siapa saja, di mana
saja, kapan saja tanpa terkendala oleh waktu, tempat dan jarak dan semua itu bisa
diakses dengan bantuan teknologi internet melalui perangkat web yakni browser,
server dan lain sebagainya.
B. Bahasa Pemrograman
1. PHP
Menurut Pratama (2015:5) ”PHP merupakan Bahasa pemrograman web yang
digunakan untuk men-generate atau menghasilkan kode HTML.”
Untuk membuat website yang dinamis dibutuhkan kemampuan bahasa
pemrograman yang sifatnya mudah diintegrasi ke dalam database, dan PHP
memiliki kemampuan tersebut. PHP sudah tidak diragukan lagi memiliki
8
kemampuannya tergabung dengan berbagai macam jenis database, mulai dari
dbase, ODBC, MySQL, sampai ke Oracle. PHP mempunyai fungsi sendiri
untuk mengakses semua jenis database tersebut. Database yang banyak
digunakan dengan PHP yaitu MySQL. PHP dan MySQL ialah satu kesatuan
yang apabila digabungkan dapat menciptakan sebuah aplikasi website yang
sangat tangguh.
2. HTML
Menurut Saputra (2012:1) “HTML bisa disebut bahasa yang digunakan
untuk menampilkan dan mengelola hyper text”. HTML mempunyai kepanjangan
Hyper Text Markup Language, yaitu suatu bahasa pemrograman hyper text.
HTML ini memiliki fungsi untuk membangun kerangka ataupun format web
berbasis HTML.
3. CSS
Menurut Masrur (2016:24) “ CSS (Cascading Style Sheet) merupakan sebuah
standar penggunaan dan pembuatan style pada suatu dokumen halaman web”.
CSS direkomendasikan oleh W3C pada tahun 1996 sebagai akibat munculnya
berbagai presentation HTML tags (tag-tag HTML yang berfungsi mengatur
tampilan informasi dalam webpage) yang ‘mencemari’ HTML sebagai bahasa
struktur.
C. Basis Data
Anhar (2010:45) mengatakan bahwa “Database adalah sekumpulan tabel-tabel
yang berisi data dan merupakan kumpulan dari field atau kolom”.
9
Basis data digunakan sebagai suatu tempat untuk menampung beberapa objek
tabel, query, form, Report, dan lainnya. Beberapa aturan untuk merancang basis data
yang baik antara lain:
1. Tabel dalam database tidak boleh mengandung record (data) ganda, atau
dengan kata lain tidak boleh ada redudancy data.
2. Setiap tabel dalam database harus memiliki field (kolom) yang unik. Field ini
disebut sebagai Primary Key.
3. Tabel harus sudah normal.
4. Besar atau ukuran database hendaknya dibuat seminimal mungkin. Hal ini
ditentukan oleh pemilihan tipe data yang tepat.
5. Merancang database hendaknya memperhatikan apakah rancangan dapat
menampung data (record) sesuai yang dibutuhkan aplikasi.
Salah satu dari bentuk basis data yang banyak digunakan saat ini adalah SQL
(Structured Query Language) atau dalam hal ini yang penulis gunakan adalah
MySQL.
Menurut Prayudi dkk (2012:24) “SQL (Structured Query Language) adalah
sebuah bahasa yang dapat digunakan untuk mengakses data dalam basis data
relasional”. SQL merupakan suatu bahasa permintaan yang telah terstruktur.
Dikatakan terstruktur karena pada penggunaannya SQL memiliki beberapa aturan
yang yang telah distandarkan oleh asosiasi yang bernama ANSI. Saat ini hampir
semua semua server basis data yang ada telah mendukung bahasa ini untuk
melakukan manajemen datanya.
10
Menurut Nugroho (2013:1) “MySQL adalah Relational Database Management
System (RDBMS), yaitu database relasi yang memiliki perintah standar adalah SQL
(Structured Query Language)”. MySQL termasuk Database Server karena
mendukung perintah SQL secara penuh dan dapat diakses dalam jaringan (bisa
sebagai Server dan Client).
D. Model Pengembangan Perangkat Lunak
Model yang digunakan pada pengembangan perangkat lunak ini
menggunakan model waterfall. Model SDLC air terjun (waterfall) sering juga disebut
model linear (sequential linear) atau alur hidup klasik (classic life cycle). Model air
terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau
terurut dimulai dari analisis, perancangan dan pengujian. Rosa dan Shalahuddin
(2016:28)
Ilustrasi Model Waterfall dapat dilihat di Gambar II.1.
Sumber : Rosa dan Shalahuddin (2016:29)
Gambar II.1. Model Waterfall
Model waterfall Rosa dan Shalahuddin (2016:29) pada gambar diatas setiap
langkahnya akan dirinci sebagai berikut :
Analisis Perancanga
n
Pengujian
11
1. Analisa kebutuhan perangkat lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk mespesifikasikan
kebutuhan perangkat lunak agar dapat dipahami perangkat lunak seperti apa yang
dibutuhkan oleh user. Spesifikasi kebutuhan perangkat lunak pada tahap ini perlu
didokumentasikan.
2. Perancangan Sistem Perangkat Lunak
Perancangan sistem perangkat lunak adalah proses multi langkah yang fokus pada
Design pembuatan program perangkat lunak termasuk struktur data, arsitektur
perangkat lunak, representasi antar muka, dan prosedur pengodean.
3. Implementasi dan Pengujian Unit
Pengujian fokus pada perangkat lunak secara dari segi logic dan fungsional dan
memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk meminimalisir
kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai dengan yang
diinginkan.
Dari kenyataan yang terjadi sangat jarang model air terjun dapat dilakukan
sesuai alurnya karena sebagai berikut :
a. Perubahan spesifikasi perangkat lunak terjadi ditengah alur pengembangan.
b. Sangat sulit bagi pelanggan untuk mendefinisikan semua spesifikasi diawal alur
pengembangan. Pelanggan sering kali contoh (prototype) untuk menjabarkan
spesifikasi kebutuhan sistem lebih lanjut.
c. Pelanggan tidak mungkin bersabar mengakomodasi perubahan yang diperlukan di
akhir alur pengembangan.
12
Dengan berbagai kelemahan yang dimiliki model air terjun tapi model ini
telah menjadi dasar dari model-model yang lain dalam melakukan perbaikan model
pengembangan perangkat lunak.
Model air terjun sangat cocok digunakan kebutuhan pelanggan sudah sangat
dipahami dan kemungkinan terjadinya perubahan kebutuhan selama pengembangan
perangkat lunak kecil. Hal positif dari model air terjun adalah struktur tahap
pengembangan sistem jelas, dokumentasi dihasilkan di setiap tahap pengembangan,
dan sebuah tahap dijalankan setelah tahap sesbelumnya selesai dijalankan (tidak ada
tumpang tindih pelaksanaan tahap).
2.2. Teori Pendukung
A. Struktur Navigasi
Kehadiran struktur navigasi pada sebuah website sangat berguna. Karena
dengan adanya struktur navigasi maka akan dapat mempermudah dalam mengakses
halaman-halaman yang tersedia pada sebuah website.
Binanto (2010:268) mengatakan “Struktur navigasi adalah gabungan dari struktur
refrensi informasi situs web dan mekanisme link yang mendukung pengunjung untuk
melakukan penjelajahan situs”. Ada empat macam bentuk dasar struktur navigasi
yaitu:
1. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut yang
menampilkan satu demi satu tampilan layar secara berurut menurut urutannya.
Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman
13
sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau
dua halaman sesudahnya, pengguna akan melakukan navigasi secara berurutan,
dalam frame atau byte informasi satu ke yang lainnya.
Ilustrasi struktur navigasi linier dapat dilihat di Gambar II.2.
Sumber : Binanto (2010:269)
Gambar II.2. Navigasi Linier
2. Struktur Navigasi Hierarki
Struktur dasar ini disebut juga struktur linier dengan percabangan karena pengguna
melakukan navigasi disepanjang cabang pohon struktur yang terbentuk logika isi.
Ilustrasi struktur navigasi hirarki dapat dilihat di Gambar II.3.
Sumber : Binanto (2010:269)
Gambar II.3. Navigasi Hierarki
3. Struktur Navigasi Tidak Berurut (Non-Linier)
Struktur navigasi non-linier merupakan pengembangan dari struktur navigasi linier.
Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan yang
dibuat pada struktur non-linier ini berbeda dengan percabangan pada struktur hirarki,
karena pada percabangan non-linear ini walaupun terdapat percabangan tetap tiap-
14
tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan
Slave Page, pengguna akan melakukan navigasi dengan bebas melalui isi proyek
dengan tidak terikat dengan jalur yang sudah ditentukan sebelumnya.
Ilustrasi struktur navigasi non-linier dapat dilihat di Gambar II.4.
Sumber : Binanto (2010:270)
Gambar II.4. Navigasi non-linier
4. Struktur Navigasi Campuran (Composite)
Struktur navigasi pengguna akan melakukan navigasi dengan bebas (secara non-
linier), tetapi terkadang dibatasi presentasi linier film atau informasi penting dan pada
data yang paling terorganisasi secara logis pada suatu hirarki. Ilustrasi struktur
navigasi campuran dapat dilihat di Gambar II.5.
15
Sumber : Binanto (2010:270)
Gambar II.5. Navigasi Campuran
B. ERD (Enterprise Relationship Diagram)
1. Pengertian ERD
Pengertian Entity Relationship Diagram (ERD) secara umum adalah suatu model
untuk menjelaskan mengenai hubungan antar data dalam basis data berdasarkan
objek-objek dasar data yang memiliki hubungan antar relasi. Entity Relationship
Diagram oyi untuk memodelkan struktur data serta hubungan antar data, untuk dapat
menggambarkannya digunakan beberapa notasi serta simbol.
Menurut Sutanta (2011:91) “Entity Relationship Diagram (ERD) merupakan
suatu model data yang dikembangkan berdasarkan objek.” Entity Relationship
Diagram (ERD) digunakan untuk menjelaskan hubungan antar data dalam basis data
kepada pengguna secara logis. Entity Relationship Diagram (ERD) didasarkan pada
suatu persepsi bahwa real world terdiri atas obyek-obyek dasar tersebut.
2. Komponen ERD
Komponen Entity Relationship Diagram adalah sebagai berikut :
16
a. Entitas
Entitas merupakan suatu objek yang dapat dibedakan dari lainnya yang dapat
diwujudkan dalam basis data. Objek dasar dapat berupa orang, benda, atau hal yang
keterangannya perlu disimpan didalam basis data. Untuk menggambarkan sebuah
entitas digunakan aturan sebagai berikut :
1) Entitas dinyatakan dengan simbol persegi panjang.
2) Nama entitas dituliskan didalam simbol persegi panjang.
3) Nama entitas berupa kata benda, tunggal.
4) Nama entitas sedapat mungkin menggunakan nama yang mudah
dipahami dan dapat menyatakan maknanya dengan jelas.
b. Atribut
Atribut merupakan keterangan-keterangan yang terkait pada sebuah entitas yang
perlu disimpan dalam basis data. Atribut berfungsi sebagai penjelas pada sebuah
entitas. Untuk menggambarkan atribut digunakan aturan sebagai berikut:
1) Atribut digambarkan dengan simbol ellips.
2) Nama atribut dituliskan didalam simbol ellips.
3) Nama atribut merupakan kata benda, tunggal.
4) Nama atribut sedapat mungkin menggunakan nama yang mudah dipahami
dan dapat menyatakan maknanya dengan jelas.
c. Relasi
Relasi merupakan hubungan antara sejumlah entitas yang berasal dari himpunan
entitas yang berbeda. Aturan penggambaran relasi adalah sebagai berikut :
1) Relasi dinyatakan dengan simbol belah ketupat.
17
2) Nama relasi dituliskan didalam simbol belah ketupat
3) Nama relasi berupa kata kerja aktif.
4) Nama relasi sedapat mungkin menggunakan nama yang mudah
dipahami dan dapat menyatakan maknanya dengan jelas
3. LRS
Menurut Hasugian dan Shidiq (2012:608) memberikan batasan bahwa LRS
adalah “Sebuah model sistem yang digambarkan dengan sebuah ERD akan mengikuti
pola / aturan pemodelan tertentu dalam kaitannya dengan konversi ke LRS”.
LRS (Logical Record Structure) adalah representasi dari struktur record-record
pada tabel-tabel yang terbentuk dari hasil antar himpunan entitas. Logical record
structure dibentuk dengan nomor dari tipe record. Logical record structure terdiri
dari link-link diantara tipe record. Link ini menunjukan arah dari satu tipe record
lainnya. Banyak link dari LRS yang diberi tanda field-field yang kelihatan pada kedua
link tipe record.
Penggambaran LRS mulai dengan menggunakan model yang dimengerti. Dua
metode yang dapat digunakan, dimulai dengan hubungan kedua model yang dapat
dikonversikan ke LRS. Metode yang lain dimulai dengan ERD dan langsung
dikonversikan ke LRS.
a. One to One (1-1)
Tingkat hubungan ini menunjukkan hubungan satu ke satu, dinyatakan dengan satu
kejadian pada entitas pertama, dan hanya mempunyai satu hubungan dengan satu
kejadian pada entitas yang kedua dan sebaliknya.
b. One to Many (1-M)
18
Tingkat hubungan satu ke banyak adalah sama dengan banyak ke satu, tergantung
dari arah mana hubungan tersebut dilihat. Untuk satu kejadian pada entitas yang
pertama dapat mempunyai banyak hubungan dengan kejadian pada entitas yang
kedua. Sebaliknya, satu kejadian pada entitas yang kedua hanya dapat mempunyai
satu hubungan dengan satu kejadian pada entitas yang pertama.
c. Many to Many (M-M)
Tingkat hubungan banyak ke banyak terjadi jika tiap kejadian pada sebuah entitas
akan mempunyai banyak hubungan dengan kejadian pada entitas lainnya, dilihat dari
sisi entitas yang pertama maupun dilihat dari sisi yang kedua.
C. Pengujian Web
Dalam testing dan implementasi yang akan dipergunakan yaitu Pengujian
Black-Box. Menurut Sukamto dan Shalahuddin (2013:275) “Black-Box Testing
(pengujian kotak hitam) yaitu menguji perangkat lunak dari segi spesifikasi
fungsional tanpa menguji desain kode program”. Pengujian dimaksudkan untuk
mengetahui apakah fungsi-fungsi masukan dan keluaran dari perangkat lunak sesuai
dengan spesifikasi yang dibutuhkan.
Pengujian kotak hitam dilakukan dengan membuat kasus uji yang bersifat
mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai dengan
spesifikasi yang dibutuhkan. Kasus ini yang dibuat untuk melakukan pengujian kotak
hitam harus dibuat dengan kasus benar atau kasus salah, misalkan untuk kasus proses
login maka kasus uji yang dibuat adalah :
19
a. Jika user mamasukan nama pemakai (username) dan kata sandi (password) yang
benar.
b. Jika user memasukan nama pemakai (username) dan kata sandi (password) ang salah,
misalnya nama pemakai benartapi sandi salah atau sebaliknya, atau keduanya salah.
Ciri-ciri dari Black-Box Testing sebagai berikut :
a. Black-Box Testing berfokus pada kebutuhan fungsional pada software berdasarkan
pada spesifikasi kebutuhan dari software.
b. Black-Box Testing bukan teknik alernatif dari pada white-box testing. Lebih dari pada
itu, ia merupakan pendekatan pelengkap dalam mencakup error dengan kelas yang
berbeda dari metode white-box testing
c. Black-Box Testing merupakan pengujian tanpa pengetahuan detil struktur internal
dari sistem atau komponen yang dites, juga disebut sebagai behavioral testing,
specification-based testing, input atau output testing dan fungsional testing.
20
BAB III
PEMBAHASAN
3.1. Tinjauan Perusahaan
3.1.1. Sejarah Perusahaan
Reka Gadget Store merupakan salah satu perusahaan yang bergerak di
bidang perdagangan gadget dan komputer. Perusahaan ini berdiri sejak tanggal 21
Februari 2008. Lokasi Reka Gadget Store terbilang strategis yakni berada di wilayah
Depok. Reka Gadget Store didirikan karena memiliki berbagai tujuan yakni ingin
menjadikan produk gadget dan teknologi sebagai peluang usaha dan menciptakan
lapangan pekerjaan bagi orang lain. Awalnya, Reka Gadget Store hanya menjual
beberapa barang produk gadget dan aksesoris komputer saja, terutama untuk jenis
Handphone dan komputer desktop. Akan tetapi saat ini, Reka Gadget Store
memperluas jenis produk hingga menjual speaker audio, printer, notebook dan lain-
lain. Oleh karena itu, Reka Gadget Store berupaya sekali untuk melakukan berbagai
cara dalam proses penjualan terhadap produk yang dipasarkan. Salah satunya yakni
dengan strategi marketing atau pemasaran online melalui sistem komputerisasi yang
bisa diakses oleh semua orang.
21
3.1.2. Struktur Organisasi
Struktur Organisasi Reka Gadget Store dapat dilihat pada gambar III.1
Sumber: Reka Gadget Store (2017)
Gambar III. 1
Struktur Organisasi Reka Gadget Store
Fungsi dan Tanggung Jawab
Berdasarkan sturktur organisasi yang terdapat pada gambar III.1 dapat
dijelaskan mengenai tugas dan tanggung jawab dari masing-masing bagian, yakni:
a. Pemilik (Owner)
Tugas dan tanggung jawab pemilik antara lain:
1. Menyediakan sarana prasarana dan modal produksi
2. Menentukan kebijakan atau aturan yang berlaku di perusahaan
22
b. Manager
Tugas dan tanggung jawab manager antara lain:
1. Merencanakan target produksi perusahaan yang akan dicapai
2. Menyusun anggaran atau budgeting perusahaan
3. Melakukan inovasi terhadap produk gadget dan teknologi yang akan
dijual.
c. Supervisor
Tugas dan tanggung jawab supervisor antara lain:
1. Membantu manager dalam melakukan tugas operasional sehari-hari
2. Melakukan control dan evaluasi terhadap kinerja masing-masing staff
3. Menganalisa laporan hasil penjualan produk yang sudah terjual
d. Staff Administrasi
Tugas dan tanggung jawab staff administrasi antara lain:
1. Mengarsipkan segala bentuk kegiatan administratif perusahaan
2. Menyediakan berbagai keperluan alat tulis kantor bagi perusahaan
e. Staff Keuangan
Tugas dan tanggung jawab staff keuangan antara lain:
1. Mengatur pemasukan dan pengeluaran keuangan perusahaan
2. Melaksanakan anggaran atau budgeting perusahaan yang sudah ditetapkan
3. Membuat laporan keuangan perusahaan
f. Staff Marketing
Tugas dan tanggung jawab staff marketing antara lain:
23
1. Merencanakan strategi penjualan
2. Memberikan informasi secara lengkap terhadap produk gadget dan
teknologi tersebut seperti harga, model, dll.
g. Staff IT
Tugas dan tanggung jawab staff IT antara lain:
1. Melakukan pemeliharaan perangkat komputer Perusahaan.
2. Melakukan guidence produk ke konsumen.
3.2. Analisis Kebutuhan
3.2.1 Pengguna
Dalam Toko Online Reka Gadgets Store yang dibuat ini memiliki tiga jenis
pengguna yaitu :
a. Admin
1) Admin dapat login ke halaman admin dengan cara mengisi username dan
password.
2) Admin dapat menambah, mengubah dan menghapus produk.
3) Admin dapat mengubah status order.
4) Admin dapat menambah kategori produk.
5) Admin dapat menambah melihat komentar dan file konfirmasi.
b. User / Member / Customer
1) User membeli produk.
2) User dapat memberikan komentar pada produk.
3) User dapat melihat keseluruhan produk di katalog.
24
4) User dapat upload file konfirmasi.
5) User dapat melihat informasi kontak toko.
c. Pengunjung Biasa / Pengguna Belum Terdaftar
1) Pengunjung dapat melihat keseluruhan produk di katalog.
2) Pengunjung dapat mendaftar menjadi user / member.
3) Pengunjung dapat melihat informasi kontak took.
3.2.2 Data Untuk Kebutuhan Sistem
Dalam Toko Online Reka Gadgets Store yang dibuat ini membutuhkan data-data
dari pihak toko seperti :
1) Data pendaftaran member untuk pengunjung yang berminat. (nama,
alamat, telepon, email, username dan password).
2) Daftar produk yang dijual pihak toko.
3) Laporan transaksi pembelian dan penjualan produk dari pihak toko.
4) Data harga jasa pengiriman yang digunakan toko.
5) Data informasi kontak Reka Gadgets Store seperti alamat, nomor telepon
yang bisa dihubungi dan informasi detail lainnya.
6) Bukti pembayaran dari konsumen setelah melakukan pembayaran terhadap
produk yang dibeli.
3.2.3 Kebutuhan Sistem Untuk Pengguna
Dalam Toko Online Reka Gadgets Store yang dibuat ini kebutuhan system
pengguna seperti :
1) Menyediakan form pendaftaran.
2) Menyediakan layanan komentar pada produk.
25
3) Menyediakan layanan transaksi pembelian produk.
4) Memberikan infomasi tentang produk-produk toko.
5) Memberikan panduan cara pembelian produk.
3.3. Perancangan Perangkat Lunak
3.3.1. Rancangan Antar Muka
Rancangan antar muka (Interface) dimaksudkan untuk memudahkan
pengguna toko online atau website ini diharapkan dapat digunakan oleh banyak
pengguna dari berbagai latar belakang dan juga karena tidak semua pengguna adalah
orang yang mengerti dan ahli dalam bidang pengoperasian komputer. Berikut adalah
rancangan tampilan antar muka dari toko online Reka Gadgets Store.
1. Rancangan Tampilan Halaman Untuk Admin
A. Rancangan Halaman Login Admin
Nama Program : login admin
Akronim : cek_login.php
Fungsi : Sebagai halaman akses admin untuk mengelola
website
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.2
Proses Program :
1) Mengetikan alamat /url_website/paneladmin khusus untuk dapat mengakses
halaman admin
2) Mengisi form login yang ada yakni dengan menginput username dan
password admin yang benar/sesuai.
26
Gambar III.2
Rancangan Halaman Login Admin
B. Rancangan Halaman Panel Admin
Nama Program : Panel Admin
Akronim : home.php
Fungsi : Sebagai halaman awal saat admin berhasil melakukan
login
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.3
Proses Program :
27
1) Setelah admin berhasil login, maka akan muncul halaman beranda sebagai
tampilan pertama halaman admin
2) Di halaman beranda ini tersedia menu dashboard, cara pembelian,
manajemen produk, komentar dan menu transaksi.
Gambar III.3
Rancangan Halaman Panel Admin
C. Rancangan Menu Cara Pembelian
Nama Program : Cara Pembelian
Akronim : carabeli.php
Fungsi : Sebagai halaman kelola cara pembelian.
28
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.4
Proses Program :
1) Admin akan meng-klik menu cara pembelian pada kolom menu link bagian
kiri.
2) Lalu akan muncul menu cara pembelian pada kolom bagian kanan.
3) Pada menu ini admin dapat mengubah atau memperbarui tata cara pembelian
untuk ditampilkan di website.
Gambar III.4
Rancangan Menu Cara Pembelian Admin
29
D. Rancangan Menu Ganti Password Admin
Nama Program : Ganti Password
Akronim : gantipass.php
Fungsi : Sebagai menu ubah password admin.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.5
Proses Program :
1) Admin akan meng-klik menu cara ubah password pada kolom menu link
bagian kiri.
2) Lalu akan muncul menu ubah password pada kolom bagian kanan.
3) Pada menu ini admin dapat mengubah password lama jika dibutuhkan untuk
alasan keamanan.
30
Gambar III.5
Rancangan Menu Ganti Password Admin
E. Rancangan Menu Data Produk
Nama Program : Data Produk
Akronim : produk.php
Fungsi : Sebagai halaman kelola data master produk.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.6
Proses Program :
31
1) Admin akan meng-klik menu manajemen produk pada kolom menu link
bagian kiri.
2) Lalu akan muncul menu dropdown pilihan, admin akan memilih menu
produk.
3) Pada menu ini admin dapat mengelola data produk yang terdiri dari nama
produk, harga dan stok. Admin juga bisa melakukan aksi ingin mengeditnya
atau menghapusnya.
Gambar III.6
Rancangan Menu Data Produk
32
F. Rancangan Menu Data Subproduk
Nama Program : Data Subproduk
Akronim : subproduk.php
Fungsi : Sebagai menu kelola gambar data produk.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.7
Proses Program :
1) Admin akan meng-klik menu manajemen produk pada kolom menu link
bagian kiri.
2) Lalu akan muncul menu kategori pada kolom bagian kanan.
3) Pada menu produk admin hanya menginput data detail produknya saja tidak
dengan gambar produknya, setelah admin menambahkan suatu data produk,
makan produk tersebut tidak ada gambarnya pada halaman menu ini.
Kemudian admin dapat menambahkan gambar produk tersebut dengan aksi
mengeditnya. Admin juga dapat memperbaruhi gambar produk dan
menghapusnya.
33
Gambar III.7
Rancangan Menu Data Subproduk
G. Rancangan Menu Data Kategori
Nama Program : Data Kategori
Akronim : kategori.php
Fungsi : Sebagai menu kelola data master kategori.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.8
Proses Program :
34
1) Admin akan meng-klik menu kategori pada kolom menu link bagian kiri.
2) Lalu akan muncul menu dropdown pilihan, admin akan memilih menu
subproduk.
3) Pada menu ini admin dapat mengelola data kategori produk, yang mana
nanti produk dapat digolongkan bedasarkan kategori
Gambar III.8
Rancangan Menu Data Kategori
35
H. Rancangan Menu Jasa Pengiriman
Nama Program : Data Ongkos Kirim
Akronim : jasakirim.php
Fungsi : Sebagai menu kelola data ongkos kirim pengiriman.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.9
Proses Program :
1) Admin akan meng-klik menu manajemen produk pada kolom menu link
bagian kiri.
2) Lalu akan muncul menu dropdown pilihan, admin akan memilih menu jasa
pengiriman.
3) Pada menu ini admin dapat mengelola data ongkos kirim, yang mana nanti
data tersebut akan menentukan ongkos kirim pembelian produk oleh user
tergantung alamat kota tempat tinggal user.
36
Gambar III.9
Rancangan Menu Data Ongkos Kirim
I. Rancangan Menu Data Komentar
Nama Program : Data Komentar
Akronim : datakomentar.php
Fungsi : Sebagai menu kelola data komentar user.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.10
Proses Program :
37
1) Admin akan meng-klik menu manajemen produk pada kolom menu link
bagian kiri.
2) Lalu akan muncul menu kelola data komentar pada kolom bagian kanan.
3) Pada menu ini admin dapat mengelola data komentar yang berisi komentar-
komentar user tentang produk, yang mana telah diinput pada kolom komentar
setiap produk.
Gambar III.10
Rancangan Menu Data Komentar
38
J. Rancangan Menu Order Masuk
Nama Program : Order Masuk
Akronim : order.php
Fungsi : Sebagai Menu kelola setiap order masuk dan
mengubah status order user.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.11
Proses Program :
1) Admin akan meng-klik menu transaksi pada kolom menu link bagian kiri.
2) Lalu akan muncul menu dropdown pilihan, admin akan memilih menu order
masuk.
3) Pada menu ini admin dapat mengelola data order masuk dari penjualan
produk, Admin juga dapat mengubah status order untuk setiap order yang
telah dibayar user dan order yang produknya siap dikirim.
39
Gambar III.11
Rancangan Data Order Masuk
K. Rancangan Halaman File Konfirmasi Admin
Nama Program : File Konfirmasi
Akronim : download_kofirmasi.php
Fungsi : Sebagai Menu pencarian file konfirmasi yang
diupload user.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.12
Proses Program :
40
1) Admin akan meng-klik menu transaksi pada kolom menu link bagian kiri.
2) Lalu akan muncul menu dropdown pilihan, admin akan memilih menu file
konfirmasi
3) Pada halaman ini dapat mencari file konfirmasi yang telah diupload oleh
user.
Gambar III.12
Rancangan Halaman File Konfirmasi Admin
2. Rancangan Tampilan Halaman Untuk Pengunjung
A. Rancangan Tampilan Halaman Home Website
Nama Program : Index Home
Akronim : home.php
Fungsi : Sebagai halaman utama atau awal saat pengunjung
mengunjungi situs
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.13
41
Proses Program :
1) User mengetikan alamat /url_website dari toko online Reka Gadgets Store
2) Setelah di tekan enter maka akan tampil halaman beranda yang merupakan
halaman awal dari website Reka Gadgest Store dan terdapat beberapa menu
link website ditampilannya.
Gambar III.13
Rancangan Halaman Home Website
42
B. Rancangan Tampilan Halaman Kategori
Nama Program : Kategori
Akronim : media .php
Fungsi : Sebagai halaman kategori yang berisikan produk-
produk sesuai kategori.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.14
Proses Program :
1) Pengunjung mengarahkan cursor ke menu link kategori pada bagian header
website.
2) Setelah diarahkan maka akan muncul menu dropdown pilihan kategori
produk pada menu kategori, seperti gambar berikut ini.
Gambar III.14
Rancangan Halaman Kategori Produk
43
C. Rancangan Tampilan Halaman Cara Pembelian
Nama Program : Cara Pembelian
Akronim : cara-beli.php
Fungsi : Sebagai halaman tata cara pembelian
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.15
Proses Program :
1) Pengunjung meng-klik menu cara pembelian pada bagian menu link.
2) Setelah di-klik maka akan tampil menu cara pembelian, disana pengunjung
akan bisa melihat informasi tata cara pembelian.
Gambar III.15
Rancangan Halaman Cara Pembelian
44
D. Rancangan Tampilan Halaman Produk
Nama Program : Produk
Akronim : produk_list.php
Fungsi : Sebagai halaman prdouk yang berisikan informasi
detail dan dekripsi produk.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.16
Proses Program :
1) Pengunjung memilih produk yang ingin dilihat.
2) Setelah pengunjung memilih produk, lalu pengunjung akan meng-klik
produk tersebut. Kemudian pengunjung akan diarahkan ke halaman produk,
seperti gambar berikut ini.
45
Gambar III.16
Rancangan Halaman Produk
E. Rancangan Tampilan Halaman Pendaftaran
Nama Program : Pendaftaran
Akronim : daftar.php
Fungsi : Sebagai halaman form pendaftaran pengunjung biasa
yang ingin menjadi user.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.17
46
Proses Program :
1) Bagi user yang ingin mendaftar menjadi anggota maka user dapat meng-klik
tombol Daftar.
2) Setelah diklik, maka akan tampil halaman form pendaftaran anggota yang
dapat diisi oleh user/pengunjung seperti gambar berikut ini
Gambar III.17
Rancangan Halaman Pendaftaran
47
F. Rancangan Tampilan Halaman Contact
Nama Program : Kontak
Akronim : contact.php
Fungsi : Sebagai halaman form pendaftaran pengunjung biasa
yang ingin menjadi user.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.18
Proses Program :
1) Bagi pengunjung yang ingin menanyakan informasi terkait tentang informasi
detail toko atau seputar produk, user bisa meng-klik menu contact.
2) Setelah diklik, maka akan tampil halaman contact with us, dimana
pengunjung bisa menghubungi pihak toko dengan mengisikan nama, email
dan pesan yang ingin disampaikan.
Gambar III.18
Rancangan Halaman Contact
48
3. Rancangan Tampilan Halaman Untuk User
Selain kelima rancangan pengunjung tadi, user memiliki rancangan yang lebih
banyak dibandingkan pengunjung. User adalah pengunjung yang telah mendaftar
pada form pendaftaran. Berikut adalah rancangan tampilan halaman untuk user
yang tidak ada pada pengunjung.
A. Rancangan Halaman Keranjang Belanja / shopingchart
Nama Program : Keranjang Belanja
Akronim : cart.php
Fungsi : Sebagai halaman keranjang belanja, tempat melihat
detail daftar produk yang telah dibeli user.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.19
Proses Program :
1) User telah melakukan pembelian produk, maka sebelum checkout.
2) User akan diarahkan ke menu halaman keranjang belanja. Disana user dapat
melihat informasi total harga dan produk yang dibeli. Seperti gambar berikut
ini.
49
Gambar III.19
Rancangan Halaman Keranjang Belanja
B. Rancangan Halaman Checkout
Nama Program : Checkout
Akronim : simpantransaksi.php
Fungsi : Sebagai halaman detail order yang akan dibayar user
setelah memilih dan belanja produk.
Bahasa Program : PHP
50
Bentuk Tampilan : Gambar III.20
Proses Program :
1) User telah melakukan pembelian produk.
2) User akan diarahkan ke menu keranjang belanja.
3) Kemudian user akan meng-klik tombol checkout, lalu akan keluar rancangan
seperti gambar berikut ini.
Gambar III.20
Rancangan Halaman Checkout
51
C. Rancangan Halaman Status Order User
Nama Program : Status Order
Akronim : order_user.php
Fungsi : Sebagai halaman mengecek informasi status order.
Bahasa Program : PHP
Bentuk Tampilan : III.21
Proses Program :
1) User meng-klik menu Halo User pada bagian pojok kanan atas website.
2) User akan diarahkan ke halaman Status order, di halaman tersebut terdapat
dua menu, status order anda dan file konfirmasi.
3) User memilih menu status order dengan meng-kliknya.
4) Setelah memilihnya user akan melihat informasi detail status order, dan juga
tercatat data history transaksi user selama pembelian.
52
Gambar III.21
Rancangan Halaman Status Order
D. Rancangan Halaman Konfirmasi
Nama Program : Konfirmasi
Akronim : form_upload.php
Fungsi : Sebagai halaman konfirmasi pembayaran, user akan
meng-upload file konfirmasi bukti pembayaran.
Bahasa Program : PHP
Bentuk Tampilan : Gambar III.22
Proses Program :
53
1) User meng-klik menu Halo User pada bagian pojok kanan atas website.
2) User akan diarahkan ke halaman Status order, di halaman tersebut terdapat
dua menu, status order anda dan file konfirmasi.
3) User memilih menu file konfirmasi dengan meng-kliknya.
4) User akan diarahkan ke halaman menu konfirmasi, disitu user akan meng-
upload bukti pembayaran dan mencatumkan keterangan nama user dan nomor
order. Seperti gambar berikut ini.
Gambar III.22
Rancangan Halaman Konfirmasi User
54
3.3.2. Rancangan Basis Data
A. Entity Relationship Diagram (ERD)
Gambar III.23
Gambar Rancangan ERD
55
B. Logical Relational Structure (LRS)
Gambar III.24
Gambar Rancangan LRS
C. Spesifikasi FIle
Disini akan dijelaskan tentang gambaran rancangan pembuatan situs yang
terperinci tersusun dari sub-sub bab dimulai dari spesifikasi bentuk masukan dan
keluaran spesifikasi file.
a. Spesifikasi Tabel admin
Nama File : Admin
Akronim : Admin
Fungsi : Untuk menyimpan data admin
Tipe File : File Master
56
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang record : 56 Karakter
Kunci Field : id_admin
Software : Mysql
Tabel III.1 Spesifikasi Tabel Admin
No Nama Field Type Size Keterangan
1 Id_admin Int 6 Primary Key
2 Username Varchar 25 Username
3 Password Varchar 25 Password
b. Spesifikasi Tabel Kategori
Nama File : Kategori
Akronim : Kategori
Fungsi : Untuk menyimpan data kategori produk
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang record : 30 Karakter
Kunci Field : id_kategori
Software : Mysql
57
Tabel III.2 Spesifikasi Tabel kategori
No Nama Field Type Size Keterangan
1 id_kategori Int 5 Primary Key
2 nama_kategori Varchar 25 Nama kategori
c. Spesifikasi Tabel Customer
Nama File : Customer
Akronim : Customer
Fungsi : Untuk menyimpan data customer
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang record : 150 Karakter
Kunci Field : id_customer
Software : Mysql
Tabel III.3 Spesifikasi Tabel customer
No Nama Field Type Size Keterangan
1 id_customer Int 5 Primary Key
2 Password Varchar 25 password
3 nama_lengkap Varchar 50 Nama lengkap
4 Alamat Text alamat
5 Email Varchar 50 email
58
6 Telpon Varchar 20 telpon
d. Spesifikasi Tabel Produk
Nama File : Produk
Akronim : Produk
Fungsi : Untuk menyimpan data produk
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang record : 145 Karakter
Kunci Field : id_produk
Software : Mysql
Tabel III.4 Spesifikasi Tabel produk
No Nama Field Type Size Keterangan
1 id_produk Int 5 Primary Key
2 id_kategori Int 5 Foreign Key
3 nama_produk Varchar 100 Nama produk
4 Deskripsi Text Deskripsi
5 Harga Int 20 Harga
6 Stok Int 5 stok
7 Berat decimal 5 berat
8 Diskon Int 5 diskon
59
e. Spesifikasi Tabel Order
Nama File : Order
Akronim : Order
Fungsi : Untuk menyimpan data pesanan / order
Tipe File : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang record : 45 Karakter
Kunci Field : id_order
Software : Mysql
Tabel III. 5 Spesifikasi Tabel order
No Nama Field Type Size Keterangan
1 id_orders Int 5 Primary Key
2 status_order Varchar 25 Status order
3 tgl_order Date Tanggal order
4 jam_order Time Jam order
5 id_customer Int 5 Foreign Key
6 total Int 10 Total Order
f. Spesifikasi Tabel Detail Order
Nama File : Detail Order
Akronim : Detail Order
Fungsi : Untuk menyimpan data detail pesanan / order
60
Tipe File : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang record : 25 Karakter
Kunci Field : -
Software : Mysql
Tabel III.6 Spesifikasi Tabel detail_order
No Nama Field Type Size Keterangan
1 id_order Int 5 Foreign Key
2 id_produk Int 5 Foreign Key
3 jumlah Int 5 Jumlah Order
4 subtotal Int 10 Subtotal Order
3.3.3. Rancangan Struktur Navigasi
Rancangan struktur navigasi digunakan untuk menggambarkan secara garis
besar isi dari seluruh website bagaimana menggambarkan hubungan antara isi-isi
website atau portal tersebut. Struktur navigasi website atau toko online ini adalah
struktur navigasi hirarki. Melalui struktur navigasi ini terlihat bagaimana isi dan
susunan dari website secara menyeluruh.
61
A. Struktur Navigasi Administrator
Gambar III.25
Struktur Navigasi Untuk Admin
B. Struktur Navigasi Pengunjung
Gambar III.26
Struktur Navigasi Untuk Pengunjung
62
C. Struktur Navigasi User
Gambar III.27
Struktur Navigasi Halaman User
3.4. Implementasi dan Pengujian Unit
3.4.1. Implementasi
A. Implementasi Rancangan Antar Muka Admin
Implementasi rancangan antar muka pada toko online reka gadgets store
berdasarkan hasil rancangan antar muka admin.
1. Tampilan Halaman Login Panel Admin
Administrator harus melakukan login terlebih dahulu untuk dapat
menggunakan menu-menu yang tersedia. Jika login berhasil, maka menu-menu yang
tersedia akan ditampilkan.
63
Gambar III.28
Tampilan Halaman Login Admin
2. Tampilan Halaman Dashboard Admin
Ini adalah halaman ketika admin berhasil login. Admin akan diarahkan ke
beranda yang berisi dashboard panel admin.
64
Gambar III.29
Tampilan Halaman Dashboard Admin
3. Tampilan Menu Cara Pembelian di Panel Admin
Pada menu ini admin bisa mengedit tata cara pembelian yang akan
ditampilkan pada website nya.
65
Gambar III.30
Tampilan Menu Cara Pembelian Admin
4. Tampilan Menu Ganti Password di Panel Admin
Pada menu ini admin akan mengubah password admin yang lama.
Gambar III.31
Tampilan Menu Ganti Password Admin
66
5. Tampilan Menu Kelola Data Produk di Panel Admin
Pada menu ini admin dapat mengelola data produk. Admin dapat
menambahkan produk baru, menghapus produk lama serta mengubahnya.
Gambar III.32
Tampilan Menu Data Produk
6. Tampilan Menu Kelola Data Subproduk di Panel Admin
Pada menu ini admin mengelola gambar untuk produk yang ditampilkan.
67
Gambar III.33
Tampilan Menu Data Subproduk
7. Tampilan Menu Kelola Data Kategori di Panel Admin
Pada menu ini admin mengelola kategori untuk setiap produk. Admin dapat
menambahkan kategori baru, menghapus kategori lama serta mengubahnya.
68
Gambar III.34
Tampilan Menu Data Kategori
8. Tampilan Menu Kelola Data Ongkos Kirim di Panel Admin
Pada menu ini admin mengelola data ongkos kirim untuk setiap pengiriman
order produk. Admin dapat menambahkan data ongkos kirim baru, menghapus
data ongkos kirim lama serta mengubahnya.
Gambar III.35
Tampilan Menu Data Ongkos Kirim
69
9. Tampilan Menu Kelola Data Komentar di Panel Admin
Pada menu ini admin mengelola data komentar yang telah dikirim oleh user,
pada setiap kolom komentar produk.
Gambar III.36
Tampilan Menu Data Komentar
10. Tampilan Menu Kelola Data Order Masuk
Pada menu ini admin mengelola data order masuk setiap pembelian produk
oleh user. Admin dapat melihat dan mengubah status order masuk kepada user.
Gambar III.37
70
Tampilan Menu Data Order Masuk
11. Halaman File Konfirmasi Admin
Pada halaman ini admin dapat mencari file bukti pembayaran order user untuk
keperluan status konfirmasi order.
Gambar III.38
Tampilan Halaman File Konfirmasi Admin
B. Implementasi Rancangan Antar Muka Pengunjung
Implementasi rancangan antar muka pada toko online reka gadgets store
berdasarkan hasil rancangan antar muka pengunjung.
1. Halaman Home Website
71
Halaman ini adalah halaman utama saat saat mengunjungi website.
Gambar III.39
Tampilan Halaman Home Website
2. Halaman Kategori Produk
Pada halaman ini user bisa melihat berbagai jenis kategori dan user juga dapat
melihat popular product pada bagian footer nya.
72
Gambar III.40
Tampilan Halaman Kategori Produk
3. Halaman Cara Pembelian User
Pada halaman ini user bisa melihat tata cara pembelian pada toko online reka
gadgetshop.
73
Gambar III.41 Tampilan Halaman Cara Pembelian
4. Halaman Produk
Ketika user meng-klik salah satu gambar barang maka user akan diarahkan
pada halaman beli barang, dimana user akan dapat memesan dan membeli barang
tersebut dan user juga bisa melihat deskripsi barang tersebut secara lengkap.
74
Gambar III.42
Tampilan Halaman Produk
5. Halaman Pendaftaran.
Pengunjung yang belum terdaftar dapat mendaftar di form pendaftaran, dengan
meng-klik tombol login lalu pilih daftar baru. Berikut tampilan form
pendaftaran user.
75
Gambar III.43
Tampilan Halaman Form Pendaftaran
6. Halaman Pendaftaran.
Jika ada pertanyaan seputar informasi produk maupun toko, pengunjung dapat
menghubungi pihak Reka Gadgets Store pada halaman contact. Berikut
halaman contact with us.
76
Gambar III.44
Tampilan Halaman Contact
C. Implementasi Rancangan Antar Muka User
Berbeda dengan rancangan antar muka pengunjung, ada beberapa halaman dan
menu yang tidak ada di rancangan pengunjung tetapi ada di rancangan antar muka
user. Untuk mengakses rancangan antar muka user, pengunjung harus terdaftar
terlebih dahulu dan melakukan login.
77
1. Halaman Keranjang Belanja / shopchart
Setelah meng-klik tombol beli pada halaman beli barang, user akan diarahkan
ke halaman shopchart. Pada halaman ini user akan melakukan pembelian dan
membayar sejumlah dana sesuai keterangan barang yang dibeli.
Gambar III.45
Tampilan Halaman Keranjang Belanja
2. Halaman Detail Checkout
Setelah melakukan checkout user akan mendapatkan detail order yang akan
dibayar serta ongkos kirim dan alamat pengiriman user.
78
Gambar III.46
Tampilan Halaman Detail Checkout
3. Halaman Status Order User
Pada halaman ini user dapat melihat perkembangan status barang yang telah
dibeli, apakah barang sudah dikirim atau baru tahap konfirmasi pembayaran.
79
Gambar III.47
Tampilan Halaman Status Order User
4. Halaman File Konfirmasi
Pada halaman ini user akan melakukan konfirmasi pembayaran dengan
melampirkan bukti pembayaran dari order yang telah dilakukan.
Gambar III.48
Halaman File Konfirmasi
80
3.4.2. Pengujian Website
Dalam pembuatan website informasi dan penjualan aksesoris komputer pada
toko online Gadgets Store ini, diperlukan pengujian-pengujian tertentu untuk menguji
kemampuan dari sistem yang terdapat dalam aplikasi ini. Pengujian dilakukan dengan
metode Black Box Testing, dimana program diuji coba secara langsung untuk
mengetahui bug-bug yang terdapat dalam aplikasi.
Berikut adalah beberapa hasil pengujian terhadap website informasi dan
penjualan aksesoris komputer pada toko online Reka Gadgets Store :
A. Pengujian Terhadap Form Login
Tabel III.7
Hasil Pengujian Black Box Testing Halaman Login User
No Skenario
Pengujian Test Case
Hasil Yang
Diharapkan
Hasil
Pengujian Kesimpulan
1
Username dan
Password
username :
(kosong)
Sistem akan
menolak
Sesuai
Harapan Valid
tidak diisi
kemudian klik
tombol masuk
password:
(kosong)
akses user dan
akan
menampilkan
"Login Gagal,
silahkan isi
Username dan
Password anda
dengan Benar
"
2
Mengetikkan
username
username :
ikbal
Sistem akan
menolak
Sesuai
Harapan Valid
tetapi
password tidak
password:
(kosong)
akses user dan
akan
diisi kemudian
klik
menampilkan "
Login Gagal,
silahkan isi
Username dan
81
Password anda
dengan Benar
tombol Masuk "
3
Username
benar dan
username :
ikbal (benar)
Sistem akan
menolak
Sesuai
Harapan Valid
password salah
kemudian
password:
153(salah)
akses user dan
akan
menampilkan "
Login Gagal,
silahkan isi
Username dan
Password anda
dengan Benar”
4 Mengetikkan
username :
bale (salah)
Sistem akan
menolak
Sesuai
Harapan Valid
Username
salah dan
password
benar
kemudian klik
tombol Login
password:
123(benar)
akses user dan
akan
menampilkan "
Login Gagal,
silahkan isi
Username dan
Password anda
dengan Benar”
5
Mengetikkan
Username
username :
ikbal (benar)
Sistem
menerima akses
Sesuai
Harapan Valid
dan Password
dengan
password:
123(benar)
login dan
menampilkan
(Selamat
datang Ikbal,
klik OK untuk
melanjutkan
belanja)
kemudian
data yang
benar
Kemudian
Klik Tombol
Login
langsung masuk
ke Halaman
Beranda
82
Tabel III.8
Hasil Pengujian Black Box Testing Halaman Login Admin
No Skenario
Pengujian Test Case
Hasil Yang
Diharapkan
Hasil
Pengujian Kesimpulan
1
Username dan
Password
username :
(kosong)
Sistem akan
menolak
Sesuai
Harapan Valid
tidak diisi
kemudian
password:
(kosong)
akses admin
dan akan
klik tombol
masuk
menampilkan
"Username
dan Password
Masing
Kosong
"
2
Mengetikkan
username
username :
admin
Sistem akan
menolak
Sesuai
Harapan Valid
tetapi
password
tidak
password:
(kosong)
akses admin
dan akan
diisi kemudian
klik
menampilkan
"Username
atau password
anda salah
tombol Masuk "
3
Username
kosong dan
username :
(kosong)
Sistem akan
menolak
Sesuai
Harapan Valid
password diisi
kemudian
password:
admin(benar)
akses admin
dan akan
klik Masuk
menampilkan
"Username
atau password
anda salah
"
4
Mengetikkan
salah satu
username :
admi (salah)
Sistem akan
menolak
Sesuai
Harapan Valid
kondisi salah
pada
password:
admin(benar)
akses admin
dan akan
83
username atau
password
menampilkan
"Username
atau password
anda salah
kemudian klik
Masuk "
5
Mengetikkan
Username
username :
admin(benar)
Sistem
menerima
akses
Sesuai
Harapan Valid
dan Password
dengan
password:
admin(benar)
login dan
kemudian
data yang
benar
langsung
masuk ke
kemudian klik
Masuk Beranda
B. Pengujian Terhadap Form Daftar Member
Tabel III.9
Hasil Pengujian Black Box Testing Halaman Daftar Member
No Skenario
Pengujian Test Case
Hasil Yang
Diharapkan
Hasil
Pengujian Kesimpulan
1
Jika ada salah
satu field /
kolom dari
form daftar
yang belum
diisi
kemudian di
klik Daftar
Nama lengkap :
John Stamp
username :
Jono33
password :
jono33
Alamat lengkap :
(kosong)
email : (kosong)
telepon :
(kosong)
kota tujuan:
(kosong)
Sistem akan
menolak
akses dan
akan
menampilkan
"Data yang
anda isikan
belum
lengkap
"
Sesuai
Harapan
Valid
2
Semua field /
kolom yang
ada pada form
Nama
Lengkap:John
Stamp
Sistem
menerima
akses
Sesuai
Harapan
Valid
84
Daftar diisi
semua dan
kemudian klik
daftar
Username:
jono33
Password:
jono33
Alamat lengkap :
Kwitang no.1
Email:
Telepon:
0811123232
Kota tujuan:
Jakarta
Pendaftaran
Dan
menampilkan
“Pendaftaran
berhasil, Klik
Ok untuk
melanjutkan”
kemudian
Langsung
diarahkan
kembali
halaman
beranda
C. Pengujian Terhadap Halaman Kelola Data Master
Tabel III.10
Hasil Pengujian Black Box Testing Halaman Data Produk
No Skenario
Pengujian Test Case
Hasil Yang
Diharapkan
Hasil
Pengujian Kesimpulan
1
Jika salah
satu
kolom
produk
tidak diisi
kemudian
di klik
tambah
Nama Produk:
Handphone Esia
harga: 500000
stok: 3
berat: 1kg
Diskon: 10
kategori:
Smartphone
Gambar:
(kosong)
Sistem akan
menolak
akses dan data
tidak akan
tersimpan,
Dan
menampilkan
“Data yang
anda isikan
belum
lengkap”
Sesuai
Harapan
Valid
85
2
Jika
semua
Kolom
produk
terisi
kemudian
di klik
tambah
Nama Produk:
Handphone Esia
harga: 500000
stok: 3
berat: 1kg
Diskon: 10
kategori:
Smartphone
Gambar:
image1.jpg
Sistem
menerima
akses
admin dan
kemudian
data produk
yang baru
sudah ada di
daftar
produk
Sesuai
Harapan Valid
Tabel III.11
Hasil Pengujian Black Box Testing Halaman Data Kategori
No Skenario
Pengujian Test Case
Hasil Yang
Diharapkan
Hasil
Pengujian Kesimpulan
1
Jika kolom
kategori
tidak diisi
kemudian
di klik
tambah
Nama Kategori:
(kosong)
Sistem akan
menolak
akses dan data
tidak akan
tersimpan
“Data yang
anda isikan
belum
lengkap”
Sesuai
Harapan Valid
2
Jika semua
kolong
produk
terisi
kemudian
di klik
tambah
Nama Kategori:
Accesoris HP
Sistem
menerima
akses
admin dan
kemudian
data kategori
yang baru
sudah ada di
daftar
kategori
Sesuai
Harapan Valid
86
D. Pengujian Terhadap Halaman Transaksi
Tabel III.12
Hasil Pengujian Black Box Testing Pembelian Produk
No Skenario
Pengujian Test Case
Hasil Yang
Diharapkan
Hasil
Pengujian Kesimpulan
1
Jika
Pengunjung
belum
terdaftar
menjadi user
dan meng-
klik tombol
beli pada
salah satu
produk
Klik Tombol
Beli (Dengan
kondisi
belum login
sebagai user
terdaftar)
Akses ditolak
dan akan
menampilkan
(Email atau
password
anda salah,
atau anda
belum login)
Sesuai
Harapan Valid
2
Jika
Pengunjung
sudah
terdaftar
menjadi user
dan
melakukan
login lalu
meng-klik
tombol beli
pada salah
satu produk.
Klik Tombol
Beli (Dengan
kondisi
sudah login
sebagai user
terdaftar)
Sistem
menerima
request beli
user lalu user
akan
diarahkan ke
menu shoping
chart untuk
melakukan
transaksi
checkout
berikutnya
Sesuai
Harapan Valid
3
Jika user
tidak ingin
checkout,
tetapi ingin
belanja lagi
terlebih
dahulu
dengan meng-
klik tombol
belanja lagi
Klik tombol
belanja lagi
(setelah
melakukan
pembelian
produk)
Sistem
menerima
akses, lalu
user akan
diarahkan ke
halaman daftar
produk untuk
melakukan
pembelian
lagi.
Sesuai
Harapan Valid
87
4
Jika user tidak
ingin
menambah
produk yang
dibeli
kedalam
keranjang,
kemudian
langsung klik
tombol
checkout
Klik Tombol
Checkout
setelah
pembelian
produk
Sistem
menerima
akses, lalu
menampilkan
detail
checkout
produk yang
telah dibeli
serta total
harga yang
harus dibayar.
Sesuai
Harapan Valid
Tabel III.13
Hasil Pengujian Black Box Testing Status Order User
No Skenario Pengujian Test Case Hasil Yang
Diharapkan
Hasil
Pengujian Kesimpulan
1
Setelah melakukan
pembelian produk,
user ingin
mengecek status
transaksi dengan
meng-klik menu
Halo User di
bagian atas kanan
website
Klik Menu
Halo User
Akses
diterima lalu
pengunjung
akan
diarahkan ke
halaman
status order
user.
Sesuai
Harapan Valid
2
Pada halaman
status order user
terdapat menu
transaksi dimana
terdapat menu
status order anda
dan konfirmasi
permbayaran. User
memilih menu
status order anda.
Klik Menu
Status order
anda Pada
pilihan
Menu
Transaksi
Sistem
menerima
akses,
kemudian
menampilka
n status
order masuk
user yang
berisi history
daftar
produk yang
Sesuai
Harapan Valid
88
telah dibeli
user.
3
Jika user ingin
melihat detail
pembelian dari
daftar produk yang
ada pada menu
status order anda.
User akan meng-
klik tombol Baca
pada menu Aksi
pada produk yang
ingin dilihat.
Klik
Tombol
Baca pada
Kolom Aksi
Sistem
menerima
akses, lalu
user akan
menampilka
n order
detail. Yang
berisikan
detail
produk yang
dibeli seperti
nama
produk,
ongkos
kirim dan
total
harganya.
Sesuai
Harapan Valid
4
Jika user telah
melakukan
pembayaran dan
ingin
mengkonfirmasinya
. Pada halaman
yang sama user
akan memilih menu
konfirmasi
permbayaran pada
kolom menu
transaksi dibagian
kiri. Kemudian user
meng-kllik tombol
konfirmasi
pembayaran.
Klik
Tombol
Konfirmasi
pembayaran
pada pilihan
Menu
Transaksi.
Sistem
menerima
akses, lalu
User akan
diarahkan ke
halaman
upload file
konfirmasi.
Sesuai
Harapan Valid
89
5
Pada halaman
upload file
konfirmasi user
ingin
mengkonfirmasi
pembayaran dengan
mengisi detail
produk yang telah
dibayar lalu klik
tombol choose file
untuk mengupload
bukti pembayaran.
Kemudian user
meng-klik tombol
Upload.
Meng-klik
tombol
choose file
untuk
mengupload
bukti
pembayaran
, kemudian
meng-klik
tombol
upload.
Sistem akan
menerima
akses, lalu
file bukti
pembayaran
akan
tersimpan
kemudian
sistem
menampilka
n keterangan
“Nama File:
image.jpg
berhasil di
upload”
Sesuai
Harapan Valid
90
BAB IV
PENUTUP
4.1 Kesimpulan
Dari berbagai penjelasan yang telah diuraikan dalam laporan ini, maka dapat
disimpulkan beberapa hal sebagai berikut :
1. Terciptanya aplikasi website e-commerce atau toko online ini semoga dapat
memberikan manfaat bagi penulis, pihak toko dan masyarakat umum.
2. Dengan adanya website atau toko online ini pihak Reka Gadgets Store dan
Konsumen dapat melakukan transaksi penjualan secara online. Konsumen atau
calon pembeli tidak perlu lagi datang ke toko fisiknya langsung dan penyebaran
informasi produk Reka Gadgets Store menjadi lebih luas dengan adanya
website ini, sehingga transaksi yang dilakukan lebih efektif dan efisien.
4.2 Saran
Penulis mencoba memberikan saran-saran. Hal ini dimaksud untuk
mendukung agar situs dapat berjalan dengan baik. Saran-saran penulis adalah:
1. Demi keamanan dan kenyamanan diperlukan adanya backup data untuk
mengantisipasi hal-hal yang tidak diinginkan, seperti server rusak, crash, atau
kejadian lain yang tidak terduga.
2. Perlu adanya perawatan terhadap perangkat keras maupun perangkat lunak
yang dilakukan secara berkala.
3. Aplikasi dapat memberikan filter produk berdasarkan jumlah produk yang
91
terjual serta menampilkan total jumlah produk yang terjual pada halaman
detail produk.
4. Dari sisi interface diharapkan ada perkembangan bukan hanya dari segi web
aplikasi tapi bisa juga mencakup mobile aplikasi sehingga para pengguna
dapat mengaksesnya melalui smartphone.
DAFTAR PUSTAKA
Anhar. 2010. Panduan Menguasai PHP & MySQL secara Otodidak. Jakarta:
Mediakita.
Binanto, Iwan. 2010. Multimedia Digital Dasar Teori dan Pengembanganya.
Yoyakarta: Andi Publisher.
Hasugian, H. dan Ahmad Nur Shidiq. 2012. Rancang Bangun Sistem Informasi
Industri Kreatif Bidang Penyewaan Sarana Olahraga. Semantik 2012. pp. 606-
616. ISSN 979 - 26 - 0255 - 0. Diambil dari :
http://eprints.dinus.ac.id/id/eprint/202 (01 Juli 2017).
Masrur, Mukhamad. 2016. Pemrograman Web Dinamis Menggunakan Java Server
Pages dengan Database Relasional MYSQL. Yogyakarta: Andi.
Nugroho, Bunafit. 2013. Panduan Membuat PROGRAM TOKO dengan Visual Basic
dan MYSQL. Yogyakarta: Gava Media.
Prayudi, Budi, Eri Mardiani dan Nur Rahmansyah. 2012. Aplikasi Penjualan
Menggunakan VB.NET. Jakarta: Elex Media Komputindo.
Pratama, Andre. 2015. Ebook Panduan Belajar PHP Unruk Pemula.
Bandung: Duniailkom.
Rosa. A.S., dan Shalahuddin. M., 2016. “Rekayasa Perangkat Lunak”, 2nd ed,
Bandung: Informatika.
Saputra, Agus. 2012. Membuat Aplikasi Absensi dan Kuesioner untuk Panduan
Skripsi. Jakarta: Elex Media Komputindo.
Sukamto, R.A. dan Shalahuddin, M. 2013 Rekayasa Perangkat Lunak,
Bandung: Informatika.
Sutanta, Edhy. 2011. Basis Data Dalam Tinjauan Konseptual. Yogyakarta : Andi
Offset.
Yuhefizar. 2013. Mudah Membuat Web Profil Multibahasa.
Jakarta: Elex Media Komputindo.
DAFTAR RIWAYAT HIDUP
A. Biodata Mahasiswa
NIM : 12146779
Nama Lengkap : Muhammad Ikbal
Tempat &Tanggal Lahir : Jakarta, 21 Juli 1995
Alamat Lengkap : Jln. Pariaman Rt/Rw 02/02 No.1 Pasar Manggis,
Setiabudi, Jakarta Selatan 12970
B. Riwayat Pendidikan Formal & Non Formal
1. SDN 01 Pasar Manggis – Jakarta, lulud tahun 2007
2. SMP Negeri 280 – Jakarta, lulus tahun 2010
3. SMK Negeri 16 – Jakarta, lulus tahun 2013
C. Riwayat Pengalaman Ber-organisasi / Pekerjaan
1. IT Support di PT. Jatis Solutions
2. Staff Datacenter di PT. Indivara Group
Jakarta, 7 Juli 2017
Muhammad Ikbal