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

Компоненты приложения Vue.js, использование шаблона MVVM. Характеристика Webpack и фреймворка NuxtJs. Python как язык программирования, модель MVC, компоненты и инструментарий фреймворка Django. Технология программирования Object Relational Mapping.

Рубрика Программирование, компьютеры и кибернетика
Вид контрольная работа
Язык русский
Дата добавления 22.03.2017
Размер файла 296,4 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

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

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

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

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

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

Оглавление

ВВЕДЕНИЕ

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

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

1.1.1 Vue.js

1.1.2 ECMAScript6

1.1.3 Webpack

1.1.4 NuxtJs

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

1.2.1 Python

1.2.2 Django

1.2.3 RESTAPI

1.2.4 PostgreSQL

1.2.5 ORM

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

2.1 Front-end

2.2 Back-end

ЗАКЛЮЧЕНИЕ

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

Приложения

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· Vue.js

· ES6

· Webpack

· Nuxt.js

1.1.1 Vue.js

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

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

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

Как было сказано ранее, 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-файл.

Webpack не ограничен в использовании только 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 атак

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

· Unit тесты - тестирование приложения

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

· Возможность работы с промежуточным слоем приложения (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 (Информационныетехнологии. Процессы жизненного цикла программного обеспечения).

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

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

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

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

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

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

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

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

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

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

14. Документация DjangoRESTFramework - http://www.django-rest-framework.org

15. Документация DjangoFramework - https://docs.djangoproject.com/en/1.10

16. Документация VueJS - https://vuejs.org/v2/guide

17. Документация NuxtJS - https://nuxtjs.org/guide

Приложения

1. Схема запросов к RESTAPI

Размещено на Allbest.ru


Подобные документы

  • Django — свободный фреймворк для веб-приложений на языке Python, использующий шаблон проектирования MVC. Архитектура и основные компоненты приложения. Главные компоненты среды разработки Django. Некоторые возможности и взаимосвязь компонентов фреймворка.

    реферат [23,7 K], добавлен 18.01.2015

  • Вопросы реализации шаблона типового сайта диссертационного совета СевКавГТУ. Разработка базы данных для шаблона сайта с помощью фреймворка Django и Aptana Studio 3. Обоснование требований к техническому обеспечению. Расчет цены программного продукта.

    дипломная работа [2,5 M], добавлен 26.09.2012

  • Случаи использования PHP фреймворка. Обзор современных фреймворков. Выбор фреймворка для разработки сайта. Поддержка баз данных и сообщества. Model View Controller архитектура. Скорость развития фреймворка. Наличие встроенных javascript-библиотек.

    курсовая работа [1,8 M], добавлен 31.05.2012

  • Этапы развития, особенности и возможности языка программирования Java; происхождение названия. Приложения Sun Microsystems: идеи, примитивные типы. Python - высокоуровневый язык программирования общего назначения: структуры данных, синтаксис и семантика.

    реферат [79,0 K], добавлен 23.06.2012

  • Отличительные особенности языка программирования Python: низкий порог вхождения, минималистичный язык, краткий код, поддержка математических вычислений, большое количество развитых web-фреймворков. Традиционная модель выполнения программ на языке Python.

    реферат [51,9 K], добавлен 18.01.2015

  • Анализ создания виртуального окружения для разработки. Установка фреймворка Flask. Особенность настройки аутентификации и привилегий. Создание Python-файла и написание в нем простого веб-приложения. Запуск и проверка работоспособности приложения.

    лабораторная работа [2,1 M], добавлен 28.11.2021

  • Понятие шаблона проектирования или паттерна в разработке программного обеспечения. Изменение поведения системы (базы данных) с помощью порождающего шаблона программирования - абстрактной фабрики. Программирование базы данных и управление ею на языке С+.

    курсовая работа [124,8 K], добавлен 30.04.2011

  • Технология разработки веб–ориентированных систем. Выбор языка программирования, фреймворка и СУБД. Создание сайта в виде текстового форума с функцией оповещения о важных новостях по почте. Выбор хостинга, доменного имени и размещение его в Интернет.

    курсовая работа [1,9 M], добавлен 10.11.2015

  • Разработка структуры базы данных для хранения дипломных проектов в среде объектно-ориентированного программирования Python. Создание внешнего вида окон ввода-вывода информации, технологии переходов. Листинг программы с пояснениями; направления улучшения.

    курсовая работа [3,1 M], добавлен 27.02.2015

  • Компоненты приложения и технологии, используемые для связи между ними. Обзор программных средств и технологий, используемых в ходе работы. Трансляция кода JSP страницы в код сервлета. Создание структуры базы данных c применением фреймворка Hibernate.

    курсовая работа [1,1 M], добавлен 16.07.2016

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.