Post on 19-May-2015
CGS 2835 Interdisciplinary Web Development
Web ArchitectureWeb Architecture
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
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
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).
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.
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
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
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
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
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
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
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
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
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
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
WEB SERVERWEB CLIENT
A Web page is created “on the fly” as output from server side software.
PHP + MySQL
DBDBHTTP ResponseHTTP Response
HTMLCSSJavascriptImages
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