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

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

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

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

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

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

 
 
 
 
 
 
 
 
 
 
 
 

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

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 і, отже, використовує всі нові можливості, що надаються цією платформой.

   Після випуску сервера Internet Information Services 4.0 в 1997 році, компанія Microsoft почала досліджувати можливість нової моделі веб-додатки, яка задовольнить скарги на ASP, особливо пов'язані з відділенням оформлення від змісту, і яка дозволить писати «чистий» код. Робота з розробки такої моделі була доручена Марку Андерсу, менеджеру команди IIS, і Скотту Гутрі, що надійшов на роботу в Microsoft в 1997. Андерс і Гутрі розробили початковий проект протягом двох місяців, і Гутрі написав код первісного прототипу під час різдвяних канікул 1997 року.

   Початковий  проект називався «XSP». Прототип XSP був написаний на Java, але скоро було вирішено побудувати нову платформу на основі Common Language Runtime (CLR). Гутрі описав це рішення як «величезний ризик», тому що успіх нової розробки був пов'язаний з успіхом CLR, яка, як і XSP, перебувала на ранній стадії розробки.

   Хоча ASP.NET бере свою назву від старої технології Microsoft ASP, вона значно від неї відрізняється. Microsoft повністю перебудувала ASP.NET, грунтуючись на Common Language Runtime (CLR), який є основою всіх додатків Microsoft. NET. Розробники можуть писати код для ASP.NET, використовуючи практично будь-які мови програмування, що входять у комплект. NET Framework (C #, Visual Basic.NET, і JScript. NET). ASP.NET має перевагу у швидкості в порівнянні зі скриптовими технологіями, тому що при першому зверненні код компілюється і поміщається в спеціальний кеш, і згодом тільки виконується, не вимагаючи витрат часу на парсинг, оптимізацію, і т. д.

   Технологія ASP.NET приваблива для тих, хто непогано розбирається в ОС Windows, але незнайомий з Unix-подібними системами. Основний недолік - менше, в порівнянні з *nix, кількість дешевих хостингів або необхідність купівлі серверної ліцензії, у випадку з виділеним хостингом. Проте, в порівнянні з вартістю розробки складних сайтів, а, також, вартістю трафіку, різниця витрат на Windows і *nix хостинг може бути пренебрежимо мала. 
 

   Perl 
 

   Perl — високорівнева, інтерпретована, динамічна мова програмування  загального призначення. Perl було розроблено у 1987 році Ларі Воллом, лінгвістом і програмістом за освітою, який у той час працював системним адміністратором у NASA, як скриптова мова для Unix, метою якої було полегшити процес обробки текстів файлів журналів. З того часу до мови було внесено багато змін, і здійснено перегляд її концепції та архітектури, в результаті чого вона стала дуже популярною серед програмістів.

   Perl запозичує можливості з багатьох  інших мов програмування, як  то C, shell scripting, AWK та sed. Мова надає потужні можливості для обробки тексту без довільних обмежень на довжину даних багатьох сучасних інструментів Unix, полегшуючи процес маніпуляції текстових файлів.

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

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

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

   Perl запозичив списки з мови Lisp, асоціативні  масиви (хеші) з AWK, і регулярні  вирази з sed. Це зпростило процес  парсингу і обробки великих  обсягів текстової інформації.

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

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

   Дизайн Perl можна описати, як відповідь на три основні тенденції в комп'ютерної індустрії: зниження вартості апаратного забезпечення, зростання вартості робочої сили, а також вдосконалення технології компіляторів. Багато ранніх мов програмування, як то Fortran та C, були розроблені таким чином, щоб якомога ефективніше використовувати на той час дороге апаратне забезпеченя. У протилежність, Perl було розроблено для підвищення ефективності роботи дорогих на даний час програмістів.

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

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

   Для роботи з web Perl потребує від серверу  підтримки CGI технології. 
 

   JSP 
 

   JSP (JavaServer Pages) - технологія, що дозволяє веб-розробникам легко створювати вміст, який має як статичні, так і динамічні компоненти. По суті, сторінка JSP є текстовим документом, який містить текст двох типів: статичні вихідні дані, які можуть бути оформлені в одному з текстових форматів HTML, SVG, WML, або XML, і JSP елементи, які конструюють динамічний вміст. Крім цього можуть використовуватись бібліотеки JSP тегів, а також EL (Expression Language), для впровадження Java-коду в статичний вміст JSP-сторінок.

   JSP - одна із високопродуктивних технологій, тому що весь код сторінки транслюється в java-код сервлета за допомогою компілятора JSP сторінок Jasper, і потім компілюється в байт-код віртуальної машини java (JVM). Сервлет-контейнери (Apache Tomcat), здатні виконувати JSP сторінки, написані на платформонезалежній мові Java, яка може працювати під різними операційними системами й платформами. JSP сторінки завантажуються на сервері і управляються зі структури спеціального Java server packet, який називається Java EE Web Application, в більшості своїй упакована в файлові архіви .war і .ear.

   Вигода, яку дає технологія JSP в порівнянні з іншими веб-технологіями полягає  в тому, що JSP є платформонезалежна і легко розширюваною технологією  для розробки веб-додатків.

   JSP дозволяють відокремити динамічну  частину сторінок від статичного HTML. JSP сторінки мають розширення .jsp і розміщуються там же, де  і звичайні Web сторінки. Структура  таких сторінок може складатися  з п'яти конструкцій: HTML, коментарі, скриптові елементи, директиви і дії. JSP сторінка при компіляції перетворюється на звичайний сервлет зі статичним вмістом, яка направляється в потік виводу, пов'язаний з методом service. Тому при першому запиті цей процес може викликати якусь затримку, але в більшості своїй непомітну першому користувачу. Коментарі в документі або програмі служать до пояснення вмісту. Вони не є причиною уповільнення програми, так як транслятор і виконавець їх ігнорують. Скриптові елементи дозволяють вам вказати код на мові Java, який згодом стане частиною кінцевого сервлета, директиви дадуть вам можливість управляти всією структурою сервлета, а дії служать для завдання існуючих використовуваних компонентів, а також для контролю над поведінкою движка JSP.  
 
 
 

   Ruby on Rails 
 

   Ruby on Rails — об'єктно-орієнтований програмний  каркас (framework) для створення веб-застосунків,  написаний на мові програмування  Ruby. Ruby on Rails надає каркас модель-вид-контролер  (Model-View-Controller) для веб-застосунків,  а також забезпечує їх інтеграцію з веб-сервером і сервером бази даних.

   Ruby on Rails є відкритим програмним забезпеченням  і розповсюджується за ліцензією  MIT.

   Ruby on Rails визначає принципи розробки  застосунків:

• Застосунки не повинні визначати власну архітектуру, оскільки вони використовують готовий каркас модель-вид-контролер
• Мова Ruby дозволяє використовувати нотацію, що легко читається, для визначення семантики застосунків (таких як відносини між таблицями в базі даних).
• Ruby on Rails надає механізми повторного використання, що дозволяють мінімізувати дублювання коду в застосунках (принцип Don't Repeat Yourself).
• За замовчуванням використовуються угоди по конфігурації, типові для більшості застосунків (принцип Convention over configuration). Явна специфікація конфігурації потрібна тільки в нестандартних випадках.

   Основними компонентами застосунків Ruby on Rails є  модель (model), вид (view) і контролер (controller).

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

   Завдяки можливостям динамічної типізації  в мові Ruby розробникові досить успадковувати  свій клас моделі від базового класу ActiveRecord::Base. Ruby on Rails автоматично пов'язує класи моделі з таблицями в базі даних і створює атрибути об'єктів для відповідних полів таблиці.

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

   У Ruby on Rails вид описується за допомогою  шаблонів RHTML. Вони є файлами HTML з  додатковими включеннями фрагментів коду Ruby (Embedded Ruby або ERb). Виведення, що згенерувалось вбудованим кодом Ruby, включається в текст шаблону сторінки HTML, яка після цього повертається користувачеві. Види можуть використовувати фрагменти інших видів і, у свою чергу, бути включеними в шаблон (layout) вищого рівня.

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

   Контролером в Ruby on Rails є клас, успадкований від ActionController::Base. Відкриті методи контролера є так званими діями (actions). Action часто відповідає окремому представленню. Наприклад, по запиту користувача admin/list буде викликаний метод list класу AdminController і потім використано представлення list.rhtml.

   Ruby on Rails може працювати з Apache, Lighttpd або будь-яким іншим веб-сервером, що підтримує FastCGI. Для розробки  і відладки часто використовується  вбудований в Ruby веб-сервер WEBrick або  Mongrel

   У якості сервера бази даних підтримуються MySQL, Firebird, PostgreSQL, SQLite, IBM DB2, Oracle і Microsoft SQL Server. Також підтримується вбудована база даних SQLite. 
 
 
 
 

   PHP 
 

   PHP — мова, яка може бути вбудована  безпосередньо в html-код сторінок, які, в свою чергу коректно  будуть оброблені PHP -інтерпретатором. Механізм РНР просто починає виконувати код після першої екрануючої послідовності (<?) і продовжує виконання до того моменту, коли він зустріне парну екрануючу послідовність (?>).

   Велика  різноманітність функцій PHP дають  можливість уникнути написання багаторядкових призначених для користувача функцій на C або Pascal. Особливостями мови PHP є:

• Наявність інтерфейсів до багатьох баз даних

в PHP вбудовані  бібліотеки для роботи з MySQL, PostgreSQL, mSQL, Oracle, dbm, Hyperware, Informix, InterBase, Sybase.

через стандарт відкритого інтерфейсу зв'язку з базами даних (Open Database Connectivity Standard — ODBC) можна підключатися до всіх баз  даних, до яких існує драйвер.

• Традиційність

Мова  РНР здаватиметься знайомою програмістам, що працюють в різних областях. Багато конструкцій мови запозичені з С, Perl. Код РНР дуже схожий на той, який зустрічається в типових програмах на С або Pascal. Це помітно знижує початкові зусилля при вивченні РНР. PHP — мова, що поєднує переваги Perl і С і спеціально спрямована на роботу в Інтернеті, мова з універсальним і зрозумілим синтаксисом. І хоча PHP є досить молодою мовою, вона здобула таку популярність серед web-програмістів, що на даний момент є мало не найпопулярнішою мовою для створення веб-застосунків (скриптів).