tugas akhir - bina sarana informatika · sistem informasi penjualan jam tangan berbasis web tugas...
TRANSCRIPT
-
SISTEM INFORMASI PENJUALAN JAM TANGAN
BERBASIS WEB
TUGAS AKHIR
Diajukan untuk memenuhi salah satu syarat kelulusan Program Diploma Tiga (D.III)
GATOT ACHMAD SUWITO
NIM: 12140800
Program Studi Manajemen Informatika
AMIK BSI Jakarta
Jakarta
2017
-
ABSTRAKSI
Gatot Achmad Suwito ( 12140800 ), Sistem Informasi Penjualan Jam Tangan
Berbasis Web , E-Commerce
Penggunaan jaringan internet bukanlah hal yang asing lagi bagi manusia. Hampir di
seluruh dunia menggunakannya, begitu pula di Indonesia. Masyarakat semakin
mengerti akan apa yang bisa dilakukan dan didapatkan dengan menggunakan fasilitas
internet. Penggunaan jaringan internet saat ini tidak hanya sebagai sarana untuk
mendapatkan informasi tetapi jaringan internet bisa juga digunakan untuk
berwirausaha atau berbisnis lewat internet. Dengan adanya jaringan internet ini maka
bisa mempermudah para pelaku bisnis untuk mengembangkan bisnisnya via online
sekaligus bisa langsung bertransaksi melalui jaringan internet dengan adanya
kemudahan ini maka saya memanfaatkan jaringan internet untuk berbisnis. Dalam
penulisan tugas akhir ini saya akan membahas bagaimana membuat suatu website via
internet untuk berbisnis salah satunya saya membuat bisnis online jam tangan yang
sederhana tentunya juga supaya bisa mendapakan keuntungan dari website ini dengan
mengajak calon konsumen untuk bertransaksi di website online saya dengan cara
mendesign website dan produk agar menarik perhatian para konsumen. Pembuatan
website ini menggunakan program aplikasi Dreamweaver CS 5 dan program-
program pendukung lainnya.
Kata Kunci : Sistem Informasi Penjualan Jam Tangan Berbasis, Web, E-
Commerce
-
ABSTRACTION
Gatot Achmad Suwito (12140800), Web Based Watch Sales Information System,
E-Commerce
The use of internet network is not foreign to human. Almost all over the
world are using it, as well as in Indonesia. People are increasingly understanding
what can be done and obtained by using internet facilities. The use of internet
network today not only as a means to obtain information but the Internet network can
also be used for entrepreneurship or doing business via the internet. With this internet
network it can facilitate the business to develop their business via online at once can
directly transact through the internet network with the ease of this then I use the
internet network to do business. In this thesis I will discuss how to make a website
via the internet to do one of them I make a simple online business watches of course
also in order to get profitable from this website by inviting potential customers to
transact on my website online by way of website design and Products to attract the
attention of consumers. Making this website using Dreamweaver CS 5 application
program and other support programs.
Keywords: Sales Based Watch Information System, Web, E-Commerce
-
DAFTAR ISI
Halaman
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
Abstraksi.......................................................................................................... ix
Daftar Isi .......................................................................................................... xi
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 ..................................................................... 2
1.4. Ruang Lingkup ......................................................................... 5
1.5. Sistematika Penulisan ............................................................... 5
BAB II LANDASAN TEORI ........................................................................... 7
2.1. Konsep Dasar Web ................................................................... 7
2.2. Teori Pendukung....................................................................... 17
BAB III PEMBAHASAN ............................................................................. 26
3.1. Analisa Kebutuhan ................................................................... 26
3.2. Perancangan Perangkat Lunak ................................................. 27
3.2.1 Rancangan Antar Muka ................................................... 27
3.2.2 Rancangan Basis Data ..................................................... 50
3.2.3 Rancangan Struktur Navigasi .......................................... 63
3.3 Implementasi Dan Pengujian Unit ............................................. 65
3.3.1 Implementasi .................................................................. 65
3.3.2 Pengujian Unit ................................................................ 79
BAB IV PENUTUP ...................................................................................... 86 4.1 Kesimpulan ............................................................................. 86
4.2 Saran ...................................................................................... 86
DAFTAR PUSTAKA ..................................................................................... 88
DAFTAR RIWAYAT HIDUP ....................................................................... 89
-
DAFTAR SIMBOL
Entity Relationship Diagram
Entitas atau Objek Data
Kumpulan objek atau sesuatu yang dapat dibedakan atau dapat
diidentifikasi secara unik.
Relationship
Hubungan yang terjadi antar satu entitas atau lebih.
Atribut atau Elemen data
Karakteristikdalam entity atau relationship yang mengerjakan
penjelasan detail tentang entity atau relationship atau disebut
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.
-
DAFTAR GAMBAR
Halaman
Gambar II.1 Struktur Navigasi Linear .............................................................. 18
Gambar II.2 Struktur Navigasi Hierarchical .................................................... 19
Gambar II.3 Struktur Navigasi Non-Linear ...................................................... 19
Gambar II.4 Struktur Navigasi Composite ........................................................ 20
Gambar II.5 Kerdinalitas One To One .............................................................. 22
Gambar II.6 Kerdinalitas One To Many ........................................................... 22
Gambar II.7 Kerdinalitas Many To Many ......................................................... 23
Gambar III.1 Rancangan Antar Muka Halaman Login Admin .......................... 28
Gambar III.2 Rancangan Antar Muka Halaman Beranda Admin ...................... 28
Gambar III.3 Rancangan Antar Muka Halaman Admin .................................... 29
Gambar III.4 Rancangan Antar Muka Halaman Pelanggan ............................... 30
Gambar III.5 Rancangan Antar Muka Halaman Kota ....................................... 31
Gambar III.6 Rancangan Antar Muka Halaman Kategori ................................. 32
Gambar III.7 Rancangan Antar Muka Halaman Barang.................................... 33
Gambar III.8 Rancangan Antar Muka Halaman Pemesanan ............................. 34
Gambar III.9 Rancangan Antar Muka Halaman Konfirmasi ............................. 35
Gambar III.10 Rancangan Antar Muka Halaman Kontak ................................. 36
Gambar III.11 Rancangan Antar Muka Halaman Beranda ................................ 37
Gambar III.12 Rancangan Antar Muka Halaman Barang .................................. 38
Gambar III.13 Rancangan Antar Muka Halaman Cara Bembelian .................... 39
Gambar III.14 Rancangan antar muka Halaman Pembayaran ........................... 40
Gambar III.15 Rancangan Antar Muka Halaman Testimoni ............................. 41
Gambar III.16 Rancangan Antar Muka Halaman Daftar Pelanggan .................. 42
Gambar III.17 Rancangan Antar Muka Halaman Login Pelanggan................... 43
Gambar III.18 Rancangan Antar Muka Halaman Beranda ............................... 44
Gambar III.19 Rancangan Antar Muka Halaman Barang ................................. 45
Gambar III.20 Rancangan Antar Muka Halaman Cara Pembelian ................... 46
Gambar III.21 Rancangan Antar Muka Halaman Pembayaran ......................... 47
Gambar III.22 Rancangan Antar Muka Halaman Testimoni ............................ 48
Gambar III.23 Rancangan Antar Muka Halaman Data Transaksi ..................... 49
Gambar III.24 Entity Relationship Diagram ..................................................... 50
Gambar III.25 Logical Record Structure .......................................................... 51
Gambar III.26 Struktur Navigasi User .............................................................. 63
Gambar III.27 Struktur Navigasi Pelanggan ..................................................... 63
Gambar III.28 Struktur Navigasi Admin .......................................................... 64
Gambar III.29 Tampilan Halaman Login Admin .............................................. 65
-
Halaman
Gambar III.30 Tampilan Halaman Beranda ...................................................... 66
Gambar III.31 Tampilan Halaman Admin ........................................................ 66
Gambar III.32 Tampilan Halaman Pelanggan ................................................... 67
Gambar III.33 Tampilan Halaman Kota ........................................................... 67
Gambar III.34 Tampilan Halaman Kategori ..................................................... 68
Gambar III.35 Tampilan Halaman Barang ........................................................ 68
Gambar III.36 Tampilan Halaman Pemesanan ................................................. 69
Gambar III.37 Tampilan Halaman Konfirmasi ................................................ 69
Gambar III.38 Tampilan Halaman Kontak ....................................................... 70
Gambar III.39 Tampilan Halaman Logout ........................................................ 70
Gambar III.40 Tampilan Halaman Beranda ...................................................... 71
Gambar III.41 Tampilan Halaman Barang ........................................................ 72
Gambar III.42 Tampilan Halaman Cara Pembelian .......................................... 72
Gambar III.43 Tampilan Halaman Pembayaran ................................................ 73
Gambar III.44 Tampilan Halaman Testimoni ................................................... 74
Gambar III.45 Tampilan Halaman Daftar Pelanggan ........................................ 75
Gambar III.46 Tampilan Halaman Login Pelanggan......................................... 75
Gambar III.47 Tampilan Halaman Beranda ..................................................... 76
Gambar III.48 Tampilan Halaman Barang ....................................................... 76
Gambar III.49 Tampilan Halaman Cara Pembelian ......................................... 77
Gambar III.50 Tampilan Halaman Pembayaran ............................................... 77
Gambar III.51 Tampilan Halaman Testimoni .................................................. 78
Gambar III.52 Tampilan Halaman Data Transaksi ........................................... 78
-
DAFTAR TABEL
Halaman
Tabel III.1 Spesifikasi File Admin ................................................................... 52
Tabel III.2 Spesifikasi File Barang ................................................................... 53
Tabel III.3 Spesifikasi File Detail_Pesanan ...................................................... 54
Tabel III.4 Spesifikasi File Kategori ................................................................. 55
Tabel III.5 Spesifikasi File Keranjang .............................................................. 56
Tabel III.6 Spesifikasi File Konfirmasi............................................................. 57
Tabel III.7 Spesifikasi File Kontak ................................................................... 58
Tabel III.8 Spesifikasi File Kota....................................................................... 59
Tabel III.9 Spesifikasi File Pelanggan .............................................................. 60
Tabel III.10 Spesifikasi File Pesanan................................................................ 61
Tabel III.11 Spesifikasi File Testimoni............................................................. 62
Tabel III.12 Black Box Testing Halaman Form Admin ..................................... 79
Tabel III.13 Black Box Testing Halaman Form Login Pelanggan ...................... 80
Tabel III.14 Black Box Testing Halaman Form Daftar Pelanggan ..................... 81
Tabel III.15 Black Box Testing halaman Form Konfirmasi Pembayaran ........... 83
-
BAB I
PENDAHULUAN
1.1. Latar Belakang Masalah
Penjualan merupakan aktivitas jual beli yang dilakukan oleh masyarakat untuk
memenuhi kebutuhan sehari-hari. Aktivitas jual beli juga biasanya berbentuk barang
atau jasa, aktivitas jual beli ini semakin cepat dengan adanya e-commerce, dan saat
ini e-commerce banyak digunakan masyarakat yang merupakan suatu kegiatan
perdagangan atau peniagaan yang berhubungan dengan konsumen, manufaktur,
internet service provider (ISP) dan perdagangan perantara dengan menggunakan
media elektronik yaitu menggunakan internet.
Menghadapi persaingan yang tinggi itu perlu dilakukan strategi agar
permasalahan yang ada dapat diatasi dengan baik. Adapun hal-hal yang melatar
belakangi permasalahan tersebut meliputi permasalahan dalam penjualan jam tangan
ke berbagai lapisan masyarakat, dimana kita sebelumnya memperoleh informasi
tempat belanja dari brosur-brosur, Koran, majalah, ataupun dari orang lain. Maka dari
itu perlu dibangun sebuah website penjualan jam tangan secara online agar lebih
mengefisienkan waktu pelanggan tanpa harus mendatangi atau mengunjungi toko
untuk mendapatkan sebuah jam tangan.
Produk yang dijual adalah jam tangan yang digunakan sebagai petunjuk waktu
yang di pakai di pergelangan tangan manusia. Saat ini jam tangan merupakan salah
satu usaha yang sangat diminati banyak orang karena banyak konsumen yang
-
menggunakan jam tangan sebagai gaya hidup atau fasion agar tampil lebih percaya
diri, dan elegan.
Internet sebagai informasi berupa web, karena internet merupakan salah satu
media pemasaran yang bersifat global dan sistem informasi merupakan sarana
tercepat untuk diakses sehingga memudahkan proses promosi.
Sehubungan dengan hal tersebut, maka penulis mencoba membuat rancangan
program aplikasi berbasis web sekaligus sebagai bahan penulisan tugas akhir dengan
judul : “Sistem Informasi Penjualan Jam Tangan Berbasis Web”.
1.2. Maksud dan Tujuan
Maksud dari penulisan tugas akhir ini adalah:
a. Membantu masyarakat dalam mendapatkan informasi tentang jam tangan.
b. Memperluas jaringan pasar penjualan jam tangan dengan model promosi yang
masih manual menjadi terkomputerisasi, sehingga membantu kelancaran
promosi yang lebih cepat, tepat, dan akurat.
c. Menjadikan masyarakat lebih efisien dalam membeli produk.
d. Memudahkan dalam mengolah transaksi dan laporan.
Tujuan penulisan tugas akhir ini adalah untuk memenuhi salah satu syarat
kelulusan program Diploma Tiga (D. III) Jurusan Manajemen Informatika pada
Akademi manajemen Informatika dan Komputer Bina Sarana Informatika (AMIK
BSI) serta mempromosikan secara online agar komunitas ini bisa di terima oleh
masyarakat.
-
1.3. Metode Penelitian
A. Metode penelitian yang digunakan dalam menyelesaikan penulisan ini adalah
menggunakan teknik-teknik sebagai berikut:
1. Observasi (Pengamatan)
Penulis melakukan pengamatan langsung untuk mengetahui sistem penjualan
penulis secara langsung ke toko jam tangan di beberapa tempat serta melihat
beberapa toko jam tangan dengan penjualan sistem online seperti:
radatime.co.id agar mendapat data yang jelas dan dapat di terapkan dalam
penyusunan tugas akhir ini.
2. Studi Pustaka (Library Research)
Studi Pustaka adalah metode yang digunakan penulis untuk menggali
informasi mengenai teori-teori yang berkaitan dan relevan. Penulisan Tugas
Akhir ini menelusuri teori dari beberapa buku dan mengunjungi beberapa
website atau situs-situs yang berhubungan dengan Tugas Akhir penulis, seperti
website tentang penjualan serta tentang sistem informasi.
B. Metode yang pada pengembangan perangkat lunak menggunakan SDLC
(software Development Life Cycle) atau disebut juga dengan model water fall
menurut Sukamto, Rosa A. dan Shalahuddi, M (2016:27) yang terbagi dalam lima
tahapan, yaitu:
1. Analisa kebutuhan
Proses pengumpulan kebutuhan dilakukan secara intensif untuk mespesifikasikan
kebutuhan perangkat lunak agar dapat dipahami perangkat lunak seperti apa
yang dibutuhkan oleh User.
-
2. Desain
Desain perangkat lunk adalah proses multi langka yang fokus pada desain
pembuatan program lunak termasuk struktur data, arsitektur perangkat lunak,
termasuk struktur data, representasi antarmuka, dan prosedur pengkodean. Tahap
ini mentranslasi kebutuhan perangkat lunak dari tahap analisis kebutuhan ke
representasi desain agar dapat diimplementasikan menjadi program pada tahap
selanjutnya, desain perangkat lunak yang dihasilkan pada tahap ini juga perlu
didokementasikan.
3. Pembuatan kode program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari tahap
ini adalah program komputer sesuai dengan desain yang telah dibuat pada tahap
desain.
4. Pengujian
Pada tahap ini, metode pengujian fokus pada perangkat lunak secara dari segi
lojik dan fungsional dan memastikan bahwa semua bagian sudah diuji. Hal ini
dilakukan untuk meminimalisir kesalahan (error) dan memastikan keluaran yang
dihasilkan sesui dengan yang diinginkan.
5. Pendukung (support) atau Pemeliharaan (maintenance)
Pada tahap ini tidak menutup kemungkinan sebuah perangkat lunak mengalami
perubahan ketika sebuah perangkat lunak mengalami perubahan ketika sudah
dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan yang muncul
dan tidak terdeteksi saat pengujian atau perangkat lunak harus beradaptasi
dengan lingkungan baru. Tahap pendukung atau pemeliharaan dapat mengulangi
-
proses pengembangan mulai dari analisis spesifikasi untuk perubahan perangkat
lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.
1.4. Ruang Lingkup
Ruang lingkup penulisan ini disesuaikan dengan keterbatasan pengetahuan
penulis agar tugas akhir ini bisa lebih terterah, serta mengingat luasnya pembahasan,
maka dari itu ruang lingkup penulisan tugas akhir ini dibatasi hanya mengenai
perancangan program penjualan jam tangan secara online, yang berisikan beberapa
file diantaranya: beranda, barang, cara pembelian, pembayaran, testimoni dan login
sebagai pelanggan. Untuk menu admin ada beberapa file diantaranya yaitu: beranda,
admin, pelnggan, kota, kategori, barang, pemesanan, konfirmasi, kontak dan logout.
1.5. Sistematika Penulisan
Adapun sistematika Tugas Akhir ini terdiri dari empat bab yang masing-masing
di rincikan dalam beberapa bab, yaitu :
BAB I PENDAHULUAN
Bab ini meliputi uraian latar belakang masalah, maksud dan tujuan,
metode-metode penelitian, ruang lingkup pembahasan dan sistematika
penulisan.
BAB II LANDASAN TEORI
Bab ini menjelaskan tentang hal-hal yang berkaitan dengan konsep
dasar program dan teori pendukung lainnya, Teori pendukung meliputi
-
struktur navigasi, Enterprise Relationship Diagram (ERD), dan
pengujian web menggunakan black box testing.
BAB III PEMBAHASAN
Pada bab ini membahas tentang cara kerja sistem yang di rancang
yaitu : analisa kebutuhan, perancangan perangkat lunak, rancangan
antar muka dan implementasi serta pengujian unit.
BAB IV PENUTUP
Pada bab ini yaitu menyimpulkan tugas akhir yang penulis buat dan
saran sebagai akhir dari penulisan.
-
BAB II
LANDASAN TEORI
2.1. Konsep Dasar Web
Menurut Sibero, (2013:10) Internet “adalah jaringan komputer yang
menghubungkan antar jaringan secara global, internet dapat juga disebut jaringan
dalam suatu jaringan yang luas”. Seperti halnya jaringan komputer local maupun
jaringan komputer area, internet juga menggunakan protocol komunikasi yang sama
yaitu TCP/IP (Transmission Control Protocol/Internet Protocol).
Sejarahnya, internet dan jaringan komputer adalah hasil evolusi dari
ARPANET, sebuah proyek riset tingkat tinggi yang dimiliki oleh Departemen
Pertahanan Amaerika Serikat. DARPA mensponsori perkembangan jaringan yang
menggunakan internet protocol (IP), TPC (Transmission Control Protocol) dan UDP
(User Datagram Protocol).
Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu Stanford
Research Institute, University of California, Santa Barbara, University of Utha, di
mana mereka membentuk satu jaringan terpadu pada tahun 1969, dan secara umum
ARPANET diperkenalkan pada bulan oktober 1972.
Berikut ini adalah istilah-istilah dalam dunia internet antara lain:
A. Website
Sibero (2013:11) menjelaskan bahwa, website “merupakan suatu sistem yang
berkaitan dengan dokumen digunakan sebagai media untuk menampilkan teks,
gambar, multimedia, dan lain-lainnya pada jaringan internet”. Dalam mengatur aturan
-
pengembangan web, yang terdiri dari 320 anggota. Selain mengatur aturan
pengembangan web, juga ikut melibatkan diri dalam dunia pendidikan. Beberapa
hasil pengembangan dari web antara lain HTML, CSS, XHTML,DOM,SOP,XML,
dll”.
1. Web browser
Menurut Sibero, (2013:12) Web Browser “adalah aplikasi perangkat lunak yang
digunakan untuk mengambil dan menyajikan sumber informasi web”. Sumber
informasi web diidentifikasi dengan Uniform Resource Identifier (URI) yang dapat
terdiri dalam hal web, video, gambar, ataupun konten lainya”.
2. Web Server
Sibero (2013:11) mengemukakan bahwa Web server “adalah sebuah komputer
yang terdiri dari perangkat keras dan perangkat lunak”. Secara bentuk fisik dan cara
kerjanya, perangkat keras web server tidak berbeda dengan komputer rumah atau PC,
yang membedakan adalah kapasitas dan kapabilitasnya”. Perbedaan tersebut
dikarenakan web server berkerja sebagai penyedia layanan yang dapat di akses oleh
banyak pengguna, sehingga dibutuhkan kapasitas dan kapabilitas yang besar
dibandingkan PC. Dukungan perangkat lunak sangat dibutuhkan agar web server
dapat berjalan secara optimal”.
B. Bahasa Pemrograman
Menurut Munir, (2011:13) Bahasa Pemrograman adalah “Bahasa komputer
yang digunakan dalam menulis program”. Untuk itu bahasa pemrograman dibagi
menjadi empat tingkatan yaitu:
1. Bahasa Mesin (Machine Language)
-
2. Bahasa Tingkat Rendah (Low Level Language)
3. Bahasa Tingkat Menengah (Middle Level Language)
4. Bahasa Tingkat Tinggi (High Level Language)
Bahasa pemrograman yang penulis gunakan yaitu Adobe Dreamweaver CS.5 dan
dibawah ini ada beberapa bahasa pemrograman diantaranya sebagai berikut:
1. PHP Hypertext Preprocessor (PHP)
Sibero, (2013:49) menjelaskan bahwa “PHP (PHP Hypertext Preprocessor)
adalah pemrograman interpreter yaitu proses penerjemahan baris kode sumber
menjadi kode mesin yang dimengerti komputer secara langsung pada saat baris kode
dijalankan”. PHP disebut sebagai pemrograman server side programming, hal ini
dikarenakan seluruh prosesnya dijalankan pada server. PHP adalah suatu bahasa
dengan hak cipta terbuka atau yang juga dikenal dengan istilah Open Source, yaitu
pengguna dapat mengembangkan kode-kode fungsi PHP sesuai dengan
kebutuhannya.
Program PHP dapat ditulis dalam dua bentuk yaitu penulisan baris kode PHP
pada file tunggal dan penulisan kode PHP pada halaman html (embedded). Kedua
cara penulisan tersebut tidak memiliki perbedaan, hanya menjadi kebiasaan gaya
penulisan dari programmer.
2. Hypertext Markup Language (HTML)
Menurut Sibero, (2013:19) Hypertext Markup Language (HTML) “adalah
bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran dtandard
yang dokumen web. Struktur dokumen HTML terdiri tag pembuka dan tag penutup.
-
HTML versi 1.0 dibangun oleh W3C, dan terus mengalami perkembangan. Sampai
saat ini HTML terakhir adalah versi 5.0.
Dokumen HTML terdiri dari komponen yaitu tag, elemen, dan atribut. Berikut adalah
penjelasan dari masing-masing komponen tersebut:
a. Tag adalah tanda awal < dan tanda akhir > yang digunakan sebagai pengapit
suatu elemen. Tag pada elemen pembuka diawali dengan tanda . Sedangakan untuk elemen penutup diawali dengan
tanda < dan / kemudian diakhiri dengan tanda >. Untuk penulisan tag elemen
tunggal cukup menuliskan tanda < dan sebelum tanda > ditambahkan tanda /.
b. Elemen adalah nama penanda yang diapit oleh tag yang memiliki fungsi dan
tujuan tertentu pada dokumen HTML.
c. Atribut adalah property elemen yang digunakan untuk mengkhususkan suatu
elemen. Elemen dapat memiliki atribut yang berbeda pada tiap masing-
masingnya.
3. Cascading Style Sheet (CSS)
Sibero, (2013:112) mengatakan bahwa Cascading Style Sheet (CSS)
“Dikembangankan untuk menata gaya pengaturan halaman web”. Pada awalnya CSS
dikembangkan pada SGML pada tahun 1970, dan terus dikembangakan hingga saat
ini CSS telah mendukung banyak bahasa markup seperti: HTML, XHTML, XML,
SVG (Scalable Vector Graphics) dan Mozilla XUL(XML user interface language).
Mengacu dari arti bahasa, Cascading Style Sheet memiliki arti gaya menata halaman
bertingkat, yang berarti setiap satu elemen yang telah diformat dan memiliki anak dan
-
telah diformat, maka anak dari elemen tersebut secara otomatis mengikuti format
elemen induknya ”.
4. JavaScript
Menurut Sibero, (2013:150) JavaScript “adalah suatu bahasa pemrograman
yang dikembangakan untuk dapat berjalan pada web browser”. Javascript adalah
bahasa skrip (Scripting Language) yaitu kumpulan instruks perintah yang digunkan
untuk mengendalikan beberapa bagian dari sistem operasi. Bentuk bahasa skrip dari
java script mengambil model penulisan pada pemrograman C++ dan Java, yang
terdiri dari variabel, fungsi dan lainya.
C. Basis Data
1. Pengertian Basis Data
Fathansyah (2015:1) mejelaskan Basis Data (Database) “Dapat dibayangkan
sebagai sebuah lemari arsip. Jika kita memiliki sebuah lemari arsip dan bertugas
untuk mengelolahnya, maka kemungkinan besar kita akan melakukan hal-hal seperti
memberi map pada kumpulan arsip-arsip yang akan disimpan, menentukan kelompok
arsip, member penomeran dengan pola tertentu yang nilainya untuk pada setiap map,
lalu menempatkan arsip-arsip tersebut dengan urutan tertentu didalam lemari”. Basis
data terdiri dari 2 kata, yaitu basis dan data. Basis kurang lebih dapat diartikan
sebagai markas atau gudang, tempat bersarang/berkumpul. Sedangkan data adalah
representasi fakta dunia nyata yang mewakili suatu objek seperti manusia (pegawai,
siswa, pembeli, pelanggan), barang, hewan peristiwa, konsep, keadaan dan
sebagainya, yang diwujudkan dalam bentuk angka, huruf, symbol, teks, gambar,
bunyi atau kombinasinya”.
-
2. MySQL
Dalam bukunya Sibero (2013:97) mengatakan “MySQL merupakan software
RDMS (atau server database) yaitu aplikasi sistem yang menjalankan fungsi
pengolahan data”. MySQL pertama dikembangkan oleh MySQL AB yang kemudian
diakuisisi Sun Microsystem dan terakhir dikelola oleh Oracle Coorporation.
Adapun Alasan Menggunakan MySQL:
a. MySQL sangat Fleksibel
b. Perfoma Tinggi
c. Lintas Platfrom
d. Gratis
e. Proteksi data yang handal
f. Komunitas Luas
Keunggukan dari MySQL adalah:
a. Mampu menangani jutaan user dalam waktu yang bersamaan.
b. Mampu menampung lebih dari 50.000.000 record.
c. Sangat cepat mengeksekusi perintah.
D. Metode Pengembangan Perangkat Lunak
Perangkat lunak (software) adalah “Program komputer yang terasosiasi dengan
dokumentasi perangkat lunak seperti dokumentasi kebutuhan, model desain, dan cara
penggunaan (user manual)”. Metode yang pada pengembangan perangkat lunak
menggunakan SDLC (software Development Life Cycle) atau disebut juga dengan
model water fall menurut Sukamto dan Shalahuddin (2016:27) yang terbagi dalam
lima tahapan, yaitu:
-
1. Analisa kebutuhan
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 untuk didokumentasikan.
2. Desain
Desain perangkat lunk adalah proses multi langka yang fokus pada desain
pembuatan program lunak termasuk struktur data, arsitektur perangkat lunak,
termasuk struktur data, representasi antarmuka, dan prosedur pengkodean. Tahap ini
mentranslasi kebutuhan perangkat lunak dari tahap analisis kebutuhan ke representasi
desain agar dapat diimplementasikan menjadi program pada tahap selanjutnya, desain
perangkat lunak yang dihasilkan pada tahap ini juga perlu didokementasikan.
3. Pembuatan kode program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari
tahap ini adalah program komputer sesuai dengan desain yang telah dibuat pada
tahap desain.
4. Pengujian
Pada tahap ini, metode pengujian fokus pada perangkat lunak secara dari segi
lojik dan fungsional dan memastikan bahwa semua bagian sudah diuji. Hal ini
dilakukan untuk meminimalisir kesalahan (error) dan memastikan keluaran yang
dihasilkan sesui dengan yang diinginkan.
5. Pendukung (support) atau Pemeliharaan (maintenance)
-
Pada tahap ini tidak menutup kemungkinan sebuah perangkat lunak mengalami
perubahan ketika sebuah perangkat lunak mengalami perubahan ketika sudah
dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan yang muncul dan
tidak terdeteksi saat pengujian atau perangkat lunak harus beradaptasi dengan
lingkungan baru. Tahap pendukung atau pemeliharaan dapat mengulangi proses
pengembangan mulai dari analisi spesifikasi untuk perubahan perangkat lunak yang
sudah ada, tapi tidak untuk membuat perangkat lunak baru.
E. Peralatan Pendukung
1. Dreamweaver CS5
Sibero, (2013:384) dalam bukunya menjelaskan Dreamweaver adalah “Suatu
produk web developer yang dikembangkan oleh Adobe Systems Inc”. sebelumnya
produk dreamweaver dikembangkan oleh Macromedia Inc. Yang kemudian sampai
dengan saat ini perkembangannya diteruskan Adobe System Inc. Saat ini terdapat
software dari kelompok Adobe yang belakangan banyak digunakan untuk mendesain
suatu situs website.Versi terbaru dari Adobe Dreamweaver saat ini adalah
Dreamweaver CS5. Pada Dreamweaver CS5, terdapat beberapa kemampuan bukan
hanya sebagai software untuk desain web saja tetapi juga untuk menyunting kode
serta pembuatan aplikasi web dengan menggunakan berbagai bahasa pemrograman
web, antara lain: JPS, PHP, ASP, dan ColdFusion.
Dreamweaver merupakan software utama yang digunakan oleh Web Desainer
maupun Web Programmer dalam mengembangkan suatu situs web. Hal ini
disebabkan ruang kerja, fasilitas, dan kemampuan Dreamwever yang mampu
-
meningkatan produktivitas dan efektifitas dalam desain maupun membangun situs
web.
Menjalankan Dreamwever CS5
Langkah untuk memulai Adobe Dreamwever CS5 adalah: pilih tombol Start,
pilih All Programs, pilih Adobe Master Collection CS5, lalu pilih Adobe
Dreamwever CS5. Setelah itu tampilan awal dari Dreamwever CS5 akan terbuka.
Ruang kerja Dreamwever CS5
Ruang kerja Dreamwever CS5 memiliki komponen – komponen yang
memberikan fasilitas dan ruang untuk menuangkan kreasi saat bekerja. Komponen –
komponen yang disediakan oleh ruang kerja Dreamweaver CS3 antara lain:
Aplication Bar, Toolbar Document, Jendela Dokumen, Workspace Switcher, Panel
Group, Tag Selector, Panel Property, Toolbar Coding, Panel Insert, dan Panel File.
Penjelasan dari komponen-komponen yang terdapat didalam ruang kerja
Dreamweaver CS adalah:
1. Aplication Bar, berada di bagian paling atas jendela aplikasi Dreamweaver
CS5. Baris ini berisi tombol workspace (workspace switcher), menu, dan
aplikasi lainnya.
2. Toolbar Document, berisi tombol-tombol yang digunakan untuk mengubah
tampilan jendela dokumen, sebagai contoh tampilan design atau tampilan Code.
Juga dapat digunakan untuk operasi-operasi umum, misalnya untuk melihat
hasil sementara halaman web pada jendela browser.
3. Jendela Dokumen, adalah lembar kerja tempat Anda membuat dan mengedit
desain halaman web.
-
4. Workspace Switcher, digunakan untuk mengubah tampilan ruang kerja
(workspace) Dreamweaver CS5.
5. Panel Group, adalah Kumpulan panel yang saling berkaitan, panel-panel ini
dikelompokan pada judul-judul tertentu berdasarkan fungsinya.
6. Tag Selector, diletakan di bagian bawah jendela dokumen, satu baris dengan
status bar.
7. Property Inspector, digunakan untuk melihat dan mengubah berbagai property
objek atau teks pada jendela Design
8. Toolbar Coding, berisi tombol-tombol yang digunakan untuk melakukan
operasi code-code standar. Toolbar ini hanya tampil pada jendela Code.
9. Panel Files, digunakan untuk mengatur file-file dan folder-folder yang
membentuk situs website.
a. Mengelola Tampilan Jendela Dokumen
Jendela dokumen menampilakan dokumen pekerjaan yang sedang terbuka.
Untuk mengubah jenis tampilan jendela dokumen, klik masing-masing jenis tampilan
yang ada pada baris toolbar Document.
Berikut ini adalah penjelasan masing-masing jenis tampilan dari jendela dokumen:
1. Design, adalah ruang tempat membuat tampilan layout halaman web,
melakukan pengeditan layout, dan mengembangkan aplikasi secara cepat.
2. Code, tampilan jendela jenis ini menampilkan code-code HTML dan JavaScript.
Selain itu juga dapat digunakan untuk membuat dan mengedit code-code
pemrograman seperti: PHP, ASP, JavaScript, dan bahasa pemrograman lainnya.
-
3. Split, dengan tampilan jenis ini dapat bekerja dengan 2 (dua) tampilan lembar
kerja code dan design dalam waktu yang bersamaan.
4. Live View, tampilan jendela jenis ini digunakan untuk melihat hasil akhir dari
halaman web, sekaligus menguji hasil desain.
2. XAMPP
Menurut Sarwandi, (2016:25) “XAMPP adalah perangkat lunak bebas yang
mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program.
Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost) yang
terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa
yang ditulis dengan bahasa pemrograman PHP dan Perl. Program ini tersedia dalam
GNU (General Public License) dan bebas, merupakan web server yang mudah
digunakan yang dapat melayani tampilan halaman web yang dinamis. Mengenal
bagian XAMPP yang biasa digunakan pada umumnya:
a. Htdocs adalah folder tempat meletakan berkas-berkas yang akan dijalkan,
seperti berkas PHP, HTML, dan skrip lainnya.
b. PhpMyAdmin merupakan bagian umum untuk mengelola basis data MySQL
yang ada di komputer.
c. Kontrol Panel yang berfungsi untuk mengelola layanan (service) XAMPP,
seperti menghentikan layanan ataupun memulai.
2.2. Teori Pendukung
A. Struktur Navigasi
Binanto (2010:268), menjelaskan bahwa “Peta penjejakan (navigasi) merupakan
-
rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat
membantu menganakisa ke interaktifan seluruh pages dalam web dan bagaimana
pengaruh ke interaktifannya terhadap pengguna”.
Ciri khas peta penjejakan yaitu dapat digolongkan menurut kebutuhan akan
objek, kemudian pemakaian, keinteraktifannya, dan kemudahan membuatnya yang
berpengaruh terhadap waktu pembuatan suatu multimedia. Empat macam bentuk dasar
dari struktur navigasi yang bisa digunakan dalam produk multimedia yaitu:
1. Struktur Navigasi Linear (Satu Alur)
Linear (satu alur) merupakan struktur yang hanya mempunyai satu rangkaian
cerita yang berurut. Dengan kata lain struktur ini hanya dapat menampilkan satu demi
satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat di
tampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman
sesudahnya dan tidak dapat menampilkan dua halaman sebelumnya atau dua halaman
sesudahnya. Salah satu yang terpenting dari struktur ini adalah tidak diperkenankan
terjadinya percabangan.
Sumber: Binanto (2010:270)
Gambar II.1.
Struktur Navigasi Linear
-
2. Struktur Navigasi Hierarchical (Hirarki)
Struktur Hierarchi (bercabang) ini percabangan untuk menampilkan data
berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai
Master Page (halaman utama kesatu), halaman utama ini akan mempunyai halaman
percabangan yang dikatakan Slave Page (halaman pendukung). Jika salah satu
halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama
Master Page (halaman utama kedua), dan seterusnya. Yang terpenting dari struktur
penjejakan ini tidak diperkenankan adanya tampilan secara linear.
Sumber: Binanto (2010:270)
Gambar II.2.
Struktur Navigasi Hierarchical (Hirarki)
3. Struktur Navigasi Non Linear (Tidak Berurut)
Struktur penjejakan Non Linear (tidak berurut) merupakan pengembangan dari
struktur penjejakan Linear. Pada struktur ini diperkenankan membuat penjejakan
bercabang. Pemakai bebas menelusuri website tanpa dibatasi oleh suatu rute dimana
kontrol navigasi dapat mengakses ke semua halaman manapun. Percabangan yang
dibuat pada struktur Non Linear ini berbeda dengan percabangan pada struktur
-
Hierarchi, karena pada percabangan Non Linear ini walaupun terdapat percabangan,
tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada Master Page
dan Slave Page.
Sumber: Binanto (2010:271)
Gambar II.3.
Struktur Navigasi Non Linear
4. Struktur Navigasi Composite (Campuran)
Composite (campuran) atau disebut juga struktur penjejakan bebas merupakan
gabungan dari ketiga struktur sebelumnya yaitu Linear, Non Linear dan Hierarchi.
Jika suatu tampilan membutuhkan percabangan, maka dapat dibuat percabangan, dan
bila dalam percabangan tersebut terdapat suatu tampilan yang sama kedudukannya
maka dapat dibuat struktur Linear dalam percabangan tersebut. Setiap struktur peta
penjejakan seperti yang baru di bahas mempunyai fungsi dan tujuan tersendiri, tidak
ada yang lebih baik atau lebih buruk. Penggunaan peta penjejakan bergantung kepada
kebutuhan dan tujuan dari web yang hendak dibuat. Semakin kompleks peta
penjejakan yang digunakan, maka semakin sulit pula pembuatan page dari peta
penjejakan tersebut.
-
Sumber: Binanto (2010:272)
Gambar II.4.
Struktur Navigasi Composit
B. ERD (Entity Relationship Diagram)
1. Pengertian ERD
Menurut Sukamto dan Shalahuddin (2013:50) ERD memiliki beberapa aliran
notasi seperti notasi Chen (dikembangkan oleh Peter Chen), Barker (dikembangkan
oleh Richard Barker, Ian Palmer, Harry Ellis, notasi Crow’s Foor, dan beberapa
notasi lainnya). Namun yang banyak digunakan adalah notasi dari Chen.
2. Komponen ERD
a. Entitas / Entity
Entitas merupakan data inti yang disimpan untuk tabel pada basis data, benda
yang memiliki data dan harus disimpan datanya agar dapat diakses oleh aplikasi
computer, penamaan entitas biasanya lebih ke kata benda dan
belum merupakan nama tabel.
-
b. Atribut
Field atau kolom data yang butuh disimpan dlam suatu entitas.
c. Atribut Kunci Primer
Field atau kolom data yang butuh disimpan dalam suatu entitas dan digunakan
sebagai kunci akses record yang diinginkan, biasanya berupa id,
kunci orimer dapat lebih dari satu kolom, asalkan kombinasi dari beberapa
kolom tersebut bersifat unik (beberapa tanpa ada yang sama).
d. Atribut Multinilai / multivalue
Field atau kolom data yang butuh disimpan dalam suatu entitas yang dapat
memiliki nilai lebih dari satu.
e. Relasi
Relasi yang menghubungkan antar entitas biasanya diawali dengan kerja keras.
f. Asosiasi / Association
Penghubung antara relasi dan entitas dimana di kedua ujungnya memiliki
multiplicity kemungkinan jumlah pemakaian.
3. Kardinalitas
Menurut Fathansyah (2012:78) “Kardinalitas Rasio (Cardinality ratio)
menyatakan jumlah entitas dimana entitas lain dapat dihubungkan ke entitas tersebut
melalui sebuah himpunan relasi”.
a. One to One (1:1)
Tingkat hubungan dinyatakan satu pada satu, jika satu kejadian pada entitas
pertama hanya mempunyai satu hubungan dengan suatu kejadian pada entitas kedua.
-
Demikian juga sebaliknya, satu kejadian pada entitas kedua hanya bisa mempunyai
satu hubungan dengan satu kejadian pada entitas yang pertama.
1 1
Gambar II.5.
One to One (1:1) Ratio
b. One to Many (1:M)
Tingkat hubungan satu pada banyak (1:M) adalah sama dengan banyak pada
satu (M:1), tergantung dari arah mana hubungan tersebut dilihat. Untuk satu kejadian
pada entitas yang pertama dapat mempunyai banyak hubungan dengan kejadian pada
entitas yang kedua.
1 M
Gambar II.6.
One to Many (1:M) Ratio
c. Many to Many (M:M)
Tingkat hubungan banyak pada banyak (M:N) terjadi jika tiap kejadian pada
sebuah entitas akan mempunyai banyak hubungan dengan kejadian pada entitas
lainnya, baik dilihat dari sisi entitas yang pertama maupun dilihat dari sisi entitas
yang kedua
M M
-
Gambar II.7.
Many to Many (M:M) Ratio
C. LRS (Logical Record Structure)
Menurut Lestari (2013:23) “Logical Record Structure dibentuk dengan nomor
tipe record. Beberapa tipe record digambarkan oleh kotak empat persegi panjang dan
dengan nama yang unik”.
Perbedaan LRS dengan ERD dan tipe record berada diluar field tipe record
ditempatkan. LRS terdiri dari link-link diantara tipe record. Link ini menunjukkan
arah dari satu tipe record lainnya.Banyak link dari LRS yang diberi tanda field-field
yang kelihatan pada kedua link type 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 Entity Relationship Diagram dan langsung dikonversikan ke LRS.
Berikut tahapan transformasi ERD ke LRS menurut Wulandari (2013:15-16):
1. Konversi ERD ke LRS, Entity Relationship Diagram harus diubah ke bentuk
LRS (struktur record secara logic). Dari bentuk LRS inilah yang nantinya dapat
ditransformasikan ke bentuk relasi tabel.
2. Konversi ERD ke LRS sebuah model sistem yang digambarkan dengan sebuah
model sistem yang digambarkan dengan sebuah ERD akan mengikuti pola
pemodelan tertentu. Dalam kaitannya dengan konversi ke LRS, untuk
perubahan yang terjadi adalah mengikuti aturan-aturan berikut:
a. Setiap entitas diubah kebentuk kotak dengan nama entitas, berada diluar
kotak dan atribut berada didalam kotak.
-
b. Sebuah relationship kadang disatukan, dalam sebuah kotak bersama entitas,
Kadang sebuah kotak bersama-sama dengan entitas, kadang disatukan dalam
sebuah kotak tersendiri.
c. Konversi LRS ke relasi tabel atau tabel adalah bentuk pernyataan
datasecara grafis dimensi,yang terdiri dari kolom dan baris. Relasi adalah
bentuk visual dari sebuah file, dan tiap tuple dalam sebuah field, atau dalam
bentuk lingkaran Diagram Entity Relationship dikenal dengan sebutan atribut.
D. Black Box Testing
Menurut pressman (2010:459) “Black Box Testing atau pengujian kotak hitam
atau juga disebut Behavioral Testing, berfokus pada persyaratan fungsional dari
perangkat lunak. Artinya teknik black box testing memungkinkan untuk mendapatkan
set kondisi masukan yang sepenuhnya akan melaksanakan semua persyaratan
fungsional untuk suatu program.
Black Box Testing bukan merupakan alternatif dari pengujian White Box
Testing. Sebaliknya, black box testing adalah pendekatan komplementer yang
mungkin untuk mengungkap kelas yang berbeda dari kesalahan daripada metode
white box testing.
Salah satu dari pengujian black-box yang dapat dilakukan oleh seseorang
penguji independen adalah functional testing. Basis uji dari functional testing ini
adalah pada spesifikasi dari komponen perangkat lunak yang akan diuji, functional
testing memastikan bahwa semua kebutuhn-kebutuhan telah dipenuhi dalam sistem
aplikasi. Dengan demikian fungsinya adalah tugas-tugas yang didesain untuk
-
dilaksanakan sistem, functional testing berkonsentrasi pada hasil dari proses, bukan
bagaimana prosesnya terjadi.
-
BAB III
PEMBAHASAN
3.1. Analisa kebutuhan
Analisis kebutuhan sistem yang baru perlu dilakukan agar tidak terjadi kesalahan
dalam pembuatan sistem nanti.Analisis kebutuhan sistem ini lebih ditekankan dalam
penyusunan sistem baru untuk mencapai sasaran yang sesuai dengan kebutuhan.
A. Kebutuhan Pengguna
Pada sistem infromasi ini terdapat 3 pengguna, yaitu admin, user dan pelanggan
dengan mempunyai masing-masing kebutuhan sebagai berikut:
1. Administrator
a. Admin bisa menambah daftar admin dan mengubah,menghapus
b. Admin bisa melihat member yang sudah menjadi pelanggan
c. Admin bisa menambah ongkos kirim perkota dan mengubah, mengapus
d. Admin bisa menambah kategori dan mengubah,mengapus
e. Admin bisa menambah stok barang dan mengubah,mengapus
f. Admin bisa melihat laporan pesanan, mengkonfirmasi pemesanan dan melihat
detail pemesanan
g. Admin dapat melihat data konfirmasi dari pelanggan
h. Admin bisa menambah kontak dan mengapus,mengubah
2. User
a. Hanya dapat melihat-lihat produk yang ditawarkan oleh web jam tangan.
b. User dapat membuka halaman barang,cara pembelian,pembayaran,
-
c. User bisa melihat dan mengisitestimoni
d. User dapat mendaftar menjadi pelanggan dan setelah mendatar bisa login
menjadi pelanggan.
3. Pelanggan
a. Melihat Tampilan produk yang akan dipesan berupa spesifiksi gambar dan
deskripsi mengenai keterangan dari produk tersebut.
b. Menampilan form cara pembelian untuk mengetahui bagaimana pembelian di
situs web kami.
c. Menampilkan form pembayaran untuk mengetahui bagaimana cara membayar
melalui sistem teransfer.
d. pelangga bisa mengisi komentar tentang web jam tangan di testimoni
B. Kebutuhan sistem
1. Memberikan laporan transaksi dalam bentuk invoice pemesanan
2. Memberikan layanan bagi websiteatau toko yang ingin menampilkan
produkterbaiknya dan mempromosikan produk tersebut dengan ketentuan
yang terbaik.
3.2.Perancangan Perangkat lunak
Menjelaskan rancangan antar muka (interface) yang terdapat pada aplikasi
penjualan jam tangan ,sebagai berikut:
3.2.1 Rancangan Antar Muka
A. Rancangan Antar Muka Admin
-
Pada rancangan antar muka (interface) ini penulis akan menggambarkan semua
rancangan tampilan yang ada:
1. Rancangan Antar Muka Halaman Login Admin
Username
Password
Form Login
Login
Gambar III.1.
Rancangan Antar Muka Halaman Login Admin
2. Rancangan Antar Muka Halaman Beranda Admin
HEADER
Menu
HEADER
-
3. Rancangan Antar Muka Halaman Admin
HEADER
Menu
HEADER
-
4. Rancangan Antar Muka Halaman Pelanggan
HEADER
Menu
HEADER
-
5. Rancangan Antar Muka Halaman Kota
HEADER
Menu
HEADER
-
6. Rancangan Antar Muka Halaman Kategori
HEADER
Menu
HEADER
-
7. Rancangan Antar Muka Halaman Barang
HEADER
Menu
HEADER
-
8. Rancangan Antar Muka Halaman Pemesanan
HEADER
Menu
HEADER
-
9. Rancangan Antar Muka Halaman Konfirmasi
HEADER
Menu
HEADER
-
10. Rancangan Antar Muka Halaman Kontak
HEADER
Menu
HEADER
-
B. Rancangan Antar Muka User
Apabila user membuka http://localhost//GI29SHOP/index.phpakan melihat
Gambar web, berikut rancangannya :
11. Rancangan Antar Muka Halaman Beranda
Keranjang belanja : 0 Login
Daftar
Barang _________________________________________________________________________________________
Kategori --------------------------------- Semua Kategori JAM TANGAN PRIA JAM TANGAN WANITA JAM TANGAN PASANGAN JAM TANGAN ANAK-ANAK
Informasi Kontak --------------------------------- No. Telp : xxxxxxxxxxx Bbm xxxxxxxxxxx Email xxxxxxxxxxx Whastsapp xxxxxxxxxxx
Branda
Cari
Barang Cara Pembelian Pembayaran Testimoni
GAMBAR
GAMBAR
Produk Baru __________________________________________________________________________
GAMBAR
GAMBAR GAMBAR GAMBAR
GAMBAR
GAMBAR GAMBARGAMBAR GAMBAR
GAMBAR
GAMBAR GAMBAR
Gambar III.11.
Rancangan Antar Muka HalamanBeranda
http://localhost/GI29SHOP/index.php
-
12. Rancangan Antar Muka Halaman Barang
Keranjang belanja : 0 Login
Daftar
Barang _________________________________________________________________________________________
Kategori --------------------------------- Semua Kategori JAM TANGAN PRIA JAM TANGAN WANITA JAM TANGAN PASANGAN JAM TANGAN ANAK-ANAK
Informasi Kontak --------------------------------- No. Telp : xxxxxxxxxxx Bbm xxxxxxxxxxx Email xxxxxxxxxxx Whastsapp xxxxxxxxxxx
Branda
Cari
Barang Cara Pembelian Pembayaran Testimoni
GAMBAR
GAMBAR
Barang ___________________________________________________________________________
Halaman : (1) 2 3 4 5 6 7
GAMBAR
GAMBAR GAMBAR GAMBAR
GAMBAR
GAMBAR GAMBAR GAMBAR
GAMBAR GAMBARGAMBAR GAMBAR
Gambar III.12.
Rancangan AntarMukaHalaman Barang
-
13. Rancangan Antar Muka Halaman Cara Pembelian
Keranjang belanja : 0 Login
Daftar
Barang _________________________________________________________________________________________
Kategori --------------------------------- Semua Kategori JAM TANGAN PRIA JAM TANGAN WANITA JAM TANGAN PASANGAN JAM TANGAN ANAK-ANAK
Informasi Kontak --------------------------------- No. Telp : xxxxxxxxxxx Bbm xxxxxxxxxxx Email xxxxxxxxxxx Whastsapp xxxxxxxxxxx
Branda
Cari
Barang Cara Pembelian Pembayaran Testimoni
GAMBAR
GAMBAR
Pembelian __________________________________________________________________________
GAMBAR GAMBAR GAMBAR
GAMBAR
Gambar III.13.
Rancangan Antar Muka Halaman Cara Pembelian
-
14. Rancangan Antar Muka Halaman Pembayaran
Keranjang belanja : 0 Login
Daftar
Barang _________________________________________________________________________________________
Kategori --------------------------------- Semua Kategori JAM TANGAN PRIA JAM TANGAN WANITA JAM TANGAN PASANGAN JAM TANGAN ANAK-ANAK
Informasi Kontak --------------------------------- No. Telp : xxxxxxxxxxx Bbm xxxxxxxxxxx Email xxxxxxxxxxx Whastsapp xxxxxxxxxxx
Branda
Cari
Barang Cara Pembelian Pembayaran Testimoni
GAMBAR
GAMBAR
Pembayaran ___________________________________________________________________________
Daftar Rekening ___________________________________________________________________________
GAMBAR GAMBAR GAMBAR
GAMBAR
GAMBAR
GAMBAR
GAMBAR
Gambar III.14.
Rancangan Antar Muka Halaman Pembayaran
-
15. Rancangan Antar Muka Halaman Testimoni
Keranjang belanja : 0 Login
Daftar
Barang _________________________________________________________________________________________
Kategori --------------------------------- Semua Kategori JAM TANGAN PRIA JAM TANGAN WANITA JAM TANGAN PASANGAN JAM TANGAN ANAK-ANAK
Informasi Kontak --------------------------------- No. Telp : xxxxxxxxxxx Bbm xxxxxxxxxxx Email xxxxxxxxxxx Whastsapp xxxxxxxxxxx
Branda
Cari
Barang Cara Pembelian Pembayaran Testimoni
GAMBAR
GAMBAR
Testimoni ___________________________________________________________________________
Halaman :
GAMBAR GAMBAR GAMBAR
GAMBAR
No Nama Tanggal Testimoni
Tulis Testimoni
Gambar III.15.
Rancangan Antar Muka Halaman Testimoni
-
C. Rancangan Antar Muka Halaman Pelanggan
Bila user sudah melakukan pendaftaran di website maka status user tersebut
menjadi pelanggan, berikut rancangannya :
16. Rancangan Antar Muka Halaman Daftar Pelanggan
Gambar III.16.
Rancangan Antar Muka Halaman Daftar Pelanggan
-
17. Rancangan Antar Muka Halaman Login Pelanggan
Gambar III.17.
Rancangan Antar Muka Halaman Login Pelanggan
-
18.Rancangan Antar Muka Halaman Beranda
Profil Kerajang Belanja : 0 Pelanggan
Logout
Barang _________________________________________________________________________________________
Kategori --------------------------------- Semua Kategori JAM TANGAN PRIA JAM TANGAN WANITA JAM TANGAN PASANGAN JAM TANGAN ANAK-ANAK
Informasi Kontak --------------------------------- No. Telp : xxxxxxxxxxx Bbm xxxxxxxxxxx Email xxxxxxxxxxx Whastsapp xxxxxxxxxxx
Branda
Cari
Barang Cara Pembelian Pembayaran Testimoni
GAMBAR
GAMBAR
Produk baru
GAMBAR GAMBAR GAMBAR
GAMBAR
Data Transaksi
GAMBAR GAMBAR GAMBAR
GAMBAR GAMBAR GAMBAR GAMBAR
Gambar III.18.
Rancangan Antar Muka HalamanBeranda
-
19. Rancangan Antar Muka Halaman Barang
Profil Kerajang Belanja : 0 Pelanggan
Logout
Barang _________________________________________________________________________________________
Kategori --------------------------------- Semua Kategori JAM TANGAN PRIA JAM TANGAN WANITA JAM TANGAN PASANGAN JAM TANGAN ANAK-ANAK
Informasi Kontak --------------------------------- No. Telp : xxxxxxxxxxx Bbm xxxxxxxxxxx Email xxxxxxxxxxx Whastsapp xxxxxxxxxxx
Branda
Cari
Barang Cara Pembelian Pembayaran Testimoni
GAMBAR
GAMBAR
Produk baru
GAMBAR GAMBAR GAMBAR
GAMBAR
Data Transaksi
Barang
Halaman : (1) 2 3 4 5 6 7
GAMBAR GAMBAR GAMBAR GAMBAR
GAMBAR GAMBAR GAMBAR GAMBAR
Data Transaksi
Gambar III.19.
Rancangan Antar Muka HalamanBarang
-
20. Rancangan Antar Muka Halaman Cara Pembelian
Profil Kerajang Belanja : 0 Pelanggan
Logout
Barang _________________________________________________________________________________________
Kategori --------------------------------- Semua Kategori JAM TANGAN PRIA JAM TANGAN WANITA JAM TANGAN PASANGAN JAM TANGAN ANAK-ANAK
Informasi Kontak --------------------------------- No. Telp : xxxxxxxxxxx Bbm xxxxxxxxxxx Email xxxxxxxxxxx Whastsapp xxxxxxxxxxx
Branda
Cari
Barang Cara Pembelian Pembayaran Testimoni
GAMBAR
GAMBAR
Produk baru
GAMBAR GAMBAR GAMBAR
GAMBAR
Data Transaksi
Pembelian
Data Transaksi
Gambar III.20.
Rancangan Antar Muka Halaman Cara Pembelian
-
3.2.2. Rancangan Basis Data
Rancangan basis data menghasilkan pemetaan tabel-tabel yang
digunakandengan Entity Relationship Diagram (ERD).
a.Entity Relationship Diagram (ERD)
Admin
Konfirmasi
Kontak Keranjang
Kategori
Pesanan
Barang
PelangganKota
Detail
Pemesanan
Testimoni
Id_PelangganId_Pelanggan
Nm_PelangganNm_Pelanggan
EmailEmail TeleponTelepon
Id_BarangId_Barang
Mengisi
Id_TestimoniId_Testimoni NamaNama
Isi_TestimoniIsi_Testimoni
TanggalTanggal
Memiliki
OngkirOngkir
Nm_KotaNm_Kota
Id_KotaId_Kota
No_KontakNo_Kontak
Nm_KontakNm_Kontak
Id_KontakId_Kontak
AlamatAlamat
Kode_PosKode_Pos
PasswordPassword
Id_KotaId_Kota
Melihat
Nm_BarangNm_Barang
GambarGambar
DeskripsiDeskripsiHargaHarga
StokStok
Tgl_UploadTgl_Upload
Id_KategoriId_Kategori
Memesan
JumlahJumlah
Id_BarangId_Barang
Id_KeranjangId_Keranjang
Id_PelangganId_Pelanggan
Melihat
Nm_KategoriNm_Kategori
Id_KategoriId_Kategori
Terdiri
MemprosesTgl_PesanTgl_Pesan
Total_BayarTotal_Bayar
StatusStatus
Id_PelangganId_Pelanggan
Id_PesanId_Pesan
Id_DetailId_Detail
JumbelJumbel
Id_BarangId_Barang
Id_PesanId_Pesan
Mengisi
UsernameUsername
Id_KonfirmasiId_Konfirmasi
Id_PesanId_Pesan
NamaNama
No_RekNo_Rek
Bank_TujuanBank_Tujuan
Jml_TransferJml_Transfer
KeteranganKeterangan
Melakukan
11
Id_AdminId_Admin
NamaNama
UsernameUsername
PasswordPassword
Mengirim data
1
M
1
1
1
M
M
I
M
M 1
1
1
1
M
1
1
1
1
Gambar III.24.
Entity Relationship Diagram
-
b. Logical Record Structure (LRS)
Admin
Id_Admin*Nama
UsernamePassword
Barang
Id_Barang*Nm_Barang
GambarDeskripsi
HargaStok
Tgl_UploadId_Kategori**
Detail_Pesanan
Id_Detail*Jumbel
Id_Barang**Id_Pesan**
Kategori
Id_Kategori*Nm_Kategori
Keranjang
Id_Keranjang* Id_Barang**
Jumlah Id_Pelanggan**
Konfirmasi
Id_Konfirmasi*Id_Pesan**
NamaNo_Rek
Bank_TujuanJml_TransferKeterangan
Pelanggan
Id_Pelanggan*Nm_Pelanggan
EmailTeleponAlamat
Kode_PosUsernamePasswordId_Kota**
Pesanan
Id_Pesan*Tgl_Pesan
Total_BayarStatus
Id_Pelanggan**
1M
1 1
1
1 1
1
1
111
M
1
1
Kontak
Id_Kontak*Nm_KontakNo_Kontak
Kota
Id_Kota*Nm_Kota
Ongkir
Testimoni
Id_Testimoni*Nama
tanggalIsi_Testimoni
M
M
1
11
Gambar III.25.
Logical Record Structure
-
c. Spesifikasi File
Spesifikasi file yang digunakan dalam perancanga program penjualan
Web ini terdiri dari satu database, yaitu
1. Spesifikasi File Admin
Nama database : Db_Jam
Nama Tabel : Admin
Akronim : Admin
Fungsi : Untuk Menyimpan Data Admin
File : File Master
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 61 karakter
Kunci Field : Id_admin
Software : MYSQL
Tabel III.1
Spesifikasi File Admin
No Nama Field Type Panjang Keterangan
1 Id_admin Int 11 Primary Key
2 Nama Varchar 30
3 Username Varchar 10
-
2. Spesifikasi File Barang
Nama database : Db_jam
Nama Tabel : Barang
Akronim : Barang
Fungsi : Untuk Menyimpan Data Barang
File : File Transaksi
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 158 karakter
Kunci Field : Id_Barang
Software : MYSQL
Tabel III.2
Spesifikasi File Barang
No Nama Field Type Panjang Keterangan
1 Id_barang Char 6 Primary Key
2 Nm_barang Varchar 30
3 Gambar Varchar 100
4 Deskrirpsi Text
4 Password Varchar 10
-
5 Harga Double
6 Stok Int 11
7 Tgl_upload Date
8 Id_kategori Int 11 Foreign Key
3. Spesifikasi File Detail_Pesanan
Nama database : Db_Jam
Nama Tabel : Detail_Pesanan
Akronim : Detail_Pesanan
Fungsi : Untuk Menyimpan Data Pesanan
File : File Transaksi
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 34 karakter
Kunci Field : Id_detail
Software : MYSQL
Tabel III.3
Spesifikasi File Detail_Pesanan
No Nama Field Type Panjang Keterangan
1 Id_detail Int 11 Primary Key
-
2 Jumbel Int 11
3 Id_barang Char 6 Foreign Key
4 Id_pesan Char 6 Foreign Key
4. Spesifikasi File Kategori
Nama database : Db_jam
Nama Tabel : Kategori
Akronim : Kategori
Fungsi : Untuk Menyimpan Data Kategori
File : File Master
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 41 karakter
Kunci Field : Id_kategori
Software : MYSQL
Tabel III.4
Spesifikasi File Kategori
No Nama Field Type Panjang Keterangan
1 Id_kategori Int 11 Primary Key
-
2 Nm_kategori Varchar 30
5. Spesifikasi File Keranjang
Nama database : Db_jam
Nama Tabel : Keranjang
Akronim : Keranjang
Fungsi : Untuk Menyimpan Data Keranjang
File : File Transaksi
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 39 karakter
Kunci Field : Id_keranjang
Software : MYSQL
Tabel III.5
Spesifikasi File Keranjang
No Nama Field Type Panjang Keterangan
1 Id_kerajang Int 11 Primary Key
2 Id_barang Varchar 6 Foreign Key
3 Jumlah Int 11
4 Id_pelanggan Int 11 Foreign Key
-
6. Spesifikasi File Konfirmasi
Nama database : Db_jam
Nama Tabel : Konfirmasi
Akronim : Konfirmasi
Fungsi : Untuk Menyimpan Data Konfirmasi
File : File Transaksi
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 82 karakter
Kunci Field : Id_ konfirmasi
Software : MYSQL
Tabel III.6
Spesifikasi File Konfirmasi
No Nama Field Type Panjang Keterangan
1 Id_konfrimasi Int 11 Primary Key
2 Id_pesan Char 6 Foreign Key
3 Nama Varchar 30
4 No_rek Varchar 15
5 Bank_tujuan Varchar 20
6 Jml_transfer Double
-
7 Keterangan Text
7. Spesifikasi File Kontak
Nama database : Db_jam
Nama Tabel : Kontak
Akronim : Kontak
Fungsi : Untuk Menyimpan Data Kontak
File : File Master
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 91 karakter
Kunci Field : Id_ Kontak
Software : MYSQL
Tabel III.7
Spesifikasi FileKontak
No Nama Field Type Panjang Keterangan
1 Id_kontak Int 11 Primary Key
2 Nm_kontak Varchar 30
3 No_kontak Varchar 50
-
8. Spesifikasi File Kota
Nama database : Db_jam
Nama Tabel : Kota
Akronim : Kota
Fungsi : Untuk Menyimpan Data Kota
File : File Master
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 41 karakter
Kunci Field : Id_ kota
Software : MYSQL
Tabel III.8
Spesifikasi File Kota
No Nama Field Type Panjang Keterangan
1 Id_kota Int 11 Primary Key
2 Nm_kota Varchar 30
3 Ongkir Double
-
9. Spesifikasi File Pelanggan
Nama database : Db_jam
Nama Tabel :Pelanggan
Akronim :Pelanggan
Fungsi : Untuk Menyimpan Data Pelanggan
File : File Master
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 123 karakter
Kunci Field : Id_ Pelanggan
Software : MYSQL
Tabel III.9
Spesifikasi File Pelanggan
No Nama Field Type Panjang Keterangan
1 Id_pelanggan Int 11 Primary Key
2 Nm_pelanggan Varchar 30
3 Email Varchar 30
4 Telepon Varchar 12
5 Alamat Text
6 Kode_pos Varchar 5
-
7 Username Varchar 12
8 Password Varchar 12
9 Id_kota Int 11 Foreign Key
10. Sesifikasi File Pesanan
Nama database : Db_jam
Nama Tabel :Pesanan
Akronim : Pesanan
Fungsi : Untuk Menyimpan Data Pesanan
File : File Master
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 17 karakter
Kunci Field : Id_ Pesan
Software : MYSQL
Tabel III.10
Spesifikasi File Pesanan
No Nama Field Type Panjang Keterangan
1 Id_pesan Char 6 Primary Key
2 Tgl_pesan Date
-
3 Total_bayar Double
4 Status Enum
5 Id_pelanggan Int 11 Foreign Key
11. Spesifikasi File Testimoni
Nama database : Db_jam
Nama Tabel :Testimoni
Akronim : Testimoni
Fungsi : Untuk Menyimpan Data Testimoni
File : File Master
Organisasi File : Index Sequential
Media File : Harddisk
Panjang Record : 41 karakter
Kunci Field : Id_ testimoni
Software : MYSQL
Tabel III.11
Spesifikasi File Testimoni
No Nama Field Type Panjang Keterangan
1 Id_testimoni Int 11 Primary Key
2 Nama Varchar 30
-
3 Tanggal Date
4 Isi_testimoni Text
3.2.3 Rancangan Struktur Navigasi
Index
Beranda Barang
User
Cara Pembelian
Pembayaran Testimoni
Gambar III.26.
Struktur Navigasi User
-
Daftar
Login
NamaLengkap
EmailNo.
TeleponAlamat Kota
Kode Pos
UserName
Password Simpan
PilihKota
PasswordUser
Name
Gambar III.27.
Struktur Navigasi Daftar Pelanggan
-
Branda Admin Pelanggan Kota Kategori Barang Pemesanan Konfirmasi Kontak Logout
Admin
Login
Index
TambahAdmin
TambahKota
TambahBarang
Ubah Hapus
TambahKontak
TambahKategori
HapusUbah
Ubah Hapus Ubah Hapus Ubah Hapus
Gambar III.28.
Struktur Navigasi Admin
-
3.3. Implementasi dan Pengujian Unit
3.3.1 Implementasi
A. Rancangan Antar MukaAdmin
Implementasi rancangan antar muka admin pada websiteberdasarkan hasil
rancangannya sebagai berikut :
1. Tampilan Halaman Login Admin
Halaman ini merupakan halaman yang pertama kali diakses oleh admin,
dimana admin ini harus login terlebih dahulu sebelum membuka halaman-
halaman lain.
Gambar III.29.
Tampilan Halaman Login Admin
-
2. Tampilan Halaman Beranda
Halaman ini merupakan halamanutama yang tampilketika seorang
administrator berhasil login menggunakan username dan password.
Gambar III.30.
TampilanHalaman Beranda
3. Tampilan Halaman Admin
Halaman ini merupakan halaman administrator yang membuat
administrator menambahkan data admin.
Gambar III.31.
TampilanHalamanAdmin
-
4. Tampilan Halaman Pelanggan
Halaman inimerupakan halamanpelangganyang di administrator yang
menampilakan biodatapelanggan yang telah mendaftar menjadi member.
Gambar III.32.
Tampilan Halaman Pelanggan
5. Tampilan Halaman kota
Halaman ini merupakan halaman kota pelanggan. Admin dapat
menambahkan kota untuk pelanggan.
Gambar III.33.
TampilanHalaman Kota
-
B. Implementasi Rancangan Antar Muka User
Implementasi rancangan antar muka user pada websiteberdasarkan hasil
rancangannya sebagai berikut :
1. Tampilan Halaman Beranda
Halaman ini merupakan tampilan layar utama untuk pengunjung atau
useryang belum melakukan pendaftran di website ini.
Gambar III.40.
TampilanHalaman Beranda
-
2. Tampilan Halaman Barang
Halaman ini merupakan tampilan untuk melihat banyak item barang yang
dijual .
Gambar III.41.
Tampilan Halaman Barang
3. Tampilan Halaman Cara Pembelian
Halaman ini merupakan tampilan dimana user dapat memahami tata cara
untuk melakukan transaksi pembelian barang di website ini.
Gambar III.42.
TampilanHalaman Cara Pembelian
-
4. Tampilan Halaman Pembayaran
Halaman ini merupakan tampilan untuk user agar dapat mengetahui tata
cara pembayaran di website ini.
Gambar III.43.
Tampilan Halaman Pembayaran
-
5. Tampilan Halaman Testimoni
Halaman ini merupakan tampilan untuk user dan pengguna websiteagar
dapat memberikan penilaian pelayana di website ini.
Gambar III.44.
TampilanHalaman Testimoni
-
C. Implementasi Rancangan Antar Muka Pelanggan
Implementasi rancangan antar muka pelanggan padawebsiteberdasarkan
hasil rancangannya sebagai berikut :
1. Tampilan Halaman Daftar pelanggan
Halaman ini merupakan halaman untuk pendaftaran baru agar menjadi
pelnggan sehingga dapat bertransaksi pembelian barang di website ini.
Gambar III.45.
TampilanHalaman Daftar Pelanggan
2. Tampilan Halaman Login pelanggan
Halaman ini merupakan halaman yang digunakan apabila pelanggan baru
sudah berhasil melakukan pendaftaran menjadi member di website ini.
-
Gambar III.46.
TampilanHalaman Login Pelanggan
3. Tampilan Halaman Beranda
Halaman ini merupakan halaman utama pelanggan yang tampil ketika
seorang pelangga berhasil login menggunakan username dan password.
Gambar III.47.
TampilanHalaman Beranda
-
4. Tampilan Halaman Barang
Halaman ini merupakan tampilan untuk melihat banyak itembarang yang
dijual.
Gambar III.48.
TampilanHalaman Barang
3.3.2. Pengujian Unit
Pengujian terhadap program yang dibuat menggunakan blackbox testing yang
focus terhadap prose masukan dan keluaran program.
a. Pengujian Terhadap Form Login Admin
Tabel III.12.
Hasil Pengujian Black Box Testing Form Login Admin
No Scenario Pengujian Test Case Hasil
yangdiingink
an
Hasil
Pengujian
Kesimpulan
-
1 Username password
tidakdiisi,kemudian
klik tombol login
Username:
(kosong)
password:
(kosong)
Sistemmemb
erikan pesan,
username
dan password
harus diisi!
Sesuai
Harapan
Vaild
2 Username diisi,
password tidak
diisi, kemudian klik
tombol login
Username:
Admin
(benar)
password:
(kosong)
Sistem
memberikan
pesan,
username
dan password
harus diisi!
Sesuai
harapan
Vaild
3 Username tidak
diisi, dan password
diisi, kemudian klik
tombol login
Username:
(kosong)
password:
123
(benar)
Sistem
memberikan
pesan,
username
dan password
harus diisi!
Sesuai
harapan
Vaild
4 Username dan
password diisi
dengan data salah,
kemudian klik
Username:
Admin
(benar)
password:
Sistem
menampilkan
Pesan,
Sesuai
harapan
Vaild
-
tombol login adit
(salah)
password
salah
5 Username dan
password diisi
dengan data benar,
kemudian klik
tombol login
Username:
Admin
(benar)
password:
123
(benar)
Sistem
menampilkan
Pesan
Login
berhasil.
Selamatdatan
g!
Sesuai
Harapan
Vaild
b. Pengujian Terhadap Form Login Pelanggan
Tabel III.13.
Hasil Pengujian Black Box Testing Form Login pelanggan
No ScenarioPengujian Test Case Hasil yang
diinginkan
Hasil
Pengujian
Kesimpulan
1 Username password
tidak diisi,
kemudian
klik tombol login
Username:
(kosong)
password:
(kosong)
Sistem
memberikan
pesan,
username
dan password
harus diisi!
Sesuai
harapan
Vaild
2 Username diisi, dan
password tidak
Username:
haris
Sistem
memberikan
Sesuai
harapan
Vaild
-
diisi, kemudian
klik tombol login
(benar)
Password:
(kosong)
pesan,
username
dan password
harus diisi!
3 Username tidak
diisi, dan password
diisi, kemudian
klik tombol login
Username:
(kosong)
Password:
123
(benar)
Sistem
memberikan
pesan,
usernsme
dan password
harus diisi!
Sesuai
harapan
Vaild
4 Username password
diisi dengan data
salah, kemudian
klik tombol login
Username:
agus
(salah)
password:
rini
(salah)
Sistem
menampilkan
pesan,
username
salah!
Sesuai
harapan
Vaild
5 Username dan
password diisi
dengan data yang
benar, kemudian
klik tombol login
Username:
haris
(benar)
password :
123
(benar)
Sistem
menampilkan
pesan,
login
berhasil.
Selamat
datang
haris!
Sesuai
harapan
Vaild
-
c. Pengujian Terhadap Form DaftarPelanggan
Tabel III.14.
Hasil Pengujian BlackBox Testing Form Daftar Pelanggan
No Scenario Pengujian Test Case Hasil Yang
Diharapkan
Hasil
Pengujian
Kesimpulan
1 Tidak mengisi
nama lengkap,
email, no.telepon,
alamat, kota, kode
pos, username dan
password,
kemudian klik
simpan
Tidak
mengisi
Nama
lengkap:
(kosong)
email:
(kosong)
no.telepon:
(kosong)
Alamat:
(kosong)
Kota:
(kosong)
kode,pos:
(kosong)
Username:(
kosong)
password:
(kosong)
Sistem
memberikan
pesan.
Nama
lengkap
email
telepon
Alamat
Silahkan
pilih kota!
Kode,pos
Username
Password
tidak boleh
kosong!
Sesuai
harapan
Vaild
-
2 Mengisi nama
lengkap dan email,
no.telepon,usernam
e.
Lalu, alamat,kota
kode,pos password
tidak diisi
kemudian klik
tombol simpn
Mengisi
Nama
lengkap:
Sugi harto
Email:
SugiASM@
gmail.com
No.tlp:
083808089
Username:
Sugi
Alamat:
(kosong)
Kota:
(kosong)
Kode,pos:
(kosong),
Password:
(kosong)
Sistem
memberikan
pesan
Alamat
Kota.
Silahkan
pilih kota
Kode,pos
password,
tidak boleh
kosong
Sesuai
harapan
Vaild
3 Mengisi email
lalu nama lengkap,
no.telepon,alamat,k
ota,kode.pos,userna
me,password tidak
diisi, kemudian klik
tombol simpan
Mengisi
nama
lengkap:
(kosong)
email:
Rini@gmail.
com
Sistem
memberikan
pesan,
nama,
lengkap
no.telepon,
Sesuai
harapan
Vaild
mailto:[email protected]:[email protected]:[email protected]:[email protected]
-
no.telepon:
(kosong)
Alamat:
(kosong)
Kota:
(kosong)
Kode.pos:
(Kosong)
username:
(kosong)
password:
(kosong)
telepon
alamat
kota
silahkan
pilih kota
kode.pos
username,
password,
tidak boleh
kosong
4 Mengisi username
dan password, lalu
nama lengkap,
email, no.telepon,
alamat,kota,kode.
pos.kosong
kemudian klik
tombol simpan
Mengisi
Nama
lengkap:
(Kosong)
email:
(kosong)
no.tlp:
(kosong)
alamat:
(kosong)
kota:
(kosong)
Sistem
memberikan
pesan,
Nama
lengkap
email,
no.telepon
alamat
Kota
silahkan
pilih kota
Kode,pos
Tidak boleh
Sesuai
harapan
Vaild
-
kode.pos:
(kosong)
username:
zahra
password:
123
kosong,
5 Mengisi nama
lengkap, email,
no.telepon,alamat,
kota,kode.pos,usern
ame,password
kemudian klik
tombol simpan
Nama
lengkap:
sri wahyuni
Email :
sriwahyuni
@gmail.co
m
No.tlp:
083890912
Alamat:
Jalan jati
Kota:
Jakarta
Kode.pos:
10266
Username:
sri
Password:
12345
Sistem
memberikan
pesan,
pendaftaran
berhasil,
silahkan
login
dengan
username
dan
password
anda
Sesuai
harapan
Vaild
mailto:[email protected]:[email protected]:[email protected]
-
BAB IV
KESIMPULAN
4.1. Kesimpulan
Dengan uraian tentang pembuatan sistem informasi penjualan jam tangan
berbasis web yang telah dibahas pada bab sebelumnya, penulis dapat memberikan
kesimpulan sebagai berikut:
1. Dengan adanya website sistem informasi penjualan jam tangan di harapkan
lebih mudah dan cepat tersampaikan kepada masyarakat umum.
2. Sistem Informasi penjualan jam tangan online ini dapat memperluas jaringan
pemasaran serta promosi yang lebih cepat dan akurat.
3. Dapat memberikan rasa nyaman serta efisien kepada masyarakat dalam
membeli jam tangan.
4. Dapat mengetahui laporan pemesanan jam tangan perminggu, perbulan,
bahkan pertahun secara lebih cepat.
4.2. Saran
Dengan kesimpulan diatas penulis memberikan beberapa saran diantaranya
adalah sebagai berikut:
1. Untuk mendukung kelancaran dan menghadiri error program, diperlukan
pemeliharaan dan pengembangan pada aplikasi website penjualan jam tangan
secara online yang dilakukan secara berkala.
-
2. Meskipun sudah menggunakan website sebagai media penyampaian informasi
kepada masyarakat umum, jangan sampai lemah dengan ancaman-ancaman
yang terjadi seperti Hacking,Cracking, dan sebagainya.
3. Dibutuhkan fasilitas untuk terhubung dengan internet, sehingga mudah dalam
pengaplikasian website serta bisa diakses oleh masyarakat luas.
4. Selalu mengupdate isi website penjualan jam tangan sehingga pelanggan
dapat mengetahui produk-produk terbaru.
-
DAFTAR PUSTAKA
Binanto. 2010. Multimedia Digital Dasar Teori dan Pengembangannya.
Yogyakarta:ANDI.
Fathansyah. 2015. Basis Data. Bandung:Informatika Bandung.
Munir. 2011. Algoritma dan Pemrograman Dalam Bahasa Pascal dan C.
Bandung:Informatika Bandung.
Pressman. 2010. Software Engineering a practitioner’s approach. New
York:McGraw-Hill.
Sarwandi. 2016. Toko Online Modern dengan Opencart. Jakarta:PT. Elex Media
Komputindo.
Sibero. 2013. Web Programming Power Pack. Yogyakarta:MediaKom.
Sukamto, dan Shalahuddin. 2