If you have just woken up from a 10 year long coma, you might realise that the internet has been dumbed down to 140 characters and services that offer “URL Shortening” are quite widely used. Well today, coma awakened or not, I will be writing out a basic tutorial which will give you an understanding of just how to create a service like bit.ly or owl.ly to shorten URLs so you can insert them to fit within your 140 chars max tweets.
In this tutorial I will be creating this website using CakePHP 1.2.4, because it rocks, and you will think it rocks too if you haven’t used it yet! If you are unfamiliar with CakePHP please jump into it now by checking out either of these two books: Beginning CakePHP by Apress & Free CakePHP Book by Matt Curry! So let’s begin!
Now this isn’t going to be a tutorial into all the joys and wonders of CakePHP. There are simply too many to list, my database wouldn’t be able to hold so much information. However if you are new to CakePHP, all that this tutorial requires is that you have successfully set up CakePHP, wherever you may prefer. There are plenty of tutorials and guides on how to get CakePHP set up on the web. I did a quick search and found this one to be quite good, but there are plenty more out there. The most common newbie gotcha I find is making sure the .htaccess files are uploaded correctly. But with all that said and done! Let’s get going with our URL shortening website!
Final Source Files: app.tar.gz
Images & CSS: imagescss.tar.gz
Demo: http://jotlab.com/tutorials/url/
*please note that the random string generation will lead to collisions. This is a beginner to intermediate level tutorial, so teaching about base converting is out of the question! Well for me!*
If your CakePHP set up is correct you should be seeing a screen similar to:
Congrats! All good! But now let’s make our own style! First things first! We need to pimp our ride out! What we will do now is create a default layout file. A layout file, if you are new to CakePHP, is a file that acts as a parent style page, so you can load other pages or elements within it. For example, a Layout file might include your header, your footer, your contact information, anything that would be displayed on alot of pages that you would rather include in one file, as apposed to duplicating across multiple files.
Navigate into the app folder. This is where all the magic happens. Here are basically all your controls, the previous folder, cake, was the engine. Now checkout the views folder and then go into layouts. Make a blank file called default.ctp. After you have done this, go back to your browser and refresh! Oh no! All the fancy formatting has disappeared. That is because you overwrote cake’s default layout, which was to show you if you had CakePHP properly installed. What you might notice however is text on the screen like:
This is simply debugging information, of which you will see more clearly when we begin to work with the database. Don’t pay too much attention to it at the moment. Open up the default.ctp file you just created and dump this code in and save:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Home.ly | Shorten Like Its Hot</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <?php e($html->css('style.css')); ?> </head> <body> <div id="container"> <div id="page"> <div id="logo"></div> <div id="contentarea"><?php echo $content_for_layout; ?></div> <div id="push"></div> </div> </div> <div id="footer">It's Copyright Amigo! <?php echo $html->link('Jotlab.com', 'http://www.jotlab.com'); ?> 2009</div> </body> </html>
If you look at your page again it will appear to be quite ugly! But fear not. I have included some images and a css file to go along with it! Where do you put these files? In the webroot folder! The webroot folder acts much like any other folder under an apache server. If you make a folder you can navigate to it with its name in the url. But for example if you try to navigate to your site and app/ you won’t get what you might be expecting! CakePHP has cleverly set up url rewrites to make things both pretty and secure(r).
So with the source zip file provided earlier, upload the style.css file to the css folder in the webroot folder and the images to a new folder called simply images, also in the webroot folder. If you did everything correctly, then you should now be looking at something like:
Shock! The CakePHP stuff is back, but without any of the awesome formatting before! This is because the default controller action is still being called, and being used via the $content_for_layout variable. This variable is used within layouts, it basically says, insert the view code in here. It will come to you, as we’re now going to set up our controller and our view, ready to accept a url!
2 trackbacks/pingbacks
Comments About CakePHP URL Shortener Service Tutorial
// 3 comments so far.
Elizabeth Gibbons // August 26th 2009
i have never seen such a comprehensive tutortial on this , good on yah, i’ll buy you a paypal beer any day
hendrik // August 31st 2009
great work, thank you!
JP // December 16th 2009
Awesome tutorial man! Thanks allot
You can follow any responses to this entry via its RSS comments feed. You may also leave a trackback by clicking this link.