Continuing on from last weeks tutorial (Creating a simple to-do application – Part 1) and the short snippet (Turning a form element into JSON and submiting it via jQuery ), this week we’ll be writing a PHP page to accept and process the form submit and return a JSON response.
Installing PHP on your web server
There are several ways to install PHP to your web server, but each is dependent on what web server you are running. The two main ones I will deal with are Microsoft’s Internet Information Services (IIS) and Apache. IIS will only run on Windows, but Apache will run on either Windows, OSX or your favorite Linux Distro (e.g Ubuntu). For each operating system there are several easy to use packages that will install and configure both the web server and php.
The easiest package for Apache I find is XAMPP, it provides installers for all of the major platforms and is very easy to use. You can download it directly from the site based on your operating system and follow their install guides.
Linux Windows OSX
The XAMPP site includes details on where to put your files and how to create alias folders. These topics and more are covered in the install guides above.
IIS actually comes free with Windows, it generally isn’t installed by default but you can add it in the “Add/Remove Programs” section of the Control Panel under “Turn On/Off Windows Features” (For a detailed step by step guide, click here). The easiest way to install PHP is to download the Microsoft Web Platform Installer. It will offer you a range of programs to install, everything from PHP and WordPress to various e-commerce platforms. All you do is pick the applications you want, and they will automatically be installed!
By default web files go in the following folder C:\inetpub\wwwroot, you can however create “Virtual Folders” that point anywhere you want. To continue this tutorial, please save the index.html page in to wwwroot or create a virtual folder
Assuming you’ve gotten your web server running and PHP configured, let’s get started! (If you are having trouble, please feel free to ask in the comments section below and I will help as best I can).
First we’ll create our submit.php file (in the same folder as our index.html file) and then using the PHP global variable $_POST we will retrieve the form values we have submitted using jQuery. PHP code is always wrapped in “<?php ?>” tags, anything outside of these tags is rendered as normal (like HTML).<?php $name = $_POST["new-task-name"]; $date = $_POST["new-task-date"]; $desc = $_POST["new-task-desc"]; $email = $_POST["new-task-email"]; $priority = $_POST["new-task-priority"]; $color = $_POST["new-task-color"]; ?>
We are using the $_POST variable instead of the $_GET because we specified our jQuery submit method as ‘POST’, this can be easily changed if you prefer to use ‘GET’
Now that we have our form values, we’ll have to provide some basic validation on them. We know that we need a name, the date and priority values, but we also know that we can specify optional values and in the case of the email field a comma separated list. First we’ll make sure our required values, do in fact have values and that they are formatted correctly.
Firstly, we’re going to specify some default values and then update the variables after we have confirmed that each of the form values has been provided. We can do this using the empty function.<?php $name = null; $date = date('c'); $desc = null; $email = null; $priority = 2; $color = '#ffffff'; if (!empty($_POST["new-task-name"])) $name = $_POST["new-task-name"]; if (!empty($_POST["new-task-date"])) $date = $_POST["new-task-date"]; if (!empty($_POST["new-task-desc"])) $desc = $_POST["new-task-desc"]; if (!empty($_POST["new-task-email"])) $email = $_POST["new-task-email"]; if (!empty($_POST["new-task-priority"])) $priority = $_POST["new-task-priority"]; if (!empty($_POST["new-task-color"])) $color = $_POST["new-task-color"];...