Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (настройка и оформление)
Это завершающая статья цикла о создании 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 приложение закончено. Посмотреть демонстрационную версию вы можете здесь. Обо всех замеченных недостатках пишите в комментариях.
Удачи!
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в Ajax, JavaScript, PHP Комментарии (19) »
Комментарии (19)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
При вставке пустого поля ошыбко
{"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.
А интересно в принципе в итоге вышло – санкс за цикл статей
Скачал, поставил, ничего не менял.
На добавлении и удалении – не срабатывает изменение списка записей, а правка – работает нормально.
Можно оригинальные скрипты глянуть? на каком-то этапе что-то не так..
Оригинальные скрипты в архиве, который вы скачали, так что глянуть их не проблема
Если не сложно, попробуйте запустить скрипт из FireFox с установленным плагином FireBug. Он покажет запросы, которые отправляются серверу и ошибки (если будут).
Дело в том, что у меня на локалке все нормально работает, и в демонстрационном варианте на сервере хостера (http://www.demosites.org.ua/weblisteditor/) тоже ошибок не возникает.
Все, вопрос решился:) не обратил внимания что тестировал на версии php без json
нашел замену стандартной функции – и все заработало.
если кто столкнется с проблемой такой – в комментах php.net/json_encode есть:)
Бывает
А за ссылку – спасибо! Мне как-то нужно было запустить скрипт без поддержки json, так пришлось самому писать. Получилось гораздо примитивнее, да и поддержка была не для всех типов данных.
Обновление записи происходит и изменение отображаются. А удаление и добавление, отображается только после F5. Подскажите почему не обновляется само?
Странно, у меня вроде все работает (проверял в FF, IE7 и Opera9). Вы тестировали на сайте или скачали и установили у себя?
Каким браузером?
Установил у себя, веб "сервер"
стоит денвер, пробовал под оперой 9.52 и эксплорером 7. Что то не так с json?
Скорее всего да. Посмотрите phpinfo(), там должна быть запись
json support enabled
Кстати, встроенная поддержка json, появилась в PHP 5.2.0
Для более старых версий
http://pear.php.net/pepr/pepr-proposal-show.php?id=198
Посмотрел инфо
support enabled
json version 1.2.1
Тогда все просто
Ставьте FireFox и к нему плагин Firebug. Он позволяет посмотреть запрос и ответ сервера.
Открываете редактор.
В строке ищите изображение жука. Кликаете по нему – открывается окно. Отмечаете все чек-боксы и жмете кнопку "Enable selected panels…."
Вам нужна первая панель – Console.
После этого просто работаете с редактором. В консоле будут отображаться ваши запросы и ответы сервера.
Например, при добавлении текста.
В запросе (post)
value test
В ответе (response) должна быть такая строка
{"id":389,"value":"test"}
Вместо слова test будет текст, который вы введете в редакторе.
Добавил после каждого вызова функции connect строки
mysql_query("SET NAMES utf8");
mysql_query("SET CHARACTER SET utf8");
и всё зашуршало бодренько, а то юникод-то юникодом, а мускулю об этом сказать забыли…
А какая версия MySQL у вас установлена?
Просто у меня не было этой ошибки.
Вообще вы правы, если есть вероятность ошибки, то лучше указывать везде кодировку явно.
Все сделал по инструкции. В firefox все пучком а вот в эксплорере данные в таблицу добавляет но на странице ничего не происходит пока ее не обновить. в чем может быть проблема?
Судя по вашему описанию, похоже, что не выполняется JS скрипт, который обрабатывает ответ сервера.
А какой версией IE вы пользуетесь? Я проверял в IE 7.0.6 – все отлично работает.
было бы здорово еще добавить что бы можно было менять их местами ….