Anda di halaman 1dari 23

1.

Pemantauan sensor analog


URL http://192.168.1.10 Tampilan web

Sketch /* * Web Server sederhana yang menampilkan nilai pin input analog * Arduino sebagai web server */ #include <SPI.h> #include <Ethernet.h> byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; byte ip[] = { 192, 168, 1, 10}; // IP address web server EthernetServer server(80); void setup() { Ethernet.begin(mac, ip); server.begin(); } void loop() { EthernetClient client = server.available(); if (client) { // http request yang diakhiri dengan baris blank boolean current_line_is_blank = true;

while (client.connected()) { if (client.available()) { char c = client.read(); // jika sampai di akhir baris (menerima karakter baris baru // newline) dan barisnya blank, http request sudah berakhir, // sehingga reply bisa dikirim if (c == '\n' && current_line_is_blank) { // kirim header http response standar client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); // output nilai tiap pin input analog for (int i = 0; i < 6; i++) { client.print("analog input "); client.print(i); client.print(" = "); client.print(analogRead(i)); client.println("<br />"); } break; } if (c == '\n') { // mulai baris baru current_line_is_blank = true; } else if (c != '\r') {

// didapat suatu karakter pada baris sekarang current_line_is_blank = false; } } } // beri waktu kepada web browser untuk menerima data delay(1); client.stop(); } }

Analisa : Sketch menggunakan Ethernet library (Ethernet.h) dan menggunakan MAC address dan IP address dari Ethernet shield. IP address yang ditetapkan pada sketch ini merupakan alamat web server-nya. Pengetikan 192.168.1.10 pada address bar web browser akan menampilkan sebuah halaman web yang memperlihatkan nilai pin analog input 0 sampai 5. Alamat 192.168.1.10 merupakan alamat lokal yang hanya bisa diakses pada jaringan lokal. Jika diinginkan agar web server bisa diakses melalui Internet, perangkat router harus dikonfigurasi agar bisa meneruskan (forward) pesan yang datang ke Arduino atau disebut teknik port forwarding.Koneksi Ethernet shield yang terbuka di Internet bisa menyebabkannya bisa diakses siapapun lewat IP address, sehingga harus berhati-hati karena Ethernet library tidak menyediakan mekanisme koneksi yang aman (secure).Dua baris perintah pada fungsi setup () berfungsi untuk menginisialisasi Ethernet library dan mengkonfigurasi web server dengan IP address yang digunakan. Loop terus menunggu lalu mengolah tiap permintaan yang diterima web server: Client client = server.available(); Class client di sini adalah web server yang mengolah pesan untuk IP address yang diberikan ke server.. if (client) memeriksa apakah client sudah berhasil memulai. while(client.connected()) memeriksa apakah web server yang terhubung ke client membuat request. client.available() dan client.read() memeriksa apakah data sudah tersedia, dan membaca byte-nya. Hal ini mirip seperti Serial.available(), hanya saja data datang dari jaringan, bukan port serial. Kode membaca data terus sampai menemukan baris pertama yang tanpa data. Header HTTP dikirim dengan perintah client.println dan diikuti dengan menampilkan nilai-nilai di port analog. Kesimpulan : Pada percobaan ini kita dapat menampilkan kaki analog pada web seperti pada serial monitor dan dapat memantau nilai dari analog

2 Pemantauan sensor analog dan pengendalian URL http://192.168.1.10/?pinD2=1&pinA9=128 Tampilan halaman web

Sketch /* * Web Server Parsing * Respon terhadap permintaan (request) di URL untuk mengubah * port digital dan analog output, * menampilkan nomor port yang berubah dan nilai pin input * analog */ #include <SPI.h> #include <Ethernet.h> byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; byte ip[] = { 192,168,1,10 }; EthernetServer server(80); void setup() { Serial.begin(9600);

Ethernet.begin(mac, ip); server.begin(); Serial.println("ready"); }

void loop() { EthernetClient client = server.available(); if (client) { while (client.connected()) { if (client.available()) { // counter untuk nomor request perubahan pin int digitalRequests = 0; int analogRequests = 0; if( client.find("GET /") ) { // cari 'GET' // cari token diawali pin dan diakhiri baris blank pertama while(client.findUntil("pin", "\n\r")){ // cari pin di akhir // baris char type = client.read(); // D atau A int pin = client.parseInt(); // nilai integer ASCII berikutnya // dalam stream adalah pin int val = client.parseInt(); // integer berikutnya -> nilai if( type == 'D') { Serial.print("Pin digital "); pinMode(pin, OUTPUT);

digitalWrite(pin, val); digitalRequests++; } else if( type == 'A'){ Serial.print("Pin analog "); analogWrite(pin, val); analogRequests++; } else { Serial.print("Invalid ! "); Serial.print(type); } Serial.print(pin); Serial.print("="); Serial.println(val); } } Serial.println(); // findUntil telah mendeteksi baris blank (lf diikuti cr) // sehingga http request telah berakhir dan kirim reply // kirim header http response standard client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); // output nomor pin yang ditangani oleh request

client.print(digitalRequests); client.print(" pin digital yang diubah"); client.println("<br />"); client.print(analogRequests); client.print(" pin analog yang diubah"); client.println("<br />"); client.println("<br />"); // tampilkan nilai tiap pin analog for (int i = 0; i < 6; i++) { client.print("nilai pin input analog "); client.print(i); client.print(" -> "); client.print(analogRead(i)); client.println("<br />"); } break; } } // beri waktu web browser untuk menerima data delay(1); client.stop(); } }

Analisa : Sketch akan membaca request yang dikirim dari browser dan mengubah nilai-nilai port output digital dan analog dari Arduino. URL (browser request) berisi satu atau lebih field yang diawali dengan kata pin diikuti huruf D untuk pin digital atau A untuk pin analog. Nilai untuk pin diikuti tanda sama dengan (=). Sebagai contoh, http://192.168.1.10/?pinD2=1 akan menjadikan pin 2 digital on dan http://192.168.1.10/?pinD2=0 akan menjadikan pin 2 digital off Kesimpulan : Pada percobaan ini kita dapat menampilkan kaki analog pada web seperti pada serial monitor dan dapat memantau nilai dari analog dan juga dapat mengatur dan mengubah nilai yang terdapat pada pin analog

3 Pemantauan sensor analog dan digital URL http://192.168.1.10/analog/ Tampilan halaman web

http://192.168.1.10/digital/

Sketch /* * Web Server Multi Page * Respon atas request di URL untuk melihat port output digital * dan analog * http://192.168.1.10/analog/ display data di pin analog * http://192.168.1.10/digital/ display data di pin digital */ #include <SPI.h> #include <Ethernet.h> byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; byte ip[] = { 192,168,1,10 }; const int MAX_PAGE_NAME_LEN = 8; // karakter maks di nama // halaman char buffer[MAX_PAGE_NAME_LEN+1]; // nama halaman + // terminating null EthernetServer server(80); EthernetClient client; void setup() { Serial.begin(9600); Ethernet.begin(mac, ip); server.begin(); Serial.println("Ready"); }

void loop() { client = server.available(); if (client) { while (client.connected()) { if (client.available()) { if( client.find("GET ") ) { // look for the page name memset(buffer,0, sizeof(buffer)); // clear buffer if(client.find( "/")) if(client.readBytesUntil('/', buffer, MAX_PAGE_NAME_LEN )) { if(strcmp(buffer, "analog") == 0) showAnalog(); else if(strcmp(buffer, "digital") == 0) showDigital(); else unknownPage(buffer); } } Serial.println(); break; } }

// beri waktu web browser menerima data delay(1); client.stop(); } } void showAnalog() { Serial.println("analog"); sendHeader(); client.println("<h1>Pin Analog</h1>"); // menampilkan nilai pin analog input for (int i = 0; i < 6; i++) { client.print("pin analog "); client.print(i); client.print(" = "); client.print(analogRead(i)); client.println("<br />"); } } void showDigital() { Serial.println("digital"); sendHeader(); client.println("<h1>Pin Digital</h1>"); // menampilkan nilai pin digital

for (int i = 2; i < 8; i++) { pinMode(i, INPUT); client.print("pin digital "); client.print(i); client.print(" = "); if(digitalRead(i) == LOW) client.print("LOW"); else client.print("HIGH"); client.println("<br />"); } client.println("</body></html>"); } void unknownPage(char *page) { sendHeader(); client.println("<h1>Unknown Page</h1>"); client.print(page); client.println("<br />"); client.println("Recognized pages are:<br />"); client.println("/analog/<br />"); client.println("/digital/<br />"); client.println("</body></html>"); } void sendHeader() { // kirim header http response standar

client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); client.println("<html><head><title>Web server multi-page Example</title>"); client.println("<body>"); } Analisa: Sketch mencari request halaman dengan nama analog atau digital dan menampilkan nilai-nilai pin-nya. http://192.168.1.10/analog/ atau http://192.168.1.10/digital/ Sketch mencari karakter / untuk menentukan ujung nama halaman. Web server akan melaporkan halaman tidak dikenal jika karakter / tidak mengakhiri nama halaman.

Kesimpulan : Pada praktikum kali ini, kita menampilkan status sensor analog dan digital pada halaman web dengan 2 halaman yang berbeda. Jika ingin menampilkan status sensor analog dan digital, kita menggunakan link http://192.168.1.10/analog/ untuk analog atau http://192.168.1.10/digital/ untuk digital. Kita menggunakan push button untuk menentukan high/low pada pinnya. Kita menyambungkan kaki 5V dan menggunakan resistor 10K sesuai dengan raangkaiannya dan dimasukkan ke kaki shield dan arduino. Jika push button ditekan, maka layar monitor akan menunjukkan high, dan jika push button dilepas, maka akan menunjukkan low.

4 Pemantauan sensor analog dan digital (format tabel HTML) URL http://192.168.1.10/analog/ http://192.168.1.10/digital/ Tampilan di web

Sketch /* * Web Server Multi Page HTML * Display nilai pin analog dan digital dengan format HTML */ #include <SPI.h> // untuk Arduino versi sebelum 0018 #include <Ethernet.h> byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; byte ip[] = { 192,168,1,10 }; // Buffer harus cukup besar untuk menampung nama halaman dan // terminating null const int MAX_PAGE_NAME_LEN = 8+1; // karakter maks di // dalam satu halaman name + null char buffer[MAX_PAGE_NAME_LEN]; EthernetServer server(80); EthernetClient client; void setup() {

Serial.begin(9600);

Ethernet.begin(mac, ip); server.begin(); pinMode(13,OUTPUT); for(int i=0; i < 3; i++) { digitalWrite(13,HIGH); delay(500); digitalWrite(13,LOW); delay(500); } } void loop() { client = server.available(); if (client) { while (client.connected()) { if (client.available()) { if( client.find("GET ") ) { // mencari nama halaman memset(buffer,0, sizeof(buffer)); // clear buffer if(client.find( "/")) if(client.readBytesUntil('/', buffer, MAX_PAGE_NAME_LEN ))

{ if(strcasecmp(buffer, "analog") == 0) showAnalog(); else if(strcasecmp(buffer, "digital") == 0) showDigital(); else unknownPage(buffer); } } break; } } // beri waktu web browser unutk menerima data delay(1); client.stop(); } } void showAnalog() { sendHeader("Multi-page: Analog"); client.println("<h2>Pin Analog</h2>"); client.println("<table border='1' >"); for (int i = 0; i < 6; i++) { // keluarkan nilai tiap pin analog input client.print("<tr><td>pin analog ");

client.print(i); client.print(" </td><td>"); client.print(analogRead(i)); client.println("</td></tr>"); } client.println("</table>"); client.println("</body></html>"); } void showDigital() { sendHeader("Multi-page: Digital"); client.println("<h2>Pin Digital</h2>"); client.println("<table border='1'>"); for (int i = 2; i < 8; i++) { // perlihatkan nilai pin digital pinMode(i, INPUT); digitalWrite(i, HIGH); // aktifkan R pull-up internal client.print("<tr><td>pin digital "); client.print(i); client.print(" </td><td>"); if(digitalRead(i) == LOW) client.print("Low"); else client.print("High"); client.println("</td></tr>");

} client.println("</table>"); client.println("</body></html>"); } void unknownPage(char *page) { sendHeader("Unknown Page"); client.println("<h1>Unknown Page</h1>"); client.print(page); client.println("<br />"); client.println("Recognized pages are:<br />"); client.println("/analog/<br />"); client.println("/digital/<br />"); client.println("</body></html>"); } void sendHeader(char *title) { // kirim http response header standard client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); client.print("<html><head><title>"); client.println(title); client.println("</title><body>"); }

Analisa: Kode berikut ini untuk menampilkan tabel dengan lebar border 1 : client.println("<table border='1' >"); Struktur loop menentukan sel data tabel dengan tag <td> dan entri row dengan tag <tr>. Kode berikut ini akan menempatkan string "pin analog" di sel mulaibaris baru : client.print("<tr><td>pin analog "); Kemudian diikuti oleh nilai variabel i : client.print(i); Baris berikutnya berisi tag untuk menutup sel dan mulai sel baru : client.print(" </td><td>"); Baris ini menuliskan nilai dari analogRead ke dalam sel : client.print(analogRead(i)); Tag untuk mengakhiri sel dan akhir baris adalah : client.println("</td></tr>"); Loop for diulang sampai semua 6 nilai analog dituliskan. Kesimpulan: Pada praktikum ini, semuanya rancangan dan cara kerjanya sama dengan percobaan sebelumnya, hanya saja ditambahkan tabel dalam format HTML yang bisa ditambahkan didalam sketch yang kita gunakan.

5 Pengendalian dengan Form (POST)


URL http://192.168.1.10 Tampilan halaman web

Sketch /* * Web Server Post * on/off pin 8 dengan menggunakan HTML form */ #include <SPI.h> #include <Ethernet.h> byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

byte ip[] = { 192,168,1,10 }; const int MAX_PAGENAME_LEN = 8; // char maks pd nama // halaman char buffer[MAX_PAGENAME_LEN+1]; // karakter tambahan // untuk terminating null EthernetServer server(80); void setup() { Ethernet.begin(mac, ip); server.begin(); delay(2000); } void loop() { EthernetClient client = server.available(); if (client) { int type = 0; while (client.connected()) { if (client.available()) { // GET, POST, or HEAD memset(buffer,0, sizeof(buffer)); // clear buffer if(client.readBytesUntil('/', buffer,sizeof(buffer))){ if(strcmp(buffer,"POST ") == 0){ client.find("\n\r"); // skip body // cari string yang diawali dengan "pin", dan stop pada

// baris blank yang pertama // parameter POST dalam format pinDx=Y // dimana x adalah nomor pin dan Y adalah 0 untuk LOW // dan 1 untuk HIGH while(client.findUntil("pinD", "\n\r")){ int pin = client.parseInt(); int val = client.parseInt(); pinMode(pin, OUTPUT); digitalWrite(pin, val); } } sendHeader(client,"Post example"); //buat button HTML untuk mengontrol pin 8 client.println("<h2>Klik button untuk meng-on/off kan pin 8</h2>"); client.print( "<form action='/' method='POST'><p><input type='hidden' name='pinD8'"); client.println(" value='0'><input type='submit' value='Off'/></form>"); //create HTML button to turn on pin 8 client.print( "<form action='/' method='POST'><p><input type='hidden' name='pinD8'"); client.print(" value='1'><input type='submit' // nomor pin // 0 atau 1

value='On'/></form>"); client.println("</body></html>"); client.stop(); } } } // beri waktu web browser untuk menerima data delay(1); client.stop(); } } void sendHeader(EthernetClient client, char *title) { // send a standard http response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); client.print("<html><head><title>"); client.print(title); client.println("</title><body>"); } Analisa: Sketch membuat halaman web yang memiliki form dengan buton.Melalui web browser, user akan melihat button dan web server Arduino akan merespon setiap klik button. Sketch akan meng-on/off pin tergantung button yang ditekan (klik).Halaman web dengan form user interface berisi tag-tag HTML untuk pengontrolan (button, checkbox, label, dan lain-lain). Sketch menyediakan button sebagai user interface. Barisbaris berikut ini membuat form dengan nama button pinD8 yang dilabeli OFF, yang

akan mengirim balik nilai 0 jika di-klik : client.print("<form action='/' method='POST'><p><input type='hidden' name='pinD8'"); client.println(" value='0'><input type='submit' value='Off'/></form>"); Ketika server menerima request dari browser, akan dicari string "POST " untuk mengenali awal form POST : if(strcmp(buffer,"POST ") == 0) // mencari awal form POST finder.find("\n\r"); // skip body // cari parameter yang diawali "pin" dan stop pada awal baris blank // parameter POST dalam format pinDx=Y // dimana x nomor pin dan Y = 0 untuk LOW dan 1 untuk HIGH Jika button OFF ditekan, halaman yang diterima akan berisi string pinD8=0, atau pinD8=1 untuk button ON. Sketch terus mencari nama button (pinD): while(finder.findUntil("pinD", "\n\r")) Metode findUntil pada kode berikutnya akan mencari pinD dan stop mencari pada akhir baris (\n\r adalah carriage return untuk baris baru yang dikirim oleh web browser pada akhir form). Angka yang mengikuti nama pinD adalah nomor pin : int pin = finder.getValue(); Nilai yang mengikuti nomor pin akan 0 jika button OFF ditekan atau 1 jika button ON ditekan : int val = finder.getValue(); 20Nilai yang diterima akan ditulis ke pin setelah mode pin diset sebagai output : pinMode(pin, OUTPUT); digitalWrite(pin, val); Lebih banyak button dapat ditambahkan dengan menyisipkan tag untuk kontrol tambahan. Baris berikut ini untuk menambahkan button yang lain untuk meng-on-kan pin digital 8 : //membuat button HTML untuk meng-on-kan pin 9 client.print("<form action='/' method='POST'><p><input type='hidden' name='pinD8'"); client.print(" value='1'><input type='submit' value='On'/></form>");

Kesimpulan : Praktikum ini bertujuan agar tampilan halaman web memungkinkan user untuk memilih perintah yang akan dilakukan oleh Arduino. Sketch yang kita gunakan membuat halaman web memiliki form dengan button on/off. Kita menggunakan LED untuk mengindikasikan bahwa rangkaian yang kita pakai dapat di on/off kan melalui web. Button on/off pada halaman web ini bertujuan untuk kita memutuskan apakah LED yang digunakan pada keadaan hidup/mati. Jika pada web kita mengklik tombol ON, maka LED pada rangkaian akan menyala. Dan jika kita mengklik tombo OFF, maka LED akan mati.