PENGEMBANGAN MODUL FRONT-END PADA WEB APP KG NEWSROOM DAN KG CONTENT PT KOMPAS CYBER MEDIA
MAGANG
Diajukan sebagai salah satu syarat untuk memperoleh Gelar Sarjana Komputer (S.Kom.)
Milla Fitriyany 00000031459
PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG 2022
HALAMAN PENGESAHAN
Magang dengan judul
PENGEMBANGAN MODUL FRONT-END PADA WEB APP KG NEWSROOM DAN KG CONTENT PT KOMPAS CYBER MEDIA
oleh Nama : Milla Fitriyany
NIM : 00000031459
Program Studi : Informatika
Fakultas : Fakultas Teknik dan Informatika Telah diujikan pada hari Jumat, 07 Januari 2022
Pukul 08.00 s/d 09.00 dan dinyatakan LULUS
Dengan susunan penguji sebagai berikut
Dosen Pembimbing
(Alexander Waworuntu, S.Kom., M.T.I) NIDN: 0309068503
Penguji
(Dr. Ir. P. M. Winarno, M.Kom.) NIDN: 0330106002
Ketua Program Studi Informatika,
(Marlinda Vasty Overbeek, S.Kom., M.Kom.) NIDN: 0818038501
ii
Digitally signed by Alexander Waworuntu Date: 2022.01.10 12:29:27+07'00'
Digitally signed by Marlinda Vasty Overbeek Date: 2022.01.10 13:27:33 +07'00'
PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Dengan ini saya yang bertanda tangan di bawah ini:
Nama : Milla Fitriyany
NIM : 00000031459
Program Studi : Informatika
Fakultas : Teknik dan Informatika
Menyatakan bahwa saya telah melaksanakan praktik kerja magang:
Nama perusahaan : PT. Kompas Cyber Media Divisi : IT Enterprise Solution
Alamat : Gedung Kompas Gramedia unit II Lt. 5 Jl.
Palmerah Selatan 22-28 Jakarta 10270, Indonesia Periode magang : 14 Juni 2021 - 14 Desember 2021
Pembimbing lapangan : Rokhmat Prasetyo Nugroho
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, 20 Desember 2021
(Milla Fitriyany)
HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS
Sebagai sivitas akademik Universitas Multimedia Nusantara, saya yang bertanda tangan di bawah ini:
Nama : Milla Fitriyany
NIM : 00000031459
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:
PENGEMBANGAN MODUL FRONT-END PADA WEB APP KG NEWSROOM DAN KG CONTENT PT KOMPAS CYBER MEDIA
Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Non eks- klusif 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 Desember 2021 Yang menyatakan
Milla Fitriyany
iv
KATA PENGANTAR
Puji Syukur atas berkat dan rahmat kepada Tuhan Yang Maha Esa, atas se- lesainya penulisan laporan Magang ini dengan judul: Pengembangan Modul Front- End pada Web App KG Newsroom dan KG Content PT Kompas Cyber Media di- lakukan untuk memenuhi salah satu syarat untuk mencapai gelar Sarjana/Magister 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. 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 Alexander Waworuntu, S.Kom., M.T.I, yang membimbing pembuatan laporan Kerja Magang dan yang telah mengajar penulis tata cara menulis karya ilmiah dengan benar.
5. Rokhmat Prasetyo Nugroho, sebagai Pembimbing lapangan yang telah banyak membantu dan memberikan bimbingan selama pelaksanaan magang yang dilakukan di PT. Kompas Cyber Media divisi IT Enterprise Solution kurang lebih selama enam bulan.
6. Seluruh staff dan karyawan PT. Kompas Cyber Media terutama pada tim pro- duction yang ada di divisi IT Enterprise Solution yang telah banyak mem- bantu dan memberi masukkan selama kerja magang dilakukan.
7. Orang Tua, keluarga dan teman-teman saya yang telah memberikan bantuan dukungan material dan moral, sehingga penulis dapat menyelesaikan kerja magang dengan baik.
8. Partner magang penulis Aloisius Dewa yang telah membantu penulis dalam menyelesaikan bug atau error dari pekerjaan yang diberikan.
Semoga laporan magang ini bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi, bagi para pembaca.
Tangerang, 07 Januari 2022
Milla Fitriyany
vii
Pengembangan Modul Front..., Milla Fitriyany, Universitas Multimedia Nusantara
PENGEMBANGAN MODUL FRONT-END PADA WEB APP KG NEWSROOM DAN KG CONTENT PT KOMPAS CYBER MEDIA
Milla Fitriyany ABSTRAK
PT.Kompas Cyber Mediaatau biasa disebut KCM merupakan sebuah perusahaan mediadigital-forward yang berbasis di Jakarta, Indonesia. KCM telah bergabung dari tahun 1998 yang menaungi kompas.com dan telah bekerja sama dengan berba- gai klien di banyak industri. Pengembanganwebsite Kg Newsroom dan Kg Con- tent menggunakan duaframeworkberbeda yaitu CodeIgniteruntuk Kg Newsroom dan Laravel 8 untuk Kg Content. Hasil yang didapatkan dari kerja magang ini menunjukkan bahwa pengembangan modulfront-endyang dikerjakan berdasarkan hasil pengujian testing olehQA Engineerdan supervisi modulfront-end modul mas- ter telah memenuhi permintaan dan berjalan dengan baik dan akan terus dikem- bangkan oleh perusahaan.
Kata kunci: CodeIgniter,Laravel 8,front-end,modul master
Front-End Module Development for KG Newsroom Web App and KG Content PT Kompas Cyber Media
Milla Fitriyany ABSTRACT
PT.Kompas Cyber Media or commonly known as KCM is a digital-forward media company based in Jakarta, Indonesia.KCM has joined since 1998 to manage kom- pas.com and has worked with clients in many industries. In developing a website for Kg Newsroom and Kg Content, two different frameworks were used, namely CodeIgniter for Kg Newsroom and Laravel 8 for kg content.The results obtained from this internship indicate that the development of the front-end module which was carried out based on the results of testing by the QA Engineer and the super- vision of the front-end module of the master module has met the demand and is running good and will continue to be developed by the company.
Keywords: Android, Cafetaria Delicia, gamification, push notification
ix
DAFTAR ISI
HALAMAN PERSETUJUAN . . . ii
HALAMAN PENGESAHAN . . . ii
PERNYATAAN TIDAK MELAKUKAN PLAGIAT . . . 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
BAB 1 PENDAHULUAN . . . 1
1.1 Latar Belakang . . . 1
1.2 Maksud dan Tujuan Kerja Magang . . . 1
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang . . . 2
BAB 2 GAMBARAN UMUM PERUSAHAAN . . . 3
2.1 Sejarah Singkat Perusahaan . . . 3
2.2 Visi dan Misi Perusahaan . . . 4
2.3 Struktur Organisasi Perusahaan . . . 4
2.3.1 Nasional News Directorate . . . 4
2.3.2 Regional News Directorate . . . 5
2.3.3 Entertaiment News Directorate . . . 5
2.3.4 Magentic Directorate . . . 5
2.3.5 Commercial Directorate . . . 5
2.3.6 Operation Directorate . . . 5
2.3.7 Technology Directorate . . . 5
BAB 3 PELAKSANAAN KERJA MAGANG . . . 8
3.1 Kedudukan dan Organisasi . . . 8
3.2 Tugas yang Dilakukan . . . 8
3.3 Uraian Pelaksanaan Magang . . . 9
3.3.1 Proses Pelaksanaan . . . 9
3.3.2 Tabel Pelaksanaan Kerja Magang . . . 9
3.4 Perancangan Website . . . 13
3.4.1 Flowchart . . . 13
3.5 Hasil Output . . . 33
3.5.1 Fitur Grid dan List modul Search . . . 33
3.5.2 Pengembangan Modul Master Template . . . 34
3.5.3 Pengembangan Modul Master Collection . . . 37
3.5.4 Pengembangan Modul Master Categories . . . 40
3.5.5 Pengembangan Modul Master Menu . . . 42
3.5.6 Pengembangan User Profile . . . 44
3.6 Kendala yang Ditemukan . . . 47
3.7 Solusi dari Kendala yang Ditemukan . . . 48
BAB 4 SIMPULAN DAN SARAN . . . 49
4.1 Simpulan . . . 49
4.2 Saran . . . 49
DAFTAR PUSTAKA . . . 50
DAFTAR GAMBAR
Gambar 2.1 Struktur organisasi Kompas Gramedia PT. Kompas Cyber
Media . . . 4
Gambar 2.2 Struktur organisasi Divisi IT Enterprise Solution . . . 6
Gambar 3.1 Tampilan Flowchart modul Master template . . . 15
Gambar 3.2 Tampilan Flowchart Add Template modul Master template 17 Gambar 3.3 Tampilan Flowchart Detail modul Master template . . . . 18
Gambar 3.4 Tampilan Flowchart Edit modul Master template . . . 19
Gambar 3.5 Tampilan Sitemap Kg Content Admin-CMS . . . 20
Gambar 3.6 Tampilan Flowchart modul Collection . . . 21
Gambar 3.7 Tampilan Flowchart modul Collections halaman Add Col- lections . . . 23
Gambar 3.8 Tampilan Flowchart modul Collections halaman Detail Collections . . . 24
Gambar 3.9 Tampilan Flowchart modul Collections halaman Edit Col- lections . . . 25
Gambar 3.10 Tampilan Flowchart Modul Categories . . . 26
Gambar 3.11 Tampilan Flowchart Modul Categories halaman Detail . . 27
Gambar 3.12 Tampilan Flowchart Modul Categories halaman edit . . . 28
Gambar 3.13 Tampilan Flowchart Modul Menu . . . 29
Gambar 3.14 Tampilan Flowchart Add Menu pada Modul Menu . . . . 30
Gambar 3.15 Tampilan Flowchart Detail Menu pada Modul Menu . . . 31
Gambar 3.16 Tampilan Flowchart Edit Menu pada Modul Menu . . . . 32
Gambar 3.17 Tampilan Controllers . . . 33
Gambar 3.18 Tampilan List . . . 34
Gambar 3.19 Tampilan Grid . . . 34
Gambar 3.20 Tampilan Index pada modul master template . . . 35
Gambar 3.21 Tampilan Detail pada modul master template . . . 35
Gambar 3.22 Tampilan Add Template pada modul master template . . . 36
Gambar 3.23 Tampilan Edit pada modul master template . . . 37
Gambar 3.24 Tampilan Index collection pada modul master template . . 38
Gambar 3.25 Tampilan Detail collection pada modul master template . . 39
Gambar 3.26 Tampilan Edit collection pada modul master template . . . 39
Gambar 3.27 Tampilan Delete collection pada modul master template . 40 Gambar 3.28 Tampilan Index pada modul master category . . . 41
Gambar 3.29 Tampilan Detail pada modul master category . . . 41
Gambar 3.30 Tampilan Edit pada modul master category . . . 42
Gambar 3.31 Tampilan Navigation pada modul master menus . . . 42
Gambar 3.32 Tampilan Index pada modul master menus . . . 43
Gambar 3.33 Tampilan Index pada modul master menus . . . 43
Gambar 3.34 Tampilan Add pada modul master menus . . . 44
Gambar 3.35 Tampilan Modul User . . . 45
Gambar 3.36 Tampilan User Profile . . . 45
Gambar 3.37 Tampilan Settings User . . . 46
Gambar 3.38 Tampilan Settings User . . . 46
Gambar 3.39 Tampilan Settings User . . . 47
xi
DAFTAR TABEL
Tabel 3.1 Pekerjaan yang dilakukan setiap minggu selama pelak- sanaan kerja magang . . . 10
DAFTAR LAMPIRAN
Lampiran 1. Surat Pengantar Magang . . . 52
Lampiran 2. MBKM 01 - Surat Keterangan Penerimaan Magang . . . 53
Lampiran 3. MBKM 02 - Kartu Magang . . . 54
Lampiran 4. MBKM 03 - Daily Task . . . 55
Lampiran 5. MBKM 04 - Verifikasi Laporan MBKM . . . 74
Lampiran 6. Curriculum Vitae . . . 75
Lampiran 7. Lembar Pengecekan hasil Turnitin . . . 76
51
