Техническое задание и выбор средств реализации.

Содержание:

Введение

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

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

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

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

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

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

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

Во время реализации курсовой работы будут рассмотрены следующие вопросы:

1. Работа сайта на php
2. Статическая часть сайта, которая остаётся неизменной при переходах на страницы
3. Система динамично подгружаемого контента
4. Система авторизации пользователей
5. Слайдер актуальных скриншотов разработки проектов компании
6. Ссылка на местоположение компании с использованием сервисов «Яндекс»

Глава 1. Техническое задание и выбор средств реализации.

В качестве web-приложения в данном проекте будет выступать сайт компании Separate entertainment, созданный для отслеживания деятельности компании пользователями сети.

Для реализации статической части сайта был выбран текстовый редактор Notepad++

1.1 Текстовый редактор Notepad++

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

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

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

Основные преимущества редактора:

1. Интерфейс довольно прост и интуитивно понятен.
2. Подсветка кода

Точнее подсветка синтаксиса – выделение конструкций определенного языка цветами с целью улучшения визуального восприятия. Подсветка синтаксиса — это огромное преимущество для любого редактора, подсветка ускоряет процесс написания кода и поиска ошибок.

1. Работа практически с любыми форматами на любых языках

Редактор подсвечивает практически любой код: html, css, php, js и многие другие. Код определяется по расширению файла, то есть, если открыть файл index.html ему автоматически присваивается подсветка для html файлов. Если вы считаете, что редактор неверно определил синтаксис открытого документа – можно сменить его в пункте меню «синтаксисы». Кстати, если вы интересуетесь html советую изучить таблицу расшифровки html тегов.

1. Простая смена кодировки
2. Функция автозавершения

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

1. Окно поиска и замены

И многое другое.

В качестве серверной платформы был выбрать веб сервер XAMPP.

1.2 Веб сервер Apache

Apache - это кроссплатформенное ПО для серверов с открытыми исходными кодами, распространяемое в виде свободного софта (ограничения на скачивание и копирование отсутствуют). Первая версия веб-сервера была выпущена в 1995 году. С апреля 1996 года и до текущего момента официально считается самым востребованным веб-сервером в глобальной сети. Около 46% всех веб-проектов используют данное программное обеспечение.

Изначально разрабатывался как улучшенная версия NCSA HTTPd 1.3 (популярное серверное ПО до появления Apache). Проект продолжает свое развитие благодаря работе сообщества независимых разработчиков. Выбор в пользу Apache обусловлен его преимуществами: надежность, простота администрирования, модульная структура, гибкость и масштабируемость.

В данном проекте используется Apache версии 2.4.33.

1.3 База данных MySQL

Сам термин база данных (database) означает совокупность связанных между собой таблиц. Например, в одной таблице может храниться информация о пользователе, зарегистрированном на сайте, а в другой – информация о комментариях, которые оставил пользователь на сайте.

SQL – это структурированный язык запросов, созданный для управления реляционными БД. Он обладает широким перечнем возможностей, например, создать таблицу, редактировать и удалять данные, производить запросы из таблиц и многое другое.

База данных сайта MySQL – это система, предназначенная для хранения и обработки информации. Комплекс таблиц, взаимосвязанных между собой, для доступа к которым применяется система управления базами данных (СУБД) MySQL. По сути, MySQL – это специальная программа с открытым кодом, которая используется на сервере SQL. Данная программа не способна обрабатывать большое количество информации, однако она идеальна для небольших и крупных веб-ресурсов.

В данном проекте используется MySQL версии 8.0.11.

1.4 Веб сервер phpMyAdmin

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

Так же хотелось отметить, что приложение распространяется под лицензией GNU General Public License и поэтому многие другие разработчики интегрируют его в свои разработки, например XAMPP, Denwer, AppServ, Open Server.

В данном проекте используется phpMyAdmin версии 4.8.0.1.

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

1.5 PHP

PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) — это распространенный язык программирования общего назначения с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML.

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

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

Хотя PHP, главным образом, предназначен для работы в среде веб-серверов, область его применения не ограничивается только этим. Читайте дальше и не пропустите главу Возможности PHP либо, начните непосредственно с Вводного руководства, если вас интересует исключительно веб-программирование.

В данном проекте используется PHP версии 7.2.5

Все вышеперечисленные модули объедены одной общей сборкой под названием XAMPP.

1.6 Дистрибутив XAMPP

XAMPP полностью бесплатный и простой в установке дистрибутив Apache, содержащий MariaDB, PHP и Perl. XAMPP создан с открытым исходным кодом, чтобы быть невероятно простым в установке и в использовании.

XAMPP существует уже более 10 лет и постоянно обновляет свой продукт.

Мой выбор остановился именно на XAMPP из-за его простоты установки и настройки. Для управления сервером Apache и MySQL мною был написан bat файл для простого удаления, перезапуска и других функций, предложенных в технической документации XAMPP (рис. 1).

Рисунок 1. Окно запуска/установки дистрибутива

Так же ниже представлен полный список всех включающих в XAMPP модулей (рис. 2).

Рисунок 2. Сведения о сборке

Глава 2. Описание модулей серверной части программы и их взаимодействие.

2.1 Модули серверной части программы и их взаимодействие

Веб браузеры взаимодействуют с веб-серверами при помощи гипертекстового транспортного протокола (HTTP). Запрос включает в себя URL, определяющий затронутый ресурс, метод, определяющий требуемое действие (например, получить, удалить или опубликовать ресурс) и может включать дополнительную информацию, закодированную в параметрах URL (пары поле-значение, оправленные как строка запроса), как POST запрос (данные, отправленные методом HTTP POST), или в куки-файлах. Веб серверы ожидают сообщений с клиентскими запросами, обрабатывают их по прибытию и отвечают веб-браузеру при помощи ответного HTTP сообщения. Ответ содержит строку состояния, показывающую, был ли запрос успешным, или нет, например, «HTTP/1.1 200 OK» в случае успеха.

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

Серверная часть написана на языке PHP и развернута на веб сервере Apache (рис.3).

Рисунок 3. Серверная часть сайта

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

Рисунок 4. Схема взаимосвязи программных модулей

Управляющий модуль - активирует основные программные модули, содержит меню сайта «Separate». Это главная страница сайта с которой можно сделать переход на любую другую запрашиваемую страницу при условии, что меню сайта остаётся статической при переходе на любую другую страницу. Именно к этой странице первым делом подключается база данных и выводит весь контент на экран.

Модуль проверки данных регистрации - отвечает за правильность вводимой информации при регистрации, а именно проверяет длину вводимых данных (поле имя – не меньше 5 символов и не больше 20; поле логин – не меньше 5 символов и не больше 20; поле пароль – так же не меньше 5 символов и не больше 20.

Модуль проверки данных авторизации - отвечает за правильность вводимого логина и пароля. После того, как пользователь введет свои данные и нажмет кнопку «Авторизоваться», будет отправлен запрос в базу на проверку наличия таких данных в базе и проверку правильности написания этих данных. Если пользователь совершит ошибку в поле логина или пароля, или же попробует войти без регистрации, то выведется окно с ошибкой (рис.5)

Рисунок 5. Окно ошибки авторизации

После чего пользователь должен повторно выполнить вход с систему.

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

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

2.2 Дерево функции

Дерево функций представляет собой иерархическую структуру.

Все действия (функции) программного продукта можно разделить на подмножества основных функций.

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

Состав и классификация функций разрабатываемого модуля представлены в виде дерева функций (рис 6).

Рисунок 6. Дерево функций

Глава 3. Описание структуры базы данных и ее функций.

База данных сайта Separate состоит из 2 таблиц – это «userlistdb» и «news» (рис. 7)

Рисунок 7. База данных

Таблица userlistdb создана для ведения учёта зарегистрированных пользователей и состоит она из 4 полей (рис. 8):

Поле «full_name» - полное имя пользователя, вводимое при регистрации.

Поле «email» - почта зарегистрированного пользователя.

Поле «username» - тот же логин для авторизации пользователя на сайте.

Поле «password» - пользовательский пароль для авторизации на сайте.

Рисунок 8. Таблица «userlistdb»

Таблица «news» отвечает за подгрузку новостей на сайт их подробное описание. Таблица состоит из 6 полей (рисунок 9):

Поле «id» - уникальный идентификатор новости

Поле «title» - «шапка новости», он же заголовок

Поле «img» - путь к изображению новости

Поле «mini_decs» - краткое описание новости

Поле «description» - полное описание новости (отображается при переходе на вкладку «подробнее»)

Поле «about» - дата релиза новости

Рисунок 9. Таблица «news»

Глава 4. Описание структуры клиентской части.

Сайт Separate состоит из 12 страниц, каждая из которых содержит в себе актуальную информацию о компании:

1. Главная страница
2. Новости компании
3. Подробное описание каждой новости
4. Таблица продуктов
5. Системные требования для каждого разрабатываемого продукта
6. Галерея проектов
7. Команда разработчиков
8. Контакты компании
9. Авторизация пользователя
10. Регистрация пользователя
11. Окно информации об авторизованном пользователе
12. Страница ошибки 404

Сайт разрабатывался и тестировался только в рамках локальной сети (рис. 10).

Рисунок 10. Путь сайта компании

4.1 Главная страница

Главная страница сайта содержит в себе информацию о ближайших релизах компании в виде таблицы (рис. 11):

1. Дата релиза в формате – ММ.ГГ
2. Краткое описание релиза
3. Степень готовности

Рисунок 11. Главная страница сайта Separate

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

Шапка сайта состоит из блока с логотипом и блока с меню навигации по сайту. В самом низу представлен «подвал» компании, где так же указано название сайта и текущий год.

4.2 Новости компании

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

Рисунок 12. Страница «Новости компании»

Рисунок 13. Страница «GGJ Tech»

Так как боле подробное описание — это тоже динамическая подгрузка данных из базы и существует всего одна страница, управляющая этой информацией вне зависимости от того, сколько этих новостей, у него стоит идентификатор для отображения подробной информации – это id новости (рис. 14).

Рисунок 14. Идентификатор новости

Так же, если пользователь захочет получить информацию о неизвестном продукте, например, это будет пустой id, которого нет в базе, то он получит сл. информацию - Ошибка 404 (рис. 15).

Рисунок 15. Страница «Ошибка 404»

4.3 Таблица продуктов

Таблица продуктов содержит в себе техническую информацию о выпускаемых продуктах компании и имеет такую же таблицу как на главное странице (рис. 16).

Рисунок 16. Страница «Таблица продуктов»

Таблица включает в себя сл. столбцы:

1. Название продукта – его наименование и логотип
2. Информация о проекте, где содержатся данные о версии, текущей/разрабатываемой, в зависимости от цвета, дата релиза/запланированного релиза, вес проекта.
3. Описание – краткое описание проекта с ссылкой на страницу с системными требованиями (рис. 17). В ней указаны минимальные и рекомендуемые системные требования для запуска проекта на компьютере пользователя.

Рисунок 17. Системные требования проекта «Heritage»

4.4 Галерея проектов

Галерея проектов содержит в себе слайдер с 4 скриншотами самого глобально разрабатываемого проекта компании – Heritage. Он был реализован на языке JS.

Рисунок 18. Страница «Галерея проектов»

4.5 Команда

Страница Команда включает в себя информацию о всех разработчиках компании (рис. 19):

1. Должность сотрудника
2. Фото сотрудника
3. Фамилия и имя

Рисунок 19. Страница «Команда»

При наведении на фото сотрудника оно разворачивается из круглого состояния в квадратное (рис. 20).

Рисунок 20. Анимация при наведении на фото

4.6 Контакты

Раздел Контакты содержит в себе информацию о расположении офиса компании (карты Яндекс), а так же данные директора для связи с ним (рис.21).

Рисунок 21. Страница «Контакты»

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

4.7 Авторизация

Страница Авторизация содержит в себе форму для входа на сайт, где пользователю предлагается ввести свои учётные данные (рис. 22)

Рисунок 22. Форма авторизация пользователя

Если таких нет, то ему будет предложено пройти форму регистрации, где он должен будет ввести свое полное ФИО, email, Имя пользователя, пароль (рис.23).

Рисунок 23. Форма регистрации пользователя

После успешно внесённых данных пользователя оповестят о том, что он прошёл авторизацию и его автоматически перекинет на главную страницу компании (рис. 24).

Рисунок 24. Форма перехода на главную страницу после авторизации

4.8 Инструкция пользователя

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

Рисунок 25. Процедура регистрации

После чего пользователь получит доступ к просмотру новостей.

Заключение

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

Результатом курсовой работы является сайт компании Separate, реализованный на языках Html, Css, JS, PHP с использованием базы данных.

В процессе выполнения работы были решены сл. вопросы:

1. Работа сайта на php

2. Статическая часть сайта, которая остаётся неизменной при переходах на страницы

3. Система динамично подгружаемого контента

4. Система авторизации пользователей

5. Слайдер актуальных скриншотов разработки проектов компании

6. Ссылка на местоположение компании с использованием сервисов «Яндекс»

Список использованной литературы

1. https://asonin.ru/sozdanie-sajtov-blogov/sajt-na-php.html
2. http://weblecture.ru/node/148
3. https://it-black.ru/php-dinamicheskoe-sozdanie-stranits/
4. https://webformyself.com/sozdanie-sistemy-avtorizacii/
5. https://html5book.ru/osnovy-html/
6. https://learn.javascript.ru/js
7. https://internet--technologies-ru.turbopages.org/s/internet-technologies.ru/articles/sozdaem-svoy-slayder-dlya-sayta.html