Beranda > Arduino, IoT, web > Menampilkan Tanggal dan Jam dari Web Server di ESP8266 dan Mengirimkan ke Serial Monitor Menggunakan URL Queries

Menampilkan Tanggal dan Jam dari Web Server di ESP8266 dan Mengirimkan ke Serial Monitor Menggunakan URL Queries

15 November 2018

Sebelumnya kita telah sama-sama mencoba Mengambil Waktu dan Tanggal dari Timezonedb – Javascript. Sekarang kita akan mencoba untuk membuat sebuah webserver menggunakan ESP8266 untuk menampilkan tanggal dan jam yang diambil dari timezonedb dan menampilkannya ke serial monitor di arduino ide.

Download file ino disini.

Hal ini nantinya akan berguna untuk membuat project yang menggunakan tanggal dan jam. Seperti jam digital yang diupdate dari hp/smartphone.

Pada kesematan ini saya menggunakan file yang disediakan oleh arduino ide yaitu AdvancedWebServer. Namun terdapat beberapa perubahan.

Sebelumya kita akan membuat sebuah file html yang nantinya akan kita gabungkan ke sketch AdvancedWebServer.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>

function gettime(){

$.ajax({
url: "http://api.timezonedb.com/v2.1/get-time-zone?key=APIKEY&format=json&by=zone&zone=Asia/Jakarta",
dataType: "json",
success:function(response) {

var tanggal = response.formatted.substring(0,10);
var jam = response.formatted.substring(11,20);

var parts =tanggal.split("-");
var mydate = parts[2] + "-" + parts[1] + "-" + parts[0];

$("#t4_tanggal").val(mydate);
$("#t4_jam").val(jam);
}
});
}

function senttanggal(){

var tgl_yg_mau_dikrm = document.getElementById("t4_tanggal").value;
var req = new XMLHttpRequest();
req.open('POST', '/settanggal?tgl_kirim=' + tgl_yg_mau_dikrm, true);
req.send();

}

function sentjam(){

var jam_yg_mau_dikrm = document.getElementById("t4_jam").value;
var req = new XMLHttpRequest();
req.open('POST', '/setjam?jam_kirim=' + jam_yg_mau_dikrm, true);
req.send();

}

</script>
</head>
<body>
<div align="center">Tanggal</div>
<div align="center"><input type="text" id="t4_tanggal"></div>
<div align="center"><button type="button" id="send_tanggal" onclick="senttanggal()">Kirim</button></div>
<div align="center">Jam</div>
<div align="center" ><input type="text" id="t4_jam"></div>
<div align="center"><button type="button" id="send_jam" onclick="sentjam()">Kirim</button></div>
<br>
<div align="center" ><button type="button" onclick="gettime()">Ambil Tanggal dan Jam</button><div>
</body>
</html>

Setelah digabungkan dengan AdvancedWebServer menjadi seperti ini:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

const char *ssid = "AVDFO";
const char *password = "xxxxxxxx";

ESP8266WebServer server(80);

//---------------------------------------------------------------
//Our HTML webpage contents in program memory
const char MAIN_page[] PROGMEM = R"=====(
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>

function gettime(){

$.ajax({
url: "http://api.timezonedb.com/v2.1/get-time-zone?key=APIKEY&format=json&by=zone&zone=Asia/Jakarta",
dataType: "json",
success:function(response) {

var tanggal = response.formatted.substring(0,10);
var jam = response.formatted.substring(11,20);

var parts =tanggal.split("-");
var mydate = parts[2] + "-" + parts[1] + "-" + parts[0];

$("#t4_tanggal").val(mydate);
$("#t4_jam").val(jam);
}
});
}

function senttanggal(){

var tgl_yg_mau_dikrm = document.getElementById("t4_tanggal").value;
var req = new XMLHttpRequest();
req.open('POST', '/settanggal?tgl_kirim=' + tgl_yg_mau_dikrm, true);
req.send();

}

function sentjam(){

var jam_yg_mau_dikrm = document.getElementById("t4_jam").value;
var req = new XMLHttpRequest();
req.open('POST', '/setjam?jam_kirim=' + jam_yg_mau_dikrm, true);
req.send();

}

</script>
</head>
<body>
<div align="center">Tanggal</div>
<div align="center"><input type="text" id="t4_tanggal"></div>
<div align="center"><button type="button" id="send_tanggal" onclick="senttanggal()">Kirim</button></div>
<div align="center">Jam</div>
<div align="center" ><input type="text" id="t4_jam"></div>
<div align="center"><button type="button" id="send_jam" onclick="sentjam()">Kirim</button></div>
<br>
<div align="center" ><button type="button" onclick="gettime()">Ambil Tanggal dan Jam</button><div>
</body>
</html>
)=====";
//---------------------------------------------------------------

//const int led = 13;

void setTanggal()
{
String get_tanggal = server.arg("tgl_kirim");
Serial.println(get_tanggal);
server.send(204,"");

}

void setJam()
{
String get_jam = server.arg("jam_kirim");
Serial.println(get_jam);
server.send(204,"");

}

void handleRoot() {
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
}

void handleNotFound() {
//digitalWrite(led, 1);
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";

for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}

server.send(404, "text/plain", message);
//digitalWrite(led, 0);
}

void setup(void) {
//pinMode(led, OUTPUT);
digitalWrite(led, 0);
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");

// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}

Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());

if (MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}

server.on("/", handleRoot);
server.on("/settanggal", setTanggal);
server.on("/setjam", setJam);
server.on("/inline", []() {
server.send(200, "text/plain", "this works as well");
});
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}

void loop(void) {
server.handleClient();
}

Semoga membantu….

Sumber : diambil dari berbagai sumber…

%d blogger menyukai ini: