Perancangan Aplikasi Petty Cash Berbasis Web Menggunakan CodeIgniter dan jQuery EasyUI (Studi Kasus PT Indomarco Prismatama) Artikel Ilmiah Diajukan kepada Fakultas Teknologi Informasi untuk memperoleh Gelar Sarjana Komputer Peneliti: Tri Maulana Putra Handoyo (672012017) Ramos Somya, S.Kom., M.Cs. Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga Juni 2016
22
Embed
Perancangan Aplikasi Petty Cash Berbasis Web …repository.uksw.edu/bitstream/123456789/11435/2/T1_672012017_Full... · Perancangan Aplikasi Petty Cash Berbasis Web Menggunakan CodeIgniter
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Abstrak PT Indomarco Prismatama memiliki sistem kas kecil (Petty Cash) yang digunakan untuk
menunjang kegiatan perusahaan. Sistem ini namun masih berbasis desktop dan memiliki
beberapa kekurangan, seperti susahsnya instalasi di cabang serta mengharuskan adanya
beberapa requirement khusus. Pada penelitian ini dilakukan pengembangan dari sistem
tersebut dengan framework CodeIgniter dan jQuery EasyUI. Sistem dikembangkan
menggunakan metode prototyping. Hasil pengujian menunjukkan bahwa perancangan
aplikasi Petty Cash yang berbasis web membantu pengelolaan sistem Petty Cash yang ada,
dan mengurangi kesulitan instalasi yang ada saat aplikasi masih berbasis desktop tanpa
meninggalkan tampilan khas aplikasi dekstop.
Kata Kunci: Petty Cash, PHP, Framework CodeIgniter, jQuery EasyUI, Indomarco
Prismatama.
1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya
Wacana Salatiga. 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.
2
1. Pendahuluan
Teknologi informasi dimanfaatkan oleh banyak pihak untuk menunjang segala
aktivitas pada hampir semua aspek kehidupan terutama pada bidang bisnis.
Persaingan bisnis perusahaan yang semakin ketat membutuhkan adanya sistem yang
baik untuk mendukung dan menunjang aktivitas perusahaan agar tidak tertinggal
dengan pesaing-pesaing yang ada. Dibutuhkan sistem yang sudah terkomputerisasi
untuk menunjang bisnis pada perusahaan [1].
Indomaret adalah jaringan minimarket yang menyediakan kebutuhan pokok dan
kebutuhan sehari-hari. Indomaret sendiri merupakan merk dagang yang dimiliki oleh
PT. Indomarco Prismatama. Saat ini Indomaret berkembang pesat dengan jumlah
gerai mencapai lebih dari 11.285 gerai yang tersebar di wilayah Indonesia yang
didukung dengan sistem informasi teknologi yang andal.
Pengendalian internal yang baik terhadap kas yaitu setiap penerimaan dan
pengeluaran harus tercermin dalam rekening koran. Namun demikian, transaksi
yang jumlahnya besar seperti penggajian karyawan, pembelian peralatan, dan lain-
lain akan lebih aman apabila dilakukan melalui bank. Akan tetapi, pembayaran rutin
yang jumlahnya relatif kecil seperti pembayaran uang parkir, pembayaran karcis tol,
pembayaran uang bensin dan lain-lain akan kurang efektif apabila dilakukan melalui
bank. Agar lebih efektif maka pengeluaran yang terjadi setiap hari dan jumlahnya
relatif kecil tersebut perlu disediakan dana khusus yang dibentuk oleh perusahaan.
Dana yang disediakan oleh perusahaan untuk membiayai pengeluaran-pengeluaran
rutin dengan jumlahnya yang relatif kecil disebut kas kecil atau Petty Cash. Sesuai
dengan namanya kas kecil, merupakan akun yang khusus dipergunakan untuk
mendanai transaksi-transaksi kecil dan rutin [4].
PT. Indomarco Prismatama sebenarnya sudah memiliki sebuah aplikasi untuk
menangani sistem Petty Cash, namun karena masih berbasis dekstop sehingga
terdapat kekurangan, mulai dari susahnya instalasi di cabang, dibutuhkannya
beberapa requirement khusus (.Net Framework, Crystal Report, dan lain-lain.)
bahkan beberapa data yang sering tidak terkirim.
Berdasarkan permintaan user dari PT. Indomarco Prismatama melalui sebuah
wawancara, dirancanglah sebuah aplikasi yang memanfaatkan teknologi web.
Perancangan dan pengimplementasian program tersebut menggunakan framework
CodeIgniter dan jQuery EasyUI, yang berguna untuk membantu meningkatkan
kinerja dari kasir guna melancarkan jalannya sistem Petty Cash PT. Indomarco
Prismatama. CodeIgniter merupakan framework yang support PHP 4 dan PHP 5,
memiliki ukuran yang kecil, dan menerapkan konsep MVC (Model, View, Controller)
dengan baik, sedangkan untuk jQuery EasyUI merupakan framework yang
digunakan untuk mempercantik tampilan, penulis tidak perlu menuliskan sebuah
kode javascript yang panjang untuk membuat layout web atau aplikasi dengan
menggunakan jQuery EasyUI ini.
Rumusan masalah dalam penelitian ini adalah bagaimana merancang aplikasi
Petty Cash berbasis web menggunakan CodeIgniter dan jQuery EasyUI. Batasan
masalah yang ada dalam penelitian ini adalah : 1) Aplikasi dibangun dengan basis
web. 2) Aplikasi dibangun dengan menggunakan framework CodeIgniter sebagai
framework untuk sistemnya dan jQuery EasyUI sebagai framework untuk
tampilannya. 3) Aplikasi yang dibangun meliputi pembuatan Bukti Kas Kecil
3
(BKK) dan pembuatan Kas Bon Sementara (KBS) yang masing – masing memiliki
fungsi tambah, edit, hapus dan pencetakan laporan (report).
2. Kajian Pustaka
Penelitian mengenai petty cash saat ini mulai banyak dilakukan. Penelitian ini
dilatarbelakangi oleh keadaan pencatatan yang dilakukan dengan cara menulis di atas
kertas. Salah satu penelitian yang menarik adalah mengenai pembuatan aplikasi
petty cash yang terkomputerisasi sebagai ganti dari sistem pembukuan yang masih
manual [1]. Pencatatan terkomputerisasi mampu mencegah kemungkinan aktivitas
penggelapan dana yang dapat terjadi ketika menggunakan sistem pencatatan manual.
Pentingnya peran sekretaris sebagai salah satu pihak yang menangani keuangan
dalam sebuah perusahaan memicu munculnya penelitian mengenai bagaimana cara
menangani keuangan perusahaan (petty cash) dari sisi sekretaris. Penelitian ini
membahas dengan jelas cara penangangan keuangan perusahaan (petty cash)
terutama bagi seorang sekretaris karena keuangan merupakan bagian yang sensitif
bagi perusahaan dan membutuhkan penanganan yang baik [4].
Perancangan sistem petty cash berbasis web memerlukan sebuah framework
yang mampu mempermudah pembuatan sistemnya. Pernyataan ini didukung dengan
adanya penelitian mengenai bagaimana mengendalikan kios-kios dalam melakukan
transaksi, bagaimana mengetahui persediaan masing-masing kios dengan realtime,
bagaimana melakukan transformasi barang yang berlebih dan yang kurang antar kios,
bagaimana menyediakan kebutuhan barang antar kios sesuai dengan kebutuhan
pelanggan dan bagaimana mendapatkan laporan transaksi di setiap kios [6].
Perancangan aplikasi dari penelitian di atas menggunakan framework CodeIgniter.
Penggunaan CodeIgniter sebagai framework yang baik untuk membangun
sebuah aplikasi berbasis web, terdapat dalam penelitian pembuatan aplikasi untuk
memudahkan proses survei dan pengolahan datanya. Aplikasi pengumpulan data
survei ini dibuat menggunakan bahasa pemrograman PHP dengan framework
CodeIgniter, javascript, serta basis data MySQL untuk penyimpanan data [7]. Berdasarkan penelitian-penelitian yang pernah dilakukan terkait petty cash,
maka dilakukan penelitian yang membahas tentang perancangan dan
pengimplementasian petty cash berbasis web. Aplikasi yang dibangun menggunakan
framework CodeIgniter yang berfungsi untuk membangun sistem dan framework
jQuery EasyUI yang berfungsi untuk mempercantik tampilan usernya. Penelitian ini
diharapkan dapat membantu dan memudahkan kinerja dari kasir sehingga dapat
memberikan hasil yang optimal.
Hal yang membedakan antara penelitian ini dengan penelitian sebelumnya
adalah adanya penggunaan dua framework yang masih jarang dikombinasikan.
Penggunaan framework jQuery EasyUI masih jarang digunakan untuk saat ini,
sehingga penulis ingin mencoba mengombinasikannya dengan framework
CodeIgniter yang sudah populer.
Kas kecil (petty cash) adalah dana kas yang dicadangkan untuk membiayai
seluruh pengeluaran perusahaan yang bersifat kecil. Dana kas kecil adalah sejumlah
uang tunai tertentu yang disisihkan dalam perusahaan dan digunakan untuk melayani
pengeluaran-pengeluaran tertentu. Biasanya pegeluaran-pengeluaran yang dilakukan
4
melalui dana kecil adalah pengeluaran-pengeluaran yang jumlah tidak besar,
pengeluaran-pengeluaran lain dilakukan dengan bank dengan cek [1].
PHP, singkatan dari Hypertext Preprosesor, merupakan sebuah scripting
language yang digunakan untuk menghasilkan halaman web. PHP bermula dari
sebuah scripting yang dikembangkan oleh Rasmus Lerdorf pada tahun 19951,
kemudian dari bahasa tersebut dikembangkan menjadi PHP (PHP 3.0) oleh Andi
Gutmans dan Zeev Suraski pada tahun 1997. Bentuk ini merupakan bentuk yang
mirip seperti digunakan sekarang ini. Tahun 1998, mereka berdua mulai
mengembang core dari mesin PHP yang dikenal dengan nama Zend Engine. Setahun
kemudian versi 4.0 dari PHP menggunakan mesin ini sebagai intinya. Kemudian
setelah pengembangan yang cukup lama, pada akhirnya diperkenalkanlah PHP 5.0
dengan Zend Engine II. Mesin ini mempunyai fitur tambahan seperti pemrograman
berorientasi objek dan banyak fungsi serta fitur lainnya [3].
CodeIgniter merupakan framework atau alat bantu yang berisi berbagai macam
fungsi/class yang dibutuhkan dalam pembuatan website, CodeIgniter menawarkan
kemudahan pembuatan sebuah program web based yang dinamis dengan konsep
MVC (Model, View, Controller). Tujuan dari pembuatan framework CodeIgniter
adalah meminimalkan pembuatan kode pada saat pembuatan website sehingga
memudahkan developer untuk membuat aplikasi web dengan lebih cepat dan mudah
dibandingkan dengan membuatnya dari awal [8].
jQuery EasyUI adalah sebuah framework yang membantu membuat halaman
web menjadi lebih mudah. jQuery EasyUI menawarkan koleksi lengkap komponen
datagrid, menu control panel, dan dynamic tab di halaman web [9].
3. Metode dan Perancangan Sistem
Pada penelitian ini, akan dilakukan beberapa tahapan penelitian yang secara
garis besar terbagi ke dalam lima tahapan, yaitu : 1) Analisis kebutuhan dan
pengumpulan data yang diperlukan. 2) Perancangan Sistem. 3) Perancangan
aplikasi/program. 4) Implementasi dan pengujian sistem, serta analisis hasil
pengujian. 5) Penulisan laporan hasil penelitian [5]. Tahapan-tahapan yang dilakukan
dalam penelitian ini dapat dilihat pada Gambar 1.
Gambar 1 Tahapan Penelitian
5
Berdasarkan bagan pada Gambar 1 dapat dijelaskan bahwa tahapan penelitian
yang dilakukan adalah sebagai berikut : 1) Tahap pertama : analisis dan
pengumpulan data, di mana pihak developer mencari tahu kebutuhan client dalam
pembuatan aplikasi. Tahap ini dilakukan dengan melakukan wawancara dengan
pengembang Aplikasi Petty Cash sekaligus web manager yaitu bapak Bayu Anggar
Kusuma. Tahap kedua, ketiga dan keempat dilakukan perancangan Aplikasi Petty
Cash menggunakan metode pengembangan sistem Prototype. Sedangkan tahap
kelima dilakukan penulisan laporan penelitian dan artikel ilmiah.
Metode pengembangan sistem yang digunakan pada penelitian ini adalah
adalah metode prototyping, karena dalam pembuatan sistem ini dilakukan
komunikasi yang intensif dengan pengguna aplikasi. Metode ini digunakan untuk
membantu pengembangan perangkat lunak dalam membentuk model dari perangkat
lunak yang harus dibuat. Metode ini dilakukan secara bertahap, yaitu dengan
mengembangkan suatu prototype yang sederhana terlebih dahulu baru kemudian
dikembangkan dari waktu ke waktu sampai perangkat lunak selesai dikembangkan.
Prototype merupakan bentuk dasar atau model awal dari suatu sistem atau subsistem.
Tahap-tahap dalam metode Prototyping ditunjukkan pada Gambar 2.
Gambar 2 Metode Prototyping [11]
Tahap pengumpulan kebutuhan dilakukan untuk mengetahui dan
menerjemahkan semua permasalahan serta kebutuhan perangkat lunak dan
kebutuhan sistem yang dibangun. Analisis kebutuhan dilakukan dengan melakukan
pencarian data-data serta informasi-informasi yang dibutuhkan oleh sistem. Ada
empat analisis kebutuhan dalam perancangan sistem yaitu analisis kebutuhan sistem,
analisis kebutuhan data, analisis kebutuhan perangkat keras dan analisis kebutuhan
perangkat lunak.
Supaya aplikasi yang dibuat dapat memenuhi kebutuhan pengguna, maka
diperlukan suatu analisis kebutuhan sistem. Analisis kebutuhan sistem ini dilakukan
dengan wawancara, dan ternyata memdapatkan hasil sebagai berikut ini: a)
kebutuhan administrator mencakup: dapat mengelola data cabang, dapat mengelola
data user, dan dapat mengelola data role user. b) kebutuhan pengelola Bukti Kas
Kecil (BKK) mencakup: dapat menambah BKK, dapat mengedit BKK, dapat
menghapus BKK dan dapat mencetak BKK. c) kebutuhan pengelola Kas Bon
Sementara (KBS) mencakup: dapat menambah KBS, dapat mengedit KBS, dapat
menghapus KBS, dan dapat mencetak KBS.
6
Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram UML.
Diagram UML meliputi diagram use case, diagram activity, diagram sequence dan
diagram class. Berikut ini akan dijelaskan masing-masing diagram yang telah dibuat.
Gambar 3 Use Case Diagram Sistem
Gambar 3 merupakan diagram use case dari aplikasi yang dibuat. Terdapat 2
(dua) aktor dalam aplikasi, yaitu aktor administrator, dan user. Aktor administrator
merupakan pemilik hak akses tertinggi, di mana bisa melakukan pengelolaan data
user, data cabang, data role user, data Bukti Kas Kecil (BKK), dan data (Kas Bon
Sementara) KBS. Hak akses user memiliki 2 (dua) use case, yaitu mengelola (Bukti
Kas Kecil) BKK, dan mengelola (Kas Bon Sementara) KBS.
Gambar 4 Activity Diagram Tambah Data Cabang
7
Gambar 4 menjelaskan tentang aktivitas admin dimana dalam kolom admin
mulai atau start, kemudian sistem merespon dengan menampilkan halaman login
untuk admin jika login non valid maka sistem akan mengembalikan proses ke
halaman login. Jika login valid maka sistem akan menampilkan menu utama kepada
admin. Setelah admin selesai melakukan proses penambahan data cabang, admin
dapat logout.
Gambar 5 Diagram Activity Update Data Cabang
Gambar 5 menjelaskan tentang aktivitas admin dimana dalam kolom admin
mulai atau start, kemudian sistem merespon dengan menampilkan halaman login
untuk admin jika login non valid maka sistem akan mengembalikan proses ke
halaman login. Jika login valid maka sistem akan menampilkan menu utama kepada
admin. Setelah admin selesai update data cabang, admin dapat logout.
Gambar 6 Diagram Activity Hapus Data Cabang
8
Gambar 6 menjelaskan tentang aktivitas admin dimana dalam kolom admin
mulai atau start, kemudian sistem merespon dengan menampilkan halaman login
untuk admin jika login non valid maka sistem akan mengembalikan proses ke
halaman login. Jika login valid maka sistem akan menampilkan menu utama kepada
admin. Setelah admin selesai melakukan hapus cabang, admin dapat logout.
Gambar 7 Sequence Diagram Hapus Data User
Gambar 7 merupakan diagram sequence untuk proses menghapus data user.
Administrator pertama kali mencari data user yang ingin dihapus. Setelah data
didapat, data akan diproses.
Gambar 8 Sequence Diagram Proses Tambah BKK
Gambar 8 merupakan diagram sequence untuk proses tambah BKK yang
dilakukan oleh user. Dijelaskan user pertama kali mengisikan data, setelah semua
9
data sudah selesai diinput maka sistem akan memberikan konfirmasi data berhasil
disimpan
Gambar 9 Class Diagram Aplikasi
Gambar 9 merupakan diagram class yang menggambarkan Model Class dan
Controller Class pada aplikasi. Model Class merupakan bagian aplikasi yang
bertugas untuk mengendalikan fungsi-fungsi yang berhubungan dengan basis data.
Pada aplikasi yang dibuat terdapat 5 (lima) Model Class, yaitu Mod_User,
Mod_Branch, Mod_Role, Mod_BKK dan Mod_KBS. Sedangkan Controller Class
bertugas untuk menghubungkan bagian view dengan bagian Model Class. Pada
aplikasi ini terdapat 5 (lima) Controller Class, yaitu Con_User, Con_Branch,
Con_Role, Con_BKK dan Con_KBS. Bagian view tidak ikut digambarkan dalam
diagram class karena bagian view di dalam aplikasi bukan dalam bentuk class tetapi
berupa tag HTML untuk menampilkan informasi pada halaman web.
Proses evaluasi prototyping dilakukan sebanyak satu kali dan dilakukan dengan
mendemokan aplikasi kepada pengguna aplikasi (administrator dan user). Penjelasan
setiap tahap evaluasi prototyping adalah sebagai berikut : Evaluasi tahap pertama
dilakukan bersama user aplikasi yaitu kepada administrator dan user yaitu manager
Software Development 6 PT. Indomarco Prismatama. Pada evaluasi ini dilakukan
dengan mengecek apakah masih ada bug, seperti otentikasi keamanan, parsing antar
database, kerapihan tata letak form dan lain-lain. Pada tahap ini pula terjadi adanya
perubahan tata letak, user account dan logout button diubah posisinya dari semula di
bagian bawah program menjadi di bagian atas pojok kiri. Berikutnya adalah
perubahan model pemilihan data yang terpilih, yang awalnya memilih data lalu
menekan button menjadi double klik pada data yang dipilih.