Introduction

Continuing on from last weeks tutorial (Creating a simple to-do application – Part 1) and the short snippet (Turning a form element into JSON and submiting it via jQuery ), this week we’ll be writing a PHP page to accept and process the form submit and return a JSON response.

Installing PHP on your web server

There are several ways to install PHP to your web server, but each is dependent on what web server you are running. The two main ones I will deal with are Microsoft’s Internet Information Services (IIS) and Apache. IIS will only run on Windows, but Apache will run on either Windows, OSX or your favorite Linux Distro (e.g Ubuntu). For each operating system there are several easy to use packages that will install and configure both the web server and php.

Apache

The easiest package for Apache I find is XAMPP, it provides installers for all of the major platforms and is very easy to use. You can download it directly from the site based on your operating system and follow their install guides.

Linux Windows OSX

The XAMPP site includes details on where to put your files and how to create alias folders. These topics and more are covered in the install guides above.

IIS

IIS actually comes free with Windows, it generally isn’t installed by default but you can add it in the “Add/Remove Programs” section of the Control Panel under “Turn On/Off Windows Features” (For a detailed step by step guide, click here). The easiest way to install PHP is to download the Microsoft Web Platform Installer. It will offer you a range of programs to install, everything from PHP and WordPress to various e-commerce platforms. All you do is pick the applications you want, and they will automatically be installed!

By default web files go in the following folder C:\inetpub\wwwroot, you can however create “Virtual Folders” that point anywhere you want. To continue this tutorial, please save the index.html page in to wwwroot or create a virtual folder

Getting started

Assuming you’ve gotten your web server running and PHP configured, let’s get started! (If you are having trouble, please feel free to ask in the comments section below and I will help as best I can).

First we’ll create our submit.php file (in the same folder as our index.html file) and then using the PHP global variable $_POST we will retrieve the form values we have submitted using jQuery. PHP code is always wrapped in “<?php ?>” tags, anything outside of these tags is rendered as normal (like HTML).

<?php $name = $_POST["new-task-name"]; $date = $_POST["new-task-date"]; $desc = $_POST["new-task-desc"]; $email = $_POST["new-task-email"]; $priority = $_POST["new-task-priority"]; $color = $_POST["new-task-color"]; ?>

We are using the $_POST variable instead of the $_GET because we specified our jQuery submit method as ‘POST’, this can be easily changed if you prefer to use ‘GET’

Now that we have our form values, we’ll have to provide some basic validation on them. We know that we need a name, the date and priority values, but we also know that we can specify optional values and in the case of the email field a comma separated list. First we’ll make sure our required values, do in fact have values and that they are formatted correctly.

Firstly, we’re going to specify some default values and then update the variables after we have confirmed that each of the form values has been provided. We can do this using the empty function.

<?php $name = null; $date = date('c'); $desc = null; $email = null; $priority = 2; $color = '#ffffff'; if (!empty($_POST["new-task-name"])) $name = $_POST["new-task-name"]; if (!empty($_POST["new-task-date"])) $date = $_POST["new-task-date"]; if (!empty($_POST["new-task-desc"])) $desc = $_POST["new-task-desc"]; if (!empty($_POST["new-task-email"])) $email = $_POST["new-task-email"]; if (!empty($_POST["new-task-priority"])) $priority = $_POST["new-task-priority"]; if (!empty($_POST["new-task-color"])) $color = $_POST["new-task-color"];...

Introduction

This is the first part of a series of tutorials that aim at to cover all aspects of web development. Each part in this series will build on the previous one, covering topics such as:

HTML5 CSS3 jQuery

We’ll also be covering slightly more advanced topics such as:

AJAX PHP MySQL Email Security/Authentication

Where required I will go into the basics of getting a development environment installed and configured. I will also cover basic design methodologies and best practice.

The Application

To start off we’re going to create a very basic to-do list application, every week we will add new features to it or extend existing ones. These following features will be implemented:

Save tasks and general information to a MySQL database Use jQuery to perform AJAX post-backs Add/Edit/Remove a task and save it using AJAX Refresh just the task list using AJAX Mark tasks as completed using AJAX Automatically sort tasks based on due date and priority Automatically email a reminder to the user (or attendees) of an up-coming task Use CSS animations to show activities Use CSS and jQuery to create a responsive design and layout that works on multiple platforms

Once this series is completed you should have a fully functional, database driven, responsive to-do application.

This week we’re going to get a basic wire-frame layout for our screen and start adding some basic styling.

Getting started

To start, we have to define the attributes of our task. This list isn’t final, but it’s a start:

Task name (string 250 characters, required) Date (DateTime, required) Priority (numeric 1-5, required) Color (string, hex or rgb value) Description (string, 1000 characters) Attendees (list of email addresses)

As you can see I’ve also specified the data type or a description for each property, this gives me a better idea of what requirements I have. It tells me not only what data type (number, string, etc…) I will need to store it as in the database, but also tells me what controls I can use.

The normal way of getting information in a web page is the using the <form> and <input> elements. In HTML5 several new input types and attributes have been added to make them more useful. Input elements have gained a new attribute ‘required’ and the following new types have been added:

datetime number color email

These new input types are pretty self explanatory, but their implementation is limited across all browsers. Specifically IE and Firefox are poor, but even Chrome doesn’t support all of them. The best browser for these turns out to be Opera funnily enough (as such all screenshots are from Opera). We’re going to use them, but in certain browsers we’ll have to augment their functionality using jQuery plugins to make the experience consistent (This will be covered in a later tutorial).

Another new feature added in HTML5 is the automatic validation of an inputs value depending on it’s type. For example the new number type must have a numeric value. Using attributes it is possible to set minimum and maximum values, including the step (or how much the value increases in one go)

<input type="number" required min="1" max="5" step="1" value="2">

The form

Now that we know what input types we have available to us we can decide how best to use them.

<form id="add-new-task"> <input id="new-task-name" name="new-task-name" type="text" required> <input id="new-task-date" name="new-task-date" type="datetime" required> <input id="new-task-priority" name="new-task-priority" type="number" required min="1" max="5" step="1" value="2"> <input id="new-task-color" name="new-task-color" type="color"> <input id="new-task-desc" name="new-task-desc" type="text"> <input id="new-task-email" name="new-task-email" type="email" multiple> <input type="submit" value="Add new"> </form>

As you can see I’ve marked the name, date and priority inputs as required, but I’ve also set the multiple attribute on the email input. This attribute tells the browser that there can be more than one email address in input. These emails will be separated by comma.

Now lets apply a little structure to our form and add label elements and split out the inputs on to separate rows

<form id="add-new-task"> <label for="new-task-name">Name:</label> <input id="new-task-name"...

Introduction

Static headers with boring backgrounds are everywhere… why don’t you try and spice yours up with a simple CSS animation?

I’d like you to meet Bob, he’s my friendly static image and he’d really like to wave hello to you!

Let’s give him the chance.

First up we’ll need to do a quick operation and temporarily remove his arm (Sorry Bob!)

Then we’re going to rotate his arm (very gently) by 45 degrees.

Now we can start re-assemble him using some simple HTML

<div class="logo"> <div class="arm"></div> <img src="body.png" /> </div>

We’re not quiet there yet, we’ll have to position his arm back in place

div.logo { position: relative; } div.logo div.arm { position: absolute; width: 138px; height: 138px; background: url('arm.png') top left no-repeat; top: 20px; left: 150px; z-index: -1; }

That’s a little better, now that’s he’s back in one piece let’s get him waving!

First we’ll need to specify our animation. We do that using the CSS animation properties. For this example we’re going to call our animation wave. We’ll define it in a minute, but first we have to update our div.logo div.arm class to the following.

div.logo div.arm { position: absolute; width: 138px; height: 138px; background: url('arm.png') top left no-repeat; top: 20px; left: 150px; z-index: -1; -webkit-animation: wave 2s ease-in-out infinite; -moz-animation: wave 2s ease-in-out infinite; animation: wave 2s ease-in-out infinite; }

As you can see we have given the name of our animation “wave”, a duration of 2 seconds, the ease-in-out timing function, and we’ve said to repeat it for infinity.

Now we have to define our actual wave animation, we do that using the @keyframes rule. Here we have to deal with browser support issues and define -webkit- and -moz- versions of the rule.

@-webkit-keyframes wave { 0% { -webkit-transform: rotate(0deg) translate(0px); transform: rotate(0deg) translate(0px); } 50% { -webkit-transform: rotate(30deg) translate(50px); transform: rotate(30deg) translate(50px);...

Introduction

I’m going to tell you a story, its about love, death and re-birth… Or something

In the beginning there was a young html element called <table>. He had one purpose in life, to display data and life was good. But before long though he had been corrupted, his masters used him to define layout and structure. Things he was not originally designed to do, and so began the dark ages of web design. Then one day, there came a young knight called CSS, and with him he brought light to designers everywhere. He was so beloved, the designers made him their King. Under his rule (selectors… sorry bad joke) the web flourished, sites became less structured, better looking and more responsive.

He was so well loved, people tried to make everything in his image. They found that they could display data in grid shaped patterns using lists and the all-powerful code that CSS had bestowed up on them.

But all was not well in the Kingdom of Web, the poor forgotten element table looked on. Increasingly spurned, he grew jealous. He knew that with his one purpose in life, he could display data better than any other magical element. But how could he regain his once strong foothold in the land of websites?

He, being a simple yet good element, prayed to the Gods of Standards and they heard him. They rebuilt and tweaked him, they made him streamlined and functional. Once they were done, they set him out into the world with a renewed purpose. Capable of showing data better than ever before, he approached the King, who now having moved on in years and being more mature recognized the tables usefulness and decided to re-instate the lowly table back in to his rightful place.

And the moral of the story is… use tables to show tabular data… don’t try and invent the wheel!

I also apologize for desecrating the HTML logo with my terrible drawing skills

On with the tutorial!

HTML5 has brought in several changes to the table element. Gone are the majority of table attributes, width/height, cellspacing/cellpadding and border are all gone. The look and feel should now be controlled by CSS (as it should be). In the above story, I said not to use tables for layout… people are still going to do this, they do provide structure and layout quiet easily. To help with this, it is now recommended that the attribute role should be specified with a value of “presentation”. This is to help site scrapers/aggregators know what content to ignore.

<table role="presentation"></table>

The following elements are for use within the table element:

caption colgroup col tbody thead tfoot tr td th

Each has a specific and well defined function. They also have to be used in specific ways and orders.

The <caption> element must be the 1st child element of a table, its purpose is to describe what the table is being used for. It appears on top of the table data.

<table id="table-1"> <caption>Tables are for displaying tabular data, not layout!</caption> </table>

Next up is the <colgroup> element, it’s used for grouping columns together. By specifying the span attribute you can tell the browser to apply a style to the columns (represented by the <col> element) in that group. Both the <colgroup> and <col> elements can use the span attribute, but they cannot be used at the same. It’s on one or the other but not both.

<table id="table-1"> <caption>Tables are for displaying tabular data, not layout!</caption> <colgroup> <col /> <col /> <col /> <col /> <col /> <col /> </colgroup> </table>

The <colgroup> and <col> elements are used for presentation, to actually define a tables columns you use the <thead> element. To define the columns you specify a single <tr> element and then use the <th> element.

<table id="table-1"> <caption>Tables are for displaying tabular data, not layout!</caption> <colgroup> <col /> <col /> <col /> <col /> <col /> <col /> </colgroup> <thead> <tr> <th scope="col"></th> <th scope="col">Column 1</th> <th scope="col">Column...

I quite like the developer drive logo animation. I remember seeing it a when I first found the site and thought it was simple, yet effective. I also wondered if it would be possible to replicate it using just CSS.

In this snippet we’ll cover CSS3 transitions and using @font-face to import some custom fonts.

The first thing we need to do is import out fonts, I wasn’t sure what the current ‘d’ font is so I have a similar font. The best place to go is www.fontsquirrel.com, you can pick from a wide selection of fonts or upload your own if you have a valid license. Once you’ve picked your font, in this case Alex Brush simply click on “Webfont Kit” and “Download @font-face kit”. You’ll be served a zip file containing the required font files, a sample css and html file. Extract them to your html folder and add the css @font-face to your own css file.

I also used Entypo for the house icon (which renders differently per browser for some reason)

@font-face { font-family: 'AlexBrushRegular'; src: url('AlexBrush-Regular-OTF-webfont.eot'); src: url('AlexBrush-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'), url('AlexBrush-Regular-OTF-webfont.woff') format('woff'), url('AlexBrush-Regular-OTF-webfont.ttf') format('truetype'), url('AlexBrush-Regular-OTF-webfont.svg#AlexBrushRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'EntypoRegular'; src: url('Entypo-webfont.eot'); src: url('Entypo-webfont.eot?#iefix') format('embedded-opentype'), url('Entypo-webfont.woff') format('woff'), url('Entypo-webfont.ttf') format('truetype'), url('Entypo-webfont.svg#EntypoRegular') format('svg'); font-weight: normal; font-style: normal; }

Next up we’ll need our HTML, it’s actually quiet small.

<div...

Introduction

Building on my previous tutorial, I thought it would an idea to show how to apply what we learned to the most basic of website features, the menu! I would strongly suggest reading my previous tutorial as we’ll be jumping in at the deep end here. Once again, no JavaScript was used in the making of this tutorial!

Every website has a menu, and there are lots of different styles that you can use. One style that is quiet popular in web applications and mini-sites is the accordion menu. The accordion is a simple multi-level (generally 2) menu that is of fixed height and width that has room for submenu items to expand into a space underneath the main menu item. Clicking on a top level item expands its children, while collapsing everything else.

There are a few things that you need to keep an eye on when creating an accordion menu. Its size and how you handle top level items with lots of children are probably the most important.

The HTML

The following example HTML has 7 top level menu items, each with various numbers of submenu items. This can be wrapped in either a <nav> or <menu> element, if you’re not sure have a look at my tutorial on what each one is used for.

<ol> <li id="item-1"><a href="#item-1"><span>Menu Item 1<span></a> <ol> <li>Sub Menu Item 1.1</li> <li>Sub Menu Item 1.2</li> <li>Sub Menu Item 1.3</li> <li>Sub Menu Item 1.4</li> <li>Sub Menu Item 1.5</li> <li>Sub Menu Item 1.6</li> </ol> </li> <li id="item-2"><a href="#item-2"><span>Menu Item 2<span></a> <ol> <li>Sub Menu Item 2.1</li> <li>Sub Menu Item 2.2</li> <li>Sub Menu Item 2.3</li> </ol> </li> <li id="item-3"><a href="#item-3"><span>Menu Item 3<span></a> <ol> <li>Sub Menu Item 3.1</li> <li>Sub...

In this tutorial we’ll be dealing with some basic HTML5 additions and their uses. We’ll also be creating a simple animated gallery using just CSS3 and HTML5 In making the gallery, we’ll also try and deal with responsiveness and scaling the gallery for different resolutions and devices.

Throughout this tutorial JavaScript will not be used!

Step 1: Understanding the HTML5 additions

http://www.w3.org/TR/html51/

There are lots of new tags in HTML5; today we’ll be dealing with the some of the most common ones.

section article header and hgroup footer nav figure and figcaption

It should also be noted that DOCTYPE has been simplified, now there is only:

<!DOCTYPE HTML>

The two most commonly confused tags are section and article. Put simply a section enables you to group logic items together, in this case articles. The confusion arises because an article can also have sections. An example of this would be a news site. The news site has several sections like current affairs, political and science. Each of these sections provides an overall grouping of the news articles inside. Something like this:

<section id=”current-affairs”> <article id=”news-item-1”> </article> <article id=”news-item-2”> </article> </section> <section id=”science”> <article id=”news-item-3”> </article> <article id=”news-item-4”> </article> </section>

As I mentioned above, articles can have sections too. Think of these as an introduction, main text and a conclusion, like this:

<section id=”current-affairs”> <article id=”news-item-1”> <section class=”introduction”> <p>This is the introduction</p> </section> <section class=”body”> <p>This is the body of the news item</p> </section> <section class=”conclusion”> <p>This is the conclusion</p> </section> </article> </section>...