This lab relates to the following Skill Outcome:
- Students will design and develop Web-based database applications
- Students will implement multi-tier application design
This lab covers the material in Module 5 and Module 6. The purpose of this lab is to demonstrate the creation of a web application with database functionality.
1. Complete the programming problem provided in the attached document entitled, 3343 Lab 05 Problem Statement.
2. Include the appropriate identification information per the course syllabus using comment statements at the top of your project code:
- Name
- 9-Digit ID
- Due Date
- Date Submitted
- Brief Description of Program
3. Name your project using the naming convention provided in the course syllabus: CourseNumber_LastNameFirstInitial_LabXX (e.g., 3343_OsburnC_Lab05)
4. You will need to compress/zip the project folder using an appropriate zip/compression utility such as the one found in the Windows or 7-Zip, etc. Please DO NOT submit .rar (archive) files.
5. Submit under the 3343 Lab 05 link under Module 5.
Create an empty ASP.NET Web Application (.NET Framework) that connects to the
northwnd.mdf database, located under the Database Files and Schemas module on the Modules
page, which consist of the following Web forms as described below:
1. Default Web form
Create the default web form which should include a header entitled, Northwind System, apply a
header tag of your choice to format the static text. Change the Title Property of the DOCUMENT to
Northwind System. Include two (2) Hyperlink controls to navigate to the two web forms
described below. Also, include a LinkButton which navigates to a Google search of the term “Food
Products” by creating a click event handler and using the Response.Redirect method
(http://www.google.com/search?q=food+products). The overall design of the web form is up to you,
but must include the requirements as described above.
2. Products by Suppliers Grid Web form
Create a web form that includes a header entitled, Products by Suppliers, apply a header tag of
your choice to format the static text. Also, change the Title property of the DOCUMENT to
Products by Suppliers. The web form should display the company name, contact title, phone,
product name, quantity per unit, and unit price fields by using the Suppliers and Products
tables in a GridView control. Permit the user to display the information, but not perform any
modifications to the data. Sort the records (rows) by product name. Display the unit price column
in currency format encoded as {0:c}. For each column except the unit price, left justify the heading
by setting the HeaderStyle.HorizontalAlign property to Left. Put a blue border around the
grid, 1 pixel wide. Use the grid’s HeaderStyle property to give the headings white text on a dark
blue background. Column headings should be made more professional by placing a space between
words by changing the HeaderText property (hint: open the Grid’s smart tag and select Edit
Columns). The web form should also include a Hyperlink control to navigate the user back to the
default web form. Enable Paging and Sorting. Display 5 records per page (hint: see PageSize
property of the GridView control)
Note on using Related Tables in a SqlDataSource:
One of the differences between a Windows Database Application and Web Database Application
is that in a Web Database Application a schema definition file (e.g., .xsd extension) is NOT created.
When configuring the data source in a SqlDataSource control using the wizard when you
“Configure the Select Statement”, you will need to select the radio button entitled, Specify a
custom SQL statement or stored procedure. The Query Builder can then be used to add tables and
select the appropriate fields. When the tables are added, any relation that was established in the
database design will be displayed between the tables.
3. Suppliers Details Web form
Create a web form that includes a header entitled, Suppliers Details, apply a header tag of your
choice to format the static text. Also change the Title property of the DOCUMENT to Suppliers
Details. The web form should display ALL the fields from the Suppliers table in a DetailsView
control. Apply a format of your choice to the DetailsView control. The user should be able to page
back and forth between records. Permit the user to add, remove, and update records. Also, display
the same data in a GridView control just below the DetailsView control. Column headings should be
made more professional by placing a space between words by changing the HeaderText property
(hint: open the Grid’s smart tag and select Edit Columns). The GridView control is for display
purposes only but should use the same DataSource as the DetailsView control. Apply a format of
your choice to the GridView control. The GridView control is for display purposes only. The web
form should also include a Hyperlink control to navigate the user back to the default web form.
0 comments