Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (добавление новых записей)

6 января, 2008

Скриншот WebListEditor
Это третья часть цикла статей о создании web приложения, использующего технологию Ajax для редактирования списка.
В прошлых частях мы разобрали общую структуру приложения, работу с базой данных и структуру его основной страницы.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Как вы, наверное, помните, внизу страницы размещена форма добавления новых записей в список. Разберем подробнее как реализовано создание новых записей.

Когда посетитель нажимает кнопку «Добавить», выполняется вызов функции addItem(), размещенной в файле tasks.js. Посмотрите на ее код:

  1. function addItem() {
  2.     //читаем введенное в форму значение
  3.     var v = $('item_value').value;
  4.     //формируем строку с параметрами запроса
  5.     var pars = $H({value:v}).toQueryString();
  6.     //выполняем запрос
  7.     new Ajax.Request(
  8.         "scripts/additem.php",
  9.         {method:"post", parameters:pars, onSuccess:parseAddItemResponse}
  10.     );
  11. }


В строках 3 и 5 мы читаем текст, введенный в текстовое поле, и формируем строку с запроса. Код получился предельно короткий за счет использования библиотеки Prototype.

После этого выполняем Ajax запрос с помощью функции Request() объекта Ajax. В первом параметре этой функции мы указываем имя скрипта, который добавляет запись в БД. А во втором – параметры запроса:
method – метод отправки запроса;
parameters – сформированный ранее массив с параметрами (в данном случае, параметр только один – текст записи);
onSuccess – имя функции, которая будет вызвана после получения ответа от серверного скрипта.

Работу этой функции стоит разобрать подробнее, но вначале посмотрим, как работает additem.php.

  1. require_once("dbdata.php");
  2.  
  3. $value = null;
  4. $value = $_POST['value'];
  5. $results = array();
  6. if ($value != null && $value != "") {
  7.     $value = htmlspecialchars($value);
  8.     //добавляем запись в БД
  9.     $con = connect();
  10.     $addQuery = sprintf("INSERT INTO listitems(item) VALUES('%s')",
  11.                         mysql_real_escape_string($value));
  12.     if (mysql_query($addQuery)) {
  13.         $results['id'] = mysql_insert_id();
  14.         $results['value'] = $value;
  15.     }
  16.     else {
  17.         $results['error_mes'] = "Не могу добавить запись: ".mysql_error();
  18.     }
  19. }
  20. else {
  21.     $results['error_mes'] = 'Не задано значение записи';
  22. }
  23. if ($con != null) {
  24.     mysql_close($con);
  25. }
  26. echo json_encode($results);

В строках 4,5 мы получаем текст записи из массива $_POST, и начинаем формировать массив с результатами.
Если в процессе работы скрипта возникают ошибки, мы создаем в массиве $results элемент error_mes и присваиваем ему описание ошибки.

После проверки текста записи мы с помощью функции htmlspecialchars преобразуем все специальные символы html в соответствующие эскейп последовательности. Эта простая операция позволяет сохранить дизайн страницы в нормальном состоянии :-) .

После этого, мы подключаемся к БД (строка 9) и формируем запрос. Для предотвращения SQL Injection используется функция mysql_real_escape_string.

Если запрос выполнен успешно, получаем id добавленной записи (функция mysql_insert_id) и формируем массив с результатами.

Перед отправкой результата мы преобразуем его в формат JSON (строка 26).

Примечание. Об использовании этого формата можно почитать в статьях Передача данных с помощью JSON и Использование JSON в web приложениях.

Теперь, когда с серверной частью разобрались, возвращаемся к функции parseAddItemResponse. Напомню, она вызывается автоматически после получения ответа от сервера.

  1. function parseAddItemResponse(transport) {
  2.     var data = eval('(' + transport.responseText + ')');
  3.     //проверяем были ли ошибки
  4.     if (data.error_mes == null) {
  5.         //удаляем сообщение об ошибке (если оно осталось после
  6.         //предыдущего вызова)
  7.         var errMes = $('err_mes');
  8.         if (errMes != null) {
  9.             Element.remove(errMes);
  10.         }
  11.         //удаляем строку "нет записей" (если она есть)
  12.         var noItems = $('noItems');
  13.         if (noItems != null) {
  14.             Element.remove(noItems);
  15.         }
  16.         //вставляем полученный результат в конец списка
  17.         var list = $('list');
  18.         if (list == null) {
  19.             var content = $('content');
  20.             var newItem = new Insertion.Bottom(content, "<ul id=\"list\"></ul>");
  21.             list = $('list');
  22.         }
  23.         //вставляем новый элемент в конец списка
  24.         new Insertion.Bottom(list,
  25.             "<li id='listNum_" + (editors.length) + "'><div class='itemNum'>" +
  26.             (editors.length + 1) + "</div>" +
  27.             "<div class='itemValue' " +
  28.             "onclick='closeOtherEditors(" + editors.length +
  29.             ")' id='itemId_" + data.id + "'>" +
  30.             data.value + "</div>" +
  31.             "<a href='#' class='deleteLink' onclick='deleteItem(" +
  32.             data.id + ")'><img src='css/images/delete.gif'" +
  33.             "alt='Удалить' title='Удалить' /></a></li>");
  34.         //создаем редактор для нового элемента и добавляем его в массив
  35.         editors.push(addEditor("itemId_" + data.id, data.id));
  36.         //подсвечиваем вставленный элемент
  37.         var items = $$('#list li');
  38.         new Effect.Highlight(items.last(),
  39.             {startcolor:"#FDFFB9", endcolor:"#FFFFFF", duration:2.0});
  40.     }
  41.     else {
  42.         //выводим сообщение об ошибке
  43.         var form = $('add_item_form');
  44.         new Insertion.After(form, "<div id=\"err_mes\">" +
  45.             data.error_mes + "</div>");
  46.     }
  47. }

В параметре transport передается ответ сервера. С помощью функции eval() мы преобразуем строку с результатами в массив.

В строке 4 выполняем проверку на наличие ошибок, и если они были, выводим их описание (строки 41-46).

Если запись была успешно добавлена, начинаем формировать список с результатами. Прежде всего, удаляем сообщение об ошибке, если оно осталось после предыдущего вызова (строки 7-10). Затем создаем список, если он еще не создан (строки 17-22). После этого вставляем новый элемент внутрь списка (строки 24-33).

Естественно, при вставке нового элемента в список, мы должны сформировать такую же разметку, как и в файле index.php. Для определения порядкового номера элемента в списке мы используем параметр length массива editors, т.к. его длина всегда совпадает с количеством элементов в списке.

Добавление новых элементов на страницу выполняется функцией Insertion.Bottom(), которая вставляет текст, указанный во втором параметре, в конец элемента, заданного в первом параметре.

Удаление выполняем с помощью функции Element.remove(), которая удаляет элемент, указанный в ее первом параметре.

В строке 35 создаем встраиваемый редактор для нового элемента и добавляем его в массив editors.
После этого подсвечиваем вставленный элемент (строки 38, 39).

Подведем промежуточный итог. Добавление новой записи осуществляется в следующем порядке:
1) функция addItem() выполняет Ajax запрос;
2) скрипт additem.php принимает этот запрос и добавляет запись в БД;
3) функция parseAddItemResponse добавляет созданную запись на страницу.

В следующий раз мы рассмотрим редактирование существующих записей списка.

Понравилась статья? Подпишитесь на продолжение rss link !

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в Ajax, JavaScript, PHP

]]>

Комментарии (4)

Вы можете отслеживать обсуждение записи с помощью RSS 2.0 rss link

Вы также можете оставить комментарий, или трекбек с Вашего сайта.

  1. LitoX 06.01.2008 в 16:12 (Ответить)

    мило…

  2. hyperion 17.03.2008 в 17:31 (Ответить)

    спасибо! статья очень помогла!

  3. Jelena 07.08.2008 в 12:56 (Ответить)

    Ja ne mogu ponjat' v 4em oshibka, no pri dobavlenii zapisi ona avtomati4eski ne pojavljaetsja. Tol'ko esli vru4nuju sdelat' refresh:(

    1. Владимир 07.08.2008 в 15:39 (Ответить)

      Запись не появляется на демонстрационном сайте? Я только что проверил. Вроде все нормально.
      Каким браузером вы пользуетесь?

Оставить комментарий

Введите ваш комментарий

* - обязательные для заполнения поля

Quicktags:

]]>