19
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
bawah ini adalah kode yang digunakan untuk
menghubungkan relay ke Arduino :
#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
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 :
#include <SPI.h> int relay1 = 9; int relay2 = 8; void setup() { pinMode(relay1, OUTPUT); pinMode(relay2, OUTPUT); }Kode Program 4.3. Kode HTML Website
Di atas adalah kode HTML yang penulis gunakan untuk
membuat website, sedangkan untuk CSS nya ada di
bawah ini :
<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>
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; }
tr { height: 40px; } th { background-color: #C8E2B1; height: 50px; } .trh1 { background-color: #CAE5E8; } .trh1:hover { background-color: #E6F1D8; } .trh2 { background-color: #99D1D3; } .trh2:hover { background-color: #E6F1D8; } h1 { margin: 25px;
font-family: Arial Western, Verdana; text-shadow: 5px 3px 3px #999999; font-size: 20pt; font-weight: bold; color: #CCFFFF; border: 0px; } h6 { font-size: 10pt; font-weight: normal; text-shadow: 1px 1px 1px #999999; color: #000000; margin: 20px; } .bogoc { background-color: #ECECEC; -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; }
Untuk kode CSS penulis meng-upload
kode ke
penyimpanan
online
dikarenakan memori Arduino
Mega tidak dapat menyimpan banyak kode sekaligus.
.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;
}
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();
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 Website
Gambar di atas adalah tampilan website yang
terdiri dari “Nama Perangkat”, “Status Perangkat”, dan
“Saklar
ON/OFF”.
Untuk
mematikan
dan
menghidupkan lampu, pengguna cukup menekan
tombol “HIDUP”. Setelah menekan tombol tersebut
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(); if (readString.indexOf("1on") >0){ digitalWrite(relay1, HIGH); statusR1 = true; } if (readString.indexOf("1off") >0){ digitalWrite(relay1, LOW); statusR1 = false; } if (readString.indexOf("2on") >0){ digitalWrite(relay2, HIGH); statusR2 = true; } if (readString.indexOf("2off") >0){ digitalWrite(relay2, LOW); statusR2 = false; } readString=""; } } } } }
