CIS407 Ilab1

1. Open Microsoft Visual Studio..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure1.jpg” alt=”Image of main screen”>2. Create a new ASP.NET website called “PayrollSystem.”To do this, select File -> New-> Web Site.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure2.jpg” alt=”Image of navigation to new website option”>You will get the following screen which shows Visual Basic..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure3.jpg” alt=”Image of visual basic screen new web site menu”>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..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure4.jpg” alt=”image of new website screen with visual c# selected”>Click Browse at the bottom of the screen to change Web Location, if necessary to get the screen below..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure5.jpg” alt=”image of new web location”>Notice that my Web Locationis now different.Select ASP.NET Empty project and click OK to get the screen below..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure6.jpg” alt=”image of empty project screen”>Right-click on the project name from Solution Explorer, then select Add->Add New Item to get the following screen..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure7.jpg” alt=”Image of add new item navigation screen”>.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure8.jpg” alt=”Image of new item screen”>Select Web Form, accept Default.aspx file, and click Add to get:.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure9.jpg” alt=”Image of default code screen”>Click Design at the bottom left-hand of the window to show the following:.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure10.jpg” alt=”Image of design view screen”>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..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure11.jpg” alt=”Image of design view screeen with test”>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!
.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/CIS407A_W1_iLab.html#top”>Back to Top

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..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure12.jpg” alt=”Image of debugging screen”>Save and run by Right-Click-> Run from Browser..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure13.jpg” alt=”Image of menu option for debugging”>Press Yes..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure14.jpg” alt=”Image of message to save file”>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.”.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure15.jpg” alt=”Image of blank debugging screen”>.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure16.jpg” alt=”Image of start debugging option selected”>.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure17.jpg” alt=”Image of debugging not enabled message”>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..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure18.jpg” alt=”Image of output screen”>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 Form1. Right click on the Project name. Choose Add, then Select Web Form to get the screen below..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure19.jpg” alt=”Image of add web form menu”>And you get the Add New Item screen, shown below..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure23.jpg” alt=”Image of result add new item screen”>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..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure25.jpg” alt=”Image of toolbox option selected”>.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure26.jpg” alt=”Image of toolbox menu”>3. You can choose to adjust the ToolBox to tab with Solution Explorer to look like the following screen..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure28.jpg” alt=”Image of blank screen when toolbox to tab is adjusted”>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..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure29.jpg” alt=”Image of calculator screen with labels and button”>4. If necessary, add the Property Window as shown in the screen below, using View->Properties Window..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure30.jpg” alt=”Image of property 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 txtCalculateSalary.Your form should now look like the screen displayed below..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure33.jpg” alt=”Image of calculator screen with blank values”>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 txtPayRate 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 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 buttonprotectedvoid btnRoomCalculator_Click(object sender,EventArgs e)
{
//Declare variables to be used to extract data and perform calculations.
double length=0.0; //Will hold the numeric value of length from text box
double width=0.0; //Will hold the numeric value of width from text box
double area=0.0; //Will hold the calculated value of area
double perimeter=0.0;//Will hold the calculated value of the perimeter
double diagonal=0.0; //Will hold the calculated value of the diagonal
double cost=0.0; //Will hold the calculated value of cost for the room
double costPerSquareUnit=15.0; //Will hold the numeric value of cost per unit text box.
//Extract values from the texboxes
length=Double.Parse(txtLength.Text);
width=Double.Parse(txtWidth.Text);
costPerSquareUnit=Double.Parse(txtCostPerSquareUnit.Text);
//Perform calculations using the numeric variables, which now hold values from text boxes.
area= length* width;
perimeter=2.0*(length+ width);
diagonal=Math.Sqrt(length* length+ width* width);
cost= area* costPerSquareUnit;
//Display results by assigning values to labels on the form.
lblArea.Text=”Area of the Room: “+ area.ToString(“N”); //N – Formats the number.
lblPerimeter.Text=”Perimeter of the Room: “+ perimeter.ToString(“N”);//N – Formats the number.
lblDiagonal.Text=”Diagonal of the Room: “+ diagonal.ToString(“N”);//N – Formats the number.
lblDiagonal.Text=” Cost of the Room: “+ cost.ToString(“C”); //C – Formats for currency.
} 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..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure24.jpg” alt=”Image of output costofroom calculator with length, width, cost per square unit values and calculations.”>Use small values for length and width. Use large values for length and width and see the formatting of the output..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure27.jpg” alt=”Image of costofroom calculator with revised values for length, width, cost per square unit and calculations.”>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:.equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure34.jpg” alt=””>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..equella.ecollege.com/file/2320fee7-8544-44e6-8059-16c792d4cff7/57/Week1_Lab_Figure36.jpg” alt=”Image of result screen 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.