DT228/3 Web Development

viraginitysplashInternet and Web Development

Nov 10, 2013 (4 years ago)

84 views

DT228/3 Web Development

WWW and Client server model

HTML



Javascript

Java
applets

JScript

VBScript

ASP

JSP

CSS

DHTML

SSIs

CGI

PHP

A quick tour of common client
and server web technologies

Server

Side

Java
script

Cold

Fusion

XML

WML

HTML


client side


Hyper Text Mark up language


Used for rendering documents via web
browser such as IE or FoxFire.


Interpreted by browser


Client side


Tag based


Different browser may interpret tags
differently e.g. <frame>


WML


client side


Wireless markup language


The WAP equivalent of HTML
-




Supports WAP technology for mobile devices


Client side


Fewer tags than HTML


Supports WML Scripts


Used on less powerful client devices

JavaScript and Jscript




Can be used as Client side AND server side.







A very simple scripting language for enriching the display and
interactivity of web pages.




Typical example is a button that changes color as you move
your mouse over it.


A more useful example is a menu that
rolls out more details when you click a category; this is done
without loading a whole new page, and even without
connecting to the web server.


JavaScript is Netscape's technology, but fully adopted by
Microsoft. When JavaScript is used inside IE browser, it is
called JScript.


JavaScript is
not

related to Java, except that it somewhat
resembles Java.

It can be used within Active Server Pages*


More info:

http://javascript.internet.com/


A Scripting language, similar to Javascript

A lighter weight version of Microsoft’s Visual
Basic.

Developed by Microsoft, and does not work in
Netscape. A simplified variant of Visual Basic.

Used for client processing and also the default
programming language within Active Server Pages

More info:

http://msdn.microsoft.com/scripting/default.ht
m?/scripting/vbscript

VBScript

client and server side

Instructions for the browser about how to display the page (font,
layout, etc.).


Using CSS, the author of the web page has full
control over what the user sees, regardless of the browser
settings, etc.


In addition, CSS allows web designer to define
complex formatting styles, and then use them with a short
command, instead of specifying all the fonts, sizes, layout, etc.,
every time.

More info:

http://www.w3.org/Style
/


Cascading Style Sheets (CSS)


client side

Java applet
s

are

programs written in Java that are downloaded
onto and run on a Web browser.


Applets can provide functionality to the client machine such as
enhanced presentation, graphics, validation. etc


The main difference between an applet and a fully
-
blown Java
application is that an applet is restricted in functionality for
security reasons; for instance, it cannot freely access
the client
hard drive.




When you go to a website, you do not know what applets are
included in it, and who wrote them and why


hence the
security restrictions applied to Java Applets.

More info:

http://java.sun.com/


Java Applets


client side

“Animated” HTML. E.g. button changes colour, graphic
moves from one part of the screen to the other.


Refers to the combination of HTML, CSS and
JavaScript, and other web site enhancing software
which together allow creating web pages that interact
with the user.


More info:

http://wdvl.com/Authoring/DHTML/


DHTMl


Dynamic HTMl


Client side

CGI is the oldest server
-
side technology.


It was available in
very early browsers, and was supported by very early versions
of HTML.


It is still used today


CGI is most often used for processing forms.


Any programming language can be used (such as C/C++, Java or
Perl).


More later


More info:

http://wdvl.com/Authoring/CGI/



Common Gateway Interface


CGI


Server side

#!/usr/local/bin/perl

#

# hello_s.pl
--

simple "hello, world" program to demonstrate basic

#

# CGI output.

# Print the CGI response header, required for all HTML output

# Note the extra
\
n, to send the blank line

print "Content
-
type: text/html
\
n
\
n" ;

# Print the HTML response page to STDOUT

print <<EOF ;<html><head><title>CGI Results</title></head>

<body>

<h1>Hello, world.</h1>

</body>

</html>

EOF

exit ;


Common Gateway Interface


CGI


Server side

Microsoft’s leading server side technology for creating dynamic
web pages. Works by default only with Microsoft web server
software (but browser brand does not matter).


Allows to execute scripting languages such as VBScript and
JavaScript on the server. Better uniformity than client side
processing (since the server is controlled by the website owner,
while each browser is different) and offloads the processing from
the user computer.


Since ASP runs on the server, it also offers additional functionality
not available with client
-
side scripting. For instance, an ASP page
can connect to a database to get the information to be displayed.

Pages that use ASP have extension .asp rather than .htm or .html.


More info:

http://wdvl.com/Authoring/ASP/


Active Server Pages


ASP


server side

<html>

<body>


<%

sometext="Welcome to this Web"

response.write(Left(sometext,5))

response.write("<br>")

response.write(Right(sometext,5))

%>


</body>

</html>


Active Server Pages


ASP


server side

JSP is similar in
function
to ASP and CGI. It allows a web
server to process user input or perform some other
functions and return the results to the user's browser.



JSP files have an extension of .jsp


JSP is supported by all major web server software.

More info:

http://java.sun.com/products/servlet/


Java Server Pages


JSP


server side

<html>

<head><title>Hello, User</title></head>

<body>


<h1>My name is Cindy. What's yours?</h1>


<form method="post" action="response.jsp">

<input type="text" name="username" size="25">

<br>

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>


</table>

</body>

</html>

Java Server Pages


JSP


server side

<HTML>

<body>

<table border="0" width="700">

<tr>

<td width="150"> &nbsp; </td>


<td width="550">


<h1>Hello, <%=request.getParameter("username")%>


</h1>


</td>

</tr>

</table>

</body>

</html>

Java Server Pages


JSP


server side

Scripting language for use on the server.


Free
(developed by Linux enthusiasts). Supported by all
web servers. Similar to ASP in functionality, but
simpler and less powerful.


More info:

http://wdvl.com/Authoring/Languages/PHP/


PHP


Server side

<html>

<body>

hhhh

<?php echo "<hi>Hello World!</h1>"; ?>

</body>

</html>

PHP


Server side

An instruction inside a web page for the web server.


For
instance, it may ask the server to include another web page
inside the current one (typically, a navigation bar, or some other
common header or footer). This saves a lot of time when this
common element needs to be updated in hundreds of pages
throughout the website


Usually supplied free as part of web server functionality


More info:

http://wdvl.com/Authoring/SSI/


Server Side Includes (SSI)
-

Server side

ColdFusion, from Allaire, provides a set of HTML
-
like tags which were
initially targeted at embedding database queries into web pages, but
it has since been extended to support a wide variety of data sources
for dynamic content generation.


The adoption of HTML
-
like tags has the advantage that there is a
single, consistent style of syntax throughout the page; the ColdFusion
tags are comfortable to web designers because they look just like the
other tags present in the document.


ColdFusion supports both UNIX and Microsoft Windows platforms.



Cold Fusion


Server side

<cfset variable = "Hello World">


<cfoutput>#variable#</cfoutput>



Cold Fusion


Server side

Used with Netscape servers


Server
-
Side JavaScript uses JavaScript as its scripting language.


Server
-
side JavaScript included in an HTML document is enclosed
in a <SERVER>...</SERVER> tag pair.


SSJS adds built
-
in features for database and email support, session
management, and interoperability with server
-
side Java classes using
Netscape's LiveWire technology.


File extension = .js


Compiled language.

Server Side JavaScript


Server side

XML (extensible mark
-
up language)


is a simple,

very flexible mark
-
up language (like HTMl). It is used throughout the
web to as the basis for new mark
-
up languages such as Wireless Mark
-
Up (WML) and the latest version of HTML (XHTML).


XML by itself does not do anything


it is usually used for defining

the structure of data. For example, providing information in a generic
format that will be sent to a variety of channels


e.g. web site, and
wireless devices


Example:


< phonenum> 2876637 </phonenum>

<address> 34 talbot street </address>

XML

user defined

tags

Client or server side?


Some websites/web applications will only need client
side technologies


Many use both client
and
server

To determine whether client
-
side or server
-
side or both will
be used for a web application, need to consider:



Static web pages only?



Validation of user input needed?




Will the user be entering information/ searching? (I.e.
likely to use database)




Session tracking required?


Client or server side?


Client
-
side may be sufficient

Client
-
side will reduce traffic back to server,

server side will provide uniform response


If database used, need server
-
side technologies


Server
-
side needed


Volume of users (want to minimise traffic back to server)?



Sensitivity of code?



Power of client device (e.g. PDA)?



Security limitations (e.g. users prevented from certain
web pages)



Client Browser support

Client or server side?


Use of Client
-
side reduces traffic back to server

Client
-
side code will be visible to visitors

Client side code runs on device
-
> restrictions?

Server
-
side provides ability to add security

A consideration when using client
-
side

Client vs server technologies?


A website for a small retailer, displaying location, map
and staff descriptions


Online daily newspaper displaying relevant news items
and articles. Users can enter their details to subscribe.


A transport website enabling users to enquire upon
train timetables, destinations, prices. Information
changes monthly.


A temporary website, providing details of a concert.
All information is static.



Questions


A web design team are developing a web application
for the Olympics Games. The application will provide
bulletin board information, maps, hotel information and
updates on event timetables and results. Explain how
client
-
side and server
-
side web technologies may be
used to develop the application. Give examples of each
technology.

Summary


Client server model for Web


Different between client
-
side and server
-
side
technologies


Limitation of Client
-
side technologies


Common Client
-
side and Server
-
side technologies


Choosing use of client versus server
-
side technologies