inversion de positions

22 files changed, 312 insertions, 63 deletions

diff --git a/controller/admin.php b/controller/admin.php
index 93d1900..845fab1 100644
--- a/controller/admin.php
+++ b/controller/admin.php
@@ -33,16 +33,14 @@ function pageArticlesSimplesAdmin(string $page, string $title, string $headerPai
                 $Articles->fileCode = $fileCode;

                 $_SESSION['target'] = $Articles->fileCode;

 

-                // suppression

                 if($suppression)

                 {

                         $Articles->delete();

                         

-                        // redirection immédiate avant affichage

+                        // c'est fait, on recharge

                         header('Location: index.php?page=' . $page);

                         exit();

                 }

-                // modification

                 else

                 {

                         $title = "Modifier un article";

@@ -91,7 +89,7 @@ function pageArticlesSimplesAdmin(string $page, string $title, string $headerPai
 }

 

 // un article (= actualité)

-function menuEdit($fileCode, $suppression)

+function menuEdit($fileCode, int $suppression)

 {

         $page = "menu";

         $title = "Melaine Favennec - menu BD";

@@ -100,56 +98,56 @@ function menuEdit($fileCode, $suppression)
 }

 

 // plusieurs articles

-function melaineEdit($fileCode, $suppression)

+function melaineEdit($fileCode, int $suppression)

 {

         $page = "melaine";

         $title = "Mais qui est Melaine Favennec?";

         $headerPaintedTitle = 'Melaine Favennec';

         pageArticlesSimplesAdmin($page, $title, $headerPaintedTitle, $fileCode, $suppression);

 }

-function musiqueEdit($fileCode, $suppression)

+function musiqueEdit($fileCode, int $suppression)

 {

         $page = "musique";

         $title = "Musique";

         $headerPaintedTitle = 'Musique';

         pageArticlesSimplesAdmin($page, $title, $headerPaintedTitle, $fileCode, $suppression);

 }

-function presseEdit($fileCode, $suppression)

+function presseEdit($fileCode, int $suppression)

 {

         $page = "presse";

         $title = "La presse";

         $headerPaintedTitle = 'La Presse';

         pageArticlesSimplesAdmin($page, $title, $headerPaintedTitle, $fileCode, $suppression);

 }

-function livresEdit($fileCode, $suppression)

+function livresEdit($fileCode, int $suppression)

 {

         $page = "livres";

         $title = "Livres";

         $headerPaintedTitle = 'Dans les livres';

         pageArticlesSimplesAdmin($page, $title, $headerPaintedTitle, $fileCode, $suppression);

 }

-function jaimeEdit($fileCode, $suppression)

+function jaimeEdit($fileCode, int $suppression)

 {

         $page = "jaime";

         $title = "J'aime";

         $headerPaintedTitle = 'J\'aime';

         pageArticlesSimplesAdmin($page, $title, $headerPaintedTitle, $fileCode, $suppression);

 }

-function peintureEdit($fileCode, $suppression)

+function peintureEdit($fileCode, int $suppression)

 {

         $page = "peinture";

         $title = "peinture";

         $headerPaintedTitle = 'Celtic Boats';

         pageArticlesSimplesAdmin($page, $title, $headerPaintedTitle, $fileCode, $suppression);

 }

-function archivesEdit($fileCode, $suppression)

+function archivesEdit($fileCode, int $suppression)

 {

         $page = "archives";

         $title = "Archives";

         $headerPaintedTitle = 'Archives';

         pageArticlesSimplesAdmin($page, $title, $headerPaintedTitle, $fileCode, $suppression);

 }

-function legalEdit($fileCode, $suppression)

+function legalEdit($fileCode, int $suppression)

 {

         $page = "legal";

         $title = "Mentions légales";

@@ -159,7 +157,7 @@ function legalEdit($fileCode, $suppression)
 

 

 // page plus complexe que les autres

-function discoEdit($fileCode, $suppression)

+function discoEdit($fileCode, int $suppression)

 {

         $page = "discographie";

         $title = "Discographie";

@@ -270,3 +268,13 @@ function discoEdit($fileCode, $suppression)
         // fin de l'assemblage

         require('view/template.php');

 }

+

+

+// version sans JS (l'autre est dans ajax.php)

+function inversionPositions(string $page, $fileCode, string $class, int $direction)

+{

+        $Object = new $class($page);

+        $Object->fileCode = $fileCode;

+        // direction: 1 = monter, -1 = descendre

+        $Object->inversionPositions($direction);

+}
\ No newline at end of file
diff --git a/controller/ajax.php b/controller/ajax.php
index 24710d8..188b01f 100644
--- a/controller/ajax.php
+++ b/controller/ajax.php
@@ -1,7 +1,9 @@
 <?php
 // controller/ajax.php
-
+//
 // traitement des requêtes AJAX
+
+
 // -> insertion d'une image dans l'éditeur
 if(isset($_GET['action']) && isset($_GET['page']) && $_GET['action'] == 'upload_image')
 {
@@ -30,6 +32,48 @@ if(isset($_GET['action']) && isset($_GET['page']) && $_GET['action'] == 'upload_
 }
 
 
+// inversion des positions de deux éléments d'une page
+/*if(isset($_GET['action']) && isset($_GET['page']) && ($_GET['action'] == 'monter' || $_GET['action'] == 'descendre') && isset($_GET['file_code']) && !empty($_GET['file_code']))
+{
+    // sécurité !!
+    if(!isset($_SESSION['admin']) || $_SESSION['admin'] != 1)
+    {
+        header('Location: index.php?erreur=interdit');
+    }
+    else
+    {
+        require('controller/admin.php');
+        require('model/Article.php');
+
+        $pagesArticlesSimples = ['menu', 'melaine', 'musique', 'presse', 'livres', 'jaime', 'peinture', 'archives', 'legal'];
+        $sens = 0;
+
+        if($_GET['action'] == 'monter')
+        {
+            $sens = 1;
+        }
+        if($_GET['action'] == 'descendre')
+        {
+            $sens = 0;
+        }
+
+        if(in_array($_GET['page'], $pagesArticlesSimples))
+        {
+            // 1 pour monter
+            inversionPositions($_GET['page'], $_GET['file_code'], 'Article', $sens);
+        }
+        elseif($_GET['page'] == 'discographie')
+        {
+            require('model/Album.php');
+            
+            // 1 pour monter
+            inversionPositions($_GET['page'], $_GET['file_code'], 'Album', $sens);
+        }
+    }
+    exit(); // stop !!
+}*/
+
+
 // page restauration quand le fichier zip est lourd
 // -> input file onchange
 if(isset($_GET['action']) && $_GET['action'] == 'restauration'
diff --git a/controller/installation.php b/controller/installation.php
index 5aa5ac9..2e4e1c3 100644
--- a/controller/installation.php
+++ b/controller/installation.php
@@ -32,8 +32,8 @@ function installation()
     // - créer le dossier data à la racine du site

     // - lui donner les droits du dossier data pour 777

 

-    // valeur en octal

-    $droitsDossiers = 0777; // mettre 0755 en production

+    // droits en octal

+    $droitsDossiers = 0777;

     $droitsFichiers = 0666;

 

     if(!file_exists('data') && !mkdir('data'))

@@ -68,16 +68,22 @@ function installation()
         {

             createIndexPHP('data/' . $page . '/index.php', $droitsFichiers);

         }

-        foreach ($sousDossiers as $dossier)

+        if(!file_exists('data/' . $page . '/positions.json'))

         {

-            if(!file_exists('data/' . $page . '/' . $dossier))

+            // création de fichiers VIDES (gestion par le modèle)

+            touch('data/' . $page . '/positions.json');

+            chmod('data/' . $page . '/positions.json', $droitsFichiers);

+        }

+        foreach ($sousDossiers as $sousDossier)

+        {

+            if(!file_exists('data/' . $page . '/' . $sousDossier))

             {

-                mkdir('data/' . $page . '/' . $dossier);

-                chmod('data/' . $page . '/' . $dossier, $droitsDossiers);

+                mkdir('data/' . $page . '/' . $sousDossier);

+                chmod('data/' . $page . '/' . $sousDossier, $droitsDossiers);

             }

-            if(!file_exists('data/' . $page . '/' . $dossier . '/index.php'))

+            if(!file_exists('data/' . $page . '/' . $sousDossier . '/index.php'))

             {

-                createIndexPHP('data/' . $page . '/' . $dossier . '/index.php', $droitsFichiers);

+                createIndexPHP('data/' . $page . '/' . $sousDossier . '/index.php', $droitsFichiers);

             }

         }

         // if(!file_exists('data/' . $page . '/multimedia'))

@@ -87,7 +93,7 @@ function installation()
         // }

     }

 

-    // dossier supplémentaire dans discographie

+    // dossier "json" dans discographie

     if(!file_exists('data/discographie/json'))

     {

         mkdir('data/discographie/json');

diff --git a/controller/password.php b/controller/password.php
index 9d9b45b..efc8975 100644
--- a/controller/password.php
+++ b/controller/password.php
@@ -1,7 +1,7 @@
 <?php
 // controller/password.php
 
-// fonction exécutée à l'ouverture de chaque page
+// exécutée dans installation.php à l'ouverture de chaque page
 function existPassword()
 {
         // création du fichier
diff --git a/controller/visitor.php b/controller/visitor.php
index e0cd7fc..d03197d 100644
--- a/controller/visitor.php
+++ b/controller/visitor.php
@@ -32,8 +32,8 @@ function pageArticlesSimplesVisitor(string $page, string $title, string $headerP
         {

                 // données dans $Articles->fileList['content']

                 $Articles->readAll();

+                // lourd?

                 $Articles->fileList = array_reverse($Articles->fileList);

-                //var_dump($Articles->fileList[0]);

         }

 

         // Assemblage

diff --git a/index.php b/index.php
index 87c020e..66b2f89 100644
--- a/index.php
+++ b/index.php
@@ -17,18 +17,17 @@ if(!empty($_SESSION['erreur']))
 // variables globales, dépendances et config par l'utilisateur

 require('controller/config.php');

 

-// au premier démarrage du site (création du dossier "data")

-require('controller/installation.php');

-

-// penser à faire qu'on ne l'ouvre pas tout le temps

 // -> présence du data/password.txt?

 require('controller/password.php');

 

+// au premier démarrage du site (création du dossier "data")

+require('controller/installation.php');

 installation();

 

-// traitement des requêtes AJAX

+// traitement des requêtes AJAX, execute exit() à la fin

 require('controller/ajax.php');

 

+

 // traitement des POST du ckeditor

 // la fonction submitCKeditor est "autonome", elle n'affiche rien puis redirige sans GET

 if(isset($_SESSION['admin']) && $_SESSION['admin'] == 1

@@ -67,13 +66,7 @@ if(isset($_GET['action']) && isset($_GET['page']))
 

 

 

-// construction des pages

-

-// mode visiteur (sans l'éditeur)

-require('controller/visitor.php');

-

 // modèle

-//if(isset($_GET['page']) && $_GET['page'] != 'menu')

 if(isset($_GET['page'])) // utile?

 {

     require('model/Article.php');

@@ -84,6 +77,11 @@ if(isset($_GET['page'])) // utile?
 }

 

 

+

+// contrôleurs

+// mode visiteur (sans l'éditeur)

+require('controller/visitor.php');

+

 // contrôleur des pages en mode admin

 if(isset($_SESSION['admin']) && $_SESSION['admin'] == 1)

 {

@@ -97,7 +95,8 @@ else
 }

 

 

-// page du site demandée

+

+// traitements des GET (page du site et action souhaitée)

 if(isset($_GET['page']))

 {

     $pagesArticlesSimples = ['menu', 'melaine', 'musique', 'presse', 'livres', 'jaime', 'peinture', 'archives', 'legal'];

@@ -138,6 +137,33 @@ if(isset($_GET['page']))
                 $fonctionEdit('', 0);

             }

         }

+        // modification d'un positions.json (version sans JS)

+        else if($_SESSION['admin'] == 1 && isset($_GET['action']) && $_GET['action'] == 'monter')

+        {

+            if(isset($_GET['file_code']) && !empty($_GET['file_code']))

+            {

+                // 1 pour monter

+                inversionPositions($_GET['page'], $_GET['file_code'], 'Article', 1);

+                $fonctionVisitor();

+            }

+            else

+            {

+                $fonctionVisitor();

+            }

+        }

+        else if($_SESSION['admin'] == 1 && isset($_GET['action']) && $_GET['action'] == 'descendre')

+        {

+            if(isset($_GET['file_code']) && !empty($_GET['file_code']))

+            {

+                // -1 pour descendre

+                inversionPositions($_GET['page'], $_GET['file_code'], 'Article', -1);

+                $fonctionVisitor();

+            }

+            else

+            {

+                $fonctionVisitor();

+            }

+        }

         // suppression

         else if($_SESSION['admin'] == 1 && isset($_GET['action']) && $_GET['action'] == 'suppression')

         {

@@ -171,6 +197,33 @@ if(isset($_GET['page']))
                 discoEdit('', 0);

             }

         }

+        // modification d'un positions.json (version sans JS)

+        else if($_SESSION['admin'] == 1 && isset($_GET['action']) && $_GET['action'] == 'monter')

+        {

+            if(isset($_GET['file_code']) && !empty($_GET['file_code']))

+            {

+                // 1 pour monter

+                inversionPositions($_GET['page'], $_GET['file_code'], 'Album', 1);

+                discoVisitor();

+            }

+            else

+            {

+                discoVisitor();

+            }

+        }

+        else if($_SESSION['admin'] == 1 && isset($_GET['action']) && $_GET['action'] == 'descendre')

+        {

+            if(isset($_GET['file_code']) && !empty($_GET['file_code']))

+            {

+                // 0 pour descendre

+                inversionPositions($_GET['page'], $_GET['file_code'], 'Album', -1);

+                discoVisitor();

+            }

+            else

+            {

+                discoVisitor();

+            }

+        }

         // suppression

         else if($_SESSION['admin'] == 1 && isset($_GET['action']) && $_GET['action'] == 'suppression')

         {

diff --git a/lib/ckeditor5/config online builder.png b/lib/ckeditor5/config online builder.png
new file mode 100644
index 0000000..77cab31
--- /dev/null
+++ b/lib/ckeditor5/config online builder.png
diff --git a/model/Article.php b/model/Article.php
index d0fb019..f4fe65a 100644
--- a/model/Article.php
+++ b/model/Article.php
@@ -10,8 +10,9 @@ class Article
 {
         // pour tous les articles
         public $page; // page et donc dossier concerné
-        public $format = 'html'; // vaut 'html' ou 'json'
-        public $fileListCount;
+        public $format = 'html'; // 'html' ou 'json'
+        public $fileListCount; // pour les boucles "for"
+        // pas de "foreach", on a besoin des compteurs $i
         public $fileList; // = toutes les données
 
         // pour un article (ou album) spécifique
@@ -30,11 +31,17 @@ class Article
         // noter que le chemin et l'extension ne varient pas
         public function makeFileList()
         {
+                // noms des fichiers
                 // globbing = utiliser un pattern pour cibler des fichiers
                 $nameList = glob('data/' . $this->page . '/' . $this->format .  '/*.' . $this->format);
 
                 $this->fileListCount = count($nameList);
 
+                // associations: fileCode => position
+                $positions = $this->readPositionsJSON();
+
+                // $this->fileList[]
+                $positionMax = 0;
                 for($i = 0; $i < $this->fileListCount; $i++)
                 {
                         $pathInfo = pathinfo($nameList[$i]);
@@ -45,9 +52,100 @@ class Article
                                 'content' => '',
                                 //'date' => getdate() // peut-être utile plus tard
                         ];
+
+                        // récupération des positions disponibles
+                        // celles inutilisées sont ignorées
+                        // une case dans $positions: "1677796758" => 2
+                        if(isset($positions[$fileCode]) && $positions[$fileCode] > 0)
+                        {
+                                $this->fileList[$i]['position'] = $positions[$fileCode];
+                                $positionMax = max($positions[$fileCode], $positionMax);
+                        }
+                        else
+                        {
+                                $this->fileList[$i]['position'] = 0;
+                        }
+                }
+                $this->updatePositionsJSON($positionMax);
+
+                // réordonner "fileList" par rapport aux positions
+                if(!empty($this->fileList))
+                {
+                        $this->sortFileListByPositions();
+                }
+        }
+
+        private function readPositionsJSON() // retourne array ou NULL
+        {
+                if(file_exists('data/' . $this->page . '/positions.json'))
+                {
+                        // "true" pour retourner un tableau et non un objet
+                        $positions = json_decode(file_get_contents('data/' . $this->page . '/positions.json'), true);
+                }
+                return $positions;
+        }
+
+        private function updatePositionsJSON(int $positionMax = -1)
+        {
+                // créer les positions manquantes
+                $positions = [];
+                for($i = 0; $i < $this->fileListCount; $i++)
+                {
+                        // fonction appelée par makeFileList()
+                        if($positionMax >= 0)
+                        {
+                                if($this->fileList[$i]['position'] == 0)
+                                {
+                                        $positionMax++;
+                                        $this->fileList[$i]['position'] = $positionMax;
+                                }
+                        }
+                        
+                        // remplissage comme ceci: "1677796758" => 2
+                        $positions[$this->fileList[$i]['fileCode']] = $this->fileList[$i]['position'];
+                }
+
+                file_put_contents('data/' . $this->page . '/positions.json', json_encode($positions));
+        }
+
+        private function sortFileListByPositions()
+        {
+                // contient les positions seules
+                $positions = array_column($this->fileList, 'position');
+                
+                // magique!
+                array_multisort($positions, SORT_ASC, $this->fileList);
+        }
+
+        // pour modifier l'ordre des éléments de la page
+        // faire plus tard une version statique pour traitement AJAX
+        public function inversionPositions(int $direction)
+        {
+                for($i = 0; $i < $this->fileListCount; $i++)
+                {
+                        if($this->fileList[$i]['fileCode'] == $this->fileCode)
+                        {
+                                // si direction vaut 1, inversion avec l'élément au dessus (puisqu'on les affiche dans l'ordre décroissant)
+                                if(($direction === 1 || $direction === -1) &&
+                                        isset($this->fileList[$i + $direction]['position']))
+                                {
+                                        $c = $this->fileList[$i]['position'];
+                                        $this->fileList[$i]['position'] = $this->fileList[$i + $direction]['position'];
+                                        $this->fileList[$i + $direction]['position'] = $c;
+                                        
+                                        // sortie de la boucle
+                                        $i = $this->fileListCount;
+                                }
+                                else // inversion du premier avec le précédent ou du dernier avec le suivant
+                                {}
+                        }
                 }
+
+                // écriture du positions.json
+                $this->updatePositionsJSON();
         }
 
+        // du code html pour utiliser les miniatures
         private function makeHtmlMiniImages($content)
         {
             // insérer -mini au nom du dossier et au fichier
diff --git a/public/css/discographie.css b/public/css/discographie.css
index 0362bb4..4d602fa 100644
--- a/public/css/discographie.css
+++ b/public/css/discographie.css
@@ -45,6 +45,7 @@ aside div
     z-index: 1; /* placer le menu déroulant au dessus */
     /*background-color: #9fa8d0;*/
     background-color: #a4afd4;
+    /*background-color: white;*/
     border: 2px #3d4c9d solid;
 }
 
@@ -60,6 +61,8 @@ aside div
 #chronologie p a:hover
 {
     color: black;
+    /*background-color: #a4afd4;*/
+    background-color: white;
 }
 
 .linkChrono
@@ -115,7 +118,8 @@ input
     padding-bottom: 20px;
     border-bottom: 1px black solid;
 }
-.boutonAlbum a
+/* mêmes règles que .boutonArticle dans main.css */
+.boutonAlbum span
 {
     padding: 2px;
     border: 4px black groove;
@@ -132,7 +136,6 @@ input
 article
 {
         margin: 5px 0px;
-    width: 22%;
     /*min-width: 300px;*/
 }
 .articleAvecEditeur
@@ -230,6 +233,10 @@ a:hover figure figcaption
         /* annuler le positionnement du contenu */
         margin-top: 55px;
     }
+    article
+    {
+        width: 32%;
+    }
 }
 
 @media screen and (max-width: 699px)
diff --git a/public/css/accueil.css b/public/css/main.css
index 2a42e29..77ab7ff 100644
--- a/public/css/accueil.css
+++ b/public/css/main.css
@@ -1,4 +1,4 @@
-/* public/accueil.css */

+/* public/main.css */

 

 /*@font-face

 {

@@ -87,6 +87,11 @@ img
     vertical-align: bottom;

 }

 

+.boutonArticle span

+{

+    padding: 2px;

+    border: 4px black groove;

+}

 .boutonSubmitEditeur

 {

     margin-top: 5px;

@@ -111,6 +116,12 @@ article
     font-size: 90%;

     margin: 5px 0;

 }

+/* Eviter la superposition d’une entête fixe sur une ancre */

+article:target

+{

+    padding-top: 71px;

+    margin-top: -71px; 

+}

 .articleAvecEditeur

 {

     background-color: #a8b3d9;

diff --git a/public/css/menu.css b/public/css/menu.css
index 28cba08..4bf5262 100644
--- a/public/css/menu.css
+++ b/public/css/menu.css
@@ -13,11 +13,11 @@
 {

     font-size: 90%;

 }

-.boutonArticle a

+/*.boutonArticle span

 {

     padding: 2px;

     border: 4px black groove;

-}

+}*/

 

 .sectionActu

 {}

diff --git a/public/css/pages_articles_simples.css b/public/css/pages_articles_simples.css
index 9b6d2c3..2f3e901 100644
--- a/public/css/pages_articles_simples.css
+++ b/public/css/pages_articles_simples.css
@@ -26,14 +26,14 @@ figure
 }

 .boutonNouvelArticle

 {

+    /* comme "article" dans main.css */

     font-size: 90%;

 }

-.boutonArticle a

+.boutonArticle span

 {

-    padding: 2px;

-    border: 4px black groove;

+    position: relative;

+    bottom: 6px;

 }

-

 @media screen and (min-width: 700px)

 {

         #titre

diff --git a/public/icone_descendre.png b/public/icone_descendre.png
new file mode 100644
index 0000000..7980297
--- /dev/null
+++ b/public/icone_descendre.png
diff --git a/public/icone_flèche.xcf b/public/icone_flèche.xcf
new file mode 100644
index 0000000..7fcf5d6
--- /dev/null
+++ b/public/icone_flèche.xcf
diff --git a/public/icone_monter.png b/public/icone_monter.png
new file mode 100644
index 0000000..8e213ec
--- /dev/null
+++ b/public/icone_monter.png
diff --git a/public/inversion.js b/public/inversion.js
new file mode 100644
index 0000000..20a6871
--- /dev/null
+++ b/public/inversion.js
@@ -0,0 +1,16 @@
+// public/inversion.js
+
+// inverser la position de deux "articles" ou albums d'une page
+function inversion()
+{
+        var page = '';
+        var action = ''; // monter ou descendre
+        var fileCode = ''; // <?= $Articles->fileList[$i]['fileCode'] ?>
+        var position = ''; // <?= $Articles->fileList[$i]['position'] ?>
+
+        const xhr = new XMLHttpRequest();
+        url = 'index.php?page='+page+'&action='+action+'&file_code='+fileCode+'&position='+position+'#'+fileCode;
+        url = 'index.php?action=restauration&file_name='+fileInfos.name+'&file_size='+fileInfos.size;
+        xhr.open("GET", url);
+        xhr.send();
+}
\ No newline at end of file
diff --git a/view/articlesContent.php b/view/articlesContent.php
index 5f6b587..c07ba75 100644
--- a/view/articlesContent.php
+++ b/view/articlesContent.php
@@ -1,7 +1,7 @@
 <?php
 // view/articlesContent.php
 
-// variable $articlesContent
+// tampon pour $articlesContent
 ob_start();
 if($_SESSION['admin'] == 1)
 {
@@ -23,7 +23,7 @@ if($_SESSION['admin'] == 1)
                 <div>
                     <p class="boutonArticle boutonNouvelArticle" >
                         <a href="index.php?page=<?= $page ?>&action=editor" >
-                            Nouvel article
+                            <span>Nouvel article</span>
                         </a>
                     </p>
 <?php
@@ -85,12 +85,13 @@ for($i = 0; $i < $Articles->fileListCount; $i++)
                     </div>
                     <p class="boutonArticle" >
                         <a href="index.php?page=<?= $page ?>&action=editor&file_code=<?= $Articles->fileList[$i]['fileCode'] ?>#<?= $Articles->fileList[$i]['fileCode'] ?>" >
-                            Modifier cet article
-                        </a>
-                        &nbsp;<!-- un espace -->
+                            <img src="public/icone_modifier.png" ></a>
+                        <a href="index.php?page=<?= $page ?>&action=monter&file_code=<?= $Articles->fileList[$i]['fileCode'] ?>&position=<?= $Articles->fileList[$i]['position'] ?>#<?= $Articles->fileList[$i]['fileCode'] ?>" >
+                            <img src="public/icone_monter.png" ></a>
+                        <a href="index.php?page=<?= $page ?>&action=descendre&file_code=<?= $Articles->fileList[$i]['fileCode'] ?>&position=<?= $Articles->fileList[$i]['position'] ?>#<?= $Articles->fileList[$i]['fileCode'] ?>" >
+                            <img src="public/icone_descendre.png" ></a>
                         <a href="index.php?page=<?= $page ?>&action=suppression&file_code=<?= $Articles->fileList[$i]['fileCode'] ?>" onclick="confirmerSuppression()" >
-                            Supprimer cet article
-                        </a>
+                            <img src="public/icone_supprimer.png" ></a>
                     </p>
         <?php
         }
diff --git a/view/backup.php b/view/backup.php
index bbea60d..ec2e947 100644
--- a/view/backup.php
+++ b/view/backup.php
@@ -54,8 +54,8 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'restauration')
         ob_start();
 ?>
                 <h2>Restauration des données à partir d'une sauvegarde.</h2>
-                <p>Vous devez avoir créé précédemment un fichier dont le nom commence par <i>melaineDATA</i><br/>
-                à la page <i>Sauvegarder les données.</i></p><br/>
+                <p>Vous devez avoir précédemment créé et téléchargé un fichier dont le nom commence par <i>melaineDATA</i><br/>
+                sur la page <i>Sauvegarder les données.</i></p><br/>
 
                 <form method="post" enctype="multipart/form-data" action="index.php?from=<?= $from ?>&action=restauration" >
                         <input id="archiveUpload" type="file" name="archive" accept=".zip" class="boutonBackup" onchange="sendFileSize();" ><br/>
@@ -78,7 +78,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'restauration')
             <!-- <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> -->
         <link rel="icon" type="image/png" href="public/mouette-logo.png" >
             <link rel="stylesheet" type="text/css" href="public/css/normalize.css" />
-                <link rel="stylesheet" type="text/css" href="public/css/accueil.css" />
+                <link rel="stylesheet" type="text/css" href="public/css/main.css" />
 <?php
 if(isset($_GET['action']) && $_GET['action'] == 'restauration')
 {
diff --git a/view/discographie.php b/view/discographie.php
index 2220715..3007c86 100644
--- a/view/discographie.php
+++ b/view/discographie.php
@@ -81,10 +81,11 @@ if($_SESSION['admin'] == 1)
     {
         $style = '';
 ?>
+                    <!-- le bouton Nouvel album est considéré comme un article -->
                     <article>
                         <p class="boutonAlbum" >
                             <a href="index.php?page=discographie&action=edition" >
-                                Nouvel album
+                                <span>Nouvel album</span>
                             </a>
                         </p>
                     </article>
@@ -151,6 +152,10 @@ for($i = 0; $i < $Albums->fileListCount; $i++)
                             <a href="index.php?<?= $lienBoutonModif[$i] ?>" >
                                 <img src="public/icone_modifier.png" >
                             </a>
+                            <a href="index.php?page=<?= $page ?>&action=monter&file_code=<?= $Albums->fileList[$i]['fileCode'] ?>&position=<?= $Albums->fileList[$i]['position'] ?>#<?= $Albums->fileList[$i]['fileCode'] ?>" >
+                                <img src="public/icone_monter.png" ></a>
+                            <a href="index.php?page=<?= $page ?>&action=descendre&file_code=<?= $Albums->fileList[$i]['fileCode'] ?>&position=<?= $Albums->fileList[$i]['position'] ?>#<?= $Albums->fileList[$i]['fileCode'] ?>" >
+                                <img src="public/icone_descendre.png" ></a>
                             <a href="index.php?page=discographie&action=suppression&file_code=<?= $Albums->fileList[$i]['fileCode'] ?>" onclick="confirmerSuppression()" >
                                 <img src="public/icone_supprimer.png" >
                             </a>
diff --git a/view/pageArticlesSimples.php b/view/pageArticlesSimples.php
index 34f5dca..95f8c46 100644
--- a/view/pageArticlesSimples.php
+++ b/view/pageArticlesSimples.php
@@ -39,9 +39,9 @@ $js = ob_get_clean();
 // message lecteur multimedia

 if($page == 'archives')

 {

-    $explications = '<p >

+    $explications = '<p style="padding: 3px 3px 0 3px; background-color: white;">

         <img style="float: right;" src="public/header_images/logo_real.png" />

-        Certains liens vidéos nécessitent le lecteur <a href="https://www.real.com" target="_blank" >Real Media</a> (windows, android et iOS) pour être lus.</p>

+        Certains liens vidéos nécessitent le lecteur <a href="https://www.real.com" target="_blank" >Real Player</a> (windows, android et iOS) pour être lus.</p>

         <p>

         <img style="float: left;" src="public/header_images/logo_vlc.png" />

         Vous pouvez aussi utiliser le<br/><a href="https://www.videolan.org/vlc/" target="_blank" >lecteur VLC.</a></p>';

diff --git a/view/password.php b/view/password.php
index a72766e..93cae95 100644
--- a/view/password.php
+++ b/view/password.php
@@ -78,7 +78,7 @@ ob_start();
         <!-- <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> -->

         <link rel="icon" type="image/png" href="public/mouette-logo.png" >

         <link rel="stylesheet" type="text/css" href="public/css/normalize.css">

-        <link rel="stylesheet" type="text/css" href="public/css/accueil.css" />

+        <link rel="stylesheet" type="text/css" href="public/css/main.css" />

         <script type="text/javascript" src="public/main.js" ></script>

         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     </head>

diff --git a/view/template.php b/view/template.php
index 7fafbbb..b86a41c 100644
--- a/view/template.php
+++ b/view/template.php
@@ -11,7 +11,7 @@
         <!-- <link rel="shortcut icon" type="image/x-icon" href="public/favicon.ico" /> -->

         <link rel="icon" type="image/png" href="public/mouette-logo.png" >

         <link rel="stylesheet" type="text/css" href="public/css/normalize.css">

-        <link rel="stylesheet" type="text/css" href="public/css/accueil.css" />

+        <link rel="stylesheet" type="text/css" href="public/css/main.css" />

 <?php

 if(isset($css)) // fichiers CSS supplémentaires

 {