Manual AJAX - Básico

7/27/2019 Manual AJAX - Básico

http://slidepdf.com/reader/full/manual-ajax-basico 1/11

Desarrollo WEB

PHP + MYSQL + AJAX + CSS Página 1

VERIFICACIÓN DE USUARIOS CON AJAXVamos a crear una aplicación que permita verificar la existencia de un usuario en tiempo real.

El resultado final de nuestra aplicación WEB es la sigueinte:

Observación, se está mostrando un mensaje que indica si el nombre de usuario está

disponible.

PROCEDIMIENTOS:Continuación 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).



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 líneas 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



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 comprobación 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 título:

7. Seguido del título creamos un formulario y dentro de el una tabla con las primeras 2

filas <TR> que se muestran a continuación:



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:



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 lógico esá normalizado por lo que

los datos tendrán que extraerse de otra tabla llamada del mismo nombre. A continuación

mostraremos el ejercicio terminado:

Para más información sobre highslide visite:

http://highslide.com/

PROCEDIMIENTOS1. Iniciamos creando la BD de ejemplo, en mi caso le puse el nombre “Marleo”,

luego vamos a diseñar las siguientes tablas:

Tabla: Marcas

Tabla Productos

NOTA: Obviamente la norm al ización no es la correcta, pero al menos sirve para

el ejemplo uti l izand o AJAX y l a nueva libr ería descr ita en el paso 1



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:

claseAjaxPermitirá la conexión asincrónica

highslide.CSSApariencia del control dinámico

highslide-with-html.jsMotor del control dinámico (a modo de LIGHTBOX pero para formularios)

graphics (carpeta)En ella encontraremos las imágenes que se requieren para el highsl ide

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 declaración de dos de los archivos que copiamos en el paso 3.

Luego creamos un bloque JAVASCRIPT donde personalizaremos el control HIGHSLIDE (ver

desde la línea 9 hasta 14).



Desarrollo WEB


5. Líneas más abajo (aun dentro del HEAD) aperturamos un segundo bloque de

instrucciones JAVASCRIPT, esta vez con una función que permite validar el proceso de

grabación.

6. Como es lógico, también incluimos el llamado a “claseAjax.js” y luego una función 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”



Desarrollo WEB


8. Crearemos entonces el archivo “refresca_marcas.php” para generar el combo de

forma dinámica, mostrando todos los registros de la tabla MARCAS.

NOTA: En las líneas 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 lógico permitirá registrar las marcas

de los productos.

Esto va en el <HEAD></HEAD>

Y esto en el <BODY></BODY>

… también en el BODY (marcas.php)



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”



Desarrollo WEB


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

13. Para verificar su funcionamiento ingrese a esta dirección

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



Desarrollo WEB


14. Finalmente pulse ACTUALIZAR y verá que sin recargar la página la nueva marca “HP” se

muestra en el combo como nuevo elemento, los archivos que manejamos actualmente

serían:

NOTA:En el archivo “highslide-with-html.js” puedes definir el título del control.

Manual AJAX - Básico

Documents

Transcript of Manual AJAX - Básico