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

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

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

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

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

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

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

Думаю, ни для кого не секрет, что за последние несколько лет резко увеличилось число сайтов, использующих различные визуальные эффекты.

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

В этой статье мы рассмотрим пример использования очень интересного эффекта из библиотеки ScriptAculous – морфинга.

По определению, морфинг – это плавное преобразование одного объекта в другой.

Он очень часто используется в компьютерных играх и кинематографе.

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

Тем не менее, можно изменить цвет и размеры блоков и шрифтов, их границы, фон и т.п.

Как это работает
Читать дальше »

Недавно столкнулся с интересной особенностью работы эффектов в scriptaculous, о которой и хочу рассказать.

Примечание. Для тех, кто не слышал о scriptaculous, поясню. Это очень удобная JavaScript библиотека, которая значительно упрощает работу с элементами web страницы, позволяет создавать различные визуальные эффекты, элементы управления, поддержку drug&drop и т.п. В общем, советую попробовать.

Возвращаюсь к возникшей проблеме.

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

На первый взгляд, кажется, что задача решается двумя строками кода:

В первой строке создается эффект подсветки и применяется к элементу с id= 'textBlock'.
Параметры эффекта:
startcolor – цвет блока в начале эффекта;
endcolor – цвет блока в конце эффекта;
duration – длительнось эффекта в секундах.

Во второй строке функция remove() удаляет блок.

Но, оказалось, что этот код не работает. Т.е. блок удаляется до того как отработает эффект.

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

Решение

Специально для таких ситуаций каждый эффект scriptaculous имеет четыре свойства: beforeStart, beforeUpdate, afterUpdate, afterFinish (думаю, названия говорят сами за себя). Значением этих свойств должно быть имя функции, которую нужно выполнить на соответствующем этапе работы эффекта.

В качестве параметра эта функция принимает объект с информацией об эффекте и блоке, к которому он применяется.

Например, описанная задача решается как:

Как видите, значением параметра afterFinish является анонимная функция, в которой и выполняется удаление текстового блока.

Примечание. Свойство element, параметра функции (o), позволяет работать с блоком страницы, к которому применяется эффект.

Если вы хотите больше узнать о библиотеке scriptaculous, советую почитать:
1) официальный сайт (англ.);
2) раздел JavaScript этого блога;
3) статью «Подсветка элементов web страницы»;
4) книгу «Prototype and Scriptaculous in Action» (англ.).
Кстати, если книга кому-нибудь нужна, пишите в комментариях, могу выслать на eMail или выложить для скачивания.

Удачи!

В комментариях к одной из предыдущих статей меня попросили показать пример загрузки файлов на север с помощью технологии AJAX и фреймворка CodeIgniter.

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

Механизм отправки

Прежде всего, нужно четко понимать, что отправить (загрузить) на сервер файл с помощью AJAX нельзя.

Тем не менее, можно организовать процесс загрузки так, что с точки зрения посетителя загрузка будет выглядеть асинхронной. Т.е. посетитель укажет имя файла и нажмет кнопку «Загрузить». После этого, увидит умную надпись вроде «Подождите, идет загрузка…» или какую-нибудь анимацию. А после окончания загрузки – сообщение с результатами. Страница, которую он видит, перезагружена не будет.

Но при этом отправка файла будет выполнена обычным способом.

Идея заключается в использовании невидимого фрейма (iframe), атрибута формы target и JavaScript.
Читать дальше »

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

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

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

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

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

Это завершающая статья цикла о создании web редактора. Наш редактор позволяет создавать/изменять/удалять записи в обычном списке.

В предыдущих статьях мы рассмотрели:
структуру приложения;
создание главной страницы;
добавление новых записей;
редактирование записей;
и удаление записей.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Теперь несколько слов об установке этого приложения.

Прежде всего, вам нужно скачать архив с исходным кодом.

Естественно, у вас уже должен быть установлен web сервер (Apache), интерпретатор PHP и база данных MySQL. (Если у вас возникли сложности на этом этапе смотрите статью «Установка и настройка WAMP5»).

После этого создайте базу данных с одной таблицей.

Примечание. В архиве находится файл db.sql с sql запросом для создания нужной таблицы.

Теперь переименуйте файл dbdata_tmpl.php в dbdata.php (находится в папке scripts) и укажите в нем параметры подключения к базе данных.

Оформление списка

Изменить размещение элементов списка можно с помощью таблицы стилей, которая находится в файле styles.css.

Здесь нет ничего сложного. Единственное, на что стоит обратить внимание, это стили классов itemNum и itemValue.

Для них задано правило float: left, что позволяет разместить их в одну строку.

Такое же правило задано и для элемента listForm

Помните, этот элемент содержит форму встраиваемого редактора и при активации заменяет itemValue.

Для того чтобы каждая запись списка начиналась с новой строки, используется правило clear: both для тегов li

Заключение

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

Удачи!

Это пятая часть цикла статей о создании web приложения, использующего технологию Ajax для редактирования списка.
В предыдущих статьях мы рассмотрели:
структуру приложения;
создание главной страницы;
добавление новых записей;
и редактирование записей.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Теперь добавим возможность удаления записей.
Чтобы удалить запись, пользователю нужно нажать на ссылку с изображением крестика после соответствующей записи. При этом будет вызвана функция deleteItem(), которой в качестве параметра передается id записи в БД.
Читать дальше »

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

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Возможность редактирования записей в списке – это, наверное, главное преимущество данного приложения. Обеспечивается она с помощью встраиваемого редактора, входящего в состав библиотеки Scriptaculous. Создание и настройку этих редакторов мы рассмотрели в статье (Как сделать редактор списка в стиле Web 2.0 (главная страница)). Напомню, что на данный момент редакторы для каждой записи в списке находятся в массиве editors.

Теперь разберем, как работает редактор. При нажатии на кнопку «Сохранить» выполняется Ajax запрос к скрипту updateitem.php.
Работа этого скрипта практически полностью аналогична additem.php, рассмотренному в предыдущей части.
Читать дальше »

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

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Как вы, наверное, помните, внизу страницы размещена форма добавления новых записей в список. Разберем подробнее как реализовано создание новых записей.

Когда посетитель нажимает кнопку «Добавить», выполняется вызов функции addItem(), размещенной в файле tasks.js. Посмотрите на ее код:

Читать дальше »

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

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Теперь переходим к созданию главной страницы (index.php). Html разметку постараемся максимально упростить, т.к. нам придется изменять ее в процессе работы web приложения.
Заголовок страницы, в общем-то, обычный

Прежде всего, мы подключаем файл dbdata.php с функцией подключения к БД, затем указываем тип страницы, кодировку, размещения файлов с таблицей стилей и JavaScript библиотеками.
Читать дальше »