web architecture
DESCRIPTION
TRANSCRIPT
CGS 2835 Interdisciplinary Web Development
Web ArchitectureWeb Architecture
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
Web sites are developed on PC with files stored in one common folder.
WEB SERVER
iSpace.ci.fsu.edu
username
personalhtml
mysiteSFTP
Web sites are transferred to a Web server maintaining the relative locations of connected files.
Location in html
URL:
Domain/ServerYour htmlfolder
http://ispace.ci.fsu.edu/~username/mysite/index.html
WebClient
WEB SERVER
iSpace.ci.fsu.edu
username
personalhtml
HTML REQUESTHTML REQUEST
mysite
Web pages are requested by users using a URL or link.
Case matters.
index.html or index.phpAre the pages a web server will serve by default for a folder e.g.http://ispace.ci.fsu.edu/~username/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 cached.
Client/Server Communication
Client/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.
WEB SERVERWEB CLIENT
index.html
<html><head><title></title></head><body><form name="rez" method="post" action=“process.php”>
<input type="submit" name="Submit" value="Continue"></form></body></html>
Client/Server Communication
Client/Server Communication
HTML Forms may be used to collect user data and send it to the server for processing.
WEB SERVERWEB CLIENT
http://iSpace.ci.fsu.edu/username/mysite/process.php?name=geo
HTML REQUEST w/DATAHTML REQUEST w/DATA
Data sent to the server for processing can be put in the URL
This allows people to share links with the same data being sent to the server
WEB SERVERWEB CLIENT
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
HTML REQUEST w/DATAHTML REQUEST w/DATA
PHP code is embedded in html code and stored in a .php file.
PHP
Can embedded PHP code run on the client?
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
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
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
Client/Server Communication
Client/Server Communication
(X)HTMLFORMSIMG: JPG/GIF/PNGCSSJAVASCRIPTJAVA
PHP & OTHER PL’SMYSQL & OTHER DBML’S
DBDB
WEB SERVERWEB CLIENT
REVIEW