Розробка динамічного футбольного сайту Української Прем'єр-Ліги

 

ДИПЛОМНА РОБОТА

з дисципліни Комп'ютерні мережі

на тему

«Розробка динамічного футбольного сайту Української Прем'єр-Ліги»

ЗМІСТ

футбольний веб сайт

ВСТУП

РОЗДІЛ 1. АНАЛІЗ ТЕХНОЛОГІЇ WEB 2.0

.1 Суть та ідея використання технології web 2.0

.1.1 Веб як платформа

.1.2 Технологія веб-сервісів

.1.3 Принцип Mash-up

.1.4 Дизайн

.2 Прогресивні підходи до динамічної генерації веб-змісту

.2.1 Вимоги концепції web 2.0

.2.2 Підхід на основі компіляції модулів

.2.3 Підхід на основі інтерпретуючих сценаріїв

.3 Висновки

РОЗДІЛ 2 .СТАДІЇ ТА ЕТАПИ РЕАЛІЗАЦІЇ ОСНОВНИХ НАПРЯМІВ ДОСЛІДЖЕННЯ, ПРОЕКТУВАННЯ, РОЗРОБКИ

.1 Аналіз предметної області

.1.1 Основні вимоги до реалізації інформаційної системи

.1.2 Основні показники надійності, ефективності та якості інформаційної системи

.1.3 Види забезпечення для створення та розвитку динамічного веб-сайту

.1.4 Стадії реалізації основних напрямів дослідження та проектування

.1.5 Опис предмету вивчення УПЛ

.2 Створення бази даних

.2.1 Обгрунтування створюваної БД

.3 Обгрунтування використовуваних технологій

.4.1 HTML / XHTML

.4.2 СSS

.4.3 PHP

.4.4 Java Script

.4.5 AJAX i JQuery

.4.6 MySQL

.4 Реалізація, написання програмного коду веб-сайту

.4.1 Головна сторінка Index.php

.4.2 Шаблон Shablon-t.php

.4.3 Сторінки командних статистик

.4.4. ajax_like.php

.4.5 Сторінка інформації про матчі

.4.6 Сторінки статистики кращих гравців

.4.7 Cторінки коментарів та детальної турнірної таблиці

.4.8 Сторінка детальної турнірної таблиці

.4.9 Реалізація системи підказок на сайті

ВИСНОВОК

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

ВСТУП

У сучасному суспільстві, із збільшенням автоматизації будь-яких виробничих і невиробничих процесів та підвищення ефективності роботи з великими обсягами інформації, неухильно зростає ступінь комп'ютеризації різних систем. Система інформації про спорт не є винятком. Базовою властивістю інформації є її доступність, можливість задоволення інформаційних потреб максимальної кількості суб'єктів в режимі реального часу. Інформаційною системою, здатною виконувати дані функції, є web-сайт. Відповідно, дипломна робота присвячена дослідженню процесу створення динамічного сайту, звчайно, з використанням технології web 2.0, на прикладі футбольного статистично-аналітичного сайту Української Премєр-Ліги, який, у міру свого розвитку, зможе стати засобом вирішення ряду футбольних завдань у сфері аналітики і статистики.

Мета дослідження - створити сайт, який буде мати можливість наповнення інформацією про стан команд та їх гравців у лізі в режимі реального часу.

Предметом дослідження є вивчення і використання на практиці технологій web 2.0. при створенні динамічного сайту.

Новизна полягає у розробленій архітектурі сайту, та обгрунтуванні алгоритму функцій. Слід відзначити, що більше немає (доступної для широкого загалу) системи, яка веде статистику за кожним гравцем УПЛ.

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

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

Подібна можливість здійсненна завдяки, саме, технології web 2.0. Значення цього терміна до цих пір є предметом численних суперечок, тому не існує єдиного трактування цього поняття. Виділимо дві основні ознаки інформаційних ресурсів, що відносяться до web 2.0.:

повнота і простота взаємодії користувача з контентом, широта можливостей взаємодії без реєстрації.

простота і доступність, всі дії по роботі з середовищем зрозумілі для зручності користувача.

Крім мов HTML / XHTML, CSS нам знадобляться: по-перше, мови PHP, JavaScript, що дозволяють створювати динамічні веб-сторінки, по-друге, засоби створення баз даних (MySQL) для зберігання облікових даних.

РОЗДІЛ 1

АНАЛІЗ ТЕХНОЛОГІЇ WEB 2.0

.1 Суть та ідея використання технології web 2.0

У колах інформаційних фахівців сьогодні досить популярний термін "Веб 2.0". Його використовують, коли хочуть підкреслити інноваційну природу використовуваних технологій. Цей термін був запропонований у 2005 році відомим американським видавцем Тімом О'Рейлі для позначення сукупності прогресивних тенденцій у розвитку веб-технологій (на противагу тенденціям, що показали свою нежиттєздатність - "Web 1.0"). На появу цього нового терміна оперативно відреагували бібліотекознавчі кола, в тому ж 2005 році американський бібліотекознавець Майкл Кейсі за аналогією з термінами "Web 2.0" і "Business 2.0" почав розробку спеціалізованої бібліотекознавчої концепції "Library 2.0" . Послідовним прихильником концепції Кейсі стало найвпливовіше бібліотекознавче видання Library Journal. У 2006 році в ньому була опублікована цілісна концепція "бібліотеки другого покоління" авторства Майкла Кейсі та Лори Савастанюк.

Для початку ознайомимось з визначенням поняття "Веб 2.0". Під цим терміном сьогодні розуміється не стільки сукупність якихось конкретних технологій, скільки філософія представлення інформації в веб-орієнтованому середовищі та побудова інформаційних відносин. Визначень цього терміна сьогодні настільки багато і вони настільки різні, що було б невірно дати якесь одне визначення. В основному, коли говорять про Веб 2.0, говорять про аспекти цього явища, або як про друге покоління мережевих сервісів, що останнім часом стали основою розвитку мережі Інтернет.

Принциповою відмінністю технології Веб 2.0 від технологій Веб 1.0 (сервісів першого покоління мережі Інтернет), є те, що її використання дає змогу не лише переглядати веб-ресурси мережі, а й завантажувати власні, здійснювати обмін цими ресурсами з іншими користувачами, діяти спільно з метою їхнього накопичення, брати участь в обговореннях та ін.

Технології Веб 2.0 справедливо називають соціальними сервісами мережі Інтернет, оскільки їх використання зазвичай здійснюється спільно в межах відповідної групи користувачів. Групи користувачів можуть утворювати цілі мережні співтовариства, які обєднують свої зусилля для досягнення відповідної мети.

Варто зауважити, що використання соціальних сервісів Веб 2.0 не є складним процесом, оскільки не вимагає знань мови програмування або умінь створювати html-сторінки. Простота і зручність використання соціальних сервісів Веб 2.0 дає змогу економити час і не витрачати його на довгі пояснення технології функціонування веб-систем.

Феномен Веб 2.0 можна розділити в межах декількох загальних тенденцій розвитку веб-середовища.

1.1.1 Веб як платформа

Ця концепція є базовою у філософії Веб 2.0. У своїй статті "Що таке Web 2.0?" Тім О'Рейлі називає її "першим правилом Web 2.0". Тут мається на увазі надання користувачам можливостей використовувати програмні додатки безпосередньо за допомогою веб-браузера. Іншими словами ця концепція передбачає проведення всіх необхідних обчислень за допомогою лише тих програмних засобів, які інтегровані з веб-браузером.

1.1.2 Технологія веб-сервісів.

Основною для Веб 2.0 є технологія веб-сервісів.

Веб-сервіси - це технології, що дозволяють одному веб-проекту використовувати програмні додатки іншого. Таким чином, організаціям не потрібно створювати безліч аналогічних продуктів для виконання одних і тих же завдань. Більш широко, це технологія кооперації та координації різних обєктів у процесі створення веб-контенту.

1.1.3 Принцип Mash-up

Тут уже мова йде про інший важливий принципу Веб 2.0 - "мешап" (Mash-up - "змішування" або "мішанина"). Цей принцип означає, що шляхом інтегрування програмних можливостей кількох незалежних один від одного веб-сервісів можливо створити новий унікальний веб-проект.

Використання "колективного інтелекту" (Collective Intelligence) для створення, поліпшення та розповсюдження інформаційного змісту. Ця концепція визначає інше ключові відмінності філософії Веб 1.0 від філософії Веб 2.0. Якщо Веб 1.0 передбачав публікацію документів певними авторами, то Веб "другого покоління" передбачає співпрацю користувачів в процесі створення інформаційного змісту. В рамках цієї ідеї скасовується чіткий поділ суспільства на постачальників і отримувачів інформації.

Поняття колективного інтелекту з'явилося не в контексті Веб 2.0, воно ще в минулому столітті активно використовувалося соціологами і визначалося як здатність групи людей знаходити більш продуктивні рішення, ніж кожен окремий член цієї групи. Але в контексті Веб 2.0 це поняття отримало новий зміст, тепер воно також визначає здатність групи авторів створювати кращий інформаційний зміст, ніж кожен окремий з цих авторів. В іншому аспекті (коли мова йде про системи штучного інтелекту) цей термін також визначає здатність програми надавати кращі результати інформаційного пошуку, якщо інформацію вона отримує з різних джерел.

В системах Веб 2.0 ця концепція отримала досить широке розповсюдження завдяки використання wiki-технології. Ця технологія дозволяє будь-якому користувачеві Інтернету внести свої зміни до змісту будь-якої сторінки wiki-проекту (за винятком певної кількості статичних веб-сторінок) або створити нову сторінку (наприклад, для поняття, яке ще не було визначено).

Розглянемо інші приклади реалізації концепції "колективного інтелекту". Тут, перш за все, необхідно згадати блог-культуру. Блоги (blog, від англ. Web log - мережевий журнал) - це веб-проекти, що містять персональні онлайнові журнали користувачів Інтернету або спільнот користувачів.

За ознакою авторства вони можуть бути особистими або колективними, тобто інформаційне наповнення в блог може додаватися одним користувачем або ж певною групою користувачів, об'єднаних у формальне або неформальне співтовариство. Ключовою в блог-культурі являється також технологія RSS. Ця технологія дозволяє зібрати в єдиному каналі (RSS-потоці) незалежні один від одного інформаційні джерела. Більш просто, технологія RSS - це технологія інформування користувача про зміни у змісті різних веб-джерел.

Тут необхідно пояснити, чому феномен блог-культури був згаданий саме в контексті розгляду концепції "колективного інтелекту". Протягом короткого проміжку часу користувач отримує тисячі різнорідних інформаційних пакетів, сотні різних, часто протилежних, точок зору щодо певних предметів або подій.

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

1.1.4 Дизайн

Поняття Веб 2.0 також відбилося і в дизайні. Кращими стали округлість, імітація опуклих поверхонь, імітація відображень на манер глянцевого пластика. В цілому, сприйняття зовнішнього вигляду на око здається більш приємним. Графіка таких сайтів займає більший обсяг, ніж при використанні аскетичного дизайну. Частково ця тенденція пов'язана з співпало за часом виходом нових версій операційних систем використовують вищезгадані ідеї.

Однак одноманітність таких сайтів явна і останнім часом враховується, а такий одноманітний графічний вигляд класичного дизайну веб 2.0 вважається застарілим і не креативним. Особливо це відбивається в сучасній тенденції створення інформативних сайтів, де головну роль грає простота, витонченість, графічність. У дизайні не повинно бути чітких обмежень, а тільки враховані якості доступності та вподоби до користувача, також дивлячись у якій сфері використовується сайт і якою категорією (группою) суспільства.

.2 Прогресивні підходи до динамічної генерації веб-змісту.

Тут мова йде про цілі стеки прогресивних веб-технологій, стандартів, методик і т.д. Існує один загальний принцип, який об'єднує різні технології, пов'язані з динамічною генерацією. Цей принцип полягає в тому, що на сервері зберігаються не сторінки веб-сайту, а база даних (або декілька баз), звідки беруться дані, необхідні для динамічної генерації веб-сторінок для кожного користувача. Динамічна генерація припускає, що оновлюючи свій веб-сайт новим змістом, розробники лише додають дані в бази даних, а генерування HTML-коду на основі цих даних відбувається автоматично, в процесі сеансів доступу користувачів до сайту.

Коли мова йде про Веб 2.0, насамперед, згадують методику AJAX, яка сама по собі є не веб-технологією, а новим підходом до використання декількох прогресивних технологій веб-програмування. AJAX - це методика створення інтерактивного веб-вмісту з використанням технологій JavaScript і XML, методика часткового перезавантаження веб-сторінок у відповідь на кожну дію користувача. AJAX дозволяє оперативно оновлювати дані, з якими одночасно працює безліч користувачів, оптимізувати навігацію по сайту, дозволяти динамічну зміну інтерфейсу сторінки користувачем або динамічне перетягування елементів сторінки в межах екрану. Варіантів використання цієї методики безліч.- підхід до побудови призначених для користувача інтерфейсів веб-додатків, при якому веб-сторінка, не перезавантажуючись, асихронно завантажує потрібні користувачеві дані. Використання Ajax стало найбільш популярне після того, як Google почала активно використовувати його при створенні своїх сайтів, таких як Gmail і Google Maps.

Часто Ajax вважають синонімом Веб 2.0, що абсолютно не так. Веб 2.0 не прив'язаний до якоїсь одній технології або набору технологій, з тим же успіхом ще в 1999 році можливість асинхронного оновлення сторінки вже надавав Flash 4.

Сам AJAX не є технологією. Це декілька самостійних технологій, що працюють разом.включає:

обробку стандартів XHTML і CSS;

динамічне відображення і інтерактивне використання DOM (Document Object Model);

взаємний обмін і управління даними за допомогою XML і XSLT;

асинхронне витягання даних за допомогою Xmlhttprequest;

Javascript, що об'єднує все це разом

Орієнтований на користувача дизайн (User-centered design (UCD). Філософія Веб 2.0 повністю побудована навколо користувача, його потреб і переваг. У цих умовах принциповим є дизайн проектів. Мова йде про відповідність принципів проектування веб-проектів стандарту ISO 13407:1999 "Людино-орієнтовані процеси проектування інтерактивних систем ". Цей стандарт визначає орієнтований на користувача дизайн, що характеризується активним залученням користувача до процесу розробки програмної системи для досягнення прозорого розуміння користувацьких вимог і відповідного розподілу функцій між користувачами і технологіями, а також інтерактивним характером підходу і мультидисциплінарністю залучених до розробки спеціалістів. Під останнім мається на увазі залучення до розробки проекту різних категорий фахівців: керівників, програмістів, різних категорій, дизайнерів, сервісних фахівців, консультантів, інструкторів і т.д. При цьому важливо, щоб розробкою займалися як технічні фахівці, так і ті, хто володіє комп'ютерними технологіями лише на рівні користувачів.

Необхідно розуміти, що стандарт ISO 13407 був прийнятий в 1999 році, коли багатьох технологій, течій, методик і технічних підходів ще не було. За роки, що минули з часу прийняття цього стандарту, був запропонований цілий ряд методів, за допомогою яких можна досягти рівня орієнтованості на користувача, необхідного стандартом ISO 13407. Сьогодні, поряд з традиційними методами залучення користувачів до процесу розробки дизайну, популярним є також впровадження зворотного зв'язку з користувачами на основі методики AJAX з використанням принципу "колективного розуму".

Вільний вміст (Free Content). Дуже важливим для філософії Веб 2.0 є поняття вільного (безкоштовного) змісту. Найбільш сміливі у висловлюваннях дослідники взагалі пропонують тезу про те, що в сучасному веб-просторі популярність веб-проекту більшою мірою визначається тією кількістю безкоштовного змісту і безкоштовної функціональності, яку на ньому можна отримати.

.2.1 Вимоги концепції web 2.0

Слід відзначити одне правило, яке об'єднує все програмне різноманіття - відповідність стандартам. Інакше пристрої, в кращому випадку, - будуть відображати Web-сторінки неправильно, в гіршому, - взагалі не будуть працювати. Web-дизайнери при створенні Web-сторінок зобов'язані максимально дотримуватися сучасних інтернет-стандартів, щоб їх творіння однаково (або майже однаково) відображалися на всіх пристроях.

Отже, при створенні Web-сторінок слід дотримуватися сучасних інтернет-стандартів. При цьому потрібно повністю відмовитися від застарілих і закритих інтернет-технологій, яік не вписуються в сучасну парадигму Web-дизайну і часто не підтримуються всіма Web-оглядачами (браузерами).

Особливу увагу потрібно звернути на структуру та наповнення Web-сторінок. Структура Web-сторінок повинна бути максимально простою, а наповнення - досить багатим, щоб відвідувач швидко знайшов потрібну йому інформацію. Крім того, необхідно створювати Web-сторінки так, щоб дизайн не заважав сприйняттю інформації.сторінки обов'язково слід робити максимально доступними на будь-яких пристроях. Web-сторінки повинні швидко завантажуватися і виводитися на екран. Також Web-сторінки не повинні вимагати для відображення ніякого додаткового ПЗ.

Фактично тут вже є наведено постулати концепції Web 2.0. Це список правил, яким повинен задовольняти будь Web-сайт, який претендує на звання сучасного. Художньо висловлюючись, це прапор, який спільно несуть трудівники Web-індустрії, крокуючи в ногу з часом.

Також концепція Web 2.0 передбачає чотири принципи, які є "титульним краєм" Web-дизайну. Поки що дуже мало Web-сайтів які абсолютно максимально дотримуються цих принципів (і "домашній" Web-сайт W3C, на жаль, не виняток). Розглянемо їх по порядку.

Принцип перший - поділ вмісту, подання та поведінки Web-сторінки. Тут вміст - це інформація, яка виводиться на Web-сторінці, подання описує формат виведення цієї інформації, а поведедінка - реакцію Web-сторінки або окремих її елементів на дії користувача.

Принцип другий - "вміст, що догружається". Замість того щоб оновлювати всю Web-сторінку у відповідь на клацання на гіперпосиланні, ми можемо довантажувати тільки її частину, яка містить необхідну інформацію. Це сильно зменшить обсяг інформації, що передається по мережі (мережевий трафік) і дозволить виконувати будь-які дії з даними після їх підвантаження.

Принцип третій - генерується вміст. Якась частина Web-сторінки може не завантажуватися по мережі, а генеруватися прямо на місці, в Web-браузері. Так ми ще бальше скоротимо мережевий трафік.

Принцип четвертий - семантична розмітка даних. Вона дозволить нам зв'язати виведені на Web-сторінку дані згідно певним правилам. Наприклад, ми можемо семантично зв'язати сторінки з HTML, і відвідувач, завантаживши яку-небудь сторінку, зможе відразу ж перейти на пов'язані з нею сторінки, що містять додаткові або пов'язані відомості.

В даній роботі докладено зусиль максимального дотримання вимог концепції web 2.0, що додасть багато "плюсів" для існування і розвитку сайту у мережі Інтернет.

.2.2 Підхід на основі компіляції модулів

Компільовані модулі - це модулі типу CGI, які транслюються в виконувані файли і виконуються веб-сервером. Першими веб-додатками для створення динамічних сайтів були окремі модулі CGI (сценарії, створені в основному на мові Perl), які виконувалися на сервері. CGI-сценарії є звичайними програмами. Результатом виконання модуля є сторінка в форматі HTML.

В Інтернет можна безкоштовно завантажити модулі CGI або CGI-скрипти (гостьові книги, зворотний зв'язок, каталоги посилань, пошук по сайту і т.д.), які виконуються на Web-сервері за запитом користувача. З іншого боку CGI визначає спосіб взаємодії клієнтського програми та веб-сервера. CGI забезпечує запуск скрипта на сервері і взаємодія з ним. У подальшому для реалізації цього підходу стали застосовувати інтерфейс (серверне розширення) ISAPI.- інтерфейс прикладного програмування Інтернет-сервера для допоміжних прикладних систем, розроблений спочатку корпорацією Process Software, а потім адаптований Microsoft. Доповнює або заміняє CGI.

.2.3 Підхід на основі інтерпретуючих сценаріїв

У цьому випадку для створення сайту застосовуються серверні скрипти так звані мови сценаріїв. Код сценаріїв, як і НТML-код, є інтерпретованою кодом, тому HTML і сценарії можна комбінувати. Найбільш поширені мови серверних скриптів: Perl, ASP, JSP, PHP, Cold Fusion, Python.

Сценарії взаємодіють з об'єктами на сервері і генерують вихідну інформацію у форматі HTML. Тип серверного скрипта визначається з розширення імені файлу (. Php,. Asp,. Aspx,. Jsp,. Cfm). Якщо Web-сервер отримує запит на сторінку такого типу, то він інтерпретує в ній всі сценарії, в результаті чого генерується веб-сторінка у форматі HTML, яка передається назад браузеру.

Найбільш популярними технологіями (середовищем розробки) створення динамічних веб-сторінок є: CGI, PHP, ASP, ASP.NET, JSP, Cold Fusion, AJAX, Python, CSS, бази даних DB2, MsSQL, Oracle, Access і т.д.

Залежно від розв'язуваних завдань для створення сайту вибирають ту чи іншу мову серверних скриптів. Для створення малих і середніх інтерактивних сайтів доцільно застосувати мова сценаріїв PHP. Конкурентами PHP є технології ASP, JSP, Cold Fusion, Perl. Гідністю мови PHP є те, що він є безкоштовним, має відкриті вихідні коди і працює майже на всіх платформах.

Засоби розробки сайтів забезпечують поділ змістовної частини (контенту) від дизайну (шаблону веб-сторінки), що дозволяє змінювати зміст веб-сторінок, не зачіпаючи їх дизайну і змінювати шаблон сайту не зачіпаючи змісту його сторінок.

.3 Висновки

Можна зробити висновок, що як багато важливих концепцій, Веб 2.0 не має чітких меж. Це, швидше, центр тяжіння. Можна уявити собі Веб-2.0 як безліч правил і практичних рішень. Вони об'єднані в деяку подібність ''сонячної системи'', що складається з вузлів, кожен з яких побудований з врахуванням певних правил і знаходиться на певній дистанції від центру.

У результаті Веб 2.0 став стандартом якості інтернету. А віднесення будь-якого проекту до Веб 2.0 є, кожен раз, справою якісного аналізу. Саме виникнення Веб 2.0 стало результатом переходу кількості в якість. І в результаті множинного аналізу проектів, що позиціонують себе як веб 2.0, стало можливим виділити концептуальні тези Веб 2.0. В даний час Веб 2.0 можна описати і через принципи формування - основні технічні, дизайнерські і технологічні рішення та правила.

Предметно WEB 2.0 виражається:

функціональний візуал;

технологічно і, або геометрично необоротно-розділений інтерфейс по контент-блокам і блокам управління контентом (на відміну від гладкого стилю);

особлива організація представлення даних;

об'єктно-орієнтований інтерфейс (кнопки, закладки не як пересічні посилання, а як особливі функціональні об'єкти, на які можна призначати різні дії);

керована вибірка та виведення даних на сторінці по багатьом параметрам, вибраним користувачем;

розміщення великої кількості інформації на одній сторінці;

перезавантаження тільки тієї частини сторінки, яка змінюється.

Динамічний сайт - це сайт, сторінки якого формуються за допомогою програмного коду. Хоча у свою чергу він може містити окремі статичні сторінки, flash-заставки, анімацію, інше. Можна зробити висновок, що динамічний сайт вимагає певних витрат на розробку, але ці витрати обґрунтовують себе за рахунок зниження витрат на редагування сторінок і розвиток інформаційної системи сайту. Динамічний сайт служить довше й ефективніше статичного, і охоплює всі основні можливості web-сайту.

Навколо самого поняття Веб 2.0 ведуться суперечки. Хтось вважає його суцільною фікцією, лише додатковим маркетинговим ходом, а хтось - справжньою революцією. Проте незаперечним залишається той факт, що Веб 2.0 - це спроба зробити Інтернет зручніше, корисніше для користувача, надати йому більше свободи дій, функцій.

РОЗДІЛ 2

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

.1 Аналіз предметної області

В сучасних ринкових умовах організаційна структура інформування бути життєздатною і динамічною. Тому стає актуальною розробка науково обґрунтованої структури, яка ефективно функціонує умовах відкритого інформаційно-освітнього простору, забезпечує генерацію нових знань і технологій, високу конкурентноздатність. Нова практика прийняття ефективних рішень спирається на комплексне використання інформаційних технологій.

Сучасні управлінські інформаційні системи - головне джерело здійснення автоматизованої діяльності багатьох закладів. Вони базуються на інформаційних технологіях (ІТ), які підвищують рівень та ефективність прийняття управлінських рішень та інформаційних ресурсів, в якості яких розглядаються окремі документи та масиви документів різного рівня, у тому числі інформаційна система (ІС) з організаційно упорядкованою сукупністю документів, інформаційних технологій та засобів обчислювальної техніки і звязку, що реалізують інформаційні процеси. ІТ - система методів та засобів збору, передачі, накопичення, обробки, зберігання, представлення та використання інформаційних ресурсів. Впровадження інформаційних технологій супроводжується радикальними змінами у сфері керування організаційними структурами, менеджментом, кадрами та обробки ділової інформації, що у сукупності забезпечується технологічними процесами та інфраструктурою управлінської інформаційної системи.

Система інформації про спорт також потребує значного поширення, і в цьому не обійтись без ІТ.

2.1.1 Основні вимоги до реалізації інформаційної системи

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

У звязку з цим, головними вимогами до реалізації даної інформаційної системи є забезпечення:

масштабованості, тобто можливості збільшення значень кількісних характеристик системи (обсяг інформаційної бази, кількість робочих місць, кількість серверів тощо);

відкритості, тобто можливості нарощування функціональних можливостей системи;

мобільності, тобто можливості зміни технологічних засобів реалізації функцій системи.

2.1.2 Основні показники надійності, ефективності та якості інформаційної системи

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

Рівень надійності залежить від таких факторів:

складу та рівня надійності технічних засобів, їх взаємодії та надійної структури;

складу та рівня надійності програмних засобів, їх можливостей і взаємозвязку в структурі програмного забезпечення інформаційної системи;

раціонального розподілу задач, які розвязуються системою, між технічними засобами, програмним забезпеченням і персоналом, що обслуговує цю систему;

рівня кваліфікації персоналу, організації робіт і рівня надійності дій персоналу інформаційної системи;

режимів, параметрів та організаційних форм експлуатації комплексу технічних засобів;

ступеня використання різних видів резервування (структурного, інформаційного, часового, алгоритмічного, функціонального);

ступеня використання методів і засобів технічної діагностики;

реальних умов функціонування інформаційної системи.

Ефективність інформаційної системи визначається порівнянням одержаних результатів від функціонування цієї системи і затрат усіх видів ресурсів, необхідних для створення, дії та розвитку цієї системи.

Ефективність таких систем у грошовому вираженні визначається у вигляді трьох основних показників:

річного економічного ефекту;

розрахункового коефіцієнта ефективності капітальних затрат, які пішли на розробку і впровадження системи;

терміну окупності капітальних затрат, які пішли на розробку та впровадження системи.

Ефективність системи обєктивного інформаційного забезпечення, як системи з інтелектуальною спрямованістю, визначається не лише в грошовому вираженні, як зазначено вище. Її ефективність збільшується ще й за рахунок піднесення якості управління, яка може визначатися відповідним коефіцієнтом.

Якість - узагальнена позитивна характеристика інформації, що відображає ступінь її корисності для користувача. Показник якості - одна з важливих позитивних властивостей інформації.

Якість можна образно зобразити у вигляді зорі, характеристики про яку є різними. Астрологи характеризують зорю по своїх показниках, як маса, відстань від певної планети, приналежність до галактики і т.д. Звичайні люди можуть сказати про ступінь світла, що вона випромінює, про красу на небі. Так само якість можна охарактеризувати з точки зору користувача, з боку властивостей збереження даних (інформації), з боку явища або обєкту,що відображається (функціонує).

Рис 2.1 Бачення якості інформаційних систем

1. Властивості з точки зору користувача:

релевантність - здатність інформації відповідати потребам (запитам) споживача;

повнота - властивість інформації вичерпно (для даного процесу) характеризувати об'єкт, що відображається, і/або процес. Вся інформація може бути релевантною, але її недостатньо для потреб споживача;

своєчасність - здатність інформації відповідати потребам споживача в потрібний момент часу (отримана інформація може застаріти);

достовірність - властивість інформації не мати прихованих помилок;

доступність - властивість інформації, що характеризує можливість її отримання даним користувачем;

захищеність - властивість, що характеризує неможливість несанкціонованого використання або зміни;

економічність - властивість, що характеризує зручність форми або об'єму інформації з погляду даного користувача.

. Властивості з боку об'єкту, що відображається, або явища:

адекватність - властивість інформації однозначна відповідати об'єкту, що відображається, або явищу. Адекватність виявляється через релевантність і достовірність.

. Властивості, пов'язані з процесом зберігання:

Живучість - здатність інформації зберігати свою якість з часом.

Унікальність - якщо інформація зберігається в єдиному екземплярі.

Саме використання сучасних інформаційних технологій дозволяє найбільш повно забезпечити необхідною інформацією з зазначеними властивостями для прийняття оптимальних рішень з точки зору її сталого розвитку. Практика засвідчує, що спортивно-інформаційні сайти, які використовують у своїй діяльності системи на основі сучасних інформаційних технологій є більш конкурентоспроможними, і привабливішими, ніж ті, що працюють без використання вище перерахованих властивостей та без дотримання концепцій Веб 2.0.

Коефіцієнт підвищення якості управління - це умовна величина, що визначається показником поліпшення якості управління порівняно з тим, що було до впровадження нової інформаційної системи, і визначається через показники зменшення часу, який витрачався на збирання інформації, її обробку та доставку користувачам, а також на аналіз і вироблення управлінських рішень. Ідеться про те, що рівень компетентності та інші аналогічні фактори у менеджерів як до, так і після впровадження цієї системи були незмінні. Крім того, функціонування такої системи на обєкті управління створює реальні умови для вдосконалення форм і методів управління.

2.1.3 Види забезпечення для створення та розвитку динамічного веб-сайту

Успішне вирішення покладених на веб-сайт завдань, потребує створення комплексу забезпечень таких основних видів.

Нормативно-правове забезпечення утворюється системою стандартів, що визначають системну структуру , порядок створення, функціонування та розвитку інформаційної системи сайту та її підсистем, відповідальність за інформаційне наповнення специфічною для них достовірною інформацією.

Організаційне забезпечення утворюють організаційні механізми, що забезпечують розвиток інформаційних і комунікаційних технологій шляхом розробки, побудови та підтримки функціонування інформаційної системи. Такими організаційними механізмами в даній темі (УПЛ) є: адміністратори.

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

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

ПЗ утворюють функціонально повні комплекси компютерних програм, які реалізують алгоритми, що входять до складу математичного забезпечення. Програмне забезпечення складають програми загального призначення (наприклад, операційні системи, системи управління базами даних тощо) та прикладні програми як легально придбані, так і власної розробки. При розробці програмного забезпечення та його придбанні пріоритет повинен надаватися таким програмним комплексам, які є незалежними від апаратної та системної платформ, мають відкритий код і розповсюджуються на умовах ліцензії GPL (General Public Licence).

Інформаційне забезпечення утворюють комплекси електронних інформаційних ресурсів (бази даних, Інтернет-ресурси тощо). Доступ до цих ресурсів надається за допомогою програмних засобів зі складу програмного забезпечення. Повнота та якість інформаційного забезпечення є важливим чинником успішності функціонування інформаційної системи динамічного сайту. Основним джерелом конкретного наповнення інформаційних ресурсів є безпосередні події під час футбольного матчу, занесення даних про які потрібно організовувати в режимі реального часу .

2.1.4 Стадії реалізації основних напрямів дослідження та проектування

З метою забезпечення еволюційного характеру розвитку web-сайту, відкритості, мобільності та масштабованості технічних рішень, реалізація цих основних напрямів повинна відбуватися за ітеративною схемою з чотирьох стадій передпроектні дослідження - технічний проект - робочий проект - введення в дію, що гарантує підтримку всіх процесів життєвого циклу інформаційної системи відповідно до стандарту ISO/IEC 12207. Зміст зазначених стадій визначений цим стандартом поданий у табл. 2.1.

Таблиця 2.1 Зміст основних стадій побудови інформаційних систем

СтадіяЗмістПередпроектні дослідженняна цій стадії визначаються межі системи, провадиться оцінка розміру системи та оцінка вартості її створенняТехнічний проектна цій стадії зясовуються детальні вимоги до системи, здійснюється високорівневий аналіз предметної області та проектування базової архітектури системи, розробляється план конструювання та усуваються найбільш ризиковані елементи проектуРобочий проектна цій стадії побудова системи здійснюється шляхом серії ітерацій, кожна з яких є своєрідним міні-проектом; для кожної ітерації для конкретних функцій системи виконується аналіз, проектування, кодування, тестування та інтеграція, яка завершується демонстрацією користувачам та виконанням системних тестів з метою контролю коректності реалізації функційВведення в діюна цій стадії здійснюється передача готового продукту в розпорядження користувачів шляхом виконання бета-тестування (для пересвідчення в тому, що система відповідає сподіванням користувачів), паралельного функціонування з існуючими рішеннями, що підлягають поступовій заміні, конвертування баз даних, оптимізації продуктивності та навчання користувачів та спеціалістів служби супроводження

.1.5 Опис предмету вивчення УПЛ.

УПЛ - це ліга або обєднання шістнадцятьох, в даний момент, найсильніших українських професійних футбольних клубів з метою футбольних змагань. Принцип у змаганнях, що кожна команда повинна зіграти з кожною два матчі - домашній і виїзний. Тобто змагання поділяються на 30 турів, визначення пар суперників визначає офіційне жеребкування перед початком сезону. Місця розділяються згідно з сумою набраних очок - залікових пунктів. Верхні місця беруть участь у міжнародних європейських змаганнях, як Ліга Чемпіонів та Ліга Європи. УПЛ як офіційна організація має свій власний сайт, також існує багато спортивно-інформаційних сайтів, але слід зауважити, що інформація між ними дублюються, і немає детальної статистики для кожного гравця. Тому поставлено завдання: розробити власну систему оцінки - від загального (турнірного становища) - до детального (статистики по кожному гравцеві команди).

2.2 Створення бази даних.

База даних (БД) - це засіб для реляційного, ефективного зберігання інформації. Іншими словами, БД забезпечує надійний захист даних від випадкової втрати або псування, ощадливо використовує людські та технічні ресурси, а також забезпечена механізмами пошуку інформації. Саме поняття база даних може означати як окремий набір даних (наприклад, список адрес), так і набагато більш складну систему (наприклад, SQL Server). Бази даних - це один із найскладніших типів комерційних додатків. Всі інші типи систем, як правило, мають близькі аналогії в реальному світі.

В даний час розроблено і використовуються на персональних комп'ютерах близько двадцяти систем управління базами даних. Вони надають користувачу зручні засоби інтерактивної взаємодії з БД і мають розвинену мову програмування.

Система керування базами даних (СКБД) - це інструмент для збору великих порцій інформації, який дозволяє керувати або зберігати її в цілісності протягом тривалого періоду і забезпечує до неї ефективний доступ.

СКБД - це комплекс мовних та програмних засобів, потрібних для створення, ведення і спільного використання баз даних багатьма користувачами. СКБД також представляє собою сукупність даних, які зберігаються у памяті системи і відображають стан обєктів та їх взаємозвязків в конкретній предметній області.

Робота над БД уособлювала вивчення мови запитів SQL.(Structured Query Language - мова структурованих запитів) - універсальна комп'ютерна мова, яка застосовується для створення, модифікації і керування даними в реляційних базах даних.

Запит - команда, яку ви даєте вашій програмі бази даних. Всі запити в SQL складаються з одиночної команди, структура якої залежить від складності оцінки і обробки даних.

Щоб володіти мовою SQL необхідно знати як пишуться інструкції. Синтаксичні конструкції SQL діляться на чотири основні категорії:

-ідентифікатори. Представляють собою користувацькі або системні імена обєктів баз даних, таких, як база даних, таблиця, обмеження в таблиці, стовпці таблиці, представлення і т.д.

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

-оператори. Символи, що показують яка дія виконується над одним або кількома виразами, частіше в інструкціях INSERT, DELETE, SELECT або UPDATE. Оператори також часто використовуються для створення обєктів бази даних

-зарезервовані і ключові слова. Мають спеціальний зміст для обробки коду SQL. Наприклад, SELECT, GRANT, DELETE або CREATE. Зарезервовані слова (Reserved words), зазвичай команди і інструкції SQL, не можна використовувати в якості ідентифікаторів на даній платформі. Ключові слова (keywords) - це слова, які можуть стати зарезервованими в майбутньому.

2.2.1 Обгрунтування створюваної БД.

При роботі з сайтами майже завжди необхідно звертатися до БД, це потрібно і при розробці сайту, тестуванні певних модулів так і при встановленні будь-якої CMS(системи управління контентом, - програмним забезпеченням призначеним для конструювання і керування веб-сайтами) Для створення використовується система phpMyAdmin.

Щоб мати можливість зайти в phpMyAdmin, треба щоб він був встановлений або на локальному сервері або хостингу в інтернеті. phpMyAdmin має багато функцій і команд для керування, редагування, копіювання, видалення даних з БД. Саме за допомогою СКБД phpMyAdmin були реалізовані таблиці як показано на наступному рисунку.

Рис 2.2 «Таблиці бази даних в середовищі phpMyAdmin»

Опис основних таблиць бази

clubs: таблиця для зберігання інформації про футбольні команди. Містить поля: position (місце в турнірній таблиці), club_img (адреса логотипу клубу), href_club (адреса сторінки сайту, де розміщена інформація про команду), club(Ключове поле, що є повною назвою клубу), last5(зігані останні 5 матчів: Н,В,або П), games(кількість зіграних ігор) , wins(к-сть перемог), draw(к-сть нічиїх) , no_wins(к-сть поразок), goals (сума забитих голів), miss_goals(сума пропущених голів), balls(різниця забитих та пропущених мячів), points (сума набраних залікових пунктів - очок).

players: таблиця для зберігання інформації про кожного гравця. Містить поля: id_player (ключове поле, ідентифікатор), nom(ігровий номер), place(амплуа), player(повне імя), nationality(національність), club(футбольний клуб), games(зіграно ігор), goals(забито голів), pass(віддано гольових передач пасів), minutes(проведено хвилин у грі), no_goals(кількість сухих ігор), miss_goals(пропущених командних мячів), yellow_cards(отримано жовтих карток), red_cards(отримано червоних карток), koef(коефіцієнт результативності), likes(набрано лайків).

zzz_pozition: таблиця для зберігання записів з метою запобігання дублювання.

matches: таблиця для збереження інформації що стосується проведення матчів.

players_match: таблиця для збереження інформації про гравців - учасників матчу.

info_matches: таблиця для зберігання інформації щодо деталей матчу.

users: таблиця для збереження інформації про користувачів. Містить поля: id(ключове поле, ідентифікатор), name(назва), ip(текуча або остання ip-адреса, з якої проходив сеанс легування), mail(адреса електронної пошти), mitka1(мітка1), mitka2(мітка2).

coments: таблиця призначена для зберігання основного інформаційного наповненя. Містить поля: id (ідентифікатор, ключове поле), img_href_mini(адреса малої ілюстрації), text_tytle(заголовок статті), text_beginning(початковий текст), img_href(адреса основної ілюстрації), text_all(увесь текст), dod1(адреса додатку, відео, фото, аудіо), dod2(адреса додатку, відео, фото, аудіо), dod3 (адреса додатку, відео, фото, аудіо).

ip: таблиця для збереження ip-адрес користувачів, що поставили лайки футболістам. Містяться поля ip_id (ідентифікатор, ключове поле), player_id_fk (ідентифікатор гравця), ip_add (ip-адреса).

quests_ip: таблиця для зберігання ip-адрес залогованих користувачів, що брали участь у опитуваннях. Містяться поля: id(ідентифікатор, ключове поле), id_qk(ідентифікатор обраного варіанту у опитуванні), ip_adrr(ip-адреса).

quests_kind: таблиця для зберігання варіантів опитування. ip_qk(ідентифікатор, ключове поле), ip_q(ідентифікатор теми питання), name(назва варіанту відповіді), likes(набрано голосів).

quests: таблиця для зберігання тем опитування, містить поля: id_q(ідентифікатор, ключове поле), name(назва теми), info(додаткова інформація).

zap_kor: таблиця для зберігання інформації щодо записів користувачів. Містить поля: id_zapys (ідентифікатор, ключове поле), id_theme (ідентифікатор тематики, що має зв'язок із полем id таблиці coments), id_user(ідентифікатор користувача), data(дата запису), zapys(текст запису).

Відповідні звязки між таблицями бази даних реалізуються у програмному коді - за допомогою php-скрипту, що створюється на етапі реалізації роботи системи.

2.3 Обгрунтування використовуваних технологій.

Привабливість Web-технологій як засобу доставки інформації багато в чому визначає універсальний інтерфейс між людиною і комп'ютером. Кожній людині зрозумілі написи, заголовки, посилання, картинки. Веб-інтерфейс як засіб доступу до інформації інтуїтивно зрозумілий. Наслідком простоти веб-інтерфейсу є широко вживаність Інтернету як каналу комунікації. Браузер - програма для перегляду веб-сторінок і роботи з інформацією в веб-інтерфейсі. Браузери - програми, якими забезпечені всі сучасні комп'ютери велике число т.зв. «Гаджетів». Теоретично всі браузери повинні відображати всі сайти, зроблені за стандартами, однаково. Практично є безліч тонкощів і складнощів. Найбільш популярні браузери: Internet Explorer, Firefox, Opera, Safari, Chrome.

Значення Web-технології, як для розробників програмного забезпечення, так і для звичайних користувачів багато в чому визначається тим, що це, перш за все - інтеграційна технологія. І важко знайти більш вдалий приклад того, як можна інтегрувати різні джерела інформації та різні її типи. Веб-технології дозволяють створювати прості для освоєння, легкодоступні, украй дешеві, швидко обновлювані інформаційні, діалогові, довідкові системи.

Хочу відразу сказати, що не існує однієї мови програмування, яка би перевершувала всі інші. Перевага будь-якої мови програмування може виявлятися тільки в контексті будь-якої задачі. Але це зовсім необов'язково. Багато задач можуть бути ефективно вирішені за допомогою будь-якого сучасного популярного мови програмування. Часто, вибір мови та фреймворка визначається тим, якими знаннями володіють програмісти та їх готовністю реалізувати даний проект. У більшості випадків, в цьому немає нічого поганого, скоріше навпаки, якщо посадити, наприклад, ASP.NET програмістів на PHP проект, то результат може виявитися плачевним.

Рис 2.3 Популярні фреймворки і мови програмування.

Необхідно, також, розуміти різницю між мовою програмування і фреймворком. Мова програмування - це просто деякий базовий синтаксис (можливо зі стандартними бібліотеками), за допомогою якого можна створювати додатки. Фреймворк ж надає програмісту різні бібліотеки, значно спрощують створення програм і сайтів. Деякі мови і фреймворки являють собою нерозривне ціле (наприклад, ASP.NET і JSP). Інші мови можуть використовуватися без фреймворка (PHP і Perl).

Незалежно від того, яка мова програмування буде обраний, в основі будь-якого сайту лежить мова гіпертекстової розмітки - HTML. Його повинні знати всі веб-розробники.

Власне, одного HTML вже достатньо для того, щоб робити сайти. Але це будуть статичні сайти, без зворотного зв'язку з користувачами. Крім того, поновлення таких статичних сайтів трудомісткі. Для додання сайту динаміки, використовуються мови веб-програмування.

У першу чергу, мови веб-програмування можна класифікувати на клієнтські і серверні. Як випливає з назви, клієнтські мови використовуються для написання програм, що виконуються на стороні клієнта (веб-браузер), а серверні - для програм, які виконуються на сервері.

Серед клієнтських мов веб-програмування треба виділити JavaScript, який, також як і HTML, лежить в основі багатьох веб-технологій (наприклад, в основі популярної останнім часом технології AJAX) і вміння програмувати на ньому ставиться до базових знань веб-розробника.

Інші популярні клієнтські мови, а точніше фреймворки - це Adobe Flash (мова ActionScript) і SilverLight (будь-які. NET мови). Adobe Flash застосовується веб-майстрами дуже давно. Основне застосування цієї технології - інтерактивні сайти і сервіси, онлайнові ігри, мультимедійний контент і реклама. SilverLight - це нова технологія, розроблена компанією Microsoft і позиціонується як заміна Adobe Flash. Не дивлячись на те, що за допомогою Adobe Flash або SilverLight можна побудувати повністю весь сайт, так робити не слід (за рідкісним винятком). Справа в тому, що пошукачі поки не вміють індексувати ні Adobe Flash, ні SilverLight.

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

Якщо говорити про ОС Windows, то тут безроздільно панує технологія ASP.NET, розроблена компанією Microsoft. За допомогою ASP.NET можна створювати сайти будь-якого рівня складності - від найпростіших, що складаються їх декількох сторінок, до дуже складних, що обробляють мільйони запитів в день (сайти Microsoft, написані на ASP.NET, є одними з найбільш відвідуваних в Інтернет). Технологія ASP.NET приваблива для тих, хто непогано розбирається в ОС Windows, але незнайомий з Unix-подібними системами. Основний недолік - меншa, порівняно з Unix, кількість дешевих хостингів чи необхідність покупки серверної ліцензії, у випадку з виділеним хостингом. Однак, у порівнянні з вартістю розробки складних сайтів, а, також, вартістю трафіку, різниця витрат на Windows- і Unix- хостинг може бути малою.

Найбільш популярною мовою веб-програмування є, безумовно, PHP. Її основними перевагами є: простий синтаксис, висока швидкодія, підтримка більшістю хостингів. Дуже вагомою перевагою є те, що на PHP написано багато популярних движків (наприклад, найпопулярніший движок для stand alone блогів - WordPress).

Інша популярна мова веб-програмування на платформі Unix - мова Perl. Вона має складний заплутаний синтаксис і рідко призначається для веб-програмування.(Java Server Pages) - це частина технології J2EE, призначена для створення сайтів за допомогою мови Java. JSP має дуже багато спільного з ASP.NET і вибір між цими двома технологіями найчастіше грунтується на суб'єктивних перевагах, а не на яких-небудь перевагах чи недолікак цих платформ.

Останнім часом високу популярність придбала мова Ruby і, зокрема, фреймворк Ruby on Rails. З його допомогою можна дуже швидко створити сайт з необхідною функціональністю. Одним з істотних недоліків Ruby є низька швидкодія. Слід зауважити, що вибір мови веб-програмування для сайту нерозривно пов'язаний з вибором CMS сайту.

В розробці данного проекту, крім мов HTML / XHTML, CSS використовуються: по-перше, мови PHP, JavaScript, що дозволяють створювати динамічні веб-сторінки, по-друге, засоби створення баз даних (MySQL) для зберігання облікових даних.

2.3.1 HTML / XHTML

Зараз існує тенденція, аби код веб-сторінки відповідав стандартам мови XHTML, і сторінка веб-сайту повністю була оформлена як xhtml-документ. Мова XHTML (EXtensible HyperText Markup Language, розширена мова розмітки гіпертексту) є проміжною мовою між HTML і XML. Мова XML (Extensible Markup Language, Розширювана Мова Розмітки)- це мова що дозволяє створювати свої теги. Мова XML відрізняється від HTML не лише можливістю створювати свої теги, але і підходом до обробки документа браузером.має строгий набір правил оформлення документа, при порушенні яких, браузер повинен забракувати даний документ. На відміну від XML, виконання документа HTML має бути продовжене в будь-якому разі, і браузер повинен ігнорувати помилки і відображувати хоч що-небудь. Мова XHTML розроблялася для заміни HTML, і являє собою HTML, що підпорядковується строгим правилам синтаксису. При обробці XHTML-документа також як і при обробці XML-документа, помилки не допускаються.

Дані у форматі HTML нагадують звичайні текстові файли за винятком того, що деякі символи в них (так звані теги (tag)) інтерпретуються як розмітка. Розмітка надає документу деяку, визначену тегами, структуру: параграфи, розділи, абзаци, списки, малюнки, таблиці, колонтитули, індекси, зміст тощо. Всередині кожного блоку можна змінювати шрифт, розмір символів, колір тексту, виділяти текст курсивом та/або робити його напівжирним. Головною особливістю HTML є спроможність використовувати гіперзв'язки (links), завдяки яким можливі посилання та переходи з поточної веб-сторінки на інші документи, як локальні (документи поточного сервера), так і такі, що знаходяться на серверах в найвіддаленіших регіонах земної кулі. Мова HTML, також дозволяє вставляти в документи зображення, звук, відео та ін. Перегляд HTML-документу здійснюється за допомогою веб-оглядача (браузера).

.3.2 СSS

CSS розшифровується як Cascading Style Sheets і означає каскадні таблиці стилів. За допомогою стилістичної мови CSS визначається відображення HTML документів. На відміну від мови HTML, яка використовується для web-сторінок, CSS працює з різними кольорами, шрифтами, стрічками, полями, шириною, заввишки, картинками, розподіляє різні елементи і так далі.

У мови HTML простіша сфера використання, з його допомогою структурують зміст web-сторінок. А використовуючи CSS, web-дизайнер форматує цей зміст. Мова HTML була розроблена в часи, коли World Wide Web було тільки створене Тімом Бернесом Лі. Але вже тоді теги HTML використовували для виведення стилізованого тексту, для його розмітки(параграф, заголовок і тому подібне), наприклад теги h1 і p. З часом професійні web -дизайнери знайшли способи форматування документації online. При збільшенні споживчих вимог, і з метою їх задоволення, організації - виробники Інтернет-браузерів створили безліч таких тегів HTML, як, наприклад, font, визначають зовнішній вигляд, а не структуризацію. Після чого усі структурні теги (наприклад, table) замість використання для стилізації тексту стали застосовуватися в дизайнерських рішеннях для web-сторінок. Багато знову створених дизайнерських тегів (приміром, blink) підтримувалися тільки одним конкретним браузером. Тому стандартна фраза на багатьох web -сторінках звучала так - щоб відкрити цю сторінку, вам знадобиться браузер Х". Для усунення цієї проблеми і була створена мова CSS, за допомогою якої для web -дизайнерів відкрилися нові можливості для створення чіткого дизайну сторінок. Одночасно з цим стався перерозподіл зображення і вмісту документів, що значно спростило роботу з ними. Поява мови CSS стала справжнім проривом у світі web-дизайну. CSS став широко застосовуватися завдяки своїм перевагам, а саме постійний контроль над зовнішнім виглядом web-сторінок, професійна дизайнерська техніка, управління роботою безлічі документів за допомогою тільки однієї стилістичної таблиці, а також різні види для різноманітних носіїв даних.

.3.3 PHP

PHP - мова розробки програмного забезпечення для Web, написана розробниками Web і для розробників Web. Сама назва PHP є рекурсивним скороченням від PHP: Hypertext Preprocessor (препроцесор гіпертексту PHP). Спочатку цей програмний продукт іменувався Personal Home Page Tools, і багато хто до цих пір вважають, що абревіатура PHP розшифровується саме так. Але з часом появи першої версії PHP область застосування цієї мови значно розширилася, тому за спільною згодою спільноти користувачів PHP було прийнято нове і більш прийнятне визначення яке стало рекурсивним. В даний час використовується п'ята основна версія РНР, яка скорочено позначається як РНР5, але може також позначатися просто як РНР.

РНР - це серверна мова сценаріїв, яка може бути впроваджений в код HTML для розгортання в браузері. Ще один варіант використання сценаріїв на цій мові може передбачати їх автономне виконання (але набагато ширше застосовується перший варіант). До цієї категорії належать також такі програмні продукти, що знаходяться у власності окремих компаній, як Active Server Pages (ASP) компанії Microsoft, ColdFusion компанії Macromedia і Java Server Pages (JSP) компанії Sun. У деяких журналах з програмування мова РНР часто називають "мовою ASP з відкритим початковим кодом", оскільки цей програмний продукт за своїми функціональними можливостями аналогічний програмному продукту Microsoft. Але таке формулювання вводить в оману, оскільки мова РНР був розроблений раніше, ніж ASP. А протягом останніх кількох років застосування РНР і серверних засобів Java розширюється, тоді як сфера використання ASP звужується, тому зазначене порівняння стає ще більш неприйнятним.

Строго кажучи, мова РНР практично не застосовується для створення компонування, обробки подій, виконання маніпуляцій з елементами об'єктної моделі документа (Document Object Model - DOM), а також фактично не впливає на те, як виглядає Web-сторінка або які звуки на ній відтворюються. Насправді основна частина дій, які виконуються в коді РНР, залишається непомітною для кінцевого користувача. Зокрема, перегляд сторінки, створеної за допомогою мови РНР, аж ніяк не дозволяє судити про те, що для написання коду цієї сторінки застосовувалась якась інша мова, крім HTML, оскільки зазвичай результатом відтворення коду РНР є код HTML.

В даний час програмне забезпечення підтримки мови РНР формально введено у вигляді окремого модуля до складу програм HTTP-сервера Apache, домінуючого на ринку безкоштовного Web-сервера, який застосовується для обробки близько 67% трафіку World Wide Web (згідно широко відомому аналітичному огляду, що стосується застосування Web-сервсров різних типів, який підготовлений компанією Netcraft). Це означає, що машина підтримки сценаріїв РНР може бути вбудована безпосередньо в сам Web-сервер, що сприяє прискоренню обробки, більш ефективному розподілу пам'яті і значного спрощення супроводу. Інтерпретатор мови РНР, як і сервер Apache, повністю забезпечує експлуатацію додатків на різних програмних та апаратних платформах. Це означає, що додатки, написані на цій мові, можуть експлуатуватися в своєму безпосередньому вигляді у багатьох різновидах операційної системи Unix, в різних версіях операційної системи Windows, а з недавнього часу - в операційній системі Mac OS X. Всі проекти, що розробляються під егідою фонду Apache Software Foundation, включаючи РНР, представляють собою програмне забезпечення з відкритим вихідним кодом.

Отже, це досить проста у використанні мова web-програмування. ЇЇ зручно використовувати для того щоб додати динаміку та інтерактивність на своєму сайті. PHP скрипти повинні розміщатися у файлах з розширенням .php.

.3.4 Java Script

Мова Java Script являє собою мову сценаріїв для Web. Java Script є підмножиною мови Java, але не є частиною мови Java і призначена для програмістів та користувачів, котрі хочуть використати та застосувати нові функціональні можливості мови НТМL.

На відміну від аплетів Java, які принципово відрізняються від ресурсів HTML і повинні динамічно завантажуватися при звертанні до сторінки web, сценарій JavaScript включаються в сторінку HTML за допомогою дескриптора та інтерпретування броузером в режимі реального часу. Крім того, JavaScript можливо застосовувати для створення серверних додатків.

В якості попередників JavaScript можливо розглянути ряд невеликих проблемно-орієнтованих мов, наприклад, HyperTalk, dBase та LiveScript. На таких мовах, завдяки їх синтаксичній простоті, вмонтованій функціональній простоті створення обєктів може програмувати навіть початківець. JavaScript дозволяє вносити в сторінки web інтерактивність, забезпечує взаємодію з користувачем, підтримує заповнення форм введення та переміщення по web-документу. Деякі потужні типи систем інтерактивної взаємодії вдається реалізувати за рахунок комбінації можливостей JavaScript з іншими властивостями сторінок web, наприклад, роботи з фреймами та вмонтованими додатками. JavaScript стала новим відкритим стандартом мови сценаріїв Internet, яка підтримується багатьма компаніями.

2.3.5 AJAX i JQuery- інструмент для побудови веб-додатків, які обмінюються даними з сервером у фоновому режимі. При цьому користувач отримує додаток з динамічним оновленням контенту, без перезавантаження всієї сторінки.- JavaScript-framework, бібліотека, що дозволяє більш зручно використовувати деякі можливість Javascript, такі як: створення візуальних ефектів, обробка подій, робота з DOM і підтримка AJAX.

На сьогоднішній день найбільш розповсюджений спосіб обміну даними від клієнта до сервера без перезавантаження вікна браузера є технологія програмування Ajax. Дана технологія найбільш просто і функціонально працює при використанні бібліотеки JavaScript із відкритим кодом - Jquery.

Щоб підключити бібліотеку Jquery достатньо завантажити файл цієї бібліотеки звідси: #"justify"><script type="text/javascript" src="#"justify">Після підключення можна писати Аякс запит.

В данному проекті ця технологія використовується в системі голосування.

.3.6 MySQL

Mysql - це реляційна система управління базами даних. Тобто дані в її базах зберігаються у вигляді логічно пов'язаних між собою таблиць, доступ до яких здійснюється за допомогою мови запитів SQL. Mysql - вільно поширювана система, тобто платити за її застосування не потрібно. Крім того, це досить швидка, надійна і, головне, проста у використанні СУБД, цілком підходяща для не надто глобальних проектів.

Працювати з Mysql можна не тільки в текстовому режимі, але і в графічному. Існує дуже популярний візуальний інтерфейс (до речі, написаний на PHP) для роботи з цією СУБД. Називається він PhpMyAdmin. Цей інтерфейс дозволяє значно спростити роботу з базами даних в Mysql.

PhpMyAdmin дозволяє користуватися всіма перевагами браузера, включаючи прокручування зображення, якщо воно не вміщується на екран. Багато хто з базових SQLфункцій роботи з даними в PhpMyAdmin зведені до інтуїтивно зрозумілим інтерфейсом і діям, що нагадує перехід по посиланнях в Internet.

.4 Реалізація, написання програмного коду веб-сайту

Головна сторінка системи представлена індексною сторінкою, файлом формату .php. Але даний файл містить не лише php-код, але й стилі та html-код. Також даний файл посилається на shablon-t.php, у якому реалізуються компоненти, які зустрічатимуться не тільки на головній сторінці, а й на інших (напр.: бокове меню і ін.).

2.4.1 Головна сторінка Index.php

<?php_once ("../shablon-t.php")

?>;

#black

{:absolute;:0px;:0px;

}

#div-table

{:absolute;:152px;:890px;

}

#diva-tablea-hreffa

{: absolute;: 880px;: 890px;

}

#black_k

{:absolute;:155px;:400px;

}

#center_title_text

{: absolute;: 155px;: 430px;: white;size: 15pt;family: fantasy;weight: bolder;: 450px;: 216px;

}

#center_coments_img1

{:absolute;:340px;:430px;

}

#center_coments_read1

{: absolute;: 460px;: 430px;

}

#cnter_coments_txt1

{:absolute;:320px;:560px;: white;: 300px;: 300px;family: sans-serif;

}

#center_coments_img2

{:absolute;:560px;:430px;

}

#center_coments_read2

{: absolute;: 680px;: 430px;

}

#cnter_coments_txt2

{:absolute;:540px;:560px;: white;: 300px;: 300px;family: sans-serif;

}

#center_coments_img3

{:absolute;:780px;:430px;

}

#center_coments_read3

{: absolute;: 900px;: 430px;

}

#cnter_coments_txt3

{:absolute;:760px;:560px;: white;: 300px;: 300px;family: sans-serif;

}

#center_coments_all

{: absolute;: 980px;: 520px;

}

#div_embl_fifa

{: absolute;: 950px;: 900px;

}

#div_embl_raz

{: absolute;: 950px;: 980px;

}

.table_sh

{: url("../white.png");

}

.table_all

{

}

.a1 {size: 18px;decoration: none;: white;

}

.a2 {size: 15px;decoration: none;: white;

}

.a3 {size: 20px;decoration: blink;: white;

}

.a_left

{size: 14px;decoration:none;weight: bold;family: fantasy;: blue;

}, tr, td, th

{:1px solid #fff;collapse:collapse;width: 30pt;width: 275pt;: 30pt;size: 11pt;family: sans-serif;weight: bolder;: white;

}

#ourtable td.top

{align: center;

}

->

</style>

<div id="black"><img src="../img/black.png" width="1261" height="140"/></div>

<div id="div_kontakty"><img src="../img/white_listik.png" width="180px" height="130px"/></div>

<div id="div_kontakty2">З пропозиціями звертайтесь на mail:<p> [email protected]</p> </div>

<div id="div-sha"><img src="../img/aow2.png" width="559" height="105" /></div>

<div id="div-left-menu-img"><img src="../img/blocknote.png" width="430" height="586" />

</div>

<div id="div-left-menu-txt">

<ul id="my-menu">

<li><a>

<li><a>

<ul><li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

</ul></li>

<li><a>

<li><a>

<ul><li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

<li><a>

</ul></li>

<li><a>

<li><a>

</div>

<div id="div-table">

<table id="ourtable" style="background: url('../img/black.png') repeat;" >

<tr ><td>

<?php

$db=mysql_connect('localhost','analyt0125730','0c9c18676f30');_select_db('analyt0125730',$db);_query("SET NAMES cp1251");

$result=mysql_query('Select position, club_img, href_club, club, games, points from clubs order by position ',$db);

$row=mysql_fetch_array($result);

{

$a+=1;"<tr ><td>

}($row=mysql_fetch_array($result));

?>

</table>

</div>

<div id="diva-tablea-hreffa"><a href="../ua/clubs/det_t.php"> <img src="../img/clubs/det_t.png" width="360" alt="det"/></a></div>

<div id="black_k">

<img src="../img/black.png" width="475" height="900"/>

</div>

<div id="center_title_text">

<p>Analytics-upl.com.ua - це новостворений статистично-аналітичний сайт про Українську Прем'єр-Лігу. </p>

<p>Дізнайтесь більше про футбол !!!</p>

</div>

<div id="center_coments_img1">

<?php

//1й блок

$result=mysql_query('Select imgs_href_mini from coments where id=31; ',$db);

$row=mysql_fetch_array($result);"<img src='$row[imgs_href_mini]'/>";

?>

</div>

<div id="cnter_coments_txt1">

<?php

$result=mysql_query('Select text_tytle, text_beginning from coments where id=31; ',$db);

$row=mysql_fetch_array($result);"<h3><a href='../ua/coments/31.php'>

?>

</div>

<div id="center_coments_read1"><a href='../ua/coments/31.php'><img src="../img/read.png" /></a> </div>

<div id="center_coments_img2">

<?php

// 2й блок

$result=mysql_query('Select imgs_href_mini from coments where id=30; ',$db);

$row=mysql_fetch_array($result);"<img src='$row[imgs_href_mini]'/>";

?>

</div>

<div id="cnter_coments_txt2">

<?php

$result=mysql_query('Select text_tytle, text_beginning from coments where id=30; ',$db);

$row=mysql_fetch_array($result);"<h3><a href='../ua/coments/30.php'>

?>

</div>

<div id="center_coments_read2"><a href='../ua/coments/30.php'><img src="../img/read.png" /></a></div>

<div id="center_coments_img3">

<?php

// 3й блок

$result=mysql_query('Select imgs_href_mini from coments where id=29; ',$db);

$row=mysql_fetch_array($result);"<img src='$row[imgs_href_mini]'/>";

?>

</div>

<div id="cnter_coments_txt3">

<?php

$result=mysql_query('Select text_tytle, text_beginning from coments where id=29; ',$db);

$row=mysql_fetch_array($result);"<h3><a href='../ua/coments/29.php'>

?>

</div>

<div id="center_coments_read3"><a href='../ua/coments/29.php'><img src="../img/read.png" /></a></div>

<div id="center_coments_all"><a href="../ua/coments/">

<div id="div_embl_fifa"><img src="../img/fifa.jpg" width="65" height="65" /></div>

<div id="div_embl_raz"><img src="../img/raz.jpg" width="47" height="65" /> </div>

<div id="vk_like_main">

<script type="text/javascript">

//title=<?=$tytle?>;.Widgets.Like("vk_like_main", {type: "button", pageTitle:'analytics-upl.com.ua', pageImage:'#"justify"></script>

</div>

</body>

</html>

2.4.2 Шаблон Shablon-t.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"#"justify"><html>

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>

<title>>>> analytics-upl.ua <<<</title>

<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript" src="../jquery.cookie.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('ul#my-menu ul').each(function(i) { // Check each submenu:($.cookie('submenuMark-' + i)) { // If index of submenu is marked in cookies:

$(this).show().prev().removeClass('collapsed').addClass('expanded'); // Show it (add apropriate classes)

}else {

$(this).hide().prev().removeClass('expanded').addClass('collapsed'); // Hide it

}

$(this).prev().addClass('collapsible').click(function() { // Attach an event listenerthis_i = $('ul#my-menu ul').index($(this).next()); // The index of the submenu of the clicked link($(this).next().css('display') == 'none') {

// When opening one submenu, we hide all same level submenus:

$(this).parent('li').parent('ul').find('ul').each(function(j) {(j != this_i) {

$(this).slideUp(200, function () {

$(this).prev().removeClass('expanded').addClass('collapsed');($('ul#my-menu ul').index($(this)));

});

}

});

// :end

$(this).next().slideDown(200, function () { // Show submenu:

$(this).prev().removeClass('collapsed').addClass('expanded');(this_i);

});

}else {

$(this).next().slideUp(200, function () { // Hide submenu:

$(this).prev().removeClass('expanded').addClass('collapsed');(this_i);

$(this).find('ul').each(function() {

$(this).hide(0, cookieDel($('ul#my-menu ul').index($(this)))).prev().removeClass('expanded').addClass('collapsed');

});

});

}false; // Prohibit the browser to follow the link address

});

});

});cookieSet(index) {

$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'}); // Set mark to cookie (submenu is shown):

}cookieDel(index) {

$.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); // Delete mark from cookie (submenu is hidden):

}

</script>

<style type="text/css">.sample-menu { padding:0;margin:10px 15px; }.sample-menu li { padding:2px 0;margin:0;list-style:none; }.sample-menu li ul { padding:0;margin:0 0 0 15px; }#my-menu a { padding-left:8px; }#my-menu a.collapsed { background:url('collapsed.gif') left 6px no-repeat; }#my-menu a.expanded { background:url('expanded.gif') left 6px no-repeat; }

</style>

<script type="text/javascript" src="#"justify"><script type="text/javascript">.init({apiId: 3041094, onlyWidgets: true});

</script>

</head>

<body>

<style type="text/css">

<!--

{image: url("../img/hd2.jpg");repeat: no-repeat;

}

#vk_like_main

{: absolute;: 220px;: 680px;

}

#div_kontakty

{:absolute;:5px;:1070px;

}

#div_kontakty2

{: absolute;: 50px;align: center;: 1090px;size: 9pt;: black;: 140px;: 100px;: caption;

}

#div-left-menu-txt

{: absolute;: 175px;:50px;

}

#div-left-menu-img

{: absolute;: 145px;: 0px;

}

#div-sha

{:absolute;:15px;:360px;

}

#black

{:absolute;:0px;:0px;

}

.4.3 Сторінки командних статистик

На даній сторінці відображається повна статистична інформація про вибраний футбольний клуб. Для прикладу продемонструємо програмний код та результат роботи сторінки футбольного клубу Карпати Львів.

karpaty.php

<?php_once("shablon-t.php")

?>;

</style>

</style>

<div id="div_stadion"><img src="../../img/clubs/stadion_kar.png" width="70%" height="70%" /> </div>

<div id="div_club_ico"><img src="../../img/clubs/club_karpaty.gif" /></div>

<div id="div_clubs_name">ФК Карпати Львів</div>

<div id="div_tablea">

<table id="ourtable_main">

<tr>

<tr>

<?php

// Вивід воротарів команди

$sql=mysql_query("Select id_player,nom, player, nationality, games, goals, pass, minutes, no_goals,miss_goals, yellow_cards,red_cards,likes, koef from players where club='Карпати Львів' and place='Воротар' order by player ",$db);

//$row=mysql_fetch_array($result);($row=mysql_fetch_array($sql))

{

$id_player=$row['id_player'];

$likes=$row['likes'];

?>

<tr>

<?php

}

?>

<tr>

<?php

// Вивід захисників команди

$sql=mysql_query("Select id_player,nom, player, nationality, games, goals, pass, minutes, no_goals,miss_goals, yellow_cards,red_cards,likes, koef from players where club='Карпати Львів' and place='Захисник' order by player ",$db);

//$row=mysql_fetch_array($result);($row=mysql_fetch_array($sql))

{

$id_player=$row['id_player'];

$likes=$row['likes'];

?>

<tr>

<?php

}

?>

<tr>

<?php

// Вивід півзахисників команди

$sql=mysql_query("Select id_player,nom, player, nationality, games, goals, pass, minutes, no_goals,miss_goals, yellow_cards,red_cards,likes, koef from players where club='Карпати Львів' and place='Півзахисник' order by player ",$db);

//$row=mysql_fetch_array($result);($row=mysql_fetch_array($sql))

{

$id_player=$row['id_player'];

$likes=$row['likes'];

?>

<tr>

<?php

}

?>

<tr>

<?php

// Вивід нападників команди

$sql=mysql_query("Select id_player,nom, player, nationality, games, goals, pass, minutes, no_goals,miss_goals, yellow_cards,red_cards,likes, koef from players where club='Карпати Львів' and place='Нападник' order by player ",$db);

//$row=mysql_fetch_array($result);($row=mysql_fetch_array($sql))

{

$id_player=$row['id_player'];

$likes=$row['likes'];

?>

<tr>

<?php

}

?>

</table>

</div>

</body>

</html>

Результат показано на наступному рисунку:

Рис 2.4.3 Сторінка ФК Карпати Львів

На даній сторінці також організовано процедуру лайкування (put likes) для футболістів. Дана можливість реалізована за допомогою AJAX-технології. Далі наведено код цього скрипту:

<script type="text/javascript" src="#"justify"><script>

$(document).ready(function()

{

$("span.on_img").mouseover(function ()

{

$(this).addClass("over_img");

});

$("span.on_img").mouseout(function ()

{

$(this).removeClass("over_img");

});

});

$(function() {

$(".love").click(function()

{id = $(this).attr("id");dataString = 'id='+ id ;parent = $(this);

$(this).fadeOut(300);

$.ajax({: "POST",: "ajax_like.php",: dataString,: false,: function(html)

{.html(html);.fadeIn(300);

}

});false;

});

});

</script>

Даний скрипт звертається до php-файлу ajax_like.php, у якому реалізовано сценарій лайкування.

2.4.4. ajax_like.php

<?php

$db=mysql_connect('localhost','analyt0125730','0c9c18676f30');_select_db('analyt0125730',$db);_query("SET NAMES cp1251");

$ip=$_SERVER['REMOTE_ADDR'];($_POST['id'])

{

$id=$_POST['id'];

$ip_sql=mysql_query("select ip_add from ip where player_id_fk='$id' and ip_add='$ip'");

$count=mysql_num_rows($ip_sql);($count==0)

{

$sql = "update players set likes=likes+1 where id_player='$id'";_query( $sql);

$sql_in = "insert into ip (ip_add,player_id_fk) values ('$ip','$id')";_query( $sql_in);

$result=mysql_query("select likes from players where player='$id'");

$row=mysql_fetch_array($result);

$likes=$row['likes'];

?>

<span>

<?php echo $likes; ?>

<?

}

{'Twice can not be';

}

}

?>

2.4.5 Сторінка інформації про матчі

На даній сторінці відображається розклад матчів та їх результати.Далі наведений код цієї сторінки.

<?php_once("shablon-t.php")

?>;

</style>

</style>

<div id="div_detal_all_table_title">Матчі УПЛ сезону 2012/13</div>

<div id="div_detal_all_table">

<table id="ourtable_main">

<tr>

<?php

$result=mysql_query('Select end_of_match, DATE_FORMAT(data, "%d.%m.%Y") AS data1 ,DATE_FORMAT(time,"%H:%i") as time1,club1,club2,result1,result2, href_match from matches where tour=1 order by data ',$db);

$row=mysql_fetch_array($result);

{($row['end_of_match']==0)

{ $row['result1']='-';

$row['result2']='-';

}"<tr>

}($row=mysql_fetch_array($result));

?>

<tr>

<?php

$result=mysql_query('Select end_of_match, DATE_FORMAT(data, "%d.%m.%Y") AS data1 ,DATE_FORMAT(time,"%H:%i") as time1,club1,club2,result1,result2, href_match from matches where tour=2 order by data ',$db);

$row=mysql_fetch_array($result);

{"<tr>

}($row=mysql_fetch_array($result));

?>

<tr>

<?php

$result=mysql_query('Select end_of_match, DATE_FORMAT(data, "%d.%m.%Y") AS data1 ,DATE_FORMAT(time,"%H:%i") as time1,club1,club2,result1,result2, href_match from matches where tour=3 order by data ',$db);

$row=mysql_fetch_array($result);

{($row['end_of_match']==0)

{ $row['result1']='-';

$row['result2']='-';

}"<tr>

}($row=mysql_fetch_array($result));

?>

<tr>

<?php

$result=mysql_query('Select end_of_match, DATE_FORMAT(data, "%d.%m.%Y") AS data1 ,DATE_FORMAT(time,"%H:%i") as time1,club1,club2,result1,result2, href_match from matches where tour=4 order by data,time ',$db);

$row=mysql_fetch_array($result);

{($row['end_of_match']==0)

{ $row['result1']='-';

$row['result2']='-';

}"<tr>

}($row=mysql_fetch_array($result));

?>

<tr>

<?php

$result=mysql_query('Select end_of_match, DATE_FORMAT(data, "%d.%m.%Y") AS data1 ,DATE_FORMAT(time,"%H:%i") as time1,club1,club2,result1,result2, href_match from matches where tour=5 order by data,time ',$db);

$row=mysql_fetch_array($result);

{($row['end_of_match']==0)

{ $row['result1']='-';

$row['result2']='-';

}"<tr>

}($row=mysql_fetch_array($result));

?>

</table>

</body>

</html>

Результат показано на наступному рисунку.

Рис. 2.4.5Сторінка календару матчів.

.4.6 Сторінки статистики кращих гравців

На даній сторінці відображено ТОП-10 гравців по різних категоріях. Для прикладу наведемо сторінку кращих голкіперів Ліги.

Рис. 2.4.6 Сторінка статистики кращих воротарів.

Далі наведено код best_v.php.

<?php_once("shablon-t.php")

?>;

</style>

</style>

<div id="div_detal_all_table_title">ТОП-10 кращих воротарів за коефіцієнтом результативності</div>

<div id="div_tablea_pl">

<table bgcolor="#408080" id="ourtable_main">

<tr>

<?php

$result=mysql_query("Select nom, player, club, nationality, koef from players where place='Воротар' order by koef DESC limit 0,10; ",$db);

$row=mysql_fetch_array($result);

{

$a+=1;"<tr>

}($row=mysql_fetch_array($result));

?>

</table>

</div>

</body>

</html>

2.4.7 Cторінки коментарів та детальної турнірної таблиці.

За вищенаведеним принципом будуються сторінки коментарів та детальної турнірної таблиці. Тобто контент динамічно оновлюється відповідаючи запитам користувача. Наприклад сторінка статті «Шумиха» навколо Мігеля Велосо знаходиться за адресою /coments/2.php і згідно реалізованому в ньому сценарії витягує із БД записи відповідної таблиці і динамічно та структуровано розміщує їх на сторінці. Далі наведено цей код та результат.

<div id="div_detal_all_table_title">Коментарі... Дізнайтесь більше про футбол !</div>

<div id="coments_some_ico">

<?php

$result=mysql_query('Select img_href, imgs_href_mini from coments where id=2; ',$db);

$row=mysql_fetch_array($result);"<img src='../$row[img_href]'/>";

?>

</div>

<div id="coments_some_txt">

<?php

$result=mysql_query('Select img_href,text_tytle, text_all from coments where id=2; ',$db);

$row=mysql_fetch_array($result);"<h3>$row[text_tytle]</h3>.<h4>$row[text_all]</h4>";

?>

</div>

Рис. 2.4.7 Сторінка статті.

2.4.8 Сторінка детальної турнірної таблиці

<?php_once("shablon-t.php")

?>;

</style>

</style>

<?php_once ("shablon_div.php")

?>;

<div id="div_detal_all_table_title">Турнірна таблиця команд УПЛ сезону 2012/13</div>

<div id="div_detal_all_table">

<table id="ourtable_main">

<tr>

<td colspan="2"> Клуб </td> <td><span>

<td> <span>

<td> <span>

<td> <span>

<td> <span>

</tr>

<?php

$result=mysql_query('Select position, club_img, href_club, club, last5, games, wins, draw, no_wins, goals, miss_goals, balls, points from clubs order by position',$db);

$row=mysql_fetch_array($result);

$result_g=mysql_query('select count(club1) as games from matches, clubs where end_of_match=1 group by club',$db);

$games=mysql_fetch_array($result_g);

{"<tr>

<td align=center>$row[position]</td>

<td><A href='../$row[href_club]'> <IMG SRC=../$row[club_img] height=50% ></A></td>

<td> $row[club] </td>

<td > <span>

<td align=center> <span>

<td align=center><span>

<td align=center><span>

<td align=center><span>

<td align=center><span>

<td align=center><span>

<td align=center><span>

<td align=center><span>

</tr>";

}($row=mysql_fetch_array($result));

?>

</table>

</div>

</body>

</html>

Сторінка детальної турнірної таблиці структуровано відображає всі дані таблиці бази даних clubs.

Результат показано на наступному рисунку.

Рис. 2.4.8 Сторінка детальної турнірної таблиці

2.4.9 Реалізація системи підказок на сайті

Слід відзначити, що важливою складовою даного проетку є великі таблиці, тому для зручної орієнації в них реалізовано принцип підказок за допомогою <span>являється) при наведені курсору на певний запис комірки таблиці. Далі проілюстровано приклади результату. На першій ілюстрації видно, що число -4 для ФК Карпати Львів означає різницю забитих і пропущених мячів. На другій ілюстрації видно, Артем Мілевський зіграв лише одну гру, тоді, як для прикладу, його одноклубник Андрій Ярмоленко 4 гри.

Рис. 2.4.9 Вигляд реалізованої підказки, яка з'явилась при наведені курсору у відповідне місце таблиці.

ВИСНОВОК

В ході виконання дипломної роботи був розроблений робочий багатофункціональних динамічний веб-сайт Футбольний статистично-аналітичний сайт Української Прем'єр-Ліги. Сайт є повністю готовим до застосування. З його допомогою користувачі зможуть отримувати необхідну інформацію про події ліги, статистику кожного гравця. Є можливість для користувачів ставити свої уподобання (likes) для футболістів, яку реалізовано завдяки технології AJAX.

При розробці веб-сайту були проаналізовані сучасні веб-технології, що дозволяють створювати динамічні веб-сторінки. Найбільш відповідними для виконання поставленого завдання виявилися Adobe Dreamweaver CS3 та phpDesigner7.

Розроблений сайт задовольняє всім вимогам, поставленим на етапі постановки завдання.

Як подальше вдосконалення веб-сайта представляється можливою розробкою модулів. В сайті можна реалізувати все. І чим більше інформації він міститиме, тим більшою буде його популярність. Так само можливе доопрацювання інтерфейсу сайту з метою подальшого підвищення його інформативності, привабливості.

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1.Перевозчикова О.Л. Сучасні інформаційні технології. К:2009, Інститут економіки та права «Крок».

2.Державний стандарт України. Ситеми оброблення інформації. РОЗРОБЛЕННЯ СИСТЕМ. Терміни та визначення. ДСТУ 2941-94. Держстандарт України, Київ, 2010.

3.А.Матросов, А.Сергеев, М.Чазнин - HTML 4.0.

4.Тім ОРейлі - web 2.0.

5.Дронов В.А. - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. - СПб.: БХВ-Петербург, 2011.

6.Толстых В.К. Динамичесмкий HTML 4.0. Уч.-метод. Пособие Донецк: ДонНУ, 2006. - 32 с.

7.Толстых В.К. Современные Internet-технологии: конспект (слайды) лекцій.

.Толстых В.К. Internet-технологии разработки приложений: конспект (слайды) лекций.

9.Энди Гутманс, Стинг Баккен, Дери Ретанс - PHP5. Профессиональное программирование.

.Толстых В.К. Справочник Web-программиста.

11.Кристиан Дари, Богдан Бринзаре - AJAX и PHP: разработка динамических веб-приложений.

.Твердохліб М.Г - Інформаційне забезпечення менеджменту.

ДИПЛОМНА РОБОТА з дисципліни Комп'ютерні мережі на тему «Розробка динамічного футбольного сайт

Больше работ по теме: