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

Текст из файла (страница 3)

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

CSS3 – набор спецификаций CSS модулей третьего уровня. Наиболее примечательные модули:

1. рисование теней элементов (box-shadow, text-shadow);

2. заливка фона градиентом (linear-gradient, radial-gradient);

3. скругленные углы элементов (border-radius);

4. анимация;

5. множество модификаторов для селекторов;

6. медиа-запросы.

Несмотря на то, что спецификации CSS3 были разработаны уже достаточно давно, многие модули всё ещё находятся в статусе рекомендаций и поддерживаются браузерами в тестовом режиме. Кроме этого, ведётся разработка спецификаций модулей четвёртого и первого уровней (flexbox).

1.4.3 Язык сценариев JavaScript

JavaScript – интерпретируемый язык сценариев для взаимодействия с web-страницами. Данный язык описывается стандартом ECMAScript, последней версией которого является ECMAScript 6. JavaScript является клиентским языком, что означает, что код исполняется в браузере пользователя, а не на стороне сервера.

Возможности JavaScript:

1. создание анимации;

2. создание обработчиков событий (например, нажатие клавиши мыши на элементе, либо изменение значения поля);

3. манипуляция с DOM-деревом документа (удаление, создание, перемещение элементов);

4. Ajax (asynchronous JavaScript and XML) – технология позволяющая получать ответ от сервера без перезагрузки всей страницы.

1.4.4 Сценарный язык программирования PHP5

PHP (Personal Home Pages) является интерпретируемым языком программирования. Изначально он использовался как CGI (Common Gateway Interface), но затем был переработан в самостоятельный язык. Код PHP в отличие от JavaScript исполняется на сервере, поэтому пользователь не имеет возможности увидеть PHP сценарии.

Код PHP непосредственно встраивается в web-страницу, что значительно упрощает разработку приложения. Помимо web-сайтов, данный язык программирования может быть использован для разработки простых консольных программ и графических приложений (при помощи библиотеки PHP-GTK).

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

Существенным достоинством является поддержка множества расширений: от средств для разбора XML документов до инструментов обработки изображений.

Последней версией PHP на текущий момент является PHP 5.6. К выходу готовится PHP 7.

1.4.5 Система управления базами данных MySQL

MySQL – свободная реляционная система управления базами данных (СУБД).

Данная СУБД в своём первоначальном состоянии является наиболее эффективной при использовании в проектах с высоким числом запросов и небольшим количеством операций обновления. Используя хранилища формата InnoDB можно существенно повысить число запросов к базе данных без применения инструментов блокировки, которые оказывают влияние на быстродействие в других типах хранилищ.

1.4.6 Фреймворки

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

Фреймворк (Framework) – программная платформа, определяющая структуру проекта и по умолчанию предоставляющая дополнительные средства для быстрой разработки приложения [21].

Наибольшей популярностью пользуются такие наименования, как Zend Framework, Symfony, Laravel, Yii, Foundation, Skeleton и Bootstrap.

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

Делая вывод обзора, очевидно, что для быстрого и эффективного результата в нашем случае подойдет фреймворк Bootstrap 3.0. Так как он помимо удобства использования и широкой документации на русском языке включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения (рисунок 9).

Рисунок 9 – Файловая структура Bootstrap 3.0

1.5 Описание работы сервиса web-приложения

1.5.1 Об веб-приложениях

Веб-приложение состоит из клиентской и серверной частей, тем самым реализуя технологию «клиент-сервер».

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

Серверная часть получает запрос от клиента, выполняет вычисления, после этого формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP (рисунок 10).

Рисунок 10 – Обработка статической веб-страницы

Само веб-приложение может выступать в качестве клиента других служб, например, базы данных или другого веб-приложения, расположенного на другом сервере. Ярким примером веб-приложения является система управления содержимым статей Википедии: множество её участников могут принимать участие в создании сетевой энциклопедии, используя для этого браузеры своих операционных систем (будь то Microsoft Windows, GNU/Linux или любая другая операционная система) и не загружая дополнительных исполняемых модулей для работы с базой данных статей.

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

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

Рисунок 11 – Обработка динамической веб-страницы

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

1.5.2 Доступ к базе данных

Сервер приложений предоставляет возможность использовать такие ресурсы сервера, как базы данных. Например, динамическая страница может содержать программные инструкции для сервера приложений, следуя которым серверу необходимо получить определенные данные из базы данных и поместить их в HTML-код страницы.

Хранение содержимого в базе данных позволяет отделить оформление веб-сайта от содержимого, которое будут видеть пользователи. Вместо того чтобы создавать все страницы в виде отдельных HTML-файлов, пишутся только шаблоны страниц для каждого вида представляемой информации. Затем содержимое загружается в базу данных, после чего веб-сайт будет извлекать его при запросах пользователей. Кроме того, можно обновить информацию в одном источнике и продублировать это изменение на всем веб-сайте без редактирования каждой страницы вручную. Adobe Dreamweaver позволяет создавать веб-формы для вставки, обновления и удаления информации в базе данных.

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

Сервер приложений не может непосредственно получить данные из базы, поскольку базы данных используют специфические форматы хранения данных, в результате чего попытка получения таких данных будет напоминать попытку открытия документа Microsoft Word с помощью текстового редактора Notepad или BBEdit. Поэтому для подключения к базе данных сервер приложений использует посредника – драйвер базы данных. Драйвер базы данных представляет собой программный модуль, с помощью которого устанавливается взаимодействие между сервером приложений и базой данных.

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

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

Следующий пример демонстрирует процесс выполнения запроса к базе данных и возвращение полученных данных браузеру (рисунок 12).

Рисунок 12 – Доступ к базе данных

1. веб-браузер запрашивает динамическую страницу.

2. веб-сервер находит страницу и передает ее серверу приложений.

3. сервер приложений просматривает страницу на наличие инструкций и выполняет ее подготовку.

4. сервер приложений отправляет запрос драйверу базы данных.

5. драйвер выполняет запрос в базе данных.

6. драйверу возвращается набор записей.

7. драйвер передает набор записей серверу приложений.

8. сервер приложений вставляет данные в страницу и передает страницу веб-серверу.

9. веб-сервер отправляет подготовленную страницу запросившему ее браузеру.

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

Для создания малобюджетных приложений можно использовать файловую базу данных, например базу данных, созданную с помощью Microsoft Access. Если планируется создание надежных корпоративных приложений, рекомендуется использовать серверную базу данных, например, на основе серверов Microsoft SQL Server, Oracle 9i или MySQL.

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

2 Проектирование WEB-приложения

2.1 Постановка задачи

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

Цель проекта – спроектировать и разработать программный комплекс, позволяющий автоматически производить расчет стоимости и прием платежей по коммунальным услугам. При этом снизить операционные расходы управляющих компаний, ТСЖ, ТСН, ЖЭК и так далее. Упростить документооборот для жильцов.

Технические сведения:

1. проект разрабатывается с использованием технологий - PHP, HTML, CSS, JS, MySQL;

2. Фреймворки: Bootstrap 3.0;

3. Адаптивный и интуитивно понятный дизайн;

4. перечень поддерживаемых браузеров:

1. Google Chrome – версия 22 и выше;

2. IE - версия 9 и выше;

3. Opera - версия 15 и выше;

4. Yandex Browser – версия 9 и выше;

5. Mozilla Firefox – версия 22 и выше;

6. Safari.

Статичные элементы на всех страницах сайта:

1. логотип;

2. меню сайта.

Карта сайта диспетчера:

1. главная;

2. управляющие компании;

3. справочник услуг;

4. нормативы;

5. объекты учета;

6. заявки;

7. добавить пользователя;

8. быстрая загрузка;

9. изменения.

Карта сайта управляющей компании:

1. главная;

2. показания счетчиков;

3. оплаты;

4. расчет квитанций;

5. сбор показаний;

6. дебиторская задолженность.

Карта сайта личного кабинета жильца:

1. лицевой счет;

2. квитанции;

3. показания счетчиков;

4. платежи;

5. сообщение в управляющую компанию.

Таблица 2 – Функционал программного комплекса

Наименование

Описание

Подсистема «Объект учета»

Подсистема объектов учета должна состоять из следующих разделов: Жилой фонд: Здания, сооружения, подъезды, помещения, участки, договоры управления, собственники помещений и т. д., и т. п. для полного внесения информации об объектах ЖКХ в управлении ЖО. Раздел Отчетов: Отчет по зданиям, Отчет по помещениям, Статистика в разбивке по типам собственности. Сервисы: Формирование аналитических графиков; автоматический перерасчет площади зданий.

Продолжение таблицы 2

Наименование	Описание
Подсистема «Приборы учета»	Раздел Счетчики: для внесения полной информации об установленных на объекте счетчиках ОДПУ (общедомовых приборах учета) и ИПУ (индивидуальных приборах учета), для ввода показаний счетчиков, определения зависимых счетчиках, значений температурных коэффициентов. Раздел Отчеты: Ведомость контрольных съемов показаний ПУ потребителей; Данные по ПУ; Отчет о потреблении электроэнергии; Отчет поверки ПУ; Расчет по коллективным ПУ; Сведения по потреблениям ПУ. Сервисы: Загрузка реестров показаний ПУ.
Подсистема «Управление лицевыми счетами»	Раздел Лицевые счета: для внесения полной информации об открытии, изменении, закрытии лицевого счета, внесении информации о жильцах, о проведенных голосованиях и т. д. Раздел Отчеты: Выписка по лицевому счету; карточка лицевого счета и т. д.
Подсистема «Генерация платежного документа»	Раздел Услуги: для внесения полной информации о ЖКУ, предоставляемых собственникам (Отопление, Электроэнергия, ГВС, ХВС и т. д.), расчетных формулах по действующему законодательству, нормативах, тарифах и т. д. Раздел Оплата: Для внесения информации о произведенных оплатах в течение периода с учетом разных способов внесения платы с ЖКУ (посредствам платежных систем, через личный кабинет, операторов банков и т. д.). Раздел Отчеты: Платежный документ (квитанция); ОСВ, Сведения о начислениях на лицевые счета; Карточка расчетов и т. д. Сервисы: Загрузка реестров платежей, Выгрузка задолженности.

Наименование	Описание
Подсистема «Работа с должниками»	Раздел подготовки документов для работы с должниками: Предупреждений, Исковых заявлений, Заявлений на судебный приказ, Судебные соглашения и т. д. Раздел Отчеты: Карточка должника, отчет об исполнении графика платежей, сведения о задолженностях по лицевым счетам; справка о задолженности и т. д.
Подсистема «Раскрытие информации»	Выгрузка данных в ГИС ЖКХ: Электронные паспорта для выгрузки на сайт, Здания, сооружения, лицевые счета, ЖО, Помещения и т. д. Сервисы: Отчет - выгрузка по капремонту.

Окончание таблицы 2

2.1.1 Структура web-приложения

Пользователи web-приложения разделены на 3 группы:

1. собственник жилья;

2. управляющая компания;

3. диспетчер расчетно-кассового центра.

Каждая группа (рисунки 13–15) обладает определенными привилегиями доступа к ресурсам, и авторизация происходит с использованием уникального логина и пароля.

Рисунок 13 – Диаграмма собственника жилья

Характеристики

Список файлов ВКР