Taller 5: Trabajo con Plantillas y uso de tecnología Ajax.

Presentación del tema: "Taller 5: Trabajo con Plantillas y uso de tecnología Ajax."— Transcripción de la presentación:

1 Taller 5: Trabajo con Plantillas y uso de tecnología Ajax.
Programación 2

2 Objetivos 1. Continuar con la creación de páginas para actualizar y visualizar información a través de php usando plantillas web basadas en html5, css3 y js. 2. Usar la tecnología Ajax para los procesos de insertar, actualizar y eliminar información.

3 Orientaciones 1. Dada la plantilla suministrada, tomando como guía las páginas de agregar y administrar productos y usuarios: A) Actualizar la página detalles para que al hacer click en un producto se muestre en detalles toda la información del producto. B)Cree una página para guardar los pedidos (Agregar al carrito) a partir de listar los productos en la página principal (front end). C) Crear una página para visualizar los pedidos que están en el carrito de compras (front end). D) Crear una página en el backend para administrar los pedidos (tomar de base las páginas de productos). E) Crear una página en el backend para administrar las entregas (tomar de base las páginas de productos). F) Investigar cómo subir fotos al servidor y guardar ruta en la base de datos para los productos.

4 Plantilla suministrada
Se adjunta sitio web con avances en los formularios de ingresar al sitio (login), ingresar y administrar usuarios, e ingresar y actualizar productos. El código ha sido comentado para explicar cada uno de los pasos. FRONT-END: BACK-END:

5 Proceso de Login y Sesiones en PHP usando tecnología AJAX
A continuación se detallan las ventanas y procesos para realizar un login básico en una web con php y Ajax.

6 Formulario de login id="username" id="password" id="texto_login"
Función dologin() asignada a evento onclick

7 Función dologin() en javascript
//leer los datos de los controles del formulario mediante jquery usando los selectores: $(‘#id_objeto’) usuario = $('#username').val(); clave = $('#password').val(); //comprobar campos llenos: validación if(usuario=='' || clave==''){ $('#texto_login').html('Por favor ingrese nombre de usuario y clave'); return false; }

8 url:'ajax_php/dologin.php', //Url a donde la enviaremos
//enviar a ajax los datos para que php los procese $.ajax({ url:'ajax_php/dologin.php', //Url a donde la enviaremos type:'POST', //Método que usaremos data: { usuario: usuario, clave: clave }, success: function(data) { //$('#texto_login').html(data); if(data=='dologin'){ //si estan correctos el nombre de usuario y clave //envia el texto "dologin" window.location.assign("index.php"); } else { //si devuelve error se imprime en una capa con id "texto_login" $('#texto_login').html(data); }); Los datos: usuario y clave se envían en un array data a php

9 //si se autenticó bien imprimimos en php “dologin”
//enviar a ajax los datos para que php los procese $.ajax({ url:'ajax_php/dologin.php', //Url a donde la enviaremos type:'POST', //Metodo que usaremos data: { usuario: usuario, clave: clave }, success: function(data) { //si se autenticó bien imprimimos en php “dologin” // Ajax recibe el texto “dologin” por Ajax en la variable data if(data=='dologin'){ //si están correctos el nombre de usuario y clave //envía el texto "dologin“ y acá redireccionamos a index.php window.location.assign("index.php"); } else { //si devuelve error se capta en la variable data se imprime en una capa //con id "texto_login" $('#texto_login').html(data); });

10 Sesiones en PHP: dologin.php
include '../dbc.php'; $usuario = $_POST['usuario']; $clave = $_POST['clave']; $consulta = mysql_query("SELECT * FROM usuarios WHERE user_name='$usuario' AND pass='$clave'"); $result = mysql_fetch_array($consulta); $usuario_r = $result['user_name']; $clave_r = $result['pass']; $id = $result['id']; $full_name = $result['full_name']; if($usuario_r=='' && $clave_r==''){ echo '<p>Usuario o Clave Incorrectos</p>'; } else { echo 'dologin'; //iniciar sesión en php session_start(); $_SESSION['user_id'] = $id; $_SESSION['user_name'] = $usuario_r; $_SESSION['full_name'] = $full_name; Recibe de Ajax por método POST los datos del formulario Ejecuta la consulta y guarda los resultados en un array Si las variables no están vacías el usuario y clave están corrrectos Aquí se imprime “dologin” es un texto cualquiera que se envía al cliente para informar al usuario si hubo un error La función sessión_start() de php inicia sesión y las variables globales de PHP $_SESSION[] almacenan los datos del usuario.

11 Sesiones en PHP: logout() (archivo dbc.php)
function logout() { session_start(); /************ Delete the sessions****************/ unset($_SESSION['user_id']); unset($_SESSION['user_name']); unset($_SESSION['user_level']); unset($_SESSION['HTTP_USER_AGENT']); session_unset(); session_destroy(); header("Location: login.php"); } Inicia sesión para asegurarse de que está establecida. Destruye la sesión y elimina los datos almacenados de la variable global $_SESSION. Redirecciona al login

12 Proteger páginas de usuarios no autenticados (función page_protect() archivo dbc.php)
Es un ejemplo muy básico de cómo comprobar si el usuario está autenticado. //proteger página function page_protect(){ session_start(); if(!isset($_SESSION['user_name'])){ header("Location: login.php"); exit(); } Inicia sesión para asegurar que el usuario está autenticado Comprueba si la variable global almacena el user_name (aquí puede usarse cualquier valor almacenado del usuario que guardamos en dologin.php) Si devuelve falso entonces redirecciona a la página login.php