TA : Rancang Bangun Aplikasi Penjualan Online Pada CV. Mitra Techno Sains Surabaya.

RANCANG BANGUN APLIKASI PENJUALAN ONLINE PADA

CV. MITRA TECHNO SAINS SURABAYA

TUGAS AKHIR

Program Studi S1 Sistem Informasi

Oleh:

DODY CIPTA PRATAMA DIAZ 09.41010.0204

FAKULTAS TEKNOLOGI DAN INFORMATIKA

INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA 2016

RANCANG BANGUN APLIKASI PENJUALAN ONLINE PADA CV. MITRA TECHNO SAINS SURABAYA

TUGAS AKHIR

Diajukan sebagai salah satu syarat untuk menyelesaikan Program Sarjana

Oleh:

Nama : Dody Cipta Pratama Diaz NIM : 09.41010.0204

Program : S1 (Strata Satu) Jurusan : Sistem Informasi

FAKULTAS TEKNOLOGI DAN INFORMATIKA

INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA 2016

"Kebahagiaan menyebar seperti wangi bunga dan menarik semua kebaikan” “We do our best and let GOD take care of the rest”

KUPERSEMBAHKAN KEPADA: Tuhan Yesus

Kedua orang tua dan keluarga yang telah memberikan semangat, motivasi, dan doa

Bapak dan Ibu Dosen Pembimbing yang telah bersabar dan meluangkan waktunya dalam memberi bimbingan, arahan, dan motivasi

Teman-teman Mahasiswa Institut Bisnis dan Informatika Stikom Surabaya yang saling membantu dan memberikan motivasi

x

Halaman

ABSTRAK ... vii

KATA PENGANTAR ... viii

DAFTAR ISI ... x

DAFTAR GAMBAR ... xv

DAFTAR TABEL ... xvii

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Perumusan Masalah ... 3

1.3 Pembatasan Masalah ... 3

1.4 Tujuan ... 3

1.5 Manfaat ... 4

1.6 Sistematika Penulisan ... 4

BAB II LANDASAN TEORI ... 6

2.1 Penelitian Terdahulu ... 6

2.2 Aplikasi ... 8

2.3 Penjualan ... 8

2.4 Toko Online ... 10

2.5 Konsep Dasar Website ... 11

2.6 Web ... 12

2.7 Basis Data ... 12

2.8 Diagram Alir ... 14

xi

Halaman

2.10 PHP Hypertext Preprocessor ... 14

2.11 Responsive Web Design ... 15

2.12 Framework Responsive Web Design (ZURB Foundation) ... 16

BAB III ANALISIS DAN PERANCANGAN SISTEM ... 18

3.1 Identifikasi dan Analisis Permasalahan ... 18

3.2 Perancangan Sistem ... 19

3.2.1 Menganalisis Kebutuhan Sistem ... 20

3.2.2 Desain Sistem ... 21

3.3 Document Flow ... 21

3.3.1 Document Flow Sistem Penjualan ... 21

3.4 System Flow ... 23

3.3.1 System Flow Transaksi Penjualan ... 23

3.3.2 System Flow Transaksi Daftar Member ... 25

3.3.3 System Flow Transaksi Maintenance Barang ... 27

3.3.4 System Flow Menampilkan Laporan ... 28

3.5 Context Diagram ... 29

3.6 Data Flow Diagram (DFD) ... 30

3.6.1 DFD level 0 Sistem Penjualan Online ... 31

3.6.2 DFD level 1 Transaksi ... 32

3.6.3 DFD level 1 Maintenance ... 32

3.6.4 DFD level 1 Laporan ... 33

3.7 Entity Relationship Diagram (ERD) ... 34

xii

3.8 Struktur Tabel ... 38

3.9 Desain I/O ... 45

3.9.1 Desain I/O Tampilan Login ... 45

3.9.2 Desain I/O Tampilan Halaman Utama ... 46

3.9.3 Desain I/O Tampilan Daftar Customer ... 47

3.9.4 Desain I/O Tampilan Tampilan Produk ... 48

3.9.5 Desain I/O Tampilan About Us ... 49

3.9.6 Desain I/O Tampilan Contact Us ... 50

3.9.7 Desain I/O Tampilan Keranjang Belanja ... 51

3.9.8 Desain I/O Tampilan Input Data Barang ... 52

3.9.9 Desain I/O Tampilan Tampilan Data Barang ... 53

3.9.10 Desain I/O Tampilan Input Kategori ... 54

3.9.11 Desain I/O Tampilan Kategori ... 55

3.9.12 Desain I/O Tampilan Order List ... 56

3.9.13 Desain I/O Tampilan Pengiriman ... 57

3.9.14 Desain I/O Tampilan Laporan Penjualan ... 58

3.9.15 Desain I/O Tampilan Laporan Barang ... 59

3.9.16 Desain I/O Tampilan Laporan Customer ... 60

BAB IV IMPLEMENTASI DAN EVALUASI SISTEM ... 61

4.1 Kebutuhan Sistem ... 61

4.1.1 Kebutuhan Server ... 61

xiii

Halaman

4.1.3 Kebutuhan Hardware ... 62

4.2 Pembuatan Sistem ... 62

4.3 Implementasi Sistem ... 63

4.3.1 Tampilan Login ... 63

4.3.2 Tampilan Halaman Utama ... 64

4.3.3 Tampilan Daftar Customer ... 65

4.3.4 Tampilan Produk ... 65

4.3.5 Tampilan About Us ... 66

4.3.6 Tampilan Contact Us ... 67

4.3.7 Tampilan Konfirmasi Pembayaran ... 68

4.3.8 Tampilan Keranjang Belanja ... 69

4.3.9 Tampilan Input Data Barang ... 70

4.3.10 Tambilan Data Barang ... 71

4.3.11 Tampilan Input Kategori ... 72

4.3.12 Tampilan Kategori ... 72

4.3.13 Tampilan Order List ... 73

4.3.14 Tampilan Pengiriman ... 73

4.3.15 Tampilan Laporan Penjualan ... 74

4.3.16 Tampilan Laporan Barang ... 75

4.3.17 Tampilan Laporan Customer ... 76

4.4 Uji Coba dan Evaluasi Sistem ... 77

4.4.1 Hasil Uji Coba Halaman Login ... 77

xiv

4.4.4 Hasil Uji Coba Halaman Kategori ... 83

4.4.5 Hasil Uji Coba Halaman Keranjang Belanja ... 84

4.4.6 Hasil Uji Coba Halaman Pengiriman ... 85

4.4.7 Hasil Uji Coba Halaman Laporan ... 86

4.4.8 Evaluasi ... 87

BAB V PENUTUP ... 89

5.1 Kesimpulan ... 89

5.2 Saran ... 89

DAFTAR PUSTAKA ... 90

xv

DAFTAR GAMBAR

Halaman

Gambar 3.1 Document Flow Transaksi Penjualan ... 22

Gambar 3.2 System Flow Transaksi Penjualan ... 24

Gambar 3.3 System Flow Daftar Member ... 26

Gambar 3.4 System Flow Maintenance Barang ... 27

Gambar 3.5 System Flow Menampilkan Laporan ... 28

Gambar 3.6 Context Diagram ... 30

Gambar 3.7 DFD Level 0 ... 31

Gambar 3.8 DFD Level 1 Transaksi ... 32

Gambar 3.9 DFD Level 1 Maintenance ... 33

Gambar 3.10 DFD Level 1 Laporan ... 33

Gambar 3.11 Conceptual Data Model (CDM) ... 35

Gambar 3.12 Physical Data Model (PDM) ... 37

Gambar 3.13 Desain I/O Tampilan Login ... 45

Gambar 3.14 Desain I/O Tampilan Halaman Utama ... 46

Gambar 3.15 Desain I/O Tampilan Daftar Customer ... 47

Gambar 3.16 Desain I/O Tampilan Produk ... 48

Gambar 3.17 Desain I/O Tampilan About Us ... 49

Gambar 3.18 Desain I/O Tampilan Contact Us ... 50

Gambar 3.19 Desain I/O Tampilan Keranjang Belanja ... 51

Gambar 3.20 Desain I/O Tampilan Input Data Barang ... 52

Gambar 3.21 Desain I/O Tampilan Data Barang ... 53

xvi

Gambar 3.24 Desain I/O Tampilan Order List ... 56

Gambar 3.25 Desain I/O Tampilan Pengiriman ... 57

Gambar 3.26 Desain I/O Tampilan Laporan Penjualan ... 58

Gambar 3.27 Desain I/O Tampilan Laporan Barang ... 59

Gambar 3.28 Desain I/O Tampilan Laporan Customer ... 60

Gambar 4.1 Tampilan Login ... 63

Gambar 4.2 Tampilan Halaman Utama ... 64

Gambar 4.3 Tampilan Daftar Customer ... 65

Gambar 4.4 Tampilan Barang ... 66

Gambar 4.5 Tampilan About Us ... 66

Gambar 4.6 Tampilan Contact Us ... 67

Gambar 4.7 Tampilan Konfirmasi Pembayaran ... 68

Gambar 4.8 Tampilan Keranjang Belanja ... 69

Gambar 4.9 Tampilan Input Data Barang ... 70

Gambar 4.10 Tampilan Data Barang ... 71

Gambar 4.11 Tampilan Input Kategori ... 72

Gambar 4.12 Tampilan Kategori... 72

Gambar 4.13 Tampilan Order List ... 73

Gambar 4.14 Tampilan Pengiriman ... 73

Gambar 4.15 Tampilan Laporan Penjualan ... 74

Gambar 4.16 Tampilan Laporan Barang ... 75

xvii

DAFTAR TABEL

Halaman

Tabel 3.1 Tabel Barang ... 38

Tabel 3.2 Tabel Kategori... 39

Tabel 3.3 Tabel Gambar ... 39

Tabel 3.4 Tabel Provinsi ... 40

Tabel 3.5 Tabel Kota ... 40

Tabel 3.6 Tabel Paket ... 41

Tabel 3.7 Tabel Whistlist... 41

Tabel 3.8 Tabel Detil Order ... 42

Tabel 3.9 Tabel Order ... 42

Tabel 3.10 Tabel Customer ... 43

Tabel 3.11 Tabel Konfirmasi Pembayaran... 44

Tabel 4.1 Hasil Uji Coba Login ... 77

Tabel 4.2 Hasil Uji Coba Halaman Registration ... 79

Tabel 4.3 Hasil Uji Coba Halaman Barang ... 81

Tabel 4.4 Hasil Uji Coba Halaman Kategori ... 83

Tabel 4.5 Hasil Uji Coba Halaman Keranjang Belanja ... 84

Tabel 4.6 Hasil Uji Coba Halaman Pengiriman ... 85

1

BAB I PENDAHULUAN

1.1 Latar Belakang Masalah

CV. Mitra Techno Sains merupakan perusahaan yang menjual detergent,

softener, shampo mobil dan silicone oil yang berada di Pondok Wiguna Regency V

no. 25 Gunung Anyar Surabaya dan saat ini berupaya untuk mengembangkan usahanya. Produk yang dijual CV. Mitra Techno Sains dibagi ke dalam tiga jenis yaitu Laundry, Car Wash, dan keperluan rumah tangga. Produk Laundry terdiri dari

detergent, baik detergent matic maupun detergent manual, detergent cair, softener,

trizka, penghilang noda darah, penghilang noda minyak, pemutih pakaian, bibit parfum dan citrun. Produk Car Wash yang terdiri dari shampo mobil snow, shampo mobil ice cream atau busa warna, silicon emultion, silicone oil dan pembersih mesin. Produk keperluan rumah tangga terdiri dari karbol, pel lantai, pembersih porselen, pembersih kaca, sabun cuci piring, sabun cuci tangan, sabun colek, tawas dan kaporit.

Dari data hasil wawancara, Pelanggan CV. Mitra Techno Sains berjumlah 114 pelanggan. Pelanggan terbanyak CV. Mitra Techno Sains yaitu 97 orang pelanggan (85,09%) berasal dari Surabaya, 10 orang pelanggan (8,77%) berasal dari Sidoarjo, 6 orang pelanggan (5,27%) berasal dari daerah lain di sekitar Surabaya, dan 1 orang pelanggan (0,87%) dari luar pulau Jawa. Dari data tersebut dapat disimpulkan bahwa dengan kantor yang berada di Surabaya CV. Mitra Techno Sains belum cukup untuk menjangkau customer yang berada di luar kota maupun di luar pulau. Dengan perencanaan untuk membuka kantor baru tentunya

2

memerlukan tambahan tenaga yang banyak untuk direkrut menjadi pegawai. Selain itu dengan penambahan kantor tentunya membutuhkan biaya tambahan untuk membuat kantor dan juga biaya operasional perawatan gedung. Untuk memperluas daerah pemasaran dan penjualan pihak kantor harus memikirkan cara untuk mendirikan sebuah aplikasi yang dapat menyetarai solusi mendirikan kantor di luar daerah maupun luar pulau. Aplikasi yang dibuat harus jauh lebih murah dibandingkan dengan mendirikan kantor di luar daerah maupun luar pulau.

Kesulitan pelanggan untuk memperoleh informasi mengenai data harga dan produk yang paling baru merupakan salah satu kendala yang dihadapi selama penggunaan sistem konvensional. Untuk dapat melihat informasi mengenai data harga dan produk terbaru yang dibutuhkan, pelanggan harus datang ke kantor, menelpon atau mengirim email. Jika pelanggan harus datang ke kantor, menyebabkan banyak waktu terbuang yang dibutuhkan pelanggan untuk memperoleh informasi maupun untuk membeli produk. Jika melalui telepon atau email maka akan menyebabkan kurangnya efisiensi karena perusahaan harus menjawab semua telepon pelanggan yang masuk. Selain itu akan ada biaya yang dikeluarkan di sisi pelanggan untuk menelpon. Kendala seperti ini akan berdampak pada berkurangnya niat pelanggan untuk melakukan transaksi.

Dengan adanya aplikasi ini diharapkan pemasaran produk CV. Mitra Techno Sains dapat lebih diperluas sehingga dapat menjangkau daerah-daerah yang ada di luar daerah maupun di luar pulau sehingga dapat meningkatkan transaksi penjualan dan dapat meminimalisir biaya yang akan dikeluarkan dibandingkan dengan biaya membangun gedung, operasional perawatan gedung dan membayar gaji karyawan jika membangun sebuah kantor baru. Guna dapat membantu

pelanggan yang juga ingin melakukan transaksi pembelian di internet secara langsung, sama halnya seperti pembelian di kantor, maka aplikasi juga akan menerapkan sistem shopping cart yang mana dapat mempermudah pembeli menyimpan dan menghitung total harga produk yang akan dibeli, dengan proses pembayaran nantinya akan menggunakan layanan transfer ke bank yang telah terdaftar

1.2 Perumusan masalah

Berdasarkan uraian latar belakang masalah tersebut, maka perumusan masalah pada penelitian ini adalah bagaimana merancang bangun aplikasi penjualan online pada CV. Mitra Techno Sains.

1.3 Pembatasan Masalah

Adapun yang menjadi batasan-batasan masalah dalam perangkat lunak ini, yaitu:

1. Sistem ini hanya menggunakan pembayaran secara transfer uang melalui rekening.

2. Sistem ini tidak membahas mengenai pengiriman produk karena pengiriman produk dilakukan oleh pihak ketiga.

3. Sistem ini tidak membahas mengenai pengembalian produk.

1.4 Tujuan

Sesuai dengan permasalahan yang ada maka tujuan penelitian ini adalah menghasilkan rancang bangun aplikasi penjualan online pada CV. Mitra Techno Sains.

4

1.5 Manfaat

Aplikasi ini nantinya akan memiliki nilai manfaat bagi pihak CV. Mitra Techno Sains untuk memperluas daerah pemasaran sehingga dapat menjangkau daerah-daerah yang ada di luar daerah maupun di luar pulau sehingga dapat meningkatkan transaksi penjualan.

1.6 Sistematika Penulisan

Sistematika dalam penyusunan Tugas Akhir ini akan dijabarkan dalam setiap bab dengan pembagian sebagai berikut:

BAB I : PENDAHULUAN

Pada bab ini akan dibahas mengenai latar belakang masalah, perumusan masalah, pembatasan masalah, tujuan penelitian, manfaat penelitian, dan sistematika penulisan laporan penelitian.

BAB II : LANDASAN TEORI

Pada bab ini akan dijelaskan mengenai landasan teori yang merupakan teori dasar dari teori yang dipakai untuk menyelesaikan permasalahan di dalam tugas akhir. Teori-teori tersebut antara lain: Aplikasi, Penjualan, Toko Online, Konsep Dasar Website, Web, Basis Data, Diagram Alir, Data Flow Diagram, PHP Hypertext Preprocessor, Responsive Web Design dan Framework Responsive Web Design (ZURB Foundation).

BAB III : ANALISIS DAN PERANCANGAN SISTEM

Bab ini membahas mengenai analisis dan perancangan sistem yang digunakan di dalam tugas akhir. Pada bagian analisis sistem akan dijelaskan tentang sistem yang ada sekarang, dilanjutkan

dengan analisis dari permasalahan yang ada. Setelah melakukan analisis, akan dilakukan desain sistem yang menjelaskan bagaimana sistem ini akan dibuat. Desain sistem akan digambarkan menggunakan System Flow, Data Flow Diagram,

Entity Relationship Diagram, dan desain interface.

BAB IV : IMPLEMENTASI DAN EVALUASI

Pada bab ini akan dibahas mengenai hasil implementasi dari analisis dan perancangan sistem yang telah dilakukan. Bab ini akan menunjukkan tampilan dari aplikasi yang telah dibuat, serta analisis dari hasil uji coba aplikasi yang telah dilakukan.

BAB V : PENUTUP

Pada bab ini menjelaskan tentang kesimpulan dari hasil analisis dan perancangan aplikasi penjualan online. Selain itu, pada bab ini berisi tentang pembahasan permasalahan yang telah dilakukan dan saran bagi pengembangan aplikasi penjualan.

6

BAB II

LANDASAN TEORI

2.1 Penelitian Terdahulu

Penerapan internet dalam penjualan produk secara online sudah cukup banyak digunakan. Pada penelitian sebelumnya :

1. Penelitian dilakukan oleh Artha (2009), dalam bukunya yang berjudul Rancang Bangun Sistem Informasi Penjualan Perangkat Game pada Toko I-Games Berbasis Web. Pada penelitian tersebut penjualan online dilakukan karena keterbatasan sistem toko konvensional dalam hal menjangkau daerah pemasaran yang berada di luar kota atau di luar pulau. Selain itu mendirikan toko akan membutuhkan biaya yang banyak dan juga kebutuhan biaya tenaga kerja semakin banyak pula. Kendala lain yang muncul dengan mendirikan toko adalah kapasitas luas toko yang digunakan untuk menampung stok dan display produk terbatas.

Beberapa kekurangan pada penelitian ini yang terdapat pada saran adalah transaksi penjualan dibuat agar lebih mudah dimengerti oleh pelanggan dan juga aplikasi yang dibuat dapat dengan mudah dimengerti oleh admin yang mengelola website.

2. Penelitian dilakukan oleh Adhiguna (2010), dalam bukunya yang berjudul Rancang Bangun Website Penjualan Tupperware dengan Sistem Shoping Cart (Studi Kasus Distributor Valvalice). Pada penelitian tersebut penjualan online dilakukan karena pemasaran yang dilakukan dirasa kurang, sebab wilayah pemasaran sementara hanya berpusat pada kota Gersik dan Surabaya. Untuk

daerah lainnya terpaksa calon pembeli harus pergi ke kota atau rumah distributor Valvalice.

Salah satu kekurangan dalam penelitian ini yang terdapat pada saran adalah website penjualan tupperware juga bisa dikembangkan ke arah pemanfaatan mobile technology. Sehingga untuk pembelian produk, pengguna bisa menggunakan peralatan mobile seperti handphone, PDA, atau smart phone. 3. Penelitian dilakukan oleh Valentina (2012), dalam bukunya yang berjudul

Rancang Bangun Aplikasi Penjualan pada CV. Sukses Sidoarjo. Pada penelitian tersebut CV. Sukses memanfaatkan teknologi dalam proses perhitungan laporan penjualan karena perhitungan yang digunakan sebelumnya masih manual dengan menggunakan kalkulator sehingga sering terjadi kesalahan untuk melakukan perhitungan laporan penjualan. Selain itu rekapan transaksi penjualan pun yang sewaktu waktu hilang mempersulit CV. Sukses dalam membuat laporan penjualan.

Salah satu kekurangan dalam penelitian ini yang terdapat pada saran adalah dalam suatu sistem terkomputerisasi sebaiknya diterapkan sistem autentifikasi untuk masing – masing user agar sistem tersebut menjadi lebih aman dan masing-masing user dapat bekerja sesuai dengan haknya.

Perbedaan ketiga penelitian di atas dengan penelitian yang akan dibuat adalah :

1. Tampilan aplikasi yang dibuat akan sangat mudah dimengerti baik oleh admin yang mengelola website maupun calon pembeli yang akan membeli.

8

2. Website juga akan didesain tampilan untuk user yang membuka website melalui smartphone sehingga memudahkan pelanggan yang membuka website dengan menggunakan smartphone.

3. Aplikasi yang akan dibuat terdapat autentifikasi user, baik untuk admin maupun untuk member, dimana untuk masuk sebagai admin atau member harus mengisi username dan password terlebih dahulu.

2.2Aplikasi

Menurut Noviansyah (2008), aplikasi adalah penggunaan atau penerapan suatu konsep yang menjadi suatu produk pembahasan. Aplikasi dapat diartikan juga sebagai program komputer yang dibuat untuk menolong manusia dalam melaksanakan tugas tertentu.

2.3Penjualan

Menurut Kotler dan Amstrong (2006:457), penjualan merupakan sebuah proses dimana kebutuhan pembeli dan kebutuhan penjual dipenuhi, melalui antar pertukaran informasi dan kepentingan. Jadi konsep penjualan adalah cara untuk mempengaruhi konsumen untuk membeli produk yang ditawarkan. Penjualan merupakan sumber hidup suatu perusahaan, karena dari penjualan dapat diperoleh laba serta usaha memikat konsumen yang diusahakan untuk mengetahui daya tarik mereka sehingga dapat mengetahui hasil produk yang dihasilkan.

Dalam praktek kegiatan penjualan itu dipengaruhi oleh beberapa faktor sebagai berikut:

1. Kondisi dan Kemampuan Penjual.

Transaksi jual-jual beli atau pemindahan hak milik secara komersial atas barang dan jasa itu pada prinsipnya melibatkan dua pihak, yaitu penjual

sebagai pihak pertama dan pembeli sebagai pihak kedia. Disini penjual harus meyakinkan kepada pembelinya agar dapat berhasil mencapai sasaran penjualan yang diharapkan untuk maksud tersebut penjual harus memahami beberapa masalah penting yang sangat berkaitan, yakni:

a. Jenis dan karakteristik barang yang di tawarkan. b. Harga produk.

c. Syarat penjualan seperti: pembayaran, penghantaran, pelayanan sesudah penjualan, garansi dan sebagainya.

2. Kondisi Pasar

Pasar, sebagai kelompok pembeli atau pihak yang menjadi sasaran dalam penjualan, dapat pula mempengaruhi kegiatan penjualannya. Adapun faktor-faktor kondisi pasar yang perlu di perhatikan adalah:

a. Jenis pasarnya

b. Kelompok pembeli atau segmen pasarnya. c. Daya belinya.

d. Frekuensi pembelian. e. Keinginan dan kebutuhan. 3. Modal

Akan lebih sulit lagi bagi penjualan barangnya apabila barang yang dijual tersebut belum dikenal oleh calon pembeli atau apabila lokasi pembeli jauh dari tempat penjual. Dalam keadaan seperti ini, penjual harus memperkenalkan dulu membawa barannya ketempat pembeli. Untuk melaksanakan maksud tersebut diperlukan adanya sarana serta usaha, seperti: alat transport, tempat peragaan baik didalam perusahaan maupun di luar perusahaan, usaha promosi,

10

dan sebagainya. Semua ini hanya dapat dilakukan apabila penjualan memiliki sejumlah modal yang diperlukan untuk itu.

4. Kondisi Organisasi Perusahaan.

Pada perusahaan besar, biasanya masalah penjualan ini ditangani oleh bagian tersendiri (bagian penjualan) yang dipegang orang orang tertentu atau ahli dibidang penjualan.

5. Faktor lain

Faktor-faktor lain, seperti periklanan, peragaan, kampanye, pemberian hadiah, sering mempengaruhi penjualan. Namun untuk melaksanakannya, diperlukan sejumlah dana yang tidak sedikit, Bagi perusahaan yang bermodal kuat, kegiatan ini secara rutin dapat dilakukan. Sedangkan bagi perusahaan kecil yang mempunyai modal relatif kecil, kegiatan ini lebih jarang dilakukan.

Ada pengusaha yang berpegangan pada suatu prinsip bahwa “paling penting membuat barang yang baik”. Bilamana prinsi tersebut dilaksanakan, maka diharapkan pembeli akan kembali membeli lagi barang yang sama. Namun sebelum pembelian dilakukan, sering pembeli harus dirangsang daya tariknya, misalnya dengan memberikan bungkus yang menarik atau dengan cara promosi lainnya.

2.4 Toko Online

Menurut Sigit (2010), toko dapat diartikan sebagai pasar kecil, yang berisi kegiatan berupa transaksi jual beli antara pedagang dan pembeli. Seiring berjalannya waktu konsep toko selalu berkembang dari waktu ke waktu, mulai dari warung, pasar tradisional, toko kelontong, minimarket, supermarket,

perkotaan dan dengan semakin berkembangnya teknologi internet, maka aktivitas pergi belanja ke toko perlahan-lahan sudah mulai tergantikan dengan aktivitas belanja melalui dunia maya. Toko online merupakan sebuah konsep, ide atau gagasan tentang cara bertransaksi yang praktis dan mudah.

2.5 Konsep Dasar Website

Tidak dapat disangkal lagi bahwa kebutuhan informasi yang cepat, tepat dan murah saat ini sangat diperlukan. Hal ini mengingat tuntutan kinerja kita yang dituntut untuk dapat selalu bersaing dengan kompetitor kita. Website adalah suatu pilihan yang tepat karena mampu menghadirkan informasi dengan cepat, tepat serta tidak membutuhkan banyak biaya. Terminologi website adalah kumpulan dari halaman-halaman situs yang biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya berada didalam World Wide Web (WWW) di internet. Sebuah web page adalah dokumen yang ditulis dalam format HTML (Hyper Tex

Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu protokol

yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Semua publikasi dari website-website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar.

Halaman-halaman dari website akan bisa diakses melalui sebuag URL yang biasa disebut Homepage. URL ini mengatur halaman-halaman situs untuk menjadi sebuah hirarki, meskipun hyperlink-hyperlink yang ada di halaman tersebut mengatur para pembaca dan memberitahu mereka susunan keseluruhan dan bagaimana arus informasi ini berjalan.

12

2.6 Web

Menurut Shelly dan Vermalat (2010), Web adalah koleksi dokumen elektronik milik semua orang di dunia yang mengaksesnya melalui internet menggunakan web browser, Menurut simamarta (2010), Aplikasi web adalah sebuah sistem informasi yang mendukung interaksi pengguna melalui antarmuka berbasis web. Fitur-fitur aplikasi web biasanya berupa data persistence, mendukung transaksi dan komposisi halaman web dinamis yang dapat dipertimbangkan sebagai hibridasi, antara hipermedia dan sistem informasi. Aplikasi web adalah bagian dari client-side yang dapat dijalankan oleh browser

web. Client-side mempunyai tanggung jawab untuk pengeksekusian proses bisnis.

Interaksi web menurut Simamarta (2010), dibagi dalam tiga langkah utama, yaitu:

1. Permintaan

Pengguna mengirimkan permintaan ke server web,melalui halaman web yang ditampilkan pada browser web.

2. Pemrosesan

Server web menerima permintaan yang dikirimkan oleh pengguna, kemudian

memproses permintaan tersebut. 3. Jawaban

Browser menampilkan hasil dari permintaan pada jendela browser.

2.7 Basis Data

Menurut Nugroho (2004:4), Basis data (bahasa Inggris: database), atau sering pula dieja basis data, merupakan koleksi dari data-data yang teroganisir dengan rapi sehingga data dapat dengan mudah dimanipulasi (ditambah, diubah,

dihapus dan dicari). Sebenarnya database tidaklah harus berhubungan dengan komputer, catatan belanja seorang ibu rumah tangga juga merupakan database dalam bentuk yang sangat sederhana.

Salah Satu Tujuan dari database adalah memberikan pengguna suatu pandangan abstrak dari data, yaitu sistem menyembunyikan rincian bagaimana data disimpan dan dipelihara. Sistem database harus dibuat semudah mungkin untuk dimengerti karena kebanyakan pengguna sistem database adalah orang orang yang kurang tertatih dibidang teknologi komputer. Pengembang sistem database juga harus dapat menyembunyikan kompleksitas suatu sistem dengan menyediakan beberapa peringkat abstraksi. Beberapa peringkat abstraksi itu adalah:

1. Peringkat Fisik yaitu peringkat terendah dari suatu abstraksi yang mendeskripsikan bagaimana data sesungguhnya disimpan dalam media penyimpanan fisik, seperti harddisk, pita magnetik dan lain sebagainya. 2. Perangkat Logika yaitu peringkat yang mendeskripsikan data apa yang

disimpan di database dan hubungan apa yang ada diantara data-data tersebut. Perangkat logika menjelaskan database dengan struktur yang relatif sederhana, meskipun implementasinya mengandung struktur fisik yang kompleks.

3. Peringkat Pengguna yaitu peringkat yang paling tinggi dari abstraksi. Meskipun peringkat logika sudah cukup sederhana, namun pada database yang berukuran besar kompleksitas masih dijumpai karena banyaknya jenis data dan informasi yang tersimpan pada database. Kebanyakan pengguna tidak membutuhkan informasi itu, mereka kebanyakan mengakses bagian tertentu dari database.

14

2.8 Diagram Alir

Menurut Hartono (2001:795) diagram alir (flowchart) adalah diagram (chart) yang menunjukan alir (flow) didalam sistem atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi. Ada lima macam diagram alir yaitu:

1. Diagram alir sistem (system flowchart). 2. Diagram alir dokumen (documents flowchart). 3. Diagram alir skematik (schematic flowchart). 4. Diagram alir program (program flowchart) 5. Diagram alir flowchart (process flowchart)

2.9 Data Flow Diagram

Menurut Hartono (2001:699) data flow diagram adalah diagram yang menggunakan suatu notasi untuk menggambarkan arus data dari suatu sistem.

Data flow diagram sering digunakan untuk menggambarkan sistem yang telah ada

atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik, dimana data tersebut mengalir. Data flow

diagram juga digunakan untuk menggambarkan sistem tanpa mempertimbangkan

lingkungan fisik dimana data tersebut disimpan. Data flow diagram merupakan alat yang digunakan pada metodologi pengembangan sistem yang terstruktur (structure analysis and design).

2.10 PHP Hypertext Preprocessor

Menurut dokumen resmi PHP, PHP merupakan singkatan dari PHP

dalam server dan diproses di server. Hasilnyalah yang dikirimkan ke klien tempat pemakai menggunakan browser.

Secara khusus PHP dirancang untuk membentuk aplikasi web dinamis. Artinya, ia dapat membentuk suatu tampilan berdasarkan perintaan terkini. Misalnya, bisa menampilkan isi database ke halaman web. Pada prinsipnya PHP mempunyai fungsi yang sama dengan skrip-skrip seperti ASP (Active Server

Page), Cold Fusion, ataupun Pearl. Namun, perlu diketahui bahwa PHP

sebenarnya bisa dipakai secara command line. Artinya, skrip PHP dapat dijalankan tanpa melibatkan web server maupun browser.

Pada awalnya, PHP dirancang untuk diintegrasikan dengan web server

Apache. Namun, belakangan PHP juga dapat bekerja dengan web server seperti

PWS (Personal Web Server), IIS (Internet Information Server), dan Xitami. Untuk mencoba PHP tidak perlu menggunakan komputer berkelas server. Hanya dengan sebuah komputer biasa bisa mempelajari dan mempraktikkan PHP.

PHP bersifat bebas dipakai. Tidak perlu membayar apa pun untuk menggunakan perangkat lunak ini alias free. Untuk dapat mendownloadnya melalui situs http://www.php.net. PHP tersedia dalam bentuk kode biner maupun kode sumber yang lengkap.

2.11 Responsive Web Design

Responsive web design adalah pendekatan desain web yang dapat

beradaptasi dengan masalah pada web browser dan perangkat keras yang menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna (Marcotte, 2011: 9). Google perusahaan yang bergerak di bidang teknologi dan mesin pencarian informasi di internet dalam portal Google Developer mengenai

16

“Building Mobile-Optimized Websites” merekomendasikan langsung responsive

web design bagi pengembang website untuk dapat melayani kebutuhan para

pengguna agar optimal pada setiap jenis perangkat desktop maupun mobile.

Responsive web design memiliki satu aspek dimana hanya diperlukan satu website

untuk berbagai perangkat dan tetap memberikan user-experience yang baik.

2.12 Framework Responsive Web Design (ZURB Foundation)

Framework adalah kumpulan perintah atau fungsi dasar yang membentuk

aturan-aturan tertentu dan saling berinteraksi satu sama lain sehingga dalam pembuatan aplikasi website, kita harus mengikuti aturan dari framework tersebut (Wardana, 2010: 3).

Dalam pemrograman tampilan website dengan teknologi responsive web

design, telah dikembangkan yaitu Zurb Foundation yang dikembangkan oleh

Zurb, Bootstrap yang dikembangkan oleh Twitter Inc., Skeleton dan lainnya. Sebuah framework selain menyediakan lingkungan pengembangan sendiri juga menyediakan berbagai macam fungsi siap pakai yang bisa digunakan dalam pembuatan sebuah tampilan website.

Zurb Fondation adalah framework pembuatan responsive web design

open source untuk pengembangan front-end yang dikembangkan oleh ZURB.

ZURB adalah perusahaan desain yang fokus kebidang desain interaksi berlokasi di Campbell, California, Amerika Serikat. ZURB Foundation berisi template desain HTML dan CSS berbasis tipografi, bentuk, logo, tombol, navigasi, dan komponen antarmuka lainnya, serta opsional pelengkap tambahan JavaScript. ZURB Foundation framework meraih tempat ke-16 sebagai proyek terpopuler di

GitHub, sebuah forum sosial para pengembang aplikasi, website, dan perangkat lunak.

Zurb Foundation pertama kali rilis pada september 2011, pada Oktober 2011 Zurb merilis Foundation 2.0 sebagai open-responsive web design framework dibawah lisensi dari Massachusetts Institute of Technology.

18

BAB III

ANALISIS DAN PERANCANGAN SISTEM

Pada bab ini akan dibahas tentang analisis dan perancangan aplikasi dalam Rancang Bangun Aplikasi Penjualan Online pada CV. Mitra Techno Sains. Dalam melakukan identifikasi dan analisis permasalahan menggunakan teknik wawancara dan observasi yang dilakukan di perusahaan. Adapun hasil dari identifikasi dan analisis sebagai berikut.

3.1 Identifikasi dan Analisis Permasalahan

CV. Mitra Techno Sains adalah perusahaan dagang yang menjual berbagai macam sabun dan silicone oil. CV. Mitra Techno Sains terletak di Pondok Wiguna Regency V no. 25 Gunung Anyar Surabaya. Perusahaan tersebut menawarkan berbagai macam sabun dan silicone oil diantaranya sabun cuci mobil rainbow, sabun cuci tangan, detergent cair, detergent bubuk, karbol, Silicone oil dan lain sebagainya.

Dari data hasil wawancara, customer CV. Mitra Techno Sains berjumlah 114 customer. Customer terbanyak CV. Mitra Techno Sains yaitu 97 orang

Customer (85,09%) berasal dari Surabaya, 10 orang customer (8,77%) berasal

dari Sidoarjo, 6 orang customer (5,27%) berasal dari daerah lain di sekitar Surabaya, dan 1 orang customer (0,87%) dari luar pulau Jawa. Dari data tersebut dapat disimpulkan bahwa dengan kantor yang berada di Surabaya CV. Mitra Techno Sains belum cukup untuk menjangkau konsumen-konsumen yang berada di luar daerah maupun di luar pulau. Kesulitan customer untuk memperoleh informasi mengenai data harga dan barang yang paling baru merupakan salah satu

kendala yang dihadapi selama penggunaan sistem konvensional seperti yang diterapkan oleh CV. Mitra Techno Sains.

3.2 Perancangan Sistem

Perancangan sistem adalah proses menyusun atau mengembangkan sistem atau aplikasi yang baru. Dalam tahap ini harus dapat dipastikan bahwa semua persyaratan untuk menghasilkan sistem atau aplikasi yang baru dapat dipenuhi. Hasil sistem atau aplikasi yang dirancang harus sesuai dengan kebutuhan pemakai untuk mendapatkan sebuah informasi yang diinginkan.

Dari hasil identifikasi dan analisis untuk membantu CV. Mitra Techno Sains menyelesaikan permasalahan yang ada yaitu sistem pemasaran CV. Mitra Techno Sains belum cukup untuk menjangkau konsumen-konsumen yang berada di luar daerah maupun di luar pulau. Kesulitan customer untuk memperoleh informasi mengenai data harga dan barang yang paling baru merupakan salah satu kendala yang dihadapi selama penggunaan sistem konvensional seperti yang diterapkan oleh CV. Mitra Techno Sains. Kesulitan customer untuk memperoleh informasi mengenai data harga dan barang yang paling baru merupakan salah satu kendala yang dihadapi selama penggunaan sistem konvensional. Untuk dapat melihat informasi mengenai data harga dan barang terbaru yang dibutuhkan,

customer harus datang ke kantor, menelpon atau mengirim email. Jika customer

harus datang ke kantor, menyebabkan banyak waktu terbuang yang dibutuhkan

customer untuk memperoleh informasi maupun untuk membeli barang. Jika

melalui telepon atau email maka akan menyebabkan kurangnya efisiensi karena perusahaan harus menjawab semua telepon customer yang masuk. Selain itu akan ada biaya yang dikeluarkan di sisi customer untuk menelpon. Kendala seperti ini

20

akan berdampak pada berkurangnya niat customer untuk melakukan transaksi. Maka perlu dibuatkan rancang bangun aplikasi penjualan online pada CV. Mitra Techno Sains sehingga daerh pemasaran CV. Mitra Techno Sains dapat lebih diperluas sehingga dapat menjangkau daerah-daerah yang ada di luar daerah maupun di luar pulau. Untuk membantu pembuatan sistem tersebut maka diperlukan langkah-langkah sebagai berikut:

1. Menganalisis Kebutuhan Sistem.

2. Mendesain Sistem (System Flow, Context Diagram, Jenjang Proses (HIPO),

Data Flow Diagram (DFD), ERD, struktur tabel desain I/O (input-output), desain Interface).

3.2.1 Menganalisis Kebutuhan Sistem

Sebelum melakukan desain sistem yang akan dibuat, maka langkah yang pertama kali dilakukan yaitu menganalisis kebutuhan sistem. Di dalam tahapan analisis ini berisikan proses identifikasi data transaksi penjualan di CV. Mitra Techno Sains. Proses identifikasi ini meliputi data-data yang akan diolah, kebutuhan dari solusi permasalahan, dan informasi yang akan dihasilkan dan disajikan.

Dari data transaksi penjualan dan data customer di CV. Mitra Techno Sains selanjutnya mengidentifikasi data-data tersebut agar dapat dirumuskan solusi-solusi yang ditawarkan untuk mengatasi permasalahan yang ada. Dari perumusan tersebut, kemudian menggambarkan terlebih dahulu output yang akan dihasilkan dari solusi.

Setelah gambaran singkat solusi diberikan kepada owner perusahaan CV. Mitra Techno Sains, maka langkah selanjutnya yaitu dengan dengan mendesain

sistem dari Document Flow, System Flow, Context Diagram, Data Flow Diagram (DFD), ERD, Struktur Tabel Desain I/O (input-output), Desain Interface.

3.2.2 Desain Sistem

Pada perancangan aplikasi yaitu rancang bangun aplikasi penjualan

online di CV. Mitra Techno Sains ini memiliki beberapa sub desain yaitu Document Flow, System Flow, Context Diagram, Data Flow Diagram (DFD),

ERD, Struktur Tabel Desain I/O (input-output), Desain Interface.

3.3 Document flow

Pada document flow ini terdapat gambaran document flow sistem penjualan tunai yang terdapat pada CV. Mitra Techno Sains.

3.3.1 Document Flow Sistem Penjualan

Untuk document flow sistem penjualan berisi data-data transaksi penjualan secara tunai di CV. Mitra Techno Sains. Sistem penjualan tunai di CV. Mitra Techno Sains dimulai dari customer meminta barang yang akan dibeli. Kemudian karyawan memeriksa ketersediaan barang. Jika barang yang diminta ada maka customer langsung melakukan pembayaran, jika barang yang diminta tidak tersedia, karyawan memberikan penawaran barang lain yang tersedia. Apabila penawaran diterima, customer langsung melakukan pembayaran. Untuk laporan penjualan ke admin perusahaan karyawan membuat suatu laporan keuangan dari hasil pengumpulan data nota pembayaran. Gambar document flow sistem penjualan bisa dilihat pada gambar 3.1.

22

Document Flow

Transaksi Penjualan

Customer Admin Lu n ix C h e m ica ls Mulai Meminta Barang yang akan dibeli

Mengecek Ketersediaan

barang

Menawarkan Barang Lain barang ada? Beli barang lain? Tidak Melakukan Pembayaran Selesai Tidak Ya Nota Pembayaran Ya Membuat Nota Pembayaran Nota Pembayaran Membuat Laporan Penjualan Laporan Penjualan

3.4 System flow

Perancangan desain sistem yang akan menjadi solusi meliputi System

Flow Transaksi Penjualan, System Flow Transaksi Daftar Member, System Flow Maintenance Barang, dan System Flow Menampilkan Laporan:

3.4.1 System Flow Transaksi Penjualan

Pada system flow transaksi penjualan ini merupakan alur proses transaksi penjualan yang terjadi di perusahaan setelah adanya rancang bangun aplikasi penjualan online. Adapun proses yang ada pada sistem ini dimulai ketika

customer melakukan login ke dalam sistem dengan menggunakan username dan password customer, jika username dan password benar maka customer akan

melihat katalog barang, kemudian memilih barang yang akan dibeli dan memasukannya kedalam cart. Sistem akan mengecek ketersediaan barang, jika barang tidak tersedia maka customer masih dapat memilih barang lain yang mungkin ingin dibeli, jika barang tersedia maka customer melanjutkannya ke keranjang belanja dan mengisi alamat tujuan pengiriman. Sistem akan mengemail untuk memberikan peringatan untuk segera melakukan pembayaran dan melakukan konfirmasi pembayaran. Ketika customer melakukan konfirmasi pembayaran, admin akan mengecek apakah data yang di masukan telah sesuai dengan data transfer. Jika salah maka admin akan mengkonfirmasi, kemudian sistem akan mengirim email untuk memberitahukan bahwa data konfirmasi pembayaran yang dilakukan salah, jika sesuai, maka admin akan mengkonfirmasi dengan mengubah status barang dari unpaid menjadi berstatus paid kemudian sistem akan mengirimkan email konfirmasi berupa invoice dank kode tracking. Adapun proses sistem dapat dilihat di gambar 3.2.

24

System Flow Transaksi Penjualan

Customer Sistem Lu n ix C h e m ica ls Mulai Selesai Data Customer

dan Data barang yang akan dibeli

Login data Customer Sesuai? Tidak Melihat katalog Barang dan memasukan barang yang akan

dibeli kedalam cart Ya Barang tersedia? Tidak Me lihat Keranjang Belanja, mengisi tujuan pengiriman Mengirim email pemberitahuan konfirmasi Pembayaran Konfirmasi Pembayaran

Me ngirim Invoice Penjualan dan Kode Tracking Data Transfer Rekening Mengecek Konfirmasi Pembayaran Betul Me ngirim Email

pemberitahuan konfirmasi pembayaran salah Salah Customer Barang

3.4.2 System Flow Transaksi Daftar Member

Pada system flow transaksi daftar member ini merupakan alur proses transaksi daftar member yang terjadi di perusahaan setelah adanya rancang bangun aplikasi penjualan online. Adapun proses yang ada pada sistem ini dimulai ketika customer datang kemudian memilih menu sign up atau daftar member kemudian memasukan data customer. Sistem akan mengecek apakah data

customer sudah terdaftar sebelumnya, kemudian jika customer sudah terdaftar

sebelumnya maka sistem akan memberi tahu bawa data customer sudah terdaftar sebelumya, jika tidak maka sistem akan menyimpan data customer tersebut dengan status belum dikonfirmasi. Agar customer dapat membeli atau memesan barang maka status customer tersebut harus dalam keadaan sudah mengkonfirmasi email. Sistem akan mengirim email agar customer dapat melakukan aktifasi melalui email yang didaftarkan, sehingga status customer tersebut menjadi telah di konfirmasi, dan dapat melakukan pemesanan maupun pembelian. Adapun proses sistem dapat dilihat di gambar 3.3.

26

System Flow Daftar Member

Customer

Sistem

Lu

n

ix

C

h

e

m

ica

ls

Mulai

Data Customer

Mengecek data Customer

Mengirim email konfirmasi Melakukan

Konfirmasi email

selesai

Update status Customer

menjadi Customer status sudah konfirmasi

Klik linkemail

Customer Sudah terdaftar sebelumnya?

Menyimpan data Customer dengan status belum

konfirmasi Tidak

Ya

Customer

3.4.3 System Flow Transaksi Maintenance Barang

Pada system flow transaksi pencatatan maintenance barang ini merupakan alur proses pengolahan data barang yang terjadi di perusahaan setelah adanya rancang bangun aplikasi penjualan online. Pada system flow transaksi

maintenance barang ini proses dimulai dari admin melakukan input data barang

lalu sistem akan melakukan proses simpan perubahan data barang kepada

database barang Adapun proses sistem dapat dilihat di gambar 3.4.

System Flow Maintenance Barang

Admin

Sistem

Lu

n

ix

Ch

e

m

ica

ls

Mulai Login Halaman Pengolahan Data Barang

Input Data Barang Simpan Perubahan Data Barang Selesai Barang

28

3.4.4 System Flow Menampilkan Laporan

Pada system flow transaksi menampilkan laporan ini merupakan alur proses menampilkan laporan yang terjadi di perusahaan setelah adanya rancang bangun aplikasi penjualan online. Pada system flow menampilkan laporan ini proses dimulai saat admin login dan membuka halaman data pengolahan barang dan memilih laporan yang ingin ditampilkan, sistem akan menampilkan laporan sesuai dengan yang dipilih oleh admin. Adapun proses sistem dapat dilihat di gambar 3.5.

System Flow Menampilkan Laporan

Admin Sistem Lu n ix C h e m ica ls Mulai Halaman Pengolahan Data Barang Login

Me milih Menu Laporan yang ingin dilihat Me nampilkan Laporan Penjualan Me nampilkan Laporan Barang Me nampilkan Laporan Customer Tampilan laporan yang dipilih Selesai Pemesanan Barang Customer

3.5 Context Diagram

Setelah perancangan desain system flow dilakukan, langkah selanjutnya yaitu merancang desain sebuah sistem pembuatan Data Flow Diagram (DFD) yang merupakan gambaran arus data dari sistem secara terstruktur dan jelas, sehingga dapat menjadi sarana dokumentasi yang baik DFD merupakan diagram yang menggunakan notasi-notasi untuk menggambarkan arus data dari sistem secara logika. Keuntungan menggunakan DFD adalah memudahkan pemakai untuk mengerti sistem yang dikembangkan. Penggambaran alur sistem dilakukan dengan membagi sistem yang kompleks menjadi sistem yang lebih sederhana dan mudah dimengerti.

Pada context diagram menggambarkan entity yang berhubungan langsung dengan sistem dan aliran data secara umum. Pada Rancang Bangun Aplikasi Penjualan Online pada CV. Mitra Techno Sains terdapat 2 entity yaitu

admin dan customer dimana customer akan memberikan input data seperti data customer baru, daftar pemesanan dan daftar pembayaran transfer kemudian sistem

akan memproses dan akan menghasilkan output berupa laporan customer paling banyak membeli, laporan barang paling laris dan laporan penjualan. Sedangkan proses-proses yang lebih detail yang terdapat dalam sistem masih belum bisa diketahui. Desain dari context diagram analisis dan perancangan sistem ini dapat dijelaskan pada gambar 3.6.

30

laporan penjualan laporan barang paling laris laporan custom er paling banyak m embeli

update data customer update daftar pem esanan update pembayaran transfer

update data barang data barang baru daftar barang kirim

data customer baru

laporan pengiriman laporan pem bayaran pembayaran transfer

daftar pemesanan daftar status barang custom er

daftar bayar customer 0

Aplikasi Penjualan Online pada CV Mitra Technosains

+ Admin

Custom er

Gambar 3.6 Context Diagram

3.6 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) merupakan gambaran proses yang lebih

mendetil dari context diagram. Karena DFD merupakan hasil dari proses

decompose context diagram. Penggambaran alur sistem dilakukan dengan

membagi sistem yang kompleks menjadi sub-sub sistem yang lebih sederhana dan mudah dimengerti. Adapun symbol-simbol yang digunakan dalam DFD adalah sebagai berikut:

1. Process adalah kegiatan yang dilakukan oleh orang. Mesin atau computer dari

suatu arus data yang masuk kedalam proses untuk dihasilkan arus data yang akan keluar dari proses.

2. External Entity merupakan kesatuan di lingkungan luar sistem yang dapat

berupa orang, organisasi atau sistem lainnya yang berada di lingkungan luarnya yang akan memberikan input atau menerima output dari sistem.

3. Data Store sebagai penyimpanan data

4. Data Flow menggambarkan aliran data yang dapat berupa masukan untuk

sistem atau hasil dari proses sistem.

Data Flow Diagram (DFD) dari sistem penjualan genset berbasis web

3.6.1 DFD level 0 Sistem Penjualan Online

DFD level 0 merupakan turunan (break down) dari context diagram. Proses rancang bangun aplikasi penjualan online dibagi menjadi beberapa sub proses. yaitu proses transaksi, maintenance, dan laporan. Proses-proses yang ada di data flow diagram level 0 sudah berinteraksi dengan data store. Data store tersebut adalah data store pembayaran, data store barang, data store pemesanan, dan data store customer. DFD level 0 dari sistem penjualan online dapat dilihat dalam gambar 3.7.

laporan penjualan laporan custom er paling banyak mem beli

laporan barang paling laris

update data customer update pembayaran transfer

update data barang data barang baru

update daftar pemesanan data barang

pembayaran custom er keluar

pemesanan custom er keluar

data customer keluar daftar barang kirim

data kirim custom er

data barang kirim

data customer in

data customer out

laporan custom er data customer masuk

data pemesanan out data pemesanan in

data barang out data barang in

pemesanan custom er

laporan pem esanan data laporan barang

data pembayaran custom er pembayaran custom er masuk

pembayaran custom er in pembayaran custom er out

daftar status barang custom er daftar bayar customer

laporan pengiriman

laporan pem bayaran pembayaran transfer

daftar pemesanan data customer baru

Admin Custom er 1 Transaksi + 2 Maintenance + 3 Laporan + 2 Pembayaran 3 Baran9 4 Pemesanan 5 Custom er

32

3.6.2 DFD level 1 Transaksi

Rancang bangun aplikasi penjualan online di DFD level 1 transaksi yang mempunyai 3 proses. Proses data pribadi customer, pemesanan customer, dan pengiriman barang dapat dilihat dalam gambar 3.8.

[data barang] data barang

pembayaran custom er keluar

pemesanan custom er keluar data customer keluar

daftar barang kirim data kirim custom er

data barang kirim pemesanan custom er

data customer masuk

daftar status barang custom er daftar bayar customer

pembayaran transfer daftar pemesanan

pembayaran custom er masuk data customer baru

Custom er

Admin 2 Pembayaran

3 Baran9

4 Pemesanan 5 Custom er

1 Data Pribadi Custom er 2 Pemesanan Custom er + 3 Pengirim an Barang

Gambar 3.8 DFD Level 1 Transaksi

3.6.3 DFD level 1 Maintenance

Rancang bangun aplikasi penjualan online di DFD level 1 maintenance yang mempunyai 4 proses. Proses maintenance data pembayaran, maintenance data barang, maintenance data pemesanan dan maintenance data customer dapat dilihat dalam gambar 3.9.

update pembayaran transfer

update data customer

pembayaran custom er in pembayaran custom er out

data barang out

data customer out data pemesanan in data barang baru

update daftar pem esanan

data barang in update data barang

2 Pembayaran

3 Baran9

4 Pemesanan

5 Custom er Custom er Admin 1 Maintenance Data Pembayaran 2 Maintenance Data Produk 3 Maintenance Data Pemesanan 4 Maintenance Data Customer

Gambar 3.9 DFD Level 1 Maintenance

3.6.4 DFD level 1 Laporan

Rancang bangun aplikasi penjualan online di DFD level 1 laporan yang mempunyai 5 proses. Proses menampilkan laporan pembayaran, menampilkan laporan pengiriman, menampilkan laporan penjualan, menampilkan laporan barang dan menampilkan laporan customer dapat dilihat dalam gambar di bawah ini:

laporan penjualan

laporan barang paling laris

laporan custom er paling banyak mem beli laporan pem esanan

data pembayaran custom er data pembayaran custom er

laporan pengiriman laporan pem bayaran

data pembayaran custom er

laporan pem esanan

data pembayaran custom er

laporan custom er data laporan barang data pembayaran custom er

Custom er

2 Pembayaran

3 Baran9

4 Pemesanan

5 Custom er

3 Menampilkan Laporan Penjualan 4 Menampilkan Laporan Barang 5 Menampilkan Laporan Custom er 1 Menampilkan Laporan Pembayaran 2 Menampilkan Laporan Pengirim an Admin

34

3.7 Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) adalah suatu desain sistem yang

digunakan untuk merepresentasikan, menentukan dan mendokumentasikan kebutuhan-kebutuhan untuk sistem pemrosesan database. Pada gambar berikut akan dijelaskan relasi-relasi atau hubungan antar tabel rancang bangun aplikasi penjualan online di CV. Mitra Techno Sains dalam bentuk conceptual data model (CDM) dan physical data model (PDM).

3.7.1 Conceptual Data Model (CDM)

Sebuah Conceptual Data Model (CDM) menggambarkan secara keseluruhan konsep struktur basis data yang dirancang untuk suatu aplikasi. Pada

Conceptual Data Model (CDM) yang telah dirancang terdapat 9 tabel yang saling

terhubung yaitu tabel customer, barang, provinsi, kota, paket, kategori, gambar,

order dan konfirmasi pembayaran. Pada Conceptual Data Model (CDM) ini juga

terdapat 2 tabel yang mempunyai relasi many to many. Yaitu tabel order dengan tabel barang dan tabel customer dengan tabel barang seperti terlihat pada gambar 3.11.

Gambar 3.11 Conceptual Data Model (CDM)

Detil Order

Melakuk an Wis hlis t

mem iliki Memiliki Memiliki Melakuk an Memilih Mempunyai Mempunyai

Cus tom er Email

Nama Cus tomer Us er Nam e Pas s word Jenis Kelamin Hak Ak s es Alamat Telepon Status Konfirm Cus tom er Created Cus tom er Modified Provins i

ID Provins i Nama Provins i Kota ID Kota Nama Kota Paket ID Paket Nama Paket ETD Harga Barang ID Barang Nama Barang Des krips i QTY Berat Harga Beli Harga Jual Barang Created Barang Modified Kategori ID_Kategori Nama Kategori Order ID Order Alamat Tujuan Nama Penerim a Catatan

Total Harga Tanggal Order Batas Pembayaran Kode Trans fer No Res i Status Order Gambar

ID_Gambar Nama File

Konfirm as i Pembayaran ID Konfirm as i

Bank No Rekening Pemilik Rek ening Jum lah Trans fer Kode Trans fer Tanggal Trans fer

3.7.2 Physical Data Model (PDM)

Sebuah Physical Data Model (PDM) menggambarkan secara detail konsep rancangan struktur basis data yang dircancang untuk suatu program aplikasi. PDM merupakan hasil generate dari CDM. Pada PDM tergambar jelas tabel-tabel penyusun basis data beserta kolom-kolom yang terdapat pada setiap tabel. Pada Physical Data Model (PDM) setelah degenerate dari Conceptual Data

Model (CDM) menghasilkan 2 tabel baru dari relasi many to many yaitu tabel wishlist, dan tabel detil_order sebagaimana terlihat pada gambar 3.12.

Gambar 3.12 Physical Data Model (PDM) ID_BARANG = ID_BARANG

ID_ORDER = ID_ORDER

EMAIL = EMAIL

ID_BARANG = ID_BARANG EMAIL = EMAIL

ID_KONFIRMASI = ID_KONFIRMASI ID_ORDER = ID_ORDER ID_KATEGORI = ID_KATEGORI

ID_BARANG = ID_BARANG

EMAIL = EMAIL EMAIL = EMAIL

ID_PROVINSI = ID_PROVINSI

CUSTOMER EMAIL VARCHAR(50) NAMA_CUSTOMER VARCHAR(50) USER_NAME VARCHAR(25) PASSWORD VARCHAR(25) JENIS_KELAMIN VARCHAR(50) HAK_AKSES INTEGER ALAMAT VARCHAR(300) TELEPON VARCHAR(25) STATUS_KONFIRM INTEGER CUSTOMER_CREATEDS DATE CUSTOMER_MODIFIED DATE PROVINSI ID_PROVINSI VARCHAR(25) EMAIL VARCHAR(50) NAMA_PROVINSI VARCHAR(25) KOTA ID_PROVINSI VARCHAR(25) ID_KOTA VARCHAR(25) NAMA_KOTA VARCHAR(25) PAKET ID_PAKET VARCHAR(25) NAMA_PAKET VARCHAR(25) ETD VARCHAR(25) HARGA NUMERIC(25) BARANG ID_BARANG VARCHAR(25) ID_KATEGORI VARCHAR(25) NAMA_BARANG VARCHAR(25) DESKRIPSI LONG VARBINARY

QTY INTEGER BERAT INTEGER HARGA_BELI NUMERIC(25) HARGA_JUAL NUMERIC(25) BARANG_CREATED DATE BARANG_MODIFIED DATE KATEGORI ID_KATEGORI VARCHAR(25) NAMA_KATEGORI VARCHAR(25) ORDER ID_ORDER VARCHAR(25) EMAIL VARCHAR(50) ID_KONFIRMASI VARCHAR(25) ALAMAT_TUJ UAN LONG VARCHAR NAMA_PENERIMA VARCHAR(25)

CATATAN LONG VARCHAR

TOTAL_HARGA INT TANGGAL_ORDER DATE BATAS_PEMBAYARAN DATE KODE_TRANS INTEGER NO_RESI INTEGER STATUS_ORDER ENUM GAMBAR ID_GAMBAR VARCHAR(25) ID_BARANG VARCHAR(25) NAMA_FILE LONG VARBINARY

KONFIRMASI_PEMBAYARAN ID_KONFIRMASI VARCHAR(25) ID_ORDER VARCHAR(25) EMAIL VARCHAR(50) BANK VARCHAR(25) NO_REKENING VARCHAR(25) PEMILIK_REKENING VARCHAR(25) JUMLAH_TRANSFER NUMERIC(25) KODE_TRANSFER VARCHAR(25) TANGGAL_TRANSFER DATE WISHLIST EMAIL VARCHAR(50) ID_BARANG VARCHAR(25) DETIL_ORDER ID_ORDER VARCHAR(25) ID_BARANG VARCHAR(25) SUB_TOTAL INT 37

38

3.8 Struktur Tabel

Rancang bangun aplikasi penjualan online pada CV. Mitra Techno Sains ini terdapat 12 (dua belas) table. Tabel – table tersebut memiliki struktur tabel yang saling terintegrasi dan memberikan informasi yang cukup lengkap bagi pengguna sistem. Berikut penjelasan struktur tabel dari tiap tabel:

1. Tabel Barang

Primary Key : ID_BARANG Foreign Key : ID_KATEGORI

Fungsi : Untuk menyimpan dan melihat data nama barang Tabel 3.1 Tabel Barang

Field Type Data Length Constraint

ID_BARANG VARCHAR 25 primary key

ID_KATEGORI VARCHAR 25 Foreign key

NAMA_BARANG VARCHAR 25 -

DESKRIPSI LONG VARCHAR - -

QTY INTEGER - -

BERAT INTEGER - -

HARGA_BELI INTEGER - -

HARGA_JUAL INTEGER - -

BARANG_CREATED DATE - -

2. Tabel Kategori

Primary Key : ID_KATEGORI Foreign Key :

Fungsi : Untuk menyimpan dan melihat data kategori barang

Tabel 3.2 Tabel Kategori

Field Type Data Length Constraint

ID_KATEGORI VARCHAR 25 primary key

NAMA_KATEGORI VARCHAR 25 -

3. Tabel Gambar

Primary Key : ID_GAMBAR Foreign Key : ID_BARANG

Fungsi : Untuk menyimpan dan melihat data gambar Tabel 3.3 Tabel Data Gambar

Field Type Data Length Constraint

ID_GAMBAR VARCHAR 10 primary key

ID_BARANG VARCHAR 100 Foreign key

40

4. Tabel Provinsi

Primary Key : ID_PROVINSI Foreign Key : EMAIL

Fungsi : Untuk menyimpan dan melihat data provinsi Tabel 3.4 Tabel Provinsi

Field Type Data Length Constraint

ID_PROVINSI VARCHAR 25 primary key

EMAIL VARCHAR 50 foreign key

NAMA_PROVINSI VARCHAR 25 -

5. Tabel Kota

Primary Key : ID_KOTA Foreign Key : ID_PROVINSI

Fungsi : Untuk melihat data kota Tabel 3.5 Tabel Kota

Field Type Data Length Constraint

ID_KOTA VARCHAR - primary key

ID_PROVINSI VARCHAR - foreign key

6. Tabel Paket

Primary Key : ID_PAKET Foreign Key : ID_KOTA

Fungsi : Untuk menyimpan dan melihat data paket pengiriman Tabel 3.6 Tabel Paket

Field Type Data Length Constraint

ID_PAKET VARCHAR 25 primary key

NAMA_PAKET VARCHAR 25 -

ETD VARCHAR 25 -

HARGA INTEGER - -

7. Tabel Wishlist

Foreign Key : EMAIL Foreign Key : ID_BARANG

Fungsi : Untuk menyimpan dan melihat data wishlist Tabel 3.7 Tabel Wishlist

Field Type Data Length Constraint

EMAIL VARCHAR 50 foreign key

42

8. Tabel Detil Order Primary Key : -

Foreign Key : ID_ORDER Foreign Key : ID_BARANG

Fungsi : Untuk menyimpan dan melihat data detil order Tabel 3.8 Tabel Detil Order

Field Type Data Length Constraint

ID_ORDER VARCHAR 25 foreign key

ID_BARANG VARCHAR 25 foreign key

SUB_TOTAL INTEGER - -

9. Tabel Order

Primary Key : ID_ORDER Foreign Key : EMAIL

Foreign Key : ID_KONFIRMASI

Fungsi : Untuk menyimpan dan melihat data Order Tabel 3.9 Tabel Order

Field Type Data Length Constraint

ID_ORDER VARCHAR 25 primary

key

EMAIL VARCHAR 50 foreign key

ID_KONFIRMASI VARCHAR 25 foreign key

ALAMAT_TUJUAN LONG_VARCHAR - -

NAMA_PENERIMA VARCHAR 25 -

CATATAN LONG_VARCHAR - -

Field Type Data Length Constraint

TANGGAL_ORDER DATE - -

BATAS_PEMBAYARAN DATE - -

KODE_TRANS INTEGER - -

NO_RESI INTEGER - -

STATUS_ORDER ENUM - -

10.Tabel Customer

Primary Key : EMAIL Foreign Key : -

Fungsi : Untuk menyimpan dan melihat data customer Tabel 3.10 Tabel Customer

Field Type Data Length Constraint

EMAIL VARCHAR 50 primary key

NAMA_CUSTOMER VARCHAR 50 -

USER_NAME VARCHAR 25 -

PASSWORD VARCHAR 25 -

JENIS_KELAMIN VARCHAR 25 -

HAK_AKSES INTEGER - -

ALAMAT VARCHAR 300 -

TELEPON VARCHAR 25 -

STATUS KONFIRM INTEGER - -

CUSTOMER_CREATED DATETIME - -

44

11.Tabel Konfirmasi Pembayaran Primary Key : ID_KONFIRMASI Foreign Key : ID_ORDER

Foreign Key : EMAIL

Fungsi : Untuk menyimpan konfirmasi pembayaran Tabel 3.11 Tabel Konfirmasi Pembayaran

Field Type Data Length Constraint

ID_KONFIRMASI VARCHAR 25 primary key

ID_ORDER VARCHAR 25 foreign key

EMAIL VARCHAR 50 foreign key

BANK VARCHAR 25

NOMOR_REKENING VARCHAR 25 PEMILIK_REKENING VARCHAR 25 JUMLAH_TRANSFER INTEGER

KODE_TRANSFER VARCHAR 25

3.9 Desain I/O

Pada Rancang Bangun Aplikasi Penjualan Online pada CV. Mitra Techno Sains. Pembuatan desain I/O merupakan rancangan desain input dan output yang akan digunakan sebagai gambaran sistem. Adapun desain I/O yang ada sebagai berikut:

3.9.1 Desain I/O Tampilan Login

Rancangan desain I/O berikut merupakan tampilan login. Pada tampilan

login berisi text box user name dan password yang harus diisi oleh calon pengguna.

Adapun desain I/O dapat dilihat pada gambar 3.12.

46

3.9.2 Desain I/O Tampilan Halaman Utama

Rancangan desain I/O untuk halaman utama. Pada tampilan halaman utama ini berisi menu-menu yang digunakan dalam menjalankan proses bisnis perusahaan. Adapun desain I/O dapat dilihat pada gambar 3.14.

3.9.3 Desain I/O Tampilan Daftar Customer

Rancangan desain I/O berikut merupakan tampilan halaman pendaftaran

customer. Pada tampilan daftar customer ini berisi text box email, nama lengkap, username, password, alamat, dan nomor telepon yang harus diisi oleh customer bagi

calon customer baru. Selain text box pada tampilan input data customer juga terdapat

radio button jenis kelamin, combo box tanggal lahir, provinsi, dan kota. Adapun

desain I/O dapat dilihat pada gambar 3.15.

48

3.9.4 Desain I/O Tampilan Produk

Rancangan desain I/O berikut merupakan tampilan Produk. Pada tampilan Produk ini berisi gambar, nama barang dan stok. Adapun desain I/O dapat dilihat pada gambar 3.16.

3.9.5 Desain I/O Tampilan About Us

Rancangan desain I/O berikut merupakan tampilan About Us. Pada tampilan

About Us ini berisi tentang deskripsi perusahaan. Adapun desain I/O dapat dilihat

pada gambar 3.17.

50

3.9.6 Desain I/O Tampilan Contact Us

Rancangan desain I/O berikut merupakan tampilan Contact Us. Pada tampilan Contact Us ini berisi tentang informasi kontak dari CV. Mitra Techno Sains. Adapun desain I/O dapat dilihat pada gambar 3.18.

3.9.7 Desain I/O Tampilan Keranjang Belanja

Rancangan desain I/O berikut merupakan tampilan keranjang belanja. Pada tampilan keranjang belanja ini berisi detail produk yang akan dibeli dan nama penerima serta alamat penerima yang harus diisi untuk melakukan pembelian barang. Adapun desain I/O dapat dilihat pada gambar 3.19.

52

3.9.8 Desain I/O Tampilan Input Data Barang

Rancangan desain I/O berikut merupakan tampilan input data barang. Pada tampilan input data barang ini berisi text box nama barang, deskripsi, QTY, berat, harga jual, harga beli dan combo box kategori yang harus diisi untuk mendata barang. Adapun desain I/O dapat dilihat pada gambar 3.20.

3.9.9 Desain I/O Tampilan Data Barang

Rancangan desain I/O berikut merupakan tampilan data barang. Pada tampilan data barang ini berisi No, nama barang, gambar, kategori, QTY, dan harga barang yang telah diisi. Adapun desain I/O dapat dilihat pada gambar 3.21.

54

3.9.10 Desain I/O Tampilan Input Kategori

Rancangan desain I/O berikut merupakan tampilan input kategori. Pada tampilan input kategori barang ini berisi nama kategori yang akan diisi. Adapun desain I/O dapat dilihat pada gambar 3.22.

3.9.11 Desain I/O Tampilan Kategori

Rancangan desain I/O berikut merupakan tampilan input kategori. Pada tampilan input kategori barang ini berisi nama kategori yang akan diisi. Adapun desain I/O dapat dilihat pada gambar 3.23.

56

3.9.12 Desain I/O Tampilan Order List

Rancangan desain I/O berikut merupakan tampilan order list. Tampilan

order list tersebut berisi informasi tentang data order yang telah di pesan oleh customer yang statusnya berupa unpaid, paid, rejected dan expired. Adapun desain

I/O dapat dilihat pada gambar 3.24.

3.9.13 Desain I/O Tampilan Pengiriman

Rancangan desain I/O berikut merupakan tampilan pengiriman. Tampilan pengiriman tersebut berisi informasi tentang data order yang telah di pesan oleh

customer yang statusnya berupa ready dan delivered. Adapun desain I/O dapat

dilihat pada gambar 3.25.

58

3.9.14 Desain I/O Tampilan Laporan Penjualan

Rancangan desain I/O berikut merupakan tampilan laporan penjualan. Tampilan laporan penjualan tersebut berisi informasi tentang data penjualan. Adapun desain I/O dapat dilihat pada gambar 3.26.

3.9.15 Desain I/O Tampilan Laporan Barang

Rancangan desain I/O berikut merupakan tampilan laporan barang. Tampilan laporan barang tersebut berisi informasi tentang data barang. Adapun desain I/O dapat dilihat pada gambar 3.27.

60

3.9.16 Desain I/O Tampilan Laporan Customer

Rancangan desain I/O berikut merupakan tampilan laporan customer. Tampilan pengiriman tersebut berisi informasi tentang data customer. Adapun desain I/O dapat dilihat pada gambar 3.28.

61

BAB IV

IMPLEMENTASI DAN EVALUASI SISTEM

Tahap implementasi sistem adalah tahap yang mengkonversi hasil analisis dan perancangan sebelumnya kedalam sebuah bahasa pemrograman yang dimengerti oleh komputer. Analisa dan perancangan akan diterjemahkan kedalam bahasa yang dapat dibaca dan diterjemahkan oleh komputer untuk diolah dan menjalankan fungsi-fungsi yang telah didefinisikan sehingga mampu memberikan layanan-layanan kepada penggunanya.

4.1 Kebutuhan Sistem

Pada tahapan ini sistem yang telah dirancang akan dikembangkan sehingga sistem yang dibuat harus mengacu pada rancangan yang telah dibuat pada bab tiga. Adapun tiga kebutuhan sistem yaitu kebutuhan server, kebutuhan software (perangkat lunak), dan kebutuhan hardware (perangkat keras).

4.1.1 Kebutuhan Server

Rancang bangun aplikasi penjualan online ini akan diletakan di server milik penyedia layanan. Perusahaan tidak perlu menyediakan server melainkan hanya membutuhkan hardware untuk mengakses layanan yang disediakan. Adapun spesifikasi server yang dibutuhkan oleh penyedia layanan agar dapat mengimplementasikan sistem ini adalah sebagai berikut:

1. MySQL Database

2. Shared Hosting/Virtual Private Server

3. Hardisk minimal 1 GB

62

4.1.2 Kebutuhan Software

Sistem yang akan digunakan untuk menjalankan rancang bangun aplikasi penjualan online ini membutuhkan software pendukung. Software pendukung tersebut adalah sebagai berikut:

1. Semua sistem operasi yang mendukung penggunaan aplikasi seperti Windows.

2. Web browser yang digunakan sebaiknya menggunakan A-Grade Browser

seperti Mozilla Firefox, Google Chrome, Safari Browser, dan lain-lain.

4.1.3 Kebutuhan Hardware

Kebutuhan minimal hardware yang harus dipenuhi rancang bangun aplikasi penjualan online ini adalah sebagai berikut:

1. Komputer, laptop, tablet, atau smartphone. 2. Printer

3. Koneksi internet

4.2 Pembuatan Sistem

Sistem ini dibangun dengan menggunakan framework CodeIgniter dan

database MySQL. Pembuatan sistem ini juga dibantu oleh library-library seperti

Jquery, Bootstrap, Font Awesome, TCPDF, dan reCAPTCHA API. Library-library ini memiliki fungsi penting karena membantu menyempurnakan sistem yang dibuat. JQuery digunakan untuk tampilan control beserta operasi ke pengguna. Font Awesome digunakan untuk tampilan icon-icon yang mempercantik tampilan sistem. TCPDF digunakan untuk menampilkan laporan dalam bentuk PDF. ReCAPTCHA API digunakan untuk membedakan antara manusia dan komputer untuk tujuan keamanan.

4.3 Implementasi Sistem

Tahap ini digunakan untuk pembuatan perangkat lunak yang disesuaikan dengan desain user sistem yang telah dirancang sebelumnya.

4.3.1 Tampilan Login

Tampilan login merupakan tampilan yang berguna untuk membawa

customer dan admin masuk kedalam halaman selanjutnya agar dapat mengakses

aplikasi lebih lanjut. Didalam tampilan login, customer dan admin harus mengisikan data username dan password, tetapi sebelumnya customer dan admin harus terdaftar terlebih dahulu. seperti terlihat pada gambar 4.1, 4.2, 4.3 dan gambar 4.4.

64

4.3.2 Tampilan Halaman Utama

Tampilan halaman utama merupakan tampilan dari aplikasi yang berisi menu-menu yang dapat digunakan oleh user seperti pilih transaksi data penjualan, transaksi data permintaan dan transaksi data pembelian. Halaman utama juga berisi menu pengelolaan data pelanggan, data customer dan data supplier. seperti terlihat pada gambar 4.2.

4.3.3 Tampilan Daftar Customer

Tampilan master daftar customer berguna untuk customer dalam melakukan pendaftaran member. Dari form daftar customer menghasilkan sebuah informasi bagi admin mengenai data-data customer yaitu email, nama lengkap, password, jenis kelamin, tanggal lahir, alamat, provinsi, kota dan nomor telepon. Seperti terlihat pada gambar 4.3.

Gambar 4.3 Tampilan Daftar Customer

4.3.4 Tampilan Barang

Tampilan form barang berguna untuk customer dalam melihat barang yang ingin dipesan. Dari form produk menghasilkan sebuah informasi bagi customer mengenai nama barang, harga barang, jumlah stock. Seperti terlihat pada gambar 4.4.

66

Gambar 4.4 Tampilan Barang

4.3.5 Tampilan About Us

Tampilan form about us berguna untuk customer untuk mengetahui tentang perusahaan. Seperti terlihat pada gambar 4.5.

4.3.6 Tampilan Contact Us

Tampilan form contact us berguna untuk customer dalam melihat, informasi kontak perusahaan. Dari form contact us menghasilkan sebuah informasi bagi customer mengenai kontak BBM, alamat, nomor telepon dan WhatsApp perusahaan.

68

4.3.7 Tampilan Konfirmasi Pembayaran

Tampilan form konfirmasi pembayaran berguna untuk customer untuk melakukan konfirmasi pembayaran setelah melakukan transfer. Data konfirmasi tersebut akan digunakan admin dalam mengkonfirmasi status barang, dari yang berstatus unpain menjadi berstatus paid dalam order list. Seperti terlihat pada gambar 4.7.

4.3.8 Tampilan Keranjang Belanja

Tampilan form keranjang belanja berguna untuk customer untuk melakukan proses order, menambah, mengubah, maupun menghapus data order barang. Dari form keranjang belanja menghasilkan sebuah informasi bagi customer mengenai nama barang, harga satuan, berat satuan, qty, subtotal, total berat, total harga, ongkos kirim, serta grand total. Data tersebut akan digunakan dalam transaksi penjualan. Seperti terlihat pada gambar 4.8.

70

4.3.9 Tampilan Input Data Barang

Tampilan form input data barang merupakan tampilan form yang untuk mencatat data barang yang baru. Data yang dibutuhkan untuk mengisi form input data barang adalah nama barang, gambar,deskripsi, categori, QTY, berat,harga jual dan harga beli. Seperti terlihat pada gambar 4.9.

4.3.10 Tampilan Data Barang

Tampilan form data barang merupakan tampilan form untuk menampilkan dan maintenance data barang. Data barang ini nantinya akan digunakan untuk proses

order. Seperti terlihat pada gambar 4.10.

72

4.3.11 Tampilan Input Kategori

Tampilan form input kategori merupakan tampilan form yang digunakan untuk membuat kategori baru. Kategori ini kemudian akan digunakan pada barang untuk menentukan kategori barang. Seperti terlihat pada gambar 4.11.

Gambar 4.11 Tampilan Input Kategori

4.3.12 Tampilan Kategori

Tampilan form kategori merupakan tampilan form yang digunakan untuk menampilkan dan maintenance data kategori. Seperti terlihat pada gambar 4.12.

4.3.13 Tampilan Order List

Form order list merupakan form yang berfungsi untuk menampilkan semua

order yang ada dengan status paid, unpaid, rejected dan expired. Status akan

berubah menjadi delivered jika admin melakukan konfirmasi pada form pengiriman. Seperti terlihat pada gambar 4.13.

Gambar 4.13 Tampilan Order List

4.3.14 Tampilan Pengiriman

Form pengiriman merupakan form yang berfungsi untuk menampilkan

semua order yang ada dengan status ready dan delivered. Status deliver akan berubah menjadi delivered jika admin melakukan konfirmasi pada form pengiriman. Seperti terlihat pada gambar 4.14.

74

4.3.15 Tampilan Laporan Penjualan

Form laporan penjualan merupakan form yang berfungsi untuk

menampilkan semua penjualan yang ada berdasarkan kurun waktu tertentu, jangka waktu laporan dapat di atur dan dapat mencetaknya kedalam format PDF. Seperti terlihat pada gambar 4.15.

86

4.4.7 Hasil Uji Coba Halaman Laporan

Uji coba halaman laporan dilakukan terhadap tiga test case. Test case pertama bertujuan untuk melihat laporan customer. Test case kedua bertujuan untuk melihat laporan barang, dan test case ketiga bertujuan untuk melihat laporan penjualan. Sistem harus menampilkan laporan dan grafik dari masing-masing test case. Hasil uji coba login dapat dilihat pada tabel 4.7.

Tabel 4.7 Hasil Uji Coba Halaman Laporan

FORM TESTING HASIL

laporan melihat laporan customer

Sistem memunculkan laporan dan grafik customer. laporan melihat

laporan barang

87

FORM TESTING HASIL

laporan melihat laporan penjualan

Sistem memunculkan laporan dan grafik penjualan

4.4.8 Evaluasi

Berdasarkan pada hasil uji coba yang dilakukan terhadap aplikasi penjualan online terdapat beberapa kelebihan dan kekurangan.

Kelebihan dari sistem yang dibuat yaitu:

1. Pada aplikasi penjualan online ini pengunjung harus mendaftar dan melakukan konfirmasi email terlebih dahulu agar dapat melakukan pembelian. Aplikasi dapat mencegah pengunjung yang belum mendaftar untuk mengakses fitur pembelian barang, aplikasi akan memeriksa valid tidaknya username dan password yang dimasukan oleh pengunjung saat akan melakukan login. Dimana

88

aplikasi akan menampilkan pesan error jika customer salah mengisi atau tidak mengisi username dan password.

2. Pada rancang bangun aplikasi penjualan online dapat melakukan maintenance data untuk keperluan data yang ditampilkan di aplikasi penjualan online pada content yang bersifat dinamis. Fitur Maintenance ini terdapat pada tabel barang dan tabel kategori, sehingga memungkinkan admin untuk dapat mengelola data barang dan kategori. Pada tabel customer tidak terdapat fitur ini karena untuk customer pengelolaan data dilakukan oleh customer sendiri.

3. Pada aplikasi ini, pada halaman utama terdapat data harga, barang paling baru dan barang paling banyak dibeli, customer dapat melihatnya langsung pada halaman utama dan halaman barang.

4. Aplikasi dilengkapi dengan laporan barang, laporan customer dan laporan penjualan bagi admin.

89 BAB V PENUTUP

5.1 Kesimpulan

Kesimpulan yang dapat diambil dari aplikasi penjualan online pada CV. Mitra Techno Sains adalah bahwa aplikasi yang dihasilkan dapat membantu perusahaan dalam hal:

1. Aplikasi yang telah dibangun dapat menjangkau customer yang berada di luar kota maupun di luar pulau. Customer dapat langsung mengakses aplikasi dengan membuka alamat http://www.lunix.vencelstudio.com pada web browser

2. Aplikasi yang telah dibangun dapat membantu customer untuk dapat mengetahui informasi mengenai data harga dan produk terbaru yang dibutuhkan.

3. Aplikasi yang telah dibangun dapat menghasilkan laporan barang, laporan customer dan laporan penjualan.

5.2 Saran

Berdasarkan aplikasi yang sudah dibuat, saran yang dapat disampaikan oleh penulis untuk penjualan online pada CV. Mitra Techno Sains adalah:

1. Aplikasi dapat dikembangkan menjadi berbasis android.

2. Sistem yang telah dibuat berpotensi untuk berkembang menjadi sistem yang lebih kompleks, misalnya ditambahkan dengan penjadwalan produksi atau peramalan bahan baku.

90

DAFTAR PUSTAKA

Adhiguna, A.T. 2010. Rancang Bangun Website Penjualan Tupperware dengan Sistem Shopping Cart (Studi Kasus Distributor Valvalice), STIKOM, Surabaya.

Artha, I Made. B. 2009. Rancang Bangun Sistem Informasi Penjualan Perangkat Game pada Toko I-Games Berbasis Web. Surabaya, Stikom Surabaya

Hartono, Jogiyanto. 2001. Analisis & Desain Sistem Informasi Pendekatan Terstruktur, Teori, dan Praktek Aplikasi Bisnis. Yogyakarta: Andi. Kienan, Brenda. 2001. E-Commerce Untuk Perusahaan Kecil. Jakarta: Elex

Media Komputindo

Kotler, Philip., Amstrong, Gary. 2006. Prinsip-prinsip Pemasaran Edisi 12 jilid 1. Jakarta : Erlangga.

Marcotte, Ethan. 2011. Responsive Web Design. New York: A Book Apart. Noviansyah, Eka. 2008. Aplikasi Website Museum Nasional Menggunakan

Macromedia Dreamweaver MX. STIK. Jakarta.

Nugroho, Adi. 2004. Konsep Pengembangan Sistem Basis Data, Bandung: Informatika.

Shelly, G.B. dan Vermalat, M.E. 2010. Discovering Computer 2010: Living in a Digital World, complete. Boston: Course Technology.

Sigit C. 2010. Mudah Membuat Toko Online Dengan Oscommerce. Yogyakarta: Penerbit ANDI.

Simamarta, J. 2010. Rekayasa Web. Yogyakarta: Andi Offseet.

Valentina, Ivone, 2012. Rancang Bangun Aplikasi Penjualan Pada CV. Sukses Sidoarjo. Surabaya, Stikom Surabaya

Wardana, S.Hut., M.Si. 2010. Menjadi Master PHP dengan Framework Codeigniter. Jakarta: Elex Media Komputindo.

91

LAMPIRAN

Lampiran I Biodata Penulis BIODATA PENULIS

Nama Lengkap : Dody Cipta Pratama Diaz Alamat : Jl. Merpati No. 2

Tempat Lahir : Maumere

Tanggal lahir : 09 Oktober 1991

Agama : Kristen.

Telepon :.+6281232564808

RIWAYAT PENDIDIKAN SD

Tahun Lulus /Ijazah : 2003

Nama Institusi : SDK Bhaktyarsa Maumere Kota Institusi : Maumere

SMP

Tahun Lulus /Ijazah : 2006

Nama Institusi : SMPK Frateran Maumere Kota Institusi : Surabaya

SMA

Tahun Lulus /Ijazah : 2009

Jurusan /Program Studi : IPA (Ilmu Pengetahuan Alam) Nama Institusi : SMAK Frateran Maumere Kota Institusi : Maumere