Home > 2010 Winter BTI420 > BTI420 Lab 1

BTI420 Lab 1

January 11, 2010 Leave a comment Go to comments

Lab 1 gets you started with your ASP.NET Web Forms web site. You configure a simple web site that will be the foundation of your course work in BTI420. It is due on Friday January 22.

 

BTI420 Lab 1 – due Fri Jan 22

Assigned: During Week 1

Due date: Friday, January 22, 2010, at 8:00am

Grade value: 2% of your final course grade

Grading method: The following will be checked:

  • The existence of your "web site" on the warp server
  • Your "default.aspx" home page (web form)
  • Your "aboutme.aspx" page
  • Your "labs/lab1.aspx" page

 

Objective(s)

Access, initialize, and use your warp account, and create your home directory web application

Create and work with web forms, folders, and other items in Explorer

Begin using Web Server Controls

 

Access and use your warp account

When you create programs for this course, you will be using Visual Studio 2008 on a college PC (or optionally on a personal computer). Your ASP.NET web applications will be stored on the warp server in your home directory. Therefore, the first task in this course is to use your warp account to access your home directory.

First – some background information:

The warp server has been configured to allow access using Visual Studio’s "Open Web Site" method, using the HTTP protocol. Every student has a personal account on warp.senecac.on.ca. How do you get to it?

Using a web browser, your personal web site is here:
http://warp.senecac.on.ca/yourBTI420account

Using Visual Studio, choose File > Open > Web Site:
http://warp.senecac.on.ca/yourBTI420account

FTP access is NOT supported, and neither is Telnet.

Now that you know something about accessing the warp server, the first task is to create a few files and folders.

 

Create folders

lab1afterfoldercreate First, locate Solution Explorer on your Visual Studio window. When you follow the steps below, you will end up with a folder structure that looks similar to the example shown at the right.

Right-click the project object (your web site URL), and click New Folder. The folder will be named:

labs

You will locate all eight of your lab exercise work in the "labs" folder.

Soon, you will need a folder to store digital assets (like images and other media) that will be used on pages in your web site. Create another folder called:

assets

In the "assets" folder, create another folder called:

images (therefore, its URL will be ~/assets/images)

Also soon, you will need a folder to store user interface elements (like style sheets, page templates, and so on). Create another folder called:

ui

In the "ui" folder, create another folder called:

css (therefore, its URL will be ~/ui/css)

 

Clean up your web site content

lab1aftercleanup When Seneca’s Academic Computing Systems (ACS) created your account, a few items were created. We don’t need these any longer. Delete the following items from your Solution Explorer window:

_private (folder)
images (folder)
default.htm
Default.aspx (if it exists)

In Solution Explorer, your web site will now look similar to the example shown at the right.

 

Create your default home page

In Solution Explorer, after selecting your project object, right-click and Add New Item. Select "Web Form". The form name will be "default.aspx". Make sure that the Language is "Visual C#", and that there is a check beside "Place code in separate file".

We’ll come back and edit the file soon.

 

Create your Lab 1 page

In Solution Explorer, after selecting the "labs" folder, right-click and Add New Item. As above, select "Web Form". The form name will be "lab1.aspx". As above, make sure that the Language is "Visual C#", and that there is a check beside "Place code in separate file".

As above, we’ll come back and edit the file soon.

 

Create your "about me" page

In Solution Explorer, after selecting the "labs" folder, right-click and Add New Item. As above, select "Web Form". The form name will be "aboutme.aspx". As above, make sure that the Language is "Visual C#", and that there is a check beside "Place code in separate file".

As above, we’ll come back and edit the file soon.

 

Edit your default home page

On your default home page, identify yourself (by name only – no student ID or other personally-identifying information).

Create a hyperlink (web server control) that links to your "aboutme.aspx" page.

Create an HTML table (using the Visual Studio "Table" menu choice method). This table will be two columns by nine rows (one header and eight data rows). The left column will be titled "Labs", and the right column will be titled "Description".

In the eight data rows, under the "Labs" column, enter Lab 1, Lab 2, Lab 3, etc. Make Lab 1 a hyperlink that links to the "lab1.aspx" page you created above. Every time you create a new lab page, you will come back to this page and edit it to update a hyperlink.

Beside it (under the "Description" column), type a brief description for the lab.

 

Edit your "about me" page

On your "aboutme.aspx" page, identify yourself (again), and include the following information:

  • The most interesting technology (or life experience) that you have learned so far in your Seneca studies
  • What you want and expect to learn in this BTI420 course
  • A small picture of yourself (no more than 200 pixels wide or 200 pixels tall); use an ASP.NET "image" web server control as the element, and upload/store your picture (jpg/png) in the "assets/images" folder

Then, create a radio button list (web server control):

  • It will auto postback
  • Its displayed text values will be the course code and course name of all the courses you are enrolled in this semester (i.e. if you are in five courses, there will be five buttons)
  • The displayed text value must be in the format "BTI420 – Web Programming on Windows"
  • The non-displayed "value" must store the professor’s last name
  • The initial state of the radio button list is that NONE of the buttons are selected
  • When a user selects a button, the form will post back, and return the name of the professor in a label below the list, in the following format:
    BTI420 – Web Programming on Windows – Professor McIntyre

 

Edit your Lab 1 page

Using a format similar to the in-class example for week 1, create a table that will hold the basic web server controls we discussed in class:

  • Hyperlink
  • Textbox
  • Button
  • Label

The hyperlink should link to your new warp server web application home page.

The textbox should allow data entry, and upon clicking the button, the textbox’s contents will appear in the label. After placing the textbox’s contents in the label, clear the textbox.

If the user enters one of the following colours (i.e. they type "red" in the textbox), make sure that the label’s text appears in that colour: red, blue, green

If the user enters text that has ten (10) or more characters, make the label’s text appear as upper case.

 

Submitting your work

When you do a lab exercise, you are creating it online on 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 home directory web app’s "default.aspx" page, and expect to find a hyperlink to "~/labs/lab1.aspx".

Remember – this lab should be located at the URL:
http://warp.senecac.on.ca/xxxxxxxx/labs/lab1.aspx (where "xxxxxxxx" is your login ID)

 


Advertisements
Categories: 2010 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: