1

Welcome to CSC 301Web Programming

Charles Frank

Course Goals

Learn to create Web-based client / server applications

Learn popular Web programming / scripting languages

Learn some simple Web-oriented database techniques

Learn some issues around designing and testing client-server programming (there are differences from programming for a single computer)

2

Software A Web browser such as Microsoft Internet Explorer 7+,

Mozilla Firefox, Safari etc. A code-based HTML editor (not a WYSIWYG…), or a text

editorNotepad, Notepad++ on Win, SimpleText on MacPHP Coder IDE, http://www.phpide.com/

A Web server, such as Apache HTTP Server or Microsoft Internet Information Services

PHP 5.x → a server-side scripting language developed by the PHP group (http://www.php.net)

MySQL 4.1+ → an open source database management system developed MySQL AB (http://www.mysql.com)

3

Organization

Server is cscdb.nku.edu (Web + Database) Account name is ? Password is ? Access through:

FTP ○ connect using WS_FTP LE

(http://cscdb.nku.edu/csc301/frank/wsftp6.zip) ○ upload your files○ test your programs

4

Organization

To access your Web pages, go to http://cscdb.nku.edu/csc301/username/...

Your account will have a directory called as your usernameYour html start pages go hereGood practices is to name main page

index.htmlBrowser access will go to this directory

5

WWW Client/Server Model

6

Web client/server architecture

The Client/Server Model

The Internet and the www function according to the client/server model or paradigm

Term “Client/Server” :Can describe a relationship between two computer

programs – the "client" and the "server". ○ Client - requests some type of service (such as a file or

database access) from the server. ○ Server - fulfills the request and transmits the results to the

client over a networkRefers also to computers, joined by a network, that

run the client / server programs.7

Web Clients and ServersWeb client Refers to both a computer and an application running on that

computer As a machine - connected to the Internet when needed As an application:

Program that runs on a user's computer○ Called a Browser

Communicates user's commands (=requests for Web resources) to the Web and interprets and displays the responses (=Web pages)

8

Web Clients and ServersWeb Client Can execute some limited computational

taskse.g. Java applets, Javascript

Generally act as a “smart terminal” and can't run applications on their own.

Uses HTTP (Hypertext Transfer Protocol)

Web Clients and Servers

Web Server Refers to both a computer and a program

running on that computer As a computer:

Continually connected to the InternetRuns web server software (such as Apache or

Internet Information Server)

10

Web Servers

As an application:Receives messages from a client and performs the

requested service○ Send back status code, web page, and associated files○ Execute a script or program○ Log message traffic○ Provide secure communications○ Support many simultaneous clients

Uses HTTP (Hypertext Transfer Protocol)

11

WWW Client/Server Model• HTTP protocol

• the main protocol used for communication between a browser and a Web server

12

HTTP protocol

• works by sending commands over a TCP connection• The browser initiates a TCP connection to the

web server.• The browser sends request for a particular web

page.• The browser reads the contents of the web page

from the TCP connection and displays it.• The browser closes the TCP connection used to

transfer the web page.

HTTP protocol

• Each separate item in a web page (e.g., pictures, audio) requires a separate TCP connection.

• HTTP specifies commands that the client issues to the server and the responses that the server sends back to the client.

15

• User of the client machine types in a URL

• URL = Uniform Resource Locator, represents the address of a resource on the Internet

• Recall the anatomy of an URL, consists of: protocol, domain name, hierarchical location of file on web server, resource name

client( Netscape)

server( Apache)

http : / / w ww.sm allco.com / index.htm l

Serving a Page

16

• Server name is translated to an IP address via DNS

client(Netscape)

server(Apache)

http:// www.smallco.com /index.html

192.22.107.5

Serving a Page

17

• Client connects to server using IP address and port number

client( N etscape)

server( Apache)

http : / / ww w.sm allco.com / index.htm l

192.22.107.5

192.22.107.5port 80

Serving a Page

18

• Client determines path and file to request

client( Netscape)

server( Apache)

http : / / w ww.sm allco.com / index.htm l

Serving a Page

19

• Client sends HTTP request to server

client( Netscape)

server( Apache)

http : / / w ww.sm allco.com / index.htm l

GET index .html HTTP/ 1.1

Serving a Page

20

• Server determines which file to send

client( Netscape)

server( Apache)

http : / / www.sm allco.com / index.htm l"index.htm l" is really/ etc/ httpd/ htdocs/ index.htm l

Serving a Page

21

• Server sends response code and the document

client( Netscape)

server( Apache)

http : / / w ww.sm allco.com / index.htm l

HTTP/ 1.1 200 OKContent- type: text/ htm l

[ contents of index.htm l]

Serving a Page

22

• Connection is broken

client( Netscape)

server( Apache)

Serving a Page

23

• HTTP is • Stateless = no persistent client/server

connection• Generic

• not tied to web browsers exclusively• can serve any data type• from a command window, you can connect to a Web server and

request resources as a Web browser does; in a command window:

telnet cscdb.nku.edu 80

get /csc301/campana1/processPostFormData.php HTTP/1.0

Serving a Page

Client-Server Capabilities

Clients can:Format output for displayAccept user inputDo limited computation

Including verification of user inputModify attributes of displayed page

24

Client-Server CapabilitiesClients can't:

Read or write files (other than very simple ones)

Access databasesShare data among users

Client-Server CapabilitiesServers can:

Retrieve and send web pagesCreate dynamic web pagesRead and write filesAccess databasesShare web pages among many users

26

Client-Server CapabilitiesServers can't:

Display web pages themselvesInteract directly with the userModify displayed pages in real-time (e.g.

highlight item when mouse passes over it)

More about Web Client-Server Architecture A system consisting of a client and a server is

known as a two-tier systemClient tier, or user interface tier, or “front end” Server, or “back end”

28

More about Web Client-Server Architecture A three-tier, or multi-tier, client/server

system consists of three distinct pieces:Client tierProcessing tier, or middle tier – still the Web

serverData storage tier

In both cases – distributed application = multiple computers share the computing responsibility for a single application

More about Web Client-Server Architecture

30

The design of a three-tier client/server systemThe two-tier client-server architecture is a physical arrangement in which the client and the server are two separate computers. Three-tier client-server architecture is more conceptual than physical as the storage tier and the processing tier can be located on the same server…

Client-Side or Server-Side?

In some cases, decision is simple:If you want to control the Web browser →

where / tool?If you want to access a database on a server →

where / tool?

31

Client-Side or Server-Side? Tasks that both sides can accomplish

(such as validating forms)?General rule: use client-side scripting to

handle user interface processing and light processing, such as validation; use server-side scripting for intensive calculations and data storage