CIS 3309 Spring 2012 Book, CD and DVD Sales: ASP.NET 12/13/2013

CIS 3309 – Spring 2012 Book, CD and DVD Sales: ASP.NET 12/13/2013

CIS 3309 ASP.NET Project (Final Project Part 3)

Fall 2012

Written by Joe Jupin Version 9 March 30, 2011

Revised by Jessica Clark: April 19, 2012 by FLF: Nov 26, 2012

Introduction

This project involves the construction of a Web-based transaction processing system implemented with a Web application.

Active Server Pages (ASP) is a server-side script-engine technology that combines a Hypertext Markup Language (HTML) Web interface with an interactive executable coding language, producing dynamic Web pages used to build Web applications. The server compiles the presentable Web form (in pure HTML code) and returns the Web pages to the user’s Web browser.

The purpose of this project is to introduce you to ASP.NET, the ASP programming interface in Visual Studio using Visual Basic .NET as the executable coding language. To make the most of the material that follows, you are urged to first read Chapters 1 and 2 of the Murach text Murach's ASP.NET 4.0 Web Programming

with VB 2010. The link to these Chapters is:

http://www.murach.com/books/a4vb/chapters.htm.

This document assumes that you have read this material. A Web server must have Microsoft’s Internet Information Services (IIS) or Windows Server 2000 or later installed and running to make use of ASP. A simple explanation of how ASP and IIS (or Windows Server) works from the perspective of a user is given below. Note that this material is covered in more detail in the Murach ASP.NET text and the Lecture Notes for CIS 3309,Appendix G, Parts A and B.

·  The user enters a URL (Universal Resource Locator) string in the URL bar of the browser or clicks a hyperlink on a Web page to navigate to an ASP page

·  The application server (IIS in this case) accepts a request from the user’s browser by accessing the ASP code in the Web form specified in the URL

·  The server processes the request by interpreting the ASP code and compiling the VB .NET code behind (in our case) for compilation and execution.

·  The server also compiles the presentable Web code producing an HTML page that can be rendered and processed by a browser.

·  Returns these dynamic Web pages to the user’s Web browser

Exercise 1: Do not go any further in this document until you have read Chapters 1 and 2 in the Murach ASP.NET 4.0 book.

The user can then use the Web form’s controls (textboxes, buttons, etc.) to pass data and requests back to the server. This can further modify the appearance and functionality of the current form or send data and instructions to control the generation of new forms.

The transaction processing system you will build will extend the Book, CD and DVD Shop project Parts 1 and 2 by creating a Web site that retrieves data from the product table in a database, presents some information about the product, and saves selected products to a shopping cart. Figure 1 shows the design flow chart for the Web site in terms of the web pages (forms) involved in the system.

Figure 1: Web site design

*Note: In this project, the Default page IS the Login page.

Create an ASP.Net Project

To build the transaction processing system, we will have to build a new kind of project in Visual Studio, an ASP.NET Web Site project. To do this, you follow the steps listed below. ASP.NET will create a default application and we will modify it and add new pages to process data and present information to the user about the shop’s Book, CD and DVD products.

We begin by opening Visual Studio and then following along with the steps outlined next.

1.  In the File menu, click on New Project.

2.  When the web application window pops up, select VB (or C Sharp) as the coding language then select ASP.NET Web Site (CLICK JUST ONCE).

3.  Now find the application Name and Solution Name (at the bottom of the window) and change the name from WebApplication1 to “BookCdDvdWeb.”

Don’t change the path -- just the ending filename. (DO NOT FORGET TO

RENAME YOUR PROJECT, PLEASE.)

4.  Now you can close the New Project window -- Click OK. You will next see the Default.aspx window shown below.

Add Folders and Existing Items

Some of the work you need has already been completed. Follow the steps below to add necessary folders and existing items to the project.

As you work your way through this document, be sure to save your work after completing each stage or even more often if need be.

ASP.NET has special purpose folders. When the project was created, the “App_Data” folder was automatically created. This is a special folder for data files. If you drag and drop an Access database file on this folder’s icon, the file will be copied to the “App_Data” folder and the database will automatically be included in the project. If you drag and drop a .vb file on its icon, the VB code will automatically be included in the project and the files will be copied to the “App_Code” folder.

1.  Add an ASP.Net folder: “App_Code”

a.  Right click on the root folder (the bolded appl cation name) and select Add --> Add ASP.NET Folder --> “App_Code”

2.  Create a new folder called “Images”

3.  Drag and drop all your images onto the Images directory icon.

4.  Copy the databases included in the file to the “App_Data” folder (Drag and drop the DB file onto the App_Data icon)

5.  Copy the class files in zip file “App_Code” folder to the “App_Code” folder in your solution (Again, drag and drop)

Create New aspx Pages

We now use the Add New Item Wizard This Wizard is very much like the other Add New wizards we used in VB, except that the templates are limited to those that work in ASP.NET.

1.  Add a new web form called “Order.aspx”

a.  Right click again, on the bolded project name and select Add

b.  Select “Add New Item”. In the “Add window …”

i.  Select “Web Form” from “Templates”

ii. Rename the form to “Order.aspx”

iii.  Language should be VB (or C#)

iv.  “Place code in separate file” should be checked

v.  Click “Add”

2.  Add a new web form called “Search.aspx” (as above)

3.  Add a new web form called “CustomerRegistration.aspx”

4.  Add a new web form called “Login.aspx”

5.  Add a new web form called “Cart.aspx”

6.  Add a new web form called “Checkout.aspx”

7.  Add a new class called “DBConnect”

Note that these web forms correspond to the forms shown in Figure 1.

Introduction to Web Pages – Setting the Start Page and Code and Design Views

Figure 2 illustrates a view of the Search web page for this project. (In the next section we will see how to create this page, but we show it here to illustrate and briefly discuss the sub windows that appear.) Double click on the Search.aspx bar in the Solution Explorer to see the Search form itself (currently just a skeleton blank form in your project). Note that there are two views of the form – the design View (currently blank) and the Source View which shows the skeleton aspx file created automatically when you create a web form. More on this in a minute.

Figure 2: The Search.aspx form in design view

ASP.NET’s Web form controls are similar to those used in VB. The Toolbox contains many of the same controls that are included in the VB (or C#) Toolbox shown on the left in Figure 1. The Solution Explorer and Properties window are also very similar to VB (or C#) and should also be located in the typical configuration and position.

Figure 2 shows the Solution Explorer on the right side of the IDE with the Properties box in one of the tabs under it. The default and other event handlers are added in the same manner as was done in your earlier projects. If you double click a button, ASP.NET creates an On-click event handler for the button. The text property for the label, textbox or button sets the text that is displayed on these controls. You can add HTML text by clicking on the form. The typed text will appear at the cursor. You can format this text in the same way as in Word and FrontPage. Notice that there are text formatting tools on the menu bar. You will want to experiment with these tools

The image in Figure 3 shows the ASP code for the Search Web form in Source view. You can see the ASP source code by clicking the Source button on the lower left side of the IDE. You can tweak the Search Web form by editing this code (BUT JUST BE VERY CAREFUL IF YOU DO). This code is very similar to regular HTML except for the ASP tags interspersed in the code text. Note carefully the relationship between the design view of the form in Figure 2 and the source code view in Figure 3.

Figure 3: ASP Source (HTML) code for the Search.aspx Page

Exercise 2: Summarize the purpose of HTML code that appears between the <body</body> tags. Summarize the purpose of the code that appears between the <div</div> tags.

Executing ASP Code

There are two ways to execute code in ASP: server-side or client-side. The server-side code is written in a programming language, such as C# or VB, and the client-side code is usually JavaScript. If you look at the controls on the source view in Figure 3, you see a term: runat = “server ”. It is easy to understand what this means for any of these controls. The server-side code can be embedded in the body of the ASP page by using special markers: <% and %> with methods and variables in a <script runat=”server”> (Code goes between these script tags) </script>. This is usually done when the ASP page is hand-coded in a text editor.

The preferred ASP.NET way to specify server code is to have the code in a separate file. For example, the VB code corresponding to Search.aspx is in the “Search.aspx.vb” code-behind file.

Adding Controls and Text to Web Pages

We are now ready to begin to add controls, text, color, etc to a blank web page. The goal is to achieve the Default web page shown in Figure 5. Make sure you are viewing the Default.aspx page in Design View.

Note that by default, all entries you make on a web form are made in flow layout. In flow layout, everything you enter on a web form is entered left to right, top to bottom. In so doing, the position of the controls and text can change depending on the size of the browser window and the resolution of the display. Flow layout is similar to what you are used to in working on a word processing document of creating a static web form using HTML. You can learn a bit more about flow layout by visiting the section on “How to use flow layout” of the ASP.NET 4.0 text book.

Exercise 3: Reread the material in the Murach ASP.NET 4.0 text on Flow Layout editing (See pages 42-50). Also read Pages 60-62 on how to use validators and a little on how they work.

Validators are ASP.NET objects that perform client-side validation. That is to say, they "write" javascript functions for you. So when you place the Required Field Validator on the form and set the Control to Validate property, a javascript function is written to validate that control. This will execute before any trips to the server are made, and prevent server trips until the control input is valid. For some, it is just as easy to write the javascript instead.

Figure 5: Customer Registration Page

1.  Place controls on the Customer Registration form as shown in Figure 6.

a.  The top line and the second line are HTML text.

b.  There is 1 label called lblUsername. This will be used to display the username entered on the previous page.

c.  There are 7 labels and 7 textboxes controls: (lblFirstName txtFirstName), (lblLastName txtLastName), (lblAddress txtAddress), (lblCity txtCity), (lblState txtState), (lblZipCode txtZipCode) and (lblPhone txtPhone).

d.  The navy blue text is HTML text.

e.  There are 7 RequiredFieldValidator controls- one next to each textbox. These are found in the Validation dropdown of the Toolbox. For each one, set the Error Message property to “*Required”, and the ControlToValidate property to the name of the textbox that is next to it.

f.  Place 2 buttons (btnSubmit and btnExit) on the form.

2.  Set appropriate page title in the HTML head section.

Exercise 4: Summarize what happens when a button is clicked on a web page.

The Login page is in Figure 6.

Figure 6: Login Page

1.  Place controls on the Login form as shown in Figure 6.

a.  The top line, the second line and the navy blue text are HTML text.

b.  There is 1 label with empty text property. (lblMessage). This will be used to show error messages if necessary.

c.  There are 2 labels and 2 textboxes in the group of controls: (lblUserID, txtUserID) and (lblPassword, txtPassword).

d.  Place a RadioButtonList (radio) on the form. Click on the smart tag, and select Edit Items. Add 2 new Items: (text=Returning Customer, value=exist), (text=New Customer, value=new).

e.  Place 2 buttons (btnSubmit and btnExit) on the form.

2.  Set appropriate page title in the HTML head section.

The Search page is in Figure 8.

Figure 8: The Search.aspx page

1.  Place controls on the Search form as shown in Figure 8.

a.  The top line is HTML text which you can enter and arrange by clicking on the form and typing.