TP : Gestion d’une liste de tâches - Templates (2/3)¶
date: | 2012-04-30 13:34 |
---|---|
tags: | django, python |
category: | Django |
author: | Rémy Hubscher |
Récapitulatif¶
Nous avons vu dans le chapitre précédent comment créer le models et l’administrer dans l’admin Django.
Je vous rappelle que, dans un premier temps, nous avons une unique liste :
- Nous voulons ajouter des tâches dans la liste
- Nous voulons dire que la tâche est réalisée (la barrer)
- Nous voulons pouvoir vider la liste en fin de journée
- Nous voulons pouvoir marquer toutes les tâches comme terminée
- Nous voulons pouvoir supprimer une tâche
Les views¶
Pour commencer nous souhaitons afficher notre liste de tâche.
Nous commençons donc par faire le HTML/CSS/JS :
templates/todo/tasks-list.html
{% load i18n staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% trans 'Todo list' %}</title>
<link rel="stylesheet" href="{% static 'todo/base.css' %}">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>{% trans 'Todos' %}</h1>
<input id="new-todo" placeholder="{% trans 'What needs to be done?' %}" autofocus>
</header>
<section id="main">
<input id="toggle-all" type="checkbox" >
<label for="toggle-all">{% trans 'Mark all as complete' %}</label>
<ul id="todo-list">
<!-- C'est ici que ça se passe -->
</ul>
</section>
<footer id="footer">
<span id="todo-count"></span>
<button id="clear-completed">{% trans 'Clear completed' %}</button>
</footer>
</section>
<footer id="info">
<p>{% trans 'Double-click to edit a todo.' %}</p>
</footer>
</body>
</html>
static/todo/base.css
À récupérer ici : https://bitbucket.org/natim/django-story/raw/tip/demos/tuto_django/todo/static/todo/base.css
static/todo/bg.png
À récupérer ici : https://bitbucket.org/natim/django-story/raw/tip/demos/tuto_django/todo/static/todo/bg.png
Arborescence¶
Vous devez normalement maintenant avoir l’arborescence suivante
todo/
├── admin.py
├── __init__.py
├── models.py
├── static
│ └── todo
│ ├── app.js
│ ├── base.css
│ └── bg.png
├── templates
│ └── todo
│ └── tasks-list.html
├── tests.py
└── views.py
Views¶
Nous allons ensuite écrire notre première views, qui va demander d’afficher la liste des tâches.
# -*- coding: utf-8 -*-
from django.views.generic import TemplateView
class TasksView(TemplateView):
template_name="todo/tasks-list.html"
Cette views va pour l’instant simplement charger notre template todo/tasks-list.html et l’afficher.
Url¶
Ne pas oublier de définir l’URL
# -*- coding: utf-8 -*-
from django.conf.urls import patterns, include, url
from django.contrib import admin
admin.autodiscover()
from todo.views import TasksView
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'^$', TasksView.as_view(), name='tasks-list'),
)
Le résultat¶
Connectez-vous à http://localhost:8000/ :
Afficher la liste des tâches¶
On va modifier le fichier views.py pour y ajouter des informations supplémentaires
# -*- coding: utf-8 -*-
from django.views.generic import ListView
from todo.models import Task
class TasksView(ListView):
template_name="todo/tasks-list.html"
model = Task
On va modifier le fichier tasks-list.html pour y spécifier comment afficher les tâches
<ul id="todo-list">
{% for task in object_list %}
<li>
<div class="view">
<input class="toggle" type="checkbox">
<label>{{ task.content }}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="{{ task.content }}">
</li>
{% endfor %}
</ul>
Le résultat¶
Connectez-vous à http://localhost:8000/ :