PERANCANGAN SISTEM INFORMASI PENJUALAN LAPTOP BERBASIS WEB TUGAS AKHIR Diajukan untuk memenuhi salah satu syarat kelulusan Program Diploma Tiga (D.III) ANDRI NIM : 12140654 Program Studi Manajemen Informatika Akademi Manajemen Informatika dan Komputer “BSI Jakarta” Jakarta 2017
79
Embed
TUGAS AKHIR...Akhir kata semoga penulisan tugas akhir ini dapat berguna bagi penulis khususnya dan bagi para pembaca yang berminat pada umumnya. Jakarta, 10 Juli 2017 Penulis Andri
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
PERANCANGAN SISTEM INFORMASI PENJUALAN LAPTOP
BERBASIS WEB
TUGAS AKHIR
Diajukan untuk memenuhi salah satu syarat kelulusan Program Diploma Tiga (D.III)
ANDRI
NIM : 12140654
Program Studi Manajemen Informatika
Akademi Manajemen Informatika dan Komputer “BSI Jakarta”
Jakarta
2017
vii
KATA PENGANTAR
Alhamdulillah, Segala Puji dan Syukur kehadirat Allah SWT. Yang telah
melimpahkan rahmat serta karunia-Nya sehingga penulis dapat menyelesaikan
penulisan Tugas Akhir ini yang berjudul “PERANCANGAN SISTEM INFORMASI
PENJUALAN LAPTOP BERBASIS WEB”. Tugas Akhir ini diajukan untuk
memenuhi salah satu syarat kelulusan Program Diploma Tiga (D.III) AMIK BSI.
Penulis sangat menyadari bahwa tanpa adanya bimbingan dan dorongan dari
semua pihak, maka penulisan Tugas Akhir ini tidak berjalan dengan lancar dan tepat
waktu. Oleh karena itu pada kesempatan ini, maka perkenankanlah penulis
menyampaikan rasa terima kasih yang sebesar-besarnya kepada:
1. Direktur Akademi Manajemen Informatika dan Komputer Bina Sarana
Informatika.
2. Ketua Program Studi Manajemen Informatika AMIK Bina Sarana Informatika.
3. Anggi Oktaviani, M.Kom. selaku dosen pembimbing tugas akhir.
4. Staff/karyawan/dosen dilingkungan Akademi Bina Sarana Informatika.
5. Orang tua dan kakak-kakak yang telah memberikan dukungan moral maupun
spiritual.
6. Rekan-rekan mahasiswa kelas MI-6B.
Serta semua pihak yang terlalu banyak untuk disebutkan satu persatu dalam
mewujudkan penulisan ini. Penulis menyadari bahwa penulisan tugas akhir ini masih
viii
jauh dari sempurna, untuk itu penulis mohon kritik dan saran membangun demi
kesempurnaan penulisan dimasa yang akan datang.
Akhir kata semoga penulisan tugas akhir ini dapat berguna bagi penulis
khususnya dan bagi para pembaca yang berminat pada umumnya.
Jakarta, 10 Juli 2017
Penulis
Andri
ix
ABSTRAKSI
Andri (12140654), “Perancangan Sistem Informasi Penjualan Laptop Berbasis Web”. Pembuatan aplikasi penjualan laptop berbasis web dengan E-Commerce menggunakan PHP & JavaScript merupakan sebuah web sederhana untuk melakukan transaksi jual – beli laptop dengan sistem transaksi yang sedang banyak digunakan yaitu E-Commerce. Web ini bertujuan memudahkan seorang konsumen untuk membeli laptop yang diinginkan tanpa harus datang ke toko laptop, hanya melalui internet. Dalam pembuatan aplikasi ini, metodologi yang penulis gunakan antara lain adalah Struktur Navigasi dan Skema ERD (Entity Relationship Diagram). Aplikasi ini merupakan penggabungan dari berbagai elemen gambar, halaman dan database. Membentuk sebuah desain interface yang diharapkan mampu berinteraksi dengan user, sehingga membuat user merasa nyaman untuk terlibat di dalamnya. Cukup dengan mengklik pilihan yang ada, sebuah proses dan informasi dapat langsung didapatkan dengan cepat dan mudah. Dengan alasan tersebut maka penulis mencoba untuk memberikan solusi dengan memanfaatkan teknologi yang berkembang dengan membuat paket informasi dengan media website. Kata Kunci: Penjualan laptop, E-Commerce
x
ABTRACTION
Andri (12140654), " Designing Information System E-Commerce Online Notebookstore". Making web-based applications footwear with E-Commerce using PHP and JavaScript is a simple website to perform transactions - buying notebooks with a transaction system that is being widely used, namely the E-Commerce. This website aims to facilitate a consumer to buy the notebooks you want without having to come to the notebookstore, only through the Internet. In making this application, the methodology that I use include the Navigation Structure and Scheme of ERD (Entity Relationship Diagram). This application is an amalgamation of various elements of the image, the page and the database. Forming an interface design that is expected to interact with the user, thus making the user feel comfortable to engage in it. Simply by clicking on the options available, a process and information can be directly obtained quickly and easily. With these reasons, the author tries to provide a solution to utilize evolving technologies by creating a media information pack website. Keywords: Notebook selling, E-Commerce
xi
DAFTAR ISI
Halaman
Lembar Judul Tugas Akhir………………………………...…………. i Surat Pernyataan Keaslian Tugas Akhir...………………..…….……. ii Surat Pernyataan Persetujuan Publikasi Karya Ilmiah............…….… iii Lembar Persetujuan dan Pengesahan Tugas Akhir.......…………....... iv Lembar Dosen Pembimbing......…………………….…………….......... v Lembar Asisten Pembimbing....…………………….…………….......... vi
Kata Pengantar……………………………………………..…………... vii Abstraksi……………………………………………..………..……….... ix Daftar Isi……………………………………………………….......…… xi Daftar Simbol…………………………………………………...………. xii Daftar Gambar………………………………………………………...… xiv Daftar Tabel………………………………………………...………....… xvii Daftar Lampiran……………………………………………………….... xviii
BAB I PENDAHULUAN 1.1. Latar Belakang Masalah…………………..………..… 1 1.2. Maksud dan Tujuan……………...…..…………..…… 2 1.3. Teknik Pengumpulan Data…………………..………… 3 1.4. Ruang Lingkup……………………..…………….…… 3 1.5. Sistematika Penulisan………..…..………...………..… 4
BAB II LANDASAN TEORI 2.1. Konsep Dasar Web………...…………...…..………… 5
2.2. Teori Pendukung…………….……..…....…..………... 11 2.2.1. Model Pengembangan Perangkat Lunak….…… 11 2.2.2. Struktur Navigasi………………………….…… 13 2.2.3. ERD (Enterprise RelationShip Diagram) ….…. 16 2.2.4. LRS (Logical Record Structure)………………. 18 2.2.5. Pengujian Web...……………………….….…… 18
xii
BAB III PEMBAHASAN 3.1. Analisa Kebutuhan……………….…………………… 20 3.2. Spesifikasi Rancangan Web.......………..…………....… 21
3.2.1. Rancangan Halaman Web...........…....……....… 22 3.2.2. Rancangan Basis Data........................................ 29 3.2.3. Rancangan Struktur Navigasi …....……...……. 43
3.3. Implementasi dan Pengujian Unit………….…...…… 46 3.3.1. Implementasi………….…..........................…… 46 3.3.2. Spesifikasi Sistem Komputer.............................. 56 3.3.3. Pengujian Unit………….………………..…… 57
BAB IV PENUTUP 4.1. Kesimpulan………….….………..…………….…….… 60 4.2. Saran…………….………………..………………….… 61
DAFTAR PUSTAKA.…..……………………………………..…..…… 62 DAFTAR RIWAYAT HIDUP.………………………….....……..…… 63
xiii
DAFTAR SIMBOL
A. Simbol Entity Relationship Diagram (ERD)
Entitas atau Objek Data
Sebuah objek yang mewakili sesuatu yang terlihat
nyata dan dapat sibedakan dari sesuatu yang lain.
Simbol dari entity pada umumnya digambarkan
dengan sebuah persegi panjang.
Relationship
Hubungan antara sejumlah entitas yang berasal dari
himpunan entitas yang berbeda.
Atribut atau Elemen Data
Sebuah unsure dari setiap entitas yang fungsinya
mendeskripsikan karakteristik dari intetitas tersebuat.
Weak Entity
Suatu entity dimana Keberadaan dari entity tersebut
tergantung dari entity lain.
xiv
Atribut Multivalue
Atribut yang memiliki nilai lebih dari satu.
Connection
Sebagai penghubung antara relasi dengan entitas,
relasi dan entitas dengan atribut.
xv
DAFTAR GAMBAR
Halaman
1. Gambar II.1 Diagram Metode Waterfall.…………………............ 12 2. Gambar II.2 Struktur Navigari Linear…………………………... 14 3. Gambar II.3 Struktur Navigari Hirarki………………………….. 14 4. Gambar II.4 Struktur Navigari Non Linear..………………….... 15 5. Gambar II.5 Struktur Navigari Composite...……………….……. 16 6. Gambar III.1 Spesifikasi Rancangan Halaman
Admin................................................................................................ 22 7. Gambar III.2 Spesifikasi Rancangan Halaman
Beranda.............................................................................................. 24 8. Gambar III.3 Spesifikasi Rancangan Halaman Akun
Saya.................................................................................................... 25 9. Gambar III.4 Spesifikasi Rancangan Halaman Produk.................. 27 10. Gambar III.5 Entity Relation Diagram............................................ 29 11. Gambar III.6 Logikal Record Structure............................................ 30 12. Gambar III.7 Struktur Navigasi Halaman Pengunjung.................... 43 13. Gambar III.8 Struktur Navigasi Halaman Member.......................... 44 14. Gambar III.9 Struktur Navigasi Halaman Admin............................ 45 15. Gambar III.10 Tampilan Login Pada Admin................................... 46 16. Gambar III.11 Tampilan Halaman Beranda Pada
Admin.........................................…………….……………………... 47 17. Gambar III.12 Tampilan Halaman Pendaftaran Member................. 47 18. Gambar III.13 Tampilan Halaman Login Member........................... 48 19. Gambar III.14 Tampilan Beranda Member...................................... 48 20. Gambar III.15 Tampilan Halaman Keranjang Belanja..................... 49 21. Gambar III.16 Tampilan Halaman Data Member ........................... 49 22. Gambar III.17 Tampilan Halaman Konfirmasi
Pembayaran........................................................................................ 50 23. Gambar III.18 Tampilan Halaman Bukti Order
9. Web E-Commerce dapat didefinisikan sebagai transaksi perdagangan melalui
media elektronik yang terhubung dengan internet. Contohnya: tokopedia.com,
lazada.com, zalora.com.
2.1.3. Bahasa Pemrograman Web
Untuk mengembangkan proses pembuatan website penulis menggunakan
beberapa bahasa pemrograman diantaranya, adalah:
1. HTML
Menurut Soeryana dan Koesheryatin (2014:21) “Hyper Text Markup
Language atau HTML adalah bahasa yang digunakan pada dokumen web sebagai
bahasa untuk pertukaran dokumen web”.
HTML merupakan pengembangan dari standar dari pemformatan
dokumen teks, yaitu Standart Generalized Markup Languange (SGML). HTML
pada dasarnya merupakan dokumen ASCII atau teks biasa, yamg dirancang
untuk tidak tergantung pada suatu system operasi tertentu.
2. PHP
Menurut Prasetio (2015:130), “PHP (PHP: Hypertext Preprocessor) adalah
bahasa script yang ditanam di sisi server.” Prosesor PHP dijalankan di server
(Windows atau Linux). Saat sebuah halaman dibuka dan mengandung kode PHP,
prosesor itu halaman tersebut, dan kemudian menampilkan hasilnya ke browser
sebagai halaman HTML biasa. Karena penerjemahan ini terjadi di server, sebuah
8
halaman ditulis dengan PHP dapat dilihat dengan menggunakan semua jenis
browser, di sistem operasi apapun.
Seperti sebagian besar bahasa script lainnya, PHP dapat ditanamkan
langung ke dalam HTML. Kode PHP dipisahkan dari HTML dengan
menggunakan tanda Start dan End. Ketika sebuah dokumen dibaca, prosesor
PHP hanya menerjemahkan area yang ditandai saja, dan menampilkan hasilnya
pada tempat yang sama.
3. JavaScript
Menurut Kadir (2013:5) “JavaScript adalah bahasa skrip yang biasa
diletakkan bersama kode HTML untuk menentukan suatu aksi”. Sedangkan
menurut Prasetio (2015:332), “JavaSrcipt adalah bahasa pemrograman yang
digunakan untuk membuat web lebih dinamis dan interaktif.”
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh
ditag <head> yang dibuka dengan tag <script type=”teks/JavaScript>. Kode
JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan
dari JavaScript).
2.1.4. Desain Pemrograman Web
Dalam pembuatan web ini penulis menggunakan desain pemrograman web
sebagai berikut:
9
1. CSS
Menurut Jayan (2010:2) “CSS merupakan singkatan dari Cascading Style
Sheet. kegunaannya adalah untuk mengatur tampilan dokumen HTML.” contohnya
seperti pengaturan jarak antar baris, teks, warna dan format border bahkan
penampilan file gambar.
2. Dreamweaver CS5
Menurut Sadeli (2011:2) “Dreamweaver merupakan suatu perangkat lunak
web editor keluaran Adobe System yang digunakan untuk membangun dan
mendesign suatu website dengan fitur-fitur yang menarik dan kemudahan dalam
penggunaannya”.
Selain mudah digunakan dalam membuat dan mendesign web
Dreamweaver juga menambah flexibilitasnya dengan bahasa pemrograman web
lainnya dan juga berintegrasi pada beberapa perangkat lunak ini menjadi pilihan
utama bagi para web-designer amatir maupun expert.
Pada Dreamweaver CS5 terdapat beberapa fitur baru yang keran yang dapat
anda gunakan segera mulai dari seputar CSS, penggunaan fitur canggih Ajax dan
Jquery menggunakan Browser Widget, serta pengujian tampilan web menggunakan
Web Adobe BrowserLab.
10
2.1.5. Web Server
Untuk memulai pemograman PHP, tidak cukup hanya dengan menginstal PHP
saja, diperlukan beberapa perangkat lunak tambahan yang harus diinstal. Beberapa
perangkat lunak tersebut saling ketergantungan satu sama lain, diantaranya:
1. XAMPP
Menurut Buana (2014:4), XAMPP adalah : Perangkat lunak opensource yang bisa diunggah secara gratis dan bisa dijalankan di semua sistem operasi seperti Windows, Linux, Solaris dan Mac dan XAMPP ini sendiri dibuat dan dikembangkan oleh Apache Friends. Perangkat lunak tersebut berisik kumpulan beberapa perangkat lunak yang dibutuhkan, antara lain PHP, Apache, MySQL dan PHPMyAdmin.
2. Apache
Menurut Buana (2014:2), “Apache merupakan web server yang bersifat
opensource, yang digunakan oleh PHP.” Karena sifatnya yang opensource,
sehingga bisa diambil, digunakan, bahkan bisa mengubah kode programnya
tanpa harus membayar. Apache bertugas untuk menampilkan hasil proses script
PHP yang ditulis oleh pembuat halaman web, sehingga dihasilkan halaman web
yang benar kepada peminta, dan dapat juga suatu database diakses terlebih
dahulu misalnya MsSQL, untuk mendukung halaman web yang dihasilkan.
3. PHPMyAdmin
Dengan menggukan MySQL, pengolahan database dilakukan dengan
mengetikan baris-baris perintah (misalnya menggunakan MySQL console) yang
sesuai untuk keinginan tertentu. Jika kita ingin membuat database dan
memanipulasi table, maka kita harus mengetikan baris perintah yang sesuai. Hal
diatas tersebut tentu cukup sulit dilakukan karena kita harus menghafal semua
11
baris sintak dan harus mengetikan satu persatu baris sintak tersebut. Oleh karena
itu, diperlukan perangkat lunak tambahan yang disebut dengan PHPMyAdmin.
Dengan PHPMyAdmin, pengolahan atau manipulasi database jadi lebih mudah,
karena tidak perlu menghafal sintaknya.
2.1.6. Database
Untuk database penulis menggunakan MySQL, menurut Buana (2014:2),
“MySQL merupakan database yang paling sering digunakan dalam pemrograman
PHP.” MySQL digunakan untuk menyimpan data di dalam database dan
memanipulasi data-data yang diperlukan memanipulasi data tersebut berupa
menambah, mengubah, dan menghapus data yang berada dalam database.
2.2. Teori Pendukung
2.2.1. Model Pengembangan Perangkat Lunak
Menurut Sukamto dan Shalahudin, (2013:26) “Model SDLC air terjun
(waterfall) sering juga disebut model sekuensial linier (sequential linear) atau alur
hidup klasik (classic life cycle)”. Model air terjun menyediakan pendekatan alur
hidup perangkat lunak secara sekuensial atau terurut dimilai dari analisis, desain,
pengodean, pengujian, dan tahap pendukung (support). Berikut adalah gambar model
air terjun:
12
Sumber : Sukamto dan Shalahudin (2013)
Gambar II.1. Waterfall Model
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. Spesifikasi kebutuhan perangkat
lunak pada tahap ini perlu untuk didokumentasikan.
2. Desain
Desain perangkat lunak adalah proses multi langka yang fokus pada desain
pembuatan program perangkat lunak termasuk struktur data, arsitektur perangkat
lunak, representasi antar muka, dan prosedur pengodean. Tahap ini mentranslasi
kebutuhan perangkat lunak dari tahap analisi kebutuhan ke representasi desain
agar dapat diimplementasikan menjadi program pada tahap selanjutnya. Desain
perangkat lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.
Sistem/rekayasa
informasi
Analisis Desain Pengodean pengujian
13
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
Pengujian fokus pada perangkat lunak secara dari segi logic dan fungsional
dan memastikan bahwa semua bagian sudah diuji, hal ini dilakukan untuk
meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan
sesuai dengan yang diinginkan.
5. Pendukung (support) atau pemeliharaan (maintanance)
Tidak menutup kemungkinan 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.
2.2.2. Struktur Navigasi
Menurut Binanto (2010:268) “Struktur navigasi adalah gabungan dari struktur
referensi informasi situs web dan mekanisme link yang mendukung pengunjung untuk
melakukan penjelajahan situs”. Binanto (2010:268) menyatakan bahwa terdapat
empat struktur dasar navigasi, yaitu:
14
a. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut
yang menampilkan satu demi satu tampilan layar secara berurut menurut
urutannya dan tidak diperbolehkan adanya percabangan.
Sumber : Binanto (2010:269)
Gambar II.2. Struktur Navigasi Linier
b. Struktur Navigasi Hirarki
Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu
struktur yang mengandalkan percabangan unuk menampilkan data berdasarkan
kan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master
Page (halaman utama pertama), halaman utama ini mempunyai halaman
percabangan yang disebut Slave Page (halaman pendukung).
Sumber : Binanto (2010:269)
Gambar II.3. Struktur Navigasi Hirarki
15
c. Struktur Navigasi Non-Linier
Struktur navigasi non-linier merupakan pengembangan dari struktur navigasi
linier. Pada struktur ini diperkenankan membuat navigasi bercabang.
Percabangan yang dibuat pada struktur non-linier ini berbeda dengan
percabangan pada struktur hirarki, karena pada percabangan non-linier ini
walaupun terdapat banyak percabangan, tetapi tiap-tiap tampilan mempunyai
kedudukan yang sama yaitu tidak ada Master Page dan Slave Page.
Sumber : Binanto (2010:270)
Gambar II.4. Struktur Navigasi Non-Linier
d. Struktur Navigasi Campuran (Composite)
Struktur navigasi campuran merupakan gabungan dari ketiga struktur
sebelumnya, yaitu :linier, hirarki dan non-linier. Struktur navigasi ini juga biasa
disebut dengan struktur navigasi bebas.Struktur navigasi ini banyak digunakan
dalam pembuatan website, karena dapat memberikan keinteraksian yang lebih
tinggi.
16
Sumber : Binanto (2010:270)
Gambar II.5. Struktur Navigasi Campuran (Composite)
2.2.3. Entity Relationship Diagram (ERD)
Indrajani (2015:17) memaparkan bahwa : Entity Relation (ER) Modeling adalah sebuah pendekatan top-bottom dalam perancangan basis data yang dimulai dengan mengidentifikasikan data-data terpenting yang disebut dengan entitas dan hubungan antara entitas-entitas tersebut yang digambarkan dalam suatu model. Karena terdapat keterbatasan pada ER Model, maka terdapat pengembangan penambahan konsep semantik pada ER yang disebut Enhance Entity Relational (EER) Model.
Ada beberapa komponen dan notasi simbolik yang digunakan pada Entity-
Relationship Diagram (ERD), yaitu:
1. Persegi panjang, menyatakan himpunan entitas (Entity)
Entitas adalah suatu objek yang dapat didefinisikan dalam lingkungan pemakai,
dan sesuatu yang penting bagi pemakai dalam konteks sistem yang akan dibuat.
17
2. Lingkaran/Elips, menyatakan Atribut (Attribute)
Atribut adalah bagian dari suatu entity yang berfungsi mendeskripsikan karakter
entity, sehingga atribut dapat digunakan sebagai identifier (key) untuk
menentukan entity secara unik. Dan deskriptor (non key) untuk menentukan
secara tidak unik.
3. Belah ketupat, menyatakan himpunan relasi (Relationship)
Relasi adalah suatu objek yang menghubungkan antar entity dengan entity.
Sehingga dalam menentukan hubungan harus dibedakan antara hubungan atau
bentuk hubungan antar entity dengan isi dari hubungan itu sendiri.
4. Garis, menyatakan adanya hubungan (Link)
Link adalah garis penghubung antara himpunan relasi dengan himpunan entitas
dan himpunan dengan atributnya.
Selain komponen, ERD juga mempunyai Derajat Relationship menunjukan
jumlah maksimum tupel yang dapat berelasi dengan entitas pada entitas yang lain
sebagai berikut :
a. One to one
Tingkat hubungan satu ke satu, dinyatakan dengan satu kejadian pada entitas
pertama, hanya mempunyai satu hubungan dengan satu kejadian pada entitas
yang kedua dan sebaliknya. Yang berarti setiap tupel pada entitas A berhubungan
paling banyak satu tupel pada entitas A, dan begitu juga sebaliknya setiap tuple
pada entitas A berhubungan dengan paling banyak satu tupel pada entitas A.
18
b. One to many atau many to one
Tingkat hubungan satu kebanyak adalah sama dengan banyak ke satu.
Tergantung dari arah mana hubungan tersebut dilihat. Untuk satu kejadian pada
entitas yang pertama dapat mempunyai banyak hubungan dengan kejadian pada
entitas yang kedua. Sebaliknya satu kejadian pada entitas yang kedua hanya
dapat mempunyai satu hubungan dengan satu kejadian pada entitas yang sama.
c. Many to many
Tingkat hubungan kebanyakan terjadi jika tiap kejadian pada sebuah entitas akan
mempunyai banyak hubungan dengan kejadian pada entitas lainnya. Baik dilihat
dari segi entitas pertama maupun dilihat dari entitas lainnya.
2.2.4. LRS (Logical Record Structure)
Menurut Hasugian dan Shidiq (2012:608) memberikan batasan bahwa LRS
adalah “sebuah model sistem yang digambarkan dengan sebuah diagram-ER akan
mengikuti pola atau aturan permodelan tertentu dalam kaitanya dengan konvensi ke
LRS”.
2.2.5. Pengujian Web
Menurut Sukamto dan Shalahuddin (2013:275) “Black-box testing yaitu
perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode
program”.
19
Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi masukan dan
keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan. Kasus uji
yang dibuat untuk melakukan pengujian kotak hitam harus dibuat dengan kasus benar
dan kasus salah, misalkan untuk kasus proses login maka kasus uji coba yang
dilakukan adalah:
a. Jika user memasukkan nama pemakai (username) dan kata sandi (password) yang
benar.
b. Jika user memasukkan nama pemakai (username) dan kata sandi (password) yang
salah,misalkan nama pemakai benar tapi kata sandi salah, atau sebaliknya atau
keduanya salah
BAB III
PEMBAHASAN
3.1. Analisa Kebutuhan
Analisis kebutuhan adalah mengidentifikasi kebutuhan yang dibutuhkan
berdasarkan kebutuhan pengguna. Berikut adalah uraian kebutuhan pengguna:
a. Administrasi.
Dalam rancangan web ini penulis membuat dua halaman utama yaitu halaman
admin, dimana halaman ini hanya dikelolah oleh para administrator saja yang
dimana di halaman admin ini penulis menyediakan pengelolahan penambahan
produk, kategori, manampilkan pesan yang masuk, konfirmasi pembayaran, data
member, kontak, laporan semua fasilitas ini dimaksudkan untuk mempermudah
para admin dalam mengelolah website ini.
b. Pengguna.
Sedangkan dihalaman pengguna disediakan halaman home yang berisi katalog
dari kumpulan semua produk yang ada, halaman akun saya berisikan data
member yang telah terdaftar sebagai member, halaman notebook berisikan
produk beserta kategorinya, halaman profil berisikan tentang profil toko laptop
kontak, halaman kontak kami berisikan form untuk berhubungan dengan kami,
halaman pertunjuk web ini berisikan semua petunjuk mengenai website ini,
halaman login sign up untuk melakukan pendaftaran dan masuk untuk
memberikan hak akses member kepada member.
20
21
Berikut adalah proses pembelian laptop di web perancangan sistem
informasi penjualan laptop melalui website yang penulis buat.
1. Klik pada tombol Beli pada produk yang ingin Anda pesan.
2. Produk yang Anda pesan akan masuk ke dalam Keranjang Belanja. Anda
dapat melakukan perubahan jumlah produk yang diinginkan dengan
mengganti angka di kolom Jumlah. Sedangkan untuk menghapus sebuah
produk dari Keranjang Belanja, klik tombol hapus yang berada di kolom
paling kanan.
3. Jika sudah selesai, klik tombol lanjut, maka akan tampil data member
untuk pengisian data member jika sudah menjadi member anda tinggal
melakukan login.
4. Setelah data pembeli selesai diisikan, klik tombol lanjut lagi, maka akan
tampil data pembeli beserta detail produk yang dipesannya dan detail
pembayarannya.
5. Apabila telah melakukan pembayaran kurang dari 1x24 jam, maka
produk/barang akan segera kami kirimkan.
3.2. Spesifikasi Rancangan Website
Penulis akan memberikan penjelasan secara lebih mendetail mengenai
rancangan website yang dibuat pada sub-sub bab berikut ini:
22
3.2.1. Rancangan Halaman Website
Penulis Dalam hal ini penulis akan menggambarkan rancangan website yang
akan dibuat, yaitu mengenai bentuk layout maupun fungsinya yang nantinya dapat
membantu dalam tahap perancangan website E-Commerce.
1. Rancangan Halaman admin
Gambar III.1.
Spesifikasi Rancangan Halaman Admin
Keterangan :
Header : Berisikan judul, logo, dan Gambar Slide Show
Link 1 : Berisi link Beranda, ucapan selamat datang
Link 2 : Berisi link Slide Show, menampilkan, edit, hapus
Slide Show
Link 3 : Berisi link Produk, menampilkan data produk.
23
Link 4 : Berisi link Gambar Pendukung, menampilkan
gambar pendukung dari produk
Link 5 : Berisi link Member, menampilkan dan menghapus
data-data member.
Link 6 : Berisi link Kategori, menampilkan dan menghapus
data-data kategori
Link 7 : Berisi link Kontak, menampilkan data-data kontak
Link 8 : Berisi link Pemesanan, menampilkan, menghapus
data-data Pemesanan.
Link 9 : Berisi link Laporan, menampilkan data Laporan
perbulan.
Link 10 : Berisi link Order Sementara, menampilkan dan
menghapus data-data Orders Temporarily .
Link 11 : Berisi link Konfirmasi, menampilkan dan menghapus
data-data konfirmasi
Link 12 : Berisi link Keluar, untuk keluar dari halam admin
Content : Berisi Tampilan-tampilan dari berbagai Link yang
ada
24
2. Rancangan Halaman Beranda
Gambar III.2.
Spesifikasi Rancangan Halaman Beranda
Keterangan :
Header : Berisikan judul, logo, dan Gambar Slide Show
Link 1 : Berisi link Beranda, menampilkan data produk.
Link 2 : Berisi link akun saya, menampilkan data member.
Link 3 : Berisi link Notebook, menampilkan data produk.
Link 4 : Berisi link Konfirmasi Pembayaran, menampilkan
form input pembayaran.
Link 5 : Berisi link Profil, menampilkan data profil.
Link 6 : Berisi link kontak kami, menampilkan form input
kontak kami.
25
Link 7 : Berisi link cara belanja, menampilkan cara belanja.
Link 8 : Berisi link login, menampilkan form input login
member.
Link 9 : Berisi link keranjang belanja, menampilkan keranjang
belanja.
Link 10 : Merupakan tampilan keranjang belanja
Link 11 : Merupakan tampilan rekening bank
Link 12 : Merupakan tampilan status pengiriman barang
Produk : Tampilan-tampilan dari produk
Footer : Alternatif link.
3. Rancangan Halaman Akun Saya
Gambar III.3.
Spesifikasi Rancangan Halaman Akun Saya
26
Keterangan :
Header : Berisikan judul, logo, dan Gambar Slide Show
Link 1 : Berisi link Beranda, menampilkan data produk.
Link 2 : Berisi link akun saya, menampilkan data member.
Link 3 : Berisi link Notebook, menampilkan data produk.
Link 4 : Berisi link Konfirmasi Pembayaran, menampilkan
form input pembayaran.
Link 5 : Berisi link Profil, menampilkan data profil.
Link 6 : Berisi link kontak kami, menampilkan form input
kontak kami.
Link 7 : Berisi link cara belanja, menampilkan cara belanja.
Link 8 : Berisi link login, menampilkan form input login
member.
Link 9 : Berisi link keranjang belanja, menampilkan keranjang
belanja.
Link 10 : Merupakan tampilan keranjang belanja
Link 11 : Merupakan tampilan rekening bank
Link 12 : Merupakan tampilan status pengiriman barang
Produk : Berisi Tampilan dari produk secara random
form : Berisi form data member yang telah login
Footer : Alternatif link
27
4. Rancangan Halaman Produk.
Gambar III.4.
Spesifikasi Rancangan Halaman Produk
Keterangan :
Header : Berisikan judul, logo, dan Gambar Slide Show
Link 1 : Berisi link Beranda, menampilkan data produk.
Link 2 : Berisi link akun saya, menampilkan data member.
Link 3 : Berisi link Notebook, menampilkan data produk.
Link 4 : Berisi link Konfirmasi Pembayaran, menampilkan
form input pembayaran.
Link 5 : Berisi link Profil, menampilkan data profil.
Link 6 : Berisi link kontak kami, menampilkan form input
kontak kami.
Link 7 : Berisi link cara belanja, menampilkan cara belanja.
28
Link 8 : Berisi link login, menampilkan form input login
member.
Link 9 : Berisi link keranjang belanja, menampilkan keranjang
belanja.
Link 10 : Merupakan tampilan keranjang belanja
Link 11 : Merupakan tampilan rekening bank
Link 12 : Merupakan tampilan status pengiriman barang
Produk : Berisi Tampilan dari produk secara random
kategori : Berisi kategori produk berdasarkan merk
Footer : Alternatif link.
29
3.2.2. RANCANGAN BASIS DATA
A. ENTITY RELATION DIAGRAM (ERD)
Gambar III.5.
Entity Relationship Diagram
30
B. Logikal Record Structure (LRS)
Gambar III.6.
Logikal Record Strukture
31
C. Spesifikasi File
File merupakan kumpulan dari beberapa record yang berhubungan satu sama
lain yang berisi data suatu bidang tertentu. Sedangkan record dapat diartikan sebagai
kumpulan dari beberapa field, begitu juga dengan field merupakan kumpulan data
sejenis.
Spesifikasi file dibuat sebagai pendukung agar pemakai (user) program
mengetahui segala yang berhubungan dengan file ataupun field name pada
pengolahan database. Untuk itu, penulis memaparkan spesifikasi file perancangan
sistem informasi penjualan laptop berbasis web adalah sebagai berikut;
1. Spesifikasi File tabel admin
Nama Tabel : admin
Akronim : Userid dan Pswd
Fungsi : untuk menampilkan file admin
Tipe File : File Master
Organisasi File : index sequential
akses file : Random
Media File : Harddisk
Kunci Field : User id
Software : MySQL
jumlah Record : 45 byte
32
Tabel III.1
Spesifikasi Tabel Admin
No Elemen data Akronim Type Panjang Keterangan
1 User id Userid Varchar 30 Primary
key
2 Password Pswd Varchar 15
2. Spesifikasi File tabel gambar_produk
Nama Tabel : gambar_produk
Akronim : gambar_pendukung dan id_produk
Fungsi : untuk menampilkan file gambar produk
Tipe File : File Master
Organisasi File : index sequential
akses file : Random
Media File : Harddisk
Kunci Field : -
Software : MySQL
jumlah Record : 103 byte
33
Tabel III.2
Spesifikasi Tabel Gambar_Produk
No Elemen data Akronim Type Panjang Keterangan
1 Gambar pendukung gambar_pendukung Varchar 100
2 Id produk id_produk Int 3 Foreign key
3. Spesifikasi File tabel kategori
Nama database : notebook
Akronim : kd_kategori dan nama_kategori
Fungsi : untuk menampilkan file kategori
Nama Tabel : kategori
Tipe File : File Master
Organisasi File : index sequential
akses file : Random
Media File : Harddisk
Kunci Field : kd_kategori
Software : MySQL
jumlah Record : 17 byte
34
Tabel III.3
Spesifikasi Tabel Kategori
No Elemen data Akronim Type Panjang Keterangan
1 Kode kategori kd_kategori Int 2 Primary key
2 Nama kategori nama_kategori Varchar 15 -
4. Spesifikasi File tabel konfirmasi
Nama Tabel : konfirmasi
Akronim : id_konfirmasi, kd_member, Bank, id_orders, tgl_transfer,
Sistem menerima akses login dan kemudian langsung menampilkan “login sukses” kemudian ke halaman utama user.
Sesuai Harapan
Berhasil
No Skenario Pengujian
Test Case Hasil yang diharapkan
Hasil Pengujian
Ket.
1. User Name dan Password tidak diisi
User Name: (kosong) Password: (kosong)
Sistem akan menolak akses User dan menampilkan “Mohon Isi
Sesuai Harapan
Berhasil
54
kemudian klik tombol login
Username OR Password Anda”
2. Mengetikan User Name dan Password tidak diisi atau kosong kemudian klik tombol login
User Name: 1 Password: (kosong)
Sistem akan menolak akses User dan menampilkan “Mohon Isi Username OR Password Anda”
Sesuai Harapan
Berhasil
3.
User Name
tidak diisi
(kosong)
dan
password
diisi
kemudian di
klik tombol
login
UserName:
(kosong)
Password :
12345
Sistem akan menolak akses User dan menampilkan “Mohon Isi Username OR Password Anda”
Sesuai
Harapan
Berhasil
4. Mengetik salah satu kondisi salah pada User Name atau Password kemudian klik tombol login
User Name: 1 (benar) Password: 123465 (salah)
Sistem akan menolak akses User dan menampilkan “Username or Password tidak valid”
Sesuai Harapan
Berhasil
5. Mengetik User Name dan Password dengan data yang benar kemudian kliik tombol login
User Name: 1 (benar) Password: 1(benar)
Sistem menerima akses login dan kemudian langsung menampilkan halaman utama admin.
Sesuai Harapan
Berhasil
55
C. Pengujian Terhadap Halaman Pendaftaran Member
Tabel III.14
Hasil Pengujian Black Box Testing Halaman Pendaftaran Member
No Skenario Pengujian
Testing Case Hasil yang diharapkan Hasil Pengujian
Ket.
1. Semua data pelanggan tidak diisi kemudian klik tombol Daftar
Nama: (kosong) Alamat: (kosong) Email: (kosong) No.Telp/HP: (kosong) Kode Post: (kosong) Password: (Kosong) Ulangi Password: (Kosong) Kode Captha: (Kosong)
Sistem akan menampilkan: *Kolom nama harus diisi *Kolom alamat harus diisi *Alamat email harus diisi *Kode POS harus diisi *Kolom password harus diisi *Kolom password harus diisi
Sesuai Harapan
Berhasil
2. Mengisi hanya data nama pelanggan yang lain tidak diisi atau kosong kemudian klik tombol Daftar
Nama: Andri Alamat: kosong Email: (kosong) No.Telp/HP: (kosong) Kode Post: (kosong) Password: (Kosong) Ulangi Password: (Kosong) Kode Captha: (Kosong)
Sistem akan menampilkan: *Kolom alamat harus diisi *Alamat email harus diisi *Kode POS harus diisi *Kolom password harus diisi *Kolom password harus diisi
E. Pengujian Terhadap Halaman Konfirmasi Pembayaran
Tabel III.16
Hasil Pengujian Black Box Testing Halaman Konfirmasi Pembayaran
No
Skenario
pengujian
Test Case
Hasil yang
diharapkan
Hasil
pengujian
Ket
1.
Semua data
konfirmasi
pembayaran
tidak diisi
No.Invoice:
(kosong)
Atas Nama:
(kosong)
Total
Transfer:
(kosong)
Kode Captha:
(kosong)
Sistem akan
menolak dan
menampilkan:
*Kolom Invoice
harus diisi
*Kolom nama
harus diisi
*Kolom total
harus diisi
*Kolom kode
harus diisi.
Sesuai
harapan
Berhasil
59
2 Semua data
konfirmasi
pembayaran
diisi
No.Invoice:
NF001
Atas Nama:
Andri
Total
Transfer: Rp
5000000
Kode Captha:
x3mwdk atau
diisi
Sistem akan dan
menampilkan:
Terima kasih
telah
mengkonfirmasi
pembayaran anda.
Kami akan
memproses data
pesanan anda
untuk dikirim ke
alamat tujuan.
Sesuai
harapan
Berhasil
Berdasarkan hasil pengujian dengan kasus sample uji diatas dapat ditarik
kesimpulan bahwa perangkat lunak sistem informasi penjualan dapat berjalan
dengan baik dan secara fungsional sistem dapat menghasilkan output yang
diharapkan.
61
BAB IV
PENUTUP
4.1. Kesimpulan
Setelah mengamati dan mempelajari, penulis mengambil kesimpulan
mengenai web perancangan sistem informasi penjualan laptop, kesimpulan tersebut
antara lain yaitu:
1. Website yang dibuat oleh penulis ini adalah sarana penjualan laptop secara
online dan dapat diakses di mana saja dan kapan saja.
2. Website ini dibangun juga untuk menghemat biaya karena tidak perlu
menyewa toko.
3. Penjualan online melalui website mampu menarik konsumen dalam bentuk
teks dan gambar, dan membantu website tersebut lebih menarik untuk
dikunjungi kemudian konsumen dapat membeli barang.
4. Sasaran dari website ini adalah konsumen yang tidak mempunyai waktu
untuk mengunjungi toko.
60
61
4.2. Saran
Dari kesimpulan yang telah dibuat berdasarkan proses perancangan
website, maka penulis mencoba mengajukan saran–saran agar dapat membuat
website yang jauh lebih baik lagi, yaitu:
1. Website ini diharapkan dapat memudahkan bagi konsumen untuk membeli
barang secara online.
2. Website ini diharapkan bisa menambah kepercayaan konsumen kepada toko
online tersebut.
3. Ada baiknya untuk tahap pengembangan sistem baru diharapkan dibuat
semenarik mungkin dan dikembangkan lebih lanjut dengan tambahan
informasi yang lebih lengkap dan pastinya bisa lebih bermanfaat bagi
pengelola dan pengguna website tersebut.
4. Halaman utama website harus dibuat lebih spesifik agar konsumen tertarik
untuk membeli barang. Jangan sampai konsumen merasa bingung dengan
website yang dibuat.
62
DAFTAR PUSTAKA
Binanto, Iwan. 2010. Multimedia Digital Dasar Teori dan Pengembanganya.
Yoyakarta: Andi Offset. Buana, I komang Setia. 2014. Jago Pemrograman PHP. Jakarta: Dunia Komputer. Indrajani. 2015. Database Design (Case Study All in One). Jakarta: Elex Media
Komputindo. Hasugian, H., & Shidiq, A. N. 2012 Rancang bangun sistem informasi industri kreatif
bidang penyewaan sarana olahraga, 2012(Semantik). Jayan. 2010. CSS untuk Orang Awam. Palembang: Maxikom. Kadir, Abdul. 2013. From Zero to A pro – Javascript & Jquery. Yogyakarta: Andi. Kustiyahningsih, Yeni. 2011. “Pemrograman Basis Data Berbasis Web Menggunakan
PHP & MySQL”. Jakarta: Graha Ilmu. Prasetio, Adhi 2015. Buku Pintar Webmaster Untuk Pemula. Jakarta: Mediakita. Sadeli, Muhammad. 2011. 7 Jam Belajar Internet Dreamweaver CS5 untuk Orang
Awam. Palembang: Maxikom. Sibero, Alexander, F.K. 2011. Kitab Suci Web Programming. Yogyakarta: Mediakom
Soeryana, Taryana dan Koesheryatin. 2014. Aplikasi Internet Menggunakan HTML, CSS dan JavaSript. Jakarta: Elex Media Komputindo.
Sukamto, Rosa A dan M. Shalahudin. 2013. Rekayasa Perangkat Lunak (Terstruktur