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!

 



Posted 01.03.2011

Posted 01.03.2011

Popping CSS Sprites like Tylenol to Alleviate the Pain

Several weeks ago, I posted a tweet about CSS Sprites. — I thought I’d go into a little more detail than 140 characters.


In layman’s terms, what are CSS Sprites?

Let me give you a metaphor: I have a stack of pictures I want you to look at it. You come to me, I give you 1 picture. You take it, look at it, and then come back to me for the next picture. This is fine. It works. It gets the job done. But, let’s be honest, after the 4th or 5th time, definitely the 23rd time, you’re tired of coming and going.

Enter CSS Sprites.

Instead of giving you one picture each time you came, what if, I just gave you one large sheet that had all the pictures on it. I’m putting the responsibility on you to handle the large sheet and focus on each individual picture as you’re ready for it. A larger sheet, yes, but not as much coming and going.

CSS Sprites = same thing.


The Real World (not MTV)

When you come to my website, instead of giving you 10, 20, 30 little icon images, I’ll give you 1 large image that has all of those icons on it.

You may be surprised to discover, but this is very popular technique that sites like Amazon and Apple and YouTube implement. Check it out:

Amazon

YouTube Sprites

Apple Sprites


Looks funny, right?


Is this really more efficient?

Check out this article: Performance Research: What the 80/20 Rule Tells us about Reducing HTTP Requests. — OK, I know you probably didn’t read all of it. As the title implies, it uses the 80/20 principel to talk about reducing load time. As Yahoo’s UI Blog, they used Yahoo.com as an example. 10% of their time was spent retrieving HTML, the other 90% is spent fetching other components for the page (images, scripts, and stylesheets)!

Granted this post was written in 2006 (CSS Sprites aren’t anything new), but they some ran tests on other popular sites:

  Time Retrieving HTML Time Elsewhere
Yahoo! 10% 90%
Google 25% 75%
MySpace 9% 91%
MSN 5% 95%
ebay 5% 95%
Amazon 38% 62%
YouTube 9% 91%
CNN 15% 85%


So, what does this tell us?

Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.


OK, I’m Convinced, now what?

Well, I’ve been implementing sprites as a large background image.

Demonstration? Yes, please.

Here’s a screenshot of the top right corner of my header.


The Care Ring Header Image I created a background image where all my icons that are stacked neatly.

Here’s the HTML:

<div id="login_buttons"> 
    <a href="#" title="LOGOUT" class="logout">LOGOUT</a> 
    <a href="#" title="SETTINGS" class="settings">SETTINGS</a> 
    <a href="#" title="REPORTS" class="reports">REPORTS</a> 
    <a href="#" title="BUGS" class="bugs">PROBLEMS</a> 
    <a href="#" title="HELP" class="help" >HELP</a> 
</div>

In case you’re wondering, I do have links plugged into the href parameter. I just removed them for demonstration purposes.

Then, in the CSS, I have 7 different classes. 1 main class that defines all the properties, like padding, float, etc (another main class that defines hover) and 5 different classes that define the positioning for each icon.

#login_buttons a                    {float: right; margin-top: 7px 0 0 30px; background: transparent url('../images/icons_in_header.gif') no-repeat; height: 22px; padding: 3px 0 0 27px;}
#login_buttons a.bugs                {background-position: 0 -100px;}
#login_buttons a.help                {background-position: 0 -50px;} 
#login_buttons a.reports            {background-position: 0 -25px;}
#login_buttons a.settings            {background-position: 0 -75px;}
#login_buttons a.logout                {background-position: 0 0;}
#login_buttons a:hover                {color: #628d12; text-decoration: none;} 

Are you following me so far?

Notice the background-position has a negative value. That’s because we’re essentially sliding the background up. Essentially, what we’ve created looks like this:

The grayed out parts of the background image, you can’t see because we’ve set the height to 22 pixels.

Sweet! This works great…until….


My Dilemma

As I pointed out earlier, you can’t see the grayed out parts of the background image because we’ve set the height to 22 pixels. Well, what happens when you have content that needs to be able to grow vertically? If you change height to min-height, you’re able to see the stacked icons. Not what I want!

That’s when I found a fantastic article by Chris Coyier: CSS Sprites with Inline Images.

Chris (yes, we’re on a first name basis) does a fantastic job of explaining everything in his blog post. But, essentially, instead of using a background image on a container, you use the CSS clip property on an image.

Another demonstration?

I was trying to achieve something like this:


With my CSS background technique, I kept running into this:


See how the tags icon keeps appearing. beat my head against the wall

I had to change my code. Here’s my new HTML:

<div class="clip_wrapper left"> 
    <img src="images/icons_inline_content.gif" class="clip clip_teams" /> 
</div>
<div id="team_content"><span id="my_teams_list">
    <a href="#">Congregational Care</a>, 
    <a href="#">20 Somethings</a>, 
    <a href="#">Student Ministry</a>, 
    <a href="#">Kairos</a>, 
    <a href="#">Haywoods</a>, 
</span><span class="small"><a href="#" id="edit_teams">[edit]</a></span>
</div>

In the CSS:

.clip_wrapper                        {position: relative; height: 26px; width: 26px; margin-right: 3px; top: -5px;}
.clip                                {position: absolute; top: 0; left: 0;}
.clip_teams                            {clip:rect(0 26px 26px 0);} 

In order to use CSS clip, the element must have an absolute position

It’s a little more code. It might be edging on divitis, but it gets the job done and achieves the look I want.


Resources

Interested in knowing more? Here are a few sites that I looked at and found helpful: