Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Manual AJAX - Básico

    Cargado por

    Jhon Edward Francia Minaya
    23 vistas11 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    23 vistas11 páginas

    Manual AJAX - Básico

    Cargado por

    Jhon Edward Francia Minaya

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 11

    Desarrollo WEB

    VERIFICACIN DE USUARIOS CON AJAX


    Vamos a crear una aplicacin que permita verificar la existencia de un usuario en tiempo real. El resultado final de nuestra aplicacin WEB es la sigueinte:

    Observacin, se est mostrando un mensaje que indica si el nombre de usuario est disponible.

    PROCEDIMIENTOS:
    Continuacin de los ejercicios anteriores: 1. Primero vamos a crear una tabla para el registro de estos usuarios: TABLA: USUARIOS

    Y le insertamos algunos registros

    2. Ahora vamos a crear un archivo de tipo CSS para mejorar la apariencia de nuestro formulario WEB. Lo grabaremos en la carpeta WWW/AJAX (ejercicios anteriores). PHP + MYSQL + AJAX + CSS Pgina 1

    Desarrollo WEB

    Nombre al archivo: estilos.css 3. Ahora vamos a crear un nuevo archivo basado en una plantilla HTML. Y en L definimos dos lneas que permiten IMPORTAR el archivo estilos.css y claseAjax.js. Todo esto dentro del <HEAD></HEAD>

    4. Luego creamos un bloque JAVASCRIPT que permite crear el objeto AJAX

    PHP + MYSQL + AJAX + CSS

    Pgina 2

    Desarrollo WEB

    5. Como ha notado, se necesita de un archivo llamado buscausuario.php, el cual recibir una valor enviado por GET y almacenado en la variable usuario. Esto servir como valor de comprobacin para la consulta y el posterior resultado:

    Buscausuario.php 6. Vuelva al archivo registrousuarios.php y dentro de la etiqueta <BODY> cree una etiqueta <H2> que servir de ttulo:

    7. Seguido del ttulo creamos un formulario y dentro de el una tabla con las primeras 2 filas <TR> que se muestran a continuacin:

    PHP + MYSQL + AJAX + CSS

    Pgina 3

    Desarrollo WEB

    8. Continuamos la estructura de la tabla con una fila combinada:

    9. Terminamos la tabla colocando los siguientes elementos en la celdas:

    OBSERVACIONES: Para comprobar el funcionamiento de este SCRIPT abra un navegador y digite la sigueinte URL:

    Escriba un nombre en el cuadro, en caso de no existir:

    De lo contrario:

    PHP + MYSQL + AJAX + CSS

    Pgina 4

    Desarrollo WEB

    AGREGAR ELEMENTOS UTILIZANDO AJAX + API highslide


    En este ejercicio crearemos un formulario para registrar productos; entre los campos principales utilizaremos uno llamado MARCA que como es lgico es normalizado por lo que los datos tendrn que extraerse de otra tabla llamada del mismo nombre. A continuacin mostraremos el ejercicio terminado:

    Para ms informacin sobre highslide visite: http://highslide.com/

    PROCEDIMIENTOS
    1. Iniciamos creando la BD de ejemplo, en mi caso le puse el nombre Marleo, luego vamos a disear las siguientes tablas: Tabla: Marcas

    Tabla Productos

    NOTA: Obviamente la normalizacin no es la correcta, pero al menos sirve para el ejemplo utilizando AJAX y la nueva librera descrita en el paso 1

    PHP + MYSQL + AJAX + CSS

    Pgina 5

    Desarrollo WEB

    2. Ahora nos vamos a WWW y creamos una carpeta, en mi caso: DEMOPRODUCTOS

    3. Ahora vamos a COPIAR y PEGAR la carpeta y los archivos:

    claseAjax Permitir la conexin asincrnica highslide.CSS Apariencia del control dinmico highslide-with-html.js Motor del control dinmico (a modo de LIGHTBOX pero para formularios) graphics (carpeta) En ella encontraremos las imgenes que se requieren para el highslide

    4. Abrimos un nuevo archivo basado en plantilla HTML, lo grabamos inmediatamente en la carpeta DEMOPRODUCTOS dentro de WWW con el nombre INDEX.PHP, vamos a iniciar haciendo la declaracin de dos de los archivos que copiamos en el paso 3.

    Luego creamos un bloque JAVASCRIPT donde personalizaremos el control HIGHSLIDE (ver desde la lnea 9 hasta 14).

    PHP + MYSQL + AJAX + CSS

    Pgina 6

    Desarrollo WEB

    5. Lneas ms abajo (aun dentro del HEAD) aperturamos un segundo bloque de instrucciones JAVASCRIPT, esta vez con una funcin que permite validar el proceso de grabacin.

    6. Como es lgico, tambin incluimos el llamado a claseAjax.js y luego una funcin que permita generar un combo cargando los datos de las marcas.

    7. Antes de crear el archivo refresca_marcas.php vamos a crear conexion.php

    PHP + MYSQL + AJAX + CSS

    Pgina 7

    Desarrollo WEB

    8. Crearemos entonces el archivo refresca_marcas.php para generar el combo de forma dinmica, mostrando todos los registros de la tabla MARCAS.

    NOTA: En las lneas 15 y 16 el BackSlash \ se ve con un sombreado gris debido a que est ayudando a que las comillas [ ] pueden ser mostradas en el HTML. 9. Creamos el archivo MARCAS.PHP el cual como es lgico permitir registrar las marcas de los productos. Esto va en el <HEAD></HEAD>

    Y esto en el <BODY></BODY>

    tambin en el BODY (marcas.php)

    PHP + MYSQL + AJAX + CSS

    Pgina 8

    Desarrollo WEB

    10. Lo comprobamos desde un navegador

    11. Volvemos a trabajar en el archivo principal INDEX.PHP (consulte paso 4) agregando el siguiente formulario HTML:

    Observaciones: el combo se carga gracias al archivo refresca_marcas.php

    PHP + MYSQL + AJAX + CSS

    Pgina 9

    Desarrollo WEB

    12. Aun dentro del <BODY> procedemos a agregar un bloque PHP

    13. Para verificar su funcionamiento ingrese a esta direccin

    Ingrese el NOMBRE Impresora, luego escriba el PRECIO y el STOCK

    Pulse AGREGAR; vamos a SUPONER que la impresora que queremos registrar es de marca HP y esta no figura en el combo.

    Luego cierre la ventana PHP + MYSQL + AJAX + CSS Pgina 10

    Desarrollo WEB

    14. Finalmente pulse ACTUALIZAR y ver que sin recargar la pgina la nueva marca HP se muestra en el combo como nuevo elemento, los archivos que manejamos actualmente seran:

    NOTA:
    En el archivo highslide-with-html.js puedes definir el ttulo del control.

    PHP + MYSQL + AJAX + CSS

    Pgina 11

    También podría gustarte