CSE 4225 Network Programming - Google Sites

CSE 4225 Network Programming Lecture 5: Web Architecture

Spring – 2015 Solaiman Salvi

Spring '15

CSE 4225 | Network Programming

2

Spring '15

CSE 4225 | Network Programming

3

Spring '15

CSE 4225 | Network Programming

4

Spring '15

CSE 4225 | Network Programming

5

Spring '15

CSE 4225 | Network Programming

6

Spring '15

CSE 4225 | Network Programming

7

WWW

STATIC WEB DOCUMENTS

Spring '15

CSE 4225 | Network Programming

8

Static Web Documents • Web pages are static • Just files sitting on some server waiting to be retrieved - even a video is a static Web page because it is just a file • MarkUp languages – language for describing how documents are formatted.

Spring '15

CSE 4225 | Network Programming

9

Spring '15

CSE 4225 | Network Programming

10

Static Web Pages (1)

The HTML for a sample Web page. Spring '15

CSE 4225 | Network Programming

11

Static Web Pages (2)

The formatted page. Spring '15

CSE 4225 | Network Programming

12

Static Web Pages (3)

Some differences between HTML versions. Spring '15

CSE 4225 | Network Programming

13

Style Sheets • A way to prevent different pages from having a different appearance • Individual pages no longer use physical styles, such as boldface and italics. • Page authors use logical styles such as (define), (weak emphasis), . • Logical styles are defined in the style sheet, which is referred to at the start of each page. • compared to an #include file in a C program Spring '15

CSE 4225 | Network Programming

14

Problem of HTML • HTML does not provide any structure to Web pages. • It also mixes the content with the formatting. • E-commerce and other applications need those. • A program that searches the Web for the best price for some book or CD needs to analyze many Web pages looking for the item's title and price. • With Web pages in HTML, it is very difficult for a program to figure out where the title is and where the price is. Spring '15

CSE 4225 | Network Programming

15

XML & XSL • 2 new languages – XML (eXtensible Markup Language) describes Web content in a structured way – XSL (eXtensible Style Language) describes the formatting independently of the content

Spring '15

CSE 4225 | Network Programming

16

Spring '15

CSE 4225 | Network Programming

17

XSL • All it says – Product Details, nothing about how to display the Web page on the screen. • To provide the formatting information, we need a .xsl file, containing the XSL definition. • This file is a style sheet that tells how to display the page. Interprets XML to HTML. • The XML and XSL specifications are much stricter than HTML specification. • Rejecting syntactically incorrect files is mandatory, even if the browser can determine what the Web designer meant Spring '15

CSE 4225 | Network Programming

18

Spring '15

CSE 4225 | Network Programming

19

XML & SOAP • XML – also used as language for communication between application programs. • SOAP – way for performing RPCs between applications in a language and system-independent way. • Client constructs the request as an XML message and sends it to the server, using the HTTP protocol • Server sends back a reply as an XML formatted message. • In this way, applications on heterogeneous platforms can communicate. Spring '15

CSE 4225 | Network Programming

20

XHTML • In the future, the majority of Web-enabled devices will not be PCs, but wireless, handheld PDA-type devices – limited memory for large browsers – full of heuristics that try to somehow deal with syntactically incorrect Web pages

• Solution – XHTML - HTML 4 reformulated in XML, not HTML 5 Spring '15

CSE 4225 | Network Programming

21

• Six major differences and a variety of minor differences between XHTML and HTML 4

Spring '15

CSE 4225 | Network Programming

22

Spring '15

CSE 4225 | Network Programming

23

Spring '15

CSE 4225 | Network Programming

24

FORMS • When the user clicks the submit button, the browser packages the collected information into a single long line and sends it back to the server for processing. • The & is used to separate fields • + is used to represent space.

Spring '15

CSE 4225 | Network Programming

25

WWW

DYNAMIC WEB DOCUMENTS

Spring '15

CSE 4225 | Network Programming

26

Dynamic web content • Content/file generated on demand/when requested (on a HTTP request), rather than stored on disk • Content generation can take place either on the server side or on the client side.

Spring '15

CSE 4225 | Network Programming

27

Server Side Dynamic Web Page • 1. Programs – CGI (Common Gateway Interface)

• Written in – perl/pyhton • Lives in a directory called cgi-bin - visible in the URL • A CGI program is executed in a separate process. Spring '15

CSE 4225 | Network Programming

28

2. Server Side Scripting • CGI scripts - not the only way to generate dynamic content on the server side. • Another common way – – embed little scripts inside HTML pages – have them be parsed & executed by the server itself to generate the page. – The result is included in the place of the code. – language for writing these scripts – • • • •

Spring '15

Active Server Pages (ASP) from Microsoft, Server-side JavaScript from Netscape, Java Server Pages (JSP) from Sun, Hypertext Preprocessor (PHP)

CSE 4225 | Network Programming

29

Spring '15

CSE 4225 | Network Programming

30

PHP

(a)

(c)

(b)

(a) A Web page containing a form. (b) A PHP script for handling the output of the form. (c) Output from the PHP script when the inputs are ‘‘Barbara’’ and ‘‘32’’, respectively. Spring '15

CSE 4225 | Network Programming

31

Spring '15

CSE 4225 | Network Programming

32

3. Java Servlets • Java Servlets live in server-side JVM. – doGet, doPost, doPut, doDelete, init, destroy – HTML is “embedded” in Java code. – Servlets can call Enterprise JavaBeans (EJB).

Spring '15

CSE 4225 | Network Programming

33

Spring '15

CSE 4225 | Network Programming

34

Spring '15

CSE 4225 | Network Programming

35

Client Side Dynamic Web page • CGI, PHP, JSP, and ASP scripts can’t respond to mouse movements or interact with users directly. • So needs scripts embedded in HTML pages that are executed on the client machine, rather than the server machine • HTML 4.0 allows such scripts, tag • most popular scripting language - JavaScript Spring '15

CSE 4225 | Network Programming

36

JavaScript • JavaScript is a full-blown programming language, with all the power of C or Java. • Variables, strings, arrays, objects, functions, and all the usual control structures. • Large number of facilities specific for Web pages, including the ability to manage windows and frames, set and get cookies, deal with forms, and handle hyperlinks. Spring '15

CSE 4225 | Network Programming

37

JavaScript • high level language • ideal for designing interactive Web pages

Use of JavaScript for processing a form. Spring '15

CSE 4225 | Network Programming

38

• The body is almost the same as the PHP example, the main difference being the declaration of the submit button and the assignment statement in it. • This assignment statement tells the browser to invoke the response script on a button click and pass it the form as a parameter.

Spring '15

CSE 4225 | Network Programming

39

• Difference between the PHP (page 25) and Javascript (page 31) – – In page 25 program, after submit button is clicked browser collects the info into a long string and sends it off to the server – Server sees the name of the php file “action.php” and executes it – The PHP script produces a new HTML page and that page is sent back to the browser for display Spring '15

CSE 4225 | Network Programming

40

• With Fig. in page 31, when the submit button is clicked the browser interprets a JavaScript function contained on the page. • All the work is done locally, inside the browser • There is no contact with the server. • So, the result is displayed virtually instantaneously, whereas with PHP, there can be a delay of several seconds before the resulting HTML arrives at the client. Spring '15

CSE 4225 | Network Programming

41

Server-side & Client-side Scripting

Spring '15

(a)Server-side scripting with PHP. (b)Client-side scripting withJavaScript. CSE 4225 | Network Programming

42

• Difference doesn’t mean - JavaScript is better than PHP. • Uses are completely different. • PHP, JSP and ASP are used when interaction with a remote WIDTH=100 HEIGHT=100> Spring '15

CSE 4225 | Network Programming

46

Applet

Spring '15

CSE 4225 | Network Programming

47