25.06.14, 13:40
0 комментарий
  Скрипты

Блокнот для сайта

Блокнот для сайта - простое приложение на PHP и JQuery, которое позволяет пользователям писать заметки. Все записи будут сохранены в текстовые файлы на сервере.

Шаг 1. HTML
Для начала рассмотрим разметку. Для этого создадим обычный документ HTML5, Ниже представлена только важная часть, остальной код можно посмотреть в файле исходников index.php.

<div id="pad">
	<h2>Заметка</h2>
	<textarea id="note"><?php echo $note_content ?></textarea>
</div>



Как вы заметили разметка не сложная, конечно, мы добавим стили CSS, подключим jQuery и наш скрипт script.js. Обратите внимание, что выражение phpecho находится в textarea.

Шаг 2. CSS
Для формирования фона в виде листочка для заметок используется псевдо-элемент :after. При изменении размера области ввода текста в коде jQuery, нижняя часть автоматически сдвигается вниз.

#pad{
	position:relative;
	width: 374px;
	margin: 180px auto 40px;
}
#note{
	font: normal 15px 'Courgette', cursive;
	line-height: 17px;
	color:#444;
	background: url('../img/mid.png') repeat-y;
	display: block;
	border: none;
	width: 329px;
	min-height: 170px;
	overflow: hidden;
	resize: none;
	outline: 0px;
	padding: 0 10px 0 35px;
}
#pad h2{
	background: url('../img/header.png') no-repeat;
	overflow: hidden;
	text-indent: -9999px;
	height: 69px;
	position: relative;
}
#pad:after{
	position:absolute;
	content:'';
	background:url('../img/footer.png') no-repeat;
	width:100%;
	height:40px;
}



Шаг 3. PHP
Код PHP для нашего примера достаточно простой. Происходит чтение и вывод содержания заметки при загрузке страницы, а когда jQuery посылает запрос AJAX - записываем содержание в файл. Файл записи будет перезаписываться.

$note_name = 'note.txt';
$uniqueNotePerIP = true;
if($uniqueNotePerIP){
	// Используем адрес IP пользователя для именования файла заметки.
	// Данная техника полезна в случаях, когда приложение
	// используют несколько пользователей одновременно.
	if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
		$note_name = 'notes/'.$_SERVER['HTTP_X_FORWARDED_FOR'].'.txt';
	}
	else{
		$note_name = 'notes/'.$_SERVER['REMOTE_ADDR'].'.txt';
	}
}
if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
	// Запрос AJAX
	if(isset($_POST['note'])){
		// Записываем файл на диск
		file_put_contents($note_name, $_POST['note']);
		echo '{"saved":1}';
	}
	exit;
}
$note_content = '';
if( file_exists($note_name) ){
	$note_content = htmlspecialchars( file_get_contents($note_name) );
}



Следует обратить внимание на переменную $uniqueNotePerIP. Если она имеет значение true, каждый пользователь будет иметь уникальный файл заметки с именем на основе IP адреса. При значении false, все будут использовать один и тот же файл.

Шаг 4. jQuery
Работа jQuery в данном приложении заключается в отслеживании изменений в области ввода текста и отправке запроса AJAX post для index.php, где текст будет записан в файл.

$(function(){
	var note = $('#note');
	var saveTimer,
		lineHeight = parseInt(note.css('line-height')),
		minHeight = parseInt(note.css('min-height')),
		lastHeight = minHeight,
		newHeight = 0,
		newLines = 0;
	var countLinesRegex = new RegExp('n','g');
	// Событие input запускается нажатием клавиш,
	// копированием и даже операциями отмены/повторения.
	note.on('input',function(e){
		// Очистка таймера предотвращает
		// сохранение каждого нажатия клавиш
		clearTimeout(saveTimer);
		saveTimer = setTimeout(ajaxSaveNote, 2000);
		// Подсчет количества новых строк
		newLines = note.val().match(countLinesRegex);
		if(!newLines){
			newLines = [];
		}
		// Увеличиваем высоту заметки (если нужно)
		newHeight = Math.max((newLines.length + 1)*lineHeight, minHeight);
		// Увеличиваем/уменьшаем высоту только один раз при изменеии
		if(newHeight != lastHeight){
			note.height(newHeight);
			lastHeight = newHeight;
		}
	}).trigger('input');	// Данная строка будет изменять размер заметки при загрузке страницы
	function ajaxSaveNote(){
		// Запускаем запрос AJAX POST для сохранения записи
		$.post('index.php', { 'note' : note.val() });
	}
});



Обычный подход в таких случаях - привязка обработчика к событию keypress. Но иногда такого метода недостаточно, так как пользователь может просто скопировать текст в область ввода, или выбрать предложение от автоматического корректора браузера, или использовать операцию отменить/повторить.

Вот и все. Готово!

СКАЧАТЬ

Вес файла
66.84 Kb

Напишите своё мнение