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>

Application use

Open Search could be used to mash data using the MySpace API with other applications, for example automatically pulling in a users MySpace profile image, name, location and URL. Building a Facebook application that recommends bands to you on MySpace.

The Code

Just like the Twitter search API tutorial that I did a last year we’re using the CURL function in PHP5 to allow us to parse the XML file and format the data that we get back.

Here’s how it works

Any search that we make will send GET variables through the page URL therefore making it easy to see the data that we’re sending to the API generally you will see search pages use this method as we’re not transmitting private data such as usernames or passwords.

The search data is stored in the variable $q if nothing is searched for initially we run a default search mainly for demo purposes with the search term ‘Coldplay’. You’ll notice that the first result on the left is highlighted green, this is because it is the official profile for the Coldplay. you can see that we construct the URL and store it in the variable $search. There are many different variables that can be passed to the API. It’s worth pointing out that we’re using the People search call. You can see all the values that can be passed in here

Here is an example XML request: http://api.myspace.com/opensearch/people?searchTerms=ferrari&format=xml

//Search API Script

$q=$_GET['q'];

if($_GET['q']==''){

$q = 'coldplay';

}

if($_GET['pics']==1){

$pics[0] = '&hasPhoto=on';
$pics[1] = 'checked';

}

if(!empty($_GET['location'])){

$pics[0] = '&location='.urlencode($_GET['location']).'';

}

$search = "http://api.myspace.com/opensearch/people?searchTerms=".urlencode($q)."&format=xml".$pics[0]."";

$cu = curl_init();

curl_setopt($cu, CURLOPT_URL, $search);
curl_setopt($cu, CURLOPT_RETURNTRANSFER, TRUE);
$result = curl_exec($cu);
$search_res = new SimpleXMLElement($result);

echo "<h3>".$search_res->totalResults." MySpace results for '".$q."'</h3>";

// Echo the Search Data

foreach ($search_res->entry as $user) {

$officialprofile = null;

if($user->isOfficial==1){

$officialprofile = 'official';

}

echo "<div class='user ".$officialprofile."'><a href=\"".$user->profileUrl."\" target=\"_blank\"><img border=\"0\" width=\"68\" class=\"user_image\" src=\"".$user->thumbnailUrl."\" title=\"".$user->displayName."\" /></a>";
echo "<div class='text'>".$user->displayName."</div> <strong>".$user->location."</strong><br/><a href='".$user->profileUrl."' >Visit ".$officialprofile." profile</a><div class='clear'></div></div>";

}

curl_close($cu);

<div id="search">
<form action="" method="get">
  Search MySpace <input type="text" name="q" value="<?php echo $q;?>" id="searchbox" />
 Location <input type="text" name="location" value="<?php echo $_GET['location'];?>" id="location" />
  Only show users with profile pics <input name="pics" type="checkbox" value="1" <?php echo $pics[1];?> />
  <input type="submit" name="submit" id="submit" value="Search" />

</form>
</div>