Create insert multiple checkbox Laravel

                         Create insert multiple checkbox Laravel



Step 1: Update Your Database Credentials

After that update your database credentials in your .env file which is located in your project root.

1. connection databases

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_learn
DB_USERNAME=root
DB_PASSWORD=

Step 2: form upload file

form upload

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Form</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<style>
    body {
        color: #999;
        background: #f5f5f5;
        font-family: 'Roboto', sans-serif;
    }
    .form-control, .form-control:focus, .input-group-addon {
        border-color: #e1e1e1;
        border-radius: 0;
    }
    .signup-form {
        width: 50%;
        margin: 0 auto;
        padding: 30px 0;
    }
    .signup-form h2 {
        color: #636363;
        margin: 0 0 15px;
        text-align: center;
    }
    .signup-form .lead {
        font-size: 14px;
        margin-bottom: 30px;
        text-align: center;
    }
    .signup-form form {		
        border-radius: 1px;
        margin-bottom: 15px;
        background: #fff;
        border: 1px solid #f3f3f3;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }
    .signup-form .form-group {
        margin-bottom: 20px;
    }
    .signup-form label {
        font-weight: normal;
        font-size: 13px;
    }
    .signup-form .form-control {
        min-height: 38px;
        box-shadow: none !important;
        border-width: 0 0 1px 0;
    }	
    .signup-form .input-group-addon {
        max-width: 42px;
        text-align: center;
        background: none;
        border-bottom: 1px solid #e1e1e1;
        padding-left: 5px;
    }
    .signup-form .btn, .signup-form .btn:active {        
        font-size: 16px;
        font-weight: bold;
        background: #19aa8d !important;
        border-radius: 3px;
        border: none;
        min-width: 140px;
    }
    .signup-form .btn:hover, .signup-form .btn:focus {
        background: #179b81 !important;
    }
    .signup-form a {
        color: #19aa8d;
        text-decoration: none;
    }	
    .signup-form a:hover {
        text-decoration: underline;
    }
    .signup-form .fa {
        font-size: 21px;
        position: relative;
        top: 8px;
    }
    
</style>
</head>
<body>
<div class="signup-form">
    <h2>Form checkbox</h2>
    <form action="{{ route('form/save') }}" method="POST">
        @csrf
        <div class="container">
            <div class="row">
                <div class="col-sm">
                    <span>Front-End</span>
                    <br>
                    <br>
                    <div class="form-check">
                        <label class="form-check-label" for="check1">
                        <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="HTML">HTML
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label" for="check2">
                        <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="CSS">CSS
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="JS">JS
                        </label>
                    </div>
                </div>
                <div class="col-sm">
                    <span>Back-End</span>
                    <br>
                    <br>
                    <div class="form-check">
                        <label class="form-check-label" for="check1">
                        <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="PHP">PHP
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label" for="check2">
                        <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="JAJA">JAJA
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="ASP.NET">ASP.NET
                        </label>
                    </div>
                </div>
                <div class="col-sm">
                    <span>Other Language</span>
                    <br>
                    <br>
                    <div class="form-check">
                        <label class="form-check-label" for="check1">
                        <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="Laravel">Laravel
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label" for="check2">
                        <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="Python">Python
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" id="" name="checkbox[]" value="Note.Js">Note.Js
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <br>
        <span class="text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
        </span>
    </form>
</div>
</body>
</html>

Step 3: Controller

controller upload

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use Carbon\Carbon;
use App\Models\formBasic;

class FormController extends Controller
{
    //view page
    public function index()
    {
        return view('form');
    }
    // save record
    public function saveRecord(Request $request)
    { 
        foreach ($request->checkbox as $key=>$name) {
            
            $insert = [

                'name_program' =>$request->checkbox[$key],
            ];

            DB::table('form_checkbox_tbls')->insert($insert);
        }
        return redirect()->back();
    }
}

Step 4: Route

route

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return redirect('form/new');
});

Route::get('form/new', [App\Http\Controllers\FormController::class, 'index'])->name('form/new');
Route::post('form/save', [App\Http\Controllers\FormController::class, 'saveRecord'])->name('form/save');

Step 5: databases migrate

table migrate

<?php

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

class CreateFormCheckboxTblsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('form_checkbox_tbls', function (Blueprint $table) {
            $table->id();
            $table->string('name_program')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('form_checkbox_tbls');
    }
}

Step 6: Add in Home Page

php artisan migrate

Step 7: Run

php artisan serve

Reactions

Post a Comment

0 Comments