ads

SweetAlert2 Laravel


Step:1 Install laravel latest using the below command
composer create-project --prefer-dist laravel/laravel blog
Step:2 setup your database file using .env file

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel --- (use your database name here)
DB_USERNAME=root --- (use your username here)
DB_PASSWORD=root --- (use your password here)

Step:3 Install SweetAlert in laravel framework

composer require realrashid/sweet-alert

Step:4

Add Below line into config/app.php file of providers and aliases

'providers' => [
       RealRashid\SweetAlert\SweetAlertServiceProvider::class,
  ],

'aliases' => [
        'Alert' => RealRashid\SweetAlert\Facades\Alert::class,
  ],

Step:5
Apply command php artisan vendor:publish, it will show you some list like below image


SweetAlert2 Laravel 6

I pressed 9 because I have 9th point of providers need to publish just write your provider number publish it

After press enter, it will show you some path were these sweet alerts inherited by laravel

Step:6
Now how to use it?

Suppose in my controller example I'll take here

just defined after namespace this - use RealRashid\SweetAlert\Facades\Alert;
And after then how to use it you can write this alerts into any method like data is updated or deleted or added so that's time you wanna show alert than follow step 5

Step:7
how to use sweet alert into the method of the controller?

Alert::success('Portfolio Details', 'added successfully');

just write Alert::success line and now you can use show the sweet alert into your laravel project

There are lots of sweet alerts list, If you want to know about it more you can go here, click on this link - Different SweetAlert List


Simple Example Of SweetAlert

Step:1 install laravel
composer create-project --prefer-dist laravel/laravel blog

Step:2 Setup .env file for database connection
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
 
Step:3 create controller using below command

this will create controller in this folder app/Http/Controller

php artisan make:controller PortfolioController --resource

<?php

namespace App\Http\Controllers\Admin;

use App\Portfolio;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Datatables;
use Session;
use Mail;
use RealRashid\SweetAlert\Facades\Alert;


class PortfolioController extends Controller
{

/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
return view('portfolio.create',$this->data);
}

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
try{
$post=$request->all();

$request->validate([
'name' => 'required',
'description' => 'required',
]);



if ($request->has('image')) {
$imageName = time()."_".$request->image->getClientOriginalName();
// dd($imageName);
$request->image->move(public_path('uploads/portfolio'), $imageName);
$post['image'] = $imageName;
}else{
Session::flash('error','Image field is required');
return redirect()->route('portfolio.create');
}

$CreateDetails = array(
'name' => $post['name'],
'description' => $post['description'],
'image' => $post['image'],
);
Portfolio::create($CreateDetails);
Alert::success('Portfolio Details', 'added successfully');
return redirect()->route('portfolio.create');
}
catch (\Exception $e ) {
Alert::error('Oops something went wrong', $e->getMessage());
return redirect()->route('portfolio.create');
}
}

}

Step:4 Create Model
app/Portfolio.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Portfolio extends Model
{
//
protected $guarded = [];
}

Step:4 Create Model
app/Portfolio.php
Route::post('portfolio', 'PortfolioController@store');
Route::get('portfolio', 'PortfolioController@create');
Step:5 create create.blade.php

resources/views/portfolio/create
<!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">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<title>MTitSolution</title>
</head>
<body>
<div class="container">
<div class="row">
@if($errors->any())
<div class="alert alert-danger">
<p><strong>Error</strong></p>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="col-md-12">
<h1>how to use sweetalert2 message box in Laravel? - <a
href="https://www.mtitsolutions.in/">MTitsolutions</a></h1>
</div>
</div>
<form method="POST" action="{{url('portfolio.store')}}">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name">
</div>
<div class="form-group col-md-6">
<label for="email">Description</label>
<textarea type="text" class="form-control" id="description" name="description"
placeholder="Enter Description" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputMessage">Upload Image</label>
<input type="file" name="image"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>


And if you wanna see how it is work so as I said you can use my GitHub repository
link is here - sweetalert2 laravel github

That's It

Enjoy code, I hope this way you'll help you with your projects :)

If you like this information you can share, subscribe, and comments also how to use the sweetalert2 message box in Laravel? blog

Thank you

1 Comments

  1. Casino Review - Dr.MCD
    Casino is rated 2.3 out of 5 by our members and 남원 출장마사지 33% of 안산 출장안마 them said: "liked it". Do you agree with Dr.MCD's recommendation? 통영 출장샵 Rating: 경주 출장마사지 2.9 · 전라남도 출장샵 ‎Review by Dr.

    ReplyDelete

Post a Comment

Previous Post Next Post