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

jQuery Grid Plugin имеет смысл использовать если нужно работать с большими таблицами. Дело в том, что плагин существенно упрощает разбивку данных на страницы. Т.е. автоматически создается панель с кнопками перелистывания страниц, а новые данные подгружаются с помощью AJAX. Кроме того, плагин имеет кучу дополнительных функций и несколько тем оформления.

От вас требуется настроить плагин и передавать ему данные. Звучит не сложно, но как всегда есть нюансы.

Чтобы не ходить вокруг да около, давайте рассмотрим небольшой пример.
Читать дальше »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Недостатки.

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

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

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

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

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

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

Поэтому сегодня постараюсь максимально подробно осветить этот вопрос.

Т.к. индексация страниц баг трекера поисковиками очень желательна, то при разработке имеет смысл придерживаться рекомендаций от Google, а именно методики Progressive Enhancement (постепенного улучшения).

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

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

Если JavaScript включен, то после загрузки страницы обычные ссылки будут преобразованы в ajax-ссылки и вместо перехода на другую страницу будет подгужен список комментариев.

Кроме того, не правильно показывать на одной странице одновременно несколько багов вместе с комментариями (как я планировал раньше). Во-первых, если комментарии содержат рисунки, то такая страница будет долго грузиться. Во-вторых, получится, что отдельные страницы багов будут дублировать главную, а, насколько я знаю, поисковики это не любят (дублирование контента).

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

Приветствую всех!

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

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

База данных.

Первоначально я хотел максимально упростить структуру БД и перестарался. А именно: я решил хранить описания багов и комментарии к ним в одной таблице. В принципе, это возможно. Баги и комментарии имеют много одинаковых полей, и работать с такой таблицей было бы вполне реально.

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

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

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

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

Но прежде чем переходить к основной теме, хочу поблагодарить всех комментаторов и особенно AmdY, Big_Shark и Алексея Качаева за советы!

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

В прошлый раз с инструментами мы определились (используем PHP, фреймворк CodeIgniter, MySQL и jQuery).

Сейчас нам нужно их установить и настроить.
Читать дальше »

Приветствую всех!

Это первая статья о создании полнофункционального web приложения, которое будет представлять собой систему отслеживания ошибок (bug tracking system).

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

Система отслеживания ошибок (англ. bug tracking system) — прикладная программа, разработанная с целью помочь разработчикам программного обеспечения (программистам, тестировщикам и др.) учитывать и контролировать ошибки (баги), найденные в программах, пожелания пользователей, а также следить за процессом устранения этих ошибок и выполнения или невыполнения пожеланий.

Почему именно баг трекер?

Очень хороший вопрос Вообще-то, причин две.

Первая – это приложение не «hello world». И на его примере можно показать совместное использование PHP, JavaScript, AJAX, работу с базой данных и т.д.

Вторая – такое web приложение можно сделать достаточно простым (реализовать минимум функций), но в то же время вполне работоспособным. Ведь основная задача этого цикла статей – показать пример создания полноценного приложения, но в тоже время хотелось бы удержать его объем в каких-то разумных рамках

Постановка задачи.
Читать дальше »

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

Как несложно догадаться, JSONP представляет собой расширение формата JSON. Расшифровывается эта аббревиатура так – JavaScript Object Notation with Padding, т.е. JSON с дополнением.

Об этом дополнении чуть ниже, а сейчас, напомню, что представляет собой формат JSON и зачем он нужен.

Если не вникать в нюансы, JSON представляет собой формат записи JavaScript объектов в виде обычной текстовой строки. Т.е. вы можете отправить такую строку в ответ на AJAX запрос, а затем преобразовать её на стороне клиента в объект с данными.

Конечно, JSON не единственный формат, но он один из самых удобных. Библиотеки для работы с ним есть практически во всех языках, а само преобразование выполняется с помощью одного вызова функции.
Читать дальше »

Прошлый пост «Как обойти запрет на XSS» вызвал довольно интересное обсуждение. Я сначала пробовал сразу отвечать на комментарии, но потом понял, что развернутые ответы больше напоминают статьи, а краткие – только всё запутывают.

И, что хуже всего, я почувствовал, что не могу внятно ответить на часть комментариев, а значит нужно подробнее разобраться в ситуации

В общем, я провел небольшую серию экспериментов и хочу рассказать о результатах.

На всяких случай напомню, что в прошлый раз речь шла об использовании XSS (cross site scripting), т.е. межсайтовых запросах.

В первую очередь я решил проверить, как работают самые простые запросы. Для этого создал простенькую тестовую страничку на локальном сервере (localhost) и подключил библиотеку jQuery.
Читать дальше »

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

Приведу небольшой пример. Недавно я рассказывал об использовании Яндекс.Карт и сервиса IPLoc.

Для получения данных от IPLoc пришлось использовать PHP, хотя, как совершенно справедливо заметил Big_Shark, было бы гораздо удобнее отправить этот запрос с помощью JavaScript. Но кросс-доменный JavaScript запрещен политиками безопасности браузеров.

Тем не менее, мне стало интересно, можно ли обойти это ограничения без использования серверных скриптов (PHP). И решение, конечно, нашлось Правда, оно имеет свои недостатки, но об этом чуть ниже.
Читать дальше »