Hello Friends and Developers 
Last time we created a Simple Photo Sharing Application with a Image Upload Form where the User selects a single image and uploads it. After that he can view it in an album.
This is the link for that app
Photo Sharing application using php
This is the 2nd part for the same tutorial. In this part we will add more features to the application like
- Adding Caption to a Image
- Deleting a Image
So lets see the code for that.
The Image Upload Form that we see in the previous tutorial will remain same i.e UploadPhotos.php
We will make changes to the PhotoAlbum.php to include a form below every image with two Buttons, one for Adding a Caption to the Image and another for deleting the image.
Here comes the updated version of
PhotoAlbum.php
<html>
<head>
<title>My Photos</title>
<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>
<?php include("Includes/db.php"); ?>
</head>
<body>
<?php
$result = mysql_query("SELECT * FROM mp_photos order by id DESC");
echo "<table border='1' cellpadding='10' class='tab' align='center'>\n";
echo"<tr class='head'>
<td colspan='4'>My Photos</td>
</tr>";
$x=0;
while($x < mysql_num_rows($result))
{
$picid=mysql_result($result, $x, 'id');
$name=mysql_result($result, $x, 'name');
$caption=mysql_result($result, $x, 'caption');
if($x%4==0)
{
echo "<tr class='bod'>\n";
}
//To Be Able to Add Caption and Delete the Images we created a form below an image with two Buttons for adding caption and Deleting the image
echo "<td align='center' bgcolor= '#E0FFFF' onmouseover=\"bgColor ='Turquoise'\" onmouseout=\"bgColor ='#E0FFFF'\">";
echo "<img src = '$name' height='150' width='150' />
<br/>$caption
<form action='PhotoAlbumEdit.php' method ='post'>\n
<input type='hidden' name='picid' value ='$picid'>\n
<input type='Submit' value='Add Caption' name='add'/>
<input type='Submit' value='Delete' name='delete'/>
</form>
</td>\n";
$x++;
if($x%4==0)
{
echo "</tr>\n";
}
}//end of while
echo "</table><br /><br />";
mysql_close($con);
?>
<p align='center'><a href='UploadPhotos.php'>Upload More Images</a></p>
</body>
</html>
PhotoAlbum_with_Edit_Buttons
PhotoAlbumEdit.php
This php page opens a form for adding a caption when the Add Caption Button is clicked.
It also removes the image if the Delete Button is clicked.
Adding a Caption to the Image
For adding a caption to the image we created a small Form below every image with a Button – Add Caption
When the user clicks that button the image opens in another page. There we created a form with a Text Box for adding the caption for the image. When the user add some caption and click on the save button the caption gets saved associated to that image in the Database.
Deleting an Image
When the user clicks on the Delete Button below an image the image gets deleted without giving any warning.
PhotoAlbumEdit.php
<html>
<head>
<title>My Photos</title>
<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>
<?php include("Includes/db.php"); ?>
</head>
<body>
<?php
$id = $_POST['picid'];
/*Code for the Add Caption Submit button*/
if (isset($_POST['add']))
{
/*SQL for getting the neccessary image details*/
$res = mysql_query("SELECT * FROM mp_photos WHERE id=$id");
/*Creating a form for adding Caption to the image*/
echo "<form action='PhotoAlbumUpdate.php' method='post'>\n
<table cellpadding='10' class='tab' align='center'>\n
<tr class='head'>\n
<td colspan='2' align='center'>Add Caption</td>
</tr>\n";
/*A while loop is used to display the image Caption in a text box*/
while($row = mysql_fetch_array($res))
{
echo "<tr>\n
<td colspan='2' align='center'><img src = '{$row['name']}' /></td>\n
</tr>\n";
echo "<tr class='bod'>\n
<td align='right'><p class='upd'>Caption: </p></td>\n
<td><input type='text' name ='caption' size='50' maxlength ='150' value='{$row['caption']}'> </td>\n
</tr>\n";
echo"<tr>\n
<td colspan='2' align='center'><br/>
<input type='hidden' name='picid' value ='$row[id]'>
<input type='Submit' value =' Save ' name='save' class='sub'> </td>
</tr>";
}
/*End of While loop*/
echo "</table>";
echo "</form>";
}//Code for Add Caption Button Ends here
//Code for Delete Button
else if (isset($_POST['delete']))
{
$delete_query="Delete from mp_photos where id='$id'";
if (!mysql_query($delete_query,$con))
{
die('Error: ' . mysql_error());
}
echo "Successfully Deleted";
echo "<br /><a href='PhotoAlbum.php'>View Album</a>";
}//Code for Delete Button Ends here
mysql_close($con);
?>
<p align='center'><a href='UploadPhotos.php'>Upload More Images</a></p>
</body>
</html>
Add Caption Form
Adding Caption
Successfully Updated Msg
View Album With Caption
PhotoAlbumUpdate.php
This php page takes the Caption for the image from the PhotoAlbumEdit.php and saves it to the database.
<html>
<head>
<title>My Photos</title>
<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>
<?php include("Includes/db.php"); ?>
</head>
<body>
<?php
$id = $_POST['picid'];
/*Code for the Save Caption Submit button*/
if (isset($_POST['save']))
{
$caption =$_POST['caption'];
$update_query="Update mp_photos set caption='$caption' where id='$id'";
if (!mysql_query($update_query,$con))
{
die('Error: ' . mysql_error());
}
echo "Successfully Updated";
echo "<br /><a href='PhotoAlbum.php'>View Album</a>";
}
mysql_close($con);
?>
<p align='center'><a href='UploadPhotos.php'>Upload More Images</a></p>
</body>
</html>
