Web architecture
-
Upload
program-in-interdisciplinary-computing -
Category
Technology
-
view
4.387 -
download
0
description
Transcript of Web architecture
![Page 1: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/1.jpg)
CGS 2835 Interdisciplinary Web Development
Web ArchitectureWeb Architecture
![Page 2: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/2.jpg)
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.
![Page 3: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/3.jpg)
WEB SERVER
iSpace.ci.fsu.edu
username
personalhtml
mysiteSFTP
Web sites are transferred to a Web server maintaining the relative locations of connected files.
![Page 4: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/4.jpg)
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/
![Page 5: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/5.jpg)
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.
![Page 6: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/6.jpg)
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.
![Page 7: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/7.jpg)
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.
![Page 8: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/8.jpg)
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
![Page 9: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/9.jpg)
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
![Page 10: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/10.jpg)
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?
![Page 11: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/11.jpg)
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
![Page 12: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/12.jpg)
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
![Page 13: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/13.jpg)
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
![Page 14: Web architecture](https://reader033.fdocuments.in/reader033/viewer/2022051816/547722f2b4af9fd52d8b47d6/html5/thumbnails/14.jpg)
Client/Server Communication
Client/Server Communication
(X)HTMLFORMSIMG: JPG/GIF/PNGCSSJAVASCRIPTJAVA
PHP & OTHER PL’SMYSQL & OTHER DBML’S
DBDB
WEB SERVERWEB CLIENT
REVIEW