![]() |
How to create a gallery class
Hello!
This is my first tutorial actually. I'm not really even sure if I'm qualified to write tutorials, as I'm still learning PHP. But I think it will be a nice way for me to improove my PHP learning process, by explaining what I've done. So in this tutorial, we will create a gallery class, and also a template class that will work together with the gallery class. This is the structure of the files: | -> index.php | | -> includes | | - -> config.php | | - -> classes | | - - -> gallery.php | | - - -> template.php | | - -> templates | | - - -> index.tpl | | - - -> gallery.tpl | | - - -> view.tpl | | - - -> desc.xml | | -> img | | - -> folder.gif | | -> images | | - -> example folder 1 | | - - -> 0.jpg | | - - -> 1.jpg | | - - -> 2.jpg | | - - -> 3.jpg | | - -> example folder 2 | | - - -> 0.jpg | | - - -> 1.jpg | | - - -> 2.jpg | | - - -> 3.jpg So let's start! gallery.php Located in /includes/classes/gallery.php php Code:
This is just basic variables that are needed. php Code:
php Code:
I wrote this script before I read about __call, so obviously, you can make this ALOT nicer and less code, by making a __call function for this. I might edit that later after I've written the tutorial, maybe ;) php Code:
Ofcourse, the folder shouldn't be . or .., so we take those out. Now after reading more PHP tutorials, I've kind of realized that this isn't very safe either as they can still go up one directory and then go into another folder. So maybe you can come up with a nice preg_match function in this code piece, to take out all the dots if there exists. php Code:
We now also have to check the value of the pic, by doing this: php Code:
php Code:
php Code:
If the folder in the current loop, is called "..", we don't include it. If it's anything else than "..", we put the name of that folder in the array $this->folders. After we've scanned through the directory, we do an array search. We search for $this->currentFolder (set in the $_GET['folder']), in the array $this->folders. If it finds it, we can set the currentFolderPath to php Code:
The next function gets the total amount of pictures in the currentFolderPath: php Code:
Then it checks if false is not the same type as $file, if $file = readdir readdir reads through the directory, and loops through all of the files in it. If the file isn't called "." or "..", the variable $this->totalPics gets 1 value added to it. After the loop looped through all files, $this->totalPics would then contain the amount of all the pictures in the current folder. Now, I hope you're as smart as I am with maths(I'm just joking, I'm not very good >.< ), because there will be alot of maths from now on. php Code:
The total amount of pictures, is devided with how many images are allowed per page. We then get the amount of pages. But in order not to have like 11,6 pages.. we ceil it, meaning, round it up. So it would then be 12 pages instead of 11,6. We then set the $this->totalPages to the value of the total pages. php Code:
So, let's say we have 10 images per page. On page 1, it would show the first 10 images. On page 2, it would show up to the (2 * 10)th image. With me so far? Page 1: 0-9 Page 2: ?-19 Now, we can pretty easy realize that the first image should be 10, on page 2. But in order for the script to get it, we need to subtract $imgPerPage from (2 * 10), leaving us with: (2 * 10) - 10 = 20 - 10 = 10 Wow, even I didn't get my own explenation. But I hope you get it anyhow! Because we're moving on!! The next function isn't really the best coded function, but it gets the work done that it's supposed to! php Code:
Then it just makes a nice link, with a folder image. The rest of the function is pretty self-explenatory, messy, but easy to understand. php Code:
Returns that message. The next function, is getting the page links. This is REALLY hard to explain. I don't even know how to begin. The function itself is also very long. I'll take it in parts. Here is the whole function: php Code:
php Code:
Then it checks if the current page, minus (current span - 1), is larger than the firstpage. The firstpage, is always 1. If the currentpage, is 5, and the span is set to 3. It will then check if 5 - (3 - 1 = 2) > 1 and that is simplified like the following: 5 - 2 = 3 if 3 > 1, which it is, it will print a link to the first page. So even if you're at page 10, and the span is set to 3: 7 8 9 10 11 12 13 It will show a link to the first page: << 1 .. 7 8 9 10 11 12 13 Jesus, how will this tutorial continue... :confused::confused: Hard to explain maths :S Anyways. php Code:
php Code:
And the loop will run, as long as php Code:
And at the end of each loop, we add 1 to $i. php Code:
php Code:
php Code:
The last line in the loop I don't think I have to explain. It just closes the link. php Code:
if the span is set to 3, and we're on page 1 of 20. It will echo: 1 2 3 4 .. 20 >> And if we're at the page 10, as the previous example: It will echo: << 1 .. 7 8 9 10 11 12 13 .. 20 >> Pretty neat huh? :D Next thing, we just echo out some basic breaklines, and then this: php Code:
So the number link menu, is more if you wanna jump several pages at the time. And the "previous page" link will be for those who wanna scan through all the pages. php Code:
Whoa! That was one long function. And messy. But hopefully, you'll just grasp the idea of this class, and will probably come up with your own solutions for some of the things here! The next function, prints out the actual images in the current folder. This function really deserves a whole topic of its own, because it's so much code!! :eek: php Code:
php Code:
And as long as $i is less then the first image + imgPerPage, it should do the loop. And at the end of each loop, it should add 1 to $i. php Code:
php Code:
php Code:
Foreaches it, and if the folder id in the XML file is the same as the current folder, we check if the id is the same as the $i (pic id). We then set the $title to the value of the title="value" found in the XML file. php Code:
At the end, we reset the currentcolumn to 1. php Code:
First we just do the XML thing again, and gets the title from it. We then get the same link as before. The difference is at the end, where we don't start a new <tr> Also, we add one value to the currentcolumn. After the loop, we end the <tr> and the <table>. Then we return $images. I then have some really bad coded functions, but I'm too lazy to rewrite them. php Code:
Whoa, after reading through the next function, I realize that this function that's comming up, is far more longer, than the printImages(). php Code:
If it is, we check if it exists. If it doesn't, we echo out an error msg! Pretty straight forward.. php Code:
First we just print a link back to the page in the folder they were previously viewing. This is a bit tricky: php Code:
so.. index.php?folder=test&page=3&pic=20 the previous picture, must have: index.php?folder=test&page=2&pic=19 If you get what I mean, so that's why we need 2 different links for previous pic. We check if the nextimage exists: php Code:
php Code:
The code in the "else" brackets, is the same as the one in the if, except for this: if php Code:
php Code:
The rest is the same. The next piece of code decides the next pic link. php Code:
php Code:
After that we basicly do that same thing we did with the previous pic link. We get the path to the pic, we check if it exists, and then we get the <img> link for it. Also, notice the difference between the code within the if brackets, and the code within the else brackets. And notice the difference between these, and the ones for the previous pic link. We then start a basic table, pretty easy. php Code:
php Code:
If it is, we add a link to the original picture. And we also resize it because we don't want the full size of the picture to cover up the whole screen. If it's not larger than the maxwidth, we just get the normal image. Then we close the image tag, with a border set to 0. And if the width was larger than max width, we close the link aswell. After that we do the XML thing again, and checks for the string in the XML file, that matches foldername, pic id, and get the info from that pic. We then close the table, and then return all of that. |
template.php
Located in /includes/classes/template.php I'm not gonna go in-depth with this class, because there's already a tutorial for this class! php Code:
|
Config.php
Located in /includes/config.php This is pretty easy to understand. php Code:
The next part of the config, is just setting things up with the class: php Code:
|
desc.xml
Located in /includes/templates/desc.xml Code:
<?xml version="1.0" encoding="utf-8"?>The long lines with "-" is not neccessary, but it does make it easier to find certain folders if you have alot of folders. Pretty self-explenatory. id: The id of the picture folder: The foldername where this picture is located info: The text that will appear below the picture when you view only that pic. title: This is the text that will appear when you hover the picture in the gallery. |
template.tpl
Located in /includes/templates/templatename.tpl index.tpl HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
5 Attachment(s)
Index.php
Located in root folder So finally, the last piece of script! The script that pulls everything together, and uses all the classes and everything! Let's see how it looks: PHP Code:
After that we set a bunch of variables. You should be able to read the comments in the code to see what they do. Actually, everything is pretty explained in the code. Just read the comments. One thing though. We do not parse the site until the very end of the script. Because if the user is viewing a gallery, we load another file instead of the index.tpl. And if they're viewing an image, we load another file. Also one other thing! You can see, $image variable only exists if the user is viewing a special picture. But we still assign that to the $array in the end, and outputs it with the loaded file. The way it works is, that if the value is empty, it won't echo out anything, and we haven't included {image} in any other .tpl file than the one the viewer is using when viewing a specific picture, which is view.tpl I really hope you've learned something about at least something. It's really a MAJOR tutorial, and probably most of you won't bother reading through the whole thing. But if you do read through it, maybe you can come up with a way so the functions in the gallery class only returns DATA, and no actual HTML output. And then you can decide exactly how to format the things, within the templatefiles. But that's for you to figure out! NOTE! The images in the different folders, have to be named in numeric order, such as: 0 1 2 3 4 5 The fileformat can be other than .jpg, but all images must have same fileformat! You can just edit the fileformat in the config.php Signing out, hope you had a nice read. Thanks // Tanax |
1 Attachment(s)
I would've happily uploaded the files, but I exceed the quota though =////
Anyways, the parts in the gallery class that I left out was for example the closing tag for the class, and the php tags. So I think you can guess your way if something doesn't work! And very sorry for the spam of posts, I just didn't want to have everything in one post, because if I wanted to edit something, it would be very hard to find, since it's ALOT of text. |
I'll read this very extensive guide in segments to prevent me from forgetting anything as I'm reading. First part seems well written to me, and everyone deserves the chance to have a stab at an article no matter what their skill level!
One thing I'm going to pull you on is the use of opendir. I must admit that I used to use all those *dir functions back in my hay days as a PHP programmer. That was until I found out about the glob function. An exceedingly useful function, and so much so I even decided to write an article about it myself. You may wish to familiarise yourself with glob as it really is a powerful little function and makes reading files (and directories) a piece of cake. I suppose its syntax is in some way comparable to regex - just a lot more simplified.Let me continue reading now :-) Not sure I can manage it all in one go, mind you! P.S: How big are the files? I'll more than happily increase the allowance. |
Thanks for your comment!
I will read through the glob article and see if I can get a grasp of it :) The gallery class file is 16,5kb around~~ The rest of the files are not very big ;) PS: That's also one of the reasons why I posted this in several posts, so you can easialy just quite reading after a post, and continue reading at the next post some other time :) |
Files uploaded! And image also uploaded(the folder.gif)
However, the .tpl files couldn't be uploaded, cause it wasn't a supported file type! And, I couldn't upload more than 5 attachments per post ;P |
'good god' was the first thing i said to myself, that must of been a lot of work writing all that.
Quote:
I will have read it in segments also otherwise my brain will throw some form of i/o error, looks good tho keep it up! |
Quote:
Yea, took.. 7 hours xDD I just hope people will learn something and enjoy reading it :D |
Quote:
That if I ever need an image gallery, I can steal yours. :) |
Wow amazing tuto !
Thank you, I'll read it when I'll have more time ;) |
Quote:
Mhm, but that way you won't learn ;) Quote:
|
time to save this article :) thanks for the share. good post.
|
Thank for good Tutorial.
I started OOP php recently.It helped me alot. |
:-) Glad to see this tutorial is still being read!
|
Quote:
Quote:
Quote:
|
Hi, thanks for share!
BTW, this thread is google number one for: gallery class tutorial ;) |
| All times are GMT. The time now is 03:49 PM. |
Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0