Cookies на вашем сайте: учимся нравиться посетителям

Здесь расскажу вам про Cookeis (куки), а именно: что это такое, где применяются, какие параметры можно задать для них, с помощью каких способов, методов установить Cookies и рассмотрим простенькие примеры использования cookies.

Скачать исходники для статьи можно ниже

Cookies, Куки (от англ. cookie — печенье) – небольшой (не более 4Кбайт) фрагмент данных, сохраняемый веб-браузером на определенное время и нужный для работы на определенной веб-странице или веб-сайте.

Cookies играют роль памяти веб-браузера.

Они применяются для:

аутентификации пользователя;
хранения персональных предпочтений и настроек пользователя;
отслеживания состояния сессии доступа пользователя;
ведения статистики о пользователях.

Обычно значения cookies записываются в файл с называнием cookies.txt, который лежит в рабочей директории установленного на компьютер браузера.

Параметры, которые можно задать cookies.

Всего имеется шесть параметров, первый из которых является обязательным:

name – задает имя, закрепленное за Cookie;
value – определяет значение Cookie;
expire – время хранения Cookie. Если данный параметр не указать, то Cookie будут “жить” до конца сессии, то есть до закрытия браузера. Если время указано, то, когда оно наступит, Cookie самоуничтожится.

Остальные три параметра в большинстве случаев не используются.

path – устанавливает путь на сайте, в рамках которого действует cookie.
domain – домен, для которого значение cookie действительно;
secure – передача cookie через защищенное HTTPS-соединение.

Более подробно о параметрах для cookies можно почитать по следующей ссылке:

http://citforum.ru/internet/html/cookie.shtml

http://ruseller.com/lessons.php?rub_id=28&id=593

Способы задания cookies.

Основные способы:

– с помощью HTML (META-тег в заголовке <HEAD> </HEAD>, он подходит для статичных сайтов);

– с помощью PHP;

– с помощью Javascript;

– с использованием Perl/CGI.

На примерах, мы рассмотрим с вами использование cookies с помощью PHP и Javascript.

Практика с применением Cookies.

Здесь попробуем рассмотреть простенькие примерчики.

Пример 1.
Начнем с простого – задания для cookies значения, например слова “Привет!” и вывода его на сайте.

При использовании Cookies необходимо иметь в виду, что Cookies должны устанавливаться до первого вывода информации в браузер (например, оператором echo или выводом какой-либо функции).

Чтобы удовлетворить данному условию для сайтов на WordPress, нам необходимо открыть файл header.php – для этого в панели управления сайтом в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблонов выбираем файл header.php.

В его коде находим тег </head> и после него вставим следующие строчки:

<?php
setcookie("test","Hello",time()+3600);
?>

Данной строчкой мы задали для cookie имя – “test”, также мы установили его значение – “Привет” и время его хранения, равным 1 часу (60*60=3600 сек).

Теперь нам осталось вывести значения нашего cookie на сайте, для этого необходимо вставить в шаблон следующие строчки:

<?php
echo @$_COOKIE['test'];
?>

Например можно вставить данные строчки в начале шаблона сайдбара, для этого выберите из списка шаблонов файл sidebar.php и вставьте их в нужном месте, ну например так:

<div id="sidebar" class="grid_5">
		<ul class="nobullet">

<?php
echo @$_COOKIE['test'];
?>

<?php 	/* Widgetized sidebar, if you have the plugin installed. */
if ( !dynamic_sidebar('Sidebar') ) : ?>
...

Теперь открываем свой сайт и смотрим, что получилось.
Так как при первом просмотре странички cookies записываются, то надпись “Привет!”, вы не увидите – для ее вывода на сайте вам необходимо обновить страничку дважды.

Пример 2.
В данном примере мы сделаем страницу, которая запрашивает Ваше имя при первом посещении, затем она сохраняет Ваше имя в куки и показывает его при следующих посещениях.

Если в первом примере мы задавали значение для cookies с помощью PHP, то здесь будем использовать Javascript.

Наглядный пример можно посмотреть по следующей ссылке:
http://ruseller.com/lessons/les593/demo/demo.html

Перед тем как начать, советую прочитать вам мою предыдущую статью о том как подключить Javascript в WordPress!

Начнем!

В данном примере я вставлю javascript в индивидуальный шаблон одной из страниц сайта.

Как создать индвидуальный шаблон можете прочитать в моей предыдущей статье.

Допустим я уже создал индивидуальный шаблон для странички, теперь нужно его открыть в “Редакторе” (в панели управления вашим сайтом в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблонов ищем наш индивидуальный шаблон).

Теперь вставляем в его код следующие строчки javascript, которые и создадут форму для ввода имени посетителя и дальнейшем его приветствии.

Строчки самого скрипта:

<SCRIPT language="JavaScript">
<!--

function set_cookie ( name, value, expires_year, expires_month, expires_day, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( expires_year )
  {
    var expires = new Date ( expires_year, expires_month, expires_day );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
	cookie_string += "; path=" + escape ( path );

  if ( domain )
	cookie_string += "; domain=" + escape ( domain );

  if ( secure )
	cookie_string += "; secure";

  document.cookie = cookie_string;

}

function delete_cookie ( cookie_name )
{
  var cookie_date = new Date ( );  //Ткущая дата и время
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}

if ( ! get_cookie ( "username" ) )
{
  var username = prompt ( "Пожалуйста, ведите Ваше имя", "" );

  if ( username )
  {
    var current_date = new Date;
    var cookie_year = current_date.getFullYear ( ) + 1;
    var cookie_month = current_date.getMonth ( );
    var cookie_day = current_date.getDate ( );
    set_cookie ( "username", username, cookie_year, cookie_month, cookie_day );
    document.location.reload( );
  }
}
else
{
  var username = get_cookie ( "username" );
  document.write ( "Привет, " + username + ", добро пожаловать на сайт!" );
  document.write ( "<br><a href=\"javascript:delete_cookie('username'); document.location.reload( );\">Забудь обо мне!</a>" );
}

// -->
</SCRIPT>

И приведу код моего индивидуального шаблона со вставленным вышеуказанным javascript-ом:

<?php
/*
Template Name: shirokii2
*/
?>

<?php get_header(); ?>
<div id="box">
	<div id="content_wrapper">
		<div id="content">

<SCRIPT language="JavaScript">
<!--

function set_cookie ( name, value, expires_year, expires_month, expires_day, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( expires_year )
  {
    var expires = new Date ( expires_year, expires_month, expires_day );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
	cookie_string += "; path=" + escape ( path );

  if ( domain )
	cookie_string += "; domain=" + escape ( domain );

  if ( secure )
	cookie_string += "; secure";

  document.cookie = cookie_string;

}

function delete_cookie ( cookie_name )
{
  var cookie_date = new Date ( );  //Ткущая дата и время
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}

if ( ! get_cookie ( "username" ) )
{
  var username = prompt ( "Пожалуйста, ведите Ваше имя", "" );

  if ( username )
  {
    var current_date = new Date;
    var cookie_year = current_date.getFullYear ( ) + 1;
    var cookie_month = current_date.getMonth ( );
    var cookie_day = current_date.getDate ( );
    set_cookie ( "username", username, cookie_year, cookie_month, cookie_day );
    document.location.reload( );
  }
}
else
{
  var username = get_cookie ( "username" );
  document.write ( "Привет, " + username + ", добро пожаловать на сайт!" );
  document.write ( "<br><a href=\"javascript:delete_cookie('username'); document.location.reload( );\">Забудь обо мне!</a>" );
}

// -->
</SCRIPT>
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<div class="post" id="post-<?php the_ID(); ?>">
			<h2><?php the_title(); ?></h2>
				<div class="entry">
					<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
					<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
				</div>
			</div>
			<?php endwhile; endif; ?>
		<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

		</div>
	</div>
</div>

Пример моей тестовой страничке, на которой я и испробовал данный скрипт можете посмотреть по данной ссылке:
http://mnogoblog2.16mb.com/new/

Можно привести еще множество примеров совместного использования Cookies и Javascript, такие например как:

– Создания различного рода напоминаний.
Например для того, чтобы пользователь создал закладку на ваш сайт, раз в неделю или после определенного количества дней показывается всплывающее окно “Добавить в избранное”.
Также можно создать напоминание подписаться на RSS ленту вашего сайта.
– Создание перенаправлений.
Перенаправление посетителей на разные страницы на основе значения, хранящегося в cookies.
Например посетителю при первом посещении сайта предлагают выбрать любимое животное (кошка, собака и др), после чего соответствующее значение записывается в cookies и при следующем посещении, он попадет уже на страничку или форум данного сайта, непосредственно рассказывающей про его любимое животное.
– Создание возможности посетителю выбрать цвет или картинку фона, а возможно и других дизайнерских элементов сайта, при этом куки запомнят его выбор и при следующем заходе отобразят сайт, так как ему нравится.
– Создание информационного блока для посетителя, в котором отображается его имя, дата последнего посещения, количество посещений данной страницы и прочей информации.
– Вывод Popup (всплывающий окон) и прочей раздражающей рекламы только один раз при первом посещении посетителя.
– Создание ежедневников, адресных книг и прочего.

В одной из следующих статей я приведу пример с использованием Javascript и Cookies, в котором посетитель сможет выбрать понравившийся фон для сайта, и при этом браузер запомнит его выбор благодаря cookies, что позволит при каждом последующем заходе на данный сайт отображать именно выбранный фон – по-моемому это будет классно!

Cookies на вашем сайте: учимся нравиться посетителям: 2 комментария

Анатолий Декабрь 14, 2012 в 00:56

Здравствуйте, помогите сделать псевдокоментарии. То есть чтобы свой комментарий видел только тот кто его оставил, а остальные только хорошие

Войдите, чтобы ответить ↓
EUGEN Октябрь 7, 2014 в 20:08

Спасибо за статью. Очень помогла. Но столкнулся с трудностью и прошу помощи.
В силу обстоятельств, имен моих cookie выглядят так: cookie[1], cookie[2] и т.д.
При таких названиях функция get_cookie всегда возвращает null. Что с этим делать?

Войдите, чтобы ответить ↓

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

Для отправки комментария вам необходимо авторизоваться.

MnogoBlog

Как создать сайт на wordpress, настроить и оптимизировать wordpress

Cookies на вашем сайте: учимся нравиться посетителям

Похожие записи:

Cookies на вашем сайте: учимся нравиться посетителям: 2 комментария

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