I recently purchased the url ablu.us with the intention of using it as a url shortener/image uploader. So i did.

It was actually quite trivial, and I had the code for it done about 6 months ago, but didn’t purchase the url till recently. I had created a photo uploader for another website I was working on (newnantheatre.org) so I just copied over the code (I wasn’t getting paid anyway, so I felt it was ok to reuse the code). There are some improvements tho that I’ll document here. However, I’m not actually going into the implementation of a url shortener or image uploader. You should take a weekend and figure this out for yourself. Or maybe I’ll do a post on it later.

Resize Me

The first thing I wanted was for people to not have to scroll horizontally to see huge pictures. But I didn’t want to resize them during the upload process, because I wanted people to see them the largest possible. So i wrote a quick jQuery script to detect the window size/proportions, and resize the image to that roughly. There are still some bugs in this, and currently there is no way to see the actual real size image without going to the hotlink.

mod_rewrite

This was a huge thing, as I had just started experimenting with it recently. I’m not a fan of big, scary regular expressions, but they’re damn useful (and necessary) when it comes to mod_rewrite. For those of you who don’t know what this is, it’s pretty urls. It takes the part after the .com, .net, .us, etc, and turns it into a meaningful request to the script that is actually being accessed. This was particularly useful for url shortening because it removes the need for a ‘?x=xxx’ at the end of a url.

api

In the case of the url shortening, i created a dead simple api to use. This can be used as a bookmarklet with any browser that supports them (Firefox, Chrome (only tested in dev builds), Safari, etc). Just paste this code into the url part of a bookmark to create a bookmarklet:

javascript:void(window.location='http://ablu.us/s/up.php?site='+location.href)

Or you can visit http://ablu.us/s and copy the url you want to shorten and click ‘Shorten’. Or you can use it in any other context of plugin, extension, etc for url shortening purposes by using the url http://ablu.us/s/up.php?site=.

EDIT: Chrome Extension

I have written a chrome extension for this as well.
I hearby release this unto the world. My friend Eric (@diagonalfish) runs a similar (and WAY more professional) service at http://fizl.us, and both of us doing this prompted me to write this post. If you have your own personal image uploader/url shortener, let us know in the comments.

I recently had a customer that needed an event display system. (They’re not paying me, and non-profit, so I feel ok putting this tutorial here). They wanted to have a nice pretty calendar that displayed when certain events happened. I had also decided early on to use CakePHP and had a fairly fleshed out site at this point, so I just wanted to add in another MVC that I could use. This is actually quite easy, thought it takes some setting up, so here is how I did it.

NOTE: This tutorial assumes you have an Acl controlled application, and know how and when to get these things to work. I will explain when things need to be done with ARO/ACO, but not how. Also, I borrowed the design heavily from this calendar tutorial

Step 0: Setting up the DB

This database structure provides a very simplistic event. The event has a title, body (description), date, and ID, and if it reoccurs. You may need less or more things, this will be left to your discretion, this is just to get you started.

CREATE TABLE IF NOT EXISTS `events` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(55) NOT NULL,
  `body` text,
  `date` date NOT NULL,
  `recurring` text,
  PRIMARY KEY  (`id`),
  KEY `title` (`title`)
)

Step 1: The Model

I didn’t need anything at all in my model, so I just stole the first few lines from another one and put it there. I’ll put mine here simply for completeness.

class Event extends AppModel {

	var $name = 'Event';

}

Step 2: Setting up the controller

This won’t get in to ACL/ACO/ARO at all, but a hand-waving explanation of how-to-make-it-work. Let’s stub out the controller with what we will eventually need: some setup and 4 methods.

class EventsController extends AppController {

	var $name = 'Events';
	var $helpers = array('Html', 'Form', 'Ajax', 'Javascript');

	function beforeFilter() {
	    parent::beforeFilter();
	    $this->Auth->allowedActions = array('index', 'display');
	}

       	function index(){
        }

	function add($date = ""){
        }

	function delete($id){
        }

	function edit($id = null) {
        }

This will be what we are mainly going to work on. The way mine functions is that there is no way to view an individual event’s details by clicking on it. You could add this in by including a view() method and displaying the info. That will be left as an exercise to the reader.

Step 3: Setting up the index() method

What we need to do here is to get all the events within a certain range (the current month) and to display them out AJAX style. CakePHP makes this trivially easy.

	Configure::write('debug', 0);
	$month = $_POST['m'];
	if ($month < 10) $month = "0".$month;
	$year = $_POST['y'];

	$max = cal_days_in_month(CAL_GREGORIAN, $month, $year);
	$min = "01";

	$this->set('events', $this->Event->find('all', array(
							'conditions' => array("Event.date BETWEEN '$year-$month-$min' AND '$year-$month-$max'"))));
	$this->set('month', $month);
	$this->set('year', $year);

	$this->layout = "ajax";

Explanation:

Configure::write('debug', 0)

- because we’re using AJAX, we don’t want any pesky error messages (or if still in debugging, db calls) to show up.

if ($month < 10) $month = "0".$month;

- later we’ll see javascript gives us the month without a leading 0. this is to put it back.

cal_days_in_month(CAL_GREGORIAN, $month, $year);

- a handy function to give us… exactly what it says. alternative to date(“t”, mktime(….));

Part 2 to happen shortly

• Ajax-ing in the content
• Javascript Date() vs PHP date()
• Correctly padding days before first of the month