Web architecture

© 2004 Ken Baldauf, All rights reserved.

Web Architecture

Ken BaldaufProgram in Interdisciplinary ComputingFlorida State University

clients, servers, files, folders, urls and more


mysite

index.html

me.jpgprofile.html

seal.gif

style.css

Web pages and sites are made up of multiple files and are typically developed on a PC with the files stored in one common folder.

Note: Web pages on your PC can be viewed with a Web browser by choosing “Open File…” from the File menu.

Note: Web pages on your PC can be viewed with a Web browser by choosing “Open File…” from the File menu.


mysite

index.html

me.jpgprofile.html

seal.gif

style.css

Web pages and sites are made up of multiple files and are typically developed on a PC with the files stored in one common folder.

Components of a Web page and Web site are linked to each other using HTML code.

A Web browser like Firefox interprets HTML code and assembles pages to be viewed.


mysite

index.html

me.jpgprofile.html

seal.gif

index.html<html><head><title>My Page</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body>

</body></html>

<a href=“profile.html”>My Profile</a>

<img src=“seal.gif” />

style.css

Once these references and links between files are created, the files must maintain their relative position to each other within the Web site folder.

HTML CODE


This simple Web site folder, “mysite,” contains three files – index, profile, and resume, and two folders – an image folder containing three more files, and a styles folder containing two more files.


The file index.html is the main Web page that is displayed when the Web site is accessed. It will likely contain a reference to images/banner.png.

This type of reference is referred to as a local, or relative reference since banner.png is within the local site, and images/banner.png describes where the file is located relative to index.html, the file that references it.

When a Web page references a page that is outside the local domain, such as http://www.fsu.edu, it is referred to as an absolute reference


WEB SERVER

SFTP

Web sites are copied from the PC on which they are developed to a Web server so that the world can access them. SFTP software is used to make the transfer.

mysite


PC File System Server File System

SFTP software like SSH connect to a Web server and allow you to click and drag files and folders from your PC to the server.


WEB SERVER

iSpace.ci.fsu.edu

username

personalhtml

Web server software, along with the Domain Name System (DNS) are used to translate URL’s to physical location addresses on the server.

mysiteSFTP

mysite


WEB SERVER

iSpace.ci.fsu.edu

username

personalhtml

mysiteSFTP

mysite

The Web server used for this class is called iSpace. Each student has a folder, also called a directory, on iSpace named after the student’s FSU username. In that folder is a folder named “html” where students store their Web sites for public access.

SFTP


Client/Server Communication


WEB SERVERWEB CLIENT

Web browser software like Internet Explorer and Firefox, is called Web Client software. Web client software communicate with Web servers to access Web content.




iSPACE WEB SERVERWEB CLIENT

ispace maps any Web client request for ~username to the “html” folder of that user.

http://ispace.ci.fsu.edu/~username username/html


location in html

URL Decoded:

Domain/Serverthe htmlfolder

http://ispace.ci.fsu.edu/~username/mysite/index.html

WebClient

WEB SERVER

iSpace.ci.fsu.edu

username

personalhtml

HTML REQUESTHTML REQUEST

mysite


index.html

seal.gif

style.css

WEB SERVER

iSpace.ci.fsu.edu

username

personalhtml

HTML RESPONSEHTML RESPONSE

HTML page and referenced files are delivered to client PC where they are viewed and cached for future access.


Important Points Web pages and sites are made up of interconnected

files Web site files must maintain their location relative to one

another within the Web site folder Web site are typically developed on a PC and copied to

a Web server Web client software requests Web pages from Web

servers using a URL Web server software and the DNS translate URLs to

physical storage locations on Web servers URL ispace.ci.fsu.edu/~username = username/html on

iSpace


Beyond the scope of our class – but good to understand.

Web Programming


Client/Server CommunicationClient/Server Communication


index.html

<html><head><title></title><script type="text/javascript"></script></head><body>

</body></html>

Javascript code may be embedded in HTML, interpreted and run by the client.

See www.fsu.edu


index.html

<html><head><title></title></head><body><form name="rez" method="post" action="http://service.cs.fsu.edu/cgibin/testing/ers.cgi">

<input type="submit" name="Submit" value="Continue"></form)</body></html>


HTML Forms may be used to collect user data and send it to the server for processing.



http://iSpace.ci.fsu.edu/username/mysite/index.html?name=ken

HTML REQUEST w/DATAHTML REQUEST w/DATA

HTML Forms may be used to collect user data and send it to the server for processing.




PHP code (or other programming language) runs on server, manipulating input and creating HTML output.

PHP





PHP code is embedded in html code and stored in a .php file.

PHP




Other programming languages (PL’s) like Perl, Java, C++, store code in a separate file on the server and access it using CGI.

PHP




Programs may access data in a databaseusing a database manipulation language (DBML) like MySQL.

PHP + MySQL

DBDB



A Web page is created “on the fly” as output from server side software.

PHP + MySQL

DBDBProgram Output as HTMLProgram Output as HTML



(X)HTMLFORMSIMG: JPG/GIF/PNGCSSJAVASCRIPTJAVA

PHP & OTHER PL’SMYSQL & OTHER DBML’S

DBDB


REVIEW

Documents

Web architecture