Ver carrito de compras con productos almacenados en localStorage usando JavaScript

Carrito de compras con JavaScript

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.

(más…)

CRUD con MySQL, PHP, JavaScript y AJAX

CRUD con PHP, MySQL y AJAX

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.

CRUD con MySQL, PHP, JavaScript y AJAX

CRUD con MySQL, PHP, JavaScript y AJAX

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.

(más…)

AJAX, PHP y Chart.js para crear gráficas en la web

Gráficas con chart.js, AJAX y PHP

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.

AJAX, PHP y Chart.js para crear gráficas en la web

AJAX, PHP y Chart.js para crear gráficas en la web

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:

  1. En nuestro servidor mostrar los datos de la gráfica como JSON.
  2. Dentro del lado del cliente hacer una llamada AJAX al servidor y esperar la respuesta.
  3. 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.

(más…)

Ejemplo simple de uso de make y makefile

Ejemplo simple de makefile

El makefile se usa en conjunto con la herramienta make para construir y crear programas. Uno de sus usos más básicos es el de compilar un programa en C.

En este post te mostraré un ejemplo muy simple de un makefile en C que simplemente va a compilar y ejecutar un programa.

Realmente será un ejemplo muy sencillo de makefile, pero que te servirá en caso de que sea obligatorio usar el makefile.

(más…)

Ejemplo de struct en C

Struct en C

Un struct en C permite usar algo parecido a los objetos anónimos de la programación orientada a objetos. No son clases, simplemente son un modo de agrupar un objeto de determinado tipo con ciertas propiedades.

En este tutorial te mostraré cómo declarar, asignar y leer valores de un struct en C. Será una introducción y referencia con ejemplos sobre el uso de structs en C

(más…)

Plantilla para mostrar temperatura y humedad – Diseño web

En este artículo te mostraré una plantilla de ejemplo para mostrar la temperatura y humedad. Será una plantilla simple y minimalista que solo tendrá el propósito de mostrar los datos de un termómetro.

Como lo dije anteriormente, será una plantilla de ejemplo para mostrar los datos de un termómetro como lo son la temperatura y humedad. Puedes basarte en ella para mostrar los datos de un sensor físico o de una API.

(más…)

Plantilla inicial de Bulma

En este post te mostraré una plantilla simple de Bulma para comenzar a usar este framework CSS. Es decir, una plantilla de ejemplo para que puedas basarte en ella y comenzar a trabajar modificarla según tus preferencias.

Esto que te mostraré también es conocido como starter template de Bulma.

(más…)

SPA con MERN: ejemplo de aplicación web

En este artículo te enseñaré un ejemplo completo de conexión a MongoDB y Express con React. Vamos a usar el stack MERN para hacer un CRUD completo.

Al final tendremos un proyecto completo que será una single page application escrita con React, misma que consumirá una API de Node creada con Express. Los datos van a residir en una base de datos de MongoDB a la que vamos a acceder usando Mongoose.

Como siempre, te explicaré el código más importante a través del post, y te dejaré el repositorio completo al final del post para que puedas explorarlo a tu gusto.

(más…)

Ejemplo simple de conexión a MongoDB con Mongoose

En este post te mostraré cómo crear un modelo de Mongoose para guardarlo en una base de datos de MongoDB. Además, te mostraré cómo hacer las cuatro operaciones fundamentales.

Será un ejemplo muy simple para comenzar a usar esta librería que permite definir modelos que más adelante vamos a insertar, actualizar, listar o eliminar de una base de datos de MongoDB.

Nota: aquí asumo que ya tienes un poco de conocimiento con node para ejecutar un archivo de JavaScript, iniciar el servidor, etcétera.

(más…)

PHP y React: ejemplo de aplicación web

Hoy te voy a mostrar cómo conectar dos tecnologías: PHP y React. Vamos a ver cómo traer y enviar datos a PHP (para guardarlos en MySQL) desde React también conocido como React JS.

Al final podremos decir que estamos conectando React con PHP y MySQL. Lo que vamos a hacer será las 4 operaciones fundamentales (Crear, actualizar, eliminar y obtener) datos de MySQL para pasarlos a PHP y luego a React a través de una API.

Como resultado vamos a tener una aplicación web creada totalmente con React que consume archivos de PHP a través de AJAX con JSON. Por cierto, será una SPA o Single Page Application.

(más…)

Expresiones regulares en Go

Hoy te mostraré cómo trabajar con expresiones regulares en el lenguaje de programación Go, también conocido como Golang.

No te mostraré cómo usar las expresiones regulares, pues las mismas son independientes del lenguaje (aunque también tienen sabores) y son un tema aparte, así que solo te mostraré cómo trabajar con expresiones regulares en Go a través de regexp.

(más…)

Relaciones SQL con Sequelize y Node

En este post te mostraré cómo hacer una relación o asociación entre tablas con el ORM Sequelize para hacer la relación a nivel base de datos y también para traer los datos usando la asociación. Es decir, lo que tiene que ver con foreign key, inner join, left join, etcétera.

Te mostraré cómo insertar datos y solo especificar la clave foránea, contrario a lo que se muestra en la documentación en donde se insertan ambos modelos a la vez.

La razón es porque, por ejemplo, si un trabajador pertenece una oficina, solo importa guardar el id de oficina en caso de que esta ya se haya creado antes, y no se requiere guardar una oficina por cada trabajador.

(más…)

Por parzibyte, hace