Affichage et page archives

17 files changed, 140 insertions, 112 deletions

diff --git a/.htaccess b/.htaccess
index 63bea00..1148eb4 100644
--- a/.htaccess
+++ b/.htaccess
@@ -8,4 +8,4 @@ ErrorDocument 404 http://melaine.localhost/erreur404.php
 #ErrorDocument 404 "<a href='http://melaine.localhost/erreur404.php' >retour au site</a>"

 

 # Interdire exploration du répertoire

-#Options All -Indexes

+Options All -Indexes

diff --git a/config.php b/config.php
index 4d7dcfe..658fc12 100644
--- a/config.php
+++ b/config.php
@@ -1,4 +1,8 @@
 <?php
+// à adapter au serveur apache pour attraper les erreurs 404
+// permet d'adapter le contenu du .htaccess 
+$racineDuSite = '/var/www/melaine';
+
 // bibliothèque utilisée pour créer les miniatures
 // écrire 'gd' ou 'imagick'
 $imageLibrary = 'imagick';
diff --git a/controller/admin.php b/controller/admin.php
index ee5c217..5e3cde7 100644
--- a/controller/admin.php
+++ b/controller/admin.php
@@ -6,7 +6,17 @@
 

 function pageArticlesSimplesAdmin(string $page, string $title, string $headerPaintedTitle, $fileCode, int $suppression)

 {

-        $headerImage = '<div class="photo" id="photo_' . $page . '" ></div>';

+        if($page == 'archives')

+        {

+                $headerImage = '<div style="display: flex;" >

+                        <div>hello</div>

+                        <div class="photo" id="photo_' . $page . '" ></div>

+                </div>';

+        }

+        else

+        {

+                $headerImage = '<div class="photo" id="photo_' . $page . '" ></div>';

+        }

 

         // infos sur les fichiers

         $Articles = new Article($page);

@@ -210,40 +220,10 @@ function discoEdit($fileCode, $suppression)
                 $fileCodeArgument = '';

         }

 

-        // préremplir le champ <input type="file" >

-        // c'est normallement impossible

-

-

-        // tri des albums avec l'année dans le .json

-        

-        // noms des fichiers JSON

-        //$albumNamesJSON = $Albums->fileList;

-        //$annees = [];

-        //for($i = 0; $i < $Albums->fileListCount; $i++)

-        //{

-                // une case supplémentaire contient le "fileCode"

-                //$albumsJSON[$i][3] = pathinfo($albumNamesJSON[$i])['filename'];

-                //$albumsJSON[$i][3] = pathinfo($Albums->fileList[$i]['fileCode'])['filename'];

-

-                //$annees[$i] = $albumsJSON[$i][1];

-        //}

-        //var_dump($annee); die();

-        

-        // tri d'un tableau multidimensionnel

-        //array_multisort($annees, $albumsJSON);

-

-

-

-        // liens dans la page et le menu chronologie

-        // ce dernier comporte une ancre lorsque le html n'existe pas

-        /*$lienAlbum = [];

-        $avecLien = [];

-        $linkDiscoChrono = [];*/

         for($i = 0; $i < $Albums->fileListCount; $i++)

         {

                 if(file_exists('data/discographie/html/' . $Albums->fileList[$i]['fileCode'] . '.html'))

                 {

-                        /*$lienAlbum[$i] = 'page=album&album_name=' . $Albums->fileList[$i]['titre'] . '&file_code=' . $Albums->fileList[$i]['fileCode'];*/

                         $lienAlbum[$i] = 'page=album&file_code=' . $Albums->fileList[$i]['fileCode'];

                         $avecLien[$i] = true;

                         $linkDiscoChrono[$i] = 'linkChrono'; // css

@@ -254,7 +234,7 @@ function discoEdit($fileCode, $suppression)
                         $avecLien[$i] = false;

                         $linkDiscoChrono[$i] = 'noLinkChrono'; // css

                 }

-                $lienBoutonModif[$i] = 'page=discographie&action=edition&file_code=' . $Albums->fileList[$i]['fileCode'];

+                $lienBoutonModif[$i] = 'page=discographie&action=edition&file_code=' . $Albums->fileList[$i]['fileCode'] . '#' . $Albums->fileList[$i]['fileCode'];

         }

 

         // morceaux en HTML à assembler

diff --git a/controller/visitor.php b/controller/visitor.php
index aae15a7..ac19441 100644
--- a/controller/visitor.php
+++ b/controller/visitor.php
@@ -30,8 +30,6 @@ function menu()
 // toutes celles du menu sauf: menu et discographie

 function pageArticlesSimplesVisitor(string $page, string $title, string $headerPaintedTitle)

 {

-        $headerImage = '<div class="photo" id="photo_' . $page . '" ></div>';

-

         // infos sur les fichiers $Articles->fileList

         $Articles = new Article($page);

 

@@ -47,7 +45,7 @@ function pageArticlesSimplesVisitor(string $page, string $title, string $headerP
                 $Articles->fileList = array_reverse($Articles->fileList);

         }

 

-        // variables $css, $js, $header et $content

+        // variables $css, $js, $header, $content et $headerImage

         require('view/pageArticlesSimples.php');

         // HTML

         require('view/template.php');

@@ -122,43 +120,22 @@ function discoVisitor()
         }

         //var_dump($Albums->fileList); die();

 

-

-        // tri des albums avec l'année dans le .json

-        

-        // noms des fichiers JSON

-        //$albumNamesJSON = $Albums->fileList;

-

-        //$annees = [];

-        for($i = 0; $i < $Albums->fileListCount; $i++)

-        {}

-        //var_dump($annee); die();

-        

-        // tri d'un tableau multidimensionnel

-        //array_multisort($annees, $albumsJSON);

-

-

-        // lien vers le HTML ou ancre?

-        /*$lienAlbum = [];

-        $avecLien = [];

-        $linkDiscoChrono = [];*/

-

         // liens vers les albums

         for($i = 0; $i < $Albums->fileListCount; $i++)

         {

                 if(file_exists('data/discographie/html/' . $Albums->fileList[$i]['fileCode'] . '.html'))

                 {

-                        /*$lienAlbum[$i] = 'page=album&album_name=' . $Albums->fileList[$i]['titre'] . '&file_code=' . $Albums->fileList[$i]['fileCode'];*/

                         $lienAlbum[$i] = 'page=album&file_code=' . $Albums->fileList[$i]['fileCode'];

                         $avecLien[$i] = true;

                         $linkDiscoChrono[$i] = 'linkChrono'; // pour le css

                 }

                 else

                 {

-                        $lienAlbum[$i] = 'page=discographie#' . $Albums->fileList[$i]['titre'];

+                        $lienAlbum[$i] = 'page=discographie#' . $Albums->fileList[$i]['fileCode'];

                         $avecLien[$i] = false;

                         $linkDiscoChrono[$i] = 'noLinkChrono'; // pour le css

                 }

-                $lienBoutonModif[$i] = 'page=discographie&action=edition&file_code=' . $Albums->fileList[$i]['fileCode'];

+                $lienBoutonModif[$i] = 'page=discographie&action=edition&file_code=' . $Albums->fileList[$i]['fileCode'] . '#' . $Albums->fileList[$i]['fileCode'];

         }

 

         // variables $css, $js et $content

@@ -174,6 +151,10 @@ function album($fileCode)
 

         $Albums = new Album($page);

         $Albums->getAllJSON();

+        if(!empty($Albums->fileList))

+        {

+                $Albums->fileList = array_reverse($Albums->fileList);

+        }

         $Albums->fileCode = $fileCode;

         $Albums->readOne();

 

diff --git a/lisez-moi.txt b/lisez-moi.txt
index 9f2b5be..4df9e5c 100644
--- a/lisez-moi.txt
+++ b/lisez-moi.txt
@@ -2,35 +2,39 @@ Pré-requis:
 

 - Un serveur apache exécutant PHP.

 - Le n'utilise pas de base de données mais un ensemble de fichiers HTML.

-- Le module GD de PHP pour créer des miniatures des photos (bande passante).

+- Le module imagemagick ou GD de PHP pour créer des miniatures des photos (bande passante).

 - La possibilité d'utiliser un fichier .htaccess pour la sécurité (du mot de passe admin en particulier).

 - Le responsable du site (Melaine) ne doit pas utiliser un navigateur trop vieux (ckeditor).

 

 

 Informations:

 

-Le site n'utilise pas de base de données mais à la place un ensemble de fichiers. Le dossier data contient des dossiers "html" et "images", ainsi qu'un dossier 'json'.

-- Les premiers contiennent le texte sous forme de fichiers HTML.

-- Les seconds les images ainsi qu'un dossier "thumbnails" (chargement rapide des pages).

-Le code suit une architecture modèle-vue-contrôleur, il n'utilise pas de framework.

-- Il n'est pas possible pour l'instant d'uploader du multimedia (son et video). Peut-être plus tard.

-- Il n'est pas possible non plus d'embarquer du multimedia (son et vidéo hébergé ailleurs). Peut-être plus tard.

+Le site n'utilise pas de base de données mais un ensemble de fichiers dans le dossier "data".

+Les données sont dans les formats HTML et JSON, il y aussi des images et des miniatures

+Le code suit une architecture modèle-vue-contrôleur, il n'utilise pas de framework mais quelques bibliothèques.

+l'upload de son et vidéo ou l'embarquement (suovre le lien sans quitter le site) ne sont pas gérés pour l'instant.

 

 

 Installation:

 

-- Copier tous les fichiers sur le serveur.

-- Autoriser en écriture le dossier "data" et tout son contenu, ça se fait depuis la racine du site avec la commande:

-chmod -R 777 data

-Le php se chargera des ajustements (supprimer l'autorisation des fichiers en exécution, permettre à l'utilisateur de manipuler les nouveaux fichiers sans accès root, créer un backup des données).

-- Autoriser le .htaccess (normalement par une manipulation dans le fichier /etc/php/php.ini du serveur)

-- Augmenter la taille maximale des fichiers (par défaut de 2Mo) pouvant être téléchargés dans le php.ini, ainsi que dans le fichier model/Image.php. Une taille max de 5Mo est très raisonnable.

+Extraire le fichier melainePHP.zip sur le serveur

+OU

+Se placer dans /var/www et faire un "git clone"

+

+Créer à la racine du site un dossier data si il n'existe pas et lui donner les droits 777

+

+Autoriser le .htaccess (normalement par une manipulation dans le fichier /etc/php/php.ini du serveur)

+

+Augmenter la taille maximale des fichiers pouvant être réléchargé (par défaut de 2Mo) dans le php.ini

+

+En fonction de la configuration et de ce qu'il a été possible de réaliser, éditer le fichier config.php

 

 

 Redirections:

 

 Si les redirections en cas d'erreur 404 ne fonctionnent pas c'est sans doute que le .htaccess ne pointe pas vers le fichier erreur404.php.

 En effet, la racine du serveur pourrait bien, du point de vue d'apache, être le dossier parent à celui du site.

+Vérifier le fichier config.php

 

 

 architecture Modèle-Vue-Contrôleur (MVC):

diff --git a/public/css/accueil.css b/public/css/accueil.css
index 8c8ff35..b95e818 100644
--- a/public/css/accueil.css
+++ b/public/css/accueil.css
@@ -95,6 +95,11 @@ h3
     margin: 3px;

 }

 

+article

+{

+    font-size: 90%;

+    margin: 5px 0;

+}

 .articleAvecEditeur

 {

     background-color: #a8b3d9;

@@ -123,8 +128,11 @@ form
 

 #courriel a:hover

 {

-    /*border: 1px blue solid;*/

-    padding: 5px;

+    /*padding: 5px;*/

+}

+#courriel>button /* bouton pour remonter */

+{

+    float: right;

 }

 

 #courrielJS

@@ -249,16 +257,16 @@ form
 {

     .police_titre

     {

-        

+        max-width: 550px;

         font-family: you_are_loved, Arial, sans;

         font-size: 250%;

         color: #ddc97a;

-        position: relative;

-        top: 30px;

-        left: 40px;

+        margin-left: 30px;

+        padding-top: 20px;

     }

 

-    /* compensation des cibles de liens # superposées au "nav" hors flux */

+    /* compensation des cibles de liens #

+    superposées au "nav" hors flux */

     :target

     {

         padding-top: 70px; 

@@ -328,10 +336,8 @@ form
         font-family: you_are_loved, Arial, sans;

         font-size: 200%;

         color: #ddc97a;

-        

-        position: relative;

-        top: 20px;

-        left: 30px;

+        margin-left: 25px;

+        padding-top: 20px;

     }

 

     #bienvenue .police_titre

@@ -427,10 +433,8 @@ form
         font-family: you_are_loved, Arial, sans;

         font-size: 150%;

         color: #ddc97a;

-        

-        position: relative;

-        top: 13px;

-        left: 18px;

+        margin-left: 15px;

+        padding-top: 10px;

     }

 

     #bienvenue .police_titre

diff --git a/public/css/discographie.css b/public/css/discographie.css
index 8ed3700..0362bb4 100644
--- a/public/css/discographie.css
+++ b/public/css/discographie.css
@@ -25,7 +25,7 @@ aside div
 
 #bouton_chronologie
 {
-    width: 200px;
+    width: 250px;
     text-align: center;
     font-size: large;
     font-weight: bold;
@@ -38,7 +38,7 @@ aside div
 
 #chronologie
 {
-    width: 200px;
+    width: 250px;
     font-weight: bold;
     /*padding: 5px;*/
     display: none;
@@ -55,7 +55,7 @@ aside div
 
 #chronologie p a:visited
 {
-    color: blue;
+    /*color: blue;*/
 }
 #chronologie p a:hover
 {
@@ -65,6 +65,7 @@ aside div
 .linkChrono
 {
     text-decoration: none;
+    color: blue;
 }
 .linkChrono:hover
 {
@@ -131,7 +132,7 @@ input
 article
 {
         margin: 5px 0px;
-    width: 32%;
+    width: 22%;
     /*min-width: 300px;*/
 }
 .articleAvecEditeur
@@ -139,15 +140,15 @@ article
     width: 100%;
 }
 
-.vignette
+figure
 {
-    width: 100%;
+    margin: 0px;
+    /*display: inline-block;*/
 }
 
-figure
+.vignette
 {
-        margin: 0px;
-        /*display: inline-block;*/
+    width: 100%;
 }
 
 figcaption
@@ -280,13 +281,14 @@ a:hover figure figcaption
 
     #bouton_chronologie
     {
-        width: 130px;
+        width: 180px;
         font-size: initial; /* 150% est plus petit que "normal" */
         padding-top: 5px;
     }
 
     #chronologie
     {
+        width: 180px;
         /*display: flex;*/
     }
 
diff --git a/public/css/donnees_hors_editeur.css b/public/css/donnees_hors_editeur.css
index 25436a4..d54d7ff 100644
--- a/public/css/donnees_hors_editeur.css
+++ b/public/css/donnees_hors_editeur.css
@@ -1,5 +1,3 @@
-/*img{vertical-align: bottom;}*/

-

 .text-tiny{font-size: x-small;}

 .text-small{font-size: small;}

 .text-big{font-size: large;}

@@ -20,13 +18,12 @@ input[type=checkbox]{-webkit-appearance: none;-moz-appearance: none;-ms-appearan
     height: 16px; width: 16px; border: 1px solid black; border-radius: 2px; position: relative; top: 5px; margin-right: 10px;}

 input[type="checkbox"]:checked{border: none; background: #26ab33;}

 

-.table>table{border-collapse: collapse;}

-.table td{border: 1px grey solid; padding: 7px; min-width: 30px;}

+.table>table{border-collapse: collapse; border-width: 2px;}

+.table td{padding: 7px; min-width: 30px; border-width: 2px;}

 td p{margin: 0px;}

 

 .image{width: fit-content;margin: 0px;text-align: center;margin: auto;/*height: 100%;*/}

 .image img{width: 100%;}

-/*.image:not(.image_resized) img{width: auto;}*/

 .image-style-side{float: right;}

 .image-style-side:not(.image_resized){max-width: 50%;}

 .image>figcaption{padding: 7px; text-align: center; font-size: small; background-color: #f0f0f0;}

@@ -38,8 +35,6 @@ iframe{min-width: 400px; min-height: 300px; max-width: 1200px; max-height: 900px
 

 

 

-

-

 @media screen and (max-width: 1000px)

 {

     /*img{max-width: 900px;}*/

diff --git a/public/css/pages_articles_simples.css b/public/css/pages_articles_simples.css
index 03e4317..5f20753 100644
--- a/public/css/pages_articles_simples.css
+++ b/public/css/pages_articles_simples.css
@@ -91,6 +91,11 @@ figure
     }

 }

 

+.explications

+{

+    font-size: 90%;

+}

+

 

 /* CSS spécifique à chaque page */

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

@@ -134,6 +139,7 @@ figure
         height: 171px;

         margin-left: auto;

     }

+

     #photo_archives

     {

         background-image: url('../header_images/blonde.jpg');

@@ -141,6 +147,14 @@ figure
         height: 233px;

         margin-left: auto;

     }

+    .explications

+    {

+        width: 373px;

+    }

+    .explications p

+    {

+        margin: 10px;

+    }

 }

 

 @media screen and (max-width: 699px)

@@ -191,6 +205,14 @@ figure
         height: 177px;

         margin: 0 0 0 auto;

     }

+    .explications

+    {

+        width: 285px;

+    }

+    .explications p

+    {

+        margin: 5px;

+    }

 }

 

 @media screen and (max-width: 479px)

@@ -241,4 +263,9 @@ figure
         height: 118px;

         margin: 0 0 0 auto;

     }

+    .explications

+    {

+        width: 190px;

+

+    }

 }

diff --git a/public/header_images/logo_real.png b/public/header_images/logo_real.png
new file mode 100644
index 0000000..2a7cae1
--- /dev/null
+++ b/public/header_images/logo_real.png
diff --git a/public/header_images/logo_vlc.png b/public/header_images/logo_vlc.png
new file mode 100644
index 0000000..df17359
--- /dev/null
+++ b/public/header_images/logo_vlc.png
diff --git a/view/album.php b/view/album.php
index 86f1e58..a9afbd9 100644
--- a/view/album.php
+++ b/view/album.php
@@ -23,7 +23,7 @@ echo "\n";
 ?>
             <header>
                 <div id="titre" >
-                    <span class="police_titre" ><?= $Albums->oneAlbum['titre'] ?> - <?= $Albums->oneAlbum['annee'] ?></span>
+                    <div class="police_titre" ><?= $Albums->oneAlbum['titre'] ?> - <?= $Albums->oneAlbum['annee'] ?></div>
                 </div>
                 <div id="photo" ></div>
             </header>
diff --git a/view/courriel.php b/view/courriel.php
index be3b1d7..77a4eb0 100644
--- a/view/courriel.php
+++ b/view/courriel.php
@@ -1,4 +1,5 @@
                         <div id="courriel" >

+                                <button ><a href="index.php?page=<?= $page ?>" >Remonter en haut de la page</a></button>

                                 <div>

                                         <img src="public/timbre.png" alt="" ><br />Envoyez-moi un courriel à: <img src="public/courriel.png" >

                 </div>

diff --git a/view/discographie.php b/view/discographie.php
index e8e5770..552eeab 100644
--- a/view/discographie.php
+++ b/view/discographie.php
@@ -32,7 +32,7 @@ echo "\n";
 ?>
             <header>
                 <div id="titre" >
-                    <span class="police_titre" >Discographie</span>
+                    <div class="police_titre" >Discographie</div>
                 </div>
                 <div id="photo" ></div>
             </header>
diff --git a/view/pageArticlesSimples.php b/view/pageArticlesSimples.php
index aa755d8..a8c94d2 100644
--- a/view/pageArticlesSimples.php
+++ b/view/pageArticlesSimples.php
@@ -26,13 +26,33 @@ if(isset($_GET['action']) && $_GET['action'] == 'editor')
 $js = ob_get_clean();

 

 

+// message lecteur multimedia

+if($page == 'archives')

+{

+    $explications = '<p >

+        <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>

+        <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>';

+    $headerImage = '<div class="photo" style="display: flex; height: fit-content;" >

+        <div class="explications" >' . $explications . '</div>

+        <div  id="photo_' . $page . '" ></div>

+    </div>';

+}

+else

+{

+    $headerImage = '<div class="photo" id="photo_' . $page . '" ></div>';

+}

+

+

 // variable $header

 ob_start();

 echo "\n";

 ?>

             <header>

                 <div id="titre" >

-                    <span class="police_titre" ><?= $headerPaintedTitle ?></span>

+                    <div class="police_titre" ><?= $headerPaintedTitle ?></div>

                 </div>

                 <?= $headerImage ?>

             </header>

@@ -40,6 +60,7 @@ echo "\n";
 $header = ob_get_clean();

 

 

+

 // variable $content

 ob_start();

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

diff --git a/view/template-formulaires.php b/view/template-formulaires.php
index ede8f27..01f86c2 100644
--- a/view/template-formulaires.php
+++ b/view/template-formulaires.php
@@ -31,7 +31,7 @@ ob_start();
         <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 />

+            <input type="text" name="annee" value="<?= $vignette[1] ?>" ><br />

         <label for="pochette" >Pochette du disque (jpg ou png) : <?= $vignette[2] ?></label><br/>

             <input type="file" name="upload" ><br /><br /><br />

 <?php

@@ -93,7 +93,7 @@ if($page == 'discographie')
                         toolbar: [

                             //'imageStyle:full', //inutile?

                             'imageStyle:block',

-                            //'imageStyle:inline', // complexe, on peut aussi placer l'image à la souris

+                            'imageStyle:inline', // complexe, on peut aussi placer l'image à la souris

                             'imageStyle:side',

                             /*'imageStyle:align-left',

                             'imageStyle:align-right',*/

@@ -110,8 +110,8 @@ if($page == 'discographie')
                             'tableColumn',

                             'tableRow',

                             'mergeTableCells',

-                            //'tableCellProperties',

-                            'tableProperties'

+                            'tableProperties',

+                            'tableCellProperties'

                         ]

                     },

                     

diff --git a/à faire après livraison.txt b/à faire après livraison.txt
index 19b8b01..f42f6f1 100644
--- a/à faire après livraison.txt
+++ b/à faire après livraison.txt
@@ -1,8 +1,17 @@
 liens sans http dans l'éditeur
 
+dans installation.php, utiliser la racine dans config.php pour adapter le .htaccess
+
+réduire les droits des dossiers
+
+bouton pour remonter: remplacer le lien par du JS pour ne pas recharger la page
+
 captcha dans password.php
 
-gestion des liens "real media" = un lien pour télécharger VLC
+Zoom sur images (articles)
+
+galerie en css (ou/et en javascript) pour les peintures de bateau
+https://www.guyom-design.com/blog/astuces/css/tuto_diapo_css/
 
 remplacer le survol par un clic sur les smartphones