Building the Back-End of a Photo Site

For those of you who have been following the last few screencasts, you must have noticed that each tutorial has been centered around a "photo site" theme. (See Scanning Folders With PHP, How to Dynamically Create Thumbnails, and Create a Photo-Admin Site Using PHP and jQuery. Today, we'll build the backend for a photo site. This tutorial will teach you how to add, delete, and update photos.

Our Mission

• Create a database that will store our images.
• Create a home page that retrieves all of the photos that are stored in our database.
• Allow the user to upload photos.
• Write some validation to ensure that the user enters a proper description and chooses an image
• Use jQuery to allow the user to asynchronously update and delete specific photos.

There is simply too much to cover as a written tutorial. I've included a few key points. Refer to the screencast for the complete tutorial.

The Database Structure

Get the Photos From the Database

function getPhotos() {
	require 'database.php';
	$q = "SELECT id, tn_src FROM photo ORDER BY id desc";
	
	$result = $mysqli->query($q) or die($mysqli_error($mysqli));
	
	if($result) {
		while($row = $result->fetch_object()) {
			$tn_src = $row->tn_src;
			$src = $row->src;
			$id = $row->id;
		
			print '<li>
                     <a href="review_image.php?id=' . $id . '">
                      <img src="' . $tn_src . '" alt="images" id="' . $id . '" />
                    </a>
                   </li>';
                   
			print "\n";
		}
	}
}

Upload Photos

Form Validation

    if(strlen($_POST['description']) < 4) 
    $error['description'] = '<p class="alert">Please enter a description for your photo. </p>';
    
    if($filename == '' || !preg_match('/[.](jpg)|(gif)|(png)|(jpeg)$/', $filename)) 
    $error['no_file'] = '<p class="alert">Please select an image, dummy! </p>';

Update the Photo's Description Asynchronously

$('#description').click(function() {
            var originalelement = this;
            var currentText = $(this).text();

			$(this).fadeOut(100).before('<textarea id="input" cols="40" rows="12">' + currentText + '</textarea>');
		
		    $('#input').livequery('change', function() {
	            var id = <?php echo $_GET['id'] ?>;
			    var thisparam = this;
                var newText = $(this).val();
                
                if (newText == '') {
                   newText = 'Please enter a description'; 
                }
                          
	            $.ajax({
	                type: 'post',
	                url: 'updatePhoto.php',
	                data: 'id=' + id + '&description=' + newText,
	    
	                success: function() {
                        $(thisparam).remove();
	                    $(originalelement).text(newText).fadeIn(1000);
	                }
	           });
                
		    });
		});
	});

UpdatePhoto.PHP

require 'database.php';

$id = $_POST['id'];
$d = addslashes($_POST['description']);

if ($d == '') $d = 'Click here to enter a description.';

$q = "UPDATE photo SET description='$d' WHERE id = $id"; 
$result = $mysqli->query($q) or die('There was a problem updating this information.');

if($result) echo "Your photo has been successfully updated.";

Delete a Photo

	$(function() {
		$('img').click(function() {
		   	var id = $(this).attr('id');
		   	var thisparam = $(this);
			   	
			$.ajax({
				type: 'post',
				url: 'delete.php',
				data: 'id=' + id,
				
				success: function() {
		
					$(thisparam).parent('li').fadeOut('slow');
                    $('#result').remove();
					var response = '<div id="result"><h4>Success. The image has now been removed! </h4>';
					response += '<a href="index.php">Return to Home Page</a></div>';
					
					$('body').append(response);
				}
			});
		});
	})

Delete.PHP

require 'database.php';

$id = $_POST['id'];

$q = "DELETE from photo WHERE id = $id";
$result = $mysqli->query($q) or die("There was a problem!");

if($result) header("location: index.php");

Completion

So that does it. You could implement a bit more security into this application. But the idea is that these pages would already be secured by using something similar to an ht-access file. From here on, the sky is the limit. You should consider adding tags to your images, creating albums, etc. This should get you started.