Design Of Frontend And Backend In CodeIgniter 4

Codeigniter 4 Frontend and Backend

In this tutorial I am going to give you an idea how to build frontend and backend functionalities separately so that the future maintenance would be easier. Frontend generally accessed by the end users of the websites whereas, backend is used by mainly admin users who manage different functionalities of the website.

The backend admin users may be attached to different roles with different level of permissions for performing the required tasks.

Prerequisites

PHP 7.4.27, Codeigniter 4.2.11, MySQL 8.0.26

Project Directory

It’s assumed that you have setup PHP and CodeIgniter in Windows system.

Now I will create a project root directory called codeigniter-front-back anywhere in the system.

Now move all the directories and files from CodeIgniter framework into the project root directory.

I may not mention the project root directory in subsequent sections and I will assume that I am talking with respect to the project root directory.

Environment Setup

You can copy the env file and rename it as .env and add or modify the content inside it. For example, you can set the environment to development while you are doing some development for your application. The development mode will help you to understand errors that occur during your development works for your application. You can set the database configurations which will help you to connect to your database for your application and you do not need to edit the PHP file for database configurations.

For example, I have set two configurations here:

#Environment
CI_ENVIRONMENT = development

#Database
database.default.hostname = localhost
database.default.database = roytuts
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi
database.default.DBPrefix =
database.default.port = 3306

Route Configurations

For front-end the route will be started at base URL or empty path (“/“) but for admin area the route will be started with /admin.

I do not want Codeigniter to determine the route automatically, so I set auto route to false in the file app/Config/Routes.php as follows:

$routes->setAutoRoute(false);

For front-end I will display two pages – home and about, so I have configured the following routes for front-end:

$routes->get('/', 'Front\HomeController::index');
$routes->get('/about', 'Front\AboutController::index');

For admin (back-end) section, I have set the following routes:

$routes->group('admin', ['namespace' => 'App\Controllers\Back'], function($routes) {
    $routes->get('/', 'HomeController::index');
    $routes->get('password/reset', 'PwdResetController::index');
});

I have used route group to avoid repetition of admin in the path in the route configuration. So, the home page for admin is /admin, the password reset path is /admin/password/reset.

Controllers

I have also created separate folders for front-end and back-end controller classes. That’s why in the back-end route group configuration the namespace is App\Controllers\Back instead of App\Controllers.

The HomeController.php file under app\Controllers\Front has the following code:

<?php

namespace App\Controllers\Front;

use App\Controllers\BaseController;

class HomeController extends BaseController {
    
    public function index() {
        return view('Front\home');
    }
}

The app\Controllers\Front\AboutController.php file has the following code in it:

<?php

namespace App\Controllers\Front;

use App\Controllers\BaseController;

class AboutController extends BaseController {
    
    public function index() {
        return view('Front\about');
    }
}

The back-end controllers are written into the folder app\Controllers\Back. The HomeController.php file has the following code:

<?php

namespace App\Controllers\Back;

use App\Controllers\BaseController;

class HomeController extends BaseController {
    
    public function index() {
        die('Admin Page');
    }
}

The PwdResetController.php has the following code:

<?php

namespace App\Controllers\Back;

use App\Controllers\BaseController;

class PwdResetController extends BaseController {
    
    public function index() {
        die('Password Reset');
    }
}

I have created simple controller classes to demonstrate the example and this example app does not provide any functionality.

View Files

In the similar fashion as I have kept the controller classes into separate folder, you can also create separate folders for front-end and back-end view files.

Deploying the Application

I am not going to use any external server but CLI command to run the application. Make sure you start the MySQL database server before you start your application. If you want to use external server to run your application, you can use. Execute the following command on your project root directory to run your application.

php spark serve

Your application will be running on localhost and port 8080.

Testing Front Back Application

Front-End

Home page can be accessible via URL http://localhost:8080:

The about page can be accessible via URL http://localhost:8080/about:

Back-End

The home page can be accessible via URL http://localhost:8080/admin:

The password reset page can be accessible via URL http://localhost:8080/admin/password/reset:

Source Code

Download

Roy Tutorials