R213 – CM #1

Développement web S2

Présentation du module

Nom: R213 : Développement web S2
Sur AMeTICE: [22-23]-S2 - R213 Développement web
Séances: CM (TP TP TP) TD (TP TP TP)

Objectif

Créer des sites web dynamiques, donc :

comprendre le fonctionnement d'un site web interactif
apprendre à programmer en PHP
manipuler des bases de données

Évaluation

Règles

Prendre des notes en cours
Ne pas parler en CM
Pas de smartphone ni réseaux sociaux
Ponctualité

Règles (pour moi)

Joignable par mail, forum du cours, mon bureau
Répondre à vos questions

Web dynamique

Une page web dynamique : oui.sncf

Internet

Internet : grand réseau d'ordinateurs qui communiquent entre eux. Plusieurs services : e-mail, FTP, WWW. Le WWW concerne uniquement les pages web

Deux types d'ordinateurs dans ce réseau : serveurs (dans un data center) et clients (chez vous)

Front-end / back-end

Deux catégories dans le développement web

Front-end	Back-end
coté client (utilisateur)	coté serveur (hébergeur)
Afficher le contenu	Générer le contenu
HTML, CSS et JavaScript	PHP, Java, Python, Ruby, C#, etc.

Web statique / dynamique

Site web statique : pages web générées « à la main » ; pas d'interaction
Site web dynamique : le serveur génère la page avec un programme (invisible pour le client) ; l'utilisateur interagit avec le site web

Brainstorming : comment peut-on interagir avec un site web dynamique ?

Consulter les horaires sur oui.sncf
Ajouter un commentaire sur une vidéo de youtube.com
Modifier un article sur fr.wikipedia.org
blablacar.fr nous envoie un e-mail de confirmation
...

JavaScript / PHP

Langages de programmation, mais

JavaScript	PHP
front-end	back-end
interaction sans recharger la page	—
—	bases de données, cookies

PHP

PHP = « PHP: Hypertext Preprocessor » (geeks...)
Dernière version : PHP 8.2.1 (5 janvier 2023)
Sorti en 1995 (PHP 1.0)
Très critiqué car peu élégant, notation incohérente, plein d'exceptions.
Mais très utilisé : WordPress, Wikipédia, Facebook (avant)
Alternatives : Java, Python, Ruby, C#, etc

Comment ça marche

On écrit le code PHP dans un fichier avec l'extension php. Le fichier peut contenir aussi du code HTML
Le serveur HTTP interprète ce code pour générer uniquement du code HTML
Le navigateur web reçoit ce code HTML pour afficher la page web

Débuter en PHP

Exemple minimal

<?php
echo 'Hello World'; // affiche le texte 'Hello World'
?>

Exemple minimal

<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <?php
  echo 'Hello World'; // affiche le texte 'Hello World'
  ?>
</body>
</html>

Balises PHP

Le code PHP est écrit entre les balises <?php et ?>

<?php
echo 'Hello World'; // affiche le texte 'Hello World'
?>

Ce qui est dehors s'affiche tel quel

Si le fichier finit avec une balise PHP fermante, on peut la supprimer

Commentaires

Commentaire : bout de texte qui est ignoré

<?php
echo 'Today it is ' . date('l'); // affiche le jour de la semaine
?>

Pourquoi ?

ajouter des explications sur le code
enlever temporairement un partie du code sans la supprimer

Deux types de commentaires : //... et /* ... */

<?php
echo 'Hello World<br>'; // le reste de cette ligne est un commentaire

/* tout ce
texte est un
commentaire */

echo /* même ici */ 'Rehello (sic)';
?>

Le point-virgule

Chaque instruction (ligne de code) doit finir avec un point-virgule (;)

<?php
echo 'Hello World'; // affiche le texte 'Hello World'
?>

On peut supprimer le dernier point-virgule juste avant une balise PHP fermante

echo

echo affiche une chaîne de caractères (un texte)

<?php
echo 'Hello World'; // affiche le texte 'Hello World'
?>

On peut aussi utiliser print

Variables et opérations

Variables

Variable : unité d'information (nombre, texte, etc) stockée temporairement en mémoire (pas dans un fichier)

Elle existe pendant la génération de la page PHP

<?php
$prenom = 'Camille'; // cette variable contient la chaîne de caractères 'Camille'
$age = 22;           // cette variable contient le nombre entier 22

echo $prenom . ' a ' . $age . ' ans'; // affiche 'Camille a 22 ans'
?>

Nom et valeur

Une variable a un nom et une valeur

<?php
// nom :    $site
// valeur : 'Arles'
$site = 'Arles';
echo $site; // affiche la valeur de $site
?>

Le nom d'une variable doit commencer par le symbole dollar ($), suivi des lettres (a...z, A...Z), chiffres (0...9) et tirets bas (_). Pas de chiffre juste après le $

On assigne une valeur à une variable avec
le symbole = (!)

On initialise une variable en lui affectant une valeur. Souvent, une expression littérale

<?php
// le nom de la variable est $prenom
// 'Aldo' est une expression littérale
$prenom = 'Aldo'; // la variable $prenom prend la valeur 'Aldo'
?>

Types de variables

string chaîne de caractères, texte : 'Hello world'
integer nombre entier : 2023
float nombre décimal : 1.618
boolean booléen, avec seulement deux valeurs possibles : true ou false

Aussi : null (pas de type), object et array (tableau)

Le type d'une variable est implicite : il dépend de sa valeur

<?php
$module = 'm2202';    // variable de type string
$note_moyenne = 13.79 // type float
$nb_inscrits = 50;    // type integer
$fini = false;        // type boolean
?>

On obtient le type d'une variable avec la fonction gettype()

Opérateurs arithmétiques

Les nombres (integer et float) ont les opérations classiques : + (addition), - (soustraction), * (multiplication) et / (division)

En plus : % (modulo), ** (exponentielle)

<?php
echo (2 + 3.6)*5 - 3/2; // affiche 26.5
echo '<br>';
echo 23%4;              // affiche 3, car 22 = 5*4 + 3
echo '<br>';
echo 2**5;              // affiche 32
?>

Plus d'opérateurs ici. Par exemple : ++, +=, *=, etc

Question surprise

Ce code est-il valide ?

<?php
$prix = 12;
$prix = $prix + 10;
echo $prix;
?>

Opérateurs de comparaison

Pour comparer deux nombres : == (égal), != (différent), < (plus petit que), <= (inférieur ou égal), > (plus grand que), >= (supérieur ou égal)

Ils renvoient une valeur booléenne : true ou false

<?php
$bool1 = (2 == 3.5); // false
$bool2 = (2 != 3.5); // true
$bool3 = (3 < 3);    // false
$bool4 = (3 <= 3);   // true
?>

Erreur fréquente : utiliser = (affectation) au lieu de ==

Opérateurs logiques

Trois opérateurs logiques : && (et), || (ou), ! (non)

<?php
$bool1 = false && true; // false
$bool2 = false || true; // true
$bool3 = ! $bool2;      // false
?>

Strings

Délimités par des apostrophes (')

<?php
echo '<p>Un paragraphe</p>';
?>

On peut aussi utiliser les guillemets (")

Pour utiliser le caractère apostrophe (') dans un string, il faut l'échapper avec l'antislash (\)

<?php
echo '<p>J\'adore</p>';
?>

Opérateur pour les strings : .(assemblage)

<?php
$str1 = '<p>J\'adore ';
$str2 = 'dormir </p>';
$str3 = $str1 . $str2;
echo $str3; // affiche '<p>J'adore dormir </p>
?>

Constantes

Constante : variable dont la valeur ne change jamais

<?php
const PI = 3.1415; // la constante PI vaut 3.1415
?>

Pas de $ dans le nom
Nom tout en majuscules

Question surprise

Ce code est-il valide ?

<?php
$nom = Dupont;
$note = 13,5;
$réussit = $true;
?>

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];

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' (ou 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)

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' => 'David', 'nom' => 'Peyron',   'bureau' => 'C05'),
  array('prenom' => 'Anne',  'nom' => 'Lesme',    'bureau' => 'C02')
);
array_push($enseignants, array('prenom' => 'Toufik', 'nom' => 'Baroudi', 'bureau' => 'C07'));

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

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

Structures de contrôle

If

Une condition, un bloc d'instructions (entre accolades)

<?php
if ($age < 18) {
  echo '<p>Vous n\'avez pas accès à ce contenu.</p>';
}
?>

Indentez (décalez à droite) toujours le code qui se trouve dans le bloc d'instructions

S'il n'y a qu'une seule instruction dans le bloc, on peut supprimer les accolades ({ })

Else

Deux blocs d'instructions, un seul est exécuté

<?php
if ($age > 18) {
  echo '<p>Faites une recherche par mots-clés.</p>';
} else {
  echo '<p>Vous n\'avez pas accès à ce contenu.</p>';
}
?>

Elseif

Plusieurs blocs d'instructions, plusieurs conditions

<?php
if ($age > 18) {
  echo '<p>Faites une recherche par mots-clés.</p>';
} elseif ($age > 10) {
  echo '<p>Vous n\'avez pas accès à ce contenu.</p>';
} else {
  echo '<p>On vient d\'envoyer un SMS à tes parents.</p>';
}
?>

While

Boucle avec condition au début

<?php
$i = 1;
while ($i <= 10) { // while (...)
  echo '<p>i vaut ' . $i . '</p>';
  $i = $i + 1;
}
?>

Do-while

Boucle avec condition à la fin. Bloc exécuté au moins une fois

<?php
$i = 1;
do { // do
  echo '<p>i vaut ' . $i . '</p>';
  $i = $i + 1;
} while ($i <= 10); // while (...); Attention au point-virgule !
?>

Attention au ; après la condition

For

Nombre prédéfini d'itérations (répétitions de la boucle)

<?php
// for (valeur initial; condition; modification)
for ($i = 1; $i <= 10; $i++) {
  echo '<p>i vaut ' . $i . '</p>';
}
?>

$i++ est égal à $i = $i+1. Il existe aussi $i--

Pour parcourir un tableau on utilise la fonction count()

$acteurs = array('Brad', 'Margot', 'Diego');
// la fonction count() renvoie la taille du tableau
for ($i = 0; $i < count($acteurs); $i++) {
  echo $acteurs[$i];
}

Foreach

Boucle pour les tableaux

// 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

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 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]

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

$_GET

La variable superglobale $_GET est un tableau associatif qui contient les paramètres de l'URL

// URL : index.php?type=feu&page=3
echo $_GET['type']; // affiche 'feu'
echo $_GET['page']; // affiche 3

Application : mettre des informations dans un hyperlien

$_POST

La variable superglobale $_POST est elle aussi un tableau associatif

On l'utilise pour récupérer les données entrées dans un formulaire

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 interagir avec un site web dynamique uniquement à travers un formulaire

Par exemple :

Se connecter à son compte
Faire une recherche
Laisser un commentaire

Exemple minimal

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

Champ texte

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

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

Cases à cocher

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

Plusieurs choix possibles. Input avant le texte

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" value="red"> Rouge
  <input type="radio" name="color" value="green"> Vert
  <input type="radio" name="color" value="blue"> Bleu
  <input type="submit" value="Valider">
</form>

Groupe d'options avec un seul choix possible. Même attribut name pour tous. Input avant le texte

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';
} elseif ($_POST['color'] == 'green') {
  echo 'Vous avez choisi vert';
} else {
  echo 'Vous avez choisi bleu';
}

Bref

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 renvoie vers un fichier PHP qui fait :

Validation : vérifier que les données sont complètes et correctes
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érifier que les valeurs sont 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

Code PHP + base de données = code HTML
Formulaire + base de données + code PHP = site web dynamique
Formulaire → validation → traitement

Ressources

php.net [documentation]
OpenClassrooms : Concevez votre site web avec PHP et MySQL [Cours]
Grafikart.fr : Apprendre PHP [YouTube]
PrimFX : Tutos PHP [YouTube]