Monitoring Data Sensor Jarak secara Real Time

Pada tutorial kali ini, saya menggunakan :

ESP32
Sensor Ultrasonik
Bread Board
Buzzer
Software XAMPP
Software Visual Studio Code

Untuk konfigurasi dari Sensor Jarak dapat dilihat pada blog sebelumnya. Klik Disini

1. Pertama kita download dan instal terlebih dahulu software XAMPP sebagai Server LocalHost.

2. Lalu tekan Start pada Apache dan MySQL

3. Akses chrome dan ketik http://localhost/phpmyadmin/

4. Buat Database baru dan beri nama database. Disini seperti contoh saya menamakan databasenya “sensor_data”

5. Kemudian buat sebuah tabel untuk menampilkan data kita, beri nama seperti contoh diatas saya memberi nama tabel dengan “jarak_sensor”. Tambahkan jumlah kolom yang diinginkan.

6. Lalu akses lokasi file XAMPP yang kita instal tadi (XAMPP=>htdocs)

7. Buat file berikut (NAMA FILE BEBAS ASALKAN FORMAT SAMA) :

index.php
fetch_data.php
insert_data.php
get_data.php
style.css

8. Copy kode berikut untuk file index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"> <!-- Kaitkan file CSS -->
    <title>Data Sensor</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "fetch_data.php", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("data-table").innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }

        // Fetch data every 2 seconds
        setInterval(fetchData, 1000);
    </script>
</head>
<body>

    <h1 style="text-align : center;">Data Sensor Jarak</h1><br>
    <table border="1" style="text-align : center;">
    <thead>
        <tr>
            <th>ID</th>
            <th>Distance (cm)</th>
            <th>Timestamp</th>
        </tr>
    </thead>
    <tbody id="data-table">
        <?php
        // Koneksi ke database
        $servername = "localhost";
        $username = "root"; // Ganti jika diperlukan
        $password = ""; // Ganti jika diperlukan
        $dbname = "sensor_data"; // Ganti dengan nama database Anda

        $conn = new mysqli($servername, $username, $password, $dbname);
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $sql = "SELECT * FROM jarak_sensor ORDER BY id DESC"; // Ganti 'id' dengan nama kolom ID Anda
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo "<tr><td>" . $row["id"] . "</td><td>" . $row["distance"] . "</td></tr>";
            }
        } else {
            echo "<tr><td colspan='3'>Tidak ada data</td></tr>";
        }

        $conn->close();
        ?>
        </tbody>
    </table>
    
    <script>
// Panggil fungsi fetchData saat halaman dimuat
        window.onload = fetchData;
    </script>
</body>
</html>

9. Copy kode berikut untuk fetch_data.php

<?php
// Koneksi ke database
$servername = "localhost";
$username = "root"; // Ganti jika perlu
$password = ""; // Ganti jika perlu
$dbname = "sensor_data"; // Ganti dengan nama database Anda

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM jarak_sensor ORDER BY id DESC"; // Ganti 'id' dengan nama kolom ID Anda
$result = $conn->query($sql);

if ($result->num_rows > 0) {

while ($row = $result->fetch_assoc()) {
    echo "<tr>";
        echo "<td>" . $row["id"] . "</td>";
        echo "<td>" . $row["distance"] . "</td>";
        echo "<td>" . $row["timestamp"] . "</td>";
} }else {
    echo "<tr><td colspan='4'>No data found</td></tr>";
}

$conn->close();
?>

10. Copy kode berikut untuk insert_data.php

<?php
$servername = "localhost";
$username = "root"; // Default username XAMPP
$password = ""; // Default password XAMPP (biasanya kosong)
$dbname = "sensor_data";

// Membuat koneksi
$conn = new mysqli($servername, $username, $password, $dbname);

// Cek koneksi
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Ambil data dari permintaan POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Mengambil data dari request POST
    $distance = $_POST['distance'];

    // Lakukan sesuatu dengan data, seperti menyimpannya ke database
    // Contoh:
    // $conn = new mysqli($servername, $username, $password, $dbname);
    // $conn->query("INSERT INTO jarak_sensor (distance) VALUES ('$distance')");
    
    echo "Data diterima: " . $distance;
} else {
    echo "Tidak ada data yang diterima.";
}

// Siapkan dan jalankan pernyataan
$stmt = $conn->prepare("INSERT INTO jarak_sensor (distance) VALUES (?)");
$stmt->bind_param("d", $distance);
$stmt->execute();

$stmt->close();
$conn->close();
?>

11. Copy kode berikut untuk get_data.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "sensor_data";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT distance, created_at FROM jarak_sensor ORDER BY created_at DESC LIMIT 10";
$result = $conn->query($sql);

$data = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

$conn->close();

header('Content-Type: application/json');
echo json_encode($data);
?>

12. Copy kode berikut untuk style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f9;
    color: #333;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Susun elemen secara vertikal */
    justify-content: flex-start; /* Pastikan elemen dimulai dari atas */
    align-items: center;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 900px;
    text-align: center;
    margin-top: 20px; /* Jarak antara judul dan tabel */
}

h1 {
    font-size: 2.5em;
    color: #3a3a86;
    margin-top: 20px;
    text-align: center;
}

table {
    width: 80%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 12px;
    text-align: center;
}

th {
    background-color: #3a3a86;
    color: #fff;
    font-weight: bold;
}

td {
    background-color: #f9f9f9;
}

tr:nth-child(even) td {
    background-color: #f1f1f1;
}

tr:hover td {
    background-color: #d3d3f7;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }

    table, th, td {
        font-size: 0.9em;
    }
}

13. Copy kode Arduino berikut (BLYNK SESUAI DENGAN KODE YANG DIDAPATKAN SENDIRI)

#define BLYNK_TEMPLATE_ID "TMPL67xL7gPmF" // Ganti dengan Kode Blynk Anda
#define BLYNK_TEMPLATE_NAME "Pengukur Blynk" // Ganti dengan Kode Blynk Anda
#define BLYNK_AUTH_TOKEN "1Y-nhwGScUfFBUeNQ5xRmsoMILRydhR_" // Ganti dengan Kode Blynk Anda


#define BLYNK_PRINT Serial
#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
#include <HTTPClient.h>

int trig_sensor_jarak = 5; // Trigger pin
int echo_sensor_jarak = 18; // Echo pin
int buzzer_pin = 4; // Pin untuk buzzer

char auth[] = "1Y-nhwGScUfFBUeNQ5xRmsoMILRydhR_"; // Ganti dengan Kode Blynk Anda
char ssid[] = "wifi-iot"; // Your WiFi SSID // Ganti dengan SSID Anda
char pass[] = "password-iot"; // Your WiFi Password // Ganti dengan Password SSID Anda

BlynkTimer timer;

void setup() {
    Serial.begin(9600);
    pinMode(trig_sensor_jarak, OUTPUT);
    pinMode(echo_sensor_jarak, INPUT);
    pinMode(buzzer_pin, OUTPUT); // Set buzzer pin as output
    
    Blynk.begin(auth, ssid, pass, "blynk.cloud", 80);
    timer.setInterval(1000L, sendSensor); // Send data every second
}

void loop() {
    Blynk.run();
    timer.run();
}

void sendSensor() {
    long duration, distance;

    // Clear the trigPin condition
    digitalWrite(trig_sensor_jarak, LOW);
    delayMicroseconds(2);

    // Trigger the sensor
    digitalWrite(trig_sensor_jarak, HIGH);
    delayMicroseconds(10);
    digitalWrite(trig_sensor_jarak, LOW);

    // Read the echoPin, returns the sound wave travel time in microseconds
    duration = pulseIn(echo_sensor_jarak, HIGH);

    // Calculate the distance (in cm)
    distance = duration * 0.034 / 2;

    // Print distance to Serial Monitor
    Serial.print("Distance: ");
    Serial.print(distance);
    Serial.println(" cm");


    // Send distance data to Blynk
    Blynk.virtualWrite(V0, distance); // Use V0 for a display widget in your Blynk app

  // Kirim data ke database
    if(WiFi.status() == WL_CONNECTED) {
        HTTPClient http;
        http.begin("http://192.168.18.212/insert_data.php"); // Ganti dengan alamat server Anda
        http.addHeader("Content-Type", "application/x-www-form-urlencoded");
        
        String httpRequestData = "distance=" + String(distance);
        int httpResponseCode = http.POST(httpRequestData);

        if (httpResponseCode > 0) {
            String response = http.getString();
            Serial.println(httpResponseCode);
            Serial.println(response);
        } else {
            Serial.print("Error on sending POST: ");
            Serial.println(httpResponseCode);
        }
        
        http.end();
    }

    // Check if distance is less than 10 cm
    if (distance > 10) {
        digitalWrite(buzzer_pin, HIGH); // Turn on buzzer
        Blynk.logEvent("sensorbunyi"); // Ganti dengan Kode Event/Notification Anda
    } else {
        digitalWrite(buzzer_pin, LOW); // Turn off buzzer
    }
}

Jika sudah selesai diupload, maka kita dapat mengecek dengan membuka Browser dan ketik http://localhost/index.php/ untuk nama file PHP dapat disesuaikan.

Beginilah tampilan ketika data berhasil terkirim ke XAMPP

Selamat Mencoba !!

Jika anda berminat menggunakan jasa labrobotika, silahkan hubungi admin: WHATSAPP