Institutional Repository | Satya Wacana Christian University: Perancangan dan Implementasi Kontrol Lampu Menggunakan Arduino Melalui Website dan Notifikasi Pesan
BAB IV HASIL DAN ANALISIS
4.1 Hasil Karya / Implementasi
4.1.1 Konfigurasi IP Untuk pemberian IP pada Arduino tidak bisa dilakukan secara langsung seperti memberikan IP pada PC, maka dipakailah kode sebagai berikut ini : Kode Program 4.1. Kode Konfigurasi IP pada Arduino Diatas adalah kode program yang digunakan untuk menghubungkan antara PC dan Arduino. Pada bagian “byte mac[] = {.....};” diisi dengan kode mac yang terdapat pada ethernet shield. Sedangkan kode yang terdapat di dalam “void setup() {.......}” digunakan untuk menginisialisasi IP dan Mac yang sudah dituliskan.
4.1.2 Konfigurasi Relay Untuk relay hanya menggunakan 2 channel. Di
#include <Ethernet.h> String readString; char c; byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177); EthernetServer server(80); void setup() { Serial.begin(9600); while (!Serial) { ; } Ethernet.begin(mac, ip); server.begin(); }
Kode Program 4.2. Kode Konfigurasi Relay pada Arduino
#include <SPI.h> int relay1 = 9; int relay2 = 8; void setup() { pinMode(relay1, OUTPUT); pinMode(relay2, OUTPUT); }
di atas adalah kode yang digunakan untuk menghubungkan dari relay ke Arduino. Relay yang digunakan adalah relay dengan 2 Channel. Channel yang pertama dihubungkan pada Arduino pin 9, dan channel yang kedua dihubungkan pada Arduino pin 8.
4.1.3 Konfigurasi Website Untuk pembuatan website menggunakan kode HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheet). Berikut ini adalah kode HTML dan CSS :
Kode Program 4.3. Kode HTML Website
<HTML> <HEAD> <meta http-equiv=\"Refresh\" content=\"2; url=/wakwaw\" /> <meta http-equiv=\"Content-Type\" content=\"application/vnd.wap.xhtml+xml; charset=utf-8\" /> <link type=\"text/css\" rel=\"stylesheet\" href=\"http://haidao.mw.lt/js_css/css_pages.css \" /> <TITLE>Kontrol Lampu Melalui Website</TITLE> </HEAD> <BODY align=\"center\"> <h1>Panel Kontrol Lampu YudoBudi </h1> <hr /> <br /> <br /> <table align=\"center\"><tr> <th width=\"10%\">Nama Perangkat</th> <th width=\"10%\">Status Perangkat</th> <th width=\"10%\">Saklar ON/OFF</th></tr> <tr class=\"trh1\"><td align=\"left\"> Relay 1 </td><td align=\"center\"> <b>HIDUP</b> <b>MATI</b> </td><td align=\"center\"> <a href=\"/1on\" />MATIKAN</a> <a href=\"/1off\" />HIDUPKAN</a> </td></tr> <tr class=\"trh2\"><td align=\"left\"> Relay 2 </td><td align=\"center\"> <b>HIDUP</b> <b>MATI</b> </td><td align=\"center\"> <a href=\"/2on\" />MATIKAN</a> <a href=\"/2off\" />HIDUPKAN</a> </td></tr> </BODY> </HTML>
Di atas adalah kode HTML yang penulis gunakan untuk
membuat website, sedangkan untuk CSS nya ada di
bawah ini :Kode Program 4.4. Kode CSS Website
body { background-color:#00676B; background: linear-gradient(top, #CAE5E8 0%, #00676B 100%); background:-o-linear-gradient(top, #CAE5E8 #00676B); background:-moz-linear-gradient(top, #CAE5E8, #00676B); background:-webkit-gradient(linear, left top, left bottom, from(#CAE5E8), to(#00676B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr ='#CAE5E8', endColorstr ='#00676B'); background: -ms-linear-gradient(top, #CAE5E8, #00676B); background-attachment: fixed; border: 0px; margin: 0px; padding: 0px; color: #000000; font-family: Sans Serif, Arial Western, Verdana; font-size: small; text-align: center; align: center; } table { border: 0px; width: 60%; align: center; text-align: center; padding: 0px; vertical-align: middle; border-spacing: 0px; box-shadow: 15px 15px 15px #666666;
- moz-box-shadow: 15px 15px 15px #666666;
- webkit-box-shadow: 15px 15px 15px #666666; }
- moz-border-radius: 10px;
- webkit-border-radius: 10px; border-radius: 10px; box-shadow: 10px 10px 10px #666666;
- moz-box-shadow: 10px 10px 10px #666666;
- webkit-box-shadow: 10px 10px 10px #666666; }
.shadow { border: 1px solid #00676B; box-shadow: 10px 10px 10px #666666;
- moz-box-shadow: 10px 10px 10px #666666;
- webkit-box-shadow: 10px 10px 10px #666666; } a { background-color: #293F5E; color: #FFFFFF; padding: 4px 35px 4px 35px; text-align: center; margin: 0px; font-family: Arial Western, sans-serif; font-weight: bold; text-decoration: none;
- moz-border-radius: 5px;
- webkit-border-radius: 5px;
- o-border-radius: 5px; border-radius: 5px; border-color:black; border-top:2px solid; border-bottom:2px solid; border-right:2px solid; border-left:2px solid; } a:link { background-color: #293F5E; color: #FFFFFF; } a:visited { background-color: #293F5E; color: #FFFFFF; } a:hover { background-color: red; color: #FFFFFF; } a:active { background-color: red; color: #FFFFFF;
}
Untuk kode CSS penulis meng-upload kode ke
penyimpanan online dikarenakan memori Arduino
4.1.4 Penggabungan Kode Website, Relay, SMS, dan IP Untuk menggabungkan kode website, relay, dan ip pada Arduino tidak bisa mengenali secara langsung kode HTML jadi perlu adanya kode tambahan seperti “client.println” agar Arduino bisa membaca kode HTML tersebut.
Kode Program 4.5. Gabungan kode Web, Relay, IP dan SMS
#include <SPI.h> #include <Ethernet.h> int relay1 = 9; int relay2 = 8; boolean statusR1, statusR2 = false; String readString; char c; byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177); EthernetServer server(80); void setup() { pinMode(relay1, OUTPUT); pinMode(relay2, OUTPUT); Serial.begin(9600); while (!Serial) { ; } Ethernet.begin(mac, ip); server.begin(); } void loop() { EthernetClient client = server.available(); if (client) { while (client.connected()) { if (client.available()) { c = client.read(); if (readString.length() < 100) { readString += c; } if (c == '\n') { client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); client.println("<HTML>"); client.println("<HEAD>"); client.println("<meta http-equiv=\"Refresh\" content=\"2; url=/wakwaw\" />"); client.println("<meta http-equiv=\"Content- Type\" content=\"application/vnd.wap.xhtml+xml; charset=utf-8\" />"); client.println("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://haidao.mw.lt/js_css/css_pages.css \" />"); client.println("<TITLE>Room Automation</TITLE>"); client.println("</HEAD>"); client.println("<BODY align=\"center\">"); client.println("<h1>Panel Kontrol Lampu Budd </h1>"); client.println("<hr />"); client.println("<br />"); client.println("<br />"); client.println("<table align=\"center\"><tr>"); client.println("<th width=\"10%\">Nama Perangkat</th>"); client.println("<th width=\"10%\">Status Perangkat</th>"); client.println("<th width=\"10%\">Saklar ON/OFF</th></tr>"); client.println("<tr class=\"trh1\"><td align=\"left\">"); client.println(" "); client.println(" "); client.println("Relay 1"); client.println("</td><td align=\"center\">"); if (statusR1 == false) { client.println("<b>HIDUP</b>"); } else { client.println("<b>MATI</b>"); } client.println("</td><td align=\"center\">"); if (statusR1 == false) { client.println("<a href=\"/1on\" />MATIKAN</a>"); } else { client.println("<a href=\"/1off\" />HIDUPKAN</a>"); } client.println("</td></tr>");
client.println("<tr class=\"trh2\"><td align=\"left\">"); client.println(" "); client.println(" "); client.println("Relay 2"); client.println("</td><td align=\"center\">"); if (statusR2 == false) { client.println("<b>HIDUP</b>"); } else { client.println("<b>MATI</b>"); } client.println("</td><td align=\"center\">"); if (statusR2 == false) { client.println("<a href=\"/2on\" />MATIKAN</a>"); } else { client.println("<a href=\"/2off\" />HIDUPKAN</a>"); } client.println("</td></tr>"); client.println(); client.println(); client.println("</BODY>"); delay(1); client.stop();di atas adalah semua kode yang ditulis dan kemudian di-upload ke Arduino.
4.2 Hasil Pengujian
4.2.1 Kontrol Lampu
Gambar 4.2.1.1 Tampilan Awal WebsiteGambar di atas adalah tampilan website yang terdiri dari “Nama Perangkat”, “Status Perangkat”, dan “Saklar ON/OFF”. Untuk mematikan dan
maka “Status Perangkat” akan berganti begitu juga
dengan tombol “Saklar ON/OFF”.Gambar 4.2.1.2 Relay dalam keadaan Mati
Gambar di atas adalah kondisi awal relay dalam keadaan
mati atau arus dalam keadaaan putus jadi lampu tidak
akan menyala. Saat pengguna menekan tombol
“HIDUP” yang terdapat pada website, barulah relay
menyambung arus, dan lampu akan menyala.Gambar 4.2.1.3 Setelah Menekan Tombol Hidup
Gambar di atas adalah tampilan website setelah
pengguna menekan tombol “HIDUP” yang berada pada
kolom “Saklar ON/OFF” pada kolom “Status
Perangkat” akan berganti juga menjadi “HIDUP” dan
tombol akan berubah menjadi “MATI”.Gambar 4.2.1.3 Relay dalam keadaan HidupGambar di atas menunjukan bahwa relay akan menyambungkan arus listrik dan lampu akan menyala, ketika pengguna menekan tombol “HIDUP” yang terdapat pada website.
4.2.2 Notifikasi SMS
Gambar 4.2.2.1 Notifikasi modul SIM900AGambar di atas menunjukan bahwa modul SIM900A yang terpasang pada Arduino Mega sudah
yang terdapat pada modul SIM900A. Jika benar maka
modul akan membalas pesan yang dikirim.Gambar 4.2.2.2 Notifikasi Lampu OFF
Gambar di atas menunjukan bahwa lampu masih belum
menyala, dikarenakan tombol yang terdapat pada
website belum di tekan atau masih dalam kondisi
“Mati”.Gambar 4.2.2.3 Notifikasi Lampu ON
Gambar di atas menunjukan bahwa lampu dalam
keadaan menyala, dikarenakan tombol yang terdapat
4.3 Analisis Setelah dilakukan uji coba seperti gambar-gambar diatas maka didapat hasil sebagai berikut :
Tabel 4.3.1 Hasil analisisButton No yang Status Yang Pengamatan
ditekan Lampu diharapkan
Lampu 1 Lampu 1 Lampu 1 harusnya Mati Menyala menyala
1. Lampu 1 Lampu 2 Lampu 2 Lampu 2 Mati tetap mati Mati Lampu 1 Lampu 1 Lampu 1 Mati tetap mati Mati
2. Lampu 2 Lampu 2 Lampu 2 Lampu 2 harusnya Mati Menyala menyala
Lampu 1 Lampu 1 Lampu 1 harusnya Mati Menyala menyala Lampu 1,
3. Lampu 2 Lampu 2 Lampu 2 Lampu 2 harusnya Mati Menyala menyala
Lampu 1 Lampu 1, Lampu 1 Lampu 1
Lampu 2 Lampu 2 Lampu 2 harusnya Hidup mati mati
Berdasarkan tabel diatas, hasil pengamatan sudah terpenuhi sesuai
dengan harapan. Dengan adanya modul Ethernet Shield, Arduino dapat
berkomunikasi dengan PC (Personal Computer) dengan media kabel
sebagai penghubungnya. Sehingga website yang terdapat pada Arduino
bisa dibuka pada PC dengan cara mengakses alamat IP (Internet
Protocol ) yang terdapat pada Arduino , yang selanjutnya ketika tombol-
tombol yang terdapat pada website ditekan, maka perintah pada tombol
akan diteruskan ke Arduino melalui Ethernet Shield tersebut. Sehingga
perintah yang masuk ke Arduino berdampak pada relay, yakni relay akan
memutus dan menyambung arus sehingga lampu dapat mati maupun
menyala.Kemudian untuk SIM900A ini cocok digunakan sebagai GSM
Shield karena dapat langsung dihubungkan ke Arduino tanpa harus
menambahkan trafo stepdown seperti pada modul GSM Shield versi
SIM800. Karena pada SIM900A ini sudah mendukung power supply 5v
yang terdapat di Arduino tidak seperti pada SIM800 yang tidak
mendukung power supply pada Arduino jadi perlu adanya trafo
stepdown.