Iniciando con php y Ajax, en este articulo vamos a ver el uso de php como lenguaje script en aplicaciones cliente-servidor usando Apache como servidor web algo de html y javascript, vamos a mantener todo de una forma simple llegando hasta AJAX
Introduccion
Bueno primero que nada vamos a ver que es php, al igual que las otras herramientas que usaremos, apache, html,javascript AJAX, y el famosillo MySQL sin embargo todo esto toma sentido cuando estas tecnologías se unen:
Introduccion
Bueno primero que nada vamos a ver que es php, al igual que las otras herramientas que usaremos, apache, html,javascript AJAX, y el famosillo MySQL sin embargo todo esto toma sentido cuando estas tecnologías se unen:
Instalación
En cuestión al instalador en lo que es windows recomiendo algo rápido y que nos evite meterle mucha mano a la configuracion un ejemplo es Appserv existe otro paquete que nos ofrecen en conjunto las citadas herramientas ya configuradas y listas para trabajar, ahora que si nos encontramos en Linux podemos descargarnos por aparte cada herramienta, basta con esta serie de comandos para la instalacion:
apt-get install apache2
apt-get install php5
apt-get install mysql-server-5.0
apt-get install php5-mysql
apt-get install libapache2-mod-php5
apt-get install phpmyadmin
En las primeras tres lineas estan las herramientas basicas para nuestro servidor web, las otras dos son las que nos enlazaran entre ellas y la ultima es un frontend de nuestro gestor de Base de datos (este tambien se encuentra en Appserv), si todo salio bien hasta este momento podemos teclear en nuestro navegador web lo siguiente: localhost/phpmyadmin desde aqui podremos gestionar nuestro MySQL, crear usuarios, bases de datos, etc.
Interacción de las herramientas
Ahora vamos a iniciar con un pequeño ejemplo en php :
este pequeño ejemplo nos imprime 10 veces la palabra Sinergia, para detallar mas en la programación en php pueden ver esta liga.
Ahora veremos un ejemplo de coneccion a una Base de datos de MySQL, pero primero crearemos nuestra base:
y ahora el codigo para interactuar con ella:
Como vemos el procedimiento consiste en conectarnos mediante un origen (el host local en este caso), usuario (login1), y una contraseña (password1) si no hay éxito para la conección saldremos del script con un mensaje de error, en caso de que se logre la coneccion seleccionamos a que base nos conectamos (test), en seguida realizamos una consulta y mostramos cada campo en la pagina, para finalizar cerrando el flujo a la coneccion, para ahondar mas en las funciones php-mysql sirvase consultar la siguiente pagina.
apt-get install apache2
apt-get install php5
apt-get install mysql-server-5.0
apt-get install php5-mysql
apt-get install libapache2-mod-php5
apt-get install phpmyadmin
En las primeras tres lineas estan las herramientas basicas para nuestro servidor web, las otras dos son las que nos enlazaran entre ellas y la ultima es un frontend de nuestro gestor de Base de datos (este tambien se encuentra en Appserv), si todo salio bien hasta este momento podemos teclear en nuestro navegador web lo siguiente: localhost/phpmyadmin desde aqui podremos gestionar nuestro MySQL, crear usuarios, bases de datos, etc.
Interacción de las herramientas
Ahora vamos a iniciar con un pequeño ejemplo en php :
este pequeño ejemplo nos imprime 10 veces la palabra Sinergia, para detallar mas en la programación en php pueden ver esta liga.
Ahora veremos un ejemplo de coneccion a una Base de datos de MySQL, pero primero crearemos nuestra base:
y ahora el codigo para interactuar con ella:
Como vemos el procedimiento consiste en conectarnos mediante un origen (el host local en este caso), usuario (login1), y una contraseña (password1) si no hay éxito para la conección saldremos del script con un mensaje de error, en caso de que se logre la coneccion seleccionamos a que base nos conectamos (test), en seguida realizamos una consulta y mostramos cada campo en la pagina, para finalizar cerrando el flujo a la coneccion, para ahondar mas en las funciones php-mysql sirvase consultar la siguiente pagina.
Ahora veremos un ejemplo del uso de AJAX pero para no entrar frios en el tema diremos que AJAX es la unión de varias tecnologías que nos permiten realizar recargas dinámicas asíncronas de manera que no se refresque la pagina completa si no solo una parte de ella, un ejemplo es el correo electrónico GMail entre muchos mas.
El primer codigo presentado es el encargado de mostrar la pantalla inicial usando codigo HTML, Vemos que dentro del codigo php se encuentra codigo HTML desde aqui lo creamos para despues ser interpetado por el navegador ya que el codigo php nunca se vera sino unicamente el resultado de este, creamos un elemento llamado div que pasaremos por medio de javascript hacia el servior dentro de este div vemos que hay un textfield y fuera de el vemos un boton que se enlaza con una funcion javascript, notese que el codigo php puede mezclarse con el HTML siempre y cuando se haga la separacion correspondiente mediante el uso de tag .
El segundo codigo es el que nos crea la interfaz entre el cliente y el servidor, al inicio encontramos la funcion nuevoAjax que nos creara el elemento XMLHTTPrequest, la segunda funcion es la funcion Nombre en donde con ayuda del DOM hacemos uso de los elementos en HTML y obtenemos sus valores; El metodo open de nuestro objeto ajax nos da la pauta de como se enlazara de manera asincrona, a que archivo se dirijira y con que metodo de paso de parametros lo hara, en este caso POST, y le especificamos con el true que se trata de una llamada asincrona; tenemos tambien el escuchador de eventos onreadystatechange el cual se disparara en cuanto la llamada asincrona se haya realizado, de tal forma que "pegaremos" el HTML que nos mande nuestro server a nuestro div (notar que el div previamente se paso a la variable resul) y el numero 4 nos indica que la transferencia se ha terminado satisfactoriamente, con el metodo setRequestHeader enviamos el atributo Content-type indicando el contenido del archivo, por ultimo usamos el metodo send con el que enviamos como parametro el valor del textfield hacia el server, en caso de no mandar parametros pondremos null.
Ahora nos toca el ultimo archivo, es el que esta del lado del server este archivo es llamado por nuestro archivo .js mediante el metodo open se carga y con el metodo send se llama, este archivo contiene codigo HTML que es enviado a traves de php se crea una tabla y se van creando filas y columnas mediante dos for anidados dentro del segundo for usamos la variable predefinida $_POST["variable"] dicha variable nos servira para capturar la informacion enviada previamente desde nuestro codigo js y todo lo que nos arroje (con arrojar me refiero a todo lo que envie echo) este archivo se enviara al archivo js y se pegara al objeto div (recordar el manejador de eventos onreadystatechange).
El primer codigo presentado es el encargado de mostrar la pantalla inicial usando codigo HTML, Vemos que dentro del codigo php se encuentra codigo HTML desde aqui lo creamos para despues ser interpetado por el navegador ya que el codigo php nunca se vera sino unicamente el resultado de este, creamos un elemento llamado div que pasaremos por medio de javascript hacia el servior dentro de este div vemos que hay un textfield y fuera de el vemos un boton que se enlaza con una funcion javascript, notese que el codigo php puede mezclarse con el HTML siempre y cuando se haga la separacion correspondiente mediante el uso de tag .
El segundo codigo es el que nos crea la interfaz entre el cliente y el servidor, al inicio encontramos la funcion nuevoAjax que nos creara el elemento XMLHTTPrequest, la segunda funcion es la funcion Nombre en donde con ayuda del DOM hacemos uso de los elementos en HTML y obtenemos sus valores; El metodo open de nuestro objeto ajax nos da la pauta de como se enlazara de manera asincrona, a que archivo se dirijira y con que metodo de paso de parametros lo hara, en este caso POST, y le especificamos con el true que se trata de una llamada asincrona; tenemos tambien el escuchador de eventos onreadystatechange el cual se disparara en cuanto la llamada asincrona se haya realizado, de tal forma que "pegaremos" el HTML que nos mande nuestro server a nuestro div (notar que el div previamente se paso a la variable resul) y el numero 4 nos indica que la transferencia se ha terminado satisfactoriamente, con el metodo setRequestHeader enviamos el atributo Content-type indicando el contenido del archivo, por ultimo usamos el metodo send con el que enviamos como parametro el valor del textfield hacia el server, en caso de no mandar parametros pondremos null.
Ahora nos toca el ultimo archivo, es el que esta del lado del server este archivo es llamado por nuestro archivo .js mediante el metodo open se carga y con el metodo send se llama, este archivo contiene codigo HTML que es enviado a traves de php se crea una tabla y se van creando filas y columnas mediante dos for anidados dentro del segundo for usamos la variable predefinida $_POST["variable"] dicha variable nos servira para capturar la informacion enviada previamente desde nuestro codigo js y todo lo que nos arroje (con arrojar me refiero a todo lo que envie echo) este archivo se enviara al archivo js y se pegara al objeto div (recordar el manejador de eventos onreadystatechange).
y ahi lo tienen, nuestro primer ejemplo usando AJAX, espero que haya quedado al menos un poco claro.
Conclusion:
Como hemos visto el uso de los lenguajes script se van incrementando y la forma en que ellos van interactuando nos puede marear un poco al inicio y si ha esto le añadimos el manejo de la Base de Datos desde uno de ellos pues se vuelve un poco enredado, pero una vez entrando a esto, solo es cuestion de practicar.
Conclusion:
Como hemos visto el uso de los lenguajes script se van incrementando y la forma en que ellos van interactuando nos puede marear un poco al inicio y si ha esto le añadimos el manejo de la Base de Datos desde uno de ellos pues se vuelve un poco enredado, pero una vez entrando a esto, solo es cuestion de practicar.
Links:
http://www.tufuncion.com/tutorial_basico_ajax
http://www.cristalab.com/tutoriales/introduccion-a-ajax-con-php-y-formularios-c165l/
http://www.librosweb.es/ajax/capitulo7/interaccion_con_el_servidor.html
http://www.lugmen.org.ar/pipermail/lug-list/2005-May/035613.html
http://www.webestilo.com/php/php09b.phtml
No hay comentarios:
Publicar un comentario