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



ПРАВИТЕЛЬСТВО САНКТ-ПЕТЕРБУРГА

Санкт-Петербургское государственное бюджетное профессиональное образовательное учреждение

«ПЕТРОВСКИЙ КОЛЛЕДЖ»

(СПб ГБПОУ «Петровский колледж»)

Отделение очного обучения

Отделение информационно-промышленных технологий и судостроения

Отчёт по преддипломной практики

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

фитнес-зала

Оглавление

ВВЕДЕНИЕ

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

Цель:

Разработать веб сайт фитнес зала  ООО «Руслан – Бицепс»

Задачи:

1) Проанализировать предметную область.

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

3) Разработать и согласовать с заказчиком техническое задание.

4) Спроектировать макет сайта.

5) Определить графический стиль сайта.

6) Реализовать интуитивно понятный интерфейс.

7) Разработать функцию регистрации на сайте.

8) Провести комплексное тестирование сайта.

9) Разместить сайт на хостинг в сети.

  1. Постановка задачи
    1. Описание предметной области

    Компания ООО «Руслан - Бицепс» была основана в 2016-ом году. Представляет из себя сеть залов с услугами тренеров и врачей.

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

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

    Воспользовавшись системой,  можете записаться в зал в любое время суток.

    1. Функции проектируемой информационной системы

    Воспользовавшись системой,  можете зарегистрироваться в любое время суток.

    Функции проектируемой информационной системы

    1) записаться на посещение зала

    2) оформить заказ на сайте

    3) проконсультироваться с врачом

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

    1. Средства разработки, использованные в проекте
    2. 1) Notepad++  - в данной программе был написан код сайта

      2) HTML 5.0 – использовался для разметки текста

      3) CSS 3.0 -  использовался для стилевого оформления

      4) РНР 7.2 – с помощьюPHP была реализована серверная часть

      1. Техническое задание на разработку
      2. Разработанное и согласованное с заказчиком техническое задание на создание сайта приведено в приложении А.

        1. ЭСКИЗНОЕ ПРОЕКТИРОВАНИЕ
          1. Разработка входных и выходных данных

          Входные данные:

          • Запрос
          • Контент

          Выходные данные:

          • Результаты запросов сайта
            1. Разработка функциональных диаграмм и спецификаций
          • Диаграммы разработаны в программеRamusEducational. На рисунке 1 показана контекстная диаграмма системы.

            Рисунок 1- Контекстная диаграмма работы веб сайта

            1

            На рисунке 2 приведена диаграмма второго уровня. На диаграмме выделены следующие модули: Административная и Клиентские части

            Рисунок 2 Диаграмма работы веб сайта

            На рисунке 3 приведена диаграмма третьего уровня. На диаграмме выделены следующие модули: Работа базы данных и Магазина

            Рисунок 3 Модули базы данных и магазина

            1. Разработка диаграмм потоков данных

            На рисунке 4 показана диаграмма потоков данных сайта

            Рисунок 4 диаграмма потоков данных

            На рисунке 5 изображена диаграмма потоков данных регистрации пользователя и покупки товара

            Рисунок 5 Регистрация пользователя и покупка товара

            На рисунке 6 изображена диаграмма потоков данных регистрации пользователя и покупки товара

            Рисунок 6 Покупка товара

            1. Разработка инфологической схемы базы данных
            2. На рисунке 7 приведенаER диаграмма связей базы данных, подключённой к сайту

              Рисунок 7ER диаграмма базы данных сайта

              1. Проектирование веб-страницы

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

              Рисунок 8 Страница «программа тренировок»

              Рисунок 9 Всплывающее меню на странице «программа тренировок»

              Программа и методика испытаний информационной системы

              Таблица 1

              TestCase #

              TC_UI_1

              Приоритет

              Обычный

              Название тестирования/Имя

              Проверка работы формы регистрации

              Резюме испытания

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

              Шаги тестирования

              1. Открыть страницу «Регистрация»
              2. Кликнуть на элемент «Зарегистрироваться»
              3. Ввести данные – Имя, Фамилия, Номер телефона
              4. Нажать на кнопку «Зарегистрироваться»
              5. Открыть базу данных и проверить данные

              Данные тестирования

              Ожидаемый результат

              Данные должны занестись в базу данных

              Фактический результат

              Данные занеслись

              Предпосылки

              Есть подключение к базе данных

              Статус (Pass/Fail)

              Pass

              Комментарий

              Таблица 2

              Test Case #

              TC_UI_2

              Приоритет

              Обычный

              Название тестирования/Имя

              Проверка работы формы регистрации

              Резюме испытания

              Проверить работу скрипта, отвечающего за закрытие формы регистрации

              Шаги тестирования

              1. Открыть страницу «Регистрация»
              2. Кликнуть на элемент «Зарегистрироваться»
              3. Кликнуть на элемент «крестик» на открывшейся форме «Регистрации» или на любое место, кроме самой формы

              Данные тестирования

              Ожидаемый результат

              Форма регистрации со всеми элементами в ней должна закрыться. Должна остаться открытой страница «Регистрация»

              Фактический результат

              Форма, со всеми элементами в ней, закрылась. Осталась открытой страница «Регистрация»

              Предпосылки

              Форма была открыта

              Статус (Pass/Fail)

              Pass

              Комментарий

              Таблица 3

              Test Case #

              TC_UI_3

              Приоритет

              Обычный

              Название тестирования/Имя

              Проверка работы скрипта отвечающего за всплывающее меню

              Резюме испытания

              Проверить работу скрипта, отвечающего за всплывающее меню принаведение на него курсора мыши

              Шаги тестирования

              1. Открыть страницу «Программа тренировок»
              2. Навести курсор на элемент меню «Программа тренировок»
              3. Проверить, появились ли всплывающие элементы меню «для женщин» и «для мужчин»

              Данные тестирования

              Ожидаемый результат

              Должны появиться элементы меню «для женщин» и «для мужчин»

              Фактический результат

              Появились скрытые элементы меню

              Предпосылки

              Была открыта страничка сайта «программа тренировок»

              Статус (Pass/Fail)

              Pass

              Комментарий

              Таблица 4

              Test Case #

              TC_UI_4

              Приоритет

              Обычный

              Название тестирования/Имя

              Проверка работы элемента корзины

              Резюме испытания

              Проверить работу скрипта, отвечающего за оформления заказа

              Шаги тестирования

              1. Открыть страницу «программа тренировок»
              2. Кликнуть на элемент «Корзина»
              3. Выбрать товар
              4. Нажать на кнопку «Оформить»

              Данные тестирования

              Ожидаемый результат

              Данные из формы должны записаться в соответствующие ячейки имеющейся информационной системы

              Фактический результат

              Заказ оформлен

              Предпосылки

              Форма была закрыта, данных не было в имеющейся информационной системе

              Статус (Pass/Fail)

              Fail

              Комментарий

              Таблица 5

              Test Case #

              TC_UI_5

              Приоритет

              Обычный

              Название тестирования/Имя

              Проверка работы формы регистрации

              Резюме испытания

              Проверить работу скрипта отвечающего за закрытие элемента корзина

              Шаги тестирования

              1. Открыть страницу «программа тренировок»
              2. Кликнуть на элемент «Корзина»
              3. Кликнуть на элемент «крестик» на открывшейся форме «Корзина» или на любое место, кроме самой формы

              Данные тестирования

              Ожидаемый результат

              Элемент корзина со всеми элементами в ней должна закрыться. Должна остаться открытой страница «программа тренировок»

              Фактический результат

              Элемент, со всеми элементами в ней, закрылась

              Предпосылки

              Элемент был открыт

              Статус (Pass/Fail)

              Pass

              Комментарий

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

                Данный сайт предназначен для ознакомления с товарами и услугами фирмы «Руслан – Бицепс» и для дальнейшей регистрации на сайте или приобретения товара.

                Назначение и условия применения

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

                Описание операций

                Для того, чтобы заказать товар, необходимо зайти на сайт фитнес-зала «Руслан-Бицепс», зарегистрироваться на сайте. После этого нажать на форму «корзина» , выбрать понравившейся товар и нажать кнопку «оформить»появится сообщение об успешно совершенном заказе.

                Требования для использования

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

                ЗАКЛЮЧЕНИЕ

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

                После написания сайт будет использован компанией ООО «Руслан-Бицепс» с целью ознакомления с услугами компании и ценами на них, а так же регистрацией для записи в зал.

                СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

                1. Сервис интерактивного онлайн-обучения HTML и CSS. [Электронный ресурс]. Режим доступа: http://htmlacademy.ru

                2. Онлайн ресурс с учебником по CSS и HTML. [Электронный ресурс]. Режим доступа: http://webremeslo.ru

                3. Сайт-справочник по CSS и HTML. [Электронный ресурс]. Режим доступа: http://htmlbook.ru

                4. «Хабрахабр» - статьи по Веб-дизайну. [Электронный ресурс]. Режим доступа: https://habrahabr.ru

                5. Портал по JavaScript. [Электронный ресурс]. Режим доступа: http://javascript.ru

                6. Справочник по JavaScript. [Электронный ресурс]. Режим доступа: https://laptev-alex.ru

                7. Справочник по CSS. [Электронный ресурс]. Режим доступа: https:/webref.ru

                8. Берд Дж. Веб-дизайн. Руководство разработчика. - Москва, 2012. - 224 c.

                9. Кирсанов, Дм. Веб-дизайн: Книга Дмитрия Кирсанова. - М: Символ-Плюс, 2012. - 376 c.

                10. Киселев С. В., Алексахин С. В., Остроух А. В. Веб-дизайн. – М.:Академия, 2012. - 158 c.

                11. Сырых Ю. А. Современный веб-дизайн. Эпоха Веб 3.0.– М.:Вильямс, 2013. - 376 c.

                12. Хоган Б., Уоррен К., Уэбер М., Джонсон К., Годин А. Книга веб-программиста. Секреты профессиональной разработки веб-сайтов.– М., 2013. - 288 c.

                14. М. Смит Б., Бибек А. Создание Web-страниц для чайников. - М.: Вильямс, 2017. - 256 с.

                15. Гарретт Дж. Веб-дизайн. Элементы опыта взаимодействия. –М.: Символ-Плюс, 2013. - 192 c.

                16. Смит, Б.,Бибек, А. Создание Веб-страниц. М.: Диалектика, 2010. - 256 c.

                ПРИЛОЖЕНИЕ А

                ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА РАЗРАБОТКУ ИНТЕРНЕТ-САЙТА

                ГЛОССАРИЙ

                Термин

                Описание

                Сайт

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

                World wide web (WWW, web,веб)

                Единое информационное пространство на базе сети Internet, состоящее из совокупности сайтов. Приставка "веб-" может использоваться для обозначения объектов, ориентированных на использование в WWW или использующих типичные для WWW технологии (например, веб-интерфейс - интерфейс на базе веб-страниц)

                HTML-страница (веб-страница, страница)

                Основной носитель информации в WorldideWeb. Особым образом сформатированный файл (набор файлов), просматриваемый с помощью www-браузера как единое целое (без перехода по гиперссылкам)

                HTML-теги (теги)

                Управляющие коды, посредством которых осуществляется форматирование HTML-страницы

                Гиперссылка (ссылка, линк)

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

                WWW-браузер (браузер)

                Клиентская программа, поставляемая третьими сторонами и позволяющая просматривать содержимое HTML-страниц

                HTML-форма (форма)

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

                Поле (поле БД, поле формы)

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

                Флаг

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

                Справочник

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

                Администратор (менеджер, редактор) сайта

                Лицо, осуществляющее от имени Заказчика информационную поддержку сайта

                Дизайн-шаблон страниц

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

                       Дизайн веб-сайта

                Уникальные для конкретного веб-сайта структура, графическое оформление и способы представления информации

                Информационные материалы

                Информация о деятельности Заказчика. Может включать графические, текстовые, аудио или видео материалы. Предоставляется Заказчиком




                Похожие работы, которые могут быть Вам интерестны.

                1. РАЗРАБОТКА ДИНАМИЧЕСКОГОWEB-САЙТА С ПРИМЕНЕНИЕМ OPEN SOURCE СИСТЕМ УПРАВЛЕНИЯ КОНТЕНТОМ (CMS)

                2. Анализ модулей управления производством в структуре корпоративной информационной системы

                3. Проектирование информационной системы обработки контента сайта

                4. Разработка динамического сайта для расчета физико-химических свойств элементов периодической системы Д.И. Менделева

                5. Создание интернет-магазина с помощью систем управления контентом Joomla

                6. Анализ и проектирование системы управления персоналом на предприятии

                7. Проектирование микропроцессорной системы для управления некоторым объектом

                8. ПРОЕКТИРОВАНИЕ АВТОМАТИЗИРОВАННОЙ СИСТЕМЫ УПРАВЛЕНИЯ ДОМЕННОЙ ПЕЧЬЮ

                9. ПРОЕКТИРОВАНИЕ АВТОМАТИЗИРОВАННОЙ СИСТЕМЫ УПРАВЛЕНИЯ ТЕМПЕРАТУРОЙ КУПОЛА ВОЗДУХОНАГРЕВАТЕЛЯ

                10. Проектирование системы управления закупками и снабжением заказчиков для НГД отрасли