De Patchwork.

Sommaire 1 Introduction 2 Création de l'agent 2.1 Définition de la classe 2.2 Définition du formulaire 2.3 Création du template correspondant 3 Traitement du formulaire 3.1 Validation des données entrées 3.2 Sauvegarde des informations saisies 3.3 Création de la page de confirmation de l'inscription 4 Validation de l'inscription

Introduction

Dans ce nouvel article, nous allons découvrir comment permettre la création et donc l'enregistrement en base d'un nouvel utilisateur, ou d'un nouveau contributeur si vous préférez. Nous allons donc dérouler tout le processus, depuis la saisie de ses informations par l'utilisateur jusqu'à la validation par l'administrateur de l'inscription, en passant par la validation de l'adresse électronique utilisée pour l'inscription.

Le formulaire associé à la création du compte sera basique, puisque pour reprendre la liste des attributs évoqués dans le premier chapitre de ce tutoriel, un utilisateur possède comme attribut:

1. un id unique
2. un nom
3. un prénom
4. un pseudo
5. un mot de passe
6. une adresse email
7. une date de création.

Cet article présentera simplement le développement du formulaire, et la réflexion qui nous mènera en particulier aux nommages des fichiers et donc à la définition des modifications à appliquer à l'architecture de notre application. Pour résumer, le développement d'une fonctionnalité sous Patchwork se réalise en deux étapes nécessaire. Comme vous vous en doutez, il s'agit tout d'abord de créer un agent qui effectuera le traitement relatif à la fonctionnalité désirée, et ensuite de créer le template (modèle) correspondant.

Commencons donc par mettre en place l'agent !

Création de l'agent

Le fonctionnement de Patchwork étant basé sur la notion de comportement "stateless" du protocole HTTP (Hypertext Transfer Protocol). En effet, un serveur WEB distribuant une page à un utilisateur particulier via le protocole HTTP ne conservera aucun souvenir de la requête immédiatement après la fin de celle-ci. Cette notion est reprise dans Patchwork et ainsi, chaque agent, et donc chaque page, se doit de représenter une action (ou requête) réalisée par l'utilisateur de bout en bout. Le nommage des agents suit cette notion d'action, c'est pourquoi je vous propose de construire notre agent d'ajout d'un utilisateur au sein d'un nouveau répertoire: /app/class/agent/user Et à l'intérieur de ce nouveau répertoire agent, créer un fichier new.php, qui contiendra la définition du formulaire ainsi que sa validation et la sauvegarde de l'information envoyée au serveur.

Définition de la classe

Toute première portion de code à mettre en place, la définition de la classe. Je vous propose de créer un fichier appelé registration.php contenu dans un répertoire user/ que vous aurez préalablement à la racine de votre dossier /app/class/agent/. Le code de la définition de la classe est très simple:

<?php
 
class agent_user_registration extends agent_pForm
{
 
}

Ce code minimal ne devrait pas vous étonner ni vous sembler inaccessible, puisqu'il s'agit simplement d'une définition de classe en PHP, qui hérite comme pour le formulaire d'ajout d'un article de la classe pForm (pour Patchwork Form). C'est cette classe pForm, appartenant au Framework, qui nous permet d'utiliser les objets prédéfinissant les types de champs de formulaire les plus utilisés.

Définition du formulaire

Encore une fois, si vous avez bien suivi les premiers articles de ce tutoriel, vous devriez être à même de construire le formulaire par vous-même. En effet, nous allons seulement demander à l'utilisateur de renseigner quatre champs:

1. Son pseudo
2. Son adresse mail
3. Son mot de passe
4. Une confirmation de son mot de passe

Et il n'y a ensuite plus que le bouton de sauvegarde. Vous devez ensuite instancier les différents champs, le champ pseudo étant de type 'text', le champ email, de type 'email', et les deux autres champs, de type 'password'. Spécifiez un type de champ précis permet tout d'abord d'hériter de l'affichage du champ tel qu'il est implémenté dans le framework, et également de récupérer les fonctions de validation automatique déjà implémentées et permettant de vérifier automatiquement la cohérence des entrées du formulaire. Pour instancier un champ, utilisez la fonction add de l'élément $f (le formulaire) de la fonction composeForm($o, $f, $send). Cette fonction s'utilise de la manière suivante:

$f->add('text', 'pseudo');

Cette instruction a instancié dans le formulaire un champ de type texte affublé d'un attribut 'name' égal à 'pseudo'.

La seconde étape est l'attachement de ces champs nouvellement crée au bouton de validation déjà instancié via la fonction send() de cet élément.

$send->attach('pseudo', 'Veuillez renseigner votre pseudo', '');

Si vous vous souvenez, le deuxième argument de cette fonction est un texte qui s'affichera si le champ est laissé vide. C'est à dire que le remplissage de ce champ devient obligatoire à la validation du formulaire dès qu'une chaîne ce caractère quelconque est donnée en deuxième argument. Cette fonction peut posséder autant d'arguments qu'il y a de champ ajouté dans le formulaire, chaque attachement de champ au bouton nécessitant l'apport de 3 arguments.

Si nous le développons pour y instancier et y attacher les champs correspondants aux entrées signifiées ci-dessus, le code est donc le suivant:

<?php
 
class agent_user_registration extends agent_pForm
{
	function composeForm($o, $f, $send)
	{
		$f->add('email', 'email'    );
		$f->add('text',  'pseudo'   );
		$f->add('password', 'password');
		$f->add('password', 'password_confirm');
 
		$send->attach(
			'email', 'Veuillez renseigner votre adresse email', '',
			'pseudo', 'Veuillez renseigner votre pseudo', '',
			'password', 'Veuillez renseigner votre mot de passe', '',
			'password_confirm', 'Veuillez confirmer votre mot de passe', ''
		);
 
		return $o;
	}
}

Création du template correspondant

Ainsi que toute page que nous souhaitons développer en utilisant Patchwork, aucun contenu ne sera affiché si le template correspondant à un agent n'est pas crée. Notre template, appelé registration.ptl et placé dans le répertoire app/public/__/user, va donc être chargé d'afficher les différents champs du formulaire que nous avons instancié dans la fonction composeForm() de l'agent, au paragraphe précédent. Ce code est donc très similaire au premier code de template de formulaire que nous avions développé dans le 3ème article de ce tutoriel:

<!-- AGENT 'header' title='Inscription sur le site' -->
 
<h2>Inscrivez-vous et devenez contributeur!</h2>
 
<!-- AGENT $form -->
	<!-- AGENT $f_pseudo _caption_='Pseudo:' --><br>
	<!-- AGENT $f_email  _caption_='Adresse mail:' --><br>
	<!-- AGENT $f_password _caption_='Nouveau mot de passe:' --><br>
	<!-- AGENT $f_password_confirm _caption_='Confirmer le mot de passe:' --><br>
	<!-- AGENT $f_send -->
<!-- AGENT $form _mode_='close' -->
 
<!-- AGENT 'footer' -->

Comme toujours, nous réalisons l'inclusion des agents 'header' et 'footer' afin de bénéficier du style que nous avons appliqué précédemment à l'application. Ensuite, nous affichons toujours en utilisant la balise d'inclusion d'un Agent les balises de base d'un formulaire et les balises des différents champs que nous avions instanciés.

Le résultat visible que vous devez obtenir si vous vous dirigez à la page localhost/myblog/index.php/user/registration est le suivant:

Traitement du formulaire

Dans cette troisième section de l'article, nous allons traiter notre formulaire afin de le sécuriser et de mettre en place la sauvegarde des données et l'envoi d'un mail à l'adresse que nous as fournis l'utilisateur via le formulaire.

Validation des données entrées

Dans cette partie nous allons aborder un nouveau concept implémenté par le framework, qui est la validation pré-sauvegarde des données entrées dans un formulaire. En effet, les validateurs inclus de base dans les différents widgets de formulaires utilisables par les agents de type pForm ne sont parfois pas suffisants pour réaliser tout le traitement de prévention et de sécurisation des données que nous souhaiterions réaliser.

Pour cela, la classe pForm implémente une fonction nommé formIsOk($f) que vous pouvez surcharger à loisir, et qui sera exécuté avant la fonction save($data) que nous avons déjà rencontrée. Cette fonction de validation formIsOk() nous permet ainsi de signaler à l'utilisateur des erreurs de saisie éventuelles, en stoppant le flux d'exécution de l'agent si besoin.

protected function formIsOk($f)

Comme vous pouvez le constater, la fonction de validation prend en paramètre le formulaire, et nous permet ainsi de récupérer aisément les valeurs des champs et ainsi de les vérifier et de les traiter. Dans notre cas, nous souhaitons simplement vérifier que la confirmation du mot de passe est bien égale au mot de passe saisie, et, le cas échéant, nous laisserons s'exécuter le flux d'instructions. Notre formulaire étant manipulable tel un objet, nous allons donc d'abord récupérer les valeurs des champs qui nous intéressent et les comparer via une boucle conditionnelle simple:

protected function formIsOk($f)
{
   if ($f->getElement('password')->getValue() !== $f->getElement('password_confirm')->getValue())
   {
   }
}

Dans cette boucle conditionnelle, qui s'exécutera SI les valeurs des deux champs ne sont pas équivalentes, nous allons alors instancier un message d'erreur sur notre champ de confirmation du mot de passe, puis nous allons stopper l'exécution de l'agent, via un return false.

protected function formIsOk($f)
{
	if ($f->getElement('password')->getValue() !== $f->getElement('password_confirm')->getValue())
		{
			$f->getElement('password_confirm')->setError('Password and password confirmation must be equal');
 
			return false;
		}
	return true;
}

Dans le cas où les deux champs sont bien identiques, nous souhaitons poursuivre l'exécution de l'agent, pour cela nous allons terminer la fonction par un return true, qui rendra la main au framework pour la suite du traitement

protected function formIsOk($f)
{
   if ($f->getElement('password')->getValue() !== $f->getElement('password_confirm')->getValue())
   {
      $f->getElement('password_confirm')->setError('Password and passwords confirmation must be equal');
 
      return false;
   }
   return true;
}

Et voilà, nous avons maintenant une validation de formulaire plus que correcte, et fonctionnelle.

Sauvegarde des informations saisies

La dernière étape pour que notre formulaire soit totalement fonctionnel est de sauvegarder les informations dans notre base de données. Pour cela, nous allons bien sûr réutiliser la fonction de sauvegarde dédiée, qui est la fonction save($data) que nous allons surcharger. Nous souhaitons bien sûr au passage crypter nos mots de passe, et spécifier la date d'enregistrement de l'utilisateur. Pour rappel, le paramètre $data que prend la fonction save est un tableau qui contient les entrées du formulaire. Ainsi, si nous souhaitons modifier le mot de passe pour le crypter, nous devons modifier la valeur de

$data['password'];

La première instruction à effectuer dans notre fonction de sauvegarde est l'instanciation d'une connexion à la base de données via la fonction DB().

protected function save($data)
{
	$db = DB();
}

Patchwork fournit une fonction prête à l'emploi permettant de crypter les mot de passe selon l'algorithme sha1, un des algorithmes les plus utilisés à ce jour, et y inclut un hash, qui est une part aléatoire qui se trouve concaténé au mot de passe, pour plus de sécurité. La fonction que Patchwork propose se nomme a pour prototype:

public static saltedHash($pwd)

Nous allons donc modifier la valeur du champ $data['password'] en utilisant cette fonction de cryptage via l'instruction suivante:

$data['password'] = patchwork::saltedHash($data['password']);

La suite de la fonction est simplement constituée de la construction de la requête SQL d'ajout d'un nouveau champ dans la table user, afin d'y sauvegarder les données que l'utilisateur nous as fournis. Il nous faut également exécuter cette requête via l'appel à la fonction exec() du driver MDB2. Le code de la fonction de sauvegarde est donc le suivant:

protected function save($data)
{
	$db = DB();
 
	$data['password'] = patchwork::saltedHash($data['password']);
 
	$sql = "INSERT INTO user (email, pseudo, password, created_at)
		VALUES (
			{$db->quote($data['email'])},
			{$db->quote($data['pseudo'])},
			{$db->quote($data['password'])},
			NOW()
		)";
 
        $db->exec($sql);
 
        return 'confirm/registration';	
 
}

Création de la page de confirmation de l'inscription

Vous aurez sûrement noté la dernière instruction de la fonction save($data) que nous venons d'implémenter dans la section précédente:

return 'confirm/registration';

Cette fonction renvoi le flux d'exécution de l'application vers la page 'public/__/confirm/registration.ptl. Or cette page, nous ne l'avons pas encore implémenté, vous devriez donc obtenir, si vous tentez d'exécuter le code précédent, une belle erreur 404 "Page not found", classique dans le cas d'un fichier non crée. Pour remédier à cela, je vous propose de créer le template 'public/__/confirm/registration' et le répertoire 'confirm' qui va avec, et d'injecter dans le fichier de template le code suivant:

<!-- AGENT 'header' title='Consultez votre boîte mail' -->
 
<h2>Demande d'inscription</h2>
 
<p>Un courriel a été envoyé à l'adresse que vous nous avez indiquée.</p>
 
<p>Veuillez cliquer sur le lien présent dans ce mail afin de confirmer votre demande d'inscription.</p>
 
<!-- AGENT 'footer' -->

Si vous prêtez attention au modèle que nous vous proposons, vous noterez l'évocation d'un mail de confirmation de la demande d'inscription. Or nous n'avons pour le moment ni généré ni envoyé d'email à qui que ce soit. C'est donc la résolution de cette problématique que je vous propose dans la section suivante.

Validation de l'inscription

Nous souhaitons maintenant mettre en place un processus nous permettant de valider l'identité de l'utilisateur qui souhaite s'inscrire sur notre blog, et pour cela nous allons mettre en place un mécanisme de validation de l'adresse électronique que l'utilisateur nous a fournis dans le formulaire de création de compte.