Ordenar hilos por número de respuestas

Este tutorial nos encontrará abordando algunos temas diferentes, sin embargo, el objetivo principal es poder configurar los hilos de clasificación por popularidad de acuerdo con la cantidad de respuestas que tiene cada hilo. Para comenzar, necesitaremos hacer algunos cambios en la vista principal que muestra todos los hilos. Una vez que lo solucionemos a nuestro gusto, podemos comenzar a desarrollar la prueba que será necesaria para nuestra nueva función. Luego escribiremos la prueba, implementaremos el código y nos aseguraremos de que todo funcione también en el navegador.

Uso de CSS básico para colocar un elemento de la interfaz de usuario

Vimos en el último tutorial cómo mostrar el número de respuestas a cualquier hilo dado en la vista show.blade.php. Eso también nos brindó una buena introducción a los ámbitos de consulta globales. Ahora, sería bueno enumerar también la cantidad de respuestas de hilo en la página de inicio. En otras palabras, cuando se muestra la vista index.blade.php para mostrar todos los hilos, deberíamos mostrar el recuento de respuestas para cada hilo. Entonces, en primer lugar, veamos el código que muestra cada hilo individual en la página principal. Se resalta a continuación dentro de las etiquetas html <article>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@extends('layouts.app')
 
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Forum Threads</div>
 
                    <div class="panel-body">
                        @foreach($threads as $thread)
                            <article>
                                <h4>
                                    <a href="{{ $thread->path() }}">{{ $thread->title }}</a>
                                </h4>
                                <div class="body">{{ $thread->body }}</div>
                            </article>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Nuestro objetivo es poner el recuento de respuestas para cada hilo en el lado derecho de cada cuadro de artículo. ¿Cómo podemos lograr este objetivo? Aquí hay algunas adiciones y modificaciones a la vista de índice para comenzar. Agregamos un div con una clase CSS de 'nivel' para que podamos apuntar a eso para diseñar un poco. El elemento <h4> también recibe una nueva clase llamada 'flex' para la que configuraremos reglas en breve. Directamente después del elemento <h4> es donde agregamos el código para mostrar el número de respuestas de hilo. Finalmente, agregamos un elemento <hr> horizontal después de la etiqueta html <article> para separar mejor cada hilo individual.

1
2
3
4
5
6
7
8
9
10
11
12
@foreach($threads as $thread)
    <article>
        <div class="level">
            <h4 class="flex">
                <a href="{{ $thread->path() }}">{{ $thread->title }}</a>
            </h4>
            <strong>{{$thread->replies_count}} {{ str_plural('reply', $thread->replies_count) }}</strong>
        </div>
        <div class="body">{{ $thread->body }}</div>
    </article>
    <hr>
@endforeach

Si bien nuestros hilos son bastante tontos, el diseño se ve bastante decente. ¡Incluso en esta primera etapa!
posicionamiento básico de la interfaz de usuario en la página de índice

Ahora podemos centrarnos en posicionar ese recuento de respuestas que se muestra. Todo lo que haremos es agregar algunas reglas CSS realmente básicas directamente en el archivo app.blade.php por ahora. A continuación, verá que agregamos el estilo básico en la etiqueta <style> que necesitamos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <title>{{ config('app.name', 'Laravel') }}</title>
 
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 
    <!-- My Basic Styles -->
    <style>
        body {
            padding-bottom: 100px;
        }
 
        .level {
            display: flex;
            align-items: center;
        }
 
        .flex {
            flex: 1;
        }
    </style>
</head>
<body>

¡Vamos muy bien!
estilo CSS empujando el elemento a la derecha sin flotar

Vincular el recuento de respuestas

Aquí envolvemos la etiqueta <strong> que contiene el recuento de respuestas del hilo con una etiqueta <a> donde el href se establece en el valor de {{$ thread-> path ()}}. Esto creará un enlace a la vista show.blade.php que mostrará ese hilo en particular con todas sus respuestas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@foreach($threads as $thread)
    <article>
        <div class="level">
            <h4 class="flex">
                <a href="{{ $thread->path() }}">{{ $thread->title }}</a>
            </h4>
            <a href="{{$thread->path()}}">
                <strong>{{$thread->replies_count}} {{ str_plural('reply', $thread->replies_count) }}</strong>
            </a>
        </div>
        <div class="body">{{ $thread->body }}</div>
    </article>
    <hr>
@endforeach

envoltura de etiqueta fuerte con etiqueta de anclaje

Ordenar hilos por número de respuestas

Ahora que la visualización del recuento de hilos en la página principal está funcionando bien, es hora de agregar una forma de filtrar u ordenar los hilos en función del número de respuestas que tiene cada hilo. Queremos incluir siempre una prueba para las nuevas funciones que agregamos. En este escenario, estamos tratando con cómo el usuario debe leer los hilos. Tiene sentido abrir nuestra clase ReadThreadsTest y comenzar a inventar una prueba para esta característica. Aquí están todas nuestras pruebas hasta ahora en esta clase, y el método eliminado para nuestra nueva prueba que estamos creando ahora que se llama test_a_user_can_filter_threads_by_number_of_replies ().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
 
namespace TestsFeature;
 
use TestsTestCase;
use IlluminateFoundationTestingRefreshDatabase;
use IlluminateFoundationTestingDatabaseMigrations;
 
class ReadThreadsTest extends TestCase
{
    use DatabaseMigrations;
 
    public function setUp()
    {
        parent::setUp();
 
        $this->thread = create('AppThread');
    }
 
    public function test_a_user_can_browse_threads()
    {
        $response = $this->get('/threads');
        $response->assertSee($this->thread->title);
        $response->assertStatus(200);
    }
 
    public function test_a_user_can_read_a_single_thread()
    {
        $response = $this->get('/threads/' . $this->thread->channel . '/' . $this->thread->id);
        $response->assertSee($this->thread->title);
        $response->assertStatus(200);
    }
 
    public function test_a_user_can_see_replies_that_are_associated_with_a_thread()
    {
        $reply = factory('AppReply')->create(['thread_id' => $this->thread->id]);
        $response = $this->get('/threads/' . $this->thread->id . '/' . $this->thread->id);
        $response->assertSee($reply->body);
        $response->assertStatus(200);
    }
 
    public function test_a_user_can_filter_threads_according_to_channel()
    {
        $channel = create('AppChannel');
        $threadInChannel = create('AppThread', ['channel_id' => $channel->id]);
        $threadNotInChannel = create('AppThread');
 
        $this->withoutExceptionHandling()->get('/threads/' . $channel->slug)
            ->assertSee($threadInChannel->title)
            ->assertDontSee($threadNotInChannel->title);
    }
 
    public function test_a_user_can_filter_by_any_username()
    {
        $this->signIn(create('AppUser', ['name' => 'JohnDoe']));
        $threadByJohn = create('AppThread', ['user_id' => auth()->id()]);
        $threadNotByJohn = create('AppThread');
        $this->get('threads?by=JohnDoe')
            ->assertSee($threadByJohn->title)
            ->assertDontSee($threadNotByJohn->title);
    }
 
    public function test_a_user_can_filter_threads_by_number_of_replies()
    {
        
    }
}

Lluvia de ideas sobre el pseudocódigo

Antes de que podamos escribir la prueba, tenemos que pensar en cómo crearla. En otras palabras, ¿cuál es la secuencia de eventos Dado - Cuándo - Entonces que estamos viendo aquí?

Dado que hay 3 hilos
Dado que hay 2, 3 y 0 respuestas en dichos hilos
Cuando el usuario filtra todos los hilos por recuento
Luego, los hilos deben devolverse en orden de más respuestas a menos

Este escenario se traduce en este código en el método test_a_user_can_filter_threads_by_number_of_replies (). Tenga en cuenta que en el método de aserción hay una llamada a array_column. Compruébelo en el manual de PHP si necesita un repaso como yo.

1
2
3
4
5
6
7
8
9
10
11
12
13
public function test_a_user_can_filter_threads_by_number_of_replies()
{
    $threadWithTwoReplies = create('AppThread');
    create('AppReply', ['thread_id' => $threadWithTwoReplies->id], 2);
 
    $threadWithThreeReplies = create('AppThread');
    create('AppReply', ['thread_id' => $threadWithThreeReplies->id], 3);
 
    $threadWithZeroReplies = $this->thread;
 
    $response = $this->getJson('threads?popular=1')->json();
    $this->assertEquals([3, 2, 0], array_column($response, 'replies_count'));
}

Bien, es hora de hacer esta prueba y ver cómo nos va.

vagrant @ homestead: ~ / Code / forumio $ phpunit --filter test_a_user_can_filter_threads_by_number_of_replies
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

F 1/1 (100%)

Tiempo: 1,51 segundos, memoria: 10,00 MB

Hubo 1 falla:

1) TestsFeatureReadThreadsTest :: test_a_user_can_filter_threads_by_number_of_replies
Se devolvió JSON no válido de la ruta.

/home/vagrant/Code/forumio/vendor/laravel/framework/src/Illuminate/Foundation/Testing/TestResponse.php:513
/home/vagrant/Code/forumio/vendor/laravel/framework/src/Illuminate/Foundation/Testing/TestResponse.php:527
/home/vagrant/Code/forumio/tests/Feature/ReadThreadsTest.php:73

¡FALLOS!
Pruebas: 1, afirmaciones: 1, fallos: 1.

Vemos que se devolvió un error de JSON no válido de la ruta. ¿Por qué está pasando esto? Bueno, nunca configuramos ningún tipo de capacidad para que ninguno de los métodos del controlador devuelva JSON como respuesta. Están devolviendo páginas completas de HTML en este momento. Sin embargo, hay una manera de devolver JSON condicionalmente mediante el método wantsJson (). Para permitir esto, puede actualizar el método index () en ThreadsController.php para usar este condicional 'if'.

1
2
3
4
5
6
7
8
public function index(Channel $channel, ThreadFilters $filters)
{
    $threads = $this->getThreads($channel, $filters);
    if (request()->wantsJson()) {
        return $threads;
    }
    return view('threads.index', compact('threads'));
}

El método index () ahora tiene la capacidad de devolver json si se solicita. Nuestra prueba está solicitando json, por lo que ahora debería funcionar. Podemos ejecutar la prueba test_a_user_can_filter_threads_by_number_of_replies una vez más ahora.
vagrant @ homestead: ~ / Code / forumio $ phpunit –filter test_a_user_can_filter_threads_by_number_of_replies

PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

F 1/1 (100%)

Tiempo: 1,2 segundos, memoria: 8,00 MB

Hubo 1 falla:

1) TestsFeatureReadThreadsTest :: test_a_user_can_filter_threads_by_number_of_replies
No se pudo afirmar que dos matrices son iguales.
--- Esperado
+++ Real
@@ @@
 Matriz (
- 0 => 3
- 1 => 2
- 2 => 0
+ 0 => '0'
+ 1 => '2'
+ 2 => '3'

/home/vagrant/Code/forumio/tests/Feature/ReadThreadsTest.php:74

¡FALLOS!
Pruebas: 1, afirmaciones: 1, fallos: 1.

Bueno, esto está bastante bien. Echa un vistazo a la matriz que se extrajo del json, genial. Tenga en cuenta que la respuesta nos muestra explícitamente lo que se espera y lo que realmente sucedió. Esperamos un orden de 3,2,0 sin embargo obtuvimos un orden de 0,2,3. Necesitamos poder filtrar la consulta por popularidad, lo que aún no tenemos la capacidad de hacer.

Construyendo sobre la clase ThreadFilters

Recientemente, nos tomó mucho tiempo aprender a refactorizar consultas SQL en una clase dedicada. Así es como se nos ocurrió la clase ThreadFilters que, como recordará, actualmente puede filtrar por nombre de usuario. Bien adivina que. Como ya hizo todo ese trabajo preliminar, puede agregar muchos más tipos de habilidades de filtrado a esa clase, lo que ahora será bastante fácil, ya que el trabajo duro ya está hecho. Las adiciones que hacemos a la clase se destacan aquí, luego discutiremos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
 
namespace AppFilters;
 
use AppUser;
use IlluminateHttpRequest;
 
class ThreadFilters extends Filters
{
    protected $filters = ['by', 'popular'];
 
    protected function by($username)
    {
        $user = User::where('name', $username)->firstOrFail();
 
        return $this->builder->where('user_id', $user->id);
    }
 
    protected function popular()
    {
        $this->builder->getQuery()->orders = [];
        $this->builder->orderBy('replies_count', 'desc');
    }
}

Lo primero que hicimos fue agregar una clave 'popular' a la matriz $ filtros. Después de eso, agregamos un método popular () correspondiente a la clase. En realidad, este es un método interesante. A primera vista, pensaría que podríamos salirse con la suya con $ this-> builder-> orderBy ('replies_count', 'desc'); todo por sí mismo. ¿Por qué existe este $ this-> builder-> getQuery () -> orders = []; código presente? Bueno, en el método index () de ThreadsController, se realiza una llamada a getThreads (). Este es un método que creamos durante la refactorización. Veamos ese método muy rápido.

1
2
3
4
5
6
7
8
9
10
11
protected function getThreads(Channel $channel, ThreadFilters $filters)
{
    $threads = Thread::latest()->filter($filters);
 
    if ($channel->exists) {
        $threads->where('channel_id', $channel->id);
    }
 
    $threads = $threads->get();
    return $threads;
}

Lo que nos gustaría señalar aquí es que este método ya está construyendo la consulta para nosotros. El método latest () es de hecho establecer el 'orden por' predeterminado para ordenar por el campo created_at en la base de datos. Lo que queremos en nuestro filtro popular () es 'ordenar por' el conteo de respuestas. Para que esto funcione, tenemos que borrar cualquier cláusula de "orden por" existente en la consulta existente. Para hacer esto, usa $ this-> builder-> getQuery () -> orders = []; como hicimos en el método popular () que creamos anteriormente.

Ahora podemos ejecutar nuestra prueba.

vagrant @ homestead: ~ / Code / forumio $ phpunit --filter test_a_user_can_filter_threads_by_number_of_replies
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

. 1/1 (100%)

Tiempo: 1,07 segundos, memoria: 8,00 MB

OK (1 prueba, 1 afirmación)

¡Está funcionando!

Por si acaso, podemos volver a ejecutar el conjunto completo de pruebas y descubrir que todo está pasando. Maravilloso.

vagabundo @ homestead: ~ / Código / forumio $ phpunit
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

...................... 22/22 (100%)

Tiempo: 3,1 segundos, memoria: 12,00 MB

OK (22 pruebas, 38 afirmaciones)

Agregar un enlace para el filtro popular

Lo último que tendremos que hacer es asegurarnos de que un usuario pueda activar este filtro desde el navegador. La forma más sencilla de hacerlo es simplemente proporcionar un enlace que incluya el filtro popular en la cadena de consulta. Por supuesto, esto es muy fácil, simplemente abrimos app.blade.php y agregamos un enlace a uno de los menús desplegables.

1
2
3
4
5
6
7
<ul class="dropdown-menu">
    <li><a href="/threads">All Threads</a></li>
    @if(auth()->check())
        <li><a href="/threads?by={{ auth()->user()->name }}">My Threads</a></li>
    @endif
    <li><a href="/threads?popular=1">Popular</a></li>
</ul>

Ahora podemos filtrar por todos los hilos, hilos populares y mis hilos directamente desde la barra de navegación. Fantástico.
haga clic en el enlace para aplicar el filtro a la cadena de consulta

Resumen de clasificación de hilos por número de respuestas

¡Parece que hemos solucionado este asunto de clasificación! Gracias al trabajo anterior que habíamos realizado para configurar esa clase de filtrado de subprocesos dedicada, agregar un nuevo tipo de filtro para los subprocesos fue bastante fácil de hacer.

Header Ads Widget

Ordenar hilos por número de respuestas

Uso de CSS básico para colocar un elemento de la interfaz de usuario

Vincular el recuento de respuestas

Ordenar hilos por número de respuestas

Lluvia de ideas sobre el pseudocódigo

Construyendo sobre la clase ThreadFilters

Agregar un enlace para el filtro popular

Resumen de clasificación de hilos por número de respuestas

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget