1 BAB III IMPLEMENTASI A. Aplikasi Client Pembuatan program aplikasi client akan dipergunakan untuk pengontrolan lampu, pemrograman pada client menera...
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. 15
16
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.
17
Pembahasan System
USER Client
Aplikasi Client
Jaringan Lokal
Server Arduino Uno
PIN 5
Lampu
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.
18
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.
Gambar 3.4 Diagram Software
19
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. Data Dikirim
USER Lampu ON Aplikasi Client
Jaringan Lokal
Aplikasi Server
Data Status Dikirim SERVER Arduino
Gambar 3.5 Diagram komunikasi Client – Server
20
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 :
Gambar 3.6 Tampilan client
21
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 :
Gambar 3.7 Form control lampu
22
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
gambar berikut :
Gambar 3.9 Button ON
pada
23
Gambar 3.10 Pengujian Button Off lampu
Akses pada button lampu
OFF , maka akan tampil pada
gambar berikut :
Gambar 3.11 Button OFF
24
Gambar 3.12 Pengujian Button Dimmer lampu Akses pada button lampu Dimmer , maka akan tampil pada gambar berikut :
Gambar 3.13 Button Dimmer
25
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
Gambar 3.15 Sliding Button dengan 0%
26
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
Gambar 3.17 Sliding Button dengan 20%
27
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
Gambar 3.19 Sliding Button dengan 40%
28
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
Gambar 3.21 Sliding Button dengan 60%
29
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
Gambar 3.23 Sliding Button dengan 80%
30
Ketika dilakukan akses pada lampu dengan range 100%, maka akan tampil kondisi lampu pada status, seperti gambar berikut :
void lampuon(){ for(int i = 0; i < 255; i++) { analogWrite(LampsPin, i); delay(dimm);
} } void lampuoff(){
37
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 #include <Ethernet.h>//coding pemaggilan library Ethernet
38
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 (membaca url pada address bar)
variabel
untuk
readstring
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 panjang byte state = 0;//
jarak waktu dimmer lebih
39
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; //Serial.print(c);}
40
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(""); client.println(""); client.println(""); client.println("Kontrol Lampu");
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
43
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
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 Kode program ini untuk menyalakan lampu berikut kode programnya :
45
if(readString.indexOf("?on") 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
h) Kode program untuk mematikan lampu dengan menu off
>0){
46
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.
47
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.
