This is part 1 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX

In this two part series I’m going to show you how to make a simple to-do list in PHP, and then enhance it using jQuery’s AJAX and manipulation capabilities. This won’t follow any proper coding principles, but will give you the skills to adapt the code to fit your own situations. A todo list isn’t that far away from a simple threaded forum.

It will consist of a few files.

• delete.php – delete the note.
• process.php – create the note, display the notes.
• index.html – form, javascript

We will be storing the list items in a MySQL database. The query:

CREATE TABLE `notes`
(
`id` INT PRIMARY KEY AUTO INCREMENT NOT NULL,
`content` VARCHAR(500) NOT NULL
)

index.php will only contain the form (for now). It’s a fairly basic form, it contains a textarea (where the user enters their note) and a button they hit to submit it. The information is sent to a file called process.php through the post method.

<form id="form" action="process.php" method="post">
<textarea name="content" id="content" cols="50" rows="3"></textarea>
<input type="submit" id="submit" name="submit" value="Post it" />
</form>

process.php then handles the information that was sent from the form. We only need to insert the content into the database because the id field auto_increments itself. We display the to-do list in a nice and tidy list. We also provide a link after the post to delete it.

<?php
//Connect to the database
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);

//Was the form submitted?
if($_POST['submit']){

//Map the content that was sent by the form a variable. Not necessary but it keeps things tidy.
$content = $_POST['content'];

//Insert the content into database
$ins = mysql_query("INSERT INTO `notes` (content) VALUES ('$content')");

//Redirect the user back to the index page
header("Location:index.php");
}

/*Doesn't matter if the form has been posted or not, show the latest posts*/

//Find all the notes in the database and order them in a descending order (latest post first).
$find = mysql_query("SELECT * FROM `notes` ORDER BY id DESC");

//Setup the un-ordered list
echo '<ul>';

//Continue looping through all of them
while($row = mysql_fetch_array($find)){

//For each one, echo a list item giving a link to the delete page with it's id.
echo '<li>' . $row['content'] . ' <a id="' . $row['id'] . '" href="delete.php?id=' . $row['id'] . '"><img src="cancel.png" alt="Delete?" /></a></li>';

}

//End the un-ordered list
echo '</ul>';

?>

delete.php does nothing more than delete the post. It uses the id parameter its provided to find the post entry in the database. Once it’s found, it’s deleted.

<?php

//Connect to the database
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);

//delete.php?id=IdOfPost
if($_GET['id']){

$id = $_GET['id'];

//Delete the record of the post
$delete = mysql_query("DELETE FROM `notes` WHERE `id` = '$id'");

//Redirect the user
header("Location:index.php");

}

?>

All of this produces a tidy to-do system. The source, stylesheet and images will be provided in a .zip file at the end of Part 2 of this tutorial.

You can read the second part of the series at PHP/jQuery Todo List Part 2