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.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post