No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Introducción a Laravel 8

Curso de Introducción a Laravel 8

Profesor Italo Morales F

Profesor Italo Morales F

Configuración de Cursos Similares en Visual Studio

16/21
Recursos

¿Cómo se configuran los cursos similares en una página web?

La funcionalidad de mostrar cursos similares en una plataforma de aprendizaje en línea es crucial para mejorar la experiencia del usuario al permitirle descubrir otros contenidos relevantes. En este desarrollo, es esencial establecer una relación entre las tablas de la base de datos que contemple dicha similitud. A continuación, descubrirás cómo aplicar esta técnica mediante código y ajustes necesarios en Visual Studio.

¿Dónde debería ubicarse el componente de cursos similares?

Al construir la interfaz del usuario, es vital decidir dónde se integrarán los cursos similares. En este caso, se optó por incluirlos al final de la página individual de cada curso, dentro de un elemento que ocupa dos columnas. Esta ubicación responde a la necesidad de lograr dinamismo y coherencia visual en la página.

¿Cómo se estructuran y estilizan los cursos similares?

Para dar soporte estético y estructural a esta nueva sección, se implementa en una cuadrícula utilizando HTML y clases CSS. Aquí se emplea un div con un sistema de cuadrículas de dos columnas, añadiendo separaciones y márgenes tanto superiores como inferiores para una disposición visual armónica.

<div class="grid-cols-2 gap-8 bg-gray-100">
  <!-- Sección de cursos similares -->
</div>

¿Cómo se crea el método similar en la entidad de cursos?

El método similar es el núcleo funcional que permite filtrar y mostrar cursos de una misma categoría. Esta lógica se desarrolla en el modelo de cursos (app/models) atendiendo a la relación de categorías. El método se define de la siguiente manera:

public function similar() {
    // Condición basada en la categoría del curso actual
    return $this->where('category_id', $this->category_id)
                ->take(2)  // Limita la muestra a dos elementos
                ->get();
}

Este fragmento asegura que, al navegar por un curso específico, la aplicación filtra y muestra cursos "hermanos" según su categoría.

¿Cómo se integra el método similar en la página de cursos?

Una vez definido y configurado el método, está listo para ser utilizado en la vista de la página del curso. Al actualizar y renderizar la página del curso, se verifica que los cursos similares aparezcan correctamente.

@foreach($course->similar() as $similarCourse)
  <!-- Muestra la información de los cursos similares -->
  <x-course-card :course="$similarCourse" />
@endforeach

¿Qué importancia tiene la reutilización de código?

La implementación efectiva en este desarrollo minimiza la cantidad de código necesario para alcanzar un resultado profesional. Aunque en esta configuración inicial se recurre a copiar y pegar fragmentos, se planea mejorarlo en las clases posteriores utilizando componentes, optimizando así la gestión y el mantenimiento del código.

A través de este proceso, conseguirás no solo una funcionalidad eficaz sino también una plataforma intuitiva y atractiva para tus usuarios, fomentando su interés en descubrir más contenido formativo. ¡Continúa explorando y perfeccionando tus habilidades de programación!

Aportes 8

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Esta forma de crear nuevas propiedades “curstomizadas” se llaman Accessors & Mutators, así como tenemos el getNameAttribute() (Accesor) también Laravel nos pone a la disposición el setNameAttribute() (Mutator), les recomiendo darle una leída a esta página de la documentación de Laravel explicándolo a fondo:
.
Eloquent: Mutators & Casting

Para que no se repita el mismo curso en cursos similares le agregué:

->where('id', '!=', $this->id)

Quedando la función similar de esta manera:

public function similar()
  {
    return $this->where('category_id', $this->category_id)->where('id', '!=', $this->id)->with('user')->take(2)->get();
  }

Una forma simplificada y que en cada refresh muestren diferentes cursos relacionados
Laravel Query Builder

public function similar()
    {
        return $this->where([
            ['category_id', $this->category_id],
            ['id', '!=', $this->id]
        ])
            ->with('user')
            ->inRandomOrder()
            ->take(2)
            ->get();
    }

Una forma mas simplificada de obtener los cursos similares usando relaciones de Eloquent en lugar de QueryBuilder y sin incluir el mismo curso repetido.

Course.php

Category.php


PageController.php (Precargar las relaciones para optimizar las consultas a la base de datos)

Comparto el código

course.blade.php

@extends('layouts.web')

@section('content')
<div class="grid grid-cols-3 gap-4">
  <div class="p-8 bg-gray-200 col-span-1">
    <ul class="flex flex-col">
      <li class="font-medium text-sm text-gray-400 uppercase mb-4">Contenido</li>
      @foreach ($course->posts as $post)
        <li class="flex items-center text-gray-600 mt-2">
          {{ $post->name }}
          @if ($post->free)
            <span class="text-xs text-gray-500 font-semibold bg-gray-300 px-2 rounded-full ml-auto">Gratis</span>
          @endif
        </li>
      @endforeach
    </ul>
  </div>
  <div class="text-gray-700 col-span-2">
    <img src="{{ $course->image }}" alt="">
    <h2 class="text-4xl">{{ $course->name }}</h2>
    <p>{{ $course->description }}</p>
    <div class="flex mt-3">
      <img src="{{ $course->user->avatar }}" class="h-10 w-10 rounded-full mr-2" alt="">
      <div>
        <p class="text-gray-500 text-sm">{{ $course->user->name }}</p>
        <p class="text-gray-300 text-xs">{{ $course->created_at->diffForHumans() }}</p>
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 my-8">
      @foreach ($course->similar() as $course)
      <div class="bg-white shadow-lg rounded-lg px-4 py-6 text-center">
        <a href="{{ route('course', $course->slug) }}">
          <img src="{{ $course->image }}" class="rounded-md mb-2" alt="">
          <h2 class="text-lg text-gray-600 truncate uppercase">{{ $course->name }}</h2>
          <h3 class="text-md text-gray-500">{{ $course->excerpt }}</h3>

          <img src="{{ $course->user->avatar }}" class="rounded-full mt-4 mx-auto h-16 w-16" alt="">
        </a>
      </div>
      @endforeach
    </div>
  </div>
</div>
<div class="text-center mt-4">
  <h1 class="text-3xl text-gray-700 mb-2 uppercase">Ultimos Cursos</h1>
  <h2 class="text-xl text-gray-600">Fórmate online como profesional en tecnología</h2>
</div>

<livewire:course-list>
@endsection

Me sale este error.

App\Course::similar must return a relationship instance.

Pueden ayudarme por favor

No se cuanto tiempo lleva Laravel, pero no es programación es configuración. No me imagino usando este de framework para una factura, para un punto de venta o cosas de sistemas de la vida. Por ejemplo un e commerce. No se si yo programo a la antigua, de verdad que no veo la utilidad de frameworks.

    public function similar()
    {
        return $this->where('category_id',$this->category_id)
            ->with('user')
            ->take(2)
            ->get();
    }