web architecture
Post on 26-Jun-2015
3.183 Views
Preview:
TRANSCRIPT
© 2004 Ken Baldauf, All rights reserved.
Web Architecture
Ken BaldaufProgram in Interdisciplinary ComputingFlorida State University
clients, servers, files, folders, urls and more
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
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
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
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
© 2010 Ken Baldauf, All rights reserved.
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
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
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
© 2010 Ken Baldauf, All rights reserved.
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
© 2010 Ken Baldauf, All rights reserved.
Client/Server Communication
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.
© 2010 Ken Baldauf, All rights reserved.
Client/Server Communication
Client/Server Communication
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
© 2010 Ken Baldauf, All rights reserved.
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
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
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
© 2004 Ken Baldauf, All rights reserved.
Beyond the scope of our class – but good to understand.
Web Programming
© 2010 Ken Baldauf, All rights reserved.
Client/Server CommunicationClient/Server Communication
WEB SERVERWEB CLIENT
index.html
<html><head><title></title><script type="text/javascript"><!--var value1 = 45;var value2 = 60;var sum = value1 + value2;var str = value1;document.write(str);//--></script></head><body>
</body></html>
Javascript code may be embedded in HTML, interpreted and run by the client.
See www.fsu.edu
© 2010 Ken Baldauf, All rights reserved.
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>
Client/Server CommunicationClient/Server Communication
HTML Forms may be used to collect user data and send it to the server for processing.
WEB SERVERWEB CLIENT
© 2010 Ken Baldauf, All rights reserved.
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.
WEB SERVERWEB CLIENT
© 2010 Ken Baldauf, All rights reserved.
HTML REQUEST w/DATAHTML REQUEST w/DATA
PHP code (or other programming language) runs on server, manipulating input and creating HTML output.
PHP
WEB SERVERWEB CLIENT
© 2010 Ken Baldauf, All rights reserved.
WEB SERVERWEB CLIENT
HTML REQUEST w/DATAHTML REQUEST w/DATA
PHP code is embedded in html code and stored in a .php file.
PHP
© 2010 Ken Baldauf, All rights reserved.
WEB SERVERWEB CLIENT
HTML REQUEST w/DATAHTML REQUEST w/DATA
Other programming languages (PL’s) like Perl, Java, C++, store code in a separate file on the server and access it using CGI.
PHP
© 2010 Ken Baldauf, All rights reserved.
WEB SERVERWEB CLIENT
HTML REQUEST w/DATAHTML REQUEST w/DATA
Programs may access data in a databaseusing a database manipulation language (DBML) like MySQL.
PHP + MySQL
DBDB
© 2010 Ken Baldauf, All rights reserved.
WEB SERVERWEB CLIENT
A Web page is created “on the fly” as output from server side software.
PHP + MySQL
DBDBProgram Output as HTMLProgram Output as HTML
© 2010 Ken Baldauf, All rights reserved.
Client/Server CommunicationClient/Server Communication
(X)HTMLFORMSIMG: JPG/GIF/PNGCSSJAVASCRIPTJAVA
PHP & OTHER PL’SMYSQL & OTHER DBML’S
DBDB
WEB SERVERWEB CLIENT
REVIEW
top related