Date post: | 14-Apr-2018 |
Category: |
Documents |
Upload: | jhon-edward-francia-minaya |
View: | 227 times |
Download: | 0 times |
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).
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 2/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 2
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
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 3/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 3
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:
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 4/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 4
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:
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 5/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 5
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
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 6/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 6
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).
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 7/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 7
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”
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 8/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 8
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)
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 9/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 9
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”
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 10/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 10
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
7/27/2019 Manual AJAX - Básico
http://slidepdf.com/reader/full/manual-ajax-basico 11/11
Desarrollo WEB
PHP + MYSQL + AJAX + CSS Página 11
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.