3.1 Kedudukan dan Koordinasi
Kedudukan pada proses kerja magang ini adalah sebagai IT Developer yang bertugas untuk membantu dalam proses pembuatan web. Secara struktural, proses kerja magang diposisikan di bidang pengelolaan teknologi informasi, komunikasi, dan persandian, di bagian seksi aplikasi dan integrasi sistem informasi, di bagian staf teknis, di bawah koordinasi dari supervisor. Koordinasi dilakukan bersama dengan supervisor yang memberikan informasi sekaligus menjadi pembimbing lapangan selama proses kerja magang berlangsung. Apabila supervisor tidak ada di kantor, komunikasi dilakukan menggunakan Whatsapp. Setiap selesai kerja, supervisor akan meminta keterangan terhadap progress yang dilakukan selama bekerja.
3.2 Tugas yang Dilakukan
Tugas yang dilakukan selama 40 hari periode magang adalah membuat modul akademik pada web edukarsa.
Tabel 3.1 Kegiatan Selama Pelaksanaan Kerja Magang
Minggu ke- Kegiatan
1
•
•
Perkenalan dengan staff PT Rona Digital Industri Kreatif Membaca dan beradaptasi seluruh aspek yang akan dikerjakan selama proses magang
2 • Mempelajari framework ReactJS component, functional, dan library
17
3 •
•
Praktik membuat component pada ReactJS
Praktik membuat component functional pada ReactJS
16
4
• Mempelajari dan praktik menggunakan third-party library dari JavaScript
• Praktik membuat dummy web menggunakan ReactJS
5
•
•
Beradaptasi dengan sebuah project di 1 tim
Mempelajari business flow dan technology stack yang digunakan pada Sistem Akademik Edukarsa
6
• Melakukan observasi dan mempelajari perancangan modul Akademik dengan tim
• Brainstorming
7
•
•
•
Mengimplementasikan hasil perancangan ke dalam bahasa pemrograman
Penyusunan component functional ReactJS setiap menu modul Akademik
Merancang styling menggunakan react-bootstrap library component pada menu Pengaturan
• Membuat functionality API(Application Programming Interface) untuk modul Akademik di setiap menu
8
•
•
Implementasi API modul Akademik pada setiap subbagian mulai dari Pengaturan hingga Input Penilaian Melakukan dev-box testing pada modul Akademik
• Melakukan merge request pada bagian subbagian modul Akademik
Pada minggu pertama, kegiatan yang dilakukan terdiri dari perkenalan dengan staff P.T. Rona Digital industri kreatif kemudian membaca dan beradaptasi seluruh aspek yang akan dikerjakan selama proses magang.
Pada minggu kedua, kegiatan yang dilakukan terdiri dari mempelajari framework ReactJS component, functional, dan library
Pada minggu ketiga, kegiatan yang dilakukan terdiri dari praktik membuat component pada ReactJS kemudian praktik membuat component functional pada
17
Pada minggu keempat, kegiatan yang dilakukan terdiri dari mempelajari dan praktik menggunakan third-party library dari JavaScript kemudian praktik membuat dummy web menggunakan ReactJS.
Pada minggu kelima, kegiatan yang dilakukan terdiri dari beradaptasi dengan sebuah project di 1 tim kemudian mempelajari business flow dan technology stack yang digunakan pada Sistem Akademik Edukarsa.
Pada minggu keenam, kegiatan yang dilakukan terdiri dari melakukan observasi dan mempelajari perancangan modul Akademik dengan tim kemudian brainstorming terhadap modul Akademik.
Pada minggu ketujuh, kegiatan yang dilakukan terdiri dari mengimplementasikan hasil perancangan ke dalam bahasa pemrograman, penyusunan component functional ReactJS setiap menu modul Akademik,
Merancang styling menggunakan React-Bootstrap library component pada menu Pengaturan, Membuat functionality API untuk modul Akademik di setiap menu Pada minggu kedelapan, kegiatan yang dilakukan terdiri dari implementasi API modul Akademik pada setiap subbagian mulai dari Pengaturan hingga Input Penilaian, melakukan dev-box testing pada modul Akademik, melakukan merge request pada bagian subbagian modul Akademik
3.3 Perangkat yang Digunakan
Dalam proses kerja magang terdapat software dan hardware yang digunakan.
Beberapa sofware yang digunakan antara lain sebagai berikut.
1. Visual Studio Code, sebagai text editor-nya.
2. Google Chrome sebagai browser.
18
3. Github dan Git sebagai version control system.
Beberapa hardware yang digunakan antara lain sebagai berikut.
1. MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports).
a. 2 GHz Quad-Core Intel Core i5.
b. 16 GB 3733 MHz LPDDR4X.
c. Intel Iris Plus Graphics 1536 MB.
d. Memori Penyimpanan 512GB.
3.4 Proses Pelaksanaan
Proses pelaksanaan kerja magang terbagi menjadi 2 bagian yang meliputi perancangan dan implementasi.
3.4.1 Perancangan
Perancangan website terbagi dalam beberapa sub bagian yang meliputi dan flowchart frontend
19
Gambar 3.2 User Requirement
Gambar 3.3 merupakan gambar User Requirement. Sub menu akademik terdiri dari modul kelompok maple (mata pelajaran), modul daftar mapel, modul penerapan guru mengajar, modul distribusi guru mengajar, modul mapel peserta didik.
Pada kelompok mapel terdiri dari petunjuk penggunaan dan tabel kelompok mata pelajaran dengan fitur, yaitu nomor, kelompok mata pelajaran, akronim, tombol hapus, button penetapan mata pelajaran.
Pada daftar mapel pounjuk penggunaan (text) dan tabel kelompok mata pelajaran yang memiliki fitur yang terdiri dari kode mapel (edited), nama mata
20
pelajaran di rapor (edited), nama mata pelajaran (edited), button hapus, tambah mata pelajaran (drop down search) dengan keterangan minimal 3 karakter.
Pada bagian penetapan guru mengajar dibagi mendaji 2 yaitu form penetapan distribusi tugas mengajar dan tabel tugas mengajar. Penetapan distribusi tugas mengajar yang memiliki fitur, yaitu pilih guru, pilih mapel, pilih rombel, button simpan. Bagian tugas mengajar yang memilki fitur guru, mata pelajaran, kelas, jumlah peserta didik, detail (click dan muncul pop up), button hapus. Selain itu, (muncul pop up) tabel daftar peserta didik fitur 1. nomor 2 peserta? (switch button on / off 3. kelas 4 NIS, nama peserta didik, button hapus.
Pada bagian distribusi guru mengajar terdiri dari form data pembagian tugas mengajar dan tabel tugas mengajar. Form data pembagian tugas mengajar mempunyai fitur, yaitu pilih rombel, pilih guru, button lihat. tabel tugas mengajar memiliki fitur, yaitu guru, mata pelajaran, kelas, jumlah peserta didik, detail (click (dan muncul pop up), button hapus. Selain itu, (muncul pop up) tabel daftar dengan fitur nomor, peserta? (switch button on / off), kelas, nis, nama peserta didik, button hapus.
PadaMapel Peserta Didik terbagi menjadi 3 yaitu petunjuk penggunaan (text), form pilih peserta didik dengan fitur pilih siswa, nis, button update serta tabel daftar mata pelajaran pesserta didik dengan fitur mata pelajaran, guru, button hapus
21
Gambar 3.3 Rancangan Sub Menu Akademik
Gambar 3.3 merupakan rancangan sub menu akademik. Modul Akademik terdiri dari menu Pengaturan, menu Perangkat, menu Proses KBM, menu Input Penilaian, Rekap Penilaian, Catatan Wali Kelas, Laporan Penilaian. Menu Pengaturan terdiri dari Teknik penilaian dan KKM, menu Perangkat terdiri memiliki sub menu Kompetensi Dasar, menu Proses terdiri dari Input Jurnal, Penilaian Karakter, dan Progress KBM. Menu Input Penilaian terdiri dari sub menu sikap, karakter, pengetahuan, keterampilan, penilaian sekolah, nilai PKL(Praktik Kerja Lapangan) serta menu Laporan Penilaian yang terdiri dari Rapor MID dan Rapor Semester.
B. Flowchart
22
Gambar 3.4 Flowchart Teknik Penilaian
Gambar 3.4 adalah gambar flowchart teknik penelitian. Pada bagian ini, sistem akan mengakses api untuk mendapatkan data teknik penilaian kemudian mengenerate data tersebut. Setelah itu, data teknik penilaian dalam bentuk tabel.
Gambar 3.5 Flowchart KKM
Gambar 3.5 adalah gambar flowchart KKM. Pada bagian ini, user diminta untuk memilih mata pelajaran kemudian request akan dikirim ke api. Jika berhasil mendapatkan data mata pelajaran maka sistem akan menampilkan data KKM dalam bentuk tabel. Jika tidak berhasil mendapatkan data mata pelajaran maka sistem akan meminta ulang inputan user.
23
Gambar 3.6 Flowchart Kompetensi Dasar
Gambar 3.6 adalah gambar flowchart Kompetensi Dasar. Pada bagian ini, user akan diminta untuk memilih mata pelajaran kemudian inputan akan request ke api untuk meminta data mata pelajaran. Jika tidak berhasil mendapatkan datanya maka sistem akan meminta user untuk menginput ulang. Jika api berhasil memberikan data mata
24
pelajaran maka user akan diminta untuk memilih jenjang atau program. Setelah itu sistem akan mengirim request nya ke api. Jika api gagal mendapatkan jenjang atau program maka user perlu memilih ulang jenjang / program. Jika berhasil mendapatkan datanya maka sistem akan menampilkan data kompetensi
dasar.
Gambar 3.7 Flowchart Input Jurnal
Gambar 3.7 adalah gambar flowchart Input Jurnal. Pada bagian ini, sistem akan menampilkan form input jurnal. Setelah itu, user perlu menginput form tersebut kemudian sistem akan me request data ke api sesuai dengan inputan. Sistem akan mengembalikan data jurnal sesuai inputan kemudian data jurnal akan ditampilkan.
25
Gambar 3.8 Flowchart Progress KBM
Gambar 3.8 adalah gambar flowchart progress KBM. Pada bagian ini, user akan diminta untuk menginput form progress KBM. Setelah itu sistem akan me request api untuk meminta data progress KBM. Setelah itu api akan mengembalikan data progress KBM sesuai dengan inputan user.
26
Gambar 3.9 Flowchart Nilai Sikap
Gambar 3.9 adalah gambar flowchart nilai sikap. Pada bagian ini, sistem akan diminta untuk mengisi form nilai sikap. Setelah itu sistem akan me request data nilai sikap ke api. Lalu api akan mengembalikan data nilai sikap sesuai dengan inputan form dari user.
27
Gambar 3.10 Flowchart nilai karakter
Gambar 3.10 adalah gambar flowchart form nilai karakter. Pada bagian ini, sistem akan meminta user untuk menginput form nilai karakter. Setelah user menginput, sistem akan me request data nilai karakter ke api. Setelah itu api akan mengembalikan data nilai karakter.
28
Gambar 3.11 Flowchart Nilai Pengetahuan
Gambar 3.11 adalah gambar flowchart nilai pengetahuan. Pada bagian ini, user akan diminta sistem untuk menginput form nilai pengetahuan. Kemudian sistem akan me request data nilai pengetahuan ke api. Setelah itu api akan mengembalikan data nilai pengetahuan ke sistem kemudian ditampilkan
29
Gambar 3.12 Flowchart Data Keterampilan
Gambar 3.12 adalah gambar flowchart data keterampilan. Pada bagian ini, user akan diminta sistem untuk menginput form nilai keterampilan. Kemudian sistem akan me request data nilai keterampilan ke api. Setelah itu api akan mengembalikan data nilai keterampilan ke sistem kemudian ditampilkan
30
Gambar 3.13 Flowchart Nilai PKL
Gambar 3.13 adalah gambar flowchart nilai PKL. Pada bagian ini, user akan diminta sistem untuk menginput form nilai PKL. Kemudian sistem akan me request data nilai PKL ke api. Setelah itu api akan mengembalikan data nilai PKL ke sistem kemudian ditampilkan
31
Gambar 3.14 Flowchart Catatan Wali Kelas
Gambar 3.14 adalah gambar flowchart catatan wali kelas. Pada bagian ini, api akan mengirimkan data catatan wali kelas ke sistem kemudian di generate lalu sistem akan menampilkannya.
Gambar 3.15 Flowchart Rapor MID
Gambar 3.15 adalah gambar flowchart rapor MID. Pada bagian ini, api akan mengirimkan data Rapor MID ke sistem kemudian di generate lalu sistem akan menampilkannya.
32
Gambar 3.16 Flowchart Rapor Semester
Gambar 3.16 adalah gambar flowchart rapor semester. Pada bagian ini, api akan mengirimkan data rapor semester ke sistem kemudian di generate lalu sistem akan menampilkannya.
3.4.2 Implementasi
33
Gambar 3.17 Sub Menu Akademik
Gambar 3.17 merupakan halaman sub menu akademik . Pada bagian ini akan menampilkan menu akademik yang terdiri dari pengaturan, pengaturan, proses KBM ( Kegiatan Belajar Mengajar ), input penilaian, rekap penilaian, catatan wali kelas, laporan penilaian.
Gambar 3.18 Menu Pengaturan
Gambar 3.18 merupakan menu pengaturan yang terdiri dari teknik penilaian dan KKM ( Kriteria Ketuntasan Minimal )
34
Gambar 3.19 Menu teknik penilaian
Gambar 3.19 merupakan menu teknik penilaian. Pada bagian ini akan menampilkan tabel pengaturan teknik penilaian yang digunakan. Tabel ditampilkan dalam 10 baris. User dapat memilih untuk menampilkan 10, 25, 30 atau 50. User dapat mencari data di input text berdasarkan kompetensi inti, teknik penilaian, bobot penilaian harian.
35
Gambar 3.20 merupakan menu pengaturan KKM per mapel. Pada bagian ini, user dapat memilih mata pelajaran yang akan diatur KKM-nya
Gambar 3.20 Menu kompetensi dasar
Gambar 3.20 merupakan menu kompetensi dasar. Pada bagian ini, user dapat memilih mata pelajaran yang akan diatur kompetensi dasarnya.
Gambar 3.20 Menu Proses KBM
Gambar 3.20 merupakan menu proses KBM. Pada bagian ini akan menampilkan menu proses yang terdiri dari input jurnal, penilaian karakter, progress KBM.
36
Gambar 3.21 Menu input jurnal harian
Gambar 3.21 merupakan input jurnal harian. Pada bagian ini, user dapat memilih mata pelajaran untuk di-input jurnal harian pengajarannya selama di kelas.
Gambar 3.22 Sub Menu input penilaian
Gambar 3.22 merupakan menu input penilaian. Pada bagian ini akan menampilkan menu yang terdiri dari menu sikap, karakter, pengetahuan, keterampilan, penilaian sekolah, nilai PKL.
37
Gambar 3.23 Menu input nilai sikap
Gambar 3.23 merupakan halaman input nilai sikap. Pada bagian ini, user dapat menginput tanggal penilaian. Selain itu, user dapat memilih guru yang akan dinilai sikapnya.
38
Gambar 3.24 Sub Menu Nilai Karakter
Gambar 3.24 merupakan halaman sub menu nilai karakter. Pada halaman ini terdapat form konfigurasi penilaian karakter dan daftar catatan peserta didik. User dapat memilih kelas yang ingin dinilai karakternya. kemudian sistem akan menampilkan semua peserta didik sesuai kelasnya. setelah itu user dapat menginput penilaian masing - masing peserta didik dan menyimpannya.
39
Gambar 3.25 merupakan halaman sub menu nilai pengetahuan. Pada bagian ini user dapat menginput tanggal penilaian serta guru yang akan diinput nilai pengetahuannya.
Gambar 3.26 Sub Menu Input Nilai Keterampilan
Gambar 3.26 merupakan halaman sub menu input nilai keterampilan. Pada bagian ini user dapat menginput tanggal penilaian serta memilih guru yang akan diinput penilaian keterampilannya.
40
Gambar 3.27 Sub Menu Input Nilai Sekolah
Gambar 3.27 merupakan halaman sub menu input nilai sekolah. Pada bagian ini, user dapat menginput tanggal penilaian serta memilih guru yang akan diinput nilai dari ujian yang diselenggarakan.
Gambar 3.28 Sub Menu Akademik
Gambar 3.28 merupakan halaman nilai praktik kerja lapangan (PKL). Pada bagian ini akan menampilkan form input nilai praktik kerja lapangan dengan memasukkan kelas dan data table akan muncul hasil yang diinput.
41
Gambar 3.29 Halaman Menu rekap penilaian
Gambar 3.29 merupakan halaman menu rekap penilaian. Pada halaman ini, sistem akan meminta user untuk menginput guru, mata pelajaran, kelas. Jika user menekan button tampilkan maka sistem akan me request data ke api sesuai dengan inputan yang dimasukkan kemudian menampilkannya.
42
Gambar 3.30 Halaman Catatan Wali Kelas
Gambar 3.30 merupakan halaman catatan wali kelas. Pada halaman ini, sistem akan mengambil data kelas kemudian sistem akan menampilkannya dalam bentuk dropdown. User dapat memilih kelas yang diberikan. Setelah memilih kelas, sistem akan me request inputan yang dipilih ke api kemudian mengembalikan data catatan wali kelas sesuai dengan inputannya
Gambar 3.31 Menu Laporan Penilaian
Gambar 3.31 merupakan menu laporan penilaian. Pada bagian ini terdapat menu laporan penilaian yang memiliki 2 sub menu, yaitu rapor MID dan rapor semester.
Jika user memilih menu rapor MID maka sistem akan mengarahkan user ke halaman rapor MID. Jika user memilih menu rapor semester makan sistem akan mengarahkan user ke halaman rapor semester.
43
Gambar 3.32 Halaman Rapor MID
Gambar 3.32 merupakan halaman rapor MID. Pada halaman ini, sistem akan meminta user untuk menginput form filter cetak rapor semester yang terdiri dari tanggal rapor dalam bentuk tanggal, kelas yang ditampilkan dalam bentuk dropdown, jenis nilai yang ditampilkan dalam bentuk dropdown, kepala sekolah dalam bentuk radio button. User dapat memilih preview untuk memilih data sesuai dengan inputan atau mengunduh datanya dengan mengklik tombol ‘download’.
44
Gambar 3.33 Halaman rapor akhir semester
Gambar 3.33 merupakan halaman rapor akhir semester. Pada halaman ini, sistem akan meminta user untuk menginput form filter cetak rapor semester yang terdiri dari tanggal rapor dalam bentuk tanggal, kelas yang ditampilkan dalam bentuk dropdown, jenis nilai yang ditampilkan dalam bentuk dropdown, kepala sekolah dalam bentuk radio button. User dapat memilih preview untuk memilih data sesuai dengan inputan atau mengunduh datanya dengan mengklik tombol ‘download’.
45
Dalam pelaksanaan praktik kerja magang, terdapat beberapa kendala yang ditemukan. Kendala yang ditemukan selama pelaksanaan praktik kerja magang adalah sebagai berikut.
1. Implementasi slicing user interface design di framework ReactJS.
Memerlukan banyak css properties di setiap menu pada modul Akademik membuat codebase tidak beraturan sehingga sulit dipahami pada saat melakukan dokumentasi.
2. Tampilan website tidak responsif.
Pada saat implementasi design di framework ReactJS beberapa layout menu tidak responsif terhadap ukuran masing-masing device sehingga tampilan aplikasi tidak memenuhi syarat user friendly.
3. Infinite loop pada nilai siswa.
Ketika guru ingin melihat dan memasukkan nilai siswa, terjadi kesalahan pada saat memanggil API rekap penilaian sehingga menyebabkan aplikasi tidak berfungsi dan diakses.
3.6 Solusi atas Kendala yang Ditemukan
Dari beberapa kendala selama proses pelaksanaan praktik kerja magang dilakukan langkah solusi yang dapat menjadi jalan keluar dari permasalahan yang dihadapi.
Penjelasan terhadap solusi atas kendala yang ditemukan adalah sebagai berikut.
46
1. Melakukan perancangan design system pada codebase.
Solusi dari permasalahan ini dengan menerapkan Atomic Design pada kode arsitektur agar mudah dipahami dan dimengerti oleh engineer lainnya, serta dapat didokumentasikan dengan baik.
2. Menggunakan UI component library .
Solusi dari permasalahan ini dengan menggunakan react-bootstrap. reactbootstrap dapat menyesuaikan ukuran masing-masing device sehingga dapat menggunakan functional component khusus agar tidak memakan waktu yang lama dalam merancang user interface.
3. Melakukan loop di server-side
Solusi dari permasalahan ini dengan membuat beberapa kondisi dan perulangan di di server-side agar tidak menyebabkan infinite loop pada saat user mengirimkan API request di halaman penilaian.
