Real-Time Sensor Data Display Using NodeMCU ESP8266: A Step-by-Step Guide

 

The video tutorial provides a step-by-step guide on how to display sensor values on a web page in real-time using NodeMCU ESP8266. Here's a simplified version of the code structure you would need for the Arduino and PHP parts:


### Arduino Code (for NodeMCU ESP8266)

```cpp

#include <ESP8266WiFi.h>

#include <WiFiClient.h>


const char* ssid = "YOUR_SSID"; // Replace with your network SSID

const char* password = "YOUR_PASSWORD"; // Replace with your network password

const char* host = "192.168.43.134"; // Replace with your server IP address


void setup() {

  Serial.begin(115200);

  WiFi.begin(ssid, password);

  

  while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print(".");

  }

  Serial.println("WiFi connected");

}


void loop() {

  int sensorValue = analogRead(A0); // Read the LDR value

  String url = String("/kirim_data.php?sensor=") + sensorValue;


  WiFiClient client;

  if (client.connect(host, 80)) {

    client.print(String("GET ") + url + " HTTP/1.1\r\n" +

                 "Host: " + host + "\r\n" +

                 "Connection: close\r\n\r\n");

    delay(1000);

  }

  delay(1000); // Send data every second

}

```


### PHP Code (kirim_data.php)

```php

<?php

$servername = "localhost";

$username = "username"; // Replace with your database username

$password = ""; // Replace with your database password

$dbname = "web_sensor"; // Replace with your database name


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


if ($conn->connect_error) {

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

}


if (isset($_GET['sensor'])) {

  $sensorValue = $_GET['sensor'];

  $sql = "UPDATE sensor SET nilai_sensor='$sensorValue' WHERE id=1"; // Assuming you have an ID column

  $conn->query($sql);

}


$conn->close();

?>

```


### HTML/JavaScript Code (index.php)

```html

<!DOCTYPE html>

<html>

<head>

    <title>Real-Time Sensor Data</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>

        $(document).ready(function() {

            setInterval(function() {

                $("#sensorValue").load("cek_sensor.php");

            }, 1000); // Update every second

        });

    </script>

</head>

<body>

    <h2>Sensor Value: <span id="sensorValue">Loading...</span></h2>

</body>

</html>

```


### PHP Code (cek_sensor.php)

```php

<?php

$servername = "localhost";

$username = "username"; // Replace with your database username

$password = ""; // Replace with your database password

$dbname = "web_sensor"; // Replace with your database name


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


if ($conn->connect_error) {

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

}


$sql = "SELECT nilai_sensor FROM sensor WHERE id=1"; // Assuming you have an ID column

$result = $conn->query($sql);


if ($result->num_rows > 0) {

  $row = $result->fetch_assoc();

  echo $row['nilai_sensor'];

} else {

  echo "0 results";

}


$conn->close();

?>

```


Make sure to replace placeholders like `YOUR_SSID`, `YOUR_PASSWORD`, and database credentials with your actual values. This code will allow you to read sensor values from the LDR, send them to a PHP server, and display them on a web page in real-time.

0 Response to "Real-Time Sensor Data Display Using NodeMCU ESP8266: A Step-by-Step Guide"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel

Iklan Bawah Artikel