yop.la, my URL shortener coded in 3 hours (with breaks)

Posted on September 16, 2010

It was on my todo list for a while: “code a URL shortener“. And yesterday, I don’t know why, I decided it was the day to definitively check this line off. Here is the story of a guy who wanted to code a service in one small afternoon.

tldr: it took around 3 hours to code it all (it took a little more afterwards actually when mates pointed out CSS bugs in IE) and you can see it at http://yop.la.

What to do today?

I woke up at around 1pm this wednesday (I know I know, my rythme of life is a disaster). I went to the kitchen to serve myself the usual bowl of cereals, and switched on TV. What to do today – did i ask to myself? Hmm, I did all the urgent work for the current projects, I redesigned my blog … now what? Ah, there is this line at the bottom of my todo list that hangs for months. Pff, how much would it take, I’m not kind on loosing too much time on a project that won’t get me a penny? Oh, I’m sure it won’t take too much, let’s see if I can do it in one afternoon hehe.

Deal? Deal! Let’s play 🙂 Below, the table of contents:

  1. Phase 1: thoughts and analysis
  2. Phase 2: design the database
  3. Phase 3: build an architecture
  4. Phase 4: finally write the pages
  5. Phase 5: have a coffee
  6. Phase6: put it online and show to mates

Phase 1: thoughts and analysis

Every project must start by an analysis phase, even small ones. That’s the way I’ve been working for years and I think it’s really the way to go. Ok, it won’t take long, let’s just answer these few questions: what does the site do? what are the objects? what’s the behaviour of the site? what pages do we need? what layout for those pages? Ready, go!

What does the site do?

It turns URLs in shorter URLs, in order to share shorter links on social networks such as twitter and co, where the length of words matters. Optionally, it counts the clicks on this link.

What are the objects?

I commonly use UML to analyse my projects. And there is nothing better than a sheet of paper and a pen for that. Quickly, I can see two objects (or two tables): an object LINK, and an object CLICK. Actually, it’s all what we need. Hop let’s draw this…

What’s the behaviour of the site?

Ok so, you give your URL, and you want the site to give you a shorter URL. Well, I guess I need a form to do that, easy :-). And how should I validate the form then?

  • the link should be more or less valid (why using database space for bullshits?)
  • the link shouldn’t be mapped twice in the database. If a submitted link is already present, it will just return the actual short URL without creating a new one)

It must redirect to the correct URL when the short URL is called, and it must count the clicks, and… that’s it, we don’t need more for a beginning.

What pages do we need?

Well, let’s see:

  1. the home page which would also display the only form of the site
  2. the page that processes the form
  3. the page that redirects URLs (like http://yop.la/cMz would redirect to https://cyrilmazur.com/about#resume)
  4. and let’s say an about page, so that I can explain my approach a little

Ok 4 pages, I’m not going to die for that hehe

What layout for those pages?

Hmm, I just need to worry about the home page and the about page. The two others are scripts only and don’t display any HTML. Ok so the about page is not very big, I just have to write some content like why I did it, etc … Fuck it.

The home page however needs more reflexion. Ohf. What’s the most important? The form! It must be at the centre of the page. Let’s put a big title, and a sub-title to slightly say what’s the purpose. Just below, let’s put the big textfield and the subit button … Hmm there we are, everything we need in a not too illogical manner. I buy it!

Layout sketch for the home page

Phase 2: design the database

The most important part of a website: the data! Well, with only two tables, it’s quick. URLs are varchars with a length of 256 (should be enough), keys are 10 chars long (let’s prepare for a future buzz, who knows? But as I’m the only one to use it so far, even 3 chars will be far enough), date fields are datetime and IPs are 15 long varchars.

Let’s link the two tables with a foreign key (clicks belong to a link), and we’re done.

Phase 3: build an architecture

Ok for the 3 hours, but I must confess I didn’t write EVERYTHING from scratch. Who does anyway? (well, those who do are stupid) I already have my own little framework, with a URL Rewriting system, classes for database operations, string manipulations, internationalization, mailing, cache… Hop, just a copypasta and there we are. Just to show you an overview, files and folders look like this:

Architecture (files and folders) for yop.la

You’re not used to my framework as I am, so let’s take a few lines to write about it 😉

In this architecture, we have ONE and only ONE entry point for every page of our website. It’s the /www/index.php page. It’s actually the only php page accessible above the web root (which is the /www/ folder). Then, it dispatches the request to the corresponding application (those are php pages stored in the /app/ folder). Then the architecture is as follows:

  • the framework is supported by many classes located in the /lib/ folder, to manage the requests, to manipulate databases, or strings, and so on…
  • the folder /classes/ holds my custom classes for this specific project (you mustn’t touch the /lib/ folder which contains the core classes). In the same logic, /helpers/ is for my custom helpers
  • the folder /var/ has more or less the same purpose as the var folder in Linux: it holds variable data, such as session files or temporary files, or even log files
  • /tpl/ holds template files, it’s mainly pieces of HTML and display logic (no data processing should be undertaken in these files)

I prefer not to expend too much because it might turn a little off topic. If you want to know more about my home-made framework, please contact me or let a comment.

In the end, I also used the Paul Irish’s HTML5 default template, which includes a lot of good stuff for interoperability and everything…

Phase 4: finally write the pages

So we have 4 pages to write, let’s go. I think it took me the biggest part of the 3 hours, but it’s what I’m going to comment the least. I first wrote the home page, title, subtitle and the main form. Then wrote the page that processes the form data (there is some form validation to do, some database operations…). Then the page that handles the links and redirects them (or shows a 404 page in case of the link is not present in the database).

All what remains is the about page, let’s write what’s the website about and why I made it. And there we are. A bit of CSS on the top of that, and that’s all folks.

Phase 5: have a coffee

What? Every real geek drinks coffee. Oh hey, why not adding a nice picture with a cup of coffee in the middle of the page? Pointless… Ok I’ll do it! And actually I love it!

Logo for yop.la, a cup of coffee

Phase 6: put online and show to mates

It looks to work on my machine, let’s put it online and see what my mates think about it. Actually they found out some bugs, yes. I forgot to turn off the magic quotes in my PHP configuration, I forgot to handle CSS for ie6 and ie7 (these beauties don’t know HTML5 tags…), and maybe some little other things…

Et voilà. A URL shortener coded in about 3 hours, and that I actually use. I don’t know if I will publish my source code (if someone is interested though, please contact me). The framework I used is a home-made framework that I’ve never published yet either, because there are some things to fix and doc to write before I possibly show it to people. Again, if someone is interested, please contact me. Maybe it’s valuable after all and we could publish it and make an open-source project. For my personal use at least, it’s very suitable for small and lights websites that I want to code quick.

About the author

Cyril Mazur is a serial web entrepreneur with experience in various fields: online dating, forex & finance, blogging, online advertising... who enjoys building things that people like to use.

Leave the first comment