From 2afdde9749eeface10ceca832eb7f8ff8d32de3c Mon Sep 17 00:00:00 2001 From: polo Date: Wed, 2 Mar 2022 01:10:29 +0100 Subject: Affichage et page archives --- .htaccess | 2 +- config.php | 4 +++ controller/admin.php | 44 ++++++++-------------------- controller/visitor.php | 33 +++++---------------- lisez-moi.txt | 30 +++++++++++-------- public/css/accueil.css | 34 +++++++++++---------- public/css/discographie.css | 22 +++++++------- public/css/donnees_hors_editeur.css | 9 ++---- public/css/pages_articles_simples.css | 27 +++++++++++++++++ public/header_images/logo_real.png | Bin 0 -> 12772 bytes public/header_images/logo_vlc.png | Bin 0 -> 12002 bytes view/album.php | 2 +- view/courriel.php | 1 + view/discographie.php | 2 +- view/pageArticlesSimples.php | 23 ++++++++++++++- view/template-formulaires.php | 8 ++--- "\303\240 faire apr\303\250s livraison.txt" | 11 ++++++- 17 files changed, 140 insertions(+), 112 deletions(-) create mode 100644 public/header_images/logo_real.png create mode 100644 public/header_images/logo_vlc.png 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 "retour au site" # 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 @@ '; + if($page == 'archives') + { + $headerImage = '
+
hello
+
+
'; + } + else + { + $headerImage = '
'; + } // infos sur les fichiers $Articles = new Article($page); @@ -210,40 +220,10 @@ function discoEdit($fileCode, $suppression) $fileCodeArgument = ''; } - // préremplir le champ - // 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 = '
'; - // 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 Binary files /dev/null and b/public/header_images/logo_real.png differ diff --git a/public/header_images/logo_vlc.png b/public/header_images/logo_vlc.png new file mode 100644 index 0000000..df17359 Binary files /dev/null and b/public/header_images/logo_vlc.png differ 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"; ?>
- oneAlbum['titre'] ?> - oneAlbum['annee'] ?> +
oneAlbum['titre'] ?> - oneAlbum['annee'] ?>
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 @@
+

Envoyez-moi un courriel à:
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"; ?>
- Discographie +
Discographie
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 = '

+ + Certains liens vidéos nécessitent le lecteur Real Media (windows, android et iOS) pour être lus.

+

+ + Vous pouvez aussi utiliser le
lecteur VLC.

'; + $headerImage = '
+
' . $explications . '
+
+
'; +} +else +{ + $headerImage = '
'; +} + + // variable $header ob_start(); echo "\n"; ?>
- +
@@ -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();
-
+