Presentation is loading. Please wait.

Presentation is loading. Please wait.

Client-side & Server-side HodgePodge

Similar presentations


Presentation on theme: "Client-side & Server-side HodgePodge"— Presentation transcript:

1 Client-side & Server-side HodgePodge
CIS 285 Class # 3 HTML, HTTP, Client-side & Server-side HodgePodge Robinson_CIS_285_Winter_2005

2 Robinson_CIS_285_Winter_2005
Class # 3 Objectives Review HTML source document Review XHTML source document Discuss the <meta> element Programming vs. Scripting JavaScript DOM Robinson_CIS_285_Winter_2005

3 Robinson_CIS_285_Winter_2005
Class # 3 Objectives Become familiar with the architecture of the World Wide Web Learn about communication protocols and Web addressing Learn how multiple server processes can run on the same Web server Understand client-side scripts for validating user inputs in data-based Web pages Robinson_CIS_285_Winter_2005

4 Robinson_CIS_285_Winter_2005
HTML Source Document Source document is a text-only document containing: Actual text Specific markers and tags Use text processors Use all lowercase letters for tags and elements Save file with .htm or .html file extension When saving a file for the first time, may need to place quotation mark at the beginning and end of the filename “hello_world.html” Robinson_CIS_285_Winter_2005

5 Robinson_CIS_285_Winter_2005
HTML Source Document Remember to save the changes Nest the elements properly All extra whitespace is ignored Use enough indentation so your code is understood Robinson_CIS_285_Winter_2005

6 Basic XHTML Source Document
<?xml version=“1.0” encoding=“UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” <html xmlns= Robinson_CIS_285_Winter_2005

7 Robinson_CIS_285_Winter_2005
<meta> Element The XML and DTD specifications in the source document provide information to the browser about what king of code the document contains The <meta> elements is used to specify keywords that describe a document’s contents as well as a short description The <meta> comes form Greek word for “about” Including <meta> elements in the source document makes it easier for search engines and Internet directories to categorize the document. Robinson_CIS_285_Winter_2005

8 <meta> Element Example
<head> <title>Juan Valdez’s Coffee</title> <meta name=“keywords” content=“coffee, Columbia, South America, exotic, robust, imported, full, flavor” /> < meta name =“description” content=“Wholesaler and retailer and owner of coffee from Columbia” /> </head> Robinson_CIS_285_Winter_2005

9 Robinson_CIS_285_Winter_2005
General Programming CPU’s built-in set of instructions is called machine language or machine code Once a program has been created using a high level language, it must be translated into machine language Translator program Interpreter Compiler Why is this important in Java? Robinson_CIS_285_Winter_2005

10 Robinson_CIS_285_Winter_2005
Java Compiler Java Compiler // File HelloWorld.java Read the source code and check for syntax errors if HelloWorld.class no errors Java Bytecode Java Source Code Robinson_CIS_285_Winter_2005

11 Java Virtual Machine (JVM)
HelloWorld.class Write Hello World! Reads and interprets the bytecode and issues “native” commands to the processor Processor to system window Hello World! Java bytecode Robinson_CIS_285_Winter_2005

12 Scripting vs. Programming
Programming language used as a generic reference means any and all computer languages that allow us to write instructions for the computer to execute Programming language ( in a restrictive sense) can be used to create stand-alone software programs Scripting language is built into a specific application Consists of a series of instructions or code that the computer executes Robinson_CIS_285_Winter_2005

13 Web Processing Technologies
Server-side processing Client-side processing Compiled programs Server-side scripts Client-side Scripts: Browser Compiled Programs on client Workstations CGI Programs Perl ISAPI Programs Active Server Pages JavaScript NSALI Programs Cold Fusion VBScript Servlets Hybrid Technologies JScript JavaServer Pages Applets Robinson_CIS_285_Winter_2005 ASP.NET

14 Robinson_CIS_285_Winter_2005
Server Technology Robinson_CIS_285_Winter_2005

15 Robinson_CIS_285_Winter_2005
Servers Usually a large computer capable of providing data to many clients at the same time Server can mean: Physical computer Piece of hardware Server software Daemon running on a particular machine Robinson_CIS_285_Winter_2005

16 Robinson_CIS_285_Winter_2005
Types of Servers Application Audio/Video Chat Database DHCP Fax File FTP Groupware IRC List Mail News Print Proxy Supercomputers System boot Telnet Terminal Transaction Web X compute / GP compute Robinson_CIS_285_Winter_2005

17 Robinson_CIS_285_Winter_2005
Web Servers A Web server is a specific type of server that knows how to communicate with clients using HyperText Transfer Protocol (HTTP) A protocol is a standard set of rules that allow a client and a server to communicate HTTP allows clients to request documents and server to respond to those documents Robinson_CIS_285_Winter_2005

18 Servers, Browsers & Plug-ins
A Web server’s main goal is to provide documents to clients A Web browser’s purpose is to retrieve and display information from the web server by using HTTP Browser plug-ins extend the capabilities of a browser by allowing it to display more than just HTML documents Robinson_CIS_285_Winter_2005

19 Robinson_CIS_285_Winter_2005
Web Server Software CERN HTTPD (W3C HTTPD) NCSA HTTPD (1993 – 1995) Apache HTTPD Microsoft IIS Sun Zeus MacIntosh Jigsaw (Java-based) (W3C HTTPD) Robinson_CIS_285_Winter_2005

20 Robinson_CIS_285_Winter_2005
January 2005 Web Server Survey Robinson_CIS_285_Winter_2005

21 Robinson_CIS_285_Winter_2005
Web Server Platform Groupings Robinson_CIS_285_Winter_2005

22 LexisNexis Web Server and Hosting History as of 14 January 2005
Robinson_CIS_285_Winter_2005

23 Robinson_CIS_285_Winter_2005
Web Architecture Robinson_CIS_285_Winter_2005

24 The Architecture of the World Wide Web
The Web has a client/server architecture Programs on servers communicate and share files with client workstations over a network Robinson_CIS_285_Winter_2005

25 The Architecture of the World Wide Web
Client-side computers that are connected to the Internet use Web browsers to access information on the Internet Web servers are computers connected to the Internet that run special Web server software Web servers store the files that people can access via the Internet Robinson_CIS_285_Winter_2005

26 The Architecture of the World Wide Web
HTML is a document-layout language that defines the content and appearance of Web pages The listener is a server process that “listens” for messages sent to the server from client browsers When a Web server receives a message from a browser requesting a Web page, it reads and sends, or downloads, the requested HTML file back across the Internet to the user’s browser Robinson_CIS_285_Winter_2005

27 Communication Protocols and Web Addresses
Communication protocols are agreements between a sender and a receiver regarding how to send and interpret data All data transported over the Internet is broken into packets Transmission Control Protocol (TCP) defines how sending computer breaks down long messages into packets receiving computer reassembles them into complete messages Robinson_CIS_285_Winter_2005

28 Communication Protocols and Web Addresses
Internet Protocol (IP) specifies how the sending computer formats message addresses Every computer connected to the Internet has a unique IP address that specifies the computer’s network location Information on the World Wide Web is usually transferred via HyperText Transfer Protocol (HTTP) Robinson_CIS_285_Winter_2005

29 Communication Protocols and Web Addresses
Users request a Web page from a Web server by entering the Web page’s Web address in their browser A Web address, called a Uniform Resource Locator (URL), specifies: Communications protocol (such as HTTP or FTP) Domain name or IP address of a Web server Robinson_CIS_285_Winter_2005

30 Running Multiple Server Processes on the Same Web Server
A server process listens for and responds to requests from clients Servers using Internet protocols manage multiple listener processes through the concept of ports A port corresponds to a memory location on a server Every request sent from a client to a server must specify: Server’s IP address Port number of the server process to which the message is directed Robinson_CIS_285_Winter_2005

31 Robinson_CIS_285_Winter_2005
Service Ports Applications communicate by using a service port. In order to communicate with another computer using a service you must specify a port number. Most services have standard port numbers such as HTTP (port 80), SMTP (25), FTP(20, 21), Telnet (23) Robinson_CIS_285_Winter_2005

32 Service Ports / Protocols
Robinson_CIS_285_Winter_2005

33 Robinson_CIS_285_Winter_2005
Data-Based Web Pages Whenever a static Web page is accessed, it always displays the same information In a dynamic Web page, the content varies based on user inputs or data retrieved from external sources Data-based Web pages refer to dynamic Web pages that Derive content from data files or databases May be based on user inputs Robinson_CIS_285_Winter_2005

34 Robinson_CIS_285_Winter_2005
Data-Based Web Pages Data-based Web pages can be created using data stored in data files or data stored in a database use data retrieved from XML files, which are text files that store data using a standardized structure Robinson_CIS_285_Winter_2005

35 Creating Data-Based Web Pages Using Direct Database Retrievals
Data-based Web pages can be created using data that is retrieved from a database and then placed in the Web page Server-side or client-side processing can be used to retrieve the data Robinson_CIS_285_Winter_2005

36 Robinson_CIS_285_Winter_2005
Server-side Processing Robinson_CIS_285_Winter_2005

37 Server-Side Processing
Most server-side data-based Web page technologies use HTML forms – enhanced HTML documents that collect user inputs and send them to the Web server for processing When an HTML form is submitted to a Web server, the servicing program processes the form inputs and dynamically composes a Web page reply Form servicing programs can be compiled executable programs, uncompiled programs (scripts), or a hybrid of both Robinson_CIS_285_Winter_2005

38 Server-Side Compiled Programs
Compiled programs are Written in a text-based programming language Translated into the machine language When a program is compiled It is stored on the hard drive Does not need to be recompiled each time it is run Robinson_CIS_285_Winter_2005

39 Using a Server-Side Compiled Program to Create a Data-Based Web Page
Robinson_CIS_285_Winter_2005

40 Server-Side Script Processing
A script is a computer program that is Translated into a machine-readable format Executed one line at a time Scripts execute more slowly than compiled programs Every time a script is run, it must be translated to machine-readable format Server-side scripts can do everything compiled programs do Robinson_CIS_285_Winter_2005

41 Server-Side Script Processing
One way of creating server-side scripts Use the CGI communication protocol Write the script using the PERL scripting language Microsoft’s Active Server Page (ASP) and Sun’s extended Java, JavaServer Pages (JSP) technology provides an approach for creating server-side scripts that do not use the CGI protocol By default, the commands in an ASP file are in the VBScript programming language Programmers can also create ASPs using the JavaScript language Robinson_CIS_285_Winter_2005

42 Server-Side Hybrid Processing
Hybrid server-side programming combines the advantages of compiled server-side programs and server-side scripts When a programmer creates a server-side script, it does not need to be compiled explicitly The first time a user accesses a Web page that calls the script, it is Compiled into machine-readable format Stored as an executable file Robinson_CIS_285_Winter_2005

43 Server-Side Hybrid Processing
The programmer can always work with an ordinary text file and need not install an integrated programming development environment to modify the script The program does not need to be translated into machine language each time it runs Robinson_CIS_285_Winter_2005

44 Server-Side Hybrid Processing
ASPs use server-side script processing JavaServer Pages (JSPs) use server-side hybrid processing Server-side hybrid processing Reduces the Web server’s processing Shortens the user wait to view a response from the Web server A new version of ASP called ASP.NET Uses the server-side hybrid processing model Adds features that simplify database access Robinson_CIS_285_Winter_2005

45 Robinson_CIS_285_Winter_2005
Client-side Processing Robinson_CIS_285_Winter_2005

46 Client-Side Processing
Data-based Web pages that perform direct database retrievals can be created using compiled programs that are downloaded and subsequently installed and executed on the client workstation Such programs send data directly to and retrieve data directly from the database server as needed, bypassing the Web server  Robinson_CIS_285_Winter_2005

47 Using a Compiled Client-Side Program to Create Data-Based Web Pages
Robinson_CIS_285_Winter_2005

48 Client-Side Processing
Java applets are Run in a generic Java runtime environment supplied by most Web browsers Can send data to and receive data only from a database server process running on the same computer as the Web server process Robinson_CIS_285_Winter_2005

49 Web Processing Technologies
Server-side processing Client-side processing Compiled programs Server-side scripts Client-side Scripts: Browser Compiled Programs on client Workstations CGI Programs Perl ISAPI Programs Active Server Pages JavaScript NSALI Programs Cold Fusion VBScript Servlets Hybrid Technologies JScript JavaServer Pages Applets Robinson_CIS_285_Winter_2005 ASP.NET

50 Robinson_CIS_285_Winter_2005
XML Files and XML Processing Robinson_CIS_285_Winter_2005

51 Creating Data-Based Web Pages Using Data Stored in XML Files
Different applications often use different database and file formats for storing data Problems may arise when these applications need to share data One solution: translate data into a standard format, compatible with a variety of applications XML (eXtensible Markup Language) provides rules, guidelines, and conventions for representing data in a text file format Robinson_CIS_285_Winter_2005

52 Creating Data-Based Web Pages Using Data Stored in XML Files
In server-side XML processing: A conversion program running on the Web server extracts data from the database and converts to an XML format The XML data is translated into a formatted HTML file The HTML file is then transmitted across the network to the user’s browser Robinson_CIS_285_Winter_2005

53 Server-Side XML Processing
Robinson_CIS_285_Winter_2005

54 Creating Data-Based Web Pages Using Data Stored in XML Files
Client-side XML processing: Converts the database data to an XML-formatted file on the Web server and then downloads XML file to the client workstation On the client workstation, the XML file is processed by an XML parser running on the client Robinson_CIS_285_Winter_2005

55 Client-Side XML Processing
Robinson_CIS_285_Winter_2005

56 Robinson_CIS_285_Winter_2005
Client-Side Scripts Client-side scripts: Add functionality to Web pages Consist of text commands embedded in an HTML document Support tasks such as verifying data, opening new browser windows, providing animated graphics, and performing other programming tasks that do not require interaction with the Web server  The most popular languages for creating client-side scripts are JavaScript and VBScript Robinson_CIS_285_Winter_2005

57 Creating Data-Driven Web Sites
Many different technologies can be used to create programs that generate data-based Web pages These technologies differ based on whether the programs: Run on the server or on the client workstation Whether the programs are stored in a text (script) format or in a machine language (compiled) format Robinson_CIS_285_Winter_2005

58 Robinson_CIS_285_Winter_2005
Document Object Model Robinson_CIS_285_Winter_2005

59 Robinson_CIS_285_Winter_2005
Document Object Model The DOM is a platform-and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents Consists of 2 parts: DOM Core – functionality needed for XML documents to manipulate document structures, elements , attributes and basis for DOM HTML DOM HTML – specific elements defined in HTML DOM is the “Dynamic” of Dynamic HTML Robinson_CIS_285_Winter_2005

60 Robinson_CIS_285_Winter_2005
DOM as an API API for HTML and XML documents Provides a standard set of objects for representing HTML and XML documents Combining objects Interface for accessing Manipulating document Defines the logical structure of documents Defines the way a document is accessed and manipulated Robinson_CIS_285_Winter_2005

61 Robinson_CIS_285_Winter_2005
DOM As An Object Model Identifies the interfaces and objects used to represent and manipulate a document Identifies the semantics of these interfaces and objects, including behavior and attributes Identifies the relationships and collaborations among these interfaces and objects Robinson_CIS_285_Winter_2005

62 Robinson_CIS_285_Winter_2005
Advantages of the DOM Language and implementation-neutral interface Interoperability HTML and XML support Java and ECMA support Style sheet support Robinson_CIS_285_Winter_2005

63 Document Object Model (DOM)
Robinson_CIS_285_Winter_2005

64 Robinson_CIS_285_Winter_2005
Window Object Has 3 main child objects Location Document History Has a number of properties and methods attached to it – Examples: window.alert() window.confirm() window.prompt() Robinson_CIS_285_Winter_2005

65 Robinson_CIS_285_Winter_2005
Document Object Contains information on the current document being displayed in the window, and via its methods, allow for the display of HTML code. Document object properties include: URL title bgColor referrer fgColor Most used document method: document.write() Robinson_CIS_285_Winter_2005

66 Robinson_CIS_285_Winter_2005
Location Object Stores the information about the URL of the document currently displayed in the browser window Has the property location.href, which contains the complete URL Contains a number of other properties that store the various parts of the URL separately EX. hostname – stores the host and domain name of the URL The properties of the location object may be changed The URL property of the document object is fixed! Robinson_CIS_285_Winter_2005

67 Robinson_CIS_285_Winter_2005
History Object Stores the list of the previous URLs that the surfer has visited. Has 3 methods: history.back() history.forward() history.go() Robinson_CIS_285_Winter_2005

68 Robinson_CIS_285_Winter_2005
Summary The Web has a client/server architecture consisting of Web servers that communicate with client workstations running Web browsers A communication protocol is an agreement between a sender and a receiver that specifies how to send and interpret data Every computer that is connected to the Internet has a unique IP address The DOM is a model in which the document contains objects, and each object has properties and methods associated with it that can be accessed by a scripting language for manipulation Robinson_CIS_285_Winter_2005

69 Robinson_CIS_285_Winter_2005
Summary Data-based Web pages are dynamic Web pages Data-based Web pages that derive their data from a database can be created using either server-side or client- side processing XML provides rules, guidelines, and conventions for representing data in a text file format Client-side scripts perform tasks such as verifying data and opening new browser windows on data-based Web pages Robinson_CIS_285_Winter_2005


Download ppt "Client-side & Server-side HodgePodge"

Similar presentations


Ads by Google