لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView
لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView
2019-05-11
آموزش تابع Serialize() در php به همراه مثال
آموزش تابع Serialize() در php به همراه مثال
2019-05-19
استفاده از کتابخانه SweetAlert2 با AJAX در لاراول

استفاده از کتابخانه SweetAlert2 با AJAX در لاراول

استفاده از SweetAlert2 با AJAX در لاراول ، در این پست از تجاری اپ قصد داریم نحوه استفاده از کتابخانه SweetAlert2 در لاراول با AJAX را آموزش دهیم.این آموزش خیلی ابتدایی نمی باشد به همین دلیل ما فرض می کنیم که شما نحوه ی ایجاد Route ، نحوه ی ایجاد کنترلر ، view ها و غیره را می دانید و از گفتن آنها صرف نظر می کنیم.با ماهمراه باشید.

استفاده از کتابخانه SweetAlert2 به همراه AJAX در لاراول

  1. ایجاد متدها در کنترلر
  2. تعریف Route
  3. بکار بردن SweetAlert2 همراه با AJAX در فایل Blade
  4. اجرا و مشاهده خروجی

ایجاد متدها در کنترلر

ما یک کنترلر با نام UserController ایجاد کرده ایم و در این کنترلر دو متد ایجاد می کنیم یکی برای گرفتن همه کارابران و دیگری برای حذف یک کاربر.کدهای مربوط به این کنترلر و متدهایی که در آن ایجاد کرده ایم را در زیر مشاهده می کنید:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use App\User;

class UserController extends Controller
{
    public function users()
    {
        $users  =   User::all();
        return view('users', compact('users'));
    }

    public function delete($id)
    {
        $delete =   User::where('id', $id)->delete();

        // check data deleted or not
        if ($delete)
        {
            $success    =   true;
            $message    =   "کاربر با موفقیت حذف شد!";
        } else {
            $success    =   true;
            $message    =   "کاربر پیدا نشد!";
        }

        //  Return response
        return response()->json([
            'success'   =>  $success,
            'message'   =>  $message,
        ]);
    }
}

تعریف Route

در این مرحله دو Route برای دو متدهایی که در کنترلر ایجاد کردیم ، تعریف می کنیم:

<?php

Route::get('users', 'UserController@users');
Route::post('delete/{id}', 'UserController@delete');

بکار بردن کتابخانه SweetAlert2 همراه با AJAX در فایل Blade

یک View با نام users.blade.php ایجاد کنید و کدهای زیر را در ان وارد کنید:

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- csrf-token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <!-- jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

    <title>استفاده از SweetAlert2 با AJAX در لاراول</title>
</head>
<body class="container" style="direction:rtl; text-align:right; margin-top: 40px;">

<div class="row" style="margin-bottom: 20px;">
    <div class="col-lg-12 margin-tb">
        <div class="pull-right">
            <h3>کاربران</h3>
        </div>
    </div>
</div>

<table class="table table-bordered">
    <tr>
        <th>شناسه</th>
        <th>نام</th>
        <th>ایمیل</th>
        <th width="280px">عملیات</th>
    </tr>
    @foreach ($users as $user)
        <tr>
            <td>{{ $user->id }}</td>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
            <td>
                <button class="btn btn-danger" onclick="deleteConfirmation({{$user->id}})">حذف</button>
            </td>
        </tr>
    @endforeach
</table>

<script type="text/javascript">
    function deleteConfirmation(id) {
        swal({
            title: "حذف؟",
            text: "لطفا اطمینان حاصل کنید و سپس تایید کنید!",
            type: "warning",
            showCancelButton: !0,
            confirmButtonText: "بله، آن را حذف کنید!",
            cancelButtonText: "خیر، لغو!",
            reverseButtons: !0
        }).then(function (e) {

            if (e.value === true) {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    type: 'POST',
                    url: "{{url('/delete')}}/" + id,
                    data: {_token: CSRF_TOKEN},
                    dataType: 'JSON',
                    success: function (results) {

                        if (results.success === true) {
                            swal("انجام شد!", results.message, "success");
                        } else {
                            swal("خطا!", results.message, "error");
                        }
                    }
                });

            } else {
                e.dismiss;
            }

        }, function (dismiss) {
            return false;
        })
    }
</script>
</body>
</html>

اجرا و مشاهده خروجی

اکنون پروژه لاراول خود را اجرا کنید و سپس آدرس http://localhost:8000/users را در مرورگر خود مشاهده نمایید.اگر همه مراحل را بدرستی انجام داده باشید باید یک صفحه مانند تصویر زیر مشاهده کنید:

استفاده از کتابخانه SweetAlert2 با AJAX در لاراول
استفاده از کتابخانه SweetAlert2 با AJAX در لاراول

برای مشاهده باکس تأیید SweetAlert2 بر روی دکمه حذف کلیک کنید.

استفاده از کتابخانه SweetAlert2 با AJAX در لاراول
استفاده از کتابخانه SweetAlert2 با AJAX در لاراول

اگر دکمه بله را انتخاب کنید، داده ها از طریق AJAX حذف خواهند شد و پیام تأییدیه ای مانند تصویر زیر مشاهده خواهید کرد:

استفاده از کتابخانه SweetAlert2 با AJAX در لاراول
استفاده از کتابخانه SweetAlert2 با AJAX در لاراول

امیدوارم این آموزش به شما کمک کرده باشد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *