This post is for beginners who are learning web development. I am trying to explain the basic difference between client side programming and server side programming. This was a question I had for many years till I become a full time WordPress Developer.
Client side programming
Any piece of code that runs in browser is a client side programming. I know you will say that all web related scripts will run/show output in a browser. But, If you can write a code save it anywhere in your computer like desktop and open that file in browser, you should see the output. For example, If I write a code which will have following
- HTML
- CSS
- Javascript
In following example code there is nothing too complicated. All you need is a text editor to write this code, save the file as “.html” file and open it in your favorite browser to see the output. It is as simple as it said.
<html>
<head>
<title>Difference between client side and server side programming</title>
<!-- Custom CSS Code Starts -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
html {
background: #f3f3f3;
padding: 10% 0;
}
body {
margin: 0 auto;
background: #ffffff;
font-family: 'Poppins', sans-serif;
width: 968px;
height: 100%;
padding: 20px;
box-shadow: 0 0 5px 1px #aaaaaa;
}
h2,h3 {
color: #e5007c;
text-align: center;
}
.demo-button {
text-align: center;
}
.demo-button input {
padding: 10px 15px;
border-radius: 5px;
border: 0;
background: #e5007c;
color: #ffffff;
}
</style>
<!-- Custom CSS Code Ends -->
</head>
<body>
<h2>Welcome to Sleeksoft</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis pharetra tortor, id hendrerit dui mollis a. Praesent fringilla leo sapien, in hendrerit lorem feugiat vitae. Integer ullamcorper in diam sit amet sollicitudin. Nulla sit amet orci hendrerit, aliquet orci in, mollis neque. Aenean a vulputate erat. Praesent feugiat libero vel nisl ullamcorper ultricies. Fusce dapibus mauris eget gravida ornare. Aliquam at accumsan libero, nec euismod arcu. Proin non enim porta, tincidunt ante eget, eleifend mi.
</p>
<p>
Fusce sollicitudin, lorem ut feugiat tempus, metus turpis luctus ante, a iaculis augue leo consectetur nisi. Vivamus posuere leo in lacus accumsan, quis vehicula lacus faucibus. Vivamus nec purus a velit molestie lobortis eget hendrerit orci. Phasellus eros nisl, tincidunt in finibus eu, commodo id eros. Morbi porttitor tortor erat, vel maximus sapien elementum in. Pellentesque at tempus arcu. Vivamus laoreet risus eget rutrum auctor. Nam dignissim, odio a ultrices sollicitudin, nisl enim luctus risus, sit amet venenatis dui libero quis purus. Donec tempor nibh a pulvinar gravida. Donec eget dui mauris. Quisque hendrerit urna ut velit aliquam consequat. Maecenas euismod fringilla mi quis iaculis. Duis sed erat venenatis, volutpat justo non, rhoncus sapien. Morbi euismod augue quis lorem tristique, vel lobortis felis varius. Nulla nisl risus, tempor quis viverra sed, auctor sit amet urna.
</p>
<div class="demo-button">
<input type="button" value="Click Me!!" />
</div>
<!-- Custom JS Code Starts -->
<script type="text/javascript">
document.querySelector('input[type="button"]').addEventListener("click", clickFunction);
function clickFunction() {
alert("YOU CLICKED ME!");
}
</script>
<!-- Custom JS Code Ends -->
</body>
</html>The expected output will be as follows:
Server side programming
Now lets get in deep with the same HTML code where you need to show a content from PHP variable or from a database. Your code looks like following and you need to save it as “.php” file.
<!DOCTYPE html>
<html>
<head>
<title>Difference between client side and server side programming</title>
<!-- Custom CSS Code Starts -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
html {
background: #f3f3f3;
padding: 10% 0;
}
body {
margin: 0 auto;
background: #ffffff;
font-family: 'Poppins', sans-serif;
width: 968px;
height: 100%;
padding: 20px;
box-shadow: 0 0 5px 1px #aaaaaa;
}
h2,h3 {
color: #e5007c;
text-align: center;
}
.demo-button {
text-align: center;
}
.demo-button input {
padding: 10px 15px;
border-radius: 5px;
border: 0;
background: #e5007c;
color: #ffffff;
}
</style>
<!-- Custom CSS Code Ends -->
</head>
<body>
<!-- We Presume you have saved company name in a variable called $company_name -->
<h2>Welcome to <?php echo $company_name; ?></h2>
<!-- We presume you have saved all the company details in a variable called $company_content -->
<?php echo $company_content; ?>
<!-- Custom JS Code Starts -->
<script type="text/javascript">
document.querySelector('input[type="button"]').addEventListener("click", clickFunction);
function clickFunction() {
alert("YOU CLICKED ME!");
}
</script>
<!-- Custom JS Code Ends -->
</body>
</html>This piece of code when you save and run from desktop, this will give you a blank space or some unexpected results where you used PHP code. So, PHP code cannot run in a browser, because browser cannot understand PHP. It needs a server, there comes Apache(Wamp or Xamp) or Nginx. The server will process the PHP code and outputs relevant HTML data. This will be showed in the browser as output.
In a nutshell
All the scripts that runs in browser without any help from any server is Client side scripting/programming languages. Examples:
- HTML
- CSS
- Javascript
- jQuery
- SaaS
- SCSS
- etc..
All the scripts that runs in browser with help from any server is Server side scripting/programming languages. Examples:
- PHP
- ASP.NET
- Python
- JSP
- Ruby
P.S : Recent improvements in JS like releasing ES6 with tons of features and upgrades in javascript, we have Node.js which is a javascript library that has capability to connect with database and act like a server side scripting.