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 21

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

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

B-2
 3

(TBD)
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 3 rd
parties

Target yang hendak di capai dalam program di skilvul yaitu :

Tabel 2.

Module Target
1. Peserta mampu

B-3
 4

memahami dan
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

B-4
 5

sebuah Hi-
Fidelity 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

B-5
 6

fundamental dari website

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

B-6
 7

berupa aplikasi website yang

interaktif.
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

B-7
 8

mempresentasikan hasil karya

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

B - 17
 dari 5 sesion 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
Wednesday 22 07.00 - Introduction to UI/UX Design
February 10.00

B - 19
 2023
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 - -
11
March 08.00 -
Saturday 2023 11.00 Product Development Recaps

B - 20
 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
28
09.00 -
Tuesday March HTML Foundation
12.00
2023
29
09.00 -
Wednesday March CSS Foundation & Flexbox
12.00
2023
Thursday 30 09.00 - Basic Algorithm

B - 21
 March
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 -
Thursday 6 April Manipulating Elements
2023 08.00 - JavaScript Dasar - DOM -
11.00 Manipulating 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
JavaScript Intermediate - Asynchronous
12 April - Introduction
Wednesday
2023 08.00 - JavaScript Intermediate - Asynchronous
11.00 - 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

B - 22
 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
14.00 -
Webinar: Career Discovery in Tech
8 May 16.00
Monday 2023 React.js Basic - Functional Component
Tuesday 9 May React.js Basic - Props and State
2023 08.00 - React.js Basic - Styling (CSS
11.00 Stylesheet, 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

B - 23
 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

Monday
2023 11.00 with 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
29 May 14.00 - Development Final Project (Technical
Monday 2023 16.30 Test Preparation)
Tuesday 30 May
2023 - Development Final Project
31 May
Wednesday - Development Final Project
2023
31 May 14.00 - Workshop: Pitching &
Wednesday 2023 16.00 Enterpreneurship
Thursday 1 June
2023 - -
2 June
Friday - -
2023

B - 24
 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 Submission Final Project
Friday -
2023

19 June -
Monday -
2023
20 June -
Tuesday -
2023
21 June -
Wednesday -
2023
22 June -
Thursday -
2023
23 June
Friday - -
2023

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

B - 25
 2023
30 June
Friday - -
2023

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

B - 26
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
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.

B - 27
 Penjelasan gambar di bawah ini :

Gambar 3.Paint Point

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

B - 28
 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

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:

B - 29
 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

Gambar 8. User Flow Kategori

B - 30
 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 , 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.

B - 31
 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
B - 32
 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_pDCrqPqcWdHnk/view
8) Penjelasan program tentang Skilvul. Dapat diakses di
https://docs.google.com/presentation/d/
1Ym7OUQqkoUflS3WB3NWeidSoNa3t5u50IbikcFgGrlk/
edit#slide=id.g20c35d9440c_0_0

A - 32
B - 33
 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

B-2
Tabel 4.

B-3
 Minggu/Tgl Kegiatan Hasil
Minggu 1 (16- Minggu ini di isi dengan
17 Februari OnBoarding Nasional dan
2023) OnBoarding Skilvul. 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. 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
B-4
mencontoh draft yang telah di beri
Kaka mentor. Kegiatan ke empat
hari Kamis 23 februari 2023 yaitu
V.3 Lampiran Dokumen Teknik

Project Akhir(Pembuatan web informasi dan pengaduan):

1. Landing Page

2. Code Landing Page

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

 Category Page

 Organic

 Anorganik

B-6
  B3

4. Code Category (Organik Anorganik dan B3)

5. Article Page

B-7
6. Read Article Page

7. Code Article Page

B-8
8. Code Read Article

9. Login Page

10. Register Page

11. Code Login Page

B-9
12. Code Register Page

13. Pengaduan user page

B - 10
14. Pengaduan admin page

15. Code pengaduan admin page

16. Code pengaduan user page

B - 11
17. Article API

B - 12
18. Pengaduan API

B - 13
19. Hero Banner API

B - 14
Hasil Turnitin

B - 15
B - 16
B - 17
B - 18