INTERNET OF THINGS

KENDALI LED DENGAN WEB SERVER

PERTEMUAN 5
ANTON PRAFANTO

REFERENSI : Kodingindonesia.Com, Electronics-lab.Com, Warriornux.Com, Teachmemicro.Com, Lastminuteengineers.Com, Indobot.co.id

APA ITU WEB SERVER ???

 Perangkat untuk menyimpan, memproses, dan mengirimkan halaman

web ke web client (Browser yang ada di komputer dan smartphone)
  Komunikasi antara server dan client menggunakan protokol khusus
yang disebut Hypertext Transfer Protocol (HTTP).
 Client menggunakan URL / Link untuk melakukan request
halaman tertentu menggunakan HTTP dan kemudian server
memberikan response berupa konten halaman web atau pesan bila
halaman web tidak tersedia (Seperti pesan 404).
 Halaman yang dikirim oleh server sebagian besar adalah dokumen
HOW IT WORK ?? HTML.
 HOW IT WORK ??

 ESP8266 dihubungkan ke
jaringan WiFi yang ada (Dibuat
oleh router nirkabel yang user
miliki) disebut Station (STA).
 Dalam mode STA ESP8266
mendapatkan IP dari router
nirkabel yang terhubung. Dengan
alamat IP ini, ia dapat mengatur
server web dan mengirimkan
halaman web ke semua perangkat
yang terhubung di bawah jaringan
WiFi yang ada.
KOMPONEN YANG DIBUTUHKAN PADA PERTEMUAN INI:
 NodeMCU (Pastikan tipe boardnya kompatibel dengan ARDUINO IDE, jangan
beli yg versi LUA) x1
 LED 5 mm x1
 Resistor 330 Ohm x1
 Projectboard (x1 yang besar) atau (2x yang kecil)
 Jumper x1 (Male to Male)
RANGKAIAN
KENDALI LED
DENGAN
WEBBROWSER
 Agar rangkaian ini bekerja, anda
harus melakukan instalasi Library
ESP8266 pada Arduino IDE yang
anda miliki. Seperti yang sudah
saya jelaskan di pertemuan
sebelumnya.
 Pin D4 digunakan sebagai pin
OUTPUT untuk mengendalikan
LED.
 Lalu hubungkan nodeMCU ke
komputer yang anda miliki,
kemudian buka Arduino IDE dan
saatnya kita melakukan koding.
BERIKUT
KODE UNTUK
WEB SERVER
YANG HARUS
DI UPLOAD KE
NODEMCU
BERIKUT
KODE UNTUK
WEB SERVER
YANG HARUS
DI UPLOAD KE
NODEMCU
BEDAH KODE
 Karena kita sekarang menggunakan platform Arduino untuk menulis kode, maka
akan saya jelaskan dari baris pertama kode yang kita upload ke NodeMCU
 Perhatikan bahwa saya menggunakan tiga header di bagian atas seperti dibawah
ini

 Baris kode diatas merupakan cara untuk menggunakan library WiFi pada
ESP8266, yang sebelumnya sudah ditambahkan ketika kita mengunduh library
ESP8266 via Board Manager.
BEDAH KODE
 Kemudian, tentukan ssid WiFi dan kata sandi WiFi yang akan kita gunakan:

 Kita membuat objek ESP8266WebServer:

 80 adalah nomor port umum yang digunakan dalam komunikasi HTTP. Karena
Internet kebanyakan menggunakan port ini, kita tidak perlu mengubahnya ke
nomor lain kecuali jika kita memilih untuk menggunakan HTTPS (yang
menggunakan port 443).
BEDAH KODE
 Selanjutnya kita mendeklarasikan string kosong yang dengan nama variabel
“page” dan pin tempat LED terpasang:

 Di sini kita menggunakan 2 berarti GPIO2. Ini adalah D4 pada papan

NodeMCU. Untuk detail lebih lanjut tentang pinout NodeMCU, lihat
https://www.teachmemicro.com/nodemcu-pinout/
BEDAH KODE (MENYIAPKAN HALAMAN WEB)
 Di dalam setup(), kami membuat kode HTML sederhana dan menempatkannya
sebagai string ke variabel “page” (tampilan baris kode di bawah terpotong-
potong, karena halaman PPT tidak cukup, namun dalam penulisan di Arduino
IDE semua kodenya tersambung dan tidak ada enter)

 Kode diatas akan memberikan tampilan halaman web sederhana dengan dua tombol.
Memang tampilannya tidak terlalu bagus tapi cukup untuk yang pertama kali belajar.
Jika ingin membuat situs web yang jauh lebih baik, maka disarankan menggunakan
modul kartu microSD untuk menyimpan gambar, atau file CSS dan Javascript.
BEDAH KODE
 Inisialisasi pin LEDPin sebagai pin OUTPUT dan membuatnya berlogika
LOW.

 Selanjutnya, kita delay 1 detik dan kemudian inisialisasi output serial.

 Kita membutuhkan kode diatas untuk menampilkan beberapa umpan balik pada
serial monitor, agar kita dapat dengan mudah memonitoring yang terjadi pada
NodeMCU. Nilai baud rate dapat diubah sesuai dengan kecepatan komunikasi
yang kalian inginkan.
BEDAH KODE
 Kemudian mulai melakukan koneksi WiFi, tunggu, lalu SSID dan alamat IP
NodeMCU akan tampil pada serial monitor Arduino IDE kalian. Tampilannya
akan tampil sepert ini :

 Ini berarti kita sudah berhasil terhubung ke jaringan WiFi! Kita juga dapat
melihat alamat IP yang ditetapkan untuk NodeMCU (192.168.1.7 pada contoh
ini, karena IP yang tampil akan random).
TURNING ON THE WEB SERVER
 NodeMCU bereaksi setiap kali seseorang mengunjungi alamat IP tersebut. Saat
membuka browser web dan mengetik alamat IP tersebut di bilah alamat, kalian
akan melihat tampilan seperti ini:

 Ini berkat baris kode ini:

TURNING ON THE WEB SERVER
 "/" Berarti ini adalah halaman muka server. Ketika pengguna mengunjungi alamat IP ini,
server menggunakan fungsi send() untuk membalas dengan "200" yang merupakan kode
status HTTP untuk "OK". Kemudian, ia menentukan objek yang akan dilihat oleh browser
(file teks atau html) dan kemudian kode HTML (yang ada di dalam variabel string “page”).
TURNING ON THE WEB SERVER
 Klik tombol "On" dan perhatikan LED menyala. Ini dimungkinkan melalui baris
ini:

 Jika melihat kembali halaman kode HTML di dalam, tombol "On" memiliki hyperlink ke "<ip
address> / LEDOn". Jadi apa yang dilakukan oleh kode di atas adalah melayani browser
halaman web / LEDOn yang sebenarnya sama dengan home page karena halaman masih yang
ditentukan di dalam send(). Satu-satunya perbedaan adalah bahwa dalam fungsi server.on(),
kita memiliki ini:

 Kode ini menyalakan LED.

TURNING ON THE WEB SERVER
 Klik tombol "Off" untuk mematikannya. Proses yang sama terjadi dengan
menyalakan LED. hanya sekarang menggunakan kode di bawah ini.

 Kita juga harus ingat bahwa server tidak akan berjalan kecuali kita memasukan
baris kode berikut ini:

 Akhirnya, kita membutuhkan server untuk terus mendengarkan klien yang

masuk (browser web). Jadi, kita menempatkan kode ini di dalam loop():