A. Aplikasi Client
Pembuatan program aplikasi client akan dipergunakan untuk pengontrolan lampu, pemrograman pada client menerapkan pemrograman soket dengan bahasa pemrograman java yang di buat dengan Perangkat Lunak (Arduino IDE).
B. Tampilan Client
1. Form Halaman Web
Gambar di bawah ini merupakan aplikasi untuk control lampu melalui halaman web :
Gambar 3.1 form halaman web
Dalam form Halaman web terdapat komponen sebagai berikut : 1. 4 komponen button
From Halaman Web ini berfungsi sebagai menu pengontrolan lampu.
2. Form Control Lampu
Gambar di bawah ini merupakan aplikasi untuk control lampu :
Gambar 3.2 Desain form control lampu
Dalam form Halaman web terdapat komponen sebagai berikut : 1. 4 komponen button
From Halaman Web ini berfungsi sebagai menu pengontrolan lampu.
Aplikasi Client USER Client
Server Arduino Uno
PIN 5
Lampu
Pembahasan System
Gambar 3.3 Diagram System Client - Server
Gambar di atas merupakan diagram sistem yang berjalan pada
client dan server. User client melakukan control lampu on,off,dimmer/sliding melalui aplikasi client yang akan diproses server untuk akses lampu. Kemudian status lampu on/off akan di
informasikan kembali dari server ke aplikasi client.
a. Software
Gambar di bawah ini merupakan system software yang dibangun untuk client yang terkoneksi ke server , user masuk aplikasi halaman web bila Ip Address yang dimasukkan benar maka secara otomatis akan menjalankan aplikasi control lampu , bila terjadi kesalahan pada Ip Address maka akan terjadi perulangan di program Web Browser hingga benar, setelah login user dapat melakukan kontrol lampu
on,off,dimmer/sliding yang akan diproses oleh server Arduino Uno untuk menghidupkan lampu, kemudian server
mengirimkan status lampu ke aplikasi client, user akan mengetahui keadaan lampu secara langsung.
b. Komunikasi Client – Server
Aplikasi client dan aplikasi server terhubung dalam jaringan dengan mengunakan pemrograman socket TCP , di dalam aplikasi terdapat nomor port dan target host yang berisi
IP(internet protocol) yang berguna untuk menghubungkan
komunikasi data antara client dan server, pada diagram Gambar aplikasi client mengirimkan data “LAMPU ON” ke aplikasi server, server menerima data client dan melakuakan akses Pin 5 untuk menyalakan lampu , aplikasi server mengirimkan data status “LAMPU ON” ke aplikasi client agar
user mengetahui kondisi status lampu.
Gambar 3.5 Diagram komunikasi Client – Server
USER Aplikasi Client Aplikasi Server SERVER Arduino Data Dikirim
Data Status Dikirim Jaringan
Lokal Lampu ON
3. Uji Coba Program
a. Tampilan Client
Setelah program server berjalan maka akses program
client yang berada pada aplikasi Arduino IDE kemudian running program halaman web seperti gambar di bawah ini :
b. Aplikasi Control Lampu
Jika berhasil login maka secara otomatis akan melakukan runing pada program control lampu , seperti berikut ini tampilan awal form control lampu :
Ketika dilakukan akses pada lampu ON, maka akan tampil kondisi lampu pada status, seperti gambar berikut :
Gambar 3.8 Pengujian Button Lampu ON
Akses pada button lampu ON , maka akan tampil pada gambar berikut :
Gambar 3.10 Pengujian Button Off lampu
Akses pada button lampu OFF , maka akan tampil pada gambar berikut :
Gambar 3.12 Pengujian Button Dimmer lampu
Akses pada button lampu Dimmer , maka akan tampil pada gambar berikut :
4.Penambahan Input Range Kecerahan Dengan Sliding Button
Ketika dilakukan akses pada lampu dengan range 0%, maka akan tampil kondisi lampu pada status, seperti gambar berikut :
Gambar 3.14 Pengujian Sliding Button lampu
Ketika dilakukan akses pada lampu dengan range 20%, maka akan tampil kondisi lampu pada status, seperti gambar berikut :
Gambar 3.16 Pengujian Sliding Button lampu
Ketika dilakukan akses pada lampu dengan range 40%, maka akan tampil kondisi lampu pada status, seperti gambar berikut :
Gambar 3.18 Pengujian Sliding Button lampu
Ketika dilakukan akses pada lampu dengan range 60%, maka akan tampil kondisi lampu pada status, seperti gambar berikut :
Gambar 3.20 Pengujian Sliding Button lampu
Ketika dilakukan akses pada lampu dengan range 80%, maka akan tampil kondisi lampu pada status, seperti gambar berikut :
Gambar 3.22 Pengujian Sliding Button lampu
Ketika dilakukan akses pada lampu dengan range 100%, maka akan tampil kondisi lampu pada status, seperti gambar berikut :
Gambar 3.24 Pengujian Sliding Button lampu
5. Pembahasan Kode Program
Gambar 3.26 Tampilan program client
#include <SPI.h>
#include <Ethernet.h>//coding pemaggilan library
byte mac[]= {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED}; //coding mac dll byte ip[]= {192,168,1,1};
byte gateway[]={192,168,1,2}; byte subnet[]={255,255,255,248}; EthernetServer server(80);
byte LampsPin=5;//deklarasi variabel untuk lampu dan penentuan kaki PIN
byte dimm = 50; // untuk pertambahan jarak waktu dimmer lebih panjang
String readString; void setup(){
pinMode(LampsPin, OUTPUT); //pinMode(SwPin, INPUT);
Ethernet.begin(mac,ip,gateway,subnet); //coding server server.begin();
Serial.begin(9600);
Serial.println("Server LED TEST"); } void loop(){ EthernetClient client=server.available(); if (client){ while (client.connected()){ if (client.available()){ char c =client.read(); if (readString.length()<100){ readString +=c; } if(c=='\n'){ Serial.println(readString); client.println("HTTP/1.1 200 OK"); client.println("Content-Type : text/html"); client.println(); client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<head>"); client.println("<title>Kontrol Lampu</title>"); client.println("<style>");
client.println("body {margin-top:100px; font: 15px Lato, sans-serif; font-weight: 600; color: #000; }");
client.println(".capt{margin-bottom:10px; font: 18px Lato, sans-serif; font-weight: 600; color: #000; }");
client.println("</style>"); client.println("</head>"); client.println("<body>");
client.println("<table align=\"center\" border=\"0\">"); client.println("<caption class=\"capt\">Kontrol Kecerahan Lampu</caption>");
client.println("<tr>");
client.println("<td width=\"100\" height=\"50\">Mode Otomatis</td>");
client.println("<td colspan=\"3\">");
client.println("<a href=\"/?off\"\"><button>DIMMER OFF</button></a>");
client.println("<a href=\"/?on\"\"><button>DIMMER ON</button></a>"); //coding hal web
client.println("<a
href=\"/?dimm\"\"><button>AUTOMATIC</button></a>"); client.println("</td>");
client.println("</tr>"); client.println("<tr>");
client.println("<td width=\"120\">Mode Manual</td>"); client.println("<td width=\"150\" height=\"50\" align=\"left\" valign=\"middle\">");
client.println("<form method=\"GET\">");
client.println("<input name=\"terang\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"20\" oninput=\"nilai(value)\">");
client.println("<td width=\"45\" height=\"50\" align=\"right\" valign=\"middle\">"); client.println("<output for=\"vol\" id=\"volume\">0</output> %"); client.println("</td>"); client.println("<td align=\"right\">"); client.println("<input type=\"submit\" value=\"Terapkan\"></input>"); client.println("</form>"); client.println("</td>"); client.println("</tr>"); client.println("</table>"); client.println("<script>"); client.println("function nilai(vol){ document.querySelector('#volume').value = vol; }"); client.println("</script>"); client.println("</body>"); client.println("</html>"); delay(1); client.stop();
if(readString.indexOf("?terang=0")>0){ //coding sliding analogWrite(LampsPin, 255*0/100); state=0; } if(readString.indexOf("?terang=20")>0){ analogWrite(LampsPin, 255*20/100); state=1; } if(readString.indexOf("?terang=40")>0){ analogWrite(LampsPin, 255*40/100);
state=1; } if(readString.indexOf("?terang=60")>0){ analogWrite(LampsPin, 255*60/100); state=1; } if(readString.indexOf("?terang=80")>0){ analogWrite(LampsPin, 255*80/100); state=1; } if(readString.indexOf("?terang=100")>0){ analogWrite(LampsPin, 255*100/100); state=1; } if(readString.indexOf("?on")>0){ //coding on if(state==0){ lampuon(); } else if(state==1){ } state=1; }
if(readString.indexOf("?off")>0){ //coding off if(state==1){
lampuoff(); }
else if(state==0){ }
state=0; }
if(readString.indexOf("?dimm")>0){ //coding dimm if(state==0){ lampudimm(); } else if(state==1){ } state=0; } readString=""; } } } } } void lampuon(){ for(int i = 0; i < 255; i++) { analogWrite(LampsPin, i); delay(dimm); } } void lampuoff(){
for(int i = 255; i >= 0; i--) { analogWrite(LampsPin, i); delay(dimm); } } void lampudimm(){ for(int i = 0; i < 255; i++) { analogWrite(LampsPin, i); delay(dimm); } for(int i = 255; i >= 0; i--) { analogWrite(LampsPin, i); delay(dimm); } }
a) Kode program untuk pemanggilan library Spi dan Ethernet
Kode prograrm ini berfungsi untuk pemanggilan library Spi dan
Ethernet.
#include <SPI.h> coding pemaggilan library Spi
b) Kode program untuk nomor mac address dan target host
Kode prograrm ini berfungsi untuk menghubungkan data yang ditransmisikan mengunakan nomer IP untuk menentukan client terhubung pada server yang tepat , dan nomor port untuk menentukan agar aplikasi client terhubung pada server sesuai nomer
port yang tepat , berikut kode programnya :
byte mac[]= {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};//mac address byte ip[]= {192,168,1,1};//ip addres arduino
byte gateway[]={192,168,1,2}; //ip gateway byte subnet[]={255,255,255,248};//subnet mask EthernetServer server(80); //server port
String readString; //deklarasi variabel untuk readstring (membaca url pada address bar)
c) Kode program untuk penentuan kaki pin dan waktu dimmer
Kode program ini digunakan penentuan kaki Pin dan waktu dimmer byte LampsPin=5;//deklarasi variabel untuk lampu dan penentuan kaki PIN
byte dimm = 50; // untuk pertambahan jarak waktu dimmer lebih panjang
d) Kode program untuk koneksi dengan server
Kode program ini digunakan agar client dapat terkoneksi dengan
server secara aplikasi, berfungsi untuk menghubungkan informasi client-server, data dari aplikasi client di kirimkan ke server, kemudian
server mengirimkan informasi yang di butuhkan client dengan kode berikut:
Ethernet.begin(mac, ip, gateway, subnet); server.begin();
Serial.print("server is at "); Serial.println(Ethernet.localIP()); }
void loop(){
EthernetClient client = server.available(); if (client) {
while (client.connected()) { if (client.available()) {
char c = client.read();
//read char by char HTTP request if (readString.length() < 100) { //store characters to string readString += c;
e) Kode program untuk halaman web
Pada program halaman web, untuk menjalankan program di inputkan secara manual pada aplikasi Arduino IDE, berikut ini kode programnya if (client){ while (client.connected()){ if (client.available()){ char c =client.read(); if (readString.length()<100){ readString +=c; } if(c=='\n'){ Serial.println(readString); client.println("HTTP/1.1 200 OK"); client.println("Content-Type : text/html"); client.println(); client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<head>");
client.println("<title>Kontrol Lampu</title>"); // tittle page
client.println("<style>");
client.println("body {margin-top:100px; font: 15px Lato, sans-serif; font-weight: 600; color: #000; }");
client.println(".capt{margin-bottom:10px; font: 18px Lato, sans-serif; font-weight: 600; color: #000; }");
client.println("</style>");
//kode program diatas adalah css style untuk memperindah tampilan halaman web.
client.println("<body>");
client.println("<table align=\"center\" border=\"0\">");
client.println("<caption class=\"capt\">Kontrol Kecerahan Lampu</caption>");
client.println("<tr>");
client.println("<tdwidth=\"100\"height=\"50\">Mode Otomatis</td>"); client.println("<td colspan=\"3\">");
client.println("<ahref=\"/?off\"\"><button>DIMMER OFF</button></a>"); //kode program diatas menampilkan button off pada halaman web.
client.println("<ahref=\"/?on\"\"><button>DIMMER ON</button></a>"); // kode program diatas menampilkan button on pada halaman web.
client.println("<ahref=\"/?dimm\"\"><button>AUTOMATIC</button></a>"); // kode program diatas menampilkan button automatic pada halaman web.
client.println("</td>"); client.println("</tr>"); client.println("<tr>");
client.println("<td width=\"120\">Mode Manual</td>");
client.println("<tdwidth=\"150\"height=\"50\" align=\"left\" valign=\"middle\">");
client.println("<form method=\"GET\">");
client.println("<input name=\"terang\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"20\"
// kode program diatas menampilkan input range pada halaman web dengan masukkan max 100 dan masukkan min 0,dengan kelipatan 20.
oninput=\"nilai(value)\">"); client.println("</td>");
client.println("<td width=\"45\" height=\"50\" align=\"right\" valign=\"middle\">");
client.println("<output for=\"vol\" id=\"volume\">0</output> %"); client.println("</td>");
client.println("<td align=\"right\">");
client.println("<input type=\"submit\" value=\"Terapkan\"></input>"); // kode program diatas menampilkan button terapkan pada halaman web untuk menerapkan step yang dipilih dari 0-100%.
client.println("</form>"); client.println("</td>"); client.println("</tr>"); client.println("</table>"); client.println("<script>"); client.println("function nilai(vol){ document.querySelector('#volume').value = vol; }"); client.println("</script>"); client.println("</body>"); client.println("</html>"); delay(1); client.stop();
Input dari halaman web yang diketik akan menampilkan tampilan
control lampu seperti Gambar 3.1
f) Kode program untuk menyalakan lampu dengan menu sliding button
Kode program ini terletak pada Sliding button untuk menyalakan lampu berikut kode program:
if(readString.indexOf("?terang=0")>0){ analogWrite(LampsPin, 255*0/100); state=0;
}
User menggeser sliding button kedalam nilai 0% maka akan mengeluarkan listrik 0 Volt menghasilkan nyala lampu seperti gambar 3.14
if(readString.indexOf("?terang=20")>0){ analogWrite(LampsPin, 255*20/100); state=1;
}
User menggeser sliding button kedalam nilai 20% maka akan mengeluarkan listrik 1 Volt menghasilkan nyala lampu seperti gambar 3.16
if(readString.indexOf("?terang=40")>0){ analogWrite(LampsPin, 255*40/100); state=1;
}
User menggeser sliding button kedalam nilai 40% maka akan mengeluarkan listrik 2 Volt menghasilkan nyala lampu seperti gambar 3.18
if(readString.indexOf("?terang=60")>0){ analogWrite(LampsPin, 255*60/100); state=1;
}
User menggeser sliding button kedalam nilai 60% maka akan mengeluarkan listrik 3 Volt menghasilkan nyala lampu seperti gambar 3.20
if(readString.indexOf("?terang=80")>0){ analogWrite(LampsPin, 255*80/100); state=1;
}
User menggeser sliding button kedalam nilai 80% maka akan mengeluarkan listrik 4 Volt menghasilkan nyala lampu seperti gambar 3.22
if(readString.indexOf("?terang=100")>0){ analogWrite(LampsPin, 255*100/100); state=1;
}
User menggeser sliding button kedalam nilai 100% maka akan mengeluarkan listrik 5 Volt menghasilkan nyala lampu seperti gambar 3.24
Cara kerja kode program di atas yaitu client mengakses server untuk menyalakan lampu dengan range 0%-100%.
g) Kode program untuk menyalakan lampu dengan menu on
if(readString.indexOf("?on") >0){ if(status==0){ for(int i = 0; i < 255; i++) { analogWrite(led, i); delay(20); } status=1; } else{ }}
Cara kerja kode program di atas yaitu client mengakses
server untuk mengaktifkan lampu
Kode program ini terletak pada button off untuk mematikan lampu off berikut kode programnya :
if (readString.indexOf("?off") >0){ if(status==1){ for(int i = 255; i >= 0; i--) { analogWrite(led, i); delay(20); } status=0; } else{} }
Cara kerja kode program di atas yaitu client mengakses server untuk mematikan lampu.
i) Kode program untuk dimmer dengan menu button dimmer
Kode program ini terletak pada button dimmer untuk menyalakan lampu dimmer berikut kode program:
void lampudimm(){ for(int i = 0; i < 255; i++) { analogWrite(LampsPin, i); delay(dimm); } for(int i = 255; i >= 0; i--) { analogWrite(LampsPin, i); delay(dimm);}
Cara kerja kode program di atas yaitu client mengakses server untuk menyalakan lampu dimmer.
