Scripting - Client-side
vs. Server-side
Scripting
Web Design
Sec 6-1
Part or all of this lesson was adapted from the University of Washington’s “Web
Design & Development I” Course materials
Scripting
• In the early days of the web, most web pages were
static pages with very little or no interactivity.
Today's web, however is much more interactive.
People can shop online, bank online, watch videos,
listen to music, share photos, chat with friends, play
interactive games, maintain BLOGs, and on and on.
The level of interactivity on today's web would not
be possible if web designers were limited to using
HTML and CSS. This lesson describes some of the
advanced technologies that help to make the web
more engaging.
Objectives
• The student will:
– Be able to name and describe some of the advanced
technologies that are used to deliver web content.
– Be able to explain the difference between client-side
and server-side scripting.
– Be able to define progressive enhancement.
– Be able to identify what technologies are being used
to implement particular websites or web features.
Client-Side vs. Server-Side Scripts
• Scripts are computer programs that allow web
pages to be more dynamic, for example allowing
pages to present changed or customized content
based on user input. Scripts can be categorized
as either client-side or server-side, depending on
where they're executed.
Client-side Scripts
• Client side scripts are executed client-side, within
the user's web browser.
• They can be read by the user, and can be found
in the source code of web pages that use them,
contained between <script> and </script> tags.
• Sometimes scripts are contained in an external
file, just like CSS. In these cases the <script> tag
includes a src attribute that links to the script
file.
Client-side Scripts
• The most common client-side scripting language
is JavaScript, which we will be learning.
• Another client-side language is VBScript,
although VBScript was developed by Microsoft
and is not supported by their competitors'
browsers such as Firefox and Opera.
• Most web developers use JavaScript for clientside scripting in order to be sure their website
works in all browsers.
Client-side Scripts
• Client-side scripts have some shortcomings: Older browsers
don't support them; and newer browsers allow users to disable
scripts and some users do so. Most users these days are using
browsers that support scripts, and generally have scripting
enabled, but it is important to know that some users don't.
• Therefore it's a good practice to design web pages using
progressive enhancement.
– This is a term used to describe the practice of creating web pages
that work for everyone without CSS or client-side scripts. Then,
enhance those pages, first with CSS (enhance the presentation) and
then with JavaScript (enhance the functionality of the page). The
scripted content should be a bonus for users who can access it, but
if users can't access it, they should still be able to access the core
content of the web page.
Server-side Scripts
• Server side scripts are executed server-side, on the
web server, before the web page is sent to the
browser.
– Server-side scripts cannot be read by the user. They
reside on the web server, and when requested by a web
browser, they execute. What shows up in the web
browser is not the script itself, but the output of the
script, which is typically HTML.
– Because of this, server-side scripts are more reliable and
accessible than client-side scripts. Anyone using a web
browser can access HTML, and users don't have to turn
anything on in their browser for the scripts to work.
Scripting Languages
• There are dozens of server-side scripting languages. Some of the most
common:
– PHP is an open-source scripting language. According to many sources PHP is the most widely
used server-side scripting language on the web.
– Perl is also an open-source scripting language, and has been around since 1987 so it's used
extensively on websites that have been around a while.
– ASP.NET is a server-side scripting technology that was developed by Microsoft, and only runs
on Microsoft servers. Prior to ASP.NET, Microsoft had developed another server-side scripting
language with the name ASP (Active Server Pages) which was used widely on the web.
However, other than the name, ASP and ASP.NET are very different technologies.
– Java is an object-oriented programming language that is used to create software applications
that run over the web. Java was released in 1995 and quickly became the hottest new
programming language due in part to its promise of "write once, run anywhere." Java is still
one of the most popular programming languages in use, particularly for web applications. As
noted above, Java and JavaScript are not related.
– Python is an open-source programming language that was designed to be simple, easy to
learn, and easy to read in order to reduce the cost of program maintenance. Python is
reportedly used extensively by Google.
• You will learn some python at the end of this year when you program the robots.
Server-Side Scripting Example in
PHP
• Some times in this class you have had to go back
and update all your pages with the same
information (skip to link, navigation menu,
banner, etc).
• What if you could build that common HMTL code
on a server and then use it when the users
access all the web pages?
Server-Side Scripting Example in
PHP
• If your web pages were hosted on a site that
supports PHP then we can build the common
code on the server before the HTML is sent to
the client.
PHP Code
• Start by replacing all the code that’s common (the beginning
and the end of the HMTL file) with simply PHP code:
<?php
include('functions.php');
showTop('Home');
?>
<!-- The main body of your web page, in HTML, will go here -->
<?php
showBottom();
?>
PHP Code
• Now need to define the functions. Our functions.php file would contain:
function showTop($thisPage) {
echo '<!DOCTYPE html>';
echo '<html>';
echo '<head>';
echo '<meta charset="utf-8">';
echo '<title>'.$thisPage.'</title>';
echo '</head>';
echo '<body>';
}
function showBottom() {
echo '</body>';
echo '</html>';
}
Server-Side Scripting Example in
PHP
• Now, with this code in place, we would never
have to go back and modify the content within
every file on our website!
• If we need to add something like a banner image
or navigation menu, we would just do it in one
place, here in the functions.php file.
Databases and the Web
• A database is any organized collection of information, but
is most commonly used if data is organized using a
computer. Typically computerized databases organize
information using structures such as tables, records and
fields.
• On the web, a database may be used to store product
information, customer information, and so on. If a site
requires you to log in, that site has your user name,
password, and other information about you, stored in a
database. If you provide a user name and password
combination that matches a combination in the database,
a server-side script retrieves additional information about
you from the database and uses that to customize the web
page you receive.
AJAX
• AJAX stands for "Asynchronous JavaScript and
XML". It is not exactly a client-side technology,
nor a server-side technology: It's both! Ajax is a
technique in which websites use JavaScript
(client-side) to send data to, and retrieve data
from, a server-side script. This all happens in the
background so data can be updated on the
current page without requiring the user to load a
new page.
Content Management Systems
• An increasingly common trend in web design is for all content on a
website to be stored in a database. Then when a user requests a
particular web page, the matching content is retrieved from the
database and plugged into a web page template using a server-side
script. To add content to the website, web authors don't have to write
HTML as you've been doing in this course. They simply have to write or
paste their content into a web form, and select "Save". A server-side
script then saves the content to the database, where it sits in storage
until someone requests it.
• Systems like this are known as content management systems (CMS).
They are beneficial in environments where web content is being created
by people who are not professional web designers and who do not
know HTML. It also makes the website much easier to maintain, since
all content is delivered through a template. To change the design of
every page on the entire website, all the designer needs to do is change
the template!
Flash
• Flash is a multimedia authoring environment developed by
Macromedia (now Adobe) that is used to deliver dynamic
animated content over the web. Flash content is developed
using the Flash authoring software, and requires users to have
the Flash Player installed.
• Flash authoring requires diligence in order to ensure that
content is accessible to all users, including those who can't see
the visual content, can't hear the audio content, or can't
operate a mouse.
– A certain degree of accessibility is possible with Flash, but it requires
the author to be thinking about the needs of all users when they
design their interface.
• Flash has become less popular in recent years due in part to
the popularity of Apple iPhones and iPads, which don't support
Flash.
Summary
• Client-side scripts run in the users browser and
must be supported by the browser.
– May not work for all users. Use this to enhance but
not deliver content.
• Server-side scripts run on the server and then
send HTML code to the client.
• Databases store information to be accessed as
needed.
Rest of Today
• Download the homework for today.
• Using your tables as teams complete the
homework.
• Tomorrow you will show the 3 web sites you
have found and explain why you think they are
client-side, server-side or database