Web Development

Client and server-side programming. Covers JavaScript, PHP, Perl and ASP.

Drag-and-Drop with jQuery: Your Essential Guide

17 February 2011 / 128 Comments

Dragging and dropping can be a very intuitive way for users to interact with your site or web app. People often use drag-and-drop for things like:

Moving email messages into folders
Reordering lists of items
Moving objects in games around, such as cards and puzzle pieces

Drag-and-drop with JavaScript used to be very hard to do — in fact, getting a decent cross-browser version working was next to impossible. However, with modern browsers and a smattering of jQuery, drag-and-drop is now a piece of cake!

In this tutorial we’ll take a look at how to create drag-and-drop interfaces with jQuery, and we’ll finish with a complete drag-and-drop example: a simple number cards game for kids.

PHP Recursive Functions: How to Write Them, and Why They’re Useful

4 February 2011 / 9 Comments

Like most programming languages that support functions, PHP lets you write recursive functions. In this tutorial, we’ll explore the concept of recursion in PHP, and discover how to create recursive functions for various tasks.

Recursion is one of those topics that can seem confusing at first, but once you start writing recursive functions you’ll see how elegant recursion can be!

Build a CMS in an Afternoon with PHP and MySQL

21 January 2011 / 622 Comments

View Demo » | Download Code

14 May 2019: This article and the code were updated for PHP7 compatibility.

Building a content management system can seem like a daunting task to the novice PHP developer. However, it needn’t be that difficult. In this tutorial I’ll show you how to build a basic, but fully functional, CMS from scratch in just a few hours. Yes, it can be done!

Along the way, you’ll learn how to create MySQL databases and tables; how to work with PHP objects, constants, includes, sessions, and other features; how to separate business logic from presentation; how to make your PHP code more secure, and much more!

The Joy of HTML5 Audio: Tips & Tricks for Easy Sound Embedding

21 December 2010 / 54 Comments

Up to now, playing audio in a web browser has been a bit of a black art. Traditionally there are several ways to embed a sound in a web page — some work better than others, and many only work if you happen to be using the right browser with the right plugin.

The ubiquity of the Flash plugin has helped to a large extent, since Flash makes it easy to embed audio in a way that works with most browsers. However, this doesn’t help with browsers such as Safari on the iPhone and iPad, which don’t support Flash at all.

In short, it’s all a bit of a mess.

Fortunately, HTML5 looks set to make life easier for us developers, thanks to its audio element. This element lets you embed an audio file in a web page, as well as control playback of the sound using JavaScript. More importantly, it doesn’t require any plugin to work, and is supported by nearly all modern web browsers. (We’ll come back to browser support later!)

In this tutorial I’ll show you how to embed sounds in a page with the audio element. We’ll also take a look at how to trigger and stop the audio via JavaScript, and how to ensure our audio can play on as many web browsers as possible.

Free Pretty Web Fonts in 5 Minutes with Google Font API

26 November 2010 / 7 Comments

View Demo »

Download Code

For years, us web designers and coders were stuck with a pretty poor range of fonts that we could use across all platforms: Times, Arial, Verdana, and a handful more. If you wanted anything more original then you had to create your text as an image in Photoshop.

Well, times they are a-changin’, in the form of web fonts. These are online font files that you link to from within your page. The browser downloads the font you linked to, and you can then use that font for text within your web pages, just as if it was a regular system font. Lovely!

Web fonts are really starting to take off now, with services such as Typekit, Font Squirrel and Ascender giving you access to a range of free and paid web fonts.

In this tutorial I’ll show you how to use the Google Font API to add nice-looking web fonts to your pages. This service is a relative newcomer to the scene, but it has a couple of big strengths:

All the fonts are free
It’s very easy to use

So, let’s see how we can use the Google Font API to add pretty fonts to our web pages — in less than 5 minutes!

PHP References: How They Work, and When to Use Them

19 November 2010 / 18 Comments

References are a very useful part of PHP and, for that matter, most other programming languages. However, references can be somewhat confusing when you first start learning about them.

This tutorial is a gentle introduction to references in PHP. You find out what references are, and how they work. You learn how to create and delete references, as well as pass references to and from functions. You also explore some other uses of references, and discover situations where PHP creates references automatically on your behalf.

The Top 30 Websites, Viewed in IE6

12 November 2010 / 10 Comments

Internet Explorer 6. Nine years on, it’s still a headache for web designers and developers across the globe!

Most of us would like to forget about this horrid old browser — first launched in 2001, for crying out loud — but there’s always that client or user who insists on using it (or is forced to by their employer). Even among the audience of W3Schools — a web-savvy crowd if ever there was one — there are still around 5% of visitors using IE6 at the time of writing.

The result of all this is that we are forced to spend hours of extra coding time, just to make our sites work in this outdated browser.

How many big sites these days actually bother supporting IE6?

But how many big sites these days actually bother supporting IE6? One might think that they all would, considering their huge user bases. But is this the case?

jQuery Mobile: What Can It Do for You?

5 November 2010 / 37 Comments

jQuery has long been a popular JavaScript library for creating rich interactive websites and web apps. However, since it was designed primarily for desktop browsers, it doesn’t have many features specifically designed for building mobile web apps.

jQuery Mobile is a new project that addresses this shortfall. It’s a framework built on top of jQuery that provides a range of user interface elements and features for you to use in your mobile apps.

The framework is pretty cutting-edge at the time of writing — in fact, the first alpha version was only released last month — but it’s already possible to do some great things with it.

In this article I’ll look at some of the key features and benefits of jQuery Mobile, and show some examples of how this new framework can help you build top-quality mobile apps in next to no time.

For best results, you’ll probably want to view the examples in this article with a mobile device such as iPhone or Android. Alternatively, Safari on the desktop (with a narrow window width) makes a good substitute.

Let’s go!

How to Make a CSS3 Floating Follow Tab with Rollover Effects

22 October 2010 / 13 Comments

View Demo »

Download Code

Recently, a reader asked us how we created our floating orange “follow” tab that appears on the right-hand side of every page on elated.com. It’s quite a nice effect and it also uses some interesting new CSS3 features, so I thought it’d make a good topic for a tutorial!

In this tutorial you’ll learn how to:

Work with CSS sprites
Position stuff relative to the browser window, rather than the page
Create CSS3 rounded borders
Add CSS3 drop shadows, and
Create cross-browser translucent gradient backgrounds (using no images!)

Ready? Let’s get started!

PHP Variable Scope: All You Need to Know

15 October 2010 / 6 Comments

When you’re just starting to work with functions and objects in PHP, variable scope can be the cause of some confusion. Fortunately, PHP’s scope rules are relatively easy to understand (compared to some other languages, at least!).

In this tutorial you’ll learn all you need to know about variable scope in PHP. You’ll look at:

The concept of variable scope — what it is, and what it means
The differences between global and local scope
How to access global variables from within a function
PHP’s superglobals, and how they work
How to use static variables to preserve state

Let’s get started!

Web Development

Footer

Contact Matt

Follow Matt