Anda di halaman 1dari 64

Curso de Programacion Web

Roberto Costumero roberto@acm.asoc.fi.upm.es Jose Ignacio Galarza inaki@acm.asoc.fi.upm.es


ACM Facultad de Informatica Universidad Politecnica de Madrid

23, 24 y 26 de Noviembre de 2009

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

1/64

Contenido
1 2 3 4

Introduccion Patron MVC HTML PHP Tipos de Datos Control de Flujo Interactuando con Usuarios Ficheros Bases de Datos POO

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

2/64

Contenido
1 2 3 4

Introduccion Patron MVC HTML PHP Tipos de Datos Control de Flujo Interactuando con Usuarios Ficheros Bases de Datos POO

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

3/64

Que es la Programacion Web?

Vamos a programar una aplicacion Web! Protocolo de Comunicacion Lenguajes en el Servidor Lenguajes en el cliente

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

4/64

Protocolo de Comunicacion
Hypertext Transfer Protocol (HTTP) Especica el dialogo entre cliente-servidor Usa el puerto TCP 80 (predeterminado) Example $ telnet www.fi.upm.es 80 Trying 138.100.243.10... Connected to www.fi.upm.es. Escape character is ]. GET /index.php HTTP/1.1 Host: www.fi.upm.es

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

5/64

Lenguaje en el Servidor

Tenemos muchas alternativas: PHP La opcion mas usada. ASP La alternativa de Microsoft. Python (con Django) Una opcion muy potente. Ruby (con Rails) Fue una revolucion en su momento. ...

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

6/64

Lenguaje en el Cliente

Complementaremos las siguientes tecnologas: HTML Dene la estructura y contenido de la Web Javascript Anade dinamismo desde el navegador CSS Nos permitira crear la apariencia de la web AJAX Tecnologa muy reciente (es Javascript) DHTML Nombre comercial (HTML+JS+CSS)

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

7/64

Servidor Web

Que es un Servidor Web? Un Servidor Web es un programa que sirve paginas webs mediante el protocolo HTTP. Alternativas: Apache: La opcion mas usada actualmente. IIS: Internet Information Services, la opcion de Microsoft lighttpd: Una alternativa mas simple y mas veloz. Cherokee: Muy (muy) veloz (proyecto Espanol)

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

8/64

Como instalar un Servidor Web?

Linux / Debian / Ubuntu sudo apt-get install apache2 php5 mysql Windows Descargar el paquete WAMP e instalarlo. http://www.wampserver.com/en/ Mac OS X Descargar el paquete MAMP e instalarlo. http://www.mamp.info/en/index.html Usar el servidor que viene instalado con el SSOO.

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

9/64

Contenido
1 2 3 4

Introduccion Patron MVC HTML PHP Tipos de Datos Control de Flujo Interactuando con Usuarios Ficheros Bases de Datos POO

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

10/64

Patron Modelo-Vista-Controlador
Que es el patron Modelo-Vista-Controlador (MVC)? El patron Modelo-Vista-Controlador es un metodo de programar que esta asociado generalmente a las paginas web.

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

11/64

Patron MVC
Este patron se basa en 3 modulos bien diferenciados: Modelo: El modelo es el modulo encargado de gestionar la Base de Datos, y toda la logica interna del programa en cuestion. Vista: El modulo de vista es el encargado de mostrar los datos por pantalla. En el modulo de vista se dene el diseno visual de la aplicacion. Controlador: El modulo del controlador es el encargado de recibir los eventos que se generan en la vista, y realizar las acciones necesarias para la correcta comunicacion entre Vista y Modelo.

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

12/64

Contenido
1 2 3 4

Introduccion Patron MVC HTML PHP Tipos de Datos Control de Flujo Interactuando con Usuarios Ficheros Bases de Datos POO

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

13/64

Que es HTML?
Que es HTML? Lenguaje de marcado que dene la estructura y el contenido de una pagina web. Caractersticas: El servidor web lo manda al cliente. Es el navegador web del cliente quien lo interpreta. Archivos con extension html o htm Tenemos dos alternativas: HTML Deriva de SGML XHTML Deriva de XML

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

14/64

Estructura de un Documento

Estructura de un documento X/HTML Doctype Cabecera


Ttulo, Metas, Scripts, ... (title, meta, script, ...)

Cuerpo del Documento


Tablas, capas, ... (table, div, ...) Parrafos, Listas, ... (div, ul, ...) URLs, Enfasis, Imagenes ... (a, strong, img, ...)

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

15/64

Ejemplo de HTML

Vamos a ver un ejemplo generando la vista de nuestra web!

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

16/64

Cuerpo de la Web
HTML no tiene mas misterio. Para ver todos los tags existentes: http://www.w3schools.com/

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

17/64

CSS (a vista de pajaro)

Que es CSS? Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para denir la presentacion de un documento estructurado escrito en HTML o XML Se incluye en la cabecera del documento HTML En el head...
<link rel="stylesheet" href="arch.css" type="text/css" />

Veamoslo de forma practica

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

18/64

CSS (a vista de pajaro) II


Seleccionar elementos con CSS: nombre Se le aplica a todos los elementos del tipo .class Se le aplica a todos los elementos de esa clase #id Se le aplica al elemento con ese identicador Example p { color: #000000;} .footer {font-weight: bold;} #nav { color: #DDDDDD; } ---------------<body> <div id="nav">Inicio</div> <p class="footer">Bu!</p> </body>
Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web 19/64

Ejemplo de CSS

Vamos a ver un ejemplo de CSS aplicado a nuestra web.

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

20/64

Descanso

Hora de descansar!

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

21/64

Contenido
1 2 3 4

Introduccion Patron MVC HTML PHP Tipos de Datos Control de Flujo Interactuando con Usuarios Ficheros Bases de Datos POO

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

22/64

Caractersticas

Que es PHP? PHP es un lenguaje de programacion interpretado, disenado originalmente para la creacion de paginas web dinamicas Es un lenguaje de programacion interpretado. Es un lenguaje de tipado debil. Es multiplataforma y codigo abierto. Incluye una biblioteca de funciones enorme (http://php.net) Tiene una curva de aprendizaje muy suave.

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

23/64

Y como funciona?
El servidor Web preprocesa el archivo PHP. Ese procesado genera una salida HTML (usualmente). Esa salida HTML se manda al cliente.

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

24/64

Nuestro Primer Script

Se abre y cierra las etiquetas del lenguaje. Se situa el chero en un lugar publico del servidor web. Se ejecuta el chero desde el navegador web. Como creo un Script? <?php echo "<strong>Hola Mundo</strong>"; ?> Con una Demo lo veremos mucho mas claro

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

25/64

Tipos de Datos

PHP tiene los siguientes tipos de datos: Int Numeros enteros Float Numeros en coma otante String Cadenas de caracteres Matrices Arrays de elementos Objetos Pues eso, objetos (POO)

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

26/64

Variables

Se declaran al vuelo Son de tipado debil Se preceden por el smbolo $

Example >> $variable = 1; >> $variable = "ha!";

Example >> $var1 = 4; >> $var2 = 6; >> echo $var1 + $var2; 10

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

27/64

Constantes

No pueden modicarse Por costumbre, se nombran en mayusculas Example >> define("NOMBRE", "valor"); Example >> define("_HOLA", "Hola"); >> echo _HOLA; Hola

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

28/64

Numeros (enteros y otantes)

Operaciones basicas >> echo 1+1; 2 >> echo 5 / 2; 2.5 >> echo 5.0 / 2; 2.5 >> echo (abs(-3) * 3); 9

Funciones matematicas >> echo sqrt(4); 4 >> echo log(100, 10); 2 >> echo pi(); 3.14159265359

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

29/64

Cadenas de Caracteres I
Con comillas dobles se interpreta el contenido Con comillas simples se imprime literalmente El caracter de concatenacion es el punto .

Example >> $var = "Mundo!"; >> echo "Hola $var\n"; Hola Mundo! >> echo Hola $var\n; Hola $var\n >> echo strlen("Hola"); 4

Example >> $var1 = "Hola "; >> $var2 = "Mundo!"; >> echo $var1 . $var2; Hola Mundo!

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

30/64

Cadenas de Caracteres II

Podemos indexar una cadena mediante su ndice Example >> $cadena = "Hola!"; >> $cadena[0] = "N"; >> echo $cadena; Nola!

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

31/64

Matrices

Pueden contener elementos de distinto tipo Se accede a ellas mediante su ndice Sintaxis array (clave => valor); Example >> $matriz = array("Primero", 2, array(2008)); >> echo $matriz[2][0]; 2008

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

32/64

Matrices II

El ndice no tiene por que ser numerico Los ndices no tienen que ser del mismo tipo Que es X variable? var dump() Example >> $matriz = array(2 => "Manuel"); >> $matriz["Nombre"] = "Pepe"; >> echo $matriz["Nombre"]; Pepe >> echo $matriz[2]; Manuel

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

33/64

IF

PHP tiene la misma sintaxis que C

Sintaxis if (condicion) { verdad_1; }else if(cond2){ verdad_2; } else { falso; }

Example >> $llave = "azul"; >> if ($llave == "azul") { .. echo "Es Azul"; .. } else { .. echo "Ni idea"; .. } Es Azul

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

34/64

SWITCH
Muy parecido al IF

Sintaxis switch($var) { case valor1: cuerpo1; break; case valor2: cuerpo2; break; default: cuerpo3; }

Example >> $llave = "azul"; >> switch($llave) { .. case "azul": .. echo "Es Azul"; .. break; .. default: .. echo "Ni idea"; .. } Es Azul

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

35/64

FOR

Sintaxis for (desde, hasta, inc) { cuerpo; } Example >> for ($i = 0; $i < 10; $i++) { .. echo $i . " "; .. } 0 1 2 3 4 5 6 7 8 9

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

36/64

WHILE
Exactamente igual que el while de cualquier lenguaje En PHP tambien tenemos break y continue Sintaxis while (condicion) { cuerpo; } Example while (true) { null; }

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

37/64

FOREACH
Sirve para iterar unicamente sobre matrices Sintaxis foreach ($matriz as $var) { cuerpo; } Example
$matriz = array("Nombre" => "Paco", "Piso" => "Segundo"); >> foreach($matriz as $llave => $valor) { .. echo $llave . " " . $valor . " - "; .. } Nombre Paco - Piso Segundo -

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

38/64

Incluir otros Ficheros


include Intenta importarlos. require Si no lo importa, da error. Sintaxis include("ruta"); require("ruta"); include_once("ruta"); require_once("ruta"); Example >> echo "Hola Mundo!"; --------include("saluda.php"); Hola Mundo!

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

39/64

Funciones
Los argumentos se pasan siempre por valor Para retornar un valor se usa return Sintaxis function nombre($args) { cuerpo; } Example >> function sumar($num1, $num2) { .. return $num1 + $num2; .. } >> echo sumar(3, 4); 7
Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web 40/64

Funciones II

Podemos dar valores predeterminados a los argumentos Sintaxis >> function saluda($nombre = "Paco") { .. echo "Hola " . $nombre; .. } >> saluda("Pepe"); Hola Pepe >> saluda(); Hola Paco

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

41/64

Funciones III

Para pasar un argumento por referencia usaremos & Sintaxis >> $numero = 2; >> function cambiar(&$parametro) { .. $parametro += 1; .. } >> cambiar($numero); >> echo $numero; 3

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

42/64

Variables Superglobales

Para comunicarnos con los usuarios tenemos varios metodos: Formularios Parametros pasados por URL Cookies Sesiones PHP se encarga de crear matrices superglobales desde las que poder acceder a esos datos. Estas matrices son accesibles desde cualquier lugar.

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

43/64

Formularios

Se usa la matriz superglobal $ POST[] Cada campo del fomulario sera un elemento de la matriz Sintaxis echo <form method="post" action="/"> <input type="text" name="nombrePersona" /> </form>; echo Tu nombre es: . $_POST[nombrePersona];

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

44/64

Parametros por URL

Se usa la matriz superglobal $ GET[] Cada variable sera un elemento de la matriz URL: archivo.php?var1=valor&var2=valor&var3=. . . archivo.php?nombrePersona=Paco&anyos=15 echo Tu nombre es: . $_GET[nombrePersona] . y tienes . $_GET[anyos] . aos; n

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

45/64

Cookies

Para crear una cookie usaremos setcookie() Se usa la matriz superglobal $ COOKIE[] Sintaxis setcookie("nombre", "valor", duracion); Example
if (!isset($_COOKIE[contador])) setcookie("contador", 0, time()+3600); else setcookie("contador", $_COOKIE[contador]+1); echo "Has estado aqu " . $_COOKIE[contador] . "veces";

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

46/64

Sesiones

Para crear/recuperar la sesion usaremos session start() Se usa la matriz superglobal $ SESSION[] Sintaxis session_start(); Example
session_start(); $_SESSION[veces]++; echo Has estado aqu . $_SESSION[veces] . veces;

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

47/64

Apertura y Cierre

Para manejar cheros deberemos de hacer lo siguiente: Abrir el chero con algun modo (lectura, escritura, ...). Realizar la operacion (lectura, escritura, despl, ...). Cerrar el chero. Abrir/Cerrar un chero >> $fichero = fopen("ruta", "modo"); >> $fichero = fopen("/etc/passwd", "r"); >> fclose($fichero);

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

48/64

Leyendo Ficheros
Tenemos varios metodos de lectura: fread($descriptor, $longitud) Lee size caracteres fgets($descriptor) Lee una lnea del chero le($chero) Lee el chero entero metiendolo en una matriz Example >> $fichero = fopen("/etc/passwd", "r"); >> echo fgets($fichero); [...] >> $matriz = file("/etc/passwd");

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

49/64

Escribiendo Ficheros

Para escribir contenido en un chero: Hemos de haber abierto el chero en modo escritura fwrite($descriptor, $valor) Escribe en el chero el contenido Example >>> $fichero = fopen("hola.txt", "r+"); >>> fwrite($fichero, "Hola Mundo!"); >>> fseek($fichero, 0); >>> echo fgets($fichero); Hola Mundo!

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

50/64

Serializando Estructuras

Podemos guardar una estructura en un chero. Usaremos serialize y unserialize Example >>> $matriz = array(2, "Hola Mundo"); >>> $archivo = fopen("archivo", "r+"); >>> fwrite($archivo, serialize($matriz)); >>> fseek($archivo, 0); >>> echo var_dump(unserialize(fgets($archivo))); [...]

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

51/64

Que es una base de datos?

Ques un SGBD? Existen programas denominados sistemas gestores de bases de datos, abreviado SGBD, que permiten almacenar y posteriormente acceder a datos de forma rapida y estructurada. Tenemos varias opciones: MySQL Opcion libre y muy usada Oracle Gestor de pago y muy completo SqlLite Muy simple (no necesita de servidor) PostgreSQL Alternativa a MySQL

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

52/64

Por que usar MySQL?

Se puede usar multitud de motores de almacenamiento (MyISAM, InnoDB, ...) Puede albergar una cantidad ingente de datos. Es un SGBD (Sistema de Gestion de Bases de Datos) relacional Es codigo abierto (semi-libre) y multiplataforma. Usa como lenguaje de acceso, SQL

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

53/64

Como realizar una conexion

Primero deberemos de conectarnos con el servidor MySQL A continuacion seleccionaremos la base de datos Apunte: El servidor sera usualmente localhost Example
$conexion = mysql_connect("servidor, "usuario", "pass"); $db = mysql_select_db("base_de_datos", $conexion);

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

54/64

Como ejecutar una query

Usaremos la funcion mysql query La query debera de estar escrita en SQL En resumen: SELECT, INSERT, UPDATE, DELETE Ejemplos
$q $q $q $q = = = = mysql_query(SELECT mysql_query(INSERT mysql_query(UPDATE mysql_query(DELETE * FROM tabla); INTO tabla VALUES ("uno", ...)); tabla SET campo1="valor", ...); FROM tabla WHERE cond="valor");

Hay que aprender SQL, lo siento :)

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

55/64

Operar con el resultado


Tenemos varias opciones: mysql fetch row Mapea en una matriz (ndices numericos) mysql fetch assoc Mapea en una matriz asociativa mysql fetch object Mapea en un Objeto Ejemplos
$q = mysql_query(SELECT campo1, campo2 FROM tabla); while ($fila = mysql_fetch_assoc($q)) { echo $fila["campo1"] . $fila["campo2"]; } while ($fila = mysql_fetch_row($q)) { echo $fila[0] . $fila[1]; }

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

56/64

POO

Que es eso de la POO? Programacion Orientada a Objetos Un nuevo paradigma de la programacion Esta orientado a modelizar el problema Pues sigo sin enterarme de nada... Clases Nuevo Tipo de Dato Atributos Estado interno de la clase Metodos Dene el comportamiento de la clase Objetos Instanciacion de una clase

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

57/64

POO II
Con un ejemplo lo veremos mejor Clase Instrumentos Atributos Tipo, Decibelios, Generos, Escala Metodos tieneCuerdas(), setGenero(), tocarNota() Objeto Guitarra

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

58/64

POO en PHP
El constructor se llama construct El puntero de autoreferencia es $this Sintaxis class Nombre { function __construct() { echo "Soy el constructor"; } function nombreMetodo() { echo "Soy un mtodo"; e } }

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

59/64

Encapsulacion

Tenemos tres estados: public, private y protected Los metodos que no tengan denido uno seran publicos Sintaxis class nombreClase { private $nombreVar = 0; protected function metodo() { echo "Soy un mtodo protegido"; e } } >> $objeto = new nombreClase(); >> $objeto->metodo(); -> ERROR

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

60/64

Herencia

Se usa la palabra reservada extends Para referirnos a la clase base podemos usar parent:: Sintaxis class claseBase { protected $bu = 0; } class nombreDerivada extends claseBase { function __construct() { echo "Soy el constructor 2"; } }

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

61/64

Instanciando la Clase

Cada objeto es independiente del resto Sintaxis $objeto = new NombreClase(); $objeto->nombreMetodo(); $objeto->atributo = valor;

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

62/64

Preguntas

PREGUNTAS ?

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

63/64

Gracias

MUCHAS GRACIAS POR VENIR :)

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

64/64