Ejemplo completo de uso de cookies en Laravel

  • Por
  • PHP
Ejercicio práctico para ilustrar el uso de cookies en el framework PHP Laravel, así como de request y response, controladores, acciones, rutas, etc.

En este ejemplo completo de uso de cookies vamos a practicar con muchas de las cosas que hemos visto hasta el momento en el manual de Laravel 5. Nos servirá para conocer mejor las cookies, pero también para realizar rutas, controladores, vistas y formularios, recibir datos, validar campos, etc.

En realidad el ejemplo es bien sencillo, ya que lo interesante es practicar con el flujo de trabajo con el que construir aplicaciones en Laravel, no tanto complicarse con formularios llenos de datos que recibir. Sin embargo, con lo que vamos a ver podremos construir muchos tipos de formularios ya personalizados con nuestras preferencias, con los datos que necesitemos recibir. Así que ahí vamos!

Objetivo: Sistema de personalización de aspecto

El objetivo es hacer un sistema de personalización del tamaño de la fuente en un supuesto sitio web.

Básicamente tenemos un formulario donde el usuario puede seleccionar el tamaño de fuente que prefiere para visualizar el sitio. Una vez seleccionado el tamaño de la fuente se envía el formulario y se guardará el dato en una cookie, de modo que en siguientes accesos el sitio web sea capaz de memorizar la preferencia del usuario.

Rutas de la aplicación

Tendremos dos rutas simplemente, una que muestra el formulario de personalización y otra que recibe el dato y si es correcto se encarga de almacenar la cookie.

Route::get('personalizacion', 'PersonalizacionController@personalizar');

Route::post('personalizacion', 'PersonalizacionController@guardarpersonalizacion');

Fíjate que la URI es la misma, pero cambian los verbos HTTP. La primera se activa cuando no se envían datos por formulario (verbo get) y la segunda cuando sí se reciben datos de formulario (verbo post). Como ves, ambas invocan al mismo controlador, con diferentes acciones.

Tienes más información de las rutas y dónde se coloca este código en el artículo sobre rutas de Laravel.

Controlador PersonalizacionController

Nuestro controlador se llama PersonalizacionController, como sabes se puede crear la base del controlador inicial con el comando artisan. Eso lo aprendimos ya en el artículo de los controladores en Laravel. Así que nos vamos a limitar a colocar el código de las acciones que tenemos que crear dentro.

Comenzamos con la acción "personalizar" que es la que se invoca cuando se usa el verbo HTTP get. En esta acción vamos a tener que mostrar el formulario para personalizar, que permite al usuario escoger el tamaño de la fuente.

public function personalizar(){
	$tamano_fuente = \Request::cookie('fuente', '16pt');

	return view('personalizacion.formulario', [
		'fuente' => $tamano_fuente
	]);
}

Esta primera acción realmente solo llama a una vista. Lo que pasa es que la vista requiere un dato que es la fuente con la que queremos personalizar el sitio web, por lo tanto tenemos que pasárselo. Para recuperar el dato necesitamos acceder a la cookie de personalización. La primera vez que accede el usuario a la web esa cookie no estará creada, por lo que en ese caso tendremos que darle un valor por defecto a la fuente del sitio web.

Por tanto, en la primera línea del método accedemos al valor de la cookie a través de la fachada de Request. En la llamada al método cookie() enviamos el nombre de la cookie que queremos leer y el valor predeterminado en caso que esa cookie no exista.

Nota: Recuerda que estuvimos explicando todas estas cosas sobre cookies en el artículo cookies en Laravel 5.

Luego mostramos la vista del formulario, enviando el dato que necesita la vista para mostrarse con la fuente personalizada.

La segunda acción es la que se procesa cuando se recibe alguna cosa del formulario de personalización. Como podrás apreciar en el siguiente código, hacemos una validación de la información que necesitamos para trabajar y luego nos encargamos de crear la cookie. Usamos el sistema de Response, pero en esta ocasión nos basamos en una redirección. Esto es así porque realmente cuando recibimos la personalización no queremos mostrar ningún mensaje en concreto, solo querremos devolver al usuario a la página anterior y en esa página se podrá apreciar la nueva fuente configurada para el sitio. El código es un poco más complicado que el del método anterior, pero seguramente lo podrás entender.

public function guardarpersonalizacion(Request $request){
	$this->validate($request, [
		'fuente' => 'required'
	]);
	return redirect('/personalizacion')
		->withCookie(cookie('fuente', $request->input('fuente'), 60 * 24 * 365));
}

El sistema de validación en este caso solo comprueba el campo de formulario "fuente". Ese campo es requerido. Sobre este punto encuentras más explicaciones en el artículo de Validaciones en Laravel.

Nota: Hay que recordar que, según el código del controlador y gracias a la validación "required" del campo fuente, el código que hay a continuación de la llamada al método validate() solo se ejecutará cuando realmente se reciba la fuente a cambiar en el sistema de personalización.

Como habrás podido apreciar, se usa el helper redirect(), que explicaremos con detalle en un futuro artículo. Ese helper nos devuelve un objeto response especial llamado "Redirector", a partir del cual se crea la Cookie (pues las cookies solo se pueden crear cuando se devuelven datos al cliente en el response).

Al objeto Redirector le indicamos que se genere la cookie donde se almacena la fuente. Esa cookie tiene como nombre "fuente", como valor el dato recibido en el input y como duración 1 año expresado en minutos.

Nota: Sobre Response aprendimos en el artículo de Response HTTP en Laravel. Sobre las Cookies en el artículo anterior Cookies en Laravel.

Vistas de la aplicación

Para acabar nos faltaría mostrar el código de la vista que hemos creado para esta práctica. Es la parte más sencilla porque básicamente es código HTML. Es una vista de tipo Blade, por lo que tendrá extensión .blade.php (ya que hemos usado sintaxis blade para embutir datos que recibimos en la vista en el código HTML {{$variable}}). Vimos más sobre vistas en el artículo de introducción a las vistas en Laravel.

Esta vista es la del formulario:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Personalizacion</title>
	<style>
	body{
		font-size: {{$fuente}};
	}
	</style>
</head>
<body>
	<p>fuente: {{$fuente}}</p>
	<form action="/personalizacion" method="post">
		Fuente: 
		<select name="fuente">
			<option value="24pt">Grande</option>
			<option value="16pt">Mediana</option>
			<option value="12pt">Pequeña</option>
		</select>
		<br />
		<input type="submit" value="Enviar">
	</form>
</body>
</html>

Observa que en la declaración de estilos, etiqueta STYLE en el HEAD, usamos la variable de la fuente para personalizar el tamaño de letra del BODY. Luego hay un párrafo ya en el cuerpo de la página donde usamos esa misma variable que nos mandan a la vista {{$fuente}}. El resto es un formulario HTML de toda la vida.

Con eso es todo, si has seguido con atención el manual de Laravel, estamos convencidos que podrás reproducir este ejemplo y mejorarlo por tu cuenta con adicionales opciones de personalización de estilos en la página.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir