Laravel 8에서 SweetAlert2를 사용하는 방법

이 블로그에서는 Laravel 8에서 SweetAlret2를 사용하는 방법을 살펴보겠습니다.
우리 애플리케이션에서 사용자가 데이터를 추가/저장하거나 삭제하려고 할 때 laravel의 플래시 메시지를 통해 응답을 받았다는 확인을 사용자에게 다시 보냅니다. 단순한 플래시 메시지를 사용하는 대신 아름답고 반응이 빠르고 사용자 정의가 가능한 팝업 메시지를 사용할 것입니다.

우리가 사용할 패키지는 realrashid에 의해 사용자 정의된 sweet-alert입니다.

이 패키지는 놀랍습니다. 거의 모든 프로젝트에서 이 패키지를 사용합니다. (경고, 성공, 정보, 경고, 오류, 질문, 이미지, html, 토스트)와 같은 다양한 유형의 경고를 제공하며 사용이 매우 쉽고 간단합니다.

따라야 할 단계

설치

구성 파일의 서비스 공급자에 패키지 등록 및 앱 별칭에 Alert Facade 추가

레이아웃에 포함

사용법

1 단계

이 명령을 실행하십시오 -

composer require realrashid/sweet-alert to install package via composer

2 단계

패키지를 설치한 후 config/app.php 파일의 서비스 공급자에 등록합니다.

RealRashid\SweetAlert\SweetAlertServiceProvider::class,

'providers' => [
    /*
    * Package Service Providers...
    */
    RealRashid\SweetAlert\SweetAlertServiceProvider::class,
], also add Alert facade to aliases array in app configuration file

3단계

애플리케이션에서 사용할 레이아웃에 sweetalert::alert를 포함합니다.

@include('sweetalert::alert')

그리고 - php artisan sweetalert:publish 명령을 실행하여 패키지를 게시합니다(이는 프로젝트에 sweetalert2 자바스크립트 라이브러리도 로드 및 포함함).


4단계

Now you can use it in your controller by adding 
use RealRashid\SweetAlert\Facades\Alert Facade 
or
use Alert

경고, 성공, 정보의 예 ...

Alert::success('Success', 'Your post is saved');

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

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

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

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

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

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

또는 alert helper function와 함께 사용할 수 있습니다.

alert('Success', 'Post added successfully')

alert()->success('title', 'msg');

alert()->html('<i>HTML</i> <u>example</u>'," You can use <b>bold text</b>, <a href='//github.com'>links</a> and other HTML tags ",'success');

또는 toast로 사용할 수 있습니다.
(참고: 토스트를 사용하는 경우 코드에 redirect()를 추가해야 합니다.)

ex - toast('게시물이 제출되었습니다!','성공');
참고: config/sweetalert.php에서 토스트 위치를 변경할 수 있습니다.

'toast_position' => env('SWEET_ALERT_TOAST_POSITION', 'center'),

또는 position() 도우미 메서드를 사용할 수 있습니다.
제공된 위치('top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start' 또는 'bottom-end ').

위에서 논의한 것처럼 이제 더 나은 이해를 위해 응용 프로그램에서 sweetalert2를 사용할 수 있습니다. 몇 가지 실제 예를 보여 드리겠습니다.

프로젝트 전체에서 사용하기 위해 전역 미들웨어를 만들고 BaseController를 확장하는 Controller.php의 생성자에 넣습니다.

public function __construct()
    {
        $this->middleware(function($request, $next) {
            if (session('success')) {
                Alert::success(session('success'));
            } 
            if (session('error')) {
                Alert::error(session('error'));
            }
            return $next($request);
        });
    }

이제 아래와 같이 컨트롤러를 사용하십시오. 이해를 위해 PostController를 사용하겠습니다.

$post = Post::create($request->all());
        PostCreated::dispatch($post);
        return redirect()->back()->with('success', 'Post created successfully');

즐거운 독서 :)