Posted 01.26.2011

Posted 01.26.2011

Building a Basic Blog in Code Igniter (Part 2)

Getting the basic pieces set up

It’s been a copule of months since I mentioned starting a project in Code Igniter.. Let’s revisit!

If you’re just now joining us, it’s OK, you haven’t missed much. We’re going to be building out a blog on CodeIgniter (CI).

  1. Part A :: Understanding MVC
  2. Part B :: Getting Started with Code Igniter
  3. Part 1 :: Planning out our project


Getting my site files to work with CI

In Part A, Getting Started with CI We talked about which each directory contains. If you’re still confused on what each folder does, just know, we’ll spending a majority of our time in only 3 folders.

  1. system > application > controllers
  2. system > application > models
  3. system > application > views

In Part 1, we planned out everything, including the design and functionality.

Download my Files
Feel free to download all my files and use them to follow along…just don’t distribute or sell them. If you end up publishing them, an attribution would be nice (aka necessary).

I’m assuming you already uploaded the CI files on your server. Now, copy the css, js, and images folders from my production files and paste them in the code igniter folder. Your structure should look like this:

Code Igniter File Structure


Setting up the views

Right now, think in terms of php includes. We want all the global elements to be in their own file. For example, the footer will appear on all the pages. So, the footer’s code goes in its own file (footer_view.php). All the pages on the site will reference that one footer file. Now, if we have to make any changes, we only have to update the code in one place.

On almost all my sites I have a page header, a page top, and a footer.


The Difference between the page header and page top

I know, the names “page header” and “page top” sound similar. What’s the difference?

Well, the page header contains the HTML header, with the exception of the closing header tag.

The page top contains the top of the page that the user actually sees, including the closing header and the opening body tag.

What’s the point? Why not include that all in one file?

Well, by breaking up the code, if I need to add a custom CSS or JavaScript file to a specific page, it gives me an injection point.

If you’re a visual person, like I am:


Actually doing the work

  • Open index.html
  • Copy all the code from the top of the page to right before the closing head tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd"></p>
<p><html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>AWESOME</title></p>

<pre><code><!-- CSS -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="css/AWESOME.css" type="text/css" media="screen" charset="utf-8">

<!-- JAVASCRIPT -->
<!-- TYPEKIT CODE HERE -->

<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/AWESOME.js" type="text/javascript" charset="utf-8"></script>
</code></pre>

<p></head>
  • Create a new file in the system > view folder. Call it page_header_view.php and paste our code.
  • Go back to index.html and copy all the code from the closing head tag to the comment “Page Content”
</head>
<body id="home"></p>
<div class="container">

    <div class="span-18 append-3 prepend-3 last">
        <div class="span-9">
<h1 id="awesome">AWESOME</h1>
        </div>

        <div id="navigation" class="span-9 last textright">
            <ul>
                <li><a href="index.html">BLOG</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </div>
    </div>
  • Create a new file in the system > view folder. Call it page_top_view.php and paste our code.
  • Go back to index.html and copy all the code beginning with the comment “page content” to the “footer” comment.
<!-- PAGE CONTENT -->
    <div class="span-13 prepend-8 append-3 last">
        <div class="post">
        <div class="date">06.21.2010</div>
<h2 id="write_at_least_5_comments_on_a_5_different_blogs_a_day"><a href="#">Write at least 5 comments on a 5 different blogs a day</a></h2>
        <p><a href="#">5 Comments</a> || Posted in <a href="#">leadership</a> by <a href="#">Darrel</a></p>
        <p>I went and looked at my stats on Friday afternoon. Where am I getting the most hits? From blogs that I had posted comments on. I don’t know why this surprised me. Everything I read about blogging says “to increase your traffic, post meaningful comments on other people’s blogs”. I think I’ll surprise myself, though. If I’m all about “the conversation,” I don’t think it will be as much about sending people to my site, as it will be continuing a conversation on someone else’s site. And that’s OK.</p>
        </div>

        <div class="post">
        <div class="date">06.20.2010</div>
<h2 id="fix_the_holes"><a href="#">Fix the holes</a></h2>
        <p><a href="#">2 Comments</a> || Posted in <a href="#">making money</a> by <a href="#">Rick</a></p>
        < an>p>When I launched my redesign, I knew that there were still holes. I went with the 37 signals method: get something up as soon as possible. Now, I need to go back and tweak, finding the places where the user interface isn’t quite clear, fixing the bugs, and all around, just make things better. Shout out to all who have given me insight. Thanks!</p>
        </div>

        <div class="post">
        <div class="date">06.20.2010</div>
<h2 id="fix_the_holes"><a href="#">Fix the holes</a></h2>
        <p><a href="#">2 Comments</a> || Posted in <a href="#">making money</a> by <a href="#">Rick</a></p>
        <p>When I launched my redesign, I knew that there were still holes. I went with the 37 signals method: get something up as soon as possible. Now, I need to go back and tweak, finding the places where the user interface isn’t quite clear, fixing the bugs, and all around, just make things better. Shout out to all who have given me insight. Thanks!</p>
        </div>
  • Create a new file in the system > view folder. Call it blog_listing_view.php and paste our code.
  • Go back to index.html and copy all the code beginning with the comment, “Footer” to the end.
<!-- FOOTER -->
        <div id="copyright">Copyright &copy; 2010. <a href="http://www.amyhaywood.com">Amy Haywood.</a> All Rights Reserved.</div>
    </div>
</div>
<p></body>
</html>
  • Create a new file in the system > view folder. Call it footer_view.php and paste our code.

Sweet! All our pieces are set up for our index page!