SYSTEMS DESIGN / CAPSTONE PROJECT MIS 413

Mini Project #1

Building a one page web site with a style sheet

Due: 1/27/2011 via an email message to janickit@uncw.edu with a link to you mini project

page on the misCapstone server. Please make the subject line: MIS 413 – Mini Project 1.The

link in the email should be similar to:

http://misCapstone.uncw.edu/S11LastNameFirstInitial/InitialsMP1.aspx

Goal: Create a one page asp.net application with a supporting style sheet. The objective is

to build confidence in using the visual studio design tool and asp.net

Your finished page should look similar to the figure below, (but not identical to the

following). The final look will depend on the style you select. You must have all the „input

objects‟ in your completed project.

Part A: Create a one page web site on the web server

1. Start a new ASP.NET web site, using the guidelines for starting a new website on

the class website. See Hint 1-0 on how to start a new ASP web site. For this project

we will build your web site on the desktop and then copy to the server when

complete (you should save a copy on your flash drive or timmy).

2. Once you have completed step 1, there should be a default.aspx page, a web.config

and app_data folder in your visual studio project, however please ignore all of them

for now.

3. Build a style sheet folder and style sheet. To accomplish: in the solution explorer

window, right click on your project name (very top in bold) and click add new

folder, name this folder: App_Themes; once this folder is created right click on this

new folder and click add item, select style sheet from the list, accept the default

name, and click SAVE.

4. Build your first ASPX page. Right click on the project name (bolded project name in

the Solution Window) and ADD NEW ITEM; Select WEB FORM; name this web

form yourinitialsMP1.aspx,

a. The language should be Visual Basic

b. Check place Code in Separate File

This should give you a shell for a style sheet and a blank HTML/ASPX page. Notice

the tabs in Visual Studio have both the css and aspx pages open for your input.

Part B: Adding a cascading style and beginning template to your project. We will build

this manually for this project and use „templates‟ in the future.

5. Look at the image on page 1 of this instruction set. The page will be divided into

three sections: masthead, content and footer. Create a style for each section.

a. In the previously started stylesheet add a div‟s as follows:

i. #masthead {

height: 150 px; ‘this may be adjusted

color: white;

background-color: select one;

}

ii. #content { select a font family }

iii. #footer { determine style to center the text }

iv. Save!

6. Build the „divisions‟ in your mp1.aspx page:

a. After the body tab, add the masthead area as in:

i. <div id=”masthead”>Your name here</div>

b. Likewise add the content and footer div‟s. Recommend you place some

random text between the starting and ending div‟s so you can see if your styles

are being utilized.

7. Attach your style sheet to your mp1.aspx page. In the design view screen, slide the

stylesheet.css from the solution explorer window to the center of your design screen.

You should see your masthead background color change and your footer area

centered.

8. Change the title tag (click source tab, and look at the top of the HTML code), it

currently should say: Untitled Page, revise it to be: Your Name Mini Project 1.

9. Now save all, and view your work to date. To view your work, click the green

arrow in the top menu choices, click Yes or OK to any dialog boxes that appear. VS

will generate a new browser page in IE, look at the page it creates to see your styles,

your div‟s, your title, and the words you added.

Part C, now you are ready to add the ‘real work for the page’

10. Placing an image on your page: Create an images folder in your project, download a

.jpg or .gif from the web to your desktop and then copy and paste this image into

your images folder.

11. From the Toolbox Standard - window, slide an image object into the masthead

div. Set the following properties for the image object:

find the properties window and select imageURL, use the elipse control (…) to

navigate to your images folder and select your image; change the alternate text tag to

reflect what the image is. Your image should now appear on your page! Lets now

add a style to move the image to the left and float the remaining text to the right of

the image. In your style sheet:

a. #masthead img {float:left}

12. Placing your name on the page. Return to your style sheet, and create (if not there) a

#masthead h1 style, your style should have at least a font-family and color attributes.

Save the changes to the style sheet.

13. Slide a label object onto the page to the right of the logo, around this label object

place <h1> <now your label> </h1> tags to invoke the h1 style you created.

14. Now, remove any of the extra words you placed between the div‟s, as they were

placed there to help you get started.

15. If you have a footer div, (or if you don‟t near the bottom of the page), build two asp

hyperlinks, one being a link for your email (think mailto:), and one being a link to

the Cameron School of Business web page.

16. In the center div of your page (normally called the content or container div), we

want to build a table to hold the input objects we desire the user to enter. For now

build a table manually in HTML to have 3 columns, and one header row and one

data entry row as follows:

<table class=”tablecenter”>

<tr>

<th colspan=”3”>

</th>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

17. Click between the <th> and </th> tag and place a label, change the text property to:

Customer Information.

18. You will have 3 columns for each of the input items, the left column will have a

label object, the middle column will have a text box (or other objects, see sample

figure), and the right column should have at least one validation object.

19. Create a tablecenter style in your stylesheet as:

a. .tablecenter { margin-left:auto; margin-right:auto; }

20. Create three td. styles to accomplish: left, center, and right justify the columns. The

1st column should be right justified; the 2

nd and 3

rd columns should be left justified.

Use these styles on all the remaining rows (except the submit button row). You will

need to change your <td> tags to reflect the class as in <td class=”left”> etc. To start

you: td.left { text-align:left;}

21. Build the six rows of objects to match the figure on page 1. You will have text

boxes, a dropdown list, and a radio button list. You are required to name the input

objects (textbox, dropdown and radio button) as follows: uiFirstName,

uiLastName etc. Labels and Validation controls do not need to be renamed unless

they are referenced in vb coding.

22. For the drop down list, click on the “items” property to add at least four choices, the

first should be text =Select State, value 0; the second text: = NC, value NC, add two

more states.

23. For the radio button list use Female and Male as the „items‟ to add, make the values

“F” and “M” while the text properties should spell out Female and Male.

24. Add two buttons as shown.

25. Validation controls: all input items must be validated (chapter 7), for the text boxes

you will need to use the required field validator. In addition add a required

expression validator for zip code to check for a valid zip code. Finally to insure they

select a state, in the required field validator set the initial value property to 0.

26. Finally to display back their answers, add a label object (name it uiAnswer) under

the table, leave the text property blank for now.

Part D: Once the submit button is clicked; you will want to display back their name to

demonstrate that the data was sent to the server and returned.

1. Double click the submit button and a sub/end sub coding window will appear which

will respond to a uiSubmit_Click event.

2. Add the necessary code to retrieve the data from the input objects and display back

in your uiAnswer label as shown on the figure.

This code should be placed in an IF statement to verify that javascript is enabled on

the user‟s client machine as in (if javascript has not been enabled then none of the

client side error checking would have been invoked):

If page.isvalid then

Your code here (sample below)

The trick here is to retrieve values from the form as in

me.uiAnswer.text = “Thank you “ & me.uiFirstName.text & …………..

End IF

3. Place a comment in this subroutine indicating what it accomplishes (comments are

entered using a single quote („)

4. Should the user click the Cancel button, you will want to place some code in the

uiCancel_click event to clear all entries.

To start you, the code is: me.uiFirstName.text = “”; etc.

In addition you will want to look at the property: causesValidation for this object

and make a change to the boolean value.

5. Place a comment in this subroutine indicating what it accomplishes

6. Add a comment to the top of the vb code page giving your name and date created.

7. Save and test all your work!

Move the project to the server. See the class web site for the path to the server (under the

folders link) you will upload your project. Find your F10xxx folder and copy and paste all

your files to this site. DO NOT copy the folder on your desktop to the web server, but all

files in this folder on your desktop.

When you have loaded your project to the server, please check the public link:

http://misCapstone.uncw.edu/S11LastNameFirstInitial/initialsMP1.aspx, the project

should load, as well as your submit button should work etc.

Test your work by following the instructions on the „class folders‟ link on the MIS413 web

page. When you are happy:

Send an email indicating that the project is ready for grading to:

janickit@uncw.edu with a link to you mini project on the misCapstone server.

Please make the subject line: MIS 413 – Mini Project 1.The link in the email

should be similar to:

http://misCapstone.uncw.edu/S11LastNameFirstInitial/InitialsMP1.aspx

MIS 413 - Mini Project #1 Grading

100 Points Max

5 Style Sheet created

2 H1 style created

3 Table left, center, right styles created

0 No inline styles used (penalty 5 each)

2 Title tag modified

3 Image appears with alt text utilized

5 Table build appropriately with three columns, justified as

desired

2 Header row of table proper

18 Six rows of input objects correct

9 All (input) items named correctly using uiObjectName

4 Drop down list with 4 items

2 Radio button list with 2 items

6 Validation on all objects to insure input

2 Drop down list also verified that a state is selected

2 Zip code checked for input and valid

7 3 comments as requested

10 uiAnswer label is displayed properly upon submit click

4 Cancel button clears all boxes

2 Mailto works

2 Link to CSB works

10 Appearance