Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> 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
Опубликовал: Сергей Кашурин
Просмотров: 510
Правила перепечатки

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

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

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


BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
Оформление воздушными Шарами Курск. Воздушные Шары печать www.6417879.ru
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
http://golfstreamcredit.ru крупнейший автоломбард с подземным паркингом
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.

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

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

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

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

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

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

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