DEVELOPER GUIDE

User Manual:

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

DownloadDEVELOPER GUIDE
Open PDF In BrowserView PDF
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

Copyright – Aircraft Reliability Management - 2017

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

Copyright – Aircraft Reliability Management - 2017

Berikut apabila diimplementasikan dalam website

Header.php

Navbar.php

Footer.php
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 
hingga
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 Copyright – Aircraft Reliability Management - 2017 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
. 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 tersebut Copyright – Aircraft Reliability Management - 2017 No 1. Nama Elemen $sql_actype $res_actype $row 2. 4. 5. Fungsi 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 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 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 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. Copyright – Aircraft Reliability Management - 2017 Gambar 3. Code component_removal.php Untuk memunculkan table pada halaman 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: Disamping itu, developer diharpakan juga untuk Tidak Lupa menambahkan css dari Datatables itu sendiri. Copyright – Aircraft Reliability Management - 2017 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 }); Copyright – Aircraft Reliability Management - 2017 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 graph_component.php memunculkan tombol ekspor pada halaman Kemudian code JSPdf sesuai instruksi pada halaman referensi, dan menyamakan nama id dan nama fungsi agar tombol muncul dan berfungsi. Copyright – Aircraft Reliability Management - 2017 Kolom yang akan ditampilkan Tabel yang akan diekspor grafik yang akan diekspor 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 menembed 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. Copyright – Aircraft Reliability Management - 2017 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) Copyright – Aircraft Reliability Management - 2017

Source Exif Data:
File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.7
Linearized                      : No
Page Count                      : 10
Language                        : en-US
Tagged PDF                      : Yes
XMP Toolkit                     : 3.1-701
Producer                        : Microsoft® Word 2016
Creator                         : MUHAMMAD HABIBUR RAHMAN
Creator Tool                    : Microsoft® Word 2016
Create Date                     : 2017:08:01 14:08:23+07:00
Modify Date                     : 2017:08:01 14:08:23+07:00
Document ID                     : uuid:B7589555-6D0A-455B-9582-BF0208809DD2
Instance ID                     : uuid:B7589555-6D0A-455B-9582-BF0208809DD2
Author                          : MUHAMMAD HABIBUR RAHMAN
EXIF Metadata provided by EXIF.tools

Navigation menu