Solutoire.com » Other

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.

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?

Top 3 website speed up tips

Bas Wenneker — Mon, 18 Feb 2008 21:03:12 +0000

I’m optimizing this blog at the moment, and I’m learning quite some new things about compression, gzipping and other optimization techniques. I’m using the Yahoo! YSlow extension for Firefox to see if I’m heading in the right direction. In this article I’ll explain the three best techniques I used to speed up solutoire.com.

Setting up a CDN

First thing I created a CDN. Most browsers support only a few persistent requests to the same domain. By placing static files (css/js/images) to a cdn subdomain, visitors can load content with twice the allowed amount of persistent requests. I asked my hosting provider (and employer) Solware to create a new subdomain called “cdn” (cdn.solutoire.com). Then I moved all static files to the cdn subdomain. Without configuring YSlow, it doesn’t have impact on the score, but by adding the cdn domain to your YSlow configuration, the score should be higher, and the YSlow rule 2 should be graded ‘A’.

Note 1: the .htaccess file that’s in the root of your domain doesn’t configure Apache in for the subdomain, so create an other .htaccess for your cdn.

When you have a large site with lots of visitors and/or a huge amount of static files, a nice alternative is moving your files to Amazon S3. Amazon S3 is a paid (but cheap) storage provider service. I’m a big fan of their initiative:

Amazon S3 provides a simple web services interface that can be used to store and retrieve any amount of data, at any time, from anywhere on the web. It gives any developer access to the same highly scalable, reliable, fast, inexpensive data storage infrastructure that Amazon uses to run its own global network of web sites. The service aims to maximize benefits of scale and to pass those benefits on to developers.

Note 2: having to many cdn domains results in more DNS lookups. According to Yahoo! a DNS lookup approximately takes 20-120 ms. DNS lookups are cached by most browsers, so there’s a delay only for first-time visitors.

Compressing .js and .css using the YUI Compressor

A week ago John Resig posted a very interesting article called “JavaScript Library Loading Speed” in which he wrote the following:

When distributing a piece of JavaScript code it’s traditional to think that the smallest (byte-size) code will download and load the fastest. This is not true – and is a fascinating result of this survey. Looking at the speed of loading jQuery in three forms: normal, minified (using Yahoo Min), and packed (using Packer). By order of file size, packed is the smallest, then minifed, then normal. However, the packed version has an overhead: It must be uncompressed, on the client-side, using a JavaScript decompression algorithm. This unpacking has a tangible cost in load time. This means, in the end, that using a minifed version of the code is much faster than the packed one – even though its file size is quite larger.

While I knew about the fact that packed files had a delay because of the evaluation time, I never thought it took a significant amount of time. Anyway, I stopped packing my files, and started minifying them, using the YUI Compressor. A great thing about this tool is that it’s able to compress both javascript files and css files. The downside of using this compressor is that it’s written in Java, and there doesn’t seem to be a decent online YUI Compressor service. So I started looking around for Apache Ant build scripts. I found an excellent explanation about compressing files using the YUI Compressor and Ant, written by the Yahoo! engineer Julien Lecomte. I’m not going to explain how to do this, because I would tell you the same as Julien. I can push you in the right direction by referring to a previous post on this blog called “Automate builds with Ant” in which I explain how to set up the Aptana IDE to use Apache Ant.

Configuring the .htaccess file

The .htaccess file is the Apache configuration file for the folder the file resides in. It’s better to change the httpd.conf file, but most of you won’t have access to that file (because of shared hosting).

Removing ETags and Last-Modified headers

ETags, or Entity tags, are a mechanism used by servers and browsers to compare cached files with files from the server. Yahoo! explains the problem with ETags:

The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site. ETags won’t match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests.

When the ETags and Last-Modified headers are removed, files will stay in cache till the header expires, and there are no checks performed to see if the file on the server-side has changed. So I also remove the Last-Modified header in my .htaccess.

Gzipping content

Gzipping your content before it’s sent to the browser, may reduce the filesizes with 70%. Almost 90% of internet traffic goes through browsers that support gzipped content. This speeds up your website quite a bit and saves bandwidth, especially when you have serve a lot of javascript and css files. Gzip doesn’t compress images.

Add Expire headers

When expire headers are set, the browser caches content from the server on the clientside. First-time visitors make lots of requests, the second time visitors visit the page, the browser uses the cached content. So when you set the expire headers for files, the browser knows when to throw away the cached files, and fetch new ones. I use different expire headers for different filetypes.

Note: it should be obvious you should only set expire headers for static content. Because the browser caches dynamic content, it’s only refreshed when the header expires. When you do set headers for dynamic content, make sure the expire period is small.

My .htaccess looks something like this, it’s made from examples from several articles at AskApache.com:

Header unset ETag
FileETag None

# Cache for quite some time

Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Pragma
Header unset Last-Modified


# Cache for 2 days

Header set Cache-Control "max-age=172800, public, must-revalidate"
Header unset Pragma
Header unset Last-Modified


# Cache for 2 hours

Header set Cache-Control "max-age=7200, must-revalidate"
Header unset Pragma


# Gzip compression

SetOutputFilter DEFLATE

YSlow gives me grade D

While I can notice the speed increase after the optimization steps, YSlow still gives me grade D (67). This is because of the ads I added to my site. I use Google Adsense to generate some income from this blog, but the javascript that’s served from the Google servers aren’t cached and it causes the low grade from YSlow. ~~I did everything that’s within my power~~ (see comment by nicolash), but for now, Google is the bottleneck. I can’t do anything about it, because changing the ads code from Adsense would make me violate the Adsense TOS. Bummer…

My Roadmap 2008

Bas Wenneker — Thu, 03 Jan 2008 07:19:37 +0000

Well, I’m a bit late, but happy new year to all! A new year has begun, so it’s time to write some sort of roadmap, to get straight what I want to accomplish the coming year. I”m not going to bother you with the complete list, but there are a few points that might be interesting for you.

Project: TAGStention

In February 2008 I’ll release the source code of my Dreamweaver extension, TAGStention. It’s adds a toolbar to Dreamweaver that enables webdevelopers to make WordPress templates just by filling in wizards or pressing a button. I didn’t update it for a while, and I’m not interested in putting more effort in a new release, so that’s the reason it’s going opensource. In the following weeks I’ll think about the license. If you’re interested in taking over development and maintainance, please let me know.

Project: Plotr

I’m stoppping the development of Plotr. It just takes so much of my precious time I can’t keep on writing bug fixes/documentation/new features for it. There are great other charting libraries that can do the job, so it’s time for you to switch. If anyone is interested in taking over development and maintenance, just let me know. I just don’t have the time to give any support for the product.

New projects

There are some projects in the pipeline that will be released in the next year. I’ve been playing around with ExtJS and I’ve created a very nice javascript benchmark app. It should be ready in February or March. There are some other things I’ll be doing in 2008 but I’m not going to tell you about those yet.

Firefox Reminder Plugin

Bas Wenneker — Fri, 03 Aug 2007 18:23:22 +0000

Today I came across a great Firefox plugin called ReminderFox. This plug in adds a reminder list and a todolist to our favorite browser. Just what I needed, and I’m sharing this because this might come in handy for you too.

ReminderFox is an extension for Firefox and Thunderbird that displays and manages lists of date-based reminders and ToDo’s. ReminderFox does not seek to be a full-fledged calendar system.

Reminderfox plugin.

What I like the most about it, is the fact you can sync your reminders/todo items online. You can host your own ‘reminder.ics’ file, but you can also use the free .ics file hosting from icalx.com. In this way you can have your reminders on every connected computer.

Automating builds with Ant

Bas Wenneker — Thu, 31 May 2007 20:34:24 +0000

I started working on Plotr again and I needed a simple way to automate tasks like concatenating files,replacing some variables and packing with Dean Edwards packer. Then I found Apache Ant, which was already integrated in Aptana (which is my favorite javascript IDE). Well, Ant isn’t integrated in Aptana but in Eclipse, and because I’ve installed Aptana as a plugin for Eclipse, Ant is already installed. Anyway, I just wanted to share this info, because it’s saving me so much time. In this article I’ll explain how to write a simple Ant build-file.

Setting up the environment

To start working with Aptana and Ant you need to install Eclipse (which needs Java). I’ll assume you know how to do this. After that go to www.aptana.com and read how to install Aptana as an Eclipse plugin.

Now you’ve got everything up and running, create a new (Web) Project. Let’s say our project looks like this:

Screenshot of the Aptana project.

Ant takes a XML file. In build.xml we define a set of tasks, and Ant is going to execute these tasks. Let’s say we want to build our project by concatenating the three files in the js folder. We also want to pack the concatenation and store the result in another file. Ant comes with a set of built-in tasks. Before we can use these tasks we need to define our project.

The Ant build file

We define our project in the buildfile. First this is what the Ant manual has to say about build files.

Ant’s buildfiles are written in XML. Each buildfile contains one project and at least one (default) target. Targets contain task elements. Each task element of the buildfile can have an id attribute and can later be referred to by the value supplied to this. The value has to be unique.

Ok, so we need to define a project, and some targets. Well, our project is called ‘AutomationProject’ and our targets are concatenating files and packing the result afterwards. Here’s what I came up with:



	
	

	
		
		
			
		

		file0.js, file1.js, file2.js concatenated.
		

	
		
		 

		\'__version__\' replaced with \'0.1.1\' in the sol_uncompressed.js file.
	

	
		
		
			 ${js_dir}\\sol_packed.js\"/>
		

		File sol_uncompressed.js packed to sol_packed.js

So basically, this build.xml does the following:

Concatenate the three files in the js folder and save the result as sol_uncompressed.js.
Replace ‘__version__’ with ‘0.1.1′ in the sol_uncompressed.js file.
Pack sol_uncompressed.js with Dean Edwards packer and save it as sol_packed.js

You can run the build file by left clicking the file in the Project View and do Run as > Ant Build.

Running build.xml to build the project using Ant.

As you can see in the build file I’m executing ‘cmd’ with some parameters to pack the sol_uncompressed.js file. I used the WSH version of packer. This version can be executed from the commandline. It seems this WSH port of packer is not yet version 3.0, but Dean said on his blog the ports of the latest version are ready to be released.

Download

If you want to try it yourself make sure you grab the zipped Project folder of the Project above. I recommend you read the Ant manual. It has lots of code examples that get you up and running in no time. If you have any questions, don’t hesitate to ask!

I like podcasts

Bas Wenneker — Fri, 25 May 2007 05:59:24 +0000

Hi there, this is the first post since the new design of solutoire.com. I’m writing about web2.0 podcasts. I find myself listening lots of podcasts the last few months and I thought maybe I should share my opinions about them, and show you where to find good podcasts.

Ajaxian: Audible Ajax (20 podcasts)

If you don’t know this one you’d better go and download some episodes from Ajaxian. Dion Almaer and Ben Galbraith are producing by far the best podcasts around. Every release they share the latest thoughts on all kinds of web applications, ajax libraries etc. So far they released 20 episodes of (average) 30 minutes, the overall sound quality is ok.

Web 2.0 Show (35 podcasts)

Web20show.com is another great source for podcasts about, you’ll never guess, web2.0! Here’s what Chris and Josh say about their broadcasts:

The Web 2.0 Show is a podcast about emerging technologies commonly referred to as “Web 2.0″. We focus on interviewing the developers and entrepreneurs who are creating the next generation of web services and media delivery. Our goal is to help you figure out where the web is headed. Like you, we are hard at work developing our own cool projects. Maybe we can learn something together.

The stuff they’re talking about and the interviews they do are really exciting. It’s definitely worth trying.

Software As She’s Developed (26 podcasts)

Another great podcaster is Michael Mahemoff, a freelance software architect based in London. He has some great podcasts about web2.0 usability, ajax patterns and javascript unit testing. The content is great, a downside is the Australian accent of Michael, which start to annoy me after a while.

Ajax Resources

Bas Wenneker — Wed, 06 Dec 2006 20:10:50 +0000

I haven’t updated ajax.solutoire.com for a while, but lately I had some time to work on it. So I rewrote the page from scratch. It’s more lightweight than before. I also added like 100 new resources. I’ll promise to keep it more up-to-date now… Please take a visit and see it yourself.

Solutoire.com » Other

Django Series 1: A custom login page

Setting Up The Project

Creating A Log in Page

What’s next

Download

Upcoming Django Series

HTML Conditional Comments

Different types of statements

The conditions

The uses

Further reading

What’s in your feed reader?

My Feeds

Vitamin (feed)

ShaunInman.com (feed)

Ajaxian (feed)

Devlounge (feed)

Lifehack.org (feed)

Lifehacker (feed)

SimpleBits (feed)

Snook.ca (feed)

Painfully Obvious (feed)

The Web 2.0 Show (feed)

Top 3 website speed up tips

Setting up a CDN

Compressing *.js and *.css using the YUI Compressor

Configuring the .htaccess file

YSlow gives me grade D

My Roadmap 2008

Project: TAGStention

Project: Plotr

New projects

Firefox Reminder Plugin

Automating builds with Ant

Setting up the environment

The Ant build file

Download

I like podcasts

Ajaxian: Audible Ajax (20 podcasts)

Web 2.0 Show (35 podcasts)

Software As She’s Developed (26 podcasts)

Ajax Resources

Compressing .js and .css using the YUI Compressor