Create a Photo Admin Site Using PHP and jQuery

Oct 29th, 2008 in Screencasts by Jeffrey Way

I'm pleased to present you with part one of a two part series on creating a photo site using PHP, jQuery, and AJAX. Originally, I intended to fit the entire tutorial into one screencast, but that quickly became a pipe dream as I realized that there was simply too much to cover. Nevertheless, even if you only watch this first video, you should learn a great deal.

We'll be retrieving images from a database, creating a simple login form with authentication, and will then allow for our database to be asynchronously updated. Sounds good? If so, let's get into it.

Author: Jeffrey Way

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of both ThemeForest, and CodeCanyon. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.

Our Goal

For this lesson, our goal is to create a photo admin section where an administrator can retrieve photos from a database and update the title of his photos simply by clicking on the appropriate text. To make this page more secure, we'll create a simple membership system as well. In subsequent tutorials, we'll expand upon these concepts.

Creating Our Tables With MySQL

Open PHPMyAdmin and create a database called "db". Within this database, we'll need to add two tables: "photos" and "users".

photos

Rather than hard-coding our images into our document, we'll store them in a database. Though we could make this table as sophisticated as we want, we'll just keep it simple for now.

id - INT - Primary Key - Auto Increment
title - VARCHAR(500)
src - VARCHAR(200)

users

In order to edit our photos, we need to create a simple membership system that will allow our user to login and edit his photos. We obviously don't want to give everybody that right!

id - INT - Primary Key - Auto Increment
first_name - VARCHAR(50)
last_name - VARCHAR(50)
email_address - VARCHAR(75)
user_name - VARCHAR(25)
password - VARCHAR(30)

Creating the Simple Layout

Create a new php document and add the following into your document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Photos Site
	<link rel="stylesheet" href="css/default.css" />
	<link rel="stylesheet" href="css/jquery.lightbox-0.5.css" />
	
	<script src="js/jquery-1.2.6.pack.js" type="text/javascript">
	<script src="js/jquery.lightbox-0.5.pack.js" type="text/javascript">
	<script src="js/scripts.js" type="text/javascript">
</head>
<body>
<?php require_once 'photo.php'; ?>

<form action="changePhotoTitle.php" method="post">

<div id="container">
  <h1>My Photos <small>click on the text to change the title.</small></h1>
  <a href="login.php?logout=1" id="logout">logout
  
  <div id="main">
	
    <?php  require 'getPhotos.php'; ?>
		
    <div id="response" class="hidden" />
  </div><!-- end main-->		
</div><!-- end container -->

</form>
</body>
</html>

Don't worry too much about some of what's here. We'll go over everything in time. But as a quick overview, we're importing our jQuery library, a jQuery lightbox plugin, and our custom scripts (that we'll create soon). Take a few seconds to review the CSS file. I won't go over it too much in this written article - as it's long enough already! Refer to the screencast for more information. But, I assure you it's pretty standard and simple stuff.

The primary thing that you need to focus on right now is:

<?php  require 'getPhotos.php'; ?>

This will be the section where we retrieve our photos from the database. Let's work on that right now. Create a new pagecalled "getPhotos.php".

Let's quickly go over what we need to accomplish with this code.

Create a connection to the database
Retrieve all of the rows from the photos table
If the connection was successful, create an unordered list.
Filter through the rows and place the necessary information within list item tags.

Paste the following code into your document:

<?php

require 'database.php';

$query = "SELECT id, title, src FROM photos";

$result = $mysqli->query($query) or die(mysqli_error($mysqli));

if ($result) {
  echo "<ul id='photos'> \n";
	
  while ($row = $result->fetch_object()) {
	
    $title = $row->title;
    $src = $row->src;
    $id = $row->id;
		
    echo "<li><a title='$title' href='images/$src'><img src='images/$src' id='$id' alt='$title' /> </a>\n";
    echo "<h4>$title</h4> \n";
    echo "<input type='text' name='title' value='$title' /></li> \n \n";	

    }
  echo "\n</ul>";
}
?>

The first thing we need to do is create a connection to our database. However, we'll be doing this many times over the course of this project. So let's create another page called "database.php" and store the information there. That way, we only need to edit one file, should the need arise. Add the following code into your database.php file.

<?php

$db_name = "users";
$db_server = "localhost";
$db_user = 'root';
$db_pass = '';

$mysqli = new MySQLi($db_server, $db_user, $db_pass, $db_name) or die(mysqli_error());
?>

We're creating a variable called "$mysqli" and are setting it to a new instance of the "MySQLi" object. We need to pass in four parameters:

database name
the server
username
password

To keep things clean, we'll place those values in variables and reference them. If the connection isn't made, we'll tell it to "die".

Querying the Database

Now let's move back to our "getPhotos.php" file. The next step, is to query the database.

$query = "SELECT id, title, src FROM photos";
$result = $mysqli->query($query) or die(mysqli_error($mysqli));

Our query is extremely simple. We're essentially retrieving everything from the database. You might want to modify thisquery to fit your own application. We pass in the query by using "$mysqli->query($query)".

If that query was performed successfully, we'll create our unordered list and add our images.


  echo "<ul id='photos'> \n";
	
  while ($row = $result->fetch_object()) {
	
    $title = $row->title;
    $src = $row->src;
    $id = $row->id;
		
    echo "<li><a title='$title' href='images/$src'><img src='images/$src' id='$id' alt='$title' /> </a>\n";
    echo "<h4>$title</h4> \n";
    echo "<input type='text' name='title' value='$title' /></li> \n \n";	

    }
  echo "\n</ul>";

We create a variable called $row that will be equal to each instance of a row in the database. As long as there are rowsto be retrieved, this variable will contain that specific row's information.

We'll store all of the information that we need in variables. For example, let's say that in one row, we have the following data.

id = 4
src = 10.jpg
title = "My favorite photo"

By performing $row->title, we can grab that value and store it in our $title variable. So in this case, $title = "My favorite photo"; $src = "10.jpg"; $id = 4;.

All that we need to do now is add that information into our image and anchor tags. The last line will add an input field. This will eventually allow the user to update the title of the image asynchronously.

If you run "index.php" in your browser, you should see the following:

AJAX Time

Now that we have the basic layout of our site, let's ajaxify it! We'll start by summarizing what we need our PHP to do. I find that this helps a great deal when working.

When the user clicks on the title of a specific image, we'll then display an input field that allows the user to change the title.
When he tabs away from that input field, we'll use AJAX to perform a SQL update statement.
To give the user some feedback, we'll display a div that says something along the lines of "Success. The database has been updated."

Create a PHP file called "changePhotoTitle.php" and paste in the following code:


<?php

require_once 'database.php';

$title = mysql_real_escape_string($_POST['title']);
$id = mysql_real_escape_string($_POST['id']);

$update_query = "UPDATE photos SET title = '$title' WHERE id='$id'";
$result = $mysqli->query($update_query) or die(mysqli_error($mysqli));

if ($result) {
	echo "Success! <br />";
	echo "The title of this photo has been changed to: <strong>$title</strong>";	
} 
?>

We've required the database file again. (Aren't we glad that we stored that in a separate file?) Next, we're creating twovariables. $title is equal to whatever the user enters into that input field. $id is equal to its respective id field inthe database.

To prevent some SQL injection, we'll wrap those post values with mysql_real_escape_string().

Updating the Database

The update is rather straight forward. Update the photos table and change the title field to whatever the users enters in to that textbox; But only change the title field that has an id equal to $id. (Refer to the screencast for a better understanding.)

If the update has been performed successfully, we'll echo a congratulations message.

Implementing the Javascript

In order to perform the update without a postback, we'll use jQuery. Create a new Javascript file called "scripts.js" andpaste in the following:

$(function() {

    $('h4').click(function() {
        $(this).slideUp().next('input').slideDown();
    });

    $('ul#photos input').change(function() {

        var id = $(this).parent('li').find('img').attr('id');
        var thisParam = $(this);
        var title = $(this).val();

        $.ajax({

            type: 'POST',
            url: 'changePhotoTitle.php',
            data: 'title=' + title + '&id=' + id,

            success: function(response) {
                $('input').slideUp();
                $(thisParam).prev('h4').text(title).slideDown();

                $('#response').fadeIn(1000).empty().append(response).prepend('<span id="x">X</span>');

                $('span#x').click(function() {
                    $('div#response').fadeOut('slow');
                });
            }
        });
    });
});

When the user clicks on the title of an image (the h4 tag), we'll run a function. We'll hide the h4 tag and then display the input field instead.
We'll create two variables. "title" will store the value of what is entered into the textbox. "id" will store its respective id.

AJAX

Using "$.ajax", we'll call the update. $.ajax will accept four parameters.

Type = the type of update. In this case, it will be 'Post'
Url = the url of the file that will perform our update. We've already created that file.
Data = the information that we're going to pass to changePhotoTitle.php. In this case, we're passing the value of the textbox and the id.
Success = this will be the function that runs if the update has been performed successfully. In this function, we'll remove the textbox because we no longer need it. We'll go back and display the h4 tag that now has the updated value.
To provide user feedback, we'll take take the "response" div that we created at the beginning of this tutorial and fill it with our "Congratulations" echo. Those last two lines simply allow for a way for the user to remove that "Congratulations" div. If you need to, refer to the screencast for a full explanation.

Implementing the Login Form

Now obviously, we don't want just anyone to be able to edit the titles of these images. So, we'll create a simple membership system.

Create a new page called "login.php" and add the following code:

<?php 
if($_GET['logout'] == 1) {
	setcookie('authorized', 0, time()-3600);
}
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Login to edit photos</title>
	
<style type="text/css">
h2 {
margin-top: 0;
}


body {
text-align: center;
font-family: helvetica, arial;
}

#loginForm {

padding: 1em;
background: #e3e3e3;
width: 260px;
margin: 3em auto 0;
text-align: left;
}

</style>
</head>

<body>
<div id="loginForm">
	<form method="post" action="confirmLoginCredentials.php">
	<h2>LOGIN</h2>
		<p>Username: <input type="text" name="username" /></p>
		<p>Password: <input type="password" name="password" /></p>
		<p><input type="submit" name="submit" value="Login" /></p>
		
	</form>
</div>
</body>
</html>

Within the body tag, we have a simple form that has two fields: one for the username, the other for the password. When the user clicks the "Login" button, the information from those textboxes will post to "confirmLoginCredentials.php". Go ahead, create that page right now and add the following.

<?php

$username = mysql_real_escape_string($_POST['username']); 
$password = mysql_real_escape_string($_POST['password']);

require 'database.php';
$q = "SELECT first_name, last_name FROM users WHERE user_name = '$username' AND password = '$password'";

$result = $mysqli->query($q) or die(mysqli_error($mysqli));


if (!mysqli_num_rows($result) == 1) {
	header("Location: login.php");	
	}
else {
	setcookie('authorized', 1, 0);
	header("Location: index.php");
}

?>

Per usual, we are storing the values from those textboxes in variables called $username and $password, respectively. We once again pull in our database.php file. Our query retrieves the row from the database where the user_name and the password are equal to what was entered into those two textboxes. Only one row should be returned. If that doesn't happen, the user will redirected back to "login.php". Otherwise, we'll send them to the main "index.php" page and set a cookie.

setcookie('authorized', 1, 0);

The name of our cookie will be "authorized"; the value will be equal to 1; and the expiration date will be 0. 0 essentially means that when the user closes his browser, that cookie will expire.

When ther user is directed to the index.php page, we need to write a quick bit of code that ensures that there is the required cookie on the user's computer. Go back to index.php and add the following code to the very top of your document.

<?php
// Verifies if you have a cookie - credentials.

if (!$_COOKIE['authorized'] == "1") {
	header("Location: login.php");
}
?>

If the user has a cookie named "authorized" on his computer, and that cookie has a value equal to 1, then display the page. But if they DON'T, send them back to login.php.

Logging Out

The final step in this tutorial is to allow the user to log out. Find the tag on your index.php page that looks like this:

<a href="login.php?logout=1" id="logout">logout</a>

I'm adding a key-value pair to this url. That value will be passed to 'login.php'. Go to this page and add your last bit of code to the very top.

<?php 
if($_GET['logout'] == 1) {
	setcookie('authorized', 0, time()-3600);
}
?>

If, in the querystring, the key of 'logout' is equal to 1, set a cookie that has an expiration date of an hour ago. This will remove the cookie from the user's computer.

Finally, you're done...for now!

So we've created quite a bit. Unfortunately, to do everything I'd like would take pages and pages. Perhaps next week, Part 2 will be released. In Part 2, we'll implement the following:

Write some code that allows the administrator to edit the photos. If they aren't logged in, they can view the photos, but aren't allowed to edit them.
Implement Lightbox functionality
Create insert and delete pages
Secure the site more
Add more validation
Make the site prettier
And plenty more...

Thanks so much for watching the screencast and reviewing the article. There's more to come!

Check out some more great tutorials and articles that you might like

Building the Back-End of a Photo Site Screencasts
Learn how to AJAXify Comment Forms Screencasts
How to Build a Super Duper News Scroller Screencasts

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

Thayse October 29th

Great!
( Reply )
Ryan October 29th

Very usefull for me..thnks.but can we use “session”?and what is the differences between those technique..(sorry i’m newbie here)
( Reply )
Jeffrey Way October 29th

@Ryan – Sure you can use Session. There are advantages to both methods. I’ll go over that in part 2.
( Reply )
1. vignesh June 23rd
  
  Very good!
  Your videos are always simple and help me and other users!
  Keep doing videos like this please!
  Thanks!
  ( Reply )
Tommy M. October 29th

There are just a few small mark up errors and screen shot inconsistencies. (Forgot the tag and password varchar(25) instead of varchar(30)) Other than that, great tut!:-)
( Reply )
Jeffrey Way October 29th

@Tommy – Yeah good eye. The screenshots were from the screencast demo. The code was from the original mockup.
Shouldn’t make too much of a difference though. They’ll both work.
( Reply )
Martin October 29th

I really liked this, looking forward to part 2. I’d like to see the site secured a lot more and the ability for users to stay logged in even when they close their browser (so my guess is another cookie that doesnt expire?)
many thanks,
Martin
( Reply )
insic October 29th

Wow, really nice tutorial. very usefull.
( Reply )
Dan October 29th

this is very very helpful. Thanks, Jeff.
( Reply )
Just wondering. October 29th

@insic – I notice you post the same comments on many web resource sites.
“Wow, really nice tutorial. very usefull.”
Is this some sort of marketing technique for your own site?
Sorry, not trying to be rude, just wondering.
( Reply )
1. B. Friddy March 11th
  
  LOL….I’ve noticed that as well, seems a bit odd…and I’d second the theory of his / her marketing technique. Let’s add some relevant feedback when leaving comments, not just a ‘cut and paste’ reply. What good is that?
  ( Reply )
  1. ME April 6th
Barttos October 29th

Seems to be very good tutorial. When i went home, i will comment few rows of code.
( Reply )
Alex Tayra October 29th

very useful, thanks alot!
waiting for P2
( Reply )
Catsoup October 30th

Thx ….I can’t wait for the second part (^___^)
( Reply )
j0sh October 30th

wow this is a really great tutorial. i wan to hear more on how to update your mysql database with ajax
( Reply )
max October 30th

how do users upload pics?
( Reply )
Julien L October 30th

That’s awesome ! Great work.
( Reply )
owain Llewellyn October 30th

This is great,
I’ve been watching all your screen casts lately.. they’ve been superb… thanks for sharing…
Owain
http://www.icomcreative.com
( Reply )
Shane October 30th

A fantastic effort Jeffrey – how long did this take you to knock up?
Thanks a lot.
( Reply )
Elpatator October 30th

funky
( Reply )
GKSR October 30th

There are some errors and where is the sql file. But really good.
( Reply )
Barttos October 30th

1. if (!mysqli_num_rows($result) == 1) {
header(”Location: login.php”);
}
else {
setcookie(’authorized’, 1, 0);
header(”Location: index.php”);
}
w00t
Anybody can manually set the cookie authorized to 1, and they have acces to admin cp.
2. Password in db is not crypted.
3. Till now it’s all…
( Reply )
EasyPeasy October 30th

Wow!! Great Tutorial ..nicely done!!
( Reply )
Momo October 30th

yes, but you can crypted with session
No problem
( Reply )
James October 30th

Really nice work Jeffrey!
( Reply )
Matthew October 30th

Wow great article. I would love to see the same article done in Ruby…
( Reply )
Thomas Milburn October 30th

A nice tutorial even if the security is pathetic! I hope to see that fixed in part 2.
Also it looks like some of the code is different in the source files as in the tutorial.
( Reply )
Jim Fitzsimmons October 30th

Wow. that’s gorgeous.
( Reply )
Craigsnedeker October 30th

Awesome work! Wheres the demo?
( Reply )
Anthony Bruno October 30th

This is really awesome Nettuts! Im so glad I can finally find a tutorial on how to do user authentication! Thank you.
( Reply )
dave October 30th

Thanks for this, I actually need to write a system just like this for class!
This will be a great reference
( Reply )
Furley October 30th

Nice tutorial, I just recently built a site just like this.
( Reply )
Connor October 30th

Great Tutorial Jeffrey!
( Reply )
Barttos October 30th

Connor, I’ll be very happy to see this tutorial on ROR and i think not only I.
How about that?
( Reply )
Freddie October 30th

A great Tutorial. Thanks!
( Reply )
Jeffrey Way October 30th

@Shane – It took way too long! I had to cut a bunch out for part.
Yes, we’ll definitely improve the security in part 2. I didn’t want to cover too many advanced topics. Code overload happens way too easily.
We’ll probably switch to using session, though I’d love to hear everyone’s thoughts.
( Reply )
Justin Young October 30th

I don’t see the sql file. Am I missing something?
( Reply )
John October 30th

Great tutorial!
But, I’d be rather happy if the security was in more focus, as persons above mentioned. Maybe it’ll be advanced shit but it’s totally worth it. I’m quite green in PHP, and I want to read everything I can about improving security in web apps. I wanna learn from the beginning, so to say..
So don’t hesitate to sneak in more security-enhancing functions, and perhaps explain some of them. Thanks in advance!
( Reply )
IRW October 30th

Wow. Just yesterday I was searching for a nice portfolio tutorial to start one of my projects and I found nothing. NOTHING!! LOL! I can’t wait to start now. This tut is bad-ass!
( Reply )
Yosi October 30th

Hi,
I tried to do something similar,
But I have problem in my PHP Code can some one help me?
while($row = $DB->fetch_array($query))
{
extract($row);
echo “”;
echo “$id”;
echo “$username
“;
echo “$password”;
echo “$email”;
echo “”;
}
the problem is:
I get something like that(without id,password,email):
user
check
When I click “user” it changes to input but with value of “check” and if I click on “check” I get input with value of “check”.
What is the problem?
( Reply )
Steffen October 30th

What about XSS? htmlspecialchars() !
( Reply )
Carlos@webbynode October 30th

Would love to see this stuff in Rails, i bet its alot less code.
( Reply )
tefly October 30th

wow great
( Reply )
Alex October 30th

You shouldn’t use a cookie as an authorization method. Use session instead. The cookie is stored on the client an easy manipulative. The session on the other hand is stored on the server and hence safer.
Imagine having multiple users and a cookie stored with the user id. A backdoor just opened up to manipulate the user id and log on as anyone you want.
I know the log on script is very basic and a lot can be added. But it’s good to know the diffidence between cookies and sessions.
Great tutorial though.
( Reply )
Jeffrey Way October 30th

@Alex – Yep. Refer to my previous comment. We’ll be switching to the session object in part 2. Using cookies is a nice and basic way to mildly secure a site. Good point.
@Steffen – Coming in part 2!
( Reply )
Martin October 30th

will using the session object allow the site to remember the user even if they close down their browser, i thought you could only do that with cookies… correct me if i’m wrong.
( Reply )
Ben Griffiths October 30th

This is really great, thanks
( Reply )
Dan October 30th

As a newbie to jquery and php, this is great. Thanks for your efforts!
( Reply )
Moksha October 30th

thanks its really useful, i hope to see some of your ASP.NET / JQuery Tutorial, thanks for it. i all try and make it in asp.net
( Reply )
David H. October 30th

Jeff,
I love this TUT! Like you, I love the Visual Studio IDE. However, I’ve never seen it used to develop PHP before. I’d like to have some more information about how you got this all up and running. Is this 2008? Do you know if express edition work? What type of solution did you start with. Are any special add-ons required?
Keep it up!
–DH
( Reply )
fly2279 October 30th

Time and time again I find the greatest tuts published here. I’m glad you aren’t afraid to actually teach something with substance and that can be a great use. Thanks and I can’t wait for part two.
( Reply )
Alex Tayra October 30th

Mr. Magic, it’s just basic steps to PHP / JS, author doesn’t make aim to superb-programmers. And as was noted, security is a subject of Part 2.
( Reply )
Jeffrey Way October 30th

Guys, don’t worry. Security deserves a tut of it’s own! What we have here works just fine for a mild security system. It’s not like we’re protecting secret military launch codes! But, we’ll enhance that aspect a great deal!
@David – I’m using Visual Studio 2008 here. All you need to do is install an add-on. You can download a free 30 day trial here:
http://www.jcxsoftware.com/download.php
Hope this helps!
( Reply )
Abethebabe October 30th

Great tutorial, can you be a little louder next time? I had to struggle to hear
( Reply )
guycow October 30th

Hello – Thanks for the great tutorial. I’m a PHP newbie and am have a bit of trouble. I uploaded the files to my web hosting space and am getting this error:
Fatal error: Cannot instantiate non-existent class: mysqli
which stems from the database.php page. Any ideas?
( Reply )
Jeffrey Way October 30th

@guycow – Hmm.. Do you know which version of PHP they’re using? Did you upload the database?
( Reply )
Ben October 30th

Nice!
I’m still getting style issue’s with the new NETTUTS site in Safari. Some minor ones with the menu.
( Reply )
Casey L. Jones October 30th

Totally ingenious tutorial! Waiting anxiously for part 2.
( Reply )
Khaled Dostzada October 30th

Wow, your code was very insecure, your method of authorization was to set a cookie with a value of 1 or 0, one can just create a cookie called authorize and set it to 1 to bypass the login
( Reply )
Abethebabe October 30th

It is pretty unsecured but he left it out to save time and get to the juicy parts.
( Reply )
Ariyo October 30th

Although this was a bit beyond my PHP knowledge but I loved it. Thanks for all of your hard work Jeff. I’ve been enjoying your screencasts. I will definitely try this.
( Reply )
Mr. Magic October 30th

While you can justify it by saying that you need a separate tutorial for security (which is true!), a beginner may not know that using cookies in this manner is insecure. It should be at leasted pointed out in the article that they should find a more appropriate way to do it (for example stick it in the session, which would require maybe on more line or so)
( Reply )
jbcarey October 31st

some epic stuff here!!! Thanks!
( Reply )
Alex October 31st

Quite alot for my php beginner brain to take in, but it all makes sense to me, re-creating it from scratch is another thing though, maybe after playing around and a few watchs ill be able to do it. very usefull and informative.
thanks!!
( Reply )
johan marklund October 31st

This was a great tutorial, u learned me much about mysql and php technique’s to create really nice pages
( Reply )
Dave October 31st

Excellent Effort!!!
( Reply )
Sammy Deprez November 1st

Excellent Tutorial
a mix of php, html, ajax, jquery, css.
Thx
( Reply )
Sean J November 1st

Jeff,
in your normal fashion this is a great detailed tutorial for beginners. Your skill for teaching and explaining is wonderful. Thus tutorial employs a number of technologies as required to create a dynamic database web application from scratch and for that much applause.
I agree with your desire to make the tutorial simple yet feature rich, but you should really edit the article as suggested by Mr. Magic. Add a note to make it clear that the security method shown here is not appropriate for anything beyond hobby use. Yes you will provide a more robust security model in part 2, but some readers with projects will assume this is all it takes to lock down a website. They will deploy real sites with this simple security, maybe even for customers. They will learn the hard way that it is insecure. The key here is to make new web developers sensitive to security besides getting their creative juices going.
( Reply )
Sean J November 1st

Now my suggestions for security in part 2:
add a hidden field to the login with value 1, use either jquery md5 or sha1 on click of the login button to change the hidden field value to 2 change the value of the password field and replace with the hash before post. if the client has javascript disabled then the password will be normal cleartext and you can use php md5 or sha1 on the server to hash the password this would be indicated by the hidden value of 1.
store the password in the database hashed. for additional security encrypt the hashed password with a salt key and store that instead.
validate the login data with regular expression tests using jquery and on the server side in php. test for proper minimum and maximum length and invalid characters. test for sql commands or terminology.
add the userid to the photo table and store the current userid when the photo record is added. store the userid as a session variable at login. modify the photo page to only permit edit of the photo if the userid matches
this I believe would satisfy real world security and even give readers insights.
( Reply )
mReXiTuS November 1st

Very nice screencast
( Reply )
sm November 1st

Where do you get photo.php?
Did I miss something, or is it something that comes with PHP. Because I am getting errors and I don’t see here photo.php comes from.
thanks!
( Reply )
T.[Bo] November 1st

Great Tuts,
But i’ve a lot of headers errors like :
“Cannot modify header information”
I dont understand why.
I’ve also converted the mysqli request to mysql request because my provider doesnt accept MySqlI request …
I’ve also put require ‘database.php’;
before
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
cause i’ve error like “Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: Can’t connect to local MySQL server through socket”
That’s all for me
If would be happy if anybody may help me
Ps: Sorry for my bad english.
( Reply )
jason November 1st

got it to work right away, great tut Jeff
i do have one problem though
when i go to change the tile, the title changes but i cant click off and finalize the change… basically the field stays open
when i refresh the page i get the myphotos title back on the photo i had previously changed and when i click to change the title once again i see the name i had given it, but again i cant get to the final steps
of just clicking off the title and setting the new name
( Reply )
Tech Blog November 2nd

nice tutorial, well done!
( Reply )
E-Money Knowledge November 2nd

Very informative to newbies. Great tutorial.
( Reply )
Eduardo November 2nd

Jeffrey Way is the man! awesome tutorial!
Jeffrey, why don’t you create something like “master series on jQuery” ?
I’d buy as soon as you release.
thanks man
( Reply )
Andrea November 3rd

Great tutorial, if I could read this two years ago, it would have saved me a lot of time.
About the security issues, he couldn’t add more to this tutorial without making t too long and so less useful, this is the perfect mixture of simplicity and completeness I have ever found.
Looking forward at more tutorials.
( Reply )
peter November 3rd

hats off for this tutorial.
i am a flash programmer for many years and “weirdly” enough i never got into javascript + other languages. but now with this tutorial i finally jumped on the train and i basically can translate many things from flash directly to the workflow of these languages.
tops!
( Reply )
Jeffrey Way November 3rd

@Andrea, @Peter – Thanks! That’s sweet of you. Check back next Wednesday for Part 2 in this series.
This week, we’ll be slicing up a psd and creating perfect HTML.
The best way you can say thank you is by digging it, tweeting it, emailing to a friend, etc.
( Reply )
Grégoire November 3rd

yeaaaaha! here we are: what i’m looking for about few months applyied to portfolio !!!!
hey, will you deploy it for wordpress plugin?
i’m waiting the part 2…
( Reply )
ashvin November 3rd

nice tut!
these videos are not for download?
and hope u show how to let the user upload photos in part 2.
Keep up the good work. thanx.
( Reply )
Jeffrey Way November 3rd

@ashvin – We will!
( Reply )
Ben November 3rd

Excellent tutorial. I have done similair things in PHP before, but never used AJAX.
Would of like to see the login intelligence handled with ajax as well perhaps.
Thanks Jeff.
( Reply )
www.axzm.com November 3rd

Great stuff! Creating a Photo Admin site with all the latest web 2.0 scripts and functionality seems way more accessible now the way you broke it down. Thank you!
http://www.axzm.com
( Reply )
Vikram S. Haer November 3rd

Any update on when part 2 is gonna be released? Looking forward to it! Awesome tutorial.
( Reply )
Joao November 4th

Great tutorial!
offtopic: what do u use to highlight php code in VS?
( Reply )
Nate November 4th

I cannot get the data written to the database. Every time i refresh the page the data goes back to how it was. I tried using the source files, but i still have the same problem
( Reply )
Yannis Kolovos November 4th

Jeffrey Way Nice Thanks
( Reply )
Jeffrey Way November 4th

@Joao – Check this out:
http://www.jcxsoftware.com/
( Reply )
TommyP November 5th

Great work! Cant wait to give this a go. Looking forward to part 2!
Any chance you could include a small section about how to add permissions so only some users can edit the titles?
( Reply )
ablbaset November 6th

Great tutorial,
Thank you
( Reply )
Vikram S. Haer November 6th

Please do the second one soon! can’t wait…
( Reply )
dronix November 6th

awesome screencast, waiting for part 2 as well.
( Reply )
Ben November 7th

Hi all,
I encountered an error with this code using mysql_real_escape_string() on the mysqli object.
If you encounter this same problem, to fix it you need to change the line:
$title = mysql_real_escape_string($_POST['title']);
$id = mysql_real_escape_string($_POST['id']);
to:
$desc = $mysqli->real_escape_string($_POST['desc']);
$id = $mysqli->real_escape_string($_POST['id']);
Cheers,
Ben
( Reply )
1. aboleo May 17th
  
  shouldn’t be fixed by just adding mysql_escape_string instead of mysql_real_escape_string
  ( Reply )
2. johan November 11th
  
  LOL – I had this issue as well. Unfortunately this was the first pit of php/mysql I’ve ever worked with and isolating this issue was a f-ing nightmare…
  ( Reply )
Ben November 7th

ignore the ‘desc’ that was a variable I changed myself , for my own purposes.
So if you are following the tutorial exactly, it should be:
$title = $mysqli->real_escape_string($_POST['title']);
$id = $mysqli->real_escape_string($_POST['id']);
( Reply )
Chris November 7th

Wow! THanks so much. I’m new to website design and I’ve been scanning the net for a basic mysql/jquery tut for ages. Hopefully I can build on this and create an awesome website! I look forward to the next part of this tut.
( Reply )
fractalbrothers November 7th

this tutorial is gold.
( Reply )
T Pham November 8th

wow, thank for great tut.
( Reply )
Takumi86 November 8th

wow this is quite helpful, i’m gonna tell my friend which working as web development about this, i’m sure he’s gonna like it
( Reply )
Anthony Bruno November 8th

Im sitting on pins and needles waiting for part 2!
( Reply )
Lorentz November 10th

awesome, Great tutorial.
Thank u soo.. much
( Reply )
Austin November 10th

Great Job, got me started on making a more complex yet similar photo application.
I’d love to see a part 2 with an upload and a register user form.
( Reply )
Glen Robertson November 12th

The changePhotoTitle.php is quite dangerous. I know this is a beginners tutorial which is meant to be simple, but the script should at least check that the user invoking the script via AJAX is logged in. This script allows anyone to change the names of the images, although it is a minor problem. It is important that beginners understand this because they will likely go away and implement the scripts from this tutorial and not know any better.
( Reply )
Sammy Deprez November 12th

thxn, i’m going to use this for my blog when i go to kenya.
I’m just going to extend it with albums.
Great tutorial!!
A++++
( Reply )
digitalgirl November 13th

Looking forward to part 2! Make it this week!
( Reply )
VIkram November 13th

This is taking too long please come out with the second one soon you guys rock.
( Reply )
Raymond November 14th

Very nice Ajax tutorial using PHP and JQuery. Thank you for sharing
( Reply )
Blake November 15th

I’m using PHP 5.2.6 on my server so I had to change a few lines of code it to get it to work.
If anyone needs help getting it to work please contact me il be glad to help you.
Aim:o dioxide o
email: blakedevlin60@yahoo.com
Enjoy,
Blake
PS: Those of you saying you get a DB error not having access make sure you created a DB and you changed the info in the Database.php file to the correct fields.
( Reply )
majman November 15th

LOVE the tutorial – would LOVE even more if part 2 included an interface to add photos, so that they wouldnt’ have to be manually added through phpMyAdmin.
( Reply )
Eric Thayne November 18th

Yes! Please add something in part two for uploading photos to the database! Thanks, great article!
( Reply )
Blbr3 November 19th

Great tutorial, I love the way it was done, and most importantly, I did learn something. Thank you.
PS. It would be great to see second part!
( Reply )
ODEZIGN November 23rd

Nice tutorial!! When will part 2 come out? I’m Looking forward to it everyday. Thanks for the part 1, great job, keep up the good work!
Greatz,
Orhan
( Reply )
sew few November 27th

Great tutz .PLZ continue with it.
( Reply )
David Cooke November 28th

Might be worth noting to anyone that doesn’t know (becuase i found this out the hard way ), that you must include the database connection data in the php file you are calling.
It will not work if you include the db conenction data in the php file that hosts the js files.
( Reply )
momo November 28th

SORRY
but your upload don’t work !
( Reply )
rufus denne December 1st

Hi there, i found this tutorial extremely beneficial! ALL of it. although i would like some more information and you said comment if you are having problems. the tutorial didnt go through the lightbox plugin that it said it would at the start.
i have a simple webpage and i would like to make a link from a picture… text whatever, to display something in that cool popup way.. most of the tutorials assume you have a set of images and i only have one! it should be easier but i am struggling! i have basically made a div tag into a link, and when you click i want it to popup and when you close it the page goes back to normal!
i hope you can help!
( Reply )
Dimitree December 2nd

I can’t wait for part 2 of this amazing tutorial….
( Reply )
Josh December 9th

Great lesson I am really wanting to know how to use the Lightbox function with a database. Right now I am having to statically edit the pages as they are added or removed.
Does anyone know how to do that now or know when the next lesson will be posted.
( Reply )
Jeff Adams December 9th

More, more, more!!! I love these screencasts they make the code make sense, you really could do so much more of these (in time obviously) and they are so real-world examples that they make it worth watching!
( Reply )
Lisa December 15th

Hi,
I am having the same problem that someone else mentioned earlier…I get this error:
Fatal error: Cannot instantiate non-existent class: mysqli in ../public_html/photosite/database.php on line 8
I have php version 4.4.7 on my server…do I just need to get this upgraded to a more recent version maybe?
Thanks,
Lisa
( Reply )
Lisa December 16th

Right, I have got a lot further than my post above now – I’ve set up php 5.2.6 and mysql on my local machine and this now works.
However I am having trouble getting Updating of titles to work.
Someone else has posted exactly the same issue that I am having, so I will just quote it below rather than reword it:
“when i go to change the tile, the title changes but i cant click off and finalize the change… basically the field stays open.
when i refresh the page i get the myphotos title back on the photo i had previously changed and when i click to change the title once again i see the name i had given it, but again i cant get to the final steps
of just clicking off the title and setting the new name”
I would be grateful if anyone has any suggestions as to what the problem might be as I really want to reach the end of the tutorial!
Sorry about being such a newbie!
Thanks
( Reply )
Hakeem December 30th

Wow , great tut , I like and do it thanks man
( Reply )
axcessit January 6th

I’m getting the following msg:
Parse error: syntax error, unexpected T_OBJECT_OPERATOR in /XXX/XXX/photo/confirm_login_credentials.php on line 2
after changing code to
real_escape_string($_POST['title']);
$id = mysqli->real_escape_string($_POST['id']);
Please Help.
( Reply )
axcessit January 7th

Please ignore. I fixed this yesterday.
Great tutorial! Keep them coming…:)
( Reply )
Andrew January 13th

great tutorial jeffery but the index.php breaks when it tries to execute the getPhoto.php everything is uploaded to the server.I changed the Mysqli to mysql in all the php files as I am running php 4.4.8 on my server.Can you help?Thanks
( Reply )
knoedel January 15th

Best Tutorial I’ve ever seen.
Thanks for spending your time to this.
Kind regards
( Reply )
laddu January 19th

i want to create a admin part of php site bt i m making first time….plz help me
( Reply )
Willabee Wombat January 21st

Good work Jeffery, Way to go!
Did I miss something or did you forget to add one line of code to add to the JavaScript file to wow your beginners?
$(‘#main a’).lightBox();
…but maybe that is in part 2 ???
( Reply )
Alexander January 23rd

Add here Admin menu with code please.
Sample
MENU:
- Add foto
- Edit foto
- Delete foto
New Album
Delete Album
Thanks!..
( Reply )
Eldé January 24th

Un tutoriel clair et concis,
Merci beaucoup
Thanks a lot
Eldé
( Reply )
steven January 28th

merci
( Reply )
trendbender February 8th

good solution
( Reply )
Jason February 10th

Truly an excellent tutorial.
I especially liked the way you talked through JQuery!
Can’t wait for Part 2
( Reply )
sirnobull February 22nd

Thanks for a great tutorial …
( Reply )
Elena March 2nd

I love it. It help me a lot. Thanks
( Reply )
kaise March 30th

Can anyone tell me where I can view lesson 2 for this tutorial. I’m new to web design and dont have a clue what i’m doing.
My email iskaise@hotmail.co.uk
( Reply )
Ben Blogged April 1st

Great Stuff
( Reply )
Joe April 5th

AWESOME….bring on part 2!
( Reply )
saurabh shah April 5th

wow ! i just love this ..
( Reply )
Ahmad Abubakr April 6th

You are great . and the tutorial is great
( Reply )
strony internetowe szczecin April 6th

nice very nice
( Reply )
Carl April 6th

Great tutorial!
Are you still planning on releasing the part 2?
That would be great!
Carl
( Reply )
Pete April 7th

The variable thisParam in this tutorial seems a bit confusing. Can any expert please explain the finer points of its purpose to a beginner like me.
Thanks.
( Reply )
z.Yleo77 April 13th

awasome script … and i think i need sometime to learn this..
( Reply )
z.Yleo77 April 13th

i ‘m ready to digest this article.
( Reply )
Nasi April 13th

Thanks for a great tutorial …
( Reply )
Steve Blair April 16th

Great tutorial series. I built a portfolio website for an artist friend, but wanted the artist to be able to add, edit, remove photos of their work when ever they wanted – so this is perfect!
One problem that I’m trying to work around is when you click a description, it will slide in the editable region, however, if the text doesn’t change and you try tabbing or clicking off of it, it doesn’t slide out. It’s not a big deal, but I don’t really understand why that’s happening.
Thanks!
( Reply )
Adam Winogrodzki April 19th

Great tutorial ! waiting for 2nd part thnx!
( Reply )
Roger April 23rd

Thanx for a great tutorial
( Reply )
rangasamy April 23rd

It is really cool and i build like this one in my application (and little pit advance to this one)
( Reply )
jurekpompka May 21st

Buy Herbal
Buy Herbal
( Reply )
William May 29th

Great tutorial.
It’s tough to find comprehensible tuts on PHP, MySQL, and jQuery.
Thanks.
( Reply )
Kathleen June 8th

I cannot imagine the time you commit to this site. Thank you very much!
I am new, so I went thoroughly through your tutorial, but I cannot seem to connect with the database for retrievals. After typing in user name and password it drops me off at the confirm_login_credentials.php page where it stays.
I’m using Dreamweaver and have my site on Yahoo with a MySQL database. I’ve done simple queries using a $link command and can retrieve database information just fine. So I think it is somewhere in the database, user, password commands on the database.php page.
Additionally I tested by using your entire file package and uploaded it in a subdirectory without my intervention. It still is hanging up at the same location.
Any suggestion?
I just discovered your tutorials and love them. Thank you again. I’ve bookmarked you and will pass you site on to all.
Kathleen
( Reply )
1. John November 13th
  
  I’m new to this too and likewise had trouble with the confirm_login_credentials.php file. After an interesting afternoon searching the web I finally figured things out and this seems to work – try replacing your confirm_login_credentials.php with this code …
  real_escape_string($_POST['username']);
  $password = $mysqli->real_escape_string($_POST['password']);
  echo $username.”.$password;
  $q = “SELECT id FROM users WHERE user_name = ‘$username’ AND password = ‘$password’”;
  $result = $mysqli->query($q) or die(mysqli_error());
  $num_rows = $result->num_rows;
  if ($num_rows == 1) {
  setcookie(‘authorized’, 1, 0);
  header(“Location: index.php”);
  } else {
  header(“Location: login.php”);
  }
  ?>
  I think this works because database.php declares a mysqli object and the subsequent code in the confirm_login_credentials.php file now uses object notation instead of a procedural flavour of coding. Hope this works for your problem.
  ( Reply )
Luke June 15th

Hi im new to this but you do the best tutorials that iv seen so far, this may sound silly but im having a lot of trouble connecting my code to the database please could you do something on that, and how do you take your database on-line once you know the code is ok?
( Reply )
Priya June 19th

Nice of this tutorial.It helps me lot.
( Reply )
Raj A Patel June 21st

Very Nice tutorial
I need more help
mail me : – rap_2008_qqq@yahoo.com
( Reply )
Free wordpress themes June 22nd

Is the Part 2 of this series released ? can someone give the url ? I was searching for past 30+ mins and am unable to find it in this site
( Reply )
Allan June 23rd

Very nice!
Your videos are always simple and help me and other users!
Keep doing videos like this please!
Thanks!
( Reply )
Mike June 29th

Very cool, man! I will use it in my blog! brazillian hugs to you!
( Reply )
Imamu Hunter July 1st

Man I sat through this whole tut waiting for the lightbox plugin portion lol.
It’s a good tut though.
( Reply )
Fatbike July 28th

Great tutorial
( Reply )
Zamshed Farhan July 30th

Wow !!!!!!!!!!! It’s a amazing tutorial……….
( Reply )
Hugo August 1st

Can you make an upload image box? I’d really like to be able to do that
Get back to me, n00ne@live.com.au
( Reply )
aimad August 5th

very good tutorial it’s amazing tks for share this is
( Reply )
mbardak August 14th

I have some problem to connect index.php page ?
why ı don’t login ?
username= user_name
password=password
these are the defeults but I can’t login
and I see these Error
Notice: Undefined index: logout in C:\wamp\www\admin\login.php on line 3
how can I fix these ? please help
( Reply )
1. Jon Piehl August 28th
  
  I got the same problem. Here’s what’s happening.
  On login.php you are saying “If ‘logout’ equal 1 then expire the cookie”. But if “logout=1″ isn’t in the URL then $_GET['logout'] isn’t set to anything and is undefined. PHP doesn’t like this.
  Here’s what I did to solve the problem…
  Simply remove the IF statement from the top of login.php and just set the cookie with a negative expire time. This way the cookie is always expired when someone enters the log in screen.
  Let me know if that works for you.
  ( Reply )
G-force August 30th

This is highly useful – say if I wanted to create links from the images though having already made the lightbox activate on rollover – how could I avoid just going to the image page due to the which is needed to point to the image in order to generate the picture in the lightbox?
( Reply )
Arkad September 18th

just to reiterate on that last comment .. that fact that the page is set on a variable display that can go into a million pixals effects the scrolling control in the right side bar (which I prefer to use over the mouse) in terms of usability.
Maybe it’s just me
Sick site though, by far the best content with a nice clean feel
( Reply )
conor September 25th

Hi,
This is a brilliant tutorial and I have got it all working for me except for when I click on an image it opens it in a new window rather than the lightbox. Any ideas what is causing this error?
I will definately be a regular visitor to this website
( Reply )
David Moreen October 31st

Great tutorial Jeff I had fun doing it. I have a question, do you have a source that provides a good explanation of what “mysqli” is and how I would replace “mysql_connect” with it?
( Reply )
John November 10th

I have had some of the same problems with the mysqli that have been stated.
Changing it means you have to change well quite a few things…. I actually took out the cookie verification and bypassed the login completely as i don’t need it I’m testing this local and will implement something else when i go live.
database.php
$db_name = “db”;
$db_server = “localhost”;
$db_user = “root”;
$db_pass = “***”;
$mysqli = mysql_connect($db_server, $db_user, $db_pass);
if (!$mysqli)
{
die(‘Could not connect: ‘ . mysql_error());
}
mysql_select_db($db_name, $mysqli);
and the getPhotos.php
require ‘database.php’;
$result = $result = mysql_query(“SELECT * FROM photos”);
if ($result) {
echo ” \n”;
while ($row = mysql_fetch_array($result)) {
$title = $row['title'];
$src = $row['src'];
$id = $row['id'];
echo “ \n”;
echo “$title \n”;
echo ” \n \n”;
}
echo “”;
}
( Reply )
John November 13th

John
This tutorial has helped me immensely
Thank you very much Jeffery.
( Reply )
willian November 17th

very good tutorial, congratulations for all videos published in the site….
( Reply )
Joren Rapini November 21st

Did part 2 of this ever happen? I don’t see one on NETTUTS!
( Reply )
Mohammad Ashour December 6th

Jeffery, I think your monitor colors may be off. You mention that the background color of the body and container are browns. The hex values in the CSS look grey on my monitor. Hope it’s a company XP machine :P
( Reply )
Seth December 28th

I’m having trouble getting what you got at the 26:00 minute mark. I downloaded the source file and followed along with you, created the database and everything. All I get when I preview in the browser is the title “My Photos click on the test to change the title” and the logout button. It doesn’t seem to be fetching the photos. I am very new to php and databases. Any suggestions?
( Reply )
Ravindran.S January 27th

wow, awesome tutorial actually i m in a learning phase of php now but i can easily understand this tutorial great work.. hats off…
( Reply )
vaibhav January 31st

PLEASE HELP I AM GETTING THE FOLLOWING ERROR M NEW TO PHP
Warning: mysqli::mysqli() [function.mysqli-mysqli]: (28000/1045): Access denied for user ‘root’@'localhost’ (using password: NO) in C:\xampp\xampp\htdocs\mpw\confirm_login_credentials.php on line 7
Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: Access denied for user ‘ODBC’@'localhost’ (using password: NO) in C:\xampp\xampp\htdocs\mpw\confirm_login_credentials.php on line 9
Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: A link to the server could not be established in C:\xampp\xampp\htdocs\mpw\confirm_login_credentials.php on line 9
Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: Access denied for user ‘ODBC’@'localhost’ (using password: NO) in C:\xampp\xampp\htdocs\mpw\confirm_login_credentials.php on line 10
Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: A link to the server could not be established in C:\xampp\xampp\htdocs\mpw\confirm_login_credentials.php on line 10
Warning: mysqli::query() [function.mysqli-query]: Couldn’t fetch mysqli in C:\xampp\xampp\htdocs\mpw\confirm_login_credentials.php on line 14
Warning: mysqli_error() expects exactly 1 parameter, 0 given in C:\xampp\xampp\htdocs\mpw\confirm_login_credentials.php on line 14
( Reply )
mike February 1st

hey guys how do we insert pictures?what would the form look like?
( Reply )
Mike Estrada February 6th

alright, so i was using this tut as a major reference point…but its giving me some problems in safari. when i tab off to update the title, it doesnt work.
works great in Chrome and Firefox though…
i think the problem is with the ajax.
any help???
( Reply )
Mike Estrada February 6th

actually scratch that, i actually tried to TAB off this time and it works just fine. i used ENTER for the rest and it worked…but for safari it didnt. little fork on my road, but eh, not a biggie
( Reply )
Dav February 6th

Very, very excellent tutorial. I’m an experienced WinForms and backend services developer curious about web development and your tutorial was spot-on what I needed. My first look at jQuery–I love that fluent interface! Starting with nothing but stuff most people already know (like CSS) and working to a finished page was perfect. About an hour is the right length, too. Thanks!
( Reply )