SlideShare a Scribd company logo
CIS407A iLab 1 Web Application
Development Devry University
Click this link to get the tutorial:
http://homeworkfox.com/tutorials/general-
questions/6223/cis407a-ilab-1-web-application-development-
devry-university/
Lab 1 of 7: "Annual Salary Calculator" ASP.NET Web Application

iLABOVERVIEW

Scenario/Summary

In this iLab, you will create an Annual Salary Calculator ASP.NET web application using Visual
Studio.NET 2008.

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

You may use a copy of Visual Studio 2008 that is installed on your local PC. or You may run
Visual Studio 2008 over the Web Throughout this course, you will be creating a web application
for a fictitious company called CoolBiz Productions, Inc. To get familiar with the development
environment, follow the Lab Steps to create a simple Annual Salary Calculator ASP.NET web
application. You will be adding to this application each week.

Instructions for Week 1 iLab: "Hello World, and more" ASP.NET Web Application

Click on the link above to view the tutorial.

Please watch this tutorial before beginning the iLab.

The tutorial has audio.

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 went 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

easily calculate the projected annual salary based on rate and number of hours; search, enter,
update, and delete staff and independent employee information in one place; search, enter,
update, and delete payroll automation information for the employee to set up recurring payments
or one-time payments; produce reports to show the following: (a) summary of who got paid per
week, (b) summary of all payments per week, (c) details of any employee to-date (allow entry of
a specific employee ID); allow transactions to be rolled back in case we pay someone too much;
make use of transaction processing in case the system unexpectedly shuts down; ensure the
system is secure (logins required); allow only authorized payroll personnel to control all aspects
of the system; allow only authorized payroll personnel to view transactions and user activity;
allow only authorized payroll personnel to e-mail reports to users using the e-mail on file; and
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:
You should have a page that, when run, displays a page showing the text "Hello, World." You
should also have a second page that is the annual salary calculator that properly calculates the
annual salary, given an hourly rate and the number of hours projected to be worked in a year.
Once you have verified both pages work, save your website, zip up all files, and submit in the
Dropbox.

iLABSTEPS

STEPS 1 through 3: Create Website and Home Page (10 points)

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

Open Microsoft Visual Studio 2008.

Click on image to enlarge.


Visual Studio Startup


Click here for text description of this image. Create a new ASP.NET website called
"PayrollSystem." To do this, select "File, New Website."


Click here for text description of this image.

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.


New Website Dialog


Click here for text description of this image.

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.


Edit in Design View
Click here for text version of this image.

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


Click here for text description of this image.

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

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."


Click here for text description of this image.

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.


Enable Debugging


Click here for text description of this image.

NOTE: To execute the application, you have these options: If you are using Citrix, press CTRL +
F5 to Start Without Debugging. You will not be deducted points for this part. 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)

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

Click on image to enlarge.


Hello World in Browser


Click here for text description of this image. Stop debugging and return to the design mode by
closing the browser. Add a new form to your web application called frmSalaryCalculator.aspx.
Make sure "Place Code in separate file" is checked when you add the form. To add a new form,
click (single-click, not double-click) on the project node in the solution explorer.

With the project node highlighted, right-click on the project node and select "Add New Item"
from the popup menu. The following dialog will be displayed:

Select the name of the form you will add frmSalaryCalculator.aspx. Make sure "Place code in
separate file" is checked and "Select master page" is unchecked.

You will create a web-based salary calculator on this new page. To do this, open the aspx page in
Design view and, from the Toolbox, add three labels, two text box controls, and a button control.
You can add controls by dragging the control from the Toolbox – Standard section onto your
form. Your form should look like this: Change the text displayed in each label so that the first
label displays "Annual Hours"; the second label should display "Rate" and the third label should
display "$". (Hint: To change the text displayed, change the Text property of each control.)
Change the button text to display "Calculate Salary." (Hint: To change the text displayed as the
button label, change the Text property of the button.) Your form should now look like this: Set
the ID property of the top text box to txtAnnualHours. Set the ID property of the second textbox
to txtRate. Set the ID of the bottom label (the one we set the text property to "$") to lblSalary.
(Note: We set these IDs as we will be accessing the control values from the C# code. You can set
the button ID and the other two labels' ID properties as well, but we won't be accessing them
from our code.) In Design view, add a C# event handler for the button-click event by double-
clicking on the Calculate Salary button. This will place you in the page code behind file the
editor. (Remember that ASP.Net pages have a file containing the HTML markup with an
extension of .aspx and a C# 'code behind' file with an extension of .aspx.cs.) This is the code that
should be displayed: (If you changed the ID of the button, it will be a different method name.)


Click here for text file of this image.

This code will be called each time the user presses the button. It is important to remember that
code in the code behind page executes on the server – not on the user's browser. This means that
when the button is pressed, the page is submitted back to the web server and is processed by the
ASP.Net application server on the web server. It is this code (between the { and } in this method)
that will execute on the server. Once it is done executing the page will be sent back to the
browser. Any changes we make to the page or controls on the page will be shown to the user in
the updated page.

In this method, add code that will get the text in the txtAnnualHours text box, convert it to a
Double, and store it in a double variable. Add code that will get the text from the txtRate text
box, convert it to a Double, and store it in another variable. Create a third variable of type
Double and set its value to the annual hours variable value multiplied by the rate double variable
value. Take this resulting value and convert it to a string (text), and update the lblSalary Text
property with this new string.

Hints:
A control's property can be accessed by simply using the control ID followed by a . followed by
the name of the property. For example, the value stored in the Text property of the
txtAnnualHours control can be accessed by using this: txtAnnualHours.Text. Text properties on
controls are of type string.

To convert a string to a Double you can use the Convert class. If we had a string variable called
str1 and a double variable called myNumber, the C# code to convert this would be as follows:


Click here for text file of this image.

When converting from one type to another, we are assuming that the value stored in the type
being converted is compatible with the type we are converting to. In the example above, if the
value stored in str1 was not type compatible with a Double (for example "tiger") an error would
be raised.

To set the value of a control on a web form, you can access the control and set the property
directly. If I had a label control called lblCar and I wanted to update the text that was displayed
in the label, I could do something like this:


Click here for text file of this image.

Note that following code would be incorrect and cause an error:


Click here for text file of this image.

lblCar is a Label – it isn't a string so we can't assign a string directly to it, but we can assign a
string directly to the Text property of the label.

All of the base types in C# (double, int etc) have a ToString() method you can call. If you had a
double variable that you wanted to convert to a string and set that string to my label's text, you
would do the following:


Click here for text file of this image.

This would take whatever value was stored in the myNumber Double and convert it to a string.

To add a $ to output you can use string concatenation in C# like this:


Click here for text file of this image.
Set your new form as the start page by clicking once on the form name in the Solution Explorer
and then right-clicking on the form name and selecting "Set as Start Page." You can now test
your application and make sure it works correctly as you did with the Hello World form above.
You can switch back and forth between which form runs when you run your application by
setting the different forms as the start page.

More Related Content

DOCX
Cis 407 i lab 1 of 7
DOC
Cis407 a ilab 2 web application development devry university
DOC
Cis407 a ilab 3 web application development devry university
PDF
Sales force managing-data
PPT
Chapter 09
PDF
Getting started with workflow
DOC
Web page manual
DOCX
Walkthrough asp.net
Cis 407 i lab 1 of 7
Cis407 a ilab 2 web application development devry university
Cis407 a ilab 3 web application development devry university
Sales force managing-data
Chapter 09
Getting started with workflow
Web page manual
Walkthrough asp.net

What's hot (19)

PPTX
Sharepoint
PPT
PDF
Salesforce interview preparation toolkit formula and validation rules in sale...
PDF
Oracle apex hands on lab#2
PDF
E mail and-workflow-administation
PDF
Salesforce interview-preparation-toolkit-formula-and-validation-rules-in-sale...
PDF
Oracle EMC 12C Grand Tour
PDF
Aspnet mvc tutorial_01_cs
DOCX
Cis 407 i lab 2 of 7
PDF
Intro to IBM Bluemix DevOps Services, a Workshop with a Cloudant twist
PPTX
Managing multiple tasks
PDF
Desk Sync User Installation Guide
PDF
Creating ProLaw Reports using Excel
PDF
Girl Scouts Website Designer Badge Seminar - Workbook
PDF
Apex code-fundamentals
PDF
Automation anywhere user manual tethys solutions
DOCX
Cms Train The Trainer Guide
PPT
ASP.NET Session 6
PDF
SharePoint Re-branding The VisualStudio Way Part One SandBox Solution
Sharepoint
Salesforce interview preparation toolkit formula and validation rules in sale...
Oracle apex hands on lab#2
E mail and-workflow-administation
Salesforce interview-preparation-toolkit-formula-and-validation-rules-in-sale...
Oracle EMC 12C Grand Tour
Aspnet mvc tutorial_01_cs
Cis 407 i lab 2 of 7
Intro to IBM Bluemix DevOps Services, a Workshop with a Cloudant twist
Managing multiple tasks
Desk Sync User Installation Guide
Creating ProLaw Reports using Excel
Girl Scouts Website Designer Badge Seminar - Workbook
Apex code-fundamentals
Automation anywhere user manual tethys solutions
Cms Train The Trainer Guide
ASP.NET Session 6
SharePoint Re-branding The VisualStudio Way Part One SandBox Solution
Ad

Viewers also liked (18)

PPT
The Importance of Place in Online Learning
DOC
Cis407 a ilab 6 web application development devry university
PPTX
MOOCs at UVa for eLearn October 2015
PPTX
MOOCs at UVa as of March 1, 2013
PPTX
MOOCs at UVa for Teaching with Technology Fair October 2015
PPTX
Apple book
PPTX
DOC
Cis407 a ilab 7 web application development devry university
PPTX
SWUN Business Courses Online and Mobile May 2015
PPT
MOOCovery for #SXSWEDU #UVaMOOC Planning, Process, Ideas
PPTX
Apple book
PPTX
Rooney rea dmp3
DOC
Cis407 a ilab 4 web application development devry university
PPTX
Rouen presentation
PPTX
PPTX
Chile's market analisys
PPTX
Six young men presentation
ZIP
Wolf pack project ii
The Importance of Place in Online Learning
Cis407 a ilab 6 web application development devry university
MOOCs at UVa for eLearn October 2015
MOOCs at UVa as of March 1, 2013
MOOCs at UVa for Teaching with Technology Fair October 2015
Apple book
Cis407 a ilab 7 web application development devry university
SWUN Business Courses Online and Mobile May 2015
MOOCovery for #SXSWEDU #UVaMOOC Planning, Process, Ideas
Apple book
Rooney rea dmp3
Cis407 a ilab 4 web application development devry university
Rouen presentation
Chile's market analisys
Six young men presentation
Wolf pack project ii
Ad

Similar to Cis407 a ilab 1 web application development devry university (20)

PDF
Web services in asp.net
DOCX
SAP BPC Learning Notes and Insights.docx
DOCX
Foundation and PathwaysCOS10020 Creating Web Application.docx
PDF
Intellect_Integration_-_Web_Integration_Methods.pdf
PDF
Murach : How to develop a single-page MVC web
PPT
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
PDF
Build your first rpa bot using IBM RPA automation
DOCX
BI Step by Step
PDF
Oracle ADF 11g Tutorial
PDF
Homestead Weather workshop
PDF
Informatica complex transformation ii
ODP
My First Report slide support
PDF
SYSTEMS DESIGN / CAPSTONE PROJECT
PDF
WordPress Professionals Melbourne
DOC
Open microsoft visual studio/tutorialoutlet
PDF
130297267 transformations
PDF
Dreamweaver cs6 step by step
PDF
Orangescrum Invoice Pro Add-on user manual
PDF
Pwer BI DAX and Model Transformation.pdf
Web services in asp.net
SAP BPC Learning Notes and Insights.docx
Foundation and PathwaysCOS10020 Creating Web Application.docx
Intellect_Integration_-_Web_Integration_Methods.pdf
Murach : How to develop a single-page MVC web
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Build your first rpa bot using IBM RPA automation
BI Step by Step
Oracle ADF 11g Tutorial
Homestead Weather workshop
Informatica complex transformation ii
My First Report slide support
SYSTEMS DESIGN / CAPSTONE PROJECT
WordPress Professionals Melbourne
Open microsoft visual studio/tutorialoutlet
130297267 transformations
Dreamweaver cs6 step by step
Orangescrum Invoice Pro Add-on user manual
Pwer BI DAX and Model Transformation.pdf

Cis407 a ilab 1 web application development devry university

  • 1. CIS407A iLab 1 Web Application Development Devry University Click this link to get the tutorial: http://homeworkfox.com/tutorials/general- questions/6223/cis407a-ilab-1-web-application-development- devry-university/ Lab 1 of 7: "Annual Salary Calculator" ASP.NET Web Application iLABOVERVIEW Scenario/Summary In this iLab, you will create an Annual Salary Calculator ASP.NET web application using Visual Studio.NET 2008. For the iLabs, you will use the Microsoft Visual Studio 2008 software application. You have two options for using this application: You may use a copy of Visual Studio 2008 that is installed on your local PC. or You may run Visual Studio 2008 over the Web Throughout this course, you will be creating a web application for a fictitious company called CoolBiz Productions, Inc. To get familiar with the development environment, follow the Lab Steps to create a simple Annual Salary Calculator ASP.NET web application. You will be adding to this application each week. Instructions for Week 1 iLab: "Hello World, and more" ASP.NET Web Application Click on the link above to view the tutorial. Please watch this tutorial before beginning the iLab. The tutorial has audio. 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
  • 2. 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 went 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 easily calculate the projected annual salary based on rate and number of hours; search, enter, update, and delete staff and independent employee information in one place; search, enter, update, and delete payroll automation information for the employee to set up recurring payments or one-time payments; produce reports to show the following: (a) summary of who got paid per week, (b) summary of all payments per week, (c) details of any employee to-date (allow entry of a specific employee ID); allow transactions to be rolled back in case we pay someone too much; make use of transaction processing in case the system unexpectedly shuts down; ensure the system is secure (logins required); allow only authorized payroll personnel to control all aspects of the system; allow only authorized payroll personnel to view transactions and user activity; allow only authorized payroll personnel to e-mail reports to users using the e-mail on file; and 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: You should have a page that, when run, displays a page showing the text "Hello, World." You should also have a second page that is the annual salary calculator that properly calculates the annual salary, given an hourly rate and the number of hours projected to be worked in a year.
  • 3. Once you have verified both pages work, save your website, zip up all files, and submit in the Dropbox. iLABSTEPS STEPS 1 through 3: Create Website and Home Page (10 points) In this ilab, we will learn how to create a simple ASP.NET web application using Microsoft Visual Studio.NET 2008. The application will display the text "Hello, World" on the home page. Open Microsoft Visual Studio 2008. Click on image to enlarge. Visual Studio Startup Click here for text description of this image. Create a new ASP.NET website called "PayrollSystem." To do this, select "File, New Website." Click here for text description of this image. 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. New Website Dialog Click here for text description of this image. 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. Edit in Design View
  • 4. Click here for text version of this image. Click the Save button on the toolbar to save the changes to Default.aspx. Click here for text description of this image. STEPS 4 through 5: Start Debugging (10 points); NOTE: Citrix users have different steps! 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." Click here for text description of this image. 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. Enable Debugging Click here for text description of this image. NOTE: To execute the application, you have these options: If you are using Citrix, press CTRL + F5 to Start Without Debugging. You will not be deducted points for this part. 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) The Internet Explorer web browser will open and display your Default.aspx page containing the "Hello, World" message. Click on image to enlarge. Hello World in Browser Click here for text description of this image. Stop debugging and return to the design mode by closing the browser. Add a new form to your web application called frmSalaryCalculator.aspx.
  • 5. Make sure "Place Code in separate file" is checked when you add the form. To add a new form, click (single-click, not double-click) on the project node in the solution explorer. With the project node highlighted, right-click on the project node and select "Add New Item" from the popup menu. The following dialog will be displayed: Select the name of the form you will add frmSalaryCalculator.aspx. Make sure "Place code in separate file" is checked and "Select master page" is unchecked. You will create a web-based salary calculator on this new page. To do this, open the aspx page in Design view and, from the Toolbox, add three labels, two text box controls, and a button control. You can add controls by dragging the control from the Toolbox – Standard section onto your form. Your form should look like this: Change the text displayed in each label so that the first label displays "Annual Hours"; the second label should display "Rate" and the third label should display "$". (Hint: To change the text displayed, change the Text property of each control.) Change the button text to display "Calculate Salary." (Hint: To change the text displayed as the button label, change the Text property of the button.) Your form should now look like this: Set the ID property of the top text box to txtAnnualHours. Set the ID property of the second textbox to txtRate. Set the ID of the bottom label (the one we set the text property to "$") to lblSalary. (Note: We set these IDs as we will be accessing the control values from the C# code. You can set the button ID and the other two labels' ID properties as well, but we won't be accessing them from our code.) In Design view, add a C# event handler for the button-click event by double- clicking on the Calculate Salary button. This will place you in the page code behind file the editor. (Remember that ASP.Net pages have a file containing the HTML markup with an extension of .aspx and a C# 'code behind' file with an extension of .aspx.cs.) This is the code that should be displayed: (If you changed the ID of the button, it will be a different method name.) Click here for text file of this image. This code will be called each time the user presses the button. It is important to remember that code in the code behind page executes on the server – not on the user's browser. This means that when the button is pressed, the page is submitted back to the web server and is processed by the ASP.Net application server on the web server. It is this code (between the { and } in this method) that will execute on the server. Once it is done executing the page will be sent back to the browser. Any changes we make to the page or controls on the page will be shown to the user in the updated page. In this method, add code that will get the text in the txtAnnualHours text box, convert it to a Double, and store it in a double variable. Add code that will get the text from the txtRate text box, convert it to a Double, and store it in another variable. Create a third variable of type Double and set its value to the annual hours variable value multiplied by the rate double variable value. Take this resulting value and convert it to a string (text), and update the lblSalary Text property with this new string. Hints:
  • 6. A control's property can be accessed by simply using the control ID followed by a . followed by the name of the property. For example, the value stored in the Text property of the txtAnnualHours control can be accessed by using this: txtAnnualHours.Text. Text properties on controls are of type string. To convert a string to a Double you can use the Convert class. If we had a string variable called str1 and a double variable called myNumber, the C# code to convert this would be as follows: Click here for text file of this image. When converting from one type to another, we are assuming that the value stored in the type being converted is compatible with the type we are converting to. In the example above, if the value stored in str1 was not type compatible with a Double (for example "tiger") an error would be raised. To set the value of a control on a web form, you can access the control and set the property directly. If I had a label control called lblCar and I wanted to update the text that was displayed in the label, I could do something like this: Click here for text file of this image. Note that following code would be incorrect and cause an error: Click here for text file of this image. lblCar is a Label – it isn't a string so we can't assign a string directly to it, but we can assign a string directly to the Text property of the label. All of the base types in C# (double, int etc) have a ToString() method you can call. If you had a double variable that you wanted to convert to a string and set that string to my label's text, you would do the following: Click here for text file of this image. This would take whatever value was stored in the myNumber Double and convert it to a string. To add a $ to output you can use string concatenation in C# like this: Click here for text file of this image.
  • 7. Set your new form as the start page by clicking once on the form name in the Solution Explorer and then right-clicking on the form name and selecting "Set as Start Page." You can now test your application and make sure it works correctly as you did with the Hello World form above. You can switch back and forth between which form runs when you run your application by setting the different forms as the start page.