Solutoire.com

Django Series 1: A custom login page

Bas Wenneker — Thu, 26 Feb 2009 17:07:57 +0000

This is the first post in the Django series published on solutoire.com. In the series I’ll discuss and solve some of the problems I ran across while struggling with Python and Django in particular. The subjects are handled in a fast pace and the posts in this series will get you up and running quickly. The posts will mainly consist of code examples and a few explanations. Most of the time I’ll refer to other websites for thorough explanations.

In this post I’ll explain how to create a custom log in page. We’ll write our own view function and form that handles the authentication. In the next post I’ll explain how to create a custom authentication backend, that lets you log in users by their email addresses instead of their username.

Setting Up The Project

I assume you’ve already installed Django and that you have a database. First step is to create a new project (in my case called ’solutoire’). Then, create an app in the project called ‘auth’. Of course you can name both whatever you like. Fire the following commands on your command line:

// Create a new project:
# django-admin.py startproject solutoire
// Create the authentication app:
# manage.py startapp auth

Now set up your project as described in the Django Tutorial. Make sure you’ve added the database settings in settings.py.

Next thing you need to do is to sync the database. Make sure you create a superuser and write down the credentials (especially the email address and the password). Run the following commands:

// Sync the database, create a superuser
# manage.py syncdb
// Start the development server at http://127.0.0.1:8080
# manage.py runserver 8080

Creating A Log in Page

Django already has built in User authentication. To start using it, make sure django.contrib.auth is in the INSTALLED_APPS tuple. If you don’t have it yet, add it, and run the manage.py syncdb again, this creates the tables in the database that you’ll need for authentication. Django also comes with several authentication views, but for now, we’ll write our own.

To facilitate a log in page, create a new directory ‘templates’ in project folder and create a file called auth.html inside it. In settings.py, add the absolute path to template directory to the TEMPLATE_DIRS setting. In my case, it looked like:

TEMPLATE_DIRS = (
    'E:/Django/Projects/solutoire/templates'
)

We also need a view function and a template. Open up auth/views.py and paste the

// auth/views.py
from django.shortcuts import render_to_response
from django.contrib.auth import authenticate, login

def login_user(request):
    state = "Please log in below..."
    username = password = ''
    if request.POST:
        username = request.POST.get('username')
        password = request.POST.get('password')

        user = authenticate(username=username, password=password)
        if user is not None:
            if user.is_active:
                login(request, user)
                state = "You're successfully logged in!"
            else:
                state = "Your account is not active, please contact the site admin."
        else:
            state = "Your username and/or password were incorrect."

    return render_to_response('auth.html',{'state':state, 'username': username})

Now, copy & paste the following HTML to the auth.html file. This is the template for the log in view. To read more about Django templates, go read Django Template Language and Built-in template tags and filters.

// templates/auth.html



Log in




	{{ state }}
	
		{% if next %}
		
		{% endif %}
		username: 
		

		password:

In order to see the form with your browser, the urlpatterns variable in urls.py in the project root should have an entry that points to the login_user function defined in auth/views.py:

from django.conf.urls.defaults import *

# Uncomment the next two lines to enable the admin:
# from django.contrib import admin
# admin.autodiscover()

urlpatterns = patterns('',
    (r'^login/$', 'auth.views.login_user'),
)

The form looks like this when you’re not logged in:

The log in form.

As you can see, the render_to_response function passes two variables to the auth.html template we’ve just created. Now we have everything in place for logging in users. Try it yourself, use the credentials you just wrote down when you ran the manage.py syncdb command (to log in, point your browser to http://127.0.0.1:8080/login). This code is everything you need with Django to have your own log in page. However, Django also comes with some predefined log in views. You can read more about those default templates at the Django Documentation

What’s next

In the next post in the Django series we’ll will write our own authentication backend. The custom backend enables us to let users log in by their email address, instead of their username. Of course you can change the backend to your likings, for example, let users log in by their first name, email address and their password.

Download

You can download all the code above in a zip file. When you use this code, make sure you change paths and credentials.

Upcoming Django Series

Bas Wenneker — Mon, 09 Feb 2009 19:15:45 +0000

I’m currently working with Django for a personal project. Django is a web framework written in Python that encourages rapid development and clean, pragmatic design. The Django website says it is “The Web framework for perfectionists with deadlines. Django makes it easier to build better Web apps more quickly and with better code.”. That’s exactly the reason I decided to fool around with Django and Python. While I’m an experienced PHP programmer, Python is not as hard to learn like I thought it would be.

In the next few weeks I’ll be releasing a series of posts in which I’ll discuss and solve some of the problems I ran across while struggling with Python and Django in particular. The first post covers writing a custom authentication backend. The second post will learn you everything about extending the default Django User object and how to combine it with the custom authentication backend. If you have special requests for explanation of topics related to Django (that are hardly documented), please let me know by leaving a comment.

Delayed Image Preloading Using Mootools

Bas Wenneker — Sun, 02 Nov 2008 15:44:50 +0000

It’s almost three months ago since my last post! I’m quite busy at the moment. That’s why I’ll just write a quickie on delayed image preloading using Mootools (1.2.1, also might work with 1.2 and 1.1).

Image preloading

Most of the times you’ll need preloading when there are elements in the DOM that are hidden, but have an image background. On the moment the elements are shown and the images are not found in cache, the images are loaded from the server. This action has a small delay, so your element first shows up without the image background. That might confuse the visitor.

Note that there are other possible scenario’s that need image preloading, but this case is a nice introduction.

Delaying image preloading

Why in the world would we like to delay the preloading of the images? Well, most browsers only allow two concurrent requests at the same time to the same domain (correct me if I’m wrong). When we do the image preloading on domready, it might hold up other resources that need to be loaded. Because we preload images that are not shown when the page loads, we can delay the preloading.

The javascript

Let’s say we have a total of five images that need to be preloaded. Here’s how I would preload the image, 3 seconds after the dom is ready:

Array.each.delay(3000,this,[
	['foo.gif', 'bar.png','moo.png','tools.png', 'mootools.png'],
	function(src){var img = new Image();img.src = src;}
]);

Easy huh? It delays a call to Array.each by 3000 ms. Then it passes the array of images as the first argument, and the function as the second. You can read more about delay at the Mootools Docs.

Javascripts Loop Benchmarks

Bas Wenneker — Tue, 29 Jul 2008 18:04:27 +0000

I tested a few looping techniques in the past, but I found a benchmark page which shows over 40 looping techniques and their running times. You can find the benchmark over here.

Writing A Feed Reader

Bas Wenneker — Fri, 27 Jun 2008 18:46:25 +0000

Yesterday I was playing around with the Google AJAX Feed API. With the API, you can download any public Atom or RSS feed using only javascript. By mixing the Google AJAX Feed API with MooTools 1.2, I wrote a tiny feed reader application in 30 lines of javascript goodness.

My tiny feed reader

The Feed Reader

This feed reader polls the COLOURlovers.com Palettes feed and Colours feed every 20 seconds for new items. New items are highlighted with the MooTools Element.highlight() function. The Google AJAX Feed API passes JSON to a callback function, which adds the new ‘colour’ or ‘palette’ entries to the list. Below you can see the uncommented code. The feed reader example contains a commented version.

var Site = {
	entries: [],
	timer: 0,
	init: function(){
		this.paletteFeed = new google.feeds.Feed('http://feeds.feedburner.com/ColourloversCoup0Palettes/New');
		this.colourFeed = new google.feeds.Feed('http://feeds.feedburner.com/ColourloversCoup0Colours/New');
		this.poll.periodical(1000, this);
	},
	poll: function(){
		if (--this.timer <= 0) {
			this.colourFeed.load(this.onLoadCallback.bind(this));
			this.paletteFeed.load(this.onLoadCallback.bind(this));
			this.timer = 20;
		}
		$('refresh').set('html','Refreshing feeds in ' + this.timer + ' second(s)...');
	},
	onLoadCallback:function(json){
		if (json.error) return;
		for (var i = json.feed.entries.length - 1; i >= 0; i--) {
			var entry = json.feed.entries[i];
			if (!this.entries.contains(entry.title)) {
				this.entries.push(entry.title);
				$('feeds').innerHTML = ('{content}').substitute(entry) + $('feeds').innerHTML;
			}
		}
		$$('.entry').set('tween',{duration:2000}).highlight().removeClass('entry');
	}
};
google.load('feeds', '1');
window.addEvent('domready', Site.init.bind(Site));

What’s next?

Sending Javascript Functions Over JSON

Bas Wenneker — Thu, 12 Jun 2008 11:55:58 +0000

In this post I’ll present a way to send javascript functions over JSON from a php server (but it should work on other platforms too). Since PHP version 5.20 PHP includes the functions json_encode() and json_decode(). These functions encode values into JSON formatting and decode JSON formatted strings into associative arrays. The json_encode() function is not able to encode a value into a (javascript) function. This is a common issue when configuring graphs from Flotr (my Javascript plotting library) with JSON data. Here are my findings.

The Problem: Server-side

To get a better feeling for the problem, I’ll show you what happens when we pass an array to json_encode:

// Our sample array
$foo = array(
  'number'  => 1,
  'float'   => 1.5,
  'array'   => array(1,2),
  'string'  => 'bar',
  'function'=> 'function(){return "foo bar";}'
);

// Now encode the array to JSON format
$json = json_encode($foo);

// Send to to the client
echo $json;
...
// This sends the following string to the client:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":"function(){return \"foo bar\";}"
}

Because PHP reports some errors when we don’t enclose the ‘function’ with quotation marks, it not possible to omit those. So basically, it’s not possible to use json_encode() to create a JSON formatted string with functions.

The solution

My solution is very simple:

Loop over the associative array that is about to be encoded
Look for values that start with a function definition (like ‘function(’)
Remember the value and replace it with a unique key (within the assoc array)
Encode the changed assoc array to JSON using json_encode()
Replace the unique keys enclosed in quotation marks with their original values
Echo the json string

In PHP:

// Our sample array
$foo = array(
  'number'  => 1,
  'float'   => 1.5,
  'array'   => array(1,2),
  'string'  => 'bar',
  'function'=> 'function(){return "foo bar";}'
);

$value_arr = array();
$replace_keys = array();
foreach($foo as $key => &$value){
  // Look for values starting with 'function('
  if(strpos($value, 'function(')===0){
    // Store function string.
    $value_arr[] = $value;
    // Replace function string in $foo with a 'unique' special key.
    $value = '%' . $key . '%';
    // Later on, we'll look for the value, and replace it.
    $replace_keys[] = '"' . $value . '"';
  }
}

// Now encode the array to json format
$json = json_encode($foo);

// $json looks like:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":"%function%"
}

// Replace the special keys with the original string.
$json = str_replace($replace_keys, $value_arr, $json);

// Send to to the client
echo $json;

// This echoes the following string:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":function(){return "foo bar";}
}

Now the ‘function’ key is not a String anymore, but it’s a function. So our problem is solved. When using Prototype, it will look something like this:

new Ajax.Request('json_server.php', {
  method:'get',
  onSuccess: function(transport){
     var json = transport.responseText.evalJSON();
     alert(json.function()); // => alerts 'foo bar'
   }
});

There might be dozens of solutions to the problem stated above, but I couldn’t find ‘em on the net. If you know a better technique, please share it!

Mootools Puzzle Game

Bas Wenneker — Fri, 28 Mar 2008 18:45:57 +0000

I wrote a pretty useless puzzle game that makes use of Mootools. I was updating the ‘about’ page on this blog, and I was looking for an original way to show a picture of myself. So take a look at the the about page and play around with it.

Play with me

HTML Conditional Comments

Bas Wenneker — Sun, 23 Mar 2008 19:12:17 +0000

Ever used conditional statements/comments in your html? I do, actually, use the technique quite a lot (this site, Flotr). With HTML conditional comments you can detect browser type and version. Now don’t get too excited, because it’s only supported by Internet Explorer 5+ on Windows. Nevertheless, this way of browser detection is really elegant compared to nasty css hacks or javascript user agent detection. This article is shows you how you can use the conditional comments for several handy purposes.

Different types of statements

There are two types of conditional statements. The first type is the so-called downlevel-hidden statement, which hides the statement from browsers that don’t support conditional comments:

IE browsers will render the paragraph, but others ‘ll omit it, because they think it’s a HTML comment.

The next type of conditional comment is the downlevel-revealed statement. The statement is rendered by browsers that don’t support conditional statements, and of course, IE 5+ browsers only render the statement when they pass the condition.


This paragraph is shown by IE6, IE7 and all browsers
that don't support conditional comments.

The conditions

MSDN has a nice list of possible conditions, so I’m not going to repeat that, I’ll just give some examples with an explanation.








All non IE browsers

The uses

If you take a look in the source of this page you can see the following conditional tag in between the header tags.

This conditional comment helps me with keeping my original css file free of hacks. This means that all non-IE browsers render this page just fine, but IE6- messes up most of the positioned elements. Non IE and IE7+ browsers think it’s just a HTML comment, so the css file is not loaded, but IE6- browsers load the css file that corrects the css styles.

The same thing can be done for javascript files. My javascript plotting library Flotr needs Excanvas to treat VML as a canvas element. Excanvas is only needed for IE browsers, because most popular non IE browsers support the canvas element.

What’s in your feed reader?

Bas Wenneker — Fri, 21 Mar 2008 19:01:00 +0000

Despite of the fact I’m always hungry for new feeds with interesting articles, I’m not able to find any new feeds lately. I asked for help from Google Alerts, which notifies me when the GoogleBot hits something I defined an alert for. Though it doesn’t come up with great content I’m looking for. That’s the reason I’d like to ask you for helping me out, because obviously I’m looking at the wrong spot. In exchange I show you 10 of my favorite feeds.

Grab the Solutoire.com feed!

My Feeds

I use Google Reader as my feed reader (never tried something else). I never read all feed entries, most of the time I’ve more than 1000 unread articles. Here’s an unordered list of the ones I’m dedicated to:

Vitamin (feed)

Vitamin is a resource for web designers, developers and entrepreneurs. The online magazine serves great content written by top authors from the web industry.

ShaunInman.com (feed)

Shaun Inman is a successful designer and developer. He’s also the founder of Mint, the web site analytics program.

Ajaxian (feed)

My daily piece of Ajax.

Devlounge (feed)

Online magazine for designers and developers.

Lifehack.org (feed)

Daily digest and pointers on productivity, getting things done and lifehacks.

Lifehacker (feed)

Tech tricks, tips and downloads for getting things done. This site delivers up to 10 articles a day!

SimpleBits (feed)

The blog/company website of designer and author Dan Cederholm.

Snook.ca (feed)

Snook.ca is the site of web designer, developer, writer and speaker, Jonathan Snook. The articles on the site focus on web development, design, and freelance.

Painfully Obvious (feed)

The weblog of Andrew Dupont, web interface developer and writer.

The Web 2.0 Show (feed)

The Web 2.0 Show is a podcast about emerging technologies commonly referred to as “Web 2.0″, and is hosted by Adam Stacoviak and Josh Owens.

Now, the crucial question is, what’s in your feed reader?

Update: Mootools CSS Styled Scrollbar

Bas Wenneker — Tue, 11 Mar 2008 07:16:30 +0000

I’ve updated my previous post Mootools CSS Styled Scrollbar. I’ve added instructions about how to make it work with Mootools version 1.11. Also the example is updated. On the Mootools forums someone called ‘horseweapon’ wrote a simple function that used my code to make scrollbars. I used his function to work with the example. You can see the updated example over here.