The New Myth family: SprintPHP Bonfire Practical CodeIgniter 3

New Myth Media Blog

Serving the New Myth Media Family.

Practical CodeIgniter 3 Released

My new book about making the most of CodeIgniter 3 is out!

Over at NetTuts, they've put together a series of tutorials that show how to build a simple Twitter clone, called Ribbit in a variety of different languages. Using their concept as an example, lets step through how you might build the exact same application with Bonfire acting as the admin area for us to manage users, etal.

This is the first of two or three tutorials covering the process. We'll cover the basics they cover, user login and signup, Ribbitting, and friends, etc. and might even delve into some topics they didn't, like the AJAX solution, etc.

This tutorial assumes that you already have a clean install of Bonfire up and running, with database, and with the index.php removed from the URL.

A repo of the code is being kept at Bonfire's GitHub account if you want to download a save a little time as you follow along. This code will assume it's already been installed, so you will need to edit the database config file and copy over a working table from another stock 0.7 install to use.

You've Got The Look

They did a good job of describing the benefits of LESS in their intro tutorial, so I won't touch on that here. Instead, we're going to focus on taking their code and design, and converting it to work in Bonfire.

Get Your Assets In Line

To get started, download their source files and extract them to some place safe on your hard drive. Move their basic assets over to a new theme inside the public/themes folder. We'll call the theme ribbit for simplicity.

Next, copy the base assets into place:

  • Move the files from the gfx folder to public/assets/images/.
  • Copy the styles.less file into a new folder at public/themes/ribbit/css
  • Copy the less.js file into a new folder at public/themes/ribbit/js

Now, we need to modify the less file to correctly point to the new images location. Open the style.less file in your favorite editor and do a global find/replace for gfx/ to be replaced with /assets/images/.

Base Template

Next, we need to create a new layout file for the theme. Bonfire will automatically use the index.php file as the base, so create that now at public/themes/ribbit/index.php. Copy and paste the contents of their index.html file into this new file.

    <!DOCTYPE HTML>
    <html>
    <head>
        <link rel="stylesheet/less" href="/themes/ribbit/css/style.less">
        <script src="/themes/ribbit/js/less.js"></script>
    </head>
    <body>
        <header>
            <div class="wrapper">
                <img src="/assets/images/logo.png">
                <span>Twitter Clone</span></p>

          </div>
       </header>
       <div id="content">
          <div class="wrapper">

          </div>
       </div>
       <footer>
          <div class="wrapper">
             Ribbit - A Twitter Clone Tutorial<img src="gfx/logo-nettuts.png">
          </div>
       </footer>
    </body>
    </html>

Now, to make sure that all public-facing pages are using the new theme, let's edit the Front_Controller to set the theme for us. The Front_Controller is a foundation controller that is used to put common functionality for the front pages in once place. It can be found at application/core/Front_Controller.php. Be sure to edit the tags for the less.js and styles.less paths so they point to the proper location.

It only has a single method, the constructor. Edit that method and tell the template library to use the new theme, by inserting the following line anywhere after loading the template library itself.

    Template::set_theme('ribbit', 'junk');

The first parameter is the name of the theme to set as the active theme. Since Bonfire supports parent/child theme relationships the second parameter would be the name of the parent theme, or the fallback theme. In this case, we don't want to use one, so we simply set it to something random.

If you try to reload your frontpage now, you'll see the same 'Welcome to Bonfire' page as before. That's because the default home controller does not extend from the Front_Controller. Let's fix that now by replacing the existing home controller with our own.

Erase the contents of the application/controllers/home.php file and replace it with:

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

    class Home extends Front_Controller {

        public function index()
        {
            Template::render();
        }
        //--------------------------------------------------------------------
    }

The Template::render() function tells Bonfire to display the contents of a file found at application/views/home/index.php, within the current theme. Refresh your front page again, and you'll see your new theme, with the logo, background, footer, and a broken image in the bottom right corner. Let's fix that real quick so it doesn't just nag us the entire time.

Open up the theme's index.php file again and change the location to point to the proper location.

<img src="/assets/images/logo-nettuts.png">

Aaah. Much better.

Only problem is that our content isn't showing up within the template file itself. Easy enough to fix. Again in the theme's index file, we need to add a single line between the wrapper div open and close tags.

    <?= Template::content(); ?> 

Refresh again, and you'll see your content sitting pretty in it's place. Well, maybe not too pretty, yet, but we'll fix that up next.

The Home Page

The content for the home page sits at application/views/home/index.php Open up that page now and we'll insert their code for the login boxes and registration form. Remember, during this stage, we're just bringing over the looks. None of the functionality. We'll integrate that in the next tutorial.

Insert the following placeholder login form after the in the header, but before the closing <p> tag.

    <form>
        <input type="email">
        <input type="password">
    </form>

Now, on to the registration form and frog image. Erase the contents of the home/index file and insert the following code.

    <img src="/assets/images/frog.jpg">
    <div class="panel right">
        <h1>New to Ribbit?</h1>
        <form>
            <input name="email" type="text">
            <input name="password" type="text">
            <input name="password2" type="password">
            <input type="submit" value="Create Account">
        </form>
    </div>

The Buddies Page

In order for a new page to display, we'll need to create a new method to show it. We have a few options here. We could create a new Buddies controller to hold the page. We could create a new module, which might be useful if we thought we could re-use the code on another project, or simply wanted to take advantage of some of the context capabilities in the admin area. For this simple demonstration, though, we'll keep things simple and collect most of our functionality into the home controller.

So let's make a new method so that we can navigate to the page. This goes in the home controller we were just in.

    public function buddies()
    {
        Template::render();
    }

That will try to display a view file based on the controller name (as the folder) and the method name (as the file), so lets give it one. Create a new file at application/views/home/buddies.php buddies. Add the "Ribbit" box and the User Info area.

    <div id="createRibbit" class="panel right">
        <h1>Create a Ribbit</h1>
        <p>
            <form>
                <textarea name="text" class="ribbitText"></textarea>
                <input type="submit" value="Ribbit!">
            </form>
        </p>
    </div>


    <div id="ribbits" class="panel left">
        <h1>Your Ribbit Profile</h1>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user1.png">
            <span class="name">Frogger</span> @username
            <p>
                567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
    </div>


    <div class="panel left">
        <h1>Your Ribbit Buddies</h1>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user2.png">
            <span class="name">Kermit</span> @username <span class="time">15m</span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user1.png">
            <span class="name">Frogger</span> @username <span class="time">15m</span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user2.png">
            <span class="name">Kermit</span> @username <span class="time">15m</span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user3.png">
            <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user2.png">
            <span class="name">Kermit</span> @username <span class="time">15m</span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user3.png">
            <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
    </div>

Navigate to /home/buddies and you should see your new page. We'll fix the URL to something nicer later.

Public Ribbits Page

This page shows the public information and doesn't require a user to be logged in. Again, we need to create a new method to hold the page, so create the ribbits method in our home controller.

public function ribbits()
{
    Template::render();
}

Then create a copy of the buddies.php view file, and name it ribbits.php. Strip out the div with an id of ribbits from the new file and your new page is ready. You can find it at /home/ribbits. Again, we'll clean up the URLs in a bit.

Public Profiles Page

This page presents a list of public profiles that users can search through. One last time, create a new method called profiles in the home controller.

    public function profiles()
    {
        Template::render();
     }

Then a new view at home/profiles.php.

        <div class="panel right">
        <h1>Search for profiles</h1>
        <p>
            <form>
                <input name="query" type="text">
                <input type="submit" value="Ribbit!">
            </form>
        </p>
    </div>



    <div id="ribbits" class="panel left">
        <h1>Public Profiles</h1>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user2.png">
            <span class="name">Kermit</span> @username <span class="time">625 followers <a href="#">follow</a></span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user1.png">
            <span class="name">Frogger</span> @username <span class="time">329 followers <a href="#">follow</a></span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
        <div class="ribbitWrapper">
            <img class="avatar" src="/assets/images/user3.png">
            <span class="name">Hypnotoad</span> @username <span class="time">129 followers <a href="#">follow</a></span>
            <p>
                Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
            </p>
        </div>
    </div>

Your new page is now ready at /home/profiles.

Cleaning up the URLs

Before we're done for today, lets make our site structure a little nicer by editing the routes. Open up application/config/routes.php file and we will setup a few aliases so that the site is nicer to get around in.

$route['buddies']   = 'home/buddies';
$route['ribbits']   = 'home/ribbits';
$route['profiles']  = 'home/profiles';

There we go. Now we can access the pages without having the home portion showing in the URL.

I should point out here that the URLs can still be accessed at /home/buddies, etc. In this case, that's not a problem, but there might be occassions that you would not want users to access the page at that location. In that case, you would simply provide an empty string on the right side of the statemen and it would block access.

Conclusion

That's a wrap for this part of the tutorial. We have all of the assets in place and the site is showing us the basic pages. Next time, we'll hook in our existing users' system, restrict access to a few pages, setup our models, and more.