PERANCANGAN APLIKASI

(1)

Tentang Penulis 251

PERANCANGAN APLIKASI

2.1. Rancagan Database

Pada kali ini kita masuk ke tahap dalam pembuatan sebuah database.

Pada pembuatan apliaksi ini penulis membuat database menggunakan aplikasi Xampp v5.6.30. xampp merupakan aplikasi multifungsi yang bisa digunakan secara bersamaan, Xampp sendiri sudah dilengkapi dengan apalikasi MySQL database dan apache web server dengan bahasa pemograman PHP. Berikut cara-cara dalam penginstalan aplikasi xampp yang harus dilakukan.

A. Cara Instalasi Xampp v5.6.30

Langkah 1: Pertama download aplikasi xampp di internet dengan versi terbaru dan sesuaikan dengan type komputer anda dan disini kami menggunakan xampp minimal versi 5.6.30 dengan bit 32. Saran untuk menginstal aplikasi dengan versi 5.6.30 ini perlu menon-aktifkan antivirus terlebih dahulu agar penginstalan komponen-komponen di xampp bisa berjalan dengan lancar. Lalu, buka aplikasi yang telah di download. Klik dua kali pada installer tersebut. Lalu akan mucul tampilan seperti di bawah ini. Setelah itu klik tombol Next.

Sumber: Hasil Penelitian (2019)

Gambar 2.1. Klik Next pada Xampp

Langkah 2: Berikutnya akan mucul jendela yang meminta anda untuk memilih komponen apa saja yang ingin anda gunakan. Pilihlah dengan settingan default, lalu klik tombol Next.

(2)

Gambar 2.2. Menginstal komponen XAMPP

Langkah 3: Lalu kemudian anda diminta untuk menentukan lokasi folder penyimpanan file dan folder xampp. Secara default akan mengarah ke c:\xampp. Jika anda ingin menyimpanya di folder lain bisa klik browse lalu simpan folder file sesuai dengan tempat yang anda inginkan.

Lalu, klik tombol Next.

Gambar 2.3. Pemilihan Letak Folder XAMPP.

Langkah 4: Setelah itu akan muncul layar berupa promo BitNami. Lalu, Hapus kontak centang pada tulisan learn more about BitNami. Klik tombol Next.

Gambar 2.4. Hapus centang BitNami for XAMPP.

Langkah 5: Setelah itu proses penginstalan telah berjalan dan tunggu beberapa saat sampai penginstalan komponen aplikasi selesai terinstal.

(3)

Tentang Penulis 253

Nanti mungkin kita akan diminta untuk menyetujui akses Firewall untuk komponen tertentu (seperti Apache) selama proses instalasi. setelah penginstalan selesai akan muncul tampilan berikut ini:

Gambar 2.5. Instalasi Xampp Selesai

Langkah 6: Proses Instal sudah selesai! Pilih Kotak centang ‘Do you want to start the Control Panel now?’ untuk membuka panel kontrol XAMPP.

B. Cara menggunakan XAMPP Control Panel

XAMPP Control Panel meberikan kita kontrol penuh atas semua komponen-komponen XAMPP yang telah kita instal. Kita dapat menggunakan Control Panel untuk memulai atau menghentikan modul yang berbeda, meluncurkan Unix shell, membuka Windows explorer sampai melihat semua operasi yang sedang berjalan di balik layar.

Gambar 2.6. Xampp Control Panel

Berikut ini adalah fungsi dari nomor-nomor yang terdapat pada gambar diatas:

1. Tempat log (keterangan) semua aktivitas.

2. (Apache) Alat untuk kontrol module xampp.

3. (MySQL) Alat untuk kontrol alat untuk menghubungan ke database.

4. Membuka panel konfigurasi.

(4)

5. Menampilkan semua proses di dalam server.

6. Membuka Unix Shell.

7. Digunakan untuk membuka windows explorer.

8. Menampilkan service yang sedang berjalan di balik layar.

C. Pembuatan Database

Sekarang kita masuk dalam pembuatan database. Untuk memulai membuat database kali ini yang akan kita gunakan adalah MySQL (DBMS) yang berada di PhpMyAdmin. yang tugasnya menagani administrasi MySQL berikut ini langkah-langkah untuk membuat tabel database.

Langkah 1: Buka aplikasi Xampp control panel yang telah kita instal sebelumnya dan kan muncul tampilan berikut ini.

2.7. klik start untuk mengaktifkan database

Langkah 2: Lalu klik pada kedua tombol start pada kedua fungsi untuk mengaktifkan Web server (Apache) dan MySQL setelah itu klik Admin pada MySQL agar terhubung ke PHPmyAdmin untuk mengoprasikan databases.

2.8. Klik Admin untuk masuk ke DBMS

Setelah itu akan tampil halaman berupa PHPMyAdmin yang merupakan halam administrasi MySQL melalui website seperti gambar di bawah ini :

(5)

Tentang Penulis 255

Sumber: Hasil Penlitian (2019)

2.9. Halaman PHPMyAdmin

Langkah 3: Lalu klik tombol pada menu database yang sudah di tandai lalu akan menuju ke tampilan seperti di bawah ini.

2.10. Tampilan Membuat Database

Langkah 4: Pada gambar di atas silahkan masukan nama database yang kalian inginkan kemudian klik tombol “Buat”. Jika anda ingin mengubah atau menganti nama database klik database anda sebelumnya lalu anda bisa klik tombol menu “operasi” seperti di bawah ini.

2.11. Klik Menu Pengaturan

Setelah anda klik tombol berikut akan tampil halaman seperti di bawah ini. Di menu ini anda dapat melakukan mengubah nama basis data, penghapusan database (Hapus basis data), pembuatan tabel (Buat tabel) dan sebagainya.

(6)

2.12. Mengubah Nama Database E. Cara Merelasikan Tabel

Sekarang telah masuk ke tahap perelasian antar tabel di dalam phpmyadmin database disini kami akan menjelaskan secara umum cara merelasaikan tabel-tabel database yang telah kita buat sebelumnya.

Berikut adalah contohnya, disini kami akan merelasikan tb_user dan tabel harian sebagai contoh perelasian antar tabel.

Langkah 1: Jalankan aplikasi xampp control panel. Lalu masuk ke halaman phpmyadmin lalu pilih database yang telah di buat disini kami menggunakan database a_matrik dengan merelasikan antar dua tabel yaitu tb_user dan tabel harian yang telah di buat sebelumnya sebagai contoh.

Langkah 2:Pertama-tama klik database plihlah tabel harian lalu pilih menu struktur dan di bawah struktur tersebut ada penambahan jumlah kolom dan posisi letak. lalu tambahkan kolom baru pada tabel harian seperti gambar di bawah ini :

Sumber : Hasil Penelitian (2019)

2.19. Membuat Kolom Baru Pada Tabel harian

Seperti gambar di atas tambah kan kolom pada tabel harian dengan 1 kolom dan kolom tersebut di letakan setelah id_hr lalu klik Kirim.

setelah itu isi lah data pada kolom tersebut sesuai dengan data pada primary key dalam tabel tbl_user lalu klik simpan seperti gambar berikut berikut ini:

2.20. Simpan Data ke Tabel harian

Langkah 3: jika data tersebut sudah tersimpan jadikan lah data id user tersebut menjadi indeks ataupun foreign key pada tabel harian tersebut agar dapat di relasikan pada tabel tbl_user seperti gambar di bawah ini :

(7)

Tentang Penulis 257

2.21. menjadikan id menjadi foreign key

Klik indeks pada gambar di atas dan klik ok pada menu pilihan. Lalu akan muncul tampilan seperti berikut ini:

2.22. menjadikan id menjadi foreign key

Langkah 4: Selanjutnya, pilih lah database a_matrik dan pilih menu lainya dan klik desainer seperti gambar berikut :

2.23. Memilih menu desainer untuk relasi

Setelah mengikuti instruksi seperti di atas maka akan muncul tampilan desianer untuk merelasikan antara tabel harian dan tabel tbl_user seperti berikut ini :

2.24. Tampilan Menu Relasi

(8)

Langkah 5: Untuk merelasikan kedua tabel tersebut klik buat relasi pada ikon yang sudah ditandai seperti gambar di atas lalu klik pada tbl_user id primary key lalu arahkan kursor ke arah id (FK) di dalam tabel harian. Lalu ada option pilihlah “OK” untuk merelasikan tabel:

2.25. Relasi On Delete dan On Update

Setelah selesai melakukan relasi seperti gambar di atas klik OK untuk melanjutkan dan akan menapilkan garis relasi seperti berikut ini :

2.26. Relasi Antar Tabel User dan Tabel Harian

2.2. Rancangan Form Master

A. Instalasi Codeigniter 3

Pada pembuatan form master, ada hal yang sangat panting sebelum membuat aplikasi yaitu dengan menginstal Codeigniter 3 di dalam file XAMMP. Seperti yang kita ketahui pada penjelasan sebelumnya fungsi framework codeigniter itu adalah mempermudah pengembang aplikasi dalam membuatan aplikasi. Maka dari itu untuk mendapatkan file-file asli dari codeigniter 3 kita perlu menguduhnya di web resmi codeigniter, dan anda dapat menuju pada link : https://www.codeigniter.com/.

Dari hasil file codeigniter yang telah di unduh yang berfomat .zip ekstrak file lalu salin semua file direktori codeigniter ke file local disk C lalu buka file XAMPP/htdocs. Setelah itu gantilah nama direktori tersebut dengan a_matrik atau sesuaikan dengan keinginan anda.

B. Instalasi Sublime Text 3

Setelah itu, untuk menjalankan direktori codeigniter yang telah kita buat dengan nama a_matrik diperlukannya code editor sublime text 3. Anda

(9)

Tentang Penulis 259

bisa mengunduh sublime text 3 pada web resminya pada link : https://www.sublimetext.com/3 dan unduh sesuai spesifikasi komputer/laptop anda. Setelah anda selesai mengunduh aplikasi

sublime text 3. Lalu instal aplikasinya proses dalam menginstal sublime text 3 cukup mudah hanya menekan tombol Next sampai proses instal selesai . setelah selesai jalankan aplikasi sublime text 3 yang telah anda instal. Lalu, cara untuk memasukan direktori a_matrik ke sublime text 3 dengan mengklik file lalu pilih Open folder seperti gambar di bawah ini:

2.27. Memasukan Direktori a_matrik ke Sublime Text 3

Setelah anda meng-Klik Open folder carilah file codeigniter yang telah di buat dengan nama a_matrik pada XAMMP/htdocs lalu klik a_matrik dan pilih select folder seperti gambar di bawah ini.

2.28. Menjalankan Folder a_matrik Pada Sublime Text 3

Setelah memilih file a_matrik tersebut akan muncul struktur codeigniter a_matrik pada sublime text 3 seperti di bawah ini.

2.29. Struktur Direktori Codeigniter Pada Sublime Text 3

(10)

C. Pengaturan Codeigniter, Database dan Boostrap

Pada kali ini kita perlu melakukan konfigurasi pada codeigniter, pengaturan database di codeigniter agar dapat tersambung ke database dan memasukan beberuapa kode Boostrap melalui link resmi boostrap.

1. Konfigurasi Base Url

Langkah 1: Konfigurasi Base URL pada Codeigniter berfungsi untuk menentukan alamat atau URL yang akan digunakan pertama kali saat menggunakan codeigniter pada web. Saat mengembangkan web, kita akan menggunakan Base URL seperti berikut : http://localhost/a_matrik. Ini adalah alamat yang bisa kita akses dari localhost.

Langkah 2: Cara untuk mengatur Base URL pada codeigniter adalah buka direktrori pada a_matrik dan pilih config/config.php lalu pada baris ke 26 ada $config [base_url] = ’’ ; lalu isilah nama seperti gambar di bawah ini:

2.30. Konfigurasi Base URL 2. Konfigurasi Autoload libraries

Konfigurasi autoload libraries pada codeigniter kita harus mengload libraries ke memori secara otomatis melalui autoload.php. Fungsi dari autoload libraries adalah untuk memanggil setiap class yang berada di dalam folder sistem. Fungsi autoload libraries yang digunakan disini adalah form_validation, session, dan database.

Cara untuk mengatur Autoload Libraries pada codeigniter adalah buka direktrori pada a_matrik dan pilih config/autoload.php lalu pada baris ke 61 $autoload [‘liblaries’] = array (); lalu isilah nama seperti gambar di bawah ini:

(11)

Tentang Penulis 261

2.31. Konfigurasi autoload liblaries 3. Konfigurasi Autoload helper

Konfigurasi autoload helper pada codeigniter kita harus memanggil helper ke memori secara otomatis melalui autoload.php. fungsi helper adalah fungsi yang akan membantu kita dalam berbagai hal, seperti : membuat form, mengakses url dan lain-lain. helper yang kita butuhkan dalam pembuatan template adalah helper url, form, text, file, string.

Cara untuk mengatur Autoload Helper pada codeigniter adalah buka direktrori pada a_matrik dan pilih config/autoload.php lalu pada baris ke 92 $autoload [‘helper’] = array (); lalu isilah nama seperti gambar di bawah ini:

2.32. Konfigurasi autoload helper 4. Pengaturan Database Codeigniter

Cara mengatur database pada di codeigniter adalah buka file project yang telah kita buat yang bernama a_matrik. Lalu pilih confiq/database.php seperti gambar di bawah ini :

2.33. Membuka File Settingan Database

Setelah membuka database.php lalu skrol ke bawah nantinya akan muncul tampilan seperti berikut ini dan isi setting database sesuaikan dengan gambar di bawah :

(12)

2.34. Pengaturan Database

Untuk username dan password tidak perlu di isi, sesuaikan dengan localhost atau phpmyadmin. Jika phpmyadmin mengunakan username dan password maka sangat perlu memasukan username dan password tersebut pada pengaturan database. Fungsi dari pengaturan database jika file sistem sudah terkoneksi pada database yang sudah di setting seperti gambar di atas maka tentunya data yang kita telah input ke sistem akan masuk juga ke database di phpmyadmin.

5. Pengaturan Boostrap

Setelah database telah diatur, selanjutnya kita bisa memasukan file boostrap pada pada file project yang kita buat. Disini kami menggunakan boostrap secara Online dengan hanya mengopi file pada alamat server boostrap https://getbootstrap.com/ dan kami menggunakan boostrap versi terbaru yaitu 4.3.1 seperti berikut:

2.35. Boostrap Online

Seperti gambar diatas sesuai yang di tandai merupakan versi boostrap disini kami memilih versi yang terbaru latest version 4.3.1 klik pada tanda tersebut nantinya akan menuju ke halaman alamat server penyimpanan library boostrap online seperti gambar berikut:

(13)

Tentang Penulis 263

2.36. Source Boostrap library

Komponen Boostrap yang kami gunakan adalah HTML5 doctype, Boostrap CSS , Responsive meta tag dan bebrapa menu navigasi dan berbagai macam komponen. Untuk lebih jelasnya pada gambar kiri merupakan library boostrap yang berisikan beragam komponen- komponen boostrap dan juga berisikan kode dan penjelasan-penjelasan yang bisa kapan saja digunakan untuk project kerja anda. Untuk project kami, kami memilihi komponen pada bagian kanan pada gambar di atas bagian boostrap standart setting pilih lah Starter Template lalu akan muncul gambar seperti ini:

2.37. Starter Template Boostrap

Untuk memasukan komponen-komponen boostrap berikut ke codeigniter perlu membuat folder baru bernama template pada folder view di codeigniter. Klik kanan pada folder view lalu pilih new folder dan buat folder template dan buat file baru pada tamplete dengan nama header.php dan footer.php. lalu sisipkan beberapa komponen- komponen boostrap yang kita inginkan pada file-file tersebut. Berikut ini adalah penjelasan-penjelasan singkat dari kode-kode tersebut :

a. HTML 5 doctype

2.38. Boostrap Setting HTML5

digunakan untuk menyatakan bahasa halaman Web atau sebagian dari halaman Web. Hal ini dimaksudkan untuk membantu mesin pencari dan browser.

b. Boostrap CSS

(14)

2.39. Format Boostrap CSS

Format boostrap CSS untuk memudahkan kita dalam memperhias berbagai tampilan halaman apikasi lebih rapi dan menarik dan mengaktifkan komponen-komponen boostrap agar dapat berfungsi.

c. Responsive meta tag

2.40. Boostrap Responsive Meta Tag

Fungsi boostrap ini berfungsi menyesuai kan layar pada setiap browser dan mobile devices.

d. JS (java Script)

2.41. Boostrap Optional JavaScript

Fungsi JavaScript merupakan bahasa pemograman script yang interactive dan dinamis, seperti gambar di atas merupakan kode fungsi javascript yang telah di sediakan pada web boostrap yang siap di gunakan.

D. Pembuatan Form Master

Selanjutnya kita akan masuk dalam proses pembuatan form yang ada di dalam sistem A-MATRIK berikut adalah beberapa bentuk form dalam sistem seperti :

1. Membuat Form Master Login

Pertama-tama yang harus dilakukan dalam membuat form login adalah membuat folder login di dalam project a-matrik folder view dengan

(15)

Tentang Penulis 265

mengklik kanan pada folder view lalu pilih new folder dan berilah nama dengan nama login pada folder login tersebut klik kanan pada folder login pilih new file dan beri nama file dengan login.php untuk menyisipkan kode-kode untuk membuat form login.

2.42. Cara Membuat Folder dan File pada Dirketori a_matrik Berikut adalah tampilan yang akan kita buat yaitu form master login

2.43. Form Master Login

Selanjutnya merupakan penyisipkan kode-kode pada login.php untuk membuat form master login seperti perwarnaan backgorund, nama halaman login, kolom username dan kolom password, tombol login dan tombol reset, ketikan kode-kode tersebut seperti gambar dibawah ini:

2.44. Title Halaman login.php

Berikut merupakan judul pada halaman web pada halam form login dan berikut tampilan pada web yag di buat:

2.45. Title Halaman Login

Sekarang lanjutkan menyisipkan/mengetikan kode-kode CSS berikut untuk membuat tata letak form, ukuran kolom, ukuran form,

(16)

perwarnaan backgorund, ukuran dan perwarnaan tombol login dan tombol reset dan masukan kode kode ter sebut pada file login.php yang telah di buat seperti gambar kode berikut ini:

2.46. Pewarnaan Background

2.47. Pewarnaan Background

Seperti gambar diatas merupakan pewarnaan latar belakang, tata letak form, ukuran kolom dan pewarnaan tombol dll. Sekarang melanjutkan pembuatan kolom dan tulisan pada form tersebut pada tanda yang di tandai seperti di bawah ini:

2.48. Title Halaman Login

(17)

Tentang Penulis 267

2.49. Kode Tombol Login dan Reset login.php

Pada kode di atas juga menampilkan fungsi tombol login dan reset.

Berikut ini adalah merupakan fungsi dari tombol dari login dan reset:

1. Tombol Login

Tombol ini berfungsi sebagai penghubung untuk masuk kesistem ketika memasukan username dan password.

2. Tombol Reset

Tombol ini berfungsi sebagai penghapus jika salah dalam melakukan penginputan tulisan.

Pada sistem aplikasi ini banyak sekali hak akses user yang dapat melakukan login ke sistem, maka dari itu kita perlu membuat hak akses berbeda agar form login dapat memebedakan user yang dapat masuk ke sistem dan masuk ke halaman yang berbeda dan user tersebut terdiri dari admin, pelapor, maint dan visitor. Maka dari itu kita perlu membuat hak akses yang berbeda seperti nama user di atas.

Pada penjelasan di atas kita perlu membuat file baru di folder login yang berada di folder view dan buat lah file tersebut dengan nama file user.php seperti berikut:

2.50. Membuat File user.php

Dan sisipkan atau ketikan kode-kode berikut ke dalam file user.php yang telah di buat seperti berikut masukan terlebih dahulu kode boostrap CSS ke dalam file user.php seperti berikut:

(18)

2.51. File Boostrap user.php

Lalu lanjutkan menyisipkan atau ketikan beberapa kode-kode fungsi dari hak akses user seperti berikut ini:

2.52. Hak Akses User user.php

Dan lanjutkan dengan menyisipkan boostrap JavaScript yang bisa di ambil kodenya melalui file footer.php pada folder view template yang telah dibuat sebelumnya pada bagian bawah seperti gambar dibawah ini:

2.53. Boostrap Footer user.php

Agar data-data atau kode dan hak akses pada user tersebut dapat berfungsi ke dalam sistem perlu menambah fungsi model agar dapat terhubung ke database.

(19)

Tentang Penulis 269 Model

Pada class model ini biasanya digunakan untuk mempresentasikan struktur data yang telah kita buat dan berisikan fungsi mengambil data, memasukan data dan mengupdate data pada database.

Berikut ini adalah cara membuat model class pada file project direktori yang di buat. Pertama, pada folder model di direktori a_matrik buat lah file model dengan nama file M_login.php berikut tampilannya :

2.54. Membuat File M_login.php

Setelah selesai membuat file model M_login.php di dalam folder model pada direktori a_matrik. Masukan kode-kode berikut berikut ke file M_login.php:

2.55. Kode Model M_login.php

Setelah membuat M_model.php selesai buat lah class login pada folder Controller pada direktori a_matrik agar dapat memanggil fungsi dari kedua fungsi dari folder model (M_login.php) dan folder view, folder login (login.php dan user.php) untuk memperoses untuk menghasilkan halaman web.

Controller

(20)

Berfungsi sebagai perantara atau memangil fungsi antara model dan view dan berfungsi untuk menentukan data dari permintaan user untuk menghasilkan proses dari aplikasi.

Berikut ini adalah cara membuat file pada folder controller di folder project pada direktori a_matrik. Pertama-tama klik kanan pada folder controller pada direktori a_matrik. Lalu, klik new file buat lah file pada folder tersebut dengan nama login.php seperti gambar berikut ini :

2.56. Membuat File login.php di Folder Controller

Setelah selesai membuat file login.php masukan atau ketikan data atau kode berikut ke dalam file login.php yang telah di buat sebelumnya.

Seperti contoh berikut ini:

2.57. Kode Controller login.php

Setelah selesai membuat file Controller login.php. Cobalah masuk ke halaman login yang telah di buat dan masukan username dan password sesuai dengan nama user dan hak akses yang telah dibuat pada a_matrik/view/login/user.php. tapi sebelum itu diperukan pembuatan tampilan halaman dari setiap hak akses user untuk masuk ke halaman sistem yang nantinya akan dijelaskan pada sesi berikutnya

(21)

Tentang Penulis 271

secara bertahap. Berikut ini adalah tampilan form pada saat setiap user login seperti gambar berikut ini:

1. Tampilan Form Master Admin

2.58. Form Master Admin

Pada gambar form master admin di atas terdapat bermacam-macam aksi berupa :

a. Header : List Peralatan, Postingan, Work Order, Mingguan, Harian, dan Lifetime Alat.

b. Aksi : Terdapat Tambah data, Cetak PDF, Pencarian Data, Tombol edit, detail, dan hapus.

Seperti gambar diatas menunjukan menu-menu yang dapat di akses oleh user admin. Disini admin dapat melakukan aktivitas atau mengelola aplikasi sistem secara keseluruhan dalam proses CRUD (Create, Read, Update, delete).

2. Tampilan Form Master Pelapor

2.59. Form Master Pelapor

Pada gambar form master pelapor diatas terdapat bermacam-macam aksi berupa :

(22)

a. Header : List Peralatan, Postingan, Work Order, dan Mingguan.

b. Aksi : Terdapat Tambah data, Cetak PDF, Pencarian data, Tombol edit, dan detail.

Seperti gambar diatas menunjukan menu dan aksi yang dapat di akses oleh user pelapor.

3. Tampilan Form Master Maintenance

2.60. Form Master Maintenance

Pada gambar form master maintenance diatas terdapat bermacam- macam aksi berupa :

a. Header : List Peralatan, Postingan, Work Order, Mingguan, Harian, dan Lifetime Alat.

b. Aksi : Pencarian data, Tombol edit, dan detail.

Seperti gambar diatas menunjukan menu dan aksi yang dapat di akses oleh user anggota maintenance.

4. Tampilan Form Visitor

2.61. Form Master Visitor

Pada gambar form master Visitor terdapat bermacam-macam aksi berupa :

a. Header : List Peralatan, Postingan, Work Order, Mingguan,Harian, dan Lifetime Alat.

b. Aksi : Pencarian data, Tombol catatan, dan detail.

Seperti gambar diatas menunjukan menu dan aksi yang dapat di akses oleh user Visitor.

(23)

Tentang Penulis 273

Seperti gamabr diatas merupakan tampilan-tampilan form setelah melakukan login dari setiap user dengan hak akses yang berbeda.

Sekarang lanjut dalam pembutan semua menu header pada sistem A- MATRIK pada gambar berikut ini :

2. Membuat Menu Form Header

2.62. Form Menu Header

Berikut adalah kode-kode untuk membuat menu header pada sistem A- MATRIK. Lalu ketikan atau sisipkan kode tersebut dalam file direktori a_matrik/templates/header.php. Pada penjeleasan sebelumnya kita sudah membuat file bernama header.php pada penjelasan pengaturan boostrap. Maka dari itu masukan kode kode berikut ke dalam file header.php seperti di bawah ini:

2.63. Kode Form Menu Header header. php

Kode diatas pada baris 1 sampai 13 memanggil fungsi boostrap, baris ke 15 nama title halaman web dan pada baris ke 22 merupakan kode untuk menampilkan judul header. dan masih lanjut pada file header.php sekarang masukan kode berikut ini:

(24)

2.64. Kode Form Menu header.php

Pada kode diatas merupakan kode header.php pada baris ke 35 dan 47 menampilkan menu list peralatan dan menu postingan lanjutkan lagi ke kode menu berikutnya:

2.65. Kode Form Menu header. php

Pada kode diatas pada baris ke 55 sampai 81 merupakan kode program untuk menampilkan menu header work order, mingguan, harian, lifetime alat dan tombol logout.

Setelah pembuatan kode diatas pada beberapa menu memiliki tampilan yang dinamis seperti pada menu list peralatan sama halnya dengan

(25)

Tentang Penulis 275

menu postingan dengan menggunakan tampilan Dropdown seperti di bawah ini:

2.66. Tampilan Dropdown

Lihatlah pada kode sebelumnya pada baris ke 33 sampai 43 pada header.php merupakan kode-kode untuk menampilkan menu dropdown seperti diatas.

Pada file header.php jika anda ingin menon-aktifkan fungsi menu-menu yang berada di file header.php dengan menyesuaikan dengan hak akses user maka anda tinggal menon-aktikan beberapa kode-kode pada file header.php seperti contoh pada tampilan form pelapor disana tidak ada menu header seperti harian dan lifetime alat. Untuk dapat membedakan nya dengan mudah, buat file baru pada folder templates. Disini kami membuat dengan nama file sesuai nama user seperti contoh header_plr.php khusus untuk pelapor dan copy kode-kode pada file header.php dan masukan ke file header_plr.php. Lalu, non-aktifkan beberapa kode sesuai hak akses untuk pelapor seperti gambar berikut:

header_plr.php

2.67. Menon-aktifkan Menu Header Khusus Pelapor

Pada gambar diatas pada baris 66 sampai 71 merupakan menu yang aktif pada user pelapor dan pada baris 73 sampai 81 merupakan menu yang di non-aktifkan dengan memberikan tanda yang di tandai seperti diatas. pada menu header pelapor sesuai dengan hak akses pelapor.

Untuk pembuatan header pada user lainnya ikuti langkah sebelumnya.

Sekarang kita akan melanjutkan membuat tampilan untuk data-data list Peralatan seperti list belting, list beraing, list pompa dan list elmot, Yang berisikan data nama-nama alat yang bersifat baku dan datanya sudah di

(26)

panggil melalui database menggunakan file excel pada setiap tabel masing-masing pada list peralatan yang telah kita buat sebelumnya, jadi di sini kita hanya menampilkan daftar halamannya saja pada sistem A- MATRIK. berikut ini adalah tampilan ke empat list peralatan tersebut:

3. Menu Header List Peralatan 1. list Belting

2.68. Tampilan Data belting 2. List Bearing

2.69. Tampilan Data bearing 3. List Elmot

(27)

Tentang Penulis 277

2.70. Tampilan Data elmot 4. List Pompa

2.71. Tampilan Data pompa

Supaya data-data keempat list peralatan dapat tampil ke dalam sistem A-MATRIK maka kita perlu membuat data kode pada file a_matrik untuk menampilkan data tersebut.

Pertama-tama buat lah file model dengan nama M_pages.php pada direktori a_matrik di folder model seperti gambar berikut ini:

2.72. Membuat M_pages Model

(28)

Setelah itu masukan kode-kode berikut ini ke dalam file M_pages.php untuk memanggil tabel data pada setiap list peralatan yang telah dibuat :

2.73. Membuat Model M_pages.php

Pada kode diatas pada merupakan kode model pada file M_pages.php yang berfungsi memanggil data pada database menggunakan fungsi query pada setiap tabel list peralatan seperti tabel bearing, belting, elmot dan pump.

Setelah selesai membuat file model M_pages.php selanjutnya buatlah file view di folder view dengan nama file bearing.php, belting.php, elmot.php dan pump.php pada direktori a_matrik seperti gambar berikut ini :

2.74. Membuat File View Peralatan

Setelah itu masukanlah kode-kode program berikut ini pada file bearing.php untuk menampilkan data list bearing:

(29)

Tentang Penulis 279

2.75. Membuat kode View bearing.php

Pada kode diatas pada baris ke 1 sampai ke 17 merupakan fungsi kode untuk menampilkan judul title halaman.

2.76. Membuat kode View bearing.php

Pada baris ke 27 sampai dengan 45 merupakan fungsi kode untuk menampilkan nama judul pada tabel.

2.77. Membuat kode php View bearing.php

(30)

Dan pada baris ke 47 sampai dengan 65 merupakan fungsi kode untuk memanggil data menggunakan variable untuk menyimpan permasing- masing data untuk digunakan fungsi nya untuk isi tabel seperti kode berikut ini :

2.78. Membuat Kode php View bearing.php

Setelah selesai membuat file view M_pages.php selanjutnya membuat rancangan file controller di folder controller untuk memanggil fungsi dari model dan view yang seblumnya dibuat agarv dapat tampil ke sistem A- MATRIK. Buatlah nama file controller dengan nama pages.php pada direktori a_matrik seperti gambar berikut ini :

2.80. Membuat kode php controller pages.php

Seterusnya lanjutkan menambah kode-kode seperti diatas untuk menapilkan data lainya seperti list bearing, list pompa dan list elmot sesuaikan dengan rancangan kode-kode model dan view yang sebelumnya yang telah di buat. Untuk kali ini diisini kami akan menjelaskan hanya satu rancangan saja. Untuk selanjutnya pada list peralatan yang lainya anda bisa kembangkan sendiri dengan mengikuti kode diatas dengan sesuaikan dengan tabel database list peralatan yang telah di buat sebelumnya. Jika sudah selesai membuat list peralatan.

Sekarang lanjutkan membuat rancangan atau tampilan pada menu postingan seperti berikut ini:

4. Menu Header Postingan

(31)

Tentang Penulis 281

Selanjutnya kita akan membuat rancangan dan tampilan menu pada menu postingan yang ada pada sistem A-MATRIK. Disini menu postingan memiliki menu dropdown seperti contoh berikut ini :

2.82. Menu Dropdown Postingan

Pada menu postingan gambar diatas memiliki dua menu tambahan seperti Blog dan Create. Dsini akan dijelaskan secara singkat fungsi dari kedua menu tersebut pada sistem A-MATRIK seperti berikut :

1. Blog : Berfungsi sebagai menu yang berfungsi menampil data kabar berita yang di buat melalui menu Create.

2. Create :Berfungsi sebagai menu yang berfungsi membuat data kabar berita dan tersebut datanya akan ditampilkan melalui menu blog.

Setelah mengetahui secara singkat fungsi dari menu tersebut, maka hal pertama yang akan kita lakukan adalah membuat file model untuk membuat atau merancang menu create. Pertama-tama buat lah file model pada file direktori a_matrik seperti gambar berikut ini:

2.83. File Direktori M_post.php

Setelah selesai membuat file model M_post.php pada direktori a_matrik maka ikuti atau masukanlah data kode berikut ini di dalam model M_post.php seperti di bawah ini:

(32)

2.84. File Kode Data Model Menu Postingan M_post.php

Pada kode di atas function _construct() pada baris ke 8 sampai 11 merupakan fungsi model untuk dapat terhubung ke database. Pada baris ke 13 sampai 17 merupakan fungsi membuat data blog agar tampil lebih dulu saat ada postingan baru dan pada baris ke 18 sampai 20 berfungsi sebagai membaca data pada database agar dapat seluruh data postingan pada database yang teah dibuat pada menu create. Dan pada baris ke 22 dan 23 berfungsi sebagai pemanggil data secara tepat untuk mencari dimana tabel posts yang menyimpan data blog. Sekarang selanjutnya kita akan memasukan kode-kode berikutnya ke dalam file M_post.php seperti di bawah ini:

Pada kode data di atas pada baris ke 26 sampai 37 yang terdari dari data judul, data isi dan data gambar dan juga merupakan fungsi model utuk menginput data blog yang telah dibuat ke database pada tabel posts.

Slanjutnya kita lanjutkan ke fungsi model berikutnya seperti kode berikut ini :

(33)

Tentang Penulis 283

Pada kode di atas pada baris 39 sampai 43 pada function delete_post() merupakan fungsi model untuk menghapus data blog yang telah dibuat di dalam database. Pada baris ke 44 sampai 54 pada function ubah_post() berfungsi mengubah data pada database.

Pada kali ini pembuatan kode model pada M_post.php sudah selesai dibuat, selanjutnya kita akan membuat file view yang merupakan tampilan data menu blog dan create. Buat lah file baru pada folder view seperti create.php, index.php, edit.php, view.php dan masukan kode- kode berikut ini ke dalam file-file tersebut seperti di bawah ini :

a. index.php

2.87. File Kode Data view Menu Postingan index.php

Pada kode di atas merupakan kode untuk menampilkan tampilan halaman utama pada menu blog pada sistem A-MATRIK dan di lengkapi fungsi tombol read more pada baris ke 12. Berikut adalah tampilanya pada sistem seperti berikut ini :

(34)

2.88. Contoh Tampilan Halaman Utama Menu Blog

Selanjutnya masukan kode berikut ini untuk menampilkan tampilan setelah meng-klik pada tombol read more seperti gambar di atas masukan kode-kode berikut ini pada file view.php untuk menampilkan halaman read more seperti bawah ini:

b. view.php

2.89. Kode Data view Menu Postingan view.php

Pada kode diatas merupakan kode untuk menampilkan tampilan halaman utama pada tombol read more pada halaman read more ini juga dilengkapi dengan fungsi tombol Edit dan Delete, untuk mengubah dan menghapus data pada postingan blog pada baris ke 12 dan 13.

Berikut adalah tampilanya pada sistem seperti berikut ini:

2.90. Contoh Tampilan read more untuk Data Satu Postingan

(35)

Tentang Penulis 285

Selanjutnya kita akan membuat tampilan halaman untuk fungsi tombol edit. Masukan atau ikuti kode berikut ini pada file edit.php seperti berikut ini :

3. edit.php

2.91. Contoh Kode Untuk Menampilkan Fungsi Edit

Pada kode diatas merupakan kode untuk memampilkan data edit pada menu blog pada fungsi read more berikut tampilannya pada sistem:

2.92. Contoh Tampilan Halaman Edit Blog

Pada gambar diatas merupakan tampilan halaman edit yang terdiri dari kolom judul (title), isi dari blog (body) menggunakan CKEditor dan tombol submit jika sudah selesai mengedit blog. Untuk CKEditor akan dijelaskan pada view create.php.

Kali ini pembuatan tampilan pada menu blog sudah selesai. Selanjutnya membuat tampilan untuk halaman utama menu create, masukan atau ikuti kode-kode berikut ini pada file create.php seperti contoh berikut ini:

d. create.php

(36)

2.93. Kode Data view Menu Postingan create.php

Pada kode di atas merupakan kode untuk menampilkan tampilan halaman utama pada menu create pada sistem A-MATRIK yang terdiri dari kolom title pada baris ke 8 ke 11 , tombol upload gambar pada baris 19 sampai 22, tombol submit pada baris ke 23 dan di lengkapi dengan fitur CKEditor pada baris ke 13 sampai 17. Apa itu CKEditor ? CKEditor adalah form untuk membuat postingan atau text untuk membuat blog dan semacamnya berikut ini contoh tampilan halaman utama create dan gambaran fitur CKEditor:

2.94. Contoh Tampilan Halaman Create

Pada gambar diatas pada bagian body merupakan fitur CKEditor yang bisa anda download di halaman resminya seperti berikut:

https://ckeditor.com/download/ atau anda bisa mengambil atau menyalin link menggunakan script CDN dari website resminya agar website anda berjalan lebih cepat dan lancar. seperti contoh gambar berikut ini copy link berikut ini ke dalam file header.php yang telah kita buat sebelumnya:

2.95. Contoh Tampilan Web Resmi CKEditor CDN Script

(37)

Tentang Penulis 287

Berikut ini adalah tampilan jika anda telah menyalin CDN script tersebut ke file header.php pada direktori codeigniter dan ikuti kode pada kolom tersebut berikut ini :

2.96. Contoh Kode CKEditor CDN Script Pada Header.php Lalu pada file footer.php masukan atau ikuti kode berikut ini untuk memanggil fungsi CKEditor pada file create.php agar dapat tampil pada menu create pada sistem A-MATRIK seperti berikut ini :

2.97. Contoh Kode Ubah Nama Value CKEditor Pada Footer.php Pada kode diatas merupakan fungsi script untuk mengubah data CKEditor menjadi data value untuk digunakan atau disisipkan pada file view edit.php dan create.php yang memiliki fitur body. Anda bisa mengecek kode sebelumnya pada baris ke 16 pada edit.php dan baris ke15 pada create.php disana ada kode bernamakan editor1 berupa value yang digunakan untuk menampilkan fungsi dari CKEditor.

Setelah selesai melakukan pembuatan view pada kedua menu postingan, sekarang lanjutkan dalam pembuatan controller untuk memanggil fungsi view dan model yang telah dibuat agar dapat berjalan dengan baik.

Buatlah file baru pada folder controller dengan nama posts.php masukan atau ikuti data kode berikut ini ke file posts.php seperti contoh berikut ini:

(38)

2.98. Kode Controller Index posts.php

Masukan dan ikuti kode di atas pada baris ke 17 sampai 26 yang merupakan kode controller untuk memanggil view index dan model function get_post() untuk menampilkan tampilan semua data post yang telah dibuat.

Masih di dalam file posts.php masukan kode berikut ini untuk menampilkan data view view.php dan model get_post($slug) untuk membuka atau memanggil salah satu postingan seperti berikut:

2.99. Kode Controller function Index posts.php

Pada kode controller function view di atas merupakan fungsi controller untuk memanggil fungsi view untuk memanggil untuk menampilkan salah satu post dan fungsi model yang meanggil salah satu data pada database untuk di manipulsi. Selanjutnya masukan kode berikut ini pada fungsi delete, edit dan update seperti berikut:

2.100. Kode Controller function Delete, Edit, Update posts.php

(39)

Tentang Penulis 289

Pada kode diatas meupakan fungsi kode untuk memanggil fungsi view dan model hapus data (delete), ubah data (edit), dan update pada sistem maupun database. Selanjutnya ikuti atau masukan fungsi create untuk memanggil fungsi view dan model untuk mengoprasikan pembuatan blog.

2.101. Kode Controller function Create posts.php

Pada kali ini pembuatan menu list peralatan dengan sub menu blog dan create sudah selesai, selanjutnya membuat form master user.

5. Membuat Form Master User

Pada form master user kali ini kami akan menampilkan form dari user admin karena admin memiliki hak akses penuh pada sistem seperti melakukan proses CRUD (create,read,update,dan delete). dalamnya : a. Membuat Model pada direktori a_matrik

Hal pertama yang harus di lakukan dalam pembuatan form master user agar fungsi CRUD berjalan dengan baik adalah membuat file model Laporan_model.php pada folder model di direktori seperti berikut a_matrik/model/Laporan_model.php. setelah membuat file tersebut masukan kode fungsi-fungsi CRUD pada file Laporan_model.php seperti berikut:

1. getAllLaporan

2.102. Membuat kode Model Laporan_model.php

Pada getAlllaporan() ini adalah merupakan fungsi model untuk memanggil semua data tb_lapor yang berada pada database agar data tersebuat dapat terbaca oleh sistem.

2. tambahDataLaporan

(40)

2.103. Membuat kKode Model Laporan_model.php

Pada tambahDataLaporan() ini adalah berfungsi sebagai penginputan data pada form tambah yang dibuat supaya inputan langsung masuk ke database.

3. hapusDataLaporan

2.104. Membuat Kode Model Laporan_model.php

Pada hapusDataLaporan-() diatas adalah befungsi sebagai menghapus data laporan yang sudah di buat menggunakan fungsi query.

4. ubahDataLaporan

2.105 Membuat Kode Model Laporan_model.php

Pada ubahDataLaporan() diatas adalah berfungsi sebagai mengubah data pada laporan yang telah di buat menggunakan fungsi query.

(41)

Tentang Penulis 291 5. cariDataLaporan

2.106. Membuat Kode Model Laporan_model.php

Pada cariDataLaporan() diatas adalah berfungsi sebagai mencari data laporan menggunakan query dengan memasuk kan keyword atau kata kunci agar lebih mudah mencari data.

Pada data model laporan yang telah di buat seperti di atas merupakan cangkupan dari semua fungsi dari setiap model. Selebihnya pada model yang tersisa seperti mingguan_model.php, M_harian.php dan M_lifetime.php pada penjelasan model-model berikut akan di jelaskan pada sesi berikutnya.

b. Membuat View Menu Laporan

Pada sebelumya kita telah membuat fungsi model dari data laporan yang merupakan fungsi data agar dapat melakukan CRUD (create, read, update ,dan delete) pada form laporan (Work Order). Berikut kami akan membuat tampilan pada form master user laporan.

1. Laporan Work Order

(42)

2.107. Tampilan form user Work Order Pada menu work order memiliki fungsi berupa :

1. Tambah data Work Order 2. Tombol Cetak PDF

3. Tombol pencari

4. Tombol Edit menampilkan flashdata (data berhasil diubah) 5. Tombol Detail

6. Tombol Hapus menampilkan flashdata (data berhasil dihapus) 7. Tabel

Buat lah file tampil.php pada a_matrik/view/laporan/tampil.php untuk menampilkan data seperti diatas. Pada baris 2 sampai 15 menampilkan fungsi flashdata seperti gambar di bawah ini:

2.108. fungsi Flashdata

Dan berikut merupakan kode-kode dari fungsi flashdata untuk di masukan ke dalam file tampil.php

2.109. Kode View Menu Laporan tampil.php

Pada kode diatas merupakan kode untuk menampilkan flashdata / pesan singkat pada menu laporan.

(43)

Tentang Penulis 293

Lanjutkan pada file tampil.php dengan memasukan kode utntuk tombol tambah,pencarian dan cetak data.

Selanjutnya masukan kode 42 sampai 49 untuk menampilkan pesan flashdata jika tidak ada data pada menu work order.

Selanjutnya, pada kode urutan 53 sampai 66 merupakan kode untuk menampilkan judul tabel pada menu work order.

Pada kode berikutnya masukan kode pada file tampil.php kita akan menampilkan data isi dari tabel ini seperti di berikut ini :

(44)

Pada kode diatas pada baris ke 71 sampai 86 merupakan kode program untuk menampilkan data isi tabel dan ukuran tabel dan menampilkan beberapa tombol aksi seperti edit, detail, dan hapus. Pada baris ke 87 samapi 92 merupakan fungsi tag penutup kode program.

Jika sudah selesai memasukan kode-kode berikut ke dalam file tampil.php. Selanjutnya, pada tombol tambah data Work Order pada saat di klik akan muncul berupa form tambah data work order dan begitu juga pada tombol edit akan menampilkan form ubah data work order dan juga pada tombol detail akan menampilkan rincian data saat menginput data work order. Berikut contohnya tampilan tersebut :

a. Form Tambah Data Work Order

2.113. Form Tambah Data Work Order

Pada gambar diatas merupakan form tambah work order yang berisikan kolom-kolom seperti kode laporan, nama pelapor, tanggal, jenis

(45)

Tentang Penulis 295

kerusakan, PIC, status, dan di tambah dengan tombol tambah data dan tombol kembali. Untuk membuat form seperti diatas buat lah file baru pada direktori a_matrik/view/laporan/tambah.php. Sisipkan kode- kode ke dalam file tersebut ke dalam file tambah.php Seperti berikut ini:

2.114. Form Tambah Kode Otomatis Data Work Order

Kode ini berfungsi sebagai pemberian kode otomatis dan penamaan didalam kolom seperti gambar di bawah ini:

2.115. Penamaan Data di Dalam Kolom

Selanjutnya kita lanjutkan memasukan kode untuk membuat form tambah work order yang berisikan kode menampilkan judul kolom seperti kode wo, nama pelapor, tanggal, jenis kerusakan, PIC, status dan station seperti berikut ini :

(46)

2.116. Form Tambah Data Work Order

Lanjutkan memasukan kode pada file tambah.php untuk meanampilkan fungsi optional pada kolom status seperti berikut ini:

2.117. Optional status

Gambar diatas merupakan tampilan optional status. Berikut ini adalah kode-kode dari fungsi kode optional status tersebut:

2.118. Kode Program Optional status

Pada kolom station juga berisikan optional-optional berikut tampilanya:

(47)

Tentang Penulis 297

2.119. Optional Station

Selanjutnya buatlah file controller pada folder controller pada direktori a_matrik dengan nama file laporan.php. klik kanan pada folder controller lalu klik new file dan berinama file tersebut dengan nama laporan.php. lalu buka file tersebut melalui direktori a_matrik/controller/laporan.php sisipkan atau ketikan data pada file laporan.php sepert berikut ini:

2.128. Kode program controller

Befungsi untuk memanggil fungsi userdata dan mengambil data file model laporan dan mengaktifkan fungsi form validasi dan fungsi cetak PDF.

2.129. Kode program controller Tambah laporan.php

(48)

Seperti data di atas adalah fungsi untuk memanggil tampilan halaman tombol tambah agar menuju ke halaman form tambah data di laporan work order.

Sekarang masukan data untuk memanggil tampilan halaman form ubah pada data laporan work order pada baris ke 112 berfungsi memanggil fungsi model agar pada saat pengubahan data di database dapat berubah seperti berikut ini:

2.130. Kode program controller Ubah laporan.php

Berikut masukan data berikut untuk memanggil tampilan halaman form detail pada data laporan work order.

2.131. Kode program controller Detail laporn.php

2.3. Rancangan Form Data Maintenance

Setelah kita membuat rancangan form master, sekarang kita membuat rancangan data maintenance pada aplikasi A-MATRIK. Form rancangan maintenace pada A-MATRIK yang akan kita buat adalah merupakan proses penerimaan data (harian) dari data laporan yang di buat oleh pelapor dan laporan kerja mingguan dan dengan data tersebut digunakan untuk penjadwalan, perhitungan atau estimasi (lifetime alat) kapan pergantian atau perbaikan selanjutnya dilakukan pada peralatan pabrik berdasarkan beberapa ketentuan seperti jam olah dan standart bujet olah. Seperti rancangan yang telah di jelaskan sebelumnya data yang dimaksud adalah data maintenance harian dan data maintenance lifetime alat.

(49)

Tentang Penulis 299

Untuk Pembuatan Form Data Maintenance yang akan di jelaskan merupakan salah satu contoh saja dalam proses pembuatan form data maintenance.

Dalam proses pembuatan form data maintenance kita akan menggunakan konsep MVC (Model-View-Controller) seperti yang telah di jelaskan pada bab sebelumnya. Maka dalam alur pembuatan data maintenanace ini, akan di ikuti dengan konsep Model, View dan Controller. Langsung saja akan di jelaskan proses pembuatan form data maintenance pada aplikasi A-MATRIK.

A. Membuat Data Maintenance Harian

Data maintenance harian merupakan data yang akan digunakan untuk proses penjadwalan atau perhitungan pada proses lifetime alat. Ketika pelapor melaporkan data kerusakan alat, admin akan membuat data Harian melalui proses penginputan data sesuai dengan data yang telah di berikan oleh pelapor, dan data nya akan di gunakan untuk di berikan kepada anggota maintenance untuk dikerjakan. Jika data tersebut telah di kerjakan oleh anggota maintenance. Kemudian data tersebut akan digunakan sebagai acuan untuk membuat data maintenance lifetime alat.

Adapun tampilan data maintenance harian yang dapat kita lihat seperti gambar di bawah ini :

2.132. Tampilan Form Data Maintenance Harian

Langkah awal untuk melakukan pembuatan tampilan seperti tampilan di atas yaitu perlu melakukan fungsi model pada direktori a_matrik pada gambar diatas memiliki fungsi-fungsi yaitu seperti berikut ini :

1. Fungsi Tombol Tambah Data harian

(50)

2. Fungsi Cetak Data PDF 3. Fungsi Tombol Cari 4. Fungsi Tombol Edit 5. Fungsi Tombol Detail 6. Fungsi Tombol Hapus

Langkah Pertama yang harus dilakukan dalam pembuatan tampilan fungsi proses pada fungsi tombol diatas, pertama-tama menggunakan konsep MVC (model-view-controller) disini kita akan membuat fungsi model terlebih dahulu.

Seperti yang telah di jelaskan dalam pembuatan teknologi informasi dalam menggunakan framework dalam proses pembuatan aplikasi ini adalah menggunakan konsep MVC (model-view-controller) agar dapat memahami proses pengodingan ataupun pengkodean. Berikut langkah- langkah pembuatan data maintenance Harian:

Pertama buat lah file model pada direktori a_matrik seperti ini buka file direktori a_matrik/model/M_Harian.php. untuk lebih jelas lagi lihatlah contoh seperti gambar berikut ini :

2.133. Direktori Model A-MATRIK

Selanjutnya kita akan mengetikan atau menyisipkan kode pada file model. Untuk mengaktifkan fungsi pada tombol yang telah di buat pada tampilan di atas. Berikut adalah pengkodeannya :

1. Membuat File Model M_Harian.php

Pada langkah pertama kita akan membuat file model terlebih dahulu yaitu pertama buka file direktori a_matrik/models/M_Harian.php.

Lalu buka pada file M_Harian.php. Pada model ini kita akan membuat proses pembuatan sistem CRUD (Create, Read, Update dan Delete) seperti berikut:

(51)

Tentang Penulis 301

2.134. Kode Untuk Memanggil Semua Data Harian

Pada tampilan diatas dapat kita lihat, function getAllHarian() digunakan untuk memangil data pada database yang nantinya data akan digunakan pada ditampilkan pada data Harian.

Berikutnya kita akan membuat function tambahDataHarian() berfungsi sebagai data pada tombol tambah data harian bersama tampilan view yang nantinya kita buat. Pada saat penginputan data pada form tambah data harian datanya akan langsung masuk ke database pada tabel harian. Berikut adalah pengkodeanya seperti di bawah ini:

2.135. Kode Untuk Memanggil Semua Data Harian

Selanjutnya kita akan membuat function getLaporanByIden($kd) yang berfungsi sebagai metode mengambil hasil query dari baris pertama. $kd merupakan primarykey pada baris pertama dari tabel. Dan membuat function hapusDataHarian($kd) yang befungsi sebagai mengaktifkan fungsi hapus data melalui database kd (primarykey) supaya data pada database dapat terhapus begitu juga pada sistem. berikut ini adalah pengkodenaya:

(52)

2.136. Function Hapus dan Mengambil Data Primarykey

Berikutnya kita akan membuat function ubahDataHarian($kd) berfungsi sebagai data pada tombol ubah data harian bersama tampilan view yang nantinya kita buat. Pada saat penginputan data pada form ubah data harian datanya akan langsung berubah di dalam database begitu juga disistem aplikasi. Berikut adalah pengkodeanya seperti di bawah ini:

2.137. Kode Model Function Ubah Data

Selanjutnya masuk ke bagian model fungsi cariDataHarian() berfungsi sebagai pencarian data menggunakan fungsi perintah $keyword agar dapat mencari data dengan mudah. Berikut ini pengkodeannya:

2.138. Kode Model Function Cari Data Harian

(53)

Tentang Penulis 303

Setelah selesai dalam melakukan pengodingan data model pada direktori a_matrik. Kita lanjutkan dengan membuat tampilan yaitu (view) pada tampilan antar muka pada form data Harian pada gambar tampilan form data.

Fungsi dari tampilan atau bisa juga dibilang view berfungsi untuk menampilkan data informasi kepada user.

Pertama-tama buat lah file view pada direktori a_matrik seperti ini buka file direktori a_matrik/view/harian/index.php untuk menampilkan data antarmuka pada halaman. Buat folder harian pada folder view untuk memasukan data index.php. Untuk lebih jelas lagi lihatlah contoh seperti gambar berikut ini :

2.139. Direktori View A-MATRIK

Selanjutnya kita akan mengetikan atau menyisipkan kode pada file index.php. Untuk menampilkan data halaman dengan kode yang kita buat. Berikut adalah pengkodeannya :

2. Membuat File View index.php

Jika anda sudah membuat file index.php di dalam direktori a_matrik/views/harian/index.php. Maka, pilih folder view lalu folder harian yang telah di buat dan pilh lah file index.php file index ini juga bisa di bilang dengan tampilan data form harian. Selanjutnya ketikan atau sisipkan kode-kode berikut pada file index.php yang telah dibuat sebelumnya seperti berikut ini:

Pertama-tama buat lah folder dengan nama lifetime pada folder view, lalu buat lah file di dalam folder lifetime dengan nama tampil.php. untuk lebih jelas lagi lihat contoh berikut ini:

(54)

2.189. Direktori View Lifetime tampil.php

Setelah selesai membuat file tampil.php yang berada pada direktori a_matrik/view/lifetime/tampil.php. Bukalah data file tampil.php lalu isikan beberapa kode-kode untuk membuat data tampilan pada data Lifetime Alat. Disini kita akan membuat fungsi tampilan flashdata seperti yang telah di jelaskan sebelumya fungsi dari flashdata ini adalah berupa pesan singkat. Berikut ini adalah fungsi flashdata yang akan di letakan pada file tampil.php :

2.190. Kode Program View Lifetime tampil.php

Seperti data diatas merupakan fungsi flashdata yang dapat anda lihat di tampilan data halaman Lifetime Alat seperti gambar berikut ini:

2.191. Tampilan Flashdata Pada Halaman Lifetieme Alat

(55)

Tentang Penulis 305

Setelah selesai memasukan data untuk menampilkan data flashdata.

Selanjutnya membuat kode tampilan tambah data lifetime alat pada halaman seperti berikut ini:

2.192. Kode Program Tombol Tambah Data Lifetime Berikut adalah tampilan pada kode yang ada diatas seperti berikut ini:

2.197. Tampilan Judul Tabel Halaman Lifetime Alat

Selanjutnya melakukan pembuatan kode untuk menampilkan isi tabel seperti berikut:

2.198. Kode Program isi Tabel Lifetime

Pada kode di atas merupakan isi tabel pada halaman lifetime alat baris ke 98 adalah <tbody></tbody> merupakan element untuk mengelompokan isi sebuah tabel. Pada baris 101 variable $lifetime kita ubah sebagai variable $lt pada baris 105 sampai baris 107 variable $lt menyimpan masing-masing data equipment, part, dan tgl_akhir_ganti pada database. Lalu membuat variable baru dengan nama $tgl untuk

(56)

menyimpan fungsi baru $tgl =new datetime($lt->tgl_akhir_ganti);

berarti tanggal yang terbaru untuk menyimpan tangal terakhir ganti.

Pada baris ke 109 variable $today = new datetime() dan membuat variable baru $diff yang memanggil fungsi variable $today dan variable tanggal $tgl untuk menghasilkan seperti pada baris ke 111 untuk menampilkan tanggal terakhir ganti di tambah dengan tanggal sekarang akan menghasilkan “jumlah hari berjalan” seperti gambar berikut ini :

2.199. Tampilan Mendapatkan Jumlah Hari Berjalan

Selanjutnya membuat kode untuk menghasilkan data HM berjalan (rata- rata jam olah berjalan) yang di tentukan oleh banyaknya jumlah hari berjalan. Jika HM berjalan kurang dari budjet hour maka peralatan masih Aman dan jika melebihi dari budjet hour maka

Pada kode diatas pada baris ke 113 merupakan variable baru $interval yang merupakan kode perkalian dari hari berjalan di kali jam rata-rata olah yang di input pada form tambah data lifetime. Dan pada baris ke 114 merupakan variable untuk menyimpan data budjet_hour pada database menjadi variable $bjh.

Lihatlah gambar kode di atas pada baris ke 120 sampai 126 yang berfungsi untuk memutuskan jika HM berjalan lebih rendah dari pada budjet hour maka akan Aman dan sebaliknya jika HM berjalan lebih besar dari budjet hour maka akan Over (tidak aman). Untuk lebih jelasnya lagi lihatlah tampilan seperti gambar berikut ini: