Laporan KP Rev4

PERANCANGAN FRONTEND SISTEM INFORMASI E-
FLIGHT TICKET PLATFORM MENGGUNAKAN REACT DI

PT LENTERA BANGSA BENDERANG
LAPORAN KERJA PRAKTIK
Disusun sebagai salah satu syarat untuk menyelesaikan

Program Pendidikan Strata Satu (S-1)
Program Studi Sistem Informasi
Oleh:
Muhammad Insan Kamil

20191320029
PROGRAM STUDI SISTEM INFORMASI

FAKULTAS ILMU KOMPUTER DAN SISTEM INFORMASI
UNIVERSITAS KEBANGSAAN REPUBLIK INDONESIA
BANDUNG
2023
LEMBAR PENGESAHAN
PERANCANGAN FRONTEND SISTEM INFORMASI E-

FLIGHT TICKET PLATFORM MENGGUNAKAN REACT DI
PT LENTERA BANGSA BENDERANG
Oleh:

20191320029
Telah disetujui dan disahkan di Bandung sebagai Laporan Kerja Praktik,

pada tanggal :
____________________________
Menyetujui,
Pembimbing
( Adam Husain, ST., M.Kom. )

NIP : 12203011
Dekan Fakultas Ilmu Komputer Ketua Program Studi

dan Sistem Informasi Sistem Informasi
( Nana Suryana, ST., M.Kom. ) ( Popon Dauni, ST., M.Kom. )

NIK : 10602024 NIK : 11509015
i
LEMBAR PERNYATAAN KEASLIAN
Saya yang bertanda tangan dibawah ini:
Nama : Muhammad Insan Kamil

NPM : 20191320029
Judul KP : Perancangan Frontend Sistem Informasi E-Flight Ticket
Platform Menggunakan React di PT. Lentera Bangsa
Benderang
Menyatakan dengan sebenarnya bahwa penulisan Laporan Kerja Praktik

berdasarkan hasil penelitian, pemikiran dan pemaparan asli dari penulis sendiri,
baik untuk naskah laporan maupun kegiatan Programming yang tercantum sebagai
bagian dari Laporan Kerja Praktik ini. Jika terdapat karya orang lain, penulis
akan mencantumkan sumber yang jelas.
Demikian pernyataan ini saya buat dengan sesungguhnya dan apabila dikemudian
hari terdapat penyimpangan dan ketidakbenaran dalam pernyataan ini, maka saya
bersedia menerima sanksi akademik berupa pencabutan gelar yang telah diperoleh
karena karya tulis ini dan sanksi lain sesuai dengan norma yang berlaku di
perguruan tinggi ini.
Bandung, .............................. 2023
Yang membuat pernyataan,
Materai Rp. 6.000,-
(Muhammad Insan Kamil)

NPM : 20191320029
ii
ABSTRAK
Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi telah membuka

Kembali program Studi Independen pada tahun 2022. Ini merupakan bagian dari
program Kampus Merdeka – Merdeka Belajar yang memberikan kesempatan
kepada mahasiswa untuk mencapai potensinya di luar program studi yang dipelajari
pada jenjang perguruan tinggi. PT. Lentera Bangsa Benderang adalah perusahaan
yang menyediakan edukasi berbasis teknologi dan menjalankan program Magang
serta Studi Independen Bersertifikasi Kampus Merdeka. Kegiatan Studi
Independen di PT. Lentera Bangsa Benderang membuka lima learning track yaitu
Product Manager, Mobile Development, Frontend Web Development, Backend
Web Development, dan Fullstack Web Development. Pada penghujung kegiatan,
penulis membuat Final Project dengan topik yang telah ditentukan yaitu sistem E-
Flight Ticket Apps dengan judul “PapierFlieger”. Hasil dari pengerjaannya berupa
platform sistem informasi berbasis web yang mengakomodir pemesanan dan
pembelian tiket penerbangan secara online, baik one way (sekali penerbangan) dan
round trip (pulang pergi). Platform ini membuka dan menyediakan berbagai jenis
penerbangan domestik dan mancanegara. Flow / alur platform dibebaskan
berdasarkan kreasi tim final project. Terdapat dua peran User yaitu berperan
sebagai admin dan login sebagai buyer. Buyer dapat mengirimkan dan menerima
bukti hasil transaksi melalui platform ini.
Kata Kunci: Kampus Merdeka, Studi Independen, PT. Lentera Bangsa Benderang,
Final Project
iii
ABSTRACT
Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi held a program called

Studi Independen since 2021 and it was part of their program namely Kampus
Merdeka-Merdeka Belajar. Every student of bachelor degree from many University
across Indonesia could reach their potential with the program, equivalent to college
subject of their interest. PT. Lentera Bangsa Benderang is one of many company
that provide ‘edtech’ in Indonesia and has been trusted to organize internship
programme and Studi Independen Bersertifikasi Kampus Merdeka. There is five
learning track that student could pick to join Studi Independen activity at PT.
Lentera Bangsa Benderang such as : Product Manager, Mobile Development,
Frontend Web Development, Backend Web Development, and Fullstack Web
Development. In the end of activity, every student teaming up with others to do a
Final Project complete with a brief to create E-Flight Ticket Apps. Expected result
of Final Project is a web based platform for visitor to online book and buy flight
tickets, both one way and round trip ticket. This platform providing international
and domestic flights. There is two recognized role inside a sistem, Administrator
that has role to manage a data sistem and a Buyer that can book, buy and receive a
booking receipt through this platform.
Keyword: Kampus Merdeka, Studi Independen, PT. Lentera Bangsa Benderang,

Final Project
iv
KATA PENGANTAR
Segala puji syukur kehadirat Allah SWT, yang telah melimpahkan rahmat,
hidayah, dan karunia-Nya sehingga penulis bisa menyelesaikan program studi
independen dan laporan kerja praktik ini dengan baik tanpa ada kendala.
Laporan kerja praktik ini berisi tentang detail kegiatan studi independen
yang telah dilaksanakan penulis. Terselesaikannya laporan ini tentu tidak lepas dari
bantuan banyak pihak. Oleh karena itu, penulis mengucapkan terima kasih kepada:
1. Pihak Kampus Merdeka yang telah memberikan wadah bagi penulis untuk
mengembangkan minat dan kemampuan baru ke arah yang lebih luas.
2. PT. Lentera Bangsa Benderang yang telah memberikan kesempatan kepada
penulis untuk dapat mempelajari dan menambah pengetahuan di bidang
teknologi terutama pada bidang web development.
3. Bapak Imam Taufiq Hermawan selaku fasilitator kelas FSW-4 track Fullstack
Web Development (FSW) yang senantiasa memberikan ilmu dan pengetahuan
yang baru selama berlangsungnya kegiatan studi independent.
4. Kak Alphindo Muhamad Firdaus Winasis selaku AAO kelas FSW-4 track
Fullstack Web Development yang senantiasa mengarahkan dan membantu
penulis dan teman-teman dalam proses pembelajaran.
5. Rekan-rekan kelas FSW-4 yang telah memberikan dukungan dan semangat,
serta membantu penulis menemukan inspirasi-inspirasi baru.
6. Anggota Tim C-15 yang terdiri dari FSW-4 dan AND-2 yang telah banyak
meluangkan waktu, pikiran, dan tenaganya pada final project.
7. Bapak Adam Husain, S.T., M.Kom., selaku dosen pembimbing kerja praktik
yang telah memberikan bimbingan, pengarahan, dan dorongan dalam
pengerjaan laporan ini
8. Ibu Popon Dauni, S.T., M.Kom., selakuk Ketua Program Studi Sistem
Informasi yang telah menyetujui laporan kerja praktik
Laporan akhir ini disusun untuk memenuhi persyaratan kelulusan Program
MSIB MBKM tahun 2023. Dalam penyusunan laporan akhir ini, penulis telah
berusaha dengan segenap kemampuan, dan tentunya masih banyak kekurangan dan
v
kesalahan. Oleh karena iitu, penulis mengharapkan kritik dan saran yang
membangun agar laporan ini dapat menjadi lebih baik dan dapat digunakan
sebagaimana mestinya.
Akhir kata, penulis berharap semoga laporan akhir ini dapat bermanfaat bagi
semua pihak dan dapat menjadi referensi untuk menambah wawasan dan ilmu
pengetahuan serta perkembangan program Magang dan Studi Independen
Bersertifikat di kemudian hari.
Bandung, 22 Januari 2023
vi
DAFTAR ISI
LEMBAR PENGESAHAN ................................................................... i
LEMBAR PERNYATAAN KEASLIAN.............................................. ii
ABSTRAK .......................................................................................... iii
ABSTRACT ........................................................................................ iv
KATA PENGANTAR ........................................................................... v
DAFTAR ISI....................................................................................... vii
DAFTAR GAMBAR ............................................................................ x
DAFTAR TABEL .............................................................................. xiii
BAB I PENDAHULUAN ................................................................... 1

1.1 Latar Belakang .............................................................................................. 1
1.2 Lingkup ......................................................................................................... 3
1.3 Tujuan............................................................................................................ 4
1.4 Lokasi dan Waktu Penelitian ......................................................................... 4
1.5 Sistematika Penulisan ................................................................................... 5
BAB II LANDASAN TEORI.............................................................. 6

2.1 Pengertian Analisis ........................................................................................ 6
2.2 Analisis Sistem .............................................................................................. 6
2.2.1 Tujuan Analisa Sistem ............................................................................ 7
2.2.2 Langkah Analisa Sistem ......................................................................... 7
2.3 Perancangan Frontend................................................................................... 8
2.3.1 Unified Model Language (UML) ........................................................... 8
2.3.2 Tech-stack Frontend ............................................................................... 9
vii
2.3.3 React Library ........................................................................................ 10
2.3.4 Single Page Application ....................................................................... 10
2.3.5 Separation of Concerns .........................................................................11
2.3.6 Atomic Design ...................................................................................... 12
2.4 PT. Lentera Bangsa Benderang ................................................................... 14
2.5 Lingkup Pekerjaan ...................................................................................... 14
2.6 Deskripsi Pekerjaan..................................................................................... 15
2.7 Jadwal Kerja ................................................................................................ 20
BAB III ANALISIS DAN TINJAUAN PERMASALAHAN ............ 22

3.1 Pendahuluan dan Permasalahan .................................................................. 22
3.2 Proses dan Perancangan Solusi ................................................................... 24
3.3 Perancangan UML ...................................................................................... 26
3.3.1 Use Case Diagram ............................................................................... 27
3.3.2 Deskripsi Use Case .............................................................................. 27
3.3.3 Activity Diagram .................................................................................. 41
3.4 Penerapan Separation of Concerns Pada Frontend..................................... 56
3.4.1 Presentation Layer ............................................................................... 56
3.4.2 Framework Layer ................................................................................. 62
3.4.3 Logic dan Data Access Layer .............................................................. 64
3.5 Penerapan Atomic Design Pada Frontend ................................................... 71
3.5.1 Desain Elemen/Komponen Berbasis Molecules .................................. 71
3.5.2 Desain Elemen/Komponen Berbasis Organisms ................................. 72
3.5.3 Desain Elemen/Komponen Berbasis Pages ......................................... 74
3.6 Hasil dan Pembahasan................................................................................. 75
BAB IV PENUTUP ............................................................................ 89
viii
4.1 Kesimpulan ................................................................................................. 89
4.2 Saran............................................................................................................ 89
DAFTAR PUSTAKA ......................................................................... 90
LAMPIRAN ....................................................................................... 91
ix
DAFTAR GAMBAR
Gambar 2. 1 Kategori Diagram UML..................................................................... 9

Gambar 2. 2 Contoh Horizontal Separation of Concerns ..................................... 12
Gambar 2. 3 Atomic Design .................................................................................. 13
Gambar 2. 4 Struktur Organisasi PT. Lentera Bangsa Benderang ........................ 14
Gambar 3. 1 Desain ERD ...................................................................................... 24
Gambar 3. 2 Backend Directory............................................................................ 25
Gambar 3. 3 Frontend Directory ........................................................................... 26
Gambar 3. 4 Alur Sistem Booking Tiket .............................................................. 26
Gambar 3. 5 Use Case Diagram Papierflieger...................................................... 27
Gambar 3. 6 Activity Registration ......................................................................... 41
Gambar 3. 7 Activity AuthN & AuthZ .................................................................. 42
Gambar 3. 8 Search Ticket .................................................................................... 43
Gambar 3. 9 Book Ticket ...................................................................................... 44
Gambar 3. 10 Book Ticket .................................................................................... 45
Gambar 3. 11 Pay Ticket ....................................................................................... 46
Gambar 3. 12 Tinjau Destinasi.............................................................................. 47
Gambar 3. 13 Kelola Wishlist ............................................................................... 48
Gambar 3. 14 Kelola Profile ................................................................................. 49
Gambar 3. 15 Tambah Destinasi ........................................................................... 50
Gambar 3. 16 Tambah Bandara ............................................................................ 51
Gambar 3. 17 Tambah Pesawat ............................................................................. 52
Gambar 3. 18 Tambah Tiket ................................................................................. 53
Gambar 3. 19 Pratinjau Transaksi ......................................................................... 54
Gambar 3. 20 Pratinjau Pengguna ......................................................................... 55
Gambar 3. 21 Struktur Proyek Frontend............................................................... 56
Gambar 3. 22 index.html ....................................................................................... 57
Gambar 3. 23 Entry point JSX Reactjs ................................................................. 58
Gambar 3. 24 Kumpulan Elemen/Komponen JSX ............................................... 59
x
Gambar 3. 25 Kumpulan Elemen/Komponen JSX yang dihimpun berdasarkan route
............................................................................................................................... 59
Gambar 3. 26 Penulisan atribut class pada markup HTML .................................. 60
Gambar 3. 27 Penulisan atribut className pada JSX .......................................... 60
Gambar 3. 28 Tampilan Depan Proyek Frontend ................................................. 61
Gambar 3. 29 Elemen/Komponen JSX yang Telah Menjadi HTML.................... 61
Gambar 3. 30 Penerapan Request/Response Handler ........................................... 62
Gambar 3. 31 Penggunaan Axios Interceptor untuk Header Request ................... 64
Gambar 3. 32 Contoh Penerapan Objek API pada Salah Satu Service ................. 64
Gambar 3. 33 Konfigurasi Reducer ...................................................................... 66
Gambar 3. 34 Akses Data Dalam State melalui Provider ..................................... 66
Gambar 3. 35 Contoh Akses State pada Elemen/Komponen ................................ 67
Gambar 3. 36 Aksi Reducer Mengambil Data dan Menyimpan ke Reducer ........ 68
Gambar 3. 37 Data Response dalam Bentuk Array of Object dari HTTP Request69
Gambar 3. 38 Menampung Data HTTP Response dari HTTP Request ................ 69
Gambar 3. 39 Method Penyaringan Tiket Berdasarkan Input Pengunjung .......... 70
Gambar 3. 40 Hasil dari Method Map .................................................................. 70
Gambar 3. 41 Penerapan Desain Molecules .......................................................... 72
Gambar 3. 42 Code Penerapan Desain Molecules ................................................ 72
Gambar 3. 43 Penerapan Desain Organisms......................................................... 73
Gambar 3. 44 Code Penerapan Desain Organisms ............................................... 73
Gambar 3. 45 Penerapan Desain Pages ................................................................. 74
Gambar 3. 46 Code Penerapan Desain Pages ....................................................... 75
Gambar 3. 47 Halaman Login Sistem ................................................................... 76
Gambar 3. 48 Tampilan Dashboard Administrator ............................................... 77
Gambar 3. 49 Halaman Bandara ........................................................................... 77
Gambar 3. 50 Halaman Pesanan ........................................................................... 78
Gambar 3. 51 Halaman Pesawat ........................................................................... 79
Gambar 3. 52 Halaman Pratinjau Tiket................................................................. 79
Gambar 3. 53 Halaman Transaksi ......................................................................... 80
Gambar 3. 54 Halaman Depan User ..................................................................... 81
xi
Gambar 3. 55 Halaman Pencarian Tiket ............................................................... 82
Gambar 3. 56 Halaman Hasil Pencarian Tiket ...................................................... 83
Gambar 3. 57 Halaman Rincian Tiket yang Dipilih ............................................. 84
Gambar 3. 58 Halaman Pengisian Data Penumpang ............................................ 85
Gambar 3. 59 Pilih Metode Pembayaran .............................................................. 86
Gambar 3. 60 In-App Notification ........................................................................ 87
Gambar 3. 61 Halaman Rincian Notifikasi ........................................................... 87
Gambar 3. 62 Halaman Rincian Riwayat Transaksi ............................................. 88
xii
DAFTAR TABEL
Tabel 1. 1 Bobot SKS Pada Track Full Stack Web Development ........................... 3
Tabel 3. 1 Use Case Registration .......................................................................... 27
Tabel 3. 2 Use Case AuthN & AuthZ ................................................................... 29
Tabel 3. 3 Use Case Search Ticket........................................................................ 29
Tabel 3. 4 Use Case Book Ticket .......................................................................... 31
Tabel 3. 5 Use Case Pay Ticket ............................................................................ 31
Tabel 3. 6 Use Case Tinjau Destinasi ................................................................... 32
Tabel 3. 7 Use Case Kelola Wishlist ..................................................................... 33
Tabel 3. 8 Use Case Kelola Profile ....................................................................... 33
Tabel 3. 9 Use Case Tambah Destinasi ................................................................. 34
Tabel 3. 10 Use Case Tambah Bandara ................................................................ 35
Tabel 3. 11 Use Case Tambah Pesawat ................................................................ 36
Tabel 3. 12 Use Case Tambah Tiket ..................................................................... 37
Tabel 3. 13 Use Case Pratinjau Transaksi ............................................................. 38
Tabel 3. 14 Use Case Pratinjau Pengguna ............................................................ 39
xiii
DAFTAR TABEL
Tabel 1. 1 Bobot SKS Pada Track Full Stack Web Development .......................... 3
Tabel 2. 1 Jadwal Keseluruhan Fullstack Web Development............................... 21
Tabel 3. 1 Use Case Registration .......................................................................... 38
Tabel 3. 2 Use Case AuthN & AuthZ ................................................................... 40
Tabel 3. 3 Use Case Search Ticket........................................................................ 40
Tabel 3. 4 Use Case Book Ticket .......................................................................... 42
Tabel 3. 5 Use Case Pay Ticket ............................................................................ 42
Tabel 3. 6 Use Case Tinjau Destinasi ................................................................... 43
Tabel 3. 7 Use Case Kelola Wishlist ..................................................................... 44
Tabel 3. 8 Use Case Kelola Profile ....................................................................... 44
Tabel 3. 9 Use Case Tambah Destinasi ................................................................. 45
Tabel 3. 10 Use Case Tambah Bandara ................................................................ 46
Tabel 3. 11 Use Case Tambah Pesawat ................................................................ 47
Tabel 3. 12 Use Case Tambah Tiket ..................................................................... 48
Tabel 3. 13 Use Case Pratinjau Transaksi ............................................................. 49
Tabel 3. 14 Use Case Pratinjau Pengguna ............................................................ 50
XIII
BAB I
PENDAHULUAN
1.1 Latar Belakang

Perubahan peradaban dunia yang sangat cepat di berbagai negara ditandai
dengan penggunaan sistem informasi tanpa batas berbasis komputer. Kehadiran
revolusi industri 4.0 juga mengakibatkan perubahan fundamental, misalnya
perubahan teknologi dasar, sosial, ekonomi makro, dan lain sebagainya. Sektor
pendidikan sebagai pilar utama untuk kemajuan generasi penerus bangsa juga perlu
menyesuaikan diri dengan perkembangan zaman agar tidak tertinggal baik dari
bidang teknologi pendidikan maupun kurikulum pembelajaran yang ada di negara-
negara maju (Benny Dito & Pujiastuti, 2021, hal. 1). Selain itu, tantangan lain yang
harus di hadapi pada era 4.0 ini antara lain masalah keamanan informasi, mesin
produksi yang harus stabil, ketrampilan yang kurang memadai, keengganan untuk
berubah, serta kurangnya tenaga kerja dalam jumlah yang banyak dikarenakan
perubahan otomatisasi. Maka dari itu, pendidikan sebaiknya menjadi jembatan
penghubung antara pelajar dengan dunia kerja sehingga di hasilkan SDM yang
unggul (Anwar, 2009).
Kebijakan Merdeka Belajar - Kampus Merdeka diharapkan dapat menjadi
jawaban atas tuntutan tersebut. Kampus Merdeka merupakan wujud pembelajaran
di perguruan tinggi yang otonom dan fleksibel sehingga tercipta kultur belajar yang
inovatif, tidak mengekang, dan sesuai dengan kebutuhan mahasiswa (Direktorat
Jenderal Pendidikan Tinggi Kementerian Pendidikan dan Kebudayaan, 2020).
Pembelajaran dalam Kampus Merdeka memberikan tantangan dan kesempatan
untuk pengembangan inovasi, kreativitas, kapasitas, kepribadian, dan kebutuhan
mahasiswa, serta mengembangkan kemandirian dalam mencari dan menemukan
pengetahuan melalui kenyataan dan dinamika lapangan seperti persyaratan
kemampuan, permasalahan riil, interaksi sosial, kolaborasi, manajemen diri,
tuntutan kinerja, target dan pencapaiannya.
1
2
Terdapat banyak program Kampus merdeka yang dapat diikuti oleh

mahasiswa, salah satunya adalah Studi Independen Bersertifikat. Studi independen
dapat diartikan sebagai proses belajar di luar kampus yang akan menerapkan
pembelajaran terstruktur maupun non-terstruktur dari mentor yang berpengalaman
di perusahaan. PT. Lentera Bangsa Benderang merupakan perusahaan yang
menjalankan program-progam seperti pada program Magang dan Studi Independen
Bersertifikasi Kampus Merdeka. Melalui program Kampus Merdeka, PT. Lentera
Bangsa Benderang memiliki tujuan untuk memperdayakan semua mahasiswa agar
selalu belajar berbagai macam teknologi yang terbaru serta dapat mengikuti
perkembangan zaman yang dinamis ini. PT. Lentera Bangsa Benderang
menyediakan lima learning track yaitu Product Manager, Mobile Development,
Frontend Web Developer, Backend Web Developer, dan Fullstack Web Developer.
Program Fullstack Web Developer memiliki tujuan untuk menyiapkan
mahasiswa menjadi fullstack web software engineer, dengan tech-
stack/environment Bahasa pemrograman Javascript dalam menyelesaikan
permasalahan. Di mana mahasiswa akan memiliki kompetentesi teknis seperti Unit
Testing dan deployment, membuat halaman web, memahami logika Javascript,
mampu menerapkan Object Oriented Programming dan Document Object Model
dalam pengembangan web, merancang arsitektur dan dokumentasi Application
Programming Interface, membuat aplikasi dengan menggunakan ReactJS dan
menerapkan OAuth di dalam React dan Express, melakukan kolaborasi dengan
developer lain dalam proses sistem development, melakukan perancangan database,
melakukan iterasi proses testing dan evaluasi melalui repository Github. Selain itu,
mahasiswa akan diberikan kesempatan untuk memvalidasi kemampuan dan
pengetahuannya dengan sertifikasi Binar Academy yang telah diakui secara
internasional, sehingga hal ini akan menjadi keuntungan lebih bagi mahasiswa
untuk dapat bersaing di masa depan.
Melalui program ini, diharapkan akan membuka kesempatan luas bagi
mahasiswa untuk memperkaya dan meningkatkan wawasan serta kompetensinya di
dunia nyata sesuai dengan passion dan cita-citanya, meningkatkan kompetensi
lulusan, baik soft skills maupun hard skills, agar lebih siap dan relevan dengan
3
kebutuhan zaman, menyiapkan lulusan sebagai pemimpin masa depan bangsa yang
unggul dan berkepribadian.
1.2 Lingkup
Studi Independen Bersertifikat di PT. Lentera Bangsa Benderang
memberikan kesempatan bagi mahasiswa untuk mengikuti pembelajaran dari
facilitator ahli selama kurang lebih lima bulan. Pada program studi independen ini
mahasiswa dapat melakukan konversi SKS di universitas asal mahasiswa. 1 (satu)
SKS setara dengan 170 menit pembelajaran per minggu, dengan rincian aktivitas
terstruktur dan terjadwal selama 100 menit, dan aktivitas mandiri selama 70 menit.
Berikut adalah detail bobot SKS pada track Fullstack Web Development:
Tabel 1. 1 Bobot SKS Pada Track Full Stack Web Development
No. Course Id Course Name SKS

1 SILVER- 2
Mengetahui Pengantar Dunia Pemrograman
Chapter 0
2 SILVER- Menguasai kemampuan dasar untuk membuat 2
Chapter 1 halaman web
3 SILVER- Mampu menjalankan code dan melakukan kolaborasi 2
Chapter 2 dengan developer lain dalam proses sistem
development
4 SILVER- 2
Memahami logika-logika dasar Javascript
Chapter 3
5 GOLD- Mampu menerapkan OOP dan DOM dalam 2
Chapter 4 pengembangan web
6 GOLD- 2
Melakukan perancangan database
Chapter 5
7 GOLD- 2
Merancang arsitektur dan dokumentasi API
Chapter 6
8 GOLD- Mampu membuat tampilan web dengan menggunakan 3
Chapter 7 React JS
4
No. Course Id Course Name SKS

9 GOLD- 3
Melakukan unit testing dan deployment
Chapter 8
Total 20
Sumber :
https://docs.google.com/spreadsheets/d/15RreNKx93ef6LBY8ghOi5uXjyKarp3Io
U3Eex9RpNb0/edit#gid=2136582943
1.3 Tujuan
Tujuan dari program kegiatan Studi Independen Bersertifikat PT. Lentera
Bangsa Benderang ini adalah agar mahasiswa mampu memahami konsep
perancangan sistem informasi berbasis web menggunakan tech-stack Javascript;
memahami cara bekerja dengan data relasional dan non-relasional; memahami
prinsip dasar Object Oriented Programming dan Software Design Pattern,
asynchronous programming, menerapkan Authentication-Authorization,
menerapkan RESTful API ; mampu menggunakan Object Relation Mapping;
berkolaborasi dan mengendalikan versi menggunakan GIT; serta memahami Server
Side Rendering, Unit Testing & Test Driven Development, Deployment, Continous
Integration & Continous Deployment. Oleh karena itu, program experiential
learning yang otonom dan fleksibel ini diharapkan dapat memfasilitasi mahasiswa
dalam mengembangkan potensinya sesuai dengan passion dan bakatnya serta dapat
mengimplementasikan ilmu pengetahuan yang telah diterima. PT. Lentera Bangsa
Benderang juga memfasilitasi mahasiswa dengan sertifikasi Binar Academy
bertaraf internasional yang berguna sebagai jaminan bahwa mahasiswa telah
memiliki keahlian dan pengetahuan yang dibutuhkan di industri terkait.
1.4 Lokasi dan Waktu Penelitian

Kegiatan kerja praktik ini dilakukan pada :
Tempat : PT. Lentera Bangsa Benderang
Waktu : 01 Agustus – 31 Desember 2022
5
Jam Kerja : 19.00 – 22.00 WIB (Work from Home)
1.5 Sistematika Penulisan

Sistematika penulisan yang penulis lakukan dalam pembuatan laporan ini
antara lain sebagai berikut :
BAB I PENDAHULUAN
Dalam bab ini membahas mengenai latar belakang, lingkup, tujuan,
lokasi dan waktu penelitian dan sistematika penulisan.
BAB II LANDASAN TEORI

Bagian ini memuat uraian mengenai teori-teori yang mendukung
sistem analisis dan perancangan sistem informasi E-Flight Ticket Apps.
BAB III ANALISIS

Bab ini berisi mengenai pembahasan yang meliputi tinjauan
perusahaan dan analisis kebutuhan sistem.
BAB IV PERANCANGAN
Bab ini memuat tentang rancangan sistem menggunakan
menggunakan Unified Modelling Language (UML), yaitu use case diagram
dan activity diagram.
BAB V PENUTUP
Menguraikan kesimpulan dari kerja praktik ini dan saran-saran
pengembangan sistem yang dapat dilakukan.
BAB II
LANDASAN TEORI
2.1 Pengertian Analisis

Berikut beberapa pengertian dari analisis menurut pendapat para ahli :
• Berdasarkan Kamus Besar Bahasa Indonesia, analisis adalah penyelidikan
terhadap suatu peristiwa (karangan, perbuatan, dan sebagainya) untuk
mengetahui keadaasn sebenarnya (sebab, duduk perkara, dan sebagainya).
• Analisis adalah membaca teks yang melokalisasikan berbagai tanda dan
menempatkan tanda-tanda tersebut dalam interaksi yang dinamis dan pesan-
pesan yang disampaikan (Schreiter, 1992).
• Analisis adalah melepas atau mengurai sesuatu dengan menggunakan
metode tertentu. Berikut adalah beberapa pengertian analisis menurut para
ahli (Narimawati, Sarwono, & Munandar, 2020).
2.2 Analisis Sistem

Analisis sistem adalah suatu sistem atau metode pemecahan masalah dengan
cara menguraikan sistem ke dalam komponen-komponen pembentuknya untuk
mengetahui bagaimana komponen-komponen tersebut bekerja dan saling
berinteraksi satu sama lain untuk mencapai tujuan sistem. Menurut ahli, pengertian
analisis sistem adalah :
a. Analisis sistem informasi adalah penguraian dari suatu sistem informasi
yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk
mengidentifikasikan dan mengevaluasi permasalahan, kesempatan,
hambatan yang terjadi dan kebutuhan yang diharapkan sehingga dapat
diusulkan perbaikan (Jogiyanto, 1995).
b. Analisis sistem adalah suatu proses mengumpulkan dan
menginterpretasikan kenyataan-kenyataan yang ada, mendiagnosa
persoalan dan menggunakan keduanya untuk memperbaiki sistem
(Kristanto, 2003).
6
7
2.2.1 Tujuan Analisa Sistem

Tujuan sistem informasi yakni untuk merancang sistem baru
maupun menyempurnakan sistem yang sudah ada sebelumnya. Berikut ini,
tujuan dari analisis sistem diantaranya yakni :
• Kita dapat Membuat keputusan jika sistem saat ini bermasalah ataupun
juga tidak berfungsi dengan baik & hasil analisisnya akan digunakan
sebagai dasar untuk memperbaiki sistem.
• Mengetahui ruang lingkup pekerjaan yang akan dapat ditandatangani
• Mengidentifikasi masalah atau mencari pemecahan masalahnya
• Mempelajari sistem yang sedang berjalan saat ini.
• Memberikan pelayanan kebutuhan informasi kepada fungsi manajerial

di dalam pengendalian pelaksanaan kegiatan operasional perusahaan
• Membantu para pengambil keputusan
• Mengevaluasi sistem yang telah ada
• Merumuskan tujuan yang ingin dicapai berupa pengolahan data maupun

pembuatan laporan baru
• Menyusun suatu tahap rencana pengembangan sistem
2.2.2 Langkah Analisa Sistem

Analisa sistem yang akan dilakukan dalam mendefinisikan proyek-
proyek sistem yang akan dibesarkan di tahap perencanaan sistem.
Perbedaannya terletak pada ruang-ruang lingkup tugasnya. Di tahapn ini,
penelitian yang akan dilakukan oleh analisis sistem adalah penelitian terinci,
sedang di perencanaan sistem sifatnya hanya penelitian pendahuluan.
Di dalam tahap analisa sistem terdapat beberapa langkah dasar yang
harus dilakukan oleh analis sistem, sebagai berikut yakni:
1. Identify, merupakan mengidentifikasikan masalah
8
2. Understand, merupakan memahami kerja dari sistem yang ada

3. Analyze, merupakan menganalisis sistem
4. Report, merupakan membuat laporan hasil analisis
2.3 Perancangan Frontend

Berkaitan dengan proses web development dan pemrograman, frontend
adalah apa yang pengguna lihat pada tampilan sebuah website. Sedangkan backend
adalah sistem di balik layar yang mengolah database dan juga server. Bagian
frontend sering pula disebut sebagai “client-side” dan backend disebut dengan
“server-side”. Orang yang mengelola frontend disebut dengan frontend developer,
dari segi peran, seorang frontend developer bertugas mengembangkan tampilan
situs dengan menggunakan bahasa pemrograman seperti CSS (Cascading Style
Sheets), HTML (Hypertext Markup Language), dan Javascript.
Seorang frontend developer bertanggung jawab atas komposisi tampilan
sebuah website dan aplikasi. Mulai dari isi konten, warna-jenis-ukuran font,
gambar, serta tombol-tombol yang tersedia pada halaman antarmuka harus
membuat pengguna merasa nyaman melihat sistem dan berinteraksi di dalamnya.
2.3.1 Unified Model Language (UML)

UML (Unified Modelling Language) adalah suatu metode dalam
pemodelan secara visual yang digunakan sebagai sarana perancangan sistem
berorientasi objek. Awal mulanya, UML diciptakan oleh Object
Management Group dengan versi awal 1.0 pada bulan Januari 1997. UML
juga dapat didefinisikan sebagai suatu sistem standar visualisasi,
perancangan, dan pendokumentasian sistem, atau dikenal juga sebagai
sistem standar penulisan blueprint sebuah software. Tujuan dan fungsi UML
adalah :
1. Dapat memberikan sistem pemodelan visual atau gambar kepada
para pengguna dari berbagai macam pemrograman maupun proses umum
rekayasa.
9
2. Menyatukan informasi-informasi terbaik yang ada dalam

pemodelan.
3. Memberikan suatu gambaran model atau sebagai sistem pemodelan
visual yang ekspresif dalam pengembangan sistem.
4. Tidak hanya menggambarkan model sistem software saja, namun
dapat memodelkan sistem berorientasi objek.
5. Mempermudah pengguna untuk membaca suatu sistem.
6. Berguna sebagai blueprint, jelas ini nantinya menjelaskan
informasi yang lebih detail dalam perancangan berupa coding suatu
program.
UML memiliki berbagai macam diagram yang dibagi secara

kategori menjadi dua yakni structural dan behaviour diagram :
Gambar 2. 1
Kategori Diagram UML
Diagram yang digunakan untuk perancangan frontend adalah

activity diagram, sequence diagram, use case diagram, deployment
diagram dan component diagram.
2.3.2 Tech-stack Frontend
Tech-stack adalah kombinasi teknologi yang digunakan suatu
perusahaan atau programmer untuk membangun dan menjalankan aplikasi
10
atau proyek. Tech-stack biasanya terdiri dari bahasa pemrograman,

kerangka kerja, database, alat frontend, alat backend dan layanan yang
terhubung melalui API. Pada dasarnya, seorang frontend developer sudah
pasti menggunakan HTML, CSS dan Javascript dalam perancangan
antarmuka pengguna suatu sistem informasi. Selebihnya adalah
library/framework untuk menerapkan kaidah separation of concern dalam
perancangan antarmuka pengguna untuk mencapai skalabilitas sistem dan
menjaga struktur proyek frontend agar dapat berkolaborasi dengan
developer lainnya.
2.3.3 React Library

React (React.JS atau ReactJS) adalah Javascript library yang
bersifat gratis dan open-source untuk merancang antarmuka pengguna
berdasarkan komponen. React dikelola oleh perusahaan bernama Meta dan
komunitas React yang bersifat terbuka dan merupakan salah satu pilihan
dari sekian banyak Javascript library untuk membuat single-page
application, mobile atau server-rendered application dengan bantuan
framework seperti Next.js.
React menerapkan konsep state management kemudian merender
state tersebut ke dalam DOM. Secara sederhana, dengan menggunakan
React kita dapat merancang antarmuka pengguna seperti merancang sebuah
blok lego dikarenakan prinsip loosely coupled yang diterapkan React
sehingga satu komponen tidak terikat dengan komponen lainnya. Dari
komponen-komponen tersebut, kita dapat menyatukannya sehingga
menjadi kesatuan antarmuka pengguna yang utuh dan fully function bagi
pengguna untuk berinteraksi dengan sistem informasi.
2.3.4 Single Page Application

Secara default, sistem informasi berbasis web menggunakan HTTP
dalam melakukan transaksi data ke server (HTTP Request), begitupun
pengiriman antarmuka sistem dari server ke client (HTTP Response)
11
sehingga browser dapat merender tampilan kepada pengguna. Setiap kali

pengguna melakukan request, transaksi permintaan data akan terkirim ke
server untuk mengambil tampilan yang diminta dan menyebabkan browser
reload pada tampilan antarmuka pengguna saat response tersebut sampai
dan menyebabkan berubahnya tampilan.
Dengan kondisi tersebut, menyebabkan redudansi tampilan dan
pemuatan halaman dari awal secara berulang-ulang sehingga menyebabkan
user experience yang kurang baik bagi pengunjung aplikasi. Menggunakan
Javascript, hal tersebut dapat terhindari dengan kemampuannya
menggunakan built-in function httpXMLRequest atau fetch untuk
mendapatkan data secara asynchronous ke server Namun, dalam beberapa
skenario, penggunaan Javascript saja masih memerlukan browser reload
seperti pindah halaman/activity.
Untuk menangani kendala tersebut, konsep Single-Page Application
(SPA) memuat hanya satu berkas HTML pada request pertama, kemudian
memutakhirkan bagian/section sesuai dengan interaksi antarmuka
pengguna. Konsep ini didukung oleh teknologi client-side routing yang
memungkinkan client tidak perlu browser reload setiap kali melakukan
request ke server, teknologi tersebut tersedia di berbagai Javascript library
salah satunya React. Pendekatan Single-Page Application menghasilkan
performa yang baik dan pengalaman pengguna yang lebih dinamis.
2.3.5 Separation of Concerns

Separation of concerns adalah prinsip/design pattern dalam
software architecture untuk memisahkan aplikasi menjadi bagian/unit
tertentu berdasarkan tugasnya. Tujuan dari separation of concerns adalah
untuk membangun sistem yang tertata dengan baik dimana setiap bagiannya
memiliki tugas yang tidak bercampur antar bagian/unit aplikasi satu sama
lain dan dapat ditingkatkan skalabilitasnya apabila ada perubahan atau
pengembangan (Reade, 1989). Terdapat beberapa jenis Separation of
Concerns : Horizontal Separation, Vertical Separation, Data Separation
12
dan Aspect Separation. Pada perancangan frontend kali ini, penulis

menerapkan Horizontal Separation of Concerns yang memisahkan
bagian/unit aplikasi menjadi logical layer berdasarkan fungsi/kegunaannya.
Dengan mengabstraksikan kompleksitas aplikasi dan software architecture,
kita dapat fokus dan merencanakan strategi untuk mencapai tingkatan
pemisahan untuk meningkatkan kualitas pengelolaan struktur proyek
frontend. Berikut contoh dari Horizontal separation of concerns :
Gambar 2. 2
Contoh Horizontal Separation of Concerns
Pada proyek ini, penulis hanya menerapkan empat tingkatan saja,
yakni layer Presentation, Frameworks, Logic dan Data Access.
2.3.6 Atomic Design

Atomic Design adalah pendekatan desain yang dipopulerkan oleh
Brad Frost, yang memecah elemen aplikasi web menjadi bagian-bagian
modular hingga yang paling kecil. Elemen-elemen tadi dibagi menjadi
beberapa level atau hirarki: atom, molekul, organisme, template, dan
13
laman.Tujuannya adalah untuk mereduksi adanya kode berulang, mereduksi

waktu setup, dan meningkatkan konsistensi antar komponen dan tampilan.
Sistem ini menggunakan pattern library sebagai repository dari komponen-
komponen web yang bisa diimport (importable) dan dapat digunakan
kembali (reusable).
Gambar 2. 3
Atomic Design
Dengan pattern ini,biasanya waktu yang dibutuhkan memang lebih
panjang daripada pendekatan desain laman (pages) biasa. Namun, metode
ini lebih kolaboratif dan menjamin reusability dan maintainability untuk
jangka panjang. Dalam prakteknya, komponen-komponen web dipecah
menjadi bagian-bagian yang lebih kecil (modular) dan dikelompokkan
sesuai level dan hirarki. Kelebihan yang ditawarkan oleh metode Atomic
Design, adalah kemampuan untuk pindah dari konsep yang abstrak kepada
hal yang konkrit. Selain itu, ada pemisahan yang jelas antara struktur sebuah
website dengan konten.
14
2.4 PT. Lentera Bangsa Benderang

PT. Lentera Bangsa Benderang merupakan merupakan pelopor startup
edtech yang fokus pada pengembangan skill dan talenta digital dengan
meningkatkan pengalaman belajar dengan brand Binar Academy. Berikut
merupakan struktur organisasi dari PT. Lentera Bangsa Benderang:
Gambar 2. 4
Struktur Organisasi PT. Lentera Bangsa Benderang
2.5 Lingkup Pekerjaan

Lingkup pekerjaan dari peserta Fullstack Web Development adalah
mengikuti kelas baik sinkron maupun asinkron, mengerjakan tugas asinkron sesuai
jadwal yang telah ditentukan, mengerjakan ujian dan sertifikasi, dan yang terakhir
adalah menyelesaikan project akhir. Kemudian terdapat fasilitator yang bertugas
untuk mendampingi kurang lebih 26 peserta dalam satu kelas. Terdapat dua jenis
fasilitator, yaitu:
1. Fasilitator
Fasilitator memiliki tugas untuk menyampaikan materi Fullstack Web
Development, memberikan penilaian pada tugas-tugas yang telah dikerjakan
15
peserta, membimbing dan mengarahkan peserta saat pelaksanaan project

akhir, serta memberikan sesi konsultasi bagi peserta.
2. Academic Affairs & Operation (AAO)

AAO memiliki tugas untuk mengkoordinasikan peserta untuk mengikuti
kelas, mengkoordinir ujian dan sertifikasi, membantu tugas mentor, dan
mengarahkan peserta.
2.6 Deskripsi Pekerjaan

Program pembelajaran dari PT. Lentera Bangsa Benderang memberi wadah
dan kesempatan bagi para mahasiswa baik yang sejurusan maupun lintas jurusan
untuk merasakan pembelajaran sesuai dengan kurikulum dari Binar Academy.
Pembelajaran berlangsung selama kurang lebih lima bulan terhitung sejak tanggal
1 Agustus 2022 sampai dengan 31 Desember 2022. Peserta/mahasiswa dibagi
menjadi beberapa kelas sesuai dengan learning track yang diambil. Pada Track
Fullstack Web Development, peserta dibagi menjadi empat kelas yakni FSW-1,
FSW-2, FSW-3, dan FSW-4 yang pada masing-masing kelasnya di dampingi oleh
Fasilitator dan AAO yang akan memandu pembelajaran dan memberikan materi
serta memberikan layanan konsultasi bagi mahasiswa.
Kegiatan pembelajaran di track Fullstack Web Development dilakukan
secara sinkron dan asinkron. Untuk pembelajaran asinkron dilaksanakan melalui
Google Classroom, di mana pada web tersebut sudah tersedia bebagai materi dalam
bentuk PDF yang dapat diunduh dan dipelajari secara mandiri, panduan praktek,
dan tugas dari topik yang akan di ambil. Selanjutnya pada akhir topik akan terdapat
rangkuman dan challenge. Mahasiswa diwajibkan mengerjakan challenge tersebut
untuk dapat melanjutkan ke chapter berikutnya. Pembelajaran asinkron tersebut
memiki durasi 500 menit per harinya. Kemudian untuk pembelajaran sinkron
dilaksanakan pada platform Zoom. Pertemuan sinkron memiliki durasi 180 menit
atau tiga jam. Pada pertemuan sinkron, mentor akan memberikan materi sesuai
dengan slide yang telah diberikan dari pihak Binar Academy. Pada platform Zoom,
mahasiswa hanya akan melihat dua room, yaitu main room dan breakout room.
16
Main room difungsikan sebagai room utama untuk seluruh peserta mengikut
pemaparan materi secara umum dari fasilitator dan juga digunakan untuk
menyampaikan informasi-informasi penting dari PT. Lentera Bangsa Benderang
dan Binar Academy seperti sertifikasi, weekly feedback, challenge submission dan
sebagainya. Sedangkan untuk room breakout akan dinamai dengan urutan nomor
kelompok yang telah ditentukan oleh fasilitator. Breakout room ini difungsikan
sebagai ruang pelaksanaan kelas virtual sinkron, proses diskusi di dalam kelas,
pengerjaan daily task dan sebagainya.
Topik pembelajaran pada setiap track akan berbeda-beda dan mungkin juga
beberapa track mempelajari topik yang sama, ini tergantung kurikulum masing-
masing track. Untuk pembelajaran pada track Fullstack Web Development akan
berfokus pada sembilan chapter berikut:
1. Mengetahui Pengantar Dunia Pemrograman
Pada topik ini mahasiswa mempelajari sejarah aplikasi melalui studi kasus
Google dan Apple, memahami perbedaan antar aplikasi, memahami cara
bisnis internet yang menghasilkan pendapatan, memahami konsep BE,FE
dan REST API secara sederhana, memahami perbedaan project dan
product, SCRUM, Identifikasi SDLC, jenis profesi dan perannya dalam
pembuatan aplikasi, memahami MVP (Minimum Viable Product),
mengidentifikasi tech-stack dari sisi server dan client dan memahami tech-
stack database.
2. Menguasai Kemampuan Dasar untuk Membuat Halaman Web

Mengenal area kerja dari fullstack web developer, memahami skill apa saja
yang perlu dipersiapkan sebagai fullstack web developer, mengenal tools
apa saja yang dapat digunakan untuk mendukung kerja dari FSW developer,
memahami konsep HTML dan kaitannya dengan Web Design, memahami
struktur dan entitas HTML, memahami cara penulisan kode HTML dengan
terstruktur, memahami penggunaan hyperlink di dalam dokumen HTML
untuk menampilkan halaman lain, memahami pembuatan dokumen dalam
HTML, memahami cara debugging untuk dokumen HTML, memahami
17
bagaimana cara kerja CSS dalam web design, mampu membuat syntax CSS
kedalam code, memahami aturan CSS selector, mengetahui value pada web
development, mengetahui box models pada web development, memahami
prinsip-prinsip debugging CSS, memahami macam-macam framework
CSS.
3. Mampu Menjalankan Code dan Melakukan Kolaborasi dengan Developer

Lain dalam Proses Sistem Development
Memahami konsep Terminal dan Shell serta jenis-jenisnya, memahami cara

penerapan navigasi directory untuk mengatur file dari terminal, memahami
string path absolute dan relative serta kaitannya dengan Shell, mengetahui
cara mengatur dan menavigasi directory, memahami konsep IDE dan cara
penerapannya, memahami konsep dan fungsi GIT sebagai version control,
memahami tahap dan cara penggunaan GIT untuk menyimpan folder
project, mengetahui cara instalasi, inisialisasi GIT, dan commit pada folder
project, memahami cara remote repository bekerja, memahami konsep
Branching untuk berkolaborasi, memahami commit behind untuk
menyelesaikan konflik pada Git, memahami Web Layout dan elemen dasar
website, mengetahui macam-macam teknik layouting dan cara
penerapannya, mampu menerapkan teknik slicing sesuai dengan design,
menulis kode HTML dan CSS terstruktur sesuai standar, memahami konsep
Responsive Design pada desain website, menentukan query dengan
menggunakan Media Query, memahami penggunaan unit absolute dan
relative, menerapkan Responsive Design di website pada layar yang
berbeda-beda.
4. Memahami Logika-Logika Javascript

Memahami konsep Javascript, memahami cara penerapan syntax di
Javascript, memahami pembuatan penjumlahan antara variabel yang satu
dengan variabel yang lain, memahami pembuatan variabel dengan berbagai
macam tipe data, memahami konsep dan aspek-aspek dari Operators,
membedakan dua atau lebih statement (if) sehingga mendapatkan nilai
18
boolean (true/false), mampu memetakan logika algoritma kedalam suatu

flowchart, mampu memetakan logika algoritma kedalam bentuk
pseudocode, memahami cara-cara yang dapat digunakan dalam
pengambilan keputusan (if-else, operator(""?), switch case, memahami
cara-cara yang dapat digunakan dalam alur perulangan (looping) dan
menerapkan method object serta string interpolation.
5. Mampu Menerapkan OOP dan DOM dalam Pengembangan Web

Memahami konsep OOP dalam pemrograman, membuat Class dalam OOP,
melakukan mapping data yang sudah didefinisikan dalam array,
menerapkan encapsulation untuk meningkatkan keamanan data,
mengimplementasikan kode dengan menggunakan konsep abstraksi,
memahami konsep DOM, mampu mengimplementasikan DOM
manipulation pada Javascript, memahami konsep Web Server dan Node.JS
sebagai runtime environment, mampu melakukan instalasi Node.js dan
package manager dengan menggunakan NPM atau Yarn, memahami
konsep module dan jenis-jenisnya, mampu membuat project sederhana
menggunakan NodeJS, memahami konsep HTTP dan caranya bekerja,
membuat server menggunakan HTML statis, membuat server menggunakan
JSON statis.
6. Melakukan Perancangan Database

Memahami konsep Express JS dan cara kerjanya, menginstal Express JS
menggunakan NPM atau Yarn, membuat ‘Hello World’ di Aplikasi dengan
menggunakan Express JS, melakukan Routing melalui aplikasi yang dibuat,
memahami macam-macam Middleware dan cara kerjanya, menerapkan
View Engine untuk membuat tampilan website, mengenal Desain API
(REST API), melakukan request ke Endpoint dengan menggunakan
Postman, memahami metode-metode HTTP, membuat Restful API
menggunakan express, memahami konsep Database dan jenis-jenisnya,
mengenal jenis-jenis DBMS dan fungsinya, membandingkan antara
MongoDB dengan SQL, melakukan operasi query dalam konsol DBMS
19
SQL pada PostgreSQL, memahami konsep dan fungsi ERD, mampu

membuat ERD, menerapkan perintah query untuk DDL, menerapkan
perintah query untuk DML, memahami konsep ORM, mampu melakukan
install ORM dengan Sequelize di dalam aplikasi Node Js, memahami cara
penggunaan model dan metodenya, membuat basic CRUD dengan
menggunakan HTTP request.
7. Merancang Arsitektur dan Dokumentasi API

Memahami konsep design pattern, menerapkan dan merancang arsitektur
project dengan design pattern, mampu menggunakan MVC (Model View
Controller) pada project yang besifat monolith, membuat sebuah aplikasi
dengan Service Repository Pattern untuk RESTful API, memahami
perbedaan microservice vs monolith, beserta kelebihan dan kekurangannya,
membuat HTTP Server dengan konsep microservice, memahami konsep
Asynchronous Process, mampu menggunakan callback dan beberapa
metode yang berfungsi sebagai callback, mendefinisikan promise
menggunakan operator new dengan Class Promise, menggunakan pasangan
operators untuk mendeklarasikan dan menjalankan fungsi asynchronous
berupa promise, membuat async function (Promise), menjalankan promise
menggunakan Async Await, memahami konsep authentication, mampu
menerapkan authentication dengan encryption, menggunakan encryption
untuk melakukan enkripsi terhadap password user, memahami konsep
authorization, mengimplementasikan Session Based Authentication
menggunakan Express Session, membuat sebuah middleware untuk
mengautorisasi user melalui session menggunakan Express Session,
mengimplementasi fitur login yang membuat JWT sebagai response ketika
berhasil login, membuat Middleware untuk mengautorisasi request yang
menggunakan Token Based Authentication, memahami konsep
dokumentasi API, memahami struktur dan kriteria dokumentasi API,
memahami cara kerja swagger untuk membuat dokumentasi API, membuat
dokumentasi API berupa CRUD dan authentication, mengintegrasi
20
dokumentasi API dengan project Express.JS, membuat Mock API

berdasarkan Open API Specs yang sudah dibuat, memahami fungsi dari
Mock API dalam pengembangan sebuah website.
8. Mampu Membuat Tampilan Web dengan Menggunakan ReactJS

Memahami konsep React JS (SPA), membuat Component, State dan
Properti pada React, styling di ReactJS, menggunakan UI framework,
membuat Routing, fetch dan proses data, membuat HTTP Request, frontend
dan backend file processing, frontend dan backend Authentication, backend
Middleware, memahami Oauth, penerapan Google & facebook Oauth, State
Management, Redux, Implementasi React + Redux, Redux thunk
(Middleware).
9. Melakukan Unit Testing dan Deployment

Pengenalan Web Socket, implementasi Socket.io, memahami Server Side
Rendering, pengenalan NEXT.JS, Unit Testing menggunakan ESLint, Unit
testing & TDD (Test Driven Development), Integration testing,
Deployment, CI/CD, Implementasi CI/CD.
Pada akhir setiap topik, mahasiswa akan melaksanakan Assessment dalam

bentuk Challenge untuk mengukur seberapa paham mahasiswa terhadap materi-
materi tersebut. Pada penghujung program, mahasiswa wajib menyelesaikan final
project secara berkelompok sebagai bagian dari implementasi materi-materi yang
telah diberikan. Seluruh kelompok diberikan permasalahan dan brief yang sama dan
dibebaskan untuk mencari solusi cerdas dengan kriteria mengimplementasikan
MVP (Minimum Viable Product) yang telah ditentukan Binar Academy melalui
project yang dibuat.
2.7 Jadwal Kerja

Kegiatan pembelajaran dilakukan tujuh kali dalam seminggu dengan rincian
tiga kali pertemuan sinkron dan empat kali kegiatan asinkron. Namun, terkadang
21
jadwal pembelajaran juga mengalami perubahan, misalnya jika ada hari libur
keagamaan, fasilitator yang berhalangan hadir, dan sebagainya. Sehingga, untuk
jadwal pembelajaran sepenuhnya mengikuti kesepakatan dari fasilitator, AAO dan
mahasiswa. Kemudian mahasiswa wajib membuat logbook harian yang berisi
kegiatan yang telah dilakukan pada hari tersebut, dan mengunggahnya ke laman
Kampus Merdeka. Berikut merupakan jadwal pembelajaran sinkron, asinkron,
challenge dan sertifikasi pada kelas FSW-4.
BAB III
ANALISIS DAN TINJAUAN PERMASALAHAN
3.1 Pendahuluan dan Permasalahan

Final project ini ditujukan untuk mengasah kemampuan pengembangan,
dan mengaplikasikan pengetahuan yang telah dipelajari secara keseluruhan mulai
dari chapter 0 - 8. Mahasiswa akan mengerjakan project dalam kelompok,
mahasiswa juga akan mengimplementasikan Metode Scrum yang sebelumnya
sudah dipelajari.
Dalam menjalankan project ini, mahasiswa akan bergabung dengan teman
lainnya yang ada di kelas FSW dan Android. Dari komposisi tim, mahasiswa baik
dari kelas FSW dan Android bisa menyepakati pembagian job-desc berdasarkan
kriteria SCRUM, yaitu sebagai Product Owner dan Scrum Master. Khusus untuk
FSW, tim akan dibagi 2 peran yaitu Tim Dev (Frontend) dan Tim Dev (Backend).
Setiap kelompok memiliki waktu selama 3 sprint (6 minggu) untuk membuat
sebuah produk digital, berupa aplikasi web berdasarkan fitur (MVP) dan
persyaratan teknis yang sudah ditentukan.
Tema final project berjudul E-Flight Ticket Platform, dengan benchmark
Garuda Indonesia, setiap kelompok dibebaskan membuat nama aplikasinya
masing-masing. Secara garis besar, platform ini merupakan tempat beli dan booking
tiket penerbangan secara online, baik one way (sekali penerbangan) dan round trip
(pulang pergi). Platform ini membuka dan menyediakan berbagai jenis
penerbangan domestik dan mancanegara. Flow/alur platform dibebaskan
berdasarkan kreasi tim final project. Terdapat dua peran User yaitu berperan sebagai
admin dan login sebagai buyer. Buyer dapat mengirimkan dan menerima bukti hasil
transaksi melalui platform ini.
Fitur MVP (Minimum Viable Product) yang wajib ada adalah sebagai
berikut :
1. Registrasi User
22
23
2. Implementasi In App Notification (Contoh:Fitur lonceng di dalam

notifikasi, bukan push notifikasi)
3. Profile User
4. Histori transaksi (contoh:List Booking, Check in, dan Travel Documents
berupa Visa, Passport, Izin Tinggal/Resident Permit).
Terdapat dua role pengguna dalam sistem yakni Buyer dan Admin, berikut
rincian masing-masing role :
1. Buyer
- Dua kategori pemberangkatan: One-Way dan Round Trip (pulang-pergi)
- Tujuan pemberangkatan (From dan To)
- Waktu pemberangkatan, dan waktu pulang (jika memilih round trip)
- Listing airport (Nama airport, kode negara, dan lokasi)
- Wishlist user di data lokal
2. Admin
- Admin punya page sendiri (List customer yang booking, membeli tiket,
jadwal pemberangkatan, histori pembayaran)
- Admin bisa CRUD item listing (gambar, deskripsi, harga lokasi)
- Item dibuat 2 kategori: pulang pergi, satu arah
Terdapat requirement yang perlu dipenuhi secara teknis dari sisi backend
maupun frontend, berikut rinciannya :
1. Backend
- Design : RESTful API
- Design Pattern : MVC/Service Repository Pattern
- Testing : Melakukan Unit Testing Menggunakan Jest
- Deployment : Railway.app & CI/CD (Github Action)
- Output Deliverable : API yang bisa diakses secara public
2. Frontend
- Design : Responsive Design
- Design Pattern : Membuat component sesuai dengan design sistem
24
- Testing : Membuat unit dan integration test

- Deployment : Railway.app & CI/CD (Github Action)
- Output Deliverable : Website yang bisa diakses secara public dan
responsive sampai mobile.
3.2 Proses dan Perancangan Solusi

Berdasarkan permasalahan yang ada, penulis merancang sebuah sistem
informasi yang dapat memudahkan pengguna dalam menemukan tiket. Langkah
pertama yang penulis lakukan adalah membuat ERD (Entity Relationship Diagram)
untuk memetakan relasi data dan penetapan kardinalitas data antar entitas. ERD
merupakan suatu proses pembuatan diagram hasil penentuan relasi antar entitas
yang berkaitan dengan data yang digunakan. Sederhananya kita menentukan
kardinalitas data dari entitas yang terlibat dari satu sistem informasi ini. Penulis
menggunakan bantuan dari draw.io seperti gambar dibawah ini :
Gambar 3. 1
Desain ERD
25
Setelah normalisasi database selesai dilanjutkan ke tahap pemograman.

Penulis menerapkan sistem MVC (model view controller) yang dimana penulis
memisahkan antara model, view dan controller dari suatu sistem. MVC ini
merupakan design pattern pemrograman yang menerapkan separation of concern
antara data, logic sistem dan routing data pada setiap fungsi aplikasi. Penulis
menggunakan Express.JS sebagai backend dan PostgresSQL sebagai database
dengan dukungan ORM Sequelize :
Gambar 3. 2
Backend Directory
Untuk perancangan frontend, penulis menggunakan ReactJS dengan

dukungan Axios untuk request-responses handler dan Redux untuk state
management :
26
Gambar 3. 3
Frontend Directory
Mekanisme penggunaan aplikasi ini, user dapat mencari tiket tanpa harus
login terlebih dahulu, namun apabila user hendak memesan dan memilih tiket,
maka user diharuskan untuk login agar data pembelian/pemesanan tiket dapat
ditangani oleh sistem.
Gambar 3. 4
Alur Sistem Booking Tiket
3.3 Perancangan UML

Dari sekian banyak pilihan diagram yang tersedia, pada kasus perancangan
frontend yang diperlukan hanya interaksi dan efek yang dihasilkan oleh interaksi
tersebut pada sistem, maka penulis hanya akan menggunakan Use Case Diagram
dan Activity Diagram.
27
3.3.1 Use Case Diagram
Gambar 3. 5
Use Case Diagram Papierflieger
3.3.2 Deskripsi Use Case

Tabel 3. 1 Use Case Registration
Nama Use Case : Registration

Aktor : Buyer
Deskripsi : Proses registrasi aktor menjadi pengguna/buyer sistem
Papierflieger
Pre Condition : Berhasil masuk ke halaman aplikasi Papierflieger
28
Post Condition : Aktor dapat login menggunakan email/username yang

didaftarkan kedalam sistem
Alur Berjalannya Use-Case
Aksi Aktor Reaksi Sistem
1. Aktor mengeklik tombol 2. Sistem akan memunculkan
Daftar/Masuk komponen modal dalam bentuk card
dan menampilkan form email beserta
password dan hyperlink text
bertuliskan “Daftar”.
3. Aktor mengeklik tombol “Daftar” 4. Sistem akan mengarahkan aktor ke
pada komponen modal halaman Registrasi untuk pengisian
form registrasi yang terdiri dari :
Username, Alamat Email, Nama
Lengkap, Password dan component
check-box untuk menandakan
persetujuan syarat dan ketentuan
penggunaan aplikasi Papierflieger.
5. Selesai pengisian, aktor mengeklik 6. Apabila berhasil submit, maka
tombol “Submit” untuk mengirimkan sistem akan menampilkan pesan
data registrasi. “Registrasi Berhasil” melalui
komponen modal kemudian klik
tombol OK untuk menutup pesan dan
sistem akan mengarahkan aktor ke
halaman depan aplikasi dan
mengirimkan email verifikasi ke
alamat email aktor. Jika aktor registrasi
menggunakan akun yang telah
didaftarkan atau terdapat kegagalan
registrasi, sistem akan menampilkan
pesan error di atas form Registrasi.
29
7. Aktor melakukan verifikasi dengan 8. Tautan dari email akan mengarahkan

membuka email yang didaftarkan dan aktor ke halaman depan aplikasi yang
meninjau Kotak Masuk email/Spam menandakan aktor telah berhasil
untuk membuka pesan email verifikasi memverifikasi akun.
dari sistem dan mengeklik tombol
“Verification Account”.
Tabel 3. 2 Use Case AuthN & AuthZ
Nama Use Case : AuthN & AuthZ

Aktor : Buyer, Admin
Deskripsi : Proses Authentication dan Authorization pengguna
Pre Condition : Berhasil verifikasi akun melalui email setelah registrasi
Post Condition : Pengguna dengan Authorization Buyer/Admin dapat
booking, bayar dan menerima Salinan pembelian tiket
melalui email
1. Aktor mengeklik tombol 2. Sistem akan memunculkan
Daftar/Masuk komponen modal dalam bentuk card
dan menampilkan form email beserta
password untuk login.
3. Aktor mengisikan email/username 4. Jika berhasil, sistem akan
yang telah didaftarkan/diverifikasi menampilkan pesan “Login Berhasil”
melalui email dan menutup komponen modal, jika
tidak, sistem akan menampilkan pesan
“Login Gagal” dan modal login tetap
terbuka
Tabel 3. 3 Use Case Search Ticket
Nama Use Case : Search Ticket

30

Deskripsi : Proses pencarian tiket dengan parameter yang
disediakan melalui form pencarian tiket
Pre Condition : -
Post Condition : Aktor yang telah menjadi pengguna/buyer dapat
meneruskan untuk memesan tiket dengan mengeklik
tombol “Pesan” pada rincian tiket, jika aktor belum
menjadi pengguna maka sistem akan mengarahkan user
ke halaman depan.
1. Aktor mengisi form “Pencarian 2. Sistem akan menampilkan pilihan
Tiket” di halaman depan sistem, tiket yang dicari berdasarkan parameter
kemudian klik tombol Cari yang diisi pada form Pencarian Tiket,
Penerbangan apabila parameter yang dicari tidak
ada, sistem akan menampilkan pesan
:”perjalanan dari keberangkatan ke
tujuan tidak tersedia”
3. Aktor dapat mengubah parameter 4. Sistem akan menyaring tiket yang
pada form Pencarian Penerbangan di ditampilkan berdasarkan parameter
halaman Pilihan Penerbangan apabila yang aktor isikan pada halaman Pilihan
tiket penerbangan yang dicari belum Penerbangan.
sesuai.
5. Aktor dapat meninjau rincian tiket 6. Sistem akan menampilkan rincian
melalui toggle Pratinjau Rincian atau penerbangan tiket lengkap dengan jam
memesan tiket dengan mengeklik penerbangan dan titik transit apabila
tombol Pesan dengan kondisi harus ada, beserta keterangan syarat dan
login terlebih dahulu ketentuan bagasi pada penerbangan
tersebut.
31
Tabel 3. 4 Use Case Book Ticket
Nama Use Case : Book Ticket

Deskripsi : Proses pemesanan tiket penerbangan
Pre Condition : Aktor telah memilih tiket penerbangan dari halaman
Rincian Penerbangan dengan mengeklik tombol Pesan
Post Condition : Aktor dihadapkan pada halaman pembayaran tiket
melalui pilihan bank yang tersedia
1. Aktor meninjau tiket yang dipilih 2. Sistem akan menampilkan halaman
pada halaman Rincian Tiket yang pengisian data diri penumpang
menampilkan rincian tiket dari berdasarkan jumlah penumpang yang
penerbangan yang dipilih. Apabila diisi pada form pencarian penerbangan.
sesuai, aktor mengeklik tombol
Selanjutnya, jika tidak, aktor
mengeklik tombol Kembali untuk
mencari kembali tiket.
3. Aktor mengisi data diri penumpang 4. Sistem akan mengarahkan aktor ke
sejumlah penumpang yang diisi pada halaman Pembayaran Tiket dan
form pencarian tiket, lalu klik tombol menampilkan rincian biaya yang harus
Submit untuk meneruskan booking dibayar dengan pilih metode bayar.
tiket
Alternatif : - Search Ticket
Tabel 3. 5 Use Case Pay Ticket
Nama Use Case : Pay Ticket

Deskripsi : Proses pembayaran tiket penerbangan
32
Pre Condition : Aktor telah mengisi rincian penumpang dan mengeklik

tombol Submit
Post Condition : Aktor menerima konfirmasi pembayaran berhasil
melalui in-app notification dan email
1. Aktor memilih metode pembayaran 2. Sistem akan menampilkan modal
melalui bank pilihannya, kemudian dengan pesan Pembayaran telah
mengisi data rekening dan mengeklik berhasil dilakukan, dan sistem akan
tombol Bayar untuk mekonfirmasi memberikan notifikasi melalui email
pembayaran. dan in-app notification pada icon bell
3. Aktor mengeklik icon bell untuk
meninjau pemberitahuan pembayaran
berhasil.
Alternatif : - Book ticket
Tabel 3. 6 Use Case Tinjau Destinasi
Nama Use Case : Tinjau Destinasi

Deskripsi : Proses peninjau destinasi, dan aktor dapat
menambahkan destinasi tersebut menjadi Wishlist
Pre Condition : -
Post Condition : Wishlist aktor terisi destinasi yang dipilih
1. Aktor memilih destinasi dari menu 2. Sistem akan menampilkan pesan
destinasi, kemudian aktor dapat “Destinasi berhasil ditambahkan ke
mengeklik icon bookmark star untuk Wishlist”.
33
menambahkan destinasi tersebut

menjadi wishlist.
Alternatif : - Kelola Wishlist
Tabel 3. 7 Use Case Kelola Wishlist
Nama Use Case : Kelola Wishlist

Deskripsi : Pengelolaan sejumlah wishlist yang pernah
ditambahkan
Pre Condition : Sudah pernah menambahkan destinasi sebagai Wishlist
Post Condition : Koleksi wishlist yang telah dikelola
1. Aktor mengeklik menu Wishlist 2. Sistem akan mengarahkan aktor ke
pada button dropdown username. halaman pengelolaan Wishlist dan
menampilkan sejumlah data destinasi
yang telah ditambahkan ke halaman
koleksi Wishlist aktor.
3. Aktor dapat mengurangi destinasi 4. Sistem akan menghapus destinasi
pada halaman Wishlist dengan dari koleksi Wishlist aktor.
mengeklik icon bookmark cross.
Alternatif : - Tinjau Destinasi
Tabel 3. 8 Use Case Kelola Profile
Nama Use Case : Kelola Profile

Deskripsi : Pengelolaan data diri aktor melalui profile
Pre Condition : Sudah aktor sudah menjadi pengguna sistem
34
Post Condition : Data profile menjadi terisi

1. Aktor mengeklik menu Profile pada 2. Sistem akan mengarahkan aktor ke
button dropdown username. halaman pengelolaan Profile dan
menampilkan form pengisian data
profile.
3. Aktor klik tombol edit profile untuk 4. Sistem akan menampilkan pre-
mulai mengelola isi data profile, loader untuk menandakan proses
setelah aktor mengisi data profile, klik penyimpanan perubahan profile sedang
tombol simpan perubahan. berlangsung, kemudian akan
menampilkan modal dengan pesan
Update profile berhasil.
5. Aktor mengeklik tombol Oke pada
modal untuk menutup pesan tersebut.
Tabel 3. 9 Use Case Tambah Destinasi
Nama Use Case : Tambah Destinasi

Aktor : Admin
Deskripsi : Proses penambahan destinasi sebagai pilihan wishlist
buyer
Pre Condition : Aktor login menggunakan role Admin
Post Condition : Pilihan data Destinasi muncul di depan halaman
1. Aktor login menggunakan kredensial 2. Sistem menampilkan modal
Admin dengan mengeklik tombol berisikan form login
Daftar/Masuk
35
3. Aktor mengisi form login 4. Sistem akan menutup modal

menggunakan kredensial Admin, kemudian menampilkan pesan dalam
kemudian klik tombol Masuk bentuk komponen alert dengan pesan
“Login Berhasil”
5. Aktor mengeklik tombol dropdown 6. Sistem akan mengarahkan aktor ke
username pada Navbar, kemudian pilih halaman dashboard admin dan
Dashboard Admin. menampilkan halaman Dashboard
default
7. Aktor mengeklik menu Destinasi 8. Sistem mengarahkan aktor ke
pada sidebar navigation halaman Destinasi
9. Aktor mengeklik tombol Tambahkan 10. Sistem mengarahkan aktor ke
data destinasi halaman Menambahkan Data Destinasi
11. Aktor mengisi form penambahan 12. Sistem akan menampilkan modal
data Destinasi, kemudian klik tombol dengan pesan data berhasil
Tambahkan untuk simpan data ditambahkan
Destinasi yang telah diisi
Tabel 3. 10 Use Case Tambah Bandara
Nama Use Case : Tambah Bandara

Aktor : Admin
Deskripsi : Proses penambahan bandara sebagai data master pada
pilihan penerbangan
Post Condition : Data bandara akan muncul sebagai rincian dari
penerbangan yang ditetapkan
36

Daftar/Masuk
default
7. Aktor mengeklik menu Bandara 8. Sistem mengarahkan aktor ke
pada sidebar navigation halaman Bandara
data bandara halaman Menambahkan Data Bandara
data Bandara, kemudian klik tombol dengan pesan data berhasil
Tambahkan untuk simpan data ditambahkan
Bandara yang telah diisi
Tabel 3. 11 Use Case Tambah Pesawat
Nama Use Case : Tambah Pesawat

Aktor : Admin
Deskripsi : Proses penambahan pesawat sebagai data master pada
pilihan penerbangan
Post Condition : Data pesawat akan muncul sebagai rincian dari
37

Daftar/Masuk
default
7. Aktor mengeklik menu Pesawat 8. Sistem mengarahkan aktor ke
pada sidebar navigation halaman Pesawat
data Pesawat halaman Menambahkan Data Pesawat
data Pesawat, kemudian klik tombol dengan pesan data berhasil
Tambahkan untuk simpan data Pesawat ditambahkan
yang telah diisi
Tabel 3. 12 Use Case Tambah Tiket
Nama Use Case : Tambah Tiket

Aktor : Admin
Deskripsi : Proses penambahan tiket sebagai data master pada
pilihan penerbangan
Post Condition : Data tiket akan muncul sebagai rincian dari
38

Daftar/Masuk
default
7. Aktor mengeklik menu Tiket pada 8. Sistem mengarahkan aktor ke
sidebar navigation halaman Tiket
data Tiket halaman Menambahkan Data Tiket
data Tiket, kemudian klik tombol dengan pesan data berhasil
Tambahkan untuk simpan data Tiket ditambahkan
yang telah diisi
Tabel 3. 13 Use Case Pratinjau Transaksi
Nama Use Case : Pratinjau Transaksi

Aktor : Admin
Deskripsi : Pratinjau transaksi masuk dari buyer
Post Condition : Semua data transaksi dari buyer akan tampil
39

Daftar/Masuk
default
7. Aktor mengeklik menu Transaksi 8. Sistem mengarahkan aktor ke
pada sidebar navigation halaman Transaksi
Tabel 3. 14 Use Case Pratinjau Pengguna
Nama Use Case : Pratinjau Pengguna

Aktor : Admin
Deskripsi : Pratinjau semua pengguna sistem
Post Condition : Semua data pengguna sistem akan tampil
Daftar/Masuk
kemudian klik tombol Masuk
40
bentuk komponen alert dengan pesan

default
7. Aktor mengeklik menu Pengguna 8. Sistem mengarahkan aktor ke
pada sidebar navigation halaman Pengguna
41
3.3.3 Activity Diagram

Ref. : Tabel 3.1 Use Case Registration
Gambar 3. 6
Activity Registration
42
Gambar 3. 7
Activity AuthN & AuthZ
43
Gambar 3. 8
Search Ticket
44
Ref. : Tabel 3.4 Use Case Book Ticket
Gambar 3. 9
Book Ticket
45
Ref. : Tabel 3.4 Use Case Book Ticket
Gambar 3. 10
Book Ticket
46
Ref. : Tabel 3.5 Use Case Pay Ticket
Gambar 3. 11
Pay Ticket
47
Ref. : Tabel 3.6 Use Case Tinjau Destinasi
Gambar 3. 12
Tinjau Destinasi
48
Ref. : Tabel 3.7 Use Case Kelola Wishlist
Gambar 3. 13
Kelola Wishlist
49
Ref. : Tabel 3.8 Use Case Kelola Profile
Gambar 3. 14
Kelola Profile
50
Ref. : Tabel 3.9 Use Case Tambah Destinasi
Gambar 3. 15
Tambah Destinasi
51
Ref. : Tabel 3.10 Use Case Tambah Bandara
Gambar 3. 16
Tambah Bandara
52
Ref. : Tabel 3.11 Use Case Tambah Pesawat
Gambar 3. 17
Tambah Pesawat
53
Ref. : Tabel 3.12 Use Case Tambah Tiket
Gambar 3. 18
Tambah Tiket
54
Ref. : Tabel 3.13 Use Case Pratinjau Transaksi
Gambar 3. 19
Pratinjau Transaksi
55
Ref. : Tabel 3.14 Use Case Pratinjau Pengguna
Gambar 3. 20
Pratinjau Pengguna
56
3.4 Penerapan Separation of Concerns Pada Frontend

Pada proyek frontend, penulis menggunakan pendekatan Horizontal
Separation dalam perancangan struktur proyek frontend dengan tujuan
mempermudah pengelolaan code. Berikut adalah struktur proyek frontend :
Gambar 3. 21
Struktur Proyek Frontend
3.4.1 Presentation Layer

Presentation layer bertanggung jawab untuk menampilkan konten
atau data pada pengunjung, presentation layer para proyek frontend ini
dimulai dari public->index.html, di dalam file ini terdapat markup HTML
biasa yang memuat element HTML untuk memuat komponen React di
dalamnya, secara default, React sudah menetapkannya pada element div
dengan atribut id bernilai string root :
57
Gambar 3. 22
index.html
Elemen div dengan atribut id bernilai string root disiapkan untuk
menampilkan komponen ReactJS pada halaman HTML dikarenakan
komponen yang dibuat dalam bentuk JSX (Javascript XML) sedangkan
website menggunakan HTML untuk menampilkan data/informasi pada
browser. React memanfaatkan teknologi JSX untuk mempercepat
pengembangan elemen/komponen antarmuka menggunakan Javascript dan
HTML di waktu yang sama, berikut adalah entry point sebelum komponen
ditampilkan melalui index.html :
58
Gambar 3. 23
Entry point JSX Reactjs
Perhatikan code line 10, terdapat assignment operation berupa
ekspresi yang menghasilkan ReactDOM pada DOM HTML dengan
mengambil element berdasarkan id bernama string root pada konstanta
bernama root, kemudian konstanta root memanggil method render untuk
menampilkan elemen/komponen yang telah dibuat menggunakan JSX,
dengan demikian elemen/komponen JSX dapat ditampilkan melalui HTML.
Seluruh elemen/komponen JSX, berada pada file App.js dikarenakan
terdapat pengaturan routing berdasarkan Authentication/Authorization
pengguna sistem, penerapan routing menggunakan library React Router
Dom dan pengecekan Authentication/Authorization menggunakan state
management library Redux :
59
Gambar 3. 24
Kumpulan Elemen/Komponen JSX
Gambar 3. 25
Kumpulan Elemen/Komponen JSX yang dihimpun berdasarkan route
Setiap elemen/komponen JSX pasti menghasilkan return markup

HTML dalam bentuk JSX, dan dalam satu elemen/komponen JSX bisa
terdapat elemen/komponen JSX lainnya, pada file App.js, perhatikan code
60
line 34 terdapat deklarasi function Bernama App yang memiliki nilai

kembali berupa JSX yang terdiri dari elemen/komponen JSX lainnya yang
dimasukan ke dalam property element pada elemen Route. Perlu diketahui,
meskipun JSX memiliki karakteristik yang sama dengan HTML, terdapat
banyak perbedaan syntax/keyword/attribute dari keduanya, sebagai contoh
untuk menambahkan atribut class pada elemen HTML kita cukup
mengetikan class kemudian nilai daripada class tersebut seperti berikut :
Gambar 3. 26
Penulisan atribut class pada markup HTML
Pada JSX, penulisan atribut class menggunakan keyword className

seperti berikut :
Gambar 3. 27
Penulisan atribut className pada JSX
Perbedaan penulisan keyword ini pada akhirnya akan menghasilkan

subtansi yang sama yaitu identifikasi class yang dapat dibaca oleh markup
HTML, penggunaan keyword className pada JSX dikarenakan
perancangan elemen/komponen HTML menggunakan Javascript XML, dan
sudah menjadi konsensus secara umum bahwa naming convention pada
atribut HTML yang berkaitan dengan Javascript menggunakan
naming/coding convention salah satunya menggunakan camel case.
Setelah presentation layer siap ditampilkan, kita dapat menjalankan
proyek dalam mode development dengan cara mengetik perintah npm run
start melalui terminal pada path proyek frontend, dan proyek seketika akan
terbuka pada browser default OS seperti berikut :
61
Gambar 3. 28
Tampilan Depan Proyek Frontend
Apabila kita buka Developer Tools, setiap elemen/komponen JSX

akan dirender oleh React menjadi HTML melalui elemen yang telah
ditentukan pada index.js, dimana pada kasus ini berada di dalam element
DOM div dengan atribut id yang bernilai string root :
Gambar 3. 29
Elemen/Komponen JSX yang Telah Menjadi HTML
62
3.4.2 Framework Layer

Framework layer berfungsi untuk menjembatani elemen/komponen
berkomunikasi dengan server-side application/backend melalui
API/SDK(jika ada). Pada proyek frontend penulis menggunakan library
bernama Axios untuk menangani request dan response data pada setiap
komponen. Framework layer terdapat di folder services :
Gambar 3. 30
Penerapan Request/Response Handler
Sejatinya, informasi yang dikelola melalui website melalui

serangkaian proses transaksi bernama HTTP Request dan HTTP Response.
Disaat teknologi yang digunakan untuk merancangan website masih
menggunakan Bahasa pemrograman seperti PHP, ASP, dan Java, proses
transaksi HTTP yang berulang-ulang sehingga mengakibatkan proses
render yang tidak perlukan. Dengan konsep SPA (Single Page Application)
didukung oleh teknologi server-side programming menggunakan NodeJS,
proses render website cukup satu kali dilakukan pada awal akses, selebihnya
adalah virtualisasi antarmuka dengan dukungan DOM virtual dari Reactjs
dan penerapan fungsi HTTP Request dan Response melalui
63
elemen/komponen JSX yang telah dibuat. Struktur HTTP Request terdiri

dari :
1. Request Line (Request) : Baris pertama dari HTTP Request yang
memuat informasi HTTP method yang digunakan
(GET,POST,PUT,DELETE)
2. Headers : Berisi data dalam bentuk key-value pairs yang

menyediakan informasi tambahan seperti content-type, user agent,
preferred language yang diharapkan untuk reponse, bearer token dan lain
sebagainya.
3. Body : Berisikan data yang hendak dikirimkan sebagai request ke

server, tidak wajib setiap HTTP Request memiliki Body yang berisikan data.
Struktur HTTP Response terdiri dari :

1. Status Line : Baris pertama dari HTTP Response yang memuat
informasi versi HTTP, status code, dan status message.
2. Headers : Berisi data dalam bentuk key-value pairs yang

menyediakan informasi tambahan seperti content-type dari response body,
dan informasi panjang response body
3. Body : Berisikan data yang dikirimkan sesuai request yang masuk

ke server, tidak wajib setiap HTTP Request memiliki Body yang berisikan
data.
Bentuk HTTP Request dan Response tersebut masih digunakan

hingga kini, yang membedakan adalah cara penerapannya saja, pada proyek
frontend ini, penulis menggunakan fitur interceptor dari library Axios untuk
menambahkan secara otomatis pada setiap request yang dilakukan
elemen/komponen ketika berinteraksi dengan server untuk pengiriman
maupun permintaan data. Penggunaan interceptor diperlukan untuk
menjaga konsistensi penyediaan informasi pada request header yang
64
disepakati dengan proyek backend, informasi yang dimaksud seperti

informasi tipe data response yang diharapkan dan bearer token untuk
keperluan authorization :
Gambar 3. 31
Penggunaan Axios Interceptor untuk Header Request
Penggunaan Axios interceptor, bersamaan dengan inisialisasi objek

API sehingga dapat diterapkan pada setiap service dalam bentuk objek yang
dapat diimport menggunakan kaidah ES6 Modules :
Gambar 3. 32
Contoh Penerapan Objek API pada Salah Satu Service
3.4.3 Logic dan Data Access Layer

Logic layer berfungsi sebagai pengelolaan data yang diterima dari
HTTP Response sebelum ditampilkan pada elemen/komponen, pada proyek
frontend berkaitan dengan manajemen state dan pemutakhiran state yang
65
menerima response data dari hasil request API yang dilakukan serta
pengolahan data pada elemen/komponen. Penulis menggunakan library
React-Redux untuk pengelolaan state pada proyek frontend, cara kerja
React-Redux berawal dari inisialisasi tipe aksi dan deklarasi reducer serta
aksi reducer. Sebelum data diolah pada elemen/komponen, terlebih dahulu
konfigurasi state untuk menampung data dari hasil response.
Manajemen state pada proyek frontend terdapat di folder store, entry
point folder store adalah index.js yang berisikan penerapan middleware
thunk dengan reducer yang telah dibuat. Reducer adalah objek yang
bertugas untuk menampung kumpulan state dan memiliki initial state, state
adalah penampung data yang mendukung Reactjs untuk mengelola dan
menampilkan data dengan konsep stateful element/component, maka dapat
dikatakan bahwa reducer merupakan Data Layer Access pada proyek
frontend. Dalam Reactjs, kita dapat mengatur elemen/komponen antarmuka
bersifat stateless/statefull, stateless artinya elemen/komponen memiliki
data yang ditampilkan bersifat statik atau tidak berubah, stateful artinya
elemen/komponen yang ditampilkan bersifat dinamis dan dapat berubah
sesuai dengan kondisi yang ditetapkan tanpa harus reload/repaint DOM
element.
Middleware thunk digunakan untuk mempermudah pengelolaan
state menggunakan method dispatch tanpa harus memanggilnya secara
cascading dalam satu method. Penerapan middleware pada setiap reducer
menggunakan method applyMiddleware bawaan redux dan dihimpun
menjadi store yang terpadu menggunakan method createStore :
66
Gambar 3. 33
Konfigurasi Reducer
Setelah semua reducer terhimpun, kita dapat dengan mudah

mengakses data yang tersedia pada state masing-masing reducer melalui
elemen/komponen Provider seperti berikut :
Gambar 3. 34
Akses Data Dalam State melalui Provider
67
Dengan menggunakan elemen/komponen Provider, kita dapat

mengakses semua data yang tersedia di berbagai state dalam masing-masing
reducer pada setiap elemen/komponen menggunakan method useSelector
bawaan React Redux :
Gambar 3. 35
Contoh Akses State pada Elemen/Komponen
Data yang tersedia pada setiap state di dalam masing-masing reducer
berasal dari HTTP Response hasil dari HTTP Request pada aksi reducer :
68
Gambar 3. 36
Aksi Reducer Mengambil Data dan Menyimpan ke Reducer
Setiap transaksi data, ditangani oleh aksi reducer pada folder actions
menggunakan method dispatch yang sudah dihubungkan dengan reducer
menggunakan thunk, sehingga hasil response dari HTTP Request yang
dilakukan dapat diakses melalui reducer. Struktur penyimpanan data pada
state di dalam reducer ditentukan berdasarkan kebutuhan setiap
elemen/komponen yang memiliki kondisi/mekanisme berbeda dalam
memuat data.
Pengolahan data pada elemen dan komponen menggunakan method
bawaan dari setiap bentuk data yang diterima dari backend, yakni object,
array dan array of object dalam bentuk JSON. Karena menggunakan
method, pengelolaan data pada Reactjs menggunakan kaidah pure function
yang artinya suatu function/method yang tidak mengubah nilai asli (side
effect) dari data yang diterima meskipun terjadi pengolahan data dalam
function/method tersebut, contoh kita memiliki data seperti berikut :
69
Gambar 3. 37
Data Response dalam Bentuk Array of Object dari HTTP Request
Kita akses data tersebut menggunakan useSelector dengan memilih

reducer yang menampung data tersebut kemudian kita masukan ke dalam
satu variable/konstanta seperti berikut :
Gambar 3. 38
Menampung Data HTTP Response dari HTTP Request
70
Cara mengolah data di atas pada ReactJS, kita diwajibkan

menggunakan method bawaan dari setiap objek data tersebut, dalam kasus
ini, dikarenakan data yang digunakan berbentuk array of object, maka kita
gunakan method map array untuk menampilkan data sebagai contoh:
Gambar 3. 39
Method Penyaringan Tiket Berdasarkan Input Pengunjung
Gambar 3. 40
Hasil dari Method Map
71
Sejatinya, method map sama dengan method for maupun foreach,

perbedaannya adalah dari side effect yang dihasilkan, apabila menggunakan
for atau foreach kita memerlukan penampung yang berbeda agar
variable/konstanta yang menampung data asli tidak berubah, dalam ReactJS
kita tidak dapat menampung data pada variable/konstanta secara langsung
apabila data tersebut bersifat stateful. Di belakang layer, ReactJS melakukan
proses render ulang data pada saat ada pemutakhiran data yang terjadi, yang
mengakibatkan data pada variable/konstanta dapat berubah-ubah, sehingga
dibutuhkan suatu mekanisme untuk menghindari resiko data yang berubah
tersebut menggunakan state didukung dengan method bawaan dari
Javascript untuk pengolahan data berdasarkan bentuk datanya.
3.5 Penerapan Atomic Design Pada Frontend

Dari sekian pilihan Atomic Design yang tersedia, penulis menggunakan
desain komponen/elemen berbasis Molecules, Organism, dan Pages.
3.5.1 Desain Elemen/Komponen Berbasis Molecules

Setiap elemen/komponen yang telah penulis buat/library ReactStrap
telah sediakan, penulis kumpulkan menjadi komposisi Molecules dalam
satu files JSX dengan penamaan file sesuai dengan proses bisnis yang
ditanganinya dan dipisahkan ke dalam folder :
72
Gambar 3. 41
Penerapan Desain Molecules
Gambar 3. 42
Code Penerapan Desain Molecules
3.5.2 Desain Elemen/Komponen Berbasis Organisms

Molecules yang telah dirancang kemudian digabungkan dalam satu
file JSX untuk menerapkan prinsip Organisms sehingga komposisi
73
elemen/komponen dapat digunakan kembali pada activity/proses bisnis

yang memerlukan :
Gambar 3. 43
Penerapan Desain Organisms
Gambar 3. 44
Code Penerapan Desain Organisms
74
3.5.3 Desain Elemen/Komponen Berbasis Pages

Setiap organisms yang telah dibuat, disatukan dengan organisms
lain dalam satu Pages sehingga membentuk satu halaman utuh :
Gambar 3. 45
Penerapan Desain Pages
75
Gambar 3. 46
Code Penerapan Desain Pages
3.6 Hasil dan Pembahasan

Seperti yang telah dijelaskan sebelumnya, user yang ingin melakukan
pemesanan/pembelian tiket wajib mendaftakan diri melalui sistem untuk
mendapatkan akun yang dapat digunakan untuk login ke sistem seperti yang
ditunjukkan oleh gambar 3.47. Baik administrator maupun user diharuskan untuk
login terlebih dahulu dengan mengisi username dan password yang telah
didapatkan sebelumnya. Kemudian terdapat tombol submit berwarna hijau untuk
masuk halaman selanjutnya.
76
Gambar 3. 47
Halaman Login Sistem
Setelah berhasil login, administrator dapat masuk ke halaman dashboard

seperti yang ditunjukkan oleh gambar 3.46. Halaman ini menunjukan informasi
berupa summary jumlah pengguna, jumlah transaksi dan jumlah pesanan berbentuk
komponen card. Hal ini memudahkan informasi bagi admin agar dapat mengetahui
seberapa banyak data transaksi dan jumlah user sistem. Terdapat sidebar disebelah
kiri layar sebagai menu untuk navigasi ke halaman lainnya. Pada bagian pojok
kanan atas terdapat icon avatar beserta nama user aktif untuk navigasi ke halaman
edit profile. Masih di halaman awal dashboard, terdapat table data transaksi
pemesanan tiket.
77
Gambar 3. 48
Tampilan Dashboard Administrator
Gambar 3. 49
Halaman Bandara
Berlanjut pada fungsi selanjutnya yaitu menu Bandara seperti yang

ditunjukkan gambar 3.47. Pada halaman ini terdapat informasi berupa pengelolaan
data master Bandara. Informasi dari Bandara berupa nama bandara, Kota, dan kode
bandara. Informasi yang lengkap ini tentu akan sangat memudahkan bagi
administrator dan user karena dirangkum dengan jelas. Terdapat aksi tambah data
bandara, ubah data bandara dan hapus data bandara.
78
Selanjutnya terdapat menu Destinasi seperti ditunjukkan gambar 3.4. Pada

halaman Destinasi, Admin dapat mengelola data destinasi sebagai pilihan wishlist
bagi user. Pada menu Pengguna, Admin dapat meninjau data pengguna. Pada menu
Pesanan, Admin dapat meninjau data pesanan yang masuk dari user.
Gambar 3. 50
Halaman Pesanan
Halaman Pesawat untuk Admin mengelola data pesawat yang tersedia pada
pilihan penerbangan yang dipilih seperti yang ditunjukkan oleh gambar 3.5.
Terdapat aksi ubah dan hapus data pesawat pada kolom Aksi.
79
Gambar 3. 51
Halaman Pesawat
Gambar berikut merupakan tampilan dari halaman pengelolaan data Tiket,

data yang dikelola pada halaman tiket akan tampil pada halaman user sehingga
dapat dipilih oleh user untuk membeli/memesan.
Gambar 3. 52
Halaman Pratinjau Tiket
80
Pada halaman Transaksi, Admin dapat meninjau semua data transaksi yang
masuk dari pembelian/pemesanan tiket. Data yang masuk ke halaman ini adalah
data transaksi yang statusnya bersifat paid/sudah dibayar.
Gambar 3. 53
Halaman Transaksi
81
Pada halaman depan user terdapat elemen input untuk menampung

pencarian tiket berdasarkan input user, kemudian terdapat pilihan Destinasi dalam
bentuk carousel yang dapat user pilih, testimonial dan section tentang kami.
Gambar 3. 54
Halaman Depan User
82
Isi kolom pencarian tiket dengan ketentuan yang dikehendaki kemudian klik
tombol Cari Penerbangan untuk menerapkan proses pencarian berdasarkan isian
pencarian tiket :
Gambar 3. 55
Halaman Pencarian Tiket
83
Pengguna akan diarahkan ke halaman daftar tiket hasil pencarian

berdasarkan kolom isian pada form pencarian tiket, apabila daftar tiket dirasa
kurang sesuai, pengguna dapat menyaring pencarian tiket dengan menyesuaikan isi
kolom pencarian tiket :
Gambar 3. 56
Halaman Hasil Pencarian Tiket
84
Setelah pengguna memilih tombol pesan pada halaman hasil pencarian

penerbangan, system akan mengarahkan pengguna ke halaman rincian tiket yang
berguna untuk pratinjau Rincian Tiket dan sebagai tanda konfirmasi pemilihan tiket
:
Gambar 3. 57
Halaman Rincian Tiket yang Dipilih
85
Setelah konfirmasi tiket pada halaman Rincian Tiket, pengguna mengisi

data diri sejumlah penumpang, kemudian klik tombol Submit untuk melanjutkan ke
pembayaran tiket :
Gambar 3. 58
Halaman Pengisian Data Penumpang
86
Pengguna diarahkan ke halaman Pembayaran setelah memenuhi semua

pengisian data penumpang dari tiket yang dipilih :
Gambar 3. 59
Pilih Metode Pembayaran
87
Notifikasi akan muncul setelah pembayaran berhasil dipenuhi :
Gambar 3. 60
In-App Notification
Gambar 3. 61
Halaman Rincian Notifikasi
88
Gambar 3. 62
Halaman Rincian Riwayat Transaksi
Fitur dalam sistem yang telah penulis buat dibagi menjadi dua berdasarkan
role yaitu administrator dan user. Seperti yang telah dijelaskan sebelumnya,
Administrator dapat mengendalikan dan mengolah seluruh data yang ada di sistem
tersebut seperti fitur untuk melihat semua pengguna, menambahkan data tiket,
melihat pratinjau dari seluruh transaksi pemesanan/pembelian tiket, mengubah data
bandara, dan menghapus data tiket serta destinasi. Tentu fitur yang diberikan
kepada user tidak seperti administrator yang dapat leluasa mengelola sistem
tersebut. User hanya dapat menggunakan fitur pencarian tiket dan pemesanan serta
pembelian, selain itu sisanya hanya ubah profile dan ubah password.
Keterbatasan solusi yang penulis berikan sistem ini baru bisa

mengakomodir beberapa metode pembayaran yang sifatnya masih manual dan
belum terintegrasi dengan payment gateway.
BAB IV
PENUTUP
4.1 Kesimpulan
Program Studi Independen Bersertifikat yang bermitra dengan PT. Lentera
Bangsa Benderang telah memberikan banyak manfaat yang sangat besar bagi
mahasiswa yang mengikutinya. Proses seleksi yang sudah dijalani hingga dapat
lolos program ini dan menjalankan kegiatan pembelajaran yang didampingi oleh
fasilitator yang ahli pada bidangnya merupakan kesempatan yang amat berharga
bagi mahasiswa. Kegiatan pembelajaran diselenggarakan selama kurang lebih lima
bulan. Pada pembelajaran ini berfokus pada topik Pengenalan Programming,
Menguasai Kemampuan Dasar untuk Membuat Halaman Web, Mampu
Menjalankan Code dan Melakukan Kolaborasi dengan Developer lain dalam Proses
Sistem Development, Memahami Logika-Logika Javascript, Mampu Menerapkan
OOP dan DOM dalam Pengembangan Web, Melakukan Perancangan Database,
Merancang Arsitektur dan Dokumentasi API, Mampu membuat Tampilan Web
dengan Menggunakan ReactJS, Melakukan Unit testing dan Deployment serta
dengan tugas akhir pada final project yang memberikan solusi berupa platform
sistem informasi E-Flight Ticket Apps. Selain itu, pihak PT. Lentera Bangsa
Benderang juga memfasilitasi mahasiswa dengan sertifikasi Binar Academy
berskala internasional yang berguna sebagai jaminan bahwa mahasiswa telah
memiliki keahlian dan pengetahuan yang dibutuhkan di industri terkait. Program
ini dapat dikatakan berhasil dan memilki manfaat bagi mahasiwa untuk lebih
mengenal web development dan dapat menjadi bekal yang sangat berharga dalam
menjajaki dunia kerja.
4.2 Saran
Pelaksanaan kegiatan Studi Independen Bersertifikat oleh PT. Lentera
Bangsa Benderang berlangsung sangat baik.
89
DAFTAR PUSTAKA
Anwar, C. (2009). STRATEGI PENDIDIKAN DALAM MENINGKATKAN.

Jakarta: Universitas Islam Negeri Syarif Hidayatullah.
Benny Dito, S., & Pujiastuti, H. (2021). Dampak Revolusi Industri 4.0 Pada
Sektor Pendidikan: Kajian Literatur Mengenai. Dampak Revolusi Industri 4.0 Pada
Sektor Pendidikan: Kajian Literatur Mengenai, 1.
Booch, G., Rumbaugh, J., & Jacobson, I. (2005). The Unified Modeling
Language User Guide. Boston: Addison-Wesley.
Direktorat Jenderal Pendidikan Tinggi Kementerian Pendidikan dan

Kebudayaan. (2020). Buku Panduan Merdeka Belajar - Kampus Merdeka. Jakarta:
Direktorat Jenderal pendidikan Tinggi Kemdikbud RI.
Domain Driven Design Community. (2007, March 03). dddcommunity.

Diambil kembali dari dddcommunity: https://www.dddcommunity.org/learning-
ddd/what_is_ddd/
Frost, B. (2013, June 10). atomic design. Diambil kembali dari Brad Frost:
https://bradfrost.com/blog/post/atomic-web-design/#atoms
Jogiyanto, H. (1995). Analisis dan Disain Sistem Informasi : Pendekatan.

Yogyakarta: Andi Offset.
Kristanto, A. (2003). Perancangan Sistem Informasi. Yogyakarta: Gava Media.
Narimawati, U., Sarwono, J., & Munandar, D. (2020). Metode Penelitian dalam
Implementasi Ragam Analisis: untuk Penulisan Skripsi, Tesis, dan Disertasi.
Yogyakarta: Penerbit ANDI.
Reade, C. (1989). Elements of Functional Programming. Boston: Addison-

Wesley Longman.
Schreiter, R. J. (1992). Reconciliation: Mission and Ministry in a Changing

Social Order.
90
LAMPIRAN
1. Jadwal Keseluruhan Bootcamp
2. Foto Kegiatan
3. Slide Presentasi Final Project
4. Backlog Final Project
5. High Fidelity Mockup
6. Digital Graduation Book
7. Brief Final Project
91

Laporan KP Rev4

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan KP Rev4

Diunggah oleh

Hak Cipta:

Format Tersedia

PERANCANGAN FRONTEND SISTEM INFORMASI E-

FLIGHT TICKET PLATFORM MENGGUNAKAN REACT DI

LAPORAN KERJA PRAKTIK

Disusun sebagai salah satu syarat untuk menyelesaikan

Muhammad Insan Kamil

PROGRAM STUDI SISTEM INFORMASI

PERANCANGAN FRONTEND SISTEM INFORMASI E-

Muhammad Insan Kamil

Telah disetujui dan disahkan di Bandung sebagai Laporan Kerja Praktik,

( Adam Husain, ST., M.Kom. )

Dekan Fakultas Ilmu Komputer Ketua Program Studi

( Nana Suryana, ST., M.Kom. ) ( Popon Dauni, ST., M.Kom. )

Saya yang bertanda tangan dibawah ini:

Nama : Muhammad Insan Kamil

Menyatakan dengan sebenarnya bahwa penulisan Laporan Kerja Praktik

Bandung, .............................. 2023

Yang membuat pernyataan,

Materai Rp. 6.000,-

(Muhammad Insan Kamil)

Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi telah membuka

Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi held a program called

Keyword: Kampus Merdeka, Studi Independen, PT. Lentera Bangsa Benderang,

Bandung, 22 Januari 2023

Muhammad Insan Kamil

LEMBAR PENGESAHAN ................................................................... i

LEMBAR PERNYATAAN KEASLIAN.............................................. ii

ABSTRAK .......................................................................................... iii

KATA PENGANTAR ........................................................................... v

DAFTAR ISI....................................................................................... vii

DAFTAR GAMBAR ............................................................................ x

DAFTAR TABEL .............................................................................. xiii

BAB I PENDAHULUAN ................................................................... 1

1.2 Lingkup ......................................................................................................... 3

1.4 Lokasi dan Waktu Penelitian ......................................................................... 4

1.5 Sistematika Penulisan ................................................................................... 5

BAB II LANDASAN TEORI.............................................................. 6

2.2 Analisis Sistem .............................................................................................. 6

2.2.1 Tujuan Analisa Sistem ............................................................................ 7

2.2.2 Langkah Analisa Sistem ......................................................................... 7

2.3 Perancangan Frontend................................................................................... 8

2.3.1 Unified Model Language (UML) ........................................................... 8

2.3.2 Tech-stack Frontend ............................................................................... 9

2.3.4 Single Page Application ....................................................................... 10

2.3.5 Separation of Concerns .........................................................................11

2.3.6 Atomic Design ...................................................................................... 12

2.4 PT. Lentera Bangsa Benderang ................................................................... 14

2.5 Lingkup Pekerjaan ...................................................................................... 14

2.6 Deskripsi Pekerjaan..................................................................................... 15

2.7 Jadwal Kerja ................................................................................................ 20

BAB III ANALISIS DAN TINJAUAN PERMASALAHAN ............ 22

3.2 Proses dan Perancangan Solusi ................................................................... 24

3.3 Perancangan UML ...................................................................................... 26

3.3.1 Use Case Diagram ............................................................................... 27

3.3.2 Deskripsi Use Case .............................................................................. 27

3.3.3 Activity Diagram .................................................................................. 41

3.4 Penerapan Separation of Concerns Pada Frontend..................................... 56

3.4.1 Presentation Layer ............................................................................... 56

3.4.2 Framework Layer ................................................................................. 62

3.4.3 Logic dan Data Access Layer .............................................................. 64

3.5 Penerapan Atomic Design Pada Frontend ................................................... 71

3.5.1 Desain Elemen/Komponen Berbasis Molecules .................................. 71

3.5.2 Desain Elemen/Komponen Berbasis Organisms ................................. 72

3.5.3 Desain Elemen/Komponen Berbasis Pages ......................................... 74