-
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
-
Perancangan Aplikasi Petty Cash Berbasis Web
Menggunakan CodeIgniter dan jQuery EasyUI
(Studi Kasus PT Indomarco Prismatama)
Artikel Ilmiah
Oleh:
Tri Maulana Putra Handoyo
NIM :672012017
Telah disetujui untuk direview
Tanggal : ……………………….
Pembimbing
Ramos Somya, S.Kom., M.Cs.
-
1
Perancangan Aplikasi Petty Cash Berbasis Web
Menggunakan CodeIgniter dan jQuery EasyUI
(Studi Kasus PT Indomarco Prismatama)
1) Tri Maulana Putra Handoyo, 2) Ramos Somya
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50771, Indonesia
Email: 1) [email protected], 2)
[email protected]
Abstract
Indomarco Prismatama Inc. has Petty Cash system which used to
help company daily
activity. The system desktop based and has several deficiencies,
such as an installation
trouble, and some specific requirements. This research done in
order to developt the Petty
Cash system using CodeIgniter framework and jQuery EasyUI. The
system was developed
using prototyping method. The test results showed that design of
Petty Cash application
which web based help the Petty Cash management system, and
decrease the installation
adversity when the application desktop based without leaving
user interface of desktop based
application characteristic.
Keywords: Petty Cash, PHP, CodeIgniter Framework, jQuery EasyUI,
Indomarco
Prismatama
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.
-
10
1. $db['pettyCash_db'] = array( 2. 'dsn' => '', 3. 'hostname'
=> 'localhost', 4. 'username' => 'postgres', 5. 'password'
=> 'akim', 6. 'database' => 'PETTY_CASH', 7. 'dbdriver' =>
'postgre', 8. 'dbprefix' => '', 9. 'pconnect' => TRUE, 10.
'db_debug' => TRUE, 11. 'cache_on' => FALSE, 12. 'cachedir'
=> '', 13. 'char_set' => 'utf8', 14. 'dbcollat' =>
'utf8_general_ci', 15. 'swap_pre' => '', 16. 'encrypt' =>
FALSE, 17. 'compress' => FALSE, 18. 'stricton' => FALSE, 19.
'failover' => array(), 20. 'save_queries' => TRUE 21. );
$db['transaction_db'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'postgres',
'password' => 'akim',
'database' => 'TRANSACTION',
'dbdriver' => 'postgre',
'dbprefix' => '',
'pconnect' => TRUE,
'db_debug' => TRUE,
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'postgres',
'password' => 'akim',
'database' => 'SYS_APPL',
'dbdriver' => 'postgre',
'dbprefix' => '',
'pconnect' => TRUE,
'db_debug' => TRUE,
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
4. Hasil Implementasi dan Pembahasan
Implementasi dari pengembangan aplikasi Petty Cash ini dilakukan
dengan
framework CodeIgniter. Terdapat beberapa pengaturan yang harus
dilakukan
pertama kali saat pembuatan, yaitu pengaturan koneksi ke basis
data PostgreSQL dan
pengaturan route file. Pengaturan koneksi basis data dilakukan
pada file database
yang terletak pada folder config. Pengaturan ini ditunjukkan
pada Kode Program 1.
Kode Program 1 Koneksi Framework CodeIgniter dengan Basis
Data
Kode Program 1 merupakan perintah untuk melakukan pengaturan
koneksi dari
framework CodeIgniter ke basis data PostgreSQL. Pada pengaturan
ini dilakukan
pengisian untuk hostname, username, password dan nama dari basis
data yang
digunakan. Sedangkan pengaturan untuk route ditunjukkan pada
Kode Program 2.
Kode Program 2 Pengaturan File Route CodeIgniter
Kode Program 2 bertugas untuk menentukan controller apa yang
akan
dijalankan pertama kali ketika web diakses dari browser.
Pengaturan ini dilakukan
pada baris ke 1, yaitu dengan mengisikan nama controller pada
default_controller.
Controller yang pertama kali dipanggil adalah beranda.
Controller ini berada pada
folder controller.
1. $route['default_controller'] = 'con_Home'; 2.
$route['404_override'] = ''; 3. $route['translate_uri_dashes'] =
FALSE;
-
11
Gambar 10 Halaman Home Aplikasi Petty Cash
Gambar 10 merupakan halaman depan dari Aplikasi Petty Cash.
Halaman ini
akan menampilkan login form untuk digunakan sebagai pengecekan
apakah user
tersebut memiliki hak untuk menggunakan aplikasi ini, sekaligus
mengecek role
usernya.
Gambar 11 Halaman Home Aplikasi Petty Cash
Gambar 11 merupakan tampilan home aplikasi Petty Cash. Halaman
diatas
merupakan contoh halaman user yang telah login dengan role
admin. Gambar 10
dan 11 sudah menggunakan framework jQuery EasyUI sebagai
framework untuk
tampilannya.
Kode Program 3 Pemanggilan CSS jQuery EasyUI
1.
-
12
Kode Program 3 merupakan perintah dalam pemanggilan CSS jQuery
EasyUI
yang merupakan bagian dari framwork jQuery EasyUI. File ini
diletakkan di dalam
folder assets, sedangkan pemanggilannya dilakukan di file header
yang diletakkan di
bagian view.
Admin dapat mengelola beberapa data yang ada, yaitu data user,
role dan
branch. Mengelola data tersebut dapat dilakukan dengan masuk ke
menu yang
diinginkan, gambar 12 menampilkan halaman yang digunakan untuk
menu kelola
data user.
Gambar 12 Halaman Menu Data User
Untuk menampilkan data user pada Gambar 12, digunakan dengan
prinsip
Model View Controller (MVC). Pada proses ini, pertama kali akan
dipanggil fungsi
tampil yang terdapat pada file con_User (terletak di bagian
controller). Fungsi tampil
ini akan melakukan pemanggilan fungsi tampil yang terdapat di
file mod_User
(terletak di bagian model). Fungsi tampil ini bertugas melakukan
query untuk
mengambil data user dari basis data. Selanjutnya bagian fungsi
tampil pada
controller akan meneruskan data user yang didapat dari
pemanggilan fungsi tampil
ke bagian view sehingga tersaji seperti Gambar 12. Kode Program
4 merupakan
perintah pada fungsi tampil pada bagian controller. Kode Program
5 merupakan
perintah fungsi tampil pada bagian model dan Kode Program 6
merupakan perintah
pada bagian view.
Kode Program 4 Fungsi tampil pada con_User
Kode Program 5 Fungsi tampil pada mod_User
1. public function tampil(){ 2. $result['hasil'] =
$this->mod_User->tampil(); 3. echo
json_encode($result['hasil']); }
1. function tampil() 2. { 3. $page =
$this->input->post('page') ?
intval($this->input->post('page'))
: 1;
4. $rows = $this->input->post('rows') ?
intval($this->input->post('rows')) : 10;
5. $sort = $this->input->post('sort') ?
strval($this->input->post('sort')) : 'USER_ID';
6. $order = $this->input->post('order') ?
strval($this->input->post('order')) : 'asc';
7. $where = ''; 8. $category =
$this->input->post('category'); 9. $search =
$this->input->post('search'); 10. $petik = "'"; 11. if
($this->input->post('search')) { 12. $where = 'where
cast("'.$category.'" as text) like
.$petik.'%'.$search.'%'.$petik.'';}
13. $offset = ($page - 1) * $rows; 14. $rs =
$this->db->query('select count(*) as cnt from "sys_user"
'.$where.' ');
15. $row = $rs->result(); 16. $result["total"] =
$row[0]->cnt; 17. $rs = $this->db->query('select 18.
"USER_ID", "USER_NAME", "PASSWORD", "ROLE_ID", "BRANCH_ID",
"ACTIVE_DATE", "ACTIVE_FLAG", "RESET_FLAG", "CREATE_DATE",
"LAST_UPDATE_DATE" from "sys_user" '.$where.' order by
"'.$sort.'"
'.$order.' limit '.intval($this->input->post('rows')).'
offset
'.$offset.'');
19. $result['rows'] = $rs->result();
-
13
Kode Program 6 Perintah pada Bagian View v_User
Penggunaan teknik MVC ini dilakukan dengan memanfaatkan fitur
MVC yang
disediakan oleh framework CodeIgniter (CI). Hal ini dilakukan
dengan cara
memanggil kelas induk CI_Controller dan CI_Model yang berasal
dari library
controller dan model CI. Kelas induk Controller dan Model ini
disimpan di folder
core pada bagian system. Sedangkan bagian view hanya bertugas
untuk menampilkan
halaman web saja.
Pada setiap bagian menu yang dibuat, sudah ditambahkan
masing-masing fitur
insert, update, delete, dan search. Pembuatan menu tersebut
langsung terlihat di
bagian halaman yang sama membuatnya lebih mudah dalam melakukan
pengelolaan
data
Gambar 13 Halaman Entry BKK
1.
2. 3. 4. User ID
5. User Name
6. Password 7. Role ID
8. Branch ID
9. Active Date
10. Active Flag
11. Reset Flag
12. Create Date
13. Last Update Date
14. 15. 16.
-
14
Halaman Entry BKK merupakan salah satu halaman inti dari program
ini.
Halaman ini berfungsi untuk melakukan pencatatan setiap detail
dari kas kecil yang
ingin dibuat. Detail terlihat di bagian bawah sedangkan bagian
atas memuat detail
yang berfungsi sebagai header dari Bukti Kas Kecil yang dibuat,
seperti tanggal,
nomor, dan lain-lain.
Gambar 14 Halaman List BKK
Halaman List BKK merupakan halaman yang berfungsi untuk
menampilkan
semua data BKK yang sudah tersimpan. Halaman ini mampu
menampilkan data–
data BKK dengan setiap detail dari nomor BKK dan mencetak
laporan BKK yang
telah dibuat.
Gambar 15 Halaman Paid BKK
Proses perubahan status BKK dapat dilakukan melalui halaman Paid
BKK.
Halaman ini berfungsi untuk menampilkan BKK yang sudah berstatus
Release dan
melakukan perubahan status data BKK, misalnya perubahan status
dari Release
menjadi status Paid atau status Release menjadi Hold.
-
15
Gambar 16 Halaman Inquiry BKK
Gambar 16 merupakan halaman yang berfungsi untuk menampilkan
semua
rekapitulasi BKK yang pernah dibuat, halaman ini menampilkan
semua data BKK,
tidak ada pengecualian dalam hal status seperti halaman Paid BKK
yang hanya
menampilkan BKK dengan status Release saja.
Pengujian aplikasi dilakukan dengan menguji fungsi-fungsi dari
aplikasi yang
telah dibuat untuk mencari kesalahan/bug pada sistem. Pengujian
aplikasi dilakukan
agar sistem yang dibuat berjalan sesuai dengan yang diharapkan
dan dapat memenuhi
kebutuhan pengguna. Pengujian aplikasi ini menggunakan dua
teknik pengujian yaitu
pengujian alpha dan pengujian beta.
Pengujian alpha menggunakan metode blackbox yaitu pengujian
fungsi-fungsi
aplikasi secara langsung tanpa memperhatikan alur eksekusi
program. Pengujian ini
dilakukan dengan memperhatikan apakah fungsi telah berjalan
sesuai rancangan dan
sesuai yang diharapkan. Tabel 1 adalah hasil pengujian dari
aplikasi yang telah
dilakukan.
Tabel 1 Hasil Pengujian Blackbox
Fungsi yang diuji Kondisi Output yang
diharapkan
Output yang
dihasilkan sistem
Status
Pengujian
Login Username dan password
benar
Username dan password
salah maupun kosong
Sukses login
Gagal login
Sukses login
Gagal login
Valid
Tambah data
sys_management (user, branch, role)
Form diisi dengan benar
Form diisi beberapa atau kosong
Sukses tambah data
Gagal tambah data
Sukses tambah data
Gagal tambah data
Valid
Ubah data sys_management
(user, branch, role)
Form diisi dengan benar Sukses ubah data Sukses ubah data
Valid
Hapus data
sys_management
(user, branch, role)
Pilih salah satu data Sukses hapus data Sukses hapus data
Valid
Load data
sys_management (user, branch, role)
Buka halaman Sukses load data Sukses load data Valid
-
16
Tambah data BKK Form diisi dengan benar
Form diisi beberapa atau kosong
Sukses tambah data
Gagal tambah data
Sukses tambah data
Gagal tambah data
Valid
Ubah data BKK
Form diisi dengan benar
Sukses ubah data
Sukses ubah data
Valid
Hapus BKK
Pilih salah satu data Sukses hapus data Sukses hapus data
Valid
Load BKK
Buka halaman Sukses load data Sukses load data Valid
Unduh BKK report Pilih salah satu report File dapat diunduh
Sukses unduh file Valid
Tambah data KBS Form diisi dengan benar
Form diisi beberapa atau
kosong
Sukses tambah data
Gagal tambah data
Sukses tambah data
Gagal tambah data
Valid
Ubah data KBS
Form diisi dengan benar
Sukses ubah data
Sukses ubah data
Valid
Hapus KBS
Pilih salah satu data Sukses hapus data Sukses hapus data
Valid
Load KBS
Buka halaman Sukses load data Sukses load data Valid
Unduh KBS report Pilih salah satu report File dapat diunduh
Sukses unduh file Valid
Berdasarkan pengujian yang dilakukan pada aplikasi web dapat
dilihat status
pengujian dari setiap fungsi valid, maka disimpulkan bahwa
aplikasi ini berjalan
dengan baik dan sesuai yang diharapkan. Pengujian beta adalah
pengujian yang
dilakukan oleh orang yang tidak ikut dalam pembuatan aplikasi
atau calon pengguna
aplikasi. Pengujian beta dilakukan dengan melakukan wawancara
dengan manager
Software Development 6(SD6) bagian web PT. Indomarco Prismatama,
Jakarta.
Berdasarkan wawancara tersebut didapatkan bahwa aplikasi Petty
Cash yang baru
dapat membantu dan mempermudah dalam pengelolaan data kas kecil
karena sudah
berbasis web sesuai dengan yang user minta dan dinilai memiliki
tampilan yang user
friendly dengan tampilannya yang seperti aplikasi desktop.
Selain itu permasalahan
yang sebelumnya ada di aplikasi yang berbasis desktop, sekarang
sudah berkurang
dengan diubahnya aplikasi ke basis web.
5. Simpulan Berdasarkan penelitian yang telah dilakukan, maka
dapat diambil kesimpulan
bahwa perancangan aplikasi Petty Cash di PT. Indomarco
Prismatama dapat
dikembangkan dengan framework CodeIgniter (CI) dan jQuery
EasyUI. Framework
CI bermanfaat dalam pengembangan aplikasi menggunakan Model View
Controller
(MVC). MVC dapat dengan mudah dibuat menggunakan kelas induk
Controller dan
Model yang ada di framework CI. Sedangkan framework jQuery
EasyUI membantu
dalam membuat tampilan user yang user friendly dan menarik.
Hasil pengujian juga menunjukkan bahwa perancangan aplikasi
Petty Cash ini
membantu dalam mempermudah proses pengelolaan sistem Petty Cash
yang ada,
karena berbasis web, sehingga mengurangi kesulitan instalasi
saat sistem masih
menggunakan aplikasi yang berbasis desktop, namun memiliki user
interface yang
mirip dengan aplikasi desktop.
-
17
6. Pustaka [1] Aryanji, R. Membangun Aplikasi Pengendalian
Intern Petty Cash Finance
Berbasis Web Pada PT. Staninless Steel Primalve Maju Bersama.
2015.
Jakarta: Universitas Esa Unggul.
[2] Koespradono, Suraya, & K. Rachmawati, Y. 2013. “Sistem
Informasi Pengolahan Data Pertumbuhan Ekonomi dan Ketimpangan di
Kabupaten
Klaten (Tahun 2003-2012) Menggunakan Framework CodeIgniter”.
Jurnal
Script. 1 (1). 46-54.
[3] Kandaga, T., & Sarean, R. B. 2010. “Konsep dan
Perancangan Code-Completion untuk PHP”. Jurnal Informatika. 6 (1).
95-103.
[4] Wiyani, N. T. 2010. “Pentingnya Pengetahuan Petty Cash bagi
Seorang Sekretaris”. Tarakanita News. 9 (1). 32-40.
[5] Hasibuan, Zainal A. Metodologi Penelitian Pada Bidang Ilmu
Komputer dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi.
2007. Jakarta: Ilmu
Komputer Univesitas Indonesia.
[6] Subchan, Nur. 2014. “Perancangan Sistem Informasi Franchise
Berbasis Android, PHP (CodeIgniter), dan MySQL”. Vokasindo (Jurnal
Ilmu-Ilmu
Terapan dan Hasil Karya Nyata). 2 (2). 60.
[7] Osmond, A. B., Nugroho, Lukito Edi, Kusumawardhani, Sri
Suning. 2016. “Aplikasi Pengumpulan Data Survei Memanfaatkan SMS
Gateway”. Jurnal
Nasional Teknik Elektro dan Teknologi Informasi. 1 (5). 1.
[8] Arifudzaki, B., Somantri, M., & R. Adian F. 2010.
“Aplikasi Sistem Informasi Persediaan Barang pada Perusahaan Ekspor
Hasil Laut Berbasis Web”.
Transmisi (Jurnal Ilmiah Teknik Elektro). 12 (4). 138-144.
[9] Gulo, E., Rachmawati, Y., & Andayati, Dina. 2015.
“Implementasi Paket Tabel jEasyUI pada Inventory (Studi Kasus Toko
Bangunan UD. Tokosa)”.
Jurnal Script. 2 (2). 12-19.
[10] Pangkey, F., Tinangon, J., Sabijono,. 2015. “Evaluasi
Penerapan Akuntansi Kas Kecil Pada PT. Sinar Pure Foods Bitung”.
Jurnal Berkala Ilmiah
Efisiensi. 15 (4). 288-299.
[11] Pressman, R.S, 2001, Software Engineering : A
Practitioner’s Approach, Amerika Serikat : R.S. Pressman and
Associates.