T1__Full text Institutional Repository | Satya Wacana Christian University: Perancangan Sistem Informasi Pelaporan Agen LPG (Liquefied Petroleum Gas) Menggunakan Framework CodeIgniter dan Library Highcharts: Studi Kasus Dinas Perdagangan Kota Salatiga T1
Perancangan Sistem Informasi Pelaporan Agen LPG
(Liquefied Petroleum Gas) Menggunakan Framework
CodeIgniter dan Library Highcharts
( Studi Kasus : Dinas Perdagangan Kota Salatiga )
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti:
Nugroho Dwi Sadono (672013199)
Ramos Somya, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2017
1.
Pendahuluan
Dinas Perdagangan Kota Salatiga merupakan Dinas Pemerintah yang secara
administratif dan teknis bertanggung jawab pada Pemerintah Kota Salatiga. Dinas
Perdagangan mempunyai tugas pokok menyelenggarakan pelayanan, penyediaan
informasi, pemantauan dan pemberian fasilitas usaha Perdagangan serta
melaksanakan penataan usaha Perdagangan secara sinergi dengan usaha ekonomi
kerakyatan dalam memajukan potensi daerah.
Salah satu tugas Dinas Perdagangan Kota Salatiga adalah melakukan
pelayanan pemantauan terhadap usaha perdagangan salah satunya adalah pengusaha
agen LPG (Liquefied Petroleum Gas). Pada data yang terdapat di Dinas Perdagangan
agen LPG yang sudah resmi terdaftar adalah 20 pangkalan agen LPG. Pelayanan
pemantauan terhadap usaha agen LPG ini harus menerapkan standar pelayanan yang
sama, serta tidak membedakan antara pelanggan yang satu dan yang lain. Bagi Dinas
Perdagangan Kota Salatiga pengusaha agen LPG perlu menyerahkan laporan tentang
data total penjualan dan alokasi tabung LPG yang nantinya akan mempengaruhi
kebijakan yang diambil Pemerintah Kota Selanjutnya.
Contoh pemantauan yang dilakukan Dinas Perdagangan Kota Salatiga akan
melalui beberapa proses yang telah ditetapkan oleh Dinas Perdagangan kota Salatiga.
Pertama, Staf melakukan pemantauan data total penjualan dan alokasi tabung LPG.
Agen LPG menyerahkan data bulanan yang berisi data total penjualan dan alokasi
dalam bentuk laporan kertas. Staf akan mendata, rekapitulasi, mengolah dan
menyusun laporan pemantauan tersebut yang selanjutnya akan dikirim ke
DISPERINDAG Provinsi Jawa Tengah.
Berdasarkan wawancara terhadap staf IT di Dinas Perdagangan, belum adanya
sistem informasi yang menangani pencatatan, pengolahan dan pelaporan hingga
pengarsipan pelaporan agen LPG menyebabkan beberapa kendala, yaitu adalah
kesulitan dalam mencari arsip pelaporan sebelumnya, rusak atau hilangnya arsip
pelaporan, pelaporan agen LPG masih menggunakan kertas dan hasil pelaporan agen
masih harus diambil di tempat sehingga kurang efisien dalam segi waktu dan biaya
yang dalam rata-rata pengambilan laporan dapat mencapai ±90 menit dan biaya Rp.
20.000 perkendaraan untuk keperluan bahan bakar. Oleh karena itu diperlukan sebuah
sistem informasi pelaporan yang dapat mempermudah proses pelaporan, pengolahan
hingga pengarsipan data pelaporan bulanan. Sistem informasi yang dibuat diharapkan
dapat mempermudah staf Dinas Perdagangan Kota Salatiga dalam melakukan
pelaporan, pengolahan maupun pengarsipan dan pencarian arsip pelaporan.
Penggunaan framework CodeIgniter diharapkan dapat mempermudah dalam
pembuatan sistem informasi ini, dengan kelebihan pada tersedianya library-library
yang akan digunakan di antaranya yaitu library database, library loader dan lainlain, yang akan digunakan dalam membuat aplikasi dan didukung dengan penggunaan
library Highcharts untuk menambahkan grafik interaktif. Berdasarkan latar belakang
masalah maka dilakukan penelitian yang berjudul Perancangan Sistem Informasi
Pelaporan Agen LPG (Liquefied Petroleum Gas) Berbasis Web dengan PHP
Framework CodeIgniter dan Library Highcharts.
2.
Tinjauan Pustaka
Penelitian mengenai sistem informasi pelaporan telah beberapa kali dilakukan.
Pada penelitian sebelumnya yang berjudul Rancang Bangun Sistem Informasi
Pencatatan dan Pelaporan Terpadu Puskesmas membahas tentang pembuatan sistem
informasi proses pencatatan dan pelaporan SP2TP yang lebih mudah dan mampu
menghasilkan laporan SP2TP yang akurat, lengkap, dan tepat waktu. [1].
Penelitian lain yang berjudul Rancang Bangun Sistem Pelaporan Anggaran
Dana Bantuan Operasional Sekolah (BOS) Berbasis WEB di Dinas Pendidikan
Kabupaten Jombang, membahas penggunaan framework CodeIgniter. Sistem
Pelaporan yang dibangun ini mampu membuat form Dokumentasi Kegiatan dan
Anggaran Sekolah (DKAS), melakukan pencatatan transaksi dana BOS dan
juga membuat pelaporan realisasi penggunaan dana BOS [2]. Jika dibandingkan
dengan penelitian terdahulu, penelitian yang akan dilakukan berfokus pada
bagaimana membuat sistem informasi pelaporan Agen LPG di Dinas Perdagangan
Kota Salatiga untuk melakukan pelaporan, pengolahan dan pengarsipan laporan
bulanan. Inovasi yang terdapat di penelitian ini dibanding dengan penelitian terdahulu
adalah penelitian ini ditambahkan grafik chart interaktif dan menggunakan fungsi
request laporan bulanan lewat email yang pada penelitian sebelumnya belum ada.
Sistem informasi yang dihasilkan diharapkan dapat mempermudah pelaporan,
pengolahan dan pengarsipan laporan bulanan dan meningkatkan kinerja staf Dinas
Perdagangan Kota Salatiga.
JavaScript adalah bahasa yang berbentuk kumpulan script yang pada
fungsinya berjalan pada suatu dokumen HTML. JavaScript bergantung kepada
browser (navigator) yang memanggil halaman web yang berisi script-script dari
JavaScript dan tentu saja terselip di dalam dokumen HTML. JavaScript juga tidak
memerlukan kompilator atau penerjemah khusus untuk menjalankannya (pada
kenyataannya kompilator JavaScript sendiri sudah termasuk di dalam browser
tersebut). Lain halnya dengan bahasa Java yang memerlukan kompilator khusus
untuk menterjemahkannya di sisi user. Penulisan JavaScript ditulis langsung dalam
dokumen HTML dan sangat mudah terlihat, sedangkan di Java, script sudah
berbentuk setengah terkompilasi (dalam bentuk applet) dan tidak mungkin terlihat
dari dalam dokumen HTML, satu mesin virtual di sisi user yang bertanggung jawab
untuk menterjemahkan program di dalam applet tersebut setiap kali halaman HTML
yang memuat applet tersebut dipanggil oleh browser [3].
Framework dapat diartikan sebagai sebuah kerangka kerja, untuk
memudahkan pekerjaan sebagai programmer. Jika dikaitkan dengan PHP (Hypertext
Preprocessor) maka dapat diartikan sebagai suatu kerangka kerja yang telah terpola
dan memudahkan pengembang web dalam pembuatan web yang menggunakan script
PHP. Pada saat membuat sebuah aplikasi web, programmer sering menulis script
PHP secara keseluruhan dan itu pun diulang pada halaman yang lain. Adanya
kerangka kerja menyebabkan programmer dimudahkan dengan fungsi-fungsi yang
ada dan mampu meningkatkan efisiensi program [5].
Library Highchart adalah library chating berdasarkan Javascript murni
dimaksudkan untuk meningkatkan aplikasi web dengan menambahkan kemampuan
chating interaktif. Highchart menyediakan berbagai grafik. Misalnya grafik garis,
grafik spine, grafik daerah, grafik batang, diagram lingkaran dan sebagainya [9].
Library Datatables adalah library yang meningkatkan plug-in untuk jQuery
perpustakaan Javascript, menambahkan menyortir, paging dan penyaringan
kemampuan untuk tabel HTML polos dengan sedikit usaha [10].
CodeIgniter adalah framework PHP yang dibuat berdasarkan kaidah MVC
(Model-View-controller) yang memungkinkan pemisahan antara layer applicationlogic dan presentation. Sehingga dalam sebuah pengembangan web, seorang
developer bisa berkonsentrasi pada core-system, sedangkan web designer bisa
berkonsentrasi pada tampilan web. Skrip PHP, query MySQL, Javascript dan CSS
bisa saling terpisah, tidak dibuat dalam satu skrip berukuran besar yang
membutuhkan resource besar pula untuk mengeksekusinya [6]. Adapun alur program
aplikasi berbasis framework Codeigniter dapat dilihat pada Gambar 1.
Gambar 1 Model, View, Controller [6].
Pada Gambar 1 dapat dijelaskan bahwa ketika datang sebuah user request,
maka akan ditangani oleh controller, kemudian controller akan memanggil model
jika memang diperlukan operasi database. Hasil dari query oleh model kemudian
akan di kembalikan ke controller. Selanjutnya controller akan memanggil view yang
tepat dan mengkombinasikannya dengan hasil query model. Hasil akhir dari operasi
ini akan ditampilkan di browser [6].
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; dan 5) Penulisan laporan hasil penelitian [8]. Tahapan yang dilakukan
dalam penelitian ini dapat dilihat pada Gambar 2.
Gambar 2 Tahapan Penelitian
Berdasarkan bagan pada Gambar 2 dapat dijelaskan bahwa tahapan penelitian
yang dilakukan adalah sebagai berikut: tahap pertama: analisis dan pengumpulan
data, yaitu melakukan analisis tentang apa saja yang dibutuhkan oleh agen LPG dan
staf Dinas juga kendala-kendala yang dihadapi oleh staf dalam melaksanakan
tugasnya. Tahap kedua: Perancangan sistem meliputi perancangan proses
menggunakan Unified Modelling Language (UML) meliputi perancangan use case
diagram, activity diagram, class diagram. Perancangan database yaitu perancangan
tabel-tabel database yang berfungsi menyimpan data yang dibutuhkan oleh aplikasi
sistem informasi pelaporan.
Tahap perancangan aplikasi terdapat desain sistem dan perancangan proses.
Terdapat dua pengguna sistem untuk aplikasi sistem informasi pelaporan, pertama
adalah agen LPG sebagai client dan staf Dinas sebagai admin. Agen LPG dapat
melakukan aktivitas sebagai berikut: 1) Agen LPG dapat melakukan update profil; 2)
Agen LPG dapat melakukan tambah data laporan bulanan, berisi jumlah alokasi dan
total penjualan; 3) Agen LPG dapat melihat dan mengolah data laporan bulanan; 4)
Agen LPG dapat melakukan update password.
Staf Dinas dapat melakukan aktivitas sebagai berikut: 1) Staf Dinas dapat
melihat dan mengelola agen LPG; 2) Staf Dinas dapat melihat, mengelola dan
download laporan bulanan; 3) Staf Dinas dapat melihat dan download grafik tahunan;
4) Staf Dinas dapat mengelola data pengguna.
Analisis kebutuhan perangkat keras dan spesifikasi perangkat lunak yang
digunakan dalam membangun sistem informasi pelaporan ini yaitu: Prosesor AMD
A8, 1.90 GHz, RAM 4 GB dan Hardisk 500 GB. Sedangkan perangkat lunak yang
digunakan adalah sistem operasi Windows 7 Ultimate, Sublime Text, XAMPP
(Apache dan MySQL), Web browser (dalam penelitian ini digunakan Mozilla
Firefox) dan Rational Rose untuk membuat UML(Unified Model Language) sistem.
Prosedur penggunaan sistem informasi pelaporan untuk agen LPG sebagai
berikut: 1) Agen LPG membuka web browser kemudian menuliskan alamat web
aplikasi; 2) Agen LPG login menggunakan username dan password yang diberikan
staf Dinas; 3) Agen LPG yang sudah login dapat melihat halaman home yang
memiliki menu pilihan dari tombol yang berupa link menuju halaman lain, antara lain
profil agen LPG, daftar laporan bulanan, ganti password dan logout; 4) Agen LPG
yang sudah login dapat melakukan kelola informasi mengenai agen LPG melalui
menu profil; 5) Agen LPG yang sudah login dapat melakukan tambah data pelaporan
bulanan melalui menu olah data; 6) Agen LPG yang sudah login dapat mengolah data
laporan melalui menu daftar laporan bulanan; 7) Agen LPG yang sudah login dapat
lakukan ganti password melalui menu ganti password; 8) Agen LPG yang sudah
login dapat keluar dari aplikasi sistem informasi pelaporan dengan melakukan klik
pada menu logout.
Prosedur penggunaan sistem informasi pelaporan untuk staf Dinas sebagai
berikut: 1) Staf Dinas membuka web browser kemudian menuliskan alamat web
aplikasi; 2) Staf Dinas yang sudah login dapat melihat halaman home yang memiliki
menu pilihan dari tombol yang berupa link menuju halaman lain, antara lain daftar
agen LPG, daftar laporan bulanan, download laporan bulanan, ganti password; 3) Staf
Dinas yang sudah login dapat melakukan kelola agen LPG pada menu data agen
LPG; 4) Staf Dinas yang sudah login dapat melakukan kelola laporan bulanan pada
menu olah data report; 5) Staf Dinas yang sudah login dapat melakukan download
laporan setiap bulan untuk setiap agen LPG di menu data report; 6) Staf Dinas yang
sudah login dapat keluar dari aplikasi sistem informasi pelaporan dengan melakukan
klik pada menu logout.
Metode pengembangan yang akan digunakan dalam penelitian ini adalah
prototyping model. Prototyping model merupakan sebuah proses untuk membangun
sebuah sistem berdasarkan dari kebutuhan pengguna. 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 [7]. Tahap-tahap dalam metode Prototyping ditunjukkan pada
Gambar 3.
Gambar 3 Metode Prototyping [7]
Metode prototype diawali dengan pengumpulan data kebutuhan. Pengumpulan
kebutuhan dilakukan dengan cara komunikasi dengan pengguna aplikasi, yang dapat
berupa wawancara atau kuesioner. Pengembang dan pengguna aplikasi menentukan
kebutuhan, tujuan dan gambaran suatu sistem. Pengembang kemudian membangun
model prototype yang dapat menggambarkan sistem. Model prototype yang sudah
dibuat kemudian diuji oleh pengguna. Hasil pengujian kemudian menjadi acuan
apakah sistem yang dibuat sudah memenuhi kebutuhan pengguna. Jika model
prototype tidak dapat menjawab kebutuhan sistem, maka pengembang memperbaiki
model prototype tersebut sampai model prototype dapat menjadi suatu sistem yang
sesuai dengan kebutuhan pengguna. Tahapan yang dilakukan pada metode prototype
dalam membangun sistem informasi pelaporan adalah listen to costomer, build/revise
mock-up dan costomer test-drive mock-up.
Tahap listen to customer dilakukan untuk mengetahui dan menerjemahkan
semua permasalahan serta kebutuhan perangkat lunak dan kebutuhan sistem yang
dibangun. Analisis kebutuhan dilakukan dengan melakukan pencarian data serta
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 sistem yang dibuat dapat memenuhi kebutuhan pengguna, maka
diperlukan suatu analisis kebutuhan sistem. Analisis kebutuhan sistem ini dilakukan
wawancara dengan staf IT Dinas Perdagangan. Berdasarkan hasil wawancara,
pelaporan agen LPG akan melalui beberapa proses. Pertama, Staf melakukan
pemantauan data penjualan, stok dan harga barang dengan mendatangi agen LPG.
Kedua, Agen LPG menyerahkan data bulanan yang berisi data penjualan, stok dan
harga dalam bentuk laporan kertas. Ketiga, Staf akan mendata, rekapitulasi, mengolah
dan menyusun laporan pemantauan tersebut yang selanjutnya akan dikirim ke
DISPERINDAG Provinsi Jawa Tengah. Oleh karena itu dibutuhkan sebuah sistem
yang dapat memenuhi kebutuhan sebagai berikut: a) kebutuhan staf Dinas mencakup
dapat mengelola data pelaporan, dapat mengelola data pengguna. b) kebutuhan agen
LPG dapat melakukan tambah pelaporan bulanan.
Pada tahap build/revise mock-up dilakukan pembuatan ptototype sistem
informasi pelaporan. Pembuatan prototype ini berdasarkan saran dari staf IT Dinas
Perdagangan. Sumber berupa kebutuhan sistem dan form format laporan bulanan.
Form yang telah ada diimplementasikan ke dalam aplikasi sistem informasi
pelaporan. Perancangan sistem mulai dibuat menggunakan UML.
Pada prototype pertama sistem dibangun menggunakan framework CodeIgniter
dan framework Bootstrap untuk desain antarmuka. Kelemahan pada prototype
pertama yaitu sistem informasi laboratorium belum dapat menampilkan data
pelaporan dan beberapa fungsi yang ada pada sistem informasi pelaporan belum dapat
digunakan. Kelemahan pada prototype pertama kemudian menjadi acuan untuk
melakukan perbaikan pada prototype kedua. Perbaikan prototype kedua yaitu
perbaikan, penambahan fungsi upload, download dan grafik. Kelemahan pada
prototype kedua yaitu sistem informasi laboratorium masih belum dapat
menampilkan grafik. Kelemahan tersebut kemudian diperbaiki pada prototype ketiga
dan keempat.
Tahapan costomer test-drives mock-up dilakukan untuk mengetahui apa saja
yang masih menjadi kekurangan aplikasi dan apa saja yang sudah memenuhi
kebutuhan sistem. Jika masih terdapat kekurangan dalam sistem, maka dilakukan
perbaikan. Apabila sistem informasi pelaporan sudah sesuai dengan kebutuhan, maka
proses selesai.
Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram UML,
meliputi use case diagram, activity diagram, sequence diagram dan class diagram.
Berikut ini akan dijelaskan masing-masing diagram yang telah dibuat.
Gambar 4 Use Case Diagram Sistem
Gambar 4 merupakan use case diagram dari sistem yang dibuat. Terdapat 2
(dua) aktor dalam aplikasi, yaitu aktor petugas (staf Dinas) dan agen LPG. Aktor
Petugas merupakan pemilik hak akses tertinggi, di mana dapat melakukan
pengelolaan data pelaporan, data agen dan data pengguna. Hak akses agen LPG yaitu
dapat mengelola data pelaporan dan update data pengguna.
Gambar 5 Activity Diagram Tambah Data Pengguna
Gambar 5 merupakan activity diagram dari proses menambah data pengguna
baru. Activity dimulai dari memilih menu olah data pengguna kemudian staf mengisi
data form yang terdiri dari username, paswword dan level pengguna. Data kemudian
akan disimpan dalam database setelah staf menekan tombol submit.
Gambar 6 Activity Diagram Tambah Laporan Bulanan
Gambar 6 merupakan activity diagram dari proses tambah data laporan
bulanan. Agen pertama memilih menu olah data kemudian agen LPG mengisi data
form yang terdiri dari tahun, bulan, alokasi dan total penjualan bulanan. Setelah agen
menekan tombol tambah maka data akan di simpan di dalam database.
Gambar 7 Activity Diagram Download Laporan
Gambar 7 merupakan activity diagram untuk download laporan yang dilakukan
oleh staf. Staf pertama akan memilih menu download laporan. Kemudian memilih
data laporan per tahun. Setelah menekan tombol download maka akan menampilkan
file (.pdf / .doc).
Gambar 8 Sequence Diagram Tambah Data Pengguna
Gambar 8 merupakan sequence diagram untuk melakukan tambah data
pengguna. Staf mengisikan data pengguna dengan memasukan username, password
dan level pengguna, kemudian akan memanggil fungsi insert_user di controller.
Fungsi insert_user akan memanggil model untuk melakukan perintah insert ke dalam
database. Setelah staf melakukan klik tombol add data akan disimpan ke dalam
database.
Gambar 9 Sequence Diagram Upload Laporan
Gambar 9 merupakan sequence diagram untuk proses tambah laporan yang
dilakukan oleh agen LPG. Data laporan terdiri dari tahun, bulan alokasi dan total
penjualan. Perintah selanjutnya adalah memanggil fungsi add yang berada di
controller. Fungsi add akan memanggil model untuk melakukan perintah simpan ke
dalam database. Database kemudian menyimpan data laporan tersebut ke dalam tabel
tabel report.
Gambar 10 Sequence Diagram Download Laporan
Gambar 10 merupakan sequence diagram untuk proses download laporan yang
dilakukan oleh staf. Pertama staf memilih laporan yang akan di download. Perintah
selanjutnya adalah memanggil fungsi download yang berada di controller. Fungsi
download akan memanggil model untuk memproses laporan yang dipilih. Database
akan melakukan return data ke controller yang akan melakukan perintah untuk
download data dalam format .pdf / .doc.
Gambar 11 Class Diagram Sistem
Gambar 11 merupakan penggambaran dari modul-modul yang ada di dalam
sistem. Berdasarkan Gambar 11, terdapat tigat class yang digunakan dalam sistem
ini, yaitu data_pelaporan, data_agen dan data_pengguna. Setiap class memiliki
fungsi/method masing-masing. Method insert() digunakan untuk memasukan data.
Method update() digunakan untuk melakukan update data, terakhir method delete()
untuk menghapus data. Class yang digunakan pada aplikasi ini terdiri dari tiga jenis
yaitu entity class, controller, dan boundary class. Entity class berisikan informasi
mengenai beberapa class yang digunakan seperti atribut dan fungsi yang digunakan
dalam class yang bersangkutan, misal pada class data_agen terdapat entity class yang
berisikan atribut nama_agen, alamat, kelurahan, telepon dan penanggung jawab selain
itu juga terdapat fungsi insert(), update() dan delete(). Kemudian controller, class ini
berisikan fungsi untuk mengolah data, pada class agen terdapat controller_data_agen
yang berisikan beberapa fungsi seperti get_data(), insertAgen(), updateAgen() dan
deleteAgen(). Class yang terakhir adalah boundary, class ini berinteraksi langsung
dengan pengguna, atau bisa dibilang user interface, pada class penjadwalan boundary
direpresentasikan sebagai class pelaporan UI. Konfigurasi yang sama juga dilakukan
pada class yang lainya yang ada pada sistem ini.
4.
Pembahasan dan Hasil Pengujian
Pembuatan aplikasi Sistem Informasi Pelaporan ini dilakukan dengan
framework CodeIgniter. Terdapat pengaturan koneksi ke database saat awal
pembuatan. Koneksi database terdapat di file database.php. Pengaturan koneksi ini
ditunjukkan pada Kode Program 1.
Kode Program 1 Koneksi Database
1.
(Liquefied Petroleum Gas) Menggunakan Framework
CodeIgniter dan Library Highcharts
( Studi Kasus : Dinas Perdagangan Kota Salatiga )
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti:
Nugroho Dwi Sadono (672013199)
Ramos Somya, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2017
1.
Pendahuluan
Dinas Perdagangan Kota Salatiga merupakan Dinas Pemerintah yang secara
administratif dan teknis bertanggung jawab pada Pemerintah Kota Salatiga. Dinas
Perdagangan mempunyai tugas pokok menyelenggarakan pelayanan, penyediaan
informasi, pemantauan dan pemberian fasilitas usaha Perdagangan serta
melaksanakan penataan usaha Perdagangan secara sinergi dengan usaha ekonomi
kerakyatan dalam memajukan potensi daerah.
Salah satu tugas Dinas Perdagangan Kota Salatiga adalah melakukan
pelayanan pemantauan terhadap usaha perdagangan salah satunya adalah pengusaha
agen LPG (Liquefied Petroleum Gas). Pada data yang terdapat di Dinas Perdagangan
agen LPG yang sudah resmi terdaftar adalah 20 pangkalan agen LPG. Pelayanan
pemantauan terhadap usaha agen LPG ini harus menerapkan standar pelayanan yang
sama, serta tidak membedakan antara pelanggan yang satu dan yang lain. Bagi Dinas
Perdagangan Kota Salatiga pengusaha agen LPG perlu menyerahkan laporan tentang
data total penjualan dan alokasi tabung LPG yang nantinya akan mempengaruhi
kebijakan yang diambil Pemerintah Kota Selanjutnya.
Contoh pemantauan yang dilakukan Dinas Perdagangan Kota Salatiga akan
melalui beberapa proses yang telah ditetapkan oleh Dinas Perdagangan kota Salatiga.
Pertama, Staf melakukan pemantauan data total penjualan dan alokasi tabung LPG.
Agen LPG menyerahkan data bulanan yang berisi data total penjualan dan alokasi
dalam bentuk laporan kertas. Staf akan mendata, rekapitulasi, mengolah dan
menyusun laporan pemantauan tersebut yang selanjutnya akan dikirim ke
DISPERINDAG Provinsi Jawa Tengah.
Berdasarkan wawancara terhadap staf IT di Dinas Perdagangan, belum adanya
sistem informasi yang menangani pencatatan, pengolahan dan pelaporan hingga
pengarsipan pelaporan agen LPG menyebabkan beberapa kendala, yaitu adalah
kesulitan dalam mencari arsip pelaporan sebelumnya, rusak atau hilangnya arsip
pelaporan, pelaporan agen LPG masih menggunakan kertas dan hasil pelaporan agen
masih harus diambil di tempat sehingga kurang efisien dalam segi waktu dan biaya
yang dalam rata-rata pengambilan laporan dapat mencapai ±90 menit dan biaya Rp.
20.000 perkendaraan untuk keperluan bahan bakar. Oleh karena itu diperlukan sebuah
sistem informasi pelaporan yang dapat mempermudah proses pelaporan, pengolahan
hingga pengarsipan data pelaporan bulanan. Sistem informasi yang dibuat diharapkan
dapat mempermudah staf Dinas Perdagangan Kota Salatiga dalam melakukan
pelaporan, pengolahan maupun pengarsipan dan pencarian arsip pelaporan.
Penggunaan framework CodeIgniter diharapkan dapat mempermudah dalam
pembuatan sistem informasi ini, dengan kelebihan pada tersedianya library-library
yang akan digunakan di antaranya yaitu library database, library loader dan lainlain, yang akan digunakan dalam membuat aplikasi dan didukung dengan penggunaan
library Highcharts untuk menambahkan grafik interaktif. Berdasarkan latar belakang
masalah maka dilakukan penelitian yang berjudul Perancangan Sistem Informasi
Pelaporan Agen LPG (Liquefied Petroleum Gas) Berbasis Web dengan PHP
Framework CodeIgniter dan Library Highcharts.
2.
Tinjauan Pustaka
Penelitian mengenai sistem informasi pelaporan telah beberapa kali dilakukan.
Pada penelitian sebelumnya yang berjudul Rancang Bangun Sistem Informasi
Pencatatan dan Pelaporan Terpadu Puskesmas membahas tentang pembuatan sistem
informasi proses pencatatan dan pelaporan SP2TP yang lebih mudah dan mampu
menghasilkan laporan SP2TP yang akurat, lengkap, dan tepat waktu. [1].
Penelitian lain yang berjudul Rancang Bangun Sistem Pelaporan Anggaran
Dana Bantuan Operasional Sekolah (BOS) Berbasis WEB di Dinas Pendidikan
Kabupaten Jombang, membahas penggunaan framework CodeIgniter. Sistem
Pelaporan yang dibangun ini mampu membuat form Dokumentasi Kegiatan dan
Anggaran Sekolah (DKAS), melakukan pencatatan transaksi dana BOS dan
juga membuat pelaporan realisasi penggunaan dana BOS [2]. Jika dibandingkan
dengan penelitian terdahulu, penelitian yang akan dilakukan berfokus pada
bagaimana membuat sistem informasi pelaporan Agen LPG di Dinas Perdagangan
Kota Salatiga untuk melakukan pelaporan, pengolahan dan pengarsipan laporan
bulanan. Inovasi yang terdapat di penelitian ini dibanding dengan penelitian terdahulu
adalah penelitian ini ditambahkan grafik chart interaktif dan menggunakan fungsi
request laporan bulanan lewat email yang pada penelitian sebelumnya belum ada.
Sistem informasi yang dihasilkan diharapkan dapat mempermudah pelaporan,
pengolahan dan pengarsipan laporan bulanan dan meningkatkan kinerja staf Dinas
Perdagangan Kota Salatiga.
JavaScript adalah bahasa yang berbentuk kumpulan script yang pada
fungsinya berjalan pada suatu dokumen HTML. JavaScript bergantung kepada
browser (navigator) yang memanggil halaman web yang berisi script-script dari
JavaScript dan tentu saja terselip di dalam dokumen HTML. JavaScript juga tidak
memerlukan kompilator atau penerjemah khusus untuk menjalankannya (pada
kenyataannya kompilator JavaScript sendiri sudah termasuk di dalam browser
tersebut). Lain halnya dengan bahasa Java yang memerlukan kompilator khusus
untuk menterjemahkannya di sisi user. Penulisan JavaScript ditulis langsung dalam
dokumen HTML dan sangat mudah terlihat, sedangkan di Java, script sudah
berbentuk setengah terkompilasi (dalam bentuk applet) dan tidak mungkin terlihat
dari dalam dokumen HTML, satu mesin virtual di sisi user yang bertanggung jawab
untuk menterjemahkan program di dalam applet tersebut setiap kali halaman HTML
yang memuat applet tersebut dipanggil oleh browser [3].
Framework dapat diartikan sebagai sebuah kerangka kerja, untuk
memudahkan pekerjaan sebagai programmer. Jika dikaitkan dengan PHP (Hypertext
Preprocessor) maka dapat diartikan sebagai suatu kerangka kerja yang telah terpola
dan memudahkan pengembang web dalam pembuatan web yang menggunakan script
PHP. Pada saat membuat sebuah aplikasi web, programmer sering menulis script
PHP secara keseluruhan dan itu pun diulang pada halaman yang lain. Adanya
kerangka kerja menyebabkan programmer dimudahkan dengan fungsi-fungsi yang
ada dan mampu meningkatkan efisiensi program [5].
Library Highchart adalah library chating berdasarkan Javascript murni
dimaksudkan untuk meningkatkan aplikasi web dengan menambahkan kemampuan
chating interaktif. Highchart menyediakan berbagai grafik. Misalnya grafik garis,
grafik spine, grafik daerah, grafik batang, diagram lingkaran dan sebagainya [9].
Library Datatables adalah library yang meningkatkan plug-in untuk jQuery
perpustakaan Javascript, menambahkan menyortir, paging dan penyaringan
kemampuan untuk tabel HTML polos dengan sedikit usaha [10].
CodeIgniter adalah framework PHP yang dibuat berdasarkan kaidah MVC
(Model-View-controller) yang memungkinkan pemisahan antara layer applicationlogic dan presentation. Sehingga dalam sebuah pengembangan web, seorang
developer bisa berkonsentrasi pada core-system, sedangkan web designer bisa
berkonsentrasi pada tampilan web. Skrip PHP, query MySQL, Javascript dan CSS
bisa saling terpisah, tidak dibuat dalam satu skrip berukuran besar yang
membutuhkan resource besar pula untuk mengeksekusinya [6]. Adapun alur program
aplikasi berbasis framework Codeigniter dapat dilihat pada Gambar 1.
Gambar 1 Model, View, Controller [6].
Pada Gambar 1 dapat dijelaskan bahwa ketika datang sebuah user request,
maka akan ditangani oleh controller, kemudian controller akan memanggil model
jika memang diperlukan operasi database. Hasil dari query oleh model kemudian
akan di kembalikan ke controller. Selanjutnya controller akan memanggil view yang
tepat dan mengkombinasikannya dengan hasil query model. Hasil akhir dari operasi
ini akan ditampilkan di browser [6].
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; dan 5) Penulisan laporan hasil penelitian [8]. Tahapan yang dilakukan
dalam penelitian ini dapat dilihat pada Gambar 2.
Gambar 2 Tahapan Penelitian
Berdasarkan bagan pada Gambar 2 dapat dijelaskan bahwa tahapan penelitian
yang dilakukan adalah sebagai berikut: tahap pertama: analisis dan pengumpulan
data, yaitu melakukan analisis tentang apa saja yang dibutuhkan oleh agen LPG dan
staf Dinas juga kendala-kendala yang dihadapi oleh staf dalam melaksanakan
tugasnya. Tahap kedua: Perancangan sistem meliputi perancangan proses
menggunakan Unified Modelling Language (UML) meliputi perancangan use case
diagram, activity diagram, class diagram. Perancangan database yaitu perancangan
tabel-tabel database yang berfungsi menyimpan data yang dibutuhkan oleh aplikasi
sistem informasi pelaporan.
Tahap perancangan aplikasi terdapat desain sistem dan perancangan proses.
Terdapat dua pengguna sistem untuk aplikasi sistem informasi pelaporan, pertama
adalah agen LPG sebagai client dan staf Dinas sebagai admin. Agen LPG dapat
melakukan aktivitas sebagai berikut: 1) Agen LPG dapat melakukan update profil; 2)
Agen LPG dapat melakukan tambah data laporan bulanan, berisi jumlah alokasi dan
total penjualan; 3) Agen LPG dapat melihat dan mengolah data laporan bulanan; 4)
Agen LPG dapat melakukan update password.
Staf Dinas dapat melakukan aktivitas sebagai berikut: 1) Staf Dinas dapat
melihat dan mengelola agen LPG; 2) Staf Dinas dapat melihat, mengelola dan
download laporan bulanan; 3) Staf Dinas dapat melihat dan download grafik tahunan;
4) Staf Dinas dapat mengelola data pengguna.
Analisis kebutuhan perangkat keras dan spesifikasi perangkat lunak yang
digunakan dalam membangun sistem informasi pelaporan ini yaitu: Prosesor AMD
A8, 1.90 GHz, RAM 4 GB dan Hardisk 500 GB. Sedangkan perangkat lunak yang
digunakan adalah sistem operasi Windows 7 Ultimate, Sublime Text, XAMPP
(Apache dan MySQL), Web browser (dalam penelitian ini digunakan Mozilla
Firefox) dan Rational Rose untuk membuat UML(Unified Model Language) sistem.
Prosedur penggunaan sistem informasi pelaporan untuk agen LPG sebagai
berikut: 1) Agen LPG membuka web browser kemudian menuliskan alamat web
aplikasi; 2) Agen LPG login menggunakan username dan password yang diberikan
staf Dinas; 3) Agen LPG yang sudah login dapat melihat halaman home yang
memiliki menu pilihan dari tombol yang berupa link menuju halaman lain, antara lain
profil agen LPG, daftar laporan bulanan, ganti password dan logout; 4) Agen LPG
yang sudah login dapat melakukan kelola informasi mengenai agen LPG melalui
menu profil; 5) Agen LPG yang sudah login dapat melakukan tambah data pelaporan
bulanan melalui menu olah data; 6) Agen LPG yang sudah login dapat mengolah data
laporan melalui menu daftar laporan bulanan; 7) Agen LPG yang sudah login dapat
lakukan ganti password melalui menu ganti password; 8) Agen LPG yang sudah
login dapat keluar dari aplikasi sistem informasi pelaporan dengan melakukan klik
pada menu logout.
Prosedur penggunaan sistem informasi pelaporan untuk staf Dinas sebagai
berikut: 1) Staf Dinas membuka web browser kemudian menuliskan alamat web
aplikasi; 2) Staf Dinas yang sudah login dapat melihat halaman home yang memiliki
menu pilihan dari tombol yang berupa link menuju halaman lain, antara lain daftar
agen LPG, daftar laporan bulanan, download laporan bulanan, ganti password; 3) Staf
Dinas yang sudah login dapat melakukan kelola agen LPG pada menu data agen
LPG; 4) Staf Dinas yang sudah login dapat melakukan kelola laporan bulanan pada
menu olah data report; 5) Staf Dinas yang sudah login dapat melakukan download
laporan setiap bulan untuk setiap agen LPG di menu data report; 6) Staf Dinas yang
sudah login dapat keluar dari aplikasi sistem informasi pelaporan dengan melakukan
klik pada menu logout.
Metode pengembangan yang akan digunakan dalam penelitian ini adalah
prototyping model. Prototyping model merupakan sebuah proses untuk membangun
sebuah sistem berdasarkan dari kebutuhan pengguna. 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 [7]. Tahap-tahap dalam metode Prototyping ditunjukkan pada
Gambar 3.
Gambar 3 Metode Prototyping [7]
Metode prototype diawali dengan pengumpulan data kebutuhan. Pengumpulan
kebutuhan dilakukan dengan cara komunikasi dengan pengguna aplikasi, yang dapat
berupa wawancara atau kuesioner. Pengembang dan pengguna aplikasi menentukan
kebutuhan, tujuan dan gambaran suatu sistem. Pengembang kemudian membangun
model prototype yang dapat menggambarkan sistem. Model prototype yang sudah
dibuat kemudian diuji oleh pengguna. Hasil pengujian kemudian menjadi acuan
apakah sistem yang dibuat sudah memenuhi kebutuhan pengguna. Jika model
prototype tidak dapat menjawab kebutuhan sistem, maka pengembang memperbaiki
model prototype tersebut sampai model prototype dapat menjadi suatu sistem yang
sesuai dengan kebutuhan pengguna. Tahapan yang dilakukan pada metode prototype
dalam membangun sistem informasi pelaporan adalah listen to costomer, build/revise
mock-up dan costomer test-drive mock-up.
Tahap listen to customer dilakukan untuk mengetahui dan menerjemahkan
semua permasalahan serta kebutuhan perangkat lunak dan kebutuhan sistem yang
dibangun. Analisis kebutuhan dilakukan dengan melakukan pencarian data serta
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 sistem yang dibuat dapat memenuhi kebutuhan pengguna, maka
diperlukan suatu analisis kebutuhan sistem. Analisis kebutuhan sistem ini dilakukan
wawancara dengan staf IT Dinas Perdagangan. Berdasarkan hasil wawancara,
pelaporan agen LPG akan melalui beberapa proses. Pertama, Staf melakukan
pemantauan data penjualan, stok dan harga barang dengan mendatangi agen LPG.
Kedua, Agen LPG menyerahkan data bulanan yang berisi data penjualan, stok dan
harga dalam bentuk laporan kertas. Ketiga, Staf akan mendata, rekapitulasi, mengolah
dan menyusun laporan pemantauan tersebut yang selanjutnya akan dikirim ke
DISPERINDAG Provinsi Jawa Tengah. Oleh karena itu dibutuhkan sebuah sistem
yang dapat memenuhi kebutuhan sebagai berikut: a) kebutuhan staf Dinas mencakup
dapat mengelola data pelaporan, dapat mengelola data pengguna. b) kebutuhan agen
LPG dapat melakukan tambah pelaporan bulanan.
Pada tahap build/revise mock-up dilakukan pembuatan ptototype sistem
informasi pelaporan. Pembuatan prototype ini berdasarkan saran dari staf IT Dinas
Perdagangan. Sumber berupa kebutuhan sistem dan form format laporan bulanan.
Form yang telah ada diimplementasikan ke dalam aplikasi sistem informasi
pelaporan. Perancangan sistem mulai dibuat menggunakan UML.
Pada prototype pertama sistem dibangun menggunakan framework CodeIgniter
dan framework Bootstrap untuk desain antarmuka. Kelemahan pada prototype
pertama yaitu sistem informasi laboratorium belum dapat menampilkan data
pelaporan dan beberapa fungsi yang ada pada sistem informasi pelaporan belum dapat
digunakan. Kelemahan pada prototype pertama kemudian menjadi acuan untuk
melakukan perbaikan pada prototype kedua. Perbaikan prototype kedua yaitu
perbaikan, penambahan fungsi upload, download dan grafik. Kelemahan pada
prototype kedua yaitu sistem informasi laboratorium masih belum dapat
menampilkan grafik. Kelemahan tersebut kemudian diperbaiki pada prototype ketiga
dan keempat.
Tahapan costomer test-drives mock-up dilakukan untuk mengetahui apa saja
yang masih menjadi kekurangan aplikasi dan apa saja yang sudah memenuhi
kebutuhan sistem. Jika masih terdapat kekurangan dalam sistem, maka dilakukan
perbaikan. Apabila sistem informasi pelaporan sudah sesuai dengan kebutuhan, maka
proses selesai.
Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram UML,
meliputi use case diagram, activity diagram, sequence diagram dan class diagram.
Berikut ini akan dijelaskan masing-masing diagram yang telah dibuat.
Gambar 4 Use Case Diagram Sistem
Gambar 4 merupakan use case diagram dari sistem yang dibuat. Terdapat 2
(dua) aktor dalam aplikasi, yaitu aktor petugas (staf Dinas) dan agen LPG. Aktor
Petugas merupakan pemilik hak akses tertinggi, di mana dapat melakukan
pengelolaan data pelaporan, data agen dan data pengguna. Hak akses agen LPG yaitu
dapat mengelola data pelaporan dan update data pengguna.
Gambar 5 Activity Diagram Tambah Data Pengguna
Gambar 5 merupakan activity diagram dari proses menambah data pengguna
baru. Activity dimulai dari memilih menu olah data pengguna kemudian staf mengisi
data form yang terdiri dari username, paswword dan level pengguna. Data kemudian
akan disimpan dalam database setelah staf menekan tombol submit.
Gambar 6 Activity Diagram Tambah Laporan Bulanan
Gambar 6 merupakan activity diagram dari proses tambah data laporan
bulanan. Agen pertama memilih menu olah data kemudian agen LPG mengisi data
form yang terdiri dari tahun, bulan, alokasi dan total penjualan bulanan. Setelah agen
menekan tombol tambah maka data akan di simpan di dalam database.
Gambar 7 Activity Diagram Download Laporan
Gambar 7 merupakan activity diagram untuk download laporan yang dilakukan
oleh staf. Staf pertama akan memilih menu download laporan. Kemudian memilih
data laporan per tahun. Setelah menekan tombol download maka akan menampilkan
file (.pdf / .doc).
Gambar 8 Sequence Diagram Tambah Data Pengguna
Gambar 8 merupakan sequence diagram untuk melakukan tambah data
pengguna. Staf mengisikan data pengguna dengan memasukan username, password
dan level pengguna, kemudian akan memanggil fungsi insert_user di controller.
Fungsi insert_user akan memanggil model untuk melakukan perintah insert ke dalam
database. Setelah staf melakukan klik tombol add data akan disimpan ke dalam
database.
Gambar 9 Sequence Diagram Upload Laporan
Gambar 9 merupakan sequence diagram untuk proses tambah laporan yang
dilakukan oleh agen LPG. Data laporan terdiri dari tahun, bulan alokasi dan total
penjualan. Perintah selanjutnya adalah memanggil fungsi add yang berada di
controller. Fungsi add akan memanggil model untuk melakukan perintah simpan ke
dalam database. Database kemudian menyimpan data laporan tersebut ke dalam tabel
tabel report.
Gambar 10 Sequence Diagram Download Laporan
Gambar 10 merupakan sequence diagram untuk proses download laporan yang
dilakukan oleh staf. Pertama staf memilih laporan yang akan di download. Perintah
selanjutnya adalah memanggil fungsi download yang berada di controller. Fungsi
download akan memanggil model untuk memproses laporan yang dipilih. Database
akan melakukan return data ke controller yang akan melakukan perintah untuk
download data dalam format .pdf / .doc.
Gambar 11 Class Diagram Sistem
Gambar 11 merupakan penggambaran dari modul-modul yang ada di dalam
sistem. Berdasarkan Gambar 11, terdapat tigat class yang digunakan dalam sistem
ini, yaitu data_pelaporan, data_agen dan data_pengguna. Setiap class memiliki
fungsi/method masing-masing. Method insert() digunakan untuk memasukan data.
Method update() digunakan untuk melakukan update data, terakhir method delete()
untuk menghapus data. Class yang digunakan pada aplikasi ini terdiri dari tiga jenis
yaitu entity class, controller, dan boundary class. Entity class berisikan informasi
mengenai beberapa class yang digunakan seperti atribut dan fungsi yang digunakan
dalam class yang bersangkutan, misal pada class data_agen terdapat entity class yang
berisikan atribut nama_agen, alamat, kelurahan, telepon dan penanggung jawab selain
itu juga terdapat fungsi insert(), update() dan delete(). Kemudian controller, class ini
berisikan fungsi untuk mengolah data, pada class agen terdapat controller_data_agen
yang berisikan beberapa fungsi seperti get_data(), insertAgen(), updateAgen() dan
deleteAgen(). Class yang terakhir adalah boundary, class ini berinteraksi langsung
dengan pengguna, atau bisa dibilang user interface, pada class penjadwalan boundary
direpresentasikan sebagai class pelaporan UI. Konfigurasi yang sama juga dilakukan
pada class yang lainya yang ada pada sistem ini.
4.
Pembahasan dan Hasil Pengujian
Pembuatan aplikasi Sistem Informasi Pelaporan ini dilakukan dengan
framework CodeIgniter. Terdapat pengaturan koneksi ke database saat awal
pembuatan. Koneksi database terdapat di file database.php. Pengaturan koneksi ini
ditunjukkan pada Kode Program 1.
Kode Program 1 Koneksi Database
1.