formulario

Formulario enviado a PHP usando Ajax, diseño Bootstrap 4

Enviar formulario con AJAX y PHP

Enviar datos a PHP usando AJAX

En este post vamos a ver cómo enviar un formulario de HTML a PHP pero sin recargar la página, simplemente usando AJAX.

Recordemos que AJAX es una técnica que permite enviar y recibir datos de manera asíncrona, sin bloquear el hilo principal, además de ahorrar ancho de banda pues solo cargamos lo que se necesita.

Continue reading…

Validar formularios en Spring Boot

Validar formularios en Spring Boot

Validar formularios con Spring Boot

En este post te mostraré a validar un formulario en Spring Boot y a mostrar los mensajes de error (para indicar en dónde se equivocó al llenarse) con Thymeleaf.

La validación es muy fácil, pues solo se utilizan anotaciones en la entidad.

Verás que es muy sencillo gracias a las anotaciones como Min, NotNull y Size, las cuales se encuentran en:

javax.validation.constraints.*

Continue reading…

PHP – Formulario con dos botones

En este post te mostraré cómo tener un formulario en PHP con dos botones de tipo submit y cómo saber cuál botón de los dos fue presionado para enviar el formulario.

A partir del botón presionado en el formulario de dos botones podemos hacer diferentes acciones, sin tener que usar JavaScript ni otras técnicas.

Continue reading…

Conexión Node.js y MySQL con Express

En este post te voy a mostrar cómo conectarte a una base de datos de MySQL usando el lenguaje de programación JavaScript del lado del servidor a través del entorno Node; también conocido como Node.Js.

Vamos a hacer las 4 operaciones básicas de la base de datos: obtener datos, insertar datos, actualizar datos y eliminar datos.

Para la interfaz del usuario vamos a usar Bootstrap y una estructura de aplicación web generada con express-generator.

Continue reading…

Laravel: subir archivos y aplicar validación

En este post voy a mostrarte cómo enviar o subir fotos con un formulario, y procesarlas para almacenarlas con Laravel.

También te voy a enseñar cómo validar las fotos, para permitir determinadas extensiones o peso.

Será un formulario que aceptará la subida de múltiples imágenes, las validará y almacenará.

Aunque es para imágenes, este ejemplo también serviría para subir otro tipo de archivos.

Continue reading…

Validar formularios en Vue con Vee Validate

Vee Validate es un plugin de Vue.js que sirve para validar formularios de una manera fácil pero poderosa.

Lo que destaca es:

  • Su simplicidad, pues no se tiene que estudiar demasiado para comenzar a usarlo
  • La flexibilidad que ofrece
  • Soporte para otros idiomas (entre ellos el español)
  • Mensajes de error predefinidos
  • Simple sintaxis y validadores por defecto
  • Reglas personalizadas
  • Manejo del evento que desencadena la validación

En este artículo vamos a dar un repaso y explicación de VeeValidate con algunos ejemplos.

Al final tendremos un ejemplo completo que se puede ver aquí, que es como en la imagen:

Validación de formularios con Vue.js, VeeValidate y Bootstrap

Continue reading…

Subir foto desde jQuery a un servidor con PHP y CodeIgniter utilizando AJAX

Introducción

Hoy veremos cómo subir una foto o imagen a un servidor PHP. Dicha foto será elegida por el usuario desde un input de tipo file. La subiremos utilizando la clase FormData de Javascript en conjunto con la clase para recibir archivos en CodeIgniter.

Esto lo haremos utilizando AJAX, por lo que la experiencia del usuario será mejor. Este post funciona para imágenes GIF, PNG o JPG pero supongo que igualmente podemos subir archivos de cualquier tipo.

Lado del cliente

En el lado del cliente tengo mi input de tipo file, con un id para tener una referencia a él desde jQuery. También tengo un botón que servirá para enviar el archivo. No hay formulario porque como tal no enviaremos un formulario, enviaremos un archivo por AJAX:

En Javascript tengo la referencia al input y al botón. Escucharemos el click del botón y accederemos al arreglo de archivos de nuestro input. Con ello crearemos un objeto de tipo FormData y luego lo mandaremos por AJAX a nuestro controlador de CodeIgniter:

Con eso ya hemos terminado la parte del cliente. Vamos con el servidor.

Lado del servidor

En nuestro controlador de CodeIgniter debemos cargar el ayudante para subir archivos. Recibir la imagen será pan comido. En mi caso, mi método se llama ponerFotoAlumno y se ve así:

Lo que hacemos es simplemente recibir el archivo y guardarlo en la carpeta fotos_alumnos. Las opciones que puse son simplemente para aceptar imágenes que no excedan el peso de 2 MB.

Conclusión

Con esto pude subir una foto con FormData utilizando AJAX y jQuery. Hay opciones para cambiar el nombre de la imagen, recibir el nombre con el que se guardó, etcétera. La documentación oficial la dejo abajo.

Por cierto, en mi caso utilizo JSON para devolver la respuesta de la petición y trabajar con ella en el cliente, pero esto es opcional y podemos manejarlo como deseemos.

Referencias

Aquí dejo las especificaciones de cada cosa utilizada.

Clase para trabajar con archivos subidos en CodeIgniter

FormData

Ejemplo de envío de formulario con AngularJS y PHP utilizando AJAX

Introducción

Los formularios son los más utilizados a la hora de necesitar información del usuario. Si estamos trabajando con AngularJS sería una ofensa enviar un formulario con los métodos que ya conocemos. Así que hoy mostraré un pequeño ejemplo de cómo enviar un formulario utilizando:

  • AJAX
  • AngularJS
  • PHP

Podemos cambiar a PHP por cualquier lenguaje del lado del servidor.

Ver ejemplo terminado

Si quieres probar el ejemplo terminado, entra aquí. Abajo dejo también la carpeta para que puedas descargarla y probarla por ti mismo.

formulario_angularjs

Preparando el lado del cliente

App

Comencemos definiendo la app y el controlador, así como el código HTML. Al inicio, quedaría así:

Notar por favor que he puesto un {{5 + 5}} para ver si no ha habido ningún error. Si no lo hay, se mostrará el número 10:

Esto es más que nada para verificar si todo ha ido bien. Si no, por favor verifica que has incluido la librería y que no has tenido errores de escritura.

Formulario

Hora de comenzar a crear el formulario. En este caso haré un formulario para guardar mascotas. Preguntaré su nombre, edad y raza. El código se vería como a continuación. Notar por favor que no he definido nada en el código Javascript.

Simplemente agregué algunos campos de entrada. Es importante notar que a la edad le he asignado el tipo number, de esta manera AngularJS se encargará de convertir ese campo a un número.

Juntando modelo con formulario

Ahora vamos a meternos un poco con Javascript. Definiremos la variable que guardará la mascota (que será un objeto) y luego reflejaremos los cambios en el formulario. Así:

Lo único que hicimos fue declarar una variable en el $scope. Y luego, a cada input le pusimos un ng-model refiriéndose a una propiedad de dicha variable.

La etiqueta que puse abajo (pre) fue para “depurar” y ver si realmente se están haciendo cambios. Podemos probar cambiando los valores, y veremos que se reflejan abajo y se muestra el objeto completo.

También es importante notar que la edad es un número (no trae comillas). Esto sirve cuando hacemos operaciones aritméticas, pues no tenemos que estar viendo si es cadena o número.

Hasta ahora se ve así:

Ahora sí ya tenemos vinculado nuestro modelo con la vista. Hora de programar el botón y mandar esos datos por AJAX.

Enviando datos

Para terminar con la programación del lado del cliente, vamos a escuchar al botón. Cuando hagamos click, haremos una petición POST a un archivo PHP. Le mandaremos (codificado con JSON, para intercambiar y mantener limpios los datos) el objeto mascota.

Para esto necesitamos el módulo $http que AngularJS ya trae. El código final se ve así:

Muy simple de explicar. Utilizamos $http.post para enviar datos al archivo recibir.php. Serializamos los datos con JSON para que viajen de forma segura. Escuchamos el click del botón y listo. Una vez que la petición haya terminado, imprimimos la respuesta en la consola.

 

Programando el lado del servidor

Vamos a hacer que los datos que se reciban sean escritos en un archivo txt simplemente para comprobar que realmente se están enviando. En la vida real puede que los guardemos en una base de datos, o algo así.

Es importante mencionar que AngularJS manda los datos de diferente manera que jQuery. jQuery por defecto los manda como si fueran un formulario, y accedemos desde PHP con $_POST. En cambio, AngularJS los manda para poder leerlos en el flujo de entrada de datos.

Otra cosa que hay que mencionar es que se tiene que hacer un echo, pues eso es lo que leerá la petición como resultado.

Hace algunos años cuando apenas aprendía AJAX, intenté hacer un return y no hubo resultados ¡jaja! ya que se tiene que imprimir algo, no regresar algo.

Pero bueno; hablar es de mal gusto. Aquí el código:

Y listo ¡hemos terminado! Hora de probar

Probando app

Un GIF dice más que mil palabras:

Y con esto terminamos por hoy.