Laravel Blade, Eloquent ORM, and Webpack Encore with Codeigniter 3
Tags: codeigniter3, eloquent, bladetemplate, webpackencore
Published: 2020-12-16 14:28:42

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](https://codeigniter.com/) 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` 
```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.

```json
{
  "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
<?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`

```html
<!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
<?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
<?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
<?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](https://github.com/pratikborsadiya/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](https://i.imgur.com/zn1Eojt.png)

Create a new folder in `src` directory with the name of `js` for JavaScript files and write a code init.
```js
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**
```shell
npm init -y
```
For **Yarn**
```shell
yarn init -y
```
now install the **Dev** dependencies for the project

For **NPM**
```shell
npm i @symfony/webpack-encore sass sass-loader webpack-notifier --save-dev
```
For **Yarn**
```shell
yarn add @symfony/webpack-encore sass sass-loader webpack-notifier -D
```

Now install the frontend dependencies

For **NPM**
```shell
npm i jquery popper.js bootstrap --save
```
For **Yarn**
```shell
yarn add jquery popper.js bootstrap
```

Now create `webpack.config.js` in your root directory and add these configurations.

```js
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**
```shell
npm run encore dev
```
For **Yarn**
```shell
yarn encore dev
```

For watch 

For **NPM**
```shell
npm run encore dev --watch
```
For **Yarn**
```shell
yarn encore dev --watch
```
Now it's build your assets in the assets folder like this.
![text](https://i.imgur.com/2DV6eGX.png)

Now use these files in your template.

```html
<!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 :)