Проверка cookies на php+jQuery

Вступление

В этой статье я покажу как решить ставшую уже «классической» проблему: проверить включены ли у клиента cookies?

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

Современный сайт должен обеспечивать тесное взаимодействие сервера и клиента, для этого нужна идентификация клиента. Часто возникает необходимость уведомить пользователя о том что для нормальной работы должны быть включены cookies. Иногда неплохо бы объяснить ему ещё что это такое и что с этим делать.

Реализация

Средства которые будут использованы для реализации: на сервере – php, на клиенте – jQuery. Php – самый популярный на сегодня из серверных языков, jQuery – пожалуй самый распространённый и удобный фрэймворк javascript.

Большинство современных CMS (написанные на php) используют один индексный файл, к которому подключаются нужные классы/модули и который отвечает на все запросы клиентов. Поэтому php-код будем вставлять непосредственно в /index.php. Для своих проектов, где успешно применяется эта проверка кук, я использую jquery версии 1.4.2 и php 5.3.3. Но это так, если кому интересно))

Устаревшие морально решения на php и другие чисто серверные имеют тот недостаток, что проверка, установилась ли кука, возможна только после перезагрузки страницы. То бишь при первом обращении ставим куку, при втором проверяем результат. Наша реализация позволит уведомить пользователя

Алгоритм в трёх словах:

  1. стартуем сессию
  2. посредством javascript сделаем запрос к php-скрипту и узнаем, установилась ли сессионная кука
  3. уведомляем пользователя о результате

1. index.php

Весь код который необходимо разместить в индексном файле нашего сайта насчитывает 4 строчки

session_start(); // старт сессии, по умолчанию это должно установить куку с именем PHPSESSID
if(isset($_GET['testcookie'])) // проверка, обращаемся к /index.php с гет параметром
if(isset($_COOKIE['PHPSESSID'])) die('1'); // если кука установилась то выходим, возвращаем 1.
else die('0'); // иначе - 0

Всё элементарно. Едем дальше.

2. jQuery

Клиентская сторона будет существенно больше серверной. Красота требует жертв, а мы ведь хотим, что бы у клиента всё было красиво ;)

В голове нашего шаблона первым делом подключаем библиотеку jQuery. Затем пишем функцию, которая делает гет запрос с параметром testcookie и обрабатывает ответ.

 
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Блог о web-разработке: html 5, php, mysql — samizdam.net</title>
	<script src="/js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">		
	$(function()
	{
	$.get('/index.php?testcookie', '', function(data)
	{									 
		if(data == 1)
			return false;
		if(data == 0)
		{
			var agent; 
			var link;
			firefox = {
				url: 'http://support.mozilla.com/ru/kb/Управление cookies',
				name: "Firefox"
			};
			opera = {
				url: 'http://help.opera.com/Windows/11.00/ru/cookies.html',
				name: 'Opera'
			};
			msie = {
				url: 'http://support.microsoft.com/kb/260971/ru',
				name: 'MSIE'
			};
			safari = {
				url: 'sa',
				name: 'Safari'
			};								
			chrome = {
				url: 'http://www.google.com/support/chrome/bin/answer.py?hl=ru&amp;answer=95647',
				name: 'Chrome'
			};
			browsers = [
			firefox,
			opera,
			msie,
			chrome,
			safari								
			];									
			$.each(browsers, function()
			{
				if(navigator.userAgent.indexOf(this.name) >= 0)
				{
					link = this.url;
					agent = this.name;
					return false;
				}					
			}
			);
			$('body').prepend('<div style="background-color: red; font-weight: bold;">'+
								'Для полноценной работы с сайтом включите cookies!'+
								'<a href="'+link+'" target="_blank">Как это сделать для браузера '+agent+'? </a>'
								+'</div>');
 
		}
	});
});
	</script>
	</head>
<body>
	<article>Сама страница.</article>
</body>
</html>


Самое и нтересной начинается на 14-ой строке html. Если php-скрипт вернул 0 то начинаем проверку клиентского браузера. Сперва формируем массивы с адресами справки по cookies и названием для каждого из браузера из «великой пятёрки». Затем создаём ассоциативный массив browsers, куда складываем их. В цикле пробекаем по всем элементам и сравниваем строку юзер-агента с названием браузера: в случае совпадения присваееваем переменным его данные. Дальше прикручиваем в самом верху страницы див с соотвествующей надписью и ссылкой на официальную документацию.

Эта запись была опубликована в рубрике Основное, Статьи-заметки и отмечена метками , , , , . Добавить в закладки ссылку.

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

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>