Hi all,
Today we learn how to integrate twig template engine with codeigniter and also with codeigniter hmvc. At first, you have to download hmvc third_party for module integration in your latest codeiginter. You can download from here.
After download the file extract the file and you find two folder “third_party” and “core”. You have to copy the “MX” folder to your codeigniter “third_party” folder and copy the files from “core” to your codeigniter “core” folder. After copying this just add the following line to your “autoload.php”
$autoload['packages'] = array(APPPATH.'third_party');
Thats it. Now you are able to module based development with codeigniter. Now just create a directory named “modules” in your application directory, and create module under the modules directory such as “admin” module and create “models”, “controllers” and “views”.
Now we are going to integrate twig with our codeigniter application.
At first, download the twig library from here.
After extracting the zip you will find two folder “libraries” and “config”. Inside the config folder copy the twig.php file to your “application/config” folder. Than copy the “libraries/Twig” folder to your “application/libraries” folder and copy the “libraries/Twig.php” file to your “application/libraries” directory.
Thats it.
Lets see an example with twig and codeigniter hmvc.
At first, for using the base url in your twig template please define a constant in your config.php file. Code is below..
$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url'] = "$root";
define('BASE', $root);
After That, create a layout file “layout.html” in your “application/views” directory. And copy the following codes in your layout.html file….
<!DOCTYPE html>
<html>
<head>
<title>
{% block title %}Layout{% endblock %}
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="{{ constant('BASE') }}public/style/style.css" />
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="sidebar">
<ul>
<li><a href="{{ constant('BASE') }}">Home</a></li>
<li><a href="{{ constant('BASE') }}user/services">Services</a></li>
<li><a href="javascript:void(0)">Portfolio</a></li>
<li><a href="javascript:void(0)">About Us</a></li>
<li><a href="javascript:void(0)">Contact Us</a></li>
</ul>
</div>
<div id="main-content">
{% block content %}{% endblock %}
</div>
<div></div>
</div>
<div id="footer">
©Copyright <a href="http://www.cygnusteam.com" target="">Cygnus Team</a>
</div>
</body>
</html>
Than, create a folder “public” in your application root directory and under the public directory create another folder named “style” and create style.css file and copy the following code…
* {
margin: 0;
padding: 0;
}
body{
width: 1000px;
margin: 0 auto;
}
h1,h2,h3,h4,h5,h6{border-bottom: 1px solid #c5c5c5; margin-bottom: 10px; padding-bottom: 3px; }
.left{
float: left;
}
.right{
float: right;
}
.clr{
clear: both;
}
#header{
background-color: #5e5e5e;
height: 120px;
}
#content{
min-width: 700px;
padding: 10px 10px 10px 0px;
}
#sidebar{
width: 150px;
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #c5c5c5;
border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
box-shadow: 0 0 3px #000; -moz-box-shadow: 0 0 3px #000; -webkit-box-shadow: 0 0 3px #000;
}
#sidebar ul li a{
text-decoration: none;
}
#sidebar ul{
list-style-type: none;
}
#main-content{
width: 758px;
padding: 10px;
}
#footer{
background-color: #5e5e5e;
height: 20px;
text-align: center;
padding: 5px;
}
#footer a {
color: #ffffff;
text-decoration: none;
}
And than, create a folder named “user” or whatever you think in your application/modules directory and creaet a folder named controllers and create a file named user.php and copy the following codes…
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class User extends MX_Controller {
private $view = array();
public function __construct() {
parent::__construct();
}
public function index() {
$this->view['title'] = "Home";
$this->view['header'] = "Home";
$this->twig->display('home.html',$this->view);
}
public function services() {
$this->view['title'] = "Services";
$this->view['header'] = "Services";
$this->twig->display('services.html',$this->view);
}
}
After that, create a folder “views” in your application/modules/user/ directory and create two file “home.html” and “services.html” and copy the following code
home.html….
{% extends "layout.html" %}
{% block title %} {{title}} {% endblock %}
{% block content %}
<h2>{{header}}</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
{% endblock %}
services.html…
{% extends "layout.html" %}
{% block title %} {{title}} {% endblock %}
{% block content %}
<h2>{{header}}</h2>
{% endblock %}
Now just run the application writing the following line in your url bar…
http://localhost/app_name/user/
or,
http://localhost/app_name/index.php/user/
Thats all for today.
If you have any query please submit your query in comments..
I will response your query asap.
Happy coding.
Bye
Arnab's Blog 