SI Web 5 DjangoCMS

Introduction à Django CMS v 1.
Après avoir étudié les bases des formats HTML et CSS, après avoir travaillé sur les formulaires HTML et
les traitements associés en Python, nous poursuivons notre progression sur l’étude d’un système de
gestion de contenu (en anglais, on parle de Content Management System d’où l’acronyme CMS sous
lequel on évoque la plupart du temps ce genre de logiciels). La plupart du temps, quand il s’agit de
proposer un « site vitrine », c’est-à-dire, un site de présentation d’une organisation quelconque, les chefs
de projets optent généralement pour un CMS. Quand il s’agit de développer une application Web
spécifique à un besoin de gestion, la situation peut bien sûr être différente, c’est ce que nous explorons
notamment dans la spécialité SLAM.
1. Présentation de la machine virtuelle

Vous disposez d’une machine virtuelle LAMP sur laquelle des CMS ont été installés pour vous. Une fois
la machine virtuelle importée, puis lancée (voir la première annexe du présent document), le site
« DjangAmap » est accessible à l’adresse localhost:8081 (une adaptation du thème du réseau AMAP
Haut-normand) ; Le site « AmaSpip » est accessible à l’adresse localhost:8082 (une adaptation du thème
du réseau Amap IDF) ; Un site « Wordpress » est accessible à l’adresse localhost:8083.
Remarque : Le compte webmestre pour tous les CMS est jessie, le mot de passe est secret.
Les différents mots de passe mis en œuvre sont rassemblés dans l’annexe n°3 (Installation
MV).
Ces sites sont propulsés par un serveur Apache. Nous allons pour le moment nous concentrer sur un CMS
libre, écrit en Python et disponible sous licence BSD : Django CMS !
1.1. Utilisation de la machine virtuelle

Nous commençons par importer (voir comment dans l’annexe n°1 du support) la machine virtuelle à
partir de l’archive partagée au format OVF (l’extension ova signifie que les fichiers au format OVF sont
archivés1).
Nous chargeons ensuite l’adresse localhost:8081 dans Firefox.
Nous aurons besoin d’accéder au système de fichiers de la machine virtuelle depuis notre système hôte.
Pour cela, nous pouvons utiliser le navigateur de fichiers Thunar sur un système GNU/Linux ou encore le
client FTP Filezilla sur n’importe quel système (reportez vous à la section 6.3 – « Connexion à la MV
depuis votre station de travail », présente dans l’annexe n°1 du support).
1.2. Bases de données

Les bases de données utilisées pour la sérialisation des données sont gérées via un service MariaDB. Un
compte spécifique pour chaque base de données a été créé ( djangamp, amaspip, amapress). Le mot de
passe associé est toujours secret. Ces bases de données peuvent être notamment administrées via
l’interface du logiciel « phpmyadmin », accessible à l’adresse localhost:8080/phpmyadmin. Un compte
root d’administrateur général est également disponible (le mot de passe est secret!63).
1.3. Éteindre proprement la machine virtuelle

Depuis une session root (super administrateur, le mot de passe est secret!03) en console sur la machine
virtuelle, nous lançons la commande qui permet d’éteindre immédiatement et proprement la machine
virtuelle :
shutdown -h now
1 Si vous renommez l’extension ova en tar, vous pouvez décompresser cette archive pour voir…
BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 1 / 32

Introduction à Django CMS v 1.1
2. Présentation du site vitrine du réseau AMAP Auvergne
Important : Dans la section suivante, nous supposons que vous avez démarré la machine
virtuelle et que vous avez lancé le serveur de développement de Django CMS (voir la section
précédente).
Pour accéder à l’interface du

site, nous devons charger
l’adresse localhost:8081 dans
le navigateur Firefox.
2.1. Le thème
Le thème utilisé est adapté de
celui du réseau AMAP haut-
normand. Nous rappelons bien
sûr que cette adaptation a un
objectif pédagogique et qu’il
ne s’agit surtout pas de
l’utiliser en dehors de ce cadre,
car nous enfreindrions alors les
règles du droit d’auteur.
Note : Il m’a semblé plus pertinent de partir d’un thème réel. En effet, le but de notre formation
n’étant pas le web design, nous nous concentrons uniquement sur le développement…
La page d’accueil propose un contenu spécifique :
Un menu situé en haut de la page (voir la figure ci-contre), nous permet

d’accéder notamment à la page du « réseau des amap ».
Vous noterez que nous accédons directement à la sous-page « Présentation »
(nous y reviendrons plus tard…).
Quand nous descendons au bas de la page (voir la figure ci-dessous), nous retrouvons le footer de notre
site :

Cette partie est donc commune à toutes les pages du site.
2.2. Espace administrateur

Si nous sélectionnons le bouton « Retour sur la page
d’accueil », nous revenons sur la page d’accueil. Nous
sélectionnerons plutôt le lien « Espace administrateur »
disponible dans le footer du site. Nous arrivons alors sur un
formulaire (voir la figure ci-contre).
L’utilisateur jessie (associé au mot de passe presles) est un
compte d’administrateur du site. Il permet donc d’accéder à
l’ensemble des configurations du site (voir la figure ci-dessous).
Nous sélectionnons le lien des « Pages ».
Dans la figure ci-dessous, nous avons déplié les sous-pages de la page « Le réseau des amap ».

Remarque : Vous devriez alors pouvoir comprendre pourquoi la page « Accueil » n’est pas
dans le menu (comme nous avons pu le constater précédemment).
Pour chaque page créée, nous pouvons éditer à l’aide du bouton , le bouton permet d’accéder à
des propriétés spécifiques, par exemple les « Paramètres avancés » (auxquels nous pouvons également
accéder depuis l’écran d’édition de la page).
Nous accédons aux « Paramètres avancés » de la page « Accueil ». Nous pouvons
alors constater que le modèle associé est « Home Page » (voir la figure ci-contre).
Si nous accédons maintenant aux paramètres avancés de la
page « Le réseau des amap » (vous pouvez sortir du formulaire précédent en
sélectionnant le lien « pages » du fil d’Ariane), nous constatons cette fois-ci que le
modèle associé est « Page ». Nous pouvons également maintenant comprendre
(voir la figure ci-contre) pourquoi nous étions automatiquement redirigés vers la
sous-page « Présentation » tout à l’heure…
Ces deux modèles « Home Page » et « Page » correspondent à deux fichiers
templates distincts.
2.3. Les templates

Pour éditer les fichiers templates, nous devons pour cela accéder au système de fichiers de la machine
virtuelle. Nous avons déjà abordé ce sujet dans l’introduction du TP. Si vous avez oublié, reportez-vous à
l’annexe n°1 « Utilisation de la machine virtuelle » pour vous rappeler comment accéder au système de
fichiers de la machine virtuelle.
Note : Nous supposerons donc ci-dessous que vous avez un accès au système de fichiers
(que ce soit via le navigateur de fichiers « Thunar » ou le client FTP « Filezilla ») dans le
dossier /var/www (voir les consignes de l’annexe n°1).
Nous sélectionnons maintenant le dossier « djangamap » (dans lequel ont été placé les
fichiers de « Django CMS »), puis le dossier « amap_auvergne », nous pouvons accéder au
contenu du dossier « templates » (voir la figure ci-contre). Nous pouvons alors éditer les
fichiers templates « home.html » et « page.html ».
Nous retrouvons là une syntaxe proche de celle de Jinja 2 que nous avons découvert avec le générateur de
site statique Pelican.
Note : Je ne me lance pas ici dans des explications, la documentation de django (traduite en
français) est extrêmement claire.
Cependant, Dajngo CMS ne découvre pas par magie quels fichiers

templates pourront être des modèles de page. Ceci a été configuré dans le
fichier settings.py, qui se situe juste au-dessus dans l’arborescence (c’est-
à-dire dans le dossier « amap_auvergne »). Si nous éditons ce fichier, nous
pouvons constater comment cette association a été configurée (voir la figure ci-contre).
2.4. Les blocs

Nous revenons maintenant sur notre site (via le navigateur Firefox). Depuis l’espace
administrateur, un bouton (voir la figure ci-contre), nous permet de basculer sur la vue
« publique ».

Comme nous sommes toujours authentifiés en tant qu’administrateur du site, nous avons accès en
permanence à un menu d’édition (voir la figure ci-dessous).
Le bouton « Modifier » nous permet de basculer dans un mode

d’édition. Un bouton de type « ascenseur » est alors accessible
(voir la figure ci-contre). Il nous permet d’accéder à la structure de
la page.
Une autre manière d’éditer le contenu d’une section est de double-
cliquer directement sur la zone de la page (cette fonctionnalité
n’est également disponible qu’en mode « édition »).
Exercice
2..1 Le réseau AMAP Auvergne se développe tous les
jours. Il y a désormais 40 amap pour 1450 adhé-
rents avec 62 producteurs et 28 types de produits
proposés. On vous demande de mettre à jour le site
du réseau en conséquence.
Quand nous modifions le contenu d’un élément de la structure du
site, le CMS nous propose de publier les modifications (voir la
figure ci-dessous).
Exercice
2..2 Enregistrez votre modification afin que l’information soit accessible au public.
Revenons maintenant sur le contenu du fichier template
home.html (voir la section précédente pour l’édition de
ce fichier), dont voici un extrait ci-contre.
Nous retrouvons les éléments de structure aperçus
auparavant (voir ci-dessus), définis avec la balise
placeholder :
• teaser
• avantages
• engagements
• fonctionnement
Important : Le fonctionnement de Django CMS simplifie grandement la vie du développeur.

Les fichiers templates peuvent être des modèles de page. Dans chaque fichier template, nous
pouvons définir des éléments de structure (des blocs) qui pourront par la suite être édités par
le webmestre : il n’y a pas de limitations au nombre d’extensions pouvant être intégrés à
chaque bloc, si ce n’est les contraintes de mise en page et les plugins disponibles.
Ainsi même si nous n’avons pour le moment qu’intégrer des extensions

« Texte » à nos blocs, ce n’est pas du tout une obligation…
Vous avez probablement remarqué une colonne restée vide entre la
présentation des « Avantages » et du « Fonctionnement ». On vous
demande de saisir le texte suivant (voir le rendu attendu ci-contre).

Les engagements
La Charte nationale des AMAP cadre ce système d'échange organisé par des bénévoles.
Le consomm'acteur s'engage sous la forme d'un abonnement réglé à l’avance au
producteur. Ce dernier s'engage à fournir des produits cultivés ou élevés sans
pesticides, ni engrais chimiques de synthèse.
Exercice
2..3 Opérez les modifications demandées sur le site vitrine AMAP Auvergne.
2.5. Les blocs statiques

Nous retournons sur la page du « réseau des amap » (c’est-à-dire, je vous le rappelle encore sur la sous-
page « Présentation »).
Si nous sommes restés en « mode édition », un écran nous informe
de la redirection (voir la figure ci-contre). Nous sélectionnons alors
le lien pour suivre cette redirection.
Conformément à ce que nous avons découvert précédemment, nous pouvons éditer le contenu de notre
page en double-cliquant sur le contenu de celle-ci (si nous sommes en mode édition bien sûr). Nous avons
vu précédemment que le modèle de cette page était défini par le fichier template page.html. Si nous
éditons ce fichier, nous pouvoir voir que ce fichier personnalise deux sections ( title et content) qui ont
été définis dans le squelette base.html (voir le figure ci-dessous).
Le fichier template ne définit qu’une seule section placeholder, que

nous retrouvons (voir la figure ci-contre) en éditant la structure de
la page. C’est dans ce bloc content que nous avons intégré un
greffon « texte » afin de pouvoir éditer le contenu de notre page.
La structure de la page présente une nouvelle fois les blocs
« Réseau » et « Partenaires » (ils étaient déjà
listés dans la structure de la page d’accueil) qui
sont donc modifiables depuis n’importe quelle
page.
Ces blocs ont été définis dans le fichier template
base.html (voir la figure ci-contre). La balise
utilisée est cependant légèrement différente.
static_placeholder désigne un bloc qui sera
modifiable depuis n’importe quelle page.
Vous avez probablement remarqué une colonne
restée vide dans le footer entre la présentation du « Réseau » et des
« Partenaires ». On vous demande d’intégrer notamment les liens suivant
(voir le rendu attendu ci-contre).
https://www.cuisine-libre.org/
https://amap-aura.org/
https://amapvichy.org/

http://lescourgettesdenotredame.blogspot.com/
Vous pourrez notamment utiliser le plugin « Link / Button » (voir l’exemple ci-dessous).
Exercice
2..4 Opérez les modifications demandées sur le site vitrine AMAP Auvergne.
Notre partenaire nous a communiqué un logo (suivez ce lien pour y accéder). On nous demande de
l’intégrer à notre site vitrine. Nous nous plaçons donc en mode édition. Nous éditons la structure de la
page et nous développons particulièrement le bloc « Partenaires ».
Nous allons ajouter cette nouvelle image à notre bloc (voir la figure
ci-contre). Nous sélectionnons le plugin « Picture / Image » (voir la
figure ci-contre).
Nous sélectionnons ensuite le bouton « Sélectionner un fichier » (voir la figure ci-dessous).
Une nouvelle fenêtre du navigateur s’ouvre.
L’interface du gestionnaire de fichiers de Django
CMS nous permet de créer un nouveau dossier,
que nous nommerons « Footer » (voir les figures
ci-dessous).
Une fois ce nouveau dossier enregistré, nous le sélectionnons, afin d’y enregistrer notre fichier image.
Une fois le téléversement opéré, il ne nous reste plus qu’à sélectionner l’image en cliquant sur le lien
(voir la figure ci-dessous).

Nous retrouvons l’image sélectionnée dans le greffon que nous étions en train d’ajouter à notre bloc
« Partenaires ». Il ne nous reste plus qu’à enregistrer la modification (voir les figures ci-dessous).
Exercice
2..5 Ajoutez le logo du partenaire au site vitrine AMAP Auvergne en reproduisant la procé-
dure décrite ci-dessus, puis publiez les modifications.
2.6. Utiliser les styles définis

Nous nous plaçons (si nécessaire) en mode édition. Nous éditons
alors la structure d’une page, en dépliant le contenu du bloc
statique « Réseau » (voir la figure c-contre).
À l’aide du bouton , nous éditons le contenu du lien « Retour sur
la page accueil ».
En bas de l’écran, nous affichons les paramètres avancés (voir la
figure ci-contre). Au modèle par défaut du lien, nous avons ajouté un attribut
class associé à la valeur btn btn-cta. C’est ce qui nous permet d’obtenir un
lien ayant une apparence de bouton (ce style était défini dans le thème HN
que nous nous sommes appropriés).
À RETENIR : Les éléments ajoutés à nos blocs ne doivent pas

définir de nouveaux styles (couleur, centrage, etc), mais uniquement
mettre en œuvre les styles définis dans le thème.
3. Édition du AMAP Auvergne

Maintenant que nous avons découvert la structuration du site AMAP Auvergne, nous allons maintenant
nous atteler à en finir son édition.
En plus d’une page d’accueil, notre site devra proposer les rubriques et les pages suivantes (nous avons
déjà vu que la notion de rubrique n’existait pas avec Django CMS mais que nous utilisions le mécanisme
des sous-pages) :
• La page « Le réseau », contient les sous-pages :
• « Présentation »,
• « Historique »
• « Adhérer au réseau »

• La page « La charte des AMAP », contient les sous-pages :

• « La nouvelle Charte »
• « La Charte de l’agriculture paysanne »
• La page « Vie des AMAP », contient les sous-pages :
• « Trouver une AMAP »
• « Créer son AMAP »
3.1. Charte de l’agriculture paysanne

Nous allons d’abord commencer par ajouter la sous-page intitulée « La charte de l’agriculture paysanne ».
Pour cela nous nous rendons sur la page principale « La charte des amap », puis nous sélectionnons
« Nouvelle sous-page » dans le menu « Page » (voir la figure ci-dessous).
Nous saisissons le titre de notre page et nous modifions le slug de la page générée afin de le rendre plus
lisible (voir la figure ci-dessous).
Une fois la page enregistrée, nous déplions la structure de la page et nous ajoutons un plugin texte à notre
bloc contenu.
Nous commençons à saisir le paragraphe suivant dont vous trouverez le contenu et le rendu ci-dessous.
L’agriculture paysanne doit
permettre à un maximum de paysans
répartis sur tout le territoire
de vivre décemment de leur métier
en produisant sur une
exploitation à taille humaine une
alimentation saine et de qualité,
sans remettre en cause les
ressources naturelles de demain.
Elle doit participer avec les
citoyens à rendre le milieu rural
vivant dans un cadre de vie apprécié par tous.
On nous demande alors d’intégrer le fichier image suivant.
Exercice

3..6 Ajoutez l’illustration de la charte de l’agriculture pay-

sanne à la page dédiée. Vous reproduirez les bonnes pra-
tiques étudiées dans la partie 2.5 du présent document
en enregistrant notamment le fichier image dans un nou-
veau dossier Pages situé à la racine du gestionnaire de fi-
chiers de Django CMS (voir la figure ci-contre).
Note : Le centrage des images n’étant pas prévu dans le thème

initial, nous ne chercherons pas à centrer les images. La
structuration du contenu doit en effet rester distincte de la
définition des styles, cela fait partie des bonnes pratiques que nous avons déjà pu observer.
On nous demande également d’ajouter le texte suivant, avec le rendu attendu :

Les six thèmes
Ces six thèmes qui
permettent
l’analyse globale à
la fois des
dimensions sociale,
économique et
environnementale :
La répartition des
volumes de
production afin de
permettre au plus
grand nombre
d’accéder au
marché. La
répartition des
volumes de
production doit
être couplée à la
maîtrise des
quantités
produites, afin de
garantir des prix.
La qualité des
produits : La
fonction première
de l’agriculture
est la production
de denrées
alimentaires en
quantité et qualité
suffisantes. Cette
qualité est à la
fois gustative, sanitaire et bactériologique.
L’autonomie est à la fois la capacité d’être maître de ses choix techniques,
économiques, financiers et la possibilité d’exercer cette capacité. L’autonomie
repose sur le partenariat, c’est-à-dire la complémentarité entre les acteurs locaux.
Le développement local : L’agriculture n’est pas un secteur à part des autres
activités humaines. L’agriculture participe pleinement au développement local d’une
région. Les paysans y contribuent par leurs actes économiques, leurs rapports avec
les autres acteurs de la société.
Le travail avec la nature : Il s’agit de promouvoir des systèmes de production plus
autonomes, valorisant les ressources locales et adaptés au contexte pédo-climatique.
La désintensification plutôt que l’extensification assurent préservation des
ressources et maintien des actifs agricoles.
La transmissibilité d’une ferme est sa capacité à être reprise et à dégager du
revenu. C’est un facteur déterminant du maintien d’un nombre important de paysans sur
l’ensemble du territoire.

Les dix principes de l’agriculture paysanne

Principe n° 1 répartir les volumes de production afin de permettre au plus grand
nombre d’accéder au métier et d’en vivre.
Principe n° 2 être solidaire des paysans des autres régions d’Europe et du monde.
Principe n° 3 respecter la nature.
Principe n° 4 valoriser les ressources abondantes et économiser les ressources rares.
Principe n° 5 rechercher la transparence dans les actes d’achat, de production, de
transformation et de vente des produits agricoles.
Principe n° 6 assurer la bonne qualité gustative et sanitaire des produits.
Principe n° 7 viser le maximum d’autonomie dans le fonctionnement des exploitations.
Principe n° 8 rechercher les partenariats avec d’autres acteurs du monde rural.
Principe n° 9 maintenir la diversité des populations animales élevées et des variétés
végétales cultivées.
Principe n° 10 raisonner toujours à long terme et de manière globale.
Exercices
3..7 Répondez à la demande d’ajout du texte, formulée
ci-dessus, puis publiez vos modifications. Une fois
réalisée, la structure du bloc contenu devra être la
suivante (voir la figure ci-contre).
3..8 Configurez la page « La charte des amap » afin
qu’elle redirige automatiquement sur la sous-page
« La nouvelle charte », puis publiez les modifica-
tions.
3.2. Vie des AMAP

On nous demande maintenant d’éditer le contenu de la rubrique « Vie des amap » (page et sous-pages).
Le texte de la page « Créer son amap » est livrée ci-dessous. Les différents paragraphes sont notifiés par
des retours à la ligne. Les termes à mettre en évidence sont représentés en gras. Enfin les termes soulignés
correspondent à des liens internes vers la sous-page « La nouvelle charte ».
Fruit d’une expérience de plus de 5 ans, le réseau des AMAP Auvergne a conçu des
documents et des formations à l’attention des créateurs de partenariat en AMAP. La
lecture attentive de ces documents et la participation aux soirées créateurs d’AMAP
est une étape déterminante dans la réussite de votre partenariat en AMAP.
Créer une AMAP ne présente pas de difficultés majeures pour toute personne dotée d’un
bon sens de l’organisation et des relations humaines.
Ce n’est pas pour autant une démarche anodine, car elle repose sur un certain nombre
de principes et une éthique garantie par la charte des AMAP.
Depuis la création des premières AMAP en Auvergne en 2006, elles se sont multipliées
à un rythme exponentiel portant à 30 le nombre de groupes en ce début 2013, soit
environ 1500 familles d’amapiens travaillant avec 80 paysans partenaires. Basé sur
des partenariats innovants et responsables entre paysans et consommateurs, le contrat
AMAP est devenu un levier politique et citoyen pour qu'une autre dynamique agricole
puisse exister à travers des circuits courts et des engagements environnementaux.
Mais si l'offre de « circuits courts » a littéralement explosé (un agriculteur sur
cinq vend aujourd'hui en circuit court), le mouvement des AMAP représente une
véritable opportunité pour l’agriculture régionale : loin de s'en tenir à l'ouverture
de nouveaux débouchés commerciaux, le principe du contrat AMAP repose sur des
principes de solidarité, de salaire décent pour les producteurs, de transparence, de
respect de l'environnement et de proximité.
Le réseau des AMAP Auvergne est la structure régionale de ce mouvement. Si sa mission
principale demeure la promotion et l’aide à la création d’AMAP, il mobilise
aujourd’hui une bonne partie de son énergie à multiplier des actions visant à
favoriser l’installation de jeunes producteurs en impliquant également les groupes de
citoyens et les collectivités locales. Par ailleurs, il assure l’animation et la
structuration de son réseau en tant que lieu d’échange, d’accompagnement et de
mutualisation des pratiques amapiennes.
Le développement de l’agriculture paysanne passe en premier lieu par les producteurs

eux-mêmes. Tant dans leur pratique que dans leur relation avec les groupes, ils
favorisent et concrétisent sa mise en œuvre et sa construction progressive. Mais
cette action ne peut être le fait des agriculteurs seuls, elle doit être soutenue
collectivement, en particulier sur le territoire francilien où la pression foncière
est renforcée par l’extension urbaine.
Autrement dit, la création d’une AMAP ne se résume pas à la conception d’une
alternative consumériste. Depuis le début des années 2000, il est en effet de plus en
plus facile de vendre ou d’acheter des « paniers » de légumes.
Contrairement à une idée répandue, une AMAP n’est pas un intermédiaire commercial !
Une AMAP (Association pour le Maintien d’une Agriculture Paysanne) est un partenariat
entre un groupe de consommateurs et un agriculteur.
Ce partenariat correspond au fait qu’un groupe de consommateurs achètent à l’avance
la production d’un agriculteur : ils lui donnent les moyens de produire et lui
garantissent l’écoulement de sa production. En retour, le producteur s’engage à
distribuer sa production tout au long de la saison.
Le terme « AMAP »® est une marque détenue par Alliance PEC Provence ; en Ile-de-
France, le Réseau régional des AMAP en est le dépositaire légal.
Le partenariat AMAP est défini par la charte des AMAP, qui présente 18 principes
fondateurs.
Par ailleurs, dans la mesure où les partenariats AMAP sont des activités commerciales
entre des producteurs et consommateurs, ils restent soumis au Code de la consommation
et au Code du commerce.
Enfin, comme il s’agit de produits alimentaires, les producteurs doivent respecter la
réglementation sanitaire en vigueur.
Exercice
3..9 Éditez la nouvelle page conformément aux consignes partagez ci-dessus, puis publiez
sur le site AMAP Auvergne.
On nous demande également d’éditer le contenu d’une nouvelle sous-page « Trouver une amap ». Le
contenu de cette page est beaucoup plus sommaire :
Recherche par…
Exercices
3..10 Éditez la nouvelle page conformément aux consignes partagez ci-dessus, puis publiez
sur le site AMAP Auvergne.
3..11 Modifiez la configuration du site de façon à ce que la page « Vie des amap » soit rediri-
gée automatiquement vers la sous-page « Créer son amap » (voir ci-dessous l’illustra-
tion du résultat attendu).
On nous demande également d’ajouter un lien dans le bloc « fonctionnement » vers la nouvelle page
« Créer son amap ». Nous retournons pour cela sur la page accueil. Nous nous plaçons en mode édition,
puis nous éditons la structure de la page. Nous ajoutons alors un nouveau greffon au bloc (voir la figure
ci-dessous).

Une fois fait, nous obtenons une nouvelle structure, composée de deux greffons, pour notre bloc (voir
l’illustration ci-dessus).
Exercice
3..12 Ajoutez le lien demandé dans le bloc « Fonctionnement » vers la page « Créer son
amap » (le titre du lien est lui « Créer une AMAP »). Publiez les modifications.
On nous demande également d’ajouter un lien dans le bloc « Engagement » vers la page « La nouvelle
charte ». le titre du lien sera « La charte nationale des AMAP ».
Exercice
3..13 Ajoutez le lien demandé dans le bloc « Engagement », puis publiez les modifications.
3.3. Adhérer au réseau

On nous demande enfin d’ajouter une nouvelle sous-page « Adhérer au réseau » à la rubrique / page « Le
réseau des amap ». Le contenu, ainsi que le rendu attendu nous est livré ci-dessous.
Adhérer au réseau AMAP Auvergne …
c’est adhérer à l’éthique définie
par la charte des AMAP, c’est
soutenir et partager la dynamique
de notre action collective...
En effet, nous vous rappelons qu’en

adhérant au Réseau AMAP Auvergne,
gestionnaire régional de la marque
AMAP déposée par Alliance Provence
en 2003, vous vous engagez au
respect de la .
Évidemment, pour incarner et faire

vivre cette éthique, votre
implication collective et
individuelle dans les activités du
Réseau constitue la base de son
action et de son existence. Pour
être membre du réseau, il faut donc
adhérer à l’objet et au mode de
fonctionnement définis par nos
statuts et règlement intérieur.
Côté avantages pratiques, une fois l’adhésion effectuée vous bénéficierez en tant que
groupe en AMAP :
de l’assurance collective du Réseau (assurance responsabilité civile pour vos lieux

de distribution et de réunion ainsi que pour vos activités associatives à la ferme) ;
de l’ensemble des outils pédagogiques du Réseau (panneaux d’exposition, plaquettes,
centre documentaire... mais aussi futur manuel pratique à destination des groupes,

etc.) et des formations "responsables de groupes" et "problématiques agricoles".

votre groupe en AMAP ou votre projet apparaîtra sur les listes des groupes de la
région.
Et surtout, vous ferez partie intégrante des activités du réseau : rencontres

conviviales, commissions de travail, AG annuelle... et de toutes les nouvelles
activités que vous lancerez, car avant tout le réseau, c’est vous !
Le mode opératoire d’adhésion pour 2014 est un peu différent des années précédentes
Pour les groupes en AMAP : vous avez dû recevoir par mail les identifiants pour
mettre à jour vos données et générer le formulaire d’adhésion. Si c’est ne pas le cas
merci de nous adresser un mail contact( at )amap-auvergne ( . )org.
Pour les paysans : vous allez recevoir très prochainement un mail avec votre
formulaire d’adhésion pré-rempli.
Exercice
3..14 Ajoutez cette nouvelle sous-page, puis publiez-la. À la fin, vous devez obtenir un rendu
conforme à l’illustration ci-dessous si vous consultez la page « Le réseau des amap ».
La nouvelle page apparaît en dernier dans le sous-menu de la page / rubrique « Le réseau des amap ».
Sur la page d’accueil, on nous signale que le lien « Adhérer au réseau » est erroné (voir l’illustration ci-
dessous).
Exercice
3..15 Traitez la demande évoquée ci-dessus. Faîtes en sorte qu’en plus d’être corrigée, le lien
puisse facilement être éditable par le webmestre…
4. Mesure d’audience
4.1. Présentation de Matomo

Matomo (anciennement Piwik) est un logiciel libre de mesure d’audience, écrit en PHP et disponible en
licence GPL (version 3). Il permet de configurer, puis d’obtenir des statistiques de sites Web, un peu à la
manière de Google Analytics, mais en permettant aux organisations de garder le contrôle sur les données
personnelles des utilisateurs de leurs services.
Remarque : Europa Analytics, qui est l’organisation qui s’occupe du monitoring des sites de la
Commission Européenne utilise Matomo pour cet usage sur un serveur auto-administré (la
fondation Matomo propose également un hébergement centralisé dans son propre cloud).

4.2. Ne pas suivre

Une instance de Matomo est disponible sur le port 8084. Elle a été configurée (voir la documentation
dans les annexes) pour le moment pour ne suivre que l’audience du site n°1 (AMAP Auvergne, propulsé
par Django CMS).
Si vous avez utilisé uniquement le navigateur Firefox pour vos développements, vous ne devriez pas voir
de traces de votre activité. Le logiciel Matomo est en effet configuré par défaut pour respecter l’option
« Ne pas suivre » du navigateur, qui est la configuration par défaut de Firefox.
Remarque : Je n’ai même pas réussi à désactiver cette option, mais j’ai vérifié le bon
fonctionnement de la mesure d’audience avec « chromium » qui ne s’embarrasse pas des
mêmes protections de la vie privée…
4.3. Obligations légales

Bien que le recueil du consentement soit le principe de base
que nous avons largement évoqué au cours de notre
progression, il existe cependant quelques exceptions.
La configuration par défaut de Matomo favorise déjà le
respect de la confidentialité des données, mais il n’est pas
encore suffisant. Nous avons notamment configuré
l’anonymisation des adresses IP et des identifiants (voir la
figure ci-contre).
Remarque : Au cas où, vous deviez mettre en placez

un recueil de consentement, notez qu’il existe un
projet libre nommé « Tarte au citron » permettant de
configurer le recueil du consentement.
Nous allons maintenant mettre en place une mesure

d’audience d’un site Spip avec Matomo. Notez cependant que
nous faisons vraiment cela pour l’exercice car Spip possède
un gestionnaire d’audience intégré (qui n’est certes pas activé
par défaut, mais ça se fait en 2 clics…).
Exercice
4..16 Mettez en place une mesure d’audience pour le site n°2 (AMAP Auvergne, propulsé par
Spip).
5. Allons plus loin
5.1. Divio
Django CMS est un logiciel libre développé principalement par l’entreprise européenne (basée
notamment en Suisse) Divio. Un peu à la manière de Wordpress (voir ci-dessous), l’entreprise propose
une plate-forme d’hébergement de projet dans leur cloud. Les développeurs peuvent même tester la plate-
forme gratuitement.

5.2. Aperçu d’autres CMS

a) Utilisation des CMS PHP
Même si vous trouverez de nombreuses ressources qui vous confirmeront que Wordpress est le CMS le
plus utilisé. Il ne faut pas oublier que cette utilisation massive repose sur l’utilise de la plate-forme de
blog Wordpress, c’est-à-dire une utilisation par des non développeurs : des internautes qui ne font
qu’utiliser des logiciels écrits par d’autres. Concrètement la création d’un thème Wordpress est loin d’être
aisée. Wordpress étant en grande partie écrit en PHP procédural, écrire des extensions devient vite long et
pénible.
Attention : De nombreux sites mettent en œuvre les nombreux plugins disponibles sur le net
afin d’étendre ce moteur de blog assez limité. Très peu d’entre eux étant maintenu, les risques
de sécurité sont majeurs. Dans le monde Wordpress le cœur est solide mais les extensions
non, donc prudence…
À l’autre bout du spectre des solutions CMS libres, Drupal est beaucoup plus difficile à prendre en main.
La version 8 repose sur le framework PHP Symfony. Cette solution est réputée être plébiscité par les
grands comptes. Bref, la courbe d’apprentissage est beaucoup plus élevée, mais cette solution permet de
gérer n’importe que type de contenu.
Joomla peut apparaître une solution intermédiaire en termes de temps d’apprentissage. L’architecture
MVC reposant sur la programmation objet offre à cette solution une assez grande évolutivité. La création
de nouveaux types de contenu, comme pour Drupal est facilitée avec d'excellentes solutions comme
SEBLOD. Cependant dès qu’on cherche un peu à le personnaliser, cela devient vite une usine à gaz.
Même si l’utilisation de Spip semble aujourd’hui moins importante. Cette solution reste tout de même
assez populaire en France étant donné que Spip est majoritairement développé par une communauté
francophone. La syntaxe des squelettes Spip a été historiquement pensée pour que les non informaticiens
puissent créer leurs propres thèmes. Dans les autres projets de CMS, développées par des communautés
francophones, on peut notamment citer Dotclear et PluXml.
b) Utilisation des CMS Python

Nous n’aborderons ici que les CMS construits avec le framework Django. La plupart des CMS supposent
une connaissance de Django, ce qui rallonge la courbe d’apprentissage. Une fois maîtrisé, l’écriture
d’application est par contre très rapide, c’est pourquoi des développeurs de plus en plus nombreux
l’utilise.
Django CMS est un peu à part. La société éditrice (Divio) a en effet construit ce CMS pour concurrencer
la plate-forme Wordpress : c’est-à-dire ouvrir le logiciel au non informaticien. Django CMS est orienté
utilisateur : vous n’avez pas besoin de connaître le framework Django pour écrire un thème (la
manipulation des fichiers gabarits suffit). À l’opposé, Wagtail est orienté développeur, puisqu’il ne permet
pas d’afficher la moindre donnée sans avoir à définir une classe, nous éviterons donc cette solution à ce
stade de notre progression. La vidéo suivante (en langue anglaise), capté lors du PyCon 2 2016, compare
les avantages et inconvénients de Wagtail, Mezzanine et Django CMS.
5.3. Thème AMAP AURA

Que ce soit avec Django CMS ou avec un autre CMS Php (Spip et Wordpress sont installés sur la
machine virtuelle, mais vous pouvez en installer d’autres), vous pouvez essayer d’adapter le thème du site
du réseau AMAP Auvergne Rhône-Alpes.
2 Congrès sur le langage de programmation Python ; Le terme signifie en anglais Python Conference. Le mouvement est
originaire des États-Unis et s'est diffusé dans de nombreux autres pays à travers le monde.

Pour travailler avec le logiciel Spip, vous pourrez notamment vous appuyer sur cette documentation en
ligne. Spip étant à l’origine un projet français, il dispose d’une grande communauté francophone, ce qui
est un avantage pour l’accès à la documentation ou pour échangera avec la communauté.
5.4. Guide d’installation et de configuration

Vous retrouverez dans les différentes annexes (voir ci-dessous) le mode opératoire que j’ai suivi pour
installer les services présents sur la machine virtuelle. Bien plus qu’une trace laissée à moi-même, cela
permet de partager des bonnes pratiques sur la gestion de services sur un système GNU/Linux.
Il est en effet pas rare de trouver de très mauvaises pratiques partagées sur des forums (hors stack
overflow qui permet justement de se rendre compte de la pertinence des réponses via les votes des
utilisateurs). Dans ces mauvaises pratiques, on retrouvera notamment le chmod 777, qui expose
inutilement votre serveur à tout attaquant parvenant à ouvrir une session sur votre serveur. Ce genre de
mauvais conseils est révélateur d’un manque de connaissance sur les possibilités pourtant basiques de
travailler avec les groupes…

6. ANNEXE : Utilisation de la machine virtuelle (MV)
6.1. Importation de la MV
Vous lancez l’application Virtualbox, puis vous lancez l’importation de l’appareil via le menu :
Le lien vers le fichier Debian-10_LAMP_pg_amap-auvergne_dev.ova (l’extension ova signifie que les

fichiers au format OVF sont archivés3) se trouve dans le cahier de textes (en fonction du contexte, il est
local ou sur Internet).
L’écran suivant vous permet de paramétrer l’importation : gardez les paramètres proposés par défaut,
mais pensez à cocher la case « Réinitialiser l’adresse MAC de toutes les cartes réseaux ».
6.2. Suppression d’une MV

Si vous travaillez sur plusieurs stations de travail, vous
aurez souvent à exporter / importer votre machine. Afin
de ne pas conserver de nombreuses machines sur le
système (et vous perdre dans les différentes versions),
vous pouvez supprimer une ou plusieurs machines :
Sélectionnez le bouton « Supprimer tous les fichiers »
afin de supprimer proprement votre travail.
6.3. Connexion à la MV depuis votre station de travail

Vous avez la possibilité d’ouvrir une session via le terminal ou le navigateur de fichiers…
3 Si vous renommez l’extension ova en tar, vous pouvez décompresser cette archive pour voir…

Rappel : Le mot de passe associé à l’utilisateur système jessie est secret.
a) Navigateur de fichiers
Via le menu « Aller » du navigateur de fichier « Thunar », vous
sélectionnez l’entrée « Ouvrir l’emplacement » (vous pouvez
également utiliser la combinaison « Ctrl + L »), puis vous collez
ou saisissez la commande suivante :
sftp://jessie@localhost:2222/var/www
C’est donc au travers d’une session ssh que nous accédons au système de fichiers distant. Ce qui constitue
une bonne pratique, car l’accès est alors sécurisé.
L’application, vous demande alors de saisir le mot de passe pour l’utilisateur jessie :
Vous pouvez conserver le choix de demander au système de s’en souvenir jusqu’à la fin de la session…
Note : Pour les utilisateurs de Windows, le navigateur de fichiers ne supporte pas le protocole
SSH (à ma connaissance du moins). Vous pouvez néanmoins, tout comme sur GNU/Linux
d’ailleurs, utiliser l’application de transfert de fichiers Filezilla (vous perdez en ergonomie,
efficacité du travail du développeur cependant…).
Via le menu « Fichier », ouvrez le gestionnaire de sites et enregistrez un nouveau site en tenant compte
des informations partagées dans les captures figurant ci-dessus.
Note : Si vous utilisez « Filezilla », vous devrez télécharger les fichiers (prenez garde où) pour
pouvoir les éditer…
b) Terminal
Via les menus ou le raccourci sur le tableau de bord, vous lancez un terminal virtuel dans lequel vous
exécutez la commande suivante :
ssh -p 2222 jessie@localhost

Et voilà, vous disposez d’une console sur la machine virtuelle pour l’utilisateur jessie…
Note : Pour les utilisateurs de Windows, le support du protocole SSH n’est pas natif à l’invite de
commandes (à ma connaissance du moins). Il suffit, a priori (à voir avec votre enseignant
référent) d’installer le logiciel PuTTY.
6.4. Installation d’un nouveau CMS

Vous devez copier les fichiers dans le répertoire /var/www/html. Si le CMS dispose d’une interface
d’installation, vous devrez saisir l’adresse localhost:8080/mon_dossier dans le navigateur Web (le nom
du répertoire _ ici donc mon_dossier _ doit alors être précisé dans le chemin suivant le domaine et le
port).
Si les droits administrateurs vous sont nécessaires, vous pourrez lancer une session root, en exécutant la
commande suivante depuis une session jessie :
su - root
Note : En cas d’erreur (souvent caractérisée par une page blanche), explorez les logs d’apache
à l’aide de la commande (il faut être en root) : tail /var/log/apache2/error.log
6.5. Éteindre proprement la machine virtuelle

Depuis la session en console sur la machine virtuelle, nous allons basculer sur une session root (super
administrateur) :
su -
Le système nous demande de saisir le mot de passe de root (secret!03) :

Mot de passe :
Nous lançons alors la commande qui permet d’éteindre immédiatement et proprement la machine
virtuelle :
shutdown -h now
7. ANNEXE : Environnement de développement pour Django CMS
Note : Cette partie a déjà été réalisée sur la machine virtuelle, elle n’est donc pas à refaire. Elle
s’adresse à tous ceux qui voudraient reproduire cet environnement de développement sur un
autre système, à tous les curieux…
Dans le monde des CMS Python, Django CMS est probablement le plus populaire… C’est en tout cas, le
CMS le plus abordable.
7.1. Console
On commence par ouvrir une session en console sur la machine virtuelle pour l’utilisateur jessie. Afin
d’éviter les erreurs de saisie, nous allons passer par un terminal virtuel qui nous permettra d’effectuer
facilement des copiés / collés pour les commandes suivantes :
ssh -p 2222 jessie@localhost
Le système nous demande le mot de passe de l’utilisateur jessie (c’est secret) :

jessie@localhost's password:

Normalement, vous vous retrouvez alors (dans l’arborescence du système de fichiers) dans le répertoire
personnel de jessie. Nous pouvons nous en assurer à l’aide de la commande pwd :
pwd
Le système répond :
/home/jessie
7.2. Initialisation du projet

L'initialisation d'un site Django CMS est très similaire à celle d'un site Django (le nom le laissait
entendre, non?). Nous créons tout d'abord un environnement python dédié :
$ mkdir ~/venv
$ cd ~/venv
$ python3 -m venv djangocms_amap_env
Les librairies de Django CMS vont être installées dans un environnement virtuel. Nous devons activer cet
environnement afin de pouvoir opérer avec un interpréteur python dédié :
source venv/djangocms_amap_env/bin/activate
Vous noterez que le prompt de la session débute désormais par :

(djangocms_amap_env)
Afin que l’utilisateur n’oublie pas qu’il utilise un environnement virtuel spécifique, qui est analogue en
tout point à une session shell classique à la différence que l’interpréteur python appelé est celui de
l’environnement virtuel.
Nous mettons à jour pip, puis installons ensuite Django CMS, en téléchargeant les sources depuis les
dépôts PyPI :
(djangocms_amap_env)$ pip install --upgrade pip
(djangocms_amap_env)$ pip install djangocms-installer
Nous créons enfin un nouveau projet :

(djangocms_amap_env)$ mkdir -p ~/djangocms_amap_auvergne
(djangocms_amap_env)$ cd ~/djangocms_amap_auvergne
(djangocms_amap_env)$ djangocms -w -f -p . amap_auvergne
Database configuration (in URL format). Example: sqlite://localhost/project.db
[default sqlite://localhost/project.db]:
django CMS version (choices: 3.8, 3.7, stable, lts, develop) [default 3.8]:
Django version (choices: 3.1, 3.0, 2.2, stable, lts) [default 3.1]:
Activate Django I18N / L10N setting; this is automatically activated if more than
language is provided (choices: yes, no) [default yes]:
Install and configure reversion support (only for django CMS 3.2 and 3.3) (choices:
yes, no) [default yes]:
Languages to enable. Option can be provided multiple times, or as a comma separated
list. Only language codes supported by Django can be used here. Example: en, fr-FR,
it-IT: fr-FR
Optional default time zone. Example: Europe/Rome [default Europe/Paris]:
Activate Django timezone support (choices: yes, no) [default yes]:
Activate CMS permission management (choices: yes, no) [default no]:
Use Bootstrap 4 Theme (choices: yes, no) [default no]:
Use custom template set [default no]:
Load a starting page with examples after installation (english language only). Choose
"no" if you use a custom template set. (choices: yes, no) [default no]:
Creating the project
Please wait while I install dependencies
If I am stuck for a long time, please check for connectivity / PyPi issues
Dependencies installed
Creating the project
...

La procédure se poursuit, jusqu'à que la création de compte webmestre :

Creating admin user
Nom d’utilisateur (leave blank to use 'slam'): jessie
Adresse électronique: jessie@localhost
Password:
Password (again):
Superuser created successfully.
All done!
Get into "/home/jessie/djangocms_amap_auvergne" directory and type "python manage.py
runserver" to start your project
Nous lançons enfin notre serveur de développement avec la commande :

python manage.py runserver 0.0.0.0:9000
Le système vous informe que vous devrez utiliser la combinaison de touches « Ctrl + C » pour arrêter le
serveur de développement.
Il ne reste plus qu'à charger l'URL http://localhost:9000 dans notre navigateur favori…
7.3. Back-office (interface d'administration)

L'accès à l'interface d'administration se fait en appelant l'URL http://localhost:8000/admin Une fois
authentifié, nous accédons à l'interface d'administration (ou espace administrateur).
7.4. Installation de plugins

Le module djangocms-snippet n’est plus installée par défaut avec Django CMS. Même si elle ne nous
était pas indispensable, elle permet d’intégrer du code HTML proprement. C’est-à-dire que nos textes ne
doivent contenir que justement du texte…
Nous installation le plugin à l’aide des dépôts PyPI :
pip install djangocms-snippet
Nous modifions ensuite la configuration de notre site. Dans le fichier settings.py, nous modifions la
valeur de la variable INSTALLED_APPS (c’est une liste) :
INSTALLED_APPS = [
...
'amap_auvergne',
'djangocms_snippet',
]
Nous intégrons cette modification à notre projet :

python manage.py migrate djangocms_snippet
Afin de faciliter le redéploiement de notre projet, nous intégrons la ligne suivante à la fin du fichier
requirements.txt, généré lors de l’installation de Django CMS :
djangocms-snippet>=3.0,<4.0
8. ANNEXE : Installation MV
En partant d’une image Debian, j’ai conservé les choix proposés par défaut par le programme
d’installation.
• Le mot de passe de l’utilisateur root est secret!03
• Le mot de passe de l’utilisateur jessie est secret
• Le mot de passe root du service MariaDb est secret!63

8.1. Redirection des ports

La configuration réseau de la machine virtuelle devra prévoir les redirections de port suivantes :
• SSH : 2222 → 22
• HTTP : 8080 → 80
• djangamap : 8081 → 8081
• amaspip : 8082 → 8082
• amapress : 8083 → 8083
• matomo : 8084 → 8084
Ainsi, depuis le système hôte, l’application phpmyadmin est accessible à cette adresse :
localhost:8080/phpmyadmin; l’application djangamap est accessible à l’adresse localhost:8081, etc.
8.2. Installation LAMP

On peut, par exemple, suivre ce tutoriel en ligne…
De plus, on modifie le groupe primaire de l’utilisateur jessie en www-data, afin de faciliter le
développement des sites :
# usermod -g www-data jessie
Dans MariaDB (via par exemple l’interface phpmyadmin), on crée trois utilisateurs (avec des droits sur
une base portant le même nom) : djangamap, amaspip, amapress.
On installe l’interface de développement pour le service MariaDb :
# apt -y install libmariadbclient-dev libssl-dev
8.3. Version PHP

J’ai rencontré un problème (lors de l’installation de Matomo, voir ci-dessous) avec la version
l’interpréteur php utilisé par défaut par apache (bien que la version 7.3 était installée sur le système).
Voici la parade :
# a2dismod php7.0
# a2enmod php7.3
# systemctl restart apache2
Ce forçage de la version 7.3 provoque des erreurs sur le logiciel PhpMyAdmin. Il est alors nécessaire de
modifier le fichier /usr/share/phpmyadmin/libraries/sql.lib.php :
• Il faut rechercher l’expression (count($analyzed_sql_results['select_expr'] == 1) (à l'aide des
touches « Ctrl + W » avec nano)
• Et la replacer par ((count($analyzed_sql_results['select_expr']) == 1) (on ajoute des
parenthèses autour de l’appel de count)
On redémarre alors le service apache :
# systemctl restart apache2
Note : Il a fallu également vider les répertoires tmp et local du site amaspip, sinon on ne
pouvait plus accéder à l’espace des rédacteurs (« accès interdit »).

9. ANNEXE : Configuration de Django CMS en production
9.1. Configuration de Python

a) Installer Python et Virtualenv
Si cela n'est pas le cas, il faut l'installer python3 :
# apt -y install python3
On prépare notre système à l'installation de dépendances avec pip :

# apt -y install python3-pip python3-setuptools python3-dev build-essential
On installe un gestionnaire d’environnements virtuels :

# apt -y install python3-venv
b) Installer un environnement virtuel

On crée un environnement virtuel (dans le répertoire /usr/local/src) :
# cd /usr/local/src
# python3 -m venv djangocms_env
c) Activation de l'environnement virtuel

On active l'environnement avec la commande :
# source ./djangocms_env/bin/activate
Normalement, si tout c'est bien passé, "(djangocms_env)" devrait apparaître devant chaque ligne du
prompt pour informer qu'on est bien dans l'environnement virtuel.
d) Configuration de l’environnement virtuel

Les modules nécessaires au fonctionnement d’une application Django CMS seront installés un peu plus
tard, à l’aide du fichier requirements.txt, une fois que nous aurons copié le code dans l’environnement
de production.
Nous commençons néanmoins pas mettre à jour pip :
(djangocms_env)# pip install --upgrade pip
On complète (si nécessaire) par l’installation du module python pour le service MySql / MariaDb :
(djangocms_env)# pip install mysqlclient
On complète (si nécessaire) par l’installation du module python pour le service PostreSQL :
(djangocms_env)# pip install psycopg2-binary
9.2. Configuration du système

On installe le paquet libapache2-mod-wsgi-py3 :
# apt -y install libapache2-mod-wsgi-py3
Note : normalement, l'installation du mode suffit pour l'activer. Vérifier néanmoins que ça bien
été le cas en listant les modules chargés : ls -l /etc/apache2/mods-available/
Si vous ne trouvez pas trace du module wsgi, il vous faudra l'activer : a2enmod wsgi

9.3. Installation de l'application

a) Initialisation du projet dans /var/www
On commence par créer un nouveau répertoire :
# mkdir /var/www/djangamap
# cd /var/www/djangamap
Puis, on attribue des droits à l’utilisateur jessie :

# chown jessie:www-data djangamap
Nous pouvons maintenant copier le code de l’application dans le dossier djangamap avec les droits de
l’utilisateur jessie.
b) Enrichir l’environnement virtuel

Nous nous plaçons dans le répertoire du projet (l’environnement virtuel donc toujours être actif) :
(djangocms_env)# cd /var/www/djangamap
Puis nous lançons la commande d’installation :

(djangocms_env)# pip install -r requirements_gen.txt
IMPORTANT : Il faut utiliser le fichier requirements exporté via pip freeze et non celui généré
lors de l’installation de Django CMS, car sinon certains plugins sont installés dans de
mauvaises versions…
c) Configuration sqlite
Normalement la base sqlite ne devrait pas être utilisé en production. Si, cela doit néanmoins être le cas (à
des fins de test par exemple), il est nécessaire de modifier le fichier settings.py de notre application :
DATABASES = {
'default': {
'CONN_MAX_AGE': 0,
'ENGINE': 'django.db.backends.sqlite3',
'HOST': 'localhost',
'NAME': os.path.join(BASE_DIR, 'project.db'),
'PASSWORD': '',
'PORT': '',
'USER': ''
}
}
...
Il faut ensuite donner les droits en écriture (pour le groupe qui sera www-data) pour le fichier base de
données :
chmod g+w project.db
d) Configuration MariaDB
Avant de migrer vers un autre SGBD, on commence d’abord par sauvegarder les données de notre base
sqlite :
$ source /usr/local/src/djangocms_env/bin/activate
(djangocms_env)$ cd /var/www/djangamap
(djangocms_env)$ python manage.py dumpdata > db.json
On modifie le fichier settings.py de notre application :

DATABASES = {

'default': {
'CONN_MAX_AGE': 0,
'ENGINE': 'django.db.backends.mysql',
'NAME': 'djangamap',
'PASSWORD': 'secret',
'PORT': '3306',
'USER': 'djangamap'
}
}
On initialise alors la structure de notre nouvelle base de données :

(djangocms_env)$ python manage.py migrate
Enfin, nous chargeons les données dans notre base de données :

(djangocms_env)$ python manage.py loaddata db.json
e) Configuration PostgreSql
Avant de migrer vers un autre SGBD, on commence d’abord par sauvegarder les données de notre base
sqlite :
(djangocms_env)$ python manage.py dumpdata > db.json
On modifie le fichier settings.py de notre application :

DATABASES = {
'default': {
'CONN_MAX_AGE': 0,
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'db_djangamap',
'PASSWORD': 'secret',
'PORT': '5432',
'USER': 'u_djangamap'
}
}
On initialise alors la structure de notre nouvelle base de données :

(djangocms_env)$ python manage.py migrate
Enfin, nous chargeons les données dans notre base de données :

(djangocms_env)$ python manage.py loaddata db.json
f) Configuration production
Les styles de l’administration doivent être intégrés au répertoire static. Dans le fichier settings.py, nous
allons redéfinir la variable STATIC_ROOT :
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Puis, on lance la commande (plus besoin de droits root, mais il faut bien sur toujours être dans
l’environnement virtuel python) :
(djangocms_env)$ python manage.py collectstatic
Tant que nous sommes dans la configuration, nous en profitons pour désactiver le mode debug :
DEBUG = False
On aurait pu également mettre la ligne en commentaire…

Par défaut, la variable (liste) ALLOWED_HOSTS est vide. Elle permet de définir les domaines à servir.
Quand le mode debug est actif, même si ALLOWED_HOSTS est vide, le domaine localhost est validé 4.
Par contre, dès que le debug est désactivé, il est nécessaire de préciser le domaine, quand bien même nous
travaillons toujours, en test, sur localhost :
ALLOWED_HOSTS = ['127.0.0.1', 'localhost']
9.4. Configuration d'apache avec un virtualhost

On crée un virtualhost dans le fichier /etc/apache2/sites-available/djangamap.conf :
Listen 8081
<VirtualHost *:8081>
WSGIDaemonProcess djangamap user=jessie group=www-data threads=5
python-path=/var/www/djangamap:/usr/local/src/djangocms_env/lib/python3.7/site-
packages
WSGIScriptAlias / /var/www/djangamap/amap_auvergne/wsgi.py
Alias /robots.txt /var/www/djangamap/robots.txt

Alias /favicon.ico /var/www/djangamap/static/favicon.ico
Alias /media/ /var/www/djangamap/media/

Alias /static/ /var/www/djangamap/static/
<Directory /var/www/djangamap/static>
Require all granted
</Directory>
<Directory /var/www/djangamap/media>
Require all granted
</Directory>
<Directory /var/www/djangamap/amap_auvergne>
<Files wsgi.py>
Require all granted
</Files>
WSGIProcessGroup djangamap
WSGIApplicationGroup %{GLOBAL}
WSGIScriptReloading On
Order deny,allow
Allow from all
</Directory>
LogLevel warn
CustomLog /var/log/apache2/djangamap.log combined

CustomLog /var/log/apache2/access.log combined
Errorlog /var/log/apache2/error.log
</VirtualHost>
L’utilisateur jessie et le groupe www-data, définis dans la directive WSGIDaemonProcess,

correspondent bien sûr aux droits accordés aux fichiers dans la section précédente…
Puis, on active ce VirtualHost :
# a2ensite djangamap
# systemctl reload apache2
Normalement, le site devait alors être accessible à l’adresse localhost:8081, en cas d’erreur, vous pouvez
toujours consulter les logs :
4 Lire à ce propos la documentation en ligne

# tail /var/log/apache2/error.log
10. ANNEXE : Installation de Spip
10.1. Préparation
Création du répertoire /var/www/amaspip :
# mkdir /var/www/amaspip
Création du fichier spip_loader.php à partir de la source :

# nano /var/www/amaspip/spip_loader.php
Attribution des droits :

# chown -R jessie:www-data /var/www/amaspip
# chmod g+w /var/www/amaspip
Création d’un virtualhost dans le fichier /etc/apache2/sites-available/amaspip.conf :

Listen 8082
ServerAdmin webmaster@localhost
DocumentRoot /var/www/amaspip
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Activation du virtualhost :
# a2ensite amaspip
10.2. Chargement
On suit la procédure classique du spip_loader, le webmestre du site sera jessie (jessie@localhost) et le
mot de passe sera presles.
10.3. Finalisation de l’installation

On restreint les droits :
# chmod g-w /var/www/amaspip
# chmod g+w /var/www/amaspip/IMG
# chmod g+w /var/www/amaspip/local
# chmod g+w /var/www/amaspip/plugins/auto
# chmod g+w /var/www/amaspip/tmp
Et on réattribue les droits des utilisateurs à jessie :

# chown -R jessie:www-data /var/www/amaspip
Et on supprime le spip_loader :
# rm /var/www/amaspip/spip_loader.php
11. ANNEXE : Installation de Wordpress

On commence bien sûr par télécharger l’archive correspondant au code source du CMS.

11.1. Gestion du répertoire

Sur la MV, on crée un répertoire amapress :
# mkdir /var/www/amapress
On attribue les droits à jessie sur ce répertoire :

# chown jessie:www-data /var/www/amapress
Et on ajoute temporairement un accès en écriture pour le groupe :

# chmod g+w /var/www/amapress
11.2. Copie des fichiers

Avec un navigateur de fichiers ou client FTP, on copie les fichiers de l’archive décompressée dans le
dossier amapress (avec le compte jessie).
11.3. Virtualhost
Création d’un virtualhost dans le fichier /etc/apache2/sites-available/amapress.conf :
Listen 8083
DocumentRoot /var/www/amapress
</VirtualHost>
# a2ensite amapress
11.4. Installation du CMS

On lance l’installation depuis un navigateur depuis l’adresse http://localhost:8083. Une fois l’installation
réussie, l’interface d’administration sera accessible via le chemin wp-admin.
11.5. Finalisation de l’installation

Et on retire l’accès en écriture pour le groupe :
# chmod g-w /var/www/amapress
12. ANNEXE : Installation de Matomo
12.1. Prérequis
La lecture de cette page, nous informe de quelques prérequis. On installe donc les paquets suivant :
# apt install php php-curl php-gd php-cli php-mysql php-xml php-mbstring mariadb-
server
Note : Nous avons quelque peu adapté la configuration proposée en remplaçant notamment
mysql-server par mariadb-server.

On crée également un nouvel utilisateur matomo sur le service MariaDb, ayant tous les droits sur une
base de données au même nom (le mot de passe est secret).
12.2. Installation
On commence d’abord bien sûr pas télécharger la dernière version (Matomo On-Premise). Puis, nous
suivons le guide proposé.
a) Gestion du répertoire
Sur la MV, on crée un répertoire matomo :
# mkdir /var/www/matomo
On attribue les droits à jessie sur ce répertoire :

# chown jessie:www-data /var/www/matomo
Et on ajoute temporairement un accès en écriture pour le groupe :

# chmod g+w /var/www/matomo
b) Copie des fichiers

Avec un navigateur de fichiers ou client FTP, on copie les fichiers de l’archive décompressée dans le
dossier matomo (avec le compte jessie).
c) Virtualhost
On va configurer notre service sur le port 8084 de notre serveur.
IMPORTANT : On oubliera pas d’ajouter une redirection de port sur notre machine virtuelle !
Création d’un virtualhost dans le fichier /etc/apache2/sites-available/matomo.conf :

Listen 8084
DocumentRoot /var/www/matomo
</VirtualHost>
# a2ensite matomo
d) Installation du CMS
On lance l’installation depuis un navigateur depuis l’adresse localhost:8084.
L’installateur nous demande également de pouvoir écrire dans le sous-répertoire tmp :
chmod g+w /var/www/matomo/tmp
L’installateur nous signale également un problème de droit sur le sous-répertoire config :

chmod g+w /var/www/matomo/config
De même pour le fichier matomo.js :

chmod g+w /var/www/matomo/matomo.js

La procédure également nous signale également de désactiver les bloqueurs de site pour les sites suivis
(localhost pour nous).
IMPORTANT : Penser également à vérifier la configuration « Do Not Track », car Matomo

respecte cette configuration du navigateur (ou faire les visites avec Chromium). Problème
identifié en chargeant l’URL du suivi par image…
e) Configuration du premier site

L’installeur nous propose de configurer notre premier site (voir
la capture ci-contre).
Pour mettre en œuvre ce suivi du trafic web avec Matomo, nous
devons ajouter un code javascript sur toutes nos pages.
Remarque : L’installeur nous rappelle que sur la

plupart des sites web, blogs, CMS, etc. on peut utiliser
un plugin pour faire le travail technique à notre place
(voir la liste de plugins existants pour intégrer Matomo).
Si aucun plugin n'existe, on peut éditer les modèles de
votre site web et ajouter le code de suivi JavaScript
juste avant la balise </head>.
Voici le code de suivi javascript du premier site :


<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension"
should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//localhost:8084/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')
[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js';
s.parentNode.insertBefore(g,s);
})();
</script>

f) Finalisation de l’installation
Matomo nous signale que l’on accède au site depuis l’adresse localhost:8084/index.php, mais que
Matomo a été configuré pour s'exécuter à cette adresse localhost/index.php.
Le système nous signale que l’on peut ajouter la ligne de code suivante :
trusted_hosts[] = "localhost:8084"
Dans le fichier config/config.ini.php.

Le système nous propos alternativement de modifier ainsi la ligne suivante (toujours dans le même
fichier) :
enable_trusted_host_check = 0
Et on retire l’accès en écriture pour le groupe :

# chmod g-w /var/www/matomo

SI Web 5 DjangoCMS

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

SI Web 5 DjangoCMS

Transféré par

Droits d'auteur :

Formats disponibles

Introduction à Django CMS v 1.

1. Présentation de la machine virtuelle

1.1. Utilisation de la machine virtuelle

1.2. Bases de données

1.3. Éteindre proprement la machine virtuelle

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 1 / 32

2. Présentation du site vitrine du réseau AMAP Auvergne

Pour accéder à l’interface du

La page d’accueil propose un contenu spécifique :

Un menu situé en haut de la page (voir la figure ci-contre), nous permet

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 2 / 32

Cette partie est donc commune à toutes les pages du site.

2.2. Espace administrateur

Nous sélectionnons le lien des « Pages ».

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 3 / 32

2.3. Les templates

Cependant, Dajngo CMS ne découvre pas par magie quels fichiers

2.4. Les blocs

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 4 / 32

Le bouton « Modifier » nous permet de basculer dans un mode

Important : Le fonctionnement de Django CMS simplifie grandement la vie du développeur.

Ainsi même si nous n’avons pour le moment qu’intégrer des extensions

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 5 / 32

2.5. Les blocs statiques

Le fichier template ne définit qu’une seule section placeholder, que

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 6 / 32

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 7 / 32

2.6. Utiliser les styles définis

À RETENIR : Les éléments ajoutés à nos blocs ne doivent pas

3. Édition du AMAP Auvergne

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 8 / 32

• La page « La charte des AMAP », contient les sous-pages :

3.1. Charte de l’agriculture paysanne

On nous demande alors d’intégrer le fichier image suivant.

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 9 / 32

3..6 Ajoutez l’illustration de la charte de l’agriculture pay-

Note : Le centrage des images n’étant pas prévu dans le thème

On nous demande également d’ajouter le texte suivant, avec le rendu attendu :

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 10 / 32

Les dix principes de l’agriculture paysanne

3.2. Vie des AMAP

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 11 / 32

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 12 / 32

3.3. Adhérer au réseau

En effet, nous vous rappelons qu’en

Évidemment, pour incarner et faire

de l’assurance collective du Réseau (assurance responsabilité civile pour vos lieux

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 13 / 32

etc.) et des formations "responsables de groupes" et "problématiques agricoles".

Et surtout, vous ferez partie intégrante des activités du réseau : rencontres

4.1. Présentation de Matomo

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 14 / 32

4.2. Ne pas suivre

4.3. Obligations légales

Remarque : Au cas où, vous deviez mettre en placez

Nous allons maintenant mettre en place une mesure

5. Allons plus loin

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 15 / 32

5.2. Aperçu d’autres CMS

b) Utilisation des CMS Python

5.3. Thème AMAP AURA

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 16 / 32

5.4. Guide d’installation et de configuration

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 17 / 32