Un sistema de Tags en Laravel más fácil

En este tutorial vamos a ver la implementación de un sistema de etiquetas o tags para agregar o suprimirlas en un post usando el framework de desarrollo de aplicaciones web Laravel, sin agregar módulos o componentes adicionales, ni archivos que extiendan o ralentizen el proceso y carga de las vistas. Empecemos entonces.

¿Qué es un Tag?

Un tag o etiqueta se podría decir que es un sistema de clasificación de contenidos que ayuda a tener un orden dentro de un conjunto de publicaciones, ayuda a tener un acceso a la información mucho más eficiente, en un proyecto web de SEO realmente es una buena opción para hacer enlazado interno, pero debemos saber usarlo para evitar las urls duplicadas con canónicals.

¿Para qué sirve un sistema de tags?

Sirve para organizar el acceso a las diferentes secciones mediante un orden,  es una forma de relaciones post de distintas temáticas pero que tienen algo en común, un nexo que los úne según el significado que tengan. Implementar este sistema es relativamente sencillo con Laravel sus sistema blade nos ayuda bastante, no obstante es imprescindible el uso de Javascript, en esta ocasión usaremos el viejo Jquery que aún sigue vigente de más a menos tambien usaremos una libreria llama Choosen la cual permite el diseño de la interactividad para agregar o suprimir tags en la vista de creación o edición del post de noticias. Ahora si entremos al desarrollo.

¿Cómo programar un sistema de tags eficientemente?

Para programar un sistema de tags en Laravel, debemos tener en claro lo que vamos a contruir y con ello veremos el diseño o arquitectura de urls, la clasificación de los contenidos, asi como las relaciones entre ellos.

No obstante, asumimos que tienes instalado Laravel la versión 5.8 esta bien, la configuración de la base de datos en .env  y por su puesto ejecutado el comando auth para generar el sistema de autenticación ésta última no es necesario pero sería recomendable por el sistema de rutas que generaremos. Continuamos.

Creación del modelo y migración para Noticias

Crearemos dos modelos uno para las Noticias y otro que contendrá los Tags, entonces de una vez comencemos:

Ejecutamos el siguiente comando para obtener el modelo y la migración para Noticias en nuestra terminal

php artisan make:model Noticias -m

Implementamos el siguiente código en Noticias.php, donde adeás de los atributos para el modelo declaramos la relación con el modelo Tags.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Noticias extends Model
{
    protected $fillable = [
        'slug',
        'title',
		'description', 
        'titulo', 
        'descripcion',        
        'urlfoto',
        'urlvideo',
        'link',
        'visitas'
    ];
    public function tags(){
		return $this->belongsToMany('App\Tags');
	}
}

Ahora veamos como debe quedar la migración para el modelo Noticias

<?php

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

class CreateNoticiasTable extends Migration
{
    public function up()
    {
        Schema::create('noticias', function (Blueprint $table) {
            $table->increments('id');
            $table->string('slug',190);
            $table->string('title',67);
		    $table->string('description',155); 
            $table->string('titulo',190); 
            $table->text('descripcion'); 
            $table->string('urlfoto',190)->default("foto.jpg");
            $table->string('urlvideo',15);
            $table->string('link',190);
            $table->integer('visitas')->default(0);
            $table->timestamps();
        });
    }

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

Creación del modelo y migración para Tags

Ejecutamos en la terminal el siguiente comando para generar los archivos del modelo y la migración correspondiente

php artisan make:model Tags -m

Con ello obtenemos los templates, al cual le agregamos código y debería quedar de la siguiente manera

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
class Tags extends Model
{
    protected $table = "tags";
    public $timestamps = false;
	protected $fillable =['slug','nombre','descripcion','urlfoto'];

	public function noticias(){
		return $this->belongsToMany('App\Noticias');
	}

}

En nuestra migración ocurre algo especial debemos declarar la tabla pivote llamada noticias_tags, veamos como debe quedar

<?php

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

class CreateTagsTable extends Migration
{
    public function up()
    {
        Schema::create('tags', function (Blueprint $table) {
            $table->increments('id');
            $table->string('slug',15)->unique();            
            $table->string('nombre',15)->unique();
            $table->text('descripcion');
            $table->string('urlfoto')->nullable();            
        });

        Schema::create('noticias_tags', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('noticias_id')->unsigned();
            $table->foreign('noticias_id')->references('id')->on('noticias')->onUpdate('cascade')->onDelete('cascade');
            $table->integer('tags_id')->unsigned();            
            $table->foreign('tags_id')->references('id')->on('tags')->onUpdate('cascade')->onDelete('cascade');            
        });
    }

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

Ok, entonces ahora solo queda migrar los modelos para generar la tablas correspondientes además de crear la relaciones de integridad referencial. Ejecutemos el siguiente comando en la terminal:

php artisan migrate 

En nuestra base de datos local, en Xampp o Wampp veremos 3 tablas creadas que nos interesan además de los otras que por defecto las generar Laravel.

Creando el sistema de rutas

Para ello en el archivo routes/web.app agregamos las siguientes lìneas de código PHP

Route::group(['prefix' => 'admin', 	'middleware' => 'auth'], function() {
    Route::resource('noticias',         'Admin\NoticiasController',         ['as'=>'admin']);  
    Route::resource('tags',         'Admin\TagsController',                 ['as'=>'admin']);    
});

Creando el CRUD  para noticias NoticiasController

Ejecutamos el comando artisan 

php artisan make:controller Admin/Noticias Controller --resource  

Este comando creará una carpeta con el nombre de Admin y dentro se generará un controlador con los métodos CRUD vacios, depende de nosotros programar la lógica usando consultas eloquent.

Veamos ¿Cómo debería quedar esto controlador?

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Noticias;
use App\Tags;

class NoticiasController extends Controller
{
    public function index(Request $request){
        $noticias = Noticias::orderBy('titulo')->paginate(30);
        return view('admin.noticias.index',compact('noticias'))
            ->with('i', ($request->input('page', 1) - 1) * 15);
    }
    public function create(){
        $tags  =    Tags::orderBy("nombre","ASC")->pluck("nombre","id");
        return view('admin.noticias.create')->with('tags',$tags);
    }
    public function store(Request $request)
    {
        $noticia    =   new Noticias($request->all());            
        if ($request->hasFile('urlfoto')){    
            $file   =   $request->file('urlfoto');            
            $nombre =   str_slug($request->slug).".".$file->getClientOriginalExtension();
            $file->move(public_path('img/noticias/'),$nombre);
            $noticia->urlfoto = $nombre;
        }
        $noticia->save();     
        if(!empty($request->tags))          
            $noticia->tags()->sync($request->tags);
              
        return redirect('/admin/noticias')->withSuccessMessage("Se ha creado correctamente");
    }

    public function edit($id){
        $noticia=   Noticias::findOrFail($id);        
        $tags   =   Tags::orderBy("nombre","ASC")->pluck("nombre","id");
        $mytags =   $noticia->tags->pluck('id')->toArray();
        return view('admin.noticias.edit',compact('noticia','tags','mytags'));
    }   
    public function update(Request $request, $id){
        $noticia            =   Noticias::find($id);
        $urlfotoanterior    =   $noticia->urlfoto;
        $noticia->fill($request->all());
        if ($request->hasFile('urlfoto')){    
            $file   =   $request->file('urlfoto');            
            $nombre =   str_slug($request->slug).".".$file->getClientOriginalExtension();
            $file->move(public_path('img/noticias/'),$nombre);
            $noticia->urlfoto = $nombre;
            $rutaAnterior = public_path("img/noticias/".$urlfotoanterior);
            if (file_exists($rutaAnterior)) {   unlink (realpath($rutaAnterior));   }
        }        
        $noticia->save();
        $noticia->tags()->sync($request->tags);
        return redirect()->back()->withSuccessMessage("Se ha actualizado correctamente");
    }
}

....

Pronto publicaremos un video completo del sistema de tags Laravel