Dashboard with CodeIgniter, Chart JS, Bootstrap and PHP

Discussing the benefits of dashboards is unnecessary. It's worth talking about the benefits of frameworks that can be used to create PHP solutions for dashboards. In this regard CodeIgniter is one of the favorites (Model-View-Controller Based System, Extremely Light Weight, Full Featured database classes with support for several platforms, Query Builder Database Support, Form and Data Validation, Security and XSS Filtering, Session Management, Email Sending Class, Cart Management). In this example CodeIgniter makes use of Chart JS, JQuery and Bootstrap (see screenshots below). Chart JS offers a wide range of chart types as line, bar, doughnut, area and scale options as linear, logarithmic, time or scale. Also widgets as legend, tooltip, scriptable or progress bars are available. In this dashboard demo JQuery is integrated: Mainly the JQuery AJAX skills and Bootstrap modal forms are used to add, edit or delete the given data, which includes products, customers, orders, agenda, promotions, support and logs journal. The Charts can be installed easy: Similar to an AJAX interface the data can be supplied from PHP Classes or files. Several options as labels, data sets, box width, font color or background color offer different possibilities to manipulate the chart presentation. In this demo version email subscriptions are only simulated and claims, website, service are not attached.

The scripts snippets you see here (the complete script is downloadable) is only a small part of the complete script. That's it. All stuff is prepared for your convenience (example with necessary files included). Best regards Claudio Biesele


Part of the Dashboard Model Code:

public function get_calendar_events() {

  $end_date = date('Y-m-d');
  $explodestartdate = explode("-",$end_date);
  $start_date = date("Y-m-d", mktime(0,0,0,$explodestartdate[1],$explodestartdate[2]+2,$explodestartdate[0]));

  $this->db->select('*');
  $this->db->from('tb_agenda');
  $this->db->where('startdate BETWEEN "' .$end_date. '" AND "'. $start_date.'"');
  $this->db->limit(5);
  $this->db->order_by('startdate', 'asc');
  $query = $this->db->get();

  $result = $query->num_rows();

  if($result > 0) {
    return $query->result();
  } else {
    return array();
  }
 


dashboard_1.png
Numbers of customers, Sales, Daily Sales (line), Email Subscriptions (bar).
dashboard_2.png
Total of Sales, Hits, Support, Calendar Events, Browser Stats.
dashboard_3.png
Edit, answer, delete and mark Support requests direct in list (modal_form).
dashboard_4.png
Beside the Calendar Events overview concerning used browsers (doughnut).

Download the full script at www.fastproject.ch. The downloaded script is free from Copyright restrictions, Herisau, 5th of August 2018.