CS 351: Program 5

Student Learning Objectives

Demonstrate the ability to
- Use Master Pages with ASP.NET to create a consistent layout and look to a web site
- Use ASP.NET navigation controls to provide consistent site navigation
- Use a themes and skins with ASP.NET controls to add rich formatting
- Use externally linked CSS file to layout and style your site

Assignment

Add a master page, navigation controls, a theme folder, skins, and CSS to format your Program 4's multi-page web application and provide consistent site navigation.

Create a Web.sitemap as a data source for your navigation controls. Include the following seven nodes
- 1. Home Page (~/Default.aspx): Accessible to everyone. Include a couple of paragraphs of home page content. See screen snapshots below
  - 2. Login (~/Login.aspx): Accessible to everyone. Students can login to the course site from this page (or cancel). Once logged in, return them to the home page
  - 3. Register~/Register.aspx: Accessible to everyone. Students can register themselves. Using the Roles class, automatically assign them the role of student
- 4. Students - Folder only, no page URL associated with the node
  - 5. CS 351 Syllabus (~/Student/Syllabus.aspx): Accessible to students and faculty. Include a couple of paragraphs of content
- 6. Faculty - Folder only, no page URL associated with the node
  - 7. CS 351 Students (~/Faculty/StudentList.aspx): Accessible to faculty only. Provides a list of student names enrolled in the course. This time, just display the names - do not dump out the entire table.

Create a Master Page with <div>s for a header, left navigation area, a main content area, and a footer.
- Header - Include Calendar, LoginStatus, LoginView, LoginName, and SiteMapPath ASP.NET controls
  - Inside the header, create a div floated right to contain the Calendar and LoginStatus controls
  - Inside the header, create another div to contain the SiteMap - use CSS to have this div clear the calendar and Login Status controls
- Left Navigation - Include a TreeView navigation control
- Main Content - Include a Literal control to display the current node's description and a ContentPlaceHolder for page content
- Footer - include a copyright notice

Create a Theme folder to contain
- Cascading Style Sheet to layout and style your master page's divs. See screen snapshots below
- Use skins to format your Calendar, LoginStatus, Login, SiteMapPath, TreeView, CreateUserWizard, and the data control used to display the student names.

Security Settings - use the same security settings as Program 4
- Relax the registration requirements to
  - requiresQuestionAndAnswer="false"
  - requiresUniqueEmail="false"
  - minRequiredPasswordLength="2"
  - minRequiredNonalphanumericCharacters="0"
- For testing purposes
  - Add a user with the username Dr G and password abcd1234!. Assign this user the role of faculty
  - Add two users as students
    - username student1 and password student1!
    - username student2 and password student2!

To Receive Credit

This program is due at the start of the next Lab (Wednesday)
Save your files in your cs351 U:\nnProgram5 folder where nn is your student account number.
- Remember to cut and paste your ASPNETDB.mdf database file from your Desktop to your U:\Labs\nnProgram5\app_data folder
Print out your Default.aspx page as displayed in a browser
Annotate your printout to note
- Any problems that remain in your solution (to assist with grading).
- Your total completion time (rounded to the nearest half-hour)
We will check your program's code, functionality, and the three other pages online

Grading Criteria

Programs will be graded on a scale of 10 to 20:
- 20: Excellent
  - CSS layout and styling looks professional
  - ASP.NET control skins look professional
  - Navigation controls look and work correctly
  - All content pages have enough content to serve as a prototype project
    - The CS 351 student list displays the currently enrolled students - do not include faculty
- 19, 18: Very Good
  - One or two minor problems
- 17, 16: Good
  - Three or four minor problems or
  - One major problem
- 15, 14: OK
  - Multiple minor problems or
  - Two major problems
- 13, 12, 11, 10: Acceptable: Multiple major problems remain

Screen Snapshots

Use this snapshots as guidelines. You are not expected to duplicated this exact look and feel, just make sure your site looks professional.

A good gallery site to browse for color schemes for your divs is ColorSchemer