Разработка неофициального сайта английского футбольного клуба «Манчестер Юнайтед»

ВВЕДЕНИЕ

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

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

Целью данной курсовой работы является разработка неофициального сайта английского футбольного клуба «Манчестер Юнайтед», отвечающего основным запросам современного болельщика: наличие расписания матчей, новостной странички, истории клуба, возможности регистрироваться и оставлять комментарии. Для разработки сайта будет использована технология ASP.NET MVC 5.

1 ОБЗОР

1.1 Аналоги

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

1.1.1 Обзор сайта manutd8.com

Итак, рассмотрим первый аналог: сайт футбольного клуба «МЮ» manutd8.com. (Рисунок 1.1) Данный сайт отвечает основным требованиям среднестатистического болельщика: наличие новостной ленты, богатый архив информации о предыдущих сезонах клуба, полная информация об истории клуба и составе команды (основной состав, резерв, тренерский штаб, ассистенты и т.д.), присутствуют видеотрансляция матчей АПЛ, расписание игр. Также есть некоторые дополнительные разделы, такие как «Тотализатор», «Fan-zone». Плюсом сайта является удобная навигация: правильно структурированные вкладки меню и выпадающий список позволяет легко ориентироваться на сайте при поиске необходимой информации. Также в пользу сайта хочется отметить наличие форума, чата, блога с обязательной регистрацией, поисковика. В связи с этим присутствует разделение ролей на следующие категории: «Гость», «Пользователь», «Модератор». Так как большинство людей проводит много времени в социальных сетях, то к достоинствам сайта manutd8.com можно отнести наличие групп в различных социальных сетях. Еще к плюсам сайта можно отнести яркий и в то же время эргономичный дизайн, отсутствие лишней и многочисленной рекламы.

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

Сайт manutd8.com разработан на языке PHP с использованием системы управления контентом (CMS) DataLife Engine (DLE).

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

1.1.2 Обзор сайта manchester-united.ru

Рассмотрим второй аналог: сайт футбольного клуба «МЮ» manchester-united.ru (Рисунок 1.2). Данный сайт отвечает практически всем требованиям современных Интернет-пользователей: наличие новостной ленты, календарь матчей, полная информация об истории клуба и составе команды (основной состав, резерв, тренерский штаб, ассистенты и т.д.). Также есть некоторые дополнительные разделы, такие как «Конкурсы», «Голосование». На данном сайте отсутствуют текстовая и видеотрансляция, даже нет ссылок на трансляции матчей на другие сайты. Несомненным плюсом сайта является наличие богатой фотогалереи. В галереи организован поиск, что является весьма удобно. Также в пользу сайта хочется отметить наличие форума. Однако на сайте отсутствует регистрация пользователей. Так как большинство людей проводит много времени в социальных сетях, то было бы удобно и логично создать группу в различных социальных сетях. Но manchester-united.ru не имеет никакой связи с каким-либо социальными сетями. К минусам сайта хотелось бы отнести неброский дизайн. Блеклые цвета, которые неудачно сочетаются между собой, отбивают какое-либо желание дальнейшего использования данной информационной системы. Отсутствие лишней и многочисленной рекламы можно отнести к немногочисленным плюсам сайта.

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

Сайт manchester-united.ru разработан на языке PHP с использованием системы управления контентом (CMS) Slaed.

Рисунок 1.2 – Главная страница сайта manchester-united.ru

1.2 Технологии

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

1.2.1 Технология ASP.NET

ASP.NET - это платформа для создания Web-приложений и Web-сервисов, работающих под управлением IIS. ASP.NET отличается от других технологий, позволяющих создавать Web-приложения, высокой степенью интеграции с серверными продуктами, а также с инструментами Microsoft для разработки доступа к данным и обеспечения безопасности. Кроме того, ASP.NET позволяет разрабатывать Web- и Windows-приложения, используя очень похожие технологические цепочки, одинаковые языки программирования, технологии доступа к данным и т. д. Более того, базовые языки программирования, с помощью которых сегодня возможна разработка Web-приложений, являются полностью объектно-ориентированными, что делает разработку исполнимой части, а также ее модификацию, обслуживание, отладку и повторное использование гораздо более простым занятием, чем в других технологиях. Существует достаточно большой перечень сильных сторон использования ASP.NET для создания сложных Web-приложений.

Заметим лишь, что ASP.NET функционирует исключительно на серверах Windows, так как требует наличия IIS. Для создания Web-приложений, не требующих IIS, а использующих, например, Web-сервер Apache и работающих на серверах под управлением операционных систем, отличных от Windows, применяются другие технологии.

ASP.NET значительно упрощает создание веб-приложений, имеющих практическое применение. Серверные элементы управления ASP.NET позволяют применять декларативную модель программирования, схожую с HTML, в которой для создания динамической страницы требуется гораздо меньше кода, нежели при использовании классической технологии ASP. Отображение данных, проверка ввода и загрузка файлов происходят гораздо проще. Главное же преимущество страниц ASP.NET состоит в том, что они работают в любом обозревателе, включая популярные Mozilla Firefox, Opera, и Internet Explorer.

ASP.NET позволяет развить собственные навыки программирования. Технология ASP.NET поддерживает более 25 языков .NET languages (поддержка Visual Basic, C# и JScript.NET является встроенной, дополнительных средств не потребуется), что дает полную свободу в выборе языка программирования.

Работать со всем многообразием функций ASP.NET можно в любом текстовом редакторе, даже в блокноте. Впрочем, Visual Studio может дать дополнительные возможности веб-разработки. Теперь веб-формы ASP.NET можно создавать с использованием графической модели: вы просто щелкаете и перетаскиваете элементы. В помощь имеется полная поддержка кодирования, включающая завершение операторов и цветовую разметку. Visual Studio также обеспечивает разностороннюю поддержку отладки и развертывания веб-приложений ASP.NET.

Ряд функций приложений, которые раньше было сложно реализовать, в платформе .NET Framework требуют лишь нескольких строк кода. В .NET Framework есть более 4500 готовых классов, обеспечивающих такие функции как XML, доступ к данным, загрузку файлов, регулярные выражения, создание изображений, контроль производительности и ведение журналов, транзакции, очереди сообщений, почта SMTP и многое другое.

1.2.2 Технология PHP

PHP - крайне популярный сценарный язык общего назначения, и это не смотря на то, что создавался специально для веб-разработок. В основе своей имеет синтаксис очень похожий на синтаксис C, Java и Perl, однако проще этих языков. Имеет открытый исходный код.

Чаще всего PHP сценарии встроены в HTML-разметку внутри специальных тегов <?php ?>. Во время запроса документа, имеющего PHP сценарии, на сервере происходит выполнение кода, а пользователь получает в браузер "чистый" HTML. Таким образом, PHP сценарии решают все те задачи, которые характерны для типичных CGI-приложений.

Однако PHP можно использовать не только так. Вот основные области применения этой технологии:

- создание скриптов для выполнения на стороне сервера - это основная задача PHP, и в большей степени PHP используется именно в этом варианте; - создание скриптов для выполнения в командной строке, например для обработки текстов на локальном компьютере;

- создание оконных приложений, выполняющихся на стороне клиента (здесь надо использовать расширение PHP-GTK), в таком варианте PHP используется крайне редко.

PHP - это кроссплатформенная технология. Дистрибутив PHP доступен для большинства операционных систем, включая Linux, многие модификации Unix (например, HP-UX, Solaris и OpenBSD), Microsoft Windows, Mac OS X, RISC OS, и многих других. PHP поддерживает большинство наиболее популярных вебсерверов, таких, как Apache, Microsoft Internet Information Server, Microsoft Personal Web Server, Netscape, iPlanet, Oreilly Website Pro, Caudium, Xitami, OmniHTTPd и другие. Для большинства серверов PHP поставляется в 2-х вариантах - в качестве модуля и в качестве CGI препроцессора.

Кроме этого, программируя на PHP разработчик может отдавать предпочтение как процедурному, так и объектно-ориентированному программированию (особенно при работе с PHP 5).

PHP способен генерировать не только HTML документы, но и изображения разных форматов, файлы PDF и Flash. PHP способен формировать данные в любом текстовом формате, включая XHTML и XML.

PHP поддерживает работу с ODBC и большое количество баз данных:

Adabas D, InterBase, PostgreSQL, dBase, FrontBase, SQLite, Empress, mSQL, Solid, FilePro, Direct MS-SQL, Sybase, Hyperwave, MySQL, Velocis, IBM DB2, ODBC, Unix, dbm, Informix, Oracle, DBX, Ingres, Ovrimos.

Возможно создание PHP сценариев для работы с протоколами LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (на платформах Windows), WDDX и многими другими.

PHP включает такие средства обработки текстовой информации как регулярные выражения Perl, POSIX Extended, парсеры документов XML, для которых в PHP 4 используются стандарты SAX и DOM. Возможно преобразование документов XML при помощи расширение XSLT. В PHP 5 обработка XML-документов происходит на базе библиотеки libxml2, а также добавлены два новые расширения: SimpleXML и XMLReader.

Для использования PHP в электронной коммерции имеются функции осуществления платежей Cybercash, CyberMUT, VeriSign Payflow Pro и CCVS.

Кроме этого PHP поддерживает много других расширений, например, таких, как функции поисковой машины mnoGoSearch, функции IRC Gateway, функции для работы со сжатыми файлами (gzip, bz2), функции календарных вычислений, функции перевода и т.п.

1.2.3 Технология JavaScript

JavaScript это созданный фирмой Netscape межплатформенный, объектно-ориентированный язык скриптинга (сценариев). Ядро JavaScript содержит набор основных объектов, таких как Array, Date и Math, и основной набор элементов языка, таких как операции, структуры управления и операторы. Ядро JavaScript может быть расширено для различных целей путём дополнения новыми объектами; например:

- клиентский JavaScript расширяет ядро языка, предоставляя объекты управления браузером (Navigator или другой web-браузер) и Document Object Model (DOM). Например, клиентские расширения дают приложению возможность размещать элементы в HTML-форме и реагировать на действия пользователя, такие как щелчок мыши, ввод данных в форму и навигация по страницам;

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

JavaScript позволяет создавать приложения, работающие по всей сети Internet. Клиентские приложения работают в браузере, таком как Netscape Navigator, а серверные приложения - на сервере, таком как Netscape Enterprise Server. Используя JavaScript, Вы можете создавать динамические HTML-страницы, обрабатывающие пользовательский ввод и имеющиеся данные, используя специальные объекты, файлы и реляционные БД.

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

Корпорация Netscape изобрела JavaScript, и JavaScript был впервые использован в браузерах Netscape.

2 РАЗРАБОТКА

2.1 Разработка оболочки

Разработка оболочки – главная задача, правильное решение которой позволяет увеличить уровень юзабилити сайта, увеличить количество новых интернет-пользователей сайта. При разработке оболочки сайта были учтены несколько факторов-требований:

a) поддержка экранов мобильных устройств;

b) простота использования;

c) оптимальное сочетание цветов;

d) отсутствие рекламных баннеров и прочей лишней информации;

e) максимальное использование технологии асинхронных запросов AJAX;

f) плавные переходы и использование анимации;

g) наличие регистрации.

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

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

Учитывая пункт е), а также цвета и символику футбольного «Манчестер Юнайтед», была разработана цветовая гамма сайта с таким условием, чтобы не оказывать сильную нагрузку на зрение человека, и обеспечить приятное времяпровождение на сайте.

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

Использование асинхронных запросов на сервер (AJAX) позволит нам дать пользователю приятные ощущения в виде отсутствия перезагрузки страницы при регистрации на сайте и оставлении комментариев к новостям.

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

Наличие регистрации на сайте позволяет создать свой личный аккаунт, после чего пользователь может оставлять комментарии. Также предусмотрено разделение ролей на «Администратор» и «Пользователь». Роль «Администратор» позволяет вносить изменения в контент сайта (обновление новостей, состава команды, расписания и т.д.), контролировать комментарии пользователей (при необходимости удалять их). Также при регистрации предусмотрено ее подтверждение с высылкой сообщения на адрес электронной почты. Пройдя по ссылке, указанной в сообщении, пользователь и подтверждает регистрацию.

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

При оформлении head-меню сайта в качестве кнопок будем использовать шрифтовую графику свободно распространяемой библиотеки glyphicon.

Рисунок 2.2 – Head-меню сайта

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

Рисунок 2.4 – Форма входа на сайт

Для подтверждения ввода данных необходимо нажать кнопку «Register» или «Log in», которые благодаря js-скрипту проверяют наличие введенной информации в необходимых полях, и, если они не пусты, то обрабатывают информацию. Хочется отметить, что форма регистрации довольно проста и не имеет лишних полей (пол, дата рождения, место проживания и т.д.), что значительно экономит время и упрощает использование информационного ресурса.

Для администратора создали специальную панель контроля, с помощью которой он сможет редактировать контент сайта и осуществлять контроль за комментариями пользователей.

Рисунок 2.5 – Панель администратора

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

Рисунок 2.6 – Страница новостей

Рисунок 2.7 – Страница расписания матчей

Рисунок 2.8 – Комментарии пользователей к новостям

2.2 Разработка алгоритмов работы

2.2.1 Разработка базы данных

Разработку приложения начнем с разработки базы данных. Разработку базы данных будем осуществлять в СУБД MS SQL Server Management Studio 2012. Для повышения функциональности приложения (администрирование, архив), добавим дополнительные сущности. Структура базы данных состоит из 4 основных сущностей.

Определим набор основных сущностей с полями:

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

1. 1 команда;

2. 2 команда;

3. Место;

4. Дата;

5. Текст.

ІІ. Новости

1. Текст;

2. Заглавие;

3. Дата;

4. Изображение.

ІІІ. Комментарии

1. Текст;

2. Дата.

Рис 2.9 – Диаграмма сущностей БД

2.2.2 Описание сущностей базы данных

Sheldue – содержит информацию о расписании матчей.

Posts – содержит информацию о разделе «Новости».

Comments – хранит информацию о комментариях к новостям.

AspNetUsers – содержит информацию о пользователях.

AspNetUserRoles, AspNetRoles, AspNetUserClaims, AspNetUserLogins – Membership, класс, который проверяет учетные данные пользователя и управляет параметрами пользователей .

2.2.3 Описание связей сущностей.

Связь « Posts - Comments - AspNetUsers » означает, что множеству комментариев соответствует одна новость и один пользователь, т.е. определенный пользователь может оставлять неограниченно число комментариев к определенному посту.

AspNetUserRoles – AspNetRoles – AspNetUserClaims – AspNetUserLogins – AspNetUsers – осуществляет регистрацию, вход пользователей и распределение ролей между ними.

2.3 Разработка блок-схем алгоритмов

Рисунок 2.10 – Алгоритм регистрации пользователя на сайте

Рис 2.11 Алгоритм входа пользователя на сайт

ЗАКЛЮЧЕНИЕ

В данной курсовой работе были выполнены все поставленные задачи и достигнута главная цель, а именно: был создан сайт английского футбольного клуба «Манчестер Юнайтед». В ходе данной работы были изучены сайты-аналоги, собрана необходимая информация и выбраны инструментальные средства реализации. Был проведен тщательный анализ всех аналогов, и на основе собранной информации была разработана структура сайта, спроектирована система навигации, определено содержание каждой странички. Также полностью разработан дизайн сайт, учитывая оптимальное сочетание цветовой гаммы. На сайте реализована регистрация пользователей.

Для сайта была разработана структура базы данных, сайт реализован на платформе ASP.NET с использованием языка C#, база заполнена соответствующей информацией. Сайт опубликован на локальном сервере Microsoft IIS. Также сайт корректно отображается в браузерах Opera, Mozilla Firefox, Google Chrome, Internet Explorer и адаптирован для отображения на мобильных устройствах.

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

ЛИТЕРАТУРА

1.Адам Фримен «ASP.NET MVC 4 с примерами на C# 5.0 для профессионалов», 2013

2.Джеффри Палермо «ASP.NET MVC 4 в действии», 2013

3.Эндрю Троелсен «Язык программирования C# 5.0 и платформа .NET 4.5, 6-е издание», 2013

4.Стефан Рэнди Дэвис, Чак Сфер «C# 2005 для "чайников"», 2010

5. Бенкен Е., Самков Г. «AJAX программирование для Интернета», Москва 2009

6. Библиотека MSDN MicroSoft: http://msdn.microsoft.com/

7. Основы ASP.NET 2.0 Автор: А.А. Гаряка, Интернет Университет Информационных Технологий: http://www.intuit.ru/

8. Гайдар Магдануров, видеокурс «Разработка веб-приложений на ASP.NET», Интернет Университет Информационных Технологий: http://www.intuit.ru/

9. Либерти, Д. Программирование на C# /Д. Либерти. – СПб.: Питер, 2009. – 688 с.:ил.

10. Микелсен, К. Язык программирования C# /К. Микелсен. – ДиаСофт, 2002. – 656 с.:ил.

11. Петзольд, Ч. Программирование для Microsoft Windows на С# /Ч. Петзольд. – М.: Русская редакция, 2010. – 880 с.:ил.

12. Рихтер, Д. Программирование на платформе Microsoft.NET Framework / Д. Рихтер. – СПб.: Русская редакция, 2012. – 836 с.:ил.

13. Бенкен Е., Самков Г. «AJAX программирование для Интернета», Москва 2009

14. Петин В. «Сайт на AJAX под ключ. Готовое решение для интернет-магазина», Москва 2011

15. Крейн Д., Паскарелло Э., Джеймс Д. «Ajax в действии», 2006

16. Венц К. «Программирование в ASP.NET AJAX», 2008

PAGE \* MERGEFORMAT4

Разработка неофициального сайта английского футбольного клуба «Манчестер Юнайтед»