Техно-мир

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

Шаг 1. HTML

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

Заметка

Как вы заметили разметка не сложная, конечно, мы добавим стили 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. Но иногда такого метода недостаточно, так как пользователь может просто скопировать текст в область ввода, или выбрать предложение от автоматического корректора браузера, или использовать операцию отменить/повторить.

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