BAB 3
PELAKSANAAN KERJA MAGANG
3.1 Kedudukan dan Koordinasi
Dalam pelaksanaan kerja magang yang dilakukan oleh penulis di PT.
Bangunindo Teknusa Jaya, penulis ditempatkan sebagai programmer website di divisi Programmer, dengan Bapak Edo Apriyadi selaku Chief Operational Officer sebagai pendamping dan supervisi lapangan. Bapak Edo Apriyadi berperan dalam memberikan informasi mengenai tugas yang harus dikerjakan dalam mengmebangkan aplikasi admin berbasis website yang dibangun menggunakan framework Codeigniter4.
Kegiatan kerja magang diawasi dan dikoordinasikan kepada Bapak Aditya Sasimita selaku admin pada perusahaan serta menjadi klien untuk projek yang dilakukan. Segala bentuk pembaharuan serta dokumentasi dipresentasikan kepada Bapak Aditya Sasmita dan Bapak Edo Apriyadi untuk menyampaikan pembaharuan dan pengecekan kesesuaian kebutuhan dan keinginan klien. Selain melakukan kontak dengan klien dan supervisi, penulis juga mendapat bantuan dalam proses coding aplikasi dari karyawan perusahaan yang berada di divisi backend programmer.
3.2 Tugas yang Dilakukan
Selama kerja magang berlangsung, penulis diberikan tugas oleh
Zoom. Pemberian tugas meliputi informasi yang dibutuhkan maupun gambaran secara umum mengenai tugas yang harus dikerjakan. Untuk memenuhi kebutuhan tersebut, pembimbing lapangan memutuskan pengerjaan project menggunakan framework Codeigniter4 dan menggunakan aplikasi phpMyAdmin sebagai aplikasi untuk mengelola database.
Berikut merupakan tanggung jawab yang diberikan kepada penulis : 1. Memahami tugas yang diberikan sehingga dapat menghasilkan aplikasi
berbasis website yang sesuai.
2. Mempelajari framework Codeigniter4 yang telah disertai dengan dokumentasi yang akan digunakan untuk presentasi progress.
3. Mengimplementasi pengetahuan yang telah didapatkan dari pembelajaran di kampus Universitas Multimedia Nusantara dan pengetahuan yang telah dipelajari mengenai Framework Codeigniter4 dan database MySQL.
4. Melakukan meeting untuk menyampaikan pembaharuan serta progress dari tugas yang telah diberikan untuk mengetahui apakah aplikasi yang dibangun sudah sesuai secara fungsional dan desain.
5. Berkolaborasi dengan anggota tim lainnya dalam pemberian tugas, serta berkomunikasi dengan tim deployer untuk pengecekan bug saat aplikasi akan di hosting.
6. Melakukan testing dan bug fixing pada setiap bagian agar memastikan aplikasi berjalan sesuai dengan fungsionalnya.
3.3 Uraian Kerja Magang
Proses kerja magang yang telah dilaksanakan pada PT. Bangunindo Teknusa Jaya meliputi projek pembangunan aplikasi admin perusahaan telah dilaksanakan selama 13 minggu. Berikut merupkaan penjabaran pekerjaan yang dilaksanakan yang telah disusun dalam bentuk ganttchart.
No Kegiatan
Week
1 2 3 4 5 6 7 8 9 10 11 12 13 1
Pemahaman Mengenai
Tugas yang diberikan
2
Pembelajaran
Framework Codeigniter4
3
Analisis Kebutuhan Project & Design sistem
dan database
4
Implementasi
Pembuatan dashboard
menggunakan adminLTE
5
Implementasi system
dashboard
6
Implementasi CRUD
untuk user aplikasi
7
Pembuatan halaman List
surat
8
Pembuatan halaman
create dan edit surat
9
Pembuatan number generator untuk nomor
surat
10
Pembuatan halaman list
invoice
11
pembuatan halaman
create dan edit invoice
12
Pembuatan number generator untuk nomor
invoice dan kuitansi
13
Implementasi untuk pembuatan PDF
Generator menggunakan
TCPDF
Layouting invoice &
15
Testing Fungsional & bug
testing
16
Penambahan detail
layout invoice & kuitansi 17
Memahami tugas desain
landing page
18 Desain landing page
Tabel 3.1 GanttChart Kegiatan Mingguan Kerja Magang
Pada Tabel 3.1 merupakan GanttChart dari kegiatan yang telah dilakukan setiap minggunya oleh penulis. Setiap minggunya terdapat meeting yang dilakukan Bersama dengan supervisi dan klien untuk mengetahui pembaharuan atau jika terdapat beberapa masukkan yang diberikan.
3.2.1 Sitemap Mockup
Sitemap dibutuhkan dalam pembangunan aplikasi sehingga memudahkan dalam merancang alur kerja aplikasi tersebut. berikut merupakan sitemap mockup yang telah didesain oleh penulis sebagai acuan alur aplikasi.
Gambar 3.1 Sitemap
Pada Gambar 3.1 merupakan desain alur kerja yang dirancang oleh penulis sebagai acuan dalam mengimplementasi aplikasi admin tersebut. Sitemap tersebut memudahkan acuan dalam perpindahan dari satu halaman ke halaman lainnya. User dapat mengakses create atau edit user melalui halaman list user, mengakses halaman create atau edit surat melalui halaman list surat, dan mengakses create dan edit invoice melalui halaman list invoice.
3.2.2 Flowchart
Flowchart merupakan sebuah bagan yang berisikan bentuk dan simbol dengan makna tertentu, yang disusun secara sistematis sebagai urutan sebuah proses secara detail dan hubungan antar proses. Berikut ini merupakan workflow dan flowchart yang digunakan untuk menjadi acuan alur pembangunan aplikasi berbasis website :
Pada gambar 3.2 merupakan workflow aplikasi yang dibangun oleh penulis.
Pada saat pertama kali membuka aplikasi, user akan diminta untuk mengisi informasi mengenai username dan password sebagai proses login. Apabila login berhasil, maka akan dicek apakah login sebagai admin atau tidak. Apabila user login sebagai admin, maka user dapat melihat beberapa panel menu diantaranya adalah menu user, menu surat, dan menu invoice. Pada saat menu user dipilih, maka akan menampilkan list user, apabila menu surat dipilih, maka akan menampilkan list surat, dan apabila user memilih menu invoice, maka akan menampilkan list invoice. Pada setiap halaman yang menampilkan list, terdapat beberapa tombol untuk melakukan pembuatan dan edit untuk masing-masing menu yang tersedia.
Gambar 3.3 Flowchart User
Gambar 3.3 menggambarkan alur yang terjadi pada halaman user admin yang dibangun. Pada halaman ini berisikan daftar user admin yang telah dibuat beserta user Group tiap user dalam bentuk tabel. Apabila login sebagai admin, maka pengguna dapat mengakses untuk membuat user admin baru maupun merubah user group suatu user. Selain hal tersebut, user admin juga dapat melakukan modifikasi pada profile user itu sendiri.
Gambar 3.4 Flowchart Surat
Gambar 3.4 menggambarkan alur yang terjadi pada halaman Surat yang dibangun. Halaman Surat merupakan halaman yang berisikan daftar surat yang telah dibuat dan beberapa fitur lainnya. Pada halaman list surat ini, pengguna dapat
melihat secara terperinci sebuah surat serta bagian-bagian yang ada dalam surat tersebut. Pengguna juga dapat membuat surat baru dengan memilih tipe surat yang ingin dibuat. Tipe surat yang dipilih menentukan isi dari form yang harus diisi oleh admin. Pada halaman ini juga pengguna dapat membuat nomor surat dengan generator yang telah dirancang dengan mengambil nomor urutan surat dan tanggal peruntukan surat tersebut. Selain membuat surat baru, pada halaman ini pengguna dapat mengubah atau melakukan edit surat yang sudah ada.
Gambar 3.5 Flowchart Invoice
Gambar 3.5 menggambarkan alur yang terjadi pada halaman Invoice yang dibangun. Halaman Invoice merupakan halaman yang berisikan daftar Invoice yang telah dibuat dan beberapa fitur lainnya. Pada halaman ini, admin dapat membuat invoice yang dibutuhkan oleh perusahaan. Pada halaman pembuatan invoice, terdapat field form yang diperlukan untuk pembuatan invoice, serta terdapat generator untuk membuat nomor invoice dan juga kuitansi yang otomatis terbentuk dengan mengambil nomor urutan invoice dan tanggal peruntukan invoice tersebut.
pada halaman pembuatan terdapat juga form untuk item yang akan disertakan pada invoice, dan jumlah form item dapat bertambah sesuai dengan kebutuhan. Pada form tersebut juga terdapat field contract number yang dapat ditambahkan apabila dibutuhkan tambahan addendum. Pada halaman list invoice, admin dapat melihat rincian invoice yang telah di buat, serta dapat mengubah informasi mengenai invoice tersebut. selain itu, admin dapat melakukan generate invoice dan kuitansi menjadi PDF secara langsung dan PDF invoice serta kuitansi dapat langsung berisikan informasi tentang invoice yang telah dibuat sebelumnya.
3.2.3 Database
Database yang digunakan untuk membangun aplikasi admin menggunakan MySQL. Berikut adalah struktur tabel database yang digunkan.
A. Struktur Database
Struktur database adalah kumpulan definisi jenis record dan jenis kolom yang membentuk database. Dalam pembangunan aplikasi admin untuk bagian user, surat ,dan invoice, digunakan beberapa tabel untuk masing masing bagian,
diantaranya adalah px_admin, px_surat_permohonan, px_surat_pernyataan, px_invoice, px_invoice_contract_field, dan px_invoice_field.
Nama Kolom Tipe Data Panjang Keterangan
id_admin (PK) int 10 ID unik Admin username varchar 255 Username untuk login password varchar 255 Password untuk login
realname varchar 255 Nama user
email varchar 255 Email user
photo text Photo user (disimpan secara local)
id_usergroup int 11 ID untuk menentukan privilege user
Tabel 3.2 Tabel Database px_admin
Pada tabel 3.2 merupakan tabel px_admin dimana menyimpan segala data yang berhubungan dengan user. Salah satu data yang tersimpan pada tabel ini adalah username dan password yang dapat digunakan dalam login aplikasi. Pada tabel ini, id_user dijadikan sebagai primary key yang berguna untuk membuat setiap user unik.
Nama Kolom Tipe Data Panjang Keterangan
surat_id (PK) int 11 ID unik surat
tipe_surat_id int 11 ID untuk menentukan tipe surat
nama_surat varchar 255 Nama Surat
nomor_surat varchar 255 Nomor surat
tanggal datetime Tanggal dibuatnya surat ditujukan_kepada varchar 255 Tujuan surat
dibuat_oleh varchar 255 Nama admin pembuat surat tanggal_peruntukan varchar 255 Tanggal surat digunakan project/hal varchar 255 Hal atau project surat contact_tambahan varchar 255 Contact tambahan
Tabel 3.3 Tabel Database px_surat_permohonan
Tabel 3.3 merupakan tabel px_surat_permohonan yang menyimpan data mengenai surat permohonan. Pada tabel ini terdapat kolom project/hal dan contact_tambahan yang membedakan tabel ini dengan tabel surat pernyataan.
Nama Kolom Tipe Data Panjang Keterangan
surat_id int 11 ID unik untuk surat
tipe_surat_id int 11 ID untuk menentukan tipe surat
nama_surat varchar 255 Nama Surat
nomor_surat varchar 255 Nomor surat
tanggal datetime Tanggal dibuatnya surat
ditujukan_kepada varchar 255 Tujuan surat
dibuat_oleh varchar 255 Nama admin pembuat surat tanggal_peruntukan varchar 255 Tanggal surat digunakan
remark varchar 255 Cantuman surat
catatan_tambahan varchar 255 Notes tambahan Tabel 3.4 Tabel Database px_surat_pernyataan
Pada Tabel 3.4 merupakan tabel px_surat_pernyataan dimana menyimpan segala data mengenai surat pernyataan. Pada kolom ini terdapat kolom remark dan catatan_tambahan yang dibutuhkan dalam surat pernyataan perusahaan.
Nama Kolom Tipe Data Panjang Keterangan
invoice_id (PK) int 11 ID unik invoice
invoice_date date Tanggal invoice
dibuat
invoice_number varchar 255 Nomor invoice
setelah di generate
bank_id int 11 Id bank
nama_bill varchar 255 Untuk
pembayaran
alamat_bill varchar 255 Alamat
pembayaran
NPWP varchar 255 Nomor NPWP
PKP varchar 255 Nomor PKP
PIC varchar 255 Nama Person in
Charge
ship_date varchar 255 Tanggal
pengiriman
ship_via varchar 255 Kurir pengiriman
terms varchar 255 Jangka Waktu
Pembayaran
assignee varchar 255 Nama BOD
assignee_pangkat varchar 255 Pangkat BOD
tax_code varchar 255 Kode untuk pajak
tax_rate varchar 255 Persentase pajak
kuitansi_number varchar 255 Nomor kuitansi
setelah digenerate
nama_proyek varchar 255 Nama proyek dengan invoice
photo varchar 255 Gambar untuk
invoice
contact_number varchar 255 Nomor kontak
jml_field varchar 30 Jumlah item pada
invoice
jml_contract_field varchar 30 Jumlah contract
number &
addendum Tabel 3.5 Tabel Database px_invoice
Pada tabel 3.5 merupakan tabel px_invoice dimana tabel tersebut menyimpan data-data invoice. Pada tabel ini terdapat kolom id_invoice sebagai primary key yang berfungsi untuk menentukan contract number dan item yang berada pada tabel yang berbeda. Pada tabel ini juga terdapat kolom jml_field untuk menentukan jumlah field item, dan kolom jml_contract_field untuk menentukan jumlah contract field sehingga memudahkan dalam melakukan penampilan data pada aplikasi.
Nama Kolom Tipe Data Panjang Keterangan id_invoice_contract_field
(PK)
int 50 ID unik field
contract di invoice
id_invoice (FK) int 50 Id invoice untuk
dicocokan
contract_number varchar 255 Nomor kontrak
Tabel 3.6 Tabel Database px_invoice_contract_field
Pada tabel 3.6 merupakan tabel px_invoice_contract_field yang berisikan data-data untuk nomor kontrak. Terdapat kolom id_invoice sebagai foreign key dari tabel px_invoice yang berguna sebagai penentu nomor kontrak yang tersimpan merupakan kepemilikan dari invoice yang sama dengan id_invoice yang tercatat.
Nama Kolom Tipe Data Panjang Keterangan id_invoice_field
(PK)
int 50 ID unik untuk
item di invoice
id_invoice (FK) Int 50 Id invoice untuk
dicocokan
items varchar 255 Nama item
item_desc varchar 255 Deskripsi nama
item
qty int 30 Jumlah item
unit_price int 50 Harga item
total int 255 Jumlah total biaya
yang dibebankan Tabel 3.7 Tabel Database px_invoice_field
Pada tabel 3.7 merupakan tabel px_invoice_field yang berisikan data-data untuk item invoice. Terdapat kolom id_invoice sebagai foreign key dari tabel px_invoice yang berguna sebagai penentu item yang tersimpan merupakan kepemilikan dari invoice yang memiliki id_invoice yang sama.
B. Database Schema
Database schema digunakan untuk menggambarkan relasi antar tabel sehingga memudahkan dalam mengimplementasi khususnya pada fitur CRUD.
Gambar 3.6 Database Schema
Pada gambar 3.6 merupakan rancangan skema dari database yang dirancang sebagai panduan dalam pembuatan database aplikasi admin tersebut. dikarenakan item dan nomor kontrak dapat memiliki jumlah lebih dari satu untuk setiap invoice, maka dibuatnya px_invoice_field untuk menyimpan item-item, dan px_invoice_contract_field untuk menyimpan nomor kontrak. Kedua tabel tersebut memiliki foreign key terhadap tabel px_invoice sehingga dapat menetukan item dan nomor kontrak untuk invoice yang sesuai.
3.2.4 Desain Antar Muka Sistem
Desain antar muka sistem yang dibangun untuk setiap halaman aplikasi semula di rancang dan di desain sebagaimana keinginan klien. Dikarenakan tidak adanya Spesification Requirement, penulis merancang halaman aplikasi sesuai dengan bagian-bagian yang sekiranya ada pada tiap halaman, dan melakukan konsultasi pada saat Zoom meeting Bersama klien untuk memastikan apakah desain yang dibangun sudah sesuai dengan kebutuhan dan keinginan. Beberapa desain antar muka yang telah dibuat oleh penulis sebagai acuan pembangunan sistem sebagai berikut.
A. Halaman Utama
Gambar 3.7 Halaman Dashboard
Pada Gambar 3.7 merupakan halaman utama yang bertujuan menampilkan beberapa informasi yang dibutuhkan oleh klien. Pada side menu terdapat beberapa menu navigasi yang terbagi menjadi 2 bagian, yaitu sisi admin dan sisi sistem. Pada
side menu admin terdapat menu surat dan juga invoice, sedangkan pada menu sistem terdapat menu user.
B. Halaman List User
Pada aplikasi admin ini, tentunya dibutuhkan sebuah halaman untuk menampilan setiap pengguna dengan masing masing privilege yang telah ditentukan.
Gambar 3.8 Halaman List User
Pada Gambar 3.8 merupakan gambar tampilan halaman list user yang menampilkan setiap user yang terdata pada database berserta privilege dalam bentuk tabel. Terdapat juga beberapa tombol yang dapat digunakan untuk melakukan penambahan, edit, maupun delete user.
C. Tampilan Create New User & Edit User
Gambar 3.9 Halaman Create & Edit User
Gambar 3.9 merupakan tampilan pada saat user menekan tombol create new maupun edit user. Tampilan form keduanya tidak memiliki banyak perbedaan.
Perbedaan terdapat pada form edit dimana beberapa value pada kolom sudah terisi sesuai dengan data yang telah disimpan di database. Hal tersebut tentunya membantu user dalam perubahan data sehingga user mengetahui data sebelumnya.
D. Tampilan List Surat
Gambar 3.10 Halaman List Surat
Pada gambar 3.10 merupakan halaman list surat. Pada halaman tersebut menampilkan surat yang telah dibuat dan tersimpan dalam database dalam bentuk tabel. Terdapat beberapa tombol yang berfungsi untuk menambahkan, edit, dan juga view surat yang dipilih.
E. Tampilan Create Surat
Pada saat user menekan tombol add new surat, maka akan terbuka halaman create surat untuk melakukan proses pembuatan surat baru.
Gambar 3.11 Halaman Create Surat
Pada Gambar 3.11 merupakan tampilan pada halaman pembuatan surat.
Halaman ini berisikan form dengan kolom masing-masing data yang dibutuhkan dalam pembuatan surat. Pada halaman ini juga terdapat pilihan dalam membuat tipe surat, yaitu surat pernyataan dan permohonan. Pada bagian terakhir form terdapat pengisian nomor surat secara otomatis apabila user menekan tombol generate.
Pembuatan nomor surat sesuai dengan nomor surat perusahaan dengan menggunakan nomor urut surat, tanggal, dan tahun peruntukan surat tersebut.
F. Tampilan Edit Surat
Pada saat user menekan tombol edit surat, maka akan terbuka halaman edit surat untuk melakukan proses perubahan surat yang telah dipilih.
Gambar 3.12 Halaman Edit Surat
Pada Gambar 3.12 menampilkan halaman edit surat. Pada halaman ini, tidak banyak berbeda dengan halaman create surat. Perbedaannya terdapat pada tanggal peruntukan yang bersifat nonaktif sehingga user tidak dapat merubah tanggal peruntukan dan juga nomor surat. Kolom pada form mengikuti tipe surat yang telah dipilih untuk diubah datanya.
G. Tampilan List Invoice
Pada saat menu invoice pada sidebar dipilih oleh user, maka akan berpindah ke halaman list invoice. Halaman list invoice menampilkan setiap invoice yang telah dibuat dan disimpan pada database.
Gambar 3.13 Halaman List Invoice
Pada gambar 3.13 menampilkan halaman list invoice yang akan diimplementasikan kepada sistem. Pada halaman ini menampilkan nomor invoice, nama klien, dan juga tanggal invoice. Pada halaman ini juga terdapat beberapa tombol yang berguna untuk membuat invoice baru, merubah, melihat, maupun mengenerate invoice & kuitansi dalam bentuk file PDF yang langsung dapat di download oleh user.
H. Tampilan Create Invoice
Apabila user menekan tombol add new, maka akan berpindah halaman ke halaman create invoice. Pada halaman tersebut user dapat memasukkan beberapa data yang dibutuhkan dalam pembuatan invoice.
Gambar 3.14 Halaman Create Invoice
Pada gambar 3.14 diatas merupakan halaman create invoice yang berisikan form dengan kolom-kolom data sesuai dengan yang dibutuhkan dalam pembuatan invoice. Pada form tersebut, user dapat menabahkan contract number lebih dari satu dengan menekan tombol add contract number. User juga dapat menambahkan item yang dibutuhkan dalam invoice dengan menekan tombol add item. Pada kolom nomor invoice dan kuitansi, user dapat langsung mengisi dengan menekan tombol generate. Nomor yang terbentuk berdasarkan nomor urut invoice dan juga tanggal peruntukan invoice tersebut.
I. Tampilan Edit Invoice
Apabila user menekan tombol edit invoice, maka akan berpindah halaman ke halaman edit invoice. Pada halaman tersebut user dapat merubah beberapa data mengenai invoice tersebut.
Gambar 3.15 Halaman Edit Invoice
Pada gambar 3.15 merupakan halaman edit invoice. Halaman tersebut menampilkan form dengan kolom yang sesuai dengan kebutuhan invoice. Pada halaman ini tanggal peruntukan tidak dapat dirubah sehingga nomor invoice dan kuitansi juga tidak dapat dirubah. Pada halaman ini, user dapat menambahkan item
baru dan juga addendum number apabila dirasa dibutuhkan penambahan untuk invoice tersebut.
3.2.5 Hasil Implementasi Sistem
Berdasarkan flowchart dan sturktur tabel untuk database yang telah dibuat, maka kemudian dapat direalisasikan pembuatan sistem tersebut kedalam bentuk aplikasi berbasis website.
A. Halaman List User
Pada saat user menekan menu user, maka halaman akan berganti ke halaman list user. Halaman tersebut memuat informasi dan beberapa tombol yang berguna untuk membuat dan mengubah informasi user.
Gambar 3.16 Tampilan Halaman List User
Gambar 3.16 merupakan tampilan setelah sistem diimplementasikan.
Halaman List User menyajikan informasi mengenai setiap user beserta group user untuk menentukan privilege yang dimiliki oleh setiap user tersebut. user dapat
menekan beberapa tombol diantaranya adalah create user. Apabila user menekan tombol add new, akan memunculkan form untuk pembuatan user baru.
Gambar 3.17 Tampilan Create New User
Pada gambar 3.17 merupakan tampilan form yang muncul setelah tombol add new di pilih. Pengguna dapat membuat user baru dengan mengisi informasi yang dibutuhkan, dan memilih user group sesuai dengan privilege yang diinginkan oleh user tersebut.
Gambar 3.18 Tampilan Edit User
Pada gambar 3.18 merupakan tampilan form setelah tombol edit di click.
Pengguna yang memiliki privilege, dapat merubah informasi user lainnya dan juga merubah informasi untuk login seperti username dan password. Perbedaan form yang ada pada create dan edit, terletak pada value dari masing masing kolom informasi. beberapa kolom dari form edit akan menampilkan value untuk membantu user dalam perubahan yang akan dilakukan.
B. Halaman List Surat
Halaman akan berpindah ke halaman list surat pada saat user memilih menu surat pada sidebar. Pada halaman ini user dapat melihat surat-surat yang telah dibuat sebelumnya.
Gambar 3.19 Tampilan List Surat
Gambar 3.19 merupakan tampilan halaman list surat. Pada halaman ini list surat yang ditampilkan dan disajikan dalam bentuk tabel dengan menampilkan Nomor surat, Nama Surat, dan jenis surat. Pada halaman ini juga user dapat melakukan edit dan melihat detail surat, serta melakukan pencarian dengan memasukkan kata kunci berupa nomor surat, nama surat, atau jenis surat. Pada halaman ini juga menampilkan tombol add new yang berguna untuk membuat surat baru.
C. Halaman Create New Surat
Pada saat user menekan tombol create new, maka halaman akan berpindah ke halaman pembuatan surat. Pada halaman ini, user akan diminta untuk mengisi informasi mengenai surat yang akan dibuat.
Gambar 3.20 Tampilan Create New Surat
Gambar 3.20 merupakan tampilan pada halaman create new surat. User dapat memilih tipe surat yang ingin dibuat, dan form yang ditampilkan sesuai dengan tipe surat yang dipilih. User dapat mengisi informasi yang dibutuhkan mengenai surat yang ingin dibuat, dan user juga dapat dengan mudah melakukan generate nomor surat dengan menekan tombol generate yang secara otomatis akan tebentuk sesuai dengan nomor urutan, bulan, dan tahun peruntukan surat dibuat.
D. Halaman Detail Surat
Selain membuat dan mengubah surat, user juga dapat melakukan review surat. Hal ini dapat dilakukan dengan menekan tombol view surat yang akan berpindah halaman ke detail surat apabila tombol ditekan.
Gambar 3.21 Tampilan Detail Surat
Pada gambar 3.21 merupakan tampilan pada Detail surat yang dipilih. Pada halaan ini, user dapat melihat segala informasi mengenai surat yang telah dibuat, yaitu nama surat, nomor surat yang telah otomatis di generate, tanggal dibuatnya surat, tanggal peruntukan surat, ditujukan kepada, nama pembuat surat yang secara otomatis didapat dari user yang membuat surat, dan informasi spesifik sesuai dengan tipe surat yang dibuat.
E. Halaman Edit Surat
Halaman edit surat merupakan halaman dimana user dapat merubah informasi mengenai surat yang telah dibuat sebelumnya. User dapat mengakses halaman ini dengan menekan tombol edit.
Gambar 3.22 Tampilan Edit Surat
Pada gambar 3.22 merupakan tampilan pada halaman Edit Surat. Pada halaman ini, user dapat melakukan perubahan beberapa informasi mengenai surat yang telah dipilih.
F. Halaman List Invoice
User dapat melihat list dari invoice yang telah dibuat sebelumnya pada halaman list invoice. Halaman list invoice dapat diakses oleh user melalui menu invoice pada sidebar.
Gambar 3.23 Tampilan List Invoice
Pada Gambar 3.23 merupakan tampilan halaman daftar invoice. Daftar invoice yang ditampilkan dalam tabel dapat di search menggunakan search box yang tersedia. Pada halaman ini juga tertera tombol untuk melihat detail dari invoice, tombol untuk merubah, menambah, dan mengenerate invoice menjadi PDF yang dapat langsung di unduh.
G. Halaman Create New Invoice
User dapat menambahkan invoice baru dengan menekan tombol add new pada halaman list invoice. Pada halaman tersebut user membuat invoice baru dengan memasukan informasi yang diperlukan dalam pembuatan invoice.
Gambar 3.24 Tampilan Create New Invoice
Pada Gambar 3.24 merupakan tampilan pada pembuatan invoice baru. Pada halaman ini, user dapat memasukkan informasi yang dibutuhkan dalam sebuah invoice sesuai dengan form yang tertera. Pada halaman ini, user dapat memasukkan lebih dari 1 contract number dan item apabila dirasa dibutuhkannya lebih dari satu dengan menekan tombol yang tertera.
H. Halaman Detail Invoice
User dapat melakukan review terhadap invoice yang telah terbuat dan tersimpan di database. Hal ini dapat dilakukan dengan menekan tombol view pada halaman list invoice.
Gambar 3.25 Tamplian Detail Invoice
Pada gambar 3.25 merupakan halaman tampilan untuk detail invoice. User dapat melihat secara detail setiap informasi mengenai invoice, dan tertera tabel untuk item. Terdapat search box untuk memudahkan user dalam mencari item.
I. Halaman Edit Invoice
User dapat merubah informasi mengenai invoice yang telah dibuat sebelumnya. Hal ini dapat dilakukan pada halaman edit invoice. User dapat
Gambar 3.26 Tampilan Edit Invoice
Pada gambar 3.26 menunjukkan halaman edit invoice, dimana user dapat menghubah, menambahkan, maupun mengurangi informasi seperti addendum number dan item.
Gambar 3.27 PDF Invoice
Gambar 3.27 merupakan PDF hasil generate dari Invoice yang telah dibuat.
Segala informasi yang tertera sesuai dengan informasi yang telah ada di database.
Layout PDF yang di generate sudah sesuai dengan invoice yang dibutuhkan oleh perusahaan, dan tabel yang tertera bersifat responsive terhadap jumlah item dan contract number apabila lebih dari satu.
Gambar 3.28 PDF Kuitansi
Gambar 3.28 merupakan PDF hasil generate dari invoice yang telah dibuat.
Segala informasi yang tertera sesuai dengan informasi yang telah ada di database.
Layout PDF kuitansi sudah sesuai dengan kuitansi yang dibutuhkan oleh perusahaan. PDF kuitansi menjadi satu file PDF dengan invoice saat digenerate.
File PDF tersebut dapat langsung di unduh oleh user.
3.4 Kendala yang Ditemukan
Pengembangan aplikasi admin berbasis website untuk PT. Bangunindo Teknusa Jaya tidaklah terlalu rumit. Namun terdapat beberapa kendala yang dirasa cukup mengganggu dalam pembangunan aplikasi ini. Secara umum kendala yang ditemukan adalah sebagai berikut :
1. Tidak adanya Functional Specificaton sehingga sulit untuk mecatat dan mengerti secara terperinci segala bentuk kebutuhan yang dibutuhkan oleh klien.
2. Kesulitan dalam komunikasi dengan tim projek, dikarenakan kesibukan masing-masing individu.
3. Terdapat beberapa bug yang terdapat di sisi backend sehingga menghabiskan waktu yang cukup banyak untuk memperbaiki.
4. Kurangnya manpower pada sisi programmer.
3.5 Solusi Atas Kendala yang Ditemukan
Setiap kendala yang dialami memiliki solusi terbaik dalam menanganinya.
Solusi yang dilakukan untuk mengatasi kendala kesulitan dalam mengetahui kebutuhan klien yaitu dengan melakukan contact dan edit meeting dengan klien.
Dalam contact dan meeting tersebut, penulis dapat menanyakan dan meminta penjelasan lebih mengenai hal yang dirasa masih rancu atau kurang informasi.
segala bentuk edit yang terjadi dilaporkan melalui meeting sehingga pengerjaan aplikasi sesuai dengan kebutuhan dan keinginan klien. Solusi akan kendala komunikasi dengan tim ditangani dengan membuat grup pada aplikasi LINE.
Dengan grup tersebut, setiap individu melakukan pembagian tugas serta edit tentang apa yang sedang atau sudah dikerjakan. Terjadinya bug yang sering terjadi pada sisi backend dapat diselesaikan dengan melakukan bimbingan dengan supervisi untuk memecahkan masalah yang terjadi. Salah satu solusi yang diberikan oleh supervisi dalam menanggulangi kesulitannya pemrograman dalam beberapa
hal adalah dengan meminta bantuan kepada programmer backend yang bekerja pada perusahaan untuk turut serta membantu dalam pengembangan aplikasi.
