Creando una página de construcción con jQuery. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet PHP

¡votar!

Creando una página de construcción con jQuery

Cuando iniciamos un nuevo proyecto, partiendo desde cero, es habitual ver las clásicas páginas de “En construcción” con un Gif animado un poco cutre. Para estas ocasiones, vale la pena dedicar un poco más de tiempo a esta página, ya que será el primer contacto que el usuario tendrá con nuestra página, y la primera impresión puede ser importante para que vuelva de nuevo.

Nosotros vamos a crear una página de presentación, donde los usurios podrán mandar las direcciones de sus correos, para que cuando esté activa la página, notificárselo a ellos. Para ello utilizaremos PHP, MySQL y jQuery.

Como siempre en estos casos, empezaremos creando la estructura HTML que tendrá la página.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX-ed Coming Soon Page with jQuery and PHP | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/nivo-slider.css" />
</head>
<body>
<div id="page">
<h1>Coming Soon</h1>
<div id="slideshowContainer">
<div id="slideshow">
<img src="img/slides/slide1.jpg" width="454" height="169" alt="Coming Soon: Our Awesome Web App">
<img src="img/slides/slide2.jpg" width="454" height="169" alt="Extensive Functionality">
<img src="img/slides/slide3.jpg" width="454" height="169" alt="Complete with an iPhone App">
</div>
</div>
<h2>Subscribe</h2>
<form method="post" action="">
<input type="text" id="email" name="email" value="<?php echo $msg?>" />
<input type="submit" value="Submit" id="submitButton" />
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/script.js"></script>
</body>
</html>

En el head de la página, incluimos las llamadas a los archivos de estilo de la web. Si os fijáis, incluimos los estilos nivo-slider.css, y es que utilizaremos este slider para mostrar imágenes en esta página.

En el cuerpo, nosotros definimos dos marcos principales: un formulario donde enviar la dirección de email y un contenedor con tres imágenes que irán rotando mediante el nivo-slider.

En la parte final del código, es donde hacemos la llamada a los archivos javascript, en este caso al framework jQuery, el nivo-slider y nuestro archivo javascript de funciones.

Lo siguiente que vamos a hacer es asignar los estilos, que estarán dentro de la hoja styles.css.

#page{
width:330px;
margin:70px auto 100px;
}
#slideshow{
height:169px;
overflow:hidden;
width:454px;
}
#slideshowContainer{
padding:10px;
background-color:#181819;
margin:30px 0 50px -72px;
width:454px;
border:1px solid #1f1f20;
}
#page h1,
#page h2{
text-indent:-9999px;
overflow:hidden;
height:105px;
background:url('../img/coming_soon.png') no-repeat;
}
#page h2{
height:76px;
background:url('../img/get_notified.png') no-repeat;
margin-bottom:20px;
}
#page form{
background-color:#181819;
display:block;
height:31px;
padding:10px;
position:relative;
width:323px;
margin-left:-7px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
#email{
background:url('../img/submit_form.png') no-repeat;
border:none;
color:#888888;
height:31px;
left:10px;
line-height:31px;
padding-left:8px;
position:absolute;
text-shadow:1px 1px 0 #FFFFFF;
top:10px;
width:215px;
outline:none;
}
#submitButton{
background:url('../img/submit_form.png') no-repeat right top;
border:none;
cursor:pointer;
height:31px;
left:236px;
line-height:31px;
position:absolute;
text-indent:-99999px;
text-transform:uppercase;
top:10px;
width:96px;
}
#submitButton:hover{
background-position:right bottom;
}

De este código no comentaremos nada, ya que se utiliza cosas sencillas que hemos visto en otras ocasiones.

Lo siguiente que veremos será el código correspondiente al PHP, que será el encargado de gestionar el envío del formulario y su almacenamiento en base de datos, tras ser llamado desde el fichero JavaScript.

require "includes/connect.php";
$msg = '';
if($_POST['email']){
// Requested with AJAX:
$ajax = ($_SERVER['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest');
try{
if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
throw new Exception('Invalid Email!');
}
$mysqli-&#62;query("INSERT INTO coming_soon_emails
SET email='".$mysqli-&#62;real_escape_string($_POST['email'])."'");
if($mysqli-&#62;affected_rows != 1){
throw new Exception('This email already exists in the database.');
}
if($ajax){
die('{"status":1}');
}
$msg = "Thank you!";
}
catch (Exception $e){
if($ajax){
die(json_encode(array('error'=&#62;$e-&#62;getMessage())));
}
$msg = $e-&#62;getMessage();
}
}

Si el formulario se envió a través de AJAX (podemos decir si esto es así por la comprobación de la cabecera X_REQUESTED_WITH) nosotros mandamos por la salida un objeto JSON, de lo contrario mostramos asignamos en $msg el mensaje que pintaremos por la pantalla.

Para la insercción del registro en la base de datos, utilizamos MySQLi, pero se puede utilizar MySQL o el motor de base de datos que queráis.

Por último veremos el código correspondiente al javascript. En este archivo, nosotros tendremos la llamada al slider que vamos a utilizar para rotar las imágenes, así como el código para hacer el envío del formulario para enviarlo a la base de datos.

$(window).load(function() {
// Creating the Nivo Slider on window load
$('#slideshow').nivoSlider({
pauseTime:5000,
directionNav:false,
controlNav:false
});
});
$(document).ready(function(){
// Binding event listeners for the form on document ready
$('#email').defaultText('Your Email');
// 'working' prevents multiple submissions
var working = false;
$('#page form').submit(function(){
if(working){
return false;
}
working = true;
$.post("./coming-soon.php",{email:$('#email').val()},function(r){
if(r.error){
$('#email').val(r.error);
}
else $('#email').val('Thank you!');
working = false;
},'json');
return false;
});
});
// A custom jQuery method for placeholder text:
$.fn.defaultText = function(value){
var element = this.eq(0);
element.data('defaultText',value);
element.focus(function(){
if(element.val() == value){
element.val('').removeClass('defaultText');
}
}).blur(function(){
if(element.val() == '' || element.val() == value){
element.addClass('defaultText').val(value);
}
});
return element.blur();
}

Podéis ver un ejemplo de esto en la siguiente dirección.