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
1 |
|
2 |
function getPhotos() { |
3 |
require 'database.php'; |
4 |
$q = "SELECT id, tn_src FROM photo ORDER BY id desc"; |
5 |
|
6 |
$result = $mysqli->query($q) or die($mysqli_error($mysqli)); |
7 |
|
8 |
if($result) { |
9 |
while($row = $result->fetch_object()) { |
10 |
$tn_src = $row->tn_src; |
11 |
$src = $row->src; |
12 |
$id = $row->id; |
13 |
|
14 |
print '<li> |
15 |
<a href="review_image.php?id=' . $id . '"> |
16 |
<img src="' . $tn_src . '" alt="images" id="' . $id . '" /> |
17 |
</a>
|
18 |
</li>'; |
19 |
|
20 |
print "\n"; |
21 |
}
|
22 |
}
|
23 |
}
|
Upload Photos
Form Validation
1 |
|
2 |
if(strlen($_POST['description']) < 4) |
3 |
$error['description'] = '<p class="alert">Please enter a description for your photo. </p>'; |
4 |
|
5 |
if($filename == '' || !preg_match('/[.](jpg)|(gif)|(png)|(jpeg)$/', $filename)) |
6 |
$error['no_file'] = '<p class="alert">Please select an image, dummy! </p>'; |
Update the Photo's Description Asynchronously
1 |
|
2 |
$('#description').click(function() { |
3 |
var originalelement = this; |
4 |
var currentText = $(this).text(); |
5 |
|
6 |
$(this).fadeOut(100).before('<textarea id="input" cols="40" rows="12">' + currentText + '</textarea>'); |
7 |
|
8 |
$('#input').livequery('change', function() { |
9 |
var id = <?php echo $_GET['id'] ?>; |
10 |
var thisparam = this; |
11 |
var newText = $(this).val(); |
12 |
|
13 |
if (newText == '') { |
14 |
newText = 'Please enter a description'; |
15 |
}
|
16 |
|
17 |
$.ajax({ |
18 |
type: 'post', |
19 |
url: 'updatePhoto.php', |
20 |
data: 'id=' + id + '&description=' + newText, |
21 |
|
22 |
success: function() { |
23 |
$(thisparam).remove(); |
24 |
$(originalelement).text(newText).fadeIn(1000); |
25 |
}
|
26 |
});
|
27 |
|
28 |
});
|
29 |
});
|
30 |
});
|
UpdatePhoto.PHP
1 |
|
2 |
require 'database.php'; |
3 |
|
4 |
$id = $_POST['id']; |
5 |
$d = addslashes($_POST['description']); |
6 |
|
7 |
if ($d == '') $d = 'Click here to enter a description.'; |
8 |
|
9 |
$q = "UPDATE photo SET description='$d' WHERE id = $id"; |
10 |
$result = $mysqli->query($q) or die('There was a problem updating this information.'); |
11 |
|
12 |
if($result) echo "Your photo has been successfully updated."; |
Delete a Photo
1 |
|
2 |
$(function() { |
3 |
$('img').click(function() { |
4 |
var id = $(this).attr('id'); |
5 |
var thisparam = $(this); |
6 |
|
7 |
$.ajax({ |
8 |
type: 'post', |
9 |
url: 'delete.php', |
10 |
data: 'id=' + id, |
11 |
|
12 |
success: function() { |
13 |
|
14 |
$(thisparam).parent('li').fadeOut('slow'); |
15 |
$('#result').remove(); |
16 |
var response = '<div id="result"><h4>Success. The image has now been removed! </h4>'; |
17 |
response += '<a href="index.php">Return to Home Page</a></div>'; |
18 |
|
19 |
$('body').append(response); |
20 |
}
|
21 |
});
|
22 |
});
|
23 |
})
|
Delete.PHP
1 |
|
2 |
require 'database.php'; |
3 |
|
4 |
$id = $_POST['id']; |
5 |
|
6 |
$q = "DELETE from photo WHERE id = $id"; |
7 |
$result = $mysqli->query($q) or die("There was a problem!"); |
8 |
|
9 |
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.
By
