Scripting - Client-side vs. Server-side Scripting

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 client-side 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 usingprogressive 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'); ?>  <?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 wouldneverhave 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

Scripting - Client-side vs. Server-side Scripting