Проектування та створення web-орієнтованої інформаційної системи приватного підприємства «Науково-виробничий центр «РЕПРОДУКТИВНЕ ЗЕРНО»»

Чінківський, Станіслав Андрійович

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

Title:	Проектування та створення web-орієнтованої інформаційної системи приватного підприємства «Науково-виробничий центр «РЕПРОДУКТИВНЕ ЗЕРНО»»
Authors:	Дяченко, Петро Васильович Чінківський, Станіслав Андрійович
Keywords:	WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ПІДПРИЄМСТВА;ПРЕДМЕТНА ОБЛАСТЬ;ЗАДАЧІ;ПРОГРАМНІ ЗАСОБИ;ПОШУК;WEB-САЙТ.
Issue Date:	16-Jun-2022
Abstract:	Майже у кожної сфери бізнесу сьогодні повинен бути сайт, тому що, всі шукають потрібні послуги і інформацію в інтернеті. Тема даної кваліфікаційної роботи присвячена проектуванню і створенню web-орієнтованої інформаційної системи для агропідприємства. У сфері послуг агропідприємств web-сайти відіграють важливу роль, оскільки в умовах жорсткої конкуренції, необхідно завоювати свого клієнта, надавати всю потрібну інформацію про діяльність своєї компанії, так щоб після перегляду web-сайту потенційний клієнт не виявив бажання розглядати послуги конкурентів. Метою кваліфікаційної роботи бакалавра є підвищення ефективності, розширення функціональних можливостей агропідприємства шляхом проектування та створення web-орієнтованої інформаційної системи для підприємства.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/8911
Appears in Collections:	122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування)

Files in This Item:

File	Description	Size	Format
Пояснювальна записка_Чінківський Станіслав_КНС-2001_2021-2022.pdf Restricted Access		3.03 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

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

Факультет інформаційних технологій і систем

Кафедра комп’ютерних наук та системного аналізу

Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітній ступінь)

на тему «Проектування та створення web-орієнтованої інформаційної
системи приватного підприємства Науково-виробничий центр
«РЕПРОДУКТИВНЕ ЗЕРНО»»

Виконав: студент 4 курсу, групи КНС-2001
спеціальності 122 «Комп’ютерні науки»
(шифр і назва напряму підготовки, спеціальності)
Освітня програма – «Комп’ютерні науки та
прикладне програмування»

Чінківський Станіслав Андрійович
(прізвище та ініціали)
Керівник Дяченко П.В.
(прізвище та ініціали)
Рецензент Бездоленко К.Е.
(прізвище та ініціали)

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

Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітній рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки

ЗАТВЕРДЖУЮ
Завідувач кафедри КН та СА
_______________ Триус Ю.В.
«____» _____________ 2022 р.

ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Чінківському Станіславу Андрійовичу
(прізвище, ім‘я, по батькові)
Проектування та створення web-орієнтованої інформаційної системи
приватного підприємства «Науково-виробничий центр «РЕПРОДУКТИВНЕ
1. Тема роботи ЗЕРНО»»

Керівник роботи Дяченко П.В., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «7» лютого 2022 р. №45/04.
2. Строк подання студентом роботи до 16 червня 2022 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з наукової практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Обгрунтування необхідності створення web-орієнтованої інформаційної системи
приватного підприємства НВЦ «Репродуктивне зерно».
4.2. Огляд аналогів існуючих web-сайтів.
4.3. Задача створення інформаційного ресурсу.
4.4. Вибір програмних засобів.
4.5. Розробка і тестування інформаційного ресурсу.
Висновки.
5. Пере лік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 22091-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.

5.5. Презентація у вигляді 19 слайдів.
6. Консультанти розділів роботи
Прізвище, Підпис, дата
Розділ ініціали та посада
завдання видав завдання прийняв
консультанта

7. Дата видачі
завдання 11.01.2022

КАЛЕНДАРНИЙ ПЛАН
№ Строк виконання
Назва етапів кваліфікаційної роботи бакалавра Примітка
з/п етапів роботи
В1и дача завдання на кваліфікаційну роботу
11.01.2022 Виконано
бакалавра.
А2н аліз літературних джерел, об’єкту та предмету
до 13.02.2022 Виконано
дослідження.
Н3а писання теоретичного розділу кваліфікаційної
до 04.03.2022 Виконано
роботи бакалавра.
Н4а писання аналітичного розділу (аналіз об’єкту й
до 01.04.2022 Виконано
предмету дослідження).
Н5а писання практичних розділів й висновків по
до 01.05.2022 Виконано
роботі.
П6е редзахист кваліфікаційної роботи бакалавра на
01.06.2022 Виконано
засіданні випускової кафедри.
П7о дання роботи завідувачу кафедри. до 16.06.2022 Виконано
З8ах ист кваліфікаційної роботи бакалавра. 16.06.2022 Виконано

Студент _____________________________ Чінківський С. А.
(підпис)
Керівник роботи ____________________________ Дяченко П. В.
(підпис)

3

РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 55 с., 33 рис., 15 використаних
джерел.
Актуальність теми. Майже у кожної сфери бізнесу сьогодні повинен бути
сайт, тому що, всі шукають потрібні послуги і інформацію в інтернеті. Тема даної
кваліфікаційної роботи присвячена проектуванню і створенню web-орієнтованої
інформаційної системи для агропідприємства. У сфері послуг агропідприємств web-
сайти відіграють важливу роль, оскільки в умовах жорсткої конкуренції, необхідно
завоювати свого клієнта, надавати всю потрібну інформацію про діяльність своєї
компанії, так щоб після перегляду web-сайту потенційний клієнт не виявив бажання
розглядати послуги конкурентів.
Лейдинг – це будь-яка сторінка, яка закликає користувача виконати певні дії,
наприклад, підписатися на розсилку, купити квиток на конференцію, запросити
кошторис або просто завантажити презентацію.
Для створення сайту я використовував в данній роботі використовується мова
розмітки гіпертексту HTML, каскадні таблиці стилів CSS у поєднанні з мовами
програмування JavaScript і PHP.
Результатом виконання роботи є створений сайт агрофірми інформаційно-
рекламного характеру, основна задача якого, заохочення бажаючих пройти
навчальний курс для отримання водійського посвідчення на категорії А і А1. На
сайті наявна вся інформація про мотошколу і про послуги, які надає. Для сайту є
характерним простота і лаконічність, характене написання в стилі мінімалізму,
відсутність зайвої інформації, відсутність непотрібних функцій.
Створений лейдинг пейдж являє собою корисний і простий в розробці web-
сайт, який може стати в нагоді усім підприємствам які працюють з людьми. На web-
сайті крім інформації про послуги навчання на категорії А і А1, також є додаткові
послуги в підборі мототехніки і мотоекіпіровки. Сайт адаптований під телефони,
планшети і монітори різних розмірів, web-сайт має приємний і водночас простий
дизайн, для максимального комфорту використання.
4

Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра
є підвищення ефективності, розширення функціональних можливостей
агропідприємства шляхом проектування та створення web-орієнтованої
інформаційної системи для підприємства. Для досягнення поставленої мети в
дослідженні необхідно вирішити такі задачі:
− виконати огляд методів та засобів для розробки інформаційної системи
підприємства;
− провести порівняльний аналіз існуючих аналогів інформаційних систем для
підприємств;
− обрати програмно-технічні засоби для реалізації задачі;
− спроектувати та створити інформаційну систему підприємства;
− провести адаптацію інформаційної системи під телефони, планшети і
монітори різних розмірів;
− провести тестування розробленої системи.
Об’єкт дослідження: методи та засоби розробки web-орієнтованої
інформаційної системи.
Предмет дослідження: web-орієнтована інформаційна система приватного
підприємства.
Методи дослідження. В роботі застосовувалися вивчення практичних
розробок, аналіз існуючих сайтів приватних підприємств.
Перелік ключових слів: УПРАВЛІННЯ, WEB-ОРІЄНТОВАНА
ІНФОРМАЦІЙНА СИСТЕМА ПІДПРИЄМСТВА, ПРЕДМЕТНА ОБЛАСТЬ,
ЗАДАЧІ, ПРОГРАМНІ ЗАСОБИ, ПОШУК, WEB-САЙТ .
5

ABSTRACT
Master's qualifying work includes: 55 p., 33 rites, 15 sources used.
Actuality of theme. There should be a website in almost every area of business
today, so everyone is looking for the necessary services and information on the Internet.
The topic of this qualifying work is devoted to design and creation. web-oriented
information system for motorcycle school. In the field of motorcycle driving schools,
websites play an important role if, in conditions of fierce competition, you need to win
your customer, provide all the necessary information about the activities of your
motorcycle school, so that after browsing the website of potential customers do not want
competitors.
Leading - any page that encourages the user to perform certain actions, such as
subscribing to a newsletter, buying at a conference, asking for a price, or simply
downloading a presentation.
To create the site, I used HTML hypertext markup language, cascading CSS style
sheets in combination with JavaScript and PHP programming languages.
The result of the work is the creation of the site of the motorcycle school of
information and advertising nature, the main task of which is to encourage those wishing
to take a training course to obtain driving training in categories A and A1. The site has all
the information about the motorcycle school and the services it provides. The site is
characterized by simplicity and conciseness, the nature of writing in the style of
minimalism, small information, unnecessary features.
The created leadership page is useful and easy to develop a web-site that can be
useful to all businesses that work with people. On the website, in addition to information
about training services of categories A and A1, there are also additional services in the
selection of motorcycles and motorcycle equipment. The site is adapted for phones, tablets
and monitors of different sizes, the website has a nice and at the same time simple design
for maximum comfort.
Purpose and tasks of research. The purpose of the bachelor's qualification work is
to increase efficiency, expand the functionality of driver training courses by designing and
6

creating a web-oriented information system for motorcycle schools. To achieve this goal
in the study it is necessary to solve the following tasks:
− review the methods and tools for developing a motorcycle school information
system;
− to conduct a comparative analysis of existing analogues of information systems for
motorcycle schools;
− choose software and hardware for the task;
− to design and create an information system of a motorcycle school;
− to adapt the information system for phones, tablets and monitors of different sizes;
− test the developed system.
Object of research: web-oriented information and reference systems.
Subject of research: web-oriented information system of motorcycle school.
Research methods. The study of practical developments, analysis of existing sites
of motorcycle schools were used in the work..
The key words: MANAGEMENT, WEB-ORIENTED INFORMATION SYSTEM
OF MOTOR SCHOOL, SUBJECT AREA, TASKS, SOFTWARE, SEARCH, WEB SITE.

7

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

БД – база даних
ІС – інформаційна система
ПК – персональний комп'ютер
СКБД – система керування базами даних
ЕОМ – електронно-обчислювальна машина
ПЗ – програмне забезпечення
ІСК – інформаційна система керівництва
ІСУ – інформаційні системи управління
COT – системи обробки транзакцій
CRM – системи управління взаємовідносинами з клієнтами
CMS – системи керування контентом
API – прикладний програмний інтерфейс
PHP – мова програмування
SQL – мова запитів

8

ЗМІСТ
ВСТУП 10
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ 12
1.1 Класифікація інформаційних систем 12
1.1.1 Фізичний базис інформаційних систем 12
1.1.2 Системи обробки транзакцій (COT) 13
1.1.3 Інформаційні системи управління (ІСУ) 13
1.1.4 Інформаційна система керівництва (ІСК) 14
1.1.5 CRM-системи 15
1.2 Контроль і безпека ІС 15
1.3 Особливості веб-орієнтованих інформаційних систем 17
1.4 Вимоги до системи 22
2 ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ 23
2.1 Критерії вибору CMS 23
2.2 Розробка структури веб-орієнтованої інформаційної системи 27
2.3 Метод MindMap 27
2.4 Метод Content Brick 29
2.4.1 Mainpage First vs Structure First 29
2.4.2 Візуалізація блоків вмісту 31
2.4.3 Цілісний вигляд структури 32
3 РЕАЛІЗАЦІЯ ВЕБ-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ СИСТЕМИ 33
3.1 Розробка програмної структури сайту 33
3.2 Розробка розмітки сайту 34
3.3 Розробка головної сторінки 36
3.4 Під’єднання API сервісу доставки 39
3.5 Під’єднання API сервісу оплати 41
3.6 Зворотній зв’язок 42
3.7 Сторінка калькулятор 44
4 ТЕСТУВАННЯ І БЕЗПЕКА СИСТЕМИ 46
4.1 Створення замовлення 46
4.2 Тестування безпеки 47
4.3 Резервування 49
4.4 Безпека розрахунків 50
ВИСНОВКИ 53
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 54

9

ВСТУП
Інформаційні системи щодня зустрічаються у нашому житті – вдома, на
роботі, на вулиці, у транспорті. І сьогодні лише уявити життя без таких систем є
досить складно! Адже інформаційні системи – це наші так звані помічники. Тому в
сьогоденні яка-небудь організація не може повноцінно займатися будь-якою
діяльністю без інформаційно-аналітичних систем. Один із найпростіших прикладів
повсякденної інформаційної системи можна назвати телефонним довідником, де
вказані номери, а також прізвище, ім'я, по батькові абонентів.
Під час запровадження цифровізації на підприємствах активно
використовують інформаційні системи управління. За допомогою таких систем
життя людства істотно полегшується, це величезна і неоціненна допомога, адже
одна або кілька людей не можуть пам'ятати або на паперових носіях дані, які в
комп'ютері займають терабайти оперативної пам'яті. Однак просто зберігати таку
інформацію – це мало, її потрібно систематизувати та адаптувати для зручного
використання [1, 2].
Всі інформаційні системи можна подати у вигляді інформаційного довідника
та інформаційної бази даних. Кожна з цих систем може підрозділятися на інші з
більш конкретної спрямованістю, наприклад, за призначенням – медицина,
машинобудування тощо. Таким чином, у кожної сфери діяльності є своя
інформаційна система управління.
Головну функцію, яку переслідує абсолютно кожна така система – це
збирання, зберігання та пошук інформації. Велика кількість інформації нерідко
ускладнює пошук, для цього потрібно багато часу та зусиль. Інформаційні системи
управління – це головний помічник у пошуку необхідної інформації. Це дуже
швидко, досить зручно та дуже практично. До того ж, інформація в електронному
вигляді найближчим часом замінить паперові документи, оскільки поводитися з
електронними документами – це набагато простіше, швидше та економічно.
Своєрідними та вузько-направленими інформаційними системами на даний
час все частіше забезпечуються і сфери агровиробництва, продажів сільсько-
10

господарських товарів, менеджменту та обліку цього сегменту бізнесу. І звичайно
такі системи повинні бути веб-орієнтовані, тому що користувачі їх зазвичай
розподілені і повинні мати доступ до них нон-стоп.
В залежності від конкретної сфери діяльності та вимог до функціоналу такі
веб-орієнтовані інформаційні системи можуть бути потужними, або ж мати своєму
складі тільки веб-сайт інформаційно-довідникового характеру.
Саме тому розробка такої веб-орієнтованої інформаційної системи для
підприємств малого бізнесу в сфері агро-інженерії є актуальною задачею.
Метою роботи є проектування та створення web-орієнтованої інформаційної
системи приватного підприємства «Науково-виробничий центр
«РЕПРОДУКТИВНЕ ЗЕРНО»» для забезпечення діяльності в інформаційній сфері.
Задачі, які потрібно вирішити:
– аналіз аналогічних розробок та систем;
– структурне проектування;
– розробка першого релізу веб-орієнтованої інформаційної системи;
– тестування та впровадження.
Робота містить 55 сторінки основного тексту, 33 рисунки, 15 посилань.

11

1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Класифікація інформаційних систем
Інформаційні системи (ІС) мають вирішальне значення для управління
продуктивністю. Інформаційні системи дуже корисні при виявленні, вимірюванні та
моніторингу показників ефективності та порівнянні їх з цілями та орієнтирами. Це
тема, яка пронизує усі сфери функціонування інформаційних систем.
Інформаційні системи є основою сучасної компанії. ІС забезпечують
комунікацію, продажі та маркетинг, управління ланцюгами поставок, прийняття
рішень, управління співробітниками, вдосконалення процесів тощо. Колись
розглядалися як інструмент для підвищення ефективності, а в даний час вважаються
важливим джерелом конкурентних переваг.
Інтернет проти інтрамережі. Термін «Інтернет» описує глобальну мережу
комп'ютерів і пристроїв, які підключаються за допомогою Інтернет-протоколу (IP).
«Інтрамережа» відноситься до підмножини Інтернету, яка заблокована від
спільного доступу і доступна тільки для конкретної організації. Наприклад,
університет може мати "приватний" веб-портал, де студенти можуть увійти за
допомогою імені користувача та пароля, а потім переглянути свої розклади,
отримати доступ до студентських дощок оголошень або завантажити свої завдання
[1, 3].
1.1.1 Фізичний базис інформаційних систем
Мережі. Зазвичай це група комп'ютерних систем, які спілкуються через
фізичні та /або бездротові з'єднання. Безпроводовий маршрутизатор, який ви можете
мати вдома, підключається до Інтернету за допомогою фізичного кабелю, а потім
дозволяє комп'ютерам вашого будинку підключатися через бездротову мережу, яку
він поширює. Бездротові технології є областю технологій, яка швидко розвивається.
Як випливає з назви, вони відносяться до зв'язку без кабелів. Більш того, ви,
12

ймовірно, регулярно взаємодієте з бездротовими технологіями. Ви можете
підключити навушники, фітнес-трекери або інші пристрої до смартфона через
Bluetooth; Автомобіль, на якому ви керуєте, може використовувати радіочастотні
ідентифікатори (RFID), вбудовані в окремі компоненти для відстеження історії
обслуговування та ремонту. Транспортна компанія, яка доставляє посилки додому,
ймовірно, використовує різні ці технології для відстеження пакетів і моніторингу
продуктивності.
1.1.2 Системи обробки транзакцій (COT)
Це системи, що використовуються оперативним персоналом для збору даних і
підвищення ефективності процесів, що підвищує точність і своєчасність інформації.
Наприклад у супермаркеті всі покупки на касі будуть відскановані, а потім буде
виставлено загальний рахунок, який автоматично розраховується. Це класичний
приклад COT. Зібрані дані допомагають супермаркету отримати точну інформацію
про виручку. COT також використовуються для відстеження запасів і розуміння
структури покупок.
Великі роздрібні торговці тепер використовують програмне забезпечення
«геоаналітики», яке відстежує рухи покупців у великому магазині, відстежуючи
сигнал Wi-Fi смартфона від різних маршрутизаторів. Це ще один приклад COT.
Starbucks починає використовувати в своїх магазинах високотехнологічні
кавові машини, які передають інформацію про використання, сервіс і навіть
переваги клієнтів через хмару – це приклади використання обробки транзакцій,
великих даних і бездротових технологій.
1.1.3 Інформаційні системи управління (ІСУ)
Це системи, які використовуються для прийняття структурованих рішень, які
допомагають менеджерам аналізувати ефективність і контролювати бізнес. Вони
спираються в основному на агреговану внутрішню інформацію про існуючі операції
компанії. Ця агрегована інформація, можливо, була передана з COT організації. ІСУ
13

допомагає менеджеру супермаркету стежити за рівнем запасів і визначати вимоги до
повторного замовлення; розуміти рентабельність продукту, щоб визначити, як
виділити виробничі площі і яку продукцію зберігати на складі, а також скласти
штатний розпис виходячи з періодів зайнятості [2, 4].
Сучасна ІСУ може отримати доступ до різних типів даних, включаючи
використання великих даних і представлення цієї інформації в режимі реального
часу за допомогою візуалізації. Компанія електронної комерції може створити ІСУ
для менеджера з продажу, який відстежує ключові показники ефективності (KPI),
такі як «співвідношення відвідувань сайту для покупок», «стан регіональних
продажів» або «продаж по каналах».
1.1.4 Інформаційна система керівництва (ІСК)
Це системи, які допомагають топ-менеджерам аналізувати ефективність
організації, бачити тенденції і приймати рішення з дуже узагальненою картиною
бізнесу. ІСК не тільки використовує внутрішню інформацію, але і надає зовнішню
інформацію, таку як інформація, що стосується ринків, на яких працює компанія.
Сучасні ІСК іноді називають «інформаційною панеллю», де важливі KPI
представлені діаграмами, таблицями та іншими графічними інструментами, які
допомагають менеджеру візуалізувати продуктивність [4].
На прикладі з супермаркетом: старший менеджер може використовувати
інформаційну панель управління продуктивністю, яка порівнює продажі або
прибутковість в різних регіонах, використовуючи діаграму, що показує
продуктивність з плином часу. Ця інформація, наприклад, може підтримати
стратегічні плани розширення, які компанія може розглянути. ІСК також може
відображати заголовки новин компанії із зовнішніх джерел, ціну акцій компанії та
резюме відгуків клієнтів у режимі реального часу.

14

1.1.5 CRM-системи
CRM-система – це програмне забезпечення, яке допомагає компаніям
централізувати взаємодію з клієнтами, історію покупок, історію продажів тощо в
одній базі даних. Це допомагає команді з продажу компанії стати більш
ефективною, покращувати комунікацію, автоматизувати процеси та оцінювати
показники продажів.
Роздрібна компанія може використовувати дані CRM-системи та картки
лояльності клієнтів для автоматичного надсилання клієнтам електронних листів
клієнтам про конкретні пропозиції, які можуть їх зацікавити, або для проведення
цільової рекламної кампанії в соціальних мережах [1, 5].
1.2 Контроль і безпека ІС
Фізичний контроль. Це елементи управління, які перешкоджають фізичному
доступу сторонніх осіб до комп'ютерних систем. Замкнені двері, ідентифікатори
зображень і камери безпеки є прикладами фізичного контролю.
Логічне керування. Коли хтось отримує фізичний доступ до комп'ютерної
системи, наступним рівнем безпеки буде логічний контроль. Паролі та права
доступу є прикладами елементів логічного керування.
Адміністративний контроль. Адміністративний контроль – це контроль,
який призначений для впливу на поведінку людей по відношенню до систем і
практики інтелектуальної власності. ІТ-навчання та сертифікація, впровадження
нових процедур та дисциплінарної політики є прикладами адміністративного
контролю.
Антивірусне програмне забезпечення. Більшість користувачів комп'ютерів
знайомі з вірусами: програмою, спеціально розробленою для нанесення шкоди
комп'ютеру або даним. Зловмисне програмне забезпечення - це загальна назва
групи, яка включає віруси, трояни, хробаків тощо. Хоча це складна тема, яка швидко
розвивається, ідея антивірусного програмного забезпечення проста: це програмне
забезпечення, призначене для запобігання, виявлення та видалення вірусів.
15

Брандмауер. Цей термін вперше був використаний для опису фізичної стіни в
будівлі, яка містить вогонь. У IC це тип управління, який забороняє доступ до
комп'ютера або комп'ютерної мережі. Брандмауер використовується для керування
потоком даних між зовнішнім джерелом, таким як Інтернет, і внутрішньою мережею
для захисту від зловмисних загроз. Це досягається за допомогою правил контролю
доступу, які визначають вихідні та цільові IP-адреси, а також порти, що
використовуються для підключення. На даний час будь-яка компанія, ймовірно,
використовує брандмауер, щоб тримати хакерів подалі від своїх комп'ютерних
мереж, і якщо використовується операційна система Windows, знайте, що там
увімкнуто функціональність брандмауера. Додатковий захист може бути досягнутий
за допомогою системи виявлення вторгнень (IDS) і системи запобігання вторгненню
(IPS), яка перевіряє пакет даних, що потрапляє в мережу, і порівнює його зі списком
затверджених і відомих сигнатур даних, щоб переконатися, що дані, що містяться в
пакеті, не є небезпечними або шкідливими.
Перевірка. Перевірка – це широка категорія контролю, яка використовується
для забезпечення точності, а не безпеки даних. Коли новий користувач вказує свій
день народження у веб-формі, то зазвичай пропонується вибрати дату, місяць і рік зі
спадного меню або натиснути на інструмент календаря. Більше того, ймовірно, не
дозволяється перейти до наступного кроку заповнення форми, якщо залишити поле
дня народження порожнім. Нижче наведено два приклади перевірки: перший
елемент керування змушує вас вводити правильну дату, а другий гарантує, що поле
не залишиться пустим.
Шифрування. Це контроль, за допомогою якого дані кодуються таким чином,
що робить їх надзвичайно важкими, щоб розшифрувати, а потім використовувати ці
дані, якщо потрібно отримати доступ до них. Флеш-накопичувачі часто
поставляються з програмним забезпеченням для шифрування; це не запобігає втраті
флешки, але якщо вона потрапить не в ті руки, шифрування запобігає
несанкціонованому доступу. Безпека зворотного виклику - це більш старий тип
управління, який з'явився в епоху комутованих мереж, коли користувачі
16

комп'ютерів часто використовували фізичну телефонну лінію для доступу в Інтернет
[2, 6].
1.3 Особливості веб-орієнтованих інформаційних систем
Зберігання і обробка інформації в мережі Інтернет відбувається за
допомогою так званих «веб-орієнтованих» інформаційних систем, що зазвичай
використовуються також в середині локальної мережі. Веб-орієнтовані ІС
побудовані з використанням веб-застосунків – допоміжних програмних засобів, що
призначені для автоматизованого виконання будь-яких дій на як на веб-серверах
(бекенд) так і на стороні користувача (фронтенд). При цьому в якості інтерфейсів
користувача у веб-застосунках використовують веб-браузери. До числа засобів
розробки веб-застосунків відносяться клієнт-серверні технології створення
програмних продуктів.
Процес створення веб-орієнтованих інформаційних систем фактично нічим
не відрізняється від написання коду інших програм. Таким чином кроки
проектування: визначення вимог, аналізу, реалізації, проектування, тестування
поширюються і на цей процес теж. При роботі веб-сайту, неважно з використанням
яких технологій він реалізований, користувач так аналогічно звичайній програмі,
вводить дані і зчитує інформацію, працює з вікнами і меню, зберігає дані на сервері і
отримує відповіді від нього. Проте є одна різниця, яка полягає в тому, що саме
програмне забезпечення працює не на комп’ютері користувача, а на віддаленому
сервері мережі, а доступ до даних можна отримати із будь-якої точки світу, де є
комп’ютерна мережа. З одного боку це зручно, а з іншого – з’являються певні
вимоги до програмного забезпечення, яке розробляється.
Основні характеристики веб-орієнтованих ІС:
1) надійність (відмово-стійкість);
2) багато-користувацький режим;
3) визначена швидкодія;
4) незалежність від операційної системи;
17

5) немає вимоги встановлення ПЗ користувача;
6) можливість розмежування доступу користувачів;
7) відносно малий об’єм самого застосунку;
8) портативність та мобільність.
Під надійністю цих ІС полягає розуміють те, що вони повинні працювати
надійно без збоїв. На даний час імовірність безвідмовної роботи комп’ютерних
інформаційних систем становить 99,999%. Це говорить про допустимість простою 8
хв. в рік. З іншої сторони, виникнення помилок в роботі ІС веде до нестабільної
роботи і може займати певний робочий час на виправлення, хоча користувачі в цей
час зможуть працювати віддалено з різних місць, де є доступ через Інтернет [2, 3].
В успішних веб-проектах веб системи обслуговують десятки користувачів на
секунду. Тому варто замислитися над оптимізацією швидкості виконання
застосунку на сервері та використовувати всі доступні методи підвищення
швидкодії.
Проблема швидкодії для будь-якої веб-орієнтованої ІС зараз не піднімається
в локальних мережах. Тут розробники програмного забезпечення не хвилюються
скільки даних передає і приймає їхня програма і фактично обмеження в 100 Мб/с в
сучасних застосунках не буде досягнуто. Для підвищення пропускної здатності
магістральних ліній для невеликих систем з якими працюють декілька десятків
користувачів прокладаються оптоволоконні кабелі, установлюється
високошвидкісна мережа. Однак, якщо в локальній мережі об’єми даних, які
передаються компенсуються швидкодією мережі, яка збільшується, то створеному
по такому принципу веб-додатку працювати буде неможливо, так як глобальні
канали хоч і модернізуються, але дуже повільно. Тому тут виникає питання оплати
трафіку, при якому кожний зайвий мегабайт даних буде оплачуватися з кишені
користувача.
Незалежність від операційної системи на боці клієнта (кросплатформеність)
означає, що веб-орієнтована ІС повинна працювати на всіх операційних системах. І
в цьому аспекті допомагає наявність сумісності з усіма барузерами за
18

замовчуванням, тому як вони в більшості працюють з одними і тими ж протоколами
комп’ютерних мереж [3, 5].
Поведінка будь-якої веб-орієнтованої ІС напряму залежить від зовнішніх і
внутрішніх умов.
До внутрішніх умов функціонування можна віднести такі фактори:
1) налаштування сервера;
2) тип сервера;
3) тип бази даних;
4) вміст змінних середовища;
5) вміст інформації на жорсткому диску сервера;
6) вміст самої бази даних.
Також особливістю веб-орієнтованих ІС є знаходження всієї програмної
частини на сервері в порівнянні з локальним ПЗ, де вона знаходиться на комп’ютері
кожного користувача. Так як є одна тільки логіка роботи програмного забезпечення
її набагато простіше розповсюджувати серед користувачів. Про старий спосіб
розповсюдження програми можна забути. По суті проблеми розповсюдження веб-
орієнтованої ІС не існує, адже доступ можна до неї можна отримати в будь-який
момент без прив’язки до місця, якщо вона доступна через Інтернет чи Інтранет.
На стороні користувача не потрібно встановлення ніяких програмних
продуктів. Все що йому потрібно, це просто запустити браузер і набрати в
адресному рядку URL відповідного серверного інтерфейсу. В наші дні браузер
являється стандартною програмою, яку користувач отримує при встановленні ОС.
Шукати браузер йому не потрібно, адже він уже є установлений на його машині, і по
суті, це все, що йому потрібно для його роботи.
Розмежування прав доступу до системи покликане як забезпечити
кібербезпеку системи так розділення можливостей роботи із веб-системою. Основні
вимоги висуваються такі:
Користувач не є адміністратором. Як правило, коли користувач встановлює
на своїй машині додаток, то йому доводиться брати на себе роль адміністратора
19

цього додатку. Йому потрібно встановлювати його, запускати, оновлювати,
вирішувати виникаючі проблеми. У випадку з веб-додатком, оскільки він
знаходиться на веб-сервері, користувачу не потрібно турбуватися про за ці всі
кроки. Йому і не потрібно перейматися про це. Користувач буде тільки щасливий
від цього. А це – в свою чергу, є ознакою хорошого веб-додатку. У випадку з
простим додатком такі можливості користувач навіть не мав можливості уявити.
Часто в ролі адміністратора виступає розробник ІС, хоча може бути також і
ІТ-відділ замовника. І хоча це створює додаткове навантаження на розробника, то
коли порівнювати вартість створення веб-додатку з вартістю утримання команди
спеціалістів, які займаються встановленням, підтримкою простих додатків на
машинах користувачів, то зразу можна побачити, що буде дешевше, не говорячи
уже про ефективність. З точки зору бізнесу, набагато вигідніше утримувати
невелику команду програмістів, які працюють в одному місці над одним додатком.
Веб-орієнтована інформаційна система не потребує нічого від користувача.
Веб-додатки, з яких побудована інформаційна система, не пред’являють ніяких
вимог до апаратної платформи. Фактично браузер якщо працює правильно, то
зазвичай додаток також [5, 6].
Такої проблеми як підтримки різних версій в минулому тепер не існує. Як
тільки виходить нова версія веб-додатку, то всі без виключень користувачі
получають її негайно. Так існує тільки одна копія додатку (додатків), яка доступна
на даний час і всі старі версії негайно зникають, а користувач навіть не помічає, що
у нього нова версія програми. Це також означає, що розробникам не потрібно
турбуватися про підтримку старих версій програм і про підтримку зворотної
сумісності.
Користувачу не потрібно завантажувати на свій комп’ютер весь веб-додаток
повністю, щоб почати з ним працювати. Навіть весь інтерфейс не обов’язково
завантажувати. Достатньо завантажувати ту його частину, яка необхідна для
виконання конкретної задачі. Завдяки цьому веб-додатки невеликі по об’єму,
швидко завантажувати і швидко відповідають на дії користувачів.
20

Так як на комп’ютері користувача нічого не встановлюється, то користувач
може працювати з додатком з будь-якого місця. Завантажити веб-додаток можна, з
дому, сидячи в офісі, і у всіх випадках він буде працювати аналогічно.
Як показує практика, веб-рішення все частіше інтегруються в інформаційну
інфраструктуру підприємства, стають його невід’ємною частиною. Принципи
швидкого доступу до інтернету, які добре зарекомендували себе прекрасно
працюють і для інтранет-систем. Windows-додатки, які володіють меншою
гнучкістю і більшою ресурсо-місткістю все частіше звільняють місце в локальній
мережі веб-додаткам, які надають не статичні сторінки HTML, а динамічні, тобто ті,
які керуються користувачами. Швидка публікація інформації на внутрішньому сайті
компанії і зчитування інформації з внутрішньої бази даних, доступ до всіх ресурсів
за допомогою звичайного веб-браузера, легке нарощування можливостей — все це
робить веб-додатки чудовим інструментом для роботи з інформацією та
платформою для базування ІС. Від Інтранет систем можливий перехід до екстранет-
систем, що забезпечує доступ до інформаційної структури підприємства віддалених
офісів, складів, магазинів, мобільних користувачів і реалізації видів комерційної
діяльності. Веб-системи – мають надзвичайну гнучкість, адже кожна сторінка, яка
передається клієнту, динамічно створюється на сервері у відповідності до
конкретного запиту користувача. Що передати, і як це оформити вирішує веб-
додаток. Веб-системи генерують користувацький інтерфейс в режимі онлайн.
Керівникам ІТ-служб треба чітко уявляти собі, для чого буде використовуватися
система, що розробляється, які проблеми вона покликана вирішувати, а також
обґрунтувати її необхідність. Лише при такому підході можна сказати, що веб-
додаток буде дійсно робочим інструментом. До того ж швидкий розвиток
Інтранет-систем в даний час стримується недостатньою пропозицією їх з боку
розробників. Більш ніж десятирічна історія Windows-додатків і мільйони доларів
інвестицій в них стримують компанії — виробники ПО від швидкого переходу до
веб-технологій. Вони повинні доповнювати вже наявні застосунки, розширюючи
21

кордони їх вживання. Лише тоді можна повною мірою оцінити переваги від спільної
роботи Windows і веб-систем в локальній мережі [7].
1.4 Вимоги до системи
Вимоги до інформаційної системи, що розробляється необхідно визначати з
функціоналу, який вина повинна забезпечувати. Оскільки «Науково-виробничий
центр «РЕПРОДУКТИВНЕ ЗЕРНО»» має профіль роботи сільсько-господарського
напрямку, займається дослідженням і виведенням нових сортів рослин та потребує
площадки в інтернеті для формування пропозицій для певного типу споживачів його
продукції, вимоги до веб-орієнтованої системи можуть бути такі:
Вхідні дані до проектування системи:
− Головне меню системи.
− Додаткові меню.
− Каталог продукції (назва, сорт, врожайність, об’єм на гектар).
− Калькулятор розрахунку об’ємів насіння.
− Корзина для замовлення товарів.
− Форма зворотного зв’язку.
− Розмежування доступу для різних користувачів.
− Система оплати товарів.
− Можливість обрання адресної доставки.
Система повинна функціонувати на базі клієнт-серверної технології у
багатокористувацькому режимі.
22

2 ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ
2.1 Критерії вибору CMS
Виходячи з огляду сучасних платформ електронної комерції фактично кожна з
них є системо керування контентом (content management system, CMS).
Збираючись створити сайт онлайн-комерції, кожен власник бізнесу стикається
з величезною кількістю платформ. І вибрати одну дуже складно, адже всі вони
мають схожі якості, переваги і недоліки [8].
Розробка веб-сайту для онлайн-комерції коштує досить дорого. Тому якщо є
можливість заощадити хоча б на платформі – її варто використати.
OsCommerce. Ця платформа для сайту онлайн-торгівлі існує досить довгий
час. Величезну кількість інтернет-магазинів у всьому світі використовують саме її. Її
переваги полягають у тому, що вона:
− безкоштовна;
− має відкритий вихідний код, що розширює можливості розробників і дозволяє
підлаштувати платформу під індивідуальні потреби;

Рисунок 2.1 – Представлення платформи OsCommerce
− надає безкоштовні шаблони інтерфейсів;
− має понад сім тисяч доповнень;
23

− надає просте управління покупцями та замовленнями в панелі
адміністрування.
PrestaShop. Досить популярна безкоштовна платформа для інтернет магазину,
на якій ґрунтується більшість веб-сайтів інтернет-торгівлі. Вона також має
відкритий вихідний код і проста у використанні та налаштуванні. Але також
PrestaShop має деякі важливі переваги:
− можливість підключати понад 2500 модулів;
− створення звітів та повноцінна аналітика трафіку та поведінки користувачів на
сайті;
− можливість якісної оптимізації для пошукових систем та впровадження
маркетингових рішень;
− технічна підтримка доступна прямо на панелі адміністрування.

Рисунок 2.2 – Представлення платформи PrestaShop

OpenCart. Платформа для інтернет магазину opencart може використовуватись
на будь-якому сервері, який підтримує PHP та MySQL. Вона дуже хороша для
пошукової оптимізації веб-сайтів і має відкритий вихідний код. За допомогою
OpenCart можна дуже просто управляти замовленнями, тому платформа ідеально
24

підходить для новачків. Також система пропонує різні методи сплати податків
відповідно до вашого місця розташування.

Рисунок 2.3 – Представлення платформи OpenCart

VirtueMart. Створена для роботи із системою керування веб-сайтами Joomla.
Простіше платформи для створення інтернет магазинів, напевно, не знайти.

Рисунок 2.4 – Представлення платформи VirtueMart
Вона була розроблена для того, щоб її користувачі змогли швидко розібратися
у функціоналі та самостійно налаштувати всі нюанси. VirtueMart також підтримує
25

кілька мов та валют і дозволяє розміщувати необмежену кількість товарів на веб-
сайті.
Magento. Багато хто вважає, що Magento найкраща платформа для створення
інтернет магазину. Вона була створена 10 років тому і за цей час завоювала довіру
розробників по всьому світу [9, 10]. Її переваги:
− відкритий вихідний код;
− стабільна та надійна структура, яка гарантує безперебійну роботу веб-сайту;
− вона проста в управлінні та налаштуванні;
− має масу функцій на кшталт пошуку, управління каталогами, виписки
рахунків тощо;
− всі функції можна налаштувати під власні потреби або замінити іншими.

Рисунок 2.5 – Представлення платформи Magento

CMS WordPress. Перш за все WordPress – повністю безкоштовна система
управління контентом. Всі файли та база даних сайту буде знаходитися у повній
власності та контролі адміністратора [8, 11].
− Наявність відмінної підтримки з боку розробників. Часто оновлюється ядро
системи, додаються нові модулі, віджети, вебхуки, посилюється безпека і
швидкість роботи. У мережі є відповіді на практично будь-які питання, які
можуть виникнути щодо цієї CMS.
26

− Тисячі плагінів. Один тільки репозиторій WordPress містить в собі більше ніж
1 000 000 безкоштовних плагінів для вирішення різних завдань. Якщо ж
недостатньо – є величезна кількість відмінних преміум плагінів на порталі
CodeCanyon.
− Один з найбільш гнучких і зручних рушіїв для пошукової оптимізації та
просування сайту (SEO). Безкоштовні плагіни, такі як “Yoast SEO” і “All in
One Seo Pack” вирішують всі завдання, щодо внутрішньої оптимізації сайту
− Плагін – “All in One Seo Pack”. Більше нема потреби прописувати в коді
необхідні для SEO мета-теги, плагіни все зроблять за вас. Залишиться тільки
правильно їх налаштувати.
− Зручність і простота адміністративної панелі. Адмін-панель WordPress вкрай
проста у використанні. Навіть люди без досвіду зможуть додавати нові
розділи, сторінки, новини, зображення. Для складних сайтів — адмінка легко
адаптується під будь-які завдання за допомогою плагіна – “Advanced Custom
Fields”. Якщо потрібно створити нову посадкову сторінку — не питання. Є
можливість створювати додаткові користувальницькі поля будь-якого змісту:
галереї, заголовки, тексти, картинки, таблиці, динамічні елементи.
− WooCommerce – краще рішення для створення інтернет-магазину. В жодній
іншій СMS ви не знайдете такої кількості додаткових розширень як для
WooCommerce. Є фільтрація по атрибутах товару і ціною, порівняння товарів
на сторінці, можливість вибору різних валют на сайті.
Таким чином вибір безкоштовної платформи для CMS веб-орієнтованї
системи з можливостями інтернет комерції очевидний.
2.2 Розробка структури веб-орієнтованої інформаційної системи
2.3 Метод MindMap
Звичайний спосіб створення візуальної веб-орієнтованої ІС - накреслити
звичні схеми MindMap (рис. ) або спроектувати User Flow, спочатку створивши
шлях користувача, а потім прототипуючи структуру [11, 12].
27

Рисунок 2.6 – Схеми MindMap та Content Brick

Деякий аналіз показує, що близько 80% користувачів створюють карти сайту
за допомогою інструментів MindMap.
Вони дозволяють швидко створювати структуру сторінок, пов'язувати їх з
посиланнями і навіть кольоровими блоками. Таким чином, деякі користувачі
звертаються до спеціальних візуальних сервісів карт сайту.
Такі сервіси не дозволяють відображати блоки контенту всередині кожної
сторінки. Найближче, що вони пропонують, – це значки, які можна організувати, але
їх використання просто не в змозі скласти достатньо деталей вмісту, щоб зробити
інформативну та надійну візуальну карту сайту.

Рисунок 2.7 – Структура сайту

28

Недостатньо створити точну карту сайту без блоків вмісту всередині кожної
сторінки.
2.4 Метод Content Brick
Метод Content Brick був винайдений в 2016 році і збільшив швидкість і
простоту проектування структури веб-сайтів в кілька разів шляхом створення і
поширення блоків контенту для кожної окремої сторінки і подальшого об'єднання
цих сторінок в одну загальну структуру [9].
2.4.1 Mainpage First vs Structure First
Перше, з чим потрібно визначитися так це з методом вибору структури сайту:
Mainpage First або Structure First (почніть з головної сторінки або із загальної
структури)

Рисунок 2.8 – Mainpage First vs Structure First

Mainpage First. Неважко здогадатися, що це спосіб створення структури,
починаючи з головної сторінки. Для цього початку потрібно створити головну
29

сторінку та спробувати представити майбутній вміст за допомогою content brick.
Наприклад, що може бути на домашній сторінці?
− Header;
− About;
− Introduction;
− News;
− List of products;
− Footer.

Рисунок 2.9 – Головна сторінка
Тепер у проекті є потужна відправна точка, щоб вирішити, якими будуть
наступні сторінки веб-сайту, який ви розробляєте. Все, що вам потрібно зробити, це
описати наступні сторінки таким же чином і визначити ієрархічний зв'язок між
ними.
Structure First. Це метод починається з того, щоб продумати відразу всі основні
сторінки сайту, а потім зосередитися на кожній сторінці окремо. Оскільки, потрібно
розробити корпоративний сайт, то можна запропонувати таку структуру розділів:

30

Рисунок 2.10 – Структура сайту методу Structure First
Тепер, маючи готову структуру, можна перейти до сторінок, окремо
продумуючи контент для кожного з них за допомогою вже відомого контенту.
2.4.2 Візуалізація блоків вмісту
Кожна сторінка має логічні блоки вмісту. Але який кращий спосіб уявити собі
далекий візуальний контур майбутніх веб-сторінок і розбити кожну сторінку на
графічні блоки? Давайте розглянемо простий приклад:
Титульна сторінка складається з таких Content Bricks:
− Header;
− Sign Up;
− About;
− Introduction;
− Features;
− Video;
− Images;
− Footer.
Здається, все зрозуміло, але картина буде більш повною, якщо побачимо
перший графічний контур цієї сторінки.
31

Рисунок 2.11 – Графічний контур сторінки
Це допоможе всім учасникам процесу побачити, з яких графічних блоків буде
складатися кожна сторінка на сайті.
2.4.3 Цілісний вигляд структури
Content Brick як метод дизайну веб-сайту може дати багато переваг. Однією з
них є цілісний вигляд структури. Вся структура сайту з докладним описом контент-
блоків кожної сторінки – можна буквально побачити весь сайт і оцінити його
масштаб.
Наприклад, зі своїми розробниками можна оцінити кількість годин, які будуть
витрачені на розробку майбутнього проекту, і сегментувати його на кожен етап
розробки (дизайн, інтерфейс, розробка, тестування тощо) або дати завдання
копірайтеру, який почне готувати тексти, адже у нього вже буде все перед очима.

32

3 РЕАЛІЗАЦІЯ ВЕБ-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ СИСТЕМИ
3.1 Розробка програмної структури сайту
Для створення веб-орієнтованої інформаційної системи сайту було
використано «WordPress» версії 5.9.3. Для розробки оригінальних рішень в якості
мови програмування використано PHP 7.4.21, а для організації бази даних – SQL
5.7.33-36. Також розроблена особиста тема «Agricultural». При створенні сайту на
даний момент все частіше використовується не самі CSS і JS, а інструмент Webpack
[13, 14, 15].
Webpack – це пакувальник, з відкритим кодом, статичних модулів для
сучасних додатків JavaScript. Він створений переважно для JavaScript, але може
трансформувати зовнішні ресурси, такі як HTML, CSS та зображення, якщо
підключити відповідні завантажувачі. Webpack приймає модулі із залежностями та
генерує статичні файли, що представляють ці модулі.

Рисунок 3.1 – Приклад конвертації файлів у Webpack.
Головні налаштування повинні міститися в файлі webpack.config.js, а також
повинен бути встановлений NPM або YARN.
33

YARN і NPM – це менеджери пакунків для мови програмування JavaScript.
Для середовища виконання Node.js це менеджер пакунків за замовчуванням.
Включає в себе клієнт командного рядка, який також називається npm, а також
онлайн-базу даних публічних та приватних пакунків, яка називається реєстром npm.
Реєстр доступний через клієнт, а доступні пакунки можна переглядати та шукати
через вебсайт npm. Менеджер пакунків та реєстр керуються npm.
3.2 Розробка розмітки сайту
Також для правильного написання на мовах HTML, CSS, JS було використано
правильну розмітку, завдяки таким файлам як: .stylelintrc, .eslintrc, .editorconfig,
.babelrc.
-.stylelintrc – допомагає розробнику для пошуку і загрузки вашого обєкту
конфігурації;
-.eslintrc – знаходяться правила, які забезпечують правильну семантику коду, і
написання його вірно, щоб не створювати зайві файли, рядки коду;
-.editorconfig – написані правила табуляція файлів, для чистішого написання
коду;
-.babelrc – файл з розміщенням свого проекту.
Для створення ново шаблону теми для WordPress. Створюється папка і в ній
файл style.css.
В файлі style.css запишеться опис теми і властивості стилів для даної теми.
Структура файлу показана на рис. 3.2.
34

Рисунок 3.2– Файл програми налаштування нової теми
Після налаштування файлу style.css, портрібно створити файл function.js, в
цьому файлі будуть зібрані функції і підключені файли, які будуть
використовуватися в даній темі.
Крім персональних настройок теми, потрібно розширити дану тему для
використання плагіну електронного магазину «WooCommerce» за допомогою
наступного правила: add_theme_support('woocommerce');
Даний фрагмент коду дозволяє змінювати вигляд магазину на унікальний.
WooCommerce – це найпопулярніша в світі платформа для інтернет-магазинів
з відкритим вихідним кодом.
Наша гнучка та безкоштовна базова платформа працює за підтримки глобальної
спільноти. Свобода, що надається відкритим вихідним кодом, означає, що ви
зберігаєте повний контроль над вмістом та базою даних свого магазину.
Незалежно від того, чи започатковується бізнес, чи іде роздрібна торгівля в
Інтернеті чи розробляються сайти для клієнтів, використання WooCommerce для
магазину завжди доцільно – він потужно поєднує контент і комерцію.
Для зміни початкових властивостей WooCommerce треба створити папку
«woocommerce» в корені теми і перенести з плагіна woocommerce/templates всі
файли і папки.

35

3.3 Розробка головної сторінки
Для створення головної сторінки сайту створюється файл front-page.php.
Лістинг коду показано на рис. 3.3.

Рисунок 3.3– Код головної сторінки
В рядку 2 і 56 підключається відповідно header і footer – верхня частина
сторінки та низ.
Завдяки «$groupACF = get_field('home');» отримуємуються додаткові поля з
плагіна ACF.
ACF – розширює функціонал сторінок і всіх настройок сайтів для WordPress.

36

<?php
$prod_cat_args = array(
'taxonomy' => 'product_cat',
'orderby' => 'id',
'hide_empty' => true
);
$woo_categories = get_categories($prod_cat_args);
foreach ($woo_categories as $woo_cat) {
get_template_part('woocommerce/content-product', 'cat', $woo_cat);
}
?>

Рисунок 3.4– Код виведення всіх категорій товару
Ми отримуємо всі категорії товару в яких є товар, і передаємо кожну категорію
в файл content-product-cat.php, де виводиться фотографія категорії надпис і
посилання на неї.

Рисунок 3.5 – Виведення фотографій всіх категорій товару
Для виводу всіх товарів з кожної категорії використаний запит get_terms().
Лістинг запиту показано на рисунку 3.6

37

$tax = get_taxonomy(‘product_cat’);
$terms = get_terms([
‘taxonomy’ => $tax->name,
‘hide_empty’ => true,
]);
foreach ($terms as $term) {
$args = [
‘id’ => $term->term_id,
‘name’ => $term->name,
‘params’ => [
‘tax_query’ => [
‘relation’ => ‘AND’,
[
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘id’,
‘terms’ => $term->term_id
]
]
]
];
get_template_part(‘template-parts/catalog’, ‘product’, $args);
}
Рисунок 3.6 – Запит для виведення всіх товарів з кожної категорії
Де в файлі catalog-product.php звертається до бази даних із запитом вивести 9
товарів.
$post_args = array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => 9
);
$post_args = wp_parse_args($post_args, $args['params']);
$posts = new WP_Query($post_args);

Рисунок 3.7– Запит для виведення 9 товарів
38

По коду представленому вище працюють сторінки категорії товарів, записів і в
товарах розділ «Супутні товари».
Сторінка «корзина із поточним замовленням» показна на рис. 3.8.

Рисунок 3.8 – Приклад здійснення замовлення

Тут показано відображення всіх замовлених товарів в корзині, ціну і суму всієї
корзини, без урахування доставки. Також є поле для зміни кількості замовлених
товарів.
На сторінці оплати замовлення, потрібно вказувати ім’я прізвище, в яку країну
відправляти замовлення, email, телефон, якщо отримувач буде друга особа, треба
ввести аналогічно дані.
3.4 Під’єднання API сервісу доставки
Для підключення доставки «Нова пошта» в даній веб-орієнтованій ІС
використано API.

39

Рисунок 3.9 – Сторінка оформлення замовлення

API (інтерфейс програмування додатків) – це набір інструментів для
автоматизації роботи з компанією «Нова пошта». Функціональність API дозволяє
швидко інтегрувати логістичні процеси в будь-який бізнес та є єдиною точкою
входу для усіх клієнтів та сервісів. Точки входу API сервісу доставки:
– JSON - https://api.novaposhta.ua/v2.0/json/;
– XML - https://api.novaposhta.ua/v2.0/xml/.
Для початку роботи з функціоналом АРI компанії «Нова пошта» необхідно
згенерувати ключ API та використовувати його при формуванні запитів. Ключ
можливо згенерувати в бізнес кабінеті – розділ "Налаштування" пункт "Безпека"
натиснути кнопку "Створити ключ".
40

3.5 Під’єднання API сервісу оплати
Зазвичай користувачі онлайн інтернет магазинів повинні мати змогу оплатити
товар прямо на сайті не переходячи за додатковими посиланнями. Це залишає єдину
точку входу без додаткових процедур автентифікації, а також забезпечує безпеку
клієнта при розрахунках.
В даному проекті було запропоновано під’єднати дві системи оплати, які
популярні в Україні.
Перша – це при отримані заказу. Друга – це «LiqPay» - приймає два типи карток
системи MasterCard та Visa. Підключення системи оплати треба зареєструвати на
сайті https://www.liqpay.ua/uk - написати лист менеджеру, щоб для сайту видали API
ключі, після перевірки сайту на відповідність контенту, будуть надані ключі.

Рисунок 3.10 – Налаштування форми оплати LiqPay
Всі закази клієнт може переглянути в особистому кабінеті, також статус заказу і
налаштувати профіль, адресу доставки.
41

Рисунок 3.11 – Сторінка особистого кабінету
3.6 Зворотній зв’язок
Для створення даної сторінки було використано плагін «Contact Form 7», для
відправки форми на пошту.
Contact Form 7 – простий плагін для швидкого налаштування форми зворотного
зв’язку на сайті.
Google Api maps – це Google бібліотека, яка допомагає створювати карту
місцевості в любому вигляді, добавляти місце знаходження ваших підприємств,
магазинів, тощо.

42

Рисунок 3.12 – Налаштування сторінки зворотного зв’язку

Для підключення потрібно авторизуватися на сайті
https://developers.google.com/map, підключити карту для оплати і підтвердження
особистості.
Для зміни дизайну стандартного стилю карти використано з сайту
https://snazzymaps.com/ одну із тем вже готових, даний сайт має вже готові стилі для
карт також можна створити особистий дизайн для відображення Google maps. Таким
чином всі дизайнерські властивості карти знаходяться в файлі googleMaps.json.
1. На рядку 85 – підключаємо до сервісу google APi і передаємо ключ.
2. На рядку 87 – створюється тег div, в який після буде передана карта.
3. На рядках 90 -106 – написані властивості точки на карті, її розміри, якою
фігурою відображати, також початкові координати карти, її масштаб.
4. На рядку 111- 112 – передаються координати карти і точки.
5. На рядку 114 – підключаються дизайн карти.

43

Рисунок 3.13 – Підключення Google maps API
3.7 Сторінка калькулятор
Для створення даної сторінки, потрібно отримати всі категорії з їх кількістю,
вагу на 1 гектар, створити поле вводу кількості гектарів у клієнта і блок з
результатом.

Рисунок 3.14 – Сторінка роботи калькулятора
44

На рядку 6-24 – отримуємо кнопки з категоріями, і добавляємо для них data-id –
атрибут з вагою.

Рисунок 3.15 – Код сторінки калькулятора
В подальшому всі данні обробляються завдяки коду JavaScript.

Рисунок 3.16 – Код калькулятора JavaScript

Підчас натискання на кнопки перемикається вага для кожної категорії.
45

4 ТЕСТУВАННЯ І БЕЗПЕКА СИСТЕМИ
4.1 Створення замовлення
При оформлені заказу буде створений лист адміністратору і менеджеру сайту
про створення нового заказу користувачем.

Рисунок 4.1– Надходження листа про новий заказ
46

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

Рисунок 4.2 – Сторінка заказів в адмін-панелі
4.2 Тестування безпеки
Для безпеки було змінено посилання за замовчуваннями на адмін-панелі «wp-
admin», «wp-login» на «agcr». Також для всього персоналу, який обслуговує сайт,
при першому вході буде запит змінити слабкий пароль на більш безпечний, який
повинен пройти перевірку.
Для захисту від атаки типу грубої сили було встановлено обмеження по
кількості неправильного введення паролю, після чого блокується вхід на вказаний
час.

Рисунок 4.3 – Налаштування обмеження спроб входу
Для організації роботи системи через HTTPS і безпеки клієнтів підключений
SSL сертифікат. SSL сертифікат – криптографічний протокол, який забезпечує
47

встановлення безпечного з'єднання між клієнтом і сервером. SSL спочатку
розроблений компанією Netscape Communications . Згодом на підставі протоколу
SSL 3.0 був розроблений і прийнятий стандарт RFC, що отримав ім'я TLS. Протокол
забезпечує конфіденційність обміну даними між клієнтом і сервером, що
використовують TCP/IP, причому для шифрування використовується асиметричний
алгоритм з відкритим ключем. При шифруванні з відкритим ключем
використовується два ключі, причому будь-який з них може використовуватися для
шифрування повідомлення. Тим самим, якщо використовується один ключ для
шифрування, то відповідно для розшифрування потрібно використовувати інший
ключ. У такій ситуації можна отримувати захищені повідомлення, публікуючи
відкритий ключ, і зберігаючи в таємниці секретний ключ.
Для виключення змін файлів на сайті в адміністративній сторінці, треба в
файлі «wp-config.php» внизу добавили рядок «define('DISALLOW_FILE_EDIT',
true);» – це означає виключить розділ редагування файлів з панелі.
Також для паролів і логінів створено валідацію рядка. Валідація – це перевірка
даних на правильність заповнення заздалегідь установленим критеріям
прийнятності.
Таким чином виключаються можливості шахраям отримати доступ до сайту,
через поля вводу.
Для безпеки бази даних включено зміну зі стандартного префіксу «wp_» на
особистий «agricultural_».

Рисунок 4.3 – Зміна префіксу для бази даних

48

На сервері увімкнений доступ до бази даних тільки через IP-адресу сервера –
це забезпечує безпеку бази даних, якщо хтось буде намагатися зайти в phpMyAdmin,
або відправити якийсь запит з іншої IP-адреси.
4.3 Резервування
На сайті і на хостингу створюються резервні копії бази даних, для відновлення
сайту, якщо до його отримає доступ третя особа і змінить всі дані, або хтось із
персоналу випадково видалить файл.

Рисунок 4.4 – Резервні копії на сайті
49

Рисунок 4.5 – Резервні копії на хостингу
4.4 Безпека розрахунків
Для безпечного переводу коштів при оплаті на сайті був підключений LiqPay.
LiqPay – українська платіжна система, відкритий вебзастосунок, який
дозволяє приймати платежі і переказувати гроші за допомогою мобільного
телефону, Інтернету і платіжних карток у всьому світі. Материнська компанія —
ПриватБанк.
Рахунок LiqPay – це номер мобільного телефону в міжнародному форматі.
Рахунок прив'язаний до банківської картки ПриватБанку (що ускладнює дії до
повного оформлення картки у філіях банку і веде до зайвих витрат при оформленні
картки + клієнт не може зберегти інкогніто перед сервісом.)
Система дозволяє:
− створювати мікроплатежі (платежі від 0,02$);
− створювати масові платежі;
− створювати миттєві перекази між рахунками LiqPay;
− приймати платежі на сайті;
− виводити кошти на картки системи VISA або будь-яку картку Приватбанку
(Visa/MasterCard);
50

− проводити оплату послуг:
− поповнювати рахунок мобільного телефону;
− поповнювати рахунок Skype;
− здійснювати обмін валют між рахунками LiqPay;
− створювати платформи API;
− переводити в готівку чеки Google.
Завдяки LiqPay ми створюємо персональний шлюз для оплати товарів з
прив’язкою номера заказу до сайті і LiqPay.
Платіжний шлюз – апаратно-програмний комплекс, який дозволяє
автоматизувати процес прийому платежів в Інтернеті. Платіжний шлюз
розробляється платіжною системою, яка і визначає його специфікацію та відповідає
за його підтримку.
Для використання платіжних шлюзів необхідне підключення до мережі
інтернет. Алгоритм оплати за товар на сайті такий:
1. Покупець здійснює транзакцію через веб-сайт або фізично.
2. Дані пересилаються в платіжний шлюз, який приймає інформацію і далі
передає деталі транзакції в банк, що видав картку, за допомогою якої була
оплачена покупка.
3. Банк надсилає запит в платіжну систему (VISA, Mastercard). Відбувається
оцінка відповідності умов угоди та кредитної ситуації клієнта.
4. Банк-емітент відправляє код авторизації, який надає дозвіл платіжній
системі на здійснення угоди.
5. Платіжна система відправляє код авторизації в платіжний шлюз, звідти він
надходить продавцю.
6. Якщо угода схвалена, продаж проходить та гроші знімаються з рахунку
клієнта.
Весь процес займає кілька секунд. Швидкість залежить від якості інтернет-
з'єднання. У реальності продавець отримує гроші клієнта приблизно через 3 дні.

51

Безпека платіжного шлюзу:
− оскільки від покупця зазвичай потрібно внести особисту інформацію, вся
комунікація на сторінці оплати (тобто покупець – платіжний шлюз)
здійснюється по протоколу HTTPS;
− для підтвердження оригінальності запиту на сторінку результату платежу,
зазвичай використовується підпис запиту – результат функції хешування в
яку передали параметри запиту з якимось «секретним словом», відомим лише
продавцю та платіжного шлюзу;
− для підтвердження оригінальності запиту на сторінку результату платежу,
іноді використовується перевірка IP запиту сервер.
Після оплати статус заказу змінюється автоматично і стає на «Опрацювання»,
надсилається повідомлення про оплату адміністратору сайту і менеджерам
магазину, щоб заказ був опрацьований і відправлений клієнту.

52

ВИСНОВКИ
Будь-яка веб-орієнтована інформаційна система має на меті забезпечити
роботу і під’єднання клієнта в будь-якій точні світу, де є інтернет. Така гнучкість і
незалежність від платформи клієнта, що вимагає тільки наявність браузера,
звичайно є дуже вагомою перевагою таких систем. А тому актуальність та
використання саме веб-орієнтованих систем набуває все більшої популярності.
Після детального і ґрунтовного аналізу існуючих аналогів, платформ та
інструментів проектування було вибір був зупинений на платформі WordPress із
застосуванням розширення для організації продажів WooCommerce. Велика увага
була надана аналізу безпекової складової розробки систем та організації дружнього
до користувача UI/UX дизайну.
В другому розділі було проведено розробку структури web-орієнтованої
інформаційної системи приватного підприємства «Науково-виробничий центр
«РЕПРОДУКТИВНЕ ЗЕРНО»». Розроблено візуалізація блоків вмісту та отримано
цілісний вигляд структури.
Незважаючи на велику кількість інструментів, які мають в своєму
розпорядженні веб розробники, саме даному проекті було застосовано технології і
засоби розробки веб-сторінок, такі як HTML, Javascipt, CSS, PHP, MYSQL,
APACHE. В цілому третій розділ було присвячено питанням розробки програмної
структури сайту та розмітки, розробці головної сторінки, під’єднанню API сервісу
доставки, під’єднанню API сервісу оплати, форм зворотного зв’язку та сторінки
калькуляції вартості замовленої продукції.
В цілому всі поставлені завдання в роботі виконані, отримані плановані
результати та розроблена працездатна веб-орієнтована інформаційна система
підприємства науково-дослідного товариства агропромислового комплексу.
53

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Мороз С. І., Нужна С. А. Інтеграція інформаційних систем і технологій у
побудові інформаційного простору сільськогосподарських підприємств. Ефективна
економіка. 2021. № 5. – URL: http://www.economy.nayka.com.ua/?op=1&z=8897
2. Гужва В. М. Інформаційні системи і технології на підприємствах: Навч.
посібник. – К.: КНЕУ, 2001. – 400 c
3. Тверезовська Н.Т. Інформаційні технології в агрономії. – Київ: ЦУЛ, 2017. –
282 с.
4. Тесленко Г. Інформаційні системи в аграрному менеджменті – К. : КНЕУ,
1999. – 232 с.
5. Кинзябулатов Рамиль CRM. Подробно и по делу : Редакция 1 / Рамиль
Кинзябулатов. – Издательские решения, 2018. – 248 с
6. Deane Barker Web Content Management. – S.: O'Reilly Media, Inc., 2016. –
550 p.
7. Програмування веб-застосувань (фронт-енд та бек-енд): навч. посіб. / Р. А.
Мельник. – Львів: Вид-во Львівської політехніки, 2018. – 248 с.
8. На якій платформі краще створити сайт інтернет-магазину? Режим доступу:
https://artjoker.ua/ru/blog/na-kakoy-platforme-luchshe-sozdat-sayt-internet-magazin/
9. The Content Brick Method: A quicker, easier way of creating a website structure.
Режим доступу: https://octopus.do/journal/content-brick-method/
10. Глинський Я.М. Інтернет. Сервіси, HTML і Web-дизайн : навч. посіб. /
Я.М. Глинський, В.А. Ряжська. – 2-ге вид., доп. – Львів : Деол, 2003. – 190 с.
11. Інькова Н. А. Створення Web-сайтів : Навчально-методичний посібник
(Електронний ресурс) / Інькова Н. А., Зайцева Е. А., Кузьміна Н. В., Толстих С. Г. –
Режим доступу до електронного ресурсу: http://club-
edu.tambov.ru/methodic/fio/p5.doc
12. Пасічник О.Г. Основи веб-дизайну / О.Г. Пасічник, О.В. Пасічник, I.В.
Стеценко: [навч. посіб.]. – К.: Вид. група ВНУ, 2009. – 336 с.
54

13. Трофимов, С. Особенности создания Web-приложений [Електронний
ресурс] / С. Трофимов. – Режим доступу: http://www.autocode.ru/articles/internet.html.
14. Niko Guruli WordPress Security Made Easy, – CreateSpace Independent
Publishing Platform, 2017. – 90 p.
15. Матеріали сайту https://uk.wordpress.org/. Документація. Режим доступу:
https://codex.wordpress.org/uk:Головна сторінка.
55

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