DEV Community: Estéban

Objectifs et plan d'action - Real World To-Do App - AdonisJS

Estéban — Sun, 03 Jul 2022 08:30:52 +0000

Créer une Todo list (liste de tâches), c'est la base des projets pour apprendre à programmer ou à manier un nouveau framework !

Mais bien souvent, ces tutoriels ne vont pas assez loin dans les concepts et ne permettent pas de se confronter à la réalité du terrain et à des concepts pourtant si importants !

Mais du coup, encore un tutoriel pour créer une liste de tâches ?

Oui et non ! En effet, on va construire ensemble une liste de tâches. Mais on va la construire avec AdonisJS, un système complet pour développer des applications Node.js !

Objectifs

Dans les grandes lignes, on va réimplémenter ensemble ce projet : To-Do App !

Cependant, on va aussi y ajouter l'authentification de l'utilisation et le lien entre lui et ses tâches. Aussi, on utilisera une base de données pour permettre à l'utilisateur d'avoir accès à ses tâches via différents périphériques.

Ce que tu vas apprendre

Implémentation de l'authentification d'un utilisateur
Ajouter et suppression de tâches
Gestion des tâches en fonction de l'utilisateur connecté
Tests fonctionnels associés

Autant te dire qu'avec tout ça, on va pouvoir passer sur différents concepts du framework et que tu vas apprendre plein de choses même si l'application ne semble pas bien complexe.

Avant d'aller plus loin, il est important d'avoir quelques bases sur l'outil qu'on va utiliser ! Pour cela, je te recommande ma série sur la création d'un petit blog avec AdonisJS.

Plan d'action

Cette série n'a pas pour vocation de te faire créer le design. Par conséquent, je te mets à disposition sur GitHub un template d'un projet AdonisJS avec les vues déjà prêtes ! Il ne te reste qu'à installer les dépendances avec npm ci puis de démarrer le serveur avec npm run dev.

Ensuite, tu peux simplement ouvrir ton navigateur sur localhost:3333 pour visualiser l'application web !

Important et pour se concentrer sur l'essentiel, il n'a été développé qu'une version mobile de l'application web.

Dans la suite

Dans le prochain épisode de la série, on va implémenter ensemble le système authentification avec les tests qui vont avec !

Publiposter avec des pièces jointes identiques

Estéban — Sun, 05 Jun 2022 11:41:30 +0000

Publiposter ses courriers électroniques, c'est-à-dire les envoyer à une liste de destinataires d'un seul clic, c'est très pratique. Mais il arrive souvent que l'on veuille ajouter un document à ce courrier électronique.

Par exemple, vous organisez un évènement et vous devez envoyer le menu sous forme de PDF à l'ensemble des invités. Avec du publipostage simple, il est très simple d'envoyer le courrier à l'ensemble des convives. Mais ajouter le PDF automatiquement pour ne pas envoyer chaque courrier individuellement, c'est une tout autre histoire et c'est ce que nous allons voir maintenant.

Objectif

L'idée de ce tutoriel est de t'apprendre à envoyer des courriers électroniques contenant une ou plusieurs pièces jointes via le système de publipostage de Word.

Pour cela, voici le workflow

Ajout des pièces jointes dans le courrier électronique via Outlook
Écriture du courrier via Word et Excel
Envoie du courrier

C'est aussi simple que cela.

Prérequis

Maitriser le publipostage simple
Outlook, version bureau pour envoyer les courriers
Word, version bureau pour réaliser le publipostage
Excel, version bureau pour gérer la liste des destinataires

Mise en place

Pour mener à bien notre objectif, nous allons utiliser une macro nous permettant d'ajouter nos pièces jointes à chacun de nos courriers juste avant que chacun d'eux parte.

Pour cela, il faut commencer par activer le mode développeur dans Outlook. Pour faire cela Fichier > Options > Personnaliser le ruban et activer le mode développeur, petite case dans la section de droite de la fenêtre.

Activer les macros

Pour qu'Outlook prenne en compte les macros, il est important de les activer.

Pour cela, il te suffit de te rendre dans les options d'Outlook puis dans le Centre de gestion de la confidentialité et enfin dans les Paramètres du Centre de gestion de la confidentialité.... Une fois arrivé dans ce menu, tu trouveras les Paramètres des macros sur la gauche de la fenêtre. Une fois dedans, tu devras activer l'option Activer toutes les macros.

Il t'est possible de changer cette option à tout instant si tu ne souhaites pas laisser activer les macros en permanence.

Création des scripts

Une fois le mode développeur activé, nous allons pouvoir ajouter deux scripts à Outlook pour que tout fonctionne.

Le premier script permet d'ajouter à Outlook le chemin vers les pièces jointes que l'on souhaite ajouter.

Le second script permet de charger les pièces jointes précédemment ajoutée à chacun de nos courriers contenant PUBLIIDEM en début d'objet.

Pour ajouter le premier script, tu dois te rendre dans l'onglet Développeur du ruban puis cliquer sur Visual Basic. Dès lors, une nouvelle fenêtre va apparaitre.

Ajouter les fichiers à joindre

Dans un premier temps, nous allons ajouter le script permettant de charger les pièces jointes.

Pour cela, il faut créer un nouveau module comme le montre l'image ci-dessous :

Puis, en double cliquant sur le module, nommé Module 1, une fenêtre s'ouvre à gauche. Il faut y ajouter le script suivant :



Public publipostagePJ As Variant

Sub setPublipostage()
  On Error Resume Next

  If publipostagePJ(0) = "" Then publipostagePJ = Array("fin", "fin", "fin", "fin", "fin", "fin", "fin", "fin", "fin", "fin")

  While publipostagePJ(i) <> "fin"
    contenu = contenu & vbCr & publipostagePJ(i)
    i = i + 1
  Wend

  If contenu = "" Then contenu = "vide"

  modifier = MsgBox(contenu & vbCr & "Voulez vous modifier les fichiers ?", vbYesNo, "Fichiers paramétrés")

  If modifier = vbYes Then
    For i = 0 To 9
      If i > 0 Then encore = MsgBox("un autre ?", vbYesNo)
        quest:
      If encore <> vbNo Then
        PJ = InputBox("Emplacement du fichier joint au PUBLIPOSTAGE?", _
          "Paramétrage du PUBLIPOSTAGE pour la session", publipostagePJ(i))
      If "" = Dir(PJ, vbNormal) Then GoTo quest
        publipostagePJ(i) = PJ
      Else: Exit For
      End If
      Next i
  End If
  MsgBox "Votre publipostage doit comporter le terme :" & vbCr & "PUBLIIDEM" & vbCr & "dans le sujet." & vbCr & "Celui-ci sera retiré lors de l'envoi"

End Sub

Charger les fichiers dans les courriers

Ensuite, il nous faut insérer le second script qui récupèrera le courrier juste avant qu'il ne parte pour lui ajouter les pièces jointes précédemment définies.

Pour cela, il faut se rendre dans le script ThisOutlookSession.

Puis ajouter le script suivant :



' Permet d'attacher une ou plusieurs pièces jointes à un courrier (même fichiers pour l'ensemble des destinataires)
Private Sub Application_ItemSend(ByVal Item As Object, Cancel As Boolean)


    Dim objFolder As Object
    Dim objFile As Object
    Dim DEST As Recipient
    Dim SMTPTO As String

    If Item.Class = olMail Then
        Dim objCurrentMessage As MailItem
        Set objCurrentMessage = Item
        ' Permet de vérifier que le sujet du courrier contient le terme "PUBLIIDEM"
        If UCase(objCurrentMessage.Subject) Like "*PUBLIIDEM*" Then
            On Error Resume Next
            Dim i As Long
            i = 0
            If publipostagePJ <> "" Then
                ' Permet d'ajouter la même pièce jointe à chacun de ses correspondants
                While publipostagePJ(i) <> "fin"
                    objCurrentMessage.Attachments.Add Source:=publipostagePJ(i)
                    i = i + 1
                Wend
            End If

            'On supprime le terme PUBLIIDEM du sujet et le courrier s'envoie avec l'ensemble des pièces jointes
            objCurrentMessage.Subject = Replace(objCurrentMessage.Subject, "PUBLIIDEM ", "")
        End If
        Set objCurrentMessage = Nothing
    End If
End Sub

Ce script est appelé juste avant l'envoi du courrier, regarde si l'objet contient le mot PUBLIIDEM et ajoute les pièces jointes si c'est le cas puis retire le mot.

Utilisation

Maintenant qu'on a l'ensemble de nos scripts en place, il s'agit de bien les utiliser ! Pour cela, tu dois ouvrir Outlook (pense à le redémarrer après avoir ajouté un script) puis te rendre dans la section Développeur.

Tu trouveras un bouton Macros. En cliquant dessus, tu verras le script permettant d'ajouter les pièces jointes apparaitre.

En cliquant sur le script, tu auras une boîte de dialogue te demandant les documents à ajouter.

Dans cette boîte de dialogue, tu ne dois pas jouter le document directement mais le chemin vers ce dernier. Pour trouver ce dernier, il te suffit de te rendre à ton fichier via l'explorateur de fichier et de copier le chemin vers document à l'aider d'un clic droit. N'oublie pas d'enlever les guillemets

Si le chemin ressemble à cela, il te faut lui retirer les guillemets !



- "C:\Users\****\Downloads\Book1.xlsx"
+ C:\Users\****\Downloads\Book1.xlsx

Ensuite, tu peux effectuer le publipostage normalement en pensant à inclure PUBLIIDEM au début de l'objet de ton message ! Dès lors, l'ensemble des documents ajoutés seront insérés dans le courrier !

Bon publipostage !

Tips

Afin de vérifier que tout fonctionne bien et pour éviter d'envoyer des courriers, tu peux passer en mode hors-ligne depuis Outlook. Tu trouveras alors l'ensemble de tes courriers dans l'Outbox où tu pourras vérifier la présence de la pièce jointe.

À droite de l'image, on a la présence de l'icône permettant de travailler en hors-ligne.

Code source

Office Automation

Crédit

Merci à Patricia D pour ses vidéos et ses scripts qui ont permis la création de ce tutoriel

Gestion des articles - Créer un blog avec Adonis

Estéban — Sat, 21 Aug 2021 10:14:43 +0000

Bonjour,

Bienvenue dans ce tutoriel pour apprendre à utiliser le framework web Adonis ! Si tu souhaites en savoir plus sur Adonis en 1 coup œil, je t'invite à lire cette page.

Dans cette partie, on va voir ensemble comment créer un article, le lier à un utilisateur et afficher sur une page !

Rappel

Ce tutoriel est la cinquième et dernière partie d'une série de tutoriels qui ont pour objectif de te faire découvrir Adonis au travers la création d'un blog.

Pour lire la partie précédente, c'est par là Création et visualisation des articles - Créer un blog avec Adonis

Tu trouveras aussi sur GiHub l'ensemble du code source du projet !

Sommaire

Ce tutoriel est découpé en différente partie pour t'aider et pour éviter d'avoir des articles trop longs où l'on pourrait se perdre !

Nous allons donc voir ensemble :

Finalement, tu auras un blog fonctionnel !

Gestion des articles

Comme le chapitre précédent, nous allons faire ce chapitre sous la forme d'un exercice. Je vais t'indiquer les étapes à suivre, te donner des indications et des ressources qui peuvent t'aider pour aller au bout puis nous ferons la correction ensemble !

Pour rappel, nous souhaitons réaliser une route articles/create qui permet de créer un article. Une fois l'article enregistré, nous devons être redirigé sur la page de l'article. Aussi, nous souhaitons avoir un bouton sur les pages des articles qui permet d'éditer l'article. Une fois l'édition terminée, nous devons être redirigé vers l'article.

Ce qu'il faut faire

La liste suivante est l'ensemble des tâches ordonnées t'indiquant ce qu'il y a à faire pour arriver au bout de cette dernière partie :

Mettre en place le middleware d'authentification
- Il ne faut le placer que sur les routes qui ont besoin d'être protégées
- Un peu d'aide ici et là !
Créer les différentes méthodes de gestions des articles pour le controller
- Il ne faut pas oublier de valider les données entrantes sur le serveur
- Il ne faut pas non plus oublier de gérer les erreurs
- Un indice ici
Créer les différentes vues pour la création et l'édition d'un article

Gestion des articles

Mise en place du middleware d'authentification

Le middleware pour la gestion de l'authentification est fourni par Adonis. Ainsi, il nous suffit de l'ajouter sur les routes que l'on souhaite protéger par l'authentification.

Pour cela, on se rend dans le fichier routes.ts du dossier start :

Route.resource('articles', 'ArticlesController').middleware({
  create: ['auth'],
  store: ['auth'],
  edit: ['auth'],
  update: ['auth'],
})

La route create permet d'afficher le formulaire de création d'un article.

La route store permet de recevoir les informations de la route create pour stocker l'article dans la base de données.

La route edit permet d'afficher le formulaire de l'édition d'un article.

La route update permet de recevoir les informations de la route edit pour mettre à jour un article de la base de données.

Ainsi, il est impossible d'accéder à l'une de ses quatres routes si l'utilisateur n'est pas authentifié.

Création du `validator` pour les articles

Encore une fois, utilisons la commande :

node ace make:validator article

Dans le validator, on va vouloir l'unicité des titres de nos articles comme on l'a indiqué dans notre migration. On va aussi spécifier la taille maximale du titre et du contenu. Ainsi, le validator ressemble à cela :

public schema = schema.create({
  title: schema.string({ trim: true }, [
    rules.maxLength(256),
    rules.unique({ table: 'articles', column: 'title' }),
  ]),
  content: schema.string({ trim: true }, [rules.maxLength(1024)]),
})

Ensuite, on personnalise les messages erreurs et le tour est joué !

public messages = {
  'title.required': 'Le titre est requis',
  'title.string': 'Le titre doit être une chaîne de caractères',
  'title.maxLength': 'Le titre doit être moins de 256 caractères',
  'title.unique': 'Le titre existe déjà',
  'content.required': 'Le contenu est requis',
  'content.string': 'Le contenu doit être une chaîne de caractères',
  'content.maxLength': 'Le contenu doit être moins de 1024 caractères',
}

Pour en savoir plus : unique, validator, messages

Création des méthodes du controller des articles

On va donc devoir créer une méthode pour chacune de ses routes. Il est simple de s'y repérer puisque le nom de la méthode est le nom de la route.

Pour create :

public async create({ view }: HttpContextContract) {
  return view.render('articles/create')
}

Rien de sorcier ici, on crée la page contenant le formulaire de création. Nous allons créer la vue dans la suite.

Pour store, on commence par récupérer les informations dont on a besoin pour créer l'article :

const { user } = auth
const { title, content } = await request.validate(ArticleValidator)

Il est possible de récupérer l'utilisateur grâce au middleware précédemment ajouté. En effet, le middleware vérifie l'identité de la personne et l'ajoute dans nos controllers. On récupère aussi les informations dont on a besoin, validées par le validator !

Ensuite, on crée un article :

const article = await Article.create({
    title,
    content,
    ownerId: user!.id,
  })

Puis on charge le owner avant de rendre la page d'un unique article à l'utilisateur :

await article.load('owner')

return view.render('articles/show', {
  article,
})

Pour finir, la méthode ressemble à cela :

public async store({ request, view, auth }: HttpContextContract) {
  const { user } = auth
  const { title, content } = await request.validate(ArticleValidator)

  const article = await Article.create({
    title,
    content,
    ownerId: user!.id,
  })

  await article.load('owner')

  return view.render('articles/show', {
    article,
  })
}

Pour edit, nous allons aussi rendre une page d'édition de l'article. Cependant, avant cela, nous devons utiliser le paramètre présent dans l'url pour récupérer l'article et ajouter son contenu au formulaire afin que ce dernier soit prérempli ! Si le formulaire est vide, comment savoir ce qu'il faut mettre à jour ?

public async edit({ view, params }: HttpContextContract) {
  const { id } = params

  let article: Article
  try {
    article = await Article.findOrFail(id)
  } catch (error) {
    console.error(error)
    return view.render('errors/not-found')
  }

  return view.render('articles/edit', {
    article,
  })
}

En cas d'erreur pour trouver l'article, et comme on a pu faire sur show, on renvoie l'utilisateur sur une page d'erreur ! Cela permet de gérer le cas où l'utilisateur rendre une mauvaise valeur directement dans l'url !

Update est la méthode la plus complexe mais qui ne contient que des éléments que l'on a pu déjà aborder. Dans un premier temps, on récupère l'article que l'on veut mettre à jour :

const { id } = params

let article: Article
try {
  article = await Article.findOrFail(id)
} catch (error) {
  console.error(error)
  return view.render('errors/not-found')
}

Ensuite, on extrait des données du formulaire en les passant dans le validator :

const { title, content } = await request.validate(ArticleValidator)

Puis on met à jour l'article et on le sauvegarde :

article.title = title
article.content = content

await article.save()

Ensuite, on charge l'utilisateur dans l'article et on le redirige vers la page de visualisation de son article :

await article.load('owner')

return view.render('articles/show', {
  article,
})

Finalement, la méthode complète ressemble à cela :

public async update({ request, view, params }: HttpContextContract) {
  const { id } = params

  let article: Article
  try {
    article = await Article.findOrFail(id)
  } catch (error) {
    console.error(error)
    return view.render('errors/not-found')
  }

  const { title, content } = await request.validate(ArticleValidator)

  article.title = title
  article.content = content

  await article.save()
  await article.load('owner')

  return view.render('articles/show', {
    article,
  })
}

Maintenant que tous nos controllers sont faits, passons à nos 2 vues !

Création des vues pour la gestion des articles

Les pages create et edit vont être très similaires. Elles vont toutes les 2 contenir un formulaire, vide pour la première et avec un article pour la seconde.

Pour create :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Créer un article</title>
</head>
<body>
  <form action="{{ route('ArticlesController.store') }}" method="post">
    <div>
      <label for="title">Titre de l'article</label>
      <input type="text" name="title" id="title" value="{{ flashMessages.get('title', '') }}">
      @if(flashMessages.has('errors.title'))
      <div>{{ flashMessages.get('errors.title') }}</div>
      @endif
    </div>
    <div>
      <label for="content">Contenu de l'article</label>
      <textarea name="content" id="content" cols="30" rows="10" value="{{ flashMessages.get('content', '') }}"></textarea>
      @if(flashMessages.has('errors.content'))
      <div>{{ flashMessages.get('errors.content') }}</div>
      @endif
    </div>
    <button type="submit">Créer</button>
  </form>
</body>
</html>

Comme pour le formulaire d'authentification, on remarque les if qui permettent de conditionner l'affichage d'un message d'erreur par le serveur.

Pour edit :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Créer un article</title>
</head>
<body>
  <form action="{{ route('ArticlesController.update', {id: article.id}) }}?_method=put" method="post">
    <div>
      <label for="title">Titre de l'article</label>
      <input type="text" name="title" id="title" value="{{ flashMessages.get('title', article.title) }}">
      @if(flashMessages.has('errors.title'))
      <div>{{ flashMessages.get('errors.title') }}</div>
      @endif
    </div>
    <div>
      <label for="content">Contenu de l'article</label>
      <textarea name="content" id="content" cols="30" rows="10">{{ flashMessages.get('content', article.content) }}</textarea>
      @if(flashMessages.has('errors.content'))
      <div>{{ flashMessages.get('errors.content') }}</div>
      @endif
    </div>
    <button type="submit">Modifier</button>
  </form>
</body>
</html>

Il y a tout de même quelques subtilités dans ce formulaire. Tout d'avoir cela :

{{ flashMessages.get('content', article.content) }}

Cela permet d'afficher le contenu d'un message flash s'il existe, sinon, le contenu de l'article. Ainsi, lorsque la page est chargée, le message flash est vide donc le contenu de l'article va venir remplir le formulaire. Mais supposons que l'utilisateur modifie des informations mais que ces dernières soient rejetées par le validator, alors il retrouvera dans son formulaire les données qu'il avait saisi et non les données initiales de l'article !

Ensuite, pour mettre à jour un article, il est obligatoire d'utiliser les verbes PUT ou PATCH. Cependant, les navigateurs ne les prennent pas en compte. Ainsi, on utilise ce petit tricks pour que cela fonctionne :

<form action="{{ route('ArticlesController.update', {id: article.id}) }}?_method=put" method="post">

La documentation explique très bien cela ! Et pour que cela soit fonctionnel, il faut se rendre dans le fichier app.ts présent dans config et passer la clé allowMethodSpoofing à true !

Et enfin, nous allons ajouter un lien de modification de l'article lorsque l'utilisateur est connecté dans la vue show.edge :

@if(auth.isLoggedIn)
  <a href="{{ route('ArticlesController.edit', {id: article.id}) }}">Editer l'article</a>
@endif

Pour en savoir plus : create, save, load, spoofing, isLoggedIn

Bonus

La page index.edge dans le dossier resources/views ne nous sert pas. Alors on peut supprimer le fichier et dans nos routes, nous allons la rediriger vers nos articles comme cela :

Route.get('/', async ({ response }) => {
  return response.redirect('/articles')
})

Si l'on se rend sur http://localhost:3333/, on est alors redirigé vers http://localhost:3333/articles !

Sur notre page index.edge dans le dossier resources/views/articles, il est possible de mettre un bouton de création d'un article uniquement lorsque l'utilisateur est connecté ! En effet, même si la route est protégée, on ne souhaite pas que tous nos lecteurs voit un bouton de création d'articles alors que l'action n'est pas possible pour eux. Ajoutons cela à notre fichier :

@if(auth.isLoggedIn)
  <a href="{{ route('ArticlesController.create') }}">Créer un article</a>
@endif

Et voilà, le tour est joué. Le lien ne va apparait que lorsque l'utilisateur est connecté grâce à la condition !

Conclusion

Et voilà pour cette cinquième et dernière partie. On a vu plus en détail la création et la gestion de pages protégées par un middleware.

N'hésite pas à commenter si tu as des questions, si ça t'a plus ou même pour me faire des retours !

Et tu peux aussi me retrouver sur Twitter ou sur LinkedIn !

Notre blog est maintenant terminé ! J'espère que ça t'a plus. N'hésite pas à commenter pour me dire ce que tu as pensé de la série !

À bientôt pour de nouveaux tutoriels !

Possibles évolutions

Je n'allais quand même pas te laisser sans un peu de choses à faire. Voici une liste d'amélioration pour ce blog qui vont te permettre de progresser dans la maitrise du framework :

Mettre en place un draft mode.
- Pour cela, on peut ajouter une propriété à nos articles nommée isPublished
- Si cette propriété est à false, alors l'article ne sera pas disponible pour les utilisateurs non authentifiés. On utilisera alors un filtre si l'utilisateur n'est pas login. Un peu d'aide ici et là !
- Si la propriété est à true, alors l'article est visible.
- Lors de l'édition et de la création, on peut avoir la possibilité de changer cela via une checkbox.
Mettre des images aux articles
- Pour cela, tu peux utiliser cela !
Ajouter du style à ton blog avec un peu de CSS
- Je te conseille alors de te renseigner sur le module de gestion des assets de Adonis
On peut créer une page de profil pour l'utilisateur connecté et lui permettre de voir l'ensemble des articles qu'il a écrit !
- Cela pourrait t'aider !
Il est aussi possible de se dire que l'on peut créer une page où les utilisateurs peuvent se connecter et créer des articles, comme sur medium. Mais il ne faudrait alors pas
Et pour les plus motivé, on peut même imaginer créer un blog
- Les lecteurs entre un pseudo, un message et publie le commentaire
- On peut même imaginer que les lecteurs doivent se créer un compte !

Et voici un bon nombre d'idées pour améliorer le blog et pour te montrer que tu peux dorénavant faire beaucoup de choses sur le web ! Et je suis certains que ton imagination a encore pleins d'idées !

Je peux aussi te conseil d'aller voir ce repo qui contient une application real-world et qui te montre comment faire et en plus, c'est par le créateur d'Adonis !

Bye ! 👋

Création et visualisation des articles - Créer un blog avec Adonis

Estéban — Sat, 21 Aug 2021 10:11:25 +0000

Bonjour,

Bienvenue dans ce tutoriel pour apprendre à utiliser le framework web Adonis ! Si tu souhaites en savoir plus sur Adonis en 1 coup œil, je t'invite à lire cette page.

Dans cette partie, on va voir ensemble comment créer un article, le lier à un utilisateur et l'afficher sur une page !

Rappel

Ce tutoriel est la partie 4 d'une série de tutoriels qui ont pour objectif de te faire découvrir Adonis au travers la création d'un blog.

Pour lire la partie précédente, c'est par là Création de l'authentification pour l'utilisateur - Créer un blog avec Adonis

Tu trouveras aussi sur GiHub l'ensemble du code source du projet !

Sommaire

Ce tutoriel est découpé en différente partie pour t'aider et pour éviter d'avoir des articles trop longs où l'on pourrait se perdre !

Nous allons donc voir ensemble :

Finalement, tu auras un blog fonctionnel !

Création et visualisation des articles

On va faire ce chapitre sous la forme d'un petit exercice. En effet, on a, dans les parties précédentes notamment Création d'un utilisateur - Créer un blog avec Adonis, presque tout vu pour te permettre d'être autonome sur cette partie. Je vais t'expliquer ce qu'il faut faire, te donner quelques indices puis on corrigera pas à pas ensuite !

Ce qu'il faut faire

La liste suivante est l'ensemble des tâches ordonnées t'indiquant ce qu'il y a à faire pour arriver au bout de cette partie :

Créer un modèle pour nos articles
- Un article contient les propriétés suivantes :
  - un id
  - un titre
  - du contenu
  - un propriétaire
  - une date de création
  - une date de mise à jour
- Pour le propriétaire, on peut s'aider de ce lien
Créer une migration pour les articles
- On fixera la limite du contenu à 1024 caractères
- On s'assurera du lien entre le propriétaire et la table des utilisateurs
- Aide ici et là
Créer un seeder pour les articles et éviter de devoir les créer à la main lors de la phase de développement de l'application
- Un peu d'explication à cette adresse
Créer la route permettant de visualiser un ensemble d'articles et la route permettant de visualiser 1 article
- GET /articles, pas d'authentification requise
- GET /articles/:id, pas d'authentification requise
- Aide ici
Créer le controller et les vues en charge de la gestion de ses 2 routes
- Dans le controller de la première route, on ira chercher l'ensemble des articles présents en base de données en les paginant et on affichera le tout dans une vue. On s'assurera qu'ils soient ordonnés par date de création dans l'ordre décroissant !
  - Un peu de lecture ici et là !
- Dans le controller de la seconde route, on ira chercher un article spécifique dépendant de l'id présent dans l'url, on y chargera l'utilisateur et on affichera le tout dans une vue
  - Un peu d'aide et d'autres lectures ici et là !

Et voilà ! Si tu as réussi à faire tout ça, bravo ! Je t'invite à bien lire les différents liens, à chercher, à essayer et à te tromper !

Création du modèle

Pour le modèle, c'est assez simple. On commence par la commande pour créer un nouveau modèle :

node ace make:model article

Ensuite, on complète notre modèle avec les informations souhaitées :

import { DateTime } from 'luxon'
import { BaseModel, BelongsTo, belongsTo, column } from '@ioc:Adonis/Lucid/Orm'
import User from './User'

export default class Article extends BaseModel {
  @column({ isPrimary: true })
  public id: number

  @column()
  public title: string

  @column()
  public content: string

  @column()
  public ownerId: number

  @belongsTo(() => User, { localKey: 'id', foreignKey: 'ownerId' })
  public owner: BelongsTo<typeof User>

  @column.dateTime({
    autoCreate: true,
  })
  public createdAt: DateTime

  @column.dateTime({ autoCreate: true, autoUpdate: true })
  public updatedAt: DateTime
}

La nouveauté concerne cette partie :

@belongsTo(() => User, { localKey: 'id', foreignKey: 'ownerId' })
public owner: BelongsTo<typeof User>

On dit simplement ici qu'un article appartient à un utilisateur et que pour faire le lien, on utilise la clé ownerId de l'article et la clé id de l'utilisateur. Ensuite, cela ajoutera une propriété owner à l'article du type User.

Pour en savoir plus : belongsTo

Création de la migration

Pour la création de la migration, on va aussi utiliser une commande pour la générer :

node ace make:migration article

La migration ressemblera à cela :

import BaseSchema from '@ioc:Adonis/Lucid/Schema'

export default class Articles extends BaseSchema {
  protected tableName = 'articles'

  public async up() {
    this.schema.createTable(this.tableName, (table) => {
      table.increments('id')
      table.string('title').notNullable().unique()
      table.string('content', 1024).notNullable()
      table.integer('owner_id').references('id').inTable('users')

      table.timestamp('created_at', { useTz: true })
      table.timestamp('updated_at', { useTz: true })
    })
  }

  public async down() {
    this.schema.dropTable(this.tableName)
  }
}

On remarque la création d'une clé secondaire sur owner_id en lien avec la table users. Cela permet de mettre sous contrainte la base de données pour s'assurer que l'id donné dans cette colonne soit effectivement existant dans la table des utilisateurs.

Aussi, on met la colonne title avec unique. Ainsi, on s'assure que tous les titres soient uniques directement dans les contraintes de la base de données.

Pour en savoir plus : Table

Création du seeder

Afin d'avoir des données dans notre base de données et pour éviter de devoir les entrer à la main à chaque fois, nous allons les inscrire une fois dans un fichier puis faire tourner ce fichier afin qu'il rentre les données dans la base de données.

Commençons par la commande suite :

node ace make:seeder article

Dans le dossier database/seeders, tu trouveras notre seeder. Dans ce fichier, nous allons utiliser les méthodes de notre modèle pour insérer de la donnée dans la base de données. Nous allons aussi récupérer notre utilisateur pour le lier à nos articles.

Dans un premier temps, on récupère notre utilisateur :

const owner = await User.firstOrFail()

Ensuite, on utilise la méthode updateOrCreateMany qui permet de mettre à jour des articles dépendant d'une clé ou de les créer s'ils ne sont pas trouvés :

await Article.updateOrCreateMany(uniqueKey, [])

Dans notre cas, le premier sera le titre puisqu'on a défini qu'il est unique selon la migration d'un article. Aussi, entre les crochets, on va y mettre l'ensemble des données que l'on va insérer ou mettre à jour. Finalement, notre fichier ressemble à cela :

import BaseSeeder from '@ioc:Adonis/Lucid/Seeder'
import Article from 'App/Models/Article'
import User from 'App/Models/User'

export default class ArticleSeeder extends BaseSeeder {
  public static developmentOnly = true

  public async run() {
    const uniqueKey = 'title'

    const owner = await User.firstOrFail()

    await Article.updateOrCreateMany(uniqueKey, [
      {
        title: 'Article 1',
        content:
          'Nulla quis ipsum sed augue laoreet imperdiet. Fusce dapibus, lorem quis convallis fringilla, sem est maximus nulla, id egestas orci libero eget est. In maximus vestibulum nisi, dignissim aliquam orci dictum id.',
        ownerId: owner!.id,
      },
      {
        title: 'Article 2',
        content:
          'Suspendisse est mi, ultrices sit amet ullamcorper sed, semper non ipsum. Vestibulum at nisl sed purus luctus sodales. Nunc lectus lorem, vehicula in dolor pharetra, pulvinar convallis libero. Maecenas iaculis porta nibh in hendrerit. Suspendisse gravida leo non orci facilisis placerat.',
        ownerId: owner!.id,
      },
      {
        title: 'Article 3',
        content:
          'Curabitur vitae mi aliquam, pretium velit id, varius lacus. Duis id tellus nec eros semper elementum et et lectus. Phasellus eros justo, eleifend eget tellus quis, accumsan sollicitudin ex. ',
        ownerId: owner!.id,
      },
      {
        title: 'Article 4',
        content:
          'Sed id eleifend lacus. Cras est diam, commodo et erat ac, elementum volutpat dolor. Donec auctor, lorem vitae luctus aliquet, mi mi rhoncus nunc, vel vestibulum felis justo sit amet felis. Donec eleifend rhoncus nisi id pretium. Morbi sit amet auctor enim, sit amet finibus velit. In hac habitasse platea dictumst.',
        ownerId: owner!.id,
      },
      {
        title: 'Article 5',
        content:
          'Morbi eget porttitor turpis. Fusce venenatis tortor lacus, eget interdum augue pellentesque id. Vestibulum elit lorem, gravida at elit vel, molestie suscipit mauris. ',
        ownerId: owner!.id,
      },
      {
        title: 'Article 6',
        content:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue nec tortor ut congue. Aenean a nunc nec felis sagittis auctor non a metus. Aenean euismod ligula eros, eu tempor turpis molestie sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ',
        ownerId: owner!.id,
      },
    ])
  }
}

On remarque la clé developmentOnly à true qui permet de s'assurer que le seeder ne tourne qu'en développement. On ne souhaite pas de faux articles en production !

Et pour insérer nos données, il nous faut utiliser la commande suivante :

node ace db:seed

Et voilà, nos données sont prêtes ! Pour les visualiser, tu peux te rendre dans pgAdmin sur la table des articles !

Pour en savoir plus : seeder, updateOrCreateMany

Création des routes

La création de la route tient en unique ligne :

Route.resource('articles', 'ArticlesController')

La méthode resource permet de générer l'ensemble des routes dont nous allons avoir besoin ! Ainsi, pas besoin de se casser la tête ! Ainsi, on s'assure de rester dans les conventions d'Adonis tout en restant concis mais efficace dans notre code. Je te conseille d'aller lire la documentation à ce sujet qui explique et illustre très bien l'objectif d'utiliser cette méthode.

Pour en savoir plus : resource

Création du `controller`

Récupération de l'ensemble des articles

Pour cela, on va utiliser le query builder de Lucid. Ainsi, pour récupérer l'ensemble des articles de manière paginé et décroissant selon la date de création, la query ressemble à cela :

const articles = await Article.query().orderBy('created_at', 'desc').paginate(page, 3)

Bien sûr, il nous faudra pouvoir changer de page. Par conséquent, nous allons devoir récupérer une entrée utilisateur nommée page comme cela :

const page = request.input('page', 1)

Finalement, notre fonction index ressemble à cela :

public async index({ request }: HttpContextContract) {
    const page = request.input('page', 1)

    const articles = await Article.query().orderBy('created_at', 'desc').paginate(page, 3)

    return articles
  }

Rendons-nous sur cette adresse. On peut ainsi observer l'ensemble de nos articles. Mais je dois bien dire que ça n'est ni très beau, ni très pratique. Mais pas de panique, la création de la vue nous permettra d'exploiter l'ensemble de ses données pour tout bien afficher !

Récupération d'un unique article

Pour faire cela, on commence par extraire notre id des paramètres de l'url :

const { id } = params

Ensuite, on effectue une simple recherche en demandant à la recherche d'échouer si l'article n'est pas trouvé. En effet, cela permet de s'assurer que l'article demandé existe et de contrôler la réponse à cet échec :

let article: Article
try {
  article = await Article.findOrFail(id)
} catch (error) {
  console.error(error)
}

Sur la gestion de l'erreur, on va simplement afficher l'erreur dans la console pour le moment.

Puis à la fin, on retourne l'article :

return article

Allons voir le résultat ici ! Ce n'est pas mal, mais on ne voie pas les informations de l'utilisateur alors qu'on avait indiqué un lien entre les 2 lors de la création de notre modèle.

Pour lier les 2, il faut utiliser la méthode asynchrone load après la récupération de l'article :

article = await Article.findOrFail(id)
await article.load('owner')

Si l'on retourne observer le résultat, on voit bien apparaitre le propriétaire sous la clé owner.

Pour en savoir plus : load, findOrFail

Création des vues

Dans cette section, nous allons devoir créer la vue puis modifier nos controllers pour qu'il génère la vue en fonction des données.

Pour stocker l'ensemble de nos routes, nous allons commencer par créer un dossier nommé articles dans resources/views

Visionnage de l'ensemble des articles

Dans le dossier précédemment créer, ajoutons un fichier nommé index.edge.

Dedans, nous y trouverons cela :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Les articles</title>
</head>
<body>
  <h1>Les articles</h1>
  <section>
    @each(article in articles)
    <article>
      <a href="{{ route('ArticlesController.show', { id: article.id }) }}">
        <h2>
          {{ article.title }}
        </h2>
      </a>
      <p>
        {{ excerpt(article.content, 100) }}
      </p>
    </article>
    @endeach
  </section>
  <div>
  @each(anchor in articles.getUrlsForRange(1, articles.lastPage))
    <a href="{{ anchor.url }}">
      {{ anchor.page }}
    </a>
  @endeach
</div>
</body>
</html>

C'est un fichier le plus simple possible car nous ne nous concentrons pas sur le design du site mais sur ses fonctionnalités et la découverte d'Adonis.

On trouve une boucle @each qui permet d'itérer au travers l'ensemble des articles et de générer le code html correspondant. La fonction route permet de générer l'url de manière dynamique en fonction de son nom et d'un paramètre. Dans notre cas, la paramètre et l'id de l'article. Il est possible de faire cela car l'id d'un article est sa clé primaire qui est par définition unique.

Dans le bas du fichier, on observe la fonction getUrlsForRange qui permet d'obtenir ensemble des urls et son numéro entre 2 valeurs. Cela est très pratique pour générer la pagination de notre site.

Il existe d'autres propriétés très utiles permettant de savoir si le lien est actif ou non, d'avoir le total des pages...

Ensuite, dans notre controller, nous devons indiquer que nous souhaitons rendre la page index des articles avec le paramètre articles, qui représente l'ensemble des articles :

public async index({ request, view }: HttpContextContract) {
    const page = request.input('page', 1)

    const articles = await Article.query().orderBy('created_at', 'desc').paginate(page, 3)

+    articles.baseUrl('/articles')
-    return articles
+    return view.render('articles/index', {
+      articles,
+    })
   }

La fonction baseUrl permet de s'assurer d'obtenir la bonne url sur la génération des urls dans le template lors de l'utilisation de getUrlsForRange par exemple.

Nous pouvons maintenant nous rendre ici pour admirer le résultat ! Il t'est possible de jouer avec la navigation en toute simplicité !

Visionnage d'un unique article

Rien de sorcier ici. On commence par créer la vue, show.edge dans le fichier resources/views :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <a href="{{ route('ArticlesController.index') }}">Voir les articles</a>

    <section>
      <h1>{{ article.title }}</h1>
      <p>{{ article.content }}</p>
      <div>par <strong> {{article.owner.pseudo}} </strong> le {{ article.createdAt.toLocaleString({ locale: 'fr-FR'}) }}, mis à jour le {{ article.updatedAt.toLocaleString({ locale: 'fr-FR'}) }}</div>
    </section>
  </body>
</html>

On retrouve en haut de la page, un lien permettant de retourner voir l'ensemble des articles. Dessous, on affiche l'article, son auteur et on adapte les dates à notre région !

Dans le controller, comme précédemment, on ajoute le fait de vouloir générer la route avec l'article que l'on a sorti de la base de données :

 public async show({ view, params }: HttpContextContract) {
   const { id } = params

   let article: Article
   try {
     article = await Article.findOrFail(id)
     await article.load('owner')
   } catch (error) {
     console.error(error)
+    return view.render('errors/not-found')
   }

-  return article
+  return view.render('articles/show', {
+     article,
+  })
}

Aussi, on a ajouté la génération de la route not-found si jamais on ne trouve pas l'article !

En savoir plus : each, getUrlsForRange, render, ,toLocalString

Conclusion

Et voilà pour cette quatrième partie. On a vu plus en détail la création d'un modèle et de la manière dont on peut aller chercher des données dans la base de données. On a aussi vu comment lier nos données à nos pages.

Dans la suite, on va créer les pages de création et d'édition de nos articles et les sécuriser grâce à un middleware !

N'hésite pas à commenter si tu as des questions, si ça t'a plus ou même pour me faire des retours !

Et tu peux aussi me retrouver sur Twitter ou sur LinkedIn !

On se donne rendez-vous ici, Gestion des articles - Créer un blog avec Adonis pour la suite du tutoriel et gérer nos articles !

Création de l'authentification pour l'utilisateur - Créer un blog avec Adonis

Estéban — Sat, 21 Aug 2021 10:11:15 +0000

Bonjour,

Bienvenue dans ce tutoriel pour apprendre à utiliser le framework web Adonis ! Si tu souhaites en savoir plus sur Adonis en 1 coup œil, je t'invite à lire cette page.

Dans cette partie, on va voir le système de routing, de controller et un moyen pour authentifier l'utilisateur.

Rappel

Ce tutoriel est la partie 3 d'une série de tutoriels qui ont pour objectif de te faire découvrir Adonis au travers la création d'un blog.

Pour lire la partie précédente, c'est là Création d'un utilisateur - Créer un blog avec Adonis

Tu trouveras aussi sur GiHub l'ensemble du code source du projet !

Sommaire

Ce tutoriel est découpé en différente partie pour t'aider et pour éviter d'avoir des articles trop longs où l'on pourrait se perdre !

Nous allons donc voir ensemble :

Finalement, tu auras un blog fonctionnel !

Création de l'authentification

Nous allons voir ensemble comment créer une route avec Adonis puis l'ajout d'un controller à cette dernière pour faciliter la gestion des fonctionnalités de notre application.

Création d'une route

Pour commencer à créer des routes, rendons-nous dans le fichier start/routes.ts

Dans un premier temps, on va créer la route permettant d'afficher à l'utilisateur le formulaire pour s'authentifier puis dans un second temps, on fera la route qui permet d'authentifier l'utilisateur.

Dans notre fichier, on va commencer par créer la route /login et s'assurer que tout fonctionne.

Route.get('login', () => {
  return 'Bienvenue sur la page de login'
})

Rends-toi à cette adresse et tu vas voir ce message dans ton navigateur ! N'oublie pas de démarrer le serveur !

Super, mais comment on affiche de l'HTML à notre utilisateur ? Pour cela, on va utiliser le template engine edge. Nous allons donc créer une page puis demander au serveur de la générer puis de l'envoyer à l'utilisateur.

Commençons par créer la vue :

node ace make:view login

Un nouveau fichier vient alors de faire son apparition dans ressources/views. Dans ce fichier, on va y créer un simple formulaire permettant à l'utilisateur de renseigner ses identifiants pour se connecter :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Login</title>
</head>
<body>
  <form action="/login" method="post">
    <div>
      <label for="pseudo">Votre pseudo</label>
      <input type="text" name="pseudo" id="pseudo">
    </div>
    <div>
      <label for="password">Votre password</label>
      <input type="text" name="password" id="password">
    </div>
    <button type="submit">Se connecter</button>
  </form>
</body>
</html>

L'action de ce formulaire nous indique que la requête sera sur login et la méthode nous indique POST. C'est donc comme cela que nous allons devoir définir nos routes !

Ensuite, nous allons indiquer à notre route de rendre cette page puis de la renvoyer à l'utilisateur. Changeons un peu notre code dans le fichier start/routes.ts :

Route.get('login', ({ view }) => {
  return view.render('login')
})

Rends-toi à cette adresse pour visualiser notre formulaire de connexion !

Pour en savoir plus : Routing, Controllers, Edge

Authentifier un utilisateur

Installation du module

Pour commencer à authentifier notre utilisateur, on va devoir installer et configurer un module :

npm i @adonisjs/auth

Puis

node ace configure @adonisjs/auth

On indique que l'on souhaite utiliser Lucid pour trouver les utilisateurs. Ensuite, on va utiliser le web guard pour gérer l'authentification et enfin, on indique User comme modèle pour l'authentification. Puis on indique ne pas vouloir créer une migration comme cela a déjà été fait dans la partie précédente.

Dans le fichier config/auth.ts, il faut changer l'uids qui est à email par pseudo. En effet, dans la migration de notre utilisateur, nous avons indiqué que le pseudo devait être unique. Cela va permettre de le récupérer en base de données lors de l'authentification.

Authentification

Dans nos routes, nous allons créer une nouvelle route qui correspond à ce que l'on a mis dans le formulaire d'authentification.

Route.post('login',async ({ request, auth, response }) => {
    return 'Post sur login'
})

Dans cette fonction, nous allons devoir récupérer de la requête le pseudo et le mot de passe provenant du formulaire. Puis, nous allons devoir authentifier l'utilisateur à l'aide de ses identifiants. Si les identifiants sont bons, alors on redirige l'utilisateur vers la page principale. Cependant, si les identifiants ne sont pas bons, alors on l'indique à l'utilisateur.

On récupère les entrées de l'utilisateur :

const pseudo = request.input('pseudo')
const password = request.input('password')

Ensuite, nous essayons d'authentifier l'utilisateur. Dépendant du résultat, on redirige l'utilisateur sur / ou il est renvoyé sur la page login :

try {
    await auth.attempt(pseudo, password)
    response.redirect('/')
} catch (error) {
    response.redirect().back()
}

Rends-toi à cette adresse pour tester ! Pour rappel, notre unique utilisateur a pour pseudo demo et pour mot de passe azerty ! Tout se passe bien et tu es redirigé sur la page d'accueil. Cependant, si tu commets une erreur délibérée sur le mot de passe, alors rien ne te signale ce qui ne vas pas. Pas pratique !

Aussi, rien ne nous assure que les données entrées par l'utilisateur soient correctes. Ainsi, nous allons vérifier en amont ces données pour nous assurer de leur forme, type, format et intégrité.

Aussi, nous aimerions prévenir l'utilisateur des raisons qui peuvent faire qu'il n'arrive pas à s'authentifier ! Et pour cela, on va utiliser les sessions.

Et pour cela, nous allons utiliser un Validator.

Validation des entrées

Commençons par créer le validator :

node ace make:validator login

Ensuite, nous allons définir dans ce dernier la structure et le format des données que l'on souhaite avoir :

public schema = schema.create({
  pseudo: schema.string({ trim: true }, [
    rules.exists({ table: 'users', column: 'pseudo' }),
  ]),
  password: schema.string(),
})

On indique que l'on souhaite une chaine de caractères nommée pseudo dont la valeur doit correspondre à une des entrées de la table users de la colonne pseudo. On indique que l'on souhaite une seconde chaine de caractères nommée password.

Parfait, essayons à nouveau de nous connecter mais en omettant le pseudo ! On n'est pas authentifié mais rien n'a vraiment changé sur la page pour l'utilisateur ! Et c'est normal ! Il faut maintenant indiquer à notre controller d'utiliser le validator :

- const pseudo = request.input('pseudo')
- const password = request.input('password')
---
+ import LoginValidator from 'App/Validators/LoginValidator'
//...
+ const { pseudo, password } = await request.validate(LoginValidator)

Ensuite, nous allons devoir donner à l'utilisateur des indications en fonction des erreurs qu'il commet !

Flash messages

Ce qui est pratique avec le validator, c'est qu'il gère pour nous les messages d'erreurs. Cependant, nous allons devoir les afficher dans la vue. Pour cela, ouvrons le fichier login.edge :

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Login</title>
 </head>
 <body>
   <form action="/login" method="post">
     <div>
       <label for="pseudo">Votre pseudo</label>
+      <input type="text" name="pseudo" id="pseudo" value="{{ flashMessages.get('pseudo') ?? '' }}">
+      @if(flashMessages.has('errors.pseudo'))
+      <div>{{ flashMessages.get('errors.pseudo') }}</div>
+      @endif
     </div>
     <div>
       <label for="password">Votre password</label>
+      <input type="text" name="password" id="password" value="{{ flashMessages.get('password') ?? '' }}">
+      @if(flashMessages.has('errors.password'))
+      <div>{{ flashMessages.get('errors.password') }}</div>
+      @endif
     </div>
     <button type="submit">Se connecter</button>
   </form>
 </body>
 </html>

Comme on peut le voir, on ajoute à notre template une div qui contient le message contenu dans la session via flashMessages. Cependant, on ne souhaite faire cela que s'il y a un message à afficher, c'est pour cela qu'on entoure cette div de la condition de présence d'une erreur.

Aussi, on affecte à l'input sa précédente valeur. Cela permet de ne pas vider le formulaire en cas d'erreur de l'utilisateur lorsque nous le redirigeons via la méthode back.

Mais que faire en cas d'erreur dans l'authentification ? Pour cela, nous allons nous même enregistrer un message flash dans la fonction store du controller login.

 try {
   await auth.attempt(pseudo, password)
   response.redirect('/')
 } catch (error) {
+  session.flash('auth', 'Authentication impossible')
   response.redirect().back()
 }

On crée un nouveau message nommé "auth" qui contient "Authentification impossible".

Pour que l'utilisateur soit en mesure de le voir, il nous faut faire comme dans le fichier login.edge :

 <button type="submit">Se connecter</button>
+@if(flashMessages.has('auth'))
+<div>{{ flashMessages.get('auth') }}</div>
+@endif

Rends-toi à cette adresse pour essayer cela ! N'oublie pas de te tromper pour voir apparaitre les messages !

On remarque cependant que les messages du validator ne sont pas en français ! Pour les personnaliser, on peut se rendre dans le fichier LoginValidator.ts :

public messages = {
  'pseudo.string': 'Le pseudo doit être une chaîne de caractères',
  'pseudo.required': 'Le pseudo est requis',
  'pseudo.exists': "Le pseudo n'existe pas",
  'password.string': 'Le mot de passe doit être une chaîne de caractères',
  'password.required': 'Le mot de passe est requis',
}

Les clés sont une correspondance avec la règle qui est appliquée et la vérification qui est effectuée. Retentons notre formulaire et voilà, les messages sont en français !

Pour en savoir plus : Authentication, Web guard, Validator, Flash, Conditionals

Création des `controllers`

Les fonctions qui se trouvent après le nom de nos routes dans le fichier start/routes.ts est en réalité des controllers. C'est à dire que ces fonctions vont gérer les requêtes des clients. Mais pour simplifier et faire que chaque fichier est son utilité, on préfère les extraire et les mettre dans un fichier à part.

Commençons par créer un controller :

node ace make:controller login

Ensuite, nous allons devoir migrer nos 2 fonctions dans ce controller de la ressource login.

Pour ce faire, commençons par éditer le fichier LoginController.ts.

Dans une fonction nommée create, nous allons y mettre la gestion de la vue et dans une fonction nommée store, nous allons y mettre l'authentification de l'utilisateur. Le choix du nom de ces fonctions n'est pas au hasard et fait partie des conventions utilisées par Adonis, plus de détails ici.

// Gestion de la vue pour l'utilisateur
public async create({ view }: HttpContextContract) {
  return view.render('login')
}

// Gestion de l'authentification
public async store({ request, auth, response, session }: HttpContextContract) {
  const { pseudo, password } = await request.validate(LoginValidator)

  try {
    await auth.use('web').attempt(pseudo, password)
    response.redirect('/articles')
  } catch (error) {
    session.flash('auth', 'Authentication impossible')
    response.redirect().back()
  }
}

Ensuite, nous allons indiquer simplement dans notre fichier de gestion des routes, quel est le controller qui gère la route. Pour cela, nous allons remplacer nos fonctions par une simple chaine de caractères.

Route.get('login', 'LoginController.create')
Route.post('login', 'LoginController.store')

Cette chaine de caractères indique le nom du controller à utiliser LoginController et la fonction à exécuter, create dans le cas d'une requête de type GET et store dans le cas d'une requête POST.

Pour en savoir plus : Controllers

Conclusion

Et voilà pour cette troisième partie. On a vu la création d'une route, de son controller associé. On a aussi abordé les notions de vue et d'authentification de l'utilisateur.

Dans la suite, on va commencer à modeler nos articles pour les visionner sur notre blog !

N'hésite pas à commenter si tu as des questions, si ça t'a plus ou même pour me faire des retours !

Et tu peux aussi me retrouver sur Twitter ou sur LinkedIn !

On se donne rendez-vous ici, Création et visualisation des articles - Créer un blog avec Adonis pour la suite du tutoriel et visualiser nos premier articles.

Création d'un utilisateur - Créer un blog avec Adonis

Estéban — Sat, 21 Aug 2021 10:11:09 +0000

Bonjour,

Bienvenue dans ce tutoriel pour apprendre à utiliser le framework web Adonis ! Si tu souhaites en savoir plus sur Adonis en 1 coup œil, je t'invite à lire cette page.

Dans cette partie, on va voir ensemble comment créer un utilisateur dans la base de données !

Rappel

Ce tutoriel est la partie 2 d'une série de tutoriels qui ont pour objectif de te faire découvrir Adonis au travers la création d'un blog.

Pour lire la partie précédente, c'est là Objectifs et mise en route - Créer un blog avec Adonis

Tu trouveras aussi sur GiHub l'ensemble du code source du projet !

Sommaire

Ce tutoriel est découpé en différentes parties pour t'aider et pour éviter d'avoir des articles trop longs où l'on pourrait se perdre !

Nous allons donc voir ensemble :

Finalement, tu auras un blog fonctionnel !

Création d'un utilisateur

Nous allons donc voir ensemble comment fonctionne les modèles et les migrations des différents éléments que nous allons devoir stocker. Pour cela, nous allons créer un utilisateur et le stocker manuellement dans la base de données. Par la suite, nous verrons comment interagir avec notre base de données.

Un modèle est une structure de données, une empreinte, un moule pour savoir comment sont stockées les éléments en base de données. Une migration, dans notre cadre, est un fichier permettant de créer, modifier ou supprimer une table de la base de données.

Avec le modèle, on indique dans le serveur à quoi ressemble notre donnée. Avec la migration, on dit à la base donnée comment sont les données qu'elle va recevoir.

Lucid pour la base de données

Dans un premier temps, nous allons devoir installer notre système de gestion des modèles et des migrations :

npm i @adonisjs/lucid

Puis le configurer :

node ace configure @adonisjs/lucid

Lors de la configuration, tu dois choisir PostgreSQL

Ensuite, tu dois valider les variables environnements, à placer à la suite des autres dans le fichier Env.ts :

PG_HOST: Env.schema.string({ format: 'host' }),
PG_PORT: Env.schema.number(),
PG_USER: Env.schema.string(),
PG_PASSWORD: Env.schema.string.optional(),
PG_DB_NAME: Env.schema.string(),

Puis, il faut modifier le fichier .env comme cela :

DB_CONNECTION=pg
PG_HOST=localhost
PG_PORT=5432
PG_USER=<votre utilisateur>
PG_PASSWORD=<votre mode de passe>
PG_DB_NAME=create-blog-using-adonis

Et enfin, on termine cette initialisation de la base de données en se rendant dans pgAdmin pour créer une nouvelle base de données qui se nomme comme create-blog-using-adonis et qui a pour utilisateur celui que tu as mis dans le précédent fichier.

Pour en savoir plus : Lucid, Env

Notre premier modèle

Rien de plus simple, commençons par exécuter cette commande :

node ace make:model user

Un nouveau fichier nommé User dans app/Models/ vient d'apparaitre. Ce fichier permet de savoir à quoi ressemble un utilisateur et de décrire ses propriétés. Pour le moment, il n'a qu'un id et une date de création et une date de mise à jour. Nous allons donc lui ajouter un pseudo et un mot de passe. Ces 2 éléments sont le minimum pour authentifier par la suite notre utilisateur. À la place d'un pseudo, il est possible d'utiliser une adresse électronique ou un numéro de téléphone.

    @column()
  public pseudo: string

  @column()
  public password: string

Mais le mot de passe ne peut pas rester comme cela ! On ne va pas le laisser en clair dans la base de données, il faut donc le hasher avant de le sauvegarder. Pour cela, on va commencer par installer un module pour hasher :

npm i phc-argon2

Puis on l'importe :

import Hash from '@ioc:Adonis/Core/Hash'

Et enfin, on crée une fonction qui va s'exécuter avant chaque enregistrement d'un utilisateur si ce dernier contient un mot de passe qui a changé :

@beforeSave()
public static async hashPassword(user: User) {
  if (user.$dirty.password) {
    user.password = await Hash.make(user.password)
  }
}

N'oublie pas d'importer beforeSave depuis @ioc:Adonis/Lucid/Orm

En savoir plus : Models

Notre première migration

Comme pour le modèle, il existe une commande pour créer les migrations :

node ace make:migration user

Cette dernière a créé un fichier dans /database/migrations/. Dedans, on trouve les instructions pour construire la base de données. La migration est donc en lien avec le modèle qu'on a précédemment réalisé tout en ajoutant des contraintes pour s'assurer de l'intégrité de nos données.

Ainsi nous allons ajouter cela :

table.string('pseudo').unique().notNullable()
table.string('password').notNullable()

Nous créons une colonne nommée pseudo de type string qui ne peut être vide et dont l'ensemble des valeurs doivent être uniques. Ensuite, nous créons une seconde colonne nommée password qui ne peut être vide. Pour chacune des colonnes, la limite est de 256 caractères. Il s'agit de la valeur par défaut que l'on peut facilement modifier.

Et finalement, pour indiquer à la base de données de construire la table, il suffit d'une commande :

node ace migration:run

Il est possible de voir le résultat en se rendant dans pgAdmin, notre base de données

Pour en savoir plus : Migrations, Table

Création manuelle d'un utilisateur

Dans notre blog, l'utilisateur sera en mesure d'ajouter et de modifier les articles. C'est le propriétaire du blog. Pour éviter que n'importe qui s'inscrive, on ne fera pas de page d'enregistrement mais on va mettre à la main notre utilisateur dans la base de données. Dans le même temps, ça nous permettra de manipuler pgAdmin.

Pour ce faire :

Ouvir pgAdmin
Dérouler les databases
Dérouler les schemas
Dérouler les tables

Tu vas y voir une table nommée users. Pour voir ce qu'elle contient, il faut y faire un clic droit puis View/Edit Data. En double cliquant sur les cases dans la section Data output, il est possible de les modifier, et c'est ce que nous allons faire !

Pour l'id, il n'y a rien à faire. Pour le pseudo, renseigner demo et pour le mot de passe :

$argon2id$v=19$t=3,m=4096,p=1$jbuf9UBOe+tm7aSRmPJfDw$BlYS1AoDt+aCuPtMFu+e1gkVNX0Cyf09ByChjKFlzY8

Il s'agit du mot azerty haché avec le module vu précédemment. **En effet, comme on enregistre manuellement notre utilisateur, le mot de passe ne passera pas par la fonction que l'on a écrite dans notre modèle. Cependant, il faut tout de même mettre un hash car à la connexion, on vérifiera le hash présent en base de données contre le hash du mot donnés par la personne tentant de se connecter.

Ensuite, il faut cliquer sur une autre cellule puis sur F6 pour enregistrer les données, ou le bouton à droite de la disquette dans le ruban.

Et voilà, notre utilisateur est prêt à être utilisé.

Conclusion

Et voilà pour cette seconde partie. On a vu le principe de modèles et de migrations et comment accéder à notre base de données via pgAdmin.

Dans la suite, on se servira de cet utilisateur pour l'authentifier et lui donner un accès à la création et la modification des articles.

N'hésite pas à commenter si tu as des questions, si ça t'a plus ou même pour me faire des retours !

Et tu peux aussi me retrouver sur Twitter ou sur LinkedIn !

On se donne rendez-vous ici, Création de l'authentification pour l'utilisateur - Créer un blog avec Adonis pour la suite du tutoriel et authentifier notre utilisateur.

Objectifs et mise en route - Créer un blog avec Adonis

Estéban — Sat, 21 Aug 2021 10:10:25 +0000

Bonjour,

Bienvenue dans ce tutoriel pour apprendre à utiliser le framework web Adonis ! Si tu souhaites en savoir plus sur Adonis en 1 coup œil, je t'invite à lire cette page.

Présentation du projet

Tu trouveras aussi sur GiHub l'ensemble du code source du projet si ça t'intéresse !

Objectifs

Les objectifs de ce tutoriel sont multiples. Dans un premier temps, il va te permettre de mettre un premier pied dans l'utilisation d'Adonis. Ensuite, on va créer ensemble, pas à pas, une application utile avec des fonctionnalités similaires à ce que l'on peut retrouver sur d'autres web app sur internet ! Je vais aussi t'expliquer les raisons qui nous poussent à utiliser telle ou telle fonctionnalité pour te rendre le plus autonome sur le framework et te donner l'envie de l'utiliser.

Cependant, il ne sera pas utilisé de CSS durant l'ensemble du tutoriel. On se concentre sur l'apprentissage du framework ! On ne fera pas non plus de mise en production !

Tout au long du tutoriel, tu trouveras différents liens t'amenant directement sur la ressource de la documentation Adonis ! Cette dernière est très bien faite et te donnera plus de détails ! Dans ce tutoriel, nous allons mettre en lien tous ces éléments pour construire notre blog et plus généralement pour construire un site !

N'oublie pas que la doc est ta meilleure amie !

Prérequis

Pour ce tutoriel, assez peu de prérequis sont nécessaires ! Tout de même, il faut :

Avoir des bases en HTML et javascript et en SQL
Avoir des bases dans le fonctionnement d'un serveur web
Avoir Node, PostgreSQL, pgAdmin sur sa machine
Avoir un éditeur de texte comme VSCode

En cas de doutes, je te partage ici un ensemble de ressources pour en savoir plus :

Sommaire

Ce tutoriel est découpé en différente partie pour t'aider et pour éviter d'avoir des articles trop longs où l'on pourrait se perdre !

Nous allons donc voir ensemble :

Finalement, tu auras un blog fonctionnel !

Cahier des charges

Avant de commencer à programmer, on va créer ensemble le cahier des charges de cette superbe web application. Créer le cahier des charges en amont nous permettra, lorsqu'il faudra coder, d'avoir tout en tête, de savoir avec précision ce que nous sommes en train et de faire et pourquoi nous sommes en train de le faire ! Comme ça, quand on code, on code et on ne réfléchit plus à ce à quoi doit ressembler ou ce que doit faire notre web app !

Nous allons créer un blog. C'est à dire une web application permettant à ses visiteurs de visualiser l'ensemble des articles du blog, d'y naviguer via une pagination et de les visualiser 1 à 1. Sur cette page de visualisation, on pourra lire l'article en entier et voir son auteur.

L'auteur du blog sera un utilisateur présent en base de données. Il pourra s'authentifier auprès du site pour créer un article et éditer ses différents articles.

D'un point de vue design, notre blog ne sera que de l'HTML. Aucun style ne sera appliqué.

Ainsi, nous aurons les routes suivantes dans notre blog :

GET /, redirige vers GET /articles
POST /login, pour authentifier un utilisateur
GET /login, pour avoir accès au formulaire d'authentification
GET /articles, pour visualiser les articles
GET /articles/:id, pour visualiser un article
POST /articles, pour créer un article dans la base de données, accessible que pour les utilisateurs authentifiés
GET /article/create, pour avoir accès à la page de création d'un article, accessible que pour les utilisateurs authentifiés
PATCH /articles/:id, pour mettre à jour un article dans la base de données, accessible que pour les utilisateurs authentifiés
GET /articles/edit, pour avoir accès à la page de modification d'un article, accessible que pour les utilisateurs authentifiés

L'ensemble des données envoyées au serveur seront vérifiées.

D'un point de vue base de données, nous allons construire la chose suivante :

Il faut comprendre le trait, qui est en forme de fourche sur article comme : un utilisateur peut avoir plusieurs articles mais un article n'a qu'un utilisateur !

Mise en route du projet

Initialisation de l'application

Pour commencer à coder, commençons par sortir un terminal, place-toi dans l'un de tes répertoires et exécute la commande suivante :

npm init adonis-ts-app@latest create-a-blog-using-adonis

Cette commande permet de créer rapidement un squelette d'une application Adonis ! Lorsque l'on te demande le choix du projet, il faut prendre web. En ce qui concerne eslint/prettier, je te conseille de répondre oui. Cela te permet de garder un style de code consistant. Pour webpack encore, nous n'allons pas en avoir besoin donc tu peux répondre non.

Cette configuration nous permettra de répondre à l'ensemble du cahier des charges en installant le template engine pour créer différentes vues. Nous installerons nous même d'autres modules par la suite !

Une fois cela fait, tu peux te rendre dans le dossier et lancer la commande

npm run dev

Qui lancera le serveur.

Rendez-vous sur http://localhost:3333 pour voir notre web app en action !

Pour en savoir plus : Installation

Conclusion

Et voilà pour cette première partie d'explication et de mise en route où l'on a vu ce qu'on allait faire. On a créé le cahier des charges et on a initialisé l'application !

N'hésite pas à commenter si tu as des questions, si ça t'a plus ou même pour me faire des retours !

Et tu peux aussi me retrouver sur Twitter ou sur LinkedIn !

On se donne rendez-vous ici, Création d'un utilisateur - Créer un blog avec Adonis, pour la suite du tutoriel et créer notre premier utilisateur !

DEV Community: Estéban

Objectifs et plan d'action - Real World To-Do App - AdonisJS

Objectifs

Ce que tu vas apprendre

Plan d'action

Dans la suite

Publiposter avec des pièces jointes identiques

Objectif

Prérequis

Mise en place

Activer les macros

Création des scripts

Ajouter les fichiers à joindre

Charger les fichiers dans les courriers

Utilisation

Tips

Code source

Crédit

Gestion des articles - Créer un blog avec Adonis

Rappel

Sommaire

Gestion des articles

Ce qu'il faut faire

Gestion des articles

Mise en place du middleware d'authentification

Création du validator pour les articles

Création des méthodes du controller des articles

Création des vues pour la gestion des articles

Bonus

Conclusion

Possibles évolutions

Création et visualisation des articles - Créer un blog avec Adonis

Rappel

Sommaire

Création et visualisation des articles

Ce qu'il faut faire

Création du modèle

Création de la migration

Création du seeder

Création des routes

Création du controller

Récupération de l'ensemble des articles

Récupération d'un unique article

Création des vues

Visionnage de l'ensemble des articles

Visionnage d'un unique article

Conclusion

Création de l'authentification pour l'utilisateur - Créer un blog avec Adonis

Rappel

Sommaire

Création de l'authentification

Création d'une route

Authentifier un utilisateur

Installation du module

Authentification

Validation des entrées

Flash messages

Création des controllers

Conclusion

Création d'un utilisateur - Créer un blog avec Adonis

Rappel

Sommaire

Création d'un utilisateur

Lucid pour la base de données

Notre premier modèle

Notre première migration

Création manuelle d'un utilisateur

Conclusion

Objectifs et mise en route - Créer un blog avec Adonis

Présentation du projet

Objectifs

Prérequis

Sommaire

Cahier des charges

Mise en route du projet

Initialisation de l'application

Conclusion

Création du `validator` pour les articles

Création du `controller`

Création des `controllers`