Monitoring Suhu Dan Kelembapan Berbasis Web 2

Kali ini penulis akan membuat ulang contoh aplikasi monitoring suhu berbasis web dari tulisan penulis sebelum nya https://purwanto1987.wordpress.com/2014/05/17/monitoring-suhu-dan-kelembapan-berbasis-web/ menjadi lebih aplikatif dan menarik seperti terlihat pada SS berikut.

screenshot-from-2016-11-02-11-24-04


Penulis tidak akan basa-basi apalagi menjelaskan DASAR Ini dan Itu nya silahkan cari via Google OK jaman sudah cangih !!. Penulis berasumsi pembaca mengerti walaupun sedikit algoritma pemrograman, NodeMCU, Arduino, Web Server, PHP, MYSQL, HTML, CSS dan JavaScript.
πŸ˜€ πŸ˜€

Hardwear yg penulis gunakan cukup sederhana berupa modul NodeMCU, sensor suhu dan kelembapan DHT21.

wp_20161031_012

cara kerja nya seperti IoT (Internet of Thing) yg sedang buming saat ini, hanya saja penulis buat tanpa koneksi internet alias main di LAN ato penulis menyebut nya LAN of Thing ha ha ha πŸ˜€ walau begitu cara kerja ya tetap sama, Hardwear mengirim data melalui HTTP, MQTT atau protokol lain nya ke WEB SERVER (PHP + MYSQL) kemudian data yg tersimpan dapat di View dari Web Browser dari mana saja asalkan terhubung satu jaringan baik LAN ataupun Internet tergantung kebutuhan nanti nya.

Pertama kita buat koding untuk NodeMCU mengunakan IDE Arduino dan pastikan bahwa IDE Arduino sudah suport dengan ESP2866 :

arduino

Berikut koding sederhana pada NodeMCU, disini NodeMCU dalam mode http Client.

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266HTTPClient.h>
#include <DHT.h>

#define USE_SERIAL Serial

// Pin data yg terhubug DHT dan NodeMCU
// dan Type DHT yg digunakan
DHT dht(2, DHT21);

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);
  USE_SERIAL.begin(115200);

  // isi dengan SSID dan Password
  // wifi yg digunakan
  WiFi.begin("TP-LINK", "12345678");

  USE_SERIAL.println("");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    USE_SERIAL.print(".");
  }
  USE_SERIAL.println("");
  USE_SERIAL.print("ip: ");
  USE_SERIAL.println(WiFi.localIP());

  dht.begin();
}

void loop() {
 if( WiFi.status() == WL_CONNECTED ){
  digitalWrite(LED_BUILTIN, LOW);

  float h = dht.readHumidity();
  float t = dht.readTemperature();
  float f = dht.readTemperature(true);

  if (isnan(h) || isnan(t) || isnan(f)) {
  }else{
    float hif = dht.computeHeatIndex(f, h);
    float hic = dht.computeHeatIndex(t, h, false);

    // URL target untuk menyimpan data sensor DHT
    // ke database mysql
    String url = "http://192.168.1.10/";
    url += "my_web/public/monitoring/simpan/";
    url += String(h) +  "/";
    url += String(t) +  "/";
    url += String(f) +  "/";
    url += String(hic) +  "/";
    url += String(hif);
    
    HTTPClient http;
    USE_SERIAL.print("[HTTP] begin...\n");
    
    http.begin( url ); 
    USE_SERIAL.print("[HTTP] GET...\n");
    
    int httpCode = http.GET();
    if(httpCode > 0) {
        USE_SERIAL.printf("[HTTP] GET... code: %d\n", 
        httpCode);

        if(httpCode == HTTP_CODE_OK) {
            String payload = http.getString();
            USE_SERIAL.println(payload);
        }
    } else {
        USE_SERIAL.printf("[HTTP] GET... failed, error: %s\n", 
        http.errorToString(httpCode).c_str());
    }

    http.end();
  }
  
  digitalWrite(LED_BUILTIN, HIGH);
 }

 // delay selama 1 menit
 // data akan di kirim 1 menit sekali
 delay(60000);
}

Setelah koding untuk NodeMCU, kita buat koding di bagian web server untuk menyimpa data dan menampilkan data, Penulis mengunakan php framework Codeigniter untuk membangun aplikasi monitoring ini. Pertama kita siapkan database dan tabel untuk menampung data yg dikirim dari NodeMCU

CREATE TABLE `tbl_log_suhu` (
  `id` int(20) NOT NULL,
  `token` varchar(32) NOT NULL,
  `h` float NOT NULL,
  `t` float NOT NULL,
  `f` float NOT NULL,
  `hic` float NOT NULL,
  `hif` float NOT NULL,
  `tt` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

kemudian kita buat MVC untuk aplikasi web monitoring ini. Pertama Controller :
Penulis membuat 3 function sederhana

  • simpan() untuk menyimpan data yg di kirim dari NodeMCU.
  • get_60_data() untuk menampilkan 60 record data terakhir.
  • get_data() untuk menampilkan 1 (satu) record data terakhir.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Monitoring extends CI_Controller {

    public function __construct(){
        parent::__construct();
        $this->load->model('Monitoring_model');
    }

    public function index(){
        $this->load->view('monitoring/index');
    }

    public function simpan(){
        $data = array();
        $data["h"] = $this->uri->segment(3);
        $data["t"] = $this->uri->segment(4);
        $data["f"] = $this->uri->segment(5);
        $data["hic"] = $this->uri->segment(6);
        $data["hif"] = $this->uri->segment(7);
        $data["token"] = $this->uri->segment(8);
        $data["tt"] =  time();
        $this->Monitoring_model->simpan($data);
    }

    public function get_60_data(){
        $query = $this->Monitoring_model->get_60_data();

        $data_temperature = array();
        $data_humidity = array();

        foreach ($query->result() as $row){
          $tt = $row->tt;

          $data_temperature[] = array($tt, $row->t);
          $data_humidity[]  = array($tt, $row->h);
        }

        $data = array();
        $data["temperature"] = $data_temperature;
        $data["humidity"] = $data_humidity;

        $this->output
            ->set_status_header(200)
            ->set_content_type('application/json', 'utf-8')
            ->set_output(json_encode($data))
            ->_display();
        exit;
    }

    public function get_data(){
        $query = $this->Monitoring_model->get_data();
        $data = array();

        if( $query->num_rows() >0 ){

            $row = $query->row();
            $data["temperature"] =  $row->t;
            $data["humidity"] = $row->h;
        }

        $this->output
            ->set_status_header(200)
            ->set_content_type('application/json', 'utf-8')
            ->set_output(json_encode($data))
            ->_display();
        exit;
    }
}

kemudian Model :

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Monitoring_model extends CI_Model{

    public function __construct(){
        parent::__construct();
    }

    public function simpan($data){
        $this->db->insert('tbl_log_suhu', $data); 
    }

    public function get_60_data(){
        $this->db->select('t, h, tt');
        $this->db->from('tbl_log_suhu');
        $this->db->limit(60);
        $this->db->order_by('id', 'DESC');

        return $this->db->get();
    }

    public function get_data(){
        $this->db->select('t, h, tt');
        $this->db->from('tbl_log_suhu');
        $this->db->limit(1);
        $this->db->order_by('id', 'DESC');

        return $this->db->get();
    }

}

sampai di sini pun bila kita mengakses Controller nya akan menampilkan data hanya saja masih dalam bentuk yg sulit dibaca oleh orang awam

screenshot-from-2016-11-02-11-08-43

screenshot-from-2016-11-02-11-08-54

Bagai mana sudah cukup Binggung πŸ˜€ πŸ˜€ πŸ˜€ bagian View yg akan mengolah data tersebut dalam bentuk grafik dan menarik akan jauh lebih membingungkan he he. BERSAMBUNG πŸ˜€

screenshot-from-2016-11-02-11-24-04

Iklan
Perihal

Pemancar FM, Penerima FM, Microcontroler

Ditulis dalam Arduino, Microcontroller, PHP, Uncategorized
%d blogger menyukai ini: