(Photo Gallery Upload Images) Build PHP Database Driven Websites – Tutorial 4a
CMS Uploads images using PHP MYSQL and view the photos on the website.
Previously we had build the database structure, CMS and website interface for an online egames website and now we will add extra features to our website.
Recap:
- We are adding images to our egames website
- So far we have build a database structure, CMS and website interface .
- Download file 78.rar. “start” folder consist of the work done previously and “final” folder consist of the complete work done in this tutorial
We have a nice working website but what if you want to add images of the games on the website. Images and photos are the main feature to attract customers everywhere. So lets add images on our egames website.
We have to make changes to 3 locations in order to upload images on our dynamic website:
- The database structure
- The CMS admin panel of the website
- The website itself
The database structure
Open PHPmyadmin and type the following code to change the table structure of the table “product”
ALTER TABLE `product` ADD `photo` VARCHAR( 255 ) NOT NULL AFTER `product` ;
The CMS admin panel of the website
I assume that you are following the flow of my tutorials and have the “egames” website installed and running on your computer. If you want click here to view the first CMS tutorial.
Extract the file and rename the folder “start” to “egames” and copy it to c:/wwwroot/inetpub.
Add Photo
Open file admin/addproduct.php and type the following below the “Product Category” field.
<tr>
<td width="200" height="21" valign="middle" align="left"><font>Photo</font></td>
<td width="8"> : </td>
<td width="350" align="left"><font><input name="photo" type="file" size="36"></font></td>
</tr>
Save Photo
Open admin/saveproduct.php; find <!– listing –> delete the existing text and type the following:
Note: You will probably face a sharing issue when copying files so click here for the solution
Modify Photo
Open file admin/modifyproduct.php and type the following below the “Product Category” field.
Make sure the form declaration has <form method=post name=myform action=”updateproduct.php” enctype=”multipart/form-data”>
Update Photo
Open admin/updateproduct.php; find <!– listing –> delete the existing text and type the following:
Delete Photo
Open admin/deleteproduct.php find <!– listing –> delete the existing text and type the following:
View Photo on the Website
Just add <img src=”photo/$photo”> anywhere you need to view the photos on the website “egames”
Note: $photo=name of the photo from the mysql table “photo”
| Code | Explanation |
| saveproduct.php | |
if(!empty($_FILES["photo"])) |
Extracting the photo from the previous page and checking if it exists |
$uploaddir = "../photo/"; |
assigning the folder for uploading images |
if (copy($_FILES["photo"]["tmp_name"], $uploaddir . $_FILES["photo"]["name"])) |
copying image from existing folder to the assigned folder if copying is true then follow further steps else $photo=empty to be stored in DB |
$a=$_FILES["photo"]["name"]; |
$a = name of the photo |
$end=strstr($a,'.'); |
extracting the extension of the photo |
$photo=$uploaddir.$productid.$end; |
$photo = folder name productid and extension |
rename($uploaddir.$a, $photo); |
rename the photo name with desired name which in this case is the productid |
$photo=$productid.$end; |
$photo = productid + extension to be stored in the mysql table “product” |
mysql_query("insert into product values('$productid','$product','$photo','$bdesc','$ddesc')") |
Inserting the photo in table “product” |
| modifyproduct.php | |
<? if($row1["photo"]!="") { ?><img src="../photo/<? echo $row1["photo"] ?>" width="100"> |
displaying the photo if exit else display image |
<input type="hidden" name="oldphoto" value="<? echo $row1["photo"] ?>"> |
passing the photo name if not changed |
<input type=file name="newphoto" size=50 disabled=1><br> |
using radio buttons to give choice of either to use the current image or new image |
function radval1(){document.myform.newphoto.disabled=1;} |
Javascript function for the above step |
| updateproduct.php | |
$pic=$_REQUEST["pic"]; |
request radio button “pic” to check if the user have the changed the image |
if($pic=="usecurrent"){ $newphoto=$_REQUEST["oldphoto"];} |
$pic = current then $newphoto=the oldphoto ie no change |
$oldphoto=$_REQUEST["oldphoto"];if($oldphoto!="") unlink("../photo/".$oldphoto); |
else get the oldphoto and delete it from website folder |
if(!empty($_FILES["newphoto"])) ... |
copying the photo to the website folder like done in saveproduct.php |
mysql_query("update product set product='$product',photo='$newphoto', bdesc='$bdesc',ddesc='$ddesc' where productid='$productid'") |
update the photo in the table “product” |
| deleteproduct.php | |
$respic=mysql_query("select * from product where productid='$productid'"); |
Extracting row from table “product” where productid matches |
if($rowpic["photo"]!="") |
Checks if the photo exist |
$photo=$rowpic["photo"]; unlink("../photo/".$photo); |
Delete photo |
Thats done!!!! phew…… I feel like so tired I am planning to add some jazz to our website you like a section to chill out, lemme know wht you think!