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

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 "Greetings and Salutations. I will master ASP.NET in this course." 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 that both pages work, save your website, zip up all files, and submit in the Dropbox.

Please watch the tutorial before beginning the iLab.

In this session, I will demonstrate all features needed to complete frmCalculator for Week 1. This is for the CIS407 course. Specifically, I will demonstrate the following features: launching Visual Studio from Windows 7 Pro, creating the project or website, creating the user interface, and demonstrating event handling of the cost per room calculator. This is the Web page that I'll be creating. It's called Cost Per Room. So with that said, I will go directly into start and then launch Visual Studio. Now, the actual mechanics of how you do this would vary depending on the operating system that you have, whether it's Windows 8 or Windows 7 or something else, but the first screen that comes up, as you can see, is the Start page, and it's presented to you as a tab. It shows you Getting Started, Latest News, Welcome to Windows 8, Windows Azure Web, Windows Phone, and Office, and SharePoint. So you can delve into any of those at a later time, but for right now, I will close the Start page. The other thing that you notice is that I have – my environment is set up to start with bare minimum. So I have closed all the windows that I do not need. Specifically, I need Solution Explorer, and the output window, I don't really need that, but that comes along as well. So I will go here and create a new website, okay? So you go to File, New, and then choose Website. Make sure in the templates, of the templates installed, that you choose Visual C#. That's what we're going to be using in our environment, okay? So you choose ASP.NET Empty Website. That's what you want to choose and then the Web location, File System. Specifically, the address would be—I would choose this and then change that from Website, which is the default, to Room Cost Calculator, and then click Okay. All right, that comes up. The next thing is I want to right-click on the project name and then choose Add. At that point, I can add the new item. So when I choose to add a new item, it comes up with again the installed templates of Visual C#. What I want to select is Web Form, and then I want to change the name from default. I want to change that to frm, for form, RoomCalculator. Notice that I'm using the CamelCase naming convention. Also, make sure that the—this first checkbox is checked and that this one is not checked. That is, Select Master Page is not checked. So you click Add, and this is the first screen that comes up. So at the bottom, you will see that you have three choices: Design View, Split, and Source. So if you go to Design View, this is what you see. It's a what-you-see-is-what-you-get editor. You can also split the view so you see the design as well as the source, but typically, I operate in one or the other, either the source or the design. I will do so at different times. Okay, and so I want to type the title, and I just do so right here: This Calculator May Be Used to Calculate the Cost of Adding a Room, for example. So I could do that. So next I'm going to add—and notice also that I've set up my environment such that I have these windows—I have the Properties window, the Toolbox window, and of course the Solution Explorer. There are many other windows in Visual Studio, but I closed them all out and only confine myself to these ones that I will be using most of the time.

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

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

• You may use a copy of Visual Studio 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

• You may run Visual Studio 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 ACIT (Academy of Computing and Information Technology). 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.

Overview of Fictitious Company

The Academy of Computing and Information Technology is 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

1. easily calculate the projected annual salary based on rate and number of hours;

2. search, enter, update, and delete staff and independent employee information in one place;

3. search, enter, update, and delete payroll automation information for the employee to set up recurring payments or one-time payments;

4. 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);

5. allow transactions to be rolled back in case we pay someone too much;

6. make use of transaction processing in case the system unexpectedly shuts down;

7. ensure the system is secure (logins required);

8. allow only authorized payroll personnel to control all aspects of the system;

9. allow only authorized payroll personnel to view transactions and user activity;

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

STEPs 1–3: Create Website and Home Page

Please watch this video for a similar example to the one we are doing. It introduces event handlers, getting data from textboxes, performing basic calculations, and formatting the output to be displayed: 

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

1. Open Microsoft Visual Studio.

2. Create a new ASP.NET website called "PayrollSystem."

To do this, select File -> New -> Web Site

You will get the following screen which shows Visual Basic.

Select Visual C# template on the left of your screen if it is not already selected. Notice that your screen will now show Visual C# instead of Visual Basic.

Click Browse at the bottom of the screen to change Web Location, if necessary to get the screen below.

Notice that my Web Location is now different.

Select ASP.NET Empty project and click OK to get the screen below.

Right-click on the project name from Solution Explorer, then select Add->Add New Item to get the following screen.

Select Web Form, accept Default.aspx file, and click Add to get:

Click Design at the bottom left-hand of the window to show the following:

Edit the Default.aspx file (the home page for your site) to add the message "Greetings and Salutations. I will master ASP.NET in this course."

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 " Greetings and Salutations. I will master ASP.NET in this course." (without the quotes) to get the following screen.

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

STEPs 4–5: Start Debugging; NOTE: Citrix users have different steps!

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

Save and run by Right-Click-> Run from Browser.

Press Yes.

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

Notice that this time the project build and website validation started.

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.

You will get a clean run just as you did previously. Your output screen looks like the screen below.

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.

Create the Salary Calculator Form

1. Right click on the Project name. Choose Add, then Select Web Form to get the screen below.

And you get the Add New Item screen, shown below.

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

Click the Design view.

Add the Tools Window using View-> Toolbox.

3. You can choose to adjust the ToolBox to tab with Solution Explorer to look like the following screen.

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, drag a label into the form, click after the label and add about 5 spaces, then drag a textbox control after the label.

Press Enter after the textbox to put the cursor on the next line.

Add another label and textbox below the first set and press Enter.

Then add a button control. Finally, on the last line, add another label. Your form should look like the screen displayed below.

4. If necessary, add the Property Window as shown in the screen below, using View->Properties Window.

5. Now we will modify the page to add proper labels and give the textboxes names.

• 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 $.

• To change the text displayed, click on the label control. This causes the property window to show all properties of the label, then change the Text property of the control in the Properties window.

• Set the ID property of the top textbox to txtAnnualHours.

• Set the ID property of the second textbox to txtPayRate. Set the ID of the bottom label (the one we set the text property to "$") to lblAnnualSalary. (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.)

• 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.) The ID of the button should be btnCalculateSalary.Your form should now look like the screen displayed below.

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.

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

2. Add code that will get the text from the txtPayRate text box, convert it to a Double, and store it in another variable.

3. Create a third variable of type Double and set its value to the annual hours variable value multiplied by the rate double variable value.

4. Take this resulting value and convert it to a string (text), and update the lblAnnualSalary Text property with this new string.

Let's look at a similar example. After reviewing this example, write the code needed to calculate the annual salary.

CostOfRoom Calculator is the alternate example, which demonstrates the skills you need to complete this assignment.  See video at the top of this lab document and screenshots below.

What follows is an example of code-behind the Calculate button for the CostOfRoom Calculator:

Code-behind the calculate button

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.

The output of the CostOfRoom calculator is shown in the screen below with Length, Width, Cost Per Square Unit labels and input boxes, and the Calculations button.

Use small values for length and width.

Use large values for length and width and see the formatting of the output.

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:

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

All of the base types in C# (double, int etc) have a ToString() method that 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:

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

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. The final result should look something like the screen below with the Annual Hours, Pay Rate, Calculate Salary button, and result.

Once you have verified that your project works, save your project, zip all files, and submit in the Dropbox.

NOTE: Please download and review the Doc Sharing files Web Lab and Citrix.zip, which contain information on how to FTP to the DeVry University website and how to use Citrix for the assignments.