Can someone please explain to me exactly how PHP, mySQL, Javascript, and HTML/CSS are related?

PHP is a serverside language, while JavaScript and mySQL are clientside languages. I think the difference is that PHP/HTML is the language used by the server to encode instructions for the web browser, using mySQL or Javascript, to interpret.

I would really appreciate feedback for my answer as I have no idea whether it’s accurate or not. I just started learning this stuff this week.

I’m pretty sure that mySQL is server-side, since it is the sub-language of SQL(Structured Query Language), in which databases are written. I could also be wrong about this, since I’m pretty new at this and haven’t really used anything beyond HTML/CSS and a little javascript. Thanks for answering though. This fluther site is pretty cool. This was my first question, actually.

I know that PHP and mySQL are server-side laguages, and that html, css, and javascript are all client side, I just don’t know what each one’s proper place is in a web application. Say one is building a site in which there is to be a lot of user-created content. Does one create a javascript form, and then pass the data to php for storage in the mySQL database, to be retrieved later by a call from PHP, which was called from a user-event in Javascript, or what?

MySQL isn’t a server side language, it’s actually a program (in the same sense that Microsoft Word is a program) that runs on the computer that we call the server.

The MySQL software reads and writes from database files that it creates, where it stores the information you throw at it using SQL statements. SQL statements are instructions that tell the MySQL software what to do, like “create database”, “insert entry”, “delete entry”, etc.

Hope this sort of clears things up a bit… it’s a lot to take in when you’re getting started!

If you’re just getting started with web development, you should ignore Javascript. Javascript isn’t required for anything; it’s typically used for enhancements and effects.

You create a form in HTML syntax, which is read by web browsers when they download the .html file (web browsers like Firefox, IE or Safari). The web browsers pull apart this HTML syntax and render a form that users can type things into and submit. In the HTML markup you define an “action” statement, like this:

<form action=“form_processor.php” method=“post”>

In this example, the action is form_processor.php, and we use a method=“post” to tell the web browser to post the information the user types into the form to that PHP script. In PHP, you can then collect that information using variables like $_POST[‘email_address’] and do things with it, like send an email or pass information to the MySQL software using SQL statements in the PHP.

Sorry, I’m really not explaining this very well. I highly recommend this book though, I know a lot of people that have learnt very quickly by reading it. Let me know if you have questions.

HTML is a mark-up language that is interpreted in your browser to define how a web page should be structured and in some cases how it is styled (colors, etc). CSS is a better method to style web sites, as it provides a central document that can control the colors, layout, font sizes and type, borders, etc that will update every page that links to that CSS document. It also reduces redundancy by letting you create style rules in one document rather than having to update every page on your site to change a font size.

Javascript is a scripting language that runs in your web browser to do dynamic events. When you are typing a reply on Fluther and you see the Live Preview down below, that is done with Javascript. Javascript is also frequently used in image galleries to make images appear over the regular web page, to validate the data submitted in forms, resize elements, etc. There are thousands of scripts available online that will do almost anything you want, so I would not spend a huge amount of time learning Javascript. It’s rare that you won’t be able to find a script to do what you want without having to duplicate the effort of creating it from scratch.

PHP is a server-side language that allows the web server to follow programming logic to make decisions and change the HTML file that is sent to the browser.

MySQL is a database system that runs on the server to hold information, which is accessed by the PHP script.

So, to use Fluther as an example, say you want to post a new question.

You push an “ask question” button. The browser sends a request to the server after some initial handshaking that it would like a file on the server called ask_question.php. The server sends that file to the browser (which contains only HTML, for simplicity’s sake). The browser looks at the HTML and notices that a CSS file and a Javascript file and some images are linked inside. It sends more requests to the server asking for the CSS, image and Javascript files so that it can finish interpreting the HTML and displaying it on the screen.

Now you see the web page on your screen and start typing a question. While you are typing, there is a Javascript script running that automatically takes what you are typing and displays it in a designated area of the page as HTML so that you can see a preview of what you are typing.

When you have finished the question you press the Submit button, which runs a Javascript script that checks the data you entered to make sure it was filled out correctly. It might make sure that there are no empty fields, make sure that an email address is formatted correctly, make sure two passwords match, etc. If there is an error then the Javascript pops up an error message to let you know without submitting the data.

If the data is ok, then the browser connects to the server and says it needs thanks.php, and it also has some information attached that was entered on the form. The PHP script looks at the data that was submitted by the form, sees that it has instructions to save this data, so it connects to the MySQL database and sends it the information along with commands on how and where to store the information. Then the rest of the script may say to send HTML back to the browser that says thank you for submitting a question, etc. The CSS and Javascript file do not need to be downloaded again unless they have changed, because they are cached on the local computer running the web browser and are the same for the whole site.

Next another person comes along and wants to look at questions, so their browser asks the server to send it display_questions.php with a list of the questions on the site. So the server opens the PHP document and sees that there are parts of the page that say to load information from the database. So it connects to the MySQL database, issues a couple commands to tell it what information it needs, plugs that information into the specified area of the HTML document, and sends the HTML document to the person’s browser with the question information inserted from the database.

That is a simplified explanation and of course doesn’t exactly match Fluther, but I think you’ll get the idea. :)

I’m just learning all this myself, so there’s no way I could top @StellarAirman‘s answer, but I can recommend a couple of books… I’ve been using the Sam’s books on HTML/CSS and JavaScript/Ajax/PHP – between the two of them, they give you a really good foundation in almost everything you’re asking about (and there are other Sam’s books about MySQL too, if you’re interested). Good luck!