Web development blog, news and tutorials - Developer Drive

Creating a jQuery gallery for Flickr

Jonathan Schnittger — Tue, 21 May 2013 01:39:06 +0000

Introduction

This week, we’ll be creating a simple jQuery gallery that uses the Flickr API to retrieve a list of images from a photo set and display them. We’ll also be using the API to get some additional information about the images and storing it using the HTML5 data-* attributes

The Flickr API

To use the API you need to register for an API key, it doesn’t take long and you can start here

There are 2 methods that we will be using for this tutorial, first we’ll need to get name and description of the specified photo set. To do that we use the flickr.photosets.getInfo method, it has just 2 parameters, the API key and the photo set id. The photo set I am using is from the National Library of Ireland and is title Working Life, you can see the photo set ID (72157626766436507) is easily read from the URL. This set is available under a Commons license. Next up we’ll need to get the list of images in the photo set, to do this we use the flickr.photosets.getPhotos method. This method takes a few extra parameters that allow you to control paging and what information comes back

jQuery

Just like our last jQuery plug-in, we’ll start off with the basic plug-in template and move on from there.

(function( $ ) {
    $.fn.flickr = function(options) {
        var url = 'http://api.flickr.com/services/rest/?jsoncallback=?';
        
        var settings = $.extend( {
            'api_key': 'API KEY GOES HERE',
        }, options);
        
        return this.each(function() {
        });

    };
})( jQuery );

We’re going to make this plug-in completely self contained (except for CSS), so all the user has to provide is an empty div. To enable this, when the plug-in is initialized we will have to add any HTML elements we need.

var gallery = $(this);
gallery.addClass('flickr-gallery');
gallery.append('
');

Here you can see I am adding some header elements as well as two divs. The “viewport” div is where we will have our main image, and the “browser” div is where we will have our list of thumbnails.

To populate the thumbnail list we’re going to use the jQuery getJSON function. To use the Flickr API all we need to do is specify the API key, the method we are using and the photo set id. We also set the format we want the response to be in.

$.getJSON(url, {
    method: 'flickr.photosets.getInfo',
    api_key: settings.api_key,
    photoset_id: settings.photoset_id,
    format: 'json'
}).success(function(state) {
    gallery.children('h2').html(state.photoset.title._content);
    gallery.children('h3').html(state.photoset.description._content);
}).fail(function(state) { 
    alert("Unable to retrieve photo set information"); 
});

Because we specified the format as ‘json’ we can easily access the values of the response. Here I’m setting the title and description of the photo set in the header tags we added earlier.

Next we want to get the list of images, so this time we will nest the second getJSON function in the success function of our photo set info.

$.getJSON(url, {
    method: 'flickr.photosets.getInfo',
    api_key: settings.api_key,
    photoset_id: settings.photoset_id,
    format: 'json'
}).success(function(state) {
    gallery.children('h2').html(state.photoset.title._content);
    gallery.children('h3').html(state.photoset.description._content);
    
    $.getJSON(url, {
        method: 'flickr.photosets.getPhotos',
        api_key: settings.api_key,
        media: 'photos',
        photoset_id: settings.photoset_id,
        format: 'json',
        extras: 'url_sq,url_m,date_taken,tags'
    }).success(function(state) {
        var list = gallery.find('ul:first');
        list.html('');
        
        $.each(state.photoset.photo, function(){
            if(this.isprimary == "1") {
                var viewport = gallery.children('div.viewport');
                viewport.html('');
                viewport.html('' + this.title + '
' + this.tags + '');
            }
            list.append('');
        });
        
    }).fail(function(state) { 
        alert("Unable to retrieve photo set"); 
    });
}).fail(function(state) { 
    alert("Unable to retrieve photo set information"); 
});

As you can see the getJSON parameters are very similar and when the function returns successfully we use the jQuery each function to loop through all of the images. I am also appending the additional information we want to the img element using the data-* attributes. This allows me to keep all of the data I need next to the correct thumbnail. It also makes it very easy to parse it back out.

The Flickr API also tells me what the primary image for the set is, so I can automatically display this image in our viewport div.

To actually change the image in the viewport, we’ll need to add a click event to the list. We add this to the list and not each list item or image as it creates only one event and is more efficient.

list.on('click', view_image);

The view_image function we are referencing here will determine what element was clicked and then if it’s the thumbnail image, it will parse out the data-* attributes and update the image and headings as appropriate.

function view_image(event) {
    var target = $(event.target);
    
    if(target.is('img')) {
        var url = target.attr('data-url');
        var cache = new Image();
        cache.src = url;
        var gallery = target.parents('.flickr-gallery:first').children('div.viewport');
        var info = gallery.children('div.image-info');
        var image = gallery.children('img');
        image.fadeOut('slow', function () {
            image.attr('src', url);
            image.fadeIn('slow');
            info.html(target.attr('data-title') + '
' + target.attr('data-tags'));
        });
    }
}

There is an additional pieces of logic in the above JavaScript, it’s a quick hack to start the download of the image so that it is available for the animation. This, combined with the fade delay provides a smoother transition for the effect.

var cache = new Image();
cache.src = url;

CSS

For this gallery I have decided on a side by side view. To achieve this, I set the widths on my gallery viewport and browser div elements. I then use the CSS property ‘float’ with the value ‘left’ to move the 2 elements next to each other. It’s always a good idea to reset the float after wards. I have done this by appending an empty div with the class “clear” on it. The “clear” class uses the ‘clear’ property to ensure that the float does not cause any unwanted behavior.

div.flickr-gallery {
    width: 800px;
    height: 550px;
    overflow: hidden;
}

div.flickr-gallery .clear{
    clear: both;
}

div.flickr-gallery > div{
    float: left;
    max-height: 100%;
}

div.flickr-gallery div.viewport{
    width: 500px;
    position: relative;
}

div.flickr-gallery div.browser{
    width: 300px;
    overflow-y: auto;
}

div.flickr-gallery ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

div.flickr-gallery ul li{
    float: left;
    width: 75px;
    height: 75px;
    margin-left: 8px;
    margin-bottom: 8px;
}

I also want to have the image title and the tags display over the image. To do this I ensure that the viewport is has a position value of relative, and the image-info div is positioned absolutely. I also adjust the opacity level so that it’s slightly transparent.

div.flickr-gallery div.viewport .image-info {
    position: absolute;
    width: 500px;    
    top: 0px;
    text-align: center;
    background-color: #ffffff;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}

I have also set the overflow properties on main div to hidden and the overflow-y property on the browser div to auto so that the thumbnail list stays with in the bounds of the gallery.

Using the plug-in

To use the plug-in all you need is an empty div and the following jQuery.

Depending on your Internet connection and the performance of the Flickr API, you may want to add a loading animation to the gallery. It’s as simple as adding an animated gif and then when the final getJSON method returns and is finished parsing hiding it.

ABOUT THE AUTHOR

A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio http://schnittger.me

Creating a Google Maps shortcode for WordPress

Jonathan Schnittger — Thu, 16 May 2013 22:15:44 +0000

Introduction

This week we’ll be extending WordPress by adding a custom shortcode. This shortcode will allow us to add a Google Map to a post using a simple piece of text in a post or page. Shortcodes are a quick and easy way to add functionality to a post in WordPress. They look something like this:

[ gallery ids="1,2,3,4"]

We’ll also using PHP based Object Orientated Programming (OOP) to create our shortcode. We’ll create a basic class, that has some static functions with in. We’ll be using static methods because we want some level of state to be kept.

Getting started

Our basic class will be pretty simple, it needs to register the shortcode and provide functions to render the shortcode and add the API JavaScript file.

class GoogleMap_Shortcode {
    static function init() {
    }

    static function render_shortcode($atts) {      
    }
	
    static function enqueue_map_javascript() {
    }
}

To create our shortcode we’ll need to first register it and then define it how it works and what HTML it creates. We’ll also need to figure out a way to add in the Google Maps API JavaScript. To add a shortcode to WordPress we use the add_shortcode function. This function takes 2 parameters, the name of the shortcode and the function to call when we want to render the shortcode. We’re going to call our shortcode “map” and our render function “render_shortcode”. Since we’re using a class, we’re going to take advantage of the PHP Magic Constant “__CLASS__”, this will maintain a reference to our class and ensure our function can be called.

add_shortcode('map', array(__CLASS__, 'render_shortcode'));

The add_shortcode needs to be called only once, so we’re going to call it from our “init” function, and then immediately after our class definition call it.

class GoogleMap_Shortcode {
    static function init() {
        wp_enqueue_script( 'jquery' );
        add_shortcode('map', array(__CLASS__, 'render_shortcode'));
    }

    static function render_shortcode($atts) {
    }
    static function enqueue_map_javascript() {
    }
}

GoogleMap_Shortcode::init();

Now we have to start getting our shortcode to render. First up we need to define the attributes of the shortcode. One of these will be the Google Maps API key, you can sign up for one here, we’ll also want to be able to specify map related settings like the map type, zoom and naturally the co-ordinates we want to center on. We can define their default values using the shortcode_atts and extract functions.

extract( shortcode_atts( array(
    'api_key' => false,
    'id' => 'map-canvas-1',
    'class' => '',
    'zoom' => '18',
    'coords' => '53.339381, -6.260405',
    'type' => 'roadmap',
    'width' => '480px',
    'height' => '480px'
), $atts ) );

Here you can see I’m defaulting all the possible attributes, this means the user doesn’t have to specify them all in the shortcode if they don’t need to. The API key is needed for all instances of the shortcode, but we can cache the key from the 1st call so it does not need to be specified on all shortcodes on a page. If we declare a static variable inside the class and use it where ever we are in the class it will only need to be set once.

class GoogleMap_Shortcode {
    static $api_key = false;

    static function init() {
        wp_enqueue_script( 'jquery' );
        add_shortcode('map', array(__CLASS__, 'render_shortcode'));
    }

    static function render_shortcode($atts) {
        extract( shortcode_atts( array(
            'api_key' => false,
            'id' => 'map-canvas-1',
            'class' => '',
            'zoom' => '18',
            'coords' => '53.339381, -6.260405',
            'type' => 'roadmap',
            'width' => '480px',
            'height' => '480px'
        ), $atts ) );
        
        if(!self::$api_key && $api_key) {
            self::$api_key = $api_key;
        }      
    }
    static function enqueue_map_javascript() {
    }
}

GoogleMap_Shortcode::init();

There are four default map types, to simplify the specification of which one we want to use we can use a switch statement

$map_type_id = "google.maps.MapTypeId.ROADMAP";
switch ($type) {
    case "roadmap":
        $map_type_id = "google.maps.MapTypeId.ROADMAP";
        break;
    case "satellite":
        $map_type_id = "google.maps.MapTypeId.SATELLITE";
        break;
    case "hybrid":
        $map_type_id = "google.maps.MapTypeId.HYBRID";
        break;
    case "terrain":
        $map_type_id = "google.maps.MapTypeId.TERRAIN";
        break;
}

Now we have everything we need to actually render our shortcode. First we’ll need to specify the div we are going to wrap the map in, and then we’ll need some JavaScript to initialize the map.

class GoogleMap_Shortcode {
    static $api_key = false;

    static function init() {
        wp_enqueue_script( 'jquery' );
        add_shortcode('map', array(__CLASS__, 'render_shortcode'));
    }

    static function render_shortcode($atts) {
        extract( shortcode_atts( array(
            'api_key' => false,
            'id' => 'map-canvas-1',
            'class' => '',
            'zoom' => '18',
            'coords' => '53.339381, -6.260405',
            'type' => 'roadmap',
            'width' => '480px',
            'height' => '480px'
        ), $atts ) );
        
        if(!self::$api_key && $api_key) {
            self::$api_key = $api_key;
        }
        
        $return = "";
        
        $map_type_id = "google.maps.MapTypeId.ROADMAP";
        
        switch ($type) {
            case "roadmap":
                $map_type_id = "google.maps.MapTypeId.ROADMAP";
                break;
            case "satellite":
                $map_type_id = "google.maps.MapTypeId.SATELLITE";
                break;
            case "hybrid":
                $map_type_id = "google.maps.MapTypeId.HYBRID";
                break;
            case "terrain":
                $map_type_id = "google.maps.MapTypeId.TERRAIN";
                break;
        }
        
        if(self::$api_key) {
            $return = '';
            
            $return .= '';
        } else {
            $return = "Please specify your Google Maps API key";
        }
        
        return $return;        
    }
    static function enqueue_map_javascript() {
    }
}

GoogleMap_Shortcode::init();

I’ve also added a check here to see if the api key is set, and if not display a message to that effect. Next up we need to include the actual Map API JavaScript, to do that we’re going to use the wp_enqueue_script function. Because we’re checking that the api key is we are by default preventing the JavaScript from being loaded when the shortcode is not being used.

static function enqueue_map_javascript() {
    if ( ! self::$api_key )
        return;

    wp_enqueue_script( 'map-js', 
        "https://maps.googleapis.com/maps/api/js?key=" . self::$api_key . "&sensor=true"
    );
}

To make sure this script is included in the right place, we’re going to add an action to the wp_footer hook. We’ll add this to our init function

add_action('wp_footer', array(__CLASS__, 'enqueue_map_javascript'));

And that’s it, add this to your functions.php or use an include/require and you’ll be able to add Google Maps to your posts. To actually add it to a post, you can use the following:

[map api_key="INSERT YOUR API KEY"]

[map api_key="INSERT YOUR API KEY" id="map-2" coords="52.339381, -4.260405"]

[map api_key="INSERT YOUR API KEY" id="map-2" coords="52.339381, -4.260405" zoom="5" type="satellite"]

It was pointed out to me that I forgot to include the pointer for the map. I’ve updated the sample above and the download. This is the new line to add a marker.

$return .= 'var marker = new google.maps.Marker({ position: new google.maps.LatLng('.$coords.'), map: map });';

Here’s the updated full class.

ABOUT THE AUTHOR

A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio http://schnittger.me

Creating a simple to-do application – Part 4

Jonathan Schnittger — Mon, 13 May 2013 23:17:50 +0000

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

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 = "Bob Bobberson ";
$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` <= ADDDATE(NOW(), INTERVAL 20 MINUTE)

The above SQL combined with a cron job executing every 5 minutes should give us pretty reliable email notifications without putting load on a server. You may also notice the “INNER JOIN” syntax. This allows me to query 2 tables where both tables have the column ‘user_id’. In this way I can get the users email, firstname and surname values as well as all of their scheduled tasks in one go. The INNER JOIN also dictates that both tables must have matching rows to return, if only one has to have a matching row I could use what is called a “LEFT JOIN”.

Our full email.php script looks something like this:

";
$default_headers = "From: $from\r\n";
$default_headers .= "Reply-To: $from\r\n";
$default_headers .= "Return-Path: $from\r\n";

$query = $connection->prepare("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` <= ADDDATE(NOW(), INTERVAL 20 MINUTE)");
$query->execute();

$query->bind_result($id, $firstname, $surname, $email, $name, $priority, $color, $description, $attendees, $date);

while ($query->fetch()) {
    $to = "$firstname $surname <$email>";
    $headers = $default_headers;
    if(!empty($attendees)){
        $headers .= $headers . "\nBcc: $attendees";
    }
    
    $subject = "Upcoming priority $priority task - $name";
    $message = "Don't forget $name is at $date!\r\n";
    
    if(!empty($description)){
        $message .= "$description\r\n";
    }
    
    mail($to, $subject, $message, $headers);
}

$query->close();

?>

It’s pretty basic at the moment, but you can easily update the above to use HTML to send much prettier email alerts. To do that you need to set 2 additional email headers:

$default_headers .= "MIME-Version: 1.0\r\n";
$default_headers .= "Content-type: text/html; charset=iso-8859-1\r\n";

Once you’ve got that done you can update the $message variable to read in a HTML template from file or just manually write the HTML as you need it.

$message = "\r\n" . "Upcoming priority $priority task - $name\r\n" . "\r\n" . "

Upcoming priority $priority task - $name

\r\n" . "

Don't forget $name is at $date!
\r\n" . "$description\r\n" . "

\r\n" . "\r\n";

Putting it all together

Now that we have our PHP email script and we know how to set up our cron, there is just a few more things we need to do. At the top of the we need to prep-end the following check

if( php_sapi_name() != 'cli' )
    die("You don't have permissions to run this file");

This check ensures that the file can only be run from the command line. This means that even if the file is in your web folder (it probably shouldn’t) only someone at the command line or the cron job can execute it.

";
$default_headers = "From: $from\r\n";
$default_headers .= "Reply-To: $from\r\n";
$default_headers .= "Return-Path: $from\r\n";
$default_headers .= "MIME-Version: 1.0\r\n";
$default_headers .= "Content-type: text/html; charset=iso-8859-1\r\n";

$query = $connection->prepare("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` <= ADDDATE(NOW(), INTERVAL 20 MINUTE)");
$query->execute();

$query->bind_result($id, $firstname, $surname, $email, $name, $priority, $color, $description, $attendees, $date);

while ($query->fetch()) {
    $to = "$firstname $surname <$email>";
    $headers = $default_headers;
    if(!empty($attendees)){
        $headers .= $headers . "\nBcc: $attendees";
    }
    
    $subject = "Upcoming priority $priority task - $name";
    $message = "Don't forget $name is at $date!\r\n";
    $message = "\r\n" .
        "Upcoming priority $priority task - $name\r\n" .
        "\r\n" . 
        "Upcoming priority $priority task - $name\r\n" .
        "Don't forget $name is at $date!
\r\n" .
        "$description\r\n" .
        "\r\n" .
        "\r\n";    
    
    mail($to, $subject, $message, $headers);
}

$query->close();

?>

We also need to configure our cron to execute our email task every 5 minutes

*/5 * * * * email.php

As always I have the full demo hosted here, I have however disabled the sending of email. I don’t want to be caught sending Spam.

ABOUT THE AUTHOR

A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio http://schnittger.me

Creating a simple jQuery plugin for Pinterest

Jonathan Schnittger — Thu, 09 May 2013 22:51:34 +0000

Introduction

Plugins play a great part in the success of jQuery. There are hundreds of them out there, and having the ability to create your own is a great skill to have. With all of the interest in Pinterest (no pun intended), I thought it would be a good idea to do up a quick and simple Pinterest sharing plugin for jQuery.

Getting started

First we need to grab the jQuery plugin boilerplate

(function( $ ) {
    $.fn.pinterest = function(options) {
        
        var settings = $.extend( {                    
        }, options);
        
        return this.each(function() {    
        
        });

    };
})( jQuery );

This boilerplate provides us with the ability to specify default configuration values (settings) and ensures that the infamous jQuery chaining ability is maintained (the return this.each). I’m going to take advantage of the default configuration values by specifying the default Pinterest image we’ll be using. This can be overridden when initializing the plugin by specifying the url to the preferred image.

Default image

Custom image

(function( $ ) {
    $.fn.pinterest = function(options) {
        
        var settings = $.extend( {
            'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
        }, options);
            
        return this.each(function() {    
        
        });

    };
})( jQuery );

$(document).on('ready', function(){
    $('img#share').pinterest({ button: 'pinterest-alt.png'});
});

Now that we have a basic framework done, let’s start adding some functionality. We need to update the this.each function to initialize each image and add some events for us. I’ve chosen to have the icon hover over the image being shared. To do this, I need to wrap the image in a span element that positioned ‘relative’, I then need to append the share image and position it absolutely. I’m going with the bottom right, but feel free to have a play

(function( $ ) {
    $.fn.pinterest = function(options) {
        
        var settings = $.extend( {
            'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
        }, options);
                    
        return this.each(function() {    
            img = $(this);
            img.wrap('');
            img.parent('span.pin-it').append('');
        });
    };
})( jQuery );

$(document).on('ready', function(){
    $('img#share').pinterest({ button: 'pinterest-alt.png'});
});

Now that the elements that we need are there, we can start attaching our events. I’m going to use the hover and click events. When the user hovers over the main image, the share button will appear.

(function( $ ) {
    $.fn.pinterest = function(options) {
        
        var settings = $.extend( {
            'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
        }, options);
        
        function on_click () {         
        };
        
        function on_hover_in() {
            $(this).siblings('img:first').show(500);
        };    
        
        return this.each(function() {    
            img = $(this);
            img.wrap('');
            img.parent('span.pin-it').append('');
            img.hover(on_hover_in);
            img.siblings('img:first').on('click', on_click);
        });

    };
})( jQuery );

$(document).on('ready', function(){
    $('img#share').pinterest({ button: 'pinterest-small.png'});
});

The on_click event looks like the following

function on_click () {
    img = $(this).siblings('img:first');
    description = img.attr('title');
    url = document.location;
    media = img.attr('src');

    var pin_url = 'http://pinterest.com/pin/create/button/?url=' + encodeURIComponent( url ) +
        '&media=' + encodeURIComponent( media ) +
        '&description=' + encodeURIComponent( description );
    
    window.open(pin_url, 'Pin - ' + description, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
    $(this).hide(1000);
};

It’s grabbing the image we want to share, and then reading it’s title and src attributes. It’s also getting the current pages url using document.location. The Pinterest share url has 3 parameters that we are interested in:

url – the page we are sharing from
media – the image we want to share
description – the text we want to share with the image

When I’m creating the share url, I’m also using the JavaScript encodeURIComponent function to make sure the values are properly escaped.

One final thing we need to allow for is if the image src url is relative or not. If it’s relative we’ll need to update the media url to be fully qualified.

function getUrl(src){
    var url = document.location.toString();
    var http = /^https?:\/\//i;
    if (!http.test(src)) {
        if(src[0] == '/'){
            url = url.substring(0, url.lastIndexOf('/')) + src;
        } else {
            url = url.substring(0, url.lastIndexOf('/')) + '/' + src;
        }
    } else {
        url = src;
    }
    
    return url;
};

This function is checking to see if the provided src URL starts with http or not. If it doesn’t it then creates an absolute url and returns it.

And that’s it, we now have a fully functional jQuery plugin for sharing images on Pinterest. You can see the full HTML and JavaScript or download it below. The image I’m sharing by the way is Picasso’s Three Musicians




    
    Creating a simple Pinterest! jQuery
    
    
        
        



    
    
        
            Creating a simple Pinterest! jQuery

ABOUT THE AUTHOR

A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio http://schnittger.me

Creating a simple to-do application – Part 3

Jonathan Schnittger — Mon, 06 May 2013 22:17:02 +0000

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) NULL,
  `task_attendees` varchar(4000) NULL,
  `task_date` datetime NOT NULL default '0000-00-00 00:00:00',  
  PRIMARY KEY (`task_id`),
  KEY `idx_task_name_key` (`task_name`)
) DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

To create our first user we need to insert a row into the ‘users’ table. The sql below will define a user with the login ‘developerdrive’. If you have a look at the SQL you can also see it is calling the PASSWORD function. This is a built in function for MySQL that uses the the SHA1 function to hash a string. It’s recommended that you also salt a password before hashing it. Salting is the appending (or prepending) of a piece of randomly generated data to the original password (like ‘password’ + ‘dhskhfkjhsdkfhskad’), this increases the randomization of the password and making it more difficult to break. If you are salting the password, you will also need to store the salt separately to the password.

Feel free to update the details below to your own, don’t forget your password though!

INSERT INTO `users` ( `user_login`, `user_password`, `user_firstname`, 
	`user_surname`, `user_email`, `user_registered` )
SELECT 'developerdrive', PASSWORD('to-do-password'), 'developer',
	'drive', 'developer@email.com', NOW();

The entire script (schema.sql) including any SQL examples is included in the tutorial download at the end

Authentication

Now that we have our users table and our own login, we need to update our login.php to connect to the database and check the provided login against the ‘users’ table. To do that we are going to use the MySQLi library. To create a database connection using MySQLi, you need to provide the library the MySQL database details. The default XAMPP mysql credentials are a username of “root” and a blank password. Since we’re using the local database, you specify “localhost” as the server and “todo” as the name of the database.

$connection = new mysqli("localhost", "root", "", "todo");

if (mysqli_connect_errno()) {
    die(sprintf("Connect failed: %s\n", mysqli_connect_error()));
}

We want to be able to use this connection all over our application, so we’re going to create a new file called database.php and put the following PHP in it.

We can now update out login.php file to require ‘database.php’ and we can also add our first SQL query. We’re going to use parameterized SQL and pass in our $username and $password variables from before. Parameterized SQL helps prevent attackers overriding your SQL using what is called a SQL Injection attack. A SQL injection attack can be quiet serious and can result in the complete loss of your data.

The SQL statement queries the ‘users’ table for a ‘user_id’ that has a ‘user_login’ and ‘user_password’ that matches the provided values. We wrap the password parameter in the PASSWORD function to make sure we only compare the hash values. If the query returns a user_id we know that the correct username and password have been provided.

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    
    require_once('database.php');
    
    if(!empty($_POST["username"]) && !empty($_POST["password"])) {
        $username = $_POST["username"];
        $password = $_POST["password"];
    
        $query = $connection->prepare("SELECT `user_id` FROM `users` WHERE `user_login` = ? and `user_password` = PASSWORD(?)");
        $query->bind_param("ss", $username, $password);
        $query->execute();
        $query->bind_result($userid);
        $query->fetch();
        $query->close();
        
        if(!empty($userid)) {
            session_start();
            $_SESSION["authenticated"] = 'true';
            header('Location: index.php');
        }
        else {
            header('Location: login.php');
        }
        
    } else {
        header('Location: login.php');
    }
}

The function that actually sets the parameters in the query is the bind_param function. The first parameter (“ss” above) defines the number of parameters and their data types:

i for integer numbers e.g. 9999
d for double or decimal numbers e.g. 10.99
s for string e.g. “testing”
b for binary or blob values

The bind_result function binds a variable to the result column in the same ordinal position. In the above example I am selecting only the ‘user_id’ column, if I was selecting col1, col2, col3 I could use bind_result($val1, $val2, $val3) to get their values.

While this has improved security, we still suffer from the fact that the authenticated flag is stored in session. It would be a much better idea to store the session in the database along with the expiry date (in one hour) and the IP address the user logged in from. To do this, all we have to do is create a new ‘sessions’ table and insert a row that can be checked by the authenticate.php file

CREATE TABLE IF NOT EXISTS `sessions` (
  `session_id` bigint(20) unsigned NOT NULL auto_increment,
  `user_id` bigint(20) NOT NULL REFERENCES `users`(`user_id`),
  `session_key` varchar(60) NOT NULL,
  `session_address` varchar(100) NOT NULL,
  `session_useragent` varchar(200) NOT NULL,
  `session_expires` datetime NOT NULL default '0000-00-00 00:00:00',  
  PRIMARY KEY (`session_id`),
  KEY `idx_session_key` (`session_key`)
) DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

Here’s the full login.php content

prepare("SELECT `user_id` FROM `users` WHERE `user_login` = ? and `user_password` = PASSWORD(?)");
        $query->bind_param("ss", $username, $password);
        $query->execute();
        $query->bind_result($userid);
        $query->fetch();
        $query->close();
        
        if(!empty($userid)) {
            session_start();
            $session_key = session_id();
            
            $query = $connection->prepare("INSERT INTO `sessions` ( `user_id`, `session_key`, `session_address`, `session_useragent`, `session_expires`) VALUES ( ?, ?, ?, ?, DATE_ADD(NOW(),INTERVAL 1 HOUR) );");
            $query->bind_param("isss", $userid, $session_key, $_SERVER['REMOTE_ADDR'], $_SERVER['HTTP_USER_AGENT'] );
            $query->execute();
            $query->close();
            
            header('Location: index.php');
        }
        else {
            header('Location: login.php');
        }
        
    } else {
        header('Location: login.php');
    }
} else {
?>



    
    Creating a simple to-do application - Part 1
    



    
    
        
            Login
                
    
    
    
        
            Username:
            
            Password:
                                
            

            
        
    
    
    
    
        
            Copyright 2013
            Jonathan Schnittger. All Rights Reserved.

Now we can update authenticate.php to check for the correct session. We do this by querying for the ‘session_key’, ‘session_address’ and the ‘session_agent’. This way any changes to the session will be detected and the user will be asked to re-authenticate. We also confirm that the session has not expired.

prepare("SELECT `session_id`, `user_id` FROM `sessions` WHERE `session_key` = ? AND `session_address` = ? AND `session_useragent` = ? AND `session_expires` > NOW();");
$query->bind_param("sss", $session_key, $_SERVER['REMOTE_ADDR'], $_SERVER['HTTP_USER_AGENT']);
$query->execute();
$query->bind_result($session_id, $user_id);
$query->fetch();
$query->close();

if(empty($session_id)) {
    header('Location: login.php');
}

?>

It’s probably a good idea to update the session expiry date every time the user does something, this way we’re not forcing them to login every hour. If you add the following php to the end of authenticate.php the session expiry will be extended for another hour.

$query = $connection->prepare("UPDATE `sessions` SET `session_expires` = DATE_ADD(NOW(),INTERVAL 1 HOUR) WHERE `session_id` = ?;");
$query->bind_param("i", $session_id );
$query->execute();
$query->close();

It’s also important to note that certain browsers share the session_id across tabs. This means that because we’re storing the session in the database, if the user opens up a new tab they will automatically be logged in. If this is not the behavior you want, you can use the session_regenerate_id function to generate a new session_id

Listing and saving tasks

Now that we have authentication out of the way, we can save our first task and view a list of existing tasks. First up we’ll update index.php to be able to list any existing tutorials. We need to ensure that only the tasks for the logged in user are shown. To do this we’ll use the $user_id variable we set in authentication.php. The following code is from between the table tbody tags in index.php

prepare("SELECT `task_id`, `task_name`, `task_priority`, `task_color`, `task_description`, `task_attendees`, `task_date` FROM `tasks` WHERE `user_id` = ?");
$query->bind_param("i", $user_id);
$query->execute();

$query->bind_result($id, $name, $priority, $color, $description, $attendees, $date);
while ($query->fetch()) {
    echo '' . $date . '' . $priority . '' . $name . '' . $description . '' . $attendees . '';
}

$query->close();
?>

Next up is actually saving our first task. To do this we need to update submit.php. Here we’re going to add an insert statement once we’ve validated the data submitted.

 0){
    $result['success'] = false;
} else {
    if(!empty($email)){
        $email = implode(',', $email);
    }
    $date = $date->format('c');
    
    $query = $connection->prepare("INSERT INTO `tasks` ( `user_id`, `task_name`, `task_priority`, `task_color`, `task_description`, `task_attendees`, `task_date` ) VALUES ( ?, ?, ?, ?, ?, ?, ? );");
    $query->bind_param("isissss", $user_id, $name, $priority, $color, $desc, $email, $date );
    $query->execute();
    $result['id'] = $query->insert_id;
    $query->close();

    $result['success'] = true;
    $result['name'] = $name;
    $result['date'] = $date;
    $result['desc'] = $desc;
    $result['email'] = $email;
    $result['priority'] = $priority;
    $result['color'] = $color;
}

echo json_encode($result);
?>

Here you can see that I’m returning the $query->insert_id in the $result array. This is the ‘task_id’ created by when we inserted the new task

And there you have it, we’ve got some of the basic functionality done. We can now log in and create or view existing tasks. Next up I’ll be refactoring the code to use functions and adding better error handling. We’ll also be looking at adding a cron job to tidy up expired sessions and perhaps we can add in some statistics to see what features or pages our users are looking at

ABOUT THE AUTHOR

A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio http://schnittger.me

Adding a simple authentication using PHP require and includes

Jonathan Schnittger — Fri, 03 May 2013 22:58:20 +0000

Introduction

Please note that this tutorial has now been superseded by a later, more in-depth tutorial available here

Continuing on with our to-do application, in this weeks snippet we’re going to be using PHP’s require_once function. The require_once function is similar to the require function, in that it will execute and include any php code with the calling file but with one vital difference. It will only execute once. This is important for us in this tutorial as we are going to use it to validate our user.

There are a few things to note first, since this is a short tutorial I will be doing something that is not a good idea in a production application. I will be storing the logged in state in the $_SESSION variable, this is only temporary as next week we will be updating it to store it in a MySQL database. We will also be storing in the database additional information such as the source IP address and a timestamp to mitigate against session hi-jacking.

Getting started

First we will need to convert our existing index.html file to a php file. To do this, simply change the extension to ‘.php’ and open the file in your text editor. We will now also create a new php file called ‘authenticate.php’ and save it in the same folder as our new index.php.

Now inside our index file, we are going to add the following php code to the very top of the file.

This means that as soon as the file is executed, it will read and execute our authenticate.php file. The contents of the authenticate file is also pretty straight forward for now. We’re going to ensure our session has been started (session_start), and then check to see if the $_SESSION variable contains our authenticated flag. If it doesn’t exist or is not set to ‘true’ we will re-direct the user to our 3rd new page login.php. To perform the re-direct we are going to update the header Location value to point to our login.php file.

By also adding the above code to our submit.php, we can also ensure that only authenticated users can add tasks.

In the scenario where we have already logged in, the index.php file will continue to execute as normal and we shall see our form and table as usual.

Logging in

Next up, we are going to create our login page. For now, it will be just a simple username and password form that uses POST to send the provided details to itself.




    
    Creating a simple to-do application - Part 1
    



    
    
        
            Login
                
    
    
    
        
            Username:
            
            Password:
                                
            

            
        
    
    
    
    
        
            Copyright 2013
            Jonathan Schnittger. All Rights Reserved.

At the top of this file we’re going to add our POST logic.





    
    Creating a simple to-do application - Part 1
    



    
    
        
            Login
                
    
    
    
        
            Username:
            
            Password:
                                
            

            
        
    
    
    
    
        
            Copyright 2013
            Jonathan Schnittger. All Rights Reserved.

Here you can see that if the POST variable contains the keys username and password it will attempt to confirm that their values are equal to user and password. If they are not, it will redirect the user back to itself. If the values are correct, we ensure our session is started and set our ‘authenticated’ session value to true and then re-direct to our index.php file. I’ve also wrapped the HTML tags in a conditional statement, so that if the page is requested using a GET it will show the log in form as normal.

Since we have now setup our session and the authenticated flag has been set, the index page will render as normal.

A final note

As I have previously mentioned, this is not secure and should not be used in a production environment. It does however introduce us to session variables and allows us a stepping stone on to improving security and MySql database connectivity next week. In a later tutorial we will also be revisiting the require_once function to give us basic templating abilities for common HTML elements such as the header and footer of our application.

ABOUT THE AUTHOR

A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio http://schnittger.me

Creating a simple to-do application – Part 2

Jonathan Schnittger — Tue, 30 Apr 2013 00:09:41 +0000

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.

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 “” tags, anything outside of these tags is rendered as normal (like HTML).

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.

We’re also going to confirm that the date value is in the correct format and that the priority is an integer value. We do this using the DateTime and intval functions. Using the explode and implode functions we can also convert the comma separated email list into an array and back to a string.

We must also provide feedback to the user if the required values are not set. To do this we will return a JSON object with a success value of false, we’ll also return a list of messages informing the user of what they need to do. Using the json_encode function we can convert our $result array to JSON very easily

 0){
    $result['success'] = false;
} else {
    $result['success'] = true;
    $result['name'] = $name;
    $result['date'] = $date->format('c');
    $result['desc'] = $desc;
    $result['email'] = implode(',', $email);
    $result['priority'] = $priority;
    $result['color'] = $color;
}

echo json_encode($result);
?>

We now have to update our jQuery submit method to handle the response and either show an error message or add the task row to the table.

$.ajax({
    type: "POST",
    url: "submit.php",
    data: json,
    dataType: "json"
}).success(function(state) { 
    if(state.success === true) {
        tbody.append('' + state['date'] +
            '' + state['priority'] + '' + state['name'] + 
            '' + state['desc'] + '' + state['email'] + '');    
    } else {
        alert(state.error.join());
    }
}).fail(function(state) { 
    alert("Failed to add to-do"); 
});

As you can see, if the success value of the state returned by out PHP file is true we add the row from the result. If it is false we append all of the error messages from the error array in to one string using the join function and display it using the alert function.

We have now validated and cleansed our form values, we have also started to add some more complex logic to our application (in the form of error messages).

Next week

Next week we’ll cover setting up a MySql database and creating some basic tables. We’ll also update our submit.php file to save the task to the database and add some more functionality to our application by converting out static HTML page to PHP and adding in some basic authentication. Security and file/database permissions deserve their own tutorial, so I will be covering them in depth very soon.

ABOUT THE AUTHOR

A battle hardened software developer with a mixed and colorful background, who can’t come up with a decent author bio http://schnittger.me