PERAN WEB DEVELOPER DALAM PROSES PERANCANGAN WEBSITE FOOD STATION DI PT
VGI DIGITAL
LAPORAN KERJA MAGANG
Pius Hans Christian 00000021116
PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2022
ii
HALAMAN PERSETUJUAN
Laporan Kerja Magang dengan judul
“Peran Web Developer dalam Proses Perancangan Website Food Station di PT VGI Digital Indonesia”
Oleh
Pius Hans Christian
Telah disetujui untuk diajukan pada
Sidang Ujian Magang Universitas Multimedia Nusantara
Tangerang, 20 Desember 2021 Menyetujui,
Dosen Pembimbing Ketua Program Studi
Melissa Indah Fianty, S.Kom., M.MSI. Ririn Ikana Desanti, S.Kom., M.Kom.
iii
HALAMAN PENGESAHAN
Laporan Kerja Magang dengan judul
“Peran Web Developer dalam Proses Perancangan Website Food Station di PT VGI Digital Indonesia”
Oleh
Pius Hans Christian
telah diujikan pada hari Rabu 5 Januari pukul 09.00 – 10.00 dan dinyatakan lulus
dengan susunan penguji sebagai berikut.
Dosen Pembimbing Penguji
Melissa Indah Fianty, S.Kom., M.MSI. Jansen Wiratama, S.Kom., M.Kom.
Disahkan oleh
Ketua Program Studi Sistem Informasi – UMN
Ririn Ikana Desanti, S.Kom., M.Kom.
approved 11-Jan-2022
iv
PERAN WEB DEVELOPER DALAM PROSES PERANCANGAN WEBSITE FOOD STATION DI PT VGI DIGITAL
ABSTRAK
Oleh: Pius Hans ChristianPT VGI Digital Indonesia merupakan sebuah perusahaan start up yang bergerak dalam bidang Digital Agency. Perusahaan ini memiliki beberapa layanan jasa seperti digital marketing, customer data platform, website builder, mobile app, dan video production. Kemajuan era digital mendorong kehidupan dan gaya hidup manusia lebih mudah, praktis, dan modern dengan memanfaatkan teknologi digital.
Dalam proses perkembangan produk di era digital ini, peran web developer diperlukan dalam sebuah perusahaan digital agency PT VGI Digital Indonesia yang mempunyai visi memanfaatkan internet dan teknologi untuk mendukung efisiensi laju informasi dan bisnis di Indonesia.
Selama menjabat sebagai mahasiswa magang web developer di PT VGI Digital, penulis diberikan tugas untuk mengerjakan proyek website e-commerce Food Station. Selama magang, penulis memperdalam skill membangun website front-end, back-end, dan berkesempatan untuk mempelajari pengetahuan lain seperti SEO, digital marketing, bisnis dan lainnya.
Praktik kerja magang yang telah dilakukan mulai bulan Februari 2021 hingga Mei 2021 telah menghasilkan sebuah website baru korporat dan e-commerce Food Station. Kendala yang penulis hadapi selama magang adalah sulitnya koordinasi antara tim, yang membuat komunikasi pembuatan proyek menjadi kurang baik. Penulis banyak berkoordinasi dengan UI/UX designer dan Project Manager.
Kata kunci: Digital Agency, e-commerce, Website, Web Developer
v
WEB DEVELOPERS ROLE IN THE FOOD STATION WEBSITE DEVELOPMENT PROCESS AT PT VGI DIGITAL
ABSTRACT
By: Pius Hans ChristianPT VGI Digital Indonesia is a start-up company engaged in the Digital Agency. This company has several services such as digital marketing, customer data platform, website builder, mobile app, and video production. The advancement of the digital era encourages people's lives and lifestyles to be easier, practical, and modern by utilizing digital technology. In the process of product development in this digital era, the role of web developers is needed in a digital agency company PT VGI Digital Indonesia which has a vision of utilizing the internet and technology to support the efficiency of information and business rates in Indonesia.
While serving as a web developer internship student at PT VGI Digital, the author was given the task of working on the Food Station e-commerce website project. During the internship, the author deepens the skills of building front-end, back-end websites, and has the opportunity to learn other knowledge such as SEO, digital marketing, business and others.
The internship practice that has been carried out from February 2021 to May 2021 has resulted in a new corporate website and Food Station e-commerce.
The obstacle that the author faced during the internship was the difficulty of coordination between the teams, which made communication on project creation not good. The author coordinates a lot with UI/UX designers and Project Managers.
Keywords: Digital Agency, e-commerce, Website, Web Developer
vi
KATA PENGANTAR
Puji dan syukur penulis panjatkan kepada Tuhan yang Maha Kuasa atas segala berkat Kasih dan Karunia-nya sehingga penulis senantiasa mendapatkan kekuatan, kesabaran, dan kesehatan untuk menyelesaikan praktik kerja dan laporannya.
Laporan praktik kerja magang yang berjudul “Peran Web Developer dalam proses perancangan website Food Station di PT VGI Digital Indonesia” dapat selesai tepat pada waktunya. Laporan magang ini dibuat sebagai syarat kelulusan mata kuliah Magang dan syarat untuk memperoleh gelar Sarjana S.Kom.
Proses magang ini tidak lepas dari bantuan pihak-pihak terkait yang mendukung penulis dalam proses pelaksanaan magang. Pada kesempatan ini, penulis menyampaikan ucapan terima kasih kepada semua pihak yang telah membantu kelancaran dalam pelaksanaan praktik kerja magang dan penyelesaian laporannya baik secara materiil maupun moriil. Khususnya ditujukan kepada
1. Ibu Ririn Ikana Desanti, S.Kom., M.Kom., selaku Ketua Program Studi Sistem Informasi Universitas Multimedia Nusantara.
2. Ibu Melissa Indah Fianty, S.Kom., M.MSI., selaku dosen pembimbing magang yang telah membimbing penulis dalam penyelesaian laporan magang ini.
3. PT VGI Digital Indonesia selaku perusahaan yang telah memberikan kesempatan kepada penulis untuk magang kurang lebih selama tiga bulan.
4. Bapak Ari Soetjitro selaku pembimbing lapangan selama penulis melaksanakan praktik kerja lapangan.
vii
5. Bapak Patra Ramadana selaku CEO PT VGI Digital Indonesia yang banyak memberikan ilmu kepada penulis tentang bisnis.
6. Bapak Dendy Aryansyah selaku ketua tim creative di PT VGI Digital Indonesia yang mengarahkan penulis dalam mengerjakan proyek yang sedang dijalankan.
7. Bapak Aris Siagian selaku HR PT VGI Digital Indonesia yang membantu penulis dalam kelancaran kegiatan praktik kerja magang khususnya bagian dokumen-dokumen.
8. Orang tua dan kakak Josephine Sheila Gradiana yang tak pernah hentinya memberikan doa dan semangat kepada penulis.
9. Felika Audesya Utari dan Irene Christina yang telah memberikan dorongan, motivasi, semangat, dan sukacita kepada penulis
Semoga laporan praktik kerja magang ini dapat memberikan informasi dan inspirasi yang bermanfaat bagi pembaca.
Tangerang, 20 Desember 2021
Pius Hans Christian
viii
DAFTAR ISI
PERNYATAAN ... i
HALAMAN PERSETUJUAN ... ii
ABSTRAK ... iv
ABSTRACT ... v
KATA PENGANTAR ... vi
DAFTAR ISI ... viii
DAFTAR GAMBAR ... x
DAFTAR TABEL ... xii
BAB I PENDAHULUAN ... 1
1.1. Latar Belakang Masalah ... 1
1.2. Maksud dan Tujuan Pelaksanaan Kerja Magang ... 2
1.3. Waktu dan Prosedur Pelaksanaan Kerja Magang ... 3
1.3.1. Waktu dan Pelaksanaan Kerja Magang ... 3
1.3.2. Prosedur Pelaksanaan Kerja Magang ... 3
BAB II GAMBARAN PERUSAHAAN ... 7
2.1. Gambaran Umum Perusahaan ... 7
2.2. Visi dan Misi Perusahaan ... 8
2.2.1. Visi Perusahaan ... 9
2.2.2. Misi Perusahaan ... 9
2.3. Struktur Organisasi Perusahaan ... 9
2.3.1. President Commisioner ... 10
2.3.2. CEO ... 10
2.3.3. Finance ... 10
2.3.4. Human Resource ... 10
2.3.5. Marketing & Sales ... 10
2.3.6. Operation Manager ... 11
2.3.7. IT ... 11
2.3.8. Project Manager ... 11
ix
2.3.9. Designer ... 11
2.3.10. Programmer ... 11
2.3.11. Content ... 12
BAB III PELAKSANAAN KERJA MAGANG ... 13
3.1. Kedudukan dan Koordinasi ... 13
3.2. Tugas yang Dilakukan ... 14
3.3. Uraian Pelaksanaan Kerja magang ... 17
3.3.1. Perkenalan dengan lingkungan kerja dan tugas ... 18
3.3.2. Pembuatan Server Development ... 19
3.3.3. Perancangan antarmuka website Food Station ... 20
3.3.4. Integrasi backend dengan frontend ... 46
3.3.5. Pemindahan dari server development ke server production ... 47
3.3.6. Testing dan Bug Fixing ... 47
3.4. Pekerjaan Tambahan ... 47
3.5. Kendala dan Solusi ... 55
3.5.1 Kendala ... 55
3.5.2 Solusi ... 55
BAB IV Kesimpulan dan Saran ... 57
4.1. Kesimpulan ... 57
4.2. Saran ... 57
DAFTAR PUSTAKA ... 58
LAMPIRAN ... 59
x
DAFTAR GAMBAR
Gambar 2. 1 Logo Video Game Indonesia... 7
Gambar 2. 2 Logo PT VGI Digital Indonesia sekarang ... 8
Gambar 2. 3 Struktur Organisasi PT VGI Digital ... 9
Gambar 3. 1 Server Development Food Station ... 19
Gambar 3. 2 Dasbor Wordpress ... 19
Gambar 3. 3 Sitemap website Food Station ... 20
Gambar 3. 4 Halaman Home Page versi desktop ... 21
Gambar 3. 5 Halaman Home Page versi mobile ... 21
Gambar 3. 6 Halaman Kumpulan Produk versi desktop ... 22
Gambar 3. 7 Halaman Kumpulan Produk versi mobile ... 22
Gambar 3. 8 Halaman Berita Food Station versi desktop ... 23
Gambar 3. 9 Halaman Berita Food Station versi mobile ... 23
Gambar 3. 10 Tampilan Event Calendar ... 24
Gambar 3. 11 Tampilan PIBC price & stock versi desktop ... 24
Gambar 3. 12 Tampilan PIBC price & stock versi mobile ... 25
Gambar 3. 13 Product Detail ... 26
Gambar 3. 14 Tampilan Halaman Keranjang versi desktop ... 26
Gambar 3. 15 Tampilan Halaman Keranjang versi mobile ... 26
Gambar 3. 16 Tampilan Metode Pembayaran versi desktop ... 27
Gambar 3. 17 Tampilan Metode Pembayaran versi mobile ... 27
Gambar 3. 18 Tampilan Pilihan Pengiriman versi desktop ... 28
Gambar 3. 19 Tampilan Pilihan Pengiriman versi mobile ... 28
Gambar 3. 20 Tampilan Rating versi desktop ... 29
Gambar 3. 21 Tampilan Rating versi mobile ... 29
Gambar 3. 22 Halaman Sekilas Perusahaan versi desktop ... 30
Gambar 3. 23 Halaman Sekilas Perusahaan versi mobile ... 30
Gambar 3. 24 Halaman Visi, Misi, dan Strategi versi desktop ... 31
Gambar 3. 25 Halaman Visi, Misi, dan Strategi versi mobile... 31
Gambar 3. 26 Halaman Struktur Organisasi versi desktop ... 32
xi
Gambar 3. 27 Halaman Struktur Organisasi versi mobile... 32
Gambar 3. 28 Halaman Sambutan Direktur Utama versi desktop ... 33
Gambar 3. 29 Halaman Sambutan Direktur Utama versi mobile... 33
Gambar 3. 30 Halaman Bisnis Kami versi desktop... 34
Gambar 3. 31 Halaman Bisnis Kami versi mobile ... 34
Gambar 3. 32 Halaman Buletin versi desktop ... 35
Gambar 3. 33 Halaman Buletin versi mobile ... 35
Gambar 3. 34 Halaman Informasi Publik versi desktop ... 36
Gambar 3. 35 Halaman Informasi Publik versi mobile ... 36
Gambar 3. 36 Halaman Isi Artikel versi desktop ... 37
Gambar 3. 37 Halaman Isi Artikel versi mobile ... 37
Gambar 3. 38 Tampilan Event ... 38
Gambar 3. 39 Halaman Karir versi desktop ... 38
Gambar 3. 40 Halaman Karir versi mobile ... 39
Gambar 3. 41 Halaman Galeri Album versi desktop ... 39
Gambar 3. 42 Halaman Galeri Album versi mobile ... 40
Gambar 3. 43 Halaman Galeri Video versi desktop ... 40
Gambar 3. 44 Halaman Galeri Video versi mobile ... 41
Gambar 3. 45 Halaman Beras PNS versi desktop ... 42
Gambar 3. 46 Halaman Beras PNS versi mobile ... 42
Gambar 3. 47 Tampilan redeem check PNS versi desktop ... 42
Gambar 3. 48 Tampilan redeem check PNS versi mobile ... 43
Gambar 3. 49 Halaman Kontak Kami versi desktop ... 43
Gambar 3. 50 Halaman Kontak Kami versi mobile ... 44
Gambar 3. 51 Tampilan Request Form ... 44
Gambar 3. 52 Tampilan Email Form versi desktop ... 45
Gambar 3. 53 Tampilan Email Form versi mobile ... 45
Gambar 3. 54 Tampilan Footer versi desktop ... 46
Gambar 3. 55 Tampilan Footer versi mobile ... 46
xii
DAFTAR TABEL
Tabel 3. 1 Timeline Praktik Kerja Magang ... 15 Tabel 3. 2 Timeline Rincian Pekerjaan ... 15 Tabel 3. 3 UAT checklist ... 47
