Desarrollo y servicios web

Transcripción

1 Desarrollo y servicios web Luisa Fernanda Rincón Pérez

2 Qué vimos la clase pasada? 1. Fin tutorial HTML 2. Nombres de dominio 3. URLs

3 3 Sesión 4. Método GET - POST

4 Qué haremos hoy? 1. Tipos de solicitudes HTTP 2. Nombres de dominio 3. URL 4. Cookies - sesiones

5 Protocolo HTTP

6 Componentes básicos de la web 6 HTTP HTTP INTERNET BROWSER (HTLM) & URL Javascript, ajax, jquery UI, HTML, CSS SERVIDORES Php, Jsp, ASP. Net, Razor.net, rails, etc

7 Protocolo HTTP Tomado de: Basics.html

8 HTTP 8 Protocolo sin estado El browser y el servidor lo usan para comunicarse Principales métodos: GET Y POST Usa por defecto el puerto 80

9 Solicitud HTTP Tomado de: HTTP_Basics.html

10 Request line ( forma básica) 10 GET /foo HTTP/1.1 request-method-name request-uri HTTP-version Método Path: ruta Versión GET /test.html HTTP/1.1 POST /index.html HTTP/1.1 Ejemplos GET POST PUT DELETE.

11 Request Headers 11 Pares de valores. Ejm request-headername: requestheader-value1. Host: User-Agent: chrome

12 Ejemplo una petición completa Tomado de:

13 Respuesta HTTP

14 14 Response message header HTTP-version status-code reason-phrase HTTP/ OK Version Status HTTP/ OK HTTP/ Not Found HTTP/ Forbidden Ejemplo Ejemplos status code Descripción del status code 200 OK 302Found 404Not found 500 Server error

15 Ejemplos status code

16 Response headers Pares de valores. Ejm request-headername: requestheader-value1. Ejemplo

17 Ejemplo respuesta http HTTP_Basics.html

18 18 Ejemplo solicitud http Hacer la solicitud a la página web del w3school Cuál fue el código de respuesta? Se pueden identificar los encabezados de la respuesta? Qué salió en el cuerpo del mensaje?

19 Ver solicitudes / respuestas desde el navegador Herramientas del desarrollador - Network

20 Tipos de solicitudes HTTP

21 GET/POST GET -Envía parámetros por URL -Limite de 100 caracteres en URL -Cache -Consultar información del servidor ( archivo u otro recurso) -Sólo se permiten caracteres ASCII -Botón atrás ( no pasa nada) -Es el método por defecto POST -Enviar información desde el cliente para que sea procesada y actualice o agregue información en el servidor. -No límite de caracteres -No cache -No hay restricciones de tipos de caracteres -Botón atrás. Los datos se reenvían. Se debe advertir al usuario

22 GET/POST GET - Solicitar una página diferente - Las llamadas GET pueden ser cacheadas (historial del navegador), indexadas por buscadores, o guardar URL para ingresar directamente a alguna página. - Generalmente en links, pero no aplica siempre POST - Actualizar o insertar información en mi base de datos - Ejm: formularios - Generalmente en formularios

23 Ejemplos GET/POST Administrador de noticias: listado de las noticias con un link eliminar para borrarlas una por una. MODIFICAR BD. Método POST para no permitir por seguridad, que esa URL creada sea indexada, enviada a otra persona, guardada en favoritos, ni mucho menos ejecutada por culpa del botón atrás del navegador ya que quedaría cacheada en el historial.

24 Ejemplos GET/POST Formularios de búsquedas Método GET para permitir que funcione el botón atrás en la búsqueda y se puedan volver a cargar los datos

25 Probemos Escribir el siguiente código html y ver qué ocurre

26 Formularios en html Practicar Modificar el texto del input y adicionar el parámetro action al formulario así: <form action="

27 Formularios en html Practicar Qué pasa cuando ingreso una URL y doy clic en enviar?

28 Formularios en html Practicar Qué pasa si en el formulario anterior adiciono method= post?

29 Introducción al lenguaje de script (PHP)

30 Lenguajes de script (PHP) PHP es un lenguaje de script del lado del servidor. Otros lenguajes similares son ASP o JSP Los scripts PHP están incrustados en los documentos HTML y el servidor los interpreta y ejecuta antes de servir las páginas al cliente El cliente no ve el código PHP sino los resultados que produce

31 HTML cómo funciona?

32 PHP Cómo funciona?

33 Práctica ver petición HTTP con POST

34 Petición GET

35 Código para práctica con POST procesar.php

36 formulario.html

37 Ejemplo procesar.php para el get

38 HTTP es un protocolo sin estado, entonces Cómo mantener la información que ha ingresado el cliente para no preguntarla siempre?

39 Alternativas Cookies Objetos de sesión del lado del servidor

40 Qué son las cookies? Son una herramienta para los desarrolladores web que permite almacenar y obtener datos del usuario, desde el lado del cliente. Son un par nombre valor + fecha de expiración Sirven para Autenticación Hacer tracking de la navegación del usuario Mantener preferencias de los clientes, o sesión en carritos de compras.

41 Cuál es el flujo de cookies entre servidor y cliente? Es información que se envía del servidor al cliente. El cliente la guarda y la envía de nuevo al servidor cada vez que hace una petición

42 Ejemplo de solicitud HTTP con las cookies El cliente hace la petición a una URL: GET / HTTP/1.1 Host: El servidor asigna la cookie en la respuesta HTTP: HTTP/ OK Set-Cookie: PREF=ID=c0bf5fd5c3a25209; expires=wed, 11-Jul :13:22 GMT; domain=.google.com En nuevas peticiones el navegador entrega el valor de la cookie en la petición http: GET / HTTP/1.1 Host: Cookie: PREF=ID=c0bf5fd5c3a25209 Tomado de diapositivas de: Svetlin Nakov Telerik Corporation

43 Sobre las cookies Son sólo datos no programas de código No borran o leen información del computador del usuario Son tradicionalmente anónimas porque no contienen información personal del usuario Pueden registrar información de navegación únicamente del sitio web al que pertenecen

44 Ejemplo: autorización para usar cookies

45 Ver las cookies. Ejemplo en google chrome

46 Asignar una cookie. Ejemplo Fuente: m

47 Para que podría servir una cookie? En un sitio de votaciones, para saber si el usuario ya votó o no Guardar info de autenticación para que el usuario no tenga que autenticarse cada vez que navega Reconocer al usuario cuando vuelve al sitio

48 Utilidad cookies ejemplo facebook Fuente: =cookies&sid=0arq4p4dwpzojgpcg

49 En cuanto a seguridad Las cookies están expuestas a ser leídas y/o suplantadas por eso: NO SE DEBE ALMACENAR INFORMACIÓN CONFIDENCIAL EN LAS COOKIES

50 Establecer una cookie en javascript Se debe usar la propiedad de javascript document.cookie Si la cookie no tiene fecha de expiración no se almacena en el disco duro, sino que mantiene en la sesión del usuario Al crear una cookie, debe especificar las propiedades Name y Value. Cada una de las cookies debe tener un nombre único a fin de que después se las pueda identificar al leerlas desde el explorador.

51 Ejemplo más completo

52 Fuente:

53 2. Sesiones del lado del servidor

54 Objetos de sesión del lado del servidor Concepto abstracto para representar una serie de peticiones y respuestas HTTP entre un navegador web específico y el servidor. Los datos intercambiados se llaman datos de sesión. Tienen un session id: sirven para identificar el usuario de la sesión. Se implementan como pares de valores ( nombre, valor asociado). El session id se mantiene en el cliente por medio de cookies o campos ocultos. Sólo se envía el session id entre cliente y servidor esto no sobrecarga la red

55 Objetos de sesión

56 Cómo se establecen las sesiones? Para la sesión el servidor puede guardar algunos datos del cliente como el navegador, y la dirección ip. Identificador de la sesión cambia para cada cliente

57 Ejemplo id de sesión desde el cliente Recursos almacenados en el lado del cliente

58 Cookies Cookies vs Objetos de sesión Se almacenan en el cliente. La información es manipulable y visible. La información de la sesión la tienen los clientes ( poca carga al servidor) Se almacenan en el servidor. No tienen un límite de tamaño. La información de todos los clientes la tiene el servidor Objetos sesión