Простое приложение для записи заметок

В данном уроке мы сделаем простое приложение на PHP и jQuery, которое будет давать возможность пользователю писать заметки. Заметки будут сохраняться в простых текстовых файлах на сервере. В уроке демонстрируется техника чтения и записи файлов в PHP, изменение размеров области текста с помощью jQuery в зависимости от размера содержания, и простое взаимодействие AJAX.

 

Разметка HTML

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

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

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

 

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, все будут использовать один и тот же файл. В таком случае при одновременном использовании приложения несколькими пользователями файл может поврежден.

 

jQuery

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

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

$(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() });
	}
	
});

Еще одной полезной техникой является подсчет количества строк в тексте и увеличение области ввода текста автоматически, в зависимости от значения свойства CSS  line-height.

 

CSS

В данном разделе мы определяем стили для трех элементов HTML нашего урока. Для формирования фона в виде листочка для заметок используется псевдо-элемент :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;
}

Для блока #note используется шрифт Courgette из коллекции Google Web Fonts.

Готово!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/2WR2Jb7QmcE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Простое приложение для записи заметок | | 2012-09-24 23:38:08 | | Статьи Web-мастеру | | В данном уроке мы сделаем простое приложение на PHP и jQuery, которое будет давать возможность пользователю писать заметки. Заметки будут сохраняться в простых текстовых файлах на сервере. В уроке | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: