Client side vs server side basics

Question 1

For the last 6 months I have been trying to wrap my head around Web development and understanding the diferences beetween client-side programming and server side programming.For the moment I only know the client side at an medium level(javascript/jQuery) but I am also interested in learning PHP and MySQl for server-side programming.

What are the diferences of client side programming and server side programming?

When do I use client side and when do I use server side?

Those a web developer need to know both to be effective in writing website?

Question 2

Client side programming includes any coding or computation or effects or annimation or any sort of interaction your website performs with the user via browser. But server side programming is that which performs all the task in the server only. So the user is unaware of that.

For example, PHP is used for server side programming. You design a website with HTML and use JavaScript in it to take some input from user and modify it in anyway. To be more specific, if you created a blog website and you want to specify that the user can post a max of 5000 characters. Then you do some client side programming with JavaScript to count the number of characters and any filtering or anything. But then you need to send those posts to the server. The server then performs some server side task, may be with PHP, to sanitize the input for SQL Injection and saves it into a database.

User will only know what happened in the browser but not what happened in the server. Those are background tasks.

Question 3

Your code is split into two entirely separate parts, the server side and the client side.

                    |
               ---------->
              HTTP request
                    |
+--------------+    |    +--------------+
|              |    |    |              |
|    browser   |    |    |  web  server |
| (JavaScript) |    |    |  (PHP etc.)  |
|              |    |    |              |
+--------------+    |    +--------------+
                    |
  client side       |      server side
                    |
               <----------
          HTML, CSS, JavaScript
                    |

The two sides communicate via HTTP requests and responses. PHP is executed on the server and outputs some HTML and maybe JavaScript code which is sent as response to the client where the HTML is interpreted and the JavaScript is executed. Once PHP has finished outputting the response, the script ends and nothing will happen on the server until a new HTTP request comes in.

The example code executes like this:

<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

Step 1, PHP executes all code between <?php ?> tags. The result is this:

<script type="text/javascript">
    var foo = 'bar';

    var baz = 42;
    alert(baz);
</script>

The file_put_contents call did not result in anything, it just wrote " + foo + " into a file. The <?php echo 42; ?> call resulted in the output "42", which is now in the spot where that code used to be.

This resulting HTML/JavaScript code is now sent to the client, where it gets evaluated. The alert call works, while the foo variable is not used anywhere.

All PHP code is executed on the server before the client even starts executing any of the JavaScript. There's no PHP code left in the response that JavaScript could interact with.

To call some PHP code, the client will have to send a new HTTP request to the server. This can happen using one of three possible methods:

A link, which causes the browser to load a new page.
A form submission, which submits data to the server and loads a new page.
An AJAX request, which is a Javascript technique to make a regular HTTP request to the server (like 1. and 2. will), but without leaving the current page.

Here's a question outlining these method in greater detail

You can also use JavaScript to make the browser open a new page using window.location or submit a form, emulating possibilities 1. and 2.

Question 4

Server-side validation is a must, client-side validation is a plus.

If you only use client-side validation, nefarious people will hack your system to post un-validated stuff - breaking your scripts, and potentially exploiting your system. This is very bad from a security standpoint.

That said, you should also include client-side validation, since that's much quicker than a round trip to the server, and gives your users instant feedback. This'll keep your users happy, and will have them coming back to your site.

So, if possible, use both. If you can't/won't, then at least do it server-side. Client-side-only validation is a recipe for disaster!

Question 5

If you don't want to use javascript, you can handle it via php. Take a look at this lib: http://code.google.com/p/php-mobile-detect/. And then you could do something like:

<?php
include 'Mobile_Detect.php';
$detect = new Mobile_Detect();

if ($detect->isMobile()) {
    header('Location: yourpage.php');
    exit(0);
}

Question 6

Cookies are not the way to transfer variables between client and server. you should append key/variables pairs to your request URL using either a get (querystring) or post method.

jQuery ajax example;

$.get('http://www.myphpserver.com/script.php?row_id=' + NewCookieValue);

Client side vs server side basics

Answers

php,javascript