Week 4: PHP and server side scripting

What is server-side scripting

Last week we learned about Javascript, which is called "client-side scripting." That is, the Javascript programs you write are processed by the browser on the users' computers. PHP, on the other hand, is processed on the server. This has several advantages and disadvantages:

Pros of server-side scripting Cons

Because PHP requires a server runnning PHP, and because most Windows machines do not, by default, have this, we will need to install one. Macs actually do have a server installed, but it isn't as easy to use as it could be, so we will install a better one ourselves.

About a year ago, people started talking about the web developers toolkit which included a Linux machine running a server called Apache with MySQL and PHP installed. This toolkit came to be abbreviated LAMP (Linux, Apache, MySQL, PHP). Soon after, people began to package the latter three tools together in distributions for Mac and Windows, calling the sets (predictably) MAMP and WAMP. On the tools page http://mith2.umd.edu/workshop/tools.html there are links to download these packages. You should download and install them now.

PHP "Hello World"

Alright, let's start PHP coding.

Open a text editor (Wrangler or Notepad++) and type the following:

<?php echo "Greeting, creator!"; ?>

Now, save this file as "index.php" and place it in the htdocs folder of your MAMP/WAMP directory. Now, if you go to http://localhost:8888/" you should be greeted by your grateful creation.

The syntax of PHP is more or less the same as that of Javascript, with a couple of important exceptions. First, all variables are designated with an initial $. So, for instance,

$aVariable = "Doug";

sets the variable "$aVariable" to Doug. You can include these variables in strings and they will be automatically evaluated. So, for instance,

$aVariable = "Doug";
echo "Hello, my name is $aVariable";

will return:

Hello, my name is Doug

Also, instead of "else if" in conditional statements, PHP runs the two words together like this:

$name="Doug";
if ($name=="Doug"){
echo "Welcome, master!";
}
elseif ($name=="Neil") {
echo "Intruder alert!";
}
else {
echo "Howdy, stranger.";
}

Finally, to add strings, you use a period rather than a plus sign. So what in Javascript would be

JAVASCRIPT: FirstName+" "+LastName;
in PHP is:
$FullName = $FirstName." ".$LastName;

You can send variables to PHP via the web address. The address is formatted such that the file name is followed by a question mark which is in turn followed by a list of variables with their assignments, separated by ampersands. Like this:

http://mith.umd.edu/coolScript.php?name=Doug&age=28

These variables are processed in the PHP with the _REQUEST command, the syntax for which is demonstrated below:

$requestedName = $_REQUEST['name'];

In the above, the PHP variable $requestedName is assigned the value of the variable name from the address. So, in the case of the example address, $requestedName would receive the value "Doug".

PHP and HTML

Although on most on new webpages today, PHP is usually called through Javascript, plain old HTML can actually send variables to PHP through the use of forms.

The FORM tag in HTML can be used to submit data to a variety of scripting languages, but it is most often used with PERL and PHP. The form tag takes at least two attributes: ACTION and METHOD. The ACTION attribute specifies the location of the server-side script (the PHP), and the METHOD gets a value of either "post" or "get." The GET method will construct an address like the one in the example above, and send it to the specified server script. The POST method encodes the form data in a message sent to script. This means a GET request can be bookmarked and used to bypass a form. A POST request cannot be, although it can be used to send non-textual data like a file and is safer if the information being sent by the form is longer than the length allowed for a web address (in some cases anything over 255 characters). In general, a POST request is probably safer.

Forms, of course, require data to submit. The four most common types of data are text fields (short text), text areas (for multi-line text), drop downs menus (identified by the SELECT and OPTION tags), and check boxes. Each of the elements in the form should be given a NAME attribute (an attribute that is distinct from the ID). Elements in the form are described using the LABEL tag which takes an attribute "for" with a value of the name of the element which the label describes. Every form should also have a SUBMIT button, which, as you might expect, submits the form to the server. Examples of each of these are demonstrated below:

<FORM METHOD="POST" ACTION="recordForm.php">
<LABEL for="FirstName">First Name: </LABEL><INPUT TYPE="TEXT" NAME="FirstName" /><BR />
<LABEL for="LastName">Last Name: </LABEL><INPUT TYPE="TEXT" NAME="LastName" /><BR />
<LABEL for="Position">Position: </LABEL>
<SELECT NAME="Position">
<OPTION VALUE="Peon">Peon</OPTION>
<OPTION VALUE="Manager">Manager</OPTION>
<OPTION VALUE="VicePresident">Vice President</OPTION>
</SELECT>
<BR />
<LABEL for="Comment">Comment: </LABEL>
<TEXTAREA NAME="Comment" ROWS="5" COLS="20"></TEXTAREA>
<br />
<INPUT TYPE="Submit" Value="Submit" />
</FORM>
Let's create a PHP script to process the form.
<?PHP $FirstName = $_REQUEST['FirstName'];
$LastName = $_REQUEST['LastName'];
$Position = $_REQUEST['Position'];
$Comment = $_REQUEST['Comment'];
if ($Position=="Peon")
{
echo "Thank you for your comment. It has been destroyed.";
}
elseif ($Position=="Manager"){
echo "Thank you for your comment. It has been considered.";
}
else {
echo "Thank you, $FirstName $LastName, for your comment. It has been forwarded to the President.";
}
?>

File Processing

Now, the real fun of PHP is the ability to read from and write to files on the server. To open (or create) a file for reading or writing, we use the "fopen" command. The command fopen takes two values: the name of the file and a single character specifying what we want to do with the file once it is open (that is, "w"rite, "a"ppend, or "r"ead).

Let's assume we want to write to the file. Perhaps, in the above example, we want to record the comment left by the employee. For this we will likely "append" to the existing comments file. We will issue the PHP command:

$commentFile = fopen("comments.txt","a");
This command opens the file "comments.txt" in the same directory as the PHP code (or creates it if it doesn't exist already), and moves the cursor to the bottom of the file.

To write to this file, we will use the "fwrite" command which takes a file variable and a content variable. For instance:

fwrite($commentFile,$Comment);
If the data to be written is coming from an HTML form, we may want to strip out any slashes that may have been used to send quotation marks and other special characters through a web address. To do this, we use a PHP command called "stripslashes"
fwrite($commentFile,stripslashes($Comment));
When we are done, we should close the file like so:
fclose($commentFile);

So, the code for recording a comment might look like this:

$commentFile = fopen("comments.txt","a");
fwrite($commentFile,"<comment>");
fwrite($commentFile,"<name>$FirstName $LastName</name>");
fwrite($commentFile,"<position>$Position</position>");
fwrite($commentFile,"<text>".stripslashes($Comment)."</text>");
fwrite($commentFile,"</comment>");
A slightly safer version of this code which accounts for locked files (but does not strip slashes) is located at http://us.php.net/manual/en/function.fwrite.php.

To read a file, you fopen the file with the "r" flag and use the $fread command which takes a file variable and the number of bytes to be read from the file. In the example below, the PHP command "filesize" is used to get the full size of file.

$commentFile = fopen("comments.txt", "r");
$comments = fread($commentFile, filesize($filename));
echo $comments;
fclose($commentFile);

Using Javascript and PHP

There will be times when you want to get information from a file based on user input. In the past, this required the page to be refreshed. Now, however, Javascript can call the PHP and get the results in the background without the flicker of a refreshing page.

We will first need a cross-browser function that will allow JavaScript to request an HTML page and store it in a variable. Every major browser except for Internet Explorer does this through a built-in function called XMLHttpRequest(). IE uses something called an ActiveXObject. The W3Schools have provided a function which combines both methods into one. It is pasted below:

w3schools cross-browser HTTP Request function
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Now, get the results of the PHP script into a variable, we use this function to send a pre-set header and the data to the PHP script.

function getResult(){
var req = GetXmlHttpObject();
req.open('POST','./processForm.php',false);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var comment = "This is a good day";
req.send("FirstName=Doug&LastName=Reside&Position=Peon&Comment="+comment);
alert(req.responseText);
}

In the above code, the w3schools function is created and stored in req. The HTTP request object is then opened with method "POST" and ACTION "./processForm.php." The third value "false", means that the request should not be processed asynchronously. That is, the program should wait until it hears back from the PHP to continue. Most programs today set this flag to true, thus creating the asynchronous javascript that is responsible for the first two letters in the acronym AJAX.

The request is then given some header information that should simply be copied for most such requests. The variable comment is created and the phrase "This is a good day" is stored in it. Finally, the PHP is sent the data which it will process and return as req.responseText. This value is then displayed in a alert box. Congratulations! You have now joined the cool kids known as AJAX programmers.

Assignment

Create a form which allows users to post comments on your poem. Add a div element to the bottom of your poem which is populated by the contents of the comments file when the page loads (the function which does this should be called using the onload attribute of the BODY tag).