The PHP

The snippet itself is pretty simple. First you create a variable to hold your date and time as a string. Then convert that string into a format that can be compared to php’s time() function using the strtotime() function. If it’s before the current time, redirect the user using the header() function….it’s that simple.

Hope this makes your life a little easier.

enjoy!

Filtering Variables the PHP 5 Way

So what is the quick method to validating emails? The function called filter_var(). This function allows you to run your variable through a filter that you specify, and can either validate the variable, or return a sanitized string depending on the filter you choose.

What does this look like…

Alternatively you can use the sanitize filter, and it will remove any characters that aren’t valid.

As you can see these are super easy. You no longer have to worry about your regular expressions sucking. Php has you covered.

What are we building?

We are going to build a page that pulls in each row from you excel document and styles it to our liking. We’ll be doing this by building a php page that spits out json. Then with the magic of jQuery we’ll pull that information in and parse it to our liking.

Required Tools

We’ll be using a pre-made php class to handle reading of our excel file. The one I used is call php-excel-reader. You’ll also need an excel document to read from. I’ll be using a list of hair salons in Canada….don’t ask, it was for a project I was working on. It has all the contact info for each business. Besides that you should be good to go.

Extending Class to Meet Our Requirements

The php excel reader class isn’t prefect for our needs. We need some sort of method to take each cell and dump it into an array. Also, the class doesn’t handle phone number formatting very well. So what are we going to do? Create our own class and extend the excel reader class with our new methods…fun! Why not just edit the original class? It’s generally bad practice to hack the core. Any mistakes we’ll be making will be contained within our new file.

First thing is first. We need to create our class.

Our Class -> ExcelReader.php

Now on to the method to convert each of the rows into an array.

The dumptoarray method

If you don’t have a phone number formatting in your excel document feel free to skip this. All we’ll be doing is copying the method from the original class, and place in some new code that handles formatting for phone numbers.

Here is the extra code we’ll be placing in the code from the original class.

So now our method looks something like…

_format_value method

JSON Our Entries

Now it’s as simple as pulling in our excel file, calling our dumptoarray method and convert it to JSON. The JSON will be read by jQuery and parsed accordingly.

To do all of this, we’ll create the file list.php and place everything in there.

list.php

Load in Our JSON via Ajax

Our HTML is going to be pretty simple. We’re just going to have one div with an id=”content” and a title.

Here is the HTML

Our jQuery isn’t overly complicated. We load in the JSON via Ajax, and we just step through each entry and format it accordingly.

The jQuery

After adding some css, your HTML page should look something like…

That should be it. Be sure to download all the files and fiddle around with it yourself. Also be sure to read up on the documentation that comes with the excel reader class.

5 Must Have Books for Web Developers

This is list of books that will help you become a better developer.

10 Characteristics of Good Program Design

This is a list of goals that a developer should try and have in their software design. Some goals contradict other ones, but that is where you have to decide what is best for your program.

10 HTML Tags that are Overlooked but Should be Used.

With the popularity of CSS, the Div tag has been painfully overused. Here is a list of HTML tags that will help you use HTML the way it was intended.

10 HTML Mistakes that Should be Avoided

Here is a list of common mistakes in HTML that should be avoided.

Better Web Usability Through Visual Relationships

Web Usability is more important than ever. People have little to no time to read through all of your information to find what they are looking for. Creating visual relationships can help users find what they are looking for quicker and more efficiently.

How To Create A Twitter jQuery Plugin

Have you ever wanted to create a jQuery plugin? Or put your Twitter feed on your website?  If so this is the tutorial for you.

Things that Can Help or Hurt Your Web Usability

Trying to keep your users happy is the name of the game. A usable website can help your users, and in turn help you with your ultimate goal of your website. The following is a list of dos and do nots of web usability.

10 Must Have Cheat Sheets for Developers

There are far too many languages out there for web developers to remember everything for every language. Here is a list of cheat sheets that will help speed up research time for the lingo that you forget.

How To Compress CSS/JavaScript Files With PHP

A quick way to speed up your site is to simply limit how much the user has to download. This tutorial will show you how to automatically gzip (compress) your files with PHP.

How To Create an Advanced Search Box

Tired of boring boxy search inputs. This tutorial will help you create a functional and visually pleasing search box.

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

Informational

100 – Continue

Indicates that part of a request has been successfully received, and the rest should now be sent.

101 – Switching Protocols

Status code 101 is when the server is changing protocols as defined in the “Upgrade” header that it returns to the browser.

Successful

200 – OK

This just means that the request has been received and understood and is being processed.

201 – Created

This indicates that a request was successful and as a result, a resource has been created.

202 – Accepted

Status code 202 indicates that the server has received and understood the request and has been accepted for processing.

203 – Non-Authoritative Information

This is a lot like a status 200 except the response comes from a third party rather than the original server.

204 – No Content

The request has been received and understood but there is nothing to send back.

205 – Reset Content

An example of this might be if a user fills out a form, and submits it, a status code of 205 means the server is asking the browser to clear the form.

206 – Partial Content

A status code of 206 is a response to a request for part of a document.

Redirection

300 – Multiple Choices

The 300 status code indicates that a resource has moved. The response will include a list of locations that the user agent can select from.

301 – Moved Permanently

A status code of 301 tells a client that the resource they asked for has permanently moved to a new location. It tells the client that it should use the new URL for this resource.

302 – Found

This is when a resource has been temporarily moved to a new location. It tells the client that it should still use the same URL to access the resource.

303 – See Other

This means that the response to the request is found at a different URL. It doesn’t mean the resource has moved, it is just giving the address to where the response can be found.

304 – Not Modified

304 status indicates whether a document is different from the one in the client’s cache.

305 – Use Proxy

A 305 status code tells the client that the requested resource has to be reached through a proxy, which will be specified in the response.

307 – Temporary Redirect

307 is pretty well the same as status 302.

Client Error

400 – Bad Request

A status code of 400 indicates that the server did not understand the request due to bad syntax.

401 – Unauthorized

A 401 status code indicates that the client must be authorized before receiving the resource.

402 – Payment Required

The 402 status code is not in use. It’s listed as “reserved for future use”.

403 – Forbidden

A 403 status code indicates that the client cannot access the requested resource. This could mean that authentication failed, or the user does not have permission.

404 – Not Found

This is probably the most popular. It just means that the page you were looking for cannot be found.

405 – Method Not Allowed

A 405 status code is returned when the client is trying to use a request method (POST, GET) that the server doesn’t allow.

406 – Not Acceptable

The 406 status code means that the server understood and processed the request, but the response is not in the form that the client specified in the header request.

407 – Proxy Authentication Required

The client must be authorized by the proxy before the request can proceed.

408 – Request Timeout

The client didn’t produce a request quick enough. Servers have a set time limit, a 408 indicates that it went past the limit.

409 – Conflict

A 409 status code indicates that the server was unable to complete the request. This might happen if your trying to add, edit, remove a file, and you are unable to.

410 – Gone

A 410 status code is similar to 404, but indicates that the file is permanently gone. Where 404 doesn’t indicate one way or another.

411 – Length Required

The 411 status code occurs when a server refuses to process a request because a content length was not specified.

412 – Precondition Failed

A 412 status code indicates that one of the preconditions of the request was not met.

413 – Request Entity Too Large

The 413 status code indicates that the request was too large. Either by physical limit of the server or a setting on the server.

414 – Request-URI Too Long

The 414 status code simply means that the URL was too long to be processed.

415 – Unsupported Media Type

A 415 status code is returned by a server to indicate that part of the request was in an unsupported format.

416 – Requested Range Not Satisfiable

A 416 status code indicates that the server was unable to fulfill the request. For example, the client requests bytes outside the total bytes of a document.

417 – Expectation Failed

The 417 status code means that one of the headers sent to the server, indicated an expectation the server could not meet.

Server Error

500 – Internal Server Error

A 500 status code means the server came across something unexpected and could not complete the request.

501 – Not Implemented

The server does not support all that is needed for the request to be completed.

502 – Bad Gateway

If the server is acting as a proxy, received a response from a server further up that judged the request as invalid.

503 – Service Unavailable

When a server can’t complete a request because it is too busy (overloaded)

504 – Gateway Timeout

When a server is acting as a proxy, and a server upstream is taking too long.

505 – HTTP Version Not Supported

A 505 status code is returned when the HTTP version indicated in the request is no supported. The response should indicate which HTTP versions are supported.