One place for hosting & domains

      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

      Verwenden von Visual Studio Code für die Remoteentwicklung über das Remote-SSH-Plugin


      Einführung

      Visual Studio Code ist eine beliebte Integrated Developer Environment (IDE) für Entwickler. Dank ihres großen Spektrums an Plugins, eines Minimaldesigns und plattformübergreifender Unterstützung eignet sie sich perfekt für Entwickler aller Kenntnisstufen. In diesem Tutorial geht es um die Verwendung des Remote-SSH-Plugins, das eine Remoteentwicklung von Software ermöglicht. Mit diesem Plugin können Sie Dateien auf Ihrer lokalen Workstation bearbeiten, Entwicklungsaufgaben wie Programmausführung, Komponententests oder statische Analysen aber auf einem Remoteserver ausführen.

      Es gibt viele Gründe, warum dies hilfreich sein kann. Möglicherweise verfügen Sie zum Beispiel über eine Windows-Workstation und möchten unter Windows entwickeln, während der Code später in Linux ausgeführt werden soll. Vielleicht benötigen Sie mehr RAM- oder Verarbeitungsleistung, als Ihr aktueller Rechner hat, oder wollen aufgrund einer Unternehmensrichtlinie Code fern von Ihrem persönlichen Rechner halten, oder Ihre Workstation unberührt lassen.

      In diesem Tutorial aktivieren Sie das Remote-SSH-Plugin, konfigurieren Visual Studio Code so, dass Code auf dem Remoteserver ausgeführt wird, und führen Code von Ihrer lokalen Visual Studio Code-Installation auf dem Remoteserver aus.

      Voraussetzungen

      Um mit diesem Leitfaden fortfahren zu können, benötigen Sie:

      • Einen lokalen Entwicklungscomputer, auf dem Windows, MacOSX oder Linux ausgeführt wird. Dieses Tutorial funktioniert nicht auf ChromeOS-Geräten.
      • Visual Studio Code, das Sie von der offiziellen Website herunterladen und installieren können.
      • Ein generiertes SSH-Schlüsselpaar:
      • Einen Ubuntu 18.04-Server, der gemäß der Anleitung zur Einrichtung des Ubuntu 18.04-Servers eingerichtet wurde, einschließlich eines sudo-fähigen non-root users und einer Firewall.

      Schritt 1 — Installieren des Remote-SSH-Plugins

      Im Extensions Marketplace können Sie für verschiedene Tools und Programmiersprachen unterstützte Erweiterungen und Erweiterungen von Drittanbietern herunterladen. Hier suchen Sie nach dem Remote-SSH-Plugin und installieren es.

      Auf der linken Seite der IDE befindet sich eine vertikale Reihe mit fünf Symbolen. Das unterste Symbol, das wie vier Quadrate in einem Kästchen aussieht, dessen oberes rechtes Quadrat nach außen ragt, ist das Symbol für den Extensions Marketplace:

      Stelle des Extensions Marketplace-Symbols

      Sie können auch auf diesen Abschnitt zugreifen, indem Sie Strg+Umschalttaste+X drücken. Wenn Sie diese Seite öffnen, sehen Sie zum Herunterladen und Installieren vorgeschlagene Plugins.

      Wenn der Extensions Marketplace geöffnet ist, geben Sie Remote-SSH in die Suchleiste Extensions in Marketplace durchsuchen ein. Wenn Sie das Plugin finden, wählen Sie es aus und klicken Sie dann auf die grüne Schaltfläche Installieren, um die Erweiterung zu installieren.

      Suchen nach dem Remote-SSH-Plugin

      Die Erweiterung ist nun installiert. Als Nächstes konfigurieren Sie die Erweiterung, damit Sie sich mit Ihrem Server verbinden können.

      Schritt 2 — Konfigurieren des Remote-SSH-Plugins und Verbinden mit Ihrem Server

      Nachdem Sie das Plugin installiert haben, können Sie es nun konfigurieren, um eine Verbindung mit einem Server herzustellen. Dazu benötigen Sie folgende Informationen:

      • Die IP-Adresse oder den Hostnamen des Servers.
      • Den Benutzernamen, mit dem Sie sich verbinden.
      • Den privaten Schlüssel, den Sie zur Authentifizierung Ihres Benutzers verwenden werden.

      Sie verwenden diese Informationen zum Erstellen einer SSH-Konfigurationsdatei, die Visual Studio Code zur Herstellung einer SSH-Verbindung mit dem Server verwenden kann, um Dateien zu synchronisieren und Code in Ihrem Namen auszuführen. Diese Konfiguration erstellen Sie mit Visual Studio Code.

      Nachdem Sie das Remote-SSH-Plugin installiert haben, sehen Sie nun ein kleines grünes Feld in der unteren linken Ecke der Benutzeroberfläche von Visual Studio Code. Wenn Sie mit dem Mauszeiger über das Feld fahren, steht im Popup Remotefenster öffnen. Die Schaltfläche sieht ungefähr wie ein Größer-als-Zeichen unter einem Kleiner-als-Zeichen >< aus, wie im folgenden Bild dargestellt:

      Grüne Schaltfläche zum Öffnen eines Remotefensters

      Klicken Sie auf die Schaltfläche, woraufhin oben in der Mitte ein Dialogfeld erscheint. Wählen Sie Remote-SSH: Konfigurationsdatei öffnen… aus der Liste:

      Auswählen von "SSH konfigurieren" in der Benutzeroberfläche

      In der nächsten Eingabeaufforderung werden Sie gefragt, welche Konfigurationsdatei Sie öffnen möchten. Wenn Sie Windows verwenden, sehen Sie zwei Speicherorte: einen in Ihrem persönlichen Benutzerverzeichnis und einen am Installationsspeicherort für SSH. Zum Konfigurieren des Servers sollten Sie die Datei in Ihrem Benutzerverzeichnis verwenden.

      Wählen Sie die Datei aus, woraufhin Ihr Editor die config-Datei öffnet. Fügen Sie der Datei folgenden Code hinzu, um die Verbindung mit Ihrem Server festzulegen, indem Sie die hervorgehobenen Abschnitte durch die Informationen für Ihren Server ersetzen:

      config

      Host my_remote_server
          HostName your_server_ip_or_hostname
          User sammy
          IdentityFile /location/of/your/private/key
      

      So funktioniert diese Konfigurationsdatei:

      • Host: Gibt einen Namen für Ihren Host an. Damit können Sie beim Herstellen einer Verbindung mit dem Server einen kurzen Namen oder eine Abkürzung anstelle der vollständigen IP-Adresse oder des Hostnamens verwenden.
      • HostName: Der tatsächliche Hostname des Servers, der entweder eine IP-Adresse oder ein vollqualifizierter Domänenname ist.
      • User: Der Benutzer, mit dem Sie eine Verbindung herstellen möchten.
      • IdentityFile: Der Pfad zu Ihrem privaten SSH-Schlüssel. In Mac- und Linux-Systemen finden Sie diesen in Ihrem Stammverzeichnis in einem versteckten .ssh-Verzeichnis, das typischerweise id_rsa heißt. Wenn Sie Windows verwenden, haben Sie einen Speicherort zur Speicherung dieser Datei angegeben, als Sie diese mit putty-gen erstellt haben.

      Geben Sie die entsprechenden Werte in Ihrer Datei an und speichern Sie die Datei.

      Visual Studio Code ist nun konfiguriert und bereit, sich mit Ihrem Server zu verbinden. Klicken Sie unten links auf die grüne Schaltfläche Remotefenster öffnen und wählen Sie Remote-SSH: Mit Host verbinden…

      Herstellen einer Verbindung mit dem Server von Visual Studio Code

      Sobald Sie damit fertig sind, werden alle verfügbaren und konfigurierten Server im Dropdown-Menü angezeigt. Wählen Sie den Server, mit dem Sie sich verbinden möchten, aus dieser Liste aus.

      Wenn Sie sich von Ihrem Rechner zum ersten Mal mit diesem Server verbinden, werden Sie wahrscheinlich eine Aufforderung mit dem SSH Fingerprint-Verifizierungsdialog erhalten, wie im folgenden Bild zu sehen:

      Bestätigen Ihres SSH Fingerprint

      Dadurch wird sichergestellt, dass Sie sich wirklich mit dem richtigen Server verbinden. Sie können dies überprüfen, indem Sie sich bei Ihrem Server manuell anmelden und ssh-keygen -l -f /etc/ssh/ssh_host_key.pub ausführen, um den Fingerabdruck des Servers anzuzeigen. Wenn dieser Fingerabdruck mit dem übereinstimmt, der in Visual Studio Code angezeigt wird, dann verbinden Sie sich tatsächlich mit dem richtigen Server, sodass Sie auf Fortfahren klicken können.

      Visual Studio Code öffnet standardmäßig ein neues Fenster, sobald eine neue Verbindung hergestellt wird. Ein neues Fenster mit dem Empfangsbildschirm wird angezeigt. Sie wissen, dass Ihre Verbindung erfolgreich hergestellt wurde, wenn unten links im grünen Feld SSH: your_ip_address_or_hostname angezeigt wird. Das bedeutet, dass Visual Studio Code verbunden ist und mit Ihrem Remoteserver kommuniziert.

      Erfolgreiche SSH-Verbindung

      Nachdem Sie verbunden sind, können Sie nun Befehle und Code aus Ihrem Editor ausführen.

      Schritt 3 — Ausführen von Code auf dem Remoteserver

      Das Remote-SSH-Plugin ist fertig konfiguriert, sodass es an der Zeit ist, Code auf Ihrem Remotecomputer auszuführen. Öffnen Sie ein Terminalfenster, indem Sie aus der Navigationsleiste oben im Fenster Visual Studio Terminal auswählen und auf Neues Terminal klicken. Sie können auch ein Terminal öffnen, indem Sie Strg+Umschalttaste+` drücken. Das Terminal, das geöffnet wird, ist ein Terminal auf Ihrem Remoteserver, nicht auf Ihrem lokalen Rechner.

      Wenn sich das Terminal öffnet, geben Sie folgenden Befehl aus, um die IP-Adresse Ihres Servers anzuzeigen und zu überprüfen, ob Sie mit Ihrem Remoteserver verbunden sind:

      Sie sehen in Ihrem Terminal folgende Ausgabe:

      Output

      1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever preferred_lft forever inet6 ::1/128 scope host valid_lft forever preferred_lft forever 2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000 link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff inet your_server_ip brd your_broadcast_address scope global eth0 valid_lft forever preferred_lft forever ...

      Um die Fähigkeit zur Ausführung von Remotecode zu testen, erstellen Sie in Ihrem Editor eine neue Python-Datei namens hello.py. Wenn Sie mit Ihrem Remoteserver verbunden sind, werden alle über Visual Studio Code erstellten Dateien auf diesem Server gespeichert, nicht auf Ihrem lokalen Rechner.

      Fügen Sie der Datei folgende Inhalte hinzu:

      hello.py

      print("Hello Sammy!")
      

      Um das Programm auf Ihrem Server auszuführen, öffnen Sie in Visual Studio Code ein Terminal über das Navigationsmenü oder drücken Sie die Tastenfolge Strg+Umschalt+`. Da diese Terminalsitzung mit Ihrem Remoteserver verbunden ist, führen Sie im Terminal folgenden Befehl zur Ausführung Ihres hello.py-Programms aus:

      Die Ausgabe Ihres Programms wird angezeigt.

      Ausführen Ihres Python-Skripts

      Sie können die Datei auch über das Kontextmenü Debug ausführen, indem Sie Ohne Debugging ausführen wählen.

      Anmerkung: Wenn Sie in Visual Studio Code Entwicklungserweiterungen installiert haben (wie die Python-Erweiterung), müssen Sie diese Erweiterungen auf Ihrem Server über den Extension Marketplace neu installieren. Falls Sie diese Plugins zuvor in Visual Studio Code installiert haben, zeigt der Marketplace, wenn Sie erneut nach ihnen suchen, Installieren in SSH: Hostname an. Achten Sie stets darauf, in welchem Entwicklungskontext Sie sich befinden, da Visual Studio Code dort Ihre Plugins installieren und Dateien erstellen wird. Wenn Sie versuchen, Code auszuführen, ohne diese Plugins installiert zu haben, werden in der unteren rechten Ecke des Bildschirms Fehlerdialogfelder angezeigt, in denen Sie zur Installation der Plugins auf Ihrem Remoteserver aufgefordert werden. Nachdem Sie sie installiert haben, müssen Sie Visual Studio Code wahrscheinlich neu laden. Wenn Sie es neu starten, wird es auf dem Remoteserver weiter ausgeführt, ohne dass Sie manuell eine neue Verbindung herstellen müssen.

      Zusammenfassung

      Sie haben Visual Studio Code nun zur Entwicklung auf einem Remoteserver mit SSH konfiguriert. Remoteausführung mit einer IDE bietet viele Vorteile, einschließlich der Fähigkeit, schnell zu testen, wie Ihr Code in verschiedenen Betriebssystemen und Hardwarespezifikationen ausgeführt wird. Solange Sie über eine Internetverbindung verfügen, können Sie sich mit Ihrem Server verbinden und über beliebige Computer mit Ihrem Code arbeiten. Außerdem können Sie mit einer Linux-Umgebung entwickeln, selbst wenn Sie Windows als primäres Betriebssystem verwenden.



      Source link

      So verwenden Sie Datenbankmigrationen und Seeders für die abstrakte Datenbank-Einrichtung in Laravel


      Migrationen und Seeders sind leistungsfähige Datenbank-Dienstprogramme, die vom Laravel-PHP-Framework bereitgestellt werden, um Entwicklern einen schnellen Bootstrap, eine schnelle Löschung und neue Erstellung der Datenbank einer Anwendung zu ermöglichen. Diese Dienstprogramme minimieren Probleme der Datenbankinkonsistenz, die auftreten können, wenn mehrere Entwickler an derselben Anwendung arbeiten: Neue Mitwirkende müssen nur ein paar artisan-Befehle ausführen, um die Datenbank auf einer neuen Installation einzurichten.

      In diesem Leitfaden erstellen Sie Migrationen und Seeders, um eine Datenbank einer Laravel-Demo-Anwendung mit Beispieldaten zu füllen. Am Ende können Sie Ihre Datenbank-Tabellen nur mit artisan-Befehlen so oft Sie möchten löschen und neu erstellen.

      Voraussetzungen

      Um diesen Leitfaden auszuführen, benötigen Sie:

      Anmerkung: In diesem Leitfaden verwenden wir eine containerisierte Entwicklungsumgebung, die von Docker Compose verwaltet wird, um die Anwendung auszuführen. Sie können die Anwendung jedoch auch auf einem LEMP-Server ausführen. Um dies einzurichten, können Sie unseren Leitfaden So installieren und konfigurieren Sie Laravel mit LEMP unter Ubuntu 18.04 ausführen.

      Schritt 1 – Erhalt der Demo-Anwendung

      Zu Beginn rufen wir die Demoversion der Laravel-Anwendung aus dem Github Repository ab. Wir beschäftigen uns mit dem Zweig tutorial-02, der eine Docker-Compose-Einrichtung beinhaltet, um die Anwendung auf Containern auszuführen. In diesem Beispiel laden wir die Anwendung in unseren Home-Ordner herunter, aber Sie können jedes Verzeichnis Ihrer Wahl verwenden:

      • cd ~
      • curl -L https://github.com/do-community/travellist-laravel-demo/archive/tutorial-2.0.1.zip -o travellist.zip

      Da wir den Anwendungscode als .zip-Datei heruntergeladen haben, benötigen wir den Befehl unzip, um ihn zu entpacken. Wenn Sie es nicht vor Kurzem getan haben, aktualisieren den lokalen Paketindex Ihres Rechners:

      Installieren Sie dann das unzip-Paket:

      Entzippen Sie danach den Inhalt der Anwendung:

      Benennen Sie dann das entpackte Verzeichnis für einen leichteren Zugriff in travellist-demo​​ um:

      • mv travellist-laravel-demo-tutorial-2.0.1 travellist-demo

      Im nächsten Schritt erstellen wir eine .env Konfigurationsdatei, um die Anwendung einzurichten.

      Schritt 2 – Einrichten der .env Datei der Anwendung

      In Laravel wird eine .env-Datei verwendet, um umgebungsabhängige Konfigurationen einzurichten, wie Anmeldeangaben und alle Informationen, die zwischen Bereitstellungen variieren können. Diese Datei ist nicht Teil der Revisionskontrolle.

      Warnung: Die Umgebungs-Konfigurationsdatei enthält sensible Informationen über Ihren Server, einschließlich Anmeldedaten zur Datenbank und Sicherheitsschlüssel. Aus diesem Grund sollten Sie diese Datei nie öffentlich teilen.

      Die Werte in der .env-Datei haben Vorrang vor den Werten, die in regelmäßigen Konfigurationsdateien festgelegt sind, die sich im Verzeichnis config befinden. Jede Installation in einer neuen Umgebung erfordert eine maßgeschneiderte Umgebungsdatei, um Dinge wie Datenbank-Verbindungseinstellungen, Debug-Optionen, Anwendungs-URL und andere Objekte festzulegen, die je nach der Umgebung variieren können.

      Navigieren Sie zum Verzeichnis travellist-demo:

      Jetzt erstellen wir eine neue .env Datei, um die Konfigurationsoptionen für die Entwicklungsumgebung anzupassen, die wir einrichten. Laravel wird mit einer .env-Musterdatei geliefert, die wir zur Erstellung unserer eigenen kopieren können:

      Öffnen Sie diese Datei mit nano oder dem Texteditor Ihrer Wahl:

      So sieht Ihre .env-Datei jetzt aus:

      .env

      APP_NAME=Travellist
      APP_ENV=dev
      APP_KEY=
      APP_DEBUG=true
      APP_URL=http://localhost:8000
      
      LOG_CHANNEL=stack
      
      DB_CONNECTION=mysql
      DB_HOST=db
      DB_PORT=3306
      DB_DATABASE=travellist
      DB_USERNAME=travellist_user
      DB_PASSWORD=password

      Die aktuelle .env-Datei aus der Demo-Anwendung travellist enthält Einstellungen, um die containerisierte Umgebung zu verwenden, die wir im letzten Teil dieser Serie mit Docker Compose erstellt haben. Sie müssen keine dieser Werte ändern, aber Sie können gerne DB_DATABASE, DB_USERNAME und DB_PASSWORD ändern, da diese von unserer Datei docker-compose.yml automatisch abgerufen werden, um die Entwicklungsdatenbank einzurichten. Stellen Sie jedoch sicher, dass die Variable DB_HOST unverändert bleibt, da sie auf den Namen unseres Datenbank-Dienstes innerhalb der Docker-Compose-Umgebung verweist.

      Wenn Sie Änderungen an der Datei vornehmen, stellen Sie sicher, dass Sie sie durch Drücken von STRG + X, Y, dann der EINGABETASTE gespeichert und geschlossen haben.

      Anmerkung: Wenn Sie sich dafür entschieden haben, die Anwendung auf einem LEMP-Server auszuführen, müssen Sie die hervorgehobenen Werte ändern, um Ihre eigenen Datenbankeinstellungen, einschließlich der Variablen DB_HOST, zu berücksichtigen.

      Schritt 3 – Installieren von Anwendungsabhängigkeiten mit Composer

      Jetzt verwenden wir Composer, das Abhängigkeitsmanagement-Tool von PHP, um die Abhängigkeiten der Anwendung zu installieren und sicherzustellen, dass wir artisan-Befehle ausführen können.

      Rufen Sie Ihre Docker-Compose-Umgebung mit dem folgenden Befehl auf. Dadurch werden das Image travellist für den app-Dienst erstellt und die zusätzlichen Docker-Images eingefügt, die von den Diensten nginx und db benötigt werden, um die Anwendungsumgebung zu erstellen:

      Output

      Creating network "travellist-demo_travellist" with driver "bridge" Building app Step 1/11 : FROM php:7.4-fpm ---> fa37bd6db22a Step 2/11 : ARG user ---> Running in 9259bb2ac034 … Creating travellist-app ... done Creating travellist-nginx ... done Creating travellist-db ... done

      Dies kann einige Minuten dauern. Sobald der Vorgang abgeschlossen ist, können wir Composer ausführen, um die Abhängigkeiten der Anwendung zu installieren.

      Um composer und andere Befehle im app-Dienstcontainer auszuführen, verwenden wir docker-compose exec. Der Befehl exec ermöglicht es uns, jeden Befehl unserer Wahl auf Containern auszuführen, die von Docker Compose verwaltet werden. Es verwendet die folgende Syntax: docker-compose exec service_name command.

      Anmerkung: Falls Sie sich entschieden haben, einen LEMP-Server zu verwenden, um die Demo-Anwendung auszuführen, sollten Sie den Teil docker-compose exec app der Befehle in diesem Leitfaden ignorieren. Statt beispielsweise den folgenden Befehl auszuführen, wie er geschrieben ist, würden Sie nur Folgendes ausführen:

      Um composer install im app-Container auszuführen, führen Sie Folgendes aus:

      • docker-compose exec app composer install

      Output

      Loading composer repositories with package information Installing dependencies (including require-dev) from lock file Package operations: 85 installs, 0 updates, 0 removals - Installing doctrine/inflector (1.3.1): Downloading (100%) - Installing doctrine/lexer (1.2.0): Downloading (100%) - Installing dragonmantank/cron-expression (v2.3.0): Downloading (100%) …

      Wenn Composer die Installation der Anwendungsabhängigkeiten abgeschlossen hat, können Sie artisan-Befehle ausführen. Um zu testen, ob die Anwendung eine Verbindung mit der Datenbank herstellen kann, führen Sie folgenden Befehl aus, der alle bereits vorhandenen Tabellen bereinigen wird:

      • docker-compose exec app php artisan db:wipe

      Dieser Befehl verwirft alle bereits vorhandenen Tabellen auf der konfigurierten Datenbank. Wenn er erfolgreich ausgeführt wird und die Anwendung eine Verbindung mit der Datenbank herstellen kann, sehen Sie eine Ausgabe wie diese:

      Output

      Dropped all tables successfully.

      Nachdem Sie nun die Anwendungsabhängigkeiten mit Composer installiert haben, können Sie das artisan-Tool verwenden, um Migrationen und Seeders zu erstellen.

      Schritt 4 – Datenbank-Migrationen erstellen

      Das artisan-Befehlszeilentool, das mit Laravel geliefert wird, enthält eine Reihe von Hilfsbefehlen, die zur Verwaltung der Anwendung und dem Bootstrap neuer Klassen verwendet werden können. Um eine neue Migrationsklasse zu generieren, können wir den Befehl make:migration wie folgt verwenden:

      • docker-compose exec app php artisan make:migration create_places_table

      Laravel leitet die auszuführende Operation (create), den Namen der Tabelle (places) und ob diese Migration eine neue Tabelle erstellt oder nicht basierend auf dem beschreibenden Namen ab, der dem Befehl make:migration bereitgestellt wird.

      Sie werden eine Ausgabe sehen, die dieser ähnelt:

      Output

      Created Migration: 2020_02_03_143622_create_places_table

      Dadurch wird eine neue Datei im Verzeichnis database/migrations der Anwendung generiert. Der in der automatisch generierten Datei enthaltene Zeitstempel wird von Laravel verwendet, um zu bestimmen, in welcher Reihenfolge Migrationen ausgeführt werden sollen.

      Verwenden Sie den Texteditor Ihrer Wahl, um die generierte Migrationsdatei zu öffnen. Vergessen Sie nicht, den hervorgehobenen Wert durch Ihren eigenen Migrationsdatei-Namen zu ersetzen:

      • nano database/migrations/2020_02_03_143622_create_places_table.php

      Die generierte Migrationsdatei enthält eine Klasse namens CreatePlacesTable:

      database/migrations/2020_02_03_143622_create_places_table.php

      <?php
      
      use IlluminateDatabaseMigrationsMigration;
      use IlluminateDatabaseSchemaBlueprint;
      use IlluminateSupportFacadesSchema;
      
      class CreatePlacesTable extends Migration
      {
          /**
           * Run the migrations.
           *
           * @return void
           */
          public function up()
          {
              Schema::create('places', function (Blueprint $table) {
                  $table->bigIncrements('id');
                  $table->timestamps();
              });
          }
      
          /**
           * Reverse the migrations.
           *
           * @return void
           */
          public function down()
          {
              Schema::dropIfExists('places');
          }
      }
      
      

      Diese Klasse verfügt über zwei Methoden: up und down. Beide Methoden enthalten Bootstrap-Code, den Sie erweitern können, um das anzupassen, was geschieht, wenn die Migration ausgeführt wird und wenn sie zurückgesetzt wird.

      Wir ändern die Methode up, damit die Tabelle places die Struktur wiedergibt, die wir bereits in der aktuellen Version der Anwendung verwenden:

      • id: primäres Schlüsselfeld
      • name: Name des Ortes
      • visited: ob dieser Ort bereits besucht wurde oder nicht

      Der Laravel Schema Builder macht Methoden zum Erstellen, Aktualisieren und Löschen von Tabellen in einer Datenbank verfügbar. Die Klasse Blueprint definiert die Struktur der Tabelle und bietet verschiedene Methoden, um die Definition jedes Tabellenfeldes zusammenzufassen.

      Der automatisch generierte Code richtet ein primäres ID-Feld namens id ein. Die Methode timestamps erstellt zwei datetime-Felder, die automatisch von den zugrunde liegenden Datenbank-Klassen aktualisiert werden, wenn Daten in diese Tabelle eingefügt oder aktualisiert werden. Zusätzlich müssen wir einen Namen und ein visited-Feld aufnehmen.

      Unser Namens-Feld ist vom Typ Zeichenfolge und unser visited-Feld vom Typ Boolean. Außerdem geben wir einen Standardwert von 0 für das visited-Feld ein. Wenn kein Wert übergeben wird, bedeutet es dann, dass der Ort noch nicht besucht wurde. So sieht die Methode up jetzt aus:

      database/migrations/2020_02_03_143622_create_places_table.php

      …
          public function up()
          {
              Schema::create('places', function (Blueprint $table) {
                  $table->bigIncrements('id');
                  $table->string('name', 100);
                  $table->boolean('visited')->default(0);
                  $table->timestamps();
              });
          }
      …
      

      Anmerkung: Die vollständige Liste der verfügbaren Spaltentypen finden Sie in der Laravel-Dokumentation.

      Nachdem Sie die beiden hervorgehobenen Zeilen auf Ihrem eigenen Migrations-Skript inkludiert haben, speichern und schließen Sie die Datei.

      Ihre Migration kann jetzt über artisan migrate ausgeführt werden. Dies würde jedoch nur eine leere Tabelle erstellen; Sie müssen auch Beispieldaten für Entwicklung und Test einfügen können. Im nächsten Schritt sehen Sie, wie Sie das mithilfe von Datenbank-Seeders tun können.

      Schritt 5 – Databank-Seeders erstellen

      Ein Seeder ist eine spezielle Klasse, die zum Generieren und Einfügen von Beispieldaten (Seeds) in einer Datenbank verwendet wird. Dies ist ein wichtiges Merkmal in Entwicklungsumgebungen, denn damit können Sie die Anwendung mit einer frischen Datenbank neu erstellen – mit Beispielwerten, die Sie sonst jedes Mal manuell einfügen müssen, wenn die Datenbank neu erstellt wird.

      Wir verwenden jetzt den Befehl artisan, um eine neue Seeder-Klasse für unsere Tabelle places namens PlacesTableSeeder zu generieren:

      • docker-compose exec app php artisan make:seeder PlacesTableSeeder

      Der Befehl erstellt eine neue Datei namens PlacesTableSeeder.php im Verzeichnis database/seeds. Öffnen Sie diese Datei mit dem Texteditor Ihrer Wahl:

      • nano database/seeds/PlacesTableSeeder.php

      So sieht die automatisch generierte Datei PlacesTableSeeder.php aus:

      database/seeds/PlacesTableSeeder.php

      <?php
      
      use IlluminateDatabaseSeeder;
      
      class PlacesTableSeeder extends Seeder
      {
          /**
           * Run the database seeds.
           *
           * @return void
           */
          public function run()
          {
              //
          }
      }
      
      

      Unsere neue Seeder-Klasse enthält eine leere Methode namens run. Diese Methode wird aufgerufen, wenn der Artisan-Befehl db:seed ausgeführt wird.

      Sie müssen die Methode run bearbeiten, um Anweisungen zum Einfügen von Beispieldaten in die Datenbank aufzunehmen. Wir verwenden den Laravel query builder​​​, um diesen Vorgang zu optimieren.

      Der Laravel query builder bietet eine fließende Schnittstelle für Datenbankoperationen wie Einfügen, Aktualisieren, Löschen und Abrufen von Daten. Er schützt zudem vor SQL-Injection-Angriffen. Der query builder wird von der DB facade​​​ verfügbar gemacht – ein statischer Proxy für zugrunde liegende Datenbank-Klassen im Dienstcontainer.

      Jetzt erstellen wir eine statische Klassen-Variable, um alle Beispielorte aufzunehmen, die wir als Array in die Datenbank einfügen möchten. Dadurch können wir eine foreach-Schleife verwenden, um alle Werte zu durchlaufen und jeden einzelnen mit dem query builder in die Datenbank einzufügen.

      Wir nennen diese Variable $places:

      database/seeds/PlacesTableSeeder.php

      <?php
      
      use IlluminateDatabaseSeeder;
      
      class PlacesTableSeeder extends Seeder
      {
          static $places = [
              'Berlin',
              'Budapest',
              'Cincinnati',
              'Denver',
              'Helsinki',
              'Lisbon',
              'Moscow',
              'Nairobi',
              'Oslo',
              'Rio',
              'Tokyo'
          ];

      Als Nächstes müssen wir eine use-Anweisung am Anfang unserer PlacesTableSeeder-Klasse aufnehmen, um die Referenzierung der DB facade im gesamten Code zu erleichtern:

      database/seeds/PlacesTableSeeder.php

      <?php
      
      use IlluminateDatabaseSeeder;
      use IlluminateSupportFacadesDB;
      
      class PlacesTableSeeder extends Seeder
      …
      

      Wir können jetzt die Array-Werte $places mit einer foreach-Schleife durchlaufen und jeden einzelnen mit dem query builder in unsere Tabelle places einfügen:

      database/seeds/PlacesTableSeeder.php

      …
          public function run()
          {
              foreach (self::$places as $place) {
                  DB::table('places')->insert([
                      'name' => $place,
                      'visited' => rand(0,1) == 1
                  ]);
              }
          }
      
      

      Die foreach-Schleife durchläuft jeden Wert des statischen Arrays $places. Bei jedem Durchlauf verwenden wir die DB facade, um eine neue Zeile in der Tabelle places einzufügen. In das Namens-Feld geben wir den Namen des Ortes ein, den wir gerade aus dem Array $places erhalten haben, und in das visited-Feld einen beliebigen Wert von entweder 0 oder 1.

      So sieht die volle Klasse PlacesTableSeeder nach allen Aktualisierungen aus:

      database/seeds/PlacesTableSeeder.php

      <?php
      
      use IlluminateDatabaseSeeder;
      use IlluminateSupportFacadesDB;
      
      class PlacesTableSeeder extends Seeder
      {
          static $places = [
              'Berlin',
              'Budapest',
              'Cincinnati',
              'Denver',
              'Helsinki',
              'Lisbon',
              'Moscow',
              'Nairobi',
              'Oslo',
              'Rio',
              'Tokyo'
          ];
      
          /**
           * Run the database seeds.
           *
           * @return void
           */
          public function run()
          {
              foreach (self::$places as $place) {
                  DB::table('places')->insert([
                      'name' => $place,
                      'visited' => rand(0,1) == 1
                  ]);
              }
          }
      }
      

      Speichern und schließen Sie die Datei, wenn Sie diese Änderungen vorgenommen haben.

      Seeder-Klassen werden nicht automatisch im der Anwendung geladen. Bearbeiten Sie die Hauptklasse von DatabaseSeeder, um einen Aufruf zu dem Seeder aufzunehmen, den wir gerade erstellt haben.

      Öffnen Sie die Datei database/seeds/DatabaseSeeder.php mit nano oder Ihrem bevorzugten Editor:

      • nano database/seeds/DatabaseSeeder.php

      Die Klasse DatabaseSeeder sieht wie jeder andere Seeder aus: sie erweitert die Seeder-Klasse und hat eine run-Methode. Diese Methode aktualisieren wir, um einen Aufruf von PlacesTableSeeder aufzunehmen.

      Aktualisieren Sie die aktuelle run-Methode in Ihrer Klasse DatabaseSeeder, indem Sie die auskommentierte Zeile löschen und sie durch den folgenden hervorgehobenen Code ersetzen:

      database/seeds/DatabaseSeeder.php

      …
          public function run()
          {
              $this->call(PlacesTableSeeder::class);
          }
      ...
      

      So sieht die volle Klasse DatabaseSeeder nach der Aktualisierung aus:

      database/seeds/DatabaseSeeder.php

      <?php
      
      use IlluminateDatabaseSeeder;
      
      class DatabaseSeeder extends Seeder
      {
          /**
           * Seed the application's database.
           *
           * @return void
           */
          public function run()
          {
              $this->call(PlacesTableSeeder::class);
          }
      }
      
      
      

      Speichern und schließen Sie die Datei, wenn Sie mit der Aktualisierung des Inhalts fertig sind.

      Jetzt sind wir mit der Einrichtung einer Migration und eines Seeders für unsere Tabelle places fertig. Im nächsten Schritt sehen wir uns ihre Ausführung an.

      Schritt 6 – Datenbank-Migrationen und Seeders ausführen

      Vergewissern Sie sich zuerst, dass Ihre Anwendung ausgeführt wird. Wir richten den Verschlüsselungsschlüssel der Anwendung ein und greifen dann von einem Browser auf die Anwendung zu, um den Webserver zu testen.

      Um den für Laravel erforderlichen Verschlüsselungsschlüssel zu generieren, können Sie den Befehl artisan key:generate verwenden:

      • docker-compose exec app php artisan key:generate

      Sobald der Schlüssel generiert wurde, können Sie auf die Anwendung zugreifen, indem Sie Ihren Browser auf Ihren Server-Hostname oder die IP-Adresse auf Port 8000 verweisen:

      http://server_host_or_ip:8000
      

      Sie sehen in etwa folgende Seite:

      MySQL error

      Das bedeutet, dass die Anwendung eine Verbindung mit der Datenbank herstellen kann, jedoch keine Tabelle namens places finden konnte. Wir erstellen jetzt die Tabelle places mit dem folgenden artisan-Befehl migrate:

      • docker-compose exec app php artisan migrate

      Sie sehen eine Ausgabe, die dieser ähnelt:

      Output

      Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table (0.06 seconds) Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table (0.06 seconds) Migrating: 2019_08_19_000000_create_failed_jobs_table Migrated: 2019_08_19_000000_create_failed_jobs_table (0.03 seconds) Migrating: 2020_02_10_144134_create_places_table Migrated: 2020_02_10_144134_create_places_table (0.03 seconds)

      Sie werden feststellen, dass einige weitere Migrationen zusammen mit der Migration create_places_table ausgeführt wurden, die wir eingerichtet haben. Diese Migrationen werden automatisch generiert, wenn Laravel installiert ist. Obwohl wir diese zusätzlichen Tabellen jetzt nicht verwenden, werden sie in Zukunft benötigt, wenn wir die Anwendung um registrierte Benutzer und geplante Aufträge erweitern. Jetzt können Sie sie vorerst so belassen.

      Zu diesem Zeitpunkt ist unsere Tabelle noch leer. Wir müssen den Befehl db:seed​​​ ausführen, um Seeding für die Datenbank mit unseren Beispielorten durchzuführen.

      • docker-compose exec app php artisan db:seed

      Dadurch werden unser Seeder ausgeführt und die Beispielwerte eingefügt, die wir in unserer Klasse PlacesTableSeeder definiert haben. Sie sehen eine Ausgabe, die dieser ähnelt:

      Output

      Seeding: PlacesTableSeeder Seeded: PlacesTableSeeder (0.06 seconds) Database seeding completed successfully.

      Laden Sie jetzt die Anwendungsseite in Ihrem Browser neu. Sie sehen eine Seite, die so ähnlich wie die folgende aussieht:

      Demoversion der Laravel-Anwendung

      Wann immer Sie wieder von vorne beginnen müssen, können Sie alle Datenbank-Tabellen folgendermaßen verwerfen:

      • docker-compose exec app php artisan db:wipe

      Output

      Dropped all tables successfully.

      Um die Anwendungs-Migrationen auszuführen und Seeding für die Tabellen mit einem einzelnen Befehl durchzuführen, können Sie Folgendes verwenden:

      • docker-compose exec app php artisan migrate --seed

      Output

      Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table (0.06 seconds) Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table (0.07 seconds) Migrating: 2019_08_19_000000_create_failed_jobs_table Migrated: 2019_08_19_000000_create_failed_jobs_table (0.03 seconds) Migrating: 2020_02_10_144134_create_places_table Migrated: 2020_02_10_144134_create_places_table (0.03 seconds) Seeding: PlacesTableSeeder Seeded: PlacesTableSeeder (0.06 seconds) Database seeding completed successfully.

      Wenn Sie eine Migration zurücksetzen möchten, können Sie Folgendes ausführen:

      • docker-compose exec app php artisan migrate:rollback

      Dadurch wird die Methode down für jede Migrationsklasse im Ordner migrations ausgelöst. Üblicherweise werden alle Tabellen entfernt, die durch Migrations-Klassen erstellt wurden, und es bleiben nur jene Tabellen übrig, die von Hand erstellt wurden. Die Ausgabe sieht dann so aus:

      Output

      Rolling back: 2020_02_10_144134_create_places_table Rolled back: 2020_02_10_144134_create_places_table (0.02 seconds) Rolling back: 2019_08_19_000000_create_failed_jobs_table Rolled back: 2019_08_19_000000_create_failed_jobs_table (0.02 seconds) Rolling back: 2014_10_12_100000_create_password_resets_table Rolled back: 2014_10_12_100000_create_password_resets_table (0.02 seconds) Rolling back: 2014_10_12_000000_create_users_table Rolled back: 2014_10_12_000000_create_users_table (0.02 seconds)

      Der Befehl Zurücksetzen ist besonders nützlich, wenn Sie Änderungen an Anwendungsmodellen vornehmen und ein Befehl db:wipe nicht verwendet werden kann – beispielsweise wenn mehrere Systeme von der gleichen Datenbank abhängen.

      Zusammenfassung

      In diesem Leitfaden haben Sie gelernt, wie Sie das Einrichten von Entwicklungs- und Test-Datenbänken für eine Laravel-6-Anwendung mithilfe von Datenbank-Migrationen und Seeders erleichtern können.

      In der Laravel-Dokumentation finden Sie weitere Informationen zur Verwendung des query builder​​​ und von Eloquent models, um das Datenbank-Schema Ihrer Anwendung noch weiter zusammenzufassen.



      Source link