Tutoriel de correction du TP2

Mise en place

On suppose qu'un répertoire tpdsi a été créé à la racine du site  web. 

Créer un répertoire tp2 sous ce répertoire tpdsi ;  y recopier le fichier  saisieTicket.html  du TP1.
Editer ce fichier pour remplacer la valeur de l'attribut  "action" du formulaire par editTicketAction.php (on remplacera également la valeur POST de l'attribut "method" par GET).

Si le serveur web est lancé sur la machine locale,  on doit pouvoir visualiser le formulaire de saisie de ticket en tapant l'URL http://localhost/tpdsi/tp2/saisieTicket.html dans un navigateur.

On va créer avec Kompozer le tableau qui va visualiser les données saisies (tableau affiché par le script editTicketForm.php).

Lancer Kompozer.
Taper la chaîne (de style Titre 1) "Demande d'intervention bien reçue"

Tableau->Inserer->Tableau : 2 lignes, 6 colonnes

Saisir les libéllés du tableau
Enregistrer le fichier sous .../tpdsi/tp2/editTicketAction.php (sélectionner "Tous les fichiers" au lieu de "Fichiers XHTML" dans la liste déroulante "Type:")

Récupération des données du formulaire

Les valeurs des champs du formulaire sont accessibles dans le tableau associatif _REQUEST.

Cliquer au début de la page.

Insertion->Code PHP...

Insérer le code ci dessous dans la boîte.

$application = $_REQUEST['application'];
$priority = $_REQUEST['priority'];
$type = $_REQUEST['type'];
$oneLiner = $_REQUEST['oneLiner'];
$contents = $_REQUEST['contents'];

Premier affichage

Soit L la ligne du tableau à compléter (ligne qui affiche les caractéristiques du ticket créé). Désignons par L(i) la i-ième case de cette ligne.
Le contenu de chacune de ces cases est désormais dynamique; il contiendra donc une expression php du type <?php echo $var; ?>.

Affectation de la première case

Cliquer dans L(1).

Insertion->Code PHP...

Insérer le code ci dessous dans la boîte.

echo $application;

Affectation des autres cases

Répéter la suite d'opérations précédentes pour les cases L(2), L(3), L(5) et L(6). (Ne pas traiter la case contenant la date.)

Test

Remplir et valider le formulaire de saisie de ticket ou cliquer directement sur ce lien.

Affichage amélioré

La couleur d'affichage de la ligne doit dépendre de la priorité de la demande d'intervention; on va donc utiliser des couleurs de rouge à vert et ajouter de nouveaux styles  à notre feuille de styles styles.css.

.tab_bg_red {
background-color: red;
}
.tab_bg_orange {
background-color: orange;
}

La ligne affichée va utiliser un nom de class CSS calculé dynamiquement et rangé dans la variable $tableRecordClass. Passer en mode source dans Kompozer et remplacer la balise <tr> correspondant à la ligne L par <tr class="<?php echo $tableRecordClass; ?>">.

(Toujours en mode source,) Insérer un lien vers la feuille de style à l'intérieur de la balise <head>

  <link rel="stylesheet" href="../styles/styles.css" type="text/css" media="screen">

On va créer un tableau PHP permettant d'associer une couleur à un code de priorité $priority. 

Revenir en mode "Normal"
Cliquer sur l'icone représentant la première balise PHP .

Insertion->Code PHP...

Insérer le code ci dessous en bas dans la boîte ouverte .

$priorityColorMap = array(
          5 => 'red', // 'Très urgente'
          4 => 'orange', // 'Urgente'
          3 => 'yellow', //'Moyenne'
          2 => 'blue', // 'Faible'
          1 => 'green' // 'Très faible'
);
$tableRecordClass = 'tab_bg_' . $priorityColorMap[$priority];

Tests

Cliquer sur les liens suivants pour créer des anomalies de priorité urgente ou moyenne.

Contrôle d'accès

$_SERVER['REMOTE_ADDR'] permet d'obtenir l'adresse IP du navigateur client sous forme d'une chaîne de caractère. Une solution pour controler le domaine de cette adresse est d'insérer le code suivant au début de la page (utilisation de la fonction explode) : 

$array = explode('.', $_SERVER['REMOTE_ADDR']);
if ( count($array) >= 4 ) {
        list($ip1,$ip2,$ip3,$ip4) = $array;
        $domain = "$ip1.$ip2";
        $expectedDomain = $domain; // A remplacer par un domaine : '163.173'
        if ( $domain != $expectedDomain ) {
                echo 'Accès interdit';
                exit;
        }
// else adresse au format IPv6!
}