Desarrollo web Symfony2 parte 5

De WikiSalud
Saltar a: navegación, buscar

Véase Desarrollo_web_Symfony2_parte_4

Contenido

Editando formularios

Para editar los formularios que se construyeron con el CRUD, se debe realizar en las clases que se encuentran en el directorio Form.

Symfony2 posee un gran grupo de tipos de campo que cubre todos los campos de formulario comunes y tipos de datos necesarios estos se pueden encontrar en su sitio oficial Tipos de datos y la explicación en español Tipos de datos en español.

Procedemos a editar el formulario de la entidad Evaluacion, esta edición se realizará en dos partes:

  1. Cambiando opciones predeterminadas por el CRUD.
  2. Agregando css al formulario

Cambiando opciones predeterminadas por el CRUD

Inicialmente el CRUD, dentro de la plantilla se ve algo similar a lo siguiente:

CRUD Inicial

Ahora procederemos a cambiar el label del formulario; a cambiar el mensaje de error cuando el objeto es invalido. Esto se realiza haciendo el siguiente cambio en el archivo EvaluacionType.php en el directorio Form. En el método buildForm se deben agregar los siguientes parámetros:

       $builder
            ->add('porcentaje','number',
                    array(  'invalid_message'=>'Debe ser un número',
                            'label'=>'Digite el porcentaje'))
            ->add('nota','number',
                    array(  'invalid_message'=>'Debe ser un número',
                            'label'=>'Digite la nota'))
        ;

La sintaxis general para agregar opciones al campo en el formulario es la siguiente:

$builder
  ->add('nombre_campo','tipo_campo',
         array(  'opcion_1'=>'valor',
                 'opcion_2'=>'Valor',
);

Luego de las modificaciones anteriores el formulario se verá así:

CRUD Editado

Al colocar un valor incorrecto se presentará algo similar a esto:

CRUD error de valor inválido

Aplicando css al formulario

Para aplicar las css al formulario, se debe crear un archivo denominado form.css en el directorio Resource/public/css/ con el siguiente contenido.

form {
   border: 10px solid rgb(235, 235, 235);	
   background:rgb(246, 246, 246) ;
}
form div { padding: 7px;}
form div label{display: block; float: left; width: 150px;color: blue}
select:focus, textarea:focus, input:focus{background-color: #FFFDD4;}
select:hover, textarea:hover, input:hover{background-color: lightcyan;}

Luego de crearlo, agregar las siguientes líneas al archivo new.html.twig de la entidad Evaluacion.

{# src/minsal/academicaAnBundle/Resource/views/Evaluacion/new.html.twig #}
{% extends 'minsalacademicaAnBundle::plantilla.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
	<link href="{{ asset('bundles/minsalacademicaan/css/form.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}

Luego de haber realizado estos cambios, guardar y recargar la pagina de creación de una evaluación. La página se verá como se muestra a continuación:

Formulario del CRUD con estilo

Si se desea que el botón tenga el estilo que viene incluido en el JQuery UI se debe crear un archivo denominado new.js en el directorio /Resource/public/js/Evaluacion/ con el siguiente contenido:

$(document).ready(function() { 
   $('button').button();
});

Con la segunda línea estamos indicando que todos los elementos button tienen que tener la propiedad button() de JQuery. Luego agregar las siguientes líneas al archivo new.html.twig:

{% block javascripts %}   
{{parent()}}
<script type="text/javascript" src="{{ asset('bundles/minsalacademicaan/js/Evaluacion/new.js') }}" ></script>
 
{% endblock %}

Ahora la plantilla se verá así:

Estilo botón con JQuery

Validaciones

La validación es una tarea muy común en aplicaciones web. Los datos que se introducen en formularios como los datos a insertar en la base de datos deben ser validados. Symfony2 viene con un componente Validator que facilita y transparenta esta tarea.

Desde la base de datos

Validar los datos desde la base de datos no es más que definir los checkconstrains, los datos no null, los datos únicos; por mencionar alguno. Para que cuando se manipule una tupla de la base de datos esta tengo datos válidos al momento de realizar la acción.

Desde aplicación con Doctrine

El objetivo de la validación es decir si o no los datos de un objeto son válidos. Para que esto funcione, debes configurar una lista de reglas que el objeto debe seguir para ser válido. Estas reglas se pueden especificar a través del formato seleccionado para la configuración del Bundle.

El validador está diseñado para validar objetos contra restricciones o constraints. A fin de validar un objeto, basta con asignar una o más restricciones a tu clase entidad y luego pasarla al servicio validador.

Una restricción simplemente es un objeto PHP que hace una declaración asertiva. En Symfony2, las restricciones son aserciones de que una condición es verdadera. Dado un valor, una restricción te dirá si o no el valor se adhiere a las reglas de tu restricción.

Restricciones compatibles

  • Restricciones básicas:se utilizan para afirmar cosas muy básicas sobre el valor de las propiedades o el valor de retorno de los métodos en tu objeto.
    • NotBlank
    • Blank
    • NotNull
    • Null
    • True
    • False
    • Type
  • Restricciones de cadena
    • Email
    • MinLength
    • MaxLength
    • Length
    • Url
    • Ip
  • Restricciones de número
    • Max
    • Min
    • Range
  • Restricciones de fecha
    • Date
    • DateTime
    • Time
Nota:Para más información de estas restricciones y sus propiedad visite Referencia de restricciones de validación. 
Y para los que les gusta en inglés Constraints

Originalmente los errores se muestran en inglés tal y como se muestra en la siguiente imagen:

Validaciones Inglés

Si se desea cambiar el idioma de los mensajes por defecto se debe de realizar el siguiente cambio en el parameters.yml.

locale: es

Y ahora los mensajes se verán así:

Validaciones Español

Para agregar una restricción dependerá del formato con el que se generó el bundle. En este caso el bundle a utilizar esta en formato annotation. Debe seguir el siguiente formato:

/**
 * @Assert\PROPIEDAD(OPCION1="VALOR", OPCION2="VALOR",....)
 */

También se debe agregar la siguiente librería a la clase entidad :

use Symfony\Component\Validator\Constraints as Assert;

A continuación se le agregará a la entidad Evaluacion que el porcentaje este entre 0 y 1; y que la nota entre 0 y 10. Para ello la entidad debe de quedar como se muestra a continuación:

     /**
     * @var float $porcentaje
     *
     * @ORM\Column(name="porcentaje", type="decimal", nullable=false)
     * @Assert\Range(
     *      min = "0",
     *      max = "1",
     *      minMessage = "El menor número a ingresar es 0",
     *      maxMessage = "El mayor número a ingresar es 1"
     * )
     * 
     */
    private $porcentaje;
 
    /**
     * @var float $nota
     *
     * @ORM\Column(name="nota", type="decimal", nullable=false)
     * @Assert\Range(
     *      min = "0",
     *      max = "10",
     *      minMessage = "El menor número a ingresar es 0",
     *      maxMessage = "El mayor número a ingresar es 10"
     * )
     */
    private $nota;

Guardar y probar ingresando valores fuera del rango especificado. Como se verá se desplegarán los mensajes que se han definido dentro del assert.

Error fuera del rango
.

Otro ejemplo se hará con las listas desplegables de los que son dependientes, ya que el valor de la asignatura debe de ser NOT NULL. Para este caso utilizaremos la idAsignaturaInscrita de la entidad Estudiante. Antes de agregar el asset la lista se construye así:

Sin not null

Agregarle el assert NotNull:

    /**
     * @var Asignatura
     *
     * @ORM\ManyToOne(targetEntity="Asignatura")
     * @ORM\JoinColumns({
     *   @ORM\JoinColumn(name="id_asignatura_inscrita", referencedColumnName="id")
     * })
     * @Assert\NotNull()
     */
    private $idAsignaturaInscrita;
Con not null

Desde lado cliente con Javascript

Para realizar las validaciones con JavaScript se utilizará la siguiente librería Bvalidator. Para descargarla podemos realizarlo del siguiente enlace Archivo:BValidator-0.71.tar.gz

Descomprimir el archivo en el directorio src/jQuery/jQueryBundle/Resources/public/. En el archivo plantilla.html.twig agregar las siguientes lineas en el bloque Javascript y en el bloque Estilos.

{% block stylesheets %}
       ....
        <link href="{{ asset('bundles/jquery/bValidator-0.71/themes/bvalidator.theme.red.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}
   {% block javascripts %}   
        ...
        <script type="text/javascript" src="{{ asset('bundles/jquery/bValidator-0.71/jquery.bvalidator.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/jquery/bValidator-0.71/bvalidator.lang.es.js')}}" ></script>
        {% endblock %}

Procedemos a modificar el archivo new.js que se encuentra en el directorio src/minsal/academicaAnBundle/Resources/public/js/Evaluacion, agregando las siguientes lineas dentro de este archivo.

    $('#minsal_academicaanbundle_evaluaciontype_porcentaje').
        attr('data-bvalidator', 'between[0:1],required');
 
    $('#minsal_academicaanbundle_evaluaciontype_nota').
        attr('data-bvalidator', 'between[0:10],required');
 
    //Opciones del validador
    var optionsRed = { 
        classNamePrefix: 'bvalidator_red_', 
        lang: 'es'
    };
 
    //Validar el formulario
    $('form').bValidator(optionsRed);

Al crear un nuevo registro para la entidad Evaluacion se han realizado las siguientes validaciones:

  • Campo porcentaje se encuentre entre los valores 0 y 1
  • Campo nota este entre los valores 0 y 10

Si al introducir valores que no se encuentren entre estos rangos deberá mostrar un mensaje similar a las siguientes imágenes:

Error campo porcentaje
Error campo nota

Creando una Clase Repositorio

Una clase repositorio para una determinada entidad nos ayuda a agregar métodos personalizados con tu lógica de consulta para dicha entidad.

Para ello, agregar el nombre de la clase del repositorio a la definición de la entidad. Abrir la entidad Evaluacion. En la parte donde se define una entidad con Doctrine se observa de la siguiente manera:

namespace minsal\academicaAnBundle\Entity;
 
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;
/**
 * minsal\academicaAnBundle\Entity\Evaluacion
 *
 * @ORM\Table(name="evaluacion")
 * @ORM\Entity
 */
class Evaluacion

Ahora en la línea donde se encuentra @ORM\Entity agregaremos a la linea la siguiente información:

 * @ORM\Entity(repositoryClass="minsal\academicaAnBundle\Repositorio\EvaluacionRepository")

Doctrine puede generar la clase repositorio a través de la aplicación console usando la sentencia para generar los métodos captadores y definidores de la entidad.Como usuario normal ejecutar:

php app/console doctrine:generate:entities minsalacademicaAnBundle

Aparecerá lo siguiente:

Error campo nota

Agregara un directorio denominado Repositorio con un archivo denominado EvaluacionRepository.php tal como se muestra en el siguiente árbol:

Árbol de directorio
Nota: Anotaciones de Doctrine, Twig y Formularios Symfony

Al Abrir las clase se puede observar que esta vacía lista para crear los métodos necesarios. Se procede a agregar un método para mostrar todas las evaluaciones mayores a 0.5; para ello agregar el siguiente método a la clase EvaluacionRepository:

 public function seleccionarPorcentajeMayores()
    {
        return $this->getEntityManager()
            ->createQuery('SELECT e 
                           FROM minsalacademicaAnBundle:Evaluacion e
                           WHERE e.porcentaje > 0.5
                           ORDER BY e.id ASC')
                ->getResult();
    }

Para llamar a este método abrir el controlador EvaluacionController y buscar el método indexAction(). y cambiar la siguiente línea:

  $entities = $em->getRepository('minsalacademicaAnBundle:Evaluacion')->findAll();

Por la siguiente:

  $entities = $em->getRepository('minsalacademicaAnBundle:Evaluacion')->seleccionarPorcentajeMayores();

Al dar clic desde el menú a evaluación se deberá cargar algo similar a lo siguiente:

Listar de la entidad Evaluacion

Ahora se procederá a agregarle al formulario de Asignatura esta misma condición. Para ello abrir el archivo AsignaturaType.php que se encuentra en el directorio src/minsal/academicaAnBundle/Form/. Agregar la siguiente línea junto a los otros use:

use Doctrine\ORM\EntityRepository;

Cambiar la siguiente línea:

  ->add('idEvaluacionRealizada')

Por:

->add('idEvaluacionRealizada', 'entity', array('empty_value' => 'Seleccione la evaluacion',
                    'class' => 'minsalacademicaAnBundle:Evaluacion',
                    'query_builder' => function(EntityRepository $er) {
                    return $er->createQueryBuilder('e')
                              ->where('e.porcentaje > 0.5')
                              ->orderBy('e.id', 'ASC');
     },
))

Y al cargar el formulario de captura deberán aparecer solo las evaluaciones que cumplan con la condición.

Formulario Asignatura
Herramientas personales
Espacios de nombres

Variantes
Acciones
Navegación
Herramientas