Membuat Weather Station yang Dapat Diakses Secara Online
Halo! Pada artikel kali ini, saya akan menjelaskan bagaimana cara membuat sebuah stasiun cuaca yang dapat diakses secara online. Projek ini merupakan lanjutan dari projek yang telah dilakukan sebelumnya (di sini). Untuk melihat rangkaian dan alat-alat yang diperlukan, anda bisa melihat semuanya di artikel tersebut. Hasil dari projek ini adalah seperti link berikut.
Web Hosting
Web Hosting adalah sebuah layanan yang memungkinkan anda untuk menyimpan data di website Anda. Selain itu, Web Hosting memungkinkan Anda untuk mengakses atau menampilkan data-data tersebut kembali. Terdapat banyak opsi yang dapat digunakan untuk membuat Web Hosting, namun sebagian besar berbayar. Meski begitu, ada satu contoh Web Hosting gratis yang dapat Anda gunakan untuk projek ini, yaitu 000webhost. Sekarang, saya akan mencoba menjelaskan bagaimana cara membuat sebuah akun 000webhost hingga dapat digunakan untuk keperluan kita, yaitu menampilkan data cuaca di website yang dapat diakses secara online.
Pertama, akses website 000webhost (000webhost.com). Buatlah sebuah akun dengan memilih Sign In terlebih dahulu. Buatlah akun baru dengan menekan Sign Up di bagian bawah halaman. Opsi lainnya adalah melakukan Sign In dengan akun Google atau Facebook anda. Untuk kemudahan pembuatan contoh, saya menggunakan Google.
Setelah masuk menggunakan Google, inilah tampilan yang saya dapatkan (gambar di bawah). Tekan tombol manapun yang anda mau (tidak berpengaruh dan Anda akan melewati langkah yang sama). Agar lebih sederhana, saya memilih “It’s not my first rodeo, take me to the Panel”. Masukkan nama projek anda (seperti stasiuncuacaesp32), simpan password yang telah diberikan (tidak perlu diganti untuk keamanan), lalu tekan Submit.
Setelah ini, Anda akan diberikan beberapa opsi seperti berikut.
Pilih “Upload your site”. Web browser Anda akan membuka halaman baru yang mengarahkan anda ke sistem penyimpanan File Manager dari website Anda. Biarkan dahulu halaman tersebut. Sekarang, mari kita mulai benar-benar mempersiapkan website kita! Arahkan kursor ke atas nama website anda, lalu klik “Manage Website” terlebih dahulu untuk memulai tahap ini.
Persiapan Database dan Website
Tutorial persiapan ini diadaptasi dari website ini. Bedanya, saya menggunakan sensor BMP280 (referensi dari website di awal artikel ini). Jika anda ingin mereferensikan website tersebut, mulailah dari tahap kedua (Preparing your MySQL Database). Sekarang, kita akan membuat sebuah Database. Pada halaman Website anda, klik “Tools” di sebelah kiri,
lalu klik “Database Manager”.
Sekarang, buatlah sebuah database. Klik “New Database”, atur namanya menjadi esp_data dan usernamenya menjadi apapun yang anda mau (misalnya esp_board). Kedua nama ini bebas, namun anda akan harus menyesuaikannya untuk tahap-tahap berikutnya. Simpan password yang diberikan, lalu tekan Create (password Database berbeda dengan password Website). Selamat, Anda berhasil melakukan tahap pertama, yaitu membuat sebuah Database! Sistem ini nantinya akan berguna bagi Anda untuk menyimpan data pembacaan sensor. Perhatikan bahwa nama Database dan username Database Anda memiliki prefiks (seperti id1234567890). Pada tahap-tahap berikutnya, Anda harus menyertakan prefiks tersebut juga (tidak hanya esp_data, namun id1234567890_esp_data).
Selanjutnya, klik “Manage”, lalu klik PhpMyAdmin. Jika perlu, masukkan username beserta password Database. Setelah masuk, pilih nama Database anda di menu PhpMyAdmin sebelah kiri. Pilih SQL di menu bagian atas, lalu masukkan kode berikut:
CREATE TABLE SensorData (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
sensor VARCHAR(30) NOT NULL,
location VARCHAR(30) NOT NULL,
value1 VARCHAR(10),
value2 VARCHAR(10),
value3 VARCHAR(10),
reading_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)Klik Kirim (atau Go) di bagian bawah kanan, dan Anda telah berhasil membuat sebuah tabel di dalam Database.
Membuat Script untuk Memasukkan Data
Ingat halaman File Manager yang tadi sudah terbuka? Sekarang saatnya menggunakan halaman tersebut. Jika sudah tertutup, akses kembali dari Tools -> File Manager pada halaman “Manage My Website” (lihat di atas), lalu klik Upload Files. Jika diperlukan, masuk ke File Manager anda menggunakan username dan password Website (periksa di Website Settings -> General, akses di menu sebelah kiri).
Akses folder “public_html”, lalu klik tombol “New File” pada menu bagian atas kanan yang memiliki logo berbentuk kertas dengan tanda plus (+). Beri nama file ini “post-esp-data.php”. Nama file ini bebas, namun demi kemudahan, sebaiknya anda mengikuti nama ini. Klik “Create”, lalu edit file yang baru dibuat dengan cara menekan file tersebut dua kali. Kemudian, masukkan kode berikut:
<?php
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-mysql-database-php/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
$servername = "localhost";
// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";
// Keep this API Key value to be compatible with the ESP32 code provided in the project page.
// If you change this value, the ESP32 sketch needs to match
$api_key_value = "tPmAT5Ab3j7F9";
$api_key= $sensor = $location = $value1 = $value2 = $value3 = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$api_key = test_input($_POST["api_key"]);
if($api_key == $api_key_value) {
$sensor = test_input($_POST["sensor"]);
$location = test_input($_POST["location"]);
$value1 = test_input($_POST["value1"]);
$value2 = test_input($_POST["value2"]);
$value3 = test_input($_POST["value3"]);
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO SensorData (sensor, location, value1, value2, value3)
VALUES ('" . $sensor . "', '" . $location . "', '" . $value1 . "', '" . $value2 . "', '" . $value3 . "')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
}
else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
else {
echo "Wrong API Key provided.";
}
}
else {
echo "No data posted with HTTP POST.";
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}Ganti nama Database, username Database, beserta password Database dengan milik Anda. Masukkan informasi tersebut pada bagian
// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";Klik “Save & Close”. Sekarang anda bisa mencoba mengakses website Anda dengan masuk ke
http://domainanda.com/post-esp-data.php
Ganti domainanda.com dengan nama domain Website anda. Berikut tampilan yang seharusnya muncul:
Menampilkan Data yang Disimpan Database
Sekarang kita akan membuat sebuah program yang bisa menampilkan data dari Database Website anda. Dari File Manager, buat kembali sebuah File baru dengan menekan “New File”. Kali ini, namakan File anda esp-data.php. Edit File Anda dan masukkan kode berikut:
<!DOCTYPE html>
<html><body>
<?php
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-mysql-database-php/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
$servername = "localhost";
// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, sensor, location, value1, value2, value3, reading_time FROM SensorData ORDER BY id DESC";
echo '<table cellspacing="5" cellpadding="5">
<tr>
<td>ID</td>
<td>Sensor</td>
<td>Location</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Timestamp</td>
</tr>';
if ($result = $conn->query($sql)) {
while ($row = $result->fetch_assoc()) {
$row_id = $row["id"];
$row_sensor = $row["sensor"];
$row_location = $row["location"];
$row_value1 = $row["value1"];
$row_value2 = $row["value2"];
$row_value3 = $row["value3"];
$row_reading_time = $row["reading_time"];
// Uncomment to set timezone to - 1 hour (you can change 1 to any number)
//$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time - 1 hours"));
// Uncomment to set timezone to + 4 hours (you can change 4 to any number)
//$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time + 4 hours"));
echo '<tr>
<td>' . $row_id . '</td>
<td>' . $row_sensor . '</td>
<td>' . $row_location . '</td>
<td>' . $row_value1 . '</td>
<td>' . $row_value2 . '</td>
<td>' . $row_value3 . '</td>
<td>' . $row_reading_time . '</td>
</tr>';
}
$result->free();
}
$conn->close();
?>
</table>
</body>
</html>Kode di atas bertujuan untuk membuat sebuah tampilan tabel. Tampilan tabel ini awalnya kosong, namun akan selalu mengambil data dari Database. Jangan lupa untuk memasukkan dan mengganti informasi Database Anda di dalam program (nama, username, password). Sekarang, Anda dapat mencoba mengakses
http://domainanda.com/esp-data.phpdan anda akan melihat sebuah halaman dengan tabel kosong, seperti berikut.
Website Sudah, Lalu Sensor Bagaimana?
Seperti sudah dijelaskan di atas, artikel ini merupakan lanjutan dari projek sebelumnya. Rangkaian yang digunakan ada di dalam artikel tersebut. Pada artikel ini, yang harus diubah adalah kode yang digunakan. Buatlah kode berikut dan lakukanlah Upload pada ESP32 Anda.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/// Load Wi-Fi library
#include <WiFi.h>
#include <HTTPClient.h>
#include <Wire.h>
#include <Adafruit_BMP280.h>
#include <Adafruit_Sensor.h>//uncomment the following lines if you're using SPI
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/#define SEALEVELPRESSURE_HPA (1013.25)Adafruit_BMP280 bmp; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI// Replace with your network credentials
const char* ssid = "ENTER_YOUR_WIFI_SSID";
const char* password = "ENTER_YOUR_WIFI_PASSWORD";// REPLACE with your Domain name and URL path or IP address with path
const char* serverName = "http://domainanda.com/post-esp-data.php";// Keep this API Key value to be compatible with the PHP code provided in the project page.
// If you change the apiKeyValue value, the PHP file /post-esp-data.php also needs to have the same key
String apiKeyValue = "tPmAT5Ab3j7F9";String sensorName = "BMP280";
String sensorLocation = "Lokasi Sensor";void setup() {
Serial.begin(115200);
bool status;// default settings
// (you can also pass in a Wire library object like &Wire2)
//status = bme.begin();
if (!bmp.begin(0x76)) {
Serial.println("Could not find a valid BMP280 sensor, check wiring!");
while (1);
}
bmp.setSampling(Adafruit_BMP280::MODE_NORMAL, /* Operating Mode. */
Adafruit_BMP280::SAMPLING_X2, /* Temp. oversampling */
Adafruit_BMP280::SAMPLING_X16, /* Pressure oversampling */
Adafruit_BMP280::FILTER_X16, /* Filtering. */
Adafruit_BMP280::STANDBY_MS_500); /* Standby time. */
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
}void loop(){
//Check WiFi connection status
if(WiFi.status()== WL_CONNECTED){
HTTPClient http;
// Your Domain name with URL path or IP address with path
http.begin(serverName);
// Specify content-type header
http.addHeader("Content-Type", "application/x-www-form-urlencoded");
// Prepare your HTTP POST request data
String httpRequestData = "api_key=" + apiKeyValue + "&sensor=" + sensorName
+ "&location=" + sensorLocation + "&value1=" + String(bmp.readTemperature())
+ "&value2=" + String(bmp.readAltitude(SEALEVELPRESSURE_HPA)) + "&value3=" + String(bmp.readPressure()/100.0F) + "";
Serial.print("httpRequestData: ");
Serial.println(httpRequestData);
// You can comment the httpRequestData variable above
// then, use the httpRequestData variable below (for testing purposes without the BME280 sensor)
//String httpRequestData = "api_key=tPmAT5Ab3j7F9&sensor=BME280&location=Office&value1=24.75&value2=49.54&value3=1005.14";// Send HTTP POST request
int httpResponseCode = http.POST(httpRequestData);
// If you need an HTTP request with a content type: text/plain
//http.addHeader("Content-Type", "text/plain");
//int httpResponseCode = http.POST("Hello, World!");
// If you need an HTTP request with a content type: application/json, use the following:
//http.addHeader("Content-Type", "application/json");
//int httpResponseCode = http.POST("{\"value1\":\"19\",\"value2\":\"67\",\"value3\":\"78\"}");
if (httpResponseCode>0) {
Serial.print("HTTP Response code: ");
Serial.println(httpResponseCode);
}
else {
Serial.print("Error code: ");
Serial.println(httpResponseCode);
}
// Free resources
http.end();
}
else {
Serial.println("WiFi Disconnected");
}
//Send an HTTP POST request every 30 seconds
delay(30000);
}
Jangan lupa untuk mengganti informasi Wi-Fi anda (nama / SSID dan password) serta nama domain anda (ganti domainanda.com). Kode di atas bertujuan untuk menginisialisasi Wi-Fi di ESP32 dan sensor, lalu melakukan pembacaan setiap 30 detik. Setiap 30 detik itu juga, sensor akan mengirimkan data ke Database. Anda bisa mengganti interval ini pada bagian paling bawah kode (dalam milisekon, 1000 milisekon = 1 detik):
delay(30000)Upload kode ini ke ESP32 Anda, lalu masuklah ke Serial Monitor. Lakukan restart pada ESP32 anda jika perlu (klik tombol EN). Sekarang, akan ada masukan baru setiap 30 detik. Lihat pembaruannya pada website:
http://domainanda.com/esp-data.phpJangan lupa mengganti domainanda.com dengan nama domain Website anda yang sebenarnya. Selamat, Anda telah berhasil membuat stasiun cuaca yang dapat diakses secara online!
Analisis dan Kesimpulan
Menurut saya, projek ini menarik karena merupakan implementasi langsung dari hal-hal yang telah dilakukan sebelumnya. Memang, perlu pengubahan dari tutorial yang diberikan, seperti sensor yang digunakan. Namun poin besar yang dapat diperhatikan di sini adalah Web Hosting yang digunakan bebas, dan 000webhost hanyalah satu contoh. Selain itu, jika Anda telah memiliki dasar dalam Website terutama PHP, anda bisa melakukan hal-hal lain yang lebih canggih.
Demikian yang dapat saya sampaikan pada artikel kali ini, semoga Anda terinspirasi dan bisa mengerti. Terima kasih, selamat bereksplorasi!
