robinson_cis_285_winter_20051 cis 285 class # 3 html, http, client-side & server-side hodgepodge

Robinson_CIS_285_Winter_2005

1

CIS 285 Class # 3

HTML, HTTP, Client-side & Server-side

HodgePodge


2

Class # 3 Objectives

Review HTML source document Review XHTML source document Discuss the <meta> element Programming vs. Scripting JavaScript DOM


3

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


4

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”


5

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


6

Basic XHTML Source Document

<?xml version=“1.0” encoding=“UTF-8”?> <!DOCTYPE html PUBLIC

“-//W3C//DTD XHTML 1.0 Transitional//EN”

http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd”>

<html xmlns=http://www.w3.org/1999/xhtml>


7

<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.


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>


9

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?


10

Java Compiler

// File HelloWorld.java

Java Source Code

Java Compiler

Java Bytecode

Read the source code

and check for syntax errors

HelloWorld.classif

no errors


11

Java Virtual Machine (JVM)

HelloWorld.class Processor

Java bytecode

JVM

Hello World!

Reads and interprets thebytecode and

issues “native” commands

to the processor

WriteHello World!

tosystemwindow


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


13

Web Processing Technologies

Compiledprograms

Server-sideprocessing

Perl

Cold Fusion

Active Server Pages

CGI Programs

ISAPI Programs

NSALI Programs

HybridTechnologies

JavaServer Pages

ASP.NETApplets

CompiledProgramson client

Workstations

Client-sideprocessing

Server-sidescripts Client-side

Scripts:Browser

JScript

VBScript

JavaScript

Servlets


14

Server Technology


15

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


16

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


17

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


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


19

Web Server Software

CERN HTTPD (W3C HTTPD) NCSA HTTPD (1993 – 1995) Apache HTTPD Microsoft IIS Sun Zeus MacIntosh Jigsaw (Java-based) (W3C HTTPD)


20

January 2005 Web Server Survey


21

Web Server Platform Groupings


22

LexisNexis Web Server and Hosting History as of 14 January 2005


23

Web Architecture


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


25


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


26


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


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


28


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)


29


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


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


31

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)


32

Service Ports / Protocols

Port Number

I nternet Application or Protocol

7 Echo

21 FTP control port

23 Telnet

25 Simple Mail Transfer Protocol (SMTP)

53 Domain Name Server (DNS)

70 Gopher

79 Finger

80 Hyper Text Transfer Protocol (HTTP)

107 Remote Telnet Service (rtelnet)

110 Post Office Protocol — Version 3 (POP3)

119 Network News Transfer Protocol (NNTP)

194 Internet Relay Chat (IRC)


33

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


34

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


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


36

Server-side Processing


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


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


39

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


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


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


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


43


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


44


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


45

Client-side Processing


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


47

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


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


49

Web Processing Technologies

Compiledprograms

Server-sideprocessing

Perl

Cold Fusion

Active Server Pages

CGI Programs

ISAPI Programs

NSALI Programs

HybridTechnologies

JavaServer Pages

ASP.NETApplets

CompiledProgramson client

Workstations

Client-sideprocessing

Server-sidescripts Client-side

Scripts:Browser

JScript

VBScript

JavaScript

Servlets


50

XML Files and XML Processing


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


52


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


53

Server-Side XML Processing


54


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


55

Client-Side XML Processing


56

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


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


58

Document Object Model


59

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


60

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


61

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


62

Advantages of the DOM

Language and implementation-neutral interface

Interoperability HTML and XML support Java and ECMA support Style sheet support


63

Document Object Model (DOM)


64

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()


65

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()


66

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!


67

History Object

Stores the list of the previous URLs that the surfer has visited.

Has 3 methods: history.back() history.forward() history.go()


68

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


69

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_20051 cis 285 class # 3 html, http, client-side & server-side hodgepodge

Documents