Blog

Here you’ll find articles about website development, WordPress, and other topics that I’m interested in. I hope you enjoy them and find them useful. Comments and feedback are always welcome!

How to Add Article Categories to Your CMS

25 January 2012 / 68 Comments

View Demo » | Download Code

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

Since publishing my tutorial Build a CMS in an Afternoon with PHP and MySQL, many readers have asked how to add more features to the CMS. I thought I’d answer some of these questions by writing additional tutorials that build on the original simple CMS.

In this tutorial, you’ll learn how to add article categories to the CMS. Categories give your site more flexibility: as well as listing all articles on the homepage, you can create separate section pages of your site, with each section page listing the articles belonging to a particular category.

For example, our original CMS demo lumps all types of article — news, reviews, and interviews — together on both the homepage and the archive page. By creating separate News, Reviews, and Interviews article categories in our CMS, we can then create individual archive pages for news, reviews, and interviews in our site.

You can see how this looks by clicking the View Demo link above. Notice that each article title on the homepage has a category name below it (Interviews, Reviews or News). Click a category to view its archive page, which lists all articles in that category, along with the description of the category at the top of the page.

jQuery Mobile Masterclass: Build a Simple, Attractive Twitter App for iPhone

31 October 2011 / 4 Comments

View Demo »

Download Code

(Open on your iPhone or iPad!)

jQuery Mobile is a great framework for building mobile web apps, and as the 1.0 release gets nearer it’s really starting to mature into a stable platform.

In my previous jQuery Mobile article, I gave a quick overview of jQuery Mobile’s headline features. In this tutorial you’ll delve deeper into jQuery Mobile. You’ll build a simple, nice-looking, easy-to-use iPhone Twitter app called “CloseFriends” that displays your closest Twitter friends’ latest tweets.

You’ll explore the following topics as you work through the tutorial:

How to build a web app using just HTML, CSS and JavaScript (no server-side code).
Making an app that can be installed and launched from the iPhone home screen.
Creating rich mobile interfaces using jQuery Mobile, including page transitions, list views, buttons and dialogs.
Using Scott Jehl’s excellent pagination plugin to create a sequence of draggable “latest tweet” pages, much like the native iOS Weather app.
Tweaking the pagination plugin to create a nicer swipe experience.
Working with the Twitter API using JavaScript.
How to use HTML5 local storage to store data persistently in the browser.
Creating your own jQuery Mobile swatches to theme your app.
Working with jQuery Mobile events.
Adapting to different device screen sizes and orientations.
…and lots more!

You can try out the finished app on your iOS device by tapping the View Demo button above, and download the complete code and image files by clicking the Download Code button.

To get the most from this tutorial, it helps to have some familiarity with JavaScript, jQuery and jQuery Mobile. A great way to get up to speed quickly with jQuery Mobile is to read my comprehensive eBook, Master Mobile Web Apps with jQuery Mobile.

Ready to build the CloseFriends app? Let’s go!

Responsive Web Design Demystified

30 September 2011 / 27 Comments

Responsive web design is a hot topic these days, especially as websites need to adapt to the growing number of mobile devices with their relatively small screens. Many designers and developers want to create new websites with responsive layouts, or modify their existing sites to incorporate responsive elements.

However, the whole topic can be somewhat bewildering at first glance. Responsive design is a relatively new idea, and it is rapidly evolving. It’s full of rather confusing terms, such as responsive layouts, adaptive layouts, media queries and viewports. Where to begin?

In this article, you get a gentle introduction to the world of responsive web design. You’ll:

Learn exactly what responsive design is, and why it’s useful
Look at the difference between the terms “responsive design” and “adaptive design”
Take an existing fluid layout and convert it into a responsive layout that looks good on all screens, from mobile to widescreen desktop, and
See how media queries and the viewport meta tag can help you build responsive layouts.

Ready to explore the world of responsive design? Let’s go!

5 JavaScript Libraries You’ll Love

9 September 2011 / Leave a Comment

When JavaScript first appeared on the scene way back in 1995, people were using it for fairly simple tasks such as form validation. These days, JavaScript has matured into a powerful language that, when coupled with HTML5 APIs like native video playback, drag-and-drop and the canvas element, allows you to build detailed, interactive user interfaces for your websites.

However, as you start to use JavaScript to build larger and larger web apps with complex data structures and rich user interfaces, it becomes clear that the JavaScript language alone is not really up to the task. Interacting directly with the DOM starts to get messy and tedious; JavaScript doesn’t have much in the way of data manipulation functions; its object model can cause headaches; and its syntax can get overly fussy.

Fortunately, some great JavaScript libraries have sprung up in recent years to make your life as a web developer much easier. In this article I’m going to focus on five fairly recent libraries and technologies that are starting to gain traction:

Backbone, for adding structure to large JavaScript-based web apps.
Underscore, a utility-belt library that adds functional programming features to JavaScript.
Knockout, a great way to simplify your user interfaces.
Sugar, which extends the JavaScript language with a wealth of useful methods.
CoffeeScript, a language that compiles down to JavaScript and is really nice to work with.

With each library, you’ll get an overview of what it does and how it works, and I’ve also included some useful links for finding out more information.

Ready? Let’s go!

MySQL for Absolute Beginners

25 August 2011 / 62 Comments

A database is an essential part of most websites and blogs, but setting up and using a database can be a daunting task for the beginner web developer.

In this tutorial you’ll learn — in simple terms — how to install, set up, and use a MySQL database on your computer. This will give you a good grounding in MySQL that you’ll find useful when you start developing database-driven websites using PHP, Ruby, or your language of choice.

You’ll explore the following areas in this tutorial:

The concept of a database, and why databases are useful
The advantages of using MySQL to manage your databases
How to install MySQL on your computer
Using the MySQL Monitor program to send commands to your MySQL server
How to create a database and table
SQL (Structured Query Language), and what it’s used for
Adding records to a table, and retrieving records from a table

Ready to start exploring MySQL? Let’s go!

7 Lovely Things About HTML5 Markup

12 July 2011 / 6 Comments

HTML5 — the latest generation of the Web’s markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 really hit the mainstream in 2010, in part driven by Steve Jobs’ open letter, Thoughts on Flash.

HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation.

In this article I’m going to focus on the markup language itself, and look at seven reasons why I love HTML5’s markup more than HTML4’s. We’ll look at:

Doctypes
data- attributes
Some new and improved elements and attributes
More flexible linking
Simpler markup, and
Enhancements to web forms.

Ready to upgrade your markup? Let’s go!

Object-Oriented PHP: Autoloading, Serializing, and Querying Objects

29 June 2011 / 9 Comments

Welcome to my fourth object-oriented PHP tutorial! If you missed the first three then you may want to take a look at those first, to give yourself a thorough grounding in PHP classes and objects:

If you’ve read all the articles up to this point then you’re already familiar with the most important concepts of object-oriented programming in PHP: classes, objects, properties, methods, and inheritance. In this final (for now, at least!) tutorial in the series, I’m going to tie up some loose ends and look at some other useful OOP-related features of PHP:

How to automatically load classes on demand
Converting objects to and from strings for easy storage and transmission, and
Useful ways to find out more about a given class or object.

Ready? Let’s go!

10 Ways the Mobile Web is Different

3 June 2011 / 7 Comments

As mobile web browsing becomes more common, it’s increasingly important to design websites for mobile use as well as for desktop browsing. This can mean anything from tweaking your regular site so it looks OK on Android and iOS devices, through to CSS media queries, responsive layouts, and even completely separate websites for mobile users.

The question is: How do you make a website work well on a mobile browser? It helps to start out by thinking about how the mobile browsing experience differs from desktop browsing. In this article I’ll touch on 10 important factors that make the mobile web different, and show how you can use those factors to influence your mobile site design decisions.

Object-Oriented PHP: Working with Inheritance

26 May 2011 / 2 Comments

Welcome to my third object-oriented PHP tutorial! If you haven’t already checked out the first two then you may want to take a look at those first, since this tutorial builds on the previous two:

In this article we’re going to explore the idea of inheritance in object-oriented programming, and how inheritance works in PHP. With inheritance, your objects and classes can become much more powerful and flexible, and you can save a lot of time and effort with your coding.

We’ll look at the following topics in this article:

The concept of inheritance, and why it’s so useful
How one PHP class can inherit from another
How a child class can override some of the functionality of its parent
Working with final classes and methods
Using abstract classes, and
Working with interfaces.

Ready? Let’s get started!

LESS Is More: Make Your CSS Coding Easier with LESS

18 May 2011 / 8 Comments

In recent years, CSS has matured into a very powerful way to style web pages. It’s now possible to create a website’s look almost entirely in CSS, with minimal use of images.

This is great, but one drawback is that CSS stylesheets are becoming longer, more complex, and harder to manage. It’s not uncommon for a typical stylesheet to run into hundreds of lines of code, with a large number of interdependent rules.

For this reason, various dynamic stylesheet languages are starting to spring up. These allow you to write your CSS rules using a more flexible, powerful language that is then turned into regular CSS for the browser to interpret.

In this article you’ll learn how to use LESS, an increasingly popular dynamic CSS language that you can use to streamline your CSS coding, saving you time and effort.

Blog

Footer

Contact Matt

Follow Matt