Transcript Web Architecture

Web
Architecture
CPTE 212
John Beckett
What This Class Is About

It isn’t about all the technologies used on
the web…
• But we’ll mention a number of them

It isn’t about how to make a web site
look good…
• That’s JOUR 242.

It’s about making a web site function
• Emphasis is on what goes on “underneath the
hood”.
What We Won’t Learn
In This Class



All the various technologies used on the web.
They grow faster than you can learn, so the
class would last forever!
There are books (Deitel) which attempt full
coverage.
• They are broad but not deep.


We will learn a toolset that will do the job,
knowing that in practice you’ll probably
substitute some of the tools with others.
This is a foundation you can use to expand into
other Web technologies
The Goal

We want a set of technologies that:
• Lets you do what needs to be done at a basic
•
•
•
level
Is used in the industry, so jobs are there
Covers the concepts involved so you will
understand what other technologies do
Gives you a foundation on which you can
build as you add skills
Our Platform - LAMP





LINUX – operating system on HW server.
Apache – Web server software, supports HTML
MySQL – Database engine
PHP – Server-side scripting engine
XAMPP implements the “AMP” part on your
Windows computer.
•
But…you are responsible for homework on
hw.cs.southern.edu!
Nano-Servers



Later in the semester we’ll bring up a
server for each of you running Windows
The Web server will be IIS
The server-side language is ASP
Languages We’ll Use





XHTML – XML-compliant variant of
HTML
PHP – Server-side scripting
• Includes DBMLs for connecting to databases
SQL – “Standard” language for database
operations
JavaScript – Client-side scripting
ASP – Server-side on Windows platform
DESIGN CONSIDERATIONS
Why Do A Web Site?




Provide information to anyone who
comes
Obtain feedback
Take orders
Provide information on progress of
orders
Architectural Comparison
Purpose
Technology
Challenge
General Information
Standard HTML
May be inquirydriven from db
Connect data sources
Obtain Feedback
Email, Forum
+ Appropriate level of
control
Take Orders
Database
++ Transaction process,
performance
Order Tracking
Database connected
to events
+++ Connecting data
sources
WHAT GOES OVER THE
WIRE
URL structure




[Protocol name followed by colon
[username[:password]@]
Hostname[.domain]]
•
[Path
•
•

Dotted format ending with top level domain.
Traditional: If it ends with a slash, it’s a directory and
directory index is used.
Now: If last item is a directory and a directory index is
declared in server config, it’s used.
Parameters]
What is HTTP?


Protocol used to transmit web
materials from server to client.
Requires a TCP/IP connection
such as dialup, Ethernet,
Satellite link, DSL, or Cable
Modem.
• These all involve TCP/IP “tunneling”
•
through some other protocol.
The link may be proprietary
• Open architectures are winning
A protocol is a
set of rules for
communicating.
Example: “Sign
language” used
by some
American Indian
tribes
A Very Basic Look at HTTP
User’s
Computer
Request
This works even if we’re
behind a small router,
because the router
translates addresses.
So don’t worry about the
“network translation”
issue.
The
Internet
Server
Response
User’s computer (client) and Server
each have unique IP addresses. The
actual method of delivery over the
Internet is somewhat irrelevant.
Looking Deeper
User’s
Computer
Request to TCP port 80
Server
Response
Embedded Objects
Request to TCP port 80
User’s
Computer
Response in HTML
“Send me that image”
Cute_image.jpg
A given page may have many images,
which the browser may request at the
same time.
Server
The Static model
(We assume at this point that everything to be
sent to the user is pre-packaged on the
server.)
HTTP Request to TCP port 80
User’s
Computer
HTTP Response containing HTML
HTTP request: “Send me that image”
HTTP Response containing image
HTTP is the protocol. The request format may be an
HTTP command such as “GET” The response will be
HTML, or media of some sort.
Server
Graphics

Sample syntax to include a graphic:

Graphic types that work:
• <img src=“myimage.gif” />
• bmp – Neither compressed nor transparent
• gif – Has transparency, but is not compressed
• jpg – Compressed but isn’t transparent
• png – Both, but emerging
But Wait, There’s More!

We can send information from the client
to the server
• In the URL line
• In the headers

Web2/AJAX allows JavaScript to
communicate with the server without
reloading the page
DYNAMIC WEB
HTML
w/
Encapsulated
Script
Making It Dynamic
We can make the user experience depend on
something
JavaScript
Rendering
Engine
Scripting
Engine
User’s
Computer
Server
H.D.
•User actions
•Information known by the server.
Request to TCP port 80
Response With Encapsulated Script
“Send me that image”
Cute_image.jpg
A scripting engine executes code targeted
for it, adds results, then sends them
onward without its code.
Scripting
PHP
Engine
Server
We can use procedural code on either the
server side, the client side, or both.
The “Evolution” of code
JavaScript
Rendering
Engine
HTML
HTML with
encapsulated
JavaScript
HTML with
encapsulated
PHP and
JavaScript
Server
H.D.
Scripting
Engine
User’s
Computer
“Send me that image”
Cute_image.jpg
Scripting
PHP
Engine
Server
Each scripting language writes what is sent
A scripting engine executes code
onward. e.g. PHP writes HTML, and
targeted for it, adds results, then
sends them onward without its code. sometimes JavaScript.
Client-Side Scripts
JavaScript is most commonly used
 Invented by Netscape
•


Named for Java because Java was a hot topic, but
despite its resemblance is not Java
Runs on the browser - subject to whatever issues
the browser has
•
•
•

Microsoft’s alternative didn’t make it in the marketplace
because Netscape’s version grabbed market share
Does it run this form of JavaScript?
Has the user disabled some functions?
Is the user’s computer slow or distracted?
Implementation chaos has been settled by ECMA
•
Deprecated techniques are still being used
Server-side Scripting Approaches
CGI – External Interpreter
 Could be used with
almost any interpreted
procedural language
(e.g. BASIC, Java,)
 Originally done using
PERL
 Perl wasn’t designed for
the web
 Perl wasn’t as bad as
any of the alternatives
 No longer widely used
Module – Integrate w/Svr




Microsoft’s ASP family
-> ASP.NET
PHP
Created specifically for
the web
Written by people who
wanted to improve on
PERL, functionality
similar to ASP but
better syntax
What is CGI?



CGI (Common Gateway Interface) is the
ability of a page to invoke a separate
program on the host for processing.
Usually, that program is perl.
It could be any executable program in
the host’s native language.
Using Perl for CGI



Initially, the Web-specific functions had
to be hand-coded in Perl
Libraries were added so that commonlyused functions (like obtaining POST
variable values) could be done easily
and consistently
Perl is still Perl: It is “eclectic” and
therefore messy – like a mobile home
with add-on rooms (still a trailer)
Mod_Perl

Perl interpreter became an added
module for Apache, avoiding CGI
overhead
• Bringing up Perl for each page delivered



Subtle differences in how variables are
handled.
Solves the performance issue.
Doesn’t solve the muddled-language
issue.
PHP




Developed by people who did not like
the messiness of Perl or performance
difficulties like the CGI architecture.
Has co-evolved with Perl, each taking
ideas from the other.
Clearer language than Perl
New libraries of functions deal with XML
and databases. (Perl has the same.)
How do PHP and ASP differ?

ASP is a set of functions built-in to
Microsoft Internet Information Server
(IIS) which interpret a language on the
server side.
• (Non-Microsoft implementation: Mono)


PHP is an add-on to Apache or IIS,
which interprets a language on the
server side.
Neither is a function of Apache.
• Both can be added.
How do ASP and ASP.NET
differ?






ASP uses VBScript, a variant of the original
BASIC language.
ASP .NET uses Visual BASIC, a more
extensive and GUI-oriented system.
ASP may use compiled languages such as
C++
Extension is .asp.
ASP .NET adds a number of additional
features as well.
Extension is .aspx.
HTML/XHTML Syntax





Page markup language used for text
materials – related to SGML & XML.
Composed of tags, attributes, and text.
General form:
•<tag
attribute="value">text</tag>
Tags may be nested.
Tags must be symmetrical.
•<tag>…</tag>
XHTML Syntax Note



We are using the current version of
HTML, called “XHTML”
XHTML:
•<img
src=“mygraphic.jpg” />
Note the slash: It is to clearly state that
this is the end of the tag. We could have
said:
•<img
src=“mygraphic.jpg”></img>
Why only one Client-Side Language
and many Server-Side Languages?


To be effective, a client-side language
has to be implemented on every browser
that will visit your site.
The server-side language only runs on
your site. So it may be any language
your web server supports.
• Portability may be a consideration, but PHP
runs anywhere
MIME types


Originally developed for handling email
attachments.
Same concept used for the Web: the
“extension” is used to indicate how the
file is to be handled.
• Which helper app is to be used (CGI or
•
module)
X- means experimental; app is sent the
program or use browser plug-in
HTTP Request Methods






GET – Simply send the document.
HEAD – Send only header info.
• Has it changed since cached?
POST – Use enclosed data to process this
request (form processing).
PUT – Save this document on the server.
DELETE – Delete this document.
XMLHttpRequest – used for AJAX
Three-Tiered Architecture
Client
Web
Server
Database
Server
Former
View
Web App.
Server
Web Services
Server
New
View
The former idea of three-tiered web architecture included a client
(browser), web server, and database server.
The new view is that the web server is more active (for instance,
connecting with more sources of data and involving more complex
implementation), and connects with a Web Services server - which in
turn may connect with various sources of data including database
server(s).
Other
sources
What’s the Difference?
Database Approach
 Gives an application
access to the database
 Select: What’s there?
 Insert: Add data
 Update: Change data

Application makes
decisions about what will
happen to database
Web Services Approach
 Responds to an
application’s request
 Validates and
authenticates
 Responds

Service makes decisions
about what will happen to
database
Implementing Apache Directives

You must restart Apache to implement any
changes you make in the configuration
XAMPP has a console for doing this.

Under LINUX: #/etc/init.d/apache2 restart

Apache Directives




ServerName – Used for physical server.
Default domain served.
ServerRoot – Where the server software
is located.
ServerAdmin – Where to send
complaints.
DocumentRoot – Where the Web page
tree begins.
Apache Directives



Alias – Used for a pseudo-directory.
•
The homework server uses this for individuals.
Redirect – Points to another server.
•
Useful if you move things.
DirectoryIndex – List of possible welcome
pages for a directory. Homework server says:
DirectoryIndex index.html index.htm
index.shtml index.cgi index.php

UserDir – Specifies directory within a user’s
area if tilde (“~”) access is used.
IIS Configuration

Controlled with GUI
• Typically Microsoft: Things move around from
release to release

Mirrors Apache functionality
Data Bases

Good way to keep data organized
• Separates data from meta-data (information
on how the data is structured)



Allows programs to keep working even if
database is redesigned (provided
original data is still there)
Architected interface usable by many
languages
Provides for placing database on any
server
What Web Services Do


A data base server obtains and updates
data based on commands given it
A Web service expands this concept to
include include processing
• Process Credit Card transactions
• Provide real-time data such as stock quotes
or weather information
How Web Services Function


Accept requests
Provide information
In PHP, you can treat any Web site as a Web Service with the
file() function, which places the result of the http GET in a
variable. This is called a “mashup”.

Enabling technology: XML
• How data coming from Web Services is
usually structured

Problem: Battle of the standards
• SOAP is most common
AJAX (from Wikipedia)









Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for
creating interactive web applications. The intent is to make web pages feel more responsive by
exchanging small amounts of data with the server behind the scenes, so that the entire web page
does not have to be reloaded each time the user makes a change. This is meant to increase the
web page's interactivity, speed, and usability.
The Ajax technique uses a combination of:
XHTML (or HTML) and CSS, for marking up and styling information.
The DOM accessed with a client-side scripting language, especially ECMAScript implementations
such as JavaScript and JScript, to dynamically display and interact with the information
presented.
The XMLHttpRequest object to exchange data asynchronously with the web server. In some Ajax
frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest
object to exchange data with the web server.
And optionally:
XML is sometimes used as the format for transferring data between the server and client,
although any format will work, including preformatted HTML, plain text, JSON and even EBML.
These files may be created dynamically by some form of server-side scripting.
SOAP is a protocol for exchanging XML-based messages over a computer network, normally
using HTTP. SOAP forms the foundation layer of the Web services stack, providing a basic
messaging framework that more abstract layers can build on.
Like DHTML, LAMP and SPA, Ajax is not a technology in itself, but a term that refers to the use of
a group of technologies together.
HTML Validator



Use http://validator.w3.org/ to test your
code to see if it is “clean”.
You may wish to include the Validation
icon code so you can check it later.
Failure to pass validation may result in
loss of points on assignments!
Our Class Platform
We Cover
Technologies
We Touch On
We Do Not Cover
PHP
CSS, Mobile apps
ASP, Java Servlets
MySQL
Content
Management
Postgress, Microsoft
SQL Server, Oracle
JavaScript
XML
Forms
AJAX
Concepts
We Cover
We Do Not Cover
State Management
Web Services
Simple db Queries
Complex DB Queries
Basic security design
Complex exploits