How to Build Your Own Online Store

Today, almost everyone has the online shopping experience. However, are you curious about how the web sites for online stores work? Do you want to learn the technologies behind the web pages?

If your answer is yes, the course CIS 252 Java Web Applications is for you. Of course you have to know how to do basic Java Programming, as taught in CIS 226.

Let's try Jerry's Online Bookstore (if the link doesn't work, the server is under construction or maintenance, please try it later). This is the sample web application you will learn to build for the course. It demonstrates most of the technologies used by today's online stores.

Here is the first page once you enter Jerry's Online Bookstore:

• Here you can browse all the books in the bookstore. Although this is a sample web application, its architecture is the same as commercial online stores, called Multi-tier Architecture. If you want, it can be easily switched to any database containing the real catalog. We use the JDBC (Java Database Connectivity) driver to connect to database.
• This page contains a table, a text field, and two buttons. However, we do NOT program in HTML. Instead, we design the page by JSF (Java Server Face). You drag-and-drop the GUI components into the page, and set properties to change their appearance. The JSF framework generates JSP (Java Server Page) which are then translated into Java classes called Servlet.
• To search the books you want to buy, type any words in the text field. While you are typing, a list of suggested words appear and change quickly. This is achieved by the Ajax (Asynchronous JavaScript and XML) technology.
• Click the Search button to get the matching books. Select the books you want to buy, and click the Buy button.

Now you see your shopping cart:

• It shows the books currently in your shopping cart. You may change the quantity, or continue shopping to add more books.
• To remember what books are in your shopping cart, the web sites used to keep the information on your web browser called cookies. However, we are using the newer technology called Session Tracking. The shopping cart information is kept on the server, in a Java class called Session Bean.
• After you finish shopping, click the Check Out button.

Now you see the Check Out page:

• You verify the total amount, enter any name, address, and card number (do NOT enter your real credit card number). Click the Make Payment button.
• Although this is a sample application, it follows the business model of e-commerce. The online stores and the payment services are typically owned by different companies. They communicate to each other through Web Services, using the protocols called SOAP (Simple Object Access Protocol) or REST (Representational State Transfer).
• In this example, the Online Bookstore communicates to the Payment Service behind the scene. The Payment Service will check the account number (for simplicity, any number divisible by 3 is accepted) and the amount (must be between $1 and $1000). This is the Serve Side Data Validation.
• If you do not enter name and address, or enter a card number too short or too long (must be 4 to 16 digits), you will get error message by the Client Side Data Validation.
• Suppose your payment is denied because the amount is over the credit line, click the hyperlink to go back to shopping cart. This is implemented during the design time using Page Navigation.

• The client and server machines are connected through the network by Stream Sockets using the protocol TCP (Transmission Control Protocol).
• To serve many clients at the same time, the server must be implemented with Multithreading.

If you want to build your own online stores using the technologies briefed above, welcome to CIS 252!