CANVAS WEB DESIGN & DEVELOPMENT Periode: 20 20 …

i

KERJA PRAKTIK – IF184801

Implementasi Fitur-Fitur Lelang Online dan Marketplace

Menggunakan Teknologi MERN pada Aplikasi OkeBid

CANVAS WEB DESIGN & DEVELOPMENT

Redtop Complex D7 Jl. Pecenongan Raya No.72

Jakarta Pusat 10120

Periode: 20 Juli 2020 – 20 September 2020

Oleh:

Bagas Yanuar Sudrajad 05111740000074

Pembimbing Jurusan

Kelly Rossa Sungkono, S. Kom., M. Kom.

Pembimbing Lapangan

Hermanto

DEPARTEMEN TEKNIK INFORMATIKA

Fakultas Teknologi Elektro dan Informatika Cerdas

Institut Teknologi Sepuluh Nopember

Surabaya 2021

ii

[Halaman ini sengaja dikosongkan]

iii

KERJA PRAKTIK – IF184801



CANVAS WEB DESIGN & DEVELOPMENT

Redtop Complex D7 Jl. Pecenongan Raya No.72

Jakarta Pusat 10120

Oleh:


Pembimbing Departemen Kelly Rossa Sungkono, S. Kom., M. Kom.

Pembimbing Lapangan Hermanto

DEPARTEMEN TEKNIK INFORMATIKA

Fakultas Teknologi Elektro dan Informatika Cerdas

Institut Teknologi Sepuluh Nopember

Surabaya 2021

iv


v

LEMBAR PENGESAHAN

KERJA PRAKTIK



Oleh:


Mengetahui,

Canvas Web Design &

Development,

Pembimbing Kerja Praktik

Menyetujui,

Dosen Pembimbing,

Kerja Praktik

Hermanto

Kelly Rossa Sungkono,

S. Kom., M. Kom.

NIP. 1994201912088

SURABAYA, JANUARI 2021

Stamp

vi


vii



Nama Mahasiswa : Bagas Yanuar Sudrajad

NRP : 05111740000074

Departemen : Teknik Informatika FTEIC-ITS

Pembimbing Jurusan : Kelly Rossa Sungkono,

S. Kom., M. Kom.

Pembimbing Lapangan : Hermanto

ABSTRAK

Canvas Web Design & Development, merupakan tim web

developer dan web designer yang didirikan pada 2008 serta bergerak

di bidang jasa desain dan pengembangan aplikasi web dan aplikasi

mobile. Canvas Web Design & Development memiliki fokus di

bidang design dan pengembangan web untuk CMS profil

perusahaan, e-commerce, toko online, custom web application,

aplikasi mobile, dan optimasi mesin pencarian. Sejak didirikan

hingga sekarang, Canvas telah menghasilkan lebih dari 200 situs

web profil perusahaan, toko online, dan aplikasi web khusus.

Pada saat ini Canvas Web Design & Development sedang

mengembangkan aplikasi lelang online dan marketplace bernama

OkeBid. OkeBid merupakan aplikasi berbasis web yang dibangun

menggunakan teknologi MongoDB untuk basis data, Reactjs untuk

library frontend serta Nodejs dan Expressjs untuk membangun

Backend API.

Maka dari itu pada kesempatan kerja praktik ini penulis

bergabung di dalam tim software engineer Canvas Web Design &

Development dalam pengembangan aplikasi OkeBid.

Pengembangan yang dilakukan penulis adalah penambahan fitur

variasi produk, fitur upgrade membership, fitur keranjang belanja,

fitur wishlist, fitur token/poin. Penerapan fitur-fitur tersebut

mencakup tiga aplikasi, yaitu aplikasi backend berbasis NodeJS dan

viii

basis data MongoDB, serta dua aplikasi frontend untuk admin dan

penjual-pembeli berbasis ReactJs.

Kata kunci: Software Engineering, MERN, Javascript, NoSQL,

Lelang Online, Marketplace, API.

ix

KATA PENGANTAR

Puji syukur penulis haturkan kepada Tuhan Yesus Kristus

karena berkat anugerah-Nya penulis dapat melaksanakan salah satu

kewajiban penulis sebagai mahasiswa Departemen Informatika,

yakni Kerja Praktik (KP).

Penulis menyadari masih ada kekurangan baik dalam

pelaksanaan kerja praktik maupun penyusunan buku laporan ini.

Namun, saya berharap buku laporan ini dapat menambah wawasan

pembaca dan dapat menjadi sumber referensi. Penulis

mengharapkan kritik dan saran yang membangun untuk

kesempurnaan buku laporan kerja praktik ini.

Melalui buku ini, penulis juga ingin menyampaikan rasa terima

kasih kepada orang-orang yang telah membantu, baik langsung

maupun tidak langsung, dalam pelaksanaan kerja praktik hingga

penyusunan laporan. Orang-orang tersebut antara lain adalah:

1. Kedua Orang Tua penulis.

2. Ibu Kelly Rossa Sungkono S. Kom., M. Sc. selaku dosen

pembimbing kerja praktik.

3. Bapak Ary Mazharuddin Shiddiqi, S. Kom., M. Comp. Sc., Ph.

D. selaku koordinator Kerja Praktik.

4. Pak Hermanto selaku pembimbing lapangan dari tim software

engineer Canvas Web Design & Development.

Surabaya, Januari 2021

Bagas Yanuar Sudrajad

x


xi

DAFTAR ISI

LEMBAR PENGESAHAN ............................................................. v

ABSTRAK ..................................................................................... vii

KATA PENGANTAR .................................................................... ix

DAFTAR ISI ................................................................................... xi

DAFTAR TABEL .......................................................................... xv

DAFTAR GAMBAR ................................................................... xvii

BAB I PENDAHULUAN ............................................................... 1

1.1. Latar Belakang ................................................................. 1

1.2. Tujuan .............................................................................. 2

1.3. Manfaat ............................................................................ 2

1.4. Rumusan masalah ............................................................ 3

1.5. Lokasi dan Waktu Kerja Praktik ...................................... 3

1.6. Metodologi Kerja Praktik................................................. 3

1.7. Sistematika Laporan ......................................................... 5

BAB II PROFIL PERUSAHAAN .................................................. 7

2.1. Profil Canvas Web Design & Development .................... 7

BAB III TINJAUAN PUSTAKA ................................................... 9

3.1. Pemrograman Web ........................................................... 9

3.2. Visual Studio Code .......................................................... 9

3.3. HTML .............................................................................. 9

3.4. Javascript........................................................................ 10

3.5. Node.js ........................................................................... 10

3.6. Application Programming Interface (API)..................... 11

3.7. Express.js ....................................................................... 11

xii

3.8. React.js ........................................................................... 11

3.9. MongoDB ...................................................................... 12

3.10. Mongoose ................................................................... 13

3.11. Postman ...................................................................... 14

BAB IV PENGERJAAN KERJA PRAKTIK ................................ 15

4.1. Fitur Variasi Produk ....................................................... 15

4.1.1. Kebutuhan Pengguna ............................................. 15

4.1.2. Model Basis Data ................................................... 15

4.1.3. Diagram Kasus Penggunaan .................................. 16

4.1.4. Spesifikasi Kasus Penggunaan ............................... 17

4.1.5. Tampilan Fitur pada Halaman Web ....................... 26

4.2. Fitur Upgrade Membership ............................................ 28


4.2.2. Model Basis Data ................................................... 28


4.2.4. Spesifikasi Kebutuhan Pengguna ........................... 30

4.2.5. Tampilan Fitur Pada Halaman Web ....................... 35

4.3. Fitur Keranjang Belanja ................................................. 37


4.3.2. Analisa Kebutuhan Pengguna ................................ 38

4.3.3. Implementasi Context API pada Aplikasi Frontend

38




4.4. Fitur Wishlist ................................................................. 46

xiii


4.4.2. Model Basis Data ................................................... 46




4.5. Fitur Token/Poin ............................................................ 49


4.5.2. Model Basis Data ................................................... 50



4.5.1. Tampilan Fitur Pada Halaman Web ....................... 54

BAB V KESIMPULAN ................................................................. 57

5.1. Kesimpulan .................................................................... 57

5.2. Saran .............................................................................. 57

DAFTAR PUSTAKA .................................................................... 59

BIODATA PENULIS I .................................................................. 61

xiv


xv

DAFTAR TABEL

Tabel 1 Spesifikasi Kasus Penggunaan UC001 ............................. 17









Tabel 10 Spesifikasi Kasus Penggunaan UC010 ........................... 24















xvi







xvii

DAFTAR GAMBAR

Gambar 1. Model untuk variasi produk ......................................... 16

Gambar 2. Usecase diagram admin ................................................ 17

Gambar 3. Usecase diagram penjual .............................................. 17

Gambar 4. Fitur Variasi Produk-Pembeli ...................................... 27

Gambar 5. Fitur Variasi Produk-Penjual ........................................ 27

Gambar 6. Fitur Variasi Produk-Penjual ........................................ 28

Gambar 7. Model Basis Data Fitur Upgrade Membership ............ 29

Gambar 8. Use Case Diagram Fitur Upgrade Membership ........... 30

Gambar 9. Pembelian Upgrade Keanggotaan ................................ 36

Gambar 10. Pembayaran-Upgrade-Keanggotaan .......................... 36

Gambar 11. Admin Pengelolaan-Upgrade-Keanggotaan ............... 37

Gambar 12. Diagram Kasus Penggunaan Keranjang Belanja ........ 40

Gambar 12. Keranjang Belanja ...................................................... 45

Gambar 13. Halaman Checkout ..................................................... 45

Gambar 14. Diagram Basis Data Wishlist ..................................... 46

Gambar 15. Diagram Kasus Penggunaan Wishlist ........................ 47

Gambar 16. Halaman Wishlist ....................................................... 49

Gambar 17. Diagram Basis-Data Fitur Token ............................... 50

Gambar 18. Diagram Kasus Pengunaan Wishlist .......................... 51

Gambar 19. Halaman Pengelolaan Pembelian Token .................... 55

Gambar 20. Halaman Pembelian Token ........................................ 55

Gambar 21. Halaman Pengelolaan Token ...................................... 56

xviii


1

BAB I

PENDAHULUAN

1.1. Latar Belakang

Perkembangan teknologi di dunia website saat ini semakin

pesat dan tidak terbatas. Hal ini ditandai dengan maraknya

masyarakat yang mulai mengunakan website di segala bidang

terutama untuk mempermudah proses bisnis usaha atau kegiatan.

Berbagai website dibuat mulai dari web profil pribadi maupun profil

perusahaan, web komunitas (community), web penjualan (e-

commerce), web portal (news), hingga iklan (advertising).









web profil perusahaan, toko online, dan aplikasi web khusus. [1]

Melalui kerja praktik ini penulis memperoleh kesempatan

untuk mempraktikkan langsung ilmu pengetahuan yang sudah

didapat selama perkuliahan dalam bidang pengembangan web pada

proyek yang sedang ditangani Canvas Web Design & Development.

2

Penulis mendapat jobdesc antara lain membantu

pengembangan pada aplikasi marketplace dan lelang online OkeBid.

Detail dari jobdesc yang ada yaitu mengerjakan fitur membership

upgrade, keranjang belanja, fiter dan pencarian produk, membuat

sistem poin/token, serta menambahkan fitur variasi produk.

1.2. Tujuan

Tujuan kerja praktik ini adalah untuk menyelesaikan kewajiban

kuliah kerja praktik di Institut Teknologi Sepuluh Nopember dengan

beban dua SKS. Selain itu juga turut serta membantu Canvas Web

Design & Development dalam proses pengembangan aplikasi

OkeBid.

1.3. Manfaat

Manfaat yang dapat diperoleh penulis dari kegiatan

pengembangan web di tim software engineer Canvas Web & Design

antara lain adalah:

1. Penulis dapat menerapkan ilmu pengetahuan tentang

pengembangan aplikasi web yang selama ini diterima di bangku

perkuliahan pada dunia kerja sesungguhnya.

2. Penulis mendapatkan ilmu baru terkait implementasi aplikasi

web menggunakan teknologi MERN dari proses implementasi

yang tidak didapatkan di bangku perkuliahan.

3

1.4. Rumusan masalah

Berikut ini rumusan masalah pada kerja praktik di tim software

engineer Canvas Web Design & Development:

3. Bagaimana tahapan pengembangan web yang dilakukan di

Canvas Web Design & Development?

4. Bagaimana menggunakan tools dan teknologi yang digunakan

Canvas Web Design & Development dalam tahapan

pengembangan web?

1.5. Lokasi dan Waktu Kerja Praktik

Kerja praktik ini dilaksanakan pada waktu dan tempat sebagai

berikut:

Lokasi : Canvas Web Design & Development

Alamat : Redtop Complex D7 Jl. Pecenongan Raya No.72

Jakarta Pusat 10120

Waktu : 20 Juli 2020- 20 September 2020

Hari Kerja : Senin-Jumat

Jam Kerja : Fleksibel

1.6. Metodologi Kerja Praktik

Tahapan pengerjaan kerja praktik dijabarkan sebagai berikut:

1. Perumusan Masalah

Untuk mengetahui bagaimana menyelesaikan permasalahan

pada tiap pekerjaan, pembimbing lapangan menjelaskan mengenai

4

alur pengembangan web yang dilakukan di Canvas Web Design &

Development. Pada tiap fitur yang dikembangkan juga dijelaskan

mengenai proses bisnis pada fitur tersebut dan apa saja kebutuhan

yang diberikan oleh klien. Dari penjelasan tersebut dihasilkan

catatan-catatan penting mengenai gambaran sistem. Dengan begitu

proses pengerjaan proyek pengembangan web dapat dilakukan

sesuai dengan alur kerja di Canvas Web Design & Development dan

juga dapat memenuhi kebutuhan klien secara keseluruhan.

2. Studi Literatur

Setelah ditentukan pembagian tugas pengembangan web oleh

Canvas Web Design & Development, dilakukan studi literatur

mengenai cara implementasinya sesuai kebutuhan user dan

teknologi yang digunakan Canvas Web Design & Development.

Pada tahap ini dilakukan proses pencarian, pembelajaran,

pengumpulan dan pemahaman informasi serta literatur yang

berkaitan untuk membantu dalam merumuskan solusi dan

implementasinya. Informasi bisa didapat dari internet untuk istilah-

istilah umum yang digunakan dalam pengimplementasian suatu

sistem atau aplikasi.

3. Solusi dan Implementasi Sistem

Tahap ini meliputi penjelasan mengenai solusi yang diberikan

serta implementasi sistem yang didasarkan pada tahap perancangan

dan analisis. Jika ada masukan atau perbaikan dari pembimbing

lapangan maka akansegera diaplikasikan

5

4. Pengujian dan Evaluasi

Pengujian dilakukan dengan menguji fitur-fitur yang telah

dibuat. Kesesuaian sistem dengan kebutuhan menentukan

keberhasilan dalam pengujian. Hal ini menghasilkan hasil evaluasi

apakah sistem sudah sesuai dengan tujuan dan kebutuhan atau

belum.

1.7. Sistematika Laporan

Laporan kerja praktik ini terdiri dari tujuh bab dengan rincian

sebagai berikut:

1. BAB I Pendahuluan

Pada bab ini dijelaskan tentang latar belakang permasalahan,

tujuan, waktu pelaksanaan, serta sistematika pengerjaan kerja

praktik dan juga penulisan laporan kerja praktik.

2. BAB II Profil Perusahaan

Pada bab ini, dijelaskan secara rinci tentang profil, perusahaan

tempat kami melaksanakan kerja praktik, yakni Canvas Web Design

& Development.

3. BAB III Tinjauan Pustaka

Pada bab ini, dijelaskan mengenai tinjauan pustaka dan literatur

yang digunakan dalam penyelesaian kerja praktik.

4. BAB IV Pengerjaan Kerja Praktik

6

Pada bab ini, dijelaskan mengenai kegiatan yang dilakukan

selama kerja praktik di tim software engineer Canvas Web Design &

Development.

5. Kesimpulan dan Saran

Pada bab ini, dipaparkan kesimpulan yang dapat diambil dan

juga saran selama pengerjaan kerja praktik.

7

BAB II

PROFIL PERUSAHAAN

2.1. Profil Canvas Web Design & Development









web profil perusahaan, toko online, dan aplikasi web khusus [1].

8


9

BAB III

TINJAUAN PUSTAKA

Pada bab ini, akan dijelaskan mengenai dasar teori yang

digunakan selama proses pengembangan aplikasi web di Canvas

Web Design & Development.

3.1. Pemrograman Web

Aplikasi web adalah aplikasi yang mengunakan teknologi

browser untuk menjalankan aplikasi dan diakses melalui jaringan

komputer. Sedangkan pemrograman web adalah pemrograman yang

digunakan untuk membangun aplikasi web [2].

3.2. Visual Studio Code

Visual Studio Code adalah editor kode yang dikembangkan

oleh Microsoft untuk berbagai macam sistem operasi seperti

Windows, Linux dan macOS. Visual Studio Code memberikan

dukungan untuk debugging, kontrol Git tertanam, penyorotan

sintaksis, penyelesaian kode cerdas, snippet, dan lain-lain. Visual

Studio Code juga dapat disesuaikan dan dikembangkan sesuai

dengan kebutuhan pengguna melalui opsi tambahan [3].

3.3. HTML

HTML merupakan singkatan dari Hypertext Markup

Language, setiap kata memiliki arti sebagai berikut:

10

Hypertext adalah teks berupa link yang bisa menuju suatu alamat

tertentu.

Markup adalah tag yang mengatur layout dan tampilan visual

yang dapat dilihat pada website.

Jadi HTML merupakan script pemrograman yang mengatur

penyajian informasi pada website [4].

3.4. Javascript

Javascript adalah bahasa pemrograman terinterpretasi dengan

kemampuan object-oriented (OO). Secara sintaktis, inti dari

JavaScript menyerupai C, C++, dan Java, dengan konsep

pemrograman seperti pernyataan if, loop while dan operator &&.

Namun kesamaan di antaranya hanya sebatas kesamaan sintaktis [5].

3.5. Node.js

Node.js adalah runtime JavaScript yang dibangun di atas mesin

JavaScript bernama Chrome V8. Sebagai runtime JavaScript yang

bersifat asynchronous event-driven, Node.js dirancang untuk

membuat aplikasi jaringan yang scalable.

Hal ini berbeda dengan model konkurensi yang lebih umum, di

mana thread sistem operasi digunakan. Jaringan berbasis thread

relatif tidak efisien dan sangat sulit digunakan. Selain itu, pengguna

Node.js bebas dari kekhawatiran dead locking. Hampir tidak ada

fungsi di Node.js yang secara langsung melakukan input/output,

11

sehingga proses tidak pernah diblokir. Karena tidak ada yang

menghalangi, sistem yang scalable sangat sesuai untuk

dikembangkan di Node.js [6].

3.6. Application Programming Interface (API)

API memungkinkan developer untuk mengintegrasikan sistem

dengan sistem yang berbeda. API berperan sebagai jembatan yang

berisi kontrak antara kedua belah pihak. Kontrak tersebut berisi

protokol, fungsi, dan konvensi yang sudah disepakati agar proses

pengembangan dapat berjalan mudah tanpa adanya miskomunikasi

[7].

3.7. Express.js

Web Framework yang cepat, unopinionated, dan minimalis

untuk Node.js. Express adalah framework aplikasi web Node.js yang

minimal dan fleksibel yang menyediakan serangkaian fitur yang kuat

untuk aplikasi web dan mobile. Dengan berbagai metode utilitas

HTTP dan middleware. Pembuatan API yang berkualitas menjadi

cepat dan mudah. Express menyediakan lapisan tipis fitur aplikasi

web dasar, tanpa mengaburkan fitur Node.js. Banyak Framework

populer yang dibangun berdasar Express [8].

3.8. React.js

React adalah library JavaScript yang bersifat deklaratif, efisien,

dan fleksibel untuk membangun antarmuka pengguna. Dengan react,

12

UI yang kompleks dapat dibuat dari potongan kecil kode yang

terisolasi yang disebut "komponen" [9].

3.9. MongoDB

MongoDB adalah database dokumen dengan skalabilitas dan

fleksibilitas yang tinggi dengan query dan pengindeksan. Model

dokumen MongoDB mudah dipelajari dan digunakan oleh

pengembang. Terdapat driver untuk lebih dari 10 bahasa, dan

komunitas telah membuat lebih banyak untuk bahasa lainnya.

MongoDB menyimpan data dalam dokumen yang fleksibel

seperti JSON, yang berarti field dapat bervariasi dari dokumen ke

dokumen dan struktur data dapat diubah seiring waktu. Model

dokumen memetakan ke objek dalam kode aplikasi, membuat data

mudah digunakan. Kueri ad hoc, pengindeksan, dan agregasi real-

time memberikan cara yang ampuh untuk mengakses dan

menganalisis data.

MongoDB adalah basis data terdistribusi pada intinya, sehingga

ketersediaan tinggi, penskalaan horizontal, dan distribusi geografis

dibangun dan mudah digunakan. MongoDB gratis untuk digunakan.

Versi yang dirilis sebelum 16 Oktober 2018 diterbitkan di bawah

AGPL. Semua versi yang dirilis setelah 16 Oktober 2018, termasuk

perbaikan patch untuk versi sebelumnya, diterbitkan di bawah Server

Side Public License (SSPL) v1 [10].

13

3.10. Mongoose

Mongoose adalah library Object Data Modeling (ODM) untuk

MongoDB dan Node.js. Mongoose mengelola hubungan antara data,

menyediakan validasi skema, dan digunakan untuk menerjemahkan

antara objek dalam kode dan representasi objek tersebut di

MongoDB [11].

Berikut adalah beberapa terminology yang terdapat pada

MongoDB.

Collection

Collection dalam bahasa Mongo setara dengan tabel dalam

database relasional. Koleksi dapat menyimpan banyak JSON

document.

Document

Document setara dengan catatan atau row di SQL. Meskipun field

SQL dapat mereferensikan data di tabel lain, Mongo document

biasanya menggabungkannya dalam document.

Fields

Fields atau atribut mirip dengan kolom dalam tabel SQL.

Schema

Meskipun Mongo tidak memiliki skema, SQL mendefinisikan

skema melalui definisi tabel. 'Schema’ pada Mongoose adalah

struktur data document (atau bentuk document) yang diberlakukan

melalui lapisan aplikasi.

14

Model

Model adalah konstruktor tingkat tinggi yang mengambil schema

dan membuat document instance.

3.11. Postman

Postman merupakan sebuah tool REST client berbasis web

yang tersedia dalam bentuk ekstensi pada Google Chrome. Berguna

untuk melakukan pengujian dari web service yang sedang

dikembangkan [12].

15

BAB IV

PENGERJAAN KERJA PRAKTIK

4.1. Fitur Variasi Produk

4.1.1. Kebutuhan Pengguna

Klien project OkeBid meminta adanya fitur variasi produk pada

marketplace yang ada. Variasi produk merupakan opsi bagi penjual

untuk memberi pilihan variasi untuk suatu produk. Contoh variasi

produk adalah ukuran pada sepatu, ukuran dan warna pada baju.

Disepakati produk dapat memiliki variasi sampai dua varian. Tiap

varian memiliki detail informasi masing-masing seperti nama dan

harga.

4.1.2. Model Basis Data

Model basis data untuk fitur varian produk ini dapat dijelaskan

sebagai berikut. Setiap produk memiliki varian, setiap varian

memiliki dua variasi serta detail dari variasi tersebut. Diagram yang

menjelaskan model ini dapat dilihat pada gambar 1.

16

.

Gambar 1. Model Basis Data untuk Fitur Variasi Produk

4.1.3. Diagram Kasus Penggunaan

Fitur varian produk ini melibatkan tiga jenis pengguna yaitu

Admin, Penjual dan Pembeli. Admin dapat menambahkan variasi,

mengubah variasi, menghapus vaiasi, melihat daftar variasi,

menambahkan kategori variasi, mengubah kategori variasi,

menghapus kategori variasi, serta melihat daftar kategori variasi

yang ada.

Penjual dapat membuat produk baru dengan variasi, serta

menambahkan, mengubah, dan menghapus variasi pada suatu

produk yang telah ada.

Pembeli dapat memilih variasi pada pemelian produk bervariasi.

Ilustrasi kasus penggunaan dapat dilihat pada gambar 2, dan

gambar 3 yang merupakan gambar diagram kasus penggunaan.

17

Gambar 2. Usecase diagram admin

Gambar 3. Usecase diagram penjual

4.1.4. Spesifikasi Kasus Penggunaan

Dari kasus penggunaan yang ada dapat dibuat spesifikasi-

spesifikasi penggunaan sebagai berikut.

4.1.4.1. Menambahkan Jenis Variasi

Tabel 1 Spesifikasi Kasus Penggunaan UC001

Nama Menambahkan Jenis Variasi

Kode UC001

Deskripsi Menambahkan jenis variasi

Tipe Fungsional

18

Pemicu 1. Aktor menuju halaman admin

Aktor Admin

Kondisi Awal Data jenis variasi tidak tersedia pada sistem

Kondisi Akhir Data jenis variasi tersimpan dalam basis data

sistem

Alur Kejadian

Secara Normal

1. Terdapat jenis variasi baru yang tidak

terdapat pada sistem

2. Aktor membuka laman jenis variasi

3. Aktor membuka laman tambah jenis

variasi

4. Aktor mengisi data terkait jenis variasi

baru

5. Aktor menekan tombol simpan jenis

variasi baru

6. Sistem menyimpan jenis variasi tersebut

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.4.2. Melihat Daftar Jenis Variasi


Nama Melihat Daftar Jenis Variasi

Kode UC002

Deskripsi Melihat daftar jenis variasi

Tipe Fungsional

Pemicu 1. Aktor membuka laman admin

Aktor Admin

Kondisi Awal Aktor belum melihat daftar jenis variasi

Kondisi Akhir Aktor dapat melihat daftar jenis variasi

19

Alur Kejadian

Secara Normal


2. Aktor membuka laman tambah jenis variasi

3. Sistem menampilkan data

4. Aktor mencari data yang diinginkan

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.4.3. Mengubah Jenis Variasi


Nama Mengubah Jenis Variasi

Kode UC003

Deskripsi Mengubah jenis variasi

Tipe Fungsional

Pemicu 1. Perubahan data jenis variasi

Aktor Admin

Kondisi Awal Data jenis variasi tidak sesuai dengan realita

Kondisi Akhir Data jenis variasi sesuai dengan realita

Alur Kejadian

Secara Normal

1. Aktor mengetahui terdapat perubahan data

suatu jenis variasi


3. Aktor membuka laman ubah data suatu

variasi

4. Sistem menampilkan form perubahan data

5. Aktor mengisi data baru

6. Aktor menekan tombol simpan

7. Sistem menyimpan data baru pada basis

data

Alur Kejadian

Alternatif

-

20

Pengecualian -

4.1.4.4. Menghapus Jenis Variasi


Nama Menghapus Jenis Variasi

Kode UC004

Deskripsi Menghapus jenis variasi

Tipe Fungsional

Pemicu 1. Penghapusan jenis variasi

Aktor Admin

Kondisi Awal Data jenis variasi tidak sesuai dengan realita

Kondisi Akhir Data jenis variasi sesuai dengan realita

Alur Kejadian

Secara Normal

1. Aktor mengetahui terdapat penghapusan

suatu jenis variasi


3. Sistem menampilkan daftar jenis variasi

4. Aktor mencari varisi yang ingin dihapus

5. Aktor menekan tombol hapus variasi

6. Aktor melakukan konfirmasi penghapusan

7. Sistem menghapus data jenis variasi dari

sistem

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.4.5. Menambahkan Variasi


Nama Menambahkan Variasi

Kode UC005

Deskripsi Menambahkan variasi

Tipe Fungsional

21

Pemicu 1. Aktor menuju halaman admin

Aktor Admin

Kondisi Awal Data variasi tidak tersedia pada sistem

Kondisi Akhir Data variasi tersimpan dalam basis data sistem

Alur Kejadian

Secara Normal

1. Terdapat variasi baru yang tidak terdapat

pada sistem

2. Aktor membuka laman variasi

3. Aktor membuka laman tambah variasi

4. Aktor mengisi data terkait variasi baru

5. Aktor menekan tombol simpan variasi baru

6. Sistem menyimpan variasi tersebut

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.4.6. Melihat Daftar Jenis Variasi


Nama Melihat Daftar Variasi

Kode UC006

Deskripsi Melihat daftar variasi

Tipe Fungsional

Pemicu 1. Aktor membuka laman admin.

Aktor Admin

Kondisi Awal Aktor belum melihat daftar variasi

Kondisi Akhir Aktor dapat melihat daftar variasi

Alur Kejadian

Secara Normal


2. Aktor membuka laman tambah variasi

3. Sistem menampilkan data


22

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.4.7. Mengubah Variasi


Nama Mengubah Variasi

Kode UC007

Deskripsi Mengubah variasi

Tipe Fungsional

Pemicu 1. Perubahan data variasi

Aktor Admin

Kondisi Awal Data variasi tidak sesuai dengan realita

Kondisi Akhir Data variasi sesuai dengan realita

Alur Kejadian

Secara Normal


suatu variasi


3. Aktor membuka laman ubah data suatu

variasi





data

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.4.8. Menghapus Jenis Variasi


Nama Menghapus Variasi

Kode UC008

23

Deskripsi Menghapus variasi

Tipe Fungsional

Pemicu 1. Penghapusan variasi

Aktor Admin



Alur Kejadian

Secara Normal

1. Aktor mengetahui terdapat penghapusan

suatu variasi


3. Sistem menampilkan daftar variasi

4. Aktor mencari varisi yang ingin dihapus

5. Aktor menekan tombol hapus variasi

6. Aktor melakukan konfirmasi penghapusan

7. Sistem menghapus data jenis variasi dari

sistem

4.1.4.9. Menambahkan Produk Baru dengan Variasi


Nama Menambahkan Produk Baru dengan Variasi

Kode UC009

Deskripsi Menambahkan produk baru dengan variasi

Tipe Fungsional

Pemicu 1. Aktor membuka laman daftar produk

Aktor Penjual

Kondisi Awal Data produk tidak tersedia pada sistem

Kondisi Akhir Data produk tersimpan dalam basis data

sistem

Alur Kejadian

Secara Normal

1. Terdapat produk baru yang tidak terdapat

pada sistem

2. Aktor membuka laman daftar produk

24

3. Aktor membuka laman tambah produk

4. Aktor mengisi data terkait produk baru

5. Aktor menekan tombol “tambahkan

variasi”

6. Aktor mengisi data variasi untuk produk

tersebut

7. Aktor menekan tombol simpan produk baru

8. Sistem menyimpan produk tersebut.

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.4.10. Melihat Daftar Produk yang Dimiliki

Tabel 10 Spesifikasi Kasus UC010

Nama Melihat Daftar Produk yang Dimiliki

Kode UC010

Deskripsi Melihat daftar produk yang dimiliki

Tipe Fungsional

Pemicu 1. Aktor membuka laman akun

Aktor Admin

Kondisi Awal Aktor belum melihat daftar variasi

Kondisi Akhir Aktor dapat melihat daftar variasi

Alur Kejadian

Secara Normal



3. Sistem menampilkan daftar produk


5. Aktor dapat melihat data produk

Alur Kejadian

Alternatif

-

25

Pengecualian -

4.1.4.11. Mengubah Variasi suatu Produk


Nama Mengubah Variasi suatu Produk

Kode UC011

Deskripsi Mengubah variasi suatu produk

Tipe Fungsional

Pemicu 1. Perubahan data variasi

Aktor Penjual

Kondisi Awal Data variasi produk tidak sesuai dengan

realita

Kondisi Akhir Data variasi produk sesuai dengan realita

Alur Kejadian

Secara Normal


variasi suatu produk


3. Aktor menekan tombol ubah suatu produk

4. Sistem menampilkan form pengubahan

produk

5. Aktor menekan tombol ubah variasi


variasi




data

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.4.12. Menghapus Variasi dari Produk yang Dimiliki


26

Nama Menghapus Variasi dari Produk yang Dimiliki

Kode UC012

Deskripsi Menghapus variasi dari produk yang dimiliki

Tipe Fungsional

Pemicu 1. Penghapusan variasi produk

Aktor Admin



Alur Kejadian

Secara Normal


variasi suatu produk


3. Aktor menekan tombol ubah suatu produk

4. Sistem menampilkan form pengubahan

produk

5. Aktor menekan tombol ubah variasi


variasi

7. Aktor menghapus data variasi



data

Alur Kejadian

Alternatif

-

Pengecualian -

4.1.5. Tampilan Fitur pada Halaman Web

Fitur variasi produk memiliki beberapa tampilan antar muka

web yang dapat digunakan pengguna berupa halaman web.

Halaman-halaman web tersebut antara lain halaman penambahan

variasi produk pada, pilihan variasi produk pada halaman pembelian

27

produk, serta halaman yang digunakan admin untuk mengelola

kategori dan macam variasi yang ada. Gambar 4 merupakan gambar

halaman produk yang menampilkan pilihan variasi, gambar 5

merupakan halaman untuk mengatur variasi produk, dan gambar 6

merupakan halaman di mana admin dapat mengelola variasi.

Gambar 4 Fitur Variasi Produk Pembeli

Gambar 5 Fitur Variasi Produk Penjual

28

Gambar 6 Fitur Variasi Produk Admin

4.2. Fitur Upgrade Membership


Klien project ini meminta adanya fitur upgrade membership

untuk penjual. Membership terdiri dari free, silver, golden, platinum.

Membership ini memberikan akses penjual ke fitur khusus lelang

online, masing-masing kelas keanggotaan mempunyai jumlah lelang

yang berbeda.


Untuk mewujudkan fitur membership ini, penulis

menambahkan model basis data baru yaitu Membership Order.

Membership Order terhubung ke 2 collection lain yaitu membership

dan transaction. Membership merupakan data jenis-jenis

membership yang ada. Membership order menyimpan data tentang

29

pembelian membership, yaitu pembeli, membership yang dibeli,

serta id collection transaction. Transaction merupakan collection

yang digunakan untuk menangani segala pembayaran. Ilustrasi

struktur data tersebut dapat dilihat pada gambar 7.

Gambar 7. Model Basis Data Fitur Upgrade Membership


Fitur upgrade membership melibat kan 2 aktor, yaitu penjual

dan admin. Penjual dapat melihat kategori membership yang

dimiliki, mengajukan upgrade membership, serta mengkonfirmasi

pembayaran. Admin dapat melihat daftar pengajuan upgrade

membership, membatalkan pengajuan upgrade membership serta

memverifikasi pengajuan upgrade membership. Ilustrasi berupa

diagram kasus penggunaan dapat dilihat pada gambar 8.

30

Gambar 8. Use Case Diagram Fitur Upgrade Membership

4.2.4. Spesifikasi Kebutuhan Pengguna

4.2.4.1. Melihat Kelas Keanggotaan yang Dimiliki


Nama Melihat Kelas Keanggotaan yang Dimiliki

Kode UC013

Deskripsi Melihat kelas keanggotaan yang dimiliki

Tipe Fungsional

Pemicu Aktor membuka laman akun

Aktor Penjual

Kondisi Awal Aktor belum dapat melihat kelas keanggotaan

yang dimiliki

Kondisi Akhir Aktor dapat melihat informasi kelas

keanggotaan yang dimiliki

Alur Kejadian

Secara Normal

1. Sistem menampilkan status atau kelas

keanggotaan pengguna

Alur Kejadian

Alternatif

-

31

Pengecualian -

4.2.4.2. Mengajukan Peningkatan Kelas Keanggotaan


Nama Mengajukan peningkatan kelas keanggotaan

Kode UC014

Deskripsi Mengajukan peningkatan kelas keanggotaan

Tipe Fungsional

Pemicu 1. Aktor membuka laman akun

Aktor Penjual

Kondisi Awal Belum terdapat permintaan pengajuan

peningkatan kelas suatu penjual di sistem

Kondisi Akhir Terdapat permintaan pengajuan peningkatan

kelas suatu penjual di system

Alur Kejadian

Secara Normal

1. Aktor membuka halaman keanggotaan

2. Sistem menampilkan daftar informasi

kelas keanggotaan

3. Aktor memilih kelas keanggotaan

4. Aktor mengisi form data

5. Aktor menekan tombol untuk mengirim

permintaan peningkatan keanggotaan

6. Sistem menyimpan data permintaan

peningkatan keanggotaan

7. Sistem menampilkan halaman konfirmasi

pembayaran

Alur Kejadian

Alternatif

-

Pengecualian -

4.2.4.3. Mengkonfirmasi Pembayaran Peningkatan Kelas

Keanggotaan


32

Nama Mengkonfirmasi pembayaran peningkatan

kelas keanggotaan

Kode UC015

Deskripsi Melihat kelas keanggotaan yang dimiliki

Tipe Fungsional

Pemicu 1. Aktor mengajukan peningkatan kelas

keanggotaan (UC016)

Aktor Penjual

Kondisi Awal Tidak ada bukti pembayaran suatu permintaan


Kondisi Akhir Terdapat data bukti pembayaran suatu


Alur Kejadian

Secara Normal

1. Aktor membuka laman akun

2. Aktor membuka laman peningkatan kelas

keanggotaan

3. Sistem menampilkan form konfirmasi

bukti pembayaran

4. Aktor mengisi form bukti pembayaran


bukti pembayaraan

6. Sistem menyimpan bukti pembayaran, dan

mengubah status pengajuan peningkatan

kelas keanggotaan

Alur Kejadian

Alternatif

-

Pengecualian -

4.2.4.4. Melihat Daftar Pengajuan Peningkatan Kelas

keanggotaan


33

Nama Melihat daftar pengajuan peningkatan kelas

keanggotaan

Kode UC016

Deskripsi Melihat daftar pengajuan peningkatan kelas

keanggotaan

Tipe Fungsional


Aktor Admin

Kondisi Awal Aktor belum dapat melihat daftar permintaan

peningkatan kelas peanggotaan

Kondisi Akhir Aktor dapat melihat informasi kelas

keanggotaan yang dimiliki

Alur Kejadian

Secara Normal

1. Sistem menampilkan daftar permintaan

peningkatan kelas keanggotaan yang ada

Alur Kejadian

Alternatif

-

Pengecualian -

4.2.4.5. Membatalkan Pengajuan Peningkatan Kelas


Nama Membatalkan pengajuan peningkatan kelas

keanggotaan

Kode UC017

Deskripsi Membatalkan pengajuan peningkatan kelas

keanggotaan

Tipe Fungsional


Aktor Admin

Kondisi Awal Permintaan peningkatan kelas keanggotaan

berstatus aktif dan belum terverifikasi

Kondisi Akhir Permintaan peningkatan kelas keaggotaan

berstatus batal

34

Alur Kejadian

Secara Normal

1. Sistem menampilkan daftar permintaan

peningkatan kelas keanggotaan

2. Aktor memilih dropdown di salah satu

baris data

3. Aktor memilih cancel

4. Sistem merubah status permintaan menjadi

canceled

Alur Kejadian

Alternatif

-

Pengecualian -

4.2.4.6. Memverifikasi Pembayaran Pengajuan Peningkatan

Kelas Keanggotaan


Nama Memverifikasi pembayaran pengajuan


Kode UC018

Deskripsi Memverifikasi pembayaran pengajuan


Tipe Fungsional

Pemicu 1. Upload bukti pembayaran oleh penjual

yang mengajukan peningkatan kelas

keanggotaan

Aktor Penjual

Kondisi Awal Data peningkatan kelas keanggotaan sudah

ada bukti pembayaran dan belum terverifikasi

Kondisi Akhir Data peningkatan kelas keanggotaan

mengalami perubahan status dari menunggu

verifikasi admin menjadi terverifikasi ato

ditolak

Alur Kejadian

Secara Normal

1. Aktor membuka laman admin

35

2. Aktor membuka laman upgrade

membership

3. Aktor mencari data yang membutuhkan

verifikasi

4. Aktor menekan tombol untuk

memverifikasi atua menolak

5. Sistem memperbarui data permintaan

upgrade membership.

Alur Kejadian

Alternatif

-

Pengecualian -

4.2.5. Tampilan Fitur Pada Halaman Web

Fitur upgrade membership memiliki beberapa tampilan antar

muka web yang dapat digunakan pengguna berupa halaman web.

Halaman-halaman web tersebut antara lain adalah halaman

pembelian upgrade membership yang menampilkan pilihan upgrade

yang tersedia serta harga. Di halaman tersebut juga terdapat tombol

untuk membeli upgrade yang dipilih. Setelah menekan tombol beli,

halaman membership menampilkan pembayaran. Lalu di sisi admin

terdapat halaman untuk mengelola upgrade membership yang ada.

Gambar 9 dan gambar 10 menunjukan halaman pembelian upgrade

membership. Gambar 11 menampilkan halaman admin untuk

mengelola upgrade membership.

36

Gambar 9. Pembelian Upgrade Keanggotaan

Gambar 10. Pembayaran-Upgrade-Keanggotaan

37

Gambar 11. Admin Pengelolaan-Upgrade-Keanggotaan

4.3. Fitur Keranjang Belanja


Keranjang merupakan fitur untuk memfasilitasi pengguna

dalam berbelanja di marketplace aplikasi. Pengguna dapat

menelusuri produk-produk, dan menambahkan terlebih dahulu

produk-produk yang ingin dibeli untuk nantinya dilakukan proses

checkout dan pembayaran.

Keranjang belanja ini berguna agar pengguna tidak harus

membeli satu persatu, dan mencatat apa yang ingin dibeli secara

manual, melainkan dapat menaruh terlebih dahulu produk-produk di

keranjang belanja untuk nanti diakhir dilakukan transaksi bersama-

sama.Keranjang belanja yang ada memiliki spesifikasi yaitu data

38

disimpan di localstorage browser pengguna, ditampilkan

berdasarkan toko, serta dapat dimanfaatkan sampai proses checkout.

4.3.2. Analisa Kebutuhan Pengguna

Pada implementasinya data keranjang belanja tidak tersimpan

di database melainkan di aplikasi frontend. Untuk itu penulis

memutuskan untuk mengimplementasikan menggunakan context

API yaitu API dari react untuk dapat memberikan akses pada seluruh

component pada suatu component tree tanpa harus melemparkan

data sebagai props satu persatu di tiap component. Iplementasi ini

menggunakan flux pattern yang memanfaatkan useReducer, dan

useContext di library reactjs.

Context adalah state global aplikasi. Tidak seperti component

level state, state pada context dapat diakses diseluruh bagian aplikasi

tanpa harus secara manual melemparkan data antar komponen.

Data keranjang belanja dibutuhkan di semua komponen

aplikasi, oleh karena itu pembuatan context merupakan solusi yang

menjawab kebutuhan.

4.3.3. Implementasi Context API pada Aplikasi Frontend

4.3.3.1. Struktur File

Dalam penerapannya, context pada react dapat dibuat dengan

berbagai gaya penulisan/penataan kode. Dalam kasus ini penulis

menerapkan pembagian kode menjadi tiga file yaitu CartState.js,

cartContext.js, cartReducer.js.

39

CartState.js merupakan komponen react yang akan dirender

diaplikasi, lewat komponen inilah aplikasi mendapat akses ke

context yang dibuat. Data yang disimpan dicontext berupa variable

serta fungsi-fungsi terkait yang didefinisikan di file ini.

cartReducer.js merupakan fungsi reducer yang digunakan

untuk mutase state. Reducer adalah fungsi murni yang menerima 2

argument berupa state, dan action serta mengembalikan state yang

baru.

Semua data dan fungsi terkait keranjang belanja disimpan

secara terpusat di sini serta dapat diakses oleh semua komponen

yang membutuhkan. Contoh data yang ada array untuk menyimpan

daftar produk, array untuk menyimpan data lengkap product yang

didapat dari backend API. Untuk fungsi-fungsi nya terdapat berbagai

fungsi seperti untuk mengelompokkan data sesuai took, untuk

menembak endpoint backend API untuk mendapatkan detail data,

dan berbagai fungsi-fungsi utilitas lain untuk manipulasi struktur

data.


Kasus penggunaan fitur keranjang belanja melibatkan satu actor

yaitu pengguna secara umum. Kasus-kasun penggunaan yang ada

antar lain pengguna dapat menambahkan produk ke keranjang

belanja, pengguna dapat melihat detail keranjang belanja, pengguna

dapat mengubah kuantitas suatu produk, pengguna dapat mengubah

40

catatan untuk penjual, dan pengguna dapat menghapus suatu produk

dari keranjang belanja.

"Gambar 12. Diagram Kasus Penggunaan Keranjang Belanja


4.3.5.1. Menambahkan Produk ke Keranjang Belanja dari

Halaman Produk


Nama Menambahkan Produk ke Keranjang Belanja

dari Halaman Produk

Kode UC019

Deskripsi Menambahkan Produk ke Keranjang Belanja

dari Halaman Produk

Tipe Fungsional

Pemicu 1. Aktor membuka halaman marketplace

produk

Aktor User

Kondisi Awal Produk tidak terdapat pada keranjang belanja

Kondisi Akhir Produk tersimpan pada keranjang belanja

41

Alur Kejadian

Secara Normal

1. User mengisi data produk yang ingin dibeli

seperti, kuantitas, catatan untuk penjual,

dan variasi

2. User menekan tombol untuk menambahkan

produk pada keranjang belanja

3. Sistem menambahkan produk pada

keranjang belanja

Alur Kejadian

Alternatif

-

Pengecualian -

4.3.5.2. Melihat Detail Keranjang Belanja


Nama Melihat Detail Keranjang Belanja

Kode UC020

Deskripsi Melihat Detail Keranjang Belanja

Tipe Fungsional

Pemicu Aktor membuka laman aplikasi

Aktor User

Kondisi Awal Aktor belum dapat melihat detail keranjang

belanja

Kondisi Akhir Aktor dapat melihat detail keranjang belanja

Alur Kejadian

Secara Normal

1. Aktor menekan gambar keranjang belanja

di kanan atas laman

2. Sistem menampilkan detail keranjang

belanja

Alur Kejadian

Alternatif

-

Pengecualian -

4.3.5.3. Mengubah Kuantitas Barang di Keranjang Belanja


42

Nama Mengubah Kuantitas Barang di Keranjang

Belanja

Kode UC021

Deskripsi Mengubah Kuantitas Barang di Keranjang

Belanja

Tipe Fungsional

Pemicu User membuka keranjang belanja (UC020)

Aktor User

Kondisi Awal Terdapat perubahan yang ingin dilakukan user

terkait kuantitas dan data belum sesuai

Kondisi Akhir Data perubahan kuantitas yang dilakukan user

tersimpan

Alur Kejadian

Secara Normal

1. Sistem menampilkan daftar produk di

keranjang belanja

2. User menekan tombol untuk

menambah/mengurangi atau mengisi

angka yang diinginkan

3. Sistem menyimpan setiap perubahan yang

terjadi

Alur Kejadian

Alternatif

-

Pengecualian -

4.3.5.1. Mengubah Catatan untuk Penjual


Nama Mengubah catatan untuk penjual

Kode UC022

Deskripsi Mengubah catatan untuk penjual

Tipe Fungsional

Pemicu 1. Aktor menambahkan barang pada

keranjang belanja (UC019)

43

2. Aktor membuka laman keranjang belanja

(UC020)

Aktor User

Kondisi Awal Terdapat perubahan yang ingin dilakukan user

terkait kuantitas dan data belum sesuai

Kondisi Akhir Data catatan untuk penjual yang baru

tersimpan

Alur Kejadian

Secara Normal

1. Aktor mengubah form teks dengan label

catatan untuk penjual

2. Sistem menyimpan perubahan

Alur Kejadian

Alternatif

-

Pengecualian -

4.3.5.1. Menghapus Produk dari Keranjang Belanja


Nama Menghapus suatu produk dari keranjang

belanja

Kode UC023

Deskripsi Menghapus suatu produk dari keranjang

belanja

Tipe Fungsional

Pemicu 1. Aktor menambahkan barang pada

keranjang belanja (UC019)

2. Aktor membuka laman keranjang belanja

(UC020)

Aktor User

Kondisi Awal Aktor ingin menghapus suatu produk dari

keranjang belanja

Kondisi Akhir Produk tersebut terhapus dari keranjang

belanja

Alur Kejadian

Secara Normal

1. Aktor mencari produk yang diinginkan

44

2. Aktor menekan tombol untuk menghapus

produk dari keranjang belanja

3. Sistem menghapus produk dari keranjang

belanja

Alur Kejadian

Alternatif

-

Pengecualian -


Fitur keranjang belanja memiliki antar muka pengguna. Antar

muka yang ada antara lain tombol beli di halaman detail produk yang

berfungsi untuk menambahkan produk ke keranjang belanja. Lalu

terdapat halaman yang menampilkan detail keranjang belanja di

mana pengguna dapat mengubah berbagai data keranjang belanja

seperti catatan dan kuantitas. Lalu terdapat halaman checkout di

mana pengguna diminta mengisi informasi terkait pengiriman dan

pembayaran. Setelah checkout website akan menampilkan halaman

pembayaran pada pengguna. Gambar 12 memperlihatkan halaman

detail keranjang belanja dan gambar 13 menampilkan halaman

checkout.

45

Gambar 12. Keranjang Belanja

Gambar 13. Halaman Checkout

46

4.4. Fitur Wishlist


Wishlist merupakan fitur yang dapat digunakan user untuk

menandai produk yang ingin dibeli di kemudian hari. Semua produk

yang diwishlist dapat diakses pada halaman wishlist.


Gambar 14 menunjukan desain model basis data untuk

menerapkan fitur wishlist. Terdapat tiga collection yaitu wishlist,

user, dan product. Wishlist menghubungkan user ke semua product

yang diwishlist.

Gambar 14. Diagram Basis Data Wishlist


Fitur wishlist memiliki 3 kasus penggunaan oleh user. Kasus-

kasus tersebut antara lain user dapat menambahkan produk ke

wishlist, user dapat melihat daftar wishlist, serta user dapat

47

menghaps produk dari wishlist. Gambar 15 menampilkan diagram

kasus penggunaan untuk fitur wishlist ini.

Gambar 15. Diagram Kasus Penggunaan Wishlist


4.4.4.1. Menambahkan Produk ke Wishlist


Nama Menambahkan Produk ke Wishlist

Kode UC024

Deskripsi Menambahkan Produk ke Wishlist

Tipe Fungsional

Pemicu 1. Aktor menuju halaman produk

Aktor User

Kondisi Awal Data wishlist produk tidak tersedia pada

sistem

Kondisi Akhir Data wishlist produk tersimpan dalam basis

data sistem

Alur Kejadian

Secara Normal

1. Aktor menekan tombol wishlist suatu

produk

2. Sistem menyimpan produk ke wishlist

Alur Kejadian

Alternatif

-

48

Pengecualian -

4.4.4.2. Melihat Daftar Wishlist Produk yang Dimiliki


Nama Melihat Daftar Wishlist Produk yang Dimiliki

Kode UC025

Deskripsi Melihat Daftar Wishlist Produk yang Dimiliki

Tipe Fungsional

Pemicu Aktor menuju laman aplikasi

Aktor User

Kondisi Awal Aktor belum dapat melihat data wishlist yang

dimiliki

Kondisi Akhir Aktor dapat melihat data wishlist yang

dimiliki

Alur Kejadian

Secara Normal

1. Aktor menekan tombol wishlist di kanan

atas layer

2. Sistem menampilkan halaman wishlist

produk

Alur Kejadian

Alternatif

-

Pengecualian -

4.4.4.3. Menghapus Produk dari Wishlist


Nama Menghapus Produk dari Wishlist

Kode UC026

Deskripsi Menghapus Produk dari Wishlist

Tipe Fungsional

Pemicu 1. Aktor membuka laman aplikasi

Aktor Pengguna

Kondisi Awal Data wishlist suatu produk terdapat di sistem

Kondisi Akhir Data wishlist suatu produk terhapus dari

sistem

49

Alur Kejadian

Secara Normal

1. Aktor membuka laman wishlist

2. Aktor menekan tombol hapus dari suatu

wishlist

3. Sistem menghapus produk dari wishlist

Alur Kejadian

Alternatif

-

Pengecualian -


Gambar 16 memperlihatkan tampilan halaman wishlist. Pada

halaman tersebut pengguna dapat melakukan pencarian dengan kata

filter, menghapus, atau menuju halaman produk.

Gambar 16. Halaman Wishlist

4.5. Fitur Token/Poin


Token merupakan mata uang di dalam aplikasi yang bisa

digunakan untuk melakukan berbagai transaksi di dalam aplikasi.

Beberapa contoh transaksi yang ada adalah mengaktifkan fitur batas

50

bawah pada suatu lelang yang menggunakan sistem untuk membantu

memastikan suatu lelang tidak akan berakhir dengan harga lebih

rendah dari batas yang ditentukan pengguna


Gambar 17 menunjukkan model basis data yang digunakan

untuk implementasi fitur token. Terdapat collection OkeToken,

UsertokenHistory, serta OketokenOrder. OkeToken merupakan

daftar token yang dapat dibeli, UsertokenHistory merupakan

collection yang menyimpan data token yang dimiliki user, dan

OketokenOrder merupakan collection yang digunakan untuk

mengelola pembelian token.

Gambar 17. Diagram Basis-Data Fitur Token

51


Fitur token memiliki beberapa kasus penggunaan antara lain

pengguna dapat mengupload bukti pembayaran, pengguna dapat

melakukan pembelian token, pengguna dapat melihat token yang

dimiliki, serta pengguna dapat membelanjakan token untuk suatu

fitur.

Gambar 18. Diagram Kasus Pengunaan Wishlist


4.5.4.1. Membeli Token


Nama Membeli Token

Kode UC027

Deskripsi Membeli Token

Tipe Fungsional

Pemicu Aktor membuka laman dasbor penjual

Aktor Penjual

52

Kondisi Awal Tidak ada data pembelian token di sistem

Kondisi Akhir Terdapat data pembelian token baru di sistem

Alur Kejadian

Secara Normal

1. Aktor membuka laman token

2. Sistem menampilkan informasi token dan

form pembelian token

3. Aktor mengisi form pembelian token

4. Aktor menekan tombol untuk melakukan

pembelian

5. Sistem menyimpan data pembelian ke

basis data

6. Sistem menampilkan petunjuk

pembayaran

Alur Kejadian

Alternatif

-

Pengecualian -

4.5.4.2. Melihat Token yang Dimiliki


Nama Melihat Token yang Dimiliki

Kode UC028

Deskripsi Melihat Token yang Dimiliki

Tipe Fungsional

Pemicu Aktor membuka halaman dasbor penjual

Aktor Penjual

Kondisi Awal Aktor tidak dapat melihat informasi terkait

token

Kondisi Akhir Aktor dapat melihat informasi terkait token

Alur Kejadian

Secara Normal

1. Aktor membuka laman token

2. Sistem menampilkan informasi terkait

token yang dimiliki

53

Alur Kejadian

Alternatif

-

Pengecualian -

4.5.4.3. Mengunggah Bukti Pembayaran


Nama Membelanjakan Token untuk fitur “Harga

Target”

Kode UC029

Deskripsi Membelanjakan Token untuk fitur “Harga

Target”

Tipe Fungsional

Pemicu Aktor melakukan pembelian token (UC028)

Aktor Penjual

Kondisi Awal Tidak ada bukti pembayaran suatu permintaan


Kondisi Akhir Terdapat data bukti pembayaran suatu


Alur Kejadian

Secara Normal

1. Aktor membuka laman akun

2. Aktor membuka laman Token

3. Sistem menampilkan form konfirmasi

bukti pembayaran

4. Aktor mengisi form bukti pembayaran


bukti pembayaraan

6. Sistem menyimpan bukti pembayaran

Alur Kejadian

Alternatif

-

54

4.5.4.4. Membelanjakan Token untuk Fitur “Harga Target”


Nama Membelanjakan Token untuk fitur “Harga

Target”

Kode UC030

Deskripsi Membelanjakan Token untuk fitur “Harga

Target”

Tipe Fungsional

Pemicu Aktor membuka halaman pengaturan produk

lelang

Aktor Penjual

Kondisi Awal Terdapat token yang cukup untuk

dibelanjakan

Kondisi Akhir Token berkurang karena dibelanjakan

Alur Kejadian

Secara Normal

1. Aktor mengisi form terkait “harga target”

2. Aktor menekan tombol untuk menyimpan

pengaturan

3. Sistem mengurangi token actor, dan

menyimpan pengaturan

Alur Kejadian

Alternatif

-

Pengecualian -

4.5.1. Tampilan Fitur Pada Halaman Web

Fitur token dapat digunakan pengguna melalui beberapa halaman

web antara lain halaman token user yang menampilkan riwayat token

serta form pembelian token. Terdapat juga halaman di mana admin

dapat mengelola token. Gambar 19 menampilkan halaman token

user, gambar 20 dan gambar 21 menampilkan halama admin terkait

token.

55

Gambar 19. Halaman Pengelolaan Pembelian Token

Gambar 20. Halaman Pembelian Token

56

Gambar 21. Halaman Pengelolaan Token

57

BAB V

KESIMPULAN

Setelah melakukan kerja praktik selama dua bulan, didapatkan

beberapa kesimpulan dan saran untuk pengembangan aplikasi

berbasis MERN yang ada maupun yang akan datang.

5.1. Kesimpulan

Kesimpulan yang didapat dari pengembangan aplikasi berbasis

MERN selama kerja praktik ini adalah sebagai berikut.

- Fitur keranjang belanja dapat diimplementasikan dengan baik di

sisi frontend tanpa penyimpanan data dibackend dengan

menggunakan fitur hooks di react serta penyimpanan local

browser

- Fitur-fitur lainnya yang membutuhkan backend dibuat dengan cara

mendesain model basis data terkait, merencanakan endpoint API

yang diperlukan, membuat aplikasi frontend, serta terakhir

menghubungkan frontend dan backend.

5.2. Saran

Berikut adalah saran yang dapat diberikan penulis setelah

menjalani kerja praktik ini.

- Dalam pembuatan keranjang belanja, dapat dipertimbangkan

untuk menyimpan data di basis data agar data keranjang belanja

pengguna dapat terikat pada akun pengguna, selain itu juga

58

mempermudah pengembangan aplikasi frontend karena di

frontend tidak perlu dibuat mekanisme keranjang belanja secara

lengkap sampai ke penyimpanan.

- Untuk variasi produk model yang dibuat terbatas pada 2 variasi, ke

depan dapat dirancang model yang lebih general sehingga dapat

mengatasi berapapun jenis variasi pada satu produk.

59

DAFTAR PUSTAKA

[1] Canvas Web Design & Development, “Canvas Web Design

& Development”, [Online]

https://www.canvaswebdesign.com/page/about-canvas-web.

[Accessed 1 November 2020].

[2] Krause, J. (2016) Introducing web development. 1st ed.

APRESS.

[3] Techcrunch.com. 2020. Techcrunch Is Now A Part Of

Verizon Media. [online] Available at:

<https://techcrunch.com/2015/04/29/microsoft-shocks-the-

world-with-visual-studio-code-a-free-code-editor-for-os-x-

linux-and-windows/> [Accessed 1 November 2020].

[4] MDN Web Docs. 2020. HTML: Hypertext Markup

Language. [online] Available at:

<https://developer.mozilla.org/en-US/docs/Web/HTML>


[5] MDN Web Docs. 2020. Javascript. [online] Available at:

<https://developer.mozilla.org/en-US/docs/Web/JavaScript>


[6] Node.js. 2020. About | Node.Js. [online] Available at:

<https://nodejs.org/en/about/> [Accessed 1 November 2020].

[7] freeCodeCamp.org. 2020. What Is An API? In English,

Please.. [online] Available at:

https://www.canvaswebdesign.com/page/about-canvas-web

60

<https://www.freecodecamp.org/news/what-is-an-api-in-

english-please-b880a3214a82/> [Accessed 1 November

2020].

[8] Expressjs.com. 2020. Express - Node.Js Web Application

Framework. [online] Available at: <https://expressjs.com/>


[9] Reactjs.org. 2020. React – A Javascript Library For Building

User Interfaces. [online] Available at: <https://reactjs.org/>


[10] MongoDB. 2020. What Is Mongodb?. [online] Available at:

<https://www.mongodb.com/what-is-mongodb> [Accessed 1

November 2020].

[11] freeCodeCamp.org. 2020. Introduction To Mongoose For

Mongodb. [online] Available at:

<https://www.freecodecamp.org/news/introduction-to-

mongoose-for-mongodb-d2a7aa593c57/> [Accessed 1

November 2020].

[12] Postman.com. 2020. [online] Available at:

<https://www.postman.com/> [Accessed 1 November 2020]

61

BIODATA PENULIS I

Nama : Bagas Yanuar Sudrajad

Tempat, Tanggal Lahir : Tulungagung, 19 Januari 1999

Jenis Kelamin : Laki-laki

Agama : Kristen

Status : Belum Menikah

Alamat Asal : Dsn. Karangtalun Kec. Kalidawir RT 5

RW 3, Kab. Tulungagung, Jawa Timur

Alamat Surabaya : Sutorejo Selatan IX no. 5

Telepon : 081259591600

Email : [email protected]

PENDIDIKAN FORMAL

2017 – sekarang : Mahasiswa S1 Informatika ITS

2014 – 2017 :SMA Katolik St. Thomas Aquino

Tulungagung

2011 – 2014 : SMP Negeri 1 Tulungagung

2005 – 2011 : SD Negeri 1 Kalidawir

KEMAMPUAN

- Web Programming (HTML, PHP, CSS, Javasript, NodeJS,

ReactJS)

- Mobile Programming (React Native)

- Programming (Python, Javascript, C++)

- Machine Learning

- Bahasa (Indonesia, Inggris)

AKADEMIS

Kuliah : Departemen Informatika, Fakultas Teknologi

Elektro dan Informatika Cerdas, Institut

Teknologi Sepuluh Nopember Surabaya

Angkatan : 2017

Semester : 7 (Enam)

IPK : 3,74 (Semester 6)

62


Documents

CANVAS WEB DESIGN & DEVELOPMENT Periode: 20 20 …