So many of the conversations that I have with non-developers about web development eventually lead to some explanation of the languages and frameworks that I use to build a site or application. It becomes necessary, then, to explain the specific roles that each language performs, why they do what they do, and why the do not do what the other languages do.

But most people don't have any idea what even the most basic concepts are - hell, many people don't know the difference between a browser and the net (/facepalm) - So how to get the concepts and the languages across in a meaningful manner becomes somewhat of an interesting analogy challenge.

Well, in the interest of good relations, here are some (very) simple examples and explanations of a few of the languages, what they do and why they do it.*1

PHP :: The MIND of Web Development

PHP is the brains of the outfit. It is what is known as a server-side language as it does all of its decision-making, not on your computer (that's a client-side language, and you're the client) but on the server computer before it builds the page that you eventually see. For example, if you go to www.yourbank.com and want to get a listing of today's purchases on your debit card, PHP is the one that says "Alright, listen up! We need to get some data from that database. I want to filter out the data we don't want and I need to format it into a table with column names. Then we need to pass it to the user's computer. Let's move, move, move!"

The server-side language is the primary language used when building interactive sites. It is the centre-point that links all of the other languages together. PHP is a logical language, meaning that it handles all of the logic that allows an application or website to make decisions.

Here's a simple decision example...

See the Pen Example embed 1 by Skoti-Alain Elliott (@swinginsam) on CodePen.

...which translates to "If it's raining and our umbrella is not extended, perform a task that extends our umbrella, BUT if it's not raining, AND ONLY IF our umbrella is already extended, perform a function to collapse our umbrella." Attempting to extend an extended umbrella or collapse an already collapsed umbrella wouldn't work, would it? - It would cause an error in the logic and become the dreaded BUG!

SQL :: The MEMORY of Web Development

SQL is the language used by databases to, say, retrieve data from or insert new data into a database table. What's a database? Quite simply, a database is a memory bank that holds various information used in web development and is sorted by data type in tables, much like a Numbers or Excel spreadsheet.

SQL is written in queries and statements. In other words, you can either ask a question about data in the database with a query or tell the database to do something to the data with a statement. So the SQL query for the 'get the purchases made on my debit card' example above could be something like:

See the Pen Example Embed 2 by Skoti-Alain Elliott (@swinginsam) on CodePen.

Not too far from English, hey? This translates to something like "Show me the name of the store and the amount of each purchase for all transactions that happened today-- displaying the first transaction first, then the next, etc." Well, that's what we wanted to see, but notice that while we are asking for the amount of each purchase and the store in which each purchase was made, we are, in the query, also asking the database for the user ID and the card (account) number. This "filter" ensures that we retrieve only the purchases that YOU made on YOUR card and not the millions of other purchases made by everyone else with a YourBank debit card. Make sense?

HTML :: The BONES of Web Development

Now here's a language that you've probably heard of. HTML is the language that is used to display information in your browser. It doesn't do anything about how the data looks (or at least, it's not supposed to be used for that,) it's simply there to structure that data.

So, we got the data about today's purchases from the database, but we now need to structure that data for display in such a way that it makes sense to you. It would hardly be useful without that! So, we use HTML to structure the data, in this case, into a table.

Here is a shortened example of the HTML structure of a table...

See the Pen Example Embed 3 by Skoti-Alain Elliott (@swinginsam) on CodePen.

...which, when we continue to build our full table looks like:

Well, we certainly got our data but wow! is that ever ugly. Looks like Windows to me. But fear not, in part two we'll take a look at another language called CSS that will fix that problem and make this table look much better and become easier to read.

Oh, and by the way, If you were at all up on the Apple vs. Adobe thing back in 2010 or simply not living in a cave for the past 7 years, you've probably heard of HTML5, which is the newest specification for HTML that adds a whole bunch of new and exciting features to the markup like code semantics, animation, audio, and video. Very cool!

Let's continue on the tools of web development in part two.

_{*1 - I will be making some very generalised statements throughout this set of articles to simplify concepts, and make them easier to grasp. While generally true, some may be overstated in specific instances.}