Today, we’ve published the beginning of the series: the Introduction and directly from the book, Chapter 1: Installation. Over the weekend you can read chapter 1 and make sure your newly installed software is working properly, in readiness for next week’s chapters. At the end of the week you’ll have 4 complete chapters from the book and one bonus article, comprising another book excerpt.

Here’s what you’ll be receiving:

Chapter 2: Introducing MySQL

An introduction to databases in general, and the MySQL relational database management system in particular. If you’ve never worked with a relational database before, you’ll find this enlightening, whetting your appetite for what’s to come! In the process, you’ll build up a simple database to be used in later chapters.

Chapter 3: Introducing PHP

Here’s where the fun really starts. In this chapter, Kevin will introduce you to the PHP scripting language, which you can use to build dynamic web pages that present up-to-the-moment information to your visitors.

Chapter 4: Publishing MySQL Data on the Web

In this chapter you’ll bring together PHP and MySQL to create some of your first database driven web pages. You’ll explore the basic techniques of using PHP to retrieve information from a database and display it on the Web in real time. Kevin will also show you how to use PHP to create web-based forms for adding new entries to, and modifying existing information in, a MySQL database on the fly.

Bonus: How to Handle File Uploads with PHP
In this bonus excerpt from Chapter 12, you’ll learn how to accept file uploads from your web site visitors securely and store them.

Build Your Own Database Driven Web Site Using PHP & MySQL, 4th Edition is one of the most popular PHP books for beginners, and SitePoint’s first ever book. This shiny new 4th edition has been completely updated using only best-practice PHP. It’s essential reading for all budding PHP & MySQL developers. For more information, see the book page.

If you prefer to read the Adobe Acrobat PDF version of these first four chapters, you can download the first four chapters FREE.

There are dozens of code editors to choose from and many are freeware or open source. Ultimately, the choice is yours, whether it’s Windows Notepad, VIM or VisualStudio. However, there are a number of key IDE features that I’d recommend to all web developers.

Essential Features

An editor won’t remain on my PC if it doesn’t provide the following:

Speed and stability
The editor must start quickly and remain responsive. Sorry Eclipse and Aptana.

Multiple files / MDI interface
The days of opening a single source file are long gone. Tabs are my preferred choice of interface and they absolutely must support middle-click closing!

Multiple language support
Even the most basic web projects require HTML and CSS. A simple application is likely to add JavaScript, SQL, XML, and a server-side development language such as PHP, C#, VB, Java, Perl, Ruby or Python. Your editor should be able to effortlessly handle every type of code you choose.

Line wrapping and numbering
It may be bad practice, but long lines of code are sometimes necessary. The editor should let you view code without horizontal scrolling, so a line wrapping option is essential. When the inevitable error occurs at line 4321, you need to be able to find that bug quickly — so forget any editor that does not display line numbers.

Configurable color-coding
Missing quotes or tags can cause havoc, but color-coding can dramatically reduce your error rate. Bonus points are awarded for any editor offering fully-customizable color schemes.

Auto-complete
Microsoft VisualStudio sets the gold standard with IntelliSense. Few editors reach that level, but if I’m adding a <p> tag, you can guarantee I want a closing </p>. Please don’t make me type it!

Session store and restore
When the editor is restarted, it should restore the files you were working on, open them in the correct order and preferably at the last line you were editing.

File explorer
The option to open other files in the current project can save time.

Find and replace across files
How many times have you renamed a class or function? The editor should provide facilities to change all references quickly and easily.

Desirable Features

The following options are great if they’re available:

Debugging tools
Debugging facilities range from absolutely essential (.NET or Java), to useful (PHP or Perl), to unnecessary (JavaScript — unless it’s better than Firebug!) Make sure your editor provides the debugging tools you need.

Bookmarking
Jumping between functions in the same file is easier if you can bookmark individual lines.

Multiple views
Similarly, it can be useful to ’split’ a file into multiple windows so different segments can be edited at the same time.

Code-folding
The facility to collapse or expand segments allows you to concentrate on the important code.

Code explorer
Again, VisualStudio sets the standard with class inspection windows showing details of all properties and methods. However, a simple list of method/function names in alphabetical or source order can be just as useful. Bonus points for any editor which handles the multiple types of function declaration in JavaScript!

Good font support
In general, I prefer to code using a proportional font. I may be in the minority, but please don’t force me to use monospace! SciTE offers the best solution; you can switch between monospaced and proportional fonts using Ctrl+F11.

Shortcuts, plugins, and macros
If you use particular keyboard combinations or functionality, configurable shortcuts, macros and plugins can help you migrate to another editor.

And the Bad Features…

Sometimes, editors offer dubious functionality that you really do not need.

WYSIWYG design view
Whilst WYSIWYG can be useful for novice developers, you will soon discover that hand-coding HTML and CSS is quicker than any design package. It can also be essential if your application requires DOM manipulation. If a WYSIWYG view is provided, make sure it doesn’t refactor your carefully-crafted code when you accidentally hit the ‘design’ button.

Obtrusive project management
Sometimes, you just need to open a file and make a minor change — please don’t force us to create a new project!

Dumb HTML-generation tools
I do not need a toolbar icon that uses valuable screen estate and inserts a <p> tag. And I certainly don’t need icons that insist on adding deprecated <b> tags!

What are the essential features you look for in a code editor? Are there any “features” that particularly annoy you?

Build Your Own Database Driven Web Site Using PHP & MySQL (4th Edition) — by Kevin Yank

One of the most popular PHP books for beginners, this shiny new 4th edition has been completely updated using only best-practice PHP.

In this book you’ll learn how to:

• install PHP 5 and MySQL 5 on Windows, Linux, or Mac OS X
• gain a thorough understanding of PHP syntax
• master database design principles and SQL
• build a working content management system
• add, edit, and delete web content without using HTML
• create an ecommerce shopping cart
• utilize sessions and cookies to track site visitors
• craft SEO-friendly and memorable URLs

And a whole lot more …

At around 480 pages, this book is an easy read. As you move through the book you’ll quickly notice that it’s written in a clear tutorial format that’s easy to understand, and illustrated with plenty of screenshots and diagrams, providing quick visual cues. If you hate wading through dry, academic-style “how to” texts, this book will be a breath of fresh air to you.

If you’ve never built a database driven web site and you’re looking to go beyond the limitations of a static site, this book will start you off in no time.

And if you have built database driven web sites before, the extensive PHP/MySQL reference guides included will ensure this book remains an extremely handy desk reference.

Check out the free sample chapters or order a copy today.

SitePoint is looking for two experienced PHP developers (one with a sysadmin twist) to join the team here at SitePoint HQ in Melbourne, Australia. Help us find the right person for either of these positions, and we’ll buy you a shiny, new iPhone 3GS!

Know someone with “mad PHP skillz” who either lives in Melbourne or would move here for the opportunity to work on one of the Web’s major destination sites for web developers and designers? Drop me an email with the details at kevin(at)sitepoint.com.

Of course, if you would just like to apply for the position yourself, the complete position descriptions are in our jobs section.

With the recent release of Firefox 3.5, we’re very pleased to announce the release of updates to our useful developer tools: Dust-Me Selectors, and CodeBurner for Firebug.

Dust-Me Selectors is a standalone extension that finds unused CSS selectors, and is particularly useful for updating legacy sites, allowing you to throw away all those redundant rules without worrying that something, somewhere might be using them.

CodeBurner for Firebug, as its name suggests, is an extension to the popular developer tool, Firebug, and extends it with searchable reference material for HTML and CSS.

We’ve been beavering away behind the scenes on updates to both these extensions, waiting for the final version of Firefox 3.5 — and now that it’s been released, here they are!

Dust-Me Selectors in particular benefits from this browser update — thanks to improvements in Firefox’s JavaScript engine, it now performs significantly faster, with a typical "find…" operation around 50% quicker than in Firefox 3.0!

But that’s not nearly all! Both new versions also bring a host of improvements and new features:

New features in Dust-Me Selectors Version 2.2:

• new tabbed preferences dialog that’s neater and more user-friendly
• added a new spidering preference "don’t spider external sites", which resricts the spider to pages on the same domain as the sitemap
• bugfixes to make "find…" and "spider…" keyboard triggers more reliable cross-platform
• improved error handling throughout
• removed two unecessary preferences to streamline the spidering logic: "ignore www difference" and "ignore fragment identifiers" in URLs, both of which are now enabled all the time

New features in CodeBurner for Firebug 1.2:

• improved search algorithm gives better results
• special search now includes "other attributes that are valid for this element" as well as those which are actually defined for it
• code examples for CSS properties now include direct links to live examples online
• the original search term is now indicated in search results
• slightly modified license clarifies the distinction between "use" and "redistribution"

Both of these updates have been uploaded to the Mozilla Add-ons site, however since all submissions are reviewed manually, it may be a day or so before they become available from there, or through the automatic updates channel. So if you can’t wait that long, you can grab them straight away from SitePoint:

• Dust-Me Selectors v2.2
• CodeBurner for Firebug v1.2

As always, we welcome your comments and feedback on both of these extensions — and if you’ve any ideas for features you’d like to see, please don’t hesitate to let us know!

Truthy and Falsy Values

The following values are always falsy:

• false
• 0 (zero)
• "" (empty string)
• null
• undefined
• NaN (a special Number value meaning Not-a-Number!)

All other values are truthy, including "0" (zero in quotes), "false" (false in quotes), empty functions, empty arrays, and empty objects.

var a = !!(0); // variable is set to false
var b = !!("0"); // true

Comparing Falsy Values

Falsy values follow some slightly odd comparison rules which can lead to errors in program logic.

The falsy values false, 0 (zero), and "" (empty string) are all equivalent and can be compared against each other:

var c = (false == 0); // true
var d = (false == ""); // true
var e = (0 == ""); // true

The falsy values null and undefined are not equivalent to anything except themselves:

var f = (null == false); // false
var g = (null == null); // true
var h = (undefined == undefined); // true
var i = (undefined == null); // true

Finally, the falsy value NaN is not equivalent to anything — including NaN!

var j = (NaN == null); // false
var k = (NaN == NaN); // false

You should also be aware that typeof(NaN) returns "number". Fortunately, the core JavaScript function isNaN() can be used to evaluate whether a value is NaN or not.

If in doubt…
Use strict equal (===) and strict not equal (!==) in situations where truthy or falsy values could lead to logic errors. These operators ensure that the objects are compared by type and by value.

var l = (false == 0); // true
var m = (false === 0); // false

Has truthy or falsy logic ever caused you grief in JavaScript code?

I for one find it quite counter-intuitive to specify descendants’ styles like this:

#banner { color: white; background: black; }
#banner a { color: yellow; }
#banner p { margin: 0; }
#banner ...
#banner ...
#banner ...

… and on, and on, and on. Instead, this makes way more sense to me:

#banner {
  color: white;
  background: black;
    a { color: yellow; }
    p { margin: 0em; }
    ...
}

And how about variables? They’d be cool:

@logo = #457301;

h3 { color: @logo; }
#sale { border: 1px solid @logo; }
.alert { background: @logo; }

Are you with me? Well, Less promises to make these daydreams and more a happy reality. You’d write a style sheet using the Less syntax, which is exceptionally easy to pick up — it’s just CSS with some added CSS-like extras. You then use the Less Ruby gem to convert it into regular CSS — run it on the command line, or incorporate it into an app.

Less permits you to use variables and nested selectors, as seen above, but also offers a way to include classes within classes, and some simple math operators. Sweet! Let’s put Less through its paces and see how it copes with a simpler style sheet.

Let’s say I’m making a style sheet for a reasonably common grid structure, like so:

Usually, I’d decide on a width for the entire page (let’s say 960 pixels — it’s a popular size) and construct various widths based on that, perhaps indeed using a grid system from a framework. I’d like the topmost boxes to occupy one third of the width of the container, the second set of boxes one quarter, and the footer boxes one sixth, so I’ll divide accordingly using my handy calculator. I have a particular favorite green, which I’d like to use as a heading color for some boxes, a border color for the secondary headings, and as a background for the footer. There’s an item that looks kind of like the footer, but with a different font. Oh, and I’d like to add some basic font specifications to each of the sections — the text should become smaller the further you go down. All groovy:

#container {
  width: 960px;
}
.box {
  float: left;
}
#main .box {
  width: 320px;
}
#main .box h3 {
  background: #450;
}
#secondary {
  font-size: 90%;
}
#secondary .box {
  width: 240px;
  border-bottom: 1px solid #450;
}
#footer {
  font-size: 80%;
}
#footer, #super {
  background: #450;
  color: #fff;
}
#footer .box {
  width: 160px;
}
#super {
  font-family: cursive;
}

All groovy, that is, until I decide I’d like to change the width of the container. Now I have to go back and edit the widths of container and each of the descendent boxes on main, secondary, and footer. Then, I decide I’d like to use purple instead of green, so I then have to change the color of the main boxes’ headings, the secondary boxes’ borders, and the footer boxes’ backgrounds. Annoying!

Let’s imagine that I used Less for this task instead. First, of course, I’ll need to install Less, which is a quick job on the command line:

sudo gem install less

Now I’ll open a new text file and start writing Less. I’ll specify a
base width in a variable, @base:

@base: 960px;

And my favorite color:

@pretty: #450;

I’ll then use the @base variable to specify the widths of the main, secondary, and footer boxes as a fraction of that overall width. To define each of the box children of each section, I’ll use nested selectors to define how I want the box children of each section to appear. The @pretty variable is used wherever I need to specify that color. Here is the rest of my Less file:

#container {
  width: @base;
}
.box {
  float: left;
}

#main {
  .box {
    width: @base / 3;
      h3 {
        color: @pretty;
      }
  }
}

#secondary {
  font-size: 90%;
  .box {
    width: @base / 4;
    border-bottom: 1px solid @pretty;
  }
}

#footer {
  font-size: 80%;
  background: @pretty;
  color: #fff;
  .box {
    width: @base / 6;
  }
}

Since super looks just like footer, but with a different font, I’ll use Less’s class inclusion technique (they call it a mixin) to tell it to include these declarations too:

#super {
  #footer;
  font-family: cursive;
}

I’ll cook up a CSS file using this simple statement on the command line:

lessc mystylesheet.less

Out pops a style sheet with much the same content as the one I made in the usual fashion above, with the exception of my footer and super declarations. Rather than being grouped, the common declarations are repeated:

#footer {
  font-size: 80%;
  background: #450;
  color: #fff;
}
#super {
  font-size: 80%;
  background: #450;
  color: #fff;
  font-family: cursive;
}

More on that small annoyance later.

Now, since Less created much the same style sheet, you might be wondering where I’m going with this. Well, here’s where we come to the part where it’s time to change my mind about the width and color, and this is where Less really comes into its own. This time, I only need to change two lines in my style sheet. First up, let’s adjust the value of the base variable, like this:

@base: 720px;

Now, let’s change the green to purple:

@pretty: #619;

Now, I can leave the rest of the declarations alone and generate a new CSS file. The boxes’ width recalculations and color replacements are done for me:

#container {
  width: 720px;
}
.box {
  float: left;
}
#main .box {
  width: 240px;
}
#main .box h3 {
  color: #619;
}
#secondary {
  font-size: 90%;
}
#secondary .box {
  border-bottom: 1px solid #619;
  width: 180px;
}
#footer {
  font-size: 80%;
  background: #619;
  color: #fff;
}
#footer .box {
  width: 120px;
}

#super {
  font-size: 80%;
  background: #619;
  color: #fff;
  font-family: cursive;
}

Of course, this is a very simple example. In the real world, a complex grid-based template could contain dozens of declarations based on a single figure; a color scheme could revolve around two or three basic shades. Using Less, we can treat these base definitions as true variables, and spend less time maintaining them.

Less’s inclusion method could be tidier if it was clever enough to group the common elements of the mixed-in declarations. On the other hand, I kind of like the way it comes out here — I like to organize my style sheet into sections according to purpose:

/* heading styles */
...
/* main content styles */
...
/* footer styles */
...

If there’s a style I like the look of in the heading area, and I want an item in my footer to resemble it, I’d prefer to avoid storing that footer item in my headings section. If you want to be clever and use grouped selectors, you’ll have to put both those styles somewhere. The convenience of the feature outweighs this small nuisance for me, and of course using mixins is absolutely optional.

I love it when clever folk come up with great ways to save time on CSS, and I can see I’ll be making good use of this nifty tool in future. You can check out Less at its web site.

1. Fewer than 8% of people know what a browser is. Many confuse it with a search engine or a company.
2. The majority of users do not know or care which browser they’re using. It’s simply an icon they click to access the web.
3. Hardly anyone had heard of Chrome.

Chrome, the Google-branded web browser, has been available since September 2008. It’s known for its clean, minimalistic interface, quick rendering speed, anonymous browsing facilities, and high stability. Each tab is handled by a separate process, so a single page crash does not bring down the whole application.

It’s undoubtedly a great browser and has gained a 2 - 5% market share within its first year. However, it’s difficult to determine how many non-technical users have been attracted to Chrome. Web developers certainly use it, but Google’s survey suggests that it’s yet to achieve mainstream awareness.

Google — if you’re listening — here are my suggestions to increase Chrome’s adoption rate.

1. Change the name
“Chrome” is a clever and geeky name, but it means absolutely nothing to most people. I suspect few people in the IT industry understand the significance. Google has a history of naming applications after their function (docs, maps, email, etc.), and their browser should be no exception, e.g.

• Google Internet
• Google Web
• G-Internet
• or even just “Google” since that’s the first page most users open.

2. Get it on user desktops
The vast majority of users will only use Chrome if it’s already installed for them. Google should therefore:

1. Do deals with PC manufacturers and software producers.
2. Offer Chrome as an optional extra with related software, such as Google Desktop.
3. Promote the browser on Google-owned websites. A Chrome download link is already shown for IE6/7 visitors to Google.com (not IE5/5.5 though?), so the program could be extended to sites such as YouTube. Google needs to be careful with heavy-handed advertising, but a single opt-out click could apply across every site.

3. Keep the browser simple
Let’s cut the pretense. Google has one primary objective: to beat Microsoft and Internet Explorer. Many users have no reason to switch from IE, so Google should concentrate on persuading them that Chrome is easy to install, simpler, and faster to use. Security and stability are a bonus but, since so few IE users knowingly experience problems, those factors should not be part of the main marketing message.

I’m not against Google improving the browser with features such as add-ons, but most users will never care about or use those facilities. If an option results in additional complexity (even an extra menu item), Google should seriously reconsider its implementation.

Developers and power users already have Firefox and Opera so matching the feature sets found in those browsers may convert a proportion of IT-literate users. However, perhaps it would be better if Google targeted Chrome at the 92% of people who do not know what a browser is.

See also: What is a Web Browser? No One Knows!

Do you have any other ideas? Can Google persuade people to drop IE? Will Chrome just take market share from other browsers?

Sure, $795 is a bargain for two days of presentations by some of the most inspiring people on the Web (statement made based on personal experience). But it gets better — if you use the discount code SITEPOINT when you register, then you’ll receive an additional $45 off the ticket price, taking the cost down to AUD $750. If you’ve been waiting on approval from your boss, telling them about this extra discount might be all the incentive to get him or her across the line. And if you’re paying your own way, then this extra saving will no doubt be appreciated!

Here’s the kicker: you don’t actually have to pay for your ticket yet! You just have to register to attend, and can sort out payment for your ticket at a later date.

However, this offer is only good for two weeks, so be sure to act quickly!

So Why Should You Attend?

This year is looking like it will be bigger and better than ever. Personally I’m pretty excited about the fact that so many SitePoint authors are on the lineup to speak, but there are also some great new faces stepping up to talk about a range of exciting topics that will appeal to web professionals, regardless of whether you’re a designer, a developer or business-minded. Here’s just a sampling of some of the great speakers presenting at Web Directions South:

• SitePoint’s own Technical Director and best-selling author, Kevin Yank, talking about CSS Frameworks
• Author of Sexy Web Design, Elliot Jay Stocks, talking about progressive enhancement
• Author of several SitePoint books, Cameron Adams, talking about his experience designing the interface for Google Wave
• Author of the upcoming jQuery: Novice to Ninja, Earle Castledine

That’s just the tip of the iceberg — check out the full speaker list for more details.

Remember this low pricing is only available until July 9, so make sure you don’t miss out. Hope to see you there!

Read SitePoint coverage of past Web Directions conferences:

• Andy Budd on Usability, Design, and the Death of CSS
• IE and Standards: Chris Wilson Talks
• Comic Book Inspiration and the CSS Eleven

Disclaimer: SitePoint is a proud media partner of Web Directions South.

The project includes an article on “PHP performance tips”, which is bordering on being ridiculous. There are of course lots of blog posts with similar nonsense around the web, but since this is being endorsed by Google, it’s fair to assume that people might take it at face value. That’s unfortunate, as almost none of it is true. The PHP Team responded back with this message, wherein they refute the unfounded nonsense.

What’s more troubling however, is the whole approach to performance optimisation as a matter of “knowing the secret handshake”. Optimisation is far more complex than that, and spending time on these “optimisation tricks” are rarely worthwhile and might often lead to unmaintainable code, if applied too early. It’s a fine line, because there are of course certain things that you shouldn’t do (such as hit the database within a tight loop, if you can send one query instead), but there are likewise lots of things that are a complete and utter waste of every body’s time. It’s a pity that this article failed to keep those two issues separate.

Performance optimisation is not magic. The real way to deal with it, is to measure and analyse. It is almost impossible — even for a highly skilled programmer — to anticipate exactly where there might be bottlenecks in a program. Using a profiler gives you real numbers to relate to, rather than wild guesses and superstition.

For PHP scripts, there is the freely available Xdebug extension, which provides detailed information on both memory usage and execution time on a per-function basis. It’s easy to install and with the simple WebGrind as a front-end, you’ll be up and running in no time.