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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML5

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

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

CSS

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

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

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

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

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

JavaScript

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

Bootstrap

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

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

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

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

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

создание качественных адаптивных сайтов
современный дизайн (единый стиль оформления HTML элементов и компонентов).
является кроссбраузерным и кроссплатформенным (работает на всех популярных операционных системах и браузерах (Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera и пр.).
является открытым и бесплатным, что означает, что его можно использовать бесплатно как для личного, так и для коммерческого использования.

MySQL

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

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

PHP

PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) – это распространенный язык программирования общего назначения с открытым исходным кодом. 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 модулем.

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

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

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

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

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

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

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