Cis407 a ilab 2 web application development devry university

Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. CIS407A iLab 2 Web ApplicationDevelopment Devry UniversityClick this link to get the tutorial: 2 of 7: User Input Web PagesSubmit your assignment to the Dropbox located on the silver tab at the top of this page.(See Syllabus "Due Dates for Assignments & Exams" for due dates.)iLABOVERVIEWScenario/SummaryIn this lab, we will demonstrate how to create an ASP.NET web application having a single formwith five text boxes and a Submit button. We will use the form to send information to a secondform where data from the first form will be displayed. We will also add a main navigation pagewith 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.DeliverablesAll 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 tothe different parts of the website you are developing. You will be able to go to the annual salarycalculator we added last week and to the data entry form for personnel this week. When you go
  • 2. to the personnel data entry page you should be able to enter data in the frmPersonnel form andhave it displayed in the frmPersonnelVerified form. Your salary calculator will also be availablefrom the main page and will calculate properly when you enter data. Each page should link backto the main page via the CoolBiz logo hyperlink. Once you have verified it works, save yourwebsite, zip up all files, and submit in the Dropbox. Each page (except frmMain) will include theCoolBiz logo that is hyperlinked back to frmMain.iLABSTEPSSTEP 1: frmPersonnel (10 points) Open the payroll system website from Lab 1. Create a new form called frmPersonnel. To dothis, pull down the website menu, select "Add New Item," then type frmPersonnel.aspx for thename.Click on image to enlarge.AddPersonnel FormClick here for text description of this image. Go to the Design mode of the form by clicking theDesign tab (as opposed to the Source tab). Copy/paste this text for the CoolBizProductions, Inc.logo onto the form at the very top. Set the alignment to center by highlighting the text thenclicking Format, Justify, Center. You can switch to Source view and add the following HTML tocreate the logo:<font ><strong><font >Cool</font><font >Biz</font><font > <font >Productions</font>,Inc.</font></strong> </font>From the ToolBox, drag-and-drop a Panel control underneath the logo text. Click the A/Z buttonin the Properties dialog so that all the properties are sorted alphabetically. Change the heightproperty of the Panel to 250px and the width to 300px. To do this, select the Panel, then go to theProperties pane (usually in the lower right corner of the Visual Studio.NET Design view; if youdont see it, click View Properties Window OR press the F4 key). Scroll down the list, then typethe value in for each property. Change the panels HorizontalAlign property to left. Save yourwork! From the ToolBox, drag-and-drop five Labels and five TextBoxes onto the Panel. Tomake each Label/TextBox pair appear on a separate line, put the cursor after each TextBox thenpress the [ENTER] key (much like you would with a word processing program). From theToolBox, drag-and-drop two buttons onto the Panel below the last Label and TextBox. Save yourwork!
  • 3. Click on image to enlarge.Unfinished Personnel FormClick here for text description of this image. Test your web page. Press F5, or click the StartDebugging (Citrix users, press "Start Without Debugging") button on the toolbar, or pull downthe Debug menu and select Start Debugging.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 astandalone version, press F5 to Start with Debugging, or you can press CTRL + F5 to StartWithout Debugging Rename the Labels properties as defined below. You can do this byselecting each Label, scrolling to the property, and then typing in the value.PropertyValueLabel1 – TextFirst Name:Label2 – TextLast Name:Label3 – TextPay Rate:Label4 – TextStart Date:Label5 – TextEnd Date:Rename each TextBoxs property as defined below. You can do this by selecting each TextBox,scrolling to the property, and then typing in the value.PropertyValue
  • 4. TextBox1 – (ID)txtFirstNameTextBox2 – (ID)txtLastNameTextBox3 – (ID)txtPayRateTextBox4 – (ID)txtStartDateTextBox5 – (ID)txtEndDateClick on image to enlarge.Changing Text Box IDClick here for text description of this image. Change each buttons ID and Text properties asdefined below. You can do this by selecting each button, scrolling to the property, and thentyping in the value.PropertyValueButton1 – (ID)btnSubmitButton1 – TextSubmitButton2 – (ID)
  • 5. btnCancelButton2 – TextCancelIn order to format the TextBoxes and Labels, we will make them the same size. Bring up theLayout Toolbar by clicking View, Toolbars, Layout. Highlight each Label by pressing andholding the keyboard Ctrl button and then clicking each Label. Make sure you click on thelongest Label last. Click the icon "Make Same Width" on the Layout Toolbar. (You may alsoselect Format and then Make Same Size and then select width). Save your work! Test your workby running it (press F5 or click the Start Debugging button, or click Debug, Start Debugging).STEP 2: frmPersonalVerified (5 points) Create a new web form called frmPersonalVerified.aspx Click the Design tab for thefrmPersonalVerified.aspx and add a Label and a TextBox. Set the properties as follows:PropertyValueLabel – TextInformation to submitTextbox – (ID)txtVerifiedInfoTextbox – Height80pxTextbox – Width400pxTextbox – TextModeMultilineDouble-click anywhere on a blank part of the web page to open the code portion. The cursorshould be in the protected void Page_Load (object sender, EventArgs) function. Enter thefollowing information:
  • 6. //Add your comments here["txtFirstName"] +"n" + Request["txtLastName"] +"n" + Request["txtPayRate"] +"n" + Request["txtStartDate"] +"n" + Request["txtEndDate"];Return to the frmPersonnel web page, click the btnSubmit button, go to the PostBackUrlproperty, and set it to frmPersonalVerified.aspx. To do this, you can click the ellipse to the rightof this property to open a Browse dialog and click frmPersonalVerified.aspx there. This willinsert the correct path into the PostBackUrl property.STEP 3: Adding Navigation (5 points) Create a folder in Solution Explorer called images. Add a new web form called frmMain. Addthe CoolBiz Logo to the top of the form (centered). Create links using a link button for each ofthe following items.Salary CalculatorAdd New Employee Create or find appropriate images for the Salary Calculator and NewEmployee links. Copy the images to the images folder created above. Add the images to theimages folder by right-clicking on the images folder in Solution Explorer and selecting AddExisting Items. Select both images and Add to the images folder. Next to each link item, add animage button. Set each image buttons image to the appropriate image in the images folder. Youmay work with the format to make this page look nice by using tables or other HTML/CSSelements. Set the PostbackURL property to the appropriate page for each image and each link.On the frmPersonnel page, make the CoolBiz logo be a link that will take the user to thefrmMain page. Use an ASP.Net Hyperlink control to do this. Update the frmPersonnel,frmPersonnelVerified, and frmSalaryCalculator to include the CoolBiz logo at the top of eachpage (centered) with the logo set as a hyperlink that will return to the frmMain page. On thefrmPersonnel page, make it so that if the user presses the Cancel button then that user is takenback to the frmMain.STEP 4: Verify and Submit (10 points) Save your work. Set the start page to frmMain and run the project. You should be able to go toboth areas of your site and enter the information in the pages. Your calculator should properlycalculate without errors, and then on the frmPersonel web page you can click the Submit buttonand 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 itfunctions.):frmMain:
  • 7. frmSalaryCalculator:frmPersonnel:frmPersonnelVerified:All Forms:NOTE: Make sure you include comments in the C# code where specified (where the "//Yourcomments here" is mentioned), or else a 5 point deduction per item (form, class, function) will bemade. This includes code you will be creating in the coming weeks. To comment on the codeyou basically put two forward slashes to start the comment; anything after the slashes on that lineis disregarded by the compiler. Then type a brief statement on what is happening in the lineunder it. Comments show professionalism and are a must in systems. As a professionaldeveloper, comments will set you apart from others and make your life much easier ifmaintenance and debugging are needed.