LAPORAN KERJA MAGANG
Marchello William 00000012995
PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG 2019
ii
HALAMAN PERSETUJUAN Laporan Kerja Magang dengan Judul
RANCANG BANGUN WEB INFORMASI INTERNAL PADA PT GRAMEDIA MULTI UTAMA
oleh
Marchello William 00000012995
telah disetujui untuk diajukan pada
Sidang Kerja Magang Universitas Multimedia Nusantara
Tangerang, 26 September 2019 Menyetujui,
Dosen Pembimbing
Nunik Afriliana, S.Kom., MMSI,
Mengetahui, Ketua Program Studi
iii
Lembar Pernyataan tidak melakukan plagiat dalam penyusunan Laporan Kerja Magang
Dengan ini saya:
Nama : Marchello William NIM : 00000012995 Program Studi : Informatika
Menyatakan bahwa saya telah melaksanakan praktek kerja magang:
Nama perusahaan : PT. Gramedia Multi Utama (Kompas Gramedia)
Divisi : Software Engineer
Alamat : Gedung Kompas Gramedia, JL. Palmerah Selatan
No. 26-28, RT 04, RW 02, Gelora, Kec. Tanah Abang, Jakarta Pusat
Periode magang : 10 Juni 2019 – 30 Agustus 2019 Pembimbing lapangan : Anwari Rahman
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, 26 September 2019
Marchello William
iv
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa atas rahmat-Nya laporan kerja magang yang berjudul “Rancang Bangun Web Informasi Internal pada PT Gramedia Multi Utama” dapat diselesaikan dengan baik. Laporan magang ini dibuat sebagai syarat kelulusan pada Program Studi Informatika Universitas Multimedia Nusantara. Penulis juga mengucapkan terima kasih kepada:
1. Dr. Ninok Laksono, selaku rektor Universitas Multimedia Nusantara, 2. Seng Hansun, S.Si., M.Cs., selaku ketua program studi Informatika
Universitas Multimedia Nusantara, dan
3. Nunik Afriliana, , S.Kom., MMSI, selaku dosen pembimbing yang membimbing pembuatan Laporan Kerja Magang.
4. Bapak FG. Arnold Rompas, selaku Manager Enterprise Technology yang mendukung dalam pembuatan laporan magang ini.
5. Bapak Anwari Rahman, selaku Assistant Manager Enterprise Technology serta menjadi pembimbing lapangan yang membimbing dan mengawasi selama masa kerja magang.
Semoga laporan magang ini dapat bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi bagi para pembaca.
Tangerang, 26 September 2019
Marchello William
v
RANCANG BANGUN WEB INFORMASI INTERNAL PADA PT GRAMEDIA MULTI UTAMA
ABSTRAK
Kompas Gramedia merupakan salah satu perusahaan yang bergerak di bidang media massa asal Indonesia. Untuk menjalankan dan mengembangkan perusahaan, Kompas Gramedia memiliki unit – unit yang mengelola perusahaannya, seperti Corporate IT & IS (CITIS), Corporate Human Resources, Corporate Communication, Corporate Finance & Legal, Corporate Comptroller, dan Corporate Secretary. Unit-unit tersebut memiliki jumlah karyawan yang cukup banyak, sehingga saat ada informasi internal yang akan disampaikan proses penyampaian menjadi cukup sulit. Dari permasalahan tersebut dibutuhkan sarana untuk menyampaikan informasi dengan mudah, yaitu dengan membangun sebuah website. Website yang dibangun terdapat juga Content Management System (CMS) dan dikenal dengan nama myKG. myKG dibangun dengan menggunakan framework ApostropheCMS, bahasa pemrograman Javascript dengan Nunjucks Template, HTML, HTML dan database local dengan MongoDB.
Kata Kunci : ApostropheCMS, CMS, Kompas Gramedia, myKG
vi DAFTAR ISI
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG ... ii
Lembar Pernyataan tidak melakukan plagiat dalam penyusunan Laporan Kerja Magang ... iii
KATA PENGANTAR ... iv
DAFTAR GAMBAR ... vii
DAFTAR TABEL ... xiii
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang... 1
1.2 Maksud dan Tujuan Kerja Magang ... 2
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 2
BAB II GAMBARAN UMUM PERUSAHAAN ... 4
2.1 Sejarah Singkat Perusahaan ... 4
2.2 Visi dan Misi Perusahaan ... 7
2.3 Struktur Organisasi Perusahaan ... 8
BAB III PELAKSANAAN KERJA MAGANG ... 12
3.1 Kedudukan dan Koordinasi ... 12
3.2 Tugas yang Dilakukan ... 15
3.3 Uraian Pelaksanaan Kerja Magang ... 16
3.3.1 Proses Pelaksanaan ... 17
3.3.2 Kendala yang Ditemukan ... 120
3.3.3 Solusi Atas Kendala yang Ditemukan ... 120
BAB IV SIMPULAN DAN SARAN ... 121
4.1 Simpulan ... 121
4.2 Saran ... 121
DAFTAR PUSTAKA ... 122
LAMPIRAN ... 123
vii
DAFTAR GAMBAR
Gambar 2.1 Logo Kompas Gramedia (Kompas Gramedia, 2019)... 7
Gambar 2.2 Struktur Organisasi Perusahaan ... 8
Gambar 3.1 Struktur Organisasi CITIS ... 12
Gambar 3.2 Context Diagram ... 19
Gambar 3.3 DFD Level 1 ... 21
Gambar 3.4 DFD Level 2 Pengaturan Umum ... 23
Gambar 3.5 DFD Level 2 Pengaturan Halaman Kontak Kami ... 24
Gambar 3.6 Flowchart Halaman Utama ... 25
Gambar 3.7 Flowchart Login ... 26
Gambar 3.8 Tab Berita dan Acara... 27
Gambar 3.9 Flowchart Halaman Berita ... 28
Gambar 3.10 Flowchart Halaman Acara ... 29
Gambar 3.11 Flowchart Tab People... 30
Gambar 3.12 Flowchart halaman KG Inspirasi... 31
Gambar 3.13 Flowchart Halaman Komunitas Karyawan ... 32
Gambar 3.14 Flowchart Halaman KG Bisnis ... 33
Gambar 3.15 Flowchart Halaman Kontak ... 34
Gambar 3.16 Flowchart Tab Galeri ... 35
Gambar 3.17 Flowchart Halaman Foto ... 36
Gambar 3.18 Flowchart Halaman Video ... 37
Gambar 3.19 Flowchart Halaman Infokita... 38
Gambar 3.20 Flowchart CMS Halaman ... 39
Gambar 3.21 Flowchart CMS Submenu Meta ... 41
viii
Gambar 3.22 Flowchart CMS Submenu Categories ... 43
Gambar 3.23 Flowchart CMS Submenu Media ... 44
Gambar 3.24 Flowchart CMS Submenu Content ... 45
Gambar 3.25 Flowchart CMS Konten Berita ... 46
Gambar 3.26 Flowchart CMS Konten Acara ... 47
Gambar 3.27 Flowchart CMS Konten Inspirasi ... 48
Gambar 3.28 Flowchart CMS Konten Bisnis ... 49
Gambar 3.29 Flowchart CMS Konten Komunitas ... 50
Gambar 3.30 Flowchart CMS Konten Paguyuban ... 51
Gambar 3.31 Flowchart CMS Konten Olahraga ... 52
Gambar 3.32 Flowchart CMS Konten Infokita ... 53
Gambar 3.33 Flowchart CMS Konten Foto ... 54
Gambar 3.34 Flowchart CMS Konten Video ... 55
Gambar 3.35 Flowchart CMS Halaman Utama ... 57
Gambar 3.36 Rancangan Tampilan Utama ... 58
Gambar 3.37 Rancangan Navigation Bar dan Submenu ... 59
Gambar 3.38 Rancangan Submenu Profile ... 59
Gambar 3.39 Rancangan Submenu Notification ... 59
Gambar 3.40 Rancangan Halaman Berita ... 60
Gambar 3.41 Rancangan Detail Berita ... 61
Gambar 3.42 Rancangan Halaman Acara ... 62
Gambar 3.43 Rancangan halaman KG Inspirasi ... 63
Gambar 3.44 Rancangan Detail KG Inspirasi ... 63
Gambar 3.45 Rancangan Halaman Komunitas Karyawan ... 64
ix
Gambar 3.46 Rancangan Halaman KG Bisnis ... 65
Gambar 3.47 Rancangan KG in Numbers... 66
Gambar 3.48 Rancangan Halaman Infokita ... 66
Gambar 3.49 Rancangan Halaman Kontak Kami ... 67
Gambar 3.50 Rancangan Halaman Galeri Foto ... 68
Gambar 3.51 Rancangan Halaman Galeri Video ... 69
Gambar 3.52 Rancangan Halaman Awal Login ... 69
Gambar 3.53 Rancangan Halaman Login ... 70
Gambar 3.54 Halaman Utama ... 71
Gambar 3.55 Halaman InfoKita ... 72
Gambar 3.56 Halaman Berita ... 73
Gambar 3.57 Halaman Detail Berita ... 74
Gambar 3.58 Halaman Acara ... 75
Gambar 3.59 Halaman Detail Acara ... 76
Gambar 3.60 Halaman KG Inspirasi ... 77
Gambar 3.61 Halaman Detail Inspirasi ... 78
Gambar 3.62 Halaman Komunitas Karyawan ... 79
Gambar 3.63 Halaman KG Olahraga ... 80
Gambar 3.64 Halaman KG Paguyuban ... 81
Gambar 3.65 Halaman KG Bisnis ... 82
Gambar 3.66 Halaman Kontak ... 83
Gambar 3.67 Halaman Galeri Foto ... 84
Gambar 3.68 Halaman Galeri Video ... 85
Gambar 3.69 Halaman Login Awal ... 86
x
Gambar 3.70 Halaman Login Form ... 86
Gambar 3.71 Logo Apostrophe dan Page Menu ... 87
Gambar 3.72 Modal New Page Tab Basics ... 88
Gambar 3.73 Modal New Page Tab Permissions... 88
Gambar 3.74 Modal Page Setting Tab Basics ... 89
Gambar 3.75 Modal Page Setting Tab Permissions ... 90
Gambar 3.76 Modal Copy Page Tab Basics ... 90
Gambar 3.77 Modal Copy Page Tab Permissions ... 91
Gambar 3.78 Reorganize Page ... 92
Gambar 3.79 Modal Manage Users ... 92
Gambar 3.80 Modal Create Users ... 93
Gambar 3.81 Modal Manage Groups ... 93
Gambar 3.82 Modal Create Group Tab Basics ... 94
Gambar 3.83 Modal Create Group Tab Permissions ... 95
Gambar 3.84 Modal Manage Images ... 95
Gambar 3.85 Modal New Images / Edit Images ... 96
Gambar 3.86 Modal Manage Files ... 96
Gambar 3.87 Modal New Files / Edit Files ... 97
Gambar 3.88 Modal Manage Forms ... 97
Gambar 3.89 Modal Create Form Tab Basics ... 98
Gambar 3.90 Modal Create Form Tab Form ... 98
Gambar 3.91 Modal Create Form Tab After-Submission ... 99
Gambar 3.92 Modal Create Form Tab Advanced ... 99
Gambar 3.93 Modal Manage Kategori Berita ... 100
xi
Gambar 3.94 Modal Create Kategori Berita ... 101
Gambar 3.95 Modal Manage Kategori Bisnis... 101
Gambar 3.96 Modal Create Kategori Bisnis Tab Basics ... 102
Gambar 3.97 Modal Create Kategori Bisnis Tab Info ... 102
Gambar 3.98 Modal Manage Kategori Edisi ... 103
Gambar 3.99 Modal Create Kategori Edisi ... 104
Gambar 3.100 Modal Manage Kategori Foto & Video ... 104
Gambar 3.101 Modal Create Kategori Foto & Video ... 105
Gambar 3.102 Modal Manange Berita ... 105
Gambar 3.103 Modal Create Berita Tab Basics... 106
Gambar 3.104 Modal Create Berita Tab Info ... 107
Gambar 3.105 Modal Create Berita Tab Meta ... 107
Gambar 3.106 Create Berita Halaman Detail ... 108
Gambar 3.107 Modal Manage Acara ... 109
Gambar 3.108 Modal Create Acara Tab Basics ... 109
Gambar 3.109 Modal Create Acara Tab Advanced ... 110
Gambar 3.110 Modal Create Acara Tab Meta ... 110
Gambar 3.111 Modal Create Acara Tab Info ... 111
Gambar 3.112 Create Acara Halaman Detail ... 112
Gambar 3.113 Modal Manage KG Inspirasi ... 113
Gambar 3.114 Modal Create KG Inspirasi ... 113
Gambar 3.115 Modal Manage Komunitas Karyawan ... 114
Gambar 3.116 Modal Create Komunitas Karyawan Tab Basics ... 115
Gambar 3.117 Modal Create Komunitas Karyawan Tab Info ... 115
xii
Gambar 3.118 Modal Manage KG Bisnis ... 116
Gambar 3.119 Modal Create KG Bisnis Tab Basics ... 116
Gambar 3.120 Modal Create KG Bisnis Tab Info ... 117
Gambar 3.121 Modal Manage Galeri Foto ... 117
Gambar 3.122 Modal Create Galeri Foto Tab Basics ... 118
Gambar 3.123 Modal Create Galeri Foto Tab Meta ... 119
Gambar 3.124 Modal Create Galeri Foto Tab Info ... 119
xiii
DAFTAR TABEL
Tabel 3.1 Rincian Tugas yang Dikerjakan. ... 16
