Continuing the Layout - Page 13
January 12, 2001
The $stores array will store all the shops that
match our query. As we loop through each of the rows, we add the
current shop to the end of the $stores array.
$stores = array();
while ($mallRow = mysql_fetch_array($mallResult)) {
$stores[count($stores)] = $mallRow[0];
}
Once done looping through our rows we can free the memory
associated with the result. We now have almost everything that we
need to build the img tag that we'll use to display
the mall. Our shops are currently stored in the
$stores array, but we actually need them in a comma-
separated list. We therefore use implode() to join
all the elements in our array into a single string, separated by
the specified delimiter ','. We also use
urlencode() to URL encode $show, so as
to escape the commas.
mysql_free_result($mallResult);
$show = implode(",",$stores);
echo "<IMG SRC=\"showmall.php?show="
.urlencode($show)."\">";
[Lines 3 and 4 above are one line. They have been split for
formatting purposes.]
If we haven't found any records, then we let the user know:
} else {
echo "no shops found";
}
}
?>
When we searched on "shoes" earlier we were returned the two
shops that had the word "shoes" in the keyword field: "Fashion
Warehouse" and "Well Heeled" — shops 3 and 11. If we look at
the source of mall.php after it has been processed the following is the
img tag in the page:
<IMG SRC="showmall.php?show=3%2C11"">
In showmall.php we first test to see that the
$show variable contains something that we can
use.
Header("Content-type: image/png");
if ($show!="") {
We then create the image in memory from the existing
groundfloor.jpg. Because we want to start our image from an
already existing image, we use the
ImageCreateFromPNG() function to create the image
canvas. This function reads an image file off disk and uses that
image file as the basis for our image canvas in memory:
$image = ImageCreateFromPNG("groundfloor.jpg");
We then create an array called $shops by splitting
up $show by commas using the explode()
function. We also need to URL decode $show to
unescape the commas. We then loop through the $shops
array, and for each element in the array, perform a SQL query to
grab the center point of the shop, and fill the appropriate area
with a new color to highlight it.
$shops = explode(",", urldecode($show));
$link_id = db_connect('mapping');
$gray = ImageColorAllocate($image, 204, 204, 204);
for ($x=0; $x<count($shops); $x++) {
$query = "SELECT m_center FROM mall
WHERE m_id=".$shops[$x];
$mallResult = mysql_query($query, $link_id);
$mallRow = mysql_fetch_array($mallResult);
[Lines 5 and 6 above are one line. They have been split for
formatting purposes.]
Once we have our array in $mallRow we can use the
explode() function again to split up the x and y
coordinates from our m_center field. We then use the
ImageFill() function to fill each shop area with the
light gray color that we allocated earlier. The
ImageFill() function takes the following syntax:
ImageFill(image identifier, x, y, color identifier);
and flood-fills your image outwards from the coordinates you
specify. It only affects pixels that are exactly the same color
as the specified origin. If the pixel at position (x,
y) was white (as it will be in our image) it fills in all
white pixels surrounding that point.
$center = explode(",", $mallRow[0]);
ImageFill($image, $center[0],
$center[1], $gray);
}
[Lines 2 and 3 above are one line. They have been split for
formatting purposes.]
If $show is empty, we create a new blank image and
use the function ImageString() to write the text
string error onto it:
} else {
$image = ImageCreate(100, 50);
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
ImageString($image, 5, 1, 1, "Error", $black);
}
ImagePNG($image);
ImageDestroy($image);
?>
The syntax for ImageString() is:
ImageString(image_id, font, x, y, text, color_id);
The only arguments we haven't seen before are text
and font. The former is just the text string that
you want to write onto the image. The latter is an integer
between 1 and 5, specifying one of the system's built-in fonts.
If you don't enter anything in the text box, you'll therefore see
the figure opposite:
Drawing the Layout - Page 12
Beginning PHP4
Further Interactivity - Page 14
|
