CodeIgniter And Twitter Bootstrap

CodeIgniter and Twitter Bootstrap work well together. Especially if we add a layout library from the CodeIgniter Sparks repository. I’ll cover creating a simple web app using Twitter bootstrap and CodeIgniter Sparks.

Set Up CodeIgniter

Create a new project and drop in a fresh download of CodeIgniter. I created a new virtual host called stories.dev because I got the idea for this app while thinking about how I could present short stories on the web. You can call your whatever you like obviously – just so long as you have a virtual host ready to go.

Configure the App

You should set the $config['base_url'] property to http://stories.dev or whatever local domain you are using. I also chose to autoload a couple of helpers: $autoload['helper'] = array('url', 'file');. Notice that I haven’t configured a database – this app doesn’t need one.

Install Sparks

As I said, CodeIgniter Sparks is a repository of libraries and components that makes it easy to add new features to your web app.

To install it, from Terminal make sure you are in your project directory, and then do:

<code>php -r "$(curl -fsSL http://getsparks.org/go-sparks)"
</code>

In terminal you should get:

<code>Extracting zip package ...
Cleaning up ...
Spark Manager has been installed successfully!
</code>

If you run into problems, there are more tips and options available here..

Adding Bootstrap

You can download Bootstrap from here. Then, in the root of your project folder, create a folder called assets. Inside that, create folders called ‘styles’, ‘js’, and ‘images’.

In the Bootstrap download, you’ll find a couple of CSS files, and a Javascript file. There will also be some icons. You should copy those files into their respective places in your assets folder.

Creating a Layout Library

We’ll create a layout library. In fact, the codeIgniter forums have a good one. The file should be added to application/library. SInce the library seems to have disappeared from the CodeIgniter Wiki, I’ll add it as a Gist available here.

Set the default layout name in Layout.php to something like:

<code>public function __construct($layout = "layouts/default_layout")
</code>

You can see from the above snippet that you need to create a folder called layouts in application/views. Then create a file called default_layout.php and save it in your layout folder. We can use the Bootstrap starter template for our layout. You’ll need to make sure that you replace the paths to the CSS with your local ones.

Remove any links to Javascript files for now. We’ll be dealing with those later. One important PHP snippet to add is this:

<code>&lt;?php echo $content_for_layout; ?&gt;
</code>

This will mark where your actual content will appear.

Using the Layout

Now that we have a layout library with <?php echo $content_for_layout ?> ready to receive content. We can also use placeholders to pass in a page title. In default_layout.php add this for the page title in the head:

<code>&lt;?=$this-&gt;layout-&gt;placeholder("title"); ?&gt;
</code>

Then in the constructor method of the welcome controller you can set the page title:

<code>$this-&gt;layout-&gt;placeholder("title", "Short Stories");
</code>

To load the content for the view you nearly just do a normal $this->load->view. What you need to do is: $this->layout->view('story_viewer', $data);. That’ll pass the content of the view to your layout.

Navigation

We’ll create a helper to that can utilise the active class for the navigational links. The code for the helper is in this gist.

Then in the nav section of our layout, we do this use this code.

You’ll notice a variable called $page being called. That comes from our controller method:

<code>//application/controllers/welcome.php
public function index()
{
    $data['page'] = 'home';
    $this-&gt;layout-&gt;view('pages/home', $data);
}
</code>

Obviously we change the $data[‘page’] value differently for each controller method, so that we only activate the active class for the page we are viewing.

Installing and Using a CodeIgniter Spark

Next, we’ll install a Markdown Spark so that we can write our actual stories/articles using Markdown. The Spark will render them as HTML. Here is the one I used. To install it, from Terminal make sure you are in your project folder, and then do:

<code>php tools/spark install -v0.0.0 markdown-extra
</code>

To actually use the Spark, we load it in our constructor method:

<code>$this-&gt;load-&gt;spark('markdown-extra/0.0.0');
</code>

Then, in the controller method we want to use to parse our Markdown files, we do this:

<code>public function story()
{
    $page = $this-&gt;uri-&gt;segment(3);
    $md = file_get_contents(APPPATH . 'views/stories/' .    $page . '.md');
    $data['html'] = parse_markdown_extra($md);
    $data['page'] = 'story';
    $this-&gt;layout-&gt;view('story_viewer', $data);
}
</code>

Here, you can see that I’m collecting the page name from the URI segment. Then I’m using the PHP file_get-contents function to load the Markdown file I have stored in application/views/stories. Then, I’m using the Spark to parse the Markdown into HTML:

<code>$data['html'] = parse_markdown_extra($md);
</code>

And pass it to a view called story_viewer (in applications/views). The story_viewer view just needs this: <?=$html?> which simply echos out the contents of the parsed file.

The story method can handle any Markdown file called from application/views/stories.

More Design Considerations

I added a floating menu of the left of the page, something that is easy to do with Bootstrap. I’ve added the code in this gist.

Finally…

So we have Twitter Bootstrap working with CodeIgniter 2.1.3. You’ve also seen how CodeIgniter Sparks work. This is a bare bones app, but at least you can see how something more substantial might be put together.

My example is available on Github.

The post CodeIgniter And Twitter Bootstrap appeared first on Andy Hawthorne.