You are on page 1of 14

Universidad Nacional de Jos C.

Paz

Taller de Desarrollo de Aplicaciones Web


Introduccin a la programacin web
Prof. Martn Miguel Machuca

Taller de Desarrollo de Aplicaciones Web


Prof. Martn Miguel Machuca

Introduccin
En la actualidad, cuando hablamos de sistemas y aplicaciones conectadas en red, predominan aquellos sistemas basados en internet y sus estndares de programacin. Los sistemas web brindan mltiples ventajas frente a las aplicaciones tradicionales, aquellas que deben ser instaladas para utilizarlas. Una de sus fundamentales ventajas es la capacidad multiplataforma: un sistema web puede ser utilizado desde una infinidad de aparatos cliente, con tecnologas distintas: PCs con Windows, Linux, Celulares, Tablets, Smartphones, Televisores, etc. Otra ventaja fundamental de las tecnologas de desarrollo web es el cdigo abierto. Los sistemas de programacin ms generalizados son de cdigo libre, no hay que pagar para poder utilizarlos. En este taller veremos cmo desarrollar una aplicacin utilizando tecnologas de libre acceso: PHP, HTML, JavaScript, Apache y MySql.

compartiera cierta informacin, estara creando un Servidor web. Otros usuarios, tambin conectados a internet, podran acceder a esa informacin a travs de sus computadoras o dispositivos mviles y programas especiales. A los sistemas que acceden a dicha informacin se los denomina Clientes. El elemento fundamental que se comparte en internet es el archivo. Un archivo puede ser un documento de texto, una imagen, una pgina HTML, una cancin, etc. Para acceder a un recurso ubicado en un servidor de internet, los usuarios deben utilizar programas llamados Navegadores. Estos navegadores (Chrome, Firefox, Internet Explorer, etc.) son sistemas que establecen la comunicacin con los servidores web, envan solicitudes y procesan las respuestas para presentarlas al usuario, generalmente en la pantalla.

El protocolo HTTP
La mayora de la informacin que obtenemos y leemos en internet viaja hasta nuestra PC a travs del protocolo HTTP. HTTP significa HyperText Transfer Protocol; Protocolo de Transferencia de Hipertexto. El Hipertexto es la caracterstica que tienen los documentos para mostrar un texto y al mismo tiempo vincularse a otros textos, tal como pasa en las pginas HTML con las palabras subrayadas o hipervnculos, que si

La Web elemental
El concepto fundamental de Internet es compartir elementos en una red de computadoras interconectadas entre s y de alcance mundial. Si alguien conectara una computadora a la red y mediante un programa especial

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

hacemos clic sobre ellos nos llevan a otra pgina. Una caracterstica importante de este protocolo de comunicacin es que, en general, la informacin se transmite en forma de texto plano, en un formato de mensaje simple y legible para las personas.

Cuando indicamos una direccin URL al navegador, este se encarga de realizar la peticin al servidor mediante el protocolo HTTP. Los pasos de una peticin son los siguientes:

- El navegador o sistema cliente enva al servidor un mensaje HTTP de solicitud o Request Cuando solicitamos el acceso a un recurso (requerimiento). en internet, por ejemplo una pgina, - El servidor recibe ese debemos escribir la direccin de ese requerimiento. Ubica el recurso recurso en el navegador. La direccin de un solicitado leyendo la URL indicada recurso en internet se llama URL: por el cliente. Localizador Uniforme de Recursos (y en - El servidor devuelve un mensaje trminos generales URI). Una direccin URL HTTP de respuesta o Response. puede tener un formato similar al siguiente: - El navegador recibe la respuesta HTTP, la interpreta y la presenta al usuario, http://www.datadominus.com.ar/documentos/tallerweb.pdf generalmente mediante la pantalla. En este ejemplo estamos accediendo a un documento en formato PDF. Generalmente accedemos a pginas HTML o PHP que son visualizadas en el momento, en la pantalla del navegador:

El Servidor
Se denomina Servidor a un equipo informtico que atiende peticiones de otros equipos conectados a l mediante una red. Un Servidor Web o Web Server es una computadora que atiende peticiones bajo el protocolo HTTP. Para que una PC funcione como Servidor Web debe tener instalado y configurado un programa especial para tal fin. Existen decenas de programas denominados servidores web, los ms conocidos son: Apache, Tomcat, Internet Information Server. Nosotros utilizaremos Apache Web Server por ser el ms utilizado en internet y fundamentalmente por ser gratuito!

http://www.unpaz.edu.ar/index.php Una direccin URL est compuesta por: - El protocolo (HTTP://) - El nombre del servidor web (www.datadominus.com.ar) - El directorio o carpeta donde se encuentra el recurso (/documentos/) - El archivo o recurso solicitado (tallerweb.pdf)

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

El servidor Apache se instala como cualquier programa y una vez en funcionamiento queda a la espera de las peticiones de los clientes. Todos los recursos del servidor (archivos) estn ubicados a partir de un directorio especial, generalmente uno llamado htdocs. Dentro de ese directorio (o carpeta) tendremos que alojar todos nuestros recursos, archivos o sistemas web que queramos compartir con los usuarios. El servidor web no solo est capacitado para enviar los archivos solicitados por los clientes. Tambin puede ejecutar programas en el equipo servidor, en el momento en que un usuario lo solicite. Esos programas son tambin llamados Scripts de servidor y generalmente devuelven un resultado en formato HTML, resultado que ser entregado al cliente que lo solicit. Un ejemplo de ejecucin podra ser el resumen de cuenta en una aplicacin bancaria. El usuario solicita, mediante su navegador, el estado de cuenta. En el servidor se ejecuta un proceso que da como resultado un listado con el resumen de cuenta. Este listado viaja devuelta al navegador cliente en formato HTML. Para acceder a un servidor web hay que indicar el nombre del equipo o su direccin IP. La direccin IP es un nmero nico que identifica a cada PC o dispositivo conectado a una red. Una direccin IP puede verse de la siguiente forma: 192.168.1.100

El Cliente
Se denomina cliente a cualquier dispositivo conectado a una red, que mediante un programa especial, un navegador web, realiza peticiones a un servidor web. En general, las peticiones se realizan mediante el protocolo HTTP. El navegador prepara un mensaje con cierta informacin, mensaje que recibir y procesar el servidor. La mayora de las veces, cuando navegamos por internet, solicitamos informacin para ver en la pantalla del navegador. Pero en algunas oportunidades tambin enviamos informacin, por ejemplo cuando llenamos un formulario con nuestros datos, cuando hacemos un comentario en alguna red social o cuando confeccionamos y enviamos un e-mail. La informacin que nosotros enviamos al servidor es empaquetada por el navegador en un mensaje HTTP, generalmente un mensaje de tipo POST. De ah la costumbre coloquial de usar la expresin postear cuando uno realiza un comentario en algn sitio, Facebook por ejemplo. Tambin en un mensaje de tipo POST se pueden enviar archivos, algo muy comn es el envo de imgenes en los sistemas web de las redes sociales, tan en auge en estos das. La informacin que proviene del servidor web, se transmite por la red como un mensaje HTTP. El navegador recibe esa informacin, la interpreta y la muestra. As podemos recibir y visualizar pginas HTML,

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

imgenes, audio y video en nuestros navegadores.

El lenguaje HTML
HTML significa HyperText Markup Language o Lenguaje de Marcas para Hipertexto. Es un lenguaje bastante sencillo, basado en texto, y mediante el uso de etiquetas y marcas se pueden definir estructuras visuales, colores, tipos de letra, imgenes, etc. Cuando vemos una pgina web en nuestro navegador podemos hacer clic derecho, Ver cdigo fuente y el navegador nos mostrar el cdigo HTML de esa pgina. Un ejemplo de cdigo HTML: El lenguaje HTML es relativamente sencillo de aprender. Haciendo uso de las etiquetas correctas se puede representar en pantalla una infinidad de estructuras visuales como listas de datos, textos con formato, ttulos, botones, listas desplegables, cajas de texto, imgenes, videos, reproducir msica y hasta animaciones y
<html> <head> <title>El primer documento HTML</title> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prcticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </body> </html>

juegos! Aprendiendo la sintaxis de HTML podremos realizar pginas web muy vistosas.

Generalmente los sistemas basados en HTML operan conjuntamente con otras tecnologas complementarias como: El lenguaje de programacin en el cliente: Javascript, hojas de estilo CSS, el lenguaje de programacin en el servidor: PHP.

Programacin en el Servidor El lenguaje PHP


PHP es el lenguaje ms utilizado para el desarrollo de todo tipo

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

de aplicaciones web, a nivel mundial. Su particular sintaxis est basada en el lenguaje padre de todos los lenguajes: El lenguaje C. Un programa escrito en PHP, tambin denominado script de servidor, puede realizar una infinidad de tareas en el servidor, tales como: Conectarse y obtener datos de una base de datos. Leer y escribir informacin en el disco rgido del servidor. Establecer conexiones con otros servidores web externos y realizar peticiones de informacin. Realizar clculos. Escribir los resultados en formato HTML, texto plano o cualquier otro formato.

Desde nuestro navegador nunca podremos ver el cdigo fuente del programa escrito en PHP, solo veremos los resultados de su ejecucin.

El motor de Base de Datos El lenguaje SQL


Todos los sistemas comerciales y la mayora de los sistemas de uso general cuentan con un repositorio de datos, y ms especficamente una Base de datos. Una base de datos sirve para organizar informacin de manera estructurada, en forma de listas estilo planillas de Excel que guardan informacin encolumnada. Las bases de datos son muy potentes a la hora de guardar grandes cantidades de datos para luego realizar bsquedas sobre ellos. Las bases de datos ms potentes son manejadas por programas gestores de datos, comnmente llamados motores de base de datos. Entre los suma es: . $resultado; motores de base de datos ms usados se encuentran: Oracle, Microsoft Sql Server, IBM DB2, MySQL, Firebird. Tambin existen archivos de bases de datos, que no son sistemas completos, como por ejemplo el caso de Microsoft Access. En un tpico sistema web, es muy probable que se necesite guardar la informacin en

Aqu podemos ver un ejemplo de cdigo PHP:


<?php $resultado = 1+1; Cuando desde el echo El resultado de la ?> navegador solicitamos al servidor una pgina PHP (ej: http://www.unpaz.edu.ar/index.php), lo que realmente estamos solicitando es que el servidor ejecute el programa escrito en PHP contenido en el archivo index.php. Luego de esa ejecucin realizada en el servidor, este nos devuelve el resultado en formato HTML. Lo que vemos finalmente en nuestro navegador es el resultado de aquella ejecucin.

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

alguna parte, para luego poder consultarla de manera efectiva. La base de datos ms utilizada en sistemas web es MySQL, que afortunadamente tambin es gratuita! Existen operaciones bsicas que nos interesarn realizar sobre nuestros datos: insertar datos, modificar datos, eliminar datos y consultar datos. Para poder realizar estas operaciones (y muchas otras) desde nuestros programas en PHP, contra la base de datos, existe un lenguaje de consultas de datos llamado SQL.. SQL significa Structured Query Languaje o Lenguaje de Consultas Estructuradas. Para poder realizar una consulta desde un programa PHP habr primero que establecer una conexin con el motor de base de datos. Luego, mediante una cadena de texto SQL, deberemos enviar nuestra consulta. Finalmente obtendramos los resultados de nuestra consulta para poder analizarlos y mostrrselos al usuario. Veamos un ejemplo de consulta SQL. Supongamos que queremos consultar la lista de alumnos que aprobaron matemtica de 5 ao. La consulta se vera as:

datos, seguramente obtendramos una lista de alumnos que cumplan con esos requisitos.

Programacin en el Cliente El lenguaje Javascript


Para el desarrollo de sistemas web existe un lenguaje muy potente: Javascript. Javascript funciona en el sistema cliente, es decir que los programas en Javascript se ejecutan en el navegador del usuario, y no en el servidor como sucede con PHP. As como un programa escrito en PHP se ejecuta en el servidor y se lo llama script de servidor, un programa escrito en Javascript se ejecuta en el cliente y se lo denomina script de cliente. Generalmente, los programas o scripts escritos en Javascript vienen embebidos en las pginas HTML. Los programas o funciones en Javascript se utilizan para extender la funcionalidad de las pginas HTML y brindar al usuario una interface ms dinmica y operativa. Un ejemplo clsico es el sistema de validacin de formularios, se trata de un programa Javascript que verifica si todos los campos del formulario fueron completados antes de enviarlo al servidor. En caso que falte completar algn dato, el programa Javascript interrumpe el envo y notifica el inconveniente al usuario. Veamos cmo se escribe un programa Javascript dentro de una pgina HTML:

SELECT * FROM Alumnos WHERE ao=5 AND materia=Matemtica AND nota >= 7 Si enviramos una consulta SQL como esta desde un programa PHP hacia la base de

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

En este ejemplo podemos observar cmo se aadi al cdigo HTML una etiqueta <script> que contiene una pequea funcin que realiza la suma de dos valores y devuelve el resultado.

<html> <head> <title>El primer documento HTML</title> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prcticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> <script> function sumar(a, b) { var resultado = a + b; return resultado; } </script> </body> </html>

de las oficinas de la empresa sin necesidad de publicarlo en internet. En el siguiente apartado veremos cmo implementar un sistema web privado o intranet.

Sistemas Web
En la actualidad la mayora de las empresas, cuando necesitan desarrollar un sistema al que accedern varios usuarios, prefieren las plataformas web frente a los sistemas tradicionales, aquellos que deben ser instalados en cada PC cliente.

Una aplicacin de ejemplo


En este taller vamos a realizar una aplicacin mnima pero completa, incluyendo una base de datos, scripts de servidor en PHP, pginas HTML y scripts de cliente en Javascript.

Programas a instalar
Como primera medida debemos conocer que programas vamos a necesitar instalar en nuestro servidor web: - Servidor web Apache - Intrprete PHP. - Motor de base de datos MySQL. Afortunadamente existe el paquete XAMPP que incluye estos tres componentes en un solo instalador. Se puede descargar de aqu:

Las ventajas son enormes. Una de las principales ventajas es la escalabilidad: un sistema web puede funcionar igualmente para 3 usuarios como para 1000 usuarios. El cambio de escala no debera afectar a un sistema web bien diseado. Tambin es un uso generalizado en las empresas tener sus sistemas web privados o Intranets, esto significa que el sistema est funcionando en una red local dentro

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/ Para administrar nuestra base de datos utilizaremos el programa Toad for MySQL: http://www.quest.com/toad-for-mysql/

Ubicacin de los archivos


Nuestra aplicacin estar ubicada en un directorio de nuestro servidor web. En este caso utilizaremos:

Finalmente, necesitaremos un editor de textos para escribir nuestros programas en PHP, HTML, Javascript, etc. Se puede utilizar cualquier editor de textos, como por ejemplo Notepad++:

c:\xampp\htdocs\tallerweb

http://notepad-plus-plus.org/download/v6.1.7.html

Nuestra aplicacin
Vamos a desarrollar un pequeo sistema web que permita a los usuarios dejar sus comentarios escribiendo en un formulario HTML y envindolo al servidor, para finalmente visualizar en una pgina central todos los comentarios realizados por los usuarios.

El Formulario HTML
Primero escribiremos la pgina HTML que mostrar el formulario para escribir los comentarios. Este formulario se podr acceder desde una PC o desde cualquier dispositivo mvil. Nuestro primer archivo se llamar index.html y lo alojaremos en el directorio antes mencionado.

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

<!DOCTYPE HTML> <html> <head> <title>Taller web</title> </head> <body> <strong>Dejenos sus comentarios</strong><br/> <form id="formulario" action="procesar_formulario.php" method="POST"> Nombre: <br/> <input type="text" name="nombre"/> <br/> e-mail: <br/> <input type="text" name="email"/> <br/> Comentario: <br/> <textarea name="comentario" id="comentario"></textarea> <br/> <input type="button" value="Enviar" onclick="validarFormulario();"/> <input type="reset" value="Limpiar"/> </form> <script> function validarFormulario(){ var formulario = document.getElementById("formulario"); var comentario = document.getElementById("comentario"); if (comentario.value!="") formulario.submit(); else alert("No puede enviar un comentario vacio."); } </script> </body> </html>

Archivo index.html

Procesando el Formulario: El script PHP


Una vez rellenado el formulario, el usuario lo enviar al servidor. El formulario define el atributo action=procesar_formulario.php. El atributo action indica que el formulario ser procesado por el archivo procesar_formulaio.php, un programa que se ejecutar en el servidor.

El archivo procesar_formulario.php tomar los datos enviados por el usuario y los grabar en una base de datos.

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

<?php //Tomamos los datos enviados por el Formulario $nombre = $_POST["nombre"]; $email = $_POST["email"]; $comentario = $_POST["comentario"]; //Nos conectamos a la base de datos $conexion = mysql_connect("localhost", "root", ""); mysql_select_db("tallerweb", $conexion); //Instruccion SQL que ser enviada al servidor de bases de datos $instruccion = "INSERT INTO comentarios (nombre, email, comentario) VALUES ('$nombre', '$email', '$comentario')"; //Enviamos la instruccion SQL que insertar un nuevo comentario //en la tabla de la base de datos. mysql_query($instruccion); mysql_close(); ?> <!DOCTYPE HTML> <html> <head> <title>Taller web</title> </head> <body> Gracias <?php echo $nombre ?> por dejarnos tu comentario! </body> </html>

Archivo procesar_formulario.php

La Base de Datos
Una vez instalado XAMPP y Toad for MySql, podremos crear y administrar bases de datos dentro de nuestra computadora. Utilizando el programa Toad for MySql, crearemos una nueva base de datos llamada tallerweb. Dentro de esta base de datos crearemos una tabla llamada comentarios.

Las tablas de base de datos son listas de datos encolumnados, conceptualmente parecidas a planillas de Excel. La ventaja fundamental de las bases de datos relacionales es la capacidad de relacionar registros de diferentes tablas y realizar consultas sobre ellas. En nuestro caso tendremos solo una tabla que contendr la informacin referida a los comentarios que hagan los usuarios de nuestra aplicacin. Las columnas o

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

campos de nuestra tabla son los siguientes: id: Campo numrico que identificar a cada registro como nico. nombre: Contendr el nombre del usuario que hizo el comentario. email: Direccin de correo del usuario. comentario: Campo de texto que contendr el comentario del usuario.

Consultando la base de datos y mostrando los resultados


Hasta el momento hemos desarrollado satisfactoriamente el mecanismo para almacenar los comentarios enviados por el usuario. Ahora solo nos resta mostrar la lista de comentarios en otra pgina HTML. Para ello crearemos un archivo PHP que consultar la base de datos, obtendr los comentarios y los devolver al cliente en formato HTML para ser visualizados.

Estructura de la tabla comentarios, usando Toad for MySQL.

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

<?php //Nos conectamos a la base de datos $conexion = mysql_connect("localhost", "root", ""); mysql_select_db("tallerweb", $conexion); //Creamos la consulta SQL $consulta = "SELECT * FROM comentarios"; //Enviamos la consulta y obtenemos el resultado. $resultado = mysql_query($consulta); ?> <!DOCTYPE HTML> <html> <head> <title>Taller web</title> </head> <body> <h1>Comentarios</h1> <br/> <?php while ($registro = mysql_fetch_array($resultado, MYSQL_ASSOC)) { echo "<hr/>"; echo "<b>Nro:</b> " . $registro["id"] . "<br/>"; echo "<b>Nombre:</b> " . $registro["nombre"] . "<br/>"; echo "<b>e-mail:</b> " . $registro["email"] . "<br/>"; echo "<b>Comentario:</b> " . $registro["comentario"] . "<br/>"; } mysql_free_result($resultado); mysql_close(); ?> </body> </html>

Archivo ver_comentarios.php

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar

El resultado final
Veamos como luce nuestra pequea aplicacin web:

procesar_formulario.php

index.html

ver_comentarios .php

Taller de Desarrollo de Aplicaciones Web Prof. Martn Miguel Machuca Universidad Nacional de Jos C. Paz martin@datadominus.com.ar www.unpaz.edu.ar