MojoMotor & CodeIgniter Hybrid Site - Part Three

At the start of these articles all I wanted to do was show how MojoMotor and CodeIgniter could live side by side in a website. Things have progressed some, and now I find myself asking the question "Can we get the glorious Mojo bar and region editor to work in CodeIgniter pages?"

This is an interesting thought as what we are talking about is flipping MojoMotor 180° and allowing CodeIgniter to be top dog â€Â" not the other way round.

It's time to stop discriminating and open up inline editing!

Here's the dirt

My goal in this article is to drink a whole lot of coffee and see if we can create a standard webpage in CodeIgniter, all the while using some magic to tap into MojoMotor's code base and allow us to mimic and offer user-friendly inline editing on all pages.

To make this a challenge, I will not edit one line of MojoMotor source code. This is to ensure that upgrading of MojoMotor should be somewhat future proof.

The only files that I consider fair game are the MojoMotor config files. You should read through these files and modify for each project anyway.


Step 1: Déjàvu is usually a glitch in the Matrix

First off we need to create a temporary MojoMotor page using our "coming_soon" layout.

This step is somewhat optional for the fact that this page is going to get overridden by a CodeIgniter page further on down the track, but I find it useful to do this for a couple of reasons.

Firstly when starting a site, I like to create all the pages of the site (as placeholders) to map out the sections to be coded. The pages that are to be done in CodeIgniter use a layout called "coming_soon".

Secondly (and probably more importantly) adding the page into MojoMotor's page structure allows us to use the Mojo tags that are at our disposal. Most importantly the "page_list" tag which gives us a dynamic navigation list of our pages.

For this example I’ve called the page “part_three” but it can be whatever you like.

MojoMotor Pages

Step 2: Taste-test our sweet mojo delights

Coming Soon

Step 3: Caffeine is the core of code development

Five mugs of coffee and I'm buzzzzing. I feel great and a little green fairy called Sam sings sweet harmonies in my ear as I get my loader class into an extended code. Or should that be my code into an extended loader class. I name it "Mojomotor_Loader" and it is majestic.

Create a new file called "Mojomotor_Loader.php" under the MojoMotor core folder and add the following code.

MojoMotor Core


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

 * CodeIgniter MojoMotor_Loader Class
 * Extending the core CogeIgniter Loader class with a series of functions that mimic MojoMotors page loading.
 * This means we can have all features of MojoMotor in CodeIgniter native pages.
 * @package  TeamDF MojoMotor MY_Loader
 * @author  Phil Taylor
 * @link
 * @license  MIT license -
 * @version  1.1.0
 * Copyright (c) TeamDF - 27/09/12
 */<p>class Mojomotor_Loader extends CI_Loader {

 // Variable suppresses loading of the MojoMotor scripts (Mojobar control panel and login)
 // Set $this->load->no_scripts = TRUE; before the $this->load->mojo_view() call in your controller to suppress loading of the MojoMotor scripts.
    var $no_scripts = FALSE;

 function __construct()

  // Get an instance of the CodeIgniter super object.
  $this->CI =& get_instance();

    function mojo_view($view, $vars = array(), $return = FALSE)
  // Load our CodeIgniter view and set as a variable.
  $page_c $vars, TRUE);</p><p>     // Load MojoMotors layout parser.
        parent::driver('mojomotor_parser');</p><p>  // Get the page url title using the function name. If the function is index, use controller name.
  $page_url_title = ( $this->CI->router->method != 'index' ? $this->CI->router->method : $this->CI->router->class );

  // $this->CI->load->model('page_model');
  $page = $this->CI->page_model->get_page_by_url_title($page_url_title);

  // If the method doesn't have a page in MojoMotor, use the class.
  if (empty($page))
   $page_url_title = $this->CI->router->class;

  $this->CI->mojomotor_parser->url_title = $page_url_title;
  // $this->mojomotor_parser->layout_name = '';</p><p>  // Get all Mojo page regions from our CodeIgniter view.
  $dom_regi  // Get all Mojo page regions stored in the database.
  $db_regi  // We need to insert any Mojo page regions that aren't already in the database. This will allow MojoMotor to natively update regions on our CodeIgniter views.
  foreach (array_diff($dom_regions, $db_regions) as $region_id) {
   // Insert new page regions.
         'region_id'   => $region_id,
         'region_name'  => ucwords(str_replace('_', ' ', $region_id)),
         'page_url_title' => $page_url_title,
         'content'   => '<p>Click to edit

         'layout_id'   => 0
  }</p><p>  // Parse the CodeIgniter view using MojoMotor's function.
  $page_c $this->CI->mojomotor_parser->parse_template($page_content);  

  // Do we need to add the MojoMotor scripts?
  if (!$this->no_scripts) {

   // Add the Mojo varible and login form to the page.
   if ($this->CI->session->userdata('group_id') || $this->CI->site_model->get_setting('in_page_login') == 'y') {
    $page_content .= '<script charset="utf-8" type="text/javascript" src="'.site_url('javascript/mojo/'.$page_url_title).'"></script>'."\n";
    $page_content .= parent::view('login/in_page', '', TRUE);

   // Add the Mojobar control panel.
   if (preg_match("|</body>.*?</html>|is", $page_content)) {
    $page_c '', $page_content);
    $page_content .= $this->CI->cp->output();
    $page_content .= implode("\n", $this->CI->cp->appended_output);
    $page_content .= "\n".'</body></html>';
   } else {
    $page_content .= implode("\n", $this->CI->cp->appended_output);
    $page_content .= $this->CI->cp->output();

  }</p><p>  // Do we need to write a cache file?
  if ($this->CI->output->cache_expiration > 0) {

  // Add the page contents to our output.

  // Suppress loading of the MojoMotor scripts if this function is called a second time.
  $this->load->no_scripts = TRUE;

 // --------------------------------------------------------------------

  * Check page content for page regions
  * Skims page content and returns an array of page region ids
  * @access private
  * @param string   page content
  * @return array
 private function _check_page_regions($page_content, $regi /> {
  parent::helper('dom');</p><p>  $layout_dom = str_get_html($page_content);</p><p>  $regi  foreach($layout_dom->find('*[class=mojo_'.$region_type.'_region]') as $region)
   $regions[] = $region->id;
  }</p><p>  return $regions;

 // --------------------------------------------------------------------</p><p> /**
  * Get Page Regions
  * Returns an array of all currently defined page regions in the database
  * @access private
  * @param string   page url title
  * @return array
 private function _get_page_regions($page_url_title = '')
  $regi compact('page_url_title'));</p><p>  $page_regi  if ($regions->num_rows() > 0)
   foreach ($regions->result() as $region)
    $page_regions[] = $region->region_id;
  }</p><p>  return $page_regions;

 // --------------------------------------------------------------------

  * Insert Editable Page Region
  * Inserts a page region to the site
  * @access private
  * @param array
  * @return mixed
 private function _insert_page_region($regi /> { 
  if ($this->CI->db->insert('page_regions', $region_info))
   return $this->CI->db->insert_id();
  }</p><p>  return FALSE;


The code is well documented, so I invite you to have a read over it.

The guts of the extended loader class is the function called "mojo_view". This basically loads the CodeIgniter view, runs it though some MojoMotor functions, and adds our page content to the output.

You may notice that there are some checks for new "Mojo Page Regions".

This is because any page regions that you have put into your CodeIgniter-based view won't have made their way into the MojoMotor database tables. (MojoMotor normally makes those records each time you save a layout after editing it.)

Because they're not in the database, MojoMotor's inline editing won't save any changes a user makes. The "Mojomotor_Loader" therefore has to make an extra pass over the page before displaying the contents.

Step 4: What's changed?

The great thing about extending the view loader is that very little changes when creating a new page in CodeIgniter. Time to show you how simple this turns out to be.

Create a new controller called "part_three" and view called "part_three_view".

We are calling the controller "part_three" as this is the URL title of our temporary MojoMotor page.


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

     * Constructor
     * @access    public
     * @return    void
    function __construct()

     * Index Page for this controller.
     * Maps to the following URL
     *    - or -  
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/part_three/<method_name>
     * @see
    public function index()
        // Data to be used by our CodeIgniter view.
        $data = array(
                        'title'     => 'Part Three - MojoMotor & CodeIgniter Hybrid Site',
                        'framework' => 'CodeIgniter'
                     );</p><p>        // Load the CodeIgniter view using MojoMotor Loader
        $this->load->mojo_view('custom/part_three_view', $data);
}</p><p>/* End of file part_three.php */
/* Location: ./application/controllers/part_three.php */

There are only two tiny changes that you need to be aware of:

  1. The class extends Mojomotor_Controller and NOT CI_Controller. This is so MojoMotor's extended controller loads the needed resources for our page.
  2. Load the view using "mojo_view" rather than "view". This will call our extended loader class and kick in the MojoMotor mimicking.


{mojo:layout:embed layout="header"}<p><h1><?= $title ?></h1></p><p><div id="body">
    <p>The page you are looking at is being generated dynamically by <?= $framework ?>.</p>

    <p>MojoMotor Page List Navigation:</p>

    <p>MojoMotor Page Region:</p>
    <div id="ci_page_region" class="mojo_page_region">
        {mojo:page:page_region id="ci_page_region"}

    <p>If you would like to edit this page you'll find it located at:</p>

The corresponding controller for this page is found at:


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

{mojo:layout:embed layout="footer"}

The only change from Part Two's view is that I have added a Mojo Page Region so we can display and edit a section of the page using MojoMotor's inline editing.


There is nothing to stop you from using CI_Controller and the standard load view when you want nothing more than Plain Jane CodeIgniter.

The example file has a few more functions in the "part_three" controller to show how to load separate CodeIgniter header, body & footer views and how to load a view without the MojoMotor scripts (Mojobar control panel and login).

Step 5: Lucky last route

It's time to tell MojoMotor about our CodeIgniter page with a little overriding magic. This is done in the routes config.

Routes Config

Add our new controller's name to the CodeIgniter routes array.

// Add custom CodeIgniter controller names to this codeigniter_routes array.
$codeigniter_routes = array(
    'part_one', 'part_two', 'part_three'

Step 6: Let's drink to our success

CodeIgniter & MojoMotor

Example File

Here's a free bottle of beer to wash down last article's steak. Enjoy!

Download Example File

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

Write a response...