ASP.NET Web Application using Visual Studio.NET 2005 - Exercise 02

In this lab, we will demonstrate how to create an ASP.NET Web application having a single form with five text boxes and a Submit button. We will use the form to send information to a second form where data from the first form will be displayed.

Tutorial Presentation

Please watch this tutorial before beginning the iLab: Instructions for Week 2 iLab: User Input Web Pages

Deliverables

All files are located in the subdirectory of the website. The website should function as follows: When you run the website, you should be able to enter data in the frmPersonnel form and have it displayed in the frmPersonnelVerified form. Once you have verified it works, save your website, zip up all files, and submit in the Dropbox.

L A B  S T E P S

STEP 1: frmPersonnel (10 points)

1. Open the PayrollSystem website from Lab 1.

2. Create a new form called frmPersonnel. To do this, pull down the Website menu, select "Add New Item," then type frmPersonnel.aspx for the name.

Click on image to enlarge. [D]

Add Personnel Form image

3. Go to the Design mode of the form by clicking the Design tab (as opposed to the Source tab).

[D]

4. Copy/paste this text for the CoolBiz Productions, Inc. logo onto the form at the very top. Set the alignment to Center by highlighting the text, then clicking Format, Justify, Center.

5. From the ToolBox, drag-and-drop a Panel control underneath the logo text.

6. Click the A/Z button in the Properties dialog so that all the properties are sorted alphabetically.

[D]

7. Change the Height property of the Panel to 250px and the Width to 300px. To do this, select the Panel, then go to the Properties pane (usually in the lower right corner of the Visual Studio.NET Design view; if you don't see it, click View Properties Window OR press the F4 key). Scroll down the list, then type the value in for each Property.

8. Change the Panel's HorizontalAlign property to Left.

9. Save your work!!!

10. From the ToolBox, drag-and-drop five Labels and five TextBoxes onto the Panel. To make each Label/TextBox pair appear on a separate line, put the cursor after each TextBox then press the [ENTER] key (much like you would with a word processing program).

11. From the ToolBox, drag-and-drop two Buttons onto the Panel below the last Label and TextBox.

12. Save your work!!!

Click on image to enlarge. [D]

Unfinished Personnel Form image

13. Test your Web page. Press F5, or click the Start Debugging (Citrix users, press "Start Without Debugging") button on the toolbar, or pull down the Debug menu and select Start Debugging.

Click on image to enlarge. [D]

Unfinished Personnel In Browser image

NOTE: To execute the application, you have these options:

    A.  If you are using Citrix, press CTRL-F5 to Start Without Debugging. You will not be deducted points for this part.
    B.  If you are using a standalone version, press F5 to Start with Debugging, or you can press CTRL-F5 to Start Without Debugging

14. Rename the Label's properties as defined below. You can do this by selecting each Label, scrolling to the property, then typing in the value.

Property	Value
Label1- Text	First Name:
Label2- Text	Last Name:
Label3- Text	Pay Rate:
Label4- Text	Start Date:
Label5- Text	End Date:

15. Rename each TextBox's property as defined below. You can do this by selecting each TextBox, scrolling to the property, then typing in the value.

Property	Value
TextBox1 - (ID)	txtFirstName
TextBox2 - (ID)	txtLastName
TextBox3 - (ID)	txtPayRate
TextBox4 - (ID)	txtStartDate
TextBox5 - (ID)	txtEndDate

Click on image to enlarge. [D]

Changing Text Box ID image

16. Change each Button's ID and Text properties as defined below. You can do this by selecting each Button, scrolling to the property, then typing in the value.

Property	Value
Button1 - (ID)	btnSubmit
Button1 - Text	Submit
Button2 - (ID)	btnCancel
Button2 - Text	Cancel

17. In order to format the TextBoxes and Labels, we will make them the same size. Bring up the Layout Toolbar by clicking View, Toolbars, Layout.

18. Highlight each Label by pressing and holding the keyboard Ctrl button then clicking each Label. Make sure you click on the longest Label LAST.

19. Click the icon "Make Same Width" on the Layout Toolbar.

[D]

20. Save your work!!!

21. Test your work by running it (press F5 or click the Start Debugging button, or click Debug, Start Debugging).

Click on image to enlarge. [D]

Finished Personnel In Browser image

STEP 2: frmPersonalVerified (10 points)

23. Create a new Web form called frmPersonalVerified.aspx.

24. Click the Design tab for the frmPersonalVerified.aspx and add a Label and a TextBox. Set the properties as follows:

Property	Value
Label - Text	Information to submit:
Textbox - (ID)	txtVerifiedInfo
Textbox - Height	80px
Textbox - Width	400px
Textbox - TextMode	Multiline

25. Double click anywhere on a blank part of the Web page to open the code portion. The cursor should be in the protected void Page_Load (object sender, EventArgs) function. Enter the following information:

//Your comments here         txtVerifiedInfo.Text = Request["txtFirstName"] +             "\n" + Request["txtLastName"] +             "\n" + Request["txtPayRate"] +             "\n" + Request["txtStartDate"] +             "\n" + Request["txtEndDate"];

26. Return to the frmPersonnel Web page, click the btnSubmit button, go to the PostBackUrl property, and set it to frmPersonalVerified.aspx. To do this, you can click the ellipse to the right of this property to open a Browse dialog and click frmPersonalVerified.aspx there. This will insert the correct path into the PostBackUrl property.

STEP 3: Verify and submit (10 points)

27. Save your work and run the project. You should be able to enter the information in the frmPersonel web page, click the Submit button, and have it displayed in the frmPersonalVerified web page.

28. Run your project. When you open the project, you should be able to enter data in the frmPersonnel and have it displayed in the frmPersonnelVerified. Once you have verified that it works, save your project, zip up all files, and submit in the Dropbox.

NOTE: Make sure you include comments in the code provided where specified (where the "//Your comments here" is mentioned), or else a five point deduction per item (form, class, function) will be made. You basically put two forward slashes to start the comment; anything after the slashes on that line is disregarded by the compiler. Then type a brief statement on what is happening in the line under it. Comments show professionalism and are a must in systems. As a professional developer, comments will set you apart from others and make your life much easier if maintenance and debugging are needed.

Click on image to enlarge. [D]

Two Forms With Data image

ASP.NET Web Application using Visual Studio.NET 2005 - Exercise 01

In this lab, you will create a "Hello, World" ASP.NET Web Application using Visual Studio.NET 2005.

For the labs, you will use the Microsoft Visual Studio 2005 software application. You have two options for using this application:

1. You may use a copy of Visual Studio 2005 that is installed on your local PC. If you do not already have this software, there is a link in the syllabus (in the Textbook and Required Materials section) that you can follow to obtain a copy at low or no cost through the DeVry Student Software Fulfillment Center.

or

2. You may run Visual Studio 2005 over the Web from the DeVry iLab (Citrix) server. Instructions for using the iLab (Citrix) server are on the iLab page under Course Home.

Throughout this course, you will be creating a Web application for a fictitious company called CoolBiz Productions, Inc. To start, follow the "Lab Steps" to create a simple "Hello, World" ASP.NET Web Application and submit it to the dropbox.

Overview of fictitious company

CoolBiz Productions, Inc.

We are a mid-size Indie (Independent) Film Studio that is in need of a payroll system. We have outgrown our current system, a simple spreadsheet, to the extent that it takes three people over one week to pay everyone on a timely basis.

Overview of our company

We have over 2,000 full time and part-time employees. We produce comedy, fiction, and science fiction films with budgets of $250K-$20 million. We have produced over 50 films since we first began 20 years ago.

We are very profitable and have strong links to many of the industry's most powerful people.

Current Payroll System

Our current system consists of mostly manual processing using an MS Excel Spreadsheet to control who gets paid.

The system consists of the three payroll staff members reviewing each of the full time staff members' wages, calculating how many hours they worked based on their hourly rate, and paying them by issuing a check.

The check needs to be entered in another worksheet for each of the people who were paid so that we can tell when it whet out, how much it was for, and if it was cashed or not. If a [Date_Cashed] is entered, we deduct that amount from our Working Payroll Capital account to track how much money we have for payroll.

This process is then repeated for all part time staff and independent contractors.

Our Needs

We need a more automated way to pay our staff. We need to use the same logical flow as a basis, yet improve on it by having a way to:

1. Search, enter, update, and delete staff and independent employee information in one place
2. Search, enter, update, and delete payroll automation information for the employee to set up recurring payments or one-time payments
3. Produce reports to show the following: 1) Summary of who got paid per week, 2) Summary of all payment per week, 3) Details of any employee to-date (allow entry of a specific Employee ID)
4. Allow transactions to be rolled back in case we pay someone too much
5. Make use of transaction processing in case the system unexpectedly shuts down
6. Ensure the system is secure (logins required)
7. Allow only Authorized Payroll Personnel to control all aspects of the system
8. Allow only Authorized Payroll Personnel to view transactions and user activity
9. Allow only Authorized Payroll Personnel to e-mail reports to users using the e-mail on file.
10. Incorporate error handling into all processes in the system and e-mail any errors to the technical support people

Deliverables

All files are located in the subdirectory of the website. The website should function as follows: When you run the website, a page with the text "Hello, World" should be displayed. Once you have verified it works, save your website, zip up all files, and submit in the Dropbox.

L A B S T E P S

STEP 1 through 3: Create Web Site and home page (10 points)

In this lab, we will learn how to create a simple ASP.NET Web Application using Microsoft Visual Studio.NET 2005. The application will display the text "Hello, World" on the home page.

1. Open Microsoft Visual Studio 2005.

Click on image to enlarge. [D]

Visual Studio Startup image

2. Create a new ASP.NET website called "PayrollSystem." To do this, select "File, New Website."

[D]

When the "New Website" dialog opens, select "ASP.NET Website" as the Template; select "File System" as the Location; and select "Visual C#" as the Language. Click Browse and navigate to the folder where you want to save your website. Add "PayrollSystem" at the end of the file path. Click OK if you are prompted to create a new folder. Click OK in the New Website dialog to finish creating the website.

Click on image to enlarge. [D]

New Web Site Dialog

3. Edit the Default.aspx file (the home page for your site) to add the message "Hello, World." To do this, if necessary, click the Design button below the editing window to switch to Design view, then click in the editing window and type "Hello, World" (without the quotes).

Click on image to enlarge. [D]

Edit In Design View

Click the Save button on the toolbar to save the changes to Default.aspx.

[D]

STEP 4 through 5: Start Debugging (10 points); NOTE: Citrix users have different steps!

4. To ensure that everything is working properly, click the Start Debugging button on the toolbar, or press the F5 key on the keyboard, or pull down the Debug menu and select "Start Debugging."

[D]

5. If the "Debugging Not Enabled" dialog box appears, select the option to add or modify the Web.config file to enable debugging, and click OK. You should only have to do this the first time you debug the site.

Click on image to enlarge. [D]

Enable Debugging

NOTE: To execute the application, you have these options:

    A.  If you are using Citrix, press CTRL-F5 to Start Without Debugging. You will not be deducted points for this part.
    B.  If you are using a standalone version, press F5 to Start with Debugging, or you can press CTRL-F5 to Start Without Debugging

STEP 6 through 7 : Display the "Hello, World" web page (10 points)

6. The Internet Explorer Web browser will open and display your Default.aspx page containing the "Hello, World" message.

Click on image to enlarge. [D]

Hello World in Browser

7. Stop debugging and return to the design mode by closing the browser. Once you have verified that it works, save your project, zip up all files, and submit in the Dropbox.

You are welcome to submit your solution in the comment box as well. However, if you need full solution you can contact me.