диплом. Федоров М А. 1. Основная часть
 Скачать 7.6 Mb.
|
1 2 Описание системы и ее взаимодействия с внешней средой представлено на контекстной функциональной диаграмме, рисунок 7.  Рисунок 7 - Контекстная функциональная диаграмма Макет главной страницы web-сайта «WeBook» представлен на рисунке 8.  Рассчитать Очистить поля Рисунок 8 – Макет главной страницы В работе сайта интернет - магазина будут предусмотрены три вида пользователя: Оператор сайта, принимающий заказы. Администратор сайта, обладает широкими полномочиями, поскольку следит за исправностью системы, наполняет сайт, редактирует данные. Клиент магазина, оформляет заказ. 2.2. Создание программного обеспечения Написание сайта производилось на html разметке с использованием стилей CSS и языка программирования JavaScript. В процессе написания производилась отладка для выявления синтаксических ошибок. В результате чего можно сказать, что ошибки при отладке были исправлены. Результатом написания кода стал продукт – web – сайт онлайн - библиотеки. Требования к графическому дизайну регламентируют основные принципы, которых необходимо придерживаться при разработке визуального оформления приложения. В данном случае web-сайт должен иметь оформление в спокойных тонах, читабельный шрифт и удобный понятный графический интерфейс. Перечень файлов входящих в проект показан на рисунке 9.  Рисунок 9 – перечень файлов проекта Таблица 3. Перечень файлов проекта
В папке img находятся файлы (ресурсы) для сайта, а именно изображения применяемые на всех страницах сайта (логотип, изображения книг и т. д. ). Фрагменты кода программного продукта «web-сайт онлайн-библиотеки», написанные на таких языка, как HTML, CSS, JavaScrypt, PHP, SQL в среде NotePad++, выглядят следующим образом, рисунок 10, 11, 12:  Рисунок 10 - Код главной страницы web-сайта  Рисунок 11 – Код главной страницы web-сайта  Рисунок 12 – Код серверной части web-сайта Полный листинг приведен в приложении В. Отладка программного продукта осуществлялась средствами web-браузера Yandex. В результате написания страницы, сайт имеет следующий вид (рисунок 13).  Рисунок 13 – Главная страница сайта Сайт готов к работе. 2.3. Тестирование программного обеспечения На заключительных этапах необходимо провести тестирование продукта на открытие и работоспособность вкладок. Главная страница приведена на рисунке 14. При открытии сайта пользователь попадает на главную страницу, где имеется возможность выбрать желаемую категорию книг.  Рисунок 14- Главная страница Форма для заказа, а также для регистрации в сообществе расположены на главной странице, рисунок 15.  Рисунок 15- Форма заказа книги на главной странице В части «футер» также присутствует наполнение. Вкладка «Книги» приведена на рисунке 16. На данной вкладке также организован поиск книг.  Рисунок 16 - Ассортимент книг На вкладке Контакты присутствует форма для связи, а также контакты, карта местонахождения, рисунок 17, 18.  Рисунок 17 - Форма для связи  Рисунок 18 – Карта местонахождения главного офиса Проверим работоспособность вкладки справка, рисунок 19.  Рисунок 19 – Справочная система сайта В результате тестирования ошибок не выявлено. Таким образом, результат удовлетворяет всем ожиданиям. Также, отметим, что особое внимание необходимо уделить тестированию взаимодействия. Данное тестирование является функциональным и проверяет способность продукта взаимодействовать с компонентами или системами. В нашем случае необходимо проверить взаимодействие web-сайта с базой данных: правильно ли сохраняются записи зарегистрированный пользователей и корректно ли отображаются при запросе. Необходимо было предусмотреть вариант того, что поля могут быть не все заполнены, или же вводимые данные уже существуют в базе(совпадение имени пользователя, emeil и т.д.) тогда на web-сайте должно отобразиться сообщение с предупреждением, рисунок 20.  Рисунок 20 - Вывод сообщения Также предусмотрена проверка на корректность ввода данных пользователем, если введенное имя пользователя или пароль не соответствуют записями в базе, будет выведено сообщение об ошибки(Рисунок 21).  Рисунок 21 - Вывод сообщения Произведенные в предыдущем тестировании данные записываются в базу, откроем таблицу базы данных для проверки корректности отображения сохранных результатов, рисунок 22.  Рисунок 22 - Отображение истории Из приведенного выше рисунка видно, что все данные записываются в базу корректно. При завершении сеанса данные все также сохраняются и отобразятся при последующем запуске web-сайта. При тестировании ошибок и несоответствий не выявлено. 2.4. Проектная документация программного продукта Техническое задание: Введение Работа выполняется в рамках дипломной работы «Разработка web – сайта онлайн библиотеки». Данная сайт предназначен для поиска книг любого жанра и чтения в электронном варианте. Основание для разработки Программа разрабатывается на базе основной профессиональной образовательной программы специальности 09.02.03 «Программирование в компьютерных системах». Наименование работы «WeBook» Исполнители: Студент группы П-18-1к Федоров М. А. Соисполнители: отсутствуют Техническое требования Разработанная программа должна обеспечивать следующие пункты: Иметь удобный и интуитивно понятный пользовательский интерфейс Жанры книг Форму для связи Форму заказа Справочную систему Требования к упаковке программного продукта – программа поставляется на оптическом цифровом носителе в бумажном конверте, с указанием ФИО и темой разработки Рекомендуемая конфигурация: Сайт адаптирован под любую ОС (Windows, Android и тп). То есть открывается с любого устройства. Ввиду того что сайт кроссплатформенный, браузер для пользования – любой. Аннотация 1) Введение. 1.1) Область применения. 1.2) Краткое описание возможностей. 1.3) Уровень подготовки пользователя. 1.4) Перечень эксплуатационной документации, с которыми необходимо ознакомиться пользователю. 2) Назначение и условия применения. 2.1) Виды деятельности, функции, для автоматизации которых предназначено данное средство автоматизации. 2.2) Условия, при соблюдении (выполнении, наступлении), которых обеспечивается применение средства автоматизации, в соответствии с назначением. 3) Установка и запуск программного средства. 4) Организация работы. 3. ТЕХНИКА БЕЗОПАСНОСТИ 3.1. Общие требования безопасности при работе с компьютером К работе на персональном компьютере допускаются лица, прошедшие обучение безопасным методам труда, вводный инструктаж, первичный инструктаж на рабочем месте. При эксплуатации персонального компьютера на работника могут оказывать действие следующие опасные и вредные производственные факторы: Повышенный уровень электромагнитных излучений. Повышенный уровень статического электричества. Пониженная ионизация воздуха. Статические физические перегрузки. Перенапряжение зрительных анализаторов. Работник обязан: Выполнять только ту работу, которая определена его должностной инструкцией. Содержать в чистоте рабочее место. Соблюдать режим труда и отдыха в зависимости от продолжительности, вида и категории трудовой деятельности. Соблюдать меры пожарной безопасности. Рабочие места с компьютерами должны размещаться таким образом, чтобы расстояние от экрана одного видеомонитора до тыла другого было не менее 2,0 м, а расстояние между боковыми поверхностями видеомониторов - не менее 1,2 м. Рабочие места с персональными компьютерами по отношению к световым проемам должны располагаться так, чтобы естественный свет падал сбоку, преимущественно слева. Оконные проемы в помещениях, где используются персональные компьютеры, должны быть оборудованы регулируемыми устройствами типа: жалюзи, занавесей, внешних козырьков и др. Рабочая мебель для пользователей компьютерной техникой должна отвечать следующим требованиям, рисунок 26: Высота рабочей поверхности стола должна регулироваться в пределах 680 - 800 мм; при отсутствии такой возможности высота рабочей поверхности стола должна составлять 725 мм. Рабочий стол должен иметь пространство для ног высотой не менее 600 мм, глубиной на уровне колен не менее 450 мм и на уровне вытянутых ног не менее 650 мм. Рабочий стул (кресло) должен быть подъемно - поворотным и регулируемым по высоте и углам наклона сиденья и спинки, а также - расстоянию спинки от переднего края сиденья. Рабочее место должно быть оборудовано подставкой для ног, имеющей ширину не менее 300 мм, глубину не менее 400 мм, регулировку по высоте в пределах до 150 мм и по углу наклона опорной поверхности подставки до 20 градусов; поверхность подставки должна быть рифленой и иметь по переднему краю бортик высотой 10 мм. Рабочее место с персональным компьютером должно быть оснащено легко перемещаемым пюпитром для документов.  Рисунок 23 - Требования к рабочему месту Для нормализации аэроионного фактора помещений с компьютерами необходимо использовать устройства автоматического регулирования ионного режима воздушной среды (например, аэроионизатор стабилизирующий "Москва-СА1"). Женщины со времени установления беременности и в период кормления грудью к выполнению всех видов работ, связанных с использованием компьютеров, не допускаются. За невыполнение данной Инструкции виновные привлекаются к ответственности согласно правилам внутреннего трудового распорядка или взысканиям, определенным Кодексом законов о труде Российской Федерации. 3.2. Требования безопасности перед началом работы и во время работы Перед началом работы необходимо подготовить рабочее место. Отрегулировать освещение на рабочем месте, убедиться в отсутствии бликов на экране. Проверить правильность подключения оборудования к электросети. Проверить исправность проводов питания и отсутствие оголенных участков проводов. Убедиться в наличии заземления системного блока, монитора и защитного экрана. Протереть антистатической салфеткой поверхность экрана монитора и защитного экрана. Проверить правильность установки стола, стула, подставки для ног, пюпитра, угла наклона экрана, положение клавиатуры, положение "мыши" на специальном коврике, при необходимости произвести регулировку рабочего стола и кресла, а также расположение элементов компьютера в соответствии с требованиями эргономики и в целях исключения неудобных поз и длительных напряжений тела. Работнику при работе на ПК запрещается: Прикасаться к задней панели системного блока (процессора) при включенном питании. Переключать разъемы интерфейсных кабелей периферийных устройств при включенном питании. Допускать попадание влаги на поверхность системного блока (процессора), монитора, рабочую поверхность клавиатуры, дисководов, принтеров и других устройств. Производить самостоятельное вскрытие и ремонт оборудования. Работать на компьютере при снятых кожухах. Отключать оборудование от электросети и выдергивать электровилку, держась за шнур. Продолжительность непрерывной работы с компьютером без регламентированного перерыва не должна превышать 2-х часов. Во время регламентированных перерывов с целью снижения нервно - эмоционального напряжения, утомления зрительного анализатора, устранения влияния гиподинамии и гипокинезии, предотвращения развития познотонического утомления выполнять комплексы упражнений. 3.3. Требования безопасности в аварийных ситуациях Во всех случаях обрыва проводов питания, неисправности заземления и других повреждений, появления гари, немедленно отключить питание и сообщить об аварийной ситуации руководителю. Не приступать к работе до устранения неисправностей. При получении травм или внезапном заболевании немедленно известить своего руководителя, организовать первую доврачебную помощь или вызвать скорую медицинскую помощь. 3.4. Требования безопасности по окончанию работы Отключить питание компьютера. Привести в порядок рабочее место. Выполнить упражнения для глаз и пальцев рук на расслабление. 4. ЗАКЛЮЧЕНИЕ Целью данной дипломной работы была разработка web-сайта онлайн-библиотеки, под названием WeBook. В заключении необходимо отметить, что поставленная цель была выполнена путем решения таких задач, как: Произведен анализ предметной области. Изучены требования потенциальной целевой аудитории. Произведено проектирование сайта. Произведено кодирование и отладка программного продукта. Произведено тестирование программного продукта. Разработана документация на продукт. Таким образом, итоговым продуктом дипломной работы является web-сайт «онлайн-библиотеки» (WeBook). Web-сайт работает во взаимодействии с базой данных, разработанной в PHPMyAdmin, и полностью функционирует. Данный продукт прошел тестирование. 5. СПИСОК ЛИТЕРАТУРЫ Гаевский, А.Ю. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский. - М.: Триумф, 2018. - 464 c. Гончаров, А. Web-дизайн / А. Гончаров. - Москва: ИЛ, 2016. - 320 c. Дакетт, Джон HTML и CSS. Разработка и дизайн веб-сайтов (+ CD-ROM) / Джон Дакетт. - Москва: Наука, 2017. - 480 c. Дронов, В. JavaScript в Web-дизайне / В. Дронов. - М.: СПб: БХВ, 2017. - 880 c. Дронов, Владимир PHP, MySQL и Dreamweaver MX 2004. Разработка интерактивных Web-сайтов / Владимир Дронов. - М.: "БХВ-Петербург", 2016. - 448 c. Колисниченко, Д. PHP 5/6 и MySQL 6. Разработка Web-приложений / Д. Колисниченко. - М.: БХВ-Петербург, 2019. - 560 c. Колисниченко, Д.Н. PHP 5/6 и MySQL 6. Разработка Web-приложений (+ CD-ROM) / Д.Н. Колисниченко. - М.: БХВ-Петербург, 20196. - 364 c. Шкрыль, А. PHP - это просто. Программируем для Web-сайта / А. Шкрыль. - М.: БХВ-Петербург, 2018. - 368 c. ПРИЛОЖЕНИЕ А Техническое задание 1. Введение технического задания Наименование приложения: Web-сайт «онлайн-библиотеки» (WeBook). Краткая характеристика области применения: Web-сайт имеет интуитивно понятный и эргономичный интерфейс, несложный при овладении навыками работы с программой, что значительно сократит время обучения. Целевая аудитория: Web-сайт «онлайн-библиотеки» (WeBook) предназначен для людей, любящий чтение книг, пользователи имеют возможность прочитывать книги онлайн на сайте, а также заказывать печатную версию книг на сайте через специальную форму оставления заявки. Пользователь проходит авторизацию на сайте – выбирает нужные ему книги, затем через специальную форму связывается с администраторами для получения информации о приобретении товара. 2. Основание для разработки Разработка программного продукта осуществляется на основании приказа ГБПОУ НСО «Новосибирский строительно-монтажный колледж». Положение о дипломном проектировании. Тема дипломной работы: Разработка Web-сайта «онлайн-библиотеки». 3. Назначение разработки 3.1. Функциональное назначение Web-сайт предоставляет возможность чтение электронных версий книг, а тек же приобретения печатный экземпляров. 3.2. Эксплуатационное назначение Область свободного применения (физ. лица): Данный web-сайт дает возможность пользователю прочитывать выбранные книги на сайте в онлайн формате, а также заказывать печатные версии при помощи специальной формы оставления заявки. 4. Требования к программе или программному изделию 4.1. Требования к функциональным характеристикам Программный продукт должен иметь такие функции, как: Регистрация и авторизация пользователей на сайте. Прочтение книг онлайн. Возможность оставить заявку на получение печатной версии книги. 4.2. Требования к надежности Приложение должно отвечать таким требованиям, как: Система должна быть доступна (после установки работоспособность составит 99,9%). Предусмотреть сообщение об ошибки, если не все поля будут заполнены. После восстановления системы из состояния неработоспособности обработка данных должна производиться в том же режиме что и до сбоя, корректность отображения сохраненных данных. 4.3. Требования к составу и параметрам технических средств Рекомендуемая конфигурация: Процессор: линейка Intel Core/AMD Ryzen 3 3200U. Объем оперативной памяти: 8 Гб. Тип системы: 64 - разрядная операционная система, процессор x64. 4.4. Требования к информационной и программной совместимости Программа должна работать под управлением операционных систем Windows 7 и выше. 4.5. Требования к программной документации Состав программной документации: Техническое задание Руководство пользователя ПРИЛОЖЕНИЕ Б Руководство пользователя Web-сайт онлайн-библиотеки области свободного применения (WeBook) РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ Аннотация Web-сайт «онлайн-библиотеки» (WeBook) разработан как один из вариантов использования электронной библиотеки, возможности заказа книг. АИС области свободного применения. Наименование продукта: Web-сайт онлайн-библиотеки (WeBook). СОДЕРЖАНИЕ 2 Введение 2 3 2 1. Основная часть 2 5 2 2. Практическая часть 2 25 2 3. Техника безопасности 2 4. Заключение 2 5. Список литературы 2 Приложение А 2 Приложение Б 2 Приложение В 2 ВВЕДЕНИЕ 3 3. ТЕХНИКА БЕЗОПАСНОСТИ 40 4. ЗАКЛЮЧЕНИЕ 45 1.Введение 55 1.1. Область применения 55 1.2. Краткое описание возможностей 55 1.3. Уровень подготовки пользователя 55 1.4. Перечень эксплуатационной документации, с которыми необходимо ознакомиться пользователю 55 2.Назначение и условия применения 56 2.1. Виды деятельности, функции, для автоматизации которых предназначено данное средство автоматизации 56 3. Установка и запуск программного средства 57 Содержание 1)Введение 54 1.1) Область применения 54 1.2) Краткое описание возможностей 54 1.3) Уровень подготовки пользователя 54 1.4) Перечень эксплуатационной документации, с которыми необходимо ознакомиться пользователю 54 2) Назначение и условия применения 55 2.1) Виды деятельности, функции, для автоматизации которых предназначено данное средство автоматизации 55 2.2) Условия, при соблюдении (выполнении, наступлении), которых обеспечивается применение средства автоматизации, в соответствии с назначением 55 3) Установка и запуск программного средства 56 1.Введение 1.1. Область применения Web-сайт «онлайн-библиотеки» (WeBook) предназначен для людей, любящий чтение книг, пользователи имеют возможность прочитывать книги онлайн на сайте, а так же заказывать печатную версию книг на сайте через специальную форму оставления заявки. 1.2. Краткое описание возможностей Пользователь проходит авторизацию на сайте – выбирает нужные ему книги, затем через специальную форму связывается с администраторами для получения информации о приобретении товара. 1.3. Уровень подготовки пользователя Не требуется знаний языков программирования Требования: Пользователь ПК 1.4. Перечень эксплуатационной документации, с которыми необходимо ознакомиться пользователю Техническое задание Руководство пользователя Пояснительная записка Назначение и условия применения 2.1. Виды деятельности, функции, для автоматизации которых предназначено данное средство автоматизации Web-сайт предоставляет возможность выбора и чтения, а так же приобретения книг различных жанров и категорий. 2.2 Условия, при соблюдении (выполнении, наступлении), которых обеспечивается применение средства автоматизации, в соответствии с назначением Рекомендуемая конфигурация: Процессор: линейка Intel Core/AMD Ryzen 3 3200U. Объем оперативной памяти: 8 Гб. Тип системы: 64 - разрядная операционная система, процессор x64. Программа должна работать под управлением операционных систем Windows 7 и выше. Установка и запуск программного средства При открытии сайта открывается форма авторизации, где есть два сценария: первый это регистрация нового пользователя и второй это вход уже зарегистрированного ранее пользователя. После ввода все необходимый данных необходимо нажать кнопку «Войти».  Рисунок Б.1 – Форма входа в учетную запись При входе в учетную запись необходимо указать Имя пользователя и пароль.  Рисунок Б.2 – Форма регистрации учетной записи При регистрации учетной записи необходимо указать имя пользователя, электронную почту, и пароль с его повторением. После успешной авторизации открывается главная страница сайта. 4. Организация работы Для просмотра различных страниц сайта используется главное меню, расположенное вверху справа(рисунок Б.3).  Рисунок Б.3 – Главная страница сайта Перед прочтением книги, необходимо перейти в раздел «Книги», и выбрать интересующую. Имеется возможность фильтрации книг по жанрам(рисунок Б.4).  Рисунок Б.4 – Раздел «Книги» Перед заказом какой-либо книги пользователю необходимо оставить заявку через специальную форму на главной странице сайта(рисунок Б.5).  Рисунок Б.5 – Страница запчасти с формой заказа После оставления заявки ее просматривают администраторы после чего связываются с покупателем для уточнения информации. На этом заказ книги на сайте окончен. ПРИЛОЖЕНИЕ В Листинг Листинг файла «server.php»: session_start(); // initializing variables $username = ""; $email = ""; $errors = array(); // connect to the database $db = mysqli_connect('localhost', 'root', '', 'registration'); mysqli_set_charset($db, 'utf8'); if (isset($_POST['reg_book'])) { $clientName = mysqli_real_escape_string($db, $_POST['clientName']); $clientEmail = mysqli_real_escape_string($db, $_POST['clientEmail']); $clientNumber = mysqli_real_escape_string($db, $_POST['clientNumber']); $Book = mysqli_real_escape_string($db, $_POST['Book']); $query = "INSERT INTO books (clientName, clientEmail, clientNumber, Book) VALUES('$clientName', '$clientEmail', '$clientNumber', '$Book')"; mysqli_query($db, $query); header('location: index.php'); } // REGISTER USER if (isset($_POST['reg_user'])) { // receive all input values from the form $username = mysqli_real_escape_string($db, $_POST['username']); $email = mysqli_real_escape_string($db, $_POST['email']); $password_1 = mysqli_real_escape_string($db, $_POST['password_1']); $password_2 = mysqli_real_escape_string($db, $_POST['password_2']); // form validation: ensure that the form is correctly filled ... // by adding (array_push()) corresponding error unto $errors array if (empty($username)) { array_push($errors, "Username is required"); } if (empty($email)) { array_push($errors, "Email is required"); } if (empty($password_1)) { array_push($errors, "Password is required"); } if ($password_1 != $password_2) { array_push($errors, "Пароли не совпадают"); } // first check the database to make sure // a user does not already exist with the same username and/or email $user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1"; $result = mysqli_query($db, $user_check_query); $user = mysqli_fetch_assoc($result); if ($user) { // if user exists if ($user['username'] === $username) { array_push($errors, "Username already exists"); } if ($user['email'] === $email) { array_push($errors, "email already exists"); } } // Finally, register user if there are no errors in the form if (count($errors) == 0) { $password = md5($password_1);//encrypt the password before saving in the database $query = "INSERT INTO users (username, email, password) VALUES('$username', '$email', '$password')"; mysqli_query($db, $query); $_SESSION['username'] = $username; $_SESSION['success'] = "You are now logged in"; header('location: index.php'); } } // LOGIN USER if (isset($_POST['login_user'])) { $username = mysqli_real_escape_string($db, $_POST['username']); $password = mysqli_real_escape_string($db, $_POST['password']); if (empty($username)) { array_push($errors, "Username is required"); } if (empty($password)) { array_push($errors, "Password is required"); } if (count($errors) == 0) { $password = md5($password); $query = "SELECT * FROM users WHERE username='$username' AND password='$password'"; $results = mysqli_query($db, $query); if (mysqli_num_rows($results) == 1) { $_SESSION['username'] = $username; $_SESSION['success'] = "You are now logged in"; header('location: index.php'); }else { array_push($errors, "Неверное имя пользователя или пароль"); } } } ?> Листинг файла «index.php»: $username="root"; $password=''; $hostname = "localhost"; $db = mysqli_connect('localhost', 'root', '', 'registration'); $table = 'zakaz'; $query = "SELECT * FROM " . $table; mysqli_query($db, $query); if (!isset($_SESSION['username'])) { $_SESSION['msg'] = "You must log in first"; header('location: login.php'); } if (isset($_GET['logout'])) { session_destroy(); unset($_SESSION['username']); header("location: login.php"); } ?>  Выход 1 2 | ||||||||||||||||