Tools for Information Literacy

Server side scripting

What is the difference between server- and client-side scripting?

Server side scripts require the server to process the users' action.

They are the best tools to collect input from users.
But they require that you have access to a script stored on a server.

A script is a form of a program (like any other program you are used to using). As it implies, server side scripts are scripts on a page that depend on the server to carry out the desired action.

Server-side scripting is a method of designing websites so that the process or user request is run on the originating server. Server-side scripts provide an interface to the user and are used to limit access to proprietary data and help keep control of the script source code.

According to one discussion,

Server-side scripting is about "programming" the behavior of the server. This is called server-side scripting or server scripting. Normally, when a browser requests an HTML file, the server returns the file. However, if the file contains a server-side script, the script is executed on the server before the file is returned to the browser as plain HTML.

Common Gateway Interface

is a standardized way of sending information between a server and the script. Most web hosting services offer a library of standard Common Gateway Interface (GCI) scripts that are already on their servers. If your server has a CGI script that you can use, you only need to follow the instructions and load the necessary script to your pages. But normally these scripts are not released the the general public.

A CGI script is a program (usually written in the Perl programming language) that communicates with the server in a standardized (or CGI-like) way.

However, servers are leery of allowing just any old CGI script to be added to their capacity, so you might have to negotiate with your provider to use a CGI script that you find on the web.

Issues with CGI scripts

They are not secure and some ISPs don't allow them on their servers. Opal does not allow them. If you want more information on how CGI scripts can make you vulnerable, try What's the problem with CGI scripts?

But, understanding their limitations and challenges, CGI scripts might be just what you need to collect data from visitors to your site.

what is it? forms back end front end back end again usable scripts

back to top

Forms

Forms are an example of a server side script that collects data from your site

Your pages allow you to communicate your ideas to visitors to your site. Forms on your pages tied to scripts on your server allow visitors to communicate something to you. Forms have two components:

a structure, or shell, that the user sees and uses to fill out the form [this is visible on the web page]
a processing script that takes the user input and converts it into a format you can use [this resides on a server]

What does the CGI Script do?

Each element on your form has a name and a value associated with it.

The name identifies the data being sent.
The value is the data being sent.

Scripts use the name-value pairs to:

Separate them into individual intelligible pieces.
Do something with the data.

The discussion below is just an example of what you could do if you had access to a server that permitted CGI scripts, but OPAL does not permit them

If you want to have a way to ask questions and get responses from people who view your web site, you could create a form using mailform. The key here is that in a server-side script, you need the server to capture and do something with the user input. Thus you need to deal with the server to make your script conform to its way of doing things. You need to add the relevant script to your pages, but you also need to deal with the server to have the server do something with the input (display, store, file, send, etc.).

what is it? forms back end front end back end again usable scripts

back to top

Creating a working form has two steps:

① First, the back end

① First, create (or just know about) a script on a server that processes the output of your form.

Generally, this step is taken care of by an existing script that the WWW server administrator has placed on a server. You identify the server script you want to use in the action attribute of the form element, like this:

The <form> tag declares the existence of a form. <form method="post" action="/cgi-bin/mailform/">

There are two attributes here of which we must be aware: the method attribute and the action attribute.

The method attribute tells the form to post the data that it receives in one of two ways. We are using the "post" value here.

The action attribute specifies what program to use to process the data received in the form. In this case the action is specified as: "/cgi-bin/mailform"

Remember ...

/cgi-bin/mailform is the relative location of the script on the host server. If there is no script at the relative location, nothing can happen. And OPAL does not have a forms script that we can use

what is it? forms back end front end back end again usable scripts

back to top

② Second, the front end

② Second, write an HTML page with the form elements in it.

If you don't have one to use, we can practice with this page. This is the page that the users will see and on which they enter information. Since this page is in HTML, it is the same no matter what server script will process the input from this form. One of the considerations you will have to make is to decide how you want the user to make an input into your form. Consider your choices.

A key idea in this step is that each "piece" or element of the form has a name.

Consider the HTML tags below, which creates a series of button input types.

Note that the name attribute for each input type is set to name="[something]".
When the server-side script processes the user input, it will associate the value selected by the user with the variable "[something]".

Examples of front end forms

Checkbox Input Type

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others. Nielsen Norman Group

With the checkbox input type, we have a list of items that will appear in our form with a small checkbox in front of the text. We can "check" as many of the boxes as we like. Notice the name variable that we assign to each of these input boxes is the same. We are using the same value here because our respondents can choose one or many of these choices. By giving them all the same name variable, we can see all that they checked when we receive the data. The value attribute tells the form what to list when we receive the data. Here we want to use names that uniquely identify each item. The checked attribute tells the browser which one to initially select (i.e., when the page loads, this item will already have a check in its box).

<h4>Checkbox</h4>
<p>These are my favorite schools </p>
<input type=checkbox name="favs" value="UNC-CH" checked />UNC-CH
<br />
<input type=checkbox name="favs" value="John Tyler Community College" />John Tyler Community College
<br />
<input type=checkbox name="favs" value="Texas" />Texas
<br />
<input type=checkbox name="favs" value="Cal State-Monterey Bay" />Cal State-Monterey Bay
<br />

The above code results in the following (any or all of the boxes in this group may be selected):

Radio Buttons

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list. Nielsen Norman Group

Radio buttons are similar to the checkbox type of input. With radio buttons, however, only one item can be selected at a time. Otherwise, the attributes are the same as the checkbox example.

<p>The operating system that I prefer is:
      <br />
      <input type=radio name="Operating System" value="Unix" />Unix
      <br />
      <input type=radio name="Operating System" value="Linux" />Linux
      <br />
      <input type=radio name="Operating System" value="Windows" />Windows
      <br />
      <input type=radio name="Operating System" value="OS-X" />OS-X
      <br />
</p>

The above code results in the following (only one button in this group can be chosen)

Drop-Down Box

The <select> tag creates a drop-down box, which is similar to the "radio" type of input in that we are offered a number of items from which we can choose only one. The display of these items, however, is significantly different. The <option> tag allows us to enter list items which will appear as a single input box with a drop-down list of items from which the user can choose only one. The <option> tag with the selected attribute will appear first in the text box when the page is loaded in the browser window. Again, the name attribute will be used later when we receive our data.

<h4>select</h4>
<p>On Saturdays, I usually play:
   <select name= "sat">
      <option selected>soccer
      <option>basketball
      <option>football
      <option>ultimate frisbee
      <option>the cello
   </select>
</p>

The above code results in the following (only one button in this group can be chosen)

[how a dropdown box displays in Firefox]

what is it? forms back end front end back end again usable scripts

back to top

③ Third, back end again

③ Third, you need to finish the script with instructions about what to do with the input

In all the above examples, we have created the front-end code for our pages, but we have not yet asked the server to do the back-end processing of the information captured via these pages.

There are many, server-dependent ways to do this.

Since Opal doesn't support server side scripts, Opal has no way to receive input from them.

what is it? forms back end front end back end again usable scripts

back to top

Using other server-side scripts

You will need to use Google scripts to add a server side script to your website

Google offers some scripts that can be embedded in your code for your purposes.

If your template came with a search tool, but no search functionality, you might want to try Google's Custom Search Engine.
If you are interested in the analytics of your site, you might want to try Google Analytics.
A bit more challenging, but not impossible to do, are Google Forms. Using the online tool, you can generate some code you can copy and add to your pages. But where is the server in this server-side scripting?

Note that the scripts look like client-side JavaScripts, but they engage the Google servers and thus are actually server-side scripts.

what is it? forms back end front end back end again usable scripts