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

Разработка серверных приложений для WEB - Разработка сайта спортшколы SportLife

Содержание:

Введение

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

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

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

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

Техническое задание

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

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

За наполнение сайта необходимой информацией отвечает администратор, в обязанности которого входит:

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

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

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

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

Рисунок 1.1 – Схема вариантов использования

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

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

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

Средства реализации

HTML5

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. [2] Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), ещё с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

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

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

Цели HTML5

Кратко цели html5 можно назвать так:

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

CSS

СSS (англ. Cascading Style Sheets - каскадные таблицы стилей) формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида web-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML - документам, например, к SVG или XUL.

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

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

JavaScript

JavaScript - прототипно - ориентированный сценарный язык программирования. Является диалектом языка ECMAScript. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.

Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности web - страницам. Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса. На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в web-разработке.

Bootstrap

Bootstrap — фреймворк, набор HTML+CSS инструментов и шаблонов для верстки и более эффективного и быстрого создания сайтов и веб-приложений более эффективно и быстро.

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

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

MySQL

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

PHP

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

PHP отличается от JavaScript тем, что PHP-скрипты выполняются на сервере и генерируют HTML, который посылается клиенту.

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

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

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

Рисунок 2.1 – Структурная схема сайта

Каждый ресурс Интернета имеет некоторое количество направленных на определенную тематику рубрик, объединённых между собой гиперсвязями. Как правило, ссылки на все сегменты вебсайта с короткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html) или как в нашем случае index.php, так как основой создания сайта служит язык php. Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html.

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

Структурная схема сайта показана на рисунке (Рисунок 2.1).

Каждая страница ресурса представлена отдельным php модулем.

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

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

Так модуль showMenu.php – используется для показа меню системы, модуль header.php – для вывода заголовка сайта, footer.php – для отображения подвала.

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

Сессии – это группы переменных, которые хранятся на сервере, но относятся к одному уникальному посетителю. Повторю, это ключевой момент: сессии хранятся на сервере.

Чтобы обеспечить взаимодействие каждого посетителя с его данными из его сессии используется файл cookie, команду создать который PHP даёт сам, вам об это беспокоится не нужно. Этот cookie имеет значение только для сервера и не может быть использован для получения данных о пользователе.

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

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

В данном модуле содержится следующий код:

session_start();

$id_us = 0;

$usRole = 0;

$usName = "";

if(isset($_SESSION["id_us"]))

$id_us = (int)$_SESSION["id_us"];

if(isset($_SESSION["usRole"]))

$usRole = (int)$_SESSION["usRole"];

if(isset($_SESSION["usName"]))

$usName = $_SESSION["usName"];

Здесь переменные $id_us, $usRole, $usName используются для получения информации о коде пользователя, его имени и правах входа. Если переменная $id_us после проверки равна 0 – значит пользователя в системе не зарегистрировано.

Если $id_us > 0 и $гsRole>0 значит в систему вошел администратор, если при не нулевом $id_us значение $usRole равно 0 – в настоящее время работу с сайтом осуществляет рядовой пользователь.

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

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

<?php

const USER = 0;

const ADMIN = 1;

const DB_NAME = "box";

const DB_USER = "root";

const DB_HOST = "127.0.0.1";

const DB_PASS = "";

Права администратора выдаются только через БД сайта.

Описание структуры базы данных и ее функций

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

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

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

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

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

Построим описание атрибутов сущностей разрабатываемой системы.

(Таблица 3.1).

Описание сущности Категории

Атрибут	Ключ	Значение	Домен
Код категории	+	Идентификатор записи	Число
Наименование		Наименование категории	Текст

(Таблица 3.2).

Описание сущности Пользователи

Атрибут	Ключ	Значение	Домен
Код пользователя	+	Идентификатор записи	Число
Имя		Имя пользователя	Текст
E-mail		E-mail пользователя	Текст
Пароль		Пароль пользователя	Текст
Группа		Группа пользователя	Число
Статус		Статус оплаты пользователем	Текст
Роль		Роль пользователя	Текст

(Таблица 3.3).

Описание сущности Инструкторы

Атрибут	Ключ	Значение	Домен
Код инструктора	+	Идентификатор записи	Число
Имя		Имя инструктора	Текст
Группа		В какой группе инструктор преподает	Текст
E-mail		E-mail инструктора	Текст
Автомобиль		Автомобиль инструктора	Текст
Коробка передач		Коробка передач на автомобиле	Текст
Номер телефона		Номер телефона инструктора	Текст

(Таблица 3.4)

Описание сущности Ученики

Атрибут	Ключ	Значение	Домен
Код пользователя	+	Идентификатор записи	Число
Имя		Имя ученика	Текст
E-mail		E-mail ученика	Текст
Статус		Статус оплаты ученика	Текст
Группа		Группа ученика	Текст
Номер телефона		Номер телефона ученика	Текст

На основе построенных описаний сущностей и их атрибутов построим схему базы данных, представленную далее (Рисунок 3.1).

Рисунок 3.1 – Схема базы данных

Для доступа и управления данными в программном комплексе системы Спорт школа «SportLife», на уровне бизнес-логики приложения используются хранимые процедуры MySQL.

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

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

Описание интерфейса «Обычный пользователь»

Начало работы начинается с главной страницы сайта (Рисунок 4.1).

Рисунок 4.1 – Главная страница сайта

Для получения доступа к функционалу пользователя, необходимо воспользоваться кнопкой «Вход», которая направит пользователя на форму запроса данных для входа в систему. (Рисунок 4.2)

Рисунок 4.2 – Вход в систему

Появившийся новый пункт “Ваши данные”, служит для просмотра имени, e-mail, группы и статуса оплаты обучения для обучающегося. Для завершения работы необходимо использовать кнопку Выйти.

Описание интерфейса «Администратор»

Если воспользоваться входом в систему под аккаунтом администратора я использовал следующий код:

<?php
if($usRole > 0) {
?>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Панель администратора
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="genree.php">Справочник</a>
<a class="dropdown-item" href="placeType.php">Ручная запись</a>
<div class="dropdown-divider"></div>

</div>
</li>
<?php
}
?>

Рисунок 4.3 – Меню администратора

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

Рисунок 4.4 – Новый справочник

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

Для удобного просмотра сайта, можно использовать меню системы. (4.5).

Рисунок 4.5 – Меню сайта

Так же присутствует кнопка «вход», чтобы войти в свой личный кабинет и регистрация, для регистрации новых пользователей. (Рисунок 4.6).

Рисунок 4.6 – Меню авторизации пользователя.

По кнопке регистрация происходит переход на форму регистрации в системе (Рисунок 4.7).

Рисунок 4.7 – Форма регистрации

Рисунок 4.8– Страница с ценами

Заключение

В процессе выполнения работы была создана база данных, с применением среды MySQL. Реализация проекта велась с применением языков CSS, HTML, PHP, а также частично использованием языка SQL запросов для изменения информации в связанной базе данных системы.

Результатом работы явилось достижение целей:

практические навыки создания web-ресурса с применением языка программирования PHP.
закрепление теоретического материала по дисциплинам, связанных с изучением баз данных;

Литература

Чои Вин. Как спроектировать современный сайт. Питер, Санкт-Петербург, 2011. ISBN 978-5-459-00579-0.
Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2011. - 416 c. ISBN 978-5-9775-0596-3.
Adobe Dreamweaver CS6. Официальный учебный курс. Эксмо, Москва, 2014. ISBN 978-5-699-69655-0.
Н. Закас, Джереми Мак-Пик, Джо Фосетт. Ajax для профессионалов. Перевод: Александр Киселев. Символ, Санкт-Петербург, 2015. ISBN 978 5 93286-081-6.
Вадим Дунаев. HTML, скрипты и стили. BHV, Санкт-Петербург, 2015. ISBN 978-5-9775-3317-1.
Алан Купер, Дэйв Кронин, Кристофер Носсел, Роберт Рейман. Алан Купер об интерфейсе. Основы проектирования взаимодействия. Символ, Санкт-Петербург, 2015. ISBN 978-5-93286-132-5
Кирилл Сухов. HTML 5. Путеводитель по технологии. ДМК, Москва, 2013. ISBN 978-5-94074-910-3.

Исходные коды

<?php
include_once ("header.php");
include_once ("showMenu.php");
?>

<div class="jumbotron">
<h4>Спортиная школа бокса "SportLife"</h4>
<p>

</p>

<img src="img/box2.jpg" alt="" class="img-fluid">

<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" href="info.php" role="button">Цены</a>
</p>
</div>

<?php

include_once ("footer.php");

showMenu.php

<?php

?>

<header class="bg-secondary">
<nav class="navbar navbar-expand-md navbar-green bg-dark sticky-top">





<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>


<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav main-menu">
<li class="nav-item">
<a class="nav-link" href="index.php">Главная</a>
</li>
<li class="nav-item">
<a class="nav-link" href="info.php">Цена</a>
</li>
<li class="nav-item">
<a class="nav-link" href="zapis.php">Запись на первую бесплатную тренировку</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.php">О нас</a>
</li>
<?php
if($usRole > 0) {
?>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Панель администратора
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="genree.php">Справочник</a>
<a class="dropdown-item" href="placeType.php">Ручная запись</a>
<div class="dropdown-divider"></div>

</div>
</li>
<?php
}
?>
</ul>
<ul class="navbar-nav ml-auto admin-menu">
<?php
if($id_us == 0) {
?>
<li class="nav-item">
<form class="form-inline" action="register.php" method="get">
<button class="btn btn-outline-warning">Регистрация</button>
</form>
</li>
<li class="nav-item ml-1">
<form class="form-inline" action="enter.php" method="get">
<button class="btn btn-success">Вход</button>
</form>
</li>
<?php
}
else {
?>
<li class="nav-item">
<form class="form-inline" action="exit.php">
<button class="btn btn-danger" type="submit">Выход</button>
</form>
</li>
<?php
}
?>
</div>
</ul>
</nav>
</header>

footer.php

<?php

?>

<footer class="bg-dark">
<div class="row">
<div class="col-md-6">
<p><strong>Адрес школы :</strong></p>
<p>
<span>г. Москва </span><br>
<span>ул. Измайловкий вал , 1</span>
</p>
</div>
<div class="col-md-6">
<p><strong>Контакты:</strong></p>
<p>
<span><em>E-Mail:</em> braicov2018@gmail.com</span><br>
<span><em>Телефон:</em> +7 (999)-999-99-77</span><br>
</p>
</div>
</div>
</footer>
</div>

</body>
</html>