Presentation is loading. Please wait.

Presentation is loading. Please wait.

DEV034 -Web Applications, Introduction Speakers name C&W Date.

Similar presentations


Presentation on theme: "DEV034 -Web Applications, Introduction Speakers name C&W Date."— Presentation transcript:

1 DEV034 -Web Applications, Introduction Speakers name C&W Date

2 - 2 - Objective of the training This course will give you an overview of web technologies. After this training, you should  Have the capacity to understand the main components of a web application.  Have to background necessary to follow more specialized training or to learn by yourself specific subjects in the domain of web applications (J2EE/PHP web applications/…).

3 - 3 - Schedule of the day Schedule  09:00 – 10:45 : Training Session  10:45 – 11:00 Break  11:00 – 12:30 Training Session  12:30 – 13:30 Lunch  13:30 – 15:15 Training Session  15:15 – 15:30 Break  15:30 – 17:00 Training Session

4 - 4 - Methods and tools Training session  Teaching from PPT.  Examples and stories  Exercises  Open discussion

5 - 5 - Methods and tools The objectives of the training is to give you an overview of standards, principles and techniques in the domain of web applications.

6 - 6 - Agenda First day : Introduction Theory : HTTP, XML, HTML, CSS, … Demonstrations Exercises Second day: Reminder Theory : server side techniques, web services, security, … Demonstrations Exercises

7 - 7 - Why this training session? This training session is a part of the skills training program. It‘s a pre-requisite to obtain more specialized skills: development of web applications with PHP or with Java J2EE.

8 Web Applications Global scheme of our presentation. Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

9 - 9 - Introduction - What is a web application? Web application Client-sideserver-side Client application Generic server My web application protocol Stored data

10 Introduction – Application tiers: client / server, n-tiers applications Fat Client Light Client UI Layer Business Layer Data Layer Server side Client side Business Data Client interface

11 Introduction – classic dialog between the web-client and the server Web browser URL The classical exchange between a web client (web browser) and a web-server HTTP server http get http answer & html page Tcp/ip The user clicks on a hyperlink (or type the URL), the browser send an HTTP get message. The message is transferred on a TCP/IP channel. The server treats the request and returns an html page embedded into an HTTP answer. The answer may consist of different content than an HTTP page (for example, an image). The “content type” is specified with a value defined by the MIME standard.

12 Web Applications Global scheme of our presentation. Introduction Communication between client & server Client-side Server-side Web-services & SOA RSS Security & Authentication

13 Communication & common standards We will introduce here some subjects concerning as well the client- side than the server side. TCP/IP : communication channel for HTTP messages HTTP : basic dialogs between the client and the server Mime : definition of content-types URL : mean to address web resources

14 TCP/IP Transport Communication Protocol / Internet Protocol Communication point to point in connected mode at least during a request/answer exchange. Each extremity is addressed via an IP address and a port number.

15 HTTP An HTTP channel links two programs through internet (or an intranet) for simple request/answer dialogues. HTTP messages are transferred as well for the request (from the client to the server) than for the answer (from the server to the client). Client applicationHTTP server http action http answer Resource (HTML page, image, …)‏

16 HTTP - message. An HTTP message is composed of a start line : an action (for a request) or a status (for an answer), a message header a blank line to separate the header from the body an optional message body. The message header is composed of couple of fields and value, following the template : : The length, the type, the encoding of the content of the message body are given by the value of specific header fields. For a full description see

17 HTTP - actions. HTTP has few actions (HTTP Methods): GET : get a resource (=> display an HTML page, download a file, execute a script producing an HTML page). Usable to submit a form but all input fields are transferred as arguments in the URL. POST : post the submission of a form; the input fields are transferred as content of the HTTP message. PUT : transfer a local resource to the host machine(upload); this is seldom allowed. HEAD : get information on a resource DELETE : delete a resource on the host machine; this is seldom allowed. TRACE : trace the network path to reach a resource.

18 HTTP – answer status In the start line of an answer, the server put a status. Most used status are: 200 : OK 301 : Moved Permanently 307 : Moved Temporarily 401 : Unauthorized 404 : Not found 500 : Internal error

19 HTTP header The header of an HTTP message may contain different types of variables: General variables Specific variables for requests Specific variables for answers Attributes of the body

20 HTTP header – General variables  Cache specifications (no-cache, no-store, max-age, …)‏  Connection specification (close/keep-alive)‏  Directives for proxies and authentication servers  Transfer encoding  …

21 HTTP header - Specific variables for requests  Acceptable media types  Acceptable char-set  Authorization (schema, user, password)‏  Cookie  Conditions to get the resource (IF-Modified-Since, IF-Unmodified- Since, …)‏  Referrer  User-Agent (client program)‏  …

22 HTTP header - Specific variables for answers  Location  Age  Set-Cookie  WWW-Authenticate  …

23 HTTP header - Attributes of the body  Content encoding  Content-Length  Content-Location  Content-Type  Expiration date  Last modification date  …

24 HTTP – example of GET call from an URL and answer Call: GET /cgi-bin/displayCurrentDate.pl HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/x- shockwave-flash, */* Accept-Language: fr UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1;.NET CLR ; Media Center PC 5.0;.NET CLR )‏ Host: localhost:8080 Connection: Keep-Alive Answer: HTTP/ OK Date: Wed, 24 Sep :35:48 GMT Server: Apache/2.2.9 (Win32) PHP/5.2.6 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=iso /09/ :35:48

25 HTTP – example of GET call from a simple form Call: GET /cgi-bin/printenv.pl?subject=Reclamation HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/x-shockwave-flash, */* Accept-Language: fr UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1;.NET CLR ; Media Center PC 5.0;.NET CLR )‏ Host: localhost:8080 Connection: Keep-Alive Answer: HTTP/ OK Date: Wed, 24 Sep :59:57 GMT Server: Apache/2.2.9 (Win32) PHP/5.2.6 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=iso QUERY_STRING="subject=Reclamation" REQUEST_METHOD="GET"... 0

26 HTTP – example of POST call from an URL and answer Form: A simple HTML page with a single form request subject: Do you confirm your request? Simple HTML page

27 HTTP – example of POST call from a simple form Call: POST /cgi-bin/printenv.pl HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/x-shockwave-flash, */* Accept-Language: fr Content-Type: application/x-www-form-urlencoded UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1;.NET CLR ; Media Center PC 5.0;.NET CLR )‏ Host: localhost:8080 Content-Length: 19 Connection: Keep-Alive Cache-Control: no-cache subject=Reclamation

28 HTTP – example of POST call from a simple form Answer: HTTP/ OK Date: Wed, 24 Sep :09:18 GMT Server: Apache/2.2.9 (Win32) PHP/5.2.6 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=iso f CONTENT_LENGTH="19"... QUERY_STRING=""... REQUEST_METHOD="POST"... 0

29 HTTP cookies Cookies are data stored on client-side (via a local file). Those data are transferred by the HTTP messages. The web application returns a “Set-Cookie” instruction in the http header. The web browser will send back this cookie, in the http header of each next calls. The cookie may have a deletion date. Without date, a cookie disappears when the user closes the web-browser. A cookie is identified by a name, a domain and a path. By default, the domain is the name of the site that returned the cookie. By default, the path is the path of the resource that returned the cookie. When the browser gets a resource, he inserts the active cookies registered for the domain and the path of the resource.

30 HTTP cookies The usage of Cookies on some sites may be a breach of privacy. It’s possible to set your browser options to deactivate cookies.

31 HTTP cookies – Example – First call from the web- browser to the web application. GET /servlets-examples/servlet/SessionExample HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, application/x-silverlight, application/x-shockwave-flash, */* Accept-Language: fr-ch UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.1;.NET CLR ;.NET CLR ;.NET CLR )‏ Host: localhost Connection: Keep-Alive

32 HTTP cookies – Example - HTTP answer from the web application to the web-browser HTTP/ OK Server: Apache-Coyote/1.1 Set-Cookie: JSESSIONID=4BC3CDACCD53684EFC312B7E79D0D791; Path=/servlets-examples Content-Type: text/html;charset=ISO Content-Length: 1305 Date: Mon, 06 Oct :08:35 GMT …

33 HTTP cookies – Example – next call from client GET /servlets-examples/servlet/SessionExample HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, application/x-silverlight, application/x-shockwave- flash, */* Accept-Language: fr-ch UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.1;.NET CLR ;.NET CLR ;.NET CLR )‏ Host: localhost Connection: Keep-Alive Cookie: JSESSIONID=4BC3CDACCD53684EFC312B7E79D0D791

34 HTTP re-location When with your web browser you call for a resource, the server may answer that the resource is present at another location. The “location” header field is the used for this purpose. Example – call from the client GET /servlets-examples HTTP/ Answer from the server HTTP/ Déplacé Temporairement Server: Apache-Coyote/1.1 Location: Transfer-Encoding: chunked Date: Mon, 06 Oct :16:25 GMT New call from the client GET /servlets-examples/ HTTP/1.1 …

35 HTTPS Secure version of HTTP. Usage of Secure Socket Layer (SSL) or Transport Layer Security (TLS) protocol. The content of the message is encrypted and the server is authenticated by an electronic certificate. The sender may also be authenticated. An URL for an HTTPS call begins with “https://” instead of “http://” for an HTTP call.

36 Communication & common standards – Where are we now? TCP/IP : communication channel for HTTP messages HTTP : basic dialogs between the client and the server Mime : definition of content-types URL : mean to address web resources

37 Common standards - Mime types In web applications, we use different types of files : files referred in HTML pages, files returned to the browser. Multipurpose Internet Mail Extensions (MIME) is an Internet standard that extends the format of to support: text in character sets other than US-ASCII; non-text attachments; message bodies with multiple parts header information in non-ASCII character sets. MIME's use, however, has grown beyond describing the content of to describing content type in general. Extract of The list of registered types is available on

38 URL Uniform Resource Locator (URL) is a way to identify resources on internet. A resource is supposed to identify either a static content (an HTML page, an image) or a call to a process that will create dynamically such content.

39 Elements of an URL ://[ [: ]/ [/ ][? ][# ] Protocol. Examples: http, ftp. User : user ID. Password : user password. Host: Server address; IP address or IP name. Port : server port. Number of TCP/IP port, 80 by default for http, 443 for https. Path to a file or a program (script, servlet, …). Path info : path after the name of a program Query : usually a list of couple = Bookmark : name of an anchor of an HTML page (to point to a position in the resource.

40 Absolute Vs relative URL in an HTML page In an HTML page, we will use URLs for forms actions, inclusion of images, hyperlinks on different pages, links to CSS files, … You may use complete URL (“http:// / ”) or shortened URLs beginning with:http:// “// / ” “/ ” “ ” The relative resource path is related to the “base path” of the current HTML page. The “base path” is either the base of the resource that produced the current HTML page or the value of the attribute “href” of a “base” tag in the current HTML page (the “base” tag should be a direct child of the “head” tag).

41 URL encoding Some characters have to be encoded in URLs send by the client: Ascii controls characters (non printable chars, codes 0-31 and 127 decimal). Non-Ascii characters (codes decimal). Characters used in the syntax of the URL (reserved chars)‏ Unsafe chars: Some characters present the possibility of being misunderstood within URLs for various reasons. The way to encode chars is: ‘%’ ‘+’ : replace a space == %20

42 Web Applications Where are we now? Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

43 Client-side - Main Web Standards and techniques HTML : description of the content to display in the current page of the browser CSS : styles to apply to HTML tags. Scripting : JavaScript, VBScript Client side embedded objects

44 Presentation of HTML HTML is a language based on the usage of tags. HTML is a language created with SGML. XML is a subset of SGML, it’s a meta-language (a language used to define specific languages). X-HTML is a subset of HTML conformed to SGML and described by an XML Schema. SGML HTML XML X-HTML

45 XML XML is a meta-language (a language used to define specific languages). An XML file can be well formed : respect some rules  Allowed chars (no “<“ and “&” chars in the content)‏  Correct tagging of elements: …. (the close tag is mandatory), correct usage of attributes of elements (attributes values enclosed in single or double quotes).  Presence of a root tag  Tags incorrect imbrications : not allowed valid : conform to a language defined for XML (the definition is written with a DTD or with a XML Schema).

46 XML – Example, instance + DTD Instance Dupont & Dupond Gaston Lagaffe Belgium clients.dtd

47 XML – Example, instance + XSD Instance Dupont & Dupond Gaston Lagaffe Belgium clients.xsd

48 Presentation of HTML … elements, tags A tag is a delimiter placed between “ ”. In fact, tags are used to delimit sections of text where you can have other tags. Elements are words of the tagged language. For example in HTML “H1”, “input”, “table” are elements. In HTML, the name of the element can be written in upper or lower case. Tags are, in principle, used by couple to mark the beginning and the end of an element: openTag : closeTag : Example : R eport

49 Presentation of HTML … attributes In the openTag, you can insert a list of attributes & values. An attribute is a characteristic of your tag. The syntax of an open tag with attributes is: For example, in a HTML anchor you should place an “href” attribute to form a link. hotmail In HTML, attributes are often optional. The order of attributes are not significant. The value of an attribute should be delimited by single quotes or double quotes. In Html, you could omit the quotes if the value is a single word.

50 Presentation of HTML … main tags Main structure of the content :  HTML (root element),  HEAD (meta-data & scripts),  BODY (visible content). Textual content:  Headings : H1, H2, …, H6  Paragraphs : P  Lists : OL, UL, LI  Inline style : B,I, U, S, SUP, SUB, FONT  Inline semantic formatting : ABR, CITE, CODE, DFN, EM, SAMP, STRONG, VAR  Line breaks : BR  Presentation : CENTER, PRE  Organization : DIV

51 Presentation of HTML … main tags Horizontal line : HR Tables : TABLE, TH, TR, TD Links & anchors : A, LINK Images : IMG, MAP See for the full specification.

52 Presentation of HTML … entities Some characters can’t be included directly because they have a special meaning in the XML/SGML tagging:, “, & Named entities have been defined to replace those chars : “<”, “>”, “"”, “&” You may also insert the ascii code of special chars : “&# ;” – Example : “"”

53 A simple HTML page A simple HTML page HTML or XHTML HTML is very flexible but can interpreted differently on different browsers XHTML is more rigorous, the validity can be controlled Simple HTML form

54 A simple HTML form A simple HTML page with a single form Do you confirm your request? Simple HTML page

55 Presentation of HTML … main tags for forms root element of the form part : FORM. input zones : INPUT (type=“text”/”password”, ”checkbox”/”radio”), TEXAREA, SELECT. buttons : INPUT (type=“button”/“submit”/”reset”). hidden fields : INPUT (type=“hidden”). file to post : INPUT (type=“file”).

56 HTML - Frames An HTML page (frame set) can be divided in different independent zones called frames. Example:

57 Client-side - Main Web Standards and techniques Where are we now? HTML : description of the content to display in the current page of the browser CSS : styles to apply to HTML tags. Scripting : JavaScript, VBScript Client side embedded objects

58 CSS – a simple HTML page with embedded CSS A simple HTML page body {background-color: yellow} h1 {background-color: #00ff00; color: #0000ff} li {font-family: courier} HTML or XHTML HTML is very flexible but can interpreted differently on different browsers XHTML is more rigorous, the validity can be controlled Simple HTML form

59 CSS – a simple HTML page with external CSS. SimplePageWithExternalCss.htm A simple HTML page HTML or XHTML HTML is very flexible but can interpreted differently on different browsers XHTML is more rigorous, the validity can be controlled Simple HTML form simple.css body {background-color: yellow} h1 {background-color: #00ff00; color: #0000ff} li {font-family: courier}

60 CSS syntax - style on element, id, class The syntax to define a style is: { = ; = ; …} The selector give one or more targets (target1, target2, …). Each target can be all HTML elements with a given tag all HTML elements with a given tag and a specific value in a given attribute all HTML elements having a given id all HTML elements having a given class a combination of previous criteria For a list of available properties see

61 CSS syntax - style on id - example A simple HTML page #important{color: #ff0000} HTML or XHTML HTML is very flexible but can interpreted differently on different browsers XHTML is more rigorous, the validity can be controlled Simple HTML form

62 CSS syntax - style on class - example A simple HTML page.important{color: #ff0000} HTML or XHTML HTML is very flexible but can interpreted differently on different browsers XHTML is more rigorous, the validity can be controlled Simple HTML form

63 CSS Syntax – Pseudo-classes Pseudo classes are defined in CSS to let you define dynamic presentation of  links when not visited / visited : a:link / a:visited  some elements when there are surrounded by the mouse or received the focus or become active : hover, focus, active to let you select elements in the HTML tree:  First child of any HTML element: first-child  First line of a textual element : p:first-line  First char of a textual element : p:first-letter to let you give attributes of the page to let you select elements expressed in a given language: lang

64 CSS Syntax – Pseudo-classes - Example A simple HTML page a:hover{font-style: oblique} p:first-line{font-weight: bold} HTML or XHTML HTML is very flexible but can interpreted differently on different browsers XHTML is more rigorous, the validity can be controlled Simple HTML form

65 Client-side - Main Web Standards and techniques Where are we now? HTML : description of the content to display in the current page of the browser CSS : styles to apply to HTML tags. Scripting : JavaScript, VBScript Client side embedded objects

66 HTML & Client side scripting HTML syntax include a “script” tag. // script code directly included in your HTML page Or Or … : Obsolete! Defined types: text/ecmascript text/javascript application/ecmascript application/javascript text/vbscript

67 JavaScript JavaScript is an interpreted language used mainly to give dynamical behavior into HTML pages. JavaScript has a different syntax than Java. Main characteristics: small, lightweight language object oriented variable data types are not declared (dynamic typing). prototype-based object model Reference :

68 JavaScript – example of definition of an object type function mycircle(x,y,r) { this.xcoord = x; this.ycoord = y; this.radius = r; this.retArea = getTheArea; //This next line uses an alternative syntax this.retCirc = function () { return ( Math.PI * this.radius * 2 ); }; this.mvBy = mvCclBy; } function getTheArea() { return ( Math.PI * this.radius * this.radius ); } function mvCclBy(xDis,yDis) { this.xcoord += xDis; this.ycoord += yDis; } /* create a mycircle called testcircle where testcircle.xcoord is 3 and testcircle.ycoord is 4 and testcircle.radius is 5 */ var testcircle = new mycircle(3,4,5); /* use the mvBy method to displace the centre of testcircle. move it by 2 in the x direction and 3 in the y direction */ testcircle.mvBy(2,3); //testcircle.xcoord is now 5 and testcircle.ycoord is now 7 window.alert( 'The area of the circle is ' + testcircle.retArea() ); window.alert( 'The circumference is ' + testcircle.retCirc() ); Extract of

69 HTML & Client side scripting – event handlers Some HTML tags have attributes used to call scripts functions.

70 HTML & Client side scripting – event handlers - example A simple example of java script and event handlers function callSelectedPage(){ var selectControl = document.selectform.selectpage; var selectedPage = selectControl.options[selectControl.selectedIndex].text document.location= selectedPage + ".htm"; } selection of one of an HTML page selected in a list SimplePage SimpleForm SimplePageWithEmbeddedCssWithStyleOnClass call selected HTML page

71 Client-side - Main Web Standards and techniques Where are we now? HTML : description of the content to display in the current page of the browser CSS : styles to apply to HTML tags. Scripting : JavaScript, VBScript Client side embedded objects

72 HTML & Client side embedded objects An HTML page can embed objects using the “object” tag. Such “object” has a type (“type” attribute), a path to the code ( “codebase” attribute), a region in the screen (“height”, “width” attributes) and other attributes. The XML “object” tag may have sub-elements to give supplementary information to the object. The main objects types are: ActiveX : Ms-Windows components that you may insert in an HTML page. Applets : Java classes that you may insert in an HTML page.

73 HTML & Client side objects - ActiveX - Example test ActiveX

74 HTML & Client side objects - Flash - Example test embedding direct flash content alt : test.swf

75 HTML & Client side objects - Applet Applets are Java classes written to be embedded in an HTML page. There are loaded and executed by the client-browser.

76 HTML & Client side objects – Applet – Example 1 DisplayCurrentDateApplet.html Embedding of a simple applet displaying the current date and time appletsExercices.java package appletsExercices; import java.applet.Applet; import java.awt.Graphics; import java.util.Date; public class AppletTest1 extends Applet{ private static final long serialVersionUID = 1L; public void paint(Graphics g){ g.drawString("Current date and time:" + (new Date()).toString(),10,10); }

77 HTML & Client side objects – Applet – Example 2 A calculator as applet

78 Web Applications Where are we now? Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

79 Server-side of web Applications Presentation scheme History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

80 Standards & techniques on the server-side History: Beginning : static HTML pages served by HTTP servers First generation of server applications: the CGI protocol – applications executed as standalone programs – applications written mainly in C, Perl. The HTML code is directly produced by a program. Second generation, type 1 : the client calls an HTML page with embedded code. This code is executed server side. Second generation, type 2 : program executed by an web application container. The client calls a program (as for the first generation) but this code is directly executed by the server in the same process.

81 CGI call The execution of a script is made through several processes launched at each call. Client appl.HTTP server Script- Interpreter HTTP get script Command Interpreter Exec Script Exec

82 CGI - Transfer of information from the client to a server script through the CGI protocol Two modes of HTTP calls: Get : all user input fields are transferred to the script through the environment variable named “QUERY_STRING” Post : all user input fields are transferred on STDIN, the env variable “CONTENT_LENGTH” gives the number of bytes to read. In the both cases additional information are passed via other environment variables: REQUEST_METHOD: GET/POST PATH_INFO: part of the URL path after the name of the script HTTP_ACCEPT : the mime types the client accept REMOTE_USER : the ID of the user if identified by the server...

83 CGI – Example off echo Content-type: text/html echo. echo ^ echo ^ Test^ echo the current date is: echo %date% echo ^

84 CGI – Example 2 #!c:/Perl/bin/perl.exe ## ## displayCurrentDate.pl -- demo CGI program which just prints the current date and time ## print "Content-type: text/html; charset=iso \n\n"; print " "; my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst) = localtime; $year += 1900; $mon += 1; my $datetime = sprintf "%02d/%02d/%04d %02d:%02d:%02d", $mday, $mon, $year, $hour, $min, $sec; print $datetime; print " ";

85 Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX JSF Data Layer

86 Standards & techniques on the server-side Second generation, type 1 : the client calls an HTML page with embedded code (or specific tags). This code is executed server side.  JSP : Java Server pages  ASP : active server pages  PHP  Coldfusion

87 PHP code embedded in an HTML page - example Display current date

88 Simple JSP Example

89 Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

90 Standards & techniques on the server-side Second generation of server applications, type 2: web application containers. The client calls a program (as for the first generation) but this code is directly executed by the server in the same process.  Java J2EE web container: servlets (+ JSP for the view).  Perl with modPerl on Apache server  WebObjects (Apple)‏

91 Web application call The execution of a web application is made by the application server that already hosts the interpreter of the language used. Client appl.HTTP server HTTP get../script Script- Interpreter Script Load and execute

92 J2EE server Web application call via a J2EE webContainer With a J2EE server, the HTTP client calls a servlet directly executed by the J2EE web container. Client appl.J2EE web container HTTP get../servlet JVM Servlet J2EE EJB Container EJB JVM

93 Transfer of information from the client to a servlet Two modes of HTTP calls: Get : call of doGet(HttpServletRequest req, HttpServletResponse res)‏ Post : call of doPost(HttpServletRequest req, HttpServletResponse res)‏ In both cases, the req object gives access to the data transferred by the client application.

94 Example 1 of servlet /* Simple Servlet Example, extends HttpServlet */ package servletsExercices; import java.io.IOException; import java.io.PrintWriter; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Servlet1 extends HttpServlet{ static final long serialVersionUID = 1; public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException,IOException{ PrintWriter out = res.getWriter(); res.setContentType("text/html"); out.println(" "); out.println("The current date and time is "); out.println((new Date()).toString()); out.println(" "); }

95 Example 2 of servlet import java.io.*; import java.util.*; import javax.servlet.*; import javax.servlet.http.*; public class Servlet8 extends HttpServlet{ static final long serialVersionUID = 1; public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException,IOException{ PrintWriter out = res.getWriter(); res.setContentType("text/html"); out.println(" "); out.println(" main variables defined in the CGI protocol \n"); out.println("REQUEST_METHOD :" + req.getMethod()+" \n"); out.println("PATH_INFO :" + req.getPathInfo()+" \n"); out.println("QUERY_STRING :" + req.getQueryString()+" \n"); out.println("REMOTE_HOST :" + req.getRemoteHost()+" \n"); out.println("REMOTE_ADDR :" + req.getRemoteAddr()+" \n"); out.println("CONTENT_TYPE :" + req.getContentType()+" \n"); out.println("CONTENT_LENGTH :" + req.getContentLength()+" \n"); out.println(" request arguments \n"); Enumeration paramNames = req.getParameterNames(); while(paramNames.hasMoreElements()){ String name = (String) paramNames.nextElement(); String value = req.getParameter(name); out.println(name + " = " + value + " \n"); } out.println(" "); } public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException,IOException{ doGet(req,res); }

96 Example 2 of servlet - result

97 Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

98 How to create a session context with a not-connected protocol. The HTTP protocol doesn’t necessary maintain the connection between two calls to an web application. To do some treatments, it is necessary to keep information on previous requests & results. The solution is to create a logical session for each user. Each request is part of a session (except the first request, for which the server will create a new session). A session has an end triggered either by an explicit action of the user (or of the application) or by a time-out. At the end of the session, the server frees resources allocated to keep session data. Req 1 Session1 start Session end Req 2Req n Time-out

99 How to create a session context with a not-connected protocol. Session info kept on client-side  Transfer of context data via URL (in the query string) and/or via hidden fields of forms.  Transfer of context data via cookies. Session info stored server-side and session ID (ticket) kept client- side  Transfer of session ticket via URL and/or via hidden fields of forms.  Transfer of session ticket via cookies. Usually, a web application uses a cookie to store a session ticket but if the cookies are not authorized by the web-browser (de-activated) the web application may switch automatically to the insertion of the session ticket in the call-back URLs present in the content of the page.

100 Application/ session / request / page contexts. The HTTP protocol is not connected and has no context. An HTTP application, usually creates a session by user and may create some contexts to store and retrieve information from calls to calls. With JSP/ASP/servlets the following context scopes are available: application : information stored in this context can be shared between different entries (different servlets for a J2EE application) of the same application. session : information stored in this context can be used by the code executed after different calls of the user during the execution of the same user-session. request : information stored in this context can be used by different modules of codes chained to answer to a single call of the user. page : information stored in this context is only available to construct a single HTML page.

101 Logical separation of UI / business / data. A good practice is to separate different concerns, in particular the user-interface, the business code, the access to data. If the design is correct, it is possible to modify or replace a component playing a specific role without any modification of the others. When you distribute a part of a layer, you have to add modules to act as an interface. UI Layer Interface Business Layer Data Access Layer UI Layer Client Server

102 Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

103 MVC principle. MVC means Model View Controller. It is a way to separate the management of the look of user-interface and the process of actions. The model is a structure of data used to exchange information between the view and the controller. The view is the expression of what the user will see (the view will be populated with data coming from the model). The controller process the actions and fills the view with results to display.

104 MVC A generic controller (often furnished by a framework) calls the code implemented to achieve an action. The action code may call a business operation and may fill the model. The action code also identifies the view to return to the user. The controller calls the interpretation of the view. The view may dynamically include data stored into the model. The details of this process may differ from one framework to another. Model Generic ControllerView Action 1.Execute 7. Get data 4.Fill 6.Get content to return 5.Identity of the view Business Operation 2. Execute3.Return 8.Return content 0.Http get 9.Http answer

105 Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

106 Languages to create the view The principle is to separate the as much as possible the HTML from the programming code. In a web application, the view produces usually HTML code (but you can find situations where the view produces XML code or other types of content). Views are often defined as a mix of HTML code and either special tags or instructions in a hosted language (PHP, Java, VB, …). The non-HTML content is there to produce dynamically HTML to present data (injection of data, conditional production of HTML code, loops in production of HTML code, …). An other way to define dynamic behaviors in the view is to use specific tags (insertion of data, conditional sections, loops,...).

107 Different languages to create the view For an extensive list of available templates engine for web pages, see For J2EE applications, most famous template engines are JSP (with JSTL or other custom tag libs) Apache Velocity Free Marker For PHP, see rossolini.developpez.com/comparatifs/php/templates/?page=sommairehttp://g- rossolini.developpez.com/comparatifs/php/templates/?page=sommaire An alternative is to use XSLT with a template in XML. Data Template Template Engine HTML/XML

108 Servlet + JSP (with JSTL & EL) example Foo.jsp values of the bean "foo" filled by the calling servlet value = ${val} FooServlet.java package servletsExercices; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import model1.Foo; public class FooServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String s[] = new String[] {"blue", "green", "red"}; Foo f = new Foo(s); req.setAttribute("foo", f); getServletContext().getRequestDispatcher("/foo.jsp").forward (req, res); } Foo.java public class Foo { String s[]; public String[] getList() { return s; } public Foo(String s[]) { this.s = s; } }

109 J2EE JSTL & tag libs JSTL stands for Java Standard Tag Lib. The idea is to add specific tags in JSP pages instead of using Java code to produce dynamic HTML. See

110 JSTL example Count to 10 Example (using JSTL)

111 Velocity & freeMarker Velocity & freemarker are template engines you may use in other contexts that a call to an HTTP resource. You have to explicitly specify the association between the template and a bean and then you have to call the processing of the template. Properties p = new Properties(); p.setProperty("resource.loader", "class"); p.setProperty("class.resource.loader.class","org.apache.velocity.runtime.resource.loader.ClasspathResourceLoader"); VelocityEngine engine = new VelocityEngine(); engine.init(p); Template template = engine.getTemplate("/templates/ -workflow.vm"); // Create a context and add all the objects VelocityContext context = new VelocityContext(); context.put (“mailBody",“hello"); // Render the template for the context into a string String result = new StringWriter(); template.merge(context, result);

112 Velocity example Hello $customer.Name! Here is a list of your current subscriptions: #foreach( $subscription in $subscriptions )‏ #if ( $customer.isSubscribed($subscription) )‏ $subscription.Name #end

113 FreeMarker example ${doc.book.title} ${ch.title} ${p}

114 Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

115 AJAX AJAX stands for Asynchronous Javascript And XML It is a combination of different technologies: HTML as the main client-side language CSS for the presentation DOM & JavaScript to display results and submit requests JavaScript XMLHtppRequest for asynchronous calls XML for messages

116 AJAX AJAX enables asynchronous refresh of parts of the screens. It improves the interactivity. It allows a server-side management of events on screen controls instead of a simple get or submit followed by a full refresh of all the screen.

117 Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

118 Data access layer. The data access layer has the responsibility to get, store and update the data. Only this layer has the knowledge of the data storage structure. The data layer manages also caching, locking, DB transactions. Usually the data are stored in a SGBD. If the structure of the data base changes, only the data access layer should be modified. It exists some generic libraries able to play the role of the access layer, you just have to configure it (by example : hibernate or JDO).

119 Web Applications Where are we now? Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

120 Web Services Web Services are services (often stateless) callable by programs on internet/intranet using the web technologies and XML messages. The communication with Web Services are usually made through HTTP messages but with a supplementary layer : the SOAP protocol (Simple Object Access Protocol). Web Services may be registered in a standardized directory, UDDI (Universal Discovery, Description and Integration). The UDDI standards also define the protocol to access to the directory. Web Services communicate using platform-independent and language neutral web protocols. You may call a web service written in Java and executed on an Unix machine from a program written in.NET C# and executed on Windows Server.

121 Web Services - SOAP The SOAP protocol defines : Messages IN/OUT The dialog (SOAP is a stateless protocol). A Web Service is defined through a WSDL file (Web Service Definition Language). The structure of messages is defined with the XSD syntax (XML Schema Description). Some systems use directories of Web Services (UDDI). A web Service offers a set of operations. SOAP defines two modes of communication: SOAP-RPC : the client requests execution of an operation & wait for the answer. The message send identifies the operation to execute and the arguments. The answer may contain a status and a result. SOAP-Message : the client sends a message and do not necessarily have to wait for an answer. The SOAP message just contains an XML document treated by the receiver.

122 Web services – Example of call POST /axis/EchoHeaders.jws HTTP/1.0 Content-Type: text/xml; charset=utf-8 Accept: application/soap+xml, application/dime, multipart/related, text/* User-Agent: Axis/1.4 Host: localhost:8180 Cache-Control: no-cache Pragma: no-cache SOAPAction: "" Content-Length: 374

123 Web services – Example of answer HTTP/ OK Server: Apache-Coyote/1.1 Set-Cookie: JSESSIONID=47307A96AE5D2471FFE16C6F01B64E6C; Path=/axis Content-Type: text/xml;charset=utf-8 Date: Sun, 19 Oct :20:21 GMT Connection: close content-type:text/xml; charset=utf-8 accept:application/soap+xml, application/dime, multipart/related, text/* user-agent:Axis/1.4 host:localhost:8180 cache-control:no-cache pragma:no-cache soapaction:"" content-length:374

124 Web Services in Java In the Java world, web services are usually accessed through a servlet but can be implemented either in the web container or in the EJB container. J2EE server Client appl.J2EE web container HTTP get../servlet JVM Servlet W-S implementation

125 Web Services limits The basic technologies for Web services are not always sufficient, some issues have to be addressed: State management. Transactions. Security Some standards are available to cover those concerns but there are not widely adopted.

126 SOA SOA means Service Oriented Architecture. It is based on loose coupling services implementing business operations (usually web services). Such operations are combined and reused to form business applications. The combination of elementary services, with decisions, loops, management of exceptions,... is called “orchestration”. Specific tools help to design an orchestration without classical programming. There are standards related to the definition and the execution of business processes as BPEL.

127 Web Applications Where are we now? Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

128 RSS feeds "Really Simple Syndication (RSS 2.0)", is a standard used to subscribe and receive news or often modified contents. The user subscribes to a feed by entering the feed's link into the reader or by clicking an RSS icon in a browser that initiates the subscription process. The RSS reader checks the user's subscribed feeds regularly for new work, downloads any updates that it finds, and provides a user interface to monitor and read the feeds. (extract of ).user interface The server just publishs XML documents with metadata on articles and links to detailed content. The client filters following criteria given by the users and following the status (consulted or not).

129 RSS feeds – example of content Lift Off News Liftoff to Space Exploration. en-us Tue, 10 Jun :00:00 GMT Tue, 10 Jun :41:01 GMT Weblog Editor Star City How do Americans get ready to work with Russians aboard the International Space Station? They take a crash course in culture, language and protocol at Russia's Star City. Tue, 03 Jun :39:21 GMT Space Exploration Sky watchers in Europe, Asia, and parts of Alaska and Canada will experience a partial eclipse of the Sun on Saturday, May 31st. Fri, 30 May :06:42 GMT

130 Web Applications Were are we now? Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

131 Security with web applications. A web application can cause some harm to your computer, can attack your privacy, can usurp your identity to act on external sites. You may configure your browser to specify some restrictions: No cookies No applets No scripting No Active-X No frames …

132 Security with web applications – zones. You may give different security policies by zone: Local internet : sites of your local network Trusted sites : sites that you have registered as secure. Restricted sites : sites that you have registered as non-secure. Internet : all other sites.

133 Security restrictions client-side. In a web browser, the applicative program should have at the minimum following restrictions: No access to the local file system. Can’t launch programs on the local system. The JavaScript security model is based on a sandbox approach where scripts run in a restricted execution environment without access to local file systems, user data, or network capabilities. The same-origin policy prevents scripts from one site from reading properties of windows loaded from a different location. A signed script can request expanded privileges that give it access to restricted information and abilities.

134 Security with web applications – for Active-X objects. An Active-X object has all rights on your computer. Active-X objects are signed and certified, you should accept to load an Active-X only if you trust the provider.

135 Security with web applications – for applets. By default applets loaded on an external site have restricted rights : No storage of data (except through cookies). No actions on the local file system (no read, no creation of files, directories, …). No execution of another program on the client-side. Not allowed to open network connections to any computer, except for the host that provided the.class files. To add rights to an applet, the more secure way is to use certificated and encrypted applets.

136 Authentication HTTP Basic authentication : the user/password are coded (in base 64) and transferred directly in the HTTP header => it is not really secure! HTTP Digest access authentication : uses MD5 encryption (one way encryption). Public key authentication (usually implemented with HTTPS / SSL Client Certificates)‏ Kerberos or SPNEGO authentication …

137 Web Applications Where are we now? … It’s finished! Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

138

139


Download ppt "DEV034 -Web Applications, Introduction Speakers name C&W Date."

Similar presentations


Ads by Google