Ecommerce Technology: An Overview


Outline


Buzzwords

Ecommerce technology buzzwords:

Apache, ASP, clientserver, Cookies, Certificates, ColdFusion, CGI, CSS, DHTML, Forms, Get, HTML, HTTP, Java, Javascript, JSP, NAB, Perl, Post, Tcl, TCP/IP, Spider, Search engine, SSI, SSL, VB, XML.

Exercise 1: (Solution): Which one of these is not an Ecommerce technology buzzword?


User's View

Elements of a webpage:

Exercise 2: (Solution):

  1. Find a webpage with tables;
  2. Find a webpage with a drop-down list;
  3. Find a webpage with a MIME application.

Exercise 3: (Solution): From those items NOT listed above, name

  1. an HTML element;
  2. a form (input) element;
  3. a MIME application.


Behind the scenes: HTML

What is HTML?

  • HTML = HyperText Markup Language.
  • Originates from SGML (which is more complex).
  • It's a simple text markup/formatting language.
  • Limited formatting control given to creator.
  • Most formatting choices made by displayer.
  • Simple input elements: form elements.
  • Newer versions (HTML 3.0, DHTML): HTML on steroids.
Learn more about HTML

HTML creation tools:

  • Netscape Composer:
    • A simple tool that is available in the Netscape browser itself.
    • Capable of simple formatting, adding links, adjusting fonts and colors.
    • Runs on any platform.
  • Frontpage:
    • Considered one of the best values.
    • Can handle complex formatting, multiple pages (in a project), direct downloading to website.
    • Not available on all platforms.

Exercise 4: (Solution):

  1. Create two simple HTML pages that link to each other.
  2. Create a form to read a name and password, where both the text fields are aligned in a table.


How It Works: An Internet Crash-Course

  • How stuff moves around the Internet: - in packets

  • TCP/IP:
    • IP: Internet Protocol (handles packets)
    • TCP: Transmission Control Protocol (handles connections)
  • Applications:

  • HTTP: HyperText Transfer Protocol
    1. User clicks on link in browser.
    2. Browser examines URL and gets IP address of destination (website).
    3. Browser sends HTTP request to website.
    4. Webserver is already listening at port.
    5. Webserver looks at request and extracts filename.
    6. Webserver sends entire file to browser.
    7. Browser decodes (parses) HTML and displays.
    8. Browser makes additional requests as needed (images etc).

  • Sending Form data (parameters)
    1. User fills in Form (text, buttons etc).
    2. User clicks on submit.
    3. Browser collects Form data.
    4. Browser extracts URL buried in Form (not always visible to user).
    5. Browser sends request and parameters to webserver.
    6. Webserver is listening on port.
    7. Webserver extracts Form data.
    8. Webserver fires up locally-residing program (CGI) and hands over Form data (parameters).
    9. CGI program computes output and gives it to webserver.
    10. Webserver sends output back to Browser.
    11. Browser displays output.


CGI - Common Gateway Interface

What is CGI?

  • A webserver feature that allows programs to run alongside/inside the webserver.
  • The programs can be written in any language.
  • Sometimes the languages are interpreted (Perl, Java, Tcl, VB); sometimes compiled (C, C++).
  • The webserver passes Form data to these programs, and the programs write output directly to the invoking Browser.

Exercise 5: (Solution):

  1. Examine the search query at www.yahoo.com
  2. Which of GET or POST is being used?

How does a webserver call a CGI program? Three possible ways:

  1. By forking a new process:
    • Usually for C/C++ CGI programs.
    • The webserver forks off a new (shell) process which starts execution of the C program.
    • The forking is performed for each HTTP request.
    • Forking is expensive.
    • Wasteful for CGI programs that run repeatedly.
  2. By pre-loading the program when the webserver is started:
    • For commonly-used programs, the code can be rolled into the webserver.
    • Then, the CGI program is really part of the webserver.
    • Extremely efficient since it is already loaded.
    • Can crash the webserver if badly written.
    • Changing the program requires re-starting the webserver.
  3. Dynamic one-time loading:
    • The CGI program is loaded when first called.
    • Subsequent requests simply multi-thread the already-loaded program.
    • If the program is changed, it is re-loaded without bringing the webserver down.
    • Interpreted languages make this option very safe.
    • This is the approach used by Java servlets.


Database Access

  • What is a database system>
    • Data (database).
    • Programs that handle the data (database server).
    • Programming language (SQL).
  • Typical configuration:

  • How it's used by a webserver:

    • CGI program realizes dbase needs to be accessed.
    • It asks dbase server to get data (using SQL commands).
    • Dbase server returns data.
    • CGI program formats data in HTML and writes HTML to Browser.
  • Several ways in which a CGI program can interface with a Dbase server:
    1. Using a custom method used by that particular dbase server.
    2. Using a standard access method like ODBC/JDBC.
    3. Rolling the CGI program and dbase client into a single unit.
    4. Placing the entire webserver inside the dbase server/client.
      (e.g., webserver is an Oracle OCI program).


Server Side Includes (SSI)

  • What is an SSI?
    • Code that's buried in a page (HTML) that never shows up at the Browser.
    • It gets executed at the server at the time the page is requested.
  • Languages:
    • Active Server Pages (ASP).
      • Developed by Microsoft.
      • Uses Visual Basic.
      • Supported by some webservers (such as IIS).
    • Java Server Pages (JSP).
      • Developed by SUN.
      • Uses Java.
      • Supported by JSP package (in Apache), or SUN's Java Web Server.
  • Example:
    Here is a simple ASP page:
      <html> <head> <title> Hello World </title> </head>
       <body>
    
         Hello World!  (plain HTML text).
    
         <%
            Dim str
            str = "Hello World (from Visual Basic string)"
            Response.write (str)
         %>
    
       </body>
      </html>
     

    Before this is sent out by the webserver, the code is executed, which writes "in place".

    The HTML actually received by the requesting Browser is:

      <html> <head> <title> Hello World </title> </head>
       <body>
    
         Hello World!  (plain HTML text).
         Hello World (from Visual Basic string)
       </body>
      </html>
     


Client-Side Computing

  • What is client-side computing?
    • The page contains code that executes in the Browser.
    • You can see this code on the client side (in the Browser).
  • Languages:
    Javascript, Visual Basic Script
  • How it works: (Javascript example)
    • Browser fetches page (as usual).
    • Page contains Javascript.
    • Browser brings up Javascript engine, which executes code.
  • What can you do with Javascript?
    • Bring up new windows.
    • Flip-over images.
    • Check input.
    • Compute and write to page.
  • An exception: Java applets
    • References to Java applets are buried in HTML (like references to images).
    • The browser fetches the code (which you can't see).
    • The browser runs the code and lets it write to the browser display.
  • NOTE: Javascript has nothing to do with Java.

Exercise 6: (Solution): Find a webpage with Javascript or Visual Basic.


Java Servlets

  • What are Java servlets?
    • Java's solution to CGI programs.
  • Wrong way to use Java as CGI:
    • Write stand-alone Java program.
    • Invoke it via new CGI shell process.
  • The right way:
    Use servlets and a servlet-compatible server.
  • How it works:
    • Browser makes a servlet request to webserver.
    • Webserver recognizes the URL as a servlet URL.
      (e.g., http://www.obvious.com/servlets/blah)
    • Webserver loads servlet if not already loaded.
    • Servlet executes and delivers output to webserver (HTML output).
    • Webserver delivers output to Browser.
  • What you need to write servlets:
    • Either JDK 1.1 and JSDK (Java Servlet Development Kit).
    • JDK 1.2
    • A servlet-compatible webserver.
  • Example: HelloWorld servlet
          import javax.servlet.*;
          import javax.servlet.http.*;
          import java.io.*;
    
          public class helloworld extends HttpServlet {
    
            public void doGet (HttpServletRequest req, HttpServletResponse resp)
              throws ServletException, IOException
            {
              // Set the content type of the response.
              resp.setContentType ("text/html");
    
              // Create a PrintWriter to write the response.
              java.io.PrintWriter out = new PrintWriter (resp.getOutputStream());
    
              // The first part of the response.
              out.println ("");
              out.println (" Test ");
              out.println ("");
    
              // The greeting.
              out.println ("Yo, Hello World!");
    
              // Last part.
              out.println ("");
              out.println ("");
              out.close();
    
              // Screen I/O
              System.out.println ("Inside servlet ... servlet complete");
            }
    
            public void doPost (HttpServletRequest req, HttpServletResponse resp)
              throws ServletException, IOException
            {
              doGet (req, resp); 
            }
    
          }
      
  • So, what are GET and POST?
    • When Form data is sent by the browser, it can be sent in one of two ways: (1) using the GET method and (2) using the POST method.
    • In the GET method, the form data (parameters) is appended to the URL, as in:
            http://www.yahoo.com/search?music
         
      Here, the text field contains music.
    • In the POST method, the browser simply sends the form data directly.
    • When you create an HTML form, you decide whether you want to use GET or POST.
    • When you use GET, the doGet() method of your servlet is called, otherwise the doPost() method is called.
    • The standard practice is to use POST, unless you need to use GET.
    • You need to use GET when you want a link to invoke a CGI program (servlet).


Running Your Own Webserver

Exercise 7: To run a webserver, follow one of the following sets of instructions (either Jigsaw or Jetty, as described in class):

  1. Jigsaw:
    • Install the Jigsaw webserver using these instructions with your assigned port number.
    • Run the Jigsaw webserver and test.
  2. Jetty:
    • Install the Jetty webserver using these instructions with your assigned port number.
    • Run the Jetty webserver and test.


Your First Servlet - HelloWorld

Now let's write Java - a simple servlet that writes "Hello World!" to the browser: (source)

      import javax.servlet.*;
      import javax.servlet.http.*;
      import java.io.*;

      public class HelloWorld extends HttpServlet {

        public void doGet (HttpServletRequest req, HttpServletResponse resp)
          throws ServletException, IOException
        {
          // Set the content type of the response.
          resp.setContentType ("text/html");

          // Create a PrintWriter to write the response.
          java.io.PrintWriter out = new PrintWriter (resp.getOutputStream());

          // The first part of the response.
          out.println ("");
          out.println (" Test ");
          out.println ("");

          // The greeting.
          out.println ("Yo, Hello World!");

          // Last part.
          out.println ("");
          out.println ("");
          out.close();

          // Screen I/O
          System.out.println ("Inside servlet ... servlet complete");
        }

        public void doPost (HttpServletRequest req, HttpServletResponse resp)
          throws ServletException, IOException
        {
          doGet (req, resp);
        }

      }
 

Note:

  • The servlet class libraries need to be imported, along with java.io.PrintWriter.
  • There are two methods, one for each type of request: GET or POST.
  • You can decide not to "really" implement one method and instead have it call the other.
  • There are two object parameters to each method, the "request" and the "respponse".
  • The HttpServletResponse instance has an OutputStream that is used to write directly to the requesting browser.
  • To make writing easier, we wrap a PrintWriter around the OutputStream instance:
              // Create a PrintWriter to write the response.
              java.io.PrintWriter out = new PrintWriter (resp.getOutputStream());
      
  • We set the content-type (as required by the HTTP protocol):
              // Set the content type of the response.
              resp.setContentType ("text/html");
      
  • We write HTML to the output, e.g.,
              out.println ("");
              out.println (" Test ");
      
  • Don't forget to close the output stream:
              out.close();
      
  • Optionally, for debugging, we can also write to the local screen where the webserver is running:
              System.out.println ("Inside servlet ... servlet complete");
      

Exercise 8:

  1. Compile your servlet.
  2. Test your servlet. with your assigned port number.


Extracting Parameters in a Servlet

Next, let us create an HTML Form, and have a servlet pick up the Form data entered by the user.

First, an HTML with a form:

    <html>
    <head><title>Test Post</title>
    <body>
       <form action="http://localhost:8502/servlets/Testform" method="post">
       Enter a string: <input type="text" name="param1">
       And then press "Go": <input type="submit" value="Go">
       </form>
    </body>
    </html>
  

Next, the TestForm.java servlet: (source)

       import javax.servlet.*;
       import javax.servlet.http.*;
       import java.io.*;
       import java.util.*;

       public class TestForm extends HttpServlet {

         public void doPost (HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException
         {
           // Set the content type of the response.
           resp.setContentType ("text/html");

           // Create a PrintWriter to write the response.
           java.io.PrintWriter out = new PrintWriter (resp.getOutputStream());

           // The first part of the response.
           out.println ("");
           out.println (" Test ");
           out.println ("");

           // Now get the parameters and output them back.
           out.println ("Request parameters: ");
           Enumeration e = req.getParameterNames();
           while (e.hasMoreElements()) {
             String name = (String) e.nextElement();
             String value = req.getParameter (name);
             if (value != null)
               out.println ("
  • name=[" + name + "] value=[" + value + "]"); else out.println ("
  • name=[" + name + "] did not have a value"); } // Last part. out.println (""); out.println (""); out.close(); } public void doGet (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost (req, resp); } }
  • Note:

    • We need to import java.util.Enumeration.
    • Whatever parameters were provided are all in the HttpServletRequest instance.
    • We can list these parameters by getting an Enumeration instance from the request by calling getParameterNames():
                 Enumeration e = req.getParameterNames();
        
    • The "name" of a parameter is really the string in the name attribute of the tag for the particular Form element.
    • For example, the name string is param1 below.
             Enter a string: <input type="text" name="param1">
         
    • Now, if we want to retrieve the actual string typed in by the user, we use that name in getParameter():
                   String whatTheUserTyped = req.getParameter ("param1");
        

    Exercise 9: Compile and test the above servlet.


    The mSQL Database Server

    What is mSQL?

    • mSQL is a commercial Unix-dbase package created by Hughes, Australia. It's free (including source) for all-but commercial use; there are license agreements (reasonably priced) for commercial use, i.e., including it in a product.
    • mSQL supports a subset of SQL, comes with a tiny admin tool, an SQL interpreter, a script language, and a web-like scripting language for server-side includes in webpages. They claim strong performance with small data sets and reasonable performance with large data sets.
    • mSQL and mSQL documentation can be found at: http://www.hughes.com.au
    • There is a JDBC driver for mSQL.

    Exercise 10: Install and run mSQL using these instructions.


    JDBC Access from a Servlet

    What is JDBC?

    • JDBC = Java DataBase Connectivity.
    • JDBC is really a Java class library (java.sql) that provides a standard way to access databases.
    • The idea is that, you can write code using JDBC, and not worry about the specifics of the database server.
    • Today, most database servers come with a JDBC component.

    Exercise 11: Install and test the JDBC driver for mSQL using these instructions. Next, let's write a servlet that access a database:

           import javax.servlet.*;
           import javax.servlet.http.*;
           import java.sql.*;
           import java.net.*;
           import java.io.*;
    
           public class TestJDBCServlet extends HttpServlet {
    
             public void doGet (HttpServletRequest req, HttpServletResponse resp)
                throws ServletException, IOException
             {
              // Set the content type of the response.
              resp.setContentType ("text/html");
    
              // Create a PrintWriter to write the response.
              java.io.PrintWriter out = new PrintWriter (resp.getOutputStream());
    
              // The first part of the response.
              out.println ("");
              out.println (" Test ");
              out.println ("");
    
              // The SQL query.
              String sql = "select * from emp";
              System.out.println("Executing: " + sql);
    
              // Create a driver instance.
              try {
                Class.forName("com.imaginary.sql.msql.MsqlDriver").newInstance();
    
                // Make a connection.
      	    String url = "jdbc:msql://localhost:8114/test";
    	    Connection con = DriverManager.getConnection(url, "simha", "");
       	    if (con == null) {
    	      System.out.println ("Connection unsuccessful");
    	      System.exit(0);
    	    }
    	    else {
    	      System.out.println ("Connection successful. Continuing ...");
    	    }
    
    	    // Make a statement.
     	    Statement s = con.createStatement();   
    	    if (s == null) {
    	      System.out.println ("Statement creation unsuccessful");
    	      System.exit(0);
    	    }
    	    else {
    	      System.out.println ("Statement creation successful ... continuing");
    	    }
    
    	    // Execute the SQL statement.
    	    if ( s.execute (sql) ) {
    	      ResultSet r = s.getResultSet();
    	      ResultSetMetaData meta = r.getMetaData();
    	      int cols = meta.getColumnCount();
    	      int rownum = 0;
    	      
                  // Iterate over the rows - get one row at a time.
    	      while( r.next() ) {
    		rownum++;
    		System.out.println("Row: " + rownum);
    		for(int i=0; i");
              out.println ("");
              out.close();
    
              // Screen I/O
              System.out.println ("Inside servlet ... servlet complete");
            }
    
            public void doPost (HttpServletRequest req, HttpServletResponse resp)
              throws ServletException, IOException
            {
              doGet (req, resp); 
            }
    
          }
    
      
    For more details regarding JDBC, see the module on JDBC and Native methods.

    Exercise 12: Compile and test the above servlet.


    More About Servlets

    There is a lot more to servlet programming than the above three examples. Here are some issues:

    • Database issues:
      • Connection pooling:
        • Creating a database connection takes time.
        • Rather than create one for each request, create a whole bunch at system startup, and re-use connections.
        • Some database servers limit the number of "open" connections.
      • Transactions:
        • Many databases (e.g., mSQL) don't handle transactions.
        • It's easy to handle some aspects of transactions in Java using threads.
    • Session issues:
      • User session tracking.
      • Cookies.
    • Performance issues:
      • Caching database relations.
      • Caching meta data.


    Ecommerce Architectures

    Multi-tier software architectures:

    • 3-tier architecture:
      • tier 1: webserver
      • tier 2: middleware
      • tier 3: database server
    • 2-tier architecture:
      • tier 1: webserver + middleware (servlets)
      • tier 2: database server
    • 1-tier architecture:
      • all rolled into one.


    Ecommerce Software Engineering

    The Presentation vs. Programming problem:

    • Consider this scenario:
      • Webpage Designer creates webpage in fancy tool.
      • Designer hands it over to Programmer.
      • Programmer inserts CGI (servlet) URLs.
      • Programmer write CGI code to produce some part of the page.
      • Designer re-designs the page.
      • Programmer must re-code URLs, and perhaps CGI.
      • Programmer and Designer drive each other crazy.
    • The real problem: how much of page should be program-generated vs. hand-designed?

    Program-generated approach:

    • Advantages:
      • Flexible up-to-date content, based on database.
      • Programming is independent.
      • Easy to maintain consistency with other CGI programs.
      • High functionality.
    • Disadvantages:
      • Difficult to change page appearance (must re-compile).
      • Difficult to write page appearance code, e.g.,
              out.println ("<table> <tr> <td> <b> blah blah </b> ...");
           
    Presentation-approach: just the reverse.

    One approach to software engineering:

    • Designer creates template HTML, specifying which parts can be changed by Designer, independent of programming.
    • Designer and Programmer agree on program-generated part of page.
    • Programmer and Designer list events on "submit" and agree on desired program-generated output.
    • Programmer and Designer get out of each other's hair.
    • Programmer creates event chart.
    • Programmer programs, Designer designs.
    • Programmer and Designer test results, and argue.

    Some tips:

    • Create a URL naming convention.
    • Create an event-naming convention.
    • Agree on template design to be used across all (or most) pages.


    Advanced Topics

    • XML.
    • Secure server (https).
    • Search engines.
    • Load balancing.