• Look at the following picture and comments to get an overall view of the design. Notice that this e-commerce app is for a fictitious software company called Br. David's Software. The products are thus programs. You can, of course, substitute your own company with a different line of products. Be sure that your proposed company can fit the simplifying assumptions shown below. Also, each product needs to have a name, a brief description, a price (which can be zero), a URL for where to download the product, and an optional URL for a small image file of the product.
• Home page
  • The home page gives a quick overview of the company and web site.
• Products page
  • The user selects a product by clicking on it in the drop-down list.
  • This brings up a results page showing the information on this product as retrieved from the database.
• Search page
  • This page is just a place-holder. We will implement the search functionality in a later example.
• Privacy page
  • The company's privacy policy is provided here. For this simple web app, there is hardly a need for this, but if we should grow this into a more complicated app that collects user data, a good privacy policy would be expected.
• Contact page
  • This provides an email address and phone number.
• We make some simplifying assumptions to keep this web app relatively easy to make. In later examples we will add some of the functionality that we omit at this point.
  • Although prices may be listed for the products, no attempt will be made to arrange for payment.
  • Users will obtain one product at a time so that no shopping cart is needed.
  • Users will simply download each desired product. No mailing address or other user information is thus needed.
  • The number of products is small, and there is no need to group them by type, department, or something similar. Also, the products have no variable attributes (such as size of a shirt, color, etc.)

• For this web app, detailed directions will not be given for features covered in previous examples. However, some links to these previous examples will be provided. New features will be covered in greater detail.
• As usual, make a new project of type Visual Basic Project and having template ASP.NET Web Application. In the location box put in a reasonable location such as one of the following:
  • https://cis3.stvincent.edu/studentc/ecommerce1
  • http://cis2.stvincent.edu/studentc/ecommerce1
• We assume from here on that the folder name is ecommerce1.
• Change the name of the web form, WebForm1.aspx, to home.aspx or whatever you prefer.
• In this form's Properties, change the title to "Home, Br. David's Software".
• Save your work so far by using File, Save All.
• As shown in this screen shot, all you put on this form are a few labels. Note that they begin several inches from the top and a couple of inches from the left edge. If you wish, you can copy the text for these labels from the following box:

• Next, let's set up the data for our e-commerce site.
• We assume that you still have a logon for SQL Server and have access to the database you used in the previous examples. In our example here the name used for the database is Summer2003.
• Start SQL Server Enterprise Manager and find your particular database within it.
• Create a new table called Prod5 (or whatever you wish).
• See how we did this in a previous web app if you need a reminder of how this was done.
• Set up the new table's fields as in this screen shot and as shown below.

• Let's do the 3 easy web pages next.
• Add a web form called search.aspx to your web project.
  • In this form's Properties, change the title to "Search, Br. David's Software".
  • Place a single label on it containing the text "Sorry! The search feature has not yet been implemented."
  • Position this label so that it will appear in the page content region as defined by the tables in our include files header.txt and footer.txt.
  • Go to HTML view for this web form and include the header.txt and footer.txt in the exact same locations we used before for the home page.
• Next, add a web form called privacy.aspx to your web project.
  • In this form's Properties, change the title to "Privacy, Br. David's Software".
  • Place 2 labels on this form. The first should contain the text "Privacy Policy" in medium, bold.
  • The other label should be placed below the first and contain the text (in small, bold) "Our policy is never to sell or give to others data that you provide."
  • Position these labels so that it will appear in the page content region.
  • Go to HTML view for this web form and include the header.txt and footer.txt in the exact same locations we used for the last 2 web forms.
• Now add a web form called contact.aspx to your web project.
  • In this form's Properties, change the title to "Contact, Br. David's Software".
  • Place 4 labels on this form in our usual page content region.
  • We want the results to look like this.
  • The first label contains the text "For further information, contact:" in large, bold.
  • The next label contains "Br. David Carlson" in medium font.
  • The third label contains "Phone: 724-805-2416" in small font.
  • The last label contains "Email: <A HREF="mailto:carlsond@stvincent.edu">carlsond@stvincent.edu</A> in small font.
  • Go to HTML view for this web form and include the header.txt and footer.txt in the exact same locations we used for the other web forms.
• In Visual Studio do File, Save All.
• Build your web app.
• Then test it in a browser to see that the pages created thus far work reasonably.

• Add a web form called products.aspx.
• Change its title to "Products, Br. David's Software".
• We want to set up this form as shown in this screen shot of the products page or in this view of the form in Visual Studio.
• The content area begins with a label showing "Select a product from the pull-down:" in large and bold.
• Below this add a drop-down list and change its ID to ProductList.
• Set the AutoPostBack property of ProductList to True so that a postback will happen when the user selects an item from the list.
• Below this place a label that says "Error in accessing database" in red and small.
• Change the ID of this label to ErrorLabel and set the Visible property to False.
• Go to HTML view for this web form and include the header.txt and footer.txt in the exact same locations we used for the other web forms.

• Add an SQLDataAdapter to the products.aspx web form.
• We will use this data adapter and its stored procedure to obtain from the database the list of products to display in the drop-down list.
• Since you have created similar stored procedures before, we do not give detailed directions here. Refer to the DataReader example if you need help.
• Set up your stored procedure so that it is named SelectProductName and so that it selects the ProductName column of the Prod5 table that we created above. Also put the data in ascending order by ProductName.
• Do NOT generate insert, delete, or update stored procedures to go along with this one.
• When finished, your stored procedure should look like the following:

• Click on the + to show the code inside of the "Web Form Designer Generated Code" region.
• Find the section of code that sets up the various protected fields.
• Add the following line so that we have a data reader available:
  Protected dReader As System.Data.SqlClient.SqlDataReader
• Adjust the Page_Load procedure so that it looks as follows:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MyBase.Load
	
    'Put user code to initialize the page here
    If Not IsPostBack Then
        Try
            ProductList.Items.Add("*** Make a choice ***")
            SqlConnection1.Open()
            dReader = SqlDataAdapter1.SelectCommand.ExecuteReader
            While (dReader.Read())
                ProductList.Items.Add(dReader.GetString(0))
            End While
        Catch exception As System.Data.SqlClient.SqlException
            ErrorLabel.Visible = True
        Catch exception As Exception
            ErrorLabel.Visible = True
        Finally
            SqlConnection1.Close()
        End Try
    Else   ' Postback case:
        Session.Add("ProductSelected", ProductList.SelectedItem.Text)
        Response.Redirect("results.aspx")
    End If
End Sub

• As you can see, the above code uses a DataReader to populate the drop-down list with the names of the products read (by our stored procedure) from the database.
• If a user clicks on a product in the drop-down list, a postback happens. In this case we use session state to keep track of the name of the product and redirect to another page, the results.aspx form.
• Save all of your files before going on.

The Results Page

Another DataAdapter and Stored Procedure

CREATE PROCEDURE studentc.SelectByName
(
    @TargetName varchar(50)
)
AS
    SET NOCOUNT ON;
SELECT ProductName, ProductDescription, ProductImageURL, ProductPrice, ProductDownloadURL
FROM dbo.Prod5 WHERE (ProductName = @TargetName)
GO

• Remember to go to SQL Server Enterprise Manager and give the SQL or IWAM account Exec access to this stored procedure. (Use whatever fits your server configuration.)
• In the Properties window for your new data adapter, expand the SelectCommand field. Replace what is in the CommandText field with yourid.SelectByName. (Of course, fill in your user ID in place of yourid.) Say Yes and Yes to the questions asked.
• In the Properties window for the data adapter, try out the Preview Data link to see if your stored procedure is working.
• In Visual Studio do File, Save All.

The results.aspx.vb Code-Behind File

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MyBase.Load
	
    'Put user code to initialize the page here
    Dim Temp As String
    Dim Price As Decimal

    ProductNameLabel.Visible = False
    ErrorLabel.Visible = False
    ProductImage.Visible = False
    DownloadHyperLink.Visible = False
    PriceLabel.Visible = False
    ProductDescriptionBox.Visible = False

    If Not IsPostBack Then
        If Session.Count = 0 Then   ' No session items were supplied.
            ErrorLabel.Visible = True
        Else
            Try
                SqlConnection1.Open()
                SqlDataAdapter1.SelectCommand.Parameters("@TargetName").Value = _
                    Session("ProductSelected")
                SqlDataAdapter1.Fill(dTable)

                If dTable.Rows.Count = 0 Then
                    ErrorLabel.Visible = True
                Else
                    ProductNameLabel.Text = dTable.Rows.Item(0).Item(0)
                    ProductNameLabel.Visible = True
                    ProductDescriptionBox.Text = dTable.Rows.Item(0).Item(1)
                    ProductDescriptionBox.Visible = True
                    Temp = dTable.Rows.Item(0).Item(2)
                    If Not Equals(Temp, "none") Then
                        ProductImage.ImageUrl = Temp
                        ProductImage.Visible = True
                    End If
                    Price = dTable.Rows.Item(0).Item(3)
                    PriceLabel.Text = "Price:  " & String.Format("{0:C}", Price)
                    PriceLabel.Visible = True
                    DownloadHyperLink.NavigateUrl = dTable.Rows.Item(0).Item(4)
                    DownloadHyperLink.Visible = True
                End If
            Catch exception As System.Data.SqlClient.SqlException
                ErrorLabel.Visible = True
            Catch exception As Exception
                ErrorLabel.Visible = True
            Finally
                SqlConnection1.Close()
            End Try
        End If
    End If
End Sub

• The main goal of this code is to use the data adapter and stored procedure just created above so as to get the data on the selected product. This data is put into a DataTable. Then, instead of displaying this data in a data grid as usual, we display it in the various labels, the text box, image, etc. on the results.aspx web form.
• This section of code starts off by making sure that various labels, the description box, the image, etc. are not visible. The code will turn the Visible property when we know that we have something we want to display in them.
• The code only tries to get data from the database if there is no postback and if something (hopefully the product name) is available in the session state.
• The product name is retrieved from the session state and plugged in as the value of the @TargetName parameter to the stored procedure.
• The results of the stored procedure's query are placed into the DataTable named dTable.
• If the number of rows in dTable is 0, then an error label is displayed.
• To see how we get at the data in dTable, let's look at ProductDescription as an example. We use dTable.Rows.Item(0).Item(1).
  • dTable.Rows.Item(0) gives the first (and, we hope, only) row that got placed into dTable.
  • Then by using dTable.Rows.Item(0).Item(1) we get column 1 of that row. Since the indexing for rows and columns begins at 0, column 1 is really the second column. The main point is to get the correct column for ProductDescription. This is determined by the order to the columns in the SELECT inside of your stored procedure.
• In a similar fashion dTable.Rows.Item(0).Item(2) looks at column 2 of row 0 in the DataTable. This should be the ProductImageURL value, since it was the third field listed in our stored procedure's SELECT.
• Notice how an IF is used to skip filling in the ImageUrl field of ProductImage when the ProductImageURL value returned by the stored procedure is the string "none". Recall that we placed this string in the database when we had no image for a given product.
• The PriceLabel is used to display the string "Price: " with the appropriate number concatenated onto it. This number is formatted using String.Format, and the {0:C} indicates that parameter 0 (the only parameter) will be formatted using currency format.
• Save all of your files again.

Testing Your Web Application