Codeigniter – Basic Blog Frontend

WHY CODEIGNITER

I have decided to play about with the CodeIgniter PHP framework, which is a popular lean MVC framework.

In the past I have created many websites and ecommerce webshops via my own bespoke coding which has allowed me to get a better understanding on the whole process involved with creating a functioning website/ecommerce webshop, including all the steps involved such as planning, implementing and testing code, writing multiple classes and functions.

The idea of using a popular framework to create websites/platforms seems like a good idea and looking at CodeIgniter, this is a powerful PHP framework with a very small footprint, exceptional performance and clear documentation.

As an application development framework, this should allow for me to develop projects much faster than writing my own code from scratch, it contains a wide set of libraries for common tasks.

Some of the libraries included cover email, encryption, file uploading, form validation, FTP, image manipulation, input, javascript, language, pagination, template, security and sessions which are commonly used areas on projects.

Whilst I already have coded my own front-end for my blog platform (http://chriscrewdson.co.uk/blog.htm) I have decided to create a simple front end using CodeIgniter, in which can be found via (http://ci1.chriscrewdson.co.uk).

I will use the CodeIgniter framework to create a website which contains a information page (this page) along with connecting to the MySQL database used for my blog (http://chriscrewdson.co.uk/blog.htm).

MVC

MVC

Controller

  • Receives, interprets and validates input
  • Creates/updates views
  • Query models

Model

  • Data operations (in this case to a MySQL database)

Views

  • Loaded by the controller, presentation aka web page design

Setting up CodeIgniter

After downloading the latest package from the CodeIgniter website, I extracted the files outside of the /public_html folder on my webserver.

1 - remote server files

I created a new folder named CI in my root directory and placed the application and system folders in here. The index.php file I placed within the /public_html folder.

I then opened up the index.php file and amended the path reference for the application and system folders. Once updated I uploaded the files and checked it in my internet browser in which I was greeted by the default CodeIgniter welcome page.

Setup database connection

Amend the database configuration details located within application/config/database.php

URI Routing

This section briefly describes how the URI get requested to specific controllers, this information is controlled within the application/config/routes.php file

I added the following to this file

$route['blog/tag/(:any)'] = 'blog/tag/$1';
$route['blog/post/(:any)'] = 'blog/post/$1';  
$route['blog/page/(:any)'] = 'blog/page/$1';  
$route['blog/(:any)'] = 'blog/view/$1';
$route['blog'] = 'blog';

These will redirect the possible requests for viewing the blog pages.

Create the model

I created the blog model by creating a file named Blog_model.php within the /application/models/ folder, I defined the model like shown below

<?php
class Blog_model extends CI_Model 
{
    public function __construct()
    {
        $this->load->database();
    }
}

Within the __construct function I have loaded the database helper which contains the database library.

I also defined other functions within this model which cover basic actions required to interact with the blog database tables, including retrieving multiple blog posts, single blog posts, tags and categories.

Create the controller

I created the blog controller by creating a file named Blog.php within the /application/controllers/ folder, I defined the controller like shown below

<?php
class Blog extends CI_Controller 
{
	public function __construct()
	{
		parent::__construct();
		$this->load->model('blog_model');
		$this->load->helper('url_helper');
		$this->load->library("pagination");
	}
}

Within the __construct it calls its parent’s construct (CL_Controller), along with
Model: blog_model – controls the blog functions
Helper: url_helper – functions to assist with working with URLs
library: pagination – pagination class

This controller determines how HTTP requests should be handled, in which I created functions to process the blog overview page (index) along with individual blog post (post), blog tag page (tag) and blog category page (category).

This meant I created the following functions within the class:

  • index()
  • page()
  • post()
  • tag()
  • category()

These cover the main features of the front-end of the blog, The page() function can be seen below

<?php
public function post($slug = NULL)
{
    $data['blog_item'] = $this->blog_model->get_post($slug);

    if (empty($data['blog_item']))
    {
            show_404();
    }

    $data['meta']['title'] = $data['blog_item']['cms_blog_post_meta_title'];
    $data['meta']['description'] = $data['blog_item']['cms_blog_post_meta_description'];
    $data['meta']['keywords'] = $data['blog_item']['cms_blog_post_meta_keywords'];

    $data['title'] = $data['blog_item']['cms_blog_post_title'];
    
    $data['linked_tags'] = $this->blog_model->get_post_tags($data['blog_item']['cms_blog_post_id']);
    
    $data['tags'] = $this->blog_model->get_tags();
    
    $this->load->view('templates/header', $data);
    $this->load->view('blog/view', $data);
    $this->load->view('templates/footer');
}

The basic process of the above function is that it retrieves the slug, which in this case is the unique URL keyword. This is then passed to the function contained with the Blog Model named get_post(). If this function returns false then a 404 page will be generated, otherwise the data array gets populated with the blog_iteminformation, we populate the meta information fields, call other functions within the blog model to retrieve the linked_tags and tags, then build the view, which calls the three template sections (header, blog, footer) to show the completed web page.

Views

This is where we define the layout / html coding, in which these are located within the application/viewsfolder.

I have created two folders within the views folder, the first is named templates which will contained the general structure of the website in multiple files, this is the structure/layout that won’t change such as the header and footer. This will be used on all the blog pages along with any other pages such as information pages.

This will contain two files:

  • header.php – this contains the HTML structure starting at the <DOCTYPE>, <head>, opening of the <body> and the general navigation menu
  • footer.php – this will contain the footer area along with the closing of the </body> and <html> tags.

The second is named blog and will contain the structure/layout for the actual blog content areas.

This will contain two files files:

  • index.php – this will contain the HTML for showing all the blog post snippets
  • view.php – this will contain the HTML for showing an individual full blog post

Outcome

codeigniter blog frontend