Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2015-1
Qué vimos la clase pasada? 1. Fin tutorial HTML 2. Nombres de dominio 3. URLs
3 Sesión 4. Método GET - POST
Qué haremos hoy? 1. Tipos de solicitudes HTTP 2. Nombres de dominio 3. URL 4. Cookies - sesiones
Protocolo HTTP
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
Protocolo HTTP Tomado de: http://www.ntu.edu.sg/home/ehchua/programming/webprogramming/http_ Basics.html
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
Solicitud HTTP Tomado de: http://www.ntu.edu.sg/home/ehchua/programming/webprogramming/ HTTP_Basics.html
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.
Request Headers 11 Pares de valores. Ejm request-headername: requestheader-value1. Host: www.ejemplo.com User-Agent: chrome
Ejemplo una petición completa Tomado de: http://www.ntu.edu.sg/home/ehchua/programming/webprogramming/http_basics.html
Respuesta HTTP
14 Response message header HTTP-version status-code reason-phrase HTTP/1.1 200 OK Version Status HTTP/1.1 200 OK HTTP/1.0 404 Not Found HTTP/1.1 403 Forbidden Ejemplo Ejemplos status code Descripción del status code 200 OK 302Found 404Not found 500 Server error
Ejemplos status code
Response headers Pares de valores. Ejm request-headername: requestheader-value1. Ejemplo
Ejemplo respuesta http http://www.ntu.edu.sg/home/ehchua/programming/webprogramming/ HTTP_Basics.html
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?
Ver solicitudes / respuestas desde el navegador Herramientas del desarrollador - Network
Tipos de solicitudes HTTP
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
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
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.
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
Probemos Escribir el siguiente código html y ver qué ocurre
Formularios en html Practicar Modificar el texto del input y adicionar el parámetro action al formulario así: <form action="http://www.google.com/search">
Formularios en html Practicar Qué pasa cuando ingreso una URL y doy clic en enviar?
Formularios en html Practicar Qué pasa si en el formulario anterior adiciono method= post?
Introducción al lenguaje de script (PHP)
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
HTML cómo funciona?
PHP Cómo funciona?
Práctica ver petición HTTP con POST
Petición GET
Código para práctica con POST procesar.php
formulario.html
Ejemplo procesar.php para el get
HTTP es un protocolo sin estado, entonces Cómo mantener la información que ha ingresado el cliente para no preguntarla siempre?
Alternativas Cookies Objetos de sesión del lado del servidor
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.
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
Ejemplo de solicitud HTTP con las cookies El cliente hace la petición a una URL: GET / HTTP/1.1 Host: www.google.com El servidor asigna la cookie en la respuesta HTTP: HTTP/1.1 200 OK Set-Cookie: PREF=ID=c0bf5fd5c3a25209; expires=wed, 11-Jul-2012 16: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: www.google.com Cookie: PREF=ID=c0bf5fd5c3a25209 Tomado de diapositivas de: Svetlin Nakov Telerik Corporation
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
Ejemplo: autorización para usar cookies
Ver las cookies. Ejemplo en google chrome
Asignar una cookie. Ejemplo Fuente: http://webdesign.about.com/od/cookies/a/aa083198.ht m
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
Utilidad cookies ejemplo facebook Fuente: https://www.facebook.com/help/206635839404055?sr=3&query =cookies&sid=0arq4p4dwpzojgpcg
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
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.
Ejemplo más completo
Fuente: http://www.inf.udec.cl/~jlopez/dswr/cookie.html
2. Sesiones del lado del servidor
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
Objetos de sesión
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
Ejemplo id de sesión desde el cliente Recursos almacenados en el lado del cliente
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