- •«Затверджую»
- •На дипломну роботу студенту Гончару Роману Вячеславовичу
- •1.Тема роботи: Розробка «Landing Page» за допомогою препроцесора sass та cms «WordPress»
- •Анотація
- •В ступ
- •Розділ і аналітичний огляд літературних джерел
- •1.1 Система управління контентом WordPress
- •1.2 Системи управління контентом
- •1.3 Установка та налаштування cms WordPress
- •Розділ іі постановка задачі
- •2.1 Постановка та обгрунутвання задачі
- •Розділ ііі розробка landing page
- •3.1 Засоби які використовувались при створенні шаблона
- •3.2 Завантаження та керування темою у сms WordPress
- •3.3 Створення категорій та записів
- •3.4 Плагін MailPoet
- •Далі після натиснення на «Створити нову форму» відкриється вікно в якому можна налаштувати форму (Рис. 3.24).
- •Розділ іv Охорона праці
- •4.1. Шкідливі фактори, які впливають на користувача комп’ютера
- •4.2. Вибір монітора
- •4.3. Вимоги до приміщення
- •Висновки
- •Перелік використаних джерел
- •Додатки
1.3 Установка та налаштування cms WordPress
В першу чергу для того, щоб встановити WordPress систему потрібно завантажити з офіційного сайту розробника по адресу: https://wordpress.org, а ще краще – на сторінці з українською локалізацією програми: https://uk.wordpress.org, де розміщуються офіційна україномовна версія WordPress [11]. Після завантаження архіву з файлами WordPress його необхідно розпакувати в окрему теку на комп’ютері (за замовчуванням папка так і називається: wordpress) або не розпаковуючи завантажити на хостинг за допомогою FTP – клієнта. (Рис. 1.4).
Рис. 1.4. Завантаження CMS WordPress на хостинг
Після того, як вибрано архів
потрібно натиснути на кнопку «
»,
щоб почати процес завантажування файлів
на сервер. Після цього, як всі файли
завантажаться з’явиться вікно з файлами,
які були скопійовані (Рис. 1.5).
Р
ис.
1.5. Список завантажених файлів
П
ри
налаштуванні CMS
WordPress
потрібно вказати базу даних, але перед
тим, як почати налаштування потрібно
створити БД (Рис. 1.6).
Рис. 1.6. Створення БД
Далі потрібно встановити сам WordPress. Для цього потрібно перейти по адресі домену, який був наданий хостингом наприклад: «test.zzz.com.ua». Після чого з’явиться вікно WordPress (Рис. 1.7).
Рис. 1.7. вікно WordPress
У
вікні потрібно натиснути кнопку «вперед»,
далі з’являється таблиця в якій
потрібно ввести деталі підключення до
бази даних (Рис. 1.8).
Рис. 1.8. Деталі підключення до БД
В таблиці потрібно ввести наступні значення:
Назва бази даних: wordpress;
Ім’я користувача: username;
Пароль: password;
Хост бази даних: localhost;
Табличний префікс: wp_;
К
оли
всі дані були введені потрібно натиснути
кнопку «відправити» і далі з’явиться
вікно, яке повідомляє, що
тепер WordPress
з’єднаний
з базою даних (Рис. 1.9).
Рис. 1.9. Налаштування бази даних завершено
Після всіх проведених налаштувань, база даних буде виглядати наступним чином (Рис. 1.10).
Рис. 1.10. База даних MySQL
Далі відкриється вікно в якому потрібно надати необхідну інформацію для налаштування аккаунта WordPress (Рис. 1.11).
Рис. 1.11. Налаштування аккаунта WordPress
П
ісля
всіх налаштувань потрібно натиснути
кнопку «встановити WordPress»
після чого загрузиться (адмін –
панель) WordPress
(Рис. 1.12).
Рис. 1.12. Адмін. – панель
Отже, в цьому розділі було розглянуто, як встановити та налаштувати WordPress.
Розділ іі постановка задачі
2.1 Постановка та обгрунутвання задачі
Метою роботи є створення інформаційної системи Landing page. Веб‑сайт буде використовувати мову розмітки гіпертексту – HTML5. Також сайт буде містити популярну JavaScript–бібліотеку з відкритим сирцевим кодом.
jQuery є вільним програмним забезпеченням, для розробників jQuery надає можливості створення плагінів у верхній частині бібліотеки JavaScript. Використовуючи ці об'єкти, розробники можуть створювати абстракції для низькорівневої взаємодії та створювати анімацію для ефектів високого рівня. Це сприяє створенню потужних і динамічних веб‑сторінок [12].
Для стилізування веб‑сайту буде застосований препроцесор SASS за допомогою якого буде відбуватись компіляція в CSS. CSS – це каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS). CSS – це спеціальна мова, що використовується для опису сторінок, написаних мовами розмітки даних [13]. Для компіляції з SASS в CSS буде використовуватись компілятор Gulp.
Сайт буде використовувати Twitter Bootstrap 4.0.0-alpha.3. Bootstrap – це безкоштовний набір інструментів з відкритим кодом, призначений для створення веб‑застосунків та веб‑сайтів, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript. Bootstrap спрощує розробку веб‑застосунків та веб‑сайтів [14].
На сайті буде застосовано два види слайдерів Bootstrap та Slick. База даних буде створена за допомогою СУБД MySQL. Сайт буде інтегрований на CMS WordPress.
