If HTML, CSS, and Javascript are client-side, why are they components of a PHP file?

Question

I often hear of the term server-side and client-side programming in regards to web development. They say that server-side and client-side are in a way decoupled from each other. From my understanding, server-side programming makes use of PHP, Rails, Node, ASP.NET, etc., as the technologies and client-side programming makes use of HTML, CSS, Javascript, etc.

Here is where I am fundamentally confused.. From what I know, a PHP file can include HTML, CSS, and Javascript... My question is:

If server-side and client-side programming are indeed separate, why does PHP include HTML, CSS and Javascript? If all of these are done in PHP, the server, where does the client come in? In a typical website run on a PHP server, will there be standalone HTML, CSS, and Javascript files that are not PHP files? Will the client-side developer have have edit the HTML, CSS, and Javascript parts of the PHP file, while the server-side developer works on the PHP part of the file?

Answer 1

Your question sure is a good one many people asked sometime in their lives(web developers). PHP indeed is a server side script, but the .php extension acts like a normal .html file most of the time.

PHP needs to be a partner with JS and HTML to work.

E.g. A login form. First, the client has completed the form and submitted it. JS then comes in power, using ajax to send your login information to the server(It could be the same document xxx.php, but the server only cares about the php script part).

Then, it sends back a result from the server and may insert a snippet of JS into your login form, where JS empowers and redirect the user from their HTML interface to a new website.

As you can see from the above example, clients and server handles a webpage differently disregarding their file extension. Clients cannot download the PHP source code and the PHP server doesn't care about other than php code themselves.

A single web file is like a port, where clients send information to a php page and the server returns a snippet.

Clients and servers may use one single .php page or can refer to different pages, but the server side webpage is always unaltered

---

If server-side and client-side programming are indeed separate, why does PHP include HTML, CSS and Javascript?

So it can compactly pack small things inside one web page. Clients view the interface, server executes the PHP code. However, it is not necessary to pack everything into one webpage.

Also, the .php extension can be viewed by clients, so that they know they will interact with the server sometime on that page. Also, .php does not necessary need to include PHP code.

If all of these are done in PHP, the server, where does the client come in?

Clients need to use JS to send information to the server for its response.

On a typical webpage running on a PHP, will there be standalone HTML, CSS, and JavaScript files that are not PHP files?

Yes, files that need not to be parsed by the PHP engine can be named and stored as standalone HTML, CSS and JavaScript file.

Will the client-side developer have have edit the HTML, CSS, and Javascript parts of the PHP file, while the server-side developer works on the PHP part of the file?

I will rephrase your question to be "So the client-side browser can change the DOM, while the server works on the PHP part?". There is no "client sided developer. There is just client sided visitors"

Partially right. Clients download a webpage, not using the same file on the server, the webpage can be altered before sending to the clients. Clients don't get to read the PHP source code, the server is done running the PHP code before sending a webpage to the clients, so the two do not run together. When clients send queries to the server, the server executes nothing but PHP. The .php document is unaltered on the server. After the PHP server has responded, usually, they will send back information to the browser viewing that particular webpage and trigger JS code and change the webpage's DOM, which means the look of the webpage is modified. You can interpret it as "HTML, CSS and JS" being altered.