Chart.js – Tutorial con ejemplos para gráficas en la web
En este post te voy a mostrar un tutorial de chart.js para el manejo de gráficas en la web. Ya llevo bastante tiempo usando esta librería pero hasta ahora es que escribiré esta introducción con varios ejemplos acerca de esta maravillosa librería.
Lo único que necesitas para el tutorial son conocimientos básicos de JavaScript y HTML, aunque igual si estás aprendiendo puede que esto lo refuerce.
Conectar PHP y SQL Server usando PDO – CRUD de ejemplo
Aprovechando que para unas cosas de la escuela tuve que instalar SQL Server y SQL Server Management Studio (ya que por voluntad propia no lo haría jamás) decidí conectar PHP con SQL Server y hacer un CRUD, es decir, create, read, update y delete de una base de datos de SQL Server.
De esta manera si algún día alguien quiere consumir una base de datos de SQL Server con PHP puede tomar este post como referencia.
Al final tendremos una aplicación web como la siguiente, basada en una plantilla de Bootstrap 4.
SQL Server y PHP
Voy a mostrarte cómo hacer un select, update, insert y delete. Además de prevenir inyecciones SQL.
Recuerda que al final de todo lo que vamos a usar es PDO, una envoltura de las bases de datos que permite intercambiar de un motor a otro cambiando la cadena de conexión.
Nota: todo el código fuente aquí mostrado está actualizado y completo en mi GitHub. Siéntete libre de clonarlo, editarlo, descargarlo o mejorarlo.
Todos los formatos y unidades para uso de interval en MySQL
En este post vamos a explicar y ver los formatos que podemos usar a la hora de usar la palabra clave interval en MySQL. Esto es más que nada una guía detallada de todos los formatos y unidades válidas al usar interval, cosa que se ve más al sumar y restar fechas en MySQL o mejor dicho, al trabajar con fechas.
Me he dado a la tarea de crear una tabla con ejemplos, descripción y rangos que explican todas las unidades posibles.
Mira más tutoriales de MySQL aquí.
GraphQL contra REST: una introducción
Introducción
Veo venir algunos grandes cambios sobre el consumo de API’s en internet. La llegada de GraphQL ya tiene un poco de tiempo, sin embargo su uso no está tan extendido como REST.
A lo largo de los años hemos ido evolucionando. Pasamos por SOAP, luego por REST y finalmente vamos hacia GraphQL.
Claro que ni SOAP ni REST son malos, que los use quien quiera y lo respeto. Sin embargo vamos a ver qué ventajas tiene GraphQL contra REST.
Pequeño, muy pequeño sistema de ventas con PHP y MySQL
Introducción
Hace algunos días hice un ejercicio de un sistema de ventas en PHP. Está escrito en puro PHP, nada de Javascript. Eso sí, para los estilos utilicé una variante de Bootstrap.
Los archivos no tienen una estructura, pero como lo dije, es un ejemplo. También escribo esto porque igual y le sirve a alguien más o me sirve a mí mismo para algunas referencias.
Para la persistencia de datos utiliza MySQL. Guarda productos y ventas. No maneja permisos de usuarios. Almacenamos el carrito de compras en la sesión, y bueno, mejor lo explico por partes.
Cargar nuestras propias clases con Composer
Introducción
Al principio, no queremos utilizar Composer porque creemos que es muy complicado de utilizar. Hoy explicaré 2 cosas: cómo cargar nuestras clases y por qué es bueno utilizar Composer
¿Por qué es bueno?
Composer es un gestor de dependencias como lo es NPM. Ambos trabajan igual: leen un fichero, instalan y actualizan las dependencias. Fácil y sencillo. Por otro lado, Composer se encarga de cargar todas las clases necesarias.
Por ejemplo, si tenemos muchas librerías sería un lío hacer un include o require por cada una de éstas. ¿No sería mejor que alguien las cargara todas por nosotros? eso es justamente lo que hace el autoload de Composer.
Hasta aquí todo bien, todos lo entendemos. Lo que se me hace un poco complicado es cómo cargar nuestras propias clases. Es decir, está muy bien eso de que se carguen las clases que otros desarrolladores hicieron, ¿pero cómo añado la lógica de mi aplicación? eso se responde en el siguiente apartado
¿Cómo cargar nuestro propio código?
Esto es muy fácil, simplemente tenemos que indicarle a Composer en dónde reside nuestro código que queremos que se autocargue. Tenemos que modificar el archivo composer.json. Dicho fichero se verá más o menos así:
En este caso es de un proyecto que estoy haciendo, pero dejemos eso a un lado. Independientemente de lo que tengamos, vamos a añadir lo siguiente:
Para que finalmente, el archivo (al menos en mi caso) luzca así:
Como se puede observar, el namespace en mi caso es Biblioteca. Es necesario añadir las dos diagonales \\.
Y en carpeta he puesto “app/” porque así se llama el folder en donde tengo todo mi código. Se ve así:
De esta forma, el archivo composer.json buscará todo lo que haya dentro de la carpeta app. Y dentro de la carpeta tengo otras dos carpetas. El código de un controlador, por ejemplo, luce así:
Lo copié de esta manera porque quiero que se note que podemos utilizar nuestras otras clases (por ejemplo, tengo una clase llamada DatabaseService) simplemente utilizando use namespace\clase.
Por otro lado, estoy utilizando PDO. Si necesitamos utilizar una clase que ya viene incluida por defecto en PHP tenemos que indicarlo; si no, avisará que no encuentra la clase en nuestro namespace.
Finalmente dejo aquí el código de ejemplo de cómo se ve DatabaseService.
Recargar autoload
Después de modificar el archivo composer.json debemos generar el autoload de nuevo. Para ello ve a la ubicación en donde esté el archivo a través de la terminal y ejecuta:
composer install
Conclusión
Si seguimos todo esto, podremos estructurar nuestro código de una manera eficaz, y será cargado / incluido automáticamente. Más tarde podemos agregar más archivos a la carpeta que indicamos y todo se seguirá cargando siempre y cuando respetemos los namespaces.
En los ejemplos el namespace es “Biblioteca” pero puede ser el que se te ocurra, aunque debería llamarse de alguna forma referente a tu proyecto.
Introducción a pouchdb: app de agenda
Introducción
PouchDB es una base de datos que se sincroniza. Permite trabajar offline y online, con una sincronización de la cual no tenemos que encargarnos nosotros. Esto viene perfecto para desarrollar sistemas que trabajan tanto con y sin internet.
Es importante notar que si no queremos la sincronización, no pasa nada. Por lo que no estamos obligados a sincronizar ningún sólo dato.
Además, la base de datos se sincroniza entre todos los dispositivos. Esto es algo muy genial, aunque claro, tampoco es tan poderosa como MySQL, MS SQL Server, etcétera.
Finalmente cabe mencionar que todo se guarda en el navegador del usuario, evitando así tener que programar el lado del servidor.
En este tutorial vamos a estar trabajando para crear una agenda, de esas en donde guardas el teléfono, dirección y nombre de tus conocidos.
Ejemplo práctico: app de agenda
Si quieres descargar el código completo puedes ir a GitHub: https://github.com/parzibyte/agenda_pouchdb
También existe una demo en esa misma página: https://parzibyte.github.io/agenda_pouchdb/
Finalmente aquí dejo un GIF de cómo se ve al usarla:
Preparando scripts
Simplemente tenemos que incluir la librería de PouchDB en nuestro archivo html y listo. En este caso no utilizaremos ningún framework. Así que para descargar la última versión (independientemente de cuándo se consulte este tutorial) podemos ir a https://pouchdb.com/download.html y copiar el quick start.
En mi caso, incluiré el archivo http://cdn.jsdelivr.net/npm/pouchdb@6.4.1/dist/pouchdb.min.js
Una vez incluido el archivo, vamos a ver si PouchDB está definido para comenzar a trabajar. Así que ejecutaremos este código:
Si al abrirlo nos dice “Correcto” entonces todo está bien. Si no, por favor revisa que hayas incluido bien el script y que tengas una conexión a internet, o el archivo descargado.
Vamos a ver todas las operaciones como lo son crear, leer, actualizar y eliminar datos. Además de ver cómo los índices y los prefijos nos van a ayudar.
Lo que no veremos será la sincronización y los selectores (si vienes de una base de datos relacional, los selectores son el equivalente a la cláusula WHERE) ya que se alargaría mucho este post.
Instanciar base de datos
En PouchDB sólo tenemos una base de datos que alberga documentos. No existen las tablas. Así que todo se guarda en un mismo lugar.
Una vez dicho esto, para usar PouchDB simplemente tenemos que llamar al constructor con el nombre de la base de datos deseada. Si no existe, se creará y se devolverá la instancia en donde ya podremos guardar.
Insertar, create o agregar
La primera operación que tenemos que hacer para poder hacer todas las demás, porque si no existen datos, ¿qué cosas se eliminan o actualizan?
Vamos a comenzar creando el formulario por donde entrarán los datos. No pondré estilos, pues creo que hacen que el lector se confunda. Así que vamos a enfocarnos únicamente en el funcionamiento de la app.
Podemos ejecutar lo que llevamos hasta el momento, y se debe ver así:
Listar, o mostrar
Ya insertamos datos, pero para editar o eliminar hay que primero poder verlos para interactuar con ellos. Así como fue fácil insertar, será fácil recuperar los documentos.
Dejaré el código y lo explicamos abajo.
Comencemos viendo que al script le agregamos una nueva variable, la cual es el elemento que apunta al cuerpo de la tabla.
Creamos una función que obtiene los documentos de la base de datos, que más o menos funciona como lo dice la documentación oficial.
Recorremos las filas y a una variable le vamos añadiendo código HTML para la tabla. Una vez que el ciclo termina asignamos todo ese HTML al elemento declarado previamente. Y así de fácil es.
Finalmente cabe mencionar que añadimos la hoja de estilos para los bordes de las tabla, pero podemos no incluirlos si no queremos.
Veamos ahora cómo editar.
Editar
Una vez que ya hemos creado nuestros datos es hora de poder editarlos. Dejaré la operación de eliminación para más tarde, ya que, según yo, es la más fácil.
Por ahora hay que agregar un botón a la tabla para escucharlo más tarde y consultar el contacto.
Una vez que hayamos consultado el contacto, tenemos que llenar automáticamente los campos de texto. Es decir, vamos a reutilizarlos.
Y para guardar cambios al editar crearemos otro botón que está oculto y que se muestra sólo cuando hacemos click en editar en un campo de la tabla de contactos.
Analicemos las nuevas cosas del código. Para editar un documento usamos el método put de PouchDB. Pero para ello necesitamos el id y la revisión de dicho documento, los cuales almacenamos en una variable temporal global.
También estamos ocultando y mostrando botones, así como leyendo datos con los atributos data-*. Sigamos para ver ahora el último paso: eliminar.
Eliminar
Finalmente añadiremos el botón de eliminar. El proceso es el mismo que para editar, sólo que ahora la clase de los botones será btn-eliminar en lugar de btn-editar. De ahí simplemente obtenemos el contacto usando el id recuperado de los atributos data.
Mandamos una confirmación y en caso de que se acepte, se elimina completamente. Después refrescamos la tabla y limpiamos el formulario.
El código final queda así: