Web Interfaces: The Benefits and Challenges Encountered in Developing Web-based Interfaces


William Rosener University of Tennessee Knoxville, Tennessee 37996-1301 E-mail: wrosener@utk.edu Phone: (423) 974-5915
Keywords: WorldWideWeb, HTML Forms, CGI, Concurrency, Security, SCOUT, Calendar
Every day more and more graphical user interfaces are being developed on the World-Wide Web using HTML Forms and the Common Gateway Interface (CGI). These Web interfaces are being used to access databases, fill out applications, and order products across the Internet. These interfaces are proving that the Web is much more than a server protocol for transferring static documents. Instead, we are seeing it being used to perform sophisticated information retrieval and run external applications.

Some examples of Web interfaces include the FedEx tracking interface (http://www.fedex.com/track_it.html) which allows packages to be tracked, Virtual Vineyards at (http://virtualvin.com) which allows specialty foods and excellent wines to be purchased using the Internet, or the Pizza Hut in Santa Cruz (http://www.pizzahut.com) which allows pizzas to be ordered using a Web interface.

Most Web-based interfaces such as these are built using HTML forms and the Common Gateway Interface (CGI). HTML forms provide a widget toolset for building graphical user interfaces. The toolset includes text entry areas, toggle buttons, selection lists, popup menus, etc. This toolset is extensive enough to develop the most sophisticated interface, yet small enough to quickly learn and provide a consistent look and feel.

The Common Gateway Interface is a set of specifications which allow an external gateway to speak the same protocol as the WWW server, HTTP. Unlike plain HTML documents which exist in a constant state and can only be statically retrieved, CGI programs allow documents to be dynamically created and displayed in real time. CGI programs allow a client to submit a request to a server, the server then receives the input and performs the desired processing, the results are then sent back and displayed by the client.

Benefits of Web Interfaces

Listed below are some of the many benefits which a Web-based interface can offer.

  1. Provide a consistent look and feel. Because all Web interfaces use the same widget toolset, they have a consistent look and feel. This consistency allows even someone who has spent only a minimum amount of time using the Internet to quickly become comfortable and familiar with a new interface. To most people, using a Web-based interface has become as simple as surfing the Web.

  2. Exploit multimedia applications. The Internet connects more than 25 million users around the world, and this number is expected to double each year in the foreseeable future. The vast majority of the browsers which people use are equipped to take full advantage of multimedia applications. With multimedia applications, information can be presented in a user-friendly, easy to understand, and visually stimulating format by combining graphics, audio, and video. Interfaces which incorporate multimedia applications can have an enormous advantage in the business and educational world since research has shown that people on the average remember less than 20 percent of what they read, but they will remember up to 80 percent of what they see and hear [HREF 5]. Hence, by using a Web-based interface the information in a multimedia applications will less likely be forgotten and can quickly be unleashed to millions of users without a large investment in time or equipment.

  3. Provide platform independence and full Internet access. With most commercial systems, such as databases, the developer is tied into using interfacing tools provided by the vendor. Most of these commercial systems also require additional networking libraries to make them fully Internet accessible and often are not always totally platform independent. Web-based interfaces, however, inheritly have full Internet access and are totally portable across all major systems. Once a Web interface is developed, it can instantly be accessed from a PC, Mac, or UNIX platform.

  4. Allow for rapid development. Web interfaces using HTML forms require very few lines of code in comparison to using a standard set of libraries such as MS-DOS/Windows or X-Windows. For example, a simple selection interface may take only 5 lines of code if developed using HTML forms. A comparable interface may take over 300 lines of code if developed using X-Windows. Besides requiring fewer lines of code, Web interfaces can be developed faster since programmers are not forced to deal with extra networking libraries. Finally, HTML forms have the advantage that they are interpreted not compiled. Most programmers find it easier to debug, modify, and maintain interpreted code.

  5. Meet tomorrow's needs. In today's constantly changing electronic office environment, it is vital that interfacing decisions made today meet the needs of tomorrow's applications. These changes are being fueled by the need to integrate electronic services, provide distance learning, and allow remote access for people wishing to telecommute to work. With the enormous research and software that is being developed for the Web, future applications, if possible, should be developed to take advantage of any new technology. By building interfaces using the Web, applications will more easily take advantage of the newest and latest innovations. Organizations which seize this technology, will thrive as the Web matures.

    Security Issues

    Depending upon the application, security issues must be addressed any time sensitive information is involved. Listed below are three security measures which can be incorporated when developing a Web interface. The first two security measures listed above can be implemented by using server-side access restrictions. For example, if using the NCSA HTTPd server, the following code segment may be added to any directory to provide domain restrictions.
    <Limit>
    allow from utk.edu
    </Limit>
    
    By using this code segment, all documents in this directory are only accessible from clients running on machines within the domain utk.edu. These documents could include a top-level HTML form. In a similar fashion, a username and password authorization can be implemented.

    A third security feature which should also be considered is called mid-entry prevention. Passwords and domain restrictions can easily be used to prevent outsiders from accessing the top-level interface of an application. However, if an interface goes multiple-levels deep, then it is also a good idea to prevent clever, yet authorized, users from deliberately jumping into the middle of the interface and supplying new values. The problem in some applications is that state information must be passed from one interface to the next. This information is sometimes passed using the "hidden" HTML forms tag. While information passed using this tag is not shown on the browser's window, this information is accessible by viewing the document source code. Hence, it is possible that a clever user could examine the document source of a script, find the parameters and variable names used, and recreate a different HTML page to pass forged values on to the next script.

    This problem can be avoided by examining the value of the CGI variable HTTP_REFERER. If the value of this variable does not match the previous link from the Web interface, then an error message should be returned. This variable was designed to help perform logging, optimize caching, and tracing obsolete or mistyped links; but it can also be used to help prevent mid-entry into a secure Web interface.

    Concurrency Issues

    One of the biggest challenges in developing interactive Web interfaces is handling concurrency control. Concurrency control is the process of controlling concurrent access to a resource to ensure that the correctness of the resource is maintained. If a web application allows users to directly update information on-line, then concurrency must be considered. If this issue is ignored, undesirable consequences might result such as information being overwritten or lost.

    Traditional non-Web based interfaces are connection oriented and solve the concurrency control problem by locking resources. The resources are locked while they are updated to avoid conflicts, and then are released when a transaction is completed or the connection is broken. Because of the connectionless nature of the WWW, locking resources on the Web is not simple. The problem with locking resources on the Web is that a user may fail to reach a state that unlocks the resource and because there is no connection to be broken, this resource could remain locked thus inconveniencing other users.

    When using the Web, concurrency control can be solved using one of two different methods.

    1. Do not allow real updates. When using this method, concurrency problems are avoided by queuing requests and then sequentially performing time-stamped inserts. The problem with this approach is that the information is not always accurate and up-to-date.

    2. Use time-out locking. When using this method, concurrency problems are avoided by assigning locks to resources for a specified time period. Although, this approach may be slightly more difficult to implement, it ensures that the information is always accurate and up-to-date.

    Considering the power and flexibility that the Internet offers, one can expect more Web-based office applications to be developed in the future. One office application which the author has helped develop is a Web-based scheduling and calendar interface. The interface is called SCOUT and can be experimented with at (http://www.admin.utk.edu/scout). This interface allows faculty, staff, and students at the University of Tennessee to store their scheduling and calendar information at a web site. By using a WWW browser, users can directly access and modify their personal appointment calendars from any computer on campus or in the world.

    To illustrate how closely a Web application can resemble a traditional MS-DOS/Windows or X-Windows applications, and to provide some insight and pointers into developing a user-friendly Web application, the SCOUT interface will briefly be examined. The SCOUT interface uses time-out locking for concurrency control and incorporates the three security measures mentioned earlier.

    The SCOUT application is composed of five different screens and uses four different CGI Perl scripts. To help the user reference the screens, a labeled image is displayed in the upper right-hand corner of each window as shown in Figure 1. Our experience has shown that these labels can be very helpful when users are reading on-line documentation, asking support questions, and navigating through the application. By clearly labeling each screen of the Web interface, the users can more quickly become fluent with navigating through the application.


    Figure 1

    For the first screen capture, the entire browser window is shown to give you an idea of how SCOUT appears on your monitor. The remaining screens displayed in this paper have been cropped to only show the contents of the browser window.

    As shown above, the first screen welcomes the user to their calendar and allows them to quickly select a month. When the current month is selected (option #1), the UNIX "date" command is invoked to find the numeric value of the current month. Given this numeric value, the UNIX "cal" command is then executed and produces an ASCII version of the current month. With a little conversion, this information is formatted into HTML and displayed as shown in Figure 2. Once displayed, the user can select to view appointments for a specified day, week, or the entire month.

    If a user wants to limit viewing access to their calendar, they can add domain restrictions and username/password authorization by placing access restrictions in the directory that contains the HTML file which corresponds to the first screen shown in Figure 1.


    Figure 2

    In this example, the user has chosen to view only the appointments for Monday, April 22, 1996. A nice feature which this interface incorporates is the ability to quickly navigate back and forth. For example, options exist to allow the users to quickly display the "previous" and "next" months. To pass selected information from one CGI script to the next, the HTML input tag type "hidden" is used. In this example, the date April 22, 1996, is passed to the next script which displays an output similar to Figure 3.


    Figure 3

    Figure 3 shows three appointments have been scheduled for Monday, April 22, 1996. In addition to displaying appointments, this screen allows the user to add, modify, and delete appointments. For example, when the "Add" button is pressed, a screen similar to the one in Figure 4 is displayed.


    Figure 4

    Figure 4 shows an additional meeting being scheduled from 3:30 to 4:00 P.M. Select tags quickly allow the user to choose a start and stop time in half hour increments. If an appointment needs to be scheduled for a time which is not on the half hour, the user can enter these times in the input boxes to the right of the pull-down menus.

    To make a modification, another username and password are entered, authentication is verified, and if approved, a message similar to the one in Figure 5 is displayed. This second username/password authorization is independent of the HTTP server, providing an additional level of security. However, because most users quickly get tired of entering their username and password every time they modify their calendar, a remote host can be specified so that changes can be made from the specified hosts without having to enter a username and password.

    The entire calendar is stored in a single ASCII file in HTML format using the tabular environment. Each entry is composed of three columns. The columns correspond to 1) start time, 2) stop time, and 3) description of the appointment. The appointments are stored chronologically by start times. For example, the contents for April 22, 1996, are stored as follows.

      <1996-04-22>
      <table CELLSPACING=1 BORDER=1 CELLPADDING=4>
      <tr>
      <td>8:30 AM</td>
      <td>9:30 AM</td>
      <td>Council on International Education (4th floor Conference Room)</td>
      </tr>
      <tr>
      <td>1:30 PM</td>
      <td>3:00 PM</td>
      <td>Staff Meeting - (5th floor Conference Room)</td>
      </tr>
      <tr>
      <td>6:00 PM</td>
      <td> - </td>
      <td>ACM Banquet - (Hermitage Room)</td>
      </tr>
      </table>
      </1996-04-22>
    

    Before performing the final step of modifying a calendar, the last CGI script also ensures that an illegal jump was not attempted. An illegal entry is performed by examining the CGI environment variable $ENV{HTTP_REFERER}. The value of this variable should match the URL of the previous CGI script.


    Figure 5

    Conclusions

    Web applications and interfaces such as SCOUT are proving that the Web is much more than a server protocol for transferring static documents. Considering the power and flexibility which the Web offers, developing Web-based interfaces for future applications might help position organizations for the rapidly changing electronic world which we live in.


    Hypertext References

        HREF 1
    Guidelines for Multimedia on the Web, Jakob Nielsen, Sun Microsystems, Inc., December 1995.   (http://www.sun.com/951201/columns/alertbox/)

        HREF 2
    Mosaic User Authentication Tutorial, NCSA HTTPd Development Team, National Center for Supercomputing Applications, University of Illinois.   (http://hoohoo.ncsa.uiuc.edu/docs/tutorials/user.html)

        HREF 3
    Mosaic Forms Database Access: A Palaeobotanic case study, David Gee and Mike Boulter, International Organization of Palaeobotany, University of East London.   (http://www.ncsa.uiuc.edu/SDG/IT94/Proceedings/GenSci/gee/pfrwww.html)

        HREF 4
    WWW-to-PAT Gateway: Exploiting an SGML-aware system through the Web, University of Michigan, June 18, 1994.   (http://sansfoy.hti.umich.edu/www-to-pat/)

        HREF 5
    RAD Technologies - Where Multimedia Gets Down to Business on the World Wide Web, RAD Technologies, Inc., Palo Alto, California.   (http://www.rad.com/rad/company/overview2.html)

    Copyright

    William Rosener ©, 1996. The author assigns to Southern Cross University and other educational and non-profit institutions a non-exclusive licence to use this document for personal use and in courses of instruction provided that the article is used in full and this copyright statement is reproduced. The authors also grants a non-exclusive licence to Southern Cross University to publish this document in full on the World Wide Web and on CD-ROM and in printed form with the conference papers, and for the document to be published on mirrors on the World Wide Web. Any other usage is prohibited without the express permission of the author.
    Pointers to Abstract and Conference Presentation
    Abstract Papers & posters in this theme All Papers & posters AusWeb96 Home Page

    AusWeb96 The Second Australian WorldWideWeb Conference "ausweb96@scu.edu.au"