Program WEB | Web Temperature

Ako prvé je potrebné si vybrať hosting ktorý podporuje databázový systém MySQL a jazyk PHP. Bez týchto dvoch vecí to jednoducho nepôjde. Po vytvorení vlastnej webstránky bude nutné upraviť aj kód v ESP8266 a to konkrétne URL adresa pre zápis hodnôt (serverName1).

//cast kodu pre ESP8266 ktoru bude treba upravit a doplnit
//WIFI
const char* ssid          = "xxxxx";  //SSID WIFI siete
const char* password_wifi = "xxxx";   //Heslo WIFI siete
//api webtemp
String apiKeyValue        = "mojetralalaapi";  //API kod musi byt rovnaky ako na stranke write.php
 
const char* serverName1   = "http://mojadomena.nieco/write.php"

Po založení domény je potrebné prihlásiť sa do MySQL podľa pokynov na vašom hostingu. Po prihlásení je potrebné vytvoriť tabuľku do ktorej sa budú hodnoty ukladať. Vytvoríme ju tak že necháme zbehnúť nižšie uvedený kód ktorý nám vygeneruje tabuľku s požadovanými atribútmi.

Vytvorenie tabuľky v MySQL

V prostredí MySQL klikneme na kolónku SQL, skopírujeme kód a klikneme na „Vykonaj“. Po vykonaní príkazu by sa nám v ľavom strome mala zjaviť nová tabuľka s názvom „test_tab“.

CREATE TABLE test_tab (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    reading_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    value1 VARCHAR(10) NULL,
    value2 VARCHAR(10) NULL,
    value3 VARCHAR(10) NULL
)

Po vytvorení tabuľky bude treba vytvoriť 2 web stránky. Prvá bude slúžiť na zápis hodnôt do našej vytvorenej tabuľky „test_tab“ s názvom „write.php“ a druhá na zobrazenie hodnôt v grafe na základe id s názvom „graf.php“. Po vytvorení oboch web stránok je možné otestovať funkčnosť tak že si otvoríme stránku write.php cez internetový prehliadač (http://mojadomena.nieco/write.php) a zadáme požadované parametre ako náš API kľúč a jednotlivé hodnoti val 1 až val3.Po zadaní hodnôt klikneme na tlačidlo „poslať“. Ak je všetko v poriadku mali by sme dostať odozvu „Data zapisane!“. Dáta by sa mali taktiež vidieť v tabuľke „test_tab“. Po zapísaní viacerích dát ich bude možné zobraziť aj v grafe na adrese (http://mojadomena.nieco/graf.php).

Kód pre zapísanie hodnôt do MySQL databázy. (write.php)

<?php
//nastavenie cesty k tomuto suboru
$basePath = 'http://' . $_SERVER['SERVER_NAME'].$_SERVER['PHP_SELF'];

// toto treba doplnit
$db_servername =    'doplnit';
$db_name =          'doplnit';
$db_username =      'doplnit';
$db_password =      'doplnit';
$ESP_api_key =      'mojetralalaapi';
$db_tabname =       'test_tab'; 

echo "Caka sa na data...". "<br>";

//prijatie dat -> ak pride poziadavka na server metodou POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    //precitaj a osetri data
    $ESP_api_key_rec =  test_input($_POST["api_key"]);
    $value1 =           test_input($_POST["value1"]);
    $value2 =           test_input($_POST["value2"]);
    $value3 =           test_input($_POST["value3"]);
    echo "Server POST..." . "<br>";
    
    //skontroluj ci sedi api kluc
    if($ESP_api_key_rec === $ESP_api_key){
        echo "API OK" . "<br>";
   
    // Create connection
    $conn = new mysqli($db_servername, $db_username, $db_password, $db_name);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

        
    $sql = "INSERT INTO $db_tabname (value1, value2, value3) VALUES ('" . $value1 . "', '" . $value2 . "', '" . $value3 . "')";

    if ($conn->query($sql) === TRUE) {
            echo "Data zapisane!" . "<br>";
    } 
    else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
        $conn->close();

    }
    else{
        echo "API kluc je chybny!" . "<br>";;   
    }
}


// Osetrenie vstupnych dat 
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

?>

<!-- Testovaci formular simuluje posielanie dat z ESP 8266 pomocou POST-->

<html>
<head>
</head>
<body>
  <div>
     <form action=" <?php echo $basePath ?>" method="post">
        <label for="username">api_key:</label><br>
        <input type="text" id="api_key" name="api_key"><br><br>
        
        <label for="password">value1</label><br>
        <input type="text" id="value1" name="value1"><br><br>
        
        <label for="password">value2</label><br>
        <input type="text" id="value2" name="value2"><br><br>

        <label for="password">value3</label><br>
        <input type="text" id="value3" name="value3"><br><br>

        <input type="submit" value="poslať">
    </form>    
</div>
</body>    
</html>

Ak zápis nebude fungovať skontrolujte nasledovné veci:

správne zadaný API kľúč v ESP8266 a na stránke write.php
správne zadaná lokalita v ESP8266 v tvare http://mojadomena.nieco/write.php
správnosť vyplnených údajov pre pripojenie do MySQL databázy.
správne zadané meno tabuľky

Kód pre zobrazenie dát v grafe. „graf.php“

<?php
// pouzity graf
// https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/linechart#dual-y-charts

// toto treba doplnit
$db_servername =    'doplnit';
$db_name =          'doplnit';
$db_username =      'doplnit';
$db_password =      'doplnit';
$db_tabname =       'test_tab'; 


$conn = new mysqli($db_servername, $db_username, $db_password, $db_name);
if ($conn->connect_error) {    die("Connection failed: " . $conn->connect_error);}
   
$sql = "SELECT id, value1, value2, value3, reading_time FROM $db_tabname ORDER BY id DESC";


if ($result = $conn->query($sql)) {
    while ($row = $result->fetch_assoc()) {
        //nacitanie dat a premena na z char na float
        $row_id =     floatval($row["id"]);
        $row_value1 = floatval($row["value1"]);
        $row_value2 = floatval($row["value2"]);
        $row_value3 = floatval($row["value3"]);
        $row_reading_time = $row["reading_time"];
        
        //vytvorenie formatu dat pre graf
        $graf_data_goole_chart[$i] =    "[". $row_id . "," . $row_value2 . "," . $row_value1 . "," . $row_value3 . ",],";       
     
    $i++;                               
    }  
    $result->free();
    $conn->close();
}    
else{
return false;
}

$imax = count($graf_data_goole_chart);
$data = $graf_data_goole_chart;



//echo var_dump($data); //vypise data
?>
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Zapis');
      data.addColumn('number', 'Val 1');
      data.addColumn('number', 'Val 2');
      data.addColumn('number', 'Val 3');

      data.addRows([
            <?php
                // najnovsia hodnota ma index 0 !
                $i = 0;
                while ($i <= $imax ) {
                    echo $data[$i] ;
                    $i++;
                }; 
            ?>
      ]);

      var options = {
        chart: {
          title: 'Moje data',
          subtitle: 'ESP8266'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>