Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/view»

De WikiEducator
Saltar a: navegación, buscar
Línea 42: Línea 42:
 
#localhost:8000/contact
 
#localhost:8000/contact
 
#localhost:8000/about
 
#localhost:8000/about
 +
===Diseño de plantillas===
 +
http://laravel.com/docs/4.2/templates
 
*Vamos a usar las plantillas para crear cada uno de las páginas
 
*Vamos a usar las plantillas para crear cada uno de las páginas
 
*Laravel usa Blade como gestor de plantillas, un sencillo sistema que permite implementar la filosofía de MVC en laravel como podremos comprobar en breve.
 
*Laravel usa Blade como gestor de plantillas, un sencillo sistema que permite implementar la filosofía de MVC en laravel como podremos comprobar en breve.
 
*Los ficheros que son plantillas en larevel tienen los siguientes requisitos
 
*Los ficheros que son plantillas en larevel tienen los siguientes requisitos
# terminan por la extensión '''''*.blade.php''''
+
# terminan por la extensión '''''blade.php'''' (nombre.blade.php)
#Están ubicados en '''''.app/views'''''
+
#Están ubicados en '''''app/views'''''
 +
;Características de las plantillas.
 +
*Como ya sabemos las plantillas son ficheros que contienen código html
 +
*Ademas añadirá unas directivas especiales que nos permitiran poder incorporar información que venga de otro origen (de un controlador por ejemplo), o usar estructuras de control para evaluar determinadas situaciones.
 +
*Iremos viéndolo según vallamos avanzando.
 
*Vamos a crear una plantilla que llameremos layout. Para ello creamos en '''''app/view''''' el fichero '''''layout.blade.php''''' con el siguiente contenido
 
*Vamos a crear una plantilla que llameremos layout. Para ello creamos en '''''app/view''''' el fichero '''''layout.blade.php''''' con el siguiente contenido
 
<source lang=html5>
 
<source lang=html5>
Línea 122: Línea 128:
 
@stop
 
@stop
 
</source>
 
</source>
 +
==Construyendo formularios==
 +
*Primero de todo es crear el formulario. En Laravel
 +
<source lang=php>
 +
{{ Form::open(array('url' => 'foo/bar')) }}
 +
    //
 +
{{ Form::close() }}
 +
</source>
 +
*A la hora de añadir elementos como hemos visto antes, el nombre especificado será el usado para poder recuperar información en un momento dado.
 +
;label
 +
Form::label('email', 'E-Mail Address');
 +
;text
 +
En este caso con un valor por defecto
 +
echo Form::text('email', 'example@gmail.com');
 +
;Password
 +
Form::password('password');
 +
;Número
 +
Form::number('name', 'value');
 +
;select
 +
Form::select('size', array('L' => 'Large', 'S' => 'Small'));
 +
Con rango de valores
 +
Form::selectRange('number', 10, 20);
 +
 +
;checkbox
 +
echo Form::checkbox('name', 'value');
 +
;radio
 +
echo Form::radio('name', 'value');
 +
;
 +
 +
 +
 +
 +
 +
 +
 
===Añadiendo validaciones al formulario===
 
===Añadiendo validaciones al formulario===
 
<source lang=php>
 
<source lang=php>

Revisión de 10:33 2 feb 2015

Road Works.svg Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas.
Road Works.svg




Modificando la página por defecto

  • Hemos visto como modificar el contenido de la inforamción que aparece por defecto en la página inicial
  • Si abrimos el fichero app/routes.php vemos
Route::get('/', function()
{
return View::make('hello');
});

Lo podemos modificar por lo que queremos que aparezca

Route::get('/', function()
{
return 'Esta va a ser mi primera aplicación con Laravel!';
});
  • A continuación vamos a crear otras páginas como el el ejemplo siguiente
  1. Home page
  2. About page
  3. Contact page
  • Típicas páginas que podemos encontrar en cualquier sitio web
  • Lo primero que haremos será modificar nuestro fichero de route.php
Route::get('/', function(){
return 'Bievenido a mi sitio web Página princial!';
});
 
Route::get('/about', function(){
return 'Este es el contenido de la página about';
});
 
Route::get('/contact', function(){
return 'Este es el contenido de la página contectos';
});
  • Vemos como efectivamente si accedemos a cada una de las páginas vemos cada uno de los sitios
  1. localhost:8000/
  2. localhost:8000/contact
  3. localhost:8000/about

Diseño de plantillas

http://laravel.com/docs/4.2/templates

  • Vamos a usar las plantillas para crear cada uno de las páginas
  • Laravel usa Blade como gestor de plantillas, un sencillo sistema que permite implementar la filosofía de MVC en laravel como podremos comprobar en breve.
  • Los ficheros que son plantillas en larevel tienen los siguientes requisitos
  1. terminan por la extensión blade.php' (nombre.blade.php)
  2. Están ubicados en app/views
Características de las plantillas.
  • Como ya sabemos las plantillas son ficheros que contienen código html
  • Ademas añadirá unas directivas especiales que nos permitiran poder incorporar información que venga de otro origen (de un controlador por ejemplo), o usar estructuras de control para evaluar determinadas situaciones.
  • Iremos viéndolo según vallamos avanzando.
  • Vamos a crear una plantilla que llameremos layout. Para ello creamos en app/view el fichero layout.blade.php con el siguiente contenido
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Creando mi primer sitio laravel </title>
 </head>
 <body>
  <ul>
    <li><a href="./">Página princial</a></li>
    <li><a href="./about">Acerca del sition</a></li>
    <li><a href="./contact">Copntacta con nosotros</a></li>
  </ul>
 </body>
</html>

Esta sería una página general. supongamos que qeremos que nos aparezca esta información en todas las páginas, pero en cada una de ella queremos añadir más cosas. Para ello suarmeos una etiqueta de blade llamada yield. Las directivas o etiquetas en laravel se añaden usando la arroba @, por lo que añadimos el siguiente campo justo al final del fichero

.....
    <li><a href="./contact">Copntacta con nosotros</a></li>
  </ul>
   @yield('contenido')
 </body>
</html>
  • Le estamos especificando a laravel que justo ahí añada un contenido, que según la página que hayamos seleccionado será uno u otro.
  • Vamos a hacerlo para cada una de las páginas. Por lo tanto tendremos que crear tres plantillas. Recordamos que se hace en le directorio app/view, y que tienes que tener la extensión .blade.php

Creando contenido para plantillas =

home.blade.php

Creamos el contenido de la página principal

 @extends('layout')
 @section('contenido')
    <h1>Bienvenido!</h1>
     <p>Esta es la página princial de este sition. Ahora poco contenido, pero ya crecerá :).</p>
 
 @stop
  • Vemos que hemos usado tres directivas que comentamos
@extends
  • Especifiamos el nombre del layout o plantilla al que va a completar esta plantilla. Es decir esta plantilla va a ser incluida en la plantilla layout, el la cual debe de haber un contenido.
  • El nombre que aquí incluyamos debe coincidir con algúna plantilla creada
@section
  • Aquí especificamos el nombre especificado en la plantilla principal en donde queremos que aparezca el contenido de esta plantilla actual. Es decir el nombre que en la plantilla princial aparece el la directiva @yield
  • Todo el código que aparezca entre @seciont y @stop, será incorporado en la plantilla principal, donde aparezca @yield(contenido)
@stop
  • Teminamos de escribir el fichero y lo probamos
  • De la misma manera creamos la plantilla about.blade.php
@extends('layout')
@section('contenido')
<h1>Acerca de nosotros</h1>
<p>Esta página que no contiene información es para aprender a crear un proyecto básico en larevel.</p>
@stop
  • Ahora vamos a crear una plantilla mas interesante, una página de contactos, vamos a ver lo tremendamente sencillo que es con laravel
@extends('layout')
@section('content')
<h1>Contacte con nosotros.</h1>
<p>Por favor contacte con nosotros usando la siguiente página de contactos:</p>
{{ Form::open(array('url' => 'contact')) }}
{{ Form::label('Motivo') }}
{{ Form::text('subject','Inserte aquí el subject del mensaje') }}
<br />
{{ Form::label('Mensaje') }}
{{ Form::textarea('message','Enter your message') }}
<br />
{{ Form::submit() }}
{{ Form::close() }}
@stop

Construyendo formularios

  • Primero de todo es crear el formulario. En Laravel
{{ Form::open(array('url' => 'foo/bar')) }}
    //
{{ Form::close() }}
  • A la hora de añadir elementos como hemos visto antes, el nombre especificado será el usado para poder recuperar información en un momento dado.
label
Form::label('email', 'E-Mail Address');
text

En este caso con un valor por defecto

echo Form::text('email', 'example@gmail.com');
Password
Form::password('password');
Número
Form::number('name', 'value');
select
Form::select('size', array('L' => 'Large', 'S' => 'Small'));

Con rango de valores

Form::selectRange('number', 10, 20);
checkbox

echo Form::checkbox('name', 'value');

radio

echo Form::radio('name', 'value');




Añadiendo validaciones al formulario

Route::post('contact', function()
{
$data = Input::all();
$rules = array(
'subject' => 'required',
'message' => 'required'
);
$validator = Validator::make($data, $rules);
 
if($validator->fails()) {
return Redirect::to('contact')->withErrors($validator)->withInput();
}
 
return 'Your message has been sent';
 
});
*Vamos a ver cada una de las partes
*Lo primero que hacemos es leer el contenido de los campos del formulario en la variable array asociativo $data
<source lang=php>
Route::post('contact', function()
{
$data = Input::all();
  • A continuación aplicamos reglas para validar los campos, en este caso le decimos que los campos son obligatorios. Estas reglas las guardamos de nuevo en un array asociativo que creamos llamados $rules
$rules = array(
'subject' => 'required',
'message' => 'required'
);
  • Y ahora solo queda llamar a la funcion de validar y le pasamos los datos que queremos que valide y las reglas que queremos que aplique
$validator = Validator::make($data, $rules);
  • Esta funcion nos devuelve un booleano que solo nos queda de valorar

if($validator->fails()) { return Redirect::to('contact')->withErrors($validator)->withInput(); }