Feature #878

Basic Django Web Application

Added by Daniel Curtis about 8 years ago. Updated over 7 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Daniel Curtis

Target version:

Python

Start date:

12/04/2016

Due date:

% Done:

100%

Estimated time:

Spent time:

3.50 h

Description

Table of contents
Setup The Environment
Install Django
New Django App
Create a Form
Refactoring
Static Files
- CSS
- Background Image
Resources

This is a condensed version of the Django tutorial found here

Setup The Environment¶

Setup a python virtual environment to develop in
- For Arch Linux use issue #876
- For FreeBSD use issue #874

Install Django¶

Switch to the pydev user and activate the virtualenv:
```
su - pydev
source ~/venv/new_app/bin/activate
```

And install Django:
```
pip install Django
```

New Django App¶

Create a new Django project:

django-admin startproject www_example_com
cd www_example_com

Edit the project settings.py file:
```
vi www_example_com/settings.py
```
- And add the host IP address of the local development machine:
```
ALLOWED_HOSTS = ['192.168.1.90']
```

Test the new app by running the development test web server:
```
./manage.py runserver 0.0.0.0:8000
```
NOTE: Press CTRL+C to stop the test web server

Now create a new simple poll web application:
```
./manage.py startapp polls
```

Initial Framework¶

Create View¶

Create the initial view:

vi polls/views.py

And add the following:

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")

Now map the view to a URL by creating:

vi polls/urls.py

And add the following:

from django.conf.urls import url

from . import views

app_name = 'polls'
urlpatterns = [
    url(r'^$', views.index, name='index'),
]

Next, point the root URLconf at the polls.urls module:

vi www_example_com/urls.py

And add the URL handler the polls/ part of the web application:

from django.conf.urls import include, url
from django.contrib import admin

app_name = 'polls'
urlpatterns = [
    url(r'^polls/', include('polls.urls')),
    url(r'^admin/', admin.site.urls),
]

Rerun the development test server:
```
./manage.py runserver 0.0.0.0:8000
```
- And open a web browser and go to http://192.168.1.90/polls
  NOTE: Press CTRL+C to stop the test web server

Connect to a Database¶

Begin by initializing the database:
```
./manage.py migrate
```

Create Model¶

Create the data model file:

vi polls/models.py

And add the following to create two data models, Question and Choice:

import datetime
from django.db import models
from django.utils import timezone

class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')

    def __str__(self):
        return self.question_text

    def was_published_recently(self):
        now = timezone.now()
        return now - datetime.timedelta(days=1) <= self.pub_date <= now

class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

    def __str__(self):
        return self.choice_text

Edit the www_example_com/settings.py file:

vi www_example_com/settings.py

And add the polls.apps.PollsConfig dotted path to the INSTALLED_APPS setting to include the app in our project:

INSTALLED_APPS = [
    'polls.apps.PollsConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Now create the polls data model migrations to update the database structure:
```
./manage.py makemigrations polls
```

Then apply the migration:
```
./manage.py migrate
```

Adding Questions¶

Start the management shell:

./manage.py shell

And run the following to create a question:

import django
from polls.models import Question, Choice
from django.utils import timezone

q = Question(question_text="What's new?", pub_date=timezone.now())
q.save()

Adding Choices¶

Start the management shell:

./manage.py shell

And run the following to create two choices:

import django
from polls.models import Question, Choice
from django.utils import timezone

q = Question.objects.get(pk=1)
q.choice_set.create(choice_text='Not much', votes=0)
q.choice_set.create(choice_text='Same Stuff, Different Day', votes=0)

Admin Interface¶

Create an admin user:
```
./manage.py createsuperuser
```

Edit the admin file for the poll app:

vi polls/admin.py

And add the following to make the poll app modifiable in the admin interface

from django.contrib import admin
from .models import Question

admin.site.register(Question)

Rerun the development test server:
```
./manage.py runserver 0.0.0.0:8000
```
- And open a web browser and go to http://192.168.1.90/admin
  NOTE: Press CTRL+C to stop the test web server

Extending a View With Arguments¶

Edit the polls/views.py file:

vi polls/views.py

Add a few more views to polls/views.py. These views are slightly different, because they take an argument:

# Add after the index function
def detail(request, question_id):
    return HttpResponse("You're looking at question %s." % question_id)

def results(request, question_id):
    response = "You're looking at the results of question %s." 
    return HttpResponse(response % question_id)

def vote(request, question_id):
    return HttpResponse("You're voting on question %s." % question_id)

Then edit the polls/urls.py file:

vi polls/urls.py

And add the new views into the polls.urls module by adding the following url() calls:

from django.conf.urls import url

from . import views

app_name = 'polls'
urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^(?P<question_id>[0-9]+)/$', views.detail, name='detail'),
    url(r'^(?P<question_id>[0-9]+)/results/$', views.results, name='results'),
    url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, name='vote'),
]

Dynamic Views¶

Edit the views of the polls app:

vi polls/views.py

And refactor the index() view to display the latest 5 poll questions in the system, separated by commas, according to publication date:

from django.http import HttpResponse
from django.shortcuts import render
from .models import Question

def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    context = {'latest_question_list': latest_question_list}
    return render(request, 'polls/index.html', context)

# Leave the rest of the views (detail, results, vote) unchanged

Create a directory for templates in the polls app, then another directory in the templates directory for polls:
```
mkdir polls/templates
mkdir polls/templates/polls
```

Then create a template for the index of the polls app:

vi polls/templates/polls/index.html

And add the following:

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

404 Error Page¶

Edit the polls app views:

vi polls/views.py

And refactor the detail() view to display a 404 error for non-existent objects:

from django.shortcuts import get_object_or_404, render

from .models import Question
# ...
def detail(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    return render(request, 'polls/detail.html', {'question': question})

And create a template for the detail page in the polls app:

vi polls/templates/polls/detail.html

And add the following:

<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }}</li>
{% endfor %}
</ul>

Create a Form¶

Edit the polls app detail template:

vi polls/templates/polls/detail.html

And refactor the template to add an HTML <form> element:

<h1>{{ question.question_text }}</h1>

{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

<form action="{% url 'polls:vote' question.id %}" method="post">
{% csrf_token %}
{% for choice in question.choice_set.all %}
    <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" />
    <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br />
{% endfor %}
<input type="submit" value="Vote" />
</form>

Edit the polls app views handler:

vi polls/views.py

And refactor the vote() and results() functions to create the real versions:

from django.shortcuts import get_object_or_404, render
from django.http import HttpResponseRedirect, HttpResponse
from django.urls import reverse
from .models import Choice, Question

# ...
def results(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    return render(request, 'polls/results.html', {'question': question})

def vote(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    try:
        selected_choice = question.choice_set.get(pk=request.POST['choice'])
    except (KeyError, Choice.DoesNotExist):
        # Redisplay the question voting form.
        return render(request, 'polls/detail.html', {
            'question': question,
            'error_message': "You didn't select a choice.",
        })
    else:
        selected_choice.votes += 1
        selected_choice.save()
        # Always return an HttpResponseRedirect after successfully dealing
        # with POST data. This prevents data from being posted twice if a
        # user hits the Back button.
        return HttpResponseRedirect(reverse('polls:results', args=(question.id,)))

Create the polls app template for the results:

vi polls/templates/polls/results.html

And add the following:

<h1>{{ question.question_text }}</h1>

<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
{% endfor %}
</ul>

<a href="{% url 'polls:detail' question.id %}">Vote again?</a>

Refactoring¶

Edit the polls app URL handler:

vi polls/urls.py

And refactor the second and third URL regexes that handle the Detail and Results views:

from django.conf.urls import url
from . import views

app_name = 'polls'
urlpatterns = [
    url(r'^$', views.IndexView.as_view(), name='index'),
    url(r'^(?P<pk>[0-9]+)/$', views.DetailView.as_view(), name='detail'),
    url(r'^(?P<pk>[0-9]+)/results/$', views.ResultsView.as_view(), name='results'),
    url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, name='vote'),
]

Then edit the polls app views handler:
```
vi polls/views.py
```

Refactor the old index(), detail(), and results() views and use Django’s generic views instead:

from django.shortcuts import get_object_or_404, render
from django.http import HttpResponseRedirect
from django.urls import reverse
from django.views import generic
from django.utils import timezone
from .models import Choice, Question

class IndexView(generic.ListView):
    template_name = 'polls/index.html'
    context_object_name = 'latest_question_list'

    def get_queryset(self):
        """ 
        Return the last five published questions (not including those set to be
        published in the future).
        """ 
        return Question.objects.filter(
            pub_date__lte=timezone.now()
        ).order_by('-pub_date')[:5]

class DetailView(generic.DetailView):
    model = Question
    template_name = 'polls/detail.html'
    def get_queryset(self):
        """ 
        Excludes any questions that aren't published yet.
        """ 
        return Question.objects.filter(pub_date__lte=timezone.now())

class ResultsView(generic.DetailView):
    model = Question
    template_name = 'polls/results.html'

Static Files¶

CSS¶

Create a CSS file for the polls app:

vi polls/static/polls/style.css

And add the following:
```
li a {
    color: green;
}
```

Next, edit the polls app index.html template:

vi polls/templates/polls/index.html

An add the following at the top:

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

Background Image¶

Create an images subdirectory in the polls/static/polls/ directory:
```
mkdir polls/static/polls/image
```
NOTE: Inside this directory, put an image called background.gif.

Then, edit the stylesheet created earlier:

vi polls/static/polls/style.css

And add the following:

body {
    background: white url("image/background.gif") no-repeat right bottom;
}

Set the STATIC_ROOT setting to the directory from which you’d like to serve these files:
```
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
```