Browsing around the other day I came across Komodo Media. Wow. What a stunning site and awesome source of inspiration. Rogie King, maintainer, showcases his talents in a remarkably eye-catching way.
Rogie goes the extra mile by nicely commenting his source code, so aspiring web geeks like me can learn from those who evidently know what they’re doing.
Be sure to play with the foliage-o-meter.
Often when writing something for the web, you’ll need to output data in a table (or, for CSS zealots, nicely formatted <div>’s). In order to improve readability, you might want to colour every second row differently. This is really easy:
$counter = 1; while($counter < 10) { //set bgcolor $bgcol = ($counter % 2 == 1) ? "#ececec" : "#ffffff"; //write the output html echo "<tr><td bgcolor=\"".$bgcol."\">Your content goes here...</td></tr>"; //increment the counter $counter++; }
The above code is merely to illustrate the idea behind alternating rows. I’ve used a very short conditional that checks if the current row is even or odd. Based on that result, it sets the background colour variable to either #ffffff or #ececec. Once the loop has run, the counter is incremented, and we start over.
By the way, the line:
$bgcol = ($counter % 2 == 1) ? "#ececec" : "#ffffff";
is equivalent to using:
if ($counter % 2 == 1) { $bgcol ="#ececec"; } else { $bgcol = "#ffffff"; }
Some extensions to make this code better are things like inserting real data (from a call to a database), replacing the table code with <div>’s, replacing the bgcolour values with a particular style class, and writing to a string/file/etc instead of echoing the results. Another cool thing (if in a user-based environment) is to add a subsequent if statement that checks to see if the row being processed matched the currently logged on user - this way you can show a user that the row in question belongs to them by defining a third bg colour and highlighting it differently to the rest.
A slightly more real-world example of how the code may look is:
$sql = "SELECT id, name, surname FROM person"; $result = mysql_query($sql); $counter = 1; while($row = mysql_fetch_array($result)) { //set class $classname = ($counter % 2 == 1) ? "dark-div" : "light-div"; //write the output html echo " <div class=\"".$classname."\"> <div>". $row['id'] ."</div> <div>". $row['name'] ."</div> <div>". $row['surname'] ."</div> </div>"; //increment the counter $counter++; }
And in next week’s issue, how to assemble a nuclear bomb from ordinary household items! 
Grab your popcorn, coffee, blowup doll, whatever it is that passes time, and settle in for a lengthy post!
Being relatively new to the world of PHP development, as well as the associated technologies (MySQL, CSS, etc), I’m going to ask that you bear with me while I ramble on about things that, for many of you, may seem entirely trivial. My reasoning for doing this is because a) repeating what I’ve learned reinforces the lessons, and b) someone else may find it beneficial. The level of detail and technical jargon I use will vary. Sorry. So, without further ado, here goes…
The application is a platform for users to submit pick up lines (guys) and seduction tips (girls). Users are allowed to vote on content added by the opposite sex (IE, guys may vote for seduction tips, and girls for pick up lines) as well as being able to comment (on either type).
The above requirements are quite straightforward. The implementation thereof, is interesting. While the application is really simple, a lot of users never get to see what’s really going on behind the scenes. Here’s a quick rundown:
The first thing we do is grab the user’s sex from their profile. This allows us to automatically present the correct input forms when they wish to post a pick up line / seduction tip.
When the user submits a pick up line / seduction tip, it needs to be cleaned of any potentially harmful code (like bad JavaScript). This is done by stripping out any illegal characters from their submission.
Once we have the submission, we give it a unique tracking id, so we can find it again later on. We also record the pertinent details such as who made the submission (in this case, the user’s unique Facebook ID), the date and time, and the type of submission (pul/tip). All of this is done behind the scenes, on the fly. This information is then added to our database as a new record.
Having hundreds of lines of content stored in a database is all good and well, but we need a way to display it. For this I wrote a simple function (Yeah Tyler, simple ;-)) which could be called in a number of ways, depending on how we wished to display the content. For example, listing the 10 most recent entries, whether they be pick up lines or seduction tips. Or, more specifically, displaying all the entries of a single user. Or a random selection. Or the 5 most voted (more on voting in a bit!) for pick up lines, tips, or both.
Once the function is called (and provided with its criteria) it will send the data (encapsulated in named <div> tags) back to the calling file, which then applies any CSS styling we need (to make it pretty!) and pushes it to the browser. The data it sends back include:
Users are allowed to vote for content submitted by the opposite sex. They may only vote once per item, but can vote on as many items as they like. A few things need to happen here. When the pick up line / seduction tip is displayed, a voting badge is (think Digg) is attached to it. This badge is generated along with every pul/tip that gets sent back to the browser. Every time a line is displayed, we need to check if a) the current user is allowed to vote for this item (opposite sex?) and b) if they are allowed to vote, have they voted for this item before? If so, we disable voting for that item. If not, we provide a button with will then enable them to vote.
When a user votes for an item, we need to record some more details. We need to know
1 & 2 are important in terms of avoiding duplicate votes in the system.
Once we have a table full of votes, we can use the information to do some form of ranking on our items. A few possibilities include ranking based on:
Quite similar to voting in terms of code and structure, but a bit more simple. Here there are less constraints. A user can comment on any item, and more than once. Here we record the following:
And that’s pretty much it! There are a bunch of other cool bits and pieces, but that would make this an (even more) exceptionally long post.
