LAPORAN AKHIR

Pembuatan Website Edukasi Dan Pengaduan Pencemaran Dari Limbah

Sampah

Di PT Impactbyte Teknologi Edukasi

Diajukan untuk memenuhi persyaratan kelulusan

Program MSIB MBKM

oleh :
M Siddiq Bayu Seto / A11.2020.13108

TEKNIK INFORMATIKA
UNIVERSITAS DIAN NUSWANTORO
2023
 LEMBAR PENGESAHAN
TEKNIK INFORMATIKA & UNIVERSITAS DIAN NUSWANTORO

Pembuatan Website Edukasi Dan Pengaduan Pencemaran Dari Limbah

Sampah

Di PT Impactbyte Teknologi Edukasi

oleh :
M Siddiq Bayu Seto / A11.2020.13108

disetujui dan disahkan sebagai

Laporan Magang atau Studi Independen Bersertifikat Kampus Merdeka

Semarang, 19 Juni 2023

Pembimbing Magang atau Studi Independen Teknik Informatika Universitas Dian
Nuswantoro

EGIA ROSI SUBHIYAKTO , M.Kom

NPP: 0612029001.

i
 Lembar Pengesahan

Pembuatan Website Edukasi Dan Pengaduan Pencemaran Dari Limbah

Sampah

Di PT Impactbyte Teknologi Edukasi

oleh :

M Siddiq Bayu Seto / A11.2020.13108

disetujui dan disahkan sebagai

Laporan Magang atau Studi Independen Bersertifikat Kampus Merdeka

Jakarta, 19 Juni 2023

Mentor Front-End Web Development Head of Programme Skilvul

Alfred Hutomo Caron Toshiko Monica

ii
 PENGESAHAN PROGRAM MAGANG DAN STUDI INDEPENDEN
BERSERTIFIKAT

Judul : Pembuatan Website Edukasi Dan Pengaduan Pencemaran Dari

Limbah Sampah
Nama : M Siddiq Bayu Seto
NIM : A11.2020.13108
Program Studi : Teknik Informatika S1

Disetujui dan disahkan sebagai

Program Magang dan Studi Independen Bersertifikat
Semarang, 14 Juli 2023

Menyetujui

Kaprodi Teknik Informatika S-1 Koordinator MBKM Teknik Informatika S-1

Sri Winarno, Ph.D Yuni Parti Astuti, S.Si, M.Kom

NPP: 0686.11.1998.142 NPP: 0686.11.2013.532

iii
 PERSETUJUAN PENGUJI MAGANG DAN STUDI INDEPENDEN
BERSERTIFIKAT

Judul : Pembuatan Website Edukasi Dan Pengaduan Pencemaran Dari

Limbah Sampah
Nama : M Siddiq Bayu Seto
NIM : A11.2020.13108
Program Studi : Teknik Informatika S1

Laporan ini telah diujikan dan dipertahankan dihadapan Dewan Penguji pada
Sidang Akhir MBKM pada tanggal 14 Juli 2023. Menurut pandangan kami,
Laporan Magang dan Studi Independen Bersertifikat ini memadai berdasarkan
tujuan dari program Magang dan Studi Independen Bersertifikat.

Semarang, 14 Juli 2023

Menyetujui

Penguji 1
Penguji 2

EGIA ROSI
SUBHIYAKTO , M.Kom Penguji 2
NPP : 0612029001 NPP : 0686.*****

iv
 Abstraksi

Seiring berjalannya waktu, permasalahan lingkungan semakin meningkat.

Permasalahan tersebut meliputi peningkatan volume limbah rumah tangga dan
pabrik, pencemaran lingkungan, polusi udara yang meningkat, efek rumah kaca,
dan masih banyak lagi. Dampak dari permasalahan ini adalah terjadinya bencana
alam di berbagai wilayah Indonesia, kenaikan suhu bumi, perubahan iklim dan
cuaca yang tidak menentu, dan lain sebagainya. Oleh karena itu, permasalahan
lingkungan ini menjadi perhatian masyarakat dan pemerintah karena dampaknya
yang begitu luas.

Berdasarkan penjelasan tersebut, kami diminta untuk membuat sebuah

platform yang dapat menyelesaikan masalah lingkungan di sekitar kami. Dengan
mengatasi permasalahan ini, kami dapat membantu masyarakat sekitar dan juga
pemerintah dalam mengurangi masalah lingkungan yang terjadi di sekitar kami.

Dengan adanya kemajuan teknologi, masyarakat kini dapat mengakses

informasi dengan lebih mudah. Dengan membuat platform web TRACLE yang
bertema lingkungan ini, kami berharap dapat menemukan solusi digital untuk
membantu masyarakat dan pemerintah dalam mengatasi permasalahan lingkungan
di Indonesia.

Kata kunci : Pembuatan Web Edukasi dan Pengaduan Pencemaran Lingkungan ,

PT. Impactbyte Teknologi Edukasi, Front-End Web Development

v
 Kata Pengantar

Puji syukur kepada Tuhan Yang Maha Esa, atas kemudahan yang diberikan
sehingga Laporan Akhir Studi Independen Bersertifikat ini dapat diselesaikan
dengan baik. Laporan ini disusun sebagai salah satu syarat program Studi
Independen Bersertifikat pada Program Studi Teknik Informatika Fakultas Ilmu
Komputer Universitas Dian Nuswantoro. Dengan rasa rendah hati, saya ingin
menyampaikan rasa terima kasih dan penghargaan yang setinggi-tingginya kepada
semua pihak yang telah turut serta dalam menyukseskan program Studi Independen
Bersertifikat di Program Studi Teknik Komputer, Fakultas Ilmu Komputer,
Universitas Dian Nuswantoro yaitu kepada:

1. Prof. Dr. Ir Edi Noersasongko M.kom selaku Rektor Universitas Dian

Nuswantoro
2. Dr. Drs. Abdul Syukur MM selaku Dekan Falkutas Ilmu Komputer
3. Sri Winarno, Ph.D selaku Ketua Prodi Teknik Informatika
4. Yani Parti Astuti, S.Si, M.Kom dan Nurul Anisa Sri Winangsih, S.Kom,
M.Cs selaku Koordinator MBKM TI-S1
5. Egia Rosi Subhiyakto , M.Kom selaku Dosen Pembimbing
6. Caron Toshiko Monica selaku Head of Programme Skilvul selaku
Koordinator Programme Skilvul
7. Alfred Hutomo selaku Mentor selama berada di PT.Impactbyte Informasi
Edukasi
8. Bapak, Ibu, teman-teman yang telah memberikan dukungan moral, doa
dan kasih saying

Semarang, 19 Juni 2023

M Siddiq Bayu Seto

vi
 Daftar Isi

LAPORAN AKHIR .............................................................................................. 1

LEMBAR PENGESAHAN TEKNIK INFORMATIKA & UNIVERSITAS DIAN

NUSWANTORO ................................................................................................. i

Lembar Pengesahan ......................................................................................... ii

Abstraksi ......................................................................................................... v

Kata Pengantar ............................................................................................... vi

Daftar Isi........................................................................................................ vii

Daftar Tabel ................................................................................................... ix

Daftar Gambar................................................................................................. x

Bab 1 Pendahuluan ......................................................................................... 1

I.1 Latar belakang .......................................................................................... 1

I.2 Lingkup ..................................................................................................... 2

I.3 Tujuan ....................................................................................................... 3

BAB II Organisasi Mitra MSIB ........................................................................ 16

II.1 Struktur Organisasi................................................................................... 16

II.2 Lingkup Pekerjaan .................................................................................... 17

II.3 Deskripsi Pekerjaan .................................................................................. 18

II.4 Jadwal Kerja ............................................................................................. 19

Bab III Pembuatan Website Edukas dan Pengaduan Pencemaran Dari Limbah
Sampah ......................................................................................................... 27

III.1 Latar Belakang Project ........................................................................... 27

III.2 Proses Pembuatan Project ...................................................................... 27

vii
 III.2.1 Phase Brain Stroming ........................................................................... 28

III.2.2 Phase Design Web................................................................................ 29

III.2.3 Phase user flaw .................................................................................... 30

III.2.4 Phase Pembuatan web ,deploy dan testing........................................ 31

III.2.5 Pre-test , Post-Test Dan Assaigment .................................................... 39

III.3 Hasi Dari Pembuatan Website Edukasi dan Pengaduan Pencemaran Dari
Limbah Sampah di PT Impactbyte Teknologi Edukasi (Skilvul) ..................... 42

Bab IV Penutup ............................................................................................. 31

IV. 1 Kesimpulan............................................................................................. 31

IV. 2 Saran ...................................................................................................... 31

Referensi ....................................................................................................... 32

Bab V Lampiran .............................................................................................. 1

V.1 Lampiran A TOR ......................................................................................... 1

V.2 Lampiran B. Log Activity ............................................................................ 2

V.3 Lampiran Dokumen Teknik ...................................................................... 24

viii
 Daftar Tabel

Tabel 1. ................................................................................................................... 2
Tabel 2. ................................................................................................................... 3
Tabel 3. ................................................................................................................. 19
Tabel 4. ................................................................................................................... 2

ix
 Daftar Gambar

Gambar 1. Position Description Struktur Organisasi ..................................... 16

Gambar 2. Struktur Organisasi ......................................................................... 16
Gambar 3.Paint Point ......................................................................................... 28
Gambar 4.Figjam Brain Storming .................................................................... 29
Gambar 5. Wireframe ........................................................................................ 29
Gambar 6. UI Design .......................................................................................... 30
Gambar 7.User Flow Artikel .............................................................................. 30
Gambar 8. User Flow Kategori .......................................................................... 31
Gambar 9. User Flow Pengaduan ...................................................................... 31
Gambar 10. Code Web ....................................................................................... 32
Gambar 11. Tampilan Beranda ......................................................................... 32
Gambar 12. Tampilan Kategori ........................................................................ 33
Gambar 13. Tampilan Kategori Organik ......................................................... 33
Gambar 14. Tampilan Kategori Anorganik ..................................................... 34
Gambar 15. Tampilan Kategori B3 ................................................................... 34
Gambar 16. Tampilan Artikel ........................................................................... 35
Gambar 17. Tampilan Login.............................................................................. 35
Gambar 18. Tampilan Register ......................................................................... 36
Gambar 19. Halaman Pengaduan User ............................................................ 36
Gambar 20. Halaman Pengaduan Admin......................................................... 37
Gambar 21. Tampilan Github ........................................................................... 37
Gambar 22. Deploy Netlify ................................................................................. 38
Gambar 23. Scorecard ........................................................................................ 39
Gambar 24. Portofolio Web ............................................................................... 40

x
Gambar 25. TodoList .......................................................................................... 41
Gambar 26. Calculator BMI .............................................................................. 41
Gambar 27. Landing Page.................................................................................. 42
Gambar 28. A Tor ................................................................................................. 1

xi
 1

Bab 1
Pendahuluan

I.1 Latar belakang

Studi Independen Bersertifikat adalah bagian dari program Kampus
Merdeka yang bertujuan memberikan kesempatan bagi para mahasiswanya untuk
mengasah softskills dan hardskill yang dapat di terapkan di dunia industry. Dari
Studi Independen ini mahasiswa dapat mendapatkan keuntungan diantaranya
pembelajaran yang relevan, mendapatkan sertifikat sesuai dengan kebutuhan
industry, dapat mengasah berfikir para peserta sesuai dengan teknologi masa kini.
Banyak mitra yang berkerja sama dengan Kampus Merdeka salah satunya
adalah PT. Impactbyte Teknologi Edukasi (Skilvul). Program Studi Independent
Skilvul #Tech4Impact terdiri atas pembelajaran individu dan capstone project yang
dilakukan dalam tim multidisiplin. Para mahasiswa memilih satu (1) dari empat (4)
learning paths yang ditawarkan dalam program Studi Independent Skilvul
#Tech4Impact yaitu Game Development, 3D Animation Development, Front-End
Web Development atau Back-End Web Development.Secara soft-skills, Kurikulum
pembelajaran Studi Independen Skilvul #Tech4Impact mengacu pada UNICEF 12
Core Life Skills, yaitu mencakup 12 keterampilan dasar yang dibutuhkan di Abad
21 (21st Century Skills) – empathy, participation, respect for diversity,
communication, resilience, self-management, decision making, negotiation,
cooperation, problem solving, critical thinking, and creativity.
Terkait hard-skills, Learning Track Front-End Web Development
mahasiswa akan mempelajari materi-materi seperti Unix Command Line, HTML,
CSS, Algoritma dan Struktur Data, Git & Github, Javascript Basic-Intermediate,
Desain Web yang responsif, dan masih banyak lagi. Di akhir pembelajaran,
mahasiswa akan membuat proyek akhir berdasarkan tantangan yang sudah dipilih
secara berkelompok . Skilvul bersama Kampus Merdeka berusaha meningkatkan
kompetensi mahasiswa untuk menjadi talenta digital siap kerja, melalui
pembekalan Keterampilan Abad-21 dan teknologi

B-1
 2

digital. Pembelajaran yang kami tempuh selama 5 bulan ini terdiri dari lebih 900
jam pembelajaran yang dapat dikonversi menjadi 20 sks.
I.2 Lingkup
Front – End Engineering memiliki peran untuk mencapai situs web
berkualitas tinggi dan aplikasi yang dinamis untuk memberikan pengalaman
penggunaan terbaik sangat penting untuk meninggkatkan daya saing sebuah produk
atau layanan.

TOR (Term of Reference) atau kerangka acuan kegiatan merupakan

gambaran umum dan penjelasan mengenai kegiatan yang akan dilaksanakan sesuai
dengan tugas dan fungsi kementrian negara/lembaga. Berikut adalah gambaran
kegiatan, fungsi dan tujuan yang dicapai selama program Studi Independen.

Detail Kegiatan :

Tabel 1.

Kegiatan Tanggal Keterangan

Onboarding Participants 17 Februari 2023 Detail kegiatan lebih
rinci dapat dilihat pada
link berikut.
Challenge Briefing & 20 February 2023
Welcoming Party
Product Development 21 February - 11 March
Workshop 2023
Basic Coding 13 - 24 March 2023
(TBD)
Front-End Coding 27 March - 26 May 2023
Bootcamp (TBD)
Pengerjaan Tugas Akhir 29 May - 16 June 2023
(TBD)

B-2
 3

Pengumpulan Tugas 16 June 2023 (TBD)

Akhir
Demo Day 27 June 2023

I.3 Tujuan
Tujuan dari mengikuti program Study Independent kampus merdeka di
PT.Impactbyte Teknologi Edukasi program Front-End Web Development ini
adalah untuk bisa menciptakan suatu situs web yang berkualitas tinggi dan aplikasi
dinamis untuk memberikan daya saing sebuah produk atau layanan.
Melalui program ini ,peserta mendapatkan kemampuan yang di butuhkan
untuk membuat website yang responsive serta pengalaman pembuatan modelling ,
prototype penggunaan API sesuai tahapan industri. Selain dibekali dengan
mengundang expert develop web Secara khusus berikut adalah tujuan dari program
yang di ikuti:

1. Memahami Dasar dan Fundamental untuk menjadi seorang programmer

React khususnya React Js
2. Memahami dan bisa meng-implementasikan pengembangan interface
website dan Apps menggunakan Framework React sesuai kebutuhan
3. Mengerti tentang proses “debug” dan optimalisasi Aplikasi Web React Js
4. Bisa melakukan deployment secara online dengan beberapa layanan 3rd
parties

Target yang hendak di capai dalam program di skilvul yaitu :

Tabel 2.

Module Target
1. Peserta mampu
memahami dan

B-3
 4

mengetahul dasar-
dasar llmu untuk
mengembangkan
PRODUCT
sebuah produk
INNOVATION &
digital.
DEVELOPMENT
2. Peserta mampu
memahami dasar-
dasar ilmu UI/UX
Design serta dapat
mensimulasikan
cara
mengoperasikan
aplikasi Figma
untuk kebutuhan
desain
UI/UX yang
selanjutnya dapat
digunakan ke
dalam tahap
Development.
3. Peserta dapat
memahami apa itu
Design Thinking
dan
mensimulasikan
cara
melakukan
brainstorming
untuk
mendapatkan
solusi desain yang
akan dikerjakan.
4. Peserta mampu
memahami
aktivitas yang
dilakukan ada
tahap Design yang
akan
menghasilkan
sebuah Hi-Fidelity

B-4
 5

desain untuk
kebutuhan
development.
5. Peserta mampu
mensimulasikan
cara membuat
User Flow dan
Wireframe.
6. Peserta mampu
memahami dasar
ilmu UI Design
dan mampu
mensimulasikan
cara membuat UI
Design hingga
menjadi sebuah
prototype.
7. Peserta mampu
menjelaskan dan
mempresentasikan
hasil akhir dari
tahapan
Discovery dan
Design pada
Product
Development.
Intro to Coding & Web 101 Peserta mampu mengindentifikasi apa
itu coding, proses membuat aplikasi,
dan bahasa pemrograman pada website
development serta mampu membuat
program sederhana menggunakan
HTML, CSS, dan JavaScript.

Web Development Dasar 1. Peserta mampu memahami

fundamental dari website

B-5
 6

development dan prinsip

mobile first.
2. Peserta mampu menggunakan
tools pendukung dan
framework dalam membuat
sebuah aplikasi khususnya
website.
3. Peserta memahami dan mampu
membuat website
menggunakan framework
seperti Bootstrap atau
Tailwind.
4. Peserta mampu
membandingkan framework
dan native programming
language.
5. Peserta mampu membuat
aplikasi website yang interaktif
menggunakan JavaScript.
Web Development Lanjutan 1. Peserta mampu berpikir kritis
dan kreatif dalam membuat
rancangan aplikasi.
2. Peserta mampu membuat
aplikasi website yang interaktif
menggunakan JavaScript
secara tim.
3. Peserta mampu
mempresentasikan hasil karya
berupa aplikasi website yang
interaktif.

B-6
 7

Front End Development 1. Peserta mampu memahami

fundamental library React.js,
state management redux dan
react context, testing pada
React.js, dan product
development pada front-end.
2. Peserta mampu membuat
aplikasi website dari sisi front-
end menggunakan library
React.js dan menggunakan data
External API.
3. Peserta mampu menerapkan
unit testing pada React.js

Final Project - Group Project 1. Peserta mampu berpikir kritis

dan kreatif dalam membuat
rancangan aplikasi.
2. Peserta mampu menerapkan
proses Product Development
untuk pengembangan aplikasi
website front-end.
3. Peserta mampu membuat
sebuah aplikasi website front-
end dengan ide dan tema yang
ditentukan secara mandiri dan
dikerjakan secara
berkelompok.
4. Peserta mampu
mempresentasikan hasil karya

B-7
 8

berupa aplikasi website front-

end.
Soft Skills and Career Peserta mampu memahami dan
Development mempraktikan soft skills yang
dibutuhkan di dunia kerja, memahami
dan mempersiapkan kebutuhan untuk
melamar pekerjaan di bidang teknologi
khususnya Software Engineer, serta
mampu untuk merancang ide bisnis
dari ide solusi digital agar
berkelanjutan, dan menjelaskan
melalui presentasi yang terstruktur
mengenai masalah, solusi, dan ide
bisnis berkelanjutan yang akan
dilakukan.

B-8
 BAB II
Organisasi Mitra MSIB

II.1 Struktur Organisasi

Gambar 1. Position Description Struktur Organisasi

Gambar 2. Struktur Organisasi

16
1. William Hendradjaja, founder sekaligus pemimpin perusahaan 4
2. Amanda Aprilianie, bertanggung jawab menangani berbagai perihal tentang
marketing atau pemasaran di dalam perusahaan, serta membantu CEO
dalam memimpin perusahaan dari sisi penjualan dan mendapatkan
konsumen.
3. Johan Mulyono, bertanggung jawab atas seluruh kegiatan teknologi dan I
nformasi dalam perusahaan.
4. Nahum Arimaralogo, bertanggung jawab untuk merencanakan,
mengarahkan, atau mengkoordinasikan kebijakan dan program pemasaran
5. Caron Toshiko, bertanggung jawab untuk memimpin dan mengarahkan
kegiatan program.
6. Natasha Anggya, bertanggung jawab untuk mengembangkan kurikulum
program.
7. David Winalda, bertanggung jawab untuk menyusun dan mengkoordinasikan
pembuatan materi training, silabus, mengembangkan metode pembelajaran
dan peningkatan kinerja.

II.2 Lingkup Pekerjaan

Lingkup pekerjaan saat ini adalah membuat sebuah web bertema lingkungan
yang merupakan cara untuk mendistribusikan informasi mengenai tentang
lingkungan. Proses pembelajaran di PT.Impactbyte Teknologi Edukasi
menggunakan model campuran (blended learning model) yang merupakan
kombinasi dari belajar mandiri (self-learning), belajar kelompok (peer-learning),
dan mentor-led learning:
1. Mentor-led Learning
Pembeljaran yang di bimbing oleh mentor video conference (gmeet), dan
dilakukan secara synchronous. Mentor-Ied learning terbagi menjadi dua (2)
tipe:
• Live Learning (lecture) Live learning di isi oleh instructor dan 1 Assistant
Insturctor dengan Total 9 minggu pembelajaran yang teridiri dari 5 sesion

B - 17
 per week di mulai dari hari Senin-Kamis pada jam (08.00-11.00 WIB)
serta di hari jumat dimulai dari jam (07.00-10.00 WIB).
• Mentoring : konsultasi dengan mentor fasilitor
Peserta dapat melakukan mentoring session di luar dari sesi live learning
dengan Mentor nya dari group masing-masing. Pada sesi Mentoring para
peserta minimal melakukan Sesi Mentoring 2-5 jam per minggu.
Mentoring di laksanakan pada hari kerja yaitu dari hari Senin-Jumat dan
jam Mentoring sendiri fleksible berdasarkan perjanjian antara mentor
dan mente.
2. Belajar Kelompok (peer-learning)
Proses belajar dengan sesama peserta, dilakukan secara synchronous
melalui video conference (gmeet atau discord) dan asynchronous melalui
forum diskusi daring.
3. Belajar mandiri (Self-learning)
Proses belajar mandiri secara asynchronous menggunakan materi kelas
online di skilvul berupa video pembelajaran, kuis , dan latihan coding
mengunakan teknologi skilvul playground.

II.3 Deskripsi Pekerjaan

Terkait kegiatan pembelajaran, peserta mendapatkan materi yang sangat
praktikal dengan komposisi sebagai berikut :
30% soft skill , 70% adalah hard skill yang teridiri dari praktek aplikasi
pembelajaran melalui kuis, project , dan tantangan. Pendampingan peserta yang di
lakukan dengan skema sebagai berikut:
1. Peserta akan menerima materi dari Instruktur ahli sesuai dengan kurikulum
ajar yang telah ditentukan. Mentor adalah sesi terpisah dari sesi terpisah dari
sesi pemberian Materi .
2. Sesi pendampingan (mentoring session) adalah waktu pendampingan dan
pemantuan progress pembelajaran peserta menggunakan agile execution
yang dituangkan dalam aplikasi Skill room dan Discord sebagai sarana

B - 18
 forum sarana berkomunikasi. Diluar jam workshop/live class, waktu
pendampingan berkisar 2-5 jam dalam seminggu.
3. Untuk meningkatkan efektivitas interaksi antara mentor dan peserta Peseta
dibagi kedalam grup kerja (terdiri dari 4-5 peserta) setiap peserta akan
memiliki ketua kelompok.
4. Proses mentoring berjalan dalam ruang daring untuk memastikan materi
workshop/live learning class terserap dengan baik (adanya
pengulangangan/review) dan juga pemantauan tugas individua tau
kelompok.

II.4 Jadwal Kerja

Program Studi Independent di PT.Impactbyte Teknologi Edukasi
berlangsung selama kurang lebih 4-5 bulan di mulai dari 16 Februairi 2023 hingga
2 juli 2023, dilaksanakan secara daring setiap minggu nya .

Berikut jadwal saya selama magang di Skilvul:

Tabel 3.

Time
Day Date Modules & Topics
(WIB)
16
February 13.00 -
Thursday 2023 14.30 National Onboarding MSIB
17
February 14.00 -
Friday 2023 16.00 Onboarding Skilvul
20
February 09.00 -
Monday 2023 11.00 Challenge Briefing & Welcoming Party
21
February 07.00 -
Tuesday 2023 10.00 Digital Product: An Introduction

B - 19
 22
February 07.00 -
Wednesday 2023 10.00 Introduction to UI/UX Design
23
February
Thursday 2023 - -
24
February
Friday 2023 - -
25
February 08.00 -
Saturday 2023 11.00 Design Thinking

27
February 07.00 -
Monday 2023 10.00 Userflow
28
February
Tuesday 2023 - -
1 March 07.00 -
Wednesday 2023 10.00 Wireframe
2 March
Thursday 2023 - -
3 March
Friday 2023 - -
4 March 08.00 -
Saturday 2023 11.00 UI Design

6 March 07.00 -
Monday 2023 10.00 Practice UI Design
7 March
Tuesday 2023 - -
8 March 07.00 -
Wednesday 2023 10.00 Prototyping
9 March 14.00 - Webinar: Basic Mentality for Career
Thursday 2023 16.00 Development
10
March
Friday 2023 - -

B - 20
 11
March 08.00 -
Saturday 2023 11.00 Product Development Recaps

13
09.00 -
Monday March Webinar #1 - HTML Dasar
12.00
2023
14
Tuesday March - -
2023
15
09.00 -
Wednesday March Webinar #2 - CSS Dasar
12.00
2023
16
Thursday March - -
2023
17
Friday March - -
2023

20
09.00 -
Monday March Webinar #3 - JavaScript Dasar
12.00
2023
21
Tuesday March - -
2023
22
Wednesday March
2023 - -
23
Thursday March - -
2023
24
07.30 -
Friday March Webinar #4 - AMA Session & SkilPath
10.30
2023

27
UnixCommandLine
Monday March 08.00 -
Git & GitHub Dasar
2023 11.00

B - 21
 28
09.00 -
Tuesday March HTML Foundation
12.00
2023
29
09.00 -
Wednesday March CSS Foundation & Flexbox
12.00
2023
30
09.00 -
Thursday March Basic Algorithm
12.00
2023 JavaScript Dasar - Intro to JavaScript
31
07.00 - JavaScript Dasar - Conditional &
Friday March
09.30 Looping
2023
3April 08.00 – Java Script Dasar Scope – Java Script
Monday
2023 11.00 Dasar Function

4 April 08.00 - JavaScript Dasar - Data Type Built-in -

Tuesday
2023 11.00 Prototype and Method
JavaScript Dasar - DOM - Introduction
5 April JavaScript Dasar - Selecting Elements
Wednesday
2023 08.00 - JavaScript Dasar - DOM - Traversing
11.00 Elements
14.00 -
Workshop: CV & Interview Preparation
5 April 16.00
Wednesday 2023 JavaScript Dasar - DOM - Manipulating
Thursday 6 April Elements
2023 08.00 - JavaScript Dasar - DOM - Manipulating
11.00 Styles
6 April 13.00 - JavaScript Dasar - DOM - Events
Thursday 2023 15.30 JavaScript Dasar - DOM - Forms
Friday 7 April
2023

5-10
Monday April 08.00- Java Script Intermediate – Array &
2023 11.00 Multidimensional Array
10 April 13.00 - JavaScript Intermediate - Object &
Monday 2023 16.00 Array of Object
Tuesday 11 April 08.00 - JavaScript Intermediate - Rekursif
2023 11.00 JavaScript Intermediate - Modules
12 April 08.00 - JavaScript Intermediate - Asynchronous
Wednesday
2023 11.00 - Introduction

B - 22
 JavaScript Intermediate - Asynchronous
- Promise
13 April 08.00 -
Thursday JavaScript Intermediate - Web Storage
2023 11.00
JavaScript Intermediate - Asynchronous
14 April 07.00 -- Fetch
Friday
2023 09.30 JavaScript Intermdiate - Asynchronous -
Async Await
17 April 08.00-
Monday Responsive Web Desaign Boostrap 5
2023 11.00

18 April 08.00 -
Tuesday Git & GitHub Lanjutan
2023 12.00
18 April Briefing Group Project - Web Dev
08.00 -
Tuesday 2023 Development
12.00
Wednesday 19 April
-
2023 -
20 April
Thursday
2023 - -
21 April
Friday
2023 - -

1 May
Monday
2023 -
2 May Development Group Project - Web
Tuesday -
2023 Development
3 May Development Group Project - Web
Wednesday -
2023 Development
4 May Development Group Project - Web
-
Wednesday 2023 Development
Thursday 5 May Development Group Project - Web
2023 - Development
6 May Development Group Project - Web
Friday -
2023 Development

8 May 08.00 -
Monday Web Server & RESTful API
2023 11.00
Monday 8 May 14.00 -
Webinar: Career Discovery in Tech
Tuesday 2023 16.00

B - 23
 9 May React.js Basic - Functional Component
2023 React.js Basic - Props and State
08.00 - React.js Basic - Styling (CSS Stylesheet,
11.00 CSS Modules & CSS-in-JS)
10 May 08.00 - React.js Basic - Handling Events
Wednesday
2023 11.00 React.js Basic - Conditional Rendering
11 May 08.00 - React.js Lanjutan - Lifecycle Method
Thursday
2023 11.00 React.js Lanjutan - Hooks
12 May 07.00 -
Friday React.js Basic - Forms
2023 09.30

15 May 08.00 -
Monday React.js Lanjutan - PropTypes
2023 11.00
16 May 08.00 -
Tuesday React Router 6
2023 11.00
State Management - Redux - Intro to
17 May
Wednesday 08.00 - Redux
2023
11.00 State Management React Redux 1
17 May 14.00 -
Webinar: Stress and Time Management
Wednesday 2023 16.00
Thursday 18 May
2023 - -
19 May 07.00 -
Friday State Management React Redux 2
2023 09.30

22 May 08.00 - State Management - Async Actions with

Monday
2023 11.00 Redux Thunk and Middleware
23 May 08.00 -
Tuesday React Context
2023 11.00
24 May 08.00 -
Wednesday React Context with useReducer
2023 11.00
25 May 08.00 -
Thursday React Testing (Jest & RTL)
2023 11.00
26 May 07.00 -
Friday Briefing Final Project
2023 09.30

29 May
Monday - Development Final Project
2023
Monday 29 May 14.00 - Development Final Project (Technical
Tuesday 2023 16.30 Test Preparation)

B - 24
 30 May
- Development Final Project
2023
31 May
Wednesday - Development Final Project
2023
31 May 14.00 -
Workshop: Pitching & Enterpreneurship
Wednesday 2023 16.00
Thursday 1 June
2023 - -
2 June
Friday - -
2023

5 June
Monday - Development Final Project
2023
6 June
Tuesday - Development Final Project
2023
7 June
Wednesday - Development Final Project
2023
8 June
Thursday - Development Final Project
2023
9 June
Friday - Development Final Project
2023

12 June
Monday - Development Final Project
2023
13 June
Tuesday - Development Final Project
2023
14 June
Wednesday - Development Final Project
2023
15 June
Thursday - Development Final Project
2023
16 June
Friday -
2023 Submission Final Project

19 June
Monday -
2023 -
20 June
Tuesday -
2023 -
21 June
Wednesday -
2023 -

B - 25
 22 June
Thursday -
2023 -
23 June
Friday - -
2023

26 June
Monday -
2023 -
27 June
Tuesday -
2023 Demo Day & Graduation
28 June
Wednesday -
2023 -
29 June
Thursday -
2023 -
30 June
Friday - -
2023

B - 26
 Bab III
Pembuatan Website Edukas dan Pengaduan Pencemaran Dari Limbah
Sampah

III.1 Latar Belakang Project

Seiring berjalannya waktu, permasalahan-permasalahan lingkungan semakin
meningkat. Permasalahan-permasalahan ini dapat berupa meningkatnya volume
limbah rumah tangga maupun pabrik, pencemaran lingkungan, meningkatnya
polusi udara dan efek rumah kaca, dan masih banyak lagi. Hal tersebut
menyebabkan terjadinya bencana alam di berbagai wilayah di Indonesia,
meningkatnya suhu bumi, iklim dan cuaca yang berubah-ubah dan lain-lain.
Oleh karena itu, permasalahan-permasalahan ini banyak menyita perhatian
publik dan pemerintah karena dampaknya yang begitu luas pada masyarakat.
Berdasarkan penjelasan tersebut, kamu diminta untuk dapat membuat sebuah
platform yang dapat menyelesaikan masalah lingkungan yang terjadi di sekitar
kamu. Dengan memecahkan masalah ini, kamu dapat membantu masyarakat di
sekitar kamu dan juga pemerintah untuk mengurangi permasalahan-permasalahan
lingkungan yang terjadi di sekitarmu.
Dengan adanya perkembangan teknologi membuat para masyarakat bisa
mengakses informasi lebih mudah. Dengan membuat web TRACLE yang bertema
lingkungan ini kita dapat menemukan solusi digital dalam upaya membantu
masyarakat dan pemerintah untuk mengatasi permasalahan lingkungan di
Indonesia.

III.2 Proses Pembuatan Project

Metode yang digunakan untuk mengerjakan project ini dengan metode
mengidentifikasi masalah. Saya memilih menggunakan metode ini karena banyak
nya masalah yang harus di jabarkan dan di definisikan masalah yang sedang di
hadapi. Project ini merupakan aplikasi web sederhana yang mengimplementasikan

B - 27
REACT JS dan Moc API. Dalam pembuatan web TRACLE terdapat beberapa fase
yang harus diselesaikan.
III.2.1 Phase Brain Stroming
Pada Phase ini kita menjabarkan dan menuliskan apa saja yang di
butuh kan user yang akan memakai web ini dan masalah apa saja sih yang
bisa kita selesaikan dengan kita membuat web ini . Serta memikirkan fitur
– fitur apa saja yang akan ada di web kami untuk bisa menekel permasalahan
yang ada.

Penjelasan gambar di bawah ini :

Gambar 3.Paint Point

B - 28
 Gambar 4.Figjam Brain Storming

III.2.2 Phase Design Web

Pada Phase ini kami membuat sebuah wireframe di aplikasi figma untuk
menentukan bentuk web kami akan seperti apa . Pada phase ini juga kami
akan menentukan penempatan lemen-elemen utama seperti header, konten,
sidebar, dan footer. Ini membantu mengatur kerangka dasar desain sebelum
masuk ke detail lebih lanjut.

Penjelasan gambar di bawah ini :

Gambar 5. Wireframe

B - 29
 Gambar 6. UI Design

III.2.3 Phase user flaw

Pada Phase Ini saya beserta kelompok saya membuat logika web atau
User flaw untuk menjalankan Web yang akan saya buat ini . Berikut ini alur
user flaw nya :

Penjelasan Gambar di bawah ini:

Untuk membuat sebuah aplikasi kami di wajibkan membuat sebuah alur

logika untuk menjalankan sebuah aplikasi tersebut. Kami membuat user flaw
untuk artikel , kategori , dan pengaduan nya.

Gambar 7.User Flow Artikel

B - 30
 Gambar 8. User Flow Kategori

Gambar 9. User Flow Pengaduan

III.2.4 Phase Pembuatan web ,deploy dan testing

Pada Phase ini saya dan kelompok mulai melakukan slicing dari Ui/Ux
yang telah kami buat menjadi sebuah program code . Yang dimana kami
membuat halaman beranda , kategori ,artikel , login , register , pengaduan
untuk user , dan data pengaduan untuk admin dan Proses Untuk deploy.
Berikut Hasil yang kami buat :

Penjelasan gambar di bawah ini :

Kami menggunakan React js yang dimana menggunakan logic React
Context. React context sendiri di peruntukan untuk herobanner, artikel ,

B - 31
pengaduan , dan Login. Untuk proses deploy sendiri kami menggunakan
netlify yang dimana file codingan kami kami masukan di dalam github
organization lalu kemudian kami deploy.

Gambar 10. Code Web

Gambar 11. Tampilan Beranda

B - 32
 Gambar 12. Tampilan Kategori

Gambar 13. Tampilan Kategori Organik

B - 33
Gambar 14. Tampilan Kategori Anorganik

Gambar 15. Tampilan Kategori B3

B - 34
Gambar 16. Tampilan Artikel

Gambar 17. Tampilan Login

B - 35
 Gambar 18. Tampilan Register

Gambar 19. Halaman Pengaduan User

B - 36
Gambar 20. Halaman Pengaduan Admin

Gambar 21. Tampilan Github

B - 37
Gambar 22. Deploy Netlify

B - 38
III.2.5 Pre-test , Post-Test Dan Assaigment
Di antra pengerjaan Web Kami Dari Phase Brain Stroming sampai
Phase Pembuatan web kami juga mengerjakan beberapa tugas Pre-test ,
Post-Test Dan Assaigment (CV digital, Personal Website , Todoolist ,
Calculator BMI, dan Landing Pages Website).
Berikut Hasilnya :

Penjelasan gambar di bawah ini :

Berikut ini adalah hasil nilai kami selama mengerjakan Pre-test , Post-
Test Dan Assaigment Disela -sela kami mengerjakan Project akhir .Untuk
Assaigment sendiri pada Gambar24 sampai Gambar 27 sendiri kami
mengerjakan web portofolio , Todolist , Calculator BMI. Untuk Web
Portofolio di Gambar24 sendiri kami mengerjakan web tersebut
menggunakan HTML dasar dan css dasar .Untuk Gambar25 Todo List
kami mengerjakan menggunakan Java Script dan untuk layout nya kami
menggunakan css boostrap.

Gambar 23. Scorecard

B - 39
Gambar 24. Portofolio Web

B - 40
 Gambar 25. TodoList

Gambar 26. Calculator BMI

B - 41
 Gambar 27. Landing Page

III.3 Hasi Dari Pembuatan Website Edukasi dan Pengaduan Pencemaran

Dari Limbah Sampah di PT Impactbyte Teknologi Edukasi (Skilvul)
Hasil yang kami dapat dari mengikuti Study Independent Kampus Merdeka
di PT Impactbyte Teknologi Edukasi (Skilvul) Front-End Web
Development sesuai step - by – step hasil belajar :
a. General Competence
Memahami tentang thingking skills, project manajement tech,
comunication & presentation skills.
b. Software Engineering
Mengetahui apa itu software engineering, code editor developer,
pengoprasion terminal, dan menggunakan version control. Dan juga
mengetahui tentang networking serta algoritma.

B - 42
c. Front End Web Development with React JS & Css
Memahami penggunaan React Js dan Css, beserta framework
Boostrap React
d. Desain Thinking
Memahami konsep dasar awal untuk membuat suatu aplikasi
berdasarkan apa yang di butuh kan oleh user dan belajar membuat
wireframe dan ui/ux sebelum tahap lanjut dari membangun sebuah
website.

B - 43
 Bab IV
Penutup
IV. 1 Kesimpulan
Pada proses pelaksanaan program MSIB mempunyai manfaat yang baik
terhadap mahasiswa, sehingga mahasiswa mampu belajar secara mandiri untuk
mengembangkan bakat tertentu. Mendapatkan pengalaman bekerja menyelesaikan
suatu project dan bertanggung jawab menjalankan kewajibannya sebagai pelajar
MSIB PT Impactbyte Teknologi Edukasi(Skilvul).

IV. 2 Saran

Adapun saran mengenai proses pelaksanaan MSIB PT Impactbyte Teknologi

Edukasi (Skilvul), yaitu:
1. Peserta mengharapkan PT Impactbyte Teknologi Edukasi (Skilvul)untuk
mempertahankan dan meningkatkan kedisplinan yang telah ada.
2. Senantiasa menjalin hubungan baik dengan berbagai instansi,
lembaga,maupun perusahan yang berpotensi mengembangkan pengetahuan
danwawasan peserta yang akan melaksanakan program MSIB.
3. Diharapkan tetap ikut serta dalam program MSIB.

4. Meningkatkan kualitas perlayanan akademik serta menyuluruh, khususnya

pada tahap persiapan MSIB, terutama pada bagian persuratan
,penguruantinggi harus meningkatkan kinerja persuratan agar proses
pengiriman surat dari penguruan tinggi cepat tersampaikan kepada instansi
tempatterlaksananya program MSIB
5. Kedepan tetap terjalin hubungan antara mentor dan teman bserta seluruh
karyawan dari PT Impactbyte Teknologi Edukasi (Skilvul).

31
 Referensi

1) Skilvul. (Selasa, 13 Juni 2023). Skilvul, tentang Skilvul. Dilihat dari

https://www.skilvul.com/about
2) PT. Impactbyte Teknologi Edukasi (Selasa, 13 Juni 2023). Struktur
Organisasi. Diakses dari
https://docs.google.com/presentation/d/1c4eKOATUlbabGEG6i5RfAc
nmtQNhj0vs/edit#slide=id.p6
3) PT. Impactbyte Teknologi Edukasi (Selasa, 13 Juni 2023). Surat
Keterangan Pengganti ToR. Diakses di
https://drive.google.com/file/d/1jJgzn4NBwUytag1QXZKqAv-
x45V9P9m_/view
4) Deskripi di kampus merdeka mengenai Skilvul Tech4Impact
https://kampusmerdeka.kemdikbud.go.id/activity/history/application/
5184302
5) Deskripi di kampus merdeka mengenai Skilvul Tech4Impact
https://kampusmerdeka.kemdikbud.go.id/program/studiindependen/b
rowse/63d7dd17-1209-4db0-92cd-fc64c05f9747/3b164fd7-e313-11ec-
aeb1-0adcaa858741
6) Silabus FE dan Jadwal FE, dapat diakses di Syllabus FE dan Jadwal Fe
7) Surat Penerimaan LoA (Letter of Acceptance), dapat diakses di
https://drive.google.com/file/d/1gPdMcutCv6A_tG6hl_pDCrqPqcWd
Hnk/view
8) Penjelasan program tentang Skilvul. Dapat diakses di
https://docs.google.com/presentation/d/1Ym7OUQqkoUflS3WB3NWe
idSoNa3t5u50IbikcFgGrlk/edit#slide=id.g20c35d9440c_0_0

A - 32
 Bab V
Lampiran

V.1 Lampiran A TOR

Gambar 28. A Tor

A-1
 V.2 Lampiran B. Log Activity

Pada Bagian ini berisi log activity dengan format sebagai berikut

Tabel 4.

Minggu/Tgl Kegiatan Hasil

Minggu 1 (16- Minggu ini di isi dengan OnBoarding
17 Februari Nasional dan OnBoarding Skilvul.
2023) Dalam kegiatan minggu ini yang saya
dapat di OnBoarding Day Skilvul
antara lain: 1. Materi tentang Kode
Etik yang berlaku di Skilvul 2.
Penjelasan mengenai pembelajaran
melalui SkilRoom 3. Risiko
ketidakhadiran selama pembelajaran
Minggu 2 (20- Pada minggu ini, ada beberapa
24 Februari kegiatan. Kegiatan pertama pada hari
2023) senin 20 februari 2023 yaitu
Challenge Briefing + Welcome Party
yang diselenggarakan melalui zoom.
Pada kegiatan ini ada beberapa hal
yang saya dapat yaitu : 1. Saya
mengetahui beberapa penjelasan
tentang challeng briefing 2. Saya
mengetahui penggunaan kelas di
menu belajar yang ada di skilvul.com
3. Serta ada pemilihan ketua front end
maupun back end dengan cara voting.

B-2
Kegiatan kedua pada hari selasa 21
februari 2023 yaitu sesi product
development yang di lakukan secara
zoom meet. Pembahasan kegiatan
kali ini: 1. Menjelaskan mengenai
digital Product 2. Menerangkan
secara dasar menggunakan figma
Kegiatan ketiga pada hari Rabu 22
februari 2023 yaitu masih sama
dengan hari kemarin . Pembahasan
kali ini menjelaskan materi tentang
introduction to UI/Ux,dan latihan
menggunakan figma dengan
mencontoh draft yang telah di beri
Kaka mentor. Kegiatan ke empat hari
Kamis 23 februari 2023 yaitu
mengulang belajar menggunakan
figma dan menonton rekaman
pembelajaran hari kemarin Kegiatan
ke lima hari jumat 24 februari 2023
yaitu pada Kegiatan hari ini adalah
jadwal mentoring hari pertama
bersama mentor dan kegiatan belajar
figma bersama yang dimana di situ
saya belajar banyak pengetahuan
baru di antaranya adalah materi dan
praktek praktek untuk mengerjakan
chalange kedepan nya

B-3
Minggu 3 (27 Hari senin, materi hari itu adalah
Feb-03 Maret tentang user flow. Menjelaskan
2023) tentang apa itu user flow, dan
mengenal jenis-jenis userflow, cara
pembuatan user flow. Lalu
pembelajaran praktik, kami disuruh
membuat user flow di figma sesuai
dengan challenge masing-masing
bersama kelompok. Keesokannya
adalah mentoring kelas kecil bersama
kakak Putri Ambarwati. Materi yang
dibahas masih tentang userflow.
Setelah pembelajaran materi, Kak
Ambar membantu setiap kelompok
untuk mengoreksi dan mereview
tugas userflow. Hari rabu adalah
kelas besar product development,
materi hari itu adalah tentang
wireframe. Menjelaskan tentang
wireframe, yang low fidelity. Setelah
materi selalu dilanjutkan dengan
praktik, kami bersama kelompok
membuat wireframe di figma dengan
konsep yang sesuai dengan design
thinking yang pernah dibuat. Hari
kamis tidak ada kelas, jadi saya
melakukan review tentang materi
wireframe. Selain itu, group
kelompok saya juga melakukan kerja
kelompok dan melanjutkan tugas
membuat wireframe. Hari ini adalah

B-4
 kelas kecil bersama kakak mentor,
kak Ambar. Di awal mereview
tentang wireframe yang sudah dibuat
oleh kelompok kemarin. Lalu
memperlajari materi tentang layout
spacing dan typography
Minggu 4 (06- Hari senin 6 maret 2023 kegiatannya
10 Maret adalah mengikuti kelas besar prodev
2023) bersama kak Hafidz. Materi hari ini
merupakan Wireframe to UI Design.
Jadi kami sekelompok membuat UI
Design di figma berdasarkan
Wireframe yang sudah dibuat
sebelumnya . Pada Hari Selasa 7
maret kegiatannya adalah Mengikuti
kelas kecil bersama kak Ambar. Kak
Ambar melakukan review,
mengkoreksi dan memberikan
masukan tentang UI Design yang
sudah dibuat oleh kelompok. Pada
hari Rabu 8 maret Kegiatan hari ini
adalah kelas besar bersama kak
hafidz dimana kak hafidz
menjelaskan beberapa materi tentang
prototyping yang saya dapat dari
penjelasan tersebut adalah: 1.
mengetahui apa itu prototyping 2.
keuntungan dari prototyping 3. tipe
prototyping seperti
paper,digital,native,beserta
pengertiannya Pada hari Kamis 9

B-5
 maret 2023 pada hari ini mengikuti
webinar te BASIC MENTALITY
FOR CAREER DEVELOPMENT
yang di jelaskan oleh Heri
Hermawan, S.Psi , CHRP.,CPC yang
saya dapat dari materi tersebut adalah
1. Cara adaptif dalam era kompetitif
2. Bagaimana self and organization
dalam mempersiapkan karir 3.
Mentalitas HERO and continuous
improvement Pada hari jumat tanggal
10 maret 2023 melakukan sesi
mentoring bersama kakak mentor
yang dimana di sesi ini menjelaskan
lebih detail tools yang ada untuk
proses prototyping
Minggu 5 (13- Pada hari senin tanggal 13 maret
17 Maret Kegiatan hari ini adalah intro to
2023) coding Pada pembelajaran kalo ini
dijelaskan mengenai 1.apa itu coding
2. Tentang basic coding Dan
dijelaskan bagaimana mengerjakan
html dasar yang ada di kelas skilvul
Pada Hari selasa tanggal 14 maret
Pada hari ini kegiatan nya adalah
mengerjakan skilpoin intro to coding
dengan menggunakan materi yang di
sampaikan di hari senin Pada Hari
Rabu tanggal 15 maret Hari ini ada
kelas besar Intro to Coding bersama
kak Auzan, yang dibahas adalah

B-6
 tentang soal HTML yang dirasa sulit
di skillpoin dan juga tanya jawab
seputar CSS. Lalu malamnya
dilanjutkan dengan mentoring
bersama kak Alfred. Mentoringnya
hanya bersama kelompok saja, dan
juga masih seputar perkenalan diri.
Pada Hari Kamis tanggal 16 maret
Hari ini melakukan self learning dan
mengerjakan skill poin js dasar yang
ada di platform skilvul Pada Hari
jumat tanggal 17 maret Kegiatan hari
ini adalah ngobrol santai bareng
front-end dan back-end bersama kak
Auzan Assidqi dimana pada sesi ini
mahasiswa dapat menanyampaikan
pertanyaan mengenai materi
html,css, javascrip dan pertanyaan
lainya yang berhubungan dengan
materi dan pemograman . Sesi ini
sangat membantu mahasiswa yang
masih belum paham ataupun yang
memiliki pertanyaan seputar materi
minggu ini.
Minggu 6 (20- Pada hari senin tanggal 20 Maret
24 Maret 2023Kegiatan saya adalah mengikuti
2023) kelas besar dengan materi JavaScript
dan disana dijelaskan mengenai basic
pemrograman menggunakan
JavaScript dimana bahasa JavaScript
adalah bahasa yang bisa digunakan

B-7
untuk front end, back end, maupun
mobile. Yang saya dapatkan dari
materi di kelas besar adalah cara
penggunaan syntax di JS dan
beberapa aturan lainnya yang sangat
berguna bagi saya yang baru belajar
bahasa JavaScript. Pada hari selasa
tanggal 21 Maret 2023 Kegiatan saya
adalah belajar sendiri di rumah
dengan melihat kembali materi dari
kelas besar di hari senin yaitu materi
bahasa pemrograman JavaScript
dimana saya mencoba memahami
kembali materi yang diberikan
sampai benar-benar paham
penggunaan syntax di bahasa
pemrograman JavaScript.Pada Hari
Rabu dan kamis tanggal 22 dan 23
Maret 2023 adalah hari libur nasional
tetapi saya meluangka waktu sedikit
untuk melihar rekaman dari kelas
besar dan kelas kecil . Pada hari jumat
tanggal 24 Maret 2023 egiatan saya
adalah belajar di kelas besar dengan
materi membuat Landing Page dan
beberapa komponen penting yang
harus ada di Landing Page misalnya
seperti NavBar, CTA (Call to
Action), HeadLine, dll. Knowledge
yang bisa saya dapatkan adalah lebih
mengerti mengenai komponen

B-8
 penting di Landing Page dan cara
membuat Landing Page sederhana
menggunakan HTML, CSS, dan
JavaScript.
Minggu 7 (27- Pada hari Senin tanggal 27 maret
31 Maret Pada kegiatan hari ini adalah kelas
2023) besar yang di mentori oleh kak auzan
kegiatan sesi ini adalah sesi 1-Web
Development Dasar yang
menjelaskan materi mengenai unix
dan git.pada sesi ini dijelaskan materi
seperti 1.perbedaan gui dan cli
2.dijelaskan materi mengenai shell
3.belajar menggunakan perinta dasar
shell 4.dijelaskan bagaimana
menggunakan cli menggunakan
terminal 5.menggunakan perintah
pwd untuk menampilkan print
directiry saat ini Pada Hari Selasai
tangga 28 Maret 2023 kegiatan hari
ini adalah kelas Web Development
Dasar sesi dua yang di mentori oleh
kak Arief Fata pada kelas ini
dijelaskan materi mengenai Html
,adapun materi yang saya dapat
seperti 1.mengetahui kegunaan html
2.mengetahui dasar-dasar html
3.tools apa saja yang dibutuhkan pada
html 4.html element Pada Hari Rabu
tanggal 29 Maret 2023 kegiatan hari
ini adalah kelas Web Development

B-9
Dasar sesi dua yang di mentori oleh
kak Auzan Asiddqi pada kelas ini
dijelaskan materi mengenai CSS
,adapun materi yang saya dapat
seperti 1.Mengetahui perbedaan
penggunaan (.)selector kelas yang
bersifat grup dan (# ) selector kelas
berifat privat 2.mengetahui
perbedaan display seperti - display
block full dari pojok kanan kiri, -
inline menyesuaikan dengan bentuk
isi yang ada pada konten -flex
didalamnya terdapat beberapa
content -inline-block isi kontennya
bisa diatur dengan height dan width
3. menerapkan styling css pada
sebuah html Pada hari Kamis tanggal
30 Mar 2023 mengikuti kelas besar
dengan materi Algorithm & Data
Structures dimana pembahasannya
adalah cara membuat algoritma
sebelum memulai membuat
programnya dimana algoritma ini
dapat memudahkan penulisan
program, membantu dalam
pemecahan masalah, serta
mempersingkat waktu coding.
Diantara cara penulisan algoritma
yang paling umum digunakan adalah
pseudocode. Pada Hari Jumat tanggal
31 Maret 2023 mengikuti kelas besar

B - 10
 yaitu belajar mengenai basic
JavaScript dimana banyak membahas
Syntax dan Statement di JavaScript
serta perulangan dan percabangan
yang digunakan di JavaScript.
Mentee juga diberi soal latihan oleh
mentor untuk
dikerjakan secara mandiri.
Minggu 8 (03- Tanggal 3 April 2023 Kegiatan saya
07 April 2023) adalah belajar mengenai scope dan
function dimana di jelaskan 2 jenis
scope yaitu scope global dan juga
local, di kelas besar dengan mentor
kak Auzan waktu itu juga di jelaskan
mengenai function dan cara
penulisan serta penggunaan syntax
function yang benar. Tanggal 4 April
2023 Kegiatan saya adalah belajar
mengenai Data Type Built in
Prototype & Method di kelas besar
bersama kak Arief Ditia Faltah
dimana di jelaskan mengenai type
data pada JavaScript serta built-in
prototype dan method yang dapat
digunakan untuk memanipulasi data.
Tanggal 5 April 2023 Kegiatan saya
adalah belajar pengenalan DOM
(Document Object Model) pada kelas
besar yang di bimbing oleh mentor
kak Arief Faltah, siang-sore kembali
zoom dengan materi Workshop: CV

B - 11
 & Interview Preparation dengan
penjelasan cara membuat CV yang
baik. dan pada malam hari adalah sesi
mentoring bersama mentor kak
Alfred Hutomo yang membahas juga
DOM. Tanggal 6 April 2023
Kegiatan saya adalah zoom di kelas
besar dengan materi DOM
Manipulation atau cara memanipulasi
web dengan DOM, pada kelas
pertama di pagi hari di mentori oleh
kak Arief Faltah dan di kelas kedua
pada siang hari di mentori oleh kak
Auzan. Tanggal 7 April 2023
kegiatan saya adalah belajar mandiri
karena tidak ada zoom di
sebabkan libur nasional.
Minggu 9 (10- Pada hari senin tanggal 10 april 2023
14 April 2023) pada hari itu saya belajar mengenai
array dan object di sesi kelas besar
yang di mentori oleh kak Auzan dan
kelas berlangsung 2X yaitu pada pagi
hari dan siang hari, knowledge yang
saya dapatkan adalah saya bisa
paham apa itu array dan object dalam
JavaScript . Pada hari selasa tanggal
april 2023 pada hari itu saya belajar
Recursive di sesi kelas besar dengan
mentor kak Auzan, disini saya
mendapatkan knowledge mengenai
cara penggunaan Recursive di

B - 12
JavaScript yang bisa saya terapkan di
project saya . Pada hari rabu taggal 12
april 2023 pada hari itu saya belajar
Asynchronous di sesi kelas besar
pada pagi hari dengan mentor kak
Arief Ditia Faltah. Di sini saya
mendapatkan knowledge
penggunaan dan penerapan
Asynchronous pada JavaScript . Pada
hari Kamis tanggal 13 april 2023
pada hari itu saya mengikuti sesi
kelas besar di pagi hari dengan
mentor kak Arief Ditia Faltah dengan
materi Web Storage. disini saya
banyak mendapatkan knowledge
terutama dalam penerapan Web
Storage pada website menggunakan
JavaScript . Pada hari Jumat tanggal
14 april 2023 pada hari itu saya
mengikuti sesi kelas besar di pagi hari
dengan mentor kak Arief Ditia Faltah
dengan materi Asynchronous 2
dimana melanjutkan materi
Asynchronous 1. Di hari Jum'at dan
Rabu saya juga mengikuti mentoring
yang di mentori oleh kak Alfred
Hutomo yang membahas mengenai
materi di kelas besar agar para
mentee lebih paham mengenai materi
yang dijelaskan.

B - 13
Minggu 11 Pada Hari Senin tangal 17 Apr 2023
(24-28 April Mengikuti kelas besar yang dimana
2023) di materi tersebut menjelaskan
tentang responsive web desaign
bersama kak Auzan Assidqi dan
mencoba mempraktekan nya . Pada
Hari Selasa tanggal 18 Apr 2023 Pada
hari ini mengikuti kelas besar yang di
mana materi tersebut menjelaskan
tentang git, terus fork,dan
menjelaskan tentang tugas yang akan
datang bersama kak Fatah dan Kak
Auzan Assidqi. Pada Hari Rabu
tanggal 19 Apr 2023 Mengikuti sesi
Mentoring bersama kak Alfred yang
dimana membahas materi tentang
java Ajax dan mempraktekan
bersama serta ada sesi tanya jawab
tentang materi tersebut . Pada Hari
Kamis tanggal 20 April 2023 tidak
ada agenda . Pada Hari Jumat tanggal
21 Apr 2023 Mengikuti kelas
Mentoring bersama kak Alfred yang
dimana membahas cara penggunaan
mockapi buat bagian api di web yg
mau dibuat untuk tugas
yang akan datang
Minggu 11 Pada hari Senin 24 apirl 2023 saya
(24-28 April membahas tentang tugas kelompok
2023) bersama group saya dan tentang
membahas materi untuk persiapan

B - 14
 pengerjaan tugas kelompok . Pada
hari jumat tanggal 28 April 2023 saya
mengikuti sesi mentoring yang
dimana membahas tentang
persyaratan mengenai tugas
kelompok dan menyakan ada yang
kurang paham di persyaratan tugas
kelompok
Minggu 12 Senin1 Mei 2023Hari senin masih
(01-05 Mei libur cuti, tetapi teman kelompok
2023) melakukan google meet untuk
membahas tugas group
project.Selasa2 Mei 2023hari
pertama kegiatan setelah libur idul
fitri. Kelas dalam minggu ini tidaklah
wajib. Tapi hari ini saya ikut kelas
dan mendengarkan beberapa
pertanyaan-pertanyaan seputar group
project. Selain itu, saya dan
kelompok hari ini melakukan google
meet untuk mengerjakan UI design
dari project yang akan dibuat.Rabu 3
Mei 2023 mulai mengerjakan group
project. Setelah pembagian tugas,
saya langsung mengerjakannya
Mulai membuat Landing Pages dan
di malam hari nya melakukan
mentoring bersama kak alfred.
Adapun materi yang dibahas masih
seputar group project, lalu
melaporkan progress tugas sampai

B - 15
 mana, dan cara push ke GitHub.
Kamis 4 Mei 2023 Pada hari ini
malam harinya teman kelompok
melakukan google meet untuk
berdiskusi. Adapun yang dikerjakan
yaitu masing-masing tugasnya dan
membahas tentang BRD dari web
TRACLE.Jumat 5 Mei 2023 saya
melanjutkan landing pages saya dan
mulai menggambungkan kerjaan dari
temen saya dan mulai mencoba
berjalan atau tidak nya web yang
kami buat dan melakukan mentoring
bersama kak alfred sebentar saja
untuk melaporkan progress Lalu di
hari sabtu, saya masih mengerjakan
tugas bersama teman kelompok
seperti membuat ppt, video dan
menyempurnakan BRD
sebelum dikumpulkan
Minggu 13 Tanggal 08 Mei 2023 Kegiatan saya
(08-12 Mei adalah belajar mengenai react js dasar
2023) di kelas besar di pagi hari dengan
mentor kak Auzan dimana
penjelasannya masih tentang cara
install react js menggunakan vite js
dan beberapa penjelasan lainnya.
Lalu di siang hari ada kelas kembali
dengan materi Career Discovery in
Tech dimana membahas mengenai
potensi karier di bidang teknologi

B - 16
 khususnya software engineer.
Tanggal 09 Mei 2023 Kegiatan saya
adalah mengikuti kelas besar di pagi
hari dengan mentor kak Auzan
dimana pembahasannya masih
mengenai cara membuat folder
project dengan react js dan penjelasan
mengenai material dan component di
react js. Tanggal 10 Mei 2023
Kegiatan saya adalah mengikuti kelas
besar di pagi hari dengan mentor kak
Auzan dimana pembahasannya
adalah state dan props serta handle
event. Tanggal 11 Mei 2023 Kegiatan
saya adalah mengikuti kelas besar di
pagi hari dengan mentor kak Auzan
dimana pembahasannya adalah
mengenai lifecycle methods dengan 3
kategori yaitu mounting, updating,
dan unmounting. dan di malam hari
saya mengikuti mentoring bersama
kak Alfred dengan lanjutan
pembahasan dari kelas besar.
Tanggal 12 Mei 2023 kegiatan saya
adalah mengikuti kelas besar di pagi
hari dengan mentor kak Auzan
dimana pembahasannya adalah React
Hooks dan PropTypes.
Minggu 14 Tanggal 15 Mei 2023 Kegiatan saya
(15-19 Mei adalah mengikuti kelas pagi bersama
2023) kak Auzan sebagai mentor di kelas

B - 17
React JS lanjutan dengan materi
proptypes yang digunakan untuk
menvalidasi props. Ini sangat
membantu dalam meminimalkan
bugs saat mengembangkan App
besar. Jika props tidak benar type nya
maka akan muncul warning. Tanggal
16 Mei 2023 Kegiatan saya adalah
mengikuti kelas pagi bersama kak
Auzan sebagai mentor dengan materi
react router dimana berfungsi untuk
membuat sebuah aplikasi web yang
memiliki banyak halaman dengan
URL yang berbeda-beda. Tanggal 17
Mei 2023 Kegiatan saya adalah
mengikuti kelas pagi bersama kak
Auzan sebagai mentor dengan materi
React Redux & Redux Thunk dan
pada siang hari saya mengikuti
webinar wajib dengan tema Stress
and Time Management dimana
membahas materi mengenai cara
mengelola dan mengendalikan
pikiran, dll. Pada malam hari ada
mentoring bersama kak Alfred
namun saya tidak dapat mengikuti
karena ada kepentingan yang lain.
Tanggal 18 Mei 2023 Kegiatan saya
adalah hanya mengikuti mentoring
bersama kak Alfred dengan materi
yang di dapat dari kelas besar pada

B - 18
 hari rabu karena pada hari kamis
adalah libur nasional karena kenaikan
al-masih. Tanggal 19 Mei 2023
kegiatan saya adalah mengikuti kelas
besar pada pagi hari dengan mentor
kak Auzan dengan materi React
Redux & Redux Thunk dan pada
malam hari ada mentoring bersama
kak Alfred dengan membahas tugas
yang diberikan oleh skilvul
yaitu todo list.
Minggu 15 Senin 22 Mei 2023 Hari ini ada kelas
(22-26 Mei live session bersama kak auzan, dan
2023 memasuki sesi terakhir untuk belajar
react redux. Adapun materinya yaitu
tentang redux thunk. Redux thunk
yaitu sebuah middleware yang dapat
digunakan untuk menulis sebuah aksi
yang mereturn fungsi. Lalu
mengaplikasikannya atau fetching
menggunakan mockapi Selasa 23
Mei 2023 Hari ini membahas tentang
react context. Sama seperti redux,
react context juga digunakan untuk
melakukan state management.
Context lebih ringan dibandingkan
dengan redux, salah satunya karena
redux adalah library dan harus
diinstall dahulu, hal itu membuat
context lebih light-weight solution.
Dan lebih cocok untuk passing data

B - 19
 pada nested child yang dalam. Rabu
24 Mei 2023 Hari ini ada kelas live
session bersama kak auzan. Adapun
materi yang dibahas masih tentang
react context. Mengulang kembali
materi yang sudah dibahas kemarin.
Kamis 25 Mei 2023 Live session hari
ini bersama kak auzan. Materi yang
dibahas yaitu tentang testing pada
react. Tetsing pada react dapat
dilakukan menggunakan jest dan
RTL. Membahas tentang konsep dari
unit testing. Unit testing sendiri berati
kita melakukan test kepada setiap
component.Adapun testing ini
dilakukan pada UI dari sebuah web
Jumat 26 Mei 2023 Materi telah
selesai, dan hari ini adalah jadwal
untuk briefing tentang final project.
Di awal, kak auzan mengajak untuk
mereview kembali materi
sebelumnya, membahas tentang
materi yang masih belum dipahami,
lalu dilanjutkan dengan kak david
untuk membahas apa-apa saja yang
harus dikerjakan selama final project.
Minggu 16 Senin 29 Mei 2023 Mei mengikuti
(29-02 Juni zoom development final group projek
2023) day 1 dan mengikuti sesi tekhnical
test preparation Selasa 30 Mei 2023
pada hari ini melakukan diskusi tim

B - 20
 melalui gmeet untuk pengerjakan
final projek Rabu 31 Mei 2023 Pada
hari ini melakukan kegiatan zoom
Workshop: Pitching &
Enterpreneurship di skilvul dan
Mulai melakukan pengerjain final
project Kamis 1 Jun 2023 Pada hari
ini melakukan mentoring yang
dimana di sesi mentoring membahas
tentang final Project yang akan kita
kerjakan Jumat 2 Jun 2023 membuat
final projwk sesuai desain yang ada di
figma sambil menunggu giliran
pengerjaan saya membuat isi dari
landing pages
Minggu 17 Senin 5 Jun i2023 Kegiatan saya
(05-09 Juni adalah mengikuti diskusi bersama
2023) teman-teman mengenai final project
dimana sudah mendapat ide
mengenai fitur yang ingin di
masukkan ke website kami dan kami
juga mengedit desain web yang
sebelumnya sudah pernah dikerjakan
di figma ke bentuk ide yang telah
kami buat. Selasa 6 Juni 2023
Kegiatan saya adalah mengikuti
diskusi bersama teman-teman dimana
fitur yang telah kami sepakati
akhirnya dibagi sesuai dengan
kemampuan teman-teman dan mulai
proses mengerjakan bagian coding

B - 21
 Front-End untuk website dengan
tema yang telah kami ambil yaitu
tema lingkungan. Rabu 7 Juni2023
Kegiatan saya Mendapat kan
Landing Pages dan sudah selesai
yang menjadi tanggung jawab saya
dari pembagian pengerjaan bersama
teman-teman dan pada malam hari
kami mengikuti mentoring bersama
kak Alfred dengan sedikit
mempresentasikan hasil yang telah
kami dapat dari hasil coding
websitenya. Kamis 8 Juni 2023
Kegiatan saya hari ini adalah
Memperbaiki halaman landing pages
di bagian herro banner dengan
menggunakan mocAPI sampai
malam hari Jumat 9 Juni 2023
Kegiatan saya adalah mengup
codingan saya dan memberi tahu
teman teman bahwa codingan yang
saya kerjakan sudah
saya up ke github
Minggu 19 Minggu ini saya melakukan kegiatan
(19-23 Juni membuat laporan akhir yang dimana
2023) saya mulai dari cari referensi untuk
mengerjakan laporan akhir saya dan
membuat nya dari bab 1 hingga bab 3

B - 22
Minggu 20 Pada minggu ini saya mengerjakan
(26-30 Juni laporan akhir saya dan sudah
2023) menyelesaikan nya juga beserta
meminta ttd mentor untuk kebutuhan
laporan akhir . Pada minggu ini juga
saya mengikuti kegiatan demo day
dan Graduation .

B - 23
V.3 Lampiran Dokumen Teknik

Project Akhir(Pembuatan web informasi dan pengaduan):

1. Landing Page

2. Code Landing Page

B - 24
3. Category pages (Organik,Anorganik dan B3)

• Category Page

• Organic

• Anorganik

B - 25
 • B3

4. Code Category (Organik Anorganik dan B3)

5. Article Page

B - 26
6. Read Article Page

7. Code Article Page

B - 27
8. Code Read Article

9. Login Page

10. Register Page

11. Code Login Page

B - 28
12. Code Register Page

13. Pengaduan user page

B - 29
14. Pengaduan admin page

15. Code pengaduan admin page

16. Code pengaduan user page

B - 30
17. Article API

B - 31
18. Pengaduan API

B - 32
19. Hero Banner API

B - 33
Hasil Turnitin

B - 34
B - 35
B - 36
B - 37