Création d’un espace utilisateur en PHP avec Symfony2

Introduction

Dans cet article, nous allons apprendre à créer un espace utilisateur pour notre site. Les outils utilisés pour ce tutoriel sont : un IDE (ici, NetBeans), Wamp, Symfony2, le template Twig et phpMyAdmin.

Pour commencer, nous allons nous renseigner sur l’utilisation du template Twig et de phpMyAdmin. Ensuite, nous allons créer notre base de données qui contiendra les utilisateurs de notre site. Pour finir, nous développerons les codes qui apporteront des fonctionnalités à notre site et qui permettront d’interagir avec notre base.

Pré-requis pour ce billet :

• Posséder un IDE adapté au développement Web et savoir créer un projet Symfony2
• Quelques connaissances de bases dans MySQL
• Quelques connaissances de bases dans les langages PHP, Css et HTML

phpMyAdmin/Template Twig : Quésako ?

PhpMyAdmin est une interface Web qui vous permet de gérer très facilement des bases de données se trouvant sur votre serveur PHP. Cette application est très simple d’utilisation puisqu’elle s’adapte au niveau de l’utilisateur. En effet, il n’est pas indispensable de maîtriser sur le bout des doigts le domaine des bases de données et des requêtes MySQL. PhpMyAdmin vous assiste dans toutes les étapes lors de la création/modification de bases. Vous pouvez directement taper vos requêtes MySQL ou utiliser l’interface graphique (modification de données en utilisant des formulaires à remplir, suppression de champs par simple clic, …).

De plus, phpMyAdmin est installé par défaut lors du déploiement de Wamp sur votre machine.

Pour plus d’informations, veuillez vous référer au site officiel de phpMyAdmin.

Twig est un moteur de template PHP déjà présent dans le framework de Symfony. Il permet de créer un « squelette » de votre site qui sera appliqué à plusieurs de vos pages grâce au système d’héritage. De plus, il permet de différencier la partie « fonctionnement » de votre site (le PHP) de la partie « mise en page » (le couple HTML/CSS). De ce fait, une bonne utilisation de ce template doit vous permettre de ne plus avoir de code HTML dans votre code PHP. On peut donc dire que Twig est un plus car il permet d’avoir un code plus clair et compréhensible, ce qui est important si vous travaillez avec des éléments externes tels que des graphistes.

Si vous souhaitez obtenir de plus amples informations sur ce template, voici le site officiel.

Implémentation de Twig dans votre IDE (NetBeans).

Twig n’est pas présent dans NetBeans par défaut. Tout d’abord, vous devez le télécharger sur ce lien. Pour l’implémenter, il vous suffit de cliquer, dans le menu horizontal de NetBeans, sur « Tools » puis « Plugins ». Sur la nouvelle fenêtre, allez dans l’onglet « Downloaded » puis cliquez sur « Add Plugins ». Sélectionnez le fichier que vous venez de télécharger et l’installation se lancera. Twig est maintenant implémenter dans votre IDE.

Du côté de la base de données

Création de la table User.

Cette table contiendra tous les utilisateurs, ainsi que leurs informations, qui pourront se connecter à notre site. Pour la créer, il est indispensable de créer une base de données pour la stocker.

Pour accéder à phpMyAdmin, lancez Wamp et faites un clic-droit sur l’icône de Wamp. Ensuite, cliquez sur « phpMyAdmin ».

La page principale de phpMyAdmin s’ouvrira dans le navigateur internet que vous avez spécifié lors de l’installation de Wamp.

Pour créer la base de données, cliquez sur l’onglet « Base de données » : il ne vous reste plus qu’à la nommer.

Lorsqu’elle est créée, sélectionnez la. Une fenêtre apparaitra en vous proposant de créer une table, qui sera associer à cette même base, et de donner son nombre de colonnes. Chaque utilisateur, qui sera stocké dans notre table, possédera sept champs :

1. Un id : élément unique et indispensable qui permet d’enregistrer et d’identifier de façon sure notre utilisateur. En effet, il ne peut y avoir deux fois le même id dans notre table. Ce sera la clé primaire de notre table.
2. Un Prénom : ce sera le Prénom de notre utilisateur. Il ne peut pas être utilisé comme clé primaire car plusieurs utilisateurs peuvent avoir le même Prénom.
3. Un Nom : ce sera le Nom de notre utilisateur.Tout comme pour le Prénom, on ne peut pas l’utiliser comme clé primaire car plusieurs utilisateurs peuvent posséder le même Nom.
4. Une Date de Naissance : ce sera la date de naissance de notre utilisateur.
5. Un Sexe : ce sera le sexe de l’utilisateur.
6. Un email : ce sera l’email associé à notre utilisateur. Ce sera grâce au couple email/mot de passe que l’utilisateur pourra se connecter au site.
7. Un Password : ce sera le mot de passe associé à l’utilisateur.

Voila la structure finale de notre table « User » :

Les scripts PHP et l’affichage HTML

Pour pouvoir gérer nos utilisateurs (s’enregistrer ou se connecter), nous allons créer deux formulaires simples :

• Formulaire pour l’ajout d’un utilisateur

<body>

<h1>Ici, vous pouvez ajouter un utilisateur à votre site :</h1>

<form method=POST ACTION="{{ path('lolokaiarticleBundle_adduser') }}">

<p><label for="firstname">Pr&amp;eacute;nom : </label><input type=text name="firstname" required></br></p>

<p><label for="lastname">Nom : </label><input type=text name="lastname" required></br></p>

<p><label for="date_birth">Date de naissance : </label><input type=text name="jour_birth" maxlength="2" size="2" onKeypress="return valid_birth(event);" required>/<input type=text name="mois_birth" maxlength="2" size="2" onKeypress="return valid_birth(event);" required>/<input type=text name="année_birth" maxlength="4" size="4" onKeypress="return valid_birth(event);" required></br></p>

<p><label for="sex">Sexe : </label>

Homme : <INPUT type=radio name="sex" value="H" checked="checked">

Femme : <INPUT type=radio name="sex" value="F"></p>

<p><label for="email">Email : </label><input type=text name="email" required></br></p>

<p><label for="password">Password : </label><input type=password name="password" required></br></p>

<p><label for="confirmpassword">Confirmer le Password : </label><input type=password name="confirmpassword" required></br></p>

<input type="submit" value="Submit">

</form>

<br />

{{error}}

<script type="text/javascript">

function valid_birth(evt) {

var keyCode = evt.which ? evt.which : evt.keyCode;

var interdit = 'éèàAZERTYUIOPMLKJHGFDSQWXCVNBazertyuiopqsdfghjklmwxcvbn^âêûîô&amp;"~#{([-|`_\'=^@)]°+-.*/,?<>;:/!§¨$£¤*µ%²';

if (interdit.indexOf(String.fromCharCode(keyCode)) >= 0) {

return false;

}

}

</script>

</body>

• Formulaire pour se connecter avec un utilisateur existant

<body>

<h1>C'est ici que l'utilisateur peut se connecter : </h1>

<form method=POST ACTION="{{ path('lolokaiarticleBundle_resultlogin') }}">

<p><label for="email">Email : </label><input type=text name="email" required></br></p>

<p><label for="password">Password : </label><input type=password name="password" required></br></p>

<input type="submit" value="Submit">

</form>

<br />

{{error}}

</body>

Ajout d’un nouvel utilisateur

Pour l’ajout d’un nouvel utilisateur, il nous suffit de récupérer les valeurs de chaque champ de notre formulaire HTML directement dans notre contrôleur PHP. Avant toute chose, nous allons récupérer toutes les adresses mails contenues dans notre table pour ensuite faire des tests de disponibilités d’adresses.

//On récupère tout d'abord tous les emails contenus dans notre base pour ensuite les tester
$tableauemail = array();
$compteuremail = 0;

//// on se connecte notre base de données
$db = mysql_connect('localhost', 'root', 'root');

// on sélectionne la base
mysql_select_db('lolokai',$db);

$sqlemail = "SELECT `email` FROM `user`";

$reqemail = mysql_query($sqlemail) or die('Erreur SQL !<br>'.$sqlemail.'<br>'.mysql_error());

while($data = mysql_fetch_assoc($reqemail))
{
$tableauemail[$compteuremail] = $data['email'];
$compteuremail++;
}

On récupère chaque champ de notre formulaire qui a été envoyé dans la requête POST et on effectue quelques tests indispensables :

• Vérification que les deux mots de passes (champs « Password » et « Confirmer le Password ») sont identiques : Si ce sont les mêmes, on continue les tests. Dans le cas contraire, on ré affiche le formulaire avec un message indiquant l’erreur à l’utilisateur.

if($password != $confirmpasword ){
$message_erreur = "Vos deux mots de passe ne sont pas identiques. La création de l'utilisateur ne s'est donc pas faite.";
return $this->render('lolokaiarticleBundle:Default:register.html.twig', array('error' => $message_erreur));
}

• Vérification que l’email est disponible (champ « email ») : S’il est disponible (l’email n’est pas déjà présent dans notre table), on continue les tests. Dans le cas contraire, on ré-affiche le formulaire avec un message indiquant l’erreur à l’utilisateur.

elseif(in_array($email, $tableauemail)){
$message_erreur = "Cet email est déja présent dans notre base de données. Veuillez en changer.";
return $this->render('lolokaiarticleBundle:Default:register.html.twig', array('error' => $message_erreur));
}

• Vérificatin que l’email possède une syntaxe valide (champ « email ») : Si la syntaxe est valide, on enregistre l’utilisateur dans notre table « User ». Dans le cas contraire, on ré-affiche le formulaire avec un message indiquant l’erreur à l’utilisateur.

elseif(!filter_var($email, FILTER_VALIDATE_EMAIL))
{
$message_erreur = "Cet email n'est pas valide.";
return $this->render('lolokaiarticleBundle:Default:register.html.twig', array('error' => $message_erreur));
}
else {

// on crée la requête SQL
$sql = "INSERT INTO `user`(`firstname`, `lastname`, `date_birth`, `sex`, `email`, `password`) VALUES ('$firstname', '$lastname', '$date_birth', '$sex', '$email', '$password')";

// on envoie la requête
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

// on ferme la connexion à mysql
mysql_close();
$message_erreur = "Votre utilisateur a était enregistrer avec succès.";
return $this->render('lolokaiarticleBundle:Default:register.html.twig', array('error' => $message_erreur));
}

Connexion d’un utilisateur.

En ce qui concerne la connexion d’un utilisateur, nous allons récupérer les données des deux champs (« email » et « password ») de notre formulaire de connexion. Tout comme pour l’enregistrement d’un nouvel utilisateur, nous allons, tout d’abord, faire une requête dans notre base de données qui stockera tous les emails présents dans notre table « User ».

Après avoir récupéré les champs de notre formulaire, nous effectuons deux tests :

1. Vérification que l’email entré par l’utilisateur existe : Si cet email est associé à un compte, on passe au test suivant. Dans le cas contraire, on ré-affiche le formulaire avec un message indiquant l’erreur à l’utilisateur.

1. Vérification que le mot de passe tapé par l’utilisateur est associé à cet email : On fait une requête qui récupère le mot de passe associé à l’email entré par l’utilisateur. Ensuite, on compare ce mot de passe avec celui entré par l’utilisateur. S’ils sont identiques, on fait un « $session = $this->get(« session »); » qui récupéra l’objet de la session qui est en cours et qui vous permettra, par la suite, de stocker vos variables de session. Sinon, on ré affiche le formulaire avec un message indiquant l’erreur à l’utilisateur.

if(in_array($email, $tableauemail)){
$sqlmdp = "SELECT `password` FROM `user` WHERE `email` = '$email'";
$reqmdp = mysql_query($sqlmdp) or die('Erreur SQL !<br>'.$sqlmdp.'<br>'.mysql_error());
$tableaumdp = array();
$compteurmdp = 0;
while($datamdp = mysql_fetch_assoc($reqmdp))
{
$tableaumdp[$compteurmdp] = $datamdp['password'];
$compteurmdp++;
}
if ($tableaumdp[0] == $password){
mysql_close();
return $this->render('lolokaiarticleBundle:Default:index.html.twig');
}
else{
mysql_close();
$message_erreur = "Votre couple login/password n'est pas bon.";
return $this->render('lolokaiarticleBundle:Default:login.html.twig', array('error' => $message_erreur));
}
}
else{
$message_erreur = "Cette adresse email n'est associé à aucun compte.";
return $this->render('lolokaiarticleBundle:Default:login.html.twig', array('error' => $message_erreur));
}

Conclusion

Cet article est maintenant terminé. Nous avons vu comment créer un espace utilisateur en PHP. Pour cela, nous avons du créer une base de données (« lolokai ») qui contient notre table « User », table où tous nos utilisateurs, ainsi que leurs informations, sont stockés. Ensuite, nous avons créer deux formulaires : le premier nous sert à ajouter un utilisateur alors que le second, nous permet de nous connecter au site à l’aide d’un utilisateur déjà existant. Vous pouvez maintenant enregistrer des utilisateurs qui auront accès à des pages ou à du contenu spécifiques de votre site.

Vous pouvez télécharger mon contrôleur en : Cliquant ici.

Si vous avez la moindre question ou remarque, n’hésiter pas. Je serai ravi d’y répondre.