![]() ![]() |
Aug 25 2005, 05:39 PM
Post
#1
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
This tutorial will aim to provide you with all the code needed to make your own image gallery and all the information necessary to edit it to your own specifications.
All code is commented so you can see what each part of the code does. To begin with you will need to access Cpanel (or whatever equivalent you use) and create a new database and add the following MySQL; SQL CREATE TABLE Image_Gallery ( ID int(11) NOT NULL auto_increment, Name varchar(255), Date int(11) unsigned, ImageSize int(100), Width int(4), Height int(4), ImageName varchar(255), KEY ID (ID) ); This will give you a new table called Image_Gallery with all the required fields to store our data. The next part is to configure the config.php file to suit your needs; config.php [php]<?php $dbHost = 'localhost'; // Database Host $dbUser = 'username'; // Database Username $dbPass = 'password'; // Database Password $dbName = 'Image_Gallery'; // Database Name $db = mysql_connect("$dbHost","$dbUser","$dbPass"); // Connect to the database. if (!$db) { die('Error : ' . mysql_error()); } // Database connection error checking. $select_db = mysql_select_db($dbName,$db); // Select database. if (!$select_db) { die('Error : ' . mysql_error()); } // More error checking. $Error_Domain = "http://www.domain.com/index.php?error=1"; /* The variable $Error_Domain is the location the browser will be sent to should any errors be encountered. In this case we are sending the user back to the original form with the SESSION error set. */ $Success = "http://www.domain.com/success.php"; /* The variable $Success is the location the browser will be sent to when all processing has been successful and data written to the database. */ $per_page = 12; /* The $per_page variable is the amount of images which will be shown on each page. Change this to any number of images you want shown per page. */ function SafeAddSlashes($string) { // SafeAddSlashes function to remove slashes if (get_magic_quotes_gpc()) { // from input to prevent SQL injection. return $string; } else { return addslashes($string); } } function ImageRename($string) { // ImageRename function to remove white space $string = strtolower($string); // from image names and replace them with return str_replace(" ", "_", $string); // underscores (_). } ?>[/php] The only sections of the config file you'll need to change are your database connection details and the $Error_Domain and $Success variables to your own web site (Make sure you keep ?error=1 at the end of index.php on $Error_Domain). The next section of our code is going to be index.php. The form which will actually enable you to upload your files. index.php [php]<?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>Image Gallery</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="Wrapper"> <?php $Error = $_GET['error']; // If theres an error. if(isset($Error)) { // Display the following error form (same as original but with error messgae). echo '<form action="process.php" method="post" enctype="multipart/form-data">'."\n"; echo ' <p><label for="name"><strong>Name :</strong></label><br />'."\n"; echo ' <input type="text" name="name" id="name" tabindex="1" size="40" value="'.$_SESSION['name'].'" /></p>'."\n\n"; echo ' <p><label for="image"><strong>Image :</strong></label><br />'."\n"; echo ' <input type="file" name="image" tabindex="2" size="28" /></p>'."\n"; echo ' <p id="error">'.$_SESSION['errormsg'].'</p>'."\n\n"; echo ' <p><input type="submit" name="submit" value="Submit" tabindex="3" /> <input type="reset" value="Reset" tabindex="4" /></p>'."\n"; echo '</form>'."\n\n"; } else { ?> <form action="process.php" method="post" enctype="multipart/form-data"> <p><label for="name"><strong>Name :</strong></label><br /> <input type="text" name="name" id="name" tabindex="1" size="40" /></p> <p><label for="image"><strong>Image :</strong></label><br /> <input type="file" name="image" id="image" tabindex="2" size="28" /></p> <p><input type="submit" name="submit" value="Submit" tabindex="3" /> <input type="reset" value="Reset" tabindex="4" /></p> </form> <?php } ?> </div> </body> </html>[/php] By Joseph Skidmore http://www.joe2torials.com/ This post has been edited by joe2kiss: Dec 16 2005, 05:51 PM -------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
Aug 25 2005, 05:51 PM
Post
#2
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
Followed swiftly by process.php where all the magic actually happens;
process.php If any errors are encounted you will notice that the code will redirect the user back to the $Error_Domain with the error set. Most of the above code is commented so you can easily see what it does ... but there are two parts of the code which aren't commented, this is where it gets a bit difficult. There are 3 things you must do at this point. In the folder where you are placing your image gallery script you will need to create 3 (three) subfolders;
The next obvious step would be to create preview thumbnails of the images that will be displayed on our preview pages. This is where those two parts of the code come into play; The first one; PHP $max_width = 128; $max_height = 128; $preview_dir = '/home/username/public_html/preview/'; list($mime1,$mime2) = explode('/',$userfile_type); list($width, $height) = getimagesize($userfile_folder); if ($max_width && ($width < $height)) { $max_width = ($max_height / $height) * $width; } else { $max_height = ($max_width / $width) * $height; } $image_p = imagecreatetruecolor($max_width, $max_height); $function_name = 'imagecreatefrom'.$mime2; $image = $function_name($userfile_folder); imagecopyresampled($image_p, $image, 0, 0, 0, 0, $max_width, $max_height, $width, $height); imagejpeg($image_p, $preview_dir.$userfile_name, 75); Creates the smallest thumbnail (smallest size will be 128 pixels). This little code grabs the image size of the original image and then does a few calculations resizing the image so the smallest dimension (width or height) will be 128 pixels. It then creates a copy of that resized image and uploads it to the specified directory which is preview/. Although you must remember to change the directory to your own web space url. PHP $max_width = 270; $max_height = 270; $preview_dir = '/home/username/public_html/medium/'; list($mime1,$mime2) = explode('/',$userfile_type); list($width, $height) = getimagesize($userfile_folder); if ($max_width && ($width < $height)) { $max_width = ($max_height / $height) * $width; } else { $max_height = ($max_width / $width) * $height; } $image_p = imagecreatetruecolor($max_width, $max_height); $function_name = 'imagecreatefrom'.$mime2; $image = $function_name($userfile_folder); imagecopyresampled($image_p, $image, 0, 0, 0, 0, $max_width, $max_height, $width, $height); imagejpeg($image_p, $preview_dir.$userfile_name, 75); This does the same as the first, but it creates the second thumbnail at 270 pixels (for the smallest dimension) and uploads it to medium/. Hopefully your still with me at this point ... The next step is our success page, if all went well and no errors were encountered this is the page that will get shown. success.php CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>Image Gallery</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="Wrapper"> <p>Success!</p> <p><a href="index.php" title="Index">Upload another</a>? Or <a href="preview.php" title="Preview">preview</a>.</p> </div> </body> </html> By Joseph Skidmore http://www.joe2torials.com/ This post has been edited by joe2kiss: Aug 25 2005, 08:23 PM
Attached File(s)
-------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
Aug 25 2005, 06:16 PM
Post
#3
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
So we have now successfully uploaded the images and written the data to the database ... but now how do we view this? Simple.
The following code grabs all the data from the database but doesn't show everything on one page ... oohhh no, remember that little variable inside the config page: $per_page. Well that had a purpose, and can be shown on this page; preview.php PHP <?php ob_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>Image Gallery</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <?php include 'config.php'; $requete = "SELECT count(distinct ID) FROM Image_Gallery"; $result = mysql_query($requete,$db); $arr = mysql_fetch_row($result); $count = $arr[0]; $total_amount = $count; $pages = (int)($count / $per_page); if ($pages == 0) $pages=1; else if ($count % $per_page > 0) ++$pages; $cur_page = (int)$_GET['page']; if (!isset($cur_page)) $cur_page = 1; if ($cur_page < 1) $cur_page = 1; else if ($cur_page > $pages) $cur_page = (int)$pages; $sql = 'SELECT ID, Name, Date, ImageSize, Width, Height, ImageName FROM Image_Gallery ORDER BY ID asc LIMIT ' .(($cur_page-1)*$per_page) . ", $per_page"; $result = mysql_query($sql, $db); $count = mysql_num_rows($result); if($count == 0) { echo '<p>Sorry, no records have yet been added. Click here to <a href="index.php" title="Upload a File">upload a file</a>.</p>'."\n"; } else { while($row = mysql_fetch_assoc($result)) { $ID = $row['ID']; $Name = stripslashes($row['Name']); $Date = date("d.m.y", $row['Date']); $ImageSize = $row['ImageSize']; $Width = $row['Width']; $Height = $row['Height']; $ImageName = $row['ImageName']; echo '<div class="Preview-Box">'."\n"; echo ' <h2><a href="preview-full.php?p='.$ID.'" title="Preview Full Details of '.$Name.'">'.$Name.'</a></h2>'."\n"; echo ' <div class="Img-Preview-Small"><a href="preview-full.php?p='.$ID.'" title="Preview Full Details of '.$Name.'"><img src="preview/'.$ImageName.'" alt="'.$Name.'" /></a></div>'."\n"; echo ' <p><strong>File Size : </strong> '.$ImageSize.'Kb</p>'."\n"; echo ' <p><strong>Dimensions : </strong> '.$Width.'px <strong> X </strong> '.$Height.'px</p>'."\n"; echo ' <p><strong>Uploaded on : </strong> '.$Date.'</p>'."\n"; echo '</div>'."\n\n"; } echo '<div id="Count">'."\n"; if($count == 1) { echo ' <p>There is '.$total_amount.' record and '; } else { echo ' <p>There are '.$total_amount.' records and '; } if ($pages == 1) echo '1 page. '; else echo $pages.' pages. '; echo 'You are on page '.$cur_page.'.</p>'."\n"; if ($pages > 1 && $cur_page > 1) echo ' <p><a href="preview.php?page=1"><< first</a> | '; else echo ' <p>first | '; if ($cur_page > 1) echo '<a href="preview.php?page=' . ($cur_page-1) . '">prev</a> | '; else echo 'prev | '; if ($cur_page < $pages) echo '<a href="preview.php?page=' . ($cur_page+1) . '">next</a> | '; else echo 'next | '; if ($pages > 1 && $cur_page < $pages) echo '<a href="preview.php?page='.$pages.'">last >></a></p>'."\n\n"; else echo 'last</p>'."\n\n"; echo ' <p>Click here to <a href="index.php" title="Upload A File">upload a file</a>.</p>'."\n"; echo '</div>'; mysql_free_result($result); } ?> </body> </html> <?php ob_end_flush(); ?> The $per_page variable limits the amount of images shown on each page. The page has a fully working paginator, meaning you can have as many images as you like and just scroll through the pages looking at them. Next we need preview_full.php for viewing the larger thumbnails of the images; preview_full.php PHP <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>Image Gallery</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="Wrapper"> <?php include 'config.php'; $Preview = SafeAddSlashes($_GET['p']); if(!isset($Preview)) { echo '<p><strong>Error : </strong> Invalid image selection.</p>'."\n"; } else { $sql = "SELECT ID, Name, Date, ImageSize, Width, Height, ImageName FROM Image_Gallery WHERE ID = '$Preview'"; $result = mysql_query ($sql, $db); $count = mysql_num_rows($result); if($count == 0) { echo '<p><strong>Error : </strong> Invalid image selection.</p>'."\n"; } else { while($row = mysql_fetch_assoc($result)) { $ID = $row['ID']; $Name = stripslashes($row['Name']); $Date = date("d.m.y", $row['Date']); $ImageSize = $row['ImageSize']; $Width = $row['Width']; $Height = $row['Height']; $ImageName = $row['ImageName']; ?> <h2><?=$Name?></h2> <div id="Img-Preview"> <img src="medium/<?=$ImageName?>" alt="<?=$Name?>" /> </div> <p><strong>File Size : </strong> <?=$ImageSize?>Kb</p> <p><strong>Dimensions : </strong> <?=$Width?>px <strong> X </strong> <?=$Height?>px</p> <p><strong>Uploaded on : </strong> <?=$Date?></p> <?php } } mysql_free_result($result); } ?> <p><a href="<?=$HTTP_REFERER?>" title="Back To Previous Page">Back To Previous Page</a>.</p> </div> </body> </html> Of course, it's plain to see I've been withholding certain information from you ... and that would be my CSS stylesheet, without it your looking at a very untidy image gallery. Along with my stylesheet there are 2 small images that I have used in my code, feel free to use those too; CSS Stylesheet = First Image = ![]() Second Image = ![]() By Joseph Skidmore http://www.joe2torials.com/ This post has been edited by joe2kiss: Sep 11 2005, 11:43 AM
Attached File(s)
-------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
Aug 26 2005, 10:47 AM
Post
#4
|
|
![]() E = MC˛ Group: Moderators Posts: 2525 Joined: 3-July 04 From: Pakistan Member No.: 199 |
Nice one Joe. An Image gallery is something we all need sometime (I think) and having one like this (which I imagine to be flexible-ly flexible) would we benefitial.
Could you possibly get a demo of the code in action to help better understand the functions? Or you could make a list...that would be really helpful. The thing that bothers me is that I had been looking all over for an Image Gallery script, even the Weborum PHP sections! But couldn't find any I ended up using Yet Another PHP Image Gallery...and your admin section password script to put it under lock and key -------------------- |
|
|
|
Aug 26 2005, 10:52 AM
Post
#5
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
For the full working pre-written script you can simply download it here;
Attached File(s)
-------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
Aug 26 2005, 10:56 AM
Post
#6
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
You can indeed have a demo of the script Waleed;
*demo link removed* As for the functions;
This post has been edited by joe2kiss: Sep 16 2005, 07:04 PM -------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
Dec 16 2005, 08:12 AM
Post
#7
|
|
![]() E = MC˛ Group: Moderators Posts: 2525 Joined: 3-July 04 From: Pakistan Member No.: 199 |
I luuve you joe! You and your scripts!
I had forgotten all about this one, and was racking my brain with another gallery that was going unbelievably wrong. *cough*unexpected ')'*cough* -------------------- |
|
|
|
Jan 15 2006, 04:30 PM
Post
#8
|
|
![]() E = MC˛ Group: Moderators Posts: 2525 Joined: 3-July 04 From: Pakistan Member No.: 199 |
one suggestion for the script:
it would be great if we could have a "previous | next" line in preview_full.php. -------------------- |
|
|
|
Jan 15 2006, 04:38 PM
Post
#9
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
Good idea Waleed, I will look into adding that for V2.0.
-------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
Jan 19 2006, 04:45 PM
Post
#10
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
How to include 'previous' and 'next' links within your preview_full.php file.
Open preview_full.php. Find the line; [php]<p><a href="<?=$HTTP_REFERER?>" title="Back To Previous Page">Back To Previous Page</a>.</p>[/php] Include the following snippet above this line (or wherever you want the links to appear). [php]<p><?php $sql = "SELECT ID FROM test WHERE ID < '$ID' ORDER BY ID DESC LIMIT 0 , 1"; $result = mysql_query ($sql, $db); $count = mysql_num_rows($result); if($count == 0) { echo 'Previous'."\n"; } else { while($row = mysql_fetch_assoc($result)) { $PID = $row['ID']; echo '<a href="preview-full.php?p='.$PID.'" title="Previous">Previous</a>'; } } ?> | <?php $sql = "SELECT ID FROM test WHERE ID > '$ID' ORDER BY ID ASC LIMIT 0 , 1"; $result = mysql_query ($sql, $db); $count = mysql_num_rows($result); if($count == 0) { echo 'Next'."\n"; } else { while($row = mysql_fetch_assoc($result)) { $NID = $row['ID']; echo '<a href="preview-full.php?p='.$NID.'" title="Next">Next</a>'; } } ?></p>[/php] I realise that this is two separate queries to find the ID's, but without the most recent version of MySQL (V5), it's not possible to reduce the query. A big thanks to Mike for his help with the SQL in this snippet, as always a vital asset to my learning process Hows that for service Waleed? -------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
Jan 19 2006, 07:29 PM
Post
#11
|
|
![]() E = MC˛ Group: Moderators Posts: 2525 Joined: 3-July 04 From: Pakistan Member No.: 199 |
Very cool! Want the next idea, suggestion?
This post has been edited by Waleed Zuberi: Jan 19 2006, 07:31 PM -------------------- |
|
|
|
Jan 19 2006, 08:08 PM
Post
#12
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
Go for it
-------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
Jan 20 2006, 08:29 AM
Post
#13
|
|
![]() E = MC˛ Group: Moderators Posts: 2525 Joined: 3-July 04 From: Pakistan Member No.: 199 |
How about categories? It might be a biggie, I don't know, but a good feature nonetheless. I mean, many people would use/not use a gallery script depending on whether or not it has the ability to create image categories or not.
That's the last one from me, for now. -------------------- |
|
|
|
Jan 20 2006, 08:40 AM
Post
#14
|
|
![]() E = MC˛ Group: Moderators Posts: 2525 Joined: 3-July 04 From: Pakistan Member No.: 199 |
Hehe, I found a little so-called insect in your code, joe.
Where it is, [php] <p><?php $sql = "SELECT ID FROM test WHERE ID < '$ID' ORDER BY ID DESC LIMIT 0 , 1"; $result = mysql_query ($sql, $db); $count = mysql_num_rows($result); if($count == 0) { echo 'Previous'."\n"; } else { while($row = mysql_fetch_assoc($result)) { $PID = $row['ID']; echo '<a href="preview-full.php?p='.$PID.'" title="Previous">Previous</a>'; } } ?> | <?php $sql = "SELECT ID FROM test WHERE ID > '$ID' ORDER BY ID ASC LIMIT 0 , 1"; $result = mysql_query ($sql, $db); $count = mysql_num_rows($result); if($count == 0) { echo 'Next'."\n"; } else { while($row = mysql_fetch_assoc($result)) { $NID = $row['ID']; echo '<a href="preview-full.php?p='.$NID.'" title="Next">Next</a>'; } } ?></p> [/php] Should be, [php] <p><?php $sql = "SELECT ID FROM Image_Gallery WHERE ID < '$ID' ORDER BY ID DESC LIMIT 0 , 1"; $result = mysql_query ($sql, $db); $count = mysql_num_rows($result); if($count == 0) { echo 'Previous'."\n"; } else { while($row = mysql_fetch_assoc($result)) { $PID = $row['ID']; echo '<a href="preview-full.php?p='.$PID.'" title="Previous">Previous</a>'; } } ?> | <?php $sql = "SELECT ID FROM Image_Gallery WHERE ID > '$ID' ORDER BY ID ASC LIMIT 0 , 1"; $result = mysql_query ($sql, $db); $count = mysql_num_rows($result); if($count == 0) { echo 'Next'."\n"; } else { while($row = mysql_fetch_assoc($result)) { $NID = $row['ID']; echo '<a href="preview-full.php?p='.$NID.'" title="Next">Next</a>'; } } ?></p>[/php] Because the table we created wasn't named "test," it was "Image_Gallery" This post has been edited by Waleed Zuberi: Jan 20 2006, 08:42 AM -------------------- |
|
|
|
Jan 20 2006, 04:48 PM
Post
#15
|
|
![]() * legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8 |
Good point Waleed, test is the database name given to the image gallery on my server. I should have checked my code a little bit better really
Categories was an idea I already had jotted down. Although implementing them would be easy, an administration panel would need to be created in order to add/edit/delete the cats. So with one suggestion, comes a whole lotta problems -------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog. |
|
|
|
![]() ![]() |
| Lo-Fi Version Euribor Reviews |
Time is now: 31st July 2010 - 03:12 AM |