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

Также рассмотрим простое взаимодействие ajax. И так, давайте приступим к разработке данных заметок, для демонстрации будут использоваться PSD материалы Mathieu Berenguer.

Шаг 1. HTML

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

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

Шаг 2. CSS

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

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

Шаг 3. PHP

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

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

Шаг 4. jQuery

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

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: