perancangan website toko online sebagai sarana …repository.upnvj.ac.id/1292/1/awal.pdfperancangan...
TRANSCRIPT
PERANCANGAN WEBSITE TOKO ONLINE SEBAGAI
SARANA INFORMASI DAN PEMASARAN PADA
KAI.SCRAFT
(STUDI KASUS: TOKO KAI.SCRAFT)
TUGAS AKHIR
SEKAR QURAINI PRAMUDYA WARDHANI
1610501025
PROGRAM STUDI D-IIII SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER
UNIVERSITAS PEMBANGUNAN NASIONAL
“VETERAN”
JAKARTA
2018
i
PERANCANGAN WEBSITE TOKO ONLINE SEBAGAI
SARANA INFORMASI DAN PEMASARAN PADA
KAI.SCRAFT
ii
PENGESAHAN
iii
PERNYATAAN ORSINALITAS
iv
PERNYATAAN PERSETUJUAN PUBLIKASI TUGAS AKHIR
UNTUK KEPENTINGAN AKADEMIS
v
ABSTRAK
Perancangan Website Toko Online Sebagai Sarana Informasi Dan
Pemasaran Pada Kai.Scraft
Oleh : Sekar Quraini Pramudya Wardhani
E-commerce merupakan suatu wadah yang mempertemukan pedagang dan
pembeli untuk melakukan transaksi melalui media internet. Kegiatan e-commerce
adalah kebutuhan untuk meningkatkan persaingan bisnis dalam penjualan produk
yang memiliki kelebihan dalam segi biaya operasional yang tidak perlu memerlukan
tempat seperti bisnis konvensional pada umumnya. Kai.scraft adalah salah satu e-
commerce yang bergerak dalam bidang penjualan online berupa produk hijab yang
masih menggunakan media sosial dalam melakukan transaksi penjualan. Hal ini
menyebabkan kurangnya informasi akurat terhadap produk hijab pada toko kai.scraft,
pengolahan data penjualan masih berupa catatan manual yang tidak memiliki data
backup yang suatu saat bisa hilang, dan proses pemesanan yang berjalan
menggunakan format yang telah ditentukan untuk memesan suatu produk melalui
media chatting.
Penelitian ini bertujuan untuk merancang sistem berbasis web menggunakan
bahasa pemograman PHP dan HTML, serta mengunakan database MySQL yang
tersedia pada XAMPP. Teknik pengumpulan data menggunakan observasi dan studi
pustka. Dengan adanya sistem ini diharapkan dapat memenuhi kebutuhkan pada toko
kai.scraft.
Kata kunci : e-commerce, penjualan, website, hijab.
vi
ABSTRACT
Web-Based Online Shop as Information Media and Marketing on
Kai.Scraft
By : Sekar Quraini Pramudya Wardhani
E-commerce is a media that bridges between seller and customer to allow
transaction through the internet. E-commerce service is a requirement to increase the
value of business competitiveness in marketting which has advantage in operational
cost, unlike conventional business that requires a physical place to run. Kai.Scraft is
one of an e-commerce shop that sales hijab products. It’s business activities still
operates on social media to conduct transaction. This results the lack of product’s
information regarding stocks, sales data management that still uses paper notes which
does not have backup and might ended missing, and order procedures using specific
format through chatting.
The goal of this research is to design a web-based system using PHP and
HTML programming language and MySQL database provided by XAMPP. The
method which used to collect required data are observation and literature study. This
system is expected to fulfill the needs of Kai.Scraft shop.
Keyword : e-commerce, marketing, website, hijab.
vii
KATA PENGANTAR
Puji dan syukur kehadirat Allah SWT yang telah melimpahkan rahmat-Nya,
sehingga penulis dapat menyelesaikan tugas akhir pada tepat waktunya. Adapun
penulis menyajikan tugas akhir ini dengan judul :
“PERANCANGAN WEBSITE TOKO ONLINE SEBAGAI SARANA
INFORMASI DAN PEMASARAN PADA KAI.SCRAFT”
Sedangkan maksud dan tujuan dari penulisan tugas akhir ini adalah sebagai
salah satu persayaratan dalam kelulusan sidang proposal Seminar Teknologi
Informasi Fakultas Ilmu Komputer Universitas Pembangunan Nasional “Veteran”
Jakarta.
Tugas akhir ini disusun berdasarkan hasil riset serta dukungan dari berbagai
pihak karena penulis menyadari bahwa tanpa bimbingan dari semua pihak mustahil
laporan kerja praktek ini akan dapat terselesaikan. Oleh karena itu pada kesempatan
ini perkenankanlah penulis menyampaikan ucapan terima kasih kepada :
1. Dr. Ermatita, M.Sc selaku Dekan Fakultas Ilmu Komputer Universitas
Pembangunan Nasional “Veteran” Jakarta.
2. Ibu Erly Krisnanik, S.Kom., MM., selaku Ketua Program Studi Sistem Informasi
Universitas Pembangunan Nasional “Veteran” Jakarta.
3. Ibu Ika Nurlaili Isnaniyah S.Kom., M.Sc selaku dosen pembimbing Seminar
Teknologi Informasi penulis pada Fakultas Ilmu Komputer Universitas Pembangunan
Nasional “Veteran” Jakarta.
4. Kedua orang tua yang telah memberikan dukungan moral dan spiritual.
5. Teman-teman D3-Sistem Informasi kelas A yang telah membantu baik secara
langsung maupun tidak langsung.
Serta semua pihak yang tidak dapat disebut satu persatu sehingga terwujudnya
penulisan ini. Penulis menyadari bahwa penulisan tugas akhir ini masih jauh dari kata
viii
sempurna, untuk itu penulis mohon kritik dan saran yang bersifat membangun demi
kesempurnaan penulisan dimasa yang akan datang.
Akhir kata semoga tugas akhir ini dapat bermanfaat khususnya bagi penulis.
Jakarta, 27 Juni 2019
Sekar Quraini Pramudya Wardhani
Penulis
ix
DAFTAR ISI
Halaman Judul ................................................................................................................ i
PENGESAHAN ............................................................................................................ ii
PERNYATAAN ORSINALITAS ................................................................................ ii
PERNYATAAN PERSETUJUAN PUBLIKASI TUGAS AKHIR UNTUK
KEPENTINGAN AKADEMIS ................................................................................... iii
ABSTRAK ................................................................................................................... iv
ABSTRACT ................................................................................................................. vi
KATA PENGANTAR ................................................................................................ vii
DAFTAR ISI ............................................................................................................... ix
DAFTAR GAMBAR .................................................................................................. xv
DAFTAR TABEL ..................................................................................................... xvii
BAB I ............................................................................................................................ 1
PENDAHULUAN ........................................................................................................ 1
1.1 Latar Belakang .................................................................................................... 1
1.2 Rumusan Masalah ............................................................................................... 2
1.4 Tujuan .................................................................................................................. 3
1.5 Manfaat ................................................................................................................ 3
1.5.1 Bagi konsumen ............................................................................................. 3
1.5.2 Bagi Kai.scraft .............................................................................................. 4
1.6 Luaran Penelitian ................................................................................................. 4
1.7 Sistematika Penulisan .......................................................................................... 4
BAB II ........................................................................................................................... 6
TINJAUAN PUSTAKA ............................................................................................... 6
2.1 Sistem Informasi .................................................................................................. 6
2.1.1 Sistem............................................................................................................ 6
2.1.2 Informasi ....................................................................................................... 6
2.1.3 Sistem Informasi ........................................................................................... 6
2.2 Konsep Dasar Internet ......................................................................................... 6
x
2.3 Konsep Dasar Aplikasi Web ............................................................................... 7
2.4 HTML ................................................................................................................. 7
2.5 PHP ...................................................................................................................... 7
2.6 CSS ...................................................................................................................... 7
2.7 SQL ..................................................................................................................... 8
2.8 XAMPP ............................................................................................................... 8
2.9 JavaScript ............................................................................................................ 8
2.10 Definisi E-commerce ......................................................................................... 8
2.11 Komponen E-commerce .................................................................................... 8
2.12 Jenis E-commerce .............................................................................................. 9
2.13 Metode Pembayaran E-commerce ..................................................................... 9
2.14 Unified Model Language (UML) .................................................................... 10
2.14.1 Use Case Diagram .................................................................................... 10
2.14.2 Activity Diagram ...................................................................................... 11
2.14.3 Sequence Diagram .................................................................................... 11
2.14.4 Class Diagram ........................................................................................... 11
2.15 ERD ................................................................................................................. 11
2.16 Basis Data ........................................................................................................ 11
2.17 Waterfall .......................................................................................................... 11
2.18 PIECES ............................................................................................................ 12
2.19 Blackbox Testing ............................................................................................. 14
2.20 Review Penelitian Terdahulu .......................................................................... 15
BAB III ....................................................................................................................... 17
METODOLOGI .......................................................................................................... 17
3.1 Alur Penelitian ................................................................................................... 17
3.2 Tahapan Penelitian ............................................................................................ 18
3.2.1 Identifikasi Masalah .................................................................................... 18
3.2.2 Pengumpulan Data ...................................................................................... 18
xi
3.2.3 Analisa Sistem ............................................................................................ 18
3.2.4 Perancangan Sistem .................................................................................... 19
3.2.5 Uji Coba ...................................................................................................... 19
3.2.6 Implementasi ............................................................................................... 19
3.3 Waktu dan Tempat Penelitian ........................................................................... 19
3.4 Spesifikasi Perangkat ........................................................................................ 19
3.4.1 Hardware ..................................................................................................... 20
3.4.2 Software ...................................................................................................... 20
BAB IV ....................................................................................................................... 21
ANALISA DAN PEMBAHASAN ............................................................................. 21
4.1 Profil Kai.Scraft ................................................................................................. 21
4.2 Visi dan Misi ..................................................................................................... 22
4.3 Struktur Organisasi ............................................................................................ 22
4.4 Tugas dan Fungsi ............................................................................................... 22
4.5 Analisa Sistem Berjalan .................................................................................... 23
4.5.1 Analisa Dokumen ....................................................................................... 23
4.5.2 Dokumen Input ........................................................................................... 23
4.5.4 Use Case yang Berjalan .............................................................................. 24
4.6 Analisa Sistem dengan Metode PIECES ........................................................... 25
4.7 Rancangan Usulan ............................................................................................. 26
4.7.1 Deskripsi Aktor Usulan .............................................................................. 26
4.7.2 Use Case Usulan ......................................................................................... 28
4.8 Deskripsi Tabel Scenario Use Case ................................................................... 29
4.8.1 Tabel Scenario Login .................................................................................. 29
4.8.2 Tabel Scenario Tambah User ...................................................................... 29
4.8.3 Tabel Scenario Profil Toko ......................................................................... 30
4.8.4 Tabel Scenario Kelola Produk .................................................................... 30
4.8.5 Tabel Scenario Melihat Produk .................................................................. 31
xii
4.8.6 Tabel Scenario Tambah Keranjang............................................................. 31
4.8.7 Tabel Scenario Riwayat Transaksi ............................................................. 32
4.8.8 Tabel Scenario Konfirmasi Bayar............................................................... 32
4.8.9 Tabel Scenario Konfirmasi Status .............................................................. 33
4.8.10 Tabel Scenario Laporan Penjualan ........................................................... 33
4.8.11 Tabel Scenario Logout .............................................................................. 34
4.9 Diagram Activity Usulan ................................................................................... 35
4.9.1 Diagram Activity Login .............................................................................. 35
4.9.2 Diagram Activity Tambah User .................................................................. 36
4.9.3 Diagram Activity Profil Toko ..................................................................... 37
4.9.4 Diagram Activity Kelola Produk ................................................................ 38
4.9.5 Diagram Activity Melihat Produk .............................................................. 39
4.9.6 Diagram Activity Tambah Keranjang......................................................... 40
4.9.7 Diagram Activity Riwayat Transaksi ......................................................... 41
4.9.8 Diagram Activity Konfirmasi Bayar........................................................... 42
4.9.9 Diagram Activity Konfirmasi Status .......................................................... 43
4.9.10 Diagram Activity Laporan Penjualan ....................................................... 45
4.9.11 Diagram Activity Logout .......................................................................... 46
4.10 Sequence Diagram Usulan ............................................................................. 47
4.10.1 Sequence Diagram Login Admin ............................................................. 47
4.10.2 Sequence Diagram Login Pelanggan ........................................................ 48
4.10.3 Sequence Diagram Tambah User ............................................................. 48
4.10.4 Sequence Diagram Profil Toko................................................................. 49
4.10.5 Sequence Diagram Kelola Produk ............................................................ 50
4.10.6 Sequence Diagram Melihat Produk .......................................................... 50
4.10.7 Sequence Diagram Tambah Keranjang .................................................... 51
4.10.8 Sequence Diagram Riwayat Transaksi ..................................................... 51
4.10.9 Sequence Diagram Konfirmasi Bayar ...................................................... 52
xiii
4.10.10 Sequence Diagram Konfirmasi Status .................................................... 52
4.10.11 Sequence Diagram Laporan Penjualan ................................................... 53
4.10.12 Sequence Diagram Logout...................................................................... 53
4.11 Class Diagram Usulan ..................................................................................... 54
4.12 Rancangan Kode .............................................................................................. 55
4.13 Kamus Data ..................................................................................................... 56
4.14 Struktur Menu .................................................................................................. 59
4.14.1 Struktur Menu Guest ................................................................................. 59
4.14.2 Struktur Menu Admin ............................................................................... 59
4.14.3 Struktur Menu Customer .......................................................................... 59
4.15 Rancangan Antar Muka (Mockup) .................................................................. 60
4.15.1 Halaman Login ......................................................................................... 60
4.15.2 Halaman Utama Guest .............................................................................. 60
4.15.3 Halaman Utama Customer ........................................................................ 61
4.15.4 Halaman Panduan ..................................................................................... 61
4.15.5 Halaman Profil .......................................................................................... 62
4.15.6 Halaman Produk ....................................................................................... 62
4.15.7 Halaman Kategori ..................................................................................... 63
4.15.8 Halaman Lacak Pesanan ........................................................................... 63
4.15.9 Halaman Riwayat Transaksi ..................................................................... 64
4.15.10 Halaman Utama Admin .......................................................................... 64
4.15.11 Halaman Input Data Admin .................................................................... 65
4.15.12 Halaman Input Data Customer ............................................................... 65
4.15.13 Halaman Input Produk ............................................................................ 66
4.15.14 Halaman Data Order ............................................................................... 66
4.15.15 Halaman Data Riwayat Transaksi Admin .............................................. 67
4.16 Hasil Pembuatan Aplikasi ............................................................................... 68
4.17 Pengujian Sistem ............................................................................................. 75
xiv
BAB V ......................................................................................................................... 77
PENUTUP ................................................................................................................... 77
5.1 Kesimpulan ........................................................................................................ 77
5.2 Saran .................................................................................................................. 77
DAFTAR PUSTAKA ................................................................................................. 78
RIWAYAT HIDUP ..................................................................................................... 80
LAMPIRAN A ............................................................................................................ 81
LAMPIRAN B ............................................................................................................ 84
xv
DAFTAR GAMBAR
Gambar 2. 1 Metode Waterfall.................................................................................... 12
Gambar 3. 1 Alur Penelitian ………………………………..……………………...17
Gambar 4. 1 Logo Kai.scraft ....................................................................................... 21
Gambar 4. 2 Struktur Organisasi ................................................................................. 22
Gambar 4. 3 Use Case Berjalan .................................................................................. 24
Gambar 4. 4 Use Case Usulan..................................................................................... 28
Gambar 4. 5 Diagram Activity Login ......................................................................... 35
Gambar 4. 6 2 Diagram Activity Tambah User .......................................................... 36
Gambar 4. 7 Diagram Activity Profil Toko ................................................................ 37
Gambar 4. 8 Diagram Activity Kelola Produk ........................................................... 38
Gambar 4. 9 Diagram Activity Melihat Produk .......................................................... 39
Gambar 4. 10 Diagram Activity Tambah Keranjang .................................................. 40
Gambar 4. 11 Diagram Activity Riwayat Transaksi ................................................... 41
Gambar 4. 12 Diagram Activity Konfirmasi Bayar .................................................... 42
Gambar 4. 13 Diagram Activity Konfirmasi Status .................................................... 43
Gambar 4. 14 Diagram Activity Laporan Penjualan ................................................... 45
Gambar 4. 15 Diagram Activity Logout ..................................................................... 46
Gambar 4. 16 Sequence Diagram Login Admin ......................................................... 47
Gambar 4. 17 Sequence Diagram Login Pelanggan ................................................... 48
Gambar 4. 18 Sequence Diagram Tambah User ......................................................... 48
Gambar 4. 19 Sequence Diagram Profil Toko ............................................................ 49
Gambar 4. 20 Sequence Diagram Kelola Produk ....................................................... 50
Gambar 4. 21 Sequence Diagram Melihat Produk...................................................... 50
Gambar 4. 22 Sequence Diagram Tambah Keranjang ................................................ 51
Gambar 4. 23 Sequence Diagram Riwayat Transaksi ................................................. 51
Gambar 4. 24 Sequence Diagram Konfirmasi Bayar .................................................. 52
Gambar 4. 25 Sequence Diagram Konfirmasi Status.................................................. 52
Gambar 4. 26 Sequence Diagram Laporan Penjualan ................................................ 53
xvi
Gambar 4. 27 Sequence Diagram Logout ................................................................... 53
Gambar 4. 28 Class Diagram Usulan .......................................................................... 54
Gambar 4. 29 Struktur Menu Guest ............................................................................ 59
Gambar 4. 30 Struktur Menu Admin .......................................................................... 59
Gambar 4. 31 Struktur Menu Customer ...................................................................... 59
Gambar 4. 32 Halaman Login ..................................................................................... 60
Gambar 4. 33 Halaman Utama Guest ......................................................................... 60
Gambar 4. 34 Halaman Utama Customer ................................................................... 61
Gambar 4. 35 Halaman Panduan ................................................................................. 61
Gambar 4. 36 Halaman Profil ..................................................................................... 62
Gambar 4. 37 Halaman Produk ................................................................................... 62
Gambar 4. 38 Halaman Kategori ................................................................................ 63
Gambar 4. 39 Halaman Lacak Pesanan....................................................................... 63
Gambar 4. 40 Halaman Riwayat Transaksi................................................................. 64
Gambar 4. 41 Halaman Utama Admin ........................................................................ 64
Gambar 4. 42 Halaman Input Data Admin ................................................................. 65
Gambar 4. 43 Halaman Input Data Customer ............................................................. 65
Gambar 4. 44 Halaman Input Produk ......................................................................... 66
Gambar 4. 45 Halaman Data Order............................................................................. 66
Gambar 4. 46 Halaman Data Riwayat Transaksi Admin ............................................ 67
xvii
DAFTAR TABEL
Tabel 2. 1 Review Penelitian Terdahulu ..................................................................... 15
Tabel 4. 1 Dokumen Input…………………………………………………………...23
Tabel 4. 2 Dokumen Output ........................................................................................ 24
Tabel 4. 3 Deskripsi Aktor Usulan .............................................................................. 26
Tabel 4. 4 Scenario Login ........................................................................................... 29
Tabel 4. 5 Scenario Tambah User ............................................................................... 29
Tabel 4. 6 Scenario Profil Toko .................................................................................. 30
Tabel 4. 7 Scenario Kelola Produk ............................................................................. 30
Tabel 4. 8 Scenario Melihat Produk ............................................................................ 31
Tabel 4. 9 Scenario Tambah Keranjang ...................................................................... 31
Tabel 4. 10 Scenario Riwayat Transaksi ..................................................................... 32
Tabel 4. 11 Scenario Konfirmasi Bayar ...................................................................... 32
Tabel 4. 12 Scenario Konfirmasi Status ...................................................................... 33
Tabel 4. 13 Scenario Laporan Penjualan..................................................................... 33
Tabel 4. 14 Scenario Logout ....................................................................................... 34
Tabel 4. 15 Tabel Admin ............................................................................................ 56
Tabel 4. 16 Tabel Customer ........................................................................................ 57
Tabel 4. 17 Tabel Order .............................................................................................. 57
Tabel 4. 18 Tabel Order Detail ................................................................................... 58
Tabel 4. 19 Tabel Produk ............................................................................................ 58
Tabel 4. 20 Pengujian Sistem ...................................................................................... 75
xviii
DAFTAR SIMBOL
1. Flowchart
No. Gambar Nama Keterangan
1.
TERMINATOR Untuk memulai suatu
program
2. Garis Alir
Menggambarkan suatu
aliran data dari satu
proses ke proses
selanjutnya.
3.
Proses
Menunjukkan setiap
proses kegiatan yang
terjadi dalam diagram
alir.
4.
Input–Output
Digunakan untuk
mewakili masukkan data
dan menunjukkan hasil
dari suatu proses.
5.
Decision
Melambangkan untuk
pengambilan keputusan
dalam suatu proses yang
akan berjalan
selanjutnya.
5.
TERMINATOR Untuk mengakhiri suatu
proses.
Mulai
Selesai
xix
2. Use Case Diagram
No. Gambar Nama Keterangan
1.
Aktor
Menggambarkan orang,
sistem atau eksternal entitas
yang menyediakan atau
menerima informasi dari
sistem. Aktor memberi input
atau menerima informasi
dari sistem.
2.
Usecase Menunjukkan proses yang
terjadi dalam sistem.
3. Include
Menspesifikasikan bahwa
use case sumber secara
eksplisit.
4. Association
Untuk menghubungkan
suatu objek ke objek
lainnya.
xx
3. Activity Diagram
No. Gambar Nama Keterangan
1. Initial Node Bagaimana objek dibentuk
dan diawali.
2.
Final Node Bagaimana objek dibentuk
dan diakhiri.
3.
Activity
Memperlihatkan bagaimana
masing-masing kelas
antarmuka saling
berinteraksi satu sama lain.
4.
Decision
Perbandingan pernyataan,
penyeleksian data yang
memberikan pilihan untuk
langkah selanjutnya.
5. Fork Node
Satu aliran yang pada tahap
tertentu berubah menjadi
beberapa aliran
6.
Line Connector
Digunakan untuk
menghubungkan satu simbol
dengan symbol lainnya.
7.
Database Digunakan untuk basis data.
xxi
4. Sequence Diagram
No. Gambar Nama Keterangan
1.
All user Menggambarkan aktor yang
berinteraksi dengan sistem.
2.
Lifeline Objek entitas yang saling
berinteraksi.
3.
Message Menyampaikan pesan antar
objek.
4. Message Return
Menyampaikan pesan antar
objek sesuai dengan urutan
kejadian yang terjadi.
5.
Stimulus
Menyatakan suatu objek
megirimkan pesan pada
operasi yang telah
dijalankan kepada objek
lain.
6.
Waktu Aktif Menunjukkan objek dalam
keadaan aktif.
7.
Alternatif
Suatu perwakilan dari
proses yang berhubungan
dengan sistem.
xxii
5. Class Diagram
No. Gambar Nama Keterangan
1.
Class Objek yang berbagi atribut
serta operasi yang sama.
2. Message
Menunjukkan hubungan
antara class pada diagram
class.
xxiii
DAFTAR LAMPIRAN
Lampiran A-1 Format Pembelian
Lampiran A-2 Bukti Pembayaran
Lampiran B-1 Invoice