tugas akhir - repository.bsi.ac.id · tugas akhir diajukan untuk memenuhi salah satu syarat...
TRANSCRIPT
PERANCANGAN SISTEM INFORMASI PENJUALAN JAM
TANGAN PRIA BERBASIS WEB
TUGAS AKHIR
Diajukan untuk memenuhi salah satu syarat kelulusan Diploma Tiga (D.III)
LINGGIH LUKIS TRESNA
NIM : 12136448
Program Studi Manajemen Informatika
Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika
Jakarta
2016
vi
KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Allah SWT, yang telah melimpahkan
rahmat dan karunia-Nya, sehingga pada akhirnya penulis dapat menyelesaikan tugas
akhir dengan baik dan lancar. Dimana tugas akhir ini penulis sajikan dalam bentuk
yang sederhana. Adapun judul penulisan tugas akhir, yang penulis ambil sebagai
berikut: “PERANCANGAN SISTEM INFORMASI PENJUALAN JAM
TANGAN PRIA BERBASIS WEB”.
Tujuan penulisan tugas akhir ini adalah sebagai salah satu syarat kelulusan
Program Diploma Tiga (DIII) Akademi Manajemen Informatika dan Komputer Bina
Sarana Informatika (AMIK BSI) Program Studi Manajemen Informatika.
Penulis menyadari bahwa tanpa adanya bimbingan dan dorongan dari semua
pihak, maka penulisan tugas akhir ini tidak akan berjalan dengan lancar sebagaimana
mestinya. Oleh karena itu pada kesempatan ini, perkenankanlah penulis
menyampaikan ucapan terima kasih kepada:
1. Direktur Bina Sarana Informatika
2. Ketua Program Studi Manajemen Informatika
3. Ibu Puji Astuti, M.Kom selaku dosen pembimbing tugas akhir
4. Seluruh Staff, Dosen serta semua Karyawan AMIK BSI yang telah banyak
membantu dan memberikan motivasi kepada penulis dalam menyelesaikan
tugas akhir ini
vii
5. Orang tua serta keluarga yang senantiasa memberikan semangat, dukungan
dan doanya sehingga penulis dapat menyelesaikan tugas akhir ini dengan tepat
waktu.
6. Rekan-rekan seperjuangan dari Akademi Manajemen Informatika dan
Komputer (AMIK BSI) Salemba 22, khususnya Program Studi Manajemen
Informatika kelas 12.6A.07 serta rekan-rekan lainnya yang telah membantu
menyumbangkan pemikirannya sehingga penulis dapat menyelesaikan tugas
akhir ini.
Penulis menyadari bahwa penulisan tugas akhir ini masih jauh dari sempurna
dan masih banyak memiliki kekurangan. Oleh karena itu kritik dan saran yang
membangun sangat penulis harapkan demi kesempurnaan penulisan dimasa yang
akan datang. Semoga penulisan ini dapat memberikan manfaat bagi ilmu pengetahuan
umumnya dan khususnya bagi pembaca.
Jakarta, 22 Juni 2016
Penulis
Linggih Lukis Tresna
viii
ABSTRAK
Linggih Lukis Tresna (12136448), Perancangan Sistem Informasi Penjualan
Jam Tangan Pria Berbasis Web
Jam tangan adalah sebuah aksesoris yang berfungsi sebagai penunjuk waktu. Namun,
seiring dengan berkembangnya industri fashion di dunia, jam tangan tidak hanya
berfungsi sebagai penunjuk waktu, sekarang jam tangan juga berfungsi sebagai
pelengkap dalam fashion pria. Jika kita melihat ke belakang, dunia fashion selalu
dianggap sebagai bagian dari gaya hidup wanita, tetapi dalam beberapa tahun
belakangan ini kita bisa melihat meningkatnya permintaan pasar terhadap fashion
pria. Banyak perusahaan yang telah membuka beberapa cabang toko jam tangan
untuk memudahkan konsumen mereka dalam mendapatkan jam tangan. Tetapi
dengan perkembangan teknologi dan internet sekarang ini, sudah banyak sekali
perusahaan-perusahaan yang mulai menjual jam tangan buatan mereka melalui media
internet atau lebih dikenal dengan istilah e-commerce. Jangkauan yang luas tanpa
mengenal wilayah dan waktu membuat sistem penjualan berbasis web menjadi oasis
baru bagi para pelaku bisnis didunia. Dengan adanya perkembangan seperti itu, maka
potensi untuk mendapatkan konsumen akan lebih besar dari pada penjualan dengan
cara konvensional. Hal inilah yang melatar belakangi penulis untuk mengambil
permasalahan ini dalam penulisan makalah kali ini dalam rangka pembuatan website
dengan konsep e-commerce dengan mengedepankan pelayanan yang cepat dan
menyeluruh bagi seluruh konsumen maupun calon konsumen.
Kata Kunci: Jam Tangan, E-commerce, Website
ix
ABSTRACT
Linggih Lukis Tresna (12136448), Web Based Information System Design of Men
Watches’s Sales
Watches are an accessory used to be as a timepiece. However, along with the
development of the fashion industry in the world, watches are not only functions as a
timepiece, now watches also serves as a complement in men's fashion. If we look
back, the fashion world has always been considered as a part of the lifestyle of
women, but in the past few years we could see an increasing market demand for
men's fashion. Many companies have opened their store all over the world to
facilitate customers to buy the watches. But with the current technology and internet
developments, many companies began selling their watches through media of the
internet or commonly known as e-commerce. This is a new oasis for businessman in
the world without the limit of time and wide range of place. Given such developments,
the potential to get consumers will be greater than the sales in the conventional
manner. It is the background of the authors to take the matter in writing this paper in
order to make a website with the concept of e-commerce by promoting fast and
comprehensive service for all consumers and potential consumers.
Keywords: Watches, E-commerce, Website
x
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 ........................................................................................................... vi
Abstrak ....................................................................................................................... viii
Daftar Isi ..................................................................................................................... x
Daftar Simbol ............................................................................................................. xii
Daftar Gambar ............................................................................................................ xiii
Daftar Tabel ............................................................................................................... xv
BAB I PENDAHULUAN ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1. Latar Belakang Masalah ................................................................... 1
1.2. Maksud dan Tujuan .................................................................... 2
1.3. Metode Penelitian ............................................................................. 3
1.4. Ruang Lingkup ................................................................................. 5
1.5. Sistematika Penulisan ....................................................................... 6
BAB II LANDASAN TEORI ............................................................ 7
2.1. Konsep Dasar Web .............................................................. 7
2.2. Teori Pendukung .............................................................................. 16
BAB III PEMBAHASAN .................................................................................... 21
3.1. Analisis Kebutuhan .......................................................................... 21
3.2. Perancangan Perangkat Lunak ......................................................... 23
3.2.1. Rancangan Antar Muka.......................................................... 26
3.2.2. Rancangan Basis Data ............................................................ 35
3.2.3. Rancangan Struktur Navigasi ................................................. 44
3.3. Implementasi dan Pengujian Unit .................................................... 46
xi
3.3.1. Implementasi .......................................................................... 46
3.3.2. Pengujian Unit ........................................................................ 56
BAB IV PENUTUP .............................................................................................. 60
4.1. Kesimpulan .................................................................................... 60
4.2. Saran ............................................................................................. 61
DAFTAR PUSTAKA ............................................................................................... 62
DAFTAR RIWAYAT HIDUP................................................................................. 63
xii
DAFTAR SIMBOL
Simbol Entity Relationshiop Diagram
Entitas atau Obyek Data
Kumpulan obyek atau sesuatu yang dapat dibedakan
atau dapat diidentifikasi secara unik.
Relationship
Hubungan yang terjadi antara satu entitas atau lebih.
Kumpulan relationship yang sejenis disebut
relationship set.
Atribut atau Elemen Data
Karakteristik dalam entity atau relationship yang
mengerjakan penjelasan detail tentang entity atau
relationship atau dengan kata lain adalah kumpulan
elemen data yang membentuk suatu entitas.
Weak Entity
Suatu entity dimana keberadaan dari entity tersebut
tergantung dari entity lain.
Atribut Multivalue
Atribut yang memiliki nilai lebih dari satu.
Connection
Digunakan sebagai penghubung entitas yang
membedakan entitas tersebut dengan entitas lainnya.
xiii
DAFTAR GAMBAR
1. Gambar II.1. Ilustrasi Model Waterfall ............................................................... 13
2. Gambar II.2. Struktur Navigasi Linier ................................................................ 16
3. Gambar II.3. Struktur Navigasi Hierarki ............................................................ 17
4. Gambar II.4. Struktur Navigasi Non Linier ........................................................ 18
5. Gambar II.5. Struktur Navigasi Campuran ......................................................... 18
6. Gambar III.1. Entity Relationship Diagram ........................................................ 24
7. Gambar III.2. Logical Record Structure ............................................................. 25
8. Gambar III.3. Rancangan Antar Muka Home User 1 ......................................... 26
9. Gambar III.4. Rancangan Antar Muka Home User 2 ......................................... 27
10. Gambar III.5. Rancangan Antar Muka Halaman Product ................................... 27
11. Gambar III.6. Rancangan Antar Muka Halaman Sign-in ................................... 28
12. Gambar III.7. Rancangan Antar Muka Halaman Register .................................. 28
13. Gambar III.8. Rancangan Antar Muka Halaman Detail Product ........................ 29
14. Gambar III.9. Rancangan Antar Muka Halaman Cart ........................................ 29
15. Gambar III.10. Rancangan Antar Muka Halaman Checkout .............................. 30
16. Gambar III.11. Rancangan Antar Muka Halaman Login Admin ....................... 31
17. Gambar III.12. Rancangan Antar Muka Halaman Dashboard ............................ 31
18. Gambar III.13. Rancangan Antar Muka Halaman Show Product....................... 32
19. Gambar III.14. Rancangan Antar Muka Halaman Insert Product....................... 32
20. Gambar III.15. Rancangan Antar Muka Halaman Product Detail ...................... 33
21. Gambar III.16. Rancangan Antar Muka Halaman Show Order .......................... 33
22. Gambar III.17. Rancangan Antar Muka Halaman Show Order Detail ............... 34
23. Gambar III.18. Rancangan Antar Muka Halaman Show Customer ................... 34
24. Gambar III.19. Struktur Navigasi Halaman Pengunjung .................................... 44
25. Gambar III.20. Struktur Navigasi Halaman Admin ............................................ 45
26. Gambar III.21. Struktur Navigasi Halaman Login Admin ................................. 47
27. Gambar III.22. Struktur Navigasi Halaman Utama Admin ................................ 47
28. Gambar III.23. Struktur Navigasi Halaman Menu Product ................................ 48
xiv
29. Gambar III.24. Struktur Navigasi Halaman Insert Product ................................ 48
30. Gambar III.25. Struktur Navigasi Halaman Insert Product Detail ...................... 49
31. Gambar III.26. Struktur Navigasi Halaman Menu Customer ............................. 49
32. Gambar III.27. Struktur Navigasi Halaman Utama Home ................................. 50
33. Gambar III.28. Struktur Navigasi Halaman Utama Product ............................... 50
34. Gambar III.29. Struktur Navigasi Halaman Utama Product Detail .................... 51
35. Gambar III.30. Struktur Navigasi Halaman Utama Login .................................. 52
36. Gambar III.31. Struktur Navigasi Halaman Utama Register .............................. 52
37. Gambar III.32. Struktur Navigasi Halaman Utama Cart .................................... 53
38. Gambar III.32. Struktur Navigasi Halaman Utama Checkout ............................ 53
xv
DAFTAR TABEL
1. Tabel II.1. Komponen ERD (Entity Relation Diagram) ..................................... 19
2. Tabel III.1. Spesifikasi File Customer................................................................ 36
3. Tabel III.2. Spesifikasi File Product .................................................................. 37
4. Tabel III.3. Spesifikasi File Product Detail ....................................................... 38
5. Tabel III.4. Spesifikasi File Cart ........................................................................ 39
6. Tabel III.5. Spesifikasi File Order ..................................................................... 40
7. Tabel III.6. Spesifikasi File Order Detail .......................................................... 41
8. Tabel III.7. Spesifikasi File Payment ................................................................. 42
9. Tabel III.8. Spesifikasi File Admin .................................................................... 43
10. Tabel III.9. Hasil Pengujian Blackbox Testing Login Admin ............................. 55
11. Tabel III.10. Hasil Pengujian Blackbox Testing Login Pelanggan ..................... 56
12. Tabel III.11. Hasil Pengujian Blackbox Testing Daftar Pelanggan .................... 57
13. Tabel III.12. Hasil Pengujian Blackbox Testing Tambah Produk ...................... 58
14. Tabel III.13. Hasil Pengujian Blackbox Testing Stok Produk ............................ 59
15. Tabel III.14. Hasil Pengujian Blackbox Testing Edit Data Admin ..................... 77
1
BAB I
PENDAHULUAN
1.1 Latar Belakang Masalah
Saat ini industri fashion di Indonesia, khususnya fashion pria, sedang
berkembang dengan pesat. Meskipun tidak secepat di kota-kota besar di dunia, namun
kita bisa melihat pertumbuhan yang signifikan. Jika kita melihat ke belakang, dunia
fashion selalu dianggap sebagai bagian dari gaya hidup wanita. Tapi dalam beberapa
tahun belakangan ini, kita melihat meningkatnya permintaan pasar terhadap fashion
pria. Menurut beberapa desainer dan pengamat fashion pria terkemuka di Indonesia
(http://www.bestlife.co.id/article/mengungkap-tren-fashion-pria-indonesia-2016), hal
ini dapat terjadi karena para pria mulai peduli pada penampilan, mereka mulai paham
bahwa penampilan dapat mencerminkan citra diri mereka di hadapan orang lain. Ini
dapat dilihat dari makin banyaknya toko-toko fashion pria baik lokal maupun
internasional yang bisa kita temukan di berbagai pusat perbelanjaan.
Salah satu aksesoris yang penting dalam fashion pria kini adalah jam tangan.
Jam tangan adalah sebuah aksesoris yang berfungsi sebagai penunjuk waktu. Namun,
seiring dengan berkembangnya industri fashion di dunia, jam tangan tidak hanya
berfungsi sebagai penunjuk waktu, sekarang jam tangan juga berfungsi sebagai
pelengkap dalam fashion pria. Tidak bisa dipungkiri lagi bahwa sekarang jam tangan
pria sudah menjadi salah satu bagian dari dunia fashion.
2
Banyak perusahaan yang telah mengembangkan produksi pembuatan jam
tangan pria. Perusahaan-perusahaan tersebut juga membuka beberapa cabang toko
jam tangan untuk memudahkan konsumen dalam mendapatkan jam tangan yang
sesuai dengan selera masing-masing. Bahkan, banyak juga perusahaan yang menjual
jam tangan melalui media internet atau dikenal dengan istilah e-commerce (sistem
penjualan produk secara elektronik).
Berdasarkan hal-hal tersebut diatas, dalam penyusunan tugas akhir ini penulis
akan membuat sebuah rancangan yang berjudul “Perancangan Sistem Informasi
Penjualan Jam Tangan Berbasis Web”. Pada penyusunan tugas akhir ini, akan
dilakukan perancangan terhadap sistem agar sesuai dengan tujuan dalam pembuatan
sistem penjualan ini serta implementasi dari hasil perancangannya. Dengan sistem ini,
penjual dapat mengelola kegiatan penjualan, produk-produk yang tersedia dan juga
laporan-laporan yang terkait dengan kegiatan penjualan. Diharapkan dengan
pembuatan sistem ini pelanggan mendapatkan kemudahan dalam membeli jam tangan
tanpa memperdulikan tempat dan waktu.
1.2 Maksud dan Tujuan
Adapun maksud dari penulisan tugas akhir ini adalah:
1. Memberikan kemudahan kepada konsumen atau pelanggan dalam melakukan
transaksi pembelian jam tangan dengan menggunakan internet.
2. Memperluas jangkauan pemasaran penjualan jam tangan pria melalui website.
3. Mengembangkan pengetahuan penulis tentang HTML, CSS, PHP dan MySQL
sebagai acuan utama dalam pembuatan sistem penjualan berbasis web.
3
Penulis juga menjelaskan mengenai tujuan dari penulisan tugas akhir ini
adalah sebagai salah satu syarat kelulusan pada Program Diploma Tiga (D.III) untuk
program studi Manajemen Informatika di Akademi Manajemen Informatika dan
Komputer Bina Sarana Informatika (AMIK BSI JAKARTA).
1.3 Metode Penelitian
Dalam penyusunan tugas akhir ini, penulis menggunakan beberapa metode
penelitian data, yaitu:
A. Metode Pengembangan Perangkat Lunak
Model waterfall adalah suatu proses pengembangan perangkat lunak yang
berurutan, dimana kemajuan dipandang sebagai terus mengalir ke bawah
melewati fase-fase perencanaan, pemodelan, implementasi (konstruksi) dan
pengujian. Menurut Rosa dan Salahudin (2013 : 28) “Model Air terjun
(waterfall) menyediakan pendekatan alur hidup perangkat lunak secara
sekuensial atau terurut dimulai dari analisis, desain, pengodean, pengujian dan
tahap pendukung (support)”.
1. Analisis Kebutuhan
Proses analisa disini meliputi kebutuhan-kebutuhan yang diperlukan oleh
user dalam cara pengoperasian website, melihat produk pada website dan
melakukan transaksi. Dan juga kebutuhan yang diperlukan administrator
dalam pengoperasian website, pengolahan data produk dan pengolahan
data transaksi.
4
2. Desain
Proses desain yang dimaksud disini bukan hanya desain dari tampilan
atau interfacenya saja, tetapi yang dimaksud adalah desain sistem dari
website itu sendiri. Dalam proses penampilan gambar pada header,
navigasi, footer dan lainnya, penulis menggunakan Adobe Photoshop
untuk menyelesaikannya.
3. Pengkodean
Metode waterfall pada tahap pengkodean ini penulis menggunakan script
HTML, CSS, JAVASCRIPT, PHP dan MySQL sebagai basis data.
Dengan menggunakan software XAMPP dan Sublime Text Editor.
4. Implementasi dan Pengujian Unit
Implementasi ini menggunakan metode Blackbox Testing sebagai
pengujian terhadap beberapa halaman-halaman yaitu admin dan user.
B. Metode Pengumpulan Data
Metode yang penulis gunakan untuk mendapatkan data sebagai objek penulisan
adalah sebagai berikut :
1. Metode Pengamatan (Observation)
Penulis mendapat gambaran langsung terhadap kegiatan transaksi yang dilakukan
oleh penjual jam tangan, agar penulis dapat mengetahui proses yang dilalui dari
awal pengenalan produk sampai produk yang telah diterima oleh pelanggan.
5
2. Studi Pustaka (Library Research)
Penulis mengumpulkan data-data dari buku dan sumber lainnya seperti buku,
website, jurnal dan sebagainya yang berkaitan dengan masalah yang akan dibahas
dalam Tugas Akhir ini.
1.4 Ruang Lingkup
Adapun ruang lingkup dalam penulisan Tugas Akhir ini adalah membahas
tentang sistem penjualan jam tangan dengan memberi batasan yang terdiri dari proses
pendaftaran pelanggan baru, pengelolaan data oleh bagian administrasi dan proses
transaksi pemesanan jam tangan yang dilakukan pelanggan.
1.5 Sistematika Penulisan
Sistematika yang akan penulis gunakan pada penulisan tugas akhir ini adalah
sebagai berikut:
BAB I PENDAHULUAN
Bab ini akan memberikan gambaran secara singkat tentang latar
belakang permasalahan, maksud dan tujuan, metode pengumpulan data,
ruang lingkup dan sistematika penulisan.
BAB II LANDASAN TEORI
Bab ini berisi dasar teori yang akan menjadi dasar pemikiran dan
sebagai landasan penulis dalam membuat Tugas Akhir ini.
BAB III PEMBAHASAN
6
Bab ini berisikan penjelasan dari tinjauan perusahaan, analisis
kebutuhan, perancangan perangkat lunak yang terdiri dari rancangan
antar muka, rancangan basis data, dan rancangan struktur navigasi. Juga
menjelaskan tentang implementasi dan pengujian unit.
BAB IV PENUTUP
Bab ini secara khusus akan menjabarkan kesimpulan dari perancangan
sistem yang dibuat serta menyatakan saran-saran untuk pengembangan
sistem dan juga pengembangan penulisan selanjutnya.
7
BAB II
LANDASAN TEORI
2.1 Konsep Dasar Web
Sebelum masuk ke dalam tahap pembahasan mengenai spesifikasi
perancangan web, penulis juga akan mengemukakan teori perancangan
programnya karena teori difokuskan pada pengolahan data.
A. Pengertian Web
Menurut Arief (2011:7) “Web adalah salah satu aplikasi yang berisikan
dokumen-dokumen multimedia (teks, gambar, suara, animasi, video) di dalamnya
menggunakan protokol HTTP (Hypertext Transfer Protocol) dan untuk
mengaksesnya menggunakan perangkat lunak yang disebut browser.”
1. Internet
Internet merupakan kependekan dari kata Internetwork, yang berarti
rangkaian komputer yang terhubung menjadi beberapa rangkaian jaringan dengan
cakupan secara global. Menurut Setiawan (2012:1) menjelaskan bahwa “Internet
adalah kumpulan komputer dan jaringan lokal yang melakukan aktivitas
komunikasi satu sama lain berbasis protokol TCP/IP dalam area yang tidak
terbatas. Dasar internet adalah jaringan komputer yang dikembangan oleh
ARPANET pada tahun 1972.”
2. Website
Website atau situs web merupakan kumpulan dari halaman web yang
sudah dipublikasikan di jaringan internet dan memiliki domain/URL (Uniform
8
Resource Locator) yang dapat diakses semua pengguna internet dengan cara
mengetikkan alamatnya pada address bar di browser.
Ditinjau dari aspek content atau isinya, website dapat dibagi menjadi 2
jenis menurut Arief (2011:8-9) yang menjelaskan bahwa “Web statis adalah web
yang isinya/contentnya tidak berubah-ubah. Maksudnya adalah isi dari dokumen
web tersebut tidak dapat diubah secara cepat dan mudah. Ini karena teknologi
yang digunakan untuk membuat dokumen web ini tidak memungkinkan dilakukan
perubahan isi/data. Web dinamis adalah jenis web yang content/isinya dapat
berubah-ubah setiap saat. Untuk melakukan perubahan data, user cukup
mengubahnya langsung secara online di internet melalui halaman control
panel/administrasi yang biasanya telah disediakan untuk user administrator
sepanjang user tersebut memiliki hak akses yang sesuai.”
3. World Wide Web (WWW)
World Wide Web atau yang biasa disingkat WWW merupakan kumpulan
situs web yang dapat diakses di internet yang berisikan semua informasi yang
dibutuhkan semua pengguna internet. Jadi antara web, website dan WWW
sebenarnya memiliki pengertian yang sama, hanya ruang lingkupnya yang
berbeda.
4. Aplikasi Berbasis Web
1. Web Browser
Merupakan program yang berfungsi untuk menampilkan dokumen-
dokumen web dalam format HTML. Bagaimana halaman web yang
dibuat ditampilkan sangat tergantung pada web engine yang digunakan
oleh masing-masing browser. Menurut Arief (2011:19) “Semua jenis web
9
browser yang ada saat ini mengikuti standarisasi yang dibuat oleh World
Wide Web Consortium (W3C) yang merupakan badan independen yang
mengurus semua hal yang berkaitan dengan web di dunia.”
2. Web Server
Menurut Arief (2011:19) “Web server adalah program aplikasi yang
memiliki fungsi sebagai tempat menyimpan dokumen-dokumen web.”
Jadi semua dokumen web baik yang ditulis menggunakan client side
scripting maupun server side scripting tersimpan didalam direktori utama
web server (document root).
3. Database Server
Adalah program yang digunakan untuk menyimpan data yang akan
diolah dihalaman web. Database biasa disebut Database Management
System (DBMS) adalah sebuah aplikasi yang menjembatani user dan
data-data di dalam database. Dengan menggunakan DBMS user mampu
mengolah data-data didalam database secara mudah dan cepat.
B. Bahasa Pemrograman
Untuk membuat web statis maka Bahasa pemrograman/script yang
digunakan cukup jenis client side scripting, contohnya adalah HTML, HTML5,
Cascading Style Sheet (CSS), JQuery. Untuk membuat web dinamis maka script
yang digunakan adalah gabungan antara client side scripting dan server side
scripting, yang contohnya adalah PHP: Hypertext Preprocessor (PHP).
10
1. HTML (Hypertext Markup Language)
Menurut Arief (2011:23) menjelaskan bahwa “HTML atau Hypertext
Markup Language merupakan salah satu format yang digunakan dalam
pembuatan dokumen dan aplikasi yang berjalan di halaman web.” Dokumen ini
dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan
pada web browser.
Menurut Setiawan (2012:105) “Dokumen HTML adalah suatu dokumen
teks biasa, dan disebut markup language karena mengandung tag tertentu yang
digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dalam
teks suatu dokumen.”
Jadi dapat disimpulkan bahwa HTML (Hypertext Markup Language)
adalah sebuah bahasa pemrograman yang berfungsi untuk menampilkan konten
dalam suatu web. Sebuah dokumen HTML sendiri adalah dokumen teks yang
dapat diedit oleh editor teks apapun. Dokumen HTML juga disusun oleh beberapa
elemen atau lebih dikenal dengan komponen-komponen dasar yang disebut
dengan tag HTML.
2. PHP (PHP: Hypertext Preprocessor)
Pengertian PHP (PHP: Hypertext Preprocessor) adalah bahasa server-side
scripting yang menyatu dengan HTML untuk membuat halaman web yang
dinamis. Karena PHP merupakan server-side scripting maka sintaks dan perintah-
perintah PHP akan dieksekusi di server kemudian hasilnya dikirimkan ke browser
dalam format HTML. Dengan demikian kode program yang ditulis dalam PHP
tidak akan terlihat oleh user sehingga keamanan halaman web lebih terjamin.
11
Salah satu keunggulan yang dimiliki oleh PHP adalah kemampuannya
untuk melakukan koneksi ke berbagai macam software sistem manajemen basis
data/Database Management System (DBMS), sehingga dapat menciptakan
halaman website yang dinamis.
3. CSS (Cascading Style Sheet)
Menurut Saputra (2012:27b) “CSS yang merupakan singkatan dari
cascading style sheet merupakan Bahasa pemrograman web yang di desain khusus
untuk mengendalikan dan membangun berbagai komponen dalam web sehingga
tampilannya lebih rapih, terstruktur dan seragam.”
Pemrograman CSS wajib dikuasai dikuasai oleh pembuat program (Web
Programmer), terlebih lagi bagi pendesain web (Web Designer). CSS saat ini
dikembangkan oleh World Wide Web Consortiura (W3C) dan menjadi Bahasa
standar dalam pembuatan web. CSS juga difungsikan sebagai penopang atau
pendukung, dan pelengkap file html yang berperan dalam penataan kerangka dan
layout.
C. Basis Data
Basis dapat diartikan sebagai markas atau gudang, tempat bersarang atau
berkumpul. Sedangkan data merupakan representasi fakta dunia nyata yang
mewakili suatu objek seperti manusia, hewan, benda dan objek lainnya. Basis data
itu sendiri adalah media untuk menyimpan data agar dapat diakses dengan mudah
dan cepat.
Menurut Yakub (2012:55) mendefinisikan bahwa “Basis data merupakan
koleksi dari data-data yang terorganisasi dengan cara sedemikian rupa sehingga
data tersebut mudah disimpan dan dimanipulasi.”
12
Sebuah sistem basis data dapat memiliki beberapa basis data. Setiap basis
data dapat memiliki sejumlah objek basis data (seperti tabel, indeks dan lainnya).
Data tersebut dapat ditampilkan, didefinisikan, diubah dan dihapus dari tabel.
1. MySQL (My Structure Query Language)
Menurut Arief (2011:151), “MySQL adalah salah satu jenis database
server yang sangat terkenal terkenal dan banyak digunakan untuk membangun
aplikasi web yang menggunakan database sebagai sumber dan pengelolaan
datanya.” MySQL menggunakan SQL sebagai bahasa dasar untuk mengakses
database-nya sehingga mudah untuk digunakan. Hal lain yang membuat MySQL
begitu populer adalah karena kinerja query begitu cepat, dan memcukupi untuk
kebutuhan database perusahaan-perusahaan skala menengah-kecil.
MySQL juga bersifat open source dan free (tidak perlu membayar untuk
menggunakannya) pada berbagai platform (kecuali pada Windows, yang bersifat
shareware). MySQL merupakan database yang pertama kali didukung oleh
bahasa pemrograman script untuk internet seperti PHP. MySQL dan PHP
dianggap sebagai pasangan software pengembangan aplikasi web yang ideal.
MySQL lebih sering digunakan untuk membangun aplikasi berbasis web,
umumnya pengembangan aplikasinya menggunakan bahasa pemrograman script
PHP.
Adapun keunggulan dari MySQL antara lain:
a. Mampu menangani jutaan user dalam waktu yang bersamaan
b. Mampu menampung lebih dari 50.000.000 record
c. MySQL menggunakan SQL dan bersifat free (gratis)
13
d. Setiap pengguna MySQL diizinkan mengubah source untuk keperluan
pengembangan atau menyelaraskan spesifikasi database sesuai kebutuhan
D. Model Pengembangan Perangkat Lunak
Menurut Rosa dan Shalahuddin (2013:26), “SDLC (Software Development
Life Cycle) adalah proses mengembangkan atau mengubah suatu sistem perangkat
lunak dengan menggunakan model-model dan metodologi yang digunakan orang
untuk mengembangkan sistem-sistem perangkat lunak.” Sebelumnya. SDLC
memiliki beberapa model dalam penerapan tahapan prosesnya, antara lain: Model
Waterfall, Model Prototipe, Model Rapid Application Development (RAD),
Model Iteratif dan Model Spiral.
Model yang banyak digunakan oleh para pengembang perangkat lunak
adalah model Waterfall, karena mengusulkan sebuah pendekatan perkembangan
perangkat lunak yang sistematik dan sekuensial. Model Waterfall memiliki
tahapan sebagai berikut:
Analisa Desain Pengodean Pengujian
Sistem/Rekayasa
Informasi
Sumber : Rosa dan Salahuddin (2013:29)
Gambar II.1.
Ilustrasi Model Waterfall
14
1. Analisis Kebutuhan Perangkat Lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk
menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat
lunak seperti apa yang dibutuhkan oleh user.
2. Desain
Proses multilangkah yang focus pada desain pembuatan program termasuk
struktur data, arsitektur perangkat lunak, representasi antar muka dan
prosedur pengodean.
3. Pembuatan kode program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari
tahap ini adalah program computer sesuai dengan desain yang telah dibuat
pada tahap desain.
4. Pengujian
Fokus pada perangkat lunak secara dari segi lojik dan fungsional dan
memastikan bahwa semua bagian sudah diuji. Hal ini bertujuan untuk
meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan
sesuai yang diinginkan.
Model Waterfall sangat cocok digunakan, kebutuhan pelanggan sudah
sangat dipahami dan kemungkinan terjadinya perubahan kebutuhan selama
pengembangan perangkat lunak kecil. Hal positif dari model Waterfall adalah
struktur tahap pengembangan sistem jelas, dokumentasi dihasilkan di setiap tahap
pengembangan, dan sebuah tahap dijalankan setelah tahap sebelumnya selesai
dijalankan (tidak ada tumpeng tindih pelaksanaan tahap). Model ini hanya cocok
15
untuk pengembangan perangkat lunak dengan spesifikasi yang tidak berubah-
ubah.
E. E-Commerce
Definisi e-commerce menurut Turban dkk, dalam buku Jonathan, K.
Prihartono (2012:5), ialah “Proses membeli dan menjual atau menukar produk,
jasa atau informasi melalui komputer”. Sedangkan menurut Laudon dalam buku
Sarwono, K. Prihartono (2012:5), “E-commerce ialah penggunaan internet dan
web untuk transaksi bisnis, atau secara lebih formal e-commerce didefinisikan
sebagai transaksi perdagangan yang dimungkinkan secara digital antar organisasi
dengan organisasi atau dengan individual serta antar individual dengan
individual.”
Dari kedua definisi diatas, dapat disimpulkan bahwa e-commerce berkaitan
dengan transaksi jual beli yang dilakukan secara digital dengan menggunakan
komputer yang tersambung dengan internet. Oleh karena itu, peranan internet
dalam e-commerce sangat penting karena komputer yang digunakan untuk
bertransaksi harus dapat digunakan untuk berkomunikasi antara pihak pembeli
dan penjual.
Dengan demikian, model transaksi dalam e-commerce akan berbeda
dengan transaksi bisnis konvensional. Jika transaksi bisnis konvensional
memerlukan tatap muka, maka dalam e-commerce tidak diperlukan tatap muka
langsung antara pembeli dan penjual.
16
2.2 Teori Pendukung
A. Struktur Navigasi
Dalam membangun sebuah program, diperlukan juga peralatan pendukung
yang berguna untuk mempermudah langkah-langkah dalam mendesain program.
Salah satu peralatan pendukung tersebut adalah struktur navigasi.
Menurut Suyanto (2008:62) “Struktur navigasi dalam situs web melibatkan
sistem navigasi situs web secara keseluruhan dan desain interface situs web
tersebut, navigasi memudahkan jalan yang mudah ketika menjelajahi situs web”.
Struktur Navigasi dapat dikatakan sebagai penggambar dari hubungan atau
rantai kerja dari seluruh elemen yang akan digunakan dalam aplikasi.
Menurut Binanto (2010), ada 4 macam bentuk struktur navigasi yaitu:
1. Struktur Linier
Struktur navigasi yang hanya mempunyai satu rangkaian cerita yang
terurut. Struktur ini menampilkan satu demi satu tampilan layar secara berurutan
menurut aturannya
Sumber : Binanto (2010)
Gambar II.2.
Struktur Navigasi Linier
17
2. Struktur Hierarki
Struktur navigasi hierarki sering disebut navigasi bercabang, yaitu
merupakan suatu struktur yang menghandalkan percabangan untuk menampilkan
data atau gambar pada layar berdasarkan kriteria tertentu. Tampilan pada menu
pertama disebut master page, halaman tersebut mempunyai halaman percabangan
yang disebut slave page (halaman pendukung), dan jika dipilih akan menjadi
halaman kedua dan seterusnya.
Sumber : Binanto (2010)
Gambar II.3.
Struktur Navigasi Hierarki
3. Struktur Non Linier
Struktur non linier merupakan pengembangan dari struktur penjejakan
linier yang diperkenankan membuat struktur navigasi bercabang. Pada
percabangan nono linier walaupun terdapat banyak percabangan tetapi tiap-tiap
tampilan mempunyai kedudukan yang sama, sehingga tidak terdapat “master
page” dan “slave page”.
18
Sumber : Binanto (2010)
Gambar II.4.
Struktur Navigasi Non Linier
4. Struktur Campuran
Struktur navigasi yang merupakan gabungan dari struktur navigasi non
linier dan hirarki, dan biasa disebut juga struktur navigasi bebas, maksudnya
adalah jika suatu tampilan membutuhkan percabangan.
Sumber : Binanto (2010)
Gambar II.5
Struktur Navigasi Campuran
19
B. ERD (Entity Relationship Diagram)
ERD merupakan dokumentasi data dengan mengidentifikasi jenis entitas
dan hubungannya dan disiapkan pada suatu titik dalam proses pengembangan
sistem saat gambaran besar data ditentukan. Banyaknya suatu entitas berhubungan
dengan entitas lain disebut keterkaitan (connectivity).
Menurut Budilaksono (2009:12) “Entity Relationship Diagram (ERD) atau
disebut ER merupakan diagram yang berfungsi sebagai alat bantu kita dalam
memodelkan rancangan basis data”.
Tujuan dari Entity Relationship adalah untuk menunjukkan objek data dan
relationship yang ada pada objek tersebut. Disamping itu model ER ini
merupakan salah satu alat untuk perancangan dalam basis data.
Menurut Fathansyah (2007:8) notasi simbolik didalam diagram ER yang
dapat digunakan sebagai berikut:
Tabel II.1.
Komponen ERD (Entity Relation Diagram)
Diagram Keterangan
Persegi panjang, menyatakan Himpunan
Entitas
Lingkaran/Elip, menyatakan Atribut (Atribut
yang berfungsi sebagai key digaris bawahi)
Belah ketupat, menyatakan Himpunan Relasi
20
Garis, sebagai penghubung antara Himpunan
Relasi dengan Himpunan Entitas dan
Himpunan Entitas dengan Atributnya.
Sumber : Fathansyah (2007:80)
C. LRS (Logical Record Strukture)
Berdasarkan definisi dari Ladjamudin (2006:189) “ERD (Entity
Relationship Diagram) adalah suatu model jaringan yang menggunakan susunan
data yang disimpan dalam sistem secara abstrak”.
D. Pengujian Web atau Black Box Testing
Menurut Rizky (2011:264), Black Box testing (pengujian kotak hitam)
adalah tipe testing yang memperlakukan perangkat lunak yang tidak diketahui
kinerja internalnya. Sehingga para tester memandang perangkat lunak seperti
layaknya sebuah “kotak hitam” yang tidak penting dilihat isinya, tapi cukup
dikenai proses testing di bagian luar.
Black Box Testing berusaha untuk menemukan kesalahan dalam kategori
berikut:
1. Fungsi yang tidak benar atau fungsi yang hilang
2. Kesalahan antarmuka
3. Kesalahan dalam struktur data atau akses database eksternal
4. Kesalahan perilaku (behavior) kesalahan kinerja
21
BAB III
PEMBAHASAN
3.1 Analisis Kebutuhan
Dalam rancangan website, penulis akan membuat website yang dapat memberikan
kemudahan bagi para pengguna untuk memperoleh informasi produk maupun
melakukan transaksi pembelian secara online. Dengan mengacu pada kebutuhan-
kebutuhan yang sudah penulis analisa, sebagai berikut:
A. Kebutuhan pengguna
Dalam sistem informasi penjualan berbasis web, terdapat tiga kategori pengguna,
yaitu administrator, pengunjung dan pelanggan (member). Masing-masing kategori
pengguna mempunyai kebutuhan yang berbeda-beda, dengan penjelasan sebagai
berikut :
1. Administrator
a. Administrator dapat melakukan login menuju web administrator
b. Administrator dapat mengelola data-data seperti menambah, mengubah dan
menghapus data-data produk, kategori produk, data pelanggan dan data
administrator itu sendiri
c. Administrator dapat mengolah data pemesanan berikut data konfirmasi
pembayaran dari pelanggan
2. Pengunjung
a. Pengunjung dapat melihat halaman utama website dan halaman produk
22
b. Pengunjung dapat melakukan pendaftaran menjadi pelanggan (member) pada
halaman pendaftaran yang tersedia, agar dapat melakukan transaksi pada
website
3. Pelanggan (member)
a. Pelanggan dapat melakukan login pelanggan (member)
b. Pelanggan (member) dapat melakukan pemesanan produk dengan
memindahkan produk menuju keranjang belanja
c. Pelanggan (member) dapat melihat tampilan produk yang dipesan pada
keranjang belanja, yaitu berupa spesifikasi gambar dan deskripsi mengenai
keterangan dari produk tersebut
d. Pelanggan (member) dapat mengubah data-data pribadi sebelum melakukan
transaksi
e. Jika pelanggan sudah melakukan pembayaran dengan metode yang
disediakan, maka pelanggan dapat melakukan konfirmasi pembayaran pada
halaman yang tersedia
B. Kebutuhan Sistem
Dalam sistem informasi penjualan berbasis web, terdapat kebutuhan sistem sebagai
berikut :
1. Sistem harus mampu memberikan informasi yang realtime terhadap pengunjung
2. Sistem harus mampu menampilkan produk-produk beserta detail produk tersebut
3. Setiap pengunjung dapat melakukan transaksi apabila telah mendaftar menjadi
pelanggan (member) dan telah melakukan login
23
4. Sistem harus memberikan feedback atau pesan yang jelas terhadap pengunjung
ataupun member saat melakukan login dan juga transaksi
5. Sistem harus mampu memverifikasi akun dari member maupun administrator
6. Sistem harus dapat melakukan kalkulasi secara otomatis terhadap transaksi
pemesanan barang yang dilakukan oleh pelanggan (member)
3.2 Perancangan Perangkat Lunak
Rancangan perangkat lunak yang penulis siapkan untuk membangun sistem informasi
penjualan jam tangan pria berbasis web adalah rancangan antar muka, rancangan
basis data dan rancangan struktur navigasi.
24
A. Entity Relationship Diagram (ERD)
product
product_series
price
product_desc
product_id
product_detail
product_detail_id
product_name color qty
image1
image2
product_id
M
1
M
M
customers
customer_id
firstname
address
phone
lastname
city
province
password
1Memilih
Memiliki
Masuk
Melakukan
order
order_id
total_order
customer_id
completed
order_date
1
1
1
pending
cancel
Melakukan
payment
payment_id
image
order_idcustomer_id
1
M
verify
admin_id
Memeriksaadmin
phone
name
password 1
order_detail
order_detail_id
order_id
product_id
product_detail_id
priceqty
sub_total
M
Memiliki
1
cart
product_detail_id
product_id
qty
sub_total
1
admin_id
customer_id
cart_id
cart_id
Gambar III.1.
Entity Relationship Diagram
25
B. Logical Record Structure (LRS)
cart
cart_id*qty
sub_total
product_detail_id**product_id**
customer_id**
payment
payment_id*ImageVerify
order_id**customer_id**
admin_id**
customers
customer_id*firstnamelastnameaddressprovince
cityemail
passwordphone
admin
admin_id*email
passwordnamephone
order
order_id*total_orderorder_date
pendingcompleted
cancel
customer_id**
order_detail
order_detail_id*priceqty
sub_total
order_id**product_id**
product_detail_id**cart_id**
product
product_id*product_seriesproduct_desc
price
product_detail
product_detail_id*product_name
colorqty
Image1Image2
product_id**
1
M
1
M
M
1
1
M
1
M
1
1
1
1
1
1
M
M
M
M
1
1
M
Gambar III.2.
Logical Record Structure
26
3.2.1 Rancangan Antar Muka
Rancangan antar muka di bawah ini lebih cenderung kepada dasar tampilan antar
muka (interface) website yang akan dibuat. Dasar tampilan ini hanya sketsa atau
gambaran kasar dari tampilan sebenarnya. Rancangan ini akan digunakan sebagai
landasan dasar dalam membuat tampilan website.
Berikut ini adalah rancangan antar muka (interface) yang penulis siapkan untuk
membangun sistem informasi penjualan berbasis web:
A. Rancangan Halaman Home User
Halaman ini adalah halaman yang dapat diakses oleh seluruh customer atau user :
1. Rancangan Antar Muka Home User
Gambar III.3.
Rancangan Antar Muka Home User 1
27
Gambar III.4.
Rancangan Antar Muka Home User 2
2. Rancangan Antar Muka Halaman Product
Gambar III.5.
Rancangan Antar Muka Halaman Product
28
3. Rancangan Anta Muka Halaman Sign In
Gambar III.6.
Rancangan Antar Muka Halaman Sign In
4. Rancangan Antar Muka Halaman Register
Gambar III.7.
Rancangan Antar Muka Halaman Register
29
5. Rancangan Antar Muka Halaman Detail Product
Gambar III.8.
Rancangan Antar Muka Halaman Detail Product
6. Rancangan Antar Muka Halaman Cart
Gambar III.9.
Rancangan Antar Muka Halaman Cart
30
7. Rancangan Antar Muka Halaman Checkout
Gambar III.10.
Rancangan Antar Muka Halaman Checkout
B. Rancangan Halaman Administrator
Rancangan halaman administrator ini adalah rancangan halaman yang akan
digunakan oleh admin untuk mengolah data yang ditampilkan pada halaman user.
Gunanya adalah untuk mengisi, mengubah, maupun menghapus data dalam database
yang ditampilkan pada halaman user.
31
1. Rancangan Antar Muka Halaman Login Admin
Gambar III.11.
Rancangan Antar Muka Login Admin
2. Rancangan Antar Muka Halaman Dashboard
Gambar III.12.
Rancangan Antar Muka Halaman Dashboard
32
3. Rancangan Antar Muka Halaman Show Product
Gambar III.13.
Rancangan Antar Muka Halaman Show Product
4. Rancangan Antar Muka Halaman Insert Product
Gambar III.14.
Rancangan Antar Muka Halaman Insert Product
33
5. Rancangan Antar Muka Halaman Insert Product Detail Produk
Gambar III.15.
Rancangan Antar Muka Halaman Insert Product Detail
6. Rancangan Antar Muka Halaman Show Order
Gambar III.16.
Rancangan Antar Muka Halaman Show Order
34
7. Rancangan Antar Muka Halaman Show Order Detail
Gambar III.17.
Rancangan Antar Muka Halaman Show Order Detail
8. Rancangan Antar Muka Halaman Show Customer
Gambar III.18.
Rancangan Antar Muka Halaman Show Customer
35
3.2.2 Rancangan Basis Data
Perancangan basis data menghasilkan pemetaan tabel-tabel yang digambarkan dengan
Entity Relationship Diagram (ERD) dan Logical Record Structure (LRS)
A. Spesifikasi File
Menjelaskan tentang file atau tabel yang terbentuk dari transformasi ERD dan file-file
penunjang untuk web. File-file ini tersimpan pada database yang bernama watch_db
dengan parameter-parameter sebagai berikut:
1. Spesifikasi File Customer
Nama File : Customer
Akronim : customer
Fungsi : untuk menyimpan data customer
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media File : Harddisk
Panjang Record : 326
Kunci Filed : customer_id
Software : Mysql
36
Tabel III.1.
Spesifikasi File Customer
No Elemen Data Akronim Type Size Keterangan
1 ID Customer customer_id Integer 11 Primary Key
2 First Name firstname varchar 35
3 Last Name lastname varchar 35
4 Email email varchar 35
5 Password password varchar 24
6 Address address varchar 100
7 Province province varchar 35
8 City city varchar 35
9 Phone phone varchar 16
2. Spesifikasi File Product
Nama File : Product
Akronim : product
Fungsi : untuk menyimpan data product
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media File : Harddisk
Panjang Record : 72
Kunci Filed : product _id
Software : Mysql
37
Tabel III.2.
Spesifikasi File Product
No Elemen Data Akronim Type Size Keterangan
1 ID Product product_id integer 11 Primary Key
2 Product Series product_series varchar 50
3 Product Description product_desc text -
4 Price price integer 11
3. Spesifikasi File Product Detail
Nama File : Product Detail
Akronim : product_detail
Fungsi : untuk menyimpan data product detail
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media File : Harddisk
Panjang Record : 183
Kunci Filed : product_detail_id
Software : Mysql
38
Tabel III.3.
Spesifikasi File Product Detail
No Elemen Data Akronim Type Size Keterangan
1 Product Detail ID product_detail_id Integer 11 Primary Key
2 Product ID product_id Integer 11 Foreign Key
3 Product Name product_name Varchar 100
4 Color color Varchar 50
5 Quantity qty Integer 11
6 Image1 image1 Text -
7 Image2 image2 Text -
4. Spesifikasi File Cart
Nama File : Cart
Akronim : cart
Fungsi : untuk menyimpan data cart
Tipe File : File Transaksi
Organisasi File : Index Sequential
Akses File : Random
Media File : Harddisk
Panjang Record : 66
Kunci Filed : cart_id
Software : Mysql
39
Tabel III.4.
Spesifikasi File Cart
No Elemen Data Akronim Type Size Keterangan
1 Cart ID cart_id Integer 11 Primary Key
2 Product ID product_id Integer 11 Foreign Key
3 Product Detail ID product_detail_id Integer 11 Foreign Key
4 Customer ID customer_id Integer 11 Foreign Key
5 Quantity qty Integer 11
6 Sub Total sub_total Integer 11
5. Spesifikasi File Order
Nama File : Order
Akronim : order
Fungsi : untuk menyimpan data order
Tipe File : File Transaksi
Organisasi File : Index Sequential
Akses File : Random
Media File : Harddisk
Panjang Record : 36
Kunci Filed : order_id
Software : Mysql
40
Tabel III.5.
Spesifikasi File Order
No Elemen Data Akronim Type Size Keterangan
1 Order ID order_id Integer 11 Primary Key
2 Customer ID customer_id Integer 11 Foreign Key
3 Total Order total_order Integer 11
4 Order Date order_date Date -
5 Pending pending Bit 1
6 Completed completed Bit 1
7 Cancel cancel Bit 1
6. Spesifikasi File Order Detail
Nama File : Order Detail
Akronim : orders
Fungsi : untuk menyimpan data order detail
Tipe File : File Transaksi
Organisasi File : Index Sequential
Akses File : Random
Media File : Harddisk
Panjang Record : 88
Kunci Filed : order_detail_id
Software : Mysql
41
Tabel III.6.
Spesifikasi File Order Detail
No Elemen Data Akronim Type Size Keterangan
1 Order Detail ID order_detail_id Integer 11 Primary Key
2 Order ID order_id Integer 11 Foreign Key
3 Product ID product_id Integer 11 Foreign Key
4 Product Detail ID product_detail_id Integer 11 Foreign Key
5 Cart ID cart_id Integer 11 Foreign Key
6 Sub Total sub_total Integer 11
7 Price price Integer 11
8 Quantity qty Integer 11
7. Spesifikasi File Payment
Nama File : Payment
Akronim : payment
Fungsi : untuk menyimpan data payment
Tipe File : File Transaksi
Organisasi File : Index Sequential
Akses File : Random
Media File : Harddisk
Panjang Record : 39
Kunci Filed : payment_id
Software : Mysql
42
Tabel III.7.
Spesifikasi File Payment
No Elemen Data Akronim Type Size Keterangan
1 Payment ID payment_id Integer 11 Primary Key
2 Order ID order_id Integer 11 Foreign Key
3 Customer ID customer_id Integer 11 Foreign Key
4 Image image Text -
5 Admin ID admin_id Integer 5 Foreign Key
6 Verify verify Bit 1
8. Spesifikasi File Admin
Nama File : Admin
Akronim :admin
Fungsi : untuk menyimpan data administrator
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media File : Harddisk
Panjang Record : 361
Kunci Filed : admin_id
Software : Mysql
43
Tabel III.8.
Spesifikasi File Admin
No Elemen Data Akronim Type Size Keterangan
1 Admin ID admin_id Integer 5 Primary Key
2 Email email Varchar 35
3 Password password Varchar 255
4 Name name Varchar 50
5 Phone phone Varchar 16
44
3.2.3 Rancangan Struktur Navigasi
Struktur navigasi website digunakan untuk menggambarkan secara garis halaman-
halaman dari sebuah website. Dengan adanya struktur navigasi, akan terlihat jelas
sususan dari sebuah website. Struktur navigasi yang digunakan penulis untuk
pembuatan website ini adalah struktur navigasi campuran. Struktur navigasi pada
website ini dapat dilihat pada gambar di bawah ini.
A. Struktur Navigasi Halaman Pengunjung
Home
CartProductLogin
RegisterProduct Detail
Checkout
Payment
Gambar III.19.
Struktur Navigasi Halaman Pengunjung
45
B. Struktur Navigasi Halaman Admin
Dashboard
Product
Show Product
Login
Insert Product
Insert Product Detail
Customer
Show Customer
Order
Show Order
Show Order Detail
ShowPayment
Report
ShowReport
Admin
ShowAdmin
InsertAdmin
Logout
Gambar III.20.
Struktur Navigasi Halaman Admin
46
3.3 Implementasi dan Pengujian Unit
Tahap implementasi sistem merupakan tahap penerapan sistem agar dapat
dioperasikan secara optimal sesuai kebutuhan. Tahap ini merupakan penerjemahan
kebutuhan pembangunan aplikasi ke dalam representasi perangkat lunak, sesuai
analisis pada bab sebelumnya. Implementasi antarmuka yang dibuat pada tahap
perancangan, diimplementasikan menjadi bentuk halaman web.
Pengujian unit adalah suatu kegiatan dimana suatu sistem atau komponen dijalankan
dalam kondisi tertentu, yang mana hasilnya diamati atau direkam, atau kemudian
dilakukan evaluasi.
3.3.1 Implementasi
Implementasi sistem informasi penjualan keripik berbasis web yang telah dirancang
akan diterjemahkan ke dalam bahasa pemrograman yang dapat dimengerti oleh
komputer.
A. Implementasi Rancangan Antar Muka
1. Halaman Login Admin
Administrator harus melakukan login terlebih dahulu untuk menggunakan admin-
panel yang tersedia.
47
Gambar III.21. Tampilan Halaman Login Admin
2. Halaman Utama Admin
Setelah admin melakukan login maka akan tampil halaman dashboard dan ada
keterangan nama admin yang melakukan login.
Gambar III.22. Tampilan Halaman Utama Admin
48
3. Halaman Menu Product
Admin dapat mengelola produk-produk yang ditampilkan di halaman pengunjung,
diantaranya dapat menampilkan data produk, melakukan tambah produk, mengubah
data produk dan menghapus data produk.
Gambar III.23. Tampilan Halaman Menu Produk
4. Halaman Menu Insert Product
Menampilkan form Insert Product .
Gambar III.24. Tampilan Halaman Menu Insert Product
49
5. Halaman Menu Insert Product Detail
Menampilkan form Insert Product Detail yang berisi data-data produk yang lebih
lengkap.
Gambar III.25. Tampilan Halaman Menu Insert Product Detail
6. Halaman Menu Customer
Menampilkan para pelanggan yang sudah terdaftar pada website.
Gambar III.26. Tampilan Halaman Menu Customer
50
7. Halaman Utama Home
Halaman awal pada web yang berisi image-slider dari produk-produk terbaru yang
tersedia.
Gambar III.27. Tampilan Halaman Utama Home
8. Halaman Utama Product
Halaman pada web yang berisi produk-produk yang tersedia dengan penjelasan
singkat mengenai harga dan nama produk.
Gambar III.28. Tampilan Halaman Utama Product
9. Halaman Utama Product Detail
51
Halaman pada web yang berisi mengenai satu produk lengkap dengan galeri gambar
dan juga penjelasannya. Terdapat juga tombol untuk membeli.
Gambar III.29. Tampilan Halaman Utama Product Detail
52
10. Halaman Utama Login
Halaman yang berfungsi untuk melakukan akses selanjutnya dengan menggunakan
email/username dan password.
Gambar III.30. Tampilan Halaman Login
11. Halaman Utama Register
Halaman yang berfungsi untuk pendaftaran data diri sebagai syarat dalam melakukan
transaksi pembelian pada web.
Gambar III.31. Tampilan Halaman Utama Register
53
12. Halaman Utama Cart
Halaman yang berfungsi sebagai keranjang belanja pengunjung. Pengunjung bisa
mengumpulkan produk yang ingin dibeli pada halaman ini.
Gambar III.32. Tampilan Halaman Utama Cart
13. Halaman Utama Checkout
Halaman ini berisi data diri dari konsumen dan juga total harga dari transaksi yang
sedang dilakukan.
Gambar III.33. Tampilan Halaman Utama Checkout
54
B. Spesifikasi Sistem Komputer
Pembuatan sebuah website membutuhkan perangkat keras (hardware) dan perangkat
lunak (software) yang memadai untuk menunjang implementasi sebuah website yang
sedang dibuat.
1. Spesifikasi Perangkat Keras
a. Server
1) CPU
a) Processor Pentium Core i3
b) RAM DDR3 4 GB
c) Harddisk 500 GB
2) Mouse
3) Keyboard
4) Monitor dengan resolusi layar minimum 1024x768
5) Koneksi internet dengan kecepatan minimum 2 Mbps
b. Client
1) CPU
a) Processor Pentium Core i3
b) RAM DDR3 2 GB
c) Harddisk 120 GB
2) Mouse
3) Keyboard
4) Monitor dengan resolusi layar minimum 1024x768
5) Koneksi internet dengan kecepatan minimum 1 Mbps
55
2. Spesifikasi Perangkat Lunak
a. Server
1) Sistem Operasi Microsoft Windows Server atau Linux Server
2) Aplikasi bundle web server, seperti Xampp, yang terdiri dari:
a) Apache Server v2
b) PHP Server v5
c) MySQL Server v5
d) PhpMyAdmin v3
3) Aplikasi web browser, seperti Mozilla Firefox, Google Chrome dan
Internet Explorer
b. Client
1) Sistem Operasi Microsoft Windows
2) Aplikasi web browser, seperti Mozilla Firefox, Google Chrome dan
Internet Explorer
3.3.2 Pengujian Unit
Sebelum sistem diterapkan, terlebih dahulu dilakukan tahap pengujian. Hal ini
dilakukan untuk mengidentifikasi sistem jika terjadi kesalahan dan melihat
kekurangan yang ada. Pengujian terhadap program yang dibuat menggunakan
blackbox testing yang berfokus terhadap proses masukkan dan keluaran program.
Cara pengujian ini dilakukan dengan menjalankan dan mengeksekusi tiap modul
kemudian dilakukan pengamatan pada hasil dari proses tersebut.
56
Tabel III.9. Hasil Pengujian Blackbox Testing Login Admin
No. Skenario
Pengujian Tes Case
Hasil Yang
Diharapkan
Hasil
Pengamatan Kesimpulan
1
Username dan
Password tidak
diisi kemudian
klik tombol
masuk
Username:
(kosong)
Password:
(kosong)
Sistem akan menolak
akses dan
menampilkan pesan
gagal
Sesuai Harapan Valid
2
Username diisi
dan Password
dikosongkan
kemudian klik
tombol masuk
Username :
admin
(Benar)
Password :
(kosong)
Sistem akan menolak
akses dan
menampilkan pesan
gagal
Sesuai Harapan Valid
3
Username tidak
diisi dan
Password diisi
kemudian klik
tombol masuk
Username:
(kosong)
Password:
(Isi)
Sistem akan menolak
akses dan
menampilkan pesan
gagal
Sesuai Harapan Valid
4
Memasukan
username
dengan benar
tetapi
memasukan
password salah,
kemudian klik
masuk
Username :
(Benar)
Password :
(Salah)
Sistem akan menolak
akses dan
menampilkan pesan
“Login gagal!
Username & Password
tidak benar”
Sesuai Harapan Valid
5
Memasukan
username salah
tetapi
memasukan
password
dengan benar,
kemudian klik
masuk
Username :
(Salah)
Password :
(Benar)
Sistem akan menolak
akses dan
menampilkan pesan
“Login gagal!
Username & Password
tidak benar”
Sesuai Harapan Valid
6
Mengetikkan
Username dan
Password
dengan data
yang benar
kemudian klik
masuk
Username :
(Benar)
Password :
(Benar)
sistem menerima akses
masuk dan kemudian
langsung
menampilkan menu
beranda admin
Sesuai Harapan Valid
57
Tabel III.10. Hasil Pengujian Blackbox Testing Login Pelanggan
No. Skenario
Pengujian Tes Case
Hasil Yang
Diharapkan
Hasil
Pengamatan Kesimpulan
1
Username dan
Password tidak
diisi kemudian
klik tombol
masuk
Username:
(kosong)
Password:
(kosong)
Sistem akan menolak
akses dan
menampilkan pesan
gagal
Sesuai Harapan Valid
2
Username diisi
dan Password
dikosongkan
kemudian klik
tombol masuk
Username :
admin
(Benar)
Password :
(kosong)
Sistem akan menolak
akses dan
menampilkan pesan
gagal
Sesuai Harapan Valid
3
Username tidak
diisi dan
Password diisi
kemudian klik
tombol masuk
Username:
(kosong)
Password:
(Isi)
Sistem akan menolak
akses dan
menampilkan pesan
gagal
Sesuai Harapan Valid
4
Memasukan
username
dengan benar
tetapi
memasukan
password salah,
kemudian klik
masuk
Username :
(Benar)
Password :
(Salah)
Sistem akan menolak
akses dan
menampilkan pesan
“Login gagal!
Username & Password
tidak benar”
Sesuai Harapan Valid
5
Memasukan
username salah
tetapi
memasukan
password
dengan benar,
kemudian klik
masuk
Username :
(Salah)
Password :
(Benar)
Sistem akan menolak
akses dan
menampilkan pesan
“Login gagal!
Username & Password
tidak benar”
Sesuai Harapan Valid
6
Mengetikkan
Username dan
Password
dengan data
yang benar
kemudian klik
masuk
Username :
(Benar)
Password :
(Benar)
sistem menerima akses
masuk dan kemudian
langsung
menampilkan menu
beranda admin
Sesuai Harapan Valid
58
Tabel III.11. Hasil Pengujian Blackbox Testing Daftar Pelanggan
No. Skenario
Pengujian Tes Case
Hasil Yang
Diharapkan
Hasil
Pengamatan
Kesimpu
lan
1
Nama tidak diisi,
password, email,
alamat, provinsi,
kota, telepon
diisi. Kemudian
klik Daftar
Nama:
(kosong)
Password
Alamat
Provinsi
Kota
Telepon
(Diisi)
Sistem akan menolak
akses dan
menampilkan pesan
“Please fill out this
field” pada textfield
Nama
Sesuai Harapan Valid
2
Email tidak diisi,
Nama, password,
alamat, provinsi,
kota, telepon
diisi. Kemudian
klik Daftar
Email:
(kosong)
Nama
Password
Alamat
Provinsi
Kota
Telepon
(Diisi)
Sistem akan menolak
akses dan
menampilkan pesan
“Please fill out this
field” pada textfield
Sesuai Harapan Valid
3
Password tidak
diisi, Nama,
email, alamat,
provinsi, kota,
telepon diisi.
Kemudian klik
Daftar
Password:
(kosong)
Nama
Alamat
Provinsi
Kota
Telepon
(Diisi)
Sistem akan menolak
akses dan
menampilkan pesan
“Please fill out this
field” pada textfield
password
Sesuai Harapan Valid
4
Alamat tidak
diisi, Nama,
email, password,
provinsi, kota,
telepon diisi.
Kemudian klik
Daftar
Alamat:
(kosong)
Nama
Password
Provinsi
Kota
Telepon
(Diisi)
Sistem akan menolak
akses dan
menampilkan pesan
“Please fill out this
field” pada textfield
alamat
Sesuai Harapan Valid
5
Provinsi Kota
Telepon tidak
diiisi, Nama,
email, password,
alamat diisi.
Kemudian klik
Daftar
Provinsi
Kota
Telepon:
(kosong)
Nama
Password
Alamat
(Diisi)
Sistem akan menolak
akses dan
menampilkan pesan
“Please fill out this
field” pada textfield
Provinsi, Kota,
Telepon
Sesuai Harapan Valid
59
6
Semua diisi
lengkap.
Kemudian klik
Daftar
Semua
(Diisi)
sistem memproses
data pelanggan
tersimpan di database
dan menuju ke
halaman utama
Sesuai Harapan Valid
Tabel III.12. Hasil Pengujian Blackbox Testing Tambah Produk
No. Skenario
Pengujian Tes Case
Hasil Yang
Diharapkan
Hasil
Pengamatan Kesimpulan
1
Semua filed
tidak terisi
kemudian klik
simpan
Filed:
(kosong)
Sistem akan menolak
untuk memproses dan
Text field yang kosong
akan berwarna merah
dan muncul peringatan
”Please fill this field”
Sesuai Harapan Valid
2
Semua filed
terisi kemudian
klik simpan
Field:
(terisi)
Sistem memproses data
produk dan data
tersimpan di database.
Kemudian muncul
dialog sukses
Sesuai Harapan Valid
Tabel III.13. Hasil Pengujian Blackbox Testing Edit Data Produk
No. Skenario
Pengujian Tes Case
Hasil Yang
Diharapkan
Hasil
Pengamata
n
Kesimpulan
1
Admin
melakukan Edit
Produk, salah
satu field tidak
terisi
Satu Field
(kosong)
Sistem akan
menolak proses dan
menampilkan pesan
”Please fill this
field” pada field
yang kosong
Sesuai
Harapan Valid
2
Admin
melakukan Edit
Produk, semua
field terisi
Semua Field
(terisi)
Sistem akan
melakukan proses
dan akan menu
halaman tampil
produk
Sesuai
Harapan Valid
61
BAB IV
PENUTUP
4.1 Kesimpulan
Berdasarkan penjelasan dan implementasi yang telah dilakukan penulis pada
bab-bab sebelumnya, ada beberapa kesimpulan yang dapat diambil yaitu sebagai
berikut:
1. Sistem informasi penjualan jam tangan pria berbasis web ini dirancang
sebagai solusi dalam transaksi penjualan yang mengedepankan pelayanan
yang cepat dan handal tanpa terbatas ruang dan waktu.
2. Sistem informasi penjualan jam tangan pria berbasis web ini bersifat tertutup,
artinya hanya administator yang dapat mengubah, menyimpan dan
menghapus data-data pada website ini.
3. Sistem informasi penjualan jam tangan pria berbasis web ini dirancang
sebagai sarana pembelajaran perancangan website yang efektif.
62
4.2 Saran
Saran yang penulis kemukakan dalam pembuatan sistem informasi penjualan
jam tangan pria berbasis web sebagai berikut:
1. Pihak pengembang sistem informasi dapat melakukan pengembangan website
secara berkala supaya tampilan website menjadi dinamis, baik itu desain
maupun struktur program didalamnya.
2. Dengan adanya pembaruan yang berkelanjutan diharapkan pengelola sistem
dapat melakukan pencadangan data (Back Up Data) guna menghindari
kehilangan data sehingga data yang sudah tersimpan menjadi lebih aman.
3. Administrator website harus mendapatkan pelatihan terlebih dahulu agar
mampu beradaptasi dengan program yang ada di dalam website, sehingga
terhindar dari human error.
4. Pengembang dan juga administrator harus lebih memikirkan keamanan pada
sistem dan website ini, mengingat akan jadi berbahaya jika website ini diretas
oleh pihak-pihak yang tidak bertanggung jawab.
5. Hendaknya dalam perancangan dan implementasi Sistem Informasi Penjualan
Jam Tangan berbasis website ini memperhatikan ketelitian baik dalam hal
pengkodean maupun perancangan tampilan website mengingat informasi yang
terdapat didalam website tersebut bersifat sensitif bagi beberapa pihak.
63
DAFTAR PUSTAKA
A. S., Rosa dan M. Shalahuddin. 2013. Rekayasa Perangkat Lunak Terstruktur Dan
Berorientasi Objek. Informatika. Bandung.
Arief, M. Rudyanto. 2011. Pemrograman Web Dinamis Menggunakan PHP dan
MySQL. Yogyakarta: Andi Offset.
Binanto, Iwan. 2010. Multimedia Digital Dasar Teori dan Pengembanganya.
Yoyakarta: Andi Publisher.
Budilaksono, Sularso. 2009. Mahir Basis Data Dengan MySQL. Jakarta: Mitra
Wacana Media.
Fathansyah. 2007. Basis Data. Bandung: Informatika.
Ladjamudin, Bin Al-Bahra. 2006. Rekayasa Perangkat Lunak. Palembang: Maxikom.
Rizky, Soetam. 2011. Konsep Dasar Rekayasa Perangkat Lunak. Jakarta: PT. Prestasi
Pustakaraya.
Saputra, Agus. 2012. Web Tips PHP, HTML5 dan CSS3. Jakarta: Jaskom.
Sarwono, Jonathan, dan K. Prihartono, A.H. 2012. Perdagangan Online: Cara Bisnis
di Internet. Jakarta: Flex Media Komputindo.
Setiawan, Foni Agus. 2012. Pemrograman Internet. Yogyakarta: Graha Ilmu.
Suyanto, Asep Herman. 2008. Step by Step Web Design Theory and Practice Edisi II.
Yogyakarta: Andi Publisher.
Yakub. 2012. Pengantar Sistem Informasi. Yogyakarta: Graha Ilmu.