Adjust server time

If you have a server in a different timezone to you then you might be seeing funny things happen when you add the time to a MySQL database for example. You can fix this by adding or subtracting hours as in the example below.

$now = date('Y-m-d-G');
$now = strftime("%Y-%m-%d-%H", strtotime("$now -8 hours"));

Create a slug URL from string of text

Here we’re passing in a simple string of text converting it to lowercase and replacing all the spaces with a dash.

function create_slug(strtolower($string)){
   $slug=preg_replace('/[^a-z0-9-]+/', '-', $string);
   return $slug;
}

echo create_slug('Create a slug URL from string of text');

Convert HEX value to RBG

If you’ve ever need to get an RGB colour format converted from a Hexadecimal this is the function for the job.

function hextorgb($hexvalue){
        if($hexvalue[0] == '#') {
                $hexvalue = substr( $hexvalue, 1);
        }
        if(strlen( $hexvalue ) == 6){
                list($r, $g, $b) = array($hexvalue[0] . $hexvalue[1], $hexvalue[2] . $hexvalue[3], $hexvalue[4] . $hexvalue[5]);
        }elseif (strlen($hexvalue) == 3) {
                list($r,$g,$b) = array($hexvalue[0] . $hexvalue[0], $hexvalue[1] . $hexvalue[1], $hexvalue[2] . $hexvalue[2]);
        }else{
                return false;
        }
        $r = hexdec($r);
        $g = hexdec($g);
        $b = hexdec($b);
        return array('R' => $r, 'G' => $g, 'B' => $b);
}

$rgb = hextorgb('#fff000');

print_r($rgb);

Display a users Gravatar image

Getting users images from Gravatar is simple. If you have the users email address you just need to MD5 hash it and append it to the gravatar URL.

   $gravatar = 'http://www.gravatar.com/avatar/' . md5($email_address) . '?s=32';
   echo '<img src="' . $gravatar . '" width="32" height="32"/>';

Convert links in a string of text to hyperlinks

Very useful function which will convert a string of text and ad hyperlinks to all the URLs. We loop through each URL and add a hyperlink

function url_to_link($text){

            $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
            // Check if there is a url in the string
            if (preg_match_all($reg_exUrl, $text, $url)) {

                foreach($url[0] as $v){

                    $position = strpos($text,' '.$v)+1;
                    $text = substr_replace($text,'', $position, strlen($v));
                    $text = substr_replace($text,''.$v.'', $position ,0);
                }
                return $text;
            }
            else {
                // if no urls in the text just return the text
                return $text;
            }
        }

$string = 'This is a string of text and we have a link: http://papermashup.com we also have another link http://google.com';
echo url_to_link($string);

Parse JSON in PHP

Parsing a string of JSON is easier than you may think as we can use the json_decode() function in PHP which will convert the JSON into an array in PHP which we can then manipulate as needed.

  $json ='{"id":0,"name":"Ashley","surname":"Ford","Website":"http://papermashup.com"} ';

   $array=json_decode($json);

   // print  the array
   print_r($array);
   echo $array->name; 

The Code

       function isSiteAvailable($url)
       {
               //check, if a valid url is provided
               if(!filter_var($url, FILTER_VALIDATE_URL))
               {
                       return 'URL provided wasn\'t valid';
               }

               //make the connection with curl
               $cl = curl_init($url);
               curl_setopt($cl,CURLOPT_CONNECTTIMEOUT,10);
               curl_setopt($cl,CURLOPT_HEADER,true);
               curl_setopt($cl,CURLOPT_NOBODY,true);
               curl_setopt($cl,CURLOPT_RETURNTRANSFER,true);

               //get response
               $response = curl_exec($cl);

               curl_close($cl);

               if ($response) return 'Site seems to be up and running!';

               return 'Oops nothing found, the site is either offline or the domain doesn\'t exist';
       }

	// check if site exists / is up
	if($_GET['url']){

	   $response = isSiteAvailable($_GET['url']);
	   $message = '<div class="response">'.$response.'</div>';
	}

Display the response

<?php echo $message;?>

<form action="" method="get">

Enter a URL below or click an example below:<br/>

<ul>
<li><a href="?url=http://harkable.com">harkable.com</a></li>
<li><a href="?url=http://google.com">google.com</a></li>
<li><a href="?url=http://sfdhjsdkhfskjfhskjfh.om">sfdhjsdkhfskjfhskjfh.om</a></li>
</ul>

<input name="url" type="text" value="<?php echo $_GET['url'];?>" />

</form>

The Code

The first line of the function gets the REQUEST_URI (/path/to/file.php), splits the string (using ‘/’) into an array, then filters out any empty values. We then store the base url for the site in $base_url. Next we find the array key for the last value in the $path array. We then do a for loop to build up the breadcrumbs and determine where to put the a tag etc.

function breadcrumbs($separator = ' » ', $home = 'Home') {

    $path = array_filter(explode('/', parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)));
    $base_url = ($_SERVER['HTTPS'] ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . '/';
    $breadcrumbs = array("<a href=\"$base_url\">$home</a>");

    $last = end(array_keys($path));

    foreach ($path AS $x => $crumb) {
        $title = ucwords(str_replace(array('.php', '_'), Array('', ' '), $crumb));
        if ($x != $last){
            $breadcrumbs[] = '<a href="$base_url$crumb">$title</a>';
        }else{
            $breadcrumbs[] = $title;
		}
    }

    return implode($separator, $breadcrumbs);
}	

Calling the function

This is the simple bit! Simply add the above function to the top of your PHP page and call the function as shown below. You can optionally add a separator symbol or specify the wording for ‘Home’.

echo breadcrumbs();

The Code

Below is the function which will remove all the spaces and special characters from a string and convert it to lowercase making sure its formated ready to be used as a page URL.

function create_slug($string){
   $string = preg_replace( '/[«»""!?,.!@£$%^&*{};:()]+/', '', $string );
   $string = strtolower($string);
   $slug=preg_replace('/[^A-Za-z0-9-]+/', '-', $string);
   return $slug;
}

$slug = create_slug('This is my page title');

echo $slug;

// this should print out: this-is-my-page-title

The .htaccess Code

If you were to use the function above in conjunction with generating page urls as part of a web application you’ll need some way of the server handling url redirects etc. The easiest way to do this is by using .htaccess. More information can be found about .htaccess here. What the code below does is, it takes the url for example ‘http://papermashup.com/this-is-my-page-title’ then appends the; ‘this-is-my-page-title’ as a GET variable value, in the case below we’re saving it in the GET variable ‘slug’ which is appended to index.php. So now when we visit ‘http://papermashup.com/this-is-my-page-title’ the server looks for http://papermashup.com/index.php?slug=this-is-my-page-title. Then it’s up to you to process the data for each url. So if you had a web app you might have a MySQL database that holds all your site URLs and data which you search based on the page slug.

RewriteEngine on
RewriteRule ^([a-zA-Z0-9-/]+)$ index.php?slug=$1 [QSA]

How to implement

The best way to use the script below is to copy the code and put it in a folder called ‘database_backups’ as shown below. Then whenever you call the backup.php file it will create a database backup which is stored on your server. I’d recommend downloading these database backups periodically so you have a copy stored safely elsewhere incase you lose your hosting.

Using CRON

Cron is a time-based job scheduler which allows you to run certain scripts at specific times. For example I have my database backups running every night at a time when traffic levels are low. You could setup a CRON job if your web host permits by running the following command. Just change the link to point to the backup file in your server.

wget -O /dev/null http://your-site.com/database_backup/backup.php

The Code

<?php
backup_database_tables('HOST','USERNAME','PASSWORD','DATABASE', '*');

// backup the db function
function backup_database_tables($host,$user,$pass,$name,$tables)
{

	$link = mysql_connect($host,$user,$pass);
	mysql_select_db($name,$link);

	//get all of the tables
	if($tables == '*')
	{
		$tables = array();
		$result = mysql_query('SHOW TABLES');
		while($row = mysql_fetch_row($result))
		{
			$tables[] = $row[0];
		}
	}
	else
	{
		$tables = is_array($tables) ? $tables : explode(',',$tables);
	}

	//cycle through each table and format the data
	foreach($tables as $table)
	{
		$result = mysql_query('SELECT * FROM '.$table);
		$num_fields = mysql_num_fields($result);

		$return.= 'DROP TABLE '.$table.';';
		$row2 = mysql_fetch_row(mysql_query('SHOW CREATE TABLE '.$table));
		$return.= "\n\n".$row2[1].";\n\n";

		for ($i = 0; $i < $num_fields; $i++)
		{
			while($row = mysql_fetch_row($result))
			{
				$return.= 'INSERT INTO '.$table.' VALUES(';
				for($j=0; $j<$num_fields; $j++)
				{
					$row[$j] = addslashes($row[$j]);
					$row[$j] = ereg_replace("\n","\\n",$row[$j]);
					if (isset($row[$j])) { $return.= '"'.$row[$j].'"' ; } else { $return.= '""'; }
					if ($j<($num_fields-1)) { $return.= ','; }
				}
				$return.= ");\n";
			}
		}
		$return.="\n\n\n";
	}

	//save the file
	$handle = fopen('db-backup-'.time().'-'.(md5(implode(',',$tables))).'.sql','w+');
	fwrite($handle,$return);
	fclose($handle);
}
?>

The Code

Most of the code is CSS for this one so lets start here

body{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}

The JavaScript

Using jQuery UI is pretty painless. It’s very easy to setup you simply add a holder div for your slider, in this case we’re specifying the div with the class ‘.slider’ we then call the slider() method passing the in some values.

 $( ".slider" ).slider({
	        animate: true,
                range: "min",
                value: 50,
                min: 10,
                max: 100,
				step: 10,

				//this gets a live reading of the value and prints it on the page
                slide: function( event, ui ) {
                    $( "#slider-result" ).html( ui.value );
                },

				//this updates the hidden form field so we can submit the data using a form
                change: function(event, ui) {
                $('#hidden').attr('value', ui.value);
                }

				});

The HTML

Pretty simple snippet of HTML…

       <div class="slider"></div>
        <div id="slider-result">50</div>
  	<input type="hidden" id="hidden"/>

The Code

This code snippet is pretty easy to grasp. We’re simple replacing the background image of the div #avatar each time the user clicks out of the email input field. you’ll notice that we’re also calling the function MD5(). This is because Gravatar uses your email address encoded into an MD5 hash as an id to pull your avatar. You also need to include the function MD5() which is available in the Download.

$(document).ready(function(){

var email = $("#email"),
avatar = $("#avatar");

email.blur(function() {
avatar.css("background-image","url(http://www.gravatar.com/avatar/" + MD5(email.val()) + ")");

});

});

The HTML

<div id="avatar"><img src="thumb.png" width="80" height="80"/></div>

<form class="gravatar">
<input type="text" onFocus="if(this.value=='Email Address') this.value='';" onBlur="if(this.value=='') this.value='Email Address';" value="Email Address" name="s" id="email" />
</form>

The Code

The first line of code included below is the Google API library for geo location. This code is compatible across the following browsers: Opera, FireFox, Chrome, and Safari. It will also work on Safari Mobile.

Using the Google Map Canvas our web browser sends our location through to the API which then plots it on the map. I’ve found it to be a bit in accurate at times but it works 80% of the time. You’ll also have to click ‘allow’ in Google Chrome to allow your location to be shared.

<section id="wrapper">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <article>
      <p><span id="status">Please wait whilst we try to locate you...</span></p>
    </article>
<script>
function success(position) {
  var s = document.querySelector('#status');

  if (s.className == 'success') {
    return;
  }

  s.innerHTML = "found you!";
  s.className = 'success';

  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '560px';

  document.querySelector('article').appendChild(mapcanvas);

  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"You are here!"
  });
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';

  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script>
</section>

1. Call to action

Users will click on a call to action buttons because they expect to see information that a button says the next page would provide. If your users don’t quickly recognise the content on the corresponding landing page, they will leave. Therefore, make sure that whatever message your CTA button promotes is the focus of the landing page.

2. Make forms easy to use

Providing the least amount of hoops to jump through for a user means your conversions will be higher. Users hate forms and complicated user flows. if you’re landing page is designed to push users to signup to your site make the process easy with the least amount of required fields, and keep the form above the page fold to maxamise its exposure.

3. Clear Messaging

You have one shot at convincing a user to buy your product or service. If you’re offering something free then make it clear what the benefits of signing up are. Make sure that your marketing campaign has continuity when it comes to design and messaging. As a user you don’t want to click a banner and be greeted by a page that bears no relevance to the message you’ve just seen

4. Give a little extra

Everyone loves a free lunch. Add value to your product by giving a little more away. Even the opportunity to win a t-shirt is enough to get users interested in your product.

5. Engage your audience

The use of online video viewership, by both businesses and consumers, is at an all time high. The average person watches 180 videos online each month. These are statistics just can’t be ignored. Video is a great medium to engage your audience and simple informative content can work wonders to drive conversions.

Check out the Mailchimp landing page to promote their free product as well as their social tools

The JavaScript

firstly we assign a class of ‘form-field’ as well as adding the attribute ‘defaultVal’ with the text that we want to display in our input field.

The code below simply adjusts the input value attribute depending on if the user click in the field and types text so we have a state of change for ‘focus’ and ‘blur’.

$(document).ready(function(){

  $('.form-field').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'#ccc'});
      });

  $('.form-field').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'#000'});
    }
    });
  $('.form-field').blur(function(){
    if ($(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'#ccc'});
    }
    });

});

The HTML

 <form method="post" action="">

	    <input type="text" class="form-field" name="Name" defaultVal="Name" value="" />
            <input type="text" class="form-field" name="Phone" defaultVal="Phone Number" value="" />
            <input type="text" class="form-field" name="Email" defaultVal="Email address" value="" />
            <input type="text" class="form-field" name="Url" defaultVal="Site URL" value="" />

	</form>