Vorschau der Laravel-E-Mail vor dem Senden – PHP, AJAX

[ad_1]

Entweder Sie senden eine E-Mail in Laravel über eine normale POST-Anfrage oder über AJAX. Dieses Tutorial hilft Ihnen, Funktionen hinzuzufügen, mit denen Sie eine E-Mail vor dem Senden in der Vorschau anzeigen können. Wenn Sie Ihrem Laravel-Projekt Funktionen hinzufügen, bei denen Sie eine E-Mail senden müssen, ist es während der Entwicklung sehr wichtig, die Vorschau der E-Mail vor dem Senden zu überprüfen.

Wenn Sie die E-Mail in Ihrem Posteingang erhalten, können Sie normalerweise sehen, wie sie für die Benutzer aussieht. Wenn Sie Ihren SMTP-Server jedoch nicht für den E-Mail-Versand eingerichtet haben, sparen Sie durch das Befolgen dieses Tutorials viel Zeit bei der Entwicklung.

Erstellen Sie ein neues Laravel-Projekt

Um ein neues Laravel-Projekt zu erstellen, öffnen Sie Ihre Eingabeaufforderung oder Ihr Terminal und führen Sie den folgenden Befehl darin aus:

composer create-project laravel/laravel example-app

Dadurch wird ein Ordner mit dem Namen „Beispiel-App“ erstellt. Nun müssen Sie diesen Ordner mit dem folgenden Befehl eingeben:

Wenn sich Ihr Terminal in diesem Ordner befindet, führen Sie den folgenden Befehl aus, um den Server zu starten:

Normalerweise startet dies Ihr Projekt auf Host 127.0.0.1 und Port 8000. Sie können also über die URL darauf zugreifen:

Erstellen Sie Controller und Mailer

Erstellen Sie einen neuen Controller mit dem folgenden Befehl, Sie können auch Ihren eigenen Controller verwenden, wenn Sie möchten:

php artisan make:controller UserController

Öffnen Sie nun Ihre Datei „routes/web.php“ und erstellen Sie eine neue Route:

// include controller
use AppHttpControllersUserController;

// create route
Route::get("/send-mail", [UserController::class, "send_mail"]);

Erstellen Sie einen Mailer zum Senden von E-Mails, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

php artisan make:mail SendMail

Nun müssen wir in „AppHttpControllersUserController“ folgende Funktion erstellen:

use Mail;
use AppMailSendMail;

class UserController extends Controller
{
    // create method
    public function send_mail()
    {
        // send email
        // preview with dynamic variable data

        $data = "This is a variable.";

        // pass as a parameter
        $mailable = new SendMail($data);
        // Mail::to("[email protected]")->send($mailable);

        // preview email
        return $mailable->render();
    }
}

Es folgt der Inhalt Ihrer „AppMailSendMail“. Sie können alle Variablen hinzufügen, die Sie in diesem Mailer übergeben möchten:

<?php

namespace AppMail;

use IlluminateBusQueueable;
use IlluminateContractsQueueShouldQueue;
use IlluminateMailMailable;
use IlluminateQueueSerializesModels;

class SendMail extends Mailable
{
    use Queueable, SerializesModels;

    // class data member
    public $data;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    // parametrized constructor
    public function __construct($data)
    {
        // assign value
        $this->data = $data;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        // create this folder mails
        // and file test.blade.php

        // pass value in view
        return $this->view('mails/test', [
            "data" => $this->data
        ]);
    }
}

In Zeile 40 müssen wir eine neue Datei im Ordner „views“ erstellen, „resources/views/mails/test.blade.php“ und in diese Datei können Sie den Inhalt Ihrer E-Mail schreiben. Zum Verständnis schreibe ich einfachen Text mit Variable:

<h1>This is mail:</h1>

<!-- display in mail view -->
Data = {{ $data }}

Wenn Sie Ihren Browser unter „http://127.0.0.1:8000/send-mail“ aufrufen, sehen Sie den Inhalt der E-Mail mit allen darauf gerenderten Variablen.

Vorschau von E-Mails von AJAX

Wenn Sie eine E-Mail über eine AJAX-Anfrage senden, kann es für Sie während der Entwicklung schwierig sein, zu überprüfen, wie die E-Mail aussehen wird. Sie können bei jedem Test eine E-Mail senden und diese in Ihrem Gmail-Posteingang anzeigen, um eine Vorschau der E-Mail anzuzeigen. Aber es gibt eine kürzere Methode, um dies zu tun, und es wird Ihnen sicherlich Zeit sparen.

Erstellen Sie zunächst eine neue Route, die eine Ansichtsdatei rendert.

// routes/web.php
Route::get("/send-mail-ajax", function () {
    // render view
    return view("send_mail_ajax");
});

Erstellen Sie eine Datei namens „send_mail_ajax.blade.php“ im Ordner „resources/views“ und fügen Sie den folgenden Code darin ein:

<!-- meta tag for CSRF token -->
<meta name="_token" content="{{ csrf_token() }}">

<!-- hidden input field for base url -->
<input type="hidden" id="base_url" value="{{ url('/') }}" />

<!-- send ajax -->
<script>
    var ajax = new XMLHttpRequest();
    ajax.open("POST", document.getElementById("base_url").value + "/send-mail-ajax", true);

    // when the response is received
    ajax.onreadystatechange = function () {
        if (this.readyState == 4) {
            if (this.status == 200) {
                // display in browser
                document.write(this.responseText);
            }

            // handler error
            if (this.status == 500) {
                console.log(this.responseText);
            }
        }
    };

    var formData = new FormData();
    formData.append("_token", document.querySelector("meta[name=_token]").content);
    ajax.send(formData);
</script>

Wir haben ein Meta-Tag zum Speichern des CSRF-Tokens erstellt, das für jede POST-Anfrage in Laravel erforderlich ist, und ein verstecktes Eingabefeld, das die Basis-URL der Website speichert. Dann senden wir eine AJAX-Anfrage, und wenn die Antwort erfolgreich empfangen wurde, zeigen wir diese auf der aktuellen Webseite an.

Keine Sorge, es wird nur während des Entwicklungsprozesses verwendet. Nach der Überprüfung können Sie diesen Code in Zeile 17 auskommentieren.

Erstellen Sie eine POST-Route in „routes/web.php“ und verwenden Sie dieselbe Methode in UserController, nur die Methode ist auf POST eingestellt:

// create route
Route::post("/send-mail-ajax", [UserController::class, "send_mail"]);

Versuchen Sie, auf die URL unter „http://127.0.0.1:8000/send-mail-ajax“ zuzugreifen. Sie sehen zunächst eine leere Seite und nach einigen Sekunden den Inhalt der E-Mail auf Ihrer Webseite.

Lassen Sie es mich wissen, wenn Sie Hilfe beim Befolgen dieses Tutorials benötigen.



[ad_2]