Photo Sharing Application using PHP

I know all of you must have uploaded your images on various sites like Facebook, Picasa, Flickr etc. And you all must have wondered how it works.

So I thought of sharing a simple Photo Sharing Application in PHP which I made a long time ago.

Here in this PHP Application we have an Image Upload Form where the user can select a single image at a time and upload it. After that the user can see the image in an Album.

That’s it I have tried KISS (Keep It Short and Sweet).

In the later part we will try out more functionality like adding a caption to the image, creating different albums, deleting an image etc.

I have created a Directory called PhotoSharingSimple inside www directory of wamp.

C:\wamp\www\PhotoSharingSimple

Inside this PhotoSharingSimple I have created a directory called upload where I am saving all the images.

For this app we have created a Database in MySQL – myphotos

In that we have a created table called mp_photos

Structure of the table is given below

Table:mp_photos

Field

Type

Null

Extra
id bigint(20) No AUTO_INCREMENT
album bigint(20) No
name text No
caption longtext No

 

When the user select an image and click on the Upload Button, the image gets uploaded to the Server.

Using the global PHP $_FILES array, you can upload files (here images) from a client computer to the remote server.

Here in this App we are uploading the image to the Server and storing it’s path in the Database Table mp_photos.

When we want to display the images in an album, we are fetching their path from the Database and displaying them using the <img> HTML element.

db.php
We have created the DB Connection in a separate file called db.php. This helps in making any changes to the DB Code easier.

<?php
$con = mysql_connect("localhost","Anna","secretpwd");
   if (!$con)
    {
      die('Could not connect: ' . mysql_error());
    }
  
  mysql_select_db("myphotos", $con);
?>

Style.css

We have kept the styles in a separate file and used them in all our PHP Files.


table.tab
	{
	border: 1px solid blue;
	text-align: center;
	border-collapse:collapse;
	background: #E0FFFF;
   }
   
tr.head{font-family: Tahoma,Arial; font-size: 15pt; font-style: normal; font-weight:; color: white; 
text-align: center; background-color:#00CED1}

tr.bod{font-family:Tahoma, Arial; font-size: 11pt; font-style: normal; font-weight: ; color:black}

input.sub{font-family:Tahoma, Arial; font-size: 14pt; font-style: normal; font-weight: ; color:black}

UploadPhotos.php

<html>
<head>
<title>Photo Sharing &lt; My Photos</title>

<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>

<script type="text/javascript">
function displaymessage()
{
var x=document.forms["UploadForm"]["file"].value

 if(x==null || x=="")
 {
  alert("Select an Image first");
  return false;
  }
 }
</script>

<?php include("Includes/db.php"); ?>

</head>

<body>

<form name="UploadForm" method="POST" action="UploadPhotos.php" enctype="multipart/form-data" onsubmit="return displaymessage()">
		
	<table border='0' width='400' cellspacing='10' cellpadding='05' align='center' class='tab'>
		<tr class='head'>
			<td colspan='2' align='center'>Upload Single Image</td>
		</tr>

		<tr class='bod'>
			<td><label for="file"><br />Image:</label></td>
			<td><input type="file" name="file" id="file" /></td>
		</tr>
		
		<tr>
			<td colspan='2' align='center'><br /><br /><input type="submit" name="upload" value="Upload" class='sub' /></td>
		</tr>
	</table>
</form>


<?php
//Uploading Images when upload button is clicked
if (isset($_POST['upload'])){
	$dirname = "upload";


if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/png")))
{
	
if ($_FILES["file"]["error"] > 0)
 {
 echo "Error: " . $_FILES["file"]["error"] . "<br />";
 }
else
  {
  $filename = $_FILES["file"]["name"];
  echo "Uploaded Image : $filename <br />";
  echo "Type : " . $_FILES["file"]["type"] . "<br />";
  echo "Size : " . $_FILES["file"]["size"] . "  Kb<br />"; 
  //echo "Temp file: " . $_FILES["file"]["tmp_name"]. "<br/>";
  
   echo "<img src='$dirname/$filename' alt='$filename' height='200' width='200' />";
  
  //if you don't want to allow same images getting uploaded again then remove the comments.
  if (file_exists("$dirname/" . $_FILES["file"]["name"]))
   {
      //echo $_FILES["file"]["name"] . " already exists. ";
      //stopping same image getting added more than once.
	  //die('' . mysql_error());
   }
    else
   {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "$dirname/" . $_FILES["file"]["name"]);
      //echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      //echo "<img src='upload/$filename' alt='$filename'>";
      
	}
	
	$sql_upload="INSERT INTO mp_photos(name)
		VALUES ('$dirname/$filename')";
  
	if(!mysql_query($sql_upload,$con))
	{
	die('Error: ' . mysql_error());
	}
	
	echo "<br /><br />Image Successfully Uploaded";	
	  
  }
  
  echo "<br /><br /><a href='PhotoAlbum.php'>See Album</a>";
  
  }//if the image is a valid type
  
  else
  {
	echo "Invalid file";
  }
  
  }//upload
  
mysql_close($con);
?>

</body>
</html>

Snapshot of Uploading an Image

Image Upload Form

Selecting the image for uploading

Uploaded Image


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";
		   }
		    
			echo "<td align='center' bgcolor= '#E0FFFF' onmouseover=\"bgColor ='Turquoise'\"            onmouseout=\"bgColor ='#E0FFFF'\">";	
			echo "<img src = '$name' height='150' width='150' />	
			<br/>$caption			
			</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>

Snapshots of the Album

View Album

Hope you enjoyed this application. Keep Coding 😀

3 thoughts on “Photo Sharing Application using PHP”

  1. Pingback: Photo Sharing Application in PHP with More Features- Adding Captions and Deleting Images « Programming Palace

  3. Gud tutorial i need to create share app as facebook usiong codeigniter or php can u show any tutorial or code…it would be helpful..

    Reply

Leave a comment