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

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

Содержание:

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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).

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

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

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

Каждый ресурс Интернета содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя 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, вызываемый перед началом обработки каждого скрипта или вывода страницы сайта.

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

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 = "kino_orbita";

const DB_USER = "root";

const DB_HOST = "127.0.0.1";

const DB_PASS = "";

?>

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

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

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

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

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

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

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

Описание сущности Жанр (Таблица 3.1).

Таблица . – Атрибуты сущности Жанр

Атрибут

Ключ

Значение

Домен

Код жанра

+

Идентификатор записи

Число

Наименование

Наименование жанра

Текст

Описание сущности Производство (Таблица 3.2).

Таблица . – Атрибуты сущности Производство

Атрибут

Ключ

Значение

Домен

Код производства

+

Идентификатор записи

Число

Наименование

Наименование производителя фильма

Текст

Описание сущности Фильм (Таблица 3.3).

Таблица . – Атрибуты сущности Фильм

Атрибут

Ключ

Значение

Домен

Код фильма

+

Идентификатор записи

Число

Название

Наименование фильма

Текст

Год выпуска

Год производства

Число

Анонс

Краткий анонс, описание произведения

Текст

Режиссер

Режиссер фильма

Текст

Актеры

Актерский состав

Текст

Продолжительность

Продолжительность в минутах

Число

Возраст

Возрастные ограничения

Текст

Обложка

Имя файла с обложкой

Текст

Код жанра

Жанр, к которому относится

Число

Код производства

Производитель фильма

Число

Описание сущности Пользователь (Таблица 3.4).

Таблица . – Атрибуты сущности Пользователь

Атрибут

Ключ

Значение

Домен

Код пользователя

+

Идентификатор записи

Число

E-Mail

e-mail пользователя

Текст

Пароль

Пароль для входа в систему

Текст

Роль

Роль пользователя

Число

Имя

Имя пользователя

Текст

Описание сущности Сеансы (Таблица 3.5).

Таблица . – Атрибуты сущности Сеансы

Атрибут

Ключ

Значение

Домен

Код записи

+

Идентификатор записи

Число

Дата/время

Дата, время трансляции

Датавремя

Код фильма

Фильм, показываемый во время сеанса

Число

Описание сущности Посещение (Таблица 3.6).

Таблица . – Атрибуты сущности Посещение

Атрибут

Ключ

Значение

Домен

Код пользователя

+

Пользователь, посетивший сеанс

Число

Код записи

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

Число

Код типа

Тип выкупленного места

Число

Билет

Номер места

Число

Стоимость

Стоимость билета

Число

Описание сущности Типы мест (Таблица 3.7).

Таблица . – Атрибуты сущности Типы мест

Атрибут

Ключ

Значение

Домен

Код типа

+

Идентификатор записи

Число

Ряд

Название ряда

Текст

К-во мест

Количество мест в ряду

Число

Цена

Стоимость билета для данного типа

Число

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

Рисунок . – Инфологическая схема база данных

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

Физическое представление схемы базы данных приведено далее (Рисунок 3.2).

Рисунок . – Физическая схема базы данных

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

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

Приведем пример кода для процедуры afishaSel:

CREATE DEFINER = 'root'@'%'

PROCEDURE kino_orbita.afishaSel(IN _snDate date)

BEGIN

SELECT

seance.id_sn,

seance.snDate,

seance.id_fl,

films.flName,

films.flYear,

films.flNotes,

films.flRegisser,

films.flActors,

films.flTime,

films.flAge,

films.id_gr,

genree.grName,

films.id_pr,

produced.prName,

films.flCover

FROM seance

INNER JOIN films

ON seance.id_fl = films.id_fl

INNER JOIN genree

ON films.id_gr = genree.id_gr

INNER JOIN produced

ON films.id_pr = produced.id_pr

WHERE date (snDate) = _snDate

ORDER BY snDate;

END

Данная процедура используется для получения информации о демонстрации фильмов на определенную дату.

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

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

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

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

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

Рисунок . – Меню обычного пользователя

Появившийся новый пункт меню История служит для просмотра истории посещений кинотеатра пользователем. Для завершения работы необходимо использовать кнопку Выход.

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

Если воспользоваться входом в систему под аккаунтом администратора меню системы кинотеатра примет следующий вид (Рисунок 4.3).

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

В данном виде меню появится пункт Управление. При помощи данного пункта администратор системы имеет возможность вносить изменения в справочники системы, регистрировать новые фильмы, назначать показы сеансов.

Рисунок . – Меню управления информационной системой

Данный пункт имеет вид выпадающего списка (Рисунок 4.4).

Пример работы со справочником Жанров приведен на рисунке (Рисунок 4.5).

Рисунок . – Справочник жанров

Кнопка Добавить осуществляет переход на форму запроса и добавления новой информации в справочник жанров (Рисунок 4.6).

Рисунок . – Форма добавления нового жанра

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

Подобным образом построена работа с прочими справочниками системы.

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

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

Рисунок . – Меню информационной системы кинотеатра

Для входа в систему служит кнопка вход, для регистрации – Регистрация. По кнопке регистрация происходит переход на форму регистрации в системе (Рисунок 4.8).

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

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

Рисунок . – Афиша кинотеатра

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

Для приобретения билета на сеанс необходимо воспользоваться кнопкой Купить билет, располагаемой под изображением с афишей фильма (Рисунок 4.10).

Рисунок . – Покупка билетов

Заключение

В ходе выполнения данной работы были решены следующие задачи

  • дано общее описание автоматизируемого объекта;
  • построена модель базы данных;
  • спроектировано и реализовано приложение для работы и управления созданной базой данных с применением web-технологий.

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

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

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

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

Литература

  1. Пирогов, В.Ю. Информационные системы и базы данных: организация и проектирование: Учебное пособие / В.Ю. Пирогов. - СПб.: БХВ-Петербург, 2009. - 528 c.
  2. Вадим Дунаев. HTML, скрипты и стили. BHV, Санкт-Петербург, 2015. ISBN 978-5-9775-3317-1.
  3. Н. Закас, Джереми Мак-Пик, Джо Фосетт. Ajax для профессионалов. Перевод: Александр Киселев. Символ, Санкт-Петербург, 2015. ISBN 978 5 93286-081-6.
  4. К. Блессинг, Роб Черни, К. Шмитт. Применение Web-стандартов CSS и Ajax для больших сайтов. Корона-Век, Санкт-Петербург, 2011. ISBN 978 5 7931-0844-7.
  5. Adobe Dreamweaver CS6. Официальный учебный курс. Эксмо, Москва, 2014. ISBN 978-5-699-69655-0.
  6. Чои Вин. Как спроектировать современный сайт. Питер, Санкт-Петербург, 2011. ISBN 978-5-459-00579-0.
  7. А. Годин, К. Джонсон, К. Уоррен, М. Уэбер, Брайан Хоган. Книга веб-программиста: секреты профессиональной разработки веб-сайтов. Питер, Санкт-Петербург, 2013. ISBN 978-5-459-01510-2.
  8. Алан Купер, Дэйв Кронин, Кристофер Носсел, Роберт Рейман. Алан Купер об интерфейсе. Основы проектирования взаимодействия. Символ, Санкт-Петербург, 2015. ISBN 978-5-93286-132-5.
  9. Стив Круг. Как сделать сайт удобным. Юзабилити по методу Стива Круга. Питер, Санкт-Петербург, 2010. ISBN 978-5-49807-515-0.
  10. Кирилл Сухов. HTML 5. Путеводитель по технологии. ДМК, Москва, 2013. ISBN 978-5-94074-910-3.

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

Index.php

<?php

/**

* Created by PhpStorm.

* User: admin

* Date: 29.03.2019

* Time: 22:50

*/

include_once ("chkSession.php");

include_once ("header.php");

include_once ("showMenu.php");

?>

<div class="jumbotron">

<h4>В фойе работает новый аттракцион.</h4>

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

<hr class="my-4">

<p class="lead">

<a class="btn btn-primary btn-lg" href="oasis.php" role="button">Подробнее</a>

</p>

</div>

<?php

include_once ("footer.php");

header.php

<?php

/**

* Created by PhpStorm.

* User: admin

* Date: 16.03.2019

* Time: 12:11

*/

?>

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Кинотеатр &laquo;Орбита&raquo;</title>

<meta charset="utf-8">

<!-- подключить Bootstrap -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<!-- Подключить стили-->

<link rel="stylesheet" href="css/kino.css">

<script src="js/kino.js"></script>

</head>

<body>

<div class="container">

<div class="headphones bg-white">

<div class="row">

<div class="col-md-3 col-sm-6 text-sm-center text-md-left">

<img src="img/logos.png" alt="" class="img-fluid pt-3">

</div>

<div class="col-md-3 mt-auto mb-auto text-md-center col-sm-6 text-sm-center">

<span class="align-middle">

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">

Схема зала

</button>

</span>

</div>

<div class="col-md-3 text-md-right col-sm-6 text-sm-center mb-auto mt-auto align-middle">

<span class="notes">Время работы:</span><br>

<i class="far fa-clock"></i>

<span class="information">Пн-Вс: 9:00-21:00</span><br>

<span class="notes">Наш адрес:</span><br>

<i class="fas fa-map-marker-alt"></i>

<span class="information">ул. Пушкина, 18</span>

</div>

<div class="col-md-3 mt-auto mb-auto col-sm-6 text-md-right text-sm-center align-middle">

<span class="notes">Касса:</span><br>

<i class="fas fa-phone-volume"></i>

<span class="information">8 800 125-00-19</span><br>

<span class="notes">Администратор:</span><br>

<i class="fas fa-phone-volume"></i>

<span class="information">8 800 125-12-08</span><br>

</div>

</div>

</div>

<!-- Modal -->

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

<div class="modal-dialog modal-dialog-centered modal-lg" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLongTitle">Схема зрительного зала</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body">

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

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</div>

</div>

</div>

showMenu.php

<?php

/**

* Created by PhpStorm.

* User: admin

* Date: 16.03.2019

* Time: 18:31

*

* вывод меню системы

*/

?>

<header class="bg-secondary">

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

<!-- Brand -->

<!-- <a class="navbar-brand" href="index.php">-->

<!-- <img src="img/logos.png" alt="logo" class="img-fluid" width="50">-->

<!-- </a>-->

<!-- Toggler/collapsibe Button -->

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

<span class="navbar-toggler-icon"></span>

</button>

<!-- Navbar links -->

<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="afisha.php">Афиша</a>

</li>

<li class="nav-item">

<a class="nav-link" href="aboutus.php">О&nbsp;Кинотеатре</a>

</li>

<?php

if($id_us>0 && $usRole==0) {

?>

<li class="nav-item">

<a class="nav-link" href="history.php">История</a>

</li>

<?php

}

?>

<?php

if($usRole > 0) {

?>

<!-- Dropdown -->

<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="producer.php">Производители</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="placeType.php">Посадочные места</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="films.php">Фильмы</a>

<a class="dropdown-item" href="seance.php">Сеансы</a>

</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

/**

* Created by PhpStorm.

* User: admin

* Date: 16.03.2019

* Time: 12:16

*/

?>

<footer class="bg-dark">

<div class="row">

<div class="col-md-6">

<p><strong>Адрес:</strong></p>

<p>

<span>248000, г. Строгин</span><br>

<span>ул. Тимирязевская, 18</span>

</p>

</div>

<div class="col-md-6">

<p><strong>Контакты</strong></p>

<p>

<span><em>E-Mail:</em> orbita@kino.ru</span><br>

<span><em>Касса:</em> 8 800 125-00-19</span><br>

<span><em>Администратор:</em> 8 800 125-12-08</span>

</p>

</div>

</div>

</footer>

</div>

</body>

</html>