610.web architecture
TRANSCRIPT
-
8/7/2019 610.Web Architecture
1/86
Introduction to theIntroduction to theWebWeb
-
8/7/2019 610.Web Architecture
2/86
PrerequisitesPrerequisites
Basic computer skillsBasic computer skills
Experience using the World Wide WebExperience using the World Wide Web
Experience developing object-orientedExperience developing object-orientedsoftwaresoftware
-
8/7/2019 610.Web Architecture
3/86
Learning ObjectivesLearning Objectives
Overview of Web and InternetOverview of Web and Internet
technologiestechnologies
Review of existing Web programmingReview of existing Web programmingtechnologiestechnologies
-
8/7/2019 610.Web Architecture
4/86
AgendaAgenda
Internet TechnologiesInternet Technologies
Programming Languages and ParadigmsProgramming Languages and Paradigms
Programming the WebProgramming the Web
-
8/7/2019 610.Web Architecture
5/86
Internet TechnologiesInternet Technologies
The World Wide WebThe World Wide Web A way to access and share informationA way to access and share information
Technical papers, marketing materials, recipes,Technical papers, marketing materials, recipes,......
A huge network of computers: the InternetA huge network of computers: the Internet Graphical, not just textualGraphical, not just textual Information is linked to other informationInformation is linked to other information
Application development platformApplication development platform Shop from homeShop from home Provide self-help applications for customersProvide self-help applications for customers
and partnersand partners
-
8/7/2019 610.Web Architecture
6/86
Internet TechnologiesInternet Technologies
WWW ArchitectureWWW Architecture
Web Server
PC/Mac/Unix
+ BrowserClient
Server
Request:
http://www.msn.com/default.asp
Response:
Network TCP/IP
-
8/7/2019 610.Web Architecture
7/86
Internet TechnologiesInternet Technologies
WWW ArchitectureWWW Architecture Client/Server, Request/Response architectureClient/Server, Request/Response architecture
You request a Web pageYou request a Web page e.g.e.g. http://www.msn.com/default.asphttp://www.msn.com/default.asp
HTTP requestHTTP request
The Web server responds with data in the form of a WebThe Web server responds with data in the form of a Web
pagepage HTTP responseHTTP response
Web page is expressed as HTMLWeb page is expressed as HTML
Pages are identified as a Uniform Resource Locator (URL)Pages are identified as a Uniform Resource Locator (URL) Protocol:Protocol: httphttp
Web server:Web server: www.msn.comwww.msn.com
Web page:Web page: default.aspdefault.asp
Can also provide parameters:Can also provide parameters: ?name=Leon?name=Leon
-
8/7/2019 610.Web Architecture
8/86
Internet TechnologiesInternet Technologies
Web StandardsWeb Standards Internet Engineering Task Force (IETF)Internet Engineering Task Force (IETF)
http://www.ietf.org/http://www.ietf.org/ Founded 1986Founded 1986
Request For Comments (RFC) atRequest For Comments (RFC) at
http://www.ietf.org/rfc.htmlhttp://www.ietf.org/rfc.html
World Wide Web Consortium (W3C)World Wide Web Consortium (W3C)
http://www.w3.orghttp://www.w3.org Founded 1994 by Tim Berners-LeeFounded 1994 by Tim Berners-Lee
Publishes technical reports andPublishes technical reports and
recommendationsrecommendations
-
8/7/2019 610.Web Architecture
9/86
Internet TechnologiesInternet Technologies
Web Design PrinciplesWeb Design Principles Interoperability:Interoperability: Web languages andWeb languages and
protocols must be compatible with oneprotocols must be compatible with one
another independent of hardware andanother independent of hardware and
software.software. Evolution:Evolution: The Web must be able toThe Web must be able to
accommodate future technologies.accommodate future technologies.
Encourages simplicity, modularity andEncourages simplicity, modularity andextensibility.extensibility.
Decentralization:Decentralization: Facilitates scalabilityFacilitates scalability
and robustness.and robustness.
-
8/7/2019 610.Web Architecture
10/86
Internet TechnologiesInternet Technologies
Hypertext Markup Language (HTML)Hypertext Markup Language (HTML) The markup language used to representThe markup language used to represent
Web pages for viewing by peopleWeb pages for viewing by people Designed to display data, not store/transfer dataDesigned to display data, not store/transfer data
Rendered and viewed in a Web browserRendered and viewed in a Web browser Can containCan contain linkslinks to images, documents,to images, documents,
and other pagesand other pages Not extensibleNot extensible Derived from Standard Generalized MarkupDerived from Standard Generalized Markup
Language (SGML)Language (SGML) HTML 3.2, 4.01, XHTML 1.0HTML 3.2, 4.01, XHTML 1.0
-
8/7/2019 610.Web Architecture
11/86
Internet TechnologiesInternet Technologies
HTML FormsHTML Forms Enables you to create interactiveEnables you to create interactive
user interface elementsuser interface elements ButtonsButtons
Text boxesText boxes
Drop down listsDrop down lists
Check boxesCheck boxes
User fills out the form and submits itUser fills out the form and submits it Form data is sent to the Web server viaForm data is sent to the Web server via
HTTP when the form is submittedHTTP when the form is submitted
-
8/7/2019 610.Web Architecture
12/86
Internet TechnologiesInternet Technologies
Hypertext Transport Protocol (HTTP)Hypertext Transport Protocol (HTTP) The top-level protocol used to request andThe top-level protocol used to request and
return datareturn data E.g. HTML pages, GIFs, JPEGs, Microsoft WordE.g. HTML pages, GIFs, JPEGs, Microsoft Word
documents, Adobe PDF documents, etc.documents, Adobe PDF documents, etc.
Request/Response protocolRequest/Response protocol
Methods:Methods: GETGET,, POSTPOST,, HEADHEAD, ,
HTTP 1.0: simpleHTTP 1.0: simple HTTP 1.1: more complexHTTP 1.1: more complex
-
8/7/2019 610.Web Architecture
13/86
GET /default.asp HTTP/1.0
Accept: image/gif, image/x-bitmap, image/jpeg, */*Accept-Language: en
User-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
Connection: Keep-Alive
If-Modified-Since: Sunday, 17-Apr-96 04:32:58 GMT
Internet TechnologiesInternet Technologies
HTTP RequestHTTP Request
Method File HTTP version Headers
Data none for GET
Blank line
-
8/7/2019 610.Web Architecture
14/86
HTTP/1.0 200 OKDate: Sun, 21 Apr 1996 02:20:42 GMT
Server: Microsoft-Internet-Information-Server/5.0
Connection: keep-alive
Content-Type: text/html
Last-Modified: Thu, 18 Apr 1996 17:39:05 GMT
Content-Length: 2543
Some data... blah, blah, blah
Internet TechnologiesInternet Technologies
HTTP ResponseHTTP Response
HTTP version Status code Reason phrase Headers
Data
-
8/7/2019 610.Web Architecture
15/86
Internet TechnologiesInternet Technologies
HTTP Server Status CodesHTTP Server Status Codes
CodeCode DescriptionDescription
200200 OKOK
201201
CreatedCreated
301301 Moved PermanentlyMoved Permanently
302302 Moved TemporarilyMoved Temporarily
400400 Bad Request notBad Request notunderstoodunderstood
401401 UnauthorizedUnauthorized
403403 Forbidden not authorizedForbidden not authorized
404404 Not FoundNot Found
500500 Internal Server ErrorInternal Server Error
-
8/7/2019 610.Web Architecture
16/86
Internet TechnologiesInternet Technologies
HTTPHTTP HTTP is a stateless protocolHTTP is a stateless protocol
Each HTTP request is independent ofEach HTTP request is independent of
previous and subsequent requestsprevious and subsequent requests
HTTP 1.1 introducedHTTP 1.1 introduced keep-alivekeep-alive forfor
efficiencyefficiency
Statelessness has a big impact on howStatelessness has a big impact on how
scalable applications are designedscalable applications are designed
-
8/7/2019 610.Web Architecture
17/86
Internet TechnologiesInternet Technologies
CookiesCookies A mechanism to store a small amount ofA mechanism to store a small amount of
information (up to 4KB) on the clientinformation (up to 4KB) on the client
A cookie is associated with a specific webA cookie is associated with a specific web
sitesite
Cookie is sent in HTTP headerCookie is sent in HTTP header
Cookie is sent with each HTTP requestCookie is sent with each HTTP request
Can last for only one session (until browserCan last for only one session (until browser
is closed) or can persist across sessionsis closed) or can persist across sessions
Can expire some time in the futureCan expire some time in the future
-
8/7/2019 610.Web Architecture
18/86
-
8/7/2019 610.Web Architecture
19/86
Internet TechnologiesInternet Technologies
URIs, URLs and URNsURIs, URLs and URNs Uniform Resource Identifier (URI = URL or URN)Uniform Resource Identifier (URI = URL or URN)
Generic term for all textual names/addressesGeneric term for all textual names/addresses
Uniform Resource Locator (URL)Uniform Resource Locator (URL)
The set of URI schemes that have explicit instructions onThe set of URI schemes that have explicit instructions onhow to access the resource over the Internet,how to access the resource over the Internet,e.g.e.g. httphttp,, ftpftp,, gophergopher
Uniform Resource Name (URN)Uniform Resource Name (URN)1) A URI that has an institutional commitment to1) A URI that has an institutional commitment to
availability, etc.availability, etc.
2) A particular scheme intended to identify resources2) A particular scheme intended to identify resources
e.g.e.g.urn:schemas:httpmail:subjecturn:schemas:httpmail:subject
-
8/7/2019 610.Web Architecture
20/86
Internet TechnologiesInternet TechnologiesMultipurpose Internet Mail Extensions (MIME)Multipurpose Internet Mail Extensions (MIME) Defines types of data/documentsDefines types of data/documents
text/plaintext/plain
text/htmltext/html
image/gifimage/gif
image/jpegimage/jpeg
audio/x-pn-realaudioaudio/x-pn-realaudio
audio/x-ms-wmaaudio/x-ms-wma video/x-ms-asfvideo/x-ms-asf
application/octet-streamapplication/octet-stream
-
8/7/2019 610.Web Architecture
21/86
Internet TechnologiesInternet Technologies
MIMEMIME Specifies character sets, e.g. ASCIISpecifies character sets, e.g. ASCII
Supports multi-part messagesSupports multi-part messages
Originally designed for email, but alsoOriginally designed for email, but alsoused in other places, such as HTTPused in other places, such as HTTP
-
8/7/2019 610.Web Architecture
22/86
Internet TechnologiesInternet Technologies
BrowsersBrowsers Client-side applicationClient-side application
Requests HTML from Web server andRequests HTML from Web server and
renders itrenders it
Popular browsers:Popular browsers: NetscapeNetscape
Internet ExplorerInternet Explorer
OperaOpera othersothers
Also known as a User AgentAlso known as a User Agent
-
8/7/2019 610.Web Architecture
23/86
Internet TechnologiesInternet Technologies
Clients & ServersClients & Servers Client and Server computers both have:Client and Server computers both have:
CPUCPU
MemoryMemory
I/OI/O DisksDisks
NetworkNetwork
BusBus
Multi-tasking operating systemMulti-tasking operating system
ApplicationsApplications
-
8/7/2019 610.Web Architecture
24/86
Internet TechnologiesInternet Technologies
Clients & ServersClients & Servers ClientsClients
Generally supports a single userGenerally supports a single user
Optimized for responsiveness to userOptimized for responsiveness to user
User interface, graphicsUser interface, graphics
ServersServers Supports multiple usersSupports multiple users
Optimized for throughputOptimized for throughput
More: CPUs (SMP), memory, disks (SANs), I/OMore: CPUs (SMP), memory, disks (SANs), I/O
Provide services (e.g. Web, file, print, database,Provide services (e.g. Web, file, print, database,
e-mail, fax, transaction, telnet, directory)e-mail, fax, transaction, telnet, directory)
-
8/7/2019 610.Web Architecture
25/86
Internet TechnologiesInternet Technologies
Proxy Servers & FirewallsProxy Servers & Firewalls Proxy ServerProxy Server
A server that sits between a client (running aA server that sits between a client (running abrowser) and the Internetbrowser) and the Internet
Improves performance by caching commonlyImproves performance by caching commonlyused Web pagesused Web pages
Can filter requests to prevent users fromCan filter requests to prevent users fromaccessing certain Web sitesaccessing certain Web sites
FirewallFirewall A server that sits between a network and theA server that sits between a network and theInternet to prevent unauthorized access to theInternet to prevent unauthorized access to thenetwork from the Internetnetwork from the Internet
-
8/7/2019 610.Web Architecture
26/86
Internet TechnologiesInternet Technologies
NetworksNetworks Network = an interconnected collection ofNetwork = an interconnected collection of
independent computersindependent computers
Why have networks?Why have networks?
Resource sharingResource sharing ReliabilityReliability
Cost savingsCost savings
CommunicationCommunication
Web technologies add:Web technologies add: New business models: e-commerce, advertisingNew business models: e-commerce, advertising
EntertainmentEntertainment
Applications without a client-side installApplications without a client-side install
-
8/7/2019 610.Web Architecture
27/86
Internet TechnologiesInternet Technologies
NetworksNetworks Network scopeNetwork scope
internet: a collection of connected networksinternet: a collection of connected networks
Internet: a specific world-wide network based on TCP/IP,Internet: a specific world-wide network based on TCP/IP,
used to connect companies, universities, governments,used to connect companies, universities, governments,organizations and individuals. Originated as ARPANET,organizations and individuals. Originated as ARPANET,
funded by the US DoD.funded by the US DoD.
intranet: a network based on Internet technologies thatintranet: a network based on Internet technologies that
is internal to a company or organizationis internal to a company or organization
extranet: a network based on Internet technologies thatextranet: a network based on Internet technologies thatconnects one company or organization to anotherconnects one company or organization to another
-
8/7/2019 610.Web Architecture
28/86
Internet TechnologiesInternet Technologies
NetworksNetworks Network technology is largely determinedNetwork technology is largely determined
by scale:by scale: Local Area Network (LAN): Span up to a fewLocal Area Network (LAN): Span up to a few
kilometers. Bus vs. ring topologieskilometers. Bus vs. ring topologies Wide Area Networks (WAN): Can span aWide Area Networks (WAN): Can span a
country or continent. WANs use routers ascountry or continent. WANs use routers as
intermediate nodes to connect transmissionintermediate nodes to connect transmission
lineslines
-
8/7/2019 610.Web Architecture
29/86
Internet TechnologiesInternet Technologies
NetworksNetworks Network technologyNetwork technology
BroadcastingBroadcasting Packets of data are sent from one machine andPackets of data are sent from one machine and
received by all computers on the networkreceived by all computers on the network Multicast: packets are received by a subset of theMulticast: packets are received by a subset of the
machines on a networkmachines on a network
Point-to-pointPoint-to-point Packets have to be routed from one machine toPackets have to be routed from one machine to
another; there many be many pathsanother; there many be many paths In general, geographically localized networksIn general, geographically localized networks
use broadcasting, while disperse networks useuse broadcasting, while disperse networks usepoint-to-pointpoint-to-point
-
8/7/2019 610.Web Architecture
30/86
Internet TechnologiesInternet Technologies
NetworksNetworks
Application
Layer
Presentation
Layer
Session
Layer
Transport
Layer
NetworkLayer
Data Link
Layer
Physical
Layer
InternetLayer
Application
LayerTelnet FTP SMTP DNS RIP SNMP HTTP
IP
Host-to-Host
Transport
Layer
TCP UDP
Token
RingEthernet ATM
Frame
Relay
Network
Interface
Layer
OSI Model
Layers
TCP/IP
Protocol
Architecture
Layers
TCP/IP
Protocol Suite
ARPICMPIGMP
-
8/7/2019 610.Web Architecture
31/86
Internet TechnologiesInternet Technologies
Network Protocol StackNetwork Protocol Stack
HTTP
TCP
IP
Ethernet
HTTP
TCP
IP
Ethernet
-
8/7/2019 610.Web Architecture
32/86
Internet TechnologiesInternet Technologies
Networks - Internet LayerNetworks - Internet Layer Internet Protocol (IP)Internet Protocol (IP)
Responsible for getting packets fromResponsible for getting packets from
source to destination across multiple hopssource to destination across multiple hops
Not reliableNot reliable
IP address: 32 bit value usually written inIP address: 32 bit value usually written in
dotted decimal notation as four 8-bitdotted decimal notation as four 8-bit
numbersnumbers(0 to 255); e.g. 130.50.12.4(0 to 255); e.g. 130.50.12.4
-
8/7/2019 610.Web Architecture
33/86
Internet TechnologiesInternet Technologies
Networks - Transport LayerNetworks - Transport Layer Provides efficient, reliable andProvides efficient, reliable and
cost-effective servicecost-effective service Uses the Sockets programming modelUses the Sockets programming model
Ports identify applicationPorts identify application Well-known ports identify standard servicesWell-known ports identify standard services
(e.g. HTTP uses port 80, SMTP uses port 25)(e.g. HTTP uses port 80, SMTP uses port 25)
Transmission Control Protocol (TCP)Transmission Control Protocol (TCP)
Provides reliable, connection-oriented byteProvides reliable, connection-oriented bytestreamstream
UDPUDP Connectionless, unreliableConnectionless, unreliable
-
8/7/2019 610.Web Architecture
34/86
Internet TechnologiesInternet Technologies
Networks - Application LayerNetworks - Application Layer Telnet: Remote sessionsTelnet: Remote sessions
File Transfer Protocol (FTP)File Transfer Protocol (FTP)
Network News Transfer Protocol (NNTP)Network News Transfer Protocol (NNTP) Simple Network Management ProtocolSimple Network Management Protocol
(SNMP)(SNMP)
Simple Mail Transfer Protocol (SMTP)Simple Mail Transfer Protocol (SMTP)
Post Office Protocol (POP3)Post Office Protocol (POP3)
Interactive Mail Access Protocol (IMAP)Interactive Mail Access Protocol (IMAP)
-
8/7/2019 610.Web Architecture
35/86
Internet TechnologiesInternet Technologies
Networks -Networks - Domain Name System (DNS)Domain Name System (DNS) Provides user-friendly domain names,Provides user-friendly domain names,
e.g.e.g. www.msn.comwww.msn.com Hierarchical name space with limited rootHierarchical name space with limited root
namesnames
DNS servers map domain names toDNS servers map domain names toIP addressesIP addresses
.com .net .gov
.edu
.org .mil .in
-
8/7/2019 610.Web Architecture
36/86
Internet TechnologiesInternet Technologies
Extensible Markup Language (XML)Extensible Markup Language (XML) Represents hierarchical dataRepresents hierarchical data
A meta-language: a language for definingA meta-language: a language for defining
other languagesother languages
ExtensibleExtensible
Useful for data exchange andUseful for data exchange and
transformationtransformation
Simplified version of SGMLSimplified version of SGML
-
8/7/2019 610.Web Architecture
37/86
AgendaAgenda
Internet TechnologiesInternet Technologies
Programming Languages andProgramming Languages and
ParadigmsParadigms
Programming the WebProgramming the Web
.NET Overview.NET Overview
-
8/7/2019 610.Web Architecture
38/86
Programming LanguagesProgramming Languages
Machine codeMachine code
Assembly languageAssembly language
High-level languagesHigh-level languages Fortran, LISP, CobolFortran, LISP, Cobol
C, Pascal, Basic, SmalltalkC, Pascal, Basic, Smalltalk
C++, EiffelC++, Eiffel
Java, C#Java, C# Scripting languagesScripting languages
Shell scripts, Perl, TCL, Python, JavaScript,Shell scripts, Perl, TCL, Python, JavaScript,
VBScriptVBScript
-
8/7/2019 610.Web Architecture
39/86
Programming ParadigmsProgramming Paradigms
Unstructured programmingUnstructured programming
Structured programmingStructured programming
Object-oriented programmingObject-oriented programming Component-based programmingComponent-based programming
Event-based programmingEvent-based programming
-
8/7/2019 610.Web Architecture
40/86
-
8/7/2019 610.Web Architecture
41/86
Programming ParadigmsProgramming Paradigms
Structured ProgrammingStructured Programming SequenceSequence
ConditionalConditional if then elseif then else
switchswitch LoopingLooping
for i from 1 to nfor i from 1 to n
do whiledo while
do untildo until FunctionsFunctions
ExceptionsExceptions
-
8/7/2019 610.Web Architecture
42/86
Programming ParadigmsProgramming Paradigms
Object-Oriented ProgrammingObject-Oriented Programming Objects have data and behaviorObjects have data and behavior
Data: members, fields, variables, slots, propertiesData: members, fields, variables, slots, properties
Behavior: methods, functions, proceduresBehavior: methods, functions, procedures
Using objects is easyUsing objects is easy First instantiate the type of object desiredFirst instantiate the type of object desired
Then call its methods and get/set its propertiesThen call its methods and get/set its properties
Designing new types of objects can be hardDesigning new types of objects can be hard Design goals often conflict: simplicity,Design goals often conflict: simplicity,
functionality, reuse, performancefunctionality, reuse, performance
-
8/7/2019 610.Web Architecture
43/86
Programming ParadigmsProgramming Paradigms
Object-Oriented ProgrammingObject-Oriented Programming Key object-oriented conceptsKey object-oriented concepts
IdentityIdentity EncapsulationEncapsulation
Data + behaviorData + behavior Information hiding (abstraction)Information hiding (abstraction)
Classes vs. instancesClasses vs. instances PolymorphismPolymorphism
InterfacesInterfaces Delegation, aggregationDelegation, aggregation InheritanceInheritance PatternsPatterns
-
8/7/2019 610.Web Architecture
44/86
Programming ParadigmsProgramming Paradigms
Component-Based ProgrammingComponent-Based Programming ComponentsComponents
Independent modules of reuse and deploymentIndependent modules of reuse and deployment
Coarser-grained than objectsCoarser-grained than objects
(objects are language-level constructs)(objects are language-level constructs) Includes multiple classesIncludes multiple classes
Often language-independentOften language-independent
In the general case, the component writerIn the general case, the component writerand the component user dont know eachand the component user dont know each
other, dont work for the same company,other, dont work for the same company,
and dont use the same languageand dont use the same language
-
8/7/2019 610.Web Architecture
45/86
Programming ParadigmsProgramming Paradigms
Component-Based ProgrammingComponent-Based Programming Component Object Model (COM)Component Object Model (COM) Initial Microsoft standard for componentsInitial Microsoft standard for components
Specifies a protocol for instantiating and usingSpecifies a protocol for instantiating and using
components in-process, across processes orcomponents in-process, across processes or
across machine boundariesacross machine boundaries
Basis for ActiveX, OLE, and many otherBasis for ActiveX, OLE, and many other
technologiestechnologies
Can be created in Visual Basic, C++, .NET, Can be created in Visual Basic, C++, .NET,
Java BeansJava BeansJava standard for componentsJava standard for components
Not language-independentNot language-independent
-
8/7/2019 610.Web Architecture
46/86
Programming ParadigmsProgramming Paradigms
Event-Based ProgrammingEvent-Based Programming When something of interest occurs, an event isWhen something of interest occurs, an event is
raised and application-specific code is executedraised and application-specific code is executed Events provide a way for you to hook in yourEvents provide a way for you to hook in your
own code into the operation of another systemown code into the operation of another system
Event = callbackEvent = callback User interfaces are all about eventsUser interfaces are all about events
onClickonClick,, onMouseOveronMouseOver,, onMouseMoveonMouseMove
Events can also be based upon time orEvents can also be based upon time orinteractions with the network, operatinginteractions with the network, operatingsystem, other applications, etc.system, other applications, etc.
-
8/7/2019 610.Web Architecture
47/86
AgendaAgenda
Internet TechnologiesInternet Technologies
Programming Languages and ParadigmsProgramming Languages and Paradigms
Programming the WebProgramming the Web .NET Overview.NET Overview
-
8/7/2019 610.Web Architecture
48/86
Programming the WebProgramming the Web
Client-Side CodeClient-Side Code What is client-side code?What is client-side code?
Software that is downloaded from Web serverSoftware that is downloaded from Web serverto browser and then executes on the clientto browser and then executes on the client
Why client-side code?Why client-side code? Better scalability: less work done on serverBetter scalability: less work done on server Better performance/user experienceBetter performance/user experience Create UI constructs not inherent in HTMLCreate UI constructs not inherent in HTML
Drop-down and pull-out menusDrop-down and pull-out menusTabbed dialogsTabbed dialogs
Cool effects, e.g. animationCool effects, e.g. animation Data validationData validation
-
8/7/2019 610.Web Architecture
49/86
Programming the WebProgramming the Web
Client-Side TechnologiesClient-Side Technologies DHTML/JavaScriptDHTML/JavaScript
COMCOM ActiveX controlsActiveX controls
COM componentsCOM components
Remote Data Services (RDS)Remote Data Services (RDS)
JavaJava
Plug-insPlug-ins HelpersHelpers
Remote ScriptingRemote Scripting
-
8/7/2019 610.Web Architecture
50/86
Programming the WebProgramming the Web
Dynamic HTML (DHTML)Dynamic HTML (DHTML) Script that is embedded within an HTMLScript that is embedded within an HTML
pagepage
Usually written in JavaScript (ECMAScript,Usually written in JavaScript (ECMAScript,
JScript) for portabilityJScript) for portability Internet Explorer also supports VBScript andInternet Explorer also supports VBScript and
other scripting languagesother scripting languages
Each HTML element becomes an objectEach HTML element becomes an object
that has associated events (e.g.that has associated events (e.g. onClickonClick))
Script provides code to respond to browserScript provides code to respond to browser
eventsevents
-
8/7/2019 610.Web Architecture
51/86
Programming the WebProgramming the Web
DHTMLDHTML The DHTML Document Object Model (DOM)The DHTML Document Object Model (DOM)
window
history document location screen
all location children selectionforms body links
text buttonradio textarea select
password
file
checkbox submit
reset
option
navigator framesevent
-
8/7/2019 610.Web Architecture
52/86
Programming the WebProgramming the Web
Server-Side CodeServer-Side Code
What is server-side code?What is server-side code? Software that runs on the server, not the clientSoftware that runs on the server, not the client
Receives input fromReceives input from URL parametersURL parameters HTML form dataHTML form data
CookiesCookies
HTTP headersHTTP headers
Can access server-side databases, e-mailCan access server-side databases, e-mailservers, files, mainframes, etc.servers, files, mainframes, etc.
Dynamically builds a custom HTML responseDynamically builds a custom HTML response
for a clientfor a client
-
8/7/2019 610.Web Architecture
53/86
Programming the WebProgramming the Web
Server-Side CodeServer-Side Code
Why server-side code?Why server-side code? AccessibilityAccessibility
You can reach the Internet from any browser, anyYou can reach the Internet from any browser, anydevice, any time, anywheredevice, any time, anywhere
ManageabilityManageability Does not require distribution of application codeDoes not require distribution of application code Easy to change codeEasy to change code
SecuritySecurity
Source code is not exposedSource code is not exposed Once user is authenticated, can only allow certainOnce user is authenticated, can only allow certain
actionsactions
ScalabilityScalability Web-based 3-tier architecture can scale outWeb-based 3-tier architecture can scale out
-
8/7/2019 610.Web Architecture
54/86
Programming the WebProgramming the Web
Server-Side TechnologiesServer-Side Technologies
Common Gateway Interface (CGI)Common Gateway Interface (CGI)
Internet Server API (ISAPI)Internet Server API (ISAPI)
Netscape Server API (NSAPI)Netscape Server API (NSAPI)
Active Server Pages (ASP)Active Server Pages (ASP)
Java Server Pages (JSP)Java Server Pages (JSP)
Personal Home Page (PHP)Personal Home Page (PHP)
Cold Fusion (CFM)Cold Fusion (CFM)
ASP.NETASP.NET
-
8/7/2019 610.Web Architecture
55/86
Programming the WebProgramming the Web
Active Server Pages (ASP)Active Server Pages (ASP)
Technology to easily create server-sideTechnology to easily create server-side
applicationsapplications
ASP pages are written in a scriptingASP pages are written in a scripting
language, usually VBScript or JScriptlanguage, usually VBScript or JScript An ASP page contains a sequence of staticAn ASP page contains a sequence of static
HTML interspersed with server-side codeHTML interspersed with server-side code
ASP script commonly accesses andASP script commonly accesses andupdates data in a databaseupdates data in a database
-
8/7/2019 610.Web Architecture
56/86
Programming the WebProgramming the Web
ASPASP
HTTP request(form data, HTTP
header data)
HTTP responseHTML, XML
ASP page
(static HTML,server-side logic)
-
8/7/2019 610.Web Architecture
57/86
ArchitecturesArchitectures
N TierN Tier
Application ServersApplication Servers
MiddlewareMiddlewareIntranetsIntranets
-
8/7/2019 610.Web Architecture
58/86
What to Know AboutWhat to Know About
ArchitecturesArchitectures Evolution of ArchitecturesEvolution of Architectures Evolution of COMEvolution of COM
DefinitionsDefinitions ASPASP
MiddlewareMiddleware
Database transparencyDatabase transparency
ADOADO
-
8/7/2019 610.Web Architecture
59/86
Client/ServerClient/Server
Client/ServerClient/Server evolvesevolves along the line of PCalong the line of PC
computing and Microsoftcomputing and Microsoft
PC moved from complement to substitutePC moved from complement to substitute
for Host systemsfor Host systems 80s PCs were personal80s PCs were personal
90s PCs were departmental90s PCs were departmental
00s PCs are enterprise wide platforms00s PCs are enterprise wide platforms
-
8/7/2019 610.Web Architecture
60/86
Key Problems ofKey Problems of
Client/ServerClient/Server ScalabilityScalability ManageabilityManageability
ComplexityComplexity Ease of UseEase of Use
Application DevelopmentApplication Development
-
8/7/2019 610.Web Architecture
61/86
Network ArchitecturesNetwork Architectures
Host-based networksHost-based networks: the host computer: the host computer
performs virtually all of the workperforms virtually all of the work
Client-based networksClient-based networks: the client computer: the client computer
performs virtually all of the workperforms virtually all of the work Client-server networksClient-server networks: the work is shared: the work is shared
between the hosts and clientsbetween the hosts and clients
-
8/7/2019 610.Web Architecture
62/86
-
8/7/2019 610.Web Architecture
63/86
Host-Based ArchitecturesHost-Based Architectures
-
8/7/2019 610.Web Architecture
64/86
Host-Based ArchitecturesHost-Based Architectures
ScalabilityScalability Pros provide large scale accessPros provide large scale access Cons expensive, lumpy, slowCons expensive, lumpy, slow
Centralized ManagementCentralized Management ComplexityComplexity
Poor user interfacePoor user interface Application backlog low level tools,Application backlog low level tools,
specialized knowledgespecialized knowledge
-
8/7/2019 610.Web Architecture
65/86
Client-Based ArchitecturesClient-Based Architectures
Evolution of standalone PC to fill gaps inEvolution of standalone PC to fill gaps in
departmental computing needsdepartmental computing needs
-
8/7/2019 610.Web Architecture
66/86
Serveracts as a remote disk drive. Client does all the processing.
Searches slow down the network, each query
has the server pass the entire database over the
Client-Based ArchitecturesClient-Based Architectures
-
8/7/2019 610.Web Architecture
67/86
Client-Based ArchitecturesClient-Based Architectures
ScalabilityScalability Pros cheap & easy to add a station up to limitsPros cheap & easy to add a station up to limits Cons severely limited by bandwidth/architectureCons severely limited by bandwidth/architecture Cons changes to application must be made onCons changes to application must be made on
server and all clientsserver and all clients
Decentralized ManagementDecentralized Management ComplexityComplexity
Graphical user interfaceGraphical user interface
Off the shelf applications high level toolsOff the shelf applications high level tools Custom apps difficult to developCustom apps difficult to develop
-
8/7/2019 610.Web Architecture
68/86
-
8/7/2019 610.Web Architecture
69/86
Improved Scalability less data trafficAn SQL request is generated in the clientand transmitted to the server. The DBMSsearches locally and returns only matching
records greatly reducing data traffic.
Two Tier Client/ServerTwo Tier Client/Server
COM C t Obj tCOM C t Obj t
-
8/7/2019 610.Web Architecture
70/86
COM - Component ObjectCOM - Component Object
ModelModel
Rapid development & lower costs by using readyRapid development & lower costs by using readymade building blocksmade building blocks
Components called like subroutinesComponents called like subroutines
Two tier system - components downloaded to theTwo tier system - components downloaded to theclient to execute, uses lots of bandwidth bogsclient to execute, uses lots of bandwidth bogsdown WANs and enterprise networksdown WANs and enterprise networks
-
8/7/2019 610.Web Architecture
71/86
Three Tier Client/ServerThree Tier Client/Server
Application serverApplication server stores & executes components for clients stores & executes components for clients Easier management - centralizing application logicEasier management - centralizing application logic Reduces network trafficReduces network traffic Optimizes network processing - Lower load on client. Can use thinOptimizes network processing - Lower load on client. Can use thin
clients, NCs, older PCs,clients, NCs, older PCs,
Three Tier ObjectThree Tier Object
-
8/7/2019 610.Web Architecture
72/86
CORBA Common ObjectCORBA Common Object
Request BrokerRequest Broker
ArchitectureArchitecture
DCOM (MS) DistributedDCOM (MS) Distributed
Component Object ModelComponent Object Model
Allows components to beAllows components to be
executed remotely withexecuted remotely with
results sent back to clientresults sent back to client
Three Tier ObjectThree Tier Object
ModelsModels
-
8/7/2019 610.Web Architecture
73/86
API ApplicationAPI Application
Programming Interface andProgramming Interface and
three tier architecture bringsthree tier architecture brings
the power of layering logicthe power of layering logic layering logic - change a layerlayering logic - change a layer
without changing the otherswithout changing the others
Application logic - (ex. TaxApplication logic - (ex. Tax
software)software)
Three Tier Client/ServerThree Tier Client/Server
-
8/7/2019 610.Web Architecture
74/86
Web Mail as 3 Tier SystemWeb Mail as 3 Tier System
Systems Management & Performance:Systems Management & Performance:
-
8/7/2019 610.Web Architecture
75/86
Systems Management & Performance:Systems Management & Performance:Web Sites & MS WindowsWeb Sites & MS Windows
DNADNA
Front End stateless load balancing, cloned systemsFront End stateless load balancing, cloned systems
Back End stateful, partitioningBack End stateful, partitioning
-
8/7/2019 610.Web Architecture
76/86
N-Tier ArchitectureN-Tier Architecture
.
Web Server or
Application Server
HTML pages Applets and components
Programming scripts
HTML pages Applets and components
Programming scripts
WelcomeProductsandSupport
1. Web Client 2. Web Server
Computer with
Web browser
HTTP server engine HTML forms processing
State management
Executable program calls
Server-side scripting
HTTP server engine HTML forms processing
State management
Executable program calls
Server-side scripting
HTTP Web Server
3. Server Programs
Executable program
Database access Business logic
Server-side component
calls
Executable program
Database access Business logic
Server-side component
calls
4. Database Server
DBMS system
Database storage Database transactions
Stored procedures
DBMS system
Database storage Database transactions
Stored procedures
Database Server
with DBMS
Client Server
ServerServer
-
8/7/2019 610.Web Architecture
77/86
What is a Web Application?What is a Web Application?
IISActive Server Pages
Script Logic
COM
HTTP Clients
ServicesTransaction server
Message Queuing
Commerce
Databases and Directories
-
8/7/2019 610.Web Architecture
78/86
Architecture TiersArchitecture Tiers
Business LogicBusiness Logic COM - Component Object ModelCOM - Component Object Model
Service accessibilityService accessibility
Visual Basic, C++, JavaVisual Basic, C++, Java
, Cobol, Pascal, Cobol, Pascal Used from Active Server PagesUsed from Active Server Pages
COM components provide:COM components provide: Encapsulation of internal detailsEncapsulation of internal details
Modularity for code reuseModularity for code reuse
Intellectual Property SecurityIntellectual Property Security
-
8/7/2019 610.Web Architecture
79/86
N Tier Intranet -N Tier Intranet -
ScalabilityScalability
Application Server
Farm
Web Server
Mainframe Legacy Application
Corporate Data Stores
Active
Server
Application
Distributed COM
Distributed Components
Users(running web browser)
HTTP
-
8/7/2019 610.Web Architecture
80/86
N Tier ArchitectureN Tier Architecture
PresentationPresentation Business logicBusiness logic Data servicesData services
WebWebBrowserBrowser
OthersOthers
Int
ernetInforma
tio
InternetInfo
rma
tio
Se
rver\L
DAPS
er
Se
rver\LDAPS
er
MTSMTS
DCOMDCOM
SQL ServerSQL Server
DirectoryDirectory
MicrosoftMicrosoftExchangeExchange
MSMQMSMQ
Com
pone
nts
Com
pone
nts
HTTPHTTP
LDAPLDAP
Architecture Of AArchitecture Of A
-
8/7/2019 610.Web Architecture
81/86
IISIIS
Architecture Of AArchitecture Of A
Commerce SiteCommerce Site
Commerce Server SuppliedCommerce Server Supplied
ComponentsComponentsHTMLHTML .ASP.ASP DataData
SQL,SQL,
Oracle,Oracle,
(ODBC(ODBC
complicompli
ant)ant)
Tha
ThaCop Cop
Tha
ThaCop Cop{.{.
-
8/7/2019 610.Web Architecture
82/86
.ASP.ASP
Get Access through ODBC DSNGet Access through ODBC DSN
Select Appropriate Data with SQL QuerySelect Appropriate Data with SQL Query
Step through the data and display on your pageStep through the data and display on your page
Commerce: AccessingCommerce: Accessing
The DataThe Data Data is accessed using ADO and any ODBC compliant database canData is accessed using ADO and any ODBC compliant database can
be easily usedbe easily used
-
8/7/2019 610.Web Architecture
83/86
MiddlewareMiddleware
Conversion layer, sits between client andConversion layer, sits between client and
databasedatabase
Database transparencyDatabase transparency - middleware translates- middleware translates
DB using OLE DB (API)DB using OLE DB (API) Data access logic (ADO, OLE DB)Data access logic (ADO, OLE DB)
application written independent of source of databaseapplication written independent of source of database
integrate data from incompatible sourcesintegrate data from incompatible sources
Allows multi-vendor solutionsAllows multi-vendor solutions
fi f
-
8/7/2019 610.Web Architecture
84/86
Benefits ofBenefits of
Client-Server ArchitecturesClient-Server Architectures ScalabilityScalability ManageableManageable
Cost Effective - PC hardware is more thanCost Effective - PC hardware is more than
1000 times cheaper than mainframe1000 times cheaper than mainframe
hardware for the same computing power.hardware for the same computing power.
Complexity easy on user, tough on ITComplexity easy on user, tough on IT
-
8/7/2019 610.Web Architecture
85/86
IntranetsIntranets
In-house web site not accessible by publicIn-house web site not accessible by public
Gives benefits of three tier modelGives benefits of three tier model Low bandwidth requirementsLow bandwidth requirements
Thin clientThin client Lower management cost /deployment costLower management cost /deployment cost
ScalabilityScalability
Reduces complexity - cross platformReduces complexity - cross platform
interoperability, standard interfaceinteroperability, standard interface Emerging tools and standards HTML notEmerging tools and standards HTML not
suited to applications, DHTML, XML, Biztalksuited to applications, DHTML, XML, Biztalk
-
8/7/2019 610.Web Architecture
86/86
Elements of the IntranetElements of the Intranet
Client - Browser Client - Browser navigation, interpretation of HTML from server, lightnavigation, interpretation of HTML from server, light
processingprocessing dynamic HTML - does processing on client Webdynamic HTML - does processing on client Web
pages function more like regular software, betterpages function more like regular software, bettercontrol of interfacecontrol of interface
Server -Server - serves up HTML to client via HTTP, lower bandwidthserves up HTML to client via HTTP, lower bandwidth
needed between server and clientneeded between server and client Active Server Pages (.asp), script languageActive Server Pages (.asp), script language
embedded in HTML pages that generates HTMLembedded in HTML pages that generates HTMLoutput from remote procedure call on serveroutput from remote procedure call on server