How does HTML, CSS, Javascript, mysql, and php all live together in a text doccument?

It’s deceptively simple. PHP and MySQL are server side, and run when a LAMP webserver serves out responses from http requests. The rest are client side and run inside the browser itself after it is delivered from the webserver response.

First, the browser is a little rendering world. HTML is just the content. It is text with little markup tags to give it structure, like layout rectagles, buttons, images, etc.

CSS applies to HTML and gives it style. Colors, sizings, layout justifications, etc. CSS is quite rich, and you can really make documents look almost like anything.

JavaScript and CSS live in their own special blocks of HTML surrounted by <style> and <script> tags. The browser gets all of it, parses it, styling the HTML and adding dynamic interactive things by running the script as a little program.

JavaScript can interact with the whole parsed document, because the browser exposes programatic hooks to it via what is called the DOM, or just a model of the document object it makes when it parses it. You can add click actions, dealing with user input in text input HTML tags, and even programatically add new HTML to the delivered HTML.

That was client side. Server side is utterly disconnected, and happens totally before, like I said, during the web servers response, before the browser ever received it.

When you request www.website.com/page.php, the web server answers by finding the file in the file system, in our case page.php. A LAMP server knows .php files are to be parsed. It scans the whole file for PHP, and only PHP, absolutely ignoring HTML, CSS, and JavaScript as simply stuff it is agnostic about, just like text.

PHP is surrounded in <?php> tags, not unlike <script> tags. They never make it back in the response to the browser, because they are parsed out before the server even replies.

PHP can make queries to a database. The database is on the server machine itself. PHP has parts of its syntax devoted to database stuff. It usually taks to MySQL databases. It can “SELET * FROM users” and gets an array of table rows. It can loop through and spit out bits of the data, sprinkling it into the page. It can sprinkle it into the HTML, and, this is not common anymore, but into JavaScript too, if you are so nuts.

If you want to get a feel for how it all works, you should get a LAMP webserver running on your computer, and make requests to it by navigating to “localhost”.

/r/webdev Thread