Setup CakePHP 4

Introduction

Skote – CakePHP is a simple and beautiful admin template built with Bootstrap 5.1.3 and CakePHP 4. It has 7+ different layouts and 3 modes ( Dark, Light & RTL ). You can simply change to any layouts or modes by changing a couple of lines code. You can start small and large projects or update design in your existing project using Skote CakePHP. It is very quick and easy as it is beautiful, adroit, and delivers the ultimate user experience.

📁 Folder & Files Structure

CakePHP

├── CakePHP
    ├── .github
    ├── bin
    ├── config
    ├── logs
    ├── plugins
    ├── resources
    ├── config
    ├── logs
    ├── src directory
        ├── Console
        ├── Controller
        ├── Model
        ├── View
        └── Application.php
    ├── templates directory
        ├── cell
        ├── element
        ├── email
        ├── Error
        ├── layout
        ├── Pages
        └── Users
    ├── tests
    ├── tmp
    ├── webroot directory
        ├── css
        ├── fonts
        ├── images
        ├── js
        ├── lang
        ├── libs
        ├── .htaccess
        ├── favicon.ico
        └── index.php
    ├── .editorconfig
    ├── .gitattributes
    ├── .gitignore
    ├── .htaccess
    ├── composer.json
    ├── composer.lock
    ├── index.php
    ├── phpcs.xml
    ├── phpstan.neon
    ├── phpunit.xml.dist
    └── README.md
Server Requirements

Please check the Server Requirements from the below link.
https://book.cakephp.org/4/en/installation.html

Installation

To setup the admin template, follow the below-mentioned steps:

After you finished with the above steps, you can run the following commands into the terminal/command prompt from the root directory of the project to run the project locally or build for production use:

Command Description
composer install command to install all of the framework's dependencies.
bin/cake server This will start PHP’s built-in webserver on port 8765 at http://localhost:8765.
Note: For Windows, the command needs to be bin\cake server (note the backslash).
General Routes
You can follow the official doc https://book.cakephp.org/4/en/development/routing.html
You can add new routes in the file: config/routes.php
i.e. $builder->connect('<redirect-link>', ['controller' => 'controller-name', 'action' => 'controller-method']);

How to use pre-built layouts?

For Vertical layout, Each of the layout options is provided below with steps you would need to perform in the templates/element/body.php file:

image
Light Sidebar & Topbar Dark
Remove data attribute data-sidebar="dark" body element to have light sidebar. Add data attribute data-topbar="dark" body element to have a dark topbar.
image
Compact Sidebar
Keep your body element with data attribute data-sidebar-size="small" i.e. <body data-sidebar-size="small"> to have small sidebar.
image
Icon Sidebar
Keep your body element with class vertical-collpsed" i.e. <body class="vertical-collpsed"> to have icon sidebar.
image
Boxed Layout
Keep your body element with class vertical-collpsed and data attribute data-layout-size="boxed" data-keep-enlarged="true" i.e. <body class="vertical-collpsed" data-layout-size="boxed" data-keep-enlarged="true"> to have boxed layout with icon view sidebar.
image
Colored Sidebar
Keep your body element with data attribute data-topbar="colored" i.e. <body data-topbar="colored"> to have colored sidebar.
image
Scrollable
Keep your body element with data attribute data-layout-scrollable="true" i.e. <body data-layout-scrollable="true" > to have scrollable layout.
image
Preloader
In order to add pre-loader in your page, include following html after body element. <div id="preloader"> <div id="status"> <div class="spinner-chase"> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> </div> </div> </div>

For Horizontal layout, Please include $this->element('partials/horizontal') in the templates/element/menu.php
Each of the layout options is provided below with steps you would need to perform in the templates/element/body.php file:

image
Topbar Light
Keep your body element with data attribute data-topbar="light" data-layout="horizontal" i.e. <body data-topbar="light" data-layout="horizontal"> to have light topbar and dark menubar.
image
Colored Header
Keep your body element with data attribute data-topbar="colored" data-layout="horizontal" i.e. <body data-topbar="colored" data-layout="horizontal"> to have colored topbar and dark menubar.
image
Boxed Layout
Keep your body element with data attribute data-layout-size="boxed" data-layout="horizontal" i.e. <body data-layout-size="boxed" data-layout="horizontal"> to have boxed layout.
image
Scrollable
Keep your body element with data attribute data-layout-scrollable="true" data-layout="horizontal" i.e. <body data-layout-scrollable="true" data-layout="horizontal" > to have scrollable layout.
image
Preloader
In order to add pre-loader in your page, include following html after body element. <div id="preloader"> <div id="status"> <div class="spinner-chase"> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> </div> </div> </div>
© Themesbrand.
Crafted with by Themesbrand