Grow your CSS skills. Land your dream job.

Creating a Web App from Scratch – Part 8 of 8: Security & The Future

Published by Chris Coyier

Hooray we made it! First of all, thanks for following along this whole journey. You can go check out the real live app for yourselves:

http://coloredlists.com

Below we're going to wrap up a few things by talking about some of the choices we made, security precautions, and ideas we (and you) have for a version 2.0 of this app.

Object-Oriented Programming

Because we should always aim to be efficient when programming, we built this app with the concept of DRY programming in mind. DRY stands for "Don't Repeat Yourself" and should lie somewhere near the core of our programming philosophy.

In our opinion, taking the object-oriented programming (OOP) approach was the best way to keep this app DRY. OOP allows us to group common methods together and separate tasks out without needing to pass parameters from function to function. For a little more information on OOP and why it's beneficial, read Jason's introduction to OOP.

Security

Security is incredibly important in any application. We have users with accounts who are storing data with us. Those users are putting their trust in us to make sure their data is safe, which includes their password and all the information they've entered into the lists. This app is already pretty darn secure. Passwords are stored in encrypted formats and never sent in the clear via Email. All the interaction that happens with the database is secure. Only users who are logged in can issue commands which result in database changes, and those users are only able to issue commands that affect their own data.

But because there is a variety of AJAX stuff going on in this app, our security needs to take into account a few more scenarios. First, our JavaScript (like all JavaScript) is publically viewable. This JavaScript contains the code for making AJAX calls, meaning the URL we are sending to and what data that URL is expecting. This tells potential attackers a good bit of information regarding how they might send malicious requests. Because of this, we need to be very careful and ensure that all incoming data is escaped properly.

Security on the Server Side

Avoiding attacks on the server side involves two major risk factors: first, the potential for database attacks; and second, the potential that a malicious user could submit dangerous data that hurts our app or users in some way when read out of the database and displayed. Fortunately, PHP provides us with several methods to combat these risks.

PDO

Database attacks, called SQL injection, are a particularly nasty form of attack. A vulnerable database can be read, manipulated, or deleted entirely by a malicious user. This means that it is really important that we keep any kind of SQL injection from happening.

Lucky for us, PHP Data Objects (PDO) virtually eliminates the risk for SQL injection through the use of prepared statements, which are like query templates that we can customize with parameters. All the escaping is done for us when the parameters are inserted into the query, so it's virtually impossible for SQL injection to occur while using prepared statements.

It was because of this powerful security advantage that we chose PDO for this app. (Keep in mind that prepared statements are not exclusive to PDO; other database extensions, such as MySQLi, also support them.)

Data Escaping

While PDO is powerful against SQL injection, it doesn't help us when we've read the information out of the database. If a malicious user injects dangerous tags into our database, they'll still be dangerous when they're retrieved unless we take further measures to sanitize user data.

Fortunately, PHP has built-in functions that will allow us to perform basic sanitization of user input. We're namely using strip_tags() with a whitelist to make sure no <script> tags or other potentially dangerous tags make it into the database. Also, because we never want that sort of thing to be allowed, we're performing this escaping before the data is inserted into the database.

Security in the JavaScript

First, a good measure is to "Pack" the javascript so it isn't so easily readable, as well as downloads faster. There are a lot of tools available to do this, including this one by Dean Edwards.

Client Side Sanitization

Secondly, because we are inputting data and turn it around to display immediately on the screen, it's best to do some of that input scrubbing directly in the JavaScript. When a user enters a new list item, we'll take two steps to scrub it. First we'll ensure they aren't naughtily trying to insert immediately executable JavaScript into links:

// Check for JS in the href attribute
function cleanHREF(str) {
    return str.replace(/\<a(.*?)href=['"](javascript:)(.+?)<\/a>/gi, "Naughty!");
}

Then we'll also scrub that input text for any other HTML. Some HTML we will allow, in case users want to format their lists a bit like with <strong> tags and the like. With the function below, we'll strip away all tags except those set up in a whitelist.

NOTE: The strip_tags() function used below is part of the php.js project, which has ported a number of useful PHP functions to JavaScript.

var $whitelist = '<b><i><strong><em><a>',

// Strip HTML tags with a whitelist
function strip_tags(str, allowed_tags) {
 
    var key = '', allowed = false;
    var matches = [];
    var allowed_array = [];
    var allowed_tag = '';
    var i = 0;
    var k = '';
    var html = '';
 
    var replacer = function(search, replace, str) {
        return str.split(search).join(replace);
    };
 
    // Build allowes tags associative array
    if (allowed_tags) {
        allowed_array = allowed_tags.match(/([a-zA-Z]+)/gi);
    }
 
    str += '';
 
    // Match tags
    matches = str.match(/(<\/?[\S][^>]*>)/gi);
 
    // Go through all HTML tags
    for (key in matches) {
        if (isNaN(key)) {
            // IE7 Hack
            continue;
        }
 
        // Save HTML tag
        html = matches[key].toString();
 
        // Is tag not in allowed list? Remove from str!
        allowed = false;
 
        // Go through all allowed tags
        for (k in allowed_array) {
            // Init
            allowed_tag = allowed_array[k];
            i = -1;
 
            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');}
            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');}
            if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag)   ;}
 
            // Determine
            if (i == 0) {
                allowed = true;
                break;
            }
        }
 
        if (!allowed) {
            str = replacer(html, "", str); // Custom replace. No regexing
        }
    }
 
    return str;
}

These functions are implemented in js/lists.js before sending off the AJAX request that adds a new list item...

. . .
    // AJAX style adding of list items
    $('#add-new').submit(function(){
        // HTML tag whitelist. All other tags are stripped.
        var $whitelist = '<b><i><strong><em><a>',
            forList = $("#current-list").val();
            newListItemText = strip_tags(cleanHREF($("#new-list-item-text").val()), $whitelist),
. . .

POST vs GET

One last small measure we've taken to secure our app is to use POST over GET for all of our AJAX calls. This is done because the GET method should only be used for retrieval, and not for any action that will modify data in any way.

The primary reason not to use GET for modifying data is that a request made using GET is sent in the URL (i.e. http://example.com?get=request&is=this&part=here). There's an inherent danger in modifying data based on the information passed in the URL in that a user can cause duplicate processing by accidentally refreshing his or her browser.

A secondary, less important reason to use POST is that it's a little harder to send a bogus request using POST, which provides a (minor) deterrent to malicious users.

2.0 Features

Of course our work as designers and developers is never done. This is a great start on a simple and usable list application, but right away new features jump to mind. Here are some ideas of ways to expand functionality. Perhaps they slightly complicate things, but are all probably great ideas assuming they are implemented well.

  • List sharing
    Enter an email address for someone to share the list with. Sharing meaning literally collaborative editing. The user would need an account, so if they already have one they would just be emailed and asked to join the list (they can accept or not accept). If that email address did not have an account, they would be promoted to join first.
  • Multiple lists
    Right now a user can have only one list. It would probably be useful for users to keep multiple lists. Perhaps a dropdown menu for toggling between lists and a simple button for adding new ones. Plenty of interface to think about here, including figuring out how to delete lists.
  • RSS
    Each list could have it's own RSS feed. Options would probably be necessary, like what the RSS feed would contain (e.g. Do you wish to see entries for when list items are completed or not?). Feed URLs could be long gibberish URL's, so they are essentially completely private unless specifically shared.
  • iPhone interface
    Logging in via iPhone or other mobile device would have a better more optimized experience.

End It with a Giveaway!

In an effort to promote his new book, PHP for Absolute Beginners, Jason is giving away five copies of it at random. To enter the contest, leave a comment on this article and use the text "PHP for Absolute Beginners" in the comment. Make sure you use your real email address so we can get in touch with you. We'll pick the random winners next Friday.

Even if you don't win a free copy (or don't want to wait) we want to give you a little somethin' somethin' for sticking through this series: you can get 10% off the eBook version of PHP for Absolute Beginners using this discount code: PHPXBRZQXSIKG (good through 12/31/2009).

What Do You Think?

Give it to us straight: what do you think? What features would you like to see included in the 2.0 version of Colored Lists? Did we miss anything? Are there holes in our code? We'd love to see your optimizations, ideas, and other constructive criticisms; let's hear it in the comments!

Series Authors

Jason Lengstorf is a software developer based in Missoula, MT. He is the author of PHP for Absolute Beginners and regularly blogs about programming. When not glued to his keyboard, he's likely standing in line for coffee, brewing his own beer, or daydreaming about being a Mythbuster.
Chris Coyier is a designer currently living in Chicago, IL. He is the co-author of Digging Into WordPress, as well as blogger and speaker on all things design. Away from the computer, he is likely to be found yelling at Football coaches on TV or picking a banjo.

Comments

  1. Permalink to comment#

    When I tried to sign up I got an error :( after typing in my email and clicking ‘sign up’ – the email still came through tho :)

    If I win a copy of PHP for Absolute Beginners maybe I can tell you how to fix it :)

    • So I was working on fixing this all morning (same thing happened to me) and then somehow it magically fixed itself.

      Everyone, please let me know if you see any strange behavior/errors.

    • I’m having the same problem at the minute. No email coming through.

    • No email is a different issue. Email delivery, with any web app I’ve ever worked on on my life, is only about 85% successful.

      Check your spam and whitelist @coloredlists.com in your mail server if you can. Then try signing up with an alternate email and it should come through OK.

    • Jack Watson-Hamblin
      Permalink to comment#

      I’m having the same issue. Getting the email, but having an error saying the list wasn’t created.

      Got a nice optimisation tip for you though, with that whole OOP thing.

      That __construct method that you use in BOTH classes, that do the SAME thing.

      Try a general DB class to handle it and modify the code a tad so that they both inherit from that DB class and use it’s one instead. DRYs it up a bit.

  2. Permalink to comment#

    I’d love to win a copy of “PHP for Absolute Beginners” and thanks for this great tut !

  3. Andre Prudente
    Permalink to comment#

    I would love to win this book:
    “PHP for Absolute Beginners”
    Congratulations for the tutorial.

  4. Would love to receive the “PHP for Absolute Beginners” book, and was very thankful for this tutorial. In particular, i liked how you’ve turned many complicated concepts into easily digestable chunks. Cheers!

  5. Permalink to comment#

    Would love to get a copy of “PHP for Absolute Beginners”

    wonderful tutorial, been following it from the start! Just fantastic!

  6. Would Love a copy of “PHP for Absolute Beginners”!

  7. Jacek
    Permalink to comment#

    Can I get one too :)
    “PHP for Absolute Beginners” of course :)

  8. Jon
    Permalink to comment#

    Great job guys!

    “PHP for Absolute Beginners” would be an awesome prize.

    Keep up the good work.

    ~Jon

  9. Jonas
    Permalink to comment#

    As a newbie in PHP I would highly appreciate a copy of “PHP for Absolute Beginners”.

    Thanks for a great article, guys!

  10. TeMc
    Permalink to comment#

    Hey Chris & Jason,

    This series has been a fantastic overview of pretty much everything we could’ve asked for.

    I’ll be using this in the near future for a totally different web app. But structure, accounts, account settings and functions. All those basics were very unversally explained in a actuall up-to-date futureproof way.

    Thanks a lot, and before I forget.
    “PHP for Absolute Beginners” certainly would come in handy for me to learn more about PHP. (It’s like a magic language, that once you understand it, it makes one feel to be able to do anything !)


    Greets,
    Tem C.

  11. Gringer
    Permalink to comment#

    @Chris / @ Jason:

    I see the common-files are acccesable from the webbrowser. Some display the content, others fail to execute standalone and spit out PHP Warnings with information that (should not) be public:

    http://coloredlists.com/common/ads.php

    http://coloredlists.com/common/base.php

    etc…

    Maybe throw in a quick way how to not allow direct access for completion :-D

  12. Chris
    Permalink to comment#

    Would love to get a copy of “PHP for Absolute Beginners”! Thanks for the great tutorial.

  13. Raimonds
    Permalink to comment#

    PHP for Absolute Beginners

    Great job ;)

  14. Permalink to comment#

    Very enjoyable tutorial!
    http://coloredlists.com/common/base.php is still open by the way

    I’d love a copy of “PHP for Absolute Beginners” – does it go into more OOP detail?

    • Yes, it does. It isn’t an advanced OOP book, but it covers a lot of the basics and shows another working example. Also, because it’s book-length, the descriptions are more in-depth.

  15. “Php for Absolute Beginners” gonna be a great one int my library!

  16. Permalink to comment#

    “PHP for Absolute Beginners” is what I need.

    Great job guys, I’ll definitely use this list.

  17. Awesome job! Your rokz!

  18. Victor Pagano
    Permalink to comment#

    Great tutorial! I want a copy of “PHP for Absolute Beginners” Thanks!

  19. Konstantin§
    Permalink to comment#

    Great tut!
    Great job!

    “PHP for Absolute Beginners”

  20. Mark
    Permalink to comment#

    Great series and love the step by step its by far the best I have followed. I would love to have a copy of “PHP for Absolute Beginners” to further my knowledge.

    Thanks for the excellent tutorial.

  21. Jason
    Permalink to comment#

    PHP for Absolute Beginners, sweet!!

  22. Bryan
    Permalink to comment#

    I am starting a web-application myself, using PHP, CSS, MySQL, Javascript, etc. and I would love to win the PHP for Absolute Beginners book to reference.

    Can it happen?

    thanks!

  23. Joshua McNeal
    Permalink to comment#

    Excellent Series! It would be awesome to win the PHP for Absolute Beginners book!

  24. Is it possible for you to zip the entire source for perusal? Otherwise, it’s a bit of an effort stringing each section of code together from the entire set of tutorials.

  25. Permalink to comment#

    Great tutorial, guys. I would definitely love to have a copy of “PHP for Absolute Beginners.”

  26. Jez
    Permalink to comment#

    Any chance you could post the source code, I just couldn’t get a part to work, maybe I need a copy of: “PHP for Absolute Beginners”

    • We will release the source code, yes, just allow a little time for us to shore up any issues that crop up so we can make sure we give you the best possible code.

  27. Barramger
    Permalink to comment#

    Thanks a million for the fantastic tutorial series. Wish their were more like it.

    And of course I’d love to with the “PHP for Absolute Beginners” book :)

  28. Permalink to comment#

    Excellent series guys. I can’t wait to see the live app :P (seems down at the moment).

  29. Bill
    Permalink to comment#

    Great tut series. very thankful to both of you. And I’d really love to win a copy of “PHP for Absolute Beginners”

  30. Permalink to comment#

    Nice work ;)

    PHP for Absolute Beginners

  31. Dudek
    Permalink to comment#

    PHP for Absolute Beginners

  32. Name
    Permalink to comment#

    Hello,
    Is there a download link for “Coloured Lists”
    Thank You

  33. Permalink to comment#

    Excellent series here. PHP for Absolute Beginners looks like a must have… for beginners like myself.

  34. Rigoberto
    Permalink to comment#

    (Excuseme my english. I am from venezuela)
    Excellent work. I’m starting in PHP and this tutorial has opened a world of possibilities.
    Thank you very much for the effort and dedication post and share with us all.
    Of course it would be very valuable to have a copy of your book “PHP for Absolute Beginners”

    Thank you for everything.

  35. Permalink to comment#

    This project was excellent! I also would like to win the book “PHP for Absolute Beginners”.

  36. Permalink to comment#

    “PHP for Absolute Beginners” could be useful for me. Keep up the good work

  37. Stan
    Permalink to comment#

    “Purple grounded twisted ants” contains 4 words just like “PHP for Absolute Beginners”.

  38. Permalink to comment#

    i want a copy of “PHP for Absolute Beginners” :)

  39. Permalink to comment#

    Great series guys. I would also love a free copy of “PHP for Absolute Beginners”.

  40. Nate
    Permalink to comment#

    “PHP for Absolute Beginners”! Gimme! :D

  41. I think that “PHP for Absolute Beginners” would be a nice addition to my continuously expanding web library. Right next to my Digging Into WordPress copy!

  42. Permalink to comment#

    Great series! I’d love to see more like this! Also a free copy of “PHP for Absolute Beginners” would be great.

  43. Cindy
    Permalink to comment#

    Loved the tutorial! I would definitely put to good use “PHP for Absolute Beginners”.

  44. Being that I never win anything…I would love to win a copy of “PHP for Absolute Beginners”.

  45. Will you make a tutorial series on building this app on the iPhone?

    —- In addition
    I noticed that I can add javascript into the link when I’m updating an item.

  46. Hey guys, great series! Nice breakdown..

    ;) And I dont need a copy of “PHP for Absolute Beginners”.

  47. Rudy
    Permalink to comment#

    I would love to have a copy of “PHP for Absolute Beginners”. This is an excellent tutorial — I can’t wait to build the app for myself.

  48. Fiefscent
    Permalink to comment#

    Great tutorial! I’d love to have a copy of “PHP for Absolute Beginners”.

  49. Dayvid
    Permalink to comment#

    great!!
    PHP for Absolute Beginners!

  50. Daniel
    Permalink to comment#

    i’ve just signed up and it worked like a charm!

    i have one small bug to report though. When you have marked an item as done, and then tries to edit it, you get some html code in the input. for example like so: call mum

    and the public urls are very easy to guess. I don’t think that is any good… eventhough no one knows how I am, I can’t use this as my personal todo-list for example, because anyone can see it… you could replace the simple number with some kind of short hash?

    other than that, I really like your app1 simple and to the point. the tutorials were very good too, eventhough, i’m a bit of a newbie to PHP

  51. Chad
    Permalink to comment#

    Love your tutorials by the way. I just started learning html, css, and using WordPress. Would be great to have “PHP for Absolute Beginners” in my library to help me out.

    Also I would to see the possibly optimized for the iPhone in version 2.0.

    I agree with Baylor Rae’ on possibly having a tutorial on building an iPhone app.

    Thanks again, love the site.

  52. PHP for Absolute Beginners

    OK, now that the contest entry is out of the way. Great series of articles, will there be more of these collaborative projects in the future?

  53. freemink
    Permalink to comment#

    Great tutorial: “PHP for Absolute Beginners” :)

    BUG:
    Can enter and save Japanese characters, but when viewing the list the characters do not appear correctly.

  54. hamrath
    Permalink to comment#

    I really would love to win a copy of “PHP for Absolute Beginners”.

    Thanks for that great tutorial, helped me a lot.

  55. Petter
    Permalink to comment#

    A very good tutorial series.

  56. Great tutorial Chris & Jason.
    Would love that copy of PHP for Absolute Beginners

  57. Michael Short
    Permalink to comment#

    oh Wow! this is really cool. I love the way you guys took us from the very first steps to the last and final product. and a good idea for a web app too hehe

  58. Permalink to comment#

    PHP for Absolute Beginners

    Great work!

  59. Maddie
    Permalink to comment#

    Nice! This was an amazing tutorial. Winning “PHP for Absolute Beginners” would really top this off.

  60. PHP for Absolute Beginners

    Great tutorial! Followed it all week.

  61. Bert de Vries
    Permalink to comment#

    “PHP for Absolute Beginners” looks like a must have.
    Cheers.

    Nice tut.

  62. “PHP for Absolute Beginners” would be great since I am new to the server side of things. Thanks for a great tutorial!

  63. SpeedGun
    Permalink to comment#

    I noticed that the lists do not appear to save

    Just letting you know :)

  64. Andrew
    Permalink to comment#

    Awesome tutorial, I hope I get a copy of “PHP for Absolute Beginners” to teach me more about web design!

  65. Aaron
    Permalink to comment#

    PHP for Absolute Beginners look like a cool book!

  66. Permalink to comment#

    “PHP for Absolute Beginners” would be great! I really am a beginner!

    By the way I signed up but got this notice: Your account was created, but creating your first list failed.

    Not sure you intended that :P

  67. Permalink to comment#

    Thaks a lot!
    Really PHP for Absolute Beginners

  68. Permalink to comment#

    Great tut and just the start for an idea that I’ve had for a while. This has taught me loads to get that idea off the ground, thanks guys !!

    PHP for Absolute Beginners, thats definitely me.

  69. Permalink to comment#

    Very nice article(s)! Loved it.

  70. Permalink to comment#

    Hi, i found that my list doesn’t automatically save..is that my fault?

    And my public list URL is http://coloredlists.com/.html ??

    And (last but not least) when you switch to “Your Account” the button should become “Your list” so it’s easier to come back to the list.

    Good night from italy and i hope to win a copy of “PHP for Absolute Beginners”

    • If your list isn’t saving, you’ve run into the bug where your account wasn’t created properly. We’re trying to fix that, not 100% sure the problem there (we think it’s when multiple people are signing up almost simultaneously).

      If you can log in, go ahead and delete your account from the Setting page and sign up again. That should work.

    • Permalink to comment#

      That’s fun…
      I deleted the account, i signed up and:

      “Sign up Log in Error.
      Your account was created, but creating your first list failed.”

      I think i’ll retry later…

    • Permalink to comment#

      I tried signing up, and got this error. I never received an email to choose a password (tried signing up with 3 different emails). When I tried to reset the password, I got the other error “You’re account has been verified, have you forgot your password”. Seems to all be a bit buggy still – not sure if I would want to use this system on a professional grade application if it can’t handle an average amount of traffic.

    • Permalink to comment#

      Yuppie!

      Now it works!

      Let’s report a bug: when you create a new item and then you hit ENTER for a while , you have a lot of new items being created.

  71. Brussells
    Permalink to comment#

    Seeing as I’m still at a ‘PHP for Absolute Beginners’ level I would love to win a copy of the book, and learn how to create great apps like this one, and know how it all works.

    Great tutorials – thanks again for everything you have provided.

  72. Felipe Arima
    Permalink to comment#

    Nicely done!
    Hope I can get the book!

    Cheers!

  73. Tom Jenkins
    Permalink to comment#

    PHP for Absolute Beginners

    Excellent series guys. Let’s see more of them!

  74. Rob
    Permalink to comment#

    Terrific tutorial. I’m a real novice programmer and often wondered what the ‘right way’ of doing some of these things are. I’m guilty of not doing a lot of the things you talk about, so it’s a great learning experience.

    Oh, and I’d love to win a copy of PHP for Absolute Beginners.

    Thanks!

  75. I could really use a copy of PHP for Absolute Beginners. I qualify as and absolute beginner and fiddling with PHP in wordpress is 100% trial and error for me. Sweet article by the way.

  76. Permalink to comment#

    I’d love to have clickable links for version 2 of Colored list. Would act as a great christmas gift list to send to the family. :)

    I couldn’t look at others lists when I was logged in myself, I just came back to my own list.

    A copy of “PHP for Absolute Beginners” would be awesome, been trying to figuring that magic language out for quite some time now^^ :)

  77. Permalink to comment#

    I like the article. I’m a start-up web-app developer so I like reading about other people’s work :)

    Anyways, I’d love to get a copy of PHP for Absolute Beginners

  78. Ed Sluder
    Permalink to comment#

    Is a Kindle version of PHP for Absolute Beginners going to be available soon? I love the portability that ebooks offer.This was a very detailed and enlightening 8 part tutorial(s). Many thanks to Chris and Jason.
    Cheers!

  79. Would love a copy of “PHP for Absolute Beginners” because I know no PHP and this would help a ton. I’m a high school sophomore and we will be learning PHP later this year. This would give me a jump start to enhancing my web skills. I currently use different CMS (my fav being ExpressionEngine) but I would love to learn straight PHP. Love the articles and keep up the great work. Thanks!

  80. Permalink to comment#

    I have heard PHP for Absolute Beginners is a great book and I would love to win a copy of it.

  81. Coyote
    Permalink to comment#

    PHP for Absolute Beginners would definitely be a great helper for me! I’ve been meaning to learn it, would help expand my skills and help me win my bet with a friend to conquer Europe. Seriously.

  82. Hey when i have a baby I will read it PHP for Absolute Beginners instead of children stories so that i can have a baby that makes the next facebook. haha

  83. adam
    Permalink to comment#

    PHP for Absolute Beginners,

    Been struggling with PHP but finally created my first WordPress site and began to understand PHP power. Simply using the_title I assigned a unique body class to every page that enabled me to uniquely style each page. not rocket science but i was a happy bunny!

  84. Permalink to comment#

    PHP for Absolute Beginners is coming to Argentina :P

    Excellent tutorial, i’m reading more on OOP cause i only knew the other one.. Thanks!

    Regards,

    Return;

  85. Nice tutorial, I’ve been trying to make some backend recently so this whole tut was pretty handy :D

    But only four colours for lists is not very colored :P

    PHP for Absolute Beginners? Yes please!

  86. Matt White
    Permalink to comment#

    Hmmm… Quite a bit of trouble here.

    I signed up, and never got the password email.
    Then I tried to reset my password instead, and the email that I get provides a password reset link that, when clicked, tells me that the account has already been verified, and asks if I would like to reset my password. The link takes me to the same reset form that I filled out originally. Rinse, repeat…

    • You never get an email with a password in it. Instead, you get an email asking you to verify, where you then pick a password. Did you get that one?

      If you did, you should know your password…

      If you didn’t, then your account isn’t active and that message you are seeing is definitely screwed up. In the meantime, perhaps try again at a different email address and hopefully it will arrive. Email delivery (for any web app I’ve ever dealt with) isn’t 100% reliable.

    • Gary
      Permalink to comment#

      I saw this same behavior when I signed up the first time. Entered my email, got the activation email, clicked the link, then got the message that my account was already verified. This happened on my test system that I set up from the tutorials also.

      I then tried to sign up again with another email address, but I wanted to see how it handled non-matching passwords on the activation page. It actually let me input two different passwords without error. When I logged out, I was unable to log back in with either of the passwords I used.

      Again – great tutorial all around. I’m enjoying diving into it and figuring out how everything works.

  87. Permalink to comment#

    Working on starting my own webapp in the coming months and PHP for Absolute Beginners could definitely help. Thanks for all the awesome tips and for getting me started on OOP.

  88. Elliot
    Permalink to comment#

    Great tutorial series! Winning PHP for Absolute Beginners would be the icing on the cake.

    Thanks a lot guys and look forward to much more.

  89. Permalink to comment#

    Nice series! I am an absolute beginner at PHP, therefore could use a copy of PHP for Absolute Beginners!!

  90. gemmes
    Permalink to comment#

    Article looks great, I will start soon. More like this please.

    A copy of PHP for Absolute Beginners would be great.

  91. Permalink to comment#

    I have been teaching myself PHP and a copy of “PHP for Absolute Beginners” would probably get me over the learning curve!

  92. Wyverald
    Permalink to comment#

    Your “reset password” thing seems to be buggy. When I click the link provided by the reset confirmation email, I’m prompted with the message “This account has already been verified. Did you forget your password?” That is quite confusing since I did forget my password, and would like to retrieve it, not verify my email address again.

    Other than that, it’s great work. Bravo to you guys =] Also, a free copy of PHP for Absolute Beginners would be so nice.

  93. Permalink to comment#

    Great work guys from start to finish. Amazed how fast you turned it around.

    I created my comments in a colored list.

    http://coloredlists.com/161.html

    Thanks for yet another great source of inspiration.

    KISS!

  94. sai reddy
    Permalink to comment#

    That’s a very good tut friend.

    Why don’t you show us some SSL or HTTPS related security stuff like buying the certificates and the approach for securing a website with have “https” facility..

  95. Permalink to comment#

    Great Tutorial series, Thanks.

    I don’t need the book.

  96. Davide
    Permalink to comment#

    Even if I’m not the winner, I’ll need a copy of “PHP for Absolute Beginners”! ;)

  97. Mike
    Permalink to comment#

    Fantastic tutorial, I’m a few days behind but my webapp should be up and running soon! I’d really love to get my hands on a copy of ‘PHP for Absolute Beginners’ to get my skills up to scratch!

    Thanks for the series guys, I’d love to see more in the future!

  98. Permalink to comment#

    will be good to have a free copy of PHP for Absolute Beginners. Thanks for this great tutorial

    em

  99. Cindy
    Permalink to comment#

    Thank you for explaining the concepts and then showing the code! Great Tutorial

  100. Permalink to comment#

    Thanks guys for this series. Look forward to working through it. Would love a copy of the book too!

  101. Gary
    Permalink to comment#

    This series was great, thanks very much! Any chance you can post the source files? I’m having some problems in a few places and after much cutting, pasting, recutting, pasting…I just can’t figure it out where I’m going wrong.

    I could definitely use a copy of PHP for Absolute Beginners!

    Thanks!

  102. Krinkle
    Permalink to comment#

    @Jason:

    Currently when I hit Enter twice (or double click) when making a new list item, it shows up double.

    Further more, when I press three times an empty one is added aswell (the empty one filled doesn’t appear to be empty tho, since it’s filled with ‘Click to edit’. But when I do, it’s empty).

    Looks like a little bug ;-)


    Krinkle

  103. TeMc
    Permalink to comment#

    Hey again Chris & Jason,

    When I drag around items in the list, and my mouse of just a little bit off to the left (ie. outside the wrapping element of the list items) it won’t place it or make the empty whitespace.

    It’s seems it needs to be very precise. Maybe you could enlarge the move-through and droppable area.

    Greetings , Tem

  104. Permalink to comment#

    Great job, and tutorial.
    I really want a copy PHP for Absolute Beginners

  105. Matt
    Permalink to comment#

    Hoping I win “PHP for Absolute Beginners” for Christmas break.
    Cheers.

  106. Dave
    Permalink to comment#

    PHP for Absolute Beginners

    Great stuff. Thanks.

  107. Thanks again for the great series! And I’d love to enter the drawing for PHP for Absolute Beginners as well :]

  108. Bravo! Great 8 part series – very much enjoyed the example and have my fingers crossed on book winning :>) cs

  109. Blue
    Permalink to comment#

    It was great following along with this application build. I’d love to see more stuff like this in the future. I’d also love to get a copy of PHP for Absolute Beginners to help me build some applications I have in mind, but no knowledge to build…

  110. Permalink to comment#

    I can’t wait to dive into this project! Thanks for the great series Chris and Jason. Dropping my name in the hat for Jason’s book: “PHP for Absolute Beginners”.

  111. Loved the series, I can’t wait until I have the time to dive in. Maybe in the meantime I can win a copy of Jason’s “PHP for Absolute Beginners.”

    Thanks, guys!

  112. Rafael
    Permalink to comment#

    This was an amazing series, getting to see the development of a project from beginning to end is really helpful, thanks guys.

    Count me in for the “PHP for Absolute Beginners” giveaway.

  113. Jeff
    Permalink to comment#

    I’d love a copy of PHP for Absolute Beginners!

  114. Chris Brailsford
    Permalink to comment#

    “PHP For Absolute Beginners”, eh? I believe all this learning has done me good, and WILL do me good, and I say God Bless It!

    Sorry… just getting into the festive season over here :-) Thanks a bunch for all the tutorials guys. They really are extremely useful, and obviously have been getting others to be creative and come up with their own ideas using what you have put forth. We appreciate all the hard work and effort!

  115. Miro von Busing
    Permalink to comment#

    Thank you Jason and Chris for a fantastic tutorial.

    My litte comment: Maybe the public link to the list should not be a simple serial. It is so easy to browse others list by changing that number. Maybe the user should be able to set the name: “myname.html”.

    “PHP for Absolute Beginners” (off course!)

  116. Permalink to comment#

    I’d love to win PHP for Absolute Beginners!

  117. Fredrik Lind
    Permalink to comment#

    Great series, and PHP for Absolute Beginners would be great to have too :)

  118. Zoran
    Permalink to comment#

    First of all, i don’t want the book, cause i am not a beginner, :). Good work guys, though as experienced PHP developer i could say something like hey you did this wrong or you did that wrong, but i wont and the reason is because you took the effort and time to write something that i haven’t seen so far.
    I could add a tip to your security, Here is the kohana’s security class and on line 00325 they have modified the Christian’s Stocker function against XSS attacks, or you could just use HTMLPurifier which is kind of bloated for this app.
    Thank you

    • Thanks! Noted and implemented!

    • Zoran
      Permalink to comment#

      You are welcome! I also never used PDO before, but will consider it in my next project which will be full OOP from scratch, thanks for the nice introduction about it.

  119. Great tutorial!
    This (and the subsequent source code) will be a great resource for years to come!

    Oh, and speaking of great resources, a copy of “PHP for Absolute Beginners” would be awesome!

  120. Permalink to comment#

    Great tutorial guys! Pretty useful stuff. I would also love a chance to win “PHP for Absolute Beginners”.

  121. Gringer
    Permalink to comment#

    Maybe I’ve missed something obvious but….

    How do I make a new list ?
    Or can I only have 1 list per account ?

    Gringer

    • Right now you can only make 1 list. We’re planning on adding support for multiple lists in the next version of this app.

  122. Roland
    Permalink to comment#

    This tutorial is like a christmas present given away a few weeks to early. And what would complete this present better then a free copy of “PHP for Absolute Beginners”?
    Thank you so much for the tut, shurly I’ll use some parts on my next project.

    Greetings from Bavaria
    Roland

  123. david
    Permalink to comment#

    No fault to the authors but, the truth be told, I was not so successful understanding this series. What I really need to do is start learning to program and PHP for Absolute Beginners would be a great place to start.

  124. Bill
    Permalink to comment#

    PHP for Absolute Beginners

    Great series

  125. Permalink to comment#

    Great site but polish fonts doesn’t work.

  126. Win
    Permalink to comment#

    Great series. Would like to start learning php with “PHP for Absolute Beginners”. Thanks.

  127. Tutorial was good explained, is the PHP for Absolute Beginners book also easy to understand? :)

    Greetings from Holland

  128. “PHP for Absolute Beginners” would be a nice addition to my resource library.

  129. Matthieu
    Permalink to comment#

    Great job guys. I would also love a free copy of “PHP for Absolute Beginners”.

  130. Joel
    Permalink to comment#

    This series was much appreciated. The only way it could be better is if you provided all the code for download or sent me a free copy of “PHP for Absolute Beginners”. Thanks.

  131. Permalink to comment#

    Would definatly love to win!

  132. Permalink to comment#

    PHP for Absolute Beginners

    Great series from great guys

  133. Permalink to comment#

    Very nice tutorial, it was a great read.

    One suggestion is to allow people to print out there lists. That way they can create/format it, and then leave the house with the list in their hand.

  134. Great series! PHP for Absolute Beginners looks good too!

  135. Andrew
    Permalink to comment#

    I’ve always wanted PHP for Absolute Beginners! Amazing tutorial!

  136. David
    Permalink to comment#

    Great Job! I would love to win a copy of PHP for Absolute Beginners!

  137. Jeff
    Permalink to comment#

    I would like to win a copy of PHP for Absolute Beginners.

  138. Permalink to comment#

    PHP for Absolute Beginners will be a good companion to the Digging into WordPress that I purchased recently.

  139. Permalink to comment#

    -yes -yes “PHP for Absolute Beginners”
    so amazing, all that beta testers :)

  140. adzar
    Permalink to comment#

    I want it ! eBook version of PHP for Absolute Beginners!

  141. AFRC
    Permalink to comment#

    PHP for Absolute Beginners

  142. Jaybee
    Permalink to comment#

    Would love to be kickin back with my new copy of PHP for Absolute Beginners – Thanks guys!

  143. When I drag some itens they don’t return do their location. In my case the itens stucked right above the ADD text field.

    check it out: http://i45.tinypic.com/1zb8hvr.jpg

  144. Q_the_Novice
    Permalink to comment#

    Whats up Chris and Jason, I have encountered a bug that that occurs when you create a long list. Everything just jumps all over the place when i add about 16 or 17 lists – i’m using firefox 3.5

  145. Permalink to comment#

    Awesome series guys! Really well thought-out and displayed.

    Would love a copy of PHP for Absolute Beginners also, so look forward to hearting about that!

  146. Ben
    Permalink to comment#

    Thanks, I found this series really interesting. I made a ‘To Do List’ web application not long ago so it was good to see what was done differently.

    I’d love to win the PHP for Absolute Beginners book :)

  147. Tony F.
    Permalink to comment#

    Good timing, just the book I was after. Looking forward to getting my copy of “PHP for Absolute Beginners”.

    Thanks guys – great job.

  148. Permalink to comment#

    Absolutely one of the best blog posts ever on this kind of thing, and so comprehensive – you’ve got a reader for life now!

  149. Permalink to comment#

    Interesting looking tutorials once again. Been playing with the idea of a web-app since I got my iPhone some weeks ago. I don’t know how you do it, but you time posts like these perfectly. And yes, this is my shot at the PHP for absolute beginners book ;)

  150. Ashworth
    Permalink to comment#

    Great Tut! Hope to see my “PHP for Absolute Beginners” soon.

  151. Tim
    Permalink to comment#

    Thank you for a great tutorial. I bookmarked all 8 “pages” for reference. I’ve programmed in PHP for a couple years now but don’t use the OOP part of it. I hope to learn more by reviewing your code and reading the book if I win. Thanks Again!

  152. Snorlax
    Permalink to comment#

    PHP for Absolute Beginners. I definitely need that. =(

    On an unrelated note, it’d be interesting to see other server side services/apps/interaction rather than vanilla DB. Scalability would be a nice consideration too.

    Kudos on a nice and straightforward tutorial!

  153. Permalink to comment#

    PHP for Absolute Beginners – yay!

  154. Mike Henderson
    Permalink to comment#

    Excellent Series and great app. Would love to see more articles like this. Big fan of both of your blogs.

    PHP for Absolute Beginners.

    Thanks Chris and Jason.

  155. Sage Vann
    Permalink to comment#

    Chris and Jason,

    Great tutorial! It’s cool to see someone crash through a web app like you did. Great instruction, now if I could only get on board with some help from PHP for Absolute Beginners, then things would be off to the races for me as well.

  156. Matt
    Permalink to comment#

    Absolutely one of the best blog series on this kind of thing, and so comprehensive!

  157. Hello Chris

    I don’t know what are your future plans :) but i think you can make this project huge and more interesting by making it sort of a step by step method of doing something

    eg. I’d have a how to Call Some one Lise :)
    and under that

    1. Take A phone
    2. Dial (the numbers)
    3. Dial (the dial button)
    4. Hold the phone against your ear :)

    That kind of a thing. I thing it would be great and Huge

  158. Permalink to comment#
  159. Ngetal
    Permalink to comment#

    Thanks for this great tutorial! Being an ASP.NET developer and having no knowledge of PHP, I’d really like to get my hands on a copy of PHP for Absolute Beginners.

  160. Permalink to comment#

    This tutorial series has been great! I’d love to see more of this type of mini-series format. Oh, and I’d like a copy of PHP for Absolute Beginners!

  161. Leslie
    Permalink to comment#

    Great! tutorial. Thanks so much

  162. Craig Allen
    Permalink to comment#

    I made a Fluid app out of this but it won’t let me stay signed on when I launch it. Would be nice as an AIR app maybe, too. Overall, very cool and great explanation.

    Oh yeah, and I’d love a copy of “PHP for Absolute Beginners”.

  163. Permalink to comment#

    I discovered this site not to long ago and I am very impressed. I would love a copy of PHP for Absolute Beginners.

  164. Great tutorial, as expected.

    I’d love to win a copy of “PHP for Absolute Beginners.”

    Thanks a lot!

  165. Eric Watkins
    Permalink to comment#

    Great series Chris.

    I sure would like to win a copy of “PHP for Absolute Beginners”

    Thanks again.

  166. Joel
    Permalink to comment#

    I neeeeeeeeeeeeeds me a copy of “PHP for Absolute Beginners”! I hope I win!

  167. Permalink to comment#

    Excellent blog post series guys. Loving the php walk through, especially the focus on increasing security. Would also love to get my hands on a copy of “PHP for Absolute Beginners”.

  168. Brian
    Permalink to comment#

    I would like to win a copy of “PHP for Absolute Beginners”. Frankengrammer needs all the help he can get. FIRE BAD !!!

    Thanks again.
    Brian D

  169. An
    Permalink to comment#

    Wow, thanks so much for this! I have all these site ideas, but no much PHP background to turn them into reality. This guide is a perfect step-by-step.

    A copy of “PHP for Absolute Beginners” would be awesome!

  170. marko
    Permalink to comment#

    I would love to win “PHP for Absolute Beginners”. Please add me to the contest. Thanks!

  171. Looking forward to – “PHP for Absolute Beginners” … Since the freebie comment is done ;) lets get to the other imp comment.

    The series were definitely great. Have taken a print out of all posts for an offline read. Would strongly recommend more such stuff coming. A simple idea would be to extend the coloredlists further, like having the same completely configured on Amazon AWS…

    Thanks once again
    Chanda

  172. Permalink to comment#

    Today i was searching about JQuery, and just came on this site. It is an awesome and very helpfull site for me. now i become fan of this site and Mr. Chris Coyier. Mr. Chris Coyier is really doing great job.
    staying on this site for many hours, i just came on this page and read about this book “PHP for Absolute Beginners”. I think it would be awesome! and very useful for me as beginner in php. I would like to win a copy of “PHP for Absolute Beginners”.
    Thank You so much!

  173. Permalink to comment#

    I quote:

    read Jason’s introduction to OOP.

    Link please?

  174. Congratulations for tutorial.. Realy great job.

  175. I’d love a copy of “PHP for Absolute Beginners”.

    Good work on this tutorial. I liked the dual-blog thing you had going on.

    I look forward to you releasing the source!

  176. Permalink to comment#

    Thanks guys — loved the tutorial and would love a copy of PHP for Absolute Beginners to learn more!

  177. Permalink to comment#

    Enjoying this and sent it to the rest of my web team. I’d like to win a copy of PHP for Absolute Beginners

  178. Permalink to comment#

    THanks for a great tutorial, now I know most of the requirements needed to develop an app. This plus the info in PHP for Absolute Beginners will help a lot…

  179. isaac
    Permalink to comment#

    I really appreciate this series…surely, it’s one of the most (if not the only) comprehensive take on the subject for free online.

    The copy of PHP for Absolute Beginners sure would be a nice bonus as well!

  180. Permalink to comment#

    Oh… this is great.
    This book may be usefull. Should you tell me how?
    “PHP for Absolute Beginners” is a must have thing. Counting on.

  181. Good tutorial… from the page 1 to this. Wonderful
    “PHP for Absolute Beginners”

    Thank you for your help. Your effort is apprecited

  182. Elnur Mammadov
    Permalink to comment#

    I would love to win this book:
    “PHP for Absolute Beginners”
    Thanks for this great tutorial.

  183. “PHP for Absolute Beginners”

    Thanks for the great tutorial.

  184. Permalink to comment#

    Waiting for the the source files.. are they gonna be release any time soon?

  185. Matt
    Permalink to comment#

    Absolutely, I would love to have:

    PHP for Absolute Beginners!!

  186. TOZE BAIAO
    Permalink to comment#

    Guys thanks for the tutorial, I badly need a copy of the book . RGDS

  187. Tiago
    Permalink to comment#

    “PHP for Absolute Beginners”

    AMAZING

  188. Permalink to comment#

    This is so AWESOME!

    I want my “PHP for Absolute Beginners” please!

  189. Permalink to comment#

    Cool tutorial, great giveaway & “PHP for Absolute Beginners” for me ))

  190. Permalink to comment#

    PHP for Absolute Beginners

    Very very good, I think so this book help me a lot into the world of PHP :)

  191. is it too late?

  192. oops forgot “PHP for Absolute Beginners”

  193. Very fun tutorial to follow along with. I would like to add a feature request for version 2.0. How cool would it be to connect this app with a Google account? Just a thought, Thanks.

  194. Marvin
    Permalink to comment#

    Whats the point of the article without the example at the end to refer to? If its too old to use, then surely so is the article. Shame really, I looked forward to both.

  195. Will
    Permalink to comment#

    Hi everyone. I’ve been struggling to figure out how to add multiple lists. I added the table in SQL, and can add to the new table if I change the PHP code to point to the new table. But, what I want to do is have multiple lists that each point to an individual table. So I could for example keep track of different types of meetings that employees are attending. I’ve gotten stuck on the lists.php file, where I can modify $listObj under ‘action’ but can’t add multiple calls to the same ‘action’. For example, I’de love to be able to add two or three actions like so:

    echo $listObj->addListItem2();
    echo $listObj->addListItem();
    

    Am I looking at this wrong? I’m only about 2 years into web dev, so I’m not a neophyte, but there’s alot I don’t know.

    Thanks guys!

  196. THIYAGESH M
    Permalink to comment#

    Hi, Chris. I did all the steps in the 8 part of this topic. As I am new to the web developing, I couldn’t understand how to open the home page of this scratch web app. I did all the thing explained. Would you help me to understand how to open all the pages and in which methodology i should interect with UI.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".