SLICING DESAIN WEB DARI FIGMA KE HTML

PADA KAPANLAGI.COM

PRAKTIK KERJA LAPANGAN

Disusun oleh :
Agung Indra Prasetyo (200403010024)
Yunior Kurniawan (200403010012)

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS PGRI KANJURUHAN MALANG
2022
SLICING DESAIN WEB DARI FIGMA KE HTML
PADA KAPANLAGI.COM

PRAKTIK KERJA LAPANGAN

Disusun oleh :
Agung Indra Prasetyo (200403010024)
Yunior Kurniawan (200403010012)

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS PGRI KANJURUHAN MALANG
2022

i
 LEMBAR PENGESAHAN
Diajukan kepada Fakultas Sains Dan Teknologi untuk
memenuhi persyaratan dalam menyelesaikan Program Praktek Kerja
Lapangan.
Nama Kegiatan : Praktek Kerja Lapangan
Pokok Bahasan : Slicing Desain Web dari Figma ke HTML
Pada KapanLagi.com
Tempat : KapanLagi.com
Tanggal Pelaksanaan : 10 Oktober 2022 – 10 Desember 2022
Tim Pelaksana : Agung Indra Prasetyo (200403010024)
Yunior Kurniawan (200403010012)
Kami yang bertanda tangan dibawah ini menyetujui dengan
dilaksanakannya kegiatan tersebut.

Malang, 20 Desember 2022

Menyetujui

Dosen Pembimbing PKL Pembimbing

KapanLagi.com

Danang Aditya Nugraha S.St., Adi Cahyono

M.T.
NIDN. 0730108501

Mengetahui

Dekan Fakultas Sains dan Teknologi Ketua Program Studi Teknik

Informatika

Dr. I Ketut Suastika, M.Si. Moh. Ahsan S.Kom., M.T.

NIDN. 0011076602 NIDN. 0720058402

ii
 KATA PENGANTAR
Assalamualaikum Wr. Wb.
Puji syukur penulis panjatkan kepada tuhan yang maha esa atas
limpahan rahmat, taufik, serta hidayah-Nya sehingga penulis dapat
menyelesaikan laporan praktek kerja lapangan yang berjudul
“Slicing Desain Web dari Figma ke HTML”
Praktek kerja lapangan ini merupakan kegiatan akademik fakultas
sains dan teknologi, dengan tujuan untuk menambah wawasan
kepada mahasiswa tentang aktivitas di lapangan dengan memberikan
suatu deskripsi mengenai perbandingan ilmu yang didapat di
perkuliahan dengan kondisi yang ada sebenarnya di lapangan.
Penulis sudah berupaya untuk menyelesaikan laporan ini dengan
baik, tentunya tidak lepas dari bantuan berbagai pihak yang telah
membantu dan membimbing dalam pelaksanaan praktek kerja
lapangan serta dalam penyusunan laporannya. Oleh karena itu,
dengan segala hormat saya mengucapkan terimakasih kepada:
1. Bapak Moh. Ahsan S.Kom., M.T., selaku Ketua Program
Studi Teknik Informatika Universitas PGRI Kanjuruhan
Malang.
2. Bapak Danang Aditya Nugraha S.St., M.T. selaku dosen
pembimbing yang telah memberikan bimbingan,
pengarahan, dan petunjuk.
3. Bapak Adi cahyono , atas kerjasama dan kesediaannya
memberikan kesempatan kepada kami untuk melaksanakan
Praktek Kerja Lapangan.
4. Mas Ridwan Fadillah Alfa Roni & Mas Ilham Rohmad
Widayat selaku pembimbing Praktek Kerja lapangan pada
KapanLagi.com
5. Kedua orang tua yang senantiasa memberikan motivasi dan
do’a sampai selesainya kegiatan Praktek Kerja Lapangan
Kami menyadari dalam penyusunan laporan ini masih sangat
banyak kekurangan yang terdapat di dalamnya, namun kami sangat
terbantu jika ada masukan dan saran agar dapat menyempurnakan
laporan ini. Dan tentunya semoga laporan ini dapat memberi manfaat
bagi seluruh mahasiswa Universitas PGRI Kanjuruhan Malang dan
iii
tentu khususnya bagi mahasiswa Prodi Teknik Informatika yang
ingin melaksanakan kegiatan magang/PKL.

Malang, 20 Desember 2022

Penulis

iv
 DAFTAR ISI

SAMPUL.............................................................................................i
LEMBAR PENGESAHAN................................................................ii
KATA PENGANTAR.......................................................................iii
DAFTAR ISI.......................................................................................v
DAFTAR GAMBAR.........................................................................vi
BAB I..................................................................................................1
1.1 Latar Belakang...................................................................1
1.2 Tujuan................................................................................2
1.3 Waktu dan Tempat.............................................................2
BAB II.................................................................................................3
2.1 Profil Perusahaan...............................................................3
2.2 Logo KapanLagi................................................................4
2.3 Visi dan Misi......................................................................4
2.4 Struktur Perusahaan...........................................................4
2.5 Ruang Linkup Kerja Divisi Terkait...................................5
BAB III...............................................................................................6
3.1 Waktu dan Tempat Pelaksanaan........................................6
3.2 Jadwal Kegiatan.................................................................6
3.3 Teori Penunjang.................................................................6
BAB IV.............................................................................................18
4.1 Kesimpulan......................................................................18
DAFTAR PUSTAKA.......................................................................19
LAMPIRAN-LAMPIRAN...............................................................20

v
 DAFTAR GAMBAR

Gambar 1 Lokasi kantor KapanLagi...................................................2

Gambar 2 Logo KapanLagi................................................................4
Gambar 3 Struktur organisasi KapanLagi..........................................5
Gambar 4 Struktur lingkup kerja terkait.............................................5
Gambar 5 Web....................................................................................7
Gambar 6 HTML................................................................................8
Gambar 7 CSS....................................................................................9
Gambar 8 Figma.................................................................................9
Gambar 9 Tugas dari pihak perusahaan............................................10
Gambar 10 Hasil pengerjaan section header.....................................10
Gambar 11 Section about us.............................................................11
Gambar 12 Section our service.........................................................11
Gambar 13 Section latest works.......................................................11
Gambar 14 Section venues...............................................................12
Gambar 15 Section book now...........................................................12
Gambar 16 Section articles...............................................................12
Gambar 17 Section footer.................................................................13
Gambar 18 Bagian popup pertama...................................................13
Gambar 19 Bagian popup kedua.......................................................13
Gambar 20 Section Header...............................................................14
Gambar 21 Section Tema.................................................................14
Gambar 22 Section Hadiah...............................................................15
Gambar 23 Caranya..........................................................................15
Gambar 24 Caranya..........................................................................15
Gambar 25 Section Galeri Vidio......................................................16
Gambar 26 Section Banner...............................................................16
Gambar 27 Section Seputar Fimela..................................................16
Gambar 28 Section Sponsor.............................................................17
Gambar 29 Section Footer................................................................17

vi
 BAB I
PENDAHULUAN
1.1 Latar Belakang
Praktek Kerja Lapangan (PKL) merupakan salah satu cara
untuk menghasilkan Sumber Daya Manusia (SDM) yang berkualitas
tinggi, siap pakai, dan terampil maka pihak pemerintah maupun
swasta berupaya mendidik SDM sebelum terjun kedalam dunia kerja
yang dijalani. Salah satu caranya adalah melalui lembaga pendidikan
seperti sekolah, pendidikan kejurusan dan perguruan tinggi yang
membentuk SDM yang bermutu tinggi dalam segala hal dari
kompetensi yang diajarkan serta dapat bersaing dengan lembaga
pendidikan lain, karena hal itulah program PKL menjadi salah satu
kurikulum wajib yang harus ditempuh oleh mahasiswa.
Perguruan tinggi juga menjadi lembaga yang dituntut dalam
menyiapkan peserta didik yang berkompeten dalam bidang akademis
maupun non akademik, serta memiliki soft skill yang mumpuni.
Perkembangan industri yang semakin cepat, sangat diperlukan oleh
peserta didik untuk meningkatkan kualitas agar mampu memiliki
wawasan yang luas mengenai perkembangan teknologi informasi
dan komunikasi.
Berdasarkan hal tersebut, maka Jurusan Teknik Informatika
Universitas PGRI Kanjuruhan Malang memfasilitasi mahasiswanya
untuk meningkatkan serta mengembangkan apa yang telah diketahui
selama proses perkuliahan sesuai dengan bidangnya yang dinamakan
Praktek Kerja Lapangan. Praktek Kerja Lapangan termasuk dalam
kelompok program pengalaman lapangan nonkependidikan. Magang
merupakan salah satu mata kuliah wajib dengan jangka waktu
pelaksanaannya berkisar minimal 3 bulan pada instansi atau lembaga
yang sesuai dengan bidang yang dipilih. Adanya Praktik Kerja
Lapangan, diharapkan mahasiswa dapat memperoleh pengalaman,
pengetahuan, dan pelatihan sesuai dengan bidang masing-masing dan
mengetahui dunia kerja yang sesungguhnya.
KapanLagi.com merupakan bagian dari KapanLagi
Youniverse dan berada di bawah PT. Liputan Enam Dot Com yang
merupakan anggota dari Emtek Group. KapanLagi.com mempunyai
1
dua kantor, di Jakarta untuk bagian pengembangan bisnis dan
marketing, sedangkan di Malang untuk bagian editor, programmer
dan desainer.
1.2 Tujuan
Tujuan pelaksanaan Praktek kerja lapangan di
KapanLagi.com, antara lain:
1. Sebagai sarana untuk mengembangkan kompetensi dan
mengaplikasikan ilmu yang telah diperoleh khususnya di
bidang web.
2. Memberikan pengalaman kepada mahasiswa tentang dunia
kerja yang nyata.
3. Mampu melakukan kerjasama tim dengan perusahaan tempat
praktik serta dapat mendukung kapasitas kompetitif yang
hendak mereka bangun.
1.3 Waktu dan Tempat
Waktu dan tempat pelaksanaan magang di KapanLagi.com,
diselenggarakan pada:
Hari : Senin s.d Jum’at
Waktu : (Work From Anywhere)
Tanggal Pelaksanaan : 10 Oktober 2022 – 10 Desember 2022
Tempat Kantor :Jl. Blimbing Indah Tengah X No.17,
Polowijen, Blimbing, Malang City, East
Java 65126

Gambar 1 Lokasi kantor KapanLagi

2
 BAB II
GAMBARAN UMUM KapanLagi.com
2.1 Profil Perusahaan
KapanLagi Youniverse (KLY) merupakan perusahaan
media online hasil penggabungan antara PT Kreatif Media Karya
(KMK) dan PT KapanLagi Networks (KLN) serta masih berada di
bawah Emtek Group. Merger sejak tahun 2018, KLY bertujuan
untuk menjalin dan menjaga hubungan dengan para pengguna
internet, membangun sentimen positif, menangkal berita palsu atau
hoax dan menjaga kredibilitas informasi dengan pemberitaan yang
independen. Perusahaan media online ini memiliki visi untuk
menjadi media digital yang memiliki pengguna terbesar di Indonesia,
serta menyajikan konten yang menarik dan terpercaya dari berbagai
segmen.
Penggabungan yang terjadi antara KMK dan KLN
menjadikan KLY merupakan grup media online terbesar di
Indonesia. Para followers di media sosial yang menjadi pengikut dari
media online yang tergabung dalam KLY pun sudah mencapai lebih
dari 75 juta. KLY pun memiliki 120 juta Unique Visitor, 100 juta
penonton video, dan 50 ribu produksi artikel setiap bulannya.
Sebagai media platform, KLY juga hadir dan terintegrasi
dengan jaringan televisi, aset digital yang dimiliki serta para
pengguna media online. Selain itu, KLY juga memiliki layanan
untuk memroduksi konten kreatif yang akan didistribusikan melalui
jaringan-jaringan digital yang tergabung dalam KLY. Layanan
pembentukan konten dapat berupa branding digital, campaign
digital, maupun manajemen event. Jaringan media online yang
tergabung dalam KLY memiliki segmentasi-segmentasi yang
berbeda. Terdapat 10 media online yang tergabung dalam KLY,
yaitu Liputan6.com dan Merdeka.com untuk segmentasi berita,
KapanLagi.com, Brilio.net, dan Famous.id untuk segmentasi
entertainment, Bola.net dan Bola.com untuk segmentasi olahraga,
Otosia.id untuk segmentasi otomotif, serta Fimela.com dan
Dream.co.id untuk segmentasi lifestyle.

3
2.2 Logo KapanLagi

Gambar 2 Logo KapanLagi

2.3 Visi dan Misi

KapanLagi memiliki visi dan misi sebagai berikut:
a. Visi
Meningkatkan kualitas hidup
masyarakat melalui teknologi, inovasi,
dan layanan online di era digital serta
bertujuan untuk menjadikan
masyarakat lebih pintar.
b. Misi
Menjadi perusahaan media online
nomor 1 di Indonesia yang
menyajikan solusi 360 melalui konsep
digital dengan pendekatan yang
terintegrasi dan komprehensif.
2.4 Struktur Perusahaan
KLY dipimpin oleh seorang direktur utama yaitu Steven
Christian yang bertanggung jawab untuk memimpin dan
bertanggung jawab untuk mengambil keputusan atas seluruh
kegiatan yang dikelola oleh KLY. Direktur utama membawahi
beberapa jabatan yaitu Vice President Sales, Director of Content,
General Manager Marketing, Director of Product, Vice President of
Information & Technology, Vice President Operation (OPS), dan

4
Director of Finance. Berikut merupakan sekilas struktur organisasi
dari KLY:

5
 Gambar 3 Struktur organisasi KapanLagi

2.5 Ruang Linkup Kerja Divisi Terkait

Di dalam KLY, Strategic Planner berada di bawah naungan
Sales Support. Berikut bagan struktur dari Sales Support di KLY:

Gambar 4 Struktur lingkup kerja terkait

6
 BAB III
HASIL KERJA PRAKTEK

3.1 Waktu dan Tempat Pelaksanaan

Pelaksanaan Kerja Praktek ini dijadwalkan pada tanggal 10
Oktober 2022 s/d 10 Desember 2022. Kerja Praktek kami
dilaksanakan pada :
Tempat : Work From Anywhere
Hari Kerja : Senin - Jumat
Waktu Kerja : 08.00 – 15.00 WIB
Alamat : Jl. Blimbing Indah Tengah X No.17, Polowijen,
Blimbing, Malang City, East Java 65126

3.2 Jadwal Kegiatan

Kerja Praktek dilaksanakan mulai tanggal 10 Oktober 2022
sampai 10 Desember 2022. Kegiatan Kerja Praktek dibagi menjadi 4
bagian yaitu :
a. Pemberian materi dari mentor magang yang akan digunakan
untuk menyelesaikan task magang
b. Kegiatan pelaksanaan dan pengerjaan task magang yang telah
diberikan.
c. Kegiatan pengumpulan data yang dibutuhkan.
d. Kegiatan penyusunan laporan hasil kerja praktek.

3.3 Teori Penunjang

Praktek kerja lapangan pada KapanLagi.com dilaksanakan
pada tanggal 10 Oktober 2022 sampai dengan 10 Desember 2022.
Praktik kerja lapangan ini dilaksanakan oleh satu kelompok yang
beranggotakan dua orang Mahasiswa, yaitu Agung Indra Prasetyo
dan Yunior Kurniawan Praktek kerja lapangan tersebut dilaksanakan
di KapanLagi.com kota Malang

3.3.1 Web
Pengertian website adalah kumpulan informasi yang
berbentuk halaman halaman elektronik atau web page. Sebuah
website umumnya terhubung pada sebuah alamat penunjuk yang
7
 spesifik. Alamat penunjuk tersebut dinamakan. domain; missal
Detik.com atau Nesabamedia.com. Website pada umumnya terdiri
dari format teks, gambar, table, grafik, kutipan, video, musik, dan
format visual lainnya yang menarik bagi pengunjung website
tersebut.
Sebuah website biasanya bisa diakses secara umum.
Kebanyakan website dapat diakses melalui public internet protocol
(IP) dalam sebuah jaringan internet. Namun tidak menutup
kemungkinan bahwa website tersebut diakses secara offline melalui
jaringan LAN. Website bisa berupa website pribadi, komersial,
pemerintahan, dan website lainnya yang dibuat untuk
kepentingan profit maupun non profit yang dipublikasikan
secara umum. Selain itu, website juga dapat dibuat untuk tujuan
khusus seperti misalnya untuk hiburan, pendidikan, dan juga
kepentingan social.

Gambar 5 Web

3.3.2 HTML
HTML sebenarnya bukan bahas pemrograman, karena
HTML adalah bahasa markup. HTML digunakan untuk markup
terhadap suatu dokumen teks. Fungsi HTML dalam pembuatan
website antara lain :
a. Membuat Struktur Halaman Web
HTML digunakan untuk mempermudah penulisan judul ,
paragraf, bullet, dan sebagiannya sehingga konten dalam
halaman webiste enak dibaca. Semakin bagus webmaster
menggunakan HTML, semakin bagus pula tampilan yang
ada pada browser pengguna internet
8
 b. Membuat Link Navigasi
HTML juga biasa digunakan untuk membuat link-link
navigasi, baik itu link dalam sebuah situs maupun link
menuju situs lainnya.
c. Menunjang Bahasa Lainnya
HTML adalah dasar penciptaan halaman website. Dalam
pengaplikasiannya, HTML bisa menunjang bahasa lainnya
seperti javascript untuk memanipulasi halaman seperti yang
diinginkan oleh webmaster.

Gambar 6 HTML

3.3.3 CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) sebuah dokumen yang berdiri
sendiri dan dapat dimasukkan dalam kode HTML. CSS
menggunakan kode - kode yang tersusun untuk menetapkan style
pada elemen HTML atau dapat juga digunakan membuat style baru
yang biasa disebut class. CSS dapat mengubah besar kecilnya text,
mengganti warna background pada sebuah halaman, atau dapat pula
mengubah warna border pada tabel, dan masih banyak lagi hal yang
dapat dilakukan oleh CSS. CSS digunakan untuk mengatur susunan
tampilan pada halaman HTML.
Fungsi utama dari css ialah mendesain, merancang,
merubah, dan juga membentuk halaman pada wesite ataupun blog
dan isi dari halaman website yaitu tag-tag html, logikanya css itu
bisa mengubah tag-tag html yang sederhana sehingga bisa menjadi
lebih fungsional dan juga menarik.

9
 Gambar 7 CSS

3.3.4 Figma
Figma adalah editor grafis vektor dan alat prototyping
dengan berbasis web serta fitur offline tambahan yang diaktifkan
oleh aplikasi desktop untuk Mac OS dan Windows. Aplikasi
pendamping Figma Mirror untuk Android dan iOS memungkinkan
untuk melihat prototype Figma pada perangkat seluler. Rangkaian
fitur Figma berfokus pada penggunaan dalam antarmuka pengguna
dan desain pengalaman pengguna dengan penekanan pada kolaborasi
waktu nyata (real- time).
Sederhananya, Figma adalah desain digital dan alat
prototyping. Ini adalah aplikasi desain UI dan UX yang dapat Anda
gunakan untuk membuat situs web, aplikasi, atau komponen
antarmuka pengguna yang lebih kecil yang dapat diintegrasikan ke
dalam proyek lain. Dengan alat berbasis vektor yang hidup di cloud,
Figma memungkinkan para penggunanya untuk bekerja di mana saja
dari browser. Cara ini termasuk alat zippy yang dibuat untuk desain,
pembuatan prototipe, kolaborasi, dan sistem desain organisasi.

Gambar 8 Figma

10
3.3.5 Tugas Untuk Divisi Front End Programmer
Pada saat proses magang berlangsung saya dan rekan saya
diberi tugas untuk mengerjakan tampilan sesuai mockup yang telah
diberikan dari pihak perusahaan. Mockup tersebut berupa file figma
tugas kami berdua adalah men slicing desain figma tersebut.

Gambar 9 Tugas dari pihak perusahaan

3.3.5.1 Hasil Pengerjaan

A.
1. Section Header

Gambar 10 Hasil pengerjaan section header

11
2. Section About Us

Gambar 11 Section about us

3. Section Our Service

Gambar 12 Section our service

4. Section Latest Works

Gambar 13 Section latest works

12
5. Section Venues

Gambar 14 Section venues

6. Section Book Now

Gambar 15 Section book now

7. Section Articles

Gambar 16 Section articles

13
8. Section Footer

Gambar 17 Section footer

9. Section Popup

Gambar 18 Bagian popup pertama

Gambar 19 Bagian popup kedua

14
B.

1. Section Header

Gambar 20 Section Header

2. Section Tema

Gambar 21 Section Tema

15
3. Section Hadiah

Gambar 22 Section Hadiah

4. Section Caranya

Gambar 23 Caranya

5. Section Caranya

Gambar 24 Caranya

16
6. Section Galeri Vidio

Gambar 25 Section Galeri Vidio

7. Section Banner

Gambar 26 Section Banner

8. Section Seputar Fimela

Gambar 27 Section Seputar Fimela

17
9. Section Sponsor

Gambar 28 Section Sponsor

10. Section Footer

Gambar 29 Section Footer

10. Link Dokumentasi

Dokumentasi Link
Github  https://github.com/AgungIndraa/magang.git
 https://github.com/yuniorrrr/magang.git

18
 BAB IV
PENUTUP

4.1 Kesimpulan
Berdasarkan uraian diatas, dapat disimpulkan sebagai berikut:
1. Praktek Kerja Lapangan merupakan suatu wadah yang
bermanfaat bagi para mahasiswa untuk menambah wawasan
sekaligus mengembangkan potensi yang ada di dunia kerja.
Selain itu, Praktek Kerja Lapangan juga bertujuan untuk
menerapkan keterampilan dan ilmu pengetahuan yang
diperoleh selama mengikuti perkuliahan.
2. Pelaksanaan praktek kerja lapangan yang dilaksanakan
mulai tanggal 10 Oktober 2022 sampai tanggal 10
Desember 2021 telah memberikan banyak ilmu baru dan
keterampilan serta pengalaman yang tidak didapatkan
selama perkuliahan.
3. Praktek kerja lapangan memperlengkapi para mahasiswa
dengan keterampilan hard skills and soft skills untuk
menjawab kebutuhan talenta digital, khususnya Front End
Progammer, yang siap kerja setelah menyelesaikan program
ini dan studinya di universitas.

19
 DAFTAR PUSTAKA

https://www.dumetschool.com/blog/untuk-apa-belajar-slicing

https://kerax-telor.blogspot.com/2015/11/pengertian-fungsi-dan-
cara- menggunakan.html

https://hasantarmizi.blogspot.com/2017/04/pengertian-sublime-
text.html

https://kc.umn.ac.id/13519/4/BAB_II.pdf

20
LAMPIRAN-LAMPIRAN
1. CV

21
22
2. Surat Pengantar Magang

23
3. Lembar Penilaian

24
25
4. Weekly meeting untuk update progress yang telah kami
kerjakan

26