• Bootstrap
• Create Application
• Create Dashboard
• Create Widget
• Create DataSource
• Run
• Source Code

Quick Start

Bootstrap #

First of all, we will create the bootstrap code. This is the code that initiates the dashboard application. In this tutorial, we put it inside index.php. If you are working with MVC framework, you can put below code into controller's action of MVC.

<?php
//index.php

require_once  "vendor/autoload.php"; //Load library
require_once "App.php";

App::create()->run();

We assume that you have installed koolreport/pro and koolreport/dashboard via composer. If you have not known how to install, please follow the instruction here.

Create Application #

In the bootstrap code, we require the App.php but we have not created it yet. Here we go, we create App.php file in the same folder with following content

<?php
//App.php

use \koolreport\dashboard\Application;

class App extends Application
{
    protected function sidebar()
    {
        return [
            "Payments Board"=>PaymentBoard::create()
        ];
    }
}

Now we've just created an application with one dashboard named PaymentBoard.

Create Dashboard #

The PaymentBoard has not been available yet. Now we create PaymentBoard.php with below code

<?php

use \koolreport\dashboard\Dashboard;

class PaymentBoard extends Dashboard
{
    protected function content()
    {
        return [
            PaymentTable::create()
        ];
    }
}

Create Widget #

Inside PaymentBoard, we use a widget called PaymentTable. We would like to show a table that lists all payment from customer. Now we create the PaymentTable.php with following content:

<?php

use \koolreport\dashboard\widgets\Table;
use \koolreport\dashboard\fields\Currency;
use \koolreport\dashboard\fields\DateTime;

class PaymentTable extends Table
{
    protected function dataSource()
    {
        return AutoMaker::table("payments")->limit(10);
    }

    protected function fields()
    {
        return [
            DateTime::create("paymentDate")
                ->displayFormat("M jS, Y"),
            
            Currency::create("amount")
                ->USD()
                ->symbol(),
        ];
    }

In above example we create PaymentTable with two columns Payment Date and Amount.

Create DataSource #

In above widget, you have seen that we used the AutoMaker datasource. We created the AutoMaker.php file and provided connection information inside derived connection() method.

<?php

use \koolreport\dashboard\sources\MySQL;

class AutoMaker extends MySQL
{
    protected function connection()
    {
        return [
            "connectionString"=>"mysql:host=sampledb.koolreport.com;dbname=automaker",
            "username"=>"expusr",
            "password"=>"koolreport sampledb",
            "charset"=>"utf8"
        ];
    }
}

Run #

Awesome! We have done with all coding. The structure of our folder will look like this:

quick_start
├── vendor
│   └── koolreport
├── composer.json
├── index.php
├── App.php
├── PaymentBoard.php
├── PaymentTable.php
└── AutoMaker.php

And now we can run Quick Start example in following url:

http://localhost/path/to/quick_start/index.php

Source Code #

You may download the source code of quick start example here:

quick_start.zip