Файл: Разработка сайта компании «Separate».pdf

Модуль проверки данных регистрации - отвечает за правильность вводимой информации при регистрации, а именно проверяет длину вводимых данных (поле имя – не меньше 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

Приложения

Форма подключения к БД

<?php

require("constants.php");

$connection = mysqli_connect($host, $user, $pass, $db_name);

if (mysqli_connect_errno()) {

die("Data Base connection failed: " . mysqli_connect_error() . " (" . mysqli_connect_errno() . ")");

}

else

{

//echo "Connection = success!\n" . mysqli_get_host_info($connection) . "<br />";

}

mysqli_query($connection, "SET NAMES геа8");

?>

Проверка доступа к данным

<?php

$host = "localhost";

$user = "root";

$pass = "";

$db_name = "userlistdb";

?>

Управляющая страница сайта «Главная»

<html>

<head>