Step 2 – Create a template for admin area

(created: January 22, 2015; last update: October 01, 2015)

Now that we have an admin area, it would be nice to make it look good. So let’s first create a basic template and then inject the Bootstrap CSS in it.

As you’ve probably read in “Step 11 – Creating and using page templates in CodeIgniter”, it is quite easy to create a template.

So let’s apply that to our blog admin area:

First of all let’s see what we can change in MY_Controller class. The $data and the render() method will be universal throughout our blog, and if Admin_Controller class and Public_Controller class extend MY_Controller, why not define those in there?

As you can see, we’ve added a default page title inside page_title key. Also, one might ask: What are those before_head and before_body? Often you find yourself that you need to insert something inside the html page either before closing the <head> tag or before closing the <body> tag (things like javascripts or css styles). This way we can fill these keys with html code as values, and will be inserted into the pages. Now, for our admin area we want to use a different template so we should overwrite the MY_Controller properties. So let’s change the MY_Controller.php to accomodate the changes needed for Admin_Controller:

In application/views/templates we will have to create an admin_master_view.php:

And after that we will create the template parts, the admin_master_header_view.php, and the admin_master_footer_view.php inside application/views/templates/_parts directory:

Now, returning to our dashboard_view.php, we should remove the header and footer part and leave those to the master template. So the new dashboard_view.php will look like this now:

But what if for some pages we would have to put some html code just before the </head> or </body> tags? For this we will create two more $data elements inside the MY_Controller class, and pass them to the master template:

Now, going to the admin_master_header_view.php, we echo the $data[‘before_head’]:

And, going to admin_master_footer_view.php, we echo the $data[‘before_footer’]:

Now go to the Dashboard controller, in application/controllers/admin directory, and instead of calling $this->load->view(‘admin/dashboard_view’); we call the method we defined in MY_Controller and extended in Admin Controller: $this->render(‘admin/dashboard_view’).

Perfect! It’s time for…

Inserting the the Bootstrap CSS into our template

First of all we should create an assets directory in which we will keep our css, javascript and site’s specific images (like logo and so on). Inside it we will also create an admin directory so that we will know that in there we can find all our admin specific assets:

After we’ve downloaded Bootstrap CSS, we extract the archive inside the assets/admin directory:

Let’s make sure that no one else will look at our admin assets by creating an empty index.html inside the assets/admin directory. You can also create a .htaccess file inside the assets directory (http://www.thesitewizard.com/apache/prevent-directory-listing-htaccess.shtml)

After this we should go to our admin_master_header_view.php and load the Bootstrap’s assets:

Now, in admin_master_footer_view.php we load the javascripts needed for Bootstrap:

Now let’s return to our admin_master_header_view.php and create our horizontal menu:

Now, what about the “Project name”. Why not use our configuration file that we’ve made in a previous tutorial so that it will use the “cms_title” to replace the hard-coded title? So, let’s change Project title  into <?php echo $this->config->item(‘cms_title’);?>.

Also, as you can see, inside the menu we’ve used site_url(). We will use a lot of URL helper functions, so let’s just add this to our autoload.php:

Also, some changes inside the admin_master_view.php are necessary:

…and some in admin_master_footer_view…

Cool! Next we will secure our admin area.

Here is our application if you’ve followed all the previous steps and this one.

0 thoughts on “Step 2 – Create a template for admin area

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

No spam? * Time limit is exhausted. Please reload CAPTCHA.