diff options
Diffstat (limited to 'demos/blog-tutorial/protected/pages/Day3')
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/Auth.page | 106 | ||||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/CreateAdminUser.page | 159 | ||||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/CreateEditUser.page | 199 | ||||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/CreateLoginUser.page | 161 | ||||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/CreateNewUser.page | 212 | ||||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/Overview.page | 42 | ||||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/directories.gif | bin | 0 -> 10329 bytes | |||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/output.gif | bin | 0 -> 10006 bytes | |||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/output2.gif | bin | 0 -> 9222 bytes | |||
-rwxr-xr-x | demos/blog-tutorial/protected/pages/Day3/fr/output3.gif | bin | 0 -> 9464 bytes |
10 files changed, 879 insertions, 0 deletions
diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/Auth.page b/demos/blog-tutorial/protected/pages/Day3/fr/Auth.page new file mode 100755 index 00000000..0cced90b --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/Auth.page @@ -0,0 +1,106 @@ +<com:TContent ID="Main">
+
+<h1>Authentification et Autorisation</h1>
+
+
+<p>
+Avant que nous n'implémentions la gestion des utilisateurs, nous devons activer les modules <a href="http://www.pradosoft.com/demos/quickstart/index.php?page=Advanced.Auth">authentification et autorisation</a>.
+</p>
+
+
+<p>
+Nous ajoutons deux nouveaux modules à notre fichier de configuration de l'application.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<modules>
+ ...modules TDataSourceConfig et TActiveRecordConfig ...
+
+ <module id="auth"
+ class="System.Security.TAuthManager"
+ UserManager="users"
+ LoginPage="users.LoginUser" />
+
+ <module id="users"
+ class="System.Security.TDbUserManager"
+ UserClass="Application.BlogUser" />
+</modules>
+</com:TTextHighlighter>
+
+<p>
+Le module <a href="http://www.pradosoft.com/docs/classdoc/TAuthManager">TAuthManager</a> gère le processus d'authentification et d'autorisation. Il utilise le module <tt>users</tt> comme gestionnaire d'utilisateur (voir ci-après). En spécifiant la propriété <tt>LoginPage</tt>, nous indiquons au module d'authentification de rediriger vers la page <tt>LoginUser</tt> quand il est nécessaire de s'authentifier. Nous décrirons comment créer la page <tt>LoginUser</tt> ci-après.
+</p>
+
+<p>
+Le module <tt>user</tt> est une classe de type <a href="http://www.pradosoft.com/docs/classdoc/TDbUserManager">TDbUserManager</a> qui est responsable de la vérification et de la validation des utilisateurs et qui enregistre dans une session PHP les données utilisateurs. La propriété <tt>UserClass</tt> est initialisée comme étant de type <tt>Application.BlogUser</tt>, ceci indique au module <tt>user</tt> de chercher une classe <tt>BlogUser</tt> dans le dossier <tt>protected</tt> (rappellez-vous que l'alias <tt>Application</tt> fait référence au dossier <tt>protected</tt>) et d'utiliser cette classe pour conserver les données utilisateurs dans une session.
+Le module <tt>user</tt> est une classe de type <a href="http://www.pradosoft.com/docs/classdoc/TDbUserManager">TDbUserManager</a> qui est responsable de la vérification et de la validation des utilisateurs et qui enregistre dans une session PHP les données utilisateurs. La propriété <tt>UserClass</tt> est initialisée comme étant de type <tt>Application.BlogUser</tt>, ceci indique au module <tt>user</tt> de chercher une classe <tt>BlogUser</tt> dans le dossier <tt>protected</tt> (rappellez-vous que l'alias <tt>Application</tt> fait référence au dossier <tt>protected</tt>) et d'utilisez cette classe pour conserver les données utilisateurs dans une session.
+</p>
+
+<p>
+Comme vous pourrez le constater dans les sections suivantes, dans les différents contrôles et pages, nous pourrons utiliser <tt>$this->User</tt> pour accéder à l'objet qui contient les informations de l'utilisateur actuellement connecté.
+</p>
+
+
+<p>
+Ci-dessous les détails de l'implémentation de la classe <tt>BlogUser</tt>. Remarquez que les <a href="http://www.pradosoft.com/demos/quickstart/index.php?page=Database.ActiveRecord">Active Record</a> sont utilisés pour exécuter une requête. Par exemple, nous utilisons <tt>UserRecord::finder()->findByPk($username)</tt> pour chercher la valeur de <tt>$username</tt> dans la table <tt>users</tt> et ceci par la clé primaire.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="php">
+// Include TDbUserManager.php file which defines TDbUser
+Prado::using('System.Security.TDbUserManager');
+
+/**
+ * La classe BlogUser.
+ * BlogUser représente les données utilisateurs à conserver en session.
+ * L'implémentation par défaut conserve le nom et le rôle de l'utilisateur.
+ */
+class BlogUser extends TDbUser
+{
+ /**
+ * Créer un objet de type BlogUser basé sur le nom de l'utilisateur.
+ * Cette méthode est requise par TDbUser. Cet objet vérifie si l'utilisateur
+ * est bien présent en base de données. Si oui, un objet BlogUser
+ * est créé et initialisé.
+ * @param string le nom de l'utilisateur
+ * @return l'objet BlogUser, null si le nom de l'utilisateur est invalide.
+ */
+ public function createUser($username)
+ {
+ // utilise l'Active Record UserRecord pour chercher l'utilisateur username
+ $userRecord=UserRecord::finder()->findByPk($username);
+ if($userRecord instanceof UserRecord) // si trouvé
+ {
+ $user=new BlogUser($this->Manager);
+ $user->Name=$username; // enregistre le nom de l'utilisateur
+ $user->Roles=($userRecord->role==1?'admin':'user'); // et son rôle
+ $user->IsGuest=false; // l'utilisateur n'est pas un invité
+ return $user;
+ }
+ else
+ return null;
+ }
+
+ /**
+ * Vérifie que le nom d'utilisateur et son mot de passe sont correct.
+ * Cette méthode est requise par TDbUser.
+ * @param string le nom de l'utilisateur
+ * @param string le mot de passe
+ * @return boolean en fonction de la validité de la vérification.
+ */
+ public function validateUser($username,$password)
+ {
+ // utilise l'Active Record UserRecord pour vérifier le nom d'utilisateur couplé au mot de passe.
+ return UserRecord::finder()->findBy_username_AND_password($username,$password)!==null;
+ }
+
+ /**
+ * @return boolean indiquant si l'utilisateur est un administrateur.
+ */
+ public function getIsAdmin()
+ {
+ return $this->isInRole('admin');
+ }
+}
+</com:TTextHighlighter>
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/CreateAdminUser.page b/demos/blog-tutorial/protected/pages/Day3/fr/CreateAdminUser.page new file mode 100755 index 00000000..04571c43 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/CreateAdminUser.page @@ -0,0 +1,159 @@ +<com:TContent ID="Main">
+
+<h1>Création de la page d'administration des utilisateurs <tt>AdminUser</tt></h1>
+
+<p>
+La page <tt>AdminUser</tt> affiche la liste de tous les comptes utilisateurs, ainsi l'administrateur peut effectuer les tâches de maintenance. Par simplification, les tâches administratives pour notre blog seront la mise à jour des utilisateurs et la suppression.
+</p>
+
+
+<p>
+Nous allons lister les utilisateurs dans une table HTML. Chaque ligne correspondra à un compte utilisateur, les colonnes suivantes seront affichées:
+</p>
+
+<ul>
+<li>Pseudo - affiche le pseudo de l'utilisateur. Dans chaque cellule un lien sera affiché qui nous dirigera vers la page <a href="?page=Day3.CreateEditUser">EditUser</a>.</li>
+<li>Email - affiche l'email.</li>
+<li>Administrateur - indique si le compte est celui d'un administrateur.</li>
+<li>Commande - affiche une colonne de bouton "supprimer". En cliquant sur un de ces boutons, la suppression du compte sera effectuée.</li>
+</ul>
+
+<p>
+Nous créons deux fichiers <tt>protected/pages/users/AdminUser.page</tt> et <tt>protected/pages/users/AdminUser.php</tt> qui contiendront respectivement le gabarit et la classe.
+</p>
+
+<h2>Création du gabarit</h2>
+<p>
+Nous allons utiliser un contrôle <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.DataGrid">TDataGrid</a> pour afficher les données. Suivant l'analyse précédente, nous allons configurer quatre colonnes:
+</p>
+
+<ul>
+<li><a href="http://www.pradosoft.com/docs/classdoc/THyperLinkColumn">THyperLinkColumn</a> affiche le pseudo. L'URL sera construite suivant les instructions de la propriété <tt>DataNavigateUrlFormatString</tt>.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TBoundColumn">TBoundColumn</a> affiche l'email.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TCheckBoxColumn">TCheckBoxColumn</a> utilise des cases à cocher pour indiquer si le compte est un compte administrateur.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TButtonColumn">TButtonColumn</a> affiche un bouton "Supprimer".</li>
+</ul>
+
+
+<p>Le gabarit complet est affiché ci-après:</p>
+
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<%@ Title="Mon Blog - Administration des comptes utilisateurs" %>
+
+<com:TContent ID="Main">
+
+<h1>Administration des comptes utilisateurs</h1>
+
+<a href="<%= $this->Service->constructUrl('users.NewUser')%>">Créer un nouvel utilisateur</a>
+<br/>
+
+<com:TDataGrid ID="UserGrid"
+ DataKeyField="username"
+ AutoGenerateColumns="false"
+ OnDeleteCommand="deleteButtonClicked">
+
+ <com:THyperLinkColumn
+ HeaderText="Pseudo"
+ DataTextField="username"
+ DataNavigateUrlField="username">
+ <prop:DataNavigateUrlFormatString>#
+ $this->Service->constructUrl('users.EditUser',array('username'=>{0}))
+ </prop:DataNavigateUrlFormatString>
+ </com:THyperLinkColumn>
+
+ <com:TBoundColumn
+ HeaderText="Email"
+ DataField="email" />
+
+ <com:TCheckBoxColumn
+ HeaderText="Administrateur"
+ DataField="role" />
+
+ <com:TButtonColumn
+ HeaderText="Commande"
+ Text="Supprimer"
+ ButtonType="PushButton"
+ CommandName="delete" />
+
+</com:TDataGrid>
+
+</com:TContent>
+</com:TTextHighlighter>
+
+
+<h2>Création du fichier de classe</h2>
+
+
+<p>
+Dans le gabarit précédent, le bouton <tt>OnDeleteCommand</tt> déclenche l'évènement <tt>deleteButtonClicked()</tt> que nous devons implémenter dans le fichier de classe. De plus, la grille de données doit être renseignée avec les informations utilisateurs lorsque la page est initialisée. Nous écrivons donc notre fichier de classe comme ci-dessous :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="php">
+class AdminUser extends TPage
+{
+ /**
+ * Remplis la grille avec la liste des utilisateurs.
+ * Cette méthode est appelée lors de l'initialisation de la page.
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function onInit($param)
+ {
+ parent::onInit($param);
+ // lit tout les comptes utilisateurs
+ $this->UserGrid->DataSource=UserRecord::finder()->findAll();
+ // et les associes à la grille
+ $this->UserGrid->dataBind();
+ }
+
+ /**
+ * Supprime un compte utilisateur.
+ * Cette méthode répond à l'évènement OnDeleteCommand.
+ * @param mixed sender : celui qui a généré l'évènement
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function deleteButtonClicked($sender,$param)
+ {
+ // récupère l'identifiant du bouton sur lequel on a cliqué
+ $item=$param->Item;
+ // récupère auprès de la grille la clé primaire correspondante à l'identifiant
+ $username=$this->UserGrid->DataKeys[$item->ItemIndex];
+ // supprime le compte utilisateur en utilisant la clé primaire
+ UserRecord::finder()->deleteByPk($username);
+ }
+}
+</com:TTextHighlighter>
+
+<p>
+Dans le code précédent, la méthode <tt>deleteButtonClicked()</tt> est appelée quand on clique sur le bouton "Supprimer". Pour savoir à quelle ligne appartenait le bouton, nous utilisons la propriété <tt>Item.ItemIndex</tt> du paramètre de l'évènement. Avec cet index, nous recherchons quelle est la clé primaire de la ligne grâce à la propriété <tt>DataKeys</tt>.
+Dans le code précédent, la méthode <tt>deleteButtonClicked()</tt> est appelée quand on clique sur le bouton "Supprimer". Pour savoir à quelle ligne appartenait le bouton, nous utilisons la propriété <tt>Item.ItemIndex</tt> du paramètre de l'évènement. Avec cet index, nous recherchons quelle est la clé primaire de la ligne grâce à la propriété <tt>DataKeys</tt>.
+</p>
+
+<com:TipBox>
+Tous les <a href="http://www.pradosoft.com/docs/classdoc/TDataBoundControl">contrôles liés</a> sont basé sur le même modèle. C'est à dire, définition de la propriété <tt>DataSource</tt> pour savoir d'où proviennent les données et appel à la méthode <tt>dataBind()</tt> pour effectivement lier les données au contrôle.
+</com:TipBox>
+
+<h2>Ajout de la vérification des droits d'accès</h2>
+<p>
+Vu que seuls les administrateurs doivent pouvoir accéder à la page <tt>AdminUser</tt>, nous devons modifier notre fichier de configuration de page <tt>protected/pages/users/config.xml</tt>.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+ <authorization>
+ <allow pages="NewUser,AdminUser" roles="admin" />
+ <deny users="?" />
+ </authorization>
+</configuration>
+</com:TTextHighlighter>
+
+<h2>Test</h2>
+<!-- <h2>Testing</h2> -->
+<p>
+Pour tester notre page <tt>AdminUser</tt>, nous naviguons à l'adresse <tt>http://hostname/blog/index.php?page=users.AdminUser</tt>. Il peut vous être demandé de vous connecter en tant qu'administrateur auparavant si ce n'est déjà fait. Le résultat suivant apparaitra.
+</p>
+
+<img src="<%~ output3.gif %>" class="output" />
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/CreateEditUser.page b/demos/blog-tutorial/protected/pages/Day3/fr/CreateEditUser.page new file mode 100755 index 00000000..f83a30f5 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/CreateEditUser.page @@ -0,0 +1,199 @@ +<com:TContent ID="Main">
+
+<h1>Création de la page de mise à jour des utilisateurs <tt>EditUser</tt></h1>
+
+<p>
+La page <tt>EditUser</tt> ressemble beaucoup à la page <a href="?page=Day3.CreateNewUser">NewUser</a>. La différence principale est le fait que lorsque la page <tt>EditUser</tt> est requise, les champs sont renseignés avec les données de l'utilisateur en cours. Une autre différence est que la page <tt>EditUser</tt> est accessible à un utilisateur standard.
+</p>
+
+<p>
+Pour définir quels sont les comptes qui peuvent être modifiés, nous allons utiliser les règles suivantes :
+</p>
+<ul>
+<li>Si l'utilisateur actuel est un administrateur, il peut modifier n'importe quel compte utilisateur en spécifiant le pseudo de l'utilisateur dans l'URL sous la forme ?username='le nom'. Par exemple : <tt>http://hostname/blog/index.php?page=users.EditUser&username=demo</tt>.</li>
+<li>Si l'utilisateur actuel est un administrateur et qu'il n'a pas précisé d'username, ce sont les informations de l'administrateur qui seront mise à jour.</li>
+<li>Si l'utilisateur actuel est un utilisateur standard, seules les données de son compte seront accessibles et il ne pourra pas modifier son rôle.</li>
+</ul>
+
+<p>
+Nous créons deux fichiers <tt>protected/pages/users/EditUser.page</tt> et <tt>protected/pages/users/EditUser.php</tt> qui contiendront respectivement le gabarit et la classe.
+</p>
+
+<h2>Création du gabarit</h2>
+p>
+Comme vous avez pu le deviner, la page <tt>EditUser</tt> est fortement ressemblante à la page <tt>NewUser</tt>. En dehors du titre de la page et du bouton "envoyer", il y a trois différences principales.
+</p>
+
+<ul>
+<li>Le champ de saisie "username" est remplacé par un contrôle <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Label">TLabel</a> vu qu'il n'est pas autorisé de modifier son pseudo;</li>
+<li>Le validateur pour le champ "password" est supprimé. Si l'utilisateur ne fournit pas de mot de passe durant la modification, cela indique que l'utilisateur ne veut pas en changer.</li>
+<li>Le champ "role" est entouré d'un <tt>TControl</tt>, ce qui nous permet de la rendre visible ou invisible en fonction de rôle de l'utilisateur connecté. Si l'utilisateur n'est pas un administrateur, le champ "role" ne sera pas affiché. Les utilisateurs standard n'ont pas le droit de modifier leur rôle.</li>
+</ul>
+
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<%@ Title="Mon blog - Mise à jour utilisateur" %>
+
+<com:TContent ID="Main">
+
+<h1>Mise à jour utilisateur</h1>
+
+<span>Pseudo:</span>
+<com:TLabel ID="Username" />
+
+<br/>
+<span>Mot de passe:</span>
+<br/>
+<com:TTextBox ID="Password" TextMode="Password" />
+
+<br/>
+<span>Confirmation mot de passe:</span>
+<com:TCompareValidator
+ ControlToValidate="Password"
+ ControlToCompare="Password2"
+ ErrorMessage="Différence entre le mot de passe et la confirmation."
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Password2" TextMode="Password" />
+
+<br/>
+<span>Email:</span>
+<com:TRequiredFieldValidator
+ ControlToValidate="Email"
+ ErrorMessage="Veuillez indiquer votre email."
+ Display="Dynamic" />
+<com:TEmailAddressValidator
+ ControlToValidate="Email"
+ ErrorMessage="Vous avez indiqué un mot de passe invalide."
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Email" />
+
+<com:TControl Visible="<%= $this->User->IsAdmin %>">
+<br/>
+<span>Role:</span>
+<br/>
+<com:TDropDownList ID="Role">
+ <com:TListItem Text="Utilisateur standard" Value="0" />
+ <com:TListItem Text="Administrateur" Value="1" />
+</com:TDropDownList>
+</com:TControl>
+
+<br/>
+<span>Prénom:</span>
+<br/>
+<com:TTextBox ID="FirstName" />
+
+<br/>
+<span>Nom:</span>
+<br/>
+<com:TTextBox ID="LastName" />
+
+<br/>
+<com:TButton Text="Enregistrer" OnClick="saveButtonClicked" />
+
+</com:TContent>
+</com:TTextHighlighter>
+
+
+<h2>Création du fichier de classe</h2>
+
+
+<p>
+En suivant les indications du gabarit, nous devons écrire une page de classe qui initialise les champs avec les données de l'utilisateur. De plus, la classe doit implémenter la méthode <tt>saveButtonClicked()</tt> appelée par l'évènement <tt>OnClick</tt> du bouton "Enregistrer".
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="php">
+class EditUser extends TPage
+{
+ /**
+ * Initialise les champs avec les données de l'utilisateur.
+ * Cette méthode est appelée par le framework lorsque la page est initialisée.
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function onInit($param)
+ {
+ parent::onInit($param);
+ if(!$this->IsPostBack) // est-ce que c'est le premier appel à la page
+ {
+ // Lit les informations de l'utilisateur. C'est équivalent à :
+ // $userRecord=$this->getUserRecord();
+ $userRecord=$this->UserRecord;
+
+ // Rempli les contrôles avec les données de l'utilisateur
+ $this->Username->Text=$userRecord->username;
+ $this->Email->Text=$userRecord->email;
+ $this->Role->SelectedValue=$userRecord->role;
+ $this->FirstName->Text=$userRecord->first_name;
+ $this->LastName->Text=$userRecord->last_name;
+ }
+ }
+
+ /**
+ * Enregistre les modifications si tous les validateurs sont Ok.
+ * Cette méthode répond à l'évènement OnClick du bouton "Enregistrer".
+ * @param mixed sender : celui qui a généré l'évènement
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function saveButtonClicked($sender,$param)
+ {
+ if($this->IsValid) // toutes les validations Ok ?
+ {
+ // Lit les informations de l'utilisateur.
+ $userRecord=$this->UserRecord;
+
+ // Enresgistre les valeurs dans les champs de la BDD
+ $userRecord->username=$this->Username->Text;
+ // mets à jour le mot de passe s'il n'est pas vide
+ if(!empty($this->Password->Text))
+ $userRecord->password=$this->Password->Text;
+ $userRecord->email=$this->Email->Text;
+ // mets à jour le rôle si l'utilisateur actuel est un administrateur
+ if($this->User->IsAdmin)
+ $userRecord->role=(int)$this->Role->SelectedValue;
+ $userRecord->first_name=$this->FirstName->Text;
+ $userRecord->last_name=$this->LastName->Text;
+
+ // enregistre les modifications dans la BDD
+ $userRecord->save();
+
+ // redirige vers la page d'accueil
+ $this->Response->redirect($this->Service->DefaultPageUrl);
+ }
+ }
+
+ /**
+ * Retourne l'utilisateur qui doit être mis à jour.
+ * @return UserRecord l'utilisateur qui doit être modifié.
+ * @throws THttpException si l'utilisateur n'existe pas.
+ */
+ protected function getUserRecord()
+ {
+ // l'utilisateur à modifié est l'utilisateur actuellement connecté
+ $username=$this->User->Name;
+ // si la variable GET 'username' n'est pas vide et que l'utilisateur actuel
+ // est un administrateur, nous utilisons la variable GET à la place
+ if($this->User->IsAdmin && $this->Request['username']!==null)
+ $username=$this->Request['username'];
+
+ // lit les données de l'utilisateur par Active Record
+ $userRecord=UserRecord::finder()->findByPk($username);
+ if(!($userRecord instanceof UserRecord))
+ throw new THttpException(500,'Username is invalid.');
+ return $userRecord;
+ }
+}
+</com:TTextHighlighter>
+
+<com:TipBox>
+La méthode <tt>onInit()</tt> est appelée par PRADO lors du <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Pages">cycle de vie de la page</a>. Les autres méthodes couramment surchargées sont <tt>onPreInit()</tt>, <tt>onLoad()</tt> et <tt>onPreRender()</tt>.
+</com:TipBox>
+
+<h2>Test</h2>
+
+<p>
+Pour tester la page <tt>EditUser</tt>, rendons-nous à l'URL <tt>http://hostname/blog/index.php?page=users.EditUser&username=demo</tt>. Il vous sera peut-être demandé de vous authentifier auparavant si vous n'êtes pas déjà connecté. Essayez de vous connecter avec différents comptes (ie: admin/demo, demo/demo) et remarquez comment la page évolue différemment.
+</p>
+
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/CreateLoginUser.page b/demos/blog-tutorial/protected/pages/Day3/fr/CreateLoginUser.page new file mode 100755 index 00000000..07e97b87 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/CreateLoginUser.page @@ -0,0 +1,161 @@ +<com:TContent ID="Main">
+
+<h1>Création de la page <tt>LoginUser</tt></h1>
+
+<p>
+La page <tt>LoginUser</tt> affiche un formulaire et gère l'authentification de l'utilisateur. Comme décrit dans <a href="?page=Day3.Auth">authentification et autorisation</a>, le navigateur est automatiquement redirigé vers la page <tt>LoginUser</tt> quand un utilisateur essaye d'accéder à une page protégée, telle que la page d'administration des utilisateurs.
+</p>
+
+<p>
+Le processus de la page <tt>LoginUser</tt> est similaire à celui de la page <a href="?page=Day1.CreateContact">Contact</a>:
+</p>
+<ol>
+<li>Quand un utilisateur accède à la page <tt>LoginUser</tt>, un formulaire est affiché;</li>
+<li>L'utilisateur remplit les champs, nom de l'utilisateur et mot de passe et clique sur le bouton "envoyer";</li>
+<li>La classe <tt>LoginUser</tt> reçoit l'évènement "login" et lance la séquence d'authentification;</li>
+<li>Si le nom d'utilisateur et le mot de passe sont corrects, le système l'enregistre en session et le redirige vers la page protégée demandée. Dans le cas contraire, un message "mot de passe invalide" est affiché.
+</ol>
+
+<p>
+Nous créons les deux fichiers <tt>protected/pages/users/LoginUser.page</tt> et <tt>protected/pages/users/LoginUser.php</tt> qui enregistre le gabarit et la classe respectivement.
+</p>
+
+<h2>Création du gabarit</h2>
+
+<p>
+Ci-après est affiché le gabarit pour <tt>LoginUser</tt>. Comme vous pouvez le constater, la page contient un champ de saisie pour le nom de l'utilisateur et un autre pour le mot de passe. Le nom de l'utilisateur est requis, ce que le validateur <tt>TRequiredFieldValidator</tt> contrôle. La validité du mot de passe est assurée par le validateur <a href="http://www.pradosoft.com/demos/quickstart/index.php?page=Controls.Validation">TCustomValidator</a> qui fait un appel à la méthode <tt>validateUser()</tt> de la classe. La page contient aussi un bouton "envoyer" qui fait un appel à <tt>loginButtonClicked()</tt> quand il est activé.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<%@ Title="My Blog - Login" %>
+
+<com:TContent ID="Main">
+
+<h1>Connexion</h1>
+
+<span>Votre nom:</span>
+<com:TRequiredFieldValidator
+ ControlToValidate="Username"
+ ErrorMessage="Veuillez indiquer votre nom."
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Username" />
+
+<br/>
+<span>Mot de passe:</span>
+<com:TCustomValidator
+ ControlToValidate="Password"
+ ErrorMessage="vous avez saisi un mot de passe invalide."
+ Display="Dynamic"
+ OnServerValidate="validateUser" />
+<br/>
+<com:TTextBox ID="Password" TextMode="Password" />
+
+<br/>
+<com:TButton Text="Envoyer" OnClick="loginButtonClicked" />
+
+</com:TContent>
+</com:TTextHighlighter>
+
+<h2>Création de la classe</h2>
+
+<p>
+Tout comme la page <a href="?page=Day1.CreateContact">Contact</a>, la page <tt>LoginUser</tt> a aussi besoin d'un fichier de classe qui implémente les évènements générés dans le fichier gabarit. Ici, nous avons besoin de deux méthodes : <tt>validateUser()</tt> et <tt>loginButtonClicked()</tt>. Dans <tt>validateUser()</tt>, nous utilisons le <a href="?page=Day3.Auth">gestionnaire d'authentification</a> pour vérifier si le nom d'utilisateur et le mot de passe sont valides. Si c'est le cas, le gestionnaire d'authentification créé automatiquement une session utilisateur avec les données correspondantes.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="php">
+class LoginUser extends TPage
+{
+ /**
+ * Vérifie la validité du nom d'utilisateur et du mot de passe.
+ * Cette méthode implémente l'évènement <tt>OnServerValidate</tt> du validateur <tt>TCustomValidator</tt>.
+ * @param mixed sender : celui qui a généré l'évènement
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function validateUser($sender,$param)
+ {
+ $authManager=$this->Application->getModule('auth');
+ if(!$authManager->login($this->Username->Text,$this->Password->Text))
+ $param->IsValid=false; // indique au validateur que la validation à échoué
+ }
+
+ /**
+ * Rédirige le navigateur vers l'URL originellement demandée si la validation est Ok.
+ * Cette méthode implémente l'évènement <tt>OnClick</tt> du bouton "envoyer".
+ * @param mixed sender : celui qui a généré l'évènement
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function loginButtonClicked($sender,$param)
+ {
+ if($this->Page->IsValid) // toutes les validations sont ok ?
+ {
+ // récupère l'URL de la page protégée qui avait été demandée par l'utilisateur
+ $url=$this->Application->getModule('auth')->ReturnUrl;
+ if(empty($url)) // l'utilisateur à accéder à la page de connexion directement
+ $url=$this->Service->DefaultPageUrl;
+ $this->Response->redirect($url);
+ }
+ }
+}
+</com:TTextHighlighter>
+
+
+<h2>Test</h2>
+
+<p>
+Nous avons donc créé la page <tt>LoginUser</tt>. Nous pouvons la tester en naviguant à l'URL <tt>http://hostname/blog/index.php?page=users.LoginUser</tt>. Rappellez-vous que la dans la section <a href="?page=Day2.CreateDB">Création de la base</a>, nous avons déjà créé deux comptes utilisateurs (nom d'utilisateur/mot de passe) <tt>admin/demo</tt> et <tt>demo/demo</tt>. Nous pouvons donc les utiliser pour tester notre page de connexion.
+</p>
+
+<img src="<%~ output.gif %>" class="output"/>
+
+<h2>Ajout des liens de connexion/déconnexion à notre gabarit principal</h2>
+<p>
+Pour permettre à l'utilisateur d'accéder directement aux pages de connexion/déconnexion, nous modifions le gabarit principal <tt>MainLayout</tt>. En particulier, nous ajoutons un lien vers la page <tt>LoginUser</tt>. Nous ajoutons aussi un lien "se déconnecter" qui permet à l'utilisateur de se déconnecter.
+</p>
+
+<p>
+Nous modifions le pied de page de notre gabarit principal <tt>MainLayout</tt>. La visibilité des liens vers "se connecter" et "se déconnecter" dépend du statut de l'utilisateur. Si l'utilisateur n'est pas encore connecté, ie: <tt>$this->User->IsGuest</tt> est vrai, alors le lien "se connecter" est visible tandis que le lien "se déconnecter" ne l'est pas et inversement s'il est connecté.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<div id="footer">
+<com:THyperLink Text="Se connecter"
+ NavigateUrl="<%= $this->Service->constructUrl('users.LoginUser') %>"
+ Visible="<%= $this->User->IsGuest %>" />
+
+<com:TLinkButton Text="Se déconnecter"
+ OnClick="logoutButtonClicked"
+ Visible="<%= !$this->User->IsGuest %>" />
+
+<br/>
+<%= PRADO::poweredByPrado() %>
+</div>
+</com:TTextHighlighter>
+
+<p>
+Vu que le lien "se déconnecter" génère l'évènement <tt>OnClick</tt> avec comme nom d'évènement <tt>logoutButtonClicked()</tt>, nous devons modifier le fichier de classe de <tt>MainLayout</tt> comme ci-dessous :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="php">
+class MainLayout extends TTemplateControl
+{
+ /**
+ * Déconnecte un utilisateur.
+ * Cette méthode répond à l'évènement OnClick du lien "se déconnecter".
+ * @param mixed sender : celui qui a généré l'évènement
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function logoutButtonClicked($sender,$param)
+ {
+ $this->Application->getModule('auth')->logout();
+ $url=$this->Service->constructUrl($this->Service->DefaultPage);
+ $this->Response->redirect($url);
+ }
+}
+</com:TTextHighlighter>
+
+<p>
+Maintenant si nous visitons n'importe quelle page de notre blog, nous verrons apparaitre un lien en pied de page. Le lien affiche "se connecter" si nous ne sommes pas connectés et "se déconnecter" dans le cas contraire. Si nous cliquons sur le lien "se déconnecter", nous sommes redirigés vers la page d'accueil et le lien "se connecter" apparait indiquant que nous ne sommes plus connectés.
+</p>
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/CreateNewUser.page b/demos/blog-tutorial/protected/pages/Day3/fr/CreateNewUser.page new file mode 100755 index 00000000..144a686a --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/CreateNewUser.page @@ -0,0 +1,212 @@ +<com:TContent ID="Main">
+
+<h1>Création de la page nouvel utilisateur <tt>NewUser</tt></h1>
+
+<p>
+La page <tt>NewUser</tt> est fournie à l'administrateur pour créer des nouveaux comptes utilisateurs. Elle doit afficher un formulaire qui permet la saisie des informations d'un nouveau compte. Tel que défini dans la <a href="?page=Day2.CreateDB">base de données</a>, nous devons prévoir la saisie des informations suivantes :
+</p>
+
+<ul>
+<li><tt>username</tt> - string, pseudo de l'utilisateur, obligatoire et unique</li>
+<li><tt>email</tt> - string, email, obligatoire et unique</li>
+<li><tt>password</tt> - string, mot de passe, obligatoire</li>
+<li><tt>role</tt> - integer, rôle, obligatoire (0 ou 1)</li>
+<li><tt>first_name</tt> - string, prénom, optionnel</li>
+<li><tt>last_name</tt> - string, nom, optionnel</li>
+</ul>
+
+<p>
+Nous créons deux fichiers, <tt>protected/pages/users/NewUser.page</tt> et <tt>protected/pages/users/NewUser.php</tt> qui contiendront respectivement le gabarit et la classe.
+</p>
+
+<h2>Création du gabarit</h2>
+<p>
+En fonction de l'analyse précédente, nous créons le gabarit comme ci-dessous :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<%@ Title="Mon Blog - Nouvel utilisateur" %>
+
+<com:TContent ID="Main">
+
+<h1>Création nouvel utilisateur</h1>
+
+<span>Pseudo:</span>
+<com:TRequiredFieldValidator
+ ControlToValidate="Username"
+ ErrorMessage="Veuillez indiquer un pseudo."
+ Display="Dynamic" />
+<com:TCustomValidator
+ ControlToValidate="Username"
+ ErrorMessage="Désolé, le pseudo choisi est déjà utilisé. Veuillez en saisir un autre."
+ OnServerValidate="checkUsername"
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Username" />
+
+<br/>
+<span>Mot de passe:</span>
+<com:TRequiredFieldValidator
+ ControlToValidate="Password"
+ ErrorMessage="Veuillez indiquer un mot de passe."
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Password" TextMode="Password" />
+
+<br/>
+<span>Confirmation mot de passe:</span>
+<com:TCompareValidator
+ ControlToValidate="Password"
+ ControlToCompare="Password2"
+ ErrorMessage="Différence entre le mot de passe et la confirmation."
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Password2" TextMode="Password" />
+
+<br/>
+<span>Email:</span>
+<com:TRequiredFieldValidator
+ ControlToValidate="Email"
+ ErrorMessage="Veuillez indiquer votre email."
+ Display="Dynamic" />
+<com:TEmailAddressValidator
+ ControlToValidate="Email"
+ ErrorMessage="Vous avez indiqué un mot de passe invalide."
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Email" />
+
+<br/>
+<span>Rôle:</span>
+<br/>
+<com:TDropDownList ID="Role">
+ <com:TListItem Text="Utilisateur standard" Value="0" />
+ <com:TListItem Text="Administrateur" Value="1" />
+</com:TDropDownList>
+
+<br/>
+<span>Prénom:</span>
+<br/>
+<com:TTextBox ID="FirstName" />
+
+<br/>
+<span>Nom:</span>
+<br/>
+<com:TTextBox ID="LastName" />
+
+<br/>
+<com:TButton Text="Ajouter" OnClick="createButtonClicked" />
+
+</com:TContent>
+</com:TTextHighlighter>
+
+<p>
+Le gabarit est très proche du gabarit de la page <tt>Contact</tt> et de la page <tt>LoginUser</tt>. Il consiste principalement en deux champs de saisie et de plusieurs validateurs. Certains champs de saisie sont associés à plusieurs validateurs vu qu'il est nécessaire de vérifier plusieurs règles.
+</p>
+
+
+<h2>Création du fichier de classe</h2>
+
+<p>
+En fonction du gabarit précédent, nous constatons que nous avons besoin d'une classe qui implémente deux gestionnaires d'évènements : <tt>checkUsername()</tt> (appellé par le premier validateur dans l'évènement <tt>OnServerValidate</tt>) et <tt>createButtonClicked()</tt> (appellé par l'évènement <tt>OnClick</tt> du bouton "create"). ainsi, nous écrirons la classe comme ci-dessous :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="php">
+class NewUser extends TPage
+{
+ /**
+ * Vérifie si le nom d'utilisateur existe dans la base de données.
+ * Cette méthode répond à l'évènement OnServerValidate du validateur username.
+ * @param mixed sender : celui qui a généré l'évènement
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function checkUsername($sender,$param)
+ {
+ // valide si l'utilisateur existe
+ $param->IsValid=UserRecord::finder()->findByPk($this->Username->Text)===null;
+ }
+
+ /**
+ * Créer un nouveau compte utilisateur si tous les champs sont valides.
+ * Cette méthode répond à l'évènement OnClick du bouton "create".
+ * @param mixed sender : celui qui a généré l'évènement
+ * @param mixed param : paramètres de l'évènement
+ */
+ public function createButtonClicked($sender,$param)
+ {
+ if($this->IsValid) // si toutes les validations sont ok
+ {
+ // rempli l'objet UserRecord avec les données saisies
+ $userRecord=new UserRecord;
+ $userRecord->username=$this->Username->Text;
+ $userRecord->password=$this->Password->Text;
+ $userRecord->email=$this->Email->Text;
+ $userRecord->role=(int)$this->Role->SelectedValue;
+ $userRecord->first_name=$this->FirstName->Text;
+ $userRecord->last_name=$this->LastName->Text;
+
+ // l'enregistre dans la base de données par la méthode save de l'Active Record
+ $userRecord->save();
+
+ // redirige l'utilisateur vers la page d'accueil
+ $this->Response->redirect($this->Service->DefaultPageUrl);
+ }
+ }
+}
+</com:TTextHighlighter>
+
+<p>
+Dans le code précédent, l'appel à la méthode <tt>save()</tt> insère un enregistrement dans la table <tt>users</tt>. Cette fonctionnalité est fournie par l'objet <a href="http://www.pradosoft.com/demos/quickstart/?page=Database.ActiveRecord">Active Record</a>.
+</p>
+
+<com:NoteBox>
+Par simplification, le pseudo dans notre blog est sensible à la casse. Dans beaucoup de systèmes, le pseudo est insensible à la casse. Il faudrait donc prévoir un traitement particulier lors de la création d'un nouvel utilisateur, ainsi que dans la partie <a href="?page=Day3.Auth">authentification</a>. De même, les espaces en début et fin de pseudo devrait être supprimés.
+Par simplification, le pseudo dans notre blog est sensible à la casse. Dans beaucoup de systèmes, le pseudo est insensible à la casse. Il faudrait donc prévoir un traitement particulier lors de la création d'un nouvel utilisateur, ainsi que dans la partie <a href="?page=Day3.Auth">authentification</a>. De même les espaces en début et fin de pseudo devrait être supprimés.
+Par simplification, le pseudo dans notre blog est sensible à la casse. Dans beaucoup de systèmes, le pseudo est insensible à la casse. Il faudrait donc prévoir un traitement particulier lors de la création d'un nouvel utilisateur, ainsi que dans la partie <a href="?page=Day3.Auth">authentification</a>. De même les espaces en début et fin de pseudo devrait être supprimés.
+</com:NoteBox>
+
+
+<h2>Test</h2>
+<p>
+Pour tester la page <tt>NewUser</tt>, il suffit de naviguer à l'URL <tt>http://hostname/blog/index.php?page=users.NewUser</tt>. vous devriez voir apparaitre la page suivante. Essayez de saisir différentes informations et remarquez comment les données sont validées. Si toutes les règles sont valides, nous devrions avoir inséré un nouvel utilisateur et être redirigés vers la page d'accueil.
+</p>
+
+<img src="<%~ output2.gif %>" class="output"/>
+
+
+<h2>Ajout de la vérification des droits d'accès</h2>
+<p>
+Durant le test, vous vous êtes peut-être demandé : Est-ce que la page <tt>NewUser</tt> ne devrait être accessible qu'aux administrateurs ? Oui, ceci est dénommé <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Auth">autorisation</a>. Nous allons maintenant décrire comment ajouter cette vérification d'accès à la page <tt>NewUser</tt>.
+</p>
+
+<p>
+Une façon simple serait de vérifier dans le code de la classe si <tt>$this->User->IsAdmin</tt> est vrai, dans le cas contraire, une redirection vers la page de connexion <tt>LoginUser</tt> serait faite.
+</p>
+
+<p>
+PRADO propose une approche complémentaire de vérification des droits. Pour ce faire, nous devons utiliser un fichier de <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.PageConfig">configuration de page</a>. Créer un fichier <tt>protected/pages/users/config.xml</tt> avec le contenu suivant :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+ <authorization>
+ <allow pages="NewUser" roles="admin" />
+ <deny users="?" />
+ </authorization>
+</configuration>
+</com:TTextHighlighter>
+
+<p>
+Le fichier de configuration de page contient les règles d'accès aux pages contenues dans le dossier <tt>protected/pages/users</tt>. Ce fichier indique que la page <tt>NewUser</tt> peut être vue par les utilisateurs dont le rôle est "admin" (concernant le mot "admin" voir <a href="?page=Day3.Auth">BlogUser.createUser()</a>), et toutes les autres pages de ce dossier interdites aux utilisateurs anonymes (<tt>users="?"</tt> signifie utilisateur anonyme).
+</p>
+
+<p>
+Dorénavant, si nous naviguons à la page <tt>NewUser</tt> en tant qu'anonyme, nous serons redirigés vers la page <tt>LoginUser</tt>. Si notre connexion est acceptée, nous serons redirigés en retour vers la page <tt>NewUser</tt>
+</p>
+
+<com:TipBox>
+Le fichier de configuration de pages peut contenir d'autres éléments que les règles d'autorisations. Par exemple, il pourrait inclure un <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Modules">module</a> tout comme nous l'avons fait pour le fichier de <a href="?page=Day2.ConnectDB">configuration de l'application</a>. Dans une application PRADO, chaque dossier de pages peut contenir un fichier de configuration de pages qui s'applique à tous les fichiers du dossier ainsi qu'aux sous dossiers.
+</com:TipBox>
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/Overview.page b/demos/blog-tutorial/protected/pages/Day3/fr/Overview.page new file mode 100755 index 00000000..306434e1 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/Overview.page @@ -0,0 +1,42 @@ +<com:TContent ID="Main">
+
+<h1>Vue d'ensemble de la gestion des utilisateurs</h1>
+<!-- <h1>User Management Overview</h1> -->
+
+<p>
+Dans cette section, nous allons créer les pages concernant la gestion des utilisateurs. En particulier, nous allons implémenter les fonctionnalités suivantes: connexion/déconnexion des utilisateurs, création d'un utilisateur, mise à jour/suppression des utilisateurs.
+</p>
+<!-- <p>
+In this section, we create pages that are related with user management. In particular, we implement these required features: user login/logout, creating new user account and updating/deleting user accounts.
+</p> -->
+
+<p>
+En accord avec les buts à atteindre, nous devons créer les pages suivantes. Pour une meilleure organisation de notre code, ces pages seront créées dans le dossier <tt>protected/pages/users</tt>.
+</p>
+<!-- <p>
+According to the requirements, we need to create the following pages. To better organize our code, these user-related pages will be created under a new directory <tt>protected/pages/users</tt>.
+</p> -->
+
+<ul>
+ <li><tt>LoginUser</tt> affiche le formulaire de connexion.</li>
+ <li><tt>NewUser</tt> pour la création d'un compte utilisateur.</li>
+ <li><tt>EditUser</tt> permet à un utilisateur enregistré de mettre à jour son profil.</li>
+ <li><tt>AdminUser</tt> permet à l'administrateur de gérer les comptes utilisateurs, y compris la gestion des droits d'accès et la suppression d'un compte.</li>
+</ul>
+<!-- <ul>
+ <li><tt>LoginUser</tt> displays a login form to login a user.</li>
+ <li><tt>NewUser</tt> creates a new user account.</li>
+ <li><tt>EditUser</tt> allows a registered user to update his profile.</li>
+ <li><tt>AdminUser</tt> allows the administrator to manage the user accounts, including setting permission level and deleting a user account.</li>
+</ul> -->
+
+<p>
+Après avoir fini cette section, nous devrions obtenir l'arborescence suivante :
+</p>
+<!-- <p>
+After finishing this section, we shall expect to see the following directories and files:
+</p> -->
+
+<img src="<%~ directories.gif %>" class="output" />
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/directories.gif b/demos/blog-tutorial/protected/pages/Day3/fr/directories.gif Binary files differnew file mode 100755 index 00000000..f59fda58 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/directories.gif diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/output.gif b/demos/blog-tutorial/protected/pages/Day3/fr/output.gif Binary files differnew file mode 100755 index 00000000..0d812dd0 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/output.gif diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/output2.gif b/demos/blog-tutorial/protected/pages/Day3/fr/output2.gif Binary files differnew file mode 100755 index 00000000..749255d6 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/output2.gif diff --git a/demos/blog-tutorial/protected/pages/Day3/fr/output3.gif b/demos/blog-tutorial/protected/pages/Day3/fr/output3.gif Binary files differnew file mode 100755 index 00000000..a11ee653 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day3/fr/output3.gif |