Client-side and server-side



Before jumping into the basics of PHP development, it's important to understand the difference between client-side and server-side.

This lesson and the next one explain this difference and how PHP is related to other web programming languages.


Web development is about creating web pages and web applications.

Building web pages and apps requires different programming languages. Some of these languages are client-side, others are server-side.

Client-side languages are also called front-end languages. Server-side languages are also called back-end languages.

For example, CSS and JavaScript are client-side languages, while PHP and Python are server-side languages.

Now, what is the difference between such languages? And how do they work together?

To make things clear, let's start by looking at how a web page works.




How do web pages work?

When you open a web page, like www.google.com, your web browser sends an HTTP request to the remote web server asking for the page. The server replies by sending back the web page file.

This type of data exchange system is called client-server. Your browser, that sends the request, is the client. The web server, that replies to your browser's request, is the server (yes, it's called web server for this reason).


The web page file is an actual file, just like a file on your computer.

This file is transmitted over the Internet. It goes from the server where the website is hosted, all the way to your computer where your browser receives it.

When your browser receives the page file, it reads its content and generates the web page that you see on the screen.


A web page file is a text file containing computer code. It is written using a combination of different languages, including:

  • HTML, that defines the page's structure (sections, paragraphs, titles...)
  • CSS, that defines the page's style (colors, sizes...)
  • JavaScript, that tells the browser to perform some actions on the page.


The code content of the page file is called the page's source code.

You can see the source code of every web page directly from your browser. In most browsers, you need to right-click in the middle of the page and select "View page source". What you see there is the exact content of the file sent from the remote web server to your browser.

For example, here is how to look at the source code of the Linux Kernel homepage:


The languages used in the page's source code (HTML, CSS, JavaScript...) are called client-side languages.

It's the browser, the client, that reads and executes these languages.

For instance:

  • When the browser reads a "<p>" tag in the HTML code, it draws a text paragraph on screen.
  • When it reads a "color: red" CSS directive, it draws the text red.
  • When it reads a JavaScript event, it executes it.


The web server never executes client-side languages. Only the client browser does.

The server simply sends the file to your browser as it is, regardless of the file content.


Now, what about server-side languages? How do they work compared to client-side languages?

We'll get there in a bit.

But first, we need to introduce the concepts of static and dynamic web pages.

Let's continue in the next lesson.




Complete and Continue  
Discussion

0 comments