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

C. Konfigurasi pada Yii2

1. Membuat class “myCurl.php” dengan fungsi “CurlToNodejs”, untuk cara membuat fungsi bisa Anda lihat pada [Yii2] Cara membuat dan menggunakan Fungsi pada Yii2 Basic dan Advanced Template

class myCurl extends Component
{
    public function CurlToNodejs($url,$postdata=null)
    {
        $header = ['Content-type: application/json'];
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $postdata);
        $response = curl_exec($curl);
        return $response;
    }
}

2. Setelah itu, kita membuat view “myChart.php” untuk menampilkan grafik dari dashboard. Untuk penggunaan Chart.js bisa anda lihat pada www.chartjs.org

<?php
/* @var $this yiiwebView */
$this->title = 'My Chart Application';
$script = <<< JS
	$(document).ready(function(){
	//Chart.js Configuration
	    const data = {
            datasets: [{
                label: 'My First Dataset',
                borderWidth: 1
            }]
        };
	    
	    const ctx = document.getElementById('myChart');
	    const myChart = new Chart(ctx, {
	        type: 'bar',
	        data: data,  
	    });	    
	   
	   function UpdateChart(chart, label, data) {
            chart.data.labels=label;
            chart.data.datasets.forEach((dataset) => {
                dataset.data=data;
            });
            chart.update();
       }
	   
       //Socket.io Configuration
	   const socket = io.connect( 'http://localhost:3000');
       var labels=[];
       var values=[];
       socket.on('initialData', function(data){
           for (let i = 0; i < data.length; i++){
               labels[i] = (data[i].id);
               values[i] = (data[i].population);
           }
           UpdateChart(myChart,labels,values);
       });
        socket.on('newData', function(data){
            switch (data.actions){
                case "create":
                    const i = labels.length;
                    labels[i] = data.id;
                    values[i] = data.population;    
                    break;
                case "update":
                    const l = labels.findIndex(label=>label===data.id);
                    values[l] = data.population;
                    break;
                case "delete":
                    const x = labels.findIndex(label=>label===data.id);
                    if (x > -1) {
                        labels.splice(x, 1);
                        values.splice(x, 1);
                    }
                    break;                   
            }
            UpdateChart(myChart,labels,values);
        });
     
    });
JS;
$this->registerJs($script);
$this->registerJsFile("https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js", ['position' => yiiwebView::POS_HEAD]);
$this->registerJsFile('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js', ['position' => yiiwebView::POS_HEAD]);
?>
<div class="site-index">
    <div class="body-content">
        <div id="container" style="width: 75%;">
            <canvas id="myChart"></canvas>
        </div>
    </div>
</div>

Sedangkan pada “SiteController.php” kita tambahkan “actionMychart”. Pada fungsi ini dilakukan pengecekan apakah data awal tersedia atau tidak. Jika tidak akan dilakukan query ke database sebagai data awal.

    public function actionMychart()
    {
        $response = Yii::$app->myCurl->CurlToNodejs('http://localhost:3000/status');
        if ($response === 'false') {
            $data = commonmodelsCity::find()
                ->asArray()
                ->all();
            $response1 = Yii::$app->myCurl->CurlToNodejs('http://localhost:3000/initdata', json_encode($data));
        }
        return $this->render('myChart');
    }

3. Sampai pada langkah ini, kita sudah bisa menampilkan grafik dashboard. Akan tetapi belum bisa menampilkan perubahan data. Kali ini kita akan menggunakan “Gii” untuk membuat CRUD. Untuk lebih jelasnya bisa anda lihat pada Generating Code with Gii
4. Buat model “City” dengan “Model Generator Gii”. Dari langkah ini akan terbentuk file “/models/City.php”.
5. Kemudian buat dengan “CRUD Generator Gii” dari model tersebut. Dari tahap ini ini akan terbentuk file sebagai berikut

6. Langkah selanjutnya adalah kita menambahkan script pada “CityController.php” yang akan memberitahu Node.js akan perubahan data dengan menggunakan fungsi “myCurl” yang kita buat sebelumnya.
7. Ubah “actionCreate” menjadi seperti ini

    public function actionCreate()
    {
        $model = new City();
        if ($this->request->isPost) {
            if ($model->load($this->request->post()) && $model->save()) {
                $post=Yii::$app->request->post('City');
                $data=["id" => $post['id'], "population" => $post['population'],"actions"=>"create"];
                Yii::$app->myCurl->CurlToNodejs('http://localhost:3000/newData',json_encode($data));
                return $this->redirect(['view', 'id' => $model->id]);
            }
        } else {
            $model->loadDefaultValues();
        }
        return $this->render('create', [
            'model' => $model,
        ]);
    }

8. Kemudian ubah “actionUpdate” menjadi seperti ini

    public function actionUpdate($id)
    {
        $model = $this->findModel($id);
        if ($this->request->isPost && $model->load($this->request->post()) && $model->save()) {
            $post=Yii::$app->request->post('City');
            $data=["id" => $post['id'], "population" => $post['population'],"actions"=>"update"];
            Yii::$app->myCurl->CurlToNodejs('http://localhost:3000/newData',json_encode($data));
            return $this->redirect(['view', 'id' => $model->id]);
        }
        return $this->render('update', [
            'model' => $model,
        ]);
    }

9. Dan selanjutnya ubah “actionDelete” menjadi seperti ini

    public function actionDelete($id)
    {
        $this->findModel($id)->delete();
        $data=["id" => $id, "population" =>"","actions"=>"delete"];
        Yii::$app->myCurl->CurlToNodejs('http://localhost:3000/newData',json_encode($data));
        return $this->redirect(['index']);
    }