Oct10, 2006

Beginner's Guide to PHP - Part One

First things first, we might as well get out of the what PHP is not:

  • PHP is not a replacement for HTML.
  • PHP is not a synonym for MySQL. Although they work well together, they're not the same thing.
  • PHP is not all about layout-based includes.
  • PHP is not magically going to make your website better, faster or more entertaining.

That said, PHP is lots of other things. It's a powerful scripting language that can power anything from a full-featured, whizz-bang-whollop content management system for your weblog entries and articles to a simple poll asking visitors which football team they support. It's flexible, relatively easy to learn and can provide hours of fun (well, if you're into that kind of thing).

PHP stands for "PHP: Hypertext Preprocessor". Apparently it's a recursive acronym, i.e. an acronym that includes the acronym in its definition. I think that's a bit whacky personally, but there we go. PHP is a scripting language — don't call it a programming language because you make "real" programmers mad. I'm led to believe its syntax is based upon other languages like Perl and C, but because I'm far too lazy to learn those you'll have to just nod and agree at this point.

Checking for Support

Before we even get into the actual code though, you need to check that your server supports PHP. If you're already running something like WordPress or one of my fantastic scripts then yes, your server supports PHP. Remember though: unless you have a special server application installed on your computer, you will not have offline support and will need to upload anything you create. To check for PHP support create a file with a .php extension — anything.php, boobies.php, test.php — something along those lines will do. Inside the file, type:

<?php
phpinfo();

?>
Upload the file to your web space and then visit it in your browser. If you get a page with lots of purple-background tables on, stuffed full of information, then your host supports PHP and you can continue. If not then this tutorial/article is not for you! (Sorry.)

The Basics — Understanding Terms Used

There are a lot of common terms/words that people use to refer to specific parts of PHP (and other) scripts and for someone who's never programmed or scripted before these can be confusing. Learn these first and it'll help prevent problems later on...

Statement
A statement is a line, or series of lines, that instructs PHP to do something. It's usually these series of lines that make up a script.
Data Type
Easy peasy: a type of data! Not hard to grasp that one.
String
A string — one of four data types — is a series of characters. Something as basic as "hello world!" or something as complex has "jemjabella.co.uk is the best website in the whole wide world and jem really rocks".
Integer
Integers are another data type. An integer is a whole number: 5, 83, -1204. Integers do not include fractions or numbers with decimal points.
Floating point number
Another data type. The floating point number is similar to an integer but must contain a decimal point. For example, my IQ: 187.45921 or my brother's IQ: 0.9134. I'll leave guessing which brother up to you...
Boolean
The last data type (and often the most useful) a "boolean" is a TRUE or FALSE value (sometimes represented by 1 or 0, or NULL for false). Boolean values can only be one or the other.
Variable
A variable is like a little "store". Variables all sorts of data of the types mentioned above. Variables are very important, and we'll learn more about them shortly...

Variables — The Brain Cells of PHP

I like to think of variables as the brain cells of PHP because they store the data that is key to making our scripts work (like our brains store our knowledge). Variables can be added together (if they contain numbers), edited, joined together — all sorts of fancy crap.

Variables generally look like this: $variable_name. They start with the dollar sign, they can contain letters, numbers and underscores (but must not start with a number) and can generally be any length (although a short sensible name will be easier to remember later on than a long random one). One thing to watch out for with variables is that they are case sensitive: $vArIaBlE, $VARIABLE and $variable are three different variables.

Variables are created simply by assigning data to them. Data can be any one of the types I briefly mentioned before. Let's look at some examples of creating variables:
<?php
$name = "Jem"; // this is a string
$age = 20;     // this is an integer
?>

There are two variables. The string is stored within the quotation marks, and we end the statement with a semi-colon. The integer is not surrounded by quotation marks (else PHP assumes it's a string). The semi-colon is very important — miss it and you'll get errors spewed at you! We now have two variables which we can manipulate as we wish (which we will, in the next "lesson".)

And there you have it: a little background on PHP including the basic terms used and a beginners look at variables. In the next part we'll take a look at outputting data (including our new variables) to the browser and how to go about it.

Tagged , , and .

Aug20, 2006

Use code Not textarea

Take a quick look at a handful of teen tutorial websites and you will notice a recurring trend: code is distributed through a multitude of <textarea>s. While these are often coloured, in an attempt at creating some sort of consistent colour scheme, it is rare that the site owner has made an effort to resize them. This creates an undesirable box only a few lines high rendering the inner code impossible to read.

It would be easy to address this problem with a few lines of CSS, but why bother when the method is inherently flawed? <textarea>s are a form of input. That means they were designed for users to enter text in, not the webmasters. There is no reason to continue this abuse of the <textarea> when a semantically correct and certainly obvious ‘replacement’ exists: <code>

The correct way of displaying code is with the <code>, or <pre> tags. <code> is an excellent way of marking up small snippets, like the code/pre tags in this paragraph. <pre> is ideal for larger blocks of code, as it retains any tabs and line breaks without having to add superfluous &nbsp;s, etc. Both can be styled equally easily with CSS.

  1. First, convert the code into its entity equivalents. This stops the code from actually turning into elements on the page.
  2. Next, decide which is better for your code block, <code> or <pre> using the above paragraph.
  3. Surround your converted code with the <code> or <pre> tags.
  4. Style with CSS using your custom properties, or an example set out below.

Code Snippets & Examples

Feel free to use any of these snippets to style your own <code>/<pre> tags :)

Code (for inline code samples)

Example: code example 1
Code: code { font: 11px/1 Courier New, monospace; color: #f00; }

Example: code example 2
Code: code { background: #ffc; font: 12px/1 Courier New, monospace; color: #090; }

Example: code example 3
Code: code { background: url(your image here); font: 13px/1 Georgia, serif; color: #000; }

Pre (for block-level code samples)

Note: overflow: auto; enables the scrollbars and must be included, otherwise the inner code will not adhere to the width/height properties.

Example: pre example 1
Code: pre { width: 400px; height: 50px; overflow: auto; border: 1px solid #fcc; padding: 5px; font: 11px/1 Courier New, monospace; color: #f00; }

Example: pre example 2
Code: pre { background: url(your image here); width: 400px; height: 100px; overflow: auto; border: 1px solid #f00; padding: 5px; font: 12px/1.2 Courier New, monospace; color: #000; }

You are limited only by your own creativity…

See also - How To Display Code Examples On Your Website

Tagged , , and .

Newer »