Желтые стикеры с помощью AJAX, PHP и jQuery

Сегодня мы создаем систему управления желтыми стикерами.

Она позволит посетителям сайта оставлять короткие записки с мгновенным просмотром. Также можно будет их перемещать в любой последовательности. Каждое движение будет отправлено на сервер с помощью AJAX и сохранено в БД.

Мы используем посленюю версию jQuery 1.4 и плагин fancybox.

Шаг 1 - XHTML

Первый шаг - это создание необходимой структуры.

demo.php

<div id="main">
<a id="addButton" class="green-button" href="add_note.html">Add a note</a>
<?php echo $notes?>
</div>

Все предельно просто. У нас есть div с названием main, который содержит все стикеры и ограничивает их передвижение. Остальной код генерируется динамически с помощью PHP после выполнения запроса SELECT в БД, и после сохранения результата в переменную $notes.

Если Вы нажмете на "Добавить стикер" (ADD NOTE) Вы увидите, что появится форма с мгновенным просмотром результата. Этот функционал доступен благодаря fancybox, который считывает файл add_note.html (который содержит форму) и и показывает его в всплывающем окне.

add_note.html

<h3 class="popupTitle">Add a new note</h3>
<!-- The preview: -->
<div id="previewNote" class="note yellow" style="left:0;top:65px;z-index:1">
<div class="body"></div>
<div class="author"></div>
<span class="data"></span>
</div>
<div id="noteData"> <!-- Содержит форму -->
<form action="" method="post" class="note-form">
<label for="note-body">Text of the note</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>
<label for="note-name">Your name</label>
<input type="text" name="note-name" id="note-name" class="pr-author" value="" />
<label>Color</label> <!-- при нажатии на один из div меняется цвет стикера -->
<div class="color yellow"></div>
<div class="color blue"></div>
<div class="color green"></div>
<!-- Зеленая кнопка: -->
<a id="note-submit" href="" class="green-button">Submit</a>
</form>
</div>

В форме Вы можете внести текст записки, имя и выбрать цвет. После нажатия на кнопку стикер в окне просмотра копируется в div main, что позволяет нам писать меньше кода.

Шаг 2 - PHP

PHP заполняет переменную $notes выполняя запросы в БД и выдает результат на страницу.

demo.php

$query = mysql_query("SELECT * FROM notes ORDER BY id DESC");

$notes = '';
$left='';
$top='';
$zindex='';
while($row=mysql_fetch_assoc($query))
{
	// xyz колонка содержит позицию и z-index в форме 200x100x10:
	list($left,$top,$zindex) = explode('x',$row['xyz']);
	$notes.= '
<div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;	z-index:'.$zindex.'">
		'.htmlspecialchars($row['text']).'
<div class="author">'.htmlspecialchars($row['name']).'</div>
<span class="data">'.$row['id'].'</span>
</div>';
}

Таблица notes сохраняет не только текст и автора записки, а также в ней есть колонка x и y для координат + z для значения z-index. Это все сохраняется в поле xyz таблицы, и туда постоянно вносятся изменения с помощью AJAX.

После того, как посетитель нажал на кнопку добавления стикера, fancybox выдает файл add_note.html и показывает форму мгновенного просмотра. Когда отправляем форму, тогда информация передается с помощью AJAX в post.php.

post.php

$author = mysql_real_escape_string(strip_tags($_POST['author']));
$body = mysql_real_escape_string(strip_tags($_POST['body']));
$color = mysql_real_escape_string($_POST['color']);
$zindex = (int)$_POST['zindex'];

/* Вставляем новую запись в БД notes: */
mysql_query('	INSERT INTO notes (text,name,color,xyz)
VALUES ("'.$body.'","'.$author.'","'.$color.'","0x0x'.$zindex.'")');

if(mysql_affected_rows($link)==1)
{
	// Выводим id вставленного ряда:
	echo mysql_insert_id($link);
}
else echo '0';

AJAX также используется для сохранения позиции индивидуальных заметок после их каждого движения. Javascript код, который выполняет эти запросы представлен в 4-м шаге.

update_position.php

// Проверяем входящие данные:
if(!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) || !is_numeric($_GET['z']))
die("0");

// убираем лишние символы:
$id = (int)$_GET['id'];
$x = (int)$_GET['x'];
$y = (int)$_GET['y'];
$z = (int)$_GET['z'];

// Сохраняем позицию и z-index записки:
mysql_query("UPDATE notes SET xyz='".$x."x".$y."x".$z."' WHERE id=".$id);

echo "1";

После того, как введенные данные точно валидные, скрипт вносит изменения в поля xyz ряда стикера и выводит 1 - успех.

Продолжим...

Шаг 3 - CSS

Вся разметка на месте, теперь давайте займемся стилями.

style.css - часть 1

.note{
	height:150px;
	padding:10px;
	width:150px;
	position:absolute;
	overflow:hidden;
	cursor:move;

	font-family:Trebuchet MS,Tahoma,Myriad Pro,Arial,Verdana,sans-serif;
	font-size:22px;

	/* Adding a CSS3 shadow below the note, in the browsers which support it: */
	-moz-box-shadow:2px 2px 0 #DDDDDD;
	-webkit-box-shadow:2px 2px 0 #DDDDDD;
	box-shadow:2px 2px 0 #DDDDDD;
}

#fancy_ajax .note{ cursor:default; }

/* 3 стиля для стикеров: */

.yellow{
	background-color:#FDFB8C;
	border:1px solid #DEDC65;
}

.blue{
	background-color:#A6E3FC;
	border:1px solid #75C5E7;
}

.green{
	background-color:#A5F88B;
	border:1px solid #98E775;
}

/* У каждого стикера есть span с информацией, который содержит ID */
span.data{ display:none; }

/* Кнопка добавления стикера: */
#addButton{
	position:absolute;
	top:-70px;
	left:0;
}

В первой части мы определяем внешний вид наших стикеров и создаем три цветовых темы оформления - желтая, синяя и зеленая.

У каждой записки есть специальный span с классом data, который содержит внутренний ID (записан в БД). ID используется jQuery для внесения изменения в колонку с расположением при перемещении. Этот span невидимый с помощью display:none.

style.css - часть 2

/* Зеленая кнопка: */
a.green-button,a.green-button:visited{
	color:black;
	display:block;
	font-size:10px;
	font-weight:bold;
	height:15px;
	padding:6px 5px 4px;
	text-align:center;
	width:60px;

	text-shadow:1px 1px 1px #DDDDDD;
	background:url(img/button_green.png) no-repeat left top;
}

a.green-button:hover{
	text-decoration:none;
	background-position:left bottom;
}

.author{
	/* Имя автора на стикере: */
	bottom:10px;
	color:#666666;
	font-family:Arial,Verdana,sans-serif;
	font-size:12px;
	position:absolute;
	right:10px;
}

#main{
	/* Содержит все стикеры и ограничивает движение: */
	margin:0 auto;
	position:relative;
	width:980px;
	height:500px;
	z-index:10;
	background:url(img/add_a_note_help.gif) no-repeat left top;
}

Вторая часть определяет стили для зеленой кнопки (состояние при наведении, тень текста...). Это мелочи, но они добавляют красоты нашему творению.

style.css - часть 3

h3.popupTitle{
	border-bottom:1px solid #DDDDDD;
	color:#666666;
	font-size:24px;
	font-weight:normal;
	padding:0 0 5px;
}

#noteData{
	/* Форма ввода в попапе: */
	height:200px;
	margin:30px 0 0 200px;
	width:350px;
}

.note-form label{
	display:block;
	font-size:10px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	padding-bottom:3px;
}

.note-form textarea, .note-form input[type=text]{
	background-color:#FCFCFC;
	border:1px solid #AAAAAA;
	font-family:Arial,Verdana,sans-serif;
	font-size:16px;
	height:60px;
	padding:5px;
	width:300px;
	margin-bottom:10px;
}

.note-form input[type=text]{	height:auto; }

.color{
	/* The color swatches in the form: */
	cursor:pointer;
	float:left;
	height:10px;
	margin:0 5px 0 0;
	width:10px;
}

#note-submit{	margin:20px auto; }

В последней части мы добавляем несколько правил для мгновенного просмотра стикеров.

Шаг 4 -jQuery

Первым делом подключаем:

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript" src="script.js"></script>

Теперь давайте взглянем на script.js

script.js - часть 1

$(document).ready(function(){
	/* Код выполняется после полной загрузки страницы */

	var tmp;

	$('.note').each(function(){
		/* Находим самое большое значение z-index наших стикеров */

		tmp = $(this).css('z-index');
		if(tmp>zIndex) zIndex = tmp;
	})

	/* Функция помощник для преобразования набора объектов в движущиеся (т.е. те которые можно перетаскивать): */
	make_draggable($('.note'));

	/* Конфигурация плагина fancybox: */
	$("#addButton").fancybox({
		'zoomSpeedIn'		: 600,
		'zoomSpeedOut'		: 500,
		'easingIn'			: 'easeOutBack',
		'easingOut'			: 'easeInBack',
		'hideOnContentClick': false,
		'padding'			: 15
	});

		$('.pr-body,.pr-author').live('keyup',function(e){

		if(!this.preview)
			this.preview=$('#previewNote');

		/* Готовим текст для просмотра в поле ввода, и убираем все HTML теги: */
		this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));
	});

	/* Меняем цвет стикера при просмотре: */
	$('.color').live('click',function(){

		$('#previewNote').removeClass('yellow green blue').addClass($(this).attr('class').replace('color',''));
	});

Первым делом скрипт ищет стикер с максимальный значением z-index, чтобы закэшировать значение в переменную zIndex и добавлять ее перед присваиванию ее к заметкам. Таким образом при начале перетаскивание стикера, он всегда перемещается сверху остальных.

Также интересный момент - это использование метода live() для отслеживания событий. Это делается для того, чтобы следить за событиями при создании новых элементов на странице (тех, которых не было при загрузке).

script.js - часть 2

	/* Кнопка отправки формы: */
	$('#note-submit').live('click',function(e){

		if($('.pr-body').val().length<4)
		{
			alert("The note text is too short!")
			return false;
		}

		if($('.pr-author').val().length<1)
		{
			alert("You haven't entered your name!")
			return false;
		}

		$(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');

		var data = {
			'zindex'	: ++zIndex,
			'body'		: $('.pr-body').val(),
			'author'		: $('.pr-author').val(),
			'color'		: $.trim($('#previewNote').attr('class').replace('note',''))
		};

		/* Отправление запроса AJAX POST: */
		$.post('ajax/post.php',data,function(msg){

			if(parseInt(msg))
			{
				/* msg contains the ID of the note, assigned by MySQL's auto increment: */
				var tmp = $('#previewNote').clone();

				tmp.find('span.data').text(msg).end().css({'z-index':zIndex,top:0,left:0});
				tmp.appendTo($('#main'));

				make_draggable(tmp)
			}

			$("#addButton").fancybox.close();
		});

		e.preventDefault();
	})
});

Здесь мы следим за событием отправки формы добавления нового стикера. Как только нажмут кнопку, информация проверяется и отправляется с помощью метода  $.post. Если процесс был успешным, лайтбокс закрывается и новосозданный стикер добавляется на экран.

script.js - часть 3

var zIndex = 0;

function make_draggable(elements)
{
	/* Elements is a jquery object: */
	elements.draggable({
		containment:'parent',
		start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
		stop:function(e,ui){

			/* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
			$.get('ajax/update_position.php',{
				x		: ui.position.left,
				y		: ui.position.top,
				z		: zIndex,
				id	: parseInt(ui.helper.find('span.data').html())
			});
		}
	});
}

В последне части у нас функция make_draggable. Она превращает набор элементов jQuery (переданных в качестве параметра) в объекты, которые можно перетаскивать. Этой функцией нам необходимо пользоваться дважды - 1) при открытии страницы; 2) при создании нового стикера.

Шаг 5 - MySQL

Для верной работы Вам необходимо создать БД и в ней выполнить запрос, который находится в файле table.sql. Также Вам необходимо внести данные подключения к БД в файле connect.php.

Заключение

Ура! Мы это, наконец-то, сделали! Надеюсь, Вам урок понравился! Если да - тогда расскажите о нем всем своим знакомым ;) Чем больше людей нас будет посещать - тем больше уроков будет :) Всем спасибо! Чао!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.tutorialzine.com
Перевел: Максим Шкурупий
Урок создан: 29 Января 2010
Просмотров: 26250
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 29 Января 2010 18:06
    Diman
    Прикольно конечно, но думаю непонадобиться
  • 29 Января 2010 22:14
    Adrian
    Cупер!
  • 30 Января 2010 00:32
    Vladimir
    Очень классный урок! Но скорее в плане учебы.. не имею пока понятия где это можно использовать на каком-то рабочем проекте..
  • 30 Января 2010 01:15
    vmtiu
    а можно стикеру задовать размер пользователю
  • 30 Января 2010 11:34
    Sergio
    Классный урок!!! Да, а вот как задавать размеры и произвольный цвет.
  • 30 Января 2010 15:15
    Yura
    А как бы угол завернуть в стикере?
  • 30 Января 2010 19:49
    Master
    здорово..
  • 31 Января 2010 00:02
    НеБот
    Класс!
  • 31 Января 2010 23:12
    phpsodip
    А как удалять их
  • 2 Февраля 2010 15:26
    Baraka
    Да, удалять бы не мешало бы описать как... :) В принципе понятно как, но для новичков - бесценный опыт
  • 14 Февраля 2010 10:18
    Сумрак
    Класс! Просто супер, обязательно надо найти применение этому чуду. Например использовать как гостевую книгу)) Плюс еще чуток дописать, чтоб админ смог удалять записи и вообще получится идеально))
  • 22 Февраля 2010 21:50
    Violet
    А у меня не выводит в реальном времени( стик появляется после перезагрузки страницы(
  • 22 Марта 2010 19:03
    Алешенька
    а зачем они нужны могут быть....
  • 1 Июня 2010 00:48
    VaDImGaME
    Подскажите, как это можно на юкоз вывести?
  • 26 Октября 2010 22:14
    MrJenika
    а как добавить туда новый цвет? а то я добавил в три файла описание, оно добавляет, а после обновления страницы цвет становится белым.
  • 2 Ноября 2010 01:02
    pank
    Класный урок!
  • 9 Февраля 2012 11:53
    jasur_xv
    meni tushunyapsizlarmi?????
  • 17 Апреля 2013 15:18
    CRASH17
    Всё установил. После создания стикера, русский текст сначала нормально отображается, после обновления страницы - непонятные символы. Если создать файл .htaccess с содержанием "AddDefaultCharset utf-8" то текст на стикерах нормально отображается, а вот вместо другого текста(его я перевёл) - знаки вопроса. Как быть?
^ Наверх ^