SweetAlert in Laravel: Your Error-Free Journey Starts Here

byKishan Maharana -

SweetAlert In Laravel | How to install sweet alert | Why To Use SwwetAlert


How to use SweetAlert in Laravel - All Errors and Process Explained




                            SweetAlert is a javascript package that we can use in our projects to get rid of browser default notification popup style . we can customize and animate our alert box in an elegant manner using sweetalert . in this article we will see how can we use sweetalert in our laravel project .
    
                           There are many ways to use sweetalert in your project , Like you install the sweetalert pacckage in your project and use it and the another and most easy method is to use with Sweetalert CDN . In this article we will use sweetalert in our project using CDN. 

                           When i personally used Sweet alert package in laravel project , i started with installing it's package but you have to configure lot's of things if you use sweetalert package by installing it . But using Sweetalert with it's CDN , it becomes more easier to use . It's totally depends on you that which method you want to use . 

Step1: Project Setup :

                In this article we will only see how to use sweetalert in your project , we will not go through how to install laravel and setup laravel project .  For this article i already have a project and i will use sweet alert in it. 

Step2 : Route of Sweetalert :

             Let me tell you , i have a movie website project made with laravel and what i want to do is ..... i want to show a pop-up message ( SWEETALERT  pop-up ) whenever a new movie is added or whever the admin update the details of any movie . Let's see with the installation of sweet alert .

Step3 : Installing SweetAlert | Using SweetAlert CDN :


              you can install SweetAlert package in your laravel project using the following command


1
npm install sweetalert --save

          As i have already told you if you sweetalert by installing it then you have to do some configuration .As we will be using SweetAlert CDN , use the following CDN . Sometimes a basic error comes if you use sweetalert via installing is swal is not defined laravel . So in will recommend to beginners to use CDN for sweetalert .


1
<script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>

            Simply copy the above CDN and paste it inside your <head> tag of the file in which you want to show the alert ....  like this--

Welcome.blade.php ( source code ) :



  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
      <script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
      <style>
         img:hover
         {
         filter: drop-shadow(0 0 0.75rem #7C95CE);
         transition: 0.5s all;
         }
         img
         {
         filter: brightness(120%);
         }
         body
         {
         background-image: url('resources/views/layout/bg.jpg');
         height: 160vh;
         width: auto;
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         }
         .card
         {
         background: transparent!important;
         color: #fff;
         font-weight: bold;
         }
      </style>
   </head>
   <body>
      @extends('layout.main')
      @section('content')
      @if(session('succmsg'))
      {{-- 
      <div class="alert alert-success alert-dismissible fade show text-center my-3" role="alert">
         <strong>Movie Addedd Successfully</strong>
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
         </button>
      </div>
      --}}
      <script>
         // swal("Added", "Movie Added successfully!!", "success");
         swal("Movie Added Successfully -:)");
      </script>
      @else
      @if($errors->any())
      @foreach($errors->all() as $error)
      <div class="alert alert-danger" role="alert">
         {{$error}}
      </div>
      @endforeach
      @endif
      @endif
      @if(session('updatemsg'))
      <script>
         // swal("Added", "Movie Added successfully!!", "success");
             swal("Movie updated Successfully -:)");
      </script>
      @endif
      {{-- 
      <div class="row">
         <div class="col-12">
            <a class="nav-link btn btn-primary" href="{{ url('/invoice') }}">Download Movie List <span class="sr-only">(current)</span></a>
         </div>
      </div>
      --}}
      <div class="row mt-5">
      {{--         
      <div class="col-2"></div>
      --}}        
      <div class="col-12">
         <div class="row">
            <div class="col-1"></div>
            <div class="col-10">
               <div class="row">
                  @foreach($product as $data)
                  <div class="col-3">
                     <div class="card p-2" style="width: 18rem;border:none;">
                        <a href="{{route('view',$data->id)}}"><img src="{{asset('public/upload/userimg/'.$data->image)}}" style="height: 350px;border-radius: 10px;" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                           <p class="card-text text-center">{{ $data->name }}</p>
                           <div class="row">
                              <div class="col-6 text-center">
                                 <a href="{{route('edit',$data->id)}}"> <button class="btn btn-warning">Edit &nbsp<i class="fa fa-pencil" aria-hidden="true"></i>
                                 </button></a>
                              </div>
                              <div class="col-6 text-center">
                                 <a href="{{route('delete',$data->id)}}"><button class="btn btn-danger">Delete  &nbsp<i class="fa fa-trash" aria-hidden="true"></i>
                                 </button></a>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  @endforeach
               </div>
            </div>
            <div class="col-1">
            </div>
         </div>
         <div class="row">
            <div class="col-4"></div>
            <div class="col-4 text-center">
               {{ $product->links() }}
            </div>
            <div class="col-4"></div>
         </div>
         {{--         
         <div class="col-2"></div>
         --}}    
      </div>
      @endsection
      {{-- @include('sweetalert::alert') --}}
   </body>
</html>


Step3: Make a pointer in Controller :

       As i have told you that our aim is to show a alert message in our home page  whenever a new movie or data is added to the database and  redirect to homepage. To make this we need to send a variable from the " data insertion page to the Home page  "  through controller like the following .



1
return redirect(route('home'))->with('succmsg','Movie added successfully');


createController.php ( source code ) :

       

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class createController extends Controller
{
 public function store(Request $request)
    {
     //print_r($request->all());
      $this->validate($request,
   [
    'pname'=>'required',
    'pdetail'=>'required',
   ]
  );
     $product=new Product;
  $product->name=$request->pname;
  $product->description=$request->pdetail;
        $product->trailer=$request->trailer;
        if($request->hasfile('image'))
        {
            $file=$request->file('image');
            $extension=$file->getClientOriginalExtension();
            $filename=time().'.'.$extension;
            $file->move('public/upload/userimg/',$filename);
            $product->image=$filename;
        }
        else
        {
            return $request;
            $product->image='';
        }
  $product->save();
  return redirect(route('home'))->with('succmsg','Movie added successfully');
    }
}


Step4: Add condition in Main page :

                          After sending variable from controller we need to show the alert box in our home page , if home page is getting the variable from controller then it will show the sweetalert box , it may be a success alert or info alert or danger alert or warning alert depends upon you



1
2
3
4
5
@if(session('updatemsg'))

  <script>
    swal("Movie updated Successfully -:)");
</script>

Different types of SweetAlert boxes : 

              


swal("Good job!", "You clicked the button!", "success");

























swal("Here's the title!", "...and here's the text!");



















swal("Good job!", "You clicked the button!", "warning");



















swal("Good job!", "You clicked the button!", "error");



















swal("Good job!", "You clicked the button!", "info");
















How to use SweetAlert in Laravel - All Errors and Process Explained



How to use SweetAlert in Laravel - All Errors and Process Explained



How to use SweetAlert in Laravel - All Errors and Process Explained





How to use SweetAlert in Laravel - All Errors and Process Explained







                 There are many other sweetalert box types available in its official sites like sweet alert with image ,sweet alert delete confirmation laravel,laravel alert message popup .In this project we have used sweetalert 2 in our laravel project .





you can also visit the official site of sweetalert to use more alert boxes .



I hope this article might helps you  thanks for visiting -:)







Other recommended topics: 

                Laravel Pagination Detailed



                Monster game Vue Js Project



                How to integrate Vue Js with Laravel



                Laravel File upload



















Tags:












































Previous Post


Next Post

























Share to other apps






Copy
Post link






































Contact Form