-
python is developer friendly
-
large, open development community
-
internationalization
-
easy(ish) and powerful (sort of)
$ python
>>> print 'hello world'
>>> def hello(name):
print "hello "+name+"!"
>>> my_name = 'sweetie'
>>> hello(my_name)
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:https://[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
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
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.
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>
-
Add
sorl-thumbnail==11.12
torequirements.txt
. -
Run
$ sudo pip install -r requirements.txt
. -
Add
sorl.thumbnail
toINSTALLED_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>
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/
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
insettings.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)
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.
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 %}
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>
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.