CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications.
Currently, I'm using Codeigniter for my project and I'm so tired of using Codeigniter's Query Builder and Views without any templating engine so I decided to use Blade Template as my templating engine, and for the Database layer I use Eloquent ORM also from Laravel and firstly I decided to you Laravel Mix for my frontend but I ditch Laravel Mix and I decided to use Symfony's Webpack Encore and I love it.
So let's start.
First, download the Codeigniter from that link and extract it in the folder I called it my-app after that now it's time to configure composer.
Step #01
Configure the composer with Codeigniter by default Codeigniter is looking vendor and autoload in the application folder but I change that and tell Codeigniter to look in root to see vendor so open config.php from application/config/config.php
/*
|--------------------------------------------------------------------------
| Composer auto-loading
|--------------------------------------------------------------------------
|
| Enabling this setting will tell CodeIgniter to look for a Composer
| package auto-loader script in application/vendor/autoload.php.
|
| $config['composer_autoload'] = TRUE;
|
| Or if you have your vendor/ directory located somewhere else, you
| can opt to set a specific path as well:
|
| $config['composer_autoload'] = '/path/to/vendor/autoload.php';
|
| For more information about Composer, please visit http://getcomposer.org/
|
| Note: This will NOT disable or override the CodeIgniter-specific
| autoloading (application/config/autoload.php)
*/
$config['composer_autoload'] = FCPATH.'/vendor/autoload.php';
and change the composer_autoload from false to this value FCPATH.'/vendor/autoload.php'
Now create composer.json in the root directory of the project and paste that values in it.
{
"require": {
"coolpraz/php-blade": "^0.1.0",
"illuminate/database": "*",
}
}
now it's time to run the command to install all the php dependencies run this composer install in your root directory and it will create a vendor folder in the root directory.
Step #02
Now it's time to configure the blade with Codeigniter. Create an MY_Controller file in the application\core folder and write that code init.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
use Coolpraz\PhpBlade\PhpBlade;
class MY_Controller extends CI_Controller
{
protected $views = APPPATH . "views";
protected $cache = APPPATH . "cache";
protected $blade;
public function __construct()
{
parent::__construct();
$this->blade = new PhpBlade($this->views, $this->cache);
}
}
now create a view in your application\view directory I created welcome_message.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
</head>
<body>
<h1>{{ "Home" }}</h1>
</body>
</html>
now create a controller Welcome which extends MY_Controller.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends My_Controller {
public function index()
{
echo $this->blade->view()->make("welcome_message");
}
}
Step #03
Now it's time to configure the Eloquent ORM open database.php which exists in application/config open and add this code.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
use Illuminate\Database\Capsule\Manager as Capsule;
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'muhammadsaim',
'password' => 'muhammadsaim',
'database' => 'quiz_app_cc',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
$capsule = new Capsule;
$capsule->addConnection([
'driver' => 'mysql',
'host' => $db['default']['hostname'],
'database' => $db['default']['database'],
'username' => $db['default']['username'],
'password' => $db['default']['password'],
'charset' => 'utf8',
'collation' => $db['default']['dbcollat'],
'prefix' => $db['default']['dbprefix'],
]);
$capsule->bootEloquent();
Now create model in application/models
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
use Illuminate\Database\Eloquent\Model;
class User extends Model
{
protected $guarded = [];
protected $table = 'users';
}
Step #04
Now its time to add a frontend in our application I use this open-source admin panel for this Vali Admin download it from GitHub and create src folder in your application root and create sass folder in the src/sass and copy all the sass files from the downloaded folder like this
Create a new folder in src directory with the name of js for JavaScript files and write a code init.
import "../sass/main.scss";
window.$ = window.jQuery = require('jquery');
require('popper.js');
require('bootstrap');
(function () {
"use strict";
var treeviewMenu = $('.app-menu');
// Toggle Sidebar
$('[data-toggle="sidebar"]').click(function(event) {
event.preventDefault();
$('.app').toggleClass('sidenav-toggled');
});
// Activate sidebar treeview toggle
$("[data-toggle='treeview']").click(function(event) {
event.preventDefault();
if(!$(this).parent().hasClass('is-expanded')) {
treeviewMenu.find("[data-toggle='treeview']").parent().removeClass('is-expanded');
}
$(this).parent().toggleClass('is-expanded');
});
// Set initial active toggle
$("[data-toggle='treeview.'].is-expanded").parent().toggleClass('is-expanded');
//Activate bootstrip tooltips
$("[data-toggle='tooltip']").tooltip();
// Login Page Flipbox control
$('.login-content [data-toggle="flip"]').click(function() {
$('.login-box').toggleClass('flipped');
return false;
});
})();
Now install the dependencies for the frontend
we have two package managers yarn and npm I'm using yarn run this command according to your package manager in your root directory.
For NPM
npm init -y
For Yarn
yarn init -y
now install the Dev dependencies for the project
For NPM
npm i @symfony/webpack-encore sass sass-loader webpack-notifier --save-dev
For Yarn
yarn add @symfony/webpack-encore sass sass-loader webpack-notifier -D
Now install the frontend dependencies
For NPM
npm i jquery popper.js bootstrap --save
For Yarn
yarn add jquery popper.js bootstrap
Now create webpack.config.js in your root directory and add these configurations.
const Encore = require('@symfony/webpack-encore');
// admin dashboard (https://github.com/pratikborsadiya/vali-admin)
Encore
.setOutputPath('assets')
.setPublicPath('/my-app/assets')
.addEntry('app', './src/js/app.js')
.splitEntryChunks()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSingleRuntimeChunk()
.enableSassLoader()
.autoProvidejQuery();
module.exports = Encore.getWebpackConfig();
now build those assets using these commads.
For NPM
npm run encore dev
For Yarn
yarn encore dev
For watch
For NPM
npm run encore dev --watch
For Yarn
yarn encore dev --watch
Now it's build your assets in the assets folder like this.
Now use these files in your template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<link rel="stylesheet" href="{{ base_url('assets/app.css') }}">
</head>
<body>
<h1>Home</h1>
<script src="{{ base_url('assets/runtime.js') }}"></script>
<script src="{{ base_url('assets/vendors~app.js') }}"></script>
<script src="{{ base_url('assets/app.js') }}"></script>
</body>
</html>
Happy coding :)
Top comments (1)
What about HMVC?