Laravel Sweet Alert Tutorial Example

Laravel 6 , Laravel , Laravel 7

Nicesnippets

26269

13-07-2020


Laravel Sweet Alert Tutorial Example

Hi Guys

Now, let's see post of laravel sweetalert example tutorial. you'll learn laravel sweet alert box using data delete. if you have question about laravel sweetalert then i will give simple example with solution. This post will give you simple example of sweet alert for laravel example. you will do the following things for laravel sweetalert using record delete.

In this example,we will learn how to open sweetalert before deleting user in laravel application. I will show sweetalert jquery plugin using delete in laravel.I will show easy example of sweet alert before deleting user in laravel.

Sweetalert.js provide us very simple it's simply use event of their plugin. So let's see bellow full example and you can implement sweet alert model before delete record in your web application.

We will sweetalert before deleting user in laravel. so in this example we will using "users" table using laravel migration and write code for route, controller and view step by step.

Here the example of sweetalert before deleting user in laravel.

Step 1 : Install Laravel App


In this step, You can install laravel fresh app. So open terminal and put the bellow command.

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

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3: Add New Route

In this step, we are doing from scratch so we will add two routes, one for display data and another for delete request. So you have to simply add two new routes in your laravel application.

/routes/web.php

Route::get('users', '[email protected]');

Route::delete('users/{id}','[email protected]')->name('users.destroy');

Step 4: Create UserController

In third step, we will create new UserController file to handle request of created two new route. In this Controller we define two method, index() and destroy(). Both method will handle route request. So let's create new controller and put code:

php artisan make:controller UserController

After successfully run above command . So, let's copy bellow code and put on UserController.php file.

app/http/controller/UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

class UserController extends Controller

{

public function index()

{

$users = User::get();

return view('user',compact('users'));

}

public function destroy(Request $request,$id)

{

User::where('id',$id)->delete();

return back();

}

}

Step 5: Create user blade file

In last step we will create user.blade.php file and write code of display user detail and sweet alert code.

resources/views/user.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Sweet Alert Tutorial Example - nicesnippets.com</title>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">

<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

<meta name="csrf-token" content="{{ csrf_token() }}">

</head>

<body class="bg-dark">

<div class="container">

<div class="row">

<div class="col-md-8 offset-md-2">

<div class="card mt-5">

<div class="card-header">

<h5>Laravel Sweet Alert Tutorial Example - nicesnippets.com</h5>

</div>

<div class="card-body">

<table class="table table-bordered">

<tr>

<td>Name</td>

<td>Email& lt;/td>

<td width="5%">Action</td>

</tr>

@foreach($users as $user)

<tr>

<td>{{ $user->name }}</td>

<td>{{ $user->email }}</td>

<td>

<button class="btn btn-danger btn-flat btn-sm remove-user" data-id="{{ $user->id }}" data-action="{{ route('users.destroy',$user->id) }}"> Delete</button>

</td>

</tr>

@endforeach

</table>

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

$("body").on("click",".remove-user",function(){

var current_object = $(this);

swal({

title: "Are you sure?",

text: "You will not be able to recover this imaginary file!",

type: "error",

showCancelButton: true,

dangerMode: true,

cancelButtonClass: '#DD6B55',

confirmButtonColor: '#dc3545',

confirmButtonText: 'Delete!',

},function (result) {

if (result) {

var action = current_object.attr('data-action');

var token = jQuery('meta[name="csrf-token"]').attr('content');

var id = current_object.attr('data-id');

$('body').html("<form class='form-inline remove-form' method='post' action='"+action+"'></form>");

$('body').find('.remove-form').append('<input name="_method" type="hidden" value="delete">');

$('body').find('.remove-form').append('<input name="_token" type="hidden" value="'+token+'">');

$('body').find('.remove-form').append('<input name="id" type="hidden" value="'+id+'">');

$('body').find('.remove-form').submit();

}

});

});

</script>

</body>

</html>

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/users

It will help you...


Recommended Posts