How to customize Bootstrap Admin Panel home page?

The Bootstrap Admin Panel home page template is php-crud-generator/admin/templates/home.html.
It's a TWIG template, customize as desired using the HTML TWIG syntax.


Customizing the admin dashboard Home page

The home page is built with the Symphony TWIG template engine, as well as the other pages of the admin dashboard.

The template file is php-crud-generator/admin/templates/home.html.

Its content can be customized as you wish, using HTML TWIG syntax, which allows the use of variables from PHP, and logical structures.


Use records from your database

If you want to get some records from your database and use them in the TWIG template, you have to make your SQL query/queries from the admin/home.php main PHP file, and pass the values to the TWIG template.

For that, you have to:

  • Add the "use" statement for the MySQL wrapper class
  • Make your SQL query and retrieve the records
  • Send the records to the TWIG template

Below is a sample code for admin/home.php, to be adapted according to your needs:

<?php
use secure\Secure;
use phpformbuilder\database\DB;

session_start();

// ...

require_once ROOT . 'vendor/autoload.php';

// SQL query to get your records

$mydata = array(
    'records_count' => 0,
    'field_1'       => array(),
    'field_2'       => array()
);

$values = array('field_1', 'field_2');
$where = array('id >' => 10);

$db->select('my_table', $values, $where);

$mydata['records_count'] = $db->rowCount();

// loop through the results
if(!empty($mydata['records_count'])) {
    while ($row = $db->fetch()) {
        $mydata['field_1'][] = $row->field_1;
        $mydata['field_2'][] = $row->field_2;
    }
}

// ...
?>
<body>

    <!-- ...  -->

    <div class="col">
        <?php
        echo $template->render(array('mydata' => $mydata));
        ?>
    </div>

    <!-- ...  -->

</body>

Then in admin/templates/home.php

{% if mydata.records_count > 0 %}

    {% for i in range(0, mydata.records_count - 1) %}

        <p>{{ mydata.field_1[loop.index0] }}</p>
        <p>{{ mydata.field_2[loop.index0] }}</p>

    {% endfor %}

{% endif %}

Add custom scripts

If you want to display some charts or need to add any other Javascript, add them in admin/templates/data-home-js.html or in admin/templates/home.php just before </body>

PHP CRUD tutorial main page