Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/6905| Назва: | Розробка web-сайту магазину одягу |
| Автори: | Тарасенко , Ярослав Володимирович Гудзь, Віталій Русланович |
| Ключові слова: | Wordpress;інформаційна система;інтрнет-магазин;веб-сайт;магазин одягу |
| Дата публікації: | 17-чер-2021 |
| Короткий огляд (реферат): | У наш час Інтернет-технології набувають колосального розвитку, а інтернет-магазини стають все популярнішими. Кожен може придбати майже будь-який товар, не встаючи зі стільця, і в цьому допомагають інтернет-магазини. Інтернет-магазин – це спеціальний веб-сайт, на якому можна переглянути товари, що пропонуються, уважно вивчити особливості конкретної моделі, оплатити, не виходячи з дому, та отримати товари самостійно з доставкою додому. Існує багато причин, з яких компанії вибрати роботу в Інтернеті. Однак усі ці причини можна розділити на кілька категорій: • економія коштів; • економії часу; • можливість купувати товари цілодобово. Інтернет-торгівля пропонує багато переваг, які особливо помітні на етапі запуску. Відкрити інтернет-магазин набагато дешевше, ніж відкрити традиційний офлайн магазин. Зменшуючи витрати на відкриття, підприємець може зменшити націнку на товар і отримати нижчі ціни, ніж у звичайних магазинах, що є неабиякою перевагою перед офлайновим магазином. Переваги інтернет-магазину: • власник такого бізнесу залишається вільним в своїх діях. Головне – мати під рукою ноутбук або планшет і мати доступ до Інтернету. • для відкриття онлайн-магазину не потрібні значні фінансові вкладення. Утримання такого магазину коштує менше грошей, ніж оренда офлайнового магазину. Також суттєвою є економія на обслуговуючому персоналі. Доставку товарів можна здійснювати самостійно або скористайтеся службою доставки. • немає необхідності орендувати приміщення для зберігання речей. Якщо товар не великий, можна тримати його вдома. Але якщо необхідно організувати пункт прийому, можна подбати про невелике приміщення. • можна найняти бухгалтера, який лише складає річні звіти до податкових органів, це заощадить кошти на заробітну платню бухгалтеру. Існують також спеціальні Інтернет-послуги. Недоліки інтернет-магазину: • Основою інтернет-магазину є веб-сайт. Щоб бути цікавим, він повинен бути змістовним і добре заповненим. На це потрібно витратити певну кількість часу або певну суму грошей. На додаток до розміщення фотографій товару, потрібно детально його описувати і вказувати точні розміри; • підключення платіжних систем, щоб клієнти могли оплачувати покупки. Також у всіх платіжних системах є комісійні, які потрібно сплачувати за кожну операцію. • потрібна реклама. Певна сума сплачується за послуги реклами в пошукових системах; • доставка частково є недоліком. Якщо самостійно не доставляти товар, то є варіант того, що не всі служби готові до співпраці з інтернет-магазинами; • все це коштує грошей і часу. Численні опитування та дослідження показують, що в Інтернеті є товари, які користуються найбільшим попитом, зокрема побутова техніка та електроніка, комп’ютерна техніка та комплектуючі, книги, одяг, взуття тощо. Виходячи з вищесказаного, можна стверджувати, що тема роботи є досить актуальною. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/6905 |
| Розташовується у зібраннях: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| РЕП_БАК_Гудзь_WebC-1911.pdf Restricted Access | 4.95 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
Пояснювальна записка
до кваліфікаційної роботи бакалавра
на тему:
«Розробка web-сайту магазину одягу»
Виконав студент 4 курсу,
групи WebC-1911,
спеціальності 126 –
Інформаційні системи та
технології,
освітня програма – Web-
технології, Web-дизайн,
Гудзь В.Р.
Керівник к.т.н. Тарасенко Я.В.
Рецензент
Черкаси – 2021 року
ЗМІСТ
ВСТУП .................................................................................................................. 3
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ІСНУЮЧИХ АНАЛОГІВ
СИСТЕМИ ............................................................................................................ 6
1.1 Постановка задачі ...................................................................................... 6
1.2 Особливості розробки інтернет-магазинів одягу ................................... 7
1.3 Необхідні умови для створення успішного інтернет-магазину ............ 8
1.4 Аналітичний огляд існуючих аналогів інтернет-магазинів одягу ...... 11
1.5 Висновки до розділу 1 ............................................................................. 14
2 ПРОЕКТУВАННЯ WEB-САЙТУ ІНТРНЕТ-МАГАЗИНУ ........................ 15
2.1 Принципи розробки інтернет-магазинів ................................................ 15
2.2 Проектування бази даних інтернет-магазину ....................................... 17
2.3 Висновки до розділу 2 ............................................................................. 20
3 ОПИС ПРОГРАМНОЇ ЧАСТИНИ ................................................................ 21
3.1 Середовище розробки інтрнет-магазину ............................................... 21
3.1.1 Порівняльна характеристика методів розробки веб-сайтів
інтернет-магазинів ............................................................................... 21
3.1.2 Загальні відомості про CMS Wordpress .................................... 24
3.2 Програмна реалізація wеб-сайту інтернет-магазину одягу ................. 27
3.3 Висновки до розділу 3 ............................................................................. 56
ВИСНОВКИ ........................................................................................................ 57
ДОДАТОК A 482 ЧДТУ 21980-01 Розробка web-сайту магазину одягу.
Специфікація ...................................................................................................... 58
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ .......................................................... 82
ЧДТУ 211980.003 ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. Гудзь В.Р. Літ. Лист Листів
Перев. Тарасенко Я.В. Розробка web-сайту магазину одягу. Н 2
Реценз Пояснювальна записка ФІТІС,
Н. . контр. Колесніков К.В.
Прокопенко Т.О. кафедра ІТП, WebC-1911
Затв.
ВСТУП
У наш час Інтернет-технології набувають колосального розвитку, а
інтернет-магазини стають все популярнішими. Кожен може придбати майже
будь-який товар, не встаючи зі стільця, і в цьому допомагають інтернет-
магазини.
Інтернет-магазин – це спеціальний веб-сайт, на якому можна
переглянути товари, що пропонуються, уважно вивчити особливості
конкретної моделі, оплатити, не виходячи з дому, та отримати товари
самостійно з доставкою додому.
Існує багато причин, з яких компанії вибрати роботу в Інтернеті. Однак
усі ці причини можна розділити на кілька категорій:
• економія коштів;
• економії часу;
• можливість купувати товари цілодобово.
Інтернет-торгівля пропонує багато переваг, які особливо помітні на
етапі запуску. Відкрити інтернет-магазин набагато дешевше, ніж відкрити
традиційний офлайн магазин. Зменшуючи витрати на відкриття, підприємець
може зменшити націнку на товар і отримати нижчі ціни, ніж у звичайних
магазинах, що є неабиякою перевагою перед офлайновим магазином.
Переваги інтернет-магазину:
власник такого бізнесу залишається вільним в своїх діях. Головне –
мати під рукою ноутбук або планшет і мати доступ до Інтернету.
для відкриття онлайн-магазину не потрібні значні фінансові
вкладення. Утримання такого магазину коштує менше грошей, ніж оренда
офлайнового магазину. Також суттєвою є економія на обслуговуючому
персоналі. Доставку товарів можна здійснювати самостійно або скористайтеся
службою доставки.
Арк.
ЧДТУ 211980.003 ПЗ 3
Зм н. Арк. № докум. Підпис Дата
немає необхідності орендувати приміщення для зберігання речей.
Якщо товар не великий, можна тримати його вдома. Але якщо необхідно
організувати пункт прийому, можна подбати про невелике приміщення.
можна найняти бухгалтера, який лише складає річні звіти до
податкових органів, це заощадить кошти на заробітну платню бухгалтеру.
Існують також спеціальні Інтернет-послуги.
Недоліки інтернет-магазину:
Основою інтернет-магазину є веб-сайт. Щоб бути цікавим, він
повинен бути змістовним і добре заповненим. На це потрібно витратити певну
кількість часу або певну суму грошей. На додаток до розміщення фотографій
товару, потрібно детально його описувати і вказувати точні розміри;
підключення платіжних систем, щоб клієнти могли оплачувати
покупки. Також у всіх платіжних системах є комісійні, які потрібно сплачувати
за кожну операцію.
потрібна реклама. Певна сума сплачується за послуги реклами в
пошукових системах;
доставка частково є недоліком. Якщо самостійно не доставляти
товар, то є варіант того, що не всі служби готові до співпраці з інтернет-
магазинами;
все це коштує грошей і часу.
Численні опитування та дослідження показують, що в Інтернеті є
товари, які користуються найбільшим попитом, зокрема побутова техніка та
електроніка, комп’ютерна техніка та комплектуючі, книги, одяг, взуття тощо.
Виходячи з вищесказаного, можна стверджувати, що тема роботи є
досить актуальною.
Предметом дослідження є методи розробки веб-сайтів.
Об’єктом дослідження є технології створення веб-сайтів інтрнет-
магазинів.
Арк.
ЧДТУ 211980.003 ПЗ 4
Зм н. Арк. № докум. Підпис Дата
Метою роботи є дослідження принципів побудови інтернет-магазину та
розробка веб-сайту Інтернет-магазину одягу.
Для досягнення поставленої мети необхідно розв’язати наступні задачі:
• обґрунтування необхідності створення інтернет-магазину одягу;
• аналітичний огляд існуючих аналогів інтернет-магазинів одягу;
• аналіз та вибір технологій для розробки інтернет-магазину;
• розробка веб-сайту інтернет-магазину одягу.
Обсяг кваліфікаційної роботи бакалавра складає 84 сторінки, у тому
числі вступ, три розділи, висновки, додаток та список використаних джерел.
Робота містить 47 рисунків, 3 таблиці та 25 найменувань літературних джерел.
Арк.
ЧДТУ 211980.003 ПЗ 5
Зм н. Арк. № докум. Підпис Дата
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ІСНУЮЧИХ АНАЛОГІВ
СИСТЕМИ
1.1 Постановка задачі
У сучасному суспільстві час цінується найбільше. Люди проводять
багато часу за покупками. Для економії часу на покупки створені інтернет-
магазини. Інтернет-магазин – це веб-сайт, де за допомогою браузера можна
замовити необхідні товари, які кур’єр доставить додому чи в офіс [2]. Можна
використовувати електронну пошту, Skype або телефон для вирішення
проблем, роз’яснення та скасування замовлення. Переваги цього виду покупки
очевидні:
- не потрібно нікуди їхати і стояти в черзі;
- не потрібно думати про доставку товару – це зроблять співробітники
інтернет-магазину;
- заощадження часу;
- оформити замовлення легко і зручно.
Інтернет-магазини порівняно зі звичайними:
- мають можливість встановлювати нижчі ціни на весь асортимент
через менші затрати (головним чином за рахунок оренди торгових
площ, дорогого торгового обладнання);
- може організовувати додаткові знижки та програми знижок завдяки
обліку та підтримці бази даних клієнтів;
- консультувати клієнтів щодо вибору та використання товарів у
відповідний час;
- пошук та доставка рідкісних товарів на замовлення;
- можливість придбання товарів без посередників, коли товари
купуються через інтернет-магазин компанії, яка виготовила
продукцію.
Арк.
ЧДТУ 211980.003 ПЗ 6
Зм н. Арк. № докум. Підпис Дата
Це означає, що віртуальні магазини практично нічим не відрізняються
від справжніх: на веб-сайті можна проконсультуватися зі спеціалістом,
дізнатися подробиці про нові товари, навіть отримати карту постійного
покупця і відповідно отримати знижки. Майже все схоже на звичайний
магазин: є і пільги, і спеціальні пропозиції. Вартість товару нижча, тоді як в
більшості випадків доставка товару здійснюється безкоштовно і цілодобово.
Інтернет-магазини містять повний перелік товарів із фотографіями,
композиціями та анотаціями, інформацію про постійні акції для покупців
інтернет-магазину та програми знижок. Інтернет-консультації проводять
фахівці. Одним з найважливіших аспектів функціонування такої компанії є
надійне апаратне та програмне забезпечення, а також робота кур’єрської
компанії з оптимізації маршрутів з метою зменшення транспортних витрат та
збільшення кількості оброблених замовлень.
Вище описано ідеальну версію інтернет-магазину за сучасними
критеріями.
Особливістю внутрішньої торгівлі в Інтернеті є те, що в більшості
випадків покупець може лише ознайомитись і замовити пропонований в
Інтернеті товар. Сама покупка зазвичай здійснюється в автономному режимі.
Водночас, за оцінками експертів, понад 60% замовлень в інтернет-магазинах
здійснюються не через веб-сайт компанії, а по телефону [6].
У той же час успішна торгівля вимагає значних продажів, обсяг
продажів провідних інтернет-магазинів досягає величезних масштабів, що
свідчить про актуальність обраної теми.
1.2 Особливості розробки інтернет-магазинів одягу
Існує кілька причин для створення багатобрендових інтернет-магазинів.
Наприклад, у такому інтернет-магазині відразу можна знайти одяг різних
брендів, від спортивного стилю до вечірньої моди. Однією з причин появи
Арк.
ЧДТУ 211980.003 ПЗ 7
Зм н. Арк. № докум. Підпис Дата
мультитрендових «гігантів» є бажання власника трохи «захиститися» від
можливості провалу та виграти на фоні великої кількості інтернет-магазинів.
Багато власників таких інтернет-магазинів допускають одну помилку –
вони намагаються розробити веб-сайт, який базується на їх власному смаку.
Такий підхід може негативно позначитися на ефективності майбутнього
бізнесу. Думка потенційних покупців може принципово відрізнятися від думки
майбутнього власника веб-сайту, просто тому, що вони належать до іншої
вікової групи, мають різні звички та потреби.
Існує два основних варіанти розробки торгової платформи з різними
напрямками торгівлі:
- єдиний сайт з однаковим інтерфейсом для різних груп
товарів;
- сторінка, що складається з декількох розділів. Кожен із
розділів орієнтований на замовника та має інтерфейс, який
спеціалізується на його задачах.
Перший варіант – це «шаблони» інтернет-магазину. Варіант шаблону
може запропонувати оптова компанія, яка працює з професійними покупцями.
Оптовики знають товари, які вони купують. Їм не потрібно дивитись на товар з
усіх боків і читати його властивості [12]. Для них головне, щоб було зручно
заповнити великий список покупок і надіслати його менеджерам інтернет-
магазину.
Другий варіант – це спеціалізований інтернет-магазин, розроблений для
конкретних товарних груп та орієнтований на конкретну цільову аудиторію. Ця
опція потрібна, якщо інтернет-магазин розробляється для роздрібного покупця.
1.3 Необхідні умови для створення успішного інтернет-магазину
Якісний веб-дизайн. Навіть якщо інтернет-магазин продає якісний
товар, він приречений на провал, якщо матиме неякісний дизайн. Адже Згідно
Арк.
ЧДТУ 211980.003 ПЗ 8
Зм н. Арк. № докум. Підпис Дата
з дослідженням Kissmetrics , 93% покупців вважають зовнішній вигляд
найважливішим фактором при здійсненні покупки [8].
Елементи дизайну повинні захоплювати відвідувачів, наприклад,
використовувати зображення в повну ширину та використовувати мінімум
тексту. Прикладом є дизайн, який Reebok вибрав для свого інтернет-магазину
(рис. 1.1).
Рисунок 1.1 – Приклад дизайну інтернет-магазину Reebok
Інформативна сторінка «Про нас». Якщо відвідувач переходить на
сторінку «Про нас», це означає, що він уже зацікавлений у продукції магазину і
хоче переконатися, що продукт, представлений на сайті, найкращий. На цій
сторінці потрібно чітко прописати, що за організація, що робить і, головне, що
пропонує клієнтам. Тут вітаються всі відгуки, досягнення та будь-які соціальні
докази.
Контактна інформація повинна бути чіткою та простою для пошуку на
сторінці про компанію та на всьому веб-сайті. Обов’язково має містити:
- контактну електронна адресу;
- номери телефонів;
- фізичну адресу;
Арк.
ЧДТУ 211980.003 ПЗ 9
Зм н. Арк. № докум. Підпис Дата
- акаунти соціальних мереж.
Набивання сторінки «Про нас» занадто великою кількістю інформації
може бути обтяжливою для відвідувачів сайту. Краще обирати
мінімалістичний дизайн, щоб інформація була чіткою та зрозумілою.
Швидка та дієва онлайн-підтримка. Покупці повинні знати, що вони
матимуть підтримку після або під час здійснення покупки, якщо це необхідно.
Гарантування усунення проблемних питань після покупки та консультування
перед покупкою може перетворити потенційних покупців на лояльних клієнтів,
що повертаються.
Найповніший, корисний тип підтримки – це функція живого чату, яка
працює цілодобово та без вихідних. Цей інструмент може збільшити кількість
конверсій на сайті на 10% або навіть більше. Якщо з певних причин немає
ресурсів, щоб запропонувати цілодобову підтримку, все одно потрібно надати
якийсь вид послуг, щоб допомогти людям у робочий час.
Популярні варіанти оплати. Жоден інтернет-магазин не може
існувати без платежів. На сайті потрібно запропонувати клієнтам широкий
вибір популярних способів оплати, щоб вони завжди могли легко здійснити
покупку.
Використання SEO. Ведення блогу або блоку статей – це можливість
генерувати більше трафіку в магазині. Публікації, які містять ключові слова
SEO та містять корисну інформацію для споживачів, можуть отримати високі
результати в результатах пошуку [4]. Публікації в блогах, які мають високий
рейтинг і закликають людей відвідувати сайт, є сходинкою для людей, які
відвідують сторінки товарів і здійснюють покупки.
Блог також є засобом для спілкування з аудиторією на глибокому рівні.
Побачивши, як клієнти реагують на вміст сайту, можна проінформувати їх про
стратегії задоволення потреб і бажань покупців. Публікації в блогах формують
довіру покупців, коли вони отримують якусь цінність, наприклад, експертні
поради щодо використання товару.
Арк.
ЧДТУ 211980.003 ПЗ 10
Зм н. Арк. № докум. Підпис Дата
Відгуки про товари. Відгуки та рейтинги продукції надзвичайно
підвищують надійність магазину. Інтернет-покупці не можуть особисто
зустрітися з продавцями, тому для оцінки продавців вони покладаються на
відгуки інших покупців. Рейтинги на сторінках товару економлять час
споживачів, швидко показуючи, що думають про товар інші клієнти.
1.4 Аналітичний огляд існуючих аналогів інтернет-магазинів одягу
У мережі інтернет існує величезна кількість онлайн-магазинів, лише у
Європі на 2020 рік їх налічувалось близько 1 мільйона. Для аналітичного
огляду існуючих аналогів інтернет-магазинів було вибрано 4, які показуються в
пошуковій системі Google на першій сторінці:
lamoda.ua;
red.ua;
issaplus.com;
kasta.ua.
Lamoda.ua – онлайн-магазин модного одягу, взуття та аксесуарів в
Україні (рис. 1.2) [22].
Рисунок 1.2 – Головна сторінка інтернет-магазину Lamoda.ua
Арк.
ЧДТУ 211980.003 ПЗ 11
Зм н. Арк. № докум. Підпис Дата
Сайт позиціонує себе як маркетплейс, тобто майданчик для продажу
товарів інших продавців. Дизайн сайту виконано в світлих тонах зі зручною
навігаційною панеллю вгорі головної сторінки []. На сайті наявні такі зручні
функції, як онлайн-консультація, оплата замовлення на сайті, пошук товарів за
критеріями, наявність мовної панелі. До недоліків сайт можна віднести
повільне завантаження сторінок при виборі української мови на мовній панелі,
пошук товарів українською мовою не відбувається.
Red.ua – інтернет-магазин одягу, взуття, аксесуарів та товарів для дому
(рис. 1.3) [23].
Рисунок 1.3 – Головна сторінка інтернет-магазину Red.ua
До переваг можна віднести наявність зручного навігаційного меню
вгорі сторінки, мовної панелі, пошуку за фільтрами, можливість онлайн-оплати
замовлення. Сайт містить і недоліки. До них можна віднести відсутність
онлайн-консультації (є лише можливість залишити номер телефону для
зворотнього зв’язку), при виборі української мови на мовній панелі не вся
інформація сайту відображається українською, відсутність інформації про
магазин.
Issaplus.com – інтернет-магазин торгового дому ISSA Plus (рис. 1.4) [24].
Арк.
ЧДТУ 211980.003 ПЗ 12
Зм н. Арк. № докум. Підпис Дата
Рисунок 1.4 – Головна сторінка інтернет-магазину Issaplus.com
Сайт виконано в світлій кольоровій гаммі, має великі інформативні
зображення, мовну та навігаційну панелі, онлайн-допомогу у месенджерах. До
недоліків можна віднести відсутність онлайн-оплати.
Kasta.ua – маркетплейс, що надає магазинам можливість продажу будь-
яких товарів на своєму майданчику (рис. 1.5) [25].
Рисунок 1.4 – Головна сторінка маркетплейсу Kasta.ua
Арк.
ЧДТУ 211980.003 ПЗ 13
Зм н. Арк. № докум. Підпис Дата
Сайт має ряд переваг: наявність зручної навігаційної та мовної панелі,
наявність різних способів оплати, в тому числі і онлайн з гарантуванням
безпечності здійснення платежу, зручний пошук з великою кількістю фільтрів
для пошуку. До недоліків можна віднести відсутність онлайн-консультування.
Розроблюваний інтернет-магазин одягу має бути розроблений з
урахуванням вищенаведених переваг проаналізованих аналогів та бути вільним
від їх недоліків.
1.5 Висновки до розділу 1
В даному розділі здійснено детальний аналіз предметної області,
визначено суть технічної проблеми, актуальність питання, проаналізовано
сучасний стан та перспективи розвитку сайтів. Також було здійснено огляд
існуючих інтернет-магазинів, визначені їх переваги і недоліки, які будуть
враховані при розробці власного інтрнет-магазину одягу.
Арк.
ЧДТУ 211980.003 ПЗ 1 4
Зм н. Арк. № докум. Підпис Дата
2 ПРОЕКТУВАННЯ WEB-САЙТУ ІНТРНЕТ-МАГАЗИНУ
2.1 Принципи розробки інтернет-магазинів
Працюючи над дизайном інтернет-магазину, необхідно дотримуватись
усталеним принципам, що допоможуть в майбутньому збільшити продажі в
інтернет-магазині.
1) Унікальні елементи дизайну.
Це один із найголовніших важливих принципів дизайну інтернет-
магазинів. Завдяки жорсткій конкуренції, яка є на ринку, необхідно мати спосіб
привернути покупця саме до свого сайту. Це необхідно, оскільки це відіграє
роль у початковому враженні, яке сайт справляє на будь-якого відвідувача
сайту.
Незвичний підхід до композиції веб-сайту спонукає користувачів
наполегливо переглядати веб-сайт і надає більше можливостей впливати на їх
рішення щодо купівлі [9].
За допомогою унікальних елементів дизайну легко переконати покупців
помітити саме цей сайт серед конкурентів, запам’ятати і знову відвідати його,
щоб знову побачити інтерфейс.
2) Зручність користування.
Досвід, який отримують клієнти під час покупок в інтернет-магазині,
повинен бути бездоганним, щоб вони не залишали його посеред процесу. Це
означає, що веб-сайт повинен бути зручним для навігації. Складність шкодить
продажам.
Веб-сайт повинен бути ретельно та стратегічно продуманий. Товари
необхідно згрупувати за категоріями та підкатегоріями, які не викликають
заплутаності. Їх слід показувати у чистому вигляді з достатнім маркуванням,
що полегшує читання та сканування.
Арк.
ЧДТУ 211980.003 ПЗ 15
Зм н. Арк. № докум. Підпис Дата
Крім того, сайт повинен мати достатню кількість деталей та фотографій
товарів, щоб покупці могли добре їх розуміти, не торкаючись і не бачачи їх у
реальності. Чим це реалістичніше, тим вище шанси продати цей товар.
3) Акцент на безпеці.
Безпека є одним з основних принципів дизайну інтернет-магазинів.
Важливо створити веб-сайт, якому клієнти будуть довіряти [10]. Більшість
онлайн-покупців турбуються про свою конфіденційність і про те, чи захистить
сайт їх дані, забезпечивши безпечну транзакцію. Якщо веб-сайт втратить
довіру в будь-який момент часу, вони просто віддадуть перевагу покупці в
іншому місці.
Щоб наголосити покупцеві на безпеці, необхідно:
поділітись відгуками про продукцію, щоб передати покупцеві
задоволення від думок інших і усунути будь-які сумніви;
звернути увагу на такі деталі, як непрацюючі посилання та
помилки 404;
використовувати захищений сервер;
використовувати системи захисту такі, як Norton чи McAfee, це
гарантує потенційним клієнтам безпечний процес транзакцій.
4) Функція пошуку.
Обов’язково потрібно включити на сайт функцію пошуку [15]. Люди
звернуться знову, точно знаючи, що саме вони хочуть придбати, і якщо вони не
зможуть це знайти за лічені секунди, швидше за все, покинуть сайт.
Перегляд різних категорій та пошук певного товару може стати нудним
завданням. Ось чому також слід оновити функцію пошуку, щоб мати наступні
можливості:
функція автозаповнення; це функція, яку Google використовує для
завершення речення ще до того, як користувач закінчить його
вводити;
Арк.
ЧДТУ 211980.003 ПЗ 16
Зм н. Арк. № докум. Підпис Дата
пошук; вікно пошуку має бути присутнім на кожній сторінці, бути
видимим, швидко впізнаваним і простим у використанні;
відповідь на будь-які запити, такі як назви продуктів, категорії, їх
атрибути, а також інформацію про обслуговування клієнтів;
сортування та фільтрування результатів пошуку.
5) Ефективні описи товарів.
Опис продукції сильно впливає на рішення про покупку. Чим вищою є
якість описового тексту, зображень і навіть відео, тим краще, а отже, тим
швидше споживач буде співвідносити це з тим, що йому потрібно, і послідовно
впливати на рішення про купівлю. Це часто не є по суті елементом дизайну,
однак приділення пильної уваги цим деталям може збільшити рентабельність
інвестицій у майбутньому.
2.2 Проектування бази даних інтернет-магазину
База даних інтернет-магазину є основою електронної комерції. Вона
містить всю інформацію про товар, управління нею спрощує усі внутрішні та
зовнішні комунікаційні процеси [6].
Існує три основні типи баз даних:
1) Реляційна база даних: набір електронних таблиць, де дані
пов’язані між собою. Наприклад, дані бази даних клієнтів
пов’язані з даними бази даних замовлень. Оновлення певної
інформації означає, що вона буде автоматично оновлена в інших
таблицях.
2) Нереляційна база даних або ключ-значення: базується на каталозі,
який групує дані (значення) у ряд типів папок (ключів), таких як
«товари», «замовлення» та «клієнти».
3) Хмарна база даних: організовує та зберігає базу даних
централізовано, з універсальним доступом з будь-якого пристрою
та користувача, що має дозвіл.
Арк.
ЧДТУ 211980.003 ПЗ 17
Зм н. Арк. № докум. Підпис Дата
В кваліфікаційній роботі використана реляційна база даних.
Створення бази даних інтернет-магазину одягу відбувається за
допомогою запиту, як показано на рис. 2.1.
Рисунок 2.1 – Створення бази даних за допомогою запиту
В роботі розроблено базу даних у MySQL. Нижче наведена схема
взаємозв’язків сутностей або візуальна конструкція бази даних (рис. 2.2).
Рисунок 2.2 – Конструкція бази даних інтернет-магазину одягу
Арк.
ЧДТУ 211980.003 ПЗ 18
Зм н. Арк. № докум. Підпис Дата
Далі детально описано деякі таблиці, які містить база даних інтернет-
магазину одягу.
Таблиця «Користувачів». Одна і та ж таблиця може використовуватися
для управління різними типами користувачів, включаючи адміністраторів та
клієнтів. Користувачі можуть відстежувати власні замовлення та відстежувати
стан замовлень. Нижче наведено опис усіх колонок таблиці користувачів
(табл. 2.1).
Таблиця 2.1 – Опис полів таблиці «Користувачі».
Id Унікальний ідентифікатор для ідентифікації користувача.
First Name Ім'я користувача.
Middle Name По-батькові користувача
Last Name Прізвище користувача
Номер мобільного телефону користувача. Його можна
Mobile використовувати для входу та реєстрації.
Електронна адреса користувача. Його можна використовувати
Email для входу та реєстрації.
Password Хеш пароля генерується за відповідним алгоритмом.
Hash
Admin Прапорець, щоб визначити, чи є користувач адміністратором.
Прапорець, щоб визначити, чи може користувач розміщувати
Vendor товар у магазині.
Ця колонка може бути використана для розрахунку скільки часу
Registered At користувач зареєстрований на сайті
Last Login За його допомогою можна визначити останній вхід користувача.
Інформація про постачальника відображається на сторінці
Profile продукту.
Таблиця «Товари». В даній таблиці зберігаються дані про товар. Нижче
наведено опис усіх стовпців таблиці товарів (табл. 2.2).
Таблиця 2.2 – Опис полів таблиці «Товари».
Id Унікальний ідентифікатор для ідентифікації товару.
Ідентифікатор користувача для ідентифікації адміністратора або
User Id постачальника.
Назва товару, яка відображатиметься на сторінці магазину та
Title сторінці товару.
Метазаголовок, який буде використовуватися для заголовка
Meta Title браузера та SEO.
Арк.
ЧДТУ 211980.003 ПЗ 19
Зм н. Арк. № докум. Підпис Дата
Продовження таблиці 2.2
Slug Формування URL-адреси.
Summary Короткий зміст.
Type Тип для розрізнення різних типів продукції.
SKU Підрозділ ведення запасів для відстеження товарних запасів.
Price Ціна товару.
Discount Знижка на товар.
Quantity Доступна кількість товару.
За його допомогою можна визначити, чи є товар загальнодоступним для
Shop покупок.
Created At У ньому зберігаються дата та час, коли продукт створюється.
Updated At У ньому зберігаються дата та час оновлення продукту.
Published At У ньому зберігаються дата та час, коли товар опублікований у магазині.
Starts At У ньому зберігаються дата та час, коли починається продаж товару.
Ends At У ньому зберігаються дата та час, коли закінчується продаж товару.
Content Колонка, що використовується для зберігання додаткових деталей товару.
Таблиця «Опис товару». В цій таблиці міститься інформація про
додаткову інформацію щодо товару (табл. 2.3).
Таблиця 2.2 – Опис полів таблиці «Товари».
Id Унікальний ідентифікатор для ідентифікації опису товару.
Product Id Ідентифікатор товару для ідентифікації категорії продукту.
Parent Id Ідентифікатор категорії для ідентифікації категорії опису.
Title Назва опису
Rating Рейтинг опису
За його допомогою можна визначити, чи є опис
Published загальнодоступним.
Created At У ньому зберігаються дата та час подання опису
Published At У ньому зберігаються дата та час публікації опису
Content Зберігання опису
Аналогічним чином побудовані решта таблиць бази даних.
2.3 Висновки до розділу 2
В другому розділі описано ключові принципи для успішного створення
інтернет-магазинів та описано структуру бази даних, що використовувалась
для розробки web-сайту магазину одягу.
Арк.
ЧДТУ 211980.003 ПЗ 20
Зм н. Арк. № докум. Підпис Дата
3 ОПИС ПРОГРАМНОЇ ЧАСТИНИ
3.1 Середовище розробки інтрнет-магазину
3.1.1 Порівняльна характеристика методів розробки веб-сайтів
інтернет-магазинів
CMS (система управління вмістом) допомагає створювати, керувати та
модифікувати вміст веб-сайту без необхідності в будь-яких навичках
кодування HTML або CSS [18].
Нижче розглянемо три найпопулярніші та найкращі платформи
управління вмістом на сьогодні, порівняємо їх плюси і мінуси:
WordPress;
Joomla;
Drupal.
Кожна з цих трьох найкращих систем управління вмістом сама по собі
на 100% безкоштовна – можна завантажити будь-яку безпосередньо з
офіційних веб-сайтів всього за пару кліків.
Хоча платформи CMS можна завантажувати безкоштовно, в деяких
випадках користувачі хочуть розширити власні набори функцій своєї CMS за
допомогою додаткових модулів та/або конструкцій:
плагіни WordPress доступні за ціною від 0 до 200 доларів;
плагіни Joomla : $0- $70;
плагіни Drupal : $0 - $100.
Те саме стосується тем – інсталяційних пакетів дизайну:
Теми WordPress доступні за ціною від 0 до 250 доларів;
Теми Joomla : $0 - $200;
Теми Drupal : $0 - $80.
WordPress найпростіший у використанні. Розширення функціональних
можливостей сайту, пошук та налаштування дизайну є набагато доступнішим.
Арк.
ЧДТУ 211980.003 ПЗ 21
Зм н. Арк. № докум. Підпис Дата
Крім того, багато хостингових компаній пропонують так званий
«хостинг WordPress», що означає, що розробнику не доведеться турбуватися
про технічну настройку сервера або турбуватися про те, щоб самостійно
встановити WordPress. Все це бере на себе хостингова компанія.
Що стосується налаштування, WordPress постачається з дружнім
інтерфейсом для налаштування зовнішнього вигляду сайту, зміни кольорів,
фонів та інших візуальних елементів. Joomla та Drupal більше орієнтовані на
розробників, які активно працюють з HTML та PHP.
Для будь-якої CMS доступно не так багато універсальних доповнень, а
ті, що є, не настільки вдосконалені, як їх аналоги у WordPress.
Популярність найкращих CMS можна оцінити за наступною діаграмою
(рис.3.1) [21].
Рисунок 3.1 – Діаграма популярності CMS
Діаграма показує, що 36% веб-сайтів не використовують жодну систему
управління вмістом, тобто написані власноруч розробниками. WordPress
Арк.
ЧДТУ 211980.003 ПЗ 22
Зм н. Арк. № докум. Підпис Дата
використовується у 41,6% усіх веб-сайтів, а частка серед усіх систем
управління контентом становить 64,9%.
Якість дизайну є величезним фактором при виборі системи управління
вмістом. І Joomla, і Drupal виглядають дещо архаїчно, якщо ви запитаєте нас.
WordPress має сучасний та оптимізований дизайн.
Якщо відкинути дизайн за замовчуванням, більшість користувачів
захоче змінити його на унікальний. Тут у гру вступають теми/шаблони.
Для WordPress доступні тисячі тем. Як безкоштовні, так і платні [13].
Для початку можна перейти в офіційний каталог тем на WordPress.org. Там
доступно понад 8000 безкоштовних тем. Також можна знайти тисячі інших
безкоштовних тем на теренах всього Інтернету.
Вибір як для Drupal, так і для Joomla набагато менший. Найголовніше
те, що навряд чи є вільні теми, які б мали гарний сучасний вигляд. Тут йде
мова про сотні тем порівняно з тисячами у WordPress.
Кожна з CMS пропонує свої власні пропозиції щодо встановлення
нових функцій на розроблюваному сайті:
WordPress називає їх нові плагіни додатків;
Joomla називає їх розширеннями;
Drupal називає їх модулями.
Ідея за ними в основному однакова – дозволити розробнику розширити
діапазон функцій за замовчуванням, які постачаються з системою управління
вмістом.
WordPress пропонує найбільшу кількість плагінів, і ці плагіни
користуються найбільшою популярністю у користувачів. Це означає, що вони
призначені для використання кінцевим користувачем сайту, вони забезпечують
вдосконалений інтерфейс та прості для сприйняття панелі управління.
Joomla також пропонує хороший каталог розширень, хоча і набагато
менший, ніж у WordPress.
Арк.
ЧДТУ 211980.003 ПЗ 23
Зм н. Арк. № докум. Підпис Дата
Модулі Drupal набагато більше орієнтовані на розробників. Існують
різні рішення для розширення API, налаштування додаткових токенів для
розробників, вдосконалення управління користувачами тощо. Загалом, вони
допоможуть додатково налаштувати внутрішні механізми Drupal, якщо
розробник працює над більш серйозним проектом. Однак існує не так багато
модулів, орієнтованих на користувача. Навіть пошук у каталозі модулів чогось
такого простого, як «контактна форма», не дає оптимістичних результатів.
Оновлення нової версії WordPress відбувається приблизно кожні 50-60
днів. Багато з цих оновлень незначні і просто виправляють невеликі помилки
та проблеми. Більші випуски WordPress виходять пару разів на рік.
Невеликі оновлення Joomla виходять трохи частіше, приблизно кожні
10-40 днів, але більші оновлюються лише раз на рік або навіть рідше.
Наприклад, версія Joomla 3.9 працює з 2018 року.
Drupal працює за встановленим графіком випусків, надаючи одне
оновлення виправлень та одне оновлення безпеки на місяць. Більші оновлення
– основні версії – з’являються два рази на рік.
У підсумку варто сказати, що кожна з описаних CMS має свої переваги
та недоліки. При виборі тієї чи іншої системи варто зважати на різні фактори,
що можуть вплинути на вибір. В кваліфікаційній роботі використано CMS
WordPress, оскільки вона найбільше відповідає вимогам виконання технічного
завдання, має необхідні розширення та плагіни.
3.1.2 Загальні відомості про CMS Wordpress
Перша версія WordPress була створена в 2003 році Меттом
Малленвегом та Майком Літтлом [14]. Спочатку це була проста платформа,
розроблена для людей, які бажають створювати основні блоги та розміщувати
їх в Інтернеті. Однак з часом WordPress перетворився на гнучкий, потужний
інструмент для створення майже будь-якого типу веб-сайту.
Арк.
ЧДТУ 211980.003 ПЗ 24
Зм н. Арк. № докум. Підпис Дата
Існують відмінності між WordPress.com та WordPress.org. Перший – це
конструктор веб-сайтів, де можна безкоштовно створювати та розміщувати
сайти. Він простий у використанні, але обмежений у своїх функціях.
WordPress.org – це потужніша платформа, що має цілу низку корисних
функцій.
WordPress створювався як невелика платформа, орієнтована на ведення
блогів. Це означає, що він має безліч функцій, які підходять для ведення
блогів, і це, мабуть, найкраще рішення для такого типу веб-сайтів. Існує
простий у використанні редактор для створення публікацій, надійна
функціональність коментарів та багато іншого [15].
Однак сьогодні WordPress не лише для створення особистого блогу.
Його використовують для створення практично будь-якого типу веб-сайту. Ось
лише невеликий вибір типів веб-сайтів, для яких WordPress ідеально підходить:
Інтернет-портфоліо: За допомогою правильної теми WordPress легко
налаштувати онлайн-портфоліо, щоб продемонструвати свої досягнення
та навички, показати свою роботу та минулі проекти та (найголовніше)
залучити нових клієнтів.
Партнерські веб-сайти: якщо потрібно створити веб-сайт афілійованого
маркетингу (або монетизувати сайт якимось іншим способом), форум
WordPress пропонує безліч спеціальних рішень.
Новинні сайти: формат блогу WordPress добре працює для новинних
статей, і багато з тих самих функцій підходять як для ведення блогів, так і
для сайтів новин.
Інтернет-магазини: існує безліч інструментів WordPress, таких як плагін
WooCommerce з набором необхідних функцій для успішного запуску
інтернет-магазину.
Форуми: легко створювати форуми, сайти фанів, бази знань, вікі чи будь-
яке інше місце для збору однодумців в Інтернеті.
Арк.
ЧДТУ 211980.003 ПЗ 25
Зм н. Арк. № докум. Підпис Дата
Бізнес-сайти. Незалежно від того, чи є бізнес великим чи малим, можна
ділитися інформацією, надавати контактні дані, використовувати
фірмовий стиль тощо.
WordPress пропонує розробникам безліч корисних функцій. Однією з
них є інформаційна панель WordPress. Це приватна адміністративна область, де
розробник може контролювати всі аспекти свого сайту з одного місця (рис.
3.2).
Рисунок 3.2 – Інформаційна панель WordPress
На інформаційній панелі також розміщений гнучкий, простий у
користуванні редактор, який робить створення контенту легким. Розробник
отримує доступ до великої кількості налаштувань та параметрів, щоб зробити
якісний сайт. Крім того, WordPress розроблений з урахуванням
продуктивності, безпеки та оптимізації пошукової системи (SEO) –
Арк.
ЧДТУ 211980.003 ПЗ 2
Зм н. Арк. № докум. Підпис Дата 6
найважливіших елементів практично для кожного сайту, незалежно від його
розміру та спрямованості.
Якщо розробник знає мови HTML та CSS, він може внести майже будь-
які зміни в дизайн сайту. Якщо досвід технічної майстерності розробника
невеликий, можна скористатися темами та плагінами, щоб налаштувати його
відповідно до потреб замовника сайту [12].
Теми – це програмне забезпечення, яке можна завантажити та
встановити на веб-сайті WordPress, щоб змінити його вигляд. Використовуючи
тему, є можливість змінити макет та зовнішній вигляд сайту і навіть внести
деякі зміни в його функціональність.
Деякі теми мають загальний характер, що дозволяє персоналізувати
сайт відповідно до власного стилю та брендингу. Інші специфічні для певного
типу веб-сайтів – ідеально підходять для щоденників, інтернет-магазинів,
портфоліо та майже будь-чого іншого. У будь-якому випадку, теми зазвичай
надають доступ до безлічі готових елементів, які можна змішувати та
поєднувати, щоб створити унікальний вигляд.
На відміну від тем, плагіни дозволяють додавати нові функції на сайт та
збільшувати функціональність сайту. Існують прості плагіни, які додають лише
одну нову функцію, наприклад, форму зворотного зв’язку чи галерею
зображень, або розширені плагіни для внесення кардинальних змін у
функціонування того чи іншого сайту.
3.2 Програмна реалізація wеб-сайту інтернет-магазину одягу
Web-сайт магазину одягу та аксесуарів створено на популярній
безкоштовній системі управління сайтами WordPress з відкритим вихідним
текстом OpenSource. Wordpress – найпоширеніша система керування сайтами,
бо має багато переваг, що і зумовило вибір в її бік. Основна перевага WordPress
– надзвичайна гнучкість у налагоджені, завдяки плагінам – практично немає тої
задачі, якої не можна вирішити за допомогою цієї системи. Філософія
Арк.
ЧДТУ 211980.003 ПЗ 27
Зм н. Арк. № докум. Підпис Дата
WordPress - це максимально швидке ядро, що дозволяє підключати до нього
додаткові плагіни залежно від того, якою функціональністю повинен володіти
сайт. Система дозволяє підключати будь-яку кількість.
Переді мною як розробником сайту стояла задача створення інтернет-
магазину одягу та аксесуарів зі зрозумілим та дружелюбним інтерфейсом для
користувачів. Простота та зрозумілість – основні переваги електронного
магазину, яких, як мені здається, і було досягнуто на прикладі сайту
http://winwear.
Інтерфейс сайт зроблено у стриманій блакитно-білій кольоровій гамі, що
легко сприймається користувачами. Було обрано тему WordPress Kapee з
широким функціоналом. Тему повністю перекладено українською мовою та
налаштовано (Рисунок 3.3).
Рисунок 3.3 – Тема WordPress Kapee та її налаштування в Консолі.
На першій сторінці користувачів зустрічають два банера з актуальною
інформацією про знижки в каруселі. Ліворуч розташований логотип порталу
Арк.
ЧДТУ 211980.003 ПЗ 28
Зм н. Арк. № докум. Підпис Дата
WinWear, який створено в Photoshop у вигляді лаконічного шрифту з м’якими
лініями. Користувач, клікнувши по ньому з будь-якої сторінки сайту,
переходить на Головну сторінку. Фактично тут є вся інформація, яка потрібна
потенційним покупцям.
Головне меню сайту традиційно знаходиться зверху сторінки і описує
категорії товарів магазину, де покупець одразу може обрати потрібний товар.
Головне меню доповнено коротким меню праворуч з відповідями на поширені
питання, контактами та блогом магазину. Також нижче додаткового меню
розташовано іконки пошуку по сайту, списком бажань, кошиком профілем
користувача (Рисунок 3.4):
Рисунок 3.4 – Меню сайту.
Меню створено в Головній Консолі (Рисунок 3.5):
Рисунок 3.5 – Головне меню в Консолі.
Головне меню інтернет-магазину WinWear складається з описаних
нижче сторінок.
Арк.
ЧДТУ 211980.003 ПЗ 2 9
Зм н. Арк. № докум. Підпис Дата
«Головна». На головній сторінці покупці знайомляться з магазином,
його перевагами, асортиментом товарів. На верхньому великому банері з двома
слайдами розміщено інформацію про знижки, з цього слайдера можна перейти
на категорії чоловічого і жіночого одягу, клікнувши на кнопку. Клікнувши на
іконці бренду, що розміщено в ряд, покупець таким чином може перейти на
сторінку з відсортованим товаром по заданому бренду. Внизу сторінки
розміщено багато корисної інформації для покупців, як то контактні дані
магазину, сервіс, профіль користувача, а посилання на соціальні мережі та дані
про розробника сайту (Рисунок 3.6). Слайдер з двома банерами вгорі сторінки
розроблено з допомогою плагіну Slider Revolution. У внутрішньому графічному
редакторі плагіну легко було створено дизайн банера та його фунціонал
(Рисунок 3.7).
Рисунок 3.6 – Головна сторінка.
Арк.
ЧДТУ 211980.003 ПЗ 30
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.7 – Розробка банера на Головній сторінці у плагіні Slider Revolution.
«Чоловіки». Тут покупці заходять на сторінку власне інтернет-магазину
чоловічого одягу. На більшій частині сторінки – перелік товарів з назвою,
ціною і можливістю порівняти товари або додати до списку бажань. На фото
деяких товарів прикріплено мітку контрастного помаранчевого кольору про те,
що товар рекомендовано до покупки. На цій сторінці товари можна сортувати:
за популярністю, за рейтингом, за новинками та за ціною. Ліворуч – бокова
панель з категоріями інших товарів та кілька фільтрів: за ціною, за кольором,
за розміром та за середнім рейтингом. В підвалі сайту – традиційно контактна
інформація, посилання на інші сторінки сайту та на профіль зареєстрованого
користувача, а також посилання на соцмережі та розробника сайту (Рисунок
3.8).
Арк.
ЧДТУ 211980.003 ПЗ 3 1
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.8 – Сторінка «Чоловіки».
Переглянути повну інформацію про товар користувач може двома
способами:
1) Натиснути значок лупи «Швидкий перегляд» під фото товару
(Рисунок 3.9);
2) Натиснути на фото чи назву товару для більш детального перегляду і
замовлення (Рисунок 3.10).
Арк.
ЧДТУ 211980.003 ПЗ 32
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.9 – Вікно «Швидкий перегляд товару».
Рисунок 3.10 – Сторінка детальної інформації про товар.
Арк.
ЧДТУ 211980.003 ПЗ 33
Зм н. Арк. № докум. Підпис Дата
На сторінці з детальною інформацією про товар покупцям представлена
інформація про склад товару, бренд, ціну, знижки, наявність, додаткові фото,
кольори та розміри. Також є товари, з якими можна купити обраний товар,
нижче – перелік супутніх товарів в слайдері (Рисунок 3.11).
Рисунок 3.11 – Сторінка детальної інформації про товар.
Цікава фішка – можливість додати товар в список бажань (значок
сердечко) (Рисунок 3.12) та в список порівнянь (значок дві перехрещені
стрілки) (Рисунок 3.13). Список бажань можна оглянути, натиснувши на
значок сердечка у верхньому меню.
Арк.
ЧДТУ 211980.003 ПЗ 34
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.12 – Сторінка «Список бажань».
Рисунок 3.13 – Сторінка «Порівняння товарів».
Кнопка «Додати в кошик» неактивна допоки покупець не обрав опції
товару – колір та розмір. Також покупцеві доступна таблиця розмірів (Рисунок
3.14).
Арк.
ЧДТУ 211980.003 ПЗ 35
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.14 – Сторінка «Довідник розмірів».
Нижче також присутня додаткова інформація, а також відгуки про
товар, які залишили покупці через форму відгуків (Рисунок 3.15).
Рисунок 3.15 – Відгуки на сторінці товару.
Адміністратор сайту редагує чи додає нові товари нові в Консолі
(Рисунок 3.16).
Арк.
ЧДТУ 211980.003 ПЗ 36
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.16 – Редагування товарів в Консолі.
«Жінки». На цій сторінці розміщено товари з асортименту жіночого
одягу, доступного до замовлення. Є можливість показувати товари по 6, 9, 12,
24, 36 та 48 одиниць на сторінці, а також розмістити товари або у вигляді
списку, або у вигляді сітки. На лівій боковій панелі – перелік всіх категорій
товару інтернет-магазину, а також фільтри за кольором, розміром і ціною.
Внизу сайту – інформація про контакти магазину, останні новини, сервісна
інформація, інформація про доставку та оплату тощо. Праворуч – посилання
соцмережі, в яких присутній магазин WinWear (Рисунок 3.17).
Арк.
ЧДТУ 211980.003 ПЗ 37
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.17 – Сторінка «Жінки».
«Взуття». На сторінці розміщено перелік товарів з категорії «Взуття».
Користувачі можуть замовити обраний товар, клікнувши на значок швидкий
перегляд або, звичайно, обравши товар у відкритому вікні з повною
інформацією про товар. Ліворуч – повний список категорій товарів в інтернет-
магазині WinWear, біля кожної категорії в круглих дужках відображена
кількість товарів в обраній категорії (Рисунок 3.18).
Арк.
ЧДТУ 211980.003 ПЗ 38
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.18 – Сторінка «Взуття».
Сторінка «Годинники». Розміщення інформації на цій сторінці
ідентичне тому, як інформація подана на попередніх сторінках (Рисунок 3.19).
Редагувати категорії товарів адміністратор має в Консолі (Рисунок 3.20).
Рисунок 3.19 – Сторінка «Годинники».
Арк.
ЧДТУ 211980.003 ПЗ 39
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.20 – Редагування категорії «Взуття» в Консолі.
Сторінка «Сумки та рюкзаки». Це сторінка онлайн-магазину, де покупці
мають змогу придбати вподобані сумки чи рюкзаки різних брендів. Зліва на
сторінці – швидкий доступ до всіх категорій магазину з відображенням
кількості товарі, а також фільтри по ціні, розбиті на кілька груп та за кольором
(Рисунок 3.21). Бренди адміністратор може редагувати чи додавати нові в
Консолі (Рисунок 3.22). Також у адміністратора є можливість додати атрибути
товарів, як то колір або розмір (Рисунок 3.23).
Арк.
ЧДТУ 211980.003 ПЗ 4 0
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.21 – Сторінка «Сумки та рюкзаки».
Арк.
ЧДТУ 211980.003 ПЗ 41
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.22 – Редагування брендів в Консолі.
Рисунок 3.23 – Редагування атрибутів товарів в Консолі.
Арк.
ЧДТУ 211980.003 ПЗ 42
Зм н. Арк. № докум. Підпис Дата
Сторінка «SALE». Розпродажі на сайтах так міцно увійшли в наше
життя, що на власному сайті магазину WinWear було також вирішено винести
сторінку розпродажів в окремий пункт меню. Отже, на цій сторінці покупці
бачать лише товари зі знижками, а при простому наведенні мишки на товар
вони можуть побачити таймер відліку часу до закінчення дії знижки на певний
товар (Рисунок 3.24).
Рисунок 3.24 – Сторінка «SALE».
Всі атрибути товарів, зокрема їх варіації та дати початку та закінчення
розпродажів, адміністратор редагує в Консолі (Рисунок 3.25).
Рисунок 3.25 – Редагування атрибутів товару в Консолі.
Арк.
ЧДТУ 211980.003 ПЗ 43
Зм н. Арк. № докум. Підпис Дата
Обравши розмір, колір товару (якщо такі атрибути присутні в товарі),
користувач повинен обрати наступну дію у вікні, що спливає праворуч
(Рисунок 3.26).
Рисунок 3.26 – Вікно, що спливає, після додавання товарів в Кошик.
Після того, як користувач натиснув на кнопку «Переглянути кошик»,
він переходить на сторінку власне Кошика, де може ще раз оглянути обраний
товар, змінити його кількість, застосувати купон на знижку. Також на сторінці
присутня інформація про кілька товарів, які можуть зацікавити покупця також.
Якщо вся інформація щодо обраного товару влаштовує покупця, то він
натискає кнопку «Перейти до оформлення» (Рисунок 3.27).
Арк.
ЧДТУ 211980.003 ПЗ 44
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.27 – Сторінка «Кошик».
Потім користувач на сторінці «Оформлення замовлення» повинен
заповнити платіжні дані, як то адресу, телефон, ім’я, електронну пошту, а
також обрати спосіб оплати та розмістити замовлення замовлення. Також на
цій сторінці покупцю надається ще одна можливість ввести купон на знижку за
наявності (Рисунок 3.28).
Арк.
ЧДТУ 211980.003 ПЗ 45
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.28 – Сторінка «Оформлення замовлення».
Після підтвердження замовлення користувач переходить на наступну
сторінку, де може ознайомитись з деталями замовлення. Також ця інформація
буде направлена користувачеві на електронну пошту, вказану при оформленні
замовлення (Рисунок 3.29).
Арк.
ЧДТУ 211980.003 ПЗ 46
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.29 – Сторінка «Подробиці замовлення».
Всі замовлення адміністратор редагує через Консоль Wordpress. Він
може змінити статус замовлення, додати примітки або видалити замовлення
(Рисунок 3.30).
Арк.
ЧДТУ 211980.003 ПЗ 47
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.30 – Редагування замовлення через Консоль.
Також адміністратор може проглянути всю аналітику та складені звіти в
Консолі в плагіні WooCommerce, як то валові продажі за певний період,
продажі в розрізі покупців, статуси замовлень тощо (Рисунок 3.31).
Рисунок 3.31 – Аналітика замовлень через Консоль.
Арк.
ЧДТУ 211980.003 ПЗ 48
Зм н. Арк. № докум. Підпис Дата
Сторінка «Блог». На цій сторінці користувачі можуть прочитати статті
по темі моди, стилю, дизайну. Інформацію подано як дописи в журналі з фото-
та відео контентом. На правій боковій панелі – вікно пошуку, а також три
закладки з останніми та популярними статтями блогу та останніми
коментарями до дописів. Нижче – архів статей, категорії дописів та їх теги для
швидкого доступу до статей певної теми (Рисунок 3.32).
Рисунок 3.32 – Сторінка «Блог».
Арк.
ЧДТУ 211980.003 ПЗ 49
Зм н. Арк. № докум. Підпис Дата
Сторінка «Поширені питання». На цю сторінку користувачі переходять
з пункту додаткового верхнього меню. Тут можна дізнатись відповіді на
найпоширеніші питання, які виникають у покупців під час замовлення
(Рисунок 3.33).
Рисунок 3.32 – Сторінка «Поширені питання».
Сторінка «Контакти». На сторінці розміщено інформацію про контактні
дані магазину, робочі години, а також форма зворотнього зв'язку. Користувач
має змогу надіслати свої питання, заповнивши поля форми та клікнувши на
кнопку «Надіслати». Ця інформація направляється на електронну адресу
адміністратора сайту (Рисунок 3.33).
Арк.
ЧДТУ 211980.003 ПЗ 50
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.33 – Сторінка «Контакти».
Форма зворотнього зв’язку на сторінці «Контакти» була створена
завдяки плагіну ContactForms7, в якому можна редагувати всі поля, їх тип,
значення (Рисунок 3.34).
Арк.
ЧДТУ 211980.003 ПЗ 51
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.34 – Редагування форми зворотнього зв’язку в Консолі.
Сторінка «Мій профіль». На цю сторінку користувач може зайти двома
способами – через значок в верхньому меню та через пункт меню в підвалі
сайту. Тут користувач може зареєструватись для зручності, переглянути свої
замовлення, зроблені на сайті в магазині, а також редагувати інформацію про
себе (ім’я, адресу, телефон, електронну пошту, аватар, пароль) (Рисунок 3.35).
Рисунок 3.35 – Сторінка «Мій профіль».
Арк.
ЧДТУ 211980.003 ПЗ 52
Зм н. Арк. № докум. Підпис Дата
Адміністратор сайту додає або редагує статті в Консолі (Рисунок 3.36).
Рисунок 3.36 – Записи сайту в Консолі.
Також адміністратор сайту має можливість редагувати медіа файли, які
потрібні для сайту через Консоль (Рисунок 3.37).
Рисунок 3.37 – Медіафайли сайту в Консолі.
Сторінка «Наша команда». На сторінці розміщено інформацію про
працівників сайту з їх фото, кредо життя та посиланнями на їх соціальні мережі
(Рисунок 3.38).
Арк.
ЧДТУ 211980.003 ПЗ 53
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.38 – Сторінка «Наша команда».
Сторінка «Про нас». Ознайомитись з основними принципами роботи
магазину, з його перевагами та відгуками задоволених клієнтів користувач
може перейшовши на цю сторінку в підвалі сайту (Рисунок 3.39).
Арк.
ЧДТУ 211980.003 ПЗ 54
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.39 – Сторінка «Про нас».
Сторінки «Гарантії», «Політика конфіденційності», «Повернення
товару», «Доставка», «Оплата». Ці сторінки ідентичні по дизайну та несуть
інформаційне навантаження для користувачів по певній темі (Рисунок 3.40).
Арк.
ЧДТУ 211980.003 ПЗ 5 5
Зм н. Арк. № докум. Підпис Дата
Рисунок 3.40 – Сторінка «Доставка».
3.3 Висновки до розділу 3
В даному розділі детально описано процес розробки web-сайту
магазину одягу, представлено дизайн сайту та вміст його сторінок.
Арк.
ЧДТУ 211980.003 ПЗ 56
Зм н. Арк. № докум. Підпис Дата
ВИСНОВКИ
Електронна комерція, також відома як інтернет-торгівля, стосується
купівлі-продажу товарів або послуг за допомогою інтернету, а також передачі
грошей та даних для здійснення цих операцій. Електронна комерція часто
використовується для позначення продажу фізичних товарів в інтернеті, але
вона також може описувати будь-яку комерційну операцію, що відбувається
через Інтернет.
Тоді як електронний бізнес стосується всіх аспектів ведення бізнесу в
інтернеті, електронна комерція стосується конкретно операцій з товарами та
послугами.
В останні роки електронна комерція набуває небачених масштабів. За
останні два роки значна частина офлайнових магазинів перейшла на терени
інтернету у зв’язку зі світовою пандемією. Тенденція збільшення електронної
комерції буде зростати і надалі. Тому кваліфікаційна робота бакалавра має
актуальний характер.
В роботі розроблено веб-сайт інтернет-магазину одягу засобами системи
керування вмістом сайту з відкритим вихідним кодом – Wordpress. Для його
розробки була розроблена реляційна база даних, що складається з 13 таблиць,
що пов’язані між собою зв’язками тип «один-до-багатьох».
Веб-сайт інтернет-магазину одягу розроблений з урахуванням переваг та
недоліків проаналізованих аналогічних українських інтернет-магазинів, а саме:
наявність миттєвої оплати замовленя через PayPal, великої кількості критеріїв
вибору одягу в пошуку на сайті, проста й зрозуміла форма оформлення
замовлення тощо. Web-сайт інтернет-магазину одягу розроблений з урахування
правил ергономіки створення сайтів, має стриману кольорову гамму.
Таким чином, мета роботи досягнута, всі вимоги технічного завдання
виконані у повному обсязі.
Арк.
ЧДТУ 211980.003 ПЗ 57
Зм н. Арк. № докум. Підпис Дата
ДОДАТОК A
ЗАТВЕРДЖЕНО
Зав. кафедри ІТП, проф.
_________________ Прокопенко Т.О.
«____» ________________ 2021 р.
РОЗРОБКА WEB-САЙТУ МАГАЗИНУ ОДЯГУ
Специфікація
482 ЧДТУ 21980-01
Листів 2
Розробник _______________ Гудзь В.Р.
Керівник _______________ Тарасенко Я.В.
Н. Контроль _______________ Колесніков К.В.
Черкаси, 2021
2
482 ЧДТУ 21980-01
Позначення Найменування Примітка
Документація
482 ЧДТУ 21980-01 12 01 Текст програми
РОЗРОБКА WEB-САЙТУ МАГАЗИНУ ОДЯГУ
482 ЧДТУ 21980-01 12 01
Текст програми
Листів 22
Розробник _____________ Гудзь В.Р.
Н
2021
2
482 ЧДТУ 21980-01 34 01
Лістинг програмного коду файлу contact-form.php плагіну ContactForms7 для
форми зворотнього зв’язку на сайті.
<?php
class WPCF7_ContactForm {
const post_type = 'wpcf7_contact_form';
private static $found_items = 0;
private static $current = null;
private $id;
private $name;
private $title;
private $locale;
private $properties = array();
private $unit_tag;
private $responses_count = 0;
private $scanned_form_tags;
private $shortcode_atts = array();
public static function count() {
return self::$found_items;
}
public static function get_current() {
return self::$current;
}
public static function register_post_type() {
register_post_type( self::post_type, array(
'labels' => array(
'name' => __( 'Contact Forms', 'contact-form-7' ),
'singular_name' => __( 'Contact Form', 'contact-form-7' ),
),
'rewrite' => false,
'query_var' => false,
'public' => false,
'capability_type' => 'page',
'capabilities' => array(
'edit_post' => 'wpcf7_edit_contact_form',
'read_post' => 'wpcf7_read_contact_form',
'delete_post' => 'wpcf7_delete_contact_form',
'edit_posts' => 'wpcf7_edit_contact_forms',
'edit_others_posts' => 'wpcf7_edit_contact_forms',
'publish_posts' => 'wpcf7_edit_contact_forms',
3
482 ЧДТУ 21980-01 34 01
'read_private_posts' => 'wpcf7_edit_contact_forms',
),
) );
}
public static function find( $args = '' ) {
$defaults = array(
'post_status' => 'any',
'posts_per_page' => -1,
'offset' => 0,
'orderby' => 'ID',
'order' => 'ASC',
);
$args = wp_parse_args( $args, $defaults );
$args['post_type'] = self::post_type;
$q = new WP_Query();
$posts = $q->query( $args );
self::$found_items = $q->found_posts;
$objs = array();
foreach ( (array) $posts as $post ) {
$objs[] = new self( $post );
}
return $objs;
}
public static function get_template( $args = '' ) {
$args = wp_parse_args( $args, array(
'locale' => '',
'title' => __( 'Untitled', 'contact-form-7' ),
) );
$locale = $args['locale'];
$title = $args['title'];
if ( ! $switched = wpcf7_load_textdomain( $locale ) ) {
$locale = determine_locale();
}
$contact_form = new self;
$contact_form->title = $title;
$contact_form->locale = $locale;
4
482 ЧДТУ 21980-01 34 01
$properties = $contact_form->get_properties();
foreach ( $properties as $key => $value ) {
$properties[$key] = WPCF7_ContactFormTemplate::get_default( $key );
}
$contact_form->properties = $properties;
$contact_form = apply_filters( 'wpcf7_contact_form_default_pack',
$contact_form, $args
);
if ( $switched ) {
wpcf7_load_textdomain();
}
self::$current = $contact_form;
return $contact_form;
}
public static function get_instance( $post ) {
$post = get_post( $post );
if ( ! $post
or self::post_type != get_post_type( $post ) ) {
return false;
}
return self::$current = new self( $post );
}
private static function generate_unit_tag( $id = 0 ) {
static $global_count = 0;
$global_count += 1;
if ( in_the_loop() ) {
$unit_tag = sprintf( 'wpcf7-f%1$d-p%2$d-o%3$d',
absint( $id ),
get_the_ID(),
$global_count
);
} else {
$unit_tag = sprintf( 'wpcf7-f%1$d-o%2$d',
absint( $id ),
$global_count
);
}
5
482 ЧДТУ 21980-01 34 01
return $unit_tag;
}
private function __construct( $post = null ) {
$post = get_post( $post );
if ( $post
and self::post_type == get_post_type( $post ) ) {
$this->id = $post->ID;
$this->name = $post->post_name;
$this->title = $post->post_title;
$this->locale = get_post_meta( $post->ID, '_locale', true );
$properties = $this->get_properties();
foreach ( $properties as $key => $value ) {
if ( metadata_exists( 'post', $post->ID, '_' . $key ) ) {
$properties[$key] = get_post_meta( $post->ID, '_' . $key, true );
} elseif ( metadata_exists( 'post', $post->ID, $key ) ) {
$properties[$key] = get_post_meta( $post->ID, $key, true );
}
}
$this->properties = $properties;
$this->upgrade();
}
do_action( 'wpcf7_contact_form', $this );
}
public function __get( $name ) {
$message = __( '<code>%1$s</code> property of a <code>WPCF7_ContactForm</code> object is <strong>no longer
accessible</strong>. Use <code>%2$s</code> method instead.', 'contact-form-7' );
if ( 'id' == $name ) {
if ( WP_DEBUG ) {
trigger_error(
sprintf( $message, 'id', 'id()' ),
E_USER_DEPRECATED
);
}
return $this->id;
} elseif ( 'title' == $name ) {
if ( WP_DEBUG ) {
trigger_error(
sprintf( $message, 'title', 'title()' ),
E_USER_DEPRECATED
6
482 ЧДТУ 21980-01 34 01
);
}
return $this->title;
} elseif ( $prop = $this->prop( $name ) ) {
if ( WP_DEBUG ) {
trigger_error(
sprintf( $message, $name, 'prop(\'' . $name . '\')' ),
E_USER_DEPRECATED
);
}
return $prop;
}
}
public function initial() {
return empty( $this->id );
}
public function prop( $name ) {
$props = $this->get_properties();
return isset( $props[$name] ) ? $props[$name] : null;
}
public function get_properties() {
$properties = (array) $this->properties;
$properties = wp_parse_args( $properties, array(
'form' => '',
'mail' => array(),
'mail_2' => array(),
'messages' => array(),
'additional_settings' => '',
) );
$properties = (array) apply_filters( 'wpcf7_contact_form_properties',
$properties, $this );
return $properties;
}
public function set_properties( $properties ) {
$defaults = $this->get_properties();
$properties = wp_parse_args( $properties, $defaults );
$properties = array_intersect_key( $properties, $defaults );
$this->properties = $properties;
7
482 ЧДТУ 21980-01 34 01
}
public function id() {
return $this->id;
}
public function unit_tag() {
return $this->unit_tag;
}
public function name() {
return $this->name;
}
public function title() {
return $this->title;
}
public function set_title( $title ) {
$title = strip_tags( $title );
$title = trim( $title );
if ( '' === $title ) {
$title = __( 'Untitled', 'contact-form-7' );
}
$this->title = $title;
}
public function locale() {
if ( wpcf7_is_valid_locale( $this->locale ) ) {
return $this->locale;
} else {
return '';
}
}
public function set_locale( $locale ) {
$locale = trim( $locale );
if ( wpcf7_is_valid_locale( $locale ) ) {
$this->locale = $locale;
} else {
$this->locale = 'en_US';
}
}
public function shortcode_attr( $name ) {
if ( isset( $this->shortcode_atts[$name] ) ) {
8
482 ЧДТУ 21980-01 34 01
return (string) $this->shortcode_atts[$name];
}
}
// Return true if this form is the same one as currently POSTed.
public function is_posted() {
if ( ! WPCF7_Submission::get_instance() ) {
return false;
}
if ( empty( $_POST['_wpcf7_unit_tag'] ) ) {
return false;
}
return $this->unit_tag() === $_POST['_wpcf7_unit_tag'];
}
/* Generating Form HTML */
public function form_html( $args = '' ) {
$args = wp_parse_args( $args, array(
'html_id' => '',
'html_name' => '',
'html_class' => '',
'output' => 'form',
) );
$this->shortcode_atts = $args;
if ( 'raw_form' == $args['output'] ) {
return '<pre class="wpcf7-raw-form"><code>'
. esc_html( $this->prop( 'form' ) ) . '</code></pre>';
}
if ( $this->is_true( 'subscribers_only' )
and ! current_user_can( 'wpcf7_submit', $this->id() ) ) {
$notice = __(
"This contact form is available only for logged in users.",
'contact-form-7' );
$notice = sprintf(
'<p class="wpcf7-subscribers-only">%s</p>',
esc_html( $notice ) );
return apply_filters( 'wpcf7_subscribers_only_notice', $notice, $this );
}
$this->unit_tag = self::generate_unit_tag( $this->id );
$lang_tag = str_replace( '_', '-', $this->locale );
9
482 ЧДТУ 21980-01 34 01
if ( preg_match( '/^([a-z]+-[a-z]+)-/i', $lang_tag, $matches ) ) {
$lang_tag = $matches[1];
}
$html = sprintf( '<div %s>',
wpcf7_format_atts( array(
'role' => 'form',
'class' => 'wpcf7',
'id' => $this->unit_tag(),
( get_option( 'html_type' ) == 'text/html' ) ? 'lang' : 'xml:lang'
=> $lang_tag,
'dir' => wpcf7_is_rtl( $this->locale ) ? 'rtl' : 'ltr',
) )
);
$html .= "\n" . $this->screen_reader_response() . "\n";
$url = wpcf7_get_request_uri();
if ( $frag = strstr( $url, '#' ) ) {
$url = substr( $url, 0, -strlen( $frag ) );
}
$url .= '#' . $this->unit_tag();
$url = apply_filters( 'wpcf7_form_action_url', $url );
$id_attr = apply_filters( 'wpcf7_form_id_attr',
preg_replace( '/[^A-Za-z0-9:._-]/', '', $args['html_id'] ) );
$name_attr = apply_filters( 'wpcf7_form_name_attr',
preg_replace( '/[^A-Za-z0-9:._-]/', '', $args['html_name'] ) );
$class = 'wpcf7-form';
if ( $this->is_posted() ) {
$submission = WPCF7_Submission::get_instance();
$data_status_attr = $this->form_status_class_name(
$submission->get_status()
);
$class .= sprintf( ' %s', $data_status_attr );
} else {
$data_status_attr = 'init';
$class .= ' init';
}
10
482 ЧДТУ 21980-01 34 01
if ( $args['html_class'] ) {
$class .= ' ' . $args['html_class'];
}
if ( $this->in_demo_mode() ) {
$class .= ' demo';
}
$class = explode( ' ', $class );
$class = array_map( 'sanitize_html_class', $class );
$class = array_filter( $class );
$class = array_unique( $class );
$class = implode( ' ', $class );
$class = apply_filters( 'wpcf7_form_class_attr', $class );
$enctype = apply_filters( 'wpcf7_form_enctype', '' );
$autocomplete = apply_filters( 'wpcf7_form_autocomplete', '' );
$novalidate = apply_filters( 'wpcf7_form_novalidate',
wpcf7_support_html5()
);
$atts = array(
'action' => esc_url( $url ),
'method' => 'post',
'class' => $class,
'enctype' => wpcf7_enctype_value( $enctype ),
'autocomplete' => $autocomplete,
'novalidate' => $novalidate ? 'novalidate' : '',
'data-status' => $data_status_attr,
);
if ( '' !== $id_attr ) {
$atts['id'] = $id_attr;
}
if ( '' !== $name_attr ) {
$atts['name'] = $name_attr;
}
$atts = wpcf7_format_atts( $atts );
$html .= sprintf( '<form %s>', $atts ) . "\n";
$html .= $this->form_hidden_fields();
$html .= $this->form_elements();
if ( ! $this->responses_count ) {
$html .= $this->form_response_output();
}
11
482 ЧДТУ 21980-01 34 01
$html .= '</form>';
$html .= '</div>';
return $html;
}
private function form_status_class_name( $status ) {
switch ( $status ) {
case 'init':
$class = 'init';
break;
case 'validation_failed':
$class = 'invalid';
break;
case 'acceptance_missing':
$class = 'unaccepted';
break;
case 'spam':
$class = 'spam';
break;
case 'aborted':
$class = 'aborted';
break;
case 'mail_sent':
$class = 'sent';
break;
case 'mail_failed':
$class = 'failed';
break;
default:
$class = sprintf(
'custom-%s',
preg_replace( '/[^0-9a-z]+/i', '-', $status )
);
}
return $class;
}
private function form_hidden_fields() {
$hidden_fields = array(
'_wpcf7' => $this->id(),
'_wpcf7_version' => WPCF7_VERSION,
'_wpcf7_locale' => $this->locale(),
'_wpcf7_unit_tag' => $this->unit_tag(),
'_wpcf7_container_post' => 0,
'_wpcf7_posted_data_hash' => '',
);
12
482 ЧДТУ 21980-01 34 01
if ( in_the_loop() ) {
$hidden_fields['_wpcf7_container_post'] = (int) get_the_ID();
}
if ( $this->nonce_is_active() && is_user_logged_in() ) {
$hidden_fields['_wpnonce'] = wpcf7_create_nonce();
}
$hidden_fields += (array) apply_filters(
'wpcf7_form_hidden_fields', array() );
$content = '';
foreach ( $hidden_fields as $name => $value ) {
$content .= sprintf(
'<input type="hidden" name="%1$s" value="%2$s" />',
esc_attr( $name ), esc_attr( $value ) ) . "\n";
}
return '<div style="display: none;">' . "\n" . $content . '</div>' . "\n";
}
public function form_response_output() {
$status = 'init';
$class = 'wpcf7-response-output';
$content = '';
if ( $this->is_posted() ) { // Post response output for non-AJAX
$submission = WPCF7_Submission::get_instance();
$status = $submission->get_status();
$content = $submission->get_response();
}
$atts = array(
'class' => trim( $class ),
'aria-hidden' => 'true',
);
$output = sprintf( '<div %1$s>%2$s</div>',
wpcf7_format_atts( $atts ),
esc_html( $content )
);
$output = apply_filters( 'wpcf7_form_response_output',
$output, $class, $content, $this, $status
);
$this->responses_count += 1;
13
482 ЧДТУ 21980-01 34 01
return $output;
}
public function screen_reader_response() {
$primary_response = '';
$validation_errors = array();
if ( $this->is_posted() ) { // Post response output for non-AJAX
$submission = WPCF7_Submission::get_instance();
$primary_response = $submission->get_response();
if ( $invalid_fields = $submission->get_invalid_fields() ) {
foreach ( (array) $invalid_fields as $name => $field ) {
$list_item = esc_html( $field['reason'] );
if ( $field['idref'] ) {
$list_item = sprintf(
'<a href="#%1$s">%2$s</a>',
esc_attr( $field['idref'] ),
$list_item
);
}
$validation_error_id = sprintf(
'%1$s-ve-%2$s',
$this->unit_tag(),
$name
);
$list_item = sprintf(
'<li id="%1$s">%2$s</li>',
$validation_error_id,
$list_item
);
$validation_errors[] = $list_item;
}
}
}
$primary_response = sprintf(
'<p role="status" aria-live="polite" aria-atomic="true">%s</p>',
esc_html( $primary_response )
);
$validation_errors = sprintf(
'<ul>%s</ul>',
implode( "\n", $validation_errors )
14
482 ЧДТУ 21980-01 34 01
);
$output = sprintf(
'<div class="screen-reader-response">%1$s %2$s</div>',
$primary_response,
$validation_errors
);
return $output;
}
public function validation_error( $name ) {
$error = '';
if ( $this->is_posted() ) {
$submission = WPCF7_Submission::get_instance();
if ( $invalid_field = $submission->get_invalid_field( $name ) ) {
$error = trim( $invalid_field['reason'] );
}
}
if ( ! $error ) {
return $error;
}
$atts = array(
'class' => 'wpcf7-not-valid-tip',
'aria-hidden' => 'true',
);
$error = sprintf(
'<span %1$s>%2$s</span>',
wpcf7_format_atts( $atts ),
esc_html( $error )
);
return apply_filters( 'wpcf7_validation_error', $error, $name, $this );
}
/* Form Elements */
public function replace_all_form_tags() {
$manager = WPCF7_FormTagsManager::get_instance();
$form = $this->prop( 'form' );
if ( wpcf7_autop_or_not() ) {
$form = $manager->normalize( $form );
$form = wpcf7_autop( $form );
15
482 ЧДТУ 21980-01 34 01
}
$form = $manager->replace_all( $form );
$this->scanned_form_tags = $manager->get_scanned_tags();
return $form;
}
public function form_do_shortcode() {
wpcf7_deprecated_function( __METHOD__, '4.6',
'WPCF7_ContactForm::replace_all_form_tags' );
return $this->replace_all_form_tags();
}
public function scan_form_tags( $cond = null ) {
$manager = WPCF7_FormTagsManager::get_instance();
if ( empty( $this->scanned_form_tags ) ) {
$this->scanned_form_tags = $manager->scan( $this->prop( 'form' ) );
}
$tags = $this->scanned_form_tags;
return $manager->filter( $tags, $cond );
}
public function form_scan_shortcode( $cond = null ) {
wpcf7_deprecated_function( __METHOD__, '4.6',
'WPCF7_ContactForm::scan_form_tags'
);
return $this->scan_form_tags( $cond );
}
public function form_elements() {
return apply_filters( 'wpcf7_form_elements',
$this->replace_all_form_tags()
);
}
public function collect_mail_tags( $args = '' ) {
$manager = WPCF7_FormTagsManager::get_instance();
$args = wp_parse_args( $args, array(
'include' => array(),
'exclude' => $manager->collect_tag_types( 'not-for-mail' ),
) );
16
482 ЧДТУ 21980-01 34 01
$tags = $this->scan_form_tags();
$mailtags = array();
foreach ( (array) $tags as $tag ) {
$type = $tag->basetype;
if ( empty( $type ) ) {
continue;
} elseif ( ! empty( $args['include'] ) ) {
if ( ! in_array( $type, $args['include'] ) ) {
continue;
}
} elseif ( ! empty( $args['exclude'] ) ) {
if ( in_array( $type, $args['exclude'] ) ) {
continue;
}
}
$mailtags[] = $tag->name;
}
$mailtags = array_unique( array_filter( $mailtags ) );
return apply_filters( 'wpcf7_collect_mail_tags', $mailtags, $args, $this );
}
public function suggest_mail_tags( $for = 'mail' ) {
$mail = wp_parse_args( $this->prop( $for ),
array(
'active' => false,
'recipient' => '',
'sender' => '',
'subject' => '',
'body' => '',
'additional_headers' => '',
'attachments' => '',
'use_html' => false,
'exclude_blank' => false,
)
);
$mail = array_filter( $mail );
foreach ( (array) $this->collect_mail_tags() as $mail_tag ) {
$pattern = sprintf(
'/\[(_[a-z]+_)?%s([ \t]+[^]]+)?\]/',
preg_quote( $mail_tag, '/' )
);
17
482 ЧДТУ 21980-01 34 01
$used = preg_grep( $pattern, $mail );
echo sprintf(
'<span class="%1$s">[%2$s]</span>',
'mailtag code ' . ( $used ? 'used' : 'unused' ),
esc_html( $mail_tag )
);
}
}
public function submit( $args = '' ) {
$args = wp_parse_args( $args, array(
'skip_mail' =>
( $this->in_demo_mode()
|| $this->is_true( 'skip_mail' )
|| ! empty( $this->skip_mail ) ),
) );
if ( $this->is_true( 'subscribers_only' )
and ! current_user_can( 'wpcf7_submit', $this->id() ) ) {
$result = array(
'contact_form_id' => $this->id(),
'status' => 'error',
'message' => __(
"This contact form is available only for logged in users.",
'contact-form-7'
),
);
return $result;
}
$submission = WPCF7_Submission::get_instance( $this, array(
'skip_mail' => $args['skip_mail'],
) );
$result = array(
'contact_form_id' => $this->id(),
'status' => $submission->get_status(),
'message' => $submission->get_response(),
'demo_mode' => $this->in_demo_mode(),
);
if ( $submission->is( 'validation_failed' ) ) {
$result['invalid_fields'] = $submission->get_invalid_fields();
}
switch ( $submission->get_status() ) {
case 'init':
18
482 ЧДТУ 21980-01 34 01
case 'validation_failed':
case 'acceptance_missing':
case 'spam':
$result['posted_data_hash'] = '';
break;
default:
$result['posted_data_hash'] = $submission->get_posted_data_hash();
break;
}
do_action( 'wpcf7_submit', $this, $result );
return $result;
}
/* Message */
public function message( $status, $filter = true ) {
$messages = $this->prop( 'messages' );
$message = isset( $messages[$status] ) ? $messages[$status] : '';
if ( $filter ) {
$message = $this->filter_message( $message, $status );
}
return $message;
}
public function filter_message( $message, $status = '' ) {
$message = wpcf7_mail_replace_tags( $message );
$message = apply_filters( 'wpcf7_display_message', $message, $status );
$message = wp_strip_all_tags( $message );
return $message;
}
/* Additional settings */
public function pref( $name ) {
$settings = $this->additional_setting( $name );
if ( $settings ) {
return $settings[0];
}
}
public function additional_setting( $name, $max = 1 ) {
$settings = (array) explode( "\n", $this->prop( 'additional_settings' ) );
19
482 ЧДТУ 21980-01 34 01
$pattern = '/^([a-zA-Z0-9_]+)[\t ]*:(.*)$/';
$count = 0;
$values = array();
foreach ( $settings as $setting ) {
if ( preg_match( $pattern, $setting, $matches ) ) {
if ( $matches[1] != $name ) {
continue;
}
if ( ! $max or $count < (int) $max ) {
$values[] = trim( $matches[2] );
$count += 1;
}
}
}
return $values;
}
public function is_true( $name ) {
return in_array(
$this->pref( $name ),
array( 'on', 'true', '1' ),
true
);
}
public function in_demo_mode() {
return $this->is_true( 'demo_mode' );
}
public function nonce_is_active() {
$is_active = WPCF7_VERIFY_NONCE;
if ( $this->is_true( 'subscribers_only' ) ) {
$is_active = true;
}
return (bool) apply_filters( 'wpcf7_verify_nonce', $is_active, $this );
}
/* Upgrade */
private function upgrade() {
$mail = $this->prop( 'mail' );
if ( is_array( $mail )
and ! isset( $mail['recipient'] ) ) {
20
482 ЧДТУ 21980-01 34 01
$mail['recipient'] = get_option( 'admin_email' );
}
$this->properties['mail'] = $mail;
$messages = $this->prop( 'messages' );
if ( is_array( $messages ) ) {
foreach ( wpcf7_messages() as $key => $arr ) {
if ( ! isset( $messages[$key] ) ) {
$messages[$key] = $arr['default'];
}
}
}
$this->properties['messages'] = $messages;
}
/* Save */
public function save() {
$props = $this->get_properties();
$post_content = implode( "\n", wpcf7_array_flatten( $props ) );
if ( $this->initial() ) {
$post_id = wp_insert_post( array(
'post_type' => self::post_type,
'post_status' => 'publish',
'post_title' => $this->title,
'post_content' => trim( $post_content ),
) );
} else {
$post_id = wp_update_post( array(
'ID' => (int) $this->id,
'post_status' => 'publish',
'post_title' => $this->title,
'post_content' => trim( $post_content ),
) );
}
if ( $post_id ) {
foreach ( $props as $prop => $value ) {
update_post_meta( $post_id, '_' . $prop,
wpcf7_normalize_newline_deep( $value ) );
}
if ( wpcf7_is_valid_locale( $this->locale ) ) {
update_post_meta( $post_id, '_locale', $this->locale );
21
482 ЧДТУ 21980-01 34 01
}
if ( $this->initial() ) {
$this->id = $post_id;
do_action( 'wpcf7_after_create', $this );
} else {
do_action( 'wpcf7_after_update', $this );
}
do_action( 'wpcf7_after_save', $this );
}
return $post_id;
}
public function copy() {
$new = new self;
$new->title = $this->title . '_copy';
$new->locale = $this->locale;
$new->properties = $this->properties;
return apply_filters( 'wpcf7_copy', $new, $this );
}
public function delete() {
if ( $this->initial() ) {
return;
}
if ( wp_delete_post( $this->id, true ) ) {
$this->id = 0;
return true;
}
return false;
}
public function shortcode( $args = '' ) {
$args = wp_parse_args( $args, array(
'use_old_format' => false ) );
$title = str_replace( array( '"', '[', ']' ), '', $this->title );
if ( $args['use_old_format'] ) {
$old_unit_id = (int) get_post_meta( $this->id, '_old_cf7_unit_id', true );
if ( $old_unit_id ) {
$shortcode = sprintf( '[contact-form %1$d "%2$s"]', $old_unit_id, $title );
} else {
22
482 ЧДТУ 21980-01 34 01
$shortcode = '';
}
} else {
$shortcode = sprintf( '[contact-form-7 id="%1$d" title="%2$s"]',
$this->id, $title );
}
return apply_filters( 'wpcf7_contact_form_shortcode',
$shortcode, $args, $this );
}
}
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Дари К., Баланеску Э. PHP и MySQL: создание интернет-магазина: Пер. с
англ. – М.: Издательский дом с. – 2011. – 640с.
2. Савельева Н.В. Язык программирования РНР. – М.: Интернет
Университет Информационных Технологий. – 2015. – 211с.
3. Веллинг Л., Томсон Л. MySQL. Учебное пособие: Пер. с англ. – М.:
Издательский дом «Вильямс». – 2015. – 304с.
4. Гольцман В. MySQL 5.0. Библиотека программиста. – Санкт-Петербург. –
2010. – 253с.
5. Фиайли К.SQL: Пер. с англ. – М.: ДМК Пресс. – 2003. – 456 с.
6. Комолова Н., ЯковлеваЕ. HTML: Самоучитель. 2-е изд. – СПб.: Питер. –
2011. – 288 с.
7. Полонская Е. Язык HTML. Самоучитель: – М.: Издательский дом
«Вильямс». – 2003. – 320с.
8. Сидерхолм Д. CSS3 для веб-дизайнеров. – Манн, Иванов и Фербер. –
2012. – 125с.
9. Иванов И. SEO: Поисковая Оптимизация от А до Я. – Самоиздательство. –
2012. – 587с.
10. WordPress для начинающих / Дэрил Бартлетт; [пер. с англ. М.А. Райтман].
– Москва: Издательство «Э», 2017. – 208с.
11. Мэтт Зандстра. PHP: объекты, шаблоны и методики программирования, 3-
е издание // PHP Objects, Patterns and Practice, Third Edition. – М.:
«Вильямс», 2018. – С. 560.
12. Костарев А. Ф. PHP 5. – Спб.: «БХВ-Петербург», 2008. – С. 1104.
13. Кузнецов Максим, Симдянов Игорь. PHP на примерах. – 2-е изд. перераб.
и доп. – Спб.: «БХВ-Петербург», 2011. – С. 400.
14. Кузнецов Максим, Симдянов Игорь. PHP. Практика создания Web-сайтов.
– 2-е изд. перераб. и доп. – Спб.: «БХВ-Петербург», 2008. – С. 1264.
Арк.
ЧДТУ 211980.003 ПЗ 82
Зм н. Арк. № докум. Підпис Дата
15. Дейт К. Введение в системы баз данных. – К.; М.; СПб.: Изд.дом
“Вильямс”. – 2000. –560 с.
16. Дивак М.П. Системний аналіз та проектування КІС /М.П.Дивак//
Навчальний посібник – Т.: Економічна думка. – 2004.
17. Квентин Зервас. Web 2.0: создание приложений на PHP // Practical Web 2.0
Applications with PHP. – М.: «Вильямс», 2009. – С. 544.
18. Павлиш В.А. Основи інформаційних технологій і систем. Підручник
[Текст] / В.А. Павлиш, Л.К. Гліненко, Н.Б. Шаховська. Львів:
Видавництво Львівської політехніки, – 2018. – 620 с.
19. Scott, Adam D. WordPress for Education. – Birmingham: Packt Publishing
Ltd, 2012. – 144 с.
20. Методичні вказівки до виконання кваліфікаційних робіт бакалаврів з
напрямку підготовки 122 «Комп’ютерні науки» (Computer Science) для
студентів денної та заочної форми навчання [Текст] / Укл.
К.В.Колесніков, А.Р. Карапетян – Черкаси: ЧДТУ, 2020 – 30 с.
ІНТЕРНЕТ ДЖЕРЕЛА
21. Сайт w3techs.com [Електронний ресурс]. – Режим доступу:
https://w3techs.com/technologies/overview/content_management. Дата
звернення – 27.05.2021.
22. Сайт магазину lamoda.ua [Електронний ресурс]. – Режим доступу:
https://www.lamoda.ua/. Дата звернення – 12.04.2021.
23. Сайт магазину red.ua [Електронний ресурс]. – Режим доступу:
https://www.red.ua/. Дата звернення – 12.04.2021.
24. Сайт магазину ISSA Plus [Електронний ресурс]. – Режим доступу:
https://іssaplus.com. Дата звернення – 12.04.2021.
Арк.
ЧДТУ 211980.003 ПЗ 83
Зм н . Арк. № докум. Підпис Дата
25. Сайт магазину kasta.ua [Електронний ресурс]. – Режим доступу:
https://kasta.ua/uk/. Дата звернення – 12.04.2021.
ПРОГРАМНІ ЗАСОБИ
1. Microsoft 365 © Корпорація Microsoft 2021.
2. phpMyAdmin 7.2 © phpMyAdmin devel team, 2021.
3. Open Server 5.3.8 © Maksim Arhipov, 2021.
4. WordPress 3.8 © The WordPress Project Team, 2021.
Арк.
ЧДТУ 211980.003 ПЗ 84
Зм н . Арк. № докум. Підпис Дата