главная

Теги:


Страница о разработке нового продукта с использованием AJAX

Когда начинаешь разрабатывать новый продукт, первое, что приходит на ум для организации продаж - зарегистрировать доменное имя и сделать страницу "Готовится к выпуску" (Помните типовую анимацию реконструкции сайта? Очень плохая идея - использовать в таких случаях изображение копающего человека!).

А что если инвестировать немного времени для создания страницы с рекламой будущего продукта? Первые случайные посетители познакомятся с вашим продуктом. Вы можете даже использовать маркетинговый канал для сбора подписчиков на письмо о запуске рабочей версии.

В данном уроке мы разберем процесс создания стильной страницы о предстоящих выпусках нового продукта. Для данной страницы будут использоваться PHP, MySQL и jQuery. Она позволит собрать e-mail адреса посетителей и сохранить их в простой таблице базы данных. Презентационная сторона проекта будет выражена использованием отличного слайд шоу на основе плагина Nivo Slider.

HTML

Сначала рассмотрим разметку HTML нашей страницы. Она разрабатывается с использованием минимума кода и очень легкой.

coming-soon.php

 





Страница о предстоящих выпусках с использованием AJAX, jQuery и PHP | Демонстрация для сайта RUSELLER.COM




Готовится к выпуску

JavaScript + jQuery для начинающих в видеоформате Технические секреты продуктивной работы в онлайн бизнесе Joomla - профессиональный сайт за один день

Подписка

В разделе заголовка страницы вставляются таблицы стилей – наш файл styles.css и nivo-slider.css, который используется плагином Nivo Slider. В принципе можно объединить эти фалы в один, но в нашем случае это будет излишеством.

В разделе body определяется разметка – два заголовка, форма, и элемент div с изображениями, которые используются слайдером.

Внизу файла подключаются скрипты JavaScript. Первый импортирует jQuery 1.4.3 из Google CDN, в котором хранится самая свежая версия библиотеки. Затем идет файл плагина слайдера и завершает список наш файл script.js, который будет описан позже в данном уроке.


 

CSS

Стили CSS для страницы определяются в файле styles.css. Для того, чтобы их легче было модифицировать и подстраивать под существующий дизайн, некоторым правилам предшествует селектор #page, который ограничивает эффект действия правил только заданным элементом – пространство имен CSS.

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;
}

Правила достаточно просты. Единственное, о чем стоит сказать, что используется техника отрицательных смещений текста, с помощью которой скрывается содержание элементов и выводятся только фоновые изображения. При использовании данного метода для кнопки "Отправить" нужно установить свойство text-transform: uppercase; , иначе в старых версиях IE методика не будет действовать.

PHP

Чтобы сделать страницу простой, насколько возможно, PHP код, управляющий передачей формы, располагается вверху документа. Таким образом, также будет проще обрабатывать ситуацию, когда JavaScript не доступен, и форма обрабатывается обычным способом (обратите внимание, что в разметке HTML атрибут действия для формы пуст – она будет передаваться на ту же страницу).

coming-soon.php


require "includes/connect.php";

$msg = '';

if($_POST['email']){
	
	// Заправшиваем с использованием AJAX:
	$ajax = ($_SERVER['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest');
	
	try{
		if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
			throw new Exception('Неправильный email!');
		}

		$mysqli->query("INSERT INTO coming_soon_emails
						SET email='".$mysqli->real_escape_string($_POST['email'])."'");
		
		if($mysqli->affected_rows != 1){
			throw new Exception('Данный email уже есть в базе данных.');
		}
		
		if($ajax){
			die('{"status":1}');
		}
		
		$msg = "Спасибо!";
		
	}
	catch (Exception $e){
		
		if($ajax){
			die(json_encode(array('error'=>$e->getMessage())));
		}
		
		$msg = $e->getMessage();		
	}
}

Если форма передается через AJAX (мы можем определить это с помощью проверки заголовка X_REQUESTED_WITH ), мы выводим ответ как JSON. Иначе мы используем переменную $msg, которая позже будет выводиться на странице.

Так как мы используем расширение MySQLi, после вставки адреса email в таблицу coming_soon_emails(она содержит только адреса и время) нужно проверить свойства соответствующих строк. Адрес email определен как основной ключ, и попытка вставить дублирующийся адрес приведет к ошибке.

Примечание: если вы планируете установить страницу на свой хост, то вам нужно создать таблицу coming_soon_emails с помощью запроса в файле table.sql (доступен в исходниках) и phpMyAdmin. Затем надо заполнить сведения о соединении с сервером MySQL в файле includes/connect.php.


jQuery

Мы используем плагин Nivo Slider. Он берет на себя много работы, а мы можем уделить внимание обработке формы и ответам AJAX.

js/script.js

$(window).load(function() {
	
	// Создаем слайдер Nivo после загрузки окна
	
	$('#slideshow').nivoSlider({
		pauseTime:5000,
		directionNav:false,
		controlNav:false	
	});
});

$(document).ready(function(){

	// Привязываем обработчики событий к форме после готовности документа

	$('#email').defaultText('Ваш адрес Email');

	// 'working' предотвращает ситуацию с несколькими одновременными отправками
	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('Спасибо!');
			
			working = false;
		},'json');
		
		return false;
	});
});

// Пользовательский метод jQuery для замещающего текста

$.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();
}

Обратите внимание, что слайдшоу Nivo Slider создается в обработчике события window.load . Таким образом, мы можем быть уверены, что все изображения загружены и будут выводиться. Хотя данный блок кода идет первым на странице, выполняется он последним.

В блоке document. ready, мы привязываем обработчик события для отправки формы. Так как обработчик возвращает логическое значение false, форма не передается, вместо этого мы отправляем запрос AJAX post к нашей странице и получаем либо ответ об успехе, либо сообщение об ошибке, а ответ выводится в поле ввода адреса.
Готово!


Заключение

Вы можете использовать такую страницу для того, чтобы познакомить первых посетителей с особенностями и функциями разрабатывающегося сайта. Слайдшоу можно дополнить большим количеством слайдов, а также можно добавить один-два абзаца текста с описанием, которые улучшат SEO.

Существенным преимуществом является опция подписки на новость о запуске. Вы можете потом просто импортировать базу адресов и использовать ее для проведения маркетинговых акций.

Источник урока: tutorialzine.com/2010/10/ajaxed-coming-soon-page/

Урок Создан:2011-02-08 Просмотров:4732

Добавить комментарий:


Copyright© 2009 Hosted by Zhost