Since the update of WordPress from version 2.9 to WordPress 3.0 one of the main noticeable improvements (to make it into more of a CMS system) is the ability to add a new custom post type into your WordPress system.

If you want to have an option to be able to make a “Testimonial” post type, this will require different inputs to what a “Quote” or normal blog entry will require. WordPress has a great documentation on everything that a custom post can contain.

Getting started

To get started with our custom posts we want to use register_post_type(). The register post type will allow us to use tons of different options to be able to set up our custom post type. For our Testimonials post type, we want to have:

1. Company name
2. City
3. Province
4. Description
5. Image
6. Title

To start off with we want to add the following to functions.php in your active theme:

add_action( 'init', 'testimonials_posts'); // tell WordPress to look for our function
function testimonials_posts() {
    $args = array(
            // Post information will go here
        );
    register_post_type( 'testimonials' , $args );
}

Labels

Labels let us differentiate the type of entry from normal posts. Instead of when you add a new item it saying “New post” we can make it say “New testimonial” . The labels really let us customize the post type and make it a lot easier for the end user to be able to know what they are doing.

The labels are added into an array inside the register_post_type() function. After adding labels to make our post more user friendly this is the code we have inside our args variable:

$args = array(
		'labels' => array(
			'name' => __( 'Testimonials' ), // option to show in menu
			'singular_name' => __( 'Testimonial' ),
			'add_new_item' => __( 'Add New Testimonial' ),
			'edit_item' => __( 'Edit Testimonial' ),
			'new_item' => __( 'New Testimonial' ),
			'view' => __( 'View Testimonial' ),
			'view_item' => __( 'View Testimonial' ),
			'search_items' => __( 'Search Testimonial' ),
			'not_found' => __( 'No Testimonials found' ),
			'not_found_in_trash' => __( 'No Testimonials found in Trash' ),
			'parent' => __( 'Parent Testimonial' ),
		), // end of label array
			'public' => true,
			'rewrite' => array('slug'=> 'company'),
			'capability_type' => 'post',
			'hierarchical' => true,
			'menu_icon' => 'http://example.com/images/testimonials_thumb.png',
			'supports' => array('title', 'editor', 'thumbnail')
);

Public

Public has been added to this post type to make is publicly visible and also allow it to be placed on the WordPress admin menu, show in search engines and be visible to users on the front.

Rewrite

Rewrite allows us to be able to change the url format, having it set up like show above will format these post types as http://brenelz.com/blog/company/. To fully set this up you will need to change the Permalink Structure to something such as %postname%.

Capability Type

This is for the post type to be use for checking read, edit, and delete capabilities.

Hierarchical

Setting this to true will allow you to be able to specify a Parent.

Menu icon

You can also change the menu icon of the post to make it more custom. This is simple to do and will make it even more clear to the user. I found that a picture of about 15px X 15px was best for this area.

Supports

Supports gives up access to allow some of the default areas such as the title, blog area and thumbnail. We want to have all of these in our custom post type so will add support for each of them.

Custom Fields

To add our custom fields we want to tell WordPress to load them in the admin panel. Then we need to tell wordpress how to save the custom inputs. To do this we need to add the following:

  	add_action("admin_init", "admin_init");
    function admin_init(){
        add_meta_box("testimonial_data", "Company Details", "meta_options", "testimonials", "side", "low");
    }

    function meta_options(){
		global $post;
		$custom_fields = get_post_custom($post->ID);
		$company_name = $custom_fields["company_name"][0];
		$city = $custom_fields["city"][0];
		$province = $custom_fields["province"][0];
?>
	<label for="company_name">Company Name:</label><input id="company_name" name="company_name" value="<?php echo $company_name; ?>" /><br />
	<label for="city">City:</label><input id="city" name="city" value="<?php echo $city; ?>" /><br />
	<label for="province">Province:</label><input id="province" name="province" value="<?php echo $province; ?>" />
<?php
	}

After setting this we now have our custom inputs in our “Company details” area when we go write a new testimonial.

Next we need to set up a way to save what was typed, the custom post fields are very similar to custom fields (which you can read more about here) and we need to set up an option to save them so we can pull them out in the post later. This is done with the following:

add_action('save_post', 'save_company_info');
function save_company_info(){
	global $post;
	update_post_meta($post->ID, "company_name", $_POST["company_name"]);
	update_post_meta($post->ID, "city", $_POST["city"]);
	update_post_meta($post->ID, "province", $_POST["province"]);
}

Here we get/make the global variable $post and update the custom field metadata with each fields input’s value.

This should now be all set up for editing/making a new custom post type. Here is all the final code needed.

add_action('init', 'testimonials_posts');

function testimonials_posts() {
    $args = array(
		'labels' => array(
			'name' => __( 'Testimonials' ), // option to show in menu
			'singular_name' => __( 'Testimonial' ),
			'add_new_item' => __( 'Add New Testimonial' ),
			'edit_item' => __( 'Edit Testimonial' ),
			'new_item' => __( 'New Testimonial' ),
			'view' => __( 'View Testimonial' ),
			'view_item' => __( 'View Testimonial' ),
			'search_items' => __( 'Search Testimonial' ),
			'not_found' => __( 'No Testimonials found' ),
			'not_found_in_trash' => __( 'No Testimonials found in Trash' ),
			'parent' => __( 'Parent Testimonial' ),
		), // end of label array
			'public' => true,
			'menu_icon' => 'http://example.com/images/testimonials_thumb.png',
			'rewrite' => array('slug'=> 'company'),
			'capability_type' => 'post',
        	'hierarchical' => true,
        	'supports' => array('title', 'editor', 'thumbnail')
	);
    register_post_type( 'testimonials' , $args );
}

  	add_action("admin_init", "admin_init");
    function admin_init(){
        add_meta_box("testimonial_data", "Company Details", "meta_options", "testimonials", "side", "low");
    }

    function meta_options(){
		global $post;
		$custom_fields = get_post_custom($post->ID);
		$company_name = $custom_fields["company_name"][0];
		$city = $custom_fields["city"][0];
		$province = $custom_fields["province"][0];
?>
	<label for="company_name">Company Name:</label><input id="company_name" name="company_name" value="<?php echo $company_name; ?>" /><br />
	<label for="city">City:</label><input id="city" name="city" value="<?php echo $city; ?>" /><br />
	<label for="province">Province:</label><input id="province" name="province" value="<?php echo $province; ?>" />
<?php
	}
  add_action('save_post', 'save_company_info');
function save_company_info(){
	global $post;
	update_post_meta($post->ID, "company_name", $_POST["company_name"]);
	update_post_meta($post->ID, "city", $_POST["city"]);
	update_post_meta($post->ID, "province", $_POST["province"]);
}

Displaying the custom post

To display our custom posts in their theme we need to set up a style for them. To do this, WordPress searches for a file named single-custom_post_type_name.php. So we will need to make a file named single-testimonials.php. I have copied the code from the Twenty Ten theme and modified it to work with our custom post inputs. This is what I had at the end.

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
	$custom_fields = get_post_custom($post->ID);
	$company_name = $custom_fields["company_name"][0];
	$city = $custom_fields["city"][0];
	$province = $custom_fields["province"][0];
get_header(); ?>
		<div id="container">
			<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<div id="nav-above" class="navigation">
					<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous testimonial link', 'twentyten' ) . '</span> %title' ); ?></div>
					<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next testimonial link', 'twentyten' ) . '</span>' ); ?></div>
				</div><!-- #nav-above -->

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<h1 class="entry-title"><?php the_title(); ?></h1><br /><br />
					<b>Company Name:</b><?php echo $company_name; ?>  <br />
					<b>Company City:</b><?php echo $city; ?> <br />
					<b>Company Province:</b><?php echo $province; ?>
				    <div class="entry-content">
				        <?php the_post_thumbnail(); ?>
				        <br /><b>Details:</b><?php the_content(); ?>
				        <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
				    </div>
<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Which produces a nice template for our theme.

Conclusion

I personally like the new custom posts and think that they can become very useful for building sites for people that won’t be able to know how to use the standard custom post fields, or know that “Posts” are what they need to click on. To get more help with the code and what to do WordPress also has a great codex on registering the post type and general information/help about the Custom Post types.

Related posts:

1. Using WordPress Custom Fields
2. Quick Tip: WordPress Random Posts
3. WordPress 2.7 is out!

You’ve undoubtedly heard of HTML5 multiple times in the past. It was started in June 2004 and is currently in the ‘Working Draft’ state. Ian Hickson (a Google Inc. employee) is the editor of HTML5, and he estimates that HTML5 will become a Candidate Recommendation in 2012, and a W3C Recommendation in 2022. Seems like I’ll be old and gray by the time it’s the norm!

The great thing is that despite the fact that HTML5 will not be a W3C Recommendation until 2022, you can use many of the elements of it today! The website caniuse.com reports that this percentage of features in HTML5 are currently supported:

• Internet Explorer 8.0: 25%
• Firefox 3.6: 76%
• Safari 5.0: 86%
• Google Chrome 5.0: 85%
• Opera 10.6: 77%

I’ll be using Safari 5.0 as it currently has the highest percentage and seems to run the best in my current setup. Let’s dive right in, shall we?

1. Geolocation

Geolocation is already being used all over the web today. Many websites will ask for your current location to display information like weather or local news. Some or all of your information including your IP address, RFID, MAC addresses, GSM/CDMA information will be used to determine your information. It can only be used if the user gives permission.

Try it here.

2. Video

One of the main reasons why Apple is not supporting Flash on any iOS devices is because they believe so strongly in the HTML5 Video element. It couldn’t get any simpler than this markup:

<video src='movie.mp4' autoplay controls></video>

Provided the feature is fully supported, video plays smoothly, fullscreen works great, and it doesn’t eat up your CPU cycles like some HD flash players can.

Try it here.

3. Canvas

Creating simple graphics for the web in Photoshop then saving and inserting them in the correct place in your web page can be a complete time waster, especially if you get it wrong and have to go through the whole process again. That’s where the Canvas element comes in.

Take the simple ‘loading’ image. Instead of searching high and low for the perfect looking image, you can create exactly what you want with a canvas element. Here’s an example: link.

4. @font-face

@font-face is really more of a CSS feature, but it ties in directly with HTML5. Inserting custom fonts into web pages is always a pain. My tool of choice is Cufón, for its sole use of JavaScript. There are others that get more complicated like sIFR using Flash all to get a font on a web page. No more! Custom Web Fonts are now as easy as uploading the .ttf or .otf file to your server, linking it into your CSS file and creating a font-family, and displaying your text! Typography lovers unite!

@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}

header {
font-family: 'LeagueGothic';
}

Try it here.

All of the demo links included in this post are courtesy of Google, Inc. Check out the rest of html5rocks.com for some great resources!

These four features are just a taste of what HTML5 really can do. I look forward to what the world’s web developers will be making in the years to come!

Related posts:

1. HTML5 Overview
2. Google Launches a New Font API
3. Reading XML Using Flash

At Yogile they have developed a new photo sharing service that makes it incredibly easy to share images privately and within groups.

While established photo sharing sites already exist, Yogile is different because it lets multiple people contribute with ease. Once you create an album, you get a customizable URL and e-mail address to share with anyone who wants to add photos, either as e-mail attachments or uploads through the site. There’s no need for these users to register, keeping the process simple and hassle-free.

Take a wedding, for example. Dozens of attendees take their own photos, all from different cameras and angles. While you might try asking everyone for their shots afterward, Yogile offers a smart alternative. Visit http://www.yogile.com to try it out!

What Do You Think of Yogile?

No related posts.

Jeffrey Way from Nettuts has another quick tip that is definitely worth me posting. Please follow him @nettuts, and myself @brenelz.

Here is his quick intro to this tip:

Did you know that we can achieve multiple borders with simple CSS, by using the :after amd :before psuedo-classes? This is something I recently learned myself! I’ll show you how to add more depth to your designs, without images, in just a few minutes.
- Nettuts.com

Related posts:

1. CSS Rounded Corners
2. Change Text Selection Color using CSS
3. Creating Semantic CSS Navigation

“Video Edit” for iPhone 3GS lets you trim, organize and stitch together camera roll videos to create fun and share-worthy video compilations. Video Edit is lightning fast, easy-to-use, and lets you quickly edit your video compilation to be shared with your entire network.

This app is great for bloggers, parents, vacationers, sports enthusiasts, basically anyone who loves sharing media with their network. Designed specifically for speed and ease of use, the developers have removed extraneous features to emphasize the art of storytelling and enable the fastest possible rendering speed.

Details

App Name: Video Edit
Release Date: June 1st, 2010
Company Name: DHI Inc.
Category: Photography
Cost: $4.99
Release Details: In Review as this time, but hopefully soon!

Visit the Video Edit App website for more details on the iPhone app.

Screenshots

Are you giving away free copies?

Yes, there are some free copies of the app available but they are limited. Leave a comment below, and you never know!

Win a 64GB iPad!

To top it all off the great folks that created the app are running a contest! Here is what you have to do:

1. Subscribe to my RSS Feed
2. Follow @videoeditapp, and @brenelz
3. Check back regularly for more directions on entering! Should be within a couple weeks…

Is this an app you would consider buying?

Leave your comments below.

No related posts.

Jeffery Way has released another neat Quick Tip which shows us the just another powerful property of CSS3. We have so much to look forward to!

Can you think of any CSS3 properties that don’t get utilized enough? Share them in the comments.

Related posts:

1. Client-Side Javascript
2. AJAX / JSON Guide
3. Default and configuration objects with JavaScript

Today Google is celebrating the popular PacMan game's birthday is a real cool way. They have embedded their Google Logo in a playable PacMan game.

Maybe I shouldn't have posted this, because now your productivity for the day is ruined.

Copyright Google.

Visit Google’s Homepage

What do you think… cool or annoying?

Related posts:

1. Google Makes Changes: A Lot Like Bing?
2. Google Launches a New Font API
3. Can you Google Map?

Google has announced a Font API which is sure to change the way we embed fonts on our websites.

Remember the pains of using sIFR, or FLIR in your website. Going into Flash and changing your font was a real hassle. Along came CSS3 to make it easier using the @font-face rule. Now this is even simpler.

Take a look at Jeffery Way’s screencast from Nettuts and see for yourself.

Related posts:

1. Screencast Ideas
2. Validate your Forms with Ease using jQuery
3. Google Feedburner has Rough Start…

I am going to show how to build a simple way to add a “star” rating at the bottom of a post using WordPress’ Custom Fields. The custom fields are a great way of adding extra bits of information such as paragraphs, images or content which you want to be displayed differently.

Creating a custom field

When adding a new post we want to scroll down to the area called “Custom Fields” and then add a new one. Its good to give this field a useful name as once you have added the custom field you can select it from the drop down box. Next in the value field add what your rating will be. So a value of  “3/5″ is what I used.

Displaying the Custom Field

WordPress has a useful documentation showing how to get started with the custom fields. For this custom field we want to add the following code inside the post loop.

<?php if( get_post_meta(get_the_ID(), 'rating') ){
		$rating = get_post_meta(get_the_ID(), 'rating');
		$rating = explode("/", $rating[0]);
		$good = round($rating[0]);
		$total  = round($rating[1]);

		echo "<h2>This was rated:</h2><p class='rating'>";
		if(!empty($good) && !empty($total) && ($good <= $total) && is_numeric($good) && is_numeric($total) ){
			$i=0;
			while($i < $good){
				echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_on.png'  border='0' />";
					$i++;
			}

			$i = 0;
			while($i < ($total - $good)){
				echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_off.png'  border='0' />";
					$i++;
			}
		}else{
			echo "Invalid input for the rating.";
		}

		echo "</p>";
	};
?>

To get the meta data we need to use get_post_meta(); which uses 2 (optional 3rd) values. The first is the post ID, next the key/name of the field and the last optional value is either “true” or “false” to say if you want the information returned as a string.
That script will use the post ID to check if there is any information “rating” that has been set. Next, if it has we assign it to a variable and explode it at the “/”, this means we have the two numbers for the light star and the dark star. After splitting up the rating we run a few checks to make sure that it is valid before we loop through them.

Next we run the two loops that will produce the stars by using the split data and a while loop. And then its done!

As you can see, its very easy to add extra bits of data to your post. This is just one example of how to use the custom fields.

Related posts:

1. WordPress 3.0 Custom Posts
2. Quick Tip: WordPress Random Posts
3. WordPress: More than just a blogging platform?

Today Google launched some cool changes which has some people thinking it looks a lot like Bing.

New Logo

Google has changed its logo. It has a lot less bevel and shadows which I think makes it much more clear and crisp.

Google tunes up search results, touches up logo

Left Hand Search Bar

This is the feature that seems to be ripping off Bing. The funny part is that Microsoft has said that most people ignore this feature. Here is a quick look at the sidebar:

Video of the New Google Features

Related posts:

1. Play PacMan on Google’s Homepage!
2. Google's New Canonical Option
3. Google PageRank Updated Dec. 30

Social Media often gets a bad rap for being a place where people push their own agendas above all else. Today I am going to point out one individual who is using Twitter for the right reasons. She is raising money for the St. Jude Children’s Research Hospital.

Want to know what the most amazing thing is? Bailey Browning (@LittleChuckFan) is only 9 years old and has raised OVER $3,500 for her cause!!

I would suggest you all follow her (@LittleChuckFan), and give to her amazing cause.

Help the children of St. Jude Today!

One you have donated, please leave a comment below as I am hoping to give something away.

Related posts:

1. Can social networking raise $1k for cancer in 6 hours?

The amount of users on Twitter has increased dramatically recently! It is now a great way to get your product noticed, talked about (and if your very popular) trending. People like MacHeist often do a Tweetblast to spread the word about  something new and by participating you get something in return. In the tutorial you will see how to build an AJAX-ed twitter tweetblast that will search twitter for a hash tag, and if it has been found it will then show a thanks slide. There are many things you can adapt this script to do, such as putting the users username in the database to make sure a user can only Tweet once, finding that users pictures and show all the users that have tweeted so far or just sending an email to say thanks.
For this we just need an index page, some nice CSS, JavaScript for the AJAX, and PHP to search through Twitter using Twitters’ search API.

Live Demo
Download

Index page

The index page will have 3 slides, they will be

1. Entering the data/errors slide
2. Searching slide
3. Thanks slide

and we will animate them in and out depending on the information that we get from out PHP script. Here is the layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Tweet Blast!</title>

		<!-- Start of CSS -->
 	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
		<!-- Start of JS -->
 	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
</head>

<div id="wrap">
	<div id="header">
		<p>You should follow:
			<a class="brenelz" href="http://twitter.com/brenelz">@brenelz</a> and
			<a class="alex" href="http://twitter.com/alexanderbor">@AlexanderBor</a>
		</p>
	</div>

		<div id="blaster">
			<div id="slide1" class="slide">

										<!-- What we want the user to tweet
											We are going to search for the #tag but
											# needs to be %23 when we direct them to Twitter with
											this status

										 -->
				<a class="tweetText" href="http://twitter.com/?status=Testing the Tweetblast %23findthis" target="_blank">
					Testing the Tweetblast #findthis!
				</a>
				<div class="form">
					<!-- The username of our twitter-er -->
					<label for="username" class="label">Username: @</label>
					<input type="text" size="20" class="input" id="username" name="username" /><br />

					<!-- A span this is defult to be hidden but will be show if this field has an error -->

					<p class="errorU error">Please enter a username</p><br />

					<label for="email" class="label">Email Address:</label>
					<input type="text" size="20" class="input" id="email" name="email" /><br /><p class="errorE error">Please enter a valid email</p>
					<button type="submit" class="next" name="next" value="Next"></button>

				<!--
					Twitter will not add people who's profiles are
					private so if everything is OK and we didn't find
					the tweet that is probebly why.
				-->
					<p class="errorP error">Your account must not be private, if its not try again.</p>
				</div>
			</div>

			<!-- Our processing side -->
			<div id="slide2" class="slide">
				<p class="tweetText searching">
					Searching Twitter for your Tweet!
				</p>
				<img src="images/loading.gif" class="loading" alt="Loading..." width="32px" height="32px" />
			</div>

			<!-- Our thanks for Tweeting side -->
			<div id="slide3" class="slide">
				<p class="tweetText done">
					We found your tweet! Thanks for tweeting!
				</p>
			</div>

		</div>
</div>
</body>
</html

Anything that is special has been commented in the code.

CSS

In the CSS we want to make sure that the slides our horizontal, and that they will be hidden if they are not meant to be shown.

@charset "UTF-8";
/* CSS Document */
/* UTULITIES */
.clear{clear: both;}
.push{height: 30px;}
/* END */
/* ORDER PAGE CORRECTLY */
*{margin: 0; padding: 0;}
html{overflow-y: scroll;position: relative;}
body{font-family: Helvetica, Verdana, Arial, sans-serif; width: 100%; height: 100%; background: #3EA9DF;}
/* END */

#wrap{width: 720px; margin: 0 auto;} /*  Center everything  */
#header{background: url(../images/blast.jpg) left top no-repeat; height: 131px;position: relative;}
#header p{position: absolute; bottom: 0px; padding-left: 190px;color: #3D3D3D;}
#header p a{color: #626262;padding: 5px;text-decoration: none;}
#header p a:hover{color: #7B7D7D;text-decoration: none;}

#blaster{
	overflow: hidden; /*  So we can hide the slide we don't want  */
	width: 720px; /*  Need to set a width of what area can be shown  */

	padding-bottom: 30px;
	padding-top: 35px;
	position: relative;
	height: 220px;
	background: white;

	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px; /*  When a browser FINALY support it  */
}

.slide{width: 715px;
	overflow: hidden;
	display: inline-block; /*  We can set a width and they will be inline  */
	position: absolute;
	}/*  The size of each of our sides  */

.tweetText{
	background:none repeat scroll 0 0 #B9CBD5;
	display:block;
	font-family:helvetica;
	font-size:22px;
	margin:0 auto;
	padding:30px 0;
	text-align:center;
	text-decoration:none;
	width:680px;
	color: #626262;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
.tweetText:hover{
	background: #BCD5E4;
	color: #727374;
}
.form{
	margin-left:30px;
	margin-top:30px;
	font-size: 17px;
	color: #595D5F;
}

.label{display: inline-block; width: 130px;}
.input{color: #8D9499;border: none; background: none; border-bottom: 1px solid #BDD0DA;font-size: 17px;}
.input:hover, .input:focus{border-bottom: 1px solid #6D7980;color: #676C6F;}

.error{
	color:red;
	font-size:15px;
	padding-top:10px;
	display: none;/*  Make sure we have no errors showing  */
}
.errorP{text-align: center;padding-right: 30px;}

.next{
	background:url("../images/next.jpg") no-repeat scroll left top transparent;
	border:medium none;
	cursor:pointer;
	height:37px;
	margin-top:-60px;
	position:absolute;
	right:30px;
	width:121px;
}
.next:hover, .next:focus{background:url("../images/next_over.jpg") no-repeat scroll left top transparent;}

/*  SLIDE 2  */
.loading{padding-left:339px;
padding-top:50px;}
#slide2{left: 715px;}

/*  SLIDE 3  */

#slide3{left: 715px;}
.done{margin-top: 50px;}

JavaScript

With the JavaScript  lib jQuery we will post the values and move the first slide left while moving the next slides in. We want to check if there are any errors as if there are we want to move the first slide back in else, we move in the thanks slide.

$(function() {
	$(".next").click(function(){ /*  When next is clicked  */
		$("#slide1").animate({"left": "-715px"}, 500); /*  Slide away the first slide  */
		$("#slide2").animate({"left": "0"}, 500, function(){ /*  And slide in the new once, once that if finished run this function  */

		$.ajax({
			type: 'post',
			dataType: 'json',
			url: 'grab.php',
			data: 'username=' + $('#username').val() + '&email=' + $('#email').val(),
			success: function(e){ /*  On success  */
				if(e.error == 1){ // if there as an error
					$('.error').css({"display": "none"});// remove all error messages as we want to display messages for this current go

					if(e.username == 1){
						$('.errorU').css({"display": "block"});
					}

					if(e.email == 1){
						$('.errorE').css({"display": "block"});
					}
					if(e.private == 1){
						$('.errorP').css({"display": "block"});
					}

					/*

						We now slide back in the first slide with the error "p" elements
						Now visible.

					*/

					$("#slide2").animate({"left": "710px"}, 500);
					$("#slide1").animate({"left": "0px"}, 500);
				}else{
					/*

						There was no error so we remove slide 2
						and bring in the thanks!

					*/
	 				$("#slide2").animate({"left": "-710px"}, 500);
					$("#slide3").animate({"left": "0px"}, 500);
				}
			}
		});

		});
	});

});

Searching Twitter

Twitter’s search API is basically open to use with no limits. They do say not to use it excessively so if your going to use this on a HUGE scale you may want to contact them to ask of their permission. Because of this we can use CURL without authentication.

<?php

	$twitterUsername = $_POST['username'];
	$emailAdd = $_POST['email'];
	$tag = "findthis"; // The #tag that the use will find for

	function reply($type, $username, $email, $private){ // function to reply to the javascript
			/*

				This function shows if there was an error in
				1. overall
				2. username
				3. email
				4. didn't find it

			*/
			$replying = array("error"=>"{$type}", "username"=>"$username", "email"=>"$email", "private"=>"$private");
			echo(json_encode($replying)); // json encode the responce
	}

	// Defult everything to OK
	$error = false;
	$username = 0;
	$email = 0;
	$private = 0;

	if( strlen($twitterUsername) < 1 ){
		$username = 1;
		$error = true;
	}

	if( !preg_match('/^[a-z0-9]+([_\.-][a-z0-9]+)*@([a-z0-9]+([.-][a-z0-9]+)*)+\.[a-z]{2,}$/i', $emailAdd) ){
		$email = 1;
		$error = true;
	}

	if( $error == true ){
		reply(1, $username, $email, $private);
		die(); // stop running the script
	}

	/*

		If a user has JUST tweeted then it takes a few seconds for it to appear in
		Twitter's search. Because of this I have made it sleep for a few seconds to
		allow time for that to happen.
		It will also help a bit with mass attacks of people clicking over and over again.

	*/
	sleep(4);

	// search for the tweet				JSON format    The tag	   Who its from
	$search = "http://search.twitter.com/search.json?q=&tag={$tag}&from={$twitterUsername}";
	$curlhandle = curl_init();
	curl_setopt($curlhandle, CURLOPT_URL, $search);
    curl_setopt($curlhandle, CURLOPT_RETURNTRANSFER, 1);

	// execute the search
    $response = curl_exec($curlhandle);
    curl_close($curlhandle);

	// decode the responce
    $json = json_decode($response);
	// cound the amount of "results" that have been found
    $numb = count($json->results);

    if($numb != 0){ // if a result has been found reply with no error
    	reply(0, 0, 0, 0);

    	/*

    		If you are going to use this scrip put all your code
    		to happen when a user has successfully tweeted here

    	*/

    	die();

    }else{
    	reply(1, 0, 0, 1); // no result was found so the user is mostlikey private
    	die();
    }

That is all the code that is needed to build a basic tweetblast. It can be easily customised to accomplish what you would want it to do for your site.

Related posts:

1. Building a Simple PHP Mailing List
2. Snazzy CSS Double Border Effect
3. Build a PHP Twitter Widget

In this tutorial I will be showing you how to build a PHP mailing list web app. In this web app, users will be able to sign up. Once they do they will be added to the database and an unsubscribe hash will be generated. Admins will be able to send emails and add [unsubscribe] within the email in order to show a way for the subscribers to remove themselves. Javascript will also be added to the sign up process to make it nicer for the users.
Live Demo
Username: alex
Password: password
Download

Databases

We are going to need two databases for this system. One for the admins and one for the subscribers. Here is the SQL code needed for the tables.

CREATE TABLE IF NOT EXISTS `subscribers` (
  `id` int(30) NOT NULL auto_increment,
  `email` varchar(60) NOT NULL,
  `unsubscribeLink` varchar(35) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1  ;

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(30) NOT NULL auto_increment,
  `username` varchar(50) NOT NULL,
  `password` varchar(40) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1  ;

INSERT INTO `users` (`id`, `username`, `password`) VALUES
(1, 'alex', '5f4dcc3b5aa765d61d8327deb882cf99');

After running that code you will have two tables one for subscribers that has an ID, email address and a unsubscribe fields (with ID as the primary key and set to auto increment). The other table for the users has an ID, username and password field (again with the ID as the primary key and set to auto increment). After that we insert into the ‘users’ table the values “alex” for the username and an MD5 hash of the word password. You can change these to what ever you want just make sure that the password is MD5 hashed or you will not be able to login later.

Connecting to the database

Create a directory “functions” and within that two files “function.php” and “config.php”. We will add information to the config file connecting to the database. This is what you need:

<?php
	$dbhost = 'localhost'; // database host
	$dbuser = 'USERNAME'; // database username
	$dbpass = 'PASSWORD'; // database password
	$db		= 'DATABASE'; // the database
	$conn 	= mysql_connect($dbhost, $dbuser, $dbpass) or die("Could not connect to the database"); // creat a connection or die
	mysql_select_db($db) or die("I couldn't find the database"); // select the database or die
	define("BASE_URL", "http://url-to-file/mail_list/"); // the URL to the file
	define("REPLY_EMAIL", "noreply@yourdomain.com"); // the email address we want our mailing list to be from

If you load that page and don’t see anything you have successfully connected to your database. We now need to fill in the ‘functions.php’ file. Within ‘functions.php’ add

<?php
session_start();	// start session
require_once("config.php"); // require our config.php file

function reply($type, $message){ // function to reply to the javascript
		$replying = array("error"=>"{$type}", "message"=>"$message");
		echo(json_encode($replying)); // json encode the responce
}

function add_email_to_database($email){ // adding the email address to the datbase
	// 1. We need to make sure its not already in
	// 2. We need to make a unsubscribe hash
	// 3. We need to add the user

	$email = mysql_real_escape_string($email); // make sure it OK
	$sql = "SELECT * FROM `subscribers` WHERE email = '{$email}' LIMIT 1"; // select all subsribers that has the email and only return (if there is) one
	$qry = mysql_query($sql); // run the query
	if( mysql_num_rows($qry) != 0){ // if that user was found they are not new so return false
		return false;
	}else{ // user was not found
		$unsubLink = ""; // create empty varible
		$unsubLink .= rand(1111, 99999); // generate random number and add it to the empty varible
		$unsubLink .= rand(1111, 99999);
		$unsubLink .= $email; // attach the email address

		$unsubLink = md5($unsubLink); // md5 it
		$unsubLink .= rand(1111, 99999); // then attack a random number

		// insert the values
		$sql = "
				INSERT INTO `subscribers` (
					`id` ,
					`email` ,
					`unsubscribeLink`
				)
				VALUES (
					NULL , '$email', '$unsubLink'
				);
			";

		mysql_query($sql); // run the query
		return true; // return true as we added the user
	}
}

function loggedIn(){ // check if we are logged in
	if($_SESSION['loggedIn'] != 1){ // if we are not
		return false;
	}else{ // if we are
		return true;
	}
}
[/sourceode]</pre>
That is all we need for both of these files.
<h2>Sigh up page</h2>
This page will allow the users to sign up, it will added them to the database after some validation all happening with some AJAX. Create an index.php page and add:
[sourcecode language="php"]
<?php
 session_start(); // start the session
 $message = $_SESSION['message']; // check if we have a message to display
 $_SESSION['message'] = "";  // clear the message for next time
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Mailing List Web App</title>

 <!-- Start of CSS -->
 <link rel="stylesheet" type="text/css" href="css/reset.css" />
 <link rel="stylesheet" type="text/css" href="css/main.css" />
 <!-- Start of JS -->
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/scripts.js"></script>
</head>

<div id="wrap">
 <h1>Join my list!</h1>
 <!-- If we have a message, display it -->
 <?php if(strlen($message) > 0){ ?><h2 class="stat"><?php echo '<br />'. $message ?></h2><?php } ?>
 <br />
 <form action="./add.php" method="POST" id="subscribe">
 <label class="label" for="email">Email</label>
 <input type="text" value="you@you.com" size="20" id="email" name="email" />
 <input type="submit" id="submit" value="Sign Up!" />
 </form>
 <p class="message"></p>
 <br /><br />
 <a class="small" href="admin">(admin)</a>
</div>
</body>
</html

Now create a CSS directory and add a reset CSS file (you can find them online, though this is optional) and a file main.css. Then add this styling:

@charset "UTF-8";
/* CSS Document */
/* UTULITIES */
.clear{clear: both;}
.push{height: 30px;}
/* END */
/* ORDER PAGE CORRECTLY */
*{margin: 0; padding: 0;}
html{overflow-y: scroll;position: relative;}
body{background-color: #e1e1e1; font-family: "Lucida Grande", Verdana, Arial, sans-serif; width: 100%; height: 100%;}
/* END */
h1{
	font-size: 30px;
	font-weight: bold;
	margin-bottom:  20px;
	color: #D0D3D3;
	padding-bottom: 8px;
	border-bottom: 1px solid #B4B6B6;
}
#wrap{
	background-color: #888888;
	width: 500px;
	margin: 0 auto;
	padding: 20px;
}
form{text-align: center;}
.label{color: #C3C5C5;font-size: 20px;}
#email, #password, #username{margin-top: -2px;font-size: 18px;background: none;border: none;border-bottom: 1px dotted black;color: #DBDEDE;}

.message{color:white;padding-top:20px;text-align:center;}
#login{padding-top: 10px;}
#create{text-align: left;}
.input{
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
background:none repeat scroll 0 0 #E3E5E5;
border:1px solid #9A9C9C;
display: block;
font-size:16px;
padding:5px;
color: #3F4040;
}

.input:hover, .input:focus{background: #EAECEC;border: 1px solid #575858;}
.note{color:white;font-size:13px;}
.log{text-decoration: none; color: white;}
.small{text-decoration: none; color: white;font-size: 15px;}
.small:hover{color: black;}
.stat{text-align: center; color: white;}

Javascript

This javascript file will listen for a submit on the form then post the data to our adder php file using jQuery/AJAX.

$(function() {
function pulse(item){ // an animation to plus an item
	$(item).animate({"opacity": 0.5}, 200)
	.animate({"opacity": 1}, 200)
	.animate({"opacity": 0.5}, 200)
	.animate({"opacity": 1}, 200)
	.animate({"opacity": 0.5}, 200)
	.animate({"opacity": 1}, 200)
	.animate({"opacity": 0.5}, 200)
	.animate({"opacity": 1}, 200)
	.animate({"opacity": 0.5}, 200)
	.animate({"opacity": 1}, 200)
	.animate({"opacity": 0.5}, 200)
	.animate({"opacity": 1}, 500);
}

$('#submit').removeAttr('disabled'); // when we load the page make sure this button is OK
$('.message').css({"display": "none"});	// hide the message class

var emailsVal = $('#email').val(); // get the current value of #email

$("#email").focus(function(){	// when the input is clicked
	if($(this).val() == emailsVal){ // if the value is the defult value
		$(this).val(''); // clear the box
	}
});

$('#subscribe').submit(function(e){	// when clicked
	$('#submit').animate({'opacity': '0.4'}).attr({'disabled': 'disabled'}); // fade out/deactivet submit button
	e.preventDefault(); // prevent defult
	$.ajax({ //ajax
		type: 'post', // post the data
		dataType: 'json', // data type
		url: 'add.php', // url of the file to post to
		data: 'email=' + $('#email').val(), // data to post
		success: function(e){ // on success
			if(e.error == true){ // if we set an error
				pulse('#email'); // pule the email box
				$('.message').html(e.message).slideDown(); // display the message
				$('#submit').animate({'opacity': '1'}, function(){ // fade back in the submit box
					$(this).removeAttr('disabled'); // remove the disabled attr so its clickable
				});
			}else{ // if we set didn't set an error
				$('#subscribe').slideUp(); // slide up the subscribe box
				$('.message').html(e.message).slideDown(); // slide down the message
			}
		}
	});

		$(this).ajaxError(function(){
//			alert("THERE WAS AN AJAX ERROR, SORRY ABOUT THAT"); // optional, to say if there was a AJAX error
		});
		return false; // return false (stop form from posting)
}); // end of AJAX

});

Adding the user

Create a file “add.php” where the javascript will post to. Within we will need to validate and then add the user. Also return a JSON encoded response for the awaiting JS script. This is the needed code:

<?php
require_once("functions/functions.php"); // include the functions and the config file
$email = $_POST['email']; // get the email
if (!preg_match('/^[a-z0-9]+([_\.-][a-z0-9]+)*@([a-z0-9]+([.-][a-z0-9]+)*)+\.[a-z]{2,}$/i', $email)) { // make sure it valid
		$error = "Email not valid";	 // set a message
		reply(1, $error); // set an error
		die(); // die and stop running the script
}

if($email == "you@you.com"){ // if its you@you the user just clicked submit and although its valid it won't be a users email
	$error = "Thats not your email!";
	reply(1, $error);
	die();
}

if( add_email_to_database($email) ){ // if we added the user
	reply(0, "Thanks! You are now in the know."); // set no error
}else{
	reply(1, "That email is already in the know."); // else, the user was found alreay
};

Admin pages

That is all that we need to allow the user to subscribe! Now create a directory “admin” and add these files “index.php”, “login.php”, “logout.php” and “poster.php”. In the index file we will post to a login form. I am going to build the login/out script first as I know what I will be needing.

Login

Open the login.php file and add

<?php
	require_once("../functions/functions.php");
		// get/clean values
	$username = mysql_real_escape_string(trim($_POST['username']));
	$password = mysql_real_escape_string(trim($_POST['password']));
		// something was entered
	if(strlen($username) == 0 || strlen($password) == 0){ // if no username of password was entered
		$_SESSION['message'] = "Please enter a username and a password"; // set a message
		header("Location: ". BASE_URL ."/admin");   // direct to the admin page
		die(); // die/stop script
	}else{
		$password = md5($password); // hash the password
	}

	$sql = "
		SELECT * FROM users WHERE username = '{$username}' AND password = '{$password}' LIMIT 1;
		"; // search for users with that username/password
	$qr = mysql_query($sql); // run query
	if( mysql_num_rows($qr) == 1 ){  // if the user was found
		$user = mysql_fetch_assoc($qr); // get values
		$_SESSION['loggedIn'] = 1; // set logged in session
		$_SESSION['username'] = $user['username']; //  you may want their username

		$_SESSION['time'] =  $_SERVER['REQUEST_TIME']; // incase you want to time out a user
		$_SESSION['message'] = "You have been logged in"; // set message
		header("Location: ". BASE_URL ."/admin");   // redirect the user
		die();
	}else{
		$_SESSION['message'] = "Didn't find a username and password with that information.";
		header("Location: ". BASE_URL ."/admin");
		die();
	}

Logging Out

Now open logout.php and add this small bit of simple code to log the user out:

<?php
require_once('../functions/functions.php');
session_destroy(); // destroy all information
session_start(); // start a new session just for the message
$_SESSION['message'] = "You have been logged out"; // say we have been loggged out
header("Location: " .BASE_URL."/admin");  // relocate to the admin page

That is all we need to logout users.

Messeger

Open the index.php file where we will add code to check if we are logged in, if we are we will show a form to email people, if not, we will show a login form submitting the the login.php file we made above.

<?php
	require_once('../functions/functions.php');
	$loggedIn = loggedIn(); // run login function
// checking for message/sessions content

	if( isset($_SESSION['message']) ){ // if we have a message
		$message = $_SESSION['message']; // set a local varible
		$_SESSION['message'] = ""; // clear the session
	}

	if( isset($_SESSION['subject']) ){ // if we have a recovered subject
		$subject = $_SESSION['subject'];
	}else{
		$subject = "";
	}
	if( isset($_SESSION['messageArea']) ){ // if we have a recovered message
		$messageArea = $_SESSION['messageArea'];
	}else{
		$messageArea = "";
	}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Mailing List Web App || ADMIN</title>

		<!-- Start of CSS -->
 	<link rel="stylesheet" type="text/css" href="../css/reset.css" />
	<link rel="stylesheet" type="text/css" href="../css/main.css" />
</head>

<div id="wrap">
<?php if(!$loggedIn){ //user is not logged in ?>
	<h1>Please, login</h1>
	<?php if($message) echo "<h3 class='message'>".$message."</h3>"; ?>
	<form action="login.php" method="POST" id="login">
		<label class="lable" for="username">Username</label>
		<input type="text" value="alex" size="20" id="username" name="username" />
		<br /><br />
		<label class="lable" for="password">Password</label>
		<input type="password" value="" size="20" id="password" name="password" />
		<br /><br />
		<input type="submit" id="submit" value="Log me in!" />
	</form>
	<p class="message"></p>
<?php }else{ // user is logged in ?>
	<h1>Send A Message</h1>
	<?php if($message) echo "<h3 class='message'>".$message."</h3>"; // display any messages ?>

	<form action="poster.php" method="POST" id="create">
		<label for="subject" class="label">Subject</label><br /><br />
		<input class="input" name="subject" id="subject" type="text" value="<?php echo $subject; // echo the varible ?>" />
		<br />
		<label for="messageArea" class="label">Message</label><br /><br />
		<textarea class="input" name="messageArea" id="messageArea" rows="15" cols="46" wrap="wrap"><?php echo $messageArea; ?></textarea>
		<br />
		<input type="submit" value="Send message" /><br />
		<small class="note">Note: Add [unsubscribe] in the email to add an unsubscribe link.</small>
	</form>
	<br /><br />
	<a class="log" href="<?php echo BASE_URL ?>/admin/logout.php">Logout</a>
<?php } ?>
</div>
</body>
</html>

Sending emails

This will now create a nice way to login, and post emails. We just need the scrip to send all the emails. Open poster.php and we will make it.

<?php
require_once('../functions/functions.php');
if($_SESSION['loggedIn'] != 1){
		// if the user is not logged in, redirect them and add the message to
		// tell them they must be logged in
		// helps with unwanted people running your script by posting to it.
		$_SESSION['message'] = "You must be logged in.";
		header("Location: ". BASE_URL ."/admin");
		die();
}
$message = $_POST['messageArea'];
$subject = $_POST['subject'];
if(strlen($message) == 0 || strlen($subject) == 0){
	// if no information was added in either fields, save what was intered in a session and redirect them
	$_SESSION['subject'] = $subject;
	$_SESSION['messageArea'] =  $message;
	$_SESSION['message'] = "Please fill in both the subject and the message.";
	header("Location: " .BASE_URL."/admin");
	die();

}
// grab all the subscribers
$sql = "
	SELECT * FROM subscribers;
";

$qr = mysql_query($sql);
// if we don't have any
if(mysql_num_rows($qr) == 0){
	$_SESSION['message'] =  "You currently have no subscribers";
	header("Location: " .BASE_URL."/admin");
	die();
}

// go through all the subscribers
while( $user = mysql_fetch_array($qr)){
	// set a message
	$_SESSION['message'] =  "Your emails are being sent...";
	// redirect the user (no point in them waiting for all the messages to send...)
	header("Location: " .BASE_URL."/admin");
	$newMessage = ""; // set a clear varible
	// search for the [unsubscribe] tag and replace it with a URL for the user to unsubscribe
	$newMessage = str_replace(
		"[unsubscribe]",
		BASE_URL."/unsubscribe/".$user['unsubscribeLink']."&email=".$user['email'],
		$message
	);

	// replace all special characters
	$newMessage = htmlspecialchars($newMessage);
	// replace new lines with break tags
	$newMessage = str_replace( "\r\n",
								"<br />",
								$newMessage
							);
	// content type
	$headers  = 'MIME-Version: 1.0' . "\r\n";
	$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
	$headers .= "From: ".REPLY_EMAIL."\r\n"; // who the reply is to
	mail($user['email'], $subject, $newMessage, $headers); // send the email to the user
}

Unsubscribe

Only one small thing left to do… Build the unsubscribe page which is being sent in the email. For this we need a directory called “unsubscribe” and inside that two files. A .htaccess file to make the URL slightly cleaner and the index.php file.
Open the .htaccess and add

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?hash=$1 [L]

This will make the first variable the hash on the index page. Open the index page and this final bit of code:

<?php
require_once('../functions/functions.php');
$hash = mysql_real_escape_string($_GET['hash']); // get the hash, you don't really need to make sure its clean unless you want to add this to a diffrent database table etc.
$email = mysql_real_escape_string($_GET['email']); // get the email
if(strlen($hash) < 1 || strlen($email) < 1 ){ // make sure they are set
	$_SESSION['message'] = "The code is not valid - please contact support";
	header("Location:  ".BASE_URL );
	die();
}
// make sure email is avlid
if (!preg_match('/^[a-z0-9]+([_\.-][a-z0-9]+)*@([a-z0-9]+([.-][a-z0-9]+)*)+\.[a-z]{2,}$/i', $email)) {
	$_SESSION['message'] = "The code is not valid - please contact support";
	header("Location:  ".BASE_URL );
	die();
}

$sql = "
		SELECT * FROM subscribers WHERE email = '$email' AND unsubscribeLink = '$hash' LIMIT 1;
	"; // search for that user
	$qr = mysql_query($sql); // run
	$rows = mysql_num_rows($qr); // get the number or rows with that information

	if($rows == 1){ // if it was found delete it
		$sql = "DELETE FROM `subscribers` WHERE `email` = '$email' AND `unsubscribeLink` = '$hash' LIMIT 1";
		mysql_query($sql);
		$_SESSION['message'] = "You have been unsubscribed successfully";
		header("Location:  ".BASE_URL );
		die();
	}else{ // if not tell them to contact support for manual removal
		$_SESSION['message'] = "You where not found - please contact support";
		header("Location:  ".BASE_URL );
		die();
	}

That is now all complete and you should have a working mailing list app. Hope that you have found this interesting and learnt a few things.

Related posts:

1. Building a Tweetblast
2. How to Create a Simple API with PHP and MySQL
3. Create URL Shortener For Twitter Using PHP

Code sharing and hosting has become easier than ever before, now you can easily share your code with your friends and community. We will take a look at some of the popular sites.

Google Code Hosting

code.google.com Google code is the most popular hosting site which hosts the likes of jQuery and other popular libraries.

Github

Github Next in the line is Github, it provides fast and easy hosting which version support and as well as code monitoring.

Sourceforge

Sourceforge Not much of a code hosting site but you can create project and is the leading open source hosting site which well supports all type of languages.

Launchpad

Launchpad Launchpad is an online collaboration platform that provides services like bug tracking, version control , code reviews and much more.

Codeplex

Codeplex A popular hosting site hosted by microsoft so not much features you can expect.

Bitbucket

Bitbucket Develop code as a team. Keep all your development in one place, be it issue tracking, documentation or sharing code.

Assembla

Assembla Not a free code hosting and sharing site, though excellent features such at agile development tools makes it well worth it’s price.

JavaForge

JavaForge An excellent site for the java lovers( like me just joking supports all language and runs on Amazon cloud. It has all the features needed that makes a good hosting site.

Pastie

Pastie Awesome site, quickly paste your code and share it.

Kenai

Kenai Owned by Oracle Sun, excellent hosting features and integrated with netbeans.

Codefetch

Codefetch Not much of a code hosting site but you can search code snippets and examples from books, very handy.

Tigris

Tigris Tigris.org is a mid-sized open source community focused on building better tools for collaborative software development. Prominent projects include SVN (Subversion).

Fedorahosted

Fedorahosted Hosted by Fedora group, has a fairly large community.

Osor

Github The Open Source Observatory and Repository for European public administrations (OSOR) is a platform for exchanging information, experiences and FLOSS-based code for use in public administrations.

Joomlacode

Joomlacode Specifically created for joomla lovers, you can host code related to joomla here.

Bountysource

Bountysource Bounty Source was created with the goal of increasing and improving development in Open Source Software communities, providing features such as task tracker, SVN code repository and a CMS.

Berlios

Berlios Berlios is an open source software supporter and is quite famous.

Tuxfamily

Tuxfamily Simple hosting service, perfect for simple projects.

Drupal

Drupal As the name suggests code hosting for drupal developers and has a very active community.

Alioth

Alioth Aimed at the Debian development project, nice community for debian lovers.

Start sharing

Related posts:

1. Choosing an Open Source CMS: Beginner's Guide
2. MSSQL vs. MySQL
3. University of Winnipeg Konami Code

Today I will be showing you how to use cURL to get your Twitter status and cache it into a file on your server. This file will then be read with JavaScript and displayed on the web-page. Before we start you can view a demo and download the final files below:

Download
Live Demo

The widget will have the following file structure

API Limit

Twitter has an API limit (currently 150 calls per hour) so its best to use your username/password to make sure that you will get a successful response. If you don’t (as far as I know) Twitter will use the API calls that are for everyone with your IP/Servers IP. This means that if other people on your server are also using data from twitter (that requires an API call), it will start to give an error saying that you have used up your API limit very quickly.

Making the widget

Caching and HTML

<?php
function twitterCapture() {
        // Set your username and password here
        $user = 'twitter_username'; // Twitter Username
        $password = 'xxxxxxxx'; // Twitter Password

        $tw = curl_init("http://twitter.com/statuses/user_timeline/{$user}.json"); //grabs the JSON format of your timelines
        curl_setopt($tw,CURLOPT_TIMEOUT, 30); // Timeout (for when Twitter is down)
        curl_setopt($tw,CURLOPT_USERPWD,$user . ":" . $password); // Uses your username and password
        curl_setopt($tw,CURLOPT_RETURNTRANSFER,1); // returns
        $json = curl_exec ($tw); // Executes the cURL and puts it into the varible
        return $json; // returns what was grabbed
}
$cachefile = 'cache/twitterCache.json'; // the location to your cache file
$cachetime = 10 * 60; // set the cach time 10 * 60 (1 hour)
	// if the file exists		// if and the time it was created is less then cache time
if ( (file_exists($cachefile)) && ( time() - $cachetime < filemtime($cachefile) ) ) {
// script will not use the cached version
}else{ // the file didn't exist or is old
	ob_start(); // turn on the output buffering
	$fp = fopen($cachefile, 'w'); // opens for writing only or will creat it's not there
	fwrite($fp, twitterCapture()); // writes to the file what was grabbed from the previouse function
	fclose($fp); // closes
	ob_end_flush(); // finishes and flushes the output buffer
}
?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Little Twitter Widget</title>

		<!-- Start of CSS -->
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
		<!-- Start of JS -->
	<script type="text/javascript" src="js/jquery-1.4.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="twitter_widget_top" class="center" ></div><!-- The top of the widget -->
<div id="twitter_widget_body" class="center"> <!-- The body wrap -->

	<div id="twitter_widget_tweet"> <!-- The tweet area -->
		<div id="twitter_movement"> <!-- To position the icon reletive to -->
			<a id="twitter_icon" href="http://twitter.com/"></a> <!-- Twitter icon -->
			<div id="twitterWrap"> <!-- The blue area -->
				<div id="twitter">	<!-- The main twitter data -->
					<noscript>JavaScript must be on to view tweets</noscript> <!-- Incase no js -->
					<p class="tweet">Loading...</p> <!-- The Tweet -->
					<p class="created_at"></p> <!-- Date created -->
				</div>
			</div>
			<p class="clear"></p> <!-- Clear the floats -->
		</div>
		<a href="" class="previous tweetNav"></a><!-- Next button -->
		<p class="follow_me">Follow me - <a href="http://twitter.com/alexanderbor" class="screen_name"></a></p> <!-- Follow me link -->
		<a href="" class="next tweetNav"></a> <!-- Pre button -->
		<p class="clear"></p>
	</div>
</div>
<div id="twitter_widget_bottom" class="center"></div><!-- Bottom of widet -->
<p class="info">Join my <span class="followedNumber"></span> followers - <span class="user_name"></span></p>
</body>
</html>

This will check if the cache file exists and then how old it is. If its older than  how long we want to leave before getting a new copy then will run the function to grab the new copy of the your twitter stream in JSON format. This is then written to your server in the cache file.

The CSS

@charset "UTF-8";
/* CSS Document */
/* UTULITIES */
.clear{clear: both;}
.push{height: 30px;}
/* END */
/* ORDER PAGE CORRECTLY */
*{margin: 0; padding: 0;}
html{ position: relative;}
body{font-family: Helvetica, Verdana, Arial, sans-serif; width: 100%; height: 100%; background: #1E202A;color:#3494E5;}
.center{margin: 0 auto;}
a{text-decoration:none;color:#4AA1EF; overflow: hidden}
a:hover{color: #3D658E;}
/* END */
#twitter_widget_top{background: url(../images/top.jpg) top left no-repeat; width: 475px; height: 30px;margin-top:81px; } /*  Top of widget  */
#twitter_widget_body{background: url(../images/body.jpg) left repeat-y; width: 475px;} /*  BODY  */
#twitter_widget_bottom{background: url(../images/bottom.jpg) bottom left no-repeat; width: 475px; height: 21px; } /*  foot  */
#twitter_icon{background:url("../images/twitter_icon.jpg") no-repeat scroll center bottom transparent;height:50px;margin-left:30px;position:absolute;top:33%;width:50px;}
#twitter_icon:hover{ background-position: top center;} /*  Move icon on hover  */
#twitterWrap{    /*  Don't show overflow and set a width  */
 overflow: hidden;
 width: 350px;
 float: right;
 background: #1E202A;
 margin: 20px 20px 0;
 border: 1px solid #062333;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
#twitter_movement{position: relative;} /*  To align icon to  */
.tweet { /*  The Tweet  */
font-family:"Lucida Grande",Verdana,Arial,sans-serif;
font-size:15px;
line-height:18px;
padding:15px;
position:relative;
text-align:center;
}

.next{background:url("../images/arrows.jpg") no-repeat right top transparent;float:right;height:14px;margin-right:20px;margin-top:10px;width:21px;}
.next:hover{background-position: right center;} /* Next button  */
.previous{background:url("../images/arrows.jpg") no-repeat left bottom transparent;float:left;height:14px;margin-left: 103px;margin-top:10px;width:21px;}
.previous:hover{background-position: left center;}

.created_at {display:block;font-size:12px;font-style:italic;padding-right:20px;text-align:right;}
.follow_me{display:block;float:left;margin:10px;text-align:center;width:280px;}
.info{padding-top:5px;text-align:center;}

Javascript

To get the twitter status we will use the javascript library jQuery, as this makes it a lot easier. We will use the $.getJSON to grab our cached file.

$(function() {
$.getJSON('cache/twitterCache.json', function(data) { // get the file and put in var "data"

// 		Add information about the user
	$('.followedNumber').html( data[0].user.followers_count); // follow count
	$('.screen_name').html( data[0].user.screen_name); // screen name
	$('.statuses_count').html(data[0].user.statuses_count); // amount of tweets
	$('.user_name').html(data[0].user.name); // username

	// defult variables

	var totalAmount = "", 	// total amount of items
		moveOut = "",		// If we are moving in or out the animation
		moveIn = "",		// If we are moving in or out the animation
		current = 0,		// Set the current to 0
		$i = 0;				// Set i to 0 

$.each(data, function(){ // for each of the "data"
	totalAmount = $i; // set the varible total amount to i
	$i++; // plus one to i
});
	clicked(current);  // run the function to grab the first item

	$(".next").click(function(){ 			// when next is clicked
		if ($(this).hasClass('active') ){ 	// if it's active
			current = current + 1;			// set current to + 1
			moveOut = "+"; 					// make the move out animation correct
			moveIn = "-";	 				// same with move in
			clicked(current); 				// run the function and pass in current
		}; 									// no else, so nothing will happen if we click when not active

	});
	$(".previous").click(function(){ 		// almost the same as above
		if ($(this).hasClass('active') ){
			current = current - 1;			// minus one from the tcurrent
			moveOut = "-";
			moveIn  = "+";
			clicked(current);
		};
	});

//
//	Time function from the Twitter Blog JS file
//
function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}

	function clicked(current){ // when clicked function runs
		// get the width to be able to slide the tweet area
		var tweetAreaWidth = $('#twitterWrap').width();
		// fade out the time it was created
		$('.created_at').animate({"opacity": "0"}, 400); // fade out the date
		$('.tweet').animate({"right": moveOut +  tweetAreaWidth + "px"}, function(){ // move the .tweet div left/right then
			$('.tweet')	.html( data[ current ].text  ); // add the next tweet
			var time = relative_time( data[ current ].created_at ); // get the next date
			$('.created_at').html(time);	// put data into useable format
			var tweetAreaHeight = $('#twitter').height(); // get the height of the tweet area now its got the tweet inside
			$('#twitterWrap').animate({"height": tweetAreaHeight + "px"}, function(){ // change the tweet height to the new div
				$('.tweet').css({"right":  moveIn + tweetAreaWidth + "px"}).animate({"right": 0}); // move in the tweet
				$('.created_at').animate({"opacity": "1"}, 500); // fade in the date
			});
		});
// dealing with the click buttons
		$('.tweetNav').removeClass('inactive').addClass('active'); // remove inactive from all buttons and add active
		if(current == totalAmount){ // if current is equal to the total amount make the next button inactive
			$('.next').removeClass('active').addClass('inactive');
		}
		if(current == 0){
			$('.previous').removeClass('active').addClass('inactive');
		}
		$('.inactive').animate({"opacity": "0.3"}, 1000); // make inactive buttons fade out
		$('.active').animate({"opacity": "1"}, 500); // made active buttons fade in
		$('.tweetNav').click( function(){ return false; }); // return false

	}; // end of clicked function
});// end of json
});

This should now work, a great way to see how to access the elements that are returned is using FireBug as this lets us see the name of the json elements and what is nested in them.

I hope that you have found this interesting and now have a working animated twitter widget.

Related posts:

1. Create URL Shortener For Twitter Using PHP
2. Build a Content Slider with jQuery
3. Creating an Ellipsis in PHP

Welcome to part 2 of this tutorial. In this we will finish off what we started and add the extra functionality. By the end of this tutorial we will have:

1. Stats Page
2. Admin Page to delete items and make them inactive
3. Settings to add new users and change API key
4. Work with Tweetie 2 for the iPhone/iPod touch

Download
live demo

Login

Username: alexbor
Password: password

Some changes

Let’s get started with just a few minor changes to the last tutorial. In the functions.php file, change the “json_to_jquery” function to this:

function json_to_jquery($type, $message, $url){
	$replying = array('error'=>'', 'message'=> '');
	$replying['error'] = "$type";
	$replying['message'] = "$message";
	$replying['shortUrl'] = "$url"; //changed from shortURL to shortUrl as that is how Tweetie reads it
	echo(json_encode($replying));
}

also, at the very top of this file, we want to add

$loggedIn = $_SESSION['loggedIn'];

which is a variable that will be used later to make sure that we are logged in. Finally inside of the add.js file update “$(‘#theLink’).val(e.shortURL);” to “$(‘#theLink’).val(e.shortUrl);”.

After doing that you will find that (once the API key is done) you will be able to use this with Tweetie.

Also, we will be adding more CSS classes and IDs so it’s best to change the current “main.css” file (in the CSS folder) to the following, to save from needing to go through the CSS later.

@charset "UTF-8";
/* CSS Document */
/* UTULITIES */
.clear{clear: both;}
.push{height: 30px;}
/* END */
/* ORDER PAGE CORRECTLY */
*{margin: 0; padding: 0;}
html{overflow-y: scroll;position: relative;}																/*  COLOUR  */
body{width: 100%; height: 100%; background: url(../images/theBG.png) repeat; background-color: #00ADED;color: white;}
/* END */

/* header  */
#header{width: 1000px;height: 153px;margin: 0 auto;}
/*  END  */
#stipWrap{width: 1000px; margin: 0 auto;}
#strip, #stripAdmin{		/*  CHANGE REPEAT  */
background:url("../images/strip.png") repeat scroll 0 0 transparent;
min-width:1000px;
position:inherit;
}
#strip{
height:270px;
}

#linkForm{
height:30px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
padding-top:100px;
width:500px;
}
.label{color:white;font-size:30px;}
.smallInput{font-family: Helvetica, Verdana, Arial, sans-serif;background:none repeat scroll 0 0 #E9F0F8;border:1px solid #00ADED;color:#1E1C56;font-size:20px;padding:5px;}
#theLink{width:400px;}
#theLink:hover{background: #ffffff;}
#theLink:focus{color: #000000;}
.process{
background:#CC1B00;
color:white;
font-size:23px;
font-weight:bold;
height:0;
margin-left:250px;
position:absolute;
text-align:center;
width:500px;
overflow: hidden;
}
.processingC{padding: 5px;}
ul{font-family:helvetica;list-style:none outside none;margin-left:230px;margin-top:10px;display: none;}
ul li{display:inline-block;text-align:center;width:145px;}
ul li a{color:#2473A0;text-decoration:none;}
ul li a:hover{color:#E4E9E9;}
#message{
color:#CBCBCB;
font-family:Helvetica,Verdana,Arial,sans-serif;
font-size:25px;
font-weight:bold;
margin:0 auto;
padding-top:154px;
text-align:center;
width:1000px;
word-spacing:3px;
letter-spacing: 2px;
text-shadow:0 0 8px #00ADED;
}
.problem{
color:#CBCBCB;
font-family:Helvetica,Verdana,Arial,sans-serif;
font-size:25px;
font-weight:bold;
text-align:center;
width:1000px;
padding-top: 5px;
word-spacing:3px;
letter-spacing: 2px;
text-shadow:0 0 8px #00ADED;
}
/*  LOGIN FORM  */
.inform{color:white;padding:25px 0;text-align:center;}
.loginForm{text-align: center;}
.logOut{color:#B1B3B3;font-size:18px;font-style:italic;padding-top:5px;position:ab
solute;text-decoration:none;}
.logOut:hover, .admin:hover{color:white;}
.admin{color:#B1B3B3;font-size:18px;font-style:italic;padding-top:5px;float:right;text-decoration:none;}
.pright{padding-right: 10px;}
.shorturl, .longurl, .link{color: #CBCBCB; text-decoration: none;}

.shorturl:hover, .longurl:hover, .link:hover{color: white;}

Admin Page

If you have not already, create an admin folder on the home directory and inside this make two files “index.php” and “settings.php” and open the index.php file. This is going to be a large file that will paginate the links and then display them below with buttons to delete them with option to change if they are active or not. The pagination code is a slightly modified version of papermashup‘s and he explains what it means on that page. In this file add the following code:

<?php
require_once("../files/functions/functions.php"); // get our functions file
admin_page(); // this is a function we will create later to check if the user is logged in
	$tableName="url";		// the table to search
	$targetpage = "index.php"; 	// the file that this is in ... So ?page will work
	$limit = 10; // how many per page

	$query = "SELECT COUNT(*) as num FROM $tableName"; // get amount of items in database
	$total_pages = mysql_fetch_array(mysql_query($query)); // run/fetch
	$total_pages = $total_pages[num];	

	$stages = 3;
	$page = mysql_escape_string($_GET['page']);
	$pageRet = mysql_escape_string($_GET['page']);
	if($page){
		$start = ($page - 1) * $limit;
	}else{
		$start = 0;
	}
    // Get page data
	$query1 = "SELECT * FROM $tableName ORDER BY `id` DESC  LIMIT $start, $limit";
	$result = mysql_query($query1);

	// Initial page num setup
	if ($page == 0){$page = 1;}
	$prev = $page - 1;
	$next = $page + 1;
	$lastpage = ceil($total_pages/$limit);
	$LastPagem1 = $lastpage - 1;					

	$paginate = '';
	if($lastpage > 1)
	{
	$paginate .= "<div class='paginate'>";
		// Previous
		if ($page > 1){
			$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
		}else{
			$paginate.= "<span class='disabled'>previous</span>";	}

		// Pages
		if ($lastpage < 7 + ($stages * 2))	// Not enough pages to breaking it up
		{
			for ($counter = 1; $counter <= $lastpage; $counter++)
			{
				if ($counter == $page){
					$paginate.= "<span class='current'>$counter</span>";
				}else{
					$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
			}
		}
		elseif($lastpage > 5 + ($stages * 2))	// Enough pages to hide a few?
		{
			// Beginning only hide later pages
			if($page < 1 + ($stages * 2))
			{
				for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
			}
			// Middle hide some front and some back
			elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
			}
			// End only hide early pages
			else
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
				}
			}
		}

				// Next
		if ($page < $counter - 1){
			$paginate.= "<a href='$targetpage?page=$next'>next</a>";
		}else{
			$paginate.= "<span class='disabled'>next</span>";
			}

		$paginate.= "</div>";
}
?>

This will create a variable containing the navigation and also allow us loop through the data that will be shown on this page. To do this we will had the following below that bulk of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Make it short || Admin &rArr; <?php echo $username ; ?> <?php echo $title; ?></title>
		<!-- Start of CSS -->
	<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/files/css/main.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/files/css/admin.css" />
		<!-- Start of JS -->
 	<script type="text/javascript" src="<?php echo BASE_URL; ?>/files/js/jquery.js"></script>
 	<script type="text/javascript" src="<?php echo BASE_URL; ?>/files/js/add.js"></script>

<?php if($_GET['deleted']): //we will use this function to display a row saying "deleted" after we are redirected by out delete page. ?>
<script type="text/javascript">
$(function() {
	var deleted = document.location.hash.substr(1); // this gets the # value in the url
	$('p#' + deleted ).prepend("<h1 class='deleted'>DELETED</h1><p class='push'></p><hr /><p class='push'></p>");
});
</script>
<?php endif; ?>
</head>
<body>
<div id="header">
<p class="push"></p>
<?php echo "<a href='" . BASE_URL . "/files/process/logout.php' class='headLink Logout'>Logout " . $username . "?</a>"; ?>
<a class='headLink Settings right' href="<?php echo BASE_URL; ?>/admin/settings.php">Settings</a>
<a class='headLink Admin right active' href="<?php echo BASE_URL; ?>/admin/">Admin</a>
</div>
<div id="stripAdmin">
	<div id="stipWrap">
		<p class="push"></p>
		<?php echo $paginate; //display the navigation ?>
		<p class="push"></p>
		<p class="right">FYI: <?php echo $total_pages; //display the amount of records ?> URLS have been shortened</p>

		<?php
		$i = 0;
		while($row = mysql_fetch_array($result)): //for every result loop through this ?>
		<p class="push"></p>
		<p id="<?php echo $i;  ?>"></p>
		The full URL is:
		<a class="longurl" href="<?php echo urldecode($row['long']); ?>"><?php echo urldecode($row['long']); ?></a><br />
		The short URL is:
		<a class="longurl" href="<?php echo BASE_URL . "/". $row['short']; ?>"><?php echo BASE_URL . "/". $row['short']; ?></a><br />
		Clicks: <?php echo  $row['clicks']; ?><br />
		<p class="push"></p>
		This URL was added on <?php echo date("dS F Y g:i a", strtotime( $row['dateAdded'])); ?> and is currently set to 

				<form action="<?php echo BASE_URL; ?>/files/process/change_active.php" method="post">
					Active:
					<input <?php if($row['active'] == 1){?>checked=""<?php } // show as active is the url value is still active?>
					class="toggle" name="visible" value="1" type="radio" /><br />

					Inactive:
					<input <?php if($row['active'] == 0){?>checked=""<?php }?>
					name="visible" value="0" type="radio" class="toggle" />

					<input class="toggle" type="hidden" name="urlID" value="<?php echo $row['id']; ?>" /><br /> <!-- SO WE KNOW WHAT TO CHANGE -->
					<input class="toggle" type="hidden" name="page" value="<?php echo $pageRet; ?>" /><br /><!-- TO REDIRECT THE USER AT THE END -->
					<input class="toggle" type="hidden" name="ret" value="<?php echo $i; ?>" /><br /><!-- move user to item  on redirect-->
					<input type="submit" value="Change" />
				</form>

			<!-- Delete button -->
			<a class="delete " href="<?php echo BASE_URL; ?>/files/process/deleteItem.php?urlID=<?php echo $row['id']; ?>&page=<?php echo $pageRet; ?>&ret=<?php echo $i; ?>">Delete Item?</a>
			<p class="push"></p>
			<hr/> <!-- A line to separate -->
			// increment $i and end loop
		<?php $i++; endwhile;
			// display naviagtion
		echo $paginate;

		?>
	</div>
</div>
<div id="end"></div>
</body>
</html>

For that page, we will add the css file “admin.css” inside the css folder as this is just CSS for the admin page and there is no point loading it for people who are not logged in or don’t need it. We want to add:

body{font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size:18px;}
h1.large{
	color: white;
	font-size: 30px;
	font-weight: bold;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	padding: 10px;

}
.shorturl, .longurl, .link{color: #CBCBCB; text-decoration: none;}
.shorturl:hover, .longurl:hover, .link:hover{color: white;}
.right{float: right;padding-right: 20px;}
.toggle{width: 16px; height: 16px;}
.deleted{text-align: center;}
.headLink{color: white;text-decoration: none;}
.headLink:hover, .active{color: black;}
.delete{
background:none repeat scroll 0 0 transparent;
border:1px solid #CBCBCB;
color:#CBCBCB;
display:block;
float:right;
margin-top:-30px;
padding:5px;
text-align:right;
text-decoration:none;
width:110px;
}
.delete:hover{border: 1px solid red;color: red;}
.paginate{margin-top: 20px;padding-bottom: 20px;text-align: center;}
.paginate a, .disabled, .current{border:1px solid #CBCBCB;color:#CBCBCB;display: inline-block;padding:5px;text-align: center;margin:5px;text-decoration: none;}
.paginate a:hover{border:1px solid white;color:white;}
.disabled{border: none;}
.current{border: none;}
.tweetielink{text-decoration: none; color: white; font-size: 13px;}
.apiKeyBox{width: 700px; text-align: center;}

Function

In the functions.php file, go to the bottom and we will start writing some new functions that will be used in the tutorial.

function check_api_key($apiKey){ // checks if there is an API key present
	$existsQ = mysql_query("SELECT * FROM `users` WHERE `apiKey`='{$apiKey}' LIMIT 1");	// run a search to find it
	$exsitsRows = mysql_num_rows($existsQ);												// check amount of rows
	if($exsitsRows == 0 ){ 																// if there are 0 it was not found
		return false;
	}else{
		return true;
	}

}

function check_all_logins($loggedIn, $apiKey){ // this will check if we can allow the user to make urls shorter.
	if($loggedIn || !LOGIN_REQ){ // already logged in or they have a session saying logged in
		return true;
	}
	if(check_api_key($apiKey)){ // if API key was found...
		return true;
	}else{
		return false;
	}
}

function admin_page(){
	$loggedIn = $_SESSION['loggedIn'];
	if(!$loggedIn){
		header("Location:  ". BASE_URL . "/?show_loggin_area=1"); // we will add this in the index.php page, to have a way to show the
																	// login form even if the LOGIN_REQ field is set to false
		die();
	}
}

function get_user_info($username){ // get all information that is in the database about a specific use that is logged in
	$qur = mysql_query("SELECT * FROM `users` WHERE `username` ='{$username}' LIMIT 1;");
	$info = mysql_fetch_assoc($qur);
	return $info; // return as an array
}

function isNumber($i) { return (is_numeric($i) && !preg_match('/[[:^digit:]]/', $i) ? true : false); } // shows if a value is a number

function gen_api_key($email){ // will make a new API key for the user
    $toHash = time(); // the current time
    $toHash .= rand(0, 999999); // a random number
    $tohash .= $_SERVER['REMOTE_ADDR']; // the IP address of the user

    $toHash2 = rand(0, 999999);
    $toHash2 .= $email; // your email
    $hash1 = md5($toHash); // md5 the first hash
    $hash2 = md5($toHash2);  // md5 the second hash
  	$compleate =  $hash1 . $hash2;

  	return $compleate;
}

function get_data_for_url($shortURL){ // gets the user data from an API key
	$qur = mysql_query("SELECT * FROM `url` WHERE `short` = '{$shortURL}' LIMIT 1");
	if(mysql_num_rows($qur)){
		return mysql_fetch_assoc($qur);
	}else{
		return false;
	}
}

Now that the “admin_page()” function is set up we need to change the index.php in the home directory to show the login for when you are not have that variable in but you have been redirected with the variable to show the form. Open that page change the very top to the following:

<?php
require_once("files/functions/functions.php");
$loggedIn = $_SESSION['loggedIn'];
$username = $_SESSION['username'];
$url           = mysql_real_escape_string( strip_tags($_GET['url']));
$show_loggin_area = mysql_real_escape_string( strip_tags($_GET['show_loggin_area'])); // this gets the varible 

//echo $url;
if(strlen($url) >= 1){
	$redirect = true;
}else{
	$redirect = false;
}
if(!$redirect) :
?>

Then scroll down to

		<?php if( (LOGIN_REQ) && ($loggedIn != true) ){ ?>
				<h1 class="inform">Please login with the form below:</h1>
				<form class="loginForm" action="files/process/login.php" method="POST">
					<label for="username" class="label">Username:</label><br />
					<input type="text" id="username" class="smallInput" name="username"><br />

					<label for="password" class="label">Password:</label><br />
					<input type="password" id="password" class="smallInput" name="password"><br /><br />
					<input type="submit" value="Login me in!" />
				</form>

			<?php }else{ ?>
				<?php if($loggedIn){echo "<a href='" . BASE_URL . "/files/process/logout.php' class='logOut'>Logout " . $username . "?</a>"; } ?>
				<form id="linkForm" class="" action="files/process/add.php" method="post">
					<input value="Make me short..." type="text" class="smallInput" id="theLink" name="theLink"/>
					<input type="submit" id="submit" value="Shorten" />
				</form>		

				<ul class="postTo">
					<li class="tweetie"><a href="">Post With Tweetie</a></li>
					<li class="twitter"><a href="">Post To Twitter</a></li>
					<li class="facebook"><a href="">Share On Facebook</a></li>
				</ul>
		<?php }; ?>

and change it to

		<?php if( (LOGIN_REQ) && ($loggedIn != true) || ($show_loggin_area == true)  ){ ?>
				<h1 class="inform">Please login with the form below:</h1>
				<form class="loginForm" action="files/process/login.php" method="POST">
					<label for="username" class="label">Username:</label><br />
					<input type="text" id="username" class="smallInput" name="username"><br />

					<label for="password" class="label">Password:</label><br />
					<input type="password" id="password" class="smallInput" name="password"><br /><br />
					<input type="submit" value="Login me in!" />
				</form>

			<?php }else{ ?>				// link to logout
				<?php if($loggedIn){echo "<a href='" . BASE_URL . "/files/process/logout.php' class='logOut'>Logout " . $username . "?</a>";
								// link to settings page
					echo "<a href='" . BASE_URL . "/admin/settings.php' class='admin'>Settings</a>";
								// link to admin page
					echo "<a href='" . BASE_URL . "/admin/' class='admin pright'>Admin</a>";

				} ?>

This now makes sure that if you need to login to see the admin pages, even if LOGIN_REQ is set to false, it will show this form so you may login.

Change if active

Create a file change_active.php in the process folder and add the following:

<?php
require_once("../functions/functions.php");  // get the functions file
admin_page();
$error = false; // set this as default

$urlID = mysql_real_escape_string( strip_tags($_POST['urlID']) ); // The ID of item to change
$visible = mysql_real_escape_string( strip_tags($_POST['visible']) ); // If it will be visible or invisible
$page = mysql_real_escape_string( strip_tags($_POST['page']) ); // The page to redirect the user back to
$ret = mysql_real_escape_string( strip_tags($_POST['ret']) ); // The item to move the user to

// if "visible" does not have a value or not in integer, or urlID is less then/= to 0 or if urlID is not an integer
if( (strlen($visible) != 1) || (!isNumber($visible)) || (strlen($urlID)  <= 0) || (!isNumber($urlID)) ){
	$error = true;
	echo "ERROR!";
	$visible_or_id_not_valid = true;
}

if(!$error){ // if no error

	// check that the item exists
	$change = "
		SELECT * FROM `url` WHERE `id` = '{$urlID}' LIMIT 1;
	";
	$ran = mysql_query($change);
	$rows = mysql_num_rows($ran);
	if($rows != 1){
		$error = true;
	}else{ // it did exist so change it to the visible item that has been posted
		$setChange = "
			UPDATE `url` SET `active` =  '{$visible}' WHERE `id` ='{$urlID}' LIMIT 1 ;
		";
		mysql_query($setChange);
		// redirect to the page, and add a hash tag of the where to move
		// E.I. the "p" element the has a id of i
		header("Location: " .BASE_URL."/admin/index.php?page={$page}#{$ret}");
	}
}

This should now let you add change if it is active.

Delete Item

Next create a file called deleteItem.php and we will add this:

<?php
require_once("../functions/functions.php");  // get the functions file
admin_page();
$error = false; // set this as defalt
$urlID = mysql_real_escape_string( strip_tags($_POST['urlID']) ); // The ID of item to change
$page = mysql_real_escape_string( strip_tags($_POST['page']) ); // The page to redirect the user back to
$ret = mysql_real_escape_string( strip_tags($_POST['ret']) ); // The item to move the user to
	// if id is not set					and its not a number
if( (strlen($urlID)  <= 0) || (!isNumber($urlID)) ){
	$error = true; // error
	echo "ERROR!";
	$id_not_valid = true;
}

if(!$error){ // if no error

	// check if it is in the database
	$change = "
		SELECT * FROM `url` WHERE `id` = '{$urlID}' LIMIT 1;
	";
	$ran = mysql_query($change);
	$rows = mysql_num_rows($ran);
	if($rows != 1){
		$error = true;
	}else{	// was found so delete the item
		$setChange = "
			DELETE FROM `url` WHERE `url`.`id` = '{$urlID}' LIMIT 1;
		";
		mysql_query($setChange);
			// redirect the use back to the correct page and put deleted set
			// to true, this will show the jquery script that puts "deleted"
			// in the right place due to adding a #item
		header("Location: " .BASE_URL."/admin/index.php?page={$page}&deleted=1#{$ret}"); 

	}
}else{
	echo "And error was found.";
}
// print_r( $_POST );

The Settings page

This settings page will have a few useful items

1. Display API key
2. Generate new API key
3. Display a link to copy into Tweetie 2 to use as your custom URL shortener
4. Add new user

Open the settings.php page and add the following

<?php
require_once("../files/functions/functions.php");
admin_page();
$username = $_SESSION['username'];
$info = get_user_info($username);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Make it short || Admin &rArr; <?php echo $username ; ?> <?php echo $title; ?> || Settings</title>
		<!-- Start of CSS -->
	<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/files/css/main.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/files/css/admin.css" />
		<!-- Start of JS -->
 	<script type="text/javascript" src="<?php echo BASE_URL; ?>/files/js/jquery.js"></script>
 	<script type="text/javascript" src="<?php echo BASE_URL; ?>/files/js/add.js"></script>
</head>
<body>	

<div id="header">
<p class="push"></p>
<?php echo "<a href='" . BASE_URL . "/files/process/logout.php' class='headLink Logout'>Logout " . $username . "?</a>"; ?>
<a class='headLink Settings right active' href="<?php echo BASE_URL; ?>/admin/settings.php">Settings</a>
<a class='headLink Admin right ' href="<?php echo BASE_URL; ?>/admin/">Admin</a>
</div>

<div id="stripAdmin">
	<div id="stipWrap">
		<h1 class="large">Hello <?php echo $username; ?>,</h1>
			<!-- Putting the API key into a text box makes it more clear that this is what the user should copy (and makes it easier to copy that parts you want -->
		Your current API key is: <input type="text" value="<?php echo $info['apiKey'];?>" class="smallInput apiKeyBox" /><br /><br />
		Generate a new API key? <a class="link" href="<?php echo BASE_URL; ?>/files/process/newKey.php">Yes, please.</a><br />

		<p class="push"></p>

		<h1>Add new user</h1>
			<form action="<?php echo BASE_URL;?>/files/process/makeUser.php" method="POST">
				<input type="text" class="smallInput" value="Username" id="username" name="username" />(Username)<br /><br />
				<input type="text" class="smallInput" value="Email" id="email" name="email" />(Email)<br /><br />
				<input type="password" class="smallInput" id="password" name="password" /> (Password)<br /><br />
				<input type="submit" value="Add User" />
			</form>

		<?php
		//	print_r($info);
		?><br /><br />
		To get Tweetie to work, copy this into the "Custom URL" field in the app:<br /><br />
		<?php
			// gets the tweetie link that will allow the user to copy and past it
			echo "<a class='tweetielink' href=' " . BASE_URL . "/files/process/add.php?apiKey=" . $info['apiKey'] . "&theLink=%@'>" . BASE_URL . "/files/process/add.php?apiKey=" . $info['apiKey'] . "&theLink=%@</a>";
		?>
		<br /><br />

	</div>
</div>
<div id="end"></div>
</body>
</html> <?php
require_once("../files/functions/functions.php");
admin_page();
$username = $_SESSION['username'];
$info = get_user_info($username);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Make it short || Admin &rArr; <?php echo $username ; ?> <?php echo $title; ?> || Settings</title>
		<!-- Start of CSS -->
	<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/files/css/main.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/files/css/admin.css" />
		<!-- Start of JS -->
 	<script type="text/javascript" src="<?php echo BASE_URL; ?>/files/js/jquery.js"></script>
 	<script type="text/javascript" src="<?php echo BASE_URL; ?>/files/js/add.js"></script>
</head>
<body>	

<div id="header">
<p class="push"></p>
<?php echo "<a href='" . BASE_URL . "/files/process/logout.php' class='headLink Logout'>Logout " . $username . "?</a>"; ?>
<a class='headLink Settings right active' href="<?php echo BASE_URL; ?>/admin/settings.php">Settings</a>
<a class='headLink Admin right ' href="<?php echo BASE_URL; ?>/admin/">Admin</a>
</div>

<div id="stripAdmin">
	<div id="stipWrap">
		<h1 class="large">Hello <?php echo $username; ?>,</h1>
			<!-- Putting the API key into a text box makes it more clear that this is what the user should copy (and makes it easier to copy that parts you want) -->
		Your current API key is: <input type="text" value="<?php echo $info['apiKey'];?>" class="smallInput apiKeyBox" /><br /><br />
		Generate a new API key? <a class="link" href="<?php echo BASE_URL; ?>/files/process/newKey.php">Yes, please.</a><br />

		<p class="push"></p>

		<h1>Add new user</h1>
			<form action="<?php echo BASE_URL;?>/files/process/makeUser.php" method="POST">
				<input type="text" class="smallInput" value="Username" id="username" name="username" />(Username)<br /><br />
				<input type="text" class="smallInput" value="Email" id="email" name="email" />(Email)<br /><br />
				<input type="password" class="smallInput" id="password" name="password" /> (Password)<br /><br />
				<input type="submit" value="Add User" />
			</form>

		<?php
		//	print_r($info);
		?><br /><br />
		To get Tweetie to work, copy this into the "Custom URL" field in the app:<br /><br />
		<?php
			// gets the tweetie link that will allow the user to copy and past it
			echo "<a class='tweetielink' href=' " . BASE_URL . "/files/process/add.php?apiKey=" . $info['apiKey'] . "&theLink=%@'>" . BASE_URL . "/files/process/add.php?apiKey=" . $info['apiKey'] . "&theLink=%@</a>";
		?>
		<br /><br />

	</div>
</div>
<div id="end"></div>
</body>
</html>

That should be it for that page, we just need to make the two files that the forms submit to. They are “makeUser.php” and “newKey.php”. Start by making “makeUser.php” in the process file and add this:

<?php
require_once("../functions/functions.php");  // get the functions file
admin_page();
$error = false; // set this as defalt

$username = mysql_real_escape_string( strip_tags($_POST['username']) ); // Get the username that was posted
$email = mysql_real_escape_string( strip_tags($_POST['email']) ); // Get the email address
$password = mysql_real_escape_string( strip_tags($_POST['password'])); // get the password

if(strlen($username) < 5 ){ 	// if the username is above 5 char
	$error = true;			// if its not set an error
	$errorMessages['username'] = "Please write a username"; // what the error is
}
if(strlen($password) < 5){ // same with password
	$error = true;
	$errorMessages['password'] = "Please write a password";
}

if(preg_match("/ /", $username)){ // check that the username has no white space.
	$error = true;
	$errorMessages['spaces'] = "Username cannot contain white space";
}

if(preg_match("/ /", $username)){ // check that the username has no white space.
	$error = true;
	$errorMessages['spaces'] = "Username cannot contain white space";
}
			// validate email address
if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
	$errorMessages['email'] = "Please enter a VALID email address";
	$error = true;
}

// if no error
if(!$error){ // if no error
	$password = md5($password); // hash the password
		// we will check if the use is in the database already
	$newQuery = mysql_query("SELECT *
		FROM `users`
		WHERE `username` =  '{$username}'
		OR `email` = '{$email}'
		LIMIT 1");

	$newRows = mysql_num_rows($newQuery);
	if($newRows == 0){ // if no info was found with either email or username
		$apiKey = gen_api_key($info['email']); // create an API key for that user
		// then insert them into the database
	mysql_query("INSERT INTO `users` (`username` ,`password` ,`email`, `apiKey`)
				VALUES ('{$username}', '{$password}', '{$email}', '$apiKey') ");
		// and redirect them back to the settings page
	header("Location: " . BASE_URL  . "/admin/settings.php");
	}else{ // if they were
		$error = true;//set an error
		$errorMessages['inAlread'] = "The username or email address is in use already!";
	}

}
if($error){ // if there is an errir
	foreach( $errorMessages as $errorMessage ){ // for every error message
		echo "Problem: " . $errorMessage . "<br />"; // echo it out
	}
}

And finally for the admin pages, we want create the “newKey.php” page to make the new API key. In the newKey.php file we will add a small bit of code, as we have the functions that we need set up:

<?php
require_once("../functions/functions.php");  // get the functions file
admin_page();  // will check if user is logged in, if not it will redirect and stop the script running
$error = false; // set this as defalt

$user = get_user_info($_SESSION['username']); // make sure we have  everything we need

$newAPI = gen_api_key($user['email']); // gen the user a new code
// update their row in the database
mysql_query("UPDATE `users` SET `apiKey` = '{$newAPI}' WHERE `id` ={$user['id']} LIMIT 1");
// and finally redirect them back to the settings page
header("Location: " . BASE_URL . "/admin/settings.php");

And that is all we need to make a new API Key for a user. Next, we just have to make the “stats” page which will show users that are not logged in how many clicks a link has gotten. For this, open the stats folder we made in the last tutorial (inside files then a folder called stats) we want to add another .htaccess file here and put inside it the following code:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1 [L]

Stats

Put an index.php file inside this stats folder, and here we will create the way to display info about the URL.

<?php
require_once("../functions/functions.php");
$url            = mysql_real_escape_string( strip_tags($_GET['url']));
$data 			= get_data_for_url($url); // get the data from the database
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Make it short || Stats</title>
		<!-- Start of CSS -->
	<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/files/css/main.css" />
		<!-- Start of JS -->
 	<script type="text/javascript" src="files/js/jquery.js"></script>
 	<script type="text/javascript" src="files/js/add.js"></script>
 	<style>
 		#stipWrap{
 			font-size: 20px;
 			text-align: center;
 		}
 	</style>
</head>
<body>
<div id="header">
	<div class="process"><div class="processingC"></div></div>
</div>
<div id="strip">
	<div id="stipWrap">
		<?php //print_r($data); ?>
		<p class="push"></p>
		<h1>Stats</h1><br />
		URL = <a class="longurl" href="<?php echo urldecode( $data['long'] ); ?>"><?php echo urldecode( $data['long'] ); ?></a><br />
		Short URL = <a class="shorturl" href="<?php echo BASE_URL . $data['short']; ?>"><?php echo BASE_URL . $data['short']; ?></a><br />
		Date Added	= <?php echo date("dS F Y g:i a", strtotime( $data['dateAdded'])); ?><br />
		Clicks	= <?php echo $data['clicks']; ?><br />
		Last Clicked	= <?php echo date("dS F Y g:i a", strtotime( $data['lastClicked'])); ?><br />

	</div>
</div>
<div id="end"></div>
</body>
</html>

And that should be done! We now have a full featured URL shortener set up, I hope that you found this interesting and you can download all the completed files here

Related posts:

1. Create URL Shortener For Twitter Using PHP
2. Building a Simple PHP Mailing List
3. Build a PHP Twitter Widget

In this tutorial we will create a simple but awesome popup tooltip using jQuery. So let’s get started !!

Download

Creating a tooltip in photoshop.

First of all open up photoshop and create a document with dimensions 300 * 150 px, though the dimension may vary on how MUCH data you want show. Tooltips generally show basic and less data. Follow the steps below -

• Select the rounded rectangle tool with radius 5 px and draw a rectangle with about 15px distance from the canvas margins.
  
• This will be our background, now go to fx and add a gradient overlay from #1f1f1f to #ffffff.
  
• Now select the drop shadow with options,
  • Blend Mode – normal
  • Opacity – 80%
  • Distance – 0px
  • Size – 21px
  
• Now hide the background and export it as png image using Save for Web and Devices option.

That’s it for the photoshop part, Now for the coding part.

Step 1

We will mould our tooltip into a jquery plugin. So first of all we will start will a basic html file to work with and how to show a tooltip for a particular element.

      <html xmlns="http://www.w3.org/1999/xhtml">
           <head>
            <title>jTool</title>
            <link rel="stylesheet" type="text/css" href="jtool.css"  />
            <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
            <script type="text/javascript" src="jquery.jtool.js"></script>
           <script type="text/javascript">
                $(function(){

                $("a").jTool(); //our plugin

                 });

             </script>
            </head>

        <body>

            <div id="tool">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut bibendum orci. Nam scelerisque, risus aliquam pellentesque viverra, libero urna sagittis quam, auctor dictum nunc lectus ut mi.</div>

        <a href="#tool"> Simple Tooltip using jQuery </a>
        </body>
        </html>

First of all we have imported jquery, our plugin and css file which we will create later. Then we have called our plugin on the element we want to show tooltip.

Setting up which tooltip to show on a particular element

To show a particular data on a tooltip we will target the element using href attribute. The href will contain the id of the element which you want to show on hover. That’s what we have done above, div id ‘tool’ is displayed when mouse hovers on anchor with href =’#tool’

Step 2 Working up with the CSS.

Create a css file and name it jtool.css . In this css file we will styling our tooltip elements. The css code could have been set up through jquery but it’s always a good practice to separate logic from presentation. Add the following code in the css.

 #jTool
{
color:#CCCCCC;
padding:5px;
display:none;
max-width:300px;
min-width:130px;
font-family:"Lucida Grande", Tahoma, sans-serif; text-align:justify;
position: absolute;
}

Our tooltip is wrapped by jTool div, we will do that in the js part. It is a basic styling and we will keep minimum width of our tooltip 130px and constraint it to 300px.

#jTool > div
{

padding:10px;
position:relative;
z-index:10;
display:block;

}

#jTool img
{
width:100%;
height:100%;
position:absolute;
padding:0px;
margin:0px;
z-index:1;
}

we have used #jTool img here for styling but there is no image present, actually the image is our background tooltip. It is not possible to scale a background image in CSS, for that we will append image in the jTool div and set its dimension to 100% so that it scales automatically. We will also set its z-index less than div so that text is visible.

Finally our css file looks like.

#jTool
{
color:#CCCCCC;
padding:5px;
display:none;
max-width:300px;
min-width:130px;
font-family:"Lucida Grande", Tahoma, sans-serif; text-align:justify;
position: absolute;
}

#jTool > div
{

padding:10px;
position:relative;
z-index:10;
display:block;

}

#jTool img
{
width:100%;
height:100%;
position:absolute;
padding:0px;
margin:0px;
z-index:1;
}

Step 3 Creating the Plugin

Now create a javascript file and according to jquery plugin naming convection it should be named jquery.plugin.js , so our file name is jquery.jtool.js, First of all we will create a basic structure.

 $.fn.jTool = function(){

    });

Step 4

Now will declare variables and initialize basic settings.

	var element = $(this);
	var tooltip = element.attr("href");
	$(tooltip).wrap("<div id='jTool' />");
    $("#jTool").prepend(<img src='base.png' />");

	 var top = element.offset().top;
	 var right = $(window).width() - element.offset().left;
	 var x,y;

Here first we get the object triggering the tooltip in the element, since we have used href to target elements, we will get the actual tooltip by getting element’s attribute. Then we will wrap it jTool div and prepend our background image.

After that we will get the element’s top position with respect to window and also calculate the length between widow’s width and element’s left position.

Note: Reason for calculating top position and left length is that later we will make our plugin little smart .

Step 5

Now we will fade In the tooltip on element’s hover state.

element.hover(function(event){

						  x = event.pageX;
						  y = event.pageY;

						  $("#jTool").css({left:x,top:y});

                          setTimeout(function(){  $("#jTool").stop(true,true).fadeIn("slow"); },200);
							   },
					  function(){
						 $("#jTool").fadeOut("slow");

				});

Now on hover event, we get the mouse’s position and set the jTool position. After a 200ms delay we then show the tooltip.

Step 6

There is a problem, if the element showing the tooltip is either at top left or right corner, then tooltips will be out the viewport so we will make it little smarter.

   if($("#jTool").height()<top)
   y = y-$("#jTool").height()-20;

   if($("#jTool").width()>right)
   x = x-$("#jTool").width();

If distance from the top of the element and window is less than tooltip’s height, it will show towards the bottom and similarly if the difference between window’s width and element’s left position is less than tooltip’s width it will show towards the right.

Step 7

Though the plugin works fine, but as usual it doesn’t look properly in IE, The tooltip’s image isn’t displayed to cover the whole text of the tooltip. Since IE6 is almost extinct, we will make in compatible for IE7. To get around this, we will force the jTool’s image to cover the height of the tooltip.

   if($.browser.msie&&parseInt(jQuery.browser.version)
    $("#jTool img").height($("#jTool").height());

Step 8

Finally our js code looks like.

$.fn.jTool = function(){

		var element = $(this);
		var tooltip = element.attr("href");
		$(tooltip).wrap("<div id='jTool' />");

		 $("#jTool").prepend("<img src='base.png' />");

		 var top = element.offset().top;
		 var right = $(window).width() - element.offset().left;
		 var x,y;

		element.hover(function(event){

						  x = event.pageX;
						  y = event.pageY;

							if($("#jTool").height()<top)
							y = y-$("#jTool").height()-20;

							if($("#jTool").width()>right)
							x = x-$("#jTool").width();

                                $("#jTool").css({left:x,top:y});

                        if($.browser.msie&&parseInt(jQuery.browser.version)<8)
                           $("#jTool img").height($("#jTool").height());

				        setTimeout(function(){

                            $("#jTool").stop(true,true).fadeIn("slow"); },200);
							   },
					  function(){
						 $("#jTool").fadeOut("slow");

				});

	}

We have finally created our tooltip which is lightweight 2kb js size and 1 kb tooltip image and with a good looking UI .

Related posts:

1. 3 Screencasts For Building Your Own jQuery Plugin
2. Working with the jCrop Plugin
3. Build a Content Slider with jQuery

Hello, today I am going to go through how to build a custom URL shortener. Why have your own? Because then you are advertising yourself not another service like tinyurl.

A URL shortener is a nice way to send incredibly long links. It also helps when writing Tweets on Twitter (something I do a lot).

I decided that this system will have the following:

1. Option to need a login or not
2. API Key login
3. Generate a new API key
4. Click count
5. Add/remove links when logged in
6. Most recent IP tracking (always useful)
7. Not to include bots on your clicks
8. A nice admin backend
9. Maybe: A JS button to login, and past the current URL into the textbox
10. Maybe: Not looked how it fully works yet but be able to get a short URL with the Tweetie app for iPhone from Atebits. (I have nothing to do with them, just like their products.

Before we start you may want to have a go with the system we will be building here:

Download
live demo

Username: alexbor
Password: password

How it will work

I am going to do this in a two-part tutorial. By the end of the first tutorial we would have accomplished:

1. Adding URLs
2. Tracking (but not a nice view) of URLs
3. Redirections (of both adding a Ò+Ó to the end of a URL and normal redirecting)
4. AJAX system for adding a new URL
5. Adding IP address
6. Not to include bots
7. Log in/out
8. Redirecting visitors

Just so you can see, the final system that we will build today will have the following files:

The databases

Lets get started and create the databases that we will need. Run the following SQL code:

CREATE TABLE `url` (
  `id` int(30) NOT NULL AUTO_INCREMENT,
  `short` varchar(30) NOT NULL,
  `long` varchar(300) NOT NULL,
  `dateAdded` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `clicks` int(255) NOT NULL DEFAULT '0',
  `lastIP` varchar(30) NOT NULL,
  `lastClicked` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `active` tinyint(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`id`),
  UNIQUE KEY `short` (`short`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

CREATE TABLE `users` (
  `id` int(30) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `password` varchar(32) NOT NULL,
  `email` varchar(100) NOT NULL,
  `lastIP` varchar(20) NOT NULL,
  `apiKey` varchar(200) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`,`email`,`apiKey`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

If that worked successfully then you will have two tables, one will be for links and the other for users.

Now lets build the basic HTML of the website. On the home directory create a file index.php and put this in it:

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Make it short</title>
			<!-- Start of CSS -->
		<link rel="stylesheet" type="text/css" href="files/css/main.css" />
			<!-- Start of JS -->
	 	<script type="text/javascript" src="files/js/jquery.js"></script>
	 	<script type="text/javascript" src="files/js/add.js"></script>

	</head>
	<body>
	<div id="header">
		<div class="process"><div class="processingC"></div></div>
	</div>
	<div id="strip">
		<div id="stipWrap">
					<!-- This is the basic form for sending the url -->
					<form id="linkForm" class="" action="files/process/add.php" method="post">
						<input value="Make me short..." type="text" class="smallInput" id="theLink" name="theLink"/>
						<input type="submit" id="submit" value="Shorten" />
					</form>		

					<!-- This will show up once the URL has been shortened and allow you to post it to Facebook/Twitter/ or with Tweetie quickly -->
					<ul class="postTo">
						<li class="tweetie"><a href="">Post With Tweetie</a></li>
						<li class="twitter"><a href="">Post To Twitter</a></li>
						<li class="facebook"><a href="">Share On Facebook</a></li>
					</ul>
			</div>
	</div>
	<div id="end"></div>
	</body>
	</html>

Nothing to special there, just a layout with a form for adding/submitting URLs, also a few links that will have URLs once it has worked.

This file looks for some javascript and css files. We will create them now. Make a new folder called “files” the inside that create the following folders: css, functions, images, js, process, stats.

The main thing to notice from that is the folder “functions”, this will contain all functions and the config file. Also the process folder, this will contain process such as login, logout, where forms post to, etc.

The CSS file

Inside the CSS folder, add a new css file called “main.css”. The we will add the following CSS:

@charset "UTF-8";
/* CSS Document */
/* UTULITIES */
.clear{clear: both;}
.push{height: 30px;}
/* END */
/* ORDER PAGE CORRECTLY, REMOVING SOME BROWSER DEFULTS */
*{margin: 0; padding: 0;}
html{overflow-y: scroll;position: relative;}
body{width: 100%; height: 100%; background: url(../images/theBG.png) repeat; background-color: #00ADED;}
/* END */

/* header  */
#header{width: 1000px;height: 153px;margin: 0 auto;}
/*  END  */
#stipWrap{width: 1000px; margin: 0 auto;}
#strip{background:url("../images/strip.png") repeat-x scroll 0 0 transparent;height:270px;min-width:1000px;position:inherit;}
#linkForm{height:30px;margin: 0 auto;padding-top:100px;width:500px;}

/*  SOME MORE DEFULTS  */
.label{color:white;font-size:30px;} /*  Will be used when we have done the login bit  */
.smallInput{font-family: Helvetica, Verdana, Arial, sans-serif;background:none repeat scroll 0 0 #E9F0F8;border:1px solid #00ADED;color:#1E1C56;font-size:20px;padding:5px;}
#theLink{width:400px;}
#theLink:hover{background: #ffffff;}
#theLink:focus{color: #000000;}

/* These show the progress, and information from jQuery's AJAX   */
.process{background:#CC1B00;color:white;font-size:23px;font-weight:bold;height:0;margin-left:250px;position:absolute;text-align:center;width:500px;overflow: hidden;}
.processingC{padding: 5px;}

/*  The post to links  */
ul{font-family:helvetica;list-style:none outside none;margin-left:230px;margin-top:10px;display: none;}
ul li{display:inline-block;text-align:center;width:145px;}
ul li a{color:#2473A0;text-decoration:none;}
ul li a:hover{color:#E4E9E9;}
#message{color:#CBCBCB;font-family:Helvetica,Verdana,Arial,sans-serif;font-size:25px;font-weight:bold;margin:0 auto;padding-top:154px;text-align:center;width:1000px;word-spacing:3px;letter-spacing: 2px;text-shadow:0 0 8px #00ADED;}

.problem{color:#CBCBCB;font-family:Helvetica,Verdana,Arial,sans-serif;font-size:25px;font-weight:bold;text-align:center;width:1000px;padding-top: 5px;word-spacing:3px;letter-spacing: 2px;text-shadow:0 0 8px #00ADED;}

/*  LOGIN FORM  */
.inform{color:white;padding:25px 0;text-align:center;}
.loginForm{text-align: center;}
.logOut{color:#B1B3B3;font-size:18px;font-style:italic;padding-top:5px;position:absolute;text-decoration:none;}
.logOut:hover{color:white;}

There is nothing really to explain in the CSS or HTML file, this is mainly a tutorial explaining how to build the URL system.
Next add the images into the images folder that are included in the download and load the page. You should have this:

Javascript

Create the following JS files in the appropriate directory. First create file “add.js” and the second file “jquery.js” is optional, you can also load it from google with
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>.

Just make sure that you are loading version 4.x + as we will be using .submit() and, as far as I know, that was added in the new version.

In the add.js file, we will add the following.

// when ready
$(function() {
	// we will be using this later (maybe more the once) so create this function that will
	// reset the "process" box to its defaults
	function resetThings(){
		$(".process").css({"background": "red"});
	}

	// now make some variables, these will be used later

	var urlBox = $('#theLink').val(),	// the textarea default value
		submitB = $('#submit'); 		// and the submit button
	$('#theLink').focus(function(){
		if( $(this).val() == urlBox ){
			$(this).val("http://");	 	// what to put in the text box by default
		}
	});

// when we click submit on this form
$('#linkForm').submit(function(){
	// reset the process box
	resetThings();
	// remove the submit button
	submitB.fadeOut();
	// tell the user we are doing something
	$('.processingC').html('Shrinking your URL...');
	$('.process').animate({"height": "50px"}, 500);

	$.ajax({
		type: 'post', // the method will be post
		dataType: 'json', // the data type to post
		url: 'files/process/add.php', // the URL of where to post the information
		data: 'theLink=' + $('#theLink').val(), //the data to post, we just want what is in the box at this time
		// on success the response will added to the "e" so we can call it by writing e.message. You don't need to use "e"
		// you can use what you want, but make sure that if you change it you change all of the other e's to the new thing
		// The response that will will send to this will be
		// 1. If it was successful
		// 2. A message
		// 3. If we have it, the short url. We will create this response in a minuet 

		success: function(e){
			if(e.error == true){ // if no error
				$('.processingC').html(e.message); // display the message in the box at the top saying what has happened
				submitB.fadeIn(); // as there was an error, bring back the submit button
				$('.process').animate({"height": "50px"}, 3500).animate({"height": "0px"}, 1000); 	// remove the process box
																									// after giving time to see the message
			}else{ // if there was not an error, it worked!
				$('.processingC').html(e.message); // display message
				$('.process').css({"background": "green"}).animate({"height": "50px"}, 3500).animate({"height": "0px"}, 1000); // make it a nice green
				$('#theLink').val(e.shortURL); // put the URL in the box
				$('.postTo').fadeIn(); // bring up the links
				// change the size of the textbox, not needed but a nice touch
				$("#theLink").animate({"width": "450px"})

				// set the buttons
				$('.postTo .tweetie a').attr({"href": "javascript:window.location='tweetie:'+'" + e.shortURL + "' "});
				$('.postTo .twitter a').attr({"href": "http://twitter.com/?status=" + e.shortURL + " "});
				$('.postTo .facebook a').attr({"href": "http://facebook.com/sharer.php?u=" + e.shortURL + " "});
			}
		}
	}); // end of ajax
		// if we had a time out, alert saying this.
		$(this).ajaxError(function(){
			alert("THERE WAS AN AJAX ERROR, SORRY ABOUT THAT");
		});
		// IMPORTANT! So it won't go to the page, return false!
		return false;
}); // end of submit
});

Lets start on the PHP

Create a file called “config.php” inside the functions folder. This will contain the database username, password, etc. Along with a way of setting if the login is needed and the base url. The base url will be the location of where you have placed the first index.php file. On my demo page it is http://demo.alexbor.com/url REMEMBER not to include the end “/”, nothing that bad will happen, it’s just best that you don’t. Put in all the information like this:

<?php
	$dbhost = 'localhost'; 	// the host (will probably be localhost)
	$dbuser = 'USERNAME'; 	// the username
	$dbpass = 'PASSWORD'; 	// the password
	$db		= 'DATABASE'; 	// the database
							// connect to the database, if fails - die.
	$conn 	= mysql_connect($dbhost, $dbuser, $dbpass) or die("Could not connect to the database");
							// select the database
	mysql_select_db($db) or die("I couldn't find the database");
							// define the base url... E.g. http://alexbor.com
	define("BASE_URL", "http://alexbor.com" );
							// In the end we will check if a login is required to shorten a url
	define("LOGIN_REQ", false );
?>

Load this page, and if you get nothing its all good! Now the functions page, create a file “functions.php” in this functions folder. I have said what everything (that we will need at this point) does so will not go into an explanation at the bottom.

<?php
// get the config file that has all the database info
require_once("config.php");
session_start(); // we will use sessions so its best to start it here as we will be including it on all pages
// A quick way to respond to the JSON request that we will set up later.
// This will allow us to easily post if it worked, a message, and (if we have it) a short URL
function json_to_jquery($type, $message, $url){
	$replying['error'] = "$type"; // if it worked or not
	$replying['message'] = "$message"; // the message
	$replying['shortURL'] = "$url"; // the URL
	echo(json_encode($replying)); // json encode so that the JS file will know what everything means
}

function gen_short_url(){
		// find the heighest ID
	$query 	= 'SELECT MAX( id ) FROM `url` LIMIT 1 ';
			// run the query/get info
	$res	= mysql_query($query);
	$accoc 	= mysql_fetch_assoc($res);
			// grab the heighest ID and add one
	$id		= $accoc['MAX( id )'];
	$id++;
			// convert to short url code
			// the base conver will convert (when set up like we have) will convert from 1-9 then a-z
			// it is a great way to produce what we want
	$shortURL = base_convert($id, 10, 36);
	return $shortURL;

};

// this will add the values, we will give it the short/and long URL
function add_url_to_database($shortURL, $longURL){
	// create the query, and insert it into the "url" table
	$insert_query = "INSERT INTO `url` (`id` ,`short` ,`long` )
						VALUES (
						NULL ,
						'{$shortURL}',
						'{$longURL}'
						)";
	// if it did something
	if(mysql_query($insert_query)){
		// set the error to false
		$urlInfo['error'] = false;
		// set the short url
		$urlInfo['shortURL'] = $shortURL;
		// set the long url
		$urlInfo['longURL'] = $longURL;
		return $urlInfo;
	}
}

?>

Leave this and we will come back to it later. Next, create the add page that the jQuery posts to. In the process directory (as we will be processing the information) create a file “add.php”. We will add the following:

<?php
require_once("../functions/functions.php");  // get the functions file
$error = false; // set this as defalt
$longURL = mysql_real_escape_string( strip_tags($_POST['theLink']) ); // remove bad things and put it into a variable

// check if valid URL
if(!preg_match('|^http(s)?://[a-z0-9-]+(.[a-z0-9-]+)*(:[0-9]+)?(/.*)?$|i', $longURL)){
	$message = "Not a valid URL!"; // This will be what will be displayed to the user if there was a problem
	$error = true; // set an error
} else{ // it was valid
		$longURL = urlencode($longURL); // encode the url
}

// if there was no error, add it to the database
if(!$error){
	// next we will create a short url "temp" and pass that into the next function (we will create this in a second)
	$shortURL = gen_short_url();
	$urlInfo = add_url_to_database($shortURL, $longURL); // add the short/long url
}else{ 

// as there was an error, so we will say so. The short URL string is added but left blank as a value as the function requiers it
	json_to_jquery($error, $message, "");
	die();
}
// if errors
if($urlInfo['error'] || $error){
	json_to_jquery($error, "There was a problem", "");
	die();
}else{ 	// this worked so build the short url
		// the base that was set in the config file, then a foward slash, and the shortURL that was returned
	$url = BASE_URL . "/" . $urlInfo['shortURL'];
	json_to_jquery("0", "Success!", $url);  // Send this to the user via our function
}
?>

And that is it for the adding of links!
If you try it out now it should allow you to insert links into the database.

We will next deal with redirecting the users. For this we will create a “.htaccess” file on the home directory. Add the following:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1 [L]

This will re-write the URL so if you go you it will save you from needing http://alexbor.com/index.php?url=4 and instead just http://alexbor.com/4. This is all good, but we need to get the index.php file read to deal with this. Open up that file again and we will add the following to the very top of the file, above anything already in the file.

<?php

require_once("files/functions/functions.php"); // as normal, get the functions
$url           = mysql_real_escape_string( strip_tags($_GET['url'])); // get the varible "url" from the url. This will be the short url.
//echo $url; // uncomment this if you would like to see it get the value.
// if it has a string length
if(strlen($url) >= 1){
	// set a variable saying we are doing a redirect to true.
	$redirect = true;
}else{
	// if not we will load the page as normal, so set it to false.
	$redirect = false;
}
if(!$redirect) : // if we are not re-directing the page do this
// as the rest of the file here. Then at the very bottom add
?>
<html>
 ....
</html>

<?php endif; if($redirect) :  // check we are redirecting
	// get the full URL (we will set this up in a minute
	// it will take the short url that we got
	$redirect =	get_url_from_small($url);

//	print_r($redirect); // uncomment to see what we are returning

	if($redirect['error']){ // if there is a problem, say so
		echo "That URL is either no longer valid or has been deactivated";
	}else{ // if not
		$url = urldecode($redirect['long']); // decode the long url
		header( "Location:  " . $url . " " ); // redirect the user
	}
endif; //end of the redirect if.
?>

In that area above, we have used a plethora of function that are yet to exist, so we will now create them.

function gen_short_url(){
		// find the heighest ID
	$query 	= 'SELECT MAX( id ) FROM `url` LIMIT 1 ';
			// run the query/get info
	$res	= mysql_query($query);
	$accoc 	= mysql_fetch_assoc($res);
			// grab the heighest ID and add one
	$id		= $accoc['MAX( id )'] + 1;
	$id++;
			// convert to short url code
	$shortURL = base_convert($id, 10, 36);
		// if that failed, set an error
	return $shortURL;

};
// get full url
function get_url_from_small($smallURL){ // set up the function

	if(small_url_exists($smallURL)){ // this will return true or false

		$longQ = mysql_query("SELECT * FROM `url` WHERE `short`='{$smallURL}' LIMIT 1"); // find the url
		// don't need to check amount of rows, we know it exists!
		$accoc 	= mysql_fetch_assoc($longQ); // grab the row values
		if($accoc['active'] == 0){ // if it is no longer active
			$accoc['error'] = true; // set error
			return $accoc; // return this
			die(); // die
		}
		$accoc['error'] = false; // if not, set error to false

		if(get_stats_page($smallURL)){ // check if it has a + at the end of it
			$short = $accoc['short']; // if it does we get the short url from that array
			$accoc['long'] = BASE_URL . "/files/stats/" . $short; // and overwrite the long url to this
			return $accoc; // now return this array
		}else{
				user_clicked_link($accoc['id'], $accoc['clicks']); // add one to the clicked number, we are passing the amount of clicks to save from doing a another SQL query, and we are passing the ID so we know what we are doing.
				return $accoc; // return
		}

	}else{ // it does not exist
		$accoc['error'] = true; // set an error
		return $accoc;
	}

}

function add_url_to_database($shortURL, $longURL){
	$insert_query = "INSERT INTO `url` (`id` ,`short` ,`long` ,`addedByID`)
						VALUES (NULL ,
						'{$shortURL}',
						'{$longURL}',
						'0' )";
	if(mysql_query($insert_query)){
		$urlInfo['error'] = false;
		$urlInfo['shortURL'] = $shortURL;
		$urlInfo['longURL'] = $longURL;
		return $urlInfo;
	}
}

// check that a value exists
function small_url_exists($smallURL){													// this will take the small url
	$existsQ = mysql_query("SELECT * FROM `url` WHERE `short`='{$smallURL}' LIMIT 1");	// run a search to find it
	$exsitsRows = mysql_num_rows($existsQ);												// check amount of rows
	if($exsitsRows == 0 ){ 																// if there are 0 it was not found
		return false;
	}else{
		return true;
	}
}

function get_stats_page($shortURL){ // here we check to see if a short url had a + at the end
$shortURL = urlencode($shortURL); // encode as URL's with +'s get changed into spaces previously.
	if(preg_match('/([+])$/i', $shortURL)){ // check that it contains a + once at the end
		return true;	// it does
	}else{
		return false;	//it does not
	}
}

function user_clicked_link($id, $clicks){ // this will add a click number
	// if user is not a bot
	if( !botCheck() ){
		$clicks = $clicks +1; // add one to the amount of clicks
		$ipAdd 	= $_SERVER['REMOTE_ADDR']; // get the IP address
		$tUnixTime = time(); // get the time
		$timeStamp = gmdate("Y-m-d H:i:s", $tUnixTime); // put it into a valid (gmt) time stamp
		$updateQ = "UPDATE `url` SET
					`clicks` = '{$clicks}',
					`lastIP` = '{$ipAdd}',
					`lastClicked` = '{$timeStamp}'
					WHERE `id` ='$id' LIMIT 1";
		mysql_query($updateQ);// update to the new values
	}
}

// check for bots
function botCheck(){
	// an array containing all the names of the most popular bots
	$botlist = array("Teoma", "alexa", "froogle", "Gigabot", "inktomi",
	"looksmart", "URL_Spider_SQL", "Firefly", "NationalDirectory",
	"Ask Jeeves", "TECNOSEEK", "InfoSeek", "WebFindBot", "girafabot",
	"crawler", "www.galaxy.com", "Googlebot", "Scooter", "Slurp",
	"msnbot", "appie", "FAST", "WebBug", "Spade", "ZyBorg", "rabaz",
	"Baiduspider", "Feedfetcher-Google", "TechnoratiSnoop", "Rankivabot",
	"Mediapartners-Google", "Sogou web spider", "WebAlta Crawler","TweetmemeBot",
	"Butterfly","Twitturls","Me.dium","Twiceler");
	// foreach of the names, see if the user is one of them
	foreach($botlist as $bot){
						/// get them
		if(strpos($_SERVER['HTTP_USER_AGENT'],$bot)!==false)
		return true;	// Is a bot
	}
		return false;	// Not a bot
}

I have commented throughout explaining in detail what each function does, so have a read through that. This is now good to go! Try it out and see what happens. You can now shorten URL’s and also go to them.

Logging in/out

Next, we will do the login bit. For this we will need, a username, md5 hashed password, an API key and email. We will deal with adding users at a later time but for now, add them in manually. To see what an md5 password and API key looks like, create a new php file and use what follows:

<?php
	echo "Your password is";
	echo md5("password") . "<br />";
	// create a API key that will be individual and hard to crack.

	$toHash = time(); // the current time
	$toHash .= rand(0, 999999); // a random number
	$tohash .= $_SERVER['REMOTE_ADDR']; // the IP address of the user

	$toHash2 = rand(0, 999999);
	$toHash2 .= "alex@alexbor.com"; // your email
	$hash1 = md5($toHash); // md5 the first hash
	$hash2 = md5($toHash2);  // md5 the second hash
	echo "Your API key is: " . $hash1 . $hash2 . "<br/>"
?>

Select both of those values and inset them into the database along with you desired username/email with the following SQL query. Note: Make sure the username and password are over 6 characters or over and the username has no white space.

INSERT INTO `urls`.`users` (`id` ,`username` ,`password` ,`email` ,`apiKey`)
VALUES (NULL , 'USERNAME', 'PASSWORD', 'EMAIL', 'API KEY');

That should be the only time we add a user manually, we will build a way to add them ourselves from a nice view.

We now have a users, so we will create a way to login with the username and password above.

In the index page we will add the following in the very top under where we are requiring our functions file.

$loggedIn = $_SESSION['loggedIn'];
$username = $_SESSION['username'];

Next find the div with an ID of “strip”, and replace it with this:

<div id="strip">
	<div id="stipWrap">
		<!-- If we require a login AND the user is not logged in we will load the login form -->
		<?php if( (LOGIN_REQ) && ($loggedIn != true) ){ ?>
				<h1 class="inform">Please login with the form below:</h1>
				<form class="loginForm" action="files/process/login.php" method="POST">
					<label for="username" class="label">Username:</label><br />
					<input type="text" id="username" class="smallInput" name="username"><br />

					<label for="password" class="label">Password:</label><br />
					<input type="password" id="password" class="smallInput" name="password"><br /><br />
					<input type="submit" value="Login me in!" />
				</form>
		<!-- else, if we don't require a login, load the submit form -->
		<?php }else{ ?>
				<?php
					// if you are logged in, display a logout URL.
				if($loggedIn){echo "<a href='" . BASE_URL . "/files/process/logout.php' class='logOut'>Logout " . $username . "?</a>"; }
				?>
				<form id="linkForm" class="" action="files/process/add.php" method="post">
					<input value="Make me short..." type="text" class="smallInput" id="theLink" name="theLink"/>
					<input type="submit" id="submit" value="Shorten" />
				</form>		

				<ul class="postTo">
					<li class="tweetie"><a href="">Post With Tweetie</a></li>
					<li class="twitter"><a href="">Post To Twitter</a></li>
					<li class="facebook"><a href="">Share On Facebook</a></li>
				</ul>
		<?php }; ?>
	</div>
</div>

That will check if the defined value of “LOGIN_REQ” is true or false, it’s false and the user is not logged in, load the login form. If not then we have aloud public access to this url shortener. If you try it out when changing the value of LOGIN_REQ in the config page you will see it change. We will build the login system.

Logging in

In the process folder, add two new files “login.php” and “logout.php”. Then open the login file.

<?php
require_once("../functions/functions.php");
$username = mysql_real_escape_string( strip_tags($_POST['username']) ); // get the posted username
$password = mysql_real_escape_string( strip_tags($_POST['password']) );	// get the posted password
if(strlen($username) < 5 ){ 	// if the username is above 5 char
	$error = true;			// if its not set an error
	$errorMessages['username'] = "Please write a username"; // what the error is
}
if(strlen($password) < 5){ // same with password
	$error = true;
	$errorMessages['password'] = "Please write a password";
}

if(preg_match("/ /", $username)){ // check that the username has no white space.
	$error = true;
	$errorMessages['spaces'] = "Username cannot contain white space";
}

if($error){ // if there is an errir
	foreach( $errorMessages as $errorMessage ){ // for every error message
		echo "Problem: " . $errorMessage . "<br />"; // echo it out
	}
}

if(!$error){ // if no error
	$password = md5($password); // hash the pass, we do this know as it generates a 32 char varible. Even if it was left
								// empty
	if(check_username_and_password($username, $password)){ // if we find the user (will create this function)
		// found user
		// set sessions
		$_SESSION['loggedIn'] = true;
		$_SESSION['username'] = $username; // set a session
		header("Location:  " . BASE_URL . "/");  // redirect back the the index page
	}else{
		//didn't find user
		echo "Sorry, no user with that username/password combo was found!";
	}
}?>

And now the logout page. Inside the logout file we create earlier write:

<?php
require_once("../functions/functions.php");
setcookie( session_name(), '', time() - 100); // if there is a session cookie make it expire it from the user's pc
session_destroy();	// destroy the session on our server
header("Location:  " . BASE_URL . "/"); // redirect back to index page
?>

Almost done, we now just need to add the final function to check if the user was found. Open the functions file at the bottom add:

// DOING THE LOGINS
function check_username_and_password($username, $password){
	$ucheck = mysql_query("SELECT * FROM `users` WHERE `username`='{$username}' AND `password` ='{$password}' LIMIT 1");
	$ucheckRows = mysql_num_rows($ucheck);
	if($ucheckRows == 0 ){
		return false;
	}else{
		return true;
	}
}

Finished

That should now be the end of it for. From the plan I set above:

1. Adding URLs done
2. Tracking (but not a nice view) of URLs done
3. Redirections (of both adding a Ò+Ó to the end of a URL and normal redirecting) done
4. AJAX system for adding a new URL done
5. Adding IP address done
6. Not to include bots done
7. Log in/out done
8. Redirecting visitors done

You can download completed files from here and have a read through them. You may not be able to see the .htaccess file though, so you will have to remake it on the server to get this to work.

Related posts:

1. Twitter URL Shortener: Part 2
2. Building a Simple PHP Mailing List
3. Creating an Ellipsis in PHP

I think I speak for a number of developers when I say that I strive to have my code readable and easy to maintain. This is way easier said than done as many of you know. The most familiar way of doing this is using the Model View Controller (MVC) concept.

While I see the point in the above, I do sometimes struggle with its practicality. For example, do I really need to use CakePHP, Symfony, CodeIgniter for a simple PHP based site? I agree that frameworks can be handy for larger sites, but the majority of my sites are on the smaller side.

This is the reason that I will teach you a simple way to separate your models/views with very little OO logic, and not using a framework.

Folder Structure

Start by creating a folder structure using the following:

MySQL Database Class (db.class.php)

<?php

// best practice is naming the class the same as the first part of the filename
class DB {
	var $db; // property of our class that will store our DB connection

        /*
            This function loads as soon as the class is instantiated.  Eg. $db = new DB();
            PHP5 uses __construct and PHP4 uses a function the same name as the class.  Eg. function DB()
        */
	function __construct()
	{
               // change the following credentials to match your server
		$this->db = mysqli_connect('localhost','username','password','database') or die('Unable to connect to the MySQL server.');
	}
}

NOTE: Make sure you have created a database on your MySQL server and have changed it in the above class.

Create the Products Table

Now run the following SQL query on your database using any method you wish (phpMyAdmin, SSH, etc…)

CREATE TABLE IF NOT EXISTS `products` (
  `product_id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `description` text NOT NULL,
  PRIMARY KEY (`product_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

This creates the following fields: product_id (PRIMARY KEY), title, description, image

Insert Product Data

Do the same with the following:

INSERT INTO `trailers_products` (`product_id`, `title`, `description`) VALUES
(1, 'Hosting', 'Hosting Description'),
(2, 'Web Design', 'Web Design Description'),
(3, 'Programming', 'Programming Description'),
(4, 'SEO', 'SEO Description'),
(5, 'iPhone Development', 'iPhone Development Description');

This has inserted a couple sample products so we can see our result later on.

Product Class (products.class.php)

<?php

// include our dababase class we just created
include 'db.class.php';

/*
	NOTE: This class will extend the class we created previously

	This means that our $db variable will be accessible for our queries ($this->db)
*/
class Products extends DB {

	/*
		Simple function that will get all our products from the db and return an array of objects
	*/
	function getProducts()
	{
		$query = "SELECT product_id, title, description
				  FROM products
				  ORDER BY title";
		$result = mysqli_query($this->db, $query);

		$data = array();
		while( $row = mysqli_fetch_object($result) )
		{
			array_push($data, $row);
		}
		return $data;
	}
}

Pulling It All Together (index.php)

<?php
	// include our products class
	include_once 'classes/products.class.php';

    // instantiate our class
	$ProdModel = new Products();

    // call our user defined function which returns an array of products
    $products = $ProdModel->getProducts();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Brenelz Web Solutions - Products</title>
</head>

<body>

<h1>Products</h1>

<?php foreach( $products as $p ) :  ?>
    <h2><?php echo $p->title?></h2>
    <p><?php echo $p->description?></p>
    <hr />
<?php endforeach; ?>

</body>
</html>

Now open up index.php in your browser and see all the products that have been entered into the database!

Thoughts?

Related posts:

1. How-To MySQL Table Joins
2. How to Create a Simple API with PHP and MySQL
3. PHP CodeIgniter Validation

CDNs just a little while ago seemed like such a complicated topic that only large fortune 500 companies could use. Today they are better understood and more affordable for small businesses.

I was lucky enough to be contacted by MaxCDN who was willing to sponsor my website. I was thrilled as they mentioned they sponsor many well known blogs such as Web Designer Depot, and Mashable. Anytime I get mentioned with those blogs it is a nice compliment.

I suggest heading over there and seeing what they can do for you!

What is a CDN?

CDN stands for “Content Delivery Network” and is described by Wikipedia.org as:

A CDN is a system of computers containing copies of data, placed at various points in a network so as to maximize bandwidth for access to the data from clients throughout the network. A client accesses a copy of the data near to the client, as opposed to all clients accessing the same central server, so as to avoid bottleneck near that server.

Via NetBenefit.com

Why Use a CDN?

The main reason someone would use a CDN is to boost site loading times, and allow for quicker file downloads by your users. Yahoo states that moving static content to a CDN can improve response times by up to 20%!

As well with a company like MaxCDN setup is minimal and is a lot more cost effective than it used to.

Wait, does it help Google Rankings?

This is actually my main point that should peak your interest. Google now depends on loading speed a whole lot more than they used to.

Putting your site on a CDN can only help you get to page 1 of the SERPs.

For example, my winnipeg website design company is climbing up the ranks for the keyword “Winnipeg Web Design” and I attribute most of it to now being on a CDN.

Related posts:

1. Google's New Canonical Option
2. Google PageRank Updated Dec. 30
3. Google Makes Changes: A Lot Like Bing?