Logic’s Last Stand

June 5, 2010

Accessible Forms with PHP and jQuery

Filed under: Computers, Freeware — Tags: , , , , — Zurahn @ 8:30 pm

A primary challenge of recent web-development is how to make use of the great new dynamic tools provided to us in using libraries such as jQuery, while still providing an accessible website without the use of JavaScript. While there’s more to accessibility than making a site work without JavaScript, it’s a fundamental start. This task looks arduous, but it doesn’t have to be — approach it right from the start and it may actually be trivial.

Let’s start from the no-JavaScript version and work up. Normally your form without JavaScript would look something like this

<form method="post" action="example.php">
    Field: <input type="text" name="field" /><br />
    <input type="submit" value="Submit" />
</form>

To have JavaScript handle the post, we’ll add an onsubmit function to the form.

<form method="post" action="example.php" onsubmit="return formSubmit(this)">
    Field: <input type="text" name="field" /><br />
    <input type="submit" value="Submit" />
</form>

When the onsubmit function returns false, the form does not submit. So by having the formSubmit function return false, we can have the page handle the post via AJAX instead of having to refresh the page. Let’s look at the formSubmit function.

function formSubmit(obj)
{
    var form = $(obj);
    $.post(obj.action, form.serialize());
    return false;
}

The .serialize() function takes the form elements and converts them to query string parameters so they can be passed through post. By using this, we can reuse the same generic formSubmit function regardless of the form — all we have to add is the onsubmit attribute to the form.

Now you may also want to have error and success messages return. A good way to handle this is via JSON objects. JSON is a standard by which objects can be represented in string form, so we can pass a string from PHP to JavaScript, which can then be handled as an object. Let’s update out formSubmit function to handle this behaviour (the script will assume that there are hidden divs with the ID “error” and “success”.

function formSubmit(obj)
{
    var form = $(obj);
    $.post(obj.action, form.serialize(), function(data)
    {
        // Return data is JSON object string, so eval to get object
        var message = eval("("+data+")");
        showErrors(message['errors']);
        showSuccesses(message['successes']);
    });
    return false;
}

function showErrors(messages)
{
    if(typeof messages != "undefined")
    {
        $('#success').css('display', 'none');
        var error = $('#error');
        error.css('display', 'none');
        error.html(getMessageList(messages));
        error.fadeIn();
    }
}

function showSuccesses(messages)
{
    if(typeof messages != "undefined")
    {
        $('#error').css('display', 'none');
        var success = $('#success');
        success.css('display', 'none');
        success.html(getMessageList(messages));
        success.fadeIn();
    }
}

function getMessageList(messages)
{
    var output = '<ul>';
    // iterate through the object properties
    for(i in messages)
        output += '<li>'+messages[i]+'</li>';
    output += '</ul>';
    return output;
}

Now we need to construct the JSON object on the PHP side. The error will be echoed, but remember that we want this to work even if it’s not an AJAX post, so we need different behaviour depending on whether or not it was an AJAX post — echo error/success messages if AJAX, redirect back if it’s not. Let’s go to example.php; the script will assume that the value $_SESSION[‘page’] holds the value of $_SERVER[‘PHP_SELF’] before the post.

<?php
session_start();
$field = $_POST['field'];

if(!isset($field) || $field === "")
    Reporting::setError("Name cannot be blank");

if(!Reporting::hasErrors())
{
    /* Do something with $field */
    Reporting::setSuccess("Operation with <em>$field</em> completed successfully");
}

Reporting::endDo();


class Reporting
{
    public function __construct()
    {

    }

    public static function endDo()
    {
        if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest')
        {
            if(self::hasErrors())
                echo self::getJsonErrors();
            else if(self::hasSuccesses())
                echo self::getJsonSuccesses();
        }
        else
            header('Location: '.$_SESSION['page']);
    }

    public static function hasErrors()
    {
        return isset($_SESSION['errors'][0]);
    }

    public static function hasSuccesses()
    {
        return isset($_SESSION['successes'][0]);
    }

    public static function setError($message)
    {
        $_SESSION['errors'][] = $message;
    }

    public static function setSuccess($message)
    {
        $_SESSION['successes'][] = $message;
    }
    
    public static function getJsonErrors($clear=true)
    {
        return self::getJsonMessages('errors', $clear);
    }

    public static function getJsonSuccesses($clear=true)
    {
        return self::getJsonMessages('successes', $clear);
    }

    public static function showErrors($clear=true)
    {
        return self::showMessages('errors', $clear);
    }

    public static function showSuccesses($clear=true)
    {
        return self::showMessages('successes', $clear);
    }

    private static function showMessages($type, $clear)
    {
        $output = '<ul>';
        foreach($_SESSION[$type] as $val)
            $output .= "<li>$val</li>";
        $output .= '</ul>';
        if($clear)
            $_SESSION[$type] = array();
        return $output;
    }

    private static function getJsonMessages($type, $clear)
    {
        $output = '{ '.$type.': { ';
        $comma = '';
        foreach($_SESSION[$type] as $key => $val)
        {
            $output .= $comma.$key.': "'.$val.'"';
            $comma = ', ';
        }
        $output .= ' } }';
        if($clear)
            $_SESSION[$type] = array();
        return $output;
    }
}
?>

Looks like a lot of work, but with that, we’re all done. Everything from now on is handled identically between jQuery and non-JavaScript versions of the site, and all you have to do is add onsubmit=”return formSubmit(this)” to each form, and in the processing script, close with Reporting::endDo(). Everything else takes care of itself.

Advertisements

May 25, 2008

Beginner’s Guide to a Real Web-site – Part 6 – Intro to SQL

Filed under: Computers — Tags: , , , , , , — Zurahn @ 2:46 pm

Database interaction is in most cases dealt with using a language called SQL (Structured Query Language). For our purposes, we only need to know the basics, which are:
-Inserting data
-Updating data
-Deleting data
-Retrieving data

These are conveniently done using the keywords INSERT, UPDATE, DELETE and SELECT. However, before we can get to that, we need to understand what we’re storing and how to store it. We know that we simply want to store blog posts; these will have titles, dates, and a body. We can do this with a single table. A table is what we call what we store data in, because we use “columns” of data.

Our table, which we’ll call “blogs” will have these columns:
-id
-title
-date
-body

We can do this either in SQL or in the handy PHP tool phpMyAdmin which is included with WAMP (click the WAMP icon on the taskbar, and choose phpMyAdmin). PHP web hosts will typically have phpMyAdmin installed for your use. In our code we need to use SQL to interact with the database, but setting up the structure we can, and for simplicity’s sake in this tutorial, do it in phpMyAdmin.

Firstly, we create a new database, which we can call “mysite” and click the Create button. This will create the database, which will store the table. Now you’ll see at the bottom “Create new table on database mysite”. Enter “blogs” for the name, and we need 4 columns (id, title, date, body).

On the next screen, “Field” is the name of the column (id, title, date, body). For the data type dropdowns, id will be INT, title will be VARCHAR, date will be a TIMESTAMP (not DATETIME), and body will be TEXT.

INT is short for Integer (a number with no decimal points and can be positive or negative). IDs should be Integer values. Set the length to 11, EXTRA to auto_increment (meaning it automatically assigns a unique value to it when you INSERT), and choose the first radio button under the page with the key to set it as the Primary Key (the value that uniquely identifies a record — in our case a blog post — in the table).

For title, VARCHAR is a text field with a set length. We’ll set the length to 50 (seems reasonable for a maximum title length).

For date, TIMESTAMP is the number of seconds having passed since December 31, 1969. Timestamps are easily converted to date formats in PHP. Change default to ON UPDATE CURRENT_TIMESTAMP; this just means to insert the current time by default.

And for body, TEXT is a text field with no specified maximum length and is only limited by the database software itself. This will allow for blogs without having to worry about one being too long.

Click Save to create the table.

If you wanted to do this in SQL, here is the code, though I won’t go through it to explain.

CREATE TABLE mysite.blogs (
id INT(11) NOT NULL AUTO_INCREMENT,
title VARCHAR(50) NOT NULL,
date TIMESTAMP NOT NULL,
body TEXT NOT NULL,
PRIMARY KEY (id)
) ENGINE = InnoDB 

For the sake of building our SQL skills before jumping into PHP usage, click the SQL tab in phpMyAdmin to get a box where we can enter SQL queries. This way we can test our queries and see how they work. Here’s a query to insert a record into our table

INSERT INTO blogs (title, body) VALUES('A Blog Post', 'This is where a blog post would be');

Selecting all records from a table:

SELECT * FROM blogs;

Select specific records and columns from a table:

SELECT title FROM blogs WHERE id = '1';

We can also update the record:

UPDATE blogs SET title = 'My Blog Post' WHERE id = '1';

Or, finally, delete the record:

DELETE FROM blogs WHERE id = '1';

This is basically all you’ll need for the development of our site. We can use SQL statements directly in PHP to modify the database, which we’ll do in Part 7.

April 24, 2008

Thanks, PHP

Filed under: Computers — Tags: , , , — Zurahn @ 5:08 am

This error message was extremely helpful
WTF

April 16, 2008

Beginner’s Guide to a Real Web-site – Part 5 – PHP Programming

Filed under: Computers — Tags: , , , , , , , — Zurahn @ 5:57 am

PHP is a complete programming language, as opposed to XHTML and CSS which are mark-up languages.

Programming languages have a few simple characteristics:
-Variables that store data
-Conditional statements
-Loops

Variables in PHP begin with a dollar sign

$num = 1;

The above statement (which must end with a semi-colon) assigns a variable called “num” the value of 1.

Conditional statements check the value of a variable or variables.

if($num == 1)
{
  echo "YES!";
}
else
{
  echo "NO!";
}

The above if statement checks if the value of $num is equal to 1. If it is, the page outputs the text “YES!”, otherwise, it outputs the text “NO!”.
Anything within the { } brackets applies only for that statement.

There are other conditional operators than “==”. Here are a list of operators in PHP:
== (equal to)
=== (equal in value and in type)
! (NOT)
> (greater than)
>= (greater than or equal to)
< (less than)
<= (less than or equal to)
|| (OR)
&& (AND)

Loops repeat a section of code several times over. There are two basic kinds, the while loop and the for loop.

A for loop is designed for when you know how many times you want to go through the loop.

for($i=0;$i<10;$i++)
{
echo $i;
}

The above loop repeats 10 times, starting from 0. The loop repeats as long as $i is less than 10, and $i increments 1 each time through.
Also note
$i++
This increments the variable $i by 1. ++ is a shortcut. Equivalents to this would be
$i += 1
or
$i = $i + 1;

A while loop lasts while a condition is true.

$count = 0;
while($count < 10)
{
  echo $count;
  $count++;
}

The above loop repeats 10 times. It keeps going as long as the count, which started at 0, is less than 10. In the above case, it works identically to a for loop; however, if you have an uncertain condition, such as a random number or user-input, the number of times is unknown.

All we’re going to do to start is to receive some data from the user, then output it back.

Make a copy of index.php and call it blog.php. This will be the start of our blog page.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>
<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

There’s a bit to explain here. A form tag in HTML surrounds a series of data you want to send to the server (our PHP). In this case, we just want to submit the data to itself, so we echo out the page we’re on, which is stored automatically by PHP in the variable $_SERVER[‘PHP_SELF’]. You could just type in ‘blog.php’ to get the same effect, except it won’t work if the page gets renamed.

The input type submit sends everything within the form to the server.

Anything sent to the server (in this case with method post) in PHP will be stored in $_POST. Let’s echo out the value of the blogpost.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>

<?php
if(isset($_POST['blogpost']))
{
  echo "<p>".$_POST['blogpost']."</p>";
}
?>

<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

All I’ve added is a check to see if there’s a value in the blogpost, and if there is, to display it in a new paragraph.

For the sake of making things look a little nicer, you can create a new CSS file called blog.css and add this to it (and don’t forget to import it into blog.php using the tag)

#blogpost
{
  width: 85%;
  border: 1px dashed white;
}

#submit
{
  border: 1px solid white;
  background-color: black;
  color: white;
}

Our problem now is that the blog doesn’t go anywhere. It needs to be stored in a database, which we’ll cover in Part 6.

April 12, 2008

Beginner’s Guide to a Real Web-site – Part 4 – Server-side Scripting

Filed under: Computers — Tags: , , , , , , — Zurahn @ 6:58 am

The veiled goal of all we’ve done to this point is to be prepared to take on a more suitable basis for creating a web-site, and that is through server-side scripting. This is the method of running a programming language on a web-server to control the HTML that is sent to the client’s browser. In this method, we can re-use one piece of code repeatedly throughout many pages.

The language we’re going to use in our example is PHP. It is a loosely typed language (rules aren’t strict) and isn’t particularly difficult to set-up or understand.

In order to run a server-side language, you need two things: The language installation, and an application server (a program to act as the server to run the language). We’ll be using PHP and Apache. The easiest way to install these is through a packaged installation such as WAMP.

WAMP stands for Windows Apache, MySQL and PHP. MySQL is database software which we’ll use one we get a handle on PHP. You can install all these individually, but the installation of MySQL can have some quirks.

Once installed, you can run the WAMP server and a tray icon will appear on your taskbar. Clicking it will give you several options. The www directory is where all your files will go. Make sure all your services are started (the icon should be white, but you can click Restart All Services to be sure), then open your web browser and enter into the address bar:

http://localhost

This should bring up a page with WAMP information if you have it installed correctly.

In your www folder, delete index.php and create replace it with a blank index.php. Copy over the contents of index.html and open localhost in your browser again. We should see our page.

What we need to do now is segment the page. We will be using includes to do this. Though there are object-oriented ways that are generally an improvement, it goes beyond our scope and would serve at this point only to confuse.

Create a folder called “includes” and in it a file called “top.php”. This will contain our doctype declaration and opening down to the header. Copy this code and put it in top.php

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css" />

Do not copy in the title tag. Save and close the file. Create a new file called middle.php and paste this code into it

</head>
<body>
<div id="container">
  <div id="header">
	<h1>Web-Design HQ</h1>
  </div>
  <div id="main">
    <div id="menu">
	Menus
    </div>
    <div id="article">

Save and close the file, and make one final file called bottom.php and paste this code into it.

	</div>
  </div>
</div>
</body>
</html>

Now, back in the index.php file, we can use our other files to easily insert our page design.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
This is the index page
<?php include_once('includes/bottom.php'); ?>

That’s all that needs to be in index.php now.

The <?php indicator denotes the start of PHP code. You cannot place HTML within this.
include_once is a method. A method is a reusable piece of code, in this instance, to import data from another file.

So in plain terms
-Include the top part of the page up until the <head> tag
-Insert anything specific that needs to be in there, such as the title
-Include the middle section up until where we put our content
-Write our content
-Include the bottom part to close any remaining tags

Now any change we make to any of the included files will apply to every page that includes them. This significantly reduces redundant code and time wasted on repetitious changes.

Part 5 will address the basics of actual programming in PHP.

Blog at WordPress.com.