PRAKTIKUM

1|Page
A. Tujuan Pembelajaran
Mahasiswa mampu menggunakan ESP32 untuk membangun aplikasi

berbasi CLOUD
B. Indikator Pembelajaran
Mahasiswa mampu :
1. Mahasiswa dapat membangun weather stasiun berbasis ESP32

2. Mahasiswa dapar menggunakan esp32 untuk koneksi dengan MySQL
3. Mahasiswa dapat menggunakan esp32 untuk koneksi dengan PHP
email
4. Mahsiswa dapat membuat aplikasi kontrol dan monitoring real time
menggunakan koneksi database real time Firebase
5. Mahasiswa dapat membangun koneksi database berbasis firebase
web APP
2|Page
PRAKTIKUM 1
Membuat Weather Station dengan modul ESP32/ESP8266
(Database MySQL dan PHP)
A. Alat dan Bahan

1. ESP32 atau ESP8266
2. Software Arduino IDE
3. Server hosting dan nama domain
4. Skrip PHP untuk memasukkan data ke MySQL dan menampilkannya
di halaman web
5. Database MySQL untuk menyimpan bacaan
6. Sensor BME280
B. Prosedur Percobaan
1. Unduh Kode Sumber
Untuk proyek ini, Anda memerlukan file-file ini:
1) Kueri SQL untuk membuat tabel Anda:
https://github.com/RuiSantosdotme/Cloud-Weather-Station-ESP32-
ESP8266/blob/master/code/SensorData_Table.sql
2) Masukkan dan akses bacaan database:
ESP8266/blob/master/code/esp-database.php
3) Menangani permintaan Posting HTTP:
ESP8266/blob/master/code/esp-post-data.php
4) File CSS untuk menata halaman web Anda:
ESP8266/blob/master/code/esp-style.css
5) Tampilkan pembacaan sensor Anda:
ESP8266/blob/master/code/esp-weather-station.php
3|Page
6) Sketsa Arduino untuk ESP32/ESP8266:
ESP8266/blob/master/code/ESP_HTTP_POST_MySQL.ino
2. Hosting Aplikasi PHP dan Database MySQL Anda
Tujuan dari proyek ini adalah untuk memiliki nama domain dan akun
hosting Anda sendiri yang memungkinkan Anda untuk menyimpan
pembacaan sensor dari ESP32 atau ESP8266. Anda dapat
memvisualisasikan bacaan dari mana saja di dunia dengan mengakses
domain server Anda sendiri.
Berikut adalah ikhtisar tingkat tinggi tentang cara kerja proyek:
4|Page
1) Anda memiliki ESP32 atau ESP8266 yang mengirimkan pembacaan
sensor ke server Anda sendiri. Untuk ini, Anda memiliki papan Anda
terhubung ke router Anda;
2) Di server Anda, ada skrip php yang memungkinkan Anda menyimpan

bacaan Anda di database MySQL;
3) Kemudian, skrip php lain akan menampilkan halaman web dengan

pengukur, tabel, dan semua informasi lainnya;
4) Terakhir, Anda dapat memvisualisasikan bacaan dari mana saja di

dunia dengan mengakses nama domain Anda sendiri.
Layanan Hosting
Saya sarankan menggunakan salah satu layanan hosting berikut

yang dapat menangani semua persyaratan proyek:
1) Bluehost (mudah digunakan dengan cPanel) : nama domain gratis saat

Anda mendaftar untuk paket 3 tahun. Saya sarankan memilih opsi situs
web tak terbatas;
2) Digital Ocean : Server Linux yang Anda kelola melalui baris perintah. Saya
hanya merekomendasikan opsi ini untuk pengguna tingkat lanjut.
Kedua layanan tersebut adalah yang saya gunakan dan

rekomendasikan secara pribadi, tetapi Anda dapat menggunakan layanan
hosting lainnya. Setiap layanan hosting yang menawarkan PHP dan MySQL
akan bekerja dengan tutorial ini. Jika Anda tidak memiliki akun hosting, saya
sarankan untuk mendaftar ke Bluehost .
Saat membeli akun hosting, Anda juga harus membeli nama domain.
Inilah yang membuat proyek ini menarik: Anda dapat membuka nama
domain Anda (http://example.com) dan melihat pembacaan ESP Anda.
Jika Anda menyukai proyek kami, Anda dapat mempertimbangkan

untuk mendaftar ke salah satu layanan hosting yang direkomendasikan,
karena Anda akan mendukung pekerjaan kami.
Catatan: Anda juga dapat menjalankan server LAMP (Linux, Apache,

MySQL, PHP) di Raspberry Pi untuk mengakses data di jaringan lokal
Anda . Namun, tujuan dari tutorial ini adalah untuk mempublikasikan
bacaan dalam nama domain Anda sendiri yang dapat Anda akses dari
5|Page
mana saja di dunia. Ini memungkinkan Anda mengakses pembacaan
ESP dengan mudah tanpa bergantung pada platform IoT pihak ketiga.
3. Mempersiapkan Database MySQL Anda
Setelah mendaftar untuk akun hosting dan menyiapkan nama

domain , Anda dapat masuk ke cPanel atau dasbor serupa. Setelah itu, ikuti
langkah selanjutnya untuk membuat database, nama pengguna, kata
sandi, dan tabel SQL Anda.
Membuat database dan pengguna
Buka tab “ Lanjutan ”:
1. Ketik "database" di bilah pencarian dan pilih "MySQL Database Wizard".
6|Page
2. Masukkan nama Database yang Anda inginkan. Dalam kasus saya,
nama databasenya adalah esp_data. Kemudian, tekan tombol "Langkah
Berikutnya":
Catatan: nanti Anda harus menggunakan nama basis data dengan

awalan yang diberikan oleh host Anda (awalan basis data saya pada
tangkapan layar di atas kabur). Saya akan menyebutnya
sebagaicontoh_esp_datadari sekarang.
7|Page
3. Ketik nama pengguna Database Anda dan atur kata sandi. Anda harus
menyimpan semua detail itu, karena Anda akan membutuhkannya nanti
untuk membuat koneksi database dengan kode PHP Anda.
Database dan pengguna baru Anda berhasil dibuat. Sekarang,

simpan semua detail Anda karena Anda akan membutuhkannya nanti:
 Nama basis data : example_esp_data

 Nama pengguna : example_esp_board
 Kata sandi : kata sandi Anda
Membuat tabel SQL
8|Page
Setelah membuat database dan pengguna Anda, kembali ke
dashboard cPanel dan cari “phpMyAdmin”.
Di bilah sisi kiri, pilih nama basis data Andacontoh_esp_datadan buka tab
"SQL".
Penting: pastikan Anda telah membukacontoh_esp_databasis

data. Kemudian, klik tab SQL. Jika Anda tidak mengikuti langkah-
langkah tepat ini dan menjalankan kueri SQL, Anda mungkin
9|Page
membuat tabel di database yang salah.
Salin kueri SQL dalam cuplikan 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
)
Rekatkan di bidang kueri SQL (disorot dengan persegi panjang merah) dan
tekan tombol "Go" untuk membuat tabel Anda:
Setelah itu, Anda akan melihat tabel yang baru dibuat

bernamaSensorDatadalamcontoh_esp_datadatabase seperti pada
gambar di bawah ini:
10 | P a g e
4. PHP Script HTTP POST – Menerima dan Memasukkan Data ke Database
MySQL
Di bagian ini, kita akan membuat skrip PHP yang bertanggung jawab
untuk menerima permintaan masuk dari ESP32 atau ESP8266 dan
memasukkan data ke dalam database MySQL.
Jika Anda menggunakan penyedia hosting dengan cPanel, Anda

dapat mencari “File Manager”:
Kemudian, pilih opsi public_html dan tekan tombol “+ File” untuk

membuat file .php baru.
11 | P a g e
Catatan: jika Anda mengikuti tutorial ini dan Anda tidak terbiasa
dengan PHP atau MySQL, saya sarankan untuk membuat file yang sama
persis ini. Jika tidak, Anda harus memodifikasi sketsa ESP yang
disediakan dengan jalur URL yang berbeda.
Buat file baru di /public_html dengan nama dan ekstensi persis

seperti ini: esp-post-data.php
Edit file yang baru dibuat ( esp-post-data.php ) dan salin cuplikan berikut:

<?php
include_once('esp-database.php');
// Keep this API Key value to be compatible with the ESP

code provided in the project page. If you change this value,
the ESP 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"]);
$result = insertReading($sensor, $location, $value1,

$value2, $value3);
echo $result;
}
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);
13 | P a g e
return $data;
}
5. Skrip PHP untuk Fungsi Basis Data
Buat file baru di /public_html yang bertanggung jawab untuk

memasukkan dan mengakses data di database Anda. Beri nama file
Anda: esp-database.php
Salin skrip PHP itu:

<?php
$servername = "localhost";
// REPLACE with your Database name

$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
14 | P a g e
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";
function insertReading($sensor, $location, $value1,

$value2, $value3) {
global $servername, $username, $password, $dbname;
// 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) {

return "New record created successfully";
}
else {
return "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function getAllReadings($limit) {
$dbname);
// Check connection
}
$sql = "SELECT id, sensor, location, value1, value2,

value3, reading_time FROM SensorData order by reading_time
desc limit " . $limit;
15 | P a g e
if ($result = $conn->query($sql)) {
return $result;
}
else {
return false;
}
$conn->close();
}
function getLastReadings() {
$dbname);
// Check connection
}
$sql = "SELECT id, sensor, location, value1, value2,

value3, reading_time FROM SensorData order by reading_time
desc limit 1" ;
return $result->fetch_assoc();
}
else {
return false;
}
$conn->close();
}
function minReading($limit, $value) {

$dbname);
// Check connection
}
16 | P a g e
$sql = "SELECT MIN(" . $value . ") AS min_amount FROM
(SELECT " . $value . " FROM SensorData order by reading_time
desc limit " . $limit . ") AS min";
}
else {
return false;
}
$conn->close();
}
function maxReading($limit, $value) {

$dbname);
// Check connection
}
$sql = "SELECT MAX(" . $value . ") AS max_amount FROM

desc limit " . $limit . ") AS max";
}
else {
return false;
}
$conn->close();
}
function avgReading($limit, $value) {

$dbname);
// Check connection
17 | P a g e
}
$sql = "SELECT AVG(" . $value . ") AS avg_amount FROM

desc limit " . $limit . ") AS avg";
}
else {
return false;
}
$conn->close();
}
?>
Sebelum menyimpan file, Anda perlu memodifikasi$dbname,$nama

penggunadan$kata sandivariabel dengan detail unik Anda:
// Your Database name

$dbname = "example_esp_data";
// Your Database user
$username = "example_esp_board";
// Your Database user password
$password = "YOUR_USER_PASSWORD";
Setelah menambahkan nama database, username dan password, simpan

file dan lanjutkan dengan tutorial ini. Jika Anda mencoba mengakses nama
domain Anda di jalur URL berikutnya, Anda akan melihat yang berikut:
http://example.com/esp-post-data.php
6. Skrip PHP – Menampilkan Pembacaan Basis Data pada Pengukur dan

Tabel
18 | P a g e
Anda juga perlu menambahkan file CSS untuk menata dasbor Anda,
beri nama: esp-style.css :
Salin CSS itu ke file Anda dan simpan:
/**
Rui Santos
esp8266/


**/
body {
width: 60%;
margin: auto;
text-align: center;
font-family: Arial;
top: 50%;
left: 50%;
}
@media screen and (max-width: 800px) {

body {
width: 100%;
19 | P a g e
}
}
table {
margin-left: auto;
margin-right: auto;
}
div {
margin-left: auto;
margin-right: auto;
}
h2 { font-size: 2.5rem; }
.header {
padding: 1rem;
margin: 0 0 2rem 0;
background: #f2f2f2;
}
h1 {
font-size: 2rem;
font-family: Arial, sans-serif;
text-align: center;
text-transform: uppercase;
}
.content {
display: flex;
}
@media screen and (max-width: 500px) /* Mobile */ {

.content {
flex-direction: column;
}
}
.mask {
position: relative;
overflow: hidden;
display: block;
width: 12.5rem;
height: 6.25rem;
20 | P a g e
margin: 1.25rem;
}
.semi-circle {
position: relative;
display: block;
width: 12.5rem;
height: 6.25rem;
background: linear-gradient(to right, #3498db 0%,
#05b027 33%, #f1c40f 70%, #c0392b 100%);
border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.semi-circle::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
display: block;
width: 8.75rem;
height: 4.375rem;
margin-left: -4.375rem;
background: #fff;
border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.semi-circle--mask {
position: absolute;
top: 0;
left: 0;
width: 12.5rem;
height: 12.5rem;
background: transparent;
transform: rotate(120deg) translate3d(0, 0, 0);
transform-origin: center center;
backface-visibility: hidden;
transition: all 0.3s ease-in-out;
}
.semi-circle--mask::before {
content: "";
position: absolute;
top: 0;
21 | P a g e
left: 0%;
z-index: 2;
display: block;
width: 12.625rem;
height: 6.375rem;
margin: -1px 0 0 -1px;
background: #f2f2f2;
border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.gauge--2 .semi-circle { background: #3498db; }
.gauge--2 .semi-circle--mask { transform: rotate(20deg)

translate3d(0, 0, 0); }
#tableReadings { border-collapse: collapse; }
#tableReadings td, #tableReadings th {

border: 1px solid #ddd;
padding: 10px;
}
#tableReadings tr:nth-child(even){ background-color:

#f2f2f2; }
#tableReadings tr:hover { background-color: #ddd; }
#tableReadings th {
padding: 10px;
background-color: #2f4468;
color: white;
}
Terakhir, buat file PHP lain di direktori /public_html yang akan

menampilkan semua konten database di halaman web. Beri nama file baru
Anda: esp-weather-station.php
22 | P a g e
Edit file yang baru dibuat ( esp-weather-station.php ) dan salin kode
berikut:

<?php
include_once('esp-database.php');
if ($_GET["readingsCount"]){
$data = $_GET["readingsCount"];
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
$readings_count = $_GET["readingsCount"];
}
// default readings count set to 20
else {
$readings_count = 20;
}
23 | P a g e
$last_reading = getLastReadings();
$last_reading_temp = $last_reading["value1"];
$last_reading_humi = $last_reading["value2"];
$last_reading_time = $last_reading["reading_time"];
// Uncomment to set timezone to - 1 hour (you can change

1 to any number)
//$last_reading_time = date("Y-m-d H:i:s",
strtotime("$last_reading_time - 1 hours"));
// Uncomment to set timezone to + 7 hours (you can
change 7 to any number)
//$last_reading_time = date("Y-m-d H:i:s",
strtotime("$last_reading_time + 7 hours"));
$min_temp = minReading($readings_count, 'value1');

$max_temp = maxReading($readings_count, 'value1');
$avg_temp = avgReading($readings_count, 'value1');
$min_humi = minReading($readings_count, 'value2');

$max_humi = maxReading($readings_count, 'value2');
$avg_humi = avgReading($readings_count, 'value2');
?>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="esp-

style.css">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jque
ry.min.js"></script>
</head>
<header class="header">
<h1> ESP Weather Station</h1>
<form method="get">
<input type="number" name="readingsCount"
min="1" placeholder="Number of readings (<?php echo
$readings_count; ?>)">
<input type="submit" value="UPDATE">
24 | P a g e
</form>
</header>
<body>
<p>Last reading: <?php echo $last_reading_time; ?></p>
<section class="content">
<div class="box gauge--1">
<h3>TEMPERATURE</h3>
<div class="mask">
<div class="semi-circle"></div>
<div class="semi-circle--mask"></div>
</div>
<p style="font-size: 30px;" id="temp">--</p>
<table cellspacing="5" cellpadding="5">
<tr>
<th colspan="3">Temperature <?php
echo $readings_count; ?> readings</th>
</tr>
<tr>
<td>Min</td>
<td>Max</td>
<td>Average</td>
</tr>
<tr>
<td><?php echo $min_temp['min_amount'];
?> °C</td>
<td><?php echo $max_temp['max_amount'];
?> °C</td>
<td><?php echo
round($avg_temp['avg_amount'], 2); ?> °C</td>
</tr>
</table>
</div>
<div class="box gauge--2">
<h3>HUMIDITY</h3>
<div class="mask">
<div class="semi-circle"></div>
<div class="semi-circle--mask"></div>
</div>
<p style="font-size: 30px;" id="humi">--</p>
<table cellspacing="5" cellpadding="5">
<tr>
<th colspan="3">Humidity <?php echo
$readings_count; ?> readings</th>
</tr>
25 | P a g e
<tr>
<td>Min</td>
<td>Max</td>
<td>Average</td>
</tr>
<tr>
<td><?php echo $min_humi['min_amount'];
?> %</td>
<td><?php echo $max_humi['max_amount'];
?> %</td>
<td><?php echo
round($avg_humi['avg_amount'], 2); ?> %</td>
</tr>
</table>
</div>
</section>
<?php
echo '<h2> View Latest ' . $readings_count . '
Readings</h2>
<table cellspacing="5" cellpadding="5"
id="tableReadings">
<tr>
<th>ID</th>
<th>Sensor</th>
<th>Location</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Timestamp</th>
</tr>';
$result = getAllReadings($readings_count);
if ($result) {
while ($row = $result->fetch_assoc()) {
$row_id = $row["id"];
$row_sensor = $row["sensor"];
$row_location = $row["location"];
$row_value1 = $row["value1"];
$row_reading_time = $row["reading_time"];
// Uncomment to set timezone to - 1 hour (you
can change 1 to any number)
26 | P a g e
//$row_reading_time = date("Y-m-d H:i:s",
strtotime("$row_reading_time - 1 hours"));
// Uncomment to set timezone to + 7 hours (you
can change 7 to any number)
//$row_reading_time = date("Y-m-d H:i:s",
strtotime("$row_reading_time + 7 hours"));
echo '<tr>
<td>' . $row_id . '</td>
<td>' . $row_sensor . '</td>
<td>' . $row_location . '</td>
<td>' . $row_value1 . '</td>
<td>' . $row_reading_time . '</td>
</tr>';
}
echo '</table>';
$result->free();
}
?>
<script>
var value1 = <?php echo $last_reading_temp; ?>;
var value2 = <?php echo $last_reading_humi; ?>;
setTemperature(value1);
setHumidity(value2);
function setTemperature(curVal){
//set range for Temperature in Celsius -5 Celsius to
38 Celsius
var minTemp = -5.0;
var maxTemp = 38.0;
//set range for Temperature in Fahrenheit 23
Fahrenheit to 100 Fahrenheit
//var minTemp = 23;
//var maxTemp = 100;
var newVal = scaleValue(curVal, [minTemp, maxTemp],

[0, 180]);
$('.gauge--1 .semi-circle--mask').attr({
style: '-webkit-transform: rotate(' + newVal +
'deg);' +
'-moz-transform: rotate(' + newVal + 'deg);' +
27 | P a g e
'transform: rotate(' + newVal + 'deg);'
});
$("#temp").text(curVal + ' ºC');
}
function setHumidity(curVal){
//set range for Humidity percentage 0 % to 100 %
var minHumi = 0;
var maxHumi = 100;
var newVal = scaleValue(curVal, [minHumi, maxHumi],

[0, 180]);
$('.gauge--2 .semi-circle--mask').attr({
style: '-webkit-transform: rotate(' + newVal +
'deg);' +
'-moz-transform: rotate(' + newVal + 'deg);' +
'transform: rotate(' + newVal + 'deg);'
});
$("#humi").text(curVal + ' %');
}
function scaleValue(value, from, to) {

var scale = (to[1] - to[0]) / (from[1] - from[0]);
var capped = Math.min(from[1], Math.max(from[0],
value)) - from[0];
return ~~(capped * scale + to[0]);
}
</script>
</body>
</html>
Jika Anda mencoba mengakses nama domain Anda di jalur URL berikut,
Anda akan melihat yang berikut:
http://example.com/esp-weather-station.php
28 | P a g e
Jika Anda melihat halaman web dengan nilai kosong di browser Anda,
itu berarti semuanya sudah siap. Di bagian berikutnya, Anda akan
mempelajari cara memasukkan data dari ESP32 atau ESP8266 ke dalam
database.
7. Mempersiapkan ESP32 atau ESP8266 Anda
Proyek ini kompatibel dengan papan ESP32 dan ESP8266. Anda hanya
perlu merakit sirkuit sederhana dan mengunggah sketsa yang disediakan
untuk memasukkan suhu, kelembapan, tekanan, dan lainnya ke dalam
basis data Anda setiap 10 menit.
29 | P a g e
Bagian yang Diperlukan
Untuk contoh ini kita akan mendapatkan pembacaan sensor dari

sensor BME280. Berikut daftar bagian yang Anda butuhkan untuk
membangun sirkuit untuk proyek ini:
1) ESP32 / ESP8266
2) Sensor BME280
3) Kabel jumper
4) Breadboard
skema
Modul sensor BME280 yang kami gunakan berkomunikasi melalui

protokol komunikasi I2C, jadi Anda perlu menghubungkannya ke pin ESP32
atau ESP8266 I2C.
Kabel BME280 ke ESP32
Pin ESP32 I2C adalah:
 GPIO 22: SCL (SCK)

 GPIO 21: SDA (SDI)
30 | P a g e
Jadi, merakit sirkuit Anda seperti yang ditunjukkan pada diagram skema
berikut ( Panduan untuk ESP32 dengan BME280 dan ESP32 BME280 Web
Server ).
Pinout ESP32 : https://randomnerdtutorials.com/esp32-pinout-

reference-gpios/
Kabel BME280 ke ESP8266
Pin ESP8266 I2C adalah:
 GPIO 5 (D1): SCL (SCK)

 GPIO 4 (D2): SDA (SDI)
31 | P a g e
Rakit sirkuit Anda seperti pada diagram skema berikutnya jika Anda
menggunakan papan ESP8266 ( baca Panduan untuk ESP8266 dengan
BME280 ).
Pinout ESP8266 : https://randomnerdtutorials.com/esp8266-bme280-

arduino-ide/
Kode ESP32/ESP8266
Kami akan memprogram ESP32/ESP8266 menggunakan Arduino IDE,

jadi Anda harus menginstal add-on ESP di Arduino IDE Anda.
Ikuti salah satu tutorial berikutnya tergantung pada papan yang Anda
gunakan:
 Instal Papan ESP32 di Arduino IDE

(https://randomnerdtutorials.com/installing-the-esp32-board-in-
arduino-ide-windows-instructions/) – Anda juga perlu menginstal
Perpustakaan BME280 dan perpustakaan Adafruit_Sensor
32 | P a g e
(https://randomnerdtutorials.com/esp32-bme280-arduino-ide-
pressure-temperature-humidity/)
 Instal Board ESP8266 di Arduino IDE
(https://randomnerdtutorials.com/how-to-install-esp8266-board-
arduino-ide/) – Anda juga perlu menginstal Library BME280 dan library
Adafruit_Sensor (https://randomnerdtutorials.com/esp8266-bme280-
arduino-ide/)
Setelah menginstal add-on dan pustaka papan yang diperlukan,

salin kode berikut ke Arduino IDE Anda, tetapi jangan mengunggahnya dulu.
Anda perlu membuat beberapa perubahan untuk membuatnya bekerja
untuk Anda.
/*
Rui Santos
Complete project details at Complete project details at
esp8266/


*/
#ifdef ESP32
#include <WiFi.h>
#include <HTTPClient.h>
#else
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClient.h>
#endif
#include <Wire.h>
#include <Adafruit_Sensor.h>
33 | P a g e
#include <Adafruit_BME280.h>
const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";
//Your Domain name with URL path or IP address with path

const char* serverName = "http://example.com/esp-post-
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 /esp-
post-data.php also needs to have the same key
String apiKeyValue = "tPmAT5Ab3j7F9";
String sensorName = "BME280";
String sensorLocation = "Office";
/*#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_BME280 bme; // I2C

//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);
// software SPI
// the following variables are unsigned longs because the

time, measured in
// milliseconds, will quickly become a bigger number than
can be stored in an int.
unsigned long lastTime = 0;
// Timer set to 10 minutes (600000)
//unsigned long timerDelay = 600000;
// Set timer to 30 seconds (30000)
unsigned long timerDelay = 30000;
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
34 | P a g e
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address:
");
Serial.println(WiFi.localIP());
// (you can also pass in a Wire library object like

&Wire2)
bool status = bme.begin(0x76);
if (!status) {
Serial.println("Could not find a valid BME280 sensor,
check wiring or change I2C address!");
while (1);
}
Serial.println("Timer set to 30 seconds (timerDelay

variable), it will take 30 seconds before publishing the
first reading.");
}
void loop() {
//Send an HTTP POST request every 10 minutes
if ((millis() - lastTime) > timerDelay) {
//Check WiFi connection status
if(WiFi.status()== WL_CONNECTED){
WiFiClient client;
HTTPClient http;
// Your Domain name with URL path or IP address with

path
http.begin(client, 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
35 | P a g e
+ "&location=" + sensorLocation
+ "&value1=" + String(bme.readTemperature())
+ "&value2=" +
String(bme.readHumidity()) + "&value3=" +
String(bme.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");
}
36 | P a g e
lastTime = millis();
}
}
Mengatur kredensial jaringan Anda
Anda perlu mengubah baris berikut dengan kredensial jaringan Anda: SSID
dan kata sandi. Kode dikomentari dengan baik di mana Anda harus
membuat perubahan.
// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Menyetel nama server Anda
Anda juga perlu mengetikkan nama domain Anda, sehingga ESP

menerbitkan bacaan ke server Anda sendiri.
const char* serverName = "http://example.com/esp-post-

data.php";
Sekarang, Anda dapat mengunggah kode ke papan Anda. Ini harus bekerja
langsung baik di papan ESP32 atau ESP8266. Jika Anda ingin mempelajari
cara kerja kode, baca bagian selanjutnya.
Cara kerja kode
Proyek ini sudah cukup lama, jadi kami tidak akan membahas secara detail
cara kerja kode, tetapi inilah ringkasan singkatnya:
 Impor semua perpustakaan untuk membuatnya berfungsi (itu akan

mengimpor perpustakaan ESP32 atau ESP8266 berdasarkan papan
yang dipilih di Arduino IDE Anda)
 Setel variabel yang mungkin ingin Anda ubah
(apiKeyValue, sensorName, sensorLocation)
 Itu apiKeyValue hanyalah string acak yang dapat Anda modifikasi. Ini
digunakan untuk alasan keamanan, jadi hanya siapa saja yang
mengetahui kunci API Anda yang dapat memublikasikan data ke
database Anda
 Inisialisasi komunikasi serial untuk keperluan debugging
 Buat koneksi Wi-Fi dengan router Anda
37 | P a g e
 Inisialisasi BME280 untuk mendapatkan bacaan
Kemudian, loop()adalah tempat Anda benar-benar membuat

permintaan HTTP POST setiap 10 menit dengan pembacaan BME280 terbaru:
// 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(bme.readTemperature()) +
"&value2=" + String(bme.readHumidity()) + "&value3=" +
String(bme.readPressure()/100.0F) + "";
int httpResponseCode = http.POST(httpRequestData);
Anda bisa berkomentarhttpRequestDatavariabel di atas yang

menggabungkan semua pembacaan BME280 dan
menggunakanhttpRequestDatavariabel di bawah ini untuk tujuan
pengujian:
String httpRequestData =
"api_key=tPmAT5Ab3j7F9&sensor=BME280&location=Office&value1=
24.75&value2=49.54&value3=1005.14";
Demonstrasi
Setelah menyelesaikan semua langkah, biarkan papan ESP Anda
mengumpulkan beberapa bacaan dan mempublikasikannya ke server
Anda. Jika semuanya benar, inilah yang akan Anda lihat di Serial Monitor
Arduino IDE Anda:
38 | P a g e
Jika Anda membuka nama domain Anda di jalur URL ini:
http://example.com/esp-weather-station.php
Anda akan melihat 20 bacaan terbaru yang tersimpan di database Anda.

Ada dua pengukur yang menunjukkan pembacaan suhu dan kelembaban
terbaru, dan stempel waktu.
Refresh halaman web untuk melihat bacaan terbaru:
39 | P a g e
Ada bidang tempat Anda dapat mengetikkan jumlah bacaan untuk
divisualisasikan, serta jumlah bacaan untuk statistik ini: minimum,
maksimum, dan rata-rata. Secara default diatur ke 20. Misalnya, jika Anda
mengetik 30 dan menekan tombol perbarui, Anda akan melihat bahwa
halaman web Anda memperbarui dan menghitung ulang semua nilai.
Halaman web juga responsif seluler, sehingga Anda dapat menggunakan

perangkat apa pun untuk mengakses:
40 | P a g e
Anda juga dapat membuka phpMyAdmin untuk mengelola data yang
tersimpan diSensorDatameja. Anda dapat menghapusnya, mengedit, dll ...
41 | P a g e
42 | P a g e

PRAKTIKUM

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

PRAKTIKUM

Diunggah oleh

Hak Cipta:

Format Tersedia

1|Page

Mahasiswa mampu menggunakan ESP32 untuk membangun aplikasi

1. Mahasiswa dapat membangun weather stasiun berbasis ESP32

Membuat Weather Station dengan modul ESP32/ESP8266

(Database MySQL dan PHP)

A. Alat dan Bahan

Untuk proyek ini, Anda memerlukan file-file ini:

1) Kueri SQL untuk membuat tabel Anda:

2) Masukkan dan akses bacaan database:

3) Menangani permintaan Posting HTTP:

4) File CSS untuk menata halaman web Anda:

5) Tampilkan pembacaan sensor Anda:

2. Hosting Aplikasi PHP dan Database MySQL Anda

Berikut adalah ikhtisar tingkat tinggi tentang cara kerja proyek:

2) Di server Anda, ada skrip php yang memungkinkan Anda menyimpan

3) Kemudian, skrip php lain akan menampilkan halaman web dengan

4) Terakhir, Anda dapat memvisualisasikan bacaan dari mana saja di

Saya sarankan menggunakan salah satu layanan hosting berikut

1) Bluehost (mudah digunakan dengan cPanel) : nama domain gratis saat

Kedua layanan tersebut adalah yang saya gunakan dan

Jika Anda menyukai proyek kami, Anda dapat mempertimbangkan

Catatan: Anda juga dapat menjalankan server LAMP (Linux, Apache,

Setelah mendaftar untuk akun hosting dan menyiapkan nama

Membuat database dan pengguna

Buka tab “ Lanjutan ”:

1. Ketik "database" di bilah pencarian dan pilih "MySQL Database Wizard".

Catatan: nanti Anda harus menggunakan nama basis data dengan

Database dan pengguna baru Anda berhasil dibuat. Sekarang,

 Nama basis data : example_esp_data

Membuat tabel SQL

Penting: pastikan Anda telah membukacontoh_esp_databasis

CREATE TABLE SensorData (

Setelah itu, Anda akan melihat tabel yang baru dibuat

Jika Anda menggunakan penyedia hosting dengan cPanel, Anda

Kemudian, pilih opsi public_html dan tekan tombol “+ File” untuk

Buat file baru di /public_html dengan nama dan ekstensi persis

The above copyright notice and this permission notice

// Keep this API Key value to be compatible with the ESP

$api_key= $sensor = $location = $value1 = $value2 =

$result = insertReading($sensor, $location, $value1,

5. Skrip PHP untuk Fungsi Basis Data

Buat file baru di /public_html yang bertanggung jawab untuk

Salin skrip PHP itu:

Permission is hereby granted, free of charge, to any

The above copyright notice and this permission notice

// REPLACE with your Database name

function insertReading($sensor, $location, $value1,

$sql = "INSERT INTO SensorData (sensor, location,

if ($conn->query($sql) === TRUE) {

$sql = "SELECT id, sensor, location, value1, value2,

$sql = "SELECT id, sensor, location, value1, value2,

function minReading($limit, $value) {

function maxReading($limit, $value) {

$sql = "SELECT MAX(" . $value . ") AS max_amount FROM

function avgReading($limit, $value) {

$sql = "SELECT AVG(" . $value . ") AS avg_amount FROM

Sebelum menyimpan file, Anda perlu memodifikasi$dbname,$nama

// Your Database name

Setelah menambahkan nama database, username dan password, simpan

6. Skrip PHP – Menampilkan Pembacaan Basis Data pada Pengukur dan

Salin CSS itu ke file Anda dan simpan:

Permission is hereby granted, free of charge, to any

The above copyright notice and this permission notice

@media screen and (max-width: 800px) {