LAPORAN KERJA PRAKTEK

PENGEMBANGAN APLIKASI UNTUK UMKM KABUPATEN KOTA

BATAM (PT. KUADRAN TEKNOLOGI INDONESIA)
PENGEMBANGAN FRONTEND APLIKASI INVENTORY APOTEK
DENGAN REACT JS

MUSTAKIM
6304181108

PROGRAM STUDI REKAYASA PERANGKAT LUNAK

JURUSAN TEKNIK INFORMATIKA
POLITEKNIK NEGERI BENGKALIS
BENGKALIS - RIAU
2022
ii
 KATA PENGANTAR

Puji dan syukur peneliti panjatkan doa kepada Allah SWT, karena berkat
dan rahmat-Nyalah penulis dapat melaksankan kerja praktek dan menyelesaikan
laporan kerja praktek yang dilaksanakan di PT.KUADRAN TEKNOLOGI
INDONESIA. Shalawat serta salam semoga tercurahkan kepada Nabi Muhammad
SAW. Terima kasih kepada semua pihak-pihak yang terkait dalam pelaksanaan
kerja praktek dan menyelesaikan laporan kerja praktek ini antara lain :
1. Bapak Ir. Joni Caster, MT sebagai Direktur Politeknik Negeri Bengkalis
2. Bapak Danuri, M.Cs selaku Ketua Jurusan Teknik Informatika Politeknik
Negeri Bengkalis.
3. Ibu Rezki Kurniati, M.Kom sebagai Ketua Program Studi Rekayasa
Perangkat Lunak
4. Bapak Kasmawi, M.Kom sebagai Dosen Pembimbing Kerja Praktek
Politeknik Negeri Bengkalis
5. Bapak Fajri Profesio Putra, M.Cs sebagai kordinator Kerja Praktek
Program
Studi Rekayasa Perangkat Lunak Politeknik Negeri Bengkalis.
6. Bapak Febian Goivani, S.T sebagai Manager PT.Kuadran Teknologi.
7. Bapak Azlan Rafar sebagai pembimbing lapangan.
Dalam pelaksanaan kerja praktek dan pembuatan laporan kerja praktek
masih terdapat banyak keterbatasan dan kekurangan sehingga jauh dari kata
sempurna. Kritik dan saran serta permohonan maaf dari pihak-pihak yang terkait
sangat diharapkan dapat membangun kesempurnaan.

Bengkalis, 20 Mei 2022

Mustakim

III
 DAFTAR ISI

LEMBAR PENGESAHAN ............................................................................. ii

KATA PENGANTAR ..................................................................................... iii
DAFTAR ISI .................................................................................................... iv
DAFTAR TABEL ............................................................................................ v
DAFTAR GAMBAR ....................................................................................... vi

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

1.1 Latar Belakang Pemikiran KP ........................................................... 1
1.2 Tujuan Dan Manfaat KP .................................................................... 2
1.3 Luaran Proyek Kerja Praktek ............................................................. 3
BAB II GAMBARAN UMUM PERUSAHAAN ............................................ 4
2.1 Biodata Perusahaan ............................................................................. 4
2.2 Visi dan Misi Perusahaan .................................................................... 4
2.3 Struktur Organisasi Perusahaan .......................................................... 5
2.4 Produk-Produk Yang Dihasilkan ........................................................ 6

BAB III BIDANG PEKERJAAN SELAMA KP............................................. 7

3.1 Design prototype aplikasi dengan balsamiq mockup .......................... 7
3.2 Memahami Penggunaan React Js ...................................................... 8
3.3 Merancang UI Dengan Figma ............................................................. 9
3.4 Membuat Frontend aplikasi apotek untuk pelaku UMKM kota batam 10

BAB IV PEMBUATAN FRONTEND APLIKASI INVENTORY APOTEK .. 11

4.1 Metodologi ......................................................................................... 11
4.2 Implementasi ....................................................................................... 14
4.3 Hasil .................................................................................................... 17
4.4 Dampak Implementasi ........................................................................ 19

BAB V PENUTUP........................................................................................... 20
5.1 Kesimpulan ......................................................................................... 20
5.2 Saran ................................................................................................... 20

DAFTAR PUSTAKA ...................................................................................... 21

Lampiran .......................................................................................................... 22

IV
 DAFTAR TABEL

Tabel 1. Luaran Proyek Kerja Praktek ............................................................. 3

Tabel 2. Tabel tanya jawab wawancara ........................................................... 12
Tabel 3. Tahapan dan Jadwal Pelaksanaan ...................................................... 13

V
 DAFTAR GAMBAR

Gambar 1. Struktur Organisasi Perusahaan .................................................... 5

Gambar 2. Produk-produk perusahaan ............................................................ 6
Gambar 3. Tampilan desain 1 ......................................................................... 7
Gambar 4. Tampilan desain 2 ......................................................................... 7
Gambar 5. Tampilan desain 3 ......................................................................... 7
Gambar 6. Tampilan desain 4 ......................................................................... 7
Gambar 7. Belajar React js dengan video youtube ........................................ 8
Gambar 8. Rancangan UI dengan Figma 1 ..................................................... 9
Gambar 9. Rancangan UI dengan Figma 2 ..................................................... 9
Gambar 10. Use case....................................................................................... 13
Gambar 11. Rancangan UI halaman beranda .................................................. 15
Gambar 12. Rancangan UI halaman login ...................................................... 15
Gambar 13. Rancangan UI halaman register .................................................. 15
Gambar 14. Rancangan UI halaman data ........................................................ 16
Gambar 15. Code program dengan react js .................................................... 16
Gambar 16. Tampilan login ............................................................................ 17
Gambar 17. Tampilan halaman beranda ......................................................... 17
Gambar 18. Tampilan halaman data obat ....................................................... 18
Gambar 19. Tampilan halaman supplier ......................................................... 18
Gambar 20. Tampilan halaman cetak laporan................................................. 18

VI
 BAB I. PENDAHULUAN

1.1 Latar Belakang Pemikiran KP

Salah satu kebutuhan yang sangat besar akan teknologi informasi sekarang
ini adalah kebutuhan akan sistem informasi. Berkembangnya teknologi informasi
dan sistem informasi yang demikian pesat di era sekarang ini telah membuat hampir
semua aspek kehidupan tidak dapat terhindar dari penggunaan perangkat komputer.
Kerja praktek (KP) atau On Job Training (OJT) merupakan mata kuliah
yang wajib diambil oleh mahasiswa prodi Rekayasa Perangkat Lunak, Jurusan
Teknik Informatika, Politeknik Negeri Bengkalis pada semester 8. Kerja praktek
adalah bentuk dari implementasi penguasaan keahlian yang didapatkan dalam
bangku kuliah untuk diterapkan dalam dunia kerja untuk mencapai keahlian
tertentu. Dalam kerja praktek ini, mahasiswa akan mendapatkan kesempatan untuk
melihat dan mempelajari apa saja yang ada didalam dunia kerja dan kondisi-kondisi
yang ada. Mahasiswa yang melakukan Kerja praktek juga bisa memberikan ide dan
gagasan misalnya sebuah projek magang terhadap tempat dilaksanakannya kerja
praktek, mulai dari tahap awal yaitu perencaanan, pembangunan, hingga ke tahap
akhir dari pengerjaan projek.
Berhubungan dengan hal diatas, maka penulis melaksanakan kerja praktek
disebuah PT Software House yang berada di kota Batam yaitu PT. Kuadran
Teknologi Indonesia. Waktu kerja praktek yang dilaksanaakan berlangsung selama
4 bulan di PT ini. Kuadran Teknologi merupakan perusahan yang bergerak dibidang
Software Development yang memberikan jasa pengembangan aplikasi mulai dari
apliaksi desktop, web dan mobile. Adapun produk dan layanan PT Kuadran
Teknologi meliputi perancangan sistem informasi Akademik, perpustakaan,
ketenagakerjaan, keuangan, manajemen aset, aplikasi Web. Saat ini, Sistem
Akuntansi menjadi salah satu Software utama dan terbaik dari PT. Kuadran. Oleh
sebab itu penulis memilih tempat kerja praktik di PT Kuadran Teknologi karena
pekerjaannya yang sesuai juga dengan program studi penulis yaitu D4 Rekayasa
Perangkat Lunak.

1
 Selama 4 bulan melakukan kerja praktik di PT Kuadran Teknologi penulis
menemukan permasalahan yang dihadapi oleh masyarakat atau para pelaku UMKM
daerah yang dimana para pelaku UMKM terkhususnya di kota Batam masih belum
banyak yang belum memanfaatkan teknologi digital dalam pencatatan data. Salah
satunya pelaku UMKM penjualan obat/Apotek. Dari hasil survei kepada pelaku
UMKM yang bergerak dibidang penjualan obat 6 dari 10 pelaku masih
menggunakan exel dan kertas sebagai media pencatatan data. Solusi dari
pemasalahan yang bisa dilakukan oleh kami yakni melakukan pengembangan
aplikasi pencatatan data barang (inventaris) yang dimana aplikasi ini nantinya
terdapat fitur untuk menampilkan informasi-informasi barang, mencetak laporan
yang dapat membantu para pelaku UMKM dalam pencatatan data yang lebih akurat
dan memudahkan dalam pembuatan laporan.

1.2 Tujuan dan Manfaat KP

Tujuan dilakukannya dari kegiatan kerja praktik antara lain :

1. Mengenal dunia pekerjaan yang sesungguhnya dan menyesuaikan diri
dalam menghadapi permasalahan.
2. Menerapkan dan mengembangkan ilmu pengetahuan yang didapatkan
selama masa kuliah kemudian diterapkan didunia pekerjaan.
3. Membuat perancangan aplikasi yang lebih real dengan dunia kerja.
4. Sebagai salah satu persyaratan dalam menyelesaikan pendidikan Sarjana
Terapan Rekayasa Perangkat Lunak di Politeknik Negeri Bengkalis.

Manfaat yang didapatkan dari kegiatan kerja praktik antara lain:

1. Mendapatkan perbandingan antara teori dan metode di perkuliahan dan
kenyataan operasional di dunia kerja.
2. Memberikan usulan dan solusi untuk menangani masalah yang yang terjadi
di PT. Kuadran Teknologi
3. Meningkatkan kerja sama antara pihak perusahaan dengan lembaga
Pendidikan khususnya Program studi D4 Rekayasa Perangkat Lunak.
4. Mendapat ilmu baru yang sesuai dengan dunia industri.

2
1.3 Luaran Proyek Kerja Praktek
Berdasarkan kegiatan yang sudah dilakukan selama proses kerja praktek
berlangsung selama 4 bulan yang dimulai dari 24 Januari 2022 sampai dengan 24
Mei 2022 maka target luaran yang diharapkan setelah melaksanakan program kerja
praktek pada tabel 1. Selain itu juga hasil dari kegiatan ini juga akan digunakan
untuk menyusun laporan dari kerja praktek.

Tabel 3. Luaran Proyek Kerja Praktek

No Kegiatan Target Luaran yang Diharapkan
1 Pengembangan Frontend Memudahkan para pelaku UMKM
Apliaksi Inventory Apotek terkhususnya kota batam nantinya dalam
Dengan React Js melakukan pencatatan data barang
apotek dan melakukan pelaporan
transaksi.

3
 BAB II. GAMBARAN UMUM PERUSAHAAN

2.1 Biodata Perusahaan

PT. Kuadran Teknologi adalah perusahaan pengembangan perangkat lunak

yang terletak dikabupaten kota Batam, Kepulauan Riau. Mulai tahun 2014, Kuadran
telah menangani berbagai macam segmen klien dari seluruh Indonesia, mulai dari
Instansi Pemerintah Daerah, lembaga pendidikan (Perguruan Tinggi/Sekolah) ,
Badan Usaha Milik Negara dan Perusahaan Swasta sampai dengan organisasi
nirlaba dan Pribadi.
Saat ini PT. Kuadran Teknologi dipimpin oleh Agifanri Maulana, S.SI.,
M.MSI. selaku Executive Director perusahaan. PT. Kuadran Teknologi
menawarkan jasa pembangunan perangkat lunk khususnya diBatam-Indonesia,
Singapura dan Malaysia. Adapun jasa pembangunan apliaksi yang ditawarkan
mulai dari aplikasi desktop, apliasi web dan apliaksi mobile.

2.2 Visi dan Misi Perusahaan

2.2.1. Visi

Menjadi perusahaan yang memberikan layanan profesional dan produk

terkait pengembangan teknologi perangkat lunak, untuk membuat layanan yang
lebih baik untuk aplikasi sistem perusahaan.

2.2.2. Misi

Untuk memungkinkan pelanggan kami mengembangkan bisnis mereka

dengan menyediakan dan pengalaman perangkat lunak terintegrasi menggunakan
pengembangan aplikasi berlayanan kami.

4
2.3 Struktur Organisasi Perusahaan

Gambar 2. Struktur Organisasi Perusahaan

Struktur organisasi pada PT. Kuadran Teknologi dapat diuraikan sebagai berikut :
a. Board of Director
b. Business & Research Development
c. Human Resource & Coorporate Sopport
d. Finnance
e. Software Solution
f. Enterprise Software
g. Web Solution
h. Mobile Apps Solution
i. Customer Engagemant

Penempatan penulis pada struktur organsisi berapada pada bagian web solution
sebagai perancang UI/UX serta frontend aplikasi.

5
2.4 Produk-produk yang telah dihasilkan

Adapun beberapa produk-produk aplikasi dari PT. Kuadran Teknologi

dapat dilihat pada gambar dibawah ini:

Gambar 2. Produk-produk perusahaan

6
 BAB III. BIDANG PEKERJAAN SELAMA KP

Spesifikasi tugas kerja praktek yang dilaksanakan mingguan antaranya :

3.1 Desain Prototype aplikasi dengan balsamiq mockup

Pengerjaan prototype dengan Balsamiq mockup bertujuan meninjau sejauh

mana pemahaman basic dalam penggunaan aplikasi pengembangan frontend.
Target yang diharapkan dari pekerjaan ini adalah dengan mempelajari desain
mockup, diharapkan dapat menyelesaikan pekerjaan dengan tepat waktu. Tools
yang digunakan dalam pembuatan desain ini yaitu aplikasi balsamiq mockup.

Gambar 3. Tampilan desain 1 Gambar 4. Tampilan desain 2

Gambar 5. Tampilan desain 3 Gambar 6. Tampilan desain 4

7
3.2 Memahami penggunaan React Js

Salah satu library yang digunakan untuk pembangunan aplikasi di PT.

Kuadran Teknologi yaitu Library React Js. React JS adalah open-source JavaScript
library yang digunakan untuk membangun antarmuka pengguna khusus untuk
aplikasi satu halaman (Single Applications). Ini digunakan untuk menangani
tampilan layer untuk aplikasi web dan seluler. React JS juga memungkinkan kita
untuk membuat komponen UI yang dapat digunakan kembali. Ada beberapa
sumber yang diambil dalam memahami penggunaan React Js diantaranya website
resmi React Js, Google dan melalui video Youtube.

Gambar 6. Tampilan library React js

Gambar 7. Belajar React js dengan video youtube

8
3.3 Merancang UI aplikasi dengan Figma

Merancang UI dengan figma merupakan tahap design interface selanjutnya

setelah merancang Dengan balsamiq mockup, pada dasarnya hampir sama namun
rancangan menggunakan figma memiliki kelebihan file sharing yang lebih mudah
dan cepat, memiliki banyak tools yang lengkap dan lebih realtime. Target Dari
penggunaan figma adalah menguji sejauh mana kemampuan merancang UI dengan
figma.

Gambar 8. Rancangan UI dengan Figma 1

Gambar 9. Rancangan UI dengan Figma 2

9
3.4. Membuat Frontend aplikasi apotek untuk pelaku UMKM kota batam

Selama 4 bulan melakukan kerja praktik di PT Kuadran Teknologi penulis

menemukan permasalahan yang dihadapi oleh masyarakat atau para pelaku UMKM
daerah yang dimana para pelaku UMKM terkhususnya dikota Batam masih belum
banyak yang belum memanfaatkan teknologi digital dalam pencatatan data. Salah
satunya pelaku UMKM penjualan obat/Apotek. Dari hasil survei kepada pelaku
UMKM yang bergerak dibidang penjualan obat 6 dari 10 pelaku masih
menggunakan exel dan kertas sebagai media pencatatan data. Solusi dari
pemasalahan yang bisa dilakukan oleh kami yakni melakukan pengembangan
aplikasi pencatatan data barang (inventory) yang dimana aplikasi ini nantinya
terdapat fitur untuk menampilkan informasi-informasi barang, mencetak laporan
yang dapat membantu para pelaku UMKM dalam pencatatan data yang lebih akurat
dan memudahkan dalam pembuatan laporan. Adapun detail pembuatan frontend
aplikasi inventory apotek dibahas pada bab selanjutnya.

10
 BAB IV. PEMBUATAN FRONTEND APLIKASI INVENTORY APOTEK

4.1 Metodologi

4.1.1. Prosedur Pembuatan Sistem

Pembuatan sistem menggunakan beberapa software dan tahapan. Adapun

software yang digunakan yaitu React Js sebagai library, Bahasa pemrogramman
HTML, Css, Boostrap dan software editor Visual Studio Code . Sedangkan tahapan
pembuatan sebagai berikut:
Berikut merupakan tahapan dalam proses perancangan :
1. Tahapan pertama dalam pengembangan sistem ini adalah pengumpulan
data,mulai dari wawancara dan observasi. Wawancara dilakukan pada saat
penulis melakukan kegiatan KP dikota Batam kepada para pelaku
UMKM apotek. Untuk tahapan observasi yaitu dengan melihat langsung
permasalahan yang ada.
2. Tahapan kedua yaitu pembuatan prototype atau mockup dari aplikasi
untuk tampilan User Interface.
3. Tahapan yang selanjutnya adalah mengimplementasikan prototype kedalam
pengkodean frontend dengan pemrogramman React Js.

4.1.2. Metodologi Pengumpulan Data

Didalam melakukan analisis data menggunakan beberapa teknik

pengumpulan data yang digunakan untuk pengembangan sistem secara
keseluruhan. Adapun teknik pengumpulan data yang digunakan sebagai berikut :
1. Observasi dilakukan dengan pengamatan dan pencatatan alur proses yang
terjadi secara sistematik sehingga sesuai dengan rencana dan metode yang
telah ditentukan.
2. Wawancara dilakukan dengan melalui tatap muka dan tanya jawab secara
langsung dengan pihak apotek, hal ini bertujuan untuk memperoleh
informasi secara langsung sehingga memperjelas kebutuhan dari sistem
yang akan dikembangkan.Tabel 2. Tabel tanya jawab wawancara

11
No Pertanyaan
1 Apakah sebelumnya apotek ini
sudah menggunakan aplikasi
sistem inventory?
2 Bagaimana sistem pendataan
yang diterapkan?
3 Bagaimana sistem pembuatan
laporan?
4 Apa kendala yang dialami dengan Proses pengerjaan menjadi rumit,
sistem yang sekarang
5 Siapa saja yang terlibat saat
proses pendataan dan transaksi
6 Apakah dibutuhkan sistem yang
terkomputerisi?
7 Sistem inventory seperti apa
yang dibutuhkan?
8 Fitur-fitur penting apa saja yang
diinginkan?
9 Apakah punya pengalaman
menggunakan aplikasi inventory?
Jawaban
Belum pernah menggunakan aplikasi
sama sekali
Sistem pendataan menggunakan
buku sebagai media
Pembuatan laporan sama seperti
pendatan menggunakan buku untuk
mengecek transaksi
butuh ketelitian agar tidak salah catat
dan membuang banyak waktu
Hanya ada satu orang yang terlibat
untuk pendataan dan transaksi
namun jika ada kesibukan kami
merekrut orang lain untuk proses
transaksi
Ya sangat dibutuhkan
Yang bisa menyelesaikan masalah
diatas
Fitur penting yang dibutuhkan adalah
menu yang bisa mengolah data obat,
transaksi, dan membat laporan
Sudah pernah
12
 10 Bagaimana proses transaksi jual Untuk penjulan manual saat
beli obat sebelumnya? pelanggan beli dicatat penjualannya

4.1.3. Proses Perancangan

Pada pembangunan frontend kita hanya memerlukan rancangan use case

untuk mengetahui alur dan fitur yang ingin dibuat

Gambar 10. Use case

4.1.4. Tahapan dan Jadwal Pelaksanaan

Tabel 3. Tahapan dan Jadwal Pelaksanaan

Bulan
N Uraian
Januari Februari Maret April Mei
o Kegiatan
1 2 3 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3
1 Communication
2 Quick plan
3 Modelling
4 Construction
5 Devlopment
frontend

13
 6 Membuat
Laporan
7 Dokumentasi

4.2. Implementasi

Dalam perancangan ini penulis mengerjakan Aplikasi inventory apotek dari

sisi Frontend. Adapun tahapan yang dilakukan dalam perancangan ini adalah
sebagai berikut :

4.2.1. Analisis Data

Dari hasil data sebelumnya yang dilakukan dengan observasi dan

wawancara maka dapat ditentukan fitur yang akan dibangun Dengan mendapatkan
kebutuhan yaitu :
1. Menambahkan data barang/obat.
2. Admin melakukan login sebagai keamanan sistem.
3. Admin bisa menyimpan catatan transaksi.
4. Dapat mencetak laporan transaksi.

4.2.2. Rancangan Sistem

Untuk perancangan frontend apliakasi inventory apotek yang dibuat berikut

tahapannya :
1. Membuat mockup UI Dengan Figma.

14
Gambar 11. Rancangan UI halaman beranda

Gambar 12. Rancangan UI halaman login

Gambar 13. Rancangan UI halaman register

15
 Gambar 14. Rancangan UI halaman data

2. pengkodean Frontend dengan react js :

Gambar 15. Code program dengan react js

16
4.3. Hasil

Hasil dari tampilan frontend aplikasi inventory apotek:

Gambar 16. Tampilan login

Gambar 17. Tampilan halaman beranda

17
 Gambar 18. Tampilan halaman data obat

Gambar 19. Tampilan halaman supplier

Gambar 20. Tampilan halaman cetak laporan

18
4.4. Dampak pengembangan Sistem

Dampak dari pada pengembangan sistem inventory ini bagi penulis yaitu
dapat mengetahui langkah apa saja yang digunakan oleh perusahaan dalam
menerima project dari pihak luar dan teknologi apa saja yang digunakan untuk
pemgembangan sistem serta mendapatkan pengetahuan baru terutama dibidang
pengembangan frontend menggunakan React js yang belum penulis pelajari
sebelumnya, dan cara menyelesaikan permasalahan yang ada, mulai dari tahap
pengumpulan kebutuhan, perancangan, pembangunan sistem, hingga ke tahap akhir
dari sistem. Disisi lain dampak terhadap pihak client yaitu dapat dengan mudahnya
memberikan informasi kepada pengguna sistem sehingga dapat membantu para
pelaku UMKM daerah. Dampak dari pihak pelaku UMKM adalah dapat
mengetahui ide atau referensi sehingga bisa memanfaatkan penggunaan teknologi
digital.

19
 BAB V. PENUTUP

5.1 Kesimpulan

Kesimpulan yang dapat diambil dalam kerja praktek di PT. Kuadran

Teknologi yaitu mendapatkan pengalaman baru bagaimana melakukan kerja tim
dan pembagian tugas. hingga hal-hal yang tidak diketahui pada masa kuliah bisa
menjadi paham selama proses kerja praktek. Selain itu juga dalam kerja praktek ini
mahasiswa dapat mengukur tingkat pemahamannya ketika diberikan pekerjaan
yang sesuai bidangnya, oleh karena itu juga dapat membandingkan teori dan
praktek selama diperkuliahan dan di dunia kerja.

5.2 Saran

Masih banyak kekurangan penulis didalam pengembangan ini seperti

kekurangan fitur pada aplikasi dan UI/UX nya. diharapkan kedepannya dapat
menjadikan ini referensi agar bisa dikembangkan menjadi lebih baik.

20
 DAFTAR PUSTAKA

Nursaid, F. F., Brata, A. H., & Kharisma, A. P. (2020). Pengembangan Sistem

Informasi Pengelolaan Persediaan Barang Dengan ReactJS Dan React Native
Menggunakan Prototype (Studi Kasus: Toko Uda Fajri). Jurnal
Pengembangan Teknologi Informasi dan Ilmu Komputer e-ISSN, 2548, 964X.

Iswari, L. (2021). Penerapan React JS Pada Pengembangan FrontEnd Aplikasi

Startup Ubaform. AUTOMATA, 2(2).

21
Lampiran 1. Foto penutupan KP

22
23
24
 KEGIATAN HARIAN
KERJA PRAKTEK (KP)

HARI/MINGGU : Minggu 1
TANGGAL : 24 Januari – 28 January

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Pengenalan diri, Mengajukan Febrian Giovani, S.T
judul dan Membuat alur
kegiatan magang dalam bentuk
flowchart.
Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Mengajukan judul
1 kemudian mengarahkan
judul kepembimbing
magang, selanjutnya
merelaisasikan judul
sesuai langkah-langkah
pada flowchart.

25
HARI/MINGGU : Minggu 2
TANGGAL : 31 Januari – 4 February

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 pengenalan pengembangan front Febrian Giovani, S.T
end dengan React JS

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

ReactJS adalah open-
1 source JavaScript
library yang
digunakan untuk
membangun
antarmuka pengguna
khusus untuk aplikasi
satu halaman (Single
PApplications). Ini
digunakan untuk
menangani tampilan
layer untuk aplikasi
web dan
seluler. ReactJS juga
memungkinkan kita
untuk membuat
komponen UI yang
dapat digunakan
kembali.

26
HARI/MINGGU : Minggu 3
TANGGAL : 7 February – 11 February

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Memulai pengembangan front Azlan Rafar
end dengan React JS

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Mengulik bebrapa
1 sumber bagaimana
penggunaan react JS
dalam penmbangunan
front end pada
aplikasi web

27
HARI/MINGGU : Minggu 4
TANGGAL : 14 February – 18 February

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Memulai pengembangan front Azlan Rafar
end dengan React JS dilaravel

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Mengulik bebrapa
1 sumber bagaimana
penggunaan react JS
dalam penmbangunan
front end pada
aplikasi web

28
HARI/MINGGU : Minggu 5
TANGGAL : 21 February – 25 February

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Membuat design prototype Azlan Rafar
front end aplikasi dengan
blasamiq mockup

Catatan Pembimbing Industri

N GAMBARAN KERJA KETERANGA

O N
Design dibuat
1 dengan aplikasi
Blasamiq
Mockup yang
nantinya ingin
dibuat dengan
menggunakan
react JS.

29
HARI/MINGGU : Minggu 6
TANGGAL : 28 Februari – 4 Maret

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Membuat design prototype Azlan Rafar
front end aplikasi dengan
blasamiq mockup

Catatan Pembimbing Industri

N GAMBARAN KERJA KETERANGA

O N
Design dibuat
1 dengan aplikasi
Blasamiq
Mockup yang
nantinya ingin
dibuat dengan
menggunakan
react JS.

30
HARI/MINGGU : Minggu 7
TANGGAL : 7 Maret – 11 Maret

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Membuat design prototype Azlan Rafar
front end aplikasi dengan
Figma

Catatan Pembimbing Industri

N GAMBARAN KERJA KETERANGA

O N
Design dibuat
1 dengan aplikasi
Figma yang
nantinya ingin
dibuat dengan
menggunakan
react JS.

31
HARI/MINGGU : Minggu 8
TANGGAL : 14 Maret – 18 Maret

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Membuat design prototype Azlan Rafar
front end aplikasi dengan
Figma

Catatan Pembimbing Industri

N GAMBARAN KERJA KETERANGA

O N
Design dibuat
1 dengan aplikasi
Figma yang
nantinya ingin
dibuat dengan
menggunakan
react JS.

32
HARI/MINGGU : Minggu 9
TANGGAL : 28 Maret – 1 April

TIDAK MASUK KARENA DEMAM!!!!

HARI/MINGGU : Minggu 10
TANGGAL : 4 April – 8 April

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Membuat tampilan front end Azlan Rafar
dengan React Js

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Memulai membuat
1 tampilan prototype
dengan react js

33
HARI/MINGGU : Minggu 11
TANGGAL : 11 April – 15 April

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Membuat tampilan front end Azlan Rafar
dengan React Js

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Memulai membuat
1 tampilan prototype
dengan react js

34
HARI/MINGGU : Minggu 12
TANGGAL : 18 April – 22 April

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Membuat tampilan front end Azlan Rafar
dengan React Js

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Memulai membuat
1 tampilan prototype
dengan react js

35
HARI/MINGGU : Minggu 13
TANGGAL : 25 April – 29 April

NO URAIAN KEGIATAN PEMBERI TUGAS PARAF

1 Membuat tampilan front end Azlan Rafar
dengan React Js

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Memulai membuat
1 tampilan prototype
dengan react js

36
HARI/MINGGU : Minggu 14
TANGGAL : 2 Mei – 6 Mei

LIBUR LEBARAN !!

HARI/MINGGU : Minggu 15
TANGGAL : 9 Mei – 13 Mei
NO URAIAN KEGIATAN PEMBERI TUGAS PARAF
1 Membuat tampilan front end Azlan Rafar
dengan React Js

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Memulai membuat
1 tampilan prototype
dengan react js

37
HARI/MINGGU : Minggu 16
TANGGAL : 16 Mei – 20 Mei
NO URAIAN KEGIATAN PEMBERI TUGAS PARAF
1 Persiapan penutup magang Azlan Rafar

Catatan Pembimbing Industri

NO GAMBARAN KERJA KETERANGAN

Membuat laporan
1 kegiatan magang,
tanda tangan
pemimbing dan
persiapan pulang.

38