Membuat Grafik Dari Database Codeigniter 4

15909 단어 tutorialphpcodeigniterwebdev
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 online.

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

4월 3일 인도네시아 sampai bulan에서 데이터 kasus 코로나에 대한 보고서를 작성했습니다.
파일 SqlDownload Disini

Kalau tidak paham cara import bisa dilihat disini

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

Pastikan 파일 env sudah ada titiknya .env karena secara default belum ada saat membuat project baru.

Kemudian cari 설정 데이터베이스 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


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

멤부아트 모델



폴더에 있는 CoronaModel.php 파일은 app/Models/CoronaModel.php 폴더에 있으며 코드는 다음과 같습니다.

<?php namespace App\Models;
use CodeIgniter\Model;
class CoronaModel extends Model
{
    protected $table = 'corona';
}


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

메모리 컨트롤러



컨트롤러 홈 파일은 app/Controllers/Home.php 폴더에 있으며 코드는 다음과 같습니다.

<?php namespace App\Controllers;
use App\Models\CoronaModel;

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

        return view('index');
    }

    public function apiData($bulan){
        $corona = new CoronaModel();
        $corona->where('tgl >=',"2020-{$bulan}-01");
        $corona->where('tgl <=',"2020-{$bulan}-31");
        $corona->orderBy('tgl','asc');
        echo json_encode($corona->get()->getResult());
    }
}


컨트롤러 키타 부아트 두아 펑시 양 pertama 색인 untuk menampilkan view,dan fungsi apiData untuk mengambil data and mengembalikan dalam bentuk json.

Karena kita akan mengambil data untuk grafik menggunakan ajax.

멤뷰아트 뷰



index.php 파일은 app/Views/index.php 폴더에 있으며 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aplikasi Chart Sederhana</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-3">
        <div class="row">
            <div class="col-md-3">
                <label for="">Pilih Bulan</label>
                <select id="bulan" class="form-control">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4" selected="">4</option>
                </select>
            </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 options = {
      chart: {
        type: 'spline',
        events: {
            load: getData(4)
        }
      },
      title: {
        text: 'Corona Virus Indonesia'
      },
         xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%e of %b'
                }
        },
      series: [
        {
            name:'Kasus',
            data:[],
            pointStart: Date.UTC(2020, 3, 1),
            pointInterval: 24 * 3600 * 1000 // one day
        }
      ]
    };
    const chart = Highcharts.chart('container', options)

    // Data
    $("#bulan").change(function(){
        const val = $(this).val();
        getData(val);
    })
    function getData(bulan) {
        const url = `/home/apiData/${bulan}`;
        $.getJSON(url,function(data) {
            const p =[];
            data.map((obj) => {
                p.push(parseInt(obj.jumlah))
            });
            chart.series[0].update({
                data:p,
                pointStart: Date.UTC(2020, bulan-1, 1)
            })
            chart.redraw(); 
        })
    }
    </script>   
</body>
</html>


Kita menggunakan boostrap4,highchart.js 및 jquery.Terdapat juga combo yang akan menampilkan data berdasarkan bulan yang dipilih 보기.

Setelah semua langkah selesai.Kemudian masuk ke 폴더 프로젝트 dari terminal/CMD kemudian ketikkan php spark serve dan bukan http://localhost:8080 .

Maka akan terlihat hasil seperti gambar dibawah ini.



프로젝트를 다운로드할 때 다운로드https://github.com/medanincode/ci4chart.git
Android 미러링 도구: ScrcpyHub v1.6.0 출시
[0부터 만드는 Deep Learning] 퍼셉트론으로 AND 게이트, OR 게이트, NAND 게이트를 알기 쉽게 구현해 보았다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage