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:
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!
No comments yet.
Leave a comment