PENGEMBANGAN FITUR SELLER PANEL PADA WEBSITE LINISTORE
LAPORAN KERJA MAGANG
Gerald Arrivaldo 00000020733
PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG 2021
ii
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG
PENGEMBANGAN FITUR SELLER PANEL PADA WEBSITE LINISTORE
Oleh
Nama : Gerald Arrivaldo
NIM : 00000020733
Program Studi : Informatika
Fakultas : Teknik dan Informatika
Tangerang, 23 Juni 2021
Dosen Pembimbing Dosen Penguji
Farica Perdana Putri, S.Kom., M.Sc. Dennis Gunawan, .Kom., M.Sc.
Mengetahui, Ketua Program Studi
24 Juni 2021
Marlinda Vasty Overbeek, S.Kom, M.Kom.
iii Gerald Arrivaldo LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM
PENYUSUNAN LAPORAN KERJA MAGANG Dengan ini saya:
Nama : Gerald Arrivaldo
NIM : 00000020733
Program Studi : Informatika
Menyatakan bahwa saya telah melaksanakan praktek kerja magang:
Nama Perusahaan : Codify
Divisi : IT
Alamat : Ruko Thematik Blok R No.37-38, Jl. Boulevard Raya Gading Serpong, Curug Sangereng, Kelapa Dua, Tangerang, Banten 15810.
Periode Magang : 01 Februari 2021 – 31 Juli 2021 Pembimbing Lapangan : Kevin Kelly Isyanta
Laporan kerja magang merupakan hasil karya saya sendiri dan saya tidak melakukan plagiat. Semua kutipan karya ilmiah orang lain atau lembaga lain yang dirujuk dalam laporan kerja magang ini telah saya sebutkan sumber kutipannya, serta saya cantumkan di Daftar Pustaka.
Jika di kemudian hari terbukti ditemukan kecurangan/penyimpangan, baik dalam pelaksanaan kerja magang maupun dalam penulisan laporan kerja magang, saya bersedia menerima konsekuensi dinyatakan tidak lulus untuk mata kuliah kerja magang yang telah saya tempuh
Tangerang, 13 April 2021
iv
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa atas segala karunia dan rahmatnya sehingga penulis dapat menyelesaikan laporan kerja magang ini dengan judul “Pengembangan Fitur Seller Panel pada Website LINISTORE” dengan baik dan tepat waktu.
Tentu dalam menyusun laporan ini, banyak pihak yang telah membantu baik berupa moral dan spiritual, maka dalam kesempatan yang indah ini, penulis ingin mengucapkan terima kasih kepada :
1. Bapak Dr. Ninok Leksono selaku Rektor Unviersitas Multimedia Nusantara,
2. Dr. Eng.Niki Prastomo, S.T., M.Sc. selaku Dekan Fakultas Teknik dan Informatika Universitas Multimedia Nusantara,
3. Ibu Marlinda Vasty Overbeek, S.Kom, M.Kom selaku Kepala Program Studi Informatika Universitas Multimedia Nusantara,
4. Ibu Farica Perdana Putri, S.Kom., M.Sc. selaku dosen pembimbing yang telah memberikan arahan dan masukan dalam pengerjaan laporan kerja magang,
5. Bapak dan Ibu Dosen Program Studi Informatika Universitas Multimedia Nusantara yang telah semangat dalam mendidik dengan ilmu pengetahuan yang sangat berguna,
6. Bapak Ricky selaku Head of IT yang telah memberi kesempatan kepada penulis untuk melakukan praktik kerja magang sebagai Frontend Developer Intern,
v
7. Bapak Kevin Kelly Isyanta selaku supervisor dan mentor bagi penulis selama menjalani kerja magang di Codify,
8. Ayah dan ibu yang telah memberikan motivasi dan dukungan berharga, 9. Teman-teman dan kerabat dekat yang telah lama bersama sejak pertama kali kuliah hingga sekarang yang juga sama-sama berjuang menyelesaikan studi tingkat sarjana,
10. Semua pihak yang tidak dapat disebutkan satu per satu yang telah dengan tulus dan ikhlas memberikan doa dan dukungan hingga akhirnya penyusunan laporan kerja magang ini dapat terlaksanakan dengan baik.
Penulis menyadari bahwa dalam penulisan laporan ini masih jauh dari sempurna. Oleh karena itu, segala bentuk kritik dan saran yang sifatnya membangun akan sangat membantu dalam menyempurnakan penulisan laporan kerja magang ini. Penulis berharap laporan kerja magang ini dapat menjadi sebuah sumber pembelajaran diri dan sumber inspirasi bagi yang membacanya.
Tangerang, 13 April 2021
Gerald Arrivaldo
vi
PENGEMBANGAN FITUR SELLER PANEL PADA WEBSITE LINISTORE
ABSTRAK
Codify adalah perusahaan yang bergerak di bidang industri teknologi. Saat ini perusahaan Codify membangun sebuah website yang bernama LINISTORE.
LINISTORE adalah website marketplace yang menghubungkan antara penjual dan pembeli dan bertindak sebagai pihak ketiga dalam transaksi online dengan menyediakan tempat berjualan dan fasilitas pembayaran. Laporan kerja magang ini merupakan pengembangan fitur seller panel pada website LINISTORE yang sedang dalam proses pengembangan. Fitur seller panel merupakan fitur dari LINISTORE dimana fitur ini seller/vendor dapat melihat product list yang digunakan untuk penjual melakukan create, read, update, dan delete (CRUD), seperi menambahkan, mengubah, serta menghapus produk yang dijual, market list, dan user transaction list. Dalam pengembangan seller panel ini, bahasa pemrograman yang digunakan adalah Typescript dan menggunakan framework Angular, dan node JS serta database PostgreSQL. Website sedang dikembangkan lebih lanjut untuk keseluruhan aplikasi.
Kata kunci: Angular, node JS, PostgreSQL, seller panel, Typescript.
vii
SELLER PANEL FEATURE DEVELOPMENT ON LINESTORE WEBSITE
ABSTRACT
Codify is a company engaged in the technology industry. Currently the Codify company is building a website called LINISTORE. LINISTORE is a marketplace website that connects sellers and buyers and acts as a third party in online transactions by providing a place to sell and payment facilities. This internship report is a development of the seller panel feature on the LINISTORE website which is currently under development. The seller panel feature is a feature of LINISTORE where this feature sellers/vendors can view product lists that are used for sellers to create, read, update, and delete (CRUD), such as adding, changing, and deleting products being sold, market lists, and users. transaction lists.
In developing this seller panel, the programming language used is Typescript and uses the Angular framework, and node JS and the PostgreSQL database. The website is being further developed for the entire application.
Keywords: Angular, node JS, PostgreSQL, seller panel, Typescript.
viii DAFTAR ISI
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG ... ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... iii
KATA PENGANTAR ... iv
ABSTRAK ... vi
ABSTRACT ... vii
DAFTAR ISI ... viii
DAFTAR GAMBAR ... ix
DAFTAR TABEL ... x
BAB 1 PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Maksud dan Tujuan Kerja Magang ... 2
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 3
BAB 2 GAMBARAN UMUM PERUSAHAAN ... 4
2.1 Sejarah Singkat Perusahaan ... 4
2.2 Visi dan Misi ... 5
2.3 Struktur Organisasi Perusahaan ... 5
BAB 3 PELAKSANAAN KERJA MAGANG... 8
3.1 Kedudukan dan Koordinasi ... 8
3.2 Tugas yang Dilakukan ... 8
3.3 Uraian Pelaksanaan Magang ... 9
A. User Requirements ... 10
B. Flowchart ... 12
C. Perancangan Antarmuka ... 27
D. Implementasi ... 36
3.4 Kendala Yang Ditemukan ... 43
3.5 Solusi Atas Kendala yang Ditemukan ... 43
BAB 4 SIMPULAN DAN SARAN ... 44
4.1 Simpulan ... 44
4.2 Saran ... 44
DAFTAR PUSTAKA ... 46
DAFTAR LAMPIRAN ... 47
ix
DAFTAR GAMBAR
Gambar 2.1 Logo MacroAd ... 4
Gambar 2.2 Logo Codify ... 5
Gambar 2.3 Struktur organisasi Departemen IT PT. Kreasi Kode Digital ... 6
Gambar 3.1 Flowchart Login Seller... 12
Gambar 3.2 Flowchart Register Seller... 13
Gambar 3.3 Flowchart Vendor Page With Sidebar ... 14
Gambar 3.4 Flowchart Product List ... 15
Gambar 3.5 Flowchart Add Product ... 16
Gambar 3.6 Flowchart Edit Product ... 17
Gambar 3.7 Flowchart Delete Product ... 18
Gambar 3.8 Flowchart Product Detail ... 19
Gambar 3.9 Flowchart Copy Url Product ... 20
Gambar 3.10 Flowchart Market List ... 21
Gambar 3.11 Flowchart Market Detail ... 22
Gambar 3.12 Flowchart User Transaction List ... 23
Gambar 3.13 Flowchart User Transaction detail ... 24
Gambar 3.14 Flowchart Payment Method ... 25
Gambar 3.15 Flowchart Payment Status ... 26
Gambar 3.16 Perancangan antarmuka halaman menu product list ... 27
Gambar 3.17 Perancangan antarmuka halaman menu add product ... 28
Gambar 3.18 Perancangan antarmuka halaman menu edit product ... 29
Gambar 3.19 Perancangan antarmuka alert delete product ... 30
Gambar 3.20 Perancangan antarmuka toast copy url... 31
Gambar 3.21 Perancangan antarmuka halaman market list ... 32
Gambar 3.22 Perancangan antarmuka halaman market details ... 33
Gambar 3.23 Perancangan antarmuka halaman user transaction list ... 34
Gambar 3.24 Perancangan antarmuka halaman user transaction details ... 35
Gambar 3.25 Implementasi Perancangan Antarmuka tampilan Product List ... 36
Gambar 3.26 Implementasi Perancangan Antarmuka tampilan Add Product ... 37
Gambar 3.27 Implementasi Perancangan Antarmuka alert delete product ... 38
Gambar 3.28 Implementasi Toast Copy Url product ... 39
Gambar 3.29 Implementasi Market List Product ... 40
Gambar 3.30 Implementasi Market Details Product ... 40
Gambar 3.31 Implementasi User Transaction List ... 41
Gambar 3.32 Implementasi Filter Payment Method at User Transaction List... 42
Gambar 3.30 Implementasi Filter Payment Status at User Transaction List ... 42
Gambar 3.31 Implementasi User Transaction Details ... 43
x
DAFTAR TABEL
Tabel 3.1 Jadwal Kerja Magang... 9
47
DAFTAR LAMPIRAN
1. Daftar Riwayat Hidup.
2. Surat Konfirmasi Penerimaan Magang.
3. Form KM-03 (Kartu Kerja Magang).
4. Form KM-04 (Kehadiran Kerja Magang).
5. Form KM-05 (Laporan Realisasi Kerja Magang).
6. Form KM-07 (Laporan Verifikasi Laporan Magang).
7. Form Bimbingan Magang
