Hate UML?

Draw sequence diagrams in seconds.
http://www.websequencediagrams.com

Creating a Todo list in Ajax
Posted on: 2007-05-19 16:19:59
Javascript is fun to work with. You don't have to worry about memory, declaring variables, or missing semicolons, and browsers are very forgiving if you don't do everything exactly right. Last night, my wife was out of town. Free of any distaction from my nerdy interests, I tried creating a Web 2.0 application: a Todo list.

Go to http://gandolf.homelinux.org/~smhanov/todo/ to try it out.

Here's the php source code.

Terminology

Actually, I hate the term Ajax. The X stands for XML, but I personally think that just about every use of XML is a mistake. I don't use any XML in my Todo list. Instead, it does all of its communication in either POST requests, or JSON.

About the Application

I have a slow server, so if there is a choice between doing something in php and javascript, the javascript wins. The script is one file, index.php, of which 470 lines are in php, and 733 are in Javascript/HTML.

A unique thing about the Todo list is that it lets you add things without signing in. They are stored in the PHP $_SESSION variable. If you later create an account, or sign in, then the items are transferred to the mysql database.

Things I learned

  • Firefox is a very slow browser, when it comes to Javascript web applications. There is a noticable lag when running on my 3 GHz machine. Internet Explorer 6.0 is the fastest, followed by Opera 9.
  • Internet Explorer 6.0's support for Javascript isn't so bad. You just have to be more careful to get everything right. Firefox is more forgiving. For example, it will display a &g;table> created in DOM without the explicit <>tbody> tag. In IE, you have to add it or it just doesn't display the table.
  • It is hard to debug things in IE, because it won't tell you where the error is. You have to put in alert()'s to figure out what it's doing. It's like it's 1995 all over again.
  • Firebug is an invaluable development tool. It is absolutely essential for any web application development.
  • script.aculo.us is really easy to use to get things to animate onto the screen instead of just appearing. You literally only have to add 1 line of code. The only downside is it adds 150K of scripts to the page.
  • The PHP Pear::Auth() package is unsuitable for Ajax development. It assumes you are going to have a separate login page, a separate page for creating accounts, etc. I could have worked around the problems, but it was easier to write my own object for authentication.
  • PHP documentation on the web is very bad. You pretty much have to buy a book on it.
  • If you have a slow web server, Web 2.0 applications are great. You only load the page once. After that, my server only gets hit for database queries, and returns two character responses, like "ok" and "[]".

Want more programming tech talk?
Add to Circles on Google Plus
Subscribe to posts

Post comment

Real Name:
Your Email (Not displayed):

Text only. No HTML. If you write "http:" your message will be ignored.
Choose an edit password if you want to be able to edit or delete your comment later.
Editing Password (Optional):

estim8d

2007-08-28 01:48:30
Super cool!

How can I install this - Where is the database config ? db.php?

Thanks

Steve Hanov

2007-08-28 11:19:14
You need to use this database schema. This can be accomplished by saving it to a file -- eg. schema.txt and typing "mysql -u root <schema.txt"

CREATE DATABASE IF NOT EXISTS Todo;

USE Todo;

CREATE TABLE IF NOT EXISTS auth (

username CHAR(60) NOT NULL PRIMARY KEY,

password TEXT NOT NULL

);

CREATE TABLE IF NOT EXISTS Todo (

ID INT NOT NULL PRIMARY KEY,

username TEXT NOT NULL,

item TEXT NOT NULL

);

Andrei

2007-08-29 07:54:22
It's still asking for that db.php

Please explain once again, what files must be in my todo instalation folder?

Thanks

Steve Hanov

2007-08-29 12:04:14
To get around the "db.php" problem, you will have to install the "php-pear" module. On many linux distributions, this can be accomplished by typing "apt-get install php-pear" or by using your package manager.

In the web server, you will need index.php, done.png, and undone.png. The index.php file can be downloaded above. The image files, which are images of check boxes, can be downloaded by using the todo list and clicking "Save image as..." in your browser.

livne

2007-10-01 13:33:57
it doesnt show me any error .

but it doesnt connect to the db.

is there any way to convert this mysql:// line to the regular php line with

@mysql_connect('host', 'user', 'pass') or die();

mysql_select_db('table') or die();

?

please.

Steve Hanov

2007-10-02 09:28:35
livne,

Sure, you can convert all of the DB:: calls to use the native php mysql functions. But I don't know how. I only learned how to use php pear.

To install php-pear on linux, use 'apt-get php-pear'. To learn about it, search for "php pear" on Google.

roger

2007-12-06 08:02:05
This program is really cool!!

Does the edit option works on your machine?? Cuz mine doesn't.

Also it would be nice if you can also provide the .js files on this page. I was struggling for a while to set the script up.

Thanks!!

roger

2007-12-08 06:30:24
Hi,

I think there is a bug in line 726 of the index.php

this.originalText = form.bigtext.firstChild.nodeValue;

should be

this.originalText = form.bigtext.value;

This should fix the edit problem.

Thanks

Steve Hanov

2008-03-07 21:18:15
Thanks, roger! I have added your fix to the original source.

Manish

2008-08-01 03:52:04
Your script has a bug

upclicked and downclicked functions are not defined.

when move up or down is clicked nothing happens

Steve Hanov

2008-08-01 10:40:27
Yeah, moving up and down doesn't work. When they are retrieved they are sorted by their unique identifier (which is the order in which they were inserted). If you wanted to move them up and down, I guess you would need to:

- change the database schema to add in another column, eg. "rank"

- When you move them up / down, change the database to renumber them all.

I didn't do it because I hate the idea of renumbering them all individually whenever you click the up/down button -- if you had thousands of items it would be very slow. There's probably a way in SQL to do it efficiently.

Tom

2009-05-20 23:43:24
Hi there,

I am trying to use this list in a university project where we are creating a website. My role involves creating a todo list for a moving companys website. The list that we are expected to use is pretty much similar to yours. I have tried copying the source code from your list into my 'todo list page' on the website and it appears to work when I start debugging and the website opens up but when i try to add an item it doesnt appear below like it does on your version on your website.

I am using Microsoft visual studio VB 2008.

I am really new to making websites so any help on how i could make this list work in my website would be muchly apprectiated. My email is tom_da_bom@hotmail.com

Many many thanks i really like your list

Tom

Dave

2012-06-01 00:10:18
The list doesn't seem to work in the Windows Chrome browser.

5 years after you first posted it :-)

Email
steve.hanov@gmail.com

Other posts by Steve

How I run my business selling software to Americans 0, 1, Many, a Zillion Give your Commodore 64 new life with an SD card reader 20 lines of code that will beat A/B testing every time [comic] Appreciation of xkcd comics vs. technical ability VP trees: A data structure for finding stuff fast Why you should go to the Business of Software Conference Next Year Four ways of handling asynchronous operations in node.js Type-checked CoffeeScript with jzbuild Zero load time file formats Finding the top K items in a list efficiently An instant rhyming dictionary for any web site Succinct Data Structures: Cramming 80,000 words into a Javascript file. Throw away the keys: Easy, Minimal Perfect Hashing Why don't web browsers do this? Fun with Colour Difference Compressing dictionaries with a DAWG Fast and Easy Levenshtein distance using a Trie The Curious Complexity of Being Turned On Cross-domain communication the HTML5 way Five essential steps to prepare for your next programming interview Minimal usable Ubuntu with one command Finding awesome developers in programming interviews Compress your JSON with automatic type extraction JZBUILD - An Easy Javascript Build System Pssst! Want to stream your videos to your iPod? "This is stupid. Your program doesn't work," my wife told me Google Buzz gets less awful every day The simple and obvious way to walk through a graph Asking users for steps to reproduce bugs, and other dumb ideas Creating portable binaries on Linux Bending over: How to sell your software to large companies Regular Expression Matching can be Ugly and Slow C++: A language for next generation web apps qb.js: An implementation of QBASIC in Javascript Zwibbler: A simple drawing program using Javascript and Canvas You don't need a project/solution to use the VC++ debugger Boring Date (comic) barcamp (comic) How IE <canvas> tag emulation works I didn't know you could mix and match (comic) Sign here (comic) It's a dirty job... (comic) The PenIsland Problem: Text-to-speech for domain names Pitching to VCs #2 (comic) Building a better rhyming dictionary Does Android team with eccentric geeks? (comic) Comment spam defeated at last Pitching to VCs (comic) How QBASIC almost got me killed Blame the extensions (comic) How to run a linux based home web server Microsoft's generosity knows no end for a year (comic) Using the Acer Aspire One as a web server When programmers design web sites (comic) Finding great ideas for your startup Game Theory, Salary Negotiation, and Programmers Coding tips they don't teach you in school When a reporter mangles your elevator pitch Test Driven Development without Tears Drawing Graphs with Physics Free up disk space in Ubuntu Keeping Abreast of Pornographic Research in Computer Science Exploiting perceptual colour difference for edge detection Experiment: Deleting a post from the Internet Is 2009 the year of Linux malware? Email Etiquette How a programmer reads your resume (comic) How wide should you make your web page? Usability Nightmare: Xfce Settings Manager cairo blur image surface Automatically remove wordiness from your writing Why Perforce is more scalable than Git A complete blogging system in 1900 lines of php Optimizing Ubuntu to run from a USB key or SD card UMA Questions Answered Make Windows XP look like Ubuntu, with Spinning Cube Effect See sound without drugs Standby Preventer Stock Picking using Python Spoke.com scam Stackoverflow.com Copy a cairo surface to the windows clipboard Simulating freehand drawing with Cairo Free, Raw Stock Data Installing Ubuntu on the Via Artigo Why are all my lines fuzzy in cairo? A simple command line calculator Tool for Creating UML Sequence Diagrams Exploring sound with Wavelets A Fast Calorie Calculator for Windows UMA and free long distance UMA's dirty secrets Creating a Todo list in Ajax Installing the Latest Debian on an Ancient Laptop Dissecting Adsense HTML/ Javascript/ CSS Pretty Printer Comment Spam Web Comic Aggregator Experiments in making money online How much cash do celebrities make? Draw waveforms and hear them Cell Phones on Airplanes Detecting C++ memory leaks What does your phone number spell? A Rhyming Engine Rules for Effective C++ Cell Phone Secrets