Introduction

Durée

3 heures 35

Mots-clés

Code PHP, formulaire, requêtes HTTP, service web, base de données, MySQL, phpMyAdmin.

Objectifs

C’est vers la création des premières pages PHP avec accès à la base de données que sont tournés les prochains TP. Ce chapitre n’introduit pas de framework PHP, mais inscrit néanmoins le développement dans un écosystème auquel participent d’autres technologies telles que Node.js ou HTML 5.

Prérequis

Pour valider les prérequis nécessaires, avant d’aborder le TP, répondez aux questions ci-après :

1.	Quel est l’attribut de la balise <form> qui détermine l’URL de traitement des données d’un formulaire ?
	a.	process
	b.	data-process
	c.	action
	d.	react
2.	Que signifie la valeur POST de l’attribut method ?
	a.	Les données sont envoyées au serveur par mail.
	b.	Les données sont envoyées sous forme d’une liste clé-valeur dans la query string de l’URL.
	c.	Les données sont signées.
	d.	Les données sont envoyées sous forme d’une liste clé-valeur dans le corps de la requête HTTP.
3.	Quelle est la variable PHP qui reprend les données postées d’un formulaire ?
	a.	$_SERVER
	b.	$_POST
	c.	$_FORM
	d.	$_QUERY
	e.	$_FORM
4.	Quelles sont les principales fonctions de PHP pour exécuter une requête MySQL ?
	a.	db_mysql_connect, db_mysql_query, db_mysql_close
	b.	mysql_connect, mysql_query, mysql_fetch, mysql_close
	c.	php_mysql_query, php_mysql_fetch_array
5.	Selon le standard REST, quel est le verbe HTTP pour un appel de service web avec paramètres retournant des données ?
	a.	GET
	b.	POST
	c.	GETLIST
	d.	HEAD
6.	Quels sont les formats en sortie généralement produits...

Énoncé 2.1 Création de la base de données MySQL

Durée estimative : 30 minutes

La première étape dans la réalisation de notre site dynamique consiste à créer la base de données et sa première table `utilisateur’.

Lancez phpMyAdmin et connectez-vous au serveur local.

Créez un compte d’utilisateur app_teamup.

Créez la base de données teamup avec un classement de caractère insensible à la casse.

Créez la table utilisateur formée des colonnes suivantes :

Colonne	Attributs de la colonne
id_utilisateur	Int, auto_increment, clé primaire
utilisateur_nom	Varchar(100)
utilisateur_login	Varchar(100)
utilisateur_pwd	Varchar(100)
utilisateur_email	Varchar(100)
utilisateur_creation	Datetime, peut être NULL

Insérez dans la table deux enregistrements.

Sélectionnez le contenu de la table

Énoncé 2.2 Saisie d’un utilisateur avec un template HTML simple

Durée estimative : 45 minutes

Les choses sérieuses commencent ! Ce TP met en place le code PHP pour ajouter des utilisateurs dans la base de données. Même s’il ne repose pas sur la logique MVC, la structure du code suit pourtant un découpage entre différentes préoccupations : présentation, traitement, service et accès aux données.

Ajoutez dans le répertoire application un dossier dal (pour Data Access Layer) et dans ce dernier un fichier userdao.php contenant une classe vide UserDAO.

Ajoutez dans le répertoire application un dossier service ainsi qu’un fichier userservice.php contenant une classe vide UserService.

Ajoutez dans le répertoire application/models un fichier userentity.php contenant une classe UserEntity. Définissez dans cette classe un champ pour chaque colonne de la table utilisateur.

Ajoutez dans le répertoire application un fichier adduser.php. Copiez-collez le contenu du fichier views/_layout.php, retirez le contenu de la section <body> tout en conservant la barre de navigation. Vous devez inclure le fichier de configuration config.php.

Installez un formulaire « auto-postant » avec des champs pour saisir chaque colonne de la table utilisateur (sauf la date de création). La clé...

Énoncé 2.3 Affichage d’un utilisateur avec template réactif (responsive)

Durée estimative : 40 minutes

Cet exercice associe PHP et Bootstrap pour présenter la liste des utilisateurs dans un template réactif. Le code PHP est employé pour effectuer une requête de sélection auprès de la base de données et le framework Bootstrap apporte ses composants d’affichage optimisé pour différents équipements (Web, mobile…).

Ajoutez dans la classe UserDAO la méthode getuserlist($filtrenom=null). Comme dans le TP précédent, récupérez la connexion depuis la propriété db_connection. Formez deux requêtes SQL pour sélectionner les enregistrements de la table utilisateur, selon que le paramètre de la méthode $filtrenom est null ou non. S’il est null, la requête sélectionne la totalité des enregistrements de la table utilisateur. Si le paramètre $filtrenom est non null, ajoutez une condition sur la colonne utilisateur_nom dans la requête.

Avant d’utiliser l’opérateur SQL like, vérifiez que le paramètre $filtrenom ne comporte pas de signes pouvant dénaturer la requête SQL et ainsi exposer ce code à des attaques par injection de script SQL. Les signes interdits sont notamment le point-virgule et les apostrophes....

Énoncé 2.4 Gestion des équipes

Durée estimative : 60 minutes

Ce TP est en quelque sorte la combinaison des deux précédents. Il s’agit de réaliser l’interface de gestion des équipes d’utilisateurs en reprenant la même logique de séparation du code PHP en plusieurs couches. Patience, ce travail n’est pas superflu et trouvera très vite son utilité quand le site sera plus étoffé.

Ajoutez dans la base de données les tables equipe(id_equipe,equipe_nom) et utilisateur_equipe(id_equipe,id_utilisateur).

Créez dans Eclipse la classe TeamEntity reprenant chaque colonne de la table equipe sous la forme d’un champ.

Ajoutez au projet deux classes TeamService et TeamDAO comportant les méthodes getteamlist(), addteam($teamentity), editteam($teamentity). Employez des requêtes SELECT, INSERT et UPDATE pour implémenter ces trois méthodes.

Ajoutez les méthodes getuserteam($id_equipe), adduserteam($id_utilisateur, $id_equipe), removeuserteam($id_utilisateur, $id_equipe). Utilisez des requêtes SELECT, INSERT et DELETE pour implémenter ces trois méthodes.

Définissez également la méthode getusernotinteam($id_equipe) qui sélectionne les utilisateurs n’appartenant pas à une équipe.

Dans le répertoire...

Énoncé 2.5 Un service web pour lister les utilisateurs

Durée estimative : 25 minutes

Ce TP et le suivant introduisent un changement assez radical dans l’architecture du site. Jusque-là, toutes les données étaient lues en base au moment de l’exécution du script PHP en charge de la fabrication du flux HTML. Autrement dit, une grille de données est entièrement fabriquée en back-end. Cette approche tout à fait valable reste utilisée par de nombreux sites, mais s’avère contraignante pour implémenter des interfaces utilisateur réactives. L’alternative consiste à déclencher des requêtes depuis le navigateur vers des services web (écrits en PHP) et à présenter dynamiquement les données en tirant parti des possibilités de HTML 5 et de JavaScript.

Dans le répertoire applications/controllers, créez un dossier users et ajoutez-y un fichier userController.php.

Définissez le namespace teamup\Controllers\users, utilisez comfpl\controllers\BaseController. Vous devez y inclure une seule fois le fichier UserEntity.php.

Ajoutez la classe userController qui étend la classe BaseController.

Implémentez une méthode getusersdata($page=null,$limit=null). Cette méthode appelle UserService::getuserlist() pour récupérer les utilisateurs...

Énoncé 2.6 Une page HTML 5 pour afficher les utilisateurs

Durée estimative : 15 minutes

Deuxième partie de la réalisation, voici les étapes pour afficher les utilisateurs dans une page HTML 5 qui consomme le service web getuserlist.

Ajoutez une page musers.php et recopiez le contenu de _layout.php. Éliminez le code de la section <body> en conservant l’affichage de la barre de navigation.

Dans une colonne Bootstrap (c’est-à-dire une balise <div>), insérez un tableau ayant pour identifiant grid. Ce tableau n’a pas de ligne ni de colonne.

Insérez le code JavaScript suivant pour appeler le service web et chargez le tableau au chargement de la page dans le navigateur :

<script> 
var data='<?php FPLGlobal::render_action("users", "user", "getuserlist")?>'; 
var grid; 
 
$(document).ready(function () { 
  grid = $('#grid').grid({ 
  primaryKey: 'id_utilisateur', 
  dataSource: '<?php html::action_href("users" , "user", "getuserlist")?>', 
  uiLibrary: 'bootstrap4', 
  columns: [ 
  { field: 'id_utilisateur', width: 50, title:'ID' }, 
  { field: 'utilisateur_nom',title:'Nom' }, ...

Énoncé 2 : Gestion des utilisateurs