Programacion Web

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
2/64
Contenido
1 2 3 4
3/64
Que es la Programacion Web?
Vamos a programar una aplicacion Web! Protocolo de Comunicacion Lenguajes en el Servidor Lenguajes en el cliente
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
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. ...
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)
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)
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.
9/64
Contenido
1 2 3 4
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.
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.
12/64
Contenido
1 2 3 4
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
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, ...)
15/64
Ejemplo de HTML
Vamos a ver un ejemplo generando la vista de nuestra web!
16/64
Cuerpo de la Web
HTML no tiene mas misterio. Para ver todos los tags existentes: http://www.w3schools.com/
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
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.
20/64
Descanso
Hora de descansar!
21/64
Contenido
1 2 3 4
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.
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.
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
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)
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
27/64
Constantes
No pueden modicarse Por costumbre, se nombran en mayusculas Example >> define("NOMBRE", "valor"); Example >> define("_HOLA", "Hola"); >> echo _HOLA; Hola
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
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!
30/64
Cadenas de Caracteres II
Podemos indexar una cadena mediante su ndice Example >> $cadena = "Hola!"; >> $cadena[0] = "N"; >> echo $cadena; Nola!
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
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
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
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
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
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; }
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 -
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!
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
41/64
Funciones III
Para pasar un argumento por referencia usaremos & Sintaxis >> $numero = 2; >> function cambiar(&$parametro) { .. $parametro += 1; .. } >> cambiar($numero); >> echo $numero; 3
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.
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];
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
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";
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;
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);
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");
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!
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))); [...]
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
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
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);
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 :)
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]; }
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
57/64
POO II
Con un ejemplo lo veremos mejor Clase Instrumentos Atributos Tipo, Decibelios, Generos, Escala Metodos tieneCuerdas(), setGenero(), tocarNota() Objeto Guitarra
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 } }
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
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"; } }
61/64
Instanciando la Clase
Cada objeto es independiente del resto Sintaxis $objeto = new NombreClase(); $objeto->nombreMetodo(); $objeto->atributo = valor;
62/64
Preguntas
PREGUNTAS ?
63/64
Gracias
MUCHAS GRACIAS POR VENIR :)
64/64

Programacion Web

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Programacion Web

Hochgeladen von

Copyright:

Verfügbare Formate

Curso de Programacion Web

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

23, 24 y 26 de Noviembre de 2009

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Que es la Programacion Web?

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Como instalar un Servidor Web?

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Estructura de un documento X/HTML Doctype Cabecera

Cuerpo del Documento

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

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

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

CSS (a vista de pajaro)

Veamoslo de forma practica

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

CSS (a vista de pajaro) II

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

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Nuestro Primer Script

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

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

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Numeros (enteros y otantes)

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

PHP tiene la misma sintaxis que C

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

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Incluir otros Ficheros

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Jose Ignacio Galarza, Roberto Costumero Curso de Programacion Web

Parametros por URL