Building a Dynamic
Website Using Django
Nathan Eror
Hush Labs, LLC
© 2007 Hush Labs, LLC
1

Who am I?
© 2007 Hush Labs, LLC
2

Let’s Build
Something!
© 2007 Hush Labs, LLC
3

Time to Get Started
1. Download and Install Python & Django
2. Install sqlite if you don’t have it yet
3. Crank up your editor and get ready to code
© 2007 Hush Labs, LLC
4

> django-admin.py startproject barcamplive
> cd barcamplive
> ./manage.py startapp liveblog
> mkdir -p templates public/uploads
© 2007 Hush Labs, LLC
5

File: settings.py
DATABASE_ENGINE = 'sqlite3'
DATABASE_NAME = 'barcamplive.db'
import os.path, sys
PROJECT_ROOT = os.path.abspath(os.path.dirname(sys.argv[0])))
MEDIA_ROOT = \"%s/public\" % PROJECT_ROOT
MEDIA_URL = 'http://localhost:8000/public'
ADMIN_MEDIA_PREFIX = '/admin/public/'
ROOT_URLCONF = 'urls'
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.admin',
'liveblog'
)
TEMPLATE_DIRS = (
\"%s/templates\" % PROJECT_ROOT,
)
© 2007 Hush Labs, LLC
6

Start With the
Data Model
© 2007 Hush Labs, LLC
7

File: liveblog/.py
from django.db import models
from django.contrib.auth.models import User
from datetime import datetime
class Post(models.Model):
title = models.CharField(blank=False, null=False, maxlength=2048)
author = models.ForeignKey(User, related_name='posts')
created = models.DateTimeField(u'Date Created', blank=False, null=False,
default=datetime.now)
slug = models.SlugField(prepopulate_from=(\"title\",))
def __str__(self):
return self.title
class PostItem(models.Model):
post = models.ForeignKey(Post, related_name='items')
created = models.DateTimeField(u'Date Created', blank=False,
default=datetime.now)
image = models.ImageField(upload_to=\"uploads\", blank=True)
content = models.TextField(blank=True)
def __str__(self):
return \"Post Item for '%s' created at %s\" % \\
(self.post.title, self.created.strftime('%I:%M %p %Z'))
© 2007 Hush Labs, LLC
8

postgresql mysql sqlite
oracle mssql
>>> u = User.objects.get(username='admin')
Django Models (ORM)
>>> p = Post(title='Django is fun!',slug='django-is-fun',author=u)
>>> p.save()
>>> i = PostItem(content='Woo Hoo!')
>>> p.items.add(i)
>>> Post.objects.all()
[<Post: Django is fun!>]
>>> p2 = Post.objects.get(slug='django-is-fun')
>>> p2.items.all()
[<PostItem: Post Item for 'Django is fun!' created at 03:27 PM >]
>>> p2.delete()
>>> Post.objects.count()
0L
>>> PostItem.objects.count()
0L
© 2007 Hush Labs, LLC
9

> ./manage.py syncdb
> ./manage.py runserver
© 2007 Hush Labs, LLC
10

The Django
Admin Site
© 2007 Hush Labs, LLC
11

© 2007 Hush Labs, LLC
12

Django URLs
© 2007 Hush Labs, LLC
13

File: urls.py
from django.conf.urls.defaults import *
from django.conf import settings
urlpatterns = patterns('',
# Example:
# (r'^barcamplive/', include('barcamplive.foo.urls')),
# Uncomment this for admin:
(r'^admin/', include('django.contrib.admin.urls')),
)
© 2007 Hush Labs, LLC
14

© 2007 Hush Labs, LLC
15

File: settings.py
DATABASE_ENGINE = 'sqlite3'
DATABASE_NAME = 'barcamplive.db'
import os.path, sys
PROJECT_ROOT = os.path.abspath(os.path.dirname(sys.argv[0])))
MEDIA_ROOT = \"%s/public\" % PROJECT_ROOT
ROOT_URLCONF = 'urls'
MEDIA_URL = 'http://localhost:8000/public'
ADMIN_MEDIA_PREFIX = '/admin/public/'
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.admin',
'liveblog'
)
TEMPLATE_DIRS = (
\"%s/templates\" % PROJECT_ROOT,
)
© 2007 Hush Labs, LLC
16

© 2007 Hush Labs, LLC
17

© 2007 Hush Labs, LLC
18

File: liveblog/models.py
class Post(models.Model):
title = models.CharField(blank=False, null=False, maxlength=2048)
author = models.ForeignKey(User, related_name='posts')
created = models.DateTimeField(u'Date Created', blank=False, null=False,
default=datetime.now)
slug = models.SlugField(prepopulate_from=(\"title\",))
class Admin:
list_display = ('title', 'author', 'created')
list_filter = ('created', 'author')
search_fields = ('title',)
date_hierarchy = 'created'
© 2007 Hush Labs, LLC
19

File: liveblog/models.py
class PostItem(models.Model):
post = models.ForeignKey(Post, related_name='items')
created = models.DateTimeField(u'Date Created', blank=False,
default=datetime.now)
image = models.ImageField(upload_to=\"uploads\", blank=True)
content = models.TextField(blank=True)
class Admin:
list_display = ('post', 'created')
list_filter = ('created', 'post')
search_fields = ('content',)
date_hierarchy = 'created'
© 2007 Hush Labs, LLC
20

File: liveblog/models.py
class PostItem(models.Model):
post = models.ForeignKey(Post, related_name='items',
edit_inline=models.TABULAR, num_in_admin=1)
created = models.DateTimeField(u'Date Created', blank=False,
default=datetime.now)
image = models.ImageField(upload_to=\"uploads\", blank=True, core=True)
content = models.TextField(blank=True, core=True)
© 2007 Hush Labs, LLC
21

What About Our
Visitors?
© 2007 Hush Labs, LLC
22

File: templates/base.html
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\"
\"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<title>BarCamp Houston Live!</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"/public/css/reset-fonts-grids.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"/public/css/base-min.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"/public/css/live.css\">
</head>
<body>
<div id=\"doc\" class=\"yui-t4\">
<div id=\"hd\"><h1><a href=\"/\">The BarCamp Liveblog</a></h1></div>
<div id=\"bd\">
<div id=\"yui-main\">
<div class=\"yui-b\">
<!-- The main content goes here -->
</div>
</div>
<div id=\"sidebar\" class=\"yui-b\">
<!-- The sidebar goes here -->
</div>
</div>
<div id=\"ft\"><div id=\"copyright\">&copy;2007 <a href=\"http://www.hushlabs.com\">Hush Labs, LLC</
a><br/>Header image adapted from flickr user <a href=\"http://www.flickr.com/photos/eschipul/
254400673/\">eschipul's</a>.</div></div>
</div>
</body>
</html>
© 2007 Hush Labs, LLC
23

File: urls.py
urlpatterns = patterns('',
url(r'^$', direct_to_template, {'template': 'base.html'},
name='index'),
(r'^admin/', include('django.contrib.admin.urls')),
(r'^public/(?P<path>.*)$', 'django.views.static.serve',
{'document_root':settings.MEDIA_ROOT}),
)
© 2007 Hush Labs, LLC
24

archive_week archive_day
redirect_to object_list
direct_to_template object_detail
Generic Views
create_object archive_month
delete_object archive_index
update_object archive_year
© 2007 Hush Labs, LLC
25

File: urls.py
from django.views.generic.simple import direct_to_template
urlpatterns = patterns('',
url(r'^$', direct_to_template, {'template': 'base.html'},
name='index'),
(r'^admin/', include('django.contrib.admin.urls')),
(r'^public/(?P<path>.*)$', 'django.views.static.serve',
{'document_root':settings.MEDIA_ROOT}),
)
© 2007 Hush Labs, LLC
26

© 2007 Hush Labs, LLC
27

{{ Variables|Filters}} {% Tags %}
Templates
Inheritance
© 2007 Hush Labs, LLC
28

File: templates/base.html
<div id=\"yui-main\">
<div class=\"yui-b\">
{% block content %}{% endblock %}
</div>
</div>
File: templates/liveblog/post_list.html
{% extends \"base.html\" %}
{% block content %}
<div id=\"post_list\">
<h1>Current Liveblogs</h1>
{% if object_list %}
<ul>
{% for post in object_list %}
<li><a href=\"{% url post-detail post.slug %}\">{{post.title}}</a></li>
{% endfor %}
</ul>
{% else %}
<h3>There are no blogs yet!</h3>
{% endif %}
</div>
{% endblock %}
© 2007 Hush Labs, LLC
29

File: urls.py
from django.views.generic.list_detail import object_list
urlpatterns = patterns('',
url(r'^$', object_list,
{'queryset':Post.objects.all(),'allow_empty':True},
name='index')
)
© 2007 Hush Labs, LLC
30

<a href=\"{% url post-detail post.slug %}\">{{post.title}}</a>
File: urls.py
from django.views.generic.list_detail import object_detail
<a href=\"\">Django is fun!</a>
urlpatterns = patterns('',
url(r'^$', direct_to_template, {'template': 'base.html'},
name='index'),
url(r'^post/(?P<slug>.*)/$', object_detail,
{'queryset':Post.objects}, name='post-detail'),
)
File: templates/liveblog/post_detail.html
{% extends \"base.html\" %}
{% block content %}
<div class=\"post\">
<div class=\"title\">{{object.title}}</div>
<div class=\"tagline\">Started at {{object.created}}</div>
<div class=\"content\">
{% for item in object.items %}
<div class=\"post_item\">
<div class=\"item_tagline\">Added on {{item.created}}</div>
{% if item.image %}<div class=\"item_image\"><img src=\"/public/{{item.image}}\"></div>{% endif %}
<div class=\"item_content\">{{item.content|linebreaks}}</div>
<br style=\"clear:both;\"/>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
© 2007 Hush Labs, LLC
31

© 2007 Hush Labs, LLC
32

Views
django.http.HttpRequest
View Function
django.http.HttpResponse
© 2007 Hush Labs, LLC
33

File: urls.py
from liveblog import views
urlpatterns = patterns('',
url(r'^$', direct_to_template, {'template': 'base.html'},
name='index'),
url(r'^post/(?P<slug>.*)/$', views.post_detail,
name='post-detail'),
)
File: liveblog/views.py
from models import Post
from django.shortcuts import get_object_or_404, render_to_response
def post_detail(request, slug):
post = get_object_or_404(Post, slug=slug)
items = post.items.all()
return render_to_response('liveblog/post_detail.html',
{'post':post, 'items':items})
© 2007 Hush Labs, LLC
34

File: templates/liveblog/post_detail.html
{% extends \"base.html\" %}
{% block content %}
<div class=\"post\">
<div class=\"title\">{{post.title}}</div>
<div class=\"tagline\">Started at {{post.created}}</div>
<div class=\"content\">
{% for item in items %}
<div class=\"post_item\">
<div class=\"item_tagline\">Added on {{item.created}}</div>
{% if item.image %}<div class=\"item_image\"><img src=\"/public/{{item.image}}\"></div>{% endif %}
<div class=\"item_content\">{{item.content|linebreaks}}</div>
<br style=\"clear:both;\"/>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
© 2007 Hush Labs, LLC
35

© 2007 Hush Labs, LLC
36

“I want the admin to
look like the rest of
the site.”
© 2007 Hush Labs, LLC
37

File: urls.py
from django.contrib.auth.views import login, logout
urlpatterns = patterns('',
url(r'^accounts/login/$', login, name='login'),
url(r'^accounts/logout/$', logout, name='logout'),
)
File: templates/registration/login.html
{% extends \"base.html\" %}
{% block content %}
<form action=\"\" method=\"post\" accept-charset=\"utf-8\">
{% if form.username.errors %}{{ form.username.html_error_list }}{% endif %}
<p><label for=\"id_username\">Username:</label> {{form.username}}</p>
{% if form.password.errors %}{{ form.password.html_error_list }}{% endif %}
<p><label for=\"id_password\">Password:</label> {{form.password}}</p>
<p><input type=\"submit\" value=\"Login\"></p>
</form>
{% endblock %}
File: templates/registration/logged_out.html
{% extends \"base.html\" %}
{% block content %}
<h1>You are now logged out</h1>
{% endblock %}
© 2007 Hush Labs, LLC
38

© 2007 Hush Labs, LLC
39

© 2007 Hush Labs, LLC
40

File: templates/base.html
<body>
<div id=\"doc\" class=\"yui-t4\">
<div id=\"hd\"><h1><a href=\"/\">The BarCamp Liveblog</a></h1></div>
<div id=\"bd\">
<div id=\"yui-main\">
<div class=\"yui-b\">
{% block content %}{% endblock %}
</div>
</div>
<div id=\"sidebar\" class=\"yui-b\">
<ul>
<li><a href=\"{% url add-post %}\">Add a Blog Post</a></li>
{% block extralinks %}{% endblock %}
{% if user.is_authenticated %}
<li><a href=\"{% url logout %}\">Logout</a></li>
{% else %}
<li><a href=\"{% url login %}\">Login</a></li>
{% endif %}
</ul>
</div>
</div>
<div id=\"ft\"><div id=\"copyright\">&copy;2007 <a href=\"http://www.hushlabs.com\">Hush Labs, LLC</
a><br/>Header image adapted from flickr user <a href=\"http://www.flickr.com/photos/eschipul/
254400673/\">eschipul's</a>.</div></div>
</div>
</body>
© 2007 Hush Labs, LLC
41

Forms
© 2007 Hush Labs, LLC
42

File: urls.py
urlpatterns = patterns('',
url(r'^add_post/$', views.add_post, name='add-post'),
)
File: templates/post_form.html
{% extends \"base.html\" %}
{% block content %}
<form action=\"\" method=\"post\" accept-charset=\"utf-8\">
{{form.title.errors}}
<p>{{form.title.label_tag}}: {{form.title}}</p>
{{form.slug.errors}}
<p>{{form.slug.label_tag}}: {{form.slug}}</p>
{{form.author.as_hidden}}
<p><input type=\"submit\" value=\"Add\"></p>
</form>
{% endblock %}
© 2007 Hush Labs, LLC
43

File: liveblog/views.py
from django import newforms as forms
from django.contrib.auth.decorators import login_required
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
@login_required
def add_post(request):
PostForm = forms.form_for_model(Post, fields=('title', 'slug', 'author'))
if request.method == 'POST':
form = PostForm(request.POST)
if form.is_valid():
new_post = form.save()
return HttpResponseRedirect(reverse('post-detail', args=[new_post.slug]))
else:
form = PostForm(initial={'author':request.user.id})
return render_to_response('liveblog/post_form.html', {'form':form})
© 2007 Hush Labs, LLC
44

File: urls.py
urlpatterns = patterns('',
url(r'^post/(?P<slug>.+)/add_item/', views.add_item, name='add-post-item'),
)
File: templates/liveblog/post_item_form.html
{% extends \"liveblog/post_detail.html\" %}
{% block newitemform %}
<form enctype=\"multipart/form-data\" action=\"\" method=\"post\" accept-charset=\"utf-8\">
{{form.content.errors}}
<p>{{form.content.label_tag}}: {{form.content}}</p>
{{form.image.errors}}
<p>{{form.image.label_tag}}: {{form.image}}</p>
<p><input type=\"submit\" value=\"Add\"></p>
</form>
{% endblock %}
File: templates/liveblog/post_detail.html
{% for item in items %}
<div class=\"post_item\">
<div class=\"item_tagline\">Added on {{item.created}}</div>
{% if item.image %}
<div class=\"item_image\"><img src=\"/public/{{item.image}}\"></div>
{% endif %}
<div class=\"item_content\">{{item.content|linebreaks}}</div>
<br style=\"clear:both;\"/>
</div>
{% endfor %}
{% block newitemform %}{% endblock %}
{% block extralinks %}
<li><a href=\"{% url add-post-item post.slug %}\">Add an item</a></li>
{% endblock %}
© 2007 Hush Labs, LLC
45

File: liveblog/views.py
class PostItemForm(forms.Form):
image = forms.ImageField(required=False)
content = forms.CharField(widget=forms.Textarea(), required=True)
def save(self, post):
uploaded_file = self.cleaned_data['image']
new_item = PostItem(post=post, content=self.cleaned_data['content'])
new_item.save_image_file(uploaded_file.filename, uploaded_file.content)
new_item.save()
return new_item
@login_required
def add_item(request, slug):
post = Post.objects.get(slug=slug)
items = post.items.all()
if request.method == \"POST\":
form = PostItemForm(request.POST, request.FILES)
if form.is_valid():
new_item = form.save(post)
return HttpResponseRedirect(reverse('post-detail', args=[new_item.post.slug]))
else:
form = PostItemForm()
return render_to_response('liveblog/post_item_form.html', locals())
© 2007 Hush Labs, LLC
46

© 2007 Hush Labs, LLC
47

That’s It!
48

Nathan Eror
neror@hushlabs.com
http://natuba.com/neror
49