Configuración de Cursos Similares en Visual Studio

Clase 16 de 21 • Curso de Introducción a Laravel 8

Resumen

¿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!

Carlos Eduardo Gomez García

teacher•

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

Ismael López

student•

Que bien, gracias no lo sabía

Jimmy Buriticá Londoño

student•

Gracias por la información, he notado que Italo los usa en varios cursos, pero no sabía como se llamaba. La documentación esta muy clara. 👍

Lucas Durán

student•

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();
  }

Jimmy Buriticá Londoño

student•

Excelente aporte, ya probé este código y de esta forma evitamos que se repita el curso. 👍

Hector Vasquez

student•

genial

Solo cambiaría take(2), por limit(2), para en vez de traer el 100% de los cursos de la bd y filtrar, traer directamente solo 2 de la bd

Edward Espinoza

student•

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();
    }

KEVIN BRAYAN LUNA FIGUEROA

student•

Muchas gracias por el aporte!

Juan Ricardo Cardona Álvarez

student•

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)

Sergio Flores Genis

student•

Aquí tienes un problema de memoria y una petición extra a la base de datos para traer el modelo Category. Como lo explica el profesor es la mas optima si los traes desde el curso.

Jimmy Buriticá Londoño

student•

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 }}</h3>
    <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 }}</h3>
          <h3 class="text-md text-gray-500">{{ $course->excerpt }}</h4>

          <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</h2>
  <h2 class="text-xl text-gray-600">Fórmate online como profesional en tecnología</h3>
</div>

<livewire:course-list>
@endsection

Guillermo Camacho

student•

Depronto habrá un curso donde se pueda aprender a fondo el tipo de consultas que hace en el ejemplo de la función similar()?. Es un punto muy importante ya que se puede hacer varios tipos de filtros, pero no se entiende bien como hace match con la bd para interpretar y usar adecuadamente la sintaxis para ciertas necesidades.

Javier Marin Ayza

student•

Hay un curso de eloquent donde se explican estas cosas

Team Cromática Coaching

student•

Me sale este error.

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

Pueden ayudarme por favor

Alexis Magdiel Mendoza Vallarta

student•

Te hace falta el parentesis cuando mandas a llamar al metodo similar en la vista:

@foreach ($course->similar() as $course)

Josafat Morales Toledo

student•

cual es la funcion de ponerle el ->with('user') en la function similar??

Brian Cobaleda

student•

Hola, genial el curso, tengo una duda, cuando ejecuto php artisan serve me funciona perfectamente, sin embargo, si lo uso solamente con Xamp me sale error 404. Esto tinee alguna complicación al momento de sibir el proyecto a desarrollo?

Carlos Eduardo Gomez García

teacher•

¡Hola! Depende, ¿en qué ruta tienes guardado tu proyecto? ¿Y cómo estás accediendo a él desde el navegador?

Carmen Urbina Herrera

student•

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.

Engell Eduardo Lopez Mairena

student•

Con la **versión 4 **se preparo un sistema de control de activos con la ** versión 5 **un sistema de clientes ambas en una empresa multinacional (imagina la cantidad de data y la escalabilidad que se necesita) recuerdo también con la versión 6 un sistema de control de explotación de agua para una entidad gubernamental. quizás lo estas viendo de esa manera por que ítalo en este curso muestra las bondades como aquí esta utiliza y no el escribe código mas código al final los frameworks vienen a ayudarte a tener un código mas limpio, ordenado y que te ahorre tiempo. laravel ya tiene sus años en el mercado hay grandes sistemas potenciados por el tipo sistemas de vida como lo mencionas. por otro lado adáptalo a tus necesidades y recuerda que su corazón sigue siendo PHP

Hector Vasquez

student•

simple. Toma un proyecto en cualquier lenguaje que hayas hecho, y trata de copiar una parte compleja en laravel. Viendo documentación te vas a dar cuenta cómo funciona toda la parte que necesitas para programar esa lógica de negocio en este framework

Juan José del Aguila López

student•

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

Configuración de Cursos Similares en Visual Studio

Introducción

Curso Renovado de Laravel: Nuevas Herramientas y Conocimientos

Proyectos modernos con Laravel 8 y JetStream

Curso de Laravel 6: Soporte a Largo Plazo y Migración a Nuevas Versiones

Instalación y uso de JetStream en Laravel con Blade y TailwindCSS

Proyecto con Laravel 8

Creación de Proyecto Web con Laravel 8 y Tailwind CSS

Instalación y Configuración de Laravel 8 con Tailwind CSS

Creación de Datos Semilla en Laravel con Faker

Configuración de Rutas y Vistas en Laravel con JetStream

Creación de Plantillas Web con Blade y Tailwind CSS en Laravel

Configuración de Plantillas Blade en Visual Studio Code

Creación de Componentes Dinámicos con Livewire en Laravel

Creación de Campos Virtuales en Componentes con Tailwind CSS

Creación de Controladores y Rutas en Laravel 8

Rutas dinámicas y maquetación de cursos en PHP con Laravel

Configuración de Listado de Lecciones en Visual Studio