Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> PHP

Давайте сделаем классные AJAX заметки в виде тетрадного листа

Урок есть и в видеоформате! Смотреть?

Позитив и оригинальность объединяет всех успешных людей! Всем доброго времени суток дорогие друзья. Сегодня у нас в меню, совсем классный урок, который посвящён тому, как сделать здоровские заметки на Ajax + PHP. Приготовьтесь, мы будем писать на тетрадном листе))


    Поехали! Мы будем делать простое приложение с PHP и jQuery, которое позволит пользователям писать заметки. Текст заметки мы будем хранить в текстовом файле на стороне сервера. Так же в примере будет рассмотрено как записывать и считывать файлы в PHP, и как изменить изображение в jQuery в зависимости от количества текста внутри, а для удобства сделаем всё это асинхронно с помощью Ajax.

    Давайте сразу скачаем демо и будем рассматривать все шаги на живом примере.

    HTML

    Первое что мы делаем, создаём HTML5 документ. Я приведу фрагмент описывающий сам пример, а остальные элементы опущу, их вы можете увидеть в файле index.php в скаченном примере.

    index.php

<div id="pad">
    <h2>Note</h2>
    <textarea id="note"><?php echo $note_content ?></textarea>
</div> 

    Это и всё что нам пригодится. Правда, нам будет не легко со стилями, но их мы конечно же разберем. Я также включил в наш пример библиотеку jQuery (перед закрытием тега body) и файл со скриптами которые будут руководить процессом - script.js, мы так же разберёмся с ним чуть ниже. Заметьте, что фрагмент PHP содержится в элементе textarea, он будет печатать последнюю сохранённую заметку пользователя.

    PHP

    PHP код гениален и прост, он всего то считывает и записывает наш файл. Прошу заметить, что этот код должен выполняться перед применением Ajax запроса, т.е. когда все данные уже на изготовке. 

    index.php

$note_name = 'note.txt';
$uniqueNotePerIP = true;

if($uniqueNotePerIP){
    
    // Используем IP в качестве имени пользователя.
    // Это полезно, когда блокнотом пользуются 2 и более людей.
    
    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. Чем она так примечательна, если её не использовать то во-первых, если заметку будут заполнять два и более человек, то они будут переписывать друг друга и текст второго, будет виден первому, во-вторых, файл вообще может сказать «стоп, хватит с меня!» и перестать работать. Конечно, если вы пользуетесь им в одиночку, то можете установить его в значение false, и тогда он будет работать только для вас.

    А дальше нас ждёт волшебный jQuery код!!!

    JQuery

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

    assets/js/script.js

$(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');
    
    // Вводим текст в форму, инициализируем приложение
    // работаем даже с вырезать/вставить и даже назад/повторить.
    
    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:

    CSS

    А сейчас, давайте познакомимся со стилями которые будут обеспечивать красоту и элегантность для нашего динамического записного блокнота.  Здесь описывается всего 3 элемента, которые мы видели в самом начале. Последний описывается  с помощью атрибута :after. Во время изменения текстовой области, jQuery автоматически увеличивает её длину и стили следуют за ним.

    assets/css/styles.css

#pad{
    position:relative;
    width: 374px;
    margin: 180px auto 40px;
}

#note{
    font: normal 15px 'Courgette', cursive;
    line-height: 17px;
    color:#444;
    background: url(/zhitelyam/&) 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(/zhitelyam/&) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    height: 69px;
    position: relative;
}

#pad:after{
    position:absolute;
    content:'';
    background:url(/zhitelyam/&) no-repeat;
    width:100%;
    height:40px;
}

    Кроме этого, я включил в наш пример шрифт Courgette от Google Web Fonts, и тем самым, может показаться, что текст написан от руки, что очень оригинально.

    Ура Товарищи! Мы сделали это!
    Я надеюсь, что вам понравился этот простой пример, полны идей для улучшения. Если вам нужна поддержка старых версий IE, которые в данном примере остались за бортом, я предлагаю вам изменить код так, чтобы AJAX запрос отсылаелся автоматически с таймаутом каждые 5 или 10 секунд. Всего хорошего, пока пока)

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


Дата публикации: 11.02.2013
Опубликовал: Сергей Кашурин
Просмотров: 511
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: