Como crear una página de lanzamiento con PHP, AJAX y JQuery – II Parte
Posted on August 15, 2009 by DamianNo Comments
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.
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
// 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
<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)
Tags: jquery.plugin, pagina lanzamiento
Filed Under: JQuery, MySQL, PHP, Tutoriales
Con tu lector preferido.
Via Email.
Por Twitter.