Webserver pada dasarnya adalah komunikasi TCP antara server dengan client yang formatnya telah disepakati secara universal melalui konsorsium WWW. Dalam sekala kecil di dunia microcontroller sekelas ESP8266 maka kesepakatannya itu adalah port server yg digunakan adalah 80, yang merupakan standar akses ke webserver di manapun. Sedangkan standar keduanya adalah http dan html yang merupakan protokol dan standar text yg dikirim terima dan kemudian diterjemahkan oleh browser yg kalian gunakan menjadi tampilan yang menarik. jadi pada dasarnya hanya melanjutkan pembahasan sebelumnya pada bagian komunikasi TCP.
Contoh script html paling sederhana adalah sebagai berikut :
<!DOCTYPE html>
<html>
<body>
<h1>HALO APA KABAR</h1>
<p>Saya menulis html sederhana</p>
</body>
</html>
Kalau text atau scipt diatas kamu tulis di PC lewat notepad kemudian kamu save dan dinamakan sebagai semisal 'coba.html', maka ketika dibuka pada browser akan menjadi tampil seperti berikut:
Tugas kita selanjutnya adalah menempatkan text html tadi menjadi request dan respon http pada port 80 dan diakses melalui protocol TCP pada ESP8266. Bagaimana caranya ? Begini script yg kamu tuliskan pada IDE python Thonny.org kamu.
import socket
import network
def laman_web():
html= " <!DOCTYPE html><html><body><h1>HALO APA KABAR</h1><p>Saya menulis html sederhana</p></body></html>"
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('koneksi dari %s' % str(addr))
response = laman_web()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
Dan hasilnya ketika saya akses dari web browser HP saya seperti ini.
Jadi ada kesepakatan dari format text response yg diberikan oleh server yang kemudian diterjemahkan oleh browser. Begitu juga jika ingin menambahkan atau mempercantik tampilan maka bisa mempelajari lebih lanjut ilmu html dan juga script CSS yg memperindah tampilan pada web, seperti script berikut ini yang menambahkan tombol untuk menyalakan dan mematikan LED pada ESP8266.
import socket
import network
from machine import Pin
led = Pin(2, Pin.OUT)
led.value(1) # active low,matikan dulu
def laman_web():
if led.value() == 0:
lednya="ON"
else:
lednya="OFF"
html = """<html><head> <title>TOMBOL ULO</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none;
border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button2{background-color: #4286f4;}</style></head><body> <h1>ESP ULO LED</h1>
<p>LED : <strong>""" + lednya + """</strong></p><p><a href="/?ledon"><button class="button">ON</button></a></p>
<p><a href="/?ledoff"><button class="button button2">OFF</button></a></p></body></html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('koneksi dari %s' % str(addr))
request = conn.recv(1024).decode('UTF-8')
print('Isi request = %s' % request)
if request.find('ledon') == 6:
print('LED ON')
led.value(0)
if request.find('ledoff') == 6:
print('LED OFF')
led.value(1)
response = laman_web()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()Hasil pada browser sebagai berikut :
Penjelasan :
import socket
import network
from machine import Pin
led = Pin(2, Pin.OUT)
led.value(1) # active low,matikan dulu Merupakan script inisialisasi dari package yg dipakai dan pin led dari ESP8266, untuk koneksi wifinya kenapa gak ditulis bisa dibaca penjelasannya pada part 3.
def laman_web():
if led.value() == 0:
lednya="ON"
else:
lednya="OFF"
html = """<html><head> <title>TOMBOL ULO</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none;
border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button2{background-color: #4286f4;}</style></head><body> <h1>ESP ULO LED</h1>
<p>LED : <strong>""" + lednya + """</strong></p><p><a href="/?ledon"><button class="button">ON</button></a></p>
<p><a href="/?ledoff"><button class="button button2">OFF</button></a></p></body></html>"""
return htmlScript function laman_web( ) diatas utamanya berisikan CSS dari script html yang menampilkan tombol dan status LED dengan style yang lebih menarik. Tombol diberikan 2 buah a href / link yang nantinya akan memberikan request GET berupa "/?ledon" dan "/?ledoff" .
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
Koneksi socket di bind ke port 80 dan kemudian melakukan listen menunggu ada request dari client.
while True:
conn, addr = s.accept()
print('koneksi dari %s' % str(addr))
request = conn.recv(1024).decode('UTF-8')
print('Isi request = %s' % request)
if request.find('ledon') == 6:
print('LED ON')
led.value(0)
if request.find('ledoff') == 6:
print('LED OFF')
led.value(1)
response = laman_web()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()Membaca Request dari browser / client dan kemudian mengecek melalui string.find untuk menentukan apakah LED mau di ON atau di OFF kan. Pada bagian akhir diberikan response standar closing socket http dan html
Untuk DHT11 tinggal mengikuti saja pola CSS dan request nya serta praktek DHT11 pada part 2, selengkapnya script seperti berikut :
import socket
import network
from machine import Pin
import dht
sensor = dht.DHT11(Pin(13))
def read_sensor():
global temp, hum
temp = hum = 0
try:
sensor.measure()
temp = sensor.temperature()
hum = sensor.humidity()
if (isinstance(temp, float) and isinstance(hum, float)) or (isinstance(temp, int) and isinstance(hum, int)):
msg = (b'{0:3.1f},{1:3.1f}'.format(temp, hum))
# uncomment for Fahrenheit
#temp = temp * (9/5) + 32.0
hum = round(hum, 2)
return(msg)
else:
return('Invalid sensor readings.')
except OSError as e:
return('Failed to read sensor.')
def web_page():
html = """<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
</head>
<body>
<h2>ESP DHT Server</h2>
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>
<span class="dht-labels">Temperature</span>
<span>"""+str(temp)+"""</span>
<sup class="units">°C</sup>
</p>
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span>"""+str(hum)+"""</span>
<sup class="units">%</sup>
</p>
</body>
</html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
print('Content = %s' % str(request))
sensor_readings = read_sensor()
print(sensor_readings)
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
Tampilannya keren dengan tombol icon yg diambil dari internet langsung. SELAMAT MENCOBA !
