2. Web Design
Visual Design
Graphic Design
Page Layout
Theme
HTML, CSS, JS
Web Development
Coding, Software
Client-Side Interactivity
Server-Side Information
Page Generation
Handling Requests
Manipulating Data
Multiple markup and
programming languages
Server Administration
Scaling requests
Networking servers
Ensuring reliablity
Securing data
Backing up data
Handling attacks
Hardware
CGS 2835 Interdisciplinary Web Development
3. 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
CGS 2835 Interdisciplinary Web Development
4. Web sites are developed with files stored in one common folder (or directory).
index.html
<html>
<head>
<title>My Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
style.css
profile.html
me.jpg
<img src=“seal.gif” />
index.html
seal.gif
mysite
<a href=“profile.html”>My Profile</a>
</body>
</html>
5. 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.
WEB SERVER
iSpace-2013.cci.fsu.edu
username
html
mysite
SFTP
personal
6. In the browser, you request resources with HTTP GET using a URL:
http://ispace-2013.cci.fsu.edu/~username/mysite/index.html
Domain/Server
Web
Client
WEB SERVER
Resource on a server
iSpace-2013.cci.fsu.edu
HTTP REQUEST
HTTP REQUEST
username
html
HTTP://
Hyper Text Transfer Protocol
URL
Uniform Resource Locator
mysite
personal
7. HTTP RESPONSE
HTTP RESPONSE
WEB SERVER
iSpace-2013.cci.fsu.edu
seal.gif
style.css
username
index.html
html
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
personal
8. WEB SERVER
WEB CLIENT
Client/Server
Client/Server
Communication
Communication
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 Responses
200 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
9. WEB SERVER
WEB CLIENT
HTTP REQUEST w/DATA
HTTP REQUEST w/DATA
http://iSpace-2013.cci.fsu.edu/username/mysite/index.html?
name=geo
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
12. WEB SERVER
WEB CLIENT
HTTP REQUEST w/DATA
HTTP REQUEST w/DATA
PHP
PHP code (or other programming
language) runs on server,
manipulating input and creating HTML
output.
13. WEB SERVER
WEB CLIENT
HTTP REQUEST w/DATA
HTTP REQUEST w/DATA
PHP
PHP code is embedded in html code
and stored in a .php file.
PHP code cannot run on the client browser,
PHP is processed server-side
14. WEB SERVER
WEB CLIENT
HTTP REQUEST w/DATA
HTTP REQUEST w/DATA
Other
Programming
Languages
Other programming languages like Perl,
Java, C++, Python, Ruby can also be used
to process HTTP requests.
15. WEB SERVER
WEB CLIENT
HTTP REQUEST w/DATA
HTTP REQUEST w/DATA
DB
DB
PHP +
MySQL
Programs may access data in a database
using a database manipulation language
(DBML) like MySQL.
16. WEB SERVER
WEB CLIENT
HTTP Response
HTTP Response
DB
DB
HTML
CSS
Javascript
Images
PHP +
MySQL
A Web page is created “on the fly” as
output from server side software.
17. REVIEW
WEB SERVER
WEB CLIENT
In the web browser:
HTML
HTML FORMS
IMG: JPG/GIF/PNG
CSS
JAVASCRIPT
Client/Server
Client/Server
Communication
Communication
HTTP
HTTP
DB
DB
On the web server:
Stores files
PHP & OTHER PL’S
MYSQL & OTHER DBML’S