Разработка 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
Комментарии (8)
Вы можете отслеживать обсуждение записи с помощью 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, так пришлось самому писать. Получилось гораздо примитивнее, да и поддержка была не для всех типов данных.