Gestire i form html

Laravel mette a disposizione dei metodi per creare in maniera semplificata i form.

Prima di esplorare questi metodi è necessario creare due rotte.
La prima redirige i visitatori alla view del form. La seconda riceve i dati inseriti dall’utente e si occupa della loro validazione.

Route::get( '/form', function()
	{
		return View::make( 'form' );
	} );

Route::post( 'dati-form', function()
	{
		//validazione
	} );

Creaiamo una nuova vista e la salviamo come view/form.php

form-laravel

Ora inseriamo nel file il codice

<!--app/views/form.blade.php-->
<!doctype html>
<html lang="it-IT">
 <head>
  <meta charset="UTF-8">
  <title>
   I Form di Laravel
  </title>
 </head>
 <body>
  {{ Form::open(array('url'=>'dati-form')) }}

  {{ Form::close() }}
 </body>
</html>

Il codice generato sarà

<!--app/views/form.php-->
<!doctype html>
<html lang="it-IT">
 <head>
  <meta charset="UTF-8">
  <title>
   I Form di Laravel
  </title>
 </head>
 <body>
  <form method="POST" action="http://dominio.it/dati-form" accept-charset="UTF-8">
      <input name="_token" type="hidden" value="uRrsMXZSXB9JeoyK3yjvT143lkR4QRTPCUdkcP5Y">
  </form>
 </body>
</html>

Quindi abbiamo utilizzato due metododi della calsse Form.

Il primo Form::open() accetta i parametri

  • url
    è la rotta di destinazione. Sarà inserita come attributo action del form.
  • method
    è il metodo utilizzato per inviare i dati. Di default è uguale a post. Può assumere anche i valori get, put, delete
  • accept-charset
    il valore predefinito è UTF-8.

Il secondo metodo Form::close() semplicemente inserisce il tag di chiusura </form>.

Il metodo Form::open() accetta anche un parametro files che imposta l’attributo enctype=”multipart/form-data necessario se dobbiamo effettuale l’upload di file.


 {{ Form::open( array('url' => 'dati-form', 'files' => true ) ) }}

 {{ Form::close() }}

Un’altra cosa che possiamo notare nell’html generato è la presenza di un input nascosto, questo vedremo più avanti come sarà utilizzato per evitare richieste non autorizzate.

Campi che possiamo inserire nel form

Input di testo

{{ Form::open(array('url'=>'dati-form')) }}

{{ Form::label('username','Username',array( 'id'=>'','class'=>'' )) }}
{{ Form::text('username','predefinito', array( 'id'=>'','class'=>'' )) }}

{{ Form::close() }}

Da notare nel metodo Form::text() che il primo parametro è l’attributo del tag name, il secondo è il testo di default. L’ultimo parametro è un array in cui indichiamo id o classi css.

 <body>
<label for="username" id="" class="">Inserisci Username</label>
<input id="" class="" name="username" type="text" value="Predefinito">

Password

{{ Form::open(array('url'=>'dati-form')) }}

{{ Form::label( 'password', 'Password', array('id'=>'','class'=>'')) }}
{{ Form::password( 'password', '', array('id'=>'','class'=>'')) }}

{{ Form::close() }}

Textarea

{{ Form::open(array('url'=>'dati-form')) }}

{{ Form::label( 'riassunto', 'Riassunto', array('id'=>'','class'=>'')) }}
{{ Form::textarea( 'riassunto', 'scrivi qui il riassunto', array('id'=>'','class'=>'')) }}

{{ Form::open(array('url'=>'dati-form')) }}

Email

{{ Form::open(array('url'=>'dati-form')) }}

{{ Form::label( 'email', 'Email',array('id'=>'','class'=>'')) }}
{{ Form::email( 'email', 'tuaemail@email.com',array('id'=>'','class'=>'')) }}

{{ Form::close() }}

Upload di file

{{ Form::open(array('url'=>'dati-form', 'files' => true )) }}

{{ Form::label( 'immagine', 'Carica immagine',array('id'=>'','class'=>'')) }}
{{ Form::file( 'image' ) }}

{{ Form::close() }}

Nota come il parametro ‘files’ deve essere impostato a true

Checkbox

{{ Form::open(array('url'=>'dati-form', 'files' => true )) }}

{{ Form::label( 'stato','Stato',array('id'=>'','class'=>'' )) }}
{{ Form::checkbox( 'stato','1',true ) }} Attivo 

{{ Form::close() }}

Campo numerico

{{ Form::open(array('url'=>'dati-form', 'files' => true )) }}

{{ Form::label( 'quantita', 'Quantità', array('id'=>'','class'=>'')) }}
{{ Form::number( 'numero', '1' ) }}

{{ Form::close() }}

Select Box

{{ Form::open(array('url'=>'dati-form', 'files' => true )) }}

{{ Form::label( 'nazionalita', 'Nazionalità', array('id'=>'','class'=>'')) }}
{{ Form::select( 'nazionalita', array( '0'=>'italiana','1'=>'francese', '2' => 'tedesca'), '2') }}

{{ Form::close() }}

Nazionalità tedesca predefinita

Campi nascosti

{{ Form::open(array('url'=>'dati-form', 'files' => true )) }}

{{ Form::hidden( 'codice_form', 'a123' ) }}

{{ Form::close() }}

Pulsanti


{{ Form::open(array('url'=>'dati-form')) }}

<!-- invia i dati -->
{{ Form::submit( 'Invia ') }}

<!-- ripristina i valori di default -->
{{ Form::reset('Reset') }}

<!-- crea l'elemento <button> -->
{{ Form::button( 'Pulsante',  array( 'class' => 'pulsante') ) }}

{{ Form::close() }}

Esempio di form funzionante

{{ Form::open(array('url'=>'dati-form')) }}

{{ Form::label('titolo','Titolo', array( 'id'=>'label-title' )) }}
{{ Form::text('titolo','Titolo articolo', array( 'id'=>'inp-title' )) }} <br />

{{ Form::label('testo','Testo', array( 'id'=>'label-testo' )) }} <br />
{{ Form::textarea('txtarea','Testo articolo', array( 'id'=>'txt-testo' )) }} <br />

{{ Form::label( 'categoria', 'Categoria', array('id'=>'label-cat')) }}
{{ Form::select( 'categoria', array( '0'=>'Sport','1'=>'Attualità', '2' => 'Politica') ) }}

{{ Form::submit( 'Invia ') }}

{{ Form::close() }}

Cliccando sul pulsante invia possiamo andare a vedere nella rotta ‘dati-form’ i valori inviati

Route::get( 'dati-form', function()
	{
		print_r( $_POST );
	} );

 

/*
Array
(
    [_token] => nFUkNJdkK1WNkRdxO6raoXkIkgET164zeStIdC31
    [titolo] => Titolo articolo
    [txtarea] => Testo articolo
    [categoria] => 0
)
*/

Un token come campo nascosto

Assieme ai campi da noi inseriti vediamo che è stato inviato un campo _token. Questo token viene generato automaticamete per ogni sessione utente e inviato ogni volta che utilizziamo Form::open() con il metodo post, put o delete.
Per i form creati nel modo classico, in html, possiamo creare questo campo nascosto utilizzato il metodo token().

 {{ Form::token() }}

Nel framework è definito un filtro (csrf) per verificare che il token inviato con il form sia identico a quello presente nella sessione utente.
Nel file app/filters.php troviamo

/*
|--------------------------------------------------------------------------
| CSRF Protection Filter
|--------------------------------------------------------------------------
|
| The CSRF filter is responsible for protecting your application against
| cross-site request forgery attacks. If this special token in a user
| session does not match the one given in this request, we'll bail.
|
*/

Route::filter('csrf', function()
{
	if (Session::token() != Input::get('_token'))
	{
		throw new Illuminate\Session\TokenMismatchException;
	}
});

Utilizziamo il filtro nella rotta dati-form in questo modo:

Route::post( 'dati-form', array( 'before' => 'csrf', function()
{
    //
}));

  inStileWeb.com
blog comments powered by Disqus