BAB 3 METODE PENELITIAN
3.6 Rancangan Aplikasi Web
Aplikasi untuk sistem Home Automation yang dirancang dibangun menggunakan bahasa PHP pada bagian back-end (server). Pada bagian front-end (UserInterface) digunakan Javascript dan HTML.
Aplikasi web yang dirancang menggunakan pola desain Model-View-Controller (MVC). Model yang dimaksud adalah model dari data yang disimpan di database. Model akan dimanipulasi oleh user menggunakan Controller, kemudian Model yang telah dimanipulasi akan meng-update View (UserInterface) yang akan dapat dilihat oleh pengguna. Pola MVC lebih jelasnya dapat dilihat pada Gambar 3.26.
Gambar 3.26 Desain Model-View-Controller 3.6.1 Back-end (Server)
Bagian server dari aplikasi web sistem Home Automation dibangun dengan menggunakan bahasa PHP. Sebuah framework PHP yang bernama Laravel digunakan untuk mempermudah proses pembuatan aplikasi web. Dengan Menggunakan framework Laravel penyimpanan data ke database tidak perlu menggunakan sintaks sql murni, namun hal ini telah diabstraksikan kedalam beberapa method dari class Model. Sehingga ketika untuk melakukan penyimpanyan data ke database cukup dilakukan dengan pemanggilan fungsi save.
3.6.1.1Routes
Pada aplikasi web yang dirancang terdapat beberapa route yang mengarah sebuah request ke Controller tertentu. Route – route tersebut dapat dilihat pada Gambar 3.27.
1 <?php
2
3 Rout e: :get(' / ' , ' HomeCont r ol l er @i ndex ' ) ; 4 Rout e: :aut h( ) ;
_5_Rout e: :get(' publ i s h/ { publ i s hKey } / { s ubs c r i beKey } / { s i gnat ur e} { c hannel Name} / { c al l bac k } / { mes s age} ' ,
' Publ i s hCont r ol l er @handl e' ) ;
6 Rout e: :get(' manage/ das hboar d' , ' Das hboar dCont r ol l er @i ndex ' ) ; 7 Rout e: :get(' manage/ das hboar d/ c ons ol e' ,
' Cons ol eCont r ol l er @i ndex ' ) ; 8 Rout e: :get(' not i f i c at i ons ' ,
' Not i f i c at i ons Cont r ol l er @i ndex ' ) ;
9 Rout e: :get(' not i f i c at i ons / { not i f i c at i ons } / s een' , ' Not i f i c at i ons Cont r ol l er @s een' ) ;
10 Rout e: :get(' meas ur ement s ', ' Meas ur ement s Cont r ol l er @i ndex ' ) ; 11 Rout e: :get(' meas ur ement s / { meas ur ement s } / s een' ,
' Meas ur ement s Cont r ol l er @s een' ) ;
12 Rout e: :get(' c ommands / 1/ { pi n} ' , ' Commands Cont r ol l er @t ur nOn' ) ; 13 Rout e: :get(' c ommands / 0/ { pi n} ' ,
' Commands Cont r ol l er @t ur nOf f ' ) ;
Gambar 3.27Routes yang digunakan di dalam aplikasi web
Route ‘/’ merupakan route untuk halaman awal. Misalnya ketika user
mengakses www.wahyunugraha.com maka route yang dikunjungi adalah route ‘/’ dan server akan meneksekusi fungsi index yang ada pada classHomeController.
Route ’auth’ merupakan route yang menangani login dan registeruser.
Route ini merupakan route bawaan framework Laravel. Route ini juga menyediakan halaman untuk melakukan login dan registrasi.
Route ‘manage’ merupakan sebuah route untuk halaman manajemen aplikasi web. Route ini mempunya dua sub-route yaitu ‘/dashBoard’ dan ‘dashBoard/console’. Route ‘/dashBoard’ akan menampilkan semua perangkat yang tersambung ke Wemos D1. Pada route ini juga ditampilkan tombol kendali untuk menghidupkan atau mematikan perangkat yang tersambung ke Wemos D1. Pada route ‘dashBoard/console’ akan ditampilkan sebuah console terminal yang menampilkan aktivitas dari sistem Home Automation.
Route ‘notification’ merupakan route yang berguna untuk mengambil seluruh notifikasi yang belum dibaca dalam format JSON. Route ini mempunyai sebuah sub-route ‘notification/{notifications}/seen’ yang berfungsi untuk mendai suatu notifikasi sebagai notifikasi yang sudah dilihat.
Route ‘measurement’ merupkan route yang berguna untuk menampilkan seluruh nilai pembacaan sensor yang belum dilihat. Sama seperti route
notification, route ini juga mempunyai sebuah sub-route yang berfungsi untuk menandai sebuah measurement sebagai measurement yang telah dilihaat.
Route ‘commands’ merupakan route yang berfungsi untuk mengirimkan perintah ke WemosD1. Angka 1 atau 0 pada route ini menyatakan perintah apa yang akan dikirimkan, jika 1 maka perintah yang dikirimkan adalah perintah untuk menghidupkan perangkat dan jika 0 maka perintah yang dikirim adalah perintah untuk mematikan perangkat.
3.6.1.2 Migrations dan Model
Migration pada framework laravel adalah sebuah class yang menangi pembuatan table pada database. Pada aplikasi web sistem Home Automation yang dirancang terdapat 3 buah tabel database. Tabel tersebut yaitu: tabel commands, merupakan tempat dimana semua perintah dari penggunan akan disimpan sementara sebelum dikirim ke Wemos D1; tabel notifications, merupakan tabel yang menyimpan seluruh notifikasi yang datang dari Wemos D1; tabel
measurements, merupakan tabel yang menyimpan seluruh hasil pembacaan sensor yang terhubung ke Wemos D1.
Seluruh tabel yang dibuat di migrations kemudian dimodelkan kedalam
class Model. Class modul setiap tabel merupakan anak class dari Illuminate\Database\Eloquent\Model, dimana pada class tersebut terdapat banyak sekali fungsi – fungsi yang membantu pen-query-an data dari database atau penyimpanan data ke database.
3.6.1.3Controllers
Controller adalah class yang digunakan oleh user untuk memanipulasi Model. Pada aplikasi web yang dirancang terdapat tujuh buah Controller.
Controller tersebuat antara lain: CommandController, ConsoleController,
DashBoardController, HomeController, MeasurementsController,
NotificationsController, dan PublishController. Masing – masing Controller
tersebut mempunyai fungsi seperti yang dijelaskan pada bagian Routes.
3.6.2 Front-end (UserInterface)
Bagian userinterface dari applikasi web dibangun dengan menggunakan bahasa markup HTML dan Javascript. Aplikasi web yang dirancang terdiri dari 5 halaman, yaitu: landing page, halaman register, halaman login, halaman
dashBoard dan halaman console.
Landing page merupakan halaman awal yang akan dilihat oleh pengguna. Pada halaman ini pengguna bisa memilih aksi login atau register. Halaman ini diakses dari route ‘/’ dan dikontrol oleh classHomeController.
Halaman Register merupakan tempat dimana user mengisi data seperti nama, email, dan password untuk bergabung dengan sistem. Halaman ini diakses melalui route ‘auth’ dan dikontrol oleh class AuthController.
Halaman login merupakan tempat dimana pengguna memasukkan kredensialnya untuk masuk kedalam aplikasi web sistem Home Automation. Sama seperti halaman register, halaman ini juga diakses memalui route ‘auth’ dan dikontrol oleh class AuthController.
Halaman dashBoard merupakan halaman kendali utama. Pada halaman ini ditampilkan seluruh perangkat yang tersambung ke Wemos D1. Pada halaman ini juga ditampilkan tombol yang berfungsi untuk menghidupkan perangkat dan mematikan perangkat. Halaman ini diakses melalui route ‘manage/dashBoard’, serta dikontrol oleh classDashBoardController.
Halaman Console merupakan halaman yang dapat menampilkan aktivitas dari sistem Home Automation. Halaman ini diakses memalui route