PROTOTYPE SMART HOME BERBASIS HTML

MENGGUNAKAN WEMOS 1 Wisnu Pratama Putra, 2Mariza Wijayanti

Fakultas Ilmu Komputer dan Teknologi, Jurusan Sistem Komputer

Universitas Gunadarma Jl. Margonda Raya No. 100, Depok 16424, Jawa Barat

1wsnpenul@gmail.com, 2mariza_w@staff.gunadarma.ac.id

Abstrak

Rumah merupakan kebutuhan pokok manusia yang dijadikan sebagai tempat tinggal

dalam jangka waktu tertentu. Fungsi utama dari rumah digunakan sebagai tempat istirahat

setelah beraktivitas dan berkegiatan sehari-hari. Rumah juga bermanfaat sebagai tempat

beraktivitas antara anggota keluarga atau teman. Agar menjadi hunian yang layak dan

nyaman rumah didesain menggunakan Smart Home dan sedemikian rupa sesuai dengan

keinginan dan kebutuhan pemiliknya, sehingga penghuni yang berada di dalamnya bisa

merasa nyaman dan tidak merasa bosan karena memiliki rumah idaman yang sesuai dengan

kebutuhan. Sistem keamanan sekarang sangat dibutuhkan. Salah satunya keamanan pada

pintu rumah yang rawan dan kemungkinan terjadinya pencurian sangat besar, agar bisa

mengantisipasi bahaya pencurian yang dapat terjadi secara tak terduga. Pintu rumah ini tidak

semua orang bisa membuka karena pintu rumah ini mempunya alat yaitu dengan cara sidik

jari. Keamanan pintu rumah masih sangat manual, dalam artian keamanan pintu rumah

beredar di kalangan masyarakat masih menggunakan keamanan pintu rumah konvensional.

Ketika membuka pintu rumah dengan cara membuka kunci, yang dirasa tidak efisien.

Kata Kunci : HTML, Internet Of Things ,LED, L298N Motor Driver, Wemos.

Abstract

The house is a basic human need which is used as a place to live for a certain period of

time. The main function of the house is used as a place to rest after activities and daily

activities. The house is also useful as a place for activities between family members or friends.

In order to be a proper and comfortable residence, the house is designed to use a Smart Home

and in such a way as to the wishes and needs of the owner, so that the occupants who are in it

can feel comfortable and do not feel bored because they have a dream house that suits their

needs. Security systems are now urgently needed. One of them is the security at the door of the

house which is prone to theft and the possibility of theft is very large, in order to anticipate

the danger of theft that can occur unexpectedly. Not everyone can open the door of this house

because the door of this house has a device, namely by means of fingerprints. Home door

security is still very manual, in the sense that house door security circulating among the

public still uses conventional house door security. When opening the door to the house by

opening the lock, which is considered inefficient.

Keywords: HTML, Internet Of Things, LED, L298N Motor Driver, Wemos

1

2

PENDAHULUAN

Latar Belakang

Perkembangan teknologi yang terjadi akhir-akhir ini menyebabkan banyaknya

pengendalian otomatis dibuat untuk menyelesaikan masalah pada kehidupan sehari-hari,

yang contohnya untuk menghilangkan kemacetan pada pintu-pintu tol yang biasanya

terjadi karena banyaknya pengguna-pengguna kendaraan bermotor seperti mobil, truk, dan

kendaraan lainnya yang harus membayar dengan uang pas. Dibuat lah Sistem E-Toll atau

sistem yang dapat membayar uang masuk tol hanya dengan menyentuh scanner dengan

kartu dan masih banyak lagi pengendalian otomatis yang dapat menyelesaikan masalah-

masalah pada kehidupan sehari-hari.

Masalah pada kehidupan sehari-hari tidak berhenti disitu saja, masalah dapat kita

dapatkan pada hal-hal yang contohnya pada rumah. Pada rumah pun, sering sekali

melakukan hal yang dipikir sepele tetapi hal tersebut lah yang akan membuat menyesal

pada akhirnya. Seperti contohnya lupa mematikan lampu rumah, menutup jendela beserta

tirainya hal tersebut dapat menyebabkan masalah seperti tagihan untuk uang listrik

melonjak, banyaknya debu yang masuk dari jendela membuat peralatan, meja, dan lantai

kotor.

Untuk menghindari hal tersebut, penulis membuat sebuah judul penulisan

“Rancang Bangun Prototype Smart Home Berbasis Html Dengan Wemos” yang dapat

mematikan atau menyalakan lampu, menyalakan dan mematikan kipas secara otomatis,

membuka dan menutup kunci pintu dengan menambahkan sebuah halaman HTML sebagai

pengoperasian dari alat-alat tersebut berdasarkan jurnal sebelumnya yang berjudul

“Perancangan Sistem Kendali Otomatis Pada Smart Home Menggunakan Modul Arduino

Uno”.

KERANGKA TEORI

Menurut Fauzi (2011:1) Mikrokontroler adalah sebuah chip yang berfungsi sebagai

pengontrol rangkaian elektronik dan umumnya dapat menyimpan program di dalamnya.

Mikrokontroler dibangun dari elemen-elemen dasar yang sama dengan komputer pribadi

atau komputer mainframe. Mikrokontroler digunakan dalam produk dan alat yang

dikendalikan secara otomatis, seperti sistem kontrol mesin, remote control, mesin kantor,

peralatan rumah tangga, alat berat, dan mainan, dengan mengurangi ukuran, biaya, serta

konsumsi tenaga dibandingan dengan mendesain menggunakan mikroprosesor memori,

dan alat input output yang terpisah.

Pada masa sekarang atau masa yang akan datang, penggunaan komputer akan

mendominasi pekerjaan manusia atau bahkan akan mengalahkan kemampuan komputasi

manusia seperti mengontrol peralatan elektronik dari jarak jauh dengan menggunakan

dukungan media IOT (Internet of Things). Salah satu hardware dari pengembangan yang

berbasis IOT adalah Wemos D1, yang merupakan sebuah mikrokontroler hasil

pengembangan berbasis modul ESP8266. Masih terdapat modul wifi yang berbasis

ESP8266 seperti Nodemcu yang sering digunakan sebagai penghubung internet antara

Arduino ke smartphone atau PC melalui jaringan wifi. Modul Wemos D1 ini diciptakan,

sebagai solusi dari mahalnya sebuah modul wireless yang berbasis mikrokontroler.

Internet of Things (IoT) adalah sebuah jaringan yang terdiri dari berbagai macam alat

sensor dan penginderaan yang melakukan pengolahan informasi yang terdiri dari radio

frequency identification (RFID), sensor infra merah, global positioning system (GPS),

lasser scanner dan internet (Momoh, 2009). Teknologi IoT banyak digunakan untuk

monitoring lalu lintas, proses industri, militer, dan lingkungan.

HTML adalah singkatan dari Hypertext Markup Language. HTML merupakan bahasa

dasar pembuatan web. Disebut dasar karena dalam membuat web, jika hanya

menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa pemrograman

web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP.

3

Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat

membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya

hanya dengan meng-klik text tersebut. Kemampuan text inilah yang dinamakan hypertext,

walaupun pada implementasinya nanti tidak hanya text yang dapat dijadikan link.

METODE PENELITIAN

Metode penelitian merupakan prosedur dan teknik penelitian. Antara satu penelitian

dengan penelitian yang lain, prosedur dan tekniknya akan berbeda. Kalau tidak berbeda,

berarti penelitian itu hanya mengulang penelitian yang sudah ada sebelumnya. Tapi bukan

berarti harus berbeda semuanya. Untuk penelitian studi literatur dan studi lapangan,

mungkin saja penelitiannya sama, tetapi komponen, sensor atau teknik pengambilan data

berbeda, maka analisis datanya harus berbeda pula. Mohon diuraikan dengan jelas, bukan

hanya mengopi dari penelitian lain. Bagian ini bisa dibagi menjadi beberapa sub bab, tetapi

tidak perlu mencantumkan penomorannya.

Rancang Bangun Prototype Smart Home berbasis HTML dengan Wemos D1.

Bekerja untuk mempermudah penghuni rumah mengoperasikan alat-alat rumah tangga

tanpa harus bersentuhan langsung dengan alat-alat rumah tangga tersebut, pengoperasian

dilakukan melalui HTML yang berisikan tombol-tombol untuk mengaktifkan atau

menonaktifkan alat-alat rumah tangga tersebut. Berikut adalah penjelasan mendalam

terhadap alat tersebut:

1. Aktivator

Sumber tegangan pada rangkaian alat ini berkisar pada besaran dari +9v sampai

dengan +12v, tegangan tersebut dapat untuk mengoprasikan dua unit motor DC yang diatur

melalui mikrokontroler Wemos D1 dan L298N motor driver, serta LED.

2. Blok Input

Gambar 1 Halaman HTML

Didalam blok input ini yaitu HTML yang diakses melalui IP 192.168.43.100.

Halaman HTML tersebut berisikan button-button dan inputnya berupa nilai berdasarkan

kodingan yang berada pada Wemos. Button-button yang dimaksud adalah: Lampu ON,

Lampu OFF, Kipas Mati, Kipas Nyala, Buka Pintu dan Tutup Pintu.

4

Gambar 2 Serial Monitor pada Arduino IDE

Untuk mendapatkan IP yang akan digunakan untuk mengakses halaman HTML

dari “Rancang Bangun Prototype Smart Home berbasis HTML dengan Wemos D1”, IP

tersebut akan diperlihatkan pada Serial Monitor pada Arduino IDE jika sudah terhubung

dengan WiFi Client yang digunakan oleh Wemos D1 R1.

3. Blok Proses

Gambar 3 L298N Motor Driver

Blok proses adalah blok yang berfungsi untuk mengontrol kerja dari keseluruhan

komponen yang ada pada tempar sampah pintar ini. Salah satu komponen yang termasuk

dalam blok ini adalah motor driver adalah L298N Motor Driver. L298N Motor Driver

digunakan untuk mengatur input tegangan dari Power Supply dan mengirimkannya ke

pin-pin output ic L293D yang terhubung ke dua unit Motor DC. L298N Motor Driver ini

juga berfungsi untuk menguatkan masukan input tegangan ke dua unit Motor DC menjadi

12 volt agar kecepatan putarannya menjadi lebih cepat.

5

Gambar 4 Wemos D1 R1

Komponen kedua adalah Wemos D1 R1 yang berperan sebagai penerima input

dari halaman HTML dan meneruskan output untuk menyalakan dan mematikan LED, dan

juga untuk meneruskan perintah menggerakkan kedua motor DC yang akan dilakukan oleh

L298N Motor Driver.

4. Blok Output

Pada blok output terdapat dua komponen yaitu dua buah unit motor DC dan LED.

Aksi motor DC yang pertama akan bekerja sebagai kipas angin dengan baling-baling yang

berputar searah jarum jam(clockwise). Aksi Motor DC yang kedua akan menjadi alat

keamanan pintu berputar melawan arah jarum jam(counter clockwise) untuk terbuka dan

searah jarum jam(clockwise) untuk tertutup yang dapat dikendalikan melalui HTML.

Gambar 5 Motor DC

Output berikutnya adalah LED. Aksi yang terakhir adalah menyalakan atau mematikan

LED melalui HTML

Gambar 6 LED

6

5. Analisa Secara Diagram Alur (Flowchart)

Gambar 7 Diagram Alur (Flowchart) Alat

7

Diagram alur (flowchart) merupakan Diagram alur (flowchart) merupakan cara

untuk menjelaskan alur kerja program yang berfungsi menentukan input dan output pada

alat. Berikut adalah diagram alur (flowchart) alat dari Rancang Bangun Prototype Smart

Home berbasis HTML dengan Wemos:

1. Alat berada pada posisi menyala atau power on yang berarti rangkaian alat sudah menyala melalui aliran daya dari adaptor sebesar +9 volt untuk L298N Motor Driver dan Wemos D1 R1.

2. Setelah alat sudah menyala, lalu masuk ke kondisi “Masuk Halaman HTML?” yang jika tidak akan kembali ke inisialisasi awal dan jika masuk akan menampilkan sebuah halaman HTML berisikan tombol-tombol untuk mengendalikan alat-alat yang tercantum namanya pada tombol tersebut.

3. Pada kondisi pertama adalah berisikan kondisi awal dari lampu yaitu “Keadaan

Lampu Mati?” dan jika ingin menyalakan yang berarti “Ya” akan dilanjutkan

ke kondisi yang berisikan “Tombol Lampu Nyala”, jika ditekan akan berlanjut

ke kondisi “Ya” yang berisikan proses “Led Menyala”. Apabila “Tidak” lalu

akan berlanjut ke kondisi kedua adalah berisikan kondisi awal dari lampu yaitu

“Keadaan Lampu Nyala?” dan jika ingin mematikan yang berarti “Ya” akan

dilanjutkan ke kondisi yang berisikan tombol kedua berisikan “Tombol Lampu

Mati”, jika ditekan akan berlanjut ke kondisi “Ya” yang berisikan proses “Led

Mati”.

4. Apabila “Tidak” lalu akan berlanjut ke kondisi ketiga yang berisikan kondisi

awal dari kipas yaitu “Keadaan Kipas Mati?” dan jika ingin menyalakan yang

berarti “Ya” akan dilanjutkan ke kondisi yang berisikan tombol ketiga

berisikan “Tombol Kipas Nyala”, jika ditekan akan berlanjut ke kondisi “Ya”

yang berisikan proses “Kipas Menyala”. Bila “Tidak” lalu akan berlanjut ke

kondisi keempat adalah berisikan kondisi awal dari kipas yaitu “Keadaan

Kipas Nyala?” dan jika ingin mematikan yang berarti “Ya” akan dilanjutkan

ke kondisi yang berisikan ke tombol keempat berisikan “Tombol Kipas Mati”,

jika ditekan akan berlanjut ke kondisi “Ya” yang berisikan proses “Kipas

Mati”.

5. Apabila “Tidak” lalu akan berlanjut ke kondisi kelima adalah berisikan kondisi

awal dari alat pengunci pintu yaitu “Keadaan Kunci Pintu Tertutup?” dan jika

ingin membuka kunci yang berarti “Ya” akan dilanjutkan ke kondisi yang

berisikan ke tombol kelima berisikan “Tombol Buka Pintu”, jika ditekan akan

berlanjut ke kondisi “Ya” yang berisikan proses “Kunci Pintu Terbuka”. Bila

“Tidak” lalu akan berlanjut ke kondisi keenam adalah berisikan kondisi awal

dari alat pengunci pintu yaitu “Keadaan Kunci Pintu Terbuka?” dan jika ingin

menutup kunci tombol keenam berisikan “Tombol Tutup Pintu”, jika ditekan

akan berlanjut ke kondisi “Ya” yang berisikan proses “Kunci Pintu Tertutup”.

6. Jika “Tidak” yang berarti semua kondisi sudah berjalan maka akan kembali ke inisialisasi.

8

HASIL DAN PEMBAHASAN

Rancangan Rangkaian

Gambar 8 Rangkaian Prototype Smarthome

Pada rangkaian diatas memerlukan tegangan +- 9V untuk dapat mengaktifkan

L298N Motor Driver, tegangan tersebut akan dialirkan untuk mengaktifkan tempat

pemrosesan data dari alat ini yaitu Wemos D1. Tegangan tersebut juga dialirkan lagi ke

beberapa komponen pendukung seperti 2 Motor DC, dan LED. Media input rangkaian ini

adalah dari halaman HTML yang berisikan button-button untuk mengoperasikan 2 Motor

DC yang menjadi kipas dan alat pengamanan rumah, dan LED yang menjadi lampu pada

smarthome ini. Pada 2 buah motor DC terhubung ke L298N Motor Driver yang berguna

sebagai pengendali dan pemberi tegangan untuk kedua motor DC tersebut.

Untuk motor DC pertama yang bekerja sebagai kipas, terhubung pada pin input

IN1 dan IN2 di L298N Motor Driver sebagai output untuk motor DC pertama. Lalu untuk

motor DC kedua yang bekerja menjadi alat pengaman pintu terhubung pada pin input IN3

dan IN4 di L298N Motor Driver sebagai output untuk motor DC kedua. Pin IN1, IN2, IN3,

dan IN4 selanjutnya terhubung ke pin-pin yang berada pada Wemos D1 R1 untuk dapat

dikendalikan melalui halaman HTML. Pin-pin pada Wemos D1 R1 yang dimaksud adalah

untuk pin IN1 dan IN2 terhubung pada pin D5 dan D6, lalu yang kedua yaitu pin IN3 dan

IN4 terhubung pada pin D8 d

9

Tabel 1 Hasil Uji Coba

No. Kondisi

Awal

Tombol Output Keterangan

1. Lampu

Mati

“Lampu Nyala” Lampu Nyala Tombol “Lampu

Nyala” ditekan dan

menyalakan LED

2. Lampu

Nyala

“Lampu Mati” Lampu Mati Tombol “Lampu

Mati” ditekan dan

mematikan LED

3. Kipas

Mati

“Kipas Nyala” Kipas Nyala Tombol “Kipas

Nyala” ditekan dan

menyalakan kipas

4. Kipas

Nyala

“Kipas Mati” Kipas Mati Tombol “Kipas

Mati” ditekan dan

mematikan kipas

5. Kunci

Pintu

Tertutup

“Tombol Buka

Pintu”

Kunci Pintu Terbuka Tombol “Buka

Pintu” ditekan dan

membuka kunci

pintu

6. Kunci

Pintu

Terbuka

“Tombol Kunci

Pintu”

Kunci Pintu Tertutup Tombol “Tutup

Pintu” ditekan dan

membuka kunci

pintu

10

Tabel diatas merupakan hasil dari uji coba yang dilakukan untuk menguji apakah

kondisi-kondisi yang diinginkan sudah dapat terpenuhi atau belum. Berikut penjelasan mendalam

dari setiap table diatas:

1. Pada pengujian alat ini, setiap alat bekerja bila ditekan tombol-tombol pada HTML.

Pengujian pertama yaitu menguji LED apakah bekerja sesuai dengan apa yang

diinginkan. Dari hasil pengujian, tombol-tombol bekerja dengan baik seperti menyalakan

ataupun mematikan LED.

2. Pengujian kedua yaitu menguji salah satu Motor DC yang berperan sebagai kipas apakah

bekerja sesuai dengan apa yang diinginkan. Dari hasil pengujian, tombol-tombol untuk

mengoperasikan kipas bekerja dengan baik seperti menyalakan ataupun mematikan

Motor DC dan putaran yang diberikan sesuai dengan input yaitu putaran searah jarum

jam (clockwise).

3. Pengujian ketiga yaitu menguji Motor DC kedua yang berperan sebagai alat keamanan

pintu apakah bekerja sesuai dengan apa yang diinginkan. Dari hasil pengujian, tombol-

tombol untuk membuka dan menutup kunci pintu bekerja dengan baik dengan

memberikan putaran melawan arah jarum jam (counter-clockwise) ketika membuka

kunci pintu dan putaran searah jarum jam (clockwise) pada kunci untuk mengunci pintu.

KESIMPULAN DAN SARAN

Kesimpulan

Berdasarkan hasil uji coba “Rancang Bangun Prototype Smart Home Berbasis HTML

Dengan Wemos” yang telah dilakukan, maka dapat disimpulkan alat telah berjalan dengan baik

dan benar karena telah memenuhi semua kondisi yang diinginkan, seperti LED bisa dinyalakan

dan dimatikan melalui tombol pada halaman HTML, kedua motor dc berjalan dengan baik. Motor

dc yang bekerja menjadi kipas berjalan dengan baik, motor dc kedua yang bekerja menjadi alat

keamanan rumah pun berjalan dengan baik dan dapat dioperasikan melalui tombol-tombol pada

halaman HTML. Halaman HTML pun dapat diakses dengan mudah melalui IP local yang

didapatkan dari Wemos D1 R1 dan dibuka melalui smartphone.

Saran

Saran yang dapat diberikan dari alat ini kepada pembaca yang hendak mengembangkan

alat ini yaitu dengan membuat pengoperasian alat-alat rumah tangga menggunakan suara ataupun

motion dengan menggunakan sensor. Untuk alat keamanan rumah bisa dikembangkan dengan

penambahan face lock ataupun voice lock agar lebih aman terhadap pencurian ataupun hal-hal

yang tidak diinginkan. Ataupun jika masih ingin menggunakan HTML, halaman HTML dapat

diberikan halaman login terlebih dahulu menggunakan id atau password yang sudah dibuat agar

orang asing atau orang yang tidak diinginkan tidak dapat mengakses halaman HTML untuk smart

home tersebut.

11

DAFTAR PUSTAKA

[1] Adi, Arista Prasetyo. 2019. 111 Kode HTML untuk Belajar Kilat Jakarta: PT.Elex Media

Komputindo.

[2] Arifianto, Deni. 2011. Kumpulan Rangkaian Elektronika Sederhana. Jakarta: PT.Kawan

Pustaka.

[3] Santoso, Hadi. 2013. Panduan Praktis Arduino Untuk Pemula. Jakarta: PT.Elang Sakti.

[4] Santoso, Hadi. 2014. Monster Arduino 2: Panduan Praktis Arduino Untuk Pemula. Jakarta:

PT.Elang Sakti.

[5] Schwartz, Marco. 2014. Arduino Networking. Birmingham: Packt Publishing.

[6] Kurnianto, Danny. 2016. Perancangan Sistem Kendali Otomatis Pada Smart Home

Menggunakan Modul Arduino Uno. (Jurnal) Sumber:

http://jnte.ft.unand.ac.id/index.php/jnte/article/view/276/ (Diakses Pada Tanggal 17 Juli

2019)

[7] Nurrahmadi, Fakhri. 2018. Perancangan Alat Gorden Dan Lampu Untuk Smarthome

Berbasis Mikrokontroler dan Android. (Jurnal) Sumber:

http://jfu.fmipa.unand.ac.id/index.php/jfu/article/view/364. (Diakses pada 22 Juli 2019)

[8] Yuniarti, Elvan. 2018. Rancang Bangun Smarthome Menggunakan Wemos D1 R2 Arduino

Compatible Berbasis ESP8266 ESP-12F. (Jurnal) Sumber :

http://journal.uinjkt.ac.id/index.php/al-fiziya/article/view/8992 (Diakses pada 22 Juli

2019)

[9] Putri, Dian Mustika. 2016, Mengenal Wemos D1 Mini Dalam Dunia IOT. (Jurnal) Sumber:

https://dianmstkputri.wordpress.com. (Diakses pada 22 Juli 2019)

[10] Purnama, Bambang Eka. 2013. Pembuatan Website E-Commerce Pada Distro JavaTrend.

(Jurnal) Sumber: http://ijns.org/journal/index.php/seruni/article/view/715. (Diakses pada

05 Agustus 2019)

[11] https://www.nesabamedia.com/pengertian-flowchart/ (Diakses Pada 05 Agustus 2019)

[12] https://www.duniailkom.com/belajar-html-pengertian-html/ (Diakses pada 06 Agustus

2019)

[13] https://id.wikipedia.org/wiki/Komputer_mikro (Diakses Pada 05 Agustus 2019)

[14] https://id.wikipedia.org/wiki/HTML (Diakses Pada 01 Agustus 2019)