DEV Community

Muhammad Saim
Muhammad Saim

Posted on

Laravel Blade, Eloquent ORM, and Webpack Encore with Codeigniter 3

#codeigniter3 #eloquent #bladetemplate #webpackencore

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';
Enter fullscreen mode Exit fullscreen mode

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": "*",
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
    }


}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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");
    }
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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';

}
Enter fullscreen mode Exit fullscreen mode

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
text

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;
    });

})();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

For Yarn

yarn init -y
Enter fullscreen mode Exit fullscreen mode

now install the Dev dependencies for the project

For NPM

npm i @symfony/webpack-encore sass sass-loader webpack-notifier --save-dev
Enter fullscreen mode Exit fullscreen mode

For Yarn

yarn add @symfony/webpack-encore sass sass-loader webpack-notifier -D
Enter fullscreen mode Exit fullscreen mode

Now install the frontend dependencies

For NPM

npm i jquery popper.js bootstrap --save
Enter fullscreen mode Exit fullscreen mode

For Yarn

yarn add jquery popper.js bootstrap
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

now build those assets using these commads.

For NPM

npm run encore dev
Enter fullscreen mode Exit fullscreen mode

For Yarn

yarn encore dev
Enter fullscreen mode Exit fullscreen mode

For watch

For NPM

npm run encore dev --watch
Enter fullscreen mode Exit fullscreen mode

For Yarn

yarn encore dev --watch
Enter fullscreen mode Exit fullscreen mode

Now it's build your assets in the assets folder like this.
text

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>
Enter fullscreen mode Exit fullscreen mode

Happy coding :)

Top comments (1)

Collapse
 
juenmay profile image
Astral27 •

What about HMVC?

Read next

shaunthegeek profile image

macOS cli install Android SDK 34

ShaunTheGeek -

obrutus profile image

3163. String Compression III

Aniket Vaishnav -

remejuan profile image

Flutter trick: using AnimatedBuilder for efficient animations.

Reme Le Hane -

devmakasana profile image

Top 10 Lessons Every Freelancer Should Know Before Starting an Agency

Sanjay M. -