Desarrollo web Symfony2 parte 4

De WikiSalud
Saltar a: navegación, buscar

Véase Desarrollo_web_Symfony2_parte_3

Contenido

Generadores Interactivos: Intefaces CRUD

Los CRUD (Create Retrieve Update Delete) generan un controlador básico para una determinada entidad ubicada en un determinado paquete. Este controlador permite realizar cinco operaciones básicas:

  • Listar todos los registros.
  • Mostrar un determinado registro identificado por su clave primaria.
  • Crear un nuevo registro.
  • Editar un registro existente.
  • Eliminar un registro existente.

Generar un CRUD

Las formas de generar un CRUD desde la herramienta console son las siguientes:

  1. Modo interactivo.
  2. Modo no interactivo.

Modo interactivo con console

Para generar un CRUD de modo interactivo, abrir una consola como usuario normal dirigirse al directorio del proyecto y ejecutar:

    php app/console generate:doctrine:crud
  • Al presionar Enter, carga el generador de CRUD, el asistente pregunta por la entidad a la que se le generará el CRUD.
Generar CRUD

Digitar el nombre de la entidad a la que se le generará el CRUD; este ejemplo se realizará con la entidad Evaluacion. El nombre de la entidad debe tener el siguiente formato minsalacademicaAnBundle:Evaluacion . Luego de escribir el nombre presionar Enter.

minsalacademicaAnBundle:Evaluacion
  • De manera predeterminada, el generador crea listar y mostrar por ID. Pero si se desea generar las opciones de insertar, actualizar y eliminar se deben seleccionar las opciones de escritura. Digitar yes y presionar Enter.
Activar opciones de escritura
  • Ahora se debe de seleccionar el formato de los archivos de configuración que se desea utilizar. Para mantener la consistencia con el trabajo que se ha estado realizando en este proyecto de ejemplo seleccionar annotation , dado que es la opción predeterminada, presionar Enter.
Nota: El formato del CRUD debe ser el mismo que el formato seleccionado para el paquete. Si se seleccionó yml para el paquete, entonces, para la generación del 
CRUD se debe seleccionar yml también.
Formatos de archivos de configuración
  • El siguiente parámetro a configurar es el prefijo que aparecerá en la URL lo cual permite acceder a las acciones de esta entidad. De manera predeterminada, el generador coloca el nombre de la tabla; pero el desarrollador esta en la libertad de cambiarlo si así lo desea. Para este caso, utilizar el predeterminado y presionar Enter.
Prefijo de la ruta para entidad
  • Se presentará el resumen de la generación del CRUD. Si se esta de acuerdo con la información presionar Enter, si se observa un error digitar no y presionar Enter para iniciar nuevamente con la generación del CRUD.
Confirmación de la generación
  • En la consola aparecerá la confirmación del CRUD o algún error que pueda surgir en la creación.
Confirmación de la generación
  • Para asegurarse que el paquete ha sido creado correctamente y sus acciones están funcionando correctamente colocar en la URL http://symfony.localhost/app_dev.php/evaluacion/ Deberá aparecer algo similar a la imagen que se presenta a continuación.
Verificación de la creación del CRUD
  • Si se observa en NetBeans se puede notar que se agregaron varios archivos, los cuales se describen a continuación.
    • Controler/EvaluacionController.php: este es el controlador que manejará todas las acciones relacionadas al CRUD creado.
    • Form/EvaluacionType.php: este archivo contiene una clase que contiene la información relacionada al formulario.
    • views/Evaluacion/: en esta carpeta estarán todas las vistas que los controladores llaman para mostrar al usuario. Estas vistas son: edit, index, new, show; todos con extensión .html.twig

Modo no interactivo con console

El modo no interactivo de generación del CRUD se realiza introduciendo la línea de código completa. Se debe de tener en cuenta las opciones que se desean utilizar, las cuales puede ser:

  • --entity: define el paquete junto con la entidad para la cual se generará el CRUD con el formato NamespaceBundle:NombreEntidad.
  • --route-prefix: establece el prefijo que se utilizará para cada ruta que identifica cualquier acción de la entidad.
  • --with-write: el valor por defecto es no. Por tanto se debe especificar este parámetro para generar las acciones de insertar, editar y eliminar.
  • --format: Symfony indica que el formato que utilizará es annotation; los posibles valores para el formato son: yml, xml, php o annotation. Se debe de tener cuidado que el formato que se utilice sea el mismo que el del paquete sino no funcionará.

Para crear el CRUD se debe de escribir en consola como usuario normal:

php app/console generate:doctrine:crud --entity=minsalacademicaAnBundle:Asignatura --format=annotation --with-write --no-interaction

Luego de escribir la sentencia presionar Enter y aparecerá la información que se ha creado correctamente. Si ocurre algún error de igual manera se verá cual es el error para poder corregirlo.

Distribución de minsal/academicaAnBundle

Probar la URL http://symfony.localhost/app_dev.php/asignatura/ para asegurarse que se ha creado el CRUD correctamente, y aparecerá algo similar a esto:

Distribución de minsal/academicaAnBundle

Método __toString para entidades padres

Este método permite a una clase decidir cómo comportarse cuando se le trata como un string. Este devuelve un string, si no se emitirá un nivel de error fatal E_RECOVERABLE_ERROR.

  • Entidad Evaluacion
public function __toString() {
  return $this->porcentaje;
}
  • Entidad Asignatura
public function __toString() {
   return $this->nombre;
}

Si no se ha definido este método generará el siguiente error:

Error falta de método __toString()

Cuando ya se haya definido dicho método, en la entidad Asignatura; todas las evaluaciones registradas aparecerán en una lista desplegable tal y como se muestra en la siguiente imagen:

Aplicación método __toString()

Acceso a datos con Doctrine

Para obtener datos de las tablas existen varios métodos realmente sencillos:

  • findAll(): obtiene todos los registros de la tabla retornando un array de objetos.
  • find(): obtiene un registro a partir de la clave primaria de la tabla. Recibe como parámetro el valor a buscar. Retorna el objeto con ese id.
  • findBy(): obtiene los registros encontrados pudiendo pasar como argumentos los valores que irían dentro de la clausula WHERE. Retorna un array de objetos.
  • findOneBy(): obtiene un registro pudiendo pasar como argumentos los valores que irían dentro de la clausula WHERE. Retorna el objete que cumple con la clausula WHERE.
  • Ejemplos:
//-- Crear el objeto EntityManager de Doctrine
$em = $this->getDoctrine()->getEntityManager();
 
//-- Obtener todas las tuplas de la tabla estudiante
$estudiantes = $em->getRepository('minsalacademicaAnBundle:Estudiante')->findAll();
 
//-- Obtener el estudiante con id igual a 1
$estudiante = $em->getRepository('minsalacademicaAnBundle:Estudiante')->find(1);
 
//-- Obtener el estudiante con carnet 'PA06010'
$estudiante = $em->getRepository('minsalacademicaAnBundle:Estudiante')->findOneBy(array('carnet' => 'PA06010'));
 
//-- Obtener todos los estudiantes inscritos en la asignatura con ID 1
$estudiantes = $em->getRepository('minsalacademicaAnBundle:Estudiante')->findBy(
               array(
                    'idAsignaturaInscrita' => 1
                )
        );
Nota: Para más información sobre Doctrine2 pueden visitar Anexo Doctrine

Aplicar estilos al CRUD

Para aplicar CSS al proyecto que se esta construyendo, se trabajará con el patrón de diseño Decorator. Este patrón, básicamente consiste en crear una plantilla base inicial y heredar esta plantilla en cada página a utilizar y solo diseñar el contenido de cada vista a mostrar. La diagrama siguiente ilustra este patrón.

Patrón Decorador

Se tomará de ejemplo el CRUD de la entidad Estudiante. Inicialmente cuando se prueba en el navegador http://symfony.localhost/app_dev.php/estudiante/ se muestra lo siguiente:

CRUD original Estudiante

A nivel de código, la vista contiene lo siguiente:

Plantilla index.html.twig de Estudiante

Construir la plantilla

Para aplicar el patrón decorador, lo primero que se debe realizar es la plantilla que será heredada por las demás vistas. Esta vista se creará en la raíz del view. y contendrá el siguiente código:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>{% block titulo %}Sistema Académico para las capacitaciones de la DTIC{% endblock %}</title>
 
        {% block stylesheets %}
        <link href="{{ asset('bundles/minsalacademicaan/css/estilos.css') }}" type="text/css" rel="stylesheet" />
        <link href="{{ asset('bundles/minsalacademicaan/imagenes/dtic-icono.png') }}" type="image/png" rel="Shortcut Icon" />
 
        {% endblock %}
 
        {% block javascripts %}            
           <!-- <script type="text/javascript" src="{# asset('bundles/minsalsidpla/js/jquery-1.6.2.min.js') #}" ></script>-->
        {% endblock %}
 
    </head>
    <body>   
        <div id="divpagina">
            <div id="divcuerpo">
                <div id="divbanner">
                <img src="{{ asset('bundles/minsalacademicaan/imagenes/encabezado.png') }}" alt="" />
                </div>
                    <br/><br/>
            {% block body %}  
            {% endblock %}
                <div id="divpie">Copyright (C) 2013 Ministerio de Salud, Capacitaciones DTIC</div>
            </div>
        </div>
    </body>
</html>

Como se muestra en el código anterior se puede observar que es una página html común y corriente pero no es así, contiene etiquetas twig que son importantes para la construcción de la plantilla. A continuación se presentan dichas etiquetas y su significado:

  • {% block titulo %}NOMBRE DEL TÍTULO{% endblock %}: Estas etiquetas nos indican que en cada nueva vista podremos reemplazar el título de la ventana según como el desarrollador lo indique. Si no se declara ninguna etiqueta título en otra vista toma de forma predeterminada la de la plantilla.
  • {% block stylesheets %} {% endblock %}: estas etiquetas delimitan los bloques de estilos que se utilizarán en el desarrollo de la aplicación.
  • asset('RUTA_CSS,JS,IMAGENES'):esta etiqueta se utiliza para hacer referencia a las css, javascript, imágenes que se utilizarán para el desarrollo de la aplicación.
  • {% block javascripts %} {% endblock %}: delimita el bloque de archivos javascript para la aplicación.
  • {% block body %} {% endblock %}: estas etiquetas delimitarán el cuerpo de la plantilla es decir el template del dibujo anterior. En el caso de la plantilla irá vacío para indicar en donde es que se agregará el cuerpo de las demás vistas a utilizar.

Agregar las CSS, imágenes y js

Ahora se procede a agregar los archivos CSS, js y las imágenes que se utilizarán para la aplicación. Estos tres elementos antes mencionados deben de estar dentro de una carpeta denominada public dentro del directorio Resource del paquete; tal como se muestra a continuación:

Directorio public

En el siguiente enlace media:Public.tar.gz se pueden descargar los archivos CSS, imágenes y js que se utilizarán en este ejemplo. Copiar el contenido del archivo en el directorio public creado anteriormente.

Luego será necesario instalar todo el contenido de la carpeta public en la carpeta WEB que es lo que permite que esta información se muestre, para ello como usuario normal ejecutar:

php app/console assets:install web --symlink

La instrucción anterior recorre todos los bundles que se tengan del proyecto y copia todos los archivos de imágenes y hojas de estilos que encuentra en la carpeta public creadas. Esto nos facilita la tarea de copiar manualmente estos archivos cada vez que un bundle lo requiera.

El directorio web queda como se muestra a continuación:

directorio web

Los nuevos directorios tiene la siguiente estructura bundles/nombrebundle/contenedora donde contenedora indica css, imágenes, js, etc. Esta es la ruta que se deben poner dentro del asset para hacer referencia a las css e imágenes. A continuación se muestra el ejemplo de asset utilizado para este ejemplo:

<link href="{{ asset('bundles/minsalacademicaan/css/estilos.css') }}" type="text/css" rel="stylesheet" />

Para que el uso de las plantillas surta efecto se debe limpiar la cache de Symfony para ello ejecutar como usuario normal:

php app/console cache:clear

Heredar la plantilla a las otras vistas

Para realizar la herencia de plantillas, se tomará la vista index.html.twig de la entidad Estudiante. Abrir esa plantilla y pegar el siguiente código al inicio del archivo:

{# src/minsal/academicaAnBundle/Resource/views/Estudiante/index.html.twig #}
{% extends 'minsalacademicaAnBundle::plantilla.html.twig' %}
 
{% block titulo %}CRUD de Estudiante{% endblock %}
 
{% block body %}

Y el siguiente al final del archivo

{% endblock %}

Guardar el archivo, y recargar la URL http://symfony.localhost/app_dev.php/estudiante/ ahora se verá como se muestra a continuación:

Estudiante con estilo

Con la línea {% extends 'minsalacademicaAnBundle::plantilla.html.twig' %} se esta heredando la plantilla construida, así que se coloca la ruta en donde encontraremos dicha vista.

Hacer lo mismo con todas las vistas que se tengan en la aplicación para que todas tengan los estilos aplicados.

Editar alguna plantilla

Si se desea acceder a la información de la clase padre desde una hija estando en la vista, se deben realizar los siguientes pasos:

  • En la tabla hija acceder al atributo que llama a la clase padre; el nombre de este atributo es el que esta definido en la clase Entity de la clase hija. Se tomara de ejemplo Estudiante - Asignatura. Al observar la entidad Estudiante se tiene el atributo $idAsignaturaInscrita. Como se muestra en la siguiente figura.
Entidad Estudiante
  • Abrir la vista en donde se desea acceder a este atributo. En este caso será en la vista index.html.twig de la entidad Estudiante. Se agregará luego de la columna Apellidos una nueva columna denominada Asignatura y se debe mostrar el nombre de la asignatura inscrita por el Estudiante al momento de ser agregado. Para agregar el nombre de la asignatura se debe colocar el siguiente código luego de la línea {{ entity.apellidos }}:
<td>{{ entity.apellidos }}</td>
<td>{{ entity.idAsignaturaInscrita }}</td>

Debe quedar como se muestra en la siguiente figura:

Vista index.html.twig de Estudiante
  • Guardar la vista y cargar el navegador http://symfony.localhost/app_dev.php/estudiante/. Debe verse algo similar a esto:
Estudiante desde navegador
  • Como se muestra en la figura anterior basta con escribir el nombre del atributo padre para mostrar su nombre, esto pasa debido a que dentro de la entidad Asignatura esta definido un método toString que indica que cuando se acceda a un objeto Asignatura muestre su nombre al ser accedido como string. Si se desea mostrar su código por ejemplo se debe colocar el método get del atributo a mostrar. En este caso quedaría así:
<td>{{ entity.apellidos }}</td>
<td>{{ entity.idAsignaturaInscrita.getId() }}</td>
Vista index.html.twig con cambios
Estudiante desde navegador
  • Si se quisiera acceder desde Estudiante hasta Evaluación también puede realizarse esta acción; porque Asignatura tiene un atributo llamado $idEvaluacionRealizada que es un objeto de tipo Evaluacion. Para ello agregaremos una nueva columna a la vista denominada Evaluación y colocaremos el porcentaje de esa asignatura. Para acceder a ese atributo se debe colocar el siguiente código:
<td>{{ entity.apellidos }}</td>
<td>{{ entity.idAsignaturaInscrita.getId() }}</td>
<td>{{ entity.idAsignaturaInscrita.getIdEvaluacionRealizada() }}</td>
Vista index.html.twig con cambios
  • Al momento de cargar en el navegador. Aparecerá el porcentaje, porque la entidad Evaluacion tiene definido un método toString() que cuando se accede a esta clase coloca el porcentaje como valor string.
Estudiante desde navegador

Aplicar jQuery a los CRUD

jQuery es una rápida y concisa librería JavaScript que simplifica la manipulación de documentos HTML, manejo de eventos, animaciones, y las interacciones Ajax. Está diseñada para cambiar la forma en que se escribe JavaScript, la documentación se puede consultar desde jQuery

Para incorporar jQuery al proyecto, se creará un bundle para contener jQuery. Como usuario normal ejecutar desde consola

php app/console generate:bundle

Crear el Bundle con las siguiente consideraciones:

  • Nombre del namespace: jQuery/jQueryBundle
  • Nombre del Bundle: jQueryBundle
  • Ubicación: la predeterminada
  • Configuración: la predeterminada
  • Estructura completa de directorio: la predeterminada
  • Confirmación de las acciones:
    • Actualizar del kernel SI
    • Actualizar routing: NO
Al final, el asistente informa que se debe colocar manualmente el routeo, pero para este caso no es necesario.

Dentro del directorio src/jQuery/jQueryBundle/Resources/ crear un directorio denominado public y dentro de este js.

mkdir -p src/jQuery/jQueryBundle/Resources/public/js

Se procede a descargar la librería jQuery del siguiente enlace Download jQuery. Guarda dicho archivo en el directorio js recién creado. Al momento de escribir este artículo, la versión más reciente era la 1.9.1. De preferencia, trabajar con la versión de producción.

cd src/jQuery/jQueryBundle/Resources/public/js
wget -c http://code.jquery.com/jquery-1.9.1.min.js
cd -

Después de haber creado el archivo anterior se procede a crear los enlaces simbólicos a los archivos generados. Ejecutar como Usuario Normal

php app/console assets:install web --symlink

Trabajando con jQuery

No es posible interactuar de forma segura con el contenido de una página hasta que el documento no se encuentre preparado para su manipulación. jQuery permite detectar dicho estado a través de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la página esté disponible.

A continuación se procederá a mostrar un mensaje al momento en que se termine de cargar la página de Estudiante. Para realizar esta opción se debe crear un archivo js para la página en donde se debe mostrar. Dentro del directorio src/minsal/academicaAnBundle/Resource/public/js crear un directorio denominado Estudiante en donde se guardarán todas los js que apliquen a esa entidad. Crear un archivo denominado index.js y pegar el siguiente código.

//src/minsal/academicaAnBundle/Resource/public/js/Estudiante/index.js
$(document).ready(function() { 
	alert('El documento está preparado'); 
});

Agregar en la plantilla la referencia a la librería jQuery con la siguiente línea:

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('bundles/jquery/js/jquery-1.9.1.min.js') }}" ></script>
{% endblock %}

Dentro de la vista index.html.twig de Estudiante agregar las siguientes líneas después de la líneaextends:

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

Luego de guardar el archivo y recargar la página aparecerá lo siguiente:

Cargar jQuery

Selección de Elementos

El concepto más básico de jQuery es el de seleccionar algunos elementos y realizar acciones con ellos. La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. En Selectores se puede encontrar una completa referencia sobre los selectores de la biblioteca. A continuación se muestran algunas técnicas comunes para la selección de elementos:

  • Selección de elementos en base a su ID
$('#myId'); // notar que los IDs deben ser únicos por página
  • Selección de elementos en base al nombre de clase
$('.myClass div'); // si se especifica el tipo de elemento, se mejora el rendimiento de la selección
  • Selección de elementos por su atributo
$('input[name=first_name]'); // tenga cuidado, puede ser muy lento
  • Selección de elementos en forma de selector CSS
$('#contents ul.people li');
  • Pseudo-selectores
$('tr:odd'); // selecciona todos los elementos <tr> impares de una tabla
$('#myForm:input'); //selecciona todos los elementos del tipo input dentro del formulario #myForm
$('div:visible'); // selecciona todos los divs visibles

En el siguiente ejemplo se aplicarán estilos CSS a la etiqueta <h1>. Para elllo, pegar el siguiente código dentro de index.js:

//src/minsal/academicaAnBundle/Resource/public/js/Estudiante/index.js
$(document).ready(function() {
    $("h1").click(function(){
        $(this).css('color', 'red').fadeOut('slow').fadeIn('slow')    
    });
 
});

Guardar, recargar la página y ver lo que sucede.

Ajax

Para realizar una llamada Ajax que cargue el detalle del Estudiante, se introducirán elementos de jQuery, los cuales se explican en el siguiente enlace Ajax con jQuery. Para ello agregar el siguiente método en el archivo index.js.

$(".records_list td a").click(function(){
  //Verificar si existe el elemento 'resultado' creado de alguna llamada anterior, y lo borra
  ($('#resultado')) ? $('#resultado').remove():'';
 
  //Recuperar el atributo href del enlace actual
  var href = $(this).attr('href');
 
  // crear un elemento para colocar la información
  var elem = $("<div id='resultado'>Resultado</div>");
 
  //Agregar el elemento después de la clase records_list
  elem.insertAfter($(".records_list"));
 
 // cargar mediante una llamada ajax la dirección que tiene href dentro de resultado 
 $('#resultado').load(href);
 
 // Para que no haga el comportamiento normal del enlace y cargue la página
 return false;
});

Ahora se procede a modificar un poco el controlador y la plantilla de la acción show para que pueda ser utilizada tanto para llamadas Ajax como para las que no lo son, y se creará un plantilla especial para cuando se procesen peticiones Ajax.

/**
 * Finds and displays a Estudiante entity.
 *
 * @Route("/{id}/show", name="estudiante_show")
 * @Template()
*/
    public function showAction($id) {
    ...........
     $ajax = $this->getRequest()->isXmlHttpRequest();
 
     return array(
            'entity' => $entity,
            'ajax'=> $ajax,
            'delete_form' => $deleteForm->createView(),
     );

Se ha utilizado el método isXmlHttpRequest para determinar si se trata de una petición Ajax, y en la plantilla se carga la plantilla adecuada según la evaluación de la variable Ajax. Para realizar la evaluación de la vista show.html.twig , agregar las siguientes líneas

{# src/minsal/academicaAnBundle/Resource/views/Estudiante/new.html.twig #}
{% extends ajax ? "minsalacademicaAnBundle::plantilla.html_ajax.twig" :
                     "minsalacademicaAnBundle::plantilla.html.twig" %}

Finalmente se debe crear la plantilla Ajax dentro del directorio view con el siguiente nombre plantilla.html_ajax.twig , contendrá el siguiente código:

{#src/minsal/academicaAnBundle/Resources/views/plantilla.html_ajax.twig#}
{% block body %}
    <div class="symfony-content">
        {% block content %}
        {% endblock %}
    </div>
{% endblock %}

Ahora recargar la página y dar clic en el id del estudiante, debe mostrarse algo similar a esto:

Detalle Estudiante

jQuery UI

jQuery UI es la librería oficial para crear interfaces de usuario con jQuery. Provee abstracciones para interacciones y animaciones de bajo nivel, efectos avanzados, controles personalizables con temas. Es utilizada para crear aplicaciones web altamente interactivas, la documentación la podemos encontrar aquí Demos jQuery UI.

Para descargar la librería jQuery UI. En este sitio se elige los componentes a incluir en la descarga; si no sabemos con exactitud qué componentes necesitaremos es mejor descargar la versión completa. Al final de la página seleccionamos el tema que se desea descargar; si no sabemos que tipo de temas entrar a Temas en la opción 'Gallery' y se podrán ver todos los temas.

Temas jQuery UI

Guardar y descomprimir el archivo descargado en la ruta src/jQuery/jQueryBundle/Resources/public/. Al descomprimirlo quedara un directorio que contiene lo siguiente:

Directorio de jQuery UI

Agregar las siguientes líneas a la vista plantilla.html.twig:

{% block stylesheets %}
........
        <link href="{{ asset('bundles/jquery/jquery-ui-1.10.1.custom/css/redmond/jquery-ui-1.10.1.custom.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}
 
{% block javascripts %}
........
      <script type="text/javascript" src="{{ asset('bundles/jquery/jquery-ui-1.10.1.custom/js/jquery-ui-1.10.1.custom.min.js') }}" ></script>
 
{% endblock %}

Se procede a realizar un ejemplo de uso. Haciendo uso del mismo proyecto al dar clic sobre el id del estudiante se mostrará la información en una ventana desplegable con estilo para eso se deben de realizar los siguientes cambios al archivo index.js de estudiante. Sustituir la siguiente línea:

$('#resultado').load(href);

Por las siguientes:

$('#resultado').load(href, function(){
   $(this).dialog({
        modal: true, 
        width: 600
   })
});

Al recargar la página y dar clic sobre el id deberá aparecer algo similiar a lo siguiente:

Ejemplo de diálogo

jQuery Grid

Para trabajar con grid de jQuery se debe agregar un plugin denominado JQuery Grid. Para descargar el plugin, hacerlo del siguiente ennlace Descargar jQuery Grid.Si se tiene experiencia en el uso del plugin solo marcar lo que se necesita; en el caso de este ejemplo se descargaran todas las opciones.

Nota: ejemplos de este plugin puede encontrarse en aqui

Descomprimir el archivo descargado en el directorio src/jQuery/jQueryBundle/Resources/public/. Incluir el plugin en los estilos y javascript de la plantilla.

{% block stylesheets %}
......
        <link href="{{asset('bundles/jquery/jquery.jqGrid-4.4.4/css/ui.jqgrid.css')}}" rel="stylesheet"  type="text/css" media="all"/>
{% endblock %}
 
 
{% block javascripts %}   
......
        <script type="text/javascript" src="{{asset('bundles/jquery/jquery.jqGrid-4.4.4/js/i18n/grid.locale-es.js')}}"></script>
        <script type="text/javascript" src="{{asset('bundles/jquery/jquery.jqGrid-4.4.4/js/jquery.jqGrid.min.js')}}" ></script>
{% endblock %}

Se debe editar la vista index.html.twig de Estudiante de la siguiente manera:

  • Cambiar la siguiente línea
    <table class="records_list">

Por:

    <table id="listado_estudiantes" >
  • Quitar la columna Actions tanto del encabezado como el cuerpo.
  • Agregar las siguientes líneas antes del ul para agregar un nuevo estudiante
    <div id='pagerEstudiantes' ></div>
    <div id='resultado' ></div>
    <ul>
        <li>
            <a href="{{ path('estudiante_new') }}">
                Create a new entry
            </a>
        </li>
    </ul>

El archivo index.js debe quedar así:

//src/minsal/academicaAnBundle/Resource/public/js/Estudiante/index.js
$(document).ready(function() { 
    $("h1").click(function(){
        $(this).css('color', 'red').fadeOut('slow').fadeIn('slow')    
    });
 
    Enlace=function(){}
    Enlace.cambiar=function(){
       $("#listado_estudiantes td a").click(function(){
 
            var href = $(this).attr('href');
 
            $('#resultado').load(href, function(){
                $(this).dialog({
                    modal: true, 
                    width: 600
                }); 
 
            });
 
            return false;
        });
    }
 
    tableToGrid("#listado_estudiantes", {
        pager : '#pagerEstudiantes',
        rowNum:10, 
        gridview: true, 
        colModel :[
            {name:'Id',width:10},
            {name:'Carnet',width:80},
            {name:'Nombres', width:80},
            {name:'Apellidos', width:80},
            {name:'Asignatura', width:100},
            {name:'Porcentaje', width:80}
        ],
        loadComplete: function (){
            Enlace.cambiar();
            $("TD").css('white-space','normal');
        }
    });
    jQuery("#listado_estudiantes").jqGrid('sortGrid',"Id",false);
    jQuery("#listado_estudiantes").jqGrid('navGrid','#pagerEstudiantes', {
        edit:false, 
        add:false, 
        del:false,
        search:true,
        reload:true
    });
});

Al guardar todos los archivos y recargar la página deberá verse algo similar a esto:

Estudiante con jQGrid

Al hacer clic sobre el id Estudiante se verá así

Mensaje de Estudiante

Agregando un menú

El menú a utilizar para esta capacitación descargarlo del siguiente enlace Media:Menu.tar.gz‎. Descargarlo dentro del public del minsalacademicaAnBundle. El menú se creará en una vista aparte y se incluirá dentro de la plantilla principal. Para hacer esto crear una vista denominada menu.html.twig dentro del directorio views del minsalacademicaAnBundle con el siguiente contenido:

{# src/minsal/academicaAnBundle/Resource/views/menu.html.twig #}
  {% block stylesheets %}
        <link href="{{ asset('bundles/minsalacademicaan/menu/pro_drop_1.css') }}" rel="stylesheet" type="text/css" />
  {% endblock %}
  {% block javascripts %}       
        <script type="text/javascript" src="{{ asset('bundles/jquery/menu/stuHover.js') }}" ></script>
  {% endblock %}
<span class="preload1"></span>
<span class="preload2"></span>
 
<ul id="nav">
    <li class="top">
        <a href="{{ path('evaluacion') }}" class="top_link">
            <span class="down">Evaluación</span></a>
            <ul class="sub">
                <li><a href="{{ path('evaluacion_new') }}">Agregar</a></li>
            </ul>
    </li>
    <li class="top">
        <a href="{{ path('asignatura') }}" class="top_link">
            <span class="down">Asignatura</span> </a>
            <ul class="sub">
                <li><a href="{{ path('asignatura_new') }}">Agregar</a></li>
            </ul>
    </li>
    <li class="top">
        <a href="{{ path('estudiante') }}" class="top_link">
            <span class="down">Estudiante</span> </a>
          <ul class="sub">
                <li><a href="{{ path('estudiante_new') }}">Agregar</a></li>
            </ul>
    </li>
</ul>

En el archivo plantilla.html.twig se debe incluir el menu. Esto se realizando copiando y pegando la siguiente línea antes del bloque body

 {% include 'minsalacademicaAnBundle::menu.html.twig' %}

Guardar y recargar la página deberá verse algo similar a esto:

Mensaje de Estudiante

Agregar página de inicio

Se procederá a crear una página de inicio que cargue cuando se necesite acceder al sitio sin especificar ninguna opción. Para hacer esta opción se utilizará el controlador Default. Se realizarán los siguientes cambios:

  • Borrar el parámetro del método indexAction; tanto en la declaración como en el arreglo.
  • Borrar la ruta y la template.
  • Se obteniene lo siguiente:
   /**
     * @Route("/",name="minsalacademicaan_homepage")
     * @Template()
     */
    public function indexAction()
    {
        return array();
    }

Se deberá cambiar la vista a la que hace referencia ese controlador. Esa vista se encuentra en src/minsal/academicaAnBundle/Resources/views/Default/ y se llama index.html.twig. El contenido de esta vista es el siguiente:

{# src/minsal/academicaAnBundle/Resources/views/Default/index.html.twig #}
{% extends 'minsalacademicaAnBundle::plantilla.html.twig' %}
 
{% block body %}
<h1>¡¡¡¡¡ Bienvenido !!!!!</h1>
{% endblock %}

Ahora se deberá cambiar la ruta para acceder a este controlador. Para esto abrir el archivo routing.yml del directorio app/config/ y agregar las siguientes lineas al inicio del archivo:

# agregar esto al principio del archivo
_home:
    pattern:  /
    defaults: { _controller: minsalacademicaAnBundle:Default:index }

Abrir el archivo routing_dev.yml y realizar los siguientes cambios:

  • Cortar las siguientes líneas del archivo:
_main:
    resource: routing.yml
  • Pegar las líneas al inicio del archivo.

Agregar al menú la opción de acceder a la página principal, agregar las siguientes líneas al menú:

<li class="top">
 <a href="{{ path('_home') }}" class="top_link">
    <span>Inicio</span>
 </a>
</li>
Con opción inicio en menu

Dar clic en inicio y aparecerá la siguiente página

Página principal

5. Desarrollo_web_Symfony2_parte_5

Herramientas personales
Espacios de nombres

Variantes
Acciones
Navegación
Herramientas