Templates

6 years ago · a9b7a27df2
16 changed files with 254 additions and 10 deletions
--- a/exemple/mon_site/blog/pycache/urls.cpython-36.pyc
+++ b/exemple/mon_site/blog/pycache/urls.cpython-36.pyc
--- a/exemple/mon_site/blog/pycache/views.cpython-36.pyc
+++ b/exemple/mon_site/blog/pycache/views.cpython-36.pyc
--- a/exemple/mon_site/blog/templates/blog/list_articles.html
+++ b/exemple/mon_site/blog/templates/blog/list_articles.html
@ -0,0 +1,9 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<h3>Liste des articles</h3>
+{% for article in articles %}
+  <h4><a href="{% url 'blog:article' article.pk %}">{{article.title}}</a></h4>
+  <p>Article écrit le {{article.date}}</p>
+{% endfor %}
+{% endblock %}
--- a/exemple/mon_site/blog/templates/blog/view_article.html
+++ b/exemple/mon_site/blog/templates/blog/view_article.html
@ -0,0 +1,9 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<h2>{{article.title}}</h2>
+Publié le {{article.date}}.
+<br/>
+<br/>
+{{article.text}}
+{% endblock %}
--- a/exemple/mon_site/blog/urls.py
+++ b/exemple/mon_site/blog/urls.py
@ -3,5 +3,6 @@ from . import views

 app_name = "blog"
 urlpatterns = [
-    path('', views.index),
+    path('', views.index, name="index"),
+    path('article/<int:pk>', views.view_article, name="article")
 ]
--- a/exemple/mon_site/blog/views.py
+++ b/exemple/mon_site/blog/views.py
@ -1,14 +1,12 @@
-from django.shortcuts import render
+from django.shortcuts import render, get_object_or_404
 from django.http import HttpResponse

 from .models import Article

 def index(request):
    articles = Article.objects.order_by('-date')
-    s = ("Bonjour et bienvenue"
-         " sur mon super site trop cool"
-         "\nMes articles :"
-    )
-    for a in articles:
-        s += a.title + "\n"
-    return HttpResponse(s)
+    return render(request, 'blog/list_articles.html', {'articles':articles})
+
+def view_article(request, pk):
+    article = get_object_or_404(Article, pk=pk)
+    return render(request, 'blog/view_article.html', {'article':article})
--- a/exemple/mon_site/mon_site/pycache/settings.cpython-36.pyc
+++ b/exemple/mon_site/mon_site/pycache/settings.cpython-36.pyc
--- a/exemple/mon_site/mon_site/settings.py
+++ b/exemple/mon_site/mon_site/settings.py
@ -55,7 +55,7 @@ ROOT_URLCONF = 'mon_site.urls'
 TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
--- a/exemple/mon_site/templates/base.html
+++ b/exemple/mon_site/templates/base.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Mon super blog</title>
+		<meta charset="utf-8"/>
+	</head>
+	<body>
+		<h1>Mon super titre qu'on verra partout</h1>
+		<a href="{% url 'blog:index' %}">Retour à l'accueil</a>
+		{% block content %}{% endblock %}
+	</body>
+</html>
--- a/formation.md
+++ b/formation.md
@ -341,6 +341,7 @@ def index(request):
 ---
 # L'architecture MVT
 ## T comme Templates
+Dans `blog/templates/blog/list_articles.html`:
 ```html
 <h3>Liste des articles</h3>
 {% for article in articles %}
@ -349,6 +350,220 @@ def index(request):
  <p>Article écrit le {{article.date}}</p>
 {% endfor %}
 ```
+---
+## T comme Templates
+Dans `blog/views.py` :
+```python
+from django.shortcuts import render
+from django.http import HttpResponse
+
+from .models import Article
+
+def index(request):
+    articles = Article.objects.order_by('-date')
+    return render(
+    	request, 
+        'blog/list_articles.html', 
+        {'articles':articles}
+    )
+```
+---
+
+## Votre site :
+
+![](vue_3.png)
+
+---
+
+## Vous :
+![](https://tr2.cbsistatic.com/hub/i/2014/05/15/f8964afd-bd82-4e0e-bcbe-e927363dcdc1/3b858e39e2cf183b878f54cad0073a67/codedoge.jpg)
+
+---
+
+## Étendre un template
+Dans `templates/base.html` :
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mon super blog</title>
+    <meta charset="utf-8"/>
+  </head>
+  <body>
+    <h1>Mon super titre qu'on verra partout</h1>
+      {% block content %}{% endblock %}
+  </body>
+</html>
+```
+
+---
+## Étendre un template
+Dans `mon_site/settings.py` (ligne 55):
+
+```python
+#...
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+#...
+```
+
+---
+## Étendre un template
+Dans `blog/templates/blog/list_articles.html`
+```python
+{% extends 'base.html' %}
+
+{% block content %}
+<h3>Liste des articles</h3>
+{% for article in articles %}
+<div>
+  <h4>{{article.title}}</h4>
+  <p>Article écrit le {{article.date}}</p>
+{% endfor %}
+{% endblock %}
+```
+
+---
+## Votre site
+![](vue_4.png)
+
+---
+
+## Exercice : afficher un article
+Objectif :
+![](vue_5.png)
+
+---
+
+## Exercice : afficher un article
+
+- Créer la vue dédiée (`def view_article(request, pk):`)
+- La remplir (conseil regarder `django.shortcuts.get_object_or_404`)
+- Créer l'url dédiée dans `blog/urls.py` (elle sera de la forme `article/<int:pk>`)
+- Créer le template associé (dans `blog/templates/blog/view_article.html`)
+
+---
+
+## Ma solution
+Dans `blog/views.py` :
+```python
+def view_article(request, pk):
+    article = get_object_or_404(Article, pk=pk)
+    return render(
+    	request, 
+        'blog/view_article.html', 
+        {'article':article}
+    )
+```
+Dans `blog/urls.py` :
+```python
+path('article/<int:pk>', views.view_article)
+```
+---
+## Ma solution
+Dans `blog/templates/blog/view_article.html`:
+```html
+{% extends 'base.html' %}
+
+{% block content %}
+<h2>{{article.title}}</h2>
+Publié le {{article.date}}.
+<br/>
+<br/>
+{{article.text}}
+{% endblock %}
+```
+
+---
+## Tags
+
+### → Commandes pour les templates
+Exemple : `{% url %}`
+
+Dans `blog/urls.py` :
+```python
+from django.urls import path
+from . import views
+
+app_name = "blog"
+urlpatterns = [
+    path('', views.index, name="index"),
+    path(
+        'article/<int:pk>', 
+        views.view_article, 
+        name="article"
+    )
+]
+```
+
+---
+## Tags
+
+Dans `blog/templates/blog/list_articles.html` :
+```html
+{% extends 'base.html' %}
+
+{% block content %}
+<h3>Liste des articles</h3>
+{% for article in articles %}
+  <h4>
+    <a href="{% url 'blog:article' article.pk %}">
+      {{article.title}}
+    </a>
+  </h4>
+  <p>Article écrit le {{article.date}}</p>
+{% endfor %}
+{% endblock %}
+```
+---
+## Tags
+
+Dans `templates/base.html` :
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mon super blog</title>
+    <meta charset="utf-8"/>
+  </head>
+  <body>
+    <h1>Mon super titre qu'on verra partout</h1>
+    <a href="{% url 'blog:index' %}">
+      Retour à l'accueil
+    </a>
+    {% block content %}{% endblock %}
+    </body>
+</html>
+```
+---
+
+![](vue_7.png)
+
+---
+
+![](vue_6.png)
+
+---
+
+# Site admin
+
+---
+
+# Forms
+
 ---

 # Sites intéressants
--- a/formation.pdf
+++ b/formation.pdf
--- a/vue_3.png
+++ b/vue_3.png
--- a/vue_4.png
+++ b/vue_4.png
--- a/vue_5.png
+++ b/vue_5.png
--- a/vue_6.png
+++ b/vue_6.png
--- a/vue_7.png
+++ b/vue_7.png