Reliable Software Logo
Home > Adding Searching to your Website

Creating a Seach Form


ASP


In order to initialize a search on a web server, and then transmit the results from the web server to the client, we have to execute some code on the server machine. Normally, the server is passive--it only responds to the client's requests for HTML pages. These pages are stored on the server, transmitted through HTTP to the client, and displayed on the client's computer. Sometimes a page contains JavaScript (or VB) code, but that code is executed by the browser on the client's machine.

Enter Active Server Pages (ASP). These pages contain executable code that is run on the server. The code may be written in Visual Basic, PHP, or, in our case, JScript. Below is the top-level view of an Active Server Page we use for searching the server. Note: the page itself must have the extension .asp.

<html>
<head>
    <%@ LANGUAGE="JScript"%>
    <title>Search Reliable Software Web Site</title>
    ...Initialization Script    
</head>

<body>
   ...Query Form
   ...Query Display
</body>
</html>
The line <%@ LANGUAGE="JScript"%> tells the server to use the JScript interpreter to execute the page.
 

The Initialization Script

The initialization script in the <head> of the page is executed before the body of the page is displayed.

HTML code in an ASP page is interleaved with JScript code. JScript fragments are enclosed between special symbols, <% and %>.

Here some global variables are declared and initialized. It's important to know that global variables are initialized only once, even though, as we will see later, the page may be executed multiple times.

<%
var NewQuery = false;
var UseSavedQuery = false;
var ActiveQuery = false;
var QueryFormPath = Request.ServerVariables ("PATH_INFO");
var SearchString = "";

var NextPageNumber = -1;
var NextRecordNumber = -1;
var CurrentPage = -1;
var pgNum = -1;
var Q = null;    // Query
var RS = null;    // Record Set
var Util = null; // Utility object
%>

Variable NewQuery is true when a new query has been input. It is false when

  • there hasn't been any query yet (UseSavedQuery is false), or
  • when a query has already been executed (UseSavedQuery is true) and we are showing consecutive pages of the result.

ActiveQuery will be set true as soon as a query is executed.

QueryFormPath is the path to the current page (which contains Query Form). This path is retrieved from the predefined Request object, which contains ServerVariables, one of which is a field named "PATH_INFO".

SearchString is the string entered by the user inside the query form. Initially it's empty.

Since the same page is used for query input and the display of (consecutive pages of) results, we have the variables NextPageNumber, NextRecordNumber, CurrentPage, and pgNum--all of them initialized to an invalid value -1.

Q, RS, and Util are ActiveX objects corresponding to the query, the record set, and some utility functionality.

The query page may be executed in three different contexts.

  1. Fresh, when it is reached through a link or by typing its URL directly in the explorer.
  2. Called from a form on another page.
  3. Called from a form on the same page (we'll see the form later).
It is important to distinguish between the two latter cases. We will assume that an external form uses the GET request method, and make sure that the form on this page uses the POST request mehtod. So here's the code that deals with POST.
<%
if (Request.ServerVariables("REQUEST_METHOD") == "POST")
{
    SearchString = Request.Form ("InputString");
    
    pgNum = Request.Form ("pg");
    if (pgNum == -1)
    {
        NewQuery = (SearchString != "");
    }
    else
    {
        NextPageNumber = pgNum;
        NewQuery = false;
        UseSavedQuery = true;
    }
}
%>

First we retrieve the "REQUEST_METHOD" field from ServerVariables of the object Request. If the method is "POST" (this is just a string comparison), we get access to the Form object inside Request. The Form contains a field called "InputString", and a field called pg. These fields are not predefined, we just create them on the fly (we'll see that later).

Once we know that we were POSTed, there are still two possibilities: we are supposed to start a new query, or we are supposed to show a pageful of results from an existing, "saved," query. The pgNum variable tells us that. If its value is invalid, -1 in our case, we should start a new query. Actually, a new query makes sense only if the search string is not empty. So we set the variable NewQuery to true if SearchString != "". If pgNum is valid, we set NextPageNumber to its value. We also set NewQuery to false and UseSavedQuery to true.

If we are called from an external form, the REQUEST_METHOD will be "GET". The difference betwee the GET method and the POST method is that GET encodes the query string straight into the URL. The string is appended to the URL following a question mark. To see that, try this link http://www.relisoft.com/query.asp?InputString=ServerVariables.

Here is the case of GET in our code:

<%
if (Request.ServerVariables("REQUEST_METHOD") == "GET")
{
    if (String (Request.QueryString ("InputString")) != "null")
    {
        SearchString = Request.QueryString ("InputString");
        NewQuery = (SearchString != "");
    }
}
%>
Notice the convoluted way of testing for the existence of InputString in the URL. The Request object has the predefined QueryString sub-object that corresponds to the part of the URL after the question mark. If the query string contains a substring of the form InputString=something, that this something will be returned from Request.QueryString ("InputString")). But if no such substring exists (or there isn't even a question mark in the URL) then the return value is undefined. Unfortunately, the obvious test against undefined doesn't work, so we have to use the trick of converting the returned value to String and comparing it with "null". If you know a better way, please tell us.

Once we know that there is a non-empty search string, we set the variable NewQuery to true.

Below is a table that summarizes various combinations of variables and methods of exectution (BTW, it's a typical state machine).


Variable/Method Fresh Get Post
QueryString "" "" non-empty "" non-empty non-empty
pgNum -1 -1 -1 -1 -1 valid
NewQuery false false true false true false
UseSavedQuery false false false false false true

This concludes the description of the < head > part of the page.


The Query Form

The <body> part of the page contains the query form and the code to display the results of a previous query (in case there was one). Here's the query form:
<form action="<%= QueryFormPath %>" method="post">
  <input type="hidden" name="pg" value="-1" ID="Hidden0">
  <table>
    <tr>
      <td><input type="text" 
                 name="InputString" 
                 size="40" 
                 maxlength="50" 
                 value="<%=SearchString%>"></td>
      <td><input type="submit" name="Action" value="New Query"></td>
    </tr>
  </table>
</form>
Every form must specify the action and the method. Here the method is "post" (see discussion above about the difference between "post" and "get") and the action is the URL of a page that will process the data contained in the form. In our case the URL is the value of the variable QueryFormPath.

To insert the value of a JScript variable (or expression) inside the HTML code of an ASP page, you enclose it between <%= and %> tags. In our case, the value of QueryFormPath was initialized in the heade--to the address of the current page. When this page is accessed on our server, the value of QueryFormPath is http://www.relisoft.com/Query.asp, and the above code becomes:

<form action="http://www.relisoft.com/Query.asp" method="post">
We could have typed it in this way in the first place, but then it wouldn't work if we moved the page to another location. Note again that the same page is used for query entry and query processing.

When this form is filled, and the user presses the "submit" button, the whole page is executed again, this time with a different set of data. Since the method is "post", the data will be passed inside the Request object, in its subobject Form. You saw this in the code fragment

if (Request.ServerVariables("REQUEST_METHOD") == "POST")
{
    SearchString = Request.Form ("InputString");
    ...
}
InputString is the name of the field in our form
<input type="text" 
       name="InputString" 
       size="40" 
       maxlength="50" 
       value="<%=SearchString%>">
It's an input field of type "text"--a text input field. Its size is given in characters, and so is maxlength (maximum number of characters that can be entered). Finally, the value displayed in the input window is initialized to the value of the variable SearchString (which is initially empty).

The button alongside the input window is introduced using an input tag of the type "submit". The text displayed on the button is "New Query". Clicking the button of type "submit" causes the form to be submitted.

Note also another input field, whose type is "hidden". Such field is not displayed, but it is used for passing data inside the form. In this case, the name of the field is "pg" and the value we want to pass is -1. This value is retrieved by the following statement we've seen at the head of the page

if (Request.ServerVariables("REQUEST_METHOD") == "POST")
{
    pgNum = Request.Form ("pg");
    ...
}

Note that "pg" will only be equal to -1 if the "submit" button is pressed. As we'll see, there are other ways of getting to this page with "pg" set differently.


NextNext: Displaying the results.