Photo Sharing Application in PHP with More Features- Adding Captions and Deleting Images

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

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>

AddCaptionForm

Add Caption Form

AddingCaption

Adding Caption

Successfully Updated Msg

ViewAlbumWithCaption

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>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s