Implementasi Fitur-Fitur Lelang Online dan Marketplace Menggunakan Teknologi MERN pada Aplikasi OkeBid

(1)

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

(2)

ii

(3)

iii 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

Oleh:

Bagas Yanuar Sudrajad 05111740000074 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

(4)

iv

(5)

v

LEMBAR PENGESAHAN

KERJA PRAKTIK

Implementasi Fitur-Fitur Lelang Online dan Marketplace

Menggunakan Teknologi MERN pada Aplikasi OkeBid

Oleh:

Bagas Yanuar Sudrajad 05111740000074

Mengetahui, Canvas Web Design &

Development, Pembimbing Kerja Praktik

Menyetujui, Dosen Pembimbing,

Kerja Praktik

Hermanto

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

(6)

vi

(7)

vii

Implementasi Fitur-Fitur Lelang Online dan Marketplace

Menggunakan Teknologi MERN pada Aplikasi OkeBid

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

(8)

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.

(9)

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

(10)

x

(11)

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

(12)

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.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.3.4. Diagram Kasus Penggunaan ... 39

(13)

xiii

4.5. Fitur Token/Poin ... 49

4.5.1. Tampilan Fitur Pada Halaman Web ... 54

BAB V KESIMPULAN ... 57

5.1. Kesimpulan ... 57

5.2. Saran ... 57

DAFTAR PUSTAKA ... 59

(14)

xiv

(15)

xv

DAFTAR TABEL

Tabel 1 Spesifikasi Kasus Penggunaan UC001 ... 17

(16)

xvi

(17)

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

(18)

xviii

(19)

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).

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. [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.

(20)

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.

(21)

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

(22)

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

(23)

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.

(24)

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.

(25)

7

BAB II

PROFIL PERUSAHAAN

2.1. Profil Canvas Web Design & Development

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 [1].

(26)

(27)

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:

(28)

 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,

(29)

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,

(30)

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].

(31)

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.

(32)

 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].

(33)

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.

(34)

.

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.

(35)

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

(36)

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

(37)

19

Alur Kejadian Secara Normal

1. Aktor membuka laman jenis variasi

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

2. Aktor membuka laman 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

(38)

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

2. Aktor membuka laman 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

(39)

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

- 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

(40)

- 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

1. Aktor mengetahui terdapat perubahan data suatu 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

- Pengecualian -

4.1.4.8. Menghapus Jenis Variasi

Nama Menghapus Variasi

(41)

23

Deskripsi Menghapus variasi

Tipe Fungsional

Pemicu 1. Penghapusan variasi

Aktor Admin

Secara Normal

1. Aktor mengetahui terdapat penghapusan suatu variasi

2. Aktor membuka laman 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 Tabel 9 Spesifikasi Kasus Penggunaan UC009

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

(42)

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

1. Aktor membuka laman daftar produk 2. Aktor membuka laman variasi 3. Sistem menampilkan daftar produk 4. Aktor mencari data yang diinginkan 5. Aktor dapat melihat data produk Alur Kejadian

Alternatif

(43)

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

1. Aktor mengetahui terdapat perubahan data variasi suatu produk

2. Aktor membuka laman daftar produk 3. Aktor menekan tombol ubah suatu produk 4. Sistem menampilkan form pengubahan

produk

5. Aktor menekan tombol ubah variasi 6. Sistem menampilkan form perubahan data

variasi

7. Aktor mengisi data baru 8. Aktor menekan tombol simpan

- Pengecualian -

4.1.4.12. Menghapus Variasi dari Produk yang Dimiliki Tabel 12 Spesifikasi Kasus Penggunaan UC012

(44)

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

Secara Normal

1. Aktor mengetahui terdapat perubahan data variasi suatu produk

2. Aktor membuka laman daftar produk 3. Aktor menekan tombol ubah suatu produk 4. Sistem menampilkan form pengubahan

produk

5. Aktor menekan tombol ubah variasi 6. Sistem menampilkan form perubahan data

variasi

7. Aktor menghapus data variasi 8. Aktor menekan tombol simpan

- 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

(45)

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

(46)

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.

4.2.2. Model Basis Data

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

(47)

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

4.2.3. Diagram Kasus Penggunaan

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.

(48)

Gambar 8. Use Case Diagram Fitur Upgrade Membership 4.2.4. Spesifikasi Kebutuhan Pengguna

4.2.4.1. Melihat Kelas Keanggotaan yang Dimiliki Tabel 13 Spesifikasi Kasus Penggunaan UC013

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

1. Sistem menampilkan status atau kelas keanggotaan pengguna

(49)

31

Pengecualian -

4.2.4.2. Mengajukan Peningkatan Kelas Keanggotaan Tabel 14 Spesifikasi Kasus Penggunaan UC014

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

- Pengecualian -

4.2.4.3. Mengkonfirmasi Pembayaran Peningkatan Kelas Keanggotaan

(50)

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 peningkatan keanggotaan

Kondisi Akhir Terdapat data bukti pembayaran suatu permintaan peningkatan keanggotaan 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 5. Aktor menekan tombol untuk mengirim

bukti pembayaraan

6. Sistem menyimpan bukti pembayaran, dan mengubah status pengajuan peningkatan kelas keanggotaan

- Pengecualian -

4.2.4.4. Melihat Daftar Pengajuan Peningkatan Kelas keanggotaan

(51)

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

1. Sistem menampilkan daftar permintaan peningkatan kelas keanggotaan yang ada Alur Kejadian

Alternatif

- Pengecualian -

4.2.4.5. Membatalkan Pengajuan Peningkatan Kelas Tabel 17 Spesifikasi Kasus Penggunaan UC017

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

(52)

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

- Pengecualian -

4.2.4.6. Memverifikasi Pembayaran Pengajuan Peningkatan Kelas Keanggotaan

Nama Memverifikasi pembayaran pengajuan peningkatan kelas keanggotaan

Kode UC018

Deskripsi Memverifikasi pembayaran pengajuan peningkatan kelas keanggotaan

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

(53)

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.

- 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.

(54)

Gambar 9. Pembelian Upgrade Keanggotaan

(55)

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

(56)

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.

(57)

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

(58)

catatan untuk penjual, dan pengguna dapat menghapus suatu produk dari keranjang belanja.

"Gambar 12. Diagram Kasus Penggunaan Keranjang Belanja 4.3.5. Spesifikasi Kasus Penggunaan

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

(59)

41

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

- Pengecualian -

4.3.5.2. Melihat Detail Keranjang Belanja Tabel 20 Spesifikasi Kasus Penggunaan UC020

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

- Pengecualian -

4.3.5.3. Mengubah Kuantitas Barang di Keranjang Belanja Tabel 21 Spesifikasi Kasus Penggunaan UC021

(60)

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

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

- Pengecualian -

4.3.5.1. Mengubah Catatan untuk Penjual Tabel 22 Spesifikasi Kasus Penggunaan UC022

Nama Mengubah catatan untuk penjual

Kode UC022

Deskripsi Mengubah catatan untuk penjual

Tipe Fungsional

Pemicu 1. Aktor menambahkan barang pada keranjang belanja (UC019)

(61)

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

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 Tabel 23 Spesifikasi Kasus Penggunaan UC023

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

(62)

2. Aktor menekan tombol untuk menghapus produk dari keranjang belanja

3. Sistem menghapus produk dari keranjang belanja

- 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.

(63)

45

Gambar 12. Keranjang Belanja

(64)

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

(65)

47

menghaps produk dari wishlist. Gambar 15 menampilkan diagram kasus penggunaan untuk fitur wishlist ini.

Gambar 15. Diagram Kasus Penggunaan Wishlist

4.4.4. Spesifikasi Kasus Penggunaan 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

1. Aktor menekan tombol wishlist suatu produk

2. Sistem menyimpan produk ke wishlist Alur Kejadian

Alternatif

(66)

Pengecualian -

4.4.4.2. Melihat Daftar Wishlist Produk yang Dimiliki Tabel 25 Spesifikasi Kasus Penggunaan UC025

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

1. Aktor menekan tombol wishlist di kanan atas layer

2. Sistem menampilkan halaman wishlist produk

- Pengecualian -

4.4.4.3. Menghapus Produk dari Wishlist Tabel 26 Spesifikasi Kasus Penggunaan UC026

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

(67)

49

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 4.5.1. Kebutuhan Pengguna

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

(68)

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.

(69)

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. Spesifikasi Kasus Penggunaan 4.5.4.1. Membeli Token

Nama Membeli Token

Kode UC027

Deskripsi Membeli Token

Tipe Fungsional

Pemicu Aktor membuka laman dasbor penjual

(70)

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

- 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

(71)

53

- 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 peningkatan keanggotaan

Kondisi Akhir Terdapat data bukti pembayaran suatu permintaan peningkatan keanggotaan 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 5. Aktor menekan tombol untuk mengirim

bukti pembayaraan

6. Sistem menyimpan bukti pembayaran Alur Kejadian

Alternatif

(72)

4.5.4.4. Membelanjakan Token untuk Fitur “Harga Target” Tabel 30 Spesifikasi Kasus Penggunaan UC030

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

- 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.

(73)

55

Gambar 19. Halaman Pengelolaan Pembelian Token

(74)

(75)

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

(76)

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.

(77)

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> [Accessed 1 November 2020].

[5] MDN Web Docs. 2020. Javascript. [online] Available at: <https://developer.mozilla.org/en-US/docs/Web/JavaScript> [Accessed 1 November 2020].

[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,

(78)

<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/> [Accessed 1 November 2020].

[9] Reactjs.org. 2020. React – A Javascript Library For Building User Interfaces. [online] Available at: <https://reactjs.org/> [Accessed 1 November 2020].

[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:

(79)

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 : bagasys3@gmail.com

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)

(80)