You may wish to make you display stand out from the rest. A way of doing this, as Eric reports, is to use PHP to alternate the colors for every line of output.
One of those popular ways to display your database queries is with alternating row colors inside of a table. Let's face it, if you are displaying any number of items inside your database, you should be using tables. This allows better formatting and better display of your results. If you would like to spice it up a little you can change the color of every other row inside your table and allow the results to be displayed in a manner which the user can read them easier. In this tutorial I will show you how.
Let's start out with two basic colors for your row. I think I am going to use these colors because they fit the theme of our website. #CCFFCC for my odd number of rows and #BFD8BC for my even number of rows. Now that I have determined what colors I want my rows to be, I will move on.
The first portion of any MySQL query inside PHP you should always put your table headers outside of your array, and then decide which of the table rows(<TR></TR>) and table data (<TD></TD>) you want to be inside the array for the results. Here's the code flow for this tutorial. I will break it down on the next page.
// Begin your table outside of the array
echo "<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td width="110"><b>Event Date</b></td>
<td><b> Event Title</b></td>
</tr>";
// Define your colors for the alternating rows
$color1 = "#CCFFCC";
$color2 = "#BFD8BC";
$row_count = 0;
// Perform an statndard SQL query:
$sql_events = mysql_query("SELECT date_format(event_date, '%M %d, %Y') as event_date,
event_title FROM my_events ORDER BY event_date ASC") or die (mysql_error());
// We are going to use the "$row" method for this query. This is just my preference.
while ($row = mysql_fetch_array($sql_events)) {
$event_date = $row["event_date"];
$event_title = $row["event_title"];
/* Now we do this small line which is basically going to tell
PHP to alternate the colors between the two colors we defined above. */
$row_color = ($row_count % 2) ? $color1 : $color2;
// Echo your table row and table data that you want to be looped over and over here.
echo "<tr>
<td width="110" bgcolor="$row_color" nowrap>
$article_date</td>
<td bgcolor="$row_color">
<a href="articles.php?cmd=full_article&article_id=$article_id">$article_title</a></td>
</tr>";
// Add 1 to the row count
$row_count++;
}
// Close out your table.
echo "</table>";
Ok, let's break this down.
Code Breakdown
Let's define what we have done here to give you a better understanding.
Start the Table
// Begin your table outside of the array
echo "<table width="100%" border="0"
cellpadding="4" cellspacing="0"><tr>
<td width="110"><b>Event Date</b></td>
<td><b>Event Title</b></td></tr>";
I mentioned above that you want to start your table outside of the loop or array that you are going to display your data. The reason for this, as any experienced PHP developer may know, is so you can loop the rows and not the tables. Either way is fine, but for the course of this tutorial and my own coding methods, I use this way of doing things. This particular table will look something like below. I put a border size of 1 on my table just to show you in my example the borders. In my code I do not use borders unless absolutely necessary.
Event Date Event Title
Define The Color Variables
// Define your colors for the alternating rows
$color1 = "#CCFFCC";
$color2 = "#BFD8BC";
$row_count = 0;
This is pretty straight forward. We are defining the colors that we decided to use and then setting the initial $row_count variable to 0. Later on we will add 1 to the row_count for every number of rows we find in the database.
Do the MySQL Query
// Perform an statndard SQL query:
$sql_events = mysql_query("SELECT date_format(event_date, '%M %d, %Y') as event_date,
event_title FROM my_events ORDER BY event_date ASC") or die (mysql_error());
We won't teach you how to do an SQL query in this tutorial. You should already know how to do that if are trying to alternate your rows. However, in this SQL statement, we are pulling from two coloumns in our table. event_date and event_title for each of the events in our database will be displayed in our table rows below.
Use the SQL Query
// We are going to use the "$row" method for this query. This is just my preference.
while ($row = mysql_fetch_array($sql_events)) {
$event_date = $row["event_date"];
$event_title = $row["event_title"];
There are quite a few ways that you can use the $sql_events variable we defined in the previous step. For this tutorial and my methods of coding, I use this one here. All we are doing is fetching an array from the $sql_events and defining the results as variables to be used later.
Equation
$row_color = ($row_count % 2) ? $color1 : $color2;
In order for this to work properly, we must perform this small equation which is going to decide which color to use in which row of our table. I am almost positive if you add another color varialbe like "$color3" above and you change the $row_count % 2 to $row_count % 3 and then add your third color variable here that you can get 3 colors of alternating rows. I have not tested that yet, so if it works, let me know!
Define Your Rows
// Echo your table row and table data that you want to be looped over and over here.
echo "<tr>
<td width="110" bgcolor="$row_color" nowrap>
$article_date</td>
<td bgcolor="$row_color"><a href="articles.php?cmd=full_article&article_id=$article_id">$article_title</a></td>
</tr>";
Here you are going to define your rows and table data. Take special note that I have defined the td bgcolor to $row_color. This is required, or this whole thing will not work!
Add 1 to the Count!
// Add 1 to the row count
$row_count++;
To get your rows to alternate color, you must add 1 to the count. This is the same as saying $row_count +1;
Close out the Table!
}
// Close out your table.
echo "</table>";
You must end your array with } and then close out the table html tag. That's it you're done!
Let's see the results
The Results
Ok, we've done all of this code and hopefully when we run this script it will work. If you have everything setup correctly, you should be in there. Here's the results that I got from my database query:
| Event Date | Event Title |
| May 18, 2002 | Town Festival |
| March 05, 2002 | Air Show |
| March 04, 2002 | River Cruise |
| March 03, 2002 | City Parade |
That's about it! Now hopefully you should be able to write your own code using alternating row colors!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
More PHP Articles
More By Eric 'phpfreak' Rosebrock
 developerWorks - FREE Tools!
|
Join this webcast, to learn how the Rational Process Library can help with compliance issues, drive process improvement, and assist in service-oriented architecture (SOA) or Agile development. We will take a peek into the Rational Process Library with content around software and systems engineering (including RUP), operations and systems management, program and portfolio management, and asset and SOA governance.
FREE! Go There Now!
|
|
|
|
Attend this launch webcast with Scott Hebner, Vice President of IBM Rational Marketing and Strategy, for an overview of Rational’s new software offerings and resources to help modernize and accelerate software innovation on i on Power Systems – while ensuring past application investments are protected and continue to grow. Learn how these solutions are helping customers extend their core i5/OS solutions toward modern architectures such as SOA and web technologies to deliver business improvements that stand the test of time.
FREE! Go There Now!
|
|
|
|
Visit IBM developerWorks to download a free trial of the latest release of IBM Lotus Sametime Standard V8.0. Lotus Sametime Standard V8.0 is a platform for unified communications and collaboration that combines security features with an extensible, open solution including integrated Voice over IP, geographic location awareness, mobile clients, and a robust Business Partner community offering telephony and video integration.
FREE! Go There Now!
|
|
|
|
Learn from the best! Find out how developers use Rational ClearCase to be more flexible, innovative and deliver higher quality code in the Rational ClearCase Power Users eKit. This complimentary eKit provides a collection of materials, like articles, whitepapers, and demos that can help you become a power user of Rational ClearCase.
FREE! Go There Now!
|
|
|
|
Rational Build Forge Express Edition is an automation framework that packages the latest enterprise-grade technologies into a reliable, flexible and robust configuration designed and priced specifically for small to midsize businesses. The new Rational Build Forge Express eKit provides you with valuable resources – including a case study, podcast, demo, and articles – to help you increase staff productivity, compress development cycles and deliver better software, fast.
FREE! Go There Now!
|
|
|
|
Rational Modeling Extension for Microsoft .NET enhances usability for code generation supporting a more intelligent refactoring. The latest enhancements enable organizations with Java and .NET systems and software development maintain architectural integrity across heterogeneous platforms.
FREE! Go There Now!
|
|
|
|
Join this webcast to discover the key requirements for successful change and release management. Learn how to extend your .NET environment to improve productivity and collaboration, and address core problems afflicting team development. In this webcast, we’ll review typical challenges faced by customers and how to resolve them with the IBM Rational Change and Release Management solution, including Rational ClearCase, Rational ClearQuest and Rational Build Forge. Replay is available for 9 months.
FREE! Go There Now!
|
|
|
|
As organizations have grown increasingly dependent on online software, the risk of malicious attacks has also become far more serious. Fortunately, well-governed organizations can protect their Web applications by injecting vulnerability assessments and ethical hacks into their software development and delivery processes. This paper describes 12 of the most common hacker attacks and provides basic rules that you can follow to help create more hack-resistant Web applications.
FREE! Go There Now!
|
|
|
|
Visit IBM developerWorks to try the IBM SOA Sandbox for process. The SOA Sandbox for process focuses on providing a trial environment with the necessary tooling and components required to gain a better understanding of business processes and how to best improve existing business processes to derive value quickly.
FREE! Go There Now!
|
|
|
|
With IBM Rational Systems Development Solution, you can deliver products faster with higher quality. Within this kit, Read the “Model Driven Systems Development” white paper to see how to improve product quality and communication. Then check out the rest of the e-Kit to learn more about important topics that can affect the success of any software project through customer examples, tutorials, informative Webcasts, and best practices for designing, building and managing systems. From start to finish, at every stage in your projects, Rational Systems Development Solution can help your company reach its full potential.
FREE! Go There Now!
|
|
|
|
All FREE IBM® developerWorks Tools!
|
