Creación de una tienda en linea 5: crear categorías


Captura de pantalla 2013-10-04 a la(s) 23.17.01

Las funciones principales de todo sistema son altas,bajas,cambios y consultas, así que comenzaremos a crear el backend a partir de estas funciones, lo primero sera crear el modulo en el que daremos de alta a las categorías ya que este dato es necesario para poder dar de alta a los productos.

Una parte muy importante del trabajo del programador es la organización, por lo que para mantener todos los archivos que pertenecen a un mismo modulo unido los numeraremos, de tal forma que este modulo tendrá dos archivos 01creacat.php y 01guardar.php, de esa forma ambos estarán juntos al listar los archivos y será mas fácil dar mantenimiento al sistema.

Comencemos con la interfaz, la cual esta en 01creacat.php

categorias

como podemos observar, lo primero fue validar el acceso(lineas 1 a 7), código que copiamos del menú y que es importante verificar en todos los módulos, para protegernos de un acceso directo al modulo, ya que si alguien conoce el nombre de los archivos puede tratar de escribir la URL del archivo y saltarse la petición de usuario y contraseña.

En las lineas 17, 20 y 27, definimos capas que servirán para darle forma a todo el sistema, la capa de menú de momento solo tiene un enlace al menú principal ya que aunque el sistema funciona en el navegador, no debemos dejar todo el trabajo del mismo en el navegador, ademas servirá para c colocar mas opciones a futuro; la capa de «datos» la usaremos para colocar los formularios donde pediremos o mostraremos información y finalmente la capa mensajes, que es donde colocaremos los mensajes que informan sobre como resultaron las operaciones.

Es importante que una vez que se define la estructura de la interfaz, esta se mantenga en todos los módulos de ser posible para facilitar el mantenimiento del sistema y que el desarrollo sea mas rápido y ágil.

En la linea 21 comenzamos a crear un formulario, el cual no tiene el atributo action, esto porque usaremos AJAX para enviar la información a un PHP que hara todo el trabajo.

Siguiendo el modelo de HTML5, el comportamiento del sistema estará en un archivo javascript al que llamaremos librería.js, esto nos ayudara a colocar todo el comportamiento en funciones que serán llamadas desde un solo archivo, el enlace a ese archivo esta definido en la linea 13; como podemos ver, el boton que colocamos en el formulario llama a una función javascript llamada «guardara()», la cual esta en el archivo librería.js y que vemos a continuación.

Captura de pantalla 2013-10-05 a la(s) 01.08.56

En la imagen de arriba tenemos la función guardar, comenzamos en la linea 4, usando el DOM, para obtener acceso al contenido del cuadro de texto donde se escribió la categoría, después en la linea 5, revisamos que tenga algo escrito, esto para no enviar datos incompletos o tratar de guardar un dato nulo en la base de datos, si hay información en cuadro de texto, colocamos en la variable cadena, la secuencia de datos a enviar, que recordemos debe llevar el siguiente orden:

varible1=valor

donde:

  • variable1 es el nombre con el que mandaremos la información al otro PHP en el arreglo & POST
  • valor es el dato que vamos a mandar.

De las lineas 9 a la 14 estamos creando la variable donde se almacenara la respuesta que nos de el PHP, parece algo complicado pero se debe a que debemos usar estructuras de control de errores como try y cath para crear dicha variable, dado que algunos navegadores no siguen la forma estandar de crear la variable de AJAX (si, si estamos hablando de IE)

En las lineas 15 al 21, creamos la función anónima que se encargara de presentar la información en la capa de mensaje.

En la linea 24 usamos el metodo open de nuestro objeto AJAX para abrir el archivo 01guardar.php, para enviarle la información con el método POST, en la siguiente linea vemos que se llama a setRequestHeader, que es la instrucción que se encargara de codificar al formato URL la información que vamos a enviar.

En la ultima linea invocamos al metodo send (linea 26) para enviar la variable que denominamos cadena, por lo que una vez definida la función AJAX para el envío vamos a ver que ocurre en el 01guardar.php

Captura de pantalla 2013-10-06 a la(s) 01.15.26

El AJAX que creamos en el archivo javascript envia la información al PHP en la variable cadena, que contiene «categoria=»+texto.value, que como fue enviado con el metodo POST, el PHP lo recibe en el arreglo $_POST, que como vemos en la linea 3 de la imagen anterior copiamos el valor a una variable llamada $cadena, esto con el fin de hacer mas simple la construcción de las consultas.

La secuencia basica de todo programa de altas es la siguiente

  1. Verificar si el dato existe
  2. si existe informar de ello
  3. si no existe generar la clave (esto solo si no se pidió)
  4.  almacenar los datos.
  5. Verificar que se almacenaron
  6. Si no se almaceno avisar del error
  7. Si se almaceno informarlo.

En la linea 4 del PHP creamos la consulta que verifica si existe una categoría con ese nombre en la tabla de categoría, en la linea 6 usamos «mysqli_num_rows que devuelve el numero de registros que se obtuvieron de una consulta select, en la linea 8 verificamos si se obtuvieron cero registros.

Como no existe, en la linea 9, usamos una consulta con la función «count» para saber cuantos registros hay en la base de datos, después de obtener el dato, observe que en la linea doce sumamos 1 a la cantidad de registros que obtuvimos y la usamos en la 14 para crear una consulta de inserción (insert into) en la que almacenamos el numero de categoría y el nombre de la categoría.

En la linea 16 usamos mysqli_affected_rows, que es una función que devuelve el numero de registros que se vieron afectados por una consulta insert, delete o update, en la base de datos, con ese dato verificamos que la consulta logro insertar el registro, si el valor es mayor que cero, usamos la instrucción echo para presentar un mensaje de confirmación y un mensaje de error en el caso contrario, ambos mensajes se presentaran en la capa de «mensajes» que creamos en nuestra pagina web.

2 Comments

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.