PRACTICA 005: CONSUMIR UN JSON GENERADO DESDE PHP
Ing. Honoria Reyes Macedo
IDE: Dreamweaver, Atom
IDE: Dreamweaver, Atom
Lenguaje de Programación: JavaScript
Lenguaje de paginas ESTATICAS: HTML(HyperText
Markup Language)
Base de Datos: SQLServer.
Servidor Web: Apache XAMPP
Servidor Web: Apache XAMPP
INTRODUCCION
En esta práctica
se usa XAMPP, herramienta para emular un servidor Apache en la PC.
Se crea una página
en html5 y un programa en JavaScript para leer un JSON creado con PHP.
Para esta practica sera necesario tener una carpeta "img" la cual se usara para guardar imagenes
registradas en la tabla de alumnos..
Para esta practica sera necesario tener una carpeta "img" la cual se usara para guardar imagenes
registradas en la tabla de alumnos..
ACTIVIDADES
1.- Crear un archivo miscriptLeeJSON.js
1.1
En la ruta C:\xampp\htdocs\rest\js àCopiar el archivo
JQuery.js
1.2 En la ruta C:\xampp\htdocs\rest\jsà crear el archivo miscriptLeeJSON.js 
1.3 Capturar lo siguiente en el archivo creado
2.- Trabajar en tu página web creada en la practica 1: en mi caso es inicio.html
Nota: Guardar inicio.html
en la ruta C:\xampp\htdocs\rest\
2.1.- Agregar las 3 líneas siguientes en alguna sección de la pagina
2.2.- Agregar la siguiente línea
antes del cierre de la etiqueta <body>
3.- Registrar en la Base de Datos de SQL Server, de la practica anterior.
Nota: Guardar en la carpeta "img" imagenes correspondientes a los alumnos( hasta 200kb de tamaño)
3.1 En la tabla alumno:
Por cada alumno agregar en su campo "foto" el nombre de una imagen guardada en la carpeta img
4.- Probar en el navegador
4.1 Recuerda iniciar el
servidor Apache desde XAMPP (xampp-control.exe)
4.2 Verifica el puerto que se activa y ejecutar ahi tu pagina
5.- Agregar al archivo miestilo.css en la carpeta css
.contenedorimag{
display: inline-block;
vertical-align: top;
max-width: 20%;
font-size: 1em;
border:0.1em #009 solid ;
}
.contenedor,.contenedorimag{
display: inline-block;
}
Nota: Si al ejecutarlo detecta un error de seguridad
de CORS à activar Cors
(Parte superior derecha del navegador)
No comments:
Post a Comment