11 января, 2008

Скриншот 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 приложение закончено. Посмотреть демонстрационную версию вы можете здесь. Обо всех замеченных недостатках пишите в комментариях.

Удачи!

Интересное

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

Понравилась статья? Подписывайтесь на продолжение !

Или на мой твиттер

Добавьте эту страницу в Tweet

Опубликовано в Ajax, JavaScript, PHP Комментарии (48) »

Вы можете оставить комментарий. Трекбеки закрыты.

nube

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

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

http://www.simplecoding.org/ Владимир

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

Там выводится сообщение: "Не задано значение записи".
http://www.simplecoding.org/ Владимир

Исправил. Дело, оказывается было не в кодировках.
Просто я отправил сообщение об ошибке в формате 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"}

http://www.simplecoding.org/ Владимир

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

Там выводится сообщение: "Не задано значение записи".
http://www.simplecoding.org/ Владимир

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

http://www.oilbase.ru/ ACID Jesus

А интересно в принципе в итоге вышло – санкс за цикл статей
http://www.oilbase.ru ACID Jesus

А интересно в принципе в итоге вышло – санкс за цикл статей
FoxTester

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

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

http://www.simplecoding.org/ Владимир

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

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

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

FoxTester

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

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

http://www.simplecoding.org/ Владимир

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

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

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

FoxTester

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

http://www.simplecoding.org/ Владимир

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

FoxTester

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

http://www.simplecoding.org/ Владимир

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

MadSem

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

http://www.simplecoding.org/ Владимир

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

MadSem

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

http://www.simplecoding.org/ Владимир

Скорее всего да. Посмотрите phpinfo(), там должна быть запись
json support enabled

Кстати, встроенная поддержка json, появилась в PHP 5.2.0

Для более старых версий
http://pear.php.net/pepr/pepr-proposal-show.php?id=198

MadSem

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

http://www.simplecoding.org/ Владимир

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

MadSem

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

http://www.simplecoding.org/ Владимир

Скорее всего да. Посмотрите phpinfo(), там должна быть запись
json support enabled

Кстати, встроенная поддержка json, появилась в PHP 5.2.0

Для более старых версий
http://pear.php.net/pepr/pepr-proposal-show.php?id=198

MadSem

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

http://www.simplecoding.org/ Владимир

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

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

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

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

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

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

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

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

MadSem

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

http://www.simplecoding.org/ Владимир

Тогда все просто
Ставьте 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");
и всё зашуршало бодренько, а то юникод-то юникодом, а мускулю об этом сказать забыли…

http://www.simplecoding.org/ Владимир

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

Skunk

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

http://www.simplecoding.org/ Владимир

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

Александр

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

http://www.simplecoding.org/ Владимир

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

Александр

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

http://www.simplecoding.org/ Владимир

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

сергей

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

было бы здорово еще добавить что бы можно было менять их местами ….
http://vorona7001.com/ Impec

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

http://www.simplecoding.org/ Владимир

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

http://vorona7001.com/myopyt/proba/advego Impec

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

http://vorona7001.com/myopyt/proba/advego Impec

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

http://vorona7001.com Impec

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

http://www.simplecoding.org/ Владимир

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

http://vorona7001.com/myopyt/proba/advego Impec

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

http://vorona7001.com/myopyt/proba/advego Impec

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

Sashatkachuk95

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

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