Pengembangan Situs Web menggunakan Asp.NET Core Web API dan Next.JS

(1)

PENGEMBANGAN SITUS WEB MENGGUNAKAN ASP.NET CORE WEB API DAN NEXT.JS

MAGANG

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

Ardyanto Konstantin 00000045578

PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG 2023

(2)

MAGANG

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

Ardyanto Konstantin 00000045578

PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG 2023

i

(3)

(4)

Dengan

_Namaⁱⁿⁱsaya yang

bertanda

tangan di bawah ini:

Ardyanto Konstantin

NIM

Program Studi Fakultas

PERNYATAAN

TIDAK

MELAKUKAN

PLAGIAT

Nama perusahaan

Divisi Alamat

Menyatakan

bahwa saya telah

melaksanakan

praktik kerja magang:

PT. Accelist Lentera Indonesia

00000045578

Periode magang

Informatika

Teknik dan Informatika

Departemen IT

JI. Alam Sutera Boulevard, Tangerang Selatan, Banten 15320

: 11 Maret 2023 - 28 Februari 2024

Pembimbing lapangan :

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

Dr. Ivransa Zuhdi Pane, B.Eng., M.Eng.

Tangerang, Tgl. Pengumpulan

TOL

METERAI

TEMPEL

97AKX439635877

(Ardyanto Konstantin)

Pengembangan Situs Web.., Ardyanto Konstantin, Universitas Multimedia Nusantara tidak lulus untuk mata kuliah kerja magang yang telah saya tempuh.

iii

(5)

Nama

PENGEMBANGAN SITUS WEB MENGGUNAKAN ASP.NET CORE WEB

API DAN NEXT.JS

NIM

HALAMAN PENGESAHAN

Program Studi Fakultas

Magang dengan judul

oleh

Dosen Pembimbing

Ardyanto Konstantin

M U

00000045578 Informatika

Telah diujikan pada hari Senin, 3 Juli 2023 Pukul 14.00 s/s 15.00 dan dinyatakan

LULUS

Fakultas Teknik dan Informatika

Dengan susunan penguji sebagai berikut

(Dr. Ivransa Zuhdi Pane, B.Eng., M.Eng) (Suwito Pomalingo, S.Kom., M.Kom.)

NIDN: 8812520016

Penguji

UNIVAE RSITAS

NIDN: 0911gb8201

Ketua Program Studi Informatika,

V

VE DIA

NUS TA R A

(Marlinda Vasty Overbeek, S.Kom., M.Kom.) NIDN: 0818038501

Pengembangan Situs Web.., Ardyanto Konstantin, Universitas Multimedia Nusantara

(6)

Halaman Persembahan / Motto

”A good name is to be more desired than great wealth, Favor is better than silver and gold.”

Proverbs 22:1 (NASB)

vii

(7)

KATA PENGANTAR

Puji Syukur atas berkat dan rahmat kepada Tuhan Yang Maha Esa, atas selesainya penulisan laporan Magang ini dengan judul: Pengembangan Situs Web Menggunakan ASP.NET CORE Web API dan Next.JS dilakukan untuk memenuhi salah satu syarat untuk mencapai gelar Sarjana Komputer Jurusan Informatika Pada Fakultas Teknik dan Informatika Universitas Multimedia Nusantara. Saya menyadari bahwa, tanpa bantuan dan bimbingan dari berbagai pihak, dari masa perkuliahan sampai pada penyusunan laporan magang ini, sangatlah sulit bagi saya untuk menyelesaikan laporan magang ini. Oleh karena itu, saya mengucapkan terima kasih kepada:

1. Bapak Dr. Ninok Leksono, selaku Rektor Universitas Multimedia Nusantara.

2. Bapak 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 Dr. Ivransa Zuhdi Pane, B.Eng., M.Eng, sebagai Pembimbing Magang yang telah banyak meluangkan waktu untuk memberikan bimbingan, arahan dan motivasi atas terselesainya laporan magang ini.

5. Kepada Bapak Tie Antono selaku, Chief Architect di PT. Accelist Lentera Indonesia

6. Kepada Bapak Ryan Ellian selaku,Chief Technology Officer di PT. Accelist Lentera Indonesia.

7. Kepada Bapak Devin Jastona selaku, Head Of IT Division di PT. Accelist Lentera Indonesia.

8. Kepada Bapak Excleson Manuel Julion selaku, Architect di PT. Accelist Lentera Indonesia.

9. Orang tua dan keluarga yang telah memberikan bantuan dukungan material dan moral, sehingga bisa menyelesaikan laporan magang.

(8)

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

Tangerang, 21 Juni 2023

Ardyanto Konstantin

ix

(9)

Ardyanto Konstantin ABSTRAK

Latar BelakangPada masa ini, di masa dimana pandemi melanda dunia, teknologi merupakan bagian dari aspek kehidupan manusia yang tidak dapat dipisahkan di bidang pendidikan, usaha, perdagangan, bisnis dan lain-lain. Dalam dunia bisnis, usaha, dan perdagangan, teknologi sudah berperan sangat besar dalam mempromosikan produk-produk yang ditawarkan dengan menggunakan media internet situs web. Metode atau teori yang digunakan pada penelitian ini dikembangkan dengan menggunakan framework ASP.NET Web API sebagai backend,framework Next.JS sebagaifront-end, dan PostgreSQL sebagaidatabase.

Hasil Penelitan menunjukkan fitur-fitur yang telah dirancang dan dikembangkan oleh penulis berhasil di implementasikan dengan baik dan sudah lolos pemeriksaan supervisor magang.Kesimpulan dari penelitian ini adalah perancangan dan pengembangan fitur-fitur dapat berlangsung dengan sesuaitimelineyang diberikan dan dapat di implementasikan dengan sukses.

Kata kunci: ASP.NET Web API, Next.JS, PostgreSQL, Situs Web

(10)

Website Development Using ASP.NET CORE Web API and Next.JS Ardyanto Konstantin

ABSTRACT

Background research At this time, in a time when the pandemic hit the world, technology is part of aspects of human life that cannot be separated in the fields of education, business, trade, business and others. In the world of business, business, and commerce, technology has played a very large role in promoting the products offered using the internet media of websites. The method / Theory used in this study was developed using ASP.NET Web API framework as the backend, framework Next.JS as the front end, and PostgreSQL as the database.The results of the research show that features that have been designed and developed by the author have been successfully implemented and have passed the examination from the intern supervisor.The conclusionof this study is the design and development of features can take place according to the given timeline and could be implemented successfully.

Keywords: ASP.NET Web API, Next.JS, PostgreSQL,Website

xi

(11)

DAFTAR ISI

HALAMAN JUDUL . . . i

PERNYATAAN TIDAK MELAKUKAN PLAGIAT . . . ii

HALAMAN PERSETUJUAN . . . iv

HALAMAN PENGESAHAN . . . v

HALAMAN PERSETUJUAN PUBLIKASI ILMIAH . . . vi

HALAMAN PERSEMBAHAN/MOTO . . . vii

KATA PENGANTAR . . . viii

ABSTRAK . . . x

ABSTRACT . . . xi

DAFTAR ISI . . . xii

DAFTAR GAMBAR . . . xiii

DAFTAR TABEL . . . xiv

DAFTAR KODE . . . xv

DAFTAR LAMPIRAN . . . xvi

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

BAB 2 GAMBARAN UMUM PERUSAHAAN . . . 4

2.1 Sejarah Singkat Perusahaan . . . 4

2.2 Visi dan Misi Perusahaan . . . 5

2.3 Struktur Organisasi Perusahaan . . . 5

BAB 3 PELAKSANAAN KERJA MAGANG . . . 6

3.1 Kedudukan dan Organisasi . . . 6

3.2 Tugas yang Dilakukan . . . 6

3.3 Uraian Pelaksanaan Magang . . . 8

3.3.1 Teknologi yang digunakan . . . 8

3.3.2 PerancanganActivity DiagramPada Fitur . . . 9

3.3.3 Implementasi . . . 16

3.3.4 Kendala yang Dihadapi . . . 27

3.3.5 Solusi dari Kendala Yang Dihadapi . . . 27

BAB 4 SIMPULAN DAN SARAN . . . 28

4.1 Simpulan . . . 28

4.2 Saran . . . 28

DAFTAR PUSTAKA . . . 29

(12)

DAFTAR GAMBAR

Gambar 2.1 Struktur organisasi PT Accelist Lentera Indonesia . . . 5

Gambar 3.1 Activity Diagram Add Event . . . 10

Gambar 3.2 Activity Diagram Edit Event . . . 12

Gambar 3.3 Activity Diagram Show Event Detail . . . 14

Gambar 3.4 Activity Diagram Delete Event . . . 15

Gambar 3.5 Tampilan HalamanAdd Event . . . 16

Gambar 3.10 Tampilan HalamanEdit Event . . . 20

Gambar 3.14 Tampilan HalamanEvent Detail . . . 23

Gambar 3.17 TampilanPop up Delete Event . . . 25

Gambar 3.18 TampilanPop up Delete Event . . . 26

xiii

(13)

DAFTAR TABEL

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

(14)

DAFTAR KODE

xv

(15)

DAFTAR LAMPIRAN

Lampiran 1. MBKM-01 Cover Letter MBKM Internship Track 1 . . . 30 Lampiran 2. MBKM-02 MBKM Internship Track 1 Card . . . 32 Lampiran 3. MBKM-03 Daily Task - Internship Track 1 . . . 33 Lampiran 4. MBKM-04 Verification Form of Internship Report MBKM

Internship Track 1 . . . 34 Lampiran 5. Form Bimbingan . . . 36