Разработка сайта с интегрированной базой данных

Частное профессиональное образовательное учреждение

Петрозаводский кооперативный техникум Карелреспотребсоюза

КУРСОВАЯ РАБОТА

НА ТЕМУ: “Разработка сайта с интегрированной базой данных”

по междисциплинарному курсу МДК 02.01 Информационные технологии и платформы разработки информационных систем профессионального модуля ПМ 02 Участие в разработке информационных систем.

Оглавление

ВВЕДЕНИЕ

ГЛАВА 1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

1.1 Front-end (Визуальная часть)

.1.1 Vue.js

.1.2 ECMAScript6

.1.3 Webpack

.1.4 NuxtJs

.2 Back-end (Серверная часть)

1.2.1 Python

.2.2 Django

.2.3 RESTAPI

.2.4 PostgreSQL

.2.5 ORM

ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ

.1 Front-end

.2 Back-end

ЗАКЛЮЧЕНИЕ

Список литературы

Приложения

ВВЕДЕНИЕ

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

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

Во время обследования предприятия розничной торговли “ЛОТОС” было обнаружено, что интернет ресурс используется неэффективно по уже известной причине.

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

Актуальность данного решения обусловлена необходимостью предприятия обновить существующий сайт с помощью более нового стека технологий.

Объектом исследования служит деятельность предприятия розничной торговли “ЛОТОС”.

Предметом курсовой работы является разработка сайта с базой данных.

Целью курсовой работы является разработка сайта с интегрированной базой данных.

Для достижения цели, нужно решить следующие задачи:

.        Выявить недостатки предыдущего проекта.

.        Спроектировать новое решение для веб-ресурса.

.        Выбрать необходимый инструментарий для разработки.

.        Разработать back-end часть.

.        Разработать front-end часть.

.        Выполнить тестирования на отказоустойчивость.

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

ГЛАВА 1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

1.1    Front-end (Визуальная часть)

Следующий стек технологий будет использоваться в процессе разработки нового сайта для предприятия:

·        Vue.js

·        ES6

·        Webpack

·        Nuxt.js

1.1.1 Vue.js

Vue - это прогрессивный фреймворк для создания пользовательских интерфейсов. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-PageApplications).

Рисунок 1. Компоненты приложения

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

Как было сказано ранее, Vue решает задачи уровня представления (view), а из этого следует, что он придерживается шаблона MVVM (Model-View-ViewModel). Этот шаблон используется для разделения модели и её представления, что необходимо для изменения их отдельно друг от друга. Например, разработчик задает логику работы с данными, а дизайнер соответственно работает с пользовательским интерфейсом.

Шаблон MVVM делится на 3 части:

·        Модель (Model) - так же, как в классической MVC, Модель представляет собой фундаментальные данные, необходимые для работы приложения.

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

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

1.1.2 ECMA Script6

ECMA Script (ES6) -это официальный стандарт языка JavaScript, который определяет общий синтаксис для всех разработчиков веб-приложений.

1.1.3 Webpack

Webpack можно охарактеризовать, как “сборщик модулей”. Он берет JavaScript модули с необходимыми зависимостями, и затем соединяет их вместе как можно более эффективным способом, на выходе создавая единый JS-файл.не ограничен в использовании только JavaScript модулей. Применяя специальные загрузчики, Webpack понимает, что JavaScript модулям могут потребоваться для их работы, например, CSS файлы, а им, в свою очередь, изображения. При этом, результат работы Webpack будет содержать только те ресурсы, которые действительно нужны для работы приложения.

1.1.4 NuxtJs

NuxtJs - это фреймворк для универсальных приложений на Vue.js. Основной задачей этого фреймворка является рендеринг пользовательского интерфейса в условиях абстракции от клиент-серверной архитектуры. Nuxt.js содержит все необходимые конфигурационные заготовки, позволяющие сделать разработку приложений ссерверным рендерингом на Vue.js лёгкой и приятной.

1.2    Back-end (Серверная часть)

В разработке серверной части будет использоваться язык Python и фреймворк Django, а также коммуникация между визуальной частью и серверной будет следовать подходу RESTAPI. Все данные будут храниться в СУБД (Система Управления Базой Данных)PostgreSQL, а запросы к базе данных будут формироваться с помощью встроенной ORM (Объектно-Реляционное Отображение).

1.2.1

1.2.1 Python

Python - это один из наиболее популярных современных языков программирования. Он пригоден для решения разнообразных задач и предлагает те же возможности, что и другие языки программирования: динамичность, поддержку ООП и кроссплатформенность. Разработку Python начал Гвидо Ван Россум (Guido Van Rossum) еще в середине 1990-х годов, поэтому к настоящему времени удалось избавиться от стандартных «детских» болезней, существенно развить лучшие стороны языка и привлечь множество программистов, использующих Python для реализации своих проектов.

1.2.2 Django

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

Как и большинство инструментов, позволяющих разрабатывать серверную часть веб-ресурсов, он так или иначе отвечает модели MVC (ModelViewController). Данная модель подразделяется на три компонента:

·        Модель (Model) - представляет данные и реагирует на команды контроллера, изменяя свое состояние.

·        Представление (View) - отвечает за отображение данных модели пользователю, реагируя на изменения модели.

·        Контроллер (Controller) - интерпретирует действия пользователя, оповещая модель о необходимости изменений.

Рисунок 2. Модель MVC

Помимо всего прочего данный фреймворк включает в себя такой необходимый инструментарий как:

·        Защита от CSRF атак

·        Продвинутая система документирования ошибок

·        Валидация форм

·        Возможность работы с промежуточным слоем приложения (middleware)

1.2.3 RESTAPI

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

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

Базовое использование данного подхода заключается в вызовах двух методов API- это GETили POSTHTTP-запросы к URL с некоторым набором параметров.

1.2.4 PostgreSQL

PostgreSQL - это свободно распространяемая объектно-реляционная система управления базами данных (ORDBMS), наиболее развитая из открытых СУБД в мире и являющаяся реальной альтернативой коммерческим базам данных.

PostgreSQLподдерживается на всех современных Unixсистемах (34 платформы), включая наиболее распространенные такие как Linux, FreeBSD, NetBSD, OpenBSD, SunOS, Solaris, DUX, а также под MacOSX.

1.2.5 ORM

Object Relational Mapping (Объектно-Реляционное Отображение) - это технология программирования, которая позволяет преобразовывать несовместимые типы моделей в ООП, в частности, между хранилищем данных и объектами программирования. ORM используется для упрощения процесса сохранения объектов в реляционную базу данных и их извлечения, при этом ORM сама заботится о преобразовании данных между двумя несовместимыми состояниями. Большинство ORM-инструментов в значительной мере полагаются на метаданные базы данных и объектов, так что объектам ничего не нужно знать о структуре базы данных, а базе данных - ничего о том, как данные организованы в приложении. ORM обеспечивает полное разделение задач в хорошо спроектированных приложениях, при котором и база данных, и приложение могут работать с данными каждый в своей исходной форме спроектированных приложениях, при котором и база данных, и приложение могут работать с данными каждый в своей исходной форме.

Рисунок 3. Схема ORM

ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ

приложение фреймворк программрование

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

2.1    Front-end

Сначала необходимо четко разграничить страницы сайта, чтобы удобно было вести разработку, а сами страницы в свою очередь разбить на компоненты, такие, например, как:

·        Шапка

·        Тело

·        Низ

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

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

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

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

2.2   

2.2    Back-end

Для подготовки окружения стоит выполнить последовательно следующие действия:

·        Выбрать временный сервер для ведения на нем разработки back-end части

·        Установить python утилиту pip, которая выполнит разрешение зависимостей и подготовит необходимые пакеты для начала разработки

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

ЗАКЛЮЧЕНИЕ

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

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

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

Во время выполнения работы были достигнуты поставленные цели, а именно:

·        Разработана визуальная часть сайта

·        Разработана серверная часть сайта

·        Улучшена поддержка кода при помощи системы контроля версий

Список литературы

1.      РД 50 - 34.698 - 90 Методические указания. Информационная технология. Комплекс стандартов и руководящих документов. Автоматизированные системы. Требования к содержанию документов на автоматизированные системы.

2.      ISO/IEC 15288 Systems engineering. System life cycle processes (Системотехника. Процессы жизненного цикла системы).

3.      ISO/IEC 12207:1995 Information technology - Software life cycle processes (Информационныетехнологии. Процессы жизненного цикла программного обеспечения).

.        Ворона В.А., Тихонов В.А., Системы контроля и управления доступом. Издательство: М.: Горячая линия - Телеком, 2010. 272стр.

.        Горчаков Я.В. Описание деятельности организации: Субъект - Объект - Процессы, 2014.

.        В.А. Головин, В.А. Русин, Е.С. Тарабаева, Моделирование предметной области, М.: Академия АйТи, 2009. - 43 с.

.        Флэнаган Д. Javascript. Подробное руководство 6-е издание, 2012.

.        К. Дж. Дейт. Введение в системы баз данных, 2005.

.        Марк Лутц. Изучаем Python 4-е издание, 2012.

.        Лучано Рамальо. Python. К вершинам мастерства.

.        Кузин А.В., Базы данных 5-е издание. Издательство: Издательский центр Академия, 2012 г. 317стр.

.        Корчагин С.В., Разработка программных комплексов. [Текст]: учеб.пособие для вузов. М.: Издательство "БХВ-Петербург", 2008. 500стр.

.        Зыков Н.В., Общие требования к оформлению курсового проекта (работы):стандарт предприятия СТП - ЗабГК - 01- 08/ Н.В. Зыков, Л.В. Шумилова, А.В. Терехова - Чита, ЗабГК, 2008. - 14 с

.        Документация DjangoRESTFramework - #"897121.files/image004.jpg">