Formulario de registro usuarios jquery, php, mysql.
Ejemplo de registro usuarios jquery, en el que solo vamos a guardar en una Base de Datos: nombre del usuario y su contraseña.
Primeramente incluimos las librerias y los estilos css en la cabecera de nuestra página de registro html entre las etiquetas <head></head>.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.min.js"></script>
Dentro de estas etiquetas<head></head> también inclumos la url del archivo.js del script que contiene el código jQuery y Ajax que se encargará de validar los campos del formulario y conectar con la página php.
<script type="text/javascript"> $(document).ready(function() { $('.error').hide(); $("#enviar-btn").click(function() { //Obtenemos el valor del campo nombre var name = $("input#name").val(); //Validamos el campo nombre, simplemente miramos que no esté vacío if (name == "") { $("label#name_error").show(); $("input#name").focus(); return false; } //Obtenemos el valor del campo password var password = $("input#password").val(); //Validamos el campo password, simplemente miramos que no esté vacío if (password == "") { $("label#pass_error").show(); $("input#password").focus(); return false; } //Construimos la variable que guardará el data Ajax y pasa al archivo php para procesar los datos var dataString = 'name=' + name + '&password=' + password; $.ajax({ type: "POST", url: "register.php", data: dataString, success: function() { $('#register_form').html("<div id='message'></div>"); $('#message').html("<h2>Tus datos han sido guardados correctamente!</h2>") .hide() .fadeIn(1500, function() { $('#message').append("<a href='index.php?action=see'>Ver usuarios registrados</a>"); }); } }); return false; }); }); runOnLoad(function(){ $("input#name").select().focus(); }); </script>
Al hacer click en el botón con id=”enviar-btn” se procesa el código anterior que se encaraga de validar el nombre de usuario y contraseña mirando que no estén vacíos y luego envía esos datos al archivo “register.php” mediante la técnica Ajax.
El archivo PHP se encarga de coger el nombre de usuario y contraseña introducidos y guardarlos en la base de datos de la siguiente forma:
<?php $name = utf8_decode($_POST['name']); $password = md5($_POST['password']); //Conexión con la Base de Datos: $con = mysql_connect('localhost', 'usuario', 'password'); mysql_select_db("tu_base_de_datos", $con); $insert = "INSERT INTO tu_tabla (name, password, date_add) VALUES ('$name', '$password', now())"; mysql_query($insert); ?>
Como vemos el archivo PHP recoge los datos del formulario mediante POST, conecta a la base de datos e inserta los valores en un nuevo registro.
Para el campo nombre utilizamos la función utf8_decode() para asegurarnos de que los acentos y carácteres especiales se guardarán de forma correcta en la base de datos.
Y el campo password lo guardamos encriptado con la función md5() de PHP por cuestiones de seguridad.
Ahora solo falta que en el <body> pongamos el siguiente formulario:
<div id="register_form"> <form name="register" method="post" action=""> <label for="nombre">Nombre:</label> <input type="text" id="name" name="name" /> <label class="error" for="name" id="name_error">Debe introducir su nombre.</label><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" /> <label class="error" for="pass" id="pass_error">Debe introducir su contraseña.</label><br><br> <input name="submit" type="submit" value="enviar" id="enviar-btn" /> </form> </div>
Espero que haya servido de ayuda. Un saludo