Client Side x Server Side Scripting

When considering developing applications for the web two concepts, Client Side and Server Side Scripting,  will emerge and some times, for many beginners mixing this concept gets pretty messy.

Client Side Scripting

Client side scripting is when the application created is translated on the user web browser. The best programmable language that anyone can use to exemplify it is still Javascript.

Whenever working with Javascript all programmed methods, functions, actions and interactions are downloaded to the user web browser and then translated and executed.

Creating a little schematics to understand the process, the sequence would be:

  1. user browser requests a page / application part (index.html)
  2. the page / application part is fully downloaded to the browser
  3. the browser (in this case with Javascript enabled) translate the javascript code and output (print) the result

To better demonstrate this let’s do a small example:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<script type=”text/javascript”>
// don’t mind the code, is just for example
document.write(“<p>Browser: “);
document.write(navigator.appName + “</p>”);

document.write(“<p>Browserversion: “);
document.write(navigator.appVersion + “</p>”);

document.write(“<p>Code: “);
document.write(navigator.appCodeName + “</p>”);

document.write(“<p>Platform: “);
document.write(navigator.platform + “</p>”);

document.write(“<p>Cookies enabled: “);
document.write(navigator.cookieEnabled + “</p>”);

document.write(“<p>Browser’s user agent header: “);
document.write(navigator.userAgent + “</p>”);
</script>
</head>
<body>
<h1> Your browser information </h1>
</body>
</html>

In this small example, taken from W3C Schools, the javascript code will be downloaded to the user browser and executed displaying the result immediately to the user.

Server Side Scripting

Server Side Scripting is when the translation and execution of the code is done on the server side and only after that being downloaded to the user browser. There are many languages that are fit for the Server Side Scripting. Some great examples are PHP (off course), C# and ROR.

Whenever working with PHP, for example, all PHP code will be translated and executed on the server and substituted for the result that will be downloaded, all together with the page, to the user browser.

Let’s try to do a small schematics here to follow the process for that:

  1. User browser request a page / part of the application (index.php)
  2. The server understands that the page requested has PHP coding and send a request to the PHP engine to translate and execute the code returning the results
  3. After all is processed, the request is complete and the result page is returned to the user browser

To better exemplify this, I will place some body and code for the index.php application.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title> A Server Side Application </title>
</head>
<body>
<ul>
<?php
// don’t worry about the code for now, just example
$menu = array(‘item1’, ‘item2’, ‘item3’);
foreach($menu as $index => $item)
{ ?>
<li><?php echo $item; ?></li><?php
}
?>
</ul>
</body>
</html>

The PHP engine will translate the PHP coding to output (print) item1, item2, item3 inside a list item for each one of them. The result from this small code will be:

  • item1
  • item2
  • item3

In the real world development, programmers uses both sides of scripting to create complex and interactive applications / pages to the users. Most of the time the client side scripting will take care of the interactions, usability, action requests, etc, and the server side will handle the security of data, output of massive data, body construction, logistics, etc.

To wrap up, take a look at the Google Maps application. While Javascript handles the marker positioning, displaying images, constructing the map, a server side language (PHP I believe) will retrieve the user position by it’s ip positioning the marker, calculate routes, gather the images from the map (in Google Maps specifically is done through an API).

Now let’s start learning some PHP scripting [next].

Advertisements

About mcloide

Making things simpler, just check: http://www.mcloide.com View all posts by mcloide

One response to “Client Side x Server Side Scripting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: