Welcome back everyone!  By now most of you have become pretty comfortable with the basic concept of how PHP works (at least in the simplest sense) and have had your share of fun with ‘echoing’ all kinds of neat little messages all over your pages!  Most of you are also probably wondering how this exercise is even remotely helpful to you since you are adding a bunch of code to something that can easily be accomplished in plain old HTML… AND with far less work!  Patience young grasshoppah… lets walk over that hill and find the answer to your troubles… Namaste.

BEYOND ‘ECHO’

Now, ‘echoing’ some text onto a page might not seem incredibly fascinating, but let’s take a stab at making it a bit more interesting than simply displaying some text, by taking a look at variables.

Most of your entire PHP ‘existence’ will revolve around the concept of variables.  For you algebra grads out there, I don’t have to remind you what variables are, but for those of us who have successfully blocked out most of high school (traumatic experiences will do that to ya), let’s take 13 seconds to revisit:

Variables are simply placeholders… think of them as stand-ins for something else.  Variables can be used an unlimited number of times and we can change their actual value at any point…

The way we use variables in PHP is very simple.  In order for PHP to identify a variable it needs to:

1. Be within a PHP code block (i.e. <?php … ?>)
2. Start with a ‘$’ (dollar sign)
3. Contain no spaces

That’s it.  Too easy you say?  It sure is!  Now, it should be noted that there are a couple more rules when it comes to variables:

Initial Declaration

Before we can actually use a variable anywhere, we need to declare it, or assign it a value.  Once you’ve declared a variable, you can start using it.

Example (String/Text variable):

<?php
$animal="dog";
?>

Notice how we’ve defined the variable, then we’ve assigned the value “dog” to it, by using the ‘=’ (equals) sign.

It’s important to note that since we are assigning text or a ‘string’ to this variable, we need to remember to use the “quotes” around it.  If this was a numeric variable, we would simply use numbers with no quotes… more on that later.

Finally, we’ve finished our declaration, by closing with a ‘;’ (semicolon).  That tells PHP that we are finished with that part.

Subsequent Usage

Now that we’ve declared our variable, let’s use it for something!

Below is an example of how you could use this variable… I will show you two ways you can accomplish the exact same thing:

Example 1:

<?php
$animal="dog";
?>
My favorite animal is a <?php echo $animal; ?>. A <?php echo $animal; ?> is man's best friend.

Example 2:

<?php
$animal="dog";
echo "My favorite animal is a $animal. A $animal is man's best friend.";
?>

Notice the difference in the code use?  Try this out on your own, testing out both methods. Regardless of which way you go with, both of these examples will give you the exact same results:

My favorite animal is a dog. A dog is man’s best friend.

Take a few moments to think about what you just tried.  The concept you should take away from it is this:

PHP code can either be sprinkled into your existing HTML, or you can use PHP to generate content as a whole.

One More Thing…

I really need to point this out before we go any further… please remember this, write it down, tattoo it onto your arm if you need to:

PHP works LINEARLY… meaning the code is read from start to finish or top to bottom.

Keep that very present as you code.  Any variable you declare or initialize, MUST be set before you start using it.

Variables as Numbers

Okay, we’ve now seen an example of variables being used to display text, but what if we wanted to use numbers instead?

Good on Ya!  That’s the spirit!  Assigning numbers to variables allows us to do much more than simply spit out a sentence or two!  Take a look:

Example (Numeric variable):

<?php

$num1=5;
$num2=10;
$result=$num1+$num2;

?>

Try this out on your own.  If you copy/pasted just right, you should get:

Adding 5 to 10 gives us: 15!

Purty neat huh?  Notice that when we assigned the numbers to our variables, we did not use “quotes” to surround those values.  Leaving out the quotes tells PHP that these are values and not just strings of text, which force it to evaluate or calculate the values for us.

Our $result variable is where all the magic happens.  Notice how we are able to add the variables together without having to explicitly say: $result=5+10; (although that would also work… but you get the point).

DAY 3 WRAPUP

We’ll stop right there for today, but as always, the fun doesn’t have to stop on your end; play with the code and try other variations of it.  Practically every type of calculation can be performed, using the above format.

As a reference to you, here are the very basic operations and how to express them in your code:

• ‘+’ : Adding (i.e. 10+5)
• ‘-’ : Subtracting (i.e. 10-5)
• ‘*’ : Multiplying (i.e. 10*5)
• ‘/’ : Dividing (i.e. 10/5)

See you all back here for Day 4 – Form Integration, where we’ll be dipping our toe into the web2.0 realm and really start looking at how we can not only talk TO our adoring public, but talk WITH them, using basic form integration.

See you all then!

Leave a Comment

Welcome to Day 2 of Dynamic Web Development!  Today we are going to start covering some fun stuff, dabbling with some PHP and getting you set up to the point where you are a bit more dangerous than you were yesterday!

If you have not already done so, go ahead and download MAMP (for Mac) or WAMP (for PC). The download will take a little while, so that will give us a bit of time to talk about what we’ll be using!

MAMP/WAMP

“What’s this funky program I’m downloading?” Glad you asked!  Now, while regular HTML pages can be created offline (i.e. right on your computer) and opened up on your favorite browser with no problem, PHP pages are slightly different.  In short, PHP pages are actually scripts, and require some special processing in order for your browser to understand what you are trying to have it display.

MAMP and WAMP are both really cool programs that actually create a kind of enclosed environment within your computer which allows it to act as a mini, full-featured web server!  Both of these are basically bundled with Apache (that’s the web server part), MySQL (that’s your database server) and PHP (that’s the gentle giant that will make all your web dev dreams come true).

Once the program is installed, not only will it interpret your PHP pages and have it display correctly on your browser, but also you’ll be able to set up some databases for some real dynamic, data-driven fun!

PHP

Okay, let’s take a look at our primary focus point for now: PHP.  As I mentioned before, PHP pages are scripts.  They look just like HTML pages, but instead of ending in the typical ‘.html‘ or ‘.htm‘ you are probably used to seeing, these end in ‘.php‘.  It’s important to understand that there is nothing special that needs to be done to a page in order to make a PHP file; just the fact that a page ends with ‘.php‘ is good enough for your little MAMP or WAMP server to understand that it is a PHP script and should be handled differently than a plain HTML file.

Don’t be scared away from the term ‘script’ either.  Most people immediately think ‘program’ when they hear the word script.  You don’t need to have any programming background or knowledge other than what you already know how to do with HTML (and even if THAT is limited, worry not, young Padawan… you’ll be up to speed in no time)!

FIND WALDO

Okay, let’s connect A and B for you.  Below is an example of a very basic HTML page:

<html>
<body>
Hi! I'm an HTML page!
</body>
</html>

Pretty basic right?

Let me give you an example of an equally basic PHP page:

<html>
<body>
<?php echo "Hi! I'm a much cooler PHP page!"; ?>
</body>
</html>

That’s it!  Now, pretending that the PHP code snippet were Waldo… can you find him in that second example?  Awesome!  Glad to see all those years of playing off of the back of Life Cereal boxes has finally paid off!

THE SNIPPET… IT CONFUSES ME

So you’ve found the snippet… “What does it mean?” It means you’re not afraid to ask questions… good for you!

This is where our handy PHP interpreter comes to the rescue.  Unassisted, a browser would display the second example above, exactly like this:

<?php echo “Hi! I’m a much cooler PHP page!”; ?>

But if we allow our handy little PHP interpreter (AKA: MAMP/WAMP) to take a crack at it, the output would look like:

Hi! I’m a much cooler PHP page!

OKAY… I’M KINDA FOLLOWIN’

A PHP page can have all of the usual fun little HTML stuff inside it; tables, images, CSS styling, etc. The difference is that as soon as it runs into anything surrounded by:

<?php ... ?>

It immediately switches gears and allows the PHP interpreter to do its thing and ‘interpret’ the code inside.  After the interpreter has done it’s thing, it spits out the ‘HTML-friendly’ code, which is then passed along to the browser, who now totally understands what you meant to have it do!

It’s kind of like a translater!

Exactly!

BASIC SYNTAX

Now that we’re all on the same page about who does what and why, let’s move aside that Baterang, cause we’re going to start adding a couple of key components to your utility belt (SHAZZAM)!

Let’s dissect that piece of code we just used:

<?php echo "Hi! I'm a much cooler PHP page!"; ?>


Let’s break it apart:

<?php


This is what you will ALWAYS use to start any PHP code block (think of these as parenthesis on steroids).

echo

The ‘echo’ command tells the browser to display the thing next to it.

"Hi! I'm a much cooler PHP page!"


Any text you want to display needs to be in double or single quotes (we’ll talk about the difference, but for now, let’s keep using doubles).

;


The semicolon tells the interpreter that it is finished with that part of the code.

?>


And finally, this is what you will ALWAYS use to end any PHP code block (this is the ‘closing’ part of our steroid-powered parenthesis… and just like regular parentheses, always remember to close them after you’re done using them).

GOT IT! LET’S GET THIS PARTY STARTED!

Good!  Okay, enough classroom time, let’s take this magic school bus over to the lab!

By now your MAMP or WAMP download has probably finished up, and if you didn’t take a break in the middle of our learning annex to run the installer (look at you… such a good student!), go ahead and do that now!  … don’t worry, I’ll wait.  In fact, I’ll time ya!  Ready?  Go!

DONE!

Wow, you’re fast! Hardly broke a sweat, didn’t ya?  Now that you’ve got MAMP/WAMP installed and running, fire up the little default page it comes with, just to make sure everything is working correctly.

If you’re having trouble with the install, try one of these friendly, neighborhood resources to get you through it:

MAMP (Mac): http://www.mamp.info/en/documentation/

WAMP (PC): http://www.tagbytag.org/tutorials/getting-started/web-design-software/wamp-guide

Once you’ve got things running, take a couple of minutes to find where on your actual computer the ‘root web folder’ is located (Anything you create from here on out, MUST be saved within or under this folder, otherwise your browser WILL NOT be able to see it)…

MAMP: /Aplications/MAMP/htdocs/

WAMP: C:/Program Files/wamp/www/

If you are using Dreamweaver or some other HTML editing software, now would be a good time for you to set up a local site and point it to your respective root folder (this will make things much easier for you as we move ahead).

AND IT BEGINS…

Now that you’ve got your shiny new web development environment all set up, let’s take it out for a spin!

From Dreamweaver (or your second favorite HTML editing program), create a New File (select ‘PHP’ as the file type if prompted) and let’s save it as: mypage.php

Now a brand new page will probably look like this in code view:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Don’t worry about all the scattered code. From here on out, your only focus will be what’s between the ‘<body></body>’ tags.

Copy/Paste the following PHP code between the ‘body’ tags, so it looks like this:

<body>
<?php echo "Hi! I'm a much cooler PHP page!"; ?>
</body>


Then, SAVE your page.

From your browser, preferably a separate tab or window (don’t leave me!), type or click this link:

http://localhost/mypage.php

If you are using MAMP and the above link does not work, try:

http://localhost:8888/mypage.php

Assuming that you have both saved your file to that root folder you located earlier, and that you named your file: mypage.php, you should be staring at the magnificence of your VERY FIRST PHP WEB PAGE!!! (can’t you just hear the trumpets in the background?), and displayed majestically in front of you should be the phrase:

Hi! I’m a much cooler PHP page!

…oh, yes. That you are…  That… you are.

DAY 2 WRAP UP

And believe it or not, just like that, you are well on your way to a bright and much more dynamic web world!

While the example you just tried is very basic, it’s important that you understand the concept of how PHP pages are written, and what is needed for your browser to understand them.

We are going to stop here for today, but your ‘hands on’ session doesn’t have to!  Feel free to play with the code snippet you just made.  Add tables, pictures or just about any other HTML elements to your page and throw in as many PHP code snippets as you want! The best way to learn, after all, is by doing… so DO IT!

Tomorrow, we’ll start looking at some more useful ways of using PHP including using variables and some basic math… Hey you in the back, I heard that sigh, don’t worry… this is the fun kind of math that requires not a single pencil nor piece of paper from you, and will let you do some pretty amazing things.

See you all back here for Day 3 – PHP for Beginners!

Leave a Comment

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!

Leave a Comment