Comunidad de diseño web y desarrollo en internet online

Módulo de Usuarios (III): Crear un formulario con Laravel

En esta tercera parte hablaremos sobre algo que, estoy seguro, le ha sacado canas a más de un desarrollador, cómo realizar formularios dinámicos con Laravel.

Si has llegado acá por primera vez: esta es una serie de tutoriales para escribir un módulo de usuarios básico con Laravel. Asegúrate de revisar la primera y segunda parte.

Si eres asiduo a estos tutoriales: Bienvenido de vuelta.

Escribir un formulario con HTML es muy simple:

Código :

<form role="form">
  <div class="form-group">
    <label for="email">Dirección de E-mail</label>
    <input type="email" class="form-control" id="email" placeholder="Introduce tu E-mail">
  </div>
  <div class="form-group">
    <label for="role">Tipo de Usuario</label>
    <select name="role" id="role" class="form-control">
      <option>Usuario</option>
      <option>Admin</option>
    </select>
  </div>
  <!-- Mas campos aqui… -->
</form>


Pero a medida que necesitamos hacerlo dinámico, debemos tener en cuenta los siguientes detalles, por ejemplo:

  • Si estamos editando un usuario existente, deberíamos mostrar el email actual.
  • Si el usuario envía el formulario pero ocurre un error, deberíamos mostrar el campo tal como él lo había llenado y no el valor anterior.
  • Además, qué sucedería si el select de roles tiene valores dinámicos en vez de dos opciones fíjas.
  • Cómo hacer para que en el select de roles quede una de las opciones (option) marcada como seleccionada (selected).


Hacer manualmente todo eso convertiría nuestro simple formulario en una montaña de IFs y código PHP casi imposible de leer y mantener. Les presentaré cómo quedará el formulario para nuestro módulo de usuarios ya listo con Laravel, y luego explicaré el código con calma, aquí vamos:

Creen un archivo llamado form.blade.php en la carpeta app/views/admin/users y copien/peguen el siguiente contenido:

app/views/admin/users/form.blade.php

Código :

@extends ('admin/layout')

@section ('title') Crear Usuarios @stop

@section ('content')

<h1>Crear Usuarios</h1>

{{ Form::open(array('route' => 'admin.users.store', 'method' => 'POST'), array('role' => 'form')) }}

  <div class="row">
    <div class="form-group col-md-4">
      {{ Form::label('email', 'Dirección de E-mail') }}
      {{ Form::text('email', null, array('placeholder' => 'Introduce tu E-mail', 'class' => 'form-control')) }}
    </div>
    <div class="form-group col-md-4">
      {{ Form::label('full_name', 'Nombre completo') }}
      {{ Form::text('full_name', null, array('placeholder' => 'Introduce tu nombre y apellido', 'class' => 'form-control')) }}        
    </div>
  </div>
  <div class="row">
    <div class="form-group col-md-4">
      {{ Form::label('password', 'Contraseña') }}
      {{ Form::password('password', array('class' => 'form-control')) }}
    </div>
    <div class="form-group col-md-4">
      {{ Form::label('password_confirmation', 'Confirmar contraseña') }}
      {{ Form::password('password_confirmation', array('class' => 'form-control')) }}
    </div>
  </div>
  {{ Form::button('Crear usuario', array('type' => 'submit', 'class' => 'btn btn-primary')) }}    
  
{{ Form::close() }}

@stop


Además de escribir el formulario, hay que enlazarlo desde nuestro controlador a la vista, intenten hacerlo uds. mismos, abajo les dejaré el código de cualquier forma:

Código :

   public function create()
   {
      return View::make('admin/users/form');
   }


Ya con esto podemos ver el formulario en nuestro navegador si tipeamos /admin/users/create, en mi caso:

Código :

http://localhost/pruebalaravel/public/admin/users/create


Debería verse así:


El formulario paso a paso


El código es muy sencillo, vamos a detallarlo por pasos:

La parte externa que define cuál es el template padre (en este caso admin/layout) y también define el título y el contenido es idéntica a la plantilla anterior list.blade.php

Código :

@extends ('admin/layout')

@section ('title') Crear Usuarios @stop

@section ('content')

   <!-- Formulario aquí -->

@stop


La parte nueva, en la que vamos a enfocarnos, es la descripción del formulario dentro de la sección “content”.

Acá simplemente estamos usando helpers nuevos de Laravel, como hicimos en el capítulo anterior, pero esta vez para escribir formularios.

Código :

{{ Form::open(array('route' => 'admin.users.store', 'method' => 'POST'), array('role' => 'form')) }}
      <!-- Formulario aqui -->
  {{ Form::close() }}


Estos dos helpers (Form::open y Form::close) se encargan de abrir y cerrar las etiquetas HTML del formulario, respectivamente, pero no sólo eso:

Form::open:

  • Genera URLs a través de la clase de Rutas de Laravel.
  • Permite emular los métodos PUT y DELETE (dado que los navegadores sólo soportan GET y POST).
  • Genera un token para protección anti ataques CSRF, lo cual está habilitado en Laravel 4 automáticamente. Más sobre ataques CSRF.
  • Entre otros.


Form::close:

  • Es necesario cuando en vez de Form::open usamos Form::model otro helper que veremos dentro de poco.
  • Mantiene concordancia con Form::open (nuestro IDE probablemente protestaría si usamos </form> sin antes haber usado explícitamente <form*>.


El primer parámetro de Form::open permite definir un array con ciertas características propias y dinámicas del form como la ruta a donde va dirigido y el método, el segundo parámetro es un array de atributos HTML. Pueden ver más ejemplos de Form::open en la documentación oficial

Noten, sobretodo, en el array del primer atributo esto:

Código :

'route' => 'admin.users.store'


Esto es lo que le dice a Laravel que apunte nuestro form a la acción “store” de nuestro recurso admin.users.

Noten que el / de admin/users definido en app/routes.php necesitamos reemplazarlo por un punto cuando usemos las funciones de rutas de Laravel como route() enlazadas a un "Resource Controller".


Recuerden ver el HTML resultante haciendo control+U en Chrome, para ver el código fuente:

Código :

<form method="POST" action="http://localhost/pruebalaravel/public/admin/users" accept-charset="UTF-8">
  <input name="_token" type="hidden" value="CrBlGF5WEwXNRreWfQ7m4JDoxbSx0ucCg8fwiBPG">


Eso es lo que genera Laravel por nosotros en este caso, no sólo la etiqueta form sino un campo oculto para generar el token como expliqué más arriba y la URL correcta en el atributo action del form.

Definiendo los campos del formulario


Más abajo empezamos a definir los campos:

Código :

      {{ Form::label('email', 'Dirección de E-mail') }}
      {{ Form::text('email', null, array('placeholder' => 'Introduce tu E-mail', 'class' => 'form-control')) }}


Form::label

Permite definir una etiqueta <label> obviamente, el primer parámetro es el ID del campo, el segundo es el texto que se mostrará al usuario.

Form::text

Nos permite definir un campo de tipo “text”, el primer parámetro es el atributo “name” muy importante, el segundo es el valor que tendrá el campo, en este caso nada por ahora (null), el tercer parámetro es un array para definir atributos HTML para el campo, en este caso le puse un lindo placeholder y además la clase “form-control” que pide Bootstrap para que el campo se vea bien…

Usados en conjunto label y un campo permite que el label tenga su atributo for y el campo tenga el atributo id ambos con el mismo nombre, en este caso “email” de manera que, si tu navegador no es Internet Explorer 6 X_X, cuando hagas clic en el label “Dirección de E-mail” el navegador automáticamente coloque tu cursor dentro del campo email (Bootstrap sombrea en azul el campo activo)


Bien, veamos el HTML generado para nuestros dos primeros campos:

Código :

  <label for="email">Direcci&oacute;n de E-mail</label>
  <input placeholder="Introduce tu E-mail" class="form-control" name="email" type="text" id="email"> 


Fíjense que además Laravel cambió mi caracter especial “ó” por su correspondiente HTML automáticamente, sweet….

Ahora pueden revisar el resto del HTML, es básicamente lo mismo una y otra vez, abajo los 2 campos de password usan el helper Form::password en vez de Form::text dado que necesitamos, obviamente, generar campos de tipo password.

Laravel también soporta campos de tipo textarea, hidden, etc. cada uno tiene su helper (Form::textarea, Form::hidden) revisen la documentación oficial para más información.

Por último, para finalizar esta parte, es hora de hacer click en el botón “Crear usuario”, aunque, como programadores curiosos que son, estoy seguro que muchos ya lo hicieron…

Ahora lo que sucede cuando cliquean ese botón es sorprendente. Si cliquean el botón verán en el navegador… NADA! xD xD xD Es cierto, lo que sucede es que el método que Laravel invoca:

Código :

   public function store()
   {
      //
   }


No regresa nada, :( Solucionemos eso:

Código :

   public function store()
   {
      return Input::all();
   }


Ahora cuando presionemos el botón “Crear usuario” recibiremos de vuelta todos los datos de nuestro formulario en una cadena de texto en formato JSON:

Código :

{"_token" : "CrBlGF5WEwXNRreWfQ7m4JDoxbSx0ucCg8fwiBPG" , "email" : "silence[at]dessigual.com" , "full_name" : "Duilio Palacios" , "password" : "1234" , "password_confirmation" : "1234"}


Fíjense que tanto la URL de inicio que invoca al método index: admin/users como ésta que invoca al método store son las mismas! Lo que cambia es el “verbo” o método que se está usando:

Código :

GET admin/users -> llama a index()
POST admin/users ->  llama a store()


Como pueden darse cuenta, cada vez está tomando más forma nuestro módulo, en el próximo capítulo avanzaremos un poco más y aprenderemos cómo validar los datos enviados por el usuario.

Preguntas y dudas en los comentarios.

Stay tuned.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate