JAVASCRIPT

Programmatic POST Requests with JavaScript: Form Emulator in Action

In the fourth and final part of our series, we examine the form emulator we built in the third part in the context of a practical example that puts the program to work. The form emulator can be used as a simple testing bed to help you build more robust and safer Web applications.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 14

August 03, 2005

TABLE OF CONTENTS:

As I said before, the first sample file to be written is the form page that will be used by the script as the target to emulate its submission. Of course, the page code will be kept extremely simple, so I’ll get rid of all the possible CSS rules and unnecessary structural markup, and focus on the basic form’s markup. Below is the “post_form.htm” sample form page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

<html>

<head>

<title>POST FORM EXAMPLE</title>

</head>

<body>

First Name <input type="text" name="fname"
size="30" /><br />

Last Name <input type="text" name="lname" size="30" /><br />

Email <input type="text" name="email" size="30" /><br />

</form>

</body>

</html>

As you can see, the above form page contains a few regular fields for collecting the usual user data, such as “First Name”, “Last Name” and “Email’. Now, let’s get the boring details out of the way and pay attention to the form’s action attribute. Notice that the form is pointed out to the file “processform.php”, which logically will process the data when the form is submitted.

In a regular situation, each time a visitor fills in the specified fields, the entered information will be sent as a separated block containing the name/value pairs to be hopefully validated on the server and processed accordingly.

Now, let’s take a look at the “processform.php” file, which look like this:

require_once 'clases/mysqlclass.php';

$db=new MySQL(array
('host'=>'host','user'=>'user','password'=>'password',
'database'=>'databasename'));

$fname=$_POST['fname'];

$lname=$_POST['lname'];

$email=$_POST['email'];

$query="INSERT INTO users VALUES
(NULL,'".$fname."','".$lname."','".$email."')";

$db->query($query);

echo 'Congratulations! The following information was
succesfully added :<br />';

echo 'First Name '.$_POST['fname'].'<br />Last Name '.$_POST
['lname'].'<br />Email '.$_POST['email'];

As you can appreciate, I’ve kept the code as simple as possible. Although the file actually contains some PHP statements, another server-side language could have been used to perform the same processing.

Essentially, the above file connects to the MySQL server, then inserts the user data into a database table and displays a basic message together with the data just entered. Specifically I’ve omitted any possible data validation process, so the code is easy to read. However, in many cases (but certainly not all of them), data will be verified at least by checking to make sure that the fields are not empty strings and the email address entered is well-formed.

Certainly I wouldn’t implement such an insecure verification mechanism in my own programs, but let’s be open-minded and think how many websites around present poor data checking. Since the Web is today’s largest development platform, real statistics say that there are thousands of cases where a correct validation process is often poorly implemented or omitted at all. Sad but true.

However, data validation is out of the scope of this article, so let’s pay attention to the scenario that I just described here. Now two simple files have been defined, which together work as functional script for collecting user data, so the next thing to do is run the form emulator program by pointing it to the form page file. Want to learn more? Keep reading.

Next: The third step in coding the example: running the form emulator program >>