logo
Published on

Codeigniter with Blade Templating Engine

featured Image
Authors

I am going to use the blade templating engine with CodeIgniter PHP framework.

Codeigniter with Blade Templating Engine

Introduction to Blade Templating Engine

Blade is the simple, yet powerful templating engine provided with Laravel. Unlike other popular PHP templating engines, Blade does not restrict you from using plain PHP code in your views. In fact, all Blade views are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application.

To read more please refer to the following link — click here

Introduction to Codeigniter

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.

Read more about Codeigniter — click here

Introduction to Bootstrap

Bootstrap is a free and open-source front-end Web framework. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many earlier web frameworks, it concerns itself with front-end development only.

Read more about bootstrap — click here

Installation Process

  • Download codeigniter 3 from it’s official website or click here

  • Extract your code under server directory(htdocs for xampp, www for wamp)

  • Open command prompt in your project directory

  • Change your directory to application directory from command prompt by typing

  • cd application

  • change directory to application

  • Install coolpraz/php-blade libreary by composer

  • composer require coolpraz/php-blade Note : Please visit to the link if you don’t have composer install

  • It will download all required file in a folder named vendor

  • vendor folder

  • Create MY_Contreller.phpfile in core folder and paste the following code in this file.

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

}

public _function_ front_render($view_name,$data,$head){

echo $this->blade->view()->make('_parts/header', $head);

echo $this->blade->view()->make($view_name, $data);

echo $this->blade->view()->make('_parts/footer', $head);

}

}

code explanation

use Coolpraz\PhpBlade\_PhpBlade_; is used to import Coolpraz\PhpBlade package in our application.

$this->blade = new _PhpBlade_($this->views, $this->cache); is used to create the object of the calss provided by the Coolpraz\PhpBlade_PhpBlade._

public _function_ front_render($view_name, $data, $head){

echo $this->blade->view()->make(‘_parts/header’, $head);

echo $this->blade->view()->make($view_name, $data);

echo $this->blade->view()->make(‘_parts/footer’, $head);

}

this method will available globally in all controllers

  • Create Welcome.phpin controllers folder
<?php

defined('BASEPATH') or exit('No direct script access allowed');

_class_ Welcome extends _MY_Controller_{

public _function_ index(){

$head = array();

$data = array();

$this->front_render('home', $data, $head);

}

}

code explanation

$this->front_render('home', $data, $head); // this is used to render home.blade.php

Create header.blade.phpand footer.blade.php in views/_parts folder of you application

header.blade.php

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Codeigniter With Blade</title>

    <link rel="stylesheet" href="{{ base_url() }}assets/common/node_modules/bootstrap/dist/css/bootstrap.min.css" />

    <link
      rel="stylesheet"
      href="{{ base_url() }}assets/common/node_modules/bootstrap/dist/css/bootstrap-theme.min.css"
    />

    <link rel="stylesheet" href="{{ base_url() }}assets/common/ionicons/css/ionicons.min.css" />

    <link rel="stylesheet" href="{{ base_url() }}assets/front/style.css" />
  </head>

  <body>
    <nav class="navbar navbar-default navbar-expand-xl navbar-light">
      <div class="navbar-header d-flex col">
        <a class="navbar-brand" href="#"><i class="fa fa-cube"></i>Brand<b>Name</b></a>

        <button
          type="button"
          data-target="#navbarCollapse"
          data-toggle="collapse"
          class="navbar-toggle navbar-toggler ml-auto"
        >
          <span class="navbar-toggler-icon"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collection of nav links, forms, and other content for toggling -->

      <div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
        <ul class="nav navbar-nav">
          <li class="nav-item active"><a href="#" class="nav-link">Home</a></li>

          <li class="nav-item"><a href="#" class="nav-link">About</a></li>

          <li class="nav-item dropdown">
            <a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>

            <ul class="dropdown-menu">
              <li><a href="#" class="dropdown-item">Web Design</a></li>

              <li><a href="#" class="dropdown-item">Web Development</a></li>

              <li><a href="#" class="dropdown-item">Graphic Design</a></li>

              <li><a href="#" class="dropdown-item">Digital Marketing</a></li>
            </ul>
          </li>

          <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>

          <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
        </ul>

        <form class="navbar-form form-inline">
          <div class="input-group search-box">
            <input type="text" id="search" class="form-control" placeholder="Search by Name" />

            <span class="input-group-addon"><i class="ion-search"></i></span>
          </div>
        </form>

        <ul class="nav navbar-nav navbar-right ml-auto">
          <li class="nav-item">
            <a href="#" class="nav-link notifications"><i class="ion-ios-bell"></i><span class="badge">1</span></a>
          </li>

          <li class="nav-item">
            <a href="#" class="nav-link messages"><i class="ion-email"></i><span class="badge">10</span></a>
          </li>

          <li class="nav-item dropdown">
            <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle user-action"
              ><img src="https://www.tutorialrepublic.com/examples/images/avatar/2.jpg" class="avatar" alt="Avatar" />
              Paula Wilson <b class="caret"></b
            ></a>

            <ul class="dropdown-menu">
              <li>
                <a href="#" class="dropdown-item"><i class="ion-person"></i> Profile</a>
              </li>

              <li>
                <a href="#" class="dropdown-item"><i class="ion-calendar"></i> Calendar</a>
              </li>

              <li>
                <a href="#" class="dropdown-item"><i class="ion-gear-a"></i> Settings</a>
              </li>

              <li class="divider dropdown-divider"></li>

              <li>
                <a href="#" class="dropdown-item"><i class="ion-log-out"></i> Logout</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </body>
</html>

footer.blade.php

<script src="{{ base_url() }}assets/common/jquery-3.3.1.min.js"></script>

<script src="{{ base_url() }}assets/common/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

</body>

</html>

create home.blade.php in views folder

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 text-center my-heading">
      <h3>Codeigniter 3.1.9 + Blade Templating Engine + Bootstrap 3</h3>
    </div>
  </div>
</div>

.htaccess file to remove the index.php form urls

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

Now create your views with view_name.blade.php

You can checkout git repo here — https://github.com/harendra21/ciblade/