KHAIRUL IKHWAN - Bina Sarana Informatika · sablon. Pakaian yang dijual mencakup kaos polos, polo,...

MEMBANGUN WEBSITE SEBAGAI SARANA INFORMASI

DAN PENJUALAN PADA TOKO KAOS AIDAN SABLON

TUGAS AKHIR

Diajukan untuk memenuhi salah satu syarat kelulusan Program Diploma III

KHAIRUL IKHWAN

NIM : 12141505

Program Studi Manajemen Informatika

AMIK BSI Jakarta

Jakarta

2017

vii

KATA PENGANTAR

Alhamdulillah, Dengan mengucapkan puji syukur kehadirat Allah SWT, yang

telah melimpahkan rahmat dan karunia-Nya, sehingga pada akhirnya penulis dapat

menyelesaikan tugas akhir ini dengan baik. Dimana tugas akhir ini penulis sajikan

dalam bentuk buku yang sederhana. Adapun judul tugas akhir, yang penulis ambil

sebagai berikut, “Membangun Website Sebagai Sarana Informasi dan Penjualan

Pada Toko Kaos Aidan Sablon”.

Tujuan penulisan tugas akhir ini dibuat sebagai salah satu syarat kelulusan

program Diploma III AMIK BSI Jakarta. Sebagai bahan penulisan diambil

berdasarkan hasil penelitian, observasi dan beberapa sumber literatur yang mendukung

penulisan ini. Penulis menyadari bahwa tanpa bimbingan dan dorongan dari semua

pihak, maka penulisan tugas akhir ini tidak akan lancar. Oleh karena itu pada

kesempatan ini, izinkanlah penulis menyampaikan ucapan terima kasih kepada:

1. Orang tua dan keluarga tercinta yang telah memberikan dukungan moral maupun

spiritual.

2. Direktur Akademi Manajemen Informatika & Komputer Bina Sarana Informatika.

3. Ketua Program Studi Manajemen Informatika AMIK BSI Jakarta.

4. Bapak Friyadie, M.Kom. selaku Dosen Pembimbing Tugas Akhir.

5. Ibu Desmulyati, S.T., M.Kom. selaku Asisten Pembimbing Tugas Akhir.

6. Segenap dosen pengajar jurusan Manajemen Informatika BSI Jakarta, yang telah

membekali penulis ilmu yang sangat berharga.

viii

7. Staff/karyawan dilingkungan Akademi BSI.

8. Desiana Dwi Suwarno yang telah memberikan dukungan selama masa pembuatan

Tugas Akhir.

9. Murdiansyah Pradana dan Yogi Suprihadi, selaku Konsultan Web Programming.

10. Rekan – Rekan Mahasiswa BSI kelas 12.6H.07

11. Rekan – Rekan Mahasiswa BSI kelas 12.6G.07

Serta semua pihak yang terlalu banyak untuk disebut satu persatu

sehingga terwujudnya penulisan ini. Penulis menyadari bahwa penulisan tugas akhir

ini masih jauh sekali dari sempurna, untuk itu penulis mohon kritik dan saran yang

bersifat membangun demi kesempurnaan penulisan dimasa yang akan datang.

Akhir kata semoga tugas akhir ini dapat berguna bagi penulis khususnya dan bagi

para pembaca yang berminat pada umumnya.

Jakarta, 24 Juli 2017

Penulis,

Khairul Ikhwan

ix

ABSTRAK

Khairul Ikhwan (12141505), Membangun Website Sebagai Sarana Informasi dan

Penjualan Pada Toko Kaos Aidan Sablon

Dalam era globalisasi sekarang ini, teknologi informasi melaju dengan cepatnya.

Adapun komputer yang merupakan peralatan yang diciptakan untuk

mempermudah pekerjaan manusia, saat mencapai kemajuan baik didalam pembuatan

hardware maupun software. Toko Kaos Aidan Sablon membutuhkan sekali adanya

suatu sistem informasi yang dapat menunjang dan memudahkan pelayanan bagi para

calon pembeli. Untuk itulah penulis mencoba membuat Tugas Akhir mengenai

pembuatan website sebagai sarana informasi dan penjualan produk di Toko Kaos

Aidan Sablon yang sampai saat ini masih dilakukan secara manual. Pada saat ini Toko

Kaos Aidan Sablon hanya berupa jenis usaha kecil yang bergerak dalam bidang jasa

sablon dan penjualan pakaian jadi. Sistem yang ada pada Toko Kaos Aidan Sablon ini

masih dilakukan secara manual, mulai dari penyampaian informasi produk

menggunakan majalah, sistem pemasaran yang dilakukan dengan cara penyampaian

dari mulut ke mulut sampai proses penjualan yang dilakukan langsung di tempat usaha.

Hal ini membuat penyampaian informasi kepada calon pembeli tidak efektif dimana

ruang lingkupnya tidak luas dan membuat pendapatan perusahaan menjadi tidak

optimal. Pembuatan website ini diharapkan dapat menjadi solusi untuk lebih

memudahkan calon pembeli dalam memperoleh informasi dan melakukan pembelian

produk secara online. Akses informasi menjadi lebih mudah dan area penjualan

menjadi lebih luas. Dengan begitus, dapat tercapai suatu kegiatan yang efektif dan

efisien dalam menunjang aktifitas pada perusahaan ini.

Kata Kunci: Website, E-Commerce, Kaos, Sablon Manual

x

ABSTRACT

Khairul Ikhwan (12141505), Develop A Website For Means Of Information And

Sales At Aidan Sablon T-Shirt Store

In the era of globalization today, information technology is speeding with fast. The

computer is a device that was created to facilitate human work, while achieving good

progress in the manufacture of hardware and software. Aidan Sablon T-shirt Store

requires an information system that can support and facilitate service for potential

buyers. That's why the author tries to make the final task of making the website as a

means of information and product sales at Aidan Sablon T-Shirt Store which until now

is still done manually. Currently, Aidan Sablon T-shirt is only a small-scale business

engaged in screen printing and apparel sales. The existing system in this Aidan Sablon

T-shirt is still done manually, ranging from the delivery of product information using

magazines, marketing systems are done by way of delivery from mouth to mouth sales

process conducted directly at the place of business. This makes the delivery of

information to potential buyers ineffective where the scope is not widespread and make

the company's income becomes not optimal. This website is expected to be a solution

to further facilitate prospective buyers in obtaining information and make purchases

of products online. Access to information becomes easier and the sales area becomes

more widespread. That way, can be achieved an effective and efficient activities in

supporting activities in this company.

Keywords: Website, E-Commerce, T-shirt, Manual Screen Printing

xi

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 ..................................................................... 3 1.4. Ruang Lingkup ......................................................................... 5 1.5. Sistematika Penulisan............................................................. .. 6

BAB II LANDASAN TEORI......................................................................... 7

2.1. Konsep Dasar Web ................................................................... 7 2.2. Teori Pendukung......... .............................................................. 15

BAB III PEMBAHASAN.............................................................................. 21

3.1. Analisa Kebutuhan ................................................................... 21

3.2. Perancangan Perangakat Lunak ............................................... 23

3.2.1. Rancangan Antar Muka ............................................... 23

3.2.2. Rancangan Basis Data .................................................. 47

3.2.3. Rancangan Struktur Navigasi ....................................... 49

3.3. Implementasi dan Pengujian Unit ........................................... 52

3.3.1. Implementasi ................................................................ 52

3.3.2. Pengujian Unit ............................................................. 74

BAB IV PENUTUP ........................................................................................ 79

4.1. Kesimpulan ............................................................................. 79

4.2. Saran ........................................................................................ 80

DAFTAR PUSTAKA ........................................................................................ 81

DAFTAR RIWAYAT HIDUP ......................................................................... 83

SURAT KETERANGAN RISET .................................................................... 84

xii

DAFTAR SIMBOL

A. Simbol Entity Relationship Diagram

EXTERNAL ENTITY

Digunakan untuk menggambarkan suatu sumber

atau tujuan pada arus data.

DATA FLOW

Digunakan untuk menggambarkan suatu arus data.

PROCESS

Digunakan untuk menggambarkan suatu proses

yang sedang berlangsung

.

DATA STORE

Digunakan untuk menggambarkan suatu tempat

untuk menyimpan atau mengambil data yang

diperlukan.

xiii

DAFTAR GAMBAR

Halaman

1. Gambar II.1 Metode Waterfall ........................................................................ 12

2. Gambar II.2 Struktur Navigasi Linear ............................................................ 14

3. Gambar II.3 Struktur Navigasi Hierarchical .................................................. 15

4. Gambar II.4 Struktur Navigasi Non Linear ..................................................... 16

5. Gambar II.5 Struktur Navigasi Composite ...................................................... 17

6. Gambar III.1 Rancangan Antar Muka Halaman Utama .................................. 23

7. Gambar III.2 Rancangan Antar Muka Daftar Member ................................... 24

8. Gambar III.3 Rancangan Antar Muka Halaman Produk ................................. 25

9. Gambar III.4 Rancangan Antar Muka Halaman Detail Produk ...................... 26

10. Gambar III.5 Rancangan Antar muka Halaman Jasa ...................................... 27

11. Gambar III.6 Rancangan Antar muka Halaman Cara Belanja ........................ 28

12. Gambar III.7 RancanganAntar muka Halaman FAQ ...................................... 29

13. Gambar III.8 Rancangan Antar Muka Halaman Tentang Kami ..................... 30

14. Gambar III.9 Rancangan Antar Muka Halaman Login ................................... 31

15. Gambar III.10 Rancangan Antar Muka Halaman Utama Member ................. 32

16. Gambar III.11 Rancangan Antar Muka Halaman Keranjang Belanja............. 33

17. Gambar III.12 Rancangan Antar Muka Halaman Konfirmasi Pesanan .......... 34

18. Gambar III.13 Rancangan Antar Muka Halaman Bukti Pemesanan............... 35

19. Gambar III.14 Rancangan Antar Muka Halaman Struk Pembelian ................ 36

20. Gambar III.15 Rancangan Antar Muka Halaman Profil Member ................... 36

21. Gambar III.16 Rancangan Antar Muka Halaman Detail Pesanan .................. 37

22. Gambar III.17 Rancangan Antar Muka Halaman Konfirmasi Pembayaran ... 38

23. Gambar III.18 Rancangan Antar Muka Halaman Login Administrator .......... 39

24. Gambar III.19 Rancangan Antar Muka Halaman Menu Notifikasi ................ 40

25. Gambar III.20 Rancangan Antar Muka Halaman Menu Katalog ................... 41

26. Gambar III.21 Rancangan Antar Muka Halaman Menu Kategori .................. 42

27. Gambar III.22 Rancangan Antar Muka Halaman Menu Ongkos Kirim ......... 43

28. Gambar III.23 Rancangan Antar Muka Halaman Menu Order Masuk ........... 44

29. Gambar III.24 Rancangan Antar Muka Halaman Menu Member ................... 45

30. Gambar III.25 Rancangan Antar Muka Halaman Menu Admin ...................... 46

31. Gambar III.26 Entity Relationship Diagram ................................................... 47

32. Gambar III.27 Logical Relational Structure (LRS) ......................................... 48

33. Gambar III.28 Struktur Navigasi Composite Halaman Pengunjung ............... 49

34. Gambar III.29 Struktur Navigasi Composite Halaman Member ..................... 50

35. Gambar III.30 Struktur Navigasi Composite Halaman Administrator Sistem.51

36. Gambar III.31 Halaman Utama ....................................................................... 52

xiv

37. Gambar III.32 Halaman Daftar Member ......................................................... 53

38. Gambar III.33 Halaman Produk ...................................................................... 54

39. Gambar III.34 Halaman Detail Produk ........................................................... 55

40. Gambar III.35 Halaman Jasa ........................................................................... 56

41. Gambar III.36 Halaman Cara Belanja ............................................................. 57

42. Gambar III.37 Halaman FAQ .......................................................................... 58

43. Gambar III.38 Halaman Tentang Kami ........................................................... 59

44. Gambar III.39 Halaman Login Member .......................................................... 60

45. Gambar III.40 Halaman Utama Member ......................................................... 61

46. Gambar III.41 Halaman Keranjang Belanja .................................................... 62

47. Gambar III.42 Halaman Konfirmasi Pesanan ................................................. 62

48. Gambar III.43 Halaman Bukti Pemesanan ...................................................... 63

49. Gambar III.44 Halaman Struk Pembelian ....................................................... 63

50. Gambar III.45 Halaman Profil Member .......................................................... 64

51. Gambar III.46 Halaman Detail Pesanan.......................................................... 64

52. Gambar III.47 Halaman Konfirmasi Pembayaran ........................................... 65

53. Gambar III.48 Halaman Menu Login Administrator ...................................... 66

54. Gambar III.49 Halaman Menu Notifikasi ....................................................... 67

55. Gambar III.50 Halaman Menu Katalog ........................................................... 68

56. Gambar III.51 Halaman Menu Kategori ......................................................... 69

57. Gambar III.52 Halaman Menu Ongkos Kirim ................................................ 70

58. Gambar III.53 Halaman Menu Order Masuk .................................................. 71

59. Gambar III.54 Halaman Menu Member .......................................................... 72

60. Gambar III.48 Halaman Menu User Admin .................................................... 73

xv

DAFTAR TABEL

Tabel Halaman

1. Tabel III.1 Pengujian Terhadap Form Login Member ................................. 74

2. Tabel III.2 Pengujian Terhadap Form Pendaftaran Member ....................... 75

3. Tabel III.3 Pengujian Terhadap Form Konfirmasi Pembayaran .................. 76

4. Tabel III.4 Pengujian Terhadap Form Login Administrator ........................ 77

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Bisnis sablon dan penjualan pakaian sekarang ini memang semakin

berkembang di Indonesia, terbukti dengan semakin banyaknya muncul outlet dan

distro yang menyediakan jasa sablon sekaligus menjual berbagai jenis pakaian jadi.

Salah satunya adalah Toko Kaos Aidan Sablon yang berdiri pada tahun 2017,

merupakan jenis usaha yang bergerak dibidang penjualan pakaian dan juga jasa

sablon. Pakaian yang dijual mencakup kaos polos, polo, sweater dan jaket. Selain

pakaian polos, ada juga pakaian jadi yang sudah diproduksi/disablon. Aidan Sablon

juga menerima jasa cetak sablon dari kuantitas satuan hingga ribuan menggunakan

teknik sablon manual dan cutting.

Dalam melakukan kegiatannya, Toko Kaos Aidan Sablon masih

menggunakan proses konvensional mulai dari proses pemesanan, promo hingga

penjualan. Proses pemesanan oleh konsumen masih dilakukan melalui whatsapp

atau email langsung kepada pemilik. Pencatatan pesanan dari konsumen pun masih

dilakukan secara manual dengan menulisnya dibuku catatan pesanan. Cara tersebut

sering kali menimbulkan masalah berupa tidak lengkapnya informasi pemesanan

dan juga terkadang terjadi kesalahan dalam pencatatan pesanan yang akhirnya

menimbulkan kerugian bagi kedua belah pihak (Imbar & Tirta, 2011). Belum

terdapatnya media informasi dan pemasaran secara online seperti website membuat

penjualan kurang kompetitif (Hafsah, 2014). Konsumen akan kesulitan dalam

mencari informasi produk atau jasa yang diinginkan.

2

Hal ini juga membuat keberadaan Toko Aidan Sablon menjadi kurang

dikenal oleh banyak orang.

Dengan adanya masalah yang dihadapi oleh Toko Kaos Aidan Sablon

tersebut maka dibutuhkan kehadiran sebuah website. Hal ini sangat penting untuk

menunjang kegiatan toko seperti membantu penyampaian informasi produk, jasa

dan harga secara detail kepada konsumen. Selain itu melalui website konsumen

akan dapat mengakses informasi yang dibutuhkan kapan dan dimana saja. Tidak

hanya itu saja, keberadaan suatu website akan dapat memperluas jangkauan

pemasaran Toko Kaos Aidan Sablon.

1.2 Maksud dan Tujuan

Berdasarkan permasalahan yang telah diteliti, maka maksud dari penulisan

tugas akhir ini adalah :

a. Mengembangkan dan menerapkan ilmu yang telah didapat sewaktu

perkuliahan di AMIK BSI

b. Menambah wawasan seputar web berbasis E-Commerce

c. Membuat website yang berisi informasi produk, penyediaan jasa dan

penjualan produk secara detail agar lebih memudahkan konsumen.

d. Mengimplementasikan website pada Toko Kaos Aidan Sablon agar kinerja

dan pendapatan perusahaan dapat lebih maksimal.

Sedangkan tujuan yang ingin dicapai dalam pembuatan tugas akhir ini adalah

sebagai syarat kelulusan program Diploma Tiga (DIII) Jurusan Manajemen

Informatika di Akademi Manajamen Informatika dan Komputer Bina Sarana

Informatika (AMIK BSI).

3

1.3 Metode Penelitian

Metodologi penelitian yang digunakan penulis dalam penulisan tugas akhir

ini adalah sebagai berikut :

A. Metode Pengembangan Perangkat Lunak

Model yang digunakan pada pengembangan perangkat lunak ini menggunakan

model waterfall (Rosa dan Shalahuddi, 2013) yang terbagi menjadi empat tahapan,

yaitu:

1. Analisis Kebutuhan Perangkat Lunak

Tahapan ini sangat menekan pada masalah pengumpulan kebutuhan

pengguna pada tingkatan sistem dengan menentukan konsep sistem beserta

antarmuka yang menghubungkannya dengan lingkungan sekitar. Hasilnya

berupa spesifikasi sistem.

2. Desain

Tahapan ini penulisan script menggunakan Dreamveaver, PHP, dan HTML

untuk melakukan proses masukan data transaksi ke database MySQL dan

perangkat ERD (Entity Relationship Diagram) dan (LRS) Logical

Relationship Structure untuk pemetaan proses alur program. Pada tahap ini

dilakukan pengujian desain dan pengujian fungsional yang bertujuan untuk

menguji apakah implementasi sistem sudah sesuai dengan rancangan dan

model sistem serta untuk menguji apakah sistem yang dikembangkan

melakukan fungsi-fungsi yang bersesuaian dengan tujuannya.

4

3. Pembuatan kode program

Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari

tahap ini adalah program komputer-komputer sesuai dengan desain yang telah

dibuat pada tahap desain.

4. Pengujian

Pengujian menggunakan Metode black box. Pengujian dimaksudkan untuk

menguji apakah fungsi – fungsi, masukan dan keluaran dari perangkat lunak

sesuai dengan spesifikasi yang dibutuhkan. Pengujian kotak hitam dilakukan

dengan membuat kasus uji yang bersifat mencoba semua fungsi dengan

memakai perangkat lunak apakah sesuai dengan spesifikasi yang dibutuhkan.

B. Metode Pengumpulan Data

Metode pengumpulan data yang digunakan oleh penulis dalam melakukan

pengumpulan data untuk pembuatan TA adalah:

1. Metode Observasi (Observation)

Pada metode pengumpulan data ini, penulis melakukan pengamatan terhadap

objek yang kali ini berupa model-model website di internet yang diamati untuk

bahan perbandingan.

2. Studi Pustaka (Study of the literature)

Untuk menjunjung kelengkapan dalam hal pembuatan web dan penulisan.

Penulis melakukan studi pustaka untuk mencari buku-buku referensi dan

tulisan-tulisan yang berhubungan dengan penulisan Tugas Akhir ini.

5

1.4 Ruang Lingkup

Untuk menghindari meluasnya pembahasan tugas akhir ini maka penulis

membatasi ruang lingkup permasalahan yang ada. Perancangan web e-

commerce ini hanya terdiri dari pengunjung, admin dan member. Pengunjung

dapat melihat produk dan jasa apa saja yang tersedia di dalam website ini.

Administrator (admin) mempunyai fasilitas dapat melihat data-data

pemesanan, mengecek pemesan (member), menambah data produk. Member

dapat melihat produk dan jasa yang dijual sekaligus juga dapat berbelanja.

Sistem informasi yang dirancang hanya membahas tentang penjualan produk

dan jasa.

Proses pembelian dilakukan secara online agar lebih memudahkan

customer. Pembayaran hanya dapat dilakukan melalui bank transfer, dimana

pembeli melakukan transfer uang secara manual ke rekening bank yang telah

ditentukan. Jangkauan pelayanan jasa dan penjualan produk hanya melayani

pembelian yang berada di Indonesia. Website ini juga tidak memuat laporan

keuangan per periode apapun. Sistem pengiriman produk apabila terdapat

transaksi hanya menggunakan jasa JNE.

6

1.5 Sistematika Penulisan

Penyusunan laporan Tugas Akhir ini menggunakan kerangka pembahasan

yang terbentuk dalam susunan bab, dengan uraian sebagai berikut :

BAB I PENDAHULUAN

Bab ini merupakan bab pendahuluan, yang didalamnya akan

membahas latar belakang permasalahan, rumusan masalah, batasan

masalah, tujuan dan manfaat penelitian serta sistematika penulisan.

BAB II LANDASAN TEORI

Bab ini menjelaskan tentang teori-teori yang berkaitan dengan yang

akan dibahas meliputi konsep dasar web dan teori pendukung.

BAB III PEMBAHASAN

Bab ini berisikan tentang analisa kebutuhan, rancangan antar muka,

ERD, LRS, rancangan struktur navigasi, implementasi dari website

Toko Kaos Aidan Sablon dan blackbox testing.

BAB IV PENUTUP

Bab terakhir ini merupakan bab yang berisikan kesimpulan dan

saran dari hasil penulisan dan penelitian yang telah dilakukan oleh

penulis.

7

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Dalam membangun sebuah web dibutuhkan sebuah bahasa pemrograman

dengan sebutan web scripting. Web scripting dibagi menjadi dua kategori, yaitu

yang bersifat client side dan server side. Untuk contoh bahasa client side adalah

HTML, CSS, Javascript, VB script, dan XML. Untuk contoh bahasa server

side adalah PHP, JSP, CFM, dan CGI atau PL.

Web scripting yang bersifat client side akan menghasilkan web page yang

statis artinya lebih menekankan pada desain format tampilan informasi dan

informasi yang disajikan tidak dapat di update seketika. Web scripting yang

bersifat server side akan menghasilkan web page yang dinamis artinya web yang

dapat menampilkan informasi serta dapat berinteraksi dengan user yang sifatnya

dinamis.

A. Website

Menurut Hidayat, (Hidayat, 2010), “Website atau situs dapat diartikan

sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi

teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya,

baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian

bangunan yang saling terkait, yang masing-masing dihubungkan dengan jaringan-

jaringan halaman”.

8

1. Internet

Menurut Simarmata (Simarmata, 2010) “Internet adalah kelompok atau

kumpulan dari jutaan komputer. Penggunaan Internet memungkinkan kita

mendapatkan informasi dari komputer yang ada di kelompok tersebut dengan

asumsi bahwa pemilik komputer memberikan izin akses”.

2. Web Server

Menurut Erinawati (Erinawati, 2012) “Web server merupakan software

yang memberikan layanan data yang berfungsi yang menerima permintaan http

ataupun https (hypertext transfer protocol security ) dari client melalui web

browser dan mengirimkan kembali hasilnya dalam bentuk halaman web yang

umumnya berbentuk dokumen dalam format HTML”.

3. Web Browser

Menurut Oetomo (Susilowati, 2011) “Web browser adalah melihat-lihat

atau menjelajah, sedangkan penambahan imbuhan ‘r’ dalam bahasa inggris

mencerminkan subyek atau pelaku tindakan. Dengan demikian, internet browser

dapat diartikan sebagai pelaku penjelajahan internet atau alat yang digunakan

untuk menjelajahi internet bagi pengguna internet”.

4. E-commerce

Menurut Andi (Haryanti & Irianto, 2011) “E-Commerce merupakan suatu

sistem atau paradigma baru dalam dunia bisnis, yang menggeser paradigma

perdagangan tradisional menjadi electronic commerce yaitu dengan

memanfaatkan teknologi ICT (Information and Communication Technology),

atau dengan kata lain teknologi internet”.

9

B. Bahasa Script Pemrograman

1. HTML (Hypertext Markup Language)

Menurut Raharjo (Kuncoro, 2012) “HTML adalah singkatan Hypertext

Markup Language, merupakan file teks yang ditulis menggunakan aturan-aturan

kode tertentu untuk kemudian disajikan ke user melalui suatu aplikasi web

browser”.

HTML lebih menekankan pada penggambaran komponen-komponen,

struktur dan formating didalam halaman web dari pada menentukan

penampilannya. Sedangkan web browser digunakan untuk menginterpretasikan

perintah-perintah HTML yang disisipkan kedalam teks dan menampilkan susunan

halaman ke browser dengan menggunakan font, tab , warna, garis, dan perataan

teks yang dikehendaki ke komputer yang menampilkan halaman web. Struktur

penulisan tag-tag yang ditempatkan pada dokumen yang terbagi kedalam area

diskriptif dan fungsional.

2. CSS (Cascading Style Sheet)

Menurut Team (Nugroho & Purnama, 2012) “Cascading Style Sheet (CSS)

adalah salah satu bahasa untuk mengatur tampilan dalam web yang berfungsi

memisahkan antara desain dengan content. CSS dapat ditulis untuk mendefinisikan

ulang tag-tag HTML ataupundengan menambah atribut id dan class pada tag

HTML”.

10

3. PHP (Personal Hypertext Preprocessor)

Menurut Hasanah (Hasanah, 2013) “PHP adalah bahasa pemrograman web

atau scripting language yang dijalankan diserver. PHP dibuat pertama kali oleh

Rasmus Lerdorf, yang pada awalnya dibuat untuk menghitung jumlah pengunjung

pada homepagenya. Pada waktu itu PHP bernama FI (Form Interpreter). Pada saat

tersebut PHP adalah sekumpulan script yang digunakan untuk mengolah data form

dari web”.

PHP digunakan untuk membuat halaman website yang dinamis. Dinamis

berarti halaman yang akan ditampilkan dibuat saat halaman itu diminta oleh client.

Mekanisme ini menyebabkan informasi yang diterima client selalu yang

terbaru atau up to date. Semua script PHP dieksekusi pada server dimana

script tersebut dijalankan.

C. Basis Data (Database)

Menurut Kadir (Choliviana & Yulianto, 2013) “Database didefinisikan

sebagai kumpulan data yang terkait. Secara teknis, yang berada dalam sebuah

database adalah sekumpulan tabel atau objek lain (indeks, view, dan lain-lain).

Tujuan utama pembuatan database adalah untuk memudahkan dalam mengakses

data”.

1. SQL (Structured Query Language)

SQL adalah kumpulan perintah khusus yang digunakan untuk mengakses data

dalam database rasional, yang merupakan bahasa komputer yang mematuhi standar

ANSI (American Nasional Standard Insistute).

11

Menurut Prihartanto (Prihartanto, 2011) “SQL adalah sebuah konsep

pengoperasian database, terutama untuk pemilihan atau seleksi dan pemasukan

data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara

otomatis”.

2. MYSQL

Menurut Wardani (Wardani, 2012) “MySQL adalah sebuah perangkat lunak

sistem manajemen basis data SQL atau yang dikenal dengan DBMS (Database

Management System), database ini multithread, multi user. MySQL AB membuat

MySQL tersedia sebagai perangkat lunak gratis di bawah lisensi GNU General

Public Licence (GPL), tetapi mereka juga menjual di bawah lisensi komersial untuk

kasus-kasus yang bersifat khusus”.

Seperti yang telah disebutkan sebelumnya, MYSQL bersifat gratis atau open

source sehingga kita bisa menggunakannya secara gratis. Pemrograman PHP juga

sangat mendukung dengan database MYSQL sehingga apabila kita

mempelajari dengan sungguh-sungguh kita dapat mengaplikasikan PHP &

MYSQL dalam aplikasi membuat website maupun dalam membuat website.

3. Php MyAdmin

Menurut Purwanto (Purwanto, 2012) “PhpMyAdmin adalah perangkat lunak

bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk

menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web)”.

Fungsi dari halaman ini adalah sebagai pengendali database MySQL

sehingga pengguna MySQL tidak perlu repot untuk menggunakan perintah-

perintah SQL. Karena dengan adanya halaman ini semua hal tersebut dapat

12

dilakukan hanya dengan meng-klik menu fungsi yang ada pada halaman

phpMyAdmin.

D. Model Pengembangan Perangkat Lunak.

Pembuatan program ini menggunakan metode Waterfall yang dikemukakan

oleh Rosa dan Shalahuddin tahun 2013 (Mubarok & Hadianti, 2016) dimana

terdapat 4 tahapan untuk dilakukan yaitu: analisis kebutuhan perangkat lunak,

desain, pembuatan kode program, pengujian

(Sumber: Rosa dan Shalahuddin 2013)

Gambar II.1

Metode Waterfall

Berikut adalah penjelasan dari tahap-tahap yang dilakukan dalam metode waterfall:

1. Analisis Kebutuhan Perangkat Lunak

Tahapan ini sangat menekan pada masalah pengumpulan kebutuhan

pengguna pada tingkatan sistem dengan menentukan konsep sistem beserta

antarmuka yang menghubungkannya dengan lingkungan sekitar. Hasilnya

berupa spesifikasi sistem.

Sistem/ Rekayasa

Informasi

Analisis

Desain

Pengkodean

Pengujian

13

2. Desain

Tahapan ini penulisan script menggunakan Dreamveaver, PHP, dan HTML

untuk melakukan proses masukan data transaksi ke database MySQL dan

perangkat ERD (Entity Relationship Diagram) dan (LRS) Logical

Relationship Structure untuk pemetaan proses alur program. Pada tahap ini

dilakukan pengujian desain dan pengujian fungsional yang bertujuan untuk

menguji apakah implementasi sistem sudah sesuai dengan rancangan dan

model sistem serta untuk menguji apakah sistem yang dikembangkan

melakukan fungsi-fungsi yang bersesuaian dengan tujuannya..

3. Pembuatan kode program

Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari

tahap ini adalah program komputer-komputer sesuai dengan desain yang telah

dibuat pada tahap desain.

4. Pengujian

Pengujian menggunakan Metode black box. Pengujian dimaksudkan untuk

menguji apakah fungsi – fungsi, masukan dan keluaran dari perangkat lunak

sesuai dengan spesifikasi yang dibutuhkan. Pengujian kotak hitam dilakukan

dengan membuat kasus uji yang bersifat mencoba semua fungsi dengan

memakai perangkat lunak apakah sesuai dengan spesifikasi yang dibutuhkan.

14

2.2 Teori Pendukung

Teori pendukung atau landasan teori dalam penyusunan tugas akhir ini

sangat diperkukan karena sebagai referensi untuk menunjang atau memperdalam

pemahaman terhadap informasi-informasi yang disajikan, teori pendukung yang

berisi Struktur Navigasi, ERD dan LRS.

A. Struktur Navigasi

Menurut Prihatna (Kaafi & Syahriani, 2015) “Struktur Navigasi adalah

susunan menu atau hierarki dari suatu situs yang menggambarkan isi dari setiap

halaman dan link atau navigasi tiap halaman pada suatu situs web”. Struktur

navigasi suatu situs web sangat dipengaruhi oleh tujuan dari situs web yang akan

dibuat.

Menentukan struktur navigasi merupakan hal yang sebaiknya dilakukan

sebelum membuat website. Ada empat macam bentuk dasar struktur navigasi yaitu:

1. Linear (Satu Alur)

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.

(Sumber :Prihatna 2005)

Gambar II.2

Struktur Navigasi Linear

15

2. Hierarchical (Hirarki)

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.


Gambar II.3.

Struktur Navigasi Hierarchical

16

3. 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 Non Linear ini walaupun terdapat

percabangan, mempunyai kedudukan yang sama tidak ada Master Page dan Slave

Page.


Gambar II.4

Struktur Navigasi Non linear

17

4. Composite ( Campuran )

Merupakan gabungan dari 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.


Gambar II.5

Struktur Navigasi Composite

B. Entity Relationship Diagram (ERD)

Menurut Anggun Nugroho (Nugroho, 2015) ERD (Entity Relationship

Diagram) merupakan suatu model untuk menjelaskan hubungan antar data dalam

basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar

relasi.

18

Frieyadie Menyatakan (Amin, 2017) bahwa komponen yang terdapat dalam Entity

Relationship Diagram sebagai berikut:

a. Entity (Entitas)

Entitas adalah suatu data yang dapat disimpan dan berguna bagi badan atau

perusahaan, dengan kata lain suatu objek yang dapat dibedakan dengan

objek lainnya. Entitas digambarkan dengan kotak persegi panjang.

Terdapat juga Entitas Lemah (weak Entity), yaitu suatu entitas sangat

bergantung dengan entitas biasa, dengan kata lain, entitas lemah tidak akan

ada apabila tidak ada entitas biasa. Entitas lemah digambarkan dengan

kotak persegi panjang dengan garis ganda.

b. Atribut

Atribut menunjukkan karakteristik dari tiap-tiap entitas. Atribut

digambarkan dengan bentuk oval.

c. Relasi

Relasi menunjukkan hubungan yang terjadi antar entitas. Relasi

digambarkan dengan bentuk belah ketupat atau diamond.

d. Line Connector

Line Connector digambarkan dengan bentuk garis tunggal.

e. Atribut Utama

Atribut utama digambarkan dengan bentuk oval, dengan keterangan diberi

garis bawah absolut.

f. Atribut Pilihan.

Atribut digambarkan dengan bentuk oval dengan keterangan diberi garis

bawah putus-putus.

19

Menurut Frieyadie (Amin, 2017) Kardinalitas merupakan tingkat hubungan

yang terjadi antar entitas di dalam sebuah sistem. Terdapat tiga tingkat hubungan

yang terjadi, yaitu :

1. Hubungan Satu pada Satu (One to One atau 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.

2. Hubungan Satu pada Banyak (One to Many atau 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.

3. Hubungan Banyak pada Banyak (Many to Many atau M:N)

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.

C. LRS (Logical Relationship Structure)

Menurut Frieyadie (Amin, 2017) mengemukakan bahwa, “LRS merupakan

hasil dari pemodelan Entity Relationship (ER) beserta atributnya sehingga bisa

terlihat hubungan-hubungan antar entitas”.

20

D. Pengujian Web

1. Black Box Testing

Menurut Rosa dan Salahuddin (Suparni, 2016) “metode black box adalah

menguji perangkat lunak dari segi spesifik fungsional tanpa menguji desain dan

kode program. Pengujian dimaksudkan untuk menguji apakah fungsi – fungsi,

masukan dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang

dibutuhkan. Pengujian kotak hitam dilakukan dengan membuat kasus uji yang

bersifat mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai

dengan spesifikasi yang dibutuhkan”.

Pengujian black box dilakukan dengan membuat kasus uji yang bersifat

mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai dengan

spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian

black box harus dibuat dengan kasus benar dan kasus salah, misalnya untuk kasus

proses login maka kasus uji yang dibuat adalah:

1. Jika user memasukkan nama pemakai (username) dan kata sandi (password)

yang benar.

2. Jika user memasukkan nama pemakai (password) yang salah, misalnya nama

pemakai benar tapi kata sandi (password) yang salah, atau sebaliknya, atau

keduanya salah.

21

BAB III

PEMBAHASAN

3.1. Analisis Kebutuhan

Pada website e-commerce ini, customer dapat melakukan transaksi langsung

secara online tanpa harus datang ke toko.untuk membeli produk. Berikut ini

spesifikasi kebutuhan dari website e-commerce ini.

A. Halaman Pengunjung :

1. Pengunjung dapat melihat home .

2. Pengunjung dapat melakukan daftar member dengan mengisi data dengan benar

dan lengkap.

3. Pengunjung dapat melihat produk.

4. Pengunjung dapat melihat detail produk.

5. Pengunjung dapat melihat jenis jasa yang ada.

5. Pengunjung dapat melihat halaman cara belanja

6. Pengunjung dapat melihat halaman FAQ.

7. Pengunjung dapat melihat halaman tentang kami.

8. Pengunjung dapat mengunjungi social media toko Aidan Sablon.

22

B. Halaman Member :

1. Member dapat melakukan login dan memilih produk dan jasa yang akan dibeli

2. Member dapat melihat, menambahkan, mengurangi, dan menghapus produk

yang telah ditambahkan kekeranjang belanja.

3. Member dapat melihat bukti pemesanan yang berisi detail transaksi dan ongkos

kirim yang harus dibayarkan.

4. Member dapat melakukan cetak struk pembelian.

5. Member dapat melakukan konfirmasi pembayaran.

6. Member dapat melihat profil member

C. Halaman Administrator Sistem:

1. Administrator dapat melakukan login.

2. Administrator dapat melihat menu notifikasi.

3. Administrator dapat mengelola menu katalog.

4. Administrator dapat mengelola menu kategori.

5. Administrator dapat mengelola menu ongkos kirim.

6. Administrator dapat mengelola menu order masuk.

7. Administrator dapat mengelola menu member.

8. Administrator dapat mengelola menu admin.

9. Administrator dapat melakukan logout.

23

3.2. Perancangan Perangkat Lunak

Perancangan perangkat lunak terdiri dari rancangan antar muka, basis data,

dan struktur navigasi.

3.2.1. Rancangan Antar Muka

Rancangan antar muka berisi rancangan antar muka halaman pengunjung,

member atau pengguna dan admin.

A. Halaman Pengunjung

1. Rancangan Antar Muka Halaman Utama

Header

Logo

DaftarLogin

Home Produk Jasa

Dashboard

Gambar

Keranjang BelanjaGambar

Detail

Gambar

Detail

Gambar

Detail

GambarGambarGambar

DetailDetailDetail

Social Media

Checkout

Bank Payment & Shipment

Tentang KamiFAQ

Footer

Gambar Gambar

Cara Belanja

Gambar III.1.

Rancangan Antar Muka Halaman Utama

24

2. Rancangan Antar Muka Halaman Daftar Member

Header

Logo

DaftarLogin

Registrasi Member

Tentang KamiFAQ

Footer

Nama Lengkap

Username

Password

Email

Telepon / HP

Asal Kota

Alamat Lengkap

:

:

:

::

:

:

Daftar Batal

Home Produk Jasa Cara Belanja

Gambar III.2.

Rancangan Antar Muka Daftar Member

25

3. Rancangan Antar Muka Halaman Produk

Header

Logo

DaftarLogin

Tentang KamiFAQ

Footer

Gambar

Detail

Gambar

Detail

Gambar

Detail

Gambar

Detail

Gambar

Detail

Gambar

Detail

Gambar

Detail

Gambar

Detail


Gambar III.3.

Rancangan Antar Muka Halaman Produk

26

4. Rancangan Antar Muka Halaman Detail Produk

Header

Logo

DaftarLogin

Tentang KamiFAQ

Footer

GambarNama

Harga

Deskripsi

:

:

Text

Text

Stok : Text


Gambar III.4.

Rancangan Antar Muka Halaman Detail Produk

27

5. Rancangan Antar Muka Halaman Jasa

Header

Logo

DaftarLogin

Tentang KamiFAQ

Footer

Gambar

Text

Home Produk Jasa Order Produk Order JasaCara Belanja

Gambar III.5.

Rancangan Antar Muka Halaman Jasa

28

6. Rancangan Antar Muka Halaman Cara Belanja

Header

Logo

DaftarLogin

Tentang KamiFAQ

Footer


Gambar

Cara Belanja

Text

Gambar III.6.

Rancangan Antar Muka Halaman Cara Belanja

29

7. Rancangan Antar Muka Halaman FAQ Header

Logo

DaftarLogin

Tentang KamiFAQ

Footer

Text


Gambar III.7.

Rancangan Antar Muka Halaman FAQ

30

8. Rancangan Antar Muka Halaman Tentang Kami

Header

Logo

DaftarLogin

Tentang KamiFAQ

Footer

Text


Gambar III.8.

Rancangan Antar Muka Halaman Tentang Kami

31

B. Halaman Member atau Pengguna

1. Rancangan Antar Muka Halaman Login

Header

Logo

DaftarLogin

Tentang KamiFAQ

Footer

Login Member

Username : Text

Password : Text

Login Batal


Gambar III.9.

Rancangan Antar Muka Halaman Login

32

2. Rancangan Antar Muka Halaman Utama Member

Header

Logo

Dashboard

Gambar

Produk Terbaru

Gambar

Detail

Gambar

Detail

Gambar

Detail

GambarGambarGambar

DetailDetailDetail

Social Media

Checkout

Bank Payment & Shipment

Tentang KamiFAQ

Footer

Keranjang Belanja

Gambar Gambar


LogoutProfil

Gambar III.10.

Rancangan Antar Muka Halaman Utama Member

33

3. Rancangan Antar Muka Halaman Keranjang Belanja

Header

Logo

Tentang KamiFAQ

Footer

Keranjang Belanja

No Nama Barang Jumlah Harga SatuanBerat Subtotal Opsi

Total

Lanjut Belanja Checkout

Text Text TextText Text Text


LogoutProfil

Warna UkuranId Barang

TextText TextText

Gambar III.11.

Rancangan Antar Muka Halaman Keranjang Belanja

34

4. Rancangan Antar Muka Halaman Konfirmasi Pesanan

Header

Logo

Konfirmasi Pesanan

Nama Lengkap : Text

Id Katalog : Text

Barang Pesanan : Text

Warna : Text

Selesai

Text

FAQ Tentang Kami

Footer


Size : Text

Jumlah Pesanan : TextEmail : Text

Telepon / HP : Text

Kota : Text

Alamat Lengkap : Text

LogoutProfil

Gambar III.12.

Rancangan Antar Muka Halaman Konfirmasi Pesanan

35

5. Rancangan Antar Muka Halaman Bukti Pemesanan

Header

Logo

Nama Pemesan : Text

Telepon : Text

Email : Text

Alamat : Text

FAQ Tentang Kami

Footer

Bukti Pemesanan

Nama Produk

Text

Berat

Total Berat

Text

Ukuran

Text

Text

Warna

Kota Tujuan

Text

Text

Jumlah

Text

Total Biaya Pengiriman

Berat Total

Text

Text

Total Bayar Text

Cetak Struk


LogoutProfil

Harga Satuan

Text

Sub Total

Text

Gambar III.13.

Rancangan Antar Muka Halaman Bukti Pemesanan

36

6. Rancangan Antar Muka Halaman Struk Pembelian

Kode Order

Nama Produk Berat Jumlah Berat Total Harga Satuan Subtotal

Text

Kota Tujuan

Text

Text

Text

Total Berat

Text

Text

Text


Text

Text

Total Bayar Text

Cetak

Struk Pembelian

Gambar III.14.

Rancangan Antar Muka Halaman Struk Pembelian

7. Rancangan Antar Muka Halaman Profil Member

Header

Logo

FAQ Tentang Kami

Footer

Profil Member

Id Member : Text

Nama : Text

Email : Text

Alamat : Text

Telepon : Text

Status Order

No No. Pesanan Tanggal Jam Status Detail Pesanan Pembayaran

Text Text Text Text Text Text Text


LogoutProfil

Gambar III.15.

Rancangan Antar Muka Halaman Profil Member

37

8. Rancangan Antar Muka Halaman Detail Pesanan

Header

Logo

FAQ Tentang Kami

Footer

Nama : Text

Email : Text

Alamat Pengiriman : Text

No. Telepon : Text

Detail Pesanan

Kembali


LogoutProfil

Nama Produk

Text

Berat

Total Berat

Text

Ukuran

Text

Text

Warna

Kota Tujuan

Text

Text

Jumlah

Text


Berat Total

Text

Text

Total Bayar Text

Harga Satuan

Text

Sub Total

Text

Gambar III.16.

Rancangan Antar Muka Halaman Detail Pesanan

38

9. Rancangan Antar Muka Halaman Konfirmasi Pembayaran

Header

Logo

FAQ Tentang Kami

Footer

Nama Lengkap : Text

Alamat Email : Text

Konfirmasi Pembayaran

No. Pesanan : Text

Tanggal : Text

Jumlah Kirim : Text

Bank Penerima : Text

Bank Pengirim : Text

Tipe Transaksi : Text

Nama Akun : Text

Simpan


LogoutProfil

Gambar III.17.

Rancangan Antar Muka Halaman Konfirmasi Pembayaran

39

C. Halaman Administrator Sistem

1. Rancangan Antar Muka Halaman Login Administrator

Logo

Username

Password

Login

Gambar III.18.

Rancangan Antar Muka Halaman Login Administrator

40

2. Rancangan Antar Muka Halaman Menu Notifikasi

Logo

Header

Menu

Notifikasi

Katalog

Kategori

Ongkos Kirim

Order Masuk

Member

Admin

Logout

Notifikasi

Status Web Saat Ini

Text : Text

Footer

Gambar III.19.

Rancangan Antar Muka Halaman Menu Notifikasi

41

3. Rancangan Antar Muka Halaman Menu Katalog

Logo

Header

Katalog

Add

Footer

Nama Kategori Gambar Harga Berat Stok Aksi

TextText Text Text Text Text Text

First Prev Next Last

Menu

Notifikasi

Katalog

Kategori

Ongkos Kirim

Order Masuk

Member

Admin

Logout

Gambar III.20.

Rancangan Antar Muka Halaman Menu Katalog

42

4. Rancangan Antar Muka Halaman Menu Kategori

Logo

Header

Kategori

Add

Footer

ID Kategori Kategori Nama Aksi

Text Text Text

Menu

Notifikasi

Katalog

Kategori

Ongkos Kirim

Order Masuk

Member

Admin

Logout

Gambar III.21.

Rancangan Antar Muka Halaman Menu Kategori

43

5. Rancangan Antar Muka Halaman Menu Ongkos Kirim

Logo

Header

Ongkos Kirim

Add

Footer

ID Harga Aksi

Text

Kota Tujuan

TextText Text


Menu

Notifikasi

Katalog

Kategori

Ongkos Kirim

Order Masuk

Member

Admin

Logout

Gambar III.22.

Rancangan Antar Muka Halaman Menu Ongkos Kirim

44

6. Rancangan Antar Muka Halaman Menu Order Masuk

Logo

Header

Order Masuk

Footer

No. Order TanggalNama Customer Jam Status Aksi

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text


Menu

Notifikasi

Katalog

Kategori

Ongkos Kirim

Order Masuk

Member

Admin

Logout

Gambar III.23.

Rancangan Antar Muka Halaman Menu Order Masuk

45

7. Rancangan Antar Muka Halaman Menu Member

Logo

Header

Member

Footer

ID EmailNama Alamat Telepon Id Kota

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Aksi

Text

Text

Menu

Notifikasi

Katalog

Kategori

Ongkos Kirim

Order Masuk

Member

Admin

Logout

Gambar III.24.

Rancangan Antar Muka Halaman Menu Member

46

8. Rancangan Antar Muka Halaman Menu Admin

Logo

Header

Admin

Footer

ID Username

Text Text

Add

Aksi

Text

Menu

Notifikasi

Katalog

Kategori

Ongkos Kirim

Order Masuk

Member

Admin

Logout

Gambar III.25.

Rancangan Antar Muka Halaman Menu Admin

47

3.2.2. Rancangan Basis Data

Perancangan basis data menghasilkan pemetaan tabel-tabel yang

digambarkan dengan Entity Relationship Diagram (ERD)

A. Entity Relationship Diagram (ERD)

Member

Orders

Katalog

Konfirmasi

Kategori

Ongkir

Melakukan

Melakukan

Dapat Melihat

Mempunyai

Mempunyai

Mempunyai

email

nama

alamat

telp

password

Id_member

Id_ongkir

Nama_ongkir

Ongkos_kirim

Bank_terima

Akun_bank

Id_bayar

tanggal

Bank_kirim

jumlah

Id_orders

Id_kategori

Nama_kategori

Id_katalog

Id_kategori

Id_kota

Tgl_order

Jam_order

No_pesan

Id_katalog1

1

1 1

1

1

1

M

M

M

1M

Id_kotanamalengkap

Id_orders

harga berat

nama

stok

nama

Id_member

Id_orders

Gambar III.26.

Entity Relationship Diagram

48

B. Logical Relational Structure (LRS)

Member

* Id_member

nama

namalengkap

email

Alamat

telp

password

id_kota

Orders

* Id_orders

Id_member

Id_kota

Tgl_order

Jam_order

Id_katalog

No_pesan

Konfirmasi

* Id_bayar

Bank_kirim

Bank_terima

nama

Jumlah

tanggal

Akun_bank

nama

Id_orders

Katalog

* Id_katalog

Id_kategori

Nama

Harga

Berat

stok

Kategori

* Id_kategori

Nama_kategori

Ongkir

* Id_ongkir

Id_orders

Nama_ongkir

Ongkos_kirim

Gambar III.27.

Logical Relational Structure

49

3.2.3. Rancangan Struktur Navigasi

1. Struktur Navigasi Composite Halaman Pengunjung

Index

Home FAQTentang

KamiProduk Jasa

Cara

Belanja

Daftar

Member

Halaman

FAQ

Halaman

Tentang

Kami

Kaos Sablon

ManualHalaman

Cara

Belanja

Detail

Produk

Halaman

Jasa

Polo

Shirt

Sweater

/ Jaket

Cutting /

Polyflex

Bordir

Gambar III.28.

Struktur Navigasi Composite Pengunjung

50

2. Struktur Navigasi Composite Halaman Member

Index

Home FAQTentang

KamiProduk Jasa

Cara

Belanja

Halaman

FAQ

Halaman

Tentang

Kami

Kaos Halaman

Cara

Belanja

Detail

Produk

Halaman

Jasa

Login

Order

Produk

Order

Jasa

Detail

ProdukBeli

Keranjang

Belanja

Beli

Logout

Checkout

Profil

Konfirmasi

Pesanan

Konfirmasi

PembayaranPolo Shirt

Sweater /

Jaket

Kaos

Cutting /

Polyflex

Bordir

Kaos

Cutting /

Polyflex

Bordir

Kaos

Polo Shirt

Sweater /

Jaket

Gambar III.29.

Struktur Navigasi Composite Halaman Member

51

3. Struktur Navigasi Composite Halaman Administrator Sistem

Home

KatalogOngkos

KirimKategori

Order

MasukMemberLogout

Tambah HapusEditTampil Hapus

Tampil Hapus

Edit

Hapus

Edit Hapus

Tampil Edit HapusTambah

Tambah

Tambah

Admin

Login

Gambar III.30.

Struktur Navigasi Composite Halaman Administrator Sistem

52

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada aplikasi e-commerce berdasarkan

hasil rancangan antar muka.

1. Implementasi Rancangan Antar Muka Pengunjung

a. Halaman Utama

Gambar III.31.

Halaman Utama

53

b. Halaman Daftar Member

Gambar III.32.

Halaman Daftar Member

54

c. Halaman Produk

Gambar III.33.

Halaman Produk

55

d. Halaman Detail Produk

Gambar III.34.

Halaman Detail Produk

56

e. Halaman Jasa

Gambar III.35.

Halaman Jasa

57

f. Halaman Cara Belanja

Gambar III.36.

Halaman Cara Belanja

58

g. Halaman FAQ

Gambar III.37.

Halaman FAQ

59

h. Halaman Tentang Kami

Gambar III.38.

Halaman Tentang Kami

60

2. Implementasi Rancangan Antar Muka Member

a. Halaman Login Member

Gambar III.39.

Halaman Menu Login Member

61

b. Halaman Utama Member

Gambar III.40.

Halaman Utama Member

62

c. Halaman Keranjang Belanja

Gambar III.41.

Halaman Keranjang Belanja

d. Halaman Konfirmasi Pesanan

Gambar III.42.

Halaman Konfirmasi Pesanan

63

e. Halaman Bukti Pemesanan

Gambar III.43.

Halaman Bukti Pemesanan

f. Halaman Struk Pemebelian

Gambar III.44.

Halaman Struk Pembelian

64

g. Halaman Profil Member

Gambar III.45.

Halaman Profil Member

h. Halaman Detail Pesanan

Gambar III.46.

Halaman Detail Pesanan

65

i. Halaman Konfirmasi Pembayaran

Gambar III.47.

Halaman Konfirmasi Pembayaran

66

3. Implementasi Rancangan Antar Muka Administrator

a. Halaman Login Administrator

Gambar III.48.

Halaman Menu Login Administrator

67

b. Halaman Menu Notifikasi

Gambar III.49.

Halaman Menu Notifikasi

68

c. Halaman Menu Katalog

Gambar III.50.

Halaman Menu Katalog

69

d. Halaman Menu Kategori

Gambar III.51.

Halaman Menu Kategori

70

e. Halaman Menu Ongkos Kirim

Gambar III.52.

Halaman Menu Ongkos Kirim

71

f. Halaman Menu Order Masuk

Gambar III.53.

Halaman Menu Order Masuk

72

g. Halaman Menu Member

Gambar III.54.

Halaman Menu Member

73

h. Halaman Menu User Admin

Gambar III.55.

Halaman Menu User Admin

74

3.3.2 Pengujian Unit

A. Pengujian Terhadap Form Login Member

Tabel III.1.

Pengujian Terhadap Form Login Member

No Skenario

pengujian Test Case

Hasil yang

diharapkan

Hasil

Pengujian Kesimpulan

1

Username

dan Password

tidak di isi

kemudian

klik tombol

login

Username:

(kosong)

Password:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

“username atau

password anda

salah”

Sesuai

harapan Valid

2

Mengetikan

username dan

Password

tidak diisi

kemudian

klik tombol

login

Username:

murdiansyah

(benar)

Password:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

“username atau

password anda

salah”

Sesuai

harapan Valid

3

Username

tidak diisi

dan Password

diisi

kemudian

klik tombol

login

Username:

(kosong)

Password:

123456

(benar)

Sistem akan

menolak akses

user dan

menampilkan

“username atau

password anda

salah”

Sesuai

harapan Valid

4

Mengetikan

username dan

password

dengan data

yang benar

kemudian

klik tombol

login

Username:

murdiansyah

(benar)

Password:

123456

(benar)

sistem

menerima akses

login, kemudian

langsung

menampilkan

"Berhasil

Login, Selamat

berbelanja..

murdianyah

Sesuai

harapan Valid

75

B. Pengujian Terhadap Form Pendaftaran Member

Tabel III.2.

Pengujian Terhadap Form Daftar Member

No Skenario

pengujian Test Case

Hasil yang

diharapkan

Hasil


1

Nama

lengkap,

email,

password,

telepon,

kota, alamat

lengkap

tidak diisi

kemudian

klik daftar

Nama lengkap:

(kosong)

email:

(kosong)

password:

(kosong)

telepon:

(kosong)

kota: (kosong)

alamat

lengkap:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"please select

an item in the

list" pada

listbox form

yang kosong

Sesuai

harapan Valid

2

Mengisi

salah satu

form

mengosong

kan form

yang lain

kemudian

klik daftar

Nama lengkap:

irul

email:

(kosong)

password:

(kosong)

telepon:

(kosong)

kota: (kosong)

alamat

lengkap:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"please select

an item in the

list" pada

listbox form

yang kosong

Sesuai

harapan Valid

3

Mengisi

beberapa

form nama

lengkap,

email,

password,

telepon

kemudian

klik daftar

Nama lengkap:

khairul ikhwan

email:

khairulikhwan

[email protected]

om password:

123456

telepon:

082114497785

kota: (kosong)

alamat

lengkap:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"please select

an item in the

list" pada

listbox form

yang kosong

Sesuai

harapan Valid

76

No Skenario

pengujian Test Case

Hasil yang

diharapkan

Hasil


4

Mengisi

semua

form

dengan

data yang

benar

kemudian

klik tombol

daftar

Nama lengkap:

khairul ikhwan

email:

khairulikhwan7

[email protected]

password:

123456

telepon:

082114497785

kota: Jakarta

alamat lengkap:

Jl. Warakas 4

Gang 20 No.20

Sistem akan

menerima

akses user

dan

menampilka

n "Selamat

anda telah

menjadi

member,

silahkan

Login untuk

berbelanja"

Sesuai

harapan Valid

C. Pengujian Terhadap Form Konfirmasi Pembayaran

Tabel III.3.

Pengujian Terhadap Form Konfirmasi Pembayaran

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil

pengujian Kesimpulan

1

Mengosong

kan salah

satu form

kemudian

klik simpan

Tanggal:

(kosong)

Jumlah kirim:

400000

Bank

pengirim:

(kosong) Dari

Bank: BCA

Type

transaksi:

Bank transfer

Nama Akun:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"Please fill out

this field" pada

awal form

yang kosong

Sesuai

harapan Valid

77

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil


2

Mengisikan

seluruh form

dengan data

lengkap dan

benar

Tanggal:

07/27/17

Jumlah

kirim:

400000

Bank

pengirim:

CIMB

NIAGA

Dari Bank:

BCA Type

transaksi:

Bank

transfer

Nama Akun:

khairul

Sistem akan

menerima

data dan

menampilkan

"Konfirmasi

pembayaran

anda akan

kami proses,

terima

kasih."

Sesuai

harapan Valid

D. Pengujian Terhadap Form Login Administrator

Tabel III.4.

Pengujian Terhadap Form Login Administrator

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil


1

Username

dan Password

tidak diisi

kemudian

klik tombol

Login

Username:

(kosong)

Password:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"Please fill out

this field"

pada awal

form yang

kosong

Sesuai

harapan Valid

78

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil


2

Mengosongkan

salah satu form

kemudian klik

tombol Login

Username:

khairul

Password:

(kosong)

Sistem akan

menolak

akses user dan

menampilkan

"Please fill

out this field"

pada awal

form yang

kosong

Sesuai

harapan Valid

3

Mengetikan

salah satu

kondisi salah

pada username

atau password

kemudian klik

tombol login

Username:

khairul

Password:

123456

Sistem akan

menolak

akses user dan

menampilkan

"username

atau password

salah"

Sesuai

harapan Valid

4

Mengetikan

username dan

password

dengan data

yang benar

kemudian klik

tombol login

Username:

khairul

Password:

123456

Sistem

menerima

akses login,

kemudian

menampilkan

"Selamat

datang

khairul" di

halaman

administrator

Sesuai

harapan Valid

79

BAB IV

PENUTUP

4.1. Kesimpulan

Dari uraian tentang pembuatan website sebagai sarana dan informasi dan

penjualan Toko Kaos Aidan Sablon yang telah dibahas pada bab sebelumnya,

penulis dapat memberikan kesimpulan sebagai berikut :

1. Website Toko Kaos Aidan Sablon ini dibangun dengan program aplikasi

Adobe Dreamweaver dan menggunakan bahasa pemrograman PHP (Personal

Hypertext Preprocessor).

2. Basis data yang digunakan pada website ini adalah MySQL (My Structure

Query Language).

3. Informasi yang ditampilkan dalam website ini tersedia dalam bentuk teks dan

gambar sehingga membuat website tersebut lebih menarik untuk dilihat oleh

calon pembeli.

4. Website ini dibuat bertujuan untuk memudahkan para customer untuk

mencari informasi mengenai produk dan jasa apa saja yang ditawarkan.

Customer juga bisa langsung memesan produk dan jasa secara online tanpa

harus datang ke toko.

80

4.2. Saran

Berkaitan dengan kesimpulan yang telah penulis kemukakan dalam pembuatan

website ini, maka penulis mencoba mengajukan saran-saran yang dapat

meningkatkan kualitas dalam penggunaan program ini. Adapun saran-saran

tersebut yaitu :

1. Disarankan agar kedepannya website ini ditambahkan fitur lupa password dan

ubah password sehingga bila terjadi lupa password baik pengelola maupun

pelanggan tidak harus membuat akun baru.

2. Disarankan agar website ini dapat memberikan diskon dan promo-promo

lainnya untuk menarik minat para calon pembeli untuk berbelanja.

3. Sebaiknya kedepannya harus memiliki Backup atau cadangan database dan

file lainnya agar lebih mudah mencari solusi jika terjadi hal yang tidak

diinginkan.

4. Disarankan agar kedepannya pada website Toko Kaos Aidan Sablon ini

terdapat fitur e-payment atau e-banking sehingga customer tidak harus

melakukan transfer secara manual dan tidak perlu melakukan konfirmasi

pembayaran melalui sms atau e-mail.

5. Disarankan agar kedepannya pada website Toko Kaos Aidan Sablon ini

terdapat laporan hasil penjualan perbulan ataupun pertahun secara rinci agar

memudahkan pemilik dalam menghitung keuntungan penjualan.

81

DAFTAR PUSTAKA

Amin, R. 2017. Rancang Bangun Sistem Informasi Penerimaan Siswa Baru Pada SMK

BUDHIWARMAN 1 JAKARTA. Jurnal Ilmu Pengetahuan dan Teknologi

Komputer, VOL. 2. NO. 2 , 112-121.

Choliviana & Yulianto. 2013. Pembuatan Sistem Pendaftaran Anggota Secara Online

Pada Organisasi Himpunan Mahasiswa Islam (HMI) Kabupaten Pacitan .

Jurnal Sistem Informasi, 53-60.

Erinawati, H. D. 2012. Pembangunan Sistem Informasi Pembayaran Sekolah Pada

Sekolah Menengah Atas (SMA) Negeri 1 Rembang Berbasis Web. Jurnal

Sistem Informasi, 40-46.

Hafsah, M. J. 2014. Upaya Pengembangan Usaha Kecil dan Menengah (UKM). 40-

44.

Haryanti & Irianto. 2011. Rancang Bangun Sistem Informasi E-Commerce Untuk

Usaha Fashion Studi Kasus Omah Mode Kudus. Jurnal Sistem Informasi, VOL.

2, NO. 1,, 8-14.

Hasanah, U. 2013. Sistem Informasi Penjualan On_line Pada Toko Kreatif Suncom

Pacitan. Sistem Informasi, 40-48.

Hidayat, R. 2010. Cara Praktis Membangun Website Gratis. Jakarta: PT Elex Media

Komputindo.

Imbar & Tirta. 2011. Analisa, Perancangan dan Implementasi Sistem Informasi

Penjualan Pelumas Studi Kasus : Perusahaan “PT. Pro Roll International”.

Jurnal Informatika, 119-149.

Kaafi & Syahriani. 2015. Sistem Informasi Penjualan Pakaian Berbasis Web. Jurnal

Informatika, 23-28.

82

Kuncoro, R. B. 2012 . Pembuatan Website Tempat Pariwisata Rumah Dome New

Nglepen . Journal Speed , 36-41.

Muarie, m. s. 2015. rancangan bangun sistem ujian online pada smp neheri 8 sekayu.

TIPS, 28-40.

Nugroho & Purnama. 2012. Perancangan Inovasi Konten Web Radio Streaming Dan

Podcasting Pada Radio Puspa Fm Pacitan. Jurnal SIstem Informasi, 47-55.

Nugroho, A. 2015. Perancangan Sistem Informasi Pengelolaan Aset Ukm (Unit

Kegiatan Mahasiswa) STMIK STIKOM Bali Berbasis Client server.

Konferensi Nasional Sistem & Informatika, 973-976.

Prihartanto, Y. L. 2011. Sistem Informasi Manajemen Agenda Pada Badan Pelayanan

Perijinan Terpadu Kabupaten Karanganyar . Jurnal Sistem Informasi, 53-58.

Purwanto, E. 2012. Perbandingan Strategi Replikasi Pada Sistem Basis Data

Terdistribusi. Jurnal Informatika, 1-8.

Simarmata, J. 2010. Rekayasa Perangkat Lunak. Andi.

Susilowati, S. 2011. Pembuatan Sistem Informasi Klinik Rawat Inap Prima Husada

Widoro Pacitan Berbasis Website. Jurnal Sistem Informasi, 29-34.

Wardani, K. T. 2012. Pembangunan Sistem Informasi Akademik Lembaga Bimbingan

Belajar Spectrum. Jurnal Sistem Infirmasi, 68-73.

KHAIRUL IKHWAN - Bina Sarana Informatika · sablon. Pakaian yang dijual mencakup kaos polos, polo,...

Documents

Transcript of KHAIRUL IKHWAN - Bina Sarana Informatika · sablon. Pakaian yang dijual mencakup kaos polos, polo,...