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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

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

1 2 3 4 5

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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$('#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

01 02 03 04 05 06 07 08 09 10 11

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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

$(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);             }         });     }); })

Advertisement

Delete.PHP

1 2 3 4 5 6 7 8

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.