Tag Archive for: pagina lanzamiento

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

Categories: JQuery, MySQL, PHP, Tutoriales - Tags: ,

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:

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&aacute;gina de lanzamiento. M&aacute;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)

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

Categories: JQuery, MySQL, PHP, Tutoriales - Tags: ,

En este tutorial les voy a enseñar como hacer una página de lanzamiento como la que en ocasiones nos encontramos cuando visitamos una web sin estrenar con su cuenta atras correspondiente. Además de la cuenta atras más adelante vamos a añadir un pequeño formulario de  contácto con AJAX para añadir emails a una base de datos y asi poder mantener a los visitantes actualizados.

cuenta-atras

Para empezar vamos a necesitar un plugin de JQuery muy completo llamado epiClock que va a ser el encargado de realizar la cuenta atras. La verdad que vale la pena echar una ojeada a la página de epiClock , ya que además de cuentas atras podemos crear todo tipo de relojes, cronometros , etc.

1
2

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.epiclock.min.js"></script>

Si queremos por ejemplo hacer una cuenta atras hasta el 2012 es tan facil como poner:

1
2
3
4

$(document).ready(function(){
//espero que cargue el DOM y llamo al plugin
  j jQuery('#reloj').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); 
});

Como pueden ver le paso tres parametros a .epiclock :

  • mode: El modo de cuenta atras (countdown).
  • format: El formato que quiero que en este caso es ‘<sup>dias</sup>’ para los dias y así susecivamente.
  • target: El tiempo final del contador pasado en modo de fecha.

Y por último inicio el contador con .clocks(EC_RUN)

Una ves que tengo el reloj definido voy a crear el código HTML necesario para que funcione:

1
2
3
4
5
6
7
8
9

<div id="header">
  <h3>Como crear una P&aacute;gina de lanzamiento. M&aacute;s tutoriales en: <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3>
</div>
<div id="wrapper">
           <div id="cuadro2" class="rounded">
               <div id="reloj" class="count_down"></div>
           </div>
 
</div>

Y le aplico el siguiente estilo:

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

body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#header{
 width:800px;
 height:80px; 
 text-align:center;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 } 
#cuadro2{
	padding:15px;
	background-color:#EEEEEE;
    border:1px solid #CCCCCC;
 
}
#wrapper{
	width:440px;
	margin:0 auto;
}
.count_down{
	padding: 3px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:38px;
	font-weight:bold;
	color:#222;
}
 
.count_down sup{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#555;
	padding:0px 10px 0 0;
	font-weight:normal;
}

Como toque final voy a redondear las esquinas del DIV contenedor del reloj con jquery.corners como vimos anteriormente en el blog.

 $('.rounded').corners('transparent');

Y con eso tendriamos nuestra cuentra atras particular. En el próximo tutorial les explico como crear un formulario con AJAX para guardar todos los emails en una base de datos de forma que podamos mantener actualizados con noticias a nuestros seguidores.
Ver Ejemplo Online
Descargar código

Te gusta?

© Copyright - Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más - by Timersys