Dans la première partie, nous avons mis en place une structure de site rudimentaire, nous avons vu comment utiliser require pour décomposer le contenu de notre site et éviter le répétition de notre code. Nous avons également utilisé les variables pour modifier le contenu de l'entête.

Dans cette partie nous allons voir comment créer des zones de texte administrable. Pour cela nous verrons comment envoyer des données avec PHP avec un formulaire, et comment écrire dans un fichier avec PHP. Nous mettrons également en place un accès sécuriser au dossier d'administration.

Vous pouvez télécharger le site de la partie pécédente à cette adresse : /uploads/premier-site.zip

Pour ceux qui on suivit la partie précédente, l'ajout notable et le texte de présentation de la page d'accueil qui a été externalisé dans le dossier frags/accueil-presentation.html, c'est ceux fichier que nous allons apprendre à modifier avec un formulaire et PHP.

Admin

Avant de commencer, nous allons créer l'arborescence de la partie administration. reproduisez cette arborescence :

Arborescence de l'admin

Nous retrouvons une arborescence assez classique, voici les contenus des fichiers :

header.php

Ce fichier contiens l'entête de la partie administration :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title><?php echo $titre; ?></title>
      <link type="text/css" rel="stylesheet" href="css/main.css" />
   </head>
   <body>
      <div id="container">
         <div id="header">
            <h1>BACKOFFICE</h1>
            <h2>Mon super site web</h2>
      </div>
 
<div id="menu">
    <ul>
        <li>Accueil
            <ul>
                <li><a href="index.php">Texte de présentation</a></li>
            </ul>
        </li>
       
        <li>Compagnie
            <ul>
                <li><a href="compagnie.php">Texte de présentation</a></li>
            </ul>
        </li>
        <hr class="clearer" />
    </ul>
</div>
<div id="content">

Notez la présence d'un variable titre qui nous permettra d'indiquer à l'utilisateur quel partie du site il administre.

footer.php

Idem, rien de révolutionnaire :

</div><!-- Fin de la div "content" -->
    <div id="footer">
      <p>Interface d'administration &copy; 2010</p>
    </div>
  </div><!-- Fin de la div "container" -->
</body>
</html>

init.php

On retrouve un fichier init cette fois dédié à l'admin, pour l'instant il est relativement vide :

<?php
// Configuration de l'admin
$titre = "Administration";
?>

main.css

Et le fichier CSS pour mettre en forme l'admin :

@CHARSET "UTF-8";

body {
    background: #555;
    font-size: 80%;
    font-family: Helvetica, Arial, sans-serif
}

#container {
    width: 1000px;
    margin: 0 auto;
    background: #fff;
}
 
#header {
    height: 150px;
    background: #7ba5c8;
}

#header * {
    color: #fff;
}
 
#menu {
    background: #333;
    color: #fff;
    padding: 10px;
}

#menu * {
    margin: 0;
    padding: 0;
    color: #fff;
}

#menu ul {
    margin-left: 10px;
}

#menu > ul > li {
    float: left;
    margin: 10px;
    font-weight: bold;
    list-style: square;    
}

#menu > ul > li * {
    font-weight: normal;
     list-style: none;
}

#footer {
    height: 100px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 0.8em;
}

.messageSuccess {
    background: #47a232;
    color: #ffffff;
    padding: 10px;
    display: block;
}

.messageError {
    background: #bf2a22;
    color: #ffffff;
    padding: 10px;
    display: block;
}

.clearer     { clear: both; }
hr.clearer     { visibility: hidden; }

label {
    display: block;
    font-weight: bold;
}
textarea {
    width: 90%;
    min-height: 350px;
    margin: 0 auto;
    display: block;
}

Gestion de contenu, Formulaire :

Dans le fichier index.php, nous retrouvons un code déjà renconté qui va inclure les différents fragments de fichier de la partie administration.

<?php
require 'frags/init.php';
require 'frags/header.php';

// Traitement du formulaire ICI
?>

<h1>Edition du Texte de présentation</h1>
<!-- Formulaire ICI -->

<?php
require 'frags/footer.php';
?>

Pour gérer le contenu du texte de présentation, nous allons commencer par créer un formulaire HTML.

Pour créer un formulaire nous allons utiliser la balise form, cette balise contiens 2 attributs obligatoires (si nous voulons transmettre des données avec), un attribut action qui va contenir l'url du script qui va traiter le formulaire, et un attribut method qui var préciser la méthode d'envois des information (POST ou GET).

<form action="index.php" method="post">
</form>

Quel différence entre GET et POST ? La première différence notable, c'est que la méthode GET envoie les informations par le biais de l'URL sous une forme que vous avez probablement déjà rencontré sur des sites en PHP : fichier.php?variable1=valeur1&variable2=valeur2 etc... De ce fait, la quantité d'information envoyée est limité par l'URL qui n'autorise que 255 caractères. Donc dans notre cas, nous utiliserons POST qui transmet les informations dans la requète HTTP (et pas dans l'url), avec POST, pas de limite pour la quantité de donnée envoyée.

Dans le formulaire, nous trouverons les champs necessaires pour l'édition du texte, dans notre cas ça sera simplisime, une zone de saisie de texte (un textarea) et un bouton(input) pour envoyer le formulaire.

Pour que les données des éléments du formulaire soient transmises, il faut leurs préciser un attribut name, cela nous permetra ensuite de récupérer l'information via ce nom au moment du traitement du formulaire :

<form action="index.php" method="post">
    <textarea name="contenu">Texte par defaut</textarea>
    <input type="submit" value="Envoyer" />
</form>

Si vous testez votre formulaire, vous devriez voir que la page se rafraichie, en faites cela nous indique que le formulaire envois bien les informations au script de traitement (à savoir lui-même). Vous devez aussi constater que le contenu entre les balises textarea est celui qui s'affiche au moment de l'affichage du formulaire.

Dans notre cas, le contenu à afficher dans cette zone correspond au contenu du fichier /frags/accueil-presentation.html (depuis la racine du projet). Je vous laisse le soin d'afficher son contenu entre les balises textarea en utilisant require que nous avons déjà utilisé.

Au final, notre fichier index.php doit ressembler à ça :

<?php
require 'frags/init.php';
require 'frags/header.php';

// Traitement du formulaire ICI
?>

<h1>Texte de présentation</h1>
<form action="index.php" method="post">
    <textarea name="contenu"><?php require '../frags/accueil-presentation.html'; ?></textarea>
    <input type="submit" value="Envoyer" />
</form>



<?php
require 'frags/footer.php';
?>

Notre formulaire est prêt, il ne nous reste plus qu'a traiter les données du formulaire.

Traitement d'un formulaire

Nous allons maintenant procéder au traitement du formulaire, la première chose à faire c'est de contrôler les données envoyer pour déjà voir si nous reçevons bien notre variable contenu. Pour cela, nous allons utiliser la fonction var_dump qui va nous fournir des informations détaillées sur les données transmise.

Variable globale $_POST

Pour dumper l'envoi d'un formulaire, il faut passer par la variable globale $_POST, c'est une variables crée par PHP et qui sert à transmettre les données envoyées avec la méthode POST.

Si nous avions utilié les méthodes GET pour l'envois, nous aurions utilisée la variable globale $_GET.

Ajoutez cette instruction PHP juste après le require du header.php :

var_dump($_POST);

En testant l'envoi du formulaire, vous devriez voir s'afficher le dump :

 array(1) {
  ["contenu"]=>
  string(12) "Contenu du textarea"
}

Attention ! Si vous avez saisi du HTML dans le textarea, le contenu du dump peut vous induire en erreur car il sera afficher comme du HTML (et donc vous ne verrez pas les balises dans le dump). Pour le constatez, envoyez dans le textarea <strong>Mon texte</strong>, vous verrez dans le dump "Mon texte" affiché en gras.

La variables $_POST n'est pas une chaine de caractère (string), ni un nombre (number) ni même un booléen (bool), c'est un nouveau type de variable, un tableau (array).

Les variables de type array son comparable à des armoires contenant des tiroirs de rangement, chaque tiroir porte un nom. Dans le cas de notre variable $_POST, elle n'a qu'un seul tiroir qui s'appel "contenu", pour récupérer la valeur de ce tiroir, on utilise cette syntaxe :

// Syntaxe pour afficher la valeur d'un index
echo $armoire["nom_du_tiroir"];

D'un point de vu terminologique, il va de soit que l'on appel pas "sous-variables" d'un array des tiroires, on appel ça des index.

Pour accéder à la valeur de l'index "contenu", la syntaxte est :

$_POST["contenu"]

Tester les données envoyées : if

Maintenant que nous savons accéder aux données envoyé au formulaire, nous allons devoir tester ces données avant de les écrire dans le fichier, car vous avez du remarquer, si l'on affiche la page de l'admin normalement (en cliquant dans le menu), la variable $_POST est toujours là (mais vide). Si nous ne testons pas "contenu" avant l'écriture, ça sera une catasrophe, en effet, à l'affichage de la page, POST est vide, du coup POST["contenu"] sera égale à rien, et PHP enregistrera ce rien (sous la forme d'une chaine vide) dans notre fichier de texte... pas cool.

Donc nous devons tester si la variable $_POST contiens un index "contenu", et si c'est la cas, écrire dans le fichier. Sinon on affiche le formulaire normalement.

Pour faire des tests (de variables) en php, on utilise une structure conditionnelle qui se présente sous cette forme :

if( condition ) {
   // bloc d'instruction
}

Cette structure conditionnelle se compose d'un mot clef if, suivi de la condition à vérifier entre parenthèse.

Comme vous pouvez le voir, un nouveau caractère "barbare" a fait sont apparition, l'accolade. L'accolade est très courante en programmation est sert à délimiter ce qu'on appel un bloc d'instruction. Nous rencontrerons des bloc d'instruction dans les structures conditionnelles, mais plus généralement dans ce qu'on appel les structures de contrôles (boucle, fonction, classe, etc...). Mais pour l'instant, nous devons écrire notre condition.

Notre condition a été formulé plus haut (Si $_POST["contenu"] existe), pour tester l'existence d'une variable en PHP, il existe une fonction : isset( $variable_a_tester), ce qui nous donne.

// Si $_POST["contenu"] existe
if( isset($_POST["contenu"]) ){
  // Enregistrer le fichier
  $nouveau_texte = $_POST["contenu"];
  echo $nouveau_texte;
}

Le test est opérationnel, vous pouvez voir que les accolades délimite les 2 lignes d'instructions PHP qui ne seront executés que si $_POST["contenu"] existe.

Rechargez la page via le menu, rien ne s'affiche, envoyé le formulaire, le texte a enregistrer doit apparaître, nous allons pouvoir passer à l'enregistrement.

Enregistrer du contenu dans un fichier

PHP dispose d'un nombre important de fonction, chaque fonction remplis une tâche précise. Dans le cadre de l'enregistrement du contenu de notre variable $nouveau_texte, nous allons utiliser 3 fonctions PHP.

La première fonction va servir à ouvrir le fichier à écrire (c'est comme si vous faisiez Fichier/ouvrir dans un éditeur de texte). Cette fonction s'appel fopen, elle prend 2 paramètres : Le fichier à ouvrir, et le mode d'ouverture (Ecriture complète, lecture, ecriture à la suite, écriture avant, etc...). Cette fonction retourne un buffer qui va nous permettre d'accéder au fichier en écriture :

// Création du buffer d'écriture
$fichier_ouvert = fopen('../frags/accueil-presentation.html', 'w');

Une fois le fichier ouvert, nous allons écrire le contenu de notre variable $nouveau_texte dans le buffer fraichement créé, pour cela nous utiliserons une fonction dont c'est le rôle : fwrite. Cette fonction prend 2 paramètres, le buffer (que nous avons rangé dans la variable $fichier_ouvert), et le contenu à écrire (notre variable $nouveau_texte).

fwrite( $fichier_ouvert, $nouveau_texte);

Une fois le fichier écrit, c'est comme dans votre éditeur de texte, vous fermez le fichier avec la fonction fclose( $ficher_a_fermer) :

fclose( $fichier_ouvert );

Voici le script complet :

if( isset($_POST["contenu"])) {
    $nouveau_texte = $_POST["contenu"];
    $fichier_ouvert = fopen('../frags/accueil-presentation.html', 'w');
    fwrite($fichier_ouvert, $nouveau_texte);
    fclose($fichier_ouvert);
}

Vous pouvez tester votre script, avec ces quelques lignes, vous venez de créer une petite console d'administration pour une zone de texte :)

Allez plus loin dans les tests

Comme vous venons de le voir, l'écriture dans un fichier implique 3 opérations successives, mais pour le moment, nous ne vérifions rien, alors qu'il serait élégant d'afficher à l'utilisateur un petit message pour lui signifier que l'écriture a réussi, sinon de tenter de lui expliquer pouquoi cela n'a pas fonctionné.

L'objectif est également à votre attention, en effet, si vous mettez en place des opérations de ce type (écriture de fichier, connection à des bases de données, envois de mail, etc...) et que vous ne faites pas remonter l'erreur à l'utilisateur, vous serez vite désarçonné quand l'utilisateur vous appelera en vous disant "Ca ne fonctionne pas", impossible pour vous de savoir la partie du code qui ne passe pas... En procédant de cette façon vous pouvez déterminer quel parti (voir quel ligne) de votre code ne passe pas, et du coup corriger plus rapidement l'erreur.

Parmis les 3 opérations, 2 sont sensibles et necessitent des tests : Ouverture de fichier et Ecriture de fichier. Parmis les raisons de ces erreurs : Le fichier à écrire n'existe pas (impossible à ouvrir donc), vous ne disposez pas des droits pour écrire le fichier, vous n'avez que les droits de lecture... etc...

Pour faire ce genre de test (SI condition SINON autre chose) nous allons enrichir la structure de contrôle if (condition ) {}

Nous allons y ajouter un else qui va servir à dire SI (condition) Faire qqc SINON Faire autre chose

if( $condition ) {
   // $condition est vrai
} else {
   // $condition n'est pas vrai
}

Dans notre cas de figure l'algoritme est le suivant :

SI ( ouverture de fichier réussi )
   SI ( écriture de fichier réussi )
      afficher "Le texte a été mis à jour"
   SINON
      afficher "Impossible d'écrire le fichier"
SINON
   Afficher "Impossible d'ouvrir le fichier"

En code PHP cela donne :

// Si la variables $_POST contiens un index "contenu"
if( isset($_POST["contenu"])) {
    $nouveau_texte = $_POST["contenu"];
    
    // Si le fichier c'est bien ouvert
    if( $fichier_ouvert = fopen('../frags/accueil-presentation.html', 'w') ){
       
        // Si le fichier est bien écrit
        if( fwrite($fichier_ouvert, $nouveau_texte) ){
            echo '<div class="messageSuccess">Texte de présentation mis à jour</div>';
        }
       
        // Le fichier n'a pas été écrit
        else {
            echo '<div class="messageError">Impossible d\'écrire le fichier</div>';
        }
       
        // on ferme le fichier
        fclose($fichier_ouvert);
    }
    
    // Le fichier n'a pas été ouvert
    else {
        echo '<div class="messageError">Impossible d\'ouvrir le fichier</div>';
    }
}

N'hesitez pas à aérer le code pour facilité la lecture du code, pensez également à bien utiliser l'indentation (touche tabulation / espaces) pour permettre de voir quel code est dans quel bloc de condition.

Securiser l'accès à l'admin

Nous avons sécurisé l'écriture du texte de l'accueil, parfait, cependant, si une personne entre l'adresse de votre site suivit de /admin, il pourra entrer librement dans votre console d'administration et ecrire n'importe quoi sur votre site...

Pour sécuriser l'accès au site, nous allons avoir recour à un fichier spécial, les fameux HTACCESS, pour la petite histoire, ces fichiers servent à étendre la configuration du serveur en spécifiant des cas particulier dans les dossiers où ils sont rangés. par defaut, le serveur web autorise l'accès aux dossiers de votre site, nous allons créer un fichier .htaccess qui va interdire l'accès à notre dossier admin, pour cela, créer un fichier .htaccess dans le répertoire admin, ouvrez le avec un éditeur de texte, et mettez ce texte :

Deny from all

Enregistrer, tentez maintenant d'accéder à votre dossier /admin

Ca a le mérite de sécuriser l'accès cependant c'est un peu trop expéditif, l'idée serait de permettre à certains utilisateur d'avoir accès à ce dossier... avec un identifiant et un mot de passe par exemple... Pour mettre ça en place vous allez devoir créer un 2ème fichier pour stoquer les mots de passe crypté que nous allons appeller (par convention) .htpasswd (On l'appel comme ça car c'est le nom de la commande unix qui permet de remplir ce fichier).

Placer ce fichier au même niveau que le fichier .htaccess et entrez ce code :

 AuthName "Mon super site : Administration"
AuthType Basic
AuthUserFile "/chemin/du/fichier/depuis/la/racine/admin/.htpasswd"
Require valid-user

La première ligne permet de définir un petit message d'accueil dans la fenêtre d'autentification, la deuxième le mode d'autentification. La troisième vous demande de renseigner le chemin absolue vers le fichier .passwd qui va contenir les mots de passe d'accès à l'admin... La dernière ligne précise que l'utilisateur doit être un utilisateur valide.

Pour obtenir le chemin absolue du fichier .htpasswd, vous pouvez utiliser la fonction php realpath('fichier').

Oula ! D'ou sort de fichier .htpasswd, comment le créer, et comment je peux savoir le chemin absolue du fichier ???

Créer un fichier .htpasswd

Si vous êtes sous Mac / Linux, vous pouvez renseigner/créer le fichier .htpasswd  avec une simple commande shell (via le terminal) :

htpasswd -c .htpasswd login motdepass

Et pour mettre à jour le fichier :

htpasswd .htpasswd login motdepass

Si vous n'avez pas accès à ces outils, beaucoup de site propose des outils pour encrypter des mot de passe à sens unique, vous pouvez également générer le mot de passe vous même avec PHP en utilisant la fonction crypt :

echo crypt('Mot de pass en clair'); // affiche le mot de passe crypté

Puis remplir le fichier sous cette forme :

admin:$1$GqpupC8S$wQk0tYdAJJvO9K0fE5QdW1

Si vous trouvez ça compliqué, j'ai créé un petit outil en PHP qui va faire tout ça pour vous, ça se présente sous la forme d'un fichier php. Copiez-le dans le dossier à sécuriser, puis affichez-le dans le navigateur, il vous permettra de créer les 2 fichiers cités plus haut et d'ajouter / supprimer des utilisateurs.

htacces generator v1.0

Si vous l'utilisez en production, pensez à ajouter votre IP dans la liste des IP habilitées à executer le fichier

Autre sécurité

Nous l'avons vu au début de cette partie, un fichier .htacces contenant le texte "Deny from all" interdit totalement l'accès au dossier (via le navigateur), il serait judicieux de placer ce genre de fichier dans votre dossier frags (à la racine du site) pour éviter qu'un petit malin tente de trouver une faille dans votre site.

Touche final

Pour terminer en beauté, nous allons mettre une petite touche final à notre formulaire d'édition de texte en utilisant un utilitaire javascript bien pratique, le CKEditor

Commencer par vous rendre sur le site : http://ckeditor.com et téléchargez la dernière version du CKEditor. Dézippez l'archive dans le dossier js/ de l'admin. Ensuite ouvrez le fichier qui contiens le formulaire d'édition du texte et ajoutez des lignes à la fin du fichier :

<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
CKEDITOR.replace('contenu');
//-->
</script>

Il ne vous reste plus qu'a admirer le résultat.

Infos

Découvrez les possibilités de PHP en matière de création de site et gestion de contenu. A l'issu de ce cours, vous serez en mesure de créer un site web complet avec gestion des contenus via console d'administration

Ressources

Commentaires

Aucun commentaires

Laisser un commentaire

Votre email ne sera pas publié