Likes y DisLikes en Laravel

En el universo del desarrollo web, la interacción y la retroalimentación de los usuarios son esenciales. En este tutorial, exploraremos cómo construir un robusto sistema de Likes y Dislikes en Laravel, añadiendo una capa de participación y valoración a tu aplicación web.

Un sistema de Likes y Dislikes en Laravel, o en cualquier otro marco de desarrollo web, es una funcionalidad que permite a los usuarios expresar su preferencia o desagrado por un determinado contenido. En el contexto de Laravel, un sistema de este tipo generalmente involucra la implementación de ciertos componentes clave:

Modelos y migraciones

Model User

public function likes(){
        return $this->hasMany(Like::class);
    }

Model Post

namespace App\Models;

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

class Post extends Model
{
    use HasFactory;

    public function likes(){
        return $this->hasMany(Like::class);
    }

    public function isLikedByLoggedInUser(){
        return $this->likes->where('user_id',auth()->user()->id)->isEmpty() ? false : true ;
    }
}

Model Like

namespace App\Models;

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

class Like extends Model
{
    use HasFactory;
    public function post(){
        return $this->belongsTo(Post::class);
    }
}

Rutas | para guardar o borrar likes

use App\Http\Controllers\PostController;
// mostrar los posts
Route::get('/', [PostController::class, 'index']);
// update likes (insert - delete)
Route::post('/like', [PostController::class,'like']);

Controlador  para mostrar los post y la lógica para obtener likes o dislikes

namespace App\Http\Controllers;

use App\Models\Like;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;

class PostController extends Controller
{
    public function index(){
        $posts = Post::all();
        return view('welcome', compact("posts"));
    }
    public function like():JsonResponse{
        
        $post = Post::find(request()->id);

        if($post->isLikedByLoggedInUser()){
            //dislike
            $result = Like::where([
                'user_id' => auth()->user()->id,
                'post_id' => request()->id
            ])->delete();
            return response()->json([
                'count' =>Post::find(request()->id)->likes->count(),
                'color' => 'text-dark'
            ], 200);

        }else{
            //like
            $like = new Like();
            $like->user_id = auth()->user()->id;
            $like->post_id = request()->id;
            $like->save();
            return response()->json([
                'count' =>Post::find(request()->id)->likes->count(),
                'color' => 'text-danger'
            ], 200);
        }

    }
}

Vista welcome.blade.php para mostrar los posts

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">        
        @foreach ($posts as $item)
        <div class="col-sm-3 mt-5 mb-5">
            <div class="card h-100">
                <img src="/img/{{$item->image}}" alt="" class="card-img-top">
                <div class="card-body">
                    {{Str::limit($item->content,100,'.')}}            
                </div>
                <div class="card-footer">
                    @auth
                    <div class="posts d-inline" id="{{$item->id}}">
                        <span class="{{$item->likes->contains("user_id",auth()->id()) ? 'text-danger':'text-dark' }}" id="heart{{$item->id}}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/>
                          </svg>
                        </span>                        
                    </div>
                    @else
                    <a href="/login" class="text-dark text-decoration-none">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/>
                        </svg>
                    </a>                    
                    @endauth
                    <p class="d-inline" id="count{{$item->id}}"> Likes {{$item->likes->count()}}</p>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection

Interactividad con Javascript

    const token = document.querySelector('meta[name="csrf-token"]').content;
    let posts = document.querySelectorAll(".posts")

    posts.forEach(post => {       
        document.getElementById(post.id).addEventListener("click",e=>{            
            fetch("/like",{
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token
                },
                method: 'post',
                body: JSON.stringify({
                    id : post.id
                })
            }).then(response => { 
                response.json().then(data => {
                    let count = document.getElementById("count"+post.id)
                    count.innerHTML = " Likes "+data.count

                    let heart = document.getElementById("heart"+post.id)
                    heart.className = ""                    
                    heart.classList.add(data.color)
                })
            }).catch(error => {
                    console.log(error)
            });  
        })        
    });

En resumen, un sistema de Likes y Dislikes en Laravel implica la implementación de estructuras de datos, lógica de negocio y elementos de interfaz de usuario que permiten a los usuarios interactuar con el contenido de una manera que va más allá de simplemente visualizarlo. Estas funciones agregan un componente social y de participación a tu aplicación web.

Leido 494 veces