From 787d03e48471ba62cd830379428f04d996f0b74b Mon Sep 17 00:00:00 2001
From: polo <ordipolo@gmx.fr>
Date: Thu, 17 Feb 2022 18:13:00 +0100
Subject: model update

---
 view/template-formulaires.php | 375 ++++++++++++++++++++----------------------
 1 file changed, 177 insertions(+), 198 deletions(-)

(limited to 'view/template-formulaires.php')

diff --git a/view/template-formulaires.php b/view/template-formulaires.php
index e864719..a3dc9cd 100644
--- a/view/template-formulaires.php
+++ b/view/template-formulaires.php
@@ -1,199 +1,178 @@
-<?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)
-// note: on ne peut préremplir le champ input texte
-// solution: on affiche le nom du fichier, si l'utilisateur en télécharge un autre, on le remplace
-ob_start();
-?>
-        <p><i>Infos qui seront affichées sur cette page:</i></p>
-        <label for="titre" >Titre</label>
-        <input type="text" name="titre" value="<?= $vignette[0] ?>" required ><br />
-        <label for="annee" >Année</label>
-        <input type="text" name="annee" value="<?= $vignette[1] ?>" required ><br />
-        <label for="pochette" >Pochette du disque (jpg ou png) : <?= $vignette[2] ?></label><br/>
-        <input type="file" name="upload" >
-        <br /><br />
-<?php
-$inputsAlbum = ob_get_clean();
-
-
-// variable $editeurHTML
-ob_start();
-?>
-
-    <div class="conteneur_article" >
-    <form action="index.php?page=<?= $page_actuelle ?>&article=<?= $album_code ?>&action=submit" method="post" enctype="multipart/form-data" >
-<?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 immédiatement l'image envoyée pour la placer dans l'éditeur
-                    // - à inclure l'adresse de l'image dans le HTML produit par l'éditeur
-                    simpleUpload: {
-                        uploadUrl: 'index.php?action=upload_image&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 est simple (JS pur) et n'oblige pas le serveur à disposer de l'extension GD
-                    // niveau perfs, on garde le choix d'utiler GD ou imagemagick ou un système d'onglets
-                    
-                    // 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
+<?php
+// view/template-formulaire.php
+
+// voici la partie HTML et javascript du ckeditor:
+// on crée un formulaire <form> avec zones de saisie et boutons
+// l'éditeur est inséré par lib/ckeditor5/build/ckeditor.js
+// en remplaçant les balises <textarea>
+
+// il est en version "Classic" customizée pour pouvoir ressembler à la version "DecoupledEditor", on peut le créer ici:
+// https://ckeditor.com/ckeditor-5/online-builder/
+// la version DecoupledEditor ne peut remplacer une <textarea>, il faut une <div>, ce qui interdit la méthode 1) ci-dessous
+
+// pour envoyer les données au serveur, on a trois méthodes:
+// 1) facile: le JS de la bibliothèque remplace la <textarea> par l'éditeur, noter que c'est impossible avec la version DecoupledEditor du ckeditor5, d'ou le choix la "custom"
+// 2) moins facile; technique du formulaire caché (l'éditeur remplace une <div>), à la validation, du JS (appelé avec onload="") place les données dans l'<input> caché duquel part le POST
+// 3) méthode AJAX (compliquée): le formulaire ni le bouton "valider" ne sont plus nécessaires et l'enregistrement des données est immédiat
+
+
+// falsification de requête inter-site - CSRF
+// à faire plus tard
+
+
+// variable $inputsAlbum (page discographie uniquement)
+// attention: on ne peut préremplir le champ input file
+// solution: on affiche le nom du fichier, si l'utilisateur en télécharge un autre, on le remplace;
+// il devient donc impossible de n'avoir aucun fichier
+ob_start();
+?>
+        <img class="imageFormulaire" src="<?= $imageFormulaire ?>" >
+        <br/>
+        <p><i>Infos qui seront affichées sur cette page:</i></p>
+        <label for="titre" >Titre</label>
+            <input type="text" name="titre" value="<?= $vignette[0] ?>" required ><br />
+        <label for="annee" >Année</label>
+            <input type="text" name="annee" value="<?= $vignette[1] ?>" required ><br />
+        <label for="pochette" >Pochette du disque (jpg ou png) : <?= $vignette[2] ?></label><br/>
+            <input type="file" name="upload" ><br /><br /><br />
+<?php
+$inputsAlbum = ob_get_clean();
+
+
+// variable $editeurHTML
+ob_start();
+?>
+
+    <div class="conteneur_article" >
+    <form action="index.php?page=<?= $page_actuelle ?><?= $fileCodeArgument ?>&action=submit" method="post" enctype="multipart/form-data" >
+<?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>
+        <input class="boutonSubmitEditeur" type="submit" value="Valider" />
+        <a class="boutonAnnuler" href="index.php?page=<?= $page_actuelle ?>" >
+            <input type="button" value="Annuler" />
+        </a>
+        
+        <script>
+            let editor; // variable utilisable depuis une fonction
+            
+            // 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 "custom 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 immédiatement l'image envoyée pour la placer dans l'éditeur
+                    // - à inclure l'adresse de l'image dans le HTML produit par l'éditeur
+                    simpleUpload: {
+                        uploadUrl: 'index.php?action=upload_image&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 est simple (JS pur) et n'oblige pas le serveur à disposer de l'extension GD
+                    // niveau perfs, on garde le choix d'utiler GD ou imagemagick ou un système d'onglets
+                    
+                    // 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