 |
 |
 |
 |
|
|
|
Create An Online Photo Gallery, Part 2
Brett Patterson
Last Two Functions!!
We've done a lot of work to our class so far. Now it's time for the last two functions. The easiest one is gen_crumbs(). This function creates breadcrumbs for the user. If you're not familiar with breadcrumbs, then here's a brief explanation. As you click through a site, a small (typically horizontal) list of topics/categories changes as you browse deeper into the site so that you know where you are within the site. You can see WebReference's version of breadcrumbs here. If you look at the top of the main column you'll see four words followed by slashes:
home / programming / xml / 1
Those are breadcrumbs, which are actually just a visual representation that enables a user to know where they are within the site, as well as providing quick-links to go back to a specific area of the site. The code for this is easy. We aren't going to create a generic breadcrumb function--we're going to make it more tailored to our photo gallery. Here's the code.
Home >> Category >> Event >> Image #
That is a straight-forward way to do it. The if statements check to see where we are in our gallery, and output the proper crumbs. Pretty simple.
The pagination, or Next and Previous links, are a bit tougher to wrap your head around. We already have all of our images in the directory stored in the "lst" array. Now we just need to figure out where our image falls in that array, and then choose the previous, and next items in the array. I'll give you the code first, then break it down.
That was simple. We use the ternary operator to decide whether to make the text a link or not. Basically, each ternary says the following:
IF $prv is less than 0 (the very first array key){ no link } else{ make a link }
IF $nxt is greater than or equal to $last (the total number of items in our array){ no link } else{ make a link }.
You may be wondering why $nxt is compared as greater than or equal to, and not just greater than. When we use the count() function, we get the total number of items using the standard counting method: from 1. Array keys start at 0. There is exactly a one number difference between the number in the array from count() and the array keys. If the value of $nxt is greater than or equal to the $last value (which is the # of array keys + 1) then no link is needed.
If you didn't understand that, here's a simple example for you:
$arr = array(0=>'Image1', 1=>'Image3', 2=>'Image5', 3=>'Image7', 4=>'Image9', 5=>'Image11');
Now you can see that Image7 is array key 3. The value of $nxt would be array key 4, and $prv would be array key 2. If we were to use 'Image11' as the current image, we have array key 5. That's the last item in the array. Our count says that there are 6 items in the array. Huh?!? That's where the "greater than" or "equal to" comes in. By saying greater than or equal to the $last value, we can guarantee that when we are viewing the last image, we won't create the next link. Here's why:
(Current: Image1) 1 is NOT >= 6; (Next: Image3)
(Current: Image3)2 is NOT >= 6; (Next: Image5)
(Current: Image5)3 is NOT >= 6; (Next: Image7)
(Current: Image7)4 is NOT >= 6; (Next: Image9)
(Current: Image9)5 is NOT >= 6; (Next: Image11)
(Current: Image11)6 IS >= 6; (Next: None)
Our last item to take care of is a small and possibly pesky problem. If your server doesn't store the last php error, $php_errormsg is going to always be empty, so debugging won't do any good. There is a one-line fix for this: we set an ini setting. It's pretty easy--the setting we need to set is "track_errors". Here's the code:
home / programming / xml / 1
Those are breadcrumbs, which are actually just a visual representation that enables a user to know where they are within the site, as well as providing quick-links to go back to a specific area of the site. The code for this is easy. We aren't going to create a generic breadcrumb function--we're going to make it more tailored to our photo gallery. Here's the code.
Code For: gen_crumbs()
Our crumbs will come in this form:
function gen_crumbs($cat = '', $evt = '', $pic = ''){
$crumbs = '<tr><td colspan="'.$this->cols.'">';
if(empty($pic) && empty($evt) && empty($cat)){
$crumbs .= '<b>Home</b>';
}
if(empty($pic) && empty($evt) && !empty($cat)){
$crumbs .= '<a href="photos.php">Home</a> >> <b>'.$this->clean($cat).'</b>';
}
if(empty($pic) && !empty($evt)){
$crumbs .= '<a href="photos.php">Home</a> >> <a href="photos.php?cat='.$cat.'">'.$this->clean($cat).'</a> >> <b>'.$this->clean($evt).'</b>';
}
if(!empty($pic)){
$crumbs .= '<a href="photos.php">Home</a> >> <a href="photos.php?cat='.$cat.'">'.$this->clean($cat).'</a> >> <a href="photos.php?cat='.$cat.'&evt='.$evt.'">'.$this->clean($evt).'</a> >> <b>'.substr($pic, 0, -4).'</b>';
}
$crumbs .= '</td></tr>'."\n";
echo $crumbs;
}
Home >> Category >> Event >> Image #
That is a straight-forward way to do it. The if statements check to see where we are in our gallery, and output the proper crumbs. Pretty simple.
The pagination, or Next and Previous links, are a bit tougher to wrap your head around. We already have all of our images in the directory stored in the "lst" array. Now we just need to figure out where our image falls in that array, and then choose the previous, and next items in the array. I'll give you the code first, then break it down.
Code For: paginate()
Let's dive into this. First we find our current position in the array using the array_search() function. Array_search() will return the array key that correlates to our image name. Then we add or subtract one (1) from the current position to get the next and previous array keys. We also count the amount of items in the array to get the total number of items in the array.
function paginate($cat, $evt, $pic){
$cur = array_search($pic, $this->lst);
$nxt = $cur+1;
$prv = $cur-1;
$last = count($this->lst);
$pagi = ($prv<0)?'':'<a href="photos.php?cat='.$cat.'&evt='.$evt.'&pic='.$this->lst[$prv].'">';
$pagi .= '[ Previous Photo ]';
$pagi .= ($prv<0)?'':'</a>';
$pagi .= ' ,.•”“•., ';
$pagi .= ($nxt>=$last)?'':'<a href="photos.php?cat='.$cat.'&evt='.$evt.'&pic='.$this->lst[$nxt].'">';
$pagi .= '[ Next Photo ]';
$pagi .= ($nxt>=$last)?'':'</a>';
return $pagi;
}
That was simple. We use the ternary operator to decide whether to make the text a link or not. Basically, each ternary says the following:
IF $prv is less than 0 (the very first array key){ no link } else{ make a link }
IF $nxt is greater than or equal to $last (the total number of items in our array){ no link } else{ make a link }.
You may be wondering why $nxt is compared as greater than or equal to, and not just greater than. When we use the count() function, we get the total number of items using the standard counting method: from 1. Array keys start at 0. There is exactly a one number difference between the number in the array from count() and the array keys. If the value of $nxt is greater than or equal to the $last value (which is the # of array keys + 1) then no link is needed.
If you didn't understand that, here's a simple example for you:
Code:
The image we are viewing is "Image7". That is array key "3". Why do we need to know that you ask? It's how PHP numbers the array values. If you leave them default, it starts counting at 0. So you can even rewrite the array as this and they would be equivilant:
$img = 'Image7';
$arr = array('Image1', 'Image3', 'Image5', 'Image7', 'Image9', 'Image11');
$last = count($arr);
$cur = array_search($img, $arr);
$nxt = $cur+1;
$prv = $cur-1;
$arr = array(0=>'Image1', 1=>'Image3', 2=>'Image5', 3=>'Image7', 4=>'Image9', 5=>'Image11');
Now you can see that Image7 is array key 3. The value of $nxt would be array key 4, and $prv would be array key 2. If we were to use 'Image11' as the current image, we have array key 5. That's the last item in the array. Our count says that there are 6 items in the array. Huh?!? That's where the "greater than" or "equal to" comes in. By saying greater than or equal to the $last value, we can guarantee that when we are viewing the last image, we won't create the next link. Here's why:
(Current: Image1) 1 is NOT >= 6; (Next: Image3)
(Current: Image3)2 is NOT >= 6; (Next: Image5)
(Current: Image5)3 is NOT >= 6; (Next: Image7)
(Current: Image7)4 is NOT >= 6; (Next: Image9)
(Current: Image9)5 is NOT >= 6; (Next: Image11)
(Current: Image11)6 IS >= 6; (Next: None)
Our last item to take care of is a small and possibly pesky problem. If your server doesn't store the last php error, $php_errormsg is going to always be empty, so debugging won't do any good. There is a one-line fix for this: we set an ini setting. It's pretty easy--the setting we need to set is "track_errors". Here's the code:
Code:
Easy enough right? That goes directly after the initial opening "<?php" tag in our class.photogallery.php page. On the next page, I'll give you the entire class document, and a link to see its source.
ini_set('track_errors', TRUE);
| Comments: | ||
No Messages FoundYou can post questions/corrections/feedback here
| ||
|
If you are looking for help, please post on the appropriate forum here. Your questions will be answered much more quickly. | ||
