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?