web architecture v3

CGS 2835 Interdisciplinary Web Development

Web ArchitectureWeb Architecture


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


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


username

personalhtml

HTTP REQUESTHTTP REQUEST

mysiteHTTP://Hyper Text Transfer Protocol

URLUniform Resource Locator

index.html

seal.gif

style.css

WEB SERVER


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


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


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


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>



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

index.html

<html><head><title></title><script type="text/javascript"></script></head><body>

</body></html>

JavaScript code is also delivered from a server to a client to provide interactivity on a website

JS



PHP code (or other programming language) runs on server, manipulating input and creating HTML output.

PHP



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



Other programming languages like Perl, Java, C++, Python, Ruby can also be used to process HTTP requests.

Other Programming Languages



Programs may access data in a databaseusing a database manipulation language (DBML) like MySQL.

PHP + MySQL

DBDB


A Web page is created “on the fly” as output from server side software.

PHP + MySQL

DBDBHTTP ResponseHTTP Response

HTMLCSSJavascriptImages


HTTP


HTTPIn the web browser:HTMLHTML FORMSIMG: JPG/GIF/PNGCSSJAVASCRIPT

On the web server:Stores filesPHP & OTHER PL’SMYSQL & OTHER DBML’S

DBDB


REVIEW

web architecture v3

Technology

gifmysitemy profile