Como crear una página de lanzamiento con PHP, AJAX y JQuery - II Parte

Como crear una página de lanzamiento con PHP, AJAX y JQuery – II Parte

Publicado en August 15, 2009 by Damian

Hoy 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.

cuenta-atras

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

<?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

<!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://blog.timersys.com">http://blog.timersys.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)

Comparte este artículo: