Where We Left Off

We should be at a point where we now know how to reorder a list.  If you haven’t read the previous tutorial or aren’t certain on how to reorder lists in jQuery, I encourage you to check out Beginners Guide to jQuery Sorting part 1.

Here is the code from the previous post:

What We’re Building

This time around we’re just going to take the current order of the list and save it to the database for future use.

Reworking the List

Previously we had a simple HTML un-ordered list.  This time we’re going to make it a little more complicated, with good reason of course.  In order to view the updates we make to the database, we first have to have a list  pulling from the database.  For this we will be using PHP and MySQL.

First we’re going to create a file called db.php.  In this file we’re going to do two things.  First connect to the database, and second select all the items from the database and create a list from them.  I’m not going to go into too much detail with the connection info.  If you want a little refresher, we went into more depth in our Beginners Guide to Using Ajax with jQuery post.

Here is the PHP code for connecting to the database:

I guess at this point it might be helpful to see what the database looks like.  We have 3 columns:

•  itemID (unique identifier),
• content (the text inside our list)
• Order (keep track of the order)

Now we’ll create a function that selects all the items from the database and outputs an un-ordered list.

Here is the PHP:

First we query the database with the mysqli object we created when we connected to the database.  If it returns results without errors then we can go ahead with making our list. 

Making the list isn’t too hard, we’re simply creating a variable that holds our list.  We then cycle through all of the items returned from the database and add it to the end of our variable.  After we have all the info in our variable, we display it for the world to see.  One special note, you’ll see that we are giving each <li> an id.  We’re going to use this when we get to the Ajax portion of the tutorial.  For now just know that the id is required.

The New HTML

Now that we have our db.php file ready to go, we can now make use of it in our main file.

First off we’re going to import the file to use it.  At the very top we’ll just put:

Now we can use the function displayAll() that we just created.  We’ll be replacing the un-ordered list with this function.  When the page is processed, the function will pull the data from the database and output a brand spankin’ new list.  Pretty sweet huh.

The jQuery

The jQuery changed a bit.  We’re adding a new update parameter to the sortable function.  This will be called whenever the order has been changed.

In the update function we’ll be doing 3 things.

• Prepping the info to be sent via Ajax
• Send the info via Ajax
• Display the new updated list

Here is the jQuery:

Prepping the Info

First thing we tackle is prepping the info by serializing it.  This just means that we’re taking the order of the list and preparing them in a way that they can be attached to a url.(e.g. www.domain.com?serialized=data )  For this serialize function to work we have to create ids for our list items in a particular way.  If I want an array called “item”  then I would give my li tags an id of item_1, item_2, item_3, etc. The serialize function will take the text before the underscore as the array name, and the number after as it’s value.  So a list with ids of item_1, item_2 would be serialized to item[]=1&item[]=2 .   When we created the function displayAll() we took this into consideration, and put the items ID value from the database after the underscore so we can reference it later.

Send Info

Next comes the Ajax.  We’re going to use the post function.  We simply have to give it a url, any data we want to send to the url and the function we want to call when we receive something back from the url.

Display New List

The function that handles the response simply just switches out the list’s HTML with the new HTML.

Updating the Database

The first thing we’re going to do is create a file called update.php.  This is the file that will be called by the Ajax.  In this file a couple of things are going to happen.

• Get the array sent in by the Ajax
• Cycle through each item in the array
• Update the database with the new value
• Display a new list

Here is the PHP:

Get the Array from Ajax

Since we used the post method in our jQuery, PHP’s $_POST variable will be populated by what we pasted in.  In our case it was the item array. It’s always good practice to make sure you’ll be receiving what you’re expecting.  In this case we’re expecting an array, so we check and make sure it is an array.

Cycle through the Array

After we’re sure we have an array on our hands, we cycle through each element in the array.  For each element we’re going to check and make sure the value is a number.  If we didn’t malicious users could pass in some harmful stuff.

Update the Database

After we have verified that array’s value is a number, we then pass it into our SQL statement.  The array is ordered in the same manner as the list was.  So the first item in the array is also the first item in the list.  The SQL will  then set the Order of the item to where it is in the array.

Display a New List

The code for this is pretty well the same as displayAll().  The only difference is that we’re leaving the <ul></ul> off, as these will already be in place, and we’re just replacing the innards.

That’s IT

That’s pretty well it.  Now we have our initial code that display’s our list.  Then our jQuery that passes on the order of the list via AJAX.  Then our update PHP file that checks to make sure the values are good, and passes them to the database.  After all that it passes the new list back to the jQuery to display.  Voila!

db.php :

Here is the HTML / jQuery / PHP:

update.php

Trust No One

The biggest issue in terms of security is trusting your users.  If you have a form and you automatically assume that the user is going to put their name in the name field, you’re less likely to write code that will validate what users are typing in.  From a security perspective you have to think of your users as the shifty looking guy on the corner.  Don’t trust them. Consider all input data tainted like the moldy piece of cheese in the back of your fridge.  In PHP, a general rule of thumb is that all data in PHP’s superglobals ($_POST, $_GET..etc) should be considered tainted.  Even the $_SERVER array is not fully safe because it contains some data provided by the client.  The only exception to this rule is the $_SESSION array, which is kept on the server and never over the internet. 

Are You Filtering?

Filtering is simply the process of making sure that only good input data is processed.  There are two common ways of handing this, Black listing and White listing.

Black Listing

Black listing is the less restrictive form of the two.  It assumes that the programmer knows everything that isn’t allowed to pass through.  An example of this might be to check for profanity.  The programmer would create a list of swear words, and for every input the code would cross reference this list to see if it matches the list.  If it does, then the program handles it accordingly.

Example:

White Listing

White listing is probably the more common method for security.  It automatically assumes that all data is bad.  Instead of identifying which information isn’t acceptable, you select which information IS acceptable. Kind of like going through a bag of jelly beans and only eating the red ones….mmmm.  Since you control the data that comes in, attackers malicious code won’t be accepted if it doesn’t match the criteria. For this reason white listing is a much stronger protection against attacks then black listing.

Example:

Do You Escape Your Output?

Output is any information leaving your application.  This can mean text going to a web browser, or to your database. Escaping the output ensures that there are no harmful commands within the output.  So for example, in a blog you might have a comments section where users can input any info the might like.  What if that info is JavaScript?  When you output the comments and they’re not escaped, the JavaScript will display too.  This can mean stealing of your users cookies, passwords, etc. Escaping is super important for protecting the recipient of your output, whether it is your database or your users.  Fortunately PHP makes escaping very simple.  If you’re escaping content for the web browser you can use the method htmlentities().  This basically turns any special characters into a non harmful version. So the browser will display <script> instead of acting upon it.

Here is an example:

For databases you’ll have to use a different method. For mysql you can use mysql_escape_string(), and if you have it installed mysql_real_escape_string(). The later offers a more extensive job then the first method.  Also if you’re using PHP 5 you can use prepared statements.  Prepared statements are SQL statements that have place holders. (SELECT * FROM table WHERE `username` = :placeholder)  The place holder is then populated afterwards.  How can this help you?  To use these place holders you have to use the PHP Data Object (PDO).  Fortunately PDO does all the hard work of escaping your output for you…isn’t that nice of them.

Here is an example of PDO in action:

Conclusion

If you took anything away from the post I hope it is to filter inputs and escape outputs.  There is quite a few other things that can be done to help with security. What we discussed here should be at least the bear minimum that you use on a regular basis.

What we will be building

We’ll be creating an input box that when you type it checks out the database for any words that might match what you typed in.  The database I’ll be using is a dictionary I found on the net.  It seems to be missing quite a few words, but it’ll work for what we will be doing.

Getting Started

Since we’ll be starting where we left off in the tutorial Beginners Guide to using AJAX with jQuery it might be a good idea to pick up the original files if you want build it out yourself.  There are two files.  One being the HTML file with the jQuery and the other being the PHP file that process the AJAX request. 

Here is a look at where we left off:

PHP:

The Database

The database we’ll be creating consists of one table called “Words”. In that table there is only one column called “Word”.  Here is the CSV file that I used to populate the database we’ll be using. 

The first thing we’re going to do is connect to the database.

PHP:

Getting Results from the Database

After connecting to the database, our goal now is to pull words from the database that match what was passed to the PHP via AJAX.   The SQL we’ll be using to query the database isn’t too difficult.

The SQL statement simply means select 5 rows from the “Words” table where the column “Word”  starts with whichever value we pass in. $value is a PHP variable, and % is a wild card meaning any value.

Here is the PHP to Query the Database:

After we get the results back, we’ll want to output any results we get back as an unordered list. If there aren’t any results we’ll output an empty value so we know we didn’t get any results back.

Let the Beautification Begin

As of right now we should have a list of words that show up after each character we type in.  Now we just have to beautify it a bit.  We’ll have to make it so that the list doesn’t appear until the user starts typing, and disappear after the input box loses focus.  We’ll also make it so that when you click on one of the words in the list it will populate the input box with that value.  Additionally we should handle when a user presses the down or up button, but we’re not going to for the sake of keeping things simple for this tutorial.

Here is the jQuery:

CSS:

Bringing it All Together

That’s all the code we’ll need for now.  The auto complete feature can definitely be improved, but hopefully this tutorial showed a useful use of AJAX with jQuery.

Here is all the code together:

PHP:

What is AJAX

AJAX is a short hand for asynchronous JavaScript and XML.  Which plainly means that instead of waiting for the whole page to load, you can load only what you need to.  So if you only need to update one small text part of your site, you don’t have to worry about loading everything else on that page.  A vast majority of sites use this technology now.  Probably one of the most popular uses is an auto complete feature for the search box at Google and Yahoo.

What We Will Be Building

There are several things that we could build, but we’re just going to keep it simple for this example.  We’re going to create a simple text field that when you type in anything it gets sent to the server via jQuery.  In return the server will append some text and send it back to jQuery.

Getting Start

The HTML is pretty simple.  We just need an input text and a div with an id so jQuery can input the text when it gets it back from the server. We’ll also need to import the jQuery library.

Here is the HTML:

The jQuery

Now we have the framework down we can get started on the jQuery.  The first thing we are going to do is create a key up event for our input text box once the page loads.  Once a user types a character in the text box it will call a function that handles the AJAX.

Now here is the magic. We’re going to create the function that handles the AJAX.  The function will have one argument; this will be the text from the text box.  There are several ways to use AJAX with jQuery.  We are going to use the post method, but I encourage you to have a look on jQuery’s website to check out the other methods.  We’ll be using 4 arguments with the post method, but only the first one is required.

Post Method Arguments:

1. Your file on the server, in our case, a PHP file.
2. The values you want to pass to the server.  These will be sent using the POST request.
3. The function that is called when the server responds. In our case this is where we use jQuery to populate the div with the info we got back from the server.
4. This is how the data will be organized.  In our case we’ll be using JSON.

Here is the jQuery AJAX Code:

The PHP

There isn’t much to the PHP file.  We simply get the POST variables, make sure our output is JSON encoded, then output what we want to return to our jQuery.

Bringing it All Together

That wasn’t all the difficult was it.  This is the beginning of making a auto complete search box.  The biggest thing you would have to do to finish it is adjust the PHP so it searches your data, and outputs the appropriate results.  Perhaps in another tutorial we’ll handle that.  For now here is the code all together:

HTML / jQuery :

PHP :

What You’ll Need

Before you can get started you’ll need to make sure your server has the GD library installed.  If you’re not sure if it is, just create a PHP file, and place <?php phpinfo(); ?> in it and save it to your server.  When you navigate to the file it will list all the important stuff about your PHP.  Look for a GD section, with the GD support enabled, and we require a version higher than 2.0.

Getting Started

First lets look at how we want to use this script.  We want to be able to just place a url to our PHP file in the src attribute of an HTML img tag as if our PHP script was the image.

Now that we see what we want to make, lets get started.  First we are going to make a function that handles taking the source image and turning it into a thumbnail.

To break this down a little, first we figure out the width and height of the source image.  We need to know this so when we resize the source image we can keep the proportions in tact.

We then figured out what the thumbnail height would be based on the width given and the proportions of the original image.

We then create a blank that will eventually be our thumbnail.

Copy and resize the source image data into the blank image.

Then display your brand spanking new thumbnail.

Here is the PHP:

Getting URL Variables

All the heavy lifting is done, now we just need to read the variables in the URL and place them in the function we just made. We also want to add a header to let your browser know that this PHP file will be outputting a jpeg.

Here is the PHP:

You could probably do a more in depth check to see if the source image given is actually an image, but for now we’ll just check to make sure there is a value there.

Bring it All Together

That’s all there is to it. Here is all of the PHP together.

In this Demo, place any image in the URL and it will be converted to a thumbnail.

Download Files

Video Tutorials

This is a beginners tutorial from Simplepie’s website that shows you how to get started with Simplepie
Introduction to Simplepie

A tutorial that shows how to extend Simplepie to handle unique name spaces within a RSS feed.
Extending Simplepie to Parse Unique RSS Feeds

An Introduction to Simplepie and how to add RSS content to your website.
Adding RSS Content with Simplepie

Niki shows how she added a RSS to her home page.
Quick Tip #16 : Super Simplepie

This video shows how to use Simplepie with CodeIgniter.
CodeIgniter Screencast 4

Creating a news scroller with Simplepie and jQuery
How to Build a Super Duper News Scroller

Tutorials

This is Simplepie’s wiki.  A plethora of Simplepie information.
Simplepie Wiki

How to create a Flickr Gallery using Simplepie.
Create a Slick Flickr Gallery with Simplepie

This tutorial shows how to merge RSS feeds with Simplepie.
Merging RSS Feeds With Simplepie

Speed Benefits

CSS and JavaScript files for some sites can become quite large. Using caching and compression, your website download times can be drastically improved. Text files are known for compressing very well. Sometimes reducing sizes by up to 80%. This is specifically important for JavaScript files as they lock down loading of other assets until they are done. Of course there are ways around this, but we won’t get into that here.

Starting Off

First we need a website. For this example we are going to go super simple. It probably isn’t worth compressing such a simple example, but this is just for demonstration purposes.

Here is the HTML:

We also need some CSS:

And some sample JavaScript:

How it Works

There are a couple of ways of compressing files with PHP. One is using an .htaccess file, and the other is placing some PHP at the top of your CSS and JavaScript files. I chose the latter simply because it’s easier.

The idea is to change your .css and .js into .php files. That way your asset files are passed through PHP and are gzip’d.

The Files

For this example I’ll create 4 PHP files, two being the CSS and JavaScript files, and the other two being includes that do the magic.

testCSS.php : CSS file
testJS.php : JavaScript file
gzipCSS.php : CSS Header include file
gzipJS.php : JavaScript Header include file

I seperated the header information into seperate files so it’s simple to reuse the code, feel free to add the contents of these files directly in to your CSS and JavaScript files.

Lets have a look at the asset files:

testCSS.php

testJS.php

Simple enough, just take your original CSS and JavaScript file and include the PHP that relates to that type of file.

gZippage

Now here is where the magic happens. Inside the include files we’ll be placing the PHP to gzip the file and a header to tell the browser what type of file it is suppose to be. I’ve also added some caching, this isn’t required for gzip to work, it’s just a good idea to help speed up download times.

gzipCSS.php

The gzipJS.php file is pretty much the same, the only difference is the header content-type.

gzipJS.php

Putting it Together

The only thing that is left is to include your CSS and JavaScript files into your main file.

El Finito

That is it here is an example of the working file.

Example

Download all the files

So what is a Singleton. It’s simply a class that you can’t create an instance from the constructor. eg. new Class() Instead there is a wicked cool method that you create that will handle that for you. Inside this method it checks to see if an instance was already created, if it was than it returns that instance, if not it creates a new one for you coding pleasure. The only other thing is you have to make the constructor locked in from the outside world. We don’t want people accidentally creating an instance…use protection. That’s it, so here’s is an example:

PHP:

So where might you use this? If there is ever a time when you need only one of something. A good example might be a database connection.

PHP:

Of course you can always create a method for removing the instance once you’re done with it. Otherwise that is it, use to your heart’s content. You’ll often see the Singleton mixed in with other design patterns. It’s a very handy tool to have.

Someone has already solved your problems

You’ve heard of reusing another developer’s code. So why not reuse another developer’s experience. That’s exactly what design patterns try and accomplish. It sort of a guide that stears developers in a direction that has been tested and works. These design patterns make use of what the code Gods deemed as good design principles. It makes your life easier not having to worry as much about your overal code structure.

The great thing about design patterns is, it makes talking about code a whole lot easier. If you ever tried to explain your code to someone you know it can take some time. With design patterns you can just say I used a such and such pattern, and if the developer knows that pattern you’re all on the same page. Get to know them, and it opens a lot of doors.

The Strategy Pattern

This is a less complicated pattern that is used in quite a few other design patterns. It uses the design principle: Identify the aspects of your application that vary and seperate them from the ones that stays the same. This is called encapsulation. Here is an article that might help you find the parts that may change in your code.

Say you have some code like this:

The problem with this example is it isn’t encapsulating what is changing. As you can see in some instances revEngine just doesn’t work. The revEngine varys so we should seperate it out. This will allow us to look after those instances where revEngine doesn’t make sense.

Overall it looks like a lot more code, but this allows for you to change things about with little trouble. You’re creating little families of code that you can interchange with one another. All in all, very useful.

Related Links
Wikipedia on Strategy Patterns
Design Patterns
Design patterns with C# and .NET Examples
Why Design Patterns are useful