Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/8905| Назва: | Проектування та створення web-орієнтованої інформаційної системи мотошколи |
| Автори: | Дяченко, Петро Васильович Зябченко, Дмитро Юрійович |
| Ключові слова: | УПРАВЛІННЯ;WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА МОТОШКОЛИ;ПРЕДМЕТНА ОБЛАСТЬ;ЗАДАЧІ;ПРОГРАМНІ ЗАСОБИ;ПОШУК;WEB-САЙТ. |
| Дата публікації: | 16-чер-2022 |
| Короткий огляд (реферат): | Метою кваліфікаційної роботи бакалавра є підвищення ефективності, розширення функціональних можливостей курсів навчання водіїв шляхом проектування та створення web-орієнтованої інформаційної системи для мотошколи. Об’єкт дослідження: методи та засоби розробки web-орієнтованої інформаційної системи. Предмет дослідження: web-орієнтована інформаційна система мотошколи. Методи дослідження. В роботі застосовувалися вивчення практичних розробок, аналіз існуючих сайтів мотошкол. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/8905 |
| Розташовується у зібраннях: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| Пояснювальна записка_Зябченко Дмитро_КНС-2001_2021-2022.pdf Restricted Access | 4.36 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
1
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Проектування та створення web-орієнтованої інформаційної
системи мотошколи»
Виконав: студент 4 курсу, групи КНС-2001
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»
Зябченко Дмитро Юрійович
Керівник Дяченко П.В.
(прізвище та ініціали)
Черкаси 2022 року
2
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітній рівень Бакалавр
Спеціальність 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. Додаток Б. Текст програми.
3
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 Виконано
Студент _____________________________ Зябченко Д. Ю.
(підпис)
Керівник роботи ____________________________ Дяченко П. В.
(підпис)
4
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 49 с., 29 рис., 1 табл., 10
використаних джерел, 3 додатків.
Актуальність теми.
Майже у кожної сфери бізнесу сьогодні повинен бути сайт, тому що, всі
шукають потрібні послуги і інформацію в інтернеті. Тема данної кваліфікаційної
роботи присвячена проектуванню і створенн. web-орієнтованої інформаційної
системи для мотошколи. У сфері послуг мото -, автошкол web-сайти відіграють
важливу роль, оскільки в умовах жорсткої конкуренції, необхідно завоювати свого
клієнта, надавати всю потрібну інформацію про діяльність своєї мотошколи, так
щоб після перегляду web-сайту потенційний клієнт не виявив бажання розглядати
послуги конкурентів.
Лейдинг – це будь-яка сторінка, яка закликає користувача виконати певні дії,
наприклад, підписатися на розсилку, купити квиток на конференцію, запросити
кошторис або просто завантажити презентацію.
Для створення сайту я використовував в данній роботі використовується мова
розмітки гіпертексту HTML, каскадні таблиці стилів CSS у поєднанні з мовами
програмування JavaScript і PHP.
Результатом виконання роботи є створений сайт мотошколи інформаційно-
рекламного характеру, основна задача якого, заохочення бажаючих пройти
навчальний курс для отримання водійського посвідчення на категорії А і А1. На
сайті наявна вся інформація про мотошколу і про послуги, які надає. Для сайту є
характерним простота і лаконічність, характене написання в стилі мінімалізму,
відсутність зайвої інформації, відсутність непотрібних функцій.
Створений лейдинг пейдж являє собою корисний і простий в розробці web-
сайт, який може стати в нагоді усім підприємствам які працюють з людьми. На web-
сайті крім інформації про послуги навчання на категорії А і А1, також є додаткові
послуги в підборі мототехніки і мотоекіпіровки. Сайт адаптований під телефони,
планшети і монітори різних розмірів, web-сайт має приємний і водночас простий
5
дизайн, для максимального комфорту використання.
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра
є підвищення ефективності, розширення функціональних можливостей курсів
навчання водіїв шляхом проектування та створення web-орієнтованої інформаційної
системи для мотошколи. Для досягнення поставленої мети в дослідженні необхідно
вирішити такі задачі:
виконати огляд методів та засобів для розробки інформаційної системи
мотошколи;
провести порівняльний аналіз існуючих аналогів інформаційних систем для
мотошкол;
обрати програмно-технічні засоби для реалізації задачі;
спроектувати та створити інформаційну систему мотошколи;
провести адаптацію інформаційної системи під телефони, планшети і
монітори різних розмірів;
провести тестування розробленої системи.
Об’єкт дослідження: методи та засоби розробки web-орієнтованої
інформаційної системи.
Предмет дослідження: web-орієнтована інформаційна система мотошколи.
Методи дослідження. В роботі застосовувалися вивчення практичних
розробок, аналіз існуючих сайтів мотошкол.
Перелік ключових слів: УПРАВЛІННЯ, WEB-ОРІЄНТОВАНА
ІНФОРМАЦІЙНА СИСТЕМА МОТОШКОЛИ, ПРЕДМЕТНА ОБЛАСТЬ, ЗАДАЧІ,
ПРОГРАМНІ ЗАСОБИ, ПОШУК, WEB-САЙТ .
6
ABSTRACT
Master's qualifying work includes: 49 p., 29 rites, 1 tabl., 10 sources used, 3
appendices.
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.
7
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
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.
8
ЗМІСТ
ВСТУП ................................................................................................................................ 10
1 ОБГРУНТУВАННЯ НЕОБХІДНОСТІ СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ МОТОШКОЛИ ........................................................... 12
1.1 Актуальність створення інформаційного ресурсу для мотошколи ................... 12
1.2 Основні завдання і функції мотошколи ................................................................ 14
Висновок до розділу 1 ................................................................................................... 15
2 ОГЛЯД АНАЛОГІВ ІСНУЮЧИХ WEB-САЙТІВ...................................................... 16
2.1 Класифікація web-сайтів ......................................................................................... 16
2.2 Огляд мотошколи «Yellowride» ............................................................................. 19
2.3 Огляд мотошколи «ProBiker» ................................................................................. 23
2.4 Огляд мотошколи «Ridenowmoto» ........................................................................ 26
2.5 Особливості розглянутих інформаційних систем ................................................ 29
Висновок до розділу 2 ................................................................................................... 29
3 ЗАДАЧА СТВОРЕННЯ ІНФОРМАЦІЙНОГО РЕСУРСУ ........................................ 30
3.1 Постановка задачі .................................................................................................... 30
3.2 Вимоги до інформаційного ресурсу мотошколи ................................................. 31
Висновки до розділу 3 .................................................................................................. 32
4 ВИБІР ПРОГРАМНИХ ЗАСОБІВ ................................................................................ 33
4.1 Обгрунтування вибору програмних засобів ......................................................... 33
4.2 Апаратні засоби ....................................................................................................... 37
Висновки до розділу 4 .................................................................................................. 37
5 РОЗРОБКА І ТЕСТУВАННЯ ІНФОРМАЦІЙНОГО РЕСУРСУ .............................. 38
5.1 Проектування дизайну сайту ................................................................................. 38
5.2 Розробка web-сайту ................................................................................................. 40
5.2 Тестування інформаційного ресурсу ..................................................................... 44
Висновок до розділу 5 ................................................................................................... 47
ВИСНОВКИ ....................................................................................................................... 48
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 49
9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
PHP (Hypertext Preprocessor) – скриптова мова програмування;
JS – мультипарадигменна мова програмування.
CSS – Cascading Style Sheets.
HTML – HyperText Markup Language.
ОС – операційна система.
ПЗ – програмне забезпечення.
ПК – персональний комп’ютер.
10
ВСТУП
В oстaнні роки в Україні швидкими темпами розвивається Internet, і велика
частка населення має у себе вдома або на роботі вихід до його ресурсів, виникає
необхідність використання цього напрямку в рекламних цілях. Internet як каналу
комунікації властиві такі характерні особливості:
1) Характеризується швидкістю поширення інформації. Так, з’явившись на
інформаційному сайті повідомлення може бути миттєво розтиражовано мережевими
виданнями, а потім навіть друкованими. Таким чином, дана особливість Internet дає
сприятливе середовище для того, щоб грамотно створене і запущене повідомлення
поширювалося самостійно і не вимагало значних матеріальних витрат на його
підтримку.
2) Internet дає прекрасну можливість фокусувати вплив на конкретну
вузькопрофільну, цільову аудиторію, в якій зацікавлена організація, виділяти
підгрупи в цій аудиторії для складання більш персоналізованих звернень, часом
навіть враховувати індивідуальні особливості та характеристики кожного
відвідувача. Узагальнюючи дані різних досліджень з вивчення Internet-аудиторій,
великий відсоток аудиторії Internet складають активні верстви населення, які беруть
участь в процесі прийняття рішень.
3) Комунікація в Internet інтерактивна. Це має на увазі можливість активної
взаємодії між сторонами. Інтерактивність означає можливість вступати в прямий
діалог з аудиторією, а також те, що представники даної аудиторії також можуть
спілкуватися між собою. Крім усього іншого інтерактивність дозволяє отримувати
зворотний зв’язок, адекватно аналізувати ситуацію, що склалася і своєчасно
реагувати у разі потреби.
4) Схильність користувачів Internet до отримання інформації сприяє більш
позитивному сприйняттю і високої засвоюваності матеріалу.
5) Це глобальний віртуальний електронний ринок, що не має яких-небудь
територіальних або тимчасових обмежень. Електронне комунікативний простір на
відміну від друкованого або ефірного практично не обмежена. Тут може бути
11
розміщено скільки завгодно багато інформації, обсяг якої не буде обмежений
рамками ефірного часу передачі або кількістю друкованих знаків.
6) Порівняно невисока вартість комунікації серед інших ЗМІ.
7) Наявність у організації web-сайту сьогодні вважається не просто справою
престижу, але необхідністю, навіть якщо її діяльність не пов`язана з
інформаційними технологіями та продажем товарів в Internet. На сьогоднішній день
вже не встає питання: чи потрібен сайт або не потрібен, але дуже актуальна тема, як
зробити сайт максимально ефективним з точки зору успішної комунікації та
підтримки сприятливого іміджу.
Мета кваліфікаційної роботи бакалавра. Метою кваліфікаційної роботи
бакалавра є підвищення ефективності, розширення функціональних можливостей
курсів навчання водіїв шляхом проектування та створення web-орієнтованої
інформаційної системи для мотошколи.
Для досягнення поставленої мети в кваліфікаційній бакалаврській роботі
розв’язуються наступні завдання:
дослідження предметної області, та визначення основних процесів роботи
мотошколи;
визначення основних вимог до web-сайту;
аналіз актуальності проету на сьогоднішній день;
аналіз існуючих аналогів;
проектування;
оптимізація і адаптація web-сайту;
перевірка на наявність помилок і багів.
Для створення програмного забезпечення використано новітні технології, а
саме: мова розмітки гіпертексту HTML, каскадні таблиці стилів CSS у поєднанні з
мовами програмування JavaScript і PHP.
12
1 ОБГРУНТУВАННЯ НЕОБХІДНОСТІ СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ МОТОШКОЛИ
1.1 Актуальність створення інформаційного ресурсу для мотошколи
Для зручності постійних відвідувачів ресурсу і залучення нових, було
вирішено створення web-сайу для мотошколи. Зручність для учнів, або нових
клієнтів полягає в тому, що дізнатися інформацію про послуги вони зможуть, просто
зайшовши на сайт фірми в Internet. Там же вони зможуть більше дізнатися про
заклад. Дуже зручний той факт, що на сайті знайомиться з послугами можливо
цілодобово. Так само до переваг цієї додаткової послуги можна віднести: значне
зниження витрат, пов’язаних з обміном інформацією за рахунок використання більш
дешевих засобів комунікацій, поширення прайс-листів, диспетчерську службу і
значне збільшення оперативності отримання інформації.
Web-сайт зможе зацікавивши клієнта, відносно невисокими цінами, широким
асортиментом послуг і чудовою якістю. Сьогодні для солідних автошкіл, або
мотошкіл необхідно мати ефективний власний web-сайт з брендовим ім’ям,
унікальним дизайном, докладним і барвистим поданням себе і своїх пропозицій.
Після створення сайту треба змусити його працювати на себе, тобто зробити його
відомим цільовій аудиторії, інакше це будуть викинуті гроші.
Далі наведемо заходи, корисні не тільки бізнесам, які мають свій web-сайт.
Навіть маючи лише вихід в Internet можна розміщуати інформацію про бізнес і її
пропозиціях в он-лайнові:
каталоги;
дошки оголошень;
прайс-листи і бази даних;
новинні сайти;
форуми;
надавати інформацію цікавим виданням і проектам.
13
Більш того, Internet можна активно використовувати для просування своїх
пропозицій і свого імені через Internet навіть маючи лише e-mail. При цьому
користувачам відкриваються можливості отримання інформації, наприклад через
підписку на розсилки новин, професійні, дискусії та ін. Однак, чим вище рівень
використання Internet бізнеса, тим більше у неї маркетингових можливостей.
Створивши сайт, його корисно зареєструвати в пошукових системах,
рейтингах, каталогах. Це дозволить легко виявити його користувачам Internet, хто
цікавиться сайтами даної тематики а також дозволить вам стежити за відвідуваністю
вашого сайту і мати додаткову статистичну інформацію про його відвідувачів і
відвідини.
Реклама на найбільш відвідуваних сайтах – найбільш ефективна. А форми
такої реклами на сайті можливі найрізноманітніші: банери і кнопки на окремих або
на всіх сторінках, текстова і банерна реклама в розсилці, web-сторінка в web-
каталозі (що дозволяє мати своє представництво в Internet на відвідуваному сайті
при мінімальних фінансових витратах). Корисну і цікаву для відвідувачів
(потенційних клієнтів) інформацію можна розмістити за підписом фірми в різних
розділах це сприятиме позитивному іміджу фірми.
Це приклад можливостей для представників бізнесу. Подібні проекти і
можливості існують для багатьох напрямків бізнесу. І не треба забувати, що
аудиторія Internet відрізняється освіченістю і кваліфікацією, тому в ній велика
частка людей, які називаються «лідерами думок», до яких часто звертаються за
інформацією або порадою.
Створюваний web-сайт повинен забезпечувати такі можливості:
сайт повинен бути адаптивний під телефони;
повинен бути цілодобовий доступ до web-сайту;
на сайті повинні бути послуги мотошколи;
можливість зв’язатися онлайн з менеджером;
забезпечення користувачів до зручного доступу до сайту;
забезпечити сайт якісним і приємним для користувача.
14
1.2 Основні завдання і функції мотошколи
Навчившись їздити на двоколісному велосипеді, багато хто помилково
вважають, що це дає необмежені можливості щодо приборкання важкої та
складнішої у використанні мотоциклетної техніки. Дійсно, кілька разів осідлавши
байк, можна отримати загальне уявлення про те, як триматися в сідлі під час їзди, як
гальмувати та маневрувати на дорозі.
Не секрет, що керування мотоциклом, особливо для новачків, певною мірою
ризикове заняття. Мало вміти тримати рівновагу, потрібно своєчасно реагувати на
зміни дорожньої ситуації, знати правила дорожнього руху, і мати хоча б загальні
уявлення про те, як може поводитися техніка в тій чи іншій ситуації.
Навчаючись їздити самостійно, ви можете втратити керування мотоциклом, а
це вже може стати причиною падіння чи навіть аварії. Ремонт пошкодженої техніки
- задоволення не з дешевих, не кажучи вже про можливість отримання серйозних
травм самим водієм. У цьому випадку до витрат на відновлення транспортного
засобу можна сміливо додати вартість ліків та консультацій лікарів. Відвідуючи
мотошколу, ви будете застраховані від подібних витрат, оскільки навчання
проходитиме під наглядом досвідченого інструктора, до того ж вам не доведеться
відповідати за дорогу техніку та ремонтувати її власними коштами.
Наша мотошкола «Stuntex» допоможе вам подолати можливий страх та
надасть навички впевненої безпечної їзди. Досвідчені інструктори навчать
правильної посадки та маневрування, вкажуть на можливі помилки водія. Ви
дізнаєтесь, як правильно діяти у різних ситуаціях на дорозі, а також отримаєте
цінний практичний досвід їзди на різних типах мотоциклів (легких, тяжких чи
спортивних).
Важливим чинником є первинне навчання на спеціально підготовлених
майданчиках. Це допоможе убезпечити і вас, і оточуючих. Навчаючись їзді, ви
нікому не спричините травм, а також будете застраховані від пошкодження чужого
майна.
15
Крім того, мотошкола – перший і важливий етап до отримання прав водія на
мотоцикл, якщо у вас їх ще немає. У нас ви зможете пройти повний курс навчання,
який передбачає складання проміжних внутрішніх іспитів, така підготовка стане вам
у нагоді. А вже після внутрішніх екзаменів ми будемо супроводжувати вас в
складанні екзамену на водійське посвідчення в ДАІ.
Переваги навчання в мотошколі «Stuntex»:
якісна, нова мототехніка;
мотоекіпірування відомих брендів;
відкритий і закритий майданчики для тренувань;
мотоінструктори з великим досвідом.
Висновок до розділу 1
В даному розділі визначанено актуальність створення інформаційного ресурсу
для мотошколи, актуальність обумовлена необхідністю того, що у кожного бізнеса
на сьогоднішній день повинен бути свій сайт.
Web-сайт повинен забезпечувати такі можливості:
сайт повинен бути адаптивний під телефони;
повинен бути цілодобовий доступ до web-сайту;
на сайті повинні бути послуги мотошколи;
можливість зв’язатися онлайн з менеджером;
забезпечення користувачів до зручного доступу до сайту;
забезпечити сайт якісним і приємним для користувача.
В розділі також проаналізована діяльність мотошколи, визначено основні
завдання, функції і особливості мотошколи.
16
2 ОГЛЯД АНАЛОГІВ ІСНУЮЧИХ WEB-САЙТІВ
2.1 Класифікація web-сайтів
Найчастіше сайти поділяються на наступні категорії:
1. Сайт-візитка – це, можна сказати, родоначальник інтернету. Саме цей тип
сайтів стояв на зорі зародження світової мережі. Звичайно, зараз такі візитні
сторінки візуально покращились, стали красивішими і більш сучасними. Але сама
суть залишилася незмінною.
Сайт-візитка – це всього кілька сторінок: відомості про компанію,
інформація про товари/надання послуг, що продаються, контактні дані. Можливо ще
кілька розділів типу Акції, Новини тощо. Подана інформація – статична, тобто на
сайті-візитці не передбачається активної взаємодії користувача з сайтом. З усієї
взаємодії з клієнтом - лише форма зворотного зв'язку для відправки email прямо з
сайту.
В цілому, цей тип сайтів вже віджив своє і нині майже спочив на задвірках
історії. Звичайно, сайт-візитка – це краще, ніж нічого. Але клієнта таким видом
сайту вже не зачепити.
2. Корпоративний сайт – багатофункціональний сайт організації, призначення
якого як донесення інформації до клієнта, так і безпосередньо переслідування
комерційних цілей. Тобто, це сайт, який працює на ваш бізнес.
Якщо порівнювати з сайтом-візитівкою, то виходить наступна аналогія. Там
ви вручили маленьку візитку і розпрощалися з надією, що про вас колись згадають.
Тут же ви відразу даруєте максимально повний обсяг інформації в якій є все для
вирішення потреб клієнта. Це не просто папірець-візитка, це вже повноцінний офіс
із усіма його перевагами.
Як людину зустрічають на вигляд, так і компанію зустрічають по її сайту. Як
правило, клієнт завжди, нехай навіть неусвідомлено, бачить/відчуває серйозність у
намірах (або її відсутність). Корпоративний сайт – це чудовий спосіб показати
серйозне ставлення до справи.
17
3. Портал – це, фактично, сильно прокачаний та покращений корпоративний
сайт. Даний тип сайту орієнтований на ширше коло користувачів і покликаний
значно полегшувати їм життя всіма доступними способами.
Приклад функціональності порталу: розміщення та виведення фото, аудіо та
відео у вигляді зручних галерей та плейлистів, читання, перегляд та
прослуховування онлайн, форуми, блоги та щоденники користувачів, рейтинги,
голосування, система коментування та управління коментарями, обмін особистими
повідомленнями між користувачами. Цей список можна продовжувати нескінченно.
Головна риса порталу – це дуже активна взаємодія з відвідувачами. Видів цих
взаємодій може бути тисячі. Кожна аудиторія має свої запити, і саме сайт-портал
здатний їх задовольнити, власне, саме на цьому й будується успіх чи неуспіх
порталу. Головне – це зрозуміти запити вашої цільової аудиторії. Портал – це
сучасний вид сайту, завдяки якому ви зможете ефективно задовольняти потреби
вашої аудиторії. Тим самим ви безсумнівно зробите свій бізнес успішним.
Правильно розроблений портал – запорука того, що все у вас вийде.
4. Сервіс – зазвичай сконцентрований сайт на вирішенні якоїсь однієї або
декількох однотипних потреб клієнта. Найкращим прикладом будуть онлайн-
консультанти. Напевно, кожен із нас зустрічав на сучасних сайтах спливаючі вікна
зі зверненням менеджерів або пропозицією ввести свій номер, щоб нам швидко
передзвонили та проконсультували. Так ось, такі онлайн-помічники і є прикладом
сервісу – видом сайтів, які надають послуги із задоволення конкретної потреби
користувача. Ті ж хмарні хостинги, відеохостинги (Youtube), різні послуги для
онлайн-конвертації файлів і т.д. – є яскравим прикладом гарного та корисного
сервісу. Сервісів в інтернеті існує безліч, щодня з'являються нові. Для того, щоб
створити свій успішний сервіс, потрібно лише зрозуміти, чого не вистачає людям.
5. Інтернет-магазин – це найпопулярніший метод комерції в Інтернеті. Всі
товари що є на вітрині купити можна в пару кліків мишкою. Обсяги інтернет-
комерції зростають рік за роком. У США та Європі електронний ринок вже досяг
неймовірних масштабів.
18
Основне завдання інтернет-магазину – це представлення широкого
асортименту та можливості купити товар чи послугу безпосередньо на сайті. Чим
сильніше ми полегшуємо клієнту життя, тим більше клієнтів у нас стає, це закон
будь-якого бізнесу.
6. Промо-сайти – це вид сайтів для проведення конкурсів, акцій, розіграшів
призів чи презентації чогось нового (наприклад, нова модель автомобіля). Як
правило, такі сайти потрібні великому бізнесу. Такий бізнес вже має основний сайт
або сайти, завдання яких – це продажі, формування позитивного іміджу, підтримка
клієнтів. А ось усілякі розважальні конкурси виносяться на окремий домен, щоб не
засмічувати основний ресурс. Звісно, що заради тижневої акції промо-сайти ніхто
не робить, їх роблять під довготривалі конкурси та розіграші. Довготривалі – це
найчастіше означає від кількох тижнів до кількох місяців.
7. Лендинг або лендинг-пейдж (landing page) – це односторінковий тип сайту
для захоплення уваги клієнта для подальшого виконання ним цільової дії. Мінімум
всього відволікаючого: на лендинг розміщується тільки ключова інформація, яка
здатна зацікавити і спонукати зробити покупку товару або замовити послуги.
Лендинг – це ще простий та зручний дизайн. Завдяки своїй легкості лендинг
швидко завантажується та не викликає зайвих питань.
Лендинг несе ключову інформацію про те, чому клієнт повинен зробити
покупку або зробити іншу цільову дію (наприклад, передплатити розсилку).
Наразі відбувається справжній розквіт лендингів, і на це є причини. Головною
перевагою цього різновиду сайтів є підвищена конверсія за рахунок
вузькоспрямованості (конкретний товар/послуга для конкретної аудиторії). Нічого
зайвого – ось секрет успіху лейдингу. На відміну від величезної вітрини інтернет-
магазину відвідувач лендингу бачить тільки щось одне. Коли ми не маємо широкого
вибору, то часто ми цьому навіть раді – не треба витрачати сили та час на
порівняння та вибір.
Виходячи з вище описаних різновидів сайтів мною обраний лейдин, оскільки
він максимально відповідає діяльності сфери ді мотошколи. Лаконічність, простота
лейдигу ідеально підійде для просування послуг цієї сфери. Але, перш ніж почати
19
розробляти певну систему, потрібно спочатку здійснити пошук аналогів, дослідити,
проаналізувати їх переваги та недоліки, щоб зрозуміти, яких помилок потрібно
уникнути та які їх переваги доцільно реалізувати.
2.2 Огляд мотошколи «Yellowride»
Першим розглянемо сайт «Yellowride». Сайт «Yellowride» знаходиться за
адресою: https://yellowride.com.ua/. Проаналізуємо його недоліки та переваги.
Переваги:
гарний дизайн;
впорядкованість контенту;
велика інформативність;
добре оптимізований;
багато різноманітних послуг;
є форма зворотьного зв’язку;
зручність використання.
Недоліки:
– занадто багато яскравих кольорів;
– в деяких секціях дуже малий шрифт тексту;
– деякі фотографії поганої якості.
Сайт доволі інформативний, також йому притаманний сучасний дизайн.
Працювати з таким сайтом досить приємно, але є певні некритичні недоліки.
Розглянемо інтерфейс сайту «Yellowride» рис. 2.1 – 2.5.
20
Рисунок 2.1 – Головна сайту Yellowride
Рисунок 2.2 – Послуги мотошколи Yellowride
21
Рисунок 2.3 – Інтерфейс сайту Yellowride
22
Рисунок 2.4 – Фото з занять мотошколи Yellowride
Рисунок 2.5 – Підвал сайту Yellowride
23
2.3 Огляд мотошколи «ProBiker»
Другим в роботі проаналізовано сайт мотошколи «ProBiker». Сайт «ProBiker»
знаходиться за адресою: http://www.pro-biker.com.ua/. Проаналізуємо його недоліки
та переваги.
Переваги:
впорядкованість контенту;
непогано оптимізований;
є форма зворотьного зв’язку;
зручність використання.
Недоліки:
досить старомодний дизайн;
недостатньо інформативний.
Попри невелику кількість переваг і всі недоліки сайт доволі непоганий.
Розглянемо інтерфейс сайту «ProBiker» рис. 2.6 – 2.9.
Рисунок 2.6 – Головна сайту ProBiker
24
Рисунок 2.7 – Інтерфейс сайту ProBiker
25
Рисунок 2.8 – Послуги мотошколи ProBiker
Рисунок 2.9 – Підвал сайту ProBiker
26
2.4 Огляд мотошколи «Ridenowmoto»
Останнім в данній роботі бакалавра проаналізовано сайт мотошколи
«Ridenowmoto». Сайт «Ridenowmoto» знаходиться за адресою:
https://ridenowmoto.com.ua/. Проаналізуємо його недоліки та переваги.
Переваги:
гарний дизайн;
впорядкованість контенту;
нормальна інформативність;
нормально оптимізований;
є форма зворотьного зв’язку;
зручність використання.
Недоліки:
текст погано видно через неправильний вибір кольору;
в деяких секціях дуже малий шрифт тексту;
є некритичні помилки в адаптації.
На сайті доволі багато інформацї, дизайн сайту досить сучасний, виконаний в
стилі мінімалізму, є проблеми з текстом, але вони не критичні.
Розглянемо інтерфейс сайту «Ridenowmoto» рис. 2.10 – 2.13.
27
Рисунок 2.10 – Головна сторінка сайту Ridenowmoto
Рисунок 2.11 – Послуги мотошколи Ridenowmoto
28
Рисунок 2.12 – Інтерфейс сайту Ridenowmoto
Рисунок 2.13 – Підвал сайту Ridenowmoto
29
2.5 Особливості розглянутих інформаційних систем
У таблиці 2.1 наведені основні результати порівняльної характеристика
програмних продуктів. Детальний аналіз існуючих сайтів мотошкол дозволив
прийняти рішення про те які функціональні та не функціональні вимоги повинен
виконувати розроблюваний сайт в межах цієї дипломної роботи.
Таблиця 2.1 – Порівняльна характеристика програмних продуктів
Назва
Yellowride Ridenowmoto
програмного ProBiker мотошкола
мотошкола мотошкола
продукту
1 2 3 4
Читабельність Присутня Присутня Присутня
Інформаційність
4,5 4 4,5
(Від 1 до5 )
Інтерфейс
4,5 3,5 4,5
(Від 1 до5 )
Зручність
використання 4 4 4
(Від 1 до5 )
Функціонал
4 4 4
(Від 1 до5 )
Адаптив під
мобільні 4,5 4 4
пристрої
(Від 1 до5 )
Висновок до розділу 2
В даному розділі виконано порівняльний аналіз аналогів мотошкіл:
«Yellowride», «ProBiker», «Ridenowmoto». Результати аналізу заедено в порівняльну
таблицю в якій можна довідатись про осовні характеристики оглянутих сайтв.
Також визначено на які класифікації діляться сучасні веб-сайти, визначано їх
особливості і призначення.
30
3 ЗАДАЧА СТВОРЕННЯ ІНФОРМАЦІЙНОГО РЕСУРСУ
3.1 Постановка задачі
Будь-яка веб-сторінка яка призиває людину щось зробити називається-
лейдинг. Наприклад, підсисатись на розсилку, купити білет на конференцію, скачати
презентацію і т. д. При його розробці дуже важливу роль відіграє оформлення. Адже
саме дизайн – перше, що помічає користувач, і це є практично основним критерієм
для оцінки всього порталу.
При неправильному оформленні клієнт швидко покине ваш веб-проект і не
буде до нього більше повертатися. Існує одне негласне правило при створенні
дизайну лейдинг пейджу – мінімум фарб. Читачеві потрібно сконцентрувати всю
свою увагу на інформації і даних. Якщо спекулювати фарбами і відтінками різних
кольорів, то це загрожує клієнтові не отримати, то що йому потрібно, в слідстві він
припинить свою роботу на вашому проекті. Коли мова заходить про оформлення
лейдинг ресурсу, то перше, що спадає на думку – це мінімальне використання
кольорової палітри, а також лаконічність у всьому. Існує ще дуже багато правил для
успішного функціонування такого роду сайтів.
Важливо правильно оформити зовнішній лейдинг пейджу, щоб підвищити
поведінкові характеристики. Простими словами, зробити доступ до потрібної
інформації максимально зручним і ефективним. А це залежить від простого,
читабельного тексту і в міру яскравого дизайну.
Ознаками успішного дизайну інформаційного сайту, є:
1. Лаконічність.
2. Використання мінімальної кількості фарб, як правило, це один домінуючий
колір.
3. Мінімальна кількість важкої медіа анімації. Такі елементи важко
завантажуються, через них весь матеріал довго вантажиться.
4. Оптимальне розміщення всієї інформації на сторінці, для більш зручного
використання.
Завданням кваліфікаційної роботи є розробка лейдинг пейджу для мотошколи.
31
На web-сайті буде представлена інформація про послуги, які надає мотошкола, буде
інформація про саму мотошколу, сайт буде адаптивним під телефони, планшети і
монітори різних розмірів, web-сайт буде приємним і водночас простим, для
максимального комфорту використання.
3.2 Вимоги до інформаційного ресурсу мотошколи
Перед розробкою потрібно поставити вимоги до розроблюваного проекту.
Вимоги допоможуть більш детально зрозуміти, яким повинен бути проект.
Структура сайту, доволі важливий момент. Структура є у будь-якого сайту.
Вона включає перелік назв сторінок, а у разі лендингу – блоків або екранів.
Структура проекту буде виглядати так:
1. Про нас.
2. Переваги.
3. Процес навчання.
4. Послуги.
5. Форма для зв’язку.
6. Контакти.
Після розробки структури проекту, потрібно розібратися з основними
вимогами до розроблюваного сайту.
Основні вимоги можна виділити такі:
1. Оригінальна назва. Проста, зрозуміла назва сайту буде легко
запам’ятовуватись користувачам і клієнтам.
2. Приємний дизайн. Занадто яскрава кольорова гамма може бити по очах,
напружувати зір, відволікати від важливої інформації. При виборі оформлення
ресурсу треба добре продумати його дизайн.
3. Швидкість загрузки. Потрібно оптимізувати сайт так, щоб він відкривався і
працював із прийнятною швидкістю, навіть на пристроях з мобільним інтернетом.
4. Оригінальний і якісний контент. Вміст сайту має відповідати бізнес-
завданням, контент має бути унікальним.
32
5. Адаптація під різні пристрої і екрани. Згідно зі статистикою більше 79%
користувачів відвідують сайти з мобільних пристроїв, а не з десктопу. Сайт
потрібно адаптувати під телефони і екрани різних розмірів.
6. Зручний зв’язок. На сайті повинна бути вказана вся контактна інформація:
номери телефонів, соцмережі, місце знаходження. Також для зручності треба
створити форму зворотьного зв’язку.
Висновки до розділу 3
В цьому розділі проведено постановку задачі для створення веб-додатку. В
результаті постановки задачі було визначено, що буде створюватись
односторінковий лейдинг для мотошколи, визначено основні критерії створення
якісного односторінкового сайту.
Також були детально описані вимоги до розроблюваного проекту.
Основні вимоги до розроблюваного сайту можна виділити такі:
приємний дизайн;
оригінальний якісний контент;
адаптація під різні пристрої і екрани;
оптимізована, швидка робота сайту.
33
4 ВИБІР ПРОГРАМНИХ ЗАСОБІВ
4.1 Обгрунтування вибору програмних засобів
Для створення web-орієнтованої інформаційної системи мотошколи, в
кваліфікаційній роботі бакалавра використано такі засоби (рис. 4.1):
HTML, CSS;
скриптована програмування: PHP;
frontend мова програмування: JavaScript.
Обгрунтуємо вибір програмних продуктів.
Рисунок 4.1 – Використані технології
HTML – стандартизована мова гіпертекстової розмітки документів для
перегляду веб-сторінок у браузері. Веб-браузери отримують HTML документ від
сервера за протоколами HTTP/HTTPS або відкривають з локального диска, далі
інтерпретують код в інтерфейс, який відображатиметься на екрані монітора. HTML є
похідною мовою від SGML, успадкувавши від неї визначення типу документу та
ідеологію структурної розмітки тексту. HTML разом із каскадними таблицями
стилів та вбудованими скриптами – це три основні технології побудови веб-
сторінок.
HTML впроваджує засоби для:
- створення структурованого документу шляхом позначення структурного
складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
- отримання інформації із всесвітньої мережі через гіперпосилання;
- створення інтерактивних форм;
- включення зображень, звуку, відео, та інших об'єктів до тексту.
CSS – формальна мова опису зовнішнього вигляду документа (веб-сторінки),
написаного з використанням мови розмітки (найчастіше HTML або XHTML). Також
34
може застосовуватися до будь-яких XML-документів, наприклад SVG або XUL.CSS
має різні рівні та профілі. CSS використовується творцями веб-сторінок для задання
кольорів, шрифтів, стилів, розташування окремих блоків та інших аспектів
представлення цих веб-сторінок. Основною метою розробки CSS є відокремлення
опису логічної структури веб-сторінки (яке виробляється за допомогою HTML або
інших мов розмітки) від опису зовнішнього вигляду цієї веб-сторінки (яке тепер
виробляється за допомогою формальної мови CSS). Такий поділ може збільшити
доступність документа, надати більшу гнучкість та можливість управління його
поданням, а також зменшити складність та повторюваність у структурному вмісті.
JavaScript – динамічна, об'єктно-орієнтована прототипна мова програмування.
Реалізація стандарту ECMAScript. Найчастіше використовується для створення
сценаріїв веб-сторінок, що надає можливість на стороні клієнта (пристрої кінцевого
користувача) взаємодіяти з користувачем, керувати браузером, асинхронно
обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-
сторінки.
JavaScript класифікують як прототипну (підмножина об'єктно-орієнтованої),
скриптову мову програмування з динамічною типізацією. Окрім прототипної,
JavaScript також частково підтримує інші парадигми програмування (імперативну та
частково функціональну) і деякі відповідні архітектурні властивості, зокрема:
динамічна та слабка типізація, автоматичне керування пам'яттю, прототипне
наслідування, функції як об'єкти першого класу.
PHP – це поширена мова програмування загального призначення з відкритим
кодом. PHP спеціально сконструйований для веб-розробок, і його код може
впроваджуватися безпосередньо в HTML. Значною відзнакою PHP від якого-небудь
коду, що виконується на стороні клієнта, наприклад, JavaScript, є те, що PHP-
скрипти виконуються на стороні сервера. Ви навіть можете конфігурувати свій
сервер таким чином, щоб HTML-файли оброблялися процесором PHP, так що
клієнти навіть не зможуть дізнатися, чи отримують вони звичайний HTML-файл або
результат виконання скрипта.
35
PHP доступний для більшості операційних систем, включаючи Linux, багато
модифікації Unix (такі, як HP-UX, Solaris і OpenBSD), Microsoft Windows, Mac OS X,
RISC OS, та багатьох інших. Існує навіть версія PHP для OS / 2. Також в PHP
включена підтримка більшості сучасних веб-сервер, таких, як Apache, Microsoft
Internet Information Server (IIS), Personal Web Server, серверів Netscape і iPlanet,
сервера Oreilly Website Pro, Caudium, Xitami, OmniHTTPd та багатьох інших.
Sublime Text 3 – це текстовий редактор, розроблений для верстальників та
програмістів. Він дозволяє працювати з кодом різних мов програмування. Свою
популярність він набув завдяки кросплатформенній підтримці та розширеним
налаштуванням, які дозволяють користувачеві легко корегувати параметри
програми. Варіацій досить багато – можна змінити зовнішній вигляд, доповнити
функціонал за допомогою різних плагінів.
Редактор містить різні візуальні теми з можливістю завантаження додаткових.
Користувачі бачать весь свій код у правій частині екрана у вигляді міні-карти, при
натисканні на яку можна використовувати навігацію по коду. Є кілька режимів
дисплея. Один із них включає від 1 до 4 панелей, за допомогою яких можна
показувати до чотирьох файлів одночасно. Повноцінний режим показує лише один
файл без будь-яких додаткових меню навколо нього. Sublime Text дозволяє
користувачеві збирати програми та запускати їх без необхідності перемикатися на
командний рядок. Користувач також може налаштувати свою систему збирання та
включити автоматичне збирання програми щоразу при збереженні коду.
Перша версія програми не була кросплатформенною і була доступна тільки
для ОС Windows.
Можливості:
авто збереження;
закладки в файлах;
мінімапа: попередній перегляд повного початкового тексту;
можливість мультивибору тексту;
вбудована підтримка 27 мов програмування;
підсвітка синтаксису, що повністю налаштовується;
36
відповідність дужок, авто доповнення;
підтримка макросів та плагінів.
На рис. 4.2 представлена блок схема створення web-сайту.
Рисунок 4.2 – Блок-схема створення додатку
37
4.2 Апаратні засоби
Для того щоб мати можливість створити інформаційну систему, необхідно
технічно оснастити робоче місце. Залежно від виду роботи використовуються різні
технічні засоби.
Засоби за допомогою яких розроблявся web-додаток:
операційна система: Windows 10 Pro;
процесор: Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz 3.40 GHz;
відео карта: Nvidia GT1050 TI;
оперативна пам’ять: 2 x GOOD RAM DDR4 8Gb 2133MHz CL 15 DMM;
материнська плата: system manufacturer;
бездротовий зв’язок: TL-WN823N N300 Міні Wi-Fi USB-адаптер;
принтер: Brother dcpl2500dr1;
наушники: Sennheiser GSP 350;
wi-fi розтер: TP-Link Archer A64;
комп’ютерна миша: A4Tech Bloody V7M;
клавіатура: A4TECH G800V (X7-G800V);
монітор: DELL 19 дюймів 60Гц, формат зображення: 16:10, розширення
екрану 1280x1024.
Висновки до розділу 4
В даному розділі представлений опис функціонального програмного
середовища та обгрунтовано вибір сучасних технологій веб-програмування для
створення веб-додатку мотошколи. Проведений аналіз мов програмування і аналіз
компілятора в якому буде створений сам веб-додаток. Надається інформація про всі
апаратні засоби які будуть застосовані, для створення сайту.
38
5 РОЗРОБКА І ТЕСТУВАННЯ ІНФОРМАЦІЙНОГО РЕСУРСУ
5.1 Проектування дизайну сайту
В рамках кваліфікаційної роботи бакалавра стояло завдання розробити макети
сторінок таким чином, щоб працювати з системою було зручно, зрозуміло та легко,
як клієнту, так і новому користувачеві.
Макети розроблюваного сервісу зображені на рис. 5.1 – 5.3.
Рисунок 5.1 – Макет верхньої частини сайту
39
Рисунок 5.2 – Макет середньої частини сайту
Рисунок 5.3 – Макет нижньої частини сайту
40
5.2 Розробка web-сайту
Перше, що бачить користувач при вході на сайт – шапку сайту (рис. 5.4). В
шапці профілю користувач бачить початкову інформацію про автошколу. Є кнопка
звязку, після натискання на неї спрацює прокрутка на секцію з зворотнім зв’язком.
Рисунок 5.4 – Шапка сайту
Нижче буде секція “Чому вибирають нас”, в ньому буде інформація про
переваги і особливості послуг, які пропонує мотошкола (рис. 5.5).
Рисунок 5.5 – Секція “Чому обирають нас”
Далі зустрічає інформація про послуги, які надає мотошкола (рис. 5.6). В
блоках буде опис курсів для навчання на певні категорії і ціни на них. Також є
41
кнопки звязку, після натискання на них спрацює прокрутка на секцію з зворотнім
зв’язком.
Рисунок 5.6 – Секція з інформацією про курси, для навчання
В слідуючій секції зображенні учбові мотоцикли мотошколи, їх назва і
кубатура (рис. 5.7).
Рисунок 5.7 – Секція з учбовими мотоциклами
Нижче розташована секція в якій описані етапи проходження навчання в
мотошколі (рис. 5.8).
42
Рисунок 5.8 – Секція з етапами проходження навчання
Також я створив секцію з додатковими послугами мотошколи, які не
стосуються навчання (рис. 5.9). Додаткові платні послуги включаюсь в себе підбір і
огляд мотоциклів і мотоекіпіровки.
Рисунок 5.9 – Секція з послугами в підборі мотоциклів і екіпіровки
43
Була створена форма зворотнього зв’язку (рис. 5.10). Після того, як
користувач заповнить форму і натисне кнопку відправлення, з’явиться вікно з
інформацією про успішне відправлення і повідомлення прийде на пошту
адміністратора.
Рисунок 5.10 – Форма зворотнього зв’язку
І останніми елементами є секція з фотографією команди мотошколи і підвал
сторінки з адресом і контактами (рис. 5.11).
44
Рисунок 5.11 – Секція з фото команди і підвал сторінки з контактною інформацією
5.2 Тестування інформаційного ресурсу
Після розробки було проведено тестування, після якого були зафіксовані всі
помилки для обов’язкового виправлення. Після виправлення помилок, які були
виявлені на першому етапі перевірки, додаток повторно було протестовано. Було
проведено тестування сайту на працездатність скриптів, віджетів, стилів, php файлів.
При тестуванні критичних помилок виявлено не було. Фактично сайт працює
добре на любих екранах і смартфонаї, всі функції виконує.
Ще була протестована швидкість загрузки сайта (рис. 5.12).
45
Рисунок 5.12 – Швидкість загрузки сайта
Сайт протестований під різні екрани і смартфони, адаптація працює добре
(рис. 5.13). Вся інформація виглядає добре, всі силки і кнопки працюють відмінно.
Рисунок 5.13 – Шапка сайту на iPhone XR
Протестував роботу форми зворотнього зв’язку (рис. 5.14). Форма працює
добре на комп’ютерах і смартфонах. Користувач заповнює форму, натискає кнопку
відправити і повідомлення приходить на почту.
46
Рисунок 5.14 – Демонстрація роботи форми
47
Програмний продукт був повністю протестований. Також були протестовані
всі функції. Після тестування даного програмного продукту було встановлено, що
він не має критичних або ж блокуючих помилок.
Висновок до розділу 5
В даному розділі створюється макет web-сайту, макет важливо створювати
перед розробкою тому, що він полегшує і прискорює створення дизайну і
наповнення сайту.
Також продемонстрований результат створення сайту, продемонстрованані всі
блоки і секції які були створені. Було прведено тестування розгобленого сайту.
Після тестування було встановлено, що розроблювана система не має критичних або
ж блокуючих помилок.
48
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута, тобто в ході її виконання
створено web-орієнтовану інформаційну системи мотошколи, написано
пояснювальну записку до кваліфікаційної роботи, розроблено презентацію.
Згідно поставленої мети було вирішено наступні завдання:
– досліджено предметну область, та визначено основні процеси роботи
мотошколи;
– визначено основні вимоги до web-сайту;
– проведено аналіз актуальності проекту на сьогоднішній день;
– проведено аналіз існуючих аналогів;
– проектування web-орієнтованої інформаційної системи;
– оптимізація і адаптація web-сайту;
– перевірка на наявність помилок і багів.
В персепективі розроблену інформаційну систему можна запропонувати до
використання будь-яким мотошколам для розвитку надання послуг в бізнесі.
49
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. HTML book. URL: http://htmlbook.ru/ (дата звернення: 15.01.22).
2. Мануал php. URL: https://www.php.net/manual/ru/index.php (дата звернення:
15.01.22).
3. Ab-w.net. URL: http://ab-w.net/HTML5/html5.php (дата звернення: 15.01.22).
4. Codpen. URL: https://codepen.io/ (дата звернення: 15.02.22).
5. Learn javascript. URL: https://learn.javascript.ru/ (дата звернення: 25.02.22).
6. W3schools. URL: https://www.w3schools.com/ (дата звернення: 25.02.22).
7. 000webhost.com. URL: https://ru.000webhost.com/(дата звернення: 23.03.22).
8. Tproger flexbox. URL: https://tproger.ru/translations/how-css-c-works/ (дата
звернення: 25.02.22).
9. Color scheme. URL: https://colorscheme.ru/html-colors.html (дата з звернення:
25.02.22).
10. Flaticon. URL: https://www.flaticon.com/ru/ (дата звернення: 15.04.22).
50
ДОДАТОК А
Затверджую
Зав. кафедри КНтаСА,
______________ Триус Ю.В.
«____»____________2022 р.
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ МОТОШКОЛИ
Специфікація
482.ЧДТУ. 22091-01 12 01
Листів 2
Розробник ____________________ Зябченко Д.Ю.
Керівник ____________________ Дяченко П.В.
Черкаси – 2022
51
482.ЧДТУ. 22091-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 22091-01 12 01 Текст програми
482.ЧДТУ. 22091-01 34 01 Інструкція користувача
52
ДОДАТОК Б
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ МОТОШКОЛИ
Текст програми
482.ЧДТУ. 22091-01 12 01
Листів 17
Розробник ____________________ Зябченко Д.Ю.
Черкаси – 2022
53
Код головної сторінки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>STUNTEX</title>
<link rel="icon" href="img/icon.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></s
cript>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery
.fancybox.min.css" />
<script
src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.
fancybox.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
"></script>
<script src="plugins/jquery-
maskedinput/jquery.maskedinput.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="top">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="contacts display-flex">
<div class="connection display-flex">
<div class="margin-right6">
<a
href="https://t.me/podbor_wl"><img src="img/telegram.svg"></a>
</div>
<div class="margin-right6">
<a
href="viber://chat?number=%2B380671229940"><img
src="img/viber.svg"></a>
</div>
<div>
<a
href="https://www.instagram.com/stuntexclub/"><img
src="img/instagramSmall.svg"></a>
</div>
</div>
54
<div class="phone">
<a class="phone-link"
href="tel:+380671229940"><p>067 122 99 40</p></a>
<span>Кожний день з 10:00 до
21:00</span>
</div>
<div class="help-zsu">
<a class="flex-center"
target="_blank" href="https://bank.gov.ua/ua/news/all/natsionalniy-
bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-
armiyi">Допоможи ЗСУ</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="midl">
<div class="contents">
<div class="title-h1">
<h1>Мотошкола в Черкасах</br>
Аккредитація МВС</br> Категорії А/А1</br> Навчаємо цілий рік</h1>
</div>
<div class="record-button button">
<a class="flex-center scrollto"
href="#form-scrol">Записатись на заняття</a>
</div>
</div>
<div class="item-box">
<div class="top-item">
<div><img
src="img/calendarMiddle.svg"></div>
<div><p><strong>Курс
навчання</strong> від 2 неділь</br> до 2,5 місяців</p></div>
</div>
<div class="top-item">
<div><img
src="img/motoMiddle.svg"></div>
<div><p><strong>Курс
підготовки</strong> і</br> перепідготовки категорії А і А1</p></div>
</div>
<div class="top-item">
<div><img
src="img/raceMiddle.svg"></div>
<div><p>Закритий і відкритий</br>
<strong>мотодром</strong></p></div>
</div>
</div>
</div>
</div>
</header>
<main class="main">
<section class="why-learn">
55
<div class="why-img">
<img src="img/backHelmet.png">
</div>
<div class="container">
<div class="title-h2">
<h2>Чому виберають нас</h2>
</div>
<div class="rows-why-learn">
<div class="column-why-learn">
<div class="why-item background-
item">
<div class="icon">
<img
src="img/awardBig.svg">
</div>
<p>Офіційне навчання в
<strong>акредитованій</strong> мотошколі</p>
</div>
</div>
<div class="column-why-learn">
<div class="why-item">
<div class="icon">
<img
src="img/examBig.svg">
</div>
<p>Організована сдача екзаменів
в ТСЦ МВС. <strong>90%</strong> наших учеників <strong>здаюь
екзамен</strong> з першого разу</p>
</div>
</div>
<div class="column-why-learn">
<div class="why-item background-
item">
<div class="icon">
<img src="img/motoBig.svg
">
</div>
<p>Нові, легкі, <strong>якісні
мотоцикли</strong></p>
</div>
</div>
<div class="column-why-learn">
<div class="why-item">
<div class="icon">
<img
src="img/racerBig.svg">
</div>
<p>Програми розрахровані на
людей з <strong>різним рівнем підготовки</strong></p>
</div>
</div>
<div class="column-why-learn">
<div class="why-item">
56
<div class="icon">
<img
src="img/bikerBig.svg">
</div>
<p>Мотоінструктори з
<strong>великим досвідом</strong> навчання</p>
</div>
</div>
<div class="column-why-learn">
<div class="why-item background-
item">
<div class="icon">
<img
src="img/calendarBig.svg">
</div>
<p>Заняття в
<strong>зручний</strong> для вас <strong>час</strong></p>
</div>
</div>
<div class="column-why-learn">
<div class="why-item">
<div class="icon">
<img
src="img/noMoneyBig.svg">
</div>
<p><strong>Без доплат</strong>
і прихованих платежів</p>
</div>
</div>
<div class="column-why-learn">
<div class="why-item background-
item">
<div class="icon">
<img
src="img/helmetBig.svg">
</div>
<p>Ви отримаєте повний комплект
<strong>якісної екіпіровки</strong></p>
</div>
</div>
</div>
</div>
</section>
<section class="price-section">
<div class="container">
<div class="title-h2">
<h2>Курси здачі на категорію А і А1</h2>
</div>
<div class="rows">
<div class="price-column">
<div class="plan-column">
<h3>Повний курс навчання
категрія А</h3>
57
<div class="info-column">
<span>❔</span>
<p>Курс навчання водінню
мотоцикла розрахований на осіб віком від 14 років, отримання прав з 16
років. Немає посвідчення водія.</p>
</div>
<div class="info-column">
<span>📅</span>
<p>2-2,5 місяця</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Теоретичний курс 104
години</p>
</div>
<div class="info-column">
<span>✔</span>
<p>10 уроків з водіння на
мотодромі</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Видача документів про
закінчення навчання</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Поетапна оплата</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Іспит у ТСЦ МВС</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Подання техніки до
сервісного центру</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Супровід
мотоінструктора у ТСЦ</p>
</div>
<h3><strong>7500
грн</strong></h3>
<div class="button">
<a class="flex-center"
href="#form-scrol">Записатись на заняття</a>
</div>
</div>
</div>
<div class="price-column">
<div class="plan-column">
58
<h3>Повний курс навчання
категрія А1</h3>
<div class="info-column">
<span>❔</span>
<p>Курс навчання водінню
мотоцикла розрахований на осіб віком від 14 років, отримання прав з 16
років. Немає посвідчення водія.</p>
</div>
<div class="info-column">
<span>📅</span>
<p>2-2,5 місяця</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Теоретичний курс 104
години</p>
</div>
<div class="info-column">
<span>✔</span>
<p>6 уроків з водіння на
мотодромі</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Видача документів про
закінчення навчання</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Поетапна оплата</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Іспит у ТСЦ МВС</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Подання техніки до
сервісного центру</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Супровід
мотоінструктора у ТСЦ</p>
</div>
<h3><strong>6500
грн</strong></h3>
<div class="button">
<a class="flex-center"
href="#form-scrol">Записатись на заняття</a>
</div>
</div>
</div>
59
<div class="price-column">
<div class="plan-column">
<h3>Перепідготовка на
категорію А</h3>
<div class="info-column">
<span>❔</span>
<p>Перепідготовка з
категорій В,С,Д</p>
</div>
<div class="info-column">
<span>📅</span>
<p>від 3-х неділь</p>
</div>
<div class="info-column">
<span>✔</span>
<p>10 уроків з водіння на
мотодромі</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Видача документів про
закінчення навчання</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Поетапна оплата</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Іспит у ТСЦ МВС</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Подання техніки до
сервісного центру</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Супровід
мотоінструктора у ТСЦ</p>
</div>
<h3><strong>5500
грн</strong></h3>
<div class="button">
<a class="flex-center"
href="#form-scrol">Записатись на заняття</a>
</div>
</div>
</div>
<div class="price-column">
<div class="plan-column">
<h3>Перепідготовка на категорію
А1</h3>
60
<div class="info-column">
<span>❔</span>
<p>Перепідготовка з
категорій А,В,С,Д</p>
</div>
<div class="info-column">
<span>📅</span>
<p>від 3-х неділь</p>
</div>
<div class="info-column">
<span>✔</span>
<p>6 уроків з водіння на
мотодромі</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Видача документів про
закінчення навчання</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Поетапна оплата</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Іспит у ТСЦ МВС</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Подання техніки до
сервісного центру</p>
</div>
<div class="info-column">
<span>✔</span>
<p>Супровід
мотоінструктора у ТСЦ</p>
</div>
<h3><strong>4500
грн</strong></h3>
<div class="button">
<a class="flex-center"
href="#form-scrol">Записатись на заняття</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="motorcycles">
<div class="container">
<div class="title-h2">
<h2>Учбова мототехніка</br> нашої
мотошколи</h2>
61
</div>
<div class="rows">
<div class="moto-column">
<div class="plan-column-moto">
<h3>Категорія А</h3>
<div class="moto-img">
<img src="img/ktm-
250.png">
<!-- <a data-
fancybox="gallery" href="img/ktm-250.png"><img class="minimized"
src="img/ktm-250.png"></a> -->
</div>
<div class="moto-icon">
<img
src="img/motoSmall.svg">
</div>
<p>KTM 250 DUKE</p>
<div class="moto-icon">
<img
src="img/engineSmall.svg">
<p>250 кубів</p>
</div>
</div>
</div>
<div class="moto-column">
<div class="plan-column-moto">
<h3>Категорія А</h3>
<div class="moto-img">
<img src="img/mt-03.png">
<!-- <a data-
fancybox="gallery" href="img/mt-03.png"><img class="minimized"
src="img/mt-03.png"></a> -->
</div>
<div class="moto-icon">
<img
src="img/motoSmall.svg">
</div>
<p>Yamaha MT-03</p>
<div class="moto-icon">
<img
src="img/engineSmall.svg">
<p>300 кубів</p>
</div>
</div>
</div>
<div class="moto-column">
<div class="plan-column-moto">
<h3>Категорія А1</h3>
<div class="moto-img">
<img src="img/aprilia-
sr50.png">
62
<!-- <a data-
fancybox="gallery" href="img/aprilia-sr50.png"><img class="minimized"
src="img/aprilia-sr50.png"></a> -->
</div>
<div class="moto-icon">
<img
src="img/motoSmall.svg">
</div>
<p>Aprilia SR50</p>
<div class="moto-icon">
<img
src="img/engineSmall.svg">
<p>50 кубів</p>
</div>
</div>
</div>
<div class="moto-column">
<div class="plan-column-moto">
<h3>Категорія А1</h3>
<div class="moto-img">
<img src="img/yamaha-
aerox-155.png">
<!-- <a data-
fancybox="gallery" href="img/yamaha-aerox-155.png"><img
class="minimized" src="img/yamaha-aerox-155.png"></a> -->
</div>
<div class="moto-icon">
<img
src="img/motoSmall.svg">
</div>
<p>Yamaha Aerox</p>
<div class="moto-icon">
<img
src="img/engineSmall.svg">
<p>155 кубів</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="stages-section">
<div class="container">
<div class="title-h2">
<h2>Етапи проходження навчання</br> і
отримання прав</h2>
</div>
<div class="rows">
<div class="column-stages">
<div class="plan-column border-
none">
63
<div class="number">
<p>01</p>
</div>
<div class="icon">
<img
src="img/phoneBig.svg">
</div>
<div class="text-center">
<p>Ви залишаєте
<strong>заявку</strong>, і ми зв'язуємся з вами для уточнення
деталей</p>
</div>
</div>
</div>
<div class="column-stages">
<div class="plan-column border-
none">
<div class="number">
<p>02</p>
</div>
<div class="icon">
<img
src="img/calendarBig.svg">
</div>
<div class="text-center">
<p><strong>Узгоджуєм
зручний для вас</strong> графік навчання</p>
</div>
</div>
</div>
<div class="column-stages">
<div class="plan-column border-
none">
<div class="number">
<p>03</p>
</div>
<div class="icon">
<img
src="img/raceBig.svg">
</div>
<div class="text-center">
<p>Проходження
<strong>навчання на мотодромі</strong></p>
</div>
</div>
</div>
<div class="column-stages">
<div class="plan-column border-
none">
<div class="number">
64
<p>04</p>
</div>
<div class="icon">
<img src="img/pcBig.svg">
</div>
<div class="text-center">
<p>Після закінчення
навчання ви проходите <strong>внутрішні екзамени</strong></p>
</div>
</div>
</div>
<div class="column-stages">
<div class="plan-column border-
none">
<div class="number">
<p>05</p>
</div>
<div class="icon">
<img
src="img/motorcycleBig.svg">
</div>
<div class="text-center">
<p><strong>Здача
екзаменів</strong> в сервісному центрі</p>
</div>
</div>
</div>
<div class="column-stages">
<div class="plan-column border-
none">
<div class="number">
<p>06</p>
</div>
<div class="icon">
<img
src="img/documentBig.svg">
</div>
<div class="text-center">
<p><strong>Отримання
посвідчення водія</strong></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="services-section">
<div class="services-img">
<img src="img/backR1.png">
</div>
<div class="container">
65
<div class="title-h2">
<h2>Послуги STUNTEX</h2>
</div>
<div class="rows">
<div class="column-services">
<div class="plan-column border-
none">
<div class="icon">
<img
src="img/bicycleBig.svg">
</div>
<div class="text-center">
<h3>Пакет
"Нажопник"</br>15 $</h3>
</div>
<div class="text-center">
<p>Перегляд та оцінка
мотоцикла по фото/відео в Інтернеті. Один лот оголошення з будь-якого
торгового майданчика, вибраний замовником. (<strong>Одноразова послуга
безкоштовна для учнів, які здали екзамен в МРЕО з першого
разу</strong>)</p>
</div>
</div>
</div>
<div class="column-services">
<div class="plan-column border-
none">
<div class="icon">
<img
src="img/mopedBig.svg">
</div>
<div class="text-center">
<h3>Пакет "Rider"</br>100
$</h3>
</div>
<div class="text-center">
<p>Виїзна діагностика та
огляд однієї одиниці мототехніки, обраної замовником. Деталізований
фото/відео звіт, наші рекомендації з оцінками та торг із продавцем
включені в пакет. Вся сторгована сума - Ваші гроші, жодних відсотків
та комісій. Територія покриття - Україна. (<strong>Знижка на послугу
25% для учнів, які здали екзамен в МРЕО з першого разу</strong>)</p>
</div>
</div>
</div>
<div class="column-services">
<div class="plan-column border-
none">
<div class="icon">
<img
src="img/motorcycleBig.svg">
66
</div>
<div class="text-center">
<h3>Пакет "Pro-
Rider"</br>250 $</h3>
</div>
<div class="text-center">
<p>Працюємо "під ключ".
Узгоджуємо бюджет, моделі мотоциклів та інші побажання замовника.
Аналізуємо ринок, виїжджаємо на огляди та діагностику, робимо
деталізовані фото/відео звіти з оцінками та нашими рекомендаціями.
Торг із продавцем включений. Вся сторгована сума - Ваші гроші, жодних
відсотків та комісій. Супроводжуємо до покупки. Від нас Ви їдете на
чудовому байку. На весь період володіння мотоциклом, який підібрали –
безкоштовна підтримка. Територія покриття мотопідбирання - Україна,
виїзна діагностика: Київ+Україна (за погодженням із замовником).
(<strong>Знижка на послугу 20% для учнів, які здали екзамен в МРЕО з
першого разу</strong>)</p>
</div>
</div>
</div>
<div class="column-services">
<div class="plan-column border-
none">
<div class="icon">
<img
src="img/knightBig.svg">
</div>
<div class="text-center">
<h3>Послуга підбору</br>
екуіпіровки</br>60 $</h3>
</div>
<div class="text-center">
<p>Комплексний підбір
екіпіровки, як б/у так і нового, в рамках Вашого бюджету. Послуга
включає професійну консультацію та відвідування кількох
спеціалізованих магазинів. (<strong>Учні отримають безкоштовно
рекомендації і допомогу в підборі екіпіровки</strong>)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="form-section" id="form-scrol">
<div class="form-img-left">
<img src="img/pointerLeft.png">
</div>
<div class="form-img-right">
<img src="img/pointerRight.png">
</div>
<div class="overlay js-overlay-thank-you">
67
<div class="popup js-thank-you">
<h3>Дякуєм за заявку, ми зв'яжемось з
вами найближчим часом</h3>
<div class="close-popup js-close-thank-
you"></div>
</div>
</div>
<div class="container">
<div class="title-h2">
<h2>Заповніть форму</br> і ми зв'яжемось
з вами</h2>
</div>
<div class="display-center">
<form class="form" id="form" name="form">
<h3>Зв'яжыться з нами, за
додатковими питаннями</h3>
<div class="form-flex">
<div>
<input type="text" class="form-
field" name="name" placeholder="Введіть ім'я">
</div>
<div>
<input type="text" class="form-
field" name="phone" placeholder="Введіть ваш номер телефона">
</div>
<div>
<button class="btn flex-center
form-button"><span class="text-button">Відправити</span></button>
<span>Відправляючи форму,
ви погоджуєтесь з умовами обробки <br> і використання персональних
даних</span>
</div>
</div>
</form>
</div>
</div>
</section>
<section class="foto-section">
<div class="container">
<div class="title-h2">
<h2>Наша команда</h2>
</div>
<div class="rows">
<div class="column-foto-main">
<a data-fancybox="gallery"
href="img\squad.png"><img class="minimized" src="img\squad.png"></a>
</div>
</div>
</div>
</section>
68
<section class="contacts-section">
<div class="container">
<div class="title-h2">
<h2>Контакти і адреси</h2>
</div>
<div class="rows">
<div class="column-contacts center">
<div class="contact-block">
<div class="info_contact-
block">
<img
src="img/labelSmall.svg">
<p><strong>бульвар
Шевченка, 460, Черкаси, Черкаська область</strong></p>
</div>
<div class="info_contact-
block">
<img
src="img/phoneSmall.svg">
<a class="phone-link"
href="tel:+380671229940"><p><strong>067 122 99 40</strong></p></a>
</div>
</div>
</div>
<div class="column-contacts">
<div class="map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10381.570272
41367!2d32.09181779095459!3d49.42039184475056!3m2!1i1024!2i768!4f13.1!
3m3!1m2!1s0x0%3A0x8e2ed28fbfde4c25!2sCherkasy%20State%20Technological%
20University!5e0!3m2!1sru!2sua!4v1649525414355!5m2!1sru!2sua"
width="100%" height="400" style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="top padding-bottom">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="contacts display-flex">
<div class="connection display-flex">
<div class="margin-right6">
<a
href="https://t.me/podbor_wl"><img src="img/telegram.svg"></a>
</div>
<div class="margin-right6">
69
<a
href="viber://chat?number=%2B380671229940"><img
src="img/viber.svg"></a>
</div>
<div>
<a
href="https://www.instagram.com/stuntexclub/"><img
src="img/instagramSmall.svg"></a>
</div>
</div>
<div class="phone">
<a class="phone-link"
href="tel:+380671229940"><p>067 122 99 40</p></a>
<span>Кожний день з 10:00 до
21:00</span>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/scrol.js"></script>
</body>
</html>
70
ДОДАТОК В
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ МОТОШКОЛИ
Інструкція користувача
482.ЧДТУ. 22091-01 34 01
Листів 7
Розробник ____________________ Зябченко Д.Ю.
Черкаси – 2022
71
Для початку роботи з сайтом не потрібо встановлювати спеціальних програм,
або мати якісь спеціальні засоби. Все що потрібно щоб зайти на сайт – це доступ до
інтернету і любий сучасний браузер. Ви можете користуватися сайтом з телефонів,
планшетів, або моніторів різних розмірів.
Сайт одно сторінковий, це наглядно видно на рис. В.1 – В.3.
Рисунок В.1 – Верхня частина сайту
72
Рисунок В.2 – Середня частина сайту
73
Рисунок В.3 – Нижня частина сайту
Сайт адаптований під телефони, планшети і монітори різних розмірів (рис. В.4
– В.5).
74
Рисунок В.4 – Вигляд сайту на iPhone XR
75
Рисунок В.5 – Вигляд сайту на iPad Air
76
На сайті є кнопки “Записатись на заняття”, після нажаття на кнопку спрацює
скрол і сайт опуститься на форму зворотнього зв'язку (рис. В.6).
Рисунок В.6 – Кнопка “Записатись на заняття”
Форма працює добре на комп’ютерах і смартфонах. Користувач заповнює
форму, натискає кнопку відправити і повідомлення приходить на почту, все дуже
просто. Демонстрація працездатності форми зворотнього зв’язку зображена на рис.
В.7.
77
Рисунок В.7 – Демонстрація працездатності форми зворотнього зв’язку