An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- TutsPlus - Design
- Vandelay Design
- You The Designer
- Fuel Your Creativity
- Web Designer Depot
- Web Design Ledger
- Wal You
- Freelance Switch
- Willems Lab
- Hashedout
Help Webnuz
Referal links:
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 online.
Paling tidak anda harus tau cara memasang dan menjalankan project codeigniter 4 jika ingin membaca tutorial ini.Jika belum paham bisa baca disini Instalasi Codeigniter 4.
Pada grafik kita akan menampilkan data kasus corona di Indonesia sampai bulan April.Buat terlebih dahulu database ci4chart.Lalu download 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 project 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 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 = MySQLiUbah juga mode CI_ENVIRONMENT menjadi development agar lebih mudah dalam proses debugging.
Membuat Model
Buat file baru bernama CoronaModel.php di folder app/Models/CoronaModel.php dan tulis kode dibawah.
<?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.
Membuat Controller
Kita akan pakai Controller Home ubah file di folder app/Controllers/Home.php dan isi dengan kode dibawah.
<?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()); }}Di controller kita buat dua fungsi yang pertama index untuk menampilkan view,dan fungsi apiData untuk mengambil data dan mengembalikan dalam bentuk json.
Karena kita akan mengambil data 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> <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>Di view kita menggunakan boostrap4,highchart.js dan jquery.Terdapat juga combo yang akan menampilkan data berdasarkan bulan yang dipilih.
Setelah semua langkah selesai.Kemudian masuk ke folder project dari terminal/CMD kemudian ketikkan php spark serve dan bukan http://localhost:8080.
Maka akan terlihat hasil seperti gambar dibawah ini.
Untuk project bisa didownload di https://github.com/medanincode/ci4chart.git
Original Link: https://dev.to/medan_in_code/membuat-grafik-dari-database-codeigniter-4-57k1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To