![3. 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. You can switch to Source
view and add the following HTML to create the logo:
<font color=”black” size=”2″><strong><font color=”blue” face=”Comic Sans MS”
size=”4″>Cool</font><font color=”#ff6600″ face=”Comic Sans MS” size=”4″>Biz</font><font
face=”Comic Sans MS” size=”4″> <font color=”#993366″>Productions</font>,
Inc.</font></strong> </font>
1. From the ToolBox, drag-and-drop a Panel control underneath the logo text.
2. Click the A/Z button in the Properties dialog so that all the properties are sorted alphabetically.
1. 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.
2. Change the panel’s HorizontalAlign property to left.
3. Save your work!
4. 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).
5. From the ToolBox, drag-and-drop two buttons onto the Panel below the last Label and TextBox.
6. Save your work!
Click on image to enlarge.
Unfinished Personnel Form
1. Click here for text description of this image.
2.
3. 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.
NOTE: To execute the application, you have these options:
1. If you are using Citrix, press CTRL + F5 to Start Without Debugging. You will not be deducted points for this
part.
2. If you are using a standalone version, press F5 to Start with Debugging, or you can press CTRL + F5 to
Start Without Debugging
Rename the Label’s properties as defined below. You can do this by selecting each Label, scrolling to the
property, and then typing in the value.
Property Value
Label1 – Text First Name:
Label2 – Text Last Name:](https://image.slidesharecdn.com/cis407ilab2of7-130502143946-phpapp02/85/Cis-407-i-lab-2-of-7-2-320.jpg)
![1. Create a new web form called frmPersonalVerified.aspx
2. 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
1. 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:
//Add your comments here
txtVerifiedInfo.Text = Request["txtFirstName"] +
“n” + Request["txtLastName"] +
“n” + Request["txtPayRate"] +
“n” + Request["txtStartDate"] +
“n” + Request["txtEndDate"];
1. 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: Adding Navigation (5 points)
1. Create a folder in Solution Explorer called images.
2. Add a new web form called frmMain.
1. Add the CoolBiz Logo to the top of the form (centered).
2. Create links using a link button for each of the following items.Salary Calculator
Add New Employee
3. Create or find appropriate images for the Salary Calculator and New Employee links. Copy the images to the
images folder created above.
4. Add the images to the images folder by right-clicking on the images folder in Solution Explorer and selecting
Add Existing Items. Select both images and Add to the images folder.
5. Next to each link item, add an image button.
6. Set each image button’s image to the appropriate image in the images folder.
7. You may work with the format to make this page look nice by using tables or other HTML/CSS elements.
8. Set the PostbackURL property to the appropriate page for each image and each link.
1. On the frmPersonnel page, make the CoolBiz logo be a link that will take the user to the frmMain page. Use
an ASP.Net Hyperlink control to do this.](https://image.slidesharecdn.com/cis407ilab2of7-130502143946-phpapp02/85/Cis-407-i-lab-2-of-7-4-320.jpg)
Cis 407 i lab 2 of 7
- 1. HELPIDO.COM CLICK HERE TO GET THE SOLUTION !!!!!! CIS 407 A – ILAB 2 OF 7 Scenario/Summary 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. We will also add a main navigation page with two different ways of linking to other pages. Instructions for Week 2 iLab: User Input Web PagesClick on the link above to view the tutorial.Please watch this tutorial before beginning the iLab. The tutorial has audio. Deliverables All files are located in the subdirectory of the website. The website should function as follows: When you run the website, you will be presented with a page (frmMain) that allows you to go to the different parts of the website you are developing. You will be able to go to the annual salary calculator we added last week and to the data entry form for personnel this week. When you go to the personnel data entry page you should be able to enter data in the frmPersonnel form and have it displayed in the frmPersonnelVerified form. Your salary calculator will also be available from the main page and will calculate properly when you enter data. Each page should link back to the main page via the CoolBiz logo hyperlink. Once you have verified it works, save your website, zip up all files, and submit in the Dropbox. Each page (except frmMain) will include the CoolBiz logo that is hyperlinked back to frmMain. i L A B S T E P S STEP 1: frmPersonnel (10 points) 1. Open the payroll system 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. AddPersonnel Form 1. Click here for text description of this image. 2. Go to the Design mode of the form by clicking the Design tab (as opposed to the Source tab).
- 2. 3. 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. You can switch to Source view and add the following HTML to create the logo: <font color=”black” size=”2″><strong><font color=”blue” face=”Comic Sans MS” size=”4″>Cool</font><font color=”#ff6600″ face=”Comic Sans MS” size=”4″>Biz</font><font face=”Comic Sans MS” size=”4″> <font color=”#993366″>Productions</font>, Inc.</font></strong> </font> 1. From the ToolBox, drag-and-drop a Panel control underneath the logo text. 2. Click the A/Z button in the Properties dialog so that all the properties are sorted alphabetically. 1. 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. 2. Change the panel’s HorizontalAlign property to left. 3. Save your work! 4. 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). 5. From the ToolBox, drag-and-drop two buttons onto the Panel below the last Label and TextBox. 6. Save your work! Click on image to enlarge. Unfinished Personnel Form 1. Click here for text description of this image. 2. 3. 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. NOTE: To execute the application, you have these options: 1. If you are using Citrix, press CTRL + F5 to Start Without Debugging. You will not be deducted points for this part. 2. If you are using a standalone version, press F5 to Start with Debugging, or you can press CTRL + F5 to Start Without Debugging Rename the Label’s properties as defined below. You can do this by selecting each Label, scrolling to the property, and then typing in the value. Property Value Label1 – Text First Name: Label2 – Text Last Name:
- 3. Label3 – Text Pay Rate: Label4 – Text Start Date: Label5 – Text End Date: 1. Rename each TextBox’s property as defined below. You can do this by selecting each TextBox, scrolling to the property, and then typing in the value. Property Value TextBox1 – (ID) txtFirstName TextBox2 – (ID) txtLastName TextBox3 – (ID) txtPayRate TextBox4 – (ID) txtStartDate TextBox5 – (ID) txtEndDate 1. Click on image to enlarge. Changing Text Box ID 1. Click here for text description of this image. 2. Change each button’s ID and Text properties as defined below. You can do this by selecting each button, scrolling to the property, and then typing in the value. Property Value Button1 – (ID) btnSubmit Button1 – Text Submit Button2 – (ID) btnCancel Button2 – Text Cancel 1. 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. 2. Highlight each Label by pressing and holding the keyboard Ctrl button and then clicking each Label. Make sure you click on the longest Label last. 3. Click the icon “Make Same Width” on the Layout Toolbar. (You may also select Format and then Make Same Size and then select width). 1. Save your work! 2. Test your work by running it (press F5 or click the Start Debugging button, or click Debug, Start Debugging). STEP 2: frmPersonalVerified (5 points)
- 4. 1. Create a new web form called frmPersonalVerified.aspx 2. 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 1. 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: //Add your comments here txtVerifiedInfo.Text = Request["txtFirstName"] + “n” + Request["txtLastName"] + “n” + Request["txtPayRate"] + “n” + Request["txtStartDate"] + “n” + Request["txtEndDate"]; 1. 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: Adding Navigation (5 points) 1. Create a folder in Solution Explorer called images. 2. Add a new web form called frmMain. 1. Add the CoolBiz Logo to the top of the form (centered). 2. Create links using a link button for each of the following items.Salary Calculator Add New Employee 3. Create or find appropriate images for the Salary Calculator and New Employee links. Copy the images to the images folder created above. 4. Add the images to the images folder by right-clicking on the images folder in Solution Explorer and selecting Add Existing Items. Select both images and Add to the images folder. 5. Next to each link item, add an image button. 6. Set each image button’s image to the appropriate image in the images folder. 7. You may work with the format to make this page look nice by using tables or other HTML/CSS elements. 8. Set the PostbackURL property to the appropriate page for each image and each link. 1. On the frmPersonnel page, make the CoolBiz logo be a link that will take the user to the frmMain page. Use an ASP.Net Hyperlink control to do this.
- 5. 2. Update the frmPersonnel, frmPersonnelVerified, and frmSalaryCalculator to include the CoolBiz logo at the top of each page (centered) with the logo set as a hyperlink that will return to the frmMain page. 3. On the frmPersonnel page, make it so that if the user presses the Cancel button then that user is taken back to the frmMain. STEP 4: Verify and Submit (10 points) 1. Save your work. Set the start page to frmMain and run the project. You should be able to go to both areas of your site and enter the information in the pages. Your calculator should properly calculate without errors, and then on the frmPersonel web page you can click the Submit button and have it display in the frmPersonalVerified web page. Once you have verified that it works, save your project, zip up all files, and submit in the Dropbox. Here are screen shots (Note: Your frmMain does not have to look exactly like this, as long as it functions.): frmMain: frmSalaryCalculator: frmPersonnel: frmPersonnelVerified: All Forms: NOTE: Make sure you include comments in the C# code where specified (where the “//Your comments here” is mentioned), or else a 5 point deduction per item (form, class, function) will be made. This includes code you will be creating in the coming weeks. To comment on the code 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 HERE TO GET THE SOLUTION !!!!!!