Como crear una página de lanzamiento con PHP, AJAX y JQuery – II Parte
Categories: JQuery, MySQL, PHP, Tutoriales - Tags: jquery.plugin, pagina lanzamientoHoy les voy a explicar como crear un formulario AJAX para nuestra página de lanzamiento y así poder crear una base de datos con los emails de nuestros visitantes que quieren manternerse actualizados con novedades, etc.
Siguiendo la estructura básica de una web vamos a necesitar varios archivos para lo que queremos hacer:
- config/db.php Archivo donde configuramos los parametros de conexión a la base de datos
- ajax_usuarios.php Archivo encargado de recibir la petición AJAX e ingresar los emails en la base de datos
- index.php Página de lanzamiento que veran los usuarios
- css/estilo.css Página con código CSS
- js/jquery-latest.js Última versión de JQuery
- js/jquery.corners.js Plugin para redondear esquinas
- js/jquery.epiclock.js Plugin para crear cuenta atras
- js/jquery.form.js Plugin para enviar formulario via AJAX
- js/jquery.jqtransform.js Plugin para dar estilo al formulario.
Como ya tenemos definido el archivo db.php tal y como se explico en su día , pasamos al archivo ajax_usuarios.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php // compruena la variable $_POST if(isset($_POST['email']) && $_POST['email']!= ''){ /* Conectamos a la base de datos */ include('config/db.php'); $conn=get_db_conn(); /* Protejo SQL injection */ $email = cleanQuery($_POST['email']); /* Realizo consulta SQL */ $query = "INSERT INTO listado_emails (email) VALUES ('$email')"; mysql_query($query,$conn); // Mensaje de respuesta echo $email .' fue ingresado a la base de datos correctamente!!!!!!'; } else { // En caso de q la variable no este iniciado o no tenga caracteres el mensaje de respuesta es el siguiente echo 'Hubo un error, intenta otra ves.'; } ?> |
El código de index.php también va a cambiar ya que agregamos nuevos plugins de JQuery y el formulario para ingresar emails
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Timersys</title> <link href="css/estilo.css" rel="stylesheet" type="text/css" /> <link href="css/jqtransform.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="js/jquery.epiclock.min.js"></script> <script type="text/javascript" src="js/jquery.corners.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> <script type="text/javascript" src="js/jquery.jqtransform.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Cuenta atras jQuery('#text').epiclock({mode: EC_COUNTDOWN, format: 'V{<sup>dias</sup>} x{<sup>horas</sup>} i{<sup>minutos</sup>} s{<sup>segundos</sup>}', target: 'January 1, 2012 00:00:00'}).clocks(EC_RUN); //Esquinas redondeadas $('.rounded').corners('transparent'); //Transformar el formulario $("form.jqtransform").jqTransform(); // definimos las opciones del plugin AJAX FORM var opciones= { success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario }; //asignamos el plugin ajaxForm al formulario email_list y le pasamos las opciones $('#email_list').ajaxForm(opciones) ; //lugar donde defino las funciones que utilizo dentro de "opciones" function mostrarRespuesta (responseText){ $("#update").fadeOut("slow"); // Hago desaparecer el formulario $("#succes").fadeIn("slow").html(responseText); //muestro mensaje }; }); </script> </head> <body> <div id="header"> <h3>Como crear una Página de lanzamiento. Más tutoriales en: <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3> </div> <div id="wrapper"> <div id="cuadro2" class="rounded"> <div id="text" class="count_down"></div> </div> <div id="update"> <form id="email_list" class="jqtransform" action="ajax_usuarios.php" method="post"> <input type="text" class="input_text" name="email" value="Ingresa tu email para recibir actualizaciones" onclick="this.select();" /> <input type="submit" value="ENVIAR" class="input_button" /> </form> </div> <div id="succes"></div> </div> </body> </html> |
Con esto y un poco de código CSS ya tendriamos nuestra página de lanzamiento lista , y ademas podriamos juntar una base de datos con emails de los usuarios para poder enviarles actualizaciones.
Como siempre pueden ver el EJEMPLO TERMINADO
Y descargar el código fuente .( Recuerden de editar el archivo db.php con los datos de su propia base de datos y crear las tablas necesarias)
[...] ver un ejemplo online pueden ver el usado en este tutorial Comparte este [...]
Hola esta muy bueno el tuto, pero queria editarlo, pero recien estoy empezando en esto, y mi idea es que la fecha del lazamiento se pueda sacar desde la base de datos, ejm. tener una tabla de cumpleaños y que la pagina me indique cuanto queda para el siguiente cumpleaños como se podria hacer¿?
gracias
por favor ne pueden ayudar de como puedo saber cuando haiga llegado el tiempo 00:00:00 para que lanze un mensaje.
hola recien estoy empesando en esto, mi pregunta es por en la base de datos no ne envia Ñ o ñ º y otros caracteres, ya que al buscarlo mediante una consulata mysql no va existir y no reconoce estoy, hay una solucion???