1. Copyright © 2012 Accenture All Rights Reserved.Copyright © 2012 Accenture All Rights Reserved. Accenture, its logo, and High Performance Delivered are trademarks of Accenture. Application Delivery Fundamentals 2.0: Java Module 23: Web-Based Programming

2. Copyright © 2012 Accenture All Rights Reserved. Module Objectives (1 of 2) Explain the function and benefits of software development build tools. Understand the features for each of the main technologies used in the development of the web-based Graphic User Interface (GUI) –Hyper Text Markup Language (HTML) –Cascading Style Sheets (CSS) –JavaScript (JS) At the end of this module, you will be able to: 2

3. Copyright © 2012 Accenture All Rights Reserved. Module Objectives (2 of 2) Understand the common communication protocols – HTTP and HTTPS. Distinguish between the GET Method and POST Method in HTTP. List major features of Web Application Technologies. Apply HTML to create a Web page. Apply JavaScript in a Web page. Apply Cascading Style Sheets in a Web page. 3

4. Copyright © 2012 Accenture All Rights Reserved. Agenda This module covers the following topics: Activity 1: Web-based Application Programming Tools in Software Development Web-based GUI Application Technology Features HTML HTTP Web Page Construction Summary 4

5. Copyright © 2012 Accenture All Rights Reserved. Activity 1: Web-Based Application Programming Objective: In this individual activity you are expected to enhance your investigative skills to learn more about the following technologies: XML, HTML, JavaScript, CSS, HTTP and HTTPS. Instructions: Navigate to the Module 23, Activity 1 page on the course web site. Launch the activity template. Follow the instructions provided on the web page in order to complete the activity. 5

6. Copyright © 2012 Accenture All Rights Reserved. Tools for Web-Based Application Development Software tools are used to speed up processes and perform those processes more efficiently. Their key features are: AutomationBetter qualityProductivity improvementStandardization 6

7. Copyright © 2012 Accenture All Rights Reserved. [Portrait image size: 10.03cm x 6.67cm, position: 17.5cm x 5.41cm] Web-based GUI Application Technology Features HTML Features HTML Hyper Text Markup Language Simple syntax Easy to learn Free Very similar to eXtended Markup Language (XML) syntax Supported on most, if not all, web browsers 7

8. Copyright © 2012 Accenture All Rights Reserved. [Portrait image size: 10.03cm x 6.67cm, position: 17.5cm x 5.41cm] Web-based GUI Application Technology Features JavaScript Features JavaScript Simple syntax More dynamic HTML pages Lightest programming language Detects client browser Validates client level data 8

9. Copyright © 2012 Accenture All Rights Reserved. [Portrait image size: 10.03cm x 6.67cm, position: 17.5cm x 5.41cm] Web-based GUI Application Technology Features Style Sheet Features Style Sheet Formatting language Multiple pages use the same style Separation of content from style and layout Easier layout changes Smaller HTML pages Consistent layout 9

10. Copyright © 2012 Accenture All Rights Reserved. Hyper Text Markup Language (HTML) Overview HTML Describes: –What content should be provided in a webpage –How the content should be presented Numerous tags Hundreds of tag attributes 10

11. Copyright © 2012 Accenture All Rights Reserved. HTML Basic HTML Tags TagDescription Comment Anchor – usually for putting in a hyperlink Align the contents left, right, centred or justified Define the boundaries of the document’s body Line break Defines a form (that usually provides input fields) The first level heading Defines the boundaries of the document’s header Defines the boundaries of the document Defines an input form New paragraph The HTML document’s title 11

12. Copyright © 2012 Accenture All Rights Reserved. HTML Basic Tags: Example Login Login Page Password: 12

13. Copyright © 2012 Accenture All Rights Reserved. HTML Basic Tags: Browser Display 13

14. Copyright © 2012 Accenture All Rights Reserved. Build An HTML Page: See It Demonstration: Faculty will demonstrate how to create an HTML page to build a student registration form. Time Allocated: 10 minutes Environment or File: HTMLDemo.html Steps: 1.Open the project Week1n2Codebase_participant in Eclipse 2.Go to the src folder 3.Go to com.accenture.adf.newcodington.module23.sample 4.Open the file HTMLDemo.html available in the package 5.Write code that will accept inputs for the Student Id, Student Name and Course Id. 6.Create a Submit button in the form. 7.Save your file 8.Open the HTML file using your web browser to view the results. 14

15. Copyright © 2012 Accenture All Rights Reserved. Build An HTML Page: Try It Now You Try It: Create an HTML page to be used as an Employee Registration System. Time Allocated: 20 minutes Environment or File: HTMLTryIt.html Steps: 1.Open the project Week1n2Codebase_participant in Eclipse 2.Go to the src folder 3.Open the HTMLTryIt.html file available in the package com.accenture.adf.newcodington.module23.sample. 4.Go to the TODO section of the file – this is where your code will be inserted. 5.Create code that will accepts inputs for the Employee Id, Employee Name and Department Id. 6.Test your code to ensure that it works as expected. 8.Save your file. 9.Open the HTML file using your web browser to view the results. 15

16. Copyright © 2012 Accenture All Rights Reserved. Build An HTML Page: Solution (1 of 2) Your faculty will now provide you with the Solution to check and update your file. Insert title here Employee Registration System Employee Registration Form Enter Employee Id 16

17. Copyright © 2012 Accenture All Rights Reserved. Build An HTML Page: Solution (2 of 2) Your code should look something like this: Enter Employee Name Enter Department Id 17

18. Copyright © 2012 Accenture All Rights Reserved. Hyper Text Transfer Protocol (HTTP) Overview (1 of 2) Hyper Text Transfer Protocol Network protocol Deliver/access World Wide Web data and files Easily transfers readable data Web page URL: ‘http://’ HTTP Hyper Text Transfer Protocol Secure Combination of HTTP and Secure Socket Layer (SSL) TCI/IP protocol used by Web servers Allows the transfer of encrypted data Web page URL: ‘https://’ (lock icon) HTTPS 18

19. Copyright © 2012 Accenture All Rights Reserved. HTTP Overview (2 of 2) Key elements: http method (the action to be performed) The page to access (URL) From parameters (likes arguments) – NOT REQUIRED Key elements: A status code (for whether the request was successful) Content-type (text, picture, HTML, etc.) The content (the actual HTML, images etc.) 19

20. Copyright © 2012 Accenture All Rights Reserved. Post Delete Trace Get Options Head Put Connect HTTP Methods 20

21. Copyright © 2012 Accenture All Rights Reserved. HTTP Request The method name tells the server: Request type Message format 21

22. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction Cascading Style Sheets (CSS) (1 of 2) Cascading Style Sheets Style sheet language –Stored as CSS files Page presentation –Defines HTML element display Colors Fonts Layout Other aspects Supports all XML document types 22

23. Copyright © 2012 Accenture All Rights Reserved. Enables Improves Provides Reduces the separation of content from presentation. content accessibility. more flexibility and control. complexity and repetition. Web Page Construction Cascading Style Sheets (CSS) (2 of 2) 23

24. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction HTML: No Cascading Style Sheets Starbuzz Coffee <body style="background-color:#d2b48c; margin-left: 20%; margin-right:20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif;"> Starbuzz Coffee Beverages House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. Mocha Cafe Latte, $2.35 Expresso, steamed milk and chocolate syrup. Cappuccino, $1.89 A mixture of expresso, steamed milk and foam. Chai Tea, $1.85 A spicy drink made with black tea, spices, milk and honey. 24

25. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction Cascading Style Sheets: Example body { background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; } h1 { font-style: italic;} #mybtn { color: red; font-weight: bold; background-color: blue; } 25

26. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction HTML: Cascading Style Sheets Starbuzz Coffee Starbuzz Coffee Beverages House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. Mocha Cafe Latte, $2.35 Expresso, steamed milk and chocolate syrup. Cappuccino, $1.89 A mixture of expresso, steamed milk and foam. Chai Tea, $1.85 A spicy drink made with black tea, spices, milk and honey. 26

27. Copyright © 2012 Accenture All Rights Reserved. Adding CSS: See It Demonstration: Faculty will demonstrate how to add CSS code to the previous HTML page to add color, change margins and fonts. Time Allocated: 10 minutes Environment or File: CSSDemo.css and HTMLDemo.html Steps: 1.Open the CSSDemo.css file available in the package com.accenture.adf.newcodington.module23.sample. 2.Follow the instructions in the CSS file for each TODO to format your previously-created HTML page a.Add CSS to set background color to hex #d2b48c b.Change the margin sizes to 20% c.Set Fonts as instructed in the annotated code notes 3.Save your file 4.Open the HTMLDemo.html file using your web browser to view the impact of the CSS file. 27

28. Copyright © 2012 Accenture All Rights Reserved. Adding CSS: Try It Now You Try It: Add CSS code to your previous HTML page to add color and change margins and fonts. Time Allocated: 20 minutes Environment or File: CSSTryIt.css and HTMLTryIt.html Steps: 1.Open the CSSTryIt.css file available in the package com.accenture.adf.newcodington.module23.sample. 2.Follow the instructions in the CSS file for each TODO to format your previously-created HTML page a.Add CSS to set background color to hex #00fff0 b.Change the margin sizes to 20% c.Set all other styles as indicated in the annotated TODOs 3.Save your file 4.Open the HTMLTryIt.html file using your web browser to view the impact of the CSS file. 28

29. Copyright © 2012 Accenture All Rights Reserved. Adding CSS: Solution Your faculty will now provide you with the Solution to check and update your file. body { background-color: #00fff0; color: brown; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding: 10px 10px 10px 10px; font-family: sans-serif; } h1 { font-style: italic; color:green; } #mybtn { color: white; background-color: #000fff; font-style: bold; } 29

30. Copyright © 2012 Accenture All Rights Reserved. JavaScript Scripting language –Interpreted Client side web development –HTML page interactivity –Directly embedded into HTML pages ECMAScript standard Web Page Construction JavaScript Features (1 of 2) 30

31. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript Features (2 of 2) HTML Example......... </script In the Header In the Body 31

32. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript: Dynamic Programming Data Types are associated with the data values of the variable, not necessarily how the variable was initially declared. A variable may be bound to a number then rebound to a string. var myName = “John” var myCounter; myCounter = 20; myCounter = myCounter + “1”; //Result “201” myCounter = parseInt(myCounter) + 10 + “.2”; //Result “212.2” myCounter = parseFloat(myCounter) ; //Result 212.2 Declare variable 32

33. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript: Structured Programming if statement switch statement while loop for loop JavaScript supports: 33

34. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript: if statement if (condition) { code to be executed if true } else { code to be executed if false } 34

35. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript: switch statement switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 } 35

36. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript: for and while loops for ( i=initvalue; i<=maxvalue; i=i+increment) { code to be executed } while (variable <= endvalue) { code to be executed } 36

37. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript: Objects Array Multiple value storage via a single variable String Stored text manipulation Boolean Non-Boolean to Boolean conversion Date Date and time manipulation Math Mathematical task performance RegExp Search argument specification 37

38. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript: Functions Functions Executed by an event or a call to the function –Are objects –Have properties Support –New function construction during program execution –Storage in data structures –Passing as arguments to other functions –Returning as values of other functions 38

39. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript: Simple Function Example Simple Function function greetings() { alert("Hello !!!"); }.... function onload Event 39

40. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction JavaScript file function sum(){ document.forms.calc.result.value = parseInt(document.forms.calc.number2.value)+ parseInt(document.forms.calc.number1.value); } /** * Internet Explorer Only */ function numberOnly(){ if ((event.keyCode 57)) event.returnValue= false; } 40

41. Copyright © 2012 Accenture All Rights Reserved. Web Page Construction HTML / JavaScript file Calculator + = 41

42. Copyright © 2012 Accenture All Rights Reserved. Adding JavaScript: See It Demonstration: Faculty will demonstrate how to add JavaScript to the previous HTML page to respond to the submit request. Time Allocated: 5 minutes Environment or File: DemoJs.js and HTMLDemo.html Steps: 1.Open the DemoJS.js file available in the package com.accenture.adf.newcodington.module23.sample. 2.Create JavaScript that will display a message to indicate that the student has been registered. 3.Save your file. 4.Open the HTMLDemo.html file using your web browser to view the impact of the JavaScript file. 42

43. Copyright © 2012 Accenture All Rights Reserved. Adding JavaScript: Try It Now You Try It: Add JavaScript to your previous HTML page to ensure that the Employee Id and Name fields are not empty. Time Allocated: 10 minutes Environment or File: TryJs.js and HTMLTryIt.html Steps: 1.Open the TryJs.js file available in the package com.accenture.adf.newcodington.module23.sample. 2.Create JavaScript to ensure the Employee Id and Employee Name fields are not empty. 3.Save your file 4.Open the HTMLTryIt.html file using Web Browser to view the impact of the JavaScript file. 43

44. Copyright © 2012 Accenture All Rights Reserved. Adding JavaScript: Solution Your faculty will now provide you with the Solution to check and update your file. function validateForm() { var eid = document.getElementById("eid").value; var ename = document.getElementById("ename").value; if (eid.length == 0) { alert("Enter employee id"); } else if (ename.length == 0) { alert("Enter your name") } else { alert("Registering " + ename + "...") } 44

45. Copyright © 2012 Accenture All Rights Reserved. Questions and Comments 45

46. Copyright © 2012 Accenture All Rights Reserved. Summary Technologies such as HTML, CSS, and JavaScript assist in the development of the GUI. HTTP and HTTPS provide the main internet communication protocols when requesting and receiving information from a web server. The key points from this module are: 46