Простое приложение для записи заметок
В данном уроке мы сделаем простое приложение на 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.