Pembuatan Modul Register, Login, dan Buy Button pada Aplikasi Mini Alfagift Berbasis Website di PT Global Loyalty Indonesia

(1)

PEMBUATAN MODUL REGISTER, LOGIN, DAN BUY BUTTON PADA APLIKASI MINI ALFAGIFT BERBASIS WEBSITE DI PT GLOBAL

LOYALTY INDONESIA

MAGANG

Diajukan sebagai salah satu syarat untuk memperoleh Gelar Sarjana Komputer (S.Kom.)

Niko Adriano 00000047735

PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG 2023

(2)

i

Pembuatan Modul Regiter..., Niko Adriano, Universitas Multimedia Nusantara

PEMBUATAN MODUL REGISTER, LOGIN, DAN BUY BUTTON PADA APLIKASI MINI ALFAGIFT BERBASIS WEBSITE DI PT GLOBAL

MAGANG

Diajukan sebagai salah satu syarat untuk memperoleh Gelar Sarjana Komputer (S.Kom.)

Niko Adriano 00000047735

PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG 2023

(3)

(4)

(5)

iv

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Sebagai sivitas akademik Universitas Multimedia Nusantara, saya yang bertanda tangan di bawah ini:

Nama : Niko Adriano

NIM : 00000047735

Program Studi : Informatika

Fakultas : Teknik dan Informatika Jenis Karya : Magang

Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Multimedia Nusantara hak Bebas Royalti Non-eksklusif (Non- exclusive Royalty-Free Right) atas karya ilmiah saya yang berjudul:

PEMBUATAN MODUL REGISTER, LOGIN, DAN BUY BUTTON PADA APLIKASI MINI ALFAGIFT BERBASIS WEBSITE DI PT GLOBAL

Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Non eksklusif ini Universitas Multimedia Nusantara berhak menyimpan, mengalih media / format-kan, mengelola dalam bentuk pangkalan data (database), merawat, dan mempublikasikan tugas akhir saya selama tetap mencantumkan nama saya sebagai penulis / pencipta dan sebagai pemilik Hak Cipta. Demikian pernyataan ini saya buat dengan sebenarnya.

Tangerang, 20 Juni 2023 Yang menyatakan

Niko Adriano

(6)

v

Halaman Persembahan / Motto

”do not be anxious about anything, but in everything by prayer and supplication with thanksgiving let your requests be made known to God. And the peace of God, which surpasses all understanding, will guard your hearts and your minds in Christ Jesus.”

Philippians 4:6-7 (ESV)

(7)

vi

KATA PENGANTAR

Puji Syukur atas berkat dan rahmat kepada Tuhan Yang Maha Esa, atas selesainya penulisan laporan Magang ini dengan judul: Pembuatan Modul Register, Login, dan Buy Button pada Aplikasi Mini Alfagift Berbasis Website di PT Global Loyalty Indonesia dilakukan untuk memenuhi salah satu syarat untuk mencapai gelar Sarjana Komputer Jurusan Informatika Pada Fakultas Teknik dan Informatika Universitas Multimedia Nusantara. Dengan menyadari bahwa tanpa bantuan dan bimbingan dari berbagai pihak, dari masa perkuliahan sampai pada penyusunan laporan magang ini, sangatlah sulit untuk menyelesaikan laporan magang ini, maka secara khusus ucapan terima kasih diberikan kepada:

1. Bapak Dr. Ninok Leksono, selaku Rektor Universitas 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 Ketua Program Studi Informatika Universitas Multimedia Nusantara.

4. Bapak Angga Aditya Permana, S.Kom., M.Kom., sebagai Pembimbing Magang yang telah banyak meluangkan waktu untuk memberikan bimbingan, arahan dan motivasi atas terselesainya laporan magang ini.

5. Bapak Ryan Alfons Kaloh selaku Chief Executive Officer dan Bapak Pramudita Banu Widiatmoko selaku Human Capital Manager yang telah memberikan kesempatan untuk bekerja di PT Global Loyalty Indonesia 6. Bapak Nana dan Ibu Cynthia sebagai Pembimbing Magang di Perusahaan

yang telah banyak meluangkan waktu untuk memberikan bimbingan, arahan dan motivasi selama proses magang dan pengerjaan proyek di perusahaan.

7. Rekan-rekan Magang khususnya GLI Academy Web Developer yang telah bekerja bersama-sama dan saling memberikan dukungan dalam tim untuk menyelesaikan projek ini.

8. Orang Tua yang telah memberikan bantuan dukungan material dan moral, sehingga penulis dapat menyelesaikan laporan magang ini.

(8)

vii

Semoga laporan magang ini bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi, bagi para pembaca.

Tangerang, 20 Juni 2023

Niko Adriano

(9)

PEMBUATAN MODUL REGISTER, LOGIN, DAN BUY BUTTON PADA APLIKASI MINI ALFAGIFT BERBASIS WEBSITE DI PT GLOBAL

LOYALTY INDONESIA

Niko Adriano ABSTRAK

PT Global Loyalty Indonesia merupakan salah satu anak perusahaan Alfamart yang mengelola aplikasi e-commerce Alfagift. Seiring dengan adanya kenaikan aktivitas bisnis secara online dan masifnya penggunaan aplikasi Alfagift di masyarakat, maka perusahaan terus bergerak mengembangkan aplikasi tersebut menjadi lebih besar dan lebih baik. Salah satu upaya dalam mewujudkan hal tersebut adalah dengan menerapkan program GLI Academy. Program tersebut mencakup soft skills training, hard skills training, dan big project Aplikasi Mini Alfagift BerbasisWebsite yang merupakan keseluruhan implementasi dari traning yang telah dilakukan. Pembuatan proyek ini menggunakan bahasa pemrograman Javascript dengan framework Nuxt Js, framework Bootstrap Vue untuk styling, Vuex sebagai state management, dan JSON Server sebagai pendukung REST JSON pada website. Pengerjaan proyek dilakukan secara tim dengan pembagian modul yaitu modulregister, login, dan buy button. Proyek ini dapat terselesaikan dan memenuhi user requirement yang telah diberikan. Namun, proyek ini tidak ditujukan untuk digunakan oleh perusahaan dikarenakan merupakan websiteclone dari aplikasi Alfagift dan hanya sebagai sarana pelatihan sebelum terlibat langsung dalam pengembangan aplikasi belanja online Alfagift.

Kata kunci:Alfagift,E-Commerce,Nuxt Js,PT Global Loyalty Indonesia,Website

viii

(10)

MAKING THE REGISTER, LOGIN, AND BUY BUTTON MODULES ON A WEB-BASED MINI ALFAGIFT APPLICATION IN PT GLOBAL

LOYALTY INDONESIA

Niko Adriano ABSTRACT

PT Global Loyalty Indonesia is a subsidiary of Alfamart that manages the Alfagift e-commerce application. Along with the increase in online business activity and the massive use of the Alfagift application in the community, the company continues to develop the application to become bigger and better. One of the efforts to make this happen is by implementing the GLI Academy program. The program includes soft skills training, hard skills training, and a big project of the Website-Based Mini Alfagift Application which is the entire implementation of the training that has been carried out. The making of this project uses the Javascript programming language with the Nuxt Js framework, the Vue Bootstrap framework for styling, Vuex as state management, and JSON Server as support for REST JSON on websites.

Project work is carried out as a team with the division of modules, namely register, login, and buy button modules. This project can be completed and meet the user requirements that have been given. However, this project is not intended for use by companies because it is a clone website of the Alfagift application and is only a training tool before being directly involved in developing the Alfagift online shopping application.

Keywords: Alfagift,E-Commerce,Nuxt Js,PT Global Loyalty Indonesia,Website

ix

(11)

DAFTAR ISI

HALAMAN JUDUL . . . i

PERNYATAAN TIDAK MELAKUKAN PLAGIAT . . . ii

HALAMAN PENGESAHAN . . . iii

HALAMAN PERSETUJUAN PUBLIKASI ILMIAH . . . iv

HALAMAN PERSEMBAHAN/MOTO . . . v

KATA PENGANTAR . . . vi

ABSTRAK . . . viii

ABSTRACT . . . ix

DAFTAR ISI . . . x

DAFTAR GAMBAR . . . xi

DAFTAR TABEL . . . xii

DAFTAR LAMPIRAN . . . xiii

BAB 1 PENDAHULUAN . . . 1

1.1 Latar Belakang Masalah . . . 1

1.2 Maksud dan Tujuan Kerja Magang . . . 2

1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang . . . 2

BAB 2 GAMBARAN UMUM PERUSAHAAN . . . 4

2.1 Sejarah Singkat Perusahaan . . . 4

2.2 Visi dan Misi Perusahaan . . . 5

2.2.1 Visi Perusahaan . . . 5

2.2.2 Misi Perusahaan . . . 5

2.3 Struktur Organisasi Perusahaan . . . 6

BAB 3 PELAKSANAAN KERJA MAGANG . . . 8

3.1 Kedudukan dan Koordinasi . . . 8

3.2 Tugas yang Dilakukan . . . 8

3.3 Uraian Pelaksanaan Magang . . . 9

3.3.1 Training Soft Skills . . . 11

3.3.2 Training Hard Skills . . . 12

3.3.3 PengerjaanBig Project . . . 12

3.4 Kendala dan Solusi yang Ditemukan . . . 30

3.4.1 Kendala yang Ditemukan . . . 30

3.4.2 Solusi yang Ditemukan . . . 31

BAB 4 SIMPULAN DAN SARAN . . . 32

4.1 Simpulan . . . 32

4.2 Saran . . . 32

DAFTAR PUSTAKA . . . 33

x

(12)

DAFTAR GAMBAR

Gambar 2.1 Logo Perusahaan PT Global Loyalty Indonesia . . . 5

Gambar 2.2 Struktur Organisasi Perusahaan PT Global Loyalty Indonesia 6 Gambar 2.3 Posisi dan koordinasi GLI Academy . . . 7

Gambar 3.1 Flowchart Main . . . 14

Gambar 3.2 Flowchart Register . . . 15

Gambar 3.3 Flowchart Login. . . 16

Gambar 3.4 Flowchart Add to Cart . . . 17

Gambar 3.5 Flowchart Update Qty Product Cart . . . 18

Gambar 3.6 ResourcesdataUsers . . . 19

Gambar 3.7 ResourcesdataCart . . . 19

Gambar 3.8 ResourcesdataCart Detail . . . 19

Gambar 3.9 UI Main . . . 20

Gambar 3.10 UI Register . . . 22

Gambar 3.11 ValidasiInput Register . . . 22

Gambar 3.12 ValidasiEmail Exist . . . 23

Gambar 3.13 UI Login . . . 24

Gambar 3.14 ValidasiInput Login . . . 24

Gambar 3.15 ValidasiCannot Find User . . . 25

Gambar 3.16 ValidasiIncorrect Password . . . 25

Gambar 3.17 UI Buy ButtondiHome Page . . . 26

Gambar 3.18 UI Buy ButtondiProduct Detail . . . 27

Gambar 3.19 Fitur +KeranjangBuy ButtondiProduct Detail . . . 27

Gambar 3.20 Fitur Ubah KeranjangBuy ButtondiProduct Detail . . . . 28

Gambar 3.21 Fitur Hapus KeranjangBuy ButtondiProduct Detail . . . 28

Gambar 3.22 UI Buy ButtondiCart. . . 29

Gambar 3.23 UI Buy ButtondiCartketika Stok Habis . . . 29

Gambar 3.24 Alert Buy Button ketika produk masuk ke resource data danquantityberubah menjadi 1 . . . 29

Gambar 3.25 Alert Buy Button ketika quantity berubah . . . 30

Gambar 3.26 Alert Buy Buttonketika produk dihapus . . . 30

xi

(13)

DAFTAR TABEL

Tabel 3.1 Pekerjaan yang dilakukan tiap minggu selama pelaksanaan kerja magang . . . 9

xii

(14)

DAFTAR LAMPIRAN

Lampiran 1. MBKM-01 Cover Letter MBKM Internship Track 1 . . . 33

Lampiran 2. MBKM-02 MBKM Internship Track 1 Card . . . 35

Lampiran 3. MBKM-03 Daily Task - Internship Track 1 . . . 36

Lampiran 4. MBKM-04 Verification Form of Internship Report MBKM Internship Track 1 . . . 39

Lampiran 5. Form Bimbingan . . . 40

Lampiran 6. Source Code Modul Register . . . 41

Lampiran 7. Source Code Modul Login . . . 42

Lampiran 8. Source Code Modul Buy Button . . . 43

Lampiran 9. Pengecekan Turnitin . . . 44

xiii