1 / 12

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 .

Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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 (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.

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

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

  9. //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 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.

  11. 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

  12. 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

More Related