If you are one of these people please comment below, and contact me through the contact form.

Related posts:

1. Want to share your web development knowledge?
2. Networking
3. Giveaways Galore as Brenelz.com is Re-Launched!

SEO

The best description of SEO as a business function is “targeting”. It’s a major commercial asset. SEO is integral to business performance on multiple levels. It’s an essential part of website design, and it must be well organized.

The internet is now everybody’s shopping guide. It’s also where people go, quite rightly, to check out their purchases for services, materials, and make comparisons between businesses. SEO is the driving force behind their web searches.

This usually isn’t a Do It Yourself option, because of the need to create strong search engine profiles and page rankings. The SEO elements in your website design really should be overseen by marketing professionals.

Web design

Web design and presentation is a business essential. Without getting too technical, website design breaks down into several critical areas:

• Layout: The best website layout is ultra-useful, easy to navigate, and instantly comprehensible to users. Every part of the site is self explanatory for browsing. Many top performing websites are popular simply because they’re so easy to use.
• Graphics and design values: Absolutely essential, great graphics do attract users. They’re interesting, they’re appealing, and they include the information people need.

• Site functions: The site must be able to deliver what your clients want. Things like forms, contacts, and client support all need to be integrated in a good website design.

Content and information values

All information on your website must be useful to your clients. It must have interesting content which is of value to them. How often have you seen highly complicated, basically unhelpful content on a commercial website? It’s an actual client-repellent.

The more useful the information, the better your site will perform. Do not include any ambiguous, vague information, or statements which could be misleading.

Advertising

Pay Per Click (PPC) advertising provides a full suite of services most people don’t even suspect:

• Cost Per Action (CPA) measure of clicks, defined as a dollar value relative to “conversions”, i.e. sales. This is an actual and very reliable measure of site performance, and your CPA should always be lower than your profits.
• PPC provides “conversion tracking” monitoring which is a measure of the types of business actions people take on your site, like sales or sales leads.

PPC gives you a full business report about your clientele, levels of business activity, and measures the entire process of website performance in detail.

Social media marketing

If the internet is the world’s shopping guide, social media are the world’s chat lines. The social media markets are highly discretionary, but also highly motivated. There are literally hundreds of thousands of niche markets and groups on Twitter, Facebook, and other sites. Establishing a presence for your website in social media can be a truly great business move.

Related posts:

1. Do you have Twitophobia?
2. SEO Theory 101: Tips, Tricks, and Tools
3. Usability: A forgotten aspect of Web Design?

Copyright CSS3 Pie

Have any of you tried CSS3 Pie? If not I am going to tell you a bit about it.

Recently I have been using it on some projects. For the most part it works really well but at other times it is very buggy.

CSS3 Pie’s slogan is the following

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

I like the idea behind the fix because it doesn’t fix one specific IE problem (border-radius, rgba, etc..) but it fixes all of them by allowing us to use normal, valid CSS rules without some weird syntax.

Visit CSS3 Pie

Try it out for yourself, and leave a comment with your thoughts

Related posts:

1. Creating Columns using CSS3
2. PNGs, PNGs, and more about PNGs
3. Serious Security Flaw in IE

Setting up workspace -

• Basic knowledge of php, html and css.
• Local server installed on your PC.

Step 1

First of all create the project folder on your server and inside it create a php file.

Step 2

We will start off by creating a rather basic skeleton of our calendar in html. Our structure will consists of a header for displaying month and navigation , table for displaying the month dates. All of this will be wrapped inside a div with ‘calendar’ class which will be our reference for styling it later on.

<!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" />
<link rel="stylesheet" type="text/css" href="style.css" />

<title>Calendar</title>
</head>
<body>

<div class="calendar">

<div class="calendar-header">Month </div>

<div class="calendar-content">

<table>
<thead>
<tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thurs</th>
<th>Fri</th><th>Sat</th></tr> <!-- Week Format   -->
</thead>
<tbody>

<!-- Table Dates  here  -->
</tbody>

</table>

</div>

</div>
</div>

</body>
</html>

Note: We could have used the table directly instead of wrapping it inside of div with ‘calendar-content’ class, but it’s a good practice to wrap the content inside a widget div, so if you need add some data like notification inside the calendar, you don’t have to restructure the plugin again.

Step 3

Now since we have created a basic structure, let’s move on to actually start adding the logic to it. First we will initialize day, month and year variables that we will use later in the generation logic.

<?php

$year = date('Y');
$day = date('j');
$month = date('n');

?>

Step 4

Now we will work on the header of the calendar which has the current month name displayed along with the navigation for next or previous month. For navigation we will send the navigation details using GET method to our php file.

<div class="calendar-header">
<a href="index.php?nav=prev&m=<?php echo $month; ?>"> &laquo; </a>
<?php echo date("F",mktime(0,0,0,$month,1,$year));  ?>
<a href="index.php?nav=next&m=<?php echo $month; ?>"> &raquo; </a>
</div>

We will use anchor tags with link to the php file itself ( I am using index.php ) along with the navigation type that is next or previous and current selected month. In between the navigation we will echo the current month.

Step 5

Now since we have added the navigation controls, we need to alter the month variable. That is if the Get variables are set, we need to alter the calendar in respect to that values. So the earlier php code now looks like -

<?php

$year = date('Y');
$day = date('j');

if(isset($_GET["nav"]))
{
	if($_GET["nav"]=="next")
	{
		$m = $_GET["m"];
		if($m==12)
		$m =0;
		$month = $m+1;
	}
	else
	{
		$m = $_GET["m"];
		if($m==0)
		$m =12;
		$month = $m-1;
	}
}
else
$month = date('n');

?>

First we will check if the value of the get variables are set using the isset() function, if they are we will check the type of navigation and increment or decrement the month variable accordingly. If get variables are not set it will display the current month. Also we have little validation to check that if the values are always within 1 -12 range for months.

Step 6

Now are going to create a php code block inside the table’s tbody tag. Where we will add the calendar date blocks. So to start with we will initialize the variables that we will be needing to implement the logic.

<?php
$first_Day = date("w", mktime(0,0,0,$month,1,$year));
$totaldays = date("t",mktime(0,0,0,$month,1,$year));
$temp = $first_Day + $totaldays;
$weeksInMonth = ceil($temp/7);
$counter = 1;
$flag = true;
if($month!=date("n"))
$flag=false;

?>

$first_Day returns the index of the first day of the month, total days count the total days for our loop to run. temp is the variable we will have total days of the table grid plus first day index which is required for our nested loop that we will use later. Next we calculate weeks on the month and initialize a counter that will print the dates. Also we have created a variable to check that the calendar is generating the current month or not for highlighting today’s date.

Step 7

Now we are going to implement the nested loops to create a grid of dates for our calendar table.

for($i=0;$i<$weeksInMonth;$i++)
{
	echo "<tr>";
	for($j=0;$j<7;$j++)
	{
		if(( $counter<=$temp) && ( ($counter + $totaldays) - $temp >0) )
	    {

			echo "<td><p";
			if(( $counter - $first_Day )==$day&&$flag==true)
			echo " class='current-bg'";
			echo ">".( $counter - $first_Day )."</p>";

		}
	   else
		 echo "<td>";

  echo "</td>";
		 $counter++;
	}
	echo "</tr>";

}

First we will loop through the total number of weeks, nested loop will run till 7. Here 1 week represents 1 row of the table, so we will echo the tr tag first and after the loop we will close it. Inside the loop since it runs of total days of all weeks so we will check the condition that counter variable is less than the total days of the month plus the starting date and also we will check that difference of counter plus totaldays variable and temp is greater than zero.

Then we will print out the table cell with conditional checking that if it is current month and current day then add the class current-bg which we will style later to highlight today’s date and then print the current date that difference between $counter and $first_Day, we have done this because counter variable runs from 0. Finally if the condition is not met print an empty table cell.

Note :

• If you are getting confused that temp and counter variable will have same values, they don’t. temp is sum of position of first date on the month and total no of days. For example for August $temp will have 31 value since starting day is at 0 position but counter will run till end of the calendar that is 35.
• We have also validated negative value in the loop because counter runs from 0 and we have to print the values after a specified postion, which is checked by that condition.

Step 8 So for our calendar looks like -

Though we have the functionality , but it is rather ugly looking and there is no way to tell what is today’s date. So we will style it up now.

Step 9

Now create a syle.css file in the project directory and link it to our main file. We will use gradients as background images, for that I have already sliced them, they are available in the source code. Add the following code to it -

* { margin:0;padding:0; }

.calendar { background:#f2f2f2; width:601px; margin-left:auto; margin-right:auto; margin-top:20px; border:1px solid #CCC;}

.calendar .calendar-header { background:#333; color:#e2e2e2; font-family:Georgia, "Times New Roman", Times, serif; padding:10px; text-align:center; font-weight:bold;  }

.calendar table { border-collapse:collapse; width:100%; }
.calendar .calendar-header  a { text-decoration:none; color:#fff; }
.calendar .calendar-header  a:hover { text-decoration:underline; }

.calendar table thead th {  text-align:center; border-bottom:1px solid #999; padding:8px 4px; font-family: Arial,sans-serif; font-weight:100; text-shadow:#fff 1px 1px 0px; }
.calendar table tbody tr td p{ background:url(i/calender-default.png) repeat-x;    border: 1px solid #fff; border-right:1px solid #d6d6d6;  font-family: Arial,sans-serif;  border-bottom:1px solid #d6d6d6;  width:74px; height:70px; display:block;  text-align:center;padding:5px;  text-shadow:#fff 1px 1px 0px;   -moz-border-radius: 7px; -webkit-border-radius: 7px;  }

First we have added a mini reset, then style our parent div that has calendar class. First we will style the parent container, then the header and finally the table. Now our calendar looks like -

But still we don’t know the current date and need some effect on hover. So we will add the final touch to it -

.current-bg { background:url(i/current-bg.png) repeat-x!important; border:1px solid #0CF!important; }
.calendar table tbody tr td p:hover { background:url(i/hover-bg.png) repeat-x; border:1px solid #3F9;  }

Add we are done, ready to used in projects, event widgets etc.

Download

Related posts:

1. Creating Semantic CSS Navigation
2. Implementing paging using PHP and jQuery
3. Snazzy CSS Double Border Effect

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!

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. Reading XML Using Flash
3. Google Launches a New Font API

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.

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. Snazzy CSS Double Border Effect
2. CSS Rounded Corners
3. How to Create a Simple API with PHP and MySQL

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

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

Related posts:

1. CSS3 Pie
2. Default and configuration objects with JavaScript
3. JQuery Custom Plug-in: Equal Height Columns

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. CSS3 Pie
3. Google Feedburner has Rough Start…

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. Creating Columns using CSS3
2. Tired of SIFR? Get a Facelift!
3. Screencast Ideas

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?

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

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?
2. How dependant are you on social networks?
3. 2009 – The Year We Get Social?

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

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

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

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

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