Night 1

Why django

• python is developer friendly

• large, open development community

• internationalization

• easy(ish) and powerful (sort of)

Hello python

$ python
>>> print 'hello world'
>>> def hello(name):
        print "hello "+name+"!"
>>> my_name = 'sweetie'
>>> hello(my_name)

Hello django

The development runserver can be started in a terminal with the following command.

$ python manage.py runserver 0.0.0.0:8000

You can now view the django app on http://[websiteurl]:8000

As you can see, django gives us a very boring looking test page to let us know it is working. This page can be replaced by adding a url in intro/urls.py.

urlpatterns = patterns('',
    (r'^$','intro.views.home'),
    # Snip!!
)

Now it needs a function home in a file views.py. Create intro/views.py and enter in the following:

from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello Sweetie!")

This is fun, but tedious, so instead we use templates.

from django.template.response import TemplateResponse

def home(request):
    values = {
        'name': 'Sweetie!'
    }
    return TemplateResponse(request,'base.html',values)

There is already a template in intro/templates/base.html. Add {{ name }} to it in the body

Simple Model (photos)

Start a new django app with $ python manage.py startapp photo. Add the following lines to photo/models.py. Don't worry about a class is, for now just fake your way through it.

from django.db import models

category_choices = (
  ('work','Work'),
  ('play','Play'),
)

class Photo(models.Model):
    src = models.ImageField(upload_to='photos/')
    name = models.CharField(max_length='100')
    uploaded = models.DateTimeField(auto_now_add=True)
    credit = models.CharField(max_length=50,null=True,blank=True)
    category = models.CharField(max_length=50,blank=True,choices=category_choices)

Now add photo to the INSTALLED_APPS tuple in intro/settings.py. The photo app is now added to your project. However, it is not set up in the database. For that you need to run $ python manage.py syncdb. Full documentation on the built in types of fields can be found at:

https://docs.djangoproject.com/en/dev/ref/models/fields/#field-types

The Django Admin - Great power, little responsibility

Uncomment (remove the # from in front of) these lines in intro/urls.py:

from django.contrib import admin
admin.autodiscover()

# and down the page in the big list of urls
    (r'^/admin/',include('admin.urls'),

Uncomment 'django.contrib.admin' in INSTALLED_APPS halfway down the file intro/settings.py. The admin is now visible on /admin/. The photo app does not appear because it is not registered. Register it by creating photo/admin.py with the following content.

from django.contrib import admin
from models import Photo

admin.site.register(Photo)

Now photos are accesible through the django admin. Try downloading a few images and adding them to the admin.

Connecting views.py and models.py

Open views.py and add the photos to the values dictionary

from django.template.response import TemplateResponse
from photo.models import Photo

def home(request):
    values = {
        'name': 'Sweetie!',
        'photos': Photo.objects.all(),
    }
    return TemplateResponse(request,'base.html',values)

And inside the body of base.html, print the photos with:

<ul>
  {% for photo in photos %}
  <li>
    <img src="{{ MEDIA_URL }}{{ photo.url }}" alt="{{ photo.name }}" />
    <p>
      {{ photo.name }}, by {{ photo.credit }}
    </p>
    <p>
      uploaded on {{ photo.uploaded }}
    </p>
  </li>
  {% empty %}
  <li>
    There are no photos :(
  </li>
  {% endfor %}
</ul>

Bonus 3rd party app: sorl.thumbnail

• Add sorl-thumbnail==11.12 to requirements.txt.

• Run $ sudo pip install -r requirements.txt.

• Add sorl.thumbnail to INSTALLED_APPS in the settings file.

• run $ python manage.py syncdb

• Change base.html to use this new app:

{% load thumbnail %}
<ul>
  {% for photo in photos %}
  <li>
    <a href="{{ MEDIA_URL }}{{ photo.url }}">
      {% thumbnail photo.src "200x200" crop="center" as im %}
      <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="{{ photo.name }}" />
      {% endthumbnail %}
    </a>
    <p>
      {{ photo.name }}, by {{ photo.credit }}
    </p>
    <p>
      uploaded on {{ photo.uploaded }}
    </p>
  </li>
  {% empty %}
  <li>
    There are no photos :(
  </li>
  {% endfor %}
</ul>

Night 2

The Django Templating Language

Template variables are are passed in as the third argument to a TemplateResponse. This is a dictionary, usually called "values". Any variable can be printed by placing the {{ variable_name }} in braces in a template. Any functions are executed, anything else is converted to strings. Any attribute can be called with a dot like {{ variable_name.attribute }}. For models, this is set with the __unicode__ magic method.

class Photo(models.Model):
    src = models.ImageField(upload_to='photos/')
    name = models.CharField(max_length='100')
    uploaded = models.DateTimeField(auto_now_add=True)
    credit = models.CharField(max_length=50,null=True,blank=True)
    category = models.CharField(max_length=50,blank=True,choices=category_choices)
    def __unicode__(self):
        return "A photo named " + self.name

Now in a template {{ photo }} has the same effect as writting A photo named {{ photo.name }}.

Other than variables the only programming that can be done in templates are done through filters and tags. Template filters are applied with the pip like this:

python	template input	template output	notes
x = "abcdef"	{{ x }}	abcdef
x = "abcdef"	{{ x|length }}	6
x = [1,2,3,4,5]	{{ x|length }}	5
x = "abcdef"	{{ x|upper }}	ABCDEF
x = 5	{{ x|add:10 }}	15
x = "arst"	{{ x|upper|add:" is "|add:x }}	ARST is arst	Template filter argument can be a variable.
x = "arst"	{{ x|add:5 }}		Can't add int and string, fails silently

As you can see there is a lot you can do by "piping" variables together. Simple programming tools are available int tags. Tags are denoted with braces and percents {% tag %}. Some tags require an end tag.

python	template input	template output	notes
x = range(4)	{{ x }}	[0,1,2,3]	A list of length 4
x = range(4)	{% for x in x %} {{ x }} {% endfor %}	0 1 2 3
x = []	{% for x in x %} {{ x }} {% empty %} There is nothing in x {% endfor %}	There is nothing in x
x = [1,2,3]	{% if x|length == 1 %} There is one item in the list {% elif not x %} There are no items in the list {% else %} There are {{ x|length }} items in the list {% endif %}	There are 3 items in this list.	- `elif` is short for "else if" - an empty list `[]` would be taken as `False`. - `elif` and `else` are not required but `endif` is!
	{% now "m/d/Y" %}	5/22/2012	- `now` requires a formatting string - it does not take an `endnow` tag.
x = 'my name is chris'	{% comment %} Anything in here will not be printed. {{ x }} {% endcomment %}		- Useful for documentation and depracation.

Custom templates can be loaded with {% load thumbnail %} as seen above. Full documentation for built in template tags and template filters can be found at:

https://docs.djangoproject.com/en/dev/ref/templates/builtins/

Back to the models

Last time we made a photo model. This time we're going to improve on the (admittedly weak) category system. Then we'll add a comment system. First we need to put everything under a migration system to change the database without writting SQL.

• South is already installed! Check requirements.txt if you don't believe me.

• Add 'south' to the list of INSTALLED_APPS in settings.py.

• Add south to the database with $ python manage.py syncdb. ($ implies you run in terminal)

• Create an initial migration with $ python manage.py schemamigration photo --init.

• Fake the migration with $ python manage.py migrate photo --fake

The photo app is now controlled by south migrations. Now we're ready to add a new model and modify the old Photo model. This uses a new field models.ForeignKey.

class Category(models.Model):
    name = models.CharField(max_length='100')
    private = models.BooleanField(default=False)
    def __unicode__(self):
        return self.name

class Photo(models.Model):
    src = models.ImageField(upload_to='photos/')
    name = models.CharField(max_length='100')
    uploaded = models.DateTimeField(auto_now_add=True)
    credit = models.CharField(max_length=50,null=True,blank=True)
    #category = models.CharField(max_length=50,blank=True,choices=category_choices)
    category = models.ForeignKey(Category)
    def __unicode__(self):
        return "A photo named " + self.name

• create migration with $ python manage.py schemamigration --auto photo

• run migration with $ python manage.py migrate photo

• add the following code to the admin file to make category appear (try without looking first).

from photo.models import Category, Photo

admin.site.register(Category)

Now we can do the same with a comment model. At the end of models.py add the following. Then add run schemamigration and migrate using manage.py and we're ready to learn forms.

class Comment(models.Model):
    photo = models.ForeignKey(Photo)
    screenname = models.CharField(max_length=20,null=True,blank=True)
    text = models.TextField()
    approved = models.BooleanField(default=False)
    added_on = models.DateTimeField(auto_now_add=True)

Clean Up the Templates

With multiple views we'll need a base template to save us a lot of writting. In the templates folder make a file called home.html.

{% extends "base.html" %}

{% block content %}
PUT EVERYTHING INSIDE THE <BODY> TAG INSIDE HERE
{% endblock %}

And replace the body tag inside base.html with the following:

<body>
<h1>
  <a href="/">
    My Photo Gallery!!
  </a>
</h1>
{% block content %}{% endblock %}
</body>

Change the TemplateResponse template string to "home.html" like

    return TemplateResponse(request,'home.html',values)

If you don't have questions at this point, you aren't paying attention.

Display the comments on photo detail page

Now we need need to add a url, view, and template for adding comments to photos. At this point urlpatterns in urls.py should look like. The url function allows us to give the url a name

urlpatterns = patterns('',
    (r'^$','intro.views.home'),
    url(r'^photo/(\d+)/$','intro.views.photo_detail',name='photo_detail')
)

Since there is no where that links to the photo_detail view, we need to modify home.html. We use the template tag url like {% url url_name arg1 arg2 ... %}. The url name was set in urls.py as 'photo_detail'. The only argument is the photo.id (the bit in parenthesis in the url string). Django automatically looks up what url matches this and prints it as the tag output.

    <a href="{% url photo_detail photo.id %}"> 

And we need a view at 'intro.views.photo_detail':

def photo_detail(request,photo_id):
    photo = Photo.objects.get(id=photo_id)
    comments = photo.comment_set.all()
    comments = comments.filter(approved=True)
    values = {
        'photo': photo,
        'comments': comments,
    }
    return TemplateResponse(request,'photo_detail.html',values)

and a template (photo_detail.html in the templates directory):

{% extends "base.html" %}

{% block content %}
<img src="{{ MEDIA_URL }}{{ photo.src }}" />
<div>{{ photo.name }}</div>

<ul>
  {% for comment in comments %}
  <li>
    "{{ comment.text }}"
    <br />
    {{ comment.screenname }} at {{ comment.added_on }}
  </li>
  {% empty %}
  <li>There are no comments.</li>
  {% endfor %}
</ul>

{% endblock %}

Fun with Forms!

We're minutes away from having an (almost) useful app!! Normally you'd have to write a lot of html to show inputs, display errors, and show confirmation. But we can generate a generic form using django.forms.ModelForm. In views.py:

from django import forms
from photo.models import Comment

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment

Add 'form': CommentForm(), to the values dictionary, and that's it! We now have all we need to print a form in the template. In photo_detail.html add the form as a table.

<form method="POST">
  <h2>Like what you see? Why not add a comment!</h2>
  <table>
  {{form.as_table}}
  </table>
  <input type="submit" />
</form>

Making the form actually do something

We need to add the data from the request object into the form. We also should remove the photo and approved fields because those are not set by the user. If the data is clean, save and redirect with a success message.

from django.http import HttpResponseRedirect

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        exclude = ('photo','approved')

def photo_detail(request,photo_id):
    photo = Photo.objects.get(id=photo_id)
    comments = photo.comment_set.all()
    comments = comments.filter(approved=True)
    values = {
        'photo': photo,
	'comments': comments,
	'success': 'success' in request.GET,
    }

    form = CommentForm(request.POST or None)
    if form.is_valid() and request.method == "POST":
        comment = form.save(commit=False)
        comment.photo = photo
        comment.save()
	return HttpResponseRedirect(request.path+"?success=true")

    values['form'] = form

    return TemplateResponse(request,'photo_detail.html',values)

We add a conditional, {% if request.GET.success %}, to display a success message. Also we need to to hide the photo. In photo_detail.html:

{% if request.GET.success %}
<p>
  Thank you for your comment! It has been submitted for approval.
</p>
{% else %}
<form method="POST">
  {% csrf_token %}
  <h2>Like what you see? Why not add a comment!</h2>
  <table>
  {{form.as_table}}
  </table>
  <input type="submit" />
</form>
{% endif %}

That should do it for the day.