Introduction

Hi, we are Sistemator. We made this PHP Dashboard using the Codeigniter 4 framework. So before buying a product, make sure you understand enough the concepts of the Codeigniter 4 framework.

We also create custom libraries, helpers and functions to make it easier for developers to develop them again. We hope PHP Dashboard can be a solution for those of you who don't want to write code from scratch..

Security

We really take care of the security of the applications we create,
  • Safe from SQL Injection
  • CSRF Protection
  • Always Encrypt parameter ID on URL
  • XSS Clean

Folder structure

We changed the Codeigniter 4 folder structure to make it easier when uploading the application to the server. Here are the steps to change from codeigniter 4 folder structure to our custom folder structure
  • Below is Codeigniter 4 folder structure
    Alt for image
  • Create new folder sistemator
    Alt for image
  • Move all files and folders except sistemator and public into folder sistemator.
    Alt for image
  • Open folder public and select all
    Alt for image
  • move all files and folders into [YOUR_APPLICATION_FOLDER]
    Alt for image
  • Delete folder public
    Alt for image
  • Open index.php, replace the directory of realpath
    Alt for image
  • Open sistemator/app/Config/App.php, replace $baseURL
    Alt for image

Standard Features

For all form features, we have default feature, there are List view, Form input, Data preview, Export to Excel and Generate to PDF.

How the list view works

For example we use controller SysMenu
  • When you visit the page by clicking on the menu. The URL should be like this

    http://localhost/public/index.php/admin/menu

    on that URL, it will check app/Config/Route.php to see what controller and function is being called.

    $routes->get('menu','SysMenu::index'); <-- here is the routing

    The route calls function index() in the controller SysMenu

  • Go to app/Controllers/SysMenu.php and take a look at function index()

    Alt for image

    We define the button of page using parameter $page_button, then passing the parameter using $output to the view("sysmenu/index").

  • Go to app/Views/sysmenu/index.php

    Alt for image

    When load page index, we run the function bind_table() to put data into the table. We use Datatable library for Function bind_table(). To get the data, we have to call the function datatable() on the app/Controllers/SysMenu.php using admin_url($page_route."/list")

    Alt for image

How the form works

We have 3 condition for Form input, there are Insert data, Update data and Delete data. For example we use controller SysMenu

Insert Data

  • Click button Create new, the page will be redirect to form page with this URL

    http://localhost/public/index.php/admin/menu/form/0

    on that URL, it will check app/Config/Route.php to see what controller and function is being called.

    $routes->get('menu/form/(:any)','SysMenu::form/$1'); <-- here is the routing

    The route calls function form() with parameter $id in the controller SysMenu

  • Go to app/Controllers/SysMenu.php and take a look at function form()

    Alt for image

    We define the button of page using parameter $page_button and select data from database with condition row_id = $id, the data will be empty, because of we are creating a new data, so $id = 0.

    Then passing the parameter using $output to the view("sysmenu/form").

  • Go to app/Views/sysmenu/form.php

    Define fields

    Alt for image

    Javascript

    Alt for image

    After we input all data, we click button Save

    Please take a look at $page_button below

    Alt for image

    When button Save clicked, it will call javascript function save('form_id', 'button_id'). You can find this function at public/assets/js/form.js

    Alt for image

    First, it will call function validation() from app/Views/sysmenu/form.php to check the data validation.
    If ok, it will run the sweetalert2 confirmation box.
    If yes, it will call function exec() to save the data

    Alt for image

    The function exec() will call the function save() from app/Controllers/SysMenu.php

    Alt for image

    And the data will be saved in database.



Update Data

  • Click button Edit at the table, the page will be redirect to form page with this URL

    http://localhost/public/index.php/admin/menu/form/IUApKComXiUmJSQlXyMjI180UyFTVDNNNFQwUg==

    on that URL, it will check app/Config/Route.php to see what controller and function is being called.

    $routes->get('menu/form/(:any)','SysMenu::form/$1'); <-- here is the routing

    The route calls function form() with parameter $id in the controller SysMenu

  • Go to app/Controllers/SysMenu.php and take a look at function form()

    Alt for image

    We define the button of page using parameter $page_button and select data from database with condition row_id = $id.

    Then passing the parameter using $output to the view("sysmenu/form").

  • Go to app/Views/sysmenu/form.php

    Define fields

    Alt for image

    Javascript

    Alt for image

    After we input all data, we click button Save

    Please take a look at $page_button below

    Alt for image

    When button Save clicked, it will call javascript function save('form_id', 'button_id'). You can find this function at public/assets/js/form.js

    Alt for image

    First, it will call function validation() from app/Views/sysmenu/form.php to check the data validation.
    If ok, it will run the sweetalert2 confirmation box.
    If yes, it will call function exec() to save the data

    Alt for image

    The function exec() will call the function save() from app/Controllers/SysMenu.php

    Alt for image

    And the data will be saved in database.



Delete Data

  • Click button Delete from Form

    Please take a look at $page_button below

    Alt for image

    When button Delete clicked, it will call javascript function deleteSysMenu() from app/Views/sysmenu/form.php

    Alt for image

    The function deleteSysMenu() will call the function delete() from app/Controllers/SysMenu.php

    Alt for image

Menu Management

Create your own menu in this application by clicking menu Settings / Menu.

Alt for image
  • Clik button Create new for create new Folder if you wanna put in new Folder. You can also put the menu in the existing menu
  • Open the folder
  • Click button Add for create new menu
  • Input Menu, Route and Sequence
    • Menu, Label or title of your new menu.
    • Route, Routing of controller.
    • Sequence, Menu order.
  • Click button Save
  • Alt for image
  • Click the hyperlink at datatable to view the data
  • Alt for image

User Access Management

Create user access with menus and the authority (Read only or Full control) by clicking menu Users / User access.

Alt for image
  • Click button Create new for create new User access.
  • Input User Access and Notes
  • Click button Add for create new menu and authority
  • Alt for image
  • Input Menu and Access
    • Menu, Choose menu, data will be retrieved from the database menu that you input in the Menu Management.
    • Access, Choose between Full control and Read Only.
  • Click button Save
  • Alt for image
  • Click the hyperlink at datatable to view the data
  • Alt for image

User Management

Create new user and give an user access by clicking menu Users / User.

Alt for image
  • Click button Create new for create new User.
  • Input all data user
    • User access, Choose user access, data will be retrieved from the database user access that you input in the User Access Management.
    • Name, User's name.
    • Title, User's title.
    • Email, User's email.
    • Active, Status active user.
    • User Id, User Id for login.
    • Password, Password for login.
  • Click button Save
  • Alt for image
  • Click the hyperlink at datatable to view the data
  • Alt for image

Customer

Create new user and give an user access by clicking menu Demo Form / Customer.

Alt for image
  • Click button Create new for create new Customer.
  • Input all data customer
  • Click button Save
  • Alt for image
  • Click the hyperlink at datatable to view the data
  • Alt for image

Product

Create new user and give an user access by clicking menu Demo Form / Product.

Alt for image
  • Click button Create new for create new Product.
  • Input all data Product
  • Click button Save
  • Alt for image
  • Click the hyperlink at datatable to view the data
  • Alt for image

Sales transaction

Create new user and give an user access by clicking menu Demo Form / Sales transaction.

Alt for image
  • Click button Create new for create new Sales transaction.
  • Input all data Sales transaction
  • Click button Save
  • Alt for image
  • Click the hyperlink at datatable to view the data
  • Alt for image