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>
[/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!.
Byspel