ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 11.01.2024
Просмотров: 104
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Рисунок 1 – Прототип главной страницы
Рисунок 2 – Прототип страницы с документами
Рисунок 3 – Прототип страницы личного кабинета
Рисунок 4 – Прототип страницы подтверждения регистрации
Вторым этапом: является улучшение внешнего вида веб-сайт, расположение текста, и картинок внутри блоков, и создание возможности перехода на другие страницы.
Третий этап ˗ это создание основной структуры веб-сайта. Написание кода и закрепление дизайна.
На последнем четвертом этапе создания веб-сайта, проводиться тестирование на предмет ошибок и корректировка в случае необходимости.
2.1.1.2 Описание схемы алгоритмов
В составе веб-сайта находятся три системы, в каждой из которых они реализуются. Поэтому каждая система была спроектирована таким образом:
-
для незарегистрированного пользователя; -
для зарегистрированного пользователя; -
для администратора.
Каждая система обладает своей функциональностью со своим спектром возможностей.
Система незарегистрированного пользователя, выполняет следующие функции:
− просмотр главной страницы;
− просмотр страницы с документами;
− заказ обратного звонка;
− просмотр информации о кампании;
− возможность регистрации.
Система оператора выполняет следующие функции:
− просмотр главной страницы;
− просмотр страницы с документами;
− заказ обратного звонка;
− просмотр информации о кампании;
− возможность регистрации.
− вход/выход пользователя;
− просмотр заказанных камер;
Система администратора выполняет следующие функции:
− вход/выход администратора;
− добавление/удаление/редактирование пользователей БД;
− администрирование БД;
− работа с обратной связью;
− редактирование данных администратора.
2.1.2 Описание работы сайта
Для открытия веб-сайта необходимо в адресной строке браузера ввести http://servtest.beget.tech. После чего откроется главная страница веб-сайта, на которой пользователь может перейти в интересующую его вкладку или так же веб-сайт имеет графу авторизации, регистрации, которая расширяет доступный функционал пользователю. Схема алгоритма работы веб-сайта представлена в соответствии с приложением Б.
Структурная схема, взаимодействия модулей программы «Разработка веб-сайта для ООО «ДИАМЕТРАЛЬ»», представлена на листе формата А1 с шифром ДП 09.02.07 ИС-418к 08.22 СВ, прилагаемая к дипломному проекту.
Структурная блок – схема, «Разработка веб-сайта для ООО «ДИАМЕТРАЛЬ»», представлена на листе формата А1 с шифром ДП 09.02.07 ИС-418к 08.22 БС, прилагаемая к дипломному проекту.
Структурная схема базы данных программы, «Разработка веб-сайта для ООО «ДИАМЕТРАЛЬ»», представлена на листе формата А1 с шифром ДП 09.02.07 ИС-418к 08.22 БД, прилагаемая к дипломному проекту.
2.2 Текст программы
Модернизация веб-приложения проводилась при помощи языка программирования PHP в связке с HTML, CSS и JavaScript. Сам текст модернизации веб-приложения представлен в виде листинга, в соответствие с приложением А.
2.3 Инструкция работы с сайтом
2.3.1 Общие сведения
После того как пользователь попадает на веб-сайт перед ним откроется главная страница. На главной странице представлено меню, кнопка личного кабинета, кнопка авторизации и регистрации, информация о кампании, форма обратной связи, после чего пользователь может войти в свой существующий аккаунт или пройти регистрацию, далее пользователю становиться доступен свой личный кабинет.
2.3.2 Вызов и загрузка
Веб-сайт на время своего тестирования находится на хостинге кампании Beget.
В качестве стороннего программного обеспечения выступают интернет браузеры, такие как Opera, Google Chrome и другие.
2.3.3 Входные данные
Входными данными на веб-сайте могут выступать следующие типы данных:
− данные вводимые при входе пользователя;
− данные при регистрации пользователя;
− данные вводимые при отправке формы обратной связи.
2.3.4 Выходные данные
Выходными данными на веб-сайте могут выступать следующие типы данных:
− данные пользователя в личном кабинете;
− информация об кампании.
В роли выходной информации так же выступает результат перехода по формам веб-сайта.
2.3.5 Сообщения программы
Во время работы пользователя на веб-сайте могут появляться различные диалоговые окна, которые означают совершение того или иного действия. Виды сообщений представлены в соответствии с таблицей 7.
Таблица 7 – Виды диалоговых окон
| Вид сообщений | Действия пользователя |
| 1 | 2 |
| Сообщение об ошибке регистрации пользователя. | Проверка правильности ввода данных. |
| Сообщение об ошибке авторизации пользователя. | Проверка правильности ввода данных. |
| Сообщение об пустых полях регистрации пользователя. | Проверка правильности ввода данных. |
| Сообщение об пустых полях авторизации пользователя. | Проверка правильности ввода данных. |
| Сообщение об отправки писем. | Ожидание ответа. |
Продолжение таблицы 7
| 1 | 2 |
| Сообщение об ошибке отправки писем пользователя. | Проверка правильности ввода данных. |
| Сообщение об пустых полях писем пользователя. | Проверка правильности ввода данных. |
2.4 Описание процесса отладки программы
2.4.1 Методы отладки
Термин отладка может иметь разные значения, но в первую очередь он означает устранение ошибок в коде. Делается это по-разному, например, отладка может выполняться путем проверки кода на наличие опечаток или с помощью анализатора кода. Отладка работы созданного или модернизированного веб-сайта предполагает логический анализ предметной области, в которой обнаруживают, локализуют и устраняют ошибки. Большая часть ошибок проявляется на первых стадиях разработки. Остальную часть ошибок удаётся обнаружить при непосредственном тестирование модернизированного интернет ресурса. При этом используются различные методы:
1) Ручное тестирование – самый простой способ, предполагает прямое ручное тестирование разработанного продукта. Метод эффективен при работе с не большими программами, используется как основа при работе с другими методами.
2) Метод индукции – основан на тщательном анализе возникших ошибок. На основе анализа получают примерный фрагмент ошибки кода. В случае неудачи все действия повторяются до тех пор, пока ошибка не будет обнаружена.
3) Метод дедукции – основан на формировании различных причин, из-за которых могла появиться ошибка. После анализируют причины и исключают лишние. Если все причины были отвергнуты, то действия повторяются.
4) Метод обратного прослеживания – данный метод, как и метод ручного тестирования эффективен при работе с небольшим программным продуктом. Основан на построении обратно-прямой от места вывода не верного результата, до переменных, которые вызвали ошибку в выполнение кода.
2.4.2 Тестирование и отладка
Тестирование веб-сайта производилось с помощью разных онлайн-сервисов в соответствии с таблицей 8.
Таблица 8 – Виды диалоговых окон
| Сайты для тестирования | Что они делают |
| W3C Markup Validation | W3C Markup Validator – это бесплатный сервис для проверки соответствия исходного кода сайта нормам и правилам Консорциума Всемирной паутины |
| W3C Link Checker | W3C Link Checker ищет ошибки в ссылках, якорях и ссылочных объектах на веб-странице, CSS или рекурсивно по всему веб-сайту |
| Xenu’s Link Sleuth | Проверяет веб-сайты на битые ссылки |
| W3C mobileOK Checker | Этот сервис предлагает различные тесты веб-страницы на адаптивность к мобильным устройствам. |
| YSlow | Это сервис, который может проверить скорость загрузки веб-страницы и подсказать, что ей мешает быстро загружаться. |
| Wapiti | Позволяет провести проверку безопасности веб-сайта |
| Browsera | Обеспечивает автоматизацию тестирования кроссбраузерности |
| SEO SiteCheckup | Предлагает комплексный анализ SEO веб-сайта |
2.4.3 Контрольный пример
В ходе выполнения дипломного проектирования была поставлена задача разработать веб-сайт. Проделанная работа представлена в соответствии с рисунками 5 – 15.
Рисунок 5 – Первый экран веб-сайта
Рисунок 6 – Экран с выбором заказа веб-сайта
Рисунок 7 – Экран с картой для выбора заказа веб-сайта
Рисунок 8 – Экран с преимуществами кампании
Рисунок 9 – Экран со слайдером для чего можно выбрать заказ
Рисунок 10 – Информация о кампании и форма обратной связи
Рисунок 11 – Форма регистрации
Рисунок 12 – Форма авторизации
Рисунок 13 – Страница с подтверждением регистрации
Рисунок 14 – Страница личного кабинета
Рисунок 15 – Всплывающее окно обратно связи
ЗАКЛЮЧЕНИЕ
В ходе преддипломной практики был разработан веб-сайт для кампании ООО «ДИАМЕТРАЛЬ». Веб-сайт несет о себе информацию об организации, интересные факты, также был разработан функционал:
-
возможность заказа обратного звонка; -
регистрации пользователя; -
просмотр заказанных камер; -
вход/выход пользователя; -
вход/выход администратора; -
добавление/удаление/редактирование пользователей БД; -
администрирование БД; -
работа с обратной связью; -
редактирование данных администратора.
А вместе с тем облегчает предоставление информации о пользователях, а также решение проблемы управления данными, которая обеспечит наиболее эффективную работу.
Исходя из рентабельности данной отрасли в 43% стоимость разработки данного веб-сайта составляет 47 604,92руб. и прибыли благодаря данному веб-сайту в 12 131руб. в год получается, что срок окупаемости программы получился 3 года 9 месяцев, что меньше нормативной величины 4 года.