CakePHP URL Shortener Service Tutorial

CakePHP URL Shortener Service Tutorial

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" 
<html xmlns="" xml:lang="en" > 
	<title> | Shorten Like Its Hot</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<?php e($html->css('style.css')); ?>
	<div id="container">
		<div id="page">
			<div id="logo"></div>
			<div id="contentarea"><?php echo $content_for_layout; ?></div>
			<div id="push"></div>
	<div id="footer">It's Copyright Amigo! <?php echo $html->link('', ''); ?> 2009</div>

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!

Posted by voidet

Categorised under CakePHP
Bookmark the permalink or leave a trackback.


  1. i have never seen such a comprehensive tutortial on this , good on yah, i’ll buy you a paypal beer any day 🙂

    August 26, 2009 @ 3:07 pm
  2. hendrik

    great work, thank you!

    August 31, 2009 @ 5:39 am
  3. Awesome tutorial man! Thanks allot

    December 16, 2009 @ 4:25 am
  4. nice post..what about stat a.k.a link tracking? it will be great if u include it.
    i bake mine at for learning purpose.

    April 30, 2010 @ 7:43 am
    • VoiDeT

      That would be quite easy, just depends how much information you would like to store.
      For example you could simply increment a count field in the row for that entry.
      Or you could make a completely new table in the database that would log each view/click and the according information, like IP, datetime etc.

      April 30, 2010 @ 9:00 am
  5. The demo file not work, url not found

    May 23, 2010 @ 3:30 am
  6. Hi, i don like very much the function getFilename. Why dont you try using a function the transform the id of the link into a string with numbers and letters?

    pseudocode for add a link;
    // find link, if not in database insert new link
    // link_shorted= base_convert($link_id, 10, 36);
    // return link_shorted

    pseudocode for get a encoded link;
    // link_id= base_convert($link_code, 36,10);
    // search link by id
    // redirect

    if you want even shorter link you could use this functions;

    function any2dec( $num) {
    $index = substr( “0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ”, 0, $base );

    $out = 0;
    $len = strlen( $num ) – 1;
    for ( $t = 0; $t = 0; $t– ) {
    $a = floor( $num / pow( $base, $t ) );
    $out = $out . substr( $index, $a, 1 );
    $num = $num – ( $a * pow( $base, $t ) );
    return $out;

    July 3, 2010 @ 4:11 pm
    • VoiDeT

      Exactly right. This is why at the beginning I said it wasn’t the best way to do it. But for the sake of this intermediate tutorial i thought using those baseencodes would be far beyond the scope of the tutorial. I did find similar functions on that would be used to encode/decode ids or unique identifiers. But thanks for your observant comments!

      July 3, 2010 @ 4:14 pm
      • If I load the website in chrome it doesn’t show all images,also when I click on those images they redirect me somewhere else please can you check it.

        And is there any option to post a file with code inside of it that is perfect.

        November 26, 2015 @ 10:37 pm
  7. >>Exactly right. This is why at the beginning I said it wasn’t the best way to do it.

    upss, i didnt read anything i just read the code, my bad!

    July 3, 2010 @ 4:19 pm
    • VoiDeT

      No problem at all! Thanks for your input 🙂

      July 3, 2010 @ 4:21 pm
  8. Hi all!

    Thanks for that great tutorials. the thing that make me a bit uncomfortable is what will the effect of making url shortened on the site in the term of speed. and talking about dynamic links how will you get shortcode will model association useful in that case. one more question in the routes.php you have write

    Router::connect(‘/:shortcode’, array(‘controller’ => ‘shorten’, ‘action’ => ‘redirectUrl’), array(‘pass’=>array(‘shortcode’)));

    it will redirect whenever you write anything after ‘/’ for rss feed and xml link will it don’t cause problem?

    March 21, 2011 @ 10:02 pm
  9. Hey man … everytime when i am going to open your page my virus protection pops up and displays an exploit : Blackhole Exploit Kit (type 2170) which comes from

    and second one from

    more information on:


    June 5, 2012 @ 6:27 pm
  10. VoiDeT

    @kapil – Sorry the first part I do not understand your english. The second question is true. It will capture all urls with /url. But if you don’t want that, put your urls above that and use shortcode as the last catchall.

    June 5, 2012 @ 7:03 pm
  11. Hi there, I read your blog on a regular basis. Your humoristic style is witty,
    keep up the good work!

    January 4, 2013 @ 12:54 am

8 Trackbacks

  1. […] CakePHP URL Shortener Service Tutorial • Jotlab […]

  2. […] Jotlab has a post on going from clean install to working URL shortener in 8 simple pages. […]

  3. […] CakePHP URL Short­ener Ser­vice Tutorial […]

  4. By 9 Awesome CakePHP Tutorials | DevMoose on June 27, 2010 at 12:02 am

    […] CakePHP URL Shortener Service Tutorial […]

  5. […] 2010 por eugenio85 Etiquetado: acortador, cakephp, PHP, tutorial, url shortener Despues de leer este articulo decidi escribir mi propio tutorial, mientras pensaba en como escribir note que en meneame utilizan […]

  6. […] sidebar */ google_ad_slot = "1113860990"; google_ad_width = 300; google_ad_height = 250; 1. CakePHP URL Shortener Service Tutorial by JotLabIn this tutorial I will be creating this website using CakePHP 1.2.4, because it rocks, […]

  7. […] View The Tutorial :  CakePHP URL Shortener Service Tutorial […]

  8. By Frameworks: muchos recursos para comenzar con CakePHP on December 28, 2012 at 7:07 am

    […] Cómo hacer un acortador de URL’s con CakePHP. […]

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">