Posted onMar 19, 2022 • Originally published atmedanincode.com

Membuat Grafik Dari Database Codeigniter 4

#webdev #tutorial #php #codeigniter

Grafik yang kita gunakan adalahhighchart.js untuk versi offline bisa didownload langsung dari websitenyahttps://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 disiniInstalasi Codeigniter 4.

Pada grafik kita akan menampilkan data kasus corona di Indonesia sampai bulan April.Buat terlebih dahulu databaseci4chart.Lalu download file sql ini dan import ke databaseci4chart.
File SqlDownload Disini

Kalau tidak paham cara import bisa dilihat disiniCara Import Dan Export

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

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

Kemudian cari setting database seperti dibawah ini lalu sesuaikan:

database.default.hostname = localhostdatabase.default.database = ci4chartdatabase.default.username = rootdatabase.default.password = rootdatabase.default.DBDriver = MySQLi

Ubah juga modeCI_ENVIRONMENT menjadidevelopment agar lebih mudah dalam proses debugging.

Membuat Model

Buat file baru bernamaCoronaModel.php di folderapp/Models/CoronaModel.php dan tulis kode dibawah.

<?phpnamespaceApp\Models;useCodeIgniter\Model;classCoronaModelextendsModel{protected$table='corona';}

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

Membuat Controller

Kita akan pakai ControllerHome ubah file di folderapp/Controllers/Home.php dan isi dengan kode dibawah.

<?phpnamespaceApp\Controllers;useApp\Models\CoronaModel;classHomeextendsBaseController{publicfunctionindex(){$bulan=$this->request->getGet('bulan');// jika tidak ada ambil bulan sekarang$bulan=$bulan?$bulan:Date("m");returnview('index');}publicfunctionapiData($bulan){$corona=newCoronaModel();$corona->where('tgl >=',"2020-{$bulan}-01");$corona->where('tgl <=',"2020-{$bulan}-31");$corona->orderBy('tgl','asc');echojson_encode($corona->get()->getResult());}}

Di controller kita buat dua fungsi yang pertamaindex untuk menampilkan view,dan fungsiapiData untuk mengambil data dan mengembalikan dalam bentuk json.

Karena kita akan mengambil data untuk grafik menggunakanajax.

Membuat View

Buat file baru di bernamaindex.php di folderapp/Views/index.php dan isi dengan kode dibawah.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Aplikasi Chart Sederhana</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"></head><body><divclass="container mt-3"><divclass="row"><divclass="col-md-3"><labelfor="">Pilih Bulan</label><selectid="bulan"class="form-control"><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="4"selected="">4</option></select></div></div></div><divid="container"></div><scriptsrc="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js"></script><script>// Chartconstoptions={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}]};constchart=Highcharts.chart('container',options)// Data$("#bulan").change(function(){constval=$(this).val();getData(val);})functiongetData(bulan){consturl=`/home/apiData/${bulan}`;$.getJSON(url,function(data){constp=[];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>