Web architecture v3
-
Upload
program-in-interdisciplinary-computing -
Category
Technology
-
view
1.612 -
download
4
Transcript of Web architecture v3
![Page 1: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/1.jpg)
CGS 2835 Interdisciplinary Web Development
Web ArchitectureWeb Architecture
![Page 2: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/2.jpg)
CGS 2835 Interdisciplinary Web Development
Web Design Web Development
Visual DesignGraphic DesignPage LayoutThemeHTML, CSS, JS
Server Administration
Coding, SoftwareClient-Side InteractivityServer-Side InformationPage GenerationHandling RequestsManipulating DataMultiple markup and programming languages
Scaling requestsNetworking serversEnsuring reliablitySecuring dataBacking up dataHandling attacksHardware
![Page 3: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/3.jpg)
CGS 2835 Interdisciplinary Web Development
Protocols
• Protocols are methods computers use to talk with each other
• HTTP: HyperText Transfer Protocol• HTTPS: HTTP Secure• SSH: Secure Shell Protocol• SFTP: Secure File Transfer Protocol
![Page 4: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/4.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 with files stored in one common folder (or directory).
![Page 5: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/5.jpg)
WEB SERVER
iSpace-2013.cci.fsu.edu
username
personalhtml
mysiteSFTP
Web site files are transferred to a Web server maintaining the relative locations of connected files.
SFTP:// Secure File Transfer Protocol
When using a web host, you will need to ask where your files need to be uploaded on the web server to be hosted to the web.
![Page 6: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/6.jpg)
Resource on a server
In the browser, you request resources with HTTP GET using a URL:
Domain/Server
http://ispace-2013.cci.fsu.edu/~username/mysite/index.html
WebClient
WEB SERVER
iSpace-2013.cci.fsu.edu
username
personalhtml
HTTP REQUESTHTTP REQUEST
mysiteHTTP://Hyper Text Transfer Protocol
URLUniform Resource Locator
![Page 7: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/7.jpg)
index.html
seal.gif
style.css
WEB SERVER
iSpace-2013.cci.fsu.edu
username
personalhtml
HTTP RESPONSEHTTP RESPONSE
An HTML page and referenced files are delivered to client PC where they are cached and rendered in a web browser.
These resources are requested with HTTP GET
![Page 8: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/8.jpg)
Client/Server Communication
Client/Server Communication
WEB SERVERWEB CLIENT
HTTP GET: Get a resource from a server (HTML, Images, Data)
HTTP POST: Post data to a server(logging in to a website, sending information, uploading files)
HTTP Responses200 OK: When the request could be satisfied
403 Forbidden: When the resource is valid, but the user does not have access
404 Not Found: When the resource could not be found
500 Internal Server Error: When there is either a programming error or server problem in fufilling the request
![Page 9: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/9.jpg)
WEB SERVERWEB CLIENT
http://iSpace-2013.cci.fsu.edu/username/mysite/index.html?name=geo
HTTP REQUEST w/DATAHTTP REQUEST w/DATA
Including data (after the ? in a URL) is an HTTP GET request with extra data to specify what to get from the server
Data sent in an HTTP POST is hidden from the URL
![Page 10: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/10.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.
Forms are most commonly sent to a server with HTTP POST
![Page 11: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/11.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 is also delivered from a server to a client to provide interactivity on a website
JS
![Page 12: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/12.jpg)
WEB SERVERWEB CLIENT
HTTP REQUEST w/DATAHTTP REQUEST w/DATA
PHP code (or other programming language) runs on server, manipulating input and creating HTML output.
PHP
![Page 13: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/13.jpg)
WEB SERVERWEB CLIENT
HTTP REQUEST w/DATAHTTP REQUEST w/DATA
PHP code is embedded in html code and stored in a .php file.
PHP
PHP code cannot run on the client browser,PHP is processed server-side
![Page 14: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/14.jpg)
WEB SERVERWEB CLIENT
HTTP REQUEST w/DATAHTTP REQUEST w/DATA
Other programming languages like Perl, Java, C++, Python, Ruby can also be used to process HTTP requests.
Other Programming Languages
![Page 15: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/15.jpg)
WEB SERVERWEB CLIENT
HTTP REQUEST w/DATAHTTP REQUEST w/DATA
Programs may access data in a databaseusing a database manipulation language (DBML) like MySQL.
PHP + MySQL
DBDB
![Page 16: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/16.jpg)
WEB SERVERWEB CLIENT
A Web page is created “on the fly” as output from server side software.
PHP + MySQL
DBDBHTTP ResponseHTTP Response
HTMLCSSJavascriptImages
![Page 17: Web architecture v3](https://reader035.fdocuments.us/reader035/viewer/2022081514/555ae4c5d8b42a4c7d8b46f7/html5/thumbnails/17.jpg)
Client/Server Communication
HTTP
Client/Server Communication
HTTPIn the web browser:HTMLHTML FORMSIMG: JPG/GIF/PNGCSSJAVASCRIPT
On the web server:Stores filesPHP & OTHER PL’SMYSQL & OTHER DBML’S
DBDB
WEB SERVERWEB CLIENT
REVIEW