Файл: Проектирование и создание информационной системы для торговой организации.pdf

36
(рис. 14.) в качестве простого и быстрого доступа к управлению СУБД. При помощи MySQL клиента (рис. 14.) и запросов к СУБД были созданы таблицы с полями определённых типов, указаны уникальные индексы (id), которым было присвоено свойство «AUTO_INCREMENT”, указывающее, что порядковый номер будет генерироваться автоматически (предыдущее значение + 1) по мере добавления новых строк в таблицу.
Рис. 14. Работа с СУБД MySQL через консоль MySQL-Client
Таким образом, разработана база данных торговой организации — основной компонент системы. Данная БД позволяет хранить, обрабатывать и дополнять информацию организации в едином месте.
Следующим шагом по настройке back-end части – стала установка
HTTP-сервера, умеющего интерпретировать PHP-код.
Apache HTTP Server – это свободно распространяемый HTTP сервер под лицензией Apache License 2.0 (http://www.apache.org/). Он осуществляет 2 главные функции: взаимодействует с клиентом по HTTP протоколу и компилирует php-код при помощи соответствующего встроенного модуля
(рис. 15.). Данная программа является наиболее актуальной и используемой для создания web-серверов [2]. Также Apache кроссплатформенный, надёжный и гибкий в конфигурации [30].

37
Рис. 15. Схема работы веб-сервера
В качестве языка программирования для написания back-end части web- приложения информационной системы был выбран PHP.
PHP (препроцессор гипертекста), первоначально Personal Home Page
Tools — «Инструменты для создания персональных веб-страниц»; произносится пи-эйч-пи — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг- провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов
[7,13].
Использование PHP осуществляется под PHP License, являющейся open source лицензией, призванной стимулировать широкое распространение исходного кода. Лицензия позволяет распространение материалов в исходной или бинарной форме с изменениями или без таковых при соблюдении следующих условий [17]:
1. включение текста лицензии PHP,
2. слово PHP не может быть включено в название продукта без письменного подтверждения от PHP Group, следующее уведомление должно быть включено в любую форму распространяемых материалов:
"This product includes
PHP software, freely available from

38
Если для программного кода на PHP используется лицензия PHP
License, то руководство PHP распространяется по лицензии Creative
Commons Attribution 3.0 License. Кроме того, некоторые файлы могут распространяться под другими лицензиями. Для распространения таких файлов необходимо соблюдать условия этих лицензий.
Традиционно PHP-код исполняется в php-файлах — это обычные текстовые файлы, имеющие расширение php, редактировать их можно в любом стандартном текстовом процессоре, которые поставляются с любой операционной системой в качестве свободного и бесплатного к использованию текстового редактора [9,13].
В процессе написания использовалась среда разработки программного обеспечения Geany (https://www.geany.org) (рис. 16.), распространяемая свободно под лицензией GNU GPL. Geany представляет собой текстовый процессор со специальными функциями для разработчиков, такими как: автоматическая подстановка закрывающих тегов, автозавершение названий функций, классов, переменных, подсветка исходного кода, поддержка большого количества кодировок.
Рис. 16. Текстовый процессор Geany

39
Написанный PHP код был разделён на различные файлы, в каждом из которых он отвечает за различные задачи. Такое разделение упрощает написание и редактирование проекта, а также даёт возможность подключать только необходимый код для решения текущей задачи пользователя [39].
Файловая структура веб-приложения:
./assets/
./ckeditor/
./fancybox/
./favicon/
./fontAwesome/
./base.css
./base.js
./remPolyfill.js
./funcs.js
./normalize.css
./components/
/pages/
/safemysql/
./authorization.php
./config.php
./functions.php
./lang.php
./valute_rate.php
./images/
./templates/
./404.html
./about.html
./all.html
./authorization.html
./client_edit.html

40
./clients.html
./goods.html
./goods_edit.html
./logs.html
./orders.html
./providers.html
./provider_edit.html
./order_edit.html
./passchange.html
./group_edit.html
./main_right0.html
./main_right1.html
./main_right2.html
./ya_market.html
./uploads/
./.htaccess
./COPYING
./README
./index.php
./ya_market.php

Директория «assets» содержит вспомогательные файлы, такие как
JavaScript скрипты и JavaScript плагины, а также CSS таблицы каскадных стилей (приложение 1) и файлы шрифтов.

Директория «components» содержит основной PHP-код веб- приложения.

Директория «images» содержит изображения.

Директория «templates» содержит HTML шаблоны страниц.

Директория «uploads» хранит в себе загруженные пользовательские файлы.

41

Файлы «COPYING» и «README» являются обязательными файлами для лицензии информационной системы.

Файл «.htaccess» преобразовывает человеко-удобный HTTP адрес в
GET-запросы, которые в свою очередь обрабатывает index.php.

Файл «valute_rate.php» производит обновление курса валют, запрашивая данную информацию на сайте ЦБРФ и затем обновляя её в базе данных. Данный файл запускается автоматически в планировщике.

Файл «index.php» самый важный файл. Он подключает все остальные компоненты веб-приложения в зависимости от того, какую страницу запросил пользователь (приложение 1).

Файл «ya_market.php» выгрузка для интеграции ИС с рекламной площадкой «Яндекс.Маркет». Содержит информацию об организации и список товаров.
Используемые информационной системой компоненты, разработанные сторонними разработчиками:

SafeMySql 1.0.0 - PHP класс для безопасного и удобного обращения с
MySQL-запросами.
Лицензия:
Apache
License
2.0.
(http://phpfaq.ru/safemysql)

PHPMailer 6.0.1 - PHP класс для создания и отправки писем по электронной почте.
Лицензия:
GNU
LGPLv2.1.
(https://github.com/PHPMailer/PHPMailer)

jQuery 1.12.4 - JavaScript библиотека, для лёгкого доступа к любому элементу DOM, обращений к атрибутам и содержимому элементов
DOM, манипуляциям с ними.
Лицензия:
MIT
License.
(https://jquery.com)

fontAwesome 4.7.0 - шрифт/набор иконок с CSS инструментарием.
Лицензии: SIL OFL 1.1, MIT License, CC BY 3.0. (http://fontawesome.io/)

Fancybox 3 - jQuery плагин для отображения в модальных окнах изображений, видео и другого контента. Лицензия: GNU GPLv3.
(http://fancybox.net/)

42

css3-mediaqueries - JavaScript скрипт для поддержки CSS Media Queries в устаревших браузерах.
Лицензия:
MIT
License.
(https://github.com/livingston/css3-mediaqueries-js)

HTML5 Shiv 3.7.3 - JavaScript скрипт для поддержки HTML5 тегов в устаревших браузерах.
Лицензии:
MIT и
GPL2.
(https://github.com/aFarkas/html5shiv)

remPolyfill 1.3.2 - Javascript скрипт для поддержки единиц измерения rem в CSS в устаревших браузерах. Лицензия: MIT License.
(https://github.com/chuckcarpenter/REM-unit-polyfill)

CKEditor 5 1.0.0-alpha.2 - Набор компонентов на JavaScript, позволяющий создать удобное решение для редактирования текста.
Лицензии: GPL, LGPL, MPL. (https://github.com/ckeditor/ckeditor5)

Normalize.css 7.0.0 - это небольшой CSS-файл, подключение которого обеспечивает лучшую согласованность между браузерами при стандартном стиле HTML-элементов. Это современная, готовая
HTML5, альтернатива традиционному сбросу CSS. Лицензия: MIT.
(https://github.com/necolas/normalize.css)

Google Charts - это инструмент для построения различных диаграмм в веб-приложениях, предоставляемый посредством API
Google.
Бесплатное использование согласно условиям, Google APIs Terms of
Service. (https://developers.google.com/chart/)

Jquery UI 1.12.1 - JavaScript набор взаимодействий, эффектов, виджетов и тем, построенных на основе jQuery JavaScript Library.
Лицензия: GNU GPLv3. (http://jqueryui.com/)
В целом PHP-код выполняет следующие задачи:

Подключается к базе данных

Осуществляет запросы к базе данных

Обрабатывает данные отправленные пользователем

Обрабатывает данные полученные из БД

Загружает соответствующий странице HTML-шаблон

43

Вставляет обработанные данные в HTML-шаблон

Отправляет готовую страницу в веб-обозреватель пользователям
Следующий шаг по созданию информационной системы — это разработка графического интерфейса для ввода, вывода, объединения данных в информацию и других полезных операций в бизнес-деятельности торговой организации.
2.2. Разработка клиентской части информационной системы
Front-end частью проекта являются отдаваемые клиенту back-end частью HTML страницы, которые содержат HTML, CSS, JavaScript, изображения и шрифты.
HTML — язык гипертекстовой разметки — стандартный язык разметки документов в глобальной сети. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме [32,37].
Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.
CSS — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL [35].
JavaScript
– мультипарадигменный (объектно-ориентированный, императивный, функциональный) язык программирования. В браузерах используется в качестве языка сценариев, придавай странице черту интерактивности. Название языка является товарным знаком Oracle

44
Corporation, однако сам язык никому не принадлежит
(https://developer.mozilla.org/en-US/docs/Web/JavaScript) [31,33].
Когда back-end составляющая веб-приложения присылает пользователю html/css (также возможен javascript и иной код) вместе с содержимым, которое запросил человек, браузер пользователя должен вывести на экран готовую страницу. Для этого он преобразует HTML-разметку в объектную модель документа (DOM), а CSS-разметку - в объектную модель таблицы стилей (CSSOM), т.е. создаёт DOM (рис. 17.) и CSSOM (рис. 18.) модели.
Рис. 17. Пример модели DOM
Основные этапы формирования DOM:
1. Преобразование. Браузер преобразует байты из HTML-файла в символы, основываясь на приведенной в файле кодировке (например,
UTF-8).
2. Разметка. На основании стандарта W3C HTML5 браузер выделяет среди символов теги в угловых скобках, такие как, и другие. У каждого тега есть свое значение и свой набор правил.
3. Создание объектов. С помощью HTML-тегов браузер выделяет в документе объекты с определенными свойствами.
4. Формирование DOM. Объекты образуют древовидную структуру, повторяющую иерархию HTML-файла, в котором одни теги помещаются в другие. Так, объект p помещается под body, а объект body, в свою очередь, под html, и так далее.

45
В результате образуется объектная модель документа (DOM), с помощью которой браузер продолжает обрабатывать страницу.
Все эти действия (преобразование байтов в символы, определение разметки, создание объектов и формирование DOM) браузер должен выполнять каждый раз при обработке HTML-разметки. Этот процесс занимает некоторое время, особенно при обработке большого количества тегов которыми реализуется разметка гипертекста.
Чтобы обработать таблицу каскадных стилей CSS, браузер должен выполнить те же самые действия, что и с HTML-документом: байты из CSS- файла преобразуются в символы, символы - в теги, а теги - в объекты, которые образуют модель CSSOM.
Рис. 18. Пример CSSOM модели
В PHP-коде информационной системы торговой организации написана специальная функция data2template. При использовании этой функции код посылает ей данные, которые мы запросили из БД. Затем функция запрашивает тот шаблон, который соответствует странице на которой находится пользователь. Для каждой из страниц уже создан соответствующий шаблон: goods_edit.html – страница редактирования товара;
provider_edit.html – страница редактирования поставщика;
orders.html – страница заказов;
и т.д.
Такие же шаблоны есть и для иных страниц, отображаемых пользователю информационной системы.

46
Внутри шаблонов содержится HTML определённой страницы и метка, говорящая PHP-коду (функции data2template) куда вставить данные в этом
HTML шаблоне. Меток может быть несколько.
Пример шаблона для страницы «Товары бренда Curaprox»: