AJAX con JQuery y bases de datos con AJAX con JQuery y bases de datos con
PHP y MySQL PHP y MySQL
Taller Práctico Taller Práctico
Propósito Es dar la bases suficientes para realizar una
página o aplicación web basada en PHP con
manejo de bases de datos y AJAX por medio de JQuery.
2006-06-01 3
Diseño de una aplicación web
Vista Controlador Modelo
Muestra y Recibe Datos Transporte de datos Contenedor Datos
Modelo Vista Controlador
Vista: Recibir Datos La vista en nuestro caso se refiere a una página
web que una persona ve en su navegador. Puede o no ser un formulario aunque los común es que sea uno.
2006-06-01 5
Twitter Bootstrap Twitter Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS con tipografías, formularios, botones, gráficos, barras de navegación y demás componentes de interfaz.
Formulario Un formulario web dentro de una página web permite al usuario introducir datos los cuales son enviados a un servidor para ser procesados.
DOM: Document Object Model
2006-06-01 7
Modificar elementos del DOM Para modificar elementos en árbol del DOM se utiliza principalmente un atributo especial que casi todos los elementos html puede usar.
Identificador de elementos: id=”valor”
<P id="miparrafo">
<Input type=text name="minombre" id=”caja-1” >
JQuery jQuery es una biblioteca de JavaScript, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web
2006-06-01 9
JQuery
<script language="javascript">
$(document).ready(function() { ....
});
</script>
Controlador: Transporte Datos
Controlador
1 Entrada
1 Salida
Vista
Formulario JSON Ajax PHP Parser
2006-06-01 11
Estructura del controlador El diseño del controlador es el llamado una entrada, una salida. Pero si recuerdan en un acceso a usuarios tenemos dos valores el nombre del usuario y su contraseña, entonces ¿Como hacemos que sea una sola entrada?.
AJAX AJAX, (JavaScript asíncrono y XML JSON) , es una técnica de desarrollo web para crear aplicaciones interactivas, que se ejecutan en el cliente.
Manteniendo la comunicación con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas.
2006-06-01 13
JSON JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos.
JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.
JSON
Ejemplo de un JSON {
"id": 1,
"name": "Product", "price": 123,
"tags": [ "Bar", "Rest" ], "stock": {
"warehouse": 300, "retail": 20
} }
2006-06-01 15
JSON
{ //Ejemplo un poco más completo "name": "Product",
"properties": { "id": {
"type": "number",
"description": "Product identifier", "required": true
},
"name": {
"type": "string",
"description": "Name of the product", "required": true
} } }
JSON Para nuestro ejemplo del acceso de usuario el
controlador recibirá la siguiente información { "action" : 1,
"datos" : {
"usuario" : "Admin", "pass" : "12345"
} };
2006-06-01 17
Controlador: PHP parser El controlador como hemos mencionado solo recibe una entrada y una salida, la estructura interna viene a ser :
Lectura JSON
Analiza y Ejecuta la operación
Respuesta JSON
Modelo: Contenedor de datos El modelo puede ser una representación de los datos o un contenedor de los mismos, por esto esta directamente relacionado con las bases de datos.
Controlador
Objeto PHP
Objeto PHP
Modelo
2006-06-01 19
Modelo: Orientado a Objetos Los modelos a menudo están representados
como objetos, estos objetos corresponden a una tabla, una vista o una base de datos.
Base de datos Para nuestra aplicación de un acceso a usuarios, necesita una base de datos que tengo al menos esta estructura básica.
Create table usersp(
code int primary key,
username varchar(10) not null, pass varchar(64) not null
)
2006-06-01 21
Mdl.php Por lo tanto necesitamos una clase php que represente mi base de datos y me permita acceder a la misma
ADOdb
ADOdb ADOdb es un conjunto de bibliotecas de bases de datos para PHP y Python. Esta permite a los programadores desarrollar aplicaciones web de una manera portable, rápida y fácil. La ventaja reside en que la base de datos puede cambiar sin necesidad de reescribir cada llamada.
2006-06-01 23
Integración Vista
Controlador
Modelo
$.ajax({});
JQuery usa muchas formas para utilizar ajax la más completa es la forma:
$.ajax({url : "lugar.php", type: 'post',
dataType:'json', data: datosEnviar,
success : function(resp) { },
error: function(XMLHttpRequest, textStatus, errorThrown){
}});
2006-06-01 25
Qué sigue?
Lo que ustedes quieran...
Leonardo Valdés Arteaga
joindiaspora.com/u/eolandro [email protected]
