55. Crud de etiquetas

En este capítulo aprenderás cómo crear un CRUD de etiquetas en tu proyecto de Laravel. Aprenderás a crear las migraciones y modelos necesarios, definir las rutas y controladores para crear, leer, actualizar y eliminar etiquetas, y crear las vistas correspondientes para mostrar y validar los datos de entrada del usuario. Al final del capítulo, tendrás una comprensión completa de cómo implementar un CRUD de etiquetas en Laravel, lo que te permitirá crear y administrar fácilmente etiquetas en tu proyecto.

Tema anterior Siguiente tema

7 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Walter

    Walter hace 1 año

    ? 7° Refactorizando el modelo Tag

    En el archivo app/Models/Tag.php agregamos el método getRouteKeyName:

    <?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Tag extends Model
{
	use HasFactory;

	protected $fillable = ['name', 'slug', 'color'];
	
	public function getRouteKeyName()
	{
		return "slug";
	}


	public function posts(){
		return $this->belongsToMany(Post::class);
	}
}

     

  • Walter

    Walter hace 1 año

    ? 6° Creación de una vista parcial de Formulario

    Creamos el archivo form.blade.php en resources/views/admin/tags/partials/

    <div class="form-group">
	{!! Form::label('name', 'Nombre:') !!}
	{!! Form::text('name', null, [
		'class' => 'form-control',
		'placeholder' => 'Ingrese el nombre de la etiqueta'
	]) !!}

	@error('name')
		<small class="text-danger">{{ $message }}</small>
	@enderror

</div>

<div class="form-group">
	{!! Form::label('slug', 'Slug') !!}
	{!! Form::text('slug', null, [
		'class' => 'form-control disabled',
		'placeholder' => 'Ingrese el slug de la etiqueta',
		'readonly'
	]) !!}

	@error('slug')
		<small class="text-danger">{{ $message }}</small>
	@enderror

</div>

<div class="form-group">
	{!! Form::label('color', 'Color:') !!}
	{!! Form::select('color', $colors, null, [
		'class' => 'form-control'
	]) !!}
	
	@error('color')
		<small class="text-danger">{{ $message }}</small>
	@enderror
	
</div>

     

  • Walter

    Walter hace 1 año

    ? 5° Configuración del menú sidebar

    Editamos el array 'menu' en el archivo config/adminlte.php para agregar la opción de etiquetas y definir las opciones activas:

    ...
	['header' => 'ADMINISTRADOR'],
	[
		'text' => 'Categorías',
		'route' => 'admin.categories.index',
		'icon' => 'fab fa-fw fa-buffer',
		'active' => ['admin/categories*']
	],
	[
		'text' => 'Etiquetas',
		'route' => 'admin.tags.index',
		'icon' => 'far fa-fw fa-bookmark',
		'active' => ['admin/tags*']
	],
...

    Modificamos la ubicación y el comportamiento del sidebar:

    'layout_topnav' => null,
'layout_boxed' => null,
'layout_fixed_sidebar' => true,
'layout_fixed_navbar' => null,
'layout_fixed_footer' => null,

     

  • Walter

    Walter hace 1 año

    ? 4° Creación de las vistas

    Creamos la carpeta tags en resources/views/admin/ y dentro creamos los archivos de vistas:

    • index.blade.php
    • show.blade.php
    • create.blade.php
    • edit.blade.php

    Copiamos en cada uno la estructura del archivo resources/views/admin/index.blade.php

     

    ? Configuración de la vista index.blade.php

    @extends('adminlte::page')

@section('title', 'Coders Free')

@section('content_header')

	<a class="btn btn-secondary btn-sm float-right" 
		href="{{ route('admin.tags.create') }}">Nueva etiqueta</a>
	
	<h1>Listado de Etiquetas</h1>
@stop

@section('content')

	@if (session('info'))
		<div class="alert alert-success">
			<strong>{{ session('info') }}</strong>
		</div>
	@endif

<div class="card">
	<div class="card-body">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th colspan="2"></th>
				</tr>
			</thead>
			<tbody>
			@foreach ($tags as $tag)
				<tr>
					<td>{{ $tag->id }}</td>
					<td>{{ $tag->name }}</td>
					<td width="10px">
					<a
					class="btn btn-primary btn-sm"
					href="{{ route('admin.tags.edit', $tag) }}"
					>Editar</a>
					</td>
					<td width="10px">
					<form
					action="{{ route('admin.tags.destroy', $tag) }}"
					method="POST">
						@csrf
						@method('delete')
						<button type="submit" class="btn btn-danger btn-sm">
							Eliminar
						</button>
					</form>
					</td>
				</tr>
			@endforeach
			</tbody>
		</table>
	</div>
</div>
@stop

     

    ? Configuración de la vista create.blade.php

    @extends('adminlte::page')

@section('title', 'Coders Free')

@section('content_header')
	<h1>Crear etiqueta</h1>
@stop

@section('content')
<div class="card">
	<div class="card-body">
		{!! Form::open(['route' => 'admin.tags.store']) !!}

			@include('admin.tags.partials.form')

			{!! Form::submit('Crear etiqueta', [
				'class'=>'btn btn-primary'
			]) !!}

		{!! Form::close() !!}
	</div>
</div>
@stop

@section('css')
	<link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
<script src="{{ asset('vendor/jq-sts-1.3/jquery.stringToSlug.min.js') }}">
<script>
	$(document).ready( function() {
		$("#name").stringToSlug({
			setEvents: 'keyup keydown blur',
			getPut: '#slug',
			space: '-'
		});
	});
</script>
@endsection

     

    ? Configuración de la vista edit.blade.php

    @extends('adminlte::page')

@section('title', 'Coders Free')

@section('content_header')
	<h1>Editar etiqueta</h1>
@stop

@section('content')

	@if (session('info'))
		<div class="alert alert-success">
			<strong>{{ session('info') }}</strong>
		</div>
	@endif
	
<div class="card">
	<div class="card-body">
		{!! Form::model($tag, [
			'route' => ['admin.tags.update', $tag],
			'method' => 'put'
		]) !!}

			@include('admin.tags.partials.form')

			{!! Form::submit('Actualizar etiqueta', [
				'class'=>'btn btn-primary'
			]) !!}

		{!! Form::close() !!}
	</div>
</div>
@stop

@section('css')
	<link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
<script src="{{ asset('vendor/jq-sts-1.3/jquery.stringToSlug.min.js') }}">
<script>
	$(document).ready( function() {
		$("#name").stringToSlug({
			setEvents: 'keyup keydown blur',
			getPut: '#slug',
			space: '-'
		});
	});
</script>
@endsection

     

  • Walter

    Walter hace 1 año

    ? 3° Configuración de los métodos del Controlador

     

    Configuramos el método index:

    public function index()
{
	$tags = Tag::all();
	
	return view('admin.tags.index', compact('tags'));
}

     

    Configuramos el método create:

    public function create()
{
	$colors = [
		'red' => 'Color rojo',
		'yellow' => 'Color amarillo',
		'green' => 'Color verde',
		'blue'=> 'Color azul',
		'indigo' => 'Color indigo',
		'purple' => 'Color morado',
		'pink' => 'Color rosado'
	];
	
	return view('admin.tags.create', compact('colors'));
}

     

    Configuramos el método show:

    public function show(Tag $tag)
{
	return view('admin.tags.show', compact('tag'));
}

     

    Configuramos el método edit:

    public function edit(Tag $tag)
{
	$colors = [
		'red' => 'Color rojo',
		'yellow' => 'Color amarillo',
		'green' => 'Color verde',
		'blue'=> 'Color azul',
		'indigo' => 'Color indigo',
		'purple' => 'Color morado',
		'pink' => 'Color rosado'
	];
	
	return view('admin.tags.edit', compact('tag', 'colors'));
}

     

    Configuramos el método store:

    public function store(Request $request)
{
	$request->validate([
		'name' => 'required',
		'slug' => 'required|unique:tags',
		'color' => 'required',
	]);
	$tag = Tag::create($request->all());

	return redirect()->route('admin.tags.edit', compact('tag'))
		->with('info', 'La etiqueta se creó con éxito');
}

     

    ? Debemos habilitar la asignación masiva en el modelo Tag en app/Models/Tag.php:

    <?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Tag extends Model
{
	use HasFactory;

	protected $fillable = ['name', 'slug', 'color'];

	public function posts(){
		return $this->belongsToMany(Post::class);
	}
}

     

    Configuramos el método update:

    public function update(Request $request, Tag $tag)
{
	$request->validate([
		'name' => 'required',
		'slug' => "required|unique:tags,slug,$tag->id",
		'color' => 'required',
	]);
	$tag->update($request->all());

	return redirect()->route('admin.tags.edit', compact('tag'))
		->with('info', 'La etiqueta se actualizó con éxito');
}

     

    Configuramos el método destroy:

    public function destroy(Tag $tag)
{
	$tag->delete();

	return redirect()->route('admin.tags.index')
		->with('info', 'La etiqueta se eliminó con éxito');
}

     

  • Walter

    Walter hace 1 año

    ? 2° Configuración del Controlador

    <?php 
namespace App\Http\Controllers\Admin;
 
use App\Http\Controllers\Controller; 
use Illuminate\Http\Request; 
use App\Models\Tag; 

class TagController extends Controller 
{ 
	public function index() {} 
	public function create() {} 
	public function store(Request $request) {} 
	public function show(Tag $tag) {} 
	public function edit(Tag $tag) {} 
	public function update(Request $request, Tag $tag) {} 
	public function destroy(Tag $tag) {} 
}

     

  • Walter

    Walter hace 1 año

    ? 1° Creación de Rutas

    Creamos un controlador para las 7 rutas necesarias:

    php artisan make:controller Admin/TagController -r

    Se crea el controlador en /app/Http/Controllers/Admin/TagController.php

     

    Editamos el archivo /routes/admin.php para usar el controlador recién creado:

    <?php
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Admin\HomeController;
use App\Http\Controllers\Admin\CategoryController;
use App\Http\Controllers\Admin\TagController;

Route::get('', [HomeController::class, 'index'])->name('admin.home');

Route::resource('categories', CategoryController::class)
	->names('admin.categories');

Route::resource('tags', TagController::class)->names('admin.tags');