Insertar múltiples CHECKBOX en Laravel

Insertar múltiples checkbox en Laravel, En este artículo, veremos cómo insertar múltiples valores de casilla de verificación seleccionados en la base de datos en laravel 11. Por lo tanto, aprenderemos cómo almacenar múltiples valores de casilla de verificación en la base de datos usando jquery en laravel 11
En todo proyecto Backend suele presentarse estos detalles de almacenar múltiples casillas en MySQL como ser: Roles de Usuarios, Permisos, etc. y debemos de guardarlo en una matriz en laravel.
Insertar múltiples CHECKBOX en Laravel
Hay varias formas de almacenar las casillas de verificación marcaras, por ejemplo, de un conjunto de 20 checkbox y solo se marcan 10, estos 10 podemos pasarlo por el ciclo foreach para generar varios registros.
Siempre que desee guardar múltiples valores de casilla de verificación en una sola columna en la base de datos en ese momento, este artículo le será útil.
- Paso 1: Instalar Laravel 11 en Vscode
- Paso 2: Configurar la base de datos .env
- Paso 3: Crear la migración y el modelo
- Paso 4: Crear la ruta
- Paso 5: Crear el controlador
- Paso 6: Crear el archivo Blade
- Paso 7: Ejecutar la aplicación Laravel 11
Paso 1: Instalar Laravel 11 en VSCODE
En este paso, instalaremos Laravel 11 usando el siguiente comando para insertar múltiples valores de casillas de verificación seleccionadas en la base de datos.
composer create-project laravel/laravel checkbox-app
Paso 2: Configurar la base de datos
En este paso, configuraremos los detalles de la base de datos, como el nombre de la base de datos, el nombre de usuario, la contraseña, etc. Esto es vital para que nuestro proyecto trabaje muy bien.
Editar el fichero .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_11_example
DB_USERNAME=root
DB_PASSWORD=root
Paso 3: Crear la migración y el modelo
Ahora, crearemos una migración de base de datos para la tabla de publicaciones y crearemos un modelo de publicaciones utilizando el comando artisan en laravel 11. Veamos un ejemplo
php artisan make:model Article -m
Nota:
El comando anterior creara un modelo de nombre Article y un archivo de migración con el mismo nombre. Por consiguiente, agregue el siguiente código a su archivo de migración que vendría a ser las columnas de la tabla mencionada.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('articles', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('category');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('posts');
}
};
Ahora, agregaremos el código del siguiente modelo de publicación.
app/Models/Article.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
use HasFactory;
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);
}
}
Paso 4: Crear ruta
En este paso, agregaremos rutas en el archivo route.php
para que funcione la inserción de casillas de verificación.
web/route.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ArticleController;
Route::resource('articles', ArticleController::class);
Paso 5: Crear un controlador
Ahora, crearemos un archivo ArticleController.php. Sin embargo, podemos crearlo con la siguiente linea de comando.
php artisan make:controller ArticleController
Por lo tanto, agregue el siguiente código a ese archivo generado.
app/Http/Controllers/ArticleController.php
Este archivo sera el cerebro de nuestra aplicación ya que contendrá todas las instrucciones para la inserción de datos hacia MySQL.
<?php
namespace App\Http\Controllers;
use App\Models\Article;
use Illuminate\Http\Request;
class ArticleController extends Controller
{
public function index()
{
$articles = Article::all();
return view('index',compact('articles'));
}
public function create()
{
return view('multiple_checkbox');
}
public function store(Request $request)
{
$input = $request->all();
$input['category'] = $request->input('category');
Post::create($input);
return redirect()->route('articles.index');
}
}
Paso 6: Crear archivo Blade
En este paso, crearemos un archivo index.blade.php
. Por lo tanto, agregue el siguiente código a ese archivo. Aquí se mostrara la vista al usuario final y contendrá la información de nuestro formulario.
resources/views/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Insertar Multiple Checkbox a Laravel 11 </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">Insert Multiple Checkbox Values</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12 text-right mb-3">
<a href="{{ route('articles.create') }}" class="btn btn-success">Create</a>
</div>
</div>
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Category</th>
</tr>
@foreach($articles as $article)
<tr>
<td>{{ $article->name }}</td>
<td>
@foreach($article->category as $value)
{{$value}},
@endforeach
</td>
</tr>
@endforeach
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
resources/views/multiple_checkbox.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Multiple Checkbox Value In Database</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">Multiple Checkbox Value In Database</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12 text-right mb-3">
<a href="{{ route('articles.index') }}" class="btn btn-primary">Back</a>
</div>
</div>
<form method="post" action="{{ route('articles.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="laravel"> Laravel</label>
<label><input type="checkbox" name="category[]" value="PHP"> PHP</label>
<label><input type="checkbox" name="category[]" value="MySQL"> MySQL</label>
<label><input type="checkbox" name="category[]" value="jquery"> jQuery</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>
Paso 7: Ejecutar la aplicación Laravel 11
Ahora, insertaremos múltiples valores de casillas de verificación seleccionados en la base de datos con el siguiente comando:
php artisan serve
Guardar un solo checkBox en laravel
Si solo deseamos guardar un solo checkbox en Laravel podemos realizar los siguientes pasos:
En nuestro blade declaramos el checkbox
<divclass="form-group">
<inputtype="checkbox"name="nueva_ventana"value="1">
<labelclass="control-label">Abrir en una nueva ventana</label>
</div>
Y en nuestro controller en la función store declaramos lo siguiente:
$requestData = $request->all();
// Si la casilla de verificacion esta marcada, se almacenara e valor del checkbox,
// caso contrario almacenara cero (0) en MySQL
$requestData['nueva_ventana'] = $request->nueva_ventana ?? '0'; // Checkbox
Banner::create($requestData);
En resumen
En laravel podemos almacenar multiples Checkbox o un solo checkbox usando las bondades del framework Laravel.