T1__Full text Institutional Repository | Satya Wacana Christian University: Perancangan Aplikasi Sistem Pengolahan Data BBM dan KEPOKMAS Berbasis Web dengan Framework CodeIgniter: Studi Kasus Dinas Perdagangan Kota Salatiga T1 Full text
Perancangan Aplikasi Sistem Pengolahan Data BBM dan
KEPOKMAS Berbasis Web dengan Framework CodeIgniter
( Studi Kasus : Dinas Perdagangan Kota Salatiga )
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti
Ajik Sulistyo Hadi
672013182
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Mei 2017
2
3
4
5
6
7
1.
Pendahuluan
Perkembangan teknologi informasi yang sangat pesat telah membawa dunia
ke era baru yang belum pernah terbayangkan sebelumnya. Teknologi informasi
dapat menunjang dan meningkatkan produktivitas untuk berbagai jenis kegiatan
khususnya dalam bidang pekerjaan. Banyak perusahaan atau instansi sekarang
menggunakan aplikasi web untuk menunjang pekerjaan karyawan dalam hal
komunikasi, hiburan serta mengolah data dan informasi.
Dinas Perdagangan Kota Salatiga merupakan instansi yang membantu
walikota dalam menyelenggarakan pelayanan, penyediaan informasi, pemantauan
dan pemberian fasilitas usaha perdagangan serta melaksanakan penataan usaha
perdagangan secara sinergis dengan usaha ekonomi kerakyatan dalam memajukan
potensi daerah[1]. Dinas Perdagangan saat ini merupakan bidang independen yang
sebelumnya bergabung di Dinas Perindustrian Perdagangan dan Koperasi
(Disperindagkop), sehingga saat ini merupakan bidang yang sedang berkembang
dalam hal teknologi informasi khususnya yang memiliki platfrom web sesuai
dengan kemampuan dalam bidang web engineering.
Dinas Perdagangan Kota Salatiga mempunyai tugas melakukan pelayanan
memantau dan mengolah data terhadap usaha perdagangan seperti pemantauan
data BBM (Bahan Bakar Minyak) perbulan yang ada di SPBU (Stasiun Pengisian
Bahan Bakar Umum) untuk mengetahui realisasi pemakaian BBM di Kota
Salatiga dan pemantauan stabilitas harga produk KEPOKMAS (Kebutuhan Pokok
Masyarakat). SPBU perlu menyerahkan data BBM yang berisi stock awal, Jumlah
penerimaan, jumlah penjualan, stock akhir, dan vol.tera dalam bentuk liter yang
akan di ambil pegawai. Pemantauan stabilitas harga produk KEPOKMAS yang
dilakukan petugas dengan mengambil sempel harga produk ditempat dan
merekapitulasi data harga untuk mendapatkan harga rata-rata produk dan
perubahan harga produk setiap hari di Kota Salatiga yang akan dilaporkan ke
Disperindakop Provinsi khususnya pada tim pengendali inflasi daerah.
Berdasarkan wawancara di Dinas Perdagangan kota salatiga khususnya pada
pegawai IT pemantauan stabilitas harga produk dan pelaporan yang menangani
pencatatan, pengolahan, pelaporan dan pengarsipan laporan. Belum adanya sistem
untuk pemantauan stabilitas harga produk KEPOKMAS dan BBM yang
menyebabkan beberapa kendala seperti pelaporan BBM dari 7 SPBU masih
menggunakan ketas yang diambil di tempat oleh pegawai dan pengumpulan data
harga produk KEPOKMAS diambil dari sempel yang terdapat pada 15 pasar,
sehingga memakan waktu rata-rata ±2 jam dalam pengambilan data dan biaya
Rp.20.000 perkendaraan. Kemudian men-input, merekap, mengelola dan
menyusun laporan hasil pemantauan stabilitas harga produk KEPOKMAS dan
BBM menggunakan Microsoft Office Excel yang membutuhkan waktu ±2 hari.
Rusak atau hilangnya arsip laporan karena belum ada database untuk
penyimpanan. Berdasarkan masalah yang telah dijelaskan, dapat diselesaikan
dengan sistem informasi untuk membuat aplikasi berupa Perancangan Sistem
Pengolahan Data BBM dan KEPOKMAS Berbasis Web yang merupakan salah
satu wujud komitmen Dinas Perdagangan Kota Salatiga untuk selalu berusaha
meningkatkan pelayanan kepada masyarakat Kota Salatiga.
8
Sistem berbasis web ini dapat diakses dimana saja, dapat berjalan di semua
sistem operasi, dapat diakses lewat computer. Sistem ini juga menggunakan
framework codeigniter. Framework ini mempunyai kelebihan yaitu open source,
berjalan di semua versi PHP. Program hanya membutuhkan resource yang sedikit
sehingga program berjalan dengan ringan dan cepat. Framework ini menggunakan
model, view, controller (MVC). Proses kerja framework memudahkan
programmer dalam membuat web. Dokumentasi yang lengkap mulai dari langkah
instalasi sampai dengan fungsi / class dalam pembuatan web, dan memiliki
pustaka yang lengkap [2].
2.
Tinjauan Pustaka
Penelitian mengenai sistem informasi pelaporan telah beberapa kali
dilakukan. Pada penelitian sebelumnya yang berjudul Perancangan dan
Pengembangan Sistem Pelaporan Terpadu Sistem Informasi Puskesmas (SPT
SIMPUS) dengan Metode BPR (Business Process Redesign). Pembuatan aplikasi
ini menggunakan framework CakePHP untuk menerapkan arsitektur MVC, Fpdf
untuk menghasilkan berkas pdf, Open Flash Chart untuk menampilkan grafik
peyebaran penyakit di setiap desa, grafik cakupan pasien per kelompok umur, grafik
epidemiologi, dan rekapitulasi pemakaian obat, format gambar GIF (Graphic
Interchange Format) dengan warna hitam sebagai garis pembatas desa dan warna
putih sebagai wilayah desa, dan untuk pemetaan menggunakan Pustaka GD
(Graphics Draw) untuk memanipulasi gambar. Sistem ini dikembangkan tanpa
login dengan tujuan agar seluruh pegawai dapat menggunakannya di jaringan
lokal [3].
Penelitian lain dengan judul Perancangan Sistem Informasi Pelaporan
Monografi Berbasis Web (Studi Kasus Pada Kantor Kecamatan Semarang Utara)
yang membahas tentang penggunaan PHP dan MySQL dalam pembuatan sebuah
sitem informasi pelaporan yang menjadikan pelaporan monografi dapat
mempercepat rekapitulasi data karena data telah tersedia tinggal di-download
menurut filter sehingga mempermudah dan mempercepat pekerjaan dalam
pengelolaan data laporan monografi[4].
Berdasarkan penelitian di atas, persamaan yang dibahas ini pada teknologi
yang digunakan berbasis web, mengunakan PHP, dan MySQL. Persamaan lain
dari penelitian ini untuk merekap dan pengarsipan data. Jika dibandingkan dengan
penelitian terdahulu, penelitian yang dilakukan ini berfokus pada bagaimana
membuat Perancangan Sistem pengolahan data BBM dan KEPOKMAS Berbasis
Web dan menggunakan teknologi bahasa pemograman framework CodeIgniter
dan library DataTables. Penggunaan bahasa pemograman CodeIgniter membuat
program lebih terstruktur, mudah untuk mengelola, mudah untuk dikembangkan
dengan adanya fitur MVC (Model-View-Controller)[5].
CodeIgniter (CI) adalah sebuah framework PHP yang berupa kumpulan
folder dan file PHP, JavaScript, CSS, TXT, dan file berbasis web lainnya dengan
setting tertentu untuk menggunakannya dan menyediakan library dan helper yang
dapat dimanfaatkan di dalam pemrograman PHP[2]. CodeIgniter didasarkan pada
pola pengembangan Model-View-Controller. MVC adalah sebuah pendekatan
perangkat lunak yang memisahkan aplikasi logika dari presentasi. Dalam
9
prakteknya, hal itu memungkinkan halaman web untuk memuat script kecil karena
presentasi terpisah dari scripting PHP.
Model merepresentasikan struktur data. Biasanya kelas model akan berisi
fungsi yang membantu mengambil, memasukkan, dan men-update informasi
dalam database.
View adalah informasi yang sedang disajikan kepada pengguna. sebuah
View biasanya akan menjadi halaman web, tetapi dalam CodeIgniter, view dapat
juga menjadi fragmen halaman seperti header atau footer. Hal ini juga dapat
menjadi halaman RSS, atau jenis lain dari "halaman website ".
Controller berfungsi sebagai perantara antara Model, View, dan resource
lainnya yang dibutuhkan untuk memproses request dan menghasilkan suatu
halaman web[5].
DataTables adalah plugin yang di bangun dari jquery untuk menampilkan
data dalam bentuk tabel dan sudah terintegrasi search form dan pagination untuk
penomoran data pada tabel. Sehingga tidak perlu lagi membuat form pencarian
pada aplikasi, dan tidak perlu lagi membuat pagination sendiri. Kelebihan dari
datatables ini adalah dapat mengintegrasikan pagination dan search form pada
tabel data yang di buat. Fitur dari datatables yang digunkanan untuk aplikasi
sebagai berikut. Pagination, instant search and multi-column ordering,
memungkinkan aplikasi untuk melakukan pembuatan halaman secara otomatis,
melakukan pencarian secara langsung berdasarkan data yang ingin di cari dan
melakukan multi order dari ascending ke descending atau sebaliknya. Easily
theme-able DataTables, jQueryUI, Bootstrap, Foundation memungkinkan
aplikasi untuk menggunakan tema dalam dataTables, Jquery UI, Bootstrap ,dan
fundation guna untuk memperindah tampilan. Smart handling of column widths,
Memungkinkan aplikasi melakukan auto width column mengikuti ukuran layar.
Fitur tersebut dapat di jalankan dengan menggunakan fungsi tertentu dan semua
sudah di berikan oleh dataTables[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) Implementasi dan
pengujian sistem, serta analisis hasil pengujian; dan 4) Penulisan laporan hasil
penelitian. Tahapan yang dilakukan dalam penelitian ini dapat dilihat pada
Gambar 1.
Gambar 1. Tahapan Penelitian
10
Gambar 1 dapat dijelaskan bahwa tahapan penelitian yang dilakukan adalah
sebagai berikut: Tahap pertama: analisis kebutuhan serta pengumpulan data
merupakan tahapan dalam identifikasi permasalahan yang dihadapi oleh pegawai
dalam melaksanakan tugasnya terkait dengan Perancangan Sistem pengolahan
data BBM dan KEPOKMAS. Identifikasi permasalahan dilakukan berdasarkan
hasil wawancara dengan pegawai pemantauan stabilitas harga produk dan
pelaporan SPBU, guna mendapatkan data, proses bisnis sebelum aplikasi serta
menentukan system requirement pada pembuatan Sistem Informasi Pelaporan
SPBU.
Gambar 2 Proses Bisnis Pemantauan Harga Produk Dinas Perdagangan Kota Salatiga.
Gambar 2 menjelaskan proses bisnis Pemantauan stabilitas harga produk
oleh pegawai di Dinas Perdagangan Kota Salatiga di mana pegawai melaksanakan
tugas pemantauan stabilitas harga produk KEPOKMAS datang langsung ke
tempat, mengambil beberapa sempel harga produk dan merekapitulasi data harga
untuk mendapatkan harga rata-rata produk dan perubahan harga produk setiap
hari. Pegawai mulai men-input, merekap, mengelola dan menyusun laporan hasil
pemantauan stabilitas harga produk menggunakan Microsoft Office Excel.
Laporan diserahkan kepada Kepala pegawai untuk diserahkan ke Kepala Kasi
Perdagangan untuk diteliti. Setelah menerima laporan dari Kepala pegawai,
Kepala Kasi Perdagangan meneliti, jika merasa sudah benar maka memaraf hasil
pemantauan stabilitas harga produk dan mengajukan hasil laporan ke Sekertaris
Dinas Perdagangan kemudian Sekertaris memeriksa dan memaraf hasil laporan
dan mengajukan penandatangangan ke Kepala Dinas Perdagangan. Kepala Dinas
Perdagangan menandatangani laporan hasil pemantauan produk dan di
kembalikan ke pegawai, kemudian laporan hasil pemantauan stabilitas harga
produk dimintakan nomor agenda ke bagian kesekretariatan untuk mengirim
laporan ke Disperindakop Povinsi.
Tahap kedua : perancangan sistem berdasarkan hasil analisis kebutuhan
menggunakan UML (Unified Modelling Language) yang terdiri dari use case
diagram, activity diagram, sequence diagram, dan class diagram dan asitektur
diagram. Tambahan perancangan yang lain yaitu perancangan database yang
berfungsi menyimpan data yang dibutuhkan oleh aplikasi sistem informasi
Pelaporan SPBU. Pada tahap ini dilakukan pembuatan sistem menggunakan
framework codeigniter, yaitu menyiapkan folder model, view dan controller.
11
Tahap berikutnya yaitu pembuatan aplikasi/sistem. Model Prototype
digunakan sebagai metode pengembangan sistem. Model Prototype merupakan
metode yang menyajikan gambaran lengkap tentang sistemnya, user dapat melihat
pemodelan sistem dari sisi tampilan maupun teknik prosedural yang akan
dibangun[7]. Gambar mengenai model prototype dapat dilihat pada Gambar 2.
Gambar 3 Metode Prototyping [6]
Tahap - tahap dalam model prototype pada Gambar 2 adalah : (1) Listen To
Costumer, (2) Build, (3) Customer Test. Pada tahap pertama didapatkan
kebutuhan sistem yaitu aplikasi mengolah data serta melakukan perhitungan strata
secara otomatis yang kemudian hasil dari perhitungan data tersebut terintegrasi.
Kebutuhan tersebut didapatkan melalui tahap analisis kebutuhan dan
pengumpulan data dari tahapan penelitian yang dilakukan. Tahap Build
merupakan tahapan perancangan serta pembuatan aplikasi. Perancangan sistem
dalam penelitian ini dibuat dalam bentuk diagram UML, meliputi use case
diagram, activity diagram, sequence diagram dan class diagram[6].
Use case digunakan untuk membentuk tingkah laku benda/ things dalam
sebuah model serta dalam realisasikan oleh sebuah collaboration. Umumnya
sebuah use case digambarkan dengan elips dengan garis yang solid, biasanya
mengandung nama.
Pada use case diagram dibawah ini, dapat di lihat bahwa sistem pengolahan
data BBM dan KEPOKMAS Kota Salatiga memiliki tiga pengguna yaitu
Manager SPBU , Petugas dan Pegawai Dinas Perdagangan.
Gambar 4 Use Case Diagram Sistem Pengolahan Data BBM dan KEPOKMAS
Gambar 4 di atas menjelaskan alur kerja aplikasi Sistem Pengolahan Data
BBM dan KEPOKMAS yang terdiri dari 3 aktor yaitu: Manager SPBU, pegawai,
dan Petugas. Manager SPBU dapat mengelola data report SPBU itu sendiri yang
dapat di CRUD(update, insert, delete). Mengelola profil SPBU yang berisi
12
no.SPBU, alamat, nama manager, no.telepon, dapat di-update oleh meneger
kecuali no.SPBU karena no.SPBU tidak dapat berubah atau sudah dipantenkan
oleh pegawai.
Pegawai hanya bisa melihat data report SPBU karea yang bisa melakukan
CRUD adalah manager SPBU. Pegawai dapat melakukan proses mengelola data
pengguna yang terdiri dari view data pengguna, insert pengguna baru, update
pengguna, dan delete pengguna. Pegawai juga dapat mengelola semua harga
produk kemudian merata-rata harga produk perhari dan perbulan untuk
mendapatkan report yang diinginkan. Petugas dapat mengelola data harga produk
menggunakan CRUD (update, insert, delete) dan men-update data profil petugas
itu sendiri.
Activity Diagram memberikan gambaran bagaimana sistem berinteraksi
dengan pengguna dan/atau dengan sistem lain. Berikut merupakan Activity
Diagram dari fungsi pengolahan data BBM dan KEPOKMAS. Aktivitas dimulai
dengan login terlebih dahulu kemudian akan masuk ke tampilan menu utama. Di
dalam sistem ini terdapat pegawai, manager SPBU dan petugas dimana manager
dan petugas bisa masuk ke sistem jika sudah mempunyai username dan password
yang akan didaftarkan dan diberikan oleh pegawai terlebih dahulu.
Gambar 5 Activity Diagram Download Data Report
Dari Gambar 5 merupakan Activity Diagram Download Data Report yang
dilakukan oleh pegawai. Setelah login berjalan sukses, pegawai akan masuk ke
menu utama yang berisi menu BBM dan menu KEPOKMAS. Pegawai bisa
memilih menu BBM atau KEPOKMAS untuk men-download data report yang
diinginkan. Pilih menu download Report dan men-filter untuk memilih data report
yang diinginkan dan men-download .
Gambar 6 Activity Diagram Upload Data Report BBM
13
Gambar 6 merupakan Activity Diagram Upload Data Report BBM yang
dilakukan oleh manager SPBU. Manager SPBU akan login menggunakan
username dan password terlebih dahulu. Jika login berjalan sukses, akan masuk
menu utama di mana terdapat beberapa pilihan dan melengengkapi data SPBU
terlebih dahulu. Pilih menu Upload data report kemudian men-upload data report
dalam bentuk excel. Pilih menu data report untuk mengecek data report yang diupload sudah benar atau belum. Manager SPBU dapat men-update dan mendelete data yang salah.
Sequence diagram, digunakan untuk menggambarkan interaksi yang
tersedia antar komponen di dalam dan di sekitar sistem (pengguna, interface, dan
sebagainya) dalam bentuk pesan dan digambarkan terhadap waktu. Sequence
diagram dapat menggambarkan skenario dan langkah-langkah yang dilakukan
sehingga mendapatkan sebuah hasil.
Gambar 7 Sequence Diagram Tambah Data Pengguna
Gambar 7 merupakan sequence diagram untuk melakukan tambah data
penggna. Pegawai menambah data pengguna dengan memasukkan Username,
password , dan level. Setelah pegawai mengisi maka klik tombol tambah, data
akan disimpan kedalam database dan di tampilkan pada menu data pengguna.
Class diagram menggambarkan keadaan (atribut/poperti) suatu sistem.
Sekaligus menawarkan lanyanan untuk memanipulasi keadaan tersebut
(metode/fungsi) suatu sistem. Class diagram juga menggambarkan struktur dan
diskripsi class, packing dan objek beserta hubungan satu sama lain seperti
pewarisan, asosiasi, dan lain-lain.
Gambar 8 Class Diagram Sistem Pengolahan Data BBM.
Gambar 8 merupakan class diagram sistem Pengolahan data BBM.
Terdapat empat class yang digunakan dalam sistem ini, yaitu : kelola_data_report,
kelola_data_BBM, kelola_data_pengguna, dan kelola_profil_SPBU. Setiap class
14
memiliki fungsi/method seperti insert, update, delete yang digunakan. Class yang
digunakan juga memiliki beberapa entity class yang bersangkutan seperti
report_entity, BBM_entity, SPBU_entity, dan pengguna_entity.
Gambar 9 Class Diagram Sistem Pengolahan Data KEPOKMAS.
Gambar 9 merupakan class diagram
sistem pengolahan Data
KEPOKMAS.
Class
Produk
memiliki
relasi
dengan
class
Harga_Produk_Perpasar, class Rata-rata_Harga_Produk_perhari, class Ratarata_Harga_Produk_perbulan dimana setiap class memiliki satu data produk dari
class Produk. Rata-rata_Harga_Produk_perhari memiliki attribut yaitu
Nama_Produk, Satuan, Rata-rata_Harga_Kemarin, Rata-rata_Harga_Sekarang,
Naik_Turun, Persen, Keterangan. Penghitungan rata-rata perhari dilakukan
dengan mengambil data di class Harga_Produk_Perpasar yang menghitung ratarata harga produk dari setiap data laporan pasar perhari yang masuk setiap hari.
Perancangan interface dilakukan agar pembuatan sistem lebih mudah dan
terarah. Interface yang dibuat dapat berupa input maupun output data untuk
menampilkan informasi. interface yang dirancang bersifat user friendly dengan
tujuan agar pengguna dapat menggunakan sistem yang telah dibuat dengan
nyaman dan mudah.
Gambar 10 Desain Interface Halaman Utama Pegawai
Gambar 10 menampilkan desain interface Halaman Utama website Sistem
Pengolahan BBM dan KEPOKMAS. Halaman ini yang dilihat pegawai pertama
kali setelah melakukan login. Bagian atas menampilkan logo Dinas Perdagangan,
tanggal buka sistem, logout, menu utama, dan konten. Menu utama berisi home,
BBM, dan KEPOKMAS, dan data Pengguna. Di dalam menu BBM terdapat menu
profil SPBU, menu data Report, menu download Report, dan menu grafik.
Sedangkan dalam menu KEPOKMAS terdapat menu data harga produk perhari,
15
menu Rata-rata Harga Produk Perhari, menu Rata-rata Harga Produk Perbulan,
dan menu Grafik. Konten menampilkan menu yang dipilih dari menu utama.
Gambar 11 Desain Arsitektur Pengolahan Data KEPOKMAS
Gambar 11 merupakan desain arsitektur pengolahan data KEPOKMAS.
Sistem pengolahan data KEPOKMAS ini user interface dibagi dalam 4 bagian
yaitu : user interface data pengguna, profil pasar, produk, dan harga produk.
Controller berfungsi sebagai penghubung user interface dengan database yang
dibagi menjadi 6 bagian yaitu : controller untuk kelola data pengguna, kelola data
profil pasar, kelola produk, kelola harga produk pasar perhari, kelola rata-rata
harga produk perhari, dan kelola rata-rata harga produk perbulan. Database
memiliki 6 entity yaitu: Pengguna_Entity, Profil_Pasar_Entity, Produk_Entity,
Harga_Produk_Pasar_Perhari_Entity.
Gambar 12 Desain Arsitektur Pengolahan DataBBM
Gambar 12 merupakan desain arsitektur pengolahan data BBM. Sistem
pengolahan data BBM ini user interface dibagi dalam 3 bagian yaitu : user
interface data pengguna, profil SPBU, dan data report BBM. Controller dibagi
menjadi 4 bagian yaitu : controller untuk kelola data pengguna, kelola data profil
SPBU, kelola data report, kelola Data Bulan. Controller berfungsi sebagai
penghubung user interface dengan database. Database memiliki 4 entity yaitu :
Pengguna_Entity, Profil_SPBU_Entity, Data_Report_Entity,dan Bulan_Entity.
16
4.
Hasil dan Pembahasan
Hasil dari penelitian ini merupakan aplikasi dalam bentuk website yang di
implementasikan menggunakan browser. Seperti yang telah dijelaskan
sebelumnya mengenai CodeIgniter, aplikasi ini dibuat menggunakan metode
Model, View, Controller, berikut hasil dan pembahasan sistem. Router digunakan
untuk memetakan permintaan atau request ke dalam class controller di dalam
aplikasi yang dibuat. Saat mengakses suatu alamat website, permintaan tersebut
tidak menyertakan nama controller apa yang akan dibuka tetapi secara default
bisa diarahkan agar otomatis akan membuka controller sesuai yang telah
definisikan pada router. Konfigurasi router dapat dilihat pada Kode Program 1.
Kode Program 1 Konfigurasi Router
1.$route['default_controller'] = ‘Welcome';
2.$route['404_override'] = '';
3.$route['translate_uri_dashes'] = FALSE;
Default controller pada sistem pengolahan data BBM dan KEPOKMAS
adalah controller Welcome. Sistem dijalankan, controller Welcome akan
menjalankan function index yang mengarah ke halaman Login.
Aplikasi sistem pengolahan data BBM da KEPOKMAS memiliki 3 user
yang berbeda yaitu pegawai Dinas Perdagangan, petugas pasar dan manager.
Pegawai Dinas memiliki hak akses penuh untuk pengoperasisan aplikasi seperti
melihat,merekap,men-download data yang dimiliki semua SPBU dan Pasar.
Petugas pasar dan manager SPBU hanya bisa melihat dan men-upload data yang
dimiliki pasar atau SPBU itu sendiri. 3 user dapat di akses melalui halaman login
yang sama karena halaman login dibuat menggunakan login multi user. Perbedaan
3 user saat melakukan login terletak dalam hak akses yang dimiliki user.
Gambar 13 Tampilan Menu Beranda Pelaporan BBM
Gambar 13 merupakan tampilan beranda setelah manager SPBU melakukan
login. Dalam tampilan beranda terdapat form profil seperti nomor telepon, alamat
dan manager yang harus di-update terlebih dahulu saat pertama kali melakukan
login untuk memenuhi data profil.
17
Kode Program 2. Controller Update Profil SPBU
1. public function updateprof_clientDB(){
2. $data = array(
3. 'alamat' => $this->input->post('alamat'),
4. 'usaha' => $this->input->post('usaha'),
5. 'manager' => $this->input->post('manager'),
6. 'no_telepon' => $this->input->post('no_telepon'));
7. $condition['no_spbu'] = $this->input->post('no_spbu');
8. try {$this->m_profil->updateprof_client($data, $condition);
9. $this->session->set_flashdata('msg','berhasil di Update!');}
10. catch(Exception $e){} redirect('welcome/beranda');}
Kode Program 2 merupakn fungsi update profil pada controller. Baris 3
samapi 6 merupakan kode program untuk menampilkan atribut yang akan diupdate pada profil SPBU. Baris 7 digunakan untuk melakukan validasi terhadap
data mana yang akan di-update berdasarkan nomor SPBU.
Terdapat 4 menu utama yang dapat di akses oleh menager SPBU setelah
melakukan login yaitu menu Beranda yang menampil halaman profil SPBU
seperti Gambar 13 diatas. Menu Data Laporan BBM yang berisi data-data laporan
BBM perbulan yang telah di-upload terlebih dahulu di menu Upload Data. Menu
Ganti Password adalah halaman menu yang digunakan untuk mengganti
password.
Gambar 14 Tampilan Menu Upload Data BBM
Tampilan menu upload data BBM pada Gambar 14 terdapat atribut kategori
seperti bulan dan tahun yang dipilih dahulu. Menyiapkan file dalam format excel
(.xlsx) sebelum melakukan upload data pasar dan setelah melakukan upload data
BBM maka akan disimpan dan dapat dilihat di menu Data Laporan BBM.
Kode Program 3 Controller Upload DataBBM
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
public function upload(){
$config['upload_path'] = './upload/';
$config['file_name'] = $fileName;
$config['allowed_types'] = 'xls|xlsx|csv|ods|ots';
$this->load->library('upload', $config);
$error = array('error' => $this->upload->display_errors());
$this->session->set_flashdata('msg','Ada kesalaha dalam upload Data BBM!');
redirect('Welcome/upload_report');
}else{ $datajenis = $this->m_produk->getAllproduk()->result();
if(empty(trim($rowData[0][0]))){continue;}
$data = array(
"stock_awal"=> $rowData[0][1],
"stock_akhir"=> $rowData[0][2],
"vol_penerimaan"=> $rowData[0][3],
"periode_bulan" => $this->input->post('bulan'),
"no_spbu" => $this->input->post('no_spbu'));
$this->session->set_flashdata('msg','Report Berhasil di Upload!');
redirect('welcome/view_report/'.$this->input->post('no_spbu'));
}
18
Kode Program 3 merupakan controller upload data BBM. Pada baris 2
sampai 4 merupakan config buat upload dan tipe file yang bisa di-upload. Pada
baris 7 dan 8 untuk mengecek file jika validasi file gagal, kirim parameter error.
Baris 9 merupakan kode program untuk mengecek nama BBM yang tersimpan
pada halaman admin dan satuan terdaftar atau tidak di dalam data produk. Baris
11 sampai 16 kode program dimana data di dalam excel setelah di validasi akan
dimasukkan dalam array dengan nama $data sebelum disimpan dan redirect ke
data laporan BBM.
Data laporan BBM perbulan seluruh SPBU yang di-upload oleh setiap
manager SPBU tersimpan di database dan akan di tampilkan pada halaman menu
daftar laporan SPBU yang dimiliki admin atau pegawai seperti Gambar 15 di
bawah ini.
Gambar 15 Tampilan Data Laporan BBM
Menu Data Laporan berisi data laporan BBM perbulan setiap SPBU yang
telah di-upload terlebih dahulu oleh manager SPBU seperti Gambar 15. Dalam
menu Data Laporan terdapat tambahan beberapa search filter no.SPBU, bulan
Dan tahun yang terdapat pada bagian atas table untuk mempermudah pegawai
mencari data laporan BBM yang dimiliki setiap SPBU.
Kode Program 4. Controller Search Filter Data Laporan BBM
1. public function filter(){
2. if (($this->input->post('no_spbu')=='all') && ($this->input
3. >post('bulan')=="all") && ($this->input->post('tahun')=="all")) {
4. $data['listkondisi'] = $this->m_kondisi->getAllkondisi();
5. }elseif (($this->input->post('no_spbu')=='all') && ($this->input
6. >post('bulan')!="all") && ($this->input->post('tahun')=="all")){
7. $data['listkondisi']=$this->m_kondisi->getkondisi_by_bulan($this->input
8. >post('bulan'));
9. }elseif(($this->input->post('no_spbu')!='all') && ($this->input
10. >post('bulan')=="all") && ($this->input->post('tahun')=="all")) {
11. $data['listkondisi']=$this->m_kondisi->getkondisi_by_no_spbu($this->input
12. >post('no_spbu'));
13. }elseif(($this->input->post('no_spbu')!='all') && ($this->input
14. >post('bulan')!="all") && ($this->input->post('tahun')=="all")){
15. $data['listkondisi'] = $this->m_kondisi->getskondisi(($this->input
16. >post('no_spbu')),($this->input->post('bulan')));
17. }
Kode program 4 merupakan fungsi search filter pada controller. Pada
baris 2 dan 3 merupakan function yang digunakan untuk memilih kategori yang
akan di search filter dan baris 4 merupakan kode program untuk mengecek dalam
database melalui model. Function memilih kategori dan mengecek akan
dilakukan berulang kali sampai baris 16.
19
Gambar 16 Tampilan Menu Beranda Pelaporan KEPOKMAS
Gambar 16 merupakan tampilan beranda setelah petugas pasar melakukan
login. Dalam tampilan beranda terdapat form profil seperti nomor telepon, alamat
dan nama petugas yang harus di-update terlebih dahulu saat pertama kali
melakukan login untuk memenuhi data profil.
Gambar 17 Tampilan Menu Data Laporan KEPOKMAS Perpasar
Tampilan Menu Data Laporan KEPOKMAS Perpasar pada Gambar 17
diatas merupakan halaman untuk menampilkan data KEPOKMAS hasil dari
upload yang dilakukan petugas pasar. Terdapat form Search Filter yang
digunakan untuk mencari data yang di inginkan dengan cara memilih kategori
yang telah disediakan terlebih dahulu. Kode program Controller Search Filter
KEPOKMAS hampir sama dengan kode program Controller Search Filter Data
Laporan BBM yang membedakan class penyimpanan yang berada di model.
Data laporan KEPOKMAS seluruh pasar yang di-upload oleh setiap petugas
pasar tersimpan di database akan di tampilkan pada halaman menu daftar laporan
harian perpasar yang dimiliki admin atau pegawai dan akan di hitung rata-rata dari
jumlah harga produk yang sama di bagi jumlah pasar yang telah men-upload data
produk kemudian ditampilkan pada halaman menu Rata-Rata Perhari.
20
Gambar 18 Tampilan Menu Rata-Rata Perhari
Tampilan menu Rata-Rata Perhari pada Gambar 18 berisi sebelas atribut
yaitu hari, tanggal ,bulan, tahun, nama produk, satuan, harga kemarin, harga
sekarang, naik atu turun, persentase, dan keterangan. Harga kemarin dan harga
sekarang yang terisi dari hasil rata-rata harga produk tiap pasar yang di-upload
oleh petugas pasar sebelumnya. Harga naik atau turun dari hasil pengurangan
harga sekarang dengan harga kemarin dan persentase dari harga sekarang – harga
kemarin / 100.
Kode Program 5. Model Rata-rata Perhari
1. function getrataperhari(){
2. $this->db->select("*, AVG(tabel_pasar_perhari.harga) 'rata'");
3. $this->db->from("tabel_pasar_perhari");
4. $this->db-> group_by("tabel_pasar_perhari.tanggal,
5. tabel_pasar_perhari.bulan,tabel_pasar_perhari.tahun,
6. tabel_pasar_perhari.nama_produk, tabel_pasar_perhari.satuan");
7. $this->db->order_by("tabel_pasar_perhari.nama_produk,
8. tabel_pasar_perhari.tahun, tabel_pasar_perhari.bulan,
9. tabel_pasar_perhari.hari");
10. return $this->db->get();
11. }
Kode program 5 menampilkan cara mencari rata-rata perhari dari data
laporan pasar perhari. Baris 2 adalah function untuk mendapatkan rata-rata dari
tabel_pasar_perhari. Baris 4 menggunakan function group_by untuk
mengelompokkan beberapa data dan baris ke 7 terdapat order_bay perintah yang
digunakan untuk menampilkan data secara terurut berdasarkan nilai tertentu.
Gambar 19 Tampilan Menu Rata-Rata Perbulan
Gambar 19 merupakan tampilan menu rata-rata perbulan yang berisi data
dari hasil perhitungan rata-rata jumlah harga produk pada bulan dan tahun yang
21
sama dari rata-rata perhari. Atribut yang ada pada rata-rata bulan sama dengan
atribut rata-rata perhari.
Data yang ditampilkan pada menu rata-rata perhari KEPOKMAS, rata-rata
perbulan KEPOKMAS dan download data laporan BBM yang di miliki pegawai
dapat langsung dicetak dalam bentuk excel, pdf, di-copy dan searching laporan
menggunakan library datatables. Pada penggunaan fungsi dari library datatables
mempermudah pegawai dalam melakukan cetak laporan, ordering laporan, dan
searching data laporan yang diinginkan.
Kode Program 6. Fungsi Searcing menggunakan Library Datatables
1. function( elem ) {
2. return !Expr.pseudos["empty"]( elem );},
3. "header": function( elem ) {
4. return rheader.test( elem.nodeName );},
5. "input": function( elem ) {
6. return rinputs.test( elem.nodeName );},
7. "button": function( elem ) {
8. var name = elem.nodeName.toLowerCase();
9. return name === "input" && elem.type === "button" || name ===
10. "button";},"text": function( elem ) {
11. var attr;
12. return elem.nodeName.toLowerCase() === "input" &&
13. elem.type === "text" &&( (attr = elem.getAttribute
14. ("type")) == null || attr.toLowerCase() === "text" );},
Kode Program 6 merupakan Searcing data menggunakan Library Datatables
menampilkan data sesuai kategori yang dituliskan. Pada penggunaan fungsi
Searcing ditampilkan data sesuai coloum yang mana pada setiap coloum kategori
menjadi row grouping sebagai pemisah antar kategori data.
Perbandingan pada proses bisnis sebelum dan sesudah menggunakan
aplikasi yaitu validasi pelaporan sebelumnya masih menggunakan kertas yang
disetujui oleh manager SPBU. Setelah adanya sistem, validasi pelaporan
menggunakan hak akses yang diberikan dari pegawai Dinas Perdagangan.
Pengujian alpha menggunakan metode blackbox yaitu pengujian fungsifungsi sistem 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
sistem yang telah dilakukan.
Tabel 1 Hasil Pengujian Blackbox
Fungsi yang diuji
Login
Tambah Data Pengguna
Hapus Data Barang
Ubah Data Profil
Tambah Data
Produk/BBM
Hapus Data
Produk/BBM
Menampilkan data
Laporan BBM
Menampilkan data
Kondisi
Username dan password
benar
Username dan password
salah maupun kosong
Form diisi dengan benar
Form wajib diisi kosong
Output yang
diharapkan
Sukses login
Output yang
dihasilkan sistem
Sukses login
Gagal login
Gagal login
Sukses tambahPengguna
Gagal tambah data
Valid
Status
Pengujian
Valid
Pilih salah satu data
Form diisi dengan benar
Form diisi dengan benar
Sukses hapus data
Suksesubah data
Sukses tambah data
Sukses tambah
pengguna
Gagal tambah pengguna
Sukses hapus data
Sukses ubah data
Sukses tambah data
Pilih salah satu data
Sukses hapus data
Sukses hapus data
Valid
Buka halaman daftar
Laporan BBM
Buka halaman data
Sukses menampilkan
data
Sukses menampilkan
Sukses menampilkan
data
Sukses menampilkan
Valid
22
Valid
Valid
Valid
Valid
Laporan Produk Pasar
Perhari
Menampilkan data
Laporan Rata-Rata
Produk Perhari
Menampilkan data
Laporan Rata-Rata
Produk Perbulan
Download Data Laporan
Upload Data Laporan
Ganti Password
Laporan Produk Pasar
Perhari
Membuka data Laporan
Rata-Rata Produk Perhari
data
data
Sukses menampilkan
data
Sukses menampilkan
data
Valid
Membuka data Laporan
Rata-Rata Produk
Perbulan
Membuka halaman
Download
Buka halaman Upload
Data Laporan
Buka halaman Ganti
Password
Sukses menampilkan
data
Sukses menampilkan
data
Valid
Sukses men-download
data
Sukses Upload
Sukses men-download
data
Sukses data upload
tersimpan
password baru sukses
tersimpan
Valid
Sukses Ganti password
Valid
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 menggunakan kuesioner,
yaitu dengan melakukan tanya jawab melalui telfon kepada sampleuser.
Sampleuser berjumlah 15 responden dan dipilih secara acak, sample user pada
pengujian ini adalah pegawai Dinas Perdagangan Kota Salatiga.
Tabel 2 Hasil Jawaban Kuesioner
No
1
2
3
4
5
6
Pernyataan
Aplikasi aplikasi ini mudah digunakan
Tampilan, huruf dan gambar dari aplikasi ini dapat dilihat
dengan jelas
Menu-menu pada aplikasi ini mudah dipahami dan tidak
membingungkan
Aplikasi ini membantu dalam melakukan pengelolaan data
pekerjaan
Aplikasi ini membantu dalam melakukan pengelolaan hasil
pengujian sample
Aplikasi ini bermanfaat untuk menyimpan arsip hasil laporan
STS
0
0
TS
0
0
CS
1
4
S
9
6
SS
5
5
0
1
3
3
8
0
0
1
10
4
0
0
3
6
6
0
0
2
6
7
Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung
presentase jawaban responden yang telah mengisi kuesioner.
Rumus Index % = ∑ Skor:Y*100% (1)
Rumus 1 adalah rumus untuk menghitung presentase jawaban responden.
Hasil analisa untuk pertanyaan pertama didapatkan index 93,33% responden
setuju jika aplikasi sistem pengolah data mudah digunakan. Untuk pertanyaan
kedua 73,33% responden setuju bahwa huruf dan gambar pada aplikasi sistem
pengolahan data dapat dilihat dengan jelas. Untuk pertanyaan ketiga 73,33%
responden setuju bahwa menu pada aplikasi sistem pengolahan data mudah untuk
dipahami dan tidak membingungkan. Untuk pertanyaan keempat 93,33%
responden setuju bahwa aplikasi sistem pengolahan data membantu dalam
melakukan pengelolaan data hasil pekerjaan. Untuk pertanyaan kelima 80,00%
responden setuju bahwa aplikasi sistem pengolahan data membantu dalam
melakukan pengelolaan hasil pengujian sample. Untuk pertanyaan keenam
86,66% responden setuju bahwa aplikasi pengolahan data bermanfaat untuk
menyimpan arsip hasil uji pengujian.
Pengujian manfaat juga dilakukan dengan wawancara kepada pegawai IT
Bidang Perdagangan di Dinas Perdagangan Kota Salatiga. Dengan adanya sistem
informasi pengolahan data BBM dan KEPOKMAS dalam melakukan pengawasan
23
dan pengumpulan data pekerjaan pegawai dan dalam melakukan pencarian arsip
laporan lebih cepat dan tertata dengan baik.
5.
Simpulan
Berdasarkan penelitian yang telah dilakukan, Perancangan Aplikasi
Pengolahan Data BBM dan KEPOKMAS dapat dirancang menggunakan
Framework Codeigniter dan library Datatables. Pengunaan CodeIgniter dengan
konsep MVC bermanfaat untuk penulisan kode program lebih terstruktur dan
lebih aman karena user tidak berhubungan secara langsung dengan database.
Selain itu, Codeigniter menyediakan fungsi insert, read, update dan delete yang
mempermudah serta mempercepat dalam pembuatan aplikasi dan penggunaan
DataTables yang di bangun dari jquery untuk menampilkan data dalam bentuk
tabel yang sudah terintegrasi search form dan pagination untuk penomoran data
pada tabel. Sehingga tidak perlu lagi membuat form pencarian pada aplikasi, dan
tidak perlu lagi membuat pagination sendiri.
Hasil pengujian aplikasi menunjukkan bahwa aplikasi Sistem Pengolahan
Data BBM dan KEPOKMAS dapat menyelesaikan permasalahan yang ada pada
pelaporan data BBM dan KEPOKMAS di Dinas Perdagangan. Seperti pegawai
dapat mengakses data pelaporan yang di-upload oleh manager SPBU dan petugas
pasar secara online. Sebelum adanya sistem, anggaran untuk mengumpulkan
laporan yaitu Rp. 20.000, waktu yang dibutuhkan ±2 jam dan input data ke excel
dibutuhkan waktu ±2 hari. Setelah adanya sistem, tidak mengeluarkan anggaran
untuk pengambilan laporan. Waktu yang dibutuhkan untuk input dan
pengumpulan data ±8 jam. Dengan adanya aplikasi pelaporan data BBM dan
KEPOKMAS juga mempermudah pegawai Dinas Perdagangan untuk merekap,
mengelola dan menyimpan data pelaporan secara terstruktur.
6. Daftar Pustaka
[1] Supono. Vidiandry,P. 2016. ‘Pemograman Web Menggunakan PHP dan
Framework Codeigniter’. –Ed. 1(1). Yogyakarta : Deepublish.
[2] Roy,RW. Noor,I. Achmad,J. 2009. ‘Perancangan Dan Pengembangan
sistem Pelaporan Terpadu Sistem Informasi Puskesmas (SPT SIMPUS)
Dengan Metode BPR’. Jurnal Ilmiah Kursor Menuju Solusi Teknologi
Informasi. vol 5. No 2.
[3] Danang,J. Qorinta,S. Fitro,N. 2013. ‘Perancangan Sistem Informasi
Pelaporan Monografi Berbasis Web (Studi Kasus Pada Kantor Kecamatan
Semarang Utara)’. Jurnal Speed - Sentra penelitian Engineering dan
Edukasi. vol 5. No 2.
[4] Eka,W,H. 2011. ‘Penerapan Pola Hierachical Model-View-Controller Pada
Rekayasa Sistem Berbasis Web Framework’. Jurnal Teknologi
Technoscientia, v ol 3. No 2.
[5] Peraturan Walikota Salatiga, 2016, ‘Tugas Dan Fungsi Serta Tata Kerja
Dinas Perdagangan’, Salatiga, Dinas Perdangangan.
[6] DataTables, 2017. DataTables. Diakses tanggal 24 mei 2017
darihttps://datatables.net..
[7] www.slideshare.net/anuragambst1/unit2-18477505. ( Diakses pada tanggal
02 juni 2017 )
24
KEPOKMAS Berbasis Web dengan Framework CodeIgniter
( Studi Kasus : Dinas Perdagangan Kota Salatiga )
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti
Ajik Sulistyo Hadi
672013182
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Mei 2017
2
3
4
5
6
7
1.
Pendahuluan
Perkembangan teknologi informasi yang sangat pesat telah membawa dunia
ke era baru yang belum pernah terbayangkan sebelumnya. Teknologi informasi
dapat menunjang dan meningkatkan produktivitas untuk berbagai jenis kegiatan
khususnya dalam bidang pekerjaan. Banyak perusahaan atau instansi sekarang
menggunakan aplikasi web untuk menunjang pekerjaan karyawan dalam hal
komunikasi, hiburan serta mengolah data dan informasi.
Dinas Perdagangan Kota Salatiga merupakan instansi yang membantu
walikota dalam menyelenggarakan pelayanan, penyediaan informasi, pemantauan
dan pemberian fasilitas usaha perdagangan serta melaksanakan penataan usaha
perdagangan secara sinergis dengan usaha ekonomi kerakyatan dalam memajukan
potensi daerah[1]. Dinas Perdagangan saat ini merupakan bidang independen yang
sebelumnya bergabung di Dinas Perindustrian Perdagangan dan Koperasi
(Disperindagkop), sehingga saat ini merupakan bidang yang sedang berkembang
dalam hal teknologi informasi khususnya yang memiliki platfrom web sesuai
dengan kemampuan dalam bidang web engineering.
Dinas Perdagangan Kota Salatiga mempunyai tugas melakukan pelayanan
memantau dan mengolah data terhadap usaha perdagangan seperti pemantauan
data BBM (Bahan Bakar Minyak) perbulan yang ada di SPBU (Stasiun Pengisian
Bahan Bakar Umum) untuk mengetahui realisasi pemakaian BBM di Kota
Salatiga dan pemantauan stabilitas harga produk KEPOKMAS (Kebutuhan Pokok
Masyarakat). SPBU perlu menyerahkan data BBM yang berisi stock awal, Jumlah
penerimaan, jumlah penjualan, stock akhir, dan vol.tera dalam bentuk liter yang
akan di ambil pegawai. Pemantauan stabilitas harga produk KEPOKMAS yang
dilakukan petugas dengan mengambil sempel harga produk ditempat dan
merekapitulasi data harga untuk mendapatkan harga rata-rata produk dan
perubahan harga produk setiap hari di Kota Salatiga yang akan dilaporkan ke
Disperindakop Provinsi khususnya pada tim pengendali inflasi daerah.
Berdasarkan wawancara di Dinas Perdagangan kota salatiga khususnya pada
pegawai IT pemantauan stabilitas harga produk dan pelaporan yang menangani
pencatatan, pengolahan, pelaporan dan pengarsipan laporan. Belum adanya sistem
untuk pemantauan stabilitas harga produk KEPOKMAS dan BBM yang
menyebabkan beberapa kendala seperti pelaporan BBM dari 7 SPBU masih
menggunakan ketas yang diambil di tempat oleh pegawai dan pengumpulan data
harga produk KEPOKMAS diambil dari sempel yang terdapat pada 15 pasar,
sehingga memakan waktu rata-rata ±2 jam dalam pengambilan data dan biaya
Rp.20.000 perkendaraan. Kemudian men-input, merekap, mengelola dan
menyusun laporan hasil pemantauan stabilitas harga produk KEPOKMAS dan
BBM menggunakan Microsoft Office Excel yang membutuhkan waktu ±2 hari.
Rusak atau hilangnya arsip laporan karena belum ada database untuk
penyimpanan. Berdasarkan masalah yang telah dijelaskan, dapat diselesaikan
dengan sistem informasi untuk membuat aplikasi berupa Perancangan Sistem
Pengolahan Data BBM dan KEPOKMAS Berbasis Web yang merupakan salah
satu wujud komitmen Dinas Perdagangan Kota Salatiga untuk selalu berusaha
meningkatkan pelayanan kepada masyarakat Kota Salatiga.
8
Sistem berbasis web ini dapat diakses dimana saja, dapat berjalan di semua
sistem operasi, dapat diakses lewat computer. Sistem ini juga menggunakan
framework codeigniter. Framework ini mempunyai kelebihan yaitu open source,
berjalan di semua versi PHP. Program hanya membutuhkan resource yang sedikit
sehingga program berjalan dengan ringan dan cepat. Framework ini menggunakan
model, view, controller (MVC). Proses kerja framework memudahkan
programmer dalam membuat web. Dokumentasi yang lengkap mulai dari langkah
instalasi sampai dengan fungsi / class dalam pembuatan web, dan memiliki
pustaka yang lengkap [2].
2.
Tinjauan Pustaka
Penelitian mengenai sistem informasi pelaporan telah beberapa kali
dilakukan. Pada penelitian sebelumnya yang berjudul Perancangan dan
Pengembangan Sistem Pelaporan Terpadu Sistem Informasi Puskesmas (SPT
SIMPUS) dengan Metode BPR (Business Process Redesign). Pembuatan aplikasi
ini menggunakan framework CakePHP untuk menerapkan arsitektur MVC, Fpdf
untuk menghasilkan berkas pdf, Open Flash Chart untuk menampilkan grafik
peyebaran penyakit di setiap desa, grafik cakupan pasien per kelompok umur, grafik
epidemiologi, dan rekapitulasi pemakaian obat, format gambar GIF (Graphic
Interchange Format) dengan warna hitam sebagai garis pembatas desa dan warna
putih sebagai wilayah desa, dan untuk pemetaan menggunakan Pustaka GD
(Graphics Draw) untuk memanipulasi gambar. Sistem ini dikembangkan tanpa
login dengan tujuan agar seluruh pegawai dapat menggunakannya di jaringan
lokal [3].
Penelitian lain dengan judul Perancangan Sistem Informasi Pelaporan
Monografi Berbasis Web (Studi Kasus Pada Kantor Kecamatan Semarang Utara)
yang membahas tentang penggunaan PHP dan MySQL dalam pembuatan sebuah
sitem informasi pelaporan yang menjadikan pelaporan monografi dapat
mempercepat rekapitulasi data karena data telah tersedia tinggal di-download
menurut filter sehingga mempermudah dan mempercepat pekerjaan dalam
pengelolaan data laporan monografi[4].
Berdasarkan penelitian di atas, persamaan yang dibahas ini pada teknologi
yang digunakan berbasis web, mengunakan PHP, dan MySQL. Persamaan lain
dari penelitian ini untuk merekap dan pengarsipan data. Jika dibandingkan dengan
penelitian terdahulu, penelitian yang dilakukan ini berfokus pada bagaimana
membuat Perancangan Sistem pengolahan data BBM dan KEPOKMAS Berbasis
Web dan menggunakan teknologi bahasa pemograman framework CodeIgniter
dan library DataTables. Penggunaan bahasa pemograman CodeIgniter membuat
program lebih terstruktur, mudah untuk mengelola, mudah untuk dikembangkan
dengan adanya fitur MVC (Model-View-Controller)[5].
CodeIgniter (CI) adalah sebuah framework PHP yang berupa kumpulan
folder dan file PHP, JavaScript, CSS, TXT, dan file berbasis web lainnya dengan
setting tertentu untuk menggunakannya dan menyediakan library dan helper yang
dapat dimanfaatkan di dalam pemrograman PHP[2]. CodeIgniter didasarkan pada
pola pengembangan Model-View-Controller. MVC adalah sebuah pendekatan
perangkat lunak yang memisahkan aplikasi logika dari presentasi. Dalam
9
prakteknya, hal itu memungkinkan halaman web untuk memuat script kecil karena
presentasi terpisah dari scripting PHP.
Model merepresentasikan struktur data. Biasanya kelas model akan berisi
fungsi yang membantu mengambil, memasukkan, dan men-update informasi
dalam database.
View adalah informasi yang sedang disajikan kepada pengguna. sebuah
View biasanya akan menjadi halaman web, tetapi dalam CodeIgniter, view dapat
juga menjadi fragmen halaman seperti header atau footer. Hal ini juga dapat
menjadi halaman RSS, atau jenis lain dari "halaman website ".
Controller berfungsi sebagai perantara antara Model, View, dan resource
lainnya yang dibutuhkan untuk memproses request dan menghasilkan suatu
halaman web[5].
DataTables adalah plugin yang di bangun dari jquery untuk menampilkan
data dalam bentuk tabel dan sudah terintegrasi search form dan pagination untuk
penomoran data pada tabel. Sehingga tidak perlu lagi membuat form pencarian
pada aplikasi, dan tidak perlu lagi membuat pagination sendiri. Kelebihan dari
datatables ini adalah dapat mengintegrasikan pagination dan search form pada
tabel data yang di buat. Fitur dari datatables yang digunkanan untuk aplikasi
sebagai berikut. Pagination, instant search and multi-column ordering,
memungkinkan aplikasi untuk melakukan pembuatan halaman secara otomatis,
melakukan pencarian secara langsung berdasarkan data yang ingin di cari dan
melakukan multi order dari ascending ke descending atau sebaliknya. Easily
theme-able DataTables, jQueryUI, Bootstrap, Foundation memungkinkan
aplikasi untuk menggunakan tema dalam dataTables, Jquery UI, Bootstrap ,dan
fundation guna untuk memperindah tampilan. Smart handling of column widths,
Memungkinkan aplikasi melakukan auto width column mengikuti ukuran layar.
Fitur tersebut dapat di jalankan dengan menggunakan fungsi tertentu dan semua
sudah di berikan oleh dataTables[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) Implementasi dan
pengujian sistem, serta analisis hasil pengujian; dan 4) Penulisan laporan hasil
penelitian. Tahapan yang dilakukan dalam penelitian ini dapat dilihat pada
Gambar 1.
Gambar 1. Tahapan Penelitian
10
Gambar 1 dapat dijelaskan bahwa tahapan penelitian yang dilakukan adalah
sebagai berikut: Tahap pertama: analisis kebutuhan serta pengumpulan data
merupakan tahapan dalam identifikasi permasalahan yang dihadapi oleh pegawai
dalam melaksanakan tugasnya terkait dengan Perancangan Sistem pengolahan
data BBM dan KEPOKMAS. Identifikasi permasalahan dilakukan berdasarkan
hasil wawancara dengan pegawai pemantauan stabilitas harga produk dan
pelaporan SPBU, guna mendapatkan data, proses bisnis sebelum aplikasi serta
menentukan system requirement pada pembuatan Sistem Informasi Pelaporan
SPBU.
Gambar 2 Proses Bisnis Pemantauan Harga Produk Dinas Perdagangan Kota Salatiga.
Gambar 2 menjelaskan proses bisnis Pemantauan stabilitas harga produk
oleh pegawai di Dinas Perdagangan Kota Salatiga di mana pegawai melaksanakan
tugas pemantauan stabilitas harga produk KEPOKMAS datang langsung ke
tempat, mengambil beberapa sempel harga produk dan merekapitulasi data harga
untuk mendapatkan harga rata-rata produk dan perubahan harga produk setiap
hari. Pegawai mulai men-input, merekap, mengelola dan menyusun laporan hasil
pemantauan stabilitas harga produk menggunakan Microsoft Office Excel.
Laporan diserahkan kepada Kepala pegawai untuk diserahkan ke Kepala Kasi
Perdagangan untuk diteliti. Setelah menerima laporan dari Kepala pegawai,
Kepala Kasi Perdagangan meneliti, jika merasa sudah benar maka memaraf hasil
pemantauan stabilitas harga produk dan mengajukan hasil laporan ke Sekertaris
Dinas Perdagangan kemudian Sekertaris memeriksa dan memaraf hasil laporan
dan mengajukan penandatangangan ke Kepala Dinas Perdagangan. Kepala Dinas
Perdagangan menandatangani laporan hasil pemantauan produk dan di
kembalikan ke pegawai, kemudian laporan hasil pemantauan stabilitas harga
produk dimintakan nomor agenda ke bagian kesekretariatan untuk mengirim
laporan ke Disperindakop Povinsi.
Tahap kedua : perancangan sistem berdasarkan hasil analisis kebutuhan
menggunakan UML (Unified Modelling Language) yang terdiri dari use case
diagram, activity diagram, sequence diagram, dan class diagram dan asitektur
diagram. Tambahan perancangan yang lain yaitu perancangan database yang
berfungsi menyimpan data yang dibutuhkan oleh aplikasi sistem informasi
Pelaporan SPBU. Pada tahap ini dilakukan pembuatan sistem menggunakan
framework codeigniter, yaitu menyiapkan folder model, view dan controller.
11
Tahap berikutnya yaitu pembuatan aplikasi/sistem. Model Prototype
digunakan sebagai metode pengembangan sistem. Model Prototype merupakan
metode yang menyajikan gambaran lengkap tentang sistemnya, user dapat melihat
pemodelan sistem dari sisi tampilan maupun teknik prosedural yang akan
dibangun[7]. Gambar mengenai model prototype dapat dilihat pada Gambar 2.
Gambar 3 Metode Prototyping [6]
Tahap - tahap dalam model prototype pada Gambar 2 adalah : (1) Listen To
Costumer, (2) Build, (3) Customer Test. Pada tahap pertama didapatkan
kebutuhan sistem yaitu aplikasi mengolah data serta melakukan perhitungan strata
secara otomatis yang kemudian hasil dari perhitungan data tersebut terintegrasi.
Kebutuhan tersebut didapatkan melalui tahap analisis kebutuhan dan
pengumpulan data dari tahapan penelitian yang dilakukan. Tahap Build
merupakan tahapan perancangan serta pembuatan aplikasi. Perancangan sistem
dalam penelitian ini dibuat dalam bentuk diagram UML, meliputi use case
diagram, activity diagram, sequence diagram dan class diagram[6].
Use case digunakan untuk membentuk tingkah laku benda/ things dalam
sebuah model serta dalam realisasikan oleh sebuah collaboration. Umumnya
sebuah use case digambarkan dengan elips dengan garis yang solid, biasanya
mengandung nama.
Pada use case diagram dibawah ini, dapat di lihat bahwa sistem pengolahan
data BBM dan KEPOKMAS Kota Salatiga memiliki tiga pengguna yaitu
Manager SPBU , Petugas dan Pegawai Dinas Perdagangan.
Gambar 4 Use Case Diagram Sistem Pengolahan Data BBM dan KEPOKMAS
Gambar 4 di atas menjelaskan alur kerja aplikasi Sistem Pengolahan Data
BBM dan KEPOKMAS yang terdiri dari 3 aktor yaitu: Manager SPBU, pegawai,
dan Petugas. Manager SPBU dapat mengelola data report SPBU itu sendiri yang
dapat di CRUD(update, insert, delete). Mengelola profil SPBU yang berisi
12
no.SPBU, alamat, nama manager, no.telepon, dapat di-update oleh meneger
kecuali no.SPBU karena no.SPBU tidak dapat berubah atau sudah dipantenkan
oleh pegawai.
Pegawai hanya bisa melihat data report SPBU karea yang bisa melakukan
CRUD adalah manager SPBU. Pegawai dapat melakukan proses mengelola data
pengguna yang terdiri dari view data pengguna, insert pengguna baru, update
pengguna, dan delete pengguna. Pegawai juga dapat mengelola semua harga
produk kemudian merata-rata harga produk perhari dan perbulan untuk
mendapatkan report yang diinginkan. Petugas dapat mengelola data harga produk
menggunakan CRUD (update, insert, delete) dan men-update data profil petugas
itu sendiri.
Activity Diagram memberikan gambaran bagaimana sistem berinteraksi
dengan pengguna dan/atau dengan sistem lain. Berikut merupakan Activity
Diagram dari fungsi pengolahan data BBM dan KEPOKMAS. Aktivitas dimulai
dengan login terlebih dahulu kemudian akan masuk ke tampilan menu utama. Di
dalam sistem ini terdapat pegawai, manager SPBU dan petugas dimana manager
dan petugas bisa masuk ke sistem jika sudah mempunyai username dan password
yang akan didaftarkan dan diberikan oleh pegawai terlebih dahulu.
Gambar 5 Activity Diagram Download Data Report
Dari Gambar 5 merupakan Activity Diagram Download Data Report yang
dilakukan oleh pegawai. Setelah login berjalan sukses, pegawai akan masuk ke
menu utama yang berisi menu BBM dan menu KEPOKMAS. Pegawai bisa
memilih menu BBM atau KEPOKMAS untuk men-download data report yang
diinginkan. Pilih menu download Report dan men-filter untuk memilih data report
yang diinginkan dan men-download .
Gambar 6 Activity Diagram Upload Data Report BBM
13
Gambar 6 merupakan Activity Diagram Upload Data Report BBM yang
dilakukan oleh manager SPBU. Manager SPBU akan login menggunakan
username dan password terlebih dahulu. Jika login berjalan sukses, akan masuk
menu utama di mana terdapat beberapa pilihan dan melengengkapi data SPBU
terlebih dahulu. Pilih menu Upload data report kemudian men-upload data report
dalam bentuk excel. Pilih menu data report untuk mengecek data report yang diupload sudah benar atau belum. Manager SPBU dapat men-update dan mendelete data yang salah.
Sequence diagram, digunakan untuk menggambarkan interaksi yang
tersedia antar komponen di dalam dan di sekitar sistem (pengguna, interface, dan
sebagainya) dalam bentuk pesan dan digambarkan terhadap waktu. Sequence
diagram dapat menggambarkan skenario dan langkah-langkah yang dilakukan
sehingga mendapatkan sebuah hasil.
Gambar 7 Sequence Diagram Tambah Data Pengguna
Gambar 7 merupakan sequence diagram untuk melakukan tambah data
penggna. Pegawai menambah data pengguna dengan memasukkan Username,
password , dan level. Setelah pegawai mengisi maka klik tombol tambah, data
akan disimpan kedalam database dan di tampilkan pada menu data pengguna.
Class diagram menggambarkan keadaan (atribut/poperti) suatu sistem.
Sekaligus menawarkan lanyanan untuk memanipulasi keadaan tersebut
(metode/fungsi) suatu sistem. Class diagram juga menggambarkan struktur dan
diskripsi class, packing dan objek beserta hubungan satu sama lain seperti
pewarisan, asosiasi, dan lain-lain.
Gambar 8 Class Diagram Sistem Pengolahan Data BBM.
Gambar 8 merupakan class diagram sistem Pengolahan data BBM.
Terdapat empat class yang digunakan dalam sistem ini, yaitu : kelola_data_report,
kelola_data_BBM, kelola_data_pengguna, dan kelola_profil_SPBU. Setiap class
14
memiliki fungsi/method seperti insert, update, delete yang digunakan. Class yang
digunakan juga memiliki beberapa entity class yang bersangkutan seperti
report_entity, BBM_entity, SPBU_entity, dan pengguna_entity.
Gambar 9 Class Diagram Sistem Pengolahan Data KEPOKMAS.
Gambar 9 merupakan class diagram
sistem pengolahan Data
KEPOKMAS.
Class
Produk
memiliki
relasi
dengan
class
Harga_Produk_Perpasar, class Rata-rata_Harga_Produk_perhari, class Ratarata_Harga_Produk_perbulan dimana setiap class memiliki satu data produk dari
class Produk. Rata-rata_Harga_Produk_perhari memiliki attribut yaitu
Nama_Produk, Satuan, Rata-rata_Harga_Kemarin, Rata-rata_Harga_Sekarang,
Naik_Turun, Persen, Keterangan. Penghitungan rata-rata perhari dilakukan
dengan mengambil data di class Harga_Produk_Perpasar yang menghitung ratarata harga produk dari setiap data laporan pasar perhari yang masuk setiap hari.
Perancangan interface dilakukan agar pembuatan sistem lebih mudah dan
terarah. Interface yang dibuat dapat berupa input maupun output data untuk
menampilkan informasi. interface yang dirancang bersifat user friendly dengan
tujuan agar pengguna dapat menggunakan sistem yang telah dibuat dengan
nyaman dan mudah.
Gambar 10 Desain Interface Halaman Utama Pegawai
Gambar 10 menampilkan desain interface Halaman Utama website Sistem
Pengolahan BBM dan KEPOKMAS. Halaman ini yang dilihat pegawai pertama
kali setelah melakukan login. Bagian atas menampilkan logo Dinas Perdagangan,
tanggal buka sistem, logout, menu utama, dan konten. Menu utama berisi home,
BBM, dan KEPOKMAS, dan data Pengguna. Di dalam menu BBM terdapat menu
profil SPBU, menu data Report, menu download Report, dan menu grafik.
Sedangkan dalam menu KEPOKMAS terdapat menu data harga produk perhari,
15
menu Rata-rata Harga Produk Perhari, menu Rata-rata Harga Produk Perbulan,
dan menu Grafik. Konten menampilkan menu yang dipilih dari menu utama.
Gambar 11 Desain Arsitektur Pengolahan Data KEPOKMAS
Gambar 11 merupakan desain arsitektur pengolahan data KEPOKMAS.
Sistem pengolahan data KEPOKMAS ini user interface dibagi dalam 4 bagian
yaitu : user interface data pengguna, profil pasar, produk, dan harga produk.
Controller berfungsi sebagai penghubung user interface dengan database yang
dibagi menjadi 6 bagian yaitu : controller untuk kelola data pengguna, kelola data
profil pasar, kelola produk, kelola harga produk pasar perhari, kelola rata-rata
harga produk perhari, dan kelola rata-rata harga produk perbulan. Database
memiliki 6 entity yaitu: Pengguna_Entity, Profil_Pasar_Entity, Produk_Entity,
Harga_Produk_Pasar_Perhari_Entity.
Gambar 12 Desain Arsitektur Pengolahan DataBBM
Gambar 12 merupakan desain arsitektur pengolahan data BBM. Sistem
pengolahan data BBM ini user interface dibagi dalam 3 bagian yaitu : user
interface data pengguna, profil SPBU, dan data report BBM. Controller dibagi
menjadi 4 bagian yaitu : controller untuk kelola data pengguna, kelola data profil
SPBU, kelola data report, kelola Data Bulan. Controller berfungsi sebagai
penghubung user interface dengan database. Database memiliki 4 entity yaitu :
Pengguna_Entity, Profil_SPBU_Entity, Data_Report_Entity,dan Bulan_Entity.
16
4.
Hasil dan Pembahasan
Hasil dari penelitian ini merupakan aplikasi dalam bentuk website yang di
implementasikan menggunakan browser. Seperti yang telah dijelaskan
sebelumnya mengenai CodeIgniter, aplikasi ini dibuat menggunakan metode
Model, View, Controller, berikut hasil dan pembahasan sistem. Router digunakan
untuk memetakan permintaan atau request ke dalam class controller di dalam
aplikasi yang dibuat. Saat mengakses suatu alamat website, permintaan tersebut
tidak menyertakan nama controller apa yang akan dibuka tetapi secara default
bisa diarahkan agar otomatis akan membuka controller sesuai yang telah
definisikan pada router. Konfigurasi router dapat dilihat pada Kode Program 1.
Kode Program 1 Konfigurasi Router
1.$route['default_controller'] = ‘Welcome';
2.$route['404_override'] = '';
3.$route['translate_uri_dashes'] = FALSE;
Default controller pada sistem pengolahan data BBM dan KEPOKMAS
adalah controller Welcome. Sistem dijalankan, controller Welcome akan
menjalankan function index yang mengarah ke halaman Login.
Aplikasi sistem pengolahan data BBM da KEPOKMAS memiliki 3 user
yang berbeda yaitu pegawai Dinas Perdagangan, petugas pasar dan manager.
Pegawai Dinas memiliki hak akses penuh untuk pengoperasisan aplikasi seperti
melihat,merekap,men-download data yang dimiliki semua SPBU dan Pasar.
Petugas pasar dan manager SPBU hanya bisa melihat dan men-upload data yang
dimiliki pasar atau SPBU itu sendiri. 3 user dapat di akses melalui halaman login
yang sama karena halaman login dibuat menggunakan login multi user. Perbedaan
3 user saat melakukan login terletak dalam hak akses yang dimiliki user.
Gambar 13 Tampilan Menu Beranda Pelaporan BBM
Gambar 13 merupakan tampilan beranda setelah manager SPBU melakukan
login. Dalam tampilan beranda terdapat form profil seperti nomor telepon, alamat
dan manager yang harus di-update terlebih dahulu saat pertama kali melakukan
login untuk memenuhi data profil.
17
Kode Program 2. Controller Update Profil SPBU
1. public function updateprof_clientDB(){
2. $data = array(
3. 'alamat' => $this->input->post('alamat'),
4. 'usaha' => $this->input->post('usaha'),
5. 'manager' => $this->input->post('manager'),
6. 'no_telepon' => $this->input->post('no_telepon'));
7. $condition['no_spbu'] = $this->input->post('no_spbu');
8. try {$this->m_profil->updateprof_client($data, $condition);
9. $this->session->set_flashdata('msg','berhasil di Update!');}
10. catch(Exception $e){} redirect('welcome/beranda');}
Kode Program 2 merupakn fungsi update profil pada controller. Baris 3
samapi 6 merupakan kode program untuk menampilkan atribut yang akan diupdate pada profil SPBU. Baris 7 digunakan untuk melakukan validasi terhadap
data mana yang akan di-update berdasarkan nomor SPBU.
Terdapat 4 menu utama yang dapat di akses oleh menager SPBU setelah
melakukan login yaitu menu Beranda yang menampil halaman profil SPBU
seperti Gambar 13 diatas. Menu Data Laporan BBM yang berisi data-data laporan
BBM perbulan yang telah di-upload terlebih dahulu di menu Upload Data. Menu
Ganti Password adalah halaman menu yang digunakan untuk mengganti
password.
Gambar 14 Tampilan Menu Upload Data BBM
Tampilan menu upload data BBM pada Gambar 14 terdapat atribut kategori
seperti bulan dan tahun yang dipilih dahulu. Menyiapkan file dalam format excel
(.xlsx) sebelum melakukan upload data pasar dan setelah melakukan upload data
BBM maka akan disimpan dan dapat dilihat di menu Data Laporan BBM.
Kode Program 3 Controller Upload DataBBM
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
public function upload(){
$config['upload_path'] = './upload/';
$config['file_name'] = $fileName;
$config['allowed_types'] = 'xls|xlsx|csv|ods|ots';
$this->load->library('upload', $config);
$error = array('error' => $this->upload->display_errors());
$this->session->set_flashdata('msg','Ada kesalaha dalam upload Data BBM!');
redirect('Welcome/upload_report');
}else{ $datajenis = $this->m_produk->getAllproduk()->result();
if(empty(trim($rowData[0][0]))){continue;}
$data = array(
"stock_awal"=> $rowData[0][1],
"stock_akhir"=> $rowData[0][2],
"vol_penerimaan"=> $rowData[0][3],
"periode_bulan" => $this->input->post('bulan'),
"no_spbu" => $this->input->post('no_spbu'));
$this->session->set_flashdata('msg','Report Berhasil di Upload!');
redirect('welcome/view_report/'.$this->input->post('no_spbu'));
}
18
Kode Program 3 merupakan controller upload data BBM. Pada baris 2
sampai 4 merupakan config buat upload dan tipe file yang bisa di-upload. Pada
baris 7 dan 8 untuk mengecek file jika validasi file gagal, kirim parameter error.
Baris 9 merupakan kode program untuk mengecek nama BBM yang tersimpan
pada halaman admin dan satuan terdaftar atau tidak di dalam data produk. Baris
11 sampai 16 kode program dimana data di dalam excel setelah di validasi akan
dimasukkan dalam array dengan nama $data sebelum disimpan dan redirect ke
data laporan BBM.
Data laporan BBM perbulan seluruh SPBU yang di-upload oleh setiap
manager SPBU tersimpan di database dan akan di tampilkan pada halaman menu
daftar laporan SPBU yang dimiliki admin atau pegawai seperti Gambar 15 di
bawah ini.
Gambar 15 Tampilan Data Laporan BBM
Menu Data Laporan berisi data laporan BBM perbulan setiap SPBU yang
telah di-upload terlebih dahulu oleh manager SPBU seperti Gambar 15. Dalam
menu Data Laporan terdapat tambahan beberapa search filter no.SPBU, bulan
Dan tahun yang terdapat pada bagian atas table untuk mempermudah pegawai
mencari data laporan BBM yang dimiliki setiap SPBU.
Kode Program 4. Controller Search Filter Data Laporan BBM
1. public function filter(){
2. if (($this->input->post('no_spbu')=='all') && ($this->input
3. >post('bulan')=="all") && ($this->input->post('tahun')=="all")) {
4. $data['listkondisi'] = $this->m_kondisi->getAllkondisi();
5. }elseif (($this->input->post('no_spbu')=='all') && ($this->input
6. >post('bulan')!="all") && ($this->input->post('tahun')=="all")){
7. $data['listkondisi']=$this->m_kondisi->getkondisi_by_bulan($this->input
8. >post('bulan'));
9. }elseif(($this->input->post('no_spbu')!='all') && ($this->input
10. >post('bulan')=="all") && ($this->input->post('tahun')=="all")) {
11. $data['listkondisi']=$this->m_kondisi->getkondisi_by_no_spbu($this->input
12. >post('no_spbu'));
13. }elseif(($this->input->post('no_spbu')!='all') && ($this->input
14. >post('bulan')!="all") && ($this->input->post('tahun')=="all")){
15. $data['listkondisi'] = $this->m_kondisi->getskondisi(($this->input
16. >post('no_spbu')),($this->input->post('bulan')));
17. }
Kode program 4 merupakan fungsi search filter pada controller. Pada
baris 2 dan 3 merupakan function yang digunakan untuk memilih kategori yang
akan di search filter dan baris 4 merupakan kode program untuk mengecek dalam
database melalui model. Function memilih kategori dan mengecek akan
dilakukan berulang kali sampai baris 16.
19
Gambar 16 Tampilan Menu Beranda Pelaporan KEPOKMAS
Gambar 16 merupakan tampilan beranda setelah petugas pasar melakukan
login. Dalam tampilan beranda terdapat form profil seperti nomor telepon, alamat
dan nama petugas yang harus di-update terlebih dahulu saat pertama kali
melakukan login untuk memenuhi data profil.
Gambar 17 Tampilan Menu Data Laporan KEPOKMAS Perpasar
Tampilan Menu Data Laporan KEPOKMAS Perpasar pada Gambar 17
diatas merupakan halaman untuk menampilkan data KEPOKMAS hasil dari
upload yang dilakukan petugas pasar. Terdapat form Search Filter yang
digunakan untuk mencari data yang di inginkan dengan cara memilih kategori
yang telah disediakan terlebih dahulu. Kode program Controller Search Filter
KEPOKMAS hampir sama dengan kode program Controller Search Filter Data
Laporan BBM yang membedakan class penyimpanan yang berada di model.
Data laporan KEPOKMAS seluruh pasar yang di-upload oleh setiap petugas
pasar tersimpan di database akan di tampilkan pada halaman menu daftar laporan
harian perpasar yang dimiliki admin atau pegawai dan akan di hitung rata-rata dari
jumlah harga produk yang sama di bagi jumlah pasar yang telah men-upload data
produk kemudian ditampilkan pada halaman menu Rata-Rata Perhari.
20
Gambar 18 Tampilan Menu Rata-Rata Perhari
Tampilan menu Rata-Rata Perhari pada Gambar 18 berisi sebelas atribut
yaitu hari, tanggal ,bulan, tahun, nama produk, satuan, harga kemarin, harga
sekarang, naik atu turun, persentase, dan keterangan. Harga kemarin dan harga
sekarang yang terisi dari hasil rata-rata harga produk tiap pasar yang di-upload
oleh petugas pasar sebelumnya. Harga naik atau turun dari hasil pengurangan
harga sekarang dengan harga kemarin dan persentase dari harga sekarang – harga
kemarin / 100.
Kode Program 5. Model Rata-rata Perhari
1. function getrataperhari(){
2. $this->db->select("*, AVG(tabel_pasar_perhari.harga) 'rata'");
3. $this->db->from("tabel_pasar_perhari");
4. $this->db-> group_by("tabel_pasar_perhari.tanggal,
5. tabel_pasar_perhari.bulan,tabel_pasar_perhari.tahun,
6. tabel_pasar_perhari.nama_produk, tabel_pasar_perhari.satuan");
7. $this->db->order_by("tabel_pasar_perhari.nama_produk,
8. tabel_pasar_perhari.tahun, tabel_pasar_perhari.bulan,
9. tabel_pasar_perhari.hari");
10. return $this->db->get();
11. }
Kode program 5 menampilkan cara mencari rata-rata perhari dari data
laporan pasar perhari. Baris 2 adalah function untuk mendapatkan rata-rata dari
tabel_pasar_perhari. Baris 4 menggunakan function group_by untuk
mengelompokkan beberapa data dan baris ke 7 terdapat order_bay perintah yang
digunakan untuk menampilkan data secara terurut berdasarkan nilai tertentu.
Gambar 19 Tampilan Menu Rata-Rata Perbulan
Gambar 19 merupakan tampilan menu rata-rata perbulan yang berisi data
dari hasil perhitungan rata-rata jumlah harga produk pada bulan dan tahun yang
21
sama dari rata-rata perhari. Atribut yang ada pada rata-rata bulan sama dengan
atribut rata-rata perhari.
Data yang ditampilkan pada menu rata-rata perhari KEPOKMAS, rata-rata
perbulan KEPOKMAS dan download data laporan BBM yang di miliki pegawai
dapat langsung dicetak dalam bentuk excel, pdf, di-copy dan searching laporan
menggunakan library datatables. Pada penggunaan fungsi dari library datatables
mempermudah pegawai dalam melakukan cetak laporan, ordering laporan, dan
searching data laporan yang diinginkan.
Kode Program 6. Fungsi Searcing menggunakan Library Datatables
1. function( elem ) {
2. return !Expr.pseudos["empty"]( elem );},
3. "header": function( elem ) {
4. return rheader.test( elem.nodeName );},
5. "input": function( elem ) {
6. return rinputs.test( elem.nodeName );},
7. "button": function( elem ) {
8. var name = elem.nodeName.toLowerCase();
9. return name === "input" && elem.type === "button" || name ===
10. "button";},"text": function( elem ) {
11. var attr;
12. return elem.nodeName.toLowerCase() === "input" &&
13. elem.type === "text" &&( (attr = elem.getAttribute
14. ("type")) == null || attr.toLowerCase() === "text" );},
Kode Program 6 merupakan Searcing data menggunakan Library Datatables
menampilkan data sesuai kategori yang dituliskan. Pada penggunaan fungsi
Searcing ditampilkan data sesuai coloum yang mana pada setiap coloum kategori
menjadi row grouping sebagai pemisah antar kategori data.
Perbandingan pada proses bisnis sebelum dan sesudah menggunakan
aplikasi yaitu validasi pelaporan sebelumnya masih menggunakan kertas yang
disetujui oleh manager SPBU. Setelah adanya sistem, validasi pelaporan
menggunakan hak akses yang diberikan dari pegawai Dinas Perdagangan.
Pengujian alpha menggunakan metode blackbox yaitu pengujian fungsifungsi sistem 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
sistem yang telah dilakukan.
Tabel 1 Hasil Pengujian Blackbox
Fungsi yang diuji
Login
Tambah Data Pengguna
Hapus Data Barang
Ubah Data Profil
Tambah Data
Produk/BBM
Hapus Data
Produk/BBM
Menampilkan data
Laporan BBM
Menampilkan data
Kondisi
Username dan password
benar
Username dan password
salah maupun kosong
Form diisi dengan benar
Form wajib diisi kosong
Output yang
diharapkan
Sukses login
Output yang
dihasilkan sistem
Sukses login
Gagal login
Gagal login
Sukses tambahPengguna
Gagal tambah data
Valid
Status
Pengujian
Valid
Pilih salah satu data
Form diisi dengan benar
Form diisi dengan benar
Sukses hapus data
Suksesubah data
Sukses tambah data
Sukses tambah
pengguna
Gagal tambah pengguna
Sukses hapus data
Sukses ubah data
Sukses tambah data
Pilih salah satu data
Sukses hapus data
Sukses hapus data
Valid
Buka halaman daftar
Laporan BBM
Buka halaman data
Sukses menampilkan
data
Sukses menampilkan
Sukses menampilkan
data
Sukses menampilkan
Valid
22
Valid
Valid
Valid
Valid
Laporan Produk Pasar
Perhari
Menampilkan data
Laporan Rata-Rata
Produk Perhari
Menampilkan data
Laporan Rata-Rata
Produk Perbulan
Download Data Laporan
Upload Data Laporan
Ganti Password
Laporan Produk Pasar
Perhari
Membuka data Laporan
Rata-Rata Produk Perhari
data
data
Sukses menampilkan
data
Sukses menampilkan
data
Valid
Membuka data Laporan
Rata-Rata Produk
Perbulan
Membuka halaman
Download
Buka halaman Upload
Data Laporan
Buka halaman Ganti
Password
Sukses menampilkan
data
Sukses menampilkan
data
Valid
Sukses men-download
data
Sukses Upload
Sukses men-download
data
Sukses data upload
tersimpan
password baru sukses
tersimpan
Valid
Sukses Ganti password
Valid
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 menggunakan kuesioner,
yaitu dengan melakukan tanya jawab melalui telfon kepada sampleuser.
Sampleuser berjumlah 15 responden dan dipilih secara acak, sample user pada
pengujian ini adalah pegawai Dinas Perdagangan Kota Salatiga.
Tabel 2 Hasil Jawaban Kuesioner
No
1
2
3
4
5
6
Pernyataan
Aplikasi aplikasi ini mudah digunakan
Tampilan, huruf dan gambar dari aplikasi ini dapat dilihat
dengan jelas
Menu-menu pada aplikasi ini mudah dipahami dan tidak
membingungkan
Aplikasi ini membantu dalam melakukan pengelolaan data
pekerjaan
Aplikasi ini membantu dalam melakukan pengelolaan hasil
pengujian sample
Aplikasi ini bermanfaat untuk menyimpan arsip hasil laporan
STS
0
0
TS
0
0
CS
1
4
S
9
6
SS
5
5
0
1
3
3
8
0
0
1
10
4
0
0
3
6
6
0
0
2
6
7
Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung
presentase jawaban responden yang telah mengisi kuesioner.
Rumus Index % = ∑ Skor:Y*100% (1)
Rumus 1 adalah rumus untuk menghitung presentase jawaban responden.
Hasil analisa untuk pertanyaan pertama didapatkan index 93,33% responden
setuju jika aplikasi sistem pengolah data mudah digunakan. Untuk pertanyaan
kedua 73,33% responden setuju bahwa huruf dan gambar pada aplikasi sistem
pengolahan data dapat dilihat dengan jelas. Untuk pertanyaan ketiga 73,33%
responden setuju bahwa menu pada aplikasi sistem pengolahan data mudah untuk
dipahami dan tidak membingungkan. Untuk pertanyaan keempat 93,33%
responden setuju bahwa aplikasi sistem pengolahan data membantu dalam
melakukan pengelolaan data hasil pekerjaan. Untuk pertanyaan kelima 80,00%
responden setuju bahwa aplikasi sistem pengolahan data membantu dalam
melakukan pengelolaan hasil pengujian sample. Untuk pertanyaan keenam
86,66% responden setuju bahwa aplikasi pengolahan data bermanfaat untuk
menyimpan arsip hasil uji pengujian.
Pengujian manfaat juga dilakukan dengan wawancara kepada pegawai IT
Bidang Perdagangan di Dinas Perdagangan Kota Salatiga. Dengan adanya sistem
informasi pengolahan data BBM dan KEPOKMAS dalam melakukan pengawasan
23
dan pengumpulan data pekerjaan pegawai dan dalam melakukan pencarian arsip
laporan lebih cepat dan tertata dengan baik.
5.
Simpulan
Berdasarkan penelitian yang telah dilakukan, Perancangan Aplikasi
Pengolahan Data BBM dan KEPOKMAS dapat dirancang menggunakan
Framework Codeigniter dan library Datatables. Pengunaan CodeIgniter dengan
konsep MVC bermanfaat untuk penulisan kode program lebih terstruktur dan
lebih aman karena user tidak berhubungan secara langsung dengan database.
Selain itu, Codeigniter menyediakan fungsi insert, read, update dan delete yang
mempermudah serta mempercepat dalam pembuatan aplikasi dan penggunaan
DataTables yang di bangun dari jquery untuk menampilkan data dalam bentuk
tabel yang sudah terintegrasi search form dan pagination untuk penomoran data
pada tabel. Sehingga tidak perlu lagi membuat form pencarian pada aplikasi, dan
tidak perlu lagi membuat pagination sendiri.
Hasil pengujian aplikasi menunjukkan bahwa aplikasi Sistem Pengolahan
Data BBM dan KEPOKMAS dapat menyelesaikan permasalahan yang ada pada
pelaporan data BBM dan KEPOKMAS di Dinas Perdagangan. Seperti pegawai
dapat mengakses data pelaporan yang di-upload oleh manager SPBU dan petugas
pasar secara online. Sebelum adanya sistem, anggaran untuk mengumpulkan
laporan yaitu Rp. 20.000, waktu yang dibutuhkan ±2 jam dan input data ke excel
dibutuhkan waktu ±2 hari. Setelah adanya sistem, tidak mengeluarkan anggaran
untuk pengambilan laporan. Waktu yang dibutuhkan untuk input dan
pengumpulan data ±8 jam. Dengan adanya aplikasi pelaporan data BBM dan
KEPOKMAS juga mempermudah pegawai Dinas Perdagangan untuk merekap,
mengelola dan menyimpan data pelaporan secara terstruktur.
6. Daftar Pustaka
[1] Supono. Vidiandry,P. 2016. ‘Pemograman Web Menggunakan PHP dan
Framework Codeigniter’. –Ed. 1(1). Yogyakarta : Deepublish.
[2] Roy,RW. Noor,I. Achmad,J. 2009. ‘Perancangan Dan Pengembangan
sistem Pelaporan Terpadu Sistem Informasi Puskesmas (SPT SIMPUS)
Dengan Metode BPR’. Jurnal Ilmiah Kursor Menuju Solusi Teknologi
Informasi. vol 5. No 2.
[3] Danang,J. Qorinta,S. Fitro,N. 2013. ‘Perancangan Sistem Informasi
Pelaporan Monografi Berbasis Web (Studi Kasus Pada Kantor Kecamatan
Semarang Utara)’. Jurnal Speed - Sentra penelitian Engineering dan
Edukasi. vol 5. No 2.
[4] Eka,W,H. 2011. ‘Penerapan Pola Hierachical Model-View-Controller Pada
Rekayasa Sistem Berbasis Web Framework’. Jurnal Teknologi
Technoscientia, v ol 3. No 2.
[5] Peraturan Walikota Salatiga, 2016, ‘Tugas Dan Fungsi Serta Tata Kerja
Dinas Perdagangan’, Salatiga, Dinas Perdangangan.
[6] DataTables, 2017. DataTables. Diakses tanggal 24 mei 2017
darihttps://datatables.net..
[7] www.slideshare.net/anuragambst1/unit2-18477505. ( Diakses pada tanggal
02 juni 2017 )
24