UNIVERSITAS GUNADARMA

FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI

TULISAN ILMIAH

RANCANG BANGUN SISTEM PENJUALAN ONLINE TOKO

RANCANG BANGUNG SISTEM PENJUALAN
SEPATUKU GEMBIRA
ONLINE MENGGUNAKAN WCOMMERCE DI TOKO
Nama SEPATUKU
: FerdinandGEMBIRA
Marpaung
NPM : 12117312
Jurusan : Sistem Informasi
Pembimbing : Dr. Dina Anggraini, S.Kom, MMSI.
NAMA : FERDINAND MARPAUNG
NPM : 12117312
JURUSAN : SISTEM INFORMASI
PEMBIMBING : REVIN

Diajukan Guna Melengkapi Sebagian Syarat Dalam

Mencapai Gelar Setara Sarjana Muda

Jakarta
2022
 LEMBAR ORIGINALITAS DAN PUBLIKASI
Saya yang bertanda tangan di bawah ini,
Nama : Ferdinand Marpaung
NPM : 12117312
Jurusan : Sistem Informasi
Fakultas : Ilmu Komputer Dan Teknologi Informasi

Judul PI : Pembuatan Rancang Bangun Sistem Penjualan Online

Menggunakan WCommerce Di Toko Sepatuku Gembira

Tanggal Sidang : 12 Maret 2022

Tanggal Lulus : 12 Maret 2022
Menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri dan
dapat dipublikasikan sepenuhnya oleh Universitas Gunadarma. Segala kutipan
dalam bentuk apapun telah mengikuti kaidah dan etika yang berlaku. Mengenai
isi, dan tulisan adalah merupakan tanggung jawab penulis, bukan Universitas
Gunadarma.
Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh kesadaran.

Depok, Maret 2022

Ferdinand Marpaung
 LEMBAR PENGESAHAN

Judul PI : Pembuatan Rancang Bangun Sistem Penjualan Online

Menggunakan WCommerce Di Toko Sepatuku Gembira

Nama : Ferdinand Marpaung

NPM : 12117312

Tanggal Sidang : 12 Maret 2022

Tanggal Lulus : 12 Maret 2022

Mengetahui

Pembimbing Kasubbag Sidang PI

(  Dr.Dina Anggraini, SKom.,MMSI) ( Dr.Sri Nawangsari,

SE.,MM,.M.Ikom.)

Ketua Jurusan

( Dr.Setia Wirawan, SKom., MMSI )

 ABSTRAK
Komputer adalah suatu perangkat untuk mengolah data. Penggunaan komputer ini
harus sesuai dengan kebutuhan organisasi yang memakainya. Komputer
mempunyai kegunaan dalam mendeteksi kesalahan data yang di olah dan dapat
melakukan pekerjaan di luar kemampuan manusia sehingga dapat meminimalisir
waktu. Seperti halnya di toko sepatuku gembira. Sistem yang berjalan saat ini
masih menggunakan sistem semi komputerisasi sehingga sistem tersebut belum
efektif dan efisien. Dalam pengolahan penjualan dan pembelian masih memiliki
beberapa kekurangan diantaranya, dalam pencatatan data masih harus di catat dan
dibukukan dalam pendataan penjualan dan pembelian, hal ini mengakibatkan
informasi yang di sajikan terlambat. Selain itu proses pendataan datanya masih
semi komputerisasi. Berdasarkan masalah di atas maka peneliti mengusulkan
sistem yang baru dalam melakukan penjualan dan pembelian. Sistem yang
mempunyai tempat penyimpanan data. Sehingga diharapkan dengan adanya
sistem yang baru tersebut dapat mengurangi terjadinya kesalahan pada saat
memasukkan data, dan pengolahan data menjadi lebih cepat serta laporan yang
dihasilkan sesuai dengan data yang ada, sehingga di harapkan manajemen data
menjadi lebih baik dan keamanan lebih kuat. Selain itu sistem ini diharapkan
dapat lebih menunjang kegiatan admin dalam mengelola data agar lebih baik.

Kata Kunci : Penjualan, Pembelian, Pengolahan Data

Daftar Pustaka (2015 – 2017)
 KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Pengasih dan
Penyanyang yang telah memberikan seribu jalan, sejuta langkah serta
melimpahkan segala rahmat dan karunia-Nya, sehingga laporan Penulisan Ilmiah
ini dapat berjalan dengan baik dan selesai dengan semestinya.
Tujuan dari Penulisan Ilmiah ini adalah sebagai salah satu persyaratan
untuk mencapai jenjang setara Sarjana Muda jurusan Sistem Informasi di Fakultas
Ilmu Komputer dan Teknologi Informasi Universitas Gunadarma. Penulisan
Ilmiah ini dengan judul “Rancang Bangun Sistem Penjualan Online Menggunakan
WCommerce Di Toko Sepatuku Gembira”. Sebagai bahan penulisan, kami
mengambil data berdasarkan hasil observasi, wawancara, survey serta studi
pustaka yang mendukung penulisan ini.
Hati kecil ini pun menyadari bahwa tanpa bimbingan dan dorongan dari
semua pihak penyusunan Penulisan Ilmiah ini tidak akan berjalan sesuai dengan
yang diharapkan. Oleh karena itu pada kesempatan yang singkat ini, izinkanlah
kami menyampaikan terimakasih kepada :

1. Ibu Prof. Dr.E.S.Margianti, SE, MM,    Selalu Rektor  Universitas

Gunadarma
2. Bapak Prof. Dr. Rer. Nat. Achmad Benny Mutiara, SSi, SKom selalu
Dekan Fakultas Ilmu Komputer dan Teknologi Informasi Universitas
Gunadarma
3. Bapak Dr. Setia Wirawan, SKom, MMSI, selaku Ketua Jurusan Sistem
Infoemasi  Universitas Gunadarma 
4. Ibu Dr. Sri Nawangsari, SE, MM selaku Kepala Sub Bagian Penulisan
Ilmiah Jurusan Sistem Informasi Universitas Gunadarma
5. Ibu Dr.Dina Anggraini, SKom, MSSI, selaku  dosen Pembingbing yang
telah memberikan bimbingan, arahan,.masukan dan waktunya kepada
penulis  selama proses pembuatan Penulisan Ilmiah ini berlangsung hingga
selesai.
 6. Ibu Dr. Fenni Agustina selaku Wali kelas 3KA04 yang telah memberikan
bimbingan, arahan, masukan dan waktunya kepada penulis selama proses
pembuatan Penulisan Ilmiah ini berlangsung hingga selesai.
7. Bapak dan Ibu Dosen   Universitas Gunadarma yang telah memberikan
ilmu pengetahuan kepada penulis.
8. Kedua orangtua saya Budiman Marpaung dan Rotua Lumbanraja, kedua
adik saya Epi Mutiara Marpaung dan Noviyanti Marpaung yang selalu
mberikan motivasi,  dorongan, doa serta kasih sayang yg tak terhingga
tiada hentinya kepada penulis.
9. Teman - teman seperjuangan di kelas 3KA04  yang selalu memberikan
bantuan dan semangat  kepada penulis.
10. Amsal, Qintara  dan Ester yang selalu. memberikan  semangat dan bantuan
kepada penulis.

Akhir kata, besar harapan penulis bahwa laporan penulisan ilmiah ini
dapat memberikan informasi yang bermanfaat dan menambah pengetahuan bagi
pembaca sekalian .

Depok, Maret 2022

Ferdinand Marpaung
 DAFTAR ISI

LEMBAR ORIGINALITAS DAN PUBLIKASI...........................................................ii

LEMBAR PENGESAHAN.............................................................................................iii
ABSTRAK.......................................................................................................................iv
KATA PENGANTAR......................................................................................................v
DAFTAR ISI...................................................................................................................vii
DAFTAR GAMBAR........................................................................................................x
DAFTAR TABEL...........................................................................................................xii
BAB I PENDAHULUAN........................................................................................................1
1.1 Latar Belakang...................................................................................................1
1.2 Ruang Lingkup....................................................................................................3
1.3 Tujuan Penelitian...............................................................................................3
1.4. Metode Penelitian.............................................................................................3
1.4.1 Metode Pengumpulan Data......................................................................3
1.4.2 Metode Pengembangan Sistem.................................................................4
1.5 Sistematika Penulisan........................................................................................4
BAB II TINJAUAN PUSTAKA.................................................................................................6
2.1. Penelitian Terkait.............................................................................................6
2.2. Tinjauan Teori..................................................................................................8
2.2.1 Pengertian Perancangan..........................................................................9
2.2.2 Pengertian Aplikasi..................................................................................9
2.2.3 Pengertian Perancangan Aplikasi...........................................................9
2.2.4 Pengertian Sistem...................................................................................10
2.2.5 Pengertian Informasi..............................................................................10
2.2.6 Pengertian Web.......................................................................................10
2.3. Aplikasi Pendukung.......................................................................................11
2.3.1 XAMPP...................................................................................................11
2.3.2 PHP..........................................................................................................11
 2.3.3 MySQL....................................................................................................13
2.3.4 Wordpress...............................................................................................13
2.4. Pengertian Metode Waterfall........................................................................14
2.5. Pengujian Perangkat Lunak..........................................................................16
2.5.1. Black Box Testing....................................................................................16
BAB 3 PEMBAHASAN.................................................................................................18
3.1 Gambaran Umum Aplikasi.................................................................................18
3.2. Rancangan Sistem UML.....................................................................................18
3.2.1 Perancangan Use Case Diagram...................................................................18
3.2.2 Perancangan Activity Diagram......................................................................20
3.2.3 Perancangan Class Diagram.........................................................................21
3.3 Struktur Navigasi.................................................................................................23
3.3.1 Struktur Navigasi Pengguna.........................................................................24
3.3.2 Struktur Navigasi Admin..............................................................................25
3.4 Rancangan Halaman...........................................................................................26
3.4.1 Rancangan Halaman Login.........................................................................26
3.4.2 Rancangan Halaman Dashboard................................................................26
3.4.3 Rancangan Halaman Belanja......................................................................27
3.4.4 Rancangan Halaman Chart.........................................................................27
3.4.5 Rancangan Halaman Checkout...................................................................28
3.5. Installasi Aplikasi...........................................................................................28
3.5.1. Membuka Hosting..................................................................................28
3.5.2. Memilih Wordpress................................................................................29
3.5.3. Memilih Install Wordpress....................................................................30
3.5.4. Memilih Plugin.......................................................................................30
3.5.5. Memilih WooCommerce........................................................................31
3.5.6. Intall WooCommerce.............................................................................31
3.6. Pembuatan Aplikasi.......................................................................................32
3.6.1 General...........................................................................................................32
3.6.2 Products.........................................................................................................33
3.6.3 Shipping.........................................................................................................34
 3.6.4 Checkout........................................................................................................35
3.6.5 Account..........................................................................................................35
3.7. Tampilan Aplikasi..........................................................................................36
3.7.1. Halaman Home.......................................................................................36
3.7.2. Halaman Cart.........................................................................................36
3.7.3. Halaman Checkout.................................................................................37
3.7.4. Halaman MyAcoount.............................................................................38
3.7.5. Halaman Shop.........................................................................................38
3.7.6. Halaman List Order...............................................................................39
3.7.7. Halaman Detail Account........................................................................39
3.7.8. Halaman Login.......................................................................................40
3.7.9. Halaman Wishlist...................................................................................40
3.7.10. Halaman Tambah Produk.....................................................................41
3.8. Uji Coba Aplikasi...........................................................................................41
3.8.1 Uji Coba User..........................................................................................41
3.8.1 Uji Coba admin.......................................................................................42
BAB IV PENUTUP..............................................................................................................44
4.1. Kesimpulan.......................................................................................................44
4.2. Saran...............................................................................................................44
BAB V DAFTAR PUSTAKA..................................................................................................45
LAMPIRAN.................................................................................................................L-s1
 DAFTAR GAMBAR
Gambar 2. 1 Metode Waterfall..................................................................................15
Gambar 2. 2 Black Box Testing..................................................................................17
Gambar 2. 3 Struktur Navigasi Linear...........................................................................17
Gambar 2. 4 Struktur Navigasi Hirarki.........................................................................18
Gambar 2. 5 Struktur Navigasi Linear..........................................................................18
Gambar 2. 6 Struktur Navigasi Campuran...................................................................18

Gambar 3. 1 Use Case Diagram Pelanggan...............................................................19

Gambar 3. 2 Use Case Diagram Admin.....................................................................19
Gambar 3. 3 Activity Diagram...................................................................................21
Gambar 3. 4 Class Diagram.......................................................................................23
Gambar 3. 5 Struktur Navigasi Pengguna.................................................................24
Gambar 3. 6 Struktur Navigasi Admin......................................................................25
Gambar 3. 7 Rancangan Halaman Login..................................................................26
Gambar 3. 8 Rancangan Halaman Dashboard..........................................................27
Gambar 3. 9 Rancangan Halaman Belanja...............................................................27
Gambar 3. 10 Rancangan Halaman Cart..................................................................28
Gambar 3. 11 Rancangan Halaman Checkout..........................................................28
Gambar 3. 12 Halaman Login Hosting......................................................................29
Gambar 3. 13 Halaman Memilih Cpanel...................................................................29
Gambar 3. 14 Halaman Memilih Wordpress.............................................................30
Gambar 3. 15 Halaman Menginstall Wordpress.......................................................30
Gambar 3. 16 Halaman memilih Plugin....................................................................31
Gambar 3. 17 Halaman Memilih Woocomerce..........................................................31
Gambar 3. 18 Halaman Install Woocommerce..........................................................32
Gambar 3. 19 Halaman Install Pembuatan General.................................................33
Gambar 3. 20 Halaman Setting Produk.....................................................................34
Gambar 3. 21 Halaman Setting Shipping..................................................................34
Gambar 3. 22 Halaman Setting Checkout.................................................................35
Gambar 3. 23 Halaman Setting Account...................................................................36
Gambar 3. 24 Halaman Home....................................................................................36
Gambar 3. 25 Halaman Cart......................................................................................37
Gambar 3. 26 Halaman Checkout..............................................................................37
Gambar 3. 27 Halaman MyAccount..........................................................................38
Gambar 3. 28 Halaman Shop.....................................................................................38
Gambar 3. 29 Halaman List Order............................................................................39
Gambar 3. 30 Halaman Detail Account.....................................................................39
Gambar 3. 31Halaman Login dan Registrasi............................................................40
Gambar 3. 32 Halaman Wishlist................................................................................40
Gambar 3. 33 Halaman Tambah Produk..................................................................41
 DAFTAR TABEL
Tabel 3. 1 Uji Coba User...............................................................................................41
Tabel 3. 2 Tabel Uji Coba Admin..................................................................................42
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan dunia teknologi informasi dan komunikasi yang demikian

cepat sangat mempengaruhi kehidupan masyarakat di berbagai bidang. Hampir
semua instansi pemerintah dan perusahaan swasta memanfaatkan peralatan
teknologi informasi dan komunikasi untuk membantu dalam menyelesaikan
pekerjaan dengan cepat. Salah satu contoh instansi atau perusahaan swasta yang
bergerak dibidang jasa. Pada era perkembangan teknologi informasi sekarang ini
yang semakin hari semakin pesat, dibutuhkan suatu alat yang mampu memberikan
informasi secara cepat dan akurat. Saat ini komputer adalah alat yang mampu
memberikan itu semua. oleh karena itu penerapaan sistem informasi menjadi
kebutuhan yang mutlak dan dapat memberikan keunggulan yang kompetetif hal
tersebut sangat menunjang dalam perusahaan yang berskala besar, maupun kecil
dalam persaingan bisnis yang semakin hari semakin pesat. (L.setyabudhi, 2017)
Usaha Kecil dan Menengah(UKM) mempunyai peran yang cukup besar
dalam pembangunan ekonomi nasional dan internasinal, Hal ini bukanya terlihat
lagi dari kontribusi terhadap Produk Domestik Bruto(PDB) Indonesia yang terus
meningkat setiap tahunya berdasarkan hasil survey dan perhitungan Badan Pusat
Statistik(BPS), kontribusi UKM terhadap PDB(tanpa migas) pada Tahun 1997
tercatat sebesar 62,71 persen pada tahun 2002 kontribusinya meningkat menjadi
63,89 persen. Berdarsarkan data Badan Pusat Statistik (BPS) pada 2008
menunjukkan, sektor UKM dapat menyerap tenaga kerja sebanyak 91 juta orang
(97,3 persen) dan mampu menyumbang PDB Rp.2.121,31

1
 2

Triliun (53,6 persen). Sumbangan UMKM terhadapat ekspor Indonesia

juga tidak disangsikan lagi,mencapai Rp 142,8 triliun (20,02 persen) dengan total
nilai Investasi Rp 462 (UMKM) memiliki peranan yang sangat penting dalam
perekonomian Nasional. Diharapkan Peranan Pemerintah maupun
masyarakat perlu memberikan perhatian yang besar untuk mendorong
pengembangan UKM melalui pendekatan permberdayaan usaha,perlu
memperhatikan aspek social dan budaya di masing-masing daerah,mengingat
usaha kecil dan menengah pada umumnya tumbuh dari masyarakat secara
langsung.disamping itu upaya pengembangan UKM melalui pendekatan
pemberdayaan usaha,perlu memperhatikan aspek social dan budaya di masing-
masing daerah,mengingat usaha kecil dan menengah pada umumnya tumbuh dari
masyarakat secara langsung.di samping itu upaya pengembangan UKM dengan
mensinergikanya dengan industry besar melalui pola kemitraan, juga akan
memperkuat struktur ekonomi baik nasional maupun daerah.partisipasi pihak
terkait atau stakeholders perlu terus di tumbuhkan lainya agar UKM betul-betul
mampu berkiprah lebih besar lagi dalam perekonomian nasional.namun di tengah
upaya pengembangan yang di lakukan pemerintah tersebut, mayoritas UKM
berada pada kondisi yang tidak ideal dimana UKM tidak mengalami
perkembangan yang signifikan dan tidak jauh berbeda kondisinyaa ketika awal
didirikan.Hanya sedikit saja UKM yang mampu berkembang menjadi usaha besar.
Hal itu disebabkan UKM masih memiliki kelemahan dan kendala.
Toko sepatu Gembira membutuhkan sebuah bisnis E-Commerce
melalui website untuk mengatasi permasalahannya yaitu dimana pada
masa pandemic sekarang ini sangat susah bila tidak mempunyai platform
online. Selain itu dengan adanya platform online akan lebih memudahkan
untuk melakukan update stok dan membuat laporan penjualan. Website
E-commerce yang dibangun berbasis content management system (CMS)
dengan aplikasi Wordpress, karena CMS dapat membuat, mengatur,
mendistribusikan, mempublikasi dan menjaga sebuah informasi suatu
perusahaan atau institusi, tanpa harus menguasai tag HTML untuk
 3

mengaplikasikannya. Dan salah satu aplikasi dari CMS adalah Wordpress

yang mudah digunakan.

1.2 Ruang Lingkup

Dalam penulisan ilmiah ini, website ini direncanakan untuk menampilkan

beberapa jenis sepatu dari mulai sepatu anak – anak hingga orang dewasa, website
penjualan sepatu ini hanya berlaku untuk wilayah JABODETABEK saja, untuk
pembayaran ada dua cara pertama bisa melakukan transfer yang kedua bisa COD
(Cash On Delivery) atau ketika barang sampai di rumah, dan untuk pengiriman
barang menggunakan jasa J&T atau SiCepat.

1.3 Tujuan Penelitian

Tujuan pembuatan website berbasis CMS ini untuk membuat sistem
informasi Toko Online Sepatu Ku Gembira agar terkomputerisasi sesuai yang di
butuhkan pengguna. Agar dapat lebih mudah penjual dan pembeli melakukan
transaksi jual beli pada took online ini. Lebih mempersingkat waktu untuk
melakukan penyetokan dan melakukan pelaporan penjualan yang ada.

1.4. Metode Penelitian

Dalam penelitian ini terdapat beberapa penerapan metode yang dilakukan
untuk menyelesaikan permasalahan. Metode penelitian yang dilakukan adalah
sebagai berikut.

1.4.1 Metode Pengumpulan Data

Penulisan ini tidak terlepas dari data-data yang terdapat pada buku, jurnal,
artikel dan menelusuri di internet yang menjadi referensi seperti pedoman
penulisan penelitian ilmiah sebagai landasan teori yang mempunyai keterkaitan
dengan permasalahan yang sedang dihadapi. Penulis melakukan observasi atau
pengamatan secara langsung untuk mempelajari, mengamati dan mengumpulkan
data serta informasi yang berhubungan dengan Sistem Informasi Toko Online
Sepatu Ku Gembira yang sedang berjalan. Wawancara Dalam hal ini penulis
 4

melakukan wawancara untuk melengkapi data yang sudah didapat selama

observasi. Lalu melakukan wawancara kepada pihak-pihak yang terkait agar
dapat memberikan keterangan lebih lanjut tentang informasi yang dibutuhkan
agar data menjadi lebih lengkap dan jelas.

1.4.2 Metode Pengembangan Sistem

Pada tahap ini dilakukan analisis kebutuhan dari aplikasi yang akan
dirancang dan dibuat, meliputi analisis fungsi atau proses yang dibutuhkan,
analisis output, analisis input, dan analisis kebutuhan. Pada tahap ini, dilakukan
perancangan aplikasi yang bertujuan untuk memberikan gambaran apa yang
seharusnya di kerjakan oleh aplikasi dan bagaimana tampilannya, meliputi
rancangan output, rancangan input, rancangan struktur data yang digunakan, dan
rancangan struktur aplikasi. Tahapan ini membantu dalam menspesifikasikan
kebutuhan dan arsitektur aplikasi secara keseluruhan. Pada tahap ini, dilakukan
proses coding atau pembuatan aplikasi. Pembuatan aplikasi dipecah menjadi
beberapa modul yang nantinya akan digabungkan dalam tahap berikutnya. Selain
itu, dalam tahap ini juga dilakukan untuk mengetahui apakah sudah memenuhi
fungsi yang diinginkan atau belum. Dalam tahap ini dilakukan penggabungan
modul-modul yang telah dibuat dan dilakukan pengujian atau testing. Pengujian
ini dilakukan untuk mengetahui apakah aplikasi yang dibuat telah sesuai dengan
desainnya dan apakah masih terdapat kesalahan atau tidak. Tahap ini merupakan
tahapan akhir dalam model waterfall. Aplikasi yang sudah jadi dijalankan serta
dilakukan pemeliharaan (maintenance). Pemeliharaan ini termasuk memperbaiki
kesalahan yang tidak ditemukan pada langkah sebelumnya. Perbaikan
implementasi unit sistem dan peningkatan jasa system sebagai kebutuhan baru.

1.5 Sistematika Penulisan

Untuk memberikan gambaran yang jelas tentang penelitian ini, maka
disusunlah suatu sistematika penulisan yang berisi tentang materi yang dibahas di
setiap bab. Berikut adalah sistematika penulisan laporan ini: PENDAHULUAN
Pada bagian pertama menjelaskan masalah yang akan dibahas secara umum, mulai
 5

dari latar belakang, identifikasi masalah, rumusan masalah, batasan masalah,

tujuan dan manfaat penelitian, metode peneltian serta sistematika penulisan.
TINJAUAN PUSTAKA membahas teori-teori dan metode yang digunakan
sebagai paduan dasar terkait dalam pembuatan penelitian ilmiah. ANALISIS
PERANCANGAN SISTEM DAN IMPLEMENTASI membahas tentang analisa
proses, analisa terhadap sistem yang berjalan. PENUTUP membahas mengenai
kesimpulan dan saran yang merupakan analisis dari analisis kerja sistem yang
telah diuraikan pada bab-bab sebelumnya dan juga saran-saran untuk perbaikan
sistem di masa yang akan datang.
 6

BAB II

TINJAUAN PUSTAKA

2.1. Penelitian Terkait

Dalam rangka mendapat hasil penelitian yang baik, selain melakukan
penelitian langsung, penulis juga melakukan kajian kepustakaan dari hasil
penelitian yang telah dilakukan, berikut hasil penelitian yang menjadi acuan:
1. Menurut (Andika Fauzan Pratama1, 2021) dalam penelitiannya yang berjudul
“IMPLEMENTASI E-COMMERCE DENGAN CONTENT
MANAGEMENT SYSTEM WORDPRESS MENGGUNAKAN
WOOCOMMERCE PADA HOPE AND SOLES.ID” Berdasarkan
penelitian yang telah dilakukan pada toko sepatu hope and soles.id, dapat
diambil beberapa poin kesimpulan sebagai berikut: a.Media pemasaran
menjadilebih efektif dengan adanya website dan didukung oleh teknik SEO
pada mesin pencari untuk website, lalu dengan adanya pendataan produk
sehingga data dapat diolah kembali untuk melakukan pemasaran produk
untuk mendatangkan calon pembeli. b. Dengan tersedianya beberapa fitur,
akan memudahkan pelanggan untuk bertransaksi secara online.
Diantaranya adalah informasi tentang produk, foto testimonial dari
pelanggan, dan pelanggan pun akan mendapatkan informasi nomor resi
pengiriman dan dapat melacak pengiriman pada menu track order,
sehingga menambah pelayanan hope and soles.id menjadi lebih baikdan
informatif. c. Dengan adanya website E-Commerce pada hope and soles.id.
2. pencatatan pesanan tidak dilakukan secara manual, dan tersimpan dengan
baik didalam database website sehingga tidak akan terjadi kesalahan dalam
mengelola pesanan. d.Dengan adanya fitur-fitur yang mendukung untuk
melakukan penjualan dan website sudah teroptimasi maka penjualan akan
lebih maksimal. e.Pada website hope and soles.id menghasilkan
lap.rekapitulasi produk terlaris, lap.pengiriman, lap.pembayaran,
 7

lap.pesanan, lap.pelanggan, dan lap.pendapatanyang dibutuhkan oleh

pemilik toko, sehingga informasi yang dibutuhkan efektif dan informatif.
3. Menurut (Ismaya, 2021) dalam penelitiannya yang berjudul
“PERANCANGAN SISTEM INFORMASI PENJUALAN
MENGGUNAKAN CMS WORDPRESS PADA TOKO IMPORTIR
LAPTOP BANDUNG” Berdasarkan pembahasan yang telah ditulis pada
laporan ini, juga proses analisis dan proses perancangan yang dilakukan,
maka didapatkan kesimpulan bahwa dari “perancangan system informasi
penjualan menggunakan CMS WORDPRESS pada importir laptop ” sebagai
berikut a. Perancangan sistem informasi berbasis ecommerce pada Importir
laptop dapat memberi solusi terhadap permasalahan yang dihadapi oleh
Importir laptop dalam proses penjualan produk serta sebagai solusi pemasaran
produk bagi took Importir laptop. b. Dengan adanya situs web Importir laptop
dapat mempermudah calon pelanggan atau pelanggan untuk membeli dan
melihat produk-produk tanpa datang ke Importir laptop langsung atau
menunggu jawaban dari costumer service. c. Dengan adanya sistem informasi
penjualan berbasis e-commerce, pihak Importir laptop bisa menyelesaikan
jasa pihak ketiga agar meringankan biaya operasional.
4. Menurut (Busthomi Algifari1, 2020) dalam penelitiannya yang berjudul
“Penerapan E-Commerce Untuk Meningkatkan Penjualan Sepatu Pada
Toko Garasi Spokat” Berdasarkan perancangan e-commerce maka dapat
disimpulkan e-coomerce yang dibuat membatu toko Garasi spokat
memperluas ruang lingkup penjualan yang dilakukan secara online, membuat
kegiatan pejualan menjadi lebih efektif karena customer dapat melakukan
pembelian dimanapun dan kapanpun. Meluasnya area jangkauan penjualan
Garasi Spokat maka meningkatkan pendapatan toko. Search Engine
Optimation perlu dioptimalkan penggunaannya sehingga dapat lebih
memperluas lagi area penjualan dengan memasukan website ke page rank
website pada search engine.
5. Menurut (Prasetya1, 2019) di penelitiannya yang berjudul “PENERAPAN E-
COMMERCE BERBASIS WORDPRESSUNTUK PENJUALAN PADA
 8

DISTRO ID CLOTHING” Berdasarkan dari pembahasan penulisan karya

ilmiahini, maka penulis dapat menyimpulkan seperti di bawah
ini:1.Tersedianya modul wishlist sehingga memudahkan pelanggan untuk
menyimpan produk apa saja yang ingin dibeli pada lain
kesempatan.2.Tersedianya informasi data stok produk yang masih tersedia
atau produk yang telah habis memudahkan pemilik toko dan pelanggan
dalam proses jual beli.3.Cakupan area penjualan yang meluaskarena tidak
hanya di sekitar lokasi distro saja. 4.Dengan adanya cetak laporan rekapitulasi
produk terlaris, memudahkan pemilik toko dalam mengevaluasi
penjualan.5.Memudahkan pelanggan dalampemesanan tanpa harus datang ke
toko atau melalui channels sosial media.
6. Menurut (Gorga Hot Martua Pakpahan #1, 2020) dalam penelitiannya yang
berjudul “Analisa Digital Marketing Dan Pembuatan Website Pada Toko
Sepatu Pisang” Dari keseluruhan rangkaian proses yang sudah dilakukan
dalam hal sebagai tindakan wujud nyata Pembuatan Website dan Analisa
Digital Marketing pada Toko Sepatu Pisang Lembang, berikut ini hasil
simpulan yang didapatkan selama penelitian ini berlangsung : Pembuatan
Website pada Sepatu Pisang berhasil diterapkan, karena telah memiliki
struktur informasi yang jelas, website yang responsive dan konten yang
berkualitas dan Analisa Digital Marketing pada Sepatu Pisang berhasil
dilakukan karena telah mencakup penggunaan tools digital marketing analytic
berupa : google analytic, google search console dan mailchimp sebagai tolak
ukur untuk menganalisa seluruh kegiatan digital marketing yang sedang
berjalan pada Toko Sepatu Pisang.

2.2. Tinjauan Teori

Teori umum pada bab ini menjelaskan tentang penjabaran teori-teori yang
di dapat penulis berlandaskan studi pustaka maupun dari buku, yaitu sebagai
berikut.
 9

2.2.1 Pengertian Perancangan

Menurut (Aris et al., 2016) Perancangan adalah suatu kegiatan yang
memiliki tujuan untuk mendesign sistem baru yang dapat menyelesaikan masalah-
masalah yang dihadapi perusahaan yang diperoleh dari pemilihan alternatif sistem
yang terbaik

2.2.2 Pengertian Aplikasi

Menurut Rachmad Hakim S, Aplikasi dalam (Aprianto et al., 2018)
aplikasi adalah perangkat lunak yang digunakan untuk tujuan tertentu, seperti
mengolah dokmen, mengatur windows, permainan, dan sebagainya.

2.2.3 Pengertian Perancangan Aplikasi

Konsep Merancang Multimedia merupakan aplikasi multimedia yang akan
dibuat. Untuk dapat merancang konsep dalam membuat aplikasi multimedia
dibutuhkan kreatifitas. Kreatifitas adalah kemampuan untuk menyajikan gagasan
atau ide baru.Sedangkan inovasi merupakan aplikasi dari gagasan atau ide baru
tersebut.Untuk menciptakan ide yang orisinil tidaklah mudah, maka dapat
digunakan beberapa teknik untuk menciptakan ide, yaitu penyesuaian (adaptasi),
multimedia yang telah ada dianggap belum sesuai dengan lingkungan yang dituju.
Merancang konsep analisis sistem bekerjasama dengan pemakai, mungkin
juga bekerjasama dengan professional komunikasi seperti prosedur, sutradara,
penulis naskah, editor elektronik terlibat dalam merancang konsep yang
menentukan keseluruhan pesan dan membuat aliran (urutan) pada aplikasi
multimedia yang akan dibuat. Untuk dapat merancang konsep dalam membuat
aplikasi multimedia dibutuhkan kreatifitas. Kreatifitas adalah kemampuan untuk
menyajikan gagasan atau ide baru.Sedangkan inovasi merupakan aplikasi dari
gagasan atau ide baru tersebut.Untuk menciptakan ide yang orisinil tidaklah
mudah, maka dapat digunakan beberapa teknik untuk menciptakan ide, yaitu
penyesuaian (adaptasi).
 10

2.2.4 Pengertian Sistem

Menurut Mc Load dalam (Reni Widyastuti, Wahyu Indrarti, Masyitha
Novaliza, 2020) menyatakan bahwa “Sistem adalah sekelompok elemen-elemen
yang terintegrasi dengan tujuan yang sama untuk mencapai tujuan”.
Sistem berasal dari bahasa Latin (Systema) dan bahasa Yunani (Sustena)
adalah suatu kesatuan yang terdiri dari komponen atau elemen yang dihubungkan
bersama untuk memudahkan aliran informasi, materi atau energi untuk mencapai
suatu tujuan. Pada prinsipnya, setiap sistem selalu terdiri atas empat elemen:
1. Objek yang dapat berupa bagian, elemen, ataupun variable. Ia dapat benda
fisik, abstrak, ataupun keduanya sekaligus tergantung kepada sifat sistem
tersebut.
2. Atribut yang menentukan kualitas atau sifat kepemilikan sistem dan
objeknya.
3. Hubungan internal di antara objek-objek di dalamnya.
4. Lingkungan tempat di mana sistem berada.

2.2.5 Pengertian Informasi

Menurut Wahyono dalam (Reni Widyastuti, Wahyu Indrarti, Masyitha
Novaliza, 2020) “Informasi adalah hasil dari pengolahan data, akan tetapi tidak
semua hasil dari pengolahan tersebut bisa menjadi informasi, hasil pengolahan
data yang tidak memberikan makna atau arti serta tidak bermanfaat bagi seseorang
bukanlah merupakan informasi bagi orang tersebut”.

2.2.6 Pengertian Web

Menurut (Arief 2011a:7) Web adalah salah satu aplikasi yang
berisikan dokumen-dokumen multimedia (teks, gambar, animasi, video)
didalamnya yang menggunakan protocol HTTP (Hypertext Transfer
Protoco) dan untuk mengaksesnya menggunakan perangkat lunak yang
disebut broser, semua dokumen web ditampilkan oleh browser dengan cara
diterjemahkan. Beberapa jenis browser yang popular saat ini diantaranya
 11

adalah Internet Explorer yang diproduksi oleh Microsoft, Mozilla Firefox,

Opera, dan Safari.

2.3. Aplikasi Pendukung

Berikut Berikut ini adalah beberapa aplikasi pendukung yang penulis
gunakan dalam membangun sebuah Aplikasi dalam tugas akhir ini adalah sebagai
berikut:

2.3.1 XAMPP
Menurut (Soraya & Supriatna, 2017)XAMPP merupakan paket PHP dan
MySQL berbasis open source, yang dapat digunakan sebagai tool pembantu
pengembangan aplikasi berbasis PHP. XAMPP mengombinasikan beberapa
paket perangkat lunak berbeda ke dalamsatu paket.
Manfaat Xampp sebagai perangkat lunak bebas yang mendukung banyak
sistem operasi, merupakan kompilasi dari beberapa program.Fungsi XAMPP
sendiri adalah sebagai server yang berdiri sendiri (localhost).XAMPP merupakan
perangkat yang menyediakan paket perangkat lunak ke dalam satu buah
paket.Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan
konfigurasi web server Apache, PHP dan MySQL secara manual. XAMPP akan
menginstalasi dan mengkonfigurasikannya secara otomatis.

2.3.2 PHP
Menurut (Soraya & Supriatna, 2017) PHP atau yang memiliki kepanjangan
Hypertext Preprocessor merupakan suatu bahasa pemrograman yang difungsikan
untuk membangun suatu website dinamis. PHP menyatu dengan kode HTML,
maksudnya adalah beda kondisi. HTML digunakan sebagai pembangun atau
pondasi dari kerangka layout web, sedangkan PHP difungsikan sebagai prosesnya
sehingga dengan adanya PHP tersebut, web akan sangat mudah di-maintenance.

2.3.2.1. Tipe-Tipe Data

 12

Tipe data adalah jenis-jenis data adalah yang dikelompokkan berdasarkan

criteria dan watak tertentu yaitu :
1. Integer
Data integer adalah tipe data yang menyatakan bilangan bulat. Jangkauan
bilangan integer tergantung pada platform kira-kira 2 milyar. Integer dapat
dinyatakan dalam notasi bilangan desimal (basis 10), Hexadecimal (basis 16),
dan octal (basis 8). Penemuan notasi Octalharus diawali dengan 0 (nol),
sedangkan notasi Hexadecimal harus diawali dengan 0x.

2. Floating Point
Tipe data Floating-point ta bilangan adalah tipe data bilangan Float, double,
atau real yang dapat dinyatakan dengan bentuk berikut ini.
$=1.234;
$=1.2e3;
3. String
Data string adalah sekumpulan katakter. Dalam PHP suatu karakter disebut
sengan byte sehingga ada 256 karakter berbeda. Suatu literal dapat dinyatakan
dengan tiga cara berbeda:
a. Tanda petik tunggal (single quoted)
b. Tanda petik ganda (double quoted)
c. Heredoc Sintax
4. Array
Array merupakan suatu tipe data bentukan yang terdiri dari sekumpulan tipe
data lainnya.
5. Object
Tipe data object adalah tipe data yang memiliki kombinasi struktur/atribut
dan beberapa fungsi/method. Tipe data object pada PHP adalah untuk
mendukung pemrograman berorientasi object.
6. Resaurce
Suatu resaurce adalah suatu variabel khusus sebagai acuan terhadap suatu
external resource diciptakan dan digunakan oleh fungsi khusus.
 13

7. NULL
Tipe data NULL menyatakan bahwa suatu variabel tidak memiliki nilai.
NULL hanya merupakan nilai mungkin dari tipe NULL yang telah
diperkenalkan pada PHP 4, dan keyword NULL adalah sensitive.

2.3.3 MySQL
Menurut Anhar dalam (Arief et al., 2018) MySQL adalah perangkat lunak
sistem manajemen basis data SQL (database management system) atau DBMS
dari sekian banyak DBMS, seperti Oracle, MS SQL, Postagre SQL, dll. MySQL
adalah database open source yang paling banyak dipakai saat ini. Penyebab utama
MySQL begitu popular dikalangan Web diantaranya adalah karena MySQL
tersedia di berbagai platform, fitur-fitur yang dimiliki MySQL memang yang
biasanya banyak dibutuhkan dalam aplikasi Web, serta memiliki overhead
koneksi yang rendah.
MySQL dikembangkan oleh perusahaan swedia bernama MySQL AB
yang pada saat ini bernama Tcx DataKonsult AB sekitar tahun 1994-1995, namun
cikal bakal kodenya sudah ada sejak tahun 1979. Awalnya Tcx merupakan
perusahaan pengembang software dan konsultan database, dan saat ini MySQL
sudah diambil alih oleh OracleCorp.
Kepopuleran MySQL antara lain karena MySQL menggunakan SQL
sebagai bahasa dasar untuk mengakses databasenya sehingga mudah untuk
digunakan, kinerja query cepat, dan mencukupi untuk kebutuhan database
perusahaan-perusahaan yang berskala kecil sampai menengah, MySQL juga
bersifat open source (tidak berbayar). MySQL merupakan database yang pertama
kali didukung oleh bahasa pemrograman script untuk internet (PHP dan
Perl).MySQL dan PHP dianggap sebagai pasangan software pembangun aplikasi
web yang ideal. MySQL lebih sering digunakan untuk membangun aplikasi
berbasis web, umumnya pengembangan aplikasinya menggunakan bahasa
pemrograman script PHP.

2.3.4 Wordpress
 14

Wordpress merupakan platform yang banyak dikenal oleh kalangan

pembuat website pemula, karena beberapa kemudahan dan keunggulan yang
ditawarkan Ketika menggunakannya Service yang dikerjakan oleh pihak
ketigaimportir laptop juga ditawarkan oleh wordpress khususnya plugin
woocomerce, dari mulai laporan penjualan, pajak, hingga stok barang juga
tersedia pada woocomerce
Dalam dunia bisnis dan marketing peran website itu penting seperti yang
dijelaskan pada beberapa penelitian seperti bahwa website berpengaruh positif
pada kepuasan pelanggan (Marlina,dkk 2019) dan menurut (samuel,dkk 2016)
website juga berpengaruh pada kepercayaan konsumen. Kemudian banyak
manfaat jika suatu bisnis atau perusahaan memiliki atau menggunakan website
dalam menjalankan usahanya seperti yang dituliskan oleh progresstech.co.id yaitu
website mampu meningkatkan profil usaha, dinamis, aksesibilitas, bahkan hingga
menumbuhkan kepuasan pelanggan
Dengan adanya permasalahan-permasalahan pada importir laptop
yang sudah diuraikan di atas, importir laptop memerlukan implementasi e-
commerce berbasis wordpress sebagai wadah untuk menjawab
permasalahan yang ada. Wordpress adalah satu dari sekian banyak CMS
yang ada, yaitu sebuah tools berbasis web yang kegunaannya untuk
memanipulasi dan mengatur isi maupun tampilan pada suatu website.

2.4. Pengertian Metode Waterfall

Menurut Sholikhah, Sairan, dan Syamsiah dalam (Dede
Firmansyah, 2020) menjelaskan bahwa, “Waterfall merupakan model
klasik yang memiliki sifat berurut dalam merancang software”. Metode
waterfall adalah hal yang menggambarkan pendekatan secara sistematis
dan juga berurutan (step by step) pada sebuah pengembangan perangkat
lunak. Tahapan dengan spesifikasi kebutuhan pengguna lalu berlanjut
melalui tahapan-tahapan perencanaan yaitu planning, permodelan,
konstruksi, sebuah system dan penyerahan sistem kepara pengguna,
 15

dukungan pada perangkat lunak lengkap yang dihasilkan (Novitasari

2018).

Gambar 2. 1 Metode Waterfall

Tahap-tahapan metode waterfall

1. Analisis
Tahap ini pengembang sistem diperlukan komunikasi yang bertujuan
untuk memahami perangkat lunak yang diharapkan oleh pengguna dan
batasan perangkat lunak tersebut. Informasi ini biasanya dapat diperoleh
melalui wawancara, diskusi atau survei langsung. Informasi dianalisis
untuk mendapatkan data yang dibutuhkan oleh pengguna.
2. Design
Spesifikasi kebutuhan dari tahap sebelumnya akan dipelajari dalam fase
ini dan desain sistem disiapkan. Desain Sistem membantu dalam
menentukan perangkat keras(hardware) dan sistem persyaratan dan juga
membantu dalam mendefinisikan arsitektur sistem secara keseluruhan.
3. Coding
Pada tahap ini, sistem pertama kali dikembangkan di program kecil yang
disebut unit, yang terintegrasi dalam tahap selanjutnya. Setiap
 16

unitdikembangkan dan diuji untuk fungsionalitas yang disebut sebagai

unit testing.
4. Testing
Seluruh unit yang dikembangkan dalam tahap implementasi
diintegrasikan ke dalam sistem setelah pengujian yang dilakukan masing-
masing unit. Setelah integrasi seluruh sistem diuji untuk mengecek
setiap kegagalan maupun kesalahan.
5. Maintenance
Tahap akhir dalam model waterfall. Perangkat lunak yang sudah jadi,
dijalankan serta dilakukan pemeliharaan. Pemeliharaan termasuk dalam
memperbaiki kesalahan yang tidak ditemukan pada langkah sebelumnya.
Perbaikan implementasi unit sistem dan peningkatan jasa sistem sebagai
kebutuhan baru.

2.5. Pengujian Perangkat Lunak

2.5.1. Black Box Testing

Menurut (Laporan & Di, 2019) Black-box Testing merupakan
sebuah metode yang digunakan untuk menemukan kesalahan dan
mendemonstrasikan fungsional aplikasi saat dioperasikan, apakah input
diterima dengan benar dan output yang dihasilkan telah sesuai dengan
yang diharapkan.
 17

Gambar 2. 2 Black Box Testing

Black Box Testing cenderung untuk menemukan hal-hal berikut:

1. Fungsi yang tidak benar atau tidak ada.

2. Kesalahan antarmuka (interface errors).
3. Kesalahan pada struktur data dan akses basis data.
4. Kesalahan performansi (performance errors).
5. Kesalahan inisialisasi dan terminasi.

2.6. Struktur Navigasi

strutur navigasi adalah gabungan dari struktur referensi informasi
situs web dan mekanisme link yang mendukung pengunjung untuk
melalukan pencarian dalam website. Bentuk dasar dari struktur navigasi
yang biasa digunakan dalam proses pembuatan aplikasi ada empat macam,
yaitu:
1. Linear
Struktur linier pada gambar 2.3 merupakan struktur yang hanya
mempunyai satu rangkaian cerita yang berurut dan menampilkan satu
demi satu tampilan layar secara berurut dan tidak diperbolehkan adanya
percabangan

Gambar 2. 3 Struktur Navigasi Linear

 18

2. Hirarki
Struktur hirarki pada gambar 2.4 merupakan suatu struktur yang
mengandalkan percabangan untuk menampilkan data berdasarakan
kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai
Master Page dan pada menu kedua disebut sebagai Slave Page.

Gambar 2. 4 Struktur Navigasi Hirarki

3. Non Linear
Pada struktur linier pada gambar 2.5 diperkenalkan membuat
penjejakan bercabang. Percabangan ini berbeda dengan percabangan
pada struktur hirarki. Pada percabangan non linier walaupun terdapat
percabangan tetapi tiap-tiap tampilan mempunyai kedudukan yang
sama yang tidak ada pada Master Page dan Slave Page.

Gambar 2. 5 Struktur Navigasi Linear

4. Campuran
Struktur navigasi campuran pada gambar 2.6 merupakan gabungan dari
ketiga struktur navigasi sebelumnya. Struktur navigasi ini banyak
digunakan dalam pembuatan home page sebab dapat memberikan
keinteraksian yang lebih tinggi.

Gambar 2. 6 Struktur Navigasi Campuran

 BAB 3
PEMBAHASAN

3.1 Gambaran Umum Aplikasi

Website sepatuku gembira adalah website yang berisi tentang informasi
pemesanan sepatu pada Toko “sepatuku gembira”. Website ini dibuat untuk
pelanggan yang ini melakukan pemesanan sepatu. Website ini terdiri menu
HOME, keranjang, Checkout, Riwayat Belanja, Daftar, Login dan pencarian.
Proses pemesanan sepatu dilakukan pada halaman HOME yang yang
berisi jenis-jenis sepatu yang dapat dipesan. Pelanggan dapat memesan dengan
cara memilih sepatu apa saja yang ingin dipesan. Hasil pemesanan seluruh user
dapat dilihat pada halaman keranjang dan jika sudah sesuai dapat mengisi alamat
pengiriman dan biaya pengiriman. Hasil pesanan ditampilkan bentuk tabel.
Website ini dibangun menggunakan PHP sebagai bahasa pemrogramannya dan
MySQL sebagai database.

3.2 Rancangan Sistem UML

Pembuatan UML bertujuan untuk menggambarkan sebuah website yang
dibuat. Penulis menggunakan 3 diagram UML yaitu use case diagram, activity
diagram dan class diagram.

3.2.1 Perancangan Use Case Diagram

Alur pemesanan Toko sepatukugembira dibuat dalam dibuat dalam use
case diagram dapat dilihat pada gambar 3.1 dan gambar 3.2 dibawah ini :

18
 19

Gambar 3. 1 Use Case Diagram Pelanggan

Deskripsi gambar 3.1:

 Pelanggan mendaftar sebagai pelanggan sepatukugembira
 Pelanggan mengisi data pelanggan sepatukugembira
 Pelanggan melakukan login
 Pelanggan mengiput barang yang ingin dipesan

Gambar 3. 2 Use Case Diagram Admin

Deskripsi gambar3.2:
 Admin melakukan login ke halaman admin
 Admin melakukan penginputan barang
 Admin mengecek data pelanggan
 Admin mengecek pemesanan
 Admin menginput no resi pengiriman barang
 Admin mengkonfirmasi pemesanan
 20

3.2.2 Perancangan Activity Diagram

Activity diagram merupakan diagram flowchart yang diperluas untuk
menunjukkan satu aktivitas ke aktivitas lainnya. Diagram ini, terdapat aktivitas-
aktivitas yang ada di use case. Mulai dari pelanggan yang mengakses website
untuk melihat produk yang ada, lalu pelanggan memesan suatu produk dan sampai
kepada admin yang akan memproses pemesannnya sampai pelanggan menerima
produk yang diinginkan. Dapat dilihat pada gambar 3.3 merupakan activity
diagram pada website sepatukugembira. Dimulai dari pelanggan membuka
website lalu mengisi data data yang diperlukan untuk login, memilih barang yang
akan dibeli setelah melakukan checkout pelanggan melakukan pembayaran,
setelah pembayaran diterima admin akan mengecek bukti pembayaran dan saldo
rekening jika sudah sesuai makan admin akan melakukan pengiriman barang,
setelah barang diterima pelanggan akan mengkonfirmasi bahwa barang sudah
diterima.
 21

Gambar 3. 3 Activity Diagram

3.2.3 Perancangan Class Diagram
Class diagram digunakan untuk membantu melihat struktur database yang
ada pada sebuah website. Class diagram memiliki area pokok yaitu nama, atribut,
dan operasi. Nama berguna untuk memberi identitas pada sebuah class, atribut
berguna untuk memberi karakter pada pada data, dan operasi berguna untuk
memberi aksi yang dilakukan. Pada gambar 3.4 merupakan Class Diagram pada
website sepatukugembira dimana terdapat 7 tabel.
 Tabel admin berisikan id_admin, password, username dan nama lengkap
admin
 Tabel pelanggan berisikan id_pelanggan, email, nama pelanggan, nomor
telepon, dan alamat pelanggan
 22

 Tabel Pembelian berisikan id_pembelian, id_pelanggan, id_ongkkir, tanggal

pembelian, nama kota, tarif, alamat pengiriman, size produk, status pembelian
dan resi pengiriman
 Tabel ongkir berisikan id_ongkir, nama kota dan tariff
 Tabel pembayaran berisikan id_pembayaran, id_pembelian, bank, jumlah,
nama,tanggal dan bukti pembayaran
 Tabel produk berisikan id_produk, nama produk, harga produk, berat, foto
produk, deskripsi dan stok
 Tabel pembelian produk berisikan id_pembelian_produk, id_pembelian,
id_produk, nama, berat, harga, subharga dan subberat
 23

Gambar 3. 4 Class Diagram

3.3 Struktur Navigasi

Struktur navigasi digunakan untuk menjelaskan alur website bagi
pengguna maupun admin. Pembuatan struktur navigasi diperlukan untuk
memudahkan dalam mencari informasi. Berikut ini adalah struktur navigasi yang
digunakan pada website Septukugembira. Struktur navigasi yang digunakan pada
website. Struktur navigasi tebagi menjadi 2 bagian yaitu untuk pengguna dan
untuk admin yaitu menggunakan struktur navigasi hirarki.
 24

3.3.1 Struktur Navigasi Pengguna

Gambar 3. 5 Struktur Navigasi Pengguna

Pada gambar 3.5 merupakan struktur navigasi pengguna yang

menggunakan struktur navigasi campuran dimana mengakses website melalui
halaman index user. Setelah melalui halaman index user pengguna melakukan
login jenis Struktur Navigasi pengguna adalah campuran. Setelah itu pengguna
dapat melakukan akses beberapa menu, yaitu:
A. Home
Menu home berisi produk yang ditawarkan pada toko "Sepatuku gembira”.
B. Keranjang
Menu keranjang berisi tabel barang yang ingin dipesan.
C. Daftar
Menu daftar digunakan untuk membuat akun pelanggan.
D. Login
Menu login digunakan untuk pelanggan masuk kedalam akun user.
E. Checkout
Menu checkout berisi form pembelian produk yang harus diisi oleh
pelanggan.
F. Riwayat Belanja
Menu riwayat belanja digunakan untuk pelanggan agar dapat mengetahui
barang apa saja yang telah dibeli oleh pelanggan. Dan digunakan untuk
penginputan bukti pembayaran.
G. Logout
 25

Menu logout digunakan untuk keluar dari akun pada website.

3.3.2 Struktur Navigasi Admin

Gambar 3. 6 Struktur Navigasi Admin

Pada gambar 3.6 merupakan struktur navigasi admin yang menggunakan

struktur navigasi campuran dimana admin mengakses website melalui halaman
index admin. Setelah melalui halaman index admin harus login sebelum masuk ke
halaman admin struktur navigasi admin yaitu hirarki dan Non Linear, jadi struktur
navigasi jenin campuran. Setelah login admin dapat melakukan akses menu yang
ada, yaitu :
A. Home
Menu home berisi tabel data admin seperti, username, password dan nama
admin.
B. Produk
Menu produk berisi produk-produk yang dijual admin dapat menambahkan
produk, mengubah produk dan menghapus produk.
C. Pelanggan
Menu pelanggan berisi tabel data pelanggan, admin dapat menghapus data
pelanggan.
D. Pembelian
Menu pembelian berisi tabel data pembelian, detail pembelian dan detail
pembelian.
E. Laporan
Menu laporan berisi tabel laporan pembelian.
F. Logout
Menu logout digunakan admin untuk keluar dari halaman admin.
 26

3.4 Rancangan Halaman

Pada tahap ini, penulis menampilkan berupa rancangan halaman yang akan
ditampilkan dalam bentuk gambar.

3.4.1 Rancangan Halaman Login

Gambar 3.7 adalah rancangan halaman awal untuk member login ataupun
melakukan pendaftaran.

Gambar 3. 7 Rancangan Halaman Login

3.4.2 Rancangan Halaman Dashboard

Gambar 3.8 adalah rancangan halaman awal setelah member berhasil login
kedalam web
 27

Gambar 3. 8 Rancangan Halaman Dashboard

3.4.3 Rancangan Halaman Belanja
Gambar 3.9 adalah rancangan halaman member untuk melihat produk
produk yang di perjual belikan oleh penjual.

Gambar 3. 9 Rancangan Halaman Belanja

3.4.4 Rancangan Halaman Chart

Gambar 3.10 adalah rancangan halaman member untuk melihat produk
produk yang telah ditambahkan untuk melakukan pemeriksaan sebelum
pembayaran.
 28

Gambar 3. 10 Rancangan Halaman Cart

3.4.5 Rancangan Halaman Checkout

Gambar 3.11 adalah rancangan halaman member setelah pelakukan
pengecekan dan digunakan untuk mengisi detail pembelian yang berguna untuk
metode pengiriman dan metode pembayaran yang dilakukan.

Gambar 3. 11 Rancangan Halaman Checkout

3.5. Installasi Aplikasi

Pada tahap ini, penulis menjelaskan proses installasi aplikasi untuk toko
online Toko Sepatuku Gembira.

3.5.1. Membuka Hosting

 29

Buka situs https://member.jagoanhosting.com/clientarea.php dan masukan

username serta password lalu klik login. Tampilan terlihat seperti gambar 3.12.

Gambar 3. 12 Halaman Login Hosting

3.5.2. Memilih Wordpress
Setelah berhasil login maka masuk ke cpanel untuk menemukan plugin
wordpress dapat dilihat pada gambar 3.13 dan gambar 3.14.

Gambar 3. 13 Halaman Memilih Cpanel

 30

Gambar 3. 14 Halaman Memilih Wordpress

3.5.3. Memilih Install Wordpress

Gambar 3.15 melakukan installasi wordpress Setelah memilih wordpess
maka klik install untuk melanjutkan installasi wordpess dan tunggu sampai selesai

Gambar 3. 15 Halaman Menginstall Wordpress

3.5.4. Memilih Plugin

Gambar 3.16 memilih menu plugin, lalu add plugin untuk mencari
wooComerce
 31

Gambar 3. 16 Halaman memilih Plugin

3.5.5. Memilih WooCommerce

Gambar 3.17 mencari plugin WooComeerce pada kolom pencarian dan
pilih install.

Gambar 3. 17 Halaman Memilih Woocomerce

3.5.6. Install WooCommerce

Gambar 3.18 merupakan proses installasi dan akan masuk ke menu
pengaturan aplikasi, pastikan proses installasi berjalan dengan sempurna dan
berhasil.
 32

Gambar 3. 18 Halaman Install Woocommerce

3.6. Pembuatan Aplikasi

Pada tahap ini, penulis akan memperlihatkan cara pembuatan halaman
halaman yang akan di gunakan pada website sepatukugembira. Setelah selesai
melakukan penginstallan, makan pengaturan dan pembuatan halaman dasar
terdapat pada menu setting. Penulis dapat mengubah hal-hal inti terkait toko
online di halaman Settings. Jika ingin mengubah lokasi, jenis mata uang yang
digunakan, atau pengaturan API, maka dapat mengunjungi halaman ini.

3.6.1 General
Pada gambar 3.19 tab ini dapat mengubah pengaturan utama toko, seperti
location (lokasi), currency (mata uang), enable/disable taxes
(mengaktifkan/menonaktifkan pajak), display notice untuk semua pengunjung,
dan lain sebagainya.
 33

Gambar 3. 19 Halaman Install Pembuatan General

3.6.2 Products
Pada gambar 3.20 tab ini dapat digunakan untuk mengubah berbagai
pengaturan produk, seperti measurement unit, enable/disable review
(mengaktifkan/menonaktifkan ulasan). Di halaman Display, penuls idapat
membuat perubahan pada halaman standar WooCommerce, kategori standar untuk
produk, dan ukuran gambar produk. Plihan default stock dan enable/disable stock
management (mengaktifkan/menonaktifkan stok) dapat diubah di halaman
Inventory. penulispun dapat mengaktifkan pilihan untuk menerima notifikasi
email di saat suatu produk sudah habis atau tidak lagi tersedia. Jika penulis
menjual produk yang dapat diunduh, maka di tab Downloadable Products,
 34

tentukan konfigurasi untuk metode pengunduhan dan pembatasan akses saat

mengunduh.

Gambar 3. 20 Halaman Setting Produk

3.6.3 Shipping
Pada gambar 3.21 di Bagian ini pasti akan menjadi favorit jika barang
yang dijual ditawarkan ke seluruh dunia. Di tab Shipping, Anda dapat
menambahkan shipping zones (zona pengiriman), shipping methods (metode
pengiriman), dan rates (tarif pengiriman). Bahkan Anda bisa menentukan tarif
pengiriman yang berbeda ke lokasi terpisah!.

Gambar 3. 21 Halaman Setting Shipping

 35

3.6.4 Checkout
Pada gambar 3.22 Penulis dapat mengubah pengaturan checkout dan
menambahkan metode baru untuk pembayaran di tab ini. Dengan menginstall
ekstensi, default WooCommerce setup memperbolehkan Anda untuk memilih
salah satu dari lima metode pembayaran. Topik ini akan dibahas lebih lanjut di
sesi berikutnya terkait tutorial WooCommerce. Melalui tab Checkout, Anda pun
bisa memasang HTTPS untuk bisnis online Anda dan menyesuaikan pilihan lain.

Gambar 3. 22 Halaman Setting Checkout

3.6.5 Account
Pada gambar 3.23 Di tab ini dapat mengubah lokasi halaman akun
(account page location), mengaktifkan/menonaktifkan registrasi pelanggan
(enable/disable customer registration), dan megonfigurasi keseluruhan proses
registrasi akun (account registration).
 36

Gambar 3. 23 Halaman Setting Account

3.7. Tampilan Aplikasi

Pada tahap ini, penulis akan memperlihatkan aplikasi yang sudah selesai
terbuat.

3.7.1. Halaman Home

Gambar 3.24 adalah halaman home yang berguna untuk melihat produk
produk baru yang telah di update, setelah login berhasil pelanggan akan membuka
halaman home ini.

Gambar 3. 24 Halaman Home

3.7.2. Halaman Cart
 37

Gambar 3.25 adalah cart digunakan untuk menyimpan produk yang akan
dibeli, dan bisa digunakan untuk memfilter produk yang akan di beli agar dapat
melakukan pembayaran.

Gambar 3. 25 Halaman Cart

3.7.3. Halaman Checkout

Gambar 3.26 adalah halaman checkout digunakan untuk memilih metode
pembayaran, pengisian alamat kirim dan detail identitas dan mengetahui jumlah
yang harus dibayar untuk produk yang akan dibeli.

Gambar 3. 26 Halaman Checkout

 38

3.7.4. Halaman MyAcoount

Gambar 3.27 adalah halaman my account yang berisi pengaturan
pengaturan dasar untuk melakukan konfigurasi pada akun kita, seperti merubah
email, merubah password dan masih banyak lagi.

Gambar 3. 27 Halaman MyAccount

3.7.5. Halaman Shop

Gambar 3.28 adalah halaman shop digunakan untuk pelanggan melihat
produk produk yang dijual pada website.

Gambar 3. 28 Halaman Shop

 39

3.7.6. Halaman List Order

Gambar 3.29 adalah halaman order, digunakan admin untuk melihat
banyaknya orderan yang masuk dari pelanggan untuk membeli produk yang
tersedia, bisa juga untuk melihat status pembayaran,status pengiriman, dan barang
sudah dikirim atau belumnya.

Gambar 3. 29 Halaman List Order

3.7.7. Halaman Detail Account

Gambar 3.30 adalah detail account digunakan untuk mengupdate data data
pribadi pelanggan.

Gambar 3. 30 Halaman Detail Account

 40

3.7.8. Halaman Login

Gambar 3.31 adalah halaman login dan register digunakan pelanggan atau
admin untuk memasuki ecommerce ini, dan bisa digunakan untuk memdaftarkan
member baru yang ingin melakukan transaksi.

Gambar 3. 31Halaman Login dan Registrasi

3.7.9. Halaman Wishlist

Gambar 3.32 adalah halaman wishlist digunakan pelanggan untuk
menyimpan produk yang menurutnya ingin dibeli, tetapi belum memiliki dana
nya.

Gambar 3. 32 Halaman Wishlist

 41

3.7.10. Halaman Tambah Produk

Gambar 3.33 adalah halaman untuk tambah produk yang digunakan admin
untuk menambah suatu produk yang baru akan dipublikasikan.

Gambar 3. 33 Halaman Tambah Produk

3.8. Uji Coba Aplikasi

Pada tahap ini, Pengujian black box berfokus pada persyaratan fungsional
perangkat lunak. Pengujian sistem informasi skripsi ini menggunakan data uji
berupa data input dari administrator pada sistem yang telah dibuat.

3.8.1 Uji Coba User

Tabel 3.1 adalah adalah hasil black box testing yang di lakukan sebagai
user.
Tabel 3. 1 Uji Coba User
Hasil Yang
No. Halaman Test Case Hasil Keterangan
Diharapkan
1 Halaman Login Isi Username Akan Berhasil Sukses Valid
Admin dan dan akan
Password muncul
 42

yang sudah Halaman

didaftarkan Dashboard
sebelumnya User
Memilih
Barang yang
barang dan
2 Halaman Shop dipilih masuk Sukses Valid
menambahkan
kedalam cart
ke cart
Memilih Barang yang
barang dan dipilih masuk
3 Halaman Shop Sukses Valid
menambahkan kedalam
ke wishlist wishlist
Membuka
Memilih menu
Halaman barang dan checkout
4 Sukses Valid
checkout melakukan untuk mengisi
checkout detail
pengiriman

3.8.2 Uji Coba admin

Tabel 3.1 adalah adalah hasil black box testing yang di lakukan sebagai
admin.
Tabel 3. 2 Tabel Uji Coba Admin
Hasil Yang
No. Halaman Test Case Hasil Keterangan
Diharapkan
Isi Username Akan Berhasil
Admin dan dan akan
Halaman Password muncul
1 Sukses Valid
Login yang sudah Halaman
didaftarkan Dashboard
sebelumnya Admin
2 Halaman Membuka Menu Sukses Valid
 43

menampilkan
menu jumlah
Pesanan
pesanan pesanan yang
masuk
Halaman akan
Mengklik
3 Logout membukan Sukses Valid
menu logout
halaman login
Isi Username
Admin dan Berhasil
Halaman Lupa Password mengirimkan Tidak
4 Tidak Valid
Password yang sudah password baru Sukses
didaftarkan ke email
sebelumnya
 BAB IV

PENUTUP

4.1. Kesimpulan
Website penjualan online toko Sepatuku Gembira telah berhasil dibuat.
Pembautan Toko Sepatuku Gembira menggunakan CMS wordpress dengan plugin
WooCommerce. Dibangunnya Sistem toko online ini ditujukan agar dapat
mempermudah para karyawan dalam melakukan pekerjaannya. Dengan adanya
Sistem toko online ini, para karyawan dapat melakukan pekerjaan secara
komputerisasi. Sistem toko online diterapkan dengan menggunakan platform yang
jelas, sehingga tingkat keakuratan yang didapat dari database sangat tinggi,
sehingga juga mengurangi kesalahan yang dilakukan. Website toko Sepatuku
Gembira bisa diakses pada link url sepatukugembira.my.id.

4.2. Saran

Masih terdapat banyak kekurangan yang mungkin ada didalam system

keuangan yang dibangun oleh penulis, seperti dibutuhkan fitur bestseller untuk
penjual, diskon untuk member tertentu, pemilihan pengiriminan yang masih
sedikit.

44
 BAB V

DAFTAR PUSTAKA

[1.] Anwar, Syaifil, dan Fahrizal Irawan. 2017. “Rancangan Bangun Sistem
Informasi Pengajuan Pengadaan Suku Cadang Mobil Pada PT. Andalan
Chrisdeco Berbasis Web, Pilar Nusa Mandiri. Vol 13, No 1”.

[2.] Hastanti, Rulia Puji, Bambang Eka Purnama, dan Indah Uly Wardati. 2015.
“Sistem Penjualan Berbasis Web (E-commerce)” Pada Toko Distro
Kabupaten Pacitan, Bianglala Informatika. Vol 3, No 2.

[3.] Hendini, Ade. 2016. “Pemodelan UML Sistem Informasi Monitoring

Penjualan Dan Stok Barang”, Khatulistiwa Informatika. Vol 4, No 2.

[4.] Kusuma, Septiyan Aji, dan Sekreningsih Nita. 2019. “Rancangan Bangun
Media Pembelajaran Pengenalan Tumbuhan Bagi Penyandang Tuna Rungu
Pada SDLB Manisrejo Kota Madiun”, Seminar Nasional Teknologi
Informasi dan Komunikasi. Vol 2, No 1.

[5.] Masykur, Fauzan, dan Fiqiana Prasetiyowati. 2016. “Aplikasi Rumah Pintar
(Smart Home) Pengendalian Elektronik Rumah Tangga Berbasis Web,
Sains, Teknologi dan Industri”. Vol 14, No 1.

[6.] Munawar. 2005. “Model Berorientasi Objek dengan UML. Jakarta: PT Elex
Komputindo”.

[7.] MZ, M Komarudin. 2016. “Pengujian Perangkat Lunak Metode Black-Box

Berbasis Equivalence Partitions Pada Aplikasi Sistem Informasi Sekolah,
Mikrotik”. Vol 6, No 3.

[8.] Prasetyo, Ekkal. 2015. “Rancangan Bangun Sistem Informasi Sekolah

Tinggi Ilmu Ekonomi Rahmanyah Kabupaten Musi Banyuasin Berbasis
Website, Informatika”. Vol 1, No 2.

[9.] Prasetyo, Andri, dan Rahel Susanti. 2016. “Sistem Informasi Penjualan
Berbasis Web Pada PT. Cahaya Sejahtera Sentosa Blitar, Ilmiah Teknologi
dan Informasi ASIA”. Vol 10, No 2.

45
 LAMPIRAN

5. Source Code Wocoommerce

<?PHP
* Plugin Name: WooCommerce
* Plugin URI: https://woocommerce.com/
* Description: An eCommerce toolkit that helps you sell anything.
Beautifully.
* Version: 6.3.0-dev
* Author: Automattic
* Author URI: https://woocommerce.com
* Text Domain: woocommerce
* Domain Path: /i18n/languages/
* Requires at least: 5.6
* Requires PHP: 7.0
*
* @package WooCommerce
*/

defined( 'ABSPATH' ) || exit;

if ( ! defined( 'WC_PLUGIN_FILE' ) ) {
define( 'WC_PLUGIN_FILE', __FILE__ );
}

// Load core packages and the autoloader.

require __DIR__ . '/src/Autoloader.php';
require __DIR__ . '/src/Packages.php';

if ( ! \Automattic\WooCommerce\Autoloader::init() ) {
return;
}
\Automattic\WooCommerce\Packages::init();

// Include the main WooCommerce class.

L-1
 if ( ! class_exists( 'WooCommerce', false ) ) {
include_once dirname( WC_PLUGIN_FILE ) . '/includes/class-
woocommerce.php';
}

// Initialize dependency injection.

$GLOBALS['wc_container'] = new Automattic\WooCommerce\Container();

/**
* Returns the main instance of WC.
*
* @since 2.1
* @return WooCommerce
*/
function WC() { // phpcs:ignore
WordPress.NamingConventions.ValidFunctionName.FunctionNameInvalid
return WooCommerce::instance();
}

/**
* Returns the WooCommerce PSR11-compatible object container.
* Code in the `includes` directory should use the container to get
instances of classes in the `src` directory.
*
* @since 4.4.0
* @return \Psr\Container\ContainerInterface The WooCommerce PSR11
container.
*/
function wc_get_container() : \Psr\Container\ContainerInterface {
return $GLOBALS['wc_container'];
}

// Global for backwards compatibility.

$GLOBALS['woocommerce'] = WC();

6. Source Code Cart

<?php

L-2
/**
* Cart Page
*
* This template can be overridden by copying it to
yourtheme/woocommerce/cart/cart.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.8.0
*/

defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_cart' ); ?>

<form class="woocommerce-cart-form" action="<?php echo

esc_url( wc_get_cart_url() ); ?>" method="post">
<?php do_action( 'woocommerce_before_cart_table' ); ?>

<table class="shop_table shop_table_responsive cart woocommerce-cart-

form__contents" cellspacing="0">
<thead>
<tr>
<th class="product-remove">&nbsp;</th>
<th class="product-thumbnail">&nbsp;</th>
<th class="product-name"><?php
esc_html_e( 'Product', 'woocommerce' ); ?></th>
<th class="product-price"><?php
esc_html_e( 'Price', 'woocommerce' ); ?></th>
<th class="product-quantity"><?php
esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
<th class="product-subtotal"><?php
esc_html_e( 'Subtotal', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody>
<?php do_action( 'woocommerce_before_cart_contents' ); ?>

<?php
foreach ( WC()->cart->get_cart() as $cart_item_key =>
$cart_item ) {
$_product =
apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item,
$cart_item_key );

L-3
 $product_id =
apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'],
$cart_item, $cart_item_key );

if ( $_product && $_product->exists() &&

$cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true,
$cart_item, $cart_item_key ) ) {
$product_permalink =
apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ?
$_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
?>
<tr class="woocommerce-cart-form__cart-
item <?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item',
$cart_item, $cart_item_key ) ); ?>">

<td class="product-remove">
<?php
echo
apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
'wooco
mmerce_cart_item_remove_link',
sprintf(

'<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-

product_sku="%s">&times;</a>',

esc_url( wc_get_cart_remove_url( $cart_item_key ) ),

esc_html__( 'Remove this item', 'woocommerce' ),

esc_attr( $product_id ),

esc_attr( $_product->get_sku() )
),

$cart_item_key
);
?>
</td>

<td class="product-thumbnail">
<?php
$thumbnail =
apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(),
$cart_item, $cart_item_key );

if ( ! $product_permalink ) {
echo $thumbnail; //
PHPCS: XSS ok.
} else {
printf( '<a href="%s">

L-4
%s</a>', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
}
?>
</td>

<td class="product-name" data-

title="<?php esc_attr_e( 'Product', 'woocommerce' ); ?>">
<?php
if ( ! $product_permalink ) {
echo
wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(),
$cart_item, $cart_item_key ) . '&nbsp;' );
} else {
echo
wp_kses_post( apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">
%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item,
$cart_item_key ) );
}

do_action( 'woocommerce_after_cart_item_name', $cart_item,

$cart_item_key );

// Meta data.
echo
wc_get_formatted_cart_item_data( $cart_item ); // PHPCS: XSS ok.

// Backorder notification.
if ( $_product-
>backorders_require_notification() && $_product-
>is_on_backorder( $cart_item['quantity'] ) ) {
echo
wp_kses_post( apply_filters( 'woocommerce_cart_item_backorder_notification', '<p
class="backorder_notification">' . esc_html__( 'Available on backorder', 'woocommerce'
) . '</p>', $product_id ) );
}
?>
</td>

<td class="product-price" data-

title="<?php esc_attr_e( 'Price', 'woocommerce' ); ?>">
<?php
echo
apply_filters( 'woocommerce_cart_item_price', WC()->cart-
>get_product_price( $_product ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
?>
</td>

<td class="product-quantity" data-

L-5
title="<?php esc_attr_e( 'Quantity', 'woocommerce' ); ?>">
<?php
if ( $_product-
>is_sold_individually() ) {
$product_quantity =
sprintf( '1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key );
} else {
$product_quantity =
woocommerce_quantity_input(
array(
'input_n
ame' => "cart[{$cart_item_key}][qty]",
'input_v
alue' => $cart_item['quantity'],
'max_v
alue' => $_product->get_max_purchase_quantity(),
'min_va
lue' => '0',
'product
_name' => $_product->get_name(),
),
$_product,
false
);
}

echo
apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key,
$cart_item ); // PHPCS: XSS ok.
?>
</td>

<td class="product-subtotal" data-

title="<?php esc_attr_e( 'Subtotal', 'woocommerce' ); ?>">
<?php
echo
apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart-
>get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key );
// PHPCS: XSS ok.
?>
</td>
</tr>
<?php
}
}
?>

<?php do_action( 'woocommerce_cart_contents' ); ?>

<tr>
<td colspan="6" class="actions">

L-6
 <?php if ( wc_coupons_enabled() ) { ?>
<div class="coupon">
<label
for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label> <input
type="text" name="coupon_code" class="input-text" id="coupon_code" value=""
placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> <button
type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply
coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?
></button>
<?php
do_action( 'woocommerce_cart_coupon' ); ?>
</div>
<?php } ?>

<button type="submit" class="button"

name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?
php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>

<?php
do_action( 'woocommerce_cart_actions' ); ?>

<?php wp_nonce_field( 'woocommerce-

cart', 'woocommerce-cart-nonce' ); ?>
</td>
</tr>

<?php do_action( 'woocommerce_after_cart_contents' ); ?>

</tbody>
</table>
<?php do_action( 'woocommerce_after_cart_table' ); ?>
</form>

<?php do_action( 'woocommerce_before_cart_collaterals' ); ?>

<div class="cart-collaterals">
<?php
/**
* Cart collaterals hook.
*
* @hooked woocommerce_cross_sell_display
* @hooked woocommerce_cart_totals - 10
*/
do_action( 'woocommerce_cart_collaterals' );
?>
</div>

L-7
<?php do_action( 'woocommerce_after_cart' ); ?>

7. Source Code Checkout

<?php

defined( 'ABSPATH' ) || exit;

if ( ! wp_doing_ajax() ) {
do_action( 'woocommerce_review_order_before_payment' );
}
?>
<div id="payment" class="woocommerce-checkout-payment">
<?php if ( WC()->cart->needs_payment() ) : ?>
<ul class="wc_payment_methods payment_methods methods">
<?php
if ( ! empty( $available_gateways ) ) {
foreach ( $available_gateways as $gateway ) {
wc_get_template( 'checkout/payment-
method.php', array( 'gateway' => $gateway ) );
}
} else {
echo '<li class="woocommerce-notice
woocommerce-notice--info woocommerce-info">' .
apply_filters( 'woocommerce_no_available_payment_methods_message', WC()-
>customer->get_billing_country() ? esc_html__( 'Sorry, it seems that there are no
available payment methods for your state. Please contact us if you require assistance or
wish to make alternate arrangements.', 'woocommerce' ) : esc_html__( 'Please fill in your
details above to see available payment methods.', 'woocommerce' ) ) . '</li>'; //
@codingStandardsIgnoreLine
}
?>
</ul>
<?php endif; ?>
<div class="form-row place-order">
<noscript>
<?php
/* translators: $1 and $2 opening and closing emphasis tags
respectively */
printf( esc_html__( 'Since your browser does not support
JavaScript, or it is disabled, please ensure you click the %1$sUpdate Totals%2$s button
before placing your order. You may be charged more than the amount stated above if you
fail to do so.', 'woocommerce' ), '<em>', '</em>' );
?>
<br/><button type="submit" class="button alt"
name="woocommerce_checkout_update_totals" value="<?php esc_attr_e( 'Update
totals', 'woocommerce' ); ?>"><?php esc_html_e( 'Update totals', 'woocommerce' ); ?
></button>
</noscript>

<?php wc_get_template( 'checkout/terms.php' ); ?>

L-8
 <?php do_action( 'woocommerce_review_order_before_submit' ); ?>

<?php echo apply_filters( 'woocommerce_order_button_html', '<button

type="submit" class="button alt" name="woocommerce_checkout_place_order"
id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' .
esc_attr( $order_button_text ) . '">' . esc_html( $order_button_text ) . '</button>' ); //
@codingStandardsIgnoreLine ?>

<?php do_action( 'woocommerce_review_order_after_submit' ); ?>

<?php wp_nonce_field( 'woocommerce-process_checkout',

'woocommerce-process-checkout-nonce' ); ?>
</div>
</div>
<?php
if ( ! wp_doing_ajax() ) {
do_action( 'woocommerce_review_order_after_payment' );
}

8. Source Code Dashboard

<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}

$allowed_html = array(
'a' => array(
'href' => array(),
),
);
?>

<p>
<?php
printf(
/* translators: 1: user display name 2: logout url */
wp_kses( __( 'Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)',
'woocommerce' ), $allowed_html ),
'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
esc_url( wc_logout_url() )
);
?>
</p>

<p>
<?php

L-9
 /* translators: 1: Orders URL 2: Address URL 3: Account URL. */
$dashboard_desc = __( 'From your account dashboard you can view your <a
href="%1$s">recent orders</a>, manage your <a href="%2$s">billing address</a>, and
<a href="%3$s">edit your password and account details</a>.', 'woocommerce' );
if ( wc_shipping_enabled() ) {
/* translators: 1: Orders URL 2: Addresses URL 3: Account URL. */
$dashboard_desc = __( 'From your account dashboard you can view
your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">shipping and
billing addresses</a>, and <a href="%3$s">edit your password and account details</a>.',
'woocommerce' );
}
printf(
wp_kses( $dashboard_desc, $allowed_html ),
esc_url( wc_get_endpoint_url( 'orders' ) ),
esc_url( wc_get_endpoint_url( 'edit-address' ) ),
esc_url( wc_get_endpoint_url( 'edit-account' ) )
);
?>
</p>

<?php
/**
* My Account dashboard.
*
* @since 2.6.0
*/
do_action( 'woocommerce_account_dashboard' );

/**
* Deprecated woocommerce_before_my_account action.
*
* @deprecated 2.6.0
*/
do_action( 'woocommerce_before_my_account' );

/**
* Deprecated woocommerce_after_my_account action.
*
* @deprecated 2.6.0
*/
do_action( 'woocommerce_after_my_account' );

/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */

9. Source Code Form Login

<?php

L-10
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}

do_action( 'woocommerce_before_customer_login_form' ); ?>

<?php if ( 'yes' ===

get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

<div class="u-columns col2-set" id="customer_login">

<div class="u-column1 col-1">

<?php endif; ?>

<h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2>

L-11
 <form class="woocommerce-form woocommerce-form-login
login" method="post">

<?php do_action( 'woocommerce_login_form_start' );

?>

<p class="woocommerce-form-row woocommerce-form-

row--wide form-row form-row-wide">
<label for="username"><?php
esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span
class="required">*</span></label>
<input type="text" class="woocommerce-Input
woocommerce-Input--text input-text" name="username" id="username"
autocomplete="username" value="<?php echo ( !
empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username']
) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<p class="woocommerce-form-row woocommerce-form-
row--wide form-row form-row-wide">
<label for="password"><?php
esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span
class="required">*</span></label>
<input class="woocommerce-Input
woocommerce-Input--text input-text" type="password" name="password"
id="password" autocomplete="current-password" />
</p>

<?php do_action( 'woocommerce_login_form' ); ?>

<p class="form-row">
<label class="woocommerce-form__label
woocommerce-form__label-for-checkbox woocommerce-form-
login__rememberme">
<input class="woocommerce-
form__input woocommerce-form__input-checkbox" name="rememberme"
type="checkbox" id="rememberme" value="forever" /> <span><?php
esc_html_e( 'Remember me', 'woocommerce' ); ?></span>
</label>
<?php wp_nonce_field( 'woocommerce-login',
'woocommerce-login-nonce' ); ?>
<button type="submit" class="woocommerce-
button button woocommerce-form-login__submit" name="login" value="<?php
esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in',
'woocommerce' ); ?></button>
</p>
<p class="woocommerce-LostPassword lost_password">
<a href="<?php echo
esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your
password?', 'woocommerce' ); ?></a>
</p>

<?php do_action( 'woocommerce_login_form_end' ); ?

>

L-12
 </form>

<?php if ( 'yes' ===

get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

</div>

<div class="u-column2 col-2">

<h2><?php esc_html_e( 'Register', 'woocommerce' );

?></h2>

<form method="post" class="woocommerce-form woocommerce-

form-register register" <?php do_action( 'woocommerce_register_form_tag'
); ?> >

<?php do_action( 'woocommerce_register_form_start'

); ?>

<?php if ( 'no' ===

get_option( 'woocommerce_registration_generate_username' ) ) : ?>

<p class="woocommerce-form-row woocommerce-

form-row--wide form-row form-row-wide">
<label for="reg_username"><?php
esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span
class="required">*</span></label>
<input type="text"
class="woocommerce-Input woocommerce-Input--text input-text"
name="username" id="reg_username" autocomplete="username" value="<?php
echo ( ! empty( $_POST['username'] ) ) ?
esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php //
@codingStandardsIgnoreLine ?>
</p>

<?php endif; ?>

<p class="woocommerce-form-row woocommerce-form-

row--wide form-row form-row-wide">
<label for="reg_email"><?php
esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span
class="required">*</span></label>
<input type="email" class="woocommerce-
Input woocommerce-Input--text input-text" name="email" id="reg_email"
autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ?
esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php //
@codingStandardsIgnoreLine ?>
</p>

L-13
 <?php if ( 'no' ===
get_option( 'woocommerce_registration_generate_password' ) ) : ?>

<p class="woocommerce-form-row woocommerce-

form-row--wide form-row form-row-wide">
<label for="reg_password"><?php
esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span
class="required">*</span></label>
<input type="password"
class="woocommerce-Input woocommerce-Input--text input-text"
name="password" id="reg_password" autocomplete="new-password" />
</p>

<?php else : ?>

<p><?php esc_html_e( 'A link to set a new

password will be sent to your email address.', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_register_form' ); ?>

<p class="woocommerce-form-row form-row">

<?php wp_nonce_field( 'woocommerce-
register', 'woocommerce-register-nonce' ); ?>
<button type="submit" class="woocommerce-
Button woocommerce-button button woocommerce-form-register__submit"
name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?
>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
</p>

<?php
do_action( 'woocommerce_register_form_end' ); ?>

</form>

</div>

</div>
<?php endif; ?>

<?php do_action( 'woocommerce_after_customer_login_form' ); ?>

L-14
10.Halaman Home

11. Halaman Cart

L-15
12. Halaman Checkout

L-16
13. Halaman MyAcoount

14. Halaman Shop

L-17
15. Halaman List Order

L-18
16. Halaman Detail Account

17. Halaman Login

L-19