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.

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…)

Gráfica creada con PHP

Crear gráfica con PHP y Chart.js

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.

(más…)

Gráfica de línea con varios dataset usando chart.js - Tutorial con ejemplos

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.

(más…)

Mostrar notificación Toast con React

Hoy vamos a ver cómo mostrar una notificación o Toast usando React. Esta notificación puede venir de cualquier lugar o servir para reaccionar a una acción del usuario.

Por ejemplo, podemos mostrar un mensaje de éxito o mensaje de error al enviar un formulario, entre otras cosas.

No vamos a ver cómo enviar y recibir notificaciones con sockets o esas cosas, sino simplemente una librería para mostrar Toasts o mensajes emergentes en React.

(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…)

Consumo de una API REST con Vue.js y JavaScript

En este artículo te voy a enseñar a consumir una API REST usando JavaScript y el framework Vue.js, además de utilizar Bootstrap para el diseño.

Al final vamos a tener una aplicación web que va a gestionar datos y hacer las 4 operaciones básicas: crear, actualizar, eliminar y obtener.

Todo esto lo vamos a hacer sin tocar el código del servidor, pues simplemente nos vamos a enfocar en la programación del lado del cliente, así que solo veremos HTML, JavaScript y un poco de CSS.

(más…)

Sistema acortador de enlaces con PHP similar a bitly

Hoy vengo a presentar un sistema que recién he terminado de programar. Se trata de un software open source escrito en PHP con MySQL y Bootstrap, mismo que es un acortador de enlaces similar a los acortadores como bit.ly.

En este caso este programa se encarga de acortar enlaces, redireccionar a los usuarios y registrar cuando se hace clic. Aunque su funcionamiento está inspirado en los acortadores de enlaces, no tiene todas las funciones idénticas.

Este software gratuito que he creado con PHP tiene las siguientes características:

  1. Login y gestión de usuarios
  2. Creación de enlaces
    1. Enlaces sin redireccionamiento instantáneo: en este caso, antes de redireccionar al usuario, se presenta una plantilla en donde se puede poner publicidad, avisos, redes sociales etcétera.
    2. Links con redireccionamiento instantáneo: simplemente redireccionan al usuario de manera transparente, registrando el clic o visita.
  3. Reporte general de clics en rango de fecha, con gráfica y descripción de los enlaces más populares

Como siempre te digo, este software se puede personalizar, tomar como base, etcétera. Por cierto, hace un tiempo hice un software parecido pero ese acorta enlaces para ganar dinero, usando a su vez acortadores como ouo, adfly, etcétera.

(más…)

JavaScript: fecha de inicio y fin de mes

En este post de programación en JavaScript y fechas te mostraré cómo obtener la fecha de inicio del mes actual, y cómo obtener la fecha del fin del mes actual.

Por ejemplo, el mes en el que escribo este post es diciembre, así que te mostraré cómo obtener la fecha del 1 de diciembre del 2020 y cómo obtener el 31 de diciembre del 2020, independientemente del número de días que tiene cada mes.

Adicionalmente te mostraré cómo formatear esa fecha en formato de YYYY-MM-DD, pero recuerda que puedes formatearlo como tú prefieras, pues tendrás el objeto de la clase Date al final.

Por cierto, este código de JavaScript funciona tanto en el navegador como en el servidor usando Node.

(más…)

Tetris en JavaScript – Open source

En este post te mostraré el juego de Tetris programado en JavaScript puro, totalmente gratuito y open source.

Este juego de bloques está programado con JavaScript y utiliza canvas para pintar el juego. También utilizo Bootstrap para el diseño de los botones y la página en general, con un poco de SweetAlert para las ventanas.

Aunque se vea sencillo de hacer, es uno de los trabajos que más me ha costado realizar y del cual me siento más orgulloso. Fue complejo (para mí) comprender toda la lógica para las colisiones, rotaciones, eliminación de filas, movimiento de piezas, límites, etcétera.

Entre las características del juego encontramos:

  1. Sonidos: música de fondo, sonido cuando la pieza no se puede rotar, cuando se hace una fila completa y cuando el tetrominó toca el suelo
  2. Colores: cada pieza tiene un color aleatorio elegido en tiempo de ejecución
  3. Rotaciones: las piezas se pueden rotar para acomodarlas y acumular puntos
  4. Compatible con móviles: debido a que es web, he agregado unos botones para poder jugarlo en móviles, pero también se puede jugar con el teclado
  5. Código abierto: puedes modificar el juego, el tablero, la longitud, velocidad, piezas, rotaciones, etcétera.
  6. Port de tetris: se comporta como cualquier juego de tetris normal
  7. Pausa del juego: el juego se puede pausar o reanudar en cualquier momento

Veamos entonces los detalles de este juego programado en JS. A lo largo del post te mostraré cómo es que este juego está programado, también te dejaré una demostración y el código completo.

Nota: figura, pieza y tetrominó serán usados como sinónimos en este post.

(más…)

Dibujar arreglo en Canvas de JavaScript

En este artículo de programación te mostraré cómo pintar o dibujar un arreglo (array, vector, como lo conozcas) en un canvas de JavaScript, logrando hacer una cuadricula.

Es decir, a partir de una matriz en JavaScript, dibujar una cuadricula en Canvas. Esto es útil por ejemplo al hacer un juego como snake, pues si tratamos todo como un arreglo, podemos desarrollar el juego en el mismo y luego solo pintar la matriz en el canvas.

(más…)