PERANCANGAN FRONT-END BERDASARKAN
USER REQUIREMENT
PADA KOMPAS GRAMEDIA – MEDIA SERVICES
LAPORAN KERJA MAGANG
Agung Destian Putra 00000013119
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK DAN INFORMATIKA
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2020
PERNYATAAN
Dengan ini saya menyatakan bahwa telahh melaksanakan praktek kerja magang pada:
Nama Perusahaan : Kompas Gramedia Majalah (GRID
Network)
Divisi : Technical Production Department, Media
Services Division, Commercial Directorate – Kompas Gramedia
Alamat : Jl. Panjang No.8A, Jakarta 11530
Periode Magang : 24 Juni 2019 – 30 Agustus 2019
Pembimbing Lapangan : Unggul Hidayat Raharjo
Laporan kerja magang ini adalah karya tulis saya sendiri, bukan plagiat dari karya tulis yang ditulis oleh orang lain atau lembaga lain, dan semua karya tulis orang lain atau lembaga lain yang dirujuk dalam laporan kerja magang ini telah disebutkan sumber kutipannya serta dicantumkan di Daftar Pustaka.
Jika di kemudian hari terbukti 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 dan status kesarjanaan strata satu yang sudah diterima akan dicabut
Tangerang, 2 April 2020
HALAMAN PENGESAHAN
Laporan Kerja Magang dengan judul
“Perancangan Front-End Berdasarkan User Requirement Pada Kompas Gramedia – Media Services”
oleh
Agung Destian Putra
telah diujikan pada hari Senin, 13 April 2020, pukul 15.00 s.d 16.00 dan dinyatakan lulus
dengan susunan penguji sebagai berikut.
Dosen Pembimbing Penguji
Ririn Ikana Desanti, S.Kom., M.Kom. Suryasari, S.Kom., M.T.
Disahkan oleh:
Ketua Program Studi Sistem Informasi – UMN
PERANCANGAN FRONT-END BERDASARKAN USER-REQUIREMENT PADA KOMPAS GRAMEDIA – MEDIA SERVICES
ABSTRAK
Oleh: Agung Destian Putra
Kompas Gramedia Majalah (GRID Network) merupakan salah satu anak perusahaan dari Kompas Gramedia Group yang bergerak di bidang media. GRID Network sendiri terdiri dari beberapa divisi, tidak hanya bagian media and publishing melainkan juga ada divisi yang berorientasi pada pengembangan produk serta advertising.
Selama pelaksanaan magang, proses bisnis yang terjadi pada GRID Network menyerupai layaknya agensi yaitu memiliki klien dengan kebutuhannya masing-masing seperti pengembangan website, fotografi hingga jasa pengembangan dan pemasaran produk. Namun pada pelaksanaan magang kali ini lebih ditekankan kepada pengembangan website terutama mengenai tampilan website itu sendiri, di dalam pengembangannya akan digunakan teknologi pengembangan website seperti HTML, CSS, CSS Framework, dan Javascript untuk membuat sebuah tampilan website yang menarik.
Keluaran yang akan dihasilkan dari pelaksanaan magang ini yaitu tampilan website yang telah mengikuti kebutuhan user. Hasil tersebut diharapkan dapat bermanfaat baik bagi klien maupun pengembang karena dapat mengaplikasikan pembelajaran di kampus bagi masyarakat luas.
Kata kunci: pengembangan website, tampilan website, html, css, css framework, javascript.
FRONT-END DESIGN BASED ON USER REQUIREMENT AT KOMPAS GRAMEDIA – MEDIA SERVICES
ABSTRACT
By: Agung Destian Putra
Kompas Gramedia Majalah (GRID Network) is one of the subsidiary company of Kompas Gramedia Group which operates in media company. GRID Network consists of several divisions, not only in media and publishing but also they have a division which focuses in product development and marketing
During the internship, GRID Network's business process has similarity like an agency which has clients and their own need just like in web development, photography, and product development and marketing. But in this time will be focused in web development especially in front-end development, meanwhile in the developing time will be used several related technologies such as HTML, CSS, CSS FRAMEWORK, and Javascript in order to create an eye-catchy visual. The desired output from this process is a web visual that follows the client's need. the output is expected to be useful for client and developer itself because it succeeded in applying all learning process in university for the society.
Keywords: Web development, web visual, HTML, CSS, CSS FRAMEWORK, Javascript
KATA PENGANTAR
Puji dan syukur kepada Tuhan Yang Maha Esa sehingga laporan kerja magang yang berjudul “PERANCANGAN FRONT-END BERDASARKAN USER REQUIREMENT PADA KOMPAS GRAMEDIA – MEDIA SERVICES” dapat diselesaikan dalam waktu yang tepat dan sesuai.
Laporan magang ini disusun dan diajukan sebagai salah satu syarat dalam menyelesaikan mata kuliah magang dan untuk memenuhi kelulusan Strata 1, Program Studi Sistem Informasi, Fakultas Teknik dan Informatika Universitas Multimedia Nusantara.
Maka dari itu, tidak lupa juga untuk mengucapkan rasa terima kasih kepada para pembimbing:
1. Ibu Ririn Ikana Desanti, S.Kom, M.Kom selaku Ketua Prodi Sistem Informasi dan selaku dosen pembimbing yang telah memberikan arahan selama proses penyusunan laporan kerja magang.
2. Bapak Unggul Hidayat Raharjo selaku pembimbing lapangan yang telah membimbing serta memberi arahan selama pelaksanaan kerja magang, dan tak lupa banyak memberi pengetahuan-pengetahuan baru yang belum sempat saya terima di dunia perkuliahan.
Mungkin masih terdapat kekurangan dalam proses pembuatan laporan magang ini, oleh karena itu diharapkan kritik dan saran untuk dapat dijadikan sebagai masukan untuk penulisan laporan yang semakin baik ke depannya. Semoga laporan kerja magang ini dapat memberikan manfaat dan wawasan luas bagi para pembacanya.
Tangerang, 2 April 2020
DAFTAR ISI
PERNYATAAN ... i HALAMAN PENGESAHAN ... ii ABSTRAK ... iii ABSTRACT ... iv KATA PENGANTAR ... vDAFTAR ISI ... vii
DAFTAR GAMBAR ... x
DAFTAR TABEL ... xi
BAB IPENDAHULUAN ... 1
1.1 Latar belakang ... 1
1.2 Maksud dan Tujuan Pelaksanaan Kerja Magang ... 3
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 3
1.3.1 Waktu Pelaksanaan Kerja Magang ... 3
1.3.2 Prosedur Pelaksanaan Kerja Magang ... 5
BAB IIGAMBARAN UMUM PERUSAHAAN ... 7
2.1 Tentang Perusahaan ... 7
2.2 Visi Kompas Gramedia – Media Services (GRID Story Factory) ... 9
2.3 Misi Kompas Gramedia – Media Services (GRID Story Factory) ... 10
2.5 Nilai-Nilai Perusahaan ... 12
2.5.1 Caring ... 12
2.5.2 Credible ... 13
2.5.3 Competent ... 13
2.5.5 Customer Delight ... 16
2.6 Struktur Organisasi Kompas Gramedia – Media Services ... 17
2.6.1 Struktur Organisasi GRID Story Factory ... 17
2.7 Sektor Layanan Perusahaan ... 20
2.7.1 Layanan marketing agency ... 20
2.7.2 Layanan Content Management ... 21
2.7.3 Layanan Media Cetak ... 21
BAB IIIPELAKSANAAN KERJA MAGANG ... 23
3.1 Kedudukan dan Posisi ... 23
3.2 Tugas yang Dilakukan ... 23
3.3 Uraian Pelaksanaan Kerja Magang ... 24
3.3.1 Minggu Pertama – Mempersiapkan Tools dan Desain Web (Project Kaaral) ... 25
3.3.2 Minggu Kedua – Lanjutan Week Pertama Pengerjaan dan Finishing ... 29
3.3.3 Minggu Ketiga – Impelementasi CSS Media Query dan Finishing ... 32
3.3.4 Minggu Keempat – Pembuatan Tampilan Intranet Perusahaan ... 34
3.3.5 Minggu Kelima – Finishing dan Perancangan Database ... 37
3.3.6 Minggu Keenam - Review Keseluruhan Proyek Ketiga dan Revisi ... 42
3.3.7 Minggu Ketujuh – Proyek Ketiga Pengembangan Portal Berita ... 42
3.3.8 Minggu Kedelapan – Review dan Finishing Proyek Ketiga ... 45
3.4 Kendala yang Dihadapi ... 47
3.5 Solusi atas Kendala ... 47
BAB IVKESIMPULAN DAN SARAN ... 49
4.1 Kesimpulan ... 49
4.2.1 Saran untuk Perusahaan ... 50
4.2.2 Saran untuk Universitas ... 51
4.2.3 Saran untuk Mahasiswa... 51
DAFTAR PUSTAKA ... 52
DAFTAR GAMBAR
Gambar 2.1 Logo Perusahaan GRID Network. ... 7
Gambar 2.2 Logo Perusahaan GRID Story Factory. ... 8
Gambar 2.3 Logo Perusahaan GRID Voice. ... 9
Gambar 2.4 Logo Nilai Caring dalam 5C Kompas Gramedia. ... 12
Gambar 2.5 Logo Nilai Credibel Dalam 5C Kompas Gramedia. ... 13
Gambar 2.6 Logo Nilai Competent Dalam 5C Kompas Gramedia. ... 14
Gambar 2.7 Logo Nilai Competitive Dalam 5C Kompas Gramedia. ... 15
Gambar 2.8 Logo Nilai Customer Delight Dalam 5C Kompas Gramedia. ... 16
Gambar 2.9 Struktur Organisasi Media Services Division ... 19
Gambar 2.10 Struktur Pelaporan Media Services Division ... 20
Gambar 2. 11 Alur Kerja GRID Voice. ... 21
Gambar 3.1 Letak fitur Rectangular Marquee Tool pada Adobe Photoshop CS6 26 Gambar 3.2 Letak fitur Slicee Tool pada Adobe Photoshop CS6... 26
Gambar 3.3 Desain di salah satu section website. ... 27
Gambar 3.4 Hasil Kaaral Index ... 28
Gambar 3.5 Desain yang dimaksud pada penjelasan. ... 30
Gambar 3.6 Hasil yang dimaksud pada gambar sebelumnya. ... 31
Gambar 3.7 Potongan baris kode CSS Media Query. ... 33
Gambar 3.8 Salah satu bagian web pada mockup intranet. ... 34
Gambar 3.9 Hasil Halaman Vendor ... 35
Gambar 3.10 Halaman All Vendor membutuhkan sedikit kustomisasi. ... 35
Gambar 3.11 Tampilan pop-up pada halaman All Vendor. ... 36
Gambar 3.12 Salah satu potongan code dalam pembuatan pop-up. ... 37
Gambar 3.13 Desain Database Menggunakan SQL Server Studio ... 41
Gambar 3.14 Desain daripada halaman detail... 44
Gambar 3.15 Penampilan akhir halaman kedua dari web portal berita yang dikerjakan. ... 47
DAFTAR TABEL
Tabel 1.1 Gantt Chart Aktivitas Magang. ... 4
Tabel 3.1 Gantt Chart Aktivitas Magang ... 24
Tabel 3.2 Tabel Client ... 38
Tabel 3.3 Tabel Industri ... 38
Tabel 3.4 Tabel Kompetensi ... 39
Tabel 3.5 Tabel master_proyek ... 39
Tabel 3.6 Tabel Proyek ... 39
Tabel 3.7 Tabel Pengguna ... 40
