ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6901Full metadata record
| DC Field | Value | Language |
|---|---|---|
| dc.contributor.advisor | Карапетян , Анаіт Радіківна | - |
| dc.contributor.author | Халупко, Ілля Сергійович | - |
| dc.date.accessioned | 2026-01-26T11:39:01Z | - |
| dc.date.available | 2026-01-26T11:39:01Z | - |
| dc.date.issued | 2022-06-16 | - |
| dc.identifier.uri | https://er.chdtu.edu.ua/handle/ChSTU/6901 | - |
| dc.description.abstract | У кваліфікаційній роботі бакалавра розроблено веб-студію. В якості інструменту для розробки вибрана CMS платформа uCoz. Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає 71 сторінку, в тому числі вступ, 3 розділи, висновки, додаток та список використаних джерел. Робота містить 2 таблиці, 39 рисунка, та 33 інформаційних джерел. Перший розділ кваліфікаційної роботи присвячений опису предметної області. Визначено актуальність створення інформаційної системи веб-студії та проведено SWOT-аналіз. Також, здійснено огляд існуючих типів веб-студій та визначено їх ключові відмінності. У другому розділі описані принципи створення веб-орієнтованої системи: визначені загальні особливості веб-орієнтованих систем, описана структура та особливості реалізації алгоритмічного забезпечення принципи створення якісного веб-сайту, а також що потрібно для безпеки і захисту веб-сайтів. Третій розділ присвячений проектуванню веб-орієнтованої інформаційної системи веб-студії. Поетапно описано процес планування та створення веб-студії з використанням вибраних засобів розробки. Була створена працездібна база даних і унікальний дизайн сайту. | uk_UA |
| dc.language.iso | uk | uk_UA |
| dc.subject | веб-студія | uk_UA |
| dc.subject | інформаційні технології | uk_UA |
| dc.subject | створення веб-сайту | uk_UA |
| dc.subject | інформаційна система | uk_UA |
| dc.subject | uCoz | uk_UA |
| dc.subject | SEO-аналіз | uk_UA |
| dc.subject | проектування | uk_UA |
| dc.subject | дизайн | uk_UA |
| dc.subject | СMS | uk_UA |
| dc.subject | PHP | uk_UA |
| dc.subject | портфоліо | uk_UA |
| dc.subject | верстка | uk_UA |
| dc.title | ІНФОРМАЦІЙНА СИСТЕМА ВЕБ-СТУДІЇ TWEGO | uk_UA |
| dc.type | Bachelor Thesis | uk_UA |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) | |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Халупко_WEB-1811.pdf Restricted Access | 3.49 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
Пояснювальна записка
до кваліфікаційної роботи бакалавра
на тему: «ІНФОРМАЦІЙНА СИСТЕМА ВЕБ-СТУДІЇ
TWEGO»
Виконав студент 4 курсу,
групи Web-1811,
спеціальності 126 – Інформаційні
системи та технології,
освітня програма – Web-
технології, Web-дизайн,
Халупко І. С.
Керівник к.т.н. Карапетян А.Р.
Рецензент к.т.н., доц.Стась С.В..
Черкаси – 2022 року
АНОТАЦІЯ
У кваліфікаційній роботі бакалавра розроблено веб-студію. В якості
інструменту для розробки вибрана CMS платформа uCoz.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра
складає 71 сторінку, в тому числі вступ, 3 розділи, висновки, додаток та
список використаних джерел. Робота містить 2 таблиці, 39 рисунка, та 33
інформаційних джерел.
Перший розділ кваліфікаційної роботи присвячений опису предметної
області. Визначено актуальність створення інформаційної системи веб-студії
та проведено SWOT-аналіз. Також, здійснено огляд існуючих типів веб-студій
та визначено їх ключові відмінності.
У другому розділі описані принципи створення веб-орієнтованої
системи: визначені загальні особливості веб-орієнтованих систем, описана
структура та особливості реалізації алгоритмічного забезпечення принципи
створення якісного веб-сайту, а також що потрібно для безпеки і захисту веб-
сайтів.
Третій розділ присвячений проектуванню веб-орієнтованої
інформаційної системи веб-студії. Поетапно описано процес планування та
створення веб-студії з використанням вибраних засобів розробки. Була
створена працездібна база даних і унікальний дизайн сайту.
Ключові слова: веб-студія, створення веб-сайту, інформаційна
система, uCoz, SEO-аналіз, проектування, дизайн, СMS, PHP, портфоліо,
верстка, інформаційні технології.
ABSTRACT
A web studio has been developed for the bachelor's thesis. The uCoz CMS
platform was chosen as the development tool.
The volume of the explanatory note of the bachelor's qualification work is 71
pages, including the introduction, 3 sections, conclusions, appendix and the list of
used sources. The work contains 2 tables, 39 figures, and 33 information sources.
The first section of the qualification work is devoted to the description of the
subject area. The urgency of creating a web studio information system was
determined and a SWOT analysis was performed. It also reviews existing types of
web studios and identifies key differences.
The second section describes the principles of creating a web-based system:
defines the general features of web-based systems, describes the structure and
implementation of algorithmic software, the principles of creating a quality website,
as well as what is needed for security and protection of websites.
The third section is devoted to the design of a web-based information system
of a web studio. The process of planning and creating a web studio using the
selected development tools is described step by step. A workable database and a
unique site design were created.
Keywords: web studio, website creation, information system, uCoz, SEO-
analysis, design, design, SMS, PHP, portfolio, layout, information technology.
ЗМІСТ
ВСТУП......................................................................................................................... 4
1 ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ ........................... 7
1.1 Опис предметної області ............................................................................ 7
1.2 Постановка задачі .......................................................................................... 9
1.3 Огляд існуючих аналогів ......................................................................... 10
1.3.1 Веб-студія «brainlab» .......................................................................... 10
1.3.2 Веб студія «WhiteWeb» ...................................................................... 10
1.3.3 Веб студія «Web Building» .................................................................. 11
1.3.4 Веб-студія «Vintage Web Production» ................................................ 11
1.4 Висновки до розділу 1 ................................................................................ 13
2 ПРИНЦИПИ РОЗРОБКИ WEB-ОРІЄНТОВАНОЇ СИСТЕМИ ....................... 14
2.1 Загальні особливості web-орієнтованих інформаційних систем ........... 14
2.2 Структура та особливості реалізації алгоритмічного забезпечення ...... 15
2.3 Принципи створення якісного web-сайту ................................................. 18
2.4 Безпека та захист сайтів ............................................................................. 21
2.5 Висновки до розділу 2 ................................................................................ 24
3 РОЗРОБКА ПРОГРАМНОЇ ЧАСТИНИ ............................................................. 25
3.1 Вибір засобів розробки веб-студії ............................................................. 25
3.1.1 Платформа uCoz ................................................................................... 25
3.2 Розробка інтерфейсу web-орієнтованої системи ..................................... 28
3.2.1 Планування web-орієнтованої інформаційної системи ................... 28
3.2.2 Створення бази даних .......................................................................... 31
3.2.3 Дизайн web-орієнтованої інформаційної системи ............................ 33
3.3 Висновки до розділу 3 ................................................................................ 47
ЧДТУ 221807.007 ПЗ
Зм. Лист №докумемента Підпис Дата
Розроб. Халупко І. С. Літ. Лист Листів
Перев. Карапетян А. Р. Інформаційна система веб-студії Н 2 77
Реценз Стась С.В. Twego ФІТІС,
Н. .контр. Пояснювальна записка
З атв. Прокопенко Т.О. кафедра ІТП, Web-1811
ВИСНОВКИ .............................................................................................................. 48
ДОДАТОК А 482 ЧДТУ 21807-01 ІНФОРМАЦІЙНА СИСТЕМА ВЕБ-СТУДІЇ
TWEGO. СПЕЦИФІКАЦІЯ ..................................................................................... 52
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................ 68
Арк.
ЧДТУ 221807.007 ПЗ 3
З м н. Арк. № докум. Підпис Дата
ВСТУП
Наш час називають «інформаційним віком». Ця назва виникло тому, що
найважливішим, цінним та необхідним ресурсом є інформація. Володіння
інформацією та вміння своєчасно, швидко та чітко донести необхідну
інформацію до клієнтів – ключ до успіху у реаліях сучасного бізнесу. Зараз
саме Інтернет, здатний оперативно і масово передавати текст, звук, зображення
і навіть відеоролики, тобто. практично будь-яку інформацію.
З погляду користувача, Інтернет - це величезний інформаційний ресурс,
в якому можна знайти все, що завгодно: від прогнозу погоди до особистих
переваг голлівудських кінозірок. Аудиторія мережі Інтернет зростає з кожним
роком, Інтернет - найшвидше засіб передачі інформації за всю історію людства.
Користувачі Інтернету є метою особливого інтересу для рекламодавців, тому
що факт залишається фактом – серед користувачів мережі купа потенційних
клієнтів. Існує безліч способів комерційного підходу до мережі інтернет. У
мережі можна рекламувати послуги, продавати товари або представляти
споживачеві і те, й інше. У сучасному бізнесі багато залежить від
самопрезентації компанії, її позиціонування над ринком наданих послуг і
можливості шукати нових клієнтів та ринки збуту. Одним із інструментів, як
іміджевих, так і маркетингових є наявність свого сайту в мережі Інтернет [1].
Актуальність. Під час карантину питання переведення бізнесу в онлай-
формат стало популярним не лише для великих корпорацій. Продуктові
магазини, салони краси, кафе та ресторани - всі стали причетними до нового
бізнес-формату. Web-сайт перетворює компанію на сучасний бізнес та є
найважливішим джерелом інформації для потенційних клієнтів та людей, чия
думка є суспільно значущою. З погляду бізнесу. Інтернет – це сучасний
рекламних майданчик, що дозволяє забезпечити приплив клієнтів.
Щодня у світі створюються тисячі різних сайтів. Будь-яка людина, яка
мріє про ведення бізнесу та створення якісного сайту, обов'язково замовить її
розробку професіоналам, оскільки саме від того, як розробники поставляться до
Арк.
ЧДТУ 221807.007 ПЗ 4
З м н. Арк. № докум. Підпис Дата
виконання замовлення, буде залежати кінцевий результат. Веб-студії стали
фірмами з виробництва сайтів, дизайну, логотипів і т. д. Вони надають велику
кількість послуг замовнику, і за це отримують добрий прибуток.
Метою кваліфікаційної роботи є створення web-орієнтованої
інформаційної системи веб-студії, за допомогою якої, потенціальний клієнт
може з легкістю ознайомитися з усім спектром надання послуг, оформити
замовлення з побажаннями, і после уточнения всех деталей в результаті
отримати якісно виконану роботу в необхідні терміни .
Для досягнення поставленої мети кваліфікаційної роботи необхідно
розв’язати наступні задачі:
● здійснити постановку задачі;
● провести аналіз предметної області;
● проаналізувати аналоги web-орієнтованої системи;
● описати вимоги до розробки web-орієнтованої системи прокату
сільгосптехніки;
● спроектувати базу даних;
● програмно реалізувати розроблену систему.
Потреба в розробці web-орієнтованої інформаційної системи веб-студії
обумовлена тим, що на сьогоднішній день інтернет є один з найефективніших
рекламних майданчиків, тому що від того, наскільки ефективно працює online
представництво компанії, залежить успіх на ринку. Для грамотної розробки
сайту важливо розуміти, що створення сайтів не обмежується розробкою
дизайну, це командна робота багатьох фахівців: маркетологів, дизайнерів,
копірайтерів і т.д. Саме тому розробка веб ресурсу – процес, до якого потрібно
підходити з усією відповідальністю.
При розробці web-орієнтованої системи необхідно проаналізувати
предметну область. Для керування web-орієнтованої системи потрібні
оператори технічної підтримки, які будуть консультувати клієнтів по всім
запитанням, та менеджер, що буде обробляти замовлення, здійснювати зв’язок з
клієнтами та розподіляти задачі між виконавцями.
Основна задача кваліфікаційної роботи – створення web-орієнтовано
Арк.
ЧДТУ 221807.007 ПЗ 5
З м н. Арк. № докум. Підпис Дата
системи веб-студії.
Дана web-орієнтована система повинна відповідати наступним вимогам:
● мати зручний та сучасний інтерфейс
● містити контактні дані та форму зворотного зв’язку;
● каталог послуг
● пошук по сайту
● авторизація та реєстрація на сайті
● особиста сторінка користувача
● технічна підтримка
Основна передумова створення системи – це те, що переважна більшість
подібних систем мають низку недоліків, що безпосередньо впливають на
кількість потенційних клієнтів.
Розроблювана web-орієнтована система має відноситись до типу
«Система під замовлення»: на базі типової web-орієнтованої системи, що
індивідуально підлаштовують і впроваджують.
Під час розробки web-орієнтованої системи враховано діяльність фірми
з прокату сільгосптехніки, специфіку ведення обліку та врахування принципів
формування замовлень на фірмі.
Обсягпояснювальної записки кваліфікаційної роботи бакалавра складає
71 сторінку, в тому числі вступ, 3 розділи, висновки, додаток та список
використаних джерел. Робота містить 2 таблиці, 39 рисунка, та 33
інформаційних джерел.
Арк.
ЧДТУ 221807.007 ПЗ 6
З м н. Арк. № докум. Підпис Дата
1 ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ
Інтернет за останні кілька років розвинувся настільки швидко і стрімко,
що вже сьогодні нормальна робота будь-якого підприємства без нього є
неможливою: це найпростіший і недорогий спосіб розповісти про себе, знайти
клієнтів та партнерів, аж до того, що комерсанти можуть організувати. продажі
своїх товарів та послуг виключно через веб-сайт.
Крім комерційних організацій, потребують власному інтернет-
представництві та публічні люди (спортсмени, політики, музиканти тощо),
громадські та політичні організації, навчальні заклади, ЗМІ та навіть звичайні
люди, які бажають заявити про себе на весь світ.
Цей ринок зараз знаходиться лише на одній з перших стадій розвитку, а
отже, закріпившись на ньому зараз, можна отримати високооплачувану роботу
на все життя.
1.1 Опис предметної області
Створення сайту – це серйозний крок, який завжди має бути добре
продуманим та спланованим для успішного ведення бізнесу в інтернеті, його
реклами та зростання кількості клієнтів. Щоб бути впевненим в якості
майбутнього сайту, необхідно відповідально підійти до питання вибору веб
студії. Фахівці повинні мати досвід і відповідну кваліфікацію. Обов'язково
необхідно звертати увагу на портфоліо та ціни. Планування та контроль
кожного етапу нададуть ресурсу максимальну ефективність.
За своїми функціями та властивостями сайти бувають [2]:
● Landing page (Лендінг) – односторінковий сайт, який надає
інформацію про організацію, її товари та послуги. Також тут
розміщується форма зворотний зв'язок для можливості
замовлення;
● Візитка – тип сайту, призначений тільки для відображення
основної інформації про компанію або її товари (послуги).
Зазвичай містить не більше п'яти веб-сторінок;
● Корпоративний ресурс – інтернет сайт із широкими
Арк.
ЧДТУ 221807.007 ПЗ 7
З м н. Арк. № докум. Підпис Дата
функціональними можливостями. Надає максимум інформації
про бізнес, компанію, її співробітників, асортимент, історію,
діяльність. Тут же здійснюється реклама та реалізація продукції.
Часто включає форум для спілкування відвідувачів;
● Каталог – сайт, заснований на наданні відомостей про категорії
товару та їх окремі позиції. Відмінними рисами є наявність фото
та описів кожного товару;
● Інтернет магазин – каталог товарів з можливість замовлення та
придбання продукції. Має велику кількість веб сторінок,
кошиком, особистим кабінетом користувача, різними способами
оплати та доставки.
Сайт є обличчям бізнесу, а веб-студія надає послуги зі створення та
наповнення сайту, а також його просування. SEO оптимізація, контекстна
реклама та інші види розкручування дозволяють ресурсу досягати в пошукових
системах більш високих позицій, що сприяє збільшенню продажу та кількості
клієнтів [3].
Найпоширеніші послуги веб-студій:
● Створення веб-сайту
● Розробка скриптів та плагинів
● Web-дизайн
● Графічний дизайн
● SEO-оптимизація
● Налаштування контекстної реклами
● Технічна підтримка сайту
Стан компанії залежить від того, наскільки успішно вона здатна
реагувати на різні дії ззовні. Аналізуючи зовнішню ситуацію, необхідно
виділяти найістотніші на конкретний період часу фактори. Взаємопов'язаний
розгляд цих факторів з можливостями компанії дозволяє вирішувати проблеми,
що виникають. При вирішенні різного рівня завдань необхідно також чітко
уявляти, чи критичні фактори контролю з боку компанії піддаються. Чи є вони
внутрішніми або зовнішніми, що піддаються змінам зусиллями компанії, чи це
зовнішні події, на які компанія впливати не в змозі. Одним із найпоширеніших
Арк.
ЧДТУ 221807.007 ПЗ 8
З м н. Арк. № докум. Підпис Дата
методів, що оцінюють у комплексі внутрішні та зовнішні фактори, що
впливають на розвиток компанії можна назвати SWOT-аналіз (СВОТ-
аналіз)[29].
SWOT-аналіз є необхідним елементом досліджень, обов'язковим
попереднім етапом при складанні будь-якого рівня стратегічних та
маркетингових планів. Дані, отримані в результаті ситуаційного аналізу, є
базовими елементами при розробці стратегічних цілей і завдань
компанії.SWOT-аналіз веб-студії показано в таблиці 1.1.
Сильні сторони Слабкі сторони
Актуальність Висока конкуренція
Присутність відгуки та портфоліо Недостатня кількість
співробітників
Швидкі терміни виконання роботи Середні ціни
Можливості Загрози
База постійних клієнтів Зменшення цін на послуги у
конкурентів
Пропозиція нових і сучасних послуг Втрата клієнтів
Спад попиту через кризу
Таблиця 1.1. – SWOT-аналіз веб-студії
1.2Постановка задачі
В чому переваги створення web-орієнтованої системи веб-студії? Під час
карантину питання переведення бізнесу в онлайн-формат стало популярним не
лише для великих корпорацій. Продуктові магазини, салони краси, кафе та
ресторани - всі стали причетними до нового бізнес-формату.
Сайт - це цілодобовий зв'язок з клієнтом, значна економія часу та
зручність для покупця. Саме тому, людина без досвіду в програмуванні, яка
хоче вести бізнес в онлайн-форматі, може зайти на сайт веб-студії та за
короткий час вибрати необхідну послугу й оформити замовлення. Якщо
Арк.
ЧДТУ 221807.007 ПЗ 9
З м н. Арк. № докум. Підпис Дата
виникнуть запитання, оператори технічної підтримки можуть швидко
проконсультувати та допомогти з вибором оптимального рішення.
Web-орієнтована система повинна виконувати наступні функції:
● мати можливість реєстрації клієнта;
● містити контактні дані та форму зворотного зв’язку;
● містити каталог послуг;
● містити портфоліо з прикладами робіт;
● містити онлайн-чат для технічної підтримки;
● містити книгу відгуків;
1.3 Огляд існуючих аналогів
Перед проектуванням web-орієнтованої системи здійснено
інформаційний пошук та аналіз деяких популярних аналогів веб-студій.
1.3.1 Веб-студія «brainlab»
Brainlab створюють працюючі цифрові продукти для бізнесу. Їх історія
почалася коли два веб-розробники вирішили піти своїм шляхом і створити
свою креативну веб-студію. Маючи досвід потрібний для повного циклу
створення веб проектів вони крок за кроком рухалися вгору попутно набуваючи
безцінного досвіду і формуючи сильну команду фахівців.
За 7 років досвіду, вони мають на своєму рахунку більше 300 виконаних
проектів та 15+ партнерів. На сайті можна побачити велику кількість послуг та
портфоліо з якісно виконаних робіт [34].
1.3.2 Веб студія «WhiteWeb»
WhiteWeb - це професіонали зі стажем роботи 5-10 років. Всі
співробітники мають величезний досвід у своїй спеціалізації, що дозволяє
вирішувати завдання швидко та якісно.WhiteWeb створює проекти, які
отримують позитивну оцінку як з боку клієнтів, так і професійної спільноти.
Ми не лише використовуємо сучасні підходи до розробки, які дозволяють
скоротити цикл створення проекту, а й впроваджуємо власні рішення.
Арк.
ЧДТУ 221807.007 ПЗ 10
З м н. Арк. № докум. Підпис Дата
Грамотний підбір дизайнерських рішень, детальне опрацювання
архітектури проекту та використання перевірених технологій - це спосіб веб-
студії створення сайтів, якими зручно користуватися на будь-яких пристроях.
Веб-студія підключає сайти до унікального сервісу, який цілодобово перевіряє
сайт на помилки та працездатність, а також надає прості зрозумілі інструкції
щодо усунення проблем. Також, важливо зазначити про те, що вони турбуються
щоб сторінки веб-ресурсу відкривалися за лічені секунди. Високошвидкісні
сайти, які подобаються Google, – це одна з причин, за якими вибирають
WhiteWeb [35].
1.3.3 Веб студія «Web Building»
«Web Building» - це студія веб-рішень, до якої входять
висококваліфіковані фахівці з сучасних веб-технологій та ефективного
інтернет-маркетингу, діяльність яких включає розробку веб-проектів, їх
подальше обслуговування та просування в мережі під назвою інтернет. Їх мета
– реалізувати свій могутній потенціал. Колектив студії «Web Building» готовий
працювати понаднормово, заради того, щоб поставлені завдання були повністю
реалізовані. Веб-студія займається розробкою інтернет-ресурсів, скриптів
(компоненти, модулі, плагіни і т. п.) для сайтів і окремих веб-додатків, а також
адмініструванням сайтів, веб-аналітикою і рекламою в інтернеті [36].
1.3.4 Веб-студія «Vintage Web Production»
Vintage – це фахівці, які добре роблять роботу за гроші, яку вони робили
б також добре та без них. Любов до справи – ось що рухає ними. Vintage - це
нескінченна віра в команду, без якої нічого не вийшло б. Веб-студія входить до
списку топ-30 світових веб-агентств за версією Awwwards. Їх проекти
відрізняються неповторним дизайном та продуманим функціоналом, які
вирішують бізнес-завдання та виводять бренд на новий рівень сприйняття.
Веб-студія має велику кількість дивовижних робіт у портфоліо та відгуків від
знаменитих компаній [37].
Арк.
ЧДТУ 221807.007 ПЗ 11
З м н. Арк. № докум. Підпис Дата
Отже, порівняльний аналіз існуючих web-орієнтованих систем показав
ряд переваг і недоліків, що доречно було б використати чи усунути під час
розробки власної системи. Аналіз вищеописаних систем показано в табл. 1.2.
Система Основні Переваги Недоліки
напрямки
https://brainlab.com.ua/ Розробка/доопрац Гнучка система Блог та соцмережі без
ювання сайтів, оплати, оновлень,
Дизайн, Наявність Відсутність відгуків
Технічна адекватних цін
підтримка
https://www.whiteweb.ua Розробка сайтів, Відкрите Відсутність контактів у
Технічна портфоліо робіт зі мессенджерах,
підтримка, зручним пошуком Відсутність соцмереж,
SEO/SMM Відсутність цін,
послуги Відсутність відгуків
https://webbuilding.com.u Розробка сайтів, Онлайн Застарілий дизайн,
a Технічна інформаційна Вузький графік роботи
підтримка, підтримка, Відсутність відгуків
Консалтинг, Постійне
Аудит, оновлення блогу
Копирайтинг,
Хостинги,
Домени
https://vintage.com.ua Розробка сайтів, Детально описані Відсутність української
Аудит, Брендінг, послуги, мови,
Тестування, Сучасний Відсутність цін,
Побудова IT інтерфейс Відсутність відгуків,
інфраструктури Відсутність вибору для
контакту
Таблиця 1.2. – Порівняльний аналіз існуючих web-орієнтованих систем
1.4 Висновки до розділу 1
У першому розділі здійснено опис предметної області і постановку
задачі. Проаналізовано існуючі аналоги розроблюваної системи. За
результатами вивчення та дослідження існуючих web-орієнтованих систем веб-
студій, представлених на вітчизняному ринку, можна зробити висновок, що
вони містять ряд недоліків, що значно скорочують кількість потенційних
Арк.
ЧДТУ 221807.007 ПЗ 12
З м н. Арк. № докум. Підпис Дата
клієнтів, оскільки в каталозі товарів немає можливості переглянути повну
інформацію про послуги, а процес перегляду та оформлення замовлень здається
незручним без особистого кабінету. На сторінках відсутні ціни, відгуки та
онлайн консультація для уточнення всіх необхідних деталей перед
замовленням, і, тим самим, є малозручним для потенційних клієнтів. Тому
доцільно розробити власну web-орієнтовану систему, що буде враховувати
переваги існуючих і буде вільною від їх недоліків.
Арк.
ЧДТУ 221807.007 ПЗ 13
З м н. Арк. № докум. Підпис Дата
2 ПРИНЦИПИ РОЗРОБКИ WEB-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ
СИСТЕМИ
2.1Загальніособливості web-орієнтованих інформаційних систем
Функціональність інформаційних систем залежить від організаційно-
управлінської структури організації, технології документообігу та всього, що
необхідно для підтримки ефективного бізнесу. За сучасного рівня розвитку
програмного забезпечення, існує безліч різноманітних програмних засобів
обробки інформації, написаних на різних мовах програмування за
вищепереліченими методами. Різноманіття програмних пакетів пов'язане зі
специфікою кожної галузі, в якій проводиться обробка. Водночас характерною
особливістю web-орієнтованих інформаційних систем, зокрема систем
управління контентом web-сайтів, є наявність великої кількості документальної
інформації, причому самі ці документи часто генеруються динамічно, на основі
тих чи інших процедур [4].
Процес створення web-орієнтованих інформаційних систем абсолютно
ідентичний процесу написання програм. Цей процес також включає стадії
визначення вимог, аналізу, проектування та реалізації. При роботі web- сайту,
не важливо, якою технологією він написаний, користувач так само як і в
звичайній програмі, вводить дані і отримує інформацію, працює з вікнами і
меню, зберігає дані на сервері і отримує відповіді. Але є різниця, що полягає в
тому, що власне саме програмне забезпечення працює не на комп’ютері
користувача, а на віддаленому сервері мережі, а доступ до даних можна
отримати із будь-якої точки світу через мережу Інтернет. З одного боку – це
зручно, а з іншого – з’являються вимоги до розробленого програмного
забезпечення [30].
Особливостями веб-орієнтованих інформаційних систем є:
● незалежність від операційної системи клієнта;
● надійність та вирішення проблем швидкодії;
● кросплатфорність та простота;
● користувачу не потрібна ніяка програма;
Арк.
ЧДТУ 221807.007 ПЗ 14
З м н. Арк. № докум. Підпис Дата
● можливість багатокористувацької роботи;
Також особливістю веб-орієнтованих інформаційних систем є
знаходження всієї програмної логіки на сервері в порівнянні з простим ПЗ, де
логіка знаходиться на комп'ютері кожного користувача. Оскільки є одна тільки
логіка програмного забезпечення її набагато простіше розповсюджувати серед
користувачів [32].
Користувачу не потрібна спеціальна програма для доступу до сайту. Все
що йому потрібно, це просто запустити браузер і набрати в адресному рядку
URL. В наші дні браузер є стандартною програмою, яку користувач отримує
при встановленні ОС. Шукати браузер йому не потрібно, адже він вже є
встановлений на його комп’ютері, і по суті, це все, що йому потрібно для
роботи.
На сьогоднішній день веб-рішення все частіше інтегруються в
інформаційну інфраструктуру підприємства, стають його невід'ємною
частиною. Принципи швидкого доступу до інтернету, які добре
зарекомендували себе в інтернеті, чудово працюють і для інтранет-систем.
Windows-додатки, які володіють меншою гнучкістю і більшою
ресурсомісткістю все частіше поступаються місцем у локальній мережі веб-
додаткам, які надають не статичні сторінки HTML, а динамічні, тобто ті, що
керуються користувачами, звіти професійної якості. Швидка публікація
інформації на внутрішньому сайті компанії та отримання інформації з
внутрішньої бази даних, доступ до всіх ресурсів за допомогою звичайного web-
браузера, легке нарощування можливостей — все це робить web-додаток
чудовим інструментом для роботи з інформацією [33].
2.2 Структура та особливості реалізації алгоритмічного забезпечення
Гарантією створення якісної веб-орієнтованої системи може стати лише
якісна та послідовна робота з розробки, яка має бути забезпечена переліком
чітко визначених і виражених інструкцій – алгоритмом, в даному випадку –
алгоритмом створення веб-сайту. Алгоритмічне забезпечення є досить
Арк.
ЧДТУ 221807.007 ПЗ 15
З м н. Арк. № докум. Підпис Дата
ефективним методом виконання поставлених задач і досягнення цілей [28].
Алгоритм – це система правил, виконання яких призводить до
отримання результату чи вирішення певної проблеми після скінченної кількості
кроків.
На рисунку 2.1 зображено алгоритм, за яким відбувається процес
створення і впровадження веб-орієнтованої системи.
Рисунок 2.1 – Алгоритм створення і впровадження веб-орієнтованої системи
Перші три етапи алгоритму, зображені на рисунку 2.2 являють собою
процес бізнес-аналітики, тобто збір даних, формулювання вимог, вирішення
організаційних питань під час спілкування із замовником. Коли всі вимоги
сформульовані та не залишилось відкритих питань розробляється документ –
технічне завдання (ТЗ).
Арк.
ЧДТУ 221807.007 ПЗ 16
З м н. Арк. № докум. Підпис Дата
Технічне завдання – це письмовий опис розроблюваного веб-сайту, в
якому чітко та однозначно описані вимоги до системи, її ідеї, напрямок,
дизайн, основні характеристики, технічні параметри. Після розробки ТЗ
узгоджується із замовником. Якісно сформульоване технічне завдання дозволяє
оптимізувати роботу по створенню сайту та значно зменшить час його
розробки. Четвертий та п’ятий етапи – розробка дизайну сайту та верстка
сторінок. Спочатку створюються макети та wireframes на основі ТЗ та
побажань замовника, які наочно ілюструють дизайн веб-сторінок та
функціональні зв’язки між ними. Після узгодження із замовником починається
процес верстки сторінок – front-end розробка [5].
Front-end web development – розробка веб-сторінок, також відома як
розробка на стороні клієнта, включає в себе написання HTML, CSS та JavaScript
коду, щоб користувач міг безпосередньо бачити та взаємодіяти із ними. Метою
front-end розробки є створення веб-сторінок та розміщення на них контенту
таким чином, щоб він був релевантним та зручним для перегляду. Із розвитком
технологій та появою великої кількості електронних пристроїв із різними
розмірами та роздільною здатністю дисплеїв розробникам потрібно
переконуватися що їхній програмний додаток коректно відображається в різних
браузерах та на різних пристроях [6].
Шостий етап – створення програми за допомогою серверної мови
програмування, яка забезпечуватиме зв’язок із базою даних. Дана програма
буде розміщуватись на сервері, отримуватиме запити і відправлятиме запитані
дані на клієнтську частину веб-додатку.
Сьомий та восьмий етапи йдуть паралельно. Тестування веб-додатків –
це перевірка відповідності фактичної поведінки програмного додатку вимогам,
які були наведені в ТЗ на скінченному наборі тестів.
Одночасно із тестуванням йде етап реєстрації домену – імені сайту, яке
вводиться в адресний рядок веб-переглядача для того щоб перейти
безпосередньо на сайт. Доменні імена були створені задля зручного пошуку
сайтів в інтернеті, вони замінюють цифрову адресу (ip-адресу) сайту.
Арк.
ЧДТУ 221807.007 ПЗ 17
З м н. Арк. № докум. Підпис Дата
Дев’ятий етап – перенос сайту на хостинг. Хостинг – це фізичне місце
розташування веб-сайту в Інтернеті, сховище сторінок сайту, зображень, аудіо-
та відео-файлів, тощо. Постачальники веб-хостингу надають дисковий простір
певного обсягу, в залежності від обраного тарифного плану, який користувач
може використовувати для розгортання свого сайту в мережі Інтернет. Зазвичай
при підключенні платного тарифного плану для використання хостингу
користувачу надається можливість обрати також доменне ім’я. Якщо домен був
зареєстрований раніше, то є необхідність додати його на сервер хостингу.
Останній десятий етап є формально кінцевим, проте немає чітких
термінів, коли він має закінчитись. Все залежить від типу сайту, якщо сайт-
візитка не потребує частого оновлення, то веб-сайт з продажу товарів може
змінюватись досить часто та зміни бувають суттєвими. Разом зі зростанням
числа користувачів може виникнути потреба у додаванні нового функціоналу,
покращенні існуючого, масштабуванні або зміні структури бази даних. В
результаті чіткого та послідовного виконання дій вищезазначеного алгоритму
на виході будемо мати якісний програмний продукт – веб-орієнтовану систему
веб-студії [7].
2.3 Принципи створення якісного web-сайту
Ефективний дизайн веб-сайту повинен виконувати свою призначену
функцію, передаючи своє конкретне повідомлення, одночасно залучаючи
відвідувача. Кілька факторів, таких як послідовність, кольори, типографіка,
зображення, простота та функціональність, сприяють гарному дизайну веб-
сайту.
При розробці веб-сайту існує багато ключових факторів, які впливають
на те, як він сприймається. Добре розроблений веб-сайт може допомогти
створити довіру та спонукати відвідувачів до дій. Створення чудового
користувальницького досвіду передбачає оптимізацію дизайну вашого веб-
сайту для зручності використання (форма та естетика) та того, наскільки
простим у використанні (функціональність) [8].
Арк.
ЧДТУ 221807.007 ПЗ 18
З м н. Арк. № докум. Підпис Дата
Нижче наведено кілька рекомендацій, які допоможуть вам під час
розгляду вашого наступного веб-проекту.
Призначення сайту. Ваш веб-сайт має відповідати потребам
користувачів. Наявність простого чіткого наміру на всіх сторінках допоможе
користувачеві взаємодіяти з тим, що ви можете запропонувати. Яка мета
вашого веб-сайту? Ви подаєте практичну інформацію, як-от «Як керувати»? Це
розважальний веб-сайт, як-от спортивне висвітлення, чи ви продаєте продукт
користувачеві? Веб-сайти можуть мати багато різних цілей, але є основні цілі,
спільні для всіх веб-сайтів;
Простота – це найкращий шлях, якщо враховувати користувацький
досвід та зручність використання вашого веб-сайту. Способи досягнення
простоти за допомогою дизайну:
● Колір - має силу передавати повідомлення та викликати
емоційні реакції. Знайдіть палітру кольорів, яка відповідає вашому
бренду, дозволить вам впливати на поведінку клієнтів щодо вашого
бренду. Обмежте вибір кольорів до 5 кольорів. Додаткові кольори дуже
добре працюють. Приємні поєднання кольорів збільшують залучення
клієнтів і змушують користувача почувати себе добре.
● Типографіка - відіграє важливу роль на вашому веб-сайті.
Вона привертає увагу та працює як візуальна інтерпретація голосу
бренду. Шрифти повинні бути розбірливими і використовувати не більше
3 різних шрифтів на веб-сайті.
● Зображення – це візуальний аспект, який використовується в
комунікації. Це включає фотографії, ілюстрації, відео та всі форми
графіки. Усі образи повинні бути виразними та відображати дух компанії
та виступати втіленням особистості їхнього бренду. Більшість початкової
інформації, яку ми споживаємо на веб-сайтах, є візуальною, і як перше
враження, важливо, щоб високоякісні зображення були використані, щоб
сформувати враження професіоналізму та довіри у свідомості
відвідувачів.
Арк.
ЧДТУ 221807.007 ПЗ 19
З м н. Арк. № докум. Підпис Дата
Важливу роль грає навігація. Навігація – це система пошуку шляху, яка
використовується на веб-сайтах, де відвідувачі взаємодіють і знаходять те, що
шукають. Навігація по веб-сайту є ключем до утримання відвідувачів. Якщо
навігація веб-сайту збиває з пантелику, відвідувачі здадуться і знайдуть те, що
їм потрібно в іншому місці. Важливо, щоб навігація була простою, інтуїтивно
зрозумілою та послідовною на кожній сторінці.
Використування F-паттерну. Шаблон на основі F – це найпоширеніший
спосіб, яким відвідувачі сканують текст на веб-сайті. Дослідження системи
відстеження очей виявили, що більшість того, що люди бачать, знаходиться у
верхній і лівій областях екрана. F-подібний макет імітує нашу природну модель
читання на Заході (зліва направо і зверху вниз). Ефективно розроблений веб-
сайт працюватиме з природним шаблоном сканування сторінки читачем.
Візуальна ієрархія. Візуальна ієрархія — це розташування елементів у
порядку важливості. Це робиться за допомогою розміру, кольору, зображення,
контрасту, типографіки, пробілів, текстури та стилю. Однією з найважливіших
функцій візуальної ієрархії є встановлення координаційної точки; це показує
відвідувачам, де знаходиться найважливіша інформація.
Контент. Ефективний веб-сайт має як чудовий дизайн, так і чудовий
контент. Використовуючи привабливу мову, чудовий контент може залучати
відвідувачів і впливати на них, перетворюючи їх на клієнтів.
Макет на основі сітки. Сітки допомагають структурувати дизайн і
впорядковувати вміст. Сітка допомагає вирівняти елементи на сторінці та
зберегти її чистою. Макет на основі сітки організовує вміст у чітку жорстку
структуру сітки зі стовпцями, розділами, які вибудовуються в ряд,
збалансовані, наводять порядок, що призводить до створення естетично
привабливого веб-сайту.
Час завантаження. Очікування завантаження веб-сайту призведе до
втрати відвідувачів. Майже половина відвідувачів Інтернету очікують, що сайт
завантажиться за 2 секунди або менше, і вони потенційно залишать сайт, який
не завантажується протягом 3 секунд. Оптимізація розмірів зображень
Арк.
ЧДТУ 221807.007 ПЗ 20
З м н. Арк. № докум. Підпис Дата
допоможе швидше завантажувати ваш сайт.
Адаптація. Більше людей використовують свої телефони чи інші
пристрої для перегляду веб-сторінок. Важливо розглянути можливість
створення свого веб-сайту з адаптивним макетом, щоб веб-сайт міг
адаптуватися до різних екранів.
2.4 Безпека та захист сайтів
Останніми роками кількість атак, націлених на веб-сервера, значно
зросла. Географічне розташування сервера ролі при цьому не грає, шкідливий
код не звертає уваги на межі. Загроза, яка набуває міжнародного характеру,
тепер походить від організованих злочинних спільнот, які займаються масовим
збором паролів, фінансових відомостей та іншої інформації; це вже не просто
малолітні хакери-хулігани. У більшості випадків атака відбувається з
мінімальним втручанням, а шкідливе програмне забезпечення, що розміщується
на серверах і сайтах, розраховане на зараження чи кражу даних максимальної
кількості користувачів.
Безпека та захист сайтів – завдання, з яким рано чи пізно доводиться
стикатися власникам будь-якого хоча б якогось цінного ресурсу. Для веб-
орієнтованих систем, розрахованих постійну роботу, безпека грає дуже значну
роль. Проблеми безпеки можуть бути вирішені якомога точніше вже на стадії
розробки веб- сайту, або примусово повернутися до них у разі виникнення
проблем на стадії експлуатації.
Можна виділити список основних способів захистити свій сайт:
● забезпечити захист від DDoS-атак;
● підключити SSL-сертифікат;
● використовувати надійний хостинг;
використовувати безпечні плагіни/бібліотеки/фреймворки/CMS;
● застосовувати існуючі техніки захисту від SQL-ін'єкцій та XSS-атак;
● забезпечити ведення журналу веб-сайту та моніторинг подій безпеки;
● проводити регулярне резервне копіювання веб-сайту та всіх
Арк.
ЧДТУ 221807.007 ПЗ 21
З м н. Арк. № докум. Підпис Дата
важливих даних;
● використовувати надійні та складні паролі, а також захист від
перебору паролів;
● у разі наявності адміністративної панелі, за допомогою якої
відбувається керування вмістом веб-сайту, необхідно змінити
стандартну адресу входу та забезпечити контроль доступу.
Під час розвитку веб-безпеки та розповсюдження мобільних пристроїв
сертифікат SSL став необхідним для будь-якого сайту. Деякі браузери вже
мають режими, де сайти без SSL не відображаються взагалі. SSL-cертифікат
забезпечує конфіденційність інформації та дозволяє переконатися в
автентичності сайту. Це особливо важливо при використанні відкритих
бездротових мереж. Банківські карти, логіни, паролі та інші особисті дані,
захищені SSL-сертифікатом, приховані від чужих очей. Перевірити наявність
сертифіката на сайті легко, натиснувши на картинку замочка поруч із адресою
сайту у рядку браузера. Крім цього, SSL-сертифікат має значення для SEO
(пошукової оптимізації). Наприклад, Google у пошуковій видачі надає перевагу
сайтам з наявністю такого сертифікату [9].
Резервне копіювання може врятувати ваш сайт навіть тоді, коли немає
надії повернути працездатність проекту. Часто буває, що зловмисник заносить
«заразу» на сайт задовго до того, як ви її помітите і в цьому випадку чим
старішою буде ваша резервна копія, тим більше шансів на відновлення. Для
бізнесу в мережі наявність резервного копіювання має бути не менш важливою,
ніж продажі. Якщо сайт пропаде, ваша торгівля не тільки буде зупинено, але
вам потрібно буде створювати сайт з нуля, що потребує інвестицій та часу [23].
Засоби захисту від DDoS-атак – це спеціалізовані програмно-апаратні та
програмні засоби, призначені для захисту вер-серверів (веб-сайтів) організації
від розподілених атак типу «Відмова в обслуговуванні». Даний тип атак
націлений на порушення доступності (повне або часткове) різних публічних
сервісів, у тому числі веб-сайтів, баз даних та серверів додатків, при якому
легітимні користувачі втрачають можливість отримання доступу. Принцип
Арк.
ЧДТУ 221807.007 ПЗ 22
З м н. Арк. № докум. Підпис Дата
атаки полягає у генерації великої кількості паразитного трафіку, на обробку
якого виділятиметься безліч обчислювальних ресурсів. Внаслідок атаки
організації можуть зазнати великих фінансових втрат через те, що їхні
замовники не зможуть скористатися сервісами компанії. Одним із найкращих
сервісів захисту від DDoS-атак є Cloudflare.
Рекомендація, що стосується забезпечення захисту від SQL-ін'єкцій та
XSS-атак, вимагає найдокладнішого пояснення, адже метою зловмисників тут є
конкретні дані з бази даних (SQL-ін'єкція) та дані користувача (XSS-атака).
Варто також розуміти, що питання, пов'язані з SQL-ін'єкціями, стосуються
широкого розділу, присвяченого забезпеченню безпечного доступу до всіх
сховищ даних, включаючи реляційні бази даних та бази даних NoSQL, і
включають питання безпеки запитів (необхідно уникати нелегітимних вхідних
даних у складі SQL- команд і найкращим рішенням є використання
параметризованих запитів, які можна застосовувати до конструкцій SQL/OQL і
процедур, що зберігаються), конфігурації (необхідно переконатися в
коректному налаштуванні наявних засобів забезпечення безпеки СУБД і
платформи, на якій вона встановлена), аутентифікації (має виконуватися по
захищеному каналу ) та з'єднань (у зв'язку з існуванням декількох способів
взаємодії з базою даних (за допомогою служби або API), необхідно забезпечити
безпеку з'єднань за допомогою шифрування та аутентифікації) [24].
Загальною мірою захисту, що використовується для запобігання
впровадження SQL-коду та міжсайтового виконання сценаріїв, є перевірка всіх
вхідних даних на відповідність синтаксичної та семантичної норми. Під
синтаксичною нормою слід розуміти повну відповідність вхідних даних
очікуваної форми уявлення, а семантична норма свідчить у тому, що вхідні дані
виходять межі конкретного функціоналу [10].
Арк.
ЧДТУ 221807.007 ПЗ 23
З м н. Арк. № докум. Підпис Дата
2.5 Висновки до розділу 2
В розділі досліджено принципи розробки та загальні особливості web-
орієнтованої системи веб-студії. На основі проведеного аналізу структурної
організації web-орієнтованих інформаційних систем різного типу було
запропоновано концепцію розроблення системи модульного типу, алгоритм та
процес створення і впровадження веб-орієнтованої системи.
Арк.
ЧДТУ 221807.007 ПЗ 24
З м н. Арк. № докум. Підпис Дата
3 РОЗРОБКА ПРОГРАМНОЇ ЧАСТИНИ
3.1Вибір засобів розробки веб-студії
3.1.1 Платформа uCoz
Колись web-розробка вважалася найскладнішим завданням, яка
вимагала серйозних навичок в програмуванні. Веб-сайти розроблялися за
допомогою текстових редакторів, таких як блокнот. Великим проривом у
технології створення та розробки сучасних веб-проектів стали CMS. Сучасні
системи управління контентом широко використовуються на просторах
Інтернету при створенні проектів будь-якої складності. Серед безкоштовних
CMS платформ користуються популярністю WordPress, Joomla, uCoz та
Opencart. Вибір CMS залежить від різних факторів. Однак ми зосередимося на
тому, чому саме систему uCoz вибирають розробки веб-сайтів [11].
1) Функціональні можливості
uCoz дозволяє створювати різноманітні за типами та структурою сайти
[38]. У цьому його сила. Приблизно дві третини функціональності реалізовані
через модулі та розширення (блог, інтернет-магазин, відео, дошка оголошень,
SEO, форум, стрічка новин, каталоги, поштові форми та інші), що залишилася
третина – шістьма насиченими розділами налаштувань панелі управління. Деякі
модулі (магазин, блог, форум, дошка оголошень) щодо повноти можливостей
можна порівняти з міні-CMS, їх активація серйозно розширює можливості,
роблячи двигун профільним по заданому напрямку. Припустимо, модуль
магазину за деякими параметрами перевершує Opencart з коробки, а блоговий
двигун не поступається за зручністю та продуктивністю WordPress.
2) Простота в управлінні
У uCoz можна налаштувати панель керування відповідно до завдання,
вибравши закладки для швидкого доступу до функціональних областей з
головного екрана та набір модулів. Зручна адмінпанель дозволить швидко
публікувати матеріали, реагувати на звернення користувачів, редагувати
контент та інше. Двигун містить багато налаштувань безпеки доступу до сайту
Арк.
ЧДТУ 221807.007 ПЗ 25
З м н. Арк. № докум. Підпис Дата
та в адмінку (двофакторна автентифікація, спам-фільтр, блокування IP та
окремих відвідувачів, модерація коментарів, журнал дій, тривалість сесій,
налаштування прав для груп користувачів, капча та ще купа всього). У вас є
доступ до файлів FTP і через вбудований редактор коду, до будь-яких сторінок
- додавайте скрипти, правте стилі шаблонів, інтегруйте зовнішні веб-сервіси,
оптимізуйте сайт. Все як у CMS [12].
3) Великий вибір готових шаблонів
uCoz може запропонувати більше 20 категорій шаблонів, загальна
кількість яких знаходиться в межах 400 екземплярів. Бізнес, транспорт, мода та
краса, освіта, нерухомість, комп'ютери та зв'язок – кілька прикладів назв
тематичних розділів.Якість системних шаблонів помітно варіюється. Є як цікаві
застарілі варіанти, так і явно класні, сучасні зразки з адаптивним дизайном.
Найкраще вибирати варто з нових шаблонів, вони в будь-якій категорії
знаходяться у верхній частині списку, не заплутаєтеся.
Також, у панелі управління є вбудований маркетплейс із платними
шаблонами – ось вони реально круті, майже всі. Середня ціна $30 навряд чи
стане проблемою для серйозного проекту на кшталт магазину або тематичного
блогу. Є описи з підтримкою модулів та особливостями макетів та режим
живого демо. У розділі дизайну можна редагувати код всіх сторінок сайту, є
навіть візуальний редактор. У Юкозі можна побудувати нетиповий сайт будь-
якої складності структури та оформлення.
4) SEO-оптимізація та просування
У uCoz є сучасний SEO-модуль. У безкоштовній версії деякі його
можливості недоступні. У повній версії (весь функціонал розблокується після
оплати «Оптимального» тарифу) можливостей модуля вистачить
найвибагливішим користувачам.
SEO модуль має таку структуру:
● Головна – загальна інформація про сайт (ТІЦ, кількість
проіндексованих пошуковими системами сторінок та зовнішніх
Арк.
ЧДТУ 221807.007 ПЗ 26
З м н. Арк. № докум. Підпис Дата
посилань)
● Налаштування – вибір правил формування мета-тегів та ЧПУ,
параметрів індексації сторінок, активація інструментів Яндекса
«Моніторинг пінгів» та «Оригінальні тексти»
● Редирективи – додавання 301-х перенаправлень, що дозволяють
змінити URL матеріалу без втрати показників сторінки у
пошукових системах
● Просування – комплексний сервіс для лінкбілдингу. Дозволяє
працювати з бюджетом, розгортати рекламні кампанії,
контролювати позиції, витрати, проводити текстовий та технічний
аналіз сайту. Можна вести кілька проектів по потрібних регіонах
паралельно
● Моніторинг – вибір регіонів для просування та пошукових систем
для збору статистичних даних щодо них.
Просування сайтів на Юкозі працює за тими самими законами, що й у
будь-яких інших системах. Якихось принципових відмінностей немає: для
попадання в ТОП пошукової видачі свій сайт необхідно систематично
наповнювати та розвивати, потрібні унікальні тексти, грамотно заповнені поля
мета-тегів, ЧПУ (людино-зрозуміла URL), помірне використання ключових
слів, оптимізація зображень, зовнішні посилання з тематичних ресурсів на ваш
сайт, робота в соціальних мережах, на YouTube, вміння аналізувати та
використовувати статистичні дані аналітики від Google та Yandex.Сам по собі
uCoz виділяється багатими налаштуваннями, що дозволить ефективно
адмініструвати процес просування [20]. Сайти, створені в uCoz, швидко
індексуються як Яндексом, так і Гуглом. Тобто якихось перешкод успішності
проекту з боку двигуна взагалі не буде. Успіх залежить лише від грамотності
ваших дій щодо розкрутки та бюджету, який ви готові інвестувати. Вбудовані
інструменти для просування найкращі у класі конструкторів сайтів [13].
5) Використання PHP та API
Арк.
ЧДТУ 221807.007 ПЗ 27
З м н. Арк. № докум. Підпис Дата
Веб-сервіс має рішення, що дозволяє використовувати PHP і взаємодіяти
с криптамизосновною системою. Також реалізований початковий API, який
можна використовувати як для скриптів, так і для чогось ще, для тих самих
мобільних додатків. API – говорячи простою мовою, це реальне полегшення
життя програмістів у вигляді готового коду. Якщо говорити професійною
мовою, то Application Programming Interface, інтерфейс програмування [14]. Для
роботи з uAPI потрібні підписані запити (OAuth 1.0). PHP вводиться для того,
щоб користувачі могли розширити та кастомізувати свої сайти. Додати їм
гнучкість та різноманітні корисні функції. За допомогою нового функціоналу
можливо реалізувати різні фічі на сайті, використовувати скрипти для взаємодії
з модулями системи та виведення даних у необхідному вигляді та місці, їх
перетворення. Відкриваються можливості для реалізації незвичайних сервісів
на своїх сайтах.
Отже, uCoz – це універсальна платформа, з безліччю сильних сторін, які
не мають конкурентів. Саме це може стати вирішальним критерієм вибору на
користь конструктора. Сучасна, ергономічна панель управління, широкий набір
напханих корисними налаштуваннями модулів, великий асортимент шаблонів з
урахуванням преміум-дизайнів, високий рівень безпеки, потужна екосистема,
API з відкритим доступом – узагальнений перелік явних переваг системи.
3.2 Розробкаінтерфейсу web-орієнтованої системи
3.2.1 Планування web-орієнтованої інформаційної системи
Перш ніж почати роботу над інтерфейсом, необхідно загострити увагу
на такому важливому аспекті створення сайту, як планування.
Крок 1. Дослідження. Процес планування необхідно почати з
дослідження. Цей крок, дослідження та збір інформації, визначає, якими саме будуть
усі наступні кроки. Головне завдання на цьому етапі - чітко зрозуміти призначення
майбутнього сайту, цілі, яких ви бажаєте досягти, та яку саме аудиторію ви хочете
залучити на свій сайт. Такий перелік питань розробки сайту допомагає розвинути
Арк.
ЧДТУ 221807.007 ПЗ 28
З м н. Арк. № докум. Підпис Дата
кращу стратегію для подальшого керування проектом.
Крок 2. Мозковий штурм. Тепер прийшов час продумати веб-сайт: про
що він буде, як він повинен виглядати. Перше, що вам необхідно зробити – це
зібрати якнайбільше ідей. Ви, напевно, знаєте, що робити покупки у великому
магазині набагато зручніше, тому що там більше вибір. Те саме вірно і щодо
проектного мислення. Чим більше ідей, з якими можна працювати, тим більше
впевнено ви почуватиметеся, обмірковуючи варіанти дій та здійснюючи свій
вибір. Візьміть ручку, листок паперу і запишіть все, що прийде вам на думку.
Крок 3. Структура сторінок. Як організувати структуру сайту, щоб
користувачі в паніці не поспішали покинути його? Оскільки бажання людей
при роботі на різних сайтах є різними, дати конкретні рекомендації для
кожного ресурсу неможливо. Проте звернути увагу насамперед потрібно на
наступні фактори: одноманітність елементів навігації на різних сторінках
одного сайту; простий інтерфейс; відсутність складних графічних елементів;
відсутність дублюючих посилань. Існуючі посилання повинні містити чітке
опис сторінки, яку вони ведуть, а чи не просто слова «дізнатися більше»;
короткий список меню. Якщо пунктів у меню має бути багато, зробіть його
дворівневим. Але більш як два рівні з погляду юзабаліті – перебір [15].
Крок 4. Управління проектом. Складіть розклад і дотримуйтесь його.
Якщо ви хочете добитися цілей, то необхідно скласти детальний графік, який є
ключем до успішного веб-сайту.
Крок 5. Розробка сайту. Під час кроку розробки ви зможете побачити,
як ваш проект почав жити. Красиві дизайни, створені на етапі проектування,
перетворюються з документів Photoshop та Figma в HTML, CSS та JavaScript.
Цей код позначається як “верстка” і дозволяє створити базовий веб-сайт, який
можна переглянути у вашому браузері.
Після написання верстки відбувається основне програмування
функціональності. Програмування, часто використовуючи PHP як основну мову
програмування, а MySQL як мову бази даних, дозволяє вбудовувати на сайт
складні функціональні можливості [16].
Арк.
ЧДТУ 221807.007 ПЗ 29
З м н. Арк. № докум. Підпис Дата
Ця функціональність може включати можливість створення, оновлення,
відображення та видалення інформації за допомогою спеціальної системи
управління вмістом. На цьому етапі сайт буде розміщуватися та функціонувати
на нашому проміжному сервері.
Крок 6. Веб-хостинг. Де розмістити сайт? Скільки це буде коштувати?
Наскільки надійний хостинг-провайдер? Все це важливі аспекти планування
сайту.
Крок 7. Доменне ім’я. Доменне ім’я – дуже важливий момент при
створенні веб-сайту. Необхідно вибрати такого назва. Доменне ім’я не повинно
бути занадто довгим – воно повинно легко запам’ятовуватися. Необхідно
пам’ятати про те, що ви завжди зможете перенаправити інші домени на ваш
сайт. Це дозволить використовувати декілька доменів для одного веб-сайту.
Крок 8. Створення резервних копій сайту. Переконайтеся, що подбали
про створення резервних копій свого сайту. В ідеалі непогано б створювати їх
кожен день, але, якщо це важко, створення копій через день буде прийнятною
альтернативою. Ніколи не можна знати заздалегідь, коли сервер вийде з ладу
або піддасться хакерській атаці. Ви будете спати міцніше, знаючи, що у вас є
резервна копія.
Крок 10. SEO-оптимізація та соціальні мережі. Який би сайт не
створювався, соціальні мережі є важливою частиною зростання його аудиторії.
Потрібно уявити свій контент в максимально можливій кількості соціальних
мереж. Самі популярні з них: Twitter, Facebook, YouTube і Linkedin.
Просування ресурсу – це досить складний і тривалий процес, але і результат
його заслуговує на позитивну оцінку. Варто зазначити, що SEO-просування
сайту – послуга, яка допоможе грамотно оцінити всі особливості ресурсу,
звернути увагу на цільову аудиторію та вжити заходів щодо ефективного
просування. Для вирішення таких складних і важливих завдань залучаються
лише спеціально навчені web-майстри, які мають значний практичний досвід
[17]. Окрему увагу варто приділити правильному складання ключових запитів.
Тут важливий не тільки порядок слів, а й наявність або відсутність розділових
Арк.
ЧДТУ 221807.007 ПЗ 30
З м н. Арк. № докум. Підпис Дата
знаків. Пошукові системи досить реагують на найменші зміни. І навіть одна
неправильно поставлена літера може значно позначитися на зниженні позиції
ресурсу у видачі.
Наведений список здається занадто довгим, але, якщо потрібно, щоб
процес створення сайту пройшов гладко, кожному з його пунктів необхідно
приділити пильну увагу.
3.2.2 Створення бази даних
Для створення нашої бази даних та таблиці ми будемо використовувати
мову програмування Python та SQLite. SQLite - це вбудована бібліотека, яка
реалізує автономний, безсерверний, нульовий конфігурації, механізм транзакції
СУБД SQL [18]. SQLite не є автономним процесом, як інші бази даних, ви
можете зв'язати його статично або динамічно відповідно до вашої вимоги з
вашою програмою. SQLite безпосередньо звертається до своїх файлів
зберігання.
Особливості SQLite:
● SQLite не вимагає окремого процесу сервера або системи для
роботи (без сервера).
● SQLite поставляється з нульовою конфігурацією, що означає
відсутність необхідності в налаштуванні або адмініструванні.
● Повна база даних SQLite зберігається в одному крос-
платформному диску.
● SQLite доступнийу UNIX (Linux, Mac OS-X, Android, iOS) та
Windows (Win32, WinCE, WinRT).
Створена нами база даних буде отримувати дані з форм для обробки
майбутніх замовлень клієнтів.
Щоб скористатися SQLite3 у Python необхідно імпортувати модуль
sqlite3, а потім створити об'єкт підключення до БД. Щоб створити таблицю в
SQLite3, виконаємо запит Create Table у методі execute(). Для цього виконаємо
Арк.
ЧДТУ 221807.007 ПЗ 31
З м н. Арк. № докум. Підпис Дата
таку послідовність кроків [21]:
1. Створення об'єкта підключення
2. Об'єкт Cursor створюється за допомогою об'єкта подключения
3. Використовуючи об'єкт курсору, викликається метод execute із
запитом createtable як параметр.
Створимо таблицю з наступними колонками: ID, Послуга, Ціна послуги,
Ім’я користувача, Номер телефону, Електронна пошта, Дата дзвінку.
Рисунок 3.1 - Створення таблиці БД
У наведеному вище коді визначено дві функції: перша встановлює
з'єднання; а друга - використовуючи об'єкт курсору, виконує SQL оператор
create table. Метод commit() зберігає всі зроблені зміни. Наприкінці скрипта
здійснюється виклик обох функций.Для перевірки існування таблиці
скористаємося браузером БД для sqlite [19].
Щоб вставити дані в таблицю, скористаємося оператором INSERT
INTO:
Арк.
ЧДТУ 221807.007 ПЗ 32
З м н. Арк. № докум. Підпис Дата
Рисунок 3.2 - Вставка даних у таблицю
Для перевірки додамо нову інформацію про замовлення в базу даних,
зібрав дані для нашої таблиці таким чином:
Рисунок 3.3 - Додавання нових даних у БД
В результаті виконання коду, ми отримаємо наступні дані в консолі:
Рисунок 3.4 - Вивід результатів в консолі
Після перевірки роботи, ми можемо зберегти зміни та перейти
безпосередньо до прив’язки нашої БД на платформі uCoz. Завдяки створеній
базі даних, система зможе зберігати в ній інформацію про замовлення клієнтів.
3.2.3 Дизайн web-орієнтованої інформаційної системи
Сайт веб-студії Twego виконано у стриманій кольоровій гамі, яка легко
сприймається. Для побудови структури сайту використана популярна
безкоштовна систем управління сайтами uCoz.
Для перегляду і використання повного функціоналу рекомендовано
Арк.
ЧДТУ 221807.007 ПЗ 33
З
м н. Арк. № докум. Підпис Дата
використовувати браузери останніх версій: Microsoft Edge v101, Mozilla Firefox
v93, Safari v14, Google Chrome v101, Opera v86 або більш нові версіїї цих
браузерів. Використання старіших версій браузерів (таких, як Internet Explorer
6) може призвести до некоректного відображення змісту або блокуванню
деяких функцій.
Сайт був повністю побудований українською мовою.
Для сайту було окремо створено логотип в програмі Adobe Illustrator,
який розташований у верхньому лівому куті. Також на основі принципів та
тенденцій сайтобудування моя інформаційна система створена як лендинг
(landing), тобто основні функції та вся інформація знаходяться на одній
сторінці. Для комфортного переходу по іншим сторінкам сайту, у верхній
частині є меню з навігацією. Шаблон сайту був спроектований повністю у веб-
додатку Figma. Детально дизайн і функціонал сайту описано в додатках.
Сайт веб-студії Twego спроектований у стриманій блакитно-біло-чорній
кольоровій гамі, яка легко сприймається користувачами. Основний колір синій
відповідає за надійність, сприяє розслабленню та створює атмосферу безпеки та
довіри. Для побудови структури і верстки сайту були використані функції
управління дизайну популярної безкоштовної системи управління сайтами
uCoz.
Головна сторінка сайту розроблена за останніми тенденціями дизайну у
стилі Landing Page. Фактично тут є вся необхідна інформація, яка потрібна
користувачам, але для портфоліо, списку послуг, блогу, контактів сайт веб-
студії було доповнено ще кількома сторінками.
Головне меню з навігацією, функціями авторизації та пошуку
розташоване у верхній частині сайту. Також, над меню розташовані контакти та
час роботи веб-студії з кнопкою для замовлення дзвінку. Так як меню
закріплено під час скролингу сайту, користувач після перегляду необхідної
інформації може швидко перейти до іншої сторінки (Рис. 3.5.).
Арк.
ЧДТУ 221807.007 ПЗ 34
З м н. Арк. № докум. Підпис Дата
Рисунок 3.5 - Головне меню
Меню було створено за допомогою інструменту “Конструктор меню”:
Рисунок 3.6 - Конструктор меню
На головній сторінкі під меню знаходиться слайдер. Слайдеро
називають елемент веб-дизайну, що складається з блоку певної ширини
зазвичай на початку сторінки. Їхня функція полягає в додаванні картинок у
текст і більш вигідний показ даних сайту. Так слайдер дозволяє визначити
рівень зацікавленості користувача у товарах та послугах сайту. Головна
перевага слайдера – показ інформації візуально. Як відомо, інтерес до руху
закладено ще у підсвідомості, тому слайдери вже стали обов'язковою частиною
будь-якого дизайну.
Арк.
ЧДТУ 221807.007 ПЗ 35
З м н. Арк. № докум. Підпис Дата
Рисунок 3.7 - Слайдер
У наступних блоках головної сторінки користувач може ознайомитися з
перевагами, портфоліо, списком послуг, партнерами, фінансовими гарантіями
та іншою корисною інформацією. На сторінці присутня форма для оформлення
заказу зі спеціальною пропозицією. В підвалі сторінки також є швидкий доступ
до інших розділів сайту, популярних записів блогу та інформація з контактами
веб-студії.
Рисунок 3.8 - Послуги та ціни
Арк.
ЧДТУ 221807.007 ПЗ 36
З м н. Арк. № докум. Підпис Дата
Рисунок 3.9 - Чому ми найкращі?
Рисунок 3.10 - Форма зворотнього зв’язку
На сторінці “Портфоліо” користувач може переглянути вже готові
роботи веб-студії. Портфоліо веб-студії – це візитна картка, яка може багато
розповісти і про компанію, і про професіоналізм і репутацію її фахівців, і навіть
про рівень її клієнтів.
Якщо портфоліо веб студії якісне і регулярно поповнюється новими
проектами, то можна бути впевненим, що компанія, а точніше, її фахівці
користуються популярністю і затребувані. Якщо в портфоліо включені
Арк.
ЧДТУ 221807.007 ПЗ 37
З м н. Арк. № докум. Підпис Дата
масштабні проекти, а серед клієнтів солідні компанії, то професіоналізм веб-
студії не викликає жодного сумніву.
Рисунок 3.11– Портфоліо
Пункт меню “Послуги та ціни” має випадаючий список з усіма
послугами, які предоставляє веб-студія: SEO-оптимізація, Створення сайтів,
Технічна підтримка, Соц. мережі SMM, Дизайн, Реклама, Контент для сайту,
Аналітика.
Рисунок 3.12 - Послуги та ціни
Арк.
ЧДТУ 221807.007 ПЗ 38
З м н. Арк. № докум. Підпис Дата
На сторінці кожної послуги є основна інформація про неї, етапи
розробки, ціна пакетів, приклади робіт, форма зворотнього зв’язку та блок з
перевагами компанії.
Рисунок 3.13 - Послуги та ціни
Перед початком роботи над проектом проводиться брифінг замовника з
метою уточнення максимум інформації на сайті. У брифі замовник описує
компанію, на яку планується розробка та вказує побажання до сайту.
Наступним етапом є складання технічного завдання. Тут докладно
розписуються всі елементи проекту, їх призначення та способи реалізації.
Потім слідує прототипування сайту. Це процес конструкції прототипу
майбутнього інтернет-проекту. Прототип потрібен для того, щоб грамотно
розподілити елементи дизайну та блоки, побачити концепцію майбутнього
сайту та коректно організувати систему навігації.
Розробка дизайну є одним з найважливіших етапів розробки сайту.
Важливо, щоб дизайн виконував функції покладені нею, у своїй відповідав
запитам сучасних тенденцій. Розробка дизайну здійснюється з урахуванням
Арк.
ЧДТУ 221807.007 ПЗ 39
З м н. Арк. № докум. Підпис Дата
спрямованості діяльності компанії та побажань замовника.
На етапі програмування відбувається становлення макета сайту в ресурс
з готовим дизайном, функціоналом і навігацією.
Після етапу програмування та тестування замовнику здають готовий і
повністю функціональний продукт.
Рисунок 3.14 - Етапи розробки
Рисунок 3.15 - Ціни послуг
Якщо при перегляді, з’явилися запитання, користувач може натиснути
на кнопку “Консультація”, після чого заповнити форму та отримати усі
відповіді від менеджеру в онлайн форматі чи по телефону.
Арк.
ЧДТУ 221807.007 ПЗ 40
З м н. Арк. № докум. Підпис Дата
Рисунок 3.16 - Форма “Консультація”
На сторінці “Блог” розміщено статті різноманітні теми, які впорядковано
по категоріям та можна обрати на боковій панелі сайту. В статтях показано, що
можна в них розміщувати різні типи візуальної інформації, як то слайди з фото,
поодинокі фото в статтях, відео з YouTube, прості тексти та виділені цитати.
Рисунок 3.17 - Блог
Також на сайті є можливість залишити коментарі до новин в блозі. Для
цього користувач має зареєструватись, заповнивши стандартну форму на сайті
або якщо вже зареєстрований на сайті, то лише ввести в форму логін та пароль.
Арк.
ЧДТУ 221807.007 ПЗ 41
З м н. Арк. № докум. Підпис Дата
Рисунок 3.18 - Форма додавання коментарів
Рисунок 3.19 - Форма авторизації
Арк.
ЧДТУ 221807.007 ПЗ 42
З м н. Арк. № докум. Підпис Дата
Рисунок 3.20 - Сторінка регистрації
На особистій сторінці користувача можна редагувати профіль,
продивлятися повідомлення, список онлайн користувачів та свої замовлення.
Рисунок 3.21 - Особиста сторінка користувача
На сторінці “Контакти” присутня інформація про адресу компанії,
контактний телефон, електронну пошту. На цій сторінці користувачі мають
змогу поставити питання через форму зворотнього зв’язку, заповнивши поля
Арк.
ЧДТУ 221807.007 ПЗ 43
З м н. Арк. № докум. Підпис Дата
форми і натиснувши «Відправити». Ця інформація направляється на
електронну пошту адміністратора сайту.
Рисунок 3.22 - Cторінка “Контакти”
Рисунок 3.23 - Підвал сайту
Для редагування сайту, адміністратор повинен зайти в панель
управління uCoz, де й відбувається все налаштування. Модульна структура
дуже зручна, дозволяє значно спростити інтерфейс та прискорити освоєння
Арк.
ЧДТУ 221807.007 ПЗ 44
З м н. Арк. № докум. Підпис Дата
системи.
Рисунок 3.24 - Головна сторінка панелі управління
За допомогою встановлених модулів в системі, можна з легкістю
додавати та редагувати категорії й матеріали, переглянути користувачів сайту,
керувати коментарями, додавати та видаляти медіафайли за допомогою
файлового менеджеру, та користуватися багатьма іншими функціями.
Рисунок 3.25 - Файловий менеджер
Арк.
ЧДТУ 221807.007 ПЗ 45
З м н. Арк. № докум. Підпис Дата
Рисунок 3.26 - Управління коментарями
Рисунок 3.27 - Сторінка редагування матеріалу
В системі наголошується на можливості редагування коду дизайну.
Наприклад, можна окремо редагувати код сторінки списку матеріалів,
коментарів блогу, форми входу на сайт. У кожного встановленого модуля в
редакторі дизайну видно список доступних для внесення змін блоків і
елементів.
Арк.
ЧДТУ 221807.007 ПЗ 46
З м н. Арк. № докум. Підпис Дата
Рисунок 3.28 - Редагування дизайну
3.3 Висновки до розділу 3
В третьому розділі обґрунтовано вибір засобу розробки WEB-
орієнтованої системи, а саме uCoz. Вибір даної платформи обґрунтований тим,
що його освоєння віднімає мало часу, під час розробки доступний попередній
перегляд кожної окремо зробленої операції, доступна велика кількість функцій
(модульна система, організація інтерактивних елементів сайту, конструктор
меню, файловий менеджер, і тому подібне), пакет підтримує велику кількість
веб технологій.
В розділі розроблено WEB-орієнтовану інформаційну систему веб-студії
Twego.
Арк.
ЧДТУ 221807.007 ПЗ 47
З м н. Арк. № докум. Підпис Дата
ВИСНОВКИ
Розробка web-орієнтованої інформаційної системи веб-студії дозволяє
швидко і ефективно накопичувати, зберігати, обробляти та редагувати
інформацію. Користувачі можуть переглянути весь спектр послуг, які
пропонує веб-студія, та проконсультувавшись, оформити замовлення в
лічені хвилини.
Нові інформаційні технології дозволяють не лише скорочувати час для
збору та обробки інформації, а й відкривають нові можливості для її
творчого осмислення і, як результат, створення нових підходів до розробки і
реалізації бізнес-процесів.
У кваліфікаційній роботі бакалавра розроблено WEB-орієнтовану
інформаційну систему веб-студії засобами системи керування вмістом сайту
з відкритим вихідним кодом – uCoz. Система містить загальну інформацію
про переваги компанії, інформацію про види послуг, портфоліо та каталог
цікавих та корисних статей веб-студії.
Web-орієнтована інформаційна система веб-студії розроблена з
урахуванням недоліків проаналізованих подібних систем, а саме: наявність
портфоліо, каталогу послуг, проста й зрозуміла форма оформлення
замовлення, загальна інформація про компанію, тощо. Web-орієнтована
інформаційна система спроектована з урахуванням правил ергономіки
створення сайтів, та виконаний у стриманій блакитно-біло-чорній
кольоровій гамі, яка легко сприймається користувачами..
Таким чином, можна стверджувати, що мета роботи досягнута і всі
вимоги технічного завдання виконані у повному обсязі.
Арк.
ЧДТУ 221807.007 ПЗ 48
З м н. Арк. № докум. Підпис Дата
ДОДАТОК A
ЗАТВЕРДЖЕНО
Зав. кафедри ІТП, проф.
_________________ Прокопенко Т.О.
«____» ________________ 2022 р.
ІНФОРМАЦІЙНА СИСТЕМА ВЕБ-СТУДІЇ TWEGO
Специфікація
482 ЧДТУ 21807-01
Листів 2
Розробник _______________ Халупко І. С.
Керівник _______________ Карапетян А. Р.
Н. Контроль _______________
Черкаси, 2022
2
482 ЧДТУ 21807-01
Позначення Найменування Примітка
Документація
482 ЧДТУ21807-01 12 01 Текст програми
ІНФОРМАЦІЙНА СИСТЕМА ВЕБ-СТУДІЇ TWEGO
482 ЧДТУ 21807-01 12 01
Текст програми
Листів 8
Розробник _____________ Халупко І. С.
Н
2022
2
482 ЧДТУ21807-0112 01
Програмний код форми “Замовити дзвінок”
<div id="orderForm">
<script>
function _uploadCheck() {
var w=_uWnd.all[this.upload_wnd];
if (!w || w.state.destroyed) return;
w._myuploadTimer=setTimeout("_uploadProgress('"+this.upload_id+"',"+this.upload_wnd+")",3000);
}
function _uploadProgress(upId,widx) {
if (_uWnd.all[widx]) _uWnd.all[widx]._myuploadTimer=null;
var
o={upload_wnd:widx,upload_id:upId,dataType:'json',type:'GET',timeout:5000,cache:1,success:_uploadTick,error: function(a,
b, c) { console.log('Test!', a, '-', b, '-', c); }};
try {
_uAjaxRequest("/.uploadstatus?upsession="+upId,o);
} catch(e) {
_uploadCheck.call(o,null,'error');
}
}
function _uploadTick(data,st) {
var w=_uWnd.all[this.upload_wnd];
if (!w || w.state.destroyed) return;
if (data.state=='error') {
if (data.status==413)
_uWnd.alert('Суммарныйразмерфайловпревышаетдопустимоезначение 15 МБ','',{w:230,h:80,tm:3000});
else _uWnd.alert('Ошибкасоединения, попробуйтепозже
('+data.status+')','',{w:230,h:80,tm:3000});
w.close();
sblmb28=0;
return;
} else if (data.state=='starting' && w._myuploadStarted) {
_uWnd.alert('Ошибка соединения, попробуйте
позже','',{w:230,h:80,tm:3000});
w.close();
return;
} else if (data.state=='uploading' || data.state=='done') {
var cents;
if (data.state=='done' || data.size==0) {
3
482 ЧДТУ21807-0112 01
w.footer('');
} else {
cents=Math.floor(data.received/data.size*1000)/10;
w.footer('<div style="border:1px
solid;position:relative"><div class="myWinTD2" style="width:'+Math.floor(cents)+'%;height:20px"></div><div style="text-
align:center;position:absolute;left:0;top:0;width:100%;height:20px;font-size:14px">'+cents+'%
('+Math.floor(data.received/1024)+' Kb)</div></div>');
}
w._myuploadStarted=1;
if (data.state=='done') {
sblmb28=0;
return;
}
}
_uploadCheck.call(this);
}
var sblmb28=0;
function funi2IVt() {
var act='/mail/', upref='84Dg1NSo7Z', uploadId, wnd;
try { var tr=checksubmit(); if (!tr){return false;} } catch(e) {}
if (sblmb28==1) { return false; }
sblmb28=1;
window._uploadIdx = window._uploadIdx ? window._uploadIdx+1 : 1;
uploadId = 'up' + window._uploadIdx + '_' + upref;
var frm = $('#mffi2IVt')[0];
frm.action=act+'?upsession='+uploadId;
wnd = new _uWnd(
'sendMFe28',
'Отправка сообщения',
-350,
-100,
{
footerh:25,
footerc:' ',
modal:1,
closeonesc:1,
resize:0,
hidefooter:0,\
contentsizeprio:0,
onbeforeclose:function(){},
4
482 ЧДТУ21807-0112 01
onclose:function(wnd) {
if (wnd._myuploadTimer)
clearTimeout(wnd._myuploadTimer);
wnd._myuploadTimer=null;
}
},
{
form:frm
}
);
wnd._myuploadStarted=0;
_uploadCheck.call({upload_wnd:wnd.idx,upload_id:uploadId});
}
jQuery(function($) {
if ($("input[id=policy]").length) {
$('body').on("submit","form[name=mform]", function() {
if (!$('input[id=policy]:checked').length) {
$("input[id=policy]").next().css({"cssText":"color: red !important","text-decoration":"underline"});
return false;
} else {
$("input[id=policy]").next().removeAttr('style');
}
});
$('body').on("change","#policy", function() {
$("input[id=policy]").next().removeAttr('style');
});
}
});
</script><form method="post" name="mform" id="mffi2IVt" style="margin:0"
enctype="multipart/form-data" onsubmit="funi2IVt(); return false;">
<input type="hidden" name="jkd498" value="1">
<input type="hidden" name="jkd428" value="1">
<h3 align="center">Оставить заявку</h3>
<table id="flycall" cellspacing="0" cellpadding="0">
<tr style="display:none;"><td width="35%">E-mail отправителя<font color="red">*</font>:</td><td><input
value="[email protected]" type="text" name="f1" size="30" style="width:95%;" maxlength="70"/></td></tr>
<tr><td><span>Имя:</span><br /><input type="text" placeholder="Иван" style="margin-top:5px;width:190px; padding-
5
482 ЧДТУ21807-0112 01
left:10px;padding-right:10px; " name="f2" size="30" maxlength="70"/></td></tr>
<tr><td><span>Телефон:</span><br /><input type="text" placeholder="+7 916 555 33 44" style="margin-
top:5px;width:190px;padding-left:10px;padding-right:10px; " name="f3" size="30" maxlength="70"/></td></tr>
<tr><td><span>Времязвонка:</span><br /><input type="text" placeholder="18:00" style="margin-
top:5px;width:190px;padding-left:10px;padding-right:10px; margin-bottom:20px; " name="f4" size="30"
maxlength="70"/></td></tr>
<tr><td style="line-height: 0.9;margin-top:25px;width:170px; padding-left:10px;padding-right:10px; "><img border="0"
src="/img/str/check.jpg" width="18"><font size="1"><a href="/index/policy" rel="nofollow" target=_blank >Согласен(на)
сполитикойконфиденциальностисайта</a></font></td></tr>
<tr><td><br></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="Отправить"/></td></tr>
</table>
<input type="hidden" name="id" value="28" />
<input type="hidden" name="a" value="1" />
<input type="hidden" name="o" value="1" />
</form>
</div>
Кодвіджету “Відлікчасу”
(function(){var
_id="d464f30d7a09de8004038e06b81d1e3c";while(document.getElementById("timer"+_id))_id=_id+"0";document.write
("<div id='timer"+_id+"' style='min-width:570px;height:120px;'></div>");var
_t=document.createElement("script");_t.src="/timer/timer.min.js";var _f=function(_k){var l=new MegaTimer(_id,
{"view":[1,1,1,1],"type":{"currentType":"3","params":{"weekdays":[1,1,1,1,1,1,1],"usertime":true,"time":"00:00","tz":-
180,"hours":"24","minutes":"0"}},"design":{"type":"circle","params":{"width":"2","radius":"57","line":"solid","line-
color":"#ffffff","background":"solid","background-color":"rgba(255,255,255,0.07)","direction":"direct","number-font-
family":{"family":"Cuprum","link":"<link href='//fonts.googleapis.com/css?family=Cuprum&subset=latin,cyrillic'
rel='stylesheet' type='text/css'>"},"number-font-size":"50","number-font-color":"#ffffff","separator-
margin":"15","separator-on":false,"separator-text":":","text-on":true,"text-font-family":{"family":"Open
Sans","link":"<link href='//fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic' rel='stylesheet'
type='text/css'>"},"text-font-size":"16","text-font-
color":"#ffffff"}},"designId":7,"theme":"black","width":570,"height":120});if(_k!=null)l.run();};_t.onload=_f;_t.onreadys
tatechange=function(){if(_t.readyState=="loaded")_f(1);};var
_h=document.head||document.getElementsByTagName("head")[0];_h.appendChild(_t);}).call(this);
Код віджету “Пошук по сайту”
<div class="searchForm" align="center">
<form onsubmit="this.sfSbm.disabled=true" method="post" action="/publ/">
<div class="schQuery">
6
482 ЧДТУ21807-0112 01
<input name="query" maxlength="30" size="20" class="queryField" type="text">
</div>
<div class="schBtn">
<input class="searchSbmFl" name="sfSbm" value="Пошукпосайту" type="submit">
</div>
<input name="a" value="2" type="hidden">
</form>
</div>
Кодслайдеру
<section class="tw-slider tw-slider-fullscreen uk-light" data-uk-height-viewport="offset-top: true">
<div class="owl-carousel owl-theme" data-autoplay="true" data-autoplay-timeout="4000" data-autoplay-hoverpause="true">
<div class="slider-item" data-overlay="0.9" style="background-color: #2280fc; background-image: url(/img/slederbox1.jpg);"
data-uk-height-viewport="offset-top: true">
<div class="slider-content">
<div class="tw-element uk-text-center full tw-heading" data-uk-scrollspy="target: > *; cls:uk-animation-slide-bottom-medium;
delay: 400;">
<h2>Создание продающих сайтов</h2>
<h4 class="tw-sub-title">Профессиональное изготовление и разработка интернет ресурсов</h4>
<a href="/sozdanie-saitov" class="uk-button uk-button-default uk-button-small uk-button-radius tw-hover">
<span class="tw-hover-inner"><span>Подробнее</span><i class="ion-ios-arrow-thin-right"></i></span>
</a>
</div>
</div>
</div>
<div class="slider-item" data-overlay="0.9" style="background-color: #2280fc; background-image: url(/img/slederbox2.jpg);"
data-uk-height-viewport="offset-top: true">
<div class="slider-content">
<div class="tw-element uk-text-center full tw-heading" data-uk-scrollspy="target: > *; cls:uk-animation-slide-bottom-medium;
delay: 400;">
<h2>Продвижение сайтов с гарантией</h2>
<h4 class="tw-sub-title">Поисковое продвижение сайта в топ поисковых систем</h4>
<a href="/prodvizhenie-saytov" class="uk-button uk-button-default uk-button-small uk-button-radius tw-hover">
<span class="tw-hover-inner"><span>Продвинутьсайт</span><i class="ion-ios-arrow-thin-right"></i></span>
</a>
</div>
</div>
7
482 ЧДТУ21807-0112 01
</div>
<div class="slider-item" data-overlay="0.9" style="background-color: #2280fc; background-image: url(/img/slederbox3.jpg);"
data-uk-height-viewport="offset-top: true">
<div class="slider-content">
<div class="tw-element uk-text-center full tw-heading" data-uk-scrollspy="target: > *; cls:uk-animation-slide-bottom-medium;
delay: 400;">
<h2>Реклама и привлечение клиентов</h2>
<h4 class="tw-sub-title">Контекстная реклама Яндекс и Google и другие источники трафика</h4>
<a href="/kontekstnaya-reklama" class="uk-button uk-button-default uk-button-small uk-button-radius tw-hover">
<span class="tw-hover-inner"><span>Получитьклиентов</span><i class="ion-ios-arrow-thin-right"></i></span>
</a>
</div>
</div>
</div>
</div>
</section>
<script>
$(function () {
$('.slider-wrapper').bxSlider({
useCSS: false,
nextText: 'keyboard_arrow_right',
prevText: 'keyboard_arrow_left'
});
$('.carousel-wrapper').bxSlider({
useCSS: false,
nextText: 'keyboard_arrow_right',
prevText: 'keyboard_arrow_left',
minSlides: 2,
maxSlides: 7,
slideWidth: 138,
slideMargin: 8,
autoStart: true,
autoHover: true
});
});
</script>
Кодкнопки “Вгору”
8
482 ЧДТУ21807-0112 01
<div class="uk-text-right">
<a href="" data-uk-scroll>Вверх <i class="ion-ios-arrow-up"></i></a>
</div>
</div>
</div>
</div>
<style>.wbb-cp{padding-left: 7px!important;}.wbb-cp .ve-tlb-colorpick{background-position: 0px -439px!important;}.wysibb
.wysibb-toolbar{text-align: left;}</style>
<script>
if(document.documentElement.clientWidth < 959) {
if($('.widget_categories').html()) {
$('.content-area .tw-element.tw-shop:first-child').after('<div class="sidebar-area uk-grid-margin uk-first-column"><aside
class="category widget"></aside></div>')
$('.content-area .category').html($('.widget_categories').html());
}
}</script>
</footer>
<script type="text/javascript">
$(document).ready(function(){
$('.ulightbox').fancybox({padding: 12, preload: 5, openEffect: 'fade', closeEffect: 'fade', nextEffect: 'fade', prevEffect: 'fade',
openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.5,
speedIn: 'slow', speedOut: 0}, buttons : {}}});
});
function _bldCont1(id, indx) {
idarray = 'allEntImgs' + id;
imgar = [];
for (var i=0;i<eval(idarray).length;i++) {
imgar[i] = eval(idarray)[i][0];
}
$.fancybox(imgar,{index: indx, padding: 12, preload: 5, openEffect: 'fade', closeEffect: 'fade', nextEffect: 'fade', prevEffect:
'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity:
0.5, speedIn: 'slow', speedOut: 0}, buttons: {}}});
}
</script>
Код форми “Додати коментар”
9
482 ЧДТУ21807-0112 01
<div class="comment-respond uk-text-center">
<div class="comment-title">
<h4>Добавитькомментарий</h4>
</div>
<form name="socail_details" id="socail_details" onsubmit="return false;">
<input type="hidden" name="social" value="">
<input type="hidden" name="data" value="">
<input type="hidden" name="id" value="55">
<input type="hidden" name="ssid" value="572230360177071324457">
</form><div id="postFormContent" class="">
<form method="post" name="addform" id="acform" action="/index/"
onsubmit="addcom(); return false;"><script>function _dS(a){var b=a.split(''),c=b.pop();return b.map(function(d){var
e=d.charCodeAt(0)-c;return String.fromCharCode(32>e?127-(32-e):e)}).join('')}
var _y8M = _dS('Cpuw|{\'{!wlD)opkklu)\'uhtlD)zvz)\'}hs|lD)887<@97=?8)\'6E7');
function addcom(f) {
if (document.getElementById('addcBut')) {
document.getElementById('addcBut').disabled = true;
} else {
try {document.addform.submit.disabled = true;} catch(e) {}
}
if (document.getElementById('eMessage')) {
document.getElementById('eMessage').innerHTML = '<span style="color:#999"><img
src="/.s/img/ma/m/i2.gif" border="0" align="absmiddle" width="13" height="13">Идетпередачаданных...</span>';
}
_uPostForm('acform', {type:'POST', url:'/index/'});
}
document.write(_y8M);</script>
<div class="mc-widget">
<script>
var socRedirect = location.protocol + '//' + ('twego.ucoz.net' ||
location.hostname) + location.pathname + location.search + (location.hash && location.hash != '#' ? '#reloadPage,' +
location.hash.substr(1) : '#reloadPage,gotoAddCommentForm' );
socRedirect = encodeURIComponent(socRedirect);
var providers = {
// social comments:
local:{name:"Local auth",enabled:1,handler:function() { new _uWnd('LF',' ',-250,-110,{
10
482 ЧДТУ21807-0112 01
closeonesc:1, oninit:function(){try{_uWnd.getbyname('LF').setZ(100500)} catch(e){}}},{url:'/index/40'}); }},
vkontakte: {name:"Вконтакте", url:
"//sys000.ucoz.net/cgi/uutils.fcg?a=soc_comment_auth_vk&ref="+socRedirect, enabled: 1},
facebook: {name:"Facebook", url:
"//sys000.ucoz.net/cgi/uutils.fcg?a=soc_comment_auth_fb&ref="+socRedirect, enabled: 1},
twitter: {name:"Twitter", url:
"//sys000.ucoz.net/cgi/uutils.fcg?a=soc_comment_auth_tw&ref="+socRedirect, enabled: 1},
google: {name:"Google", url:
"//sys000.ucoz.net/cgi/uutils.fcg?a=soc_comment_auth_gp&ref="+socRedirect, enabled: 1},
yandex: { name:'Yandex', url: '/yandex?ref=' + socRedirect, enabled: false }
};
function socialRepost(entry_link, message) {
console.log('Check witch Social network is connected.');
var soc_type = jQuery("form#acform
input[name='soc_type']").val();
switch (parseInt(soc_type)) {
case 101:
console.log('101');
var newWin =
window.open('https://vk.com/share.php?url='+entry_link+'&description='+message+'&noparse=1','window','width=640,height
=500,scrollbars=yes,status=yes');
break;
case 102:
console.log('102');
var newWin =
window.open('https://www.facebook.com/sharer/sharer.php?u='+entry_link+'&description='+encodeURIComponent(message)
,'window','width=640,height=500,scrollbars=yes,status=yes');
break;
case 103:
console.log('103');
break;
case 104:
console.log('104');
break;
case 105:
console.log('105');
11
482 ЧДТУ21807-0112 01
break;
case 106:
console.log('106');
break;
case 107:
console.log('107');
var newWin =
window.open('https://twitter.com/intent/tweet?source=webclient&url='+entry_link+'&text='+encodeURIComponent(message)
+'&callback=?','window','width=640,height=500,scrollbars=yes,status=yes');
break;
case 108:
console.log('108');
break;
case 109:
console.log('109');
var newWin =
window.open('https://plusone.google.com/_/+1/confirm?hl=en&url='+entry_link,'window','width=640,height=500,scrollbars=y
es,status=yes');
break;
}
}
function updateSocialDetails(type) {
console.log('updateSocialDetails');
jQuery.getScript('//sys000.ucoz.net/cgi/uutils.fcg?a=soc_comment_get_data&site=etwego&type='+type, function() {
jQuery("form#socail_details
input[name='social']").val(type);
jQuery("form#socail_details
input[name=data]").val(data[type]);
jQuery("form#acform
input[name=data]").val(data[type]);
_uPostForm('socail_details',{type:'POST',url:'/index/778', data:{'m':'3', 'vi_commID': '', 'catPath': ''}});
});
}
12
482 ЧДТУ21807-0112 01
function logoutSocial() {
console.log('delete cookie');
delete_msg_cookie();
jQuery.getScript('//sys000.ucoz.net/cgi/uutils.fcg?a=soc_comment_clear_data&site=etwego',
function(){window.location.reload();});
}
function utf8_to_b64( str) {
return window.btoa(encodeURIComponent( escape( str )));
}
function b64_to_utf8( str) {
return unescape(decodeURIComponent(window.atob( str )));
}
function getCookie(c_name) {
var c_value = " " + document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
var delete_msg_cookie = function() {
console.log('delete_msg_cookie');
document.cookie = 'msg=;expires=Thu, 01 Jan 1970 00:00:01
GMT;';
13
482 ЧДТУ21807-0112 01
};
function preSaveMessage() {
var msg = jQuery("form#acform textarea").val();
if (msg.length > 0) {
document.cookie = "msg="+utf8_to_b64(msg)+";";
//path="+window.location.href+";
}
}
(function() {
jQuery(document).ready(function() {
jQuery(".uf-tooltip a.uf-tt-exit").attr('href','/index/10');
console.log('ready - update details');
console.log('scurrent', window.scurrent);
if (typeof(window.scurrent) != 'undefined' && scurrent
> 0 && data[scurrent]) {
jQuery("#postFormContent").html('<div
style="width:100%;text-align:center;padding-top:50px;"><img alt="" src="/.s/img/ma/m/i3.gif" border="0" width="220"
height="19" /></div>');
jQuery("form#socail_details
input[name=social]").val(scurrent);
jQuery("form#socail_details
input[name=data]").val(data[scurrent]);
updateSocialDetails(scurrent);
}
jQuery('a#js-ucf-start').on('click', function(event) {
event.preventDefault();
if (scurrent == 0) {
window.open("//sys000.ucoz.net/cgi/uutils.fcg?a=soc_comment_auth",'SocialLoginWnd','width=500,height=350,resizable=yes
,titlebar=yes');
}
14
482 ЧДТУ21807-0112 01
});
jQuery('.uauth-small-links a.login-with').on('click',
function(event) {
event.preventDefault();
var classList = jQuery(this).attr('class').split(' ');
var social = providers[classList[1]];
if (typeof(social) != 'undefined' &&
social.enabled == 1) {
if (social.handler) {
social.handler(social);
} else {;
//unetLoginWnd
var newWin =
window.open(social.url,"_blank",'width=640,height=500,scrollbars=yes,status=yes');
}
}
});
});
})(jQuery);
</script>
</div>
Код reCaptcha:
<script type="text/javascript">
if (window.grecaptcha) {
$('.g-recaptcha').each(function (index, element) {
15
482 ЧДТУ21807-0112 01
if ($(element).is(':empty') && grecaptcha.render) {
grecaptcha.render(element, {
sitekey:element.getAttribute('data-sitekey'),
theme:element.getAttribute('data-theme'),
size:element.getAttribute('data-size')
});
}
});
}
</script>
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Швидко і легко створюємо, програмуємо, шліфуємо та розкручуємо web-
сайт: [навч. посібник] / за ред. Ю.М. Алексєєва. - М.: Кращі книги, 2003. - 426
с. Шифр РНБ: 2003-7/1381
2. Зельдман Д. Web-дизайн за стандартами / Джеффрі Зельдман; Пров. з
англ. Г. П. Ковальова. - М.: НТ Прес, 2007. - 440 с. : іл. – (Школа Web-
майстерності).
3. Лещев Д. В. Створення інтерактивного web-сайту: навч. курс / Д. Лещов. -
СПб. та ін: Пітер: Пітер принт, 2009. - 543 с. Шифр РНБ: 2003-7/3624
4. Максимов, В. В. Технології створення Web-сайтів/В.В. Максимов, А.В.
Алексєєв С.Д. Литкін; Якут. держ. ун-т ім. М.К. Аммосова, Центр дистанцій.
освіти ЯГУ "Сітім", Прожект Хармонії, Інк. - Якутськ: Якут. філ. Вид-ва ЗІ
РАН, 2007. - 44 с. Шифр РНБ: 2003-4/18815
5. Миколаїв Д. Гаряча десятка помилок Web-майстра. // Світ Internet. - 2010.
- N6.
6. Орлов Л. В. Як створити та "розкрутити" web-сайт в Інтернет / Леонід
Орлов. - М.: Альянс-Прес, 2008. - 511 с.
7. Фйо, А. Рентабельний WEB-дизайн: 7 етапів створення Web-сайтів, що
окупають ваші інвестиції / Ані Фйо; пров. з англ. [Л.Ю. Пантюхін]. - М.:
Кудіц-образ, 2012. - 336 с. Шифр РНБ: 20012-3/970
8. Гома Х. UML. Проектування систем реального часу паралельних та
розподілених додатків: Пер. з англ. – М.: ДМК Прес, 2011. – 704 с.: іл. (Серія
«Об'єктно-орієнтовані технології у програмуванні»).
9. Веллінг Л., Томсон Л. Розробка Web-додатків за допомогою PHP та
MySQL. 2-ге вид. СПб.: Вільямс, 2008. 409 с.
10. Грекул В.І., Денищенко Г.М., Коровкіна Н.Л. Проектування
інформаційних систем. М: Інтернет-університет інформаційних технологій,
2009. 304 с.
11. Басюк Т.М. Принципи побудови системи аналізу та просування
Арк.
ЧДТУ 221807.007ПЗ 68
Зм н. Арк. № докум. Підпис Дата
інтернетресурсів / Т.М. Басюк // Вісник Нац. ун-ту “Львівська політехніка”
“Комп’ютерні науки та інформаційні технології”. – 2012.– № 784. – С.43–48.
12. Трофімов Ст Ст (авторський колектив за ред.) Інформаційні технології.
Підручник Юрайт, 2011. - c101-104/
13. Одинцов Б.Є. Інформаційні системи управління ефективністю бізнесу:
підручник та практикум для бакалаврату та магістратури Б. Є. Одинцов. - М.:
Видавництво Юрайт, 2015. - 206 с.
14. Павліш В.А. Основи інформаційних технологій та систем. Підручник
В.А. Павліш, Л.К. Гліненко, Н.Б. Шаховська. Львів: Видавництво Львівської
політехніки, – 2018. – 620 с.
15. Буйницька О.П. Інформаційні технології та технічні засоби навчання.
Навчальний посібник рекомендовано МОН України В-во: ЦНЛ. - 2018. - 240 с.
16. Тітенко, С. В. Моделювання спеціалізованих інформаційних об'єктів в
універсальних системах управління Web-контентом / С. В. Тітенко c. 332-341
17. Вісник Східноукраїнського національного університету імені Володимира
Даля – 2012. – №8 (179). Ч.2. - С. 235-239.
18. Марті Холл, Лері Браун. Програмування для Web. М: Вільямс, 2002. -
1264 с.
19. Колісніченко Д. Н. Самовчитель PHP 5 – СПб.: Наука та Техніка, 2007. –
640 с.
20. Методи та засоби мультимедійних інформаційних систем : навч. посіб. /
Т. М. Басюк, П. І. Жежнич; Нац. ун-т "Львів. політехніка". – Львів : Вид-во
Львів. політехніки, 2015. – 426 c. – Бібліогр.: с. 413-416.
21. Бойков.В., Савінков В.М. Проектування баз даних інформаційних систем
М. Світ 1997 - с. 234-262
22. Бердтіс А. Структури даних. - М: Статистика, 1974, - 408 с. Горбань О.М.,
Бахрушін В.Є. Основи теорії систем та системного аналізу. – Запоріжжя, ГУ
"ЗІДМУ", 2004, ISBN 966-8227-23-9
23. Буров Є. В. Комп'ютерні мережі: підручник / Євген Вікторович Бурів. -
Арк.
ЧДТУ 221807.007ПЗ 69
Зм н. Арк. № докум. Підпис Дата
Львів: "Магнолія 2006", 2010. - 262 с. ISBN 966-8340-69-8
24. Хендерсон К. Microsoft SQL Server: структура та реалізація. Професійний
посібник / Кен Хендерсон. - с. 152 - 154
25. Хенік Б. HTML та CSS. Шлях до досконалості (HTML та CSS: The Good
Parts)/Б. Хенік.
26. Фленган Д. JavaScript. Детальний посібник (JavaScript. The Definitive
Guide)/ДевідФленган.
27. Композиція. Тотальний контроль – Наталія Синєпупова 2019, с. 40 - 73
28. Девід Сойєр Макфарланд. Розробка сайтів на JavaScript та jQuery.
Вичерпне керівництво - С.: O'Reilly, 2012. - 587 c.
29. Бретт Маклафлін. Об'єктно – орієнтований аналіз та проектування - С.:
O'Reilly.258 c
30. Інформаційні системи та технології в економіці: навч. / Лойко В.І.,
Семенов М.І., Трубілін А.І., під. ред. проф. Лойко В.І.; 2-ге із- е М.: Изд.
«Фінанси та статистика». - 2015. - 416с. ISBN 5-279-02605-0
31. Гайдамакін Н.А. Автоматизовані інформаційні системи, бази та банки
даних / М.: Геліос АРВ, 2018. - 368 с.
32. Халупко І.С., Карапетян А.Р. Порівняльний аналіз сучасних технологій
розробки сайтів. Збірник тез доповідей студентської науково-практичної
конференції ЧДТУ : 27–30 квітня 2020 р. [Електронний ресурс] / [упоряд.
Мельник І. В.] ; М-во освіти і науки України, Черкас. держ. технол. унт. –
Черкаси : ЧДТУ, 2020. С. 21.
33. Карапетян А.Р., Халупко І.С. Аналіз сучасних технологій розробки
сайтів// Тези доповідей VIІІ Міжнародної науково-технічної конференції
«Проблеми інформатизації» (м. Черкаси – м. Баку – м. Бельсько-Бяла – м.
Харків, 2020 р. 26-27 листопада 2020). – С. 99.
Арк.
ЧДТУ 221807.007ПЗ 70
Зм н. Арк. № докум. Підпис Дата
ІНТЕРНЕТ ДЖЕРЕЛА
34. Cайт веб-студії Brainlab [Електронний ресурс]. – Режим доступу:
https://brainlab.com.ua/uk/glavnaya
35. Сайт веб-студії WhiteWeb [Електронний ресурс]. – Режим
доступу: https://www.whiteweb.ua/uk
36. Cайт веб-студії Web Building [Електронний ресурс]. – Режим
доступу: https://webbuilding.com.ua/ukr/about
37. Cайт веб-студії Vintage Web Production [Електронний ресурс]. –
Режим доступу: https://vintage.com.ua
38. uCoz База Знань [Електронний ресурс]. - Режим доступу:
https://www.ucoz.ru/help/
ПРОГРАМНІ ЗАСОБИ
1. Microsoft 365 © Microsoft Inc., 2022.
2. CMS uCoz., 2022.
Арк.
ЧДТУ 221807.007ПЗ 71
Зм н. Арк. № докум. Підпис Дата