Ajax | SimpleCoding.org

Personal maps: REST интерфейс. Часть 8.

Владимир | 8 октября, 2013 | Ajax, AngularJS, PHP, Web разработка, Yii.

Приветствую, это очередная статья о разработке web приложения с использованием под названием Personal maps. В прошлый раз мы закончили разработку клиентской части приложения, а сегодня займемся созданием REST интерфейса. Ссылки на все предыдущие части вы найдёте внизу этой страницы.

Форматы запросов клиентской части к серверу и его ответов у нас уже определены. Фактически мы это сделали когда тестировали сервис Places. Теперь нам нужно реализовать поддержку этих запросов серверной частью приложения.

Создание REST сервисов с помощью Yii фреймворка

Примечание. Если вы не знакомы с общими принципами создания REST сервисов, то рекомендую прочитать статью Create a REST API with PHP.

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

Personal Maps: тестирование AngularJS сервиса с помощью Jasmine и Karma. Часть 5.

Владимир | 15 сентября, 2013 | Ajax, AngularJS, JavaScript, Web разработка.

В прошлый раз мы создали сервис AngularJS под названием Places, через который происходит передача данных между клиентской и серверной частями приложения.

Наш сервис использует несколько встроенных компонентов Angular ($rootScope и $http) и не зависит от остальных компонентов приложения. С дугой стороны, остальные компоненты (контроллеры, директивы) используют методы сервиса. Любые изменения в названиях или количестве аргументов этих методов приведут к тому, что придется изменять все компоненты, которые их используют. Таким образом, полезно протестировать работу сервиса перед разработкой остальной части приложения. Этот подход можно использовать не только по отношению к сервисам – сначала разрабатываем и тестируем компоненты с наименьшим числом зависимостей, а затем собираем из них всё приложение.
Читать дальше

Personal Maps: создаём сервис AngularJS. Часть 4.

Владимир | 8 сентября, 2013 | Ajax, AngularJS, JavaScript, Web разработка.

Это четвёртая статья цикла о разработке web приложения под названием Personal Maps.

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

Сейчас мы переходим к практической реализации. И начнём с разработки сервиса AngularJS, который называется Places и работает с REST API серверной части приложения, т.е. выполняет операции чтения, создания, удаления и редактирования объектов, которые пользователь размещает на карте.

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

Personal Maps: главная страница и структура клиентской части приложения. Часть 3.

Владимир | 1 сентября, 2013 | Ajax, AngularJS, HTML, JavaScript, PHP, Web разработка, Yii.

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

Фактически это будет одностраничное приложение, которое получает и передаёт данные с помощью REST сервисов. Основное преимущество такого подхода заключается в том, что при работе пользователя не происходит перезагрузки страницы. Если сервер окажется недоступен, пользователь увидит сообщение об ошибке и сможет продолжить работу, когда связь восстановится.

Кроме того, наше приложение показывает объекты на карте Google, и если его разрабатывать в «классическом» стиле, то переход от одного объекта к другому будет вызывать перезагрузку карты. А это, не смотря на кэширование компонентов карты браузером, негативно скажется на скорости работы интерфейса.

Google maps & AngularJS: позиционирование карты

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

Последнее время мне довольно часто приходится работать с различными фреймворками, предназначенными для разработки JavaScript приложений. В основном с Backbone.js и AngularJS. И впечатления в целом очень приятные. Они действительно позволяют ускорить разработку и упростить поддержку кода.

Естественно, всё имеет свою цену. В данном случае это «порог вхождения» и время на изучение особенностей фреймворков. Кроме того, сейчас ведётся много споров на тему того какой фреймворк лучше. Участвовать в них у меня желания нет, хотя читать такие обсуждения иногда бывает интересно 🙂 К сожалению (или к счастью), победителей в этих спорах нет и, скорее всего, не будет. В большинстве случаев, чем больше работы за вас выполняет фреймворк, тем медленнее он работает. Но, с другой стороны, при этом уменьшается время разработки.

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

В этой статье мы рассмотрим пример использования AngularJS.
Читать дальше

Google maps & jQuery: позиционирование карты

Владимир | 30 апреля, 2013 | Ajax, HTML, JavaScript, Web разработка.

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

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

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

1) вывести список этих объектов;

2) при клике на любом из объектов переместить карту так чтобы выбранный объект оказался в её центре;

3) показать на карте развернутую информацию о выбранном объекте.

Вообще-то существует некоторое количество готовых решений. В основном плагинов для различных CMS. Но часто подключение таких плагинов к существующей системе занимает больше времени, чем написание собственного решения. Кроме того, своё решение проще дорабатывать и поддерживать.
Читать дальше

jQuery: обработка параметров URL

Владимир | 19 августа, 2011 | Ajax, HTML, JavaScript, Web разработка.

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

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

Предположим на нашей странице есть ссылка, клик по которой отправляет запрос на выполнение некоторой операции. Пускай это будет удаление какого-нибудь объекта.

HTML разметка такой ссылки может выглядеть следующим образом.

<a class="delete" href="https://www.simplecoding.org/script.php?action=delete_object&object_id=1">Удалить</a>

Как видите, ссылка содержит два параметра (action и object_id), значения которых PHP скрипт сможет получить из массива $_GET.

Теперь, мы хотим выполнить удаление объекта с помощью AJAX запроса. Изменять ради него ссылку нет никакой необходимости. Просто назначаем обработчик для события click.
Читать дальше

HTML5: загрузка файлов с помощью Drag & Drop

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

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

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

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

Загрузку файлов с локального компьютера трогать пока не будем, я планирую опубликовать отдельный пост на эту тему, разберем загрузку с удалённого сервера.

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

Создаём валютный информер с помощь PHP и JavaScript

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

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

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

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

Source