Reminding Users to Submit Forms
This article discusses a simple technique to remind users to submit a form on your web site before navigating to another page. This is especially useful for long forms where the submit button may be hidden at the bottom of the page, or when editing content in a content management system.
The technique described in this article uses JavaScript and works in modern browsers such as Internet Explorer, Firefox and Safari.
What We Are Trying to Achieve
The goal of this article is to implement code that notifies users before they browse away from a form they have filled-out but not yet submitted. There are several ways they can move away from a form without saving it:
- Closing their browser (or the browser tab)
- Refreshing the page
- Clicking on a link on the page
- Submitting a different form on the page
If the user does any of these we want to notify them that they will lose their changes. We then want to give them the option to proceed or to cancel moving away so they can then submit the form.
The only case where we don't want to notify them if they move away from the form is if they submit the form in question.
Our Solution
To implement this functionality we are going to write a short JavaScript class. Note that this class relies on the Prototype JavaScript library, which can be downloaded from http://prototypejs.org. The version of Prototype used in this article is 1.6.0.
By default our solution will not alert the user if they simply load the page and then navigate away straight away. Rather, we will ensure the user interacts with the form before we bother notifying them. To do this, we will monitor the onfocus event on all form elements in the given form. You may wish to implement a more advanced solution, such as comparing form values with their original values to see if anything has changed.
By Quentin Zervaas
Application Logic Versus Template Logic
This article takes a look at separating application logic from template logic. We will use the Smarty Template Engine as the basis for the article and its examples.
What this is basically saying is that anything relating to the final output should be determined in the template, while any data handling or processing should be done in your PHP files and classes. There’s a little more to it than though, which we’ll soon see.
An important aspect of this is that it works both ways. Often people focus on making sure their templates don’t do anything application related, but then make the mistake of making their PHP scripts (or classes) doing work that their templates should be doing. We will look at both situations and common issues that arise.
Application logic (also called business logic) is any code that deals with processing of data. That is, the processing behind the scenes. Common examples of this include:
- Processing the input from a web form
- Saving data to a database
- Debiting money from a credit card
- Reading or writing cookies on the client’s computer
We’ll look at some more examples of application logic and template logic shortly, for now, we’ll look at things that aren’t application logic and aren’t template logic.
Smarty allows developers to directly embed PHP code by using the {php} {/php} tag. Personally, while it’s good to have the functionality available, I think it’s almost always a bad idea to ever use this. It is also possible to use any declared PHP function (builtin or user defined) as a modifier (unless you have template security turned on).
This is extremely bad! You have essentially hardcoded in your application that your templates are built by displaying a header, then the main content, and then the footer. The fact that your templates are split into 3 templates like this is a function of the templates, not of the application.
In this situation, to deal with the fact a user might enter a quotation mark ("), we must escape the data. You could argue that this is application logic, but personally, I think this is directly related to the output of your HTML document, and so should be escaped when it is output.
Another exception I can think of would be if you wanted to list news articles in your template, but you’re not sure how many. That is, the number of articles shown is a function of the template. In one layout you might have room to fit three articles, but if you change templates, you might have room for five. So how many articles do you assign?
Personally, I think the second method is overkill and I would always use the first method. The additional problem is that we don’t necessarily know in the script what data the template requires.
The fact that we do something in the template for an empty array is display specific, not something that needs to be known in the application.
In this article I explained the difference between application logic and template logic when using Smarty. Hopefully you found some simple ways to improve your template design, but also recognised that some complexities can arise when doing this and sometimes comprimises must be made.
One (simplified) way to look at it is like this:
You should be able to completely change templates, including all image files and CSS files, without having to touch any of your PHP files.
All fundamental data required in your templates should be fetched or determined ahead of time and assigned to your templates (this doesn’t include meta data, such as the length of a string, etc.).
By Quentin Zervaas
Monitoring File Uploads using Ajax and PHP
Introduction
Because of the limitations of HTTP, it is difficult to monitor the status of files as they are uploaded via HTML forms. While other programming languages have built-in methods to monitor file uploads, PHP does not. This article shows how to implement such a solution in PHP.
In order to achieve this, the APC (Alternative PHP Cache) PHP extension is required, as well as PHP 5. Specifically, APC 3.0.13 or newer and PHP 5.2 or newer are required for the code in this article to work. We will cover installation of APC in the next section. It is assumed you already have a working PHP 5.2 installation.
In this article we will develop a solution that will allow users to upload a file from their computer using HTML forms. We will then determine the progress of the upload while it is in progress using Ajax, and display the status to the user.
In addition to using PHP, we will also be using the Prototype JavaScript library (version 1.6.0), which you can download for free from http://www.prototypejs.org.
The steps we will follow in this article are as follows:
- Installation of the APC extension for PHP.
- How to monitor uploads using APC.
- Creating a PHP class to manage file uploads.
- Implementing a traditional file uploader.
- Extending the uploader to display upload status.
By
Quentin Zervaas
Creating Multi-Step Forms And Wizards In PHP
Introduction
There will be many situations when creating web forms, that either you cannot accept all data on one page, either because certain responses result in a different set of subsequent questions, or because you form is so long that you need to split it up into multiple pages. The case could even be that you have a 1 page form, but you want to show confirmation of the form data prior to processing the data (e.g. showing a user their order before processing their credit card).
This tutorial covers how to implement such forms using PHP. This will include covering the various issues that need to be taken into consideration, as well as a class to help build such forms. Finally, there will be real-world example of implementing a multi-page form using the class.
One thing you should be aware of though, is that there is a lot of work on properly developing multi-step forms. Even with a package like PEAR’s HTML QuickForm Controller, it still takes time in setting everything up. We won’t be looking at that package in this tutorial, as there are many aspects I personally don’t like about the class (which is why I developed my own lightweight Wizard class).
By Quentin Zervaas
Creating Search Engine Friendly URLs In PHP
Introduction
Note: This article was updated in February 2008 to include the "Using mod_rewrite as a 404 Handler" page, since using ErrorDocument in Apache results in POST data being unavailable.
One of the major reasons for using a server-side language such as PHP is for the ability to generate dynamic content. Often this will lead to single scripts that produce their content based on the input parameters (that is, the variables in the URL).
This article covers various techniques and methods for representing these parameters in the URL in a clean and “friendly” manner, as well as then how to read the parameters.
If you’re not quite sure what I mean, take the following example. This website (PhpRiot) stores each of its articles in a database table called articles. Now, we could have built the site so all articles were referenced by their article ID, such as:
http://www.phpriot.com/article.php?article_id=1234
However, this isn’t necessarily the best way to do it. Firstly, if people have read a large number of articles on the web site, then their URL history will contain a whole bunch of different IDs, so they won’t be able to directly back to an article without either bookmarking it or visiting the home page and finding the link.
More importantly though, this is wasting valuable data that the search engines can use in indexing your site. PhpRiot has been built in such as way that each articles are accessed in a more human-readable format. For example, a previous article on this site is accessed with the following URL:
http://www.phpriot.com/articles/multi-step-wizards
This article will go over how read URLs like this and map them back to the data in your database. There are several methods that can be used with PHP, so we will cover each of these and discuss the pros and cons of each.
Additionally, the ideas used in these may cross-over between each method (such as the manual parsing of URLs), but we will also go over this.
By Quentin Zervaas
Reminding Users to Submit Forms
This article discusses a simple technique to remind users to submit a form on your web site before navigating to another page. This is especially useful for long forms where the submit button may be hidden at the bottom of the page, or when editing content in a content management system.
The technique described in this article uses JavaScript and works in modern browsers such as Internet Explorer, Firefox and Safari.
What We Are Trying to Achieve
The goal of this article is to implement code that notifies users before they browse away from a form they have filled-out but not yet submitted. There are several ways they can move away from a form without saving it:
- Closing their browser (or the browser tab)
- Refreshing the page
- Clicking on a link on the page
- Submitting a different form on the page
If the user does any of these we want to notify them that they will lose their changes. We then want to give them the option to proceed or to cancel moving away so they can then submit the form.
The only case where we don't want to notify them if they move away from the form is if they submit the form in question.
Our Solution
To implement this functionality we are going to write a short JavaScript class. Note that this class relies on the Prototype JavaScript library, which can be downloaded from http://prototypejs.org. The version of Prototype used in this article is 1.6.0.
By default our solution will not alert the user if they simply load the page and then navigate away straight away. Rather, we will ensure the user interacts with the form before we bother notifying them. To do this, we will monitor the onfocus event on all form elements in the given form. You may wish to implement a more advanced solution, such as comparing form values with their original values to see if anything has changed.
By Quentin Zervaas
Creating Sortable Lists With PHP And Ajax
You might have been in a situation before where you had a list of items in your database that needed to be output in a specific order. These items could be anything: perhaps a listing of your favourite movies or your favourite books. For whatever reason, you want them ordered in a custom way that can’t be determined automatically (such as alphabetical).
This article covers the implementation of a system that lets you easily define the order of such a list.
Traditionally, implementations of such functionality involve you clicking a “move up”, “move down”, “move to top”, or “move to bottom” button that switches the order the items (one item at a time). Or perhaps each item has a text box with a number in it, that by changing the numbers you can change the order of the list.
In any case, these methods are much more difficult to use than they should be. In this article, we’ll create a drag drop system using JavaScript that will let you drag an item to its new position, and then save the new order as soon as you drop the item.
To achieve the Ajax effects (that is, the drag/drop effect, and the seamless saving of ordering data), we will be using the Prototype and Scriptaculous libraries.
Firstly, we will create a database table (compatible with MySQL and PostgreSQL) and populate it with data. Then we will output our list and apply the drag and drop effects to it. Finally, we will deal with the saving of the new ordering data.
For our example, we will use a list of “favourite movies”, and implement functionality to change the order of our movies.
By Quentin Zervaas
Anti-Spam Techniques In PHP, Part 1
This short series of articles provides a few simple techniques for protecting yourself and your web site from spammers.
It does this from two perspectives:
The issue here is that if you publish your email address on a web site, there’s a good chance it will be harvested to be used by spammers. Many of these harvesting tools are crude and poorly written so it can be easy to protect yourself from these, although some are more sophisticated.
The first article in this series contains techniques for preventing spam for people who post to your web site.
The issue here is that if your web site allows anybody to submit content, chances are spammers will bombard it with links to their products. They do this to receive a higher backlink count, and therefore receive a higher Google PageRank, giving them better search engine results.
There are number of anti-spam techniques for preventing this, which will be discussed in the second article of this series.
By Quentin Zervaas
Cloning Google Suggest With Ajaxac
This article covers how to implement a system such as Google Suggest using JavaScript, CSS and PHP.
To aid us in this process we will be using AjaxAC, an open-source framework written in PHP used to develop AJAX style applications. This is being developed with version 0.41 of the framework. We will aim to keep this article up-to-date with the latest version of AjaxAC, as its interface is likely to change before its first stable release.
AJAX — Asynchronous JavaScript and XML — is the term given to a web application or solution using JavaScript, CSS and XML. This fundamental idea behind AJAX is the usage of the XMLHttpRequest object, which allows a web page to make subsequent HTTP requests in the background to update the state of the page.
Google Suggest is a frontend to Google which will offer suggestions to search for as you type your query. When you type a keyword, a dropdown list will appear with terms beginning with what you have typed and how many results they will yield if you select to search for them. You can use your up/down arrow keys to select one of these suggestions. Alternatively, you can use your mouse to select an option, and initiate the search by clicking on the option.
We will be implementing a clone of this application, from start to finish. This begins with setting up our frontend HTML file and CSS styles, creating our AjaxAC GoogleSuggestCloneJax application, and then linking it all together. There will be a few modifications to Google Suggest, the main one relating to the fact we don’t have an index of 8 billion pages behind us! We will use a MySQL database to fetch all the suggestion data, to demonstrate how to use MySQL in AjaxAC.
So let’s get started. This is a fairly long article, but hopefully will be a good reference for HTML, CSS, JavaScript, PHP and AJAX! Our final result in this article – the GoogleSuggestCloneJax application – is included as an example application in the AjaxAC distribution (as of version 0.4).
By Quentin Zervaas
Searching Google With The Google API
This article covers performing search queries on Google using their API. This means you can transparently run a Google search in the background, and then present the results to your users however you want to.
The Google API is a SOAP web service. SOAP (Simple Object Access Protocol) is an XML schema used for calling a remote procedures (usually) over the web. In this case, the remote procedure is Google search.
To achieve this, there are a few things we firstly need:
- A Google license key – This is your own key for access the Google web service. To get your key, visit the Google APIs page and create an account.
- NuSOAP – This is a SOAP toolkit for PHP. Using this saves us all the hassle of dealing directly with SOAP web services. Download from SourceForge.
In this article, we are going to create a single PHP script called google.php, to simply demonstrate how to query Google. Hopefully using this information, you will be able to come up with more advanced ways of using the API.
The Google
API does offer querying of their cache, as well as spelling requests, however, this article covers only performing searches. If you’re interested in these other types of queries, you’re best of
By
Quentin Zervaas
Creating Multi-Step Forms And Wizards In PHP
There will be many situations when creating web forms, that either you cannot accept all data on one page, either because certain responses result in a different set of subsequent questions, or because you form is so long that you need to split it up into multiple pages. The case could even be that you have a 1 page form, but you want to show confirmation of the form data prior to processing the data (e.g. showing a user their order before processing their credit card).
This tutorial covers how to implement such forms using PHP. This will include covering the various issues that need to be taken into consideration, as well as a class to help build such forms. Finally, there will be real-world example of implementing a multi-page form using the class.
One thing you should be aware of though, is that there is a lot of work on properly developing multi-step forms. Even with a package like PEAR’s HTML QuickForm Controller, it still takes time in setting everything up. We won’t be looking at that package in this tutorial, as there are many aspects I personally don’t like about the class (which is why I developed my own lightweight Wizard class).
By Quentin Zervaas