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

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

Скриншот WebListEditor
Это завершающая статья цикла о создании web редактора. Наш редактор позволяет создавать/изменять/удалять записи в обычном списке.

В предыдущих статьях мы рассмотрели:
структуру приложения;
создание главной страницы;
добавление новых записей;
редактирование записей;
и удаление записей.

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

Теперь несколько слов об установке этого приложения.

Прежде всего, вам нужно скачать архив с исходным кодом.

Естественно, у вас уже должен быть установлен web сервер (Apache), интерпретатор PHP и база данных MySQL. (Если у вас возникли сложности на этом этапе смотрите статью «Установка и настройка WAMP5»).

После этого создайте базу данных с одной таблицей.

Примечание. В архиве находится файл db.sql с sql запросом для создания нужной таблицы.

Теперь переименуйте файл dbdata_tmpl.php в dbdata.php (находится в папке scripts) и укажите в нем параметры подключения к базе данных.

Оформление списка

Изменить размещение элементов списка можно с помощью таблицы стилей, которая находится в файле styles.css.

Здесь нет ничего сложного. Единственное, на что стоит обратить внимание, это стили классов itemNum и itemValue.

.itemNum {
	float: left;
	width: 50px;
}

.itemValue {
	float: left;
	margin: 0px 0px 0px 0px;
}

Для них задано правило float: left, что позволяет разместить их в одну строку.

Такое же правило задано и для элемента listForm

#listForm {
	float: left;
}

Помните, этот элемент содержит форму встраиваемого редактора и при активации заменяет itemValue.

Для того чтобы каждая запись списка начиналась с новой строки, используется правило clear: both для тегов li

#list li {
	clear: both;
	margin: 0;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #d5dded;
}

Заключение

Вот и все. Наше web приложение закончено. Посмотреть демонстрационную версию вы можете здесь. Обо всех замеченных недостатках пишите в комментариях.

Удачи!

Интересное

Соблазнение девушки — мифы и реальность.

  • nube

    При вставке пустого поля ошыбко

    {«error_mes»:»u041du0435 u0437u0430u0434u0430u043du043e u0437u043du0430u0447u0435u043du0438u0435 u0437u0430u043fu0438u0441u0438"}

    • Спасибо, я разберусь с кодировками.

      Там выводится сообщение: «Не задано значение записи».

    • Исправил. Дело, оказывается было не в кодировках.
      Просто я отправил сообщение об ошибке в формате JSON, а встроенный редактор его не понимает.
      Проблема была решена с помощью своего обработчика onComplete.

  • nube

    При вставке пустого поля ошыбко

    {«error_mes»:»\u041d\u0435 \u0437\u0430\u0434\u0430\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u0438"}

    • Спасибо, я разберусь с кодировками.

      Там выводится сообщение: «Не задано значение записи».

    • Исправил. Дело, оказывается было не в кодировках.
      Просто я отправил сообщение об ошибке в формате JSON, а встроенный редактор его не понимает.
      Проблема была решена с помощью своего обработчика onComplete.

  • А интересно в принципе в итоге вышло — санкс за цикл статей 😎

  • А интересно в принципе в итоге вышло — санкс за цикл статей 😎

  • FoxTester

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

    Можно оригинальные скрипты глянуть? на каком-то этапе что-то не так..

    • Оригинальные скрипты в архиве, который вы скачали, так что глянуть их не проблема 🙂

      Если не сложно, попробуйте запустить скрипт из FireFox с установленным плагином FireBug. Он покажет запросы, которые отправляются серверу и ошибки (если будут).

      Дело в том, что у меня на локалке все нормально работает, и в демонстрационном варианте на сервере хостера (http://www.demosites.org.ua/weblisteditor/) тоже ошибок не возникает.

  • FoxTester

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

    Можно оригинальные скрипты глянуть? на каком-то этапе что-то не так..

    • Оригинальные скрипты в архиве, который вы скачали, так что глянуть их не проблема 🙂

      Если не сложно, попробуйте запустить скрипт из FireFox с установленным плагином FireBug. Он покажет запросы, которые отправляются серверу и ошибки (если будут).

      Дело в том, что у меня на локалке все нормально работает, и в демонстрационном варианте на сервере хостера (http://demosites.simplecoding.org/weblisteditor/) тоже ошибок не возникает.

  • FoxTester

    Все, вопрос решился:) не обратил внимания что тестировал на версии php без json 🙂
    нашел замену стандартной функции — и все заработало.
    если кто столкнется с проблемой такой — в комментах php.net/json_encode есть:)

    • Бывает 😉
      А за ссылку — спасибо! Мне как-то нужно было запустить скрипт без поддержки json, так пришлось самому писать. Получилось гораздо примитивнее, да и поддержка была не для всех типов данных.

  • FoxTester

    Все, вопрос решился:) не обратил внимания что тестировал на версии php без json 🙂
    нашел замену стандартной функции — и все заработало.
    если кто столкнется с проблемой такой — в комментах php.net/json_encode есть:)

    • Бывает 😉
      А за ссылку — спасибо! Мне как-то нужно было запустить скрипт без поддержки json, так пришлось самому писать. Получилось гораздо примитивнее, да и поддержка была не для всех типов данных.

  • MadSem

    Обновление записи происходит и изменение отображаются. А удаление и добавление, отображается только после F5. Подскажите почему не обновляется само?

    • Странно, у меня вроде все работает (проверял в FF, IE7 и Opera9). Вы тестировали на сайте или скачали и установили у себя?
      Каким браузером?

      • MadSem

        Установил у себя, веб «сервер» 🙂 стоит денвер, пробовал под оперой 9.52 и эксплорером 7. Что то не так с json?

  • MadSem

    Обновление записи происходит и изменение отображаются. А удаление и добавление, отображается только после F5. Подскажите почему не обновляется само?

    • Странно, у меня вроде все работает (проверял в FF, IE7 и Opera9). Вы тестировали на сайте или скачали и установили у себя?
      Каким браузером?

      • MadSem

        Установил у себя, веб «сервер» 🙂 стоит денвер, пробовал под оперой 9.52 и эксплорером 7. Что то не так с json?

  • MadSem

    Посмотрел инфо
    support enabled
    json version 1.2.1

    • Тогда все просто 🙂
      Ставьте FireFox и к нему плагин Firebug. Он позволяет посмотреть запрос и ответ сервера.

      Открываете редактор.
      В строке ищите изображение жука. Кликаете по нему — открывается окно. Отмечаете все чек-боксы и жмете кнопку «Enable selected panels….»

      Вам нужна первая панель — Console.

      После этого просто работаете с редактором. В консоле будут отображаться ваши запросы и ответы сервера.

      Например, при добавлении текста.

      В запросе (post)
      value test

      В ответе (response) должна быть такая строка
      {«id»:389,»value»:»test»}

      Вместо слова test будет текст, который вы введете в редакторе.

  • MadSem

    Посмотрел инфо
    support enabled
    json version 1.2.1

    • Тогда все просто 🙂
      Ставьте FireFox и к нему плагин Firebug. Он позволяет посмотреть запрос и ответ сервера.

      Открываете редактор.
      В строке ищите изображение жука. Кликаете по нему — открывается окно. Отмечаете все чек-боксы и жмете кнопку «Enable selected panels….»

      Вам нужна первая панель — Console.

      После этого просто работаете с редактором. В консоле будут отображаться ваши запросы и ответы сервера.

      Например, при добавлении текста.

      В запросе (post)
      value test

      В ответе (response) должна быть такая строка
      {«id»:389,»value»:»test»}

      Вместо слова test будет текст, который вы введете в редакторе.

  • Skunk

    Добавил после каждого вызова функции connect строки
    mysql_query(«SET NAMES utf8»);
    mysql_query(«SET CHARACTER SET utf8»);
    и всё зашуршало бодренько, а то юникод-то юникодом, а мускулю об этом сказать забыли…

    • А какая версия MySQL у вас установлена?
      Просто у меня не было этой ошибки.
      Вообще вы правы, если есть вероятность ошибки, то лучше указывать везде кодировку явно.

  • Skunk

    Добавил после каждого вызова функции connect строки
    mysql_query(«SET NAMES utf8»);
    mysql_query(«SET CHARACTER SET utf8»);
    и всё зашуршало бодренько, а то юникод-то юникодом, а мускулю об этом сказать забыли…

    • А какая версия MySQL у вас установлена?
      Просто у меня не было этой ошибки.
      Вообще вы правы, если есть вероятность ошибки, то лучше указывать везде кодировку явно.

  • Александр

    Все сделал по инструкции. В firefox все пучком а вот в эксплорере данные в таблицу добавляет но на странице ничего не происходит пока ее не обновить. в чем может быть проблема?

    • Судя по вашему описанию, похоже, что не выполняется JS скрипт, который обрабатывает ответ сервера.
      А какой версией IE вы пользуетесь? Я проверял в IE 7.0.6 — все отлично работает.

  • Александр

    Все сделал по инструкции. В firefox все пучком а вот в эксплорере данные в таблицу добавляет но на странице ничего не происходит пока ее не обновить. в чем может быть проблема?

    • Судя по вашему описанию, похоже, что не выполняется JS скрипт, который обрабатывает ответ сервера.
      А какой версией IE вы пользуетесь? Я проверял в IE 7.0.6 — все отлично работает.

  • сергей

    было бы здорово еще добавить что бы можно было менять их местами ….

  • сергей

    было бы здорово еще добавить что бы можно было менять их местами ….

  • Спасибо да доку, все получилось. Только вот почему-то после одного сохранения, во второй раз добавляются две строки снизу. Так до сих пор и не смог найти причину. Вы с таким не сталкивались? Кстати, в каждом материале очень не хватало ссылок на предыдущий материал и последующий. Приходилось мучаться с возвращением на предыдущую страницу.

    • Не могли бы вы сделать скриншот этого бага?

      • Вот: vorona7001.com. То есть при клике на пустое поле вводится текст нормально. Сохраняется. А потом когда кликаешь на текст, то внизу появляется две строки. Когда текст вставляется изначально из базы, такого нет. Я грешил на скрипт на стороне сервака. Поставил trim, на выходе — не помогло.

        • Все, я нашел ошибку. После закрывающего тега ?> в PHP скрипте были еще две строки. 🙁

  • Спасибо да доку, все получилось. Только вот почему-то после одного сохранения, во второй раз добавляются две строки снизу. Так до сих пор и не смог найти причину. Вы с таким не сталкивались? Кстати, в каждом материале очень не хватало ссылок на предыдущий материал и последующий. Приходилось мучаться с возвращением на предыдущую страницу.

    • Не могли бы вы сделать скриншот этого бага?

      • Вот: vorona7001.com. То есть при клике на пустое поле вводится текст нормально. Сохраняется. А потом когда кликаешь на текст, то внизу появляется две строки. Когда текст вставляется изначально из базы, такого нет. Я грешил на скрипт на стороне сервака. Поставил trim, на выходе — не помогло.

        • Все, я нашел ошибку. После закрывающего тега ?> в PHP скрипте были еще две строки. 🙁

  • Sashatkachuk95

    Подскажите пожалуста!
    Как сделать так, что бы есле я поставил в текстареи (поле куда вводить текст) энтер, то и в блоке где выводится надпись он появился.
    вот так :
    Тест
    Тест

  • При выводе текста используйте тег pre или замените переносы строки на теги br.