BAB III IMPLEMENTASI

Transkripsi

1 BAB III IMPLEMENTASI 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

2 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.

3 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.

4 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

5 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. USER Data Dikirim Lampu ON Aplikasi Client Jaringan Lokal Aplikasi Server Data Status Dikirim SERVER Arduino Gambar 3.5 Diagram komunikasi Client Server

6 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

7 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

8 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 pada gambar berikut : Gambar 3.9 Button ON

9 23 Gambar 3.10 Pengujian Button Off lampu Akses pada button lampu OFF, maka akan tampil pada gambar berikut : Gambar 3.11 Button OFF

10 24 Gambar 3.12 Pengujian Button Dimmer lampu Akses pada button lampu Dimmer, maka akan tampil pada gambar berikut : Gambar 3.13 Button Dimmer

11 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%

12 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%

13 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%

14 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%

15 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%

16 30 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 Gambar 3.25 Sliding Button dengan100%

17 31 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 byte state = 0;//

18 32 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/ 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>");

19 33 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 ON</button></a>"); href=\"/?on\"\"><button>dimmer //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>");

20 34 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);

21 35 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){

22 36 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(){

23 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

24 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 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 byte state = 0;//

25 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);

26 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/ 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("</head>");

27 41 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.

28 42 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

29 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 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;

30 44 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 Kode program ini untuk menyalakan lampu berikut kode programnya :

31 45 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 h) Kode program untuk mematikan lampu dengan menu off

32 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.

33 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.