So you’re dabbling in the world of HTML are ya?  You’ve got Dreamweaver installed and you’ve figured out how to make some pretty nice pages with all kinds of cool images and styled fonts and even threw in a table here and there, or even deciphered how that ‘in-page’ Dreamweaver CSS code works!

By now, the acronym HTML probably doesn’t even scare you as much as it did when you started setting up your very first ‘Hello World’ page, does it?  But what you’re really itching to know how to do is how to make your awesome HTML page talk to some data and truly make your page dynamically-driven!

Does this sound like you? If so, let me be the first to welcome you to the wonderful world of ‘Data-Driven Website Development’ (insert trumpet fanfare here) using PHP and MySQL!

STATIC VS. DYNAMIC

If you are already thinking that you need to move from the ‘static’ html world to the ‘dynamic’ one, you probably already know why.  If not, let’s take two minutes to explain why you would want to do this:

Static Sites

While regular HTML pages are awesome all on their own, there are a few limitations to them:

• They’re Static – Meaning that whatever content you put into them, that’s exactly the way they’ll stay.  All content will remain exactly the same way until the next time you edit the page and re-upload it.
• Lots and Lots o’ Pages – A typical website will probably have anywhere from 30 to 300 individual ‘pages’ if you start counting every single internal link… that’s a whole lot to keep track of!  Keep in mind that for the most part, most pages probably share the exact same layout too (this here is what we call fore-shadowing *wink wink*)!
• Lots and Lots o’ Maintenance Time – Time is money, or so they say… but even if you are not doing the web thing for money, time is well, time!  Maintaining a site with a large amount of pages can be very costly from a time-perspective, and can be very frustrating especially with changes to elements or blocks of text that are shared across site pages (there goes your weekend)!

Dynamic Sites

“So what’s the alternative” you ask? Great question!  Dynamic Sites help solve these limitations for us… here’s how:

• They’re Dynamic – “Yes, you’ve mentioned that… what does that mean?” Dynamic sites are generally designed with only a few page layouts, which are reused over and over, where the actual content comes from a database or other ‘dynamic source’, meaning that instead of changing a page or sets of pages, you simply change the data, and the page(s) instantly change to display the content!
• Lots o’ Pages Be Gone – Now, because we are reusing most of the page layouts mentioned, this means that even a website with 300, 500, 1000+ pages, could literally be made up of two or three actual ‘HTML’ (or in our case, PHP) pages!  How’s that for working smarter and not harder?
• Maintenance Time? Sure I’ve Got a Sec – Maintenance? Oh yeah, that’s what you do now during commercial breaks… Imagine making one change on your page layout and have it immediately ‘update’ across your 3000-page site?  I exaggerate you say?!?!  Bite your tongue!

Now, if you still need any further convincing, consider this: MOST if not ALL of the major blogging and CMS platforms out there like WordPress, MovableType, Drupal, Joomla and many others are based completely on PHP and MySQL!  If you have ever worked with or even seen the sites built around any of these platforms then you can imagine how powerful these dynamic websites are.  Think of the endless development possibilities you’ll have once you understand how to create websites using these two amazing components.

OKAY, I’M SOLD!

Glad to hear it!  Now, if you are starting to feel a little overwhelmed at this point, don’t! While the thought of taking a peek behind all the gears and levers that make up the ‘belly of the beast’ of such things like the WordPresses and Drupals of the web world may feel a bit daunting, rest assured… we’ll be taking the behind the scenes tour nice and slow.

After all, no one can be expected to run before they learn how to crawl, therefore crawl we shall!  And before you know it, you’ll be copyrighting, patenting and putting the final touches on your very own, next-generation monolith of a web-blogging-cms-type-gigantor-dynamic-content-chewing-snarling-creature of a platform, sure to inspire fear and awe in the hearts of future, fledgling newbee HTML dabblers, staring blankly in amazement at the wonder that is: YOUR DYNAMIC WEB CREATION!!! (enter ominous three-note flourish here).**
**results may vary.

THE CRAWL

Okay, still with me?  Awesome!  As promised, we will take this journey nice and slow. And while I know that you are just dying to jump right in, we need to go over some basic concepts in order to bring you up to speed with what you’ll be working with (if it helps the attention span at all, think of yourself as a pilot standing on the tarmac about to get a crash-course on the inner-working of his/her shiny new jet fighter… planes make everything funner don’t they?).

PHP

Let’s start by talking about PHP.  For the sake of trivial knowledge (and in case you ever want to impress your geeky friends), back in the day, ‘PHP’ originally stood for Personal Home Page, and was used for that specific reason… a web page where mom and pop could post pictures of the family, pets, etc., in other words, non-business related web pages.

Today, however, ‘PHP’ stands for Hypertext Preprocessor; doesn’t make much sense does it?  Don’t spend too much time pondering that… it was actually born of geeky ‘recursive acronym’ humor.  If you don’t find it amusing, good for you… that just means your inner-geek has not completely taken over just yet.

I’ve found that the easiest way to grasp what PHP actually does is like this:

FOR THE MATH FANS

Think of HTML as basic arithmetic formula:

1 + 2 = 3

Where the left side (1 + 2) is your (HTML) code and the right side (3) is what you see in a browser (the result).  The formula is all laid out for you, all the parts are visible, and just like HTML, it’s static.  If you wanted to change the result of the formula (or what you see as a result), you have to change the original equation:

2 + 2 = 4

We are able to change the result, but only after we’ve made some visible changes to that first part.  Following me so far?

PHP on the other hand, is more like an algebraic formula (if you’re not good at math, don’t worry, it’s just a concept):

x + 2 = y

Where the left side (x + 2) is your (PHP) code and the right side (y) is, again, what you seen in a browser (the result).  The difference here is that instead of dealing with static ‘input’ giving static ‘output’, we are working with variables, meaning that we can substitute any value (or content) on the left side (the code) and generate a different result as output (or what you’ll see in a browser), therefore if we were to use:

x = 1
we’d get:
x + 2 = 3

while:

x = 2
would give:
x + 2 = 4

What this means is that PHP allows you to use variables instead of static values. By assigning a value (text or numeric) to a variable, PHP will display or calculate content based on the assigned value!

“That makes no sense” you say? Let’s approach it in a slightly different way:

FOR THE REST OF US

Okay, so the math thing is tripping you up… no worries,  let’s try a non-mathematical, real-world example instead:

Let’s say you’re working on a page for Gloopy Goop Mfg Co. on which you want to showcase the ‘Goop of the Month Product‘ on several different spots. Now, being the smart, funny, charming and extremely clever dynamic web developer that you are,  you want to make your life easier by not having to hunt down and change every showcase item reference on the page next month, when the ‘Goop of the Month Product’ changes.

Rather than doing what you would normally do in plain old HTML, which would be having this in January:

“Gloopy Goop Proudly presents: Glooptastic Goop Application Gel!  Buy your very own Glooptastic Goop Application Gel today!”

Then in February, changing each instance manually to:

“Gloopy Goop Proudly presents: Glooptastic Goop Remover!  Buy your very own Glooptastic Goop Remover today!”

PHP allows you to set up some variables ahead of time like this:

$MonthlyItem = "Glooptastic Goop Application Gel";

Then set up your wording like this:

"Gloopy Goop Proudly presents: $MonthlyItem! Buy your very own $MonthlyItem today!"

So that the resulting output looks like this:

“Gloopy Goop Proudly presents: Glooptastic Goop Application Gel! Buy your very own Glooptastic Goop Application Gel today!”

Then, in February, by simply changing that original variable to:

$MonthlyItem = "Glooptastic Goop Remover";

Every instance of that variable throughout the page changes accordingly, like so:

“Gloopy Goop Proudly presents: Glooptastic Goop Remover! Buy your very own Glooptastic Goop Remover today!”

Makes more sense doesn’t it?

DAY 1 WRAP UP

Okay!  We are going to stop right there for today and let that concept sink in properly.  In Day 2, we will take a closer look at PHP and start getting our hands dirty with some actual working examples!  For you over-acheivers out there who feel more comfortable coming prepared to class, feel free to go to one of these two links (depending on whether you are a Mac or a PC) and download a copy of either MAMP (for Mac) or WAMP (for PC); both are absolutely free and will be needed if you want to follow along with the rest of us:

MAMP (for Mac) – http://www.mamp.info (standard MAMP is fine)

WAMP (for PC) – http://www.wampserver.com/en/download.php

After you’ve downloaded the version that’s right for you, go ahead and install it.  Feel free to keep all the defaults as you move through the installer, the standard settings should work just fine for most.

After that, come back tomorrow and we’ll get started on some real, hands-on dynamic webbing!  See you all back here for DAY 2 – Prep Time!