По данным исследования, проведенного International Date Corporation, на вопрос: «Что следует понимать под термином «документы»?» почти 50 % респондентов указали в ответе «web-странички» и почти 80 % «сообщения электронной почты». Это и не удивительно, ведь тенденция такова, что конечный пользователь в качестве предпочтительного способа получения информации выбирает Internet. Поэтому среди компаний как крупного, так и малого (частного) бизнеса, акценты смещаются в область привлечения новых клиентов и их удержания за счет представления более качественных информационных сервисов. Те компании, которые не смогут обеспечить рост предоставления качественной информационной услуги, вынуждены будут уйти с рынка. Таким образом, основным из направлений развития IT-технологий в компании становится рост контента. И для эффективного управления им нужны новые технологии ввода, хранения и управления данными взамен уже имеющихся, лишенных интерактивности страничек.
Современный сайт компании должен быть разработан, во-первых, с соблюдением обязательных интернет-стандартов, которые разрабатываются консорциумом w3c (World Wide Web Consortium, консорциум всемирной паутины), во-вторых, контент должен быть структурирован, иметь единое дизайнерское оформление и быть удобным для пользователя и, в-третьих, web-страницы должны быть небольшого размера, для обеспечения доступа к ним с различных устройств [1].
Целью предстоящей работы являлось удовлетворение современных IT-потребностей заказчика за счет модернизации имеющегося сайта.
От заказчика поступило предложение изменить имеющийся сайт. Требовалось решить техническую проблему: исправить некорректную работу всплывающего окна выбора города. И выполнить задачи: во-первых, дополнить сайт страницами, на которых должны разместиться текстовая информация и фотографии; во-вторых, реализовать увеличение фотографий при нажатии на них; в-третьих, добавить всплывающую форму обратной связи; в-четвертых, форму обратной связи разместить на английской версии страницы на английском языке; в-пятых, приложить карту с адресом предприятия.
Реализацию автоматизации представления данных пользователю решено было делать с помощью системы управления содержимым (CMS), т.к. это менее затратный вариант. Проведя анализ возможностей таких CMS-систем, как WordPress, Joomla, Magento, Drupal, в условиях ограниченности бюджета анализировались только бесплатные и свободно доступные системы, был сделан выбор в пользу CMS Drupal по ряду преимуществ: во-первых, достаточно быстрая обработка запросов – 30–40 запросов к БД с одной страницы, во-вторых, в Drupal можно использовать либо стандартные модули, либо создавать собственные модули, и в-третьих, данная CMS включает в себя таксономию данных [6].
Так как работа предстояла с действующим сайтом, то для того чтобы не останавливать работу сайта и не повредить его, было принято решение создать копию базы данных и перенести ее на вспомогательный сервер.
Решение технической проблемы заказчика
Чтобы решить проблему некорректной работы всплывающего окна выбора города, надо среди имеющихся файлов найти файл page.tpl.php, который отвечает за формирование внешнего вида всех страниц сайта, т.е. создает пустую страницу [2, 4], и прописать в нем код, приведенный ниже (подключаем класс IPGeo и выгружаем список IP-адресов и соответствующих им городов):
$IP = $_SERVER[‘REMOTE_ADDR’];
$serverdomain=explode(‘.’,$_SERVER[‘SERVER_NAME’]);
$ipList = new IPGeo($IP);
$city = $ipList->xml;
$city=str_replace(«<?xml version=’1.0’ encoding=’Windows-1251’?>»,’’,$city);
$html_utf8 = mb_convert_encoding($city, «utf-8», «windows-1251»);
$xml=simplexml_load_string($html_utf8);
$city=(string)$xml->ip->city;
Если в строке URL есть один из поддоменов, то диалоговое окно с таблицей выбора города не всплывает, а выбирается тот город, которому соответствует поддомен. В cookie помещается информация о городе. Ниже приведен фрагмент кода:
$question=true;
if ( $serverdomain[0]==’хххх’)
{if (isset($_COOKIE[«city»])||$_COOKIE[«city»]!=’’)
if ($_COOKIE[«city»]==’Тюмень’) $question=false;
elseif($_COOKIE[«city»]==’Сочи’){header(‘Location: http://www.sochi.хххх.ru’); exit() }
elseif($_COOKIE[«city»]==’Челябинск’) {header(‘Location: http://www.chel.хххх.ru’); exit();}
Если поддомена нет, то смотрим в cookie IP-адрес, если он соответствует одному из адресов, имеющихся в ipliste – диалоговое окно не всплывает. Осуществляется переход на адрес сайта с поддоменом соответствующего города, как показано во фрагменте кода, приведенного ниже.
if ($question==true)
{ if($city==’Сочи’){ header(‘Location: http://www.sochi.хххх.ru’); exit(); }
elseif($city==’Челябинск’) { header(‘Location: http://www.chel.хххх.ru’); exit(); }
elseif($city==’Тюмень’){ $question=false; } } }
else $question=false; $city=’Тюмень’; $cities=taxonomy_get_tree(3);
if (isset($cities)){$to_chose=array();
foreach($cities as $city_item)
{ if($city_item->name!=$city) $to_choose[]=array(‘tid’=>$city_item->tid,’name’=>$city_item->name);
else $chosen=array(‘tid’=>$city_item->tid,’name’=>$city_item->name); } } ?>
В том случае, если поддомена нет и IP-адрес не соответствует, то всплывает диалоговое окно с выбором города. Формирование внешнего вида всплывающего окна:
<div class=»fono_1»></div>
<div id=»cityparentpopup»<?=$question==true?’style=»display:block;»’:’style=»display:none;»’?>>
<div id=»city-popup»>
<div class=»city-question»>
<button id=»city-close» class=»city-close <?=!isset($_SESSION[‘city’])?’first’:’’?>»></button>
<div class=»city-question-text»> Ваш город <strong><?=$chosen[‘name’]?></strong>? </div> <button id=»city-yes» class=»city-yes» cityid=»<?=$chosen[‘tid’]?>»>Да</button></div>
<div class=»city-list»>
<div class=»city-question-text»> Ecли <strong>нет,</strong> тогда выберите</div>
<div class=»city-list-items»><?foreach($to_choose as $item){?> <div class=»city-list-item» cityid=»<?=$item[‘tid’]?>»><?=$item[‘name’]?></div> <?}?> </div> </div> </div>
В первом и во втором случаях в кэш сохраняется информация о городе, которая хранится в пределах одной сессии. Ниже приведен фрагмент кода:
<? $_SESSION[‘city’]=»Тюмень»;
if (strpos($_SERVER[‘HTTP_HOST’],’tmn’) !== false){
$_SESSION[‘city’]=»Тюмень»; }
if (strpos($_SERVER[‘HTTP_HOST’],’chel’) !== false){
$_SESSION[‘city’]=»Челябинск»; }
if (strpos($_SERVER[‘HTTP_HOST’],’sochi’) !== false){
$_SESSION[‘city’]=»Сочи»; }
if (isset($_SESSION[‘city’]))
$adr=taxonomy_get_term_by_name($_SESSION[‘city’],’city’);
else
{ $adr=taxonomy_get_term_by_name($city,’city’);
$_SESSION[‘city’]=$city; }
if (!empty($adr)) $adr=array_shift($adr);
?> <div id=»user-city» style=»display: none;»><?=isset($adr->tid)?$adr->tid:’’;?></div>
<? $prod_count=0;
if (isset($_SESSION[‘commerce_cart_orders’])) $prod_count=count($_SESSION[‘commerce_cart_orders’]); ?>
Дополнение сайта страницами с текстом и фотографиями
Вся необходимая текстовая информация и фотографии были размещены в новом созданном типе материала page в самой CMS Drupal с использованием HTML кода, PHP кода и уже существующих таблиц стилей [3, 5].
Для того, чтобы разграничить внешний вид на старых страницах и на новых, используем функцию current_path(), результат которой зависит от того, к каким страницам указан путь: если к новым, то выполняется код, формирующий внешний вид для новых страниц, если к старым, то используется уже имеющийся код. В том же самом файле page.tpl.php перед кодом формирования страницы (тегами <HTML></HTML>) пишем:
if ( current_path() == «страница №1»)
{?> ……… <?php}
elseif ( current_path() == «страница №2») {?> ……. <?php }
else { ?> <?php ……….. }?>
Реализация увеличения фотографий при нажатии
Для добавления функции просмотра фотографий прописываем перед каждой фотографией ссылку на оригинальное фото и rel=»fancybox». Fancybox – это скрипт, который выводит любой медиаконтент в сплывающем окне. Код выглядит следующим образом:
<a href=»/sites/all/themes/newtheme/images/ezsp/franshiza/interier/b1.jpg» rel=»fancybox»>
<img src=»/sites/all/themes/newtheme/images/ezsp/franshiza/interier/1.jpg» style=»border-radius: 10px; float: right;» /> </a>
Добавление формы обратной связи
Всплывающая форма обратной связи была уже создана в Drupal и использовалась на других страницах. Ее код прописан в CSS. Требовалось, чтобы эта форма вызывалась при нажатии на кнопку «Позвоните мне».
<button class=»goto-shop»> ПОЗВОНИТЕ МНЕ</button>
Размещение формы обратной связи на английской версии страницы
Форма обратной связи на английском языке была реализована за счет использования самостоятельно написанного модуля обратной связи.
<?php function feedbackenglish_menu() {$items[‘feedbackenglish’] = array(‘title’ => ‘Do You want us to call You?’, ‘page callback’ => ‘drupal_get_form’, ‘page arguments’ => array(‘feedbackenglish_feedbackenglishform’), ‘access callback’ => TRUE, ‘type’ => MENU_NORMAL_ITEM);
$items[‘feedbackenglish/result’] = array(‘title’ => ‘Do You want us to call You?’, ‘page callback’ => ‘feedbackenglish_feedbackenglishform_result’, ‘access callback’ => TRUE, ‘type’ => MENU_NORMAL_ITEM);
return $items;}
function feedbackenglish_feedbackenglishform_result()
{$res = ‘<div id=»breadcrumbs»><a href=»/»>Home page</a></div><h1>Do You want us to call You?</h1>’;
$res.= ‘<p>Thank you for your message!</p><p>In the near future, our staff will contact you to answer.</p><p><a href=»/»>Go to home page</a></p>’; return $res;}
function feedbackenglish_feedbackenglishform($form, &$form_state) {
$form[‘#method’] = ‘post’; $form[‘#attributes’] = array(‘enctype’ => ‘multipart/form-data’,);
if (arg(0)==’feedbackenglish’) {$form[‘#prefix’] = ‘<div id=»breadcrumbs»> <a href=»/»>Home page</a> </div><h1>Do You want us to call You?</h1><div id=»feedbackenglish»>’;}
else { $form[‘#prefix’] = ‘<h1>Do You want us to call You?</h1><div id=»feedbackenglish»>’; }
$form[‘#suffix’] = ‘</div>’; $form[‘firstnameenglish’] = array( ‘#title’ => t(‘Your name:’), ‘#type’ => ‘textfield’, ‘#required’ => TRUE, );
$form[‘phone’] = array( ‘#title’ => t(‘Your telephone number:’), ‘#type’ => ‘textfield’, ‘#required’ => TRUE, );
$form[‘messageenglish’] = array(‘#title’ => t(‘Comment:’), ‘#type’ => ‘textarea’, ‘#required’ => FALSE, );
$form[‘tip’]=array(‘#markup’=>’<div class=»cart-field-attention»>Fields marked with an asterisk (<span>*</span>) are compulsory</div>’ );
$form[‘submit’] = array(‘#type’ => ‘submit’, ‘#value’ => t(‘SEND’)); return $form;}
function feedbackenglish_feedbackenglishform_submit($form, &$form_state)
{ $messageenglish=’На сайте http://хххх.ru заполнили форму обратной связи:’.chr(13).chr(10).chr(13).chr(10);
$messageenglish.=’Имя: ‘.$form_state[‘input’][‘firstnameenglish’].chr(13).chr(10);
$messageenglish.=’Телефон: ‘.$form_state[‘input’][‘phone’].chr(13).chr(10);
$messageenglish.=’Сообщение: ‘.$form_state[‘input’][‘messageenglish’].chr(13).chr(10);
$emails=taxonomy_term_load($form_state[‘input’][‘city’]);
foreach ($emails->field_city_email[‘und’] as $email){drupal_mail(‘system’, ‘mail’, $email[‘email’], language_default(), array(‘context’ => array(‘subject’ => ‘Сообщение с сайта хххх.ru’, ‘messageenglish’ => $messageenglish,)));}
$form_state[‘redirect’] = ‘feedbackenglish/result’;}?>
Приложение карты с адресом предприятия
Чтобы добавить Яндекс.карты на страницу – регистрируемся на сайте, добавляем необходимые адреса, копируем сгенерировавшуюся ссылку и вставляем на страницу. Пример ссылки:
<script type=»text/javascript» charset=»utf-8» src=»https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=A74cIsHWviq_02iT-FxVfQztHhPNj3SV&width=450&height=350»></script>
Выполнив все поставленные задачи в полном объеме и достигнув цели, можно сделать вывод, что CMS Drupal не является идеальной системой. При исправлении работы всплывающего диалогового окна возникла такая проблема: большинство IP-адресов принадлежат другим городам, что мешало корректно оценить работу внесенных изменений. А вот размещение информации на страницах не вызвало затруднений, т.к. Drupal имеет свой редактор, который автоматически форматирует код и предоставляет возможности изменения шрифта и размера шрифта, выравнивания и начертания текста и т.д., что позволяет удобно работать с контентом. При размещении фотографий на странице должно было быть по 4 фото в каждой строке размером 50х50рх. При сжатии фотографии HTML кодом она искажается. Чтобы избежать этого, создавалась копия фотографии, уменьшалась и затем обрезалась до необходимого размера в графическом редакторе. Функция просмотра фотографии ссылалась на оригинальную фотографию. Создать форму обратной связи в CMS Drupal вызвало затруднение, связанное с тем, что использовать готовую форму обратной связи не получалось, т.к. при ее размещении на странице данные не отправлялись. Решить проблему удалось, написав дополнительный модуль. Таким образом, при решении несложных задач приходилось либо изменять существующий до этого код, либо менять принцип решения задачи, что существенно усложняло работу, но решения проблемы всегда удавалось найти.