Front-end UserInterface Rancangan Aplikasi Web

54 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. Universitas Sumatera Utara 55 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 ‘managedashBoard’, serta dikontrol oleh classDashBoardController. Halaman Console merupakan halaman yang dapat menampilkan aktivitas dari sistem Home Automation. Halaman ini diakses memalui route ‘managedashBoardconsole’ serta dikendalikan oleh classConsoleController. Universitas Sumatera Utara 56 BAB 4 HASIL DAN PEMBAHASAN

4.1 Hasil Rancangan Model Sistem Home Automation

Sistem Home Automation yang dirancang terdiri dari dua bagian, yaitu bagian Kontroler dan bagian aplikasi web. Kedua bagian tersebut dijelaskan sebagai berikut.

4.1.1 Kontroler

Bagian kontroler dari sistem Home Automatin yang dirancang terdiri dari sebuah Wemos D1 yang terintegrasi dengan modul Wi-Fi ESP8266, modul relay 4 kanal, stop contact, sensor PIR dan sensor suhu. Wemos D1 dan modul relay di pasang di atas sebuah Boardakrilik. Penampang ketiga komponen ini setelah dipasang di atas Board akrilik seperti yang terlihat pada Gambar 4.1. Gambar 4.1 Penampang komponen – komponen setelah dipasang diatas Board akrilik. Universitas Sumatera Utara