martes, 1 de diciembre de 2015

18 - Tutorial de Laravel 5 - Search Form (Formulario de búsqueda)




En esta parte del Tutorial de Laravel 5 integraremos un formulario de búsqueda al menú para poder realizar búsquedas entre los comentarios. Las búsquedas podrán ser realizadas por los usuarios autenticados e invitados, si en los resultados de búsqueda de un usuario autenticado aparece algún comentario suyo, entonces, le agregaremos las opciones de editar y eliminar.

El formulario lo integraremos al menú del layout "home.blade.php" ...

<form class="navbar-form navbar-left" role="search" action="{{url('home/searchredirect')}}">
 <div class="form-group">
  <input type="text" class="form-control" name='search' placeholder="Buscar ..." />
 </div>
 <button type="submit" class="btn btn-default">Buscar</button>
</form>


Este formulario será enviado a través del método get. La ruta definida en el action la utilizaremos para manejar el argumento "search" y crear una redirección hacia una ruta amigable.

A continuación crearemos las rutas en routes.php ...

Route::get('home/searchredirect', function(){
     
    /* Nuevo: si el argumento search está vacío regresar a la página anterior */
    if (empty(Input::get('search'))) return redirect()->back();
    
    $search = urlencode(e(Input::get('search')));
    $route = "home/search/$search";
    return redirect($route);
});
Route::get("home/search/{search}", "HomeController@search");


Observen como la primera ruta es la que se encuentra en el formulario de búsqueda, obtiene el argumento get "search" y crea una nueva ruta pasándole el valor del argumento, la ruta amigable está conectada al controlador HomeController y a una nueva acción llamada "search".

Agregaremos al controlador HomeController la siguiente clase para trabajar con la tabla "comments":

use App\Comments;


Código de la acción "search" ...

    public function search($search){
        $search = urldecode($search);
        $comments = Comments::select()
                ->where('comment', 'LIKE', '%'.$search.'%')
                ->orderBy('id', 'desc')
                ->get();
        
        if (count($comments) == 0){
            return View('home.search')
            ->with('message', 'No hay resultados que mostrar')
            ->with('search', $search);
        } else{
            return View('home.search')
            ->with('comments', $comments)
            ->with('search', $search);
        }
    }


Como se puede ver en la acción obtenemos el valor del argumento "search" y guardamos los posibles comentarios en "$comments", la consulta de búsqueda la realizamos a través de la cláusula "LIKE". Si no se encuentran resultados se pasan dos variables a una nueva vista "search", la variable "message" es para mostrar un comentario de que no existen resultados y la variable "search" que guarda el valor de la búsqueda, de lo contrario, se pasan igualmente dos variables a la nueva vista, "comments" que contiene los comentarios y "search" que guarda el valor de la búsqueda.

Finalmente crearemos la vista "search.blade.php" ...

@extends('layouts.home')

@section('content')
<h3>Resultado de la búsqueda: {{$search}}</h3>
@if (isset($message))
<div class='bg-warning' style='padding: 20px'>
    {{$message}}
</div>
@endif
<hr />
@if (isset($comments))
<?php 
        $modal = 0;
        foreach($comments as $comment):
            $user = App\User::select()->where('id', '=', $comment->id_user)->first();
        ?>
        <div class="row">
            <div class="col-md-1">
                <img src='{{url($user->perfiles)}}' class='img-responsive' style='max-width: 60px' />
                <strong>{{$user->name}}</strong>
            </div>
            <div class='col-md-6'>
               {{$comment->comment}} 
               <br />
               <i>Fecha: {{$comment->date}} · Hora: {{$comment->time}}</i>
               
               
               @if(isset(Auth::user()->id))
               @if($comment->id_user == Auth::user()->id)
               <hr />
                <!-- Botón que abre la ventana modal eliminar -->
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteComment{{$modal}}">
                  Eliminar
                </button>

                <!-- Ventana modal para eliminar -->
                <div class="modal fade" id="deleteComment{{$modal}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myModalLabel">¿Realmente quieres eliminar este comentario?</h4>
                      </div>
                      <div class="modal-body">
                        <form method="post" action="{{url('user/deletecomment')}}">
                            {{csrf_field()}}
                            <input type="hidden" name="id_comment" value="{{$comment->id}}" />
                            <button type="submit" class="btn btn-danger">Eliminar</button>
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Botón para abrir la ventana modal de editar -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editComment{{$modal}}">
                  Editar
                </button>

                <!-- Ventana modal editar -->
                <div class="modal fade" id="editComment{{$modal}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myModalLabel">Editar comentario</h4>
                      </div>
                      <div class="modal-body">
                        <form method="post" action="{{url('user/editcomment')}}">
                            {{csrf_field()}}
                            <div class="form-group">
                            <textarea name="comment" rows="10" class="form-control">{{$comment->comment}}</textarea>
                            </div>
                            <input type="hidden" name="id_comment" value="{{$comment->id}}" />
                            <button type="submit" class="btn btn-primary">Editar</button>
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                      </div>
                    </div>
                  </div>
                </div>
                <?php $modal++ ?>
               @endif
               @endif
            </div>
        </div>
        <hr />
        <?php endforeach ?>
@endif
@stop


Ahora prueben a realizar búsquedas.