1. The Firebug Extension for Firefox
2. Greasemonkey

If the page that we are going to manipulate doesn’t already include jQuery on it, then we can include it with this small Greasemonkey script. If jQuery is already included on the page, there is no use for this script.

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works

    }

Source
With the jQuery library on the page we can now go ahead and start entering commands. For this example we’ll take jQuery.com, we can enter a basic jQuery Selector and see what happens.

before.png (http://img228.imageshack.us/img228/1918/beforeus0.png) Download, rehost, embed this image here.

after.png (http://img218.imageshack.us/img218/5812/aftercd6.png) Download, rehost, embed this image here.

As you can see it’s very easy to manipulate pages. You can use this to manipulate scripts that your working on. For example, if you were trying to nail down a certain selector, or find a 4th parent of something, its going to be alot easier and faster to do it in the Firebug terminal than editing, saving and refreshing the page while your trying to perfect it. With jQuery’s CSS capabilities, you can also test your CSS out live, without needing to switch back and forth between your editor and firefox.

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 is sending a request to the process page, we need to include some data with that request. In process.php there was the line

if($_POST['submit']){

It checks to see if $_POST['submit'] isn’t null (has a value). If it is null (has no value), then it means that the form hadn’t been submitted, by sending any value, in our case submit=1, we are telling process.php that the button had been clicked so it should run the rest of the PHP script. The rest of the PHP script calls for the content, which we also send in the url (content= ‘ + formvalue). Instead of sending anything, we only want to send the value of the form (The stuff inside the textarea - that the user wants to submit). By returning false at the end, it prevents the submit button from carrying through with its action=”process.php”. If it did, it means the page would refresh when the information was sent which is exactly what we don’t want.

The code that handles the deletion of posts is similar.

//Check to see if an anchor link was clicked (The delete link)
$("a").click(function(){

//Save the link in a variable called element
var element = $(this);

//Find the id of the link that was clicked
var noteid = element.attr("id");

//Built a url to send
var info = 'id=' + noteid;

 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   element.parent().eq(0).fadeOut("slow");
   }
 });

//We return false so the browser doesn't actually follow the link
return false;

});

When we were displaying the posts in process.php we echo’d the id of the post in the anchor tag. We are then getting this id element.attr(”id”) and building the URL. So when the AJAX call is sent, it will be something like delete.php?id=POSTID. If the AJAX call is successful, then we need to hide the list item.

element.parent().eq(0).fadeOut("slow");

In that bit of code, we select the element (anchor tag) that was clicked. We then find it’s parents and take the first one using eq(0). It’s ‘first’ parent is the list item its in (<li><a href></a></li>) and we fade that out slowly.

Demo: http://lastkarrde.com/__q7todo/

Download: lastkarrde.com/__q7todo.zip

You can read the first part of the series at PHP + jQuery Todo List Part 1

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

PHP is a very vast language. It’s hard to say that you’ve mastered it. For example, do you know how to crop an image using GD and process web requests with XML-RPC off the top of your head? You may know one of them, but probably not both. That being said, there are a lot of resources out there that help you learn the basics of PHP – Processing forms, security, database interactions and array manipulation. I’ve compiled a list of 5 websites that I think will help you learn the ‘basics’ of PHP as well as taking them a step further.

KillerPHP.com’s Video Tutorials
I used these when I was initially learning PHP and are still a great resource today. These screencasts are typically 10 minutes long and cover the absolute basics – getting your development enviroment up and running to variables and includes.

• Local server setup
• Variables
• Arrays
• Includes
• Loops
• Form Processing
• Functions
• Sessions
• OOP

Pixel2Life’s Tutorial Index
Pixel2Life is a tutorial index where bloggers can submit their tutorials and articles. The result of hundreds of people doing this is a very large library of ‘specialised’ links. For example, at the time of writing this, the frontpage contains tutorials about Twitter, Code Igniter, Gravatars and Converting Excel to CSV with PHP. There are also numerous tutorials and articles on PHP frameworks (Code Igniter, CakePHP etc) that aren’t on the framework’s website. Be aware that there are excellent tutorials back 6 or 7 pages, so have a dig around for them.

NetTut’s PHP Tutorials
Nettuts is well known for it’s high quality tutorials. They have recently done a 3 part series on making your own PHP framework – something you don’t see on an everyday blog. Although there aren’t many PHP tutorials now, new authors are writing more tutorials on them. Often the tutorials are not only PHP, a recent one showed how to make a twitter clone in PHP which used mootools for the AJAX and effects. Lately the editor, Jeff Way, has been doing some screencasts.

PHP.net Quickref
Sorry, I had to put it in. If you don’t know what a certain function does, do a quick search on the quickref page and find it in seconds. The documentation provided by PHP isn’t the only good part, read peoples comments on real application usage of function. For example the sleep function (http://www.php.net/manual/en/function.sleep.php) , it not only shows usage of it, but mini hacks people have used to get it working better, or an alternative way to do it.

PHP Builder
PHP Builder is a portal for everything PHP. It has PHP job lisitings, original articles, a snippet library, forum and a mailing list. Some of the articles on there are really interesting, using PHP as a shell language (http://www.phpbuilder.com/columns/darrell20000319.php3?page=1) not only covers the basic ‘hello world’ tutorial, but using arguments and reading input from the console. The forum (http://phpbuilder.com/board/) is incredibly useful. There are fully certified Zend Engineers that help you think up 

Chapter 7 is another excellent chapter - showing you how to write your own plugins. It goes into alot of detail, from extending the wrapper to proper naming conventions to looping through each element effected. This chapter is a must read for anyone considering writing their own jQuery plugins. Again, the authors have written 3 example plugins providing alot of reference material.

• The first, its incredibly slow - It took along time to download the updates i needed (Slower than downloading a normal file that size from the server) and it took along time to generate the meta data of plugins list.
• The second is that (in my opnion) the User Interface is horrible. Its hard to navigate to select the packages you want, When you select a package it takes a few more clicks to even see the dependencies it requires, whereas adept and synaptic show you right away.

I tried it, i can honestly say i gave it a good go, but its not for me. Since im new to the rpm system, i searched around for alternatives, i found one called Yum Extender (Yumex).  Its easy to install, just yum install yumex or download it from the websit.

Check it out

http://p.sohei.org/jquery-plugins/menu/
Latest release: Jan 07

This plugin was constructed to emulate a desk top apps menu. They don’t close until clicked off and are activated by clicking them (rather than hovering). It requires the jQuery dimensions plugin to perform ‘smart calculations’.

Example Usage: http://p.sohei.org/stuff/jquery/menu/demo/demo.html
Download: http://p.sohei.org/jquery-plugins/menu/

http://jdsharp.us/jQuery/plugins/jdMenu/
Latest release: April 08

Although the jdMenu plugin is only 3kb itself, it depends on or looks a hell of a lot better with the plugins dimension, positionBy and bgiframe. jdMenu boasts keyboard access and can be easily made into a verticle menu by changing an option.
Example Usage & Download: http://jdsharp.us/jQuery/plugins/jdMenu/

http://users.tpg.com.au/j_birch/plugins/superfish/
Latest release: Sometime in 08

Superfish takes a CSS based dropdown then enhances it with jQuery so if the user has Javascript disabled, it degrades perfectly well. Since the menu is mainly CSS based, I’d imagine it’s a fair bit faster than the other options.

Example Usage: http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Download: http://users.tpg.com.au/j_birch/plugins/superfish/#download

More menus

• http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=58
• http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
• http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
• http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/
• http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

Plugins are useful, but a lot of the time you don’t need their full functionality. If your confident of modifying a few scripts, then taking something like http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery and changing it to meet your needs would be the best way to go. That being said, the plugins have dropshadows and funky multi level code that some of the ‘smaller menus’ do not.