From 47d650911124f833dd5fe94e31594bd591d6f372 Mon Sep 17 00:00:00 2001
From: polo <contact@ordipolo.fr>
Date: Tue, 10 Aug 2021 04:26:16 +0200
Subject: formulaires

---
 view/discographie.php         |   2 -
 view/melaine.php              |   3 -
 view/template-ckeditor.php    | 185 --------------------------------------
 view/template-formulaires.php | 201 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 201 insertions(+), 190 deletions(-)
 delete mode 100644 view/template-ckeditor.php
 create mode 100644 view/template-formulaires.php

(limited to 'view')

diff --git a/view/discographie.php b/view/discographie.php
index 45960d2..4eb8e58 100644
--- a/view/discographie.php
+++ b/view/discographie.php
@@ -43,7 +43,6 @@ $header = ob_get_clean();
 // variable $content
 ob_start();
 ?>
-				<!-- <div id="multicolonnes" > -->
 					<aside>
 						<div>
 						<p id="bouton_chronologie" >Chronologie</p>
@@ -82,6 +81,5 @@ if($_SESSION['admin'] == 1)
 }
 ?>
 	            	</section>
-	            <!-- </div> -->
 <?php
 $content = ob_get_clean();
diff --git a/view/melaine.php b/view/melaine.php
index 4b3b818..657c656 100644
--- a/view/melaine.php
+++ b/view/melaine.php
@@ -102,9 +102,6 @@ foreach ($articles as $article)
                                 Modifier cet article
                             </a>
                             &nbsp;<!-- un espace -->
-                            <!-- <button>
-                                Supprimer cet article
-                            </button> -->
                             <a href="index.php?page=melaine&action=suppression&article=<?= $j ?>" onclick="confirmerSuppression('<?= $page_actuelle ?>')" >
                                 Supprimer cet article
                             </a>
diff --git a/view/template-ckeditor.php b/view/template-ckeditor.php
deleted file mode 100644
index 8e87f1d..0000000
--- a/view/template-ckeditor.php
+++ /dev/null
@@ -1,185 +0,0 @@
-<?php
-// view/template-ckeditor.php
-
-// voici la partie HTML et javascript du ckeditor,
-// elle permette d'insérer l'éditeur dans la page avec un formulaire qui comporte 4 éléments:
-// barre d'outils, zone de saisie, formulaire caché, bouton "valider"
-
-// le formulaire est presque classique, en effet on utilise le ckeditor 5 dans sa version "Document" (ou DecoupledEditor):
-// - avantage: plus de possibilité dans la barre d'outils (se rapproche d'un traitement de texte)
-// - inconvénient: on ne peut utiliser la balise <textarea> qu'on remplace par une <div>
-
-// pour pouvoir envoyer le contenu dans le POST, on a deux possibilité:
-// - savoir coder en javascript ! et donc faire de l'AJAX, dans ce cas on n'a même plus besoin de formulaire, le contenu est envoyé au serveur au fur et à mesure! ce sera l'objet d'une future amélioration
-// - utiliser l'astuce du formulaire caché !
-
-// le javascript place les données dans le formulaire caché
-// avec la fonction envoiDonnees(), les données se retrouvent dans une <input> et sont donc envoyées avec par la POST (haha)
-
-// variable $editeurHTML
-ob_start();
-?>
-
-    <div class="conteneur_article" >
-    <form action="index.php?page=<?= $page_actuelle ?>&article=<?= $numArticle ?>&action=submit" method="post" >
-<?php
-if($page_actuelle == 'discographie')
-{
-    echo($additionalInputs . "<p><i>Infos qui seront affichées dans la page dédiée:</i></p>");
-}
-?>
-
-        <textarea id="editor" name="contenu" ></textarea>
-<?php
-// falsification de requête inter-site
-// on ajoute un formulaire caché avec une valeur aléatoire cryptée utilisable une seule fois (=jeton)
-
-// "Vous pouvez rendre chaque jeton utilisable une seule fois et ainsi éviter de rejouer plusieurs fois la même requête.
-// Les jetons sont stockés dans le back-office.
-// Une rotation des jetons est effectuée quand le nombre maximum a été atteint, les plus vieux en premier.
-// Chaque jeton peut être lié à une URL spécifique.
-// Si un jeton est intercepté, il ne peut pas être utilisé dans un autre contexte.
-// Si besoin, les jetons peuvent être attachés à une adresse IP spécifique.
-// Depuis la version v2.1, les jetons peuvent être réutilisés (par exemple pour les requêtes AJAX).
-// Si vous n’utilisez pas un framework qui gère la protection CSRF pour vous, jetez un oeil à Anti-CSRF."
-
-// une bibli qui fait ça: https://github.com/paragonie/anti-csrf
-?>
-        
-        <input class="boutonSubmitEditeur" type="submit" value="Valider" onclick="envoiDonnees();" />
-        
-        <script>
-            let editor; // variable utilisable depuis une fonction
-            
-            // code exécuté à la validation du formulaire
-            function envoiDonnees()
-            {
-                // supprimer le positionnement absolu de l'iframe
-                //~ let balisesIframe = document.getElementsByTagName("iframe");
-                //~ for(var i = 0; i < balisesIframe.length; i++)
-                //~ {
-                    //~ alert(balisesIframe[i].getAttribute("style")); // affiche le CSS
-                    //~ balisesIframe[i].removeAttribute("style");
-                    //~ alert(balisesIframe[i].getAttribute("style")); // affiche null
-                //~ }
-            }
-            
-            // ATTENTION: si l'éditeur ne fonctionne pas, empêcher qu'on puisse cliquer sur Valider!
-            // Il y a aussi des paramètres dans le fichier de config: ckeditor/webpack.config.js
-            ClassicEditor
-                .create( document.querySelector( '#editor' ),{
-                    language: 'fr',
-                    
-                    // barre d'outils à adapter au build
-                    toolbar: {
-                        items: [ 'undo', 'redo', 'selectAll', '|', 'heading', '|', 'alignment', 'bulletedList', 'numberedList', 'todoList', 'blockQuote', 'horizontalLine', '-', 'bold', 'italic', 'underline',
-                        //'strikethrough',
-                        '|',
-                        //'fontFamily',
-                        'fontColor', 'fontSize', 'highlight', '|', 'imageInsert', 'link',
-                        //'htmlEmbed',
-                        //'mediaEmbed',
-                        'insertTable'
-                        //'|', 'textPartLanguage'
-                        ],
-                        // multiligne automatique (le '-' dans la liste permet de choisir l'endroit où couper)
-                        shouldNotGroupWhenFull: true
-                        
-                        // noter que 'fontFamily' ne comporte que des polices microsoft => problèmes de droits?
-                        // de plus, il faut que le navigateur connaisse toutes les polices
-                    },
-                    
-                    // barre d'outils dans une image
-                    image: {
-                        toolbar: [
-                            'imageTextAlternative',
-                            'imageStyle:full',
-                            'imageStyle:side',
-                            'linkImage'
-                        ]
-                    },
-                    
-                    // barre d'outils dans un tableau
-                    table: {
-                        contentToolbar: [
-                            'tableColumn',
-                            'tableRow',
-                            'mergeTableCells',
-                            //'tableCellProperties',
-                            'tableProperties'
-                        ]
-                    },
-                    
-                    // plugin code HTML
-                    // pour coller le code HTML "embed" proposé par certains sites
-                    
-                    // media embarqué (audio, vidéo, carte)
-                    //mediaEmbed: {
-                        //previewsInData: true,
-                        // vaut "false" par defaut, on crée la balise non standard <oembed url="" > // https://oembed.com/
-                        // qui nécessite un traitement (en JS ou côté serveur) en utilisant le lien à l'intérieur
-                        // avec "true", on crée la balise <iframe> qui sert à insérer une page HTML dans une autre,
-                        // notre "embarquement de média" devrit donc réussir quelque soit le site
-                        // c'est plus simple, il ne reste plus qu'à ajuster le contenu avec du CSS (important)
-                        // on doit supprimer le positionnement absolu qui fait que l'iframe se place par dessus le reste et adapter la taille de l'élément
-                        
-                        // en outre, le plugin mediaEmbed (dans l'éditeur), tout comme la balise "iframe" (hors éditeur),
-                        // permettent d'afficher un aperçu (preview): une image avec un bouton lecture dessus
-                        // cette image est envoyée imédiatement par le serveur, et le contenu après un clic dessus
-                        // 
-                    //},
-                    
-                    // images
-                    // https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html
-                    // le plugin "image upload" s'occupe est la partie graphique, il crée un objet "createLoader",
-                    // le plugin "simple upload adapter" est la classe qui communique avec le serveur au moyen de requêtes AJAX
-                    // il attend du serveur une réponse au format .json contenant l'adresse où est stockée l'image:
-                    //{
-                    //  "url": "https://example.com/images/foo.jpg"
-                    //}
-                    // cette url sert à deux choses:
-                    // - à télécharger l'image avant de la placer dans l'éditeur
-                    // - écrire le HTML qu'on enregistrera ensuite
-                    // en effet, le fichier est téléchargé sur le serveur avant de revenir dans l'éditeur comme un téléchargement classique
-                    simpleUpload: {
-                        uploadUrl: 'imageAJAX.php?page=<?= $page_actuelle ?>',
-                        // noter qu'il est possible (parce que souhaitable je ne pense pas) d'envoyer une requête AJAX
-                        // en indiquant une adresse "statique" du type: fichier.txt ou .xml, jpg, png, etc
-
-                        // Headers supplémentaires envoyés avec la requête
-                        // c'est ici qu'on installe les mécanismes de sécurités comme l'authentification et la protection au CSRF
-                        headers: {
-                            'X-CSRF-TOKEN': 'CSRF-Token',
-                            Authorization: 'Bearer <JSON Web Token>'
-                        }
-                    },
-                    // formats acceptés par défaut: jpeg, png, gif, bmp, webp, tiff
-                    // le svg n'est pas dans la liste, pour raison de sécurité apparemment, il parait qu'on peut mettre du javascript à l'intérieur
-                    
-                    // ce plugin a l'intérêt de ne pas imposer l'utilisation de l'extension GD de PHP,
-                    // Reste qu'il sera quand même intéressant de l'ajouter pour le redimensionnement des images trop lourdes,
-                    // quoi que le système d'onglets (limiter l'affichge à 5 ou 10 articles par page) règle aussi le problème d'une autre manière
-                    
-                    
-                    // plugin autosave
-                } )
-                
-                .then( newEditor => {
-                    editor = newEditor;
-                    
-                // obtenir la liste des éléments disponibles pour la barre d'outils
-                //alert(Array.from( editor.ui.componentFactory.names() ));
-                // obtenir la liste des plugins disponibles:
-                //alert(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));
-                
-                var initial = '<?= $texte ?>';
-                editor.setData(initial);
-            } )
-            .catch( error => {
-                console.error( error );
-            } );
-        </script>
-    </form>
-    </div>
-<?php
-$editeurHTML = ob_get_clean();
\ No newline at end of file
diff --git a/view/template-formulaires.php b/view/template-formulaires.php
new file mode 100644
index 0000000..7eb1bb5
--- /dev/null
+++ b/view/template-formulaires.php
@@ -0,0 +1,201 @@
+<?php
+// view/template-formulaire.php
+
+// voici la partie HTML et javascript du ckeditor,
+// elle permette d'insérer l'éditeur dans la page avec un formulaire qui comporte 4 éléments:
+// barre d'outils, zone de saisie, formulaire caché, bouton "valider"
+
+// le formulaire est presque classique, en effet on utilise le ckeditor 5 dans sa version "Document" (ou DecoupledEditor):
+// - avantage: plus de possibilité dans la barre d'outils (se rapproche d'un traitement de texte)
+// - inconvénient: on ne peut utiliser la balise <textarea> qu'on remplace par une <div>
+
+// pour pouvoir envoyer le contenu dans le POST, on a deux possibilité:
+// - savoir coder en javascript ! et donc faire de l'AJAX, dans ce cas on n'a même plus besoin de formulaire, le contenu est envoyé au serveur au fur et à mesure! ce sera l'objet d'une future amélioration
+// - utiliser l'astuce du formulaire caché !
+
+// le javascript place les données dans le formulaire caché
+// avec la fonction envoiDonnees(), les données se retrouvent dans une <input> et sont donc envoyées avec par la POST (haha)
+
+
+// variable $inputsAlbum (page discographie uniquement)
+ob_start();
+?>
+        <p><i>Infos qui seront affichées sur cette page:</i></p>
+        <label for="titre" >Titre</label>
+        <input type="text" name="titre" required ><br />
+        <label for="annee" >Année</label>
+        <input type="text" name="annee" ><br />
+        <label for="pochette" >Pochette du disque (jpg ou png)</label>
+        <input type="file" name="pochette" >
+        <br /><br />
+<?php
+$inputsAlbum = ob_get_clean();
+
+
+// variable $editeurHTML
+ob_start();
+?>
+
+    <div class="conteneur_article" >
+    <form action="index.php?page=<?= $page_actuelle ?>&article=<?= $numArticle ?>&action=submit" method="post" >
+<?php
+if($page_actuelle == 'discographie')
+{
+    echo($inputsAlbum . "<p><i>Infos qui seront affichées dans la page spécifique à cet album:</i></p>");
+}
+?>
+
+        <textarea id="editor" name="contenu" ></textarea>
+<?php
+// falsification de requête inter-site
+// on ajoute un formulaire caché avec une valeur aléatoire cryptée utilisable une seule fois (=jeton)
+
+// "Vous pouvez rendre chaque jeton utilisable une seule fois et ainsi éviter de rejouer plusieurs fois la même requête.
+// Les jetons sont stockés dans le back-office.
+// Une rotation des jetons est effectuée quand le nombre maximum a été atteint, les plus vieux en premier.
+// Chaque jeton peut être lié à une URL spécifique.
+// Si un jeton est intercepté, il ne peut pas être utilisé dans un autre contexte.
+// Si besoin, les jetons peuvent être attachés à une adresse IP spécifique.
+// Depuis la version v2.1, les jetons peuvent être réutilisés (par exemple pour les requêtes AJAX).
+// Si vous n’utilisez pas un framework qui gère la protection CSRF pour vous, jetez un oeil à Anti-CSRF."
+
+// une bibli qui fait ça: https://github.com/paragonie/anti-csrf
+?>
+        
+        <input class="boutonSubmitEditeur" type="submit" value="Valider" onclick="envoiDonnees();" />
+        
+        <script>
+            let editor; // variable utilisable depuis une fonction
+            
+            // code exécuté à la validation du formulaire
+            function envoiDonnees()
+            {
+                // supprimer le positionnement absolu de l'iframe
+                //~ let balisesIframe = document.getElementsByTagName("iframe");
+                //~ for(var i = 0; i < balisesIframe.length; i++)
+                //~ {
+                    //~ alert(balisesIframe[i].getAttribute("style")); // affiche le CSS
+                    //~ balisesIframe[i].removeAttribute("style");
+                    //~ alert(balisesIframe[i].getAttribute("style")); // affiche null
+                //~ }
+            }
+            
+            // ATTENTION: si l'éditeur ne fonctionne pas, empêcher qu'on puisse cliquer sur Valider!
+            // Il y a aussi des paramètres dans le fichier de config: ckeditor/webpack.config.js
+            ClassicEditor
+                .create( document.querySelector( '#editor' ),{
+                    language: 'fr',
+                    
+                    // barre d'outils à adapter au build
+                    toolbar: {
+                        items: [ 'undo', 'redo', 'selectAll', '|', 'heading', '|', 'alignment', 'bulletedList', 'numberedList', 'todoList', 'blockQuote', 'horizontalLine', '-', 'bold', 'italic', 'underline',
+                        //'strikethrough',
+                        '|',
+                        //'fontFamily',
+                        'fontColor', 'fontSize', 'highlight', '|', 'imageInsert', 'link',
+                        //'htmlEmbed',
+                        //'mediaEmbed',
+                        'insertTable'
+                        //'|', 'textPartLanguage'
+                        ],
+                        // multiligne automatique (le '-' dans la liste permet de choisir l'endroit où couper)
+                        shouldNotGroupWhenFull: true
+                        
+                        // noter que 'fontFamily' ne comporte que des polices microsoft => problèmes de droits?
+                        // de plus, il faut que le navigateur connaisse toutes les polices
+                    },
+                    
+                    // barre d'outils dans une image
+                    image: {
+                        toolbar: [
+                            'imageTextAlternative',
+                            'imageStyle:full',
+                            'imageStyle:side',
+                            'linkImage'
+                        ]
+                    },
+                    
+                    // barre d'outils dans un tableau
+                    table: {
+                        contentToolbar: [
+                            'tableColumn',
+                            'tableRow',
+                            'mergeTableCells',
+                            //'tableCellProperties',
+                            'tableProperties'
+                        ]
+                    },
+                    
+                    // plugin code HTML
+                    // pour coller le code HTML "embed" proposé par certains sites
+                    
+                    // media embarqué (audio, vidéo, carte)
+                    //mediaEmbed: {
+                        //previewsInData: true,
+                        // vaut "false" par defaut, on crée la balise non standard <oembed url="" > // https://oembed.com/
+                        // qui nécessite un traitement (en JS ou côté serveur) en utilisant le lien à l'intérieur
+                        // avec "true", on crée la balise <iframe> qui sert à insérer une page HTML dans une autre,
+                        // notre "embarquement de média" devrit donc réussir quelque soit le site
+                        // c'est plus simple, il ne reste plus qu'à ajuster le contenu avec du CSS (important)
+                        // on doit supprimer le positionnement absolu qui fait que l'iframe se place par dessus le reste et adapter la taille de l'élément
+                        
+                        // en outre, le plugin mediaEmbed (dans l'éditeur), tout comme la balise "iframe" (hors éditeur),
+                        // permettent d'afficher un aperçu (preview): une image avec un bouton lecture dessus
+                        // cette image est envoyée imédiatement par le serveur, et le contenu après un clic dessus
+                        // 
+                    //},
+                    
+                    // images
+                    // https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html
+                    // le plugin "image upload" s'occupe est la partie graphique, il crée un objet "createLoader",
+                    // le plugin "simple upload adapter" est la classe qui communique avec le serveur au moyen de requêtes AJAX
+                    // il attend du serveur une réponse au format .json contenant l'adresse où est stockée l'image:
+                    //{
+                    //  "url": "https://example.com/images/foo.jpg"
+                    //}
+                    // cette url sert à deux choses:
+                    // - à télécharger l'image avant de la placer dans l'éditeur
+                    // - écrire le HTML qu'on enregistrera ensuite
+                    // en effet, le fichier est téléchargé sur le serveur avant de revenir dans l'éditeur comme un téléchargement classique
+                    simpleUpload: {
+                        uploadUrl: 'imageAJAX.php?page=<?= $page_actuelle ?>',
+                        // noter qu'il est possible (parce que souhaitable je ne pense pas) d'envoyer une requête AJAX
+                        // en indiquant une adresse "statique" du type: fichier.txt ou .xml, jpg, png, etc
+
+                        // Headers supplémentaires envoyés avec la requête
+                        // c'est ici qu'on installe les mécanismes de sécurités comme l'authentification et la protection au CSRF
+                        headers: {
+                            'X-CSRF-TOKEN': 'CSRF-Token',
+                            Authorization: 'Bearer <JSON Web Token>'
+                        }
+                    },
+                    // formats acceptés par défaut: jpeg, png, gif, bmp, webp, tiff
+                    // le svg n'est pas dans la liste, pour raison de sécurité apparemment, il parait qu'on peut mettre du javascript à l'intérieur
+                    
+                    // ce plugin a l'intérêt de ne pas imposer l'utilisation de l'extension GD de PHP,
+                    // Reste qu'il sera quand même intéressant de l'ajouter pour le redimensionnement des images trop lourdes,
+                    // quoi que le système d'onglets (limiter l'affichge à 5 ou 10 articles par page) règle aussi le problème d'une autre manière
+                    
+                    
+                    // plugin autosave
+                } )
+                
+                .then( newEditor => {
+                    editor = newEditor;
+                    
+                // obtenir la liste des éléments disponibles pour la barre d'outils
+                //alert(Array.from( editor.ui.componentFactory.names() ));
+                // obtenir la liste des plugins disponibles:
+                //alert(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));
+                
+                var initial = '<?= $texte ?>';
+                editor.setData(initial);
+            } )
+            .catch( error => {
+                console.error( error );
+            } );
+        </script>
+    </form>
+    </div>
+<?php
+$editeurHTML = ob_get_clean();
\ No newline at end of file
-- 
cgit v1.2.3