Al comenzar a trabajar en una nueva idea para un sitio web, lo primero que probablemente haga es adquirir el nombre de dominio y configurar una especie de página próximamente (¿recuerda esas animaciones gif de sitios de construcción? ¡No las use! ).
De hecho, es una buena idea invertir algo de tiempo en el desarrollo de esta página. Este es el primer encuentro que los visitantes tienen contigo y tu producto. Incluso puede usarlo como un canal de marketing y permitir que las personas se suscriban a su boletín informativo de lanzamiento.
Es por eso que hoy estamos creando una elegante página próximamente, usando PHP, MySQL y jQuery. Le permitirá recopilar los correos electrónicos de los visitantes y almacenarlos en una tabla de base de datos simple. En el lado de la presentación, presenta una presentación de diapositivas elegante con la ayuda del complemento Nivo Slider.
El HTML
Primero echemos un vistazo al marcado HTML de la próxima página. La página fue diseñada para ser liviana y solo tiene una cantidad mínima de código.
próximamente.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.4.3/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/script.js"></script>
</body>
</html>
En la sección principal, incluimos las hojas de estilo:nuestro propio styles.css y nivo-slider.css , utilizado por el complemento Nivo Slider. Potencialmente, puede fusionar estos dos archivos en uno para las solicitudes, pero sería una exageración en este caso.
En la sección del cuerpo, definimos el marcado principal:básicamente dos encabezados, un formulario y un contenedor div con tres imágenes, utilizado por el control deslizante.
En la parte inferior incluimos tres archivos JavaScript. El primero importa jQuery 1.4.3 del CDN de Google, que es la versión más reciente de la biblioteca en el momento de escribir este artículo. Después viene el archivo de inclusión de nivo slider js y, por último, nuestro propio script.js , que se analiza en detalle en la última sección de este tutorial.
El CSS
Los estilos CSS, que afectan a la página, se definen en styles.css. Para que sea más fácil de modificar e incluir en un diseño existente, algunas de las reglas tienen el prefijo #page selector, que limita el efecto de las reglas solo a los elementos especificados:espacio de nombres CSS.
css/estilos.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;
} Las cosas están bastante claras aquí. Algo que vale la pena señalar es probablemente el text-indent negativo. técnica, que se utiliza ampliamente para mostrar una imagen de fondo y ocultar el contenido del elemento. Un inconveniente de este método, cuando se aplica a los botones de envío, es que debe forzar el texto a mayúsculas con la transformación de texto; de lo contrario, no funcionaría en versiones anteriores de IE.
El PHP
Para que esta página sea lo más simple posible, el código PHP que maneja el envío del formulario se encuentra en la parte superior del documento. Esto también facilita el manejo de situaciones en las que JavaScript no está disponible y el formulario se envía de forma normal (observe que en el paso HTML el atributo de acción del formulario está vacío; se enviará a la misma página).
próximamente.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 envió a través de AJAX (podemos saber si es así comprobando X_REQUESTED_WITH header) mostramos las respuestas como JSON, de lo contrario las asignamos a $msg variable que luego se imprime en la página.
Como estamos usando la extensión MySQLi, después de insertar el correo electrónico en coming_soon_emails (contiene solo una columna de correo electrónico y una marca de tiempo), necesitamos verificar la propiedad de las filas afectadas. La columna de correo electrónico se define como una clave principal y la inserción fallará en una dirección de correo electrónico duplicada.
JQuery
Como estamos usando el complemento Nivo Slider, gran parte del trabajo ya se ha hecho por nosotros y podemos dirigir nuestra atención al manejo del envío de formularios y las respuestas de 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();
}
Observe que la presentación de diapositivas de Nivo Slider se crea en window.load evento. Esto se hace para que podamos estar seguros de que todas las imágenes están cargadas y se pueden mostrar. Aunque este es el primer bloque de código en la página, en realidad se ejecuta en último lugar.
En el documento. bloque listo, vinculamos un detector de eventos para el evento de envío del formulario. Como el controlador devuelve un valor falso booleano, el formulario no se enviará, sino que enviaremos una solicitud de publicación de AJAX a la misma página y obtendremos una respuesta exitosa o un error, que se genera como el valor de la entrada de correo electrónico caja.
¡Con esto, nuestra elegante página de AJAX-ed Próximamente está completa!
Envolviéndolo
Puede utilizar esta página para presentar a los primeros visitantes las características de su próximo sitio web. Puede ampliarlo con una cantidad arbitraria de diapositivas y tal vez mejorar su SEO agregando uno o dos párrafos sobre cada diapositiva.
El mayor beneficio, con diferencia, es ofrecer una opción para las suscripciones por correo electrónico. Más tarde, puede ingresar a phpMyAdmin y exportar un archivo CSV amigable, listo para importar en su aplicación de marketing por correo electrónico favorita.