Contents
Dengan Arduino kita dapat membuat sebuah web server sederhana semacam Apache, Nginx, Mongoose, dll. Tentunya dengan skala yang terbatas. Web server dengan Arduino ini banyak dimanfaatkan untuk meng-interface-kan perangkat I/O melalui protokol TCP/IP. Untuk media jaringannya, tergantung kebutuhan, bisa melalui jaringan intranet (LAN) maupun internet. Sekali lagi, tergantung kebutuhan, sehingga topologi jaringannya pun menyesuaikan dengan kebutuhan tersebut.
Untuk membuat web server I/O dengan Arduino, Anda membutuhkan tambahan modul Ethernet atau WIFI. Bentuknya dapat berupa ‘shield’ (Ethernet shield atau WIFI shield) maupun berupa modul (Ethernet/WIFI module). Kalau bentuknya berupa shield, Anda dapat langsung menancapkannya ke Arduino Uno, tapi jika bentuknya modul Anda harus mengkoneksikan keduanya dengan beberapa kabel jumper. Untuk tutorial kali, kita akan menggunakan sebuah Ethernet shield sebagai jembatan antara Arduino (Uno) dengan dunia TCP/IP.
Alat dan Bahan Web Server – Arduino
- Arduino Uno (versi SMD harga 45.500 beli di sini, versi DIP harga65.000 beli di situ)
- Ethernet Shield (harga 73.500 beli di sini)
- Kabel jumper Male to Male (1 buah) – beli di sini
[AdSense-A]
Tujuan Percobaan
Membuat web server I/O sederhana dengan Arduino dan Ethernet shield. Jika ada input pada pin 2 terbuka atau tertutup akan menampilkannya pada web, dan dapat dibuka melalui web server.
Gambar Rangkaian Web Server – Arduino
Gambar rangkaiannya sederhana aja bukan? cukup menggunakan ethernet shield dan satu jumperan kabel ke pin 2. Jumperan ini sebenarnya hanya untuk membedakan saat pin 2 ber-logic ‘1’ atau ‘0’ dengan menghubungkannya ke 5V atau ke ground.
Sketch
Jika hardware sudah siap, upload-lah sketch berikut ke Arduino
/*
Web Server I/O sederhana dengan Arduino dan ethernet shield
*/
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = {0xDE, 0xAD, 0xBE, 0xE2, 0xF1, 0xED };
IPAddress ip(192,168,27,177);
EthernetServer server(80);
String HTTP_req;
int ind1 = 0;
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
while (!Serial) {
}
Ethernet.begin(mac, ip);
server.begin();
Serial.print("IP server ");
Serial.println(Ethernet.localIP());
pinMode(2, INPUT_PULLUP);
digitalWrite(2, LOW);
}
void loop() {
//cek indikator
ind1 = digitalRead(2);
// listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println("new client");
// an http request ends with a blank line
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
HTTP_req += c;
Serial.write(c);
if (c == '\n' && currentLineIsBlank) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 5"); // refresh page tiap 5 detik
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<H1>");
client.println("Web Server IO dengan Arduino");
client.println("</H1>");
client.println("<br />");
//tampilkan indikator
client.println("Indikator1 : ");
client.println(ind1);
client.println("<br />");
client.println("<br />");
client.println("</html>");
HTTP_req = "";
break;
}
if (c == '\n') {
currentLineIsBlank = true;
}
else if (c != '\r') {
currentLineIsBlank = false;
}
}
}
delay(100);
client.stop();
Serial.println("client disonnected");
}
}
Pengujian Web Server dengan Arduino
Untuk menguji hardware dan software yang sudah tertanam di Arduino (firmware), hubungkan laptop dengan Ethernet shield melalui kabel LAN (straight). Set IP address laptop dalam satu class dengan IP Arduino. Perhatikan baris 8 pada sketch di atas. IP Arduino adalah 192.168.27.177, maka coba kita set IP laptop menjadi 192.168.27.178. Dengan demikian antara laptop dan Arduino sudah berada dalam satu class IP dan bisa langsung berkomunikasi. Apakah jika beda class IP, kedua device bisa berkomunikasi? Jawabannya bisa saja, namun Anda akan membutuhkan sebuah router untuk mentranslasikan arah komunikasi data.
Kembali ke pengujian kita, untuk sekedar memastikan apakah antara laptop dan Arduino sudah terhubung secara jaringan (LAN), buka jendela command prompt melalui menu Start, dan di kotak search tulis ‘cmd’ [enter]. Berikutnya ping IP Arduino dengan perintah ‘ping 192.168.27.177’ Jika ada reply dari Arduino berarti kedua device sudah terhubung.
Berikutnya buka web browser di laptop Anda, dan ketik IP Arduino yaitu 192.168.27.177. Sesaat kemudian seharusnya akan muncul tampilan seperti gambar di bawah
Kemudian coba jumper pin 2 ke pin GND dan ke pin 5V di Ethernet shield. Perhatikan tampilan di web browser, seharusnya akan berubah-ubah sesuai input yang Anda berikan di pin 2.
Jika menggunakan ethernet shield, maka pin 10, 11, 12, 13 tidak dapat Anda gunakan sebagai pin digital I/O biasa, karena sudah digunakan untuk interfacing dengan ethernet shield melalui protokol SPI.
Selamat, Anda sudah berhasil membuat web server I/O sederhana dengan Arduino. Sekarang tinggal ide Anda, mau dikembangkan seperti apa? Selamat berkreasi….
[AdSense-A]
a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com
saya mau buat judul skripsi tentang sistem informasi debit air dengan arduino uno dan web server, itu mungkin bisa gak di gabungkan antara sensor debit air dengan web servernya
sangat bisa mas
Apa saya harus upload dulu buat sett web server, baru sensor nya?
Apa abang punya coding untuk sett sensor water flow?
1. sketch-nya jadi satu antara web server dan sensor handling.
2. Ada, di search aja di blog ini
Kalau boleh tau keywordnya untuk search apa ya?
Mohon bantuannya
mas penginnya apa, tinggal diketikkan aja
Oya mas, kan *hendrik, kan tadi bikin sistem informasi debit air menggunakan web server, apakah kita harus buat webnya juga atau webnya otomatis ada setelah kita udah sketch, makasih
webnya itu ada di dalam sketch mas, pake html (bisa juga ditambahi javascript). Jadi begitu sketch di-upload, otomatis web udah ada
salam kenal mas, saya mau nanya bagai mana cara membuat atau mendesain tampilan web servernya agar lebih menarik, contohnya menambahkan foto atau dan mengganti background, terimakasih mas.
salam kenal juga mas. Untuk mempercantik tampilan bisa pake coding html biasa
tutorial nya tlg dong mas untuk yang di ethernet shield biar bisa belajar.
Salam kenal mas ajie.
Mau tanya? Untuk coding arduinonya bagaimana ya dan cara menyambungkannya ke hosting saya?
pake IoT mas, bisa pake REST (restful) atau MQTT
mas salam kenal..
mau tanya mas gabungin sketch web server dan sensor handling bagai mana yaa,,
cobak berikan contoh 1 codding gabungannya mas…
terima kasih
di atas kan udah ada contohnya mas
salam kenal mas.. itu dapat IP buat arduinonya darimana ya?
Salam kenal juga mas. IP di setting sendiri sesuai jaringan LAN-nya
assalamu’alaikum mas,
artikel mas sangat menarik, dan saya ingin membuat sesuatu dengan arduino dan juga internet.
Jadi gini mas, saat tugas akhir, saya ingin membuat thermohygrometer berbasis sms untuk notifikasi, serta pada web ada kalkulasi suhu dan kelembaban dalam bentuk grafik, kira kira apa aja yaa yg saya butuhin mas ?
terima kasih sudah mau membantu mas.
ooo iya, kalo buat internet gitu bisa pakai modem yg bisa dibawa” gk mas ?
jadi alat thermohygronya bisa lebih portable
bisa mas, berarti alternatifnya pake MIFI
waalaikumsalam wr wb
kurang lebih yang dibutuhkan:
– sensor suhu
– sensor kelembaban
– arduino / ESP8266
– koneksi internet (bisa pake sim800/900 atau MIFI)
– jika pake MIFI dengan port RJ45 berarti butuh ethernet module
assalamualaikum ,bang ngerti pake modul sim 900a/800l kirim data ke srver pake gprs
waalaikumsalam wr wb. Ngerti
Waduh mas, ini blog luar biasa keren, luar biasa juga yang numpang iklan ya.. jadi susah baca tulisan mas Ajie, ketutup iklan..
makasih mas, maaf atas iklannya, buat beli gorengan 🙂
bisa ajarkan saya ngoding mas ?
gini aja, coba belajar tutorial yg ada di blog ini, kl ada yg ga paham, tanya aja gimna?
izin bertanya, saya sudah ngikutin tutorial diatas dan saya ping ip arduino mengunakan cmd terhubung, tapi ketika saya buka di mozila tidak bisa tulisan “unable connect”
Terima kasih sebelumnya
berarti web servernya belum jalan mas