Next quarter will be more about specific techniques (javascript, for example), but so far this quarter is focused on things like the Software Development Life Cycle, Requirements and Use Case gathering, object oriented analysis and design, etc.

Someone wise once said that any newcomer into any field or discipline will always want to learn the fancy tricks and techniques first, when what they really need to start with are the fundamentals. So, here’s to fundamentals.

1) I’m learning object-oriented design, design patterns, object-oriented PHP, and object-oriented JavaScript right now. I wanted to do some experimenting with building systems using these concepts, so I came up with the idea of doing a series of “Web Experiments” where I take an idea for some kind of web application and make a demo of it, for fun and learning.

2) I think ajax is the future of the web. Somebody somewhere wrote “full page refreshes are so last year”, or something to that effect. I sometimes find myself clicking a link or a tab somewhere out there on the web, mentally crossing my fingers in hopes that it won’t send me to a new page. I think more and more people are going to expect slicker interfaces in web sites and web applications, and ajax is the way to get that accomplished.

3) I really like the comment/reply interface on Facebook. There’s a series of boxes, each with a comment, and the last box is minimized and says “Write a comment…”. When you click on it, it expands to look exactly like the other comments, with your picture there, just like it will look once it’s posted. You type your brilliant quip, and when you click the button, the comment “melts” right into the page, and the next would-be comment appears below.. I think it’s lovely.

With these three things in mind, I started building my own little “comment thread” app.

Features:

• Add, edit, and remove comments from the “thread”.
• No page refreshes – all done with ajax (jQuery)
• Comments are stored in a tab-separated text file.
• Shift-enter for a line break within a comment.

I’ve also built a class structure that I believe will help me expand the project going forward.  The planned additions/expansions are:

• MySQL Database support (will be able to switch between text file and MySQL with a single setting)
• Rewrite the JavaScript without using jQuery just for fun and practice, and to prove that I can.
• Multiple “threads” of comments
• Only load the latest 10 comments or so, and load more twitter-style.
• More to each message, like time/date of post, “last edited at…”, etc.
• Maybe a simple user system. I loathe to make people “sign up” for things though.

If you’re interested, you can download the files here.

I chose PHP Solutions: Dynamic Web Design Made Easy because I wanted to have some real-world projects to play with as I learned the language, as opposed to just the dry information.  The book delivered in that respect.  As per the name, the book focuses on specific needs and solutions for those needs using PHP and MySQL.  I got to see how PHP works with forms and databases, and how these techniques could be applied in a simple database-driven blog, for example.

However, probably the most useful part of the book for me were the tutorials on getting the Apache server, PHP and MySQL running on my local machine so that I could just jump into a code editor and start playing around.  I actually ended up skipping to these two chapters (one for Apache/PHP and one for MySQL) and then put the book down for a month or so before I picked it back up and finished reading it.

I started out by following along with the solutions and the code samples, typing them in and trying it out as I was reading, but soon realized that this was unnecessary.  I finished reading the better part of the book by simply reading and understand the code examples.  Whether this is a good thing or bad is up for debate.  It means the writing was clear, but also that the content was less challenging.

Besides the setup chapters mentioned above, the other most useful takeaway I had from this book was all the little things about the language that I mentioned above.  Things like “the truth according to PHP” (”false” evaluates to true because of type coercion), how the $_POST and $_GET superglobal arrays work, and other little things that really help put it all together in my head.

Another very useful aspect to the way the solutions in the book are constructed is the focus on security and thoroughness.  Some books leave out details, only hinting at it with phrases like “in a real application, we’d check this or that”, but in this book we are treated to some very useful (and usually very simple) techniques to make sure the code we’re building is secure and bulletproof.

All in all, I’m glad I now have the information I gained from this book, but I’m not sure it was exactly what I was looking for.  As with other introductory-level books, I found myself a bit annoyed by the “if that last part made your head explode, don’t worry, just copy the code and know that it works” -type attitude.  My head didn’t explode – on the contrary, that was one part where my brain actually felt that tingle of a concept falling into place.  Most of the book was spent thinking to myself, “yeah, I get it.  OK.  What’s next?”  I think I would recommend this book to others, but only if you’re newer to programming in general, and have very little or no PHP experience.  For me, with quite a bit of general programming, and some hands-on PHP experience from working with WordPress themes, it just felt a little bit too slow, but it did fill in some crucial gaps in my knowledge.

Adding a “Priority” Custom Field

The first step was to add a custom field called “priority”, which would act as the tie-breaker.  Basically, if two posts have the same star rating, we’ll check the priority and see which one is higher, and that one will be displayed first.  I was using the Flutter plugin, so adding another custom field was as simple as clicking a few buttons in the admin panel.

Custom Query

Sorting by a single field is relatively easy.  You would create a custom query for the posts by using something like this (to sort alphabetically):

query_posts("orderby=title&order=ASC");

Using Flutter’s syntax for sorting by its custom fields, we’d use:

query_posts("customorderby=x_stars-overall-rating&order=DESC");

Refining the Order with usort()

But you can’t sort by more than one field using the above methods.  That’s where usort comes in.  PHP has a function called usort() which sorts an array based on a custom function which “compares” the two array items in any way you like.  So all we need to do is run our array of posts through a function which does the more complex comparison using both the “stars” field and then the “priority” field for tie-breakers.

First, we insert this in the category listing page (or whichever page you’re working on) to run the custom sort function:

usort($wp_query->posts, 'review_tie_breaker');

The first argument in the function is the array of posts created by the default query in WordPress.  The second argument is the name of our custom sort function, which is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function review_tie_breaker($a, $b) {
   // get the star value for each 
   $a_stars = get_post_meta($a->ID, 'stars-overall-rating', true);
   $b_stars = get_post_meta($b->ID, 'stars-overall-rating', true);
   // if it's not a tie, return which has more stars
   if ($a_stars != $b_stars) {
      return ((float)$a_stars > (float)$b_stars) ? -1 : 1;
   }
   // else, if they are tied, go to the priority tiebreaker...
 
   // get the priority value for each
   $a_priority = get_post_meta($a->ID, 'rating-priority', true);
   $b_priority = get_post_meta($b->ID, 'rating-priority', true);
 
   // if a priority value has not been entered, default to 0
   $a_priority = ($a_priority == '') ? 0 : (int)$a_priority;
   $b_priority = ($b_priority == '') ? 0 : (int)$b_priority;
 
   // if the priority is also equal, just return as a tie
   if ($a_priority == $b_priority) {
      return 0;
   }
   // if not, we return the priority comparison
   return ($a_priority < $b_priority) ? -1 : 1;
}

How the Tie-Breaker Function Works

The way the custom sort function works is by comparing two elements of the array ($a and $b, above), and deciding which one is “greater than” the other.  If $a is greater than $b, we should return a value of 1.  If the opposite is true, we return -1.  If they are tied, we return 0.  The above function uses ternary operators to compare first the star ratings and then the priority values.  If the stars are not tied, it just returns which has the higher star rating, and never gets to the tie-breaker phase.  But if they are equal, we then compare the second criteria.

There is also a check to make sure the “priority” field has a value.  This is so that the user is not forced to input a value for every single review, just the ones that need to be tweaked.  Using this system, all that is required to bump a review up above another review with an equal star-rating is to insert a “-1″ in the priority box.

I used this for a star rating system, but it could be used for any number of applications.  For example, if you wanted to order your posts by author, but for each author make sure they are in chronological order.

The Problem

There’s no reason to re-invent the wheel, and there are already several tabs implementations written as jQuery plugins, including the jQuery UI tabs widget. The problem with these is that most (if not all) of them require the markup to be set up in a different way than we have available with our WordPress-outputted sidebar markup.

To illustrate, WordPress by default outputs the sidebar with markup that is structured something like this:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="sidebar-1">
  <ul class="sidebar-list">
    <li id="widget-1" class="widget widget-class-1">
      <h2>Widget 1 Title</h2>
      <p>...content...</p>
    </li>
    <li id="widget-2" class="widget widget-class-2">
      <h2>Widget 2 Title</h2>
      <p>...content2...</p>
    </li>
  </ul>
</div>

The various jQuery tabs plugins all require the markup to be strutured like this (notice the titles moved to the additional list at the top, with anchor tags corresponding to the ids of the respective widgets:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="sidebar-1">
  <ul>
    <li><a href="#widget-1">Widget 1 Title</a></li>
    <li><a href="#widget-2">Widget 2 Title</a></li>
  </ul>
  <ul class="sidebar-list">
    <li id="widget-1" class="widget widget-class-1">
      <p>...content...</p>
    </li>
    <li id="widget-2" class="widget widget-class-2">
      <p>...content2...</p>
    </li>
  </ul>
</div>

The Solution

While it would be possible to alter the PHP code to output the list above the widgets (although, I looked into this solution and was not able to find a hook that would allow it without altering the core), we can just use some custom jQuery to dynamically add the list before invoking the tabs plugin.  This method also has the advantage that it makes our tabs more unobtrusive.  If javascript is disabled, the page will look exactly as it would with the standard sidebar widgets, but if javascript is available, we’ll fix the markup and add the tabs all at once with our jQuery code.

The Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$(document).ready(function() {
   // first, we select the sidebar
   $('#sidebar-1 .sidebar-list').each(function() {
      // each child of the sidebar element will be a widget, and will become a tab
      var widgets = $(this).children();
 
      // we'll build the list of titles, starting with the opening tag
      var titleList = '<ul>';
 
      //for each widget in the sidebar:
      widgets.each(function() {
 
         // save the title of the widget
         var widgetTitle = $(this).children('h2').text();
         // then hide it since it will be displayed in the tab
         $(this).children('h2').hide();
 
         // create a new list item for the tab, linking to this widget's id
         var listItem = '<li><a href="#'+$(this).attr('id')+'">'+widgetTitle+'</a></li>';
         // add the list item to the list we're building
         titleList += listItem;
      });
      // close the list now that we're done going through each widget
      titleList += '</ul>';
 
      // add the title list to the beginning of the sidebar
      $(this).before(titleList);
   });
 
   // apply the tabs plugin
   $('#sidebar-1').tabs();
});

Explanation

The comments in the code should make the solution pretty self-explanatory.  This will take all the widgets in the selected sidebar and create tabs for them.

There are some things you’ll have to be careful about if you use this code.  First, you’ll have to change the selection for the sidebar div (line 3 above, as well as in the second-to-last line) to match yours.  This assumes you have your sidebar list wrapped in a div (required by the tabs plugin), so if you don’t, you will need to add that, either in the theme itself or with jQuery( using .wrap() ). Also, in the two places you see ‘h2′, this is assuming that the titles of the widgets are in <h2> tags.  You may need to select a different tag if your theme displays the widget titles differently.

Also note that this will create tabs for all the widgets in the sidebar.  Making it only apply to specific widgets is possible, but a bit more complicated.  Luckily, with WordPress 2.8, the sidebars/widgets interface is much improved.  One solution would be to create multiple ’sidebars’ that stacked on top of each other in the sidebar area of your theme, and apply the above tab-ifying code to one or more of them individually.

I did find this book interesting and informative as well, but I say that with caveats, which I’ll explain.

First, I’m not sure that I was exactly the intended audience for the book.  I am pretty well-versed in programming concepts in general, and what I was looking for was an introduction to the language of javascript and when and how to use it effectively in my web sites.  In contrast, this book seemed to be geared a little more towards pure designers who are scared of programming. A few times during my reading I had to roll my eyes at another “If this is making your head hurt, just type it in and know that it works.”  Personally, I want to know how everything works and I’m not interested in blindly typing in code to “make it work.”  I can do that by searching google and cutting and pasting.  I bought a book because I wanted to get deep, to learn the ins and outs of how it all works behind the scenes.  I wanted a book because I’m on my way to becoming a full-on pro, and this book at times seemed more geared towards hobbyists, or designers who just wanted to dip their toes into javascript.

Second, this is really a book on jQuery.  I don’t have a problem with that, but it needs to be said.  The first section of the book goes over the syntax of plain old javascript, including function declarations, string manipulation with built-in functions and regular expressions, math functions and operators, variable typing, etc.  Then the author quickly moves on to the use of libraries to speed development, and specifically to jQuery.  I’ll say here that I have very ambiguous feelings regarding the need to learn the “hard way” of doing things when using a library to do it for you will normally suffice.  That’s a debate in itself, and I don’t want to get into all the pros and cons, but again, it should be said that you won’t be learning the traditional way of working with the DOM here, you’ll be learning to use jQuery selectors.

Now for the good parts.  Like the CSS book in the series, I found the information to be explained in a very readable and understandable tone.  The book is well-paced — several times I would have an “aha – that’s cool how that works!” moment, followed by a “but wait, what if you wanted to do it this way?”, and without fail the next paragraph would address my question.  Sometimes it would answer right there, and sometimes it would say “we’ll show you how to do this with more flexibility in the next section…” so I’d know it was coming.  This ability to anticipate the reader’s thinking is probably the best part of these books.

Also, the tutorials were again very helpful and well laid-out.  Another thing I’d like to point out is that the tutorials are not just re-hashes of the information in the preceding chapter.  There is additional learning value in the tutorials that build on what you learn by reading the chapter.  So you get the explanations of how things are designed to work, and then you get to play with a real-world example and the book shows you how to solve the additional problems that inevitably come up.  Code examples are thoroughly explained (sometimes too thoroughly — I found myself skipping sections saying to myself, “yeah, I get it already” — but that’s definitely better than the opposite).

After going through all the basic functionality of jQuery itself, the book unfortunately devolves into several chapters showing how to use specific jQuery plugins for specific purposes: image gallery, slideshow, tabs, etc.  While these are certainly useful, no additional concepts or ideas were presented, just lists of the specific variables and possible values for customizing the plugins.  This part of the book seemed like fluff to me and could have been condensed into a few short pages of charts.  It’s not that the information wasn’t useful, just that after learning so many interesting and, to me, revolutionary concepts, reading paragraphs about using “slow” if you want it to move slow, and “fast” if you want it to move fast seemed like a step backwards.

The last section of the book is dedicated to AJAX.  Here the quality of information improves again, but again with caveats.  You won’t learn the details of setting up the XMLHTTPRequest object, but you’ll learn what is and then how jQuery saves you the trouble of knowing.

In one way this final section about AJAX serves as a microcosm to the whole book.  It’s a great introduction, it gets you familiar with the general concepts and shows you how to get started right away, but it left me hungry for more, deeper knowledge.  And perhaps that’s the way it should be.

I also upgraded to the latest Pods release (1.6.5), which will allow some nifty behind-the-scenes magic to happen.

That’s all.  Carry on.

Javascript

Javascript is a programming language.  It comes standard with most modern web browsers.  It is also the same language that is used in Flash (where it’s called ActionScript), and can be used to write scripts in Photoshop, Illustrator, etc.  In the context of a web browser, it is often used to manipulate the DOM (see below).

jQuery

jQuery is a Javascript library, meaning that it is essentially a collection of functions written in Javascript that can be used to make the programmer’s job easier.  Common tasks that take more lines of code with traditional Javascript can be executed with calls to the jQuery functions.  There are several other Javascript libraries out there that fill the same need.  For one reason or another, jQuery seems to be the most popular library of the day.

The DOM

The Document Object Model (DOM), is just that – a model for representing and interacting with an XML, XHTML, or HTML document.  Our HTML documents are created by typing tags in plain text, and the DOM is a way to access the tags and the structure of the “tag tree”.  For example, instead of using regular expressions to find the text that represents a tag with a specific ID attribute, we can ask the DOM which of its tags has that ID.  Javascript is not part of the DOM or vice-versa, but Javascript in the browser does include some intelligence about the DOM – for example, the getElementById() function.  One of the main advantages of jQuery is the extra intelligence it has regarding the DOM.  With it, you access and create DOM elements (tags) by using the many selectors and traversing operations it offers.

A while back I bought a way-more-wattage-than-I-need uninterruptible power supply. It’s a big box (almost the size of my desktop computer) with fancy lights and readouts that regulates the electricity coming out of it and into my computer, like a surge protector on steroids. More importantly, it stores the electricity and can keep my computer running when the power goes out.

I actually got it for the first purpose above (the building I live in is very old, and I was getting power surges even when I was behind a surge protector), but the second came in very handy yesterday. There was a thunderstorm here in Denver, and I found it a bit surreal when all of a sudden I heard the familiar click and the power was out, I was sitting in the pitch dark, but I was still looking at a bright screen on my laptop running Photoshop.

I couldn’t help but grin.  Neither rain nor sleet nor power outtages will keep me from my work.

I’m going to show you how (and why) I did NOT use that feature to create my customized home page.

Here’s what I wanted:

1. A unique page for the home page, including a few of the latest posts (displayed differently than on the main blog page)
2. The main blog page to be located at “url.com/blog”, showing the default latest posts (assuming permalinks are turned on)
3. All other dynamic archive pages shown by month, tag, category, etc., should be shown using the same template as the main blog page, without creating any duplicate files

Here’s how I did it:

home.php

Instead of using the admin interface to designate a specific file for your home page, you can use WordPress’s built-in template hierarchy.  This method has the advantage that if you’re building this theme for the public, it will automatically behave how you want it to, instead of having to instruct the user to alter their settings.

To do this simply design your home page’s php/html/css, and name it home.php.  That’s it –  “home.php” takes precedence over “index.php”.

Custom loop

WordPress shows blog posts in what they call “The Loop”.  The Loop works by doing the following:

1. The query — gets a set of posts based on what page we’re viewing.  Usually this is automatic, using the URL (e.g. “?p=138″ or “/category/news”).
2. “if(have_posts()):” — just like it looks, it makes sure the query got at least one post.
3. “while(have_posts()):” — keep doing the loop until we don’t have any more posts.
4. “the_post();” — this basically “loads up” the current post in the loop so that all the template tags associated with the post will reference this specific post from this specific query.
5. Then comes the markup output for each post.
6. “endwhile; endif;” — the end of the loop.

So, in order to customize the Loop, there are two main things we can do.  One is to make a unique query, and the other is to create a unique layout structure inside the loop.

For my home page, I wanted only the 2 most recent posts rather than the number set in the admin panel that would be used for the main blog page.  I added a simple counter and put this code in the appropriate spot in home.php:

1
2
3
4
5

$i = 0;
if(have_posts()) : while(have_posts() && $i<2) : the_post();
   // html output, template tags, etc go here
   $i++;
endwhile; endif;

index.php

In the aforementioned template hierarchy, index.php is the default template for all blog pages, and in the absence of home.php it would be the home page as well.  So I used index.php to put my main, default loop.  But how do we get index.php to show up at “url.com/blog”?

This is the part that I have never seen anywhere else, and what prompted me to write this post.  What I did was use index.php for its special status in the template hierarchy, and ALSO used the same file as a Page Template.  To use index.php as a template, just add the magic keyword/comment at the top, like this:

1
2
3

<?php /*
Template Name: blog
 */

Now, create a blank Page in the admin panel titled Blog, and assign the ‘blog’ page template to it.  The title will still be used to display the title on the page, and assigning the ‘blog’ template to it makes it use index.php as the page template.

Custom query

So now the url for the blog is right, but it’s displaying the blank page created in the admin instead of the default loop of latest blog posts.  To remedy that, we put a conditional test at the top, and if this is the blog page, we “reset” the query so that it contains all the posts.

1
2
3

if(is_page('blog')) {
   query_posts("");
}

The “query_posts” function creates the query, as mentioned above.  Passing an empty string as the argument makes sure we get all the posts.  We put this above the start of the Loop, to override the automatic query that is just returning the one ‘post’, in this case being the blank Blog page.

Fixing the pagination

There’s one other quirky problem we have to deal with now.  The flaw is in the empty query.  It works, but when you get to multiple pages worth of posts, the paging will not work right.  When we click the “next page” or “page 2″ link, the page number we’re going gets passed to the database as part of the query.  When we override the query with a blank one, we also override the page information, so we always end up on page 1.  To fix this, we have to find add a little test to find out the proper page, and add that in to our custom query.  After adding the paging fix, our custom query looks like this:

1
2
3
4
5
6

if(is_page('blog')) {
   if (get_query_var('paged'))
      $paged = get_query_var('paged');
   else $paged = 1;
   query_posts("paged=$paged");
}

“get_query_var(’paged’)” gets the paging information from the original query that we’re about to override.  If it’s there, we use it, and if not, we assume we’re on page one.  Now you can write a spiffy Loop below this and it will be used for all blog post listings, including the default one at “/blog”

I hope this was helpful to someone!