##### TP - page de profil ##### Grâce à la page de création de comptes que nous venons de réaliser, un utilisateur peut aisément créer un nouveau compte. Cependant, les coordonnées qu'il entre ne peuvent, pour l'instant, pas être changées. De plus, les autres utilisateurs du forum ne peuvent, eux non plus, pas accéder à ses coordonnées. C'est pourquoi une page de profil s'avère indispensable. Vous allez donc l'élaborer au travers d'un travail pratique. Voici les résultat que vous obtiendrez : .. image:: tp4/1.png Lorsque la largeur de l'écran devient trop petite pour afficher tout le texte sur une même ligne, l'avatar change de position. Il s'affiche alors au-dessus des informations sur l'utilisateur : .. image:: tp4/3.png :height: 10000 px :width: 650 px :scale: 50% La page de profil est accessible, lorsqu'un utilisateur est connecté, par un clic sur son nom d'utilisateur : .. image:: tp4/15.png :height: 10000 px :width: 250 px :scale: 50% Si un utilisateur connecté visite son profil, il aura accès à la modification de ses coordonnées qui remplaceront le bouton "envoyer un courriel" : .. image:: tp4/4.png :height: 10000 px :width: 500 px :scale: 60% Si l'utilisateur clique sur les boutons ``coordonnées`` ou ``mot de passe``, des formulaires pour modifier ces données s'affichent. Pour les coordonnées : .. image:: tp4/5.png Pour le mot de passe : .. image:: tp4/6.png Lorsque la fenêtre est plus petite, ces formulaires se comportent à la manière de celui de la page ``nouveau_compte``. En cliquant sur le bouton ``enregistrer``, les données, si elles sont validées (de la même manière que sur le formulaire de ``nouveau_compte``), sont mises à jour dans la base de données et modifiées directement sur la page web (aucune actualisation n'est nécessaire). S'affiche alors un message de confirmation : .. image:: tp4/11.png :height: 10000 px :width: 650 px :scale: 50% Dans le cas de la modification du mot de passe, il faut vérifier si l'ancien mot de passe correspond bien à celui qui se trouve dans la base de données. Si c'est le cas et que le nouveau mot de passe est validé, le mot de passe est modifié dans la base de données et un message de confirmation apparaît : .. image:: tp4/12.png :height: 10000 px :width: 650 px :scale: 50% Lors de la création du compte d'utilisateur, l'application avait attribué à la colonne ``avatar`` de la table ``users`` de la base de données un nombre au hasard entre 1 et 100. Ce nombre correspond au numéro de l'avatar qui est attribué à l'utilisateur. Si l'utilisateur souhaite changer son avatar, il peut donc en choisir un autre parmi 100 choix en cliquant sur le bouton ``avatar`` : .. image:: tp4/14.png Un clic sur une image change l'avatar. Cette modification est enregistrée dans la base de données et apparaît directement en grand à la gauche des informations sur le profil. Pistes ===== - Les formulaires pour modifier les coodronnées et le mot de passe peuvent être directement repris de la page de création de compte que nous avons précédemment créé. De même, la vérification de ce formulaire peut être faite avec le fichier ``./static/js/verification_form.js`` - Tous les avatars sont disponibles à partir de `ce lien`_. Dans ce dossier compressé, vous trouverez deux dossiers, ``avatars_grands`` et ``avatars_petits``. Il est conseillé d'utiliser ``avatars_petits`` pour le choix les avatars, afin de minimiser le temps de chargement de la page Correction ===== Code côté serveur ----- Nous créons tout d'abord une nouvelle route dans ``routes.js`` : .. captionup:: ./serveur/routes.js .. code-block:: javascript app.get(/^\/profil_([a-z0-9]{4,10})/i, function(req, res) { sql.profil(mysql, sql, req.params[0], function(result) { res.render('profil.ejs', { nom_utilisateur: session.session_active(req.session, req), profil : result }); }); }); .. note:: Ici, l'adresse de la page ressemblera à ``http://domaine.com/profil_nomdutilisateur``. Pour récupérer le nom d'utilisateur sans utiliser d'expression régulière, il est aussi possible d'entrer l'instruction suivante : .. code-block:: javascript app.get('/profil/:nom_utilisateur', function(req, res) { var nom_utilisateur = req.params.nom_utilisateur; // ... }); Cependant, un problème surgirait avec les liens qui se trouvent dans cette page (par exemple, ceux de la barre de navigation). En cliquant sur le bouton ``accueil``, l'utilisateur serait redirigé vers ``http://domaine.com/profil/``, qui ne correspond pas à la page d'accueil. Il faudrait alors insérer dans toutes les balises ```` de cette page l'adresse web complète des liens, ce qui génère une difficulté dans le cas d'un changement de nom de domaine. Ensuite, nous ajoutons quelques événements ``socket`` dans ``socket.js`` : .. captionup:: ./serveur/socket.js .. code-block:: javascript // modifie les coordonnées socket.on('modifier_compte', function(compte) { var requete_sql = '\ UPDATE users SET email = ??, nom = ??, prenom = ?? WHERE nom_utilisateur = ??'; var inserts = [ compte.mail, compte.nom, compte.prenom, compte.utilisateur ]; requete_sql = sql.preparer(mysql, requete_sql, inserts); sql.requete(mysql, sql, requete_sql, function(results) { socket.emit('mod_compte_ok', { mail : compte.mail, nom : compte.nom, prenom : compte.prenom, utilisateur : compte.utilisateur, broadcast : false }); socket.broadcast.emit('mod_compte_ok', { mail : compte.mail, nom : compte.nom, prenom : compte.prenom, utilisateur : compte.utilisateur, broadcast : true }); }); }); // modifie le mot de passe socket.on('modifier_password', function(mod) { var requete_sql = '\ SELECT mot_de_passe \ FROM users \ WHERE nom_utilisateur = ??'; var inserts = [mod.nom_utilisateur]; requete_sql = sql.preparer(mysql, requete_sql, inserts); sql.requete(mysql, sql, requete_sql, function(results) { if (mod.ancien_password == results[0].mot_de_passe) { var requete_sql = '\ UPDATE users \ SET mot_de_passe = ?? \ WHERE nom_utilisateur = ??'; var inserts = [mod.nouveau_password, mod.nom_utilisateur]; requete_sql = sql.preparer(mysql, requete_sql, inserts); sql.requete(mysql, sql, requete_sql); socket.emit('mod_password_ok'); } else { socket.emit('ancien_password_incorrect'); } }); }); // change l'avatar d'un utilisateur socket.on('changement_avatar', function(d) { var requete_sql = 'UPDATE users SET avatar = ? WHERE nom_utilisateur = ??'; var inserts = [d.avatar, d.nom_utilisateur]; requete_sql = sql.preparer(mysql, requete_sql, inserts); sql.requete(mysql, sql, requete_sql); }); Ces instructions permettent d'enregistrer les modifications de l'utilisateur dans la base de données. De plus, le mot de passe est vérifié, et s'il ne correspond pas à celui de la base de données, l'événement ``ancien_password_incorrect`` est émis. Les événements ``mod_compte_ok`` et ``mod_password_ok`` permettentt, quant à eux, d'afficher les alertes informant l'utilisateur que ses coordonnées ont bien été modifiées. Enfin, implémentons la fonction ``profil()`` dans le fichier ``sql.js`` : .. captionup:: ./serveur/sql.js .. code-block:: javascript // retourne toutes les informations pour afficher un profil exports.profil = function(mysql, sql, utilisateur, callback) { var requete_sql = 'SELECT * FROM users WHERE nom_utilisateur = ??'; var inserts = [utilisateur]; requete_sql = sql.preparer(mysql, requete_sql, inserts); sql.requete(mysql, sql, requete_sql, function(results) { callback(results[0]); }); } Code côté client ----- HTML et EJS ..... Commençons par le fichier EJS principal, ``./views/profil.ejs`` : .. captionup:: ./views/profil.ejs .. code-block:: guess <% if (!profil) { %> <% } else { %> <% include balise_head %> <% include barre_navigation %>

Profil
<% include form_profil %>
<% } %> .. note:: Ce code contient quelques balises ``