MojoMotor & CodeIgniter Hybrid Site - Part One | Web development, Christchurch & Sydney

Some websites just don't fit the brochure mould.

So what happens when we want the benefits of MojoMotor's simplistic content management system and other sections of hardcore functionality?

In this article I'll demonstrate a quick and simple way to create a website where sections of the site use MojoMotor and other sections use CodeIgniter.

Here's the dirt

MojoMotor is a content management system with beautiful inline editing for the client, built on top of CodeIgniter as a stand alone application. Both CodeIgniter and MojoMotor are built by EllisLab.

My goal is to utilise the user friendly inline editing of MojoMotor for the pages that the client wanted the independence to edit while exploiting the raw power and freedom of CodeIgniter for the pages that the web developers should have control over.

Step 1: Drop some coin and get your mojo on

Don't delay, purchase MojoMotor for US$49.95 in the next 15 minutes and we will throw in a free set of steak knives and ... enough said, I'll skip the purchase, download and install steps of MojoMotor.

Step 2: How do we set this up?

We need to create some folders within MojoMotor's folder hierarchy. This is to define a location for our custom CodeIgniter controller, model and views.

For this example we will call them "custom" but you can call them whatever you like.

Step 3: Hello World

Time to code a CodeIgniter welcome page. Create a new controller called "part_one" and view called "part_one_view".

If you are exploring CodeIgniter for the very first time, you should start by reading the User Guide.

../system/mojomotor/controllers/custom/part_one.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');<p>class Part_one extends CI_Controller {

    /**
     * Constructor
     *
     * @access    public
     * @return    void
     */
    function __construct()
    {
        parent::__construct();
    }</p><p>    /**
     * Index Page for this controller.
     *
     * Maps to the following URL
     *         http://example.com/index.php/part_one
     *    - or -  
     *         http://example.com/index.php/part_one/index
     *
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/part_one/<method_name>
     * @see http://codeigniter.com/user_guide/general/urls.html
     */
    public function index()
    {
        // Load our CodeIgniter view
        $this->load->view('custom/part_one_view');
    }
}</p><p>/* End of file part_one.php */
/* Location: ./application/controllers/part_one.php */
</p>

../system/mojomotor/views/custom/part_one_view.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CodeFusion</title><p>    <style type="text/css"></p><p>    ::selection{ background-color: #E13300; color: white; }
    ::moz-selection{ background-color: #E13300; color: white; }
    ::webkit-selection{ background-color: #E13300; color: white; }</p><p>    body {
        background-color: #fff;
        margin: 40px;
        font: 13px/20px normal Helvetica, Arial, sans-serif;
        color: #4F5155;
    }</p><p>    a {
        color: #003399;
        background-color: transparent;
        font-weight: normal;
    }</p><p>    h1 {
        color: #444;
        background-color: transparent;
        border-bottom: 1px solid #D0D0D0;
        font-size: 19px;
        font-weight: normal;
        margin: 0 0 14px 0;
        padding: 14px 15px 10px 15px;
    }</p><p>    code {
        font-family: Consolas, Monaco, Courier New, Courier, monospace;
        font-size: 12px;
        background-color: #f9f9f9;
        border: 1px solid #D0D0D0;
        color: #002166;
        display: block;
        margin: 14px 0 14px 0;
        padding: 12px 10px 12px 10px;
    }</p><p>    #body{
        margin: 0 15px 0 15px;
    }

    p.footer{
        text-align: right;
        font-size: 11px;
        border-top: 1px solid #D0D0D0;
        line-height: 32px;
        padding: 0 10px 0 10px;
        margin: 20px 0 0 0;
    }

    #container{
        margin: 10px;
        border: 1px solid #D0D0D0;
        -webkit-box-shadow: 0 0 8px #D0D0D0;
    }
    </style>
</head>
<body></p><p><div id="container">
    <h1>Part One - MojoMotor & CodeIgniter Hybrid Site</h1></p><p>    <div id="body">
        <p>The page you are looking at is being generated dynamically by CodeIgniter.</p></p><p>        <p>If you would like to edit this page you'll find it located at:</p>
        <code>system/mojomotor/views/custom/part_one_view.php

The corresponding controller for this page is found at:

system/mojomotor/controllers/custom/part_one.php

If you are exploring CodeIgniter for the very first time, you should start by reading the User Guide.

This code should look familiar if you have used CodeIgniter before. It's a blatant copy of the standard welcome page that greets you on a CodeIgniter install.

Step 4: The magic is in how well you route

It's time to tell MojoMotor about our CodeIgniter page. This is done in the routes config.

At the end of the routes.php file, add the following code.

/**
 * CodeIgniter Routes.
 *
 * @see http://www.digitalfusion.co.nz/web/
 */
// Add custom CodeIgniter controller names to this codeigniter_routes array.
$codeigniter_routes = array(
    'part_one'
);<p>// Loop though the codeigniter_routes array and create a new rule.
// NOTE: Change 'custom' to your folder name.
if ( isset( $codeigniter_routes ) && !empty( $codeigniter_routes ) ) {
    foreach ( $codeigniter_routes as $value ) {
        $route = array(    '('.$value.')(?:(/.+))?' => 'custom/'.$value.'$2' ) + $route;
    }
}
</p>

Note:

Our CodeIgniter pages will override the MojoMotor ones when they have identical URL titles. This can be a good thing...

When starting a site, I find it useful to create the site structure within MojoMotor. The pages that are to be done in CodeIgniter use a layout called "coming_soon".

When it's time to dive into coding these CodeIgniter pages, create a controller with the same URL title, and add it to the CodeIgniter routes array in the routes config. Instant override.

Remove from the CodeIgniter routes array and you have instant fallback to the MojoMotor "Coming Soon" page.

Step 5: Hello World

Example File

Here's your free steak knife. Not much to it really but hack and slash to your hearts content.

Download Example File

I haven't included the MojoMotor source code as not everything comes for free.

Disclaimer:

Digital Fusion is not affiliated to EllisLab, it's products and steak knives in any way.

Stay tuned for developments:

I've used this method on one of our projects but the thing that annoyed me most was having to duplicate certain layouts/views. One set as MojoMotor embeded layouts and the other as CodeIgniter views.

I'm talking about headers, navigation, footers and other sections of the site that stay the same over all pages. Code it once and load it when you need it.

In part two, I'll see how we can use our MojoMotor embed content layouts in CodeIgniter views.

MojoMotor & CodeIgniter Hybrid Site - Part One