Розробка сайту портфоліо «Дизайн інтер’єру»

Скляренко, Арсен Ігорович

Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/6918

Назва:	Розробка сайту портфоліо «Дизайн інтер’єру»
Автори:	Рудницький , Сергій Володимирович Скляренко, Арсен Ігорович
Ключові слова:	web-сайт;Drupal;Web – додаток;розробка;WordPress
Дата публікації:	16-чер-2022
Короткий огляд (реферат):	З кожним роком користувачів в інтернеті стає дедалі більше, а із ними виникає більше запитів та посилань, одночасно створюються і сайти які надають змогу знайти саме те що вам потрібно, на сьогоднішній день все дедалі більше користувачів використовують смартфони для виходу в інтернет, насамперед це пов’язано із соціальними мережами та швидким доступом із будь-якого місця на планеті де діє доступ до мережі. Із великою кількістю створених сайтів зростає і величезна потреба в їх підтриманні, іноді при невдалому створені сайту в подальшому його потреба переростає в проблему підтримки сайту, що приводить або до повного закриття сайту, або суцільній переробці його архітектури з нуля. Саме тоді коли підтримка великих сайтів без створення їх на cms системах стала проблемою, а саме в великій кількості затрат часу, і в тяжкій подальшій долі їх підтримання іншими розробниками було прийнято розумне рішення на перехід розробки сайтів на розумних cms платформах таких як: Drupal, WordPress, Jungo, October. Всі ці системи працюють по різному та мають один кінцевий результат це готовий комерційний або власний сайт із легкою можливістю його редагування та подальшою підтримкою його софта. Drupal це – модульна система керування вмістом з відкритим вихідним кодом, написана на мові програмування php, використовується як back end фреймворк для різних вебсайтів. Метою кваліфікаційної роботи є розробка Drupal сайту із застосуванням нових технологій для створення Web-сайту.
URI (Уніфікований ідентифікатор ресурсу):	https://er.chdtu.edu.ua/handle/ChSTU/6918
Розташовується у зібраннях:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Файли цього матеріалу:

Файл	Опис	Розмір	Формат
РЕП_БАК_Скляренко_WEBС-2011.pdf Restricted Access		3.65 MB	Adobe PDF	Переглянути/Відкрити Запит копії

Показати повний опис матеріалу Перегляд статистики

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

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ

КВАЛІФІКАЦІЙНА РОБОТА БАКАЛАВРА

на тему: «Розробка сайту портфоліо «Дизайн інтер’єру»»
за спеціальністю 126 «Інформаційні системи та технології»

Виконавець роботи: студент групи WEBС-2011+ск Скляренко Арсен Ігорович

Кваліфікаційну роботу
захищено на засіданні ЕК
з оцінкою ___________ «___» червень 2022 р.

Науковий керівник ___________ к.т.н. Рудницький С.В.
(підпис) (науковий ступінь, вчене звання, прізвище та ініціали)

Голова комісії ___________ ____________________________
(підпис) (науковий ступінь, вчене звання, прізвище та ініціали)

Засвідчую, що у цій дипломній роботі немає
запозичень з праць інших авторів
без відповідних посилань

Студент _____________
(підпис)

Черкаси – 2022 року

ЗМІСТ

ВСТУП……………………………………………………………………...………..4
1 АНАЛІТИЧНА ЧАСТИНА……………………………………………………...6
1.1 Цілі, принципи, переваги застосування Drupal ……………..…………6
1.2 Поняття, принципи та технології створення Web – додатків………...13
1.3 Огляд існуючих аналогів і їх порівняння……………………………….17
1.4 Висновок до частини 1…………………………………………….……….22
2 Проектування сайту на Drupal………………………………………………….23
2.1 Постановка задачі…………………………………………...………...…….23
2.2 Можливості додатку……………………………………………………...…23
2.3 Аналіз cms платформ ……………………………………………………....24
2.4 Архітектура…………………………………………..…………………..…..28
2.5 Стек технологій……………………………………………………………...30
2.6 Проектування структури сайту та наповнення сторінок……………...33
2.7 Висновок до частини 2……………………………………………………...36
3 РЕАЛІЗАЦІЯ САЙТУ………………………………………………………...….37
3.1 Реалізація структури сайту…………………………………………...……37
3.2 Реалізація заповнення контенту…………………………….…….………46
3.3 Реалізація дизайну сайту………………………………………….…….….48
3.4 Висновок до частини 3………………………………………..….…………53

ЧДТУ 222076.001 ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. Скляренко А.І. Тема роботи Літ. Лист Листів
П ерев. Рудниць кийС.В Н 1 58Л ист
Розробка сайтЧу пДорТтУфоліо “Дизайн

інтер’єру” 222076.001 ПЗ ФІТІС,
ЗНм.контр.
2
Арк. № докум. Пiдпис. Дата
нтЗатв. ПрокопенкоТ.О.. кафедра ІТП, WEB- 1811

ВИСНОВКИ…………………………………………………………………………54
ДОДАТОК А 482 ЧДТУ 20846 – 01 Drupal – сайт портфоліо
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ…………………...……………………55

Лист
ЧДТУ 222076.001 ПЗ
3
Зм Арк. № докум. Пiдпис. Дата
нт

СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ

Drupal – Модульна система керування вмістом;
ОС – Операційна система;
ПЗ – Програмне забезпечення;
JS – JavaScript;
CSS – Cascading Style Sheets;
API – Application Programing Interface;
DOM – Document Object Model;
CLI – Command Line Utility;
HTML – Hyper Text Language;
OOP – Об‘єктно-орієнтоване програмування;
TWIG – Мова шаблонів;
Docker – Контейнер проектів;
GIT – Віддалений репозиторій(сервер);
PHP – Мова програмування;
SCSS – Мова препроцесів;
URL – Uniform Resource Locator;
JSX – JavaScript XML;
COMPOSER – Збірник залежностей;
LANDO – Надстройка докер контейнера для управління докером.

Лист
ЧДТУ 222076.001 ПЗ
4
Зм Арк. № докум. Пiдпис. Дата
нт

ВСТУП
З кожним роком користувачів в інтернеті стає дедалі більше, а із ними
виникає більше запитів та посилань, одночасно створюються і сайти які надають
змогу знайти саме те що вам потрібно, на сьогоднішній день все дедалі більше
користувачів використовують смартфони для виходу в інтернет, насамперед це
пов’язано із соціальними мережами та швидким доступом із будь-якого місця на
планеті де діє доступ до мережі.
Із великою кількістю створених сайтів зростає і величезна потреба в їх
підтриманні, іноді при невдалому створені сайту в подальшому його потреба
переростає в проблему підтримки сайту, що приводить або до повного закриття
сайту, або суцільній переробці його архітектури з нуля.
Саме тоді коли підтримка великих сайтів без створення їх на cms системах
стала проблемою, а саме в великій кількості затрат часу, і в тяжкій подальшій долі
їх підтримання іншими розробниками було прийнято розумне рішення на перехід
розробки сайтів на розумних cms платформах таких як: Drupal, WordPress, Jungo,
October.
Всі ці системи працюють по різному та мають один кінцевий результат це
готовий комерційний або власний сайт із легкою можливістю його редагування та
подальшою підтримкою його софта.
Drupal це – модульна система керування вмістом з відкритим вихідним
кодом, написана на мові програмування php, використовується як back end
фреймворк для різних вебсайтів.
Метою кваліфікаційної роботи є розробка Drupal сайту із застосуванням
нових технологій для створення Web-сайту.

Лист
ЧДТУ 222076.001 ПЗ
5
Зм Арк. № докум. Пiдпис. Дата
нт

Для реалізації поставленої мети слід вирішити наступні завдання:
- Переглянути цілі, принципи, переваги використання Drupal.
- Провести аналіз базових понять , принципів та технологій які
використовуються під час процесу створення Web сайту.
- Провести детальний аналіз cms аналогів.
- Зробити вимоги до сайту.
- Провести досліди основних етапів розробки та проаналізувати технології,
які використовують під час розробки на Drupal.
- Провести аналіз технологій сучасної розробки Druapl.
- Налаштувати робоче середовище.
- Налаштувати сервер.
- Встановити всі залежності щодо проекту.
- Встановити всі потрібні модулі для роботи із проектом.
- Розробити структуру Drupal.
- Реалізувати її інтерфейс та порядок розміщення на сторінці.
- Реалізувати як можна легшу підтримку Drupal сайту.

Об’єктом дослідження роботи є розробка сайту портфоліо “Дизайн
інтер’єрів”
Предметом дослідження є стек технологій lamp на cms платформі Drupal.

Лист
ЧДТУ 222076.001 ПЗ
6
Зм Арк. № докум. Пiдпис. Дата
нт

1 АНАЛІТИЧНА ЧАСТИНА

1.1 Цілі, принципи, переваги застосування Drupal.
Сьогодні сайти створюються на різних cms платформах які дають
можливість швидко редагувати контент, а в подальшому легше підтримувати та
обслуговувати сайти . Cms платформи це інструмент для створення веб-сайтів, їх
редагування та обслуговування.
Drupal це популярна вільна модульна система керування вмістом з
відкритим вихідним кодом, написана на мові php та розповсюджується за ліцензією
gnu. Drupal використовують як back end фреймворк для різних вебсайтів, від
особистих блогів до корпоративних та державних сайтів.
Drupal має не малу вложеність яка на перший погляд може здатися
складною (рис. 1.1).

Рисунок 1.1 – Структура Drupal.

Лист
ЧДТУ 222076.001 ПЗ
7
Зм Арк. № докум. Пiдпис. Дата
нт

Цілі Drupal
Drupal надає можливість розробникові сайту розробити багато підходів до
саме тієї бізнес логіки яка йому потрібна. Він настільки великий що може скластися
враження, що Drupal розвивається разом з вами, а саме з вашими потребами.
Ви можете почати з малого, наприклад простого сайту візитки, і поступово
додавати функціонал для спільнот, електронної комерції, каталогів, порталів
новин, систем рейтингів, планування картографії або все, що ви тільки можете
уявити. У міру того, як світ бізнесу все більше залежить від швидкості прийняття
рішень, ваша можливість змінити думку про те, що важливо – змінити пріоритети
розвитку і спрямувати зусилля вашої команди в новому напрямку – ось це і є одним
із головних цілей Drupal.
Принципи Drupal
Drupal використовує набагато більш стандартні галузеві практики об’єктно
орієнтованого програмування і впровадження залежностей (використання
Сімфоні) замість запутаної системи хуків. Це робить кінцевий результат більш
прозорим і надійним: вести розробку на Drupal тепер можна швидше, впевненіше,
з меншою кількістю конфліктів із меншою потребою в фахівцях, спеціалізованих
на Drupal.
Для того щоб почати працювати з Drupal потрібно перейти на офіційний
сайт розробника і рареєструватись або ввійти в діючий акаунт.

Рисунок 1.2 – Вхід в систему.

Лист
ЧДТУ 222076.001 ПЗ
8
Зм Арк. № докум. Пiдпис. Дата
нт

Далі для скачування вихідного коду системи, використовуємо посилання
головного меню “Download &amp; Extend” (рис.1.3).

Рисунок 1.3 – Реєстр користувача.

Тим самим ми переходимо в розділ завантажень. Нам необхідно, для
початку, завантажити тільки ядро, а значить, використовуємо відповідну кнопку
“Download Drupal 9”.
Після цього ми потрапляємо на сторінку повного опису певної версії
платформи, де і бачимо заповітну кнопку скачування вихідного коду CMS.
Таким чином, викачуємо архів і розпаковуємо його в довільний каталог
локального комп’ютера. Тепер хотів би зауважити, що для роботи CMS Drupal
необхідний веб-сервер, інтерпретатори мови PHP, а так само сервер системи
управління базами даних Mysql. Дані компоненти ми можемо встановити окремо і
виконати їх конфігурацію.
В моєму проекті сервером буде Docker container |nginx|, е дасть мені більшу
мобільність під час ведення проекту і навіть після його завершення, а саме докер
відрізняється від інших серверів тим, що проект який поміщений в ньому можна
перенести на інший пристрій і розпакувати вже на новому девайсі.
Коли сервер налаштований можна повернутись до встановлення Drupal,
якщо ми не зробили це раніше, отже, після встановлення всіх конфігурацій які
Drupal завантажує автоматично, можна спробувати зробити перший крок і перейти
на головну сторінку нашого Drupal де ми повинні побачити привітання.

Лист
ЧДТУ 222076.001 ПЗ
9
Зм Арк. № докум. Пiдпис. Дата
нт

Після успішного встановлення Drupal, нам відкриється головна
сторінка(нода 1), в якій ми побачимо базове привітання (рис.1.4.)

Рисунок 1.4 – Головна сторінка.
Якщо ви бачите таке відображення це означає що ви правильно встановили
Drupal і можете починати працювати.
Також зверху є панель інструментів, саме з неї добре починати вивчати
Drupal (рис.1.5.)

Рисунок 1.5 – Панель інструментів.
Пізніше ви зрозумієте що кожна вкладка в панелі інструментів це окремий
скачаний і встановлений модуль який можна корегувати в файлі docker composer
або щоб полегшити роботу автоматично встановлювати і видаляти через
адміністративну панель Drupal, яка дуже полегшує використання новачкам які
тільки знайомляться із системою CMS Drupal.

Лист
ЧДТУ 222076.001 ПЗ
10
Зм Арк. № докум. Пiдпис. Дата
нт

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

Рисунок 1.6 – Панель інструментів, вибір теми.
Зазвичай новачкам не так вже і важливо відразу почати обирати тему для
роботи, це здебільшого роблять трохи продвинуті спеціалісти, які обирають тему
за замовчування і потім навішують на неї стилі, наприклад (webPack).
Щоб почати працювати відразу можна перейти на панелі інструментів у
вкладку add content, що означає додати контент і розмістити свою першу
інформацію на сторінці. (рис. 1.7.)

Рисунок 1.7 Вибір пункту розміщення контенту.
Тепер контент буде розміщено за новим посиланням під назвою node/1, який
можна редагувати в панелі інструментів/сторінки/node 1.

Лист
ЧДТУ 222076.001 ПЗ
11
Зм Арк. № докум. Пiдпис. Дата
нт

Переваги застосування Drupal:
- Багатовимірна підтримка, Drupal 9 має фантастичні можливості
інтернаціоналізації, включаючи визначення мови браузера. Ми також можемо
додати функції геолокації, наприклад, зробити контент або навігаційні посилання
доступними тільки в певних країнах. Наприклад, можна публікувати контент для
клієнтів, який по-різному виглядає в США і Канаді.
- Доступ звідки завгодно, адаптивний дизайн дозволяє безперешкодно
переглядати контент на різних пристроях. Зараз приблизно 59% дорослих у світі
користуються смартфонами. Це приблизно 4,3 млрд людей, тому доступність
мобільного сайту важлива як ніколи. Drupal та пов'язані з ним модулі дозволяють
бути впевненими, що ваш сайт буде без проблем працювати на будь-якій кількості
пристроїв, чи то вдома, в офісі або в дорозі.
- Широкі можливості розширення завдяки великій білбіотеці модулів,
Сайти Drupal мають широкі можливості налаштування, вони мають структуру,
подібну конструктору Lego. Drupal може похвалитися великою спільнотою
користувачів, тисячі розробників вносять свій внесок в бібліотеку модулів. Існують
модулі для широкого спектра функцій веб-сайту, включаючи ShareThis для
соціальних мереж, Image Effects для редагування фотографій, плагіни календаря,
CAPTCHA, Google Analytics і плагіни метатегів.
- Швидке редагування, введіть текст прямо в текстовий редактор Drupal,
щоб скоротити час, необхідний для додавання і завантаження контенту на ваш сайт.
- Потужний пошук на сайті, Drupal дозволяє використовувати відому
платформу повнотекстового пошуку з відкритим вихідним кодом Apache Solr
замість основного модуля пошуку, що дає величезне збільшення потужності і
швидкості. Сама по собі функція пошуку — одна з найбільш вагомих причин
використовувати Drupal замість інших CMS

Лист
ЧДТУ 222076.001 ПЗ
12
Зм Арк. № докум. Пiдпис. Дата
нт

- Гнучка інтеграція, Drupal 9 дуже гнучкий і допускає інтеграцію зі
сторонніми API (інтерфейс прикладного програмування), а також створення ваших
власних кінцевих точок API. Він спеціально розроблявся за принципом API-first,
що вже зараз вигідно виділяє його серед всіх конкурентів. API дозволяє
обмінюватися даними з сервера на сервер для обміну такою інформацією, як
опублікований контент, інформацією про користувачів або мультимедійними
даними.
- Міграція контента, В Drupal є ключові модулі, призначені для
перенесення контенту навіть для великих сайтів. Хоча розробник може вручну
перенести весь контент на невеликий сайт, таке перенесення має ризики ускладнень
для великого сайту з великою кількістю контенту. Drupal забезпечує систематичне
перенесення всього контенту без ризику.
- Маштабованість, Drupal має високу масштабованість, що робить його
популярним серед великих організацій, що мають складні сайти з високим
трафіком. Drupal покращує продуктивність веб-сайту за рахунок кешування,
скорочуючи час завантаження сторінки і вимоги до ресурсів.
- Найбезпечніша CMS, Drupal 9 — стабільний, розроблений з
урахуванням вимог безпеки;
- Відкритий початковий код, Початковий код програмного забезпечення
з відкритим початковим кодом доступний з ліцензією, згідно з якою правовласник
надає права на вивчення, зміну і поширення програмного забезпечення для всіх і
для будь-яких цілей.

Лист
ЧДТУ 222076.001 ПЗ
13
Зм Арк. № докум. Пiдпис. Дата
нт

1.2 Поняття, принципи та технології створення Web–додатків
Для початку потрібно зосередитись на тому, що таке веб-додаток: (рис. 1.8.)

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

Лист
ЧДТУ 222076.001 ПЗ
14
Зм Арк. № докум. Пiдпис. Дата
нт

Оскільки клієнт працює у веб-браузері, користувач може використовувати
IBM-сумісний або Mac. Вони можуть мати ОС Windows XP або Windows Vista.
Вони навіть можуть використовувати Internet Explorer або Firefox, хоча для деяких
програм потрібен певний веб-браузер.
Для розробки програми веб-додатки зазвичай використовують комбінацію
сценарію на стороні сервера (ASP, PHP тощо) та сценарію на стороні клієнта
(HTML, Javascript тощо). Сценарій на стороні клієнта займається поданням
інформації, тоді як сценарій на стороні сервера займається всіма важкими речами,
такими як зберігання та отримання інформації.

Як довго існували веб-додатки:
Веб-додатки існують з тих пір, поки всесвітня павутина не набула
популярності.

Як розвивалися веб-додатки:
Більшість веб-додатків базуються на архітектурі клієнт-сервер, куди клієнт
вводить інформацію, а сервер зберігає та отримує інформацію. Прикладом цього є
Інтернет-пошта, коли такі компанії, як Google, Gmail та Microsoft Outlook,
пропонують веб-клієнти електронної пошти.

STACK LAMP
LAMP (Linux, Apache, MySQL, PHP / Perl / Python) — це абревіатура, що
позначає один із найпоширеніших програмних стеків для багатьох
найпопулярніших програм в Інтернеті. Однак LAMP тепер відноситься до загальної
моделі програмного стека, і її компоненти в основному взаємозамінні.
Кожна буква в абревіатурі означає один із чотирьох будівельних блоків із
відкритим кодом: (рис. 1.9.)

Лист
ЧДТУ 222076.001 ПЗ
15
Зм Арк. № докум. Пiдпис. Дата
нт

- Linux for the operating system
- Apache HTTP Server
- MySQL for the relational database management system
- PHP, Perl, or Python programming language

Рисунок 1.9 Схема lamp stack

Перш ніж перейти до переваг і недоліків цього стеку потрібно ознайомитись
для чого він потрібний:
- В разі потреби оточення для веб-розробки і тестування додатків, які
написані для LAMP. Це,як і для власних додатків, так і для будь-яких необхідних
Вам CMS. Ви можете працювати на Windows і на Ubuntu.
- Якщо вам необхідно зробити на віртуальному або виділеному сервері
продуктивний веб-сервер для хостингу своїх проектів.
- Якщо вам потрібен сервер для систем контролю версій.
- Для самонавчання адміністрування.
- В економічних цілях, для створення власного сервера.

Лист
ЧДТУ 222076.001 ПЗ
16
Зм Арк. № докум. Пiдпис. Дата
нт

Переваги використання STACK LAMP

1. Збірка чудово підходить для швидкого розгортання програми, через
простої конфігурації, але все ж вона дає мало функцій в плані масштабованості та
ізоляції компонентів.
2. Установка LAMP (Linux + Apache + MySQL + PHP / Perl / Python) є
досить широко використовуваним варіантом налаштування серверів з Ubuntu;
3. Є велика кількість додатків, які мають відкритий вихідний код і
написані з використанням стека додатків LAMP. Наприклад, популярні додатки
LAMP: wiki енциклопедії, системи управління вмістом (CMS) і керуючі додатки,
наприклад, phpMyAdmin;
4. Гнучкість при підборі баз даних, web серверів і мов сценаріїв;
5. Використовує набори відкритого ПЗ, яке значно прискорює процес
розробки;
6. Актуальною заміною для MySQL служать PostgreSQL і SQLite. Python,
Perl і Ruby можна замінити PHP. А Nginx, Cherokee і Lighttpd альтернатива Apache;
7. для швидкої установки LAMP використовується tasksel. Tasksel -
інструмент Debian / Ubuntu, який встановлює кілька залежних пакетів в вашу
систему в якості єдиного завдання.

Недоліки використання STACK LAMP

1. Додаток і база даних використовують одні і ті ж ресурси сервера (CPU,
пам'ять, I / O і т.д.), що дає низьку продуктивність і ускладнює визначення джерела
(додаток або база даних) цієї проблеми.
2. Так само є перешкоди в здійсненні горизонтального масштабування.

Лист
ЧДТУ 222076.001 ПЗ
17
Зм Арк. № докум. Пiдпис. Дата
нт

Де взяти LAMP на сервері?
Встановити і налаштувати збірку LAMP ви можете самостійно на будь-якому
сервері. Для цього в Мережі є велика кількість інструкцій і порад від системних
адміністраторів. Наприклад, щоб швидко встановити Lamp на дистрибутив Ubuntu,
досить команди: Sudo tasksel install lamp-server.
Далі необхідно трохи часу, так як викачуються і налаштовуються певні
пакети.

1.3 Огляд існуючих аналогів і їх порівняння

1. Сайт Anton Cristell створений на cms платформі Wordpress. (рис. 1.10)

Рисунок 1.10 Сайт Anton Crisstel створений на wordpress.

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

Лист
ЧДТУ 222076.001 ПЗ
18
Зм Арк. № докум. Пiдпис. Дата
нт

2. Сайт Eren McCartney – Traveller & Photographer створений на cms
платформі Joomla. (рис. 1.11)

Рисунок 1.11 Сайт Eren McCartney – Traveller & Photographer створений
на joomla.
Має досить широкий функціонал у верхній частині сайту.Є можливість
обрати тип екрану для перегляду. Містить в собі зв’язок із завтором, відгуки,
перехід за посиланням на офіційний сайт. Є можливість поділитись своїми фото на
сайті, а також редагувати фотографії за допомогою інструментів на сайті, можна
ромістити портрет. Сайт націлений на збір фотографій від користувачів. Має
стабільну адаптивність під мобільні пристрої.

Лист
ЧДТУ 222076.001 ПЗ
19
Зм Арк. № докум. Пiдпис. Дата
нт

3. Сайт TeXMA створений на cms платформі Opencart. (рис. 1.12)

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

Лист
ЧДТУ 222076.001 ПЗ
20
Зм Арк. № докум. Пiдпис. Дата
нт

4. Сайт House Beautifull створений на cms платформі Magento. (рис. 1.13)

Рисунок 1.13 Сайт House Beautifull створений на magento.
На цьому сайті вдало реалізований дизайн і зручний функціонал сайту, що
є запорукою швидкого пошуку браузером на сайті вашої веб-сторінки. Є 8 посилань
на різні пошукуві сайти, добре реалізований пошуковий адрес на сайті. Сайт є гарно
адаптивним під мобільні пристрої.

1. Сайт Interior design створений на cms платформі Drupal. (рис. 1.14)

Рисунок 1.4 Сайт Interior design порт фоліо на drupal.
Лист
ЧДТУ 222076.001 ПЗ
21
Зм Арк. № докум. Пiдпис. Дата
нт

Після огляду аналогів можна зробити висновки , що деякі cms системи
переважають у технічному і функціональному планах, через це користуються
більшим попитом на ринку. Для того, щоб зрозуміти які із обраних систем
користуються більш вдалими технічними і функціональними можливостями, було
створено таблицю. (табл. 1.1)
Характеристики Anton Cristell Сайт Eren McCartney – TeXMA House Beautifull “Interior design”
Traveller & Photographer
Має чудовий На сторінкі Має негарниий Має простий Великий
функціонал в розміщено багато дизайн, функціонал. При функціонал і
розділі хедер, гіпер-текствових розміщення натисканні на привабливий
користувач може посилань, що дає блоків виконане вкладку дизайн сайту, є
із вісьма змогу клієнтові досить банально, відкривається можливість
Функціонал розділами який переходити із однієї функціонал вікно іх дизайном переходити за
кожен відкриває сторінки на іншу, є практично інтер’єру на який гіпер-текствовими
додатковий багато функцій, такі відсутній. ми хочемо посиланнями.
функціонал для як розміщення своїх перейти.
роботи з сайтом фотографій і опису
свого профілю.
Має простий і Має адаптивний Має старий і Має привабливий Має гарний дизайн,
зрозумілий дизайн для деск- негарний дизайн зовнішній є адаптивним під
дизайн, що є топних версій сайту, розміщення вигляд, простий в мобільні пристрої,
Дизайн запорукою іспіху. монітора, Достатньо блоків негарно дизайні і легкий у гарно відображає
Лего читається . простий і великий відображаються сприянні весь функціонал ,
Містить функціонал гарно при зжиманні людським оком. легко знайти те що
адаптивний відображений за сторінки. Легко знайти те потрібно.
дизайн. допомогою дизайну. що потрібно.
Має приватний Має Не має системи Має систему Не має системи
реєстр привілегійований привілегійованого привілегій для привілегійованиого
користувачів, які контент для контенту, все що тих користувачів, контенту, всім
здійснили користувачів які ви бачите на що здійснили користувачам
Привілегії для фінансову зареєструвалися, він сторнкі підписку на відображається
клієнтів підписку на дає змогу відобржається розповсюдження, безкоштовна
оновлення переглядати список усім неважливо інформація.
шаблонів готових користувачам. проходили вони
дизайну. дизайнерських реєстрацію чи ні.
рішень.
Таблиця 1.1 Відмінності сайтів один від одного написаних на різних cms.
В таблиці було розглянуто основні відмінності сайтів на різних cms
платформах, місцями відмінності дійсно видно навіть звичайному користувачеві, в
основнму це відмінності в функціоналі.
Лист
ЧДТУ 222076.001 ПЗ
22
Зм Арк. № докум. Пiдпис. Дата
нт

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

1.4 Висновок до частини 1
В першій частині ми розглянули цілі Drupal, а саме які бізнес процеси і
бізнес логіки ми можемо використовувати під час побудови проекту, також
розібрали переваги та недоліки використання тих чи інших cms платформ, показано
які технології використовуються для створення web додатків і пояснено чому
обрано саме стек технологій lamp. Провели огляд існуючих аналогів сайтуі провели
їх порівняння в таблиці.
Не можна створити додаток і назвати його повноцінним унікальним
ресурсом, тому, що стек технологій постійно змінюється і разом з ним змінюються
підходи до проектування чи аналізу вихідних рішень, разом з цим досить важко
створити ідеальний додаток і навіть більше того можна запитати себе чи він взагалі
буде потрібний в результаті двох або більше років, якщо актуальність цього
додатка буде високою то і його підтримка буде досить не поганою, а ціна
обслуговування виправдана.
Зараз є досить велика кількість стек-технологій, веб-технологій, а також cms
фреймворків, які використовуються для створення дійсно корисного і стійкого веб-
застосунку, ми провели аналіз чому використання cms фреймворків наприкладі
такого як Drupal, несе в собі швидкість розробки, надійність і більш легку і
коректну підтримку в подальшому яка може бути розвернута на docker контейнері
який ми також розібрали.

Лист
ЧДТУ 222076.001 ПЗ
23
Зм Арк. № докум. Пiдпис. Дата
нт

2 ПРОЕКТУВАННЯ САЙТУ НА DRUPAL

2.1 Постановка задачі
Використовуючи стек технологій lamp розробити адаптивний сайт на cms
платформі Drupal. Особливістю сайту є його реалізація, а саме за допомогою стеку
lamp, використовуючи цей стек технологій сайт повинен працювати на всіх
платформах, що підтримують сучасні браузери за деяким виключенням таких
браузерів як Microsoft edge де система відображення флекс-боксів на яких створені
грід контейнери не є цілком підтримуваними та правильно відображеними.
Головним компонентом повинно також бути легке редагування контенту
сайту, щоб адміністратор або та людина яка займається публікацією контенту
могла легко публікувати новий вид контенту, текст, фото, відео.
Сайт повинен безпосередньо бути розробленим в середині ядра Drupal core.
Також важливим аспектом є його адаптивний дизайн, який повинен розроблятись
по паттерну mobile first по можливості цьому повинна бути приділена особлива
увага, але сайт розрахований на настільні девайси з великим розміром екрану.

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

Лист
ЧДТУ 222076.001 ПЗ
24
Зм Арк. № докум. Пiдпис. Дата
нт

Drupal надає можливість редагувати контент як із адміністративної панелі
так і з ядра Drupal де працювати приходиться з рендер масивами які відображують
контент на сайті. Кожний новий функціонал на сайті є додатковую функцією в
модулі ядра Drupal, ми можемо налаштовувати і відображувати його як нам
потрібно.
2.3 Аналіз cms платформ
Серед аналогів сервіса Drupal можна віднести лише самі популярні
фреймворки такі як: Magento, Joomla, WordPress, OpenCart, Drupal.
Magento
Популярна торгова cms система, належить компанії Abode. Її використовую
близько 30% інтернет магазинів. Має широкі можливості маштабування.

Підтримує мультисайтовий режим роботи. Весь функціонал ядра реалізований в
виді модулів. Творці движка пишаються його широким функціоналом і гнучкістю
налаштувань.
Переваги:
- Великий спектр інструментів маркетингу і аналітики для продаж.
- Адаптацію під вимоги популярних пошукових систем.
- Безліч модулів оплати і доставки придбаної в магазині продукції.
- Багатовмісність, адаптивність під мобільні пристрої.
- Опцію розмежування прав доступу до адмін панелі.
Недоліки:
- Складна процедура установки і управління.
- Великі доопрацювання Zend Framework.
- Розробка повинна виконуватися на потужньому хостингу.
- Орієнтація на зарубіжних користувачів.
- Складнощі в кастомізації дизайну.

Лист
ЧДТУ 222076.001 ПЗ
25
Зм Арк. № докум. Пiдпис. Дата
нт

Joomla
Одна з найпопулярніших систем управління сайтом, безкоштовна, у якій
багато розробників на фрілансі.
Переваги:
- Система поширюється безкоштовно.
- Відкритий код системи.
- Створені різні готові дизайнерські рішення.
- Великий функціонал.
- Легко поставити практично на будь-який хостинг.
Недоліки:
- Складна панель управління.
- З’являються дублі при редагуванні статті.
- Велика кількість зайвого коду.
- Слабка система безпеки.
- Довге завантаження сайту.

Word Press
Одна із самих популярних систем управління контентом у світі. На ній
можна розробляти повноцінний багатофункціональний веб-ресурс. Має відкритий
вихідний код, написаний на мові php.
Переваги:
- Надзвичайно комфортна і функціональна панель адміністратора.
- Велика кількість безкоштовних шаблонів.
- Постійні оновлення і доповнення.
- Можливість видозмінювати код шаблону.
- Можливість закачати додаткові розширення.

Лист
ЧДТУ 222076.001 ПЗ
26
Зм Арк. № докум. Пiдпис. Дата
нт

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

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

Недоліки:
- Створення сторінок дублікатів.
- Робота плагінів і доповнень, між ними виникають конфлікти.
- Проблеми із масовим добавленням товарів.
- Серйозні проблемі із безпокою.
- Застарілий інтерфейс.
- Не досить активне ком’юніті.

Лист
ЧДТУ 222076.001 ПЗ
27
Зм Арк. № докум. Пiдпис. Дата
нт

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

Недоліки:
- Складна адміністративна панель.
- Новачку досить складно розібратись на початку вивчення.
Повний аналіз порівняння цих рішень представлений у таблиці
(таб.2.1).
Характеристика Magento Joomla OpenCart WordPress Drupal
Середній функціонал Широкий Малий Великий Великий
Функціонал для маленький бізнес функціонал для функціонал для функціонал для функціонал
ідей середніх бізнес- середніх малих бізнес- для великих
ідей бізнес-ідей ідей бізнес-ідей
Нижче середньої, є Середня, Середня, Вище Всисокий
Система безпеки багато чорних дір які користувачі великий обсяг середньої, рівень
ще не виправили. скаржаться взломи невикористано недолік захисту, всі
через поля го відсутність конфігураці
заповнення. функціоналу. офіційного ї
сайту. знаходяться
в ядрі.
Досить велике. Досить велике. Мале. Досить велике Досить
Ком’юніті велике.

Кастомізація Зручно і швидко. Зручно і швидко. Зручно і Зручно і Зручно і
дизайну швидко. швидко. швидко.

Таблиця 2.1 – Порівняння існуючих рішень для створення сайтів.
Лист
ЧДТУ 222076.001 ПЗ
28
Зм Арк. № докум. Пiдпис. Дата
нт

2.4 Архітектура
Архітектура сайту є досить проста але потребує уваги. (схема.2.1)

Node

Media entity items (with More fields

bundles) (optional)

Resourses: Other sites Instagram Facebook Twitter

e
Схема 2.1 Схема роботи мого сайту на drupal.
Drupal – це платформа для керування веб-контентом, яка є потужним інструментом
для створення простих та складних сайтів. У цьому розділі ми збираємося
обговорити архітектурний стиль Drupal для реалізації інтерфейсів користувача.
Наступна діаграма показує архітектуру Drupal (рис.2.1)
Рисунок 2.1 Схема архітектури роботи drupal.

Лист
ЧДТУ 222076.001 ПЗ
29
Зм Арк. № докум. Пiдпис. Дата
нт

Архітектура Drupal містить такі шари & miuns;
- Користувач;
- Адміністратор;
- Drupal;
- PHP;
- Веб сервер;
- База даних;

Користувачі – це користувачі спільноти Drupal. Користувач відправляє
запит на сервер, використовуючи Drupal CMS, а веб-браузери, пошукові системи
тощо. діють як клієнти.
Адміністратор – адміністратор може надати дозвіл авторизованим
користувачам і зможе заблокувати несанкціонований доступ. Адміністративний
обліковий запис буде мати всі привілеї для керування контентом та
адміністрування сайту.
Drupal – це безкоштовна система керування контентом з відкритим
вихідним кодом (CMS), яка дозволяє організовувати, керувати та публікувати ваш
контент та побудована на середовищах на основі PHP. Drupal CMS є дуже гнучкою
і потужною і може використовуватися для створення великих і складних сайтів. З
Drupal CMS дуже легко взаємодіяти з іншими сайтами та технологіями. Крім того,
ви зможете обробляти складні форми та робочі процеси.
PHP – Drupal використовує PHP для роботи з програмою, створеною
користувачем. Для отримання даних із бази даних потрібен веб-сервер. Вимоги до
пам'яті PHP залежить від модулів, які використовуються на вашому сайті. Drupal 6
вимагає щонайменше 16 МБ, Drupal 7 вимагає 32 МБ, а Drupal 8 вимагає 64 МБ.
Веб-сервер – це сервер, на якому користувач взаємодіє та обробляє запити
через HTTP (протокол передачі гіпертексту) та обслуговує файли, що формують
веб-сторінки, для веб-користувачів.

Лист
ЧДТУ 222076.001 ПЗ
30
Зм Арк. № докум. Пiдпис. Дата
нт

База даних – зберігає інформацію, контент та інші необхідні дані сайту. Він
використовується для зберігання адміністративної інформації для керування
сайтом Drupal. Drupal використовує базу даних для отримання даних і дозволяє
зберігати, змінювати і оновлювати базу даних.
2.5 Стек технологій
Сайт вирішено розробляти на cms платформі Drupal. Drupal написаний на
мові програмування php і має стек технологій lamp до якого входить: Linux,
Appache, Mysql, PHP. Для сервера вирішені використовувати docker containerчерез
його комфорт використання,а головне проект можна упакувати в один контейнер і
перенести умовно на іншу машину де розвантажити і запустити не викликає
потреби, це особливо актуально для комерційних компаній де над одним проектом
працюють декілька людей. (рис. 2.2)

Рисунок 2.2 Запуск docker container.
Середовищем розробки обрано додаток PHP storm, це новий і
підтримуваний додаток від компанії Jet brains, в якому вбудовані інтепретатори
lamp stack, який має безліч комфортних модулів і функцій наприклад ми можемо
проводити дебаг коду. (рис.2.3)
Лист
ЧДТУ 222076.001 ПЗ
31
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 2.3 php storm
На роль шаблонізатора обираєм TWIG, який є досить популярним і
користоється великим попитом через його повноту рішень, відносно легкий
синтаксис для порівняння синтаксис php шаблонізатора і twig
мають різницю в коді на 3 строчки, що значно збільшує кількість
написаного коду який потім потрібно підтримувати, що несе за собою більші
витрати часу і грошей на витрату часу для пошуку помилок і їх вирішення. (рис.2.4)

Рисунок 2.4 Використання twig.

Лист
ЧДТУ 222076.001 ПЗ
32
Зм Арк. № докум. Пiдпис. Дата
нт

Також слід відзначити, що Chrome browser містить в собі досить корисні
інструменти для розробки, а саме:
- Elements, в якій описаний код сторінки , це дуже корисний інструмент
коли нам потрібно подивитись структуру сайту, а саме наприклад який стиль
підключений і яке поле знаходиться в тому чи іншому місці;
- Console, в ній ми можемо тестувати якийсь відрізок коду, за звичай це
код java script;
Sources, є дуже корисним інструментом, ми можемо переглядати всю
структуру ієрархії файлів які лежать в проекті але коли справу маємо з Drupal то
ми будемо бачити тільки ті файли і папки, що лежать всередині /core/web/… Це
зроблено для забезпечення файлів конфігурацій від злому. (рис.2.5)

Рисунок 2.5 Script article components.

Лист
ЧДТУ 222076.001 ПЗ
33
Зм Арк. № докум. Пiдпис. Дата
нт

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

Рисунок 2.6 Структура головної сторінки.
Структура головної сторінки має вміщувати в себе головні елементи
контенту з якими буде взаємодіяти користувач, а отже потрібно зробити ці
елементи як можна комфортніше для читання, розмістивши їх в такому порядку,
щоб користувачеві було приємно знаходись на сайті. Для цього було створено
макет структури сайту, в якому чітко виділяються всі елементи, ми маємо шапку
сайту яка вміщатиме в себе чотири кнопки для взаємодії з користувачем, по
середині розміщується головний контент який складається із 6 блоків при натискані
на який користувача переадресує на саме ту сторінку блоку яку він обрав.
Після верхньої частини сайту буде іти головний опис сторінки де автор
розповідає про себе. (рис.2.7)
Лист
ЧДТУ 222076.001 ПЗ
34
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 2.7 Структура головної сторінки.
В цій частині сторінки автор може заповнювати кожне поле текстом або
медіа. Можна заповнювати любим типом контенту і не хвилюватись що один тип
контенту налізе на інший, цього не станеться тому що дана сторінка є адаптивною,
кожний її блок є незалежним від інших блоком, Якщо кількість контенту
розтягнеться на стільки що це зможе призвести до порушення логіки структури
сайту то додавання контенту стане неможливим, для того щоб продовжити
додавати контент потрібно буде видалити старий або редагувати параметри
сторінки із адміністративної панелі, для чого доречі потрібно володіти знанням
html, css.
Нижня частина сайту є не менш цікава, ми маємо багатий функціонал з яким
може взаємодіяти користувач. А саме 18 блоків які описують різний дизайн, при
переході на окремий блок нас переадрисуваватиме на окрему сторінку де розписано
про саме той дизайн який ви обрали.(рис.2.8)

Лист
ЧДТУ 222076.001 ПЗ
35
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 2.8 Структура головної сторінки.
Тепер можна перейти до структури сторінки на яку буде переадресовувати
користувача після того як він натиснув на блок.(рис.2.9)

Рисунок 2.9 Структура сторінки яка описує окремий вид дизайну.
Маємо досить вмістну сторінку на якій можна буде легко і доступно
розписати саме про той вид дизайну який обрав користувач, також є можливість
для додавання фото і відео про той чи інший елемент дизайну який сподобався
користувачеві.
Лист
ЧДТУ 222076.001 ПЗ
36
Зм Арк. № докум. Пiдпис. Дата
нт

Висновок до частини 2

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

Лист
ЧДТУ 222076.001 ПЗ
37
Зм Арк. № докум. Пiдпис. Дата
нт

Лист
ЧДТУ 222076.001 ПЗ
38
Зм Арк. № докум. Пiдпис. Дата
нт

3 РЕАЛІЗАЦІЯ САЙТУ

3.1 Реалізація структури сайту
Варіанти розробки сайту в Drupal є різні, досить різні, ми як оберемо свій.
Для початку потрібно зрозуміти яку ієрархію структури ми будемо розробляти, а
саме що за чим буде йти, які параграфи, тексті, де буде знаходитись місце для
хедера, головної частини, банерів, футера, тощо.
Розроблятись сайт буде на окремому модулі в Drupal котрий називається
параграфи. Це окремий вид модуля який дозволяє створювати поля на сторінці і
редагувати їх як нам зручно, це може бути як система хуків та рендерінгу,
шаблонізація, чи навіть заповнення параграфів кодом в розділі source. (рис. 3.1)

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

Лист
ЧДТУ 222076.001 ПЗ
39
Зм Арк. № докум. Пiдпис. Дата
нт

В панелі управління обираємо з’явився модуль paragraph types, його
потрібно встановити в composer json файл який зберігає всі залежності для проекту.
Для цього перейдемо на офіціальний сайт Drupal.org де введемо назву
необхідного нам модуля paragraph types. (рис. 3.2)

Рисунок 3.2 Встановлення модуля paragraph.
Для його встановлення потрібно скористатися терміналом, перед початком
встановлення Docker container я встановив надбудову над Докером під назвою
Lando, за допомогою якого можна легко керувати докер контейнером, тепер в
термінали прописавши команду:
lando composer require ‘drupal/paragraph:1.4’ ми автоматично встановимо
модуль який потім можна перевірити на встановлення в панелі інструментів, який
з’явиться серед інших базових модулів після встановлення друпал, також можна
перевірити ще одним способом досить дієвим способом в терміналі виконавши
команду lando info яка виведе всі встановленні залежності для проекту їх також
можна редагувати в файлі composer.json (рис.3.3)

Лист
ЧДТУ 222076.001 ПЗ
40
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.3 lando info.
Коли параграфи встановлені успішно можна сміливо переходити до самого
проектування сайту. В панелі управління в розділі paragraph types створюємо нові
тип поля Header обираємо тип формату text formatted який надасть нам можливість
вносити html код всередині конфігурації параграфу під назвою source: (рис. 3.4)

Рисунок 3.4 Створена структура параграфів.

Лист
ЧДТУ 222076.001 ПЗ
41
Зм Арк. № докум. Пiдпис. Дата
нт

На рисунку (3.7) ми бачимо створений параграф, спочатку стоїть Header ,
Gallery, Description, Description_down всі вони окремі параграфи які незалежні один
від одного.
Кожен з них автоматично відображається в Doom дереві після створення, до
кожного параграфа ми можемо мати можливість редагувати та змінювати їх як нам
заманеться, кожний параграф може містити в собі безліч різних полів наприклад:
(рис.3.5)

Рисунок 3.5 Створення полів всередині параграфа Description.
Створення полів в параграфі Header: (рис.3.6)

Рисунок 3.6 Створення полів всередині параграфа Header.

Лист
ЧДТУ 222076.001 ПЗ
42
Зм Арк. № докум. Пiдпис. Дата
нт

Як ми бачимо на рис. 3.9 поля заповнюються досить швидко, окрім того ми
можемо додавати в них свою html розмітку яка за допомогою бібліотек таких як
Web Pack або звичайного Css коду буде стилізована так як нам буде потрібно.
Кожне поле має містити в собі контент, який клієнт потім може змінювати і
публікувати знову, наприклад маємо створений параграф, в ньому створене поле
яке повинно бути заповнене через те, що при його створенні разом з formatted long
ми вказали на обов’язкове заповнення поля, тому при заповненні вказуємо назву і
текст: (рис.3.7)

Рисунок 3.7 Заповнення полів текстом.
Деякі створені параграфи в залежності від того який тип поля вони мають:
text, image, media, links, тощо… мають свій індивідуальний спосіб заповнення,
наприклад заповнення поля параграфу text відрізняється від способу заповнення
image, я створив параграф Gallery який знаходиться одразу після параграфу Header,
його логічна назва одразу підказує нам, що в цьому параграфі знаходяться тільки
картинки, які ми теж можемо змінювати. (рис.3.8)

Лист
ЧДТУ 222076.001 ПЗ
43
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.8 Заповнення полів картинками.

Клієнт може редагувати всі поля які несуть в собі контент, який
відображається на сторінці, наприклад всі картинки можуть бути замінені іншими
досить легко, для цього просто потрібно перейти в вкладку Content, обрати свою
створену сторінку і замінити в обраному полі контент на той який нам потрібно,
але на що треба звернути увагу, саме, що ми не зможемо вставити текст в поле яке
було створене саме для картинок чи відео, але в деяких випадках ми можемо
вставити елементи медіа чи фото в поля які були створені тільки для типу контенту
текст але тільки при вибраній модифікації next formatted long це надає можливість
вставити фото чи відео в місце поля параграфу який повинен містити в собі тільки
елементи тексту, наприклад: (рис.3.9)

Лист
ЧДТУ 222076.001 ПЗ
44
Зм Арк. № докум. Пiдпис. Дата
нт

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

Рисунок 3.10 Заповнення поля html тегами.
Лист
ЧДТУ 222076.001 ПЗ
45
Зм Арк. № докум. Пiдпис. Дата
нт

Кожне поле може містити в вкладкі source код який є не тільки html, а й java
script або php. (рис. 3.11)

Рисунок 3.11 Заповнення поля html тегами.

Це є лише одним із способів створення html розмітки для сайту в Drupal, ми
спробуємо ще один за допомогою Twig шаблонізатора. (рис. 3.12)

Рисунок 3.12 Twig шаблонізатор для html розмітки.

Лист
ЧДТУ 222076.001 ПЗ
46
Зм Арк. № докум. Пiдпис. Дата
нт

Для початку слід перейти до всіх базових шаблонів Twig і обрати саме той
який нам потрібен, а саме вони є різні для лінків, фотографій, параграфів, фото,
тощо…
Ми виберемо саме той який нам потрібен, а саме лінки. (рис.3.13.)

Рисунок 3.13 Twig шаблонізатор для html розмітки.
Пізніше коли ми перейдемо до стилізації сайту ми побачимо результат
нашої роботи з лінкою TWIG, який буде виглядати так: (рис.3.14)

Рисунок 3.14 Використаання Twig.

Лист
ЧДТУ 222076.001 ПЗ
47
Зм Арк. № докум. Пiдпис. Дата
нт

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

3.2 Реалізація заповнення контенту
Заповнення контенту робиться тоді коли готова структура сайту, не
обов’язково вже мати готові стилі і гарне відображення сайту, навпаки стилізацією
займаються тоді коли вже є структура сайту і готовий контент на ній.
Саме з контенту і продовжимо заповнювати наш сайт, для цього ми
перейдемо в вкладку Content, де побачимо свою сторінку, натискаємо на кнопку
edit, після чого нас переводить до інструментів для редагування сторінки. Саме тут
ми або адміністратор зможе редагувати та додавати новий контент для нашого
блогу.(рис. 3.15)

Рисунок 3.15 Заповнення контену текст.

Лист
ЧДТУ 222076.001 ПЗ
48
Зм Арк. № докум. Пiдпис. Дата
нт

Для галереї ми створили окремий параграф і поля всередині неї, це
дозволить нам швидко заповнювати та редагувати контент. (рис. 3.16)

Рисунок 3.16 Заповнення контенту галерії.
Для контенту текст заповнюємо окремі поля, які одразу будуть відображені
на сайті. (рис. 3.17)

Рисунок 3.17 Заповнення контенту текст.

Лист
ЧДТУ 222076.001 ПЗ
49
Зм Арк. № докум. Пiдпис. Дата
нт

3.3 Реалізація дизайну сайту
Реалізовувати дизайн сайту я почав відразу в TWIG, а саме переопреділив
шаблон twig для сторінки: (рис.3.18)

Рисунок 3.18 Override page twig.
Після чого додав в нього блоки якими обгорнув частини коду, зробив це для
того щоб можна було краще робити верстку. Також було переоприділено шаблон
paragraph в якому я змінив структуру під ту яку мені потрібно: (рис. 3.19)

Рисунок 3.19 Override paragraph twig.

Лист
ЧДТУ 222076.001 ПЗ
50
Зм Арк. № докум. Пiдпис. Дата
нт

Далі іде розробка twig шаблону під поля параграфів які будемо верстати:
(рис.3.20)

Рисунок 3.20 Override paragraph field twig .
Після написання структури окремого параграфу в шаблонізаторі, можна
переходити до написання css стилів.
Для написання стилів прийнято використовувати окремі таск-менеджери для
автоматичного виконання завдань такі як мініфікація, тестування, об’єднання
файлів.
На сьогоднішній день є багато такс-менеджерів які використовуються для
компіляції JavaScript і Scc коду, я буду використовувати Webpack як пакувальник
статичних модулів для cms Drupal, він потрібен мені для того щоб компілювати
Scss код в Css. (рис.3.21)

Лист
ЧДТУ 222076.001 ПЗ
51
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.21 Стилізація тегів html.
Після того як Webpack зкомпілює scss код в scc він прийме наступний
вигляд: (рис.3.22)

Рисунок 3.22 Зкомпільований css код.
Після чого в такому ж порядку пишемо стилі для нашої сторінки, вони
будуть компілюватися автоматично після кожного обновлення кешу бази даних.
По завершенню написання стилів для структури сайту маю такий вид
головної сторінки: (рис. 3.23)

Лист
ЧДТУ 222076.001 ПЗ
52
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.23 Вид верхньої частини головної сторінки.

Весь контент має змогу редагуватись у будь якій кількості елементів тексту
та фото (рис.3.24)

Рисунок 3.24 Вид силок напроти тексту на головній сторінці.
Сайт має багато перехідних силок по варіанту натискання, вас перекине на
той сайт назви інтер’єру який ви обрали. (рис.3.25)

Лист
ЧДТУ 222076.001 ПЗ
53
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.25 Вид головних блоків-посилань в нижній частині головної
сторінки.
Сайт є адаптивним до мобільних пристроїв, він є еластичним до зміни
розмірів екрану і не втратить свою верстку при правильному розміщенні контенту.
(рис. 3.26)

Рисунок 3.26 Вид головної сторінки в зменшеному маштабі.

Лист
ЧДТУ 222076.001 ПЗ
54
Зм Арк. № докум. Пiдпис. Дата
нт

При переході на відповідну до обраного дизайну силку нас переміщає на нову
сторінку із відповідним описом дизайну який ми обрали: (рис. 3.27)

Рисунок 3.27 Вид перехідної сторінки.

3.4 Висновок до частини 3
Здійснили розробку структури сайту в адміністративній панелі cms
платформи де розмістили ієрархію блоків та вложенності елементів які можуть
бути легко переміщені між собою.
Здійснили заповнення контенту сайту, спробували розмістити контент в
різних місцях сайту, зробили висновок, що на адаптивність сайту розміщення
контенту не впливає.
Стилізували сайт за допомогою scss коду та бібліоткеи Webpack яка
компілює весь css код в scss. Під час компіляції помилок не було знайдено, а отже
все працює як треба.
Мали змогу перевірити адавптивність сайту на різних екранах девайсів, в
загалом верстка не зламується, а показує досить еластичне зжимання сайту навіть
попри те, що сайт не розроблявся для смартфонів.

Лист
ЧДТУ 222076.001 ПЗ
55
Зм Арк. № докум. Пiдпис. Дата
нт

ВИСНОВКИ
Проведено низку питань розробки на Drupal, було розібрано питання:
обирання стеку технологій для розробки, порівняння їх між собою та висновок,
розробка проекту на Drupal та його аналогах, чим сайти побудовані на різних cms
платформах відрізняються один від одного, було проведено їх аналіз, переваги та
недоліки.
Встановили докер контейнер який є сервером і розгорнули на ньому сайт,
робочий проект якого можна легко перенести на інший робочий пристрій.
Реалізовано структуру розміщення блоків при проектуванні сайту на Drupal,
здійснили розміщення їх в один одному та вистроїли ієрархію структури сайту.
Здійснили заповнення контенту сайту, спробували розмістити контент в
різних місцях сайту, зробили висновок, що на адаптивність сайту розміщення
контенту не впливає.
Стилізували сайт за допомогою scss коду та бібліоткеи Webpack яка
компілює весь css код в scss. Під час компіляції помилок не було знайдено, а отже
все працює як треба.
Мали змогу перевірити адавптивність сайту на різних екранах девайсів, в
загалом верстка не зламується, а показує досить еластичне зжимання сайту навіть
попри те, що сайт не розроблявся для смартфонів.
Під час проектування сайту був задіяний майже весь високотехнологічний
стек розробки lamp.
Мета моєї кваліфікаційної розробки досягнута. Вимоги виконанні
відповідно до чіткого технічного завдання.

Лист
ЧДТУ 222076.001 ПЗ
56
Зм Арк. № докум. Пiдпис. Дата
нт

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Pro Drupal development – T. Stratch 2017.
2. Drupal Book by Angela Byron – 2019.
3. Pro Drupal 7 Development Book by Todd Tomlinson – 2018.
4. Drupal 9 Module Development: Get Up and Running with Book by Daniel Cipes
– 2020.
5. Drupal Intranets with Open Atrium Book by Tracey Smith and Tracey Charles
Smith – 2019.
6. Pro Drupal 8 Development Book by Todd Tomlinson – 2021.
7. Drupal 9 Business Solutions Book by Trevor James – 2021.
8. Twig Hardcover – Picture Book, July 3 - 2018.
9. Twig, Bud, Leaf and Root: An Introduction for Beginners to Medicinal Herbs and
Plants and the Art of Herbalism Kindle Edition – 2020.
10. Learning PHP, MySQL, JavaScript, CSS, and HTML5: A Step-by-Step Guide to
Creating dynamic websites - 2015.
11. We create dynamic websites with PHP, MySQL, JavaScript, CSS and HTML5.
5th ed. – 2019.
12. JavaScript: The Good Parts Book by Douglas Crockford - 2021.
13. Head First JavaScript Programming: A Brain-Friendly Guide ... Book by Elizabeth
Robson and Erik Freeman – 2019.
14. Effective JavaScript: 68 Specific Ways to Harness the Power ... Book by David
Herman – 2020.
15. Drupal Book by Peter Shell – 2017.
16. Modern PHP: New Features and Good Practices 1st Edition.
17. Learn JavaScript Quickly: A Complete Beginner's Guide.
18. Twig fundamentals James Rouel.
19. Json for Beginners: Your Guide to Easily Learn Json In 7 Days.
20. Java XML and JSON: Document Processing for Java SE
21. Introduction to JavaScript Object Notation: A автор Ліндсей.

Лист
ЧДТУ 222076.001 ПЗ
57
Зм Арк. № докум. Пiдпис. Дата
нт

22. JavaScript Programming: A Brain-Friendly Guide ... Book by Elizabeth Robson
and Erik Freeman – 2019.
23. Drupal Book by Peter Shell – 2018.
24. HTML5: A Step-by-Step Guide to Creating dynamic websites - 2015.
25. Drupal 8 Development Book by Todd Tomlinson – 2020.
26. Drupal 8 Module Development: Get Up and Running with Book by Daniel Cipes
– 2016.
27. Bud, Leaf and Root: An Introduction for Beginners to Medicinal Herbs and Plants
and the Art of Herbalism Kindle Edition – 2019.
28. JSON: Document Processing for Java SE – 2015.
29. Drupal Book by Peter Shell – 2019, 2 - edition.
30. Business Solutions Book by Trevor James – 2021.
31. Drupal 9 Module Development: Get Up and Running with Book by Daniel Cipes
– 2021.

Лист
ЧДТУ 222076.001 ПЗ
58
Зм Арк. № докум. Пiдпис. Дата
нт

ПРОГРАМНІ ЗАСОБИ
1. JetBrains PhP Storm 2021. X64, JetBrains, 2018 – 2022.
2. Office 365 for study. Corporation Microsoft, 1983-2020.
3. Drupal platform 2022, CMS – Drupal, 2005- 2022.

Лист
ЧДТУ 222076.001 ПЗ
59
Зм Арк. № докум. Пiдпис. Дата
нт

Репозиторій ЧДТУ