ABSTRAK
Saung-buku.com adalah salah satu website katalog buku online yang sudah berjalan saat ini. Dalam pengembangannya, saung-buku.com berencana membangun pemesanan buku secara online melalui website. Oleh karena itu, saung-buku.com membutuhkan aplikasi yang dapat mendukung proses pemesanan buku secara online dan dashboard yang digunakan untuk memantau perkembangan trafik website sehingga dapat meningkatkan hubungan dengan pengunjung / pembeli. Saung-buku.com juga membutuhkan aplikasi laporan yang dapat dibuat dan dikustomisasi oleh pengguna admin. Selain itu terdapat pula modul tiket dan testimoni yang dapat digunakan oleh pengunjung member untuk membangun hubungan antar penjual dan pembeli. Aplikasi ini dibangun dengan menggunakan PHP, MySQL, HTML5 dan CSS.
ABSTRACT
Saung-buku.com is one of the online book catalog website that already operating in internet. In order to elaborate, saung-buku.com will be developing several features including ordering books online via website. Therefore, it needs application that support ordering book online and also dashboards that applicable to monitoring website traffic so it could increase relationship between visitor and buyer. Saung-buku.com also needs reporting application that could create and customized by admin user. And there is also ticketing for member and testimonial for member to show their gratitude or complaints about seller or ordering services. This application builds using PHP, MySQL, HTML5 and CSS3.
DAFTAR ISI
LEMBAR PENGESAHAN ... i
PERNYATAAN ORISINALITAS LAPORAN PENELITIAN ... ii
PERNYATAAN PUBLIKASI LAPORAN PENELITIAN ... iii
PRAKATA ... iv
ABSTRAK ... v
ABSTRACT ... vi
DAFTAR ISI ... vii
DAFTAR GAMBAR ... xi
DAFTAR TABEL ... xiv
DAFTAR NOTASI/ LAMBANG ... xvi
DAFTAR SINGKATAN ... xx
DAFTAR ISTILAH ... xxi
BAB 1. PENDAHULUAN ... 1
1.1 Latar Belakang Masalah ... 1
1.2 Rumusan Masalah ... 2
1.3 Tujuan Pembahasan... 2
1.4 Ruang Lingkup Kajian... 2
1.5 Sumber Data ... 3
1.6 Sistematika Penyajian ... 3
BAB 2. KAJIAN TEORI ... 5
2.1 E-Commerce ... 5
2.2 Customer Relationship Management ... 5
2.2.1 Definisi Customer Relationship Management ... 5
2.2.2 Kegunaan CRM ... 6
2.3 PHP ... 6
2.4 MySQL ... 7
2.5 HTML5 ... 7
2.6 UML ... 7
2.6.1 Use Case Diagram ... 8
2.6.3 Class Diagram ... 9
2.7 Perancangan Basis Data ... 9
2.7.1 Entity Relationship Diagram ... 9
2.7.2 Kardinalitas ... 10
BAB 3. ANALISIS DAN RANCANGAN SISTEM ... 11
3.1 Analisis Sistem ... 11
3.1.1 Sistem yang Sudah Ada ... 11
3.1.2 Pengembangan Sistem ... 13
3.2 UML Diagram ... 24
3.2.1 Use Case Diagram ... 24
3.2.2 Definisi Aktor ... 24
3.2.3 Definisi Use Case ... 25
3.2.4 Skenario Use Case Diagram ... 26
3.2.5 Activity Diagram ... 40
3.2.6 Class Diagram ... 48
3.3 Perancangan Basis Data ... 49
3.4 Perancangan Antar Muka ... 50
3.4.1 Halaman Login Member ... 50
3.4.2 Halaman Registrasi ... 50
3.4.3 Halaman Katalog Buku ... 51
3.4.4 Keranjang Belanja ... 54
3.4.5 Checkout ... 55
3.4.6 Konfirmasi Pembayaran ... 57
3.4.7 Melacak Status Pemesanan ... 58
3.4.8 Ticketing Member ... 59
3.4.9 Melihat Histori Pemesanan ... 60
3.4.10 Dashboard Admin ... 61
3.4.11 Pemrosesan Pesanan ... 62
3.4.12 Pengelolaan Stok ... 63
3.4.13 Mengelola Laporan ... 63
BAB 4. HASIL PENELITIAN ... 65
4.1.1 Konten User Admin ... 65
4.1.2 Konten User Member ... 76
4.1.3 Konten User Non Member ... 86
BAB 5. PEMBAHASAN DAN UJI COBA HASIL PENELITIAN ... 89
5.1 Admin Konten ... 89
5.1.1 Sign In ... 89
5.1.2 Dashboard ... 90
5.1.3 Mengelola Buku... 91
5.1.4 Mengubah Profil ... 91
5.1.5 Mengelola Pelanggan ... 93
5.1.6 Mengelola Pemesanan ... 94
5.1.7 Mengelola Stok... 95
5.1.8 Mengelola Tiket ... 96
5.1.9 Mengelola Laporan ... 97
5.2 Member Konten ... 98
5.2.1 Sign In ... 98
5.2.2 Mengubah Profil ... 99
5.2.3 Melihat Histori Pemesanan ... 101
5.2.4 Melihat Katalog Buku ... 102
5.2.5 Melakukan Pemesanan Buku ... 102
5.2.6 Melihat Keranjang Belanja ... 103
5.2.7 Checkout ... 104
5.2.8 Melakukan Konfirmasi Pembayaran ... 106
5.2.9 Melacak Status Pemesanan ... 107
5.2.10 Membuka Tiket ... 109
5.3 Non Member Konten... 110
5.3.1 Registrasi ... 110
5.3.2 Melihat Katalog Buku ... 112
BAB 6. SIMPULAN DAN SARAN ... 113
6.1 Simpulan ... 113
DAFTAR GAMBAR
Gambar 3.1 Proses bisnis sistem yang sudah ada ... 12
Gambar 3.2 Proses bisnis pemesanan buku ... 14
Gambar 3.3 Proses bisnis konfirmasi pembayaran ... 16
Gambar 3.4 Proses bisnis melacak status pemesanan ... 18
Gambar 3.5 Proses bisnis membuka tiket ... 20
Gambar 3.6 Proses bisnis pemrosesan pemesanan ... 22
Gambar 3.7 Use Case Diagram aplikasi ... 24
Gambar 3.8 Activity Diagram registrasi member... 40
Gambar 3.9 Activity Diagram pemesanan buku ... 41
Gambar 3.10 Activity Diagram melakukan konfirmasi pembayaran ... 42
Gambar 3.11 Activity Diagram melacak status pemesanan ... 43
Gambar 3.12 Activity Diagram membuka tiket ... 44
Gambar 3.13 Activity Diagram memproses pemesanan ... 45
Gambar 3.14 Activity Diagram mengelola stok ... 46
Gambar 3.15 Activity Diagram mengelola laporan ... 47
Gambar 3.16 Class Diagram aplikasi ... 48
Gambar 3.17 Entity Relationship Diagram (ERD) ... 49
Gambar 3.18 Perancangan halaman login ... 50
Gambar 3.19 Perancangan halaman registrasi... 51
Gambar 3.20 Perancangan halaman katalog buku ... 52
Gambar 3.21 Perancangan tampilan halaman detail buku ... 53
Gambar 3.22 Perancangan halaman keranjang belanja ... 54
Gambar 3.23 Perancangan halaman checkout mengisikan data pengiriman55 Gambar 3.24 Perancangan halaman checkout summary ... 56
Gambar 3.25 Perancangan halaman konfirmasi pembayaran ... 57
Gambar 3.26 Perancangan halaman melacak status pemesanan... 58
Gambar 3.27 Perancangan halaman tiket member ... 59
Gambar 3.28 Perancangan halaman melihat histori status pemesanan ... 60
Gambar 3.29 Perancangan halaman dahsboard admin ... 61
Gambar 3.31 Perancangan halaman pengelolaan stok ... 63
Gambar 3.32 Perancangan halaman pengelolaan laporan ... 64
Gambar 3.33 Perancangan halaman pengelolaan filter laporan ... 64
Gambar 4.1 Halaman tampilan sign in ... 65
Gambar 4.2 Halaman tampilan dashboard admin... 66
Gambar 4.3 Halaman tampilan daftar buku ... 67
Gambar 4.4 Halaman tampilan menambah atau mengubah buku ... 68
Gambar 4.5 Halaman tampilan mengubah profil user ... 69
Gambar 4.6 Halaman tampilan daftar pengarang ... 70
Gambar 4.7 Halaman tampilan menambah atau mengubah pengarang ... 70
Gambar 4.8 Halaman tampilan daftar penerbit ... 71
Gambar 4.9 Halaman tampilan menambah atau mengubah penerbit... 71
Gambar 4.10 Halaman tampilan daftar pelanggan ... 72
Gambar 4.11 Halaman tampilan daftar pemesanan ... 72
Gambar 4.12 Halaman tampilan detail pemesanan ... 73
Gambar 4.13 Halaman tampilan menambahkan stok ... 73
Gambar 4.14 Halaman daftar tiket member ... 74
Gambar 4.15 Halaman tampilan mengelola tiket ... 74
Gambar 4.16 Halaman tampilan membuat laporan ... 75
Gambar 4.17 Halaman tampilan menambahkan filter laporan ... 75
Gambar 4.18 Halaman tampilan hasil generate laporan ... 76
Gambar 4.19 Halaman tampilan sign in pengguna ... 77
Gambar 4.20 Halaman tampilan mengubah profil pengguna ... 78
Gambar 4.21 Halaman tampilan melihat daftar histori pemesanan ... 79
Gambar 4.22 Halaman tampilan melihat katalog buku ... 80
Gambar 4.23 Halaman tampilan melihat detail buku ... 80
Gambar 4.24 Halaman tampilan melihat keranjang belanja ... 81
Gambar 4.25 Halaman tampilan chekcout ... 82
Gambar 4.26 Halaman tampilan checkout summary ... 83
Gambar 4.27 Halaman tampilan konfirmasi pembayaran ... 84
Gambar 4.28 Halaman tampilan melacak status pemesanan ... 85
Gambar 4.30 Halaman tampilan menambahkan tiket baru ... 86
Gambar 4.31 Halaman tampilan registrasi pengunjung ... 87
Gambar 4.32 Halaman tampilan melihat katalog buku ... 88
DAFTAR TABEL
Tabel 3.1 Definisi Use Case... 25
Tabel 3.2 Skenario registrasi member ... 26
Tabel 3.3 Skenario melihat katalog ... 27
Tabel 3.4 Skenario melakukan pemesanan buku ... 28
Tabel 3.5 Skenario melihat keranjang ... 29
Tabel 3.6 Skenario checkout ... 30
Tabel 3.7 Skenario melacak status pemesanan ... 31
Tabel 3.8 Skenario melakukan konfirmasi pembayaran ... 32
Tabel 3.9 Skenario membuka tiket ... 32
Tabel 3.10 Skenario melihat histori pemesanan ... 33
Tabel 3.11 Skenario memproses pemesanan ... 34
Tabel 3.12 Skenario mengelola stok ... 35
Tabel 3.13 Skenario mengecek stok ... 36
Tabel 3.14 Skenario mengelola member ... 36
Tabel 3.15 Skenario mengelola laporan ... 37
Tabel 3.16 Skenario melihat laporan ... 38
Tabel 3.17 Skenario melihat dashboard ... 39
Tabel 5.1 Sign in Admin ... 89
Tabel 5.2 Dashboard admin ... 90
Tabel 5.3 Mengelola buku ... 91
Tabel 5.4 Mengubah profil ... 92
Tabel 5.5 Mengelola pelanggan ... 93
Tabel 5.6 Mengelola pemesanan ... 94
Tabel 5.7 Mengelola stok ... 95
Tabel 5.8 Mengelola tiket ... 96
Tabel 5.9 Mengelola laporan ... 97
Tabel 5.10 Sign in member ... 98
Tabel 5.11 Mengubah profil ... 99
Tabel 5.12 Melihat histori pemesanan ... 101
Tabel 5.14 Melakukan pemesanan buku ... 103
Tabel 5.15 Melihat keranjang belanja ... 103
Tabel 5.16 Checkout ... 104
Tabel 5.17 Melakukan konfirmasi pembayaran ... 106
Tabel 5.18Melacak status pemesanan ... 107
Tabel 5.19 Membuka tiket ... 109
Tabel 5.20 Registrasi ... 110
DAFTAR NOTASI/ LAMBANG
Jenis Notasi/Lambang Nama Arti
Flowchart Terminator Menunjukkan awal dan akhir dari suatu diagram alir
Flowchart Process Menggambarkan proses yang dilakukan
Flowchart Manual
Process
Merupakan gambaran dari suatu proses yang dilakukan secara manual
tanpa bantuan
komputerisasi
Flowchart Decision Menggambarkan
Entity
Belah Ketupat Himpunan relasi
Entity
Relationship
Diagram
Use Case
Diagram
Actor Merepresentasikan seseorang atau sesuatu yang berinteraksi dengan sistem
Use Case
Diagram
Use Case Merupakan suatu rangkaian aktivitas yang dilakukan actor untuk menyelesaikan suatu proses
Use Case
Diagram
System
Boundaries
Merupakan suatu
batasan yang digunakan untuk membatasi use case dan sistem.
Use Case
Diagram
include Dengan menggunakan notasi relasi ini, suatu menggambarkan use case tersebut.
Use Case
Diagram
communicates Digunakan untuk melambangkan asosiasi antar use case.
Activity
Diagram
Initial State Merupakan kondisi awal dari suatu objek.
Activity
Diagram
Final State Merupakan suatu kondisi dimana objek berhenti melakukan aksi.
Diagram aktivitas dari suatu objek.
Activity
Diagram
Transition Menggambarkan sebuah perubahan kondisi objek yang disebabkan oleh keadaan.
Activity
Diagram
Decision Suatu titik pada diagram
aktivitas yang
mengindikasikan suatu kondisi dimana ada kemungkinan perbedaan transisi.
Activity
Diagram
Transition
(Join)
Merupakan suatu kondisi dimana terdapat dua transisi yang masuk dan hanya mengeluarkan satu transisi saja.
Activity
Diagram
Transition
(Fork)
Merupakan suatu kondisi dimana terdapat satu transisi yang masuk dan mengeluarkan beberapa transisi.
Class
Diagram
Association Menggambarkan
hubungan antara dua kelas yang memiliki hubungan.
Class
Diagram
Aggregation Menggambarkan satu ke banyak kelas atau satu kelas ke banyak.
Class
Diagram
Composition Menggambarkan bagian dari suatu kelas. Kelas
dengan relasi komposisi berarti merupakan bagian dari kelas tujuan.
Class
Diagram
Inheritance /
Generalization
Merupakan relasi yang menggambarkan
hubungan antara kelas anak dan kelas orang tua.
Class
Diagram
DAFTAR SINGKATAN
ERD Entity Relationship Diagram
UML Unified Model Language
CRM Customer Relationship Management
HTML Hypertext Markup Language
PHP PHP Hypertext Preprocessor
MySQL My Structured Query Language
DAFTAR ISTILAH
Website Halaman yang ditampilkan di internet yang memuat informasi tertentu.
Localhost Nama standar yang diberikan sebagai alamat
loopback network interface.
1
BAB 1. PENDAHULUAN
1.1 Latar Belakang Masalah
Dengan semakin berkembangan e-commerce untuk melakukan transaksi jual beli online, kebutuhan terhadap situs e-commerce pun semakin bertambah. Dengan memiliki sebuah situs e-commerce, kepercayaan pembeli terhadap penjual dapat meningkat, karena penjual dianggap memiliki niat untuk melakukan jual beli. Selain itu, situs e-commerce pun dapat memberikan kemudahan kepada pengunjung, yang notabene adalah calon pembeli, untuk melihat-lihat katalog barang yang ditawarkan.
Perkembangan e-commerce di Indonesia pada saat ini merupakan primadona bagi para pelaku bisnis kreatif atau para pelaku bisnis pemula yang tertarik untuk meramaikan peluang dan kesempatan yang masih terbuka lebar pada pasar e-commerce Indonesia.
Pengguna internet di Indonesia saat ini masih sekedar melihat-lihat
website penjualan dan melakukan transaksi online dengan cara konvensional seperti melalui grup BlackBerry Messenger (BBM), classified marketplace, forum, hingga layanan jejaring social seperti Facebook dan lain-lain. Hal ini tidak terlepas dari tingkat kepercayaan konsumen di Indonesia terhadap e-commerce, walaupun penipuan belanja online sudah tak semarak dulu.
Melihat hal seperti ini, tentu mengharapkan e-commerce bergantung hanya pada data transaksi belanja untuk meningkatkan Customer Relationship Management adalah hal yang tidak mudah dilakukan. Apalagi banyak pengguna internet yang hanya meninggalkan sedikit jejak di website
e-commerce yang dikunjunginya.
2
penawaran produk dapat disesuaikan dengan karakteristik aktivitas pengunjung tersebut. Dengan menyajikan data menggunakan dashboard, penjual pun dapat membuat keputusan untuk meningkatkan penjualannya ataupun melakukan promosi.
1.2 Rumusan Masalah
Dari penjelasan di atas dapat ditemukan beberapa masalah / resiko yang dihadapi pada para pelaku e-commerce :
1. Bagaimana mengetahui trafik pengunjung e-commerce dan karakteristik pengunjung pada jam-jam tertentu?
2. Bagaimana penyajian data terhadap trafik pengunjung, penjualan buku dan stok buku agar dapat dengan mudah dipahami dan sesuai dengan kebutuhan user penjual?
3. Bagaimana agar user admin dapat membuat laporan sendiri sesuai kebutuhan?
1.3 Tujuan Pembahasan
Tujuan pembahasan pada tugas akhir ini adalah :
1. Mencatat trafik pengunjung e-commerce dan karakteristiknya selama pengunjung masih aktif di website tersebut, dan pembeli yang melakukan aktivitas belanja online.
2. Membuat Virtual Data Warehouse dan menampilkan data menggunakan
dashboard untuk mengetahui garis besar aplikasi ketika login sebagai admin.
3. Membuat DIY (Do It Yourself) laporan untuk penyajian data secara interaktif.
1.4 Ruang Lingkup Kajian
3
Aplikasi ini terbatas hanya pada transaksi penjualan produk dan trafik pengunjung, serta pembuatan dashboard.
Aplikasi ini menggunakan Virtual Data Warehouse.
Tools serta bahasa pemrograman yang akan digunakan dalam pembangunan aplikasi antara lain :
Bahasa pemrograman yang digunakan dalam membuat situs ini adalah
HTML5 serta PHP versi 5.4.7 sebagai koneksi dinamis dengan database. Bahasa scripting tambahan yang akan dipakai yaitu jQuery, Javascript
dan Cascading Style Sheet (CSS).
Program basis data yang digunakan adalah MySQL Database version 5.5
Web server yang digunakan Apache web server version 2.4
Untuk menguji tampilan akan digunakan Mozilla Firefox
1.5 Sumber Data
Sumber data primer diambil dari database transaksional website. Sumber data sekunder diambil dari beberapa buku, internet, e-book yang dapat menunjang pembuatan aplikasi.
1.6 Sistematika Penyajian
Sistematika pembahasan laporan ini akan disusun dalam enam bab, yang disusun sebagai berikut :
BAB I Pendahuluan
Bab ini berisi latar belakang, rumusan masalah, tujuan pembahasan, ruang lingkup kajian, sumber data dan sistematika pembahasan yang digunakan dalam pembuatan laporan tugas akhir dan pembangunan dashboard interaktif
BAB II Kajian Teori
4
BAB III Analisis dan Rancangan Sistem
Bab ini berisi ERD (Entity Relationship Diagram), Model Konseptual, PSPEC (Process Specification) dan desain antar muka.
BAB IV Hasil Penelitian
Bab ini merupakan perancangan yang didasari kesimpulan dari hasil analisis yang dilakukan dan teori yang berhubungan.
BAB V Pembahasan dan Uji Coba Hasil Penelitian
Bab ini berisi hasil evaluasi implementasi dari aplikasi yang telah dibuat.
Bab VI Kesimpulan dan Saran
113
BAB 6. SIMPULAN DAN SARAN
Pada bab ini membahas mengenai kesimpulan dan saran untuk tugas akhir yang dibuat, merupakan rangkuman hasil yang telah didapatkan.
6.1 Simpulan
Dari hasil penelitian yang dilakukan terhadap tugas akhir yang dibuat yaitu mengenai Pembangunan Dashboard Interaktif Pada Aplikasi E-Commerce Untuk Mendukung Customer Relationship Management dapat diambil beberapa poin kesimpulan yang berdasar pada tujuan dari penelitian, diantaranya yaitu :
1. Penyimpanan log pengunjung yang mengunjungi aplikasi untuk dapat diolah dan ditampilkan di dashboard.
2. Pembuatan dashboard interaktif pada aplikasi e-commerce dapat memudahkan pemilik aplikasi untuk memantau keadaan aplikasi. 3. Pembuatan laporan yang dapat diubah dan disesuaikan oleh
pemilik dapat memudahkan pemilik/owner untuk menyusun laporan sendiri dan menambahkan filter yang digunakan.
6.2 Saran
Terdapat dua saran yang akan diberikan untuk penelitian tugas akhir ini, yang pertama adalah saran untuk pengembangan aplikasi di masa yang akan datang, dan kedua adalah saran untuk pelaksanaan penelitian dengan lebih baik di masa yang akan datang.
6.2.1 Saran Pengembangan Aplikasi
Terdapat beberapa saran untuk pengembangan aplikasi di masa yang akan datang, yaitu :
1. Membuat service sinkronisasi data antara database transaksional dan datawarehouse.
2. Mengimplementasikan fitur rekomendasi buku menggunakan rating.
114
4. Membuat aplikasi yang berbasis mobile dengan menggunakan web service yang telah dibuat.
5. Menambahkan fitur yang menggunakan OAuth dari social media facebook, googleplus dan twitter.
6. Melakukan verifikasi kebenaran data pengguna yang mendaftar menjadi member melalui email.
6.2.2 Saran Pelaksanaan Penelitian
Terdapat beberapa saran untuk penelitian yang sebaiknya dilakukan di masa yang akan datang, yaitu :
1. Membuat kuisioner untuk menentukan data yang diperlukan untuk menjadi tolak ukur rekomendasi buku selain menggunakan rating. 2. Melakukan penelitian secara lebih rapi dan bertahap dalam hal
115
DAFTAR PUSTAKA
[1] K. C. Laudon and J. P. Laudon, Management Information Systems Managing the Digital Firm, Essex, England: Pearson Education, 2013. [2] J. &. T. P. Boehm, Customer Relationship Management Essentials, New
Delhi: Prentice Hall of India, 2001.
[3] P. Greenberg, CRM at the Speed of Light, California: Osborne.
[4] L. Beighley and M. Morrison, Head First PHP & MySQL, United States of America: O'Reilly Media, 2008.
[5] E. Freeman and E. Robson, Head First HTML5 Programming, California: O'Reilly Media, 2011.
[6] A. Saputra, WebTips PHP, HTML5 dan CSS3, Jakarta: Jasakom, 2012. [7] F. Martin, UML Distilled Second Edition, ADDISON-WESLEY, 2000. [8] M. Blaha, J. Rumbaugh, W. Premerlani, F. Eddy and W. Lorensen,
Object-Oriented Modeling and Design, New York: Prentice-Hall, inc, 1991.
[9] S. Bagui and R. Earp, Database Design Using Entity-Relationship Diagrams, Auerbach Publications, 2003.