there are some tutorials and libraries about adding templates to codeigniter, after some searching i created a simple one for my own application, it just works and i want know yours opinion about it,
first of all : i used wiredesignz / codeigniter-modular-extensions-hmvc,
i have a Template class in : application/modules/site_core/libraries/Template.php
PHP Code:
<?php
class Template {
function load($view , $data = [])
{
$CI = &get_instance();
$CI->load->helper('path');
ob_start();
include(set_realpath('templates/bootstrap/index.php'));
$output_html = ob_get_contents(); // get contents of buffer
ob_end_clean();
//for each position on template
$positions = [];
$positions ['content'] = $CI->load->view($view , $data , TRUE) ;
$positions ['sidebar1'] = '';
$positions ['sidebar2'] = '';
$positions ['header'] = '';
$positions ['menu'] = '';
$positions ['footer'] = '<p> ..:: footer ::..</p>';
foreach($positions as $key=>$value)
{
$output_html = str_replace('{'.$key.'}', $value , $output_html);
}
echo $output_html;
}
}
in this function, i get name of "view" to load into template and an array of data for pass to the "view", yes it is possible to send more than one view/data to this method but i want to load other position from other controllers (by using database),
and of course, it is possible to send name of template and load different templates depend on pages and urls, but in my case i want to use "bootstrap" template,
my "bootstrap" template located at application/templates folder :
Code:
application/templates/
- - - - - - - - /bootstrap
- - - - - - - - /- - - - - - - - /css
- - - - - - - - /- - - - - - - - /js
- - - - - - - - /- - - - - - - - /images
- - - - - - - - /- - - - - - - - /index.php
- - - - - - - - /template2
- - - - - - - - /assets
index.php is the main file that contains main HTML of themplate, any html template can be converted to template , this is my "bootstrap" template :
PHP Code:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="<?php echo base_url('templates/bootstrap/css/bootstrap.min.css'); ?>">
<link rel="stylesheet" href="<?php echo base_url('templates/bootstrap/css/bootstrap-responsive.min.css'); ?>">
<link rel="stylesheet" href="<?php echo base_url('templates/assets'); ?>/css/jquery-ui.min.css">
<link rel="stylesheet" href="<?php echo base_url('templates/assets'); ?>/css/main.css">
<link rel="stylesheet" href="<?php echo base_url('templates/assets'); ?>/css/toastr.css">
<link rel="stylesheet" href="<?php echo base_url('templates/assets'); ?>/css/chosen.css">
<link rel="stylesheet" href="<?php echo base_url('templates/assets'); ?>/css/colorbox.css">
<script src="<?php echo base_url('templates/assets'); ?>/js/vendor/jquery-1.9.1.min.js"></script>
<script src="<?php echo base_url('templates/assets'); ?>/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="<?php echo base_url('templates/assets'); ?>/js/vendor/jquery.form.js"></script>
<script src="<?php echo base_url('templates/assets'); ?>/js/vendor/jquery-ui.min.js"></script>
<script src="<?php echo base_url('templates/assets'); ?>/js/vendor/toastr.js"></script>
<script src="<?php echo base_url('templates/assets'); ?>/js/vendor/chosen.jquery.js"></script>
<script src="<?php echo base_url('templates/assets'); ?>/js/vendor/jquery.colorbox-min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Karvan</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{menu}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
{sidebar1}
{content}
{sidebar2}
<footer>
{footer}
</footer>
</div> <!-- /container -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script>window.jQuery || document.write('<script src="<?php echo base_url('templates/assets'); ?>/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="<?php echo base_url('templates/bootstrap'); ?>/js/vendor/bootstrap.min.js"></script>
<script src="<?php echo base_url('templates/assets'); ?>/js/main.js"></script>
</body>
</html>
{content} , {sidebar1} , {sidebar2} , ... will replaced by template class,
for loading a template in controllers i use :
PHP Code:
$this->template->load('welcome_message');
this is all of my template engin !
i will be glad to know your suggestions