Файл: Разработка проекта информационной системы торговой интернет-фирмы ( ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ О СОЗДАНИИ ИНФОРМАЦИОННЫХ СИСТЕМ ).pdf

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

Мы выделили следующие преимущества СУБД MySQL:

• реляционная модель данных;
• свободно-распространяемая под лицензией GNU GPL 2;
• хорошо адаптирована для веб-приложений;
• имеет хорошую базу технической документации и литературы;
• является активно развивающимся продуктом с большим опытом;
• большое количество специалистов на рынке труда;
• множество плагинов и отличная интеграция в другое программное обеспечение для веб-приложений;
• низкие требования к ресурсам аппаратного обеспечения.

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

Даталогическое проектирование — это создание модели, являющейся моделью логического уровня и представляющей собой отражение логических связей между элементами данных. Эта модель строится в единицах допустимых конкретной СУБД. Описание логической структуры с помощью средств СУБД называется схемой. Так как это осуществляется с помощью конкретной СУБД, то модели должны быть описаны на языке описания данных этой СУБД.

Для нашего проекта мы сформулировали следующие таблицы баз данных. Мы представили их в таблице.

Таблицы базы данных

Содержание

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

Рисунок 1. Инфологическая модель базы данных

Рисунок 2. Даталогическая модель базы данных

Как видно из спроектированных моделей базы данных, все таблицы связаны друг с другом. К примеру, в таблицы «Заказы» и «Избранные клиенты» имеют поля, связывающие их с таблицей «Клиенты» и хотя таблица «Заказы» никак не связывает себя напрямую с таблицей «Избранные клиенты», через общую для них таблицу «Клиенты» выстраивается характерная для реляционных СУБД связь. Таким образом связываются между собой и все остальные таблицы.

В качестве языка программирования для написания back-end части веб-приложения проекта был выбран PHP. Это скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов. PHP-код исполняется в php-файлах —обычных текстовых файлах, имеющих расширение php. Редактировать их можно в любом стандартном текстовом процессоре, поставляемом с любой операционной системой в качестве свободного и бесплатного к использованию текстового редактора.

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

В реализуемом проекте в соответствии с требованиями мы разделим интерфейс на следующие разделы:

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

Структура административного интерфейса представляет собой следующие разделы:

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

3.3 Разработка ИС

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

В качестве программного обеспечения на сервер были установлены СУБД mysql-server и mysql-client. Они дают простой и быстрый доступ к управлению СУБД. При помощи MySQL-клиента и запросов к СУБД были созданы таблицы с полями определенных типов, указаны уникальные индексы (id), которым было присвоено свойство «AUTO_INCREMENT», указывающее, что порядковый номер будет генерироваться автоматически (предыдущее значение + 1) по мере добавления новых строк в таблицу.

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

Следующий шаг в настройке back-end части – установка HTTP-сервера, умеющего интерпретировать PHP-код. Apache HTTP Server – это свободно распространяемый HTTP-сервер под лицензией Apache License 2.0. Главные функции сервера - взаимодействие с клиентом по HTTP-протоколу и компиляция PHP -кода при помощи соответствующего встроенного модуля. Данная программа является наиболее актуальной и используемой для создания web-серверов [1]. Также Apache характеризуется как кроссплатформенный, надежный и гибкий в конфигурации.

В процессе написания использовалась среда разработки программного обеспечения Geany^[8], распространяемая свободно под лицензией GNU GPL. Geany представляет собой текстовый процессор со специальными функциями для разработчиков: автоматической подстановкой закрывающих тегов, автозавершением названий функций, классов, переменных, подсветкой исходного кода, поддержкой большого количества кодировок.

РHP-код выполняет следующие задачи:

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

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

Front-end-частью проекта являются отдаваемые клиенту back-end частью HTML-страницы, которые содержат HTML, CSS, JavaScript, изображения и шрифты.

HTML-язык гипертекстовой разметки — стандартный язык разметки документов в Интернете. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. Язык HTML является приложением SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879.

CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

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

Когда back-end-составляющая веб-приложения присылает пользователю html, css, javascript или иной код вместе с содержимым, которое он запросил, браузер пользователя должен вывести на экран готовую страницу. Для этого он преобразует HTML-разметку в объектную модель документа (DOM), а CSS-разметку - в объектную модель таблицы стилей (CSSOM), т.е. создает DOM- и CSSOM-модели.

Опишем основные этапы формирования DOM:

1. Преобразование. Браузер преобразует байты из HTML-файла в символы, основываясь на приведенной в файле кодировке (например, UTF-8).

2. Разметка. На основании стандарта W3C HTML5 браузер выделяет среди символов теги в угловых скобках, такие как, и другие. У каждого тега есть свое значение и свой набор правил.

3. Создание объектов. С помощью HTML-тегов браузер выделяет в документе объекты с определенными свойствами.

4. Формирование DOM. Объекты образуют древовидную структуру, повторяющую иерархию HTML-файла, в котором одни теги помещаются в другие. Так, объект p помещается под body, а объект body, в свою очередь, под html, и так далее.

В результате выполнения названных этапов образуется объектная модель документа - DOM, с помощью которой браузер продолжает обрабатывать страницу. Все эти действия браузер должен выполнять каждый раз при обработке HTML-разметки. Этот процесс занимает некоторое время, особенно при обработке большого количества тегов, которыми реализуется разметка гипертекста. Чтобы обработать таблицу каскадных стилей CSS, браузер должен выполнить те же самые действия, что и с HTML-документом: байты из CSS-файла преобразуются в символы, символы - в теги, а теги - в объекты, которые образуют модель CSSOM.

В PHP-коде информационной системы торговой фирмы написана специальная функция data2template. При использовании этой функции код посылает ей данные, которые мы запросили из базы данных. Затем функция запрашивает тот шаблон, который соответствует странице, на которой находится пользователь. Для каждой из страниц уже создан соответствующий шаблон: goods_edit.html – страница редактирования товара; provider_edit.html – страница редактирования поставщика; orders.html – страница заказов и т.д. Такие же шаблоны есть и для иных страниц, отображаемых пользователю информационной системы.

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

Пример шаблона для страницы «Товары бренда»:

<div class="mainbox">

<h2>:

<!--[brand]--></h2>

<table><thead><td>Наименование</td><td>Бренд</td><td>Цена</td></t head><tbody><!--[table]--></tbody></table>

</div>

В приведенном примере можно увидеть две метки для данных: <!-[brand]--> и <!--[table]-->. Вместо первой функция вставит название бренда, а вместо второй - сформированную в PHP-коде таблицу с товаров этого бренда. Данные шаблоны не являются полноценными HTML страницами, а содержат лишь основу контента веб-приложения.

Так как основные элементы дизайна веб-приложения являются статическими (шапка, подвал, фон), то для удобства они были выделены в отдельный шаблон all.html. Таким образом, при необходимости изменить основные элементы разметки веб-приложения отпадает надобность менять их в шаблонах каждой страницы, изменения нужны только в вышеупомянутом файле.

Файл all.html используется при загрузке любой страницы приложения и содержит метки: заголовок страницы, контент страницы, дополнительный код между <head></head> тегами. Начинается страница с указания (веб-обозревателю) типа текущего документа DTD (описание типа документа): <!DOCTYPE html> - обозначает версию HTML.

После объявления типа документа идут основные элементы для html-страниц:

• html - элемент верхнего уровня в документе, для HTML;
• head - предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Между открывающим и закрывающим тегами head указана кодировка, язык, подключаемые файлы (CSS, JavaScript и шрифты);
• body - предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Т.е. между открывающим и закрывающим тегами данного элемента находится всё то, что видит пользователь: «шапка» сайта, заголовки, контент страницы и «подвал» сайта.