Pengembangan Website di Merdeka 2.0 dan UMN Pictures pada PT. Multimedia Digital Nusantara

(1)

PENGEMBANGAN WEBSITE DI MERDEKA 2.0 DAN UMN PICTURES PADA

PT. MULTIMEDIA DIGITAL NUSANTARA

LAPORAN MBKM

Nicholas Oni 00000042771

PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2023

(2)

ii

Pengembangan Website di Merdeka 2.0 …, Nicholas Oni, Universitas Multimedia Nusantara

PENGEMBANGAN WEBSITE DI MERDEKA 2.0 DAN UMN PICTURES PADA

PT. MULTIMEDIA DIGITAL NUSANTARA

LAPORAN MBKM

Diajukan Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Program Studi Sistem Informasi

Nicholas Oni

00000042771

PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2023

(3)

(4)

iv

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

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

Nama : Nicholas Oni

NIM : 00000042771

Program Studi : Sistem Informasi Fakultas : Teknik dan Informatika

JenisKarya : Laporan MBKM

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:

PENGEMBANGAN WEBSITE DI MERDEKA 2.0 DAN UMN PICTURES PADA

PT. MULTIMEDIA DIGITAL NUSANTARA

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, 21 Juni 2023 Yang menyatakan,

(Nicholas Oni)

(5)

v

KATA PENGANTAR

Puji Syukur atas selesainya penulisan Laporan Magang ini dengan judul:

“ PENGEMBANGAN WEBSITE DI MERDEKA 2.0 DAN UMN PICTURES PADA PT. MULTIMEDIA DIGITAL NUSANTARA ” dilakukan untuk memenuhi salah satu syarat untuk memperoleh gelar Sarjana (S1) Jurusan Sistem Informasi Pada Teknik dan Informatika Universitas Multimedia Nusantara. Saya menyadari bahwa, tanpa bantuan dan bimbingan dari berbagai pihak, dari masa perkuliahan sampai dengan penyusunan tugas akhir ini, sangatlah sulit bagi saya untuk dapat menyelesaikan tugas akhir ini dengan baik. Oleh karena itu, saya ingin mengucapkan terima kasih kepada:

1. Bapak Dr. Ninok Leksono, M.A., 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 Ririn Ikana Desanti, S.Kom., M.Kom, selaku Ketua Program Studi Sistem Informasi Universitas Multimedia Nusantara.

4. Bapak Samuel Ady Sanjaya, S.T., M.T., sebagai Pembimbing yang telah banyak meluangkan waktu untuk memberikan bimbingan, arahan dan motivasi atas terselesainya laporan magang MBKM ini.

5. Bapak Andrew Willis, sebagai Pembimbing Lapangan yang telah memberikan bimbingan, arahan, dan motivasi atas terselesainya laporan MBKM Penelitian.

6. Kepada Perusahaan PT. Multimedia Digital Nusantara (PT.MDN)

7. Keluarga yang telah memberikan bantuan dukungan material dan moral, sehingga penulis dapat menyelesaikan laporan MBKM ini..

Tangerang, 21 Juni 2023

(Nicholas Oni)

(6)

vi

PENGEMBANGAN WEBSITE DI MERDEKA 2.0 DAN UMN PICTURES PADA

PT. MULTIMEDIA DIGITAL NUSANTARA (Nicholas Oni)

ABSTRAK

PT MDN (Multimedia Digital Nusantara) merupakan sebuah perusahaan yang menjadi pengguna untuk diselenggarakannya magang track satu. Alasan utama pemilihan PT MDN adalah kesempatan melakukan pekerjaan dari rumah atau Work From Home (WFH) serta terbukanya kesempatan untuk mahasiswa semester 5 untuk berpartisipasi.

PT MDN menerima projek baru dalam bentuk projek merdeka 2.0, projek ini bertujuan untuk membangun kembali website merdeka 1.0 dengan mengimplementasi tampilan baru dan fitur-fitur baru. Untuk magang ini, tugas/job description yang diberikan kepada tim UI/UX adalah sebagai UI/UX developer yang bertanggung jawab atas tampilan baru website. Setelah pembuatan UI/UX selesai, Divisi UI/UX diberikan tugas baru sebagai Backend developer untuk membangun website UMN Pictures dari sisi User dan Admin. Pembuatan kedua projek ini dilakukan dengan menggunakan platform Figma untuk design UI/UX merdeka 2.0 dan UMN Pictures, Framework Django sebagai wadah dari website UMN Pictures, dan Visual Studio Code sebagai IDE terpilih.

Kendala utama yang dihadapi saat melakukan kegiatan magang terdapat pada kendala komunikasi antar sesama divisi dan dengan supervisor terkait update progress pekerjaan. Untuk mengatasi masalah ini, tim UI/UX bersama tim divisi lain membuat server discord khusus untuk memudahkan komunikasi, terutama untuk mengkomunikasikan progress magang merdeka 2.0 Hasil dari project PT MDN adalah penampilan website baru untuk merdeka.umn.ac.id dan UMN Pictures

Kata kunci: Django, Merdeka 2.0, UI/UX

(7)

vii

WEBSITE DEVELOPMENT AT MERDEKA 2.0 AND

UMN PICTURES AT PT. MULTIMEDIA DIGITAL NUSANTARA (Nicholas Oni)

ABSTRACT (English)

PT. MDN (Multimedia Digital Nusantara was the company selected for the implementation of track one internship program. The reasons of the choice were the nature of work that could be done by working from home as well as the opportunity for 5^th semester students to participate.

The project at PT MDN was a new independent project called 2.0, this project aims to rebuild the merdeka website 1.0 by implementing a new look and new features. For this internship, The team was assigned as a UI/UX developer who is responsible for the new look of the website. After UI/UX creation finished, The team was assigned for a new task as Backend developers to build the UMN Pictures website from the User’s side and Admin. The creation of these two projects done using Figma for independent projcet 2.0 UI/UX design and UMN Pictures, Django Framework as a container for the UMN Pictures website, and Visual Studio Code as the selected IDE.

The main obstacle faced during the apprenticeship were found in communication problems among divisions and with related supervisors in updating the work progress. To address this issue, the UI/UX team together with other division teams create a special server disputes for communication on the progress of the independent apprenticeship 2.0. Results from the PT MDN project is the appearance of a new website for merdeka.umn.ac.id and UMN Pictures

Keywords: Django, Merdeka 2.0, UI/UX

(8)

viii

DAFTAR ISI

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK

KEPENTINGAN AKADEMIS ... iv

KATA PENGANTAR ... v

ABSTRAK ... vi

ABSTRACT (English) ... vii

DAFTAR ISI ... viii

DAFTAR TABEL ... x

DAFTAR GAMBAR ... xi

DAFTAR LAMPIRAN ... xiii

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang ... 1

1.2. Maksud dan Tujuan Kerja Magang ... 3

1.3. Waktu dan Prosedur Pelaksanaan Kerja Magang ... 5

1.3.1 Waktu Pelaksanaan Kerja Magang ... 5

1.3.2 Prosedur Pelaksanaan Kerja Magang ... 6

BAB II GAMBARAN UMUM PERUSAHAAN ... 7

2.1 Sejarah Singkat Perusahaan ... 7

2.1.1 Visi Misi ... 8

2.2 Struktur Organisasi Perusahaan ... 9

BAB III PELAKSANAAN KERJA MAGANG ... 11

3.1 Kedudukan dan Koordinasi ... 11

3.2 Tugas dan Uraian Kerja Magang ... 13

3.2.1 Uraian Pelaksanaan Magang ... 18

3.2.2 Detail Pelaksanaan Magang ... 19

3.3 Kendala yang Ditemukan ... 75

3.4 Solusi atas Kendala yang Ditemukan ... 76

BAB IV SIMPULAN DAN SARAN ... 77

4.1 Simpulan ... 77

4.2 Saran ... 78

DAFTAR PUSTAKA ... 79

(9)

ix

LAMPIRAN ... 81

(10)

x

DAFTAR TABEL

Tabel 1.1 Waktu Pelaksanaan Magang Perusahaan ... 5 Tabel 3.1 Uraian Pelaksanaan Magang ... 18

(11)

xi

DAFTAR GAMBAR

Gambar 2.1 Logo PT Multimedia Digital Nusantara ... 7

Gambar 2.2 Logo UMN Pictures (kiri) dan Logo UMN Consulting (kanan) .. 7

Gambar 2.3 Bagan Struktur Organisasi PT Multimedia Digital Nusantara ... 9

Gambar 3.1 Bagan Struktur Kedudukan ... 11

Gambar 3.2 Alur Koordinasi Projek Magang ... 12

Gambar 3.3 Questioner riset website merdeka 1.0 ... 20

Gambar 3.4 Halaman Home Merdeka 1.0 ... 21

Gambar 3.5 Halaman Registrasi Merdeka 1.0 ... 22

Gambar 3.6 Halaman Monitoring Registration Merdeka 1.0 ... 22

Gambar 3.7 Halaman Cover Letter Merdeka 1.0 ... 23

Gambar 3.8 Halaman Complete Registration ... 23

Gambar 3.9 Halaman Student Exam Merdeka 1.0 ... 24

Gambar 3.10 Contoh Wireframe awal Merdeka 2.0 ... 25

Gambar 3.11 File Sitemap SA dalam Google Drive ... 26

Gambar 3.12 Sitemap Student... 30

Gambar 3.13 Tampilan Registrasi... 31

Gambar 3.14 Tampilan Registration Form ... 32

Gambar 3.15 Tampilan Form yang siap disubmit ... 33

Gambar 3.16 Tampilan Monitoring Registration ... 33

Gambar 3.17 Tampilan Review Registration ... 34

Gambar 3.18 Tampilan Cover Letter ... 35

Gambar 3.19 Tampilan Complete Registration ... 36

Gambar 3.20 Tampilan Complete Registration ... 36

Gambar 3.21 Tampilan Daily Task ... 37

Gambar 3.22 Tampilan Input Task Baru ... 38

Gambar 3.23 Tampilan Student Exam ... 39

Gambar 3.24 Tampilan Input Report Title ... 39

Gambar 3.25 Tampilan Counseling ... 40

Gambar 3.26 Tampilan View Deadline ... 41

Gambar 3.27 Tampilan Register Exam ... 41

Gambar 3.28 Tampilan Upload Report ... 42

Gambar 3.29 Tampilan View Exam Note ... 43

Gambar 3.30 Tampilan Upload Post Exam Report ... 43

Gambar 3.31 Tampilan Upload Post Exam Report 2 ... 44

Gambar 3.32 Tampilan FAQ... 45

Gambar 3.33 Tampilan Halaman KHS ... 45

Gambar 3.34 Tampilan Halaman KHS 2 ... 46

Gambar 3.35 Tampilan Halaman Kerja Sama ... 46

Gambar 3.36 Tampilan KHS... 47

(12)

xii

Gambar 3.37 Tampilan Hasil Evaluasi ... 48

Gambar 3.38 Tampilan Evaluasi ... 48

Gambar 3.39 Pallete Warna Website ... 50

Gambar 3.40 Tampilan SignUp ... 51

Gambar 3.41 Tampilan Home ... 52

Gambar 3.42 Tampilan Job Vacancies - Admin ... 53

Gambar 3.43 Job Edit - Admin ... 54

Gambar 3.44 Tampilan Add Job - Admin ... 54

Gambar 3.45 Tampilan Applicant List - Admin ... 55

Gambar 3.46 Tampilan Applicant Detail - Admin... 56

Gambar 3.47 Tampilan Job Title - User... 57

Gambar 3.48 Tampilan Job Application - User ... 58

Gambar 3 49 Tampilan Applicant List - User ... 59

Gambar 3.50 Tutorial Django dari Channel Info Tech ... 61

Gambar 3.51 Pip List Packages ... 62

Gambar 3.52 Visual Studio Code Extensions ... 63

Gambar 3.53 Installed_Apps JobApply ... 64

Gambar 3.54 URLS.py ... 64

Gambar 3.55 Views.py ... 65

Gambar 3.56 Models.py ... 66

Gambar 3.57 Migrations.py ... 67

Gambar 3.58 Block/Enblock Content ... 68

Gambar 3.59 Div Class Text Input Field ... 69

Gambar 3.60 Button Apply dan Cancel ... 69

Gambar 3.61 Hasil Tampilan Job Application ... 70

Gambar 3 62 Sub Menu Log Out ... 70

Gambar 3.63 Upload Photo ... 71

Gambar 3.64 Contoh Pengisian Form ... 71

Gambar 3.65 Django Administration ... 72

Gambar 3.66 Database JOBAPPLY ... 73

Gambar 3.67 Contoh Data Tersimpan ... 73

Gambar 3.68 Contoh Error Field ... 74

Gambar 3.69 Commit GitHub Projek ... 75

(13)

xiii

DAFTAR LAMPIRAN

Lampiran A Surat Pengantar MBKM – MBKM 01……….. 81 Lampiran B Kartu MBKM - MBKM 02………82 Lampiran C Daily Task MBKM - MBKM 03………83 Lampiran D Lembar Verifikasi Laporan Internship – MBKM 04…………..99 Lampiran E Surat Penerimaan MBKM (LOA)...100 Lampiran F Form Bimbingan Magang...102 Lampiran G Pengecekan Hasil Turnitin...103