Home > 2011 Winter BTI420 > BTI420 Lab 2

BTI420 Lab 2

January 24, 2011 Leave a comment Go to comments

Lab 2 helps you apply the concepts from weeks 2 and 3, including Master Pages, User Controls, web site organization, input validation, and state persistence. It is due on Friday February 4.

.

BTI420 Lab 2 – due Fri Feb 4

Assigned: During Week 3

Due date: Friday, February 4, 2011, at 11:40am ET

Grade value: 3% of your final course grade

Grading method: The following will be checked:

  • Your “labs/lab2.aspx” page, and pages that it links to
  • Correct interactive operation of the page and component logic
  • Adherence to ASP.NET coding best practices

.

Objective(s)

Create an organized web site to support development and user navigation

Use a Master Page, and CSS for layout

Create User Controls that hold portable content

Validate input data using validation controls

Use session state to persist data

Create and use a data model class for “comment” data

Learn to send email from an ASP.NET Web Form

.

Introduction to the problem that you will solve

Super Bowl XLV will be played on February 6, 2011. You will create a three-page web site with content about the game.

The home page, “lab2.aspx”, will show typical home page content.

The team page, “lab2team.aspx”, will show content about your favourite team (either the Pittsburgh Steelers, or the Green Bay Packers).

The information page, “lab2info.aspx”, will show content about the Super Bowl game itself, such as game day events, history, and so on.

.

Specifications

It is important that your web site resources are well-organized. Follow the guidelines from our January 21 class/session:

  • The three aspx pages will be located in your “labs” folder
  • The master page will be located in the “ui/mp” folder
  • The user control will be located in the “ui/uc” folder
  • Other resources will be located in the folder cited in the guidelines

.

You do not have to attempt to design a professional-quality web site. You must spend the time learning and presenting ASP.NET Web Forms concepts and techniques. For Lab 2, there are no marks allocated for design-related outcomes. However, make sure the web site’s appearance is appropriate for a second-year programming student.

.

Master page

All three Lab 2 pages must use a Master Page. Create a “lab2master.master” page, and use CSS layout to configure (at least) the following areas:

  • Header / branding
  • Global site navigation, horizontal
  • Content
  • Footer

.

As noted, CSS will be used for layout, and an external style sheet is recommended. The style sheet must be named “lab2.css” and located in the folder cited in the guidelines.

The master page can include images/graphics and any other page elements that you want it to have.

The global site navigation area must have links (text or images) to all three pages of the Lab 2 web site.

.

Content pages

All content pages will use “lab2master.master”. Configure a page title for each. Continue reading for individual page specifications.

.

Home page – lab2.aspx

This page should have one or two columns, using CSS layout. The left column will hold your brief introduction to the three-page Lab 2 web site, while the right column can hold any other interesting content (text and/or image).

.

Team page – lab2team.aspx

This page should have (probably) three columns, using CSS layout. The first two columns will show interesting text and/or image content about your favourite team (the Pittsburgh Steelers, or the Green Bay Packers).

The third column will be used to 1) show a comment form, and 2) show a list of comments. These two components will be implemented in a user control.

Create a class to model a comment. We suggest that it has, at a minimum, these three properties:

  • Date and time stamp of the column
  • User name or other identifier for the commenter
  • A comment, allowing for a few hundred characters

.

The comments will be persisted in session state. (Yes, it’s an artificial scenario, but you CAN NOT use file system or data persistence in this Lab 2.) Use a generic List<> object to hold the comment objects.

Note: The first time that your page loads, no comments will exist. You will have to think about your page logic, and decide what to do. There are a number of valid approaches. For example, the first time the page loads, you can create an empty List<>, and save it to session state, so that it’s there when you attempt to retrieve it and use it.

.

When a user fills out the comment form, and clicks a “submit” button, your code will create an instance of a comment object. The user’s data (user name, and comment text) is assigned to the comment object’s properties. The static DateTime.Now property can be used for the comment object’s date and time stamp property.

You must use input data validation (i.e. validation controls).

Each time the page loads, you will fetch the comment objects from the List<>, and display each comment in a web server control. You can use a Label web server control, or a TextBox (configured for multi-line use), or some other web server control that you find interesting.

.

Information page – lab2info.aspx

This page should have (probably) three columns, using CSS layout. The first two columns will show interesting text and/or image content about the Super Bowl as an event (e.g. pre-game events, half-time show, etc.), its history, and so on.

The third column will be used to show a feedback form that will email the form’s contents to you. This component will be implemented in a user control. The “to” address – your own MySeneca email address – will be hard-coded as the recipient. The “subject” can also be hard-coded (e.g. “Feedback from a user of my Lab 2”).

Your email form must have the following fields and/or capabilities:

  • “From” email address
  • Check box to select whether the user will also get a copy of the feedback
  • Message body, a few hundred characters or so

You must use input data validation (i.e. validation controls).

.

You do NOT have to use file system operations to successfully complete this lab.

Don’t make this lab exercise too complicated!

If you want to see a live working example of this lab, visit this URL:
http://warp.senecac.on.ca/bti420_111a03/labs/lab2.aspx

.

Deploying your work to the warp web server

Deploy this Lab 2 to the right location on your warp web site.

.

Submitting your work

Update your warp web site home page to add a link to this lab.

When you complete a lab exercise, you are placing it online, to the warp server. Therefore, you do NOT have to submit paperwork to your professor. Just do the lab, and your professor will find it (as long as it is in the right location!).

Note: As an experienced student, we expect you to be able to follow instructions. When your professor marks this lab, a helper “lab marker” program will browse to your web site’s “default.aspx” page, and expect to find a hyperlink to “~/labs/lab2.aspx”.

So… make sure you understand: This lab should be located at the URL:
http://warp.senecac.on.ca/xxxxxxxx/labs/lab2.aspx (where “xxxxxxxx” is your login ID)

.


Advertisements
Categories: 2011 Winter BTI420
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: