Laravel 8: Как реализовать Sweet Alert для диалогового оповещения

23/11/2021 19:56

Диалоговое оповещение необходимо для веб-приложения или мобильного приложения. Он дает предупреждение перед выполнением определенного действия. Предположим, вы собираетесь выполнить действие удаления над набором данных. Тогда на этот раз это поможет вам сделать с ним правильное действие. В случае, если вы случайно нажали действие удаления, и у вас не было диалогового окна с предупреждением. Это действие выполнит операции удаления с вашим набором данных. Иногда вы можете потерять важные данные. Это основная причина иметь диалоговое предупреждение в вашем приложении. jаvascript предоставляет библиотеку Sweet Alert. Он содержит различные типы предупреждений, такие как информация, успех, предупреждение, ошибка и т. д. Таким образом, в зависимости от типа вашей активности вы можете использовать любой из типов предупреждений. Сегодня в этом посте мы реализуем Sweet Alert в приложении Laravel 8.

Для создания приложения Laravel 8 вам потребуется указанная ниже конфигурация.

PHP >= 7.3
MySQL (version > 5)
Apache/Nginx Server
Composer

Создайте проект Laravel 8 для Sweet Alert

Для создания проекта Laravel 8 я буду использовать composer. Вы также можете создать проект с помощью установщика Laravel. Следовательно, откройте терминал или командную строку и введите следующую команду.

composer create-project --prefer-dist laravel/laravel blog

Приведенная выше команда установит Laravel 8. Когда она будет завершена, давайте настроим для нее базу данных.

Настройка базы данных для проекта Sweet Alert

Я создал базу данных с именем blog и настроил учетные данные базы данных в среде проекта.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=root

Как только это будет сделано, давайте установим пакет Sweet Alert в Laravel 8.

Установка пакета Sweet Alert в Laravel 8

В диспетчере зависимостей composer есть пакет Sweet Alert. Следовательно, вы можете легко установить его с терминала.

composer require realrashid/sweet-alert

Приведенная выше команда установит пакет внутри проекта.

После установки пакета вам нужно будет опубликовать его параметры конфигурации.

php artisan sweetalert:publish

На этом шаге, мы закончили настройку. Давайте применим его к представлениям (views), чтобы увидеть результат.

Создание модели и миграция

В демонстрационных целях я буду хранить данные в базе данных. Затем на основе операции я покажу предупреждающее сообщение. Следовательно, потребуется миграция и модель.

Итак, в папке database/migrations найдите таблицу users. Теперь поместите приведенный ниже код.

timestamp_create_users_table.php

<?php

use Illuminate\Database\Migrations\Migration
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Соответственно, вам нужно будет установить заполняемые данные в модели User.

User.php

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

Теперь перенесите таблицу с помощью приведенной ниже команды.

php artisan migrate

Данная команда, перенесет схему таблицы user в базу данных. Это все, что касается базы данных и модели.

На следующем шаге вам потребуются контроллер и файл представления. Собственно, мы установили пакет для Sweet Alert с помощью composer. Следовательно, он будет передавать предупреждение через контроллер в файл представления. Кроме того, внутри представления вам нужно будет включить предупреждение.

Создайте контроллер для генерации предупреждающего сообщения

Здесь я собираюсь создать контроллер и файл blade. Внутри контроллера мы будем использовать тип предупреждения, который будет отображаться в нашем файле представления.

php artisan make controller::UserController

После создания контроллера добавьте в него приведенный ниже код. В приведенном ниже коде, у нас есть две функции.

Первая функция - предназначена для рендеринга представления.
Вторая функция - предназначена для сохранения значений формы в таблице базы данных. Мы создадим это представление на следующем шаге.

UserController.php

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use RealRashid\SweetAlert\Facades\Alert;

class UserController extends Controller
{
    /**
     * @param NA
     * @return view
     */
    public function index() {
        return view('users');
    }

    /**
     * @param request
     * @return response
     */
    public function store(Request $request) {
        $request = $request->all();
        $request['password'] = Hash::make($request['password']);

        $user = User::create($request);

        if ($user) {
            Alert::success('Success', 'You\'ve Successfully Registered');
            return back();
        }
        else {
            Alert::error('Failed', 'Registration failed');
            return back();
        }
    }
}

Внутри функции store() я получил данные запроса из входных данных формы. После этого я сохраняю его в таблице users через массовое назначение (модель). В ответе, если данные вставлены, будет сгенерировано оповещение с типом успеха. Кроме того, я установил для него сообщение.

Точно так же, если данные не вставлены, будет сгенерировано предупреждение с ошибкой. И в нем есть сообщение соответственно. Вот и все, что касается функций контроллера.

Создадим представление (view) для отображения сообщения Sweet Alert

Здесь вам нужно будет создать представление при передаче функции контроллера. Поэтому я создаю представление с именем users.blade.php. После создания представления вам необходимо включить Alert в body.

@include('sweetalert::alert')

Это необходимо для перехвата сообщения SweetAlert, которое генерируется контроллером.

users.blade.php

<!doctype html>
<html lang="en">

<head>
    <title>Sweet Alert - MakeCodes.ru</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>

<body>
    @include('sweetalert::alert')

    <div class="container my-5">
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-8 col-12 m-auto">
                <form action="{{ url('store') }}" method="POST">
                    @csrf
                    <fieldset class="shadow p-4">
                        <legend class="fw-bold border-bottom">Sweet Alert in Laravel 8</legend>
                        <div class="form-group pt-3">
                            <label> Name </label>
                            <input type="text" class="form-control" name="name" placeholder="Name">
                        </div>

                        <div class="form-group pt-3">
                            <label> Email </label>
                            <input type="text" class="form-control" name="email" placeholder="Email">
                        </div>

                        <div class="form-group pt-3">
                            <label> Password </label>
                            <input type="password" class="form-control" name="password" placeholder="Password">
                        </div>

                        <button type="submit" class="btn btn-success mt-4"> Save </button>

                    </fieldset>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

    {{-- toastr js --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/js/toastr.js"></script>
</body>

</html>

Это все, что касается фрагмента кода. Наконец, вам нужно добавить маршруты.

Создадим маршруты

Для добавления маршрутов перейдите к файлу web.php и добавьте указанные ниже маршруты.

web.php

<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', [UserController::class, 'index']);
Route::post('store', [UserController::class, 'store']);

Теперь пора проверить результат работы Sweet Alert.

Результат работы Sweet Alert в Laravel 8

Запустите приложение в браузере. Вам нужно будет заполнить форму и отправить ее.

Это форма регистрации пользователя

После отправки формы вы получите успешный ответ, если запись будет вставлена в базу данных.

Другие типы предупреждений в Sweet Alert

Sweet Alert предоставляет различные типы предупреждений. Вы можете использовать эти типы предупреждений в соответствии с вашими требованиями.

Alert::info()
Alert::warning()
Alert::error()
Alert::question()
Alert::image()
Alert::html()

Вы можете использовать эти типы предупреждений, передав параметры, как показано ниже.

Alert::info('Info Title', 'Info Message');

Alert::warning('Warning Title', 'Warning Message');

Alert::error('Error Title', 'Error Message');

Alert::question('Question Title', 'Question Message');

Alert::image('Image Title!','Image Description','Image URL','Image Width','Image Height');

Alert::html('Html Title', 'Html Code', 'Type');

Вывод:

В Laravel 8 мы реализовали Sweet Alert для отображения предупреждающих сообщений. Sweet Alert предоставляет разные типы предупреждений. Эти типы предупреждений можно использовать в разных случаях. Вы можете использовать CDN Sweet Alert для использования в своем приложении. Но внутри composer'а вы можете легко найти пакет. Это зависит от того, какой подход вы хотите и нравится использовать.

Laravel

0 + 0 -

MakeCodes
0
539