This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Membuat Grafik Dari Database Codeigniter 4


Grafik yang kita gunakan adalah highchart.js untuk versi offline bisa didownload langsung dari websitenya https://www.highcharts.com/blog/download/ .Kita akan menggunakan versi on-line.

Paling tidak anda harus tau cara memasang dan menjalankan challenge codeigniter 4 jika ingin membaca tutorial ini.Jika belum paham bisa baca disini Instalasi Codeigniter 4.

Pada grafik kita akan menampilkan information kasus corona di Indonesia sampai bulan April.Buat terlebih dahulu database ci4chart.Lalu obtain file sql ini dan import ke database ci4chart.
File Sql Download Disini

Kalau tidak paham cara import bisa dilihat disini Cara Import Dan Export

Setelah membuat challenge baru codeigniter 4 jangan lupa ubah setting database di file .env

Pastikan file env sudah ada titiknya .env karena secara default belum ada saat membuat challenge baru.

Kemudian cari setting database seperti dibawah ini lalu sesuaikan:

database.default.hostname = localhost
database.default.database = ci4chart
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi
Enter fullscreen mode

Exit fullscreen mode

Ubah juga mode CI_ENVIRONMENT menjadi improvement agar lebih mudah dalam proses debugging.



Membuat Mannequin

Buat file baru bernama CoronaModel.php di folder app/Fashions/CoronaModel.php dan tulis kode dibawah.

<?php namespace AppModels;
use CodeIgniterModel;
class CoronaModel extends Mannequin
{
    protected $desk = 'corona';
}
Enter fullscreen mode

Exit fullscreen mode

Kalau yang kita pakai fungsi orm database bawaan codeigniter 4,tidak perlu membuat fungsi di Fashions.Hanya isi dengan nama tabel.



Membuat Controller

Kita akan pakai Controller House ubah file di folder app/Controllers/House.php dan isi dengan kode dibawah.

<?php namespace AppControllers;
use AppModelsCoronaModel;

class House extends BaseController
{
    public operate index()
    {
        $bulan = $this->request->getGet('bulan');
        // jika tidak ada ambil bulan sekarang
        $bulan = $bulan?$bulan:Date("m");

        return view('index');
    }

    public operate apiData($bulan){
        $corona = new CoronaModel();
        $corona->the place('tgl >=',"2020-{$bulan}-01");
        $corona->the place('tgl <=',"2020-{$bulan}-31");
        $corona->orderBy('tgl','asc');
        echo json_encode($corona->get()->getResult());
    }
}
Enter fullscreen mode

Exit fullscreen mode

Di controller kita buat dua fungsi yang pertama index untuk menampilkan view,dan fungsi apiData untuk mengambil information dan mengembalikan dalam bentuk json.

Karena kita akan mengambil information untuk grafik menggunakan ajax.



Membuat View

Buat file baru di bernama index.php di folder app/Views/index.php dan isi dengan kode dibawah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aplikasi Chart Sederhana</title>
    <hyperlink rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<physique>
    <div class="container mt-3">
        <div class="row">
            <div class="col-md-3">
                <label for="">Pilih Bulan</label>
                <choose id="bulan" class="form-control">
                    <possibility worth="1">1</possibility>
                    <possibility worth="2">2</possibility>
                    <possibility worth="3">3</possibility>
                    <possibility worth="4" chosen="">4</possibility>
                </choose>
            </div>
        </div>
    </div>
    <div id="container"></div>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script>
    // Chart
    const choices = {
      chart: {
        sort: 'spline',
        occasions: {
            load: getData(4)
        }
      },
      title: {
        textual content: 'Corona Virus Indonesia'
      },
         xAxis: {
                sort: 'datetime',
                dateTimeLabelFormats: {
                    day: '%e of %b'
                }
        },
      collection: [
        {
            name:'Kasus',
            data:[],
            pointStart: Date.UTC(2020, 3, 1),
            pointInterval: 24 * 3600 * 1000 // someday
        }
      ]
    };
    const chart = Highcharts.chart('container', choices)

    // Information
    $("#bulan").change(operate(){
        const val = $(this).val();
        getData(val);
    })
    operate getData(bulan) {
        const url = `/dwelling/apiData/${bulan}`;
        $.getJSON(url,operate(information) {
            const p =[];
            information.map((obj) => {
                p.push(parseInt(obj.jumlah))
            });
            chart.collection[0].replace({
                information:p,
                pointStart: Date.UTC(2020, bulan-1, 1)
            })
            chart.redraw(); 
        })
    }
    </script>   
</physique>
</html>
Enter fullscreen mode

Exit fullscreen mode

Di view kita menggunakan boostrap4,highchart.js dan jquery.Terdapat juga combo yang akan menampilkan information berdasarkan bulan yang dipilih.

Setelah semua langkah selesai.Kemudian masuk ke folder challenge dari terminal/CMD kemudian ketikkan php spark serve dan bukan http://localhost:8080.

Maka akan terlihat hasil seperti gambar dibawah ini.

Grafik MedanInCode Codeigniter 4

Untuk challenge bisa didownload di https://github.com/medanincode/ci4chart.git

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?