form

form

El tradicional envío de datos desde formularios ha cambiado mucho con el fin de optimizar esta tarea y brindar mejores experiencias de usuario, en esta entrada veremos como realizar un envío de formulario hacia una base de datos MYSQL haciendo uso del plugin JQuery Form. Un plugin con métodos interesantes como ajaxForm y ajaxSubmit (Entre muchos otros) que nos permite gestionar el manejo de la información enviada de una forma bastante sencilla veamos:

Primero que todo diseñemos un formulario ejemplo dando un poco de elegancia con boostrap (que no es obligatorio):
[cc lang=»html»]
< !DOCTYPE html>



JQuery Form



🌟 ¡Visita Nuestra Tienda para Programadores! 🌟

Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!








[/cc]

Si se dan cuenta el formulario no cambia en absolutamente nada, seguimos colocando un action y el script php que hará la tarea de insertar los datos, con la diferencia de que mediante JQuery accedemos a el mediante su selector id, para posteriormente hacer envío mediante ajaxForm, recuerden hacer el respectivo llamado de la libreria JQuery como JQuery.form, como aclaración posteo también los archivos php para inserción de los datos:

Conexión:
[cc lang=»php»]
< ?php function Conectar(){ $conn = null; $host = '127.0.0.1'; $db = 'base_datos'; $user = 'root'; $pwd = ''; try { $conn = new PDO('mysql:host='.$host.';dbname='.$db, $user, $pwd); }catch(PDOException $e){ echo ':( Error al conectar con la base de datos '.$e; exit; } return $conn; } ?>
[/cc]

Insert.php
[cc lang=»php»]
< ?php $nombres = $_POST['nombres']; $ocupacion = $_POST['ocupacion']; $telefono = $_POST['telefono']; $sitioweb = $_POST['sitioweb']; require('conexion.php'); $con = Conectar(); $sql = 'INSERT INTO personas (nombres, ocupacion, telefono, sitioweb) VALUES (:nombres, :ocupacion, :telefono, :sitioweb)'; $q = $con->prepare($sql);
$q->execute(array(‘:nombres’=>$nombres, ‘:ocupacion’=>$ocupacion, ‘:telefono’=>$telefono, ‘:sitioweb’=>$sitioweb));
?>
[/cc]

Podemos apreciar en el código anterior los campos de la tabla en la base de datos para su creación.

Hasta pronto!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *