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

8

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.

9

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

10

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

11

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.

12

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

13

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

14

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

upload sudah benar atau belum. Manager SPBU dapat men-update dan men-

delete 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

15

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

rata_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 rata-

rata 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,

16

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.

17

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

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.

1.$route['default_controller'] = ‘Welcome';

2.$route['404_override'] = '';

3.$route['translate_uri_dashes'] = FALSE;

18

Kode Program 2. Controller Update Profil SPBU

Kode Program 2 merupakn fungsi update profil pada controller. Baris 3

samapi 6 merupakan kode program untuk menampilkan atribut yang akan di-

update 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. 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');}

1. public function upload(){

2. $config['upload_path'] = './upload/';

3. $config['file_name'] = $fileName;

4. $config['allowed_types'] = 'xls|xlsx|csv|ods|ots';

5. $this->load->library('upload', $config);

6. $error = array('error' => $this->upload->display_errors());

7. $this->session->set_flashdata('msg','Ada kesalaha dalam upload Data BBM!');

8. redirect('Welcome/upload_report');

9. }else{ $datajenis = $this->m_produk->getAllproduk()->result();

10. if(empty(trim($rowData[0][0]))){continue;}

11. $data = array(

12. "stock_awal"=> $rowData[0][1],

13. "stock_akhir"=> $rowData[0][2],

14. "vol_penerimaan"=> $rowData[0][3],

15. "periode_bulan" => $this->input->post('bulan'),

16. "no_spbu" => $this->input->post('no_spbu'));

17. $this->session->set_flashdata('msg','Report Berhasil di Upload!');

18. redirect('welcome/view_report/'.$this->input->post('no_spbu')); }

19

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

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.

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. }

20

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.

21

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

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

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. }

22

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

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

fungsi 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 Kondisi Output yang

diharapkan

Output yang

dihasilkan sistem

Status

Pengujian

Login Username dan password benar

Username dan password

salah maupun kosong

Sukses login

Gagal login

Sukses login

Gagal login

Valid

Tambah Data Pengguna Form diisi dengan benar

Form wajib diisi kosong

Sukses tambahPengguna

Gagal tambah data

Sukses tambah

pengguna

Gagal tambah pengguna

Valid

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

Ubah Data Profil Form diisi dengan benar Suksesubah data Sukses ubah data Valid

Tambah Data

Produk/BBM

Form diisi dengan benar Sukses tambah data Sukses tambah data Valid

Hapus Data Produk/BBM

Pilih salah satu data Sukses hapus data Sukses hapus data Valid

Menampilkan data

Laporan BBM

Buka halaman daftar

Laporan BBM

Sukses menampilkan

data

Sukses menampilkan

data

Valid

Menampilkan data Buka halaman data Sukses menampilkan Sukses menampilkan Valid

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" );},

23

Laporan Produk Pasar

Perhari

Laporan Produk Pasar

Perhari

data data

Menampilkan data Laporan Rata-Rata

Produk Perhari

Membuka data Laporan Rata-Rata Produk Perhari

Sukses menampilkan data

Sukses menampilkan data

Valid

Menampilkan data Laporan Rata-Rata

Produk Perbulan

Membuka data Laporan Rata-Rata Produk

Perbulan

Sukses menampilkan data

Sukses menampilkan data

Valid

Download Data Laporan Membuka halaman

Download

Sukses men-download

data

Sukses men-download

data

Valid

Upload Data Laporan Buka halaman Upload

Data Laporan

Sukses Upload Sukses data upload

tersimpan

Valid

Ganti Password Buka halaman Ganti

Password

Sukses Ganti password password baru sukses

tersimpan

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 Pernyataan STS TS CS S SS

1 Aplikasi aplikasi ini mudah digunakan 0 0 1 9 5

2 Tampilan, huruf dan gambar dari aplikasi ini dapat dilihat

dengan jelas

0 0 4 6 5

3 Menu-menu pada aplikasi ini mudah dipahami dan tidak

membingungkan

0 1 3 3 8

4 Aplikasi ini membantu dalam melakukan pengelolaan data

pekerjaan

0 0 1 10 4

5 Aplikasi ini membantu dalam melakukan pengelolaan hasil

pengujian sample

0 0 3 6 6

6 Aplikasi ini bermanfaat untuk menyimpan arsip hasil laporan 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

24

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 )