Comment créer une application de citations en utilisant AdonisJs et MySQL

L’auteur a choisi le Tech Education Fund pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

AdonisJs est un framework Web Node.js écrit en JavaScript qui fonctionne avec tous les principaux systèmes d’exploitation. Il utilise le célèbre modèle de conception MVC (Model - View - Controller) et offre un écosystème stable pour l’écriture d’applications Web côté serveur. Le framework comprend une authentification transparente, un mapping objet-relationnel (ORM) SQL, des migrations et l’ensemencement de bases de données. AdonisJs a une architecture similaire à celle du framework d’application Web PHP Laravel, dont la même structure de dossiers et plusieurs concepts de configuration partagée.

Par défaut, AdonisJs utilise le moteur de modèles Edge qui est conçu pour une utilisation intuitive. Tout comme Laravel, AdonisJs est équipé d’un ORM appelé Lucid qui sert d’interface pour la communication entre les modèles d’une application et la base de données. Avec AdonisJs, les développeurs peuvent créer une application complète où le serveur back-end sera responsable de l’application de la logique du système, du routage et du rendu de toutes les pages de l’application. Il est également possible de créer une API de service Web pour renvoyer les réponses JSON d’un contrôleur ; ces services Web peuvent alors être consommés à l’aide de frameworks front-end tels que Vue.js, React et Angular.

Dans ce tutoriel, vous allez construire une application avec AdonisJs en utilisant son interface en ligne de commande (CLI). Vous créerez des routes, des contrôleurs, des modèles et des vues dans votre application, et vous effectuerez des validations de formulaires. L’exemple présenté dans ce tutoriel sera une application de citations dans laquelle un utilisateur peut s’inscrire et se connecter pour créer une citation. Cette application de démonstration vous donnera la possibilité d’effectuer des opérations CRUD (Create, Read, Update, Delete).

Conditions préalables

Avant de commencer ce guide, vous aurez besoin de ce qui suit :

• Une installation locale de Node.js (au moins v8) et de npm (au moins v3.0). Node.js est un environnement d’exécution JavaScript qui vous permet d’exécuter votre code en dehors du navigateur. Il est livré avec un gestionnaire de packages pré-installé appelé npm, qui vous permet d’installer et de mettre à jour des packages. Pour les installer sur macOS ou Ubuntu 18.04, suivez les étapes du tutoriel Comment installer Node.js et créer un environnement de développement local sur macOS ou la section Installation à l’aide d’un PPA du tutoriel Comment installer Node.js sur Ubuntu 18.04.
• MySQL installé sur votre machine. Suivez ces instructions pour le télécharger et l’installer pour le système d’exploitation de votre choix. Pour installer MySQL avec succès, vous pouvez soit l’installer en utilisant Homebrew sur Mac ou, pour Ubuntu 18.04, suivre notre tutoriel Comment installer MySQL sur Ubuntu 18.04.
• Une compréhension de base de JavaScript ; voir notre série Comment coder en JavaScript.
• Un éditeur de texte installé, tel que Visual Studio Code, Atom ou Sublime Text.

Étape 1 - Installation de la CLI Adonis

Dans cette section, vous installerez la CLI Adonis et tous ses packages requis sur votre machine locale. La CLI vous permettra d’échafauder un nouveau projet AdonisJs, ainsi que de créer et de générer des codes standards pour les contrôleurs, les middlewares et les modèles de votre application. Vous créerez également votre base de données pour le projet.

Exécutez la commande suivante pour installer la CLI AdonisJs globalement sur votre machine via npm :

npm i -g @adonisjs/cli

Une fois le processus d’installation terminé, tapez la commande suivante dans le terminal pour confirmer l’installation d’AdonisJs et visualiser la version actuelle :

adonis --version

Vous verrez une sortie montrant la version actuelle d’AdonisJs :

Output
4.1.0

En ayant installé la CLI AdonisJs, vous avez maintenant accès à la commande adonis et vous pouvez l’utiliser pour créer de nouvelles installations d’un projet AdonisJs, gérer votre projet et générer des fichiers pertinents tels que les contrôleurs, les modèles, etc.

Maintenant, vous pouvez créer un nouveau projet AdonisJs en utilisant la commande adonis comme indiqué ici :

adonis new adonis-quotes-app

La commande précédente va créer une application nommée adonis-quotes-app dans un nouveau répertoire portant le même nom dans votre répertoire de projet local, avec la structure MVC AdonisJs correspondante.

Entrez dans le nouveau dossier d’application :

cd adonis-quotes-app

Lancez ensuite votre application en exécutant :

adonis serve --dev

Cela démarrera le serveur de développement sur le port par défaut 3333 comme spécifié dans le fichier root .env de votre application. Naviguez jusqu’à http://localhost:3333 pour visualiser la page d’accueil d’AdonisJs.

Vous allez maintenant terminer la configuration de votre base de données. Ici, vous allez installer le pilote mysql pour vous connecter à votre serveur MySQL depuis votre application Node.js via npm. Pour commencer, retournez à votre terminal où l’application est en cours d’exécution, arrêtez le processus avec CTRL + C et exécutez la commande suivante :

npm i mysql

Maintenant que vous avez installé avec succès le pilote MySQL Node.js pour cette application, vous devez créer la base de données de l’application et établir la connexion appropriée à celle-ci.

La dernière version de MySQL que vous avez installée à partir du tutoriel indiqué dans les conditions préalables utilise un plugin d’authentification par défaut nommé caching_sha2_password. Il n’est actuellement pas pris en charge par les pilotes Node.js pour MySQL. Pour éviter tout problème de connexion à la base de données depuis votre application, vous devrez créer un nouvel utilisateur MySQL et utiliser le plugin d’authentification actuellement pris en charge-mysql_native_password.

Pour commencer, accédez au client MySQL en utilisant le compte root :

mysql -u root -p

Vous serez invité à saisir le mot de passe de votre compte root configuré lors de l’installation de MySQL.

Ensuite, créez l’utilisateur et le mot de passe en utilisant le plugin mysql_native_password :

CREATE USER 'sammy'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

Vous verrez la sortie suivante :

Output
Query OK, 0 rows affected (0.02 sec)

Ensuite, créez une base de données pour l’application avec :

CREATE DATABASE adonis;

Vous verrez la sortie suivante :

Output
Query OK, 1 row affected (0.03 sec)

Vous avez correctement créé la base de données pour cette application.

Maintenant, activez l’accès à la base de données créée pour le nouvel utilisateur de MySQL. Exécutez la commande suivante pour accorder tous les privilèges à l’utilisateur dans la base de données :

GRANT ALL PRIVILEGES ON adonis.* TO 'sammy'@'localhost';

Rechargez les tables de privilèges en exécutant la commande suivante pour appliquer les modifications que vous venez d’apporter :

FLUSH PRIVILEGES;

Vous verrez la sortie suivante :

Output
Query OK, 0 rows affected (0.00 sec)

Quittez le client MySQL avec :

quit;

Vous avez installé la CLI AdonisJs, créé un nouveau projet AdonisJs et installé mysql via npm. Vous avez également créé la base de données pour cette application et configuré un utilisateur MySQL avec les privilèges appropriés. C’est la configuration de base de votre application. Dans la section suivante, vous commencerez à créer les vues nécessaires pour votre application.

Étape 2 - Utilisation du moteur de modèles Edge

AdonisJs est livré avec son propre moteur de modèles appelé Edge. Il vous permet de créer un modèle HTML réutilisable et permet l’introduction d’une logique front-end dans votre application avec un minimum de code. Edge fournit aux développeurs JavaScript les outils nécessaires, lors du développement d’une application, pour construire une mise en page basée sur des composants, écrire des conditions, utiliser des itérations et créer des couches d’affichage pour maintenir la logique. Tous les fichiers modèles se terminent par l’extension .edge et sont stockés dans le répertoire resources/views.

Voici les vues dont votre application aura besoin pour fonctionner correctement :

• Master Layout : avec Edge, vous pouvez créer une page qui contiendra le CSS, les fichiers JavaScript communs, jQuery et les parties communes de l’interface utilisateur qui resteront les mêmes dans toute l’application (la barre de navigation, le logo, l’en-tête, etc.). Une fois que vous avez établi la mise en page master, les autres vues (pages) de votre application en hériteront.
• Index view : cette page utilisera la mise en page master pour donner des fichiers communs et rendra également le contenu de la page d’accueil de l’application.
• Login page : cette page utilisera également la mise en page master et affichera le formulaire avec les champs de saisie du nom d’utilisateur et du mot de passe, afin que les utilisateurs puissent se passe,
• Register page : ici, les utilisateurs verront un formulaire d’inscription et leurs coordonnées seront enregistrées dans la base de données.
• Create quote page : les utilisateurs utiliseront cette page pour créer une citation.
• Edit quote page : les utilisateurs utiliseront cette page pour modifier une citation.
• View quote page : les utilisateurs utiliseront cette page pour afficher une citation particulière.

Pour commencer, utilisez la commande adonis pour créer la mise en page master en exécutant la commande suivante :

adonis make:view layouts/master

Vous verrez une sortie semblable à ce qui suit :

Output
✔ create  resources/views/layouts/master.edge

Cette commande créera automatiquement un fichier master.edge dans votre dossier resources/views/layouts. Ouvrez le nouveau fichier :

nano resources/views/layouts/master.edge

Ajoutez le code suivant dans le fichier :

<!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>adonis-quotes-app</title>
    {{ style('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') }}
    {{ style('style') }}
    {{ script('https://code.jquery.com/jquery-3.3.1.slim.min.js') }}
</head>
<body>
    <div class="container-fliud">
        @include('navbar')
        @!section('content')
    </div>
    {{ script('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js') }}

</body>
</html>

Dans ce fichier, vous incluez les fichiers CDN pour Bootstrap CSS, Bootstrap JavaScript et jQuery. Vous ajoutez un nom de fichier CSS global de style.css et dans la div vous incluez un fichier partiel nommé navbar. Pour réutiliser des fragments de code HTML dont vous avez besoin sur plusieurs pages de votre application, comme nav ou footer, vous pouvez incorporer des fichiers partiels. Il s’agit de petits fichiers contenant le code répété, ce qui permet de mettre à jour plus rapidement le code de ces éléments en un seul endroit plutôt qu’à chaque fois que le code apparaît. La navbar contient des balises pour les boutons Login et Register, un logo et un lien vers l’accueil.

Grâce à cela, toutes les pages qui seront créées ensuite pour cette application peuvent utiliser la mise en page master et faire apparaître la navbar sans qu’il soit nécessaire de réécrire le contenu. Vous créerez le fichier navbar plus tard dans le tutoriel.

Enfin, vous définissez une balise de section @! section() pour inclure le contenu d’autres pages et les afficher dans la mise en page master. Pour que cela fonctionne comme prévu, toutes les nouvelles pages qui utiliseront la mise en page master doivent également définir une balise de section portant le même nom (c’est-à-dire @section('content')).

Sauvegardez et quittez le fichier une fois que vous avez terminé de le modifier.

Ensuite, vous utiliserez la commande adonis pour créer la barre de navigation :

adonis make:view navbar

Vous verrez une sortie semblable à :

Output
✔ create  resources/views/navbar.edge

Ouvrez le fichier qui vient d’être créé :

nano resources/views/navbar.edge

Ensuite, ajoutez-y le code suivant :

<nav class="navbar navbar-expand-lg navbar-dark text-white">
    <a class="navbar-brand" >LOGO</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active ">
                <a class="btn text-white" href="/">Home</a>
            </li>
        </ul>
    </div>
    <div class="navbar-right" id="navbarNav">
        @loggedIn
            <ul class="navbar-nav">
                    <li>
                        <div class="text-right">
                             <a href="{{route('create.quote')}}" class="btn btn-outline-primary">Create Quote</a>
                        </div>
                    </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       {{ auth.user.username}}
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <form method="POST" action="{{route('logout')}}">
                            {{ csrfField() }}
                              <button  type="submit" class="dropdown-item" href="">logout</button>
                        </form>
                    </div>
                </li>
            </ul>
        @else
            <ul class="navbar-nav">
                <li class="nav-item active pr-2">
                    <a href="{{route('login.create')}}" class="btn btn-outline-danger">
                      login
                    </a>
                </li>
                <li class="nav-item active pr-2">
                    <a href="{{route('register.create')}}" class="btn btn-outline-primary">
                        Register
                    </a>
                </li>
            </ul>
        @endloggedIn
    </div>
</nav>

En plus de définir les liens vers la page d’accueil et un bouton pour s’inscrire et se connecter, vous ajoutez une balise @loggedIn. Grâce à cela, vous pouvez rédiger une instruction conditionnelle selon l’utilisateur authentifié et afficher le contenu approprié. Pour un utilisateur authentifié, l’application affichera son nom d’utilisateur et un bouton pour créer une nouvelle citation. Si un utilisateur n’est pas connecté, votre application affichera un bouton pour se connecter ou s’enregistrer. Cette page sera incluse en tant que fichier partiel de chaque page, comme elle l’était auparavant dans la mise en page master de cette application.

Enregistrez et quittez le fichier.

Maintenant, vous allez créer la page d’index que vous utiliserez pour la page d’accueil de l’application. Cet index rendra et affichera la liste de toutes les citations écrites par les utilisateurs :

adonis make:view index

Vous verrez une sortie semblable à ce qui suit :

Output
✔ create  resources/views/index.edge

Le fichier créé ici sera situé dans resources/views/index.edge. Ouvrez le fichier :

nano resources/views/index.edge

Ensuite, ajoutez le code suivant :

@layout('layouts/master')
@section('content')

<div class="container">
    <div class="text-center">
        @if(flashMessage('successmessage'))
            <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>
        @endif
    </div>
    <div class="row">
        @each(quote in quotes)
            <div class="col-md-4 mb-4 quote-wrapper">
                <a href="/view-quote/{{quote.id}}" class="w-100">
                    <div class="card shadow-lg bg-dark text-white">
                        <div class="card-body">
                            <blockquote class="blockquote mb-0">
                                <p>{{quote.body}}</p>
                                <footer class="blockquote-footer">
                                    <cite title="Source Title"> {{quote.username}}</cite>
                                </footer>
                            </blockquote>
                            @if(auth.user.id == quote.user_id)
                              <div>
                                <a  href="/edit-quote/{{quote.id}}" class="btn btn-primary">edit</a>
                                <a href="/delete-quote/{{quote.id}}" class="btn btn-danger">delete</a>
                              </div>
                            @endif
                        </div>
                    </div>
                </a>
            </div>
        @else
         <div class="col-md-12 empty-quote text-center">
                <p>No inspirational quote has been created</p>
         </div>
        @endeach
    </div>
</div>
@endsection

Ici, vous indiquez que cette vue utilisera la mise en page master en l’étendant. Cette page peut maintenant avoir accès à la navbar et à toutes les bibliothèques et feuilles de style incluses dans la mise en page master. Ensuite, vous itérez sur une série de quotes (citations) en utilisant la balise @each intégrée. Le tableau quotes sera passé à cette vue à partir du QuoteController que vous créerez plus tard dans ce tutoriel. S’il n’y a pas de citations, un message approprié sera affiché.

Enregistrez et quittez ce fichier.

Maintenant, pour créer la page de connexion, exécutez la commande suivante depuis le terminal :

adonis make:view auth/login

Vous verrez une sortie semblable à :

Output
✔ create  resources/views/auth/login.edge

Cela créera automatiquement un dossier auth au sein de ressources/views et créera également un fichier login.edge à l’intérieur. Ouvrez le fichier login.edge :

nano resources/views/auth/login.edge

Ajoutez le contenu suivant :

@layout('layouts/master')
@section('content')
  <div class="container">
    <div class="row">
      <div class="col-md-4 shadow bg-white mt-5 rounded offset-md-4">
        <form method="POST" action="{{route('login.store')}}">
          {{ csrfField() }}
            <div>
              @if(flashMessage('successmessage'))
                <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>
              @endif
            </div>
            <div class="form-group">
              <label for="email">Email address</label>
              <input type="email" class="form-control" id="email" name="email" value="{{old('email','')}}"  placeholder="Enter email">
              {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
            </div>
            <div class="form-group">
              <label for="pasword">Password</label>
              <input type="password" class="form-control" id="password" name="password" value="{{old('password','')}}" placeholder="Password">
              {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
            </div>

            <div class="text-center">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
      </div>
    </div>
  </div>
@endsection

Ce fichier inclut un formulaire qui contient des éléments de saisie que vous utiliserez pour recueillir le nom d’utilisateur et le mot de passe d’un utilisateur enregistré afin qu’il puisse s’authentifier et commencer à créer des citations. La variable {{ csrfField() }} est un autre des éléments importants à noter sur cette page. Il s’agit d’une variable globale qu’AdonisJs utilisera pour passer le jeton d’accès CSRF lors de l’envoi d’une requête POST, PUT et DELETE depuis votre application.

Ce système a été mis en place pour protéger votre application contre les attaques de type Cross-Site Request Forgery (CSRF). Un secret CSRF unique est généré pour chaque utilisateur visitant votre site Web et, une fois que vos utilisateurs envoient une requête HTTP depuis le front-end, un jeton correspondant est généré pour ce secret et transmis avec la requête. Cela permettra au middleware créé pour cette requête dans AdonisJs de vérifier que le jeton et le secret CSRF sont tous deux valides et appartiennent à l’utilisateur actuellement authentifié.

Enregistrez et quittez le fichier une fois que vous avez terminé.

Ensuite, vous allez créer la page d’inscription avec cette commande :

adonis make:view auth/register

Vous obtiendrez une sortie semblable à ceci :

Output
✔ create  resources/views/auth/register.edge

Localisez et ouvrez le fichier nouvellement créé dans resources/views/auth/register.edge :

nano resources/views/auth/register.edge

Ajoutez le code suivant :

@layout('layouts/master')
@section('content')
  <div class="container ">
    <div class="row">
        <div class="col-md-4  bg-white p-3 mt-5 shadow no-border rounded offset-md-4">
          <form method="POST" action="{{route('register.store')}}">
            {{ csrfField() }}
              <div class="form-group">
                <label for="name">Fullname</label>
                <input type="text" class="form-control" id="name" name="name"  value="{{old('name','')}}" placeholder="Enter Fullname">
                {{ elIf('<span class=text-danger>$self</span>', getErrorFor('name'), hasErrorFor('name')) }}
              </div>
              <div class="form-group">
                <label for="email">Email address</label>
                <input type="email" class="form-control" id="email"  name="email" value="{{old('email','')}}" placeholder="Enter email">
                {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
              </div>
              <div class="form-group">
                <label for="pasword">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
              </div>
              <div class="text-center">
                  <button type="submit" class="btn btn-primary">Submit</button>
              </div>
          </form>
        </div>
    </div>
  </div>
@endsection

Tout comme la page de connexion, ce fichier contient un formulaire HTML avec des champs de saisie pour recueillir les informations name (nom), email (adresse e-mail) et password (mot de passe) d’un utilisateur pendant la procédure d’inscription. La variable {{ csrfField() }} est également incluse, car elle est requise pour chaque requête post pour une application AdonisJs.

Enregistrez et quittez le fichier.

Maintenant, vous allez générer un nouveau fichier pour créer une citation en exécutant la commande suivante depuis le terminal :

adonis make:view quotes/create-quote

Vous verrez une sortie semblable à :

Output
✔ create  resources/views/quotes/create-quote.edge

Ouvrez resources/views/quotes/create-quote.edge :

nano resources/views/quotes/create-quote.edge

Et ajoutez-y le contenu suivant :

@layout('layouts/master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6 shadow bg-white mt-5 rounded p-3">
            <div class="float-right">
                <a href="/" class="btn btn-outline-dark ">back</a>
            </div>
                <br>

            <div class="clear-fix"></div>
                <form method="POST" action="{{route('store.quote')}}">
                    {{ csrfField() }}
                    <div class="form-group">
                        <label for="quote">Create Quote</label>
                        <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="Write an inspirational quote"></textarea>
                    </div>

                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
@endsection

Cette page étend la mise en page master et contient un formulaire HTML avec un élément de zone de texte qui permet à un utilisateur de saisir du texte sur plusieurs lignes avant d’être affiché et traité par la route appropriée.

Enregistrez et quittez le fichier une fois que vous avez terminé.

Ensuite, vous allez créer une page pour modifier une citation particulière. Exécutez la commande suivante depuis le terminal :

adonis make:view quotes/edit-quote

Vous verrez la sortie suivante :

Output
✔ create  resources/views/quotes/edit-quote.edge

Ouvrez le fichier avec :

nano resources/views/quotes/edit-quote.edge

Ajoutez le contenu suivant à resources/views/quotes/edit-quote :

@layout('layouts/master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6 shadow bg-white rounded p-3 offset-md-3">
            <div class="float-right">
                <a href="/" class="btn btn-outline-dark ">back</a>
            </div>
            <br>

            <div class="clear-fix"></div>
            <form method="POST" action="/update-quote/{{quote.id}}">
                {{ csrfField() }}
                <div class="form-group">
                    <label for="pasword">Edit Quote</label>
                    <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="write the inspirational quote">{{quote.body}}</textarea>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>

            </form>
        </div>
    </div>
</div>
@endsection

Cette page contient un contenu semblable à celui du fichier create-quote.edge. La différence est qu’elle contient les détails d’une citation particulière qui doit être modifiée, <form method="POST" action="/update-quote/{{quote.id}}">.

Enregistrez et quittez le fichier.

Enfin, générez une page pour afficher une seule citation :

adonis make:view quotes/quote

Vous obtiendrez une sortie semblable à ceci :

Output
✔ create  resources/views/quotes/quote.edge

Ouvrez le fichier avec :

nano resources/views/quotes/quote.edge

Ajoutez le code suivant :

@layout('layouts/master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card shadow-lg bg-dark text-white">
                <div class="card-body">
                    <div class="float-right">
                        <a href="/" class="btn btn-outline-primary ">back</a>
                    </div>
                        <br>
                    <div class="clear-fix"></div>
                    <blockquote class="blockquote mb-0">
                        <p>{{quote.body}}</p>
                        <footer class="blockquote-footer">
                            <cite title="Source Title">{{quote.username}}</cite>
                        </footer>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Cette page affiche les détails d’une citation particulière, qui comprend le corps de la citation, quote.body, et l’auteur qui l’a créée, quote.username.

Une fois que vous avez terminé avec le fichier, enregistrez et quittez.

Vous avez créé toutes les pages requises pour votre application en utilisant le moteur de modèles Edge. Ensuite, vous allez configurer et créer une connexion à la base de données de votre application.

Étape 3 - Création d’un schéma de base de données

Si vous mettez en service votre application maintenant, une erreur se produira car vous n’avez pas encore connecté l’application à une base de données. Dans cette section, vous établirez une connexion à la base de données et utiliserez ensuite la commande adonis pour générer un fichier de migration qui sera utilisé pour créer les tables.

AdonisJs est livré avec un ORM nommé Lucid ORM, qui permet d’implémenter des enregistrements actifs pour travailler avec votre base de données. Il évite d’avoir à écrire des requêtes SQL qui récupèrent les données de la base de données en temps réel. C’est particulièrement utile lorsque l’on travaille sur une application complexe qui nécessite de nombreuses requêtes. Par exemple, il est possible de récupérer toutes les citations de votre application en écrivant ceci :

const quotes = await Quote.all()

Pour procéder à la configuration appropriée de la base de données de votre application, assurez-vous que vous êtes toujours dans le répertoire racine de votre application et créez un fichier .env :

nano .env

Ouvrez le fichier nouvellement créé et ajoutez le contenu suivant :

HOST=127.0.0.1
PORT=3333
NODE_ENV=development
APP_URL=http://${HOST}:${PORT}
CACHE_VIEWS=false
APP_KEY=bTVOEgUvmTCfkvgrK8gEBC3Qxt1xSYr0
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=sammy
DB_PASSWORD=password
DB_DATABASE=adonis
SESSION_DRIVER=cookie
HASH_DRIVER=bcrypt

Par défaut, la connexion à la base de données pour une application AdonisJs est SQLite, que vous changerez pour MySQL ici. Vous indiquez également le PORT et l’environnement de l’application, ainsi que les identifiants de votre base de données. Veillez à remplacer les espaces réservés DB_USER, DB_PASSWORD et DB_DATABASE par vos identifiants.

Ensuite, vous allez créer le modèle et un fichier de migration pour Quote en utilisant la CLI Adonis. Pour ce faire, exécutez la commande suivante :

adonis make:model Quote --migration

Vous verrez une sortie semblable à ce qui suit :

Output
✔ create  app/Models/Quote.js
✔ create  database/migrations/1568209992854_quote_schema.js

Cette commande créera un modèle pour Quote dans le dossier app/Models et un fichier de schéma dans le dossier database/migrations. Le fichier de schéma nouvellement créé sera préfixé avec l’horodatage actuel. Ouvrez le fichier de schéma avec :

nano database/migrations/1568209992854_quote_schema.js

Mettez à jour son contenu avec le code suivant :

'use strict'
/** @type {import('@adonisjs/lucid/src/Schema')} */
const Schema = use('Schema')
class QuoteSchema extends Schema {
  up () {
    this.create('quotes', (table) => {
      table.increments()
      table.integer('user_id').notNullable()
      table.string('username', 80).notNullable()
      table.string('body').notNullable()
      table.timestamps()
    })
  }
  down () {
    this.drop('quotes')
  }
}
module.exports = QuoteSchema

Un fichier de schéma dans AdonisJs nécessite deux méthodes différentes, qui sont :

• up : méthode utilisée pour créer une nouvelle table ou modifier une table existante.
• down : méthode utilisée pour revenir sur les modifications appliquées dans la méthode up.

En plus des champs timestamps() et increments(), vous mettez à jour le contenu du fichier de schéma avec les attributs de champ user_id et username, et la valeur body d’une citation qui sera créée. Les champs user_id et username font référence aux détails de l’utilisateur qui crée une citation particulière. Cela définit une relation de un à plusieurs et signifie qu’un utilisateur peut posséder un nombre infini de citations, mais que chaque citation ne peut appartenir qu’à un seul utilisateur.

Enregistrez et quittez le fichier.

AdonisJs est installé par défaut avec un modèle User et son fichier de migration, qui ne nécessite qu’une petite modification pour établir la relation entre le modèle User et le modèle Quote.

Ouvrez le modèle User dans app/Models/User.js :

app/Models/User.js

Ajoutez cette méthode immédiatement après la méthode tokens() :

...
class User extends Model {
  ...
  tokens () {
    return this.hasMany('App/Models/Token')
  }

  quote () {
    return this.hasMany('App/Models/Quote')
  }
}

module.exports = User

Cela permettra d’établir une relation de un à plusieurs avec le tableau Quote en utilisant user_id comme clé étrangère.

Enregistrez et quittez le fichier.

Pour conclure cette section, utilisez la commande suivante pour lancer les migrations, qui exécuteront la méthode up() de tous les fichiers de migration :

adonis migration:run

Vous verrez une sortie similaire à celle-ci :

Output
migrate: 1503248427885_user.js
migrate: 1503248427886_token.js
migrate: 1568209992854_quote_schema.js
Database migrated successfully in 3.42 s

Vous avez configuré et sécurisé une connexion avec votre base de données. Vous avez également créé un modèle Quote et son fichier de schéma correspondant, et vous avez créé une relation de un à plusieurs entre un User et une variable Quote. Ensuite, vous allez générer les routes et créer des contrôleurs pour traiter les requêtes HTTP et la logique du système, afin de créer, modifier et supprimer une citation.

Étape 4 - Création de contrôleurs et configuration de routes

Dans cette section, vous commencerez par créer des contrôleurs pour gérer toute la logique de l’application, puis vous attacherez ces contrôleurs à une route spécifique pour que les utilisateurs puissent y accéder via une URL.

Pour commencer, vous utiliserez la CLI Adonis pour créer un nouveau contrôleur de requêtes HTTP afin de gérer tous les processus d’authentification pour votre application en exécutant la commande suivante :

adonis make:controller Auth --type http

Cette commande créera un fichier AuthController.js et l’enregistrera dans le dossier app/Controllers/Http. Vous utilisez l’indicateur--type pour indiquer que vous souhaitez que ce contrôleur soit un contrôleur HTTP.

Vous verrez une sortie semblable à ce qui suit :

Output
✔ create  app/Controllers/Http/AuthController.js

Ensuite, ouvrez le fichier de contrôleur nouvellement créé :

nano app/Controllers/Http/AuthController.js

Mettez-le à jour avec le contenu suivant :

'use strict'
const User = use('App/Models/User')
class AuthController {

    loginView({ view }) {
        return view.render('auth.login')
    }
    registrationView({ view }) {
        return view.render('auth.register')
    }

    async postLogin({ request, auth, response}) {
        await auth.attempt(request.input('email'), request.input('password'))
        return response.route('index')
    }

    async postRegister({ request, session, response }) {
        const user = await User.create({
            username: request.input('name'),
            email: request.input('email'),
            password: request.input('password')
        })
        session.flash({ successmessage: 'User have been created successfully'})
        return response.route('login.create');
    }

    async logout ({ auth, response }) {
        await auth.logout()
        return response.route('/')
    }
}
module.exports = AuthController

Dans ce fichier, vous importez le modèle User et créez ensuite deux méthodes appelées loginView() et registerView() pour afficher respectivement les pages de connexion et d’inscription. Enfin, vous créez les méthodes asynchrones suivantes :

• postLogin() : cette méthode permettra d’obtenir les valeurs email et password publiées à l’aide de la méthode request intégrée dans AdonisJs, puis de valider cet utilisateur par rapport aux détails de la base de données. Si l’utilisateur existe dans la base de données et a saisi les bons identifiants, il sera redirigé vers la page d’accueil et authentifié afin de pouvoir créer une nouvelle citation. Sinon, un message indiquant que les identifiants sont incorrects sera affiché.
• postRegister() : cette méthode recevra les valeurs username, email et password d’un utilisateur afin de créer un compte pour cet utilisateur dans la base de données. Un message indiquant que cet utilisateur a bien été créé succès sera transmis à la session, et l’utilisateur sera redirigé vers la page de connexion pour s’identifier et commencer à créer une citation.
• logout() : cette méthode gérera la fonctionnalité de déconnexion et redirigera l’utilisateur vers la page d’accueil.

Enregistrez et quittez le fichier.

Maintenant que vous avez configuré le contrôleur pour procéder à l’inscription et à l’authentification des utilisateurs, vous allez créer un contrôleur de requêtes HTTP pour gérer toutes les opérations concernant les citations.

Retournez dans le terminal et exécutez la commande suivante pour créer QuoteController :

adonis make:controller Quote --type http --resource

L’utilisation de l’indicateur --resource créera un contrôleur avec des méthodes ressources prédéfinies pour effectuer les opérations CRUD (Create, Read, Update, Delete).

Vous verrez :

Output
✔ create  app/Controllers/Http/QuoteController.js

Localiser ce fichier dans app/Controllers/Http/QuoteController.js :

nano app/Controllers/Http/QuoteController.js

Mettez-le à jour avec le contenu suivant :

'use strict'
const Quote = use('App/Models/Quote')

class QuoteController {

  async index ({ view }) {
    const quote = await Quote.all()
    return view.render('index', {
      quotes: quote.toJSON()
    })
  }

  async create ({ view }) {
    return view.render('quotes.create-quote')
  }

  async store ({ request,auth,session, response }) {
    const quote = await Quote.create({
      user_id: auth.user.id,
      username: auth.user.username,
      body: request.input('body')
    })
    session.flash({ 'successmessage': 'Quote has been created'})
    return response.redirect('/')
  }

  async show ({ params, view }) {
    const quote = await Quote.find(params.id)
    return view.render('quotes.view-quote', {
      quote: quote.toJSON()
    })
  }

  async edit ({ params, view }) {
    const quote = await Quote.find(params.id)
    return view.render('quotes.edit-quote', {
      quote: quote.toJSON()
    })
  }

  async update ({ params, request, response, session }) {
    const quote = await Quote.find(params.id)
    quote.body = request.input('body')
    await quote.save()
    session.flash({'successmessage': 'Quote has been updated'})
    return response.redirect('/')
  }

  async destroy ({ params, response, session }) {
    const quote = await Quote.find(params.id)
    await quote.delete()
    session.flash({'successmessage': 'Quote has been deleted'})
    return response.redirect('/')
  }
}
module.exports = QuoteController

Dans ce contrôleur, vous avez importé le modèle Quote et mis à jour les méthodes suivantes qui ont été créées automatiquement en utilisant la CLI AdonisJs :

• index() : pour récupérer toutes les citations de la base de données et les afficher sur la page d’accueil de l’application.
• create() : pour afficher une page permettant de créer des citations.
• store() : pour enregistrer une citation nouvellement créée dans la base de données et retourner une réponse appropriée.
• show() : pour obtenir l’id d’une citation particulière, la récupérer depuis la base de données et l’afficher sur la page de modification de citation.
• edit() : pour obtenir le détail d’une citation particulière de la base de données et l’afficher pour modification.
• update() : pour traiter toute mise à jour effectuée sur une citation et rediriger l’utilisateur vers la page d’accueil.
• destroy() : pour supprimer une citation de la base de données.

Enregistrez et quittez le fichier.

Après avoir créé tous les contrôleurs nécessaires pour cette application, vous pouvez maintenant configurer les routes de manière à ce que les utilisateurs puissent facilement interagir avec votre application. Pour commencer, naviguez vers le fichier start/routes.js.

nano start/routes.js

Remplacez son contenu par le suivant :

'use strict'
const Route = use('Route')

Route.get('/','QuoteController.index').as('index')
Route.get('/register','AuthController.registrationView').as('register.create')
Route.post('/register-store','AuthController.postRegister').as('register.store').validator('Register')
Route.get('/login','AuthController.loginView').as('login.create')
Route.post('/login-store','AuthController.postLogin').as('login.store')
Route.get('/view-quote/:id','QuoteController.show').as('view.quote')

Route.group(() => {
    Route.get('/create-quote','QuoteController.create').as('create.quote')
    Route.post('/store-quote','QuoteController.store').as('store.quote')
    Route.get('/edit-quote/:id','QuoteController.edit').as('edit.quote')
    Route.post('/update-quote/:id','QuoteController.update').as('update.quote')
    Route.get('/delete-quote/:id','QuoteController.destroy').as('delete.quote')
    Route.post('/logout','AuthController.logout').as('logout')
}).middleware(['auth'])

Ici, vous définissez le chemin pour chaque route dans votre application, spécifiez les verbes HTTP pour chaque action, et liez la route à une méthode particulière dans chaque contrôleur. Vous nommez également chacune de ces routes telles qu’elles ont été référencées dans les contrôleurs et les vues.

Pour garantir que seuls les utilisateurs authentifiés puissent accéder à toutes les routes de citation, vous attribuez un middleware de groupe. Et enfin, vous attachez une méthode de validation à la route register.store pour valider les entrées des utilisateurs.

Enregistrez et quittez le fichier.

Vous avez créé vos contrôleurs et configuré les routes de votre application. Ensuite, vous allez créer la méthode de validation définie dans cette étape.

Étape 5 - Validation des entrées des utilisateurs

AdonisJs n’a pas de validateurs intégrés par défaut. Vous allez donc installer et enregistrer le validateur de votre application manuellement.

Exécutez la commande suivante pour l’installer :

adonis install @adonisjs/validator

Ouvrez le fichier suivant pour enregistrer le fournisseur de validateurs :

nano start/app.js

Ensuite, enregistrez le fournisseur de validateurs en l’ajoutant à la liste des fournisseurs comme indiqué ci-dessous :

...
const providers = [
   ...
   '@adonisjs/cors/providers/CorsProvider',
   '@adonisjs/shield/providers/ShieldProvider',
   '@adonisjs/session/providers/SessionProvider',
   '@adonisjs/auth/providers/AuthProvider',
   '@adonisjs/validator/providers/ValidatorProvider'
]

Maintenant que vous avez installé et enregistré le fournisseur de validateurs dans votre application, créez un validateur personnalisé pour valider les entrées des utilisateurs lors de l’inscription avec la commande suivante :

adonis make:validator Register

Cela créera un fichier Register.js dans le répertoire App/validators. Ouvrez le fichier avec :

nano app/Validators/Register.js

Ajoutez le code suivant au fichier :

'use strict'
class Register {
  get rules () {
    return {
      name:'required',
      email:'required|email|unique:users',
      password:'required|min:8'
    }
  }

  get messages(){
    return{
      'name.required':'Full name is required',
      'email.required':'email is required',
      'email.unique':'email already exists',
      'password.required':'password is required',
      'password.min':'password should be at least 8 characters'
    }
  }
}
module.exports = Register

Vous définissez des règles pour des champs spécifiques dans votre application. Si les validations échouent à un moment, le validateur définit automatiquement l’erreur comme un message flash et l’utilisateur est redirigé vers le formulaire.

Enregistrez et quittez le fichier une fois que vous avez terminé de le modifier.

Enfin, pour ajouter le style de votre application, ouvrez le fichier suivant :

nano public/style.css

Remplacez son contenu par le suivant :

@import url('https://fonts.googleapis.com/css?family=Montserrat:300');

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  background-image: url("/splash.png");
  background-color: #220052;
}

* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: underline;
}

p {
  margin: 0.83rem 0;
}

.quote-wrapper {
  margin-top: 20px;
}

.quote-wrapper a {
  text-decoration: none;
}

.quote-wrapper a:hover {
  color: #ffffff;
}

.empty-quote {
  color: #ffffff;
}

form {
  padding: 20px;
}

Dans ce fichier, vous mettez à jour le style CSS de votre application dans le fichier style.css.

Vous avez installé et enregistré un fournisseur de validateurs afin de vérifier les données saisies par les utilisateurs lors de la procédure d’inscription. Vous avez également mis à jour le contenu de votre feuille de style pour ajouter plus de style à l’application. Dans la dernière étape, vous allez tester votre application.

Étape 6 - Mise en service de l’application

Dans cette étape, vous allez mettre en service votre application et créer un utilisateur et un mot de passe pour tester l’identification. Vous allez également ajouter une citation à votre application et la consulter sur la page d’accueil.

Pour tester votre application, démarrez le serveur de développement avec la commande suivante depuis le répertoire racine de votre application :

adonis serve --dev

L’application sera alors lancée sur le port défini dans le fichier root .env, qui est 3333. Naviguez jusqu’à http://localhost:333 depuis votre navigateur.

Pour l’instant, la page d’accueil est vide car vous n’avez pas encore créé de citation. Cliquez sur le bouton Register (S’inscrire).

Entrez vos informations et cliquez sur le bouton Submit (Envoyer) pour terminer le processus d’inscription. Vous serez redirigé vers la page de connexion. Entrez votre adresse e-mail et votre mot de passe pour vous identifier.

Une fois que vous vous êtes identifié, cliquez sur le bouton Create Quote (Créer une citation).

Entrez une citation et naviguez vers la page View all (Tout voir) pour voir votre citation.

Vous avez testé votre application en créant et en authentifiant un utilisateur, et en écrivant une citation.

Conclusion

Dans ce tutoriel, vous avez construit une application Web avec AdonisJs. Vous avez configuré l’application à l’aide de la CLI AdonisJs et utilisé la CLI pour créer d’autres fichiers pertinents tels que des contrôleurs, des modèles et des vues.

Vous pouvez créer des applications Web avec ce framework, quelles que soient leur taille et leur complexité. N’hésitez pas à télécharger le code source de ce projet ici sur GitHub. Pour découvrir d’autres caractéristiques, vous pouvez également consulter la documentation officielle.

Si vous souhaitez explorer certains de nos autres tutoriels sur le framework JavaScript, consultez ce qui suit :

• Comment créer une application de gestion de listes de clients avec React et TypeScript
• Comment créer un blog avec Nest.js, MongoDB et Vue.js
• Comment créer une application météorologique avec Angular, Bootstrap et l’API APIXU