DEVELOPER GUIDE

User Manual:

Open the PDF directly: View PDF .
Page Count: 10

AIRCRAFT RELIABILITY DAHSBOARD DEVELOPER’S

GUIDE

FUNDAMENTALS

Aircraft Reliability Dashboard pada dasarnya hanya menggunakan PHP dan HTML Native. Disamping

itu, Website ini didukung dengan css dari Bootstrap dan jquery untuk membuat website lebih

menarik dan informatif.

ARSTITEKTUR

Aircraft Reliability Dashboard dibuat berdasarkan Arsitektur Client-Server. Database yang digunakan

adalah database milik Aircraft Reliability Management. Setiap tabel merupakan tabel tanpa relasi.

Modul yang kami gunakan adalah

1. Datatables

Datatables merupakan modul open source yang telah lazim digunakan, karena

tampilannya yang bagus dan tabel yang responsive. Selengkapnya mengenai datatables dapat

diakses disini. Dan plugin ini merupakan plugin online yang dapat digunakan dengan

menuliskan jquery di akhir script. Lalu membuat id sesuai dengan jquery yang telah dibuat,

yang nantinya digunakan sebagai id untuk tabel tersebut.

Gambar 1. Data Tables

Karena plugin tersebut adalah plugin open source, maka dokumentasi dari plugin tersebut

sama seperti dokumentasi yang tertera pada website Datatables.

2. Chart JS

Chart JS merupakan modul open source yang lazim digunakan karena tampilannya

menarik dan informatif. Selengkapnya mengenai ChartJS dapat dilihat disini. Dan plugin ini

merupakan plugin online yang dapat digunakan dengan menuliskan jquery di akhir script. Lalu

membuat id sesuai dengan jquery yang telah dibuat, yang nantinya digunakan sebagai id untuk

Canvas tersebut.

Gambar 2. ChartJS pada halaman graph_delay.php

3. JSPdf

JSPdf merupakan modul open source yang lazim digunakan untuk menekspor data

dari website ke format .pdf. Selengkapnya mengenai JSPdf dapat dilihat disini. Sama seperti

modul sebelumnya, JSPdf merupakan modul online yang dapat digunakan dengan menuliskan

jquery di akhir script. Lalu memberi id pada div yang nantinya akan diekspor.

4. Jsonwrapper.php

Jsonwrapper.php merupakan modul open source yang berguna untuk php versi

dibawah 5.1 tapi dalam code terdapat fungsi yang memerlukan fungsi json. Funsgi tersebut

seperti json_encode, json_decode, atau fungsi json lainnya yang dapat digunakan untuk

mempermudah mendevelop website tersebut.

ANATOMI CODE

Unutk mempermudah developer mendevelop website ini, ada beberapa code yang sengaja kami buat

statis. Tetapi Code tersebut selalu dipanggil saat muncul halaman baru. Code itu adalah:

1. Header.php

2. Navbar.php

3. Footer.php

Berikut apabila diimplementasikan dalam website

Gambar 3. Homepage website

Penjelasan lengkap mengenai isi dari code diatas:

1. Header.php

Halaman ini hanya menampilkan bagian atas setiap halaman saja. Logo yang

digunakan merupakan gambar statis yang kami rancang agar tidak dapat ditekan oleh user.

Pada Line 2 yang berisikan <div class=”sidebar-toggle-box”> hingga </div> merupakan code

untuk menyembunyikan atau menampilkan sidebar.

2. Navbar.php

Halaman ini merupakan halaman navigation bar yang selalu melekat di sebelah kiri

setiap halaman. Terdapat variable $page_now yang berfungsi untuk menandai sekarang user

ada di halaman apa pada navbar. Sehingga apabila user berada di salah satu halaman, maka

halaman tersebut akan berubah warna

Header.php

Navbar.php

Footer.php

Gambar 4. Halaman user terkini berwarna biru muda

3. Footer.php

Halaman ini merupakan bagian bawah website yang menunjukkan bahwa website ini

adalah hak milik dari Aircraft Reliability Management. Dan tahun copyright yang menunjukkan

bahwa website ini adalah website yang terbaru atau up to date.

Terdapat Sembilan tombol yang berada pada navbar. Pada bagian Techlog/Delay, Pareto

Techlog/Delay, Components Removal, Pareto Component Removal, dan MTBUR, halaman pertama

setelah user menekan tombol tersebut adalah halaman filter. Halaman filter dinamai dengan format

“awal_” dan diikuti dengan nama halaman selanjutnya, dan diakhiri dengan “.php”. Contoh:

“awal_component.php”, yang artinya halaman ini adalah halaman pertama saat user menekan

tombol component. Format penamaan ini berfungsi, sebagai pembeda antara halaman pertama yang

hanya berisi filter, dengan halaman setelahnya yang menampilkan data secara keseluruhan. Berikut

mengenai penjelasan setiap halaman.

1. Halaman inti

Halaman inti merupakan halaman yang murni dikerjakan dengan native php. Seperti

yang dituliskan pada penjelasan diatas, halaman inti adalah halaman yang bersangkutan

dengan Techlog/Delay, Pareto Techlog/Delay, Components Removal, Pareto Component

Removal, dan MTBUR. Dalam code kami telah kami sisipkan comment yang berguna untuk

membantu developer mendevelop website tersebut.

Terdapat kemiripan pada setiap awal halaman tersebut (halaman yang memiliki nama

berawalan “awal_”) yaitu memanggil code lain yang berisi <form>. Hal ini dikarenakan, setelah

user menginputkan data sesuai filter yang dicari, mereka tidak lupa akan apa yang tadinya

mereka ingin cari. Berikut elemen yang ditemui dalam halaman <form> tersebut

Nama Elemen

Fungsi

$sql_actype

$res_actype

$row

Merupakan query yang akan mendapatkan nama

nama tipe Aircraft dari tabel tbl_master_actype

Merupakan fungsi dropdown yang akan

menampilkan hasil dari query $res_actype

<input type="date" class="form-

control" name="datefrom"

id="id_datefrom">

Merupakan field yang nantinya akan mendapatkan

tanngal mulai data sesuai input user. Bagian ini akan

berfungsi optimal apabila menggunakan browser

Google Chrome. User apabila menggunakan broser

selain Google Crome HARUS mengikuti arahan

format. Karena data yang disimpan memiliki format

yyyy-mm-dd

<input type="date" class="form-

control" name="datefrom"

id="id_dateto">

Merupakan field yang nantinya akan mendapatkan

tanngal akhir data sesuai input user. Bagian ini akan

berfungsi optimal apabila menggunakan browser

Google Chrome. User apabila menggunakan broser

selain Google Crome HARUS mengikuti arahan

format. Karena data yang disimpan memiliki format

yyyy-mm-dd

<input type="submit"

value="Display Report"

class="btn btn-default">

Merupakan tombol submit yang menjadi pelatuk

action form

Untuk bebrapa halaman, terdapat beberapa input yang unik. Setiap input memiliki peranan

dan nama masing masing sesuai dengan code yang telah kami rancang. Input tersebut dapat

berupa radio button, checkbox atau sekedar field seperti biasa. Untuk lebih jelasnya dapat

dilihat setiap comment pada masing halaman.

Selanjutnya adalah tabel. Tabel yang kami gunakan merupakan plugin dari Datatables.

Referensi Datatables dapat diakses melalui halaman ini.

Cara kerja datatables yang kami implementasikan adalah:

a) Inisiasi

Pada tahap inisiasi salah satu tabel harus memiliki id yang sesuai seperti code

DataTables yang telah developer siapkan di akhir atau tengah script. Sebagai contoh ada

pada component_removal.php.

Gambar 3. Code Untuk memunculkan table pada halaman

component_removal.php

Kemudian code datatables sesuai instruksi pada halaman referensi.

Gambar 5. Code JQuery untuk datatables halaman component_removal.php

b) Customize

Agar developer dapat men-customize DataTable sesuai keinginan, maka disarankan

kepada developer untuk membaca referensinya terlebih dahulu. Sebagai contoh, pada

bagian component_removal.php kami menambhakan panjang penyajian data yang dapat

dibuah ubah, dan adanya tombol untuk menekspor menjadi format .xls

Kemudian, agar datatables dapat berfungsi dengan sempurna perlu diperhatikan

Urutan Memasukkan Script pada halaman tersebut. Urutan yang kami gunakan adalah:

<script

src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>

<script

src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>

<script

src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>

Disamping itu, developer diharpakan juga untuk Tidak Lupa menambahkan css dari

Datatables itu sendiri.

href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

Untuk memudahkan penyajian data, kami menggunakan plugin ChartJS untuk membuat Chart

sesuai dengan data yang ditampilkan pada tabel. Referensi ChartJS dapat dilihat pada halaman

ini. Tahapannya serupa yaitu:

a) Inisiasi

Pada tahap inisiasi salah satu canvas harus memiliki id yang sesuai seperti code ChartJS

yang telah developer siapkan di tengah atau akhir script. Sebagai contoh ada pada

graph_component.php.

Gambar 6. Code untuk memunculkan chart pada halaman graph_component.php

Kemudian code ChartJS sesuai instruksi pada halaman referensi, dan menyamakan nama

id supaya grafik muncul.

Gambar 7. Potongan code JQuery untuk menampilkan chartJS

Lalu, unutk membuat chart dapat menggunakan code:

var myBarChart = new Chart(ctx, {

type: 'bar',

data: data,

options: options

});

b) Customize

Agar developer dapat men-customize Chart sesuai keinginan, maka disarankan kepada

developer untuk membaca referensinya terlebih dahulu. Sebagai contoh, pada bagian

graph_component.php kami mencustomize label, data, title, dan warna chart.

Karena hasil query sudah sesuai, maka hasil query tersebut disimpan dalam array

javascript, agar data tersebut dapat ditampilkan pada chart. Karena berbeda format kami

menggunakan jsonwrapper sebagai alat bantu untuk memanggil fungsi json_encode. Lalu

data tersebut diisikan ke array yang telah disiapkan untuk mengisi data pada chart.

Gambar 8. Potongan code untuk mendistribusikan data antar array

Selanjutnya adalah menambahkan JSPdf. JSPdf adalah plugin yang dapat mengekspor seluruh

halaman ke dalam format .pdf. Untuk lebih lengkapnya, ada referensi yang dapat dirujuk pada

halaman ini. Cara pengerjaannya hampir sama seperti plugin sebelumnya yaitu:

a) Inisiasi

Pada tahap inisiasi salah satu button harus memiliki nama fungsi yang sesuai seperti code

JSPdf yang telah developer siapkan di tengah atau akhir script. Sebagai contoh ada pada

graph_component.php.

Gambar 9. Code untuk memunculkan tombol ekspor pada halaman

graph_component.php

Kemudian code JSPdf sesuai instruksi pada halaman referensi, dan menyamakan nama id

dan nama fungsi agar tombol muncul dan berfungsi.

Gambar 10. Inisiasi pada halaman graph_component.php

b) Customize

Agar developer dapat men-customize Data yang akan diekspor sesuai keinginan, maka

disarankan kepada developer untuk membaca referensinya terlebih dahulu.

2. Halaman Tambahan

Kami memberi sebutan demikian, karena website tersebut sudah ada, dan kami men-

embed halaman tersebut ke website dashboard. Halaman tersebut adalah halaman Oil

Consumption dan PFR Online. Dokumentasi kedua halaman tersebut ada pada Aircraft

Reliability Management.

3. Halaman pendukung

Halaman pendukung yang kami maksud adalah halaman User Guide dan MTBUR WW.

Kedua halaman tersebut merupakan hasil embed dari Google drive. Dimana MTBUR World

Wide adalah halaman yang berisi dokumen dokumen pendukung. Sedangkan User Guide

adalah halaman yang berisi tentang cara menggunakan website ini.

Tabel yang akan diekspor

grafik yang akan diekspor

Kolom yang akan ditampilkan

Mungkin cukup sekian yang bisa kami jelaskan. Penjelasan lebih lanjut terdapat pada comment pada

script kami. Apabila masih ada yang kurang jelas, diharapkan untuk membaca Referensi yang telah

kami Hyperlink dengan web yang bersangkutan. Apabila memerlukan penjelasan lebih lanjut, dapat

menghubungi kami pada:

1. Rilokukuh@gmail.com (Kukuh Rilo Pambudi)

2. Mhabiburr17@gmail.com (M. Habibur Rahman)

DEVELOPER GUIDE

Navigation menu

Versions of this User Manual:

Views

Navigation