Eight Weeks of Prototype: Week 8, A Complete Prototype Example

Ajax Request Handler to Save a Contact

The final server-side script to create at this point is the one used to save a new contact based on submitted form data. This script reads the data submitted (via the "post" HTTP method) and calls the saveContact() method of the ContactManager class to save it to the database.

Listing 6 shows the code used to achieve this, which includes comments. It begins by connecting to the database (by including the database.php file), then initialize default values for the new contact. The corresponding values are then read from the form data (that is, the $_POST variable in PHP). Note that we also sanitize the value by calling trim() and strip_tags() on the value.

Next we loop over the values to check that each value has been submitted. If a value is not specified an error message is written to the $errors array.

Finally, we check if any errors have occurred, and if they haven't the saveContact() method is called. If you recall from Listing 4 the saved contact is returned from the method call, which we then use to include in the JSON response.

<?php
    require_once('database.php');
    require_once('ContactManager.php');
 
    $cm = new ContactManager();
 
    // initialize the values
    $values = array(
        'name'     => '',
        'email'    => '',
        'location' => ''
    );
 
    
    // loop over the fields and retrieve them from the form data.
    // also, sanitize the data so malicious data is not saved
    foreach ($values as $field => $value) {
        if (!array_key_exists($field, $_POST))
            continue;
 
        $values[$field] = trim(strip_tags($_POST[$field]));
    }
 
    // if an error occurs it will be stored in this array
    $errors = array();
 
    
    // loop over all values and ensure they have been specified
    // this is fairly rudimentary data validation
    foreach ($values as $field => $value) {
        if (strlen($value) == 0)
            $errors[] = 'This field is required';
    }
 
    
    // create the JSON return data
    $json = array('errors' => $errors);
 
    
    // if no errors occurred, save the contact
    if (count($errors) == 0) {
        $contact = $cm->saveContact($values['name'],
                                    $values['email'],
                                    $values['location']);
 
        
        // write the new contact to the return JSON data
        $json['contact'] = $contact;
    }
 
    
    // send the JSON response
    header('Content-type: application/json');
    echo json_encode($json);
?>

The beauty of this code is that it will still work even if the user does not have JavaScript enabled in their browser. Technically you should then use a different response rather than sending back JSON data (since browsers don't have a way to represent this), but this is a fairly trivial change and checking if a request occurred via Ajax is discussed in the previous section and in the fifth article in this series. 

• Next: Creating the Primary Web Page