Міністерство  освіти і науки, молоді та спорту України

Дніпропетровський національний університет імені  Олеся Гончара 

Факультет заочної та дистанційної освіти

Кафедра комп'ютерних технологій 
 

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

за  ОКР бакалавра 
 

 
 
 
 
 
 
 
 
 
 
 
 

Дніпропетровськ

2011

 

     

РЕФЕРАТ

      Дипломна  робота: 40 с., рис. 0, табл. 3, джерел 5, додатків 2.

      Об’єкт  дослідження: cистеми керування вмістом

      Мета  роботи: створення безкоштовної cистеми керування вмістом. Створюваний веб-додаток є веб-сайтом з можливістю редагування вмісту сторінок і використання деяких можливостей HTML5.

      Одержані  висновки та їх новизна: розроблена нова оригінальна cистеми керування вмістом, яка є зручною у використанні та дозволяє застосовувати деякі можливості HTML5.

      Результати  дослідження можуть бути застосовані для створення веб-сайтів які застосовують нові веб-технології.

      Перелік ключових слів: СИСТЕМА КЕРУВАННЯ ВМІСТОМ, HTML5, ВЕБ-САЙТИ, ВЕБ-РОЗРОБКА.

 

ANNOTATION

 

      The graduation research of the 4–year student M. Sckvortzov (DNU, Distance and Correspondence Education Department, the Computer Technologies Chair) deals with methods of creating web-applications using modern web-technologies. There was created a Content Management System with usage of HTML5. This Content Management System requires installation on server with support of PHP v5.1 or newer and MySQL.

      The work is interesting for the students while studying special course on web-development.

      Bibliography 40, pictures 0, tables 3, supplements 2.

 

Зміст 
 

Вступ          5

Постановка завдання        7

1. Огляд існуючих технологій      8

1.1 Веб-розробка         8

1.1.1 Серверні мови        8

1.1.2 Клієнтські мови        17

1.2 Системи керування вмістом      21

1.3 HMTL5          26

2. Вибір технологій розробки       30

2.1 Мова програмування       30

2.2 Система керування  базами даних     32

2.3 JavaScript фреймворк       32

2.4 WYSIWYG редактор       33

3. Опис роботи         34

3.1 Абстрактна модель  програми      34

3.2 Проектування бази  даних       34

3.3 Створення структури програми      36

3.4 Розробка ядра програми       37

Висновки          39

Література          40

Додаток А          41

Додаток Б          44 
 
 
 
 
 
 

 

Вступ 
 

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

   У цей час для того, щоб власноручно  створювати сучасні сайти потрібно володіти деякими веб-технологіями, такими як HTML, JavaScript, CSS, Flash, PHP, AJAX, які позволяють створювати сайти будь якої складності – від простого інформативного сайта з кількома статичними сторінками (це можна зробити без технологій PHP та AJAX), до величезних мультіпорталів, націлених на десятки а то й сотні тисяч відвідувачів. Звісно, не кожен має можливість (або бажання) вчити всі ці технології та їх особливості, однак у цей час власні сайти можна створювати і без знання усіх цих технологій. Для цього існують готові рішення, які можна використати в якості шаблона, наповнюючи їх своїм власним вмістом (контентом). Такі готові рішення, як CMS (англ. Content Management System, Система Керування Вмістом), являються дуже розповсюдженим засобом для створення сайтів середньої складності без знання усіх технологічних тонкощів процесу створення сайтів.

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

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

   Сучасні браузери вже почали підтримувати таку технологію, як HTML5, хоча ця технологія ще остаточно не затверджена як стандарт. Технологія HTML5 дозволяє веб-розробникам розширити можливості своїх сайтів за рахунок розширення можливостей браузерів. До нових можливостей відносяться такі, як підтримка прямого програвання відео/аудіо контенту (раніше для цього були необхідні спеціальні доповнення до бразуеру), підтримка векторної графіки на рівні браузера (новий елемент canvas, SVG-графіка), 3D графіка прямо на html сторінці (WebGL), тощо. Повноцінний розвиток сайтів на HTML5 пригальмовується через те, що найпопулярніший браузер Microsoft Internet Explorer (до 8 версії включно) не підтримує переважної більшості нових можливостей HTML5, в наслідок чого веб-розробникам доводиться вдаватися до різноманітних так званих «хаков», повзоляючих обходити цю проблему. Зокрема, HTML5 містить нові теги, що прийшли на заміну тегам div, що раніше повсюдно застосовувалися - такі теги, як header, footer, article, nav. Однак через несумісність, браузер IE8 ігнорує ці нові теги, вважаючи їх помилковими. Для вирішення цієї проблеми існують деякі JS-скрипти, які позбавляють браузер від ігнорування цих тегів. Таким чином вже зараз можна пробувати реалізовувати сайт на основі HTML5, припускаючи, що в більшості випадків проблем несумісності не виникне.

 

Постановка завдання 
 

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

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

   Зі  сторони клієнту повинні підтримуватися всі браузери, які були реалізовані з підтримкою нової технології HTML5. Найвідоміші з них це Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Internet Explorer 9. Окрім цього має бути реалізована сумісність з іншими браузерами або з ранніми версіями даних браузерів.

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

   Ключовою  можливістю створюваної системи  керування вмістом повинна бути можливість додавати на сторінки тег video - новий HTML-тег, що з'явився в HTML5, що дозволяє переглядати медіа-файли у високій якості не використовуючи сторонні плагіни браузера (Flash, Java тощо).

   Результат цієї роботи повинен буде вирішити одразу два завдання - розроблена система керування вмістом повинна мати підтримку HTML5 і бути відносно простою в експлуатації.

 

1. Огляд існуючих технологій

 
 

1. Веб-розробка

 
 

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

1. Серверні  мови

 
 

   Коли  користувач дає запит на будь-яку  сторінку (переходить на неї по посиланню  або вводить адресу в адресному  рядку свого браузера), то викликана сторінка спочатку обробляється на сервері, тобто виконуються всі програми, пов'язані зі сторінкою, і тільки потім повертається до відвідувача мережі у вигляді файлу. Цей файл може мати розширення: HTML, PHP, ASP, Perl, SSI, XML, DHTML, XHTML.

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

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

   Порівняємо  декілька найпопулярніших серверних  мов і технологій веб-програмування: 
 

   ASP.NET 
 

   ASP.NET - технологія створення веб-додатків  і веб-сервісів від компанії Майкрософт. Вона є складовою частиною платформи Microsoft. NET і розвитком старішої технології Microsoft ASP. На даний момент останньою версією цієї технології є ASP.NET 4.0.

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