R213 – CM #2

DĂ©veloppement web S2

Rappel

  • PHP : langage de programmation pour crĂ©er des sites web dynamiques.
  • DiffĂ©rents types de variables (integer, string...), chacun avec ses opĂ©rateurs.
  • Conditions pour faire des branchements (if, else) et des boucles (while, do while, for).

Tableaux

Un tableau (array) est « une liste de variables ». C'est une variable qui contient une séquence de valeurs.

Pourquoi ? Les variables sont souvent groupées : liste de choses, propriétés d'un élément.

Deux types : numérotés et associatifs.

Tableaux numérotés

  • Les entrĂ©es (Ă©lĂ©ments, valeurs) sont indexĂ©es par des nombres entiers ≥ 0
  • DĂ©claration avec array()
  • Accès Ă  chaque entrĂ©e avec [] 
// déclaration d'un tableau nommé $tab1 avec trois strings : 'ab', 'bc', 'cd'
$tab1 = array('ab', 'bc', 'ce');
// afficher la première valeur : index 0 !!!
echo $tab1[0];
// modifier une entrée
$tab1[2] = 'cd';

Autre façon de déclarer un tableau : $tab1 = ['ab', 'bc', 'cd'];

Deux choses Ă©tranges :

  • Les indices commencent par 0
  • DiffĂ©rents types de variables dans un mĂŞme tableau
$tab = array(1, '2', 3.0, 'quatre');
echo $tab[0]; // affiche '1'
echo $tab[3]; // affiche 'quatre'

Question surprise : tableaux numérotés

Qu'est-ce que ça affiche ? 

<?php
$tab = array(1, -2, 3, -4, 5);
echo $tab[1];

Tableaux associatifs

Ils ne sont pas indexés avec un entier, mais avec une clé (un string). 

// déclaration d'un tableau avec trois valeurs
$tab2 = array(
  'nom' => 'Gonzalez', // on ajoute la clé et le symbole =>
  'prenom' => 'Aldo',
  'bureau' => 'C07'
);
// afficher la valeur de la clé 'bureau'
echo $tab2['bureau'];

N'oubliez pas :

  • La clĂ© est une chaĂ®ne de caractères, utilisez les apostrophes
  • C'est comme un tableau numĂ©rotĂ©, mais avec la clĂ© et le symbole =>

Question surprise : tableaux associatifs

Trouvez les erreurs 

<?php
tab = array('seance'-> 'CM2'; 
            'prof'='AldoGL';
            "salle" -> C24;
            'heure' -> 8)
echo $tab(prof);
echo $tab[heure];

Parcourir un tableau

Pour l'afficher, le modifier, calculer la moyenne, etc.

Le plus simple : la boucle for avec la fonction count() 

// la fonction count() renvoie la taille du tableau
for ($i = 0; $i < count($tab); $i++) {
  echo $tab[$i];
}

Encore une nouvelle boucle, mieux adaptée pour parcourir les tableaux : foreach 

// parcourir un tableau (numéroté ou associatif)
foreach ($tab as $val) {
  echo $val;
}

// parcourir avec la clé et la valeur
foreach ($tab as $cle => $val) {
  echo $cle . ' est ' . $val . '<br>';
}

Pour parcourir et modifier les valeurs d'un tableau,
utilisez une boucle for.

Pour afficher le contenu d'un tableau :

  • print_r()
  • var_dump() (plus complet)

Fonctions pour les tableaux

Quelques fonctions pour chercher dans un tableau : 

// le tableau $tab contient la valeur 'val' ?
in_array('val', $tab);

// le tableau $tab contient la clé 'cle' ?
array_key_exist('cle', $tab);

// renvoie la clé de la valeur 'val' (false s'il n'y en a pas)
array_search('val', $tab);

Question surprise : fonctions pour tableaux

Quelle ligne affiche la valeur associĂ©e Ă  la clĂ© 'bureau' ? 

<?php
$tab2 = array('nom'    => 'Gonzalez',
              'prenom' => 'Aldo',
              'bureau' => 'C07');

echo array_search('bureau', $tab2); // (1)
echo array_search($tab2, 'bureau'); // (2)
echo $tab2['bureau'];               // (3)

Autres fonctions pour les tableaux : 

// ajouter la valeur 'val' Ă  la fin de $tab
array_push($tab, 'val');

// supprimer la quatrième entrée de $tab
unset($tab[3]);

La liste complète de fonctions est [ici].

Tableaux multidimensionnels

On peut imbriquer les tableaux : une entrée de tableau peut être un tableau elle-même

Par exemple, une liste d'éléments avec des propriétés : 

$enseignants = array(
  array('prenom' => 'Aldo',    'nom' => 'Gonzalez', 'bureau' => 'C07'),
  array('prenom' => 'Ricardo', 'nom' => 'Uribe',    'bureau' => 'C05'),
  array('prenom' => 'Anne',    'nom' => 'Lesme',    'bureau' => 'C02')
);
array_push($enseignants, array('prenom' => 'Hind', 'nom' => 'Hallabia', 'bureau' => 'C07'));

echo $enseignants[3]['nom']; // affiche 'Hallabia'

En bref

Les variables servent à manipuler des données simples dans un programme. Dès que ces données sont structurées, on les regroupe avec des tableaux.

Les tableaux sont donc très utilisés.

Fonctions

  • Script simple : suite d'instructions (variables, opĂ©rations, structures de contrĂ´le)
  • Script complexe : milliers de lignes, parties rĂ©pĂ©titives, difficile Ă  lire...

Pour structurer le code, on utilise les fonctions

Une fonction (function) est une suite d'instructions réutilisable qui peut renvoyer une valeur. Souvent, elle a des paramètres (arguments).

On déclare (crée) une fonction une fois, et on l'appelle (utilise) plusieurs fois.

Deux nouveaux mots-clés :

  • function pour dĂ©clarer une fonction
  • return pour renvoyer une valeur
// déclaration d'une fonction
function ma_fonction($x, $y) {
  return $x*$x + 2*$y;
}

// appel avec les valeurs 3 et 2.6
echo ma_fonction(3, 2.6);

Même si une fonction n'a pas de paramètres, les parenthèses sont nécessaires.

On donne des valeurs par défaut aux paramètres avec =. [doc]

Question surprise : fonctions

Trouvez les erreurs 

<?php
fonction $array-to-string($arr) = 
{
  $str = '[ ';
  for ($i = 0; $i < count($arr); $i++) {
    $str = $str . $arr[$i] . ' ';
  }
  $str = $str . ' ]';
};

$tab = array('abc', 'def', 'ghi', 'jkl');
echo $array-to-string[$tab];
Utilisez des fonctions partout. Si vous avez plus de 20 lignes consécutives de code PHP, mettez-les dans une fonction.

Fonctions internes

PHP propose beaucoup (≥ 10 000) de fonctions dĂ©jĂ  faites : include(), var_dump(), idate(), print_r(), in_array(), array_key_exist(), etc.

On ne peut pas connaître toutes ces fonctions. Cherchez sur Google ou sur la documentation de PHP pour trouver la fonction que vous voulez.

Variables superglobales

PHP déclare automatiquement plusieurs variables de type tableau : ce sont les variables superglobales.

Ces variables sont : $GLOBALS, $_SERVER, $_GET, $_POST, $_FILES, $_COOKIE, $_SESSION, $_REQUEST et $_ENV.

On connaît la variable superglobale $_GET.

Quand on ajoute des variables dans l'URL, on retrouve les données dans la variable $_GET, qui est un tableau associatif (voir TP #2)

La variable superglobale $_POST est aussi un tableau associatif.

On l'utilise pour récupérer les données entrées dans un formulaire (voir TD #1)

D'autres variables superglobales trés utilisées :

  • $_SESSION pour les sessions
  • $_COOKIE pour les cookies
  • $_FILES pour envoyer des fichiers avec un formulaire

Formulaires

Un utilisateur peut intéragir avec un site web dynamique uniquement à travers un formulaire.

Par exemple :

  • Se connecter Ă  son compte
  • Faire une recherche
  • Laisser un commentaire

Rappel

Deux fichiers : formulaire.html et affichage.php 

[...]
  <form method="post" action="affichage.php">
    <input type="text" name="un_texte">
    <input type="submit" value="Valider">
  </form>
</body>
</html>
[...]
    <p>
      Vous avez Ă©crit <?php echo $_POST['un_texte']; ?> dans le formulaire.
    </p>
  </body>
</html>

En HTML, un formulaire peut contenir beaucoup de types de widgets différents : zones de texte, boîtes à sélection, boutons, cases à cocher, etc. Il y a beaucoup de formes de formulaires différents

Champ texte

<form method="post" action="affichage.php">
  Nom :
  <input type="text" name="user_name">
  <input type="submit" value="Valider">
</form>
Nom :

Le texte se trouve dans $_POST['user_name']

Encore mieux, avec la balise <label> 

<form method="post" action="affichage.php">
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="user_name">
  <input type="submit" value="Valider">
</form>

Valeur de l'attribut for ↔ valeur de l'attribut id de l'Ă©lĂ©ment <input>

Champ d'adresse Ă©lectronique

<form method="post" action="affichage.php">
  <label for="mail">E-mail :</label>
  <input type="email" id="mail" name="user_mail">
  <input type="submit" value="Valider">
</form>

$_POST['user_mail'] contient l'adresse e-mail. Elle est validée avant la soumission.

Champ pour mot de passe

<form method="post" action="affichage.php">
  <label for="pwd">Mot de passe :</label>
  <input type="password" id="pwd" name="password">
  <input type="submit" value="Valider">
</form>

Le mot de passe est dans $_POST['password']

Champ texte multiligne

<form method="post" action="affichage.php">
  <label for="msg">Message :</label>
  <textarea id="msg" name="user_message"></textarea>
  <input type="submit" value="Valider">
</form>

Le texte est dans $_POST['user_message']. Attention, <textarea> n'est pas une balise auto-fermante

Cases Ă  cocher

<form method="post" action="affichage.php">
  <input type="checkbox" name="pear" id="fruit_1">
  <label for="fruit_1">Poires</label>
  <input type="checkbox" name="apple" id="fruit_2">
  <label for="fruit_2">Pommes</label>
  <input type="submit" value="Valider">
</form>

Plusieurs choix possibles. Input avant le label.

Pour voir si un une case a été cochée, on utilise la fonction isset : 

if (isset($_POST['pear'])) {
  echo 'Vous avez coché les poires';  
}
if (isset($_POST['pommes'])) {
  echo 'Vous avez coché les pommes';
}

Boutons radio

<form method="post" action="affichage.php">
  <input type="radio" name="color" id="radio_1" value="red">
  <label for="radio_1">Rouge</label>
  <input type="radio" name="color" id="radio_2" value="green">
  <label for="radio_2">Vert</label>
  <input type="radio" name="color" id="radio_3" value="blue">
  <label for="radio_3">Bleu</label>
  <input type="submit" value="Valider">
</form>

Groupe d'options avec un seul choix possible. MĂŞme attribut name pour tous. Input avant le label.

Avec les boutons radio, les valeur possibles sont déjà définies dans le code HTML avec l'attribut value. 

if ($_POST['color'] == 'red') {
  echo 'Vous avez choisi rouge';
} else if ($_POST['color'] == 'green') {
  echo 'Vous avez choisi vert';
} else {
  echo 'Vous avez choisi bleu';
}

Liste déroulante

<form method="post" action="affichage.php">
  <label for="card">Type de carte :</label>
  <select id="card" name="usercard">
    <option value="visa">Visa</option>
    <option value="mc">Mastercard</option>
    <option value="amex">American Express</option>
  </select>
  <input type="submit" value="Valider">
</form>

MĂŞme principe que les boutons radio : une seul choix.

$_POST['usercard'] vaut 'visa', 'mc' ou 'amex'.

Voir plus de widgets [ici] et [ici].

  • Utilisez les widgets en fonction des donnĂ©es que vous demandez
  • Correspondance entre la valeur de l'attribut name et la clĂ© dans le tableau $_POST
  • Ces widgets ont beaucoup de fonctionalitĂ©s, explorez MDN Web Docs pour en savoir plus

Traitement des formulaires

Tout formulaire renvoye vers un fichier PHP qui fait :

  1. Validation : vérifier que les données sont complètes et correctes
  2. Traitement : les utiliser (normalement avec une base de données)

Never trust user input

Ne faites pas confiance aux données envoyées par l'utilisateur :

  • Champs vides
  • Champs avec des valeurs fausses
  • Failles de sĂ©curitĂ© (XSS)

Vérifiez que les valeurs soient cohérentes : 

if (strlen($_POST['mdp']) >= 8) {
  // faire quelque chose
} else {
  echo 'Mot de passe trop court. <a href="formulaire.html">Retour</a>';
}

Valider plusieurs données, afficher une seule erreur 

if ($_POST['number'] > 100) {
  echo 'Nombre trop grand. Retour';
} elseif (strlen($_POST['mdp']) < 8) {
  echo 'Mot de passe trop court. Retour';
} else {
  // traiter les données
  // ...
}

Valider plusieurs données, afficher toutes les erreurs 

$erreur = false;
if ($_POST['number'] > 100) {
  echo 'Nombre trop grand.';
  $erreur = true;
}
if (strlen($_POST['mdp']) < 8) {
  echo 'Mot de passe trop court.';
  $erreur = true;
} 
if ($erreur) { // pareil que if ($erreur == true)
  echo '<a href="formulaire.html">Retour</a>';
} else {
  // traiter les données
}

L'utilisateur peut entrer un script dans un formulaire pour accéder aux mots de passe, bases de données, etc.

Avant d'afficher un texte saisi par l'utilisateur, passez la fonction htmlspecialchars() : 

<p>
  Message enregistré : <?php echo htmlspecialchars($_POST['msg']); ?>
</p>

Vérifiez toujours les données d'un formulaire :

  • Un texte : vide ? trop long ?
  • Un nombre : trop petit ? trop grand ?
  • Une adresse URL : bien formatĂ©e ?
  • ...

On peut valider un champ avant d'envoyer les données avec l'attribut pattern et une expression régulière [lien]

Conclusion

  • Tableaux et fonctions pour mieux coder :
    scripts plus simples, structurés
  • Beaucoup de fonctions internes et widgets pour les formulaires
  • Formulaire → validation → traitement