How To Store Multiple Checkbox Value In Database Using Laravel

Websolutionstuff | May-14-2021 | Categories : Laravel

In this post we will see how to store multiple checkbox value in database using laravel. Whenever you want to save multiple checkbox value in the single column in database at that time this example will help to solve your query.

Here we will store checkbox value and insert multiple checkbox value in database and also we will see how to retrive multiple checked checkbox value.

 

Step 1 : Install Laravel 8 and Setup Configuration for Store Multiple Checkbox Value in Database

Step 2 : Create Model and Migartion Table for Save Multiple Checkbox Value

Step 3 : Create Route

Step 4 : Create Controler

Step 5 : Create Blade File

 

Step 1 : Install Laravel 8 and Setup Configuration for Store Multiple Checkbox Value in Database

 Install laravel application and set database configration as per your requirment.

 

 

Step 2 : Create Model and Migartion Table for Save Multiple Checkbox Value

Now, we will create database migration for posts table and Post Model using artisan command in laravel.

php artisan make:model Post -m

 

After that add below code in your post migration file in  this path /database/migrations/2021_05_14_103523_create_posts_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{

    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('category');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

 

Copy below code and add in your Post model.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['name','category'];

    public function setCategoryAttribute($value)
    {
        $this->attributes['category'] = json_encode($value);
    }

    public function getCategoryAttribute($value)
    {
        return $this->attributes['category'] = json_decode($value);
    }
}

 

Step 3 : Create Route

After adding migration and model we need to add route in web/routes.php file.

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;

Route::resource('posts', PostController::class);

 

Step 4 : Create Controler

Here, we have created PostController, so copy below code in your controller.

<?php

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all();
        return view('multiplecheckboxdemo',compact('posts'));
    }

    public function create()
    {
        return view('multiplecheckboxformdemo');
    }

    public function store(Request $request)
    {
        $input = $request->all();
        $input['category'] = $request->input('category');
        Post::create($input);
        return redirect()->route('posts.index');
    }
}

 

 

Step 5 : Create Blade File

Now, create 2 blade file for view output. 

1) resources/views/multiplecheckboxdemo.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Store Multiple Checkbox Value In Database Using Laravel - websolutionstuff.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3 mt-5">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="text-white">How To Store Multiple Checkbox Value In Database Using Laravel - websolutionstuff.com</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 text-right mb-3">
                                <a href="{{ route('posts.create') }}" class="btn btn-success">Create</a>
                            </div>
                        </div>
                        <table class="table table-bordered">
                            <tr>
                                <th>Name</th>
                                <th>Category</th>
                            </tr>
                            @foreach($posts as $post)
                            <tr>
                                <td>{{ $post->name }}</td>

                                <td>
                                    @foreach($post->category as $value)
                                        {{$value}},
                                    @endforeach
                                </td>
                            </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

2) resources/views/multiplecheckboxformdemo.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Store Multiple Checkbox Value In Database Using Laravel - websolutionstuff.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3 mt-5">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="text-white">How To Store Multiple Checkbox Value In Database Using Laravel - websolutionstuff.com</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 text-right mb-3">
                                <a href="{{ route('posts.index') }}" class="btn btn-primary">Back</a>
                            </div>
                        </div>
                        <form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label><strong>Name :</strong></label>
                                <input type="text" name="name" class="form-control"/>
                            </div>  
                            <div class="form-group">
                                <label><strong>Category :</strong></label><br>
                                <label><input type="checkbox" name="category[]" value="Red"> Red</label>
                                <label><input type="checkbox" name="category[]" value="Blue"> Blue</label>
                                <label><input type="checkbox" name="category[]" value="Green"> Green</label>
                                <label><input type="checkbox" name="category[]" value="Yellow"> Yellow</label>
                            </div>  

                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-success btn-sm">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

Now, Run your project and enjoy your output.

 

Recommended Post
Featured Post
Laravel 9 Socialite Login with Google Account
Laravel 9 Socialite Login with...

In this article, we will see laravel 9 socialite login with a google account. This post gives you an example of a larave...

Read More

Apr-15-2022

Top 12 Tips To Improve React JS Performance In 2023
Top 12 Tips To Improve React J...

In the dynamic world of web development, staying ahead of the curve is essential, and in 2023, React JS continues to be...

Read More

Aug-28-2023

How To Create Dynamic Line Chart In Laravel 9
How To Create Dynamic Line Cha...

In this article, we will see how to create a dynamic line chart in laravel 9. A dynamic line chart or line plot or...

Read More

Mar-22-2022

How To Validate Phone Number In Laravel 10
How To Validate Phone Number I...

In this article, we will see how to validate phone numbers in laravel 10. Here, we will learn about mobile number v...

Read More

May-10-2023