Курсовая Абдулганиев

МИНИСТЕРСТВО ОБРАЗОВАНИЯ, НАУКИ И МОЛОДЕЖИ РЕСПУБЛИКИ КРЫМ
ГБОУВО РК «КРЫМСКИЙ ИНЖЕНЕРНО-ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ

ИМЕНИ ФЕВЗИ ЯКУБОВА»
Факультет экономики, менеджмента и информационных технологий

Кафедра прикладной информатики
Направление подготовки 09.03.03 Прикладная информатика

Профиль «Прикладная информатика в информационной сфере»
КУРСОВОЙ ПРОЕКТ
по дисциплине «Программирование и поддержка веб-приложений»
НА ТЕМУ
«Разработка веб-сайта по продаже туристических путевок»
Студента IV курса
группы И-1-16
очной формы обучения
Абдулганиева Сейдамета
Арсеновича
___________________________
__
(подпись)
Руководитель:
преп. Абдулаева Усние
Бахтияровна
___________________________
__
(подпись)
Симферополь – 2019
2
СОДЕРЖАНИЕ
ВВЕДЕНИЕ..............................................................................................................3
ГЛАВА 1 ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ WEB-РАЗРАБОТКИ5
1.1 Сущность web-сайтов.................................................................................5
1.2 Разновидности сайтов.................................................................................6
1.3 Обзор популярных языков веб-программирования...............................10
1.4 Анализ аналогов веб-сайта по продаже туристических путевок.........12
Вывод к первой главе............................................................................................13
ГЛАВА 2. ПРОЕТИРОВАНИЕ И РАЗРАБОТКА WEB-РЕСУРСА................14
2.1. Проектирование структуры и разработка проекта...................................14
2.2. Интерфейс веб-ресурса...............................................................................18
Вывод к второй главе............................................................................................26
ЗАКЛЮЧЕНИЕ.....................................................................................................27
СПИСОК ИСПОЛЬЗОВАНЫХ ИСТОЧНИКОВ...............................................28
ПРИЛОЖЕНИЕ 1..................................................................................................30
Обработка ставки пользователя........................................................................30
ПРИЛОЖЕНИЕ 2..................................................................................................31
Фрагмент файла classicedition.js.......................................................................31
ПРИЛОЖЕНИЕ 3..................................................................................................32
Html-разметка блока панели управления.........................................................32
ПРИЛОЖЕНИЕ 4..................................................................................................34
Исходный код.....................................................................................................34
3
ВВЕДЕНИЕ
Актуальность темы. С каждым днем глобальная сеть Интернет
развивается все больше и больше. Появляются новые отрасли в
программирования, усовершенствуются старые. С развитием сети Интернет,
в программировании резко начала выделяться отрасль web-
программирование. Данная отрасль развивается достаточно быстро и
прогрессивно меняет всемирную паутину. С развитием web-
программирования поваляются множество веб-ресурсов разнообразной
тематики.
Сегодня колоссальными темпами развивается туризм. Все больше
людей отправляются за границу. Кто-то желает получить новые впечатления
и эмоции, кто-то позагорать на жарком солнышке где-нибудь в Таиланде, а
кто-то просто хочет отметить знаменательную дату. Для удовлетворения
желаний нашего населения были созданы турагентства, а также веб-ресурсы,
где можно заказать путевку онлайн. Это очень удобно, ведь не выходя из
дома, ты можешь заказать билет в любую точку мира.
В данном курсовом проекте было рассмотрено создание веб-сайта по
продаже туристических путевок. Данная тема актуальна, поскольку
путешествия привлекают и будут привлекать все больше людей с каждым
днем.
Объектом исследования является процесс разработки веб-сайта.
Предметом исследования является разработка веб-сайта по продаже
туристических путевок.
Целью курсового проекта является разработка веб-сайта по продаже
туристических путевок.
Для достижения поставленной цели необходимо решить ряд
следующих задач:
 Проанализировать электронные источники и литературу
 Рассмотреть и проанализировать существующие веб-сайты;
4
 Спроектировать и разработать веб-сайт по продаже туристических

путевок и обеспечить удобный и понятый пользовательский
интерфейс.
Структура курсового проекта. Курсовой проект содержится из
введения, двух глав, основной части, заключения, одного приложения,
списка использованных источников, которые включаются в себя
шестнадцать наименований, а также из двенадцати рисунков, семнадцати
листингов и четырех приложений.
В введении была проанализирована актуальность выбранной темы
курсового проекта. Так же были поставлены цели и задачи для выполнения
проекта.
Первая глава содержится из теоретических аспектов веб-разработки,
рассмотрения шаблон проектирования, сравнения отличий веб-сайта от веб-
приложений, языков программирования, ориентированных на веб-
разработку, JavaScript библиотек и проанализированы аналоги.
Во второй главе описывается проектирование и основная логика веб-
проекта и подробное описание пользовательского интерфейса, а также форма
обратной связи.
5
ГЛАВА 1 ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ WEB-РАЗРАБОТКИ
1.1 Сущность web-сайтов
Веб-сайт – это система электронных документов частного лица или

организации в компьютерной сети под общим адресом (доменным именем
или IP-адресом). По умолчанию подразумевается, что сайт располагается в
сети Интернет. Все веб-сайты в общем составляют Всемирную паутину.
Протокол HTTP был разработан для прямого доступа клиентов к веб-сайтам.
Сейчас, когда говорят «своя страничка в Интернет», то подразумевается, что
пользователь имеет целый веб-сайт или личную страницу в составе чужого
сайта. Кроме веб-сайтов в сети Интернет так же доступны WAP-сайты,
предназначенные для мобильных телефонов.
Изначально веб-сайты представляли собой совокупности статических
документов. Сейчас же большинству из них характерна динамичность
и интерактивность. Сейчас специалисты называют это термином веб-
приложение — готовый программный комплекс для решения задач веб-
сайта. Веб-приложение входит в состав веб-сайта, но веб-приложение без
данных сайтом является только технически.
Со времен создания глобальной сети Интернет прошло много времени,
и многие уже узрели проблемы, связанные с ним в плане безопасности.
Поэтому кроме HTTP и WAP, появилось и защищенное Https соединение.
Данное соединение является схожестью HTTP, но обладает высокой
степенью безопасности. Обычно применяется в интернет-магазинах, или
личных кабинетах. Сейчас все больше сайтов используют данный метод
соединения.
Страницы сайтов - это набор текстовых файлов, которые размечены
на языке HTML. После загрузки пользователем файлов на его компьютер,
они понимаются и обрабатываются браузером и выводятся на средство
отображения пользователя (монитор, экран, принтер).
6
Страницы сайтов могут быть как простым статичным набором файлов,

так и создаваться специальной компьютерной программой на сервере. Такие
страницы могут быть сделаны на заказ для отдельного сайта, либо быть
готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из
них могут обеспечить владельцу сайта возможность гибкой настройки
структурирования и вывода информации на веб-сайте. Такие управляющие
программы называются системами управления содержимым (CMS).
Многие сайты содержат подразделы, ориентированные целиком на ту
или иную аудиторию. Такие разделы называются версиями сайта. Аудитория
может различаться:
 по виду используемого оборудования;
 по используемому языку аудитории.
К примеру, известны так называемые мобильные версии сайта, которые
предназначаются для работы с ними с использованием смартфона. Сайты
могут иметь языковые версии (русскоязычная, англоязычная и другие).
1.2 Разновидности сайтов
Типы интернет ресурсов:

По доступности сервисов:
 Открытые - все сервисы полностью доступны для любых
посетителей и пользователей.
 Полуоткрытые - для доступа необходимо зарегистрироваться
(обычно бесплатно).
 Закрытые - полностью закрытые служебные сайты организаций
(в том числе корпоративные сайты), личные сайты частных лиц. Такие сайты
доступны для узкого круга пользователей. Доступ новым пользователям
обычно даётся через т. н. инвайты (приглашения).
По физическому расположению:
 Общедоступные сайты сети Интернет.
7
 Локальные сайты - доступны только в пределах локальной сети.

Это могут быть как корпоративные сайты организаций, так и сайты частных
лиц в локальной сети провайдера.
Информационные ресурсы:
 Тематический сайт - сайт, предоставляющий специфическую
узкотематическую информацию по какой-либо теме.
 ·Тематический портал - это очень большой веб-ресурс, который
предоставляет исчерпывающую информацию по определённой тематике.
Порталы похожи на тематические сайты, но дополнительно содержат
средства взаимодействия с пользователями и позволяют пользователям
общаться в рамках портала (форумы, чаты) - это среда существования
пользователя.
Интернет-представительства владельцев бизнеса (торговля и
услуги, не всегда связанные напрямую с Интернетом):
 Сайт-визитка - содержит самые общие данные о владельце сайта
(организация или индивидуальный предприниматель): вид деятельности,
история, прайс-лист, контактные данные, реквизиты, схема проезда.
Специалисты размещают своё резюме (то есть подробная визитная карточка).
 Представительский сайт - так иногда называют сайт-визитку с
расширенной функциональностью: подробное описание услуг, портфолио,
отзывы, форма обратной связи и т. д.
 Корпоративный сайт - содержит полную информацию о
компании-владельце, услугах/продукции, событиях в жизни компании.
Отличается от сайта-визитки и представительского сайта полнотой
представленной информации, зачастую содержит различные
функциональные инструменты для работы с контентом (поиск и фильтры,
календари событий, фотогалереи, корпоративные блоги, форумы). Может
быть интегрирован с внутренними информационными системами компании-
владельца (КИС, CRM, бухгалтерскими системами). Может содержать
8
закрытые разделы для тех или иных групп пользователей -- сотрудников,

дилеров, контрагентов и пр.
 Каталог продукции - в каталоге присутствует подробное
описание товаров/услуг, сертификаты, технические и потребительские
данные, отзывы экспертов и т. д. На таких сайтах размещается информация о
товарах/услугах, которую невозможно поместить в прайс-лист.
 Интернет-магазин - сайт с каталогом продукции, с помощью
которого клиент может заказать нужные ему товары. Используются
различные системы расчётов: от пересылки товаров наложенным платежом
или автоматической пересылки счета по факсу до расчётов с помощью
пластиковых карт.
 Промо-сайт - сайт о конкретной торговой марке или продукте, на
таких сайтах размещается исчерпывающая информация о бренде, различных
рекламных акциях (конкурсы, викторины, игры и т. п.).
 ·Сайт-квест - интернет-ресурс, на котором организовано
соревнование по разгадыванию последовательно взаимосвязанных
логических загадок.
Веб-сервис - сайт, созданный для выполнения каких-либо задач или
предоставления услуг в рамках сети WWW:
 Доска объявлений представляет собой ресурс, на котором есть
возможность размещения публичного объявления о продаже или покупке
товаров и услуг, также возможно оставить какую-либо информацию краткого
содержания.
 Каталог сайтов - это ресурс, на котором размещаются сайты и
блоги, например, Open Directory Project. Каталоги бывают платные и
бесплатные. Также каталоги могут способствовать продвижению ресурса,
который размещается в каталоге сайтов.
 Поисковые сервисы - например, Yahoo!, Google, Bing, Яндекс.
 Почтовый сервис - например, Mail.ru и Gmail.
9
 Веб-форумы
 Блоговый сервис
 Файлообменный пиринговый сервис - например, Bittorrent.
 Облачное хранилище данных - например, OneDrive.
 Сервис редактирования данных - например, Google Docs.
 Фотохостинг - например, Picnik, ImageShack, Panoramio,
Photobucket.
 Видеохостинг - например, YouTube, Dailymotion.
 Социальные медиа.
 Комбинированные веб-сервисы (Социальные сети) - например,
Facebook, Twitter.
 Комбинированные веб-сервисы (Специализированные
социальные сети) - например, MySpace, Flickr.
По технологии отображения:
 Статические - состоящие из статичных html (htm, dhtml) страниц,
составляющих единое целое. Пользователю выдаются файлы в том виде, в
котором они хранятся на сервере.
 Динамические - состоящие из динамичных html (htm, dhtml)
страниц-шаблонов, информации, скриптов и прочего в виде отдельных
файлов. Содержимое генерируется по запросу специальными скриптами
(программами) на основе других данных из любого источника
 Сайты, созданные с применением т. н. Flash-технологий, когда
весь сайт располагается на одной веб-странице, предназначенной
исключительно для загрузки Flash-файла, а вся навигация и контент
реализованы в самом Flash-ролике.
По типам макетов:
Фиксированной ширины (англ. rigid fixed) -- размеры элементов
страницы имеют фиксированное значение, независящее от разрешения,
10
размера, соотношения сторон экрана монитора и размеров окна обозревателя,

задаётся в абсолютных значениях -- PX (пиксели).
 Резиновый макет (англ. adaptable fluid) -- размеры несущих
элементов, значения ширины, задаются относительным значением -- %
(проценты), страницы отображаются во весь экран монитора по ширине.
 Динамично эластичный (англ. dynamically expandable elastic) --
размеры большинства элементов задаются относительными значениями --
EM и % (проценты). Все относительные пропорции размеров элементов
всегда остаются неизменными, независимо от разрешения, размера,
соотношения сторон экрана монитора, размеров окна и масштаба окна
обозревателя. И всегда постоянны относительно окна обозревателя.
1.3 Обзор популярных языков веб-программирования
HTML – это язык разметки гипертекстов, предназначенный для

создания интернет страниц и обеспечения нормального расположения в
документе таблиц, заголовков, списков, картинок и прочего.
Язык HTML состоит из 3 основных компонентов:
 тег(дескриптор);
 атрибут(аргумент);
 значение.
При работе с языком HTML пользователь не будет видеть всю
сложность кодировки, благодаря её интерпретации с интернет-браузерами,
которая формирует окончательный вид документа, красивый и читабельный
для человеческого глаза.
PHP
Язык программирования PHP один из самых популярных языков в
WEB-программировании. На этом языке написаны такие социальные сети,
11
как ВКонтакте и Facebook. Главный плюс PHP в том, что редко приходится
делать что-то с нуля, так как существуют большое количество готовых
решение и систем. Для создания новостных сайтов или аналогичных есть 3
CMS (систем управления содержимими):
 Joomla;
 Wordpress;
 Drupal.
Существуют системы управления и для интернет-магазинов:
 OpenCart;
 Magento.
В PHP есть расширения и библиотеки для создания GUI-приложений,
такие как PHP-GTK и PHP-Qt. Но сейчас для создания таких приложений
редко применяется данный язык программирования.
JavaScript
JavaScript – это язык, предназначенный для написания сценариев для
активных HTML-страниц. Многие считают, что язык Javascript и Java одно и
тоже, но это совсем не так . Java разработан фирмой SUN. JavaScript -
фирмой Netscape Communication Corporation.
JavaScript — язык со слабой динамической неявной типизацией,
автоматическим управлением памятью и прототипным наследованием.
Язык JS состоит из 3 обособленных частей:
 ядро (ECMAScript);
 объектная модель браузера (Browser Object Model или BOM);
 объектная модель документа (Document Object Model или DOM).
JavaScript не предназначен для создания автономных приложений.
Программа на JavaScript встраивается непосредственно в исходный текст
HTML-документа и интерпретируется брaузером по мере загрузки этого
документа. С помощью JavaScript можно динамически изменять текст
12
загружаемого HTML-документа и реагировать на события, связанные с

действиями посетителя или изменениями состоятия документа или окна.
Важная особенность JavaScript - объектная ориентированность.
Программисту доступны многочисленные объекты, такие, как документы,
гиперссылки, формы, фреймы и т.д. Объекты характеризуются описательной
информацией (свойствами) и возможными действиями (методами).
1.4 Анализ аналогов веб-сайта по продаже туристических путевок
В данном разделе рассмотрим веб-ресурсы сайтов по продаже

туристических путевок, которые были уже разработанные раннее.
Первый веб-сайт - это «moihottur.ru», отображен на рисунке 1.1.
Рисунок 1.1. Сайт «moihottur.ru»

Данный веб-сайт имеет приятный интерфейс, который привлекает
нового пользователя. На главной странице сайта показаны самые горячие
путевки, их стоимость, длительность отдыха, а также дата вылета. Также с
помощью функции поиска можно отобрать лучший вариант поездки для
себя, что очень удобно. Данный веб-ресурс имеет положительные отзывы
пользователей.
Ещё один веб-ресурс «simferopol.travelata.ru» (рис. 1.2) так же
приветствует новых пользователей привлекательным интерфейсом, удобным
в использовании.
13
Рисунок 1.2. Сайт «simferopol.travelata.ru»

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

Исходя из выше проанализированного материла, сделаны выводы о
веб-сайтах и веб-приложения и их отличиях. Проанализировав особенности
веб-приложений и веб-сайтов, как они работают, как взаимодействуют с
конечным пользователем. Шаблоны разработки, и для каких целей они
подходят и что они выполняют по своей задаче. В первой главе так же
рассмотрены языки программирования и библиотеки для разработки веб-
ресурсов. Выделили принципы каждого языка и в чем он заключатся и как
работает.
Также были проанализированы аналоги игры «Монополия», которые
были выпущены ранее.
Исходя из анализа языков и библиотек программирования для Web.
Был выбран язык программирования JavaScript с библиотекой JQuery.
14
ГЛАВА 2. ПРОЕТИРОВАНИЕ И РАЗРАБОТКА WEB-РЕСУРСА

2.1. Проектирование структуры и разработка проекта
Одним из основных этапов разработки web-сайтов или веб-приложений
является этап проектирования. Моделирование веб-ресурса можно
реализовать с помощью языка моделирования UML или использовать
шаблон проектирования MVC. В нашем случае используется шаблон
проектирования MVC. Ниже на рисунке 2.4 представлена взаимосвязь
компонентов проекта.
Рисунок 2.4. Диаграмма компонентов

Структура самого проекта реализована следующим образом,
представлен на рисунке 2.5.
15
Рисунок 2.5. Структура проекта

Рассмотрим подробней что означают каждый каталог в проекте и что
он содержит.
Controllers – в данном каталоге содержатся файлы для контроля
выполнения процессов.
Core – ядро проекта, которое выполняет все связи и переходы между
файлами.
Views – представление данных пользователю.
css и css_sait содержат все стили для сайта и для игры.
js и js_sait разделены на два типа для сайта и для игры. В них
содержатся файлы JavaScript.
Файл .htaccess – это файл настройки сайта, который действует на весь
проект.
Index.php – это запускаемый, основной, файл с которого начинается
предоставление информации.
Реализация основной логики
Основной логикой веб-приложения является реализация игры
монополия на языке JavaScript с использованием библиотеки JQuery.
Рассмотрим по подробнее каждый исполняемый js-файл.
Файл monopoly.js отвечает за все события, связанные с игрой. События,
которые происходят в игре – это бросание игральных костей, обанкротиться,
аукцион, продажа или покупка карточек и недвижимости.
Ниже приведен фрагмент кода, в котором выполняется функция
проведения аукциона (листинг. 2.1).
Листинг 2.1
Фрагмент файла monopoly.js
var finalizeAuction = function() {
var p = player[highestbidder]; //Игрок сделавший наивыслую ставку
var sq = square[auctionproperty];// Аукционая недвижимость
if (highestbid > 0) { //Делаем проверку высокая цена больше 0 если True

p.pay(highestbid, 0);// передаем параметры
16
sq.owner = highestbidder; // присваимваем недвижомость новому

владельцу
addAlert(p.name + " купил " + sq.name + " за $" + highestbid + ".");
//выполняем вывод результата
}
for (var i = 1; i <= pcount; i++) {
player[i].bidding = true;
}
$("#popupbackground").hide();
$("#popupwrap").hide();
if (!game.auction()) { //Если аукион окончен

play();// запуск игры
}
};
Изначально добавляются игроки в очередь на аукцион за это отвечает
функция addPropertyToAuctionQueue, через указатель this указываем, что
присваиваем функцию добавление к переменной (листинг.2.2).
Листинг 2.2.
Фрагмент файла monopoly.js
this.addPropertyToAuctionQueue = function(propertyIndex) {
auctionQueue.push(propertyIndex); // добавление в очередь аукциона
};
Представленная функция получает стоимость ставки, которая
устанавливается начальную стоимость равную стоимости недвижимости или
устанавливается с 10. Далее происходи выполнение условий с соответствием
с введенным значениями игрока (Смотрите приложение 1).
Рассмотрим следующим файл classicedition.js. Этот файл выполняет
роль подобную базе данных, в нём хранятся содержимое карточек «Шанс» и
«Сундук сообщества», а также все игровые поля. Ниже представлен
фрагмент кода файла, отвечающий за содержимое карточек «Сундук
сообщества» (Смотрите приложение 2).
В игре присутствует возможность играть с компьютером, далее
рассмотрим фрагменты исходного файла работы бота (листинг 2.3).
Листинг 2.3.
Фрагмент файла ai.js
this.beforeTurn = function() {
17
console.log("beforeTurn");
var s;
var allGroupOwned;
var max;
var leastHouseProperty;
var leastHouseNumber;
В цикле выполняется строгое сравнение площади владельца с индексом
и площади группы. При выполнении данного условия присваивается группа
к переменной max. Вся группа принимает значение true и даёт наименьший
количества дома 6 (листинг 2.4).
Листинг 2.4.
for (var i = 0; i < 40; i++) {
s = square[i];
if (s.owner === p.index && s.groupNumber >= 3) {
max = s.group.length;
allGroupOwned = true;
leastHouseNumber = 6; // Ни в одной собственности никогда не
будет 6 домов.
Ниже представлен код, в котором реализуется проверка площади
группы владельца на не равенство, если не соответствует условию вся группа
получает false и выходит из цикла (листинг 2.5).
Листинг 2.5.
for (var j = max - 1; j >= 0; j--) {
if (square[s.group[j]].owner !== p.index) {
allGroupOwned = false;
break;
}
Ниже представлен фрагмент, в котором выполняется условие при,
котором площадь группы домов должна быть меньше наименьшего
количества домов. Наименьшая собственность дома присваивает массив
площадей с массивом группы. Проверка условия на то что вся группа никому
не принадлежит (листинг 2.6).
18
19
Листинг 2.6.
if (square[s.group[j]].house < leastHouseNumber) {
leastHouseProperty = square[s.group[j]];
leastHouseNumber = leastHouseProperty.house;
}
}
if (!allGroupOwned) {
continue;
}
}}
Выше представленный код отвечает за управление собственностью и
возможностью инициировать торги своей собственностью.
2.2. Интерфейс веб-ресурса
Пользовательский интерфейс состоит одной страницы и верхнего
меню, которое «пробрасывается» по всей странице для быстрого
перемещения.
При открытии веб-ресурса у пользователя отображается заставка с
изображением «Монополиста» и надписью Web_Game сверху кнопки
«Продолжить». По нажатию «Продолжить» пользователь опускается к блоку
с игрой. Над блоком с игрой располагаются навигационные кнопки, которые
переносят пользователя по веб-ресурсу. Каждая кнопка отвечает за свой блок
и при нажатии динамически переносит на свой блок.
Блок с игрой (рисунок 2.6) – это основной блок ресурса. Данный блок
отображает мини-меню пользователя где он может выбрать режим игры.
Режим игры ограничен до 8 человек. Каждый игрок может выбрать себе
nickname и задать цвет из предложенных вариантов.
20
Рисунок 2.4. Игра монополия

В игру можно играть как другими пользователями, так и с ботом. В
игре также есть режим бот с ботом. Далее идет блок с инструкцией к игре и
описанием самой игры.
Последний блок - это обратная связь, она служит для того чтобы
пользователи могли оставлять свои пожелания для улучшения проекта, либо
писать о недоработках и багах игры.
Реализация представления пользовательского интерфейса
За представление пользователю графического интерфейса выполняет
роль html-скрипт и css-скрипт. На html была размечена вся структура
проекта. Весь html-скрипт был написан в файле template_view.php. В самом
верхнем блоке head, подключаются все сторонние файлы (листинг 2.7).
Листинг 2.7.
Часть блока head
<script type="text/javascript" src="js/classicedition.js"></script>
<script type="text/javascript" src="js/ai.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/monopoly.js"></script>
<script type="text/javascript" src="js_sait/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js_sait/bootstrap.js"></script>
<script type="text/javascript" src="js_sait/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js_sait/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js_sait/jquery.isotope.js"></script>
<script type="text/javascript" src="js_sait/wow.js"></script>
<script type="text/javascript" src="js_sait/classie.js"></script>
<script type="text/javascript" src="js_sait/magnific-popup.js"></script>
<script src="contactform/contactform.js"></script>
Далее в блоке body уже выполнилась реализация разметки
содержимого для пользователя. Блок body разделен на секции для удобного
разделение выводимого содержимого для пользователя. Каждая секция
выполняет роль отдельной страницы с помощью библиотеки JQuery, которая
по нажатию на нужный блок в верхнем меню, автоматически переносит его
на этот блок. В листинге 2.8 приведена часть блока section.
Листинг 2.8.
Часть блока section
21
<section class="main-section" id="service">


<div class="container">
<h2><i>Game_Monopoly</i></h2>
<div id="main_content">
Рисунок 2.8 Блок section
За внешний вид и стилистику веб-приложения отвечает css-файлы,
которые разделены на две части. Первая отвечает за вид самого веб-
приложения, а вторая за стилистику и внешний вид самой игры (листинг 2.9).
Листинг 2.9.
Class стилей we-create
.we-create li{
display:inline-block;
font-family: 'Montserrat',sans-serif;
font-size:14px;
color: #bcbcbc;
text-transform: uppercase;
font-weight: 400;
margin:0 5px 0 0;
padding:0 0 0 15px;
}
На рисунке выше фрагмент кода, css-файла для стилизации игры.
Рассмотрим отображаемые блоки веб-интерфейса и реализацию данного
блока программным кодом. Блок выбора количества игроков и выбора
режима, который представлен на рисунке 2.7.
Рисунок 2.7 Блок-меню

Данный блок, который реализованный через html-разметку
представленный в листинге 2.10.
Листинг 2.10.
Html-разметка блока меню
<div id="setup">
22
<div style="margin-bottom: 20px;">

Выберите количество игроков.
<select id="playernumber" title="Выберите количество игроков
для игры.">
<option>2</option>
<option>3</option>
<option selected="selected">4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>
В блок div помещен с id «setup» помещается второстепенный блок div,
который через тег select предоставляется выпадающий список количества
игроков. По аналогичному принципу работают остальные выпадающие
списки для выбора режима и цвета.
Панель управления, которая изображена на рисунке 2.8 через, которую
можно выполнять продажи, управление недвижимость или организовывать
торги.
Рисунок 2.8. Панель управления

Данный блок реализован через отдельный блок div, который содержит
в себе три других блока div для покупки, торгов и управление. Данный html-
script представлен в приложении 3.
В блоке menu реализованная таблица для перехода между операциями
блоками, каждый блок вызывается через JavaScript функции.
На рисунке 2.9 представлен блок trade, который выполняет обмен
собственностью между игроками.
23
Рисунок 2.9. Блок trade

На данном рисунке представлена собственно двух игроком между
которыми происходят торги. Первый игрок выбирает сумму либо
собственность, на которую хочет предложить обмен, второй игрок уже
решает принять сделку или нет. Ниже представлен часть исходного кода
данного блока (листинг 2.11).
Листинг 2.11
Блок trade
<tr>
<td class="trade-cell">
$ <input id="trade-leftp-money" value="0"
title="Введите сумму для обмена с другим игроком." />
</td>
$ <input id="trade-rightp-money" value="0"
</td>
</tr>
В данном блоке теги input принимают введенные значения
пользователем и передают в обработку JavaScript (листинг 2.12).
Обработка обмена
if (money > 0 && money > initiator.money) {
document.getElementById("trade-leftp-money").value = initiator.name +
" не обладающий $" + money + ".";
document.getElementById("trade-leftp-money").style.color = "red";
return false;
} else if (money < 0 && -money > recipient.money) {
document.getElementById("trade-rightp-money").value = recipient.name
+ " не обладающий $" + (-money) + ".";
document.getElementById("trade-rightp-money").style.color = "red";
return false;
}
В коде проверяются значения, введенные игроком, которые принялись
по id, который называется trade-left-money. В случае не достаточных средств
выведется предупреждение о том, что у игрока нет такой суммы.
24
Верхнем правом углу игры отображается панель состояния кредитов

игроков (рисунок 2.10). Html-script отображен в листинге 2.13.
Фрагмент кода состояние кредитов
<div id="moneybar">
<table>
<tr id="moneybarrow0" class="money-bar-row">
<td class="moneybararrowcell"><img
src="images/arrow.png" id="p0arrow" class="money-bar-arrow" alt=">" /></td>
<td id="p0moneybar" class="moneybarcell">
<div><span id="p0moneyname" >Игрок
0</span>:</div>
<div>$<span id="p0money">1500</span></div>
</td>
</tr>
Данная часть кода отвечает за вывод кредитов и nickname пользователя.
Через индификаторы передаются в JavaScript код параметры для изменения
данных о сумме кредитов.
Рисунок 2.10. Панель состояния
Так же с помощью данной панели можно посмотретить состояние

собственности каждого игрока по нажатию кнопки «показать состояние»
(рисунок 2.11).
Рисунок 2.11. Состояние собственности

Исходный код представлен в листинге 2.14.
StatsWrap
25
<div id="statswrap">
<div id="stats">
<div style="position: relative;">
<img id="statsclose" src="images/close.png" title="Закрыть"
alt="x" />
<div id="statstext"></div>
<div id="statsdrag"></div>
</div>
</div>
</div>
Блок вызывается по нажатию кнопки «показать состояние». Выводит
данный блок всех пользователей и их собственность, за вывод данных
отвечает каждый блок по-отдельности объединенные в один главный.
Далее рассмотрим обратную связь, представленную на рисунке 2.12.
Рисунок 2.12. Форма обратной связи

26
Форма обратной связи позволяет отправить сообщение разработчику,

данные принимаются через тэг input и textarea (листинг 2.15).
Форма обратной связи
<form id="contactform" action="send/mail.php" method="post">
<p class="contact"><label for="name">Имя</label></p>
<input class="inp" id="name" name="name" placeholder="Ваше имя"
required="" tabindex="1" type="text">
<p class="contact"><label for="email">Email</label></p>

<input class="inp" id="email" name="email"
placeholder="example@sitehere.ru" required="" tabindex="2" type="text">
<p class="contact"><label for="Subject">Тема</label></p>

<input class="inp" id="subject" name="subject" placeholder="Тема
сообщения" required="" tabindex="2" type="text">
<p class="contact"><label for="comment">Сообщение</label></p>

<textarea name="comment" id="comment" tabindex="4"></textarea> <br>
<input class="inp" name="submit" id="submit" tabindex="5"
value="Отправить" type="submit">
</form>
Была создана форма, в которая с помощью input и textarea принимает
значения, который ввел пользователь и по нажатию кнопки отправляется на
обработку методом action в файл mail.php (листинг 2.16).
Mail.php
$name = $_POST['name'];
$number = $_POST['tel'];
$email = $_POST['email'];
$message = $_POST['message'];
В данной части кода получаем введенные значения и записываются в
переменные. В листинге 2.17 устанавливаем свойства переменной $mail.
Mail.php
mail->isSMTP();
$mail->Host = 'smtp.yandex.ru';
27
$mail->SMTPAuth = true;
$mail->Username = 'maletich.pavel';
$mail->Password = 'zver2015';
$mail->SMTPSecure = 'ssl';
$mail->Port = 465;
$mail->setFrom('maletich.pavel@yandex.ru');
$mail->addAddress('maletich.p.i.1.16@gmail.com');
Данный участок кода наследовал методы протокола SMPT. Далее были

заданы значение каждому свойству. Задали почту с которой будет отправлять
сообщение, логин и пароль данной почты, а также шифрование и порт
передачи данных.
Вывод к второй главе
Во второй главе проекта были рассмотрены процессы разработки и
проектирования веб-ресурса, была разработана диаграмма компонентов
проекта, разобрали по фрагментам пользовательский интерфейс игры
«монополия», к каждому блоку отображаемого пользователю была описана
html-разметка и описана как она работает и взаимодействует с JavaScript.
Была описана основная логика проекта с представление листингов кода
и его описание как он выполняется, а также логика противника «Бота». Была
рассмотрена работа формы обратной связи с разработчиком, разобрали как
происходит получение, и обработка данных от пользователя и по какому
протоколу работает форма. В дальнейшем данный проект будет
дорабатываться и улучшаться.
28
ЗАКЛЮЧЕНИЕ
В ходе выполнения проекта было разработана веб-игра «монополия».
На первом этапе выполнения была изучена общая информация о веб-
программирования и её основные категории, проанализировали особенности
веб-приложений и веб-сайтов, как они работают, и как взаимодействуют с
конечным пользователем, были рассмотрены шаблоны проектирования и для
каких целей они предназначены и что они выполняют в итоге, в первой главе
так же рассмотрены языки программирования и библиотеки для разработки
веб-ресурсов. Выделили принципы каждого языка и в чем он заключатся и
как работает. Также были рассмотрены аналоги игры «монополия», которые
были разработаны ранее, рассмотрен их функционал и интерфейс. Был
сделан вывод, что язык программирования JavaScript с использованием
библиотеки JQuery, отлично справляется для реализации сложных веб-игр.
На втором этапе выполнения проекта было описано применения
средства разработки, реализованы основные алгоритмы логики веб-ресурса с
подробным описание листингов кода, разработан понятный и удобный
пользовательский интерфейс веб-проекта, который был разобран по
фрагментам и представлением к каждому блоку, который отображается
пользователю, html-разметка с описание выполнения и взаимодействием с
JavaScript кодом, разработали «бота» для игры с ним и описали его
выполнение и реакцию на игру, разработан веб-проект.
Реализованный понятый веб-интерфейс даёт возможность максимально
эффективно взаимодействовать пользователь с веб-проектом.
Рассмотрели представление обратной формы и как получаем данные от
пользователя, и какие методы и протоколы для этого использовались.
В дальнейшем проект будет дорабатываться и улучшаться, в
дальнейшем проект будет продвигаться в сети интернет.
29
СПИСОК ИСПОЛЬЗОВАНЫХ ИСТОЧНИКОВ

1. Олищук, А.В. Разработка Web-приложений на PHP 5.
Профессиональная работа. — М.: Вильямс, 2006. — 352 с.
2. Берд, Дж. Веб-дизайн. Руководство разработчика – 2-е изд. — П.:
Питер, 2012. — 224 с.
3. Лабберс, П. HTML5 для профессионалов: мощные инструменты
для разработки современных веб-приложений / Б. Олберс, Ф. Салим. — М.:
Вильямс, 2011. — 272 с
4. Котеров, Д.В. Самоучитель PHP / А. Костарев. — СПб.: БХВ-
Петербург, 2005. — 1120 с.
5. Зервас, К. Web 2.0: создание приложений на PHP. — М.:
«Вильямс», 2009. — 544 с.
6. Кузнецов, М.В. Объектно-ориентированное программирование
на PHP / И.В. Симдянов. — СПб.: БХВ-Петербург, 2007. — 608 с.
7. Маклафлин, Б. Изучаем Ajax. — СПб.: Питер, 2007 – 448 с.
8. Крейн, Д. AJAX в действии: технология — Asynchronous
JavaScript and XML / Э. Паскарелло, Д. Даррен. — М.: Вильямс, 2006. — 640
с.
9. Браун, И. Веб-разработка с применением Node и Express.
Полноценное использование стека. — Санкт-Петербург: Питер, 2017. — 336
с
10. Фримен, А. jQuery для профессионалов. — М.: Вильямс, 2012. —
960 с.
11. Чедвик, Д. ASP.NET MVC 4: разработка реальных веб-
приложений с помощью ASP.NET MVC. — М.: Вильямс, 2013. — 432 с.
12. Эспозито, Д. Разработка современных веб-приложений: анализ
предметных областей и технологий. — М.: Вильямс, 2016. — 646 с.
13. Уэнц, К. PHP и MySQL. Карманный справочник. — М.: Вильямс,
2015. — 232 с.
30
14. Никхил, А. Веб-программирование для чайников. — М.:

Вильямс, 2019. — 304 с.
15. Кошик, А. Веб-аналитика 2.0 на практике. Тонкости и лучшие
методики. — М.: Диалектика, 2019. — 528 с.
16. Вейтман, В. Программирование для Web. — М.: Диалектика,
2001. — 288 с.
17. MySQL Documentation: MySQL Reference Manual: техническая
документация по работе с MySQL. – MySQL Documentation, 2010
[Электронный ресурс]. Режим доступа: http://dev.mysql.com (дата обращения
15.03.2020).
18. Open Server — профессиональный инструмент веб-разработчика
под Windows [Электронный ресурс]. Режим доступа:
https://habr.com/ru/post/137388/ (дата обращения 15.03.2020).
19. Introduction to HTML [Электронный ресурс]. Режим доступа:
https://www.quackit.com/html/tutorial/introduction.cfm (дата обращения
15.03.2020).
20. Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное
пособие, ч. 1 - МГДД(Ю)Т, М.:2010 - 107 с
21. Кузнецов М. PHP 5/6 в подлиннике / М.В. Кузнецов И.В., Симдянов
И. - БХВ-Петербург, 2010. - 1024 с.
22. What is CSS? [Электронный ресурс]. Режим доступа:
https://www.tutorialspoint.com/css/what_is_css.html (дата обращения
23.03.2019)
31
ПРИЛОЖЕНИЕ 1
Обработка ставки пользователя
this.auctionBid = function(bid) {
bid = bid || parseInt(document.getElementById("bid").value, 10);
if (bid === "" || bid === null) {
document.getElementById("bid").value = "Пожалуйста, введите
ставку.";
document.getElementById("bid").style.color = "red";
} else if (isNaN(bid)) {
document.getElementById("bid").value = "Ваша ставка должна быть
числом.";
} else {
if (bid > player[currentbidder].money) {
document.getElementById("bid").value = "У вас нет
достаточно денег, чтобы сделать ставку $" + bid + ".";
} else if (bid > highestbid) {
highestbid = bid;
document.getElementById("highestbid").innerHTML =
parseInt(bid, 10);
highestbidder = currentbidder;
document.getElementById("highestbidder").innerHTML =
player[highestbidder].name;
document.getElementById("bid").focus();
if (player[currentbidder].human) {
this.auctionPass();
}
} else {
document.getElementById("bid").value = "Ваша ставка должна
быть больше самой высокой ставки. ($" + highestbid + ")";
}
}
};
this.auctionExit = function() {
player[currentbidder].bidding = false;
this.auctionPass();
};
32
Фрагмент файла classicedition.js
communityChestCards[0] = new Card("Выйди из тюрьмы, освободись. Эта карта может
храниться до тех пор, пока она не понадобится или не будет продана.", function(p)
{ p.communityChestJailCard = true; updateOwned();});
communityChestCards[1] = new Card("Вы выиграли второй приз в конкурсе красоты.
Соберите $10.", function() { addamount(10, 'Community Chest');});
communityChestCards[2] = new Card("От продажи акций вы получаете $ 50.", function()
{ addamount(50, 'Community Chest');});
communityChestCards[3] = new Card("Страхование жизни созревает. Собрать $100.",
function() { addamount(100, 'Community Chest');});
communityChestCards[4] = new Card("Возврат налога на прибыль. Соберите $20.",
communityChestCards[5] = new Card("Праздничный фонд назревает. Получите $ 100.",
communityChestCards[6] = new Card("Вы наследуете $ 100.", function() { addamount(100,
'Community Chest');});
communityChestCards[7] = new Card("Получите $25 по вопросам коммерческой платы.",
communityChestCards[8] = new Card("Оплата больничных сборов составляет $ 100.",
function() { subtractamount(100, 'Community Chest');});
communityChestCards[9] = new Card("Банковская ошибка в вашу пользу. Собрать $200.",
communityChestCards[10] = new Card("Оплата школьных сборов составляет $ 50.",
function() { subtractamount(50, 'Community Chest');});
communityChestCards[11] = new Card("Гонорар врача. Заплати $ 50.", function()
{ subtractamount(50, 'Community Chest');});
communityChestCards[12] = new Card("Это твой день рождения. Соберите $10 с
каждого игрока.", function() { collectfromeachplayer(10, 'Community Chest');});
communityChestCards[13] = new Card("Направляйтесь \"Начать\" (Соберите $200).",
function() { advance(0);});
communityChestCards[14] = new Card("Вы оцениваете для ремонта улицы. $ 40 за дом. $
115 за отель.", function() { streetrepairs(40, 115);});
33
communityChestCards[15] = new Card("Идите в тюрьму. Направляйтесь пряму в тюрьму.

Не проходите поле \"Вперед\". Не собирайте $200.", function() { gotojail();});
Html-разметка блока панели управления
<div id="control">
<table>
<tr>
<td style="text-align: left; vertical-align: top; border: none;">
<div id="menu">
<table id="menutable" cellspacing="0">
<tr>
<td class="menu-item" id="buy-menu-item">
<a href="javascript:void(0);" title="Просматривайте оповещения и покупайте
недвижимость, на которую вы приземлились.">Покупать</a>
</td>
<td class="menu-item" id="manage-menu-item">
<a href="javascript:void(0);" title="Просмотр, ипотека, и улучшить вашу
собственность.">Руководить</a>
</td>
<td class="menu-item" id="trade-menu-item">
<a href="javascript:void(0);" title="Обменивайтесь собственностью с другими
игроками.">Торговля</a>
</td>
</tr>
</table>
</div>
<div id="buy">
<div id="alert"></div>
<div id="landed"></div>
</div>
<div id="manage">
<div id="option">
<div id="buildings" title="Существующих зданий"></div>
34
<input type="button" value="Купить дом" id="buyhousebutton"/>

<input type="button" value="Ипотечный кредит" id="mortgagebutton" />
<input type="button" value="Продать дом" id="sellhousebutton"/>
</div>
<div id="owned"></div>
</div>
</td>
<td style="vertical-align: top; border: none;">
<div id="quickstats" style="">
<div><span id="pname" >Игрок 1</span>:</div>
<div><span id="pmoney">$1500</span></div>
</div>
<div>
<div id="die0" title="Die" class="die die-no-img"></div>
<div id="die1" title="Die" class="die die-no-img"></div>
</div>
</td>
</tr><tr>
<td colspan="2" style="border: none">
<div style="padding-top: 8px;">
<input type="button" id="nextbutton" title="Бросьте кости и переместите свой жетон
соответственно." value="Бросьте Кости"/>
<input type="button" id="resignbutton" title="Если вы не можете оплатить свой долг, то вы
должны уйти из игры." value="Уйти" onclick="game.resign();" />
</div>
</td>
</tr>
</table>
</div>
35
Исходный код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>ВЕБ_Game</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?
family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600'
rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css_sait/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css_sait/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css_sait/style.css" rel="stylesheet" type="text/css">
<link href="css_sait/responsive.css" rel="stylesheet" type="text/css">
<link href="css_sait/magnific-popup.css" rel="stylesheet" type="text/css">
<link href="css_sait/animate.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/classicedition.js"></script>
<script type="text/javascript" src="js/ai.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/monopoly.js"></script>
<script type="text/javascript" src="js_sait/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js_sait/bootstrap.js"></script>
<script type="text/javascript" src="js_sait/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js_sait/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js_sait/jquery.isotope.js"></script>
<script type="text/javascript" src="js_sait/wow.js"></script>
<script type="text/javascript" src="js_sait/classie.js"></script>
<script type="text/javascript" src="js_sait/magnific-popup.js"></script>
<script src="contactform/contactform.js"></script>
<script type="text/javascript" src="./obr.js"></script>
</head>
<body>
<header style="background: url(images/img_monopoly.jpg);
height: 679px; width: 1349px;
repeat;
"class="header" id="header">

<h1 class="animated fadeInDown delay-07s"><i style="color:
black;"><i>Web_Game</i></h1>
36
<a class="link animated fadeInUp delay-1s servicelink"

href="#service">Продолжить..</a>
</div>
</header>

<nav class="main-nav-outer" id="test">


<ul class="main-nav">
<li><a href="#header">Home</a></li>
<li><a href="#service">Game</a></li>
<li><a href="#Portfolio">Инструкция</a></li>
<li><a href="#Admin">Обратная связь</a></li>
</ul>
<a class="res-nav_click" href="#"><i class="fa fa-bars"></i></a>
</div>
</nav>

<section class="main-section" id="service">
<h2><i>Game_Monopoly</i></h2>
<div id="main_content">
<div id="popupbackground"></div>
<div id="popupwrap">
<div id="popup">
<div id="popuptext"></div>
<div id="popupdrag"></div>
</div>
</div>
</div>
<div id="statsbackground"></div>
<div id="statswrap">
<div id="stats">
<img id="statsclose" src="images/close.png"
title="Закрыть" alt="x" />
<div id="statstext"></div>
<div id="statsdrag"></div>
</div>
</div>
</div>
<p id="noscript">
Примечание: эта страница не будет функционировать без JavaScript.
</p>
37
<div id="refresh">
Обновите эту страницу, чтобы начать новую игру.
</div>
<div id="deed">
<div id="deed-normal" style="display: none;">
<div id="deed-header">
<div style="margin: 5px; font-size: 11px;">T I T L
E  D E E D</div>
<div id="deed-name"></div>
</div>
<table id="deed-table">
<tr>
<td colspan="2">
АРЕНДОВАТЬ $<span id="deed-
baserent">12</span>.
</td>
</tr>
<tr>
<td style="text-align: left;">С 1 Домом</td>
<td style="text-align:
right;">$   <span id="deed-rent1">60</span>.</td>
</tr>
<tr>
<td style="text-align: left;">С 2 Домами</td>
<td style="text-align: right;"><span id="deed-
rent2">180</span>.</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2">
<div style="margin-bottom: 8px;">С
ОТЕЛЕМ $<span id="deed-rent5">900</span>.</div>
<div>залоговая стоимость $<span
id="deed-mortgage">80</span>.</div>
<div>Стоимость домов $<span id="deed-
houseprice">100</span>. каждый</div>
<div>Отели, $<span id="deed-
hotelprice">100</span>. плюс 4 дома</div>
38
<div style="font-size: 9px; font-style: italic;

margin-top: 5px;">Если игроку принадлежат все лоты любой цветовой группы, арендная
плата удваивается на неосвоенные лоты в этой группе.</div>
</td>
</tr>
</table>
</div>
<div id="deed-mortgaged">
<div id="deed-mortgaged-name"></div>
<p>•</p>
<div>ЗАЛОЖЕННЫЙ</div>
<div> for $<span id="deed-mortgaged-
mortgage">80</span></div>
<p>•</p>
<div style="font-style: italic; font-size: 13px; margin: 10px;">Карта
должна быть перевернута этой стороной вверх, если имущество заложено</div>
</div>
<div id="deed-special">
<div id="deed-special-name"></div>
<div id="deed-special-text"></div>
<div id="deed-special-footer">
залоговая стоимость
<span style="float: right;">$<span id="deed-special-
mortgage">100</span>.</span>
</div>
</div>
</div>
<table id="board">
<tr>
<td class="cell board-corner" id="cell20"></td>
<td style="background-color: red;" class="cell board-top"
id="cell21"></td>
<td class="cell board-top" id="cell22"></td>
id="cell23"></td>
id="cell24"></td>
<td style="background-color: yellow;"class="cell board-top"
id="cell26"></td>
id="cell27"></td>
id="cell29"></td>
<td style="background-color: white;" class="cell board-corner"
id="cell30"></td>
39
</tr><tr>
<td style="background-color: #FFA500;"class="cell board-left"
id="cell19"></td>
<td colspan="9" class="board-center"></td>
<td style="background-color: green;" class="cell board-right"
id="cell31"></td>
</tr><tr>
<td style="background-color: #FFA500;" class="cell board-left"
id="cell18"></td>
id="cell32"></td>
</tr><tr>
<td style="background-color: white;" style="background-color:
white;" class="cell board-left" id="cell17"></td>
<td style="background-color: white;" class="cell board-right"
id="cell33"></td>
</tr><tr>
<td style="background-color: #FFA500;" class="cell board-left"
id="cell16"></td>
id="cell34"></td>
</tr><tr>
<td style="background-color: white;" class="cell board-left"
id="cell15"></td>
id="cell35"></td>
</tr><tr>
<td style="background-color: #FF0080;"class="cell board-left"
id="cell14"></td>
id="cell36"></td>
</tr><tr>
<td style="background-color: #FF0080;"class="cell board-left"
id="cell13"></td>
<td style="background-color: blue;" class="cell board-right"
id="cell37"></td>
</tr><tr>
<td style="background-color: white;"class="cell board-left"
id="cell12"></td>
id="cell38"></td>
</tr><tr>
40
<td style="background-color: #FF0080;" class="cell board-left"

id="cell11"></td>
<td colspan="9" class="board-center">
<div id="jail"></div>
</td>
<td style="background-color: blue;" class="cell board-right"
id="cell39"></td>
</tr><tr>
id="cell10"></td>
<td style="background-color: #87CEEB;" class="cell board-
bottom" id="cell9"></td>
<td style="background-color: white;" class="cell board-bottom"
id="cell8"></td>
<td style="background-color: #87CEEB;" class="cell board-
<td style="background-color: #8B4513;" class="cell board-
id="cell5"></td>
id="cell4"></td>
id="cell2"></td>
id="cell0"></td>
</tr>
</table>
<div id="moneybarwrap">
<div id="moneybar">
<table>
0</span>:</div>
<div>$<span
id="p0money">1500</span></div>
</td>
</tr>
41
src="images/arrow.png" id="p1arrow" class="money-bar-arrow" alt=">"/></td>
1</span>:</div>
<div>$<span
</td>
</tr>
2</span>:</div>
<div>$<span
</td>
</tr>
3</span>:</div>
<div>$<span
</td>
</tr>
4</span>:</div>
<div>$<span
</td>
</tr>
5</span>:</div>
<div>$<span
</td>
</tr>
42

6</span>:</div>
<div>$<span
</td>
</tr>
7</span>:</div>
<div>$<span
</td>
</tr>
<tr id="moneybarrow8">
<td style="border: none;"
class="moneybararrowcell"> </td>
<td style="border: none;">
<input type="button" id="viewstats"
value="Показать состояние" title="Просмотр всплывающего окна, в котором отображается
список свойств каждого игрока." />
</td>
</tr>
</table>
</div>
</div>
<div id="setup">
<div style="margin-bottom: 20px;">
Выберите количество игроков.
<select id="playernumber" title="Выберите количество игроков
для игры.">
<option>2</option>
<option>3</option>
<option selected="selected">4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>
<div id="player1input" class="player-input">

43
Игрок 1: <input type="text" id="player1name" title="Имя

игрока" maxlength="16" value="Игрок 1" />
<select id="player1color" title="Цвет игрока">
<option style="color: aqua;">Аква</option>
<option style="color: black;">Черный</option>
<option style="color: blue;">Синий</option>
<option style="color: fuchsia;">Фуксия</option>
<option style="color: gray;">Серый</option>
<option style="color: green;">Зеленый</option>
<option style="color: lime;">Лайм</option>
<option style="color: maroon;">Бордовый</option>
<option style="color: navy;">Флот</option>
<option style="color: olive;">Оливковый</option>
<option style="color: orange;">Оранжевый</option>
<option style="color: purple;">Пурпурный</option>
<option style="color: red;">Красный</option>
<option style="color: silver;">Серебряный</option>
<option style="color: teal;">Тиал</option>
<option selected="selected" style="color:
yellow;">Желтый</option>
</select>
<select id="player1ai" title="Выберите, будет ли этот игрок
управляться человеком или компьютером."
onclick="document.getElementById('player1name').disabled = this.value !== '0';">
<option value="0" selected="selected">Человек</option>
<option value="1">AI (Test)</option>
</select>
</div>

blue;">Синий</option>
<option style="color: silver;">Серебряныйr</option>
44
<option style="color: yellow;">Желтый</option>

</select>
</select>
</div>

red;">Красный</option>
</select>
</select>
</div>

<option style="color: black;">Черныйk</option>
45

lime;">Лайм</option>
</select>
</select>
</div>

green;">Зеленый</option>
</select>
</select>
46
</div>

aqua;">Аква</option>
</select>
</select>
</div>

orange;">Оранжевый</option>
47

</select>
</select>
</div>

purple;">Пурпурный</option>
</select>
</select>
</div>
<div style="margin: 20px 0px;">

<input type="button" value="Начать Игру" onclick="setup();"
title="Начните играть." />
</div>
48
<div id="noF5">Примечание: обновление этой страницы или переход

от нее может завершить игру без предупреждения.</div>
</div>
<div id="control">
<table>
<tr>
<td style="text-align: left; vertical-align: top; border:
none;">
<div id="menu">
<table id="menutable" cellspacing="0">
<tr>
<td class="menu-item"
id="buy-menu-item">
<a
href="javascript:void(0);" title="Просматривайте оповещения и покупайте недвижимость,
на которую вы приземлились.">Покупать</a>
</td>
id="manage-menu-item">
<a
href="javascript:void(0);" title="Просмотр, ипотека, и улучшить вашу
собственность.">Руководить</a>
</td>
id="trade-menu-item">
<a
href="javascript:void(0);" title="Обменивайтесь собственностью с другими
игроками.">Торговля</a>
</td>
</tr>
</table>
</div>
<div id="buy">
<div id="alert"></div>
<div id="landed"></div>
</div>
<div id="manage">
<div id="option">
<div id="buildings"
title="Существующих зданий"></div>
<input type="button" value="Купить
дом" id="buyhousebutton"/>
49
<input type="button"
value="Ипотечный кредит" id="mortgagebutton" />
<input type="button"
value="Продать дом" id="sellhousebutton"/>
</div>
<div id="owned"></div>
</div>
</td>
<td style="vertical-align: top; border: none;">
<div id="quickstats" style="">
<div><span id="pname" >Игрок
1</span>:</div>
<div><span
id="pmoney">$1500</span></div>
</div>
<div>
<div id="die0" title="Die" class="die die-no-
img"></div>
<div id="die1" title="Die" class="die die-no-
img"></div>
</div>
</td>
</tr><tr>
<td colspan="2" style="border: none">
<div style="padding-top: 8px;">
<input type="button" id="nextbutton"
title="Бросьте кости и переместите свой жетон соответственно." value="Бросьте Кости"/>
<input type="button" id="resignbutton"
title="Если вы не можете оплатить свой долг, то вы должны уйти из игры." value="Уйти"
onclick="game.resign();" />
</div>
</td>
</tr>
</table>
</div>
<div id="trade">
<table style="border-spacing: 3px;">
<tr>
<div id="trade-leftp-name"></div>
</td>
<div id="trade-rightp-name"></div>
</td>
</tr>
<tr>
50
$ <input id="trade-leftp-money" value="0"

</td>
$ <input id="trade-rightp-money" value="0"
</td>
</tr>
<tr>
<td id="trade-leftp-property" class="trade-cell"></td>
<td id="trade-rightp-property" class="trade-cell"></td>
</tr>
<tr>
<td colspan="2" class="trade-cell">
<input type="button" id="proposetradebutton"
value="Предложите Торговлю" onclick="game.proposeTrade();" title="Обменяйте деньги и
свойства, которые проверены выше." />
<input type="button" id="canceltradebutton"
value="Отменить Сделку" onclick='game.cancelTrade();' title="Отмените сделку." />
<input type="button" id="accepttradebutton"
value="Принять сделку" onclick="game.acceptTrade();" title="Примите предложенную
сделку." />
<input type="button" id="rejecttradebutton"
value="Отклонить Торговлю" onclick='game.cancelTrade();' title="Отклонить предложенную
сделку." />
</td>
</tr>
</table>
</div>
</div>
</div>
</section>

<section class="main-section paddind" id="Portfolio">
<div id="game_opis" class="container">
<h2>Инструкция к игре</h2>
<h3><b>Краткое описание игры</b></h3>
<p><b>    Монополия</b> — это
классическая игра, в которой вы можете покупать, арендовать и продавать свою
собственность!
В начале игры участники выставляют свои фишки на
поле «Вперед», затем перемещают их по игровому полю в зависимости от выпавшего на
кубиках количества очков.
Если вы попадаете на Участок Недвижимости, которая
пока еще никому не принадлежит, то вы можете купить эту Недвижимость у Банка.
Если вы решаете не покупать ее, она может быть
продана на Аукционе другому игроку, предложившему за нее самую высокую цену.
51
Игроки, имеющие Недвижимость, могут взимать

арендную плату с игроков, которые попадают на их Участок. При строительстве Домов и
Гостиниц арендная плата значительно возрастает, поэтому вам следует вести
строительсто на как можно большем количестве Участков.
Если вы нуждаетесь в деньгах, вы можете заложить
вашу Недвижимость.
В ходе игры вам следует всегда выполнять указания,
написанные на карточках «Общественная казна» и «Шанс». Но не расслабляйтесь — в
некоторых случаях вас могут посадить в Тюрьму.</p>
<h3><b>Цель игры</b></h3>
<p>    <b>Остаться
единственным необанкротившимся игроком.</b></p>
<h3><b>Начало игры</b></h3>
<p>    <b>Фишки всех игроков
выстраиваются на поле «Вперед», после чего поочередно каждый делает свой
ход.</b></p>
<p>Приятной игры!</p>
</div>
</div>
</section>
<section class="main-section paddind" id="Admin">
<div id="game_opis" class="container">
<h2>Связь с разработчиком игры</h2>
<div class="cover">
<h2 id="obr" class="contact">Напишите мне</h2>
<form id="contactform" action="send/mail.php" method="post">
<p class="contact"><label for="name">Имя</label></p>
<input class="inp" id="name" name="name" placeholder="Ваше имя" required=""
tabindex="1" type="text">
<p class="contact"><label for="email">Email</label></p>

<input class="inp" id="email" name="email" placeholder="example@sitehere.ru"
<p class="contact"><label for="Subject">Тема</label></p>

<input class="inp" id="subject" name="subject" placeholder="Тема сообщения"
<p class="contact"><label for="comment">Сообщение</label></p>

<textarea name="comment" id="comment" tabindex="4"></textarea> <br>
<input class="inp" name="submit" id="submit" tabindex="5" value="Отправить"
type="submit">
</form>
</div>
</div>
</section>
<footer class="footer">
52
<p id="copy" >copyright©2019<span>Saper</span>Fly</p>

</div>
</footer>
<script type="text/javascript">
$(document).ready(function(e) {
$('#test').scrollToFixed();
$('.res-nav_click').click(function() {
$('.main-nav').slideToggle();
return false
});
$('.Portfolio-box').magnificPopup({
delegate: 'a',
type: 'image'
});
});
</script>
<script>
wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
</script>
$(window).load(function() {
$('.main-nav li a, .servicelink').bind('click', function(event) {

var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 102
}, 1500, 'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
if ($(window).width() < 768) {
$('.main-nav').hide();
}
53
event.preventDefault();
});
})
</script>
$(window).load(function() {
var $container = $('.portfolioContainer'),

$body = $('body'),
colW = 375,
columns = null;
$container.isotope({
// disable window resizing
resizable: true,
masonry: {
columnWidth: colW
}
});
$(window).smartresize(function() {
// check if columns has changed
var currentColumns = Math.floor(($body.width() - 30) /
colW);
if (currentColumns !== columns) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger
relayout
$container.width(columns * colW)
.isotope('reLayout');
}
}).smartresize(); // trigger resize to set container width

$('.portfolioFilter a').click(function() {
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');

$container.isotope({
filter: selector,
});
return false;
});
54
});
</script>
$(function(){
'use strict';
$('#form').on('submit', function(e){
e.preventDefault();
var fd = new FormData( this );
$.ajax({
url: 'email.php',
type: 'POST',
contentType: false,
processData: false,
data: fd,
success: function(msg){
if(msg == 'ok') {
alert('Отправлено')
} else {
alert('Ошибка')
}
}
});
});
});
</script>
</body>
</html>

Язык

Курсовая Абдулганиев

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Курсовая Абдулганиев

Оригинальное название:

Загружено:

Авторское право:

МИНИСТЕРСТВО ОБРАЗОВАНИЯ, НАУКИ И МОЛОДЕЖИ РЕСПУБЛИКИ КРЫМ

ГБОУВО РК «КРЫМСКИЙ ИНЖЕНЕРНО-ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ

Факультет экономики, менеджмента и информационных технологий

Направление подготовки 09.03.03 Прикладная информатика

по дисциплине «Программирование и поддержка веб-приложений»

«Разработка веб-сайта по продаже туристических путевок»

 Спроектировать и разработать веб-сайт по продаже туристических

ГЛАВА 1 ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ WEB-РАЗРАБОТКИ

1.1 Сущность web-сайтов

Веб-сайт – это система электронных документов частного лица или

Страницы сайтов могут быть как простым статичным набором файлов,

1.2 Разновидности сайтов

Типы интернет ресурсов:

 Локальные сайты - доступны только в пределах локальной сети.

закрытые разделы для тех или иных групп пользователей -- сотрудников,

размера, соотношения сторон экрана монитора и размеров окна обозревателя,

1.3 Обзор популярных языков веб-программирования

HTML – это язык разметки гипертекстов, предназначенный для

загружаемого HTML-документа и реагировать на события, связанные с

1.4 Анализ аналогов веб-сайта по продаже туристических путевок

В данном разделе рассмотрим веб-ресурсы сайтов по продаже

Рисунок 1.1. Сайт «moihottur.ru»

Рисунок 1.2. Сайт «simferopol.travelata.ru»

Вывод к первой главе

ГЛАВА 2. ПРОЕТИРОВАНИЕ И РАЗРАБОТКА WEB-РЕСУРСА

Рисунок 2.4. Диаграмма компонентов

Рисунок 2.5. Структура проекта

if (highestbid > 0) { //Делаем проверку высокая цена больше 0 если True

sq.owner = highestbidder; // присваимваем недвижомость новому

if (!game.auction()) { //Если аукион окончен

Рисунок 2.4. Игра монополия

<section class="main-section" id="service">

Рисунок 2.7 Блок-меню

<div style="margin-bottom: 20px;">

Рисунок 2.8. Панель управления

Рисунок 2.9. Блок trade

Верхнем правом углу игры отображается панель состояния кредитов

Рисунок 2.10. Панель состояния

Так же с помощью данной панели можно посмотретить состояние

Рисунок 2.11. Состояние собственности

Рисунок 2.12. Форма обратной связи

Форма обратной связи позволяет отправить сообщение разработчику,

<p class="contact"><label for="email">Email</label></p>

<p class="contact"><label for="Subject">Тема</label></p>

<p class="contact"><label for="comment">Сообщение</label></p>

Данный участок кода наследовал методы протокола SMPT. Далее были

СПИСОК ИСПОЛЬЗОВАНЫХ ИСТОЧНИКОВ

14. Никхил, А. Веб-программирование для чайников. — М.:

communityChestCards[15] = new Card("Идите в тюрьму. Направляйтесь пряму в тюрьму.

<input type="button" value="Купить дом" id="buyhousebutton"/>

<a class="link animated fadeInUp delay-1s servicelink"

<nav class="main-nav-outer" id="test">

<div style="font-size: 9px; font-style: italic;

<td style="background-color: #FF0080;" class="cell board-left"

<tr id="moneybarrow6" class="money-bar-row">

<div id="player1input" class="player-input">

Игрок 1: <input type="text" id="player1name" title="Имя

<div id="player2input" class="player-input">

<option style="color: yellow;">Желтый</option>

<div id="player3input" class="player-input">

<div id="player4input" class="player-input">

<option style="color: green;">Зеленый</option>

<div id="player5input" class="player-input">

<div id="player6input" class="player-input">

$ <input id="trade-leftp-money" value="0"

<p id="copy" >copyright©2019<span>Saper</span>Fly</p>