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.


7 comentarios

Inicia sesión para comentar

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');