Building a Dynamic Website Using Django

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

© 2007 Hush Labs, LLC
1

Who am I?

2

Let’s Build
Something!
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

4

> django-admin.py startproject barcamplive
> cd barcamplive
> ./manage.py startapp liveblog
> mkdir -p templates public/uploads

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 = quot;%s/publicquot; % 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 = (
quot;%s/templatesquot; % PROJECT_ROOT,
)

6

Start With the
Data Model

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=(quot;titlequot;,))

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,
image = models.ImageField(upload_to=quot;uploadsquot;, blank=True)
content = models.TextField(blank=True)

def __str__(self):
return quot;Post Item for '%s' created at %squot; %
(self.post.title, self.created.strftime('%I:%M %p %Z'))

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
9

> ./manage.py syncdb
> ./manage.py runserver

10

The Django
Admin Site

11

12

Django URLs

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')),
)

14

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 = quot;%s/publicquot; % 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 = (
quot;%s/templatesquot; % PROJECT_ROOT,
)

16

17

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,
slug = models.SlugField(prepopulate_from=(quot;titlequot;,))

class Admin:
list_display = ('title', 'author', 'created')
list_filter = ('created', 'author')
search_fields = ('title',)
date_hierarchy = 'created'

19


post = models.ForeignKey(Post, related_name='items')
image = models.ImageField(upload_to=quot;uploadsquot;, blank=True)
content = models.TextField(blank=True)

class Admin:
list_display = ('post', 'created')
list_filter = ('created', 'post')
search_fields = ('content',)
date_hierarchy = 'created'

20


post = models.ForeignKey(Post, related_name='items',
edit_inline=models.TABULAR, num_in_admin=1)
image = models.ImageField(upload_to=quot;uploadsquot;, blank=True, core=True)
content = models.TextField(blank=True, core=True)

21

What About Our
Visitors?

22

File: templates/base.html

<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot;
quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;>
<head>
<title>BarCamp Houston Live!</title>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;/public/css/reset-fonts-grids.cssquot;>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;/public/css/base-min.cssquot;>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;/public/css/live.cssquot;>
</head>
<body>
<div id=quot;docquot; class=quot;yui-t4quot;>
<div id=quot;hdquot;><h1><a href=quot;/quot;>The BarCamp Liveblog</a></h1></div>
<div id=quot;bdquot;>
<div id=quot;yui-mainquot;>
<div class=quot;yui-bquot;>

</div>
</div>
<div id=quot;sidebarquot; class=quot;yui-bquot;>

</div>
</div>
<div id=quot;ftquot;><div id=quot;copyrightquot;>©2007 <a href=quot;http://www.hushlabs.comquot;>Hush Labs, LLC</
a><br/>Header image adapted from flickr user <a href=quot;http://www.flickr.com/photos/eschipul/
254400673/quot;>eschipul's</a>.</div></div>
</div>
</body>
</html>

23

File: urls.py

url(r'^$', direct_to_template, {'template': 'base.html'},
name='index'),

(r'^public/(?P<path>.*)$', 'django.views.static.serve',
{'document_root':settings.MEDIA_ROOT}),
)

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

25

File: urls.py

from django.views.generic.simple import direct_to_template

name='index'),

(r'^public/(?P<path>.*)$', 'django.views.static.serve',
{'document_root':settings.MEDIA_ROOT}),
)

26

27

{{ Variables|Filters}} {% Tags %}

Templates
Inheritance
28


{% block content %}{% endblock %}
</div>
</div>

File: templates/liveblog/post_list.html

{% extends quot;base.htmlquot; %}
{% block content %}
<div id=quot;post_listquot;>
<h1>Current Liveblogs</h1>
{% if object_list %}
<ul>
{% for post in object_list %}
<li><a href=quot;{% url post-detail post.slug %}quot;>{{post.title}}</a></li>
{% endfor %}
</ul>
{% else %}
<h3>There are no blogs yet!</h3>
{% endif %}
</div>
{% endblock %}

29

File: urls.py

from django.views.generic.list_detail import object_list

url(r'^$', object_list,
{'queryset':Post.objects.all(),'allow_empty':True},
name='index')
)

30

<a href=quot;{% url post-detail post.slug %}quot;>{{post.title}}</a>

File: urls.py

from django.views.generic.list_detail import object_detail
<a href=quot;quot;>Django is fun!</a>
name='index'),
url(r'^post/(?P<slug>.*)/$', object_detail,
{'queryset':Post.objects}, name='post-detail'),
)
File: templates/liveblog/post_detail.html

{% block content %}
<div class=quot;postquot;>
<div class=quot;titlequot;>{{object.title}}</div>
<div class=quot;taglinequot;>Started at {{object.created}}</div>
<div class=quot;contentquot;>
{% for item in object.items %}
<div class=quot;post_itemquot;>
<div class=quot;item_taglinequot;>Added on {{item.created}}</div>
{% if item.image %}<div class=quot;item_imagequot;><img src=quot;/public/{{item.image}}quot;></div>{% endif %}
<div class=quot;item_contentquot;>{{item.content|linebreaks}}</div>
<br style=quot;clear:both;quot;/>
</div>
{% endfor %}
</div>
</div>
{% endblock %}

31

32

Views
django.http.HttpRequest

View Function

django.http.HttpResponse

33

File: urls.py

from liveblog import views

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})

34


{% block content %}
<div class=quot;postquot;>
<div class=quot;titlequot;>{{post.title}}</div>
<div class=quot;taglinequot;>Started at {{post.created}}</div>
<div class=quot;contentquot;>
{% for item in items %}
{% if item.image %}<div class=quot;item_imagequot;><img src=quot;/public/{{item.image}}quot;></div>{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endblock %}

35

36

“I want the admin to
look like the rest of
the site.”

37

File: urls.py

from django.contrib.auth.views import login, logout

url(r'^accounts/login/$', login, name='login'),
url(r'^accounts/logout/$', logout, name='logout'),
)

File: templates/registration/login.html

{% block content %}
<form action=quot;quot; method=quot;postquot; accept-charset=quot;utf-8quot;>
{% if form.username.errors %}{{ form.username.html_error_list }}{% endif %}
<p><label for=quot;id_usernamequot;>Username:</label> {{form.username}}</p>
{% if form.password.errors %}{{ form.password.html_error_list }}{% endif %}
<p><label for=quot;id_passwordquot;>Password:</label> {{form.password}}</p>
<p><input type=quot;submitquot; value=quot;Loginquot;></p>
</form>
{% endblock %}

File: templates/registration/logged_out.html

{% block content %}
<h1>You are now logged out</h1>
{% endblock %}

38

39

40


<body>
<div id=quot;docquot; class=quot;yui-t4quot;>
<div id=quot;hdquot;><h1><a href=quot;/quot;>The BarCamp Liveblog</a></h1></div>
<div id=quot;bdquot;>
{% block content %}{% endblock %}
</div>
</div>
<div id=quot;sidebarquot; class=quot;yui-bquot;>
<ul>
<li><a href=quot;{% url add-post %}quot;>Add a Blog Post</a></li>
{% block extralinks %}{% endblock %}
{% if user.is_authenticated %}
<li><a href=quot;{% url logout %}quot;>Logout</a></li>
{% else %}
<li><a href=quot;{% url login %}quot;>Login</a></li>
{% endif %}
</ul>
</div>
</div>
<div id=quot;ftquot;><div id=quot;copyrightquot;>©2007 <a href=quot;http://www.hushlabs.comquot;>Hush Labs, LLC</
a><br/>Header image adapted from flickr user <a href=quot;http://www.flickr.com/photos/eschipul/
254400673/quot;>eschipul's</a>.</div></div>
</div>
</body>

41

Forms

42

File: urls.py

url(r'^add_post/$', views.add_post, name='add-post'),
)

File: templates/post_form.html

{% block content %}
<form action=quot;quot; method=quot;postquot; accept-charset=quot;utf-8quot;>
{{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=quot;submitquot; value=quot;Addquot;></p>
</form>
{% endblock %}

43


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})

44

File: urls.py

url(r'^post/(?P<slug>.+)/add_item/', views.add_item, name='add-post-item'),
)

File: templates/liveblog/post_item_form.html

{% extends quot;liveblog/post_detail.htmlquot; %}
{% block newitemform %}
<form enctype=quot;multipart/form-dataquot; action=quot;quot; method=quot;postquot; accept-charset=quot;utf-8quot;>
{{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=quot;submitquot; value=quot;Addquot;></p>
</form>
{% endblock %}


{% for item in items %}
{% if item.image %}
<div class=quot;item_imagequot;><img src=quot;/public/{{item.image}}quot;></div>
{% endif %}
</div>
{% endfor %}
{% block newitemform %}{% endblock %}
{% block extralinks %}
<li><a href=quot;{% url add-post-item post.slug %}quot;>Add an item</a></li>
{% endblock %}
45


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 == quot;POSTquot;:
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())

46

47

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

49

Building a Dynamic Website Using Django

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Building a Dynamic Website Using Django

Similaire à Building a Dynamic Website Using Django (20)

Dernier

Dernier (20)

Building a Dynamic Website Using Django