taller 5 trabajo con plantillas y uso de tecnolog a ajax n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Taller 5: Trabajo con Plantillas y uso de tecnología Ajax. PowerPoint Presentation
Download Presentation
Taller 5: Trabajo con Plantillas y uso de tecnología Ajax.

Loading in 2 Seconds...

play fullscreen
1 / 12

Taller 5: Trabajo con Plantillas y uso de tecnología Ajax. - PowerPoint PPT Presentation


  • 137 Views
  • Uploaded on

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 .

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Taller 5: Trabajo con Plantillas y uso de tecnología Ajax.' - savannah-brady


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
objetivos
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
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
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
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
Formulario de login

id="username"

id="password"

id="texto_login"

Función dologin() asignada a evento onclick

funci n dologin en javascript
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;
  • }
slide8

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

//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
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
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á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