Файл: Разработка сайта футбольной компании SHARK (HTML5 JavaScript Bootstrap).pdf

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

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

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

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

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

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

На сайте необходимо представить информацию о компании

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

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

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

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

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

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

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

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

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

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

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

HTML5

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

Во сети интернет долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

CSS

Спецификация CSS3 – это неоспоримое будущее в области декоративного оформления веб-страниц, и ее разработка еще далека от завершения. Большинство модулей все еще продолжает совершенствоваться и модифицироваться. Это означает, что CSS3 испытывает такие же сложности, как и HTML5. Веб-разработчикам нужно решать, какие возможности использовать, а какие игнорировать, а также каким образом заполнить зияющие пробелы в браузерной поддержке. [2]

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

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

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

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

JavaScript

JavaScript – это язык программирования, который позволяет веб-страницам отвечать на действия пользователя дальше базового уровня. Он был создан в начале 90-х фирмой Netscape. Название javascript наводит на мысли о связи с языком java, который также может использоваться в веб-программировании, и, действительно, javascript разрабатывался во многом с опорой на язык Java, но следует всё же помнить, что это совершенно разные языки. Скрипты, написанные на javascript, выполняются на стороне клиента (т. е. на компьютере пользователя), и не просто на стороне клиента, а в самом браузере, поэтому не требуется никаких дополнительных программ, никаких плагинов и т. п., скрипт можно просто вставить в html-код страницы, и он будет выполняться в любом браузере. Javascript - простой и удобный язык, позволяющий легко управлять содержимым веб-страницы, отслеживая самые различные действия пользователя, и реагируя на это. Благодаря этому, javascript практически не имеет конкурентов в своей области применения и является первым языком, изучение которого нужно начинать веб-разработчику.

Bootstrap

Бутстрап — это css и js-фреймворк, по сути, набор файлов с готовым кодом. Цель разработчиков практически любого фреймворка — упрощение разработки сайта как самому себе, так же и другим, кому будет доступен данный инструмент. В случае с Bootstrap он полностью бесплатный, так что вы можете использовать его любым образом, редактировать исходный код и как угодно переделывать фреймворк.

Классы Bootstrap можно разбить на 3 группы:

классы для создания сетки.
классы для стилизации контента.
служебные.

Кроме классов во фреймворке в Bootstrap имеются ещё и компоненты (готовые объекты интерфейса). Это кнопки, хлебные крошки, формы, навигационные меню, выпадающие списки, всплывающие панели и др.

Применение фреймворка во время создания сайтов позволит решить многие задачи:

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

MySQL

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

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

PHP

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

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

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

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

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

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

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

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

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

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

Так главная страница – модуль index.php. Страница «О Компании» - модуль aboutus.php.

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

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

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

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

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

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

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

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

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

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

<?php

$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 – в настоящее время работу с сайтом осуществляет рядовой пользователь.

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