PHP/jQuery Todo List Part 2

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

In part 1 of the tutorial, we covered the PHP and MySQL side of things. In this part we will be enhancing it with jQuery’s AJAX and manipulation functionality. The to-do list will degrade fine - if the user has Javascript disabled, the application will still work. All changes occur in the index.php file.

There are two parts to the script. One handles the posting of new posts, while the other handles posts being deleted. We’ll start with adding new posts.

//When the button with an id of submit is clicked (the submit button)
$("#submit").click(function(){

//Retrieve the contents of the textarea (the content)
var formvalue = $("#content").val();

//Build the URL that we will send
var url = 'submit=1&content=' + formvalue;

//Use jQuery's ajax function to send it
 $.ajax({
   type: "POST",
   url: "process.php",
   data: url,
   success: function(){

//If successful , notify the user that it was added
   $("ul").before("<p class='new'>You just added: <i>" + formvalue + "</i></p>");

   }
 });

//We return false so when the button is clicked, it doesn't follow the action
return false;

});

The url part confuses some people. What we are doing…

PHP + jQuery Todo List Part 1

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…

jQuery AJAX Tutorial Pt2

Heres Part 2 of the jQuery AJAX login tutorial. If you haven’t already, i suggest you read part 1 located here.

We are going to start writing the PHP code to process the form. This is fairly basic stuff, using $_POST to get the values from the form, then checking them against pre-assigned values, if they match, then echo approved, if they don’t then echo denied.

So at the end of this stage, you will have an HTML form set up and this PHP file. You can enter the username Panzer and the password of query7 into the form and it will return Logged in.

Next tutorial, the fun part, the AJAX!

jQuery AJAX Login Series Pt1

Heyo. This is going to be the first of 4 tutorials on making a jQuery powered AJAX login system with a PHP backend. The series of tutorials will go like so.

1. Plan, code the form (This tutorial)
2. Code the PHP backend, make it work
3. Code the AJAX, implement it.
4. Tidy it up, make it look snazzy

Ok then. So we will have a forum with 2 inputs; username and password. The user will enter the details and we’ll use PHP to authenticate them. If its true, we can set a cookie or echo some text. We will then implement jQuery’s AJAX and make the whole thing seemless. Some nice little fades will be added at the end.

So, the form. Its a plain and simple HTML form. Nothing special about it.

Username:
Password:

Thats all for now. Next lesson we will code the PHP and “make it work“.