Создаём event-сайт за 10 минут

Или готовый алгоритм, чтобы попробовать уложиться в хронометраж
3 минуты8029

Так получилось, что примерно год назад в поисках дополнительного заработка я наткнулся на один крайне необычный дружеский заказ. Необходимо было создать сайт, посвящённый ряду значимых событий из жизни компании, например, конференций. Структура крайне проста: одна страница посвящена общей информации о встрече, другая выделена под форму для регистрации, третья содержит контакты организаторов и адрес, а главная – таймер обратного отсчёта. Оригинальность заключалась в крайне низких требованиях по качеству выходного продукта. Точнее, описанная выше структура – вообще единственное требование заказчиков. Всё дело в том, что в России (а, может, и не только) существует достаточно распространённая практика - создавать event-сайты силами своих непрофильных сотрудников. Мол, так не надо объяснять специфику, а каждую мелкую доработку можно вносить оперативно.

Забегая вперёд, скажу, что сайтов принципиально сложнее ни до ни после того случая я не создавал, зато именно подобных заказов впоследствии выполнил с десяток. Поэтому, дабы повысить и собственную грамотность, и поделиться опытом, предлагаю вам вместе со мной пройтись по основным моментам такой работы.

Выбор средств

Итак, создать простую страницу с четырьмя страницами можно даже в блокноте, но мы воспользуемся одной из специальных программ с готовыми шаблонами вёрстки. Использовать мощные продукты или CMS, о которых мы недавно писали, нет большого смысла ввиду простоты задачи. В данном случае возьмём условно бесплатный Website X5.

Здесь достаточно 5 минут, чтобы выбрать готовый шаблон и фоновый рисунок, разместить меню, задать шрифты, написать заголовки и заполнить текстовые разделы (не преминув воспользоваться дополнительными возможностями, вроде вставки карты):

Создаём форму регистарции

Всё это действия, с которыми справится абсолютно любой человек с минимальными компьютерными навыками, поэтому перейдём сразу к требованиям заказчика. Нам нужна форма для заполнения с последующей отправкой в письме к регистрирующему. Не будем изобретать велосипед, создадим простую форму со следующим кодом:

<form action="" method=post>

<p>Если вы хотите попасть на нашу конференцию, пожалуйста заполните поля, расположенные ниже:<p>

<div align="right">

ФИО:

<input type="text" name="FIO" size="100"><br />

Компания:

<input type="text" name="company" size="100"><br />

Должность:

<input type="text" name="position" size="100"><br />

Контактный телефон:

<input type="text" name="phone" size="100"><br />

<input type="submit" value="Отправить" name="submit"></div>

</form>

В php пишем обработчик отправки:

<?php

if($_POST['submit']) {        //обработка нажатия кнопки «Отправить»

$FIO = substr(htmlspecialchars(trim($_POST['FIO'])), 0, 1000);    //  защита строк от ввода кода

$company = substr(htmlspecialchars(trim($_POST['company'])), 0, 1000);

$position = substr(htmlspecialchars(trim($_POST['position'])), 0, 1000);

$phone = substr(htmlspecialchars(trim($_POST['phone'])), 0, 1000);

$title = ‘Регистрация гостя';

$mess = '   //формируем сообщение регистратору

Имя гостя:'.$_POST['FIO'].'

Компания:'.$_POST['company'].'

Должность:'.$_POST['position'].'

Телефон:'.$_POST['phone'];        

$to = 'brain@geek.ru';    //   здесь вводим адрес электронной почты регистратора

$from='geek@brain.ru';     //    здесь адрес, с которого будут идти эти письма

mail($to, $title, $mess, 'From:'.$from);     //   отправка письма

echo 'Заявка принята, мы совсем скоро свяжемся с Вами!';

}

?>

Описанные блоки также достаточно просты и понятны (и даже прокомментированы). По желанию можно «прикрутить» к нему защиту от пустых полей и запрещённых символов, проверку длины кода и прочие мелочи. Для этого потребуется лишь оператор if и немного времени. Я же не стал засорять этим код для удобства чтения.

Обратный отсчёт

Дальше на главной странице необходимо создать таймер. Есть два пути, но я чаще всего пользуюсь наименьшим сопротивлением и заливаю скрипт с ссылкой на уже готовое решение. Ну, например, вот это. Есть вариант сложнее, без ссылок и чужого творчества, зато с возможностью спокойно добавить автоматический запуск события в час Х:

<SCRIPT language="JavaScript" type="text/javascript"> 
function fulltime () { 
var time=new Date();    //    создаём переменную текущего времени в нашем коде
var Event=new Date("dec,31,2015,10:10:10");      //   а это дата и время нашего события
var totalRemains=(Event.getTime()-time.getTime());    // вычисляем разницу

if (totalRemains>1){    //если у нас осталось ещё немного времени
var RemainsSec = (parseInt(totalRemains/1000));   //   то вычисляем оставшееся время
var RemainsFullDays=(parseInt(RemainsSec));    //   из него извлекаем полные дни
var secInLastDay=RemainsSec-RemainsFullDays*24*3600;   // из оставшегося
var RemainsFullHours=(parseInt(secInLastDay/3600));   //   полные часы
if (RemainsFullHours<10){RemainsFullHours="0"+Remains FullHours}; 
var secInLastHour=secInLastDay-RemainsFullHours*3600; 
var RemainsMinutes=(parseInt(secInLastHour/60));   //   минуты
if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinu tes}; 
var lastSec=secInLastHour-RemainsMinutes*60;     //секунды
if (lastSec<10){lastSec="0"+lastSec}; 

document.getElementById("RemainsFullDays").innerHT ML=RemainsFullDays+" секунд"; 
setTimeout('fulltime()',10) 
} 

else{ 
document.getElementById("clock").innerHTML="Проходите на главную страницу, там вся информация";      //  ну а если времени не осталось, то меняем время на нашу строку
} 
} 
</SCRIPT> 

<body>   //  после этого остаётся лишь запустить скрипт на странице
<div align="center"><span id="clock"></div> 
<div align="center"><b><span id="RemainsFullDays"></span></b></div><br> 
</span> 

<SCRIPT language=JavaScript>fulltime();</SCRIPT>


Как видим, тоже не самая сложная работа (кстати, за код большое спасибо господину Serberg-у с одного из форумов рунета). Дальше можно до бесконечности наводить красоту, экспериментировать с шрифтами, фотографиями, форматировать текст и верстать отдельные блоки – всё что фантазии угодно. Перед нами готовый event-сайт, который можно показать неискушённому заказчику и быть готовым выслушать его замечания.

Хотите верьте, хотите нет, но вот так вот просто, потратив всего несколько часов свободного времени, можно сделать работу, для которой, по мнению людей, немного покрывшихся чешуёй динозавров, требуются недели. И правду мы им ни за что не откроем.

Хотите стать программистом? Рекомендуем профессию «Веб-разработчик».

phphtmlобучениеобмен опытомвеб-разработка
Нашли ошибку в тексте? Напишите нам.
Спасибо,
что читаете наш блог!