One place for hosting & domains

      AdonisJs

      Erstellen einer Anwendung für ein inspirierendes Zitat unter Verwendung von AdonisJs und MySQL


      Der Autor wählte den Tech Education Fund, um eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

      Einführung

      AdonisJs ist ein in einfachem JavaScript geschriebenes Node.js Web-Framework, das auf allen gängigen Betriebssystemen läuft. Es verwendet das beliebte Designmuster MVC (Model – View – Controller) und bietet ein stabiles Ökosystem für das Schreiben serverseitiger Webanwendungen. Das Framework bietet nahtlose Authentifizierung, SQL ORM (objekt-relationales Mapping), Migrationen und Datenbank-Seeding. AdonisJs weist eine ähnliche Architektur wie das PHP Webanwendungs-Framework Laravel auf, einschließlich der gleichen Ordnerstruktur und mehrere gemeinsam genutzter Einrichtungskonzepte.

      Standardmäßig verwendet AdonisJs die Edge Template Engine, die für eine intuitive Verwendung konzipiert ist. Genau wie Laravel wird AdonisJs mit einem ORM namens Lucid bereitgestellt, das als Schnittstelle für die Kommunikation zwischen den Modellen einer Anwendung und der Datenbank dient. Mit AdonisJs können Entwickler eine Full-Stack-Anwendung erstellen, bei der der Backend-Server für die Anwendung der Geschäftslogik, das Routing und das Rendering aller Seiten der Anwendung verantwortlich ist. Es ist auch möglich, eine Webdienst-API zu erstellen, um JSON-Antworten von einem Controller zurückzugeben; diese Webdienste können dann über Frontend-Frameworks wie Vue.js, React und Angular konsumiert werden.

      In diesem Tutorial erstellen Sie eine Anwendung mit AdonisJs unter Verwendung seiner CLI. Sie erstellen Routen, Controller, Modelle und Ansichten innerhalb Ihrer Anwendung und führen Formularvalidierungen durch. Das Beispiel in diesem Tutorial wird eine Anwendung für ein inspirierendes Zitat sein, bei der sich ein Benutzer registrieren und anmelden kann, um ein inspirierendes Zitat zu erstellen. Diese Demo-Anwendung bietet Ihnen die Möglichkeit zur Ausführung von CRUD (Create, Read, Update und Delete)-Operationen.

      Voraussetzungen

      Bevor Sie mit diesem Leitfaden beginnen, benötigen Sie Folgendes:

      Anmerkung: Dieses Tutorial verwendet für die Entwicklung einen macOS-Rechner. Wenn Sie ein anderes Betriebssystem verwenden, müssen Sie in den ersten Schritten möglicherweise sudo für npm-Befehle verwenden.

      Schritt 1 – Installieren der Adonis CLI

      In diesem Abschnitt werden Sie Adonis CLI und alle erforderlichen Pakete auf Ihrem lokalen Rechner installieren. Die CLI ermöglicht es Ihnen, ein neues AdonisJs-Projekt aufzubauen, sowie Boilerplates für Controller, Middlewares und Modelle in Ihrer Anwendung zu erstellen und zu generieren. Außerdem erstellen Sie Ihre Datenbank für das Projekt.

      Führen Sie den folgenden Befehl aus, um die AdonisJs CLI global auf Ihrem Rechner über npm zu installieren:

      Geben Sie nach Abschluss der Installation den folgenden Befehl im Terminal ein, um die Installation von AdonisJs zu bestätigen und die aktuelle Version anzuzeigen:

      Sie sehen eine Ausgabe, die die aktuelle Version von AdonisJs zeigt:

      Output

      4.1.0

      Mit der erfolgreichen Installation der AdonisJs CLI haben Sie nun Zugriff auf den Befehl adonis und können ihn zum Erstellen neuer Installationen eines AdonisJs-Projekts, zur Verwaltung Ihres Projekts und zum Erzeugen relevanter Dateien wie die Controller, Modelle usw. verwenden.

      Nun können Sie mit der Erstellung eines neuen AdonisJs-Projekts fortfahren, indem Sie den Befehl adonis wie hier gezeigt verwenden:

      • adonis new adonis-quotes-app

      Der vorhergehende Befehl erstellt eine Anwendung namens adonis-quotes-app​​​ in einem neuen Verzeichnis mit demselben Namen in Ihrem lokalen Projektverzeichnis mit der entsprechenden AdonisJs MVC-Struktur.

      Verschieben Sie sie in den neuen Anwendungsordner:

      Starten Sie dann Ihre Anwendung durch Ausführen von:

      Dadurch wird der Entwicklungsserver auf dem Standardport 3333 gestartet, wie in der Root-Datei .env für Ihre Anwendung angegeben. Navigieren Sie zu http://localhost:3333, um die Begrüßungsseite von AdonisJs anzuzeigen.

      Begrüßungsseite von AdonisJs

      Jetzt schließen Sie die Einrichtung Ihrer Datenbank ab. Hier installieren Sie den Treiber mysql, um sich über npm von Ihrer Node.js-Anwendung mit Ihrem MySQL-Server zu verbinden. Gehen Sie zunächst wieder zu Ihrem Terminal zurück, auf dem die Anwendung derzeit läuft, beenden Sie den Prozess mit STRG+C und führen Sie den folgenden Befehl aus:

      Nachdem Sie nun den MySQL Node.js-Treiber für diese Anwendung erfolgreich installiert haben, müssen Sie die Anwendungsdatenbank erstellen und die entsprechende Verbindung zu ihr aufbauen.

      Die neueste Version von MySQL, die Sie aus dem vorbereitendem Tutorial installiert haben, verwendet ein standardmäßiges Authentifizierungs-Plugin namens caching_ha2_password. Dieses wird derzeit von den Node.js-Treibern für MySQL nicht unterstützt. Um Probleme mit der Datenbankverbindung in Ihrer Anwendung zu vermeiden, müssen Sie einen neuen MySQL-Benutzer anlegen und das derzeit unterstützte Authentifizierungs-Plugin mysql_native_password verwenden.

      Um zu beginnen, greifen Sie mit dem Account root auf den MySQL-Client zu:

      Sie werden aufgefordert, das während der MySQL-Installation eingerichtete Passwort für den Account root einzugeben.

      Erstellen Sie als Nächstes den Benutzer und das Passwort unter Verwendung des Plugins mysql_native_password:

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

      Sie sehen den folgenden Output:

      Output

      Query OK, 0 rows affected (0.02 sec)

      Erstellen Sie nachfolgend eine Datenbank für die Anwendung mit:

      Sie sehen den folgenden Output:

      Output

      Query OK, 1 row affected (0.03 sec)

      Damit haben Sie die Datenbank für diese Anwendung erfolgreich erstellt.

      Aktivieren Sie jetzt den Zugriff auf die erstellte Datenbank für den neuen MySQL-Benutzer. Führen Sie den folgenden Befehl aus, um dem Benutzer alle Berechtigungen in der Datenbank zu erteilen:

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

      Laden Sie die Berechtigungstabelle neu, indem Sie den folgenden Befehl ausführen, um die soeben vorgenommenen Änderungen zu übernehmen:

      Sie sehen den folgenden Output:

      Output

      Query OK, 0 rows affected (0.00 sec)

      Beenden Sie den MySQL-Client mit:

      Sie haben die AdonisJs CLI erfolgreich installiert, ein neues AdonisJs-Projekt erstellt und mysql über npm installiert.  Außerdem haben Sie die Datenbank für diese Anwendung erstellt und einen MySQL-Benutzer mit den entsprechenden Berechtigungen eingerichtet. Dies ist die Grundeinrichtung für Ihre Anwendung. Im nächsten Abschnitt beginnen Sie mit der Erstellung der erforderlichen Ansichten für Ihre Anwendung.

      Schritt 2 – Verwenden der Edge Templating Engine

      AdonisJs wird mit einer eigenen Template-Engine namens Edge bereitgestellt. Sie ermöglicht Ihnen die Erstellung einer wiederverwendbaren HTML-Vorlage und die Einführung von Front-End-Logik in Ihre Anwendung mit minimalem Code. Edge stellt JavaScript-Entwickler während der Entwicklung einer Anwendung die Werkzeuge zur Verfügung, um ein komponentenbasiertes Layout zu erstellen, Bedingungen zu schreiben, Iterationen zu verwenden und Anzeigeebenen zur Aufnahme der Logik zu erstellen. Alle Template-Dateien enden mit der Erweiterung .edge und werden im Verzeichnis resources/views gespeichert.

      Nachfolgend sind die Ansichten aufgeführt, die Ihre Anwendung für die ordnungsgemäße Funktionsweise benötigt:

      • Master Layout: Mit Edge können Sie eine Seite erstellen, die das CSS, gängige JavaScript-Dateien, jQuery und gängige Bestandteile der Benutzeroberfläche enthält, die in der gesamten Anwendung gleich bleiben, wie zum Beispiel die Navigationsleiste, das Logo, der Header usw. Sobald Sie die Seite Master Layout erstellt haben, übernehmen andere Ansichten (Seiten) in Ihrer Anwendung diese.
      • Index View: Diese Seite verwendet das Master Layout, um gängige Dateien zu erben und Inhalte für die Homepage der Anwendung darzustellen.
      • Login-Seite: Diese Seite verwendet ebenfalls das Master Layout und stellt das Formular mit den Eingabefeldern für Benutzername und Passwort für die Anmeldung der Benutzer dar.
      • Register-Seite: Hier sehen Benutzer ein Formular zur Registrierung und zur dauerhaften Speicherung der Informationen in der Datenbank.
      • Create Quote-Seite: Benutzer werden diese Seite zum Erstellen eines inspirierenden Zitats verwenden.
      • Edit Quote-Seite: Benutzer werden diese Seite zum Bearbeiten eines Zitats verwenden.
      • View Quote-Seite: Benutzer werden diese Seite zum Anzeigen eines bestimmten Zitats verwenden.

      Verwenden Sie zunächst den Befehl adonis, um die Seite Master Layout zu erstellen, indem Sie den folgenden Befehl ausführen:

      • adonis make:view layouts/master

      Sie werden eine Ausgabe ähnlich der folgenden sehen:

      Output

      ✔ create resources/views/layouts/master.edge

      Dieser Befehl erstellt automatisch eine Datei master.edge in Ihrem Ordner resources/views/layouts. Öffnen Sie die neue Datei:

      • nano resources/views/layouts/master.edge

      Fügen Sie den folgenden Code hinzu:

      /resources/views/layouts/master.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>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>
      

      In dieser Datei schließen Sie die CDN-Dateien für Bootstrap CSS, Bootstrap JavaScript und jQuery ein. Sie fügen einen globalen CSS-Dateinamen style.css hinzu und schließen innerhalb der div eine Partiale-Datei namens navbar ein. Um Fragmente des HTML-Codes, die Sie auf mehreren Seiten Ihrer Anwendung benötigen, wie nav oder footer, wiederzuverwenden, können Sie Partiale einfügen. Dabei handelt es sich um kleinere Dateien, die den sich wiederholenden Code enthalten, sodass der Code für diese Elemente schneller an einer Stelle und nicht bei jedem Auftreten aktualisiert werden kann. Die navbar enthält Markierungen für die Schaltflächen Login und Register, ein Logo und einen Home-Link.

      Auf diese Weise können alle nachfolgenden für diese Anwendung erstellten Seiten das Master-Layout erweitern und die navbar rendern, ohne dass der Inhalt neu geschrieben werden muss. Sie erstellen diese Datei navbar später im Tutorial.

      Abschließend definieren Sie einen Abschnitt-Tag @! section(), um Inhalte anderer Seiten einzuschließen und sie vom Master-Layout rendern zu lassen. Damit dies wie erwartet funktioniert, müssen alle neuen Seiten, die das Master-Layout erweitern, auch einen Abschnitt-Tag mit demselben Namen (d. h. @section('content')) definieren.

      Speichern und schließen Sie die Datei, sobald Sie mit der Bearbeitung fertig sind.

      Als Nächstes verwenden Sie den Befehl adonis, um die Navigationsleiste zu erstellen:

      Sie sehen einen Output, der so ähnlich wie der nachfolgende aussieht:

      Output

      ✔ create resources/views/navbar.edge

      Öffnen Sie die neu erstellte Datei:

      • nano resources/views/navbar.edge

      Fügen Sie dann den folgenden Code hinzu:

      /resources/views/navbar.edge

      <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="https://www.digitalocean.com/">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="https://www.digitalocean.com/#" 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>
      

      Zusätzlich zur Definition der Links zu der Homepage und einer Schaltfläche zum Registrieren und Anmelden fügen Sie ein Tag @loggedIn hinzu. Damit können Sie eine bedingte Anweisung um den authentifizierten Benutzer herum schreiben und bei Bedarf entsprechende Inhalte anzeigen. Für einen authentifizierten Benutzer zeigt die Anwendung den Benutzernamen und eine Schaltfläche zum Erstellen eines neuen Zitats an. Wenn ein Benutzer nicht angemeldet ist, zeigt Ihre Anwendung eine Schaltfläche für die Anmeldung oder die Registrierung an. Diese Seite wird als Partiale auf jeder Seite eingefügt, so wie es zuvor im Master-Layout für diese Anwendung enthalten war.

      Speichern und schließen Sie die Datei.

      Nun erstellen Sie die Indexseite, die Sie für die Homepage der Anwendung verwenden. Sie wird die Liste aller inspirierenden Zitate, die die Benutzer schreiben, rendern und anzeigen:

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create resources/views/index.edge

      Die hier erstellte Datei wird sich in resources/views/index.edge befinden. Öffnen Sie die Datei:

      • nano resources/views/index.edge

      Fügen Sie dann den folgenden Code hinzu:

      /resources/views/index.edge

      @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="https://www.digitalocean.com/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="http://www.digitalocean.com/edit-quote/{{quote.id}}" class="btn btn-primary">edit</a>
                                      <a href="http://www.digitalocean.com/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
      

      Hier geben Sie an, dass diese Ansicht das Layout master durch Erweiterung verwenden wird. Diese Seite hat nun Zugriff auf alle Bibliotheken, Stylesheets und die navbar, die im Layout master enthalten sind. Als Nächstes iterieren Sie über ein Array von quotes (Zitaten) unter Verwendung des integrierten Tags @each. Das Array quotes wird von dem QuoteController, den Sie später in diesem Tutorial erstellen werden, an diese Ansicht übergeben. Wenn keine Zitate vorhanden sind, wird eine entsprechende Meldung angezeigt.

      Speichern und schließen Sie diese Datei.

      Um die Anmeldeseite zu erstellen, führen Sie nun den folgenden Befehl aus:

      • adonis make:view auth/login

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create resources/views/auth/login.edge

      Dadurch wird automatisch ein Ordner auth innerhalb von resources/views erstellt und darin ebenfalls eine Datei login.edge angelegt. Öffnen Sie die Datei login.edge:

      • nano resources/views/auth/login.edge

      Fügen Sie den folgenden Inhalt hinzu:

      /resources/views/auth/login.edge

      @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
      

      Diese Datei enthält ein Formular, das Eingabeelemente enthält,mit denen Sie den Benutzernamen und das Passwort eines registrierten Benutzers erfassen, bevor dieser sich erfolgreich authentifizieren und mit der Erstellung von Zitaten beginnen kann. Ein weiteres wichtiges Element, das Sie auf dieser Seite beachten sollten, ist das {{ csrfField() }}​​​. Es handelt sich dabei um eine globale Variable, die AdonisJs verwendet, um das CSRF-Zugriffstoken zu übergeben, wenn eine POST-, PUT– und DELETE-Anfrage aus Ihrer Anwendung gesendet wird.

      Dies wurde eingerichtet, um Ihre Anwendung vor Cross-Site Request Forgery (CSRF)-Angriffen zu schützen. Es funktioniert, indem es für jeden Benutzer, der Ihre Website besucht, ein eindeutiges CSRF-Geheimnis erzeugt. Sobald Ihre Benutzer eine HTTP-Anfrage vom Frontend aus senden, wird ein entsprechendes Token für dieses Geheimnis generiert und mit der Anfrage weitergegeben. Auf diese Weise kann die für diese Anfrage innerhalb von AdonisJs erstellte Middleware überprüfen, ob sowohl das Token als auch das CSRF-Geheimnis gültig sind und dem aktuell authentifizierten Benutzer gehören.

      Speichern und schließen Sie die Datei, sobald Sie fertig sind.

      Als Nächstes erstellen Sie die Registrierungsseite mit diesem Befehl:

      • adonis make:view auth/register

      Sie werden eine ähnliche Ausgabe wie diese sehen:

      Output

      ✔ create resources/views/auth/register.edge

      Suchen und öffnen Sie die neu erstellte Datei in resources/views/auth/register.edge:

      • nano resources/views/auth/register.edge

      Fügen Sie folgenden Code hinzu:

      resources/views/auth/register.edge

      @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
      

      Ähnlich wie die Anmeldeseite enthält diese Datei ein HTML-Formular mit Eingabefeldern zur Erfassung von Name, E-Mail und Passwort eines Benutzers während des Registrierungsvorgangs. Ebenfalls enthalten ist das {{ csrfField() }}, da es für jede Post-Anfrage für eine AdonisJs-Anwendung erforderlich ist.

      Speichern und schließen Sie die Datei.

      Nun erstellen Sie eine neue Datei, um ein inspirierendes Zitat zu erstellen, indem Sie den folgenden Befehl vom Terminal aus ausführen:

      • adonis make:view quotes/create-quote

      Sie sehen eine Ausgabe wie:

      Output

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

      Öffnen Sie resources/views/quotes/create-quote.edge:

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

      Und fügen Sie den folgenden Inhalt hinzu:

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

      @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="https://www.digitalocean.com/" 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
      

      Diese Seite erweitert das Master-Layout und enthält ein HTML-Formular mit einem Textbereichselement, das es dem Benutzer ermöglicht, Text über mehrere Zeilen einzugeben, bevor er über die entsprechende Route veröffentlicht und gehandhabt wird.

      Speichern und schließen Sie die Datei, sobald Sie fertig sind.

      Erstellen Sie als Nächstes eine Seite zur Bearbeitung eines bestimmten Zitats. Führen Sie den folgenden Befehl vom Terminal aus:

      • adonis make:view quotes/edit-quote

      Sie sehen den folgenden Output:

      Output

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

      Öffnen Sie die Datei mit:

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

      Fügen Sie den folgenden Inhalt zu resources/views/quotes/edit-quote hinzu:

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

      @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="https://www.digitalocean.com/" 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
      

      Diese Seite enthält ähnliche Inhalte wie die Datei create-quote.edge – der Unterschied besteht darin, dass sie die Details eines bestimmten Zitats enthält, die zu bearbeiten sind, <form method="POST" action="/update-quote/{{quote.id}}">.

      Speichern und schließen Sie die Datei.

      Erstellen Sie abschließend eine Seite, um ein einzelnes inspirierendes Zitat anzuzeigen:

      • adonis make:view quotes/quote

      Sie sehen eine Ausgabe, die dieser ähnelt:

      Output

      ✔ create resources/views/quotes/quote.edge

      Öffnen Sie die Datei mit:

      • nano resources/views/quotes/quote.edge

      Fügen Sie folgenden Code hinzu:

      /resources/views/quotes/quote.edge

      @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="https://www.digitalocean.com/" 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
      

      Diese Seite gibt die Details eines bestimmten Zitats wieder, einschließlich des Zitatkörpers quote.body, und des Autors, der es erstellt hat, quote.username.

      Wenn Sie mit der Datei fertig sind, speichern und schließen Sie sie.

      Sie haben alle erforderlichen Seiten für Ihre Anwendung mit Hilfe der Edge Templating Engine erstellt. Als Nächstes konfigurieren und stellen Sie eine Verbindung mit der Datenbank Ihrer Anwendung her.

      Schritt 3 – Erstellen eines Datenbankschemas

      Wenn Sie Ihre Anwendung jetzt bereitstellen, wird ein Fehler ausgegeben, da Sie die Anwendung noch mit einer Datenbank verbinden müssen. In diesem Abschnitt richten Sie eine Verbindung mit der Datenbank ein und verwenden dann den Befehl adonis zur Erzeugung einer Migrationsdatei, die zur Erstellung der Tabellen für die Datenbank verwendet wird.

      AdonisJs enthält ein ORM namens Lucid ORM, das eine aktive Datensatz-Implementierung für die Arbeit mit Ihrer Datenbank bereitstellt. Damit entfällt das mühsame Schreiben von SQL-Abfragen, die Daten in Echtzeit aus der Datenbank abrufen. Dies ist besonders hilfreich bei der Arbeit an einer komplexen Anwendung, die viele Abfragen erfordert. So können Sie beispielsweise alle Zitate aus Ihrer Anwendung abrufen, indem Sie eingeben:

      const quotes = await Quote.all()
      

      Um mit der entsprechenden Konfiguration für Ihre Anwendungsdatenbank fortzufahren, stellen Sie sicher, dass Sie sich immer noch im Stammverzeichnis Ihrer Anwendung befinden und erstellen Sie eine .env-Datei:

      Öffnen Sie die neu erstellte Datei und fügen Sie den folgenden Inhalt hinzu:

      .env

      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
      

      Standardmäßig ist die Datenbankverbindung für eine AdonisJs-Anwendung SQLite, die Sie hier auf MySQL aktualisieren werden. Des Weiteren geben Sie den PORT für die Anwendung, die Anwendungsumgebung und Berechtigungsnachweise für die Datenbank an. Stellen Sie sicher, dass Sie die Platzhalter DB_USER, DB_PASSWORD und DB_DATABASE mit Ihren Berechtigungsnachweisen ersetzen.

      Als Nächstes erstellen Sie das Modell und eine Migrationsdatei für Quote unter Verwendung der Adonis CLI. Führen Sie dazu den folgenden Befehl aus:

      • adonis make:model Quote --migration

      Sie sehen eine Ausgabe, die der folgenden ähnelt:

      Output

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

      Dieser Befehl erstellt ein Modell für Quote im Ordner app/Models und eine Schemadatei in dem Ordner database/migrations. Der neu erstellten Schemadatei wird der aktuelle Zeitstempel vorangestellt. Öffnen Sie die Schemadatei mit:

      • nano database/migrations/1568209992854_quote_schema.js

      Aktualisieren Sie den Inhalt mit dem folgenden Code:

      database/migrations/…quote_schema.js

      '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
      

      Eine Schemadatei in AdonisJs erfordert zwei verschiedene Methoden:

      • up: Wird verwendet, um eine neue Tabelle zu erstellen oder eine bestehende Tabelle zu ändern.
      • down: Wird verwendet, um die bei der Methode up vorgenommene Änderung rückgängig zu machen.

      Zusätzlich zu den Feldern timestamps() und increments() aktualisieren Sie den Inhalt der Schemadatei mit den Feldattributen user_id, username und dem body eines zu erstellenden Zitats. Die Felder user_id und username verweisen auf die Details des Benutzers, der ein bestimmtes Zitat erstellt. Dies definiert eine 1:n-Beziehung und bedeutet, dass ein Benutzer eine unendliche Anzahl von Zitaten besitzen kann, während ein einzelnes Zitat nur einem Benutzer gehören kann.

      Speichern und schließen Sie die Datei.

      AdonisJs wird standardmäßig mit Modell User und der zugehörigen Migrationsdatei installiert. Dies erfordert nur eine kleine Änderung, um die Beziehung zwischen dem Modell User und Quote herzustellen.

      Öffnen Sie das Modell User in app/Models/User.js:

      Fügen Sie diese Methode unmittelbar nach der Methode tokens() hinzu:

      app/Models/User.js

      ...
      class User extends Model {
        ...
        tokens () {
          return this.hasMany('App/Models/Token')
        }
      
        quote () {
          return this.hasMany('App/Models/Quote')
        }
      }
      
      module.exports = User
      

      Dadurch wird eine 1:n-Beziehung mit der Tabelle Quote unter Verwendung von user_id als Fremdschlüssel festgelegt.

      Speichern und schließen Sie die Datei.

      Um diesen Abschnitt abzuschließen, verwenden Sie den folgenden Befehl zur Ausführung von Migrationen, wodurch die Methode up() aller Migrationsdateien ausgeführt wird:

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

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

      Sie haben eine Verbindung mit Ihrer Datenbank konfiguriert und gesichert. Des Weiteren haben Sie ein Modell Quote und die dazugehörige Schemadatei erstellt und eine 1:n-Beziehung zwischen User und Quote hergestellt. Als Nächstes generieren Sie die Routen und Controller zur Bearbeitung von HTTP-Anfragen und die Geschäftslogik zum Erstellen, Bearbeiten und Löschen eines inspirierenden Zitats.

      Schritt 4 – Erstellen von Controllern und Einrichten von Routen

      In diesem Abschnitt beginnen Sie mit der Erstellung von Controllern, die die gesamte Logik für die Anwendung verarbeiten und diese später an eine bestimmte Route anhängen, damit die Benutzer über eine URL darauf zugreifen können.

      Zu Beginn werden Sie mit der Adonis CLI einen neuen HTTP-Request-Controller erstellen, der alle Authentifizierungsprozesse für Ihre Anwendung verarbeiten kann, indem Sie den folgenden Befehl ausführen:

      • adonis make:controller Auth --type http

      Dieser Befehl erstellt eine Datei AuthController.js und speichert sie innerhalb des Ordners app/Controllers/Http. Sie verwenden das Flag --type, um anzugeben, dass dieser Controller ein HTTP-Controller sein soll.

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create app/Controllers/Http/AuthController.js

      Öffnen Sie als Nächstes die neu erstellte Controller-Datei:

      • nano app/Controllers/Http/AuthController.js

      Aktualisieren Sie sie mit dem folgenden Inhalt:

      app/Controllers/Http/AuthController.js

      '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("https://www.digitalocean.com/")
          }
      }
      module.exports = AuthController
      

      In dieser Datei importieren Sie das Modell User und erstellen dann zwei Methoden namens loginView() und registerView(), um die Anmelde- bzw. Registrierungsseite zu rendern. Abschließend erstellen Sie die folgenden asynchronen Methoden:

      • postLogin(): Mit dieser Methode erhalten Sie den Wert von email und password, die mit Hilfe der in AdonisJs eingebauten Methode request gepostet wurden, und validieren dann diesen Benutzer anhand der Details in der Datenbank. Wenn ein solcher Benutzer in der Datenbank existiert und den korrekten Berechtigungsnachweis eingegeben hat, wird er zurück auf die Homepage umgeleitet und authentifiziert, bevor er ein neues Zitat erstellen kann. Andernfalls wird eine Meldung angezeigt, die auf den falschen Berechtigungsnachweis hinweist.
      • postRegister(): Dies erhält den Wert von username, email und password für einen Benutzer, um ein Konto für diesen Benutzer in der Datenbank zu erstellen. Eine Nachricht mit der Angabe, dass dieser Benutzer erfolgreich erstellt wurde, wird an die Sitzung weitergeleitet, und der Benutzer wird auf die Anmeldeseite umgeleitet, um authentifiziert zu werden und mit der Erstellung eines Zitats zu beginnen.
      • logout(): Diese Methode verarbeitet die Logout-Funktionalität und leitet den Benutzer zurück auf die Homepage.

      Speichern und schließen Sie die Datei.

      Nachdem Sie nun den Controller für die Registrierung und Authentifizierung von Benutzern eingerichtet haben, fahren Sie mit der Erstellung eines HTTP-Request-Controllers für die Verwaltung aller Operationen in Bezug auf Zitate fort.

      Führen Sie, zurück im Terminal, den folgenden Befehl aus, um den QuoteController zu erstellen:

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

      Die Verwendung des Flags --resource erstellt einen Controller mit vordefinierten kreativen Methoden zur Durchführung von CRUD (Create, Read, Update und Delete)-Operationen.

      Sie sehen:

      Output

      ✔ create app/Controllers/Http/QuoteController.js

      Finden Sie diese Datei innerhalb von app/Controllers/Http/QuoteControllers.js:

      • nano app/Controllers/Http/QuoteController.js

      Aktualisieren Sie sie mit dem folgenden Inhalt:

      app/Controllers/Http/QuoteController.js

      '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("https://www.digitalocean.com/")
        }
      
        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("https://www.digitalocean.com/")
        }
      
        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("https://www.digitalocean.com/")
        }
      }
      module.exports = QuoteController
      

      In diesem Controller haben Sie das Modell Quote importiert und die folgenden Methoden aktualisiert, die automatisch mit AdonisJs CLI erstellt wurden:

      • index(): Um alle Zitate aus der Datenbank zu holen und sie auf der Homepage der Anwendung darzustellen.
      • create(): Um eine Seite zum Erstellen von Zitaten darzustellen.
      • store(): Um ein neu erstelltes Zitat dauerhaft in der Datenbank zu speichern und eine entsprechende Antwort zurückzugeben.
      • show(): Um die id eines bestimmten Zitats zu erhalten, es aus der Datenbank abzurufen und auf der Seite zur Bearbeitung von Zitaten anzuzeigen.
      • edit(): Um Details eines bestimmten Zitats aus der Datenbank abzurufen und zur Bearbeitung darzustellen.
      • update(): Um jede Aktualisierung eines Zitats zu verarbeiten und den Benutzer zurück auf die Homepage zu leiten.
      • destroy(): Um ein bestimmtes Zitat zu löschen und vollständig aus der Datenbank zu entfernen.

      Speichern und schließen Sie die Datei.

      Nachdem Sie alle erforderlichen Controller für diese Anwendung erstellt haben, können Sie nun die Routen so einrichten, dass die Benutzer problemlos mit Ihrer Anwendung interagieren können. Navigieren Sie zu Beginn zu der Datei start/routes.js:

      Ersetzen Sie den Inhalt mit dem folgenden:

      start/routes.js

      'use strict'
      const Route = use('Route')
      
      Route.get("https://www.digitalocean.com/",'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'])
      

      Hier definieren Sie den Pfad für jede Route in Ihrer Anwendung, geben die HTTP-Verben für jede Aktion an und binden die Route an eine bestimmte Methode in jedem Controller. Außerdem benennen Sie jede dieser Routen so, wie sie in den Controllern und Ansichten referenziert wurden.

      Um sicherzustellen, dass nur authentifizierte Benutzer auf alle Zitatrouten zugreifen können, ordnen Sie eine Gruppe namens Middleware zu. Schließlich hängen Sie eine Validierer-Methode an die Route register.store an, um die Benutzereingaben zu validieren.

      Speichern und schließen Sie die Datei.

      Sie haben Ihre Controller erstellt und die Routen für Ihre Anwendung eingerichtet. Als Nächstes erstellen Sie die in diesem Schritt definierte Validierer-Methode.

      Schritt 5 – Validieren der Benutzereingabe

      Standardmäßig verfügt AdonisJs nicht über integrierte Validierer. Daher müssen Sie den Validierer für Ihre Anwendung manuell installieren und registrieren.

      Führen Sie den folgenden Befehl aus, um ihn zu installieren:

      Öffnen Sie die folgende Datei, um den Anbieter des Validieres (Validator Provider) zu registrieren:

      Registrieren Sie dann den Anbieter des Validieres, indem Sie ihn an die Liste der Anbieter anhängen, wie nachfolgend gezeigt:

      start/app.js

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

      Nachdem Sie den Anbieter des Validieres innerhalb Ihrer Anwendung installiert und registriert haben, erstellen Sie nun mit dem folgenden Befehl einen benutzerdefinierten Validierer, um die Eingabe des Benutzers während der Registrierung zu validieren:

      • adonis make:validator Register

      Dadurch wird eine Datei Register.js im Verzeichnis App/Validators erstellt. Öffnen Sie die Datei mit:

      • nano app/Validators/Register.js

      Fügen Sie den folgenden Code zur Datei hinzu:

      app/Validators/Register.js

      '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
      

      In Ihrer Anwendung definieren Sie Regeln für bestimmte Felder. Wenn Validierungen zu einem beliebigen Zeitpunkt fehlschlagen, setzt der Validierer den Fehler automatisch als Flash-Meldung und der Benutzer wird zurück zum Formular geleitet.

      Speichern und schließen Sie die Datei, sobald Sie die Bearbeitung abgeschlossen haben.

      Um Ihrer Anwendung ein Design hinzuzufügen, öffnen Sie schließlich die folgende Datei:

      Ersetzen Sie die Inhalte mit dem folgenden:

      /public/style.css

      @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;
      }
      

      In dieser Datei aktualisieren Sie das CSS-Design Ihrer Anwendung in der Datei style.css.

      Sie haben einen Anbieter eines Validieres installiert und registriert, um die Eingabe von Benutzern während des Registrierungsvorgangs zu überprüfen. Des Weiteren haben Sie den Inhalt Ihres Stylesheets aktualisiert, um der Anwendung mehr Design hinzuzufügen. Im letzten Schritt testen Sie Ihre Anwendung.

      Schritt 6 – Bereitstellen der Anwendung

      In diesem Schritt stellen Sie Ihre Anwendung bereit und erstellen einen Benutzer und ein Passwort zum Testen der Authentifizierung. Außerdem fügen Sie Ihrer Anwendung ein Zitate hinzu und zeigen es auf der Homepage an.

      Um Ihre Anwendung zu testen, starten Sie den Entwicklungsserver mit dem folgenden Befehl aus dem Stammverzeichnis Ihrer Anwendung:

      Dadurch wird die Anwendung auf dem innerhalb der Stammdatei .env definierten Port, 3333, gestartet. Navigieren Sie in Ihrem Browser zu http://localhost:3333.

      Homepage der Zitat-Anwendung

      Die Homepage ist zur Zeit leer, da Sie keine Zitate erstellt haben. Klicken Sie auf die Schaltfläche Register.

      Anmeldeseite

      Geben Sie Ihre Informationen ein und klicken Sie auf die Schaltfläche Submit, um den Registrierungsvorgang abzuschließen. Sie werden auf die Anmeldeseite umgeleitet. Geben Sie Ihre E-Mail-Adresse und Ihr Passwort für die Authentifizierung ein.

      Anmeldeseite

      Nachdem Sie authentifiziert sind, klicken Sie auf die Schaltfläche Create Quote.

      Seite „Zitat erstellen“

      Geben Sie ein Zitat ein und navigieren Sie zu der Seite View all, um Ihr Zitat anzuzeigen.

      Seite „Alle Zitate anzeigen“

      Sie haben Ihre Anwendung getestet, indem Sie einen Benutzer erstellt und authentifiziert und anschließend ein Zitat verfasst haben.

      Zusammenfassung

      In diesem Tutorial haben Sie eine Webanwendung mit AdonisJs erstellt. Sie haben die Anwendung unter Verwendung der AdonisJs CLI eingerichtet und die CLI zum Erstellen anderer relevanter Dateien wie Controller, Modelle und Ansichten verwendet.

      Sie können Webanwendungen mit diesem Framework unabhängig von Ihrer Größe und Komplexität erstellen. Sie können den Quellcode für dieses Projekt hier auf GitHub herunterladen. Um weitere Funktionen zu erkunden, können Sie auch die offizielle Dokumentation besuchen.

      Wenn Sie einige unserer anderen JavaScript-Framework-Tutorials erkunden möchten, sehen Sie sich Folgendes an:



      Source link

      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 :

      Remarque : ce tutoriel utilise une machine macOS pour le développement. Si vous utilisez un autre système d’exploitation, vous devrez peut-être utiliser sudo pour les commandes npm lors des premières étapes.

      É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 :

      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 :

      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 :

      Lancez ensuite votre application en exécutant :

      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.

      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 :

      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 :

      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 :

      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 :

      Vous verrez la sortie suivante :

      Output

      Query OK, 0 rows affected (0.00 sec)

      Quittez le client MySQL avec :

      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 :

      /resources/views/layouts/master.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>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 :

      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 :

      /resources/views/navbar.edge

      <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="https://www.digitalocean.com/">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="https://www.digitalocean.com/#" 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 :

      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 :

      /resources/views/index.edge

      @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="https://www.digitalocean.com/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="http://www.digitalocean.com/edit-quote/{{quote.id}}" class="btn btn-primary">edit</a>
                                      <a href="http://www.digitalocean.com/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 :

      /resources/views/auth/login.edge

      @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 :

      resources/views/auth/register.edge

      @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 :

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

      @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="https://www.digitalocean.com/" 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 :

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

      @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="https://www.digitalocean.com/" 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 :

      /resources/views/quotes/quote.edge

      @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="https://www.digitalocean.com/" 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 :

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

      .env

      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 :

      database/migrations/…quote_schema.js

      '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 :

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

      app/Models/User.js

      ...
      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 :

      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 :

      app/Controllers/Http/AuthController.js

      '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("https://www.digitalocean.com/")
          }
      }
      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 :

      app/Controllers/Http/QuoteController.js

      '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("https://www.digitalocean.com/")
        }
      
        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("https://www.digitalocean.com/")
        }
      
        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("https://www.digitalocean.com/")
        }
      }
      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.

      Remplacez son contenu par le suivant :

      start/routes.js

      'use strict'
      const Route = use('Route')
      
      Route.get("https://www.digitalocean.com/",'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 :

      Ouvrez le fichier suivant pour enregistrer le fournisseur de validateurs :

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

      start/app.js

      ...
      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 :

      app/Validators/Register.js

      '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 :

      Remplacez son contenu par le suivant :

      /public/style.css

      @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 :

      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.

      Page d'accueil de l'application de citations

      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).

      Page d'inscription

      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.

      Page de connexion

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

      Page de création de citation

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

      Page Voir toutes les citations

      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 :



      Source link

      Cómo crear una aplicación de citas inspiradoras con AdonisJs y MySQL


      El autor seleccionó el Tech Education Fund para que recibiese una donación como parte del programa Write for DOnations.

      Introducción

      AdonisJs es un marco web simple de Node.js escrito en JavaScript que funciona en los principales sistemas operativos. Utiliza el popular patrón de diseño MVC (modelo-vista-controlador) y ofrece un ecosistema estable para escribir aplicaciones web del lado del servidor. El marco presenta características de autenticación sin inconvenientes, SQL ORM (mapeo de objetos a datos relacionales), migraciones y propagación de bases de datos. AdonisJs tiene una arquitectura similar a la del marco PHP de aplicaciones web Laravel e incluye la misma estructura de carpeta y varios conceptos de configuración compartidos.

      Por defecto, AdonisJs usa el motor de plantillas de Edge que está diseñado para usarse de forma intuitiva. Al igual que Laravel, AdonisJs incluye una ORM llamada Lucid que sirve como interfaz para la comunicación entre los modelos de una aplicación y la base de datos. Con AdonisJs, los desarrolladores pueden crear una aplicación completa en la que el servidor de backend se encargará de aplicar la lógica de negocios, realizar direccionamientos y mostrar todas las páginas de la aplicación. También es posible crear una API de servicio web para mostrar respuestas de JSON desde un controlador; estos servicios web pueden utilizarse en frameworks de frontend, como Vue.js, React y Angular.

      En este tutorial, creará una aplicación con AdonisJs usando su CLI. Creará rutas, controladores, modelos y vistas en su aplicación, y ejecutará validaciones de formularios. El ejemplo de este tutorial será una aplicación de citas inspiradoras en la que un usuario puede registrarse e iniciar sesión para crear una cita inspiradora. Esta aplicación de prueba le dará la oportunidad de realizar operaciones CURD (crear, leer, actualizar y norrar”).

      Requisitos previos

      Para comenzar a seguir los pasos de esta guía, necesitará lo siguiente:

      Nota: En este tutorial se usa una máquina macOS para el desarrollo. Si usa otro sistema operativo, es posible que deba usar sudo para comandos npm en los primeros pasos.

      Paso 1: Instalar Adonis CLI

      En esta sección, instalará Adonis CLI y todos sus paquetes necesarios en su máquina local. El CLI le permitirá escribir un nuevo proyecto AdonisJs, así como crear y generar código estándar para los controladores, los middlewares y los modelos de su aplicación. También creará su base de datos para el proyecto.

      Ejecute el siguiente comando para instalar AdonisJs CLI de forma global en su máquina a través de npm:

      Una vez que se complete el proceso de instalación, ingrese el siguiente comando en la terminal para confirmar la instalación de AdonisJs y ver la versión actual:

      Verá un resultado que mostrará la versión actual de AdonisJs:

      Output

      4.1.0

      Con la instalación correcta de AdonisJs CLI, ahora tendrá acceso al comando adonis y podrá usarlo para crear nuevas instalaciones de un proyecto de AdonisJs, administrar su proyecto y generar archivos pertinentes, como controladores y modelos, entre otros.

      Ahora, puede proceder a crear un nuevo proyecto de AdonisJs usando el comando adonis como se muestra aquí:

      • adonis new adonis-quotes-app

      Con el comando anterior se creará una aplicación llamada adonis-quotes-app en un nuevo directorio con el mismo nombre del directorio de su proyecto local, con la estructura MVC pertinente de AdonisJs.

      Diríjase a la nueva carpeta de la aplicación:

      Luego, inicie su aplicación ejecutando lo siguiente:

      Esto iniciará el servidor de desarrollo en el puerto predeterminado 3333, como se especifica dentro del archivo root .env para su aplicación. Diríjase a http://localhost:3333 para ver la página de bienvenida de AdonisJs.

      Página de bienvenida de AdonisJs

      A continuación, completará la configuración de su base de datos. Aquí, instalará el controlador mysql para establecer conexión con su servidor de MySQL desde su aplicación de Node.js a través de npm. Para comenzar, vuelva a su terminal, donde la aplicación esté actualmente en ejecución, detenga el proceso con CTRL + C y ejecute el siguiente comando:

      Ahora que ha instaló correctamente el controlador de Node.js de MySQL para esta aplicación, deberá crear la base de datos de la aplicación y configurar la conexión correspondiente.

      En la última versión de MySQL que instaló en el tutorial de los requisitos previos se utiliza un complemento de autenticación predeterminado llamado caching_sha2_password. Actualmente, esta no es compatible con los controladores de Node.js de MySQL. Para evitar cualquier problema de conexión de la base de datos de su aplicación, deberá crear un nuevo usuario de MySQL y usar el complemento de autenticación que se admite actualmente: mysql_native_password.

      Para comenzar, acceda al cliente MySQL usando la cuenta root:

      Se le solicitará ingresar la contraseña de su cuenta root configurada durante la instalación de MySQL.

      Luego, cree el usuario y la contraseña usando el complemento mysql_native_password:

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

      Verá lo siguiente:

      Output

      Query OK, 0 rows affected (0.02 sec)

      Luego, cree una base de datos para la aplicación con lo siguiente:

      Verá lo siguiente:

      Output

      Query OK, 1 row affected (0.03 sec)

      Con esto, habrá creado con éxito la base de datos para esta aplicación.

      Ahora, habilite el acceso a la base de datos creada para el nuevo usuario de MySQL. Ejecute el siguiente comando para conceder todos los privilegios al usuario en la base de datos:

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

      Vuelva a cargar las tablas de concesión ejecutando el siguiente comando para aplicar los cambios que acaba de realizar:

      Verá lo siguiente:

      Output

      Query OK, 0 rows affected (0.00 sec)

      Cierre el cliente MySQL con lo siguiente:

      Instaló el AdonisJs CLI, creó un nuevo proyecto de AdonisJs e instaló mysql​​​​ a través de npm con éxito. También creó la base de datos para esta aplicación y configuró un usuario MySQL con los privilegios correspondientes. Esta es la configuración básica para su aplicación y, en la siguiente sección, comenzará a crear las vistas necesarias para ella.

      Paso 2: Usar el motor de creación de plantillas Edge

      AdonisJs se envía con su propio motor de plantillas llamado Edge. Le permite crear una plantilla HTML reutilizable y permite la introducción de lógica de frontend en su aplicación con un volumen de código mínimo. Edge proporciona a los desarrolladores de JavaScript las herramientas mientras desarrollan una aplicación para crear un diseño basado en componentes, escribir condicionales, usar iteraciones y crear diseños de vista para contener lógicas. Todos los archivos de plantilla llevan la extensión .edge y se almacenan en el directorio resources/views.

      Las siguientes son las vistas que su aplicación necesitará para funcionar correctamente:

      • Diseño maestro: con Edge, puede crear una página que contendrá el CSS, los archivos de JavaScript comunes, jQuery y partes comunes de la interfaz de usuario que se mantendrán sin cambios en toda la aplicación; por ejemplo, la barra de navegación, el logo y el encabezado. Una vez que haya establecido la página de diseño maestro, otras vistas (páginas) en su aplicación la heredarán.
      • Vista de índice: esta página usará el diseño maestro para heredar archivos comunes y también mostrará el contenido de la página de inicio de la aplicación.
      • Página de inicio de sesión: en esta página también se usará el diseño maestro y se mostrará el formulario con los campos de entrada para el nombre de usuario y la contraseña, para que los usuarios inicien sesión.
      • Página de registro: en ella, los usuarios verán un formulario para registrarse y sus datos se guardarán en la base de datos.
      • Página de creación de citas: los usuarios usarán esta página para crear una cita inspiradora.
      • Página de edición de citas: los usuarios usarán esta página para editar una cita.
      • Página de visualización de citas: los usuarios usarán esta página para ver una cita en particular.

      Para comenzar, utilice el comando adonis para crear la página de diseño maestro ejecutando el siguiente comando:

      • adonis make:view layouts/master

      Visualizará un resultado similar al siguiente:

      Output

      ✔ create resources/views/layouts/master.edge

      Este comando creará automáticamente un archivo master.edge en su carpeta resources/views/layouts. Abra el nuevo archivo:

      • nano resources/views/layouts/master.edge

      Añádale el siguiente código:

      /resources/views/layouts/master.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>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>
      

      En este archivo, incluya los archivos de CDN para Bootstrap CSS, Bootstrap JavaScript y jQuery. Se agrega un nombre de archivo CSS global style.css y, dentro del div, se incluye un archivo partial llamado navbar. Para volver a la utilizar los fragmentos de código HTML que necesita en varias páginas de su aplicación, como nav o footer, puede incorporar parciales. Estos son archivos más pequeños que contienen el código repetido y agilizan su actualización para estos elementos en un lugar, en vez de hacerlo en cada instancia en la que aparece. La navbar contiene marcado para los botones de Login y Register, un logo y un enlace de inicio.

      Una vez hecho esto, todas las páginas posteriores que se crearán para esta aplicación pueden extender el diseño maestro y mostrar la navbar sin la necesidad de volver a escribir el contenido. Creará este archivo navbar más tarde en el tutorial.

      Por último, se define una etiqueta de sección @! section() para incluir contenido de otras páginas y que el diseño maestro las muestre. Para que esto funcione como se espera, todas las nuevas páginas que ampliarán el diseño maestro también deben definir una etiqueta de sección con el mismo nombre (es decir, @section('content')).

      Guarde y cierre el archivo una vez que termine de editarlo.

      Luego, use el comando adonis para crear la barra de navegación:

      Verá un resultado similar a lo siguiente:

      Output

      ✔ create resources/views/navbar.edge

      Abra el archivo recién creado:

      • nano resources/views/navbar.edge

      Luego, añádale el siguiente código:

      /resources/views/navbar.edge

      <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="https://www.digitalocean.com/">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="https://www.digitalocean.com/#" 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>
      

      Además de definir los enlaces a la página de inicio de sesión y los botones para registrarse e iniciar sesión, añada la etiqueta @loggedIn. Después de hacer hecho esto, puede escribir una instrucción condicional para el usuario autenticado y mostrar los contenidos apropiados cuando sea necesario. Para un usuario autenticado, la aplicación mostrará su nombre de usuario y un botón para crear una nueva cita. Si el usuario no inició sesión, su aplicación mostrará un botón para hacerlo o para registrarse. Esta página se incluirá como parcial en cada página, al igual que en el diseño maestro anterior de esta aplicación.

      Guarde el archivo y ciérrelo.

      Ahora, deberá crear la página de índice que usará para la página de inicio de la aplicación. Esta brindará y mostrará la lista de todas las citas inspiradoras que los usuarios escriban:

      Visualizará un resultado similar al siguiente:

      Output

      ✔ create resources/views/index.edge

      El archivo creado aquí estará ubicado en resources/views/index.edge. Abra el archivo:

      • nano resources/views/index.edge

      Luego, añada el siguiente código:

      /resources/views/index.edge

      @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="https://www.digitalocean.com/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="http://www.digitalocean.com/edit-quote/{{quote.id}}" class="btn btn-primary">edit</a>
                                      <a href="http://www.digitalocean.com/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
      

      Aquí, debe indicar que esta vista usará el diseño master extendiéndolo. Esta página ahora tendrá acceso a todas las bibliotecas, las hojas de estilos y la navbar​​ incluida en el diseño master. Luego, debe iterar la matriz de quotes​​​ usando la etiqueta integrada @each. La matriz de quotes pasará a esta vista desde el QuoteController que creará más tarde en este tutorial. Si no hay citas, se mostrará un mensaje apropiado.

      Guarde este archivo y ciérrelo.

      Para crear la página de inicio de sesión, ejecute el siguiente comando desde la terminal:

      • adonis make:view auth/login

      Verá un resultado similar a este:

      Output

      ✔ create resources/views/auth/login.edge

      Esto creará automáticamente una carpeta auth dentro de resources/views y también un archivo login.edge dentro de ella. Abra el archivo login.edge:

      • nano resources/views/auth/login.edge

      Añada el siguiente contenido:

      /resources/views/auth/login.edge

      @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
      

      Este archivo posee un formulario que contendrá elementos de entrada que se utilizarán a fin de recopilar el nombre de usuario y la contraseña de un usuario registrado para su correcta autenticación y comenzar a crear citas. Otro elemento importante que se debe tener en cuenta en esta página es {{ csrf Field()}. Es una variable global que AdonisJs usará para pasar el token de acceso CSRF al enviar una solicitud POST, PUT y DELETE desde su aplicación.

      Esto se implementó para proteger su aplicación contra ataques de falsificación de petición en sitios cruzados (CSRF). Funciona generando un secreto de CSRF único para cada usuario que visite su sitio web y una vez que sus usuarios envían una solicitud HTTP del frontend, se genera un token secreto correspondiente que se pasa junto con la solicitud. Esto permitirá que el middleware creado para esta solicitud en AdonisJs verifique que el token y el secreto de CSRF sean válidos y pertenezcan al usuario autenticado.

      Guarde y cierre el archivo una vez que termine.

      Luego, cree la página de registro con este comando:

      • adonis make:view auth/register

      Verá un resultado similar a este:

      Output

      ✔ create resources/views/auth/register.edge

      Ubique y abra el archivo recién creado en resources/views/auth/register.edge:

      • nano resources/views/auth/register.edge

      Añada el siguiente código:

      resources/views/auth/register.edge

      @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
      

      De manera similar a lo que figura en la página de inicio de sesión, este archivo contiene un formulario HTML con campos de entrada para recopilar el name, el email y la password del usuario durante el proceso de registro. También se incluye el {{ csrfField()}}​​, debido que este se requiere para cada solicitud post de una aplicación de AdonisJs.

      Guarde el archivo y ciérrelo.

      Ahora, debe generar un nuevo archivo para crear una cita inspiradora ejecutando el siguiente comando desde la terminal:

      • adonis make:view quotes/create-quote

      Verá un resultado como este:

      Output

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

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

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

      Añada a este el siguiente contenido:

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

      @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="https://www.digitalocean.com/" 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
      

      Esta página extiende el diseño maestro y contiene un formulario HTML con un elemento de área de texto que permite al usuario ingresar texto en varias filas antes de su publicación y su manipulación a través de la ruta correspondiente.

      Guarde y cierre el archivo una vez que termine.

      Luego, cree una página para editar una cita en particular. Ejecute el siguiente comando desde la terminal:

      • adonis make:view quotes/edit-quote

      Verá lo siguiente:

      Output

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

      Abra el archivo con lo siguiente:

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

      Añada el siguiente contenido a resources/views/quotes/edit-quote:

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

      @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="https://www.digitalocean.com/" 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
      

      Esta página tiene contenido similar al del archivo create-quote.edge. La diferencia radica en que que contiene los detalles de una cita en particular que es necesario editar, <form method="POST" action="/update-quote/{{quote.id}}">​​​.

      Guarde el archivo y ciérrelo.

      Por último, genere una página para ver una única cita inspiradora:

      • adonis make:view quotes/quote

      Verá un resultado similar a este:

      Output

      ✔ create resources/views/quotes/quote.edge

      Abra el archivo con lo siguiente:

      • nano resources/views/quotes/quote.edge

      Añada el siguiente código:

      /resources/views/quotes/quote.edge

      @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="https://www.digitalocean.com/" 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
      

      Esta página brinda los detalles de una cita en particular, que incluye el cuerpo de la cita, quote.body y el nombre del autor que la creó, quote.username.

      Una vez que terme con el archivo, guárdelo y ciérrelo.

      Creó todas las páginas necesarias para su aplicación usando el motor de plantillas Edge. Luego, configure y cree una conexión con la base de datos de su aplicación.

      Paso 3: Crear un esquema de base de datos

      Si utiliza su aplicación ahora, generará un error porque aún no conectó la aplicación con una base de datos. En esta sección, configurará una conexión a la base de datos y luego usará el comando adonis a fin de generar un archivo de migración que se usará para crear las tablas.

      AdonisJs usa una ORM llamada Lucid ORM, que proporciona la implementación de active record para trabajar con su base de datos. Elimina la molestia de escribir consultas SQL que recuperan datos de la base de datos en tiempo real. Es especialmente útil cuando se trabaja en una aplicación compleja que requiere muchas consultas. Como ejemplo, puede recuperar todas las citas de su aplicación escribiendo lo siguiente:

      const quotes = await Quote.all()
      

      Para proceder con la configuración apropiada de la base de datos de su aplicación, asegúrese de estar aún posicionado en el directorio root de su aplicación y cree un archivo .env:

      Abra el archivo recién creado y añada el siguiente contenido:

      .env

      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
      

      Por defecto, la conexión de la base de datos para una aplicación AdonisJs es SQLite, que actualizará a MySQL aquí. Especifique también el PORT para la aplicación, el entorno de la aplicación y las credenciales de su base de datos. Asegúrese de sustituir el DB_USER, DB_PASSWORD y el marcador de posición DB_DATABASE por sus credenciales.

      Luego, creará el modelo y un archivo de migración para Quote usando Adonis CLI. Para hacer esto, ejecute el siguiente comando:

      • adonis make:model Quote --migration

      Visualizará un resultado similar al siguiente:

      Output

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

      Este comando creará un modelo para Quote en la carpeta app/Models y un archivo de esquema en la carpeta database/migrations​​​. El archivo de esquema recién creado llevará la marca de tiempo actual como prefijo. Abra el archivo de esquema con lo siguiente:

      • nano database/migrations/1568209992854_quote_schema.js

      Actualice su contenido con el siguiente código:

      database/migrations/…quote_schema.js

      '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 archivo de esquema de AdonisJs requiere dos métodos diferentes, que son los siguientes:

      • up: Se utiliza para crear una nueva tabla o modificar una tabla existente.
      • down: se utiliza para revertir los cambios aplicados en el método up.

      Además de los campos timestamps() y increments(), debe el contenido del archivo de esquema con los atributos de campo user_id​​​, username y el body de la cita que se creará Los campos user_id y username hacen referencia a los detalles del usuario que crea una cita en particular. Esto define una relación de uno a muchos y significa que un usuario puede poseer un número infinito de citas mientras que una sola cita solo puede pertenecer a un usuario.

      Guarde el archivo y ciérrelo.

      AdonisJs viene instalado con un modelo User y su archivo de migración por defecto, el cual requiere solo una pequeña modificación para establecer la relación entre el modelo User y Quote.

      Abra el modelo User en app/Models/User.js:

      Añada este método de inmediato después del método tokens():

      app/Models/User.js

      ...
      class User extends Model {
        ...
        tokens () {
          return this.hasMany('App/Models/Token')
        }
      
        quote () {
          return this.hasMany('App/Models/Quote')
        }
      }
      
      module.exports = User
      

      Esto establecerá una relación de uno a muchos con la tabla Quote usando user_id como la clave externa.

      Guarde el archivo y ciérrelo.

      Para finalizar esta sección, utilice el siguiente comando para ejecutar migraciones, el cual ejecutará el método up() de todos los archivos de migración:

      El resultado debe ser similar a lo siguiente:

      Output

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

      Ya configuró y protegió una conexión con su base de datos. También creó un modelo Quote con su archivo de esquema correspondiente y una relación uno a muchos entre User y Quote. Luego, debe generar las rutas y crear controladores para gestionar solicitudes HTTP y la lógica de negocios para crear, editar y eliminar una cita inspiradora.

      Paso 4: Crear controladores y configurar rutas

      En esta sección, primero creará controladores para gestionar toda la lógica de la aplicación y luego añadirá estos controladores a una ruta específica para que los usuarios puedan acceder a ella a través de una URL.

      Para comenzar, usando Adonis CLI creará un nuevo controlador de solicitud HTTP para gestionar todos los procesos de autenticación de su aplicación con el siguiente comando:

      • adonis make:controller Auth --type http

      Este comando creará un archivo AuthController.js y lo guardará en la carpeta app/Controllers/Http. Utilice el indicador --type para indicar que desea que este controlador sea HTTP.

      Visualizará un resultado similar al siguiente:

      Output

      ✔ create app/Controllers/Http/AuthController.js

      Luego, abra el archivo del controlador recién creado:

      • nano app/Controllers/Http/AuthController.js

      Actualícelo con el siguiente contenido:

      app/Controllers/Http/AuthController.js

      '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("https://www.digitalocean.com/")
          }
      }
      module.exports = AuthController
      

      En este archivo, debe importar el modelo User y luego crear dos métodos denominados loginView() y registerView() para mostrar las páginas de inicio de sesión y registro respectivamente. Por último, se deben crear los siguientes métodos asíncronos:

      • postLogin(): este método obtendrá los valores de email y password publicados con ayuda del método request incorporado de AdonisJs, y luego validará este usuario con los detalles de la base de datos. Si dicho usuario existe en la base de datos e ingresó la credencial correcta, regresará a la página de inicio y se autenticará para crear una nueva cita. De lo contrario,aparecerá un mensaje que indicará que las credenciales ingresadas son incorrectas.
      • postRegister(): este método recibirá el valor de username, email y password para que un usuario cree una cuenta para dicho usuario en la base de datos. Se pasará a la sesión un mensaje que indicará que se creó correctamente dicho usuario y este accederá a la página de inicio de sesión para autenticarse y comenzar a crear una cita.
      • logout(): este método gestionará la función de inicio de sesión y redireccionará el usuario de vuelta a la página de inicio.

      Guarde el archivo y ciérrelo.

      Ahora que configuró el controlador para registrar y autenticar usuarios, proseguirá creando un controlador de solicitudes HTTP para administrar todas las operaciones relacionadas con citas.

      En el terminal, ejecute el siguiente comando para crear el QuoteController:

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

      Usar el indicador --resource creará un controlador con métodos ingeniosos predefinidos para realizar operaciones CRUD (crear, leer, actualizar y borrar).

      Verá lo siguiente:

      Output

      ✔ create app/Controllers/Http/QuoteController.js

      Ubique este archivo en app/Controllers/Http/QuoteController.js:

      • nano app/Controllers/Http/QuoteController.js

      Actualícelo con el siguiente contenido:

      app/Controllers/Http/QuoteController.js

      '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("https://www.digitalocean.com/")
        }
      
        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("https://www.digitalocean.com/")
        }
      
        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("https://www.digitalocean.com/")
        }
      }
      module.exports = QuoteController
      

      En este controlador, importó el modelo Quote y actualizó los siguientes métodos que se crearon automáticamente mediante AdonisJs CLI:

      • index(): permite buscar todas las citas de la base de datos y mostrarlas en la página de inicio de la aplicación.
      • create(): permite representar una página para crear citas.
      • store(): permite persistir una cita recién creada en la base de datos y mostrar una respuesta adecuada.
      • show(): permite obtener el id de una cita en particular, obtenerlo de la base de datos y procesarlo en la página para editar citas.
      • edit(): permite obtener el detalle de una cita en particular de la base de datos y representarla para su edición
      • update(): permite procesar cualquier actualización de una cita y redirigir al usuario de vuelta a la página de inicio.
      • destroy(): permite eliminar una cita en particular y eliminarla por completo de la base de datos.

      Guarde el archivo y ciérrelo.

      Después de crear todos los controladores necesarios para esta aplicación, podrá configurar las rutas para que los usuarios puedan interactuar fácilmente con su aplicación. Para comenzar, diríjase al archivo start/routes.js

      Reemplace su contenido con lo siguiente:

      start/routes.js

      'use strict'
      const Route = use('Route')
      
      Route.get("https://www.digitalocean.com/",'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'])
      

      Aquí, debe definir el camino para cada ruta en su aplicación, especificar los verbos del HTTP para cada acción y vincular la ruta a un método particular en cada controlador. También debe nombrar cada una de estas rutas, ya que se referencian en los controladores y las vistas.

      Para garantizar que solo los usuarios autenticados puedan acceder a todas las rutas de citas, asigne un middleware de grupo con nombre. Por último, debe añadir un método validator a la ruta de register.store para validar la entrada del usuario.

      Guarde el archivo y ciérrelo.

      Creó sus controladores y configuró las rutas para su aplicación. Luego, cree el método de validación definido en este paso.

      Paso 5: Validar el resultado del usuario

      AdonisJs no tiene validadores incorporados por defecto. Por ello, instale y registre el validador para su aplicación manualmente.

      Ejecute el siguiente comando para instalarlo:

      Abra el siguiente archivo para registrar el proveedor del validador:

      Luego, registre el proveedor del validador agregándolo a la lista de proveedores, como se muestra a continuación:

      start/app.js

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

      Ahora que instaló y registró el proveedor del validador en su aplicación, cree un validador personalizado para validar la entrada del usuario durante el registro con el siguiente comando:

      • adonis make:validator Register

      Con esto se creará un archivo Register.js en el directorio App/validators. Abra el archivo con:

      • nano app/Validators/Register.js

      Añada el siguiente código al archivo:

      app/Validators/Register.js

      '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
      

      En su aplicación, debe definir reglas para campos específicos. Si las validaciones fallan en algún momento, el validador establecerá automáticamente el error como mensaje flash y el usuario regresará al formulario.

      Guarde y cierre el archivo una vez que termine de editarlo.

      Por último, para añadir estilo a su aplicación, abra el siguiente archivo:

      Reemplace su contenido por lo siguiente:

      /public/style.css

      @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;
      }
      

      En este archivo, debe actualizar el estilo CSS de su aplicación en el archivo style.css.

      Instaló y registró un proveedor de validador para verificar la entrada de los usuarios durante el proceso de registro. También actualizó el contenido de su hoja de estilos para añadir más estilos a la aplicación. En el último paso, probará su aplicación.

      Paso 6: Presentar la aplicación

      En este paso, presentará su aplicación y creará un usuario y una contraseña para probar la autenticación. También agregará una cita a su aplicación y la verá en la página de inicio.

      Para probar su aplicación, inicie el servidor de desarrollo con el siguiente comando desde el directorio root de su aplicación:

      Esto iniciará la aplicación en el puerto definido dentro del archivo .env root, el cual es 3333. Diríjase a http://localhost:3333 desde su navegador.

      Página de inicio de la aplicación de citas

      La página de inicio estará vacía en este momento, ya que no creó citas. Haga clic en el botón Register.

      Página de registro

      Ingrese sus detalles y haga clic en el botón Submit para completar el proceso de registro. Accederá a la página de inicio de sesión. Ingrese su dirección de correo electrónico y su contraseña para la autenticación.

      Página de inicio de sesión

      Una vez que esté autenticado, haga clic en el botón Crear cita.

      Página de creación de citas

      Ingrese una cita y diríjase a la página View all para ver su cita.

      Página de visualización de todas las citas

      Probó su aplicación creando y autenticando un usuario y, luego, escribiendo una cita.

      Conclusión

      A lo largo de este tutorial, creó una aplicación web con AdonisJs. Configuró la aplicación usando el AdonisJs CLI y aprovechó el CLI para crear otros archivos importantes, como controladores, modelos y vistas.

      Puede crear aplicaciones web con este marco independientemente de su tamaño y complejidad. Puede descargar el código fuente de este proyecto aquí en GitHub. Para ver más características, también puede visitar la documentación oficial.

      Si desea ver algunos de nuestros otros tutoriales del marco de JavaScript, puede consultar lo siguiente:



      Source link