 |
Now that you’ve got yourself a snazzy new mySQL back-ended page you might want
to spruce it up a little with alternating row colors. This is fair enough, as
they
definitely make tables look a lot more interesting provided the colours work
well with each other, but since I’m not here to explain colour relationships I’ll
just use a series of different greys throughout my example code. This tutorial is not made
for the average novice, and is probably placed closer to intermediate skill
capability if you want to explore more advanced colour combinations. Just
bear with me, though, and I will explain everything...
The Logic of Alternating Colors
For the rest of this tutorial we will assume that you already have
a mySQL query named $query and a while/mysql_fetch_array named $row.
Given these assumptions, the following process must be followed to output a
correctly-formatted table:
-
Create the table.
-
Execute the query.
- Include a row for each record, using a function to select it’s appropriate
cell background.
- Finish the query.
- Finish the table.
Yes, it’s as easy as that! The hardest part is assigning a cell
a value according to its position in the table. In this example we will use 3 cell colours:
#CCCCCC, #B9B9B9 and#7F7F7F, all being different shades of
grey.
Cell values can be alternated with the use of a function, making the whole
process automated. Here's an example of a suitable function, with a variable named
$count passed into
it every time.
<?
function processRow($count)
{
switch($count){
case 1:
$color = “#CCCCCC”;
break;
case 2:
$color = “#B9B9B9”;
break;
case 3:
$color = “#7F7F7F”;
break;
default:
$color = “#FFFFFF”;
}
return $color;
}
?> |
Note: When adding cases to a switch command, do
not add any values below the default CASE. The individually-defined CASE
statements themselves do not have to be in any particular order, but make
sure that you don't have any duplicates or things will go horridly wrong.
And always add the break line at the end of your CASE statements (except for
the default CASE, which doesn’t need it).
Ok, that’s the hard part out of the way (not too difficult was it?). Our
function takes in a variable called $count and processes 4 different
statements. If $count is equal to 1, it sets our variable $color
to the lightest grey, if it has a value of 2, it sets $color to a middle grey
and if its 3 it sets it to a dark grey. The final part of this switch()
statement acts as an exception, and allocates a white value to $color if
the value of $count does not match any of the hard-coded CASE values.
The $color variable is then passed back out into our main script.
For the sake of simplicity you should pop this function in a file named
config.php, which will also contain all the mySQL connectivity and session
starting functions that are necessary with all my tutorials.
A Colour Alternation Script
Now let’s write the main page. As described earlier, we need to start the
table, fire off a query, display all the rows, then close the query and close
the table. Nice and simple! Here's how I did it:
<?
include ‘config.php’;
//first step: start the table
echo ‘<table width="400" border="0" cellspacing="0" cellpadding="0">’;
//second step: start the query
$query = mysql_query(“SELECT OurColumn FROM OurTable”) or
die(mysql_error());
while ($row=mysql_fetch_array($query)){
//now we’re inside the main processing loop, third step: display
all the rows
$count = $count + 1;
// this is setting the variable that we will pass into processRow
so that it can determine between each row and assign each a
different colour, until it gets to 3, when it’s set to 1 again.
echo ‘
<tr>
<td bgcolor="’.echo processRow($count).’">’.$row[‘OurColumn’].’</td>
</tr>
’;
if($count == 3){
$count = 0;
}
// restarting the colour loop again, you can remove the above if
statement if you want to have all of the rows below the 3 grey ones
just plain white.
// fourth step: close the query
}
// fifth and final step: close the table
echo ‘</table>’;
?> |
That wasn’t too difficult to understand, was it? You’ve just successfully
written a small script to alternate row colours between different rows. There
are, however, two logical routes to this script: In the first case, the row
colours will loop through from light grey to darkish grey to darkest grey then
repeat the cycle. You can, however, set the script up to display rows of
the light, darkish, and dark grey and then set all remaining rows to white. If
you want this second option, just remove the last if statement from the example
script above, because this is the part which restarts the colour loops and keeps
them alternating. The colours themselves can easily be modified by
changing the hex codes in the our function processRow. The amount of
colours can easily be modified too by simply defining new CASES and then
changing the last IF statement on the main page to the new number of different
colours in your set.
Of course, the table in our example was just for illustration purposes, and
there is nothing stopping you from adding more columns into your table using the
appropriate methods. There may be an issue with the way in which the
function passes the data back to the main script to be used, but if you can't
sort this out yourself and/or have any other problems with this tutorial please
don’t hesitate to contact me via the BioRUST Creative Forums, or click my name
below and click Private Message. You may have to register.
- Tutorial written by Scrowler
| |
TUTORIALS SUBMENU ---->
