Arts numériques

Ajouter une carte avec openstreetmap

Stéphane Noel — 2020-04-30T09:56:08Z

Ajouter une carte interactive, avec des points cliquables, des itinÃ©raires, est possible avec le site maps de Google. On peut lÃ©gitimement, cependant, se positionner contre ce gÃ©ant monopolistique, qui est devenu incontournable Ã force de faire appel Ã notre penchant pour la commoditÃ©.
Ce tutoriel sommaire se base sur un outil alternatif : le projet openstreetmap ou OSM

InsÃ©rer une carte dans un site web

Ce tutoriel se concentre sur un aspect de Openstreetmap (OSM pour la suite), qui est un ensemble d'outils et de services plus large.
On se bornera ici Ã donner des adresses et quelques procÃ©dures : il existe de nombreux tutoriels trÃ¨s prÃ©cis notamment due les sites d'OSM lui-mÃªme et de Umpa, un de ses services de crÃ©ation.
Sachez que OSM est une gigantesque base de donnÃ©e de donnÃ©es cartographique basÃ© sur le travail collaboratif et open source de millions de personnes, qui ont joint et intÃ©grÃ© des dessins de terrain et donnÃ©es y affÃ©rant : noms des villes, des fleuves, lieux-dit, etc. A ceci s'ajoute des outils pour Ã©diter et visualiser ces cartes, d'autres outils pour les personnaliser, les utiliser pour des itinÃ©raires, etc. Un travail colossal qui rivalise et empÃªche Google map de rester en position purement monopolistique, ce qu'il est de facto par la puissance qu'il a gagnÃ© en intÃ©grant maps dans un "Ã©cosystÃ¨me" encor plus grand de recherche et de vente de donnÃ©es gÃ©olocalisÃ©es de ses utilisateurs.

Utiliser uMap

Un service spÃ©cifique de OSM est dÃ©diÃ© Ã la personnalisation de carte : uMap

Pour crÃ©er une carte, on cliquera sur le bouton "CrÃ©er une carte" et on accÃ¨de Ã un plan et deux sÃ©ries d'icÃ´nes.

A gauche les outils qui seront disponibles pour l'utilisateur de votre carte. A droite les outils de crÃ©ation de la carte. Simple.

Choisir le type de carte

Une fois ceci fait, on va ouvrir le panneau permettant de choisir le fond de carte. Il dÃ©termine couleurs, prÃ©cision et textures. Une sÃ©rie de fond cartes sont accessibles dans uMap, gratuits ou payants, voir la documentation Ã ce propos.

On peut aussi ouvrir le panneau des paramÃ¨tres Ã droite.

On peut y changer le nom de la carte et sa description, et rÃ©gler les outils visibles pendant votre travail d'Ã©dition.

Placer des Ã©lÃ©ments sur la carte

Une fois l'environnement de travail prÃ©cisÃ©, on peut Ã©diter la carte en lui rajoutant diffÃ©rents informations comme des points, des itinÃ©raires et des zones grÃ¢ce aux outils d'Ã©dition en haut Ã droite de la page.

La procÃ©dure est Ã©vidente. On peut personnaliser les icÃ´nes avec le menu "PropriÃ©tÃ©s de forme".
Notez qu'on peut placer des liens dans les descriptifs et les titres, ce qui permet de faire des liens entre le plan et des pages de votre site, par exemple.

Les lignes et zones ont la mÃªme logique.

Choisir la taille et zoom par dÃ©faut

Il faut bien sÃ »r dans enfin choisir la portion de carte qui sera affichÃ©e au dÃ©marrage pour le visiteur, en terme d'emplacement et de zoom. En utilisant les outils standards de zoom et le cliquer-dÃ©placer, vous pouvez affiner ces paramÃ¨tres. Dans notre cas, la zone du dÃ©barquement de Normandie.

A partir de lÃ , on peut gÃ©nÃ©rer le code de la carte, qui est accessible via le bouton des paramÃ¨tres, dans les fonctions avancÃ©es. On peut personnaliser les boutons qui seront visible dans le menu "Options de l'export d'iframe"

Le code copiÃ©/collÃ© est un iframe qu'il suffira de copier coller dans une page html classique.

Attention ! Ne perdez pas le lien d'Ã©dition

Pour pouvoir Ã©diter cette carte plus tard, vous devez en garder le lien secret d'Ã©dition ! Obtenez le en cliquant sur la clÃ© dans le menu en bas Ã droite. Si vous le perdez, vous ne pourrez plus Ã©diter cette carte. Ce serait dommage.

Inclure la carte

L'opÃ©ration est un simple copier-coller. Le tour est jouÃ©.

Site php/bootstrap : ajouter une page de galerie

Stéphane Noel — 2020-04-21T20:36:54Z

Suite aux deux premiers didacticiels de ce dossier spÃ©cial, ajoutons une page de galerie.

Ajouter une page pour recevoir la galerie

En reprenant le tutoriel prÃ©cÃ©dent, on peut facilement ajouter une page, en dupliquant la page index.php pour lui donner le nom de galerie.php.
Nous allons ensuite updater le fichier inc-head.php pour y placer le lien vers la page

Utiliser fancybox

Fancybox a dÃ©jÃ Ã©tÃ© ajoutÃ© au code gÃ©nÃ©ral tÃ©lÃ©chargeable dans le premier tutoriel. Nous n'avons donc plus qu'Ã nous occuper de placer le code html et les images pour faire fonctionner notre galerie.

Batcher les images

Lorsqu'on produit une galerie, on va Ã priori proposer au visiteur des images en petit format - des vignettes - qui feront apparaitre des images en grand format - l'image originale - au milieu de l'Ã©cran grÃ¢ce Ã Fancybox. Nous avons donc besoin de ces deux images.
Les vignettes sont gÃ©nÃ©ralement prÃ©parÃ©es Ã la mÃªme taille en largeur et hauteur pour obtenir un damier d'images rÃ©gulier. C'est une opÃ©ration qui peut Ãªtre fastidieuse si on prÃ©pare les images dans photoshop. On utilisera plutÃ´t un logiciel d'automatisation, pour faire un "traitement par lot" ou batch.
Sur mac, on peut employer batch-image-resizer
Sur PC, par exemple Image resizer
Tous les deux sont gratuits et safe.

Dans les deux cas, on importe les images dans le logiciel (une par une ou en dossier) puis on spÃ©cifie une taille et une qualitÃ© de sortie avant de laisser le logiciel procÃ©der au traitement automatique.

La procÃ©dure est lÃ©gÃ¨rement diffÃ©rente pour chaque logiciel.
A la fin, nous avons un dossier contenant des images en grand format (faite attention Ã ce qu'elle ne dÃ©passent pas 1200 Ã 1600 pixels, pour des raisons d'optimisation) et des vignettes de ces images de petite taille (ici 500 pixels de large)

CrÃ©er le code html

Une fois ces images disposÃ©es dans un sous-dossier du site (dans notre cas, un dossier images-galerie), on peut procÃ©der au code, en utilisant le systÃ¨me de colonne de bootstrap.

    Galerie
 Quelques images
 
      Titre Ã©ventuel

Le code suit la logique suivant : un lien avec l'attribut href contenant l'adresse de l'image en grand format, auquel on ajoute l'attribut data-fancybox, qui se charge du reste.

Pour ce qui est des colonnes, consultez le tutoriel qui en parle sur ce site ou la documentation de bootstrap.

Simple.

Site php/bootstrap : ajouter une page

Stéphane Noel — 2020-04-01T16:34:04Z

Ajouter une page Ã la machinerie dÃ©jÃ en place est facile.

1) crÃ©er le fichier

Avec Brackets (ou tout autre logiciel de code), crÃ©ez un fichier Ã la racine du dossier de travail. Retenez bien son nom, vous allez en avoir besoin tout de suite. Il doit se terminer par ".php", c'est important.
Le nom du fichier est libre, mais appliquez les consignes de sÃ©curitÃ© : pas d'espace ni de caractÃ¨res spÃ©ciaux, Ã©ventuellement des tirets et des underscores.
Je nommerai le mien "contact.php".

2) Placer les codes d'inclusion

Nous allons maintenant inclure le fichire inc-header.php et inc-footer.php, comme indiquÃ© dans le tutoriel prÃ©cÃ©dent.

 Ici vient le contenu de la page

3) Placer un peu de contenu

Le contenu de cette page est du html standard, mais nous disposons du framework bootstrap pour gagner du temps en prototypage. Ici un simple exemple de header, suivie d'une grille de 3 colonnes ;

   Un titre de page
 Un sous-titre
 
   Une colonne
  Et du contenu 
 
  Une colonne
  Et du contenu 
 
  Une colonne
  Et du contenu

Ã‡a donnera Ã§a :

4) Updater le menu

Il est temps de lier le menu Ã cette page, en Ã©ditant le fichier inc-header.php qui se trouve dans le dossier "includes" :

RepÃ©rez dans le code l'Ã©lÃ©ment ul dont la classe est "navbar-nav" et ajoutez un nouvel Ã©lÃ©ment "li" comme ceci :

   Home 
  Contact

Enregistrez et sauvez, c'est fait. Comme le fichier est le mÃªme pour toute les pages, cette opÃ©ration ne se fait qu'une fois.

Site php/bootstrap, base de travail

Stéphane Noel — 2020-04-01T16:08:30Z

L'enjeu de ce tutoriel est de mettre en place un site utilisant quasiment toutes les technologies vues en cours : html et css bien sÃ »r, mais aussi les fontes importÃ©es, javascript, bootstrap, et enfin php. On ajoute quelques bricoles, comme une favicon et des balises mÃ©ta, et on aura un site conforme, aux standards actuels.

1) PrÃ©parer les fichiers de base html/css/javascript

Pour dÃ©marrer ce projet il faut importer dans le dossier de travail tous les fichiers nÃ©cessaires
– la derniÃ¨re version de jquery
– un typo pour le net via Fontsquirrel
– les fichiers de base css et javascript de bootstrap
– le dossier de Fontawesome (free for web)
– les fichiers de fancybox

2) Structurer le dossier du projet

Une fois ces fichiers ramenÃ©s, on va les placer dans des dossiers aux noms sÃ©mantiques, pour facilement se repÃ©rer.
Je propose :
– un dossier css-js pour jquery, nootstrap, fancybox et nos propres scripts
– un dossier images pour les images
– un dossier includes pour les fichiers php Ã inclure
Les fichiers des diverses pages du site, en php, seront Ã la racine du site.

3) Contenu du dossier CSS-JS

Tout ce qui est javascript et css viendront dans ce dossier comme son nom l'indique. Soit :
– Le dossier de production de bootstrap, tel que tÃ©lÃ©chargÃ© avec ses sous-dossiers css et js
– le dossier de fancybox. Attention, dans le dossier tÃ©lÃ©chargÃ©, nous avons besoin uniquement du dossier "dist" que nous plaÃ§ons dans le dossier css-js et renommons "fancybox"
– Le dossier de fontawesome tel que tÃ©lÃ©chargÃ©
– un dossier "font" dans lequel nous plaÃ§ons les fichiers woff, woff2 et le fichier stylesheet.css provenant du gÃ©nÃ©rateur de Fontsquirrel.
– le dernier fichier de jquery (ici la 3.4.1)
– un fichier "main.css" pour nos propres css
– un fichier "main.js" pour nos propres scripts

Ã‡a donne Ã§a :

Notre page de base : index.php

Comme Ã©voquÃ©, une page avec du code php DOIT avoir .php pour extension, et pas html. C'est ce qui permet au serveur de savoir qu'il va y trouver un code a exÃ©cuter.

Cette page index.php contient trois fonctions "include()", une fonction php qui comme son nom l'indique, inclus le code provenant d'un autre page.

Cette ligne de code va donc chercher dans le dossier "includes" un fichier "inc-header.php", et copie le code que le fichier contient Ã l'endroit mÃªme oÃ¹ la fonction est appelÃ©e.

La page index.php charge aussi deux autres pages, inc-pre-footer.php et inc-footer.php, suivant la mÃªme logique.

Pourquoi des fichiers inclus en php ?

Le fichier inc-header.php contient le dÃ©but de la page, c'est Ã dire la balise head, et le dÃ©but du body, jusqu'Ã la fin de la navigation.
Le fichier inc-footer.php contient la fin de la page : la balise footer puis la fermeture des tags body et html
SÃ©parer ces deux parties de pages html a un but : pouvoir rÃ©employer ces deux portions de page pour toute nouvelle page que nous allons crÃ©er dans le future ; On va ainsi Ã©crire une seule fois ce code, et l'inclure dans chaque page.
Le but est d'Ã©conomiser du temps d'Ã©criture mais aussi et surtout, de rÃ©duire les sources d'erreur puisque que ce code est Ã©crit une seule fois pour toutes les pages oÃ¹ il est inclus.

Allez, le code tout fait !

Pour ceux qui ont tout compris mais ne veulent pas faire le boulot de collecte et de codage du head, voici le dossier zippÃ© de tout ceci :

Le dossier complet

Avec tous ses imports, et la typo Librebaskerville et Leaguespartan

Charger une image de fond alÃ©atoire avec glob() et rand()

Stéphane Noel — 2020-02-26T10:03:22Z

Ce script permet d'afficher une image de fond choisie alÃ©atoirement dans un rÃ©pertoire et l'affiche en fond d'un bloc.

Pour rÃ©aliser ce petit code, nous avons besoin d'un dossier contenant des images, placÃ© dans le site.
Dans cet exemple, il est nommÃ© "backgrounds", Ã l'intÃ©rieur d'un dossier "images".

RÃ©cupÃ©rer la liste des images disponibles

Pour disposer de la liste des images, on utilise la fonction glob :

$liste=glob("images/backgrounds/*.{gif,png,jpg,jpeg}", GLOB_BRACE);

cette fonction crÃ©e une variable tableau contenant la liste des Ã©lÃ©ments correspondants Ã la dÃ©finition donnÃ©e dans la premiÃ¨re partie des arguments. l'Ã©toile (*) veut dire "n'importe quel caractÃ¨re en n'importe quel nombre". Les accolades permettent de prÃ©voir plusieurs variantes, si on a ajoutÃ© l'argument GLOB_BRACE dans la fonction.
La dÃ©finition que nous donnons Ã glob est donc : "les fichiers terminant par l'extension .gif ou .png ou .jpg ou .jpeg se trouvant dans le dossier backgrounds situÃ© dans le dossier images".

Choisir au hasard un fichier

Pour tirer au sort une des images, on demande Ã la fonction php rand de faire le travail

$alea=rand(0,count($liste)-1);

On stocke donc dans la variable $alea un chiffre entre zÃ©ro et le nombre d'Ã©lÃ©ments dans la liste moins 1. Pourquoi ? Parce que dans une liste de 6 Ã©lÃ©ments, le premier est l'Ã©lÃ©ment 0, le dernier est l'Ã©lÃ©ment 5. Il nous faut donc tirer au hasard un chiffre entre 0 et 5.

Ecrire le nom de l'image au bon endroit

Il nous reste a Ã©crire le tag avec une balise style Ã l'intÃ©rieur. C'est echo() qui s'en charge :

echo "
";

Le code complet avec sa CSS

Le code PHP

";
?>

CSS

#big-background { height:80vh; background-color:#ddd; background-repeat: no-repeat; background-position: center center; background-size: cover;
}

Un formulaire PHP pour gÃ©nÃ©rer les vignettes d'une sÃ©rie d'images

Stéphane Noel — 2017-09-24T13:30:08Z

Ce script est dÃ©rivÃ© de la fonction de crÃ©ation de vignettes. AssociÃ© Ã un formulaire, il permet de gÃ©nÃ©rer des vignettes au format dÃ©sirÃ© pour un ensemble d'images placÃ©e dans un dossier.

Comment utiliser ce script

Le script doit Ãªtre installÃ© sur un serveur exÃ©cutant le code php, que ce soit un serveur en ligne ou un serveur local comme MAMP. Il a plutÃ´t Ã©tÃ© imaginÃ© pour un serveur local, raison pour laquelle l'upload d'image par paquet ou via un ficher zip n'a pas Ã©tÃ© Ã©crit.

Le script se trouve dans un dossier qui comprend aussi un dossier "upload" dans lequel on place les images d'origine. En chargeant la page index Ã travers un navigateur, on accÃ¨de Ã un formulaire qui permet de rÃ©gler la taille de l'image et choisir un option de crop : est ce que les vignettes doivent occuper entiÃ¨rement la taille dÃ©finie ou rentrer dans le cadre dÃ©fini par la taille ?
On peut aussi choisir d'agrandir les images trop petites, mÃªme si ce n'est pas recommandÃ©.

On valide ensuite le formulaire. Un dossier est crÃ©Ã© automatiquement dans le dossier et les images y sont dÃ©posÃ©es aprÃ¨s l'exÃ©cution du script.

Attention

Ce script est offert "as is", c'est Ã dire qu'il fonctionne sur la plupart des serveurs contemporains, n'est pas garanti sur tous les serveurs et dans toutes les situations.

– on fera notamment attention Ã ne pas placer trop d'images, car le temps accordÃ© au script dÃ©pend de la puissance du serveur et de sa configuration.
– on fera ensuite attention au format des images d'origine : des images trop grandes 4 Ã 5000 pixels de large, par exemple, peuvent planter le script, de nouveau en fonction de la puissance et des rÃ©glages du serveur.
– les gif animÃ©s seront "aplatis", c'est Ã dire que seule la premiÃ¨re image sera conservÃ©e...

Une fonction pour crÃ©Ã©er automatiquement des vignettes d'images Ã taille choisie

Stéphane Noel — 2015-09-27T10:32:39Z

Ce script permet de crÃ©er et de stocker automatiquement des images Ã taille choise Ã partir d'une image originale. L'usage principal est de pouvoir gÃ©nÃ©rer des vignettes pour une galerie de type "Fancybox", mais d'autres usages sont possibles, comme la rÃ©duction d'une image trop grande pour son affichage optimisÃ© dans une page.

Le script contient une fonction qui est appelÃ©e en spÃ©cifiant
– l'adresse de l'image originale
– la taille en largeur et hauteur de l'image finale dÃ©sirÃ©e
– le type de procÃ©dure : sans recadrage (l'image reste complÃ¨te, et donc juste rÃ©duite) ou avec recadrage (l'mage finale sera exactement au format demandÃ©, mais une partie de l'image originale sera perdue dans la version fabriquÃ©e)

La fonction renvoie l'adresse de l'image calculÃ©e sauf si l'image demandÃ©e est plus grande que l'image originale (dans ce cas, l'adresse de l'original est renvoyÃ©e).

La fonction stocke crÃ©e un dossier dont le nom par dÃ©faut est "vignettes", si ce dossier n'existe pas encore. Elle va ensuite vÃ©rifier qu'il n'y a pas dans ce dossier une image qui correspond Ã la demande, qui aurait Ã©tÃ© fabriquÃ©e auparavant. Ceci permet de ne pas recrÃ©er les images Ã chaque chargement. Si c'est le cas, elle renvoie simplement le nom de cette image. Si l'image correspondante n'existe pas encore, elle crÃ©e cette image en ajoutant au nom original les infos de taille, de telle maniÃ¨re Ã possÃ©der un nom unique, puis la stocke dans le dossier.

La fonction s'utilise comme suit :

echo "";

Le rÃ©sultat est l'adresse "vignettes/image.jpg_600_600_c.jpg".

Voici les deux images qui ont servi de test :
L'original (1500 X 1057 px)

Le rÃ©sultat (600 X 600 px)

Le script est composÃ© de trois fonctions :
– La fonction principale, dÃ©crite plus haut
– la fonction de traitement d'image
– une petite fonction faite pour isoler le nom du fichier dans un url (exemple : "image/monimage.gif" devient "monimage.gif")

Le code est commentÃ© pour plus de clartÃ©.

CMS homemade, partie 2

Stéphane Noel — 2014-09-28T21:12:22Z

Dans cet article, nous allons analyser la requÃªte "Get" pour savoir quel contenu afficher, en quelques lignes seulement.

La requÃªte en GET

PHP peut analyser des informations envoyÃ©es dans une url, aprÃ¨s le signe " ?". DerriÃ¨re ce signe, php espÃ¨re trouver deux choses : une clÃ© et sa valeur. Par exemple :

?page=entree

Ce qui signifie que la clÃ© "page" a pour valeur "entree".
Php peut permettre de rÃ©cupÃ©rer cette information et de la tester. Il a reÃ§u cette information qui est stockÃ©e dans un array qui porte de le nom de $_GET. Pour rÃ©cupÃ©rer la valeur associÃ©e Ã la clÃ© "page", demandera donc "$_GET['page']. $_GET est en fait ce qu'on appelle une superglobale, voir l'information sur le site de php.

Voici le code complet :

if(isset($_GET['page'])){ $page=trim($_GET['page']);
} else { $page=$arbo[0];
}
$contenu_page=lit_dossier($page, 'complet');

Ce code demande si un paramÃ¨tre a Ã©tÃ© envoyÃ© dans l'url. Si oui, le dossier Ã charger pour afficher la page sera celui qui est spÃ©cifiÃ©, sinon, c'est le premier dossier de la variable "$arbo" qui sera choisi.

Le code charge ensuite le contenu choisi avec la fonction "lit_dossier()" que nous avons dÃ©jÃ employÃ©, sauf que cette fois, il demande le contenu complet. Les piÃ¨ces jointes Ã©ventuelles (images et documents) seront donc chargÃ©s.

Afficher le titre et le texte

Il reste maintenant Ã afficher le titre et le texte du contenu sÃ©lectionnÃ©. Il se trouve dans la variable "$contenu_page" que nous venons de charger Ã l'instant.

Le titre est dans $contenu_page['titre'], le texte dans $contenu_page['texte']. Pour afficher Ã§a.

Le seul cas particulier est l'illustration, qui ne sera pas systÃ©matiquement prÃ©sent. Pour ne pas avoir de message d'erreur en cas oÃ¹ on demande Ã PHP d'afficher quelque chose qui n'existe pas, on prÃ©cÃ¨de le code d'affichage d'une condition, qui dit "si $contenu_page['icone'] existe, alors Ã©cris-le".

On peut donc remplacer la balise "article" de la page index.php par ceci :

Aller plus loin
Ce CMS est rudimentaire, mais on peut lui ajouter tout de mÃªme l'affichage des galeries et des piÃ¨ces jointes. Consultez le script complet en tÃ©lÃ©chargeant la version "finale" ici.

CMS homemade, partie 1

Stéphane Noel — 2014-09-27T23:08:15Z

CrÃ©er un CMS rudimentaire est une bonne occasion de comprendre le comportement des CMS en gÃ©nÃ©ral. A partir de quelques scripts, on peut crÃ©er une mÃ©thode simple permettant d'ajouter des contenus sans plus passer par le codage de pages html.

Objectifs du CMS

Tout Cms possÃ¨de sa propre logique et ses objectifs. Comme la plupart des CMS existant, celui-ci possÃ¨de un but gÃ©nÃ©ral

– Afficher des pages en html/css correct
– Pouvoir ajouter facilement images en galerie et des piÃ¨ces jointes
– ÃŠtre lÃ©ger et comprÃ©hensible dans son usage
– Ajouter du contenu doit se faire sans devoir coder
– La navigation se crÃ©e et sâ€™update automatiquement

De plus, le nÃ´tre aura les caractÃ©ristiques limitatives suivantes :
– Pas de base de donnÃ©es
– Un seul niveau d'arborescence

Dans ce CMS, chaque page est stockÃ©e dans le site sous la forme d'un dossier, contenant un fichier texte nommÃ© "info.txt" qui contient le titre et le texte de la page, une illustration gÃ©nÃ©rale de la page nommÃ©e "icone.jpg", des images Ã©ventuelles qui seront affichÃ©es sous forme de galerie, puis le reste des piÃ¨ces jointes, comme des pdf, des zip, etc.
Le contenu minimal d'un dossier est le fichier texte lui-mÃªme.
Tous les dossiers seront stockÃ©s dans un dossier gÃ©nÃ©ral appelÃ© "contenus".

Commencer par le graphisme

Tout commence par le code html + css (norme HTML5) d'une page type. Dans la plupart des CMS, cette page s'appelle un template. Il peut Ãªtre tÃ©lÃ©chargÃ© ici.

– Un dossier CSS contenant des css de reset et la css "main.css" dans laquelle se trouve le code de base du template.
– Une favicon
– Un dossier img, avec l'unique image actuelle
– La page index.html, qui nous sert de gabarit
– Le dossier JS qui contient jquery et la page "main.js"
– La police libre de droit Montserrat

Cela donne ceci :

Installer sur le serveur local

Nous allons rapidement transformer ce template en machinerie Ã afficher des contenus. Pour cela il faut le dÃ©poser dans le dossier de travail du serveur local, dans notre cas, Mamp.

Une fois dÃ©posÃ©, nous allons transformer le fichier .html en fichier .php pour que le serveur Apache exÃ©cute le code que nous y placerons. Il suffit pour cela de renommer. Cette opÃ©ration ne provoque dans l'immÃ©diat aucun changement dans la page.

Ce didacticiel n'est pas orientÃ© sur la programmation en php, aussi j'ai codÃ© une page prÃªte Ã l'emploi, de 80 lignes, qui sera le moteur central du CMS. Nous expliquerons son fonctionnement briÃ¨vement, mais encore une fois ce n'est pas le propos central, je ne rentrerais donc pas dans les dÃ©tails. Le fichier est court et commentÃ©, pour les curieux.
TÃ©lÃ©charger le fichier et placez-le dans le dossier de notre CMS.

Nous allons pouvoir charger ce fichier au dÃ©but de la page, pour que les fonctions soient disponibles dans la page en rajoutant en premiÃ¨re ligne du fichier index.php :

La fonction include permet de copier le contenu d'un fichier dans un autre, Ã l'endroit oÃ¹ il est appellÃ©. Cette opÃ©ration est donc exactement le mÃªme que si on copiait/collait le contenu du fichier inc-fonctions.php Ã l'intÃ©rieur du fichier index.php.

RÃ´le des fonctions du fichier "inc-fonctions.php"

Le fichier contient deux fonctions.
Une fonction est un bloc de code qui est exÃ©cutÃ© chaque fois qu'on l'appelle. Comme un majordome Ã qui on demande "James, un cafÃ© s'il vous plait" et qui Ã chaque fois produit l'ensemble des gestes qui vous permettent d'avoir sur la table la tasse demandÃ©e.
Le code de la fonction contient donc le code qui doit Ãªtre exÃ©cutÃ© chaque fois que la fonction est appelÃ©e par son nom.

Ces deux fonctions sont donc :
La fonction "liste_dossiers("oÃ¹")", qui renvoie la liste des dossiers prÃ©sents Ã l'endroit spÃ©cifiÃ© par l'adresse "oÃ¹", sous la forme d'une liste, un "array" en langage php.

La fonction "lit_dossier("lequel","court ou complet")", qui renvoie sous forme d'array toute l'information que contient un dossier :
– titre
– texte
– adresse du dossier
– l'illustration gÃ©nÃ©rale

Si "complet" est spÃ©cifiÃ©, l'array contiendra en plus :
– les images de galerie
– les vidÃ©os, sons et autres piÃ¨ces jointes triÃ©es par type.

Avec ces deux fonctions et un peu de code, nous allons pouvoir rendre notre site minimal fonctionnel.

Ajouter du contenu
Pour pouvoir tester l'utilisation des fonctions, nous devons maintenant crÃ©er un contenu, soit deux dossiers avec un peu de contenu.
Pour l'exemple, voici deux dossiers contenus dans le dossier "contenu" Ã tÃ©lÃ©charger ici. L'arborescence de notre cms ressemble maintenant Ã ceci :

Maintenant que nous avons du contenu, nous allons utiliser la premiÃ¨re fonction, "liste_dossier()" pour lister ces fameux dossiers. Pour cela, nous allons placer en dessous de l'include quelques lignes supplÃ©mentaires :

Ce code charge dans une variable du nom de $arbo le produit de la fonction liste_dossiers("contenu/"), qui est le dossier oÃ¹ se trouve prÃ©cisement les contenus.
La fonction renvoie en fait un array, la liste d'adresse des dossiers trouvÃ©s.
La commande "print_r($arbo) va nous permettre de visualiser le contenu de cet array.

Une fois la page rechargÃ©e Ã travers le serveur local, on peut voir dans le code source de la page le rÃ©sultat suivant :

Print_r nous montre que l'array contient deux rÃ©sultats, l'adresse des deux dossiers contenus dans le dossier "contenu". Le dossier lui-mÃªme est d'ailleurs dans l'adresse.

C'est vers ces adresses que pointeront les liens de la navigation, mais nous voulons lister dans la navigation les titres des pages, pas simplement le nom du dossier. Il faut donc maintenant lire le contenu de chacun des dossiers pour rechercher les informations utiles, ici le nom de la page. C'est lÃ que la deuxiÃ¨me fonction intervient.

Nous allons remplacer le code dans la navigation (le tag "nav") par celui-ci :

  
".$info['titre']."";
}
?>

Ce code est un peut plus technique mais il est court.
– foreach() est une fonction qui permet de passer en revue une liste (un array), Ã©lÃ©ment par Ã©lÃ©ment. C'est ce qu'on appelle une boucle, qui va se rÃ©pÃ©ter autant de fois que quelque chose se trouve Ã l'intÃ©rieur. Dans notre cas, elle se rÃ©pÃ©tera deux fois pour le moment.

A l'intÃ©rieur de la boucle, on appelle la fonction "lit_dossier($dossier, 'court')" et on stocke le rÃ©sultat de son travail dans une variable du nom de $info.
A ce stade, $info contient le titre, le texte et l'icone Ã©ventuelle de la page. Il ne nous reste plus qu'Ã afficher les informations qui nous intÃ©ressent : le titre, contenu dans $info['titre'].

$info est une array d'un type spÃ©cial, appelÃ© "array associative", avec des clÃ©s (par exemple 'titre') associÃ©es Ã des valeurs (par exemple "bienvenue !"). Voir l'article sur les arrays sur le site de php francophone.

Les liens sont dans le dÃ©sordre, mais il suffit de renommer les dossiers "1-home" et "2-galerie" pour que ce soit rÃ©glÃ©.

La navigation est donc crÃ©Ã©e automatiquement, mais il ne se passe rien quand on clique sur les liens.
En fait, si, quelque chose change : l'url dans la barre de navigation. Chaque lien se termine par un truc comme " ?page=contenu/home" Et Ã§a, en fait c'est le dÃ©but de la magie de php : on va pouvoir rÃ©cupÃ©rer cette information et afficher le contenu demandÃ© par le clic grÃ¢ce Ã ce qu'on appellera "l'analyse de la requÃªte en GET".

Ecrire un fichier de log

Stéphane Noel — 2009-11-17T15:07:46Z

Un fichier de log est un fichier qui contient une sÃ©rie de donnÃ©es permettant de conserver des donnÃ©es de maniÃ¨re assez brute. On peut conserver ces informations dans une base de donnÃ©e, ici on fait une lecture et Ã©criture directement dans un fichier txt sur le serveur.

Voici le code :

Arts numériques

Ajouter une carte avec openstreetmap

InsÃ©rer une carte dans un site web

Utiliser uMap

Choisir le type de carte

Placer des Ã©lÃ©ments sur la carte

Choisir la taille et zoom par dÃ©faut

Attention ! Ne perdez pas le lien d'Ã©dition

Inclure la carte

Site php/bootstrap : ajouter une page de galerie

Ajouter une page pour recevoir la galerie

Utiliser fancybox

Batcher les images

CrÃ©er le code html

Titre Ã©ventuel

Site php/bootstrap : ajouter une page

1) crÃ©er le fichier

2) Placer les codes d'inclusion

3) Placer un peu de contenu

Une colonne

Une colonne

Une colonne

4) Updater le menu

Site php/bootstrap, base de travail

1) PrÃ©parer les fichiers de base html/css/javascript

2) Structurer le dossier du projet

3) Contenu du dossier CSS-JS

Notre page de base : index.php

Pourquoi des fichiers inclus en php ?

Allez, le code tout fait !

Charger une image de fond alÃ©atoire avec glob() et rand()

RÃ©cupÃ©rer la liste des images disponibles

Choisir au hasard un fichier

Ecrire le nom de l'image au bon endroit

Le code complet avec sa CSS

Un formulaire PHP pour gÃ©nÃ©rer les vignettes d'une sÃ©rie d'images

Comment utiliser ce script

Attention

Une fonction pour crÃ©Ã©er automatiquement des vignettes d'images Ã taille choisie

CMS homemade, partie 2

La requÃªte en GET

Afficher le titre et le texte

CMS homemade, partie 1

Objectifs du CMS

Un contenu stockÃ© sous forme de dossier

Commencer par le graphisme

Installer sur le serveur local

Ajouter les fonctionnalitÃ©s PHP

RÃ´le des fonctions du fichier "inc-fonctions.php"

Lister les dossiers prÃ©sents

Ecrire un fichier de log