MANUAL DE REFERENCIA DE PHP

PARTE 3

CRUD O MANTENIMIENTO A TABLAS DEPENDIENTES EN UNA BASE DE DATOS

RELACIONAL
Contenido
OBJETIVO DE ESTE DOCUMENTO ........................................................................................................ 3
DEVOLVER LOS DATOS A LA VISTA HTML A TRAVÉS DE LA TECNOLOGÍA AJAX.................................. 5
SUBIR Y GUARDAR LA IMAGEN EN EL PROYECTO Y MOSTRARLA EN LA VISTA .................................. 6
METODOS JQUERY Y USO DE AJAX PARA MANEJAR LAS FUNCIONES DE MANERA DINÁMICA ......... 8
VISTA HTML PARA MOSTRAR LA LISTA DE ARTICULOS PAGINADOS CON DATATABLES .................. 10
HTML DEL BOTON PARA AGREGAR REGISTROS EN LA TABLA ARTICULO ......................................... 11
CONFIGURAR LA LISTA DEPENDIENTE “CATEGORIA” EN LA ETIQUETA <SELECT> Y CREAR
ARTICULOS ........................................................................................................................................ 13
EDITAR ARTICULOS ............................................................................................................................ 15
USAR CODIGO DE BARRAS ................................................................................................................ 17
IMPRIMIR CODIGO DE BARRAS ......................................................................................................... 19
“RETOQUES”...................................................................................................................................... 20
GLOSARIO .......................................................................................................................................... 21
 OBJETIVO DE ESTE DOCUMENTO

La tabla “Articulo” es una tabla dependiente (hija) de la tabla “categoria”, por

tanto, el principal reto es mostrar las categorías activas en una lista desplegable,
donde el usuario se limitará a seleccionar un dato y por programación debemos
garantizar que se guarde el código de la categoría en la tabla “articulo”.

Importante saber acerca del uso de algunos campos de la tabla “articulo”:

✓ El campo “idarticulo” (llave primaria) debe set AUTO_INCREMENT.

✓ El campo “código” se usará para guardar el código de barras del producto
en formato texto, pero la idea es que al final se mostrará en formato imagen.
✓ El campo “condicion”, cumplirá la misma función que en la tabla
“categoría”.
✓ El campo “imagen” guardará el nombre del archivo que seleccionará el
usuario y su extensión. Ejemplo: camisa00023.jpg

La interface para la tabla artículo es la misma que se trabajó para la tabla

categoría, solo que al agregar o editar un artículo se debe mostrar la lista
desplegable con el nombre de las categorías, como se muestra a continuación:

Al igual que en la tabla “categoria” no se debe permitir nunca eliminar registros,

sino que se van a activar o desactivar según sea el caso a través del campo
condición (1 activa, 0 desactiva), la tabla articulo también usa el mismo método.
 METODOS PARA LA TABLA (CLASE) ARTICULO

Los métodos que permitirán realizar el mantenimiento a los datos de la tabla

“articulo”, son los mismos que usamos en la tabla “categoría”, por tanto, se puede
reutilizar dicho código, para ello se debe:
1. Crear el archivo “Articulo.php” dentro de la carpeta “modelos”.
2. Copiar el código de la clase “Categoria” al archivo creado anteriormente.
3. Adaptar o ajustar el código para que aplique a la tabla “articulo”. Lo único
<<diferente>> es la consulta del método “listar”, debido a que la idea es
mostrar los artículos con el nombre de la categoría de cada uno de ellos;
por tanto, se debe crear un SELECT que muestre el nombre de la categoría
y cada campo de la tabla artículo.
¡Por favor construya y pruebe dicha consulta en el motor de la base de datos
y cuando funcione la copia y la pega dentro del método “listar”!
 DEVOLVER LOS DATOS A LA VISTA HTML A TRAVÉS DE LA
TECNOLOGÍA AJAX

Reutilizar el código del archivo “categoría.php” que se encuentra en la carpeta

“ajax”.

1. Crear dentro de la carpeta “Ajax” el archivo “articulo.php”.

2. Copiar el código de “categoría.php” al archivo creado anteriormente.
3. Adaptar o ajustar el código para que aplique a la tabla “articulo”.
Solamente tenga en cuenta lo siguiente para mostrar los datos en pantalla
a través del Case listar:
 SUBIR Y GUARDAR LA IMAGEN EN EL PROYECTO Y MOSTRARLA EN
LA VISTA
El objetivo es poder guardar en el proyecto la imagen seleccionada por el usuario.

1. Abrir el archivo “articulo.php” guardado en la carpeta “ajax”.

2. Ubicarse dentro de la opción “guardaryeditar”, para agregar el siguiente
código para poder validar que el archivo seleccionado por el usuario si se
trata de una imagen y no de un formato diferente.
Asegurarse tener creada la carpeta donde se van a guardar las imágenes,
la cual corresponde a: files/artículos
El código para lograr lo anterior es:

3. Finalmente, la idea no es mostrar el nombre del archivo de la imagen, sino,

la imagen en una etiqueta img con un tamaño de 50px por 50px, para ello,
se debe realizar un ajuste en el arreglo listar, donde se hace referencia a la
imagen, quedando así:
 METODOS JQUERY Y USO DE AJAX PARA MANEJAR LAS FUNCIONES
DE MANERA DINÁMICA
Reutilizar el código del archivo “categoría.js” que se encuentra en la carpeta
“vistas/scripts/”.

1. Crear dentro de la carpeta vistas/scripts/ un archivo llamado “articulo.js”.

2. Copiar el código de “categoria.js” al archivo creado anteriormente.
3. Adaptar o ajustar únicamente el contenido de la función “limpiar”, como se
muestra en la siguiente imagen:

4. Adaptar la URL de la función “listar” y “guardaryeditar”, la cual debe

redirecciona al archivo “articulo.php”.
5. Asegurarse que la función “mostrar”, quede de la siguiente manera:
6. Asegurarse que la función “desactivar”, quede de la siguiente manera:

7. Adaptar la función “activar” de la misma manera que quedo ajustada la

función “desactivar”.
VISTA HTML PARA MOSTRAR LA LISTA DE ARTICULOS PAGINADOS
CON DATATABLES
1. Crear la vista para poder gestionar los datos de la tabla “articulo”.
2. Crear dentro de la carpeta “vistas” el archivo “articulo.php”
3. Copiar el contenido de la vista “categoría.php” al archivo “articulo.php” y
adaptarlo según corresponda, excepto las líneas de código HTML que están
dentro de la etiqueta <form>, estas se ajustarán más adelante en otra
sección de este documento.
4. Ingresar al menos un articulo desde la base de datos, teniendo en cuenta
que el dato del campo “imagen” es el nombre de la imagen y su extensión;
ejemplo: camisa001.jpg y por ende este archivo debe estar guardado en la
ruta: “…\files\articulos”, de acuerdo a la codificación que se ha venido
realizando relacionada con la imagen.
5. Ahora realizar una prueba, para verificar que se muestre el listado de los
artículos de manera correcta. Debe observar algo como lo siguiente:

NOTA: En caso de no tener registrado ningún artículo en la base de datos,

debe mostrarle “No existen datos”, si muestra la palabra “Loading…”, hay
que revisar el código porque eso indica que algo está fallando.
 HTML DEL BOTON PARA AGREGAR REGISTROS EN LA TABLA
ARTICULO

1. Abrir el archivo “articulo.php” de la carpeta “vistas”.

2. Ubicarse dentro de la etiqueta <form>, para adaptar los controles del
formulario de acuerdo a los campos de la tabla artículo, es decir, 6 cajas,
una por cada campo. Los botones de guardar y cancelar quedan igual
como se manejo con la vista de categoría. Quedando el código del
formulario de la siguiente manera:

3. Ahora realizar una prueba, para verificar que se muestre el formulario

preparado para agregar artículos de manera correcta. Debe observar algo
como lo siguiente:
NOTA: La lista desplegable de las categorías y la generación del código de barras
se hará más adelante en otra sección de este documento.
CONFIGURAR LA LISTA DEPENDIENTE “CATEGORIA” EN LA ETIQUETA
<SELECT> Y CREAR ARTICULOS

Para lograr mostrar los datos de una tabla en una lista desplegable se va a usar la
librería bootstrap-select, a pesar de que se puede descargar esta se encuentra
dentro de la carpeta “maquetación del sitio” entregada anexa al manual de
referencia - parte 2.

1. Agregar o verificar la referencia del archivo css en el header.

2. Agregar o verificar la referencia del archivo js en el footer.
3. Abrir el archivo “Categoria.php” ubicado en la carpeta “modelos”, con el
objetivo de codificar un método que permita realizar la consulta de todos
los campos de todas las categorías activas. Este nuevo método lo vamos a
llamar “select”.
4. Abrir el archivo “articulo.php” ubicado en la carpeta “ajax”, con el objetivo
de agregar una opción más al switch que permita obtener la lista de las
categorías consultadas a través del método select. Este código va después
de la opción “listar”, pero lógicamente antes de cerrar el switch:

5. Abrir el archivo “articulo.js” ubicado en la carpeta “vistas/scripts” y dentro

de la función init se enviará la orden de ejecutar el código anterior;
quedando finalmente la función init así:

6. Abrir el HTML (vistas) de articulo, ubicarse en la etiqueta select para agregar

el valor se selectpicker al atributo class con el fin de aplicarle estilo
bootstrapy agregar el atributo data-live-search con valor de true para
poder hacer filtrados en la lista desplegable. Quedando así:
 7. Ahora realizar una prueba, para verificar que se muestre la lista desplegable
de categoría en el formulario preparado para agregar artículos de manera
correcta. Debe observar algo como lo siguiente:

Como se puede observar, la lista muestra las categorías que estén activas. Realizar
pruebas al respecto.

8. Crear un artículo, con el propósito de probar el código hasta este punto.

Tener en cuenta que, al seleccionar la imagen, esta debe estar ubicada en
cualquier parte del equipo, la aplicación por si sola toma el archivo lo copia
en la ruta “…/files/artículos” y guarda en el campo el nombre y extensión
de la imagen, por tanto, se recomienda que el nombre del archivo no sea
extenso, ni contenga caracteres especiales o espacios. ¡Lo de siempre!

Ejemplo de la prueba anterior:

 EDITAR ARTICULOS

Si se intenta probar la opción “Editar”, se observa que la lista desplegable de la

categoría no muestra la categoría correcta y tampoco toma la imagen que
corresponde. Para solucionar lo anterior se debe realizar lo siguiente:

1. Abrir el archivo “articulo.js” ubicado en la ruta /vistas/scripts/.

2. Ir hacia la función “mostrar” y agregar la línea señalada con la flecha roja.

3. Realizar la prueba para garantizar que muestra la categoría correcta, que

corresponde al artículo a editar.

4. Ahora para corregir el tema de la imagen, se debe abrir el archivo

“articulo.php” de la carpeta vistas. La idea es agregar un input
oculto(hidden) que reciba el nombre de la imagen actual (esto se hace
porque el input de tipo file no recibe valores por código, entonces se hace
la “trampita” a través de esta etiqueta auxiliar para recibir el valor en un
input normal y así poder “jugar” con dicho valor) y una etiqueta img que
permita mostrar dicha imagen. Por tanto, el div de la imagen queda
finalmente así:

5. Ingresar al archivo “arcitulo.js” de la carpeta scripts y dentro de la función

“init” se debe ocultar la caja imagenmuestra, justo antes de cerrar la función
init.
 6. Ahora la idea es asociar los datos a imagenactual e imagenmuestra; esto se
realiza desde la función mostrar (del archivo “arcitulo.js” de la carpeta
scripts).

7. Finalmente, desde el archivo “articulo.php” de la carpeta “ajax” se debe

capturar la imagen actual, la cual corresponde a la imagen del formulario
de la lista de artículos, para ello, dentro de la opción “guardaryeditar”, en la
parte verdadera que valida si el archivo existe o fue cargado se captura el
valor de imagen a través del método POST, quedando así:

8. Realizar la prueba, y para hacerse una idea debe aparecer de la siguiente

manera:

Hasta aquí ya puede codificar tablas dependientes, porque de ahí en adelante se

mostrará el manejo del código de barras, lo cual no en toda aplicación se
requiere.
 USAR CODIGO DE BARRAS

Para trabajar con código de barras, se debe agregar al proyecto la librería

JsBarcode, a pesar de que se puede descargar la librería: JsBarcode.all.min.js; esta
es proporcionada en los recursos entregados en el manual de referencia 2.

1. Verificar que la librería se encuentra en: /public/js

2. Como el código de barras se usará solo en la vista artículos, es suficiente
agregar la referencia de dicha librería dentro del archivo “articulo.php” de
la carpeta vistas. Tener en cuenta agregarla antes de la referencia al archivo
“articulo.js”, debido a que este último hace uso de la librería JsBarcode. Por
tanto, debió quedar de la siguiente manera:

3. Ahora, dentro de la caja del campo “código” del HTML de la vista artículo,
se debe agregar:
• Un botón que permita generar el código de barras, a través de una
función llamado “generarbarcode”, que se creará más adelante.
• Un div donde se mostrará la representación gráfica del código de
barras generado por la librería JsBarcode.

La caja del campo “código” debe quedar finalmente así:

4. Abrir el archivo “articulo.js” de la carpeta script y crear la función

generarbarcode, asegurarse que esta función quede ubicada antes de la
llamada a la función “init()”:

NOTA: es probable que, al realizar la prueba hasta este punto, no muestre el botón que se acabó de crear llamado
“Generar”; para solucionarlo se debe quitar el atributo style del div formularioregistros (archivo articulo.php de la
carpeta vistas).
 5. Ahora, para que aparezca el código de barras automáticamente al editar
el artículo, se debe llamar a la función generarbarcode desde la función
mostrar (“articulo.js” de la carpeta script):

6. Realizar una prueba, y hasta el momento al intentar editar un registro o

artículo, la interface se debe ver así:

NOTA: El código de barras corresponde al dato guardado en el campo “codigo”

de la tabla artículo, solo que la librería JsBarcode lee dicho dato y lo representa en
forma de código de barras.
 IMPRIMIR CODIGO DE BARRAS

Para imprimir el código de barras o cualquier área HTML se usa la librería Jquery
printArea.

A pesar de que se puede descargar la librería: jquery.PrintArea.js; esta es

proporcionada en los recursos entregados en el manual de referencia 2.

1. Agregar la referencia a librería justo debajo de donde se referencio la librería

JsBarcode.

2. Agregar un botón al lado del botón que genera el código de barras y

asignar un id a la caja que contiene el código de barras a imprimir, de tal
manera que quede así:

3. Abrir el archivo “articulo.js” de la carpeta script y crear la función imprimir(),

debajo de la función generarbarcode()
 “RETOQUES”

Luego de actualizar un artículo y enseguida se va a crear un articulo la imagen y el

código de barras del último articulo actualizado queda “pegado” en el formulario,
para mejorar este detalle se debe limpiar esas áreas:

1. Ubicar la función “limpiar” del archivo “articulo.js” y agregar dentro de esta

las siguientes líneas:

2. Se puede observar que se ocultó la caja con id print, por tanto, en la función
generarbarcode se debe activar o mostrar, de tal manera que el código
completo de dicha función queda:
 GLOSARIO
✓ Clases: Representa el modelo de la base de datos sobre los cuales se creará
cada objeto.
✓ Constructor vacío: es un método que se debe crear por cada clase para
crear una instancia de la clase sin parámetros, es decir, poder hacer
referencia a la clase y de esa manera referenciar los métodos de la misma.
✓ JSON (JavaScript Object Notation) es un formato de intercambio de datos
ligero y a la vez legible. Los tipo de datos que
soporta JSON son: strings, números, booleanos y null; las fechas no, para ello
se requiere convertir la fecha a string con una función como strftime(), es
decir, JSON es un estándar basado en texto plano para el intercambio de
información.
✓ Propiedades: Son las características de cada objeto (campos de cada
tabla), en la POO se representan a través de variables, pero técnicamente
se le denominan propiedades.
✓ Métodos: son funciones, pero técnicamente se le denominan métodos, y
básicamente en un bloque de código que representa acciones que puede
realizar cada objeto.
✓ Objetos: Mientras que la clase es la representación general del objeto, el
objeto es la representación real de cada elemento de la clase, es decir, la
clase es una tabla y el objeto es cada registro de la tabla.
✓ POO: Se basa en interacciones de objetos para resolver las necesidades de
un sistema de información.
✓ La librería JQuery y la tecnología Ajax (Asynchronous JavaScript and
XML) para hacer dinámico nuestro proyecto web.
✓ require_once: valida si el archivo ya fue incluido no lo vuelva a incluir.