Timbangan Digital IoT

Data Logger Web

Berbasis ESP32, PHP Data Object dan PostgreSQL

ArduMeka Premium #4 | Ajang Rahmat

Salam Kenal _
Nama : Ajang Rahmat
Domisili : Sumedang
Pekerjaan : Founder & Director Kelas Robot
: PT Sawala Inovasi Indonesia
: https://sawala.co.id
Pendidikan : PJJ Informatika ( Mahasiswa )
: Universitas Siber Asia

Slide No. 2
Media Sosial _
Facebook : https://www.facebook.com/ajangrahmat

Instagram : https://www.instagram.com/ajangrahmat

Youtube : https://www.youtube.com/@kelasrobot

: https://www.youtube.com/@programmersehat

Email : [email protected] / [email protected]

Kontak : 0812-8793-1296

Slide No. 3
Outline _
● Pengenalan ESP32 / Instalasi ESP32 pada Arduino IDE
● Pengenalan PHP dan PostgreSQL
● Rangkaian Project dan Contoh Program Tiap Sensor / Module
● Mengaktifkan Ekstension PDO PGSQL pada XAMPP
● Connection + Input Data PHP XAMPP ke PostgreSQL
● Tampilkan Data Pada Database Melalui HTML dan JS +Realtime MQTT
● Final Program Timbangan Digital Iot ESP32

Slide No. 4
Software _
1. Arduino IDE

https://www.arduino.cc/en/software

2. XAMPP ( Versi PHP 8.0.25 )

https://www.apachefriends.org/download.html

3. PostgreSQL

https://www.enterprisedb.com/downloads/postgres-postgresql-downloads

4. Code Editor ( VSCode, Sublime, Notepad++, dll)

Rekaman PERSIAPAN ( WAJIB TONTON )

https://www.youtube.com/watch?v=N5E1QwbtsWo

Slide No. 5
Hardware _
1. ESP32 DEV KIT | LINK TOPED
2. ESP32 DEV KIT Shield | LINK TOPED
3. HX711 + Load Cell | LINK TOPED
4. 3D Print Load Cell +Baud | LINK TOPED
5. LCD i2C 16x2 | LINK TOPED
6. Buzzer Module | LINK TOPED
7. Kabel Jumper Female-Female | LINK TOPED
8. Kabel Micro USB | LINK TOPED
9. Adaptor 9V 1A | LINK TOPED
10. Module Push Button 2pcs | LINK TOPED
Paket Lengkap: LINK TOPED

Slide No. 6
ESP32 _
ESP32 _
ESP32 adalah Board Microcontroller dari perusahaan Espressif Systems, China.

https://www.espressif.com

Slide No. 8
Specifications of ESP32 _
● Single or Dual-Core 32-bit LX6 Microprocessor with clock frequency up to 240 MHz.
● 520 KB of SRAM, 448 KB of ROM and 16 KB of RTC SRAM.
● Supports 802.11 b/g/n Wi-Fi connectivity with speeds up to 150 Mbps.
● Support for both Classic Bluetooth v4.2 and BLE specifications.
● 34 Programmable GPIOs.
● Up to 18 channels of 12-bit SAR ADC and 2 channels of 8-bit DAC
● Serial Connectivity include 4 x SPI, 2 x I2C, 2 x I2S, 3 x UART.
● Ethernet MAC for physical LAN Communication (requires external PHY).
● 1 Host controller for SD/SDIO/MMC and 1 Slave controller for SDIO/SPI.
● Motor PWM and up to 16-channels of LED PWM.
● Secure Boot and Flash Encryption.
● Cryptographic Hardware Acceleration for AES, Hash (SHA-2), RSA, ECC and RNG.

Sumber: https://www.electronicshub.org/getting-started-with-esp32/

Slide No. 9
Different Ways to Program _
● Arduino IDE
● PlatformIO IDE (VS Code)
● LUA
● MicroPython
● Espressif IDF (IoT Development Framework)
● JavaScript

Sumber: https://www.electronicshub.org/getting-started-with-esp32/
Slide No. 10
ESP32 PINOUT _

Sumber: https://www.electronicshub.org/getting-started-with-esp32/

Slide No. 11
ESP32 Arduino IDE _
1. Buka menu FILE, pilih PREFERENCES ( CTRL + Comma )
2. Pada bagian Additional Boards Manager URLs:, masukan:
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/pack
age_esp32_index.json,
http://arduino.esp8266.com/stable/package_esp8266com_index.json
Lalu klik OK.

3. Buka menu Tools, pilih Board:, pilih Boards Manager…

4. Cari ESP32, pilih versi 1.0.6, lalu klik Install
5. Jika instalasi selesai, klik Close

Video Tutorial: https://www.youtube.com/watch?v=_e4gQs8DZow

Slide No. 12
PHP x PostgreSQL _
PHP _
PHP: Hypertext Preprocessor

Bahasa scripting tujuan umum populer yang sangat cocok untuk

pengembangan web.

Cepat, fleksibel, dan pragmatis, PHP mendukung segalanya mulai dari blog
Anda hingga situs web paling populer di dunia.

Sumber: https://www.php.net/

Slide No. 14
Kenapa PHP ? _

Slide No. 15
PostgreSQL _
PostgreSQL: The World's Most Advanced Open Source Relational Database

PostgreSQL adalah sistem database objek-relasional open source yang kuat

dengan lebih dari 35 tahun pengembangan aktif.

Yang membuatnya mendapatkan reputasi yang kuat untuk keandalan,

ketahanan fitur, dan kinerja.

Sumber: https://www.postgresql.org/

Slide No. 16
Kenapa PostgreSQL ? _

https://www.postgresql.org/about/

Slide No. 17
Rangkaian & Program
Module dan Sensor _
 Buzzer ESP32
Kabel Merah + D15

Rangkaian _ Kabel Hitam - GND

LCD I2C ESP32

GND GND
VCC 5V
SDA D21
SCL D22

HX711 ESP32
Push Button ESP32
GND GND
GND GND
VCC 5V
VCC 5V
DT RX2
Push Button 1 D27
SCK D4
Push Button 2 D26

Slide No. 19
Program Tes Buzzer _

#define buzzer 15

void setup() {
pinMode(buzzer, OUTPUT);
digitalWrite(buzzer, HIGH);
delay(5000);
digitalWrite(buzzer, LOW);
}

void loop() {

Slide No. 20
Program Tes 2 Push Button _
#define pinButton1 27
#define pinButton2 26
boolean nilaiButton1 = 0;
boolean nilaiButton2 = 0;

void setup() {
Serial.begin(115200);
pinMode(pinButton1, INPUT);
pinMode(pinButton2, INPUT);
}

void loop() {
nilaiButton1 = digitalRead(pinButton1);
nilaiButton2 = digitalRead(pinButton2);
Serial.print(nilaiButton1);
Serial.println(nilaiButton2);
}

Slide No. 21
Program Tes LCD I2C _

#include <LiquidCrystal_I2C.h>
Library:
LiquidCrystal_I2C lcd(0x27, 16, 2);
https://github.com/johnrickman/Li
void setup() {
lcd.init(); quidCrystal_I2C
lcd.backlight();
}

void loop(){
lcd.setCursor(0,0);
lcd.print("TEST LCD i2C");
lcd.setCursor(0,1);
lcd.print("KelasRobot.com");
}

Slide No. 22
 Library:
Program HX711 Kalibrasi_
https://github.com/bogde/HX711
#include <Arduino.h>
#include "soc/rtc.h"
#include "HX711.h"

// HX711 circuit wiring void loop() {

const int LOADCELL_DOUT_PIN = 16;
const int LOADCELL_SCK_PIN = 4; if (scale.is_ready()) {
scale.set_scale();
HX711 scale; Serial.println("Tare... remove any weights from the scale.");
delay(5000);
void setup() { scale.tare();
Serial.begin(115200); Serial.println("Tare done...");
rtc_clk_cpu_freq_set(RTC_CPU_FREQ_80M); Serial.print("Place a known weight on the scale...");
scale.begin(LOADCELL_DOUT_PIN, delay(5000);
LOADCELL_SCK_PIN); long reading = scale.get_units(10);
} Serial.print("Result: ");
Serial.println(reading);
}
else {
Serial.println("HX711 not found.");
calibration factor = }
delay(1000);
(reading)/(known weight) }

Slide No. 23
Program Tes HX711 _
#include <Arduino.h>
#include "HX711.h"
#include "soc/rtc.h"
const int LOADCELL_DOUT_PIN = 16;
const int LOADCELL_SCK_PIN = 4;
HX711 scale;

void setup() {
Serial.begin(115200);
rtc_clk_cpu_freq_set(RTC_CPU_FREQ_80M);
Serial.println("HX711...");
scale.begin(LOADCELL_DOUT_PIN, LOADCELL_SCK_PIN);
scale.set_scale(481.222);
scale.tare();
}

void loop() {
float kg = scale.get_units() / 1000;
if (kg <= 0) kg = 0;
Serial.println("Kg: " + String(kg));
scale.power_down();
delay(10);
scale.power_up();
}

Slide No. 24
Program Tes HTTP Request _
#include<WiFi.h> void httpGET(String URL) {
#include <HTTPClient.h> if (WiFi.status() == WL_CONNECTED) {
const char* ssid = "isi nama wifi"; HTTPClient http;
const char* pass = "isi password wifi"; http.begin(URL);
unsigned const long interval = 2000; int httpResponCode = http.GET();
unsigned long zero = 0; Serial.println(httpResponCode);
if (httpResponCode > 0) {
void setup() { String payload = http.getString();
Serial.begin(115200); Serial.print(payload);
WiFi.begin(ssid, pass); } else {
while (WiFi.status() != WL_CONNECTED) { Serial.print("error ");
delay(100); Serial.println(httpResponCode);
Serial.println("."); }
} } else {
Serial.println("WiFi Connected!"); Serial.println("WiFi Not Connected!!!");
Serial.println(WiFi.localIP()); }
}
}

void loop() {
if (millis() - zero > interval) {
httpGET("http://example.org");
zero = millis();
}
}

Slide No. 25
Program Tes MQTT _
Library:
https://gist.github.com/ajangrah
mat/992be6d182c90cf0dda3debfc167 https://github.com/knolleary/pubs
86b6 ubclient

Slide No. 26
Aktivasi PDO PGSQL
pada XAMPP
Buka File php.ini _
Pada Apache Klik Config, lalu pilih PHP (php.ini)

Slide No. 28
Buka File php.ini _
Tekan CTRL + F

1. ketik pgsql
2. Ubah direction Down
3. Klik Find Next
4. hapus simbol ;

pada ;extension=pdo_pgsql

sehingga menjadi extension=pdo_pgsql

Tekan CTRL + S dan Close

Slide No. 29
Buka File php.ini _
Pada Apache Klik Config, lalu pilih PHP (php.ini)

Slide No. 30
Connection + Input Data
PHP XAMPP ke
PostgreSQL
Jalankan Apache XAMPP & PostgreSQL _
Silakan jalankan XAMPP cukup Apache-nya saja

Dan juga jalankan Server PostgreSQL dengan membuka PgAdmin.

Slide No. 32
PDO: PHP Data Object _
Interface Universal yang disediakan PHP untuk “berkomunikasi” dengan
Database Server.

Berbeda jika menggunakan mysql extension atau mysqli extension, yang

hanya bisa bekerja dengan database MySQL.

PDO –> Database Driver –> Database Server

Sumber:
https://www.duniailkom.com/tutorial-p
hp-mysql-pengertian-pdo-dan-cara-me
ngaktifkan-pdo-php-data-objects/

Slide No. 33
DBMS Yang Didukung PDO _
1. CUBRID
2. MS SQL Server
3. Firebird
4. IBM
5. Informix
6. MySQL
7. MS SQL Server
8. Oracle
9. ODBC and DB2
10. PostgreSQL Sumber:
11. SQLite https://www.duniailkom.com/tutorial-p
12. 4D hp-mysql-pengertian-pdo-dan-cara-me
ngaktifkan-pdo-php-data-objects/

Slide No. 34
Create Database _

Klik Kanan
pada Databases isi nama database, “timbangan”
klik Save

Slide No. 35
koneksi.php _
Pada C:\xampp\htdocs, buat folder baru dengan nama timbangan.
di dalam folder timbangan buat file baru dengan nama koneksi.php, isi koding dibawah ini:

<?php
$host = 'localhost';
$dbname = 'timbangan';
$user = 'postgres';
$password = '12345678';

try {
$koneksi = new PDO("pgsql:host=$host;dbname=$dbname", $user, $password);
// atur error mode ke Exception
$koneksi->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
echo "Koneksi berhasil terhubung!";
} catch (PDOException $e) {
echo "Koneksi gagal: " . $e->getMessage();
}
?>

Slide No. 36
Create Tabel _ CREATE TABLE data_berat (
tanggal DATE,
waktu TIME,
berat FLOAT
);

Klik Kanan
pada timbangan

Masukan Query SQL dan Klik

Tombol Play atau Tekan F5

Slide No. 37
input.php _
<?php
require_once 'koneksi.php';
// Set timezone ke Jakarta
date_default_timezone_set('Asia/Jakarta');
$berat = $_POST['berat'];
$tanggal = date('Y-m-d'); // Format tanggal: yyyy-mm-dd
$waktu = date('H:i:s'); // Format waktu: hh:mm:ss
$sql = "INSERT INTO data_berat (tanggal, waktu, berat) VALUES (:tanggal, :waktu, :berat)";

try {
$inputBerat = $koneksi->prepare($sql);
$inputBerat->bindParam(':tanggal', $tanggal);
$inputBerat->bindParam(':waktu', $waktu);
$inputBerat->bindParam(':berat', $berat);
$inputBerat->execute();
header('Content-Type: application/json');
echo json_encode(array('status' => 'input berat sukses'));
} catch (PDOException $e) {
header('Content-Type: application/json');
echo json_encode(array('status' => 'input berat gagal', 'error' => $e->getMessage()));
}

Slide No. 38
ESP32 HTTP POST Request _
#include <WiFi.h> void loop() {
#include <HTTPClient.h> if (WiFi.status() == WL_CONNECTED) {
const char* ssid = "isi nama wifi"; HTTPClient http;
const char* password = "isi password wifi"; http.begin(serverName);
const char* serverName = http.addHeader("Content-Type",
"http://alamat_server/timbangan/input.php"; // "application/x-www-form-urlencoded");
Ganti dengan alamat API String requestBody = "berat=" + String(berat++);
float berat = 10.5; // Ganti dengan berat yang int httpResponseCode = http.POST(requestBody);
ingin dikirim if (httpResponseCode > 0) {
String response = http.getString();
void setup() { Serial.println(httpResponseCode);
Serial.begin(115200); Serial.println(response);
WiFi.begin(ssid, password); } else {
while (WiFi.status() != WL_CONNECTED) { Serial.println("Error on HTTP request");
delay(1000); }
Serial.println("Connecting to WiFi..."); http.end();
} }
Serial.println("WiFi connected!"); delay(10000); // Kirim data setiap 10 detik
} }

Slide No. 39
 Tampilkan Data Pada
Database Melalui HTML
dan JS +Realtime MQTT
data.php _
<?php
require_once 'koneksi.php';
$sql = "SELECT * FROM data_berat";
$dataBerat = $koneksi->prepare($sql);
$dataBerat->execute();
$data = array();
while ($row = $dataBerat->fetch(PDO::FETCH_ASSOC)) {
$data[] = array(
'tanggal' => $row['tanggal'],
'waktu' => $row['waktu'],
'berat' => $row['berat']
);
}
header('Content-Type: application/json');
echo json_encode($data);

Slide No. 41
index.php (HTML + JS) _
<!DOCTYPE html> <script>
<html lang="en"> function loadData() {
var request = new XMLHttpRequest();
<head> request.open('GET', 'data.php', true);
<meta charset="UTF-8"> request.onload = function() {
<title>Data Berat</title> if (this.status == 200) {
</head> var data = JSON.parse(this.responseText);
var table =
<body> document.getElementById('data').getElementsByTagName('tbody')[0];
<h1>Data Berat</h1> table.innerHTML = '';
<table id="data"> data.forEach(function(row) {
<thead> var tr = document.createElement('tr');
<tr> tr.innerHTML = '<td>' + row.tanggal + '</td><td>' +
<th>Tanggal</th> row.waktu + '</td><td>' + row.berat + '</td>';
<th>Waktu</th> table.appendChild(tr);
<th>Berat</th> });
</tr> }
</thead> };
<tbody> request.send();
</tbody> }
</table> loadData();
setInterval(loadData, 5000);
</body> </script>

</html>

Slide No. 42
MQTT.JS _

<h1>Data Berat</h1>

<h1 id="berat">-</h1>
<!-- JavaScript -->
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
const client = mqtt.connect('ws://mqtt.ardumeka.com:11217/mqtt')
client.on('connect', function() {
client.subscribe('/ardumeka/j9682121/tes1')
})
client.on('message', function(topic, message) {
const data = message.toString()
const berat = document.querySelector('#berat')
berat.textContent = data
})
</script>

Slide No. 43
CSS _

body {
font-family: Arial, sans-serif; th {
background-color: #f2f2f2; background-color: #4CAF50;
} color: white;
h1 { }
text-align: center; tr:nth-child(even) {
margin-bottom: 50px; background-color: #f2f2f2;
} }
#berat { tr:hover {
font-size: 80px; background-color: #ddd;
text-align: center; }
margin-top: 50px; @media only screen and (max-width: 600px) {
} table {
table { width: 100%;
margin: 50px auto; }
border-collapse: collapse; }
width: 80%;
}
th, td {
text-align: left;
padding: 8px;
}

Slide No. 44
 Final Program
Timbangan Digital Iot
ESP32
Final Program _

https://gist.github.com/ajangrahmat/3
42a258419f4e74cc8158ea3a43c5f3d

Slide No. 46
BONUS: Export Excel
export.php _
<?php // Buat file Excel
require_once 'koneksi.php'; header("Content-Type: application/vnd.ms-excel");
header("Content-Disposition: attachment;
// Buat judul kolom pada tabel Excel filename=data_berat.xls");
$col_title = array(
'Tanggal', // Tulis judul kolom pada file Excel
'Waktu', echo implode("\t", $col_title) . "\r\n";
'Berat'
); // Tulis data pada file Excel
foreach ($data as $row) {
// Buat query untuk mengambil data dari tabel echo implode("\t", $row) . "\r\n";
$sql = "SELECT tanggal, waktu, berat FROM data_berat"; }
$query = $koneksi->prepare($sql);
$query->execute();

// Simpan hasil query ke dalam array

$data = array();
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}

Slide No. 48