PERANCANGAN WEBSITE INTERAKTIF E-COMMERCE UNTUK PERUSAHAAN MEBEL (Studi Kasus : Mebel Karya Satu)

i

PERANCANGAN WEBSITE INTERAKTIF E-COMMERCE

UNTUK PERUSAHAAN MEBEL

(Studi Kasus : Mebel Karya Satu)

TUGAS AKHIR

Diajukan Sebagai Salah Satu Syarat

Untuk Memperoleh Gelar Sarjana Teknik

Program Studi Teknologi Informasi

Oleh :

THORIQ RIZKI BURTI

20120140068

TEKNOLOGI INFORMASI

UNIVERSITAS MUHAMMADYAH YOGYAKARTA

2016

iv

LEMBAR PERNYATAN

Dengan ini saya sebagai penulis Tugas Akhir dengan judul “Perancangan Website Interaktif E-Commerce Untuk Perusahaan Mebel Karya Satu” adalah benar-benar hasil penelitian dan merupakan karya tulis dari penulis. Penelitian dilakukan berdasarkan analisis bukan dari penjiplakan melainkan melalui pengutipan sesuai dengan etika keilmuan yang berlaku. Dengan pernyataan saya bersedia menanggung resiko atau sangsi yang dijatuhkan kepada penulis apa bila diketemukan pelanggaran terhadap etika keilmuan dalam tugas akhir penulis.

Thoriq Rizki Burti Yogyakarta, 29 Agustus 2016

v

PRAKATA

Puji syukur kehadirat Allah SWT yang telah melimpahkan segalanya sehingga penulis dapat menyelesaikan skripsi dengan judul “Perancangan Website Interaktif E-Commerce Untuk Perusahan Mebel Karya Satu”. Laporan skripsi disusun untuk memenuhi salah satu syarat dalam memperoleh gelar Sarjana Teknik (S.T.) pada Program Studi S1 Teknologi Informasi Universitas Muhammadiyah Yogyakarta.

Dalam melakukan penelitian dan penyusunan laporan skripsi penulis telah mendapatkan banyak dukungan dan bantuan dari berbagai pihak. Penulis mengucapkan terima kasih kepada:

1. Bapak Ir. Haris Setyawan, S.T., M.Eng selaku pembimbing utama yang telah membimbing penulis dengan kesabaran dan ketulusan dalam pengembangan sistem.

2. Mbak Aprilia Kurnianti ,S.T.,M.Eng selaku pembimbing pendamping yang telah meluangkan waktu dan sangat sabar membimbing penulis dalam pembuatan skripsi.

3. Bapak Ir. Asroni, S.T., M.Eng selaku dosen penguji yang bersedia meluangkan waktu untuk memberikan kritik dan saran kepada penulis dalam pembuatan skripsi.

4. Bapak Ir. Muhammad Helmi Zain Nuri, S.T., M.T. selaku Ketua Program Studi S1 Teknologi Informasi yang memberikan izin kepada penulis untuk belajar.

vi 5. Para dosen Jurusan Teknologi Informasi Universitas Muhammadiyah Yogyakarta, Bapak Eko, Bapak Giga, Bapak Slamet, Bapak Tony dan Mas Okto yang telah memberikan tambahan pengetahuan dan mengajarkan ilmunya kepada penulis selama perkuliahan.

6. Para staff Jurusan Teknologi Informasi UMY, Mas Andhy, Mas Haris, Mas Reza, Mbak Lilis dan Mbak Novi yang telah memberi informasi kepada penulis.

7. Ibu dan Bapak dari penulis lahir sampai sekarang selalu memberikan kasih sayang dan doanya kepada penulis sehingga penulis dapat mencapai ke tahap sekarang.

8. Fiqih Auliza Burti dan Pratiwi Adeliasani sebagai pendorong semangat kepada penulis dalam menyelesaikan skripsi..

9. Teman-teman Teknologi Informasi, khususnya teman seperjuangan angkatan 2012 yang senantiasa berbagi ilmu dan pengalaman selama kuliah di Fakultas Teknik.

10. Pihak-pihak lainnya yang tidak dapat disebutkan satu per satu, yang telah memberikan bantuan kepada saya, sehingga peulis dapat menyelesaikan penyusunan skripsi.

ix

DAFTAR ISI

HALAMAN SAMPUL ... i

HALAMAN PENGESAHAN I ... ii

HALAMAN PENGESAHAN II ... iii

LEMBAR PERNYATAN ... iv

PRAKATA ... v

INTISARI ... vii

ABSTRACT ... viii

DAFTAR ISI ... ix

DAFTAR TABEL ... xii

DAFTAR GAMBAR ... xiii

BAB I PENDAHULUAN ... 1

1.1 Gambaran Umum Obyek Penelitian ... 1

1.2 Latar Belakang Masalah... 2

1.3 Permasalahan ... 4

1.4 Ruang lingkup ... 5

1.4.1 Segmentasi ... 5

1.5 Tujuan Perancangan ... 6

1.6 Sistematika Penulisan……….………..7

BAB II TINJAUAN PUSTAKA DAN LANDASAN TEORI ... 8

2.1 Tinjauan Pustaka ... 8

2.2 Landasan Teori ... 9

2.2.1 Teori Website ... 9

2.2.2 Website E-commerce ... 10

2.2.3 Teori Desain ... 11

2.2.4 Elemen-Elemen ... 14

2.2.5 Elemen-Elemen Program Multimedia... 14

2.2.6 Layout ... 16

2.2.7 Navigation ... 16

2.2.8 Teori Perilaku Konsumen (Consumer Behavior) ... 17

2.2.9 Waterfall ... 18

2.2.10 UML (Unified Modeling Language) ... 18

x

BAB III DATA METODE PENELITIAN ... 22

3.1 Alat ... 22

3.2 Bahan ... 23

3.2.1 Data Khalayak Sasaran ... 23

3.2.2 Hasil Wawancara ... 24

3.3 Alur Penelitian ... 26

3.4 Arsitektur ... 28

3.5 Analisis Kebutuhan ... 30

3.6 Rancangan ... 30

3.6.1 Use Case Diagram ... 30

3.6.2 Activity Diagram ... 34

3.6.3 Class Diagram ... 36

3.6.4 Kamus Data ... 38

3.6.5 ER Diagram ... 46

3.6.6 Rancangan Antarmuka ... 47

BAB IV PEMBAHASAN ... 69

4.1 Sistem Perancangan ... 69

4.1.1 Instalasi Aplikasi Server ... 69

4.1.2 Pembuatan Database... 69

4.2 Antarmuka... 71

4.2.1 Halaman Login ... 71

4.2.2 Halaman Kategori Barang ... 71

4.2.3 Halaman List Barang ... 72

4.2.4 Halaman Data Pengurus ... 73

4.2.5 Halaman Tambah Data Pengurus ... 74

4.2.6 Halaman Laporan Penjualan ... 75

4.2.7 Halaman Laporan Stok Barang ... 76

4.2.8 Halaman Hasil Laporan Penjualan (Order Biasa)... 77

4.2.9 Halaman Hasil Laporan Penjualan (Spesial Request) ... 78

4.2.10 Halaman Data Member ... 79

4.2.11 Halaman Testimonial ... 80

xi

4.2.13 Halaman Registrasi Member ... 81

4.2.14 Halaman Akun Member ... 82

4.2.15 Halaman Detail Pesanan (Order Biasa) ... 83

4.2.16 Halaman Detail Pesanan (Spesial Request) ... 84

4.2.17 Halaman Daftar Pesanan List (Order Biasa) ... 85

4.2.18 Halaman Daftar Pesanan List (Spesial Order) ... 86

4.3 Pengujian Sistem ... 87

4.4 Pembahasan ... 91

BAB V KESIMPULAN DAN SARAN ... 92

5.1 Kesimpulan ... 92

5.2 Saran ... 92

DAFTAR PUSTAKA ... 93

xii

DAFTAR TABEL

Tabel 3. 1 Keterangan Komponen Arsitektur ... 29

Tabel 3. 2 Kamus Data Admin ... 38

Tabel 3. 3 Kamus Data Level ... 39

Tabel 3. 4 Kamus Data Member ... 39

Tabel 3. 4 Kamus Data Member (Lanjutan) ... 40

Tabel 3. 5 Kamus Data Order ... 40

Tabel 3. 6 Kamus Data Spesial Order ... 41

Tabel 3. 7 Kamus Data Barang ... 42

Tabel 3. 8 Kamus Data Kategori ... 43

Tabel 3. 9 Kamus Data Bukti Pembayaran ... 43

Tabel 3. 10 Kamus Data Gambar ... 44

Tabel 3. 11 Kamus Data Pemberitahuan ... 44

Tabel 3. 12 Kamus Data Testimonial ... 45

Tabel 4. 1 Hasil Pengujian……….87

Tabel 4. 1 Hasil Pengujian (Lanjutan)………88

Tabel 4. 1 Hasil Pengujian (Lanjutan)……….………..89

Tabel 4. 1 Hasil Pengujian (Lanjutan)………90

xiii

DAFTAR GAMBAR

Gambar 2. 1 Entity Persegi Panjang ... 20

Gambar 2. 2 Atribut Elips ... 21

Gambar 2. 3 Relasi belah ketupat ... 21

Gambar 3. 1 Foto Brosur Mebel Karya Satu………...25

Gambar 3. 2 Foto Kartu Nama Mebel Karya Satu………26

Gambar 3. 4 Arsitektur Sistem yang Diusul………28

Gambar 3. 5 Use Case Diagram Aktor Admin………31

Gambar 3. 6 Use Case Diagram AktorOperator……….32

Gambar 3. 7 Use Case Diagram Aktor Member………....33

Gambar 3. 8 Use Case Diagram Aktor NonMember………..33

Gambar 3. 9 Activity Diagram……….35

Gambar 3. 10 Class Diagram………..36

Gambar 3. 11 ER Diagram………..46

Gambar 3. 12 Rancangan Halaman Utama………..………...48

Gambar 3. 13 Rancangan Antarmuka Halaman Produk……….49

Gambar 3. 14 Rancangan Antarmuka Halaman Belanja Keranjang………50

Gambar 3. 15 Rancangan Antarmuka Halaman Daftar Member Baru………51

Gambar 3. 16 Ranacangan Antarmuka Halaman Registrasi Aktivasi……….52

Gambar 3. 17 Rancangan Antarmuka Halaman Login Member………..53

Gambar 3. 18 Rancangan Antarmuka Halaman Reset Password………54

Gambar 3. 19 Rancangan Antarmuka Halaman Akun Member……….55

Gambar 3. 20 Rancangan Antarmuka Halaman Testimonial………..56

Gambar 3. 21 Rancangan Antarmuka Halaman Belanja……….57

Gambar 3. 22 Rancangan Antarmuka Halaman Spesial Request………58

Gambar 3. 23 Rancangan Antarmuka Halaman Pengiriman……….59

Gambar 3. 24 Rancangan Antarmuka Halaman Detail Pesanan………60

Gambar 3. 25 Rancangan Antarmuka Halaman Pembatalan Pesanan………61

Gambar 3. 26 Rancangan Antarmuka Halaman LoginAdmin………62

Gambar 3. 27 Rancangan Antarmuka HalamanUtama Admin………..63

Gambar 3. 28 Rancangan Antarmuka Halaman Login Operator………64

Gambar 3. 29 Rancangan Antarmuka HalamanUtama Operator………65

Gambar 3. 30 Rancangan Antarmuka HalamanLaporan………66

Gambar 3. 31 Rancangan Antarmuka HalamanLaporan Penjualan………...67

xiv

Gambar 4.1 Running Apache dan MySQL………..69

Gambar 4. 2 Pembuatan Database dengan phpMyAdmin………...70

Gambar 4. 3 Halaman Login Admin……….………..71

Gambar 4. 4 Halaman Kategori Barang………..72

Gambar 4. 5 Halaman List Barang………..73

Gambar 4. 6 Halaman Data Pengurus……….74

Gambar 4. 7 Halaman Tambah Data Penguru……….75

Gambar 4. 8 Halaman Laporan Penjualan………...76

Gambar 4. 9 Halaman Laporan Stok Barang………77

Gambar 4. 10 Halaman Hasil Laporan Penjualan (Order Biasa)………78

Gambar 4. 11 Halaman Hasil Laporan Penjualan (Request)………..79

Gambar 4. 12 Halaman Data Member………80

Gambar 4. 13 Halaman Testimonial………...80

Gambar 4. 14 Halaman Utama Website……….81

Gambar 4. 15 Halaman Registrasi Member………82

Gambar 4. 16 Halaman Akun Member………...83

Gambar 4. 17 Halaman Detail Order………...84

Gambar 4. 18 Halaman Detail Spesial Order ………85

Gambar 4. 19 Halaman Daftar Pesanan List (Order Biasa)………86

vii

INTISARI

Toko Mebel Karya Satu merupakan perusahaan dagang bergerak di bidang penjualan furniture perlengkapan alat-alat rumah tangga seperti meja, kursi, lemari, dan lain-lain, dimana proses promosi dan penjualannya masih bersifat konvensional. Artinya pelanggan harus mendatangi toko Mebel Karya Satu untuk dapat melakukan pembelian produk. Pembangunan system interaktf e-commerce penjualan di toko Mebel Karya Satu merupakan langkah untuk meningkatkan penjualan dan promosi produk sehingga dapat memberikan keuntungan bagi perusahaan. Tujuan membangun sistem interaktif e-commerce penjualan furniture ini pelanggan dapat melakukan pemesanan produk tanpa harus datang ke Mebel Karya Satu, pihak perusahaan pun dapat mengatasi masalah pengolahan produk, pengolahan pemesanan sehingga memberikan kemudahan kepada konsumen untuk mendapatkan informasi tentang produk Mebel Karya Satu. Sistem dibuat menggunakan program php dan database MySQL dan pengeditannya menggunakan notepad++. Hasil dari penelitian adalah dengan diimplementasikan interaktif e-commerce pada toko Mebel Karya Satu ini dapat digunakan sebagai sarana promosi penjualan yang dapat diakses dimanapun dan kapanpun, proses pembelian dapat secara langsung tanpa harus datang ke toko, serta dapat mempermudah proses transaksi pembelian produk.

viii

ABSTRACT

ABSTRACT – Mebel Karya Satu store is a trading company which is engaged in the sale of household furniture such as tables, chairs, cabinets, and etc, where the promotion and sale process is still conventional. Which means that the customers have to go to Mebel Karya Satu store to purchase the products. The development of e-commerce interactive sale system in Mebel Karya Satu is a step to increase the product's sale and promotion so that can be profitable for the company. The purpose in developing e-commerce interactive system is the customers do not need to come to the store to order the products, the company will be able to overcome the problem in booking and manufacturing the products so it will be easier for the customers to get information about the products in Mebel Karya Satu store. System was made by using php program and MySQL database and it was edited by using notepad++. The result of research is by implemented e-commerce interactive in Mebel Karya Satu store, it can be used as a media for the sale promotion which can be accessed wherever and whenever by the customers, the purchasing process can be done directly without coming to the store and also it can make the transaction for purchasing the products easier.

1

BAB I PENDAHULUAN

1.1 Gambaran Umum Obyek Penelitian

Perusahaan di bidang furnitur mebel semakin banyak jumlahnya disetiap daerah di Indonesia. Hal ini dapat dipahami mengingat semakin meningkatnya kebutuhan akan tempat tinggal maupun renovasi rumah seiring dengan semakin bertambahnya jumlah penduduk yang tinggal di Indonesia dan meningkatnya pendapatan masyarakat.

Industri furniture telah lama diakui sebagai industri dengan hasil karya yang mempunyai kualitas dan seni dengan karya terbaik dengan memberikan peluang kerja. Perkembangan industri furniture di Indonesia sangat bersaing dimana bahan baku alami banyak tersedia, memanfaatkan bahan baku kayu yang beraneka ragam dan mempunyai ciri khas menjadi kekuatan industri furniture, dengan potensi yang ada di Indonesia perusahaan Mebel Karya Satu menyediakan kebutuhan furniture bagi masyarakat yang membutuhkan dengan memberikan hasil dan kualitas yang baik, menjaga kepuasan pelanggan dengan menjaga kualitas produksi dan memberikan pelayanan sebaik-baiknya, memiliki sumber daya manusia ahli dibidangnya.

Namun sampai sekarang perusahaan Mebel Karya Satu meningkatkan penjualan maupun pemasaran produk belum menggunakan website e-commerce, perkembangan teknologi informasi yang paling dirasakan saat ini adalah website yang merupakan sekumpulan tampilan halaman yang memberikan banyak

2 informasi yang memiliki topik pembahasan yang disertai dengan gambar, video, musik, dan lain-lain. Perancangan website tidak bisa lepas dari tujuan untuk apa situs website tersebut dirancang, dalam pola pemasaran hasil produk perusahaan belum memanfaatkan sistem information & communication technology (ICT) melalui media internet sehingga akses penjualan hanya untuk wilayah Kota Pontianak, belum mencakup wilayah Kalimantan Barat bahkan keluar Kalimantan Barat.

Dengan tema website bisnis yang akan ditampilkan semoga dapat menjadi jalan keluar untuk mencapai target pasar secara online, diharapkan juga memenuhi keinginan dan kebutuhan target pasar perusahaan.

1.2 Latar Belakang Masalah

Kemudahan dan keamanan serta kenyamanan dalam berbelanja adalah salah satu kekuatan dalam e-commerce (electronic commerce) untuk masyarakat yang tentu saja ingin menghemat waktu dan tenaga serta dapat mempermudah dalam membandingkan harga, karena masyarakat pada umumnya tidak ingin mencari atau mempersulit diri dalam berbelanja. Kenapa website e-commerce pada saat ini banyak menarik masyarakat untuk menghabiskan waktu yang sangat lama untuk memilih produk yang ditawarkan dari website e-commerce, ini dikarenakan website e-commerce memberikan pelayanan serta info yang lengkap dan sangat penting yang dapat memberikan gambaran pada masyarakat untuk membeli produk atau barang yang ditawarkan.

Bisnis mebel menjadi bisnis yang menjanjikan terutama di Indonesia. Indonesia merupakan negara berkembang, usaha mebel atau funiture sendiri

3 memberikan dampak positif dalam perkembangan pembangunan dengan menghasikan karya-karya terbaik seiring perkembangan jaman pada saat ini.

Perkembangan sistem information & communication technology (ICT) semakin pesat pada era modern, memungkinkan suatu perusahaan untuk mengembangkan atau memanfaatkan suatu teknologi berbasis sistem informasi website e-commerce, yang berkembang dalam aspek-aspek perkembangan website. Perkembangan tersebut dapat menunjang proses bisnis mebel atau furniture terutama dalam hal pemasaran produk yang dihasilkan kepada masyarakat, agar kemudahan serta keamanan dan kenyamanan pengalaman berbelanja di dunia maya. E-commerce menjadi salah satu cara transaksi online saat ini yang memberi banyak keuntungan dan sangat diminati seiring perkembangan internet yang semakin pesat dimasa ini.

E-commerce (electronic commerce) atau perdagangan secara elektronik yang telah mengubah bisnis menjadi online tidak hanya memperluas pilihan produk dan jasa bagi konsumen, tetapi juga membentuk peluang bisnis baru dan memperkuat bisnis yang telah ada untuk mengembangkan strategi dengan internet William, dkk. (2008 : 97).

Fenomena bisnis yang diharapkan dari website e-commerce perusahaan Mebel Karya Satu adalah menampilkan suatu tampilan yang memberikan kenyamanan dan kepercayaan pada konsumen atau masyarakat sebagai target pasar. Dalam bidang sistem teknologi digital diharapkan mampu memberikan dampak positif dalam pelayanan terbaik pada era modern. Media website

e-4 commerce digunakan dengan tujuan memberikan kemudahan konsumen dalam memesan atau mencari info terbaru dari perusahaan.

Berdasarkan uraian tersebut dapat dikemukakan bahwa peluang bisnis yang ditawarkan melalui website e-commerce dapat membantu masyarakat dengan menampilkan inovasi serta fitur-fitur menarik yang dapat menjadikan peluang yang lebih baik dalam proses bisnis di perusahaan. Namun permasalahan yang dihadapi sekarang, perusahaan Mebel Karya Satu masih belum memanfaatkan keuntungaan dengan peluang pemasaran melalui website e-commerce. Penyebab antara lain masih kurang terbukanya pemikiran pemilik mebel Karya Satu untuk pemasaran usahanya lewat internet, disebabkan kurangnya pengetahuan tentang IT internet, masih adanya anggapan bahwa untuk menjual mebel cukup hanya dengan memberitakannya secara multi level marketing (MLM) atau dari mulut ke mulut berita akan kehadiran Mebel Karya Satu yang selama ini digunakan oleh pihak perusahaan atau pun cukup hanya dengan memasang baliho, brosur, kartu nama, dan stempel dimana kegiatan mebel dilangsungkan. Oleh sebab itu, perlu adanya pola baru dalam pemasaran perusahaan Mebel Karya Satu melaui website e-commerce yang menarik serta mampu meningkatkan pemasaran dari hasil mebel yang diproduksi.

1.3 Permasalahan

Perkembangan sistem information & communication technology (ICT) semakin pesat pada era modern, memungkinkan suatu perusahaan untuk mengembangkan atau memanfaatkan suatu teknologi berbasis sistem informasi website e-commerce yang berkembang dengan pesat. Terutama dalam aspek-aspek

5 yang berhubungan dengan desain website e-commerce. Berdasarkan fenomena yang muncul perusahaan Mebel Karya Satu ingin menampilkan produk melalui fitur-fitur yang inovatif dan menarik berbasis website e-commerce sehingga masyarakat menjadi tertarik pada perusahaan.

1. Bagaimana Merancang website e-commerce untuk perusahan mebel, sebagai media produk perusahaan?

2. Bagaimana Merancang website e-commerce sebagai media promosi?

1.4 Ruang lingkup

Ruang lingkup penulisan memfokuskan pada pembuatan website e-commerce sesuai teori-teori interaktif dan desain. Adapun batasan atau ruang lingkup yang dibahas dalam tulisan adalah :

1. Penulisan tugas akhir menitik beratkan pada perancangan website interaktif e-commerce perusahan mebel dengan aplikasi dan interaksi yang inovatif untuk masyarakat.

2. Segment yang dituju adalah masyarakat dan investor perumahan.

3. Fokus audiens adalah untuk masyarakat di Indonesia dan tidak menutup kemungkinan ke mancanegara.

1.4.1 Segmentasi

1. Geografis

Secara geografis, penelitian ini dilakukan hanya pada perusahaan Mebel Karya Satu yang berada di wilayah Kota Pontianak dan dalam hal geografis proyek targetnya adalah masyarakat Indonesia namun tidak menutup kemungkinan untuk masyarakat yang berada di luar negeri.

6

2. Demografis

Target audience dari segi demografis adalah produknya dipasarkan untuk memenuhi kebutuhan para pengemban perumahan dan masyarakat baik yang membangun rumah atau renovasi rumah di daerah Kota Pontianak (Kalimantan Barat) maupun di Indonesia dan mancanegara.

3. Psikografis

Dari segi psikografis adalah kebutuhan akan mebel dengan berbagai seni dan ukiran menjadi penting bagi masyarakat terutama masyarakat kota (modern). Oleh sebab itu, perusahaan Mebel Karya Satu berupaya memenuhi harapan masyarakat dengan menyiapkan berbagai jenis model furniture yang dibutuhkan oleh para pengembang maupun masyarakat yang ingin membangun rumah serta renovasi, Mebel Karya Satu menyediakan furniture yang diinginkan melalui berbelanja di internet.

1.5 Tujuan Perancangan

Tujuan dalam pembuatan Tugas Akhir, penulis berusaha membantu perusahaan Mebel Karya Satu untuk membangun website e-commerce dengan tujuan agar masyarakat mendapatkan informasi tentang perusahaan melalui website e-commerce dengan beberapa pertimbangan antara lain:

1. Merancang website e-commerce untuk perusahan mebel, sebagai media produk perusahaan.

7

1.6 Sistematika Penulisan

Bab I Pendahuluan

Berisi tentang penguraian latar belakang masalah, rumusan masalah, maksud dan tujuan penulisan, batasan masalah serta sistematika dari penulisan Laporan Tugas Akhir.

Bab II Tinjauan Pustaka dan Landasan Teori

Menjelaskan mengenai uraian berbagai macam landasan teori yang sesuai dengan permasalahan yang sedang dibahas.

Bab III Data Metode Penelitian

Menguraikan analisa terhadap sistem yang akan dibangun meliputi spesifikasi kebutuhan, sistem pengolahan aplikasi dan data, serta spesifikasi aplikasi yang dibuat dalam tugas akhir.

Bab IV Pembahasan

Menjelaskan tentang hasil perancangan serta fitur-fitur didalam website.

Bab V Penutup

8

BAB II

TINJAUAN PUSTAKA DAN LANDASAN TEORI

2.1 Tinjauan Pustaka

Elvira Yolanda (2013) dengan judul “Perancangan Aplikasi E-Commerce Berbasis Web Pada Pempek Rendy” melakukan penelitian dengan tujuan lebih mengenalkan tentang keberadaan Pempek Rendy kepada masyarakat luas melalui website dan ingin membangun system yang lebih baik dari system sebelumnya. Dalam mengembangkan system menggunakan HTML, PHP, CSS, MySQL dan XAMPP.

Evans Fuad (2010 )dengan judul “Perancangan E-Commerce Pada Toko Online Mainan Bocah Yogyakarta” melakukan penelitian dengan tujuan mendukung kinerja toko online mainan anak lebih cepat dan lebih efektif. Dalam mengembangkan system menggunakan operasi windows, Adobe Dreamweaver CS3, phpMyAdmin.

Syarifuddin Baco (2012) dengan judul “Perancangan E-Commerce Pada Toko Buku Mawar Makassar” melakukan penelitian dengan tujuan Untuk mempermudah sistem informasi penjualan buku berbasis web pada CV. Mawar, memberikan kemudahan pada konsumen dalam melakukan transaksi pembelian buku berbasis web pada CV. Mawar. Dalam mengembangkan system menggunakan PHP, MySQL, dan WampServer.

Dalam penelitian saya yang berjudul Perancangan Website Interaktif E-Commerce Untuk Perusahaan Mebel Karya Satu. Agar masyarakat mendapatkan

9 informasi tentang perusahaan melalui website e-commerce dengan beberapa pertimbangan. Sistem di bangun menggunakan PHP, CSS yang dapat meringkas pekerjaan membuat sebuah template, MySQL digunakan untuk pengolahan database yang memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal. Keunggulan website Mebel Karya Satu memiliki request design untuk pemesanan produk dan metode analisis yang digunakan adalah analisis Waterfall.

2.2 Landasan Teori

2.2.1 Teori Website

Untuk membangun sebuah website interaktif dibutuhkan pemahaman teknik bahasa pemrograman yang dikenal dengan sebutan web scripting. Sebagai mana dikemukakan Saropi (2008 : 2).

Pengertian dari website adalah sekumpulan halaman-halaman situs yang terangkum dalam suatu domain yang berlokasi di dalam WWW (World Wide Web) di internet World Wide Web (W3) atau yang dikenal juga dengan istilah web adalah suatu sistem yang berkaitan dengan dokumen digunakan sebagai media untuk menampilkan teks, gambar, multimedia dan lainnya pada jaringan internet. (Sibero 2011 : 11). Lebih lanjut dikemukakan Suherman, dkk. (2008:5), bahwa sistem informasi merupakan serangkaian komponen berupa manusia, produser, data, dan teknologi (seperti komputer) yang digunakan untuk melakukan sebuah proses untuk menghasilkan informasi yang bernilai untuk mengambil keputusan.

10 Menurut Sibero (2011:10), bahwa dalam suatu website mempunyai sistem-sistem pembentukan yang sangat membantu karena berkaitan langsung dengan website yaitu :

1. HTML

HTML (Hyper Text Markup Language) adalah bahasa yang digunakan pada dokumen web sebagai bahasa pertukaran untuk dokumen web (Sibero,2011:19).

2. PHP

PHP adalah pemprograman interpreter yaitu proses penerjemahan baris kode sumber menjadi kode mesin yang dimengerti komputer secara lansung pada saat baris kode dijalankan (Sibero,2011 : 51).

3. MySQL

MySQL atau dibaca “My Sekuel” adalah suatu RDBMS (Relational Data base Manageman system) yaitu aplikasi system yang menjalankan fungsi pengolahan data (Sibero,2011 : 97).

4. CSS

CSS (Cascading Style Sheet) dikembangkan untuk menata gaya pengaturan halaman web (Sibero,2011 : 112).

2.2.2 Website E-commerce

Internet merupakan salah satu sarana yang sangat potensial bagi perusahaan dengan memiliki suatu situs untuk memasarkan produk, dengan keamanan dan kenyamanan pengalaman berbelanja. Website e-commerce menurut William, dkk. (2008 : 97), menjadi salah satu cara transaksi online saat ini atau

11 bisnis online atau perdagangan secara elektronik telah mengubah bisnis menjadi online tidak hanya memperluas pilihan produk dan jasa bagi konsumen, tetapi juga membentuk peluang bisnis baru dan memperkuat bisnis yang telah ada untuk mengembangkan strategi dengan internet.

Berdasarkan uraian tersebut dapat dijelaskan bahwa dengan adanya website e-commerce memberikan peluang yang sangat besar dalam dunia bisnis dimana internet dapat membantu dalam mempromosikan dan memperluas suatu bisnis dan informasi suatu perusahaan kepada masyarakat secara luas.

2.2.3 Teori Desain

Dalam proses desain dan pengembangan sebuah sistem interaktif, penting untuk dimengerti tidak hanya bagaimana cara mengembangkan sebuah sistem sebagai solusi, melainkan bagaimana cara mengembangkan sistem yang benar-benar berguna dan sesuai kebutuhan manusia. Agar sesuai dengan kebutuhan manusia, maka faktor manusia dan interaksi antara manusia dan komputer juga perlu dipertimbangkan dalam proses desain. Human Computer Interaction adalah disiplin ilmu yang mempelajari proses desain, implementasi, dan evaluasi sistem komputer interaktif yang akan digunakan manusia beserta fenomena di sekitarnya (Reza Giga Isnanda : 2016).

Menurut Suyanto (2004:109), untuk menjadikan website yang menarik agar banyak dikunjungi, ada beberapa komponen yang harus diperhatikan seperti:

a. Garis

Garis adalah tanda yang dibuat oleh alat yang digambarkan melewati permukaan. Alat yang dipakai untuk menggambarkan tersebut antara lain

12 pensil, ballpoint pointed brush, keyboard, dan mouse. Garis dapat juga merupakan potongan dipermukaan kertas yang biasanya disebut grafir. Garis juga didefinisikan sebagai titik-titik yang begerak dan garis juga disebut sebagai jalur terbuka.

b. Bentuk

Bentuk merupakan gambaran umum dari sesuatu atau formasi yang tertutup atau jalur yang tertutup banyak cara untuk melukiskan pada permukaan dua dimensi. Salah satu cara untuk melukiskan bentuk adalah dengan garis. Garis dapat digunakan untuk menggambarkan bentuk yang datar, misalnya pyramid atau kubus. Bentuk dapat diisi dengan warna, nada, atau tekstur. Bagaimana bentuk tersebut digambarkan akan menampilkan kualitas.

c. Warna

Warna merupakan eleman grafik yang sangat kuat. Provokatif empat warna, bukannya hitam putih, akan meningkatkan efektivitas dan biaya. Dengan demikian multimedia dirancang sesuai dengan warna yang disukai pasar akan memberikan keunggulan bersaing dalam periklanan.

d. Kontras Nilai

Nilai digunakan untuk menggambarkan tentang kecerahan dan kegelapan elemen visual. Hubungan antara satu elemen dengan eleman lain yang berkaitan dengan kecerahan dan kegelapan disebut kontras nilai. Kontras nilai untuk memberikan citra dan persepsi secara rinci.

13

e. Merancang Tekstur

Tekstur merupakan kualitas pada permukaan atau kualitas pada layar multimedia. Di dalam seni, tekstur dikategorikan menjadi dua, yaitu tekstur tactile dan tekstur visual. Tekstur tactile adalah nyata, dapat dirasakan permukaannya dengan jari kita. Sedangkan tekstur visual adalah ilustrasi, tekstur tersebut memberikan impresi yang sederhana dari tekstur yang nyata.

f. Tipografi

Tipografi secara umum bentuk huruf yang didesain dengan tampilan yang berbeda. Tipografi menurut buku yang ditulis oleh Kusrianto (2007:202), didalam desain grafis tipografi didefinisikan sebagai suatu proses seni untuk menyusun bahan publikasi menggunakan huruf cetak hingga merangkainya dalam sebuah komposisi yang tepat untuk memperoleh suatu efek yang dikehendaki.

g. Merancang Format

Elemen-elemen grafik seperti garis, bentuk, warna, tekstur, kontras nilai, format, video, dan audio dari multimedia membuat perbedaan terhadap dampak multimedia maupun biayanya. Sedikit penataan ulang atas elemen-elemen mekanis dalam multimedia dapat meningkatkan kemampuannya untuk menarik perhatian. ”Format terdiri dari ukuran dan ilustrasi. Iklan- iklan berukuran besar lebih menarik perhatian dari pada iklan berukuran kecil, walau tidak sebesar perbedaan biaya. Ilustrasi terdiri

14 dari ilustrasi gambar bermakna, ilustrasi relasi tanda, ilustrasi simbol, dan ilustrasi logo.

2.2.4 Elemen-Elemen

Berdasarkan uraian yang telah dijelaskan dalam suatu komponen serta elemen-elemen yang mendukung serta warna titik kontras tektur dan lain-lain, terdapat beberapa hal yang juga harus diperhatikan dalam merancang sebuah website yang baik. Begitu banyak yang harus diperhatikan dalam suatu susunan komponen atau unsure desain yang digunakan dalam perancangan komposisi sebagaimana dikemukakan Kusrianto,dkk (2007:41) berupa suatu susunan beberapa benda atau bentuk dimana harus ditata secara serasi atau seimbang sehingga tercapai antara unsur-unsur desain komposisi dengan menyatukan faktor yang sejenis contoh lain :

a. Faktor formal (bentuk)

b. Ukuran

c. Posisi

d. Warna

e. Faktor ide

f. Gambar

g. Hubungan

h. Symbolism (lambang)

2.2.5 Elemen-Elemen Program Multimedia

Menurut Kusrianto (2007:412), penataan dapat dilaksanakan dengan mengadakan pengulangan maupun pergantian secara teratur. Dalam membuat

15 perancangan website terdapat 6 (enam) elemen yang secara umum dipergunakan dalam program multimedia untuk memperkuat aplikasi atau website yaitu: 1. Teks Aplikasi sebagai tampilan layar yang mempertunjukkan kata-kata

yang mungkin dibuat dengan berbagai style dan bentuk font, pengaturan warna serta pembubuhan beberapa penekanan agar memperoleh perhatian lebih dari yang lain.

2. Image Secara umum disebut gambar (gambar vektor maupun bitmap). Melihat gambar disuatu objek memliki dampak yang lebih baik bila dibandingkan dengan membaca teks saja.

3. Movie Dapat menyertakan presentasi yang mampu memberikan gambaran yang lebih jelas dan riil dengan menghadirkan rekaman gambar hidup dari video.

4. Animasi Dengan bantuan animasi (gambar yang bergerak-gerak), dapat

menjelaskan sesuatu secara lebih akurat jika dibandingkan informasi movie yang berjalan dan berlalu. Bantuan animasi memungkinkan dipahaminya dan di ulang-ulangnya sebuah gambar dengan lebih jelas.

5. Sound Suara yang disertai dari sebuah presentasi digunakan pada bagian yang strategis dari program untuk turut memberikan penekanan perhatian dalam suatu hal. Contohnya, suara aplause (tepuk tangan), suara ombak laut, suara yang mengejutkan, suara musik,dan lain sebagainya.

6. User control adalah kelengkapan suatu fasilitas yang dipergunakan oleh user mengendalikan program. Misalnya, untuk berpindah kehalaman berikutnya menggulung tampilan layar, membuka menu pilihan, dan lain

16 sebagainya. Ada beberapa tingkat dari user control saat mengakses suatu aplikasi. Misalnya, ada yang cukup disediakan untuk berpindah antar halaman, ada yang dapat membuka link menggunakan halaman lain yang berisi suatu topik yang berhubungan, juga ada pilihan yang memungkinkan user untuk memilih bagian-bagian dari isi presentasi untuk di copy dan sebagainya.

Dalam suatu teori dikemukakan bahwa desain sangat berpengaruh pada interface website, banyak hal yang dapat memperkuat website agar menarik dan banyak dikunjungi melaui futur-fitur, warna, teks, positioning, gelap terang animasi yang sangat bepengaruh untuk memberikan kenyamanan kepada konsumen agar tetap mengunjungi website yang telah ditampilkan.

2.2.6 Layout

Layout adalah keterampilan dasar desainer harus menguasai dalam rangka menciptakan kerja yang efektif "(Ryan Hembree: 63). Sebuah layout dapat bekerja dan mencapai tujuannya bila pesan-pesan yang akan disampaikan dapat segera ditangkap dan dipahami oleh pengguna dengan suatu cara tertentu.

2.2.7 Navigation

Clear navigation aids kebanyakan user berinteraksi dengan website melakukan navigasi hypertext link yang menghubungkan ke dokumen yang dicari. Navigasi yang jelas, icon yang konsisten, skema identitas, dan graphic atau teks yang membuat user percaya diri bahwa mereka bisa menemukan yang mereka cari tanpa menghabiskan banyak waktu.

17 User harus bisa kembali pada homepage dengan mudah. Link tersebut harus ditampilkan disetiap halaman situs. Membuat identitas grafis mengatakan pada user bahwa ia masih berada dalam situs tersebut. (P.J. Lynch, dkk). Didalam website, navigation adalah bagian dari situs website yang berguna dalam membantu user. Navigasi pada sebuah website berguna untuk memandu user dalam menjelajahi website yang dikunjungi.

2.2.8 Teori Perilaku Konsumen (Consumer Behavior)

Penggunaan website sebagai sarana pemasaran terus meningkat sehingga menghasilkan penggunaan yang lebih meluas pada media pembelian online. Menurut Prasetijo (2008:88). Perilaku konsumen dimaknai sebagai proses yang dilalui oleh seseorang dalam mencari, membeli, menggunakan, mengevaluasi dan bertindak pasca konsumsi produk, jasa maupun ide, yang diharapkan bisa memenuhi kebutuhannya.

Lebih lanjut dikemukakan bahwa pembelajaran terjadi sebagai respons seseorang terhadap kejadian-kejadian di luar diri (eksternal). Pemikiran manusia digambarkan sebagai kotak hitam yang menerima stimulus dan mengeluarkan respon (Prasetijo, 2008 :88).

Pengalaman konsumen dalam penggunaan website untuk memperoleh informasi dan untuk melakukan pembelian, yang terkait dengan barang dan lainnya merupakan kontrol persepsi konsumen selama proses menggunakan website. Sebagaimana dikemukakan Mowen, dkk (2008 : 97), bahwa perspektif pengaruh prilaku (Behavior Influence Perspektif) mengasumsikan bahwa kekuatan lingkungan memaksa konsumen untuk melakukan pembelian tanpa

18 harus terlebih dahulu membangun perasaan atau kepercayaan terhadap produk. Berdasarkan uraian di atas dapat dikemukakan dalam teori perilaku konsumen memberikan penjelasan perilaku konsumen adalah sebagai proses pembelajaran respon kejadian-kejadian diluar diri dan pengaruh lingkungan sebagai gambaran utama dalam perilaku konsumen.

2.2.9 Waterfall

Waterfall model merupakan salah satu model proses perangkat lunak yang mengambil kegiatan proses dasar seperti spesifikasi, pengembangan, validasi, evolusi, dan merepresentasikannya sebagai fase-fase proses yang berbeda seperti analisis dan definisi persyaratan, perancangan perangkat lunak, implementasi, pengujian unit, integrasi sistem , pengujian sistem, operasi dan pemeliharaan (Sommerville, 2003).

2.2.10 UML (Unified Modeling Language)

Unified modeling language adalah bahasa yang digunakan untuk memodelkan sebuah sistem sehingga dapat mengambil keputusan dan memahami tentang sistem yang harus dibangun (Hermawan, 2004).

Menurut Whitten dan Bentley (2007), UML menawarkan sembilan diagram yang dikelompokkan ke dalam lima perspektif yang berbeda untuk memodelkan sebuah sistem. Lima perspektif tersebut adalah :

19 1. Use-Case Diagrams

Use-case diagram (Diagram suatu kumpulan urutan interaksi diantara user dengan sistem untuk mencapai suatu tujuan dimana use case menggambarkan kebutuhan fungsional suatu sistem tanpa menampilkan struktur internal system).

2. Static Structure Diagrams

Class diagram (Diagram yang menggambarkan struktur objek dalam sistem) dan object diagram ( Diagram yang menggambarkan objek instance yang aktual ).

3. Interaction Diagrams

Interaction diagram menggambarkan sebuah interaksi yang terdiri dari sekumpulan objek, hubungan, dan pesan yang dikirimkan diantara objek tersebut. Diagram yang ada dalam kelompok adalah sequence diagram (Diagram yang menggambarkan interaksi antar objek dimana fokus pada timing dari pesan) dan communication diagram (Diagram yang menggambarkan interaksi antara objek dengan network format ).

4. State Diagrams

Statechart diagram (Diagram yang mengilustrasikan daur hidup objek) dan activity diagram (Diagram yang menggambarkan aliran dari sebuah use case).

5. Implementation Diagrams

Component diagram (Diagram yang menggambarkan bagaimana code program dipecah menjadi komponen-komponen dan ketergantungan

20 diantara komponen tersebut) dan deployment diagram (Diagram yang menggambarkan arsitektur secara fisik dari hardware dan software dalam sistem ).

2.2.11 Entity Relationship Diagram

Menurut Jeffrey L. Whitten (2006 : 45) ERD (Entity Relation Diagram) digunakan untuk menggambarkan hubungan antara data Store yang ada didalam diagram aliran data. Komponen-komponen yang digunakan diagram hubungan data antara lain :

a. Entity

Entity merupakan objek yang mewakili sesuatu yang nyata dan dapat dibedakan dari sesuatu yang lain. Simbol dari entity biasanya digambarkan dengan persegi panjang.

Gambar 2. 1 Entity Persegi Panjang

b. Atribut

Setiap entitas pasti mempunyai elemen yang disebut atribut yang berfungsi untuk mendeskripsikan karakteristik dari entitas tersebut. Isi dari atribut mempunyai sesuatu yang dapat mengidentifikasikan isi satu dengan yang lain. Gambar atribut diwakili oleh simbol elips.

21

Gambar 2. 2 Atribut Elips

c. Relasi

Relasi digambarkan dengan kotak berbentuk belah ketupat dengan garis yang menghubungkan ke entitas yang terkait. Hubungan atau relasi menunjukkan abstraksi dari sekumpulan hubungan yang mengakibatkan antara entitas yang berbeda.

22

BAB III

DATA METODE PENELITIAN

3.1 Alat

Alat yang digunakan untuk membuat website berupa perangkat keras dan perangkat lunak.

a. Perangkat Keras

1. Laptop

2. Mouse

b. Perangkat Lunak

1. Sistem operasi windows 8.1 2. Web server : XAMPP.

3. Bahasa pemrograman PHP, Javascript, HTML, CSS. 4. Database : PhpMyAdmin v3.2.1

5. Web Editor : Macromedia Dreamweaver. 6. Browser : Mozilla Firefox dan Google Chrome.

23

3.2 Bahan

Bahan yang akan digunakan dalam pembuatan aplikasi adalah:

3.2.1 Data Khalayak Sasaran

Segmentasi target audience yang akan dituju pada proyek tugas akhir adalah sebagai berikut :

1. Geografis

Secara geografis, penelitian dilakukan hanya pada perusahaan Karya Satu yang berada di wilayah Kota Pontianak dan dalam hal geografis proyek targetnya adalah masyarakat Indonesia namun tidak menutup kemungkinan untuk masyarakat yang berada di luar negeri.

2. Demografis

Target audience dari segi demografis adalah produknya dipasarkan untuk memenuhi kebutuhan para pengemban perumahan dan masyarakat baik yang membangun rumah atau renovasi rumah di daerah Kota Pontianak (Kalimantan Barat) maupun di Indonesia dan mancanegara.

3. Psikografis

Dari segi psikografis adalah kebutuhan akan mebel dengan berbagai seni dan ukiran menjadi penting bagi masyarakat terutama masyarakat kota (modern). Oleh sebab itu, perusahaan Mebel Karya Satu berupaya memenuhi harapan masyarakat dengan menyiapkan berbagai jenis model furniture yang dibutuhkan oleh para pengembang maupun masyarakat yang ingin membangun rumah serta renovasi, Mebel Karya Satu menyediakan furniture yang diinginkan melalui berbelanja di internet.

24

4. Manfaat

Dari segi manfaat, targetnya adalah mereka yang mencari produk yang menyediakan manfaat khusus untuk memuaskan kebutuhan masyarakat yang membutuhkannya, karena perusahaan menawarkan berbagai macam furniture yang dibutuhkan untuk mempercantik rumah mereka.

3.2.2 Hasil Wawancara

Fakta dan fenomena yang terjadi di perusahaan, sebagaimana hasil wawancara dengan informan terungkap dalam mempromosikan usaha masih besifat konvensional seperti menyebarkan kartu nama perusahaan, spanduk (baliho), dan stempel dan belum menggunakan media internet. Di era modern sekarang media pemasaran yang cukup menjanjikan adalah menggunakan internet. Dapat dimaklumi mengingat pengguna internet semakin banyak, oleh sebab itu perlunya penggunaan media internet oleh pihak perusahaan untuk pemasaran produk sehingga dapat menampilkan produk secara luas dan ingin menampilkan pencitraan pada perusahaan maupun produk terbaru.

25

Gambar 3. 1 Foto Brosur Mebel Karya Satu

Adanya peluang bisnis yang dihasilkan dari internet, maka pihak perusahaan mebel Karya Satu ingin menampilkan produk serta pencitraan melalui website e-commerce, perusahaan ingin menampilkan suatu tampilan yang memberikan kenyamanan terpercaya pada konsumen atau masyarakat sebagai target pasar dalam bidang sistem teknologi digital yang berdampak positif dalam memberikan pelayanan yang terbaik. Melalui website e-commerce dengan tujuan memberikan kemudahan konsumen dalam memesan atau mencari info terbaru dari perusahaan. Maka dari itu, peluang bisnis yang ditawarkan melalui website e-commerce dapat membantu masyarakat dengan menampilkan inovasi serta fitur-fitur menarik yang dapat menjadikan peluang yang lebih baik dalam bisnis di perusahaan.

26

Gambar 3. 2 Foto Kartu Nama Mebel Karya Satu

Hasil yang diperoleh pada saat wawancara kepada pihak perusahaan Mebel Karya Satu melalui Bapak Achmad Yani, S.E. (sebagai penanggung jawab), beliau memberikan jawaban bahwa perusahaan mempunyai target pasar masyarakat dan investor yang ingin merenovasi rumah, sedangkan untuk insvestor yang ingin membangun perumahan dan sebagainya. Promosi yang dilakukan oleh perusahaan hanya melalui media brosur, kartu nama, dan stempel.

3.3 Alur Penelitian

Perancangan Mebel Karya Satu menggunakan metode Waterfall. Waterfall Model atau Classic Life Cycle merupakan model yang paling banyak dipakai dalam Software Engineering (SE). Disebut waterfall karena tahap demi tahap yang dilalui harus menunggu selesainya tahap sebelumnya dan berjalan berurutan.Metode Waterfall bisa dilihat pada Gambar 3.3.

27 Planning

Analysis

Testing Design

Coding

Implementasi

28

3.4 Arsitektur

Pada tahap ini dilakukan penentuan perancangan sistem yang akan digunakan. Berikut merupakan perancangan sistem yang diusul:

Internet

Server Database

Admin

Operator

Member

Gambar 3. 4 Arsitektur Sistem yang Diusul

Database server yang digunakan pada aplikasi MySql dan menggunakan Xampp sebagai web server. Komunikasi antara pengguna dan web server menggunakan internet dan web browser pada perangkat pengguna. Saat pengguna mengakses aplikasi, web server memuat antarmuka dan melakukan pengambilan data yang diperlukan dari database server. Melalui antarmuka yang dimuat web server pengguna bisa menyimpan data ke database server. Berikut adalah keterangan arsitektur yang dibuat:

29

Tabel 3. 1 Keterangan Komponen Arsitektur

Admin

Operator

Member

Berisi data-data sebagai berikut:

1. Kategori Barang 2. List Barang 3. Request Design 4. Data Pengurus

5. Laporan

6. Data Member

7. Testimonial

8. Laporan Penjualan 9. Laporan Stok Barang

Internet

Jaringan komputer yang saling terhubung.

Suatu sistem komputer yang menyediakan jenis layanan tertentu untuk client dalam suatu jaringan komputer.

30

3.5 Analisis Kebutuhan

Analisis kebutuhan didapat dari studi literatur dan diskusi bersama pemilik Mebel Karya Satu. Berikut merupakan analisis kebutuhan pada aplikasi:

1. Kategori Barang. 2. List Barang. 3. Request Design 4. Data Pengurus.

5. Laporan.

6. Data Member.

7. Laporan Penjualan. 8. Laporan Stok Barang. 9. Testimonial

3.6 Rancangan

3.6.1 Use Case Diagram

Berdasarkan analisys kebutuhan dibuatlah use case diagram untuk membantu perancangan website Mebel Karya Satu. Berikut adalah use case yang dibuat pada use case diagram:

31

Admin

Login

Produk Kategori dan

List

Data Member Data Pengurus

Testimonial Laporan penjualan

Tambah Data Pengurus <<include>>

32

Operator

Login

Testimonial

Daftar Pesanan

Request Design Produk

Konfirmasi Pembayaran

Upload Bukti Pembayaran

Upload Design Pesanan

<<include>> <<include>>

<<include>>

33 Member Login Produk Kategori dan List Data Member Testimonial Daftar Pesanan Request Design Produk Konfirmasi Pembayaran Upload Bukti Pembayaran Upload Design Pesanan <<include>> <<include>> <<include>>

Gambar 3. 7 Use Case Diagram Aktor Member

Produk Kategori dan

List

Non Member

<<extend>>

34 Berikut penjelasan tentang Gambar UseCase:

1. Terdapat 4 aktor pada use case diagram aplikasi yakni admin, operator, member, dan non member.

2. Admin berhubungan langsung pada data barang seperti list barang, kategori barang, data pengurus, laporan penjualan data member dan testimonial sehingga dapat melakukan pengelolahaan data.

3. Member dapat melakukan pemesanan melalui order dan special order, maka member melakukan pembayaran transfer dan melakukan upload bukti transfer.

4. Operator melakukan pengecekan bukti transfer berdasarkan barang yang dibeli jika bukti transfer sudah tertera, operator akan segera mengkonfirmasi pesanan.

5. Non Member hanya bisa melihat website Mebel Karya Satu dan melihat lihat kategori produk.

3.6.2 Activity Diagram

Berdasarkan analisys kebutuhan admin dapat melakukan penambahan hak akses data pengurus, lalu memeriksa stok-stok barang apakah masih ada atau tidak, jika stok barang habis maka admin dapat melakukan update stok barang, jika stok barang masih ada maka tidak ada perubahan. Member dapat melakukan pemesanan barang melalui order dan special order, dalam pembayaran dilakukan secara online.

Selanjutnya bukti transfer dilakukan dengan cara upload bukti pembayaran, jika telah melakukan upload bukti member akan menunggu konfirmasi pemesanan

35 dari operator, dan operator melakukan pengecekan detail pesanan member, apabila sudah lengkap dengan ketentuan pembayaran maka operator melakukan konfirmasi pemesanan dan pesanan member terkonfirmasi. Berikut adalah gambar activity diagram 3.9:

Admin Operator Member Non Member

P ha se Memanajemen Produk Memanajemen Operator Memanajemen Member Melihat Testimonial Member Melihat Laporan Penjualan Memanajemen Pemesanan Produk Melihat Testimonial Member Order Produk Request Pemesana Design Produk Melihat Produk Yang Ada Pada

Website Terkonfirmasi Konfirmasi Pemesanan Produk Konfirmasi Penjualan Tambah Produk Tambah Produk (Kategori&List) Melakukan Pembayaran(Online) Upload Bukti Transfer

36

3.6.3 Class Diagram

Berdasarkan analisys kebutuhan dibuatlah class diagram untuk membantu perancangan website Mebel Karya Satu. Berikut adalah class diagram:

Member -IDmember:int -Namalengkap:varchar Produk -Kategori:varchar -Harga:double -Gambar:varchar -Stok:int -Berat:varchar -Deskripsi:varchar -InvoiceID:varchar +getHarga():double +setHarga():void +getGambar():varchar +setGambar():void +getStok():int +setStok():void +getBerat():varchar +setBerat()void +getDescripsi():varchar +setDescripsi():void +getInvoiceID():varchar +setInvoiceID():void Transaksi -InvoiceID:varchar -IDmember:varchar -Tanggal:datetime -Status:varchar -Total:varchar +getInvoiceID():varchar +setInvoiceID():void +getIDmember():varchar +setIDmember():void +getTanggal():datetime +setTanggal():void +getStatus():varchar +setStatus():void +getTotal():varchar +setTotal():void Testimonial -IDtestimonial:int -Nama:varchar Pemberitahuan -IDmember:int -InvoiceID:varchar -Pemesanan:Text -Tanggal:datetime -Status:varchar +getStatus():varchar +setStatus():void Bukti Pembayaran -Buktitransfer:varchar -InvoiceID:varchar -IDbuktitransaksi:varchar +getInvoiceID():varchar +setInvoiceID():void Alamat Pengiriman -Alamat:varchar -Kota:varchar Login -UserName: varchar -Password:varchar Request Produk -IdMember:varchar -Gambar:varchar -Nohandphone:varchar -Namapengguna:varchar -Alamatemail:varchar -Katasandi:varchar +getIdmember():int +setIdmember():void +getNama():varchar +setNama():void +getNohandphone():varchar +setNohandphone():void +getPengguna():varchar +setPengguna():void +getAlamatemail():varchar +setAlamatemail():void +getKatasandi():varchar +setKatasandi():void -Email:varchar -Testimonial:varchar -Tanggal:datetime +getIDtestimonial():int +setIDtestimonial():void +getNama():varchar +setNama():void +getEmail():varchar +setEmail():void +getTestimonial():varchar +setTestimonial():void +getTanggal():datetime +setTanggal:void +Validasi():void -Penjelasan:varchar -Harga:varchar +getAlamat():varchar +setALamat():void +getGambar():varchar +setGambar():void

37 Berikut penjelasan tentang Gambar 3.10:

1. Terdapat kelas pada diagram digunakan untuk inisialisasi ke dalam tabel model dan basis data aplikasi.

2. Pada kelas login memiliki asosiasi dengan kelas member. Artinya setiap member terlebih dahulu harus melakukan login.

3. Pada kelas member memiliki asosiasi dengan kelas barang. Artinya setiap member boleh tidak melakukan pembelian atau melakukan pembelian lebih dari satu kali.

4. Pada kelas produk memiliki asosiasi dengan kelas transaksi. Artinya minimal setiap member melakukan pembelian produk akan mendapatkan invoice id.

5. Pada kelas request design memiliki asosiasi dengan kelas produk. Artinya dalam kelas request design, member dapat melakukan pemesanan produk yang diinginkan dan nantinya akan ditanggapi oleh operator selanjutnya, member mendapatkan sebuah no invoice id setiap melakukan order.

6. Pada kelas transaksi memiliki composition dengan kelas bukti pembayaran. Artinya kelas bukti pembayaran merupakan bagian dari kelas transaksi. Kelas bukti pembayaran tidak dapat berdiri sendiri apabila kelas transaksi tidak ada.

7. Pada kelas bukti pembayaran memiliki asosiasi dengan kelas alamat pengiriman. Artinya apabila transaksi sesuai dengan ketentuan nominal maka pesanan akan segera di proses.

38 8. Pada kelas alamat pengiriman memiliki asosiasi dengan kelas pemberitahuan. Artinya apabila barang telah selesai di proses, maka akan mendapatkan notifikasi.

9. Pada kelas testimonial tidak memiliki hubungan pada kelas lainnya.

3.6.4 Kamus Data

Berikut merupakan rancangan database yang diperlukan dalam perancangan kamus data:

Tabel 3. 2 Kamus Data Admin

No Nama Tipe

Data

Panjang Keterangan

1. id_Admin Int - Kolom sebagai primary key pada tabel admin.

2. Nama Varchar 30 Kolom yang menunjukan nama admin.

3. Username Varchar 30 Kolom yang menunjukan identitas admin saat login.

4. Password Varchar 40 Kolom yang menunjukan password saat admin login.

5. Email Varchar 40 Kolom yang menunjukan email admin untuk registrasi.

6. Foto Varchar 30 Kolom yang menunjukan foto admin.

7. Level Int - Kolom yang menunjukan peran hak akses saat user login.

39

Tabel 3. 3 Kamus Data Level

No Nama Tipe

Data

Panjang Keterangan

1. id_level Int - Kolom sebagai primary key id level.

2. nama_level Varchar 20 Kolom yang menunjukan peran hak akses saat user login.

Tabel 3. 4 Kamus Data Member

No Nama Tipe Data Panjang Keterangan

1. id_member Int - Kolom sebagai primary key id

member.

2. Nama Varchar 40 Kolom sebagai nama calon

member.

3 Hp Varchar 14 Kolom sebagai no hp calon

member.

4 Alamat Text - Kolom sebagai alamat calon

member.

5 Username Varchar 30 Kolom sebagai username calon member.

40

Tabel 3. 5 Kamus Data Member (Lanjutan)

6 Email Varchar 40 Kolom yang menunjukan email calon member untuk registrasi. 7 Password Varchar 40 Kolom sebagai password yang

di ingikan calon member. 8 show_password Varchar 30 Kolom sebagai password yang

terlihat saat diinputkan.

9 tanggal_daftar Date - Kolom sebagai tempo registrasi.

10 kode_konfirmasi Varchar 100 Kolom kode konfirmasi registrasi.

11 Status Int - Kolom sebagai pemberitahuan

registrasi.

Tabel 3. 6 Kamus Data Order

No Nama Tipe Data Panjang Keterangan

1. id_order Int - Kolom sebagai primary key id order.

2. invoice_id Varchar 30 Kolom sebagai nota order member.

5 id_user Int - Kolom sebagai id user.

6 Status Int - Kolom sebagai konfimasi order.

7 Dilihat Int - Kolom sebagai terkonfimasi order

atau menunggu konfirmasi.

8 Tanggal Datetime - Kolom sebagai tanggal pemesanan

41

Tabel 3. 7 Kamus Data Spesial Order

No Nama Tipe Data Panjang Keterangan

1. Id Int - Kolom sebagai primary key id

2. Id_member Int - Kolom sebagai id member.

3. Waktu Datetime - Kolom sebagai waktu order.

4. Gambar Varchar - Kolom sebagai upload request

design dari member.

5. Penjelasan Text - Kolom sebagai penjelasan

bagaimana kerja request design.

6. Status Int - Kolom sebagai konfirmasi order.

7. Harga Double - Kolom sebagai harga yang telah

disetujui.

8. Bukti Varchar 20 Kolom sebagai upload bukti

42

Tabel 3. 8 Kamus Data Barang

No Nama Tipe

Data

Panjang Keterangan

1. id_barang Int - Kolom sebagai primary key pada id

barang.

2. nama_barang Varchar 60 Kolom yang menunjukan nama

barang.

3. Harga Double - Kolom yang menunjukan harga

barang.

4. Kategori Int - Kolom yang menunjukan jenis

kategori barang.

5. Dilihat Int - Kolom yang menunjukan view

barang yang telah dilihat.

6. Stok Int - Kolom yang menunjukan stok

barang.

7. Berat Varchar 3 Kolom yang menunjukan berat

barang.

8. Deskripsi Text - Kolom yang menunjukan deskripsi

43

Tabel 3. 9 Kamus Data Kategori

No Nama Tipe

Data

Panjang Keterangan

1. id_kategori Int - Kolom sebagai primary key id

kategori.

2. nama_kategori Varchar 40 Kolom sebagai nama jenis kategori produk.

Tabel 3. 10 Kamus Data Bukti Pembayaran

No Nama Tipe

Data

Panjang Keterangan

1. Id_bukti_pembayaran Int - Kolom sebagai primary key pada id bukti pembayaran.

2. Id_order Int Kolom sebagai primary pada

id order.

3. Bukti Varchar 30 Kolom sebagai bukti order.

44

Tabel 3. 11 Kamus Data Gambar

No Nama Tipe

Data

Panjang Keterangan

1. id_gambar Int - Kolom sebagai primary key id barang.

2. gambar Varchar 50 Kolom sebagai contoh gambar produk.

3. id_barang Int - Kolom sebagai id barang.

Tabel 3. 12 Kamus Data Pemberitahuan

No Nama Tipe Data Panjang Keterangan

1. Id Int - Kolom sebagai primary key id.

2. Id_order Int - Kolom sebagai primary id order.

3. Pesan Text - Kolom sebagai tanya jawab pesan ke

operator.

4. Tanggal datetime - Kolom sebagai ketentuan tanggal, jam order.

5. User Int - Kolom sebagai nama user atau member.

45

Tabel 3. 13 Kamus Data Testimonial

No Nama Tipe

Data

Panjang Keterangan

1. id_testimonial Int - Kolom sebagai primary key id

testimonial.

2. Nama Varchar 40 Kolom sebagai nama member.

3 Email Varchar 40 Kolom sebagai email member.

4 Testimonial Text - Kolom sebagai text komentar member.

5 Tanggal Date - Kolom sebagai ketentuan tanggal

46

3.6.5 ER Diagram

Berdasarkan analisis kebutuhan dibuatlah ER diagram untuk membantu perancangan website Mebel Karya Satu. Berikut adalah ER diagram:

LOGIN MEMBER PRODUK

BUKTI PEMBAYARAN MELAKUKAN PEMESANAN MELAKUKAN TRANSAKSI | || || REQUEST DESIGN MELAKUKAN ALAMAT PENGIRIMAN MELAKUKAN PEMBERITAHU AN ---|| || || || TESTIMONIAL ID ADMIN USER NAME PASSWORD ID MEBER NAMA NO TELP ALAMAT EMAIL NAMA BARANG ID BARANG KATEGORI HARGA STOK BERAT ID MEMBER GAMBAR PENJELASAN HARGA ID INVOICE ID MEMBER TANGGAL STATUS TOTAL ID BUKTI TRANSAKSI

ID BUKTI TRANSFER

INVOICE ID ALAMAT IDINVOICE IDMEMBER PEMESANAN IDINVOICE TANGGAL STATUS IDTESTIMONIAL NAMA EMAIL TESTIMONIAL TANGGAL

Gambar 3. 11 ER Diagram

Berikut penjelasan tentang Gambar 3.11:

1. Terdapat 7 entitas yang masing-masing memiliki atribut dan relasi.

2. Entitas login memiliki relasi one-to-one ke entitas member, artinya member harus login agar bisa melakukan pemesanan barang.

47 3. Entitas member memiliki relasi many-to-many ke entitas produk, artinya member dapat melakukan banyak transaksi pembelian, dan sebaliknya banyak produk yang dapat dibeli oleh banyak member.

4. Entitas produk memiliki relasi one-to-one ke entitas request design artinya member dapat melalukan dua pemesanan melalui order dan request order. 5. Entitas Request design memiliki relasi many-to-many ke entitas bukti

pembayaran, artinya satu pembelian hanya memiliki satu invoice id beserta satu id bukti pembayaran.

6. Entitas alamat pengiriman memiliki relasi one-to-one ke entitas entitas pemberitahuan, artinya dalam satu pemesanan barang akan mendapatkan konfirmasi pengiriman barang sesuai dengan alamat tujuan.

7. Entitas testimonial tidak sama sekali memiliki relasi ke entitas lainnya.

3.6.6 Rancangan Antarmuka

Antarmuka sangatlah penting dalam suatu aplikasi karena merupakan bagian dari perangkat lunak yang menjadi sarana komunikasi antara pengguna dengan sistem serta dapat memberikan kemudahan bagi pengguna dalam melakukan aktivitasnya.

3.6.6.1 Rancangan Antarmuka Halaman Utama

Rancangan antarmuka halaman utama merupakan tampilan utama dari aplikasi yang dapat dilihat oleh member, non member, operator dan admin. Gambaran rancangan antarmuka halaman utama dapat dilihat pada Gambar 3.12.

48

Gambar 3. 12 Rancangan Halaman Utama

Terdapat menu-menu yang dapat dibuka sesuai dengan pengguna. Jika pengguna sudah masuk pada halaman utama menu dapat dijalankan.

3.6.6.2 Rancangan Antarmuka Halaman Produk

Rancangan antarmuka halaman produk berisi tentang produk-produk barang yang berkaitan dengan produk mebel. Dimana calon member dapat melihat beberapa jenis barang yang mereka inginkan dapat dilihat pada Gambar 3.13.

49

Gambar 3. 13 Rancangan Antarmuka Halaman Produk

3.6.6.3 Rancangan Antarmuka Halaman Keranjang

Rancangan untuk halaman keranjang belanja member dapat menentukan jumlah barang yang diinginkan apabila member telah selesai melakukan pemilihan produk member dapat melanjutkan ke menu pengiriman dengan melakukan klik button lanjut. Gambaran rancangan antarmuka halaman keranjang dapat dilihat pada Gambar 3.14.

50

Gambar 3. 14 Rancangan Antarmuka Halaman Belanja Keranjang

3.6.6.4 Rancangan Antarmuka Halaman Daftar Member Baru

Rancangan antarmuka halaman daftar member baru berisi hal-hal yang berkaitan dengan ketentuan pendaftaran yang dapat dilihat oleh member. Gambaran rancangan antarmuka halaman daftar member baru dapat dilihat pada Gambar 3.15.

51

Gambar 3. 15 Rancangan Antarmuka Halaman Daftar Member Baru

3.6.6.5 Rancangan Antarmuka Halaman Registrasi Aktivasi

Rancangan antarmuka halaman registrasi aktivasi yang dapat dilihat oleh member ketika telah selesai melakukan pendaftaran member baru. Terdapat langkah selanjutnya member diwajibkan untuk membuka email agar akun bisa terverifikasi. Gambaran rancangan antarmuka halaman registrasi aktivasi dapat dilihat pada Gambar 3.16.

52

Gambar 3. 16 Ranacangan Antarmuka Halaman Registrasi Aktivasi

3.6.6.6 Rancangan Antarmuka Halaman LoginMember

Rancangan untuk halaman login member terdapat dua buah kolom dan satu button yaitu kolom enter username, password dan satu button masuk. Member dapat login sesuai username, password yang telah dibuat sebelumnya, jika member lupa dengan password member akan di arahkan ke menu reset password. Gambaran rancangan antarmuka halaman login member dapat dilihat pada Gambar 3.17.

53

Gambar 3. 17 Rancangan Antarmuka Halaman Login Member

3.6.6.7 Rancangan Antarmuka Halaman Reset Password

Rancangan untuk halaman reset password member akan diarahkan untuk mengisi email sesuai pada saat mendaftar. Gambaran rancangan antarmuka halaman reset password dapat dilihat pada Gambar 3.18.

54

Gambar 3. 18 Rancangan Antarmuka Halaman Reset Password

3.6.6.8 Rancangan Antarmuka Halaman Akun Member

Rancangan untuk halaman akun member terdapat data profil member disini member dapat melakukan pembelian produk-produk sesuai yang member inginkan. Member juga bisa mengetahui informasi mengenai produk-produk yang telah terjual pada sesama member pada menu testimonial. Gambaran rancangan halaman akun member dapat dilihat pada Gambar 3.19.

55

Gambar 3. 19 Rancangan Antarmuka Halaman Akun Member

3.6.6.9 Rancangan Antarmuka Halaman Testimonial

Rancangan untuk halaman testimonial member dapat melihat komentar-komentar member seputar produk yang terjual. Member juga dapat melakukan komentar pada halaman testimonial yang telah sediakan. Gambaran rancangan antarmuka halaman testimonial dapat dilihat pada Gambar 3.20.

56

Gambar 3. 20 Rancangan Antarmuka Halaman Testimonial

3.6.6.10 Rancangan Antarmuka Halaman Belanja

Rancangan untuk halaman belanja member dapat melakukan pembelian sesuai yang diingikan jika member telah menentukan pilihan produk, maka produk masuk ke keranjang. Dalam menu keranjang belanja member dapat menentukan jumlah barang yang diinginkan. Gambaran rancangan antarmuka halaman belanja dapat dilihat pada Gambar 3.21.

57

Gambar 3. 21 Rancangan Antarmuka Halaman Belanja

3.6.6.11 Rancangan Antarmuka Halaman Spesial Request

Rancangan antarmuka halaman sepesial request berisi tentang produk barang yang berkaitan dengan produk. Dimana calon member dapat memesan barang yang mereka inginkan dengan mengupload designnya sendiri dapat dilihat pada Gambar 3.22.

58

Gambar 3. 22 Rancangan Antarmuka Halaman Spesial Request

3.6.6.12 Rancangan Antarmuka Halaman Pengiriman

Rancangan untuk halaman pengiriman member dapat menentukan kota tujuan saja karena alamat sudah otomatis terisi sesuai data member. Dalam jasa pengiriman terdapat dua pilihan jasa. Gambaran rancangan antarmuka halaman pengiriman dapat dilihat pada Gambar 3.23.

59

Gambar 3. 23 Rancangan Antarmuka Halaman Pengiriman

3.6.6.13 Rancangan Antarmuka Halaman Detail Pesanan

Rancangan untuk halaman detail pesanan member dapat melihat data pesanan yang telah ditentukan sebelumnya beserta total keseluruhan biaya. Dalam halaman detail pesanan, member dapat melakukan pengiriman bukti transfer pada kolom upload bukti yang telah tersedia. Member juga dapat melakukan kirim pesan ke operator untuk memberitahu agar pengiriman segera dilakukan. Gambaran rancangan antarmuka halaman detail pesanan dapat dilihat pada Gambar 3.24.

60

Gambar 3. 24 Rancangan Antarmuka Halaman Detail Pesanan

3.6.6.14 Rancangan Antarmuka Halaman Pembatalan Pesanan

Rancangan untuk halaman pembatalan pesanan member dapat melakukan pembatalan secara langsung tanpa konfirmasi ke operator. Gambaran rancangan antarmuka halaman belanja dapat dilihat pada Gambar 3.25.

61

Gambar 3. 25 Rancangan Antarmuka Halaman Pembatalan Pesanan

3.6.6.15 Rancangan Antarmuka Halaman Login Admin

Rancangan untuk halaman login admin terdapat dua label, dua text field dan satu button masuk. Gambaran rancangan antarmuka halaman login admin dapat dilihat pada Gambar 3.26.

62

Gambar 3. 26 Rancangan Antarmuka Halaman Login Admin

3.6.6.16 Rancangan Antarmuka Halaman Utama Admin

Rancangan untuk halaman utama admin, terdapat button pencarian barang, kategori barang, list barang, data pengurus, laporan, data member dan testimonial. Admin berfungsi untuk melakukan pengeditan keseluruhan data maupun informasi serta dapat melihat daftar member. Gambaran rancangan antarmuka halaman login utama admin dapat dilihat pada Gambar 3.27.

63

Gambar 3. 27 Rancangan Antarmuka Halaman Utama Admin

3.6.6.17 Rancangan Antarmuka Halaman Login Operator

Rancangan untuk halaman login operator terdapat dua label, dua text field dan satu button masuk. Gambaran rancangan antarmuka halaman login operator dapat dilihat pada Gambar 3.28.

64

Gambar 3. 28 Rancangan Antarmuka Halaman Login Operator

3.6.6.18 Rancangan Antarmuka Halaman Utama Operator

Rancangan untuk halaman utama operator, terdapat button data pesanan dan button testimonial. Operator berfungsi untuk melakukan konfirmasi pesanan, kirim pemberitahuan serta pengecetakan bukti transfer. Gambaran rancangan antarmuka halaman login utama admin dapat dilihat pada Gambar 3.29.

65

Gambar 3. 29 Rancangan Antarmuka Halaman Utama Operator

3.6.6.19 Rancangan Antarmuka Halaman Laporan

Rancangan untuk halaman laporan. Admin dapat melakukan pengecekan jenis laporan, berupa laporan penjualan dan laporan stok barang. Gambaran rancangan antarmuka halaman laporan dapat dilihat pada Gambar 3.30.

66

Gambar 3. 30 Rancangan Antarmuka Halaman Laporan

3.6.6.20 Rancangan Antarmuka Halaman Laporan Penjualan

Rancangan untuk halaman laporan penjualan. Admin dapat melakukan pengecekan jenis laporan penjualan dari tanggal awal sampai dengan tanggal laporan akhir. Gambaran rancangan antarmuka halaman laporan penjualan dapat dilihat pada Gambar 3.31.

67

Gambar 3. 31 Rancangan Antarmuka Halaman Laporan Penjualan

3.6.6.21 Rancangan Antarmuka Halaman Laporan Stok Barang

Rancangan untuk halaman laporan stok barang. Admin dapat melakukan pengecekan jenis laporan stok barang. Gambaran rancangan antarmuka halaman laporan stok barang dapat dilihat pada Gambar 3.32.

68

69

BAB IV PEMBAHASAN

4.1 Sistem Perancangan

4.1.1 Instalasi Aplikasi Server

Perancangan aplikasi ini adalah melakukan instalasi aplikasi server yaitu menggunakan XAMPP. Setelah selesai melakukan instalasi kemudian jalankan aplikasi XAMPP pastikan Apache dan MySQL dapat terkoneksi.

Gambar 4.1 Running Apache dan MySQL

4.1.2 Pembuatan Database

Memastikan bahwa koneksi Apache dan MySQL berhasil langkah selanjutnya adalah pembuatan database dengan cara membuka browser kemudian ketikkan localhost:8080/phpmyadmin. Pada sistem yang telah dibangun database diberi nama Db_mebel yang didalamnya berisi banyak tabel meliputi: tb_admin, alamat_pengiriman, banner_top, tb_barang, tb_bukti_pembayaran, tb_captcha,

70 tb_gambar, tb_kategori, tb_level, tb_member, tb_ongkir, tb_order, tb_special_order, tb_pemberitahuan dan tb_testimonial.

71

4.2 Antarmuka

4.2.1 Halaman Login

Langkah selanjutnya halaman login merupakan halaman utama user (operator dan admin) sebelum menggunakan sistem. Halaman ini berisi halaman username dan password yang harus diisi dengan benar. Halaman login dapat dilihat pada gambar 4.3.

Gambar 4. 3 Halaman Login Admin

4.2.2 Halaman Kategori Barang

Langkah selanjutnya halaman kategori barang berisi data nama kategori barang. Disana juga ada kolom aksi yang digunakan untuk melihat, mengedit dan menghapus data barang yang dikehendaki. Halaman kategori barang dapat dilihat pada gambar 4.4.

72

Gambar 4. 4 Halaman Kategori Barang

4.2.3 Halaman List Barang

Langkah selanjutnya halaman list barang berisi data nama kategori barang. Disana juga ada kolom aksi yang digunakan untuk menambah, melihat, mengedit dan menghapus data barang yang dikehendaki. Halaman list barang dapat dilihat pada gambar 4.5.

73

Gambar 4. 5 Halaman List Barang

4.2.4 Halaman Data Pengurus

Langkah selanjutnya halaman data pengurus berisi data nama, username dan level. Disana juga ada kolom aksi yang digunakan untuk reset password dan menghapus data pengurus yang dikehendaki.Halaman data pengurus dapat dilihat pada gambar 4.6.

74

Gambar 4. 6 Halaman Data Pengurus

4.2.5 Halaman Tambah Data Pengurus

Langkah selanjutnya halaman tambah data pengurus. digunakan untuk menambahkan data pengurus dengan mengisikan nama, username, level, kata sandi dan konfirmasi kata sandi Halaman tambah data pengurus dapat dilihat pada gambar 4.7.

75

Gambar 4. 7 Halaman Tambah Data Pengurus

4.2.6 Halaman Laporan Penjualan

Langkah selanjutnya halaman laporan penjualan digunakan untuk melihat total penjualan barang yang terjual pada periode tertentu caranya dengan mengisikan tanggal sekian sampai dengan tanggal sekian. Halaman laporan penjualan dapat dilihat pada gambar 4.8.

76

Gambar 4. 8 Halaman Laporan Penjualan

4.2.7 Halaman Laporan Stok Barang

Langkah selanjutnya halaman hasil laporan stok barang dalam hasil laporan stok barang bisa terlihat hasil jumlah stok barang yang terjual maupun stok barang yang tersedia. Halaman hasil laporan penjualan dapat dilihat pada gambar 4.9.

77

Gambar 4. 9 Halaman Laporan Stok Barang

4.2.8 Halaman Hasil Laporan Penjualan (Order Biasa)

Langkah selanjutnya halaman hasil laporan penjualan dalam hasil laporan bisa terlihat hasil laporan penjualan pada periode. Halaman hasil laporan penjualan dapat dilihat pada gambar 4.10.

78

Gambar 4. 10 Halaman Hasil Laporan Penjualan (Order Biasa)

4.2.9 Halaman Hasil Laporan Penjualan (Spesial Request)

Langkah selanjutnya halaman hasil laporan penjualan dalam hasil laporan bisa terlihat hasil laporan penjualan pada periode. Halaman hasil laporan penjualan dapat dilihat pada gambar 4.11.

79

Gambar 4. 11 Halaman Hasil Laporan Penjualan (Request)

4.2.10 Halaman Data Member

Langkah selanjutnya halaman pengguna berisi data username, tanggal daftar, dan Status. Disana juga ada kolom aksi yang digunakan untuk melihat dan menghapus data member yang dikehendaki. Halaman data member dapat dilihat pada gambar 4.12.

80

`Gambar 4. 12 Halaman Data Member

4.2.11 Halaman Testimonial

Langkah selanjutnya halaman testimonial berisi mengenai beberapa komentar yang disampaikan oleh member. Halaman testimonial dapat dilihat pada gambar 4.13.

81

4.2.12 Halaman Utama

Halaman utama merupakan tampilan utama dari aplikasi yang dapat dilihat oleh member, operator dan admin. Gambar halaman utama aplikasi dapat dilihat pada Gambar 4.14.

Gambar 4. 14 Halaman Utama Website

4.2.13 Halaman Registrasi Member

Halaman registrasi yang akan diisi oleh calon member. Pada rancangan halaman registrasi terdapat data-data yang akan diisi oleh calon member. Terdapat textbox dan button. Halaman registrasi member dapat dilihat pada Gambar 4.15.

82

Gambar 4. 15 Halaman Registrasi Member

4.2.14 Halaman Akun Member

Halaman akun member terdapat data-data member sesuai dengan data registrasi sebelumnya, member dapat melakukan perubahan data. Halaman akun member dapat dilihat pada Gambar 4.16.

83

Gambar 4. 16 Halaman Akun Member

4.2.15 Halaman Detail Pesanan (Order Biasa)

Langkah selanjutnya halaman detail pesanan digunakan untuk melakukan pengecekan pesanan barang dan terdapat nama barang, harga, jumlah, berat, total berat, total harga produk, harga ongkos kirim, tanggal pemesanan, bukti struk pembayaran, jumlah barang, total harga pengiriman, total harga dan data member. Halaman detail pesanan dapat dilihat pada gambar 4.17.

95 LAMPIRAN

Source Code Aplikasi :

<?php if

( ! defined('BASEPATH')) exit('No direct script access allowed');

class Guest extends MX_Controller {

var $_redirect_to = 'guest/akun';

public function

__construct() {

parent::__construct(); date_default_timezone _get("Asia/jakarta");

$this->load->library('auth_member');

$this->load->library('rajaongkir');

$this->load->model('guest/guest_m','admin_m');

$this->load->helper('captcha')

{

$this->load->library('auth_member');

if($this->auth_member->is_logged_in())

{ redirect($this->_redirect_to);

} }

public function login() {

$this->cek_login();

$data =

array('page_title' => 'Login',

96 $this->clear_jatuh_tempo();

//ini_set('display_error s', 1);

//ini_set('display_startup_errors', 1); //error_reporting(E_ALL);

}

public function index() {

$data =

array('page_title' => 'Beranda',

'show_baner' => 'true',

'data' => $this-

>admin_m->liat_satu('barang','id_barang',12)

$this->load->view('login_v',$data);

}

public function

loginAuth() {

if(!$_POST) {

redirect('guest/login'); }

$username = $this->input->post('username');

$password = $this->input->post('password');

$success = $this-

>auth_member->do_login($username,$password); if($success)

97 );

$this->load->view('main',$data);

}

public function

cek_login()

$this->auth_member->hak_akses_member();

$id_user =

$this->session->userdata('user_id');

$data =

array('page_title' => 'Akun',

'data' => $this-

>admin_m->detail('member',array('id_member' => $id_user))

);

// lemparkan ke

halaman index user

redirect('guest/akun');

} else

{

$this->session->set_flashdata('msg_error','username atau password tidak cocok');

redirect('guest/login');

} }

function akun() {

$this->form_validation->set_rules('nama','Nama','');

98

$this->load->view('akun_v',$data); }

function akun_edit() {

if(!$_POST)

{

show_404();

}

$this->auth_member->hak_akses_member();

$id_user = $this->session->userdata('user_id');

>update('member',array('id_member' =>$id_user),$data);

$this->session->set_flashdata('msg','Data telah di Update :)');

redirect('guest/akun');

$this-

>form_validation->set_rules('hp','nomor handphone',''); $this-

>form_validation->set_rules('username','Username','cal lback_cek_username');

$this-

>form_validation->set_rules('password','Password ','callback_cek_password');

$this-

>form_validation->set_rules('password2','Konfirmasi Password','matches[password]');

$this-

>form_validation->set_message('is_unique','%s telah digunakan');

$this-

>form_validation->set_message('matches','%s Tidak Cocok');

if($this->form_validation->run($this) == FALSE)

{ $this->akun(); } else

99 }

}

function pass_edit() {

$this->auth_member->hak_akses_member();

//validasi if(isset($_POST)) {

$this-

>form_validation->set_rules('password_lama','Passwor d

Lama','required|callback_cek_passwo rd');

$this-

>form_validation->set_rules('password_baru','Password Baru','required');

$this-

>form_validation->set_rules('password_baru2','Konfir

{ $nama = $this->input->post('nama');

$hp = $this->input->post('hp');

$username = $this->input->post('username');

$email = $this->input->post('email');

$password = $this->input->post('password2');

$data = array('nama' => $nama,

'hp' => $hp,

'username' => $username,

100

masi Password

Baru','required|matches[password_ba ru]');

$this-

>form_validation->set_message('required', '%s Harus diisi');

$where =

array('id_member' => $this->session->userdata('user_id'));

$data = array(

);

$this->admin_m-

$this- if($this->form_validation->run($this) == FALSE)

{

$this->akun(); }

else {