- Подробности
-
Категория: PHP. Синтаксис
В этом уроке я хочу показать, как создать простую страницу с обратным отсчетом времени с использованием PHP и jQuery. Что такое страница с обратным отсчетом времени? В общем, это страница, которая информирует посетителей сайта, о том, что он находится в стадии разработки и сколько времени осталось до его запуска. На странице находится счетчик с обратным отсчетом времени и форма, для добавления почтового адреса заинтересованных посетителей. В последствие, на сохраненные адреса можно разослать сообщение об открытии сайта. В этом уроке я покажу как создать страницу похожую на эту:
Эту страницу можно легко изменить и украсить с помощью CSS. Также вы можете добавить логотип вашей компании и любые другие элементы, редактируя HTML код.
demosourse
Небольшое вступление
Архив, который вы можете скачать с сайта готов к использованию и содержит следующие файлы:
index.php — сама страница с обратным отсчетом (счетчик и форма для)
config.php — обеспечивает подключение к базе даннах
insert.php — php код для добавления почтового адреса в базу данных
js/jquery-1.3.2.min.js — jQuery framework
js/countdown.js — скрипт обратного отсчета времени
1. index.php
index.php является непосредственным интерфейсом страницы с обратным отсчетом, который содержит обратный счетчик и форму добавления почтового адреса.
Скрипт счетчика обратного отсчета времени
Для того, чтобы создать счетчик я использовал скрипт обратного отсчета времени, который позволяет рассчитать время до определенного события в будущем. Оставшееся время будет зависеть от временной зоны посетителя. Вид счетчика можно полностью поменять в соответствии с вашими предпочтениями.
Все что вам нужно это добавить одну строчку кода между тегами <head> </head>:
<script type="text/javascript" src="/js/countdown.js"></script>
Затем, в теле страницы необходимо добавить следующий код счетчика:
<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
Чтобы установить нужную дату, необходимо заменить строку «July 6» и «0:0:00» на необходимые вам (например, 25 декабря):
new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
В результате получается:
new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")
Если вы хотите изменить стиль счетчика, вам необходимо внести изменения в следующие классы:
.count_down{…}
.count_down sup{…}
В частности класс .count_down{} изменяет формат цифр счетчика, класс .count_down sup{} определяет стиль текст "days", "hours", "minutes".
jQuery и форма ввода
Отлично, счетчик создан! Следующий шаг: подключить библиотеку jQuery к нашему сайту, для чего между тегами <head> </head> следующий код:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"> </script>
А теперь в теле страницы добавляем следующий код простой формы с одним полем ввода:
<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>
…и добавить в это поле сообщение после того как посетитель отправит свой почтовый адрес:
<div id="update_success">E-mail added!</div>
… вот результат, который должен получиться после отправки сообщения:
Форма с полем ввода исчезает с помощью красивого эффекта затухания (fade-out effect), а вместо нее появляется итоговое сообщение. А теперь, в заголовок страницы (между тегами ) после кода подключения библиотеки jQuery добавляем скрипт, который позволяет добавить ajax-функциональность. Это даст нам возможность добавить e-mail посетителя в базу данных без перезагрузки страницы:
<script type="text/javascript">
$(document).ready(function(){
$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
</script>
2. insert.php
Файл insert.php содержит в себе код, который сохраняет почтовый адрес посетителя в базу данных. Для примера я создал таблицу EMAIL с одним атрибутом «email». PHP код очень прост:
<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);
$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>
Для того, чтобы скрипт заработал на вашем сервере измените параметры подключения к вашей базе данных в файле config.php, создайте таблицу и загрузите все файлы урока на сервер. Наслаждайтесь!
*PHP*