Create a Photo Admin Site Using PHP and jQuery
Oct 29th 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.
Hi, I'm Jeff. I'm the editor of NETTUTS, and the Site Manager of Theme Forest. 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. I love the ASP.NET framework, jQuery, PHP, CSS, AJAX - pretty much anything.
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 page
called "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 this
query 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 rows
to 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 two
variables. $title is equal to whatever the user enters into that input field. $id is equal to its respective id field in
the 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" and
paste 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!
User Comments
( ADD YOURS )Thayse October 29th
Great!
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)
Jeffrey Way October 29th
@Ryan - Sure you can use Session. There are advantages to both methods. I’ll go over that in part 2.
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!:-)
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.
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
insic October 29th
Wow, really nice tutorial. very usefull.
Dan October 29th
this is very very helpful. Thanks, Jeff.
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.
Barttos October 29th
Seems to be very good tutorial. When i went home, i will comment few rows of code.
Alex Tayra October 29th
very useful, thanks alot!
waiting for P2
Catsoup October 30th
Thx ….I can’t wait for the second part (^___^)
j0sh October 30th
wow this is a really great tutorial. i wan to hear more on how to update your mysql database with ajax
max October 30th
how do users upload pics?
Julien L October 30th
That’s awesome ! Great work.
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
Shane October 30th
A fantastic effort Jeffrey - how long did this take you to knock up?
Thanks a lot.
Elpatator October 30th
funky
GKSR October 30th
There are some errors and where is the sql file. But really good.
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…
EasyPeasy October 30th
Wow!! Great Tutorial ..nicely done!!
Momo October 30th
yes, but you can crypted with session
No problem
James October 30th
Really nice work Jeffrey!
Matthew October 30th
Wow great article. I would love to see the same article done in Ruby…
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.
Jim Fitzsimmons October 30th
Wow. that’s gorgeous.
Craigsnedeker October 30th
Awesome work! Wheres the demo?
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.
dave October 30th
Thanks for this, I actually need to write a system just like this for class!
This will be a great reference
Furley October 30th
Nice tutorial, I just recently built a site just like this.
Connor October 30th
Great Tutorial Jeffrey!
Barttos October 30th
Connor, I’ll be very happy to see this tutorial on ROR
and i think not only I.
How about that?
Freddie October 30th
A great Tutorial. Thanks!
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.
Justin Young October 30th
I don’t see the sql file. Am I missing something?
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!
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!
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?
Steffen October 30th
What about XSS? htmlspecialchars() !
Carlos@webbynode October 30th
Would love to see this stuff in Rails, i bet its alot less code.
tefly October 30th
wow great
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.
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!
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.
Ben Griffiths October 30th
This is really great, thanks
Dan October 30th
As a newbie to jquery and php, this is great. Thanks for your efforts!
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
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
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.
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.
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!
Abethebabe October 30th
Great tutorial, can you be a little louder next time? I had to struggle to hear
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?
Jeffrey Way October 30th
@guycow - Hmm.. Do you know which version of PHP they’re using? Did you upload the database?
Ben October 30th
Nice!
I’m still getting style issue’s with the new NETTUTS site in Safari. Some minor ones with the menu.
Casey L. Jones October 30th
Totally ingenious tutorial! Waiting anxiously for part 2.
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
Abethebabe October 30th
It is pretty unsecured but he left it out to save time and get to the juicy parts.
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.
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)
jbcarey October 31st
some epic stuff here!!! Thanks!
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!!
johan marklund October 31st
This was a great tutorial, u learned me much about mysql and php technique’s to create really nice pages
Dave October 31st
Excellent Effort!!!
Sammy Deprez November 1st
Excellent Tutorial
a mix of php, html, ajax, jquery, css.
Thx
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.
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.
mReXiTuS November 1st
Very nice screencast
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!
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.
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
Tech Blog November 2nd
nice tutorial, well done!
E-Money Knowledge November 2nd
Very informative to newbies. Great tutorial.
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
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.
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!
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.
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…
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.
Jeffrey Way November 3rd
@ashvin - We will!
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.
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
Vikram S. Haer November 3rd
Any update on when part 2 is gonna be released? Looking forward to it! Awesome tutorial.
Joao November 4th
Great tutorial!
offtopic: what do u use to highlight php code in VS?
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
Yannis Kolovos November 4th
Jeffrey Way Nice Thanks
Jeffrey Way November 4th
@Joao - Check this out:
http://www.jcxsoftware.com/
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?
ablbaset November 6th
Great tutorial,
Thank you
Vikram S. Haer November 6th
Please do the second one soon! can’t wait…
dronix November 6th
awesome screencast, waiting for part 2 as well.
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
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']);
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.
fractalbrothers November 7th
this tutorial is gold.
T Pham November 8th
wow, thank for great tut.
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
Anthony Bruno November 8th
Im sitting on pins and needles waiting for part 2!
Lorentz November 10th
awesome, Great tutorial.
Thank u soo.. much
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.
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.
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++++
digitalgirl November 13th
Looking forward to part 2! Make it this week!
VIkram November 13th
This is taking too long
please come out