Как сделать редактор списка в стиле Web 2.0 (структура приложения)

Владимир | | Ajax, JavaScript, PHP.

Скриншот WebListEditor
Сейчас в интернете можно найти множество статей о web2.0. Но для меня понятие web2.0 прежде всего связано с технологией Ajax. Казалось бы, предельно простая идея, отправлять запросы с помощью JavaScript, но благодаря ей web приложения приобрели ряд новых возможностей.

В этой статье я покажу, как написать редактор списка, использующий технологию Ajax. Серверная часть будет реализована на PHP.

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

Требования
Прежде всего, определимся с требованиями к нашему web приложению. Они довольно простые:
1) читать список записей из базы данных и показывать его на web странице;
2) добавлять новые записи (вставленная запись должна подсвечиваться);
3) удалять записи;
4) при щелчке по записи должно появляться поле редактирования с текстом этой записи и кнопки «Обновить» и «Отмена»;
5) все операции должны выполняться без перезагрузки страницы.

Для того чтобы сократить объем JavaScript кода мы используем библиотеки Prototype и Scriptaculous, о которых я уже неоднократно писал. Главное преимущество этих библиотек в данном случае состоит в том, что Scriptaculous содержит готовый компонент для реализации четвертого требования. Это т.н. in-place text editor (встраиваемый текстовый редактор).

Примерный вид приложения показан на скриншоте в начале страницы.

Структура приложения
На рисунке показаны основные компоненты приложения.

Структура WebListEditor

Условно приложение можно разделить на три части.

В первую часть входит основной скрипт приложения – index.php. Он читает данные из базы и формирует html страницу со списком, и всеми элементами управления.

Вторая часть приложения размещена в папке scripts/. Здесь находятся следующие файлы:
tasks.js – содержит JavaScript функции, выполняющие Ajax запросы и обновление страницы;
additem.php – php скрипт, добавляющий новую запись в базу данных (БД);
updateitem.php – обновляет запись в БД;
delete.php – удаляет запись из БД;
dbdata_tmpl.php – шаблон скрипта для подключения к БД (этот файл нужно переименовать в dbdata.php и указать в нем параметры подключения к БД).
Кроме того, здесь размещена папка libs/ с библиотеками prototype и scriptaculous.

Третья часть размещена в папке css/ и используется для оформления web приложения. Здесь находятся файлы с таблицей стилей и изображениями.

Переходим к программированию

Прежде всего, нам нужно создать базу данных для хранения списка.
Чтобы максимально упростить приложение (это ведь демонстрационный пример) наша база данных будет содержать всего одну таблицу (listitems). Посмотрите на SQL запрос, создающий эту таблицу:

CREATE TABLE `listitems` (
  `id` int(11) NOT NULL auto_increment,
  `item` varchar(200) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Как видите, таблица содержит два поля:
id – первичный ключ;
item – текст записи в списке.

Теперь напишем функцию подключения к базе данных. Т.к. эта функция будет использоваться во всех php скриптах, мы поместим ее в отдельном файле dbdata.php вместе с параметрами подключения к БД.

function connect() {
	$db_host = "your_db_host";
	$db_name = "your_db_name";
	$db_user = "user_name";
	$db_pass = "user_password";

	$con = mysql_connect($db_host, $db_user, $db_pass);
	if ($con === FALSE) {
		echo "<h2>Не могу подключиться к серверу MySQL</h2>";
		die();
	}
	if (!mysql_select_db($db_name)) {
		echo "<h2>Не могу подключиться к указанной базе данных</h2>";
		die();
	}
	return $con;
}

Перед использованием функции нужно исправить значения переменных с параметрами подключения к БД:
$db_host – имя хоста, на котором установлен сервер БД (обычно localhost);
$db_name – имя базы данных;
$db_user – имя пользователя;
$db_pass – пароль пользователя.

Код функции достаточно простой. Мы подключаемся к серверу MySQL (с помощью функции mysql_connect) и выбираем указанную базу данных (mysql_select_db). Если ошибок не было, функция возвращает открытое соединение.

Примечание. Чтобы упростить код я использовал стандартные функции для работы с MySQL. В реальном web приложении удобнее использовать какую-нибудь библиотеку для работы с БД. Например, ADOdb или встроенные библиотеки фреймворка (если он используется).

В следующей части мы рассмотрим работу скрипта, формирующего основную страницу нашего приложения.

Интересно почитать

Недвижимость москва — выгодное вложение средств
Наша фирма предлагает аренда квартир в Москве по низким ценам.
На сайте http://www.ipoteka.irr.ru/ вы найдете подробную информацию об ипотеке.

  • Замечательная софтинка 🙂 спасибо — буду использовать на своем сайте 🙂 уж очень интересная штука. — сделаю из нее ежедневник себе — в котором можно одним нажатием изменить событие 🙂 спасибо.

    • Всегда пожалуйста 🙂 .

      Честно говоря, использовать это приложение как ежедневник не очень удобно:
      1) это демонстрационный пример и функциональность минимальная;
      2) думаю, вы сразу почувствуете, что нужна дата создания записи;
      3) также пригодятся возможности экспорта и импорта записей (создание резервных копий);
      4) авторизация (это не сложно);
      5) поиск, сортировка.

      И это только примерный список.
      Это все я пишу только потому, что планирую сделать полноценный online ежедневник. И еще не до конца определился с функциональностью, архитектурой и т.п.

      В общем, если есть какие-нибудь мысли по этому поводу, буду рад выслушать.

      • Владимир — ваша идея несомненно хороша.
        По поводу функционала — посмотрите календарь от гугла.

        мне же всего лишь нужна своего рода табличка…
        вот ее примерная архитектура

        ————————————
        | Понедельник | Вторник | и т.д.
        ————————————
        |08.30 Завтрак
        |09.30 Пробежка
        |10.30 Душ
        |11.00 Работа
        |и т.д. в каждой колонке.
        |

        Мне не нужны сложные ежедневники вроде гугловского, поэтому я решил сделать у себя на сайте некую «записную книжку» или «распорядок дня»…

        Меняться записи будут не часто — поэтому предложенная вами технология меня вполне устроит.

        Авторизация у меня уже есть. Дату создания мне не требуется 🙂
        Единственное что я изменю в вашем скрипте — это добавлю отдельным полем — время и изменю все ссылочки на аккуратненькие картиночки. Чтобы было приятно глазу.

        Спасибо вам, очень хороший скрипт.

        • Видите, у вас таблица двумерная (столбцы — понедельник, вторник, … и строки — записи).

          Так что, думаю, простым изменением ссылок вы не отделаетесь 🙂

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

          Иногда из таких приложений «для себя» вырастают крупные проекты.

          Удачи!

  • Замечательная софтинка 🙂 спасибо — буду использовать на своем сайте 🙂 уж очень интересная штука. — сделаю из нее ежедневник себе — в котором можно одним нажатием изменить событие 🙂 спасибо.

    • Всегда пожалуйста 🙂 .

      Честно говоря, использовать это приложение как ежедневник не очень удобно:
      1) это демонстрационный пример и функциональность минимальная;
      2) думаю, вы сразу почувствуете, что нужна дата создания записи;
      3) также пригодятся возможности экспорта и импорта записей (создание резервных копий);
      4) авторизация (это не сложно);
      5) поиск, сортировка.

      И это только примерный список.
      Это все я пишу только потому, что планирую сделать полноценный online ежедневник. И еще не до конца определился с функциональностью, архитектурой и т.п.

      В общем, если есть какие-нибудь мысли по этому поводу, буду рад выслушать.

      • Владимир — ваша идея несомненно хороша.
        По поводу функционала — посмотрите календарь от гугла.

        мне же всего лишь нужна своего рода табличка…
        вот ее примерная архитектура

        ————————————
        | Понедельник | Вторник | и т.д.
        ————————————
        |08.30 Завтрак
        |09.30 Пробежка
        |10.30 Душ
        |11.00 Работа
        |и т.д. в каждой колонке.
        |

        Мне не нужны сложные ежедневники вроде гугловского, поэтому я решил сделать у себя на сайте некую «записную книжку» или «распорядок дня»…

        Меняться записи будут не часто — поэтому предложенная вами технология меня вполне устроит.

        Авторизация у меня уже есть. Дату создания мне не требуется 🙂
        Единственное что я изменю в вашем скрипте — это добавлю отдельным полем — время и изменю все ссылочки на аккуратненькие картиночки. Чтобы было приятно глазу.

        Спасибо вам, очень хороший скрипт.

        • Видите, у вас таблица двумерная (столбцы — понедельник, вторник, … и строки — записи).

          Так что, думаю, простым изменением ссылок вы не отделаетесь 🙂

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

          Иногда из таких приложений «для себя» вырастают крупные проекты.

          Удачи!

  • Владимир, естевственно я слегка подкорректирую ваш скрипт 🙂 просто возьму его за основу 🙂 Зачем заного изобретать велосипед, когда он уже почти готовый есть.

  • Владимир, естевственно я слегка подкорректирую ваш скрипт 🙂 просто возьму его за основу 🙂 Зачем заного изобретать велосипед, когда он уже почти готовый есть.

  • Спасибо за статью, давно думал как удобнее можно редактировать списки.

    • Всегда пожалуйста.
      Кстати, удобнее всего в Excel или аналогичном редакторе 🙂

  • Спасибо за статью, давно думал как удобнее можно редактировать списки.

    • Всегда пожалуйста.
      Кстати, удобнее всего в Excel или аналогичном редакторе 🙂

  • Антон

    Владимир, спасибо Вам за интересную статью! Очень пригодилась. И, хотя я сам не прогаммирую на java, мне было очень интересно и просто работать с вашими примерами. Вот сейчас я пытаюсь сделать не одно, а несколько полей (буду рад, если вы рассмотрите и такой пример).
    А вообще, я хотел вот о чем спросить. Вы не могли бы рассмотреть исполнение примера, когда в родительском окне инициируется открытие дочернего окна, и действие в дочернем окне застявляет извениться информацию в родительском окне. Понимаю, что объясняю «мутно», попробую пример изобразить. В родительском окне есть Строка с полным адресом клиента (г.Москва, ул.Мира, д.18, корп.22, офис.18), рядом кнопка редактировать. Нажимаем, открывается дополнительное окошко, в котором есть поля с выбором из списка, текстовые поля для воода элементов адреса по-отдельности (город, улица, дом, корпус и т.д.). При нажатии кнопки «готово» данные отправляются обработчику, который складывает данные в базу, окно (дочернее) закрывается, а родительское обновляется (отображая уже новые данные). Вот. Надеюсь я понятно объяснил замысел, хотя я буду рад любому примеру по работе с окнами. Заранее благодарен!

    • Прежде всего, нужно создать страницу, которая будет отображаться в дочернем окне. В ней, насколько я понял задачу, должна быть форма, которая отправит данные серверному скрипту.
      Отправка данных ничем не отличается от отправки с основной страницы, просто укажите в параметре action адрес скрипта.

      Теперь открываем окно:
      window.open("popup_content.html", "new_window", "location,width=300,height=200,top=0");
      popupWin.focus();

      В первом параметре указывается имя страницы, которую нужно показать в дочернем окне. Второй параметр — имя окна. Остальные — управляют положением, размерами и т.д. (думаю, вы без труда найдете подробное описание параметров этой функции).

      Закрыть окно можно так:
      window.close();

      Что касается обновления родительского окна, то есть очень неплохой пример.

      Кстати, примеры в статье на php, а не java 🙂

  • Антон

    Владимир, спасибо Вам за интересную статью! Очень пригодилась. И, хотя я сам не прогаммирую на java, мне было очень интересно и просто работать с вашими примерами. Вот сейчас я пытаюсь сделать не одно, а несколько полей (буду рад, если вы рассмотрите и такой пример).
    А вообще, я хотел вот о чем спросить. Вы не могли бы рассмотреть исполнение примера, когда в родительском окне инициируется открытие дочернего окна, и действие в дочернем окне застявляет извениться информацию в родительском окне. Понимаю, что объясняю «мутно», попробую пример изобразить. В родительском окне есть Строка с полным адресом клиента (г.Москва, ул.Мира, д.18, корп.22, офис.18), рядом кнопка редактировать. Нажимаем, открывается дополнительное окошко, в котором есть поля с выбором из списка, текстовые поля для воода элементов адреса по-отдельности (город, улица, дом, корпус и т.д.). При нажатии кнопки «готово» данные отправляются обработчику, который складывает данные в базу, окно (дочернее) закрывается, а родительское обновляется (отображая уже новые данные). Вот. Надеюсь я понятно объяснил замысел, хотя я буду рад любому примеру по работе с окнами. Заранее благодарен!

    • Прежде всего, нужно создать страницу, которая будет отображаться в дочернем окне. В ней, насколько я понял задачу, должна быть форма, которая отправит данные серверному скрипту.
      Отправка данных ничем не отличается от отправки с основной страницы, просто укажите в параметре action адрес скрипта.

      Теперь открываем окно:
      window.open("popup_content.html", "new_window", "location,width=300,height=200,top=0");
      popupWin.focus();

      В первом параметре указывается имя страницы, которую нужно показать в дочернем окне. Второй параметр — имя окна. Остальные — управляют положением, размерами и т.д. (думаю, вы без труда найдете подробное описание параметров этой функции).

      Закрыть окно можно так:
      window.close();

      Что касается обновления родительского окна, то есть очень неплохой пример.

      Кстати, примеры в статье на php, а не java 🙂

  • Pingback: Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (настройка и оформление)()

  • Злодей

    Афигенная вещь, только вот меня смущает что кнопку добавления нада мышкой тыкать — по ентеру не работает.

    • Попробуйте изменить тип кнопки «Добавить» с
      input type=»button»
      на
      input type=»submit»

      • Simple-the-best

        Очень хорошая статья. А вот как сделать, чтоб все значения вводились в таблицу?

        • Simple-the-best

          При добавлении еще одного столбца в таблице БД(например utem), что нужно изменить в additem

        • Тег li нужно заменить на td.

  • Злодей

    Афигенная вещь, только вот меня смущает что кнопку добавления нада мышкой тыкать — по ентеру не работает.

    • Попробуйте изменить тип кнопки «Добавить» с
      input type=»button»
      на
      input type=»submit»

  • ivanspopov

    Предлагаем продвижение сайтов в Санкт-Петербурге — http://ac-u.ru/. А также создаем сайты с нуля, скрипты (программные модули), разрабатываем дизайн. При необходимости предоставляем услуги копирайтера. В нашей компании Вы получите полный комплекс услуг по созданию и обслуживанию сайта, а также помощь в создании фирменного стиля.