Категории: Web разработка

Отправка данных в формате JSON с помощью JavaScript и jQuery

Владимир | | Ajax, JavaScript, PHP, Web разработка.

В прошлых статьях я рассказывал и приводил примеры получения и обработки данных в формате JSON на стороне клиента. Но примера отправки данных серверу в этом формате не было. Сегодня я попробую исправить это упущение.

Прежде всего, кратко напомню принцип передачи данных в JSON формате от сервера браузеру.

1) Серверный (PHP) скрипт формирует массив с данными, преобразует их в формат JSON (используется функция json_encode) и отправляет браузеру.

2) На стороне браузера JS скрипт обрабатывает полученные данные. Тут для преобразования данных используется eval.

То есть все преобразования данных сводятся к использованию двух функций.

Отправка данных серверу немного сложнее.
Читать дальше

Делаем радио кнопки удобными

Владимир | | CSS, HTML, Web разработка.

Сложно представить работу в интернете без использования форм. Но, к сожалению, очень часто удобство их использования оставляет желать лучшего.

В этой заметке я расскажу, как можно значительно увеличить этот показатель для формы с радио кнопками (radio buttons) за счет правильной HTML разметки и нескольких CSS стилей.

Обратите внимание. Применение этих советов никоим образом не сказывается на работоспособности формы и не изменяет отправляемые данные.

Как говорится «Одна картинка стоит тысячи слов». Поэтому сразу даю ссылки на демонстрационную страничку и архив с файлами примера.
Читать дальше

Сворачиваем списки с помощью jQuery

Владимир | | CSS, HTML, JavaScript, Web разработка.

Сегодня я хочу рассказать о небольшом плагине для jQuery под названием Collapsorz. Его можно использовать для уменьшения длины html списков или других вложенных структур тегов.

Чтобы лучше представлять, о чем идет речь, взгляните на демонстрационную страничку.

Применений для этого плагина можно найти множество. Например:

1) Выравнивать высоту блоков в сайдбаре. Тут лучше сильно не увлекаться. Вряд ли будет удачным решением свернуть блок со списком разделов сайта. Но если вы свернете блоки типа «Последние посетители» или «Топ комментаторов», то вреда большого не будет.

2) Прятать редко используемые пункты в меню. Предварительно, конечно, нужно отсортировать список с этими пунктами и разместить наиболее популярные в начале.

3) Использовать вместе с облаком тегов, разбитым на кластеры. Подобные решения часто применяются на сервисах социальных закладок.

4) Использовать для SEO. Часто оптимизаторы делают очень большие блоки ссылок на внутренние страницы сайта. Это даёт возможность получить много страниц 2-ого уровня. Но выглядят такие блоки далеко не лучшим образом (много мелкого текста).

Примечание. Часто эти блоки вообще убирают подальше от глаз посетителей. Например, во вложенные табы.

Принцип работы плагина.
Читать дальше

JavaScript библиотеки для создания графиков

Владимир | | Ajax, htaccess, HTML, JavaScript, PHP, Web разработка.

Сегодня я продолжу рассказ о создании и использовании графиков на web ресурсах.

В предыдущих статьях речь шла об использовании для этих целей flash библиотек (Графики своими руками – Open Flash Chart 2) и внешних сервисов (Графики от Google и PHP библиотеки для работы с ними).

В принципе, на этом можно было бы остановиться, но судя по реакции в комментариях, я пропустил ещё один очень интересный вариант создания графиков. Речь, конечно, об использовании JavaScript.

Рассмотрим достоинства и недостатки этого варианта.

Достоинства.

1) Минимальные затраты на трафик. Передать нужно только саму библиотеку (обычно размер не превышает 100 кБ (без сжатия)) и данные для построения графика.

2) Минимальная нагрузка на сервер. Отрисовка графика выполняется браузером. Сервер должен только отправить массив с точками, по которым будет построен график.

3) Простота использования. Достигается за счет готовых библиотек.

Недостатки.

1) Возможны проблемы совместимости с некоторыми браузерами. С этими проблемами знакомы все web мастера. Но, должен отметить, что разработчики библиотек неплохо с ними справляются.

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

Теперь перейдем к практической части.
Читать дальше

Графики от Google и PHP библиотеки для работы с ними

Владимир | | HTML, PHP, Web разработка.

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

Речь, конечно, пойдет о web сервисе Google Chart. Этот сервис появился достаточно давно и на сегодняшний день существует множество библиотек для работы с ним. Но к сервису и библиотекам мы ещё вернемся, а сейчас обсудим варианты создания графиков для web страниц.

Главная проблема

На сегодняшний день нарисовать график, используя только HTML, нельзя. Поэтому приходится использовать обходные варианты.

1) Создать рисунок с графиком и вставить его в страницу.

2) Использовать Flash. Об этом варианте я рассказывал в статье Графики своими руками – Open Flash Chart 2. По-идее, вместо Flash можно использовать Silverlight, но примеров я не видел.

Примечание. Big_Shark подсказал еще одну flash библиотеку для создания графиков — amCharts. Очень советую посмотреть. Возможно вам она понравится больше чем Open Flash Chart.

Рассмотрим подробнее первый вариант. Рисунок с графиком может быть статическим или динамическим.
Читать дальше

Графики своими руками – Open Flash Chart 2

Владимир | | PHP, Web разработка.

Об этой библиотеке я раньше рассказывал (Open Flash Chart – строим графики). Но с тех пор прошло почти 8 месяцев и за это время многое изменилось.

Вышла новая версия библиотеки Open Flash Chart 2 и она довольно серьезно отличается от первой версии. Объяснять причины введения изменений я не буду, просто процитирую автора.

Open Flash Chart 1.x была отличной и хорошо работала. Но я сделал несколько маленьких ошибок, которые со временем выросли, стали раздражать меня и сделали исходный код жутким. Поэтому я решил, что настало время переработать код и снова сделать его красивым. Теперь в качестве формата данных используется JSON. Это привело к значительным изменениям и позволило реализовать несколько новых возможностей.

Выход новой версии не сделал V 1.x устаревшей. Вы можете использовать обе версии одновременно. Поэтому не трогайте ваш работающий с V 1.x код, а для новых графиков используйте ту версию которой вам удобнее (проще) пользоваться.

Думаю, ситуация более-менее ясна, поэтому сразу приведу пример использования второй версии.

Как и в первой версии нужно внимательно следить за размещением библиотеки и правильно указывать пути к файлам.
Читать дальше

tinyMCE — установка, настройка и использование.

Владимир | | CSS, JavaScript, Web разработка.

Сегодня речь пойдет об использовании tinyMCE – одного из лучших JavaScript редакторов. На сегодняшний день подобных редакторов воз и маленькая тележка и, конечно, идеального не существует. Кстати, раньше я рассказывал об одном из них (Подключаем FCKeditor к CodeIgniter).

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

1) Предельно простое подключение.

2) В дистрибутив входит тема с минимальным количеством элементов управления.

3) Есть готовые скрипты для сжатия редактора.

4) Есть пакет для русификации.

Второй пункт я хочу пояснить отдельно. Большинство редакторов имеют очень много возможностей. Во всяком случае по количеству кнопок в меню они напоминают офисные пакеты вроде Word’а. Но в большинстве случаев эти возможности просто не нужны.

Более того, они увеличивают время загрузки редактора и усложняют работу с ним (дольше приходится искать нужные кнопки).
Читать дальше

jQuery: Специальные события

Владимир | | JavaScript, Web разработка.

Этот пост — перевод статьи Брэндона Аарона (Brandon Aaron) Special Events, в котором он рассказывает об использовании специальных событий jQuery и приводит пример создания обработчика тройного клика мышкой.

jQuery, начиная с версии 1.2.2, имеет API для создания "специальных событий". Эти события называются специальными, потому что позволяют выполнять некоторые дополнительные действия при их возникновении, а также имеют опцию, позволяющую обходить внутреннею систему событий jQuery. Используя эти специальные события вы можете создавать пользовательские события, которые требуют выполнения каких-то действий перед началом работы (при установке) или должны переопределять поведение встроенных событий.

Мы использовали специальные события jQuery для создания событий “mouseenter” и “mouseleave”, а также для создания события “ready” и для нормализации события “mousewheel” в плагине mouse wheel.

Специальное событие: “tripleclick” (тройной клик).
Читать дальше

Bug Tracker: ответы на комментарии (часть десятая)

Владимир | | CodeIgniter, HTML, JavaScript, MySQL, PHP, Web разработка.

В предыдущих частях (1, 2, 3, 4, 5, 6, 7, 8, 9) мы создали практически работоспособную систему отслеживания ошибок.

«Практически» в данном случае означает, что на данный момент у пользователя отсутствует возможность отвечать на комментарии. Т.е. можно оставить только комментарий 1-ого уровня (комментарий к багу).

Сегодня мы исправим этот недостаток.

Напомню, что на стороне сервера поддержка вложенных комментариев уже реализована. В базе данных (таблица comments) есть поле parent_id в котором хранится id родительского комментария.

Кроме того, метод addComment (модели mcomments) принимает массив с данными комментария, одним из полей которого является parent_id.

И, наконец, метод addcomment контроллера читает этот параметр из массива $_POST и передает его модели.

Таким образом, нам остается обеспечить возможность посетителю указывать на какой комментарий он хочет ответить.
Читать дальше

BugTracker: локализация (часть девятая)

Владимир | | CodeIgniter, PHP, Web разработка.

Сегодня мы продолжаем разработку собственной системы отслеживания ошибок. В предыдущих частях мы рассмотрели добавление записей о багах и комментариев к ним.

Но при этом не решенным остался вопрос локализации.

По-умолчанию CodeIgniter выводит сообщения об ошибках на английском языке. Прежде всего, это касается описаний ошибок, которые возникают при некорректном заполнении форм.

В этой части я расскажу, как перевести эти сообщения на русский язык.

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

Например, правила для проверки email выглядят следующим образом.
Читать дальше