Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Trabajando con JSON y Templates con JSRender y PHP
Actualizado el 21 Enero, 2016 y leído 3,640 veces
Calificación: Sin calificar 10

Trabajando con JSON y Templates con JSRender y PHP

Anexsoft

Hoy vamos hablar del plugin JSRender, el cual nos permite trabajar con JSON usando un Template Engine desde el lado del cliente. Es muy común que cuando queremos cargar contenido dinámico usamos AJAX lo más óptimo es traer ya todo el código HTML mapeado e incrustarlo dentro de nuestro contenedor, pero hoy en día más profesional es trabajar con JSON, ya que esta forma nos permite trabajar con la data y mediante tu template tu defines como lo quieres presentar siendo está su gran ventaja aparte de la velocidad que ganamos.

Explicación del proyecto

El proyecto ha realizar es bastante simple, lo que vamos hacer es solicitar una consulta a la base de datos y mostrar a todos los alumnos en una tabla, dentro de ella tendremos un boton de editar, al dar click vamos a cargar un popup con la data obtenida del servidor mediante AJAX. Para ello vamos a usar el JSRender para mapear el objeto JSON con nuestro HTML.

Image title

Image title

 

Nuestro código HTMl del template

En nuestro proyecto vamos a usar un POPUP que va a mapear la data obtenida en JSON por una petición AJAX. En mi primer lugar, debemos crear nuestro template que es el siguiente:

<script id="tmpl-usuario" type="text/x-jsrender">
<input type="hidden" name="id" value="{{:id}}" />

<div class="form-group">
    <label>Nombre</label>
    <input type="text" name="Nombre" value="{{:Nombre}}" class="form-control" placeholder="Ingrese su nombre" data-validacion-tipo="requerido|min:3" />
</div>

<div class="form-group">
    <label>Apellido</label>
    <input type="text" name="Apellido" value="{{:Apellido}}" class="form-control" placeholder="Ingrese su apellido" data-validacion-tipo="requerido|min:10" />
</div>

<div class="form-group">
    <label>Correo</label>
    <input type="text" name="Correo" value="{{:Correo}}" class="form-control" placeholder="Ingrese su correo electrónico" data-validacion-tipo="requerido|email" />
</div>

<div class="form-group">
    <label>Sexo</label>
    <select name="Sexo" class="form-control">
        <option {{if Sexo == 1 }} selected {{/if}} value="1">Masculino</option>
        <option {{if Sexo == 2 }} selected {{/if}} value="2">Femenino</option>
    </select>
</div>

<div class="form-group">
    <label>Fecha de nacimiento</label>
    <input readonly type="text" name="FechaNacimiento" value="{{:FechaNacimiento}}" class="form-control datepicker" placeholder="Ingrese su fecha de nacimiento" data-validacion-tipo="requerido" />
</div>

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            <label>Foto</label>
            <input type="hidden" name="Foto" value="{{:Foto}}" />
            <input type="file" name="Foto" placeholder="Ingrese una imagen" />
        </div>     
    </div>
    <div class="col-xs-6">
        {{if Foto != ''}}
            <div class="img-thumbnail text-center">
                <img src="uploads/{{:Foto}}"  />
            </div>
        {{/if}}            
    </div>
</div>

<hr />

<div class="text-right">
    <button class="btn btn-success">Guardar</button>
</div>
</script>

Para acceder a cada valor de nuestro json, lo hacemos usando doble llave, ejm: {{:Nombre}}. Por lo tanto, esto va a imprimir la propiedad Nombre de nuestro JSON. Nuestro JSON obtenido tiene las siguienteres caracteristicas.

{
 "id":"3",
 "Nombre":"Eduardo",
 "Apellido":"Rodriguez Pati\u00f1o",
 "Sexo":"1",
 "FechaNacimiento":"1989-02-11",
 "FechaRegistro":"2014-05-26",
 "Foto":"150211034428-logo.png",
 "Correo":"hitogoroshi@outlook.com"
}

Al seleccionar el sexo del usuario en nuestro dropdownlist (select) debemos hacer una lógica, nuestro template soporta hacer esto.

<option {{if Sexo == 1 }} selected {{/if}} value="1">Masculino</option>

NOTA: el template se encuentra dentro de etiquetas <script> y le hemos asignado un id #tmpl-usuario.

 

Dialog de Bootstrap 3

En segundo lugar, hemos maquetado un POPUP o DIALOG que trae el Bootstrap 3, ya que cuando hagamos click en el boton editar del alumno la información se abrira dentro de un POPUP.

<div id="modal-alumno" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">        <h4 class="modal-title">Editando un alumno</h4>
      </div>
      <div class="modal-body">
        <form id="frm-alumno" action="?c=Alumno&a=Guardar" method="post" enctype="multipart/form-data"></form>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Dentro del popup tenemos una etiqueta form, en esta vamos a incrustar el HTML mapeado, es muy importante declarar el ID, en nuestro caso #frm-alumno.

 

Ejecución y mapeo del template

Para ejecutar el template vamos a crear una función la cual recibe el ID del usuario que queremos mostrar, seguido vamos a ejecutar el plugin para que mapee la data con la de nuestro template.

function EditarUsuario(id)
    {
        $.post('?c=Alumno&a=Obtener', {
            id: id
        }, function(data){
            var template = $.templates("#tmpl-usuario"); /* Inicializamos el plugin */
            $("#frm-alumno").html(template.render(data)); /* El HTML parseado lo incrustamos dentro de nuestro formulario #frm-alumno */
            $("#modal-alumno").modal(); /* Abrimos el popup de Bootstrap */
        }, 'json')
    }

Obviamente para que esto funcione debemos llamar a la función cuando hagamos click en el boton editar. Yo lo hice usando un onclick en la etiqueta del boton de editar, otra opción es declarar un evento con jQuery.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.