"Yes, Mrs. Smith, I realize your site isn't available. I am doing what I can to get ahold of the Server Company now. No, the power here is fine, and so are my computers. No, I cannot access your site either. It is hosted on a server in Virginia".

Have you ever fielded a call similar to this one, or have you actually been a Mrs. Smith? After all, for some the idea that a Web site that was developed by "Joe's Local Web Company" isn't on Joe's computer and Joe can't seem to access it is a little confusing. The same holds true for some scripts or scripting languages. It's not an uncommon thing to have people ask questions regarding server-side and client-side scripts, and if you don't know, there is nothing wrong with asking.

Okay, let's define them.

Server-side scripts
Scripts that are parsed and executed on the server and then passed to your browser via the Internet or an intranet.

Client-side
Scripts that are parsed and executed by the plug-ins or modules associated with your browser without the need for an Internet or intranet connection.

Still a little lost? Well, let's go ahead and take a closer look.

Overview

1. The Client-side application
2. The Server-side application
3. Using Client-side and Server-side together



The Client-side Application

Client-side applications are dependent on your browser. They use modules or plug-ins that are able to read a script and do what it says. The version of the browser can make a difference in parsing these scripts. Older browsers are not able to interpret some of the code used in newer scripts. Your choice of browser can also make a difference. Internet Explorer (IE) and Netscape Navigator (Netscape) do not always interpret code the same. This holds true for HTML as well. More information regarding compatibility for browsers and JavaScript is available at http://www.anybrowser.com/.

Let's take a look at a simple JavaScript function (remember, this code is processed on your browser):

<script language='JavaScript'>
    <!--
      function setFocus() {
      document.submessage.go.focus();
      document.submessage.message.focus();
      }
    -->
    </script>

The purpose of this function should be pretty clear, but if you have never looked at JavaScript, let's break it down for you.

Because the syntax of JavaScript is very similar to that of PHP, you should see that the name of this function is "setFocus". What's on the inside is what might be unfamiliar.

document.submessage.go.focus();
document.submessage.message.focus();

These two lines are very simply setting focus to two separate objects. The first is an object named go in a form named submessage on the referring document. The second is the same but the object name is "message".



The Server-side Application

Server-side applications are dependent on additional scripts or modules that live on the server. They interpret the data on the server and send a result back to the browser. Browser compatibility is rarely an issue because once the information is parsed by the server and sent to the browser, it is coming in HTML format, a format native to your browser.

Now this is an example of a server-side script:

<?php


    $query = mysql("chat","SELECT member,face_name FROM members WHERE member = '$member'");
    $member = mysql_result($query,0,"member");
    $face_name = mysql_result($query,0,"face_name");

    echo "<br><br>n<tr>n

    <form name='submessage' action="$PHP_SELF?$input&member=$member"
    method='post' target='return' onSubmit="setFocus();">
        <input type='hidden' name='id' value=''>
        <input type='hidden' name='face_name' value='$face_name'>

        <table cellpadding='3' cellspacing='0' width='90%' border='0'>
            <tr>
                <td>Message: <input type='text' name='message' size='50'
                onFocus="reset();"></td>
                <td align='center'><input type='submit' name='go'
                value="Submit"></td>
            </tr>
    </form>

    <form action="$PHP_SELF?$delete&member=$member" method='post'>
            <tr>
                <td align='center'><input type='submit' name='clear'
                value="Clear Screen"></td>
            </tr>
    </form>n</tr>n
        </table>
    ";


?>

Nothing too special about that, however if you look in the "Form" tag, the last thing you see is this:

onSubmit="setFocus();"

This is simply telling the form that once it is submitted, it needs to call our (client-side) function setFocus(). Take a look at the form and you will see that the object named go is the Submit button and the object named message is a text box. Now look a little closer at the end of the message object and you will see:

onFocus="reset();"

Aha!, now it's starting to come together. Let's take a look at the whole thing together:



Using Client-side and Server-side Together

( excerpt from chat.php )

<?php

    echo "
        <script language='JavaScript'><!--
            function setFocus() {
                document.submessage.go.focus();
                document.submessage.message.focus();
            }
        --></script>
        ";

    $query = mysql("chat","SELECT member,face_name FROM members WHERE member = '$member'");
    $member = mysql_result($query,0,"member");
    $face_name = mysql_result($query,0,"face_name");

    echo "<br><br>
    <table cellpadding=3 cellspacing=0 width=90% border=0>
        <tr>
            <form name=submessage action="$PHP_SELF?$input&member=$member"
            method=post target=return onSubmit="setFocus();">
            <input type=hidden name=id value=''>
            <input type=hidden name=face_name value='$face_name'>
            <td>Message: <input type=text name=message size=50
            onFocus="reset();"></td>
            <td align=center><input type=submit name=go value="Submit"></td>
            </form>
            <form action="$PHP_SELF?$delete&member=$member" method=post>
            <td align=center><input type=submit name=clear 
            value="Clear Screen"></td>
            </form>
        </tr>
    </table>
";


?>

Okay, we know that we have a client-side function (in JavaScript) that is working together with a server-side application (in PHP) so, what the heck does it do? This is an excerpt from a chat room that I wrote (well, I'm still writing). This portion of the code is where the user enters information into the text box and clicks "Submit".

When a user clicks "Submit", the JavaScript is executed (in the browser) and first sets focus to the button itself. Hmm, that seems a little redundant; I will explain that in a minute.

The next thing that happens in our function is that it sets focus to the message box. Once focus is set to the message box, the box is automatically reset (the contents are cleared). Now, that makes sense. If you click "Submit", the contents of the message box is sent to the server, then the text box is cleared and your cursor is there again ready for you to type your next message.

So, why should the code set focus to the "Submit" button if you set it yourself by clicking it? How many times have you submitted a form, especially in a chat room, by pressing the "Enter" key? Well, that is what setting the focus does for our button--it sets focus to the button as if you had clicked on it, which in turn sets focus to the "message" object.

Now, while all of that is going on, the server is receiving the information submitted by the form when you clicked "Submit", processing it and sending it to the browser in HTML format ready for you to read.

Okay, that might seem a little complicated but the main point is for you to understand what parts of this code snippet are processed by the browser (client-side) and which are processed by the server (server-side).

Happy coding,
Mark Cloyd