IDSTAR
CIPTA TEKNOLOGI MENGGUNAKAN APPSMITH
MAGANG
MAGANG
i
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
PERNYATAAN TIDAK MELAKUKAN PLAGIAT
ii
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
HALAMAN PENGESAHAN
oleh
Dosen Pembimbing
Penguji
(Samuel, M.T.I.)
NIDN: 0304038902
iii
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK
KEPENTINGAN AKADEMIS
Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Non eks-
klusif ini Universitas Multimedia Nusantara berhak menyimpan, mengalih media
/ format-kan, mengelola dalam bentuk pangkalan data (database), merawat, dan
mempublikasikan tugas akhir saya selama tetap mencantumkan nama saya sebagai
penulis / pencipta dan sebagai pemilik Hak Cipta. Demikian pernyataan ini saya
buat dengan sebenarnya.
iv
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Halaman Persembahan / Motto
v
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
KATA PENGANTAR
Puji Syukur atas berkat dan rahmat kepada Tuhan Yang Maha Esa, atas se-
lesainya penulisan laporan Magang ini dengan judul: Rancang Bangun Aplikasi
Payment Request PT. IDStar Cipta Teknologi Menggunakan Appsmith dilakukan
untuk memenuhi salah satu syarat untuk mencapai gelar Sarjana Komputer Jurusan
Teknik Komputer Pada Fakultas Teknik dan Informatika Universitas Multimedia
Nusantara. Saya menyadari bahwa, tanpa bantuan dan bimbingan dari berbagai pi-
hak, dari masa perkuliahan sampai pada penyusunan laporan magang ini, sangatlah
sulit bagi saya untuk menyelesaikan laporan magang ini. Oleh karena itu, saya
mengucapkan terima kasih kepada:
2. Dr. Eng. Niki Prastomo, S.T., M.Sc., selaku Dekan Fakultas Teknik dan
Informatika Universitas Multimedia Nusantara.
6. Orang Tua dan keluarga saya yang telah memberikan bantuan dukungan ma-
terial dan moral, sehingga penulis dapat menyelesaikan tesis ini.
Semoga laporan magang ini bermanfaat, baik sebagai sumber informasi maupun
sumber inspirasi, bagi para pembaca.
vi
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
RANCANG BANGUN APLIKASI PAYMENT REQUEST PT. IDSTAR
CIPTA TEKNOLOGI MENGGUNAKAN APPSMITH
Rupertus Herlambang Eko Nugroho
ABSTRAK
Laporan magang ini berisi tentang pelaksanaan kegiatan kerja magang yang di-
lakukan di PT. IDStar Cipta Teknologi selama 92 hari yang dimulai dari 8 Februari
2022 hingga 30 Juni 2022. Tugas utama yang diberikan adalah melakukan per-
ancangan dan pembuatan website untuk mencatat kegiatan payment request yang
terjadi di dalam internal perusahaan. Aplikasi dibuat menggunakan platform low-
code Appsmith dan digabungkan dengan Amazon Web Services untuk pembuatan
sistem database, pengiriman email, dan media penyimpanan. Di dalam aplikasi
tersebut, user dapat melakukan permohonan payment request yang ingin diajukan.
Payment request yang sudah diajukan akan dilakukan approval sesuai dengan prose-
dur yang berlaku di dalam internal perusahaan. User inputter juga dapat melakukan
edit atau delete sebelum melakukan submit for approval dan pihak finance juga
dapat mengedit beberapa informasi dari paymetn request yang diajukan oleh user
inputter apabila ada kesalahan pengetikan atau input. Dalam pembuatan aplikasi
ini juga sudah disediakan fitur superadmin yang berguna untuk mengatur approval
pihak finance dan menambahkan item list yang terdapat di dalam aplikasi utama
payment request.
vii
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Design and Build a Payment Request Application for PT. IDStar Cipta
Teknologi using Appsmith
Rupertus Herlambang Eko Nugroho
ABSTRACT
viii
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
DAFTAR ISI
HALAMAN JUDUL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
PERNYATAAN TIDAK MELAKUKAN PLAGIAT . . . . . . . . . . . . . . ii
HALAMAN PENGESAHAN . . . . . . . . . . . . . . . . . . . . . . . . . iii
HALAMAN PERSETUJUAN PUBLIKASI ILMIAH . . . . . . . . . . . . . iv
HALAMAN PERSEMBAHAN/MOTO . . . . . . . . . . . . . . . . . . . . v
KATA PENGANTAR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi
ABSTRAK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
ABSTRACT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
DAFTAR ISI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
DAFTAR GAMBAR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
DAFTAR TABEL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii
DAFTAR LAMPIRAN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
BAB 1 PENDAHULUAN . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 Latar Belakang Masalah . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Maksud dan Tujuan Kerja Magang . . . . . . . . . . . . . . . . . . 1
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang . . . . . . . . . . . 1
BAB 2 GAMBARAN UMUM PERUSAHAAN . . . . . . . . . . . . . . . 2
2.1 Sejarah Singkat Perusahaan . . . . . . . . . . . . . . . . . . . . . . 2
2.2 Visi dan Misi Perusahaan . . . . . . . . . . . . . . . . . . . . . . . 2
2.3 Struktur Organisasi Perusahaan . . . . . . . . . . . . . . . . . . . . 3
BAB 3 PELAKSANAAN KERJA MAGANG . . . . . . . . . . . . . . . . 4
3.1 Kedudukan dan Organisasi . . . . . . . . . . . . . . . . . . . . . . 4
3.2 Tugas yang Dilakukan . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.3 Uraian Pelaksanaan Magang . . . . . . . . . . . . . . . . . . . . . 5
3.4 Tech Stack yang Digunakan . . . . . . . . . . . . . . . . . . . . . . 7
3.5 Flow Aplikasi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.5.1 Pengajuan Payment Request . . . . . . . . . . . . . . . . . 7
3.5.2 Approval Payment Request . . . . . . . . . . . . . . . . . . 9
3.6 Fitur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.6.1 Aplikasi Payment Request . . . . . . . . . . . . . . . . . . 11
3.6.2 Aplikasi Superadmin Payment Request . . . . . . . . . . . 16
3.7 Sistem Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.7.1 Alert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.7.2 Bank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.7.3 Beneficiary . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.7.4 COA (Chart of Accounts) . . . . . . . . . . . . . . . . . . . 25
3.7.5 Company . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.7.6 Currency . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.7.7 DepartmentType . . . . . . . . . . . . . . . . . . . . . . . 27
3.7.8 Employee . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.7.9 ExpenseType . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.7.10 FinancePersonnel . . . . . . . . . . . . . . . . . . . . . . . 30
3.7.11 PaymentRequest . . . . . . . . . . . . . . . . . . . . . . . 32
3.7.12 Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.7.13 PymntReqDetail . . . . . . . . . . . . . . . . . . . . . . . 40
3.7.14 RequestStatus . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.8 Kendala dan Solusi yang Ditemukan . . . . . . . . . . . . . . . . . 41
BAB 4 SIMPULAN DAN SARAN . . . . . . . . . . . . . . . . . . . . . . 43
ix
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
4.1 Simpulan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.2 Saran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
DAFTAR PUSTAKA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
x
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
DAFTAR GAMBAR
xi
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
DAFTAR TABEL
xii
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
DAFTAR LAMPIRAN
xiii
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
BAB 1
PENDAHULUAN
Pada setiap perusahaan, pasti akan terjadi suatu transaksi dalam kegiatan
bisnis di dalam perusahaan tersebut. Namun setiap transaksi di dalam perusahaan
tersebut tentunya juga perlu dicatat agar tidak terjadi penyalahgunaan dana perusa-
haan. Oleh karena itu, setiap perusahaan wajib memiliki sistem untuk mengawasi
transaksi yang terjadi di dalam perusahaan tersebut.
Begitu pula yang terjadi pada perusahaan PT. IDStar Cipta Teknologi yang
bergerak di bidang outsourcing tenaga kerja dalam bidang IT. Di dalam perusa-
haan ini, setiap transaksi yang terjadi akan dicatat dan memerlukan request approval
pada setiap transaksinya. Namun, sistem yang digunakan dilakukan secara manual
dan memakan banyak waktu dalam melakukan request approval dari transaksi yang
sedang dan/atau akan terjadi. Oleh karena itu, perusahaan memerlukan sistem yang
lebih modern dan terstruktur, serta tidak memakan banyak waktu dalam melakukan
request approval.
Tujuan umum penulis melakukan kerja magang adalah agar dapat menge-
nal dunia kerja, mendapatkan pengalaman kerja, menerapkan dan memperdalam
ilmu-ilmu yang telah dipelajari selama perkuliahan, serta membangun relasi de-
ngan karyawan di PT. IDStar Cipta Teknologi. Selain itu, tujuan penulis melakukan
kerja magang di PT. IDStar Cipta Teknologi yaitu mempelajari keahlian di bidang
sistem informasi, terutama dalam bidang backend developer, dalam penerapan di
kehidupan kerja nyata.
1
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
BAB 2
GAMBARAN UMUM PERUSAHAAN
PT. IDStar Cipta Teknologi berdiri pada tahun 2018 yang terletak di Gedung
Wisma Staco Lantai 7 Jl. Casablanca Raya Kav. 18, Menteng Dalam, Tebet, Jakarta
Selatan. Perusahaan ini dipimpin oleh Bapak Ferdinand Prasetyo selaku Chief Exec-
utive Officer. PT IDStar Cipta Teknologi merupakan perusahaan outsourcing yang
berfokus pada penyediaan layanan IT profesional melalui konsultasi untuk individu
dan perusahaan[1].
PT. IDStar Cipta Teknologi merupakan bagian dari IDStar Group yang di-
pimpin Ibu Arifa Tan sebagai Group CEO. IDStar Group terdiri dari beberapa pe-
rusahaan, yang terdiri dari PT. Mitra Teknologi Kreasi, PT. Drife Solusi Integrasi,
Technology Visionaries Sdn. Bhd., dan PT. IDStar Cipta Teknologi sendiri.
2
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
5. E – Entrepreneur Spirit : Setiap karyawan harus memiliki semangat en-
trepreneurship dalam setiap pekerjaannya
3
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
BAB 3
PELAKSANAAN KERJA MAGANG
4
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
1. Membuat backend dari website payment request selama periode magang
menggunakan low-code programming Appsmith.
Hingga saat penulis melakukan penulisan laporan ini, penulis telah melak-
sanakan kegiatan magang selama 4 bulan lebih 2 minggu (18 minggu) dari durasi
perjanjian magang yang telah ditentukan yakni selama 6 bulan. Kegiatan magang
penulis lakukan dari tanggal 8 Februari 2022 hingga 8 Agustus 2022. Proses pelak-
sanaan dan pengerjaan magang dalam kurun waktu 5 bulan tersebut dapat dilihat
pada Tabel 3.1.
5
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.1. Pekerjaan yang dilakukan tiap minggu selama pelaksanaan kerja magang
2. Database : MySQL
7
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Gambar 3.1. Flowchart Aplikasi Payment Request
8
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
3.5.2 Approval Payment Request
Setiap payment request yang telah diajukan oleh user inputter perlu di-
lakukan approval. Setelah user menekan tombol request for approval, user leader
dari user inputter akan dikirimi email notifikasi bahwa ada payment request yang
perlu dilakukan approval dan status berubah menjadi WALD (Waiting for Leader
Approval). Setelah user leader melakukan approval, selanjutnya user dept head akan
dikirimi email notifikasi seperti sebelumnya dan status berubah menjadi WAHD
(Waiting for Head of Department Approval). Begitu pula seterusnya hingga ap-
proval C Level (CEO). Setelah user C level melakukan approval, apilikasi akan
melihat dahulu apakah jenis payment request yang diajukan merupakan jenis pay-
ment request baru atau jenis payment request Settlement. Jika jenis payment request
yang diajukan merupakan jenis payment request baru, maka status akan berubah
menjadi WRLS (Waiting to be Released) dan user Finance akan dikirimi email
notifikasi bahwa terdapat payment request yang perlu dirilis. Saat tim Finance
melakukan rilis, mereka perlu memberikan bukti transfer atas payment request yang
diajukan. Setelah melakukan upload bukti transfer, status berubah menjadi RLSF
(Released by Finance) dan user inputter akan dikirimi email notifikasi bahwa pay-
ment request yang diajukan sudah dirilis oleh tim Finance. Dan jika jenis pay-
ment request yang diajukan merupakan jenis payment request Settlement, maka
aplikasi akan melihat dahulu apakah nilai/jumlah uang yang dimasukkan lebih dari,
kurang dari, sama dengan, atau tidak digunakan sama sekali uang tersebut. Jika
lebih dari, flow yang dijalankan sama seperti flow saat mengajukan payment re-
quest baru. Jika jumlah yang dimasukkan kurang dari atau tidak digunakan sama
sekali, user akan mengembalikan uang tersebut ke pemberi dana. Dan jika jumlah
yang diajukan penggunaannya sama dengan uang yang digunakan maka pengajuan
settlement akan langsung selesai. Berikut flow dalam melakukan approval :
9
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Gambar 3.2. Flowchart Approval Aplikasi Payment Request
3.6 Fitur
Pada aplikasi payment request ini digunakan untuk seluruh karyawan yang
ada di perusahaan. Oleh karena itu, pada aplikasi ini diperlukan beberapa roles
untuk setiap usernya. Terdapat 3 roles untuk usernya, yaitu :
1. Inputter : user inputter dapat membuat payment request yang ingin diajukan.
User inputter juga dapat menambahkan atau menghapus item payment re-
quest yang pernah dilakukan, serta mengedit atau menghapus payment re-
quest yang pernah dibuat jika user inputter belum melakukan submit.
2. Leader, Dept Head, CEO, dan CFO : user ini dapat melakukan approval atau
rejection dari payment request yang telah diajukan.
3. Finance dan Finance Manager : user ini dapat melakukan approval atau rejec-
tion dari payment request yang telah diajukan. Selain itu, user ini juga dapat
10
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
melakukan edit dari payment request yang diajukan.
Pada aplikasi payment request ini terdapat dua aplikasi terpisah, yaitu apli-
kasi utama yang dapat digunakan oleh semua karyawan dan aplikasi superadmin
yang hanya dapat diakses oleh tim Finance. Berikut penjelasan dari masing-masing
aplikasi :
Pada aplikasi payment request, semua karyawan yang sudah terdaftar dalam
database dapat melakukan login aplikasi payment request dan melakukan pengajuan
payment request yang ingin diajukan. Pada aplikasi payment request ini terdapat
beberapa fitur pada setiap pagenya. Fitur-fitur tersebut di antaranya :
A. Login
Di sini user akan diminta untuk melakukan login menggunakan email. Dari
pihak C level, penulis diminta untuk melakukan list email dari semua karyawan
yang ada dan user hanya perlu memilih email mereka tanpa perlu mengetiknya.
Dan setelah user memilih email mereka, penulis juga diminta untuk menggu-
nakan metode login menggunakan kode OTP. Hal tersebut dikarenakan jika user
melakukan login menggunakan password pada umumnya, user akan cenderung lupa
dan perlu mereset password mereka yang mana akan memakan waktu.
(a) (b)
Gambar 3.3. Tampilan Login 3.3a dan Ketika Masuk ke Dalam Aplikasi Belum Melakukan
Login 3.3b
11
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
B. Payment Request List
Pada page ini, user dapat melihat list payment request yang pernah diajukan.
User juga dapat melakukan filter dari payment request yang ada. Pada page ini user
juga dapat melakukan approval, rejection, release, deletion, dan edit pada payment
request yang akan dan/atau sedang diajukan sesuai dengan roles yang sebelumnya
penulis sudah dijelaskan. Untuk fitur approval, user juga dapat melakukan approval
secara massal (approval untuk banyak payment request). User juga dapat melihat
preview dari detail item payment request yang diinput pada setiap payment request
yang telah diajukan. Selain itu, user juga dapat mengunduh dokumen releasal trans-
fer receipt yang pernah diunggah.
Pada page ini, user dapat melihat informasi dari detail-detail item payment
request yang diajukan. Di sini user juga dapat melihat history dari approval yang
telah dilakukan. User juga dapat melakukan approval, reject, release, edit, dan
delete pada payment request yang dipilih sesuai dengan roles yang sebelumnya
penulis sudah dijelaskan. Serta user juga dapat melihat dan mengunduh invoice
dari item yang pernah diunggah sebelumnya saat melakukan input payment request.
Di page ini, user inputter juga dapat melakukan request for approval. Setelah user
melakukan request for approval, payment request yang dibuat akan diberikan Re-
quest ID yang di-generate secara otomatis.
12
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Gambar 3.5. Tampilan page Payment Request Detail List
Pada page ini terbagi menjadi dua bagian, yaitu page untuk menginput pay-
ment request header dan page untuk menginput payment request detail. Pada page
payment request header digunakan untuk menginput informasi yang ditampilkan
pada page payment request list dan pada header di Payment Request Detail List.
Informasi-informasi tersebut di antara seperti periode payment request, nama pe-
rusahaan, nama departemen perusahaan, jenis pengeluaran, jatuh tempo pemba-
yaran, jenis mata uang, dan beneficiary. Setelah user mengisi data yang ada di pay-
13
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
ment request header, user dapat melakukan submit dan user akan dibawa ke page
input payment request detail. Page input payment request detail ini digunakan untuk
memasukkan item-item yang ingin diajukan payment request. Pada page input pay-
ment request detail, user dapat memasukkan informasi seperti COA, deskripsi per
item, nominal (harga) dari item, dan mengunggah invoice dari item yang diajukan.
Setelah user
(a)
(b)
Gambar 3.6. Tampilan Input Payment Request Header 3.6a dan Detail 3.6b
Page edit payment request ini juga memiliki tampilan yang mirip seperti
pada page input payment request. Pada page ini juga terbagi menjadi dua bagian,
yaitu page untuk mengedit payment request header dan page untuk mengedit
payment request detail. Akan tetapi, kedua page tersebut hanya berfungsi pada
14
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
satu bagian saja. Pada page edit payment request header hanya digunakan untuk
mengedit header pada payment request yang dibuat, dan page edit payment request
detail hanya digunakan untuk mengedit informasi per masing-masing item dalam
satu payment request.
(a) (b)
Gambar 3.7. Tampilan Edit Payment Request Header 3.7a dan Detail 3.7b
F. Project
15
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
G. Report
Pada page ini user dapat melihat jumlah total dari setiap transaksi yang ber-
jalan pada setiap perusahaan. Transaksi yang berjalan dikelompokkan berdasarkan
mata uang yang pernah dipilih saat melakukan payment request pada setiap perusa-
haan.
Pada aplikasi superadmin payment request hanya dapat diakses oleh tim Fi-
nance. Pada aplikasi superadmin ini, terdapat beberapa page untuk mengelola be-
berapa hal yang berada pada aplikasi payment request, antara lain :
A. Employee
16
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Gambar 3.10. Tampilan page Employee pada Superadmin Payment Request
B. Finance Team
Gambar 3.11. Tampilan page Finance Team pada Superadmin Payment Request
17
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
C. Department
D. Company
E. COA
18
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Gambar 3.14. Tampilan page COA pada Superadmin Payment Request
F. Bank
G. Currency
19
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
H. Expense Type
Gambar 3.17. Tampilan page Expense Type pada Superadmin Payment Request
I. Beneficiary
J. Project
20
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Gambar 3.19. Tampilan page Beneficiary pada Superadmin Payment Request
1. Alert
2. Bank
3. Beneficiary
4. COA
5. Company
6. Currency
7. DepartmentType
8. Employee
9. ExpenseType
10. FinancePersonnel
11. PaymentRequest
12. Project
13. PymntReqDetail
14. RequestStatus
21
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Jika dilihat dari sisi backend, table-table tersebut penulis buat secara lang-
sung pada database MySQL menggunakan aplikasi SQLyog yang kemudian untuk
melakukan CRUD dilakukan dengan melakukan RAW query pada aplikasi Appm-
sith. Hal tersebut penulis lakukan karena pada aplikasi Appsmith hanya dapat
melakukan RAW data query dari database yang penulis miliki. Dan untuk pengga-
bungan data dari setiap table yang ada, penulis menggunakan function JOIN. Untuk
ERD (Entity Relationship Diagram) dapat dilihat pada gambar berikut :
22
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Gambar 3.20. ERD Aplikasi Payment Request
Pada setiap table tersebut memiliki column yang berbeda-beda, antara lain :
3.7.1 Alert
Pada table Alert ini digunakan untuk menyimpan alert notification kepada
user pada saat menggunakan aplikasi payment request. Kolom-kolom yang terdapat
23
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
pada table ini di antaranya :
3.7.2 Bank
Pada table Bank ini digunakan untuk menyimpan bank-bank yang akan di-
gunakan dalam aplikasi payment request. Kolom-kolom yang terdapat pada table
ini di antaranya :
3.7.3 Beneficiary
24
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.4. Table Beneficiary
Pada table COA digunakan untuk menyimpan jenis pembukuan dari pay-
ment request yang dilakukan. Kolom-kolom yang terdapat pada table ini di an-
taranya :
25
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.5 Tabel COA (lanjutan)
Nama kolom Tipe data Deskripsi
COAStatus enum(’Active’, ’Inactive’) digunakan untuk mengatur status dari
COA.
3.7.5 Company
3.7.6 Currency
Pada table Currency digunakan untuk menyimpan jenis mata uang yang akan
digunakan saat melakukan payment request. Kolom-kolom yang terdapat pada table
ini di antaranya :
26
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.7. Table Currency
3.7.7 DepartmentType
27
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
3.7.8 Employee
28
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.9 Table Employee (lanjutan)
Nama kolom Tipe data Deskripsi
CompCode varchar(3) digunakan untuk menyimpan kode pe-
rusahaan tempat karyawan bekerja.
InputtedAt datetime digunakan untuk mencatat kapan data per
karyawan dimasukkan ke database dari
API perusahaan.
UpdatedAt datetime digunakan untuk mencatat kapan data per
karyawan diperbarui ke database dari API
perusahaan.
Token varchar(100) digunakan untuk session per user.
OTP varchar(100) digunakan untuk menampung sementara
kode OTP yang sudah di-generate pada
setiap user untuk melakukan autentikasi.
Setelah user sudah masuk ke dalam apli-
kasi, kode yang disimpan akan dihapus.
OTPExpTime datetime digunakan untuk menampung batas
waktu berlakunya kode OTP pada setiap
user.
OTPReqCount tinyint digunakan untuk menampung jumlah re-
quest OTP yang pernah dilakukan user
saat melakukan request OTP.
OTPNextReqTime datetime digunakan untuk mencatat waktu berikut-
nya user dapat melakukan request OTP
kembali.
LastLogin datetime digunakan untuk mencatat terakhir kali
user (karyawan) melakukan login ke apli-
kasi.
LastLogout datetime digunakan untuk mencatat terakhir kali
user (karyawan) melakukan logout dari
aplikasi.
29
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
3.7.9 ExpenseType
3.7.10 FinancePersonnel
30
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.11 Table FinancePersonnel (lanjutan)
Nama kolom Tipe data Deskripsi
IsEligibleToApv enum(’Yes’, ’No’) digunakan untuk mengatur akses yang da-
pat melakukan approval dari anggota tim
Finance.
IsActive enum(’Active’, ’Inac- digunakan untuk menentukan status
tive’) anggota tim Finance yang aktif dan tidak
aktif.
Token varchar(100) digunakan untuk menampung token login
pada aplikasi superadmin.
OTP varchar(100) digunakan untuk menampung sementara
kode OTP yang sudah di-generate pada
setiap user untuk melakukan autentikasi.
Setelah user sudah masuk ke dalam apli-
kasi, kode yang disimpan akan dihapus.
OTPExpTime datetime digunakan untuk menampung batas
waktu berlakunya kode OTP pada setiap
user (Finance).
OTPReqCount tinyint digunakan untuk menampung jumlah re-
quest OTP (Finance) yang pernah di-
lakukan user saat melakukan request
OTP.
OTPNextReqTime datetime digunakan untuk mencatat waktu berikut-
nya user (Finance) dapat melakukan re-
quest OTP kembali.
LastLogin datetime digunakan untuk mencatat terakhir kali
user (Finance) melakukan login ke apli-
kasi.
LastLogout datetime digunakan untuk mencatat terakhir kali
user (Finance) melakukan logout dari
aplikasi.
31
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
3.7.11 PaymentRequest
32
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.12 Table PaymentRequest (lanjutan)
Nama kolom Tipe data Deskripsi
PymtPlanDate date digunakan untuk menyimpan
tanggal payment request tersebut
akan dibayarkan yang dipilih
oleh user.
ExpTypeCode varchar(3) digunakan untuk menyimpan
kode jenis expense (pengeluaran)
pada payment request yang
dibuat yang dipilih oleh user.
OpsProjCode enum(’Operational’, digunakan untuk menyimpan pil-
’Project’) ihan jenis payment request yang
dibuat user digunakan untuk se-
buah proyek atau kegiatan opera-
tional perusahaan.
ProjectId int digunakan untuk menyimpan ID
project yang ada pada table
Project pilihan user jika user
memilih jenis payment request
untuk sebuah proyek pada pe-
rusahaan.
InputterEmpId varchar(10) digunakan untuk mencatat ID
karyawan yang melakukan pay-
ment request.
InputterEmail varchar(100) digunakan untuk mencatat email
karyawan yang memasukkan
payment request.
InputterName varchar(100) digunakan untuk mencatat nama
karyawan yang memasukkan
payment request.
InputDateTime datetime digunakan untuk mencatat waktu
karyawan yang memasukkan
payment request..
Lanjut pada halaman berikutnya
33
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.12 Table PaymentRequest (lanjutan)
Nama kolom Tipe data Deskripsi
LeaderEmpId varchar(10) digunakan untuk mencatat ID
leader karyawan yang melakukan
approval payment request.
LeaderEmail varchar(100) digunakan untuk mencatat email
leader karyawan yang melakukan
approval payment request.
LeaderName varchar(100) digunakan untuk mencatat nama
leader karyawan yang melakukan
approval payment request.
LeaderApvDateTime datetime digunakan untuk mencatat waktu
leader karyawan yang melakukan
approval payment request.
DeptHeadEmpId varchar(10) digunakan untuk mencatat
ID dept head karyawan yang
melakukan approval payment
request.
DeptHeadEmail varchar(100) digunakan untuk mencatat
email dept head karyawan yang
melakukan approval payment
request.
DeptHeadName varchar(100) digunakan untuk mencatat
nama dept head karyawan yang
melakukan approval payment
request.
DeptHeadApvDateTime datetime digunakan untuk mencatat
waktu dept head karyawan yang
melakukan approval payment
request.
CLevelEmpId varchar(10) digunakan untuk mencatat ID
karyawan C level (CEO) yang
melakukan approval payment re-
quest.
Lanjut pada halaman berikutnya
34
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.12 Table PaymentRequest (lanjutan)
Nama kolom Tipe data Deskripsi
CLevelEmail varchar(100) digunakan untuk mencatat email
karyawan C level (CEO) yang
melakukan approval payment re-
quest.
CLevelName varchar(255) digunakan untuk mencatat nama
karyawan C level (CEO) yang
melakukan approval payment re-
quest.
CLevelApvDateTime datetime digunakan untuk mencatat waktu
karyawan C level (CEO) yang
melakukan approval payment re-
quest.
FinanceEmpId varchar(10) digunakan untuk mencatat
ID karyawan Finance yang
melakukan approval payment
request.
FinanceEmail varchar(100) digunakan untuk mencatat
email karyawan Finance yang
melakukan approval payment
request.
FinanceName varchar(100) digunakan untuk mencatat
nama karyawan Finance yang
melakukan approval payment
request.
FinanceApvDateTime datetime digunakan untuk mencatat
waktu karyawan Finance yang
melakukan approval payment
request.
FinMgrEmpId varchar(10) digunakan untuk mencatat ID
karyawan Finance Manager yang
melakukan approval payment re-
quest.
Lanjut pada halaman berikutnya
35
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.12 Table PaymentRequest (lanjutan)
Nama kolom Tipe data Deskripsi
FinMgrEmail varchar(100) digunakan untuk mencatat email
karyawan Finance Manager yang
melakukan approval payment re-
quest.
FinMgrName varchar(100) digunakan untuk mencatat nama
karyawan Finance Manager yang
melakukan approval payment re-
quest.
FinMgrApvDateTime datetime digunakan untuk mencatat waktu
karyawan Finance Manager yang
melakukan approval payment re-
quest.
CFOEmpId varchar(10) digunakan untuk mencatat ID
karyawan CFO yang melakukan
approval payment request.
CFOEmail varchar(100) digunakan untuk mencatat email
karyawan CFO yang melakukan
approval payment request.
CFOName varchar(100) digunakan untuk mencatat nama
karyawan CFO yang melakukan
approval payment request.
CFOApvDateTime datetime digunakan untuk mencatat waktu
karyawan CFO yang melakukan
approval payment request.
CurrCode char(3) digunakan untuk menampung
kode mata uang yang dipilih oleh
user.
Lanjut pada halaman berikutnya
36
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.12 Table PaymentRequest (lanjutan)
Nama kolom Tipe data Deskripsi
StatusCode enum(’RJCT’, berisi kode status dari payment
’DRFT’, ’WALD’, request yang sedang berjalan.
’WAHD’, ’WAFN’,
’WAMG’, ’WACF’,
’WACL’, ’WRLS’,
’RLSF’, ’WRRU’,
’WRFC’, ’STLD’)
PreviousStatusCode enum(’RJCT’, berisi kode status dari payment
’DRFT’, ’WALD’, request yang sebelumnya.
’WAHD’, ’WAFN’,
’WAMG’, ’WACF’,
’WACL’, ’WRLS’,
’RLSF’, ’WRRU’,
’WRFC’, ’STLD’)
LastApprovalByEmpId varchar(10) berisi nama-nama dari departe-
men yang ada.
LastApprovalByName varchar(100) berisi nama-nama dari departe-
men yang ada.
LastApprovalByEmail varchar(100) berisi nama-nama dari departe-
men yang ada.
LastApprovalDateTime datetime berisi nama-nama dari departe-
men yang ada.
RejectReason mediumtext digunakan untuk menyimpan
alasan payment request yang
dilakukan rejection.
RejectedByEmpId varchar(255) digunakan untuk mencatat ID
karyawan yang melakukan pay-
ment request rejection.
RejectedByName varchar(255) digunakan untuk mencatat nama
karyawan yang melakukan pay-
ment request rejection.
Lanjut pada halaman berikutnya
37
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.12 Table PaymentRequest (lanjutan)
Nama kolom Tipe data Deskripsi
RejectedByEmail varchar(255) digunakan untuk mencatat email
karyawan yang melakukan pay-
ment request rejection.
RejectedDateTime datetime digunakan untuk mencatat waktu
payment request yang dilakukan
rejection.
LastUpdated datetime digunakan untuk mencatat waktu
terakhir kali data payment re-
quest diupdate
BeneficiaryId int digunakan untuk mencatat ID
beneficiary (penerima) yang dipi-
lih oleh user.
TransferDesc mediumtext digunakan untuk mencatat
deskripsi dari bukti transfer yang
diajukan.
TransferURL varchar(500) digunakan untuk mencatat URL
dokumen yang diunggah ke AWS
S3 dari bukti transfer yang dia-
jukan.
TransferDate datetime digunakan untuk mencatat waktu
bukti transfer yang dilakukan.
ApprovalFlow enum(’1’, ’2’) berisi nama-nama dari departe-
men yang ada.
AdvIsTaken enum(’Y’, ’N’) digunakan untuk mencatat
apakah jenis payment request
Advance sudah pernah dipilih
untuk melakukan Settlement atau
belum.
AdvPRHId bigint digunakan untuk menampung
PRHId dengan jenis payment
request Advance yang dipilih
untuk Settlement.
Lanjut pada halaman berikutnya
38
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.12 Table PaymentRequest (lanjutan)
Nama kolom Tipe data Deskripsi
RefundURL varchar(500) digunakan untuk mencatat URL
dokumen yang diunggah ke AWS
S3 dari bukti pengembalian dana
yang dilakukan user.
3.7.12 Project
39
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
3.7.13 PymntReqDetail
3.7.14 RequestStatus
40
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Tabel 3.15. Table RequestStatus
3. Dalam pembuatan aplikasi, dalam satu tim, belum ada yang pernah meng-
gunakan Appsmith yang mana juga mengakibatkan dalam proses pembuatan
aplikasi payment request memerlukan waktu yang sedikit lebih lama.
Namun dari permasalahan-permasalahan tersebut, adapun solusi yang penulis
temukan, di antaranya :
1. Untuk permasalahan dokumentasi, penulis mencoba-coba dan melakukan im-
provisasi dengan menggabungkan bahasa pemrograman JavaScript dengan at-
uran yang terdapat pada Appsmith.
41
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
3. Untuk permasalahan dalam penggunaan Appsmith, dalam pembuatan apli-
kasi payment request dilakukan dengan cara mempelajari penggunaan apli-
kasi Appsmith sekaligus menerapkannya dalam pembuatan aplikasi payment
request.
42
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
BAB 4
SIMPULAN DAN SARAN
4.1 Simpulan
43
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Selain dapat membuat aplikasi payment request di PT. IDStar Cipta
Teknologi, penulis juga dapat mengasah soft skill dan menambah koneksi dalam
melakukan magang ini. Penulis mendapatkan soft skill dalam berkomunikasi an-
tar anggota tim, melakukan problem solving dan making decision. Ini dikarenakan
antar anggota tim yang memiliki pendapat berbeda dalam pembuatan aplikasi, dan
permintaan yang diminta tim Finance dan C level yang terlalu tinggi yang mana
dalam pembuatan fitur tersebut tidak/belum tersedia, atau untuk ada fitur tersebut
perlu mengeluarkan biaya yang besar untuk diterapkan pada aplikasi Appsmith.
4.2 Saran
Adapun saran yang penulis sampaikan terkait dengan pelaksaan magang ini,
antara lain :
2. Untuk para tim Finance dan C level, penulis berharap agar dapat mengerti
bahwa Appsmith merupakan aplikasi low-code untuk membuat sebuah apli-
kasi web yang memiliki fitur terbatas dan tidak semua fitur dapat tersedia.
44
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
DAFTAR PUSTAKA
45
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Lampiran 1. Cover letter ( MKBM 01 )
Company will be received the student as an employee and Internship Track 1 participant, he/she
express their willingness to follow 800 working hours or 100 working days prior to work rules 8 hours
per day. Therefore, UMN’s student must obey all regulations stipulated by company from time to time.
Along with respect, we considered our student to get selected in the Internship Track 1 program from
your company. We thank you and look forward to hear employment acceptance letter of our student’s.
Sincerely,
( Samuel, M.T.I. )
Kampus UMN, Scientia Garden | jl. Boulevard Gading Serpong - Tangerang | P. +62 21 5422 0808 | F. +62 21 5422 0800 | www.umn.ac.id
46
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Lampiran 2. Form Bimbingan
47
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Lampiran 3. Kartu MBKM (MBKM 02)
48
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Lampiran 4. Daily Task
49
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
50
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
51
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
52
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
53
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
54
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
55
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
56
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
57
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
58
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
59
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
60
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Lampiran 5. Verifikasi Laporan MBKM (MBKM 04)
61
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
Lampiran 6. Pengecekan Turnitin Bab (1 - 4)
3 %
SIMILARITY INDEX
3%
INTERNET SOURCES
0%
PUBLICATIONS
0%
STUDENT PAPERS
PRIMARY SOURCES
1
kc.umn.ac.id
Internet Source 1%
2
docplayer.info
Internet Source <1 %
3
saatsantai.com
Internet Source <1 %
4
library.binus.ac.id
Internet Source <1 %
5
idstar.co.id
Internet Source <1 %
6
Submitted to Academic Library Consortium
Student Paper <1 %
7
Nanda Lailatul Qadriani, Sri Hartati, Anitasa
Dewi. "Pemanfaatan Youtube dan Edpuzzle
<1 %
sebagai Media Pembelajaran Daring Berbasis
Video Interaktif", Jurnal Pemberdayaan
Masyarakat Universitas Al Azhar Indonesia,
2021
Publication
62
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara
8
Submitted to Universitas Pelita Harapan
Student Paper <1 %
9
eprints.upj.ac.id
Internet Source <1 %
10
Rayhan Mahatma Harikusuma, Roby Syaiful
Ubed. "PERAN PT SARANA MULTIGRIYA
<1 %
FINANSIAL DALAM LIKUIDITAS PEMBIAYAAN
PERUMAHAN", Indonesian Rich Journal, 2020
Publication
11
e-repository.perpus.iainsalatiga.ac.id
Internet Source <1 %
12
sir.stikom.edu
Internet Source <1 %
13
repositori.uin-alauddin.ac.id
Internet Source <1 %
14
www.coursehero.com
Internet Source <1 %
63
Rancang Bangun Aplikasi ..., Rupertus Herlambang Eko Nugroho, Universitas Multimedia
Nusantara