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

Разработка сайта кинотеатра «Пролетарий»

Содержание:

Введение

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

Целью работы является разработка веб-сайта кинотеатра «Пролетарий».

Объект исследования - кинотеатр.

Предмет исследования – сайт кинотеатра.

1. Основная часть

1.1. Требования к приложению

1. Имя сайта (название домена).

www.polisinema.ru

Если домен polisinema будет занят, возможна замена имени.

• 2. Название сайта.

Сайт кинотеатра "Пролетарий".

• 3. Назначение сайта (цель создания сайта).

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

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

  • Главная страница имеет название index. *
  • Наличие авторской страницы по ссылке © на авторской странице поставить аватар и написать короткую информацию о себе.
  • Верстка сайта блочная с применением тегов HTML5.
  • кодирования страницы имеет кириллицу (charset = utf-8).
  • применить таблицу стилей в отдельном файле. описание стилей с странице перенести в файл таблицы стилей *. css. названия - латиницей, содержательные (. red. big и т.п.).
  • Наличие   основных теги в в коде (<html><head><body><div><p><h1> ... <h6> и т.д.).
  • Парные теги имеют закрываться (<p></ p>). хранить вложенность тегов (<div><p> Текст </ p></ div>).
  • Основные модули страницы должны быть закомментированные.
  • названия файлов (страниц, картинок, скриптов, стил ов) и папок - латиницей, малый регистр, без пробелов (для визуального разграничение применять символы «-» или «_»).
  • Графика, относится к дизайну страниц содержится в отдельной директории. Оставшаяся часть изображений относятся к наполнению страниц - в других директориях с содержательными названиями.
  • Единый стиль для всех страниц сайта. Одинаковое размещения основных блоков сайта (заголовка, рубрик, логотипа).
  • Наличие навигации на всех страницах сайта. Исключение только для страниц, открываются в новому окне и содержат информацию, которая может восприниматься и не в контексте сайта (увеличенная картинка, информация о разработчике, статья и т.д.)

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

  • Основой для сайта могут быть как любая система управления контентом (CMS - content management system), так и самостоятельно создан сайт (с использованием HTML, PHP, MySQL и других веб-технологий).
  • обязательным условием является создание собственного содержания на сайте (для расширения функционала сайта).
  • разрешается использование шаблона для сайта сторонней разработки, но в таком случае необходимо модифицировать минимум 30% шаблона, в соответствии с пожеланиями заказчика или руководителя).
  • При использование любых посторонних разработок необходимо указывать все источники использование.
  • все разделы и страницы сайта должны быть выполнены в одном оформлении (шаблоне), исключением могут быть только отдельные функциональные блоки, например форум.
  • все страницы сайта должны быть сопровождены понятным меню для удобной навигации по сайту.
  • Необходимо выполнение основных требований современных веб серверов для возможности дальнейшего размещения разработанных сайтов в сети Интернет и их оптимального отображения:
    • все имена фалов должны состоять из маленьких букв латинского алфавита и (или) цифр, без пропусков;
    • файлы графических изображений должны иметь разрешающую способность не более, чем 2048 на 1536 п (больше размер только в исключительных случаях) для полноформатных изображений; и не более чем 640 на 480 п для эскизов на сайте. допустимые форматы файлов - JPG, PNG, GIF, использование формата BMP не допускается;
    • в случае необходимости использования аудио - и (или) видео - информации максимально оптимизировать размер файлов. Для аудио - допустимый формат MP3, для видео - FLV, WMV. В обоих случаях использовать Flash проигрыватели для воспроизведения информации.
  • Конечным результатом работы над сайтом является размещение его в сети Интернет (до момента предзащиты квалификационной работы).

Запрещено:

  • Использование платных систем управления контентом, скриптов, шаблонов сайтов и т.п. (в том числе так называемых "nulled" версий).
  • Использование веб-сервисов, предназначенных для создания сайтов с использованием закрытых систем управления контентом (ucoz.ru и других).

1.2. Анализ исходных данных

Задача: Сделать современный, динамичный сайт с запоминающимся дизайном. Уменьшить количество отказов.

Проектирование

Основная целевая аудитория:

  • Распределение по возрастам: от 18 до 35 лет > 60%
  • Распределение по полу: 54% - мужчины. 46% - женщины

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

http://cases.cmsmagazine.ru/upload/13b853b40fa7c78208768d275d572375.jpg

Рис.1.1. Макет сайта

Дизайн

В результате получили вот такой дизайн главной страницы:

http://cases.cmsmagazine.ru/upload/4178345368bf819986fed1c02e0de8e9.jpg

Рис.1.2. Главная страница сайта

http://cases.cmsmagazine.ru/upload/29fe547ecddb4fb37e40833f351d9509.jpg

Рис.1.3. Сайт кинотеатра

При наведении на на постер фильма он подсвечивается по сторонам цветами самого постера. В браузерах, использующих WebGL, мы используем его для эффекта подсвечивания. Всего сделано 3 различных варианта подсветки: WebGl, Canvas и CSS3

http://cases.cmsmagazine.ru/upload/14f88e7a8445912ec35800c59ab7f3d9.jpg

Рис.1.4. Постеры

Применили аналогичный эффект для видео:

http://cases.cmsmagazine.ru/upload/e7bddd5f0e2ea7e9748368fc8dedec54.jpg

Рис.1.5. Видео

Страница с выбранным фильмом

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

http://cases.cmsmagazine.ru/upload/4c015640c8b42e7037ff4958902398d3.jpg

Рис.1.6. Страница фильма с голосованием

Кадры из фильма

http://cases.cmsmagazine.ru/upload/d0d6b38d2183ea46cd0ecb764ad7e3b0.jpg

Рис.1.7. Кадры из фильма

Отзывы

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

http://cases.cmsmagazine.ru/upload/fab4f70d6d04a42d22b329dd9f3fb940.jpg

Рис.1.8. Отзывы

Расписание

При заходе на любую страницу где присутствует расписание должно показыватся расписание на сегодня. Рядом есть кнопка "на неделю" при клике на которую будет открыватся расписание на ближайшие 7 дней. Сортировка в расписании идет под дням. 

http://cases.cmsmagazine.ru/upload/42623dcb26eb4df9f3d3a76e347061ce.jpg

Рис.1.9. Расписание

Другие страницы

http://cases.cmsmagazine.ru/upload/06b73c58a4b265316ecf4aef09f0bb51.jpg

Рис.1.10. Анонс

Программирование

Выполненно на базе системы управления UMI-CMS. Сайт работает на выделенном серевере на котором настроили:

  • статическое кеширование страниц и отдача их сервером nginx 
  • выполнена серверная оптимизация картинок
  • вместо mysql используется percona server - самая надежная и быстрая БД
  • настроен сервер очередей beanstalkd для взаимодействия различных программ, он позволяет оптизировать несрочные задачи для лучшего использования ресурсов сервера

Еще Используются:

  • memcached – лучший сервер кеширования данных
  • xslcache для оптимизации работы шаблонизатора XSLT
  • xcache для увеличения производительности и кеширования php

1.3. Разработка приложения

Этапы создания сайта:

Создание менеджера разделов

Раздел – это верхний объект в структуре содержимого. Потом в раздел будут добавлены категории.

manager_razdelov

Рис. 1.11. Этап создания сайта

Управление разделом (опции и параметры)

Чтобы создать новый раздел, необходимо нажать кнопку sozd «Создать».

sozdat_razdel

Рис. 1.12.Этап создания сайта

Менеджер категорий

Для работы с категориями необходимо перейти на страницу «Менеджер категорий».

Можно нажать на главной странице панели кнопку «Категории» или в основном меню выбрать «Материалы» и затем «Менеджер категорий».

manager_kategorii

Рис. 1.13.Этап создания сайта

Управление категорией (опции и параметры)

Чтобы создать новую категорию, необходимо нажать значок sozd «Создать».

sozdat_kategoriy

Рис. 1.14.Этап создания сайта

Менеджер материалов

Для работы с заметками нужно перебежать на страничку «Менеджера материалов».

Для сего возможно надавить на ключевой страничке панели кнопку «Добавить материал» или же в ведущем меню избрать «Материалы» и вслед за тем «Менеджер материалов».

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

content_1

Рис. 1.15.Этап создания сайта

Управление материалом (опции и параметры)

Для создания нового материала необходимо нажать на кнопку «Создать».

Открывшуюся страницу можно условно разделить на 4 вкладки:

  • Заголовок
  • Параметры - Статьи
  • Параметры - Расширенные
  • Мета - данные

content_2

Рис. 1.16.Этап создания сайта

Менеджер меню

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

Открыв окно «Менеджер меню» (с помощью кнопки «Меню» на панели управления) можно увидеть страницу с уже созданными  типами меню.

menus_manager

Рис. 1.17.Этап создания сайта

Для создания нового меню нужно нажать на кнопку sozd «Создать».

detali_menu

Рис. 1.18.Этап создания сайта

На открывшейся странице «Детали меню» необходимо заполнить поля:

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

Управление пунктом меню

Для того, чтобы попасть на страницу «Пункты меню» необходимо в «Менеджере меню» нажать на кнопку punct_menu«Пункты меню» в одноименном столбце.

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

menus_punkti

Рис. 1.19.Этап создания сайта

Модули

Модули считаются наиболее маленькими расширениям. Их используют в первую очередь для отражения инфы (текстовой и графической), а еще для взаимодействия с юзерами, к примеру, голосование. Есть большое количество модулей, выполняющих эти задачки как отражение инфы о погоде, курсах денежных единиц и т.п. Модули имеют все шансы быть помещены в всякий части странички. Пространство размещения модуля именуется убеждением.
Кое-какие модули предусмотрены для работы с конкретным компонентом. К примеру, модуль регистрации разрешает юзеру регистрироваться на веб-сайте.
Для управления модулями перейдите в ведущем меню в «Расширения» и вслед за тем изберите «Модули».

Модули делятся на административные (отображаемые в административной панели, вкладка "Административная панель") и модули, выводимые на страницах сайта (вкладка "Сайт").

admin_pane_1
Рис. 1.20.Этап создания сайта

Модули сайта

Для того чтобы перейти на страницу «Менеджер модулей», нужно выбрать в основном меню «Расширения» и затем «Модули». Чтобы выбрать модули, выводимые на страницах сайта, выберите вкладку "Сайт").

admin_pane_1

Рис. 1.21.Этап создания сайта

Ниже приведен список модулей сайта, предустановленных в нашей версии Joomla:

  1. Главное меню - отображает главное меню (mainmenu) на сайте.
  2. Голосование - модуль, выводящий на сайт блок для голосования посетителей.
  3. Меню пользователя - модуль выводит на сайт меню пользователя (usermenu)
  4. Авторизация - модуль выводит на сайт форму входа в систему управления контентом.
  5. Последние новости - модуль вывода на сайт последних материалов указанной категории.
  6. Статистика - модуль по умолчанию отключен. Отображает статистику сайта. Его включение может создать дополнитльную нагрузку на сервер баз даных.
  7. Популярные - модуль выводит на сайт список самых посещаемых страниц сайта.
  8. Архив - модуль по умолчанию отключен. Показывает список календарных месяцев, которые содержат архивные материалы.
  9. Разделы - модуль по умолчанию отключен. Отображает список разделов из баз данных. Если в общих настройках включена опция "Показывать закрытые ссылки", список будет ограничен разделами, разрешенным к публикации.
  10. Новости - Модуль flash-новостей при каждом обновлении страницы произвольно отображает один или несколько из опубликованных материалов в указанной категории. Он также может отображать множество материалов в горизонтальном или вертикальном виде.
  11. Поиск - модуль вывода формы поиска на сайте.
  12. Верхнее меню - отображает главное меню (topmenu) на сайте.
  13. Баннеры - модуль отвечает за вывод баннеров на сайт.
  14. Реклама- модуль по умолчанию отключен. Он выводит рекламный баннер на заданной позиции сайта.

Заключение

В ходе курсового проектирования разработано Интернет-приложение для представительства кинотеатра.

В курсовом проектерассмотрено:

• функциональное назначение приложения;

• тип приложения;

• порядок разработки приложения;

• структура приложения;

• порядок разработки;

• результаты разработки.

Созданный сайт может быть использован в реальных условиях.

Список литературы

1. Буч Г. Язык UML: руководство пользователя / Г. Буч, Д. Рамбо, И.Якобсон // [пер. с англ. Н. Мухина]. – Москва. – 2016. – 493 с.

2. Вендров А.М. CASE-технологии. Современные методы и средства проектирования информационных систем. - М.: Финансы и статистика. – 2014.

3. Голицина О. Л. Основы алгоритмизации и программирования /О.Л.Голицина, И.И.Попов// Учебное пособие. - М.: ФОРУМ: ИНФРА-М. – 2015.

4. Дивак М.П. Системний аналіз та проектування КІС /М.П.Дивак//Навчальний посібник – Т.: Економічна думка. – 2014.

5. Мэтт Зандстра. PHP: объекты, шаблоны и методики программирования, 3-е издание = PHP Objects, Patterns and Practice, Third Edition. — М.: «Вильямс», 2011. — С. 560

6. Синицын С. В., Налютин Н. Ю. Верификация программного обеспечения. — М.: БИНОМ, 2016. — 368 с

Приложение

<?php

?>

<div id="secondary" class="widget-area" role="complementary">

<?php do_action( 'before_sidebar' ); ?>

<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

<aside id="search" class="widget widget_search">

<?php get_search_form(); ?>

</aside>

<aside id="archives" class="widget">

<h1 class="widget-title"><?php _e( 'Archives', 'sporty' ); ?></h1>

<ul>

<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>

</ul>

</aside>

<aside id="meta" class="widget">

<h1 class="widget-title"><?php _e( 'Meta', 'sporty' ); ?></h1>

<ul>

<?php wp_register(); ?>

<li><?php wp_loginout(); ?></li>

<?php wp_meta(); ?>

</ul>

</aside>

<?php endif; // end sidebar widget area ?>

</div><!-- #secondary .widget-area -->

<div id="tertiary" class="widget-area" role="supplementary">

<?php dynamic_sidebar( 'sidebar-2' ); ?>

</div><!-- #tertiary .widget-area -->

<body>

<!-- Shell -->

<div class="shell">

<!-- Header -->

<div id="header">

<h1 id="logo"><a href="#">"Елbт"</a></h1>

<!-- Cart -->

<div id="cart">

<a href="#" class="cart-link"></a>

<div class="cl">&nbsp;</div>

<span><strong>4</strong></span>

&nbsp;&nbsp;

<span><strong>$250.99</strong></span>

</div>

<!-- End Cart -->

<!-- Navigation -->

<div id="navigation">

<ul>

<li><a href="#" class="active"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

</div>

<!-- End Navigation -->

</div>

<!-- End Header -->

<!-- Main -->

<div id="main">

<div class="cl">&nbsp;</div>

<!-- Content -->

<div id="content">

<!-- Content Slider -->

<div id="slider" class="box">

<div id="slider-holder">

<ul>

<li><a href="#"><img src="css/images/slide1.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/slide1.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/slide1.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/slide1.jpg" alt="" /></a></li>

</ul>

</div>

<div id="slider-nav">

<a href="#" class="active">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

</div>

</div>

<!-- End Content Slider -->

<!-- Products -->

<div class="products">

<div class="cl">&nbsp;</div>

<ul>

<li>

<a href="#"><img src="css/images/big1.jpg" alt="" /></a>

<div class="product-info">

<h3></h3>

<div class="product-desc">

<h4></h4>

<p><br />amet</p>

<strong class="price">$58.99</strong>

</div>

</div>

</li>

<li>

<a href="#"><img src="css/images/big11.jpg" alt="" /></a>

<div class="product-info">

<h3></h3>

<div class="product-desc">

<h4></h4>

<p><br />amet</p>

<strong class="price">$58.99</strong>

</div>

</div>

</li>

<li class="last">

<a href="#"><img src="css/images/big111.jpg" alt="" /></a>

<div class="product-info">

<h3></h3>

<div class="product-desc">

<h4></h4>

<p><br />amet</p>

<strong class="price">$58.99</strong>

</div>

</div>

</li>

</ul>

<div class="cl">&nbsp;</div>

</div>

<!-- End Products -->

</div>

<!-- End Content -->

<!-- Sidebar -->

<div id="sidebar">

<!-- Search -->

<div class="box search">

<h2><span></span></h2>

<div class="box-content">

<form action="" method="post">

<label></label>

<input type="text" class="field" />

<label></label>

<select class="field">

<option value="">-- --</option>

</select>

<div class="inline-field">

<label></label>

<select class="field small-field">

<option value="">$10</option>

</select>

<label>to:</label>

<select class="field small-field">

<option value="">$50</option>

</select>

</div>

<input type="submit" class="search-submit" value="" />

<p>

<a href="#" class="bul"></a><br />

</p>

</form>

</div>

</div>

<!-- End Search -->

<!-- Categories -->

<div class="box categories">

<h2><span></span></h2>

<div class="box-content">

<ul>

</ul>

</div>

</div>

<!-- End Categories -->

</div>

<!-- End Sidebar -->

<div class="cl">&nbsp;</div>

</div>

<!-- End Main -->

<!-- Side Full -->

<div class="side-full">

<!-- More Products -->

<div class="more-products">

<div class="more-products-holder">

<ul>

<li><a href="#"><img src="css/images/small1.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small2.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small3.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small4.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small5.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small6.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small7.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small1.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small2.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small3.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small4.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small5.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small6.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small7.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small1.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small2.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small3.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small4.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small5.jpg" alt="" /></a></li>

<li><a href="#"><img src="css/images/small6.jpg" alt="" /></a></li>

<li class="last"><a href="#"><img src="css/images/small7.jpg" alt="" /></a></li>

</ul>

</div>

<div class="more-nav">

<a href="#" class="prev">previous</a>

<a href="#" class="next">next</a>

</div>

</div>

<!-- End More Products -->

<!-- Text Cols -->

<div class="cols">

<div class="cl">&nbsp;</div>

<div class="col">

<h3 class="ico ico1"></h3>

<p>.</p>

<p class="more"><a href="#" class="bul"></a></p>

</div>

<div class="col">

<h3 class="ico ico2"></h3>

<p></p>

<p class="more"><a href="#" class="bul"></a></p>

</div>

<div class="col">

<h3 class="ico ico3"></h3>

<p></p>

<p class="more"><a href="#" class="bul"></a></p>

</div>

<div class="col col-last">

<h3 class="ico ico4"></h3>

<p>.</p>

<p class="more"><a href="#" class="bul"></a></p>

</div>

<div class="cl">&nbsp;</div>

</div>

<!-- End Text Cols -->

</div>

<!-- End Side Full -->

<!-- Footer -->

<div id="footer">

<p class="left">

<a href="#"></a>

<span>|</span>

<a href="#"></a>

<span>|</span>

<a href="#"></a>

<span>|</span>

<a href="#"></a>

<span>|</span>

<a href="#"></a>

</p>

<p class="right">

&copy;

Design by <a href="http://bayguzin.ru/" target="_blank" title="">bayguzin.ru</a>

</p>

</div>

<!-- End Footer -->

</div>

<!-- End Shell -->

</body>

</html>