Веб-ресурс для онлайн-запису відвідувачів дитячої бібліотеки

Могилей, Андрій Васильович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/6173
Title:	Веб-ресурс для онлайн-запису відвідувачів дитячої бібліотеки
Authors:	Підгорний, Микола Володимирович Могилей, Андрій Васильович
Keywords:	ВЕБ-РЕСУРС;ДИТЯЧА БІБЛІОТЕКА;HTML;SQL.
Issue Date:	12-Jun-2024
Abstract:	Значимість дитячої бібліотеки у сфері виховної роботи багатогранна і багатозначна. Цілі роботи дитячої бібліотеки співвідносяться з цілями школи – це розвиток культури особистості учнів, їхнє пристосування до життя в суспільстві, створення підґрунтя для усвідомленого вибору і подальшого вивчення майбутнього. Більшість дитячих бібліотек зіштовхнулася з проблемою автоматизації бібліотечних процесів, яка може спричинити велике навантаження на бібліотекаря. Вживання систем автоматизації дозволить дитячій бібліотеці змогу вивільнити людину від виконання рутинних операцій збору, перетворення, передавання та використання інформації. Актуальність випускної кваліфікаційної роботи (ВКР) зумовлена розв'язанням проблем, пов'язаних із необхідністю автоматизації діяльності дитячої бібліотеки. Метою роботи є розробка веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки з метою автоматизації діяльності бібліотечної справи. Об’єкт дослідження: є діяльність дитячої бібліотеки. Предмет дослідження: є автоматизація діяльності дитячої бібліотеки за допомогою веб-ресурсу для онлайн запису відвідувачів. Методи дослідження: В роботі застосовувалися теоретичні методи: аналіз програмних продуктів, аналіз літератури з проблеми дослідження; порівнянь – для здійснення порівнянь існуючих веб-ресурсу для онлайн запису.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6173
Appears in Collections:	122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування)
Files in This Item:
File	Description	Size	Format
Пояснювальна записка_Могилей Андрій_КНС-2201_2023-2024.pdf Restricted Access		1.51 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
 
Факультет інформаційних технологій і систем 
 
Кафедра комп’ютерних наук та системного аналізу 
 
 
 
 
 
 
Пояснювальна записка 
до кваліфікаційної роботи 
бакалавра 
(освітньо-кваліфікаційний рівень) 
 
на тему: «Веб-ресурс для онлайн запису відвідувачів дитячої бібліотеки» 
 
 
 
 
 
    Виконав: студент 4 курсу, групи КНС-2201 
                                                              
спеціальності  122  «Комп’ютерні науки» 
                                                                         (шифр і назва спеціальності) 
  
освітня програма «Комп’ютерні науки та                                                                                                                               
(назва освітньої програми) 
прикладне програмування                                                                                                                                                              
                                                                       
 
Могилей Андрій Васильович 
 
Керівник __________ _Підгорний М.В.     
                                                                          (прізвище та ініціали) 
 
Рецензент __________   Мельник В.П.   
                                                                          (прізвище та ініціали) 
    
  
Черкаси, 2024 рік 
2 
 
Черкаський державний технологічний університет 
Факультет Інформаційних технологій і систем 
Кафедра Комп’ютерних наук та системного аналізу 
Освітньо-кваліфікаційний рівень Бакалавр 
Спеціальність 122  – Комп’ютерні науки 
Освітня програма Комп’ютерні науки та прикладне програмування 
 
 
 
ЗАТВЕРДЖУЮ 
Завідувач кафедри КНСА  
_______________ Юрій ТРИУС 
«____» _____________ 2024 р. 
 
 
 
ЗАВДАННЯ 
на кваліфікаційну роботу бакалавра студенту 
Могилею Андрію Васильовичу 
(прізвище, ім‘я, по батькові) 
1. Тема роботи  Веб-ресурс для онлайн запису відвідувачів дитячої бібліотеки 
                                  
 
Керівник роботи     Підгорний М.В., к.т.н., доцент                    
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
затверджені наказом університету від «15» лютого 2024 р. №43/04. 
 
2. Строк подання студентом роботи до 10 червня 2024 року 
3. Вихідні дані до роботи:  
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних. 
Звіт з виробничої практики. Звіт з переддипломної практики. 
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити): 
Вступ 
4.1. Дослідження предметної області. Огляд існуючих систем для запису відвідувачів  бібліотеки. 
4.2. Проектування та розробка веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки.  
 
4.3. Тестування веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки. 
Висновки.  
5 . Перелік додатків (з точним зазначенням назв додатків): 
5.1. Додаток А. Специфікація 482.ЧДТУ.42288-01. 
5 .2. Додаток Б. Текст програми. 
5.4. Презентація у вигляді 19 слайдів. 
 
 
6 . Консультанти розділів роботи 
 
 
3 
Прізвище, ініціали та Підпис, дата 
Розділ посада 
завдання видав завдання прийняв 
консультанта 
    
    
 
7. Дата видачі завдання 15.01.2024 
  
 
КАЛЕНДАРНИЙ ПЛАН 
Строк виконання 
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка 
етапів роботи 
1 Видача завдання на кваліфікаційну роботу 
15.01.2024 Виконано 
бакалавра. 
2 Аналіз літературних джерел, об’єкту та предмету 
до 12.02.2024 Виконано 
дослідження. 
3 Написання теоретичного розділу кваліфікаційної 
до 18.03.2024 Виконано 
роботи бакалавра. 
4 Написання аналітичного розділу кваліфікаційної 
до 01.04.2024 Виконано 
роботи бакалавра. 
5 Написання практичних розділів й висновків до 
до 01.05.2024 Виконано 
кваліфікаційної роботи бакалавра. 
6 Передзахист кваліфікаційної роботи бакалавра 
03.06.2024 Виконано 
на засіданні кафедри КНСА. 
7 Подання роботи завідувачу кафедри КНСА. до 08.06.2024 Виконано 
8 Захист кваліфікаційної роботи бакалавра. 12.06.2024 Виконано 
    
    
    
 
 
Студент                                   _____________________________     Андрій МОГИЛЕЙ 
(підпис) 
 
Керівник роботи                    ____________________________       Микола ПІДГОРНИЙ 
                                           (підпис)      
 
 
                                                               
 
 
4 
РЕФЕРАТ 
Кваліфікаційна робота бакалавра містить: 46 с., 20 рис., 1 таблиця, 8 
використаних джерел, 2 додатки. 
Актуальність теми. Значимість дитячої бібліотеки у сфері виховної роботи 
багатогранна і багатозначна. Цілі роботи дитячої бібліотеки співвідносяться з цілями 
школи – це розвиток культури особистості учнів, їхнє пристосування до життя в 
суспільстві, створення підґрунтя для усвідомленого вибору і подальшого вивчення 
майбутнього. Більшість дитячих бібліотек зіштовхнулася з проблемою автоматизації 
бібліотечних процесів, яка може спричинити велике навантаження на бібліотекаря. 
Вживання систем автоматизації дозволить дитячій бібліотеці змогу вивільнити 
людину від виконання рутинних операцій збору, перетворення, передавання та 
використання інформації. Актуальність випускної кваліфікаційної роботи (ВКР) 
зумовлена розв'язанням проблем, пов'язаних із необхідністю автоматизації діяльності 
дитячої бібліотеки. 
Метою роботи є розробка веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки з метою автоматизації діяльності бібліотечної справи. 
Задачі кваліфікаційної роботи бакалавра: 
 проаналізувати предметну область; 
 розробити концептуальну модель системи; 
 проаналізувати аналоги системи; 
 спроектувати веб-ресурс для онлайн запису відвідувачів дитячої бібліотеки; 
 провести тестування. 
Об’єкт дослідження: є діяльність дитячої бібліотеки. 
Предмет дослідження: є автоматизація діяльності дитячої бібліотеки за 
допомогою веб-ресурсу для онлайн запису відвідувачів. 
Методи дослідження: В роботі застосовувалися теоретичні методи: аналіз 
програмних продуктів, аналіз літератури з проблеми дослідження; порівнянь – для 
здійснення порівнянь існуючих веб-ресурсу для онлайн запису. 
 
 
5 
Ключові слова: ВЕБ-РЕСУРС, ДИТЯЧА БІБЛІОТЕКА, HTML, PHP і SQL. 
ABSTRACT 
The bachelor's thesis contains: 46 p., 20 fig., 1 table, 8 references, 2 appendices. 
Relevance of the topic. The significance of the children's library in the field of 
educational work is multifaceted and multifaceted. The goals of the children's library are 
correlated with the goals of the school - it is the development of the culture of the students' 
personality, their adaptation to life in society, the creation of the basis for conscious choice 
and further study of the future. Most children's libraries are faced with the problem of 
automating library processes, which can cause a heavy workload for the librarian. The use 
of automation systems will allow the children's library to free a person from performing 
routine operations of collecting, transforming, transmitting and using information. The 
relevance of the final qualification work is due to the solution of problems related to the 
need to automate the activities of the children's library. 
The aim of the work is to develop a web resource for online registration of visitors 
to the children's library in order to automate the activities of librarianship. 
Tasks of the bachelor's qualification work: 
- analyze the subject area; 
- develop a conceptual model of the system;  
- analyze analogues of the system;  
- design a web resource for online registration of visitors to the children's library;  
- сonduct testing. 
Object of research: there is the activity of a children's library. 
The subject of the research: there is an automation of the children's library with the 
help of a web resource for online registration of visitors. 
Research methods: The following theoretical methods were used in the work: 
analysis of software products, analysis of literature on the research problem; comparisons – 
to make comparisons of existing web resources for online booking. 
Keywords: WEB RESOURCE, CHILDREN'S LIBRARY, HTML, PHP і SQL. 
 
 
6 
ЗМІСТ 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ........ 8 
ВСТУП .................................................................................................................................. 9 
1 ОГЛЯД ІСНУЮЧИХ РІШЕНЬ ОНЛАЙН-БІБЛІОТЕК ............................................. 12 
1.1 Опис завдання …………………… ......................................................................... 12 
1.2 Огляд існуючих рішень ........................................................................................... 12 
1.3 Опис предметної області ......................................................................................... 15 
1.4 Клієнт-серверна архітектура ................................................................................... 16  
1.5 REST архітектура ..................................................................................................... 19     
1.6 Програмна архітектура веб-ресурсу ……………….. ........................................... 21 
Висновки до розділу 1 ................................................................................................... 24 
2 СТВОРЕННЯ ОНЛАЙН-БІБЛІОТЕКИ ....................................................................... 25 
2.1 Архітектура веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки .. 25 
2.2 Застосування HTML для створення веб-ресурсу для онлайн запису відвідувачів 
дитячої бібліотеки .......................................................................................................... 27 
    2.2.1 Створення домашньої сторінки за допомогою HTML .................................. 29 
    2.2.2 Створення логіну за допомогою HTML ......................................................... 30 
    2.2.3 Створення сторінки “Коментувати” за допомогою HTML .......................... 31 
    2.2.4 Створення сторінки “Реєструватись” за допомогою HTML ........................ 32 
    2.2.5 Створення сторінки “Книги” за допомогою HTML ...................................... 32 
2.3 Створення SQL-таблиць веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки ........................................................................................................................ 33 
    2.3.1 Створення таблиці admin ................................................................................. 35 
    2.3.2 Створення таблиці books .................................................................................. 36 
    2.3.3 Створення таблиці comments ........................................................................... 36 
    2.3.4 Створення таблиці fine ..................................................................................... 36 
    2.3.5 Створення таблиці issue book .......................................................................... 37 
    2.3.6 Створення таблиці student ................................................................................ 37 
    2.3.7 Створення таблиці message .............................................................................. 37 
 
 
7 
    2.3.8 Створення таблиці timer ................................................................................... 38 
    2.3.9 Створення таблиці verify .................................................................................. 38 
2.4 Застосування PHP для створення веб-ресурсу для онлайн запису відвідувачів 
дитячої бібліотеки .......................................................................................................... 39 
Висновки до розділу 2 ................................................................................................... 41 
3 ТЕСТУВАННЯ ДОДАТКУ ........................................................................................... 42 
3.1 Особливості тестування додатків ........................................................................... 42 
3.2 Кейси перевірки … .................................................................................................. 44 
Висновки до розділу 3 ................................................................................................... 46 
ВИСНОВКИ ....................................................................................................................... 47 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 48 
Додаток А. Специфікація 482.ЧДТУ.2288-01 ... ……………………………………… 49 
Додаток Б. Текст програми............................................................................................... 51 
 
 
 
 
 
 
 
 
 
 
 
 
8 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 
СКБД – система керування базами даних; 
БД – база даних; 
АРМ − автоматизоване робоче місце; 
ПЗ − програмне забезпечення; 
ПК − персональний комп'ютер; 
ІС − інформаційна система; 
ЕОМ − електронно-обчислювальна машина;  
HTTP-протокол (Hyper Text Transfer Protocol) – протокол передачі гіпер-текстових 
документів; 
PHP − препроцесор гіпертексту.  
 
 
9 
ВСТУП 
В епоху інформаційних технологій, коли світові індустрії переходять в 
оцифровану, комп'ютеризовану індустрію, перед нами з кожним днем відкривається 
все більше нових горизонтів, що дозволяють черпати знання з будь-якої точки світу. 
Все стає можливим з появою сервісів, що задовольняють мету інтернет-користувача. 
Інтернет сам по собі є невичерпним джерелом даних та інформації, на перший 
погляд, хаотично розкиданих по мережі Інтернет. При першому зануренні в цю 
безодню даних незрозуміло в якому порядку слід вести пошук, для цього нашими 
помічниками є пошукові сервіси, які постають перед нами у вигляді пошукової 
системи, вона служить навігатором в інтернет-просторі книг. За допомогою 
пошукових систем нам не потрібно долати величезні відстані до читального залу або 
магазинів з книжковими полицями, щоб потім довго шукати необхідне чтиво і тільки 
потім починати вбирати знання, так необхідні нашому розуму для його розвитку. 
Зараз книги можна легко знайти, завдяки електронним бібліотекам, в яких 
зберігаються терабайти підручників, романів, наукових праць і всього, що 
залишилося нам від наших предків в різні періоди часу, в різних цивілізаціях. Вже 
зараз фахівці злагоджено працюють над оцифруванням старовинних книг для їх 
подальшого збереження для нащадків [1]. 
Все більше інформації, яку ми використовуємо в повсякденному житті, 
надходить в електронному форматі, тим самим витісняючи традиційні друковані 
видання, які вже оцифровуються. Така форма подачі інформації дозволяє 
організувати роботу з інформацією і доступ до неї на зовсім іншому рівні, 
немислимому раніше. Друковані видання зберігають свою естетичну цінність і 
значимість, але вони вже не є єдиним ресурсом для передачі досвіду і знань в 
рукописному форматі, іншими словами, джерелом інформації, хоча це робить нас 
більш залежними від електронних пристроїв, що входять до складу Інтернету речей, 
але заперечувати їх корисність для сучасної людини недоречно.  
Актуальність теми кваліфікаційної роботи бакалавра. Актуальність дитячої 
онлайн-бібліотеки для онлайн запису відвідувачів набуває все більшої ваги.  
 
 
10 
Дитяча онлайн-бібліотека для онлайн запису дозволяють покращити 
управління бібліотечним процесом. 
Основна перевага онлайн-бібліотеки полягає в їх та доступності. Вони можуть 
бути доступні в смартфонах та планшетах. 
Метою роботи є забезпечення автоматизації бібліотечних процесів, шляхом 
створення і впровадження веб-ресурсу для онлайн запису відвідувачів дитячої 
онлайн-бібліотеки. 
Завдання кваліфікаційної роботи бакалавра:  
–  провести огляд літератури та аналіз сучасних тенденцій в бібліотечній сфері, 
включаючи розгляд онлайн запис відвідувачів дитячої онлайн-бібліотеки; 
–  визначити вимоги до онлайн-бібліотеки для онлайн запису відвідувачів, 
враховуючи потреби та особливості відвідувачів; 
– розробити архітектуру та дизайн онлайн-бібліотеки, включаючи його 
функціональні можливості та інтерфейс користувача; 
–  реалізувати онлайн-бібліотеку на основі обраного програмного середовища 
розробки, використовуючи сучасні технології та практики програмування; 
– провести тестування та валідацію розробленого додатку, перевірити його 
працездатність та відповідність вимогам; 
– зробити висновки щодо досягнутих результатів, впливу онлайн-бібліотеки на 
бібліотечний процес. 
Об’єкт дослідження: діяльність дитячої бібліотеки. 
Предмет дослідження: є автоматизація діяльності дитячої бібліотеки за 
допомогою веб-ресурсу для онлайн запису відвідувачів. 
Методи дослідження:  
–  літературний аналіз – дослідження і аналіз наукових статей, книг, публікацій 
та інших джерел, що стосуються онлайн-бібліотек. Цей метод дозволяє 
отримати теоретичну базу та вивчити попередні дослідження в цій галузі; 
– дослідження ринку – вивчення наявних ринкових рішень у сфері онлайн-
дитячих бібліотек. Це включає аналіз конкурентів, їх функціональності, 
користувацького досвіду та реакцій споживачів; 
 
 
11 
– розробка та створення веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки. За допомогою цього методу можна оцінити ефективність та користь 
веб-ресурсу, провести порівняльний аналіз до та після впровадження; 
–  аналіз даних – збір, обробка та аналіз даних, що стосуються ефективності та 
продуктивності онлайн-бібліотеки до та після використання веб-ресурсу для 
онлайн запису відвідувачів дитячої бібліотеки. 
Отже, кваліфікаційна робота бакалавра пропонує новий підхід до вирішення 
проблем бібліотечної сфери. Результати розробки веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки сприятимуть якості управління та підвищенню 
ефективності бібліотечних процесів, що має великий потенціал для покращення 
діяльності бібліотек для юнацтва та молоді. 
  
 
 
12 
1 ОГЛЯД ІСНУЮЧИХ РІШЕНЬ ОНЛАЙН-БІБЛІОТЕК 
1.1. Опис завдання 
Головним завданням кваліфікаційної роботи бакалавра є створення веб-ресурсу 
для онлайн запису відвідувачів дитячої бібліотеки. 
Онлайн-бібліотека – це структурована система завантаження та зберігання 
літератури у вигляді файлових джерел різного формату, з можливістю їх пошуку та 
сортуванню, тощо. 
Розроблена система буде надавати наступні можливості: 
– створення особистого кабінету на веб-ресурсі для онлайн запису відвідувачів 
дитячої бібліотеки з можливістю керувати своїм профілем, особистими даними, 
змінювати пароль, тощо; 
– перегляд усіх доступних літературних джерел на веб-ресурсі, можливість 
додавати книги в свою колекцію, ставити оцінки та писати на них відгуки; 
– можливість користувачу завантажувати книги на даний веб-сервіс і скачувати з 
нього літературу; 
– можливість відслідковувати за оголошенням на тему появи нових книг на сайті 
у вбудованому автором  календарі з такими подіями. 
– можливість пошуку потрібної літератури, сортування її за назвою, автором, 
жанром. 
– можливість адмініструвати веб-сервіс і приймати рішення чи публікувати 
відгук на дану книгу, додати різні оголошення, тощо. 
1.2 Огляд існуючих рішень 
Перші згадування про електронні онлайн бібліотеки з’явилися ще у 1970-х 
роках минулого століття. Одним із найстаршим представників онлайн бібліотек є 
проєкт “Гутенберг”, що об’єднав в собі твори на англійській та німецькій мовах. 
Першим успішним впровадженням електронної бібліотеки була бібліотека конгресу 
США, що надає вільний і безкоштовний доступ до електронних носіїв історії США у 
 
 
13 
рамках проєкту “Пам’ять Америки”. Спочатку такі веб-сервіси зберігали файли у 
декількох різних форматах: один для можливості перегляду файлів онлайн, а інший – 
формат для завантаження зазначених файлів на свою ЕОМ. 
Популярним форматом зберігання носіїв книг того часу був TXT та HTML, 
пізніше популярним став PDF, завдяки тому, що книги такого формату зручно було  
відкривати і читати в браузері. 
З тих часів кількість користувачів, що відвідували бібліотеку і отримували там 
потрібні книги почала значно зменшуватися, а користувачів веб-сайтів з такою самою 
інформацією почала стрімко зростала. 
У зв’язку з цим більшість великих бібліотек розпочали створювати власні 
аналоги електронних бібліотек, де малася можливість як скачати літературу так і 
забронювати її і пізніше забрати паперовий екземпляр. Прикладом сьогодення може 
бути Google Books, що містить в собі більше 12 мільйонів книг з різних бібліотек 
США. 
Дані літературні носії були оцифровані як відскановані копії за технологією 
оптичного розпізнавання і збереження оригіналу у вигляді книг у центрах Google, що 
також дозволяє здійснити пошук книг через даний веб-сервіс. Також можна 
пригадати World Digital Library – проєкт конгресу США, в який пізніше приєдналися 
ще і інші країни, де зібрані найбільш цінні матеріали з історії та культури всього світу.  
Існуючі насьогодні схожі інформаційні системи онлайн бібліотек можна 
охарактеризувати значними можливостями у підході збереження даних, 
інтерфейсами користувача, функціональними можливостями, архітектурою 
програмного забезпечення та способами заробітку і тп. Зрозуміло, що для розробки 
аналогічного веб-ресурсу потрібно використовувати весь наявний інструментарій для 
веб-технологій, максимальне використання баз даних, швидкодію роботи сайту. 
Сайт сервісу MyBook виконаний в дуже зручному стилі і відповідає критеріям 
зручного інтерфейсу, інтуїтивно можна знайти потрібну кнопку і розділ з 
книжковими жанрами. Цей сервіс надає доступ до 246 000 книг і 46 000 аудіокниг, з 
преміум-підпискою, що дозволяє читати онлайн весь каталог електронних файлів. 
При бажанні сервіс стабільно працює на мобільних платформах архітектури IOS 
 
 
14 
(версії вище 10) і Android (версії вище 4.1). Для ознайомлення з книгами, що вас 
цікавлять, на сайті є пробний період і він діє 14 днів, тобто у вас є рівно 2 тижні для 
повного занурення. 
 При необхідності ви можете завантажити цікаву для нас книгу на свій пристрій, 
і читати навіть без доступу до інтернету, сайт і мобільний додаток працюють як одне 
ціле, вся бібліотека даних оновлюється щохвилини, синхронізуючи дані вашого 
облікового запису. Це дозволяє читачеві по дорозі на роботу запустити книгу на 
одному пристрої, а продовжити з планшета або персонального комп'ютера, всі 
замітки, виділені цитати і примітки також переносяться на всі перераховані пристрої, 
забезпечуючи комфорт на будь-якому підручному пристрої. Мотивація при читанні 
дозволяє нам засвоїти якомога більше інформації. 
 Сервіс веде статистику вашого процесу читання, відправляючи щомісячну 
статистику процесу за весь місяць на вашу електронну пошту. Також у системі є 
добірки, які підказують, що зараз популярно серед читачів, або що почитати взимку, 
влітку чи на карантині.  
Другий аналог, це група компаній «ЛітРес», яка є власником сервісу MyBook. 
Що стосується сервісу «ЛітРес», то в асортимент цього сервісу входить близько 1 
мільйона книг різними мовами, 48 тисяч з яких доступні для вільного прочитання, на 
цьому сайті часто проводяться акції та знижки, що дозволяють заощадити на покупці 
книг. Придбану книгу можна скачати у форматах FB2, EPUB, PD, MOBI, TXT та 
інших. Коли ви купуєте електронну книгу, вона залишається у вашому обліковому 
записі. Щомісяця каталог поповнюється 5 тисячами робіт.  
Позитивною стороною є надання безкоштовного фрагмента для читання книги, 
який становить чверть самої книги.  
Основні переваги мало чим відрізняються від вищезгаданого сервісу 
«MyBook». Усі наявні рішення – це веб-сайти, що надають доступний інтерфейс для 
отримання потрібної користувачеві інформації з можливістю взаємодії з різними 
інтеграціями на сайті.  
Деякі з цих складових створені як бізнес, тобто для отримання винагороди в 
процесі продажу книг або підписки на сайт, інші інтеграції – безкоштовні. 
 
 
15 
1.3 Опис предметної області 
З розвитком можливостей комп’ютерних технологій, людство насьогодні не має 
уяви свого буття без інтернету. 
Даний веб-ресурс дозволяє виконувати значну кількість операцій, не виходячи з 
свого помешкання: мається можливість придбати будь-які товари за допомогою 
одного кліку, можливість найти необхідну інформацію за задавши ключові слова в 
пошуковій системі, такій як Google або іншій. Неймовірно, що сьогодні за даною 
організацією стоять десятки тисяч людей, що працюють, покращають послуги, які 
надаються компанії, і все це для того, щоб зробити наше користування інтернет 
швидше, якісніше та інформативніше. Через існування інтернету листування за 
допомогою листів, які доставляються листоношами уже давно стало не актуальним. 
Людство спілкується, використовуючи онлайн конференції, онлайн чати, соціальні 
мережі, месенджери. Таке саме відбувається і з бібліотеками, зараз важко найти 
відвідувачів, які йдуть до бібліотеки, якщо їм потрібно найти якусь літературу. З 
першого погляду здається, що бібліотеками користуються лише студенти, школярі 
або викладачі, проте крім них все одно є значна кількість людей, що читає книги. 
Перше, що користувачі роблять – це шукають книгу в інтернеті, на сайтах, де її 
мається можливість переглянути, скачати та прочитати. Після цього вже можливо 
задуматися щодо придбання паперової книги, або завітати за нею до бібліотеки і взяти 
її для читання на певний час. 
Переваги онлайн-бібліотеки: 
– наявна можливість отримувати необхідну інформацію з будь-якого місця за  
умови доступу до глобальної мережі “Інтернет”; 
– висока швидкодія отримання даних за допомогою використання створених 
програмних алгоритмів; 
– електронні книги можна скачати, в свою чергу паперові книги можуть губитися, 
псуватися, тощо; 
– мається можливість навігації по отриманому електронному документу. 
Недоліки онлайн-бібліотеки: 
 
 
16 
– сама система є складною при розробці в програмному плані, необхідно 
продумати бізнес логіку, можливості веб-сервісу, архітектуру; 
– існує необхідність заповнити базу даних потрібними книгами; 
– деякі паперові літературні носії не існують у електронному форматі, тому 
потрібно буде виконувати сканування копії, або друкувати її вміст в 
електронному форматі; 
Основні цілі онлайн-бібліотеки: 
– надання пізнавальної функції для людей, що шукають конкретну інформацію за 
різними категоріями, предметними областями, стимулювання різного роду 
освіти за рахунок книг; 
– забезпечення локального та віддаленого доступу користувачів веб-ресурс до 
даного інформаційного ресурсу; 
– зберігання носіїв книг у різних форматах таких як: pdf, txt, djvu, fb2, epub, тощо. 
1.4 Клієнт-серверна архітектура 
Для виконання своїх основних функцій, веб-ресурс для онлайн запису 
відвідувачів дитячої бібліотеки має бути реалізований як веб-сервіс [2,3]. 
Даний технологічний напрямок стрімко розвивається і постійно з’являться нові 
технології, що кращі за попередні. Сучасний веб-ресурс зазвичай створюється за 
клієнт-серверною архітектурою, що є популярним архітектурним підходом для 
проектування складних, розподілених веб-сервісів, що займаються обміном та 
взаємодією даними. Такий веб-ресурс складається з трьох частин: сервера та клієнта, 
що взаємодіють між собою і самої мережі, яка забезпечує цю взаємодію. 
Зазвичай сервери є незалежними один від одного, так само як клієнти. Завдяки 
цьому досягається значна гнучкість системи, оскільки дані компоненти можна легко 
змінювати, адже немає прив'язаності серверу до клієнта чи навпаки. 
Іноді бувають такі ситуації, коли клієнт може звертатися до різних серверів, або 
один сервер обробляє множину різних запитів від клієнтів. 
 
 
17 
Зазвичай сервер і клієнт сприймаються як програмні модулі, що знаходяться на 
різних фізичних комп’ютерах. Якщо вони знаходяться на одній ЕОМ, то вона 
називається локальним сервером. 
Сервер – це будь-яка ЕОМ, окрім клієнту, який займається роботою з базою 
даних, відправляючи різні команди для отримання, оновлення, додавання або 
видалення даних, тобто реалізує шар основної бізнес-логіки, також саме зберігання 
даних у вигляді бази даних може здійснюватися на сервері рис 1.1. 
Клієнт – це може бути ЕОМ кінцевого користувача, може бути програмне 
забезпечення, або фахівці, які хочуть отримати доступ до інформації. 
Клієнт проводить взаємодію з сервером, надаючи останньому потрібні 
команди. Саме програмне забезпечення клієнтського модуля в основному і відповідає 
за зовнішній вигляд інтерфейсу користувача, його адаптивність щодо різних 
програмних платформ, приладів, тощо. 
Взаємодія між ними відбувається через глобальну мережу “Інтернет” за 
визначеними протоколами. 
 
Рисунок 1.1 – Ілюстрація архітектури клієнт-сервер 
Клієнт-серверну архітектуру можна розділити на два види: 
– перший вид – це такий вид веб-сервісів, де уся бізнес-логіка та робота з базами 
даних відбувається безпосередньо на сервері, а клієнтський модуль надає лише 
функції щодо представлення. 
 
 
18 
– другий вид – у цьому виді сервер займається тільки роботою з даними у базі 
даних, а остаточна обробка цих даних і їх відображення відбувається на клієнті. 
Прикладом може бути стільниковий телефон. 
Загальний алгоритм функціонування представленої архітектури виглядає 
наступним чином: користувач виконує якусь програмну операцію на клієнті, і дані від 
цієї операції надсилаються на сервер, на сервері вони обробляються необхідним 
чином і користувачеві надсилається відповідь, яка йому відображається на клієнті.  
Одну таку ітерацією створює значна кількість бізнес-логіки, валідацій, перевірок, 
робота з базою даних, а користувач, який зробив запит отримує потрібний результат. 
Основні задачі серверу – це отримувати запити від клієнту або клієнтів, 
наприклад по протоколу HTTP і виконувати вказані операції з базою даних. 
Операції, що виконуються можна порівняти з методами протоколу HTTP. HTTP 
– це протокол прикладного рівня, який був створений для передачі HTML документів, 
а сьогодні може передавати дані різних форматів. Завдяки наявним методам GET, 
DELETE, POST, PUT мається можливість щодо опису звичайного CRUD, тобто 
створити, прочитати, видалити або оновити якусь інформацію. HTTP – це протокол з 
стеку TCP/IP, що застосовується для передачі інформації моделлю “клієнт-сервер”. 
Даний протокол керує певними веб-ресурсами, на які вказують у самому запиті 
клієнти, це і називається URL. 
Зазвичай застосування HTTP протоколу лежить в основі REST архітектурного 
стилю та RESTful веб-сервісів. Тобто завдяки вище перерахованим операціям 
надходять запити на сервер, а потрібні для цього параметри передаються в самому  
запиті. Часто дані в такому підході представляють у вигляді JSON, але формат може 
бути інакшим, наприклад, XML. 
Розглянемо структуру HTTP повідомлення: 
– перший рядок визначає метод протоколу, шлях доступу до ресурсу – URL і 
версію даного протоколу; 
– заголовки, в яких находиться тіло повідомлення та його параметри і додаткові 
метадані; 
 
 
19 
– тіло повідомлення містить самі дані повідомлення, яке необхідно передати, 
повинно відділятися від заголовків пустим рядком. 
Тіло повідомлення може бути відсутнім, але початковий рядок і заголовки 
повинні бути обов’язково. У відповідності щодо версії протоколу HTTP 1.1 
обов’язковим в тілі повідомлення також є заголовок Host, що вказує на ім’я домена, 
для якого призначається цей запит рис. 1.2. 
 
 
Рисунок 1.2 – Приклад HTTP запиту 
1.5 REST архітектура 
Для забезпечення мережевої функції веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки використовується REST архітектура. REST – це 
принцип, що включає в свою структуру набір архітектурних підходів для створення 
гнучкої мережі. Важливо розуміти, що це є не сам протокол, а саме концепція.  
Цей принцип надає веб-ресурсу доступ до мережевих ресурсів і указує на 
взаємодією компонентів в мережі між собою. 
Також REST протокол не повинен залежати від мережевого рівня, не повинен 
зберігати додаткової проміжної інформації про запити і повідомлення. 
Завдяки цьому мається можливість будувати продуктивні веб-ресурси, завдяки 
застосування кешування, надійні і масштабовані веб-ресурси, через те, що мається 
можливість  просто змінювати і підтримувати їх відповідно до новітніх технологій, 
та нових вимог до веб-сервісів рис. 1.3. 
 
 
 
20 
 
Рисунок 1.3 – Приклад роботи REST API 
Вказаний принцип був запропонований Роєм Філіднгом, який застосовувався 
при створенні протоколу HTTP. 
Дані у REST мають пересилатися певними об’ємами в різних форматах, таких 
як HTML, XML, JSON. REST протоколи обов’язково мають підтримувати кешування. 
Основні особливості застосування REST архітектури при створенні веб-ресурсу 
для онлайн запису відвідувачів дитячої бібліотеки: 
– продуктивність – взаємодія всіх компонентів веб-сервісу може бути 
домінуючим фактором ефективності і продуктивності мережі з точки зору 
користувача веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки; 
– масштабованість, яка забезпечує об’єднання великої кількість компонентів і 
взаємодій між цими компонентами; 
– простий доступний інтерфейс, який відображає яка має бути ідентифікація 
ресурсів та якого вигляду повинні бути повідомлення; 
– компоненти архітектури повинні бути відкриті до змін і покращення для 
задоволення потреб користувачів. Можна виконувати зміни навіть при 
працюючій на цьому принципі веб-ресурсі для онлайн запису відвідувачів 
дитячої бібліотеки; 
– зв’язки між компонентами зрозумілі і прості, мається можливість переносити 
компоненти з одного місця в інше разом з програмним кодом; 
– наявна стійкість до відмов на рівні веб-ресурсу, коли з якихось причин  
виходить з ладу якась одна складова. 
Вимоги, того, аби називати веб-ресурс REST-системою: 
– обов’язкова архітектура клієнт-сервер; 
 
 
21 
– відсутність стану, тобто не мається необхідність зберігати стан клієнта на 
сервері, це означає протокол без зберігання стану; 
– обов’язкова присутність кешування; 
– єдиний доступний інтерфейс, що дозволяє кожному веб-сервісу 
еволюціонувати самостійно; 
– веб-ресурс для онлайн запису відвідувачів дитячої бібліотеки має бути 
поділений на шари, кожен з яких займається своєю логікою. 
1.6 Програмна архітектура веб-ресурсу  
Коли мова йде про архітектуру веб-сервісів, то мається три основних варіанти: 
MVC, MVP, MVVM.  
Розглянемо кожен із них щодо можливості застосування в веб-ресурсі для 
онлайн запису відвідувачів дитячої бібліотеки. 
MVC – це одне із популярних архітектурних рішень, тут за модель відповідає 
сутності в базі даних, що відповідають на запити контролера і змінюють свій стан, за 
представлення – відповідає за відображення даних моделі клієнту, а контролер – це 
модуль, що відповідає за отримування запитів від користувачів та делегуванням 
команд на потрібні сервіси рис. 1.4 [5]. 
 
 
Рисунок 1.4 – Ілюстрація архітектури MVC 
 
 
22 
MVP – це похідна з MVC, що значніше спрямована на створення 
користувацького інтерфейсу. В ролі моделі зазвичай виступають дані, що необхідно 
відобразити, за представлення – відображення вказаної моделі і надсилання запитів 
до користувача, що керує подіями. Презентер, або користувач – це компонента, що 
відповідає за взаємодію між моделлю і її представленням і реалізує всю логіку 
обробки і відображення даних рис. 1.5. 
 
 
Рисунок 1.5 – Ілюстрація архітектури MVP 
MVVM – це архітектура, що дозволяє поділити модель та її представлення, щоб 
можна було замінювати їх незалежно один від одного. Модель і представлення 
відповідають за ті самі функції як у MVC, а ViewModel або модель представлення в 
свою чергу відповідає за абстракцією моделі і представлення, зберігає модель, що має 
бути приведена для представлення та потрібні для цього команди рис. 1.6. 
 
 
Рисунок 1.6 – Ілюстрація архітектури MVVM 
При правильному дотриманні концепції архітектури мається можливість 
досягнути так званої “чистої архітектури” за визначенням Роберта Мартіна. Це 
 
 
23 
означає, що архітектура повинна бути незалежною від фреймворків, вона легка для 
тестування, вона буде незалежною від зміни інтерфейсу користувача,  бази даних, чи 
інтеграції з іншим веб-сервісом. Автором обраною буде архітектура MVC, вона є 
стандартною і найбільше доступною для реалізації веб-сервісів.  
 
 
24 
Висновки до розділу 1 
В першому розділі автором було проведено огляд існуючих рішень щодо веб-
ресурсу для онлайн запису відвідувачів дитячої бібліотеки, а саме: 
– опис завдання; 
– огляд існуючих рішень; 
– опис предметної області; 
– клієнт-серверна архітектура; 
– REST архітектура; 
– програмна архітектура веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки. 
  
 
 
25 
2. СТВОРЕННЯ ОНЛАЙН-БІБЛІОТЕКИ 
2.1 Архітектура веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки 
Основним завданням розроблюваного веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки є «Автоматизація діяльності дитячої бібліотеки».  
Створюваний веб-ресурс для онлайн запису відвідувачів дитячої бібліотеки 
повинен передбачати перегляд, обробку, введення нових даних, пошук даних за 
певним критерієм.  
Програмна реалізація повинна забезпечувати виконання наступних функцій:  
– внесення даних про читачів;  
– внесення даних про книги;  
– внесення даних про співробітників;  
– додавання, видалення та редагування даних;  
– отримання необхідної інформації про борги читача, угоди, здійснені з тією чи 
іншою книгою;  
– створювати зведену відомість на основі прибуткового документа; 
– отримання необхідної інформації про залишки книг;  
– заповнення читацької форми. 
 Вихідні дані:  
– відомості про читачів;  
– відомості про твори;  
– відомості про співробітників;  
– інформація про місця зберігання. 
Формування документів:  
– видача літератури читачами;  
– повернення літератури читачами;  
– отримання книжок;  
– рух отриманої літератури;  
 
 
26 
– заміна у разі втрати книжки;  
– списання літератури. 
Звітна документація:  
– список боржників;  
– створення зведеної книги;  
– список операцій, виконаних з усіма книгами;  
– звіт про книжкове забезпечення шкільної бібліотеки;  
– список позиції, що залишилася в каталозі;  
– список читачів бібліотеки;  
– бібліотечний витяг. 
Вимоги до надійності  
– забезпечувати контроль інформації, що вноситься;  
– передбачити блокування некоректних дій користувача;  
– забезпечувати цілісність інформації, що зберігається;  
– захист даних від несанкціонованого доступу.  
Створюваний веб-ресурс для онлайн запису відвідувачів дитячої бібліотеки  
доведеться використовувати працівникам шкільної бібліотеки, а також читачеві для 
пошуку різної літератури та користувачів бібліотеки. 
Веб-ресурс для онлайн запису відвідувачів дитячої бібліотеки розділений на три 
модулі. Адміністратор має доступ до всіх функцій програми, включаючи систему 
адміністрування, що дозволяє управляти інтерфейсами і правами користувачів. 
Бібліотекар відповідає за обробку видань, має повний набір функцій по роботі з 
читачами і веде облік каталогізації в бібліотечному фонді. Читач може автоматично 
знайти потрібне йому видання і переглянути інформацію про книги, а також 
переглянути власну форму. Таким чином, визначено основні функції, які будуть 
реалізовані в інформаційній системі для автоматизації бізнес-процесів шкільної 
бібліотеки. 
Перш ніж фізично спроектувати базу даних, необхідно визначитися з СУБД, 
щоб правильно визначити типи даних, які використовуються для створення бази 
даних. Для автоматизації обробки даних інформаційної системи необхідно створити 
 
 
27 
єдиний репозиторій - базу даних. У додатку для відображення реальних об'єктів і 
явищ предметної області використовуються такі об'єкти конфігурації, як довідники і 
документи. База даних цієї інформаційної системи створюється з довідників та 
документів. Коротка характеристика деяких системних каталогів: 
– у довіднику «Читачі» зберігаються дані про читачів, зареєстрованих у дитячій 
бібліотеці; 
– у довіднику «Співробітники» зберігаються дані про працівників бібліотеки; 
– у довіднику «Коментарі» зберігаються коментарі, які залишили учні; 
– у довіднику «Каталог видань» зберігаються дані про твори, що зберігаються в 
дитячій бібліотеці; 
– у довіднику «Вид робіт» зберігаються дані про види робіт, що зберігаються в 
бібліотеці; 
– у довіднику «Теми творів» зберігаються дані за тематичними напрямками 
публікацій; 
– у довіднику «Автори» зберігаються дані про авторів друкованих видань; 
– у довіднику «Постачальники» зберігаються дані про постачальників літератури. 
2.2 Застосування HTML для створення веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки  
HTML (HyperText Markup Language, укр. “Мова гіпертекстової розмітки”) – це 
мова розмітки гіпертексту, що застосувується для створення веб-сторінок. Служить 
для розмітки текстового документу шляхом присвоєння певних параметрів 
елементам, які розпізнає браузер [5]. 
HTML-документи складаються з тегів – спеціальних позначок, які розміщені на 
початку та наприкінці елемента відображення. На початку елемента вказано, як має 
бути відформатований атрибут усередині нього, а наприкінці – де саме форматування 
закінчиться. 
Теги – це елементи мови HTML, які визначають тип та форматування вмісту на 
веб-сторінці [5]. 
 
 
28 
Розглянемо основні HTML теги [5]: 
– <html> – визначає початок та кінець HTML документа; 
– <head> – визначає метадані веб-сторінок, такі як заголовок, ключові слова та 
інші; 
– <title> – визначає заголовок веб-сторінки, який відображається в браузері; 
– <body> – визначає основний контент веб-сторінки; 
– <h1> до <h6> – визначає заголовки різного рівня на веб-сторінці; 
– <p> – визначає абзац тексту; 
– <em> – використовується для виділення певного тексту в абзаці; 
– <b> – використовується, щоб зробити текст жирним; 
– <i> – використовується для виділення тексту курсивом; 
– <u> – використовується для встановлення підкреслення тексту; 
– <a> – визначає посилання на іншу веб-сторінку або документ; 
– <img> – використовується, щоб вбудувати зображення в HTML документ; 
– <li> – визначає елемент списку; 
– <table> – використовується для створення таблиці; 
– <tr> – використовується для створення рядків у таблиці; 
– <td> – використовується для введення даних у таблицю; 
– <style> – використовується для додавання методів до вмісту шляхом введення 
коду в сам файл HTML. 
Існує також інші HTML теги, таких як <form>, <input>, <div>, <span> тощо, які 
допомагають позначити різні елементи веб-сторінок. 
Усі HTML теги розділяються на основні дві категорії: вбудовані та блочні. 
Блочні теги застосовуються для визначення блочних елементів на веб-сторінці, таких 
як заголовки, абзац та інші елементи, які займають цілі рядки. Вбудовані теги 
застосовуються для визначення елементів, які розміщені в інших структурних 
елементах, таких як посилання, зображення та інші. 
Щоб застосовувати HTML теги, потрібно включати їх в код веб-сторінки, 
обрамивши “<” та “>”. Деякі теги мають атрибути, що визначають додаткові 
 
 
29 
властивості цих елементів. Наприклад, атрибут “href” для тегу <a>, що вказує URL-
адресу посилання, або атрибут “src” для тегу <img>, що вказує шлях до зображення. 
Для створення HTML-файлу використовують: 
– програму-блокнот; 
– спеціальні десктопні редактори (наприклад, Visual Studio Code, Notepad ++, 
Sublime Text, WebStorm, Eclipse, Atom); 
– онлайн-редактори (наприклад, CodePen, JSFiddle). 
Використання основних HTML тегів є досить важливим для тих, хто хоче 
опанувати процес розробки веб-сторінок. Це допомагає розуміти зміст та структуру 
веб-ресурсу та визначати різні елементи, які можна застосовувати для створення 
привабливого та цікавого дизайну веб-сторінки. 
2.2.1 Створення домашньої сторінки за допомогою HTML 
Створення веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки 
розпочато із створення домашньої сторінки, де користувач може зареєструватися; 
увійти в список книжок, вибрати “Коментувати”, створити свій логін і реєструватись 
рис. 2.1. 
 
Рисунок 2.1 – Домашня сторінка онлайн-бібліотеки 
 
 
 
30 
Ця домашня сторінка показує графік роботи бібліотеки, її електронну пошту і 
номер телефону її власника рис 2.2. 
 
 
Рисунок 2.2 – Номер телефону, електронна пошта і соціальні медіа 
В нижній частині домашньої сторінки користувач може зв’язатися з власником 
бібліотеки через соціальні медіа, такі як Facebook, Google і Instagram. 
2.2.2 Створення логіну за допомогою HTML 
Щоб користувач міг створити свій логін в онлайн-бібліотеці, автором  веб-
ресурсу для онлайн запису відвідувачів дитячої бібліотеки створено html-сторінку для 
логіна. В цій сторінці користувач може увійти в список книжок, вибрати домашню 
сторінку, створити свій логін, вийти з логіну і реєструватись рис. 2.3. 
 
Рисунок 2.3 – Сторінка логіну в онлайн-бібліотеку 
 
 
31 
Сторінка логіну показує форму логіна користувача для створення логіну, там 
потрібно ввести своє ім’я і пароль.  
Якщо ім’я користувача чи пароль порожні, логін користувача не буде 
створений.  
Після введення свого імені і пароля користувач вже створив свій логін. 
2.2.3 Створення сторінки “Коментувати” за допомогою HTML 
Щоб користувач веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки 
міг коментувати свою думку про цю бібліотеку,  створено сторінку “Коментувати”, 
яка є доступною для логін-користувачів. 
 Користувач може увійти в домашню сторінку, список книжок, вибрати 
домашню сторінку, залишити коментарі рис. 2.4. 
 
 
Рисунок 2.4 – Сторінка “Коментувати” 
Ця сторінка показує де можна написати свій коментар і натиснути 
“Коментувати”. 
 
 
 
 
32 
2.2.4 Створення сторінки “Реєструватись” за допомогою HTML 
Щоб користувач реєструвався до веб-ресурсу для онлайн запису відвідувачів 
дитячої бібліотеки, автором створено сторінку “Реєстрація”. На цій сторінці 
користувач може вибрати “Реєстрація”, вибрати домашню сторінку, створити свій 
логін і реєструватись рис. 2.5. 
 
 
Рисунок 2.5 – Сторінка “Реєструватись” 
Сторінка показує форму реєстрації користувача, там потрібно ввести своє ім’я, 
прізвище, username (ім’я користувача), пароль, номер користувача, електронну пошту 
і номер телефону. Якщо один чи декілька з них порожні, реєстрація користувача не 
буде виконуватися. 
2.2.5 Створення сторінки “Книги” за допомогою HTML 
Щоб переглянути наявні книги автором веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки створено сторінку, яка показує список книжок. Ця 
сторінка доступна для користувачів, які увійшли в онлайн-бібліотеку через логін. Там 
користувач може увійти в список книжок, вибрати домашню сторінку, вийти з логіну 
і підписатися рис. 2.6. 
 
 
33 
 
 
Рисунок 2.6 – Сторінка “Книги” 
2.3 Створення SQL-таблиць веб-ресурсу для онлайн запису відвідувачів 
дитячої бібліотеки 
SQL – це непроцедурна мова БД, орієнтована на великий обсяг оброблюваної 
інформації. Непроцедурна означає, що в ній, перш за все, приділяється увага даним 
які необхідно отримати, видаляти або вставляти, а не яким чином це робити. 
Кількісна-орієнтованість визначає, що за допомогою цієї мови можна обробляти 
значні масиви інформації [6]. 
SQL застосовується для підтримки реляційних БД. 
Вона може вирішувати такі задачі, як підтримка веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки : 
– задачу модифікація нової чи існуючої структури БД; 
– задачу зміни параметрів безпеки веб-ресурсу; 
– задачу налаштування повноважень користувача для управління інформацією 
веб-ресурсу; 
– задачу отримання необхідної інформації з бази даних; 
– оновлення вмісту корегованої бази даних. 
 
 
34 
SQL використовується для управління БД, які її підтримують. До них 
відносяться Oracle, Microsoft Access, Informix або Sybase. 
Синтаксис  SQL гнучкий, як і на будь-якій іншій мові програмування, але є 
необхідність дотримуватися певних правил: 
– простору і відступи; 
– малі літери / прописні; 
– ключові слова. 
Оператори SQL не чутливі до регістру. Однак, як тільки буде створене пряме 
посилання на вміст бази даних, написання потрібно чітко дотримуватися. Основою ж 
SQL-виразів – оператори та ключові слова. 
База даних – це система управління інформацією, яка повинна ефективно 
обробляти великі масиви даних, без помилок і протиріч, а також  може цифровим 
чином відображати логічні відносини. 
Набори даних можливо компілювати з різних підмножин, що відображені 
відповідно до вимог прикладних програм і їх користувачів. 
Складні бази даних застосовують у системах ERP (WWS або WaWi). 
В даний час мається декілька типів організацій баз даних, які поділяються 
ставленням до керування ресурсами [6]: 
– ієрархічні бази даних; 
– мережеві бази даних; 
– реляційні бази даних; 
– об’єктно-орієнтовані бази даних; 
– автономні бази даних. 
Найстарішою моделлю бази даних є модель ієрархічної бази даних, що 
представлена у вигляді ієрархічної деревоподібної структури. 
Ієрархічна деревоподібна структура дозволяє доступ до читання з великою 
швидкодією. Недоліком деревовидних посилань є те, що вони самі і зв’язки між ними 
повинні бути прописані з самого початку. 
За основними принципами, мережева БД дуже схожа на ієрархічну, але 
дозволяє утворювати різнобічні вузли. 
 
 
35 
При з’єднанні вузлів один з одним, створюється мережа, якою користувач може  
безпосередньо отримати доступ до шуканого запису бази даних. Мережеві бази даних  
підходять для відображення таких структур, як семантичних мереж, географічного 
розташування, мереж компанії і персональних мереж. 
У реляційній БД інформація зберігається у вигляді таблиць, які взаємопов’язані. 
Оптимізація даними в таблиці застосовується за допомогою рядків і/або стовпців. 
Запис інформації є рядком і містить всі поля даних в стовпчиках. Цей тип БД є 
найбільш привабливим і вживаним в бізнес-рішеннях. 
В об’єктно-орієнтованій БД використовується принцип зберігання інформації 
та її функції в об’єкті. Вона використовує парадигми ООП і, зокрема, написання на 
відповідних мовах таких як, C++, java або С#. 
Маються також об’єктні БД, об’єктно-реляційні, функціональні, які поєднують 
властивості БД перерахованих вище типів. 
Автономна БД – це новітній тип організації БД, в якому застосовується 
принципи машинного навчання для управління структурою даних. Це БД, що 
самостійно впорядковуються та можуть підтримувати повну функціональність без 
контролю користувачів або адміністраторів і здатні самі відновлювати втрачені або 
пошкоджені ресурси. 
2.3.1 Створення таблиці admin 
Для адміністрування веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки в роботі було створено таблицю admin. Вона містить базу даних про 
онлайн-відвідувачів дитячої бібліотеки, які зареєструвалися в цей сайт рис. 2.7. 
 
 
Рисунок 2.7 – Таблиця admin 
 
 
 
36 
Після реєстрації в сайт, логін і доступ до сайту зберігатимуться в sql-таблиці. 
 2.3.2 Створення таблиця books 
Для поповнення літературного фонду веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки в роботі було створено таблицю, вона називається 
books. Ця таблиця містить базу даних про наявні книжки рис. 2.8. 
 
 
Рисунок 2.8 – Таблиця books 
 2.3.3 Створення таблиці comments 
Для збереження побажань користувачів літературного фонду веб-ресурсу для 
онлайн запису відвідувачів дитячої бібліотеки в роботі було створено таблицю. 
Таблиця comments містить базу даних про користувачів, які коментують і задають 
питання про онлайн-бібліотеку чи щось інше рис. 2.9. 
 
 
Рисунок 2.9 – Таблиця comments 
 
 2.3.4 Створення таблиці fine 
Для комерціалізації веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки в роботі було створено таблиця fine, що містить базу даних про 
відвідувачів дитячої бібліотеки, які платять власнику за книги на кілька днів рис. 2.10. 
 
 
37 
 
Рисунок 2.10 – Таблиця fine 
 2.3.5 Створення таблиця issue book 
У разі неповернення літератури автором веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки в роботі було створено таблиця issue book, що містить 
базу даних про відвідувачів, які ще не повернули книги рис. 2.11. 
 
 
Рисунок 2.11 – Таблиця issue book 
 2.3.6 Створення таблиця student 
Для вивчення контингенту веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки в роботі було створено таблицю student, що містить базу даних про онлайн-
відвідувачів дитячої бібліотеки, які зареєструвалися в цей сайт як учні рис. 2.12 . 
 
 
Рисунок 2.12 – Таблиця student 
 
 
 2.3.7 Створення таблиця message 
Для інформування керівництва веб-ресурсу для онлайн запису відвідувачів 
дитячої бібліотеки в роботі було створено таблицю message, вона містить базу даних 
 
 
38 
про відвідувачів дитячої бібліотеки, які повідомляють керівнику бібліотеки особисто 
рис. 2.13. 
 
 
Рисунок 2.13 – Таблиця message 
 2.3.8 Створення таблиця timer 
Для вчасного повернення отриманої книги в роботі було створено таблицю 
timer, що містить базу даних про відвідувачів, які мають час повернути книгу або 
проґавили рис. 2.14. 
 
Рисунок 2.14 – Таблиця timer 
 
 2.3.9 Створення таблиці verify 
Для створення онлайн складової дитячої бібліотеки створено таблицю timer яка 
містить базу даних відвідувачів, які відправили книгу на перевірку рис. 2.15. 
 
 
Рисунок 2.15 – Таблиця verify 
 
 
39 
2.4 Застосування PHP для створення веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки  
PHP (Hypertext Preprocessor (Препроцесор гіпертексту)) – це широко 
використовувана мова сценаріїв загального призначення з відкритим вихідним кодом. 
Перевагою PHP є надання web-розробникам можливості швидкого створення 
динамічних web-сторінок [7]. 
Значною перевагою PHP від якого іншого коду, що виконується на стороні 
клієнта, наприклад, JavaScript, є те, що PHP-скрипти виконуються саме на стороні 
сервера. Мається можливість конфігурувати власний сервер таким чином, щоб 
HTML-файли оброблялися процесором PHP, так що клієнти навіть не мають гадки 
про це, чи отримують вони звичайний HTML-файл або результат виконання 
визначеного скрипта. 
Сьогодні існують три основні області, де застосовується PHP [7]: 
– створення скриптів для виконання на стороні сервера; 
– створення скриптів для виконання у командному рядку; 
– створення додатків GUI (графічних інтерфейсів), що виконуються на стороні 
клієнта. 
PHP доступний для значної більшості наявних операційних систем, таких як, 
Linux, багато модифікації Unix (такі, як HP-UX, Solaris і OpenBSD), Microsoft 
Windows, Mac OS S, RISC OS, та ін. Маються версія PHP для OS/2. 
Також в PHP інтегрована підтримка більшості сучасних веб-ресурсів, таких, як 
Microsoft Internet Information Server (IIS), Apache, Personal Web Server, сервера Oreilly 
Website Pro, серверів Netscape і iPlanet, Caudium, Xitami, OmniHTTPd та багатьох 
інших. Для більшості існуючих серверів PHP поставляється в якості модуля, для 
інших, що підтримують стандарт CGI, PHP може функціонувати як процесор CGI. 
В даний час PHP підтримує наступні БД: 
– Adabas D; 
– Oracle (OC17 і OC18); 
– Ingres; 
 
 
40 
– InterBase; 
– dBase; 
– Empress; 
– Ovrimos; 
– FrontBase; 
– FilePro (тільки читання); 
– PostgreSQL; 
– Solid; 
– mSQL; 
– Direct MS-SQL; 
– Hyperwave; 
– MySQL; 
– Sybase; 
– Informix; 
– Velocis; 
– Unix dbm; 
– ODBC. 
PHP також дає можливість “спілкування” з іншими сервісами з застосуванням 
таких протоколів, як LDAP, SNMP, NNTP, IMAP, HTTP, POP3, COM (на платформах 
Windows) та ін. 
Виходячи з перелічених зверху характеристик застосуємо PHP для створення 
веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки.  
 
 
41 
Висновки до розділу 2 
В другому розділі було створено веб-ресурс для онлайн запису відвідувачів 
дитячої бібліотеки за допомогою таких мов, як: HTML; SQL; PHP. Сформовано 
множину екранних форм та таблиць веб-ресурсу для онлайн запису відвідувачів 
дитячої бібліотеки .   
 
 
42 
3 ТЕСТУВАННЯ ДОДАТКУ 
3.1 Особливості тестування додатків та безпека 
Тестування веб-ресурсів має особливості, оскільки це специфічне середовище з 
власними обмеженнями та характеристиками. Представимо деякі з основних 
особливостей з тестування  веб-ресурсу.  
Серед переліку програм, призначених для автоматизації тестування, особливу 
увагу слід приділити серії програмних продуктів Selenium [8]. Їх різновид включає 
Selenium Grid, Selenium RC, Selenium IDE, Selenium Server та Selenium WebDriver. 
Selenium WebDriver – це досить гнучкий інструмент для автоматизованого 
тестування веб-ресурсів на базі множини бібліотек для різних мов програмування, 
таких як Python, Java, Ruby, .Net (C#), Perl, PHP, JavaScript. 
Даний інструментарій підтримує роботу на базі операційних систем Windows, 
macOS та Linux, а також у найпоширеніших браузерах Firefox, Safari, Google Chrome, 
Edge, Internet Explorer та навіть у деяких браузерах без графічного інтерфейсу. 
Використовується Selenium WebDriver найчастіше з такими видами тестування, як 
функціональне та регресійне. Для того, щоб пізнати логіку функціонування Selenium 
WebDriver потрібно розібратися з основними компонентами його взаємодії.  
Архітектура Selenium WebDriver складається з чотирьох компонентів, таких як: 
– клієнтська бібліотека Selenium; 
– драйвер конкретного браузера; 
– сам браузер; 
– протокол JSON Wire (JavaScript Object Notation). 
В якості методу тестування був обраний метод «тестування чорної скриньки». 
Тестування чорної скриньки — це процес перевірки продукту на відповідність 
вимогам без вивчення програмного коду та без доступу до бази даних.  
Безпека веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки є 
особливо актуальною проблемою. Вона зводиться до методів та алгоритмів 
забезпечення кожного з трьох рівнів безпеки, які повинна мати кожна інформаційна 
 
 
43 
система – аутентифікації, авторизації та захисту даних. Авторизація та доступ до 
даних, які об'єднані в один повний алгоритм для забезпечення безпеки інформаційної 
системи. Користувач дитячої бібліотеки також використовує дані зі свого цифрового 
сертифіката для автентифікації користувача. Всі запити, що надходять в систему, 
фільтруються. Дані захищені цифровим підписом. Приватні та публічні ключі 
авторизованого користувача зберігаються в базі даних. Відкритий ключ зберігається 
в незашифрованому вигляді, а закритий ключ записується в базу даних в 
зашифрованому вигляді. Симетричний ключ для шифрування та розшифровки 
закритого ключа користувача генерується за допомогою спеціального алгоритму. 
Алгоритм може бути реалізований в будь-якому веб-додатку, у випадку з веб-ресурсу 
для онлайн запису відвідувачів дитячої бібліотеки використовувався CSRF-токен. 
Токен CSRF (Cross Site Request Forgery) – це унікальне, секретне, 
непередбачуване значення, яке генерується серверним додатком і передається клієнту 
таким чином, щоб воно було включено в наступний HTTP-запит, зроблений клієнтом. 
Коли робиться пізніший запит, серверна програма перевіряє, чи містить запит 
очікуваний токен, і відхиляє цей запит, у разі якщо токен недійсний або відсутній. 
Токени CSRF можуть запобігти CSRF-атакам, не дозволяючи зловмиснику створити 
повністю дійсний HTTP-запит, придатний для передачі користувачеві-жертві. 
Використана в роботі автентифікація – це перевірка облікових даних 
користувача, сюди входить ідентифікатор користувача або ім'я користувача та 
пароль, для підтвердження вашої особи. Потім система перевіряє, чи використовуєте 
ви свої облікові дані. Незалежно від того, чи це публічні, чи приватні мережі, система 
автентифікує особу користувача за допомогою паролів для входу. Зазвичай 
аутентифікація здійснюється за допомогою імені користувача та пароля, хоча є й інші 
способи аутентифікації. 
Фактори аутентифікації визначають множину різних елементів, які система 
застосовує для перевірки особистості, перш ніж надати індивідуальний доступ до 
чогось. Особистість відвідувача бібліотеки може бути визначена за тим, що вона знає, 
і коли справа доходить до безпеки, принаймні два або всі три фактори автентифікації 
повинні бути перевірені, щоб надати дозвіл щодо доступу до системи.  
 
 
44 
В залежності від рівня безпеки фактори аутентифікації можуть відрізнятися. У 
випадку з цим проектом була обрана однофакторна аутентифікація. Це найпростіший 
метод аутентифікації, який вимагає пароля для надання користувачеві доступу до веб-
сайту. Користувач може мати доступ до системи, використовуючи лише одні  облікові 
данні для підтвердження своєї особи. Наприклад, вимога лише пароля до імені 
користувача є способом перевірки облікових даних щодо входу за допомогою 
однофакторної автентифікації. Авторизація відбувається після того, як ваша 
особистість успішно аутентифікована системою, що дає вам повний доступ до 
літературних ресурсів, як інформація, бази даних, файли тощо. Авторизація 
підтверджує права на надання доступу до ресурсів тільки після визначення 
можливості доступу до системи і в якому обсязі. Інакше кажучи, авторизація – це 
процес визначення прав, чи має аутентифікований користувач доступ до певних 
ресурсів.  
 3.2 Кейси перевірки 
Набір конкретних станів, які застосовуються для перевірки функціональності, 
відповідності вимогам та якості веб-ресурсу. Тест-кейс – це множина кроків, 
конкретних параметрів і умов, необхідних для перевірки реалізованих функції, що 
тестується або їх частини. Передумови – множина усіх необхідних підготовчих дій 
таких як налаштування програми та середовища тестування для виконання цього 
тест-кейса. Передумови містять необхідну важливу інформацію та дії, що необхідні 
для попередньої підготовки операційної системи, тестового веб-сервісу, браузера, 
мобільного пристрою і тп.  
Виконання цих умов завжди повинне бути на початку проходження тест-кейсів. 
Якщо вимоги, зазначені в передумовах, не виконані, будуть отримані невірні 
результати тестування, або тест-кейс не можна буде пройти. 
Для проведення тесту необхідно скласти тест-кейси, які представлені в таблиці 
3.1. 
 
 
45 
Таблица 3.1–Тест-кейси  веб-ресурсу для онлайн запису відвідувачів дитячої 
бібліотеки 
 Назва Інструкції Результат 
Перевірка наявності всіх необхідних елементів і тестування працездатності 
1 
системи.  
Перевірте наявність 
Повнота головного 
1.1  Наявність 
меню необхідних елементів 
Форми доступні та 
Форми введення Перевірте наявність форм 
1.2 
даних введення даних готові до заповнення 
Перевірка наявності Перевірка наявності всіх 
1.3 Всі модулі в наявності  
модулей модулей 
2 Тестування функціональності системи 
Всі компоненти панелі 
Відповідність Перевірити відповідність 
2.1 компонентів панелі управління 
компонентів панелі керування 
керування відповідають 
Всі дані 
Відображення Перевіряють відповідність 
2.2 відображаються 
інформації про книгу виводу інформації по книзі 
коректною 
Перевірте послідовність Всі дані 
2.3 Відображення  виведення інформації про відображаються 
читачів коректною 
3 Тестування бізнес-логіки 
Можливість зміни   
Перевірити можливість зміни Інформація 
3.1 інформації про 
інформації про читачів редагується 
читачів 
-  
За результатами тестування веб-ресурс для онлайн запису відвідувачів дитячої 
бібліотеки показав свою ефективність та відповідність всім технічним вимогам. 
 
  
 
 
46 
Висновки до розділу 3 
У цьому розділі для перевірки працездатності веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки був протестований методом «чорної скриньки». 
Також досліджувалася інформаційна безпека веб-ресурсу. В результаті було 
показано, що веб-ресурс для онлайн запису відвідувачів дитячої бібліотеки виявився 
працездатним. 
 
  
 
 
47 
ВИСНОВКИ 
У ході бакалаврської роботи було проаналізовано навчально-наукову 
літературу, за допомогою якої визначено основні цілі та завдання веб-ресурсу для 
онлайн запису відвідувачів дитячої бібліотеки. Детально вивчено предметну область, 
в якій визначено вимоги до функціональних характеристик веб-ресурсу для онлайн 
запису відвідувачів дитячої бібліотеки та визначено основні завдання, що підлягають 
автоматизації. 
При створенні веб-ресурсу для онлайн запису відвідувачів дитячої бібліотеки 
було вивчено бізнес-процеси шкільної бібліотеки та дано опис об'єкта автоматизації, 
проведено аналіз методів проектування та сформульовано вимоги до програмного 
забезпечення. Для проектування компонентів веб-ресурсу для онлайн запису 
відвідувачів дитячої бібліотеки були побудовані концептуальні, логічні та фізичні 
моделі даних, які дозволяють більш повно оцінити специфіку модельованої 
предметної області та уникнути можливих помилок на етапі проектування схеми 
реляційної бази даних. 
Підібрано комплекс програмних засобів для реалізації веб-ресурсу для онлайн 
запису відвідувачів дитячої бібліотеки.  
Під час розроблення онлайн-рішення до уваги брали вже наявні рішення, а 
також були виведені їхні недоліки та позитивні якості сервісів із забезпечення юним 
читачам необхідних знань у досліджуваній ними галузі. Будь-яка бібліотека є 
інформаційною системою, оскільки має доступ до бази даних. Розроблений веб-
ресурс для онлайн запису відвідувачів дитячої бібліотеки відповідає потребам 
пересічного користувача, може реєструвати нових користувачів, здійснювати пошук 
за заданим жанром і відображати відповідні файли. 
  
 
 
48 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1. Library For All Ukraine (укр. “Бібліотека для всієї України”).  
URL:https://znayshov.com/News/Details/v_ukraini_zapratsiuvala_bezkoshtovna_on
lain-iblioteka_z_sotniamy_dytiachykh_knyzhok_library_for_all_ukraine (дата 
звернення: 21.05.24). 
2. ECE (Electrical and Computer Engineering, укр. “Електротехніка та комп’ютерна 
інженерія”). URL: https://bestece-projects.blogspot.com/ (дата звернення: 
21.05.24). 
3. Electrical and Computer Engineering Project (укр. “Проєкт Електротехніки та 
комп’ютерної інженерії”).  URL: 
https://www.youtube.com/watch?v=sbxMXcnntOQ&list=PLB57s6OrG8LhC4QKA
g3wbdGRxMOCi9zSM&index (дата звернення: 21.05.24). 
4. Основні HTML теги. URL: https://training.qatestlab.com/blog/technical-
articles/basic-html-tags/ (дата звернення: 21.05.24). 
5. Що таке HTML?  URL : https://tonyline.com.ua/glossary/html/ (дата звернення: 
21.05.24). 
6. SQL база даних. Для чого призначена база даних?  URL: 
https://www.ukraine.com.ua/uk/blog/programming/sql-baza-dannih-dlya-chego-
prednaznachena-baza-dannih.html (дата звернення: 21.05.24). 
7. PHP. URL:  http://programming.in.ua/web-design/allphp/30-about-php.html (дата 
звернення: 21.05.24). 
8. Selenium Webdriver. URL: https://training.qatestlab.com/blog/technical-
articles/selenium-webdriver/(дата звернення: 21.05.24). 
  
 
 
49 
ДОДАТОК А 
 
 
 
        Затверджую               
Зав. кафедри КНСА, 
______________ Юрій ТРИУС 
«____»____________2024 р.                                                                                                                                                                              
 
 
 
 
 
 
 
ВЕБ-РЕСУРС ДЛЯ ОНЛАЙН ЗАПИСУ ВІДВІДУВАЧІВ ДИТЯЧОЇ 
БІБЛІОТЕКИ 
Специфікація  
482.ЧДТУ.42288-01  
 
Листів 1 
 
 
 
 
 
 
Розробник                          ____________________                Могилей А.І 
 
Керівник                                                                                    Підгорний М.В. 
 
 
 
 
 
 
 
 
 
 
 
 
Черкаси – 2024  
 
 
50 
482.ЧДТУ.42288-01 
Позначення Найменування Примітка 
   
   
 Документація  
   
   
482.ЧДТУ.42288-01. 12 01     Текст програми  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
 
 
51 
ДОДАТОК Б 
 
 
 
 
 
ВЕБ-РЕСУРС ДЛЯ ОНЛАЙН ЗАПИСУ ВІДВІДУВАЧІВ ДИТЯЧОЇ 
БІБЛІОТЕКИ 
 
 
Текст програми 
4482.ЧДТУ.42288-01.01 12 01          
 
Листів 21 
 
 
 
 
 
 
Розробник    _____________                   Могилей А.І 
 
 
 
 
 
 
 
Черкаси – 2024 
 
 
 
52 
Фрагмент програми 
index.html 
<!DOCTYPE html> 
<html> 
<head> 
 <title> 
  Система керування онлайн-бібліотекою для дітей 
 </title> 
 <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css"> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
<style type="text/css"> 
 nav 
 { 
  float: right; 
  word-spacing: 30px; 
  padding: 20px; 
 } 
 nav li  
 { 
  display: inline-block; 
  line-height: 80px; 
 } 
     footer 
 { 
  height: 200px; 
  width: 1361px; 
  background-color: black; 
 
 
53 
 } 
  .fa 
  { 
   margin: 0px 5px; 
   padding: 5px; 
   font-size: 20px; 
   width: 20px; 
   height: 20px; 
   text-align: center; 
   text-decoration: none; 
   border-radius: 50%; 
  } 
  .fa:hover 
  { 
   opacity: .7; 
  } 
  .fa-facebook 
  { 
   background: #3B5998; 
   color: white; 
  } 
  .fa-google 
  { 
   background: #dd4b39; 
   color: white; 
  } 
  .fa-instagram 
  { 
   background: #125688; 
   color: white; 
 
 
54 
  } 
</style> 
</head> 
 
<body> 
 <div class="wrapper"> 
  <header> 
  <div class="logo"> 
   <img src="images/9.jpg"> 
   <h1 style="color: white;">СИСТЕМА КЕРУВАННЯ ОНЛАЙН-
БІБЛІОТЕКОЮ ДЛЯ ДІТЕЙ</h1> 
  </div> 
    <nav> 
     <ul> 
      <li><a href="index.html">ВХІД</a></li> 
      <li><a href="books.html">КНИГИ</a></li> 
      <li><a 
href="feedback.html">КОМЕНТУВАТИ</a></li> 
                        <li><a href="student_login.html">ЛОГІН</a></li> 
            <li><a 
href="registration.html">РЕЄСТРУВАТИСЬ</a></li> 
     </ul> 
    </nav>    
  </header> 
  <section> 
  <div class="sec_img"> 
   <br><br><br> 
   <div class="box"> 
    <br><br><br><br> 
 
 
55 
    <h1 style="text-align: center; font-size: 35px;">Ласкаво просимо 
до <br>дитячої бібліотеки</h1><br><br> 
    <h1 style="text-align: center;font-size: 25px;">Графік 
роботи:<br>09:00-17:00</h1><br> 
   </div> 
  </div> 
  </section> 
 </div> 
<footer style="background-color: black; "> 
 <br> 
 <h3 style="color:white;text-align: center;">Зв'яжіться з нами через соціальні 
медіа</h3><br> 
 
 <div style="margin:0px 616px;"> 
 
  <a href="#" class="fa fa-facebook"></a> 
  <a href="#" class="fa fa-google"></a> 
  <a href="#" class="fa fa-instagram"></a> 
 </div> 
 <br> 
 <p style="color:white;text-align: center;"> 
  <br> 
  Електронна пошта:&nbsp [email protected] <br><br> 
  Номер телефону:&nbsp &nbsp +380 ** *** **** 
 </p> 
</footer> 
</body> 
</html> 
  
 
 
56 
books.html 
<!DOCTYPE html> 
<html> 
<head> 
<title>Книги</title> 
  <link rel="stylesheet" type="text/css" href="style.css"> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>     
</head> 
<body> 
<header style="height: 90px;"> 
<div class="logo"> 
      <h1 style="color: white; font-size: 15px; word-spacing: 10px; line-height: 80px; 
margin-top: 20px;">СИСТЕМА КЕРУВАННЯ ОНЛАЙН-БІБЛІОТЕКОЮ ДЛЯ 
ДІТЕЙ</h1> 
    </div> 
      <nav> 
        <ul> 
          <li><a href="index.html">ВХІД</a></li> 
          <li><a href="books.html">КНИГИ</a></li> 
            <li><a href="student_login.html"><span class="glyphicon glyphicon-log-
in">ЛОГІН</span></a></li> 
            <li><a href="student_login.html"><span class="glyphicon glyphicon-log-
out">ЛОГАУТ</span></a></li> 
 
 
57 
        <li><a href="registration.html"><span class="glyphicon glyphicon-
user">РЕЄСТРУВАТИСЬ</span></a></li> 
          <li><a href="feedback.html">КОМЕНТУВАТИ</a></li> 
        </ul> 
      </nav> 
</header> 
<h2>Список книг</h2> 
<table class='table table-bordered table-hover' > 
   <tr style='background-color: #6db6b9e6;'> 
                <th>ID</th>"; 
    <th>Назва книги</th> 
    <th>ПІБ автора</th> 
    <th>Видання</th> 
    <th>Статус</th> 
    <th>Кількість</th> 
    <th>Відділ</th> 
   </tr>  
 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
</table> 
</body> 
</html> 
 
 
58 
feedback.html 
<!DOCTYPE html> 
<html> 
<head> 
 <title>Коментувати</title> 
 <link rel="stylesheet" type="text/css" href="style.css"> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
     
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    <style type="text/css"> 
     body 
     { 
      background-image: url("images/66.jpg"); 
     } 
     .wrapper 
     { 
      padding: 10px; 
      margin: 30px auto; 
      width: 900px; 
      height: 500px; 
      background-color: black; 
      opacity: .8; 
      color: white; 
     } 
     .form-control 
 
 
59 
     { 
      height: 70px; 
      width: 60%; 
     } 
     .scroll 
     { 
      width: 100%; 
      height: 300px; 
      overflow: auto; 
     } 
 
    </style> 
</head> 
<body> 
    <header style="height: 90px;"> 
<div class="logo"> 
      <h1 style="color: white; font-size: 15px; word-spacing: 10px; line-height: 80px; 
margin-top: 20px;">СИСТЕМА КЕРУВАННЯ ОНЛАЙН-БІБЛІОТЕКОЮ ДЛЯ 
ДІТЕЙ</h1> 
    </div> 
      <nav> 
        <ul> 
          <li><a href="index.html">ВХІД</a></li> 
          <li><a href="books.html">КНИГИ</a></li> 
            <li><a href="student_login.html"><span class="glyphicon glyphicon-log-
in">ЛОГІН</span></a></li> 
            <li><a href="student_login.html"><span class="glyphicon glyphicon-log-
out">ЛОГАУТ</span></a></li> 
        <li><a href="registration.html"><span class="glyphicon glyphicon-
user">РЕЄСТРУВАТИСЬ</span></a></li> 
 
 
60 
          <li><a href="feedback.html">КОМЕНТУВАТИ</a></li> 
        </ul> 
      </nav> 
</header> 
 <div class="wrapper"> 
<h4>Якщо у вас є порада чи запитання, будь ласка коментуйте.</h4> 
  <form style="" action="" method="post"> 
   <input class="form-control" type="text" name="comment" 
placeholder="Написати щось..."><br>  
   <input class="btn btn-default" type="submit" name="submit" 
value="Коментувати" style="width: 110px; height: 35px;">   
  </form> 
  
<br><br> 
 <div class="scroll"> 
 </div> 
 </div> 
</body> 
</html> 
 
registration.html 
<!DOCTYPE html> 
<html> 
<head> 
 
  <title>Реєструвати</title> 
  <link rel="stylesheet" type="text/css" href="style.css"> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
 
61 
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
   
</head> 
<body> 
<header style="height: 90px;"> 
   
<div class="logo"> 
      <h1 style="color: white; font-size: 15px; word-spacing: 10px; line-height: 80px; 
margin-top: 20px;">СИСТЕМА КЕРУВАННЯ ОНЛАЙН-БІБЛІОТЕКОЮ ДЛЯ 
ДІТЕЙ</h1> 
    </div> 
 
      <nav> 
        <ul> 
          <li><a href="index.html">ВХІД</a></li> 
          <li><a href="books.html">КНИГИ</a></li> 
            <li><a href="student_login.html"><span class="glyphicon glyphicon-log-
in">ЛОГІН</span></a></li> 
            <li><a href="student_login.html"><span class="glyphicon glyphicon-log-
out">ЛОГАУТ</span></a></li> 
        <li><a href="registration.html"><span class="glyphicon glyphicon-
user">РЕЄСТРУВАТИСЬ</span></a></li> 
          <li><a href="feedback.html">КОМЕНТУВАТИ</a></li> 
        </ul> 
      </nav> 
</header> 
 
 
62 
 
<section> 
  <div class="reg_img"> 
 
    <div class="box2"> 
        <h1 style="text-align: center; font-size: 25px;font-family: Lucida Console;">Система 
керування онлайн-бібліотекою для дітей</h1><br> 
        <h1 style="text-align: center; font-size: 20px;">Реєстраційна форма для 
користувача</h1><br> 
      <form name="Registration" action="" method="post"> 
        <br><br> 
        <div class="login"> 
          <input type="text" name="first" placeholder="Ім'я" required=""> <br><br> 
          <input type="text" name="last" placeholder="Прізвище" required=""> <br><br> 
          <input type="text" name="username" placeholder="Ім'я користувача" required=""> 
<br><br> 
          <input type="password" name="password" placeholder="Пароль" required=""> 
<br><br> 
          <input type="text" name="roll" placeholder="Номер" required=""><br><br> 
          <input type="text" name="email" placeholder="Електронна пошта" 
required=""><br><br> 
            <input type="text" name="contact" placeholder="Номер телефону" 
required=""><br><br> 
          <button style="color: black">Реєструватись</button></div> 
      </form> 
    </div> 
  </div> 
</section> 
</body> 
</html> 
 
 
63 
student_login.html 
<!DOCTYPE html> 
<html> 
<head> 
 
  <title>Логін</title> 
  <link rel="stylesheet" type="text/css" href="style.css"> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
   
</head> 
<body> 
<header style="height: 90px;"> 
   
<div class="logo"> 
      <h1 style="color: white; font-size: 15px; word-spacing: 10px; line-height: 80px; 
margin-top: 20px;">СИСТЕМА КЕРУВАННЯ ОНЛАЙН-БІБЛІОТЕКОЮ ДЛЯ 
ДІТЕЙ</h1> 
    </div> 
 
      <nav> 
        <ul> 
          <li><a href="index.html">ВХІД</a></li> 
          <li><a href="books.html">КНИГИ</a></li>   
 
 
64 
            <li><a href="student_login.html"><span class="glyphicon glyphicon-log-
in">ЛОГІН</span></a></li> 
            <li><a href="student_login.html"><span class="glyphicon glyphicon-log-
out">ЛОГАУТ</span></a></li> 
        <li><a href="registration.html"><span class="glyphicon glyphicon-
user">РЕЄСТРУВАТИСЬ</span></a></li> 
          <li><a href="feedback.html">КОМЕНТУВАТИ</a></li> 
        </ul> 
      </nav> 
</header> 
<section> 
  <div class="log_img"> 
    <br> <br><br> 
    <div class="box1"> 
        <h1 style="text-align: center; font-size: 35px;font-family: Lucida Console;">Система 
керування онлайн-бібліотекою для дітей</h1><br> 
        <h1 style="text-align: center; font-size: 25px;">Форма логіну для 
користувача</h1><br> 
      <form name="login" action="" method=""> 
        <br><br> 
        <div class="login"> 
          <input type="text" name="username" placeholder="Ім'я корситувача" required=""> 
<br><br> 
          <input type="password" name="password" placeholder="Пароль" required=""> 
<br><br> 
          <button style="color: black">Логін</button></div> 
      </form> 
      <p style="color: white; padding-left: 15px;"> 
        <br><br> 
        <a style="color:white;" href="">Забули пароль?</a><br><br> 
 
 
65 
        Хочете щось нове про цей вебсайт?<a style="color: white;" 
href="registration.html"> Реєструйтесь</a> 
      </p> 
    </div> 
  </div> 
</section> 
</body> 
</html> 
style.css 
html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, 
del, dfn, em, img, ins, kbd, q, samp, 
small, strong, sub, sup, var, 
b, i, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video { 
margin:0; 
padding:0; 
border:0; 
outline:0; 
font-size:100%; 
vertical-align:baseline; 
background:transparent; 
} 
 
 
66 
 
body { 
line-height:1; 
} 
 
article,aside,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section {  
display:block; 
} 
 
nav ul { 
list-style:none; 
} 
 
blockquote, q { 
quotes:none; 
} 
 
blockquote:before, blockquote:after, 
q:before, q:after { 
content:''; 
content:none; 
} 
 
a { 
margin:0; 
padding:0; 
font-size:100%; 
vertical-align:baseline; 
background:transparent; 
 
 
67 
} 
 
/* change colours to suit your needs */ 
ins { 
background-color:#ff9; 
color:#000; 
text-decoration:none; 
} 
 
/* change colours to suit your needs */ 
mark { 
background-color:#ff9; 
color:#000;  
font-style:italic; 
font-weight:bold; 
} 
 
del { 
text-decoration: line-through; 
} 
 
abbr[title], dfn[title] { 
border-bottom:1px dotted; 
cursor:help; 
} 
 
table { 
border-collapse:collapse; 
border-spacing:0; 
} 
 
 
68 
 
/* change border colour to suit your needs */ 
hr { 
display:block; 
height:1px; 
border:0;  
border-top:1px solid #cccccc; 
margin:1em 0; 
padding:0; 
} 
 
input, select { 
vertical-align:middle; 
} 
 
/*-------------------------------Main code   INDEX ---------------------------------------------------
------*/ 
 
.wrapper 
{ 
 height: 660px; 
 width: 1350px; 
 /*background-color: red;*/ 
} 
header 
{ 
 height: 130px; 
 width: 1340px; 
 background-color: black; 
 padding: 10px; 
 
 
69 
} 
section 
{ 
 height: 550px; 
 
 width: 1361px; 
 background-color: grey; 
} 
footer 
{ 
 height: 82px; 
 width: 1361px; 
 background-color: black; 
} 
.logo 
{ 
 float :left; 
 padding-left: 20px; 
 
} 
.logo img  
{ 
 padding-left: 175px; 
} 
li a 
{ 
 color: white; 
 text-decoration: none; 
} 
nav 
 
 
70 
{ 
 float: right; 
 word-spacing: 30px; 
 padding: 20px; 
} 
nav li  
{ 
 display: inline-block; 
 line-height: 80px; 
} 
 
section .sec_img 
{ 
 height: 550px; 
 margin-top: 0px; 
 background-image: url("images/1.jpg"); 
} 
.box 
{ 
 height: 300px; 
 width: 450px; 
 background-color: #030002; 
 margin: 70px auto; 
 opacity: .6; 
 color: white; 
} 
 
/*--------------------------------st_login-----------------------------*/ 
 
.log_img 
 
 
71 
{ 
 height: 650px; 
 margin-top: 0px; 
 background-image: url("images/3.jpg"); 
} 
.box1 
{ 
 height: 550px; 
 width: 425px; 
 background-color: black; 
 margin: 20px auto; 
 opacity: .7; 
 color: white; 
 padding: 20px; 
} 
form .login 
{ 
 margin: auto 30px; 
} 
input 
{ 
 height: 25px; 
 width: 300px; 
 
} 
/*------------------------------registration--------------------*/ 
.reg_img 
{ 
 height: 670px; 
 margin-top: 0px; 
 
 
72 
 background-image: url("images/4.jpg"); 
} 
.box2 
{ 
 height: 660px; 
 width: 400px; 
 background-color: black; 
 margin: 0px auto; 
 opacity: .7; 
 color: white; 
 padding: 20px; 
}
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
