Категории: Ajax

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

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

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

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

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

База данных.

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

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

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

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

Bug Tracker: установка фреймворка и создание базы данных (часть вторая)

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

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

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

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

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

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

Создаем собственную систему отслеживания ошибок на PHP

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

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

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

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

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

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

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

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

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

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

XSS с использованием JSONP и jQuery

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

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

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

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

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

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

XSS и Same Origin Policy

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

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

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

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

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

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

Как обойти запрет на XSS

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

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

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

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

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

Блокировка доступа к элементам web страницы

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

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

Библиотека называется jQuery BlockUI Plugin и, как следует из названия, представляет собой плагин к jQuery.

Принцип работы следующий. Библиотека создает дополнительный слой (overlay) над всей страницей или каким-то блоком на ней.

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

Если вы видели, как работают библиотеки типа Lightbox, то представляете, о чем идет речь.

Приведу простой пример. Допустим, необходимо заблокировать доступ к странице на время выполнения Ajax запроса.
Читать дальше

Web разработка. Когда использовать JavaScript библиотеки для проверки форм

Владимир | | Ajax, CodeIgniter, HTML, JavaScript.

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

В случае web приложений ситуация только усложняется.

На мой взгляд, существует три основных источника проблем:
1) ошибки пользователя (тут вряд ли можно что-то сделать);
2) необходимость проверять данные на стороне сервера;
3) необходимость сообщать посетителю об ошибках без перезагрузки страницы.

Кроме того, существуют два способа отправки данных формы:
1) обычный (с перезагрузкой страницы);
2) асинхронный (ajax запрос, без перезагрузки страницы).

Естественно, эта ситуация привела к возникновению JavaScript библиотек, специально предназначенных для проверки данных форм перед их отправкой.

Например. jQuery Validation Plugin, о нем, кстати, написана очень хорошая статья Проверка данных форм.
Для prototype тоже есть несколько аналогичных библиотек: Dexagogo и JSValidate.

Принцип их работы примерно одинаков. Создаете форму с правилами (обычно они указываются в атрибутах class полей формы), подключаете библиотеку, если нужно, пишите свои собственные правила.
Читать дальше

Добавляем CAPTCHA к форме. Пример PHP скрипта, использующего AJAX.

Владимир | | Ajax, CodeIgniter, JavaScript.

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

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

Сразу хочу отметить, что речь пойдет именно о работе с CAPTCHA, а не о создании рисунка для нее.

Поэтому мы используем готовую библиотеку для создания рисунка CAPTCHA. Библиотека называется достаточно незамысловато – captcha и может использоваться вместе с фрэймворком CodeIgniter. В описании библиотеки приведен пример ее использования на обычной странице, поэтому мы рассмотрим вариант проверки с применением технологии ajax.

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

CodeIgniter + AJAX. Проверка данных форм без перезагрузки страниц

Владимир | | Ajax, CodeIgniter, PHP.

Проверка данных форм (Ajax)
В прошлой статье речь шла о проверке данных форм с помощью стандартной библиотеки фрэймворка CodeIgniter. Мы рассмотрели основные возможности библиотеки, создали страницу с формой и написали необходимый для ее проверки код.

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

Давайте немного порассуждаем. Чем отличается ajax запрос от обычного запроса?

1) Ajax запрос можно выполнить только с помощью JavaScript.

2) Ответом сервера на обычный запрос должна быть html страница, а на ajax запрос – фрагмент данных (с разметкой или без нее).

Отсюда вывод. Чтобы добавить поддержку ajax нужно в клиентской части написать JavaScript функцию, которая прочтет данные из формы, отправит запрос и обработает ответ сервера, а в серверной части – изменить возвращаемые значения.

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

Переходим к нашему примеру. Как вы помните, в прошлый раз мы создали форму с тремя полями для ввода личных данных пользователя (ник, полное имя, адрес email).

В этот раз мы используем эту же форму, только немного изменим html разметку.
Читать дальше