Dashboard Aplikasi Real Time dengan Yii2, Node.js, MySQL dan Chart.js

Dalam artikel ini kita akan membuat sebuah dashboard yang bisa menampilkan grafik dari data secara real time. Data yang kita gunakan sebagai simulasi adalah populasi penduduk suatu kota. Jika kita melakukan update data penduduk, menambahkan atau menghapus, tampilan grafik akan berubah secara real time tanpa perlu melakukan refresh dari halaman.

Sebelum kita memulai, kita perlu mempersiapkan:

1. Webserver sudah terpasang, lihat Cara Konfigurasi Virtual Host XAMPP di Windows 10
   .
2. Yii2 sudah terpasang, lihat Cara Install Yii2 Advanced via Composer
   .
3. Node.js sudah terpasang, lihat Membuat aplikasi real time dengan Node.js
   .
4. Chart.js.

Langkah-Langkah Membuat Dashboard Aplikasi Real Time dengan Yii2, Node.js, MySQL dan Chart.js

A. Membuat tabel dengan MySQL

Buat tabel dengan nama “city”, dan kolom dengan nama “id” dan “population”. Atau lebih mudahnya anda dapat menjalankan script sql berikut ini

CREATE TABLE `city` (
  `id` CHAR(16) NOT NULL PRIMARY KEY,
  `population` INT(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

B. Membuat server Node.js

1. Siapkan server Node.js seperti pada Membuat aplikasi real time dengan Node.js.
2. Pada file “server.js”, yang perlu kita buat adalah “API” yang akan melakukan update data pada grafik yang kita buat dengan Chart.js setelah data berhasil di simpan oleh Yii.
3. Ketika user pertama kali membuka halaman dashboard, kita lakukan pengecekan apakah data awal untuk grafik dasboard sudah tersedia, jika belum Yii akan mengirimkan data awal tersebut.

app.post('/status', (req, res) => {
    res.send(isInitData);
});

app.post('/initData', (req, res) => {
    if(!isInitData){
        myData = req.body;
        isInitData=true;
    }
    res.send('success');
});

3. Selanjutnya kita akan membuat “API” yang akan melakukan update data pada operasi CRUD pada Yii.

app.post('/newData', (req, res) => {
    switch (req.body.actions){
        case "create":
            myData.push({id: req.body.id, population: req.body. population});
            break;
        case "update":
            let i = myData.findIndex(label => label.id === req.body.id);
            myData[i]={id: req.body.id, population: req.body. population};
            break;
        case "delete":
            let l = myData.findIndex(label => label.id === req.body.id);
            myData.splice(l,1);
            break;
    }
    io.emit('newData', {id: req.body.id, population: req.body. population, actions:req.body.actions});
    res.send('success');
});

4. Script lengkap dari file server.js

var app = require("express")();
var bodyParser = require('body-parser')
var http = require('http').Server(app);
var io = require("socket.io")(http,{cors: {origin:"*"}});

var myData = [];
var isInitData=false;

http.listen(3000, function () {
    console.log("Listening on 3000");
});

app.use(bodyParser.json({type: 'application/json' }));

app.post('/status', (req, res) => {
    res.send(isInitData);
});

app.post('/initData', (req, res) => {
    if(!isInitData){
        myData = req.body;
        isInitData=true;
    }
    res.send('success');
});

app.post('/newData', (req, res) => {
    switch (req.body.actions){
        case "create":
            myData.push({id: req.body.id, population: req.body. population});
            break;
        case "update":
            let i = myData.findIndex(label => label.id === req.body.id);
            myData[i]={id: req.body.id, population: req.body. population};
            break;
        case "delete":
            let l = myData.findIndex(label => label.id === req.body.id);
            myData.splice(l,1);
            break;
    }
    io.emit('newData', {id: req.body.id, population: req.body. population, actions:req.body.actions});
    console.log("emit new data "+req.body.id+" :"+req.body.actions);
    res.send('success');
});

io.on("connection", (socket) => {
    console.log("A user is connected");
    if(isInitData){
        console.log("emit initial data");
        socket.emit('initialData', myData);
    }
});