Опубликовано: Алексей Качаев | 13 комментариев
Спонсор поста: Интернет магазин детских игрушек лего.
Итак, сегодня представляю второй урок по использованию jQuery на примере скрипта Todo-листа.
В первую части мы реализовали с помощью jQuery и плагина jqModal возможность добавлять / редактировать / удалять записи из списка, но при этом каждый элемент списка был всего лишь элементом странички. Читайте здесь - “jQuery + jqModal - обучение на конкретном примере“.
Чем этот пример не дотягивает до веб-приложения? Естественно тем, что наши записи нигде не сохраняются. Это не хорошо. Но мы можем решить эту проблему с помощью базы данных: пользователь добавляет / редактирует / удаляет записи ? мы отправляем запрос на сервер и совершаем это действие с записью в базе данных ? возвращаем пользователю результат (успешно выполнено или ошибка). При этом состояние списка всегда синхронизировано с состоянием записей в базе данных.
Наращивать функционал будет постепенно, в принципе его здесь можно придумать очень много.
То, что у нас в итоге получится вы можете посмотреть здесь: “jQuery, jqModal и MySQL - обучение на конкретном примере“. В исходном коде странички можно ознакомиться с JavaScript кодом и CSS-стилями.
Приготовимся к битве
Что нам нужно в первую очередь? Давайте для начала определимся со структурой данных, который мы будем хранить в базе.
Итак, создаем таблицу `todo`, содержащюю три поля:
- `id` - для хранения уникального идентификатора
- `text` - здесь будет хранится текст записи из todo-списка
- `data` - для хранения даты задания
Пока ограничимся этими данными, хотя добавить сюда можно еще очень много, например, степень выполнения задания, категория, статус важности и т.д. Но, имхо, это все не добавит в приложение ничего принципиально нового - если разберетесь с этим, до добавлять сами сможете что угодно
Теперь о пользовательском интерфейсе.
Для отображения списка мы будем использовать таблицу с тремя столбцами:
- Текст задания
- Дата
- Управляющие элементы (для вызова интерфейсов редактирования и удаления соответствующей записи)
Все остальное наполнение странички аналогично предыдущему уроку. Единственное нововведение связано с тем, что мы будем использовать ajax для общения с сервером, поскольку это занимает время - нужен элемент, который будет сообщать пользователя “Не надо нервничать, ваш запрос обрабатывается”. Таким элементом будет слой
<div class="load"><img src="load.gif" align="absmiddle"> <span></span></div>
Изначально этот слой будет скрыт. Он будет демонстрироваться только во время выполнения ajax-запросов. Изображение вращающейся стрелки, понятное дело, для визуализации. А span мы будем использовать для вывода сообщения, сопровождающего запрос и комментирующее его результат.
[Читать далее...]
Понравился пост? Будь в курсе последних событий: подпишись на RSS-ленту.!