Ця стаття перша з циклу про створення невеликого web програми під назвою Personal Maps. Додаток створювалося виключно для демонстрації, але, в той же час, воно в повному обсязі виконує свої завдання. З його допомогою я хочу показати приклад використання декількох інструментів «в зв'язці», а саме: PHP фреймворка Yii , JavaScript фреймворка AngularJS , Бази даних MySQL і Google Maps API.
Спочатку я планував обмежуватися кількома більш-менш незалежними постами, але потім зрозумів, що такий підхід не дозволить нормально описати взаємодію клієнтської і серверної частини програми. Більш-менш докладний опис по моїй приблизною оцінкою складатиметься орієнтовно з 10 частин, які я розраховую опублікувати в цьому і наступному місяці.
Але вже зараз код програми доступний на Github'е. Можливо в нього будуть вноситися невеликі доповнення та виправлення, але нічого кардинального.
Source
Також ви можете поекспериментувати з демо версією.
DemoПостановка задачі
Основне завдання програми - дати користувачеві можливість створювати власні списки об'єктів і розміщати їх на карті. Тобто фактично ми створюємо записну книжку, в якій кожен запис буде «прив'язана» до карти.
Виглядати головна сторінка буде наступним чином.
У лівій частині вікна завжди відображається карта з маркерами створених об'єктів. У правій - або список об'єктів, або форма додавання нового об'єкта.
Для створення об'єкта користувачеві потрібно ввести його назву, опис і вказати положення на карті.
Клік по об'єкту в списку центрує карту і показує опис об'єкта.
Праворуч від назви об'єкта знаходяться кнопки «Змінити» і «Видалити».
Крім того, тому що ми створюємо повнофункціональне додаток, крім сторінки з об'єктами нам потрібно реалізувати авторизацію, аутентифікацію і керування користувачами (створення, видалення, редагування прав і т.п.).
Таким чином, структура програми буде змішаною. Одна частина «класична» використовує звичайні html форми, друга являє собою RIA (Rich Internet Application), написане з використанням фреймворку AngularJS.
Структура програми, фреймворки і бібліотеки
На кліенской стороні (в браузері) будуть використовуватися: фреймворк AngularJS і API Google Maps. Для оформлення - Twitter Bootstrap .
На сервері - Yii фреймворк і MySQL.
Вибір цих фреймворків в великій мірі продиктований моїми власними уподобаннями. Тим не менш, є кілька моментів, на які я хотів би звернути вашу увагу.
На сервері замість Yii можна використовувати будь-який з популярних PHP фреймоврков, тому що більшість з них має дуже схожими можливостями. Природно, можна обійтися і без фреймворку взагалі, але при цьому вам доведеться написати значно більше коду.
Основні можливості Yii, які використовуються в цьому додатку:
- створення багатосторінкових додатків (MVC модель і генератор коду);
- ActiveRecord для роботи з базою;
- управління правами користувачів (RBAC);
- можливість створення REST сервісів.
Всі ці можливості не обов'язково повинні підтримуватися вашим фреймворком «з коробки». Досить щоб була можливість підключення потрібних бібліотек. Проте, дуже зручно, якщо все необхідне входить до складу фреймворка.
З клієнтською частиною ситуація складніша.
За останні кілька років з'явилися дуже цікаві JavaScript бібліотеки і фреймворки для створення RIA. Причому різниця між ними (розкид в можливостях і підході до написання додатків) набагато помітніше, ніж між PHP фреймворками.
Я більш-менш активно працював з Backbone.JS і AngularJS . Для даного завдання походить будь-який з них.
При цьому Backbone.JS значно простіше, складається всього з декількох компонентів, і всі питання, пов'язані з взаємодією цих компонентів між собою, залишає вирішувати розробнику. На практиці це означає, що крім документації до Backbone.JS дуже бажано прочитати якусь книгу з проектування складних JS додатків (наприклад, Developing Backbone.js Applications ).
AngularJS вимагає набагато більше часу на вивчення, але в той же час автоматизує більшу частину роботи. Зокрема, для простих додатків вам взагалі не доведеться писати код, який взаємодіє з DOM.
У той же час, як тільки ви зіткнетеся з необхідністю реалізувати більш-менш нестандартні речі (наприклад, підключення карти 😉), то доведеться розібратися в принципах роботи цього фреймворка.
Проте, загальна кількість коду буде менше ніж при використанні Backbone.JS. І якщо ви займаєтеся розробкою середніх або великих додатків, то час, витрачений на вивчення AngularJS, безумовно, окупиться.
У наступній частині ми розглянемо установку програми та структуру бази даних.