Bienvenido al blog de Parzibyte. Vas a encontrar tutoriales y tips de programación, bases de datos, redes, electrónica e informática general. Ejemplos de código, aplicaciones gratuitas y open source
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.
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.*
En este post te voy a enseñar a obtener datos de formulario en Spring Boot usando el motor de plantillas Thymeleaf para mostrar el formulario.
Vamos a ver un ejemplo de un formulario, desde dibujarlo hasta procesarlo en el controlador, usando una clase.
En este artículo te voy a mostrar cómo trabajar con el input de tipo checkbox en un formulario de PHP para saber si una opción fue marcada o no.
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.
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.
En esta ocasión vengo a compartir un simple diseño de un formulario de inicio de sesión o login hecho con Bootstrap 4.
Generalmente un formulario de login solo lleva dos campos: el del correo y la contraseña.
Gracias a los estilos de Bootstrap podemos diseñar un formulario responsivo, elegante y simple con pocas líneas de código.
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.
En este post voy a mostrarte cómo usar los datos flash de la sesión de Laravel para mostrar avisos como “Usuario registrado correctamente”.
Recuerda que los mensajes flash solo viven una vez.
Vee Validate es un plugin de Vue.js que sirve para validar formularios de una manera fácil pero poderosa.
Lo que destaca es:
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
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.
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.
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.
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.
Aquí dejo las especificaciones de cada cosa utilizada.
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:
Podemos cambiar a PHP por cualquier lenguaje del lado del servidor.
Si quieres probar el ejemplo terminado, entra aquí. Abajo dejo también la carpeta para que puedas descargarla y probarla por ti mismo.
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.
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.
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.
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.
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
Un GIF dice más que mil palabras:
Y con esto terminamos por hoy.
