Cuando nos ronda por la cabeza la idea de crear una página web, lo primero que hacemos, casi con toda probabilidad, es adquirir el nombre del dominio y después colgar la típica página de “Próximamente...” (¿recuerdas esas páginas web de antaño que mostraban el gif de un obrero para hacer entender al usuario que el sitio estaba en construcción?).
La verdad es que es una muy buena idea invertir algo de tiempo en el desarrollo de estos tipos de páginas. Se trata del primer encuentro que tendrán los visitantes con tu futura web y sobretodo, con tu producto. Puedes incluso utilizarla como canal de marketing y habilitar un formulario para que la gente pueda suscribirse al boletín de lanzamiento de la página.
Es por esto que, en la actualidad, creamos páginas totalmente diferentes de aquel gif animado de un obrero picando, y utilizamos más de la tecnología que tenemos a nuestro alcance como PHP, MySQL o jQuery, por nombrar algunos lenguajes. En este ejemplo vamos a ver cómo crear una página de “Próximamente...” en la cual se puedan ingresar cuentas de correo a través de un formulario y almacenarlas en una tabla de la base de datos. Además, cuidaremos la presentación de dicha página haciendo uso del plugin Nivo Slider.
El HTML
Primero vamos a ver el diseño HTML de la página de “Proximamente...”. La página ha sido diseñada para ser ligera y tener la mínima cantidad de código.
coming-soon.php
<!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.2.2.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 incluimos las hojas de estilo, nuestra propia styles.css y el nivo-slider.css, utilizada por el plugin Nivo Slider. En la sección del body, definimos la estructura principal: básicamente dos cabeceras, un formulario y un div contenedor con tres imágenes, utilizadas por el slider.
En el pie, incluimos los tres archivos JavaScript. El primero que importa la última versión de jQuery, el segundo que hace la llamada al plugin Nivo Slider y por último nuestro fichero javascript script.js, en el que gestionaremos las labores ajenas a estos dos ficheros.
El CSS
Los estilos CSS que afectan a toda la página, están definidos en styles.css. Para hacer que sea más sencillo el modificarlo e incluirlo en un diseño existente, muchas de las reglas vienen prefijadas con el selector #page, que limita el efecto de las reglas solo a los elementos especificados.
css/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;
}
Algo digno de mención, es probablemente la técnica del text-indent negativa, que se utiliza ampliamente para mostrar una imagen de fondo y ocultar el contenido del elemento. Un pero de este método es, que cuando lo aplicamos a botones submit, es necesario forzar el texto a mayúsculas con text-transform, de lo contrario no funcionaría en versiones antiguas de IE.
El PHP
Para hacer esta página lo más simple posible, pon el código PHP que lleva a cabo el envío del formulario en la parte superior del documento. Esto hace que sea más sencillo manejar esas situaciones en las que Javascript no esté habilitado, y el formulario sea enviado de manera normal (ten en cuenta que en la sección HTML el atributo action está vacío, por lo que se enviará a la misma página).
coming-soon.php
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->query("INSERT INTO coming_soon_emails
SET email='".$mysqli->real_escape_string($_POST['email'])."'");
if($mysqli->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'=>$e->getMessage())));
}
$msg = $e->getMessage();
}
}
Si el formulario se ha enviado a través de AJAX (podemos comprobarlo mediante el header HTTP_X_REQUESTED_WITH) la respuesta se devolverá como JSON, si no, la asignaremos a la variable $msg que, más tarde, se imprimirá en la página.
Como estamos usando la extensión mysqli, después de que insertes el correo electrónico en la tabla coming_soon_emails (que contiene sólo una columna para el email y un timestamp) necesitamos comprobar la propiedad affected rows. La columna de email está definida como una primary key, y la inserción producirá un error si la dirección de correo electrónico ya está en la base de datos.
El jQuery
Usar el plugin Nivo Slider nos ahorrará muchísimo trabajo. Además podemos prestar más atención a la recepción del formulario y a las respuestas AJAX.
js/script.js
$(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();
}
Observa que el slide de Nivo Slider se crea en el evento window.load. Por ello, podemos estar seguros de que todas las imágenes se cargarán y estarán listas para mostrarse. Aunque este sea el primer bloque de código de la página, en realidad se ejecuta al final.
En el bloque .ready, asignamos un detector de eventos para el evento de enviar el formulario. Como el handler devuelve un valor falso booleano, el formulario no se envía y en su lugar estamos enviando una solicitud POST AJAX de nuevo a la misma página.
Con esto estaría lista nuestra página de “Próximamente...” en AJAX.
Fuente: tutorialzine.com