Home > Articles > Data > Oracle

Sales Tracking Application Web Site -- Buy a Car

  • Print
  • + Share This
Oracle expert Dan Hotka shares info from Chapters 9 and 10 of his new book, Oracle8i from Scratch, which covers the entire Oracle8i database from a project point of view, building a Web site using both PL/SQL and Java. This article illustrates parts of Chapter 9 that discuss the Web site built in the book, and contains parts of the PL/SQL code used to create parts of the Web site.

This article is excerpted from Oracle8i from Scratch (Que, 2000, ISBN 0789723697).

This is an excerpt from the book Oracle8i from Scratch (Que, 2000, ISBN 0789723697). The Web site described in this article is developed in PL/SQL in Chapter 10 of the book and in Java in Chapter 11. This article illustrates the Web site built in the book as well as the PL/SQL code used to create the first Web page.

As cars are prepared for sale, they will be added to the ST_CARS_FOR_SALE table shown in Figure 1. This object tracks the inventory ID, the description of the car, and the location of the picture image on disk. HTML output can only pick up images from the disk, so all you need to do is store the location of the image in the database, not necessarily the whole picture. If the picture is stored in the database, the get_lob PL/SQL built-in procedure can be used to extract it to a specific location with a specific name that can then be referenced by the HTML output. An additional Oracle form could be added to maintain the ST_CARS_FOR_SALE, and of course, you would need a report or form to display or process the BUYER information when offers were made.

Figure 1

Sales tracking "cars for sale" object.

The Sales Tracking Web site dynamically displays auto information on those vehicles that have been added to the ST_CARS_FOR_SALE table object. Figure 2 shows the 1990 Camry Deluxe auto information in the ST_CARS_FOR_SALE object. The Web site then has the ability to display information stored in this table object. Figure 3 shows the Web site (built in Chapter 10 with PL/SQL and Chapter 11 with Java). Three buttons control the navigation of this Web page: Previous, Next, and Buy This Car. The Previous and Next buttons simply display information from the previous or next row in the ST_CARS_FOR_SALE object. For example, clicking the Next button displays the Camry information (see Figure 4).

Figure 5 shows the entry boxes displayed on the Web page when the Place Offer button is selected. Figure 6 shows the offer information being displayed on the Web page after the Place Offer button is selected in Figure 5. The Browse Inventory button returns the Web user to the original screen (refer to Figure 3). Figure 7 shows the data stored in ST_CARS_FOR_SALE after the Place Offer button is selected. The information from the Web page has been written into the database.

NOTE

This is just a sample application. A real application that takes offers over the Web would collect as many as possible, storing them in yet another table object. The author is interested in showing functionality in these examples.

Figure 2

ST_CARS_FOR_SALE data.

Figure 3

Sales Tracking Web site inventory screen.

Figure 4

Sales Tracking Web site inventory screen, next row.

Figure 5

Making an offer.

Figure 6

Offer recorded.

Figure 7

Offer data recorded.

Displaying Pictures with PL/SQL and HTML

It's easy to create simple PL/SQL procedures that display common details such as banner information and default items on a Web page. This gives the Web page a consistent look and allows for PL/SQL to be coded once and reused many times.

Listing 1 shows the code to create the banner Web page information shown in Figure 8. Notice the htp.tableOpen and the htp.tableRowOpen in lines 9 and 10. Within the "table row," notice that there are two references to htp.tableData, lines 14 and 22. Each of these tableData references makes a column in the HTML table. This gives the HTML output the ability to display text and images in a very specific and consistent position. The first column gets the metro_motors.jpg image file, lines 14 through 21. The htf.img function returns the location of the picture (in this case, the Metro Motors JPG file) stored in the virtual location ows-img. The htf.img function generates an <IMG> tag that tells HTML where an image is stored in the virtual path. The second column receives the text Metro Motors Web Site, as shown in lines 22 through 25.

Listing 1. HelloWorld PL/SQL Procedure Displaying a Banner (helloworld2.sql)

1: CREATE OR REPLACE PROCEDURE helloworld
2: AS
3: BEGIN
4:     htp.htmlopen;
5:     htp.bodyOpen;
6:     -- -------------------------------------------------
7:     -- start of our heading / banner
8:     -- -------------------------------------------------
9:     htp.tableOpen;
10:    htp.tableRowOpen
11:    (
12:        cvalign => 'CENTER'
13:    );
14:    htp.tableData
15:    (
16:        cvalue      => htf.img
17:                        (
18:                        curl        => '/ows-img/metro_motors.jpg'
19:                    ,   cattributes => 'WIDTH=100'
20:                        )
21:    );
22:    htp.tableData
23:    (
24:        cvalue  => htf.big('Metro Motors Web Site')
25:    );
26:    htp.tableRowClose;
27:    htp.tableClose;
28:    -- -------------------------------------------------
29:    -- End of our heading / banner
30:    -- -------------------------------------------------
31:    htp.p('HelloWorld');
32:    htp.bodyClose;
33:    htp.htmlClose;
34: END;
35: /

Figure 8

Metro Motors Web site banner page.

NOTE

If your browser doesn't show the graphic, check your OAS virtual mappings to make sure that the JPG image file is in the directory for which the virtual directory is configured.

At this point, it's easy to create a procedure called display_banner and simply call it whenever you create a new Web page, allowing the banner information to be coded once and used throughout the Web application. If you need to change the banner information, you simply change one procedure, and the change would then be reflected automatically throughout the application on its next Web browser access. Notice that the display_banner procedure in Listing 2 is very similar to the code in Listing 1—lines 7–25 in Listing 2 are very similar to lines 9–27 in Listing 1. The only real difference is at lines 3 and 22 in Listing 2; the p_caption variable replaces the hard-coded Metro Motors banner text, so that this procedure can be used for any banner by simply putting ?p_caption=<some text> on the URL line.

Listing 2. DISPLAY_BANNER PL/SQL Procedure (display_banner.sql)

1: CREATE OR REPLACE PROCEDURE display_banner
2: (
3:     p_caption   IN VARCHAR2 DEFAULT 'Metro Motors Web Site'
4: )
5: AS
6: BEGIN
7:     htp.tableOpen;
8:     htp.tableRowOpen
9:     (
10:        cvalign => 'CENTER'
11:    );
12:    htp.tableData
13:    (
14:        cvalue      => htf.img
15:                        (
16:                        curl        => '/ows-img/metro_motors.jpg'
17:                     ,   cattributes => 'WIDTH=100'
18:                        )
19:    );
20:    htp.tableData
21:    (
22:        cvalue  => htf.big(p_caption)
23:    );
24:    htp.tableRowClose;
25:    htp.tableClose;
26: END;
27: /

Listing 3 (helloworld3) shows how to change the helloworld procedure to call the display_banner procedure:

Listing 3. HelloWorld PL/SQL Procedure Using Procedure display_banner (helloworld3.sql)

CREATE OR REPLACE PROCEDURE helloworld
AS
BEGIN
    htp.htmlopen;
    htp.bodyOpen;
    -- -------------------------------------------------
    -- start of our heading / banner
    -- -------------------------------------------------
    display_banner
    (
        p_caption => 'Metro Motors Web Site'
    );
    -- -------------------------------------------------
    -- End of our heading / banner
    -- -------------------------------------------------
    htp.p('HelloWorld');
    htp.bodyClose;
    htp.htmlClose;
END;
/

The display_banner procedure not only creates the same HTML output, but you can use it in related Web pages to give the identical visual attributes without having to add the code to each additional Web page.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.