diff --git a/adoc/diag-9ca0787305b4c33019ebc11adc951857.png b/adoc/diag-9ca0787305b4c33019ebc11adc951857.png new file mode 100644 index 0000000..0336c4c Binary files /dev/null and b/adoc/diag-9ca0787305b4c33019ebc11adc951857.png differ diff --git a/source/diag-9ca0787305b4c33019ebc11adc951857.png b/source/diag-9ca0787305b4c33019ebc11adc951857.png new file mode 100644 index 0000000..0336c4c Binary files /dev/null and b/source/diag-9ca0787305b4c33019ebc11adc951857.png differ diff --git a/source/django/mvc.adoc b/source/django/mvc.adoc index 38303eb..c73ba19 100644 --- a/source/django/mvc.adoc +++ b/source/django/mvc.adoc @@ -1,10 +1,10 @@ -== Contrôleurs +== Modèle-vue-template Dans un *pattern* MVC classique, la traduction immédiate du **contrôleur** est une **vue**. Et comme on le verra par la suite, la **vue** est en fait le **template**. Les vues agrègent donc les informations à partir d'un des composants et les font transiter vers un autre. En d'autres mots, la vue sert de pont entre les données gérées par la base et l'interface utilisateur. include::mvc/views.adoc[] -include::mvc/views.templates.adoc[] +include::mvc/templates.adoc[] include::mvc/layout.adoc[] include::mvc/urls.adoc[] diff --git a/source/django/mvc/layout.adoc b/source/django/mvc/layout.adoc index edc62ff..854246b 100644 --- a/source/django/mvc/layout.adoc +++ b/source/django/mvc/layout.adoc @@ -1,158 +1,165 @@ -************ -Mise en page -************ +=== Mise en page +Pour que nos pages soient un peu plus *eye-candy* que ce qu'on a présenté ci-dessus, nous allons modifié notre squelette pour qu'il se base sur `Bootstrap `_. Nous placerons une barre de navigation principale, la possibilité de se connecter pour l'utilisateur et définirons quelques emplacements à utiliser par la suite. Reprenez votre fichier `base.html` et modifiez le comme ceci: -Pour que nos pages soient un peu plus *eye-candy* que ce qu'on a présenté ci-dessus, nous allons modifié notre squelette pour qu'il se base sur `Bootstrap `_. Nous placerons une barre de navigation principale, la possibilité de se connecter pour l'utilisateur et définirons quelques emplacements à utiliser par la suite. Reprenez votre fichier ``base.html`` et modifiez le comme ceci: +[source,html] +---- -.. code-block:: html +{% load staticfiles %} - {% load staticfiles %} + + + - - - + + + + + + + + + + + Gwift + - - - - - - - - - - - Gwift - + - - - -
- +
+ + + +
+
+
+ {% block content %}{% endblock %}
- - - -
- {% include "_footer.html" %} -
- - - +
+ + + +
+ {% include "_footer.html" %} +
+ + + +---- Quelques remarques: - * La première ligne du fichier inclut le *tag* ``{% load staticfiles %}``. On y reviendra par la suite, mais en gros, cela permet de faciliter la gestion des fichiers statiques, notamment en les appelent grâce à la commande ``{% static 'img/header.png' %}`` ou ``{% static 'css/app_style.css' %}``. - * La balise ```` est bourée d'appel vers des ressources stockées sur des :abbr:`CDN (Content Delivery Networks)`. - * Les balises ``{% block content %} {% endblock %}`` permettent de faire hériter du contenu depuis une autre page. On l'utilise notamment dans notre page ``templates/wish/list.html``. - * Pour l'entête et le bas de page, on fait appel aux balises ``{% include 'nom_du_fichier.html' %}``: ces fichiers sont des fichiers physiques, placés sur le filesystem, juste à côté du fichier ``base.html``. De façon bête et méchante, cela inclut juste du contenu HTML. Le contenu des fichiers ``_menu_items.html`` et ``_footer.html`` est copié ci-dessous. +* La première ligne du fichier inclut le *tag* `{% load staticfiles %}`. On y reviendra par la suite, mais en gros, cela permet de faciliter la gestion des fichiers statiques, notamment en les appelent grâce à la commande `{% static 'img/header.png' %}` ou `{% static 'css/app_style.css' %}`. +* La balise `` est bourée d'appel vers des ressources stockées sur des :abbr:`CDN (Content Delivery Networks)`. +* Les balises `{% block content %} {% endblock %}` permettent de faire hériter du contenu depuis une autre page. On l'utilise notamment dans notre page `templates/wish/list.html`. +* Pour l'entête et le bas de page, on fait appel aux balises `{% include 'nom_du_fichier.html' %}`: ces fichiers sont des fichiers physiques, placés sur le filesystem, juste à côté du fichier `base.html`. De façon bête et méchante, cela inclut juste du contenu HTML. Le contenu des fichiers `_menu_items.html` et `_footer.html` est copié ci-dessous. -.. code-block:: html +[source,html] +---- + - - - {% extends "base.html" %} +{% extends "base.html" %} - {% block content %} -

Mes listes de souhaits

- - {% endblock %} - - - -.. code-block:: html - - - -