Jorge Iván Meza Martínez

Introducción.

En este capítulo final se va a realizar la implementación de las acciones que permanecen pendientes.

• Editar a un contacto.
• Remover a un contacto.

Estas acciones requieren que se haya realizado con anterioridad la implementación de la lista y la carga de contactos para que el usuario tenga la posibilidad de ver los contactos existentes en la base de datos y de seleccionar uno específico sobre el cual se va a ejecutar la acción elegida.

Estas acciones estan basadas en Ajax.Request motivo por el cual su implementación es muy similar a la acción de agregar contactos y carecen de aspectos particulares para destacar.

Editando contactos.

En el lado del cliente.

Se actualiza la implementación de la función JavaScript enEditarRegistro en la cual se realizan las siguientes actividades.

• Verificar que el contenido del campo oculto que almacena el ID del contacto que se va a editar no se encuentre vacío.

    if($('tId').value.strip().length == 0)
    {
        alert('Para editar un registro primero debe seleccionarlo.');
        return false;
    }

• Realizar la invocación del llamado asíncrono con las siguientes características.

• Como parámetros se envían los campos del formulario.
• Si la invocación asíncrona termina exitosamente se muestra un mensaje y se actualiza el listado de contactos registrados para que se reflejen los cambios.
• Si la invocación termina de manera fallida se muestra un mensaje indicando el error.

    new Ajax.Request('editar.php',
    {
        method:     'post',
        parameters: $('formulario').serialize(true),
        onSuccess: function(transport)
        {
            ponMensajeBien('<b>' + transport.responseText + '</b>');
            enActualizarBusqueda(null);
        },
        onFailure: function(transport)
        {
            ponMensajeMal('<b>' + transport.responseText + '</b>');
        }
    });
    return true;

En el lado del servidor.

La implementación se realiza en el archivo editar.php que se ubica en el directorio raíz de la aplicación web en el cual se desarrollan las siguientes actividades.

• Establecer la conexión con la base de datos.

include('config.php');
include_once('basededatos.php');
include_once('contacto.php');
$bd = new BaseDeDatos(BaseDeDatos::crearDSN($bdInfo));

• Obtener la nueva información del contacto enviada por el cliente.

$tId          = filter_var($_POST['tId'],          FILTER_SANITIZE_STRING);
$tNombres     = filter_var($_POST['tNombres'],     FILTER_SANITIZE_STRING);
$tApellidos   = filter_var($_POST['tApellidos'],   FILTER_SANITIZE_STRING);
$tCorreo      = filter_var($_POST['tCorreo'],      FILTER_SANITIZE_EMAIL);
$tFNacimiento = filter_var($_POST['tFNacimiento'], FILTER_SANITIZE_STRING);

• Crear una instancia de la clase Contacto con la información recién recibida y realizar la actualización del contacto a través de ella.

$contacto = new Contacto();
$contacto -> ponId($tId);
$contacto -> ponNombres($tNombres);
$contacto -> ponApellidos($tApellidos);
$contacto -> ponCorreo($tCorreo);
$contacto -> ponFechaDeNacimiento($tFNacimiento);
$control = $contacto -> editar($bd);
$bd -> desconectar();

• Enviar al cliente el mensaje informativo y el código HTTP apropiado según el tipo de terminación del proceso.

if($control > 0)
{
    echo utf8_encode("Registro editado");
    header("Status: 200 OK", false, 200);
}
else
{
    echo utf8_encode("El registro no pudo ser editado, inténtelo nuevamente");
    header("Status: 400 Bad request", false, 400);
}

Removiendo contactos.

Nuevamente el procedimiento es similar al anterior, se utiliza Ajax.Request.

En el lado del cliente.

• Verificar que el contenido del campo oculto que almacena el ID del contacto que se va a remover no se encuentre vacío.

    if($('tId').value.strip().length == 0)
    {
        alert('Para remover un registro primero debe seleccionarlo.');
        return false;
    }

• Realizar la invocación asíncrona de la acción consultando al archivo remover.php.

    new Ajax.Request('remover.php',
    {
        method:     'post',
        parameters: $('formulario').serialize(true),
        onSuccess:  function(transport)
        {
            ponMensajeBien('<b>' + transport.responseText + '</b>');
            enActualizarBusqueda(null);
        },
        onFailure:  function(transport)
        {
            ponMensajeMal('<b>' + transport.responseText + '</b>');
        }
    });
    return true;

En el lado del servidor.

• Establecer la conexión con la base de datos.

include('config.php');
include_once('basededatos.php');
include_once('contacto.php');
$bd = new BaseDeDatos(BaseDeDatos::crearDSN($bdInfo));

• Obtener la información del contacto enviada por el cliente, es de particular interés la información del campo tId.

$tId = filter_var($_POST['tId'], FILTER_SANITIZE_STRING);

• Crear una instancia de la clase Contacto con la información recién recibida y realizar la remoción del contacto a través de ella.

$contacto = new Contacto();
$contacto -> ponId($tId);
$control = $contacto -> remover($bd);
$bd -> desconectar();

• Enviar al cliente el mensaje informativo y el código HTTP apropiado según el tipo de terminación del proceso.

if($control > 0)
{
    echo utf8_encode("Registro removido");
    header("Status: 200 OK", false, 200);
}
else
{
    echo utf8_encode("El registro no pudo ser removido, inténtelo nuevamente");
    header("Status: 400 Bad request", false, 400);
}

Conclusiones.

En los últimos dos capítulos se realiza la implementación de los llamados asíncronos desde la interfaz del usuario (navegador web) utilizando JavaScript que son respondidos por las acciones implementadas en PHP.

Las implementaciones de Ajax hace uso de sus tres presentaciones:

1. Ajax.Request: útil para realizar el llamado asíncrono, recibir la información de respuesta y realizar cierto grado de procesamiento sobre ella.  Utilizado para agregar, editar y remover contactos.
2. Ajax.Updater: es una facilidad basada en el tipo anterior.  Su utilidad radica en que el mismo framework se encarga de desplegar la información recibida como respuesta del servidor en el componente especificado de manera automática.  Utilizado para mostrar el listado de los contactos registrados en el sistema.
3. Ajax.Request con JSON: el involucrar JSON como formato para la respuesta recibida del servidor le permite al cliente realizar fácilmente cualquier procesamiento o transformación de esta información ya que es inmediatamente convertida a un objeto JavaScript con todas las ventajas que esto proporciona.  Utilizado para mostrar la información (cargar) del contacto seleccionado por el usuario.

Enlaces.

• Aplicación de demostración versión 0.5 (final).
• Archivos fuente para descargar de la versión 0.5 (final).

Artículos relacionados:

1. Hacer algo cuando inicia o termina el evento AJAX con Prototype
2. Ejemplo rápido y simple de AJAX con PHP y PrototypeJS
3. Ejemplo de AJAX rápido y simple con PHP y jQuery