Introduction

This week in part 4 of creating our simple to-do application we’ll be learning how to send email notifications/reminders. To do this we’ll be using the PHP mail method and learning how to schedule repeatable tasks on Linux using cron. The equivalent process for Windows is the task scheduler and it is pretty self explanatory. WordPress has what it calls the wp-cron alternative, but it’s use is limited as it requires someone to actually use the site.

Cron

Cron is the Unix/Linux schedule process, it allows users to configure tasks that are executed at defined intervals. It’s not exactly considered to be particularly user friendly, so many hosting providers have a simplified UI to help set it up. In any event, it is still beneficial to know the basics.

Cron jobs are specified in the ‘crontab’ file (typically in the /etc folder) Crontab is short for cron table, and as the name suggests it is a series of columns that determine when and what is run, split up in to tasks on each new line of the file. Each column has a specific time related function, with the last being the actual file that is executed. The column order is as follows:

Minutes (0 – 59) Hours (0 – 23) Day of month (1 – 31) Month (1 – 12) Day of week (0 – 6) File or command

You can specify any combination of the above columns, disabling columns is by way of the * character. This configuration method can lead to some confusing schedules being created. You can specify that any Monday, that is the 1st of the month at 11am execute some task. It would look something like this:

* 11 1 * 1 task.php

Overall it’s quiet a powerful system that you can configure to do almost anything. There are a few things to note, don’t schedule a task that takes 5 minutes to execute every minute. Cron will execute this and you will end up with duplicate scripts taking up resources and potentially causing issues.

PHP mail

PHP has a built in email function that is incredible easy to use. It uses the default SMTP server details in your php.ini configuration to send emails. Generally if you’re running in a hosted server this will be configured, if it’s not or if you want to use a different server you can use the ini_set function to update your configuration. The ini_set command would look something like this:

ini_set("SMTP", "smtpserver.yourdomain.com");

To actually send an email, you have to provide the following information:

The “to” address The subject The message Additional headers Additional parameters

The “to” address can be a simple one line “you@domain.com” or either a csv of email addresses. You can also specify the name of the person in this field as follows:

Bob Bobberson <bobby@bobberson.com>

Another quirk about the mail function is that the message body must be split on to multiple lines of no more than 70 characters. To indicate a new line you need to use the \r\n (CRLF) characters.

There is only one header that must be sent and that is the “from” header. You can also specify the “reply-to” or CC and BCC headers. The CC and BCC values have the same format as the “to” field. A full email would look something like this:

$from = "To Do Application <to-do@domain.com>"; $to = "Bob Bobberson <bobby@bobberson.com>"; $subject = "How to send an email in PHP"; $message = "Read this! Sending an email in PHP is really easy"; $headers = "From: To Do Application "; $headers .= "Bcc: Another attendee "; $headers .= 'Reply-To: ' . $from; $headers .= 'Return-Path: ' . $from; mail($to, $subject, $message, $headers);

I should also note, that if you are planning on sending lots of emails there are better alternatives out there that will queue emails and perform better in general. The mail function is not designed to scale quickly or well, however for once off emails it is sufficient

Building our script

So now we know how we’re going to schedule our emails and we also know how we’re going to send them, next up is what are we going to send? To do this it’s back to our MySQL database and a simple query. Here we’re going to do a simple select from our ‘tasks’ table where the ‘task_date’ is between 15 and 20 minutes from now. To do that we use the MySQL ADDDATE function.

SELECT `task_id`, `user_firstname`, `user_surname`, `user_email`, `task_name`, `task_priority`, `task_color`, `task_description`, `task_attendees`, `task_date` FROM `tasks` AS t INNER JOIN `users` AS u ON u.user_id = t.user_id WHERE `task_date` >= ADDDATE(NOW(), INTERVAL 15 MINUTE) AND `task_date`...

Introduction

So far we’ve created some basic PHP pages and added some simple authentication. Today we’re going to going to build on that by adding database support. This will allow us to add proper authentication to our application and start saving tasks. I should also note that I am currently writing PHP in-line and not using functions (or object orientated PHP) I will tidy this up in the next tutorial and spend more time explaining it and what it’s benefits are.

Last week

Last week we installed XAMPP, so you should already have MySQL installed and ready to go. If not, please check back on the previous tutorial here. If you decided to use IIS last week, you can download MySQL using the Microsoft Web Platform Installer, you can either install phpMyAdmin or download the MySQL Workbench tool

If you have any trouble installing or configuring any of the above, please leave a comment below and I will try and help you get sorted.

Creating our schema

Assuming you’ve got MySQL and phpMyAdmin installed, we can start creating our schema. So far we know that we will need at least two tables. Our user table for logging in and our tasks table. We also know that a user owns a specific task, so that tells us we’ll also need to use a Foreign Key to define the relationship.

First we will need a database to create our tables. A basic script to get us going would look something like this. It creates the database ‘todo’ and creates a ‘users’ and a ‘tasks’ table. It also defines the foreign key in the ‘tasks’ table for the ‘user_id’ column.

CREATE DATABASE todo; USE todo; CREATE TABLE IF NOT EXISTS `users` ( `user_id` bigint(20) unsigned NOT NULL auto_increment, `user_login` varchar(100) NOT NULL, `user_password` varchar(64) NOT NULL, `user_firstname` varchar(50) NOT NULL, `user_surname` varchar(50) NOT NULL, `user_email` varchar(100) NOT NULL, `user_registered` datetime NOT NULL default '0000-00-00 00:00:00', PRIMARY KEY (`user_id`), KEY `idx_user_login_key` (`user_login`) ) DEFAULT CHARSET=utf8 AUTO_INCREMENT=1; CREATE TABLE IF NOT EXISTS `tasks` ( `task_id` bigint(20) unsigned NOT NULL auto_increment, `user_id` bigint(20) NOT NULL REFERENCES `users`(`user_id`), `task_name` varchar(60) NOT NULL, `task_priority` tinyint(2) NOT NULL default '2', `task_color` varchar(7) NOT NULL default '#ffffff', `task_description` varchar(150)...

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

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...