Perancangan Sistem Informasi Pelaporan Agen LPG Liquefied ...repository.uksw.edu/bitstream/123456789/13702/1/T1_672013199_Full...litan dalam mencari arsip pelaporan sebelumnya, rusak

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 lain-

lain, 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 application-

logic 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

Kode Program 1 menjelaskan konfigurasi untuk koneksi dengan database.

Konfigurasi ini dilakukan dengan pengisian untuk nama database yang digunakan

berupa ‘hostname’, ‘username’, ‘password’ dan ’database’.

1. <?php 2. 'dsn' => '',

3. 'hostname' => 'localhost',

4. 'username' => 'root',

5. 'password' => '',

6. 'database' => 'agen',

7. 'dbdriver' => 'mysqli',

8. 'dbprefix' => '',

9. 'pconnect' => FALSE,

10. 'db_debug' => (ENVIRONMENT !== 'production'),

11. 'cache_on' => FALSE,

12. 'cachedir' => '',

13. 'char_set' => 'utf8',

14. 'dbcollat' => 'utf8_general_ci',,

15. 'encrypt' => FALSE,

16. 'compress' => FALSE,

17. 'stricton' => FALSE,

18. 'failover' => array(),

19. 'save_queries' => TRUE);

20. ?>

Gambar 12 Halaman Home (Agen LPG)

Gambar 12 adalah halaman home berdasarkan hak akses agen LPG yang akan

menampilkan profil agen LPG. Agen LPG dapat mengisi data informasi agen LPG.

Informasi yang dapat di ubah yaitu data penanggung jawab, no. Telepon, email dan

alamat. Kode Program 2 Fungsi Library Datatables.

Kode Program 2 menjelaskan fungsi tabel dengan menggunakan library

Datatables. Baris ke enam sampai sembilan merupakan fungsi button untuk

mempermudah menampilkan data tabel dan mempermudah export ke dalam format

.xls / .xlsx dan .pdf . Pada library Datatables ini juga disertakan column visible untuk

mempermudah sortir column. Pada setiap data akan menjadi row grouping antar data.

Gambar 13 Halaman Data Report (Agen LPG)

1. <script>

2. $(document).ready(function() {

3. $('#examples').DataTable( {dom: 'Bfrtip',buttons: [

4. {extend: 'copy',exportOptions: {columns: ':visible'}},

5. {extend: 'excel',exportOptions: {columns: ':visible'}},

6. {extend: 'pdf',exportOptions: {columns: ':visible'}},

7. 'colvis'],

8. columnDefs: [ {targets: 0,visible: false} ]

9. } );} );

10. </script>

Gambar 13 adalah halaman Data Report . Pada halaman ini agen LPG dapat

mengelola data report dan tambah data report tiap bulan. Pada proses tambah report

agen LPG harus mengisi informasi bulan, tahun, alokasi dan total jual . Pada halaman

ini terdapat fungsi untuk mencari dan order data agar lebih detail.

Gambar 14 Halaman Data Pengguna (Staf Dinas)

Gambar 14 adalah halaman Data Pengguna. Halaman ini staf Dinas dapat

menambah, menghapus, dan mengubah data pengguna. Untuk menambah pengguna

staf Dinas diharuskan mengisi field username, password dan memilih level pengguna

untuk menentukan hak akses. Ketika level “client”dipilih maka juga akan menambahkan

data ke data agen untuk hak akses agen LPG. Kode Program 3 Fungsi Request Email.

Kode Program 3 menjelaskan fungsi request email. Pada sistem ini pada

tanggal 1 setiap bulan, akan secara otomatis mengirim email berisi himbauan pada

setiap agen LPG. Pada baris ke 2 menjelaskan pada setiap tanggal 2 kode akan di

update menjadi “1”, selanjutnya pada baris ke 3 akan melakukan pengecekan, jika

tanggal sama dengan “1” dan kode sama dengan “1” maka akan mengirim email.

1. $tanggal=date(d);

2. If($tanggal==”2”){$kode=(“1”,”1”);}

3. If($tanggal==”1” && $this->m_cek->getkode(“1”)){

4. $url = $_SERVER['HTTP_REFERER'];

5. $config = Array(

6. 'protocol' => 'smtp',

7. 'smtp_host' => 'ssl:

8. 'smtp_port' => 465,

9. 'smtp_user' => '',

10. 'smtp_pass' => '',

11. 'mailtype' => 'html',

12. 'charset' => 'iso-8859-1',

13. 'wordwrap' => TRUE);

14. $this->load->library('email', $config);

15. $this->email->set_newline("\r\n");

16. $this->email->from($email);

17. $this->email->to($s->email);

18. $this->email->subject($subjek);

19. $this->email->message($pesan);

20. $this->email->send())

21. $this->m_cek->updatekode(“1”,”0”);

22. }}

Baris lima sampai tiga belas berisi konfigurasi isi email. Baris ke lima belas sampai

sembilan belas adalah konfigurasi email. Baris ke 21 kode akan di update menjadi

“0” agar email terkirim satu kali setiap bulan.

Gambar 15 Halaman Data Agen (Staf Dinas)

Gambar 15 adalah halaman Data Agen. Pada halaman ini staf Dinas dapat

mengelola data agen dan juga dapat melakukan export data ke dalam format .xls /

.xlsx dan .pdf. Pada halaman ini terdapat fungsi untuk mencari dan order data agar

lebih detail, staf juga dapat melakukan request report pada agen LPG yang terkirim

ke email agen LPG.

Gambar 16 Halaman Data Report (Staf Dinas)

Gambar 16 adalah halaman Data report. Halaman ini staf Dinas dapat

mengelola data report bulanan dan juga dapat melakukan export file ke dalam format

.xls / .xlsx dan .pdf. Pada halaman ini terdapat fungsi untuk mencari dan order data

agar lebih detail. Untuk format laporan per tahun dapat dipilih dan export data per

tahun pada setiap bulan. Staf dapat melihat informasi mengenai total penjualan dan

persentase jual, jika lebih dari 120% akan mendapatkan rekomendasi tambah alokasi.

Kode Program 4 Fungsi Menampilkan Data Chart dengan library Highcharts.

Kode Program 4 menjelaskan fungsi yang digunakan untuk menampilkan data

chart menggunakan library Highchart. Baris ke empat menjelaskan tempat

menampilkan chart dan tipe chart. Baris ke sembilan sampai sepuluh menjelaskan

kategori bulan. Baris ke dua belas menjelaskan data chart yang akan di tampilkan.

Gambar 17 Halaman Chart (Staf Dinas)

Gambar 17 merupakan hasil data chart yang berasal dari Dinas Perdagangan

didapatkan dari total penjualan tahun 2016 pada data report yang dikategorikan pada

jumlah total penjualan tiap bulan dari semua data report yang ada di setiap tahun.

Pada halaman ini staf dapat download chart.

Pengujian sistem dilakukan dengan menguji fungsi-fungsi dari sistem yang

dibuat untuk mencari bug pada sistem. Pengujian sistem bertujuan agar sistem yang

dibuat berjalan sesuai harapan dan memenuhi kebutuhan pengguna. Pengujian yang

akan dilakukan akan melalui pengujian alpha dan beta menggunakan metode

blackbox.

Pengujian alpha dilakukan dengan menguji fungsi-fungsi sistem secara

langsung tanpa memperhatikan alur eksekusi program. Pengujian ini memperhatikan

apakah ungsi telah berjalan sesuai yang diharapkan. Tabel 1 adalah hasil pengujian

dari sistem 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

Sukses login

Sukses login

Valid

1. <script type="text/javascript">

2. jQuery(function(){

3. new Highcharts.Chart({

4. chart: {renderTo: 'chart',type: 'line',},

5. title: {text: 'Penjualan LPG 3 Kg',x: -20},

6. subtitle: {text: <?php foreach ($data1->result() as $a)

7. {echo$a->tahun;} ?>,x: -20},

8. xAxis: {

9. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

10. 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

11. },yAxis: {title: {text: 'Jumlah LPG'} 12. },series: [{„data‟}]});}); 13. </script>

Username dan password

salah maupun kosong

Gagal login Gagal login

Tambah Data Pengguna Form diisi dengan benar Form wajib diisi kosong

Sukses tambah data Gagal tambah data

Sukses tambah data Gagal tambah data

Valid

Ubah Data Pengguna Form diisi dengan benar Sukses ubah data Sukses ubah data Valid

Hapus Data Pengguna Pilih salah satu data Sukses hapus data Sukses hapus data Valid

Upload Report Form diisi dengan benar Sukses tambah data Sukses tambah data Valid

Ubah Report Form diisi dengan benar Sukses ubah data Sukses ubah data Valid

Hapus Report Pilih salah satu data Sukses hapus data Sukses hapus data Valid

Menampilkan data

Report

Buka halaman daftar

Report

Sukses menampilkan

data

Sukses menampilkan

data

Valid

Menampilkan data Agen Membuka halaman data Agen

Sukses menampilkan data

Sukses menampilkan data

Valid

Menampilkan Pengguna Membuka halaman data

Pengguna

Sukses menampilkan

data

Sukses menampilkan

data

Valid

Ubah data Agen Form diisi dengan benar Sukses ubah data Sukses ubah data Valid

Hapus data Agen Pilih Salah satu data Sukses hapus data Sukses hapus data Valid

Menampilkan data chart Membuka halaman chart Sukses menampilkan

chart

Sukses menampilkan

chart

Valid

Export data Agen,

Report, Chart

Klik tombol Sukses Export data Sukses Export data Valid

Berdasarkan hasil pengujian aplikasi dapat dilihat pengujian dari setiap fungsi

valid, maka disimpulkan aplikasi ini berjalan dengan baik dan sesuai harapan.

Pengujian beta merupakan pengujian yang dilakukan oleh orang yang tidak terlibat

dalam pembuatan aplikasi, pengujian dilakukan oleh calon pengguna aplikasi.

Pengujian dilakukan dengan menggunakan kuesioner dengan mengisi jawaban dari

pertanyaan yang ada kepada sample user. Sample user berjumlah 15 responden yang

dipilih secara acak. Sample user pada pengujian ini adalah Agen LPG dan staf Dinas

Perdagangan Kota Salatiga yang menggunakan aplikasi. Hasil kuesioner dapat dilihat

pada Tabel 2. Tabel 2 Hasil Jawaban Kuesioner

No Pernyataan STS TS CS S SS

1 Aplikasi aplikasi ini mudah digunakan 0 0 1 8 6

2 Tampilan, huruf dari aplikasi ini dapat dilihat dengan jelas 0 0 3 7 5

3 Menu-menu pada aplikasi ini mudah dipahami dan tidak

membingungkan

0 2 4 6 3

4 Aplikasi ini membantu dalam melakukan pengelolaan data

agen.

0 1 2 5 7

5 Aplikasi ini membantu dalam melakukan pengelolaan data

report.

0 1 8 4 2

6 Aplikasi ini bermanfaat untuk menyimpan arsip data report 0 0 9 4 2

Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung

persentase jawaban responden yang telah mengisi kuesioner. Berikut persamaan

untuk menghitung index persentase jawaban responden.

Persamaan Index % = ∑ Skor:Y*100% Persamaan 1 Persamaan Persentase Jawaban Responden.

Persamaan 1 merupakan persamaan untuk menghitung persentase jawaban

responden. Hasil perhitungan pertanyaan pertama didapatkan index 86.7% responden

setuju jika aplikasi mudah digunakan. Untuk pertanyaan kedua didapatkan index

82.7% responden setuju jika tampilan huruf dapat dilihat dengan jelas. Untuk

pertanyaan ketiga didapatkan index 73.3% responden memberikan pendapat setuju

bahwa menu-menu pada aplikasi mudah dipahami dan tidak membingungkan.

Pertanyaan keempat didapatkan nilai index 84% responden setuju bahwa aplikasi

membantu dalam pengolahan data agen. Untuk pertanyaan kelima 69.3% responden

setuju aplikasi membantu dalam pengolahan data report. Sedangkan untuk

pertanyaan keenam 70.7% responden setuju bahwa aplikasi ini bermanfaat untuk

menyimpan arsip data report.

Pengujian dilakukan kepada 15 agen LPG dan staf Dinas Perdagangan Kota

Salatiga, adapun hal-hal yang diujikan yaitu cara penambahan data agen, tambah

data report, export data report dan export data agen. Pada pelaporan penjualan /

tambah data report agen LPG, data yang dilaporkan adalah data total penjualan dan

jumlah alokasi pada setiap bulan.

Pengujian manfaat juga dilakukan kepada staf Dinas Perdagangan Kota

Salatiga. Berdasarkan wawancara dengan staf Dinas Perdagangan Kota Salatiga,

dengan adanya aplikasi pelaporan memudahkan staf Dinas Perdagangan Kota

Salatiga dalam memantau dan menyusun laporan agen LPG. Staf dinas dengan

menggunakan aplikasi ini tidak memerlukan biaya untuk bahan bakar kendaraan

karena staf Dinas tidak perlu lagi mendatangi tiap agen LPG untuk pengumpulan

laporan, sedangkan adanya aplikasi agen LPG hanya perlu mengisi laporan penjualan

dan alokasi tabung LPG bulanan. Aplikasi ini juga membantu Dinas Perdagangan

dalam mengambil keputusan tentang rekomendasi jumlah alokasi agen LPG setiap

bulan.

5. Kesimpulan

Berdasarkan penelitian yang dilakukan, maka dapat diambil kesimpulan bahwa

Perancangan Sistem Informasi Pelaporan Agen LPG dapat dirancang dengan PHP

Framework CodeIgniter dengan library Highcharts. Penggunaan aplikasi pelaporan

dapat diterapkan untuk mempermudah agen LPG dalam mengirim laporan penjualan

ke dinas Perdagangan Kota Salatiga dan mempermudah staf dinas Perdagangan Kota

Salatiga dalam menyusun laporan. Selain itu, Codeigniter menyediakan fungsi insert,

read, update dan delete yang mempermudah serta mempercepat dalam pembuatan

aplikasi dan penggunaan Highchart untuk menampilkan data dalam bentuk chart

memudahkan staf dalam pemantauan dan penyusunan laporan.

Hasil pengujian aplikasi menunjukkan bahwa Sistem Pengolahan Data agen

LPG dapat menyelesaikan permasalahan yang ada pada pelaporan data agen LPG di

Dinas Perdagangan. Seperti pegawai dapat mengakses data pelaporan yang di-input

oleh agen LPG secara online. Sebelum adanya sistem, anggaran untuk

mengumpulkan laporan yaitu Rp. 20.000, waktu yang dibutuhkan ±90 menit. Setelah

adanya sistem, tidak mengeluarkan anggaran untuk pengambilan laporan. Waktu

yang dibutuhkan untuk pengumpulan laporan ±20 menit. Aplikasi ini juga membantu

Dinas Perdagangan dalam mengambil keputusan tentang rekomendasi penambahan

alokasi tabung LPG dan juga mempermudah staf Dinas Perdagangan untuk merekap,

mengelola dan menyimpan data pelaporan secara terstruktur.

6. Pustaka [1] Herawati, Sri., 2016. Rancang Bangun Sistem Informasi Pencatatan dan

Pelaporan Terpadu Puskesmas. Jurnal Ilmiah Multitek Indonesia(10). Juni

2016. ISSN 1907-6223.

[2] Mujianto, A. H., 2015. Rancang Bangun Sistem Pelaporan Anggaran Dana

Bantuan Operasional Sekolah (BOS) Berbasis WEB di Dinas Pendidikan

Kabupaten Jombang. Jurnal Ilmiah Edutic(2). Mei 2015 ISSN: 2407-4489.

[3] Ducket, J., 2010. Beginning HTML, XHTML, CSS, and JavaScript. Penerbit:

Wiley Publishing.

[4] Bentley, L. D., & Whittne, J. L., 2007. Systems analysis and design for the

global enterprise. 7th edition. New York: McGraw-Hill.

[5] Isaknudin, M. S., 2009. Apa dan mengapa harus framework, (Online),

(http://www.kuliah-informatika.com/2009/10/framework-apa-dan-mengapa-

harus.html, diakses 5 Maret 2017).

[6] CodeIgniter., ” CodeIgniter”, (Online),(http:// Codeigniter.com, diakses 9

Agustus 2017).

[7] Pressman, R. S., 2001. Software engineering: a practitioner’s approach.

Amerika Serikat: R.S. Pressman and Associates.

[8] Hasibuan, Zainal A., 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer

dan Teknologi Informasi: Konsep, Teknik, dan Aplikasi. Jakarta: Ilmu

Komputer Univesitas Indonesia.

[9] Highchart., ”Highchart”, (Online),(http://highchart.com, diakses 9 Agustus

2017).

[10] Datatables., ” Datatables”, (Online),(http:// Datatables.net, diakses 9 Agustus

2017).