WEB PROGRAMMING DESKTOP INTERACTIVITY AND PROCESSING

Transcription

1 WEB PROGRAMMING The Web was originally designed to deliver static Web pages from a Web server connected somewhere on the Internet to a Web browser sitting on a user s desktop computer. Basically, all a user could do was click on a hot spot or hypertext link to retrieve a new page, read it, and then go on to the next page. The Web was not designed to support EC sites, especially B2C sites. In its original state, it was not possible to create pages that would allow consumers to easily determine what products were for sale, to select products as they moved from page to page (i.e., an electronic shopping cart), to place an order, or to verify an order. Similarly, there was no simple way to integrate a Web server with a database system containing product, pricing, and promotional data with transactional systems for processing orders and with payment systems for handling credit card purchases and settlements. Over time, these limitations have been addressed. First, forms were added to HTML. Forms provided a way to produce Web pages from which a consumer could select, order, and pay for products. Second, special programming and scripting languages (e.g., Java and JavaScript) were created. These newer languages allowed application developers to produce interactive Web pages whose functionality emulated the rich functionality of standard Windows-based applications. Finally, a standard application programming interface (API), called the common gateway interface (CGI), was introduced. Generally speaking, an API provides a way for one software program to communicate with another, whereas CGI provides a way for software developers and application programmers to integrate Web servers with various back-end programs and data sources. Because of CGI s inefficiencies, newer APIs and special database gateway programs were also introduced. As a result of these changes, the Web is now well suited for the dynamic world of EC. This appendix examines issues of end-user interactivity and dynamic data access. The first sections focus on Java and JavaScript, which are special programming languages that can be used to create Web pages with rich graphical user interfaces (GUIs). The remaining sections examine various methods CGI programming, specialized APIs, and server-side scripting for integrating a Web server with back-end programs, including relational databases. DESKTOP INTERACTIVITY AND PROCESSING Most of us are familiar with various applications running on Microsoft Windows. One of the hallmarks of a Windows application is its GUI (i.e., its look and feel) and the on-screen interactivity it provides. To regular Windows users, scrolling, clicking, double-clicking, dragging and dropping, entering data, and similar actions are almost second nature. In Windows, the desktop computer on which the application resides handles these actions. For instance, if a user of Microsoft Excel enters a formula and hits the Enter key, then the desktop computer calculates the result, which is displayed immediately in the Excel spreadsheet. Even with a APPENDIX C application programming interface (API) A standard that provides a way for one software program to communicate with another. common gateway interface (CGI) A standard that provides a way for software developers and application programmers to integrate Web servers with various back-end programs and data sources.

2 C-2 Appendix C client/server application where processing is distributed between a desktop computer and a back-end server, the desktop still handles the user s actions. Initially, the type of interactivity found in a Windows application was missing from the Web. The earliest Web pages were built solely with HTML (described in detail in Appendix B). Until forms were added to HTML, the only action supported by HTML was the clicking on a hypertext link to access a new page. Forms added data entry capabilities and a series of new elements (e.g., radio buttons, check boxes, and dropdown selection lists). However, even with these new features, the only thing a user could do was click. In the same vein, there was no way for the browser (i.e., the user s desktop) to process the user s actions. All the processing had to occur on a Web server. Although this is enough interactivity for some applications, many applications are better served by the types of interactions supported by Windows. This is where Java and scripting languages such as JavaScript come into play. Java and JavaScript provide the means to create applications that support the types of user interactions found in Windows. They also make it possible for processing to be distributed between the desktop and the server. virtual machine (VM) A run-time environment in Java that enables any computer to run a Java program; all Web browsers have built-in Java VMs. JAVA Java s roots are in work done at the beginning of the 1990s by a developer named James Gosling at Sun Microsystems. This original work focused on developing software and networks for consumer devices (such as VCRs, PDAs, toasters, and so forth). The result of this work was a programming language called Oak. Recognizing the growing importance of the Internet, the developers at Sun Microsystems turned their attention from consumer devices to making Oak a premier programming language for the Web. In 1995, Oak was renamed Java. In that same year, a number of software and hardware vendors licensed Java from Sun, including IBM, Netscape, Microsoft, and Symantec. Today, it is estimated that there are over 1 million programmers using Java to develop Web and network-based applications. Java is similar to C and can be used to produce stand-alone applications or applets. An applet is a Java program that is written for and runs in a Web browser. As a programming language, Java is well suited to Web development because of its native support for Internet communications. If Java was simply a programming language, then it would not have generated much interest outside the programming community. After all, how many of us are excited or know much about C, even though it is the development language used in most commercial software products? What makes Java interesting to industry observers is that it also has a run-time environment called a virtual machine (VM). Any computer that has a Java VM can run a Java program. All Web browsers have built-in Java VMs, although in the future users of the Microsoft browser (Internet Explorer 6.0) will have to download a Java VM to their desktops. Java differs from other programming language in one important respect. Other programming languages require developers to write and then compile their programs on the machine on which the program is to be run. Compilation refers to the process of converting the human readable form of a program into binary or machine code that can be run by a specific computer. For example, if a developer wants a program to run on a PC and a Unix computer, then the developer must

3 Appendix C C-3 write and compile the program on both machines. Even with the same type of computer (e.g., a PC), the program must be written for and compiled on each generation of the machine or the machine s operating system (e.g., Windows 98 versus Windows 2000). Of course, you can see that standard program languages are ill suited for the Web because of the large variety of computers that are attached to it. In contrast, Java is a write once, run anywhere (WORA) programming language. That is, a programmer writes a Java program and compiles it. Unlike other language compilers that turn a program into machine-specific code, the Java compiler produces an intermediate form of code (called byte code) that is not specific to a particular machine. When Java byte code is sent to a Web browser, the Java VM executes it on the fly. Where does the Java VM reside? It comes with the Web browser. Special <APPLET> tags are used to incorporate applets within an HTML page. Exhibit C.1 shows a Java-based spreadsheet and chart that might be used to analyze sales data for online beverage, food, and nonconsumable purchases. This particular page has two Java applets a grid and a chart. Both of these applets allow the end user to navigate through the data, selecting different slices of data, and to drill down into underlying detail. Although the data might be displayed in a static HTML table and image (a.jpg or.gif file), a static table or image could not provide end users with the same interactive capabilities. The code behind part of this page is shown in Exhibit C.2. The applets are defined by the <APPLET>... EXHIBIT C.1 Java Spreadsheet from Comshare Decision Source: Comshare Decision, 2002.

4 C-4 Appendix C </APPLET> tags. With each of these applets, the CODE parameter indicates the Java code to be downloaded from the Web server. The WIDTH and HEIGHT parameters of the <APPLET> tags define rectangular regions for displaying the applets on the Web page. When a Web browser accesses a page with an <APPLET> tag, it begins by rendering the page. During this process, it sees the <APPLET> tag and knows to (1) reserve a display space within the page and (2) request the Web server to send the Java applet code. Once the applet arrives, the browser s Java VM begins executing the applet code. The Java VM handles any interaction that takes place between the user and an applet. It is as if there is a separate program running within the page. One advantage of having the Java VM in control is that it can enforce security, providing a sandbox that limits the applet s access to system resources. For the most part, applets do not have access to any system resources. For instance, applets cannot read from or write to files on the end user s computer. This is why it is difficult for a hacker to write an applet that plays havoc with a user s system. However, there are drawbacks to this restriction. The fact that an applet cannot read or write to disk means that an end user cannot store interim work or the results of any analysis. This sort of functionality is crucial for those users (e.g., mobile executives) who do not have constant access to the Web server. In spite of its power, few EC applications use Java applets. Most applications still rely on Web forms and client-side scripting (see discussion later in appendix) to provide end-user interactivity. However, Java is used quite extensively for EXHIBIT C.2 Java Applet Tags for Spreadsheet in Exhibit C.1 <HTML> <HEAD> <TITLE>DecisionWeb</TITLE> </HEAD> <BODY> <P> <APPLET CODE CDGrid.class CODEBASE /sales/classes WIDTH 700 HEIGHT 250 name Grid> <PARAM name ViewName value SalesData > </APPLET> </P> <P> <APPLET CODE CDChart.class CODEBASE /sales/classes WIDTH 700 HEIGHT 250 name Chart> <PARAM name ViewName value SalesData > </APPLET> </P> </BODY> </HTML>

5 Appendix C C-5 server-side processing in the form of Java beans and Java servlets. Over the past year, Microsoft has introduced a Java competitor called C# (i.e., C sharp ). Unlike Java, C# runs only on computers with a Microsoft operating system (i.e., Windows XP, Windows 2000, etc.). JAVASCRIPT AND THE DOCUMENT OBJECT MODEL Java applets are not the only way to add interactivity to Web pages. Interactivity can also be provided through client-side scripting using a language such as JavaScript. JavaScript, often confused with Java, is not a lightweight version of Java. The two languages have different capabilities and are used for different purposes. JavaScript is used to control the objects, content, and interactions within a Web page. Unlike Java, JavaScript cannot be used to produce stand-alone applications. To program in JavaScript, you simply write the JavaScript programming statements and functions directly in the Web page, interspersed with the HTML statements. When a Web browser receives a Web page containing JavaScript, it automatically knows to execute the program. Exhibit C.3 shows how JavaScript is embedded among the HTML statements on a Web page. The page shown in Exhibit C.4 is what results when the code is executed. In Exhibit C.3, the JavaScript program is contained between the <SCRIPT>... </SCRIPT> tags. Without going into the details, when the user clicks the SUBMIT button, the function onclick is executed. The function checks to see if the value of the Name input field in this particular form is empty. JavaScript A language, distinct from Java, that is used to control the objects, content, and interactions within a Web page; unlike Java, it cannot be used to produce stand-alone applications. EXHIBIT C.3 <HTML> <HEAD> <TITLE>E-Commerce</TITLE> </HEAD> <SCRIPT LANGUAGE javascript > FUNCTION valcheck(){ if (document.forms[0].elements[0].value ){ alert( Please enter a name ); } } </SCRIPT> <BODY BGCOLOR #FFFFFF > <H2>Javascript Validation</H2> <FORM METHOD POST <P>Name: <INPUT TYPE text NAME T1 SIZE 32 > <P><INPUT TYPE button NAME B1 VALUE Submit onclick valcheck() > </FORM> </BODY> </HTML> JavaScript Validating User Input

6 C-6 Appendix C EXHIBIT C.4 Java Form with Validated Input document object model (DOM) In JavaScript, the collection of possible Web page elements, for each of which there is a well-defined set of user actions (events) that the element can recognize. If it is empty, then an alert window pops up the message, Please enter a user name. Otherwise, the form is submitted. When JavaScript was first introduced, one of its major purposes was to validate user input (just like the example in Exhibit C.4). Today, it is used extensively at EC sites to enhance the dynamic character of Web pages and to accomplish the sorts of tasks listed in Exhibit C.5 (on p. C-7). Like everything else on the Web, JavaScript has gone through a number of changes. In the past couple of years, JavaScript has been intimately tied to the set of elements that can be contained in a Web page. These elements include the text and all the other components of a page, such as HTML tables, images, buttons, forms, and so forth. The collection of possible Web page elements is called the document object model (DOM). For each of these elements in the DOM, there is a well-defined set of user actions that the element can recognize in programming vernacular, these actions are called events. Events include things such as mouse actions, keyboard entry, and changes in the state of a document (e.g., loading a document is a state). The collection of events is called an event model. Taken together, the DOM and event model determine how a scripting language such as JavaScript can be used to manipulate a Web page. Today, the combination of JavaScript and the DOM provide a rich environment for creating Web applications that closely mirror the types of interactivity provided by stand-alone Windows applications. For a good introduction to JavaScript, see Harris (2001) or Negrino and Smith (2001).

7 Appendix C C-7 EXHIBIT C.5 Functions of JavaScript Function Client-side form validation Client-side calculations Client-side lookup databases Client-side image maps Client-side interaction Personalizing a document before it is displayed Manipulating Java applets or ActiveX objects within a page Example Ensuring that there are no blank input fields, that numbers are numbers and text fields are text, that the length of a field (like a ticker) is the correct length, and that numeric input values fall within a given range As users input or select specific values, new calculations can be computed and immediately displayed on the page. Examples include mortgage calculations, currency conversions, and calculating the price of a product based on the features selected by a user. JavaScript provides associative data arrays that enable values to be looked up on the basis of keys. For instance, given a company name, an associate array could provide the stock ticker (e.g., StockTicker( Comshare ) CSRE ). Simple databases can be embedded in JavaScript, providing lookup tables that can assist end users with data input. Image maps are large graphics that are divided into areas where each area provides a different response when clicked by an end user. For instance, an image map might represent the U.S. states. When the user clicks on a particular state, a specified Web page is retrieved. In a client-side image map, each of the areas can be associated with particular JavaScript functions, making it possible to carry out a variety of client-side actions besides simply retrieving a page. The combination of JavaScript and the browser DOM provides the means to create user interfaces that mirror standard Microsoft Windows interfaces that respond to events such as drag and drop, etc. If the JavaScript code is contained in the <HEAD> of a document, the code is executed before the document is displayed. In this way personalized documents can be created based on the date, data contained in cookies, etc. JavaScript can be used along with various input objects (e.g., buttons) to control applets or ActiveX objects contained on the same page. For instance, there might be an applet displaying a graph and a series of buttons linked to script that enable a user to select the type of graph, background color, etc.

8 C-8 Appendix C A WORD ABOUT ACTIVEX AND VBSCRIPT When Java and JavaScript first appeared, Microsoft saw them as a direct threat to its control of the desktop marketplace. With these languages, software vendors could create desktop and front-office applications (word processing, spreadsheets, and the like) that could be stored on any Web server (not just Microsoft s Internet Information Server, IIS), downloaded to any Web browser (not just Microsoft s Internet Explorer), and run on any computer (not just a PC with Microsoft Windows or NT). Clearly, widespread adoption of Java and JavaScript applications could have reduced Microsoft s market share (especially on the desktop), although this has not come to pass. One of the things that Microsoft did in response to this potential threat was to introduce its own proprietary components and scripting language called ActiveX components and VBScript (Visual Basic Script), respectively. Although both are designed for the Web, they work only with Microsoft s Internet Explorer and Microsoft s Web server. Like Java applets, ActiveX components are stored on a Web server. When a user of Internet Explorer downloads a Web page referencing an ActiveX component, the browser retrieves the component and executes it. Unlike Java, ActiveX does not run in a sandbox. ActiveX components can access system resources (e.g., reading from and writing to files on the desktop). All of Microsoft s office applications Word, Excel, Access, PowerPoint, and others come with a scripting language called Visual Basic for Applications (VBA), which can be used to write everything from simple macros for automating various manual processes to full-blown custom applications built on top of one of the desktop applications. You can think of VBScript as VBA for Internet Explorer. VBScript works the same way as JavaScript and has the same capabilities. This means that VBScript programs, intertwined with the HTML on a Web page, can control the elements of the DOM and their associated events. In fact, both VBScript and JavaScript can be included on the same Web page. Of course, it requires Internet Explorer to run the page. If the page were accessed with Netscape s Navigator, the VBScript would be ignored and the JavaScript would run, even though the page would not make much sense. DELIVERING DYNAMIC CONTENT Most EC sites on the Web provide some level of personalization, interactivity, and data access. In this case, static pages that are constructed ahead of time and stored on a server just will not work. With a static page every user sees the same content. Imagine, for instance, a Web site such as Yahoo! that provides stock quotes that are updated every 15 minutes. There is no practical way for a site like this to grab the price/volume data for every stock and then generate new static pages (including tables and charts) every 15 minutes. Obviously, other external programs running on the Web server (or some other server) are used to generate dynamic Web pages on the fly in response to individual user requests. In this case, when an individual user requests an update on a particular stock (say, Microsoft, whose ticker is MSFT), the external program receives the request, grabs the new stock quote (in real time), and then generates a Web page with the updated information. How this is actually accomplished is detailed in the following sections.

9 Appendix C C-9 CGI PROGRAMMING Originally, Web pages with dynamic content were generated with the aid of a CGI program. How CGI works is diagrammed in Exhibit C.6. From a technical standpoint, CGI is a set of standard methods and routines used to write a stand-alone software program that knows how to receive requests from a Web server and return data to the server. In other words, CGI is a standard protocol used to converse with a Web server. A program that has this capability is called a CGI program. These programs can be written in a wide variety of programming languages. On Unix, the Perl programming language is often used. On Microsoft Windows, Visual Basic or C/C are frequently used. To illustrate the basics of CGI programming, consider the simple example shown in Exhibit C.7. In this example, the user can obtain the current stock price (within the last 15 minutes) for either Microsoft or Oracle by clicking on the company name. Behind each name is a URL (see the code in Exhibit C.8). In this case, the URL refers to a program rather than a static document. For instance, the URL associated with the Microsoft selection is findstockprice.exe?ticker MSFT. Based on this URL, the Web server that receives the request is Upon receipt, the server knows that it needs to invoke a CGI program called stock.exe rather than retrieve a particular Web document. When it invokes the program, it passes the program the information after the? mark. The information after the? mark is called a query string. The query string specifies various parameters and values that the CGI program will use during execution. In this case, the query string specifies the stock ticker whose current price is sought. Once the program determines the associated price, it will return the results to the Web server in the form of an HTML page. In turn, the server will return the page to the user s browser in exactly the same fashion that it would return any other page. In most real-world applications, HTML forms are used instead of URLs with query strings. The details of how this is done are well beyond the scope of this appendix. Readers who are interested in the details of CGI programming should see Hamilton (2000). query string The information that specifies various parameters and values that a CGI program will use during execution. EXHIBIT C.6 Web Browser How CGI Works Web Server Static HTML Pages HTTP Dynamic HTML Page CGI Program External Data

10 C-10 Appendix C EXHIBIT C.7 Accessing Stock Prices Through URLs EXHIBIT C.8 <HTML> <HEAD> <TITLE>E-Commerce</TITLE> </HEAD> <BODY BGCOLOR #FFFFFF > <H2>Retrieve Current Stock Price</H2> <A HREF msft>microsoft</a> <BR> <A HREF orcl>oracle</a> </BODY> </HTML> HTML Code for Accessing Stock Price

11 Appendix C C-11 ALTERNATIVE APIs Although CGI programs were widely used, they suffered from some significant technical limitations, especially at Web sites with a lot of traffic. CGI programs are either separate executable programs or interpreted scripts. When a Web server invokes a CGI program, an individual copy of the program is brought into memory. After the program has run, the executable program is unloaded from memory. If the server receives another request while the first program is still running, then it will invoke a second instance. The number of copies in memory will depend on the number of requests the server is trying to service. At a large site, the number of copies could run in the thousands. Obviously, the frequent loading and unloading of a large number of copies is very inefficient, not to mention the fact that the performance of the server will degrade substantially as the number of requests increases. Other gateway architectures and APIs have been developed to overcome the limitations of CGI programming. Two alternatives are FastCGI and Microsoft s ISAPI (Internet Server API). The difference between these APIs and CGI is that the server invokes only a single instance of the program, and a technique known as multithreading is used to handle individual requests (each request is now a thread instead of the entire program). The overall result is increased efficiency and substantially improved performance. SERVER-SIDE SCRIPTING With the exception of the Perl programming language, it takes a skilled programmer to write a Web-based application using one of the Web gateway APIs. Fortunately, simpler scripting languages can be used to accomplish many of the same tasks. These scripts are run on the server side, not the client side. Included among these specialized server-side scripting languages are Microsoft s Active Server Pages (ASP), Apache s Hypertext Preprocessor (PHP), Java Server Pages ( JSP), and ColdFusion s Markup Language (CFML). All of these languages are used widely throughout the Web. For example, in April 2002, the Netcraft monthly Web server survey (netcraft.com/survey) estimated that approximately 48 percent of the 37 million sites it surveyed were using either ASP or PHP scripting (Berkes 2002). Buser (2000) provides a good introduction to ASP scripting, and Whitehead and Desamero (2001) offers a good introduction to PHP scripting. All of these server-side scripting languages work in the same manner. Basically, a server-side script is nothing more than a Web page that contains script statements interspersed with various HTML tags. The script statements are denoted by specialized tags. Exhibit C.9 displays a very simple ASP page. The server-side script statements are denoted by the <%... %> tags. The first script statement ( request.form ) captures the username entered on a form. The second script statement ( response.write ) simply writes the user s name on the Web page. The rest of the statements in this script are nothing more than standard HTML tags. When this page is accessed, the Web server first hands it off to the appropriate server-side script processor. How does it know which processor to use? The appropriate processor is selected by the file extension of the page being accessed. For instance, an ASP page has an.asp file extension, whereas a PHP page has a

12 C-12 Appendix C EXHIBIT C.9 ASP Code <HEAD> <TITLE>E-Commerce</TITLE> </HEAD> <BODY> <% username Request.Form( username ) %> <% Response.Write username %> <P> Thank you for joining us. Would you like to see your orders? <FORM METHOD POST ACTION orders.asp > <INPUT TYPE submit VALUE Yes > </FORM> </BODY>.php extension. The selected processor then executes the script code within the page and sends the resulting page back to the browser via the Web server. When the browser receives the page, it renders the rest of the HTML code. In this way the content of the page is dynamically generated in much the same way that the special API programs generate dynamic content. The resulting page is shown in Exhibit C.10 (assuming that the user entered the name John Smith). EXHIBIT C.10 ASP Output

13 Appendix C C-13 ACCESSING RELATIONAL DATABASES Relational databases are an integral part of virtually every EC site. Most of the pages that appear on the Web are dynamically generated from database content. This is one of the major roles of server-side scripting. Scripts are written to process the input from an HTML form, to use the input to construct a relational database query behind the scenes (i.e., to produce an SQL statement that the relational database can execute), and then to dynamically produce and return an HTML page from the results of the query. For example, you may have used the FedEx or UPS Web sites to track a shipment. The status of any shipment for a given customer is contained in a database. To determine the status of a package, the customer enters the shipment number in a Web form. When the customer clicks the submit button, the shipment number is passed to a server-side script. The script takes the shipment number and constructs a relational query (e.g., SELECT shipment_no, shipment_status FROM shipments) that is passed to the shipment database. The database produces a result containing the shipment_status, which is passed back to the script. The script takes the results and generates an HTML page on the fly, which is then returned to the customer. Again, the specific techniques that are used to dynamically access the information in a relational database are beyond this discussion. Readers who are interested in this topic should refer to Buyens (2000). KEY TERMS application programming interface (API), p. C-1 common gateway interface (CGI), p. C-1 document object model (DOM), p. C-6 JavaScript, p. C-5 query string, p. C-10 virtual machine (VM), p. C-2 REFERENCES Berkes, D. Survey Says: PHP Passes Microsoft Active Server Pages. newsforge.com/newsforge/02/06/11/ shtml?tid 5 ( June 11, 2002). Buser, D., et al. Beginning Active Server Pages 3.0. Birmingham, UK: Wrox Press, Buyens, J. Web Database Development: Step By Step. Redmond, WA: Microsoft Press, Hamilton, J. CGI Programming 101. cgi101.com (2000). Harris, A. JavaScript for the Absolute Beginner. Indianapolis, IN: Premier Press, Negrino, T., and D. Smith. JavaScript for the World Wide Web, 4th Ed. Berkley, CA: Peachpit Press, Whitehead, P., and J. Desamero. PHP: Your Visual Blueprint for Creating Open Source, Server-Side Content. New York: Hungry Minds, Inc., 2001.