How to create simple template codeigniter

How to create simple template codeigniter

Codeigniter
April 26, 2018

Hi codeigniter beginners. Usually, when I want to output something to the browser, I simply do a $this->load->view(‘view_page’, $data); and that’s it. Inside the view_page.php I also load the parts that stay unchanged content of static, like the header section,footer section and copyrights section, with the same $this->load->view(‘header_section’); and $this->load->view(‘footer_section’). But, that is a repetition of work and code size itself, isn’t it?

So why not, instead of using $this->load->view… we only call a rendering function that will apply the front-end template to the specific view/content requested by a method ? Being something that will be repeated across a lot of methods, we can use code re-usability method. all developer should know the re-usability. We will define the rendering function inside the MY_Controller. What is my_controller we will take over the code from our previous blog and work on it:

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class MY_Controller extends CI_Controller
{
  protected $data = array();
  function __construct()
  {
    parent::__construct();
    $this->data['title'] = 'My Simple CodeIgniter Template';
  }

  protected function layout()
  {
    $this->load->view('templates/front_layout', $this->data);
  }
}

Now, that we’ve call for it, let’s create the front_layout.php. As you can see we call view from the layout folder, which will have to be created inside the views directory.

Let’s see the views directory:

-application/
- -views/
- - -errors/
- - -welcome_message.php

As you can see, there are a lot of “errors” in there. Those files belong to the CodeIgniter and are served when an error appear inside our app. Of course, you can change their look.

In there we also see the welcome_message.php which also comes with the framework, being served by the default controller.

Inside views directory let’s create a directory named layouts and inside the templates we will create front_layout.php. For the moment, we will create a basic html structure:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>My Simple CodeIgniter Template</title>
</head>
<body>

  <header>
    <nav>
      <ul>
        <li>My menu item</li>
      </ul>
    </nav>
  </header>

  <section>
    <p>Here is where i will put the text</p>
  </section>

  <aside> 
    <p>Here is a sidebar</p>
  </aside>

  <footer>
    <p>Copyright 2018 My Simple CodeIgniter Template</p>
  </footer>

</body>
</html>

If we did everything right we should see our page by going with your project url http://localhost/simple_templae/

Now we have to optimize the code of front_layout.

So let’s separate header, sidebar and footer from our front_layout.php. To do this we will create a directory inside layouts named _partials and the files inside the _partials will be:

front_header_view.php:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>My Simple CodeIgniter Template</title>
</head>
<body>

  <header>
    <nav>
      <ul>
        <li>My menu item</li>
      </ul>
    </nav>
  </header>

front_sidebar_view.php:

<aside>
  <p>Here is a sidebar</p>
</aside>

front_footer_view.php:

  <footer>
    <p>Copyright 2018 My Simple CodeIgniter Template</p>
  </footer>
</body>
</html>

Now, the front_view.php will look like:

<section>
  <p>Here is where I will put the text</p>
</section>

But we need to append those header, sidebar and footer views to the front end view:

<?php
  $this->load->view('templates/_partials/front_header_view');
?>
<section>
  <p>Here is where you will put the main content</p>
</section>
<?php
$this->load->view('templates/_partials/front_sidebar_view');
$this->load->view(templates/_partials/front_footer_view');
?>

Now, on the layout method we request for the front end template:

protected function layout()
{
  $this->load->view('templates/front_view', $this->data);
}

Apply the front end template to pages

Well… we rendered the front template, but where will the content of pages fit into this? Let’s pass the page’s view as parameter to the layout method:

protected function layout($the_view = NULL)
{
$this->data['content'] = (is_null($the_view)) ? '' : $this->load->view($the_view,$this->data, TRUE);
$this->load->view('templates/front_view', $this->data); }

The $content variable should contain a view that is particular to the controller’s method. So let’s create folder named with pages then create php one named homepage_view.php within pages folder:

<h1>Hello from homepage</h1>

<p>testing homepage view</p>

Now we have to change the front_view.php a bit to insert the page view:

<?php
$this->load->view('templates/_partials/front_header_view');
?>
<section>
  <?php echo $content;?>
</section>
<?php
$this->load->view('templates/_partials/front_sidebar_view');
$this->load->view('templates/_partials/front_footer_view');
?>

Using more than one template?

Now, let’s put this into perspective. What if our site will use two or more templates. Let’s say, we have a one column template for static pages and two column template for posts? Then we can change the layout() method to receive another parameter that will decide what template will be used:

protected function layout($the_view = NULL, $template = 'front')
{
  $this->data['content'] = (is_null($the_view)) ? '' : $this->load->view($the_view,$this->data, TRUE);
  $this->load->view('templates/'.$template.'_view', $this->data);
}

Simple, no?

Now let’s return to our header…

The page title…

In the header we have the title tag. We already defined the generic title in the MY_Controller class, so why not replace the hard-coded title with the generic title:

<title><?php echo $title;?></title>

Return JSON instead of a page? Why not?

I don’t know if this can be part of this specific step, but why not allow the layout method to decide if it returns a html page or a JSON string. Until I decide if this will be a new step let’s modify the layout() method a bit:

protected function layout($the_view = NULL, $template = 'front')
{
  if($template == 'json' || $this->input->is_ajax_request())
  {
    header('Content-Type: application/json');
    echo json_encode($this->data);
  }
  else
  {
    $this->data['content'] = (is_null($the_view)) ? '' : $this->load->view($the_view,$this->data, TRUE);
    $this->load->view('templates/layout/'.$template.'_view', $this->data);
  }
}

I don’t know if this works, but is worth a try…

What if we don’t want any template used?

Now, what about using no templates? For this we should change it again:

protected function layout($the_view = NULL, $template = 'front')
{
  if($template == 'json' || $this->input->is_ajax_request())
  {
    header('Content-Type: application/json');
    echo json_encode($this->data);
  }
  elseif(is_null($template))
  {
    $this->load->view('pages/'.$the_view,$this->data);
  }
  else
  {
    $this->data['content'] = (is_null($the_view)) ? '' : $this->load->view('pages/'.$the_view,$this->data, TRUE);
    $this->load->view('templates/layout/'.$template.'_view', $this->data);
  }
}

The final code

So, let’s recapitulate by re-viewing the files we created/modified:

-application/
- -controllers/
- - -Welcome.php
- -core/
- - -MY_Controller.php
- -views/
- - -errors/
- - -layout/
- - - -front_layout.php
- - - -_partials/
- - - - -front_header_view.php
- - - - -front_sidebar_view.php
- - - - -front_footer_view.php
- - -pages/
- - - -homepage_view.php
- - -welcome_message.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class MY_Controller extends CI_Controller
{
  protected $data = array();
  function __construct()
  {
    parent::__construct();
    $this->data['title'] = 'My Simple CodeIgniter Template';
  }

  protected function layout($the_view = NULL, $template = 'front')
  {
    if($template == 'json' || $this->input->is_ajax_request())
    {
      header('Content-Type: application/json');
      echo json_encode($this->data);
    }
    elseif(is_null($template))
    {
      $this->load->view('pages/'.$the_view,$this->data);
    }
    else
    {
      $this->data['content'] = (is_null($the_view)) ? '' : $this->load->view('pages/'.$the_view,$this->data, TRUE);;
      $this->load->view('templates/layout/'.$template.'_view', $this->data);
    }
  }
}

<?php
$this->load->view('templates/_partials/front_header_view');
?>
<section>
  <?php echo $content;?>
</section>
<?php
$this->load->view('templates/_partials/front_sidebar_view');
$this->load->view('templates/_partials/front_footer_view');
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $title;?></title>
</head>
<body>

<header>
<nav>
<ul>
<li>My menu item</li>
</ul>
</nav>
</header>

<aside>
<p>Here is a sidebar</p>
</aside>

<footer>
<p>Copyright 2018 My Simple CodeIgniter Template</p>
</footer>

</body>

</html>

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends MY_Controller {

  function __construct()
  {
    parent::__construct();
  }

  public function index()
  {
    //$this->data['title'] = 'test'; ...you can at any time change the variables declared in the MY_Controller...
    $this->layout('homepage_view');
    //$this->layout(NULL, 'json'); ....if we want to layout a json string. Also, if a request is made using ajax, we can simply do $this->layout()
  }

}

<h1>Hello from homepage</h1>

<p>testing homepage view</p>

IF you want to download this from php class then you can download from here

PHPclasses

How to create simple template codeigniter