Vuetify agrega diseños y componentes de Material Design a nuestras aplicaciones creadas con Vue. Para varios casos necesitamos los iconos de Material Design así como la fuente Roboto de Google. Hoy te mostraré cómo tener los iconos y la fuente de manera offline, fuera de línea, local, o como le llames. De este modo nuestra aplicación no dependerá de ninguna conexión a internet, cosa que viene genial cuando vamos a crear una app local. ...
En este post te mostraré un sistema que acabo de crear. Se trata de un software para el alojamiento de archivos en la nube usando PHP y MySQL. Es decir, algo como un Google Drive, Dropbox o Mega pero de forma básica. Gracias a este software open source de archivos en la nube podemos montar nuestro propio disco en la nube en la red local o en internet, subir archivos y acceder a ellos desde cualquier dispositivo, pues este programa es responsivo. También podremos compartir los archivos para su descarga, usando un hash único que podemos eliminar más tarde. A través de este post te mostraré los módulos del programa, explicaré un poco la arquitectura y te enseñaré cómo descargarlo e instalarlo. ...
En este post te hablaré un poco sobre las props o propiedades de componentes en Vue.js. Las propiedades permiten pasar datos a un componente hijo, mejorando así la comunicación. Gracias a las props en Vue así como $emit y on, podemos comunicar componentes de manera fácil. ...
En este blog te he enseñado cómo subir uno o varios archivos con HTML y PHP puro, así como subir un archivo con AJAX usando FormData. Ahora te voy a enseñar cómo subir varios archivos (ilimitados o sin una longitud fija) usando JavaScript, AJAX, FormData y PHP. ...
En este post de JavaScript y desarrollo web te mostraré cómo implementar un carrito de compras en el lado del cliente con JS. Será un ejemplo completo de un proyecto en donde además de tener el carrito de compras tendremos un módulo de tienda (pero no habrá transacciones ni pagos reales) y módulo de gestión de productos. Este proyecto se basa ampliamente en el CRUD con AJAX, PHP y MySQL publicado anteriormente, pero agregamos la gestión del carrito de compras dentro de localStorage. Como siempre, te dejaré el código completo y listo para descargar. ...
En este post te mostraré una librería de JavaScript para guardar un carrito de compras en JavaScript del lado del cliente. Será una simple clase que encerrará el comportamiento y brindará funciones para todas las operaciones. Como dice el título, se usará localStorage para guardar y recuperar los valores, de este modo no importa el lenguaje del lado del servidor, pues se usará el lado del cliente. Por ahora te mostraré solo la librería/Clase, no su uso. Ya más adelante te traeré un ejemplo completo. ...
En este post te mostraré un ejemplo completo de CRUD que hace las operaciones fundamentales de la base de datos usando MySQL y PHP, pero además las llamadas se hacen con AJAX desde JavaScript. Al final te dejaré el código completo que podrás descargar, probar y modificar, mismo que tendrá todas las operaciones para enviar y recibir datos desde JavaScript a un servidor PHP que se conecta a MySQL. Básicamente todo se hará del lado del cliente, no vamos a procesar formularios con PHP, solo llamadas AJAX con JSON. Así que tendremos un CRUD con PHP y AJAX. No vamos a usar ninguna librería como React, Vue o Angular; será JavaScript puro. ...
En este post te mostraré cómo crear gráficas en la web (gráficas de barras, de línea, circulares) usando el lenguaje PHP y la librería chart.js. Estrictamente hablando, no vamos a usar el lenguaje en sí para crear la gráfica, sino que vamos a usar PHP para pasar los valores a JavaScript y luego dejar que éste último renderice la gráfica usando Chart.js De hecho esto es como una combinación entre el post de cómo pasar variables de PHP a JavaScript y el tutorial de Chart.js. ...
En este post sobre la creación de gráficas (de línea, barras, pastel, etcétera) usando la librería Chart.js te enseñaré cómo crear una gráfica con datos traídos con AJAX. El lado del servidor estará escrito en PHP aunque estos datos pueden ser traídos desde cualquier API o endpoint. Así que básicamente lo que haremos es: En nuestro servidor mostrar los datos de la gráfica como JSON. Dentro del lado del cliente hacer una llamada AJAX al servidor y esperar la respuesta. Finalmente igualmente dentro del cliente crear la gráfica con Chart.js con los datos traídos con AJAX. Esto que te muestro es un ejemplo, pero antes de leerlo te recomendaría ver el tutorial de Chart.js para ver más opciones de gráficas y entender los conceptos. ...
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. ...