Cours Web Avancé

Création des pages Web Dynamiques

Côté serveur en PHP
Pr. Hicham OMARA

Hicham OMARA 1
Formulaires
Création d'un formulaire
Envoie/ réception des données
Transfère de fichier

Hicham OMARA 2
Formulaires

▬ Ils constituent la base de la création de sites dynamiques :

∎ Ils permettent d’envoyer les informations du poste client vers le serveur via le protocole
HTTP.
∎ l’utilisateur peut :
› saisir textes ou mots de passe,
› opérer des choix grâce à des boutons radio, des cases à cocher ou des listes de sélection,
› envoyer des fichiers depuis le poste client.

Hicham OMARA 3
Formulaires
Création d'un formulaire HTML …

▬ La page contenant le formulaire doit avoir la <form method="post" action="nomdefichier.php">

structure minimale ci-contre ========= <fieldset>

∎ <form> possède des attributs obligatoires.

<legend>Titre du formulaire</legend>
∎ <fieldset> <!-- Corps du formulaire -->
› Permet de créer des blocs à l’intérieur d’un même formulaire,
</fieldset>
› de structurer le formulaire, ce qui améliore la présentation.
∎ L’élément <legend> </form>
› contient le titre des blocs. …
∎ À l’intérieur de chaque bloc se trouvent les éléments
HTML qui créent les champs visibles ou invisibles du
formulaire.

Hicham OMARA 4
Formulaires
Création d'un formulaire HTML
▬ L’attribut action="nom_de_fichier.php" est obligatoire.
∎ Il désigne le fichier qui va traiter, sur le serveur, les informations saisies dans le formulaire.
∎ Si le fichier se trouve dans un autre dossier, voire sur un autre serveur, il faut utiliser une adresse absolue,
en écrivant : action= http://nomdomaine/chemin/nom_de_fichier.php.
∎ On utilise la variable $_SERVER["PHP_SELF"], qui contient le nom du fichier en cours d’exécution
comme valeur de l’attribut action; Si traitement du formulaire se trouve dans le même fichier.
▬ On peut mettre "mailto:nom@domaine.com", pour envoyer les données vers une
adresse e-mail, mais pas vers une base de données.
▬ L'attribut name = "nom_formulaire"
∎ donne un nom au formulaire.

Hicham OMARA 5
Formulaires
Création d'un formulaire HTML

▬ L'attribut method = "post|get"

∎ détermine la méthode d’envoi des données vers le serveur.
∎ La méthode get est la méthode par défaut,
› Elle ajoute les données du formulaire à l’adresse URI du fichier qui les traite, ce qui les rend visibles par le
visiteur (c'est un inconvénient ) .

∎ La méthode post, utilisée dans la plupart des cas,

› permet de s'assurer que les données ne sont pas visibles dans l'URI.
– Comme les mots de passe

Hicham OMARA 6
Formulaires
Création d'un formulaire HTML

▬ L’élément <input />

∎ Il permet de créer les composants classiques des formulaires.
∎ La différenciation de ces composants s’effectue en définissant la valeur de leur attribut
type.
› Il possède également les éléments de type "text", "password", "email",
"tel", "date", "number", "checkbox", "radio", "submit", "reset",
"file" et "hidden".
∎ L’attribut name est obligatoire, il permet d’identifier les champs pour récupérer leur
contenu.
Hicham OMARA 7
Formulaires
Création d'un formulaire HTML

▬ L’élément <input type="text" />

∎ Il crée un champ de saisie de texte d’une seule ligne.
∎ D'autres attributs supplémentaires :
› size = "nombre" détermine la largeur de la zone en nombre de caractères.
› maxlength = "nombre" détermine le nombre maximal de caractères que l’utilisateur peut saisir.
› value = "texte" définit le texte par défaut qui sera transmise au serveur si l’internaute ne rien saisit.
<input type ="text" name="ville" size="30" maxlength="35" value="Rabat"/>

∎ On peut utiliser l'instruction onfocus="this.value=' ' Pour que le texte s’efface

dès que la zone de texte reçoit le focus.
Hicham OMARA 8
Formulaires
Création d'un formulaire HTML

▬ L’élément <input type="email" />

∎ Crée un champ de saisie d’adresse e-mail,
∎ L'attribut pattern="exp régul", permet au navigateur de vérifier la validité de la
saisie et avertit l’utilisateur en cas d’erreur, en se basant sur un motif d’expression
régulière.
∎ Ex :
<input type ="email" name="mail" size="50" pattern="(^[a-z]+)@([a-
z0-9])+(\.)([a-z]{2,4})"/>

Hicham OMARA 9
Formulaires
Création d'un formulaire HTML

▬ L’élément <input type="tel" />

∎ Crée un champ de saisie de numéro de téléphone.
∎ L'attribut pattern="exp régul", permet au navigateur de vérifier la validité de la
saisie et avertit l’utilisateur en cas d’erreur, en se basant sur un motif d’expression
régulière.
<input type ="tel" name="tel" pattern="^0[0-9]{9}" />
∎ L’expression régulière utilisée implique que la saisie doit comporter 10 chiffres dont le
premier est un zéro, sinon l’erreur est signalée par les navigateurs qui gèrent ce
composant.
Hicham OMARA 10
Formulaires
Création d'un formulaire HTML
▬ L’élément <input type="password" />
∎ Crée un champ de saisie de mot de passe dans lequel les caractères saisis sont invisibles et remplacés par
des astérisques *.
∎ Exemple :
<input type ="password" name="code" size="10" maxlength="6"/>
▬ L’élément <input type="number" />
∎ Crée un champ de saisie d'un nombre .
∎ les attributs min et max permet de créer un intervalle de valeurs autorisées,
∎ L’attribut required permet de rendre une saisie obligatoire.
∎ L'attribut step permet de définir le pas d'incrémentation. Ex :
<input type="number" name="num" min="1" max="10" step="1" />

Hicham OMARA 11
Formulaires
Création d'un formulaire HTML

▬ L’élément <input type="date" />

∎ Crée un champ de saisie de date au format AAA-MM-JJ.
∎ Les attributs min et max, permet de définir des dates minimale et maximale.
∎ Exemple :
<input type ="date" name="d" min="2020-01-01" max="2020-12-31" />
∎ Il existe des variantes de ce composant qui permettent de saisir l’heure, le mois, la
semaine, en remplaçant la valeur de l’attribut type par time, month, week.

Hicham OMARA 12
Formulaires
Création d'un formulaire HTML

▬ L’élément <input type = "radio" />

∎ Crée un bouton radio.
∎ Il permet de sélectionner un seul choix.

∎ Tous les boutons radio du groupe doivent avoir le même name.

∎ L’attribut checked = "checked" définit le bouton coché par défaut.
∎ Exemple :
JAVA : <input type ="radio" name="lang" value="java" />
C++ : <input type ="radio" name="lang" value="c2" />
C : <input type ="radio" name="lang" value="c" checked= "checked"/>
Hicham OMARA 13
Formulaires
Création d'un formulaire HTML

▬ L’élément <input type = "checkbox" />

∎ Crée une case à cocher utilisée pour effectuer un choix multiple.
∎ L’attribut value est obligatoire, et contient le texte qui sera transmis au serveur si l’utilisateur
coche la case.
∎ Il est possible de cocher plusieurs cases simultanément, ( # le cas des boutons radios).
› Dans ce cas, il faut que le nom de tous les composants soit le même et suivi de crochets []
∎ Exemple :
<input type ="checkbox" name="lang[]" value="arabic" />
<input type ="checkbox" name="lang[]" value="anglais" />

Hicham OMARA 14
Formulaires
Création d'un formulaire HTML
▬ L’élément <input type = "submit" />
∎ Crée un bouton que l’utilisateur doit cliquer dessus pour déclencher l’envoi des données du formulaire
vers le serveur.
∎ L’attribut value constitue le texte visible du bouton dans le formulaire.
∎ Au moins un bouton d’envoi par formulaire.
∎ Ex : <input type ="submit" value="Envoyer" />
▬ L’élément <input type = "reset" />
∎ Crée un bouton de réinitialisation du formulaire.
› Si l’utilisateur clique sur le bouton reset, les valeurs par défauts contenues dans les attributs value qui seront affichées.
∎ L’attribut value constitue le texte visible du bouton dans le formulaire.
∎ Exemple : <input type ="reset" value="Effacer" />

Hicham OMARA 15
Formulaires
Création d'un formulaire HTML

▬ L’élément <input type="file" />

∎ Permet le transfert de fichiers du poste client vers le serveur.
∎ L’attribut name est obligatoire.
∎ L'attribut size limite la taille de la zone de saisie,
∎ L’attribut accept définit le ou les types de fichier acceptés en transfert.
› L’utilisation de cet attribut est recommandée car il permet de limiter le transfert à certains types de fichiers bien
précis et de refuser les autres (plus de sécurité).
∎ Ex, le serveur n’accepte que le transfert de fichiers ayant les extensions .gif ou .jpeg et refuse
tout autre type :
<input type="file" name="monfichier" accept="image/gif,image/jpeg" size="30"/>

Hicham OMARA 16
Formulaires
Création d'un formulaire HTML

▬ L’élément <input type="hidden" />

∎ C'est un champ caché n’ayant aucun rendu visuel dans le formulaire
∎ Il permet de transmettre des données invisibles.
∎ l’attribut value contient les informations à envoyer
∎ L’attribut name est obligatoire.
∎ Exemple :
<input type="hidden" name="MAX_FILE_SIZE" value="20000"/>

Hicham OMARA 17
Formulaires
Création d'un formulaire HTML

▬ L’élément <textarea> </textarea>

∎ crée un champ de saisie de texte sur plusieurs lignes.
∎ Les attributs cols et rows définissent respectivement le nombre de colonnes et de
lignes de la zone de texte.
∎ L’exemple suivant crée une zone de saisie de texte de 45 colonnes et 8 lignes au
maximum avec du texte affiché par défaut :
<textarea name="commentaire" cols="45" rows="8" >
Tapez vos commentaires ici
</textarea>
Hicham OMARA 18
Formulaires
Création d'un formulaire HTML
▬ L’élément <select>
∎ Crée une liste de sélection d’options, chaque option est définie par un élément <option> séparé.
∎ Il comporte les attributs suivants :
› name ="nom_select" définit le nom de la liste, il est obligatoire.
› size ="Nombre" détermine le nombre de choix visibles simultanément (= 1 par défaut).
› multiple ="multiple" autorise la sélection de plusieurs options simultanément.

∎ L’élément <option> comporte les attributs suivants :

› value ="val". définit la valeur transmise au serveur si l’option est sélectionnée (obligatoire)
› selected ="selected" définit l’option qui est sélectionnée par défaut dans la liste si l’utilisateur ne fait pas de choix.
<select name="liste">
<option value="val1">choix 1</option> <option value="val2">choix 2</option> …
</select>

Hicham OMARA 19
Formulaires
Récupération des données du formulaire

▬ Valeurs uniques
∎ Les valeurs provenant des champs de formulaires sont contenues sur le serveur dans des
tableaux associatifs
∎ appelés $_POST et $_GET, selon la méthode choisie.
› Les clés de ces tableaux sont les noms associés aux champs par l’attribut name.

∎ Il faut contrôler l’existence des variables $_POST[" "] et $_GET[" "],

∎ Ces variables n’existent que si l’utilisateur a complété les champs et a cliqué sur le
bouton d’envoi.

Hicham OMARA 20
Formulaires
Récupération des données du formulaire ….
<form action= "<?= $_SERVER["PHP_SELF"] ?>" method="post">
<fieldset>

▬ Valeurs uniques – <legend><b>Infos</b></legend>

<div>
Nom : <input type="text" name="nom" size="30" /><br />

▬ EXEMPLE F : <input type="radio" name="genre" value="femme" />|

Mr : <input type="radio" name="genre" value="monsieur"/>
<input type="reset" value="Effacer" />
<input type="submit" value="Envoyer" />
</div>
</fieldset>
</form>
<?php
if(isset($_POST["nom"]) && isset($_POST["genre"])) {
echo "<h2> Bonjour ". $_POST["genre"]. "
".stripslashes($_POST["nom"]). "!</h2>";
}
?>

Hicham OMARA 21
Formulaires En cas d’erreur de saisie sur un seul champ, l’utilisateur
est obligé de recommencer l’ensemble de la saisie.
Maintien de l’état du formulaire
Pour éviter cela, il est utile de maintenir l’état du
… formulaire après traitement en réaffichant l’ensemble des
saisies.
Nom : <input type="text" name="nom" size="40" value="<?php if(isset($_POST["nom"]))
echo $_POST["nom"]?>"/> <br />
Debutant : <input type="radio" name="niveau" value="debutant"
<?php if(isset($_POST["niveau"]) && $_POST["niveau"]=="debutant") echo "checked=\"checked\"" ?> />
Initie : <input type="radio" name="niveau" value="initie"
<?php if(isset($_POST["niveau"]) && $_POST["niveau"]=="initie") echo "checked=\"checked\"" ?>/><br />
…

<?php
if(isset($_POST["nom"]) && isset($_POST["niveau"])){
echo "<h2> Bonjour ". stripslashes($_POST["nom"]). " vous êtes ".$_POST["niveau"]." en PHP</h2>";
}
?>

Hicham OMARA 22
Formulaires
Récupération des données du formulaire
▬ Valeurs multiples
∎ Certains champs donnent à l'utilisateur de saisir +ieurs valeurs sous un même nom de composant. Ex :
› Un groupe de cases à cocher ayant le même attribut name, dont il est possible de cocher une ou +ieurs cases simultanément.
› Une liste de sélection ayant un nom unique mais dans laquelle l’attribut multiple="multiple" est défini.
∎ Donc il s'agit d'un tableau (de type array) pas un simple scalaire.
∎ Solution : suivre le nom du composant de crochets, comme pour créer
une variable de type array.
html:<input type="checkbox" name="choix[]" value="html" />
css:<input type="checkbox" name="choix[]" value="css" />
∎ Le programmeur récupère ces valeurs dans les variables suivantes :
$_POST["choix"][0] //qui contient la valeur "html"
$_POST["choix"][1] //qui contient la valeur "css"

Hicham OMARA 23
Formulaires
Récupération des données du formulaire <form method="post" action="trait.php" >
<H3>Générateur de CV</h3>
Nom : <input type="text" name="identite[]" />
▬ Valeurs multiples Prénom : <input type="text" name="identite[]"/>
Langues <br />
∎ Ex ============ <select name="lang[]" multiple="multiple">
<option value="arabic">arabic</option>
∎ Le formulaire contient :
<option value="français">français</option>
› deux zones de saisie de texte portant le </select> <br />
même nom, Compétences<br />
PHP<input type="checkbox" name="competence[]"
› une liste de sélection avec l’attribut value="PHP" />
multiple JAVA<input type="checkbox" name="competence[]"
value="JAVA" />
› quatre cases à cocher ayant le même C#<input type="checkbox" name="competence[]"
nom. value="C#" /> <br />
…
Hicham OMARA 24
Formulaires
Récupération des données du formulaire if(isset($_POST["identite"]) && isset($_POST["lang"]) &&
▬ Valeurs multiples
› Le script cible du formulaire "trait.php"
récupère les données et réalise une fiche
récapitulative des renseignements
personnels
–si les variables du tableau $_POST
existent
–le cas contraire, une boîte d’alerte, (la
fonction alert() de JS), et une redirection
vers la page de saisie, via la fonction JS
window.history.back()
isset($_POST["competence"])) {
echo "Mon CV ";
$nom=$_POST["identite"][0];
$prenom=$_POST["identite"][1];
$lang = $_POST["lang"];
$competence=$_POST["competence"];
echo"<b> $prenom ", $nom, "</b>";
echo "<br />Langue :";
echo "<ul>";
foreach($lang as $val) echo "<li>$val</li>";
echo "</ul>";
echo "Compétences :";
echo "<ul>";
foreach($competence as $val)echo "<li>$val</li>";
}
else { echo"<script type=\"text/javascript\">";
echo "alert(Pb de saisie!');";
echo "window.history.back() </script>";
}
Hicham OMARA 25
Formulaires
Transfert de fichiers vers le serveur (Upload)

▬ L'élément <input type="file" name = "fich"/>

∎ provoque l'envoie vers le serveur d’un fichier caractérisé par sa taille, son extension et autres.
∎ Il dispose d'un bouton autorisant l'utilisateur à sélectionner un fichier sur son disque dur.
› l’attribut accept peut prendre un grand nombre de valeurs, correspondant aux types MIME des fichiers acceptés, et permet de
vérifier l'extension des fichiers avant l'envoies aux serveurs .
– par exemple "image/gif", ou "text/html".
– Un fichier d’un type différent sera rejeté, ce qui donne une protection contre les utilisateurs mal intentionnés.
Attention !! Le transfert de fichiers présente un risque de sécurité pour le site cible puisque ces fichiers vont
être écrits et exécutés sur le serveur.
∎ L’élément <form> doit avoir l’attribut method à la valeur post et l’attribut enctype à la valeur
multipart/form-data.

Hicham OMARA 26
Formulaires
Transfert de fichiers vers le serveur

▬ Après la soumission du formulaire,

∎ Le navigateur lit le contenu du fichier, le formater et l'envoyer au serveur web.
∎ Le serveur le stocke temporairement sous un nom arbitraire. Puis, il stocke les nouvelles informations dans un tableau
associatif $_FILE ayant comme clé le nom indiqué dans l'attribut name de l'élément de type file du formulaire :
∎ $_FILES["fich"]["name"]: contient le nom qu’avait le fichier sur le poste client.
∎ $_FILES["fich"]["size"]: la taille réelle en octet du fichier transféré.
∎ $_FILES["fich"]["tmp_name"] : le nom temporaire attribué au fichier transféré.
∎ $_FILES["fich"]["type"] : le type MIME initial du fichier transféré.
∎ $_FILES["fich"]["error"]: donne le code d’erreur associé au fichier téléchargé. Il retourne :
UPLOAD_ERR_OK : indique que le transfert est bien réalisé.
UPLOAD_ERR_INI_SIZE : indique que la taille du fichier est supérieure à celle définie dans la php.ini.
UPLOAD_ERR_FORM_SIZE : indique que la taille est supérieure à celle définie dans le champ caché MAX_FILE_SIZE.
UPLOAD_ERR_PARTIAL : indique que le fichier n’a été que partiellement téléchargé.
UPLOAD_ERR_NO_FILE : indique qu’aucun fichier n’a été téléchargé.
Hicham OMARA 27
Formulaires
Transfert de fichiers vers le serveur
▬ boolean move_uploaded_file(string "fichtmp",string "fichfinal")
∎ Permet d’enregistrer et de renommer le fichier sur le serveur.
∎ "fichtmp" est le chemin d’accès du fichier temporaire,
∎ "fichfinal" le nom sous lequel sera enregistré définitivement le fichier,
∎ Elle retourne TRUE si l’opération est bien réalisée et FALSE dans le cas contraire.
▬ Il est recommandé de limiter la taille des fichiers à télécharger en ajoutant au formulaire un
champ caché
› nommé MAX_FILE_SIZE,
› où l’attribut value contienne la taille maximale admise en octet :
› <input type="hidden" name="MAX_FILE_SIZE" value="100000" />

Hicham OMARA 28
Formulaires
Transfert de fichiers vers le serveur
<form action="test.php" method="post" enctype="multipart/form-data" >
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<label>Fichier</label>
<input type="file" name="fich" accept="image/gif"/>
<input type="submit" value="Envoi" />
</form>

<?php
if(isset($_FILES['fich'])) { // vérification
echo "Taille maximale autorisée: ", $_POST["MAX_FILE_SIZE"], " octets";
echo "<h3>Tableau \$_FILES </h3>";
foreach($_FILES["fich"] as $cle => $valeur) echo "clé : $cle|valeur : $valeur <br/>";
// Enregistrement et renommage du fichier
$res = move_uploaded_file($_FILES["fich"]["tmp_name"],"img.gif");
if($res==TRUE) echo "Le transfert est fait!";
else echo "Erreur de transfert n°", $_FILES["fich"]["error"];
} ?>

Hicham OMARA 29
Formulaires
Transfert de plusieurs fichiers
▬ Pour un envoie de plusieurs fichiers simultanément : tout élément <input
type="file"…/> doit avoir le même nom suivi de crochets de la manière
suivante :
<input type="file" name="fichier[]" accept="image/gif" size="50"/>;
∎ l’attribut accept peut prendre des valeurs différentes pour chaque élément <input />.
∎ Lors de la récupération du formulaire, le tableau $_FILES contenant les informations sur les
fichiers transférés, devient tableau à trois dimensions.
∎ Ex, la variable : $_FILES["fich"]["name"][0] contient le nom du premier fichier transféré.
▬ La fonction move_uploaded_file() permet de renommer et sauvegarder les
fichiers transférés.
Hicham OMARA 30
Formulaires
Transfert de plusieurs fichiers
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post"
enctype="multipart/form-data" >
<input type="hidden" name="MAX_SIZE" value="10000" />
Fichier 1 : <input type="file" name="img[]"
accept="image/gif"/>
Fichier 2 : <input type="file" name="img[]"
accept="image/gif"/>
<input type="submit" value="Envoie" />
</form>
<?php
if(!empty($_FILES)){
echo"Taille autorisée :",$_POST["MAX_SIZE"],"octets";
foreach($_FILES["fich"] as $cle => $valeur) {
echo "Clé:$cle <br />";
foreach($valeur as $key=>$val)
Hicham OMARA
echo " Fichier : $key valeur : $val <br />";
}// Déplacement et renommage des fichiers
$r1=move_uploaded_file($_FILES["img"]["tmp_name"][0],"ima
ge1.gif");
$r2=move_uploaded_file($_FILES["img"]["tmp_name"][1],"ima
ge2.gif");
if($r1==true && $r2==true) echo "Transferts effectués !";
else echo "Transferts non effectués <br />";
}
else echo "Choisissez les fichiers à transférer";
?>
31
Formulaires
Formulaire avec des boutons d’envoi multiples
<input type="submit" name="op"

▬ Il permet de déclencher des actions différentes en value="x+y"/>

<input type="submit" name="op"
fonction du bouton activé par l’utilisateur. value="x-y"/>
<input type="submit" name="op"
∎ Pour réussir ce cas, il faut que les boutons aient le même nom et
value="x/y"/>
leurs valeurs (l’attribut value) soient différentes. …
∎ La sélection de l’action se fait en fonction de la valeur associée à if(isset($_POST["op"]))){

chaque bouton. switch($_POST["op"]){

case"x+y": $r=$v1+$v2; break;
∎ L’exemple crée une calculatrice
case"x-y": $r=$v1-$v2;break;
avec des opérations basiques. case"x/y": $r=$v1/$v2;break;
…

Hicham OMARA 32