 |
|
 |
|
| Franscape
Development Tutorials |
You are currently viewing the Alternating Row Colour tutorial, in the 'PHP' category.
-----------------
In a Franscape tutorial list (say.. in the PHP category list, for instance), one may notice several things:
1) The title, author's username, the date added, and the category for each tutorial is dynamically retrieved from a database. (See: Showing MySQL Data, #106)
2) All of the aforementioned information, for each entry, is enclosed in separate HTML containment tags (in this case, divs).
3) The background colour for said divs alternates between a lighter and a comparatively darker colour.
The colour alternation we observed in #3 is done dynamically, such that, for every row whose count is an even number from the first, the background colour is "value a" and, for the rows whose counts are odd numbers from the first, the background colour is "value b"
Here are the things we need to do:
1) Fetch SQL data in a loop (while, for, or foreach)
2) Define a counter, to be incremented in each loop iteration
3) Define colour values "a" and "b"
4) Strike a comparison between "a" and "b"
5) Enclose our data in a div, styled with our dynamic colour
For the loop, we will use a While statement that is magically similar to that in a previous tutorial ("Showing MySQL Data, #106"), about which we'll make a few variable declarations...
<?PHP
$conn = mysql_connect("localhost","#DATABASE#","#PASSWORD#");
mysql_select_db(#DATABASE#) or die(mysql_error());
$query = mysql_query(SELECT * FROM `#TABLE_NAME#` ORDER BY `Date` DESC LIMIT 25)
if(mysql_error()) {
print(mysql_error());
}
$value_a = "#FFFFFF"; // Colour for "even" rows
$value_b = "#000000"; // Colour for "odd" rows
$num = 0; // Alas, our counter - initialized at 0
while($show = mysql_fetch_array($query))
{
// ## Our dynamic comparison must be made here ##
echo("<div style=\"???;\">
$show[FIELD_NAME1]
</div>");
$num++; // End of iteration, increment counter
}
?>
|
For our "dynamic comparison," we utilize the
mod/modulo/modulus operator: "%"
And, we let our boolean condition statement be:
This checks to see if the count for the current row, $num, is evenly divisible by 2 -- obviously, from simple number theory, this is the case for every other integer.
Our if-statement is as follows:
//Regular
if($num % 2){
$row_colour = $value_a;
}else{
$row_colour = $value_b;
}
//Ternary
$row_colour = ($num % 2) ? $value_a : $value_b;
|
To show this effect on the actual div, we add in the style as follows:
....
<div style=\"background-color:$row_colour;\">
$show[FIELD_NAME1]
</div>
...
|
Here is our final result (both while and for loop examples are included):
<?PHP
$conn = mysql_connect("localhost","#DATABASE#","#PASSWORD#");
mysql_select_db(#DATABASE#) or die(mysql_error());
$query = mysql_query(SELECT * FROM `#TABLE_NAME#` ORDER BY `Date` DESC LIMIT 25)
if(mysql_error()) {
print(mysql_error());
}
$value_a = "#FFFFFF"; // Colour for "even" rows
$value_b = "#000000"; // Colour for "odd" rows
//## BEGIN: While-loop version ###########
$num = 0; // Alas, our counter - initialized at 0
while($show = mysql_fetch_array($query))
{
$row_colour = ($num % 2)? $value_a : $value_b;
echo("<div style=\"background-color:$row_colour;\">
$show[FIELD_NAME1]
</div>");
$num++; // End of iteration, increment counter
}//## END: While loop version ###########
//## BEGIN: Equivalent For-loop version ###########
for($num = 0; $show = mysql_fetch_array($query); $num++){
$row_colour = ($num % 2)? $value_a : $value_b;
echo("<div style=\"background-color:$row_colour;\">
$show[FIELD_NAME1]
</div>");
}//## END: Equivalent For loop version ###########
?>
|
-----------------
· Discuss this and other tutorials on the FS Forums.
· Return to the
PHP tutorial listing.
· Return to the Tutorial Overview.
· Return Home.
|
|
|
|
|
|
|
 |
