Membuat Berbagai Macam Grafik Di Codeigniter


Membuat Grafik Di Codeigniter – Untuk membangun sebuah web, biasanya programmer akan menggunakan bantuan framework PHP. Saat ini ada banyak sekali framework PHP yang bisa diunduh. Salah satunya adalah Codeigniter.

Kita bisa menggunakan Codeigniter ini untuk banyak hal. Salah satunya adalah untuk membuat grafik berdasarkan data tertentu. Di artikel ini kami bahas lebih lanjut seputar membuat grafik dengan Codeigniter. Akan tetapi terlebih dahulu kita bahas singkat apa itu Codeigniter.



grafik codeigniter

Baca juga: Codeigniter Untuk Pemula

Sekilas tentang Codeigniter

Sebelum mengetahui apa itu codeigniter, kita perlu mengetahui definisi framework. Jika diterjemahkan framework berarti kerangka kerja. Framework adalah kumpulan dari fungsi-fungsi dan class-class yang mempunyai tujuan tertentu dan siap untuk dipakai. Dengan begitu pekerjaan programmer bisa dilakukan dengan cepat karena tidak perlu membuat fungsi maupun class dari awal.

Sedangkan Codeigniter adalah sebuah framework PHP dengan model MVC (Model, View, Controller) yang berfungsi untuk membangun website dinamis dengan PHP. Codeigniter dikenal mempunyai dokumentasi yang lengkap, berikut contoh implementasi kodenya. Karena dokumentasi yang lengkap ini Codeigniter digunakan oleh banyak orang di seluruh penjuru dunia.

Alur Kerja Codeigniter

Agar lebih jelas, kita simak bagaimana alur kerja dari framework ini:



  1. Index.php: file ini berfungsi sebagai file penerima pertama dalam program yang nantinya akan dibaca oleh program.
  2. The Router: router berfungsi untuk memeriksa HTTP request untuk menentukan apa saja yang perlu dilakukan oleh program.
  3. Cache File: jika dalam program terdapat cache file, maka file ini akan langsung dikirim ke browser. File cache ini dipakai untuk mempercepat proses pembukaan suatu website. Dengan bantuan file ini proses yang sebenarnya harus dilakukan oleh program Codeigniter dapat langsung dilewati.
  4. Security: HTTP request dan data yang dimasukkan oleh pengguna akan disaring terlebih dahulu di fasilitas security atau keamanan yang ada pada Codeigniter. Proses ini dilakukan sebelum file controller di-load keseluruhan.
  5. Controller: controller akan membuka file model, core libraries, helper, dan seluruh resources yang diperlukan dalam program.
  6. View: sebagai tahap terakhir semua program yang ada dalam view file akan dibaca dan dikirimkan ke browser agar dapat dilihat oleh pengguna. Jika file view sudah ada yang di-cache maka file baru yang belum ter-cache akan memperbarui file view yang sudah ada sebelumnya.

Membuat Grafik di Codeigniter

Ada banyak hal yang bisa dilakukan dengan menggunakan Codeigniter. Misalnya membuat sebuah grafik berdasarkan data yang ada. Untuk membuatnya kita bisa menggunakan beberapa cara, seperti highchart.js. Kita bisa menggunakan plugin ini versi online maupun offline.

Untuk versi offline bisa diunduh di https://www.highcharts.com/blog/download/. Akan tetapi pada contoh ini kita gunakan versi online.

Sebelumnya pastikan juga Codeigniter 4 sudah terpasang pada PC Anda. Jika sudah simak panduan berikut.



Persiapan

Pertama-tama silakan buat database. Anda bisa memberikan nama ci4chart. Jika sudah silakan buat file SQL yang nantinya ingin disajikan dalam bentuk grafik. Misalnya pada contoh ini file SQL yang dibuat adalah mengenai kasus Covid-19 di Indonesia dalam bulan April. Anda juga bisa mengimpor file lain ke database.

Langkah selanjutnya adalah membuat project baru pada Codeigniter 4. Apabila project sudah selesai dibuat silakan ubah pengaturan database di file .env. Pastikan pada file env sudah terdapat titik (.env).

Langkah berikutnya atur database dengan konfigurasi seperti berikut:

Jangan lupa untuk mengubah mode CI_ENVIRONTMENT menjadi development sehingga memudahkan Anda dalam proses debugging.



Membuat Model

Sesudah persiapan selesai, kita perlu membuat file baru. Misalnya kita beri nama CoronaModel.php. Letakkan file ini dalam folder app/Models/CoronaModel.php. Kemudian tulis kode di bawah ini:

Jika Anda menggunakan fungsi orm database bawaan Codeigniter 4, maka Anda tidak perlu membuat fungsi pada Models. Anda hanya perlu mengisi nama tabel saja.

Membuat Controller

Tahap berikutnya adalah membuat controller. Dalam contoh ini kita gunakan Controller Home. Silakan buka dan edit file pada app/Controllers/Home.php dengan memasukkan kode berikut:

Pada controller tersebut terdapat dua fungsi yang dibuat. Yakni index yang fungsinya adalah untuk menampilkan view, dan yang kedua apiData untuk mengambil dan mengembalikan data dalam bentuk json. Sebab pada contoh ini data untuk grafik diambil dengan memakai ajax.

Membuat View

Setelah selesai melakukan konfigurasi controller, selanjutnya adalah membuat file baru index.php. Silakan letakkan file ini di folder app/Views/index.php. Jika sudah edit file tersebut dan isikan kode berikut pada file tersebut:

Seperti yang bisa dilihat, pada view kita pakai bootstrap4, highchart.js, dan jquery. Di samping itu juga terdapat combo yang fungsinya untuk menampilkan data berdasarkan bulan yang dipilih.

Jika semua sudah selesai dikonfigurasi, maka Anda tinggal masuk ke folder project lewat terminal atau CMD. Kemudian ketikkan perintah php spark serve. Kemudian buka http://localhost:8080. Jika tidak ada yang salah hasil pekerjaan Anda akan muncul dengan sempurna. Seperti contoh di bawah ini.

Untuk project di atas bisa didownload di sini.

Baca juga: Cara Menggunakan Github

Cara Alternatif

Selain dengan highchart.js seperti yang sudah dijelaskan di atas, kita juga bisa menggunakan chart.js yang bisa diunduh pada situs resminya. Kami jelaskan secara singkat alur membuat grafik dengan menggunakan plugin ini.



Leave a Comment