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

Taller 5: Trabajo con Plantillas y uso de tecnología Ajax. Programación 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.

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 (frontend). • C) Crear una página para visualizar los pedidos que están en el carrito de compras (frontend). • 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.

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: http://localhost/tienda/index.php • BACK-END: http://localhost/tienda/admin/index.php

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.

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

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; • }

Los datos: usuario y clave se envían en un array data a php • //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); • } • } • });

//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); • } • } • });

Sesiones en PHP: dologin.php Recibe de Ajax por método POST los datos del formulario • 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; • } 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.

Sesiones en PHP: logout() (archivo dbc.php) Inicia sesión para asegurarse de que está establecida. • functionlogout() • { • session_start(); • /************ Deletethesessions****************/ • 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"); • } Destruye la sesión y elimina los datos almacenados de la variable global $_SESSION. Redirecciona al login

Proteger páginas de usuarios no autenticados (función page_protect() archivo dbc.php) • //proteger página • functionpage_protect(){ • session_start(); • if(!isset($_SESSION['user_name'])){ • header("Location: login.php"); • exit(); • } • } Es un ejemplo muy básico de cómo comprobar si el usuario está autenticado. 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

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