Retrieving data from a database

Step 1:
Create an ASP template page that looks like the following. It’s OK to use Dreamweaver. Make sure that it’s an asp file. Save it as listproducts.asp.

Cameras
[Image] [Brand] - [Title] Description [Description] [Regular price/Sales Price]
1

[ … ] is a placeholder to be replaced with the corresponding data from the database in Step 3.

1

Step2:
Create an Access database. Create a table named “Products” and fill it will the following data in Table 1. You may like to create a form in Access to aid data entry.
Field name Data type Index ProductID Brand (Auto) PK Kodak EasyShare CX6230 The CX6230 features 2.0MP for great-looking prints up to 8"x10", and 3X optical zoom for getting close. Great Picture Quality • 2.0 MP for great-looking prints up to 8" x 10" (20 x 25cm) • KODAK RETINAR Aspheric All-Glass Lens with autofocus • 3X optical zoom • Eight scene and color modes The CX7300 is part of the KODAK EASYSHARE System, so sharing your pictures is one-button simple. Just press Share. Incredible Ease of Use • Snap it vertically and see it vertically with auto picture rotation • Ready to capture at any time, in any setting • Compatible with KODAK EASYSHARE 6000 Series Docks EasyShare CX6230.gif 269.00 249.00 Title Description Memo Image Text(50) Regular Price Currency Sales Price Currency

Text(50) Text(50)

Kodak

EasyShare CX7300

EasyShare CX7300.gif

194.00

2

Step 3
Open up listproducts.asp in code mode in Dreamweaver. Type in the following asp code highlighted in green: <%Option Explicit%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>ABC Computer store - Cameras</title> <style type="text/css"> <!-.style1 {color:#990000;} --> </style> </head> <body bgcolor="#FFFFFF" lang="EN-AU" xml:lang="EN-AU"> <% ' Open a connection to the database ' Create a connection object Dim oCon Set oCon = CreateObject("ADODB.Connection") ' Select driver to use and location of database oCon.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.Mappath("ABCComputers.mdb") & ";" ' Create a recordset object ' Stores query in memory Dim oRst Set oRst = CreateObject("ADODB.Recordset") oRst.Open "Products", oCon ' oRst.Open "SELECT * FROM Products", oCon ' Using SQL statement %> <table border="1" cellpadding="5" width="90%"> <tr> <th colspan="2"><h1>Cameras </h1></th> </tr> <% ' Visit each row of the recordset Do While not oRst.EOF ' Declare variables to store field data Dim lId, sBrand, sTitle, sDescription, sImage, cRegularPrice, cSalesPrice ' Store field data in variables lID = oRst.Fields("ID").Value 3

sBrand = oRst.Fields("Brand").Value sTitle = oRst.Fields("Title").Value sDescription = oRst.Fields("Description").Value sImage = oRst.Fields("Image").Value cRegularPrice = oRst.Fields("RegularPrice").Value cSalesPrice = oRst.Fields("SalesPrice").Value %> <tr> <td><img src="<%=sImage%>" alt=""/></td> <td align="left" valign="top"> <b><span class="style1"><%=sBrand%></span> - <span class="style1"><%=sTitle%></span></b><br /> <br /> <b>Description</b><br /> <%=Replace(sDescription, vbCrLf, "<br/>")%><br /> <br /> <b><%=FormatCurrency(cRegularPrice, 2)%></b><br /> <br /> <form name="form1" method="post" action=""> <select name="Qty"> <option value="1" selected="selected">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <img src="addtocart.gif" width="30" height="30" alt="Add to shopping cart"/> </form></td> </tr> <% ' Make sure we move to the next record oRst.MoveNext Loop %> </table> <% 'Close and release recordset object oRst.Close Set oRst = Nothing ' Close and release connection object oCon.Close Set oCon = Nothing %> </body> </html>

4

Step 4:
The following should be displayed when viewed in the browser

Cameras
Kodak - EasyShare CX6230 Description The CX6230 features 2.0MP for great-looking prints up to 8"x10", and 3X optical zoom for getting close. Great Picture Quality • 2.0 MP for great-looking prints up to 8" x 10" (20 x 25cm) • KODAK RETINAR Aspheric All-Glass Lens with auto-focus • 3X optical zoom • Eight scene and color modes $269.00

1

Kodak - EasyShare CX7300 Description The CX7300 is part of the KODAK EASYSHARE System, so sharing your pictures is onebutton simple. Just press Share. Incredible Ease of Use • Snap it vertically and see it vertically with auto picture rotation • Ready to capture at any time, in any setting • Compatible with KODAK EASYSHARE 6000 Series Docks

5

$194.00

1

6