How to create Web sites and

applications with HTML, CSS,

J avascript, PHP and MySQL.
By Robert Schifreen
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Th e Sm all Prin t. Ple as e Re ad .

This book is free of charge for personal use. You can use it to help you develop
sites for yourself or for anyone else.

You m ay not share the PDF file or upload it to online services. If a friend or
colleague wants a copy, please ask them to download it from our web site.

To distribute copies of this book for comm ercial purposes, such as a textbook
for a school class or a training course, or if you’re an internet service provider
and you want to give or sell copies to your custom ers, you need to buy a licence
for each copy that you distribute. See www.the-web-book.com for details.

Producing derivative works is forbidden. You m ay not create your own version
of this book, regardless of whether a fee is charged. In addition, you m ay not
create a web site the content of which is wholly or partly based on text
extracted from this book.

Separate editions of The Web Book are available, featuring exam ples from
different hosting com panies and configured for different printer page sizes.
Refer to the web site to see the latest offerings.

The W eb Book is published by Oakw orth Business Publishing Ltd.

Registered in the UK. Com pany num ber 2783266.
Telephone 0 1424 213872 (UK)
+44 1424 213872 (International)

Edition 2.1 (Septem ber 20 0 9).

All content copy right © Robert Schifreen

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
2
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Contents
Co n te n ts ....................................................................................................................... . 3

Abo u t Th e W e b Bo o k ..................................................................................................... 7
Why We Recom m end Hostm onster.com ............................................................................................. 8
A Custom Edition For Your Com pany .................................................................................................. 8
Who’s Written This Book? And Why?.................................................................................................. 8
Why We’re Here .................................................................................................................................. 10
From Word Processor to Web Site.......................................................................................................13
But How Long will All This Take?........................................................................................................13

W h at Is a W e b Site An yw ay? .........................................................................................14

How the Web Works ............................................................................................................................14
Dom ain Names .....................................................................................................................................15
The Sim ple Option .............................................................................................................................. 19
The Flexible Option ............................................................................................................................. 20
About Web Content ............................................................................................................................. 23
Do you need a developm ent server? ................................................................................................... 24

Ge ttin g Eve ryth in g To ge th e r........................................................................................ 2 5

D o m ain N am e an d H o s tin g ......................................................................................... 2 7

It’s Not Rude to Point .......................................................................................................................... 33

H TML Ed ito r an d FTP Clie n t ....................................................................................... 3 5

Am aya .................................................................................................................................................. 35
Make A Web Work Folder ................................................................................................................... 35
Filezilla ................................................................................................................................................ 36

Cre atin g Yo u r Firs t W e b Page ...................................................................................... 3 9

N o w s te p aw ay fro m th e co m p u te r! ............................................................................. 4 4
WWW – What, Why, Who? ................................................................................................................ 44
Im porting Existing Content ................................................................................................................ 45
Writing For The Web........................................................................................................................... 46
Fonts and Colours ............................................................................................................................... 47

H yp e rlin ks .................................................................................................................. 4 8
Linking to Other Sites ......................................................................................................................... 50
Mailto: Links ....................................................................................................................................... 50

U n d e rs tan d in g Th e Bas ics o f H TML ............................................................................ 5 2

Meta tags ............................................................................................................................................. 55
HTML Accessibility, Accuracy and Privacy ........................................................................................ 56
Validating your HTML ........................................................................................................................ 56
A Bit More about Accessibility ............................................................................................................ 57

Cas cad in g Style Sh e e ts ................................................................................................ 5 9

About DOCTYPEs................................................................................................................................ 60
Getting Started with CSS..................................................................................................................... 60
A Word About Fonts............................................................................................................................ 67
Classes ................................................................................................................................................. 69
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
3
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Making Styles Work For You .............................................................................................................. 70

HTML Tags Nam es.............................................................................................................................. 70
A Better CSS Editor ..............................................................................................................................71
ID-based Styles.................................................................................................................................... 74
Extrem e CSS ........................................................................................................................................ 75

Page Layo u ts an d D iv Tags .......................................................................................... 78

The CSS Box Model ............................................................................................................................. 83

Pictu re s On Page s ........................................................................................................ 8 4

About Im age Sizes ............................................................................................................................... 85
Pictures As Links ................................................................................................................................. 86
Finding Im ages to Use on Your Site.................................................................................................... 87

A Bro w s e r Ico n fo r yo u r Site ....................................................................................... 8 8

Sh o rt Cu ts to Gre at W e b Page s .................................................................................... 9 2

Using an Open Source Design ............................................................................................................. 94
Tweaking the Text ............................................................................................................................... 95
Changing the Pictures ......................................................................................................................... 96
Changing the CSS Styles...................................................................................................................... 97
Which Style Is This? ............................................................................................................................ 99
Adding Pages and Navigation ............................................................................................................10 1
Uploading the Finished Files ............................................................................................................ 10 4

Ru le s , Table s an d Im age Map s ................................................................................... 10 6

Horizontal Rules................................................................................................................................ 10 6
Tables................................................................................................................................................. 10 8
Im age Maps ........................................................................................................................................110

Pas s w o rd -Pro te ctin g yo u r W e b Page s ........................................................................ 113

The .htaccess File ............................................................................................................................... 113
The .htpasswd File.............................................................................................................................. 115
Protecting Multiple Folders ............................................................................................................... 117

CMSe s an d Oth e r So ftw are ......................................................................................... 118

CMSes and Tem plates ....................................................................................................................... 120
Autom atic Installers ........................................................................................................................... 121
Try Before You Install ....................................................................................................................... 122
A Word about Patching ..................................................................................................................... 123
Setting Up A Database....................................................................................................................... 124
General Installation Procedures ....................................................................................................... 126
Uninstalling ........................................................................................................................................127

Jo o m la .......................................................................................................................12 8
Uploading the Files ........................................................................................................................... 128
Configuring J oom la ........................................................................................................................... 129
Your New J oom la Site ....................................................................................................................... 134

W o rd Pre s s ................................................................................................................. 13 9
Downloading the Software ................................................................................................................ 139
Make a Database ............................................................................................................................... 139
Configure WordPress ........................................................................................................................ 139
Upload The Software .......................................................................................................................... 141

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
4
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Final Configuration ............................................................................................................................ 141

p h p BB ........................................................................................................................14 6
File Perm issions .................................................................................................................................147

Plo gge r ....................................................................................................................... 154

Getting Started ...................................................................................................................................154
The Installation Process .....................................................................................................................156
Uploading Your Pictures ................................................................................................................... 158
Avoiding Data Overload .................................................................................................................... 160

In s tallin g th e PSPad Ed ito r ........................................................................................ 16 2

Javas crip t...................................................................................................................16 6

Choose Your Side............................................................................................................................... 166
J avascript and Sem icolons .................................................................................................................174
Em ail Address Obfuscation ................................................................................................................174
Why Upload? ......................................................................................................................................175
Security and Cookies ..........................................................................................................................176
Morning All! .......................................................................................................................................178
Getting the Screen Size.......................................................................................................................179
J avascript Toolkits and Fram eworks .................................................................................................179
Finding Out More .............................................................................................................................. 180

W e b-h o s te d D atabas e s w ith MySQL ...........................................................................18 2

Databases, Tables, Fields, Rows and Colum ns ................................................................................. 183
Norm alization .................................................................................................................................... 183
Referential Integrity .......................................................................................................................... 186
Creating A Database ...........................................................................................................................187
Port Problems .................................................................................................................................... 190
Using phpMyAdm in .......................................................................................................................... 190
Creating The Custom ers Table .......................................................................................................... 192
Inserting Som e Data...........................................................................................................................197
Querying the Custom ers Table.......................................................................................................... 199

In tro d u cin g PH P ....................................................................................................... 2 0 8

Don’t Panic! .......................................................................................................................................20 8
Your First PHP Program ...................................................................................................................20 9

So m e Mo re PH P ......................................................................................................... 2 16
Random Num bers ............................................................................................................................. 216
Sending Em ail with PHP ................................................................................................................... 219
Passing Inform ation to PHP ............................................................................................................. 222
Never Forget to Sanitize .................................................................................................................... 224
Loop the Loop.................................................................................................................................... 227
Arrays................................................................................................................................................. 229
User-Defined Functions .................................................................................................................... 233

H TML Fo rm s ............................................................................................................. 2 3 6
Creating a Form with Am aya ............................................................................................................ 238
Nam ing the Form Objects ................................................................................................................. 241
Handling Form Data and Quote Marks ............................................................................................ 244
Testing The Form .............................................................................................................................. 246
Retrieving Textarea and Dropdown Data ......................................................................................... 249
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
5
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Checkbox Arrays................................................................................................................................ 250

Feedback Form s ................................................................................................................................ 252
Hidden Fields .................................................................................................................................... 252

Acce s s in g MySQL D atabas e s w ith PH P ...................................................................... 2 5 5

Counting Rows .................................................................................................................................. 257
Reading Data ..................................................................................................................................... 259
Searching A Table.............................................................................................................................. 264
Preventing SQL Injection Attacks ..................................................................................................... 269
Adding Data to a Table ...................................................................................................................... 270
Editing a Data Record ....................................................................................................................... 276
Deleting Data ..................................................................................................................................... 284
Putting it All Together ....................................................................................................................... 285

D e bu ggin g an d Glo bal Variable s ................................................................................ 2 8 7

Syntax Errors ..................................................................................................................................... 287
Coding Errors ....................................................................................................................................288
The $ _ SERVER Variables................................................................................................................. 292

Ap p licatio n Stru ctu re Re vis ite d ................................................................................. 2 9 5

Web Servers and the Real World ...................................................................................................... 296
Saving State ....................................................................................................................................... 297

H o w to Back U p yo u r W e b Site .................................................................................. 2 9 8

Don't Forget the Data ........................................................................................................................298
Restoring Lost Inform ation ..............................................................................................................30 0

Pro m o tin g an d Pro fitin g............................................................................................ 3 0 2

Prom oting Your Site .......................................................................................................................... 30 2
Making Money...................................................................................................................................30 4
Accepting Online Paym ents ..............................................................................................................30 6
Managing your Marketing.................................................................................................................30 8

Se arch En gin e Op tim is atio n ....................................................................................... 3 13

SEO Tips .............................................................................................................................................313
Keeping the Crawlers Away................................................................................................................315
If at First you Don’t Succeed, Pay ..................................................................................................... 316

Th e En d . So , W h at N o w ?............................................................................................3 18

Ap p e n d ix A – Bu ild in g a Te s t Se rve r ........................................................................... 3 19

Our Goal ............................................................................................................................................ 319
First Install the OS ............................................................................................................................ 320
Som e Useful Com m ands ................................................................................................................... 321
Get Updated....................................................................................................................................... 322
Test Your Web Server ........................................................................................................................ 323
Install the Telnet Server .................................................................................................................... 323
An FTP server .................................................................................................................................... 324
Webm in ............................................................................................................................................. 326
Webalizer ........................................................................................................................................... 327
PHP and MySQL ............................................................................................................................... 328

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
6
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

About The Web Book

If you want to create web sites, there are hundreds of books and web pages that claim to
show you how. Som e of them are very good in deed. But this book isn’t like all those other
books and web pages, for a num ber of im portant reasons:

1. The Web Book is an electronic book, or e-book. You sim ply download it as a PDF file
from www.the-web-book.com and print it yourself. Or read it on-screen.

2. The Web Book covers all of the technologies that you need to know in order to create
Web sites, both using static HTML pages and database-driven sites.

3. Unlike m any books on the subject that were written som e years ago, The Web Book
teaches you up-to-date m ethods. Follow the instructions here and you can be
confident that you’re doing things in the right way, rather than using old-fashioned
techniques that are now frowned upon.

4. I’ve tried m y hardest to keep everything non-technical. If you’re "into" com puters,
you should be able to follow everything just fine. You certainly don’t need to be a
professional techie. In fact, if you are, you’ll probably take offence at the way I’ve
sim plified som e things. For which I apologise.

5. If you already look after a web site, perhaps for your school or college, or the
departm ent you work for, you m ay be itching to take your skills to the next level. Or
m aybe you didn’t actually get m uch training when you took on the responsibility, and
you don’t really understand how everything fits together. In which case, this book is
perfect for you. We don’t just tell you to press buttons. We explain what those
buttons do, and why you need to press (or not press!) them .

6. Here’s the best bit. The Web Book is fre e o f ch arge . So if you want to teach yourself
how to do Web stuff, whether for creating your own sites or to m ake sites for other
people, just grab a copy of the PDF file, print out the book, and away you go.

One word of warning, though. Creating a web site and doing it properly isn’t a sim ple task
that can be done in an afternoon. Yes, we’ve all seen 2-page m agazine articles that im ply
otherwise, but sadly it’s just not true. Even at 329 pages, this book is only a basic
introduction to som e of the m ore com plex topics. It’s quite possible to buy books on HTML,
CSS, PHP and MySQL which each run to 80 0 pages. I wouldn’t recom m end it, however,
unless you have trouble sleeping.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
7
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Why We Recom m end Hostm onster.com

If you want to create web sites, you need a com pany to host them for you. There are
thousands of such com panies out there. The exam ples in this book are based around one in
particular, nam ely www.hostmonster.com. We chose this com pany because their
products appear to be good, and they offer good value. They host the site from which you
will have downloaded this book.

If you’re looking for a web host, we’d love you to use hostm onster because, if you sign up via
our web site at www.the-web-book.com, we get a sm all am ount of com m ission. But the web
is all about freedom of choice, so if you want to go elsewhere you’re m ore than welcom e to do
so. You’ll need to adapt the exam ples slightly, but details of any settings or concepts that are
unique to hostm onster are clearly identified in the text.

If you’re considering using a different host, check our web site first. There m ay be a custom
edition of the book available for that host. We're working on new ones all the tim e.

A Custom Edition For Your Com pany

If your com pany sells web hosting services and you wish to give away or sell copies of this e-
book, we can create a custom version of the book for you, where all the exam ples feature your
hosting. You can then point your custom ers at our web site to download their copy.

For inform ation on this service, see www.the-web-boook.com/customize.html or

em ail [email protected].

Who’s Written This Book? And Why?

Th e W e b Bo o k is written by Robert Schifreen, a UK-based journalist, writer and technical

author. I have m ore than 25 years’ experience of writing all sorts of technical articles for
various com puter m agazines, and 9 years’ experience developing web sites for m yself and
clients. I’ve also written a "traditional" book before, that was published in 20 0 6 and was
available as a real hardback in real bookshops. A Google search for "defeating the hacker"
will find it for you.

Having taught web developm ent to the 2,50 0 staff at a UK-based university for the past few
years, I thought it m ight be helpful to turn m y course into a book, which is loosely based on
the stuff I teach and is also inspired by the questions that m y students ask. From now on,
when people ask m e how to create a web site, or whether it’s easy, I don’t have to spend tim e
explaining everything. I can just say "go to www.the-web-book.com and download m y
free book, which tells you everything you need to know".
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
8
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This is the book which I really wish had existed when I started doing web stuff all those years
ago. But, you’re probably asking, why am I giving it away instead of selling it? There are 3
reasons.

One. I quite like the idea of being able to write what I want for a change, without having
publishers and editors to answer to.

Two. I want as m any people as possible to see this book, because I think it’s useful. The
trouble with traditional publishing is that, of the hard-earned m oney that you hand over to
pay for a copy of a traditional book, m ost of it is swallowed up by the publishers and their
m arketing costs. The author, the guy who sat in front of his PC for m onths writing the thing,
typically gets around 15% of your cash. Som etim es less. So I’ve decided to try som ething
different. This book is free to download and use. It is financed in 3 ways:

• If you want to m ake a sm all donation via www.the-web-book.com/donate.html

you're m ore than welcom e.
• If you run a web hosting com pany and you would like m e to produce a custom
version of the book that features your hosting service, please see the page online at
www.the-web-book.com/customize.html for details and pricing.
• If you want to sign up with a web host, I'd really appreciate you signing up with
Hostm onster (who are featured in this edition of the book). J ust click the
Hostm onster icon on www.the-web-book.com/download.php and everything
happens autom atically. This brings m e a sm all com m ission paym ent, which helps to
pay for the 5 solid m onths it took m e to write The Web Book. It won't cost you any
m ore, but it m eans a lot to m e.

And the third reason why I'm giving away the book? Having been a professional IT
journalist, editor and writer since 1983, I’ve seen what the internet is doing to the publishers
of m agazines and books. Especially those com panies which produce IT-related publications.
Com puter m agazines across the world are being shut down and book sellers are having a
hard tim e, because the Web, not the pages of a book, is undoubtedly the best place to find
inform ation about technical subjects.

In m any cases, those publications shut down not because the product was poor, but because
the publishers failed to see the internet com ing and failed to act accordingly. Publishers
need to work with the internet, not against it. Sure, a search engine m eans that I can find an
answer to a technical problem instantly without having to plough through shelves of books
and m agazines. But the Web is also the greatest, biggest, best, cheapest and m ost efficient
way of copying and dissem inating inform ation that’s ever been invented. J ust ask the m usic
industry. So by prom oting this book on the internet as a free download I hope that I can
exploit the power of the internet rather than trying to work against it.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
9
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Why We’re Here

No one could have believed, in the last years of the 20 th century, that the way we’d all been
doing Web sites was about to change so dram atically. But it did, in two fundam ental ways.

Firstly, Web sites generally consisted of a collection of HTML docum ent files. Each page of
the site was a separate file (don’t worry if you don’t understand m uch of what I'm saying here
- everything will be explained m ore fully shortly). While this works for relatively sim ple
sites, with just a few pages, there are better ways to create web sites. Using database
technologies such as MySQL, and program m ing languages such as PHP, you can create not
just sim ple inform ational web sites that allow you to publish inform ation, but two-way sites
that allow your visitors to interact. Stop thinking "electronic newspaper" and think Facebook
or Ebay or Am azon.

The second m ajor change was in the fundam ental way that web pages were structured, in
term s of layout and form atting. Font tags gave way to som ething called CSS, or Cascading
Style Sheets.

In a nutshell, creating web sites has becom e vastly m ore com plicated over the past decade.
You’ll see from the front cover that this book covers HTML, CSS, J avascript, PHP and
MySQL. If you’re daunted by all that, then don’t be. We’ll cover everything in a logical
order, building up your knowledge in layers, so that all the new m aterial you learn will m ake
perfect sense because you’ll be able to see it in context.

You are, of course, free to dip into the book as you wish, reading sections in whatever order
pleases you. If you want to know what PHP or MySQL is all about, then by all m eans skip
straight to those chapters. But if you can possibly spare the tim e, you’ll find it m uch m ore
beneficial to read everything in order. It’ll m ake m uch m ore sense in the long run.

Of course, you m ay not actually need this book at all, if all you want to do is to put som e
inform ation online as quickly as possible so that other people can access it over the web.
There are plenty of free services out there that will allow you to do this, quickly and easily.
Am ong the best-known of these services are:

www.m yspace.com A social networking site, especially good if you want to upload
pictures and m usic rather than text.
www.facebook.com The best-known social networking site, where you can post
inform ation about yourself.
www.wordpress.com If you want a blog but you don’t want to run your own version of the
WordPress blogging software, this site will host a blog for you. J ust
sign up for free on the web.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
10
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

www.blogger.com Another blogging site which is free to use. Owned by Google. If you
want a personal blog with the m inim um of fuss, then using this site or
wordpress.com is by far the easiest way to do it.
sites.google.com Create text-based pages and publish them online for free, courtesy of
Google.
www.flickr.com The best-known place to upload your photos and share them with the
world.
www.youtube.com Does for video what flickr does for stills. Upload 10 -m inute clips of
just about anything.
docs.google.com Google’s web-accessible word processor and spreadsheet. Use it just
for yourself, or share docum ents with friends for collaborative
editing.
spaces.live.com Free web space for you publish a blog, pictures, m usic, or whatever
you like. From Microsoft.
www.twitter.com The m icro-blogging site, where you can tell everyone what you’re up
to.

Before you read any further, you m ay want to consider signing up with one or m ore of these
system s, even if only to gain som e inspiration into what your own site should, or shouldn’t,
look like.

Another option is to sign up with a site that offers an easy, autom ated way to create web
pages. Many hosting com panies offer such things, thus m aking it easy to create pages on the
hosting space that you’ve just bought. Am on g such offerings are Easy Website Creator from
leading hosting com pany 1&1, the design selection screen of which looks like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
11
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

J ust pick a design and a colour schem e, type in som e text, and you have a web site.

Another exam ple of the genre is from UK-based hosting com pany easily.co.uk. Again, their
design selection screen is shown below:

Once again, choose a design and just start typing.

Although these system s allow you to create a web site quickly and easily, they are very
lim ited. If you want J avaScript, PHP and MySQL, you’re norm ally unable to add it. You
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
12
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

can’t easily m ake m ajor changes to the design. And you’re frequently lim ited to just 20 or 30
pages, depending on which hosting package you sign up for. Som etim es the figure is as low
as just one page.

From Word Processor to Web Site

There's yet another way to create web pages, and that's to write the text with a word
processor such as Microsoft Word or OpenOffice Writer and then use the "save as web page"
feature to create files which you can put online. This is often a tem pting option, because a) it
looks to be very easy, and b) lots of people write docum ents with a word processor and then
realise that they'd actually quite like to publish them online.

The trouble is, the "save as web page" feature in Microsoft Word, including the m ost recent
version, is horrible. It produces pages which contain ten tim es as m uch inform ation as is
strictly necessary. Which m eans that they'll take up ten tim es the space on your server, take
your visitors ten tim es as long to download, and cost people ten tim es as m uch if they’re
accessing your site via m obile broadband or som e other m etered or pay-per-m egabyte
connection. Seriously, don't do it.

If you do have som e Word docum ents that you want to put online, there are som e excellent
third-party products available to do the conversion for you. My favourite is "Click To
Convert", which is what I used to create the web-based preview version of this book. All of
the pages at www.the-web-book.com/preview.php were generated autom atically by
Click To Convert.

If you’ve bought a hosting package and a dom ain nam e, and you’re not quite sure what to do
with it, one of the quick-start pages as m entioned above is better than nothing at all. But if
you really want to m ake the m ost of the web, there really is no substitute for learning how to
do it properly, and that’s what you’ll do if you continue reading.

But How Long will All This Take?

I do hope that you decide to read this book all the way through, and follow the exam ples in it.
Rem em ber that this is a textbook rather than a novel. By all m eans read through it in a day
or two, but you won’t get the best from it. For that, you need to work through it gradually, at
your com puter, following the exam ples. You should allow a week or 2, at least, to get the
greatest benefit. Maybe even a little longer if you want to experim ent further, and enhance
som e of the exam ples with your own ideas.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
13
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

What Is a Web Site Anyway?

A web site is, traditionally, a collection of pages of inform ation. Creating a web page is, in
m any ways, very sim ilar to writing a letter with a word processor and saving it on your
com puter, but there are a couple of im portant differences.

First, you have to save the page in a special form at (ie, language) known as HTML, rather
than as a norm al docum ent. HTML stands for Hypertext Markup Language. Why
hypertext? That’s the nam e given to the way th at we m ove between web pages by clicking on
hyperlinks (those bits of text which are norm ally in blue and underlined). A m arkup
language is just a way of "m arking up" text to specify that, for instance, when the visitor to
our site clicks on Hom e he gets taken to the hom e page.

The reason we have to save our pages in HTML form at, rather than as Word docum ents,
Excel spreadsheets, PDF files, Zip files, etc etc, is that the way we read web sites is with a
program called a web browser. For exam ple, Internet Explorer, Firefox, Safari, Google
Chrom e, or Opera. The only type of inform ation that web browsers are guaranteed to be able
to display are HTML files. Sure, if you put a Word docum ent on your web site, or a PDF file,
som e web browsers m ight m ake a good stab at displaying the file. But it’s never guaranteed
to work.

The second difference between creating web pages and writing a letter is that, having created
your web page, you obviously need to save it. But rather than saving on your own com puter,
where only you can see it, you need to save it onto a web server. A web server is sim ply a
norm al com puter, connected to the internet, which runs a web server program . This
program m eans that other people's com puters across the internet can connect to it, request a
copy of your page, and display it.

In theory, any com puter that has a perm anent connection to the internet can be turned into a
web server. J ust install the necessary software, which is easily available free of charge, and
the job is done. However, hackers love breaking into web servers and crashing them , or
trying to change the contents of the pages they store. So unless you really know what you’re
doing, it’s m uch easier and safer to rent som e space on som eone else’s web server to store
your web sites, rather than running your own server. It’s very cheap to do, as we’ll discover
later.

How the Web Works

It’s useful at this point to outline, in very basic term s, just how the World Wide Web actually
works in practice. What really happens when you turn on your com puter, open up your web

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
14
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

browser and type www.the-web-book.com into the address bar? How does the
inform ation get onto your screen? And where does it com e from in the first place?

As I m entioned above, a web page is a docum ent file, stored on a web server, created with a
program that’s a bit like a word processor but which saves its files in HTML form at. When
you open up your web browser and type www.the-web-book.com, your com puter connects
via the internet to a large, centralised directory in order to find out where the www.the-
web-book.com site is stored. This directory is called a DNS Server. DNS is the Dom ain
Nam e System , which gives each web server (or rather, each site) a unique nam e. In this case,
the-web-book.com . Com puters, of course, don’t like nam es. They prefer num bers. In the
case of the internet, each web server has a unique num ber known as an IP address. So the
DNS directory allows your com puter to look up the IP address of the server which holds the
the-web-book.com site.

Once your com puter knows the IP address of the web server which holds the site, your
com puter can then connect, again over the internet, directly to that server. Your web
browser sends a request to the web server, asking for a specific page of the site. The server
sends that page (or, if no specific page is specified, it sends the hom e page). Your browser
then displays the contents of that page, and the process is com plete. At least, until you click
on a link in order to see another page, and the process starts all over again.

Dom ain Nam es

So how do new internet dom ain nam es get created? Or to put it another way, how do you get
the nam e of your site into that m aster DNS directory? It’s a relatively straightforward
process.

Let’s im agine that you want to set up a brand new web site from scratch. The first thing you
need to do is to think of a nam e for your site. For this exam ple, we’re going to start selling
ham ster wheels online. We need a web site, and we want to call it
www.hamsterwheels.com. To create a new web site nam e, and add it to the global DNS
directory, we need to call upon the services of a dom ain nam e registration com pany. There
are thousands of such com panies, any of which will sell you an entry in the global DNS
directory. Prices vary, but they’re all selling you the sam e service, so shop around and find a
registrar that you’re happy to deal with.

It’s easiest if the registrar is based in your own country, but it’s not essential. If you don’t
know where to find such a com pany, type "dom ain nam e registration" into Google or look at
the adverts in your favourite com puter m agazine.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
15
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

For this exam ple, we’ll use a UK-based registration com pany called 123-reg.co.uk. Once you
surf to their web site you’ll see the following:

In the centre of the screen, under "dom ain search", you can type in the nam e of the dom ain
you want to register. Although there are thousands of dom ain nam e registration com panies
around, they’re all selling space in the sam e, single global directory, and you can only register
a nam e if no one else has already registered it. So the first step is to see if our required
ham sterwheels.com nam e is still available. We type ham sterwheels into the dom ain search
box, and the results com e back a few seconds later:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
16
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

It’s bad news. The ham sterwheels.com nam e is already taken, so we can’t register it. We
could, though, register ham sterwheels.co.uk or ham sterwheels.eu, or any of a whole host of
alternatives (m any m ore than fit on the picture above). Alternatively, we could try searching
for variations, such as ham ster-wheels.com or wheels4ham sters.com .

Those 2 or 3 letters at the end of the dom ain nam e are im portant. They say a lot about your
dom ain. Generally, .com sites are international in nature, or US-based. Sites ending in
.co.uk are used by com panies which are prim arily based in the UK. Sim ilarly, there’s a
dom ain for Germ any (.de), France (.fr), New Zealand (.co.nz), and every single country in the
world, all of which were assign ed by an official world body called ICANN, the Internet
Com m ittee for Assigned Nam es and Num bers.

There are of course exceptions to the rule that says m ost suffixes are country-related.
Schools, colleges and universities in the US, for exam ple, have .edu (for education) whereas
sim ilar institutions in the UK use .ac.uk (for academ ia) instead. Charities and non-profit
organisations often use .org rather than .com , to em phasise the fact that they’re not
com m ercial. There’s also .net for internet-related com panies, and m any m ore, such as .m obi
for m obile com m unications. But rules are m ostly m ade for breaking, especially in the area of
dom ain nam es. With a few exceptions (you can’t be .gov unless you’re a Governm ent
departm ent, for exam ple), you can norm ally choose whatever you want, so long as you can

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
17
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

find a com pany that will register the nam e for you. So if, for exam ple, you’re based in
Germ any and you want a .es dom ain nam e (for Spain, ie España), there’s nothing to stop you
doing so.

The only country not to have its own dom ain suffix, as they’re called, is the sm all Polynesian
island of Tuvalu. Having been assigned the suffix of .tv by ICANN, the governm ent of the
island accepted an offer of m any m illions of dollars by a Canadian entrepreneur, for the sole
rights to be able to sub-let .tv dom ain nam es to television stations around the world. So
whenever you see a TV station whose web site ends in .TV, and you wonder why the
television industry was given its own internet suffix, the answer is that it wasn’t given any
such thing.

As you can see, registering a dom ain nam e isn’t expensive. In the exam ple above,
ham sterwheels.co.uk is £ 5.98, or around US$ 10 , for 2 years. You’ll also notice that you can’t
buy dom ain nam es outright. You m erely rent them for a period of between 1 and 10 years.
When the registration expires, you autom atically have first refusal when it com es to renewal.
If you renew (which means paying again), the dom ain nam e rem ains yours. If you don’t, it
goes back into the general list, and anyone else can register it. There is, as you m ight expect,
a steady stream of individuals and com panies who attem pt to m ake m oney by renewing
dom ains that their owners have forgotten about, and then attem pting to sell back to the
previous owners.

There are pretty strict rules in place to stop you registering a dom ain nam e if your prim ary
m otive is to trick visitors into believing that you’re som eone else. If the owners of coca-
cola.com forgot to renew their registration, for exam ple, and you registered it for yourself,
there’s every possibility that Coke would com plain to the com pany through whom you
registered the dom ain and ownership would be transferred. The whole area of dispute
resolution is, however, plagued with difficulties. Com rie Saville-Sm ith, from Edinburgh, an
avid fan of the CS Lewis "Narnia" novels, was given the dom ain nam e narnia.m obi as a gift
by his parents for his birthday. But lawyers acting for the estate of CS Lewis com plained, and
Com rie had to hand it back.

My favourite dom ain nam e dispute of all tim e happened in the very early days of the Web,
when an enterprising young m an registered baa.com and set it up as a web site for fans of
sheep. The organisation known as the British Airports Authority, then colloquially (and now
form ally) known as BAA, com plained, claim ing that this was a blatant attem pt to extort
m oney by selling the dom ain nam e for a profit, and that the registrant had no real interest in
sheep. After a protracted legal battle, BAA won its case and the world’s sheepophiles had to
find a new hom e on the web.

Anyway, assum ing that we want to register our ham sterwheels.co.uk dom ain, all that
rem ains is to tick the box on the screen as shown above, provide som e valid credit card
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
18
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

details to the com pany when asked, and the job is done. Within just a few m inutes, a
confirm ation em ail m essage will arrive. We are now the proud owners, at least for a year or
2, of an internet dom ain nam e.

Having bought the dom ain nam e, how can we turn it into a web site? There are two options
but, whichever we choose, the first step is always the sam e.

A web site consists of two things. First, the dom ain nam e, ie the www.som ething-or-
other.com nam e that som eone has to type into their web browser in order to get to the site.
Second, the site itself, which is frequently (but not always) a collection of HTML files.

One of the m ost im portant steps in creating a new site is creating the link between the
dom ain nam e and the site's files. This is often referred to as pointing the dom ain nam e at
the site.

The Sim ple Option

In the sim plest of our 2 m ethods for turning a dom ain nam e into a usable web site, we
m erely register a free account at an existing web space provider such as MySpace, Facebook,
WordPress.com , Blogger, Google Sites, Flickr, YouTube, Google Docs, Microsoft’s Windows
Live Spaces, and so on.

Each of these system s offer you the ability to create content (docum ents, pictures, text, video
etc) that is accessible to everyone (or to whoever you want to m ake them available to) via the
web. You don’t need any special software or skills, just a com puter with internet access.

For exam ple, in the case of ham sterwheels.co.uk, the easy option for creating a sim ple web
presence would be:

1. Register the ham sterwheels.co.uk dom ain nam e

2. Create an account on a blogging site such as www.blogger.com , on which we can
create som e basic pages. When asked to choose an account nam e, choose
"ham sterwheels". Our blog will thus be assigned a URL of som ething like
ham sterwheels.blogspot.com . We could now sim ply tell people that the address
(URL) of our site is ham sterwheels.blogspot.com . But we have a better plan, which
will give our site a m ore professional feel.
3. Point our newly-purchased dom ain nam e at our blogger.com space. This is as sim ple
as logging into the web site of the com pany from which we purchased the dom ain
nam e and typing ham sterwheels.co.uk into a box on the "where do you want to point
this dom ain?" page.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
19
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

4. Now, whenever anyone types www.ham sterwheels.co.uk into their web browser, they
will end up at our new blog.

Having your own dom ain nam e for your online presence (eg www.ham sterwheels.co.uk)
rather than relying on the one that gets generated for you (ie ham sterwheels.blogspot.com )
gives you a valuable am ount of extra control that would otherwise not be available to you.

If you tell all your friends and custom ers that your web site is at
ham sterwheels.blogspot.com , what happens if you subsequently decide to m ove your pages
to wordpress.com or MySpace? Answer: Your site will effectively disappear because existing
users will no longer be able to find it.

However, if you’ve told everyone that your site is at www.ham sterwheels.co.uk, you won’t
have this problem . For as long as the content is held on blogger.com , that’s where your
visitors will end up when they type your URL into their browser. When you m ove the site
elsewhere, the visitors will end up at the new location instead. All you need to do is spend a
couple of m inutes pointing your dom ain at the new location, and everything then happens
autom atically.

So, if you’re tem pted to start setting up a web site in a low-risk way, and sim ply get som e free
space on a site such as MySpace or Blogger, it’s a really good idea to keep the m yspace.com
or blogger.com address private, and register your own dom ain nam e for it instead. If you do
this from the start, it’ll only cost a few dollars a year but will m ean that you retain the
freedom to m ove your hosting whenever you wish, without the risk of confusing or losing
your existing visitors.

On page 33, once we’ve registered our dom ain nam e, I’ll show you how to point it at your
page on Facebook.

The Flexible Option

Instead of pointing your new dom ain nam e at your area on a site such as MySpace or
Blogger, the "grown-up" option is to create a fully-fledged web site of your own and to point
the dom ain nam e there instead. To do this, you need to rent som e space on a public web
server in order to host your site, ie to store your pages.

It generally m akes sense to buy your hosting space from the sam e com pany that rents you
your dom ain nam e. Although it’s not essential, it does keep things sim ple. Whenever you
rent a dom ain nam e, the registration com pan y will also ask you whether you want to buy
som e hosting space. Sim ply tick the "yes" box and a few m ore pounds or dollars will be
autom atically added to your bill. It’s not particularly expensive. Renting the dom ain nam e

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
20
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

will be around $ 5 per year, and the hosting space will be roughly $ 5 per m onth (generally
payable annually in advance). You won’t be able to run the next Facebook.com on a hosting
service that costs $ 5 a m onth. But for a typical site that attracts a few thousand visitors per
week, a $ 5 plan should be plenty. If it turns out not to be, you can always upgrade later.

For what it's worth, the site from which you downloaded this book runs on a basic hosting
plan costing roughly $ 5 a m onth, and copes just fine.

Here’s a screen shot from 123-reg.co.uk, showing the options available for hosting packages
to com plem ent our dom ain nam e registration. As you can see, it’s not expensive. For less
than £ 30 a year, or around $ 50 , you can set up a web site from scratch, including the dom ain
nam e and the hosting. J ust add som e content.

When you’re buying hosting, the m ain things to look for are:

1. How m uch storage space for your site’s content do you get? Som e com panies only
give you a m easly 10 0 MB or so, while others offer up to 10 GB or 10 ,0 0 0 MB.
Others offer unlim ited storage.
2. How m uch data transfer do you get? That is, the traffic that flows between your web
site and your visitors’ com puters. If you have a page on your server that takes up
10 0 KB of storage, and 750 people look at the page each m onth, that’s 750 0 0 KB or

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
21
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

75 MB of traffic each m onth. If the page contains a picture in J PG form at that’s 210
KB, that’s an additional 210 KB of transfer each tim e. So you’ll want to m ake sure
that the am ount of data transfer offered by your hosting com pany is sufficient for
your needs.
3. What other facilities do you need, and are they included in the price? In our case,
for developing the sites covered in this book, we’re going to need the PHP
program m ing language and the MySQL database server. Most hosts offer this, but
not all of them do. And in som e cases you have to pay extra (m aybe $ 1 or 2 per
m onth).

As you’ll see, hosting com panies offer dozens of additional features that m ay or not be useful
to you. Som e offer 10 0 FTP accounts, for exam ple, allowing up t0 10 0 different people to be
able to upload pages to your site, each with their own usernam e and password. Unless you’re
a m ultinational organisation, this is unnecessary.

Equally, every hosting com pany will offer you a num ber of em ail inboxes associated with
your new dom ain nam e. In m y opinion, it's easiest not to bother with them . Instead, create
one or m ore em ail forwarding entries instead (these are free), to forward incom ing em ail
from your dom ain to, say, hotm ail or gm ail. Or to your existing em ail account.

Assum ing you get your hosting space and your dom ain nam e from the sam e com pany, the
process of setting up a Web site from scratch goes like this:

1. Register the dom ain nam e online, and tick the box to say that you want hosting space
too.
2. You’ll receive a confirm ation em ail that contains two sets of im portant inform ation.
First, how to log into the dom ain nam e control panel in order to point the dom ain
nam e at your hosting space. Second, the necessary passwords etc that you’ll need in
order to upload the HTML files, pictures, and all the other files that com prise your
new site, onto the server space that you’re renting. I call those passwords etc the
"Fundam ental Four", for reasons that will be explained shortly.

As for the inform ation on how to point your dom ain nam e at the server space, you can ignore
it for now. Because you bought the dom ain nam e and the server space from the sam e
com pany, this step will already have been done for you. All you need to do is to start creating
som e content for your web site and then upload it to the server. As soon as you start to do
this, your web site will begin to take shape. And in the rem aining chapters of this book I’ll
show you how to do just that.

As for those fundam ental four pieces of inform ation that allow you to upload content to your
hosting space, what are they? They com prise:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
22
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

1. The address of the web server

2. A usernam e for connecting to the web server
3. A password to accom pany the usernam e
4. Details of which particular folder or directory you need to upload your files into.

About Web Content

Having rented som e space on a web server, you can now get to work on the ongoing task of
creating, and m aintaining, the content of your site. There are 3 ways to do this.

1. In s tall s o m e re ad y-m ad e s o ftw are

There are plenty of web site m anagem ent system s available, both com m ercially and as free
downloads, which you can install on your new hosting space and which will fulfil som e or all
of your needs. If you want a web site that works like a blog, which you can log into and post
new content via a web browser, you need to be looking for a CMS, or Content Managem ent
System . In the world of free software, the leaders in this area are J oom la, Drupal and
WordPress. J ust download the software from the web, install it on the hosting space that
you are renting, and you’re ready to roll.

If you want additional features such as picture galleries, real-tim e chat, etc etc, there are add-
on m odules for m ost CMSes that provide such things.

If this sounds like the way you want to m ove forward, you m ay wish to skip the next few
chapters and go directly to page 118.

2 . D e ve lo p a D atabas e -D rive n Site w ith a W YSIW YG To o l

The second way to create a working site within your hosting space is to use a product that
lets you use drag-and-drop, and point-and-click features to design your own CMS-based
system , which the tool then turns into a num ber of custom -written program s and databases
for you to upload to your hosting space. If you want to go down this route, the leading
com m ercial product is Adobe Dream weaver, which is suprem ely powerful and
correspondingly expensive. If you want do build your web site in this way, m uch of what
follows is not for you. Instead, go buy a Dream weaver book, or look on Adobe’s web site for
som e tutorials.

3 . Cre ate Th e Site Yo u rs e lf

The third option, and the one which gives you the m ost power and flexibility, is to create the
web site yourself. This m eans starting off by creating a few sim ple pages using HTML, and

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
23
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

subsequently progressing to using database techniques with PHP and MySQL. If you choose
this m ethod, you can m ake your web site do anything you want. It’s the way that m ost
professional web developers work.

Don’t worry if you’re not an experienced program m er or designer. The program m ing side,
with PHP, isn’t particularly difficult. And there are loads of great web sites with ready-m ade
page designs that you can use for free.

If this sounds like the way you want to do web stuff, everything that follows is m ost definitely
for you. We’ll start with the basics of HTML and CSS to create sim plew web pages, and then
m ove on to techniques such as web-based program m ing with PHP in order to create dynam ic
Web-2.0 online applications.

Do you need a developm ent server?

In order to create web sites, you need to store the content of your site on a web server. If
you’re renting som e hosting space, you already have a perfectly usable web server for your
site. So, is it OK to use that server during th e developm ent process, for testing your site as it
takes shape and for storing pages that m ay not be quite finished?

Chances are, yes it’s perfectly OK. There’s no harm in using your "live" hosting space, or part
of it, as a test bed for an unfinished site. And there’s certainly no need to set up a com pletely
separate web server, accessible only to you, for developm ent purposes.

However, setting up a test server m ight occasionally be required. For exam ple, if you’re
working on a new business idea that you hope will m ake you rich, you really don’t want half-
finished pages appearing on a publicly accessible site before the project is officially launched.
Also, if you’re working on a particularly com plex piece of program m ing, which m ight crash
the server if it doesn’t work, you don’t want to risk dam aging a working site that is already
being used by existing clients.

In such cases, you m ight want to consider setting up a test web server for developm ent
purposes. Also, setting up such a server is a fun thing to do, which can teach you a lot about
how web sites and the internet work.

To find out how to set up a test web server, step by step, refer to Appendix A on page 319.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
24
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Getting Everything Together

You should now know all about dom ain nam es, web hosting, HTML files, and uploading.
With this knowledge, you can now create your first web page. This m eans creating an HTML
docum ent file and uploading it to the hosting space on a web server.

Throughout this book, for all of the exam ple web content we create, we’ll need som e hosting
space on a server som ewhere. As I m entioned, there are thousands of com panies that will
rent you space on their servers. In this book we’ll use a US-based organisation called
hostm onster for the exam ples. If your hosting is with som eone else, that’s no problem – they
all work in roughly the sam e way.

So having acquired som e server space, what’s next? To create web pages and upload them to
a web server you’ll need som e suitable software installed on your com puter. First, you’ll
need an HTML editor. This is a program which works m uch like a word processor, but which
saves the finished docum ent in HTML form at (ie, as a web page) rather than as a Word or
RTF file. Second, you’ll need a program which can upload (ie, copy) HTML files across the
internet from your com puter to the web server. The standard m ethod for doing this is called
the File Transfer Protocol, or FTP.

There are m any HTML editors on the m arket. Som e are expensive, com plicated com m ercial
offerings such as Dream weaver from Adobe or Expression Web from Microsoft. There are
also som e free ones, such as nVu, Am aya and Kom pozer, which you can download from the
internet. Sim ilarly, there are lots of com m ercial FTP program s such as ws_ FTP (the m arket
leader), and free ones such as FileZilla. Most com m ercial HTML editors, such as
Dream weaver, also have FTP capability built in, but the free ones tend not to.

If you subscribe to a com puter m agazine that has a m onthly CD or DVD on the cover, check
your collection of discs. You m ay find that there’s one or m ore HTML editors on them ,
which you could consider using.

Microsoft and Adobe offer tim e-lim ited trial versions of their software which you can
download from their respective web sites. While products such as Expression Web and
Dream weaver are certainly powerful, they’re also confusing for beginners so I’m not going to
suggest you use them for now.

If you already have an HTML editor or an FTP program installed, feel free to use it for all of
the exam ples in this book. If you don't have one, I'll assum e that you’d rather use a free one
than have to buy som ething. That goes for all the software m entioned in this book.
Everything that we’ll be using is com pletely free.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
25
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

For editing our HTML files we’ll use Am aya an d for our FTP uploads we’ll use FileZilla.
These are, in m y opinion, the best of the freebies.

So before you progress to the next ch apter, here’s what you need to do.

1. If you haven’t already registered a dom ain nam e and bought som e hosting space for
it, now is the tim e to do so. For the exam ples in this book we’re using the services of
www.hostm onster.com , but other com panies are also available. A Google search for
"web hosting" will get you started.
2. Make sure you have the details to hand of how to access your hosting space. You
should know the address of the server, the folder to upload files to, and a usernam e
and password.
3. Download and install Am aya on your com puter. This is your HTML editor.
4. Download and install FileZilla on your com puter. This is the FTP program for
uploading finished pages to the server.

The following chapters will explain how to do all this.

It’s assum ed that you’re working on a Windows com puter, using XP, Vista or Windows 7.
Apologies to those of you who prefer Apple Macs, but this book isn’t com patible with your
alternative lifestyle and I have no plans to produce a Mac version.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
26
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Dom ain Nam e and Hosting

The first stage in creating a new public web site is to register the dom ain nam e and rent som e
hosting space, so let’s do that now. Let’s sign up at www.hostm onster.com , and register the
dom ain called www.the-web-book.com . That's the dom ain that I'll be using for all the
exam ples that follow. Obviously you'll need to substitute the-web-book.com for whatever
dom ain you decide to register.

Incidentally, a m inor technical point that’s worth knowing at this point. We won’t actually
be registering www.the-web-book.com but m erely the-web-book.com. That’s the way
that DNS works. You register the top-level nam e, such as the-web-book.com or
fabnews.co.nz. How to handle prefixes is technically up to you, but in practice is
autom atically handled by your hosting com pany. You could, if you wish, change the prefix
from www to web. Or configure things so that www.yoursite.com ends up at one place
but web.yoursite.com ends up som ewhere else. Not that you’d do that, because it would
confuse people, but it’s possible.

These additional prefixes are called subdom ains, and can be useful in som e circum stances.
The BBC’s news pages, for exam ple, are at news.bbc.co.uk whereas its m ain site is
www.bbc.co.uk. Creating subdom ains isn’t som ething that we’ll cover again in this book,
but m ost hosting com panies support the facility if you particularly need to do it in the future.

Right, back to hostm onster.com . Let’s start by registering our nam e.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
27
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

We enter the dom ain nam e we want to register, and allow hostm onster to check whether it’s
available.

Note the option for privacy. There’s a public directory of internet dom ain nam e registrations
that allows anyone to find out the nam e and address of the person or organisation which
registered any dom ain. It’s known as the "whois" system . By selecting the privacy option,
which all dom ain nam e registration com panies offer in one form or another, your personal
nam e and address are withheld from the directory. Unless you’re a large com pany, you’ll
probably want to do this.

Our dom ain nam e is available, so let’s sign up and buy it, along with the basic hosting
package so we get som e space on the server for our web content. We’ll need to supply our
credit card details and an em ail address, and also choose a password for logging into the
control panel.

And we’re done. That’s all there is to it. We’ve now set up the required infrastructure for a
brand new web site. We’ve got a nam e, and som e space on which to host the site. All we
need to do now is wait for the em ail m essage with details of how to connect to our hosting
space.

After a few m inutes, it arrives. Here’s what it looks like:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
28
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

So now we have those "fundam ental four" bits of inform ation we need in order to upload
content to our new hosting space. The address of the server for FTP uploads is the-web-
book.com and the folder is / public_ htm l. The usernam e is thewebbo.

For obvious reasons I’ve obscured the password. Rem em ber to keep all web hosting
passwords safe and secure, and not let anyone else use them . Anyone who finds your
password could, in just a few seconds, delete your entire site from the server. Or, worse,
replace your carefully-crafted pages with gibberish or obscenities.

Having bought som e hosting space, the only way you’ll ever log into the hosting com pany’s
system s is via FTP in order to upload files. But all hosts also offer a control panel of som e
sort, where you can m aintain your billing inform ation and do all sorts of other interesting
things. Let’s have a look at our control panel now. To do this, we surf to
www.hostmonster.com and we’ll see that there’s a control panel login option. We sim ply
log in with our usernam e and password as specified in the em ail we received earlier:

Having done this, the control panel appears.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
29
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
30
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

If you’ve not seen a web control panel before, it probably looks rather daunting. Especially
when you see that there are 8 tabs/ sections and our screen shot shows just one of them . The
good news is that you’ll hardly ever need to touch it. But the other good news is that, should
you ever need to change anything about the way your web hosting works, it can all be done
via this control panel. One word of advice, though: each tim e you change som ething on the
control panel, m ake a note som ewhere. It'll com e in useful one day.

Let’s take a brief look through som e of the m ost im portant sections of this control panel. The
design of which, incidentally, is not unique to hostm onster. It’s a com m ercial product called
cPanel, which m any hosting com panies buy because it saves them having to write their own.

Stats
The area down the left hand side of the screen is your web site dashboard. It shows you how
m uch storage space and transfer capacity you’re using, when the hosting account expires,
and so on. There’s also a link to the Service Status page. If you ever find that your web site
isn’t working properly, check this page before assum ing that it’s your fault. The server m ay
be down for m aintenance.

Partn e rs / Pro m o tio n al

This section shows various additional services that you can sign up for, som e of which are
free. Feel free to click on the links and explore further. But none of these services is
essential, at least for the tim e being, so don’t bother signing up for anything unless you really
want to. It’ll only com plicated things further on.

Mail
From here you can set up the way that em ail works for your dom ain. When you buy a
dom ain nam e, you have control not only over the website at www.yourdomain.com, but
also any em ail sent to [email protected]. At som e point we’ll need to configure
this, because we want to ensure that m ail sent to, say, [email protected] actually
ends up som ewhere where we can access it. Equally, we want to be able to send m ail which
appears to have com e from [email protected]. But for now, this can wait. We
need to get the web site up and running first.

File s
The Files section of cPanel lets you browse and back up the files on your site, ie the HTML
docum ents that com prise your web pages. It’s sim plest to do this via an FTP program rather
than the web control panel, though, so m y advice is to ignore this feature.

Lo gs
It’s useful to know how m any people have been looking at your web site. All web servers
keep logs of such things, and all hosting com panies offer you a variety of ways to view those
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
31
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

logs. One of the friendliest log viewers is webalizer which, as you can see, has been installed
on the server for us. To view the logs we need do nothing m ore than click on the link. We’ll
talk m ore about logs, and how to m arket your web site, in a later chapter.

For now, though, click on Choose Log Program s and m ake sure that Webalizer is enabled.
That way, when you com e to the chapter on how to look at the stats for your site, there will be
som e nice Webalizer graphs to look at. If you don't tick this option, there won't be,

Se cu rity
These options allow you to add security to your web site. You can add password protection
to som e or all of your pages, or prevent access to your site from certain IP addresses. Leech
Protect adds additional protection to password-protected areas of your site, by allowing you
to specify how m any different IP addresses a particular password is perm itted to be used
from . This prevents m isuse of your site caused by passwords to protected areas becom ing
known and being distributed am ong hackers. We’ll cover web site security, and how to
protect the inform ation on your site, in m uch m ore detail in a later chapter. Generally,
protecting your web site is som ething you do within the site itself, rather than from a control
panel.

D o m ain s
This area of the control panels lets you m anage the dom ain nam es that you have registered
via the hosting com pany. You can transfer their registration to a different com pany if you
wish, or m ove other dom ains that you own from a different hosting com pany to this one.
You can also create subdom ains, as m entioned on page 27.

D atabas e s
In later chapters, we’ll set up MySQL databases on the server and then create web sites that
can access them . From this section of the control panel you can m anage those databases.

So ftw are / Se rvice s

This section allows you to change the way that certain key software applications on the server
work. For exam ple, you can change the m aster configuration file for the PHP program m ing
language if you need to tweak certain settings.

Ad van ce d
Am ong the options available here are "cron jobs". Most web servers, including this one, use
the Linux operating system rather than Windows, and a cron job is the Linux equivalent of
what Windows refers to as a scheduled task. This is a way for you to tell the server to
autom atically run a specific program at specified tim es throughout the day, week, m onth
and/ or year. You m ight, for exam ple, set up a cron job that runs a PHP program on the first
day of every m onth, which checks the m em bership database of your web site and sends an
em ail rem inder to everyone whose subscription to the site is about to expire.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
32
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

It’s Not Rude to Point

Earlier on, I m entioned that the easiest way to get a professional-looking web presence is to
register your own dom ain nam e but, instead of buying hosting space and spending tim e
creating pages, just point the dom ain nam e at your personal area on a site such as MySpace,
Blogger.com , Youtube, Facebook etc. Now that we’ve registered our dom ain nam e, I can
show you how to do just that.

First, m ake sure you know the web address (URL) of the site that you want to point, or
redirect, your dom ain nam e to. In this exam ple I’m going to point www.the-web-
book.com at m y page on Facebook, to m ake up for the fact that I haven't created any web
content for m y new dom ain yet.

Log into the web control panel. If you're using cPanel, you need the Dom ains section.
Specifically the option called "Redirects", which brings up a page that includes a section
which looks like this:

As you can see, I’ve typed (actually, pasted) the address of m y Facebook page into the
"redirects to" box. I’ve also selected the-web-book.com as the source.

That’s all you need to do. Click the "Add" button, wait a few seconds for your server to
update itself, and the job is done. If I now open m y web browser and attem pt to surf to
www.the-web-book.com, I actually end up at m y Facebook page instead.

Obviously, if you’re intending to go down this route from the start, there’s no need to pay for
hosting space when you register your dom ain nam e. Indeed, you can stop reading this book
now, as we’ve covered everything you need to know. However, with so m any good offers
around for com bined registration and hosting, you m ay decide that it’s easier to just buy
both at the sam e tim e, even if you start off by pointing your dom ain nam e at an external site
for the first few m onths rather than creating your own content.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
33
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

If you really do want to register just a dom ain nam e and have no intention of occupying any
hosting space, m ost hosting com panies offer this service. They all offer redirect facilities,
too, so that you can point your new nam e wherever you wish.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
34
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

HTML Editor and FTP Client

With our hosting space now purchased but sitting em pty, we need som e program s that will
let us start to fill it. This m eans an HTML editor to create pages, and an FTP program to
upload those pages to the server.

FTP program s com e in two flavours, nam ely clients and servers. For copying files between 2
com puters, you need a client. An FTP server is what the web server runs, allowing clients to
connect to it. Don’t m istakenly install an FTP server on your com puter, as it will allow
everyone in the world to attem pt to connect to your com puter via the internet and copy files
to or from your com puter.

There are plenty of free HTML editors available for Windows, and the one we’ll be using
throughout this book is Am aya. It's relatively easy to use and, unlike som e of the other free
program s, doesn’t attem pt to install additional spyware or toolbars that you don’t need.

There are m any free FTP clients available. One of the m ost popular is Filezilla, so that’s what
we’ll use.

Am aya
To download Am aya, visit http://www.w3.org/Amaya and follow the Distributions link
to reach the download page. It doesn’t m atter whether you get the http or FTP version – the
program s are both the sam e, the only difference is how your com puter perform s the
download.

New versions of Am aya are released every 4 m onths or so. The exam ples in this book are
based on version 11.2, released in m id-20 0 9.

Once you’ve downloaded the Am aya program and saved it to your com puter, double-click the
file to start the installation process. Keep clicking Next to accept the suggested options, and
the installation will com plete. The installer will add an icon to your Windows desktop,
m aking it easy to run the program whenever you want.

Make A Web Work Folder

Now is a good tim e to give a m om ent’s thought about where you want to store work-in-
progress web pages on your com puter. When you’re creating web content, such as HTML
files, the norm al way of working is to create and edit the files on your com puter, and only to
upload them to the web server (and thus m ake them available to the public) when they’re

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
35
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

finished. This has a num ber of advantages. Prim arily, it m eans you always have backup
copies of your pages, because there’s the version on the server and the version on your PC.
Also, it m eans that inform ation which you haven’t finished writing or checking can’t be
accessed by anyone except you. If your com pany is about to launch a new product, for
exam ple, uploading unfinished, unannounced details on the web site for Google (and thus
the world in general) to find is unwise.

You need a folder on your com puter to store your web work. For the purposes of this book,
I’ll assum e that this folder is on your desktop and is called Web Work. If you want to create
it som ewhere else, or give it a different nam e, that’s fine. But if you’re happy with m y
suggestions, right-click on your desktop and create a new Web Work folder now.

Filezilla
Visit http://www.filezilla-project.org to download the FileZilla FTP client.
Choose the option to download the latest Windows version. The exam ples in this book use
version 3.2.3.1, released in m id-20 0 9, but you m ay find that a slightly later version is
available by the tim e you read this.

Having downloaded the .EXE file, double-click it to start the installation process. Or if you
downloaded the .ZIP file, you’ll need to extract it first (right-click the file and choose Extract
All), and then double-click the extracted installer file.

You m ight be asked whether to install for all users or just for you. Unless you specifically
don’t want to do so, choose the "all users" option. It m eans that, if you have m ultiple user
accounts on your com puter, everyone will be able to use FileZilla. (You’ll need to be logged
into your com puter as an adm inistrator to be able to do this "All Users" installation. If you’re
not, try the other m ethod.)

You’ll then see a list of com ponents that you wish to install, such as icon sets, shell
extensions and so on. De-select them all, as th ey aren’t necessary. But you’ll probably want
to select the "desktop icon" option in order to have the installer create an icon on your
desktop.

We now need to configure FileZilla so that it can connect to your hosting space on the web
server to upload the files you create. This requires those "fundam ental four" pieces of
inform ation I m entioned earlier.

If FileZilla isn’t already started on your com puter, double-click its desktop icon to run it.
You’ll see a screen that looks som ething like this.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
36
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Note the references to Local Site and Rem ote Site. The form er shows the files on your
com puter, while the latter shows files on the web server. Or at least, they will when we have
configured the program .

From the File m enu, choose Site Manager and then click the New Site button. Choose a
nam e for the server you want to connect to, and press Return. Web Work is a suitable
choice, or perhaps use the nam e of the site you intend to create. FTP program s allow you to
create m ultiple connections like this, each with their own nam e, so that you can upload files
to different servers (or different folders on the sam e server) if you wish.

Having nam ed your connection, look under the General tab and enter the host nam e. That’s
FileZilla’s term for the address of your web server. In this case, I’ll use the-web-book.com
because that's what the account inform ation sent by the hosting com pany tells m e to use.
Change the Logontype to Norm al and enter your server usernam e (thewebbo in m y case)
and password.

Now click on the Advanced tab. In the Default Local Directory box, click the Browse button
and select the Web Work folder you m ade earlier. For the default rem ote directory, just type
a / (forward-slash) character.

That’s all there is to it, so click the OK button. FileZilla is now configured to connect to our
web server.

We can now test that it works so, from the File m enu, choose Site Manager again. Click on
the nam e of your server and then click the Connect button. After a few m om ents, you should

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
37
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

be connected. Depending on how Windows is configured on your com puter, you m ay receive
a pop-up warning from the Windows Firewall asking if it’s safe to unblock connections to the
FTP server. If so, just click on Unblock.

Assum ing that FZ can connect to your server, you should see som ething like this:

On the left hand side of the screen, under Local Site, you can see the local folder on your
com puter which we designated to hold our HTML files. In this case, it’s the Web Work
folder, which currently has nothing in it because we haven’t yet created any HTML files.

On the right, the Rem ote Site colum n shows the folders and files on your server. You’ll see
various folders such as .cpanel, .htpasswds, .ssh and others. The folder that is of prim ary
interest at this point is public_ htm l. This is where you will put all of the content that m akes
up your web site. All of the other folders are for use by the web server only, and are not
accessible to the general public via your web site. For now, it’s safest to leave them alone and
not be tem pted to explore or delete them .

With an HTML editor and an FTP client now duly installed and configured, we’re finally
ready to create web pages. So close FileZilla and we’ll get started.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
38
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Creating Your First Web Page

Tim e to create a web page. Start Am aya, and close the tip of the day if one gets displayed.

From the File m enu, choose New Docum ent an d you’ll see a box som ething like this:

Click the folder icon near the top right hand corner, browse to your Web Work folder and
click OK. Am aya will now generate a filenam e for your new page that ends with New.htm l,
but this isn’t what you want. So change it to index.htm l, as illustrated above.

Why index.htm l? Because if som eone visits your web site and doesn’t specify a particular
page that they want to see, the server will show them the hom e page. And the way that you
tell your server which is the hom e page, is by nam ing it index.htm l.

If som eone visits your site and explicitly types www.yoursite.com/products.html into
their Web browser, the server will send them products.htm l. But if they m erely type
www.yoursite.com, the server will attem pt to send them index.htm l. And if index.htm l
doesn’t exist, the visitor will see an "Error 40 4 – page not found" error m essage. So, you
always need to start with index.htm l when you’re creating a new site, or any new folder in an
existing site.

Incidentally, you m ay have noticed we nam ed our page index rather than Index or INDEX.
This is im portant. Generally, you should always nam e web pages in lower case, without any
CAPITAL LETTERS or spaces. That’s because m ost Web servers are case-sensitive, and
regard Index.htm l and index.htm l as two separate files. To avoid confusion caused by pages
not being found because they were typed by the visitor (or specified in a hyperlink) in the
wrong case, it’s best to standardise on everything being in sm all letters.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
39
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

So, we’ve nam ed our page. Now choose the "Replace Current" option, give your page a title,
and un-tick the From Tem plate box. Then click Create, and go ahead and type som e text
onto your page. It’ll look som ething like this:

When you’re finished, click File/ Save, then File/ Exit Am aya.

We’ve now created an HTML file, which should be in your Web Work folder. So double-click
the folder and then double-click the index.htm l file that’s in there. The file will open in your
web browser and should look like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
40
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

We’re nearly there. The page is on your com puter, but it’s not on the web server, so only you
can see it. The final step is to use FileZilla to upload a copy of the HTML file to the web
server.

Open FileZilla and connect to your server (from the site m anager, click your site and then the
Connect button). On the left hand side of the screen, in your local area, ensure that
index.htm l in the Web Work folder is listed. On the right hand side, in the Rem ote Site area,
double-click the public_ htm l folder to open it.

Now double-click the index.htm l file. FileZilla will copy it from the local folder to the rem ote
one. You should see it listed am ong the contents of the rem ote site:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
41
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

There it is, right at the bottom of the list, after assorted files such as .htaccess, 40 0 .shtm l and
others.

If your hosting com pany puts any folders or files in your public_ htm l folder, it’s generally
quite safe to delete them (albeit after a cursory check to ensure they're not vital) if you don’t
know what they are. After all, your public_ htm l folder is your public web site, and anything
in there is accessible to anyone in the world who types the correct filenam e and site nam e
into their web browser. For now, though, you can rest assured that these particular files are
harm less so don’t do anything with them yet.

With your index.htm l file uploaded, you now have a real, live, publicly-available web site. At
least, that’s the theory. To find out for sure, close FileZilla and open your web browser
(Internet Explorer, Firefox or whatever you prefer). Type the URL of your site ( www.the-
web-book.com in our case here) and you should see your page like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
42
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

We’ve done it. A working web site, hosted on a public server, available to the world! Now's
the tim e to m ail all your friends with the URL so they can adm ire your efforts.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
43
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Now step away from the com puter!

Once you know the basics of creating web pages, it’s hugely tem pting to plough straight
ahead and start creating a com plete site. Although that’s alm ost certainly what you want to
do right now, it’s a bad idea for two reasons. First, although you know the basic m ethod for
creating pages, there are lots of tim e-saving techniques that we haven’t covered yet. Much
better to know about them first, before it’s too late to go back and start using them . Second,
there’s m ore to creating web sites than sim ply typing text into an HTML editor and hitting
the Save button. You need to give som e serious thought to the design and usability of the
site, how you’re going to display the text, how you’re going to im port existing content from
other docum ents, and, m ost im portantly, who and what your site is actually for.

So if you’re tem pted to skip this chapter and get on with building your site, please don’t. If
you stop reading now, and start creating your site, you’ll end up with lots of pages that are
very difficult to update and which don’t conform to recom m ended standards. By all m eans
create a few test pages, and feel free to keep on experim enting, but please don’t assum e that
there’s nothing else im portant left to learn.

At the very least, please don't start creating a site for real until you've read:

1. The rem ainder of this chapter.

2. The chapter about CSS, which starts on page 59 .
3. The introduction to Content Managem ent System s (CMSes) which starts on page 118.

WWW – What, Why, Who?

Before you start to create a site, it’s vital that you have clear in your m ind:

1. What type of site you’re creating.

2. Why you’re creating the site.
3. Who the site is for.

What type of site are you creating, and why? Is it an inform ation site, where people expect to
quickly find what they’re looking for and then leave? Or is this an entertainm ent site, where
visitors browse and read with no particular purpose, and won’t com plain if it takes a while to
find what they’re looking for am ong all the pretty graphics and anim ations?

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
44
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This m atters because it will affect the layout of your pages. If you want people to quickly find
what they’re looking for, your m enus need to be clear and concise. Preferably stick with just
one (or a m axim um of 2) m enus on each page. If a visitor is looking for your contact details,
they shouldn’t have to scan 6 different m enus. Either the item is on the m enu or it’s not, and
this should be possible to discover alm ost instantly.

Equally, keep your m enu choices unam biguous and m utually exclusive. For exam ple, if your
site is all about vehicles, don’t have a m enu which contains item s called "vintage vehicles"
and "buses". Or if you’re writing the site for your com pany’s HR/ Personnel departm ent,
avoid having m enu options called "new staff" and "for m anagers". You’ll m erely confuse the
visitor who’s looking for vintage buses, or the person who’s a newly-recruited m anager. A
confused visitor won’t spend tim e exploring the options – he’ll sim ply try som eone else’s site
instead, or give up entirely. Therefore, spend som e tim e planning your m enu headings and
hierarchy so that the choices are obvious.

The best way to plan your layout and m enus (navigation) is with pen and paper, or a
whiteboard. There’s no need to use a com puter at this stage, so put away the PC and start
scribbling. When you have som e rough designs, create som e PC-based m ockups and show
them to a few people for com m ent. Ideally, th ose people should be potential users of your
site.

There’s no need to create the m ockups as proper HTML pages. Use a graphic editor such as
Windows Paint, or a spreadsheet, or whatever else you want at this stage. The pages don’t
have to function properly. If you’d rather use a com puter to create m ockup pages, rather
than pen and paper, one excellent program is called Mockups, from Balsam iq Software. You
can download it for around $ 50 , or use it online for free. Check out www.balsamiq.com for
m ore.

Put page content where visitors expect to find it. A logo at the top of the page. Menus on the
left or across the top. Main content to the right. Don’t set out to be different – you’ll only
end up being frustrating.

Im porting Existing Content

HTML is the prim ary docum ent form at used for Web pages. It’s the only one that every Web
browser can be guaranteed to read, whether that Web browser is a PC, Mac, m obile phone,
iPod, PDA, Blackberry, television, or any other device that has built-in internet access.

All of which leaves the question of what to do with all those existing Word docum ents, Excel
spreadsheets, PowerPoint presentations, PDF files and so on, that you’d like to m ake
available online via your Web site.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
45
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Generally, you have two choices. The first option is to upload the files to your site, just as
you would with any other file such as an HTML docum ent or a css file. You can then provide
a link to the .DOC, .XLS, .PDF or .PPT file just as you would to any other page on your site.
However, there’s no guarantee as to what will happen when the visitor clicks on the link. It
will depend greatly on which Web browser the visitor is using, whether he left- or right-clicks
on the link, and what software is already installed on his system .

Am ong the various things that m ight happen are: the browser will open the file and m ake a
stab (som etim es a pretty good one, som etim es not) at displaying it; the browser will pass the
file to another program on the com puter, which will open and display it; the browser will
com plain and do nothing; the browser will offer to save the file to the visitor’s hard disk.

Despite these potential problem s, not to m ention the fact that non-HTML files aren’t as easy
for search engines such as Google to find, uploading non-HTML files to Web sites is still
com m on practice and m ay som etim es be the only feasible option. Or at least, the only option
that you have tim e to im plem ent.

The second option is to convert the docum ent to a "proper" Web page, ie to an HTML file.
This m eans starting from scratch, copying and pasting unform atted plain text from the non-
HTML file into your HTML editor (eg Am aya) and then form atting it. If you have the tim e,
this is by far the better route.

One technique which you should definitely avoid is the "save as web page" feature built into
program s such as Word and Excel. Although this will produce an HTML file, the conversion
process is inefficient at best and downright appalling at worst. The resulting file will be
m any tim es larger than a version created by copying and pasting, and probably totally
unintelligible. Which m akes it hard to m aintain, and totally im possible to apply CSS styling
to. This is a classic exam ple of a short cut which will lead to m ajor problem s in the long
term . Do not be tem pted to go down this route. There's m ore about this on page 13.

Writing For The Web

Writing Web pages isn’t like writing printed docum ents, because people read Web pages in a
different way. For a start, if a Web page doesn’t provide the reader with the inform ation
they’re looking for within 5 seconds, they’ll give up and use Google to find a different site.
Here are som e tips to consider when you’re writing a new Web page or editing an existing
one:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
46
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

1. Think about who you’re writing for. What sort of audience? Young or old? Technical
or non-technical? Are they looking for inform ation or entertainm ent? Do they want
a plain, easy-to-read design, or would som ething m ore arty appeal?
2. Don’t start with a long "welcom e" intro, saying what the page is for. The visitor will
quickly skim -read the page and m ake up their own m ind as to whether it seem s
suitable. The quicker they find out, the m ore chance of them staying around.
3. Don’t assum e that everyone reading your Web site will have an enorm ous screen or a
fast internet connection. They m ay be browsing on a m obile phone or PDA, where
the screen is sm all and every m inute online costs m oney.
4. Keep paragraphs short and colum ns narrow. It’s m uch easier to read this way. Also,
don’t pack too m uch inform ation on each page. Users prefer to click rather than
scroll.
5. Line spacing of 1.5 or 2 is good. Sm all text with 2.0 line spacing is easier to read than
large text with 1.0 spacing.
6. Never use blue or underlined text. People will think it’s a clickable link.
7. Stick to the various conventions, such as a click on your m ain logo taking readers to
the hom e page. Som eone looking to contact you will be seeking a "Contact Us"
button, not som ething that says "Get in touch".
8. Don’t arrange text in colum ns such that the reader has to scroll the screen up and
down. It’s a Web page, not a newspaper.
9. Don’t waste too m uch above-the-fold (the area of the screen that can be read without
scrolling) with waffle or large pictures.
10 . Check the spelling of your pages, but don’t rely solely on any autom atic spelling
checker.

Fonts and Colours

Fonts (typefaces) are im portant. Sans-serif fonts tend to work best on screen, rather than
serif fonts. But don’t use non-standard fonts that your readers are unlikely to have installed
on their com puter. You can read m ore about fonts on page 67.

Readers will use your site’s colour schem e to form a subconscious opinion about you. When
did you last see a bank’s Web site that was bright red and yellow? When did you last see a
ham burger restaurant site that was dark blue? Choose appropriate colours for your pages,
but don’t go overboard. And don’t force people to rely on colours, such as referring in your
text to "the yellow box", because the visitor m ight be colour-blind or m ight be reading your
page on a black and write printout.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
47
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Hyperlinks
Probably the m ost im portant concept underlying the entire World Wide Web is the
hyperlink. Those 1 or 2 words, norm ally in blue and underlined, which your visitor can click
on to m ove to another page or another site. Once you know how to create sim ple web pages,
and som e hyperlinks to allow your visitors to m ove between them , you have the basic
building blocks for constructing just about any site you could ever need.

Before we can create hyperlinks we’ll need to create a second page for our site to com plem ent
our index.htm l hom e page. So fire up Am aya and, using the instructions on page 39, create
another page in your local Web Work folder. This tim e, nam e it m ore.htm l instead of
index.htm l. With 2 pages created for our site, we can now create som e hyperlinks between
them .

Using Am aya, open your index.htm l page. To do this, go to the File m enu, choose Open
Docum ent, then select File, then browse to the index.htm l file in your Web Work folder.

Edit the page so as to include som e text which will include the clickable hyperlink. Then
select the actual words that you want to turn into a link, by dragging over them with your
m ouse like this:

By selecting the text, we’ve told Am aya which words we want to turn into a hyperlink. All
that rem ains is to specify which web page to open when the link is clicked. So, from the
Links m enu, click on "Create or change link" and, in the box that appears, type more.html

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
48
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

and click the Confirm button. Then click som ewhere on the blank white space within your
index page.

Your link is now created, and should appear on your page as underlined text like this:

You’ve probably noticed m y choice of clickable text, nam ely "find out m ore". You m ight have
expected m e to choose "click here" instead. After all, doesn’t it m ake sense to always turn
"click here" or "click this link" into, well, som ething clickable? Actually, no it doesn’t.

One im portant aspect of web site design is accessibility. This m eans m aking sure that your
site can be used fully by those with disabilities. For exam ple, that bit of text which pops up
when som eone hovers over a picture (in case they can't see the pictures), or visitors bein g
able to navigate through your site using keyboard shortcuts rather than a m ouse. Making
your site accessible is, if nothing else, com m on sense and a polite thing to do. In m any cases,
depending on which country you’re based in and whether your site is produced by an
organisation in the public or private sector, creating an accessible site is actually a legal
obligation and you risk prosecution if disabled users can’t m ake full use of it.

People who are blind or partially-sighted often use screen reader software to help them
navigate the web. This special software reads out the contents of web pages via a voice
synthesizer. Having read out the contents of the page, it will then scan the page for

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
49
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

hyperlinks and read those too, so that the user can press a key as soon as he or she hears the
particular link they want to visit. And that’s the reason why I chose to highlight the words
"find out m ore" rather than "click here". Because a blind person would m uch rather listen to
a list of choices that consisted of "find out m ore", "go to m ain m enu", "print this page",
"browse our catalogue" and so on, than a list that said "click here", "click here", "click here",
"click here" or "click here".

Anyway, back to our page. We’ve created a link from our hom e page to our "m ore info" page.
Before our fantastic new two-page site is ready to test, we should also create a link from
m ore.htm l page to the index page. So close the index page, open the m ore.htm l file instead,
and, using the sam e process as above, add a line to m ore.htm l which says som ething like
"click here for the hom e page". Then turn "hom e page" into a clickable link which goes to
index.htm l and save the file. Then quit Am aya.

Before we can test our links, we’ll upload them to the server. So refer to the instructions on
page 41 for uploading files, and use FileZilla to upload both index.htm l and m ore.htm l to
your server. Finally, close FileZilla and use your Web browser to surf to your web site. Click
on the links, and you should be able to m ove between your two pages. Isn’t that neat?

Now that you know everything that’s required to create a sim ple web site with links, why not
try creating a third and fourth page for your site, and set up som e m ore hyperlinks between
them ?

Linking to Other Sites

The destination for your hyperlinks doesn’t have to be lim ited to pages on your own site. You
can easily create links to other places. In the box where you type in the destination for the
link, just type in the com plete address (URL) for the destination site, including the http:/ /
part at the start. Including the http:/ / is vital, otherwise external links won’t work.

If you want to try this, add a line to one of your web pages that says "You can search the web
with Google", then highlight the word Google and create a link to
http://www.google.com. Upload the page to your server and check that the link takes
you to Google when you click it.

Mailto: Links

Here’s a neat idea that allows people to send you em ail m essages via your web site.

Open one of your web pages (either your hom e page or m ore.htm l) and add a line which says
"You can send us an enquiry via em ail if you wish". Now highlight the phrase "send us an

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
50
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

enquiry" and turn it into a link. In the Link box, where you norm ally type the destination
page, type:

mailto:[email protected]?subject=Enquiry

where yournam e and yourm ail m ake up your own personal em ail address.

Now save the page, upload it, surf to it via your Web browser, and see what happens when
you click on the link. Your com puter’s default em ail program will autom atically open, ready
to send a m essage to the address you specified. Plus, the subject line of the m essage will
already be filled in with the word "Enquiry".

This is a sim ple way to allow visitors to your site to interact with you. However, there are
drawbacks. Prim arily, it’ll only work if the visitor’s com puter has been set up to send em ail,
and their com puter knows which program to open when it encounters m ailto: links in Web
pages. Not all com puters can handle this, and there’s no way you can anticipate the
problem s. In a subsequent chapter, when we com e to discuss HTML form s and PHP, I’ll
show you a m uch better way of allowing visitors to send m essages via your site. But for now,
m ailto: links will have to suffice.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
51
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Understanding The Basics of HTML

On page 14 I m entioned HTML, the language of the Web. Or at least, the language that all
Web pages have to be written in. I also pointed out that you don’t have to understand the
intricacies of HTML, because program s like Am aya autom atically generate this special code
for you.

However, for reasons that will becom e apparent when we start to learn about CSS style
sheets, you do need to know som e HTML. Thankfully, the am ount you need to know is
relatively little, and it’s not difficult.

Let’s take a look at som e of the HTML which Am aya has, until now, been hiding from you.
Use Am aya to open your index.htm l page. Then, from the Views m enu, click on Show
Source. The screen will split to show your page at the top and the HTML code version at the
bottom . Use your m ouse to drag the dividing line upwards, so you can see m ore HTML code
like this:

Although the code looks daunting at first, two fundam ental rules will help you to m ake sense
of it.

1. An HTML file contains a m ixture of page content (ie, the words on the page) and
form atting com m ands. Page content appears norm ally, and Am aya generally
displays it in black. HTML form atting com m ands, called tags, always appear in

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
52
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

pointy brackets <like this> and Am aya generally displays them in purple, unless you
change the program ’s settings.

2. HTML tags generally occur in pairs. The first occurrence turns on a particular effect,
or m arks the beginning of a particular section. The second occurrence turns off the
effect, or m arks the end of the section. The second occurrence uses the sam e tag
nam e as the first, but with a forward-slash at the start of the tag nam e.

Arm ed with these two vital facts, you should now be able to start m aking sense of the HTML
code that com prises our page. There are 2 m ain sections to the page, nam ely the head and
the body. The head section, which starts with a <head> tag and ends with </ head>, contains
inform ation about the page as a whole. There’s a m eta-tag called Generator, the value of
which is Am aya. This tells anyone who cares to look at the HTML code of your page that it
was created with Am aya. There’s also a head tag called <title> which is where your page’s
title gets put. The page title is what appears in the title bar of the web browser window when
visitors (or you) look at your site.

Som e tags don’t actually need a closing tag, ie the version with the forward-slash at the start.
The m eta tag is one such exam ple. However, recent changes to the HTML specification say
that all tags m ust be closed, even those that don’t officially need to be. This helps to avoid
errors on pages, which could confuse som e browsers. Hence the </ > tag, which m eans
"close the previous tag".

The m ost com m on tag that you’ll see on web pages is <p>, which starts each paragraph. The
paragraph then ends with </ p>, and then a further <p> tag starts a new paragraph below it.
There are other tags that affect the way that text looks on the page. For exam ple, the <b> tag
m akes text bold and <i> m akes it italic. To see how these work, click your m ouse som ewhere
in the HTML window and then, som ewhere within a paragraph, type <b>. Then, a few words
later, type </ b>. Now click back into the top half of the screen, and you’ll see that your
chosen words are now displayed in bold like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
53
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

One set of tags that you’ll use often are the heading levels. There are 6 of these tags built into
the HTML language, which allow you to create headings of up to 6 levels. Typically, the m ain
heading on your page will be a level one headin g, which starts with an <h1> tag and ends
with </ h1>. You m ight then want to include a sub-heading later on, for which you’d use a
m atching pair of h2 tags.

Am aya can generate heading tags for you autom atically. In the top half of the screen ,
highlight the first line and then click the T1 button in the right hand panel. Then click into
the lower half of the screen and see how that text is now surrounded by h1 tags like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
54
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Meta tags

Earlier, I m entioned m eta tags. Specifically the m eta-tag with a nam e of "Generator" and a
value of "Am aya". Meta-tags are a way for a web page to supply inform ation about itself to
the web browser that is displaying the page. One of the m ost popular uses of m eta-tags is to
include a brief description of the page, and a few keywords about it too. For exam ple, the
<head> section of an HTML file m ight contain the following code:

<meta name="description" content="Latest availability for the Grand Hotel">

<meta name="keywords" content="availability, late bookings, vacant rooms">

It's always a good idea to include these two tags (a description and som e keywords) on every
page you create. It will help your site to be found and indexed by search engines such as
Google.

In the past, search engines based the contents of their indexes on little m ore than this
inform ation. However, that's no longer the case, as m any web site operators tried to cheat
the system by, for exam ple, including explicit sexual keywords to describe fairly dull sites. So
although m eta-tag inform ation is no longer as im portant as it was, it is still taken into
account by search engines as part of a m uch m ore com plex process.

There's m ore about this in the chapter on Search Engine Optim ization, on page 313.
NED

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
55
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

HTML Accessibility, Accuracy and Privacy

You m aybe surprised to know that anyone, and not just you, can view the HTML code for the
web pages you create. Equally, you can view the HTML code of any page on the Web. J ust
about every Web browser, including all the leading ones such as Internet Explorer, Firefox
and Safari, have an option that will show you the source code, as it’s called, of the page you’re
looking at.

For exam ple, open your web browser and then surf to one of your favourite pages, such as
Google, Wikipedia, Facebook, or any other page that you prefer. If you’re using Internet
Explorer, bring up the View m enu (press the alt key to show the m enu bar if it’s not
displayed) and then choose View Source. All other browsers have a sim ilar option, either
from the m enu line or via a right-click. You’ll then see the HTML source code of the page.

This total lack of privacy has two im plications. First, it m eans that you should never hide
things in your HTML code that you wouldn’t want others to see. For exam ple, there’s a
m ethod for putting com m ents into HTML code which don’t show up on the finished web
page but which w ill show up if som eone views your source code.

Second, the public nature of HTML m eans that, if you want to know how som eone has
achieved a particular effect on their web page, you can just view their code and find out.
There’s nothing wrong with doing that. Profession al web people do it all the tim e. However,
if you’re tem pted to copy and paste entire chunks of som eone else’s hard work into the code
view screen on Am aya, don’t be. It’s technically possible, of course, but m orally and legally
wrong.

Validating your HTML

Designing a web page isn’t particularly easy, especially if you want to ensure that your HTML
code is correct. Thankfully, there are various web sites available on the internet which will
autom atically check one or m ore pages on your site and report any errors. These sites exist
because of the above-m entioned lack of privacy when it com es to HTML. If your page is on
the internet, anyone, or any autom ated system , can look at its HTML code.

The best-known HTML validator, as such services are called, is run by the World Wide Web
Consortium (WWWC, or W3C for short). To use it, just go to http://validator.w3.org
and enter the address of your page. If you haven’t yet uploaded the page to a server, there’s
an option that lets you upload the HTML file to the validator, or you can even copy and paste
a block of HTML code straight from Am aya into the validator.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
56
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Either way, the end result of the validation is (hopefully) a congratulatory screen such as
this:

If your code fails validation, the validator will norm ally tell you why, so you can go back and
fix any problem s.

It’s always a good idea to ensure that all your pages validate correctly. If they don’t, there’s
no guarantee that every visitor’s web browser will be able to display your pages properly. In
som e cases the layout m ight look slightly wron g, while in others the page m ight not display
at all. Som e browsers are m uch m ore forgiving of m inor errors such as unclosed tags, or
tables where a new row is started before the previous one ends. Som e, though, will com plain
bitterly.

A Bit More about Accessibility

Like m any aspects of web site design, accessibility (m aking it possible for people with sight
and m obility problem s to use your site) is one of those things that’s rem arkably easy to build
in from the start but very tim e-consum ing to retrofit as an afterthought. Therefore, it m akes
sense to consider it as early as possible in the overall design process.

Som e of the things that you should do to en sure that your site is accessible include:

• Provide alternative ALT text for every picture or im age that you use.

• Don’t create inform ation which can’t be understood by those who can’t see colours
properly. Eg, “Click the red box rather than the green one in order to browse our
brochure” will be of little use to som eone who’s colour-blind.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
57
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

• Ensure that there is sufficient contrast between text and background colours.

• Avoid scrolling text and other dynam ic effects. They are hard to read.

• Avoid any technique which m ay produce flickering effects on-screen.

• Use the clearest and sim plest language for site content.

• Keep paragraphs short, and include som e white space between them .

• Do not use fram es. Screen readers don’t like them .

• Dark text on a light background works better that light text on a dark background.

• Use a line spacing of around 1.5 to ensure that the text on a page doesn’t look too
“heavy”.

Now that you know the basics of HTML, and specifically the way that form atting tags work
for things such as paragraphs, headings, bold text and so on, we can m ove on to learn about
CSS.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
58
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Cascading Style Sheets

One of the key techniques used in m odern web page design techniques is som ething called
the separation of presentation and content. In the early days of the web, there was no way to
do this, which m eant that HTML pages were bloated, repetitive and difficult to understand.
For exam ple, if you wanted the m ain body text of the site to use the Verdana typeface, in a
size of 12 pt, every single paragraph of text would need to start with a <font
face=verdana size=12pt> tag. That could am ount to hundreds or thousands of such
tags across the entire site. If you subsequently wanted to redesign the site, changing all those
tags was a lot of work.

A few years ago, along cam e a new revision of the HTML language (and a new generation of
web browsers that were capable of displaying pages created with it). Top of the list of new
features was som ething called CSS, or Cascading Style Sheets, or HTML Style Sheets.

A style sheet is a separate file that com plem ents one, som e, or all of the HTML pages on your
site. It contains all the inform ation about how the text, pictures and layout of your pages
actually looks. So, to update the above exam ple, there m ight be a section in the CSS file
which states that all instances of the <p> tag should use the Verdana typeface in a 12pt size.
Now, all the pages of your site m erely need to surround the paragraphs with nothing m ore
than a <p> tag and they’ll all m agically appear in the correct typeface and size. The best bit,
is that you can tweak the appearance of every paragraph in your entire site just by changing
one entry in a single CSS file, rather than having to change any <font> tags.

CSS has other benefits too. When you specify which CSS file is to be used to form at your
page, you can actually specify different CSS files for different situations. For exam ple, one
set of styles for when the page is viewed on screen and a different set for when the user prints
the page on their printer. And yet another set for when som eone views the page on a
sm artphone or a PDA or a projector.

I m entioned accessibility, and m aking your site disability-friendly, on page 49. CSS can help
here too. You can set up a separate style sh eet for people who have basic sight problem s or
dyslexia, ie large text, no graphics, and a m ore readable background colour. You can then
easily add an option to your site that uses this style sheet rather than the norm al one, for
those visitors who prefer it. And all, of course, without having to m aintain separate copies of
the page content, because this is now separate from the presentation side of things.

The ability to separate presentation and content has other benefits too. Creating good web
sites requires skills in both writing and design. CSS m eans that one person can concentrate
on writing the content for the site, while som eone else can work their m agic on the style
sheets.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
59
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

CSS is so m uch part of web design nowadays, that it’s rare for anyone to create a new site
from scratch which uses the old <font> tags. That’s not to say that there aren’t m illions of
old-fashioned pages still around, but CSS is definitely a better way of doing things, so that’s
the m ethod that we’ll cover in this book.

About DOCTYPEs

Before we start with CSS, a word about docum ent types. You'll have noticed, above the
<head> section in the HTML code shown on page 53, , a line that starts with the word
DOCTYPE. In full, the line is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">

This is known as DTD, or Docum ent Type Definition.

HTML is continually evolving. As m entioned above, for exam ple, the advent of CSS now
m eans that you are advised not to use <font> tags. The DOCTYPE is a way for you to tell the
visitor's web browser which version of HTML you'll be using. With this inform ation, the
browser can ensure that your page displays correctly.

The two m ain docum ent types that you'll see used m ost are XHTML 1.0 Strict and XHTML
1.0 Transitional. Transitional is the version that allows both new-style CSS as well as old-
fashioned <font> tags. "Strict" m ode doesn't allow <font> tags. If you specify a Strict
docum ent type, and then proceed to use <font> tags, you are technically producing invalid
HTML which the browser m ight well reject.

The sim plest option is therefore always to use a Transitional doctype, but to adhere to the
latest standards and techniques.

Getting Started with CSS

If Am aya isn’t already open on your com puter, open it now. Then load your index.htm l
hom e page. The quickest way to do this is to use the right-hand m enu pane, which is not
som ething we’ve covered before.

The right-hand side of your Am aya screen probably looks, right now, som ething like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
60
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

There are various m enu options that can be opened and closed on this panel, each of which is
preceded by a h character, such as Elem ents, Style, List of style sheets, Files, Attributes, and
so on. When a m enu set is visible, the prefix shows as j. When it’s hidden, the character
shows as h instead. You can show or hide these sections by clicking on the arrow characters.

Perhaps the m ost useful of these sections is Files, which brings up a sim ple file m anager that
m akes it quick and easy to open any of your existing web pages. The Apply Class box is also
useful, for reasons that we’ll com e to shortly.

So, click on the arrow characters to close all of the sections, then open the Files section and
the Apply Class section. Your screen should now look thus:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
61
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Note, by the way, that the Style section is nothing to do with CSS. It’s a built-in feature of
Am aya that uses a non-standard way of changing the look of web pages, so we won’t be using
it.

Now it’s tim e to open your index.htm l page. Use your newly-found file m anager to browse to
your Web Work folder, and double-click on index.htm l. Or, if you prefer, go to the File m enu
on the top line and then use the Open Docum ent option. Either way, you’ll end up with your
index.htm l page open and ready for editing.

We now need to create the style sheet file for our site. From the File m enu on the top of the
screen, choose New, then New Style Sheet. Use the folder button to browse to your Web
Work folder if it’s not already shown. Am aya wants to nam e the file New.css but this is
unwise. It is conventional to nam e the m ain style sheet file style.css and not to include any
capital letters in the nam e. So change New.css to style.css in the New CSS Style Sheet box.

In the sam e box, select the In New Tab radio button for where to open the file, then click
Create.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
62
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

You will see that there are now 2 (or m aybe 3) tabs open in Am aya. One is your index page,
and the other is your css file. You can click on the tabs to switch between files.

In the previous chapter, we learned about HTML tags. Now, we can start to create a style
sheet that applies particular form atting to particular tags.

Into your blank css file, type the following:

p {
font-family: Verdana;
color: red
}

Your screen will look like this:

We’ve now created the first entry for our site’s style sheet. This specifies that all <p> tags
should use the Verdana font and should be coloured red.

The form at of a CSS file is fairly easy to understand, once you know the basics. On the first
line of each entry goes the nam e of the HTML tag that you want to specify a style for,
followed by a curly bracket. On subsequent lines, specify the various aspects of that style,

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
63
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

such as font-fam ily and color. I’ll explain later how to find out what other style aspects are
available.

Each style aspect ends with a sem i-colon. Finally com es a closing curly bracket.

Note that the sem icolon on the final style characteristic is optional, as you can see from the
way that it’s not been included in the exam ples on the illustration below. However, it’s
generally good practice to get into the habit of always including the sem icolon at the end of
every line. Otherwise, if you add new style options below what is currently the last line in a
style definition, and you forget to add the sem icolon to what is no longer the last line, your
style sheet file won’t work properly because the web browser won’t always know where one
line ends and the next one begins.

While we’re here, let’s add another style definition to our CSS file, this tim e for the <ul> tag
which defines a bulleted list (ul stands for Un ordered List, in contrast to a num bered list
which uses the <ol> tag for an ordered list).

So, add a new section to the CSS screen as follows:

ul {
color: green;
}

Your CSS file should now look like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
64
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Flip back to your index.htm l page by clicking on its tab. Has anything changed? Are your
paragraphs now in Verdana and coloured red? Sadly not, for one very good reason.
Although you’ve created a style sheet, we haven’t yet added the necessary com m and to our
index page to specify where it should get its style inform ation from . So let’s change that.

First we need to save the style sheet that we were working on. So flip to the style sheet tab
and, from the File m enu, choose Save. Now flip back to the index.htm l page tab.

From the Form at m enu, choose Style Sheets and then the Link option. In the box, just type
style.css and press the Confirm button. There’s no need to specify the full path, because both
your index.htm l page and your style.css file are in the sam e folder.

And now, as if by m agic, your index page has changed. Your paragraphs of text are now, as
requested, using the Verdana font and are red.

We also specified a style for our unordered lists, so let’s see if that works too. First, type a
few short paragraphs into your index page like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
65
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

As expected, they will be red and Verdana because that’s what the style sheet says that
paragraphs should be. But that’s about to change.

Select your entries, using the keyboard or m ouse. Then, from the Insert m enu, choose List,
then Unordered List. Here’s what the screen should look like now:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
66
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Your list uses <ul> tags, and your style sheet says that <ul> tags should be green. So they
are.

The list item s aren’t using the Verdana font, though, because your ul tag style didn’t say that
they should. But we can fix that quickly and easily. Flip back to your css file by clicking on
its tab. Add a new line to the ul tag style to specify font-fam ily: Verdana. Save the css file
and then flip back to the index page, and you should find that the font used by your list has
now changed.

The ability to change one, or indeed hundreds, of pages by m aking a single change to a single
style sheet file is what m akes CSS so useful. If all of the pages in your site are linked to the
sam e style sheet, changing the CSS file changes all of the pages instantly.

A Word About Fonts

You probably have one or two hundred fonts installed on your com puter. Most people do.
Every tim e you install a new program , it frequently com es with a selection of new fonts that
are installed. If you look at the list of available fonts in Microsoft Word, or whatever word
processor you happen to use, the list will be en orm ous. However, that doesn’t m ean that you
can use all of them on your Web pages.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
67
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

When you specify a font in your CSS file, the actual data (all those lines and curves) that
m ake up the font don’t get included in the page. All that m akes it into the HTML is an
instruction to the visitor’s web browser to display your chosen text in your chosen font.
Which only works if that font happens to be installed on the visitor’s com puter. If it’s not,
the browser will m ake a stab at choosing a font that looks vaguely sim ilar, but the end results
are rarely identical.

Because of this, it’s always safest to ensure that you only specify fonts in your CSS files which
are pretty m uch guaranteed to be installed as standard on m ost visitors’ com puters.
Although there aren’t m any such fonts, they do provide a fairly wide cross-section of styles.
The fonts in question are as follows, in their actual style so you can see what they look like:

Arial
Verdana
Trebuchet MS
Courier New
Georgia
Times New Roman
Note that these nam es are case-sensitive, so specifying verdana in a style definition isn’t the
sam e as Verdana, and probably won’t work unless the visitor’s web browser is feeling
particularly forgiving at the tim e. Which m ost m odern browsers never do.

These 6 fonts can be classified loosely into three categories. Arial, Verdana and Trebuchet
MS are what’s known as sans-serif fonts. Serifs are the em bellishm ents on the ends of
characters, and sans-serif fonts don’t have them . Com pare this with serif fonts such as
Georgia (which is used throughout this book) and Times New Roman.

For body text, ie the m ain bulk of the text on your pages, sans-serif fonts tend to work best.
For headlines and picture captions, serif fonts look good.

Courier New is an exam ple of a fixed-width font. In this font, each character is the sam e
width. So the word RAILWAY is the sam e width as the word ILLICIT, as they both
contain 7 characters. Like this:

RAILWAY
ILLICIT

In fonts that aren’t fixed-width, each letter is a different width. Like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
68
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

RAILWAY
ILLICIT

Such fonts are often known as proportionally-spaced fonts, as each character’s width on
paper is proportional to its actual width.

Using a fixed-width, non-proportional font is useful in lists of num bers if you want all the
colum ns to line up correctly. For just about all other purposes, proportional fonts tend to be
m ore readable and look m ore professional. Unless you specifically want to create a web page
that looks like it was produced on a typewriter.

Classes

So far, in our discussion of CSS, we’ve talked about defining styles based on HTML tags. By
creating a style definition for the <p> tag we can specify how all of the body paragraphs on
our pages look. Equally, by creating a style called ul, we can style all of our unordered lists.
If you were to add a style for the h1 tag, you could change the look of all the level-1 headings
on your pages.

As you m ight expect, there’s a lot m ore to CSS than letting you choose a font and a colour to
be associated with HTML tags. Actually, CSS is hugely com plicated, and is the bane of m ost
professional web developers’ lives. A typical reference book on CSS runs to over 60 0 pages,
but thankfully we’re not going to go into that m uch detail in this book. There is, though, one
m ore highly useful feature of CSS that you’ll want to know about, and that’s classes.

A class is a style that you can use anywhere on a web page, rather than for a particular HTML
tag. Rather than being nam ed after a tag, you can nam e your classes as you see fit. For
exam ple, if you often find yourself m entioning the nam e of your favourite cheese on your
web pages, you could create a class called fave-cheese. Then, wherever the nam e of that
cheese appears, you assign it to that class. The text can be an entire paragraph, a few lines,
or even just one word. Here’s how to create a CSS class and refer to it within a web page.

Make sure that Am aya is open, and that you have both your index.htm l and style.css files
open in separate tabs. Now, in your style sheet file, add a new style as follows:

.fave-cheese {
color: yellow;
font-family: Arial;
font-size: 18px;
}

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
69
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

There are 2 differences between this style and the others that we have created. First, we
chose our own nam e for the style, rather than using the nam e of an HTML tag. Second, the
style nam e starts with a dot. The dot is what tells the browser that this is a class rather than
an HTML tag style.

Save your css file (File, Save), then flip back to the index page. Notice the Apply Class area
on the right hand side of the screen, which now lists your class.

Type som e text onto the page, highlight it, then double-click your class nam e in the list.,
Your chosen text is now form atted according to your class. Highlight som e m ore text and
apply the class to it too.

Between them , tag styles and classes allow you to form at your web pages just about any way
you wish. If you want to style all instances of a particular tag, ie all of your h1 headings or all
of your paragraphs, use tag styles. Where you want to just style a few words or sentences
here and there, use a class.

Making Styles Work For You

The m ain benefit of using styles in HTML pages is that they m ake it easy to m ake wide-
reaching changes to a web site with a single click. J ust change a single entry in your css file
and the entire site changes. However, if you are to gain the m axim um benefit from using css
there are two things you need to know about.

First, keep the num ber of styles (tag and class) to a m inim um . If you find yourself creating 6
different versions of the fave-cheese class in order to fit the particular idiosyncrasies of your
site’s layout (eg one version for headings, one for picture captions etc), you lose m uch of the
benefit of CSS because there are now 6 different things that you need to change if you want
to alter the way that the nam es of your cheeses are displayed.

Second, choose your class nam es with care. Pick nam es based on what the class is used for,
not what it looks like. Consider what would happen if I’d nam ed m y cheese class "arial-
yellow" rather than "fave-cheese". If I ever redesign m y site and decide that I want the
cheese nam es in purple rather than yellow, I’ll end up with a class called arial-yellow which
actually displays in purple. This will m ake it m uch less obvious to m e, or anyone else in the
future, to rem em ber what each class is used for.

HTML Tags Nam es

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
70
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

To m ake the m ost of HTML tag styles, you obviously need to know what tag nam es are
available to you. You can find a com plete list on the internet (just type HTML Tags into
Google), but here are a few to get you started:

<h1> to <h6> Heading level 1 to 6

<table> Used at the start of a table.
<tr> Starts each row of a table.
<td> Stands for Table Data. Used for each cell of the table.
<b> Bold text.
<i> Italic text.
<body> The entire body of the web page.
<ul> Unordered list, using bullets at the start of each item .
<ol> Ordered (ie, num bered) list
<li> A list item (used within ordered and unordered lists).
<a> Anchor. Used to create hyperlinks.

A Better CSS Editor

Style sheets are an incredibly powerful feature of m odern web design, and there’s absolutely
no reason why you should use any other m ethod to form at your pages. Unfortunately,
Am aya doesn’t m ake it particularly easy to create and m aintain CSS files. So far, you’ve
created styles m anually, line by line. This is slow, prone to errors, and only works if you
happen to know the language of css (font-fam ily, color, and so on).

Now that you understand the basics of what a css file is, and the sort of com m ands it
contains, we need to find a better program for editing css files. Preferably one that’s free.
There are quite a few such program s available, downloadable from the internet. The best
one, in m y opinion, is Topstyle Lite. It’s a cut-down version of a com m ercial product called
Topstyle Pro, which offers even m ore features. But for anyone who needs a basic program to
easily create and edit css files, Topstyle Lite is perfect.

Your next task, therefore, is to download an d install Topstyle Lite. Close Am aya for the
m om ent, but don’t uninstall it. We’ll contin ue to use Am aya for editing HTML pages.

To download Topstyle Lite, go to www.newsgator.com and follow the links to Topstyle and
then to Topstyle Lite. Or type "topstyle lite" into Google. Once you have downloaded the
installer file, double-click it to start the installation. The version of Topstyle Lite that we’re
using in this book is 3.5.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
71
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With TopStyle Lite installed, launch the program . Then go to the File m enu and choose
Open. Browse to your WebWork folder and locate the style file that we have already created,
and double-click it to open it with Topstyle Lite. The screen will look som ething like this:

One of the great things about the web is that HTML and css files are just standard text files,
rather than using proprietary or com plex form ats such as Word or Excel. This m eans that
you can switch editors easily. If you don’t like Am aya, you can load your HTML file into
another application. Equally, the css file that we created earlier with Am aya can now be
loaded into Topstyle Lite.

Let’s start by changing the colour of our favourite cheese text, from yellow to blue. Not just
any blue, but a nice bright pale blue. In Am aya, you’d have to know the nam e (or code
num ber) for the particular colour, but Topstyle Lite m akes things m uch easier.

Click som ewhere within any of the 3 lines that m ake up the definition of the .fave-cheese
class, and you’ll see the full details of the style shown on the right hand side of the screen.
Click the yellow block and an arrow linking to a drop-down list of colours will appear. Click
that arrow. Choose a colour from the list of options, or select the top option from the list
which says Choose Colour. This then brings up a colour picker from which you can select the
particular shade of blue that you want. When you’re finished, click OK. See how the
definition of the class has been edited.

Let’s use TopStyle Lite to create a com pletely new style. We’ll create a tag style for a second-
level heading, ie the <h2> tag.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
72
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Move your cursor down to the bottom of the screen, below the existing pair of style
definitions. Then, from the Edit m enu, click on New Selector. A selector is the official nam e
for a style's title (whether it's a tag or a class). In this case it’s a tag so, in the HTML Elem en t
box, scroll down to h2, select it, and click OK.

TopStyle Lite will create the first and last lines of the style definition, like this:

h2 {

Now you can use the panel on the right hand side to select the style and design of your h2
tags. Here’s an exam ple:

As you can see, I’ve chosen a text colour of dark orange, and a top border of a grey line that’s
1 pixel thick.

Using TopStyle Lite to create a new class, rather than a tag style, is just as easy. Again,
choose New Selector from the Edit m enu to bring up the New Selector box that looks like
this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
73
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

From the set of radio buttons that offer a choice of Class or ID, choose Class. Then, in the box
below, type the nam e of your class, and then choose the options as you wish. TopStyle Lite
will autom atically add the dot at the front of the class nam e if you forget.

When you’ve finished experim enting with TopStyle Lite, save your css file by choosing Save
from the File m enu, then quit the program .

Before we leave the subject of CSS and TopStyle Lite for the tim e being, let’s just check that
our new <h2> tag style works correctly.

Open Am aya, then open your index.htm l page. Type a few words, and highlight them . Then,
from the Insert m enu, choose Heading and then H2. This will m ark those words as a level-2
heading by surrounding them with an <h2> tag at the start and a </ h2> tag at the end. You
should find that your words now display correctly, using the h2 style that you created with
TopStyle Lite.

ID-based Styles

Before we leave this brief introduction to CSS, there’s one m ore thing you need to know
about, before you can m ove on to the next chapter. So far we’ve covered two different
selector types, nam ely tags and classes. There’s actually a third type, called an ID. Here’s
how it works.

HTML allows you to assign a unique nam e, or id, to any tag on a page. The only stipulation
is that a nam e m ust be unique on that page. For exam ple, consider this level-2 heading:

<h2>Further Inform ation About Cheddar Cheese</ h2>

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
74
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

We can give this heading a unique id by changing the opening h2 tag thus:

<h2 id="further-cheese">Further Inform ation About Cheddar Cheese</ h2>

Unless you say otherwise, this heading will appear as any h2 heading would, according to the
h2 entry in your style sheet. But because this particular heading has its own id, we can do
som ething rather clever in the css file, like this:

#further-cheese {
color: navy;
}

Notice the # sym bol at the start of the style nam e. This signifies an ID-based style. It sim ply
m eans that the style is only applied to the HTML tag which has the id of further-cheese. It
doesn't m atter whether that tag is an h2 heading, a paragraph, a list item , or indeed anything
else. The only rule is that you m ustn’t assign the sam e id to m ore than one HTML tag on the
sam e page. If you need to apply the style in m ore than one place, use a class instead.

Extrem e CSS

When used relatively sim ply, CSS is a powerful tool that will help you create web pages that
are easier to understand and easier to m aintain, when com pared to the old way of doing
things with <font> tags. But if you thought that this chapter has taught you everything there
is to know about CSS, you’re sadly m istaken. By using the advanced features of CSS you can
gain even greater control over the look of your pages. For exam ple, here’s the hom e page of
one of the best exponents of CSS-based design, nam ely the folks at
www.csszengarden.com:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
75
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

By clicking on the m enu entries on the right hand side of the page, you can choose other CSS
style sheets to apply to the page. For exam ple, here’s the Orchid Beauty style:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
76
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

The point to rem em ber here is that the HTML file which contains the page content (ie, the
text such as "Littering a dark and dreary road…") is the sam e each tim e. It hasn’t changed.
All that changes is the CSS file that it’s linked to, which controls the position and appearance
of the text, and the positions and nam es of the im age files.

If you want to know how m ore about how it’s done, order a copy of "The Zen of CSS Design",
written by the authors of the site. It’s available from Am azon and just about every m ajor
bookstore.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
77
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Page Layouts and Div Tags

So far, our look at CSS has concentrated on visual appearances. We’ve covered how to
specify fonts, sizes, and colours. But CSS is m uch m ore than that. Most im portantly, it also
covers the layout and arrangem ent of pages. For exam ple, look at this page.

Notice that the page is divided into two colum n s. Actually, the top section of the page, which
contains the Spiderweb title and the grey bar, uses the full width of the page. The rem ainder
of the page is split into two vertical colum ns. The left-hand colum n holds som e links, while
the m ain content of the page is on the right hand side.

This layout is typical of m any web sites. They use a two- or three-colum n layout in order to
fit all the required content on the page in a logical place. Having the page’s collection of links
and m enus (known as the navigation, or nav for short) in a separate colum n like this also
m eans that the m ain content is narrower than the full width of the screen. This m akes it
easier for people to read the page on screen.

So, how do we use CSS to create a page layout like this? The key is the <div> tag. A div, in
this context, stands for a divider or a division. It lets you separate entire blocks of your page,

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
78
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

including other HTML tags, into discrete item s whose layout can then be controlled by the
css file.

A div is not like any of the HTML tags we’ve encountered so far. It’s not the sort of thing that
you’d assign a font or colour to. Instead, you use css to specify its position on the page,
relative to the top left hand corner or to other divs. You can also specify its background
colour, border, m argin and so on.

By carefully nesting your divs, ie opening a new one before closing the current one, you can
create the hierarchy that leads to the colum nar effect shown above.

So in the above exam ple, the page com prises 4 divs. First is the overall outer div which holds
the entire page. Within this are 3 m ore divs, to create the top panel, the left hand colum n
and the right hand colum n.

As a sim pler exam ple, let’s use divs and css to lay out a page. Here’s the effect we want to
end up with:

Here we have a very com m on web page form at. A header line at the top, a left and a right
hand colum n, and a footer area at the bottom .

Here’s what the body section of the HTML file looks like, for this page. I’ve added som e line
num bers to assist in the explanation which follows – these are not part of the HTML and you
should rem ove them if you want to paste this into Am aya to experim ent further.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
79
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

1 <body>
2 <div id="container">
3 <div id="top">
4 <h1>Header</h1>
5 </div>
6 <div id="leftnav">
7 <p>
8 Some text goes here…
9 </p>
10 </div>
11 <div id="content">
12 <h2>Subheading</h2>
13 <p>
14 Some text goes here…</p>
15 <p>
16 Some text goes here
17 </p>
18 </div>
19 <div id="footer">
20 Footer
21 </div>
22 </div>
23 </body>

You m ay be surprised at just how short and un-com plicated it is. Let’s take a look at this code
in a little m ore detail, because understanding th e basics of div-based page layout is vital if
you want to know m ore about how web sites work.

On line 2 we create a div and we nam e it container. This is the overall div that contains the
rest of the page. It doesn’t m atter what nam es you choose for your divs, but m any web
people choose to call the m ain div the container.

On line 3 we create another div called top. This is effectively inside the container because we
haven’t yet closed the container div. The top div gets closed on line 5, and its contents (just
an h1 heading) appear on line 4.

Between lines 6 and 10 we create another div called leftnav, the contents of which is just a
single paragraph. Lines 11 to 18 hold the content div, which is the right-hand colum n in the
illustration above. Lines 19 to 21 create our footer div.

Finally, on line 22, we close the container div.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
80
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With the page created, we can now create the css file for it. Here’s what it looks like. You’ll
see that I’ve used a slightly different form atting layout, with the { sym bols on a separate line.
It’s quite OK to do this if you prefer it.

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
81
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }

#content h2 { margin: 0 0 .5em 0; }

The first section of this css file is # container. This, if you rem em ber, m eans that we’re about
to specify the styles for the HTML tag whose id is container. Which just happens to be our
m ain div. Of prim ary interest is the fact that we’re setting its width to 90 %. This m eans that
the overall width of our page will be 90 % of the screen width, on whatever screen the visitor
happens to be using to view our site. If you look at the picture of the page, the rem aining
10 % is taken up by the vertical areas of white space to the left and right of the m ain text area.

The second section, # top, is used to specify a few m ore things about the top div. Below this
is a section entitled # top h1. This is som ething we’ve not encountered before, and is yet
another useful feature of css. In this case, it m eans that the styles which follow are only to be
applied to level-one headings within the # top div.

The final 2 sections, # leftnav p and # content h2, use the sam e technique. They specify what
the standard paragraph text will look like in the leftnav colum n, and how the h2 heading in
the content pane will appear.

Although this m ay all seem very com plicated at first, it’s fairly easy to get used to with som e
practice. If you want to use this exam ple as a starting point for your own pages, just type or
paste the HTML code and the css file into Am aya, and then tweak the content and styles as
you wish. By experim enting with TopStyle Lite to change the styles, you can m ake the page
look just how you want it to.

If you want to upload the finished product to your hosting space, rem em ber to upload both
the css file and the HTML file. Otherwise the layout will look com pletely wrong. IN
addition, you'll also need to add HTML and BODY tags to the htm l file, as well as linking the
style sheet to it.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
82
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

The CSS Box Model

Using css to create page layouts, rather than just using it to form at your text, is com plex.
You would be well advised to start with a ready-m ade design from a site such as
www.opendesigns.org rather than designing your own from scratch. But if you do want
to learn m ore about the intricacies of CSS for page layout, there are plenty of good books and
online resources available. A Google search for term s such as "css tutorial" or "learning css"
will get you started.

One of the m ost im portant concepts in css-based page layout is som ething called the box
m odel. It explains how padding, spacing, justification (left, right, centred etc) and m argins
interact to affect the final position of an item on a page.

It is beyond the scope of this book to cover this topic in any m ore detail, but you can find out
m ore by searching online for "css box m odel".

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
83
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Pictures On Pages
To put a picture on one of your Web pages, here’s what you need to do:

1. Obtain the picture as an im age file (typically .J PG or .TIF) from your scanner, cam era
or any other suitable source.
2. Copy the im age file into your web folder along with the HTML files that m ake up your
site
3. Add an <im g> tag to the HTML page at the point where you want the picture to
appear.

Let’s try doing this now.

First we need to find a picture to use. If you have som ething to hand, copy it to your Web
Work folder. If you don’t have any im ages, visit your favourite web site, right-click one of the
pictures on the page and choose "Save Picture As", and save it in your Web Work folder.

You m ight at this point be som ewhat surprised to discover that stealing pictures from other
people’s web sites is as easy as right-clicking. Sadly, this is generally the case. Never assum e
that pictures on your web site are safe from others who want to use them . If this is a problem
for you, eg if you’re a professional photographer or artist and you want to show off your work
online without others helping them selves to it, the best deterrent is to upload only sm all
thum bnail pictures onto your public site. An yone who wants to see full-size pictures can
then be asked to pay before being allowed into a separate, subscribers-only area of the site.
Another option is to use a graphics program to add a waterm ark or logo to your pictures, but
this detracts from their overall look.

With your picture safely stored in your Web Work folder, open Am aya and load one of your
HTML pages. From the Insert m enu, choose Im age. Then browse to your Web Work folder
and select the picture you placed there earlier.

In the space provided, type som e "alternate text". This is the text that a visitor’s web
browser will display if the visitor hovers their m ouse over the picture. It’s also the text that
will be read out aloud to anyone who visits your site with the aid of som e screen reader
software. Therefore it’s a good idea to always include som e alternate text (or alt text, as it’s
known) for every picture you use on your site. In fact, Am aya won’t let you leave this box
blank so you have no choice in the m atter.

Your chosen picture will now appear on your web page. Here’s how it looks on m y com puter.
Note that I’ve used the Show Source option to show both the standard page and the HTML
source code:
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
84
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Notice the <im g> tag in the lower window, which specifies the nam e of the im age file, the alt
text for it, and the width and height of the picture.

If you want to see your finished page online, upload both the HTML page and the im age file
to the hosting space on your server. Don’t forget to always upload all of the im age files that
your site uses. If you don’t, and a visitor’s web browser encounters a page where the <im g>
tag references a picture file which doesn’t exist on the server, the picture on the page will
typically be replaced by an em pty box with a red cross in it. If you’ve ever seen a page on the
web which looks like this, now you know why. The person who created the page forgot to
upload the im age file, or they renam ed the im age file on the server without updating the
<im g> tags on the page to m atch.

About Im age Sizes

The dim ensions of a picture file on a com puter are generally m easured in pixels, and the
overall size of the file is, like any other file, m easured in KB and MB (kilobytes and
m egabytes).

The typical person who visits your web site will have a screen size of around 10 24 pixels wide
by 768 pixels deep. So if you want a picture which fits on the screen alongside som e text and

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
85
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

navigation, you’ll probably want to ensure that the im age is roughly 30 0 pixels wide and 20 0
deep. Equally, if you want the picture to take up alm ost all of the screen, a size of 10 0 0 by
70 0 m ight suffice.

However, the typical im age from a m odern digital cam era is often m ore like 30 0 0 by 20 0 0
pixels. Take som ething from your scanner in high-resolution scanning m ode, and it could
even be 3 or 4 tim es that figure. The picture will thus be far too big to fit on the screen. The
web site visitor will have to scroll within their browser to see the full im age.

Som e web developers get around this by changing the width and height settings in the <im g>
tag. This forces the browser to resize the im age to the required size. However, it doesn’t
change the overall size of the im age file on the server, in term s of its KB and MB. A picture
from your cam era that’s 30 0 0 pixels wide, in a file that’s 4 MB, will still occupy 4 MB of
server space if you alter the <im g> tag to display the picture at 20 0 pixels wide. It will
therefore still download very slowly onto your visitors’ com puters.

So, here’s a vital rule about pictures on web sites that you should always follow. If the
picture you want to use on your page isn’t the right size, use an im age editing program to
resize it BEFORE placing it on your web page. N e v e r resize a picture by changing the width
and height settings in the im g tag.

If you don't have a program that can resize pictures, upload the im age to som ewhere like
www.piknik.com and use their online tools.

Pictures As Links

On page 48 we learned about hyperlinks, and how to turn a snippet of text into a clickable
link which leads to another page or site. You can also turn an im age into a hyperlink too, so
that clicking on the im age takes the user to another location.

First, select the picture from within Am aya by dragging over it with the m ouse. It will be
surrounded by a border like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
86
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Then sim ply go to the Links m enu, select "create or change link", and enter the required page
to which the visitor will be taken when they click the picture.

Note that som e browsers add a border around any picture which is used as a link, and this
m ay m ean that the picture doesn’t look quite as you want it to. To get around this, set the
picture's border width to zero som ewhere within the <im g> tag for the picture. For exam ple:

<img src="picture.jpg" alt="This is a picture" border="0">

Finding Im ages to Use on Your Site

Stealing im ages from web sites to use on your own is both m orally and legally wrong.
There’s no harm in borrowing such a picture as a training exercise, which is what we’re doing
here, but it’s certainly not advisable to do it on a real web site. If you need an im age to
illustrate your site but you don’t have your cam era to hand, or you don’t have a suitable
im age, help is thankfully at hand. There’s a variety of web sites which offer royalty-free
pictures that you can use on your sites without paym ent. My favourite is at www.sxc.hu,
which is registered in Hungary but is presented in English.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
87
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

A Browser Icon for your Site

Have you ever noticed how som e web sites have their own special icon that appears in your
web browser’s list of favourites, and on the browser’s address bar? It also appears on the
desktop if you create a shortcut to the site. An icon like this can help to m ake your site stand
out on your visitors’ com puters, and also adds an extra degree of professionalism to your
design.

For exam ple, if I add the BBC News web site to m y list of favourites, notice the sm all black
BBC icon in the address bar and in m y Favorites m enu:

This sort of icon is known as a "favicon", because its m ost com m on purposes is to appear on
your visitors’ lists of favourite sites. If you want one for your site it’s not hard to do. What
you need is a graphics program which has the ability to create and save an im age in favicon
form at.

While there are m any such program s around, som e of which are downloadable for free, it
doesn’t really m ake sense to install a program on your com puter that you won’t use very
often. There are quite a few online favicon editors that you access via your web browser, and
these work just as well. A Google search for "favicon editor" or "online favicon editor" will
bring up lots of them , so just pick one that works for you.

As an exam ple I'll use the one at:

http://www.mobilefish.com/services/favicon/favicon.php

It looks like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
88
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

To create your favicon, click the pixel boxes in the drawing area. The colour picker allows
you to choose the colour of each pixel.

Note that a favicon is a fixed size of just 16 by 16 pixels (som e operating system s and
browsers support larger ones, but not all do, so stick to 16x16 if your editor offers you a
choice of sizes). This m eans that your design will necessarily be fairly crude. Don’t try to
cram too m uch inform ation into a favicon as it just won’t look right. Equally, resist the
tem ptation to use an editor which claim s to be able to convert a digital photo or other full-
size im age into a favicon. You can try it, but the results won’t be particularly appealing or
com prehensible.

As you draw, click on the Create Favicon button to see how things are com ing along. Here’s
m y attem pt at being a favicon artist. The design is a cross between a pen nib and a letter W,
in case you’re wondering!

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
89
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With the design com plete, click Download Icon and the site will download a file to your
com puter called favicon.ico. Don’t change the nam e of the file or it won’t be displayed
properly by your com puter or web browser.

All that rem ains is to upload the file to your web site using FileZilla. The rules about favicons
state that the file m ust be uploaded to the root folder of the site. In our case, this m eans the
public_ htm l folder. If you put the file in an y other folder on your site, it won’t work.

Having uploaded the file, we can now test it. Open your web browser, surf to your site, and
you should see som ething like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
90
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Notice how our new favicon appears in the browser’s address bar and also on the Internet
Explorer tab.

You can even get the favicon to display on your desktop. J ust right-click on your Windows
desktop and then choose New, Shortcut. For the location of your shortcut, type the web site’s
address. In this case www.the-web-book.com. For the nam e I’ll just use TWB, to keep
things concise. I now have, on m y desktop, a direct shortcut to m y web site, which even
shows the proper icon:

If the favicon doesn’t appear and you get a generic browser icon instead, double-click the
icon to visit the site. This should force Windows to download the favicon, after which the
display should be correct.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
91
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Short Cuts to Great Web Pages

Now that you know the basics of HTML and CSS, you’re probably itching to create som e real
pages. However, you’re probably also feeling rather daunted, having realised that creating a
web page which looks good isn’t going to be as easy as you m ight have hoped.

Thankfully, help is at hand. There are lots of ready-m ade page designs that you can
download for free from the internet, and then custom ise as you wish. It’s m uch easier to
start with som eone else’s design and then adapt it, rather than creating som ething from
scratch. However, even if you’re starting with som eone else’s work, you will find it difficult
to custom ise the page unless you know the basics of HTML and CSS first. Hence the
previous chapters.

Two of the best-known sites that offer free, ready-m ade, CSS-based tem plates are:

Open Source Web Designs www.oswd.org

Open Designs www.opendesigns.org

Both sites are very sim ilar in nature. You browse the list of available designs, and then
download any that you want to use. Each design norm ally consists of a single index.htm l file
containing the sam ple design, an accom panying style.css file, and a collection of pictures that
the site uses. Once you have download all of this, you turn it into a usable site by doing the
following:

1. Tweak the CSS in order to fine-tune the look and feel

2. Tweak the index.htm l file too, if required
3. Copy the index.htm l file as m any tim es as necessary, in order to create each of the
pages for your site
4. Tweak or replace som e or all of the im age files, if required, to m ake the site m ore
relevant to your audience.
5. Upload the finished set of files to your hosting space.

Here’s an extract from OSWD, so you can see the sort of m aterial that’s available:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
92
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

And here’s a sim ilar page from opendesigns:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
93
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Both sites are sim ilar in what they offer, and each contains around 20 0 0 separate designs.
Rem em ber, though, that what you get is not a finished web site. It’s just a single page, nicely
designed, that you can use as a building block.

Using an Open Source Design

As an exam ple of how to download and use a freely available web design, let’s take a look at
one of them in detail. In this case, the design com es from opendesigns.org and is called Hot
Gray.

To start, locate the design on the web site and download it. It’ll arrive on your com puter as a
.zip file, which you need to extract. J ust right-click the file and choose Extract All. You can
now click into the folder, within which will be another folder called Hot Gray. Within there
will be files you actually need:

The license.txt file is a text file which spells out what you can and can’t do with this particular
design. Although m ost of the free web designs have licences and restrictions, the restrictions
are rarely tough. In the case of Hot Gray, the licence file m erely stipulates:

Ok, I'm gonna be straight here, no legalese: this theme is free for personal and commercial
use as long as the footer links are kept intact.

You don't have to link from every page of your site if you don't want to, only the front page.

Sounds perfectly acceptable to m e. So, copy the Hot Gray folder to your Web Work folder in
order to keep all of your web-related projects in one place. Then double-click the index.htm l
icon so we can see what the page actually looks like in a web browser:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
94
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Looking pretty good so far, considering that we haven’t had to actually do any design work at
all. This is m ore like it!

Tweaking the Text

Changing the sam ple text that’s on the index.htm l page supplied as standard is sim plicity
itself. Load the file into Am aya, and just type over what’s already there. Delete anything that
you don’t want.

In the exam ple below, I’ve replaced the m ain text with a paragraph of m y own. In addition,
I’ve created a short list of foods, and used the Unordered List option in Am aya (the button on
the right hand panel that I have ringed in red) to form at the list in the style as defined in the
css file. In this case, for the Hot Gray design, the norm al rounded bullets are replaced by
sm all rectangles.

I’ve also deleted the "Posted on…" line under the m ain heading. This is useful for blog-type
pages or online newsletters but isn’t really necessary here. The relevant entries are still in the
CSS file, so this particular style can still be used on other pages within the site if required
later.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
95
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Changing the Pictures

You’ll also see from the picture above that I’ve changed the header picture from a desert
scene to som e tasty roast beef. How was this done? Take a look inside the im ages folder of
your Hot Gray design. Browsing in thum bnail m ode within Windows, we find the following:

The 40 original and blockgradient im ages are used to m ake up the border around the page,
and the grey bars behind the m enu lines. We can leave these alone for now. The file we’re
interested in is header.jpg. Hovering the m ouse over the thum bnail brings up a sum m ary
box which tells us that the im age is 760 by 122 pixels. So, in order to custom ise the design
but without affecting the layout, we sim ply need to replace this im age with som ething else
that has the sam e nam e and is the sam e size. A quick visit to the free im age site at
www.sxc.hu that was m entioned earlier is all that’s required.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
96
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

You’ll also need to crop the picture you download to a size of 760 by 122. If you don’t have a
program that can edit and crop pictures, search the web for The Gim p, which is a great im age
editor that’s totally free. Or use the online im age editor at www.piknik.com.

Changing the CSS Styles

If you want to change the text styles that the Hot Gray design uses, you’ll need to change the
CSS entries in its style sheet file. Loading the css file into TopStyle Lite, the first section
looks like this:

Scroll down and you get to the next set of styles, nam ely:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
97
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

There are others, too, but this will suffice for the m om ent. Let’s take a look at som e of these
style definitions, and decipher what they m ean.

First is the style for the contents of the <body> tag, which governs som e of the overall look
for the entire page. We can see, for exam ple, that the background im age is specified here.
The "repeat" bit m eans that, although the im age itself is sm all, it will be tiled across the
entire page as needed.

Next, the file specifies that headings 1 to 4 have no m argin or padding, and are in bold type.

Next, we set m argins around each paragraph (ie, the <p> tag). But why 8px and 5px? You
can specify up to 4 values in instances such as this, to affect m argins, padding etc all around
an item . The 4 values start from the top and work clockwise around it. So, for exam ple, a
m argin of 4px 7px 10px 3px m eans 4 pixels at the top, 7 to the right, 10 underneath and
3 pixels to the left. In this case, only the first two values have been specified, so each
paragraph will have an 8 pixel m argin above it and 5 pixels to the right.

The <a> tag stands for "anchor", and is the one we use for creating hyperlinks. In the style
definition for the <a> tag, text-decoration:none is how we rem ove the underline that

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
98
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

browsers otherwise add to links. Equally, we change the standard link colour from blue to
red with the color: #990000 line.

The a:visited and a:hover styles allow you to specify the style for links that the user has
already visited. Most browsers norm ally display these in purple, but by setting a style for
a:visited you can change this. Equally, a:hover is the style that a hyperlink has when the
visitor has his or her m ouse hovered over it. In this case, we use the <a> style to turn off the
underline and then use a hover style to turn it back on. This gives the effect of m aking the
underline appear only when the m ouse is hovered over the link.

Which Style Is This?

One of the problem s that you’ll alm ost certainly encounter when you’re trying to decipher
how the sam ple index.htm l page and the style.css file work together, is how to tell which style
or styles are governing the appearance of a certain item on the page. For exam ple, look at
the screenshot above, where I’ve added the "Welcom e to m y site" heading. Now look across
to the Categories subheading on the left hand side of the screen, and particularly the "Web
Developm ent" line. If you wanted to change the appearance of that text, which entry in the
css file would you need to change?

In an ideal world, the structure and content of the css file would tell you all you need to
know. And indeed there’s a section in the file called # links, which, if you rem em ber our first
lesson on CSS, m eans that this is the style for the item on the page which has an id of "links".
There is indeed such an item , nam ely a tag that consists of <div id="links">, but this, if
you look through the HTML code of the index page, clearly refers to the links under the
Pages heading and not the entries under the Categories heading. So it’s back to square one.

There are two techniques that can help you track down the css entry that affects an item on
the page. Firstly, use Am aya’s status line. Load Am aya, open the page in question, place
your cursor som ewhere within the text that you’re interested in, and look at the very bottom
of the screen. In the case of the page in question, you’ll see this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
99
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

The status line shows the hierarchy of HTML tags leading up to the item on which the cursor
is positioned. So in this case, it’s the overall HTML tag, followed by body, then a selection of
divs, then a div which is configured to use a class called "block". Within that div, we’re
looking for an unordered list, and list item within that, and a hyperlink (the <a> tag) within
that.

The second technique is to look at the HTML code near the text you’re interested in. View
the HTML source with Am aya (or even load it into WordPad or Notepad, if you’d rather).
Search for "Web Developm ent" and what you actually see is:

As we can see again the Web Developm ent entry is a link within a list item , within an
unordered list, within a div that is to be form atted with the css class called "block".

Although this looks cut and dried, it’s not necessarily the end of the story. If you look further
at the HTML source code, you will see that the above-m entioned div is actually contained
entirely within another div that has an id of "m enu", and that div itself is within yet another
one called "contentwrapper". Any or all of which could be affecting our text, but at least we
have som e good clues as to where to look in the css file.

Let’s start with the entry at the very end of Am aya’s status line, and work backwards. It’s an
<a> tag. The css file has only one m ention of the <a> tag, so that’s a good place to start.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
100
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Let’s change the entry from color: #990000 to color: #009900 and try viewing our
index page again:

Success! Our links are now green rather than red.

Adding Pages and Navigation

With our downloaded tem plate now tweaked so that it looks how we want, all that rem ains is
to create additional pages and get the navigation (ie, the set of links down the left hand side)
working.

When you download a tem plate that includes links, it’s com m on for those links not to
actually lead anywhere when clicked. If you look at the HTML source code for the page, and
specifically the <a> tags which com prise the links, you’ll see lines that look som ething like
<a href="#"> or <a href="/">. The entry in quotes after the href com m and is the
destination for the link, and would norm ally com prise a com plete URL or at least an HTML
file nam e. Instead, these links are all em pty so we need to populate them .

First, we need to decide on the structure of our site. We don’t need the Categories section, so
that can be deleted. In the Pages section, we’ll keep the first 3 (Hom e, Contact Us and About
Us). We’ll delete the last 2, and replace them with a new entry called Blog.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
101
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

So, to start, load the index.htm l page into Am aya. First look for the section of code that
com prises the Categories block. It’s safer not to just select the whole block with the m ouse
and hit the Delete key, as you risk leaving a stray HTML tag in place. Much better to switch
to HTML code view and do it properly.

Here’s the page loaded into Am aya, with the relevant block of code selected:

We’re about to delete an entire section of the page, which starts with a <div> tag and ends
with </ div> . Don’t delete the second of the two </ div> tags, as that closes a div which is
opened earlier, and deleting it would lead to an im balance. And a page that won’t validate
correctly.

Press Backspace to delete the selected block of code, then save the HTML file. Open the page
in your web browser, rather than Am aya, an d the Categories section should now be gone:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
102
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

To rem ove the final two entries in the Pages section, and add a link to an as-yet-nonexistent
blog page, search for the Pages section in the HTML code and, using Am aya, change it to:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
103
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

That’s the text of the links. Now we just need to set up the destinations. So, in Am aya’s page
view (you can close the source code view for now), click som ewhere on the green Hom e link
and then, from the Links m enu, choose Create Or Change Link. In the box, change the
destination to index.htm l, as that’s our hom e page.

Change the Contact Us link to point to contact.htm l in the sam e way, and the About Us link
to point to about.htm l too. Finally, set the Blog link to blog.htm l as well.

All that rem ains is to actually create the pages that we’ve now started referring to. So use the
Save As option from Am aya’s File m enu to save 3 m ore copies of the index page, called
contact.htm l, about.htm l and blog.htm l. You can then edit those new pages, again with
Am aya, to contain the relevant inform ation according to the nam e of the page. Rem em ber
not to change any of the navigation elem ents because, if you do, you’ll need to m ake the sam e
changes across all of your pages. That’s why we m ade sure that the page looked correct
before we started to m ake the additional copies.

Uploading the Finished Files

With everything done, it’s tim e to test your site. Upload your 4 HTML pages plus the CSS file
to your hosting space, using FileZilla. Then, using your Web browser, surf to the index page

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
104
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

and try clicking on the links. You should find that you can navigate around your brand new
site quickly and easily.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
105
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Rules, Tables and Im age Maps

Now that you’re building up your knowledge of HTML in order to create web pages, and the
use of CSS to specify how each HTML tag looks, we’ll cover three m ore features of web pages
that you m ight find useful.

Horizontal Rules

A horizontal rule allows you to create a line across your web page. This is useful as a way of
underlining headings, or to separate areas of a large page. Although, if a page is becom ing
particularly large, it’s always better to split it into m ultiple pages in order to save your
visitors’ tim e and bandwidth. For exam ple, if you’re putting together the web site for your
school’s sports day and there’s a huge list of race tim es that requires visitors to scroll down
the page in order to find their nam e, split the page into separate parts. "Click here if your
surnam e begins with A-K, or here for L-R, or here for S-Z". After all, Sm ith is unlikely to be
interested in Brown’s results, so don’t waste his tim e including them on the sam e page.

The standard HTML tag for a horizontal rule is just <hr>. Because this tag doesn’t officially
need to be closed, and yet m odern HTML coding standards say that every tag needs to be
closed, it’s good practice to use the version which includes a closure. Nam ely <hr /> rather
than a plain <hr>. It’ll help ensure that your pages validate correctly.

Am aya has the built-in ability to create rules. J ust load one of your pages, then go to the
Insert m enu and choose Horizontal Rule. Your page will now look som ething like:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
106
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

In a browser, such as Internet Explorer, Chrom e or Firefox, it will look sim ilar. Possibly not
identical, because each browser shows the stan dard <hr> rule in a different way, but the
differences will only be m inor. For exam ple, the line m ay be a slightly different colour or
thickness.

As with every HTML tag, to stam p your own design on it you need to use CSS. For exam ple,
add this to your CSS file:

hr {
width: 40 0 px;
}

and your horizontal lines now becom e 40 0 pixels wide, rather than filling the entire width of
the screen. Like so:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
107
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

As always, if you want one particular line to be a different width, use an id-based selector.
Eg, create a line like this:

<hr id="special_line">

and then create a style called #special_line which contains the specific inform ation for
this line.

Tables

A table is useful if you want to present tabular inform ation on a web page, such as a
tim etable, price list and so on. To create a table on a web page using Am aya, go to the Insert
m enu, choose Table, then choose Insert A Table. In the box that appears, choose the num ber
of rows and colum ns that you want, and the border thickness. Here’s what Am aya looks like,
after I inserted a table of 3 colum ns and 2 rows, with a border thickness of 1:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
108
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

I’ve used Am aya to split the screen to show the table as it would norm ally appear in a
visitor’s browser, and also the HTML code that Am aya has generated. You can now see the
HTML tags that are relevant to tables, which you need to know in order to be able to control
the appearance of your tables with CSS.

The table starts with a <table> tag and, of course, ends with </ table>. The table’s caption,
had I chosen to include one, would have been placed between the <caption> and </ caption>
tags. By applying CSS to the caption tag, you can thus choose the particular font etc that you
wish to use for your table captions.

The <col> tags are used to specify various characteristics for each of the colum ns of the table.
The tags above, as generated by Am aya, don’t actually have any effect because there are no
additional param eters specified. It’s easiest, and perfectly safe, to ignore them .

Next com es the m ain body of the table, which is enclosed within a <tbody> and </ tbody>
tag. Within the table body, each table row goes between a <tr> and </ tr> tag, and each cell
is created with a <td> tag, which stands for Table Data.

To change the overall look of all tables on a page, use your CSS file to apply one or m ore
styles to the <table> tag. This is where you change things such as overall border line colours
and thicknesses, the m argin and padding between and around each cell, and so on. Styling

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
109
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

the <tr> tag, m eanwhile, lets you specify various aspects of table rows, and specifying the
<td> tag in your CSS file lets you style the table cells them selves.

As always, you can use id-based styles if you want to change the appearance of just one row
or cell. For exam ple, change <td>Robert</td> to <td id=robert-
cell>Robert</td> and you can now specify a unique style for the particular HTML item
whose id is robert-cell. J ust create an id-based style with TopStyle Lite and specify the
required id, as explained on page 75.

Another useful table-related tag is <th>. This stands for Table Header, and is often used in
place of <td> tags for each of the cells in the top row of a table. By applying different styles
to <th> and <td>, you can easily create a different look for your header row. For exam ple,
add a background colour, m ake the text slightly larger, or m ake it bold.

Im age Maps

On page 8 4 we saw how to add a picture, or im age, to a Web page using the <im g> tag. In
the sam e chapter, we saw how im ages can also be used as hyperlinks, so that a visitor to your
site can click on an im age, just like som e text, to be taken to another part of the Web.

Now that you know about im ages and links, we can introduce another, advanced feature of
HTML which is known as an im age m ap. This allows you to divide an im age into a num ber
of separate areas, and specify a different link destination for each area.

For exam ple, let’s say that you are creating a web site that offers various item s of clothing for
sale. You place a picture on your hom e page that shows som eone dressed in shoes, trousers,
t-shirt, scarf and hat. You want to allow your visitors to click on part of the picture and be
taken to different pages of your web site, nam ely shoes.htm l, trousers.htm l, tshirts.htm l,
scarves.htm l or hats.htm l.

You m ight think that achieving this feat involves loading the picture into an im age editing
program and dividing it into five separate files, but actually you’d be wrong. The picture can
rem ain intact. What you need to create is an Im age Map, which is a special collection of data
item s which specify the boundary co-ordinates of each clickable area of the im age, as well as
details of the link destination. For exam ple, "if som eone clicks within the square that starts
in the top left-hand corner and whose lower right hand corner is 38 pixels down and 29
pixels across, take them to trousers.htm l".

You then include this im age m ap data within the HTML code of your Web page, and the
im age can now be clicked in different areas for different results.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
110
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Unfortunately Am aya can’t create im age m aps, but there are a few free program s on the
internet that can. One such program is called Handy Im age Mapper. There’s a link on
http://silveragesoftware.com/handytools.html which allows you to download it,
and the good news is that, like all of the software m entioned in this book, it’s free.

Once you’ve download the file and installed it, you can run it. Start by clicking on its folder
icon to open one of your pictures. Then click on the shapes to define areas of the screen, and
enter the URLs that correspond to the intended web destinations. When you’re finished,
click the Place On Clipboard button, which creates the m ap data and copies it to the
Windows clipboard. You can then paste it into your web page.

The HTML code for using an im age m ap looks like this:

<IMG SRC="computer.jpg" USEMAP="#computer">

<map name="computer">
Paste your image map data here
</map>

As you can see, it’s all pretty straightforward. Add a USEMAP param eter to the <im g> tag,
which nam es the im age m ap to be used. Then place the m ap data som ewhere on the page
between a <m ap> tag and a </ m ap> tag. The m ap data can sim ply be pasted from the
clipboard, having been generated with Handy Im age Mapper as described above.

Here’s how Handy Im age Mapper looks during use, once you’ve loaded a picture:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
111
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

In this exam ple, I’ve loaded com puter.jpg and, using the controls at the top of the right-hand
colum n, created a square area that links to screen.htm l and a round area that links to
m ouse.htm l.

With this done, I can paste the m ap data into Am aya. The m ap data, in case you’re
interested, consists of:

<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="25,8,81,52" HREF="screen.html" TITLE="">
<AREA SHAPE="CIRCLE" COORDS="69,104,16" HREF="mouse.html" TITLE="">
</MAP>

Obviously you’ll need to change the nam e from m ap1 to m atch whatever you have specified
in the picture’s <im g> tag.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
112
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Password-Protecting your Web Pages

Most web sites are openly available to anyone who knows, or finds, the URL. Most of the
tim e, that’s the way you want it to be. But occasionally you will want to password-protect
som e or all of your pages. For exam ple, if you run the web site for a club or a school, you’ll
want to restrict certain areas to m em bers or students only. Or perhaps your site contains
inform ation that has a value, such as docum ents or pictures, and you need to ensure that it’s
only viewable to your paying custom ers.

Password-protecting one or m ore areas on your web site is actually a fairly easy task to
accom plish, because there’s a facility built into m ost web servers. You don’t even need to do
any program m ing.

The key to protecting your pages in this way is to know about two special text files called
.htaccess and .htpasswd. The first file, .htaccess, contains som e special com m ands for the
web server which basically say "please don’t show anyone the pages in this folder unless they
enter a correct usernam e and password. And here is where you’ll find the list of usernam es
and passwords". As you’ve probably guessed, the second file, .htpasswd, contains the actual
list of usernam es and passwords. All that you need to do in order to protect your site,
therefore, is to create these two files and then use your FTP program to upload them to the
web server.

Alm ost all web servers support this feature. If you’re not sure whether yours does, you’ve
nothing to lose by trying. If your web browser pops up a usernam e and password box at the
appropriate point, you’re in business. If it doesn’t, and sim ply shows you the pages without
asking you to log in, it’s back to square one. Or you need to ask your hosting com pany to
enable the facility, as som e of them don't turn it on by default.

The rem ainder of this chapter shows you how to create the .htaccess and .htpasswd files.
Note, by the way, the dot at the front of the filenam e. You’re probably used to seeing dots in
filenam es, such as letter.doc or finances.xls, but these two files are special as there’s nothing
before the dot. Web servers generally won’t object to filenam es in this form at, but som e
desktop com puters m ight. If yours does, and you have trouble creating files with these weird
nam es, just call them som ething a little less weird when you first create them on your PC.
Then, once they’re uploaded to the web server, use your FTP program to renam e the
uploaded versions in situ.

The .htaccess File

The .htaccess file is used to provide special instructions to a web server. It can be used for
m any purposes. For exam ple, you can use a .htaccess file to custom ise the error m essages
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
113
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

that visitors see if there’s a problem with your site. If a visitor attem pts to surf to a page that
doesn’t exist, or if they click on a link that doesn’t actually lead anywhere, they’ll norm ally
see an "Error 40 4" page. This is generated by the visitor’s web browser. But by using a
.htaccess file you can create and specify a custom ised error page instead. J ust create it as a
standard web page, upload that page to the server, and then use a .htaccess file to tell the
server where the page is.

The other m ain use for a .htaccess file is password protection. For such purposes, the file
needs to look som ething like this:

AuthType Basic
AuthName "test"
AuthUserFile "/home/thewebbo/.htpasswds/.htpasswd"
require valid-user

The first line tells the web server that you want to use HTTP Basic Authentication, which is
the official nam e of the password protection feature that is the subject of this chapter. The
second line is where you specify the text m essage that appears in the password entry box that
pops up on visitors’ screens. You’ll see it in action shortly. The final line, require valid-
user, tells the web server that it should deny access to everyone except those who can
provide a valid usernam e and password.

The m ost im portant line is clearly the third one. This contains the location of the .htpasswd
file, which is where the list of valid usernam es and passwords is stored. It’s im portant to get
this location right, or people won’t be able to access your protected pages. However, the
precise form at varies greatly and is generally specific to each hosting provider. You’ll need to
search your host’s online support pages for term s such as "htpasswd path" in order to find
out the details.

In the exam ple above, I’ve used the version that is correct for Hostm onster, the com pany
that’s hosting m y the-web-book.com site. This starts with / hom e, then com es m y
usernam e, then a folder called .htpasswds and then the file nam e itself (.htpasswd).

It doesn’t norm ally m atter where you put the .htpasswd file, so long as you use the .htaccess
file to tell the server where you put it. But in the case of our hosting com pany, hostm onster,
they im pose a rule that all such files have to go in the .htpasswds folder. If you look at the
hierarchical tree of folders that FileZilla displays, you’ll see that .htpasswds is not within the
public_ htm l folder. Although you can still access the .htpasswds folder with your FTP
program , as owner of the site, visitors can’t access it with their web browser.

Only files that are within public_ htm l can be accessed with a web browser. Technically,
public_ htm l is known as the web root folder. It m eans that you can gain added security by
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
114
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

ensuring that files which visitors don’t need to surf to are not put in public_ htm l. And for
obvious reasons, you really don’t want visitors to try surfing to, and attem pting to download,
your .htpasswds file. Hence Hostm onster’s insistence that you don’t put it in public_ htm l. If
you do, the feature won’t work.

To start password-protecting your web site, use FileZilla to create a new folder on the site,
within public_ htm l, called private. In that folder, create and upload a sim ple test page.
Then type the exam ple .htaccess file shown above, into a text file, call it .htaccess, and upload
that into your private folder too.

The .htpasswd File

We’ve created a private folder, placed a sam ple page in there, and used a .htaccess file to tell
the web server where the list of usernam es and passwords is. All that rem ains is to actually
create that list of usernam es and passwords. In other words, the .htpasswd file.

A .htpasswd file is m erely a text file of usernam es and passwords, with each pair on a
separate line and with a colon between the usernam es and passwords. Here’s an exam ple
(but don’t bother trying it yet, for reasons that will be explained shortly):

fred:flintstone
open:sesame

In this case, it would create two valid users (fred and open) with passwords of flintsone and
sesam e respectively. However, it’s not quite as sim ple as that!

If you were allowed to create the file as shown above, it would represent a significant security
risk. Anyone who m anaged to hack into your web site and download the file would now have
a list of every usernam e and password on the system . Clearly not ideal, or rem otely sensible.

So for added security, here’s how the feature actually works. Instead of creating a line that
consists of, say, open:sesame, you encrypt the password in advance, thus the line becom es:

open:$apr1$kZy1b/..$BM8fLekWkKblQ6pynXeM/1

When the user types in their password, the web server encrypts it and com pares it to the
version in the .htpasswd file. If both of the encrypted passwords m atch, then the original,
unencrypted ones m ust also m atch too (don’t worry, they just do, trust m e).

The encryption algorithm (form ula) used for encrypting .htaccess passwords is a standard
feature that alm ost every web server supports. It works because the encryption is a one-way

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
115
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

process. Turning sesam e into $ apr1$ kZy1b/ ..$ BM8fLekWkKblQ6pynXeM/ 1 is very easy.
Trying to reverse the process, however, is m uch m ore difficult. Not im possible, but certainly
difficult enough to provide another level of security for your protected pages.

All that rem ains, therefore, before you can create a proper .htaccess file, is for you to find a
way of encrypting passwords in the correct way, ie the way that web servers expect. There
are lots of program s that are capable of doing it, which you can download from the intern et
for free. Even easier, there are websites that will do the encryption for you. They’re quite
safe to use, as they won’t know what web site you’re creating the passwords for.

A Google search for "htpasswd generator" will lead you to a choice of sites, which will look
som ething like this one:

Type in the usernam e and password of your choice, and the site will generate the line that
needs to be added to your .htpasswd file. Then just copy and paste it in, using a sim ple text
editor like Notepad or WordPad.

When you’re done, use FileZilla to upload .htpasswd to the .htpasswds folder of your web site
(or wherever else you decide to put it, according to what your hosting com pany allows).
Then open your web browser and surf to your protected folder. In m y case, that’s www.the-
web-book.com/private. As if by m agic, this appears in m y web browser:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
116
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Notice the "test" m essage, as specified in the .htpasswd file. We could (and probably should
have) just as easily specified a m ore friendly m essage, such as "Please log into the site".

Keep typing wrong usernam es or passwords, and nothing happens. The password entry box
keeps re-appearing. But as soon as you supply one of the correct usernam e/ password pairs,
the protected page is displayed. Once the user is "logged in" like this, access to all pages
within the protected folder on the server (ie, the one which contains the .htaccess file) will be
allowed without the user needing to re-enter their password.

Protecting Multiple Folders

If you want to protect m ore than one folder on your site, you can do that in 2 different ways.
If you want to use the sam e set of usernam es and passwords for all of the protected folders,
just put a copy of the sam e .htaccess file in each of the folders, which all point to the sam e
.htpasswd file. If you want to use different usernam es and passwords, then each protected
folder will need its own .htaccess file, which points to a unique .htaccess file. In the case of
Hostm onster, those files m ust all reside in the .htpasswds folder, but the nam e of the file
itself can vary. So you could, for exam ple, have separate files called .htpasswd1, .htpasswd2
and so on, pointed to by com plem entary .htaccess files.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
117
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

CMSes and Other Software

By now, assum ing you’ve read every page of this book, you’ll know pretty m uch everything
that’s required to create sim ple Web pages from scratch. This includes registering a dom ain
nam e, renting som e space on a web server, and creating pages using HTML for the content
and CSS for the layout.

With this basic knowledge under your belt, it’s tim e to m ake an im portant decision. Will you
continue to create web sites in this way, where each page is an HTML file that has to be
edited and uploaded? Or will you do things The Other Way?

To understand what we m ean by The Other Way, consider m odern web sites such as
Facebook, WordPress, LinkedIn, Bebo, Twitter, MySpace and Ebay. These are often referred
to as Web 2.0 sites, but what does this m ean exactly?

When you want to update your profile on Facebook, you don’t have to create an HTML file
with Am aya and then use an FTP program to upload it. You just fire up your web browser,
connect to the site, log in with a usernam e an d password, and m anage your content directly
within the site itself. It’s the sam e whether you’re posting a new page to your blog on
wordpress.com , creating an item for sale on eBay, or using any of the other sites I
m entioned. How do they do that? And m ore im portantly, can anyone do it? Can you create
sites that work in a sim ilar way, that you can update directly from a browser without the
need for an HTML editor or an FTP tool?

You m ay be surprised to know that creating a Web 2.0 site isn’t actually difficult. Mainly
because the software that allows you to do it is available from various places. All you need to
do is obtain it, install it on your hosting space, and start using your Web 2.0 site. Even
better, m any of the m ost popular program s are what’s known as FOSS (free, open-source
software). This m eans that, not only are they com pletely free of charge, you also get the
program source code so you can m odify it if it doesn’t quite fit your needs.

The key to creating a Web 2.0 site, ie one that you can edit and m aintain from within a web
browser without the need for program s like Am aya and FileZilla, are two technologies known
as server-side program m ing languages and server-side database engines. The form er lets
you write program s which run on the Web server. One of the things that these program s can
do is to retrieve text from a database and present it in a web browser, which is where the
second technology com es in.

We’ll learn how to use these technologies in m uch m ore detail during the forthcom ing
chapters in this book. There, we’ll learn how to write program s using the PHP language, and
access databases that use the MySQL database engine. This will allow us to create our own
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
118
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

web-based applications, including those that work in the sam e way as Facebook and all the
other Web 2.0 sites m entioned above.

But if you want to create a Web 2.0 site that perform s a com m on function, such as a blog, or
a discussion forum , or a sim ple web site, or a picture gallery, then here’s the good news.
There are lots of ready-m ade open source applications. J ust install one or m ore of them on
your hosting space and you’re ready to roll.

A Web 2.0 application that perform s the basic functions of creating and m aintaining a
standard web site is known as a Content Managem ent System , or CMS. Som etim es the term
used is WCMS, or Web Content Managem ent System . As I said, we’ll leave the precise
details, including how to write one using PHP and MySQL, until later. For now, let m e show
you just how useful the existing, free, ready-m ade applications are, and how easy they are to
get up and running.

Note that this chapter isn’t an in-depth tutorial on how to use the products m entioned. If
you decide that any or all of them would be a useful addition to your site, use what follows as
a starting point and then search online for docum ents and forum s that help you get your
system working (and properly secured) the way you want.

For the purposes of this chapter we’re going to install and configure 4 different products:

• J oom la - One of the leading free WCMS products

• Wordpress - Another leading CMS, especially good for blog sites
• phpBB - A discussion forum
• Plogger - A picture gallery

There are, of course, m any other free, open source web applications in addition to those
detailed here. There are literally hundreds available, in m any other categories. If you want to
sell things via your web site, for exam ple, there’s a free e-com m erce suite called oscom m erce.
If you want to set up your own version of wikipedia, there are dozens of free wiki applications
available. One great place to find Web software is www.hotscripts.com, which offers
ready-m ade applications in a num ber of categories. Here’s just one part of one of their m enu
screens, showing the huge num ber of program s available, all for free.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
119
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

CMSes and Tem plates

CMS products like J oom la and WordPress are tem plate-based. You start with a basic
tem plate, or page layout, which contains com m on elem ents such as a logo, the site’s title, the
page footer and so on. The tem plate also contains m arkers (called placeholders) to indicate
where the unique content for each page should be inserted. For exam ple, the m ain heading,
the intro paragraph, the m ain body text, the nam e of the author, and so on.

Key to using a CMS is to create a tem plate. Thankfully, there are lots of free ones available,
which can change the look of your site instantly. But if you don’t like any of the standard
tem plates, you can edit the existing ones or design your own from scratch. Any HTML page
can be turned into a CMS tem plate – it’s just a case of looking through the CMS
docum entation for details on how to insert those special m arkers at the point where you
want each page’s content to appear.

If you like designing HTML pages, perhaps to be used as CMS tem plates, one product that
deserves a m ention is Xara Web Designer. It’s not free, but is only around £ 39 or $ 60 . It
contains m ore than 70 0 ready-m ade page tem plates, easily adaptable for use with any CMS,

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
120
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

and it’s incredibly easy to use. It allows you to do things that no other HTML editor does.
For exam ple, here’s one of the program ’s standard designs:

Now, just type over any of the text or buttons in order to custom ise the page. Or click one of
the coloured diam onds to change the entire colour schem e. You can also click on any object
(a paragraph, a picture, a button etc) and, with your m ouse, m ove it, enlarge it, or rotate it,
just like any PC-based drawing program . When you’re done, just save the file and you’ve got
yourself an HTML page which can be used as-is on a site or converted to a CMS tem plate.

Also, if you're using J oom la or Wordpress, check out a com m ercial product called Artisteer,
which m akes it easy to create great-looking tem plate files. You can read m ore, and see a
dem o video, at www.artisteer.com.

Automatic Installers

In the chapters that follow, I’ll show you how to obtain, install and configure J oom la,
Wordpress, phpBB, and Plogger. But before you read these sections in detail, check whether
your web host offers you the use of an autom atic installer such as Fantastico or
Sim pleScripts. If so, then your life just got even easier. These system s let you install m any of
the leading free web applications in seconds, with just a single click.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
121
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

If the facility is available, and if you want to go down the easy route rather than learning how
to install and configure the program s from scratch, then it m akes good sense to use it. J ust
check on your web hosting control panel to see if the feature is available.

As an exam ple, here’s the m ain Sim pleScripts m enu, which shows all of the applications that
it can install. You can then install any of them into your hosting space with just one click,
and be up and running in just seconds:

Try Before You Install

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
122
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Although it’s easy to install applications into your hosting space, and even m ore so if you use
Sim pleScripts or Fantastico, the process still takes tim e. Plus, if you don’t like the
application, you have to spend m ore tim e uninstalling it. The best way round this is to find a
site that already has a copy of the application installed, and which allows you to log into it
and use it for test purposes. Then, when you know it’s what you want, you can set up your
own copy in your own hosting space.

My favourite online resource for testing open source Web applications in this way is
www.opensourcecms.com. Despite the nam e, it doesn’t just cover CMSes. It also includes
forum s, wikis, and m ore. The site is com pletely free to use, and offers links to installed dem o
copies of dozens of products. You even get supplied with the adm in passwords, so you can
experience the installed product as an owner rather than just a user. Which m eans, for
exam ple, that you can create new pages on the CMS rather than just reading what’s already
there.

For obvious security reasons, a few features are autom atically disabled, such as sending
em ail or changing the adm in password. Also, the entire system is autom atically deleted and
reinstalled every couple of hours so any m alicious content won’t be around for long. But
opensourcecm s.com should definitely be your first port of call if you’re considering installing
such a product into your hosting space.

If the product you want to install isn’t listed on opensourcecm s.com , all is not lost. Check
out the product’s hom e site on the Web. Many offer a test version that you can log into (look
for a Dem o or Online Dem o link), and this often includes the adm in passwords so you can
check out the m anagem ent facilities too.

A Word about Patching

The key to security on any Windows PC is to ensure that autom atic updates are enabled.
Microsoft issues around 10 0 security fixes each year for Windows, m any of which are for
bugs that are so serious they could allow everyone in the world to access your files via the
internet. By ensuring that these patches are downloaded and installed autom atically, you
prevent your PC from serious attack.

But Windows is not unique. Every program has security bugs, and every team of developers
issues regular security patches for its products. The people who develop products such as
J oom la, phpBB, and all of the other web-based software m entioned here, are no exception.
The difference between Windows and these products, however, is that there’s no Autom atic
Updates feature. Therefore, if you install a product on your Web server, it’s vitally im portant
that you check the product’s web site every couple of m onths to find out whether any
im portant security updates have been issued. If they have, you’ll need to download them an d

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
123
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

install them on your server. Instructions on how to do this are always available, and
norm ally am ount to nothing m ore than uploading the files to your server via FTP to
overwrite the versions already there.

Failure to carry out this essential m aintenance task will m ean that your entire site is
potentially liable to attack by hackers. In som e cases, this could m ean that hackers can wipe
or corrupt the content database which holds all of your CMS web pages, or all of your forum
m essages.

Setting Up A Database

All of the products that we’re about to install require a database on the server in order to
store content such as web pages, forum postings, and inform ation about im ages. When you
com e to install and configure the products, you will be asked to provide details of a database
that can be used. Therefore, if you intend to install any of the products, you MUST first
create a new database on your web server.

There are various web database technologies, but one of the m ost popular is MySQL. In a
later chapter I’ll show you how to create your own program s that can store inform ation in
server-based databases. But for the m om ent, all we need to do is to create an em pty
database for our products to use.

To start, log into the control panel of your web host. In our case it’s the Hostm onster
control panel, a picture of which appears on page 30 . Rem em ber, this is your hosting control
panel and not your dom ain nam e control panel.

Scroll down to the Databases section and click on MySQL Databases, and you’ll see a screen
like this. Of course, if you’re not using Hostm onster, or if your host doesn’t use the cPanel
control panel, your site won’t work in quite the sam e way as this, but the principle is always
the sam e.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
124
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

All that’s required is to type a nam e for our new database, and click the Create Database
button.

Rather than creating a database called joom la, plogger, or anything else that’s specific to one
particular product, we’re going to call it cms instead. We can then use this database not just
with J oom la, but with all our other CMS, forum and gallery products too (WordPress and so
on). Don’t worry – the data won’t get m ixed up, for reasons that will becom e apparent later.
But by having just one database for all of our CMS testing work, we gain a couple of useful
benefits:

1. If your host only allows you a sm all num ber of databases, this is a great way around
the lim itation.
2. When you’re finished testing CMSes, there’s only one database that you need to
delete

So, go ahead and create the cm s database. cPanel does the job, and displays a confirm ation:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
125
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Notice how the database that’s been created is not actually the nam e we chose? We chose
cm s but we’ve actually got one called thewebbo_ cm s instead. Why? Because, like m any
hosting com panies, Hostm onster adds your usernam e or som e other unique identifier to
each database you create. Don’t worry about this, as it won’t be visible to your visitors. But
it’s very im portant to know about this, because it will affect what you need to tell the product
when it asks for details of the database that you have set up for it to store its inform ation in.

Here’s a useful tip. Whenever you need to connect to a MySQL database from your own PHP
program s, or when you’re configuring third party products such as J oom la, you’ll need to
know the database host nam e, the database nam e, and the connection usernam e and
password. So once you know these, and they work correctly, m ake a note of them
som ewhere. You’ll need them often so it’s handy to have them in a convenient place. But
m ake sure you keep them secure – anyone who finds them could connect to your database
via the web from anywhere in the world and delete or corrupt any web site that stores its data
there.

The database connection settings that will work for us in the following exam ples are:

Host: localhost
Database: thewebbo_ cm s
Usernam e: thewebbo
Password: xxxxx

Setting the host nam e to "localhost" tells the program that the database server and the web
server are the sam e m achine. In m ost cases, that's the way it works. If your hosting
com pany's database server uses a different nam e, you'll be inform ed.

General Installation Procedures

Although there are m inor differences, the basic procedure for installing an open source
product on your web server is as follows:

1. Check that your server supports the m ain features (PHP and MySQL, for exam ple)
that the product requires.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
126
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

2. Download the product from a web site, norm ally as a .zip file
3. Check any README file which will contain basic details of the installation procedure
and anything else that it’s im portant for you to know.
4. Extract the zip file to your com puter
5. Create a folder (directory) on the web server
6. Upload the product’s files to the new directory
7. Ensure that you have a MySQL database set up on the server for the product to use
8. Surf to the product’s installation page, using a web browser, and fill in the details of
the MySQL database. Also choose an adm in usernam e and password.
9. Test the product by surfing to its m ain hom e page on your server.
10 . Occasionally refer back to the web site from where you downloaded the product, to
check for im portant updates and security patches that you m ight need to install.

Once you understand this basic procedure, you should have little trouble installing any open
source product such as a CMS, blog, im age gallery, forum , wiki, and so on.

Uninstalling

If you no longer need access to an open source product that you’ve installed on your web
server, uninstalling it is rarely difficult. However, the process is alm ost always a m anual one
– there’s no "Add/ Rem ove Program s" button on web servers, as there is in Windows. At
least, not unless you installed the product using an autom ated installer such as Fantastico or
Sim pleScripts.

Thankfully, uninstalling a product such as a CMS, forum , gallery etc is norm ally just a case of
doing the following:

1. Check the product’s docum entation or official website to find out whether there are
any special actions you need to take in addition to the steps below.
2. Use your web hosting control panel to delete the database that the product uses. If
you wish, export the contents of the tables to a backup file first.
3. Delete the product’s directory on the server.

In the m ajority of cases, that’s all you need to do.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
127
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

J oom la
J oom la (officially known as J oom la!, com plete with exclam ation m ark) is the best-known
and m ost widely used of the open source CMS products. Its widespread adoption m eans that
the Web is awash with helpful docum ents, free add-ons, discussion forum s and other
resources to help you m ake the m ost of it. For now, we’ll just create a basic installation so
that you can appreciate the steps involved an d decide whether your site should use a CMS
rather than consisting of separately-crafted HTML pages.

The first step is to download the J oom la software from www.joomla.com. This exam ple
uses version 1.5.10 , but a later one m ay be available by the tim e you read this. Make sure you
download the latest available version. You’ll n eed the full installer rather than any upgrader
that’s offered.

You’ll end up with a zip file, which you need to unpack. If you use WinZip or sim ilar, follow
your norm al procedure. If you don’t have such a program installed, Windows can unpack
Zip files for you. J ust right-click the zip file and choose Extract All, to unpack the file into a
separate folder. You can then delete the zip file itself.

Uploading the Files

You now need to upload the entire unpacked J oom la folder to the web server, using FileZilla.
Start the program , and connect to your server. In the folder list for the rem ote site, double-
click the public_ htm l folder to open it:

In the sam e area, right-click public_ htm l and choose Create Directory. Nam e it
/ public_ htm l/ joom la and press OK. You should now have a folder (directory) within
public_ htm l called joom la. Double-click on joom la to open the folder, which will be em pty.

Note that we created a folder called joom la rather than J oom la. It’s accepted as best
practice, whenever you create files or folders on a web site, to stick to lower case (sm all
letters rather than capitals) throughout. This is because, to a web server, capital and sm all

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
128
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

letters are different. Thus a folder called J oom la is not the sam e as one called joom la, which
could easily lead to errors if visitors were to type the wrong thing. So to keep things sim ple,
we stick to lower case throughout.

With your joom la folder created and open on screen, we can now upload the system files into
it. On the left hand size of FileZilla’s window, in the local site section, navigate to the J oom la
folder that you unpacked earlier, so that all of the J oom la constituent folders and files
(adm inistrator, cache, com ponents etc) are displayed.

Click inside the window where they’re displayed, then press Ctrl-A to select everything. Then
press Return, and everything should be transferred from your com puter to the server. This
will take a good few m inutes, as there are around 40 0 0 separate files to transfer. When it’s
done, you can delete all the files from your PC as they’re no longer required.

Configuring J oom la

We can now go ahead and configure J oom la. Using your web browser, surf to the J oom la
installation that you copied to the server earlier. Assum ing you uploaded it to a folder called
joom la, the address will be www.yoursite.com/joomla or som ething sim ilar. In m y case,
it’s www.the-web-book.com/joomla, which brings up a page like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
129
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Choose a language (English, presum ably), and press the Next button, to begin the pre-
installation check. Here, J oom la checks various things on your server, to ensure that you
have the right versions of PHP (the program m ing language in which J oom la is written) and
MySQL. It also m akes a num ber of other checks. If any of these fails, check the support
pages on your web host’s site in order to find out how to resolve the problem .

Here’s the page from m y J oom la pre-installation check:

The only warning is that the setting for Display Errors is turned on, where J oom la
recom m ends that it’s turned off. This is relatively m inor. It m eans that, if J oom la crashes,
som eone who’s visiting the site at the tim e m ight see an error m essage. This is
unprofessional, and a m inor security risk. We can live with this, so we’ll click the Next
button and m ove on to the licence agreem ent screen. Read it, then click Next.

Now com es the m ost im portant screen, which is to do with our database configuration. Fill it
in as follows:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
130
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

In the Database Type box, choose MySQL.

For the host nam e, type localhost. This tells J oom la that the database server is the sam e
m achine as the web server. This is not always the case – it depends on your web hosting
com pany. If you have problem s m aking J oom la work, check your host’s support site, or the
em ail that was sent when you signed up, to find out the address of your MySQL server.

For the usernam e and password, use the sam e ones that you use to connect to your hosting
control panel.

For the database nam e, use the one that you created on page 124 (thewebbo_ cm s in this
case).

Finally, go to the Advanced Settings box. Tick the "delete existing tables" entry, just to be
neat.

Choose joom la_ for the table prefix. Within a MySQL database there can be m ore than one
table, just as there can be m ultiple Excel spreadsheets within one workbook. J oom la creates
various tables for itself, to store sets of data such as web pages, user details, page counters
and so on. By specifying a table prefix, all of the J oom la-related tables within the database
will be clearly identifiable because they have joom la_ at the start of their nam e. When we

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
131
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

com e on to install other products later, we’ll use a separate table prefix such as wordpress_
or plogger_ . This is the way that we can allow m ultiple program s to share one database –
they all have their own tables with their own prefixes. So even if both J oom la and Wordpress
wanted to create a table called users, they’d actually end up being called joom la_ users and
wordpress_ users, thus avoiding any conflicts.

With everything entered, press the Next button.

J oom la now needs to know a usernam e and password that it can use to com m unicate with
your web server via FTP. For the sake of sim plicity, we’ll use our site-wide account that we
use for accessing the control panel and the MySQL database:

Tick the box to enable the FTP layer, then en ter your site usernam e and password again.
Then, rather than filling on the FTP Root Path entry, just click the Autofind FTP Path button
and J oom la will do the hard work for you. In this case the result is / public_ htm l/ joom la,
which is what we’d expect.

Alm ost there. J ust one m ore screen to go. Click the Next button, and this appears:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
132
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Choose a nam e for your web site. It doesn’t m atter what you choose, as you can always
change it later. For now, I’ll call m y site Robert’s J oom la Test.

Enter your em ail address where asked, and then choose an adm in password for your J oom la
site. The usernam e will be adm in (you can’t change this). Make sure you rem em ber this, as
you’ll need it to log into your J oom la CMS to m aintain or create pages. In this dem o site I’ve
chosen a password of poltergeist.

Before you go any further, click the Install Sam ple Data button. This will create som e sam ple
content in your CMS, rather than leaving you with an em pty CMS that contains no pages at
all. Having done so, and with the "Sam ple data installed successfully" m essage displayed,
click the Next button.

Hopefully, you should now have a working J oom la installation. The final screen of the
configuration section looks like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
133
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Before you can use J oom la, you need to heed the m essage and delete the installation folder
from your web server. This is a security precaution. If you don’t do this, som eone could surf
to that folder and re-install J oom la from scratch, just like we have done. By choosing their
own adm in password, they could also lock you out of your own CMS.

So, close your Web browser and open FileZilla. Connect to your server. On the right hand
side of the screen, which shows the rem ote site, double-click on the public_ htm l folder to
open it. Then open the joom la folder. Then right-click on the installation folder and choose
Delete. Wait for a m inute or two until FileZilla has finished deleting all of the files from the
installation folder on the server, then close the program and return to your desktop.

Your New J oom la Site

Right, hopefully our J oom la installation is now ready to use. Surf to the folder where you
installed it (eg, www.the-web-book.com/joomla in our case) and you should see it in
action:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
134
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

You now have a fully-working, functional web site based around the best-known open source
CMS. Click som e of the links, and see all of the features that your new site has. Rem em ber
that you can change all aspects of the site’s design and features. You don’t have to stick with
the colours and design that are shown. Equally, if you want to rem ove certain features such
as the poll, you can do so. And of course, the J oom la logo can easily be replaced with your
own.

This chapter does not pretend to be an exhaustive guide to creating sm art-looking web sites
with J oom la. There are plenty of online tutorials that can help you do this, as well as lots of
tem plates and skins that you can download in order to change the visual appearance of your
site. For now, let’s finish this brief look at J oom la by logging into the adm inistration system ,
so you can see how easy it is to create content via a web browser without the need for an
HTML editor or an FTP program .

On the Resources m enu on the left hand side of your screen, click the Adm inistrator link.
You’ll be asked for your usernam e (adm in, if you rem em ber) and password (poltergeist for
our exam ple here). The m ain adm in m enu looks like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
135
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This is only a test installation, so why not just click on various features and see what they do?
You won’t break anything. If you do, and everything goes horribly wrong, just use FileZilla to
connect to the server, delete the entire J oom la folder, then upload the files again and start
afresh with a new installation. So long as you click the option to delete any database tables
that already exist, you won’t even have to create a new database.

Let’s change som ething in the site. Click the Front Page Manager icon, and you’ll see a list of
all the item s that appear on the front page of the site. Click the title of the first article
(J oom la com m unity portal) and an editing screen appears:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
136
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Type som e new text in place of the old story, then click the Save button at the top of the
screen. Now go back to your site and you’ll see that your front page has been updated:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
137
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

As you m ight be starting to realise, a CMS is a hugely flexible way of working but it’s still not
particularly sim ple. The sheer num ber of options and m enus on the m ain adm in screen look
daunting at first. But it’s definitely worth persevering, because it will save you tim e in the
long run. Once you’ve sorted out your design tem plates, you can create new pages in a flash
and add them into the m ain body of your site in just seconds. Plus, because J oom la is very
m uch based around tem plates, skins and CSS, it’s easy to roll out a new design across all of
your site without having to change each individual page. So go ahead and explore J oom la.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
138
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

WordPress
Like J oom la, WordPress is a free, open source CMS. Although it is used nowadays for
creating all sorts of general-purpose web sites, it was originally designed for use in blog
publishing and it is in this area that it functions particularly effectively.

As with J oom la, getting an installation of WordPress up and running isn’t particularly
difficult. The rem ainder of this chapter will take you through each of the required steps in
turn.

Downloading the Software

To obtain your copy of the WordPress software, visit www.wordpress.org and download
the .zip version of the software. At the tim e of writing, the latest release is version 2.7.1. If
there’s a later version available, use that one instead.

Once you’ve download the file, you need to unpack the zip file. If you don’t know how to do
this, refer to page 128 . Once you’ve unpacked the zip file into a separate folder, you can
delete the zip file itself.

Make a Database

Next, you need to ensure that there’s a MySQL database on your web server. If you’ve
already followed the instructions on page 124 for creating the thewebbo_ cm s database then
it’s safe to proceed. If not, go back and do that now.

Configure WordPress

Unlike J oom la, which you configure via the web after uploading the product to your server,
WordPress is slightly different. The configuration data is held in a text file which you need to
edit before uploading anything.

Browse through the folder of files that was created when you extracted the zip file. In the
wordpress folder you’ll find a file called wp-config-sam ple.php, which you need to open. Use
a text editor such as WordPad or NotePad. DO NOT use a word processor like Microsoft
Word, as it will save the file as a docum ent rather than plain text, which won’t work. If you
really m ust use a word processor, save the file by choosing Save As from the File m enu, and
ensure that you choose the plain text option.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
139
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With the wp-config-sam ple.php file open in your text editor, there are 2 sections you need to
edit. First, look for this section in the file:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'putyourdbnamehere');

/** MySQL database username */

define('DB_USER', 'usernamehere');

/** MySQL database password */

define('DB_PASSWORD', 'yourpasswordhere');

/** MySQL hostname */

define('DB_HOST', 'localhost');

Change ‘putyourdbnam ehere’ to the nam e of the MySQL database you created earlier. In our
case this will be ‘thewebbo_ cm s’. Note that the single quotes need to rem ain in place.

Change ‘usernam ehere’ to your web hosting usernam e. In our case it’s ‘thewebbo’.

Change ‘yourpasswordhere’ to your web hosting password.

You can probably leave ‘localhost’ as it is, unless your web hosting com pany tells you that its
MySQL database server is located on a different com puter, in which case you need to enter
its details here in place of localhost. It m ight be som ething like ‘m ysql2.yourhost.com ’. But
in our case, ‘localhost’ is what we need.

Finally, scroll down the file and locate this section:

/**
* WordPress Database Table prefix.
*
* You can have multiple installations in one database if you give each a
unique
* prefix. Only numbers, letters, and underscores please!
*/
$table_prefix = 'wp_';

Note that our WordPress installation is configure to add wp_ at the start of each of the
MySQL database tables it creates. That should suffice, so you can leave it alone. J ust m ake
sure that a table prefix is set, and that the WordPress prefix isn’t the sam e as the prefix
you’re using for any other product that you have installed on your server. Otherwise there
will be problem s when table nam es clash and two different program s attem pt to access them .

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
140
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With the configuration file edited, save it to your hard disk as wp-config.php. Your initial
WordPress configuration is now com plete. Rem em ber, you MUST save the file as wp-
config.php, without the word sam ple.

Upload The Software

You can now upload the WordPress folder from your com puter to your web server. Using
FileZilla, connect to the server, double-click on the public_ htm l folder to open it, then right-
click to create a new directory (folder) within it called wordpress (no capital letters). Then
upload the entire contents of the WordPress folder. It will take a m inute or three to transfer
all of the 60 0 files, after which you can delete the WordPress files from your PC and exit
FileZilla.

Final Configuration

To finish setting up your installation of WordPress, open your web browser and surf to / wp-
adm in/ install.php within your WordPress installation folder. So in this exam ple, where we
uploaded the files to the the-web-book.com site in the wordpress folder, the full URL will be:

http://www.the-web-book.com/wordpress/wp-admin/install.php

Note that the public_ htm l folder is never part of the URL of your site. That’s where all the
other folders start from .

You should now see the following screen:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
141
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Choose a title for your blog, and enter your em ail address, then click the Install WordPress
button. Assum ing that you edited the config file correctly, and your database
host/ usernam e/ password were correct, this second configuration step should only take a
couple of seconds. After which, you will see a usernam e (usually adm in) and a password
displayed. You’ll need these in order to log into your blog to create and edit content, so m ake
a careful note of the password.

You can now browse your blog (even though there’s not m uch in it yet), or log into the
editing system to start creating content.

To view your blog, the URL is www.yoursite.com/wordpress. To log into the editing
system , use www.yoursite.com/wordpress/wp-login.php instead.

Let’s create a first blog post. Log into WordPress with your usernam e and password, and
you’ll see this screen:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
142
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Click the New Post button at the top of the screen, and then type a title and som e text for
your blog post, like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
143
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

That’ll do for now. Click the Publish button, and you’re done. Here’s the finished post,
online for the world to see:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
144
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Obviously there’s a lot m ore to explore with WordPress. For a start you’ll want to delete the
handful of sam ple postings, and create som e categories to which you can assign your posts.
Feel free to experim ent with the various features, including the appearance of your blog.
After all, this is your installation of WordPress running on your own hosting space, so you
have total control over what you do with the system . J ust rem em ber to keep your adm in
password safe, so that no one but you can create or edit pages.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
145
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

phpBB
As part of your web site, you m ay want a discussion forum or two. There are m any open-
source forum program s that you can download for free and install on your web server in
order to provide this. Possibly the best-known is phpBB, so that's what we'll use here.

Like a traditional CMS (J oom la, Wordpress etc), forum software needs access to a database
(MySQL is just fine) to store forum postings, user data and so on. So before you go any
further, m ake sure you have followed the procedure on page 124 to create the em pty MySQL
database.

Once you’ve done this, go to www.phpbb.com and download the software. You’ll need the
zip file version. In this exam ple we’re using release 3.0 .4 but there m ay be a later revision
available by the tim e you read this. If there is, use it.

Having downloaded the zip file, extract it to your com puter. If you have a program such as
WinZip installed, follow your norm al procedure. If you don’t, Windows should be able to
extract the file for you – just right-click it and choose Extract All. Once you’ve extracted it,
you can delete the zip file from your com puter. All you need is the folder containing the
extracted version.

Next, we need to connect to our server with FileZilla and upload the extracted files. Once
you’re connected, double-click on the public_ htm l folder to open it. Then right-click on the
opened public_ htm l folder and choose Create Directory. Make a directory (ie, a folder)
called phpbb. Once you’ve done this, double-click the phpbb folder and m ake sure that a)
you’re in it, and b) it’s em pty. FileZilla’s rem ote site window should look like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
146
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

In the left hand Local Site window, navigate to the extracted phpbb folder on your PC. Select
everything except the top ".." entry, and press Return to start the upload. There are around
90 0 files to transfer so it’ll take a good few m inutes, depending on the speed of your internet
connection.

File Perm issions

Before you can proceed, you need to adjust som e of the access perm issions on the files you
have just uploaded. When we start to configure phpBB, the installation pro gram will need
perm ission to create its config file on our web server. To allow this to happen, we need to
change the access perm issions of the config file so that every user on the server, including the
phpBB program , can write to that file.

In theory, this m eans that other people whose web sites are hosted on the sam e server could
also access your config file. In practice, however, alm ost all web hosting com panies
configure their servers in such a way as to lock each custom er to within the confines of their
own area, so there’s nothing to worry about. But if you’re particularly concerned, check with
your hosting com pany.

To change the perm issions of the config file, scroll down the list of uploaded files in the
Rem ote Site window of FileZilla until you find config.php. Right-click this file and then
choose File Perm issions. You’ll see a box like this:

Tick all 3 of the Read and Write boxes, so that the Num eric Value of the perm issions reads
666. Then press OK.

Next, find the store folder. Right-click it, choose File Perm issions, and tick all 9 boxes so
that its perm issions are 777. Again, click OK.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
147
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Do the sam e thing with the cache and files folders. IE, change their perm issions to 777.

Finally, double-click the im ages folder to open it. Then, within it, open the avatars folder.
Within there, right-click the upload folder and change its perm issions, too, to 777.

That’s the file perm issions changed. You can now exit FileZilla.

Now we need to run the phpbb installer on the web server. We’ve already uploaded the
program files, so open a web browser and surf to the install folder within your phpbb folder.
In this exam ple, where we uploaded the files to www.the-web-book.com in the phpbb
folder, this m eans www.the-web-book.com/phpbb/install and it brings up the
following screen:

Click the Install tab to get started, and you’ll see the following:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
148
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Som ething is clearly not right. There are som e PHP error m essages at the top of the screen.
However, these are actually notices rather than actual errors. A notice is m ore friendly
advice than a warning of a m ajor problem . Although it could signify an error in the program ,
m ost notices happen because the configuration of the server isn’t precisely what the program
was expecting. In m any cases, you don’t get to see notices because the server is configured
not to display them . But clearly this one is happy to show them .

We’ll persevere for now. This is only an installer. If the phpBB program appears to install
and function correctly, we can stop worrying. Obviously, if those sam e notices are shown to
the users of our forum then this will be unacceptable, and we’ll need to try som e different
software instead, rather than phpBB.

Click on Start Install, and enter the inform ation that’s requested. For the database type,
choose MySQL. The database server should be specified as localhost unless your hosting
com pany tells you otherwise. Leave the database server port blank, unless you specifically
know that it needs to be set.

For the database nam e, enter the nam e of the MySQL database that you created as per the
instructions on page 124. This is thewebbo_ cm s in our exam ple. The database usernam e

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
149
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

and password should be the sam e as you use for connecting to your web hosting control
panel.

You need to select a database table prefix which is not used by any other program s that are
configured to use this MySQL database. The installer suggests phpbb_ , which is fine, but
you can change it if you want.

Click on "proceed to next step". You’ll then be asked to choose an adm in usernam e and
password for your forum s. Choose som ething non-obvious for both. The last thing you need
is for som eone to guess the com bination and wreak havoc on your board.

We’re alm ost done configuring phpBB. You can ignore all the options on the Advanced
Settings screen for now.

Keep clicking "proceed to next step" until you see a login button. Click that button and you’ll
see:

Before you can start using your forum , we need to tidy up a few things. First, rem ove the zip
file and the extracted files from your PC as these are no longer required. All that m atters are
the files on the web server.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
150
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Next, open FileZilla and connect to the server. Go to the public_ htm l folder, then the phpbb
folder, and find the config.php file. Now that the installer has done its job, and created the
config file, we need to change its perm issions again so that no one can change it. Right-click
config.php, choose File Perm issions, and change the 3 sets of perm issions to read/ write,
read, and read. The num eric value should say 644. When it does, press OK.

J ust one m ore task. Right-click the install folder and choose Delete. If you don’t do this,
som eone else could run the installer again, and wipe out all of your settings.

When FileZilla has finished deleting the folder and its contents, close the program and return
to your web browser. Surf to your forum , which will be in the phpbb folder on your site. In
our case that m eans www.the-web-book.com/phpbb and the screen will look like this:

We now have a fully working forum on our web site. Click the Login link and log in with your
usernam e and password that you just chose. The screen will look like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
151
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Click the Adm inistration Control Panel link at the bottom of the screen, and enter the adm in
usernam e and password that you chose earlier. You’ll see:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
152
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

You’re now all ready to start creating forum s and custom ising your phpBB system . To get
started, click the Forum s tab and explore. Rem em ber, however, that the web is full of people
who get their kicks from finding poorly-protected forum s that they can vandalise or fill with
spam . So ensure that you set the security option s accordingly. This m eans, at the very least,
forcing people to sign up and log in before they can post m essages, and verifying their signup
by asking them to reply to an em ail m essage.

You m ay also want to consider, at least in the early stages, configuring the forum s so that
new m em bers can’t post until their account inform ation has been verified by you. This will
add to your workload in adm inistering the system , but does help to ensure that spam m ers
don’t attem pt to sign up with m ultiple accounts that are m erely used to flood your forum s
with advertising.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
153
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Plogger
So far, the products we’ve installed on our web server are prim arily text-based. These
include a Content Managem ent System , a blog, and a forum . Plogger is an im age gallery
application, allowing you to upload pictures to your server and create online album s for
people to browse. However, it still requires a MySQL database, as it uses this to store details
of im ages and som e inform ation about them . It doesn’t actually store the uploaded pictures
in the database, though – these are uploaded to a folder on the server within the m ain
Plogger directory.

Web servers aren’t generally good at handling im age files. Program s such as Plogger often
boast the ability to m anipulate pictures, such as resizing them for display, generating
thum bnails for browsing, and com pressing them to save space. However, such functionality
generally relies on the availability of specific features that are not always available on all web
servers. Such features include the Im ageMagick graphics library. In the absence of such
features, certain parts of the program m ay not work properly, or at all. You should therefore
take special care to read the list of server requirem ents before deciding whether to install an
im age-based product such as Plogger on your web site. If you have problem s with a specific
product, there are always plenty of others to choose from .

Getting Started
To obtain the Plogger software, go to www.plogger.org and click on the Download Plogger
link to get the zip file. Right-click the downloaded file, and choose Extract All to unzip it.

Next, connect to your server with FileZilla. Double-click the public_ htm l folder to open it
and then, within it, create a new folder called plogger (it’s best to stick with lower case letters
rather than creating Plogger).

Ensure that the plogger folder is open and that it’s em pty. Assum ing this is the case, the
Rem ote Site window in FileZilla should look som ething like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
154
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

On the left hand side of the screen, in the Local Site window, browse to your desktop or
wherever you extracted the zip file to. Then double-click the Plogger folder to open it (you
don’t need the MACOSX one).

Select every file and folder in the left hand window except the ".." folder, and then press
Return to begin uploading the Plogger system to the web server. FileZilla should look like
this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
155
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

When the upload has finished, you can close FileZilla and also delete the extracted zip file
from your PC.

Next, m ake sure that you have created the test MySQL database on your server, which we
have been using for all of our product installations. If you haven’t done so, refer to the
procedure on page 124.

The Installation Process

With the Plogger system uploaded to your server, you can now surf to it and begin the
configuration. Open a web browser and go to the _ install.php page within your Plogger
system . In the case of our exam ple site, that m eans going to:

www.the-web-book.com/plogger/_install.php

You should see a screen like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
156
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Fill in the connection details for the MySQL database, so that Plogger can access it. The host
should be set to localhost unless your hosting com pany has advised you otherwise. The
usernam e and password will norm ally be the sam e as you use for logging into your site's
hosting control panel. In our exam ples the database nam e is thewebbo_ cm s.

When you’ve finished, click the Install button and Plogger will finish its setup process. Once
it has done so, it will create an adm in account for you, so that you’ll be able to log in and
upload pictures. The adm in password is random ly generated and will be displayed on the
screen, so m ake sure you don’t close your browser until you’ve m ade a note of your adm in
usernam e and password!

The screen should look like this, assuming the installation and configuration succeeded:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
157
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

When you’ve m ade a note of your adm in usernam e and password, click the Proceed button.
Plogger will then tell you the URLs for browsing your gallery and for logging in as an
adm inistrator. These are, in the case of our exam ple site:

www.the-web-book.com/plogger for public access

www.the-web-book.com/plogger/admin for the adm in login screen

You m ay find you also see a few error warning notices displayed at this point. If this
happens, check that you can browse and adm inister the site correctly. Assum ing you can,
there’s nothing to worry about. If the problem s persist, check your hosting com pany’s online
FAQ or support section to see if there’s any reason why these error m essage m ight be
displayed. Also (and this is a good tip for any sim ilar situation), try typing or pasting the full
text or the error m essage into a search engine such as Google, to find out if anyone else has
reported sim ilar problem s. Hopefully they’ll also have reported how they solved them .

Uploading Your Pictures

With Plogger now installed on your web server, you’ll need to upload a picture in order to
test that it’s working properly. Surf to the adm in page, as listed above, and enter your adm in
usernam e and password when prom pted. You m ay also wish to try entering an incorrect

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
158
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

password, just to m ake sure that the security is working properly. Perform ing such a test
each tim e you install any new product on your server is always a good idea.

Once you’re logged in, you’ll see this screen:

Click the Browse button and navigate to an im age file on your com puter. Add a caption and
a description (this is important, as you’ll see later). Then choose which album you want to
add your picture to. You’ll probably want to create a new one rather than putting it in the test
collection.

When everything’s ready, click the Upload button and wait for the m essage that says your
upload was successful.

When it’s done, log out and surf to the public part of your site rather than the adm in section.
You should see your gallery displayed. To check that Plogger is correctly storing inform ation
in your MySQL database, use the search box. J ust type a word or two from the caption or
description, and check that Plogger finds your picture.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
159
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With everything working properly, you can now proceed to m ake your site look as you want
it to. Log into the adm in section again and explore the various features that are available.

Avoiding Data Overload

When you sign up for a web hosting package, your account com es with a certain am ount of
disk space on the server to store your inform ation. If you’re storing m ostly text, you don’t
need to worry about hitting your lim it. But if you intend to store lots (as in, thousands) of
pictures, be aware that they eat server space like nothing else. Especially if they are high-
resolution m ulti-m egapixel im ages, which can typically occupy up 10 MB each.

If you think this m ight be a problem for you, check the sm all print of your web hosting
package to find out just how m uch server space you get. Rem em ber, too, that people who
view or download your pictures will use up your bandwidth allocation, so you m ay want to
check that as well. For exam ple, if you have a 10 MB picture on your site and 10 0 people
download it, that’s 1 GB of bandwidth traffic from your server.

Equally, if you upload 10 0 pictures to your gallery, at 10 MB each, that’s 1 GB of traffic from
your own broadband connection. Which, if you are paying for a broadband service that only
allows you 2 GB a m onth, is a fairly large chunk. If this is the case, check whether your ISP

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
160
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

allows free uploads overnight that don’t count towards your m onthly lim it. If so, upload the
pictures then, or downsam ple them (reduce their resolution and thus the size of the files)
before uploading them .

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
161
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Installing the PSPad Editor

While Am aya is great for editing HTML files, it’s not so good if you’re writing J avaScript or
PHP. The solution com es in the form of an excellent program called PSPad. It’s a text editor
with two features that m ake it ideal for writing program s. First, it understands the syntax of
J avaScript and PHP, so it can alert you if you m ake a m istake. Second, it has a built-in FTP
facility, thus m aking it easy to upload your program s to the web server if you need to do so.
And like everything else we’ve used throughout this book, it’s downloadable free of charge.

The following chapters cover how to write program s in J avaScript and PHP so, if you intend
to follow them , you need to install PSPad now.

To obtain the program , visit www.PSPad.com and download the full installer. This will copy
a sm all (only 4 MB or so) .EXE file to your com puter. Double-click that file to begin the
installation, accepting all of the default options (though you’ll probably want to reject the
offer of additional language support unless you really do want to have the option of seeing
the PSPad m enus in Indonesian and other non-English tongues). With the program
installed, you should now see a PSPad icon on your desktop.

Double-click the PSPad icon to start the program , if it’s not already started autom atically
after being installed. You’ll see the m ain screen, which looks like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
162
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

We now need to configure the program before we can use it. Mainly, this m eans setting up
the FTP details so that PSPad knows how to copy files from our PC to the web server. First,
though, you can turn off that confusing m enu of assorted icons at the top of the screen, as
you don’t need them . To do this, just press the F2 key.

Now to configure the FTP site of things. Click the FTP tab on the left hand side of the screen,
to get to PSPad’s FTP facility:

Then click the connection icon:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
163
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

A dialogue box will appear, into which you can enter the details of your FTP connection to
the server. This is very sim ilar to the process that we went through right at the start of this
book, for configuring FileZilla.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
164
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

For the Connection Nam e, just choose a nam e for this connection. This is purely for your
benefit so that, if you configure PSPad to connect to m ultiple servers, you can choose one
from a list. I’ll call m ine The Web Book.

Following the server-specific exam ples as per the earlier exam ples in this book, for the site at
the-web-book.com which is hosted by hostm onster, the required details are the-web-
book.com for the server, thewebbo for the usernam e, and the password that I norm ally use
for connecting to m y web hosting space.

Enter just a / sym bol for the rem ote directory. Leave everything else as it is, and press the
OK button to finish. You’ll return to a list of options that shows your list of available
connections (just the one so far, nam ely the one you just created) and som e buttons. Click
the top button, labelled Connect, to connect to your web server. Assum ing it works, you
should see som ething like this, with the contents of your server listed down the left hand
side.

That’s all you need to do for now. With everything working, you can exit PSPad for the
m om ent.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
165
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

J avascript
HTML is a very full-featured language. When coupled with CSS, it’s capable of producing
just about every design of web page you could ever desire. But HTML is only a m arkup
language, for specifying how pages should look. Which is just fine if you intend your web site
to act as an electronic version of a newspaper, m agazine, book or brochure. But som etim es
you'll want to create web sites that exploit the power of com puters, including features that go
above and beyond the capabilities of electronic publishing. For exam ple anim ation, online
databases, and so on.

To add such features to our sites, we need to leave the safe environm ent of HTML m arkup
and enter the world of web-based program m ing. Once you know how to write program s, just
about anything becom es possible.

The following chapters explain the basics of web program m ing using J avascript and PHP.
I'll show you how to create basic web applications (often known as Web 2.0 sites) using
J avascript and PHP. But be aware that this is a com plex subject which takes a couple of
years to m aster, and this is best done by practising rather than reading. So now m ight be a
good tim e to think of a Web 2.0 application that you’ve always wanted to write, in order that
you can apply what you’re about to read to a real situation.

Choose Your Side

There are two ways to write web-based program s, and understanding the difference between
them is vital because each m ethod is used for specific purposes. As a rem inder, the following
explanations use the term "visitor" to describe a person who visits your web site, ie who
views it online by using a web browser such as Internet Explorer or Firefox.

The first program m ing m ethod is called client-side program m ing. This m eans writing
program s that will run on the visitor’s com puter, within their web browser. J ust about all
m odern web browsers support this, via a program m ing language called J avaScript. To write
a J avaScript program , you include it within the body of a web page along with the HTML
code. Note that J avaScript is not the sam e as J ava, and you should never refer to it as such.

The second program m ing m ethod is called server-side program m ing. Here, you write
program s that run on the web server. The browser never gets to see the program code. It
m erely sees the results, which norm ally consist of HTML code that is sent to it. The fact that
this code was generated by a program running on the server, rather than being stored in a
pre-written .htm l file, is unknown to the browser. The m ost com m on languages for writing
server-side program s are PHP, Perl, Python, Ruby and J ava, as well as Microsoft’s
proprietary languages ASP and ASP.NET.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
166
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

So how do you decide which type of program you need to write? Should it be client-side or
server-side? It depends entirely on what you want to achieve, and this should becom e
clearer as you read the chapters that follow. It also m eans that, to develop full-featured sites,
it helps to know a little about both types.

In the next chapter, we’ll cover server-side program m ing using PHP. For the rem ainder of
this chapter, we’ll cover client-side J avaScript program m ing. First, though, if you haven’t
already done so, follow the instructions on page 162 and install PSPad on your PC.

Start PSPad and connect to your server, so that the list of files and folders appears down the
left hand side of the screen. The list should look fam iliar from when you used FileZilla.
These are the contents of your web server, brought to you via the FTP com ponent in PSPad.

Double-click the public_ htm l folder to go to the place on the server where your web-
accessible files are stored. If you previously installed products such as joom la, wordpress,
phpbb and plogger, you’ll see their folders here.

We’re going to create a new file with which we can start exploring J avaScript. So right-click
on the top folder icon (the one that just consists of 2 dots) and choose New File. Enter
jstest.htm l as the new of your new file and press OK. Verify that PSPad has created the file
on your server, which should appear at the bottom of the list.

Now let’s create a very sim ple web page in that file. Double-click jstest.htm l to open it, an d
verify that the blue title bar of your PSPad window changes from new1.txt to jstest.htm l.
This tells you that the correct file is open, and ready for editing.

Into your new jstest.htm l file, type the following:

<HTML>
<body>
This is a JavaScript test
</body>
</HTML>

When you’re done, go to the File m enu and click Close. Click Yes to confirm . The PSPad
program has now created your jstest.htm l file directly on the web server.

This is a different way of working, com pared with how we did things previously. There’s no
need to upload our test page with FileZilla as it’s already there. There’s no local copy in our
Web Work folder.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
167
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Let’s m ake sure it worked. Quit PSPad and open your web browser. Surf to your site an d
page. In this case it’s www.the-web-book.com/jstest.html, which brings up the
following:

So far so good. But that’s plain HTML rather than J avaScript, and nothing we haven’t seen
before. So let’s rem edy that.

Fire up PSPad again. Connect to the server by clicking the FTP tab, and then the first icon in
the row beneath it. Go into your public_ htm l folder then double-click your jstest.htm l file to
open it.

Now, before the </body> tag, add the following:

<script type="text/javascript">
alert("Hello There");
</script>

When you’re done, save the file to the server (File, Save should do it, as PSPad has its handy
built-in FTP program ). Then quit PSPad, open your browser, and surf to your jstest page
again. You should see the following:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
168
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

In addition to the text on the page, there’s now an alert box with a m essage in it. Not
som ething that HTML can do on its own, but our little J avaScript program enables us to do
clever things like this.

Our 3 lines of J avaScript aren't particularly clever. You should be able to decipher how it
works without too m uch trouble. The line which does all the hard work is:

alert ("Hello There");

The "alert" com m and is the one which creates the alert box.

As I m entioned earlier, J avaScript code co-exists with HTML code in the sam e .htm l file.
The <script type="text/javascript"> tag tells the Web browser that you’re
switching from HTML into J avascript, and the </script> tag then switches back into
HTML again. Note that these tags don’t require sem i-colons as they them selves are HTML
tags rather than J avaScript com m ands.

As already discussed, J avaScript is a client-side language rather than server-side. I’ll repeat
this again, as understanding the difference is vitally im portant. The m ost vitally im portant
point to note is that, because the J avaScript code goes in the HTML file, it’s visible to anyone
who uses the View Source option. If you surf to your jstest.htm l page again and choose the

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
169
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

View, Source option in your web browser, you’ll see what this m eans. The screen will look
like this:

Although J avaScript is very useful, and great fun, the fact that anyone can view your J S code
in the browser m eans one im portant thing: never use J avaScript for anything related to
security or authentication on your site. For exam ple, it’s perfectly possible to create a
password system in J avaScript whereby the visitor is asked to enter a password and is only
shown the "secret" page if he enters it correctly. But if you im plem ent this in J avaScript, it’s
trivial for a hacker to look at your source code, find the bit which effectively says "if
password = ‘sesame’ then let him in", and thus deduce the password.

The way round this conundrum is to use a program m ing m ethod whereby the code for the
program doesn’t appear in the page. That’s what server-side program m ing with languages
such as PHP is all about, which we’ll cover later. For now, though, back to som e m ore
J avascript exam ples.

Edit your jstest.htm l file again, and replace the entire contents of the file with the following:

<HTML>
<body>
The current time is:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
170
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

<script type="text/javascript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</script>
</body>
</HTML>

Save the file, surf to your jstest.htm l page, and you’ll see som ething like this:

Let’s exam ple this in a little m ore detail, and you’ll hopefully realise that J avascript isn’t as
com plex as it m ight first appear. First, here’s the code again, with line num bers to aid the
explanation that follows.

1 <HTML>
2 <body>
3 The current time is:
4 <script type="text/javascript">
5 var d = new Date()
6 document.write(d.getHours())
7 document.write(".")
8 document.write(d.getMinutes())
9 document.write(".")
10 document.write(d.getSeconds())
11 </script>
12 </body>
13 </HTML>
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
171
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Lines 1, 2, 3, 12 and 13 should be fam iliar to you. This is standard HTML code, as explained
in the previous chapters. This includes the "the current tim e is:" m essage, which, as you can
see from the screen picture, gets displayed on th e finished web page just as you’d expect it to.

Line 4 tells the browser that we’re now in J avaScript m ode, and that everything which
follows com prises a J avaScript program rather than norm al HTML. Up until line 11, which
ends the program and tells the web browser that we’re back with standard HTML again.

Incidentally, you can include as m any J S scripts in an HTML file as you wish. J ust use a
<script> tag at the start of each one, and end with </ script>.

Now let’s look at how the J S code works. Line 5 creates a new variable called d, which is set
to the current date and tim e. That’s what the date() function in J S does – it returns the
current date and tim e.

You’ll rem em ber that, at the start of this chapter, I pointed out that J avaScript is a client-side
program m ing language. That is, it runs on the web client (the visitor’s browser) rather than
the web server. By using the date() function, this becom es evident and significant, because
the date and tim e which get returned are those of the visitor’s com puter, wherever that
happens to be. If it’s 7pm on the user’s com puter, the page will display the hour as 19.

Contrast this with what would happen if we had retrieved the tim e from the server. 7pm in
the UK is 2pm in New York. So if the server is in New York and a UK-based visitor checked
the page at 7pm , he’d be told that the tim e is 2pm . Server-side program m ing has its uses, as
we’ll see later, but retrieving the date and tim e isn’t necessarily one of them . At least, not if
you intend to display it for the visitor.

Line 6 introduces the docum ent.write statem ent. Here’s yet another fundam ental concept
that you need to understand if you’re getting into web program m ing. This statem ent inserts
content into the web page, just as if you’d written it yourself. But in this case, we’re not
inserting literal text that we know in advance. Instead, we’re inserting the "hours"
com ponent of variable d.

The rem aining lines, which insert the m inutes and seconds, as well as a couple of full stops,
should be self-evident.

At this point, it’s vital that you understand how docum ent.write works. So take a look at
these exam ples, which both produce exactly the sam e results:

<HTML>
<body>
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
172
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

<script type="text/javascript">
document.write ("Hello")
</script>
</body>
</HTML>

<HTML>
<body>
Hello
</body>
</HTML>

Before we leave this exam ple program , there’s one slight problem that we need to fix. The
m inutes and the seconds don’t look right, because there’s a zero m issing from the front of
each of them . Which is just as we’d expect if, for exam ple, the current tim e is 8 m inutes past
the hour. The date() function is doing what it’s supposed to do, and returning a value of 8 for
the m inutes. If we want to display it in a cosm etically-enhanced way, it’s up to us to add the
necessary code.

So, edit the jstest.htm l file and add the following after line 7:

if (d.getMinutes() < 10 )
{
document.write("0")
}

And add the following after what’s shown above as line 9:

if (d.getSeconds() < 10 )
{
document.write("0")
}

The purpose of this code should be obvious. Before we display the m inutes, we check
whether the value is less than 10 and, if so, insert a zero into the docum ent (ie, the web
page). Ditto for the seconds.

This also shows you how to use the "if…" statem ent in J avaScript. Specifically, note the way
that everything which should be executed if the statem ent is true, goes in curly brackets.

The ability to perform date-based calculations in web pages is very handy. For exam ple, you
could easily write a web page which autom atically alters its appearance according to the
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
173
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

season. J ust create 4 im ages that correspond to spring, sum m er, autum n and winter. Then
use som e J avascript to find out the current m onth and perform one of 4 different <img
src=xyz.jpg> operations, where xyz corresponds to the nam e of one of your im age files.
Alternatively, you could autom atically add a "Merry Christm as" footer to your hom e page if
the m onth is Decem ber and the date is the 25 th .

J avascript and Sem icolons

A word is in order about J avascript and sem icolons. You'll have noticed in the exam ples that
som e lines end with a sem icolon while others don't. In J avascript, each line of code is
considered to end either at the end of the line or at the sem icolon. So if you write each
statem ent on a single line, you don't need a sem icolon. But if you're including m ultiple
statem ents on a single line, they need to be separated with a sem icolon. For exam ple, these
are all valid (I've coloured the sem icolons for clarity):

document.write ("Hello")
document.write ("Hello");
document.write ("Hello"); document.write ("Hello again")
document.write ("Hello"); document.write ("Hello again");

But these are not:

document.write ("Hello") document.write ("Hello again");

document.write ("Hello") document.write ("Hello again")

Em ail Address Obfuscation

Those who send spam em ail for a living need to find a constant source of new em ail
addresses to which they can send their annoying, offensive advertisem ents. They do this in
various ways, one of which is to scour the internet looking for web pages that contain em ail
addresses. It's actually not difficult to do. All that's required is a program to random ly
connect to m illions of web pages and scan the content for an "@" sym bol. Then look for the
nearest space to the left, and space to the right. Everything between those two spaces is
likely to be an em ail address, ready to add to the spam m er's m ailing list.

Because of this, one of the best ways to ensure that your em ail address rem ains relatively free
from spam is to never m ention it on a web page. However, you probably also want people to
be able to contact you by em ail. Thankfully, J avascript provides a great solution to the
problem .

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
174
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Instead of including your em ail address literally on the page, such as r, write a sm all
J avascript program which uses one or m ore docum ent.write() statem ents. For exam ple,
whenever you want to quote your em ail address, use the following on the page instead:

<script language="javascript">
document.write("robert");
document.write("@");
document.write("the-web-book.c");
document.write("om");
</script>

Such behaviour is enough to confuse the vast m ajority of the so-called autom atic em ail
address harvester program s that are continually scanning the web in search of fresh
addresses.

If you want som ething even sm arter, search on line with your favourite search engine for
"javascript em ail address obfuscation". This will lead you to a variety of web sites which
allow you to enter an em ail address and which will then generate a com plex im penetrable
J avascript program just for you which, when run by a visitor's web browser, will show your
em ail address.

Why Upload?

You m ay be wondering why, if J avaScript is a client-side language that gets executed by the
browser, we have to upload pages to the server before we can test them . Can you not just
double-click on jstest.htm l from within Windows and get the browser to execute the local
copy instead, and save yourself the hassle of uploading the file until it’s ready for public
consum ption?

In theory, yes you can. You don’t need to trouble your web server at all when you’re
developing J S pages. However, in practice, m any web browsers don’t like letting you do this.
They regard it as a security risk, on the basis that any J S code in a local page m ust be
m alicious. Internet Explorer versions 7 and 8, for exam ple, will pop up various warnings
asking if you really want to allow this code to run. The only way to stop this is to reduce the
security settings on your browser, which is not wise as it will also reduce your safety on the
web in general.

Therefore, it’s best to always run J avaScript code off a server. But it’s im portant to realise
that this is not because it’s a requirem ent of the language.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
175
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Security and Cookies

Having a fully-functional program m ing language built into a web browser would be a serious
security risk. Being able to find out the tim e on som eone’s PC is perfectly safe, but what if a
m alicious web site tried to read the user’s private files instead, or write a virus to the
com puter? Thankfully, this is im possible, because J S is designed with security in m ind.
Most fundam entally, there are no facilities in the language that allows the program m er, and
thus a m alicious web site, to access any of the files on the visitor’s com puter.

Actually, there’s one exception. Let m e tell you about cookies.

A cookie is a sm all text file which a web site can write to the hard disk of any com puter that
visits the site, and then retrieve at a later date. It’s part of the HTML specification, rather
than anything to do with J avaScript particularly. But it needs a program m ing language such
as J avaScript or PHP in order to operate.

Cookies are rather like pieces of electronic graffiti. They can contain any data which the web
site operator wishes to store, but are lim ited to around 10 0 0 characters each. A site can store
m ore than one cookie on a visitor’s com puter. Crucially, for security purposes, the only site
which can read a cookie is the site that put it there in the first place.

So what are cookies used for? Im agine a public web site where you’re browsing a library
catalogue in search of that excellent volum e, "Defeating The Hacker" by Robert Schifreen. A
couple of days later, you visit the site again and, as if by m agic, you find yourself on the page
about Defeating The Hacker. How did the web site know? Because last tim e you visited, the
site stored a sm all cookie on your com puter called "last-book-visited", the value of which was
set to "defeating the hacker". Or, m ore likely, the value was set to the database record ID or
the ISBN of the book, but that’s not im portant right now. All you need to know is that each
cookie has a nam e (in this case, last-book-visited) and a value (in this case, defeating the
hacker).

Creating and reading a cookie isn’t particularly difficult. There are com m ands built into
J avaScript to do it, and it only takes a few lines of code. A Google search for "javascript set
cookie" or "javascript read cookie" will show you som e exam ples.

Unfortunately, reading cookies in J S is slightly m ore difficult than setting them . That’s
because there’s no specific com m and in J avaScript that says "give m e the value of the last-
book-browsed cookie". Instead, there’s only a com m and which says "give m e a list of all m y
cookie nam es and values". Once you have this list, you then have to search through it in
search of the cookie you want. But, as with everything web-related, a Google search will

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
176
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

bring you som e ready-m ade J S code for searching for a specific cookie am ong the haystack of
data.

One other thing worth knowing about cookies is that each one has an expiry date/ tim e which
is set when the cookie is created. When a cookie expires, it gets deleted from the com puter.
Any attem pt to subsequently read its value will result in the return of nothing at all.

Expiry dates can be: a) a specific date and tim e, eg May 4 th 20 11; b) a duration, eg 31 days
from now; or c) as soon as the user closes his or her browser. If you don’t specify an expiry
date when creating a cookie, option C is the default.

Cookies are a very useful feature, which m ost web developers use on their sites. It allows you
to store inform ation about particular visitors, without forcing them to create an account on
your site and log in. But there’s one golden rule about cookies, which you need to know if
you’re going to consider using them . Although the only web site that can read a cookie is the
one which created it, any user of a PC who has adm inistrator privileges can read and alter
any cookie on his com puter. That’s because a cookie is nothing m ore than a sm all data file,
albeit one with a strange nam e and often stored in a hard-to-find location on the hard disk.
But it’s a file nonetheless, and it can be accessed just like any other. This state of affairs
allows for som ething called "cookie poisoning", which is where the user of a com puter
deliberately changes the value of a cookie.

Let’s re-exam ine the earlier exam ple, where a cookie called last-book-browsed is set to
"defeating the hacker, by robert schifreen". With the necessary software on his com puter, a
visitor to the library site could change the value of the cookie to "defeating the afanc, by
Rohan Stevenson". Having done so, next tim e he visits the library site he’ll be taken to the
page for that MP3 track, rather than the hacker book.

Does this m atter? No, not in the slightest. But it neatly illustrates the golden rule about
client-side web program m ing with J avaScript and HTML. Let’s consider another exam ple, to
see why.

The library web site asks users to create an account and log in, if they wish to purchase
books. The m echanism that they deploy in order to handle the authentication, ie the logging
in, is as follows:

1. Ask the user for their usernam e and password

2. If these details are correct, set a cookie on the user’s com puter called "is_ logged_ in"
with a value of "YES".
3. Each tim e the user wishes to access a protected page, check the value of the
is_ logged_ in cookie and only proceed if its value is YES.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
177
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

A lot of web sites actually use a technique like this. But hopefully you can see the flaw. If a
visitor poisons the is_ logged_ in cookie on his PC and changes the value from NO to YES, he
can bypass all of the site security.

So, by all m eans use cookies for convenience. But don’t use them for anything security-
related, or for things where you need to be confident that the value of the cookie hasn’t been
changed without your knowledge. For such things as that, you need to use server-side
program m ing instead, which is com ing up later.

Morning All!

Here’s another exam ple J avascript program . To use it, copy and paste it into your jstest.htm l
file in place of what’s there already, using PSPad. But before you do, read through the code
and see if you can work out what it does.

<HTML>
<body>
Good
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 12)
{
document.write(" morning ")
}
if (time >= 12)
{
document.write(" day ")
}
</script>
everyone!
</body>
</HTML>

The program displays a m essage, which is m ade up three words. The first word, part of the
standard HTML com ponent of the file, is "Good". The final word, in the sam e fashion, is
"everyone!". In between, the second word is generated by som e J avaScript and is either
"day" or "m orning", depending on whether the tim e on the visitor’s PC is before or after m id-
day. This is a sim ple technique, and one that you m ight want to use on your own pages.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
178
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Getting the Screen Size

Before we finish our brief foray into J avascript, here’s one m ore exam ple. It shows yet
another reason why client-side program m ing, and being able to interrogate various features
of the visitor’s PC and browser, is so useful.

<HTML>
<body>
<script language="javascript">
var w = screen.width;
var h = screen.height;
if ((w=1024) and (h=768))
{
document.write("<img src=normal-pic.jpg>");
}
if ((w > 1280) and (h > 1024))
{
document.write("<img src=bigger-pic.jpg>");
}
</script>
</body>
</HTML>

This is the code for a sim ple web page which contains nothing m ore than a picture. The
clever part, though, is the J avaScript code which looks up the screen width and height of the
visitor’s com puter and then uses docum ent.write to create HTML code on-the-fly.
Specifically, it generates one of two different <im g> tags. If the screen resolution is 10 24 by
768, the norm al-pic.jpg im age gets loaded. But if the resolution is higher, the bigger-pic.jpg
file is displayed instead.

J avascript Toolkits and Fram eworks

If the idea of writing client-side code appeals, but you don’t want to learn a whole new
language, consider using a ready-m ade toolkit or fram ework. There are a num ber of such
products around, that contain a large collection of ready-m ade J avascript effects that you can
call upon within your web pages. One of the m ost popular is jQuery, which you can find at
www.jquery.com. And the best news is that it’s available com pletely free of charge.

The jQuery fram ework is sim ple to use. J ust copy the single jquery.js file to your web server,
then use a couple of lines of code in the <head> section of your HTML page to load it. From
then on, each effect that you want to achieve on your web page is typically just a handful of
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
179
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

lines of special jQuery code. For exam ple, here’s the jQuery com m ands to m ake one
paragraph of text reveal itself by sliding gracefully over another:

$("div.contentToChange p.firstparagraph:hidden").slideDown("slow");
$("div.contentToChange p.firstparagraph:visible").slideUp("slow");

There are lots m ore exam ples and tutorials on the jQuery web site, and it’s definitely worth
taking a look if you want to include visual effects on your web pages.

Incidentally, the above code m akes reference to som ething called the DOM, or the Docum ent
Object Model, which is a way of referring to specific item s on an HTML page. It’s part of the
HTML specification, rather than anything to do with jQuery. The DOM, and m anipulating it
with a technology called Ajax, isn’t currently included in this book but m ay be added in the
future. Contact m e via www.the-web-book.com if you want it to be.

Finding Out More

As you are hopefully discovering, J avaScript is a very useful tool for anyone developing web
pages. Sadly, though, not all of the language is as easy to use as the previous chapter m ight
have led you to believe. A search in your local library or on web sites such as Am azon will
lead you to som e excellent books on J avaScript, som e of which run to 10 0 0 pages or so. It
really is a very com plex, full-featured language. But if you don’t want to go to the trouble and
expense of buying a book, a Google search for "javascript tutorial" will lead you to lots of
useful online resources.

Because J S is all client-side, you can also look at other people’s code too. J ust use the View
Source option in your browser, when looking at any page which you think m ight be using
J avaScript, then search for a <script> tag. In fact, search for <script rather than
<script>, because the "language=javascript part is actually optional (albeit bad practice)
and this will find both cases.

There is also a wealth of ready-m ade J avaScript program s available for download from
various web sites, m any of which are free to use. One of m y favourite sites is
www.hotscripts.com, which has thousands of such program s available. The
www.dynamicdrive.com site is another useful resource, which also offers lots of J avascript
code for free download.

One of the m ost com m on uses for J avaScript is for navigation and m enus. You’ve probably
seen web sites with all sorts of interesting m enu effects, such as drop-down m enus that look
like Windows applications, or m enus that slide around the screen so that, no m atter how you
scroll the page, the m enu is always in the m iddle. Alm ost all of these are done with

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
180
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

J avaScript, and sites like hotscripts will let you download the code to do it. J ust follow the
instructions that accom pany the download, which are norm ally no m ore com plicated than
"copy this block of J avaScript into your HTML file and change the relevant text to custom ise
the m enu entries as you see fit".

Beware, though, of copying large chunks of code out of existing web pages unless you are
certain that it is free to use. A com pany which pays thousands of pounds to have som e
custom m enu code written for its site won’t be too pleased if you start using it on yours too.
J ust because copying the code is technically possible doesn’t m ake it legal.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
181
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Web-hosted Databases with MySQL

In the previous chapter we looked at client-side program m ing using J avascript, which runs
in the user’s web browser. In a later chapter we’ll look at server-side program m ing with
PHP. However, one of the m ost useful features of PHP is its ability to talk to server-based
databases, so we first need to understand such things.

There are various server-based database products which store their inform ation on a server
rather than on the user’s local PC. That server doesn’t necessarily have to be a web server –
the m ain point is that the database is held centrally and then accessed by m ultiple users,
from m ultiple locations.

In the world of databases, the m ost popular language for interrogating a database is
som ething called Structured Query Language, or SQL. Many database products use SQL, or
som ething like it. Most SQL or SQL-like database server products cost serious m oney, such
as Oracle or Microsoft SQL Server. One, though , is totally free of charge, and unsurprisingly
this is the one that m ost web hosting com panies install for your use. The product is called
MySQL (pronounced m y ess queue ell, or som etim es m y sequel). Don’t be put off by the
price tag – MySQL is corporate-strength software, just as happy storing tens of m illions of
item s as a m ere handful.

In this chapter I’ll show you how to m anually connect to your web server via a browser and
create a database. In the next chapter, you’ll see how to access your database using PHP,
which will finally allow you to create web-based applications and database-driven web sites.

You won’t be able to try any of the exam ples th at follow unless your web host offers MySQL.
Alm ost all of them do, though som e m ake a sm all additional charge to enable it. In the case
of the hosting com pany that we’re featuring throughout this book, hostm onster.com , MySQL
is included.

Rem em ber that MySQL is a server-based product, installed on your web server rather than
your local PC. Equally, all of the data in its databases is stored on the server too. To access
the system in order to create and browse databases, you use a web browser. In the case of
m any hosting com panies, and hostm onster is no different, accessing MySQL requires you to
access two different web sites. One location is for creating the initial databases. The other
location is for m anaging those databases, which m eans: creating tables and fields; adding
and deleting data; searching the database tables. The reason for this dem arcation is because
of security considerations.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
182
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Databases, Tables, Fields, Rows and Colum ns

At this point, you’re probably getting confused by the m ention of databases, tables, fields and
so on. So before we continue, let’s clear up the differences. It’s vital that you understand
som e basic term inology in order to avoid confusion later on. Most im portantly, what you
probably think of as a database is actually referred to as a table.

A table is a collection of rows and colum ns. Think of it just like a spreadsheet. You m ight
have a table called "contacts". The colum ns are headed "nam e", "address" and
"phone_ num ber". A row m ight consist of 3 fields (just like spreadsheet cells) containing the
values "J ohn Sm ith", "65 High Street, London", and "0 1234 567890 ".

A database is a collection of tables. Typically, those tables are all related but there’s no rule
that says they have to be. For exam ple, let’s im agine that you’re creating a database
application for a system that m anages the running of a hotel. The database itself m ight be
called "hm s" (for hotel m anagem ent system ). Within the database m ight be 3 separate
tables. One, called "custom ers", contains the contact details of all past, present and future
guests. Another table, called "staff", m ight contain the contact and salary details for staff. A
final table, called "room s", m ight contain details of the bedroom s, with colum n headings
such as room _ num ber, occupied_ by, bed_ type, phone_ num ber, needs_ cleaning,
date_ last_ occupied and so on.

Many hosting com panies lim it the num ber of databases that you can create. Typically, to
between 1 and 5. However, this is not a problem as you are rarely lim ited in the num ber of
tables that you can create within each database. Even if you only have one database, you can
still create hundreds of tables in it. Obviously, being able to group your tables into related
functions by using separate databases is handy, but it’s not essential. If you only have the
one database, and you want to create the hotel m anagem ent system , the standard way of
doing such things is to add a prefix to each of the related tables in order to indicate that they
are linked. So we m ight choose an hm s_ prefix for our hotel m anagem ent system , and
therefore nam e the tables hm s_ room s, hm s_ guests, hm s_ staff and so on. Other tables that
are connected to other system s would have their own prefix.

Norm alization

While we’re discussing MySQL term inology, there’s one m ore thing that you need to know
before we can start creating databases and tables for real. It’s nothing to do with MySQL or
web sites specifically, but is m ore to do with basic com puter science and the creation of any
com puter database.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
183
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

The golden rule of database design is: "don’t store anything m ore than once. Instead, store it
just once, give it a unique reference num ber, and refer to it by that num ber in future". Why?
Because it’s a m uch safer way to ensure that the database content rem ains accurate. If you
need to change som ething, you only need to change it once, and all references to it are
autom atically up to date. Let m e give you an exam ple.

Consider our hotel m anagem ent system . There’s a table called "room s", with colum ns called:

room _ num ber

occupied_ by
bed_ type
phone_ num ber
needs_ cleaning
date_ last_ occupied

There’s also a "custom ers" table, with colum ns called:

nam e
address
phone_ num ber

Within the custom ers table is J ohn Sm ith, and he’s currently resident in room 225. How do
we represent this in the database? The obvious answer is to add him to the custom ers table
and then create a new row in the "room s" table, as follows:

Room_number Occupied_by Bed_type Phone_number Needs_cleaning Date_last_occupied

225 John Smith Single 7225 NO N/A

However, this breaks our golden rule of only storing som ething once. J ohn Sm ith appears in
both the "custom ers" table and the "room s" table. It’s a waste of space storing this
inform ation twice. Also, if J ohn Smith calls the hotel and says that we’ve spelled his nam e
wrong on his bill (it should be J on), we’d have to search every table looking for instances to
change.

There’s one further problem , too, which is even m ore serious. What happens if a new guest,
also called J on Sm ith, checks into the hotel? There are now 2 J on Sm iths in the custom ers
table, but there’s no clue in the "room s" table as to which of them is currently in room 225.
Which will play havoc with the billing system .

So here’s how we do it, according to the golden rule of giving everything a reference num ber
and then referring to things by their num ber. We create the custom ers table like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
184
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

id
nam e
address
phone_ num ber

The difference is that we’ve added a reference num ber colum n. We’ve called it "id" rather
than "reference num ber", sim ply because that’s the convention that m ost MySQL database
designers use, but it’s not essential.

So now, J on Sm ith’s entry in the custom ers table m ight look like this:

Id Name Address Phone_number

64 Jon Smith 65 High Street, 01234 567890
London

And the reference to him in the "room s" table looks like this:

Room_number Occupied_by Bed_type Phone_number Needs_cleaning Date_last_occupied

225 64 Single 7225 NO N/A

No longer is room 225 occupied by J on Sm ith. It’s now occupied by guest num ber 64. And
by checking the custom ers table and searching for the person whose id is 64, we know
exactly which J on Sm ith is in the room . Furtherm ore, if J on changes his nam e back to J ohn,
all we need to change is the single reference in the custom ers table. All other references to
him in the room s table, the billing table, the restaurant bookings table, and so on, will only
refer to him as custom er 64 and not by nam e.

So now you know why large com panies always want to know your custom er reference
num ber when you telephone them with an enquiry!

Designing databases in this way, ie with inform ation referenced by a unique num ber, is
known as norm alization. It’s often harder than it looks, but is well worth the effort invested.
It ensures that your database, ie your collection of related tables, is working at peak
efficiency.

As it happens, we've already m issed a trick in the design of our hotel system . You'll see that
there's a date_ last_ occupied field in the room s table. But why do we need this? Presuably,
hotel bookings will be held in a "bookings" table which has colum ns called id, custom er,
arrival date, departure date and room num ber. So in order to find out which guest last
occupied a room , we don’t actually have to store any data at all. We just search the bookings

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
185
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

table instead. It's this sort of planning that takes just seconds to think about when you're
designing a system , but days or weeks to im plem ent if you discover, towards the end of the
project, that you've been working with an inherent design flaw. So, always give lengthy
consideration to your database design before you start writing any program s.

MySQL is known as a relational database. Hopefully you can now see why. Within the
database is a collection of tables, and the inform ation in those tables is often related. In the
case of our room s table, for exam ple, there’s a relationship with the guests table. We’ll
return to this subject when we com e to create further database tables for our hotel
m anagem ent system in future chapters.

Referential Integrity

A norm alised database, where each type of data item is held in a separate table with a unique
id, m akes a great deal of sense. It's by far the m ost efficient way to store and m anage
inform ation, whether you're designing a bookin g system for a 10 -room hotel or an inventory
m anager for a web site the size of Am azon. However, it's im portant to ensure that you don't
end up with tables that refer to non-existing inform ation. In database term inology, this
m eans m aking sure that you m aintain the referential integrity.

Consider the exam ple above, where room 225 is currently occupied by guest num ber 64.
Five years from now, you notice that J on Sm ith has stopped visiting your hotel so you decide
to rem ove him from the custom er database. Or perhaps he calls the hotel and asks to be
taken off the m ailing list, and you do this by sim ply rem oving his entry from the custom ers
table.

As far as the custom ers table is concerned, there's no problem . Where once was record
num ber 64, now there's nothing. But custom er 64 is still referred to in the bookings table,
and probably som e other tables too. Which is going to cause problem s. For exam ple, when
you run the "show m e everyone who's stayed in room 225 over the past 2 years" report, and
the system tries to find out the nam e and address of the person whose custom er id is 64,
there will be nothing on file. The integrity of the relational database has failed.

It's im portant that you handle such instances, and that you handle them correctly. In the
case of the deleted custom er, you can do one of three things:

1. Delete the custom er from the table. In addition, also delete every affected row in
every other table. Which in this case would m ean deleting all of custom er 64's room
bookings, restaurant reservations, custom er com m ents, and whatever other tables
have a custom er_ id reference. The problem here is that you lose valuable data.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
186
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

2. Replace the contents of custom er's record with text such as "deleted". Leave the id
num ber in place, but change the firstnam e, surnam e, phone num ber, address etc.
Now, all your reports will still work correctly but, as per Mr Sm ith's wishes, his
inform ation has been deleted from your system .

3. Add a field to the custom ers table called, say, is_ live, which specifies whether this is a
live custom er record or not. Keep it set to Y for all current custom er records. To
delete a custom er, you don't rem ove anything from the custom ers table. Instead, you
just set the custom er's is_ live flag from Y to N. Now, in the code that produces your
reports, you check whether a custom er is live or not and, if not, you display "non-live
custom er" rather than the real data. The old data is still there, but you sim ply choose
not to display it. Bear in m ind, though, that this can som etim es fall foul of data
protection legislation in som e countries, which states that you should delete personal
custom er inform ation if you no longer need it or if the custom er asks you to. Merely
m arking it as non-live doesn't count as having deleted it.

Creating A Database

Now that you understand the basics of relational database design, we can log onto the web
server and actually create a database. Throughout the rest of this book, in the chapters that
discuss MySQL and PHP, we’ll continue building and enhancing HMS, our Hotel
Managem ent System , as our exam ple database application. If you have a different project in
m ind, feel free to adapt the exam ples as you go. However, you will probably find it easier to
start by following the exam ples as they appear. Once you’re happy that the HMS system is
working properly on your server, you can then adapt it into whatever you want.

To create a MySQL database, you’ll need to find out how this is done on the particular
hosting platform that you’re using. In the case of Hostm onster, it’s done through the
Databases section of the control panel. So we start by logging into the control panel at
hostm onster.com , with our usernam e of thewebbo and the relevant password. This brings
up the control panel, the relevant part of which is:

To create a database, click on the MySQL Databases link. You’ll see the following screen:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
187
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

As you can see, I currently have two databases created (thewebbo_ cm s and thewebbo_ rs44).
Hostm onster adds a prefix to its databases, based on the usernam e of the hosting account
they belong to, hence thewebbo_ at the start of each database nam e. The thewebbo_ cm s
database is, if you have been reading this book from the start, the one we used in the earlier
chapters when we installed J oom la, WordPress, phpBB and Plogger. Using table prefixes,
we installed all of the products into the sam e database.

We need to create a new database for our hotel m anagem ent system . We’ll call it hm s for
sim plicity. So, in the Create New Database section, type hm s and click Create Database.
You’ll see a confirm ation m essage:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
188
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

And that’s all there is to it. But note that the database nam e is thewebbo_ hm s rather than
plain hm s, for reasons stated earlier. You’ll n eed to know the nam e of your database later,
when we start to write PHP program s that access it.

With the database created, we have no further need for this part of the control panel. So
click the Hom e link at the bottom of the screen to return to the m ain control panel screen
and the full m enu of database-related things.

The third option says "phpMyAdm in". This is a web-based program for m anaging MySQL
databases on a rem ote server. It’s a free, open source application that just about every web
hosting com pany offers for use by custom ers (ie you, rather than the people who visit your
web site). It lets you create tables within databases, and it lets you create and m anage the
colum ns and rows within those tables. The only thing that it can’t do (at least, not in a way
that satisfies the security requirem ents of m ost hosting com panies) is to create the databases
them selves, hence the previous step.

From now on we’ll use phpMyAdm in to m anage our new thewebbo_ hm s database and to
create the tables in it. Later on, we’ll write som e PHP code which will use those tables to
create a sim ple web-based hotel m anagem ent application.

You’ll be using phpMyAdm in extensively while you develop web sites, so it’s a good idea to
grab its URL from the control panel and save it as a shortcut or favourite. You’ll still need to
enter your control panel usernam e and password each tim e you access it, but at least you’ll
be able to go straight to the program without first logging in to the control panel. To do this,
just surf to phpMyAdm in as norm al and then add the address to your web browser’s
favourites. Or copy the URL, and paste it into whatever web bookm ark m anager you prefer
to use. Or you could even save it as a shortcut on your desktop, for easy instant access.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
189
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Port Problem s

In theory, because phpMyAdm in is web-based, you should be able to reach it from any
com puter that has internet access. However, in com m on with m any other hosting
com panies, hostm onster runs its installations of phpMyAdm in on a non-standard port.

Data travels across the internet using a system called TCP/ IP, and inform ation travels on
different channels. These are known as ports, and are rather like radio frequencies or TV
channels. Web traffic (ie, inform ation that travels between web servers and the people who
view the pages that are stored on them ) generally uses port 80 . FTP uses ports 2o and 21.
Em ail generally uses port 25, and so on.

Most firewalls always allow traffic on these "com m on ports" to flow freely. But they also
often block traffic on uncom m on ports. So if your host runs phpMyAdm in on port 20 83, for
exam ple, as Hostm onster does, then it’s possible that it will be blocked. This doesn’t m ean
that any of your visitors will ever have problem s accessing your web sites because they won’t
be using phpMyAdm in at all (at least, you’d better hope not!). But it does m ean that, for
exam ple, if you want to m anage your databases from the office, or an internet café, or your
school or college, you m ight not be able to. In which case you’ll need to wait till you get
hom e, unless you can persuade the person who m anages your firewall to open the required
port for you.

Using phpMyAdm in

Click on your new shortcut, or go via the host control panel if you wish, and you’ll see the
phpMyAdm in hom e page which looks like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
190
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Depending on which version of phpMyAdm in your hosting com pany runs, and the security
perm issions that it applies to your account, the screen m ay look slightly different, but the
basic structure will be the sam e.

On the left hand side of the screen, in the blue panel, are your databases. In the exam ple
above, there are 4. One is called inform ation_ schem a, and the num ber in brackets tells you
that it contains 21 tables. There are also databases called thewebbo_ cm s, thewebbo_ hm s,
and thewebbo_ rs44. In this particular case, the _ rs44 one is som ething that I have been
testing, so you can ignore it. The _ cm s one is a rem nant of our earlier experim ents with
J oom la, Plogger, phpBB and the like. The _ hm s one is what we’re interested in right now, as
this is what we’ll be using throughout the rest of this book as we build our rudim entary hotel
m anagem ent system .

The inform ation_ schem a database is part of the inner workings of MySQL on your hosting
account. Som e hosts allow you to see it, whereas others don’t. If your host does, feel free to
browse around it if you’re curious, but don’t change or delete any of the inform ation in it. If
you do, you face the serious risk of breaking your hosting account or at least your ability to
use MySQL.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
191
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Creating The Custom ers Table

The first stage in building our hotel m anagem ent system is to create the "custom ers" table.
Once we’ve done this, we’ll then use PHP to create a web site that allows hotel staff to create
new custom ers and add them to the database. We can then use those custom ers to create
bookings, and slowly build up our system .

Although it’s possible to write PHP code which creates database tables (assum ing the hosting
com pany doesn't specifically block you from doing so), m ost web developers don’t bother.
Creating the tables for your database is som ething that you’ll only ever do once, so you m ight
as well let phpMyAdm in do it for you. If you m ake a m istake, or if you subsequently want to
add new colum ns to the table (eg, you want to store a custom er’s car registration num ber),
phpMyAdm in allows that too.

Fire up phpMyAdm in and get to the front screen, as shown above. Click on the _ hm s entry
in the left hand panel, to view the thewebbo_ hm s database. There are currently no tables in
the hm s database so the screen will look like this:

We’re interested in the "create new table on database thewebbo_ hm s" bit. Type the nam e of
the table (custom ers) into the box. We’ll start with 7 fields, so enter that num ber into the
box and click the Go button. You’ll see the following:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
192
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

You now have 7 lines (one for each field) into which you can enter the field nam e, its type, its
length, and a few other things too.

As you can see from the list of possible field types that I’ve clicked on in the top field, there
are lots to choose from . It’s im portant that you choose the right field type for each field
(colum n) in your table. This generally m eans m aking two decisions. First, whether or not
the content of that field will be purely num eric. Because if it will be, choosing one of the
num eric field types will result in a database that can be searched and indexed m ore
efficiently. The second decision is for when you decide that the field won’t be purely
num eric, but will also hold alphabetical text. In which case you need to specify the
m axim um length of any one field. I’ll explain m ore about this as we create the custom ers
table.

The field nam es are going to be:

id
firstnam e
surnam e
title
address
phone

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
193
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

em ail

So type those into the first colum n of each row on the screen. Note that we use all lower-case
letters. That way, we won’t have to worry about rem em bering whether a field is called
FirstNam e, firstnam e, Firstnam e or FIRSTNAME when we’re trying to access it later on.

Before we choose the "type" for each field, it’s im portant to consider for a m om ent our choice
of fields.

The "id" field exists because of our desire for norm alization, as m entioned on page 183. Each
tim e we refer to a custom er within any table other than the "custom ers" one, we’ll do so by id
num ber rather than nam e.

You’ll see that we’ve split the custom er’s nam e into 3 fields, nam ely firstnam e, surnam e and
title. So Mr J ohn Sm ith will actually be stored as a firstnam e of J ohn, a surnam e of Sm ith,
and a title of Mr. Why do we do it like this? Because, thinking ahead, we m ight want to use
our hotel m anagem ent system to create m ailshots, and we can easily construct the first line
of the m ailshot by printing the word "Dear" followed by the custom er’s title and then their
surnam e.

The address, phone and em ail fields are fairly obvious. Although, if you were creating this
project "for real", you m ight want to consider splitting the address into 4 or 5 separate fields,
and perhaps a separate one for the postcode or zip code. Why? Because you m ight want to
create reports or m ailshots based on specific postcodes, and it’s m uch easier to search a
database table by one specific field (eg, show m e all the custom ers whose postcode starts
with TN) rather than searching within a larger non-specific field (eg, show m e all the
custom ers where the letters TN appear som ewhere within the address field).

Don’t underestim ate the value of thinking ahead in this way. When you’re planning any
database, the m ore thought and consideration you give to the way that your data is stored
BEFORE you start writing code and firing up phpMyAdm in, the easier the task of creating
the system will be. The decision to store a custom er nam e in 3 separate fields is trivial to
im plem ent at this stage. If you were to go ahead with a single field called "nam e", then write
half the system , and then decide that actually it would be better to store the nam e in 3 parts,
it m ight take m any days or even weeks to rewrite all the relevant parts of the system .

Anyway, back to our field creation screen. Hopefully you’ve typed in the 7 field nam es. Now
to choose their types.

For the id field, choose MEDIUMINT. An INT field stores an integer, ie a whole num ber.
You can’t store text in there, and you can’t store decim al num bers such as 3.5. But we’ll use
whole num bers for custom er id’s so that’s fine. Why m edium rather than a TINYINT or
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
194
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

BIGINT or plain INT? Because each can store a different range of num bers. TINYINT can
only store num bers between 1 and 255, which clearly isn’t enough to give every m em ber of a
hotel’s custom er database a unique num ber. MEDIUMINT stores up to 16 m illion (or -8m
to +8m if you’re going to want negative num bers in there too, which we don’t). And that’s
plenty for us. If we need to change it later, we can do so without losing data.

Firstnam e, surnam e and title can all be TINYTEXT, which allows up to 255 characters of
text. The address m ight conceivably be too long for this, so we’ll use a TEXT type, which
allows up to 65,0 0 0 characters or so. Not that we’ll ever use that m any, and nor will MySQL
require 65,0 0 0 characters of disk space for every field in the database. But the space is there
for the database to be sufficiently expanded should we use it.

TINYTEXT will also suffice for the phone and em ail fields.

There’s one m ore thing we need to do. Scroll the screen sideways and you’ll see som e m ore
options for each field:

In the "Extra" entry for the id field, and only for this field, choose the auto_ increm ent
option. Each tim e you create a new row in the table, ie a new custom er record, MySQL will

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
195
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

autom atically generate a new unique id num ber. It saves you having to m anually write code
to look for an unused id num ber.

As for all the other options, such as Attributes, Null, Default and so on, you can leave these
alone. They are not required here. Typically, all you need is a field nam e, a field type, and
possibly an auto_ increm ent on your id field.

When you’re done, click on the Save button an d you should see a sum m ary of the table that
has been created. That’s it. The job is done.

In the left hand panel, click on the database nam e (thewebbo_ hm s in this exam ple). You will
now see a list of all the tables in that database, of which there is currently just one. So click
on "custom ers" and you’ll see the structure of the table like this:

Get used to this screen, as you’ll be using it a lot when you start to becom e a regular user of
phpMyAdm in. The "structure" tab shows you the field nam es and types. The other tabs that
we’ll use later are "browse" and "insert", which let you look at the data and create new rows.

Before we go any further, there are two fundam ental things that you need to m ake sure you
understand. First, the database and all its data resides on the web server. There’s nothing

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
196
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

on your com puter. So the data is accessible, via the web, from any com puter that has
internet access.

Second, everything we’re doing so far is concerned with setting up the basic database and
structure. We’re using phpMyAdm in to do so because it m akes the job easy. The visitors to
our site will never see phpMyAdm in, or any of the screens that we’ve used so far. They will
interact with the database using som e m uch friendlier screens, which will com prise the hotel
m anagem ent system proper. The only reason we’re not using those screens is because we
haven’t written them yet! That’s where PHP will com e in, later on.

Inserting Som e Data

The custom ers table is now created. Let’s use phpMyAdm in to insert som e custom er records
into it. Later, when we’ve written the necessary PHP code to im plem ent this part of our hotel
m anagem ent system , we’ll be able to do it that way. But for now, this private "back door"
route via phpMyAdm in will suffice.

In the left hand panel, click your database and table. Then, in the top row of tabs, click on
Insert and the screen will look like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
197
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Fill in the right-hand boxes for each field, as shown above. Ignore the "function" boxes as
these aren’t required.

Note how I haven’t filled in the id box. This is an auto-increm ent field, so MySQL should
take care of this. We’ll find out, in a m om ent, whether it does.

When you’ve com pleted filling in the fields, click the Go button underneath the final field.
Then click the "browse" tab at the top of the screen, and you should see this:

It worked. In the centre of the screen you can see the row of data that you entered into the
database. J ohn Sm ith’s inform ation, com plete with an autom atically-generated id of 1, is
there.

Before we declare this task finished, let’s add another row. Click the "Insert" tab again, and
create another custom er. Then click Browse to ensure that it’s been inserted correctly, as is
shown here:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
198
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Our two rows have been given id’s of 1 and 2. This is as you m ight expect. However, the
MySQL database system m akes no guarantees about the pattern of autom atically-generated
num bers, except that they will be integers and they will be unique. For exam ple, if we have 3
rows in the table, with id’s of 1,2 and 3, and then we delete the second entry, the two
rem aining entries will have id’s of 1 and 3. When we insert another row, will it be given an id
of 2? Or will it be allocated a 4, on the basis that this is the lowest num ber that hasn’t yet
been used?

The answer is: no one knows. Either is a possibility, because "1,2,3" and "1,2,4" both fit the
rule of being integers and unique. Sure, there’s a gap in the second set, but MySQL never
guarantees that there won’t be gaps. This is im portant because, for exam ple, you m ight want
to produce a report which tells the user how m any custom ers are on file in the database.
Clearly you can’t do it by searching for the highest-num bered id. Instead, you have to ask
MySQL to tell you explicitly how m any rows there are in the table. Not difficult, so long as
you know what question to ask.

Querying the Custom ers Table

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
199
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Before we leave phpMyAdm in and the creation of MySQL databases and tables, there’s one
m ore topic that we need to cover. This is actually crucially im portant, although it m ight not
seem so right now.

What we’re about to do is to query the custom ers table in order that MySQL will return the
data we ask for. The reason that this concept is so im portant, is because the techniques we
use here are the sam e ones we’ll use later within our PHP code.

Click on the SQL tab and you’ll see the following:

SQL stands for Structured Query Language. It’s an entire com puter language that was
specifically invented for querying databases using an English-like syntax.

In the query box which currently says SELECT * FROM ` custom ers` WH ERE 1, change this
to:

select firstname from customers

Then press the Go button and you should see:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
200
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Congratulations, you’ve just executed your first SQL query.

select firstname from customers should be fairly self-explanatory. You’ve told

MySQL to select a specific field (firstnam e) from a specific table (custom ers). As you can see
from the resulting screen, this is exactly what it has done. You now have a single colum n of
results, nam ely all of the first nam es (J ohn and J ane).

There’s no guarantee as to which order the data will com e out. Som etim es, as here, the
nam es will appear in the order that they were originally entered, but this should not be relied
upon. If you want to specify an order, you need to use the ORDER BY com m and as part of
the query. Like this:

select firstname from customers order by firstname

So now our SQL com m and tells the database what field we want (SELECT), from what table
(FROM), and how to sort the results (ORDER BY). In this case, we want to order by the
firstnam e field. We could just as easily have used "order by em ail" or "order by surnam e" if
we wanted to sort them in that way.

Let’s retrieve the full nam es (title, firstnam e and surnam e) of all our custom ers, using:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
201
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

SELECT title,firstname,surname FROM customers

And here’s what com es back:

Note how we specify the fields we want to return, in the order we want them . So now we can
see that we have 2 custom ers, nam ely Mr J ohn Sm ith and Mrs J ane Allen. Not quite a
proper hotel m anagem ent system , but at least we have a database that we can soon start to
access via PHP.

If you want to select all of the fields in a row, just use an asterisk like this:

SELECT * FROM customers

Which will produce:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
202
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

The final com ponent of the SELECT com m and that you need to know is WHERE. Have a
look at the following MySQL com m and:

SELECT * FROM `customers` WHERE id = 2

As you m ight expect (try it!), it returns the following:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
203
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

It brings back the row whose id is 2.

Now try:

SELECT * FROM customers WHERE firstname="John"

Here’s what gets returned. As you m ight expect, it’s J ohn’s record:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
204
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

One m ore exam ple:

SELECT firstname,surname FROM customers WHERE surname="Allen"

And here, as you have probably worked out by now, is what com es back:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
205
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Note how "Allen" and "J ohn" need quotes around them when used as part of a WHERE
clause, whereas 1 (as an id) doesn’t. That’s because firstnam e and surnam e are text fields.
The id field is a num eric field, which doesn’t. If you search for the record which has an id of
"1" rather than an id of 1, nothing will be found.

For this reason, som e MySQL program m ers like to include a clue as to the type of a field,
within the nam e of the field itself. For exam ple, instead of creating a field called firstnam e,
they’ll create one called tt_ firstnam e, where tt stands for TinyText. And instead of id they’ll
use int_ id. That way, it’s pretty obvious that:

select * from customers where int_id = "72"

isn’t going to return any results, because int_ id is a num eric field and so the 72 shouldn’t be
in quote m arks.

Whether you adopt this style is entirely up to you. Personally, I don’t. Instead, I try to
ensure that I use text fields for everything except id’s. Then, I know that every field nam e
except id needs to be in quotes.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
206
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

So now you know the basics of the SELECT com m and, to return one or m ore rows from a
table based on a particular criterion. As you m ight expect, the SELECT com m and is m uch
m ore powerful than this, and the official docum entation for it runs to dozens of pages. But
this will do for now.

With this basic knowledge of MySQL and the SELECT com m and, it’s tim e to m ove on to the
m ost advanced section of this book, nam ely the PHP program m ing language. Which, as
you’re about to see, m akes it possible to do just about anything on a web page. If you’ve ever
wondered how sites such as eBay and Am azon are created, or program s such as J oom la,
you’re about to find out.

Don’t delete your hm s database from the server, by the way. You’ll need it later on.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
207
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Introducing PHP
On page 166 I talked about J avascript. This is a client-side language that allow you to write
program s which get run in, and by, the web browser of som eone who visits your site. It’s
now tim e to leave client-side languages behind, and talk about server-side program m in g
instead.

Like J avascript, server-side languages allow you to write program s that add features and
functionality to web sites. But, as the nam e should hopefully suggest, the big difference is
that server-side program s are run by, and on, the web server itself. The visitor's web browser
doesn’t get involved, except to display the output of the program .

There are m any server-side program m ing languages around, all of which do pretty m uch the
sam e thing. The one you decide to use will m ostly depend on what you feel m ost com fortable
with, and what’s offered by the hosting com pany that runs your server. Unless you run your
own web server you’ll be lim ited in the server-side languages that are available to you, as
hosting com panies won’t allow you to install your own.

Am ong the m ost popular server-side languages are PHP, Perl, Ruby, ASP.NET, Python, J ava
and ColdFusion. Som e are proprietary, such as ASP.NET and ColdFusion, while Perl and
PHP have the advantage of being open source, free, and available for servers that run either
Linux or Windows. Consequently, they are offered by alm ost all web hosting com panies. Of
the two, PHP is easier to learn than Perl, and m ore widely used. At the tim e of writing,
hotscripts.com , one of the best places to find ready-m ade web program s, offers 4,0 0 0 Perl
program s and 15,0 0 0 PHP ones for download.

PHP, which stands for PHP Hypertext Processor, is the m ost widely used server-side
language in the web world, so that’s what we’ll be using. And yes, the first "P" does indeed
stand for PHP. Com puter people are like that, som etim es.

Don’t Panic!

The rem ainder of this chapter is all about program m ing. If you’ve ever done com puter
program m ing before, in languages such as Basic or C or Visual Basic, then you should feel
right at hom e. If you haven’t, don’t worry. This section is written for non-program m ers so
hopefully everything will m ake sense. You will, though, find that it helps to put aside this
book occasionally and practice on your own. As with any language, foreign or com puter,
practice m akes perfect. Or at least better.

As you start to discover the power of PHP, you’ll probably want to start working on a "real"
project alongside our exam ple hotel m anagem ent system . Maybe it’s a project that you’ve
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
208
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

always wanted to write but have never known how. Or m aybe it’s som ething that only
entered your m ind as you were reading this book. But it’s a project nonetheless, and you
reckon you could be the next Mr Facebook or Mrs Ebay.

Although PHP is easy to learn, it takes tim e to learn how to do it right. And in web
program m ing, "right" generally m eans "secure" and "fast". If you don’t do it "right", you’ll
end up with a site that is easy for people to hack into, or which takes 15 m inutes to produce a
database report that should take less than half a second.

So here’s m y advice, which I strongly suggest that you follow. Start off with the hotel
m anagem ent exam ples that follow. By all m eans use them as the basis for further
experim entation, to learn m ore about PHP and web program m ing. But give it a couple of
m onths before you start work on The Big Project. Otherwise, at best, you’ll end up
disappointed, with a system that doesn’t do what you’d hoped it would. At worst, you’ll end
up with som ething that you’re convinced is goin g to be the Next Big Web Thing, only to have
your hopes dashed when a student on another continent hacks your custom er database.

Oh, and if all this m akes you want to start looking for the chapter on PHP security, there isn’t
one. Building secure web applications isn’t about reading the chapter on security and
applying it to what you’ve already learned. It’s about doing everything in a secure way from
the start. So rather than teach you about security now, or at the end, I’ll actually cover
security at every point where it is relevant. Which, as you’ll soon realise, is just about
everywhere.

Your First PHP Program

A PHP program is just a text file, like any other Web page. Most HTML editors don’t know
about PHP, though, so it’s best to use one that does. That way, the editor will autom atically
alert you if it notices you’ve m ade an error in the code that you’re typing.

Thankfully, PSPad, which we used for creating our J avascript code, also knows about PHP.
Hundreds of thousands of people across the world use PSPad as their PHP editor, so that’s
what we’ll use too.

While J avascript files tend to have a .htm l or .htm extension, just like standard web pages,
PHP files tend to end with .php instead. This isn’t a hard and fast rule. Som e web servers
will allow php code to exist within .htm l files, but m any insist on you ending all your files
with a .php extension. So, to keep things sim ple and consistent, we’ll stick to a rule of always
using a .php extension on any file that contains PHP code.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
209
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Right, the tim e has com e to write a PHP program . If you haven’t already installed PSPad,
you’ll need to follow the instructions on page 162 and do so. With PSPad installed, launch
the program . Click the FTP tab on the left hand side of the screen, then click the Connect
FTP icon in the row below it, and choose your site nam e from the list that appears. Then
double-click on the public_ htm l folder, or whatever your host uses to store your web-
accessible files.

In the white space below the list of files and folders on the left hand side, right-click and
choose New File. In the box where you’re asked to choose a file nam e, type dem o.php and
click the OK button. You should see your new file appear in the list in the left-hand panel.

Now double-click your dem o.php file to open it for editing. Look at the blue title bar at the
top of the screen, the text of which should end with dem o.php rather than new1.txt to
indicate that you’re editing the correct file. If not, double-click it again.

You can now start typing your first PHP program . Enter the following:

<?php
echo "<HTML>";
echo "<body>";
echo "This is some PHP";
echo "</body>";
echo "</HTML>";
?>

The screen should now look like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
210
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Save the file to the server (rem em ber PSPad has built-in FTP so there’s no need to upload
anything m anually) by choosing Save from the File m enu. After a couple of seconds, when
the file is saved, you can close PSPad.

Rem em ber that, unlike J avascript, PHP code gets run by the web server, so you can’t write
and test PHP program s unless you’re connected to a Web server. Hence the need to upload
our program .

Let's see if everything worked. Open your web browser and surf to the page you just created.
In our case that’s www.the-web-book.com/demo.php and the end result is:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
211
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Excellent. It worked. The web server recognised and ran our program .

If you get an error m essage about syntax errors, go back and edit the file, and check your
typing carefully. If you just see the PHP code itself, check that your web server really does
support PHP and that it is enabled on your hosting account. It’s possible that you have to
specifically request it, though this is unusual.

Although this is a very sim ple PHP program , it does dem onstrate a num ber of key points
about the language.

First, you’ll notice that the code starts with <?php and ends with ?>. These special m arkers
tell the web server where PHP code starts and ends, rather like the <script> tag that
m arks the start of som e J avascript. Earlier versions of PHP allowed sim ply <? at the start of
a script, but later versions insist on the full <?php instead. So even if you see web-based
tutorials or books that tell you it’s OK to use the shorter <? at the start, it’s not. Get into the
habit of using the full version and you’ll be better off.

Next, notice the "echo" com m and. This is rather like docum ent.write in J avascript, in that it
creates content which is sent to the visitor’s web browser to display. In this case, we’ve
created an entire HTML page consisting of <HTML> tags, <body> tags, and som e text. We
have, in web developer term inology, created a dynam ic web page. There is no .htm l file on

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
212
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

the server that contains this page. Instead, it has been dynam ically created "on the fly", and
sent to the visitor’s browser.

Not particularly im pressive, sure, but I’ll show you som e m ore powerful exam ples shortly.

Note that you don’t have to stick to pure PHP code within a php file. You can m ix HTML and
PHP code within the sam e file. For exam ple, we could just as easily have written our
program like this:

<HTML>
<body>
<?php
echo "This is some PHP";
?>
</body>
</HTML>

Here, we stay in HTML m ode to create the first two tags. Then we switch to PHP m ode to
generate the text, and then back into HTML m ode to generate the two closing tags.

As you start to write longer PHP program s, deciding on which way to work is im portant.
There’s no right or wrong way – just do as you prefer. Som e people don’t like the idea of
flipping in and out of PHP m ode 20 or 30 tim es within a com plex file, whereas others prefer
to stick in HTML m ode and only use PHP m ode where it m atters. You’ll see m ore about this
later, but for the m om ent you need to bear in m ind that there are two ways of doing things.

There’s one m ore vital thing you need to understand about PHP, and indeed every server-
side program m ing language. Assum ing your web browser is still open, hit the View Source
m enu option and look at the HTML source code of the page. It looks like this:

Note how you can see the o u tp u t of the PHP program , and n o t the PHP program code
itself. The program was on the Web server, and the "echo" com m ands forced the HTML tags
and other text to be sent to your browser. At no tim e does the PHP code itself leave the
server, and at no tim e is it visible to the site visitor.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
213
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This is crucial to understand. It’s the difference between server-side and client-side
program m ing. And it m eans that you can safely use PHP to im plem ent security-related
features, because no one can tam per with the code.

If we’d written this program in J avascript, as a series of docum ent.write statem ents, using
the View Source option on our browser would have displayed the J avascript program code.
But in this case, the browser never gets to see the code because it has already been run by the
server.

One final point. Why are there no blank lines between each of the HTML tags, and
before/ after the text? Shouldn’t the dynam ically-generated HTML code look m ore like this,
rather than being all in one line?:

<HTML>
<body>
This is some PHP
</body>
</HTML>

The reason that there are no "carriage return" characters in our dynam ically-generated
HTML, is because our PHP program never created any. Sure, we put each line of PHP code
on its own line, but that won’t cause carriage return characters to be sent to the browser.

It doesn’t actually m atter. Browsers don’t insist on HTML code being neatly arranged in
lines – it’s only done for the benefit of hum ans who m ight want to read the code. But if you
did want to generate neat, line-spaced HTML, you’d have to adjust your PHP code
accordingly.

Needless to say, there’s m uch m ore to PHP than the "echo" com m and. Like J avaScript, PHP
is a hugely com plex and capable language, which provides all of the tools you need to write
sites such as eBay or Am azon. Perhaps the greatest benefit of knowing how to do server-side
program m ing is being able to interact with a MySQL database, and we’ll com e to this soon.
For now, though, the following chapter looks at som e of the other things that PHP can do.

If you want to dive straight into PHP and experim ent som e m ore, the best resource is the
official www.php.net site on the Web. Although the site can be confusing, it does contain
everything you’ll ever need to know. Perhaps its best feature is that anyone can add their
own com m ents and exam ple to the online m anual.

To find out about any com m and in PHP, just go to www.php.net/xxxx, where xxxx is the
com m and you want to know about. Alternatively, if you don’t know what com m and to use, a
Google search is a good place to start. For exam ple, I m entioned earlier that our code didn’t

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
214
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

insert carriage returns in the dynam ically-generated HTML. Google for "php insert carriage
returns" and you’ll find out how to do so.

Don’t worry about relying on the online docum entation and Google. Even professional PHP
program m ers do it all the tim e. There’s nothin g wrong in not knowing about each one of the
thousands of PHP com m ands, and the Web m akes an ideal way to find out.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
215
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Som e More PHP

As you’ll see if you browse the online docum entation on www.php.net, there are literally
thousands of com m ands and functions in the PH P language, to allow you to achieve just
about anything you want to do with a web page. It’s im possible to cover everything here, or
even to scratch the surface of what can be achieved. But before we progress to exam in e
online databases, here’s a sm all selection of other PHP stuff that m ight give you som e ideas.
Even if you don’t intend to use these right now, you’re recom m ended to read through this
section as it will help a lot when we com e to the database section later.

Incidentally, I've m entioned com m ands and functions. Is there a difference? Yes. A
com m and does som ething, like open a file or display a m essage. A function returns
inform ation, such as the value of a database field or the sum of two num bers.

Random Num bers

Let’s im agine that, on a particular web page, we want to include a m essage on our hom e page
which thanks visitors for looking at our site. However, to avoid bom barding people with the
m essage, we only want to show it approxim ately one tim e in ten. So, every ten tim es that the
web server sends out the page to a visitor, it will include the m essage.

One sim ple way to do this is with PHP’s random num ber generator. There’s a PHP function
which returns a random integer between 1 and an y num ber we specify. So we'll ask it to
generate a num ber between 1 and 10 , and only display the m essage if the num ber happens to
be, say, 7. This will result in the m essage only being shown approxim ately 10 % of the tim e.
That is to say, if 10 0 people visit the hom e page during one specific tim e period, roughly 10
of them will see the m essage.

Open PSPad and navigate to your dem o.php file. Open it, delete everything that’s in it, and
replace it with the following:

<HTML>
<body>
Welcome to our site.<br><br>

<?php
$r = rand(1,10);
if ($r == 7)
{
echo "Thank you for visiting<br>";
}
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
216
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

?>

</body>
</HTML>

Save the file (choose Save from the File m enu), then open your web browser and surf to your
dem o.php file again. Keep pressing the Refresh button in your browser to reload the page.
Most of the tim e you’ll see:

But if you keep refreshing the page (pressing F5 is usually the sam e as clicking the Refresh
button, if you prefer), som etim es you’ll see this instead:

This is why PHP is so useful for generating dynam ic HTML pages. It can generate different
pages each tim e (or just som e of the tim e).

Take a look at the source code of those 2 HTML pages (use the View Source option in your
browser). Note how there’s no PHP code in there, just the HTML that our code dynam ically
generated. The browser knows nothing about where the HTML code cam e from . It m erely
sent a "please send m e the contents of dem o.php" request to the server, and the server ran
your program and sent som e HTML back. The fact that the HTML was generated by a
program , rather than being retrieved from a ready-m ade .htm l file on the server, is unknown
to the browser.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
217
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Again, we’ve introduced a couple of new PHP concepts so let’s take another look at the code
we just typed and uploaded. Here it is again, with line num bers to aid explanation:

1 <HTML>
2 <body>
3 Welcome to our site.<br><br>

4 <?php
5 $r = rand(1,10);
6 if ($r == 7)
7 {
8 echo "Thank you for visiting<br>";
9 }
10 ?>

11 </body>
12 </HTML>

This tim e, I’ve chosen to m ix HTML and PHP m ode, and only to use PHP m ode when
necessary. So, to create our dynam ically-generated HTML page, we start by outputting the
necessary HTML and BODY tags. Rem em ber that a PHP file always starts off in HTML
m ode, ie it’s just a standard HTML file as far as the web server is concerned. J ust because it
has a .php extension doesn’t chan ge this. The only reason for the php extension is to tell the
server that, if there is any PHP code in the file, it’s safe to run it. Som e servers will also run
PHP code that’s contained within a .HTM file, but m any won’t. And even if yours does, it’s a
good habit to be able to identify, from its extension, whether a file is plain HTML or PHP.

Line 3 generates the first line of text on the page, and I’ve added a couple of line break tags
too, for clarity. (Now you can see why you need to know basic HTML before you can start
writing PHP, and thus why the chapters in this book are ordered the way they are).

Once again, for clarity, I haven't created a css style sheet, or a doctype, or used <p> tags. The
program will still work just fine, as browsers are generally pretty forgiving. When you're
doing this for real, you'll need to do it properly.

Lines 11 and 12 close the HTML page neatly, by creating the closing body and HTML tags.
Again, this is just standard HTML which we learned m uch earlier.

Line 4 flips the server into PHP m ode. Line 5 creates a variable (we’ve called it $ r) which
uses the rand function. In this particular instance, the $ r variable will be set to a value
between 1 and 10 . Note that every variable nam e in PHP has to be preceded with a dollar
sign. Variables don’t have to be given single-letter nam es. I could just as easily have called it
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
218
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

$ m y_ random _ value, but shorter is always best as there’s less chance of m aking a typing
m istake when you refer to the sam e variable later on.

Line 6 checks to see whether $ r is equal to 7. If it is, everything between the 2 curly brackets
gets executed. If it’s not, everything between the curly brackets gets ignored.

Note two im portant points about the code in line 6. First, the if com m and is alm ost unique
in PHP, in that it doesn’t (indeed, m ustn’t) end with a sem icolon. Second, when you’re
com paring som ething, you use 2 "equals" signs rather than just one. So, $x = 99 will set
the variable $ x to 99. But to check whether $ x is equal to 99 we say if ($x == 99). Note,
too, how the value to check for has to go inside rounded brackets.

Incidentally, if you leave PHP m ode and then re-enter it within the sam e file, no inform ation
is lost. So, for exam ple, the following:

<html>

<?php
$name = "Fred";
?>

Your name is

<?php echo $name; ?>

</html>

Will display the m essage Your name is Fred.

Sending Em ail with PHP

With server-side program m ing you can do just about anything, and that includes sending
em ail. Try this little PHP program , by changing the contents of dem o.php to the following
and then surfing to the dem o.php page:

<?php
$to = "[email protected]";
$subject = "Hello";
$message = "This is my Web server, sending me email on ";
$message .= date("D");

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
219
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

$message .= " at ";

$message .= date("H:i");
$m = mail($to,$subject,$message);
echo "Return code from mail was " . $m;
exit();
?>

You should see a m essage which says "Return code from m ail was 1". To understand why,
and what this program does, let’s exam ine it in detail.

The first line of code creates a new variable called $ to, which is set to the "to" address of the
em ail we’re going to be sending. In this case, I’m sending the m essage to m yself. If you
want to try this exam ple, please use your own em ail address rather than m ine!

The next line sets the subject of the m essage in a sim ilar way, and then we create $ m essage,
which is the text of the actual m essage we’ll be sending.

But what about $message .= date("D");? Are we setting $ m essage to som ething else
entirely? No. Take a closer look and you’ll see we’re using .= rather than = on its own. The
.= sym bol m eans that PHP should add the new text to the end of what’s in that variable
already. But what text to add? In this case we’re using the date() function and specifying
"D" as what’s known as the argum ent. The date() function returns lots of tim e- and date-
related inform ation, such as the current day, date, hour, m inute, second, year, and so on.
There are dozens of possible things that it can return, each sym bolized by their own letter
(and these are case-sensitive, by the way, so d is not the sam e as D).

In this case, D returns the current day of the week as a 3-letter abbreviation. So, this line is
adding a 3-letter version of today’s day onto the end of the $ m essage string which we created
in the line above. Thus, if today happens to be Friday, $ m essage will now be "This is m y Web
server, sending m e em ail on Fri".

The next line adds " at " to the $ m essage string. So now it contains "This is m y Web server,
sending m e em ail on Fri at ".

Finally we add the current tim e to the end of the m essage that we’ll be em ailing. We use the
date() function again, with H and i. H return s the current hour in 24-hour clock form at,
and i returns the num ber of m inutes. Anything that isn’t a letter, within the bracketed part
of the date() function, gets returned as-is. So if the tim e happened to be 9pm ,
date("H:i") would return 21:0 0 .

PHP is particularly good at processing and m anipulating strings and dates. Whatever you
need to do with a string (count the num ber of characters, convert it to upper or lower case,
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
220
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

rem ove the last 4 characters, etc etc), PHP has a function to do it. As for dates, there are
even functions which will, if you supply a date and a latitude/ longitude location, tell you the
tim e of the sunrise or sunset.

Right, back to our program . Next, we use the m ail() com m and to send the m essage. It’s as
sim ple as specifying, in the correct order, the "to" address, the "from " address, and the text of
the m essage to be sent. But note the $m = bit at the start, though. The m ail() function
returns a value to indicate whether the m essage was successfully sent to the m ail server for
delivery. We capture this into the $ m variable, and display it in the next line.

Finally, the exit() statem ent ends the PHP program . You don’t need to use this if it’s
unam biguous, as it is here. The program is clearly going to end, as there’s no m ore PHP code
left to run. But that won’t always be the case, as we’ll see later.

By surfing to the dem o.php page, the program runs and the m ail gets sent. The value of 1 for
$ m m eans that the m ail m essage was successfully sent to the web server’s outgoing m ail
system . It does NOT m ean that the m essage was successfully sent to the recipient’s inbox.
Unfortunately there’s no way of knowing that.

A few m inutes later, the following arrives in m y inbox:

Here’s the m essage. It has the correct subject, and the text of the m essage is there too. But
there are a couple of things to notice.

First, the m essage appears to com e from [email protected]. That’s

not particularly friendly. There’s an optional extra item that you can include in the mail()
function to specify the address that the m essage appears to com e from , though I haven’t
bothered with it here. In theory you can set the "from :" address to be whatever you like. But
in practice, m ost web servers won’t send m ail that appears to have com e from anywhere
outside of the dom ain nam e that the server is based on. So in this case I could send m ail that

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
221
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

appears to com e from [email protected] but not [email protected].

This rule is im posed to help prevent web hosts from having their servers used by spam m ers.

It’s im portant that you do set a "from :" address when sending m ail. Because that’s where the
reply will be sent when the recipient hits their "reply" button. I’d m uch rather the replies
cam e to a real m ailbox at [email protected] rather than som ething which I
wouldn’t even know how to log into if I wanted.

There’s one other discrepancy too. See how the text of the m essage says that it was sent on
Fri at 14.15. But look in the upper window and, according to m y Outlook em ail program , the
m essage was received at 21.15. The m essage appeared in m y inbox within seconds of m e
surfing to the dem o.php page, so why does it appear to have taken 7 hours? You will recall
that PHP is a server-side language. So when you use the date() function to find out the
tim e, it looks up the tim e on the server. Com pare this to the client-side J avascript, which
finds out the tim e on the visitor’s own PC. The hostm onster web server is in the US, where
it’s 2.15pm . I’m in the UK, 7 hours ahead, where it’s 9.15pm , so that’s why the discrepancy
arises. And it’s well worth knowing about, because it can lead to problem s if you create a
web application that needs to know the correct (whatever that m eans, in this global m arket)
tim e.

Passing Inform ation to PHP

There are various ways of passing inform ation to a PHP program , and we’ll cover m any of
them in the database-related chapters that follow, and when we com e to talk about HTML
form s later on. But here’s a fun exam ple for now, which illustrates a couple of im portant
points about PHP.

Open PSPad, delete the contents of dem o.php and replace it with the following:

<?php
$person = $_GET["name"];
echo "<HTML>";
echo "Hello ";
echo $person;
echo ", how are you today?";
echo "</HTML>";
?>

Surf to the dem o.php page and you’ll see a m essage that says "Hello , how are you today".

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
222
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Now surf to the page again, but use the following URL. Substitute the-web-book.com for
whatever your dom ain is called. And you can change Robert to your own nam e if you wish,
too:

http://www.the-web-book.com/demo.php?name=Robert

Note the question m ark at the end of the URL, followed by name=Robert. You’ve probably
seen URLs like this before, and you m ight have wondered what they m eant. Now you’re
going to find out.

The question m ark in a URL allows you to surf to a server-side program (in this case one
called dem o.php) and also to pass inform ation to the program . In this case, we have created
a variable called name with a value of Robert. The PHP program can, if it wishes, retrieve
the contents of that variable.

Along with the question m ark, the other sym bol that you use for passing inform ation to PHP
program s via the URL is the am persand (&) sign. This is used when you want to pass m ore
than one variable. For exam ple:

http://www.the-web-book.com/demo.php?firstname=Robert&surname=Smith

Here, we’re passing 2 variables called firstnam e and surnam e. Note how only the first
variable is preceded by a question m ark. Any subsequent variables m ust be preceded by an
am persand.

Back to our dem o.php program . Assum ing you entered a nam e of Robert on the URL, you’ll
see the following in your web browser:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
223
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

To understand how this works, take another look at the PHP program code. The only line
that will be unfam iliar to you is $person = $_GET["name"];

The $_GET[" "] syntax is how you retrieve variables (known as param eters in this
context) that were added to the end of the URL. In this case, because we referred to the
param eter as name in the URL, $_GET["name"] retrieves it for us. I’m retrieving it into a
variable called $ person rather than $ nam e, but that’s entirely up to you.

Note that the URL variable in the square brackets doesn’t have a dollar sign at the start, so
$_GET["$name"] wouldn’t work. And note that GET is in upper case – this is im portant
too.

If you’ve got a few m inutes spare, here’s som ething that you can try. Enhance the program
so that, if no nam e is entered on the URL, the program displays an error m essage. To do
this, you’ll need to know that the strlen() function returns the length, in characters, of a
string. So having retrieved the nam e from the URL, code such as:

if (strlen($person) == 0)

will allow you to find out whether any nam e was supplied.

Alternatively, adapt the program to display not just the nam e that was entered, but also the
num ber of characters in the nam e.

Never Forget to Sanitize

Being able to pass inform ation to a PHP program so easily is a good one, and you’ll find that
you use it a lot. Mostly, it’s used in form s. For exam ple, your visitor fills in a web-based
form with his nam e and address, which gets retrieved by a PHP program and displayed on
screen or added to a database. But the ease with which PHP can accept inform ation from
visitors to your site hides a very serious security flaw. You can’t trust that inform ation,
because the visitor is free to enter anything he or she likes.

Here’s a very sim ple exam ple. Surf to dem o.php again by using the following URL:

http://www.the-web-book.com/demo.php?name=<b>Robert</b>

This is what you’ll see in your Web browser:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
224
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

See how m y nam e is now displayed in bold? That’s because I added the relevant HTML tags
to the URL. The PHP program uses the echo statem ent to insert, into the dynam ically-
generated web page, whatever was specified on the URL. In this case it’s not just som e text,
but som e actual HTML code too. You can see it if you use the View Source option in your
web browser.

But why is this bad? Because, at a trivial level, som eone can m ess up the look of your web
page by forcing it to display lots of stray HTML tags. At the other end of the scale, consider
what would happen if som eone entered a "nam e" of <script> followed by a load of J avascript
code. Would the web browser then execute that code? Yes, it would.

All of which leads to one of the m ost fundam ental rules of security when it com es to PHP
program m ing: filter or sanitize inform ation whose source you can’t be sure of.

Quite how you do this will depend on circum stances, and on the precise nature of the data.
In our current exam ple, where we’re expecting the visitor to enter a nam e, it’s obvious that
the only characters we need to allow are the letters a to z (and A to Z). Any other character
can be rem oved. This will include the pointy brackets which would allow som eone to enter
HTML code, and also m any other unnecessary punctuation sym bols. You’ll see later, when
we talk about SQL Injection attacks, that som e of those other punctuation sym bols are just as
dangerous.

One way to filter or sanitize data is to use the PHP str_replace function. This stands for
"string replace". It can quickly and easily replace any characters in a string (ie, in a variable
that corresponds to som e text) with another character. Or, if you prefer, it can replace them
with nothing and thus delete them .

For exam ple, having retrieved the nam e from the URL into the $ person variable, we could
then add a line which says:

$person = str_replace("<","",$person);

As you can see, str_replace requires 3 param eters. What to search for, what to replace it
with, and the variable within which to do it. This line would have the effect of replacing all <
sym bols in $ person with nothing, ie deleting them .
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
225
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Although this would work, you’d need lots of str_ replace lines to deal with every unwanted
character that you need to filter out. But thankfully there’s a neater way, using a function
called ereg_replace. Take a look at this:

$person = ereg_replace("[^A-Za-z0-9 .,';:?]", "", $person);

This is sim ilar to str_ replace, in that you specify what you want to look for, what you want to
replace it with, and the string to operate on. But take a closer look at what we’re searching
for. No longer are we specifying a single character, but:

[^A-Za-z0-9 .,';:?]

Although this m ight look like gobbledygook, it’s actually just shorthand for the entire list of
characters to search for. Let’s go through it in detail. First, the whole thing goes in square
brackets, because that’s the rule for ereg_ replace. A-Z m eans every character from A to Z.
Equally, a-z m eans all the lower-case letters. Then , in addition to those 52 characters, we list
a few others. Nam ely the space, full stop, com m a, apostrophe, sem icolon, colon, and
question m ark.

The m ost im portant character in this whole collection, though, is the ^ at the start. This is
ereg_ replace shorthand for "everything except". So what the whole com m and actually does,
is to replace every character in $ person with a blank (ie, to delete that character), EXCEPT
where the character is a letter, a space, a com m a, an apostrophe, and so on.

You don’t really have to understand it. J ust add this line to your PHP code, after the line
which retrieves $ person from the URL. Now surf to dem o.php again and try entering
"forbidden" characters. You’ll notice that they don’t appear in the generated web page.

Sanitizing strings is fiddly but, thankfully, it only norm ally takes just line or two of extra
code. And it is vital that you do sanitize every string that com es from a visitor to your site,
because you have no idea what the visitor has typed. Get into the habit now. Every tim e you
use $_GET to retrieve inform ation from a URL, sanitise it before using it. Failure to do this
will m ean that your site WILL get hacked.

Incidentally, the idea of deleting everything EXCEPT a specified range of characters isn't just
convenience, it also m akes a lot of sense from a security perspective too. It's m uch better to
say "these are the characters I'm going to allow", rather than "I'm going to allow everything
apart from the following". In the latter case, forgetting to add som ething to your list of
banned characters poses a serious security risk. In the form er case, there's no risk of this

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
226
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

happening, and the worst that can happen is that som e characters won't get through until
you rem em ber to add them to the list.

Loop the Loop

Every program m ing language has a num ber of m ethods for creating loops, and PHP is no
exception. Try this program , for exam ple, either by uploading it the server and seeing what
happens, or just by reading the code and trying to work it out:

<?php
echo "<HTML>";
echo "<body>";

echo "A web server that knows its 7 times table!<br><br>";

for ($x = 1; $x <= 10; $x++)

{
echo $x . " times 7 is " . $x * 7 . "<br>";
}

echo "</body>";
echo "</HTML>";
?>

Run the program , and you'll see the following in your web browser:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
227
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

One line of PHP that you'll not have seen before is:

for ($x = 1; $x <= 10; $x++)

This is one of PHP's m ethods of creating a loop. In this case, it's a "for" loop. If you ever
learnt to program in Basic m any years ago, it's just the sam e as a FOR…NEXT loop in that
language.

Translating the line of PHP into English, the line of code m eans: set variable $ x to 1, and
execute everything within the curly brackets that follow. If $ x is less than, or equal, to 10 ,
exit the loop and jum p to the first line of code after the section in curly brackets. Otherwise,
add 1 to $ x and go round again.

The $x++ is a PHP shorthand way of saying "add 1 to $ x". Another way, which works just as
well and which is m ore fam iliar to Basic program m ers, is $x = $x + 1.

By changing the starting value (1) and the finishing value (10 ), you can adapt this code to run
as m any tim es as you like. Try it.

As for generating our 7 tim es table, the line that does all the work is:

echo $x . " times 7 is " . $x * 7 . "<br>";

Here, we’ve used a single echo statem ent to produce the entire line of our table. Each part of
the line is separated by a dot. Literal text such as times 7 is gets enclosed in quote
m arks, whereas we leave the quote m arks out if we want PHP to echo the value of a variable
such as $ x, or m ake a calculation such as $ x * 7.

Don't forget that, whenever you write a PHP program , you're creating a program that will
generate a web page. This needs to be a valid web page, com plete with <HTML> and
<body> tags. Otherwise, the visitor's web browser m ay get confused.

Another type of loop that's used extensively in PHP, especially when accessing MySQL
databases, is the "while" loop. Here's the 7 tim es table again, this tim e using a "while" loop:

<HTML>
<body>

My web server still knows its 7 times table

<br><br>
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
228
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

<?php
$i=1;
while($i <= 10)
{
echo $i;
echo " times 7 is ";
$product = $i * 7;
echo $product . "<br>";
$i = $i + 1;
}
?>

</body>
</HTML>

J ust to be different, I've m ixed HTML and PHP m odes this tim e.

Notice how a "while" loop works. First, we set $ i to 1. Then we create the loop, which says
"do the block of code within the curly brackets, but only while $ i is less than, or equal to, 10 ".

Because there's a line within the block which adds 1 to $ i, there will com e a point at which $ i
is not less than or equal to 10 , so the program will fall through to the next line after the
closing curly bracket.

It's worth studying these two exam ples of loops, and especially the "while" loop, as they are
used extensively in database-related PHP program m ing.

Arrays

Program m ing in PHP is all about m anipulating variables, ie those item s of data whose nam e
starts with a dollar sign. The key to m anipulating data is to ensure that the data is stored in
the m ost efficient way, in order to m ake the m anipulation as efficient as possible.

For exam ple, let's return to the subject of our hotel m anagem ent system and put together a
list of all the drinks available at the bar. We want to store the drinks m enu in a set of
variables, so that we can display them , sort them , record orders for them , and so on. Here's
one way of doing it:

$ drink0 = " Whiskey";

$ drink1 = "Brandy";

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
229
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

$ drink2 = "Pint of lager";

$ drink3 = "Shandy";
$ drink4 = "White wine (large)";
$ drink5 = "White wine (sm all)";
$ drink6 = "Red wine (large)";
$ drink7 = "Red wine (sm all)";

Having defined our variables, we now want to use a set of echo com m ands to display the
drinks m enu on screen. But how? Each drink nam e is stored in a com pletely separate
variable. Sure, each one starts with the letters d,r,i,n and k, but then com e different
num bers. As far as PHP is concerned, the variables are totally unrelated to each other, even
though their nam es are sim ilar. Displaying our m enu is going to be difficult.

There's a better way, using som ething called an array. An array lets you create a group of
variables which are linked, and you can easily access any m em ber of the chain. Here's how
to do it:

$ drink[0 ] = " Whiskey";

$ drink[1] = "Brandy";
$ drink[2] = "Pint of lager";
$ drink[3] = "Shandy";
$ drink[4] = "White wine (large)";
$ drink[5] = "White wine (sm all)";
$ drink[6] = "Red wine (large)";
$ drink[7] = "Red wine (sm all)";

Note the m inor addition of those square brackets. They're im portant. No longer do we have
8 separate variables. Instead, we have one single array which has 8 elem ents. Note how we
started at zero, by the way. In PHP, array elem ents generally start at zero. This is a slight
pain, as it m eans the final elem ent of a 10 -elem ent array is num ber 9 rather than 10 . But
once you get used to it, and rem em ber to write your program code accordingly, it's pretty
sim ple.

Here's where arrays com e in so useful. To display the value of drink num ber 3, we just use
echo $drink[3] as you m ight expect. But even better, we can use a loop to display the full
drinks m enu like this:

<?php
$drink[0] = "Whiskey";
$drink[1] = "Brandy";
$drink[2] = "Pint of lager";
$drink[3] = "Shandy";
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
230
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

$drink[4] = "White wine (large)";

$drink[5] = "White wine (small)";
$drink[6] = "Red wine (large)";
$drink[7] = "Red wine (small)";

echo "<HTML>";
echo "<body>";

echo "Drinks Menu<br><br>";

for ($i = 0; $i <= 7; $i++)

{
echo $drink[$i];
echo "<br>";
}

echo "</body>";
echo "</HTML>";

?>

Which displays the following in the visitor's web browser:

Our "for" loop counts from 0 to 7, and displays the relevant elem ent of the array each tim e.

The only slight annoyance is that, if we add another drink to the m enu by creating elem ent
num ber 8, we'd also have to change the 7 to an 8 in the "for" loop. This is inconvenient, and

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
231
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

introduces the possibility of an error in the program if we forget to do this. As you m ight
expect, there's a way round it. J ust change the "for" loop to:

$total_drinks = count($drink);
for ($i = 0; $i <= $total_drinks; $i++)

The count() function returns the num ber of elem ents in the specified array. But rem em ber
that arrays start at zero, so treat the returned count accordingly. In this case, the function
returns 9, but that doesn't m ean the highest-num bered drink is elem ent 9. The list starts at
0 , so the highest-num bered elem ent will be one less than the value which count() returns.

When you're adding data to an array, you don't even have to specify the num eric bit if you
don't want to. The following will work just fine, and PHP will allocate the num bers
autom atically, starting from zero. This is handy if you're reading a list of item s from a
database and you want to add them to an array in order to m anipulate them .

$drink[] = "Whiskey";
$drink[] = "Brandy";
$drink[] = "Pint of lager";
$drink[] = "Shandy";
$drink[] = "White wine (large)";
$drink[] = "White wine (small)";
$drink[] = "Red wine (large)";
$drink[] = "Red wine (small)";

PHP has lots of useful functions for m anipulating data in arrays. For exam ple, array_sort
does what you m ight expect, allowing you to add just one line of code to the above program
to present the list of drinks in alphabetical order. Although, if you were reading the list of
drinks from a database table, it's far m ore efficient to use the ORDER BY clause as part of the
MySQL query, in order to retrieve a ready-sorted list, rather than read the data in a random
order from the database and then sort it within the array.

Before we finish our very brief introduction to arrays, there's som ething im portant that you
need to know about them . In som e languages, such as Basic, array subscripts (ie, the bit in
square brackets) have to be sequential and num eric. In PHP, this is not the case. We could,
if we wish, create our array of drinks thus:

$drink["a"] = "Whiskey";
$drink["fred"] = "Brandy";
$drink[2] = "Pint of lager";
$drink["hello"] = "Shandy";
$drink[412] = "White wine (large)";
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
232
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

$drink["-8"] = "White wine (small)";

$drink[6] = "Red wine (large)";
$drink[7923] = "Red wine (small)";

It's unlikely that you'd ever want to do this (at least, I hope not!), but it's worth bearing in
m ind the pitfalls of not having subscripts (or keys, as PHP calls them ) which follow a pattern.
Why? Because, if you use the count() function to return the total num ber of elem ents in an
array, you can only use the for.. loop m ethod as described above if you know that the
elem ents are num eric, sequential, start at 0 , and stop at one less than the value returned by
the count() function. If they don't, you'll need to find another way of displaying them .

Should you need to do this, there's a PHP function called array_keys() that returns (as an
array, naturally) the list of elem ent nam es of a given array. In this case it would return an
array consisting of a, fred, 2, hello, 412, -8, 6 and 7923. You could then use this array to help
you navigate the $ drinks array.

Be aware that, if you delete an elem ent from an array using the unset com m and, the
rem aining array will have a "hole" in it. For exam ple, we currently have our array of drinks
from 0 (whiskey) to 7 (sm all red wine). We then delete elem ent 3 (shandy) because it's no
longer available on the m enu. We can do this with:

unset $drinks[3];

There are now 7 elem ents in the array, num bered 0 ,1,2,4,5,6,7. A call to count($ drinks) will
return 7, but those elem ents aren't num bered 0 to 6. Instead, they're num bered 0 to 7 with a
non-existent 3.

The easiest way around this is to renum ber the array and close up the gaps every tim e you
delete an elem ent. Which is as sim ple as:

$drinks = array_values($drinks);

Now, $ drinks has elem ents num bered 0 to 6. J ust rem em ber to call the count() function
again, so the num ber of the highest elem ent is updated.

If you've ever used arrays in Basic before, trust m e. This w ill catch you out!

User-Defined Functions

PHP program m ers m ake great use of som ething called user-defined functions. So far, we've
used only PHP's built-in functions like count(), mail(), strlen() and so on. But the

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
233
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

great thing about PHP is that you can create your own. For exam ple, here’s a slightly
different version of the “how are you today?" program as shown on page 222:

<?php
$person = $_GET["name"];
$person_san = sanitize_url_string($person);
echo "<HTML>";
echo "Hello ";
echo $person_san;
echo ", how are you today?";
echo "</HTML>";
exit();

function sanitize_url_string($string)
{
$s = ereg_replace("[^A-Za-z0-9 .,';:?]", "", $string);
return $s;
}
?>

There are a couple of differences between this version and the original. First, after using
$ _ GET to retrieve the value of the nam e from the URL, we then call the
sanitize_url_string() function to clean it up and rem ove any potentially dangerous
characters. The function itself is defined further down, so we need an exit() statem ent
before the function definition, in order that the code which defines the function doesn’t get
executed. It doesn’t need to be – PHP will search for it autom atically in the file if it needs it.

Note how I’ve created a new, sanitized version of $ person, called $ person_ san, and this is
the version that gets displayed by the echo statem ent. I could, instead, just have said:

$person = sanitize_url_string($person);

which would have replaced the unsanitized version with the clean one. But it’s a good idea to
get into the habit of giving all sanitized data an easily identifiable m oniker, such as _ san.
That way, it’s easy to spot places in your program s where you m ight have forgotten to clean
up toxic data.

Finally, the definition of the function itself. This takes the form of a line which starts with the
word “function”, then the nam e you want to use, then, in brackets, the list of however m any
param eters your function requires. In this case it needs just one, nam ely a string to be
sanitized. The nam e of the variable ($ string) within the function definition needs to m atch
the nam e used within the code of the function, but doesn’t have to m atch the nam e used
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
234
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

outside. There’s no need to have referred to $ person in the function at all. It just so
happens that we’re using the function to sanitize a person’s nam e. Later on in our program
we m ight call the sam e function to sanitize $ postcode or $ occupation.

Note the return com m and. This is what returns the results, ie the sanitized string, to
whatever called the function. Without this, $ person_ san would be blank.

One of the characteristics of "good" program m ing, whether in PHP or any other language, is
that you don't include the sam e bit of code m ore than once. Whether that "bit of code" is a
single line or a block of 10 0 lines, the rule still applies. By including the code just once, and
turning it into a function which can then be referred to m any tim es, your program m ing
becom es m ore efficient. It saves space, and m eans that, if you m ake a change to that "bit of
code", you only have to update one copy of it rather than locating and am ending every
instance.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
235
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

HTML Form s
So far, The Web Book has been all about publishing inform ation in one direction, ie from you
and your web site to your visitors. Som etim es, though, you'll want to be able to request
inform ation in the other direction, ie from a visitor. This m ight be a choice of drink from the
m enu in our hotel m anagem ent system , or som eone's nam e and address in order to add
them to the subscriber database, or their usernam e and password in order to attem pt to log
them into a protected system .

There are two ways of getting inform ation into a PHP program . One is to use param eters on
the URL, and retrieve them with $ _ GET. The other m ethod, which is much m ore powerful
(and m ore secure, if done properly) is to use an HTML form .

When we finally start to design database applications with PHP, we'll use form s extensively
to request inform ation from visitors that ultim ately gets stored in the database. Therefore,
you need to fam iliarise yourself with the contents of this chapter before reading further.

A form consists of two m ain com ponents. First, one or m ore input fields into which the
visitor types or clicks the inform ation you have requested. Second, a "subm it" button which,
when clicked, sends the contents of the form to a server-side program for processing in
whatever way it wishes.

There's a variety of form field types that you can use, depending on the type of inform ation
that you're requesting from a visitor. Here are exam ples of the ones you'll use m ost often:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
236
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

First is a textbox. This is used for requesting a single line of text. If you’re using a textbox to
ask a visitor to enter a password, you can configure the textbox as a password box. If you do
this, characters that the visitor types into the box appear as dots or stars, to stop som eone
looking at the password over the visitor's shoulder. However, when the subm it button is
clicked, the real content of the text box (ie, the password as entered) gets sent to the
receiving program .

Next com es a textarea, which can be as wide an d high as you wish. You m ight want to use
this if you have a feedback form on your site, into which visitors can type a m essage.

Next, the two sets of option boxes. First, checkboxes. A set of checkboxes allows the user to
choose one or m ore item s from a list. Here, we're asking him to choose which item s he'd like
for breakfast.

The second set of option boxes are radio buttons. These differ from checkboxes because you
can only choose one option. In this case, we're asking how the visitor would like their eggs
cooked. Another com m on use for radio buttons is to ask a visitor whether they are m ale or

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
237
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

fem ale. If you used checkboxes for such a question, a high percentage of people will think it
am using to tick both boxes. But with radio buttons, they can't.

Finally, a dropdown box. From here, a visitor can select an option from a pre-determ ined
list. By holding down the control key in their Web browser they can actually select m ore
than one item , so long as you perm it this when you create the form .

A dropdown box is a powerful tool, which should not be underestim ated. Where possible, it's
m uch better to use a dropdown box than a text box. For exam ple, im agine an application
where you ask som eone to enter their favourite m ake of car. If you provide a text box, the
replies m ight include "ford", "Ford", "FORD", "Ford I guess" and so on. If you lim it the
choices by using a dropdown box, you'll end up with m uch m ore consistent data. Which will
be extrem ely helpful when you com e to produce a report from your database on the
percentage of people who prefer Ford cars.

Creating a Form with Am aya

Although you can create a form by hand, typing the HTML code into a text editor such as
PSPad, it's easier to use a dedicated HTML editor that has form capabilities. Throughout
this book we've been using the free Am aya HTML editor, so that’s what we'll use to create a
form .

To begin creating a form , start Am aya. From the File m enu choose New, and then choose
New Docum ent. Choose a nam e (form .htm l will be fine) and location for the file (your Web
Work folder is probably easiest location, as we'll want to upload the form to our server later
and FileZilla should already be configured to look there).

Once you've chosen the location and a nam e, click the Create button.

Type "Breakfast Menu" at the top of the page, then press Return a few tim es to m ove further
down the page. Your screen should look like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
238
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

You're now ready to create the form .

From the Insert m enu, choose the Form option, then choose Insert A Form . You'll be asked
to enter details of a form action, but this is som ething we'll cover later so, for the tim e being,
just press OK.

You won't notice anything on the screen, but Am aya has inserted the necessary HTML code
to create a form . Click on Views and then Show Source, and you'll see it. There's not a lot
there at the m om ent – just a <form> tag or two. But that's about to change, as we start to
add our form fields. So if you're looking at the source view, return to standard view by
unticking "Split View horizontally" from the Views m enu.

Let's insert a text box, for our breakfast guest to enter their nam e. Type "Nam e:", which we'll
use as a label for the textbox. Then, from the Insert m enu, choose Form and then Text Input.

You should see som ething like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
239
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Let's m ake that text box slightly longer, as it's not quite big enough to hold a nam e as it
stands. Som e HTML editors let you drag the box to adjust its size, or right-click it to see a
m enu of things you can change. But Am aya doesn't have such a feature, so we'll just have to
change the HTML code directly. It's not difficult, and it's a good way to learn anyway.

From the Views m enu, click on Show Source. Locate the HTML tag which says <input
type="text" />. The <input> tag is how form item s such as textboxes and checkboxes
are created. The type="text" part is what m akes this a text box. What's m issing is any
specification for the width of the box. So change the tag to read:

<input type="text" size="40" />

Click back into the top window and see how the length of the box changes. If you want to
m ake it even longer than 40 characters, feel free.

That's the first half of our sim ple breakfast m enu form com plete. Now let's add som e
checkboxes and m eal item s.

At the bottom of your page, type "Please choose your order", to act as a label for the next
collection of form fields. On subsequent lines, type som e food choices. In m y exam ple I'll
use eggs, bacon, sausages and beans.

Then place the cursor next to each food item in turn and, from the Insert m enu, choose Form
and Checkbox.

In a sim ilar way, type a "How do you like your eggs?" label, then som e possible choices. Next
to each choice, from the Insert m enu, choose Form and then Radio.

Finally, we need to add a Subm it button otherwise the user won't be able to m ake use of the
form . So, at the bottom of the page, again from the Insert m enu, choose Form and then
Subm it.

Your screen should now look som ething like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
240
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Incidentally, you m ight well be wondering why your form looks so, well, m essy, and what you
can do about it? Specifically, you probably want to be able to line up the checkboxes an d
radio buttons in a neat vertical colum n. The easiest way to do this is to use a table. For the
food order checkboxes, for exam ple, create a table with 2 colum ns and four rows. Put the
food labels down the left hand colum n and the checkboxes in the right-hand cells. Then
everything will line up neatly. For now, though, we're not too concerned about cosm etics so
I'll keep things sim ple and table-less.

Nam ing the Form Objects

Having designed a form , there are 3 m ore things you need to do before it's ready for use.
These are:

1. Ensure that each form object is nam ed properly

2. Add an "action" to the <form > tag
3. Write som e PHP code to handle the subm itted form s

We'll go through each of these in order.

First, the nam ing of form objects (ie, all those checkboxes, textboxes and so on).

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
241
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

When the site visitor presses the Subm it button, the contents of the form will be sent to a
PHP program as a series of variables. The nam es of those variables will be the nam es that
you assign to the objects on the form . Therefore, it m akes sense to ensure that the nam es
you choose are sensible. Obviously, no HTML editor will know in advance what you intend
to use the contents of, say, a checkbox for. Som e editors, like Dream weaver, generate nam es
such as "checkbox1" or "radio1", while som e, such as Am aya, don't generate anything at all.
Either way, you'll definitely want to change the nam es to som ething m eaningful. It m akes a
lot m ore sense for a PHP program to be dealing with a variable called $ nam e or $ food rather
than $ checkbox1 or $ radio.

So, in Am aya, go to the Views m enu and select Show Source. Start by locating the definition
of the "nam e" textbox, which looks like this:

<input type="text" size="40" />

There's nothing in that HTML tag which explicitly says that this is the "nam e" textbox, but
you can work it out from various clues, the m ost obvious one being that it com es right after
the word "Nam e" which we used as a label. Welcom e to the world of the HTML detective!

Change the line of code to:

<input type="text" name="tb_name" size="40" />

As you can see, nam ing a textbox is no m ore com plicated than adding name="whatever" as
part of its tag. Note how I've called it tb_name to rem ind m e that this data has com e from a
textbox. This is a useful habit to adopt. Som etim es it will be helpful to rem em ber what kind
of data you're dealing with.

The order of the various data item s, or param eters, within an HTML tag after input doesn't
m atter. The line above happens to specify type, then nam e, then size, but there's no rule
about which has to com e first or last.

Next, we need to nam e the 4 checkboxes, the code for which currently looks som ething like:

Eggs <input type="checkbox" />

Bacon <input type="checkbox" />
Sausages <input type="checkbox" />
Beans <input type="checkbox" />

Change the contents of the 4 tags to:

Eggs <input type="checkbox" name="cb_eggs" value="Y" />

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
242
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Bacon <input type="checkbox" name="cb_bacon" value="Y" />

Sausages <input type="checkbox" name="cb_saus" value="Y" />
Beans <input type="checkbox" name="cb_beans" value="Y" />

Checkboxes work in a different way to a textbox. For each tag, I've specified a nam e and a
value. If the visitor ticks the box, the specified variable nam e will be set to the specified
value. If the visitor leaves the box unticked, the specified variable will be blank. So, for
exam ple, if the visitor ticks the "Bacon" box, $ cb_ bacon will be equal to "Y". If he leaves it
unticked, $ cb_ bacon will be blank.

Finally we need to nam e the radio buttons. Again, these work in yet another slightly
different way.

The code for the radio buttons is currently:

Fried <input type="radio" name="radio" />

Poached <input type="radio" name="radio" />
Scrambled <input type="radio" name="radio" />

Am aya has given the radio buttons a nam e, but we're going to change it. Change the HTML
tags to:

Fried <input checked type="radio" name="rb_eggs" value="F" />

Poached <input type="radio" name="rb_eggs" value="P" />
Scrambled <input type="radio" name="rb_eggs" value="S" />

A couple of im portant things to note about these radio buttons. See how the first radio
button (fried) includes the word "checked". This m eans that, when the form is displayed,
this is the option that will be selected by default. You don't have to check any radio button
like this but, if you do, m ake sure you only check one of them .

Next, see how each radio button has the sam e nam e (rb_ eggs) but a different value (F, P or
S). If the visitor clicks the "Fried" button, $ rb_ eggs will be set to "F". If he chooses
"Poached", $ rb_ eggs will be "P" and so on. Each "set" of radio buttons on a form , ie each
collection from which the visitor can m ake one choice, needs to have its own nam e that is
shared am ong all the buttons in the set but which is not used an ywhere else on the form .

As to why I've used values of F, P and S rather than "Fried", "Poached" or "Scram bled", this
is m ostly personal preference. And because it saves m e having to rem em ber whether the
value of a radio button is Fried or FRIED or fried when I com e to check it in the PHP
program .

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
243
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With the form fields correctly nam ed, there's just one m ore thing we need to do before our
form is ready. When the visitor fills in the form and clicks the Subm it button, the data will
be sent to a PHP program of our choice. The nam e of this PHP program needs to be
specified in the <form> tag. Currently it probably just says:

<form action="">

You need to change this to:

<form method="POST" action="breakfast.php">

Now, when the user clicks Subm it, the breakfast.php program will be run and the form 's data
sent to it.

As for method="POST", this tells the web server how to send the subm itted form
inform ation. You don't need to worry about how it works. J ust m ake sure that
method="POST" appears in every <form > tag that you create. If you don't, your form won't
work.

With everything in order, we're now ready to write the breakfast.php program .

Handling Form Data and Quote Marks

Take a look at the following PHP program . Note how I've sanitized $ nam e, deleting any
character that isn't A-Z, a-z or a space. There's no need to sanitize the other input, as I'm not
echoing it directly, just com paring it to certain values.

<?php
$name = $_POST["tb_name"]; # Diner's name
$name_san = ereg_replace("[^A-Za-z ]", "", $name);

$cb_eggs = $_POST["cb_eggs"]; # Will be Y if wants eggs

$cb_bacon = $_POST["cb_bacon"]; # Will be Y if wants bacon
$cb_sausages = $_POST["cb_saus"]; # Will be Y for sausages
$cb_beans = $_POST["cb_beans"]; # Will be Y if wants beans
$eggs_style = $_POST["rb_eggs"]; # Will be F, P or S

echo "<p>";
echo "Thank you ," . $name_san . "<br><br>";

echo "Your breakfast order is:<br><br>";

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
244
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

If ($cb_beans == "Y")
{
echo "beans<br>";
}

If ($cb_bacon == "Y")
{
echo "bacon<br>";
}

If ($cb_sausages == "Y")
{
echo "sausages<br>";
}

If ($cb_eggs == "Y")
{
If ($eggs_style == "F") { echo "Fried eggs<br><br>"; }
If ($eggs_style == "P") { echo "Poached eggs<br><br>"; }
If ($eggs_style == "S") { echo "Scrambled eggs<br><br>"; }
}

echo "</p>";

?>

One thing you'll not have seen before is the use of a hash (# ) sym bol to signify the start of a
com m ent. Also, note how we retrieve each form variable with $_POST["something"].

There are two ways that data gets sent to PHP program s. One is via the URL, such as

www.yoursite.com/breakfast.php?meal=breakfast&eggs=fried

In this case, the PHP program m ust retrieve the data with $ _ GET. But if the data com es
from a form , as it does here, you need to use $ _ POST instead. And yes, that's why we added
method="POST" to the form tag.

Don't try changing to method="get" in your form tag, by the way, and then using $ _ GET to
retrieve the contents of the form . It will work, som etim es, but the contents of the form will
appear in the URL. There are serious security im plications in doing this.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
245
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Note how I've generated <p> tags around the output, so that the page will neatly adopt the
layout as specified in the <p> tag style for whatever css style sheet you decide to use. To do
so, you'll need to add another set of "echo" statem ents which generate <head> and <body>
sections, and a link to the style sheet. The link should go in the head section and looks like:

<LINK href="style.css" rel="stylesheet" type="text/css">

However, if you're going to generate this line with som e PHP, note that the following won't
work:

echo "<LINK href="style.css" rel="stylesheet" type="text/css">";

The problem is that the quote m arks (") are being used here for 2 different purposes. The
very first one and the very last one are part of the PHP code, and specify the start and end of
the text you're outputting to the visitor's web browser. The others, though, are part of the
text being output.

When you want to echo a literal quote to the visitor's browser, the rule is that you need to
precede it with a backslash. Like this:

echo "<LINK href=\"style.css\" rel=\"stylesheet\" type=\"text/css\">";

Note, too, how I've used a different layout for som e of the if… statem ents. If the visitor wants
eggs, I've then tested for the type of eggs using a form that takes just one line for the
com parison and the display of the m essage. This is useful if the am ount of code you want to
run as a result of the test is short, and keeps things neater.

Testing The Form

Type or paste the PHP program above into a file called breakfast.php. Upload this to your
web server, along with the form .htm l file (or whatever you called it). Make sure that both
files get uploaded into the sam e folder on the server, and that the nam e of the PHP file is the
sam e one specified in the "action" part of the form tag. On som e servers this is case-
sensitive, so breakfast.php is not the sam e as BREAKFAST.PHP.

With both files uploaded, surf to the page that contains your form and you should see this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
246
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Check that you can type into the Nam e box, an d that you can select an assortm ent of food
item s and a single egg type. Fill in the form as you wish, then click Subm it. With luck, you
should see som ething like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
247
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

It works. The data from the form has been transferred to our breakfast.php program , and
has been processed and displayed correctly. Plus, because form input is being sanitized, this
program is also written in a secure way.

Being able to create form s, and write PHP program s to deal with the data from them , is a
vital part of developing PHP-based web applications. Only by using form s can you request
inform ation from visitors to your site.

One of the m ost useful things about form s is that you can populate them from a database
autom atically, and this is som ething we'll cover in m ore detail later. But im agine, for
exam ple, that the list of breakfast item s (eggs, bacon etc) is held in a database table. Having
accessed the database and retrieved the list of item s, you then wish to present them in a
m enu for the user to choose.

Here's the code we originally used, in form .htm l, to create the m enu:

Eggs <input type="checkbox" name="cb_eggs" value="Y" />

Bacon <input type="checkbox" name="cb_bacon" value="Y" />
Sausages <input type="checkbox" name="cb_saus" value="Y" />
Beans <input type="checkbox" name="cb_beans" value="Y" />

And here's a PHP version of it, based on an array of item s that we have read from the
database.

<?php
for ($i = 0; $i <= count($items); $i++)
{
echo $items[$i];
echo "<input type=\"checkbox\" name=\"cb_" ;
echo $items[$i] . "\" value=\"Y\" />";
}
?>

For an array called $ item s[] that contains values of "bacon", "sausage" and "beans", this code
will produce:

<input type="checkbox" name="cb_bacon" value="Y" />

<input type="checkbox" name="cb_sausage" value="Y" />
<input type="checkbox" name="cb_beans" value="Y" />

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
248
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Hey presto, a dynam ically-created collection of checkboxes. Now, hopefully, you can start to
see how PHP and MySQL work together to allow you to create powerful web-based
applications. And you're probably itching to get to the database stuff. Don't worry, not long
now.

Note how I've preceded quotation m arks with a backslash when I want to echo them to the
visitor's browser, ie when they're not part of the PHP code itself. This was discussed in m ore
detail on page 246.

Retrieving Textarea and Dropdown Data

So far, I've shown you how to retrieve the contents of a textbox, checkbox and radio button
using PHP. For com pleteness, it's worth explaining how to retrieve the value of a textarea
and a dropdown too.

A textarea's content is retrieved in the sam e way as a textbox. J ust use $_POST["xyz"],
where xyz is the nam e of the textarea as defined in the form . Rem em ber, though, that it m ay
contain carriage return characters if the user pressed Return while entering the contents of
the textarea. Carriage returns are harm less from a security perspective, but if you don't want
them you can rem ove them with the sam e type of ereg_ replace com m and used for sanitizing.
The ereg code for a carriage return character is \r although it's often also followed by a "line
feed" character (\n) as well. So you need to search for \n and \r and delete them both.

As for a dropdown box, this too is easy to retrieve. J ust use $_POST[] with the nam e of the
dropbox as specified in the form . For exam ple, here's the HTML code for a sim ple dropdown
box. As you can see, it is created by a <select> tag, though few people ever refer to it as a
select box:

<select name="dd_season">
<option>Spring</option>
<option>Summer</option>
<option>Autumn</option>
<option>Winter</option>
</select>

This produces, on a form , the following:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
249
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Using $_POST["dd_season"] in PHP will return the nam e of a season. However, there's
another option that you m ay find useful. Consider this:

<select name="dd_season">
<option value="1">Spring</option>
<option value="2">Summer</option>
<option value="3">Autumn</option>
<option value="4">Winter</option>
</select>

Now, the values that $_POST[] will return are no longer Spring, Sum m er, Autum n or
Winter. Instead, the values returned will be 1, 2, 3 or 4 respectively.

Im agine you're populating a form from a database, as described above. You want to produce
a drop-down list of all the guests who are currently staying in the hotel. So you retrieve,
from the database, their id num ber and their nam e. Where I've listed the nam es of the
seasons above, you display the guest's nam e. But where I've shown 1,2,3,4 above, you echo
the guest id num ber. Now, when the hotel receptionist chooses a particular nam e from the
drop-down list, the PHP code knows the guest's database id num ber rather than their nam e.
Consider this while re-reading the section on database norm alization (page 183) to see just
how incredibly useful this is.

Checkbox Arrays

When you're creating HTML form s, you'll often find yourself creating a large set of
checkboxes. For exam ple, keeping with the hotel m anagem ent system analogy for the
m om ent, perhaps you want to show a screen which lists each bedroom by num ber, along
with a checkbox, so that the operator of the system can choose which room s to m ark as being
in need of cleaning.

One way is to do som ething like this:

Room 1 <input type="checkbox" name="room1" value="Y" /> <br>

Room 2 <input type="checkbox" name="room2" value="Y" /> <br>
Room 3 <input type="checkbox" name="room3" value="Y" /> <br>
Room 4 <input type="checkbox" name="room4" value="Y" /> <br>

Which would work, of course, but will cause problem s when the PHP code on the receiving
end of the checkboxes needs to do its stuff. There m ight be dozens of checkbox variables to,
er, check, each with a different yet slightly-sim ilar nam e. There's no easy way to use a loop

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
250
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

and quickly scan through the values of $ room 1, $ room 2, $ room 3 and $ room 4 to find out
which are blank and which are "Y".

As you m ight expect, there's a handy shortcut, an d that's to create an array of checkboxes.
You'll rem em ber the concept of PHP arrays from page 229. Here's a version of the above
HTML code that uses a checkbox array:

Room 1 <input type="checkbox" name="rooms[]" value="1" /> <br>

Room 2 <input type="checkbox" name="rooms[]" value="2" /> <br>
Room 3 <input type="checkbox" name="rooms[]" value="3" /> <br>
Room 4 <input type="checkbox" name="rooms[]" value="4" /> <br>

Note that each checkbox now has the sam e nam e, which ends with 2 em pty square brackets.
Note too, that each checkbox has a unique value which corresponds to the room num ber.
The above HTML displays the following, when included in a form :

When the contents of the checkboxes is sent to the PHP code, the results will be in an array
called $ room s. This array will contain o n ly those checkboxes that were ticked (there's no
way to retrieve a list of those that were not, which is som etim es annoying). The values in the
array will be the sam e as the value= settings for those checkboxes. So, for exam ple, if the
visitor ticks boxes 2 and 4, the $ room s array will contain 2 elem ents (num bered 0 and 1,
because arrays always start at 0 ). $ room s[0 ] will contain 2 (the first room selected) and
$ room s[1] will contain 4.

Here's som e PHP code to handle the above HTML. It steps through each of the entries in the
$ room s array and displays the value:

$rooms = $_POST["rooms"];
$room_count = count($rooms);
echo "There were " . $room_count . " rooms chosen.<br>";
echo "The rooms you ticked were:<br>";
echo "<br>";
for ($i=0; $i <= count($rooms); $i++)
{
echo $rooms[$i] . "<br>";
}

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
251
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

And here's what it displays if you tick room s 2 and 4:

Feedback Form s

Perhaps the classic use for an HTML form , outside of som ething that displays inform ation
from a database, is the feedback form . This is a great way to allow site visitors to send you a
m essage.

J ust create a form on a web page which contains a textbox for the visitor's nam e, and a
textarea into which they can enter a brief m essage. When they click Subm it, your PHP
program retrieves the sender's nam e from the textbox and the m essage from the textarea. It
can then use the m ail() function in PHP to send the contents of the textarea to your em ail
address, after adding the contents of the textbox to the start of the m essage.

I won't include an exam ple of how to do this, as all of the required steps have already been
covered in this book. J ust use $_POST to retrieve the two item s of text, and the m ail
function (see page 221) to send it.

If you want to allow visitors to your site to send you com m ents, suggestions etc, then a
feedback form is the best way to do it. The only other option is to include your em ail address
on a web page, perhaps as a hyperlink. If you do this, however, you have no control over
what happens when the visitor clicks on that link. Most often, the visitor's com puter will
launch its standard em ail program (whatever that is set to). Assum ing there is one, of
course, otherwise nothing will happen at all. Very m essy and unprofessional. By having a
feedback form , you never have to divulge your em ail address in public. The visitor fills in the
form , clicks Subm it, and your PHP code sends you the m essage.

Hidden Fields

A form is a great way to pass inform ation back to a PHP program from a web page.
Som etim es, though, you m ight want to include other inform ation in addition to the contents

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
252
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

of the form fields. As it happens, one excellent use of this feature is to help spam -proof a
feedback form .

Consider the case of the feedback form as m entioned above. It provides an easy way for
anyone to type in a m essage, click Subm it, and have it m ailed to you. The trouble is,
spam m ers often use these form s as a way to send unwanted m ail. If the form m erely sends
its contents to you alone, it's inconvenient. If the form posts its contents to your com pany's
online forum , it's a m uch bigger problem . So here's a neat way to create a feedback form
that's virtually spam m er-proof.

Alm ost all form -based spam is sent by autom ated program s rather than hum ans. The
program s surf to your feedback form page, paste som e text into it, and click the subm it
button. All within a very short tim e. And that's their downfall. Spam is only worth sendin g
if you can do it quickly, in order to be able to send sufficient quantities. Real people, on the
other hand, type relatively slowly. It probably takes them at least 15 seconds, after the
feedback form is displayed, before they click Subm it.

So is there a way of finding out how long the user took to fill in the form ? If so, we can
sim ply discard the contents of an y form that gets subm itted too quickly, rather than em ailing
its contents to anywhere.

The answer is to use som ething called a hidden form field. You're probably accustom ed to
seeing som ething like this in the HTML code of a form :

<input type="text" size="40" />

Now consider this:

<input type="hidden" name="timecode" value="12345" />

This creates another form variable called $timecode, with a value of "12345", which will be
sent back to the PHP program when the form is subm itted. It doesn't correspond to any
form item like a textbox or checkbox, but is what's known as a hidden field. Hidden because
it doesn't appear anywhere on the form . If you ever want to send other inform ation back to
the PHP program , hidden fields are the way to do it. And one of those is the key to our
spam -proofing.

In the HTML file that creates the feedback form , add a few lines of PHP as follows, before the
end of the form (ie, before the </ form > tag):

<?php
$t = time();
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
253
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

echo "<input type=\"hidden\" name=\"timecode\" value=\"" . $t . "\" />";

?>

PHP's tim e() function returns a long num ber (10 digits or so) which corresponds to the
num ber of seconds since J anuary 1st 1970 . It's known as the tim estam p, and is often used in
program m ing to find out the current tim e or to do tim e-based calculations. For exam ple, if
you want to know what the tim e is going to be in 2 hours, m ake a call to tim e(), then add
720 0 to the result (360 0 seconds in an hour, tim es 2), then call one of the m any PHP
functions that convert a tim estam p back to a date and tim e.

We now have a form which, in addition to the nam e and m essage, includes a hidden field
called $ tim ecode that contains the tim estam p at which the form was displayed to the visitor.

When your PHP code receives the data from the form , m ake a call to tim e() and com pare the
value to $ tim ecode by subtracting one from the other. The result will be the num ber of
seconds that elapsed between the form being sent to the visitor's browser and the Subm it
button being clicked. If this is less than, say, 5, you can safely assum e that the form was
subm itted by an autom atic spam -sending com puter rather than a hum an.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
254
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Accessing MySQL Databases with PHP

On page 190 we covered the basics of creating a web-based MySQL database and querying it
via phpMyAdm in. On page 20 8 we covered writing program s using PHP. And on page 239
we covered HTML form s. Once you know how to do these three things (and if you have
forgotten, you would be advised to recap before going further), we can now put it all together
and create an online database application.

To continue, you will need to ensure that the hm s database we discussed on page 187 exists
on the web server, and that there’s a table within it called custom ers. The custom ers table
needs 7 fields:

id
firstnam e
surnam e
title
address
phone
em ail

All of these should be text fields (tinytext should suffice) except id, which should be an
integer. Further, id should be set as an auto-increm ent field. If you’ve forgotten how to do
so, refer back to page 190 for coverage of phpMyAdm in.

With the database and table created, your phpMyAdm in screen should look like this when
you view the structure of the Custom ers table:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
255
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

You’ll also need som e data in the table. Hopefully, your data will still be there from when we
covered phpMyAdm in. If not, browse to the Custom ers table, click on Insert, and create a
couple of records. Now, when you click on Browse, you should see the data in the table like
this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
256
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Counting Rows

Now we’re ready to start writing som e real code. Close your Web browser, open PSPad, and
create a file in your public_ htm l folder called custlist.php which contains the following:

<?php

$db_host = "localhost";
$db_database = "thewebbo_hms";
$db_username = "thewebbo";
$db_password = "abc123xyz";
$dbcnx = mysql_connect($db_host,$db_username,$db_password);
mysql_select_db($db_database);

$query = "select id from customers";

$q = mysql_query($query);
$total = mysql_num_rows($q);

echo "Total number of customers in the database is " . $total;

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
257
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

?>

Open your web browser and surf to www.yoursite.com/custlist.php and you should
see the following:

For sim plicity, I haven’t generated <HTML>, <body> and <p> tags. Technically, therefore,
the HTML page is not valid code. However, it keeps things sim ple for now, and just about
every browser will allow it. When you com e to develop real applications, m ake sure that you
generate valid HTML pages which contain all the necessary tags.

Let’s look at this code in detail.

The first 6 lines are used to connect to your database. You need to ensure that these lines are
present at the start of every PHP program you write, if you intend to access a database. The
first 4 lines are where you specify the hostnam e, database nam e, usernam e and password
(use the sam e password and usernam e that you use for accessing phpMyAdm in or your web
hosting control panel). The hostnam e will probably be “localhost” unless your web hosting
provider stores its databases on a server other than the web server. If this is the case, you

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
258
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

will be advised accordingly. Make sure you change the database inform ation accordingly.
Don't sim ply copy and paste m y exam ple in to your program s, as this won't work.

Having m ade the connection to our database, we can now access it. This takes just 4 lines of
code, as follows.

$query = "select id from customers";

This creates our MySQL query (you should recall these from when we queried the database
directly with phpMyAdm in). We store the text of the query in a variable called $ query. In
this exam ple, we want to select all the id values from the custom ers table.

$q = mysql_query($query);
Now we execute the actual query. The mysql_query function perform s the query, which
we have previously stored in the $ query variable. Note how we assign the result of the query
to the $ q variable.

$total = mysql_num_rows($q);
Having perform ed the query, we now use the mysql_num_rows() function, which returns
the total num ber of database records (ie, rows) which were returned in the $ q query. That is,
the total num ber of id values. At this point we haven’t actually retrieved any data. All we
have is the total num ber of rows. Which is all we need right now, so let’s display it:

echo "Total number of customers in the database is " . $total;

Reading Data

We now have a com plete PHP program which can access a MySQL database. So let’s adapt it
to display som e real data. Change the program to the following:

<?php

$db_host = "localhost";
$db_database = "thewebbo_hms";
$db_username = "thewebbo";
$db_password = "xyzabc123";
$dbcnx = mysql_connect($db_host,$db_username,$db_password);
mysql_select_db($db_database);

$query = "select firstname,surname from customers";

$q = mysql_query($query);

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
259
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

echo "These are the customers on file:<br><br>";

while ($row = mysql_fetch_array($q))

{
echo $row["firstname"];
echo " ";
echo $row["surname"];
echo "<br>";
}

?>

As before, we start with the standard 6 lines for connecting to our database. Then we create
a database query (select firstname, surname from customers) and execute it.
Note how we specify which fields we need. In theory you can just say select * from
customers, which would return all 7 fields. But it’s good practice to only request fields that
you’re actually going to use. It reduces the load on the database server.

When you perform a query that returns data, as we have just done, you then need to loop
through the array of rows that the query returns. That’s what the mysql_fetch_array
code does:

while ($row = mysql_fetch_array($q))

{
echo $row["firstname"];
echo " ";
echo $row["surname"];
echo "<br>";
}

Here, we use a while… loop, which returns an array of fields called $row[] for each row of
the database returned by the query. The nam es in square brackets m atch the field nam es in
the table. So in this exam ple, for each m atching row, we echo the row’s firstnam e field, then
a space, then the row’s surnam e field, then a line break. This produces a neat listing of every
custom er’s full nam e.

You don't have to use $ row as the array nam e, of course. You could call it $ record,
$ custom er, or whatever else you choose. But m any PHP program m ers tend to call it $ row,
so that's what I use.

Try adapting this program so that it also prints out the custom er’s em ail address. Rem em ber
to adjust the database query so that it returns 3 fields rather than just 2.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
260
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Also, try changing the query to:

select firstname,surname from customers where id=3

This tim e, notice how just one m atching row gets returned. Rem em ber that id is a num eric
field, so there's no need for quotes round the num ber 3.

Let's neaten up the output slightly by using a table. Here's a new version of the program .
Again, I've kept the HTML tags to a bare m inim um in order to m ake the listing as short as
possible for clarity. When you do this for real, you m ust include HTML and body tags. Plus,
you'll probably want to create a style sheet that specifies the design of <p> or <td> tags.

<?php

$db_host = "localhost";
$db_database = "thewebbo_hms";
$db_username = "thewebbo";
$db_password = "xxxx";
$dbcnx = mysql_connect($db_host,$db_username,$db_password);
mysql_select_db($db_database);

$query = "select firstname,surname from customers";

$q = mysql_query($query);

echo "<table border=1>";

echo "<tr>";
echo "<th colspan=\"2\">These are the customers on file</th>";
echo "</tr>";

while ($row = mysql_fetch_array($q))

{
echo "<tr>";
echo "<td>" . $row["firstname"] . "</td>";
echo "<td>" . $row["surname"] . "</td>";
echo "</tr>";
}

echo "</table>";

?>
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
261
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This tim e, we start by creating a table and setting a border width. There are lots of other
useful options that you can add to the table tag, or specify with a css style, but this will do for
now. Next, we create a table header row. Note the use of colspan, to indicate that this row
spans both colum ns of the table. And see how I've used a th tag for the header row cell,
rather than the standard td tag in every other row. This will allow m e to specify a different
design for the header row when I get around to creating the css file.

Finally, within the while… loop that brings in each row of data from the table, I create an
HTML table row.

The end result is:

Not particularly pretty, but all of the building blocks are there. All that rem ains is to create a
css file which contains entries for the p, th and td tags, and generate another line of HTML
which attaches it. I shall leave this to you. One of the great things about CSS is that you can
design the structure of your site independently from its look. Once the PHP code is working,
and returning the inform ation you need, then you can work on the css to m ake it look pretty.
So long as the PHP code sim ply generates tags such as th, td and p, you can then control the
appearance of your site via a css file without needing am end the PHP code at all.

Before we leave the topic of reading data, here's one m ore neat exam ple.

<?php

$db_host = "localhost";
$db_database = "thewebbo_hms";
$db_username = "thewebbo";
$db_password = "xyzxyz";
$dbcnx = mysql_connect($db_host,$db_username,$db_password);
mysql_select_db($db_database);

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
262
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

$query = "select firstname,surname,phone from customers";

$q = mysql_query($query);

echo "<table border=1>";

echo "<tr>";
echo "<td colspan=\"2\">These are the customers on file.</td>";
echo "</tr>";

while ($row = mysql_fetch_array($q))

{
echo "<tr>";
echo "<td title=\"" . $row["phone"] . "\">";
echo $row["firstname"] . "</td>";
echo "<td>" . $row["surname"] . "</td>";
echo "</tr>";
}

echo "</table>";

?>

It's only a couple of m inor chan ges to the code. First, I've am ended the query to return the
phone num ber field as well as firstnam e and surnam e. Then, when I create the table row
that contains the first nam e of the custom er, I also add a "title" to the td tag, the contents of
which is the phone num ber field.

For exam ple, the generated HTML code for J ohn Sm ith with a phone num ber of 1234 would
be:

<td title="1234">John</td><td>Smith</td>

The "title" param eter in a td tag creates pop-up text which appears when you hover your
m ouse over the cell. So now, just hover the m ouse over som eone's first nam e and their
phone num ber m agically appears. Like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
263
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Searching A Table

Now we'll write a sim ple PHP application that allows the user of the site to search the
custom er database for a specific surnam e. This is the sort of thing that a hotel receptionist
m ight do if they're using the Hotel Managem ent System that we're developing.

Before you go any further, you need to use phpMyAdm in to ensure that at least 2 records in
the custom er database share at least 2 consecutive letters. This is because we want to add a
partial search facility, and it won't work if there's no m atching data to return.

As you can see from the screen shot below, we have 2 custom ers with surnam es of Allen and
Albert. We should then be able to search on a partial m atch of "Al" and return both nam es.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
264
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With the necessary test data in place, we can put the application together. Before we look at
the code, here's the app in action. First, the search form :

We fill in a surnam e, choose Full or Partial search, and click the button. In this instance,
J ohn Sm ith's details are displayed:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
265
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Now let's try a partial search. We'll search for "Al" and select the relevant radio button. As
expected, both of the m atching records are returned:

To show how this all works, here's the com plete PHP code for the application:

<?php

# Start the page properly

echo "<HTML>";
echo "<body>";

# Check whether the searchtype radio button has been set

# If not set, display the search form.

if (!isset($_POST["searchtype"]))
{
echo "<form method=\"POST\" action=\"search.php\">";
echo "Search for surname:<br>";
echo "<input type=\"text\" name=\"searchtext\" size=\"15\">";
echo "<br><br>";
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
266
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

echo "Full search&nbsp;";

echo"<input type=\"radio\" value=\"FULL\" checked name=\"searchtype\"><br>";
echo "Partial search&nbsp;";
echo "<input type=\"radio\" name=\"searchtype\" value=\"PARTIAL\">";
echo "<br><br>";
echo "<input type=\"submit\" value=\"Search\" name=\"submit\">";
echo "</form>";
} # if

else # Searchtype was set, so retrieve form data and do the search

{
$searchtext = $_POST["searchtext"]; # Retrieve from the form
$searchtype = $_POST["searchtype"]; # Retrieve from the form
$searchtext_san = sanitize_form_text($searchtext); # Prevents SQL injections!

# Now connect to the database

$db_host = "localhost";
$db_database = "thewebbo_hms";
$db_username = "thewebbo";
$db_password = "xxyyzz";
$dbcnx = mysql_connect($db_host,$db_username,$db_password);
mysql_select_db($db_database);

# Construct the appropriate query

if ($searchtype == "FULL")
{
$query = "select firstname,surname from customers where surname='$searchtext_san'";
} # if

if ($searchtype == "PARTIAL")
{
$query = "select firstname,surname from customers ";
$query .= "where surname LIKE '%$searchtext_san%'";
} # if

# Now do the query

$q = mysql_query($query);

$total = mysql_num_rows($q);

if ($total == 0)
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
267
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

{ echo "Sorry, no matches found."; }

if ($total > 0)
{

while ($row = mysql_fetch_array($q))

{
echo $row["firstname"] . " " . $row["surname"] . "<br>";

} # while
} # if matches found
} # else

# End the page properly

echo "</body>";
echo "</HTML>";

exit();

function sanitize_form_text($t)
{
$t = strip_tags($t);
$t = ereg_replace("[^A-Za-z0-9@._-]", "", $t);
return $t;
}

?>

If you've been reading through this book in sequence, then hopefully you'll be able to
understand m ost of the above. Here are som e points to help you.

• The program displays one of two web pages. The first tim e around, it displays the
search form which, when subm itted, launches the sam e php program again. The
form contains a textbox called searchtext, and a pair of radio buttons called
searchtype with possible values of FULL or PARTIAL. If the searchtype has been set
(to either PARTIAL or to FULL) at the start of the program , this indicates that the
form has been subm itted, so, rather than displaying the form again, we do the actual
search instead.
• I've created a function called sanitize_ form _ text, which is listed at the bottom of the
program . At the point where the value of the search text is retrieved from the form , it
then gets sanitized.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
268
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

• Depending on the value of the radio button, we then execute one of 2 MySQL
database queries. For the full search, ie where we only return com plete m atches, the
query boils down to:

select firstname,surname from customers where surname='xyz'

where xyz is the search text entered in the form . Because surnam e is a text field, you
need quotes round the item you're searching for. Using single quotes is easiest,
because they don't conflict with the double quotes that m ake up part of the PHP code.

The MySQL query for the partial search ends with:

…from customers where surname LIKE '%xyz%'

LIKE %xyz% will m atch surnam es which contain xyz anywhere within them .

Rem em ber that a MySQL query will return the data in a random order unless you specify
otherwise. So if you want the results sorted by surnam e, say, add order by surname to
the end of the query.

Preventing SQL Injection Attacks

Th is s e ctio n is vitally im p o rtan t. Ple as e re ad it care fu lly.

Although writing web-based database applications such as this one isn't particularly difficult
to do, it's vital that you pay careful attention to security. Hackers love nothing m ore than
trying to find ways to steal, delete or corrupt the contents of MySQL database tables. And
sadly, it's a lot easier than you m ight im agine.

Take the exam ple above, where we allow the site visitor to enter som e search text, and we
then pass the result of that search text to a database query. If the visitor enters som e search
text of Sm ith, then our query ends up as:

select firstname,surname from customers where surname='Smith'

No problem there. But what if the visitor enters som e search text as follows:

Smith' or surname != 'Smith

This m ight look weird at first. But paste it into the query above, in place of the "perm itted"
surnam e, and you end up with the following:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
269
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

select firstname,surname from customers where surname='Smith' or

surname != 'Smith'

The != sym bol m eans "not equal to". So now we have a query which returns every record
from the table where surnam e is Sm ith or where surnam e is n o t Sm ith. In other words, it
will return the entire contents of the table! Im agine a guest being able to display every
custom er's record in addition to their own. Or a secure login facility where the visitor is only
granted access "if the passw ord is correct or the passw ord is not correct".

Here's another exam ple. Consider what happens if the following is entered as a surnam e:

Smith' or surname != 'Smith; delete from customers

The sem icolon is the standard character in MySQL for separating m ultiple com m ands on a
single line. So now, after your program searches for the entered surnam e, it will then delete
the entire contents of your custom er database!

By preventing unwanted characters from being passed to the MySQL query, we prevent SQL
injection attacks. So, this needs to be your golden rule when writing database applications: if
you are going to use untrusted data as part of a query, sanitize that data first. At the very
least, do not allow sym bols such as < > ! '; and so on. Ideally, allow only letters and
num bers, plus anything else that is specifically required. For exam ple, if you're asking
som eone for their em ail address you'll need to allow a dot, dash, underscore and the "@"
sym bol.

Do not underestim ate the im portance of protecting against injection attacks on your system .
Hackers have sophisticated tools that autom atically look for such errors on web sites and try
to exploit them . Therefore, always sanitize your text first, and always use the _ san version
within a query.

Rem em ber, too, that you should only allow the characters that you actually need. Otherwise,
you risk inadvertently allowing characters which can lead to problem s. For exam ple, %3B is
the hex code for a sem icolon so, if you block the user from entering sem icolons, they can still
delete your custom er database by using %3B instead. The cure? Block the % sym bol too.

Adding Data to a Table

Now that we can read and search a MySQL table, it's about tim e that we added the ability to
store new data records too. This will allow us to stop using phpMyAdm in to insert data, as
we'll be able to use our own program instead.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
270
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Let's write a little application that allows us to create a new custom er in the existing
custom ers table. We'll start by displaying a form with space for the 6 fields (firstnam e,
surnam e, title, address, phone and em ail). Then, when the user presses the Subm it button,
we'll add the contents of those fields into a new database record (or, to use the correct
term inology, into a new table row). We'll also need to create a new id, of course. However,
MySQL will take care of that autom atically, as the id field is set to auto_ increm ent.

Here's the application in action. First, the data entry form :

Having filled in the form , I click the button and see the following:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
271
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Neat. Not only has the data from the form been inserted, but we also know the id that was
generated for the auto_ increm ent id field. J ust to m ake sure it really did work, let's pop
into phpMyAdm in and check that a new custom er record has indeed been created:

Excellent, although there’s one m inor bug im m ediately apparent. The spaces and carriage
return characters have been stripped out of the address, which has been stored as
65TheStreetLondon. Can you work out why, and what needs to be done in order to fix this?

One other point worthy of m ention here. Why do the id’s go 1, 2, 3, 14 instead of 1,2,3,4?
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
272
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

While I was writing and debugging the addcust.php program that you're about to see,
records with ids from 4 to 13 were created. I subsequently used phpMyAdm in to delete those
records. And yet, next tim e MySQL auto-generated an id, it used 14 rather than going back
to 4.

There’s no rule as to how auto-increm ent fields are generated. All that you’re guaranteed is
that they will be unique, ie that there won’t be two custom ers with the sam e id. You certainly
should never assum e that they will be consecutive. So, for exam ple, attem pting to count the
num ber of custom ers in the table by looking for the one with the highest-num bered id sim ply
will not be reliable.

Here's the full PHP code for the addcust.php application:

<?php

# ADDCUST.PHP - Add a new customer to the customers table

# Check whether there's a surname specified.

# If not, then just display the form.

if (!isset($_POST["tb_surname"])) # if no surname specified

{
echo "<HTML>";
echo "<body>";
echo "<form method=\"POST\">";
echo "<table>";
echo "<tr>";
echo "<td>First Name</td>";
echo "<td><input type=\"text\" name=\"tb_firstname\" size=\"25\"></td>";
echo "</tr>";
echo "<tr>";
echo "<td>Surname</td>";
echo "<td><input type=\"text\" name=\"tb_surname\" size=\"25\"></td>";
echo "</tr>";
echo "<tr>";
echo "<td>Title</td>";
echo "<td><input type=\"text\" name=\"tb_title\" size=\"25\"></td>";
echo "</tr>";
echo "<tr>";
echo "<td>Address</td>";
echo "<td><textarea rows=\"2\" name=\"ta_address\" cols=\"20\"></textarea></td>";
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
273
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

echo "</tr>";
echo "<tr>";
echo "<td>Phone</td>";
echo "<td><input type=\"text\" name=\"tb_phone\" size=\"25\"></td>";
echo "</tr>";
echo "<tr>";
echo "<td>Email</td>";
echo "<td><input type=\"text\" name=\"tb_email\" size=\"25\"></td>";
echo "</tr>";
echo "</table>";
echo "<br><br>";
echo "<input type=\"submit\" value=\"Create Customer\" name=\"button\">";
echo "</p>";
echo "</form>";
echo "</body>";
echo "</HTML>";
} # if no surname specified

else
{ # a surname was specified so create new record

# Retrieve the data from the form

$title = $_POST["tb_title"];
$firstname = $_POST["tb_firstname"];
$surname = $_POST["tb_surname"];
$address = $_POST["ta_address"];
$phone = $_POST["tb_phone"];
$email = $_POST["tb_email"];

# Now sanitize everything

$title = sanitize_form_text($title);
$firstname = sanitize_form_text($firstname);
$surname = sanitize_form_text($surname);
$address = sanitize_form_text($address);
$phone = sanitize_form_text($phone);
$email = sanitize_form_text($email);

# Now connect to the database

$db_host = "localhost";
$db_database = "thewebbo_hms";
$db_username = "thewebbo";
$db_password = "xyz";
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
274
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

$dbcnx = mysql_connect($db_host,$db_username,$db_password);
mysql_select_db($db_database);

# Now construct the MySQL query to create the new record

$query = "insert into customers ";
$query .= "(firstname,surname,title,address,phone,email) ";
$query .= "values (";
$query .= "'$firstname','$surname','$title','$address','$phone','$email')";
$q = mysql_query($query);
$new_row = mysql_insert_id();

echo "<HTML>";
echo "<body>";
echo "Done. Inserted a new row with an id of " . $new_row;
echo "</body>";
echo "</HTML>";

} # else

exit(); # We're done. Nothing below except functions.

function sanitize_form_text($t)
{
$t = strip_tags($t);
$t = ereg_replace("[^A-Za-z0-9@._-]", "", $t);
return $t;
}

?>

Alm ost everything should be fam iliar here, as the structure is very sim ilar to the previous
search exam ple. The m ost im portant new feature is the way we insert a new row into a table.
Once you’re connected to the database, the syntax of the MySQL query is:

insert into table (field1,field2) values (‘value1’,’value2’)

We then em bed it into a PHP mysql_query function call. In the above exam ple, I’ve built
up the query string over 4 lines. This is purely for clarity, including the way that the listing
looks when printed. You don’t have to do it like that if you don’t want to.

The two sets of item s in brackets correspond to the field nam es you want to insert, and the
values for them . You don’t need to specify every field – if you don’t, ones you om it will be
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
275
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

left blank unless you specified a default value when you created the table initially. Note that
we didn’t bother specifying a value for the id field – this was generated autom atically because
it’s set to auto_ increm ent. Also note the single quote m arks around the values, which are
required if you’re inserting data into a text field as opposed to a num eric one.

There’s a handy PHP function called mysql_insert_id(), which returns the value of the
last auto_ increm ent that MySQL generated. After inserting the record, we call this function
in order to find the value, and then we display it. You m ight want to adapt the program so
that, once the row has been inserted, you then retrieve it from the database and display all of
the new custom er’s data for verification. Knowing the id m akes this easy – you can just do
som ething like:

$new_id = mysql_insert_id();
$query = “select * from customers where id=$new_id”;
$q = mysql_query($query);

If you are executing a MySQL query which you know will only be returning precisely one
record (not zero, and not m ore than one), you don’t need a while… loop in order to skip
through the results. Instead, you can sim ply do:

$row = mysql_fetch_array($q);
echo $row[“firstaname”];
echo $row[“surname”];

and so on. There is only ever going to be one array to fetch, so a loop is unnecessary.

It’s worth pointing out that I didn’t generate all of the HTML code for the data entry form by
hand. I used a separate HTML editor. Once I’d designed the form and it looked the way I
wanted it, I then copied the code into the PHP file and added the echo statem ents around it,
as well as changing all the HTML double quote m arks to \” in order to distinguish them
from the ones that are part of the PHP code. Using an HTML editor to m ock up page which
then becom e PHP program s is com m on practice am ong developers. Don’t assum e that you
have to write all your HTML by hand.

Editing a Data Record

So far, we've covered reading data from a table, searching a table, and adding new records.
Next, you'll need to know how to edit an existing record. J ust as with using SELECT FROM
to read data and INSERT INTO to create new records, existing a record is just as easy. It's
sim ply a m atter of knowing how to use an UPDATE…SET query.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
276
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

A typical edit m ight be:

update customers set phone='1234' where id=25

This sets the phone num ber field to '1234' for the custom er whose id is 25.

Another exam ple m ight be the case of J ane Allen who calls to say that she's recently m arried
and her surnam e is now Cham bers. To update her entry in the database, you would probably
use:

update customers set surname='Chambers' where surname='Allen'

Which, at first glance, m ight appear to be sensible. It would certainly work, in that it would
change J ane Allen to J ane Cham bers. Trouble is, it'll change the surnam e of every 'Allen' in
the custom ers table, and not just J ane. One solution is to do the following instead:

update customers set surname='Chambers' where surname='Allen' and

firstname='Jane'

This will probably work. But again, there m ight be m ore than one J ane Allen in the
database, so we need a m ore robust, reliable solution.

You will recall that we designed our database table so that every entry, ie every row, has a
unique id num ber. Being able to address a particular row by its id is very useful, especially
when you're editing or deleting a row and you need to be sure that you're addressing the
right one.

Here's how I've chosen to design m y editcust.php application. First, we display a list of every
custom er's firstnam e and surnam e, along with a radio button like this:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
277
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

The user chooses a nam e to edit (Robert Schifreen in this case), clicks the button and is
presented with the custom er's details in a pre-filled form :

Now, we can just edit the record as required, then hit the Save button. The database is
am ended and a final screen appears:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
278
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

As to how we m ake sure that the right Robert Schifreen is being edited, that's down to you.
Perhaps, when displaying the list of nam es to edit, you should also include the address or the
postcode. Anyway, here's the PHP custom er editing application in full:

<?php

# EDITCUST.PHP - Allow the user to edit a customer record

# Connect to our database. We'll need this regardless.

$db_host = "localhost";

$db_database = "thewebbo_hms";

$db_username = "thewebbo";

$db_password = "xyzabc123";

$dbcnx = mysql_connect($db_host,$db_username,$db_password);

mysql_select_db($db_database);

# Now check the action parameter from the URL to see what we need to do
$action = $_GET["action"];

if ($action == "") # No action specified so show the home page

$query = "select id,firstname,surname from customers";

$q = mysql_query($query);

echo "<form method=\"post\" action=\"editcust.php?action=show_record\">";

echo "<table border=1>";

# Create the table top row

echo "<tr>";

echo "<th>Name</th><th>Select</th>";

echo "</tr>";
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
279
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

while ($row = mysql_fetch_array($q))

echo "<tr>";

echo "<td>" . $row["firstname"] . " " . $row["surname"] . "</td>";

echo "<td>";

echo "<input type=\"radio\" value=\"" . $row["id"] . "\" name=\"id2edit\">";

echo "</td>";

echo "</tr>";

echo "</table>";

echo "<br><br>";

echo "<input type=\"submit\" value=\"Edit selected customer\" name=\"button\">";

echo "</form>";

exit();

} # action = ""

if ($action == "show_record")

# Display the customer record form. Populate it with the details of

# the customer whose id is passed in the id2edit radio button.

# Get the contents of the id2edit form variable

$id2edit = $_POST["id2edit"];

# Now get the customer's details as we'll need them to populate the form

$query = "select * from customers where id=$id2edit";

$q = mysql_query($query);

$row = mysql_fetch_array($q); # don't need a while loop as there's only 1 row

echo "<HTML>";

echo "<body>";

echo "<form method=\"POST\" action=\"editcust.php?action=store_record\">";

echo "<table>";
echo "<tr>";

echo "<td>First Name</td>";

echo "<td><input value=\"" . $row["firstname"] . "\" type=\"text\" ";

echo "name=\"tb_firstname\" size=\"25\"></td>";

echo "</tr>";

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
280
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

echo "<tr>";

echo "<td>Surname</td>";

echo "<td><input value=\"" . $row["surname"] . "\" type=\"text\" ";

echo "name=\"tb_surname\" size=\"25\"></td>";

echo "</tr>";

echo "<tr>";

echo "<td>Title</td>";
echo "<td><input value=\"" . $row["title"] . "\" type=\"text\" ";

echo "name=\"tb_title\" size=\"25\"></td>";

echo "</tr>";
echo "<tr>";

echo "<td>Address</td>";

echo "<td><textarea rows=\"2\" name=\"ta_address\" cols=\"20\">";

echo $row["address"];

echo "</textarea></td>";

echo "</tr>";

echo "<tr>";

echo "<td>Phone</td>";

echo "<td><input value=\"" . $row["phone"] . "\" type=\"text\" ";

echo "name=\"tb_phone\" size=\"25\"></td>";

echo "</tr>";

echo "<tr>";

echo "<td>Email</td>";

echo "<td><input value=\"" . $row["email"] . "\" type=\"text\" ";

echo "name=\"tb_email\" size=\"25\"></td>";

echo "</tr>";

echo "</table>";

echo "<br>";
echo "<input type=\"submit\" value=\"Save\" name=\"button\">";

echo "</p>";

# Pass the id along to the next routine in a hidden field

echo "<input type=\"hidden\" name=\"id2edit\" value=\"" . $id2edit . "\">";

echo "</form>";

echo "</body>";

echo "</HTML>";
exit();

} # action = show_record

if ($action == "store_record")

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
281
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

# Retrieve the data from the form and update customer record

$id2edit = $_POST["id2edit"]; # Get the id from the hidden field

$title = $_POST["tb_title"];

$firstname = $_POST["tb_firstname"];

$surname = $_POST["tb_surname"];

$address = $_POST["ta_address"];
$phone = $_POST["tb_phone"];

$email = $_POST["tb_email"];

# Now sanitize everything

$title = sanitize_form_text($title);

$firstname = sanitize_form_text($firstname);

$surname = sanitize_form_text($surname);

$address = sanitize_form_text($address);

$phone = sanitize_form_text($phone);

$email = sanitize_form_text($email);

# Now we can update the customer's data, one column at a time.

$x = mysql_query("update customers set firstname = '$firstname' where id=$id2edit");

$x = mysql_query("update customers set title = '$title' where id=$id2edit");

$x = mysql_query("update customers set surname = '$surname' where id=$id2edit");

$x = mysql_query("update customers set address = '$address' where id=$id2edit");

$x = mysql_query("update customers set phone = '$phone' where id=$id2edit");

$x = mysql_query("update customers set email = '$email' where id=$id2edit");

echo "<HTML>";

echo "<body>";
echo "Thank you. Edit complete. To return to the home ";

echo "screen click <a href=\"editcust.php\">here.</a>";

echo "</body>";

echo "</HTML>";

exit();

} # action = store_record

function sanitize_form_text($t)

{
$t = strip_tags($t);

$t = ereg_replace("[^A-Za-z0-9@ ._-]", "", $t);

return $t;

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
282
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

?>

Once again, this exam ple is arranged in a single file (editcust.php) and all in PHP m ode (ie,
without flipping back into HTML m ode). Rem em bering that the Web is a stateless system ,
where each page has no idea what cam e before it, I have used a param eter on the URL to
m aintain state. You can read m ore about this on page 295.

The program starts by perform ing the necessary code to connect to the database, as this will
be needed regardless. Then, we use $_GET["action"] to retrieve the value of the "action"
param eter from the URL which tells us what to do next. The first tim e around, this is not
present and so we show the hom e page of the system , ie the screen from which the user can
select a custom er to edit.

We build the selection form dynam ically from the database, producing a table where each
row contains a custom er nam e and a radio button. The nam e of the radio button is id2edit.
The value of each radio button is the database id num ber of the custom er. This is standard
practice, and a very com m on way of using radio buttons (or dropdown boxes) to select a
database record. By setting the radio button value to a database id, the code which receives
our chosen nam e knows precisely which custom er record we want to edit.

The "action" for the form is set to editcust.php?action=show_record. This m eans

that the PHP program will be called again when the form is subm itted. But this tim e,
$_GET["action"] will be equal to show_record and so a different function will be
perform ed.

When we detect that $_GET["action"] is "show_ record", we know that we need to display
the custom er record form and that we also need to pre-load it with the data for the specified
custom er.

First, we use $_POST to retrieve the value of the id2edit radio button in the previous form .
We now know which database record the user wants to edit. So, having already connected to
the database at the start of the program , we retrieve that user's details (nam e, address,
phone, em ail, title) into a $ row array. Then we create a custom er record form , just as we did
in the previous addcust.php exam ple for creating a new custom er. The only difference is
that, in addition to displaying each form field (textbox or textarea), we also generate HTML
which fills in the contents of that field for the user of the site to edit.

Som e exam ple HTML code for displaying a text box plus som e content is:

<input type="text" name="firstname" value="Robert" size="25">

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
283
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

As you can see, the value= com ponent allows you to pre-fill the text box with whatever
content you want. So in this case we do just that, but we fill it with som e text that was
retrieved from the database.

The HTML code to pre-fill a textarea is slightly different. It looks like this:

<textarea rows="2" name="address">

123 Farm Road, London W8
</textarea>

The action for this editing form is set to editcust.php?action=store_record. So

once again, when the edit has been m ade and the user presses the Save button, this PHP
program will be called one m ore tim e. This tim e, when we discover that $ action is
"store_ record", we retrieve the edited values from the form and update the database
accordingly.

One thing to note is the hidden field in the sh ow_ record form . In addition to pre-populating
the form with the custom er's data, we also create a hidden field called id2edit. This then gets
passed to the store_ record com ponent. If we didn't include this hidden field, then the
store_ record part of the program would know a custom er nam e, address, phone, em ail and
title, because these were part of the form , but it wouldn't know which database id num ber
they related to and thus wouldn't be able to update the table.

Deleting Data

J ust one m ore database function to cover. We can now read, search, insert and edit data in
MySQL tables. All that rem ains is to be able to delete records. This is very sim ple, using a
DELETE FROM query. For exam ple:

delete from customers where id=8

or

delete from customers where surname="Smith" or firstname="James"

Mostly you'll use the id-based version, in order to ensure that you're definitely deleting the
correct record.

Incidentally, be very careful when using DELETE FROM, to ensure that you always specify a
WHERE clause. For exam ple, if you forget to do so, and you try:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
284
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

delete from customers

you'll find that every custom er in your table will be deleted And no, there's no undo facility
in MySQL. You'll have to revert to the backup which you m ade via the export facility in
phpMyAdm in. What? You m ean you aren't in the habit of backing up your MySQL tables
regularly? Maybe you need to consider doing so.

There is little to be gained by including a com plete exam ple application to delete a custom er
from our table. It would be alm ost identical to the editcust.php exam ple. J ust use a form
and som e radio buttons to allow the user to pick the id of the record they want to delete.
Then, next tim e around, retrieve that id and do:

$id2delete = $_POST["id2delete"];
$query="delete from customers where id=$id2delete";
$q = mysql_query($query);
echo "Record number " . $id2delete . " has been deleted.";

A rem inder. During this chapter and the program listings within it, we've used $_GET and
$_POST to retrieve inform ation. Rem em ber the difference. To retrieve inform ation that was
passed as part of the URL, use $_GET. To retrieve inform ation that was passed as a form
field (textbox, textarea or a hidden field), use $_POST. J ust as im portantly, rem em ber that
any inform ation that you don't explicitly pass either on the URL or in a form field will not be
present.

Putting it All Together

So there you have it. You now know about databases, PHP, and how to put the two together.
You have all the building blocks necessary to design and create a com plete PHP/ MySQL
application that has the ability to allow users to create, edit, search and delete inform ation.
Whether your application uses one table or one hundred, the processes are all the sam e, once
you understand the concepts.

The idea of using action= on the URL to allow one PHP file to contain an entire application
is a good one, and one that I use all the tim e. For exam ple, you could create the entire Hotel
Managem ent System in a single hm s.php file. At the start, if $ action is blank, you display the
m ain m enu (add custom er, edit custom er, and so on). If the user chooses "add custom er",
then the action of the m enu form m ight be hms.php?action=add_customer. This would
display the data entry form , and this form m ight have an action of
hms.php?action=add_customer_store. Next tim e through the program , if $ action is
equal to add_customer_store, you know that the add_ custom er form was filled in by the
visitor and your next step is to retrieve the contents of the form and store it in the database.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
285
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Of course, if you prefer, you can split your application into lots of separate files. You m ight
have an hm s.php file which does nothing m ore than display the m ain HMS m enu. Then, if
the visitor chooses to add a new custom er, you use a form or a sim ple hyperlink to go to
hm s_ addcust.php instead.

How you choose to arrange things is entirely up to you. Personally, I like to keep an entire
application in a single file because it's easier to find what you're lookin g for during an editing
session. But if you like keeping each discrete part of an application separate, then feel free
to do so. This is especially useful, of course, if you're working on a project with som eone else.

Having covered all the m ain points of developing a web database application, the rem ainder
of this book looks at im proving your general web knowledge and turning a site from a hobby
com puting project to a viable business idea.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
286
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Debugging and Global Variables

Professional PHP program m ers don’t use a sim ple text editor like PSPad to develop their
code. Instead they install what’s known as an IDE, or Integrated Developm ent Environm ent,
on their PC. This includes PHP, a web server, and a sophisticated debugger to help in solving
problem s.

There are various PHP IDEs on the m arket, som e of which are very reasonably priced and
som e of which are m ost definitely not. However, they are best avoided by all but the m ost
serious PHP developers, because they’re large, com plex, and require you to install things on
your PC (specifically PHP and a web server) which pose a serious risk to stability an d
security unless you know what you’re doing. After all, with a web server on your com puter,
anyone who knows its IP address could connect to your PC and browse your files if you don't
configure it correctly.

All of which leaves us with one problem . If all you have is a copy of PSPad and access to a
web server over the internet, how do you track down those elusive errors in your program s
without the aid of a proper debugger? Hopefully, the rem ainder of this chapter will help.

There are two m ain types of error that you’ll encounter. The first is a syntax error, where the
code you write isn’t valid PHP. For exam ple:

echo "Sorry, room " . $room[1] . " is occupied"

You'll spend ages looking for the m issing quote, or dot, only to realise that the problem is
actually a m issing sem i-colon on the end of the line.

The other type of problem is where your PHP code is valid, but doesn't produce the results
that you were expecting. For exam ple, having added a sem icolon to the above line, it
produces:

Sorry, room is occupied

The m istake is clearly yours rather than the server's. It's a coding error. The $ room [1]
variable is em pty and you need to find out why.

Syntax Errors

A syntax error in a PHP file will norm ally prevent the entire program from running, even if
the error is towards the end of the file. In m ost cases, you'll receive an error m essage from
the server which will help you identify the cause of the problem . For exam ple:
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
287
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This should be enough to help you track down the problem . However, som e server operators
regard it as a security risk to display syntax errors, because they could provider hackers with
clues as to the inner workings of a program (such as the nam es of variables or the locations
of files). So they configure their server not to display syntax errors at all. Which m eans that,
if there's one in your PHP file, all you'll see is a blank screen. The program won't run, but
you won't be told why. In such cases, your only realistic option is to find a different server.

It's im portant to note that, although server-generated syntax errors tell you the line num ber
in your code that contains the error, this num ber isn't always correct. It's a great starting
point when you're trying to track down the problem , but it's not infallible. This is because
PHP tends to assum e that the error occurred on the line following the last valid line. Which
isn't always the case. This often m eans that the indicated line num ber will be "out" by 1 or 2,
although in rare cases (especially if you have long blocks of bracketed code and you've
om itted a bracket or added an extra one) it can be even m ore inaccurate.

One useful technique, if you're stuck with a particularly elusive syntax error, is "the chop".
Split the PHP file into two separate files, of roughly even lengths. So long as you don't break
up any blocks of bracketed code, ie so long as the opening or closing bracket doesn't end up
in the other file, you should be safe. The program s won't work the way you expect, but that
doesn't m atter. What m atters is that one of them will generate a syntax error when you surf
to it, and one won't. You now know for sure which half of the file contains the error. So split
that file into 2 and repeat the process. Even tually, the "half" which contains the syntax error
will be sm all enough that you should be able to recognise where the problem lies.

Coding Errors
When it com es to tracking down coding errors, your best friend a sim ple echo statem ent,
possibly followed by exit(). For exam ple, in the case m entioned above, precede the lin e
with:

echo $room[1];
exit();

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
288
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

When your program reaches this point, it will display the value of the variable and then stop.
Of course, the fact that the variable is blank m eans that you won't see anything, so you m ight
prefer:

echo "XYZ" . $room[1] ;

exit();

You can now look on the generated web page for XYZ, and you'll know where to expect to see
the room num ber displayed alongside.

And one final addition, which will also help. Change the code to:

echo "XYZ" . $room[1]; #debug

exit(); #debug

This way, once the program is working properly, you can easily search for the lines with the
com m ent in order to rem ove them .

If all this effort doesn't bring the bug out of the woodwork, then m ove your debug code
further up the file, to just after the place where $ room [1] is initially defined. Hopefully, its
value at that point should be correct. So som ewhere between those two points it's being
changed. All that rem ains is to position your debug code, in turn, just after every line that
changes (or which you suspect m ight change) the value of $ room [1]. Chances are, the
problem will be down to a sim ple m is-spelling, eg room s rather than room , or "1" rather than
1.

If you want to output the values of an entire array rather than a single variable, you don't
have to write a for… loop to do it. PHP has such a feature built in. Assum ing there's a
problem with one or m ore elem ents of the $ room s array, and you want to see the whole array
rather than just elem ent 1, use var_ dum p. The following code:

<?php
$rooms[1] = "ABC";
$rooms[2] = "DEF";
$rooms[3] = "GHI";

echo "<pre>";
var_dump($rooms);
echo "</pre>";
?>

Produces the following output:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
289
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This tells you that the array has 3 elem ents. Elem ent [1] is a 3-letter string com prising ABC.
Elem ent 2 is a 3-letter string of DEF, and so on.

If this still doesn't help, you can go one step further and output the contents of every variable
that the program knows about. J ust do this:

echo "<pre>";
var_dump(get_defined_vars());
echo "</pre>";

This works because there's a PHP function which creates an array containing all of the
variables. So we call this function, then use var_dump to display the array. As for the other
two lines, the <pre> tag tells the web browser that it’s being asked to display preform atted
text, and is often used when displaying program listings and the like. J ust trust m e that the
output of var_ dum p looks m uch m ore readable if surroun ded by such tags.

While this also produces the list of the contents of the room s array, it com es at the end of a
very long (m any hundreds of lines) listing of lots of other variables as well. These are not
variables that your program has created, but ones which the web server and PHP use for
their own internal purposes. Som e of these are very useful. For exam ple, take a look at this
extract from the list that is returned on the the-web-book.com server:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
290
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This section, as you can see from the top line, is concerned with the contents of the
$ _ SERVER[] array, which contains 31 elements. The elem ent called “REQUEST_ URI”
(rem em ber that elem ent nam es don’t have to be num eric) , right down at the bottom of the
list here, seem s to contain the nam e of our program file. Let’s just check this, by writing a
program thus:

<?php
echo $_SERVER["REQUEST_URI"];
?>

And here’s the result:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
291
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This is hugely useful, for reasons we’ll com e onto in the next chapter.

The $ _ SERVER Variables

There are lots of other useful item s in the $ _ SERVER[] array. Let’s have a look at it with a
var_dump($_SERVER) call, This gives us:

Oops, that’s what happens if you forget the <pre> tags! Let’s try that again:

array(32) {
["DOCUMENT_ROOT"]=>
string(27) "/home7/thewebbo/public_html"
["GATEWAY_INTERFACE"]=>
string(7) "CGI/1.1"
["HTTP_ACCEPT"]=>
string(3) "*/*"
["HTTP_ACCEPT_ENCODING"]=>
string(13) "gzip, deflate"
["HTTP_ACCEPT_LANGUAGE"]=>
string(5) "en-GB"
["HTTP_CACHE_CONTROL"]=>
string(14) "max-age=259200"
["HTTP_CONNECTION"]=>
string(10) "keep-alive"
["HTTP_HOST"]=>
string(20) "www.the-web-book.com"
["HTTP_PRAGMA"]=>
string(8) "no-cache"
["HTTP_USER_AGENT"]=>

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
292
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

string(151) "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1;

Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR
3.0.30729; Media Center PC 6.0)"
["HTTP_VIA"]=>
string(60) "1.1 mink.brighton.ac.uk:80 (squid/2.5.STABLE12-20051129)"
["HTTP_X_FORWARDED_FOR"]=>
string(13) "191.82.12.39"
["PATH"]=>
string(13) "/bin:/usr/bin"
["QUERY_STRING"]=>
string(0) ""
["REDIRECT_STATUS"]=>
string(3) "200"
["REMOTE_ADDR"]=>
string(13) "191.82.12.56"
["REMOTE_PORT"]=>
string(5) "42476"
["REQUEST_METHOD"]=>
string(3) "GET"
["REQUEST_URI"]=>
string(11) "/test99.php"
["SCRIPT_FILENAME"]=>
string(38) "/home7/thewebbo/public_html/test99.php"
["SCRIPT_NAME"]=>
string(11) "/test99.php"
["SERVER_ADDR"]=>
string(14) "66.147.240.168"
["SERVER_ADMIN"]=>
string(26) "[email protected]"
["SERVER_NAME"]=>
string(20) "www.the-web-book.com"
["SERVER_PORT"]=>
string(2) "80"
["SERVER_PROTOCOL"]=>
string(8) "HTTP/1.0"
["SERVER_SIGNATURE"]=>
string(179) "
Apache/2.2.11 (Unix) mod_ssl/2.2.11 OpenSSL/0.9.8k DAV/2
mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at
www.the-web-book.com Port 80

"
["SERVER_SOFTWARE"]=>
string(120) "Apache/2.2.11 (Unix) mod_ssl/2.2.11 OpenSSL/0.9.8k DAV/2
mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635"
["PHP_SELF"]=>
string(11) "/test99.php"
["REQUEST_TIME"]=>
int(1249398795)
["argv"]=>
array(0) {
}
["argc"]=>
int(0)
}

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
293
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

That's a lot better. Although this data m ay be useful to you, be aware that it’s server-specific.
Som e servers don’t include as m uch inform ation. Som e include a lot m ore. Som e don’t
actually provide anything at all in $ _ SERVER, citing security reasons. So use what’s
available on your server, while rem em bering that it m ay change if you m ove to a different
one.

One particularly interesting server variable is $_SERVER[“HTTP_REFERER”], which lists

the URL that the visitor to your site cam e from . So if, for exam ple, your visitor was at
www.site1.com/example.html and clicked on a link to your PHP program ,
$_SERVER[“HTTP_REFERER”] would be www.site1.com/example.html. However,
not all web servers pass on this inform ation, so you can’t always rely on it being set. In
which case, you could do som ething like:

<?php
if (isset($_SERVER["HTTP_REFERER"])
{
echo "You came from " . $_SERVER[“HTTP_REFERER”];
}
?>

Note the isset() function, which tells you whether a variable exists or not (ie, whether or
not it is set).

You will see that there are no less than 3 server variables in the above list whose value is
test99.php, ie the nam e of the PHP program file. These are REQUEST_ URI,
SCRIPT_ NAME and PHP_ SELF. We’ll use one of these in a m om ent.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
294
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Application Structure Revisited

Im agine, if you will, a shopkeeper in a sm all store which sells a variety of grocery item s. This
is no self-service em porium . Everything is behind the counter, so you need to ask for an
item , wait for the shopkeeper to hand it to you, then place it in your basket.

But this shopkeeper, though extrem ely fast an d polite, has a flaw. He has no m em ory for
nam es or faces. As far as he's concerned, if you ask for a can of tuna and then a loaf of bread,
he won't rem em ber that the person who wants the bread is the sam e person who wanted the
tuna a few seconds ago. He does, though, have a secret weapon. He has a notepad, and he's
very good at writing notes to help him rem em ber what's going on around him .

The shop, too, has a flaw. There are a series of high sound-proof barriers at the counter, like
the starting stalls on a racecourse. The custom er has no idea, when queuing at the counter,
whether any of the other stalls are occupied or whether he/ she is the only patron in the shop.

To help with preparing the accounts at the en d of the m onth, the shopkeeper records every
transaction in his notebook. The writes down the item sold, the date and tim e, and which
stall he handed the item to.

Alice, Bob and Charles are in the shop. Alice asks for som e bread, which the shopkeeper duly
hands over. Bob then asks for som e bread, and gets it. Then Charles asks for som e cheese.
Then Alice wants bacon. Then Charles wants bacon too. Then Alice wants apples.

Alice then leaves. David arrives, and happens to end up in the stall previously occupied by
Alice. He buys potatoes and red wine.

As far as Alice is concerned, she asked for, and got, bread, bacon and apples. She is
convinced that she was the only person in the shop. The shopkeeper was serving her, and no
one else.

As far as Bob is concerned, he too was the only person in the shop. He asked for bread, and
received it. Charles, too, asked for cheese and bacon and was duly served. And David got his
potatoes and red wine.

The shopkeeper, of course, has no idea who he served. Each tim e som eone asked for an
item , he retrieved it from the shelf and handed it over. Though he did keep a record in his
notebook, so he knows what was handed over, in what order, and which of the “stalls” he
handed it to. One particular stall, for exam ple, got bread, bacon, apples, potatoes and red
wine. As it happens, those 5 item s went to 2 different people but the log doesn't record this.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
295
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Web Servers and the Real World

OK, you can open your eyes now. We’re back in the real world.

The shop analogy describes exactly how a web server works. Requests for pages com e in
from all over the world and they are handled, one at a tim e, by the web server. Maybe Alice
wants to see the hom e page, so we send it down the line to her. Then Bob wants to see the
Contact Us page, so we send it. Then Alice clicks on the “Our New Widget” link, from the
hom e page, so we send it to her. There is no linkage between Alice’s two page requests.
First, she got the hom e page. Then, som e tim e later, we sent her the page about the n ew
widget. In the m ean tim e, 1, 2, 3 or a m illion other people m ight have requested pages. All
we have to tie everything together is the server’s log file, like the shopkeeper’s notepad,
which tells us who asked for what, and in what order.

Alice and David both used the sam e stall, but the log file doesn’t provide any way to record
this. All that the shopkeeper knows is which stall a particular item was handed to, and not
the nam e of the person in that stall at the tim e. In the sam e way, two different users of a web
server m ay use the sam e IP address, albeit not at the sam e tim e.

This lack of an ability to tie one user's chain of actions together is called statelessness. In
other words, a web page (or a request from a user's browser for the web server to send a
page) is stateless. It doesn't contain any inform ation about the state of the connection
between the user and the server.

When the server sim ply contains static HTML pages, this isn’t a problem . People send in
requests for pages, and we send them out as fast as possible. But with web-based, server-
side applications, things are different. Here's a trivial exam ple. The receptionist at the hotel
views the list of guests, and clicks to see the full details about guest num ber 64. By clicking
on the "View Full Info" button, he/ she launches another PHP program . This program is
quite capable of showing all the inform ation about a guest, but doesn't know which one to
show. Sure, 64 was chosen in the previous program , but that wasn't passed on.

Here's another exam ple. Take the case of our hotel m anagem ent system , and im agine a page
that lets m em bers of the public check availability. Brian surfs to the site, and enters
"J anuary 9 th " in a drop-down box on the availability checker form . He clicks subm it. A PHP
program receives his date, checks the database, discovers there's one spare room , and sends
back a page saying "yes, we have a room on that date". Three seconds later, J anet fills in the
form . She, too, is looking for som ewhere to stay on the night of J anuary the 9 th . Again, the
PHP program checks the database and, what do you know, there's one vacancy. J anet and
Brian both begin to fill in the booking form ...

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
296
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Welcom e to the world of m ulti-user database applications.

How do you solve the problem ? One way is for the system to reserve the room for Brian for,
say, 15 m inutes. Until then, anyone else who tries to book that room will be told it's not
available. After 15 m inutes, the lock is released and it goes back into the pool of available
room s, assum ing Brian hasn't booked it.

How do you do this in practice? One way is to have a colum n in the room s table called
locked_ until. To lock a room , just look up the current tim estam p, add 90 0 to it (90 0
seconds is 15 m inutes), and write that into the locked_ until field of the room that Brian's
interested in. When you com e to search for availability, if there's anything in a room 's
locked_ until field, assum e the room is not available. And every 5 m inutes or so, run a
database query that rem oves every locked_ until field which is less than the current
tim estam p.

This is just one of the concepts you need to appreciate when writing web-based applications
using server-side languages such as PHP. Som ething else that you need to consider is how to
structure your app. For exam ple, do you keep all of the code in a single file, or do you use
one single, larger file to contain your entire application? This is som ething we have already
discussed.

Saving State

Earlier in this chapter, we talked about the way that web servers are stateless. When a server
receives a request from a visitor to send out a page, the server has no idea who the user is, or
what state their session is in. Have they just arrived at the site? Or have they been browsing
for a while? Are they logged in, or are they an untrusted user?

One way to solve this problem is to use a PHP feature called sessions. This is an advanced
topic, beyond the scope of this introductory book. If you want to know m ore, type "php
sessions" into your favourite search engine.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
297
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

How to Back Up your Web Site

Like any other collection of com puter-based files, you need to back up your web site. Sure,
m ost web hosting com panies have their own backups, but that's only to protect them selves
against m ajor disasters like the loss of an entire server and all of the custom ers' sites that it
contained. If you accidentally delete a key file from your site, or som eone m anages to hack
one of your pages and replace its contents with porn, it's unlikely that your hosting com pany
will be willing or able to help. Many com panies don't do backups properly, and web hosting
com panies are no exception. So it's m uch better to back up your own site and be safe rather
than sorry. Also, if you ever want to m ove your site to a different server, having a backup to
upload to the new server m akes the process relatively easy.

At the very least, your web site will consist of a collection of assorted files (m ostly HTML and
som e im ages, probably) in a top-level folder called som ething like public_ htm l. There m ay
also be som e additional folders within that top-level one too. All of these folders (ie, the
entire contents of public_ htm l and everything within it) will need to be backed up.

Unless you know for sure that you need to, it's unlikely that you'll need to back up anything
that's outside of public_ htm l. Generally speaking, these files are there to help the server
rather than you, and contain non-essential things such as logs. So for backup purposes they
can be ignored. One exam ple of where data outside of public_ htm l does need to be backed
up, though, is if your host insists on .htaccess files being placed in a specific folder outside of
the public_ htm l one. This is indeed the case with hostm onster.com , as discussed on page
114.

Backing up a web site is sim ply a case of downloading the files to a local PC for safekeeping.
To download the files you can use any FTP program , including FileZilla. J ust connect to
your site, navigate to a suitable em pty folder on your local com puter. Then find the rem ote
folder on the server (eg, public_ htm l), right-click it, and choose Download. The files will
begin downloading. Once it's finished, either keep the files on your PC, or perhaps archive
them to a CD, DVD, USB pen drive or external drive for safekeeping. Now, if anything
happens to the contents of your web server, you have a safe copy.

You don't have to back up the entire site at once, of course. If you just want to download a
single file, the sam e rule applies. In FileZilla, right-click the filenam e on the rem ote server
and choose the Download option.

Don't Forget the Data

Having backed up the HTML and im age files from your site, you also need to back up your
MySQL databases. Obviously this won't be relevant if you don't use a database. But if you
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
298
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

do, failing to back up the database as well as the contents of public_ htm l m eans that m uch of
the content of your site has not been backed up. Thankfully, backing up is easy with
phpMyAdm in, which is a tool we first encountered on page 190 for creating database tables
and inserting inform ation into them .

To back up a database, start phpMyAdm in by surfing to its URL, or via the control panel on
your web host. Select your database from the list on the left hand side, and click on Export
from the m enu item s along the top. You'll then see som ething like this:

In the "Export" box, choose which tables in the database you want to back up. Assum in g
you'll be wanting to restore the backup onto a web server and into a MySQL database in the
future, leave the export form at set to SQL. But you m ay wish to explore the other options,
such as CSV or Excel, if you want to export the MySQL database tables into a text or
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
299
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

spreadsheet form at. This can be useful if, for exam ple, you have been running an online
survey which saves its data into a database and you then want to extract the inform ation into
a spreadsheet to analyze offline.

All that rem ains is to tick the "save as file" box, type a nam e into the filenam e tem plate area,
and phpMyAdm in will start the backup.

The backup itself will consist of a text file, downloaded to your PC, which contains a program
script. By uploading this script to phpMyAdm in in the future, it will restore the contents of
the backup into the database tables.

Note that m ost hosting com panies place a lim it on the size of a backup script that you can
upload in order to restore. Check yours by clicking on the Im port link and looking for any
hint. Here's the screen from hostm onster.com 's version of phpMyAdm in which, as you can
see, has a lim it of 51,20 0 KiB, which is around 50 m egabytes.

Therefore, if you find that backing up all of the tables of a database results in a script file
larger than 50 MB, re-do the backup in m ultiple parts, a few tables at a tim e, ensuring that
each script is less than 50 MB.

Restoring Lost Inform ation

Hopefully you'll never lose inform ation from your site and so you won't ever need to restore
from a backup. If you do, though, it’s not particularly difficult.

In the case of static files, such as HTML files and im ages, just use FileZilla to re-upload the
files to your site.

To restore a MySQL database that was backed up with phpMyAdm in, start phpMyAdm in, go
to the database you want to restore, then click the Im port link on the top m enu line. Choose
the script file to upload (this needs to be one that was created by phpMyAdm in's export
feature) and your database is restored.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
300
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

If you've never tried backing up and restoring a MySQL database table, now m ight be a good
tim e to m ake sure that you know how to do it. Use phpMyAdm in to create a test table, insert
a couple of rows, then back up the table and delete it. Now try restoring the table from the
backup and check that it reappears.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
301
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Prom oting and Profiting

As you begin to create Web-based applications, your attention will probably turn at som e
point to wondering whether you can m ake m oney from your sites. After all, Facebook and
Twitter are just web-based applications, as indeed is Google. If your site could m ake just a
thousandth of the revenue that those system s m ake, life would be wonderful.

If you're serious about this side of things, I strongly recom m end that you also pick up a
business textbook as well as this technical on e. Making m oney from web sites is as m uch
about knowing about m arketing as being able to write program s. But for now, I'll assum e
you sim ply want an overview of the ways that you can prom ote your site and m ake m oney
from it.

This chapter covers two m ain topics, which are closely linked. First, spending m oney to
advertise your site online. Second, m aking m oney from your site, by hosting other people's
advertising.

Prom oting Your Site

One of the m ost costly m istakes that web site developers m ake is to assum e that, if you build
a site, the visitors will com e in their droves. Frankly, they won't. However good your site is,
your weekly total of visitors will be close to zero unless you can prom ote it. Attracting a
healthy num ber of visitors is difficult. Keeping them com ing back to your site, week after
week, is even harder. After all, think of how m any hundreds or thousands of web sites you've
visited in the past. How m any of them do you visit at least once a week?

Attracting visitors to your site (or, as the professionals call it, driving traffic to your site) can
be done in m any ways. The cheapest option is to sim ply plug away, relentlessly m entioning
it in as m any online forum s and m essage boards as you can find. But do it too often, or
m ention it in places that aren't relevant, and you'll rapidly gain a reputation as a spam m er.

The other end of the scale, if you have a large m arketing budget, is to advertise the site on
radio, TV, and in newspapers and m agazines. However, regardless of the cost, advertising a
web site is relatively ineffective for one sim ple reason: m ost people aren't near their
com puter at the tim e they see or hear your ad. And by the tim e they get to the PC, they'll
have forgotten to visit your site or they'll have forgotten your URL.

Therefore, by far the best way to attract visitors to a web site is through online presence,
where the custom er can instantly click through to your site. It pays to spend som e tim e
reading the various docum entation that Google m akes available to webm asters, to ensure
that your site is as far up the search results pages as you can possibly m ake it. Also, spend
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
302
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

som e tim e researching the sort of news sites th at your ideal visitors m ight read, and, where
relevant, send a press release to the site.

Don't underestim ate just how m uch of a difference it m akes to have your web site m entioned
som ewhere online, where people can click straight through, rather than in print. To quote
one fairly unscientific exam ple, when I wrote an article for a UK-based national newspaper,
the m ention of m y website in print generated a few hundred hits. When I sent a press
release about a new product to about 20 different online news sites, it was published on
about 5 of them and generated a quarter of a m illion hits.

If you want to advertise your site online, and you have som e m oney to do so, by far the m ost
popular service is Adwords, from Google. Sign up for the service via Google's web site, give
them your credit card details, then pay som e m oney into your Adwords account. Then
choose the search term s that you want to buy. For exam ple, if your site is prom oting the Star
Inn Hotel in London, you'll probably want to choose term s such as "star inn hotel", "London
hotel", "cheap London breaks", and so on. The skill is to think of what the typical Googler
m ight be searching for.

If you're happy with the price that Google offers you, click a button and your advertising
cam paign is up and running. When som eone searches for, say, a cheap London break, your
ad will be shown on the right hand side of th e search results page in the Sponsored Links
section. It won't be shown every tim e, necessarily. It depends on how m any other
com panies have bought that search term , and wh ether they've elected to pay m ore than you.

Adwords is a "pay per click", or PPC, service. Google will autom atically display your ad on
search results, but you only pay when som eone actually clicks on the link to your sponsored
site. At which point your Adword account is debited by a sm all am ount. You'll know the
am ount, because you'll have agreed to it when you set up the cam paign. When your account
balance is em pty, Google stops displaying your ads and em ails you a rem inder to add m ore
credit.

The Adwords m anagem ent site is very sophisticated. You can log in and view details of how
often your ads are being clicked on, and you can set daily lim its so that, for exam ple, your
entire balance won't be used up on day one of a cam paign.

If you want to explore the use of Adwords, Google gives away m illions of starter vouchers
every m onth, entitling you to around £ 30 or $ 50 of free Adwords credit. J ust look for the
vouchers in your favourite com puter m agazine. Many Web hosts also give away sim ilar
prom otions, so check on your web hosting control panel to see if yours does. In the case of
Hostm onster, here's the relevant section of the control panel:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
303
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

As you can see, there's $ 50 of free Adwords credit available, as well as som e credit for
spending with Yahoo and Miva. Considering that all three are free, at least to try out, it
m akes sense to spend the free credit and see which, if any, is worth sticking with as a way to
help prom ote your site. However, note that the free Adwords credit offered by Hostm onster
is only available to US-based custom ers.

Making Money

If you want to m ake m oney from your web site, there are really only two ways to do it. One
is to charge visitors a subscription. The other is to place adverts on your pages, and charge
the advertisers for the privilege.

In general, it’s difficult to m ake m oney from a subscription site. Most people don’t like
paying for access to a site, unless it’s for inform ation or other content that they can’t get
elsewhere for free. And even then, they’d rather search the web for a pirated usernam e and
password. Marketing subscriptions is expensive, and persuading existing custom ers to keep
renewing every m onth/ year is also difficult. Therefore, unless you’re an experienced web
m arketer, charging a subscription fee is not recom m ended.

The other option, ie carrying ads on your site, m akes m ore sense. Especially if you can find a
com pany that will do all the hard work for you, to save you having to sell the advertising
space and handle the paym ents yourself. Thankfully, there are indeed such com panies, and
getting everything up and running is incredibly easy. As you m ight expect, the leading player
in this m arket is, once again, Google.

Google Adsense is a schem e whereby your site carries adverts that have been placed by
Google’s Adwords advertisers. So if, for exam ple, an advertiser has sponsored the search
term “cheap hotel break”, and your web site contains inform ation about holidays, then, in
addition to the advertiser’s ads being shown on Google’s search results page, it will also be
shown on your site. And each tim e som eone who visits your site clicks on one of your
adverts, you m ake m oney.

Adsense is well worth signing up for, even if only as a trial to see if it’s worth your while. But
like any other internet-based business, you need to invest som e tim e if you want to m ake the
m ost of it. This m eans continually tweaking the layout of your site, and the content, and the
position of the ads, in order to find out what works best for you.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
304
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

To sign up for Adsense, and hopefully start m aking m oney from your web site, go to
www.google.com/adsense (or the local version of Google in your country, if there is one).
You’ll need to have a Google account to proceed, so sign up if you don’t already have one.
You can then choose a design for the ads, such as from the exam ples shown here:

You can also choose the colour schem e, font style, and whether the ads have rounded corners
or not. You can even specify the nam es of your m ain business com petitors to ensure that
ads for those com panies won’t be displayed on your pages.

Once you’ve specified the ad form at, Google will display a few lines of HTML code. All you
need to do is copy it, and paste it into your web pages at the point where you want the ads to
appear. That’s all there is to it. The HTML code contains a pointer to your unique Google
Adsense account, so your account will autom atically be credited whenever som eone clicks on
an ad. All that rem ains is to log into Adsense every few days and check how m uch you’ve
earned, and then tell Google how you’d like to receive your paym ent.

Incidentally, don't be tem pted to click on the ads yourself, or persuade friends to do so, in
order to m ake a quick buck. It won't work. Google will quickly notice what you're doing, and
close your account.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
305
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Accepting Online Paym ents

Have you ever wondered how sites like Am azon and eBay allow you to buy things online with
your credit card autom atically? Would you like to have your web site offer the sam e facility,
so that people can pay for your products or services online and the m oney autom atically ends
up in your account? If so, read on.

If you're looking to set up an online shop, to sell either physical goods or downloadable
item s, there are various ways to do it. The sim plest is to find out whether your web hosting
com pany and/ or your ISP already offer such facilities. Here's the relevant part of the control
panel from one web hosting com pan y, for exam ple. For as little as £ 8 .99 a m onth, or around
$ 15, you can have an online shop with 150 item s. It just takes a few clicks, and is by far the
easiest way to proceed, short of sim ply selling on eBay instead.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
306
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

If you want to set up your own online shop, however, and do things yourself, you'll need to
learn about two new bits of technology.

First, you'll probably want to find a program that can autom atically m anage your catalogue
of item s, pictures and prices, and turn it into a neat collection of browsable web pages to
publish on your site. You don't have to do it this way, of course. You could create the pages
yourself, but adding new products or categories can be com plicated.

If you don't have a budget, check out a free package called osCom m erce at
www.oscommerce.com. If you would rather pay for a com m ercial product, one m ajor
player is Actinic Catalog (see www.actinic.com).

The second technology is how to actually handle the paym ents. The theory is sim ple. Sign
up for an account with a paym ent handler such as Paypal and/ or Google Checkout. Then
add som e PHP program m ing to your site so that visitors can pay for your goods
electronically.

Shopping cart software such as osCom m erce and Actinic Catalog have paym ent integration
built in. So long as you have an account with one of the supported paym ent com panies, and
your product database contains a unique id num ber and a price for each item , the software
will do the rest. But if you'd rather write your own integration code, it's not particularly
difficult. Every paym ent handler publishes an integration m anual, which contains com plete
instructions and som e sam ple code.

In the case of Paypal, the process is relatively sim ple. You create (or buy som e software that
does it for you) an HTML form that allows the visitor to specify which item they want to buy
from you. The form fields specify the item id and the price. There are also som e additional
hidden fields that contain your account num ber and an order id. You configure the form 's
"action" property so that its contents get sent to Paypal, rather than your own site, when the
visitor clicks the "Subm it" (or probably the "Buy Now") button. Paypal then takes over, asks
the user for the credit card details etc, and credits your account. It then sends back a
confirm ation m essage to your site by calling your URL, eg:

www.yoursite.com/paypal?confirm=yes&order_id=12345

Your PHP code then retrieves the order_ id from the URL, and therefore knows which order
has been successfully processed (or not). You can then update your own records accordingly,
such as by adding a record to your custom er database to indicate that this custom er has paid
for their goods.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
307
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Needless to say, the process is slightly m ore involved than this, partly in order to ensure that
it's secure, but the procedure is very m uch as described.

If you want to m ake things even easier, you don't have to go down the route of full paym ent
integration. For exam ple, on the www.the-web-book.com site is a button that allows you to
m ake a donation for the book by Paypal. This took just a few m inutes to set up, including m e
signing up for a Paypal m erchant account. The lack of proper integration m eans that I don't
have an online MySQL database containing precise details of who has paid, but I can get
basic inform ation by logging into m y Paypal account so it's not a problem . If you want to see
online, check out Paypal (and Google Checkout, which is sim ilar) first. It m ay save you a lot
of tim e.

Managing your Marketing

Whatever you're selling online, and however you're trying to m ake m oney from your site, you
need to be able to m anage your m arketing effort in order to know whether it's actually
working. It's not unknown for large organisations to spend tens of thousands of
pounds/ dollars per m onth advertising their business on Google Adwords. With that sort of
m oney at risk, or even if you're just spending a tiny proportion of that, you need to know
whether your m oney is being well spent. Equally, if you're trying your hand with a DIY
approach, and sending out press releases, you need to know whether or not you're wasting
your tim e.

At the m ost basic level, you can find this out by looking at the raw hit counts on your site.
Most web hosting com panies offer som e form of hit counter, so you can always see at a
glance how busy your site has been. In the case of Hostm onster, here's the relevant section
of the control panel:

The Bandwidth option shows how m uch inform ation has left your site. For exam ple:

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
308
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Webalizer and Awstats show graphics which indicate how busy your site has been. You can
view the num ber of page hits for any given hour, day, m onth or year. Be aware that not all
hosts offer the sam e program s, and in som e cases you need to enable the logging otherwise it
won't be available. This is the case with Hostm onster – if you don't click on the Choose Log
Program s option and enable Awstats and Webalizer, you won't get any data to analyze.

Here are som e of the graphs and reports that Webalizer can show. These are taken from the
site for this book which, as you can see, was pretty popular during August 20 0 9. The reason
for the traffic peaks around 6am is that, at the tim e, the book was m ostly being prom oted on
an Australian web site and yet the server is based in the USA.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
309
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
310
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

With the graphs from system s like Webalizer at your fingertips, it's easy to see whether your
advertising is working. For exam ple, try cancelling your Adwords cam paign for a few days,
then start it again and see if there's a noticeable increase in traffic. Also, log into your
Adwords account on Google and look at your click rates, ie the num ber (or percentage) of ads
displayed on your site which people actually click on. Then perhaps try tweaking or
rearranging the site layout slightly and see if the num bers im prove.

If you want even m ore stats and data from your site, consider signing up to an analytics
service. Google Analytics lets you tracks visitors as they progress through your site, in order
to build up a picture of how they use it. For exam ple, if you have a site consisting of a hom e
page, a product catalogue and an order form , Google Analytics will tell you what percentage
of the visitors who browse your catalogue subsequently abandon their shopping cart rather
than paying for its contents.

Google Analytics is free to use. J ust sign up for an account, and they'll give you a couple of
lines of HTML code that you need to include in the header section of every page on your site.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
311
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Once this is done, Google silently tracks all your visitors, then you just log into the control
panel to view the data.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
312
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Search Engine Optim isation

Having built a web site, whether from static HTML pages or as a PHP/ MySQL application,
your job is not finished. You now need to attract visitors to it.

Most people locate web sites of interest by usin g a search engine such as Google. Therefore,
by far the easiest and cheapest way to attract visitors is to ensure that your site, rather than
anyone else’s, is top of Google’s list.

Sadly, if you’re hoping that this chapter will tell you how to achieve this, you’re in for a m ajor
disappointm ent. For obvious reasons, search engine com panies don’t divulge the precise
details of the form ulas that they use when deciding whether one site should be higher in the
list than another. However, they do publish a selection of tips which can help. These,
com bined with anecdotal evidence from people who run sites that do achieve a good Google
ranking, are clearly worth following.

The art (actually it’s m ore like a science) of getting good search results is known as search
engine optim ization, or SEO. If you want to know m ore about it, search online, or in your
favourite bookshop or library.

If, during your quest, you encounter adverts for com panies or software products which
guarantee your site a top-10 placing in return for a fee, avoid. As previously m entioned,
search engines keep their m ethods highly secret, so anyone who claim s to know how to
defeat them is, at best, m istaken. Don’t waste your m oney. Instead, follow the advice below.

SEO Tips

You can follow these tips to help ensure that your site gets a good search engine placem ent.
Results are not guaranteed, but what follows is based on official advice from Google as well
as anecdotal evidence from friends of m ine who run high-ranking sites.

• Search engines work by autom atically scanning, or crawling, the web and adding
every word of every page to their enorm ous indexes. They norm ally m anage to find
new or changed sites autom atically on their regular (every week or 2) crawl.
However, you can kick-start the process for a new site by m anually telling the search
engine to add it to its list of sites to crawl. To do this, look for the “subm it your site”
link which every search engine site has. You only need to enter the URL of the front
page. The search engine will then autom atically follow all of the links within it to
locate other pages.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
313
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

• Search engines typically have between 10 an d 20 billion web pages in their index. A
database of this size takes a long tim e to build, so don’t be surprised if an am endm ent
to your site doesn’t show up in Google for a few weeks.

• Ensure that every page on your site has a page title. See page 53 for how to do this.

• Make sure every page has a “description” and “keywords” m eta-tag, as outlined on
page 55.

• Every page on the site should be reachable by at least one hyperlink, so that the
search engine can follow the links in order to find all your pages.

• Be aware that search engines are very poor when it com es to indexing inform ation
that is held in MySQL databases and which doesn't exist as a static HTML page. The
reason for this should be obvious. Google can’t access your MySQL database directly,
but only through your website. So if you have a page which says “Please enter a nam e
to search for”, the only way for Google to extract every nam e from the database would
be to electronically “type” every possible nam e in the world into that box. So, in the
case of database-driven sites, it’s especially im portant to also have a handful of “real”
pages (ie, without a ? in the URL) that contain lots of relevant inform ation about the
site.

• Google Sitem aps, often known as XML Sitem aps, are a way of helping Google and
other search engines find their way around a web site in order to index it. If you have
a site where the m ajority of content is generated dynam ically from a database, rather
than existing as static HTML files, it is well worth investigating these. Don't get
confused with standard site m aps, as m entioned below, which consist of easy-to-read
collections of links, which are designed to help hum an visitors navigate your site. An
XML or Google Sitem ap isn't as easy to read, at least not by hum ans.

• Offer a site m ap to your visitors, with links that point to the im portant parts of your
site. Even if visitors don’t use it, search engines will. If the site m ap is larger than 10 0
or so links, you m ay want to break the site m ap into separate pages.

• Don’t try to cheat. Som e people include keywords that don’t accurately reflect the
content of their pages. Or they use tricks such as white text on a white background to
hide extra inform ation within a page that Google will see but which is hidden from
hum an visitors. When Google’s autom atic system s detect this, your site will be
rem oved from all of Google’s indexes and it’s very difficult to get reinstated.

• Think about the words users would type to find your pages, and m ake sure that your
site actually includes those words within it.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
314
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

• Use text instead of im ages to display im portant nam es, content, or links. The Google
crawler doesn't recognize text contained in im ages. If you m ust use im ages (such as a
logo, or a picture of a chart or graph) for textual content, also use the "alt" attribute to
include a few words of descriptive text.

• Make sure there are no broken HTML links in your pages.

• Ensure that all pages validate correctly. There's m ore about this on page 56.

• Ensure that every page specifies a DOCTYPE. There's m ore about this on page 60 .

• If you use a "keywords" m eta-tag on a page, ensure that the page also m entions those
keywords. Otherwise Google m ight assum e that you're trying to cheat, by listing
keywords that are actually nothing to do with the content of the page.

• Ensure that HTML page filenam es and im age filenam es are, where possible, relevant
to the content of the site rather than just a m eaningless nam e. For exam ple, in a site
about a hotel, a page called vacant_ room s.htm l which contains an im age called
sam ple_ room .jpg is better than a file called vr0 1.htm l and an im age called sam p.jpg.

• The m ore often you update your pages, the higher they’ll be ranked by search
engines. Google doesn't favour out-of-date sites.

• Use proper hierarchical HTML tags in your pages, regardless of whether you generate
the content from a database or you use static HTML files. This is known as using
sem antic m arkup, and you'll find out m ore by searching for the phrase in Google.
Essentially, use the built-in h1, h2, h3 etc heading tags, correctly structured. So start
with an h1 tag at the top of the page, then one or m ore h2 tags, and perhaps also som e
h3 headings within the h2 ones. Don't put, say, an h3 heading directly within h1
section. This all helps the search engine understand the structure of the page.

• Google regards your page as especially im portant if there are lots of links to it from
other sites. So encourage friends and business partners to link from their site to
yours, perhaps in exchange for a link from your site to theirs.

Keeping the Crawlers Away

Most of the tim e, you want to encourage Google and other search engines to crawl your site
and add your content to their index. But som etim es there will be areas of your site that you

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
315
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

would rather didn't get indexed. For exam ple, the folder or directory that holds unfinished
pages that aren't for public consum ption.

There's a way of telling search engines which folders to ignore, and it's done through the use
of a robots.txt file. This is a special text file that you need to place in the top-level folder of
the publicly accessible part of your web site. In the case of hostm onster, that m eans the
public_ htm l folder. A typical robots.txt file, which you can create with any text editor such as
Wordpad or PSPad (but not a word processor like Word), m ight look like this:

User-agent: *
Disallow /joomla/images
Disallow /hms

The first line is where you could, if you wanted, specify which search engines you wish to ban
from your site. Chances are, you'll want to block them all, which is what the line in the above
exam ple does. Then, just list all the folders you want to block, using Disallow com m ands. In
this case, I'm blocking J oom la's im ages folder and our HMS system .

Note that there's no com pulsion for search engines to obey the contents of a robots.txt file,
but alm ost all of them do.

Regardless of whether you use a robots.txt file or not, don't use a web server as a way of
storing or exchanging private inform ation. That's not what they're designed for. Even
though you don't include a link to your private file area from your public web pages, that
doesn't m ean that Google won't already have found the files and indexed them for the rest of
the world to find. This happens a lot. Try a Google search for "private and confidential" or
"com m ercial in confidence" for som e worrying exam ples.

If at First you Don’t Succeed, Pay

Each page of Google search results contains two sorts of inform ation. In the im age below,
where I've used Google to search for a "cheap cam era", the results at the very top, as well as
those down the right hand side, are discretely labelled as Sponsored Links and shaded in a
very pale yellow. I've m ade the yellow a little brighter, and highlighted the "sponsored links"
text, to illustrate just how m uch of Google's results are not as independent and m erit-based
as you m ight think.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
316
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

So how do you sponsor a link, and get your page into those yellow boxes? All you need to do
is pay. It's a Google product called Adwords. You can read m ore about it on page 30 3.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
317
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

The End. So, What Now?

Congratulations. That’s the end of this book, and you’ve m anaged to m ake it all the way
through. So where do you go from here? Hopefully you’ll have followed som e or all of the
exam ples, and you’ll have one or m ore web sites that do m uch of what you set out to achieve.
But a web developer’s work is never done, so there are probably m ore things that you’re
aching to do.

Sadly, this book can’t cover everything about the subject. If you were to buy or borrow
com prehensive books on everything we’ve covered here, such as HTML, CSS, J avascript,
PHP, MySQL and web page design, it’s likely th at your collection would run to 10 ,0 0 0 pages
or m ore.

This book is being expanded all the tim e, however, so check back at www.the-web-
book.com regularly to ensure that you’re always working from the latest revision. But if
there’s m ore that you want to find out, then the web, and especially a search engine, should
be your next stop. Whether you need to know about one specific PH P function, or general
advice about how to m ake your CSS-based designs look better, everything you need to know
is out there if you know how to search. And because PHP is such a popular choice for writing
software, there are hundreds of web sites and helpful forum s devoted to it. Whatever you
want to do, chances are that som eone's already done m uch of the hard work for you and is
willing to share the code.

In the future, I'm hoping to include som e m ore advanced topics in The Web Book. These will
include:

Ajax and DHTML

Database indexes
A login and authentication fram ework for building secure sites
MySQL table joins
PHP Sessions
Object-oriented PHP program m ing

The web is indeed a wonderful place. But you probably knew that already. I guess that’s why
you started reading this book. I just hope you en joyed it, and that you’ll tell your friends and
colleagues to download their own copy too.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
318
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Appendix A – Building a Test Server

If y ou w ant to set up a test w eb server, and y ou already know the basics of things like FTP,
php and m y sql, this appendix w ill tell y ou how to do it. How ever, unless y ou specifically
need (or w ant) to do this, it’s perfectly acceptable to stick w ith the hosting space y ou’ve
bought, both for hosting y our live site and also for w ork in progress. In w hich case y ou can
safely ignore this appendix. Building w eb servers is m ostly for technophiles.

For setting up a test web server, you’ll need a spare com puter from which you don’t m ind
deleting all data and program s. It needs to be Windows-com patible, even though we won’t
be running Windows on it. It doesn’t need to be particularly new or powerful, though.

For a test web server, a server-oriented version of Linux is a good choice. Why server-
oriented? Because the added GUI desktop is totally unnecessary. Why not Windows?
Because this book is all about doing things as cheaply as possible, and you probably don’t
want to buy another copy of Windows for your test server.

The only thing you need to check is that your com puter has a built-in Ethernet connector on
the m otherboard. If its networking capability com es via a USB or PCMCIA plug-in adaptor,
chances are that it won't work without you getting involved in som e substantial fiddling.

I'm going to use Ubuntu Server 7.10 for this project. It’s ideally suited to the task, and it (and
all the other com ponents we’ll be installing) is available totally free of charge. So if you fancy
giving it a go, here’s what you need to do.

Our Goal

By the end of this chapter you’ll have a working Web server onto which users can safely and
securely upload files via FTP. You’ll also have Webm in installed, for rem ote adm in
functionality, plus Webalizer for generating web usage stats. Plus, you’ll be able to host
PHP/ MySQL sites too.

Note that com m ands you need to type are in a bold Courier typeface like this.

Also, you are strongly advised to keep your new web server within the confines of your own
LAN and use it purely for your own education and experim entation. Assum ing your new
server is connected to the internet via a broadband router, it won’t be accessible by the world

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
319
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

in general unless you change your firewall settings in order to allow incom ing connections on
port 80 . And frankly, that’s the way it should stay. If you want to host real live web sites,
open to the public, leave the hosting to the professionals.

First Install the OS

Get hold of a Ubuntu Server 7.10 CD, which you can download from
http:/ / releases.ubuntu.com / 7.10 / ubuntu-7.10 -server-i386.iso. Yes, I know that this isn't the
very latest version, but it's perfectly acceptable for this project and it works well. If you really
want to get the latest version of Ubuntu Server instead then feel free, but the instructions
below m ight not work exactly as you expect.

To get started, boot the PC from the CD-ROM. When asked, nam e your m achine. I called
m ine webtest, but the precise nam e that you choose doesn't really m atter.

Your PC is probably connected to the internet via a broadband or cable router that handles
DHCP, in which case the Ubuntu installer should be able to m ake contact with the internet
autom atically and obtain from the router an IP address for your server. If it can't, you’ll be
asked to enter an IP address, netm ask and gateway address. If this works, then that's just
fine.

A word of advice. If Ubuntu can't detect a working network connection at all, that's probably
because it doesn't have the necessary drivers available for your com puter's ethernet socket.
In which case, to be brutally frank, you should probably give up at this point. You won't have
m essed up your PC with a half-installed copy of Linux yet, and trying to troubleshoot Ubuntu
networking is not som ething for am ateurs.

Anyway, assum ing that Ubuntu detected a network connection, you'll now be asked how to
form at the hard disk. Choose "guided – use entire disk".

When asked, choose a nam e and password for your day-to-day user account.

From the software selection m enu, select only LAMP server. That's Linux, Apache, MySQL
and PHP.

Next you’ll be asked for a m ysql root password. Be aware that you’ll only be asked once (no
confirm ation required) and that the password you enter isn’t shown on screen. So m ake sure
you know what you’re typing.

That's the basic Linux installation over. Rem ove the CD when prom pted and the m achine
will restart. If you don’t see a login: prom pt after a m inute or so, press Return and one

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
320
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

should appear. Rem em ber that this is a server installation so there's no pretty graphical
interface here (and thus no need to connect a m ouse to this com puter).

At the login: prom pt, log in with the usernam e and password you created earlier.

If the server acquired its own IP address using DHCP, you’ll need to know what address it
was allocated. Type ifconfig and have a look at what’s listed for inet addr. You’ll need to
know this address in order to connect to the m achine, unless you register a dom ain nam e
that points to it or you add an entry to your com pany’s internal DNS servers. If there's m ore
than one entry under ifconfig, m ake an intelligent guess as to which is the right one. You
m ay find, for exam ple, that a non-existent wi-fi connection with an IP address of 127.0 .0 .1 is
also shown.

From now on we'll assum e that your server is on 192.168.1.10 . Whenever you see this
address m entioned below, substitute the correct address for your server.

So far, we’ve only got one account set up. We also need to set a password for the root (ie,
adm inistrator) account for when we need to do things that require root access. So type sudo
passwd root, specify your current password when asked, then choose a password for the
root usernam e.

Linux doesn’t norm ally allow you to log in as root directly so if/ when you need to use your
root privileges, log in with your norm al user account and then type su, then enter the root
password when prom pted. In case you're wondering, it stands for super-user. If you ever
forget who you’re logged in as, the whoam i com m and will tell you. Or look at the com m and
prom pt, which will end with $ for a norm al user and # for a root user.

Som e Useful Com m ands

Here are som e useful com m ands to get you started, now that you’ve got a usable Linux
system :

shutdown –h now turns off the com puter.

exit logs you out. You’ll need to do this twice if you used su. Rem em ber that the web server
is still running when you log out, so web/ telnet connections to it will still work just fine.
There’s no need to rem ain logged in all the tim e.

ls shows a directory listing (that's LS, not 1S).

ls –la shows a better one (that's LS -LA).

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
321
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

cd / switches to the root directory.

cd dirname switches to the specified directory nam e, eg cd / etc.

clear clears the screen, like cls does in Windows.

cat is the linux version of the Windows "type" com m and if you want to display the contents
of a text file.

rm deletes a file

cp is the linux equivalent of the DOS/ Windows copy com m and.

find / -name xyz.ext will search the entire system for a file nam ed xyz.ext

pwd (print working directory) tells you which directory you’re currently in

Within an ls – la directory listing, lines that start with a "d" are directories, otherwise they’re
files. The other characters at the start of the line (such as rwxr--rw-) tell you who has
perm ission to read, write, and execute the file. A Google search for chm od will tell you how
to understand and change these.

Get Updated

Now we need to scan the internet for any im portant updates. The list of locations in which
Ubuntu Server searches for updates is stored in a text file at / etc/ apt/ sources.list but the first
entry in this file points to the Ubuntu Server CD-ROM. We need to rem ove this entry from
the list, otherwise we’ll keep getting prom pted to insert the CD whenever we perform an
update.

This file is read-only, so you’ll need to be logged in as root (via su) to proceed beyond this
point. In fact, everything that follows is best done as root (this is an exception rather than a
rule - if you're not doing server m aintenance, never log in as root).

Type cd /etc/apt
Type vi sources.list

You’ll now find yourself facing vi, undoubtedly the worst editor ever invented. But without a
GUI on your server you have little choice. Plus, it’s very handy to know the basics of vi
because it's part of every Linux and unix system .

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
322
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

To m ove the cursor up, down, left and right, use the k, j, h and l keys (I told you it was bad).
To delete the character under the cursor, press x. That should be enough to allow you to
delete any line that m akes reference to "deb cdrom " and which isn’t already com m ented out
(ie, which doesn’t have a # at the start).

If you m ess up, type :q! and press return to abandon vi. If you m anage to m ake it work, type
:w to save the file and then :q to quit vi.

You won’t have to use vi very often. Later on we’ll install Webm in, which lets you m aintain
your server from another m achine via a web browser. There’s a proper file m anager and
editor built into Webm in, thankfully.

It’s now tim e to update the system so that you’re running the latest versions of everything.

Type apt-get update to update the catalogue of possible updates.

Then type apt-get upgrade to download and install any that need installing.

Note that apt-get m ay not work if your internet connection goes via a proxy server. Even if
you entered the nam e of a proxy server when you first set up the m achine and configured it
with an IP address, apt-get doesn’t take any notice. To fix this, type:

export http_proxy="http://yourproxy.com:80"

specifying the address (and port) of your com pan y’s proxy server. Then try the apt-get again.

Test Your Web Server

You should now have a basic working web server, although we’re not finished yet. But you
can test that everything is working by typing the server’s IP address into a web browser on
another m achine on your LAN. You should see a web page with a link to apache2-default,
and clicking on the link will bring up a brief m essage. Depending on your web browser, you
m ay need to add http:/ / at the start of the address, eg type http://192.168.1.10.

Next we’ll install a telnet server so that we can connect to the m achine rem otely over the
LAN in com m and-prom pt m ode without the need to actually be seated at the server itself.

Install the Telnet Server

Type apt-get install telnetd

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
323
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This will download and install the telnet server. Now we need to kick-start it, by typing:

/etc/init.d/openbsd-inetd restart

You can now log out by typing exit (you need to type it twice because you used the su
com m and, and the first tim e just takes you back into non-root m ode).

Everything we do from now on can be done rem otely via telnet so, if you want to install the
server in a hard-to-reach cupboard, that’s no problem . You won’t need physical access to the
server again unless som ething goes wrong or if you need to turn it back on after a shutdown
com m and.

To access your server type telnet 192.168.1.10 (or whatever the IP address of your
server is) from any m achine on your LAN and you’ll get a login prom pt. You can do this from
Windows or Linux or even a Mac.

An FTP server

Next, we need to install an FTP server so that people can upload HTML pages to your new
web server. An ideal tool for this particular job is proFTPd (that’s Unix-speak for the Pro FTP
Daem on).

If you haven’t done so already, telnet to your server and type su to get root access. Or you
can work on the server directly if it’s easier, of course.

We need to take a little care to set up the FTP server in a reasonably secure m anner, even
though this is only for test or educational purposes. We need to m ake sure that a user who
logs into the FTP server in order to upload web pages can’t browse the entire server but is
locked into one directory. Also, a user who has an FTP usernam e and password with which to
upload web pages shouldn’t be able to use those credentials to access the system via telnet, as
that would grant them far too m uch power.

Type apt-get install proFTPd to download and install the FTP server. You’ll be asked
whether to choose an inetd installation or standalone. Choose inetd.

The basic FTP server is now up and running, and you should be able to log into it with your
non-root account, using any FTP client application. But we still need to set up an account
that will allow som eone to upload their web pages without also having access to any other
parts of the system .

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
324
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

First, switch to the / etc directory by typing cd /etc. We need to edit the file called shells
and add a new line that says / bin/ false to the file. Then, when we set up a new user account
for our web user, we’ll configure their account so that / bin/ false is their com m and shell.
Because there’s no such shell, they won’t be able to log in with telnet.

Type vi shells to edit the file. Use the cursor keys (h,j,k,l) to m ove the cursor to the start
of a new line, then press i to enter insert m ode. Press Return to insert a new line, and add
/ bin/ false as a new line in the file. Press Esc to leave insert m ode, save the file with:w then
exit vi with :q and you’re done.

Each user has a hom e directory which contains their various files. It’s like My Docum ents in
Windows and norm ally it resides in the / hom e directory. For web users, rather than setting
their hom e directory to be som ewhere within / hom e we’ll put it under / var/ www, which is
the root of the web server.

Let’s m ake an account for a user called webuser1 with a password of flintstone. These are the
steps that you need to do for each web user account you want to create:

cd /var/www
mkdir webuser1
useradd webuser1 –p xxxx –d /var/www/webuser1 –s /bin/false chown
webuser1 webuser1
passwd webuser1 and, when asked, choose flintstone as the password.

Note that xxxx above is your root password, not the one that you want to assign for the
webuser1 account.

Also note the chown com m and which changes the ownership of the webuser1 directory from
root (which created it) to webuser1. If you don’t do this, webuser1 won’t be able to upload
files.

J ust to m ake sure that everything is working, verify that you can’t telnet to the server using
the webuser1 account. FTP access should work, but telnet should not.

Now create a sim ple index.htm l file and use FTP to upload it, using the webuser1/ flintstone
account. Then surf to http:/ / 192.168.1.10 / webuser1 from any m achine on your LAN and you
should see the uploaded page.

Before we leave proFTPd, there are a couple of changes that we need to m ake to its
configuration file in order to im prove security and m ake things neater.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
325
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Type cd /etc/proFTPd and then vi proFTPd.conf to edit the config file. Move the
cursor up and down with j and k until you reach the DefaultRoot line, and rem ove the #
sym bol from the start of the line by pressing the x key. This will lock all FTP users into their
hom e directory (eg / var/ www/ webuser1) and won’t let them view files that are further up the
tree. Without this step, our webuser account holders could use their FTP software to browse
the entire server's directory structure.

While you're in proFTPd.conf, add a new line near the top of the file which says:

IdentLookups off

This will fix the problem which you’ll no doubt have noticed, of a few seconds’ delay when
logging into the FTP server or uploading files.

You m ay also wish to change the ServerNam e en try from Debian to the nam e of your server,
to m ake the welcom e m essage m ore relevant. With vi, rem em ber that typing i puts you into
insert m ode, for typing text, and Esc then puts you back into com m and m ode from where
you can type :w to save the file and :q to quit vi.

Webm in

Now that FTP is working, let’s install Webm in so that we can rem otely adm inister the server
from anywhere on our LAN via a web browser. It’s m ore fun and friendly than using telnet,
and a great way to explore the m achine.

First, m ake sure you’re logged in as root (via your norm al user account and su) then type the
following, all on one line:

apt-get install openssl libnet-ssleay-perl libauthen-pam-perl libio-

pty-perl libmd5-perl

Then type (again, all on one line):

wget
http://prdownloads.sourceforge.net/webadmin/webmin_1.380_all.deb

Note that wget probably won't work if your internet connection goes through a proxy server.
In which case, type:

export http_proxy="http://yourproxy.com:80"

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
326
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

first, and then issue the wget com m and.

Finally type dpkg -i webmin_1.380_all.deb and Webm in should be installed and

ready to use.

From another m achine on your LAN, surf to https:/ / 192.168.1.10 :10 0 0 0 and log in as root,
using your server’s root password. Note the https bit – it won’t work with plain http. Also
note the :10 0 0 0 , which is essential.

Ignore the warning about a m issing SSL security certificate – you can trust this server
unconditionally because it’s yours. You will, though, need J ava installed on the PC from
which you intend to use Webm in, otherwise it won’t work.

Possibly the m ost useful part of Webm in is the file m anager, which also lets you edit files.
You’ll find it in the "others" category at the bottom of the left-hand m enu.

Webalizer

Now we’ll install Webalizer, which is a great tool that produces graphical stats to show your
web site usage. Even if you’re only using your server for test or educational purposes, it’s
useful to be able to see the sort of stats that are available with such program s.

To install webalizer type apt-get install webalizer

You need to tweak the Webalizer config file before the program will work. Type cd
/etc/webalizer then vi webalizer.conf and delete the .1 from the end of the LogFile
entry.

Webalizer produces its reports by analyzing the Apache web server log file on a regular basis.
To m ake it do this, you need to set up what’s called a cron job in order to run
/ usr/ bin/ webalizer regularly. Every 15 m inutes should do nicely, and the easiest way to do
this is via Webm in.

Go into Webm in via https:/ / 192.168.1.10 :10 0 0 0 from another PC and, under the System
category, click on "Scheduled Cron J obs". Then click "Create A New Scheduled Cron J ob".

Choose to execute the job as root. The com m and to execute is /usr/bin/webalizer. Click
on "Tim es And Dates Selected Below". Under the m inutes, tick "Selected" and choose 0 , 15,
30 and 45. For hours, days, m onths and weekdays, select "All".

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
327
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Now click the Create button and close your web browser. After 15 m inutes or so, surf to
http:/ / 192.168.1.10 / webalizer and you should see the reports and stats. Wait another 15
m inutes and you should see an updated version.

PHP and MySQL

Now we need to m ake PHP and MySQL work, to ensure that we can host not just static
HTML sites but also dynam ic database-driven ones. PHP should already be working just
fine, so we need to test that. Create a file called test.php which contains:

<?
echo "this is a test file";
?>

Upload it using the webuser1 account. Surf to http:/ / 192.168.1.10 / webuser1/ test.php and
check that you see a web page containing just the m essage "this is a test file". If it works, PHP
is working on your web server.

To allow users to create database-driven sites we’ll install phpMyAdm in, which is a graphical
web-based tool for m anaging MySQL databases. It’s best if we don’t allow web users to create
their own databases, but we do want them to be able to m anage the databases that we set up
for them . PhpMyAdm in will work for both of these tasks. IE, for us to create databases and
for our web users to m aintain the tables within their allocated database.

As root, type apt-get install phpmyadmin

When asked which web server you’re using, choose apache2.

To use phpMyAdm in, surf to http:/ / 192.168.1.10 / phpm yadm in and log in with a usernam e
of root and the MySQL root password that you set up right at the start of this chapter.

On the front page of phpMyAdm in, scroll down to the Privileges link and click it. Then click
"Add A New User". Enter their usernam e (webuser1 in this case), and assign them a
password. This will be used for them to log into phpm yadm in, and they’ll also use it in their
PHP code in order to connect to their database (using a host nam e of localhost). It’s up to
you whether you m ake it the sam e as their FTP password (flintstone). In this exam ple, let’s
set the password as barney.

Click "Create database with sam e nam e and grant all privileges" and all the hard work will be
done for you. A database called webuser1 will be created, with perm ission for the webuser1
account to do everything except creating new databases.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
328
 This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Log out of phpm yadm in (just close your browser), and then log in again. This tim e, use a
usernam e of webuser1 and a password of barney. You should see only the webuser1 database
and no others, and you should find that you can create tables on the database but you can’t
create new databases.

You m ay also find that you can see a database called inform ation_ schem a as well as your
webuser1 database. However, this is harm less an d can be ignored – it’s not a security risk.

And that's it. You now have a fully working web server that you can use for test,
developm ent and training purposes.

As m entioned above, having your own web server for test purposes is fun, but isn’t generally
necessary. The rest of this book assum es that you have a hosting account som ewhere, and
that you’ll use this account to hold your web sites rather than putting them on your own test
server.

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
329