How to add Active and Inactive Button in Laravel ?

In this tutorial we’re going to learn how to create functionality active and inactive status in laravel. We can implement change status on click on button using ajax with bootstrap toggle button. Here we will update user status active inactive with boolean data type with 0 and 1.

First install Laravel project

composer create-project laravel/laravel example-app

Next to Generate Authentication

composer requires laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap --auth

Next to run below code

npm install
npm run dev

Next go to migration file and put 1 column

$table->boolean('status')->default(0);

Now migrate the table

php artisan migrate

Next to create Controller file using below code.

php artisan make:controller UserController

Next got to controller and put below code.

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\User;
  
class UserController extends Controller
{
    /**
     * Responds with a welcome message with instructions
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $users = User::get();
        return view('users',compact('users'));
    }
  
    /**
     * Responds with a welcome message with instructions
     *
     * @return \Illuminate\Http\Response
     */
    public function changeStatus(Request $request)
    {
        $user = User::find($request->user_id);
        $user->status = $request->status;
        $user->save();
  
        return response()->json(['success'=>'Status change successfully.']);
    }
}

Next to create view page

resources/views/users.blade.php

Next go to users.blade.php and put below code.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Update User Status Using Toggle Button Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"  />
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
    <br><br>
    <div class="container mt-5">
        <h1>Laravel Update User Status Using Toggle Button Example </h1>
        <table class="table table-bordered">
            <thead>
               <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Status</th>
               </tr>
            </thead>
            <tbody>
               @foreach($users as $user)
                  <tr>
                     <td>{{ $user->name }}</td>
                     <td>{{ $user->email }}</td>
                     <td>
                        <input data-id="{{$user->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $user->status ? 'checked' : '' }}>
                     </td>
                  </tr>
               @endforeach
            </tbody>
        </table>
    </div>
</body>
<script>
  $(function() {
    $('.toggle-class').change(function() {
        var status = $(this).prop('checked') == true ? 1 : 0;
        var user_id = $(this).data('id');

        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/changeStatus',
            data: {'status': status, 'user_id': user_id},
            success: function(data){
              console.log(data.success)
            }
        });
    })
  })
</script>
</html>

Next go to web.php and put below code.

Route::get('users', [App\Http\Controllers\UserController::class, 'index']);
Route::get('changeStatus', [App\Http\Controllers\UserController::class, 'changeStatus']);

Now run the project using below code

php artisan serve

Let’s got to database and check status would be update or not.

Hi I am Amit Kumar Thakur Experienced as s Software Developer with a demonstrated history of working in the information technology and services industry. Skilled in HTML, CSS, Bootstrap4, PHP, Laravel-9 , REST API,FB API,Google API, Youtube Api, Bitbucket,Github,Linux and jQuery. Strong engineering professional focused in Computer/Information Technology Administration and Management. Currently my profile is to Software Developer, analyze the requirement, creating frame for web application, coding and maintenance.

Related Posts

Could not fetch https://api.github.com/repos/Setasign/FPDI/zipball/

When I composer update in Laravel its throwing error could not fetch issues so let’s start to finish this issues. 1st step go to GitHub setting section….

Error: error:0308010C:digital envelope routines::unsupported

In this tutorial I’m going to share how to solve Error: error:0308010C:digital envelope routines::unsupported. Just copy below code and run your terminal. After run above all code…

API calls from the server require an appsecret_proof argument

In this tutorial im going to solve this issue API calls from the server require an appsecret_proof argument. 1st step go to developer facebook advance setting and…

How to Delete All Records Older Than 30 Days in Laravel 10 ?

In Laravel, you can use the Eloquent ORM to delete records older than a certain number of days. Here’s an example of how you can delete all…

How to safely remove Laravel Debugbar ?

What is Laravel Debugbar ? Laravel Debugbar is a package for the Laravel PHP framework that provides a debug bar or toolbar for your application. It offers…

Example of __construct and __destruct in laravel ?

In Laravel, PHP classes can have a constructor and destructor like any other PHP class. The constructor is called when an object is created, and the destructor…

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x