[6], [7], та [8], та [9], та [10] наведено на рис.1-5.
Рисунок 1 – Тег фізичної розмітки
Рисунок 2 – Тег фізичної розмітки
Рисунок 3 – Теги фізичної розмітки та
Рисунок 4 – Теги фізичної розмітки та
Рисунок 5 – Теги фізичної розмітки та
-
Теги логічної розмітки
-
Позначення абревіатури.
Для позначення тексту як абревіатуру використовують теги . Даний тег має атрибут title, як значення якого дається повна форма запису абревіатури, що дозволяє розуміти її тим людям, які з нею не знайомі. Браузери при наведенні курсору на текст, розмічений тегом , будуть видавати повне найменування у вигляді підказки.
-
Позначення цитати.
Тег використовується для позначення посилання на джерело, наприклад назв книги та статті. Браузерами такий текст зазвичай виводиться курсивом.
Тег відзначає короткі цитати у текстовому рядку. Вміст контейнера, як правило, відображається в браузері в лапках.
Для виділення довгих цитат із основного тексту існує тег . Він є контейнером та може містити інші теги форматування. Текст, розмічений тегом , при відображенні відокремлюється від основного тексту порожніми рядками і зазвичай виводиться з невеликим відступом вправо.
-
Позначення визначень.
Для виділення текстового фрагмента як визначення використовується тег . Наприклад, цим тегом можна назвати якийсь термін, що він зустрічається у тексті вперше. Відображається за промовчанням курсивом.
-
Виділення важливих фрагментів.
Для виділення важливих фрагментів тексту використовуються теги та . Браузери зазвичай відображають текст, виділений за допомогою тега , курсивом, а за допомогою тега – напівжирним шрифтом. Тегом зазвичай розмічають важливіші фрагменти тексту, ніж ті, що розмічені тегом .
У HTML 5 ввели тег , який виділяє інформацію, особливо важливу для читача. Такий текст нічим не відрізняється від звичайного, але його вигляд може змінюватись за допомогою таблиць стилів.
-
Позначення вставок.
Для позначення тексту як вставка використовується тег . Цей елемент корисно використовувати для позначення змін, які вносяться до документа. Текст, позначений тегом , зазвичай відображається підкресленим.
-
Визначення віддаленого тексту.
Для позначення фрагмента тексту як віддалений використовують тег . Цей елемент корисно використовувати для позначення змін, які вносяться до документа. Текст, позначений тегом , зазвичай відображається перекресленим.
-
Визначення елементів програм.
Для позначення тексту як невеликого фрагмента коду використовується тег . Як правило, текст відображається моноширинним шрифтом.
Тег використовується для позначення тексту, який видається програмою (листинг). Браузери зазвичай відображають текст у контейнері за допомогою моноширинного шрифту.
Позначення у тексті змінної величини чи аргументу програми здійснюється за допомогою тега . Зазвичай такий текст відображається у браузері курсивом.
-
Позначення тексту, що вводиться з клавіатури.
Тег використовується для позначення тексту, що вводиться користувачем з клавіатури. У браузері такий текст зазвичай відображається моноширинним шрифтом.
На рис. 6 наведено приклад застосування логічних тегів [11].
Рисунок 6 – Застосування логічних тегів
СПЕЦІАЛЬНА ЧАСТИНА
2 Спеціальна частина
2.1 Розробка інформаційної системи
2.1.1 Постановка задачі
Постановка задачі: ІС «Охорона підприємства», в якому повинна міститися актуальна інформація щодо охорони підприємства з його ресурсами, персоналом, відвідувачами і різними правами доступу.
2.1.2 Мета створення ІС
Метою створення ІС є задоволення заданих потреб та у подальшому можливість передачі сайту замовнику (власнику інтернет-магазину або адміністратору).
-
На сайті є передбачена форма для авторизації, що містить сторінку адміністратора з правом переглянути права, рівні, логи доступу різного персоналу.
-
Сайт містить 6 сторінок: «Головна», «Співробітники», «Відвідувачі», «Ресурси», «Інформація для співробітників», «Сторінка адміністратора».
-
На головній сторінці розміщена вся важлива інформація про сайт.
2.1.3 Аналіз предметної області
В заданій предметній області можна виділити базові сутності:
-
Таблиця «Права доступу» з властивостями:
-
Порядковий номер у таблиці;
-
Порядковий номер ресурсу;
-
Порядковий номер співробітника;
-
Дата видачі права.
-
Таблиця «Рівні доступу» з властивостями:
-
Порядковий номер у таблиці;
-
Назва рівня;
-
Опис.
-
Таблиця «Логи доступу» з властивостями:
-
Порядковий номер у таблиці;
-
Порядковий номер відвідувачі;
-
Порядковий номер ресурсу;
-
Дата надання доступу.
-
Таблиця «Співробітники» з властивостями:
-
Порядковий номер у таблиці;
-
Ім’я;
-
Прізвище;
-
Посада;
-
Відділ;
-
Дата прийняття на роботу.
-
Таблиця «Ресурси» з властивостями:
-
Порядковий номер у таблиці;
-
Назва ресурсу;
-
Місцезнаходження;
-
Порядковий номер рівня доступу.
-
Таблиця «Відвідувачі» з властивостями:
-
Порядковий номер у таблиці;
-
Ім’я;
-
Прізвище;
-
Назва компанії;
-
Ціль;
-
Дата відвідування.
2.1.4 Проектування та створення бази даних
Процес проектування передбачає собою створення 6 таблиць необхідних для відображення предметної області. Взаємовідносини між таблицями бази даних визначає схема на рисунку 7.
Рисунок 7 – Зв’язки між таблицями у базі даних
Згідно аналізу предметної області, необхідно створити базу даних та в ній шість таблиць. Вміст бази даних «Ohoronapidriemstva» продемонстровано на рисунку 8.
Рисунок 8 – Вміст бази даних «Ohoronapidriemstva»
Лістинг бази даних «Ohoronapidriemstva» наведено у додатку А.
2.1.5 Написання SQL запитів до БД відповідно до мети створення ІС
Рисунок 9 – Запит, що виводить всі записи з таблиці «Ресурси»
Рисунок 10 – Запит, що виводить всі записи з таблиці «Ресурси» з можливістю видалення
Рисунок 11 – Запит, що виводить всі записи з таблиці «Співробітники»
Рисунок 12 – Запит, що виводить всі записи з таблиці «Співробітники» з можливістю видалення
Рисунок 13 – Запит, що виводить всі записи з таблиці «Відвідувачі» з можливістю видалення
Рисунок 14 – Запит, що виводить всі записи з таблиці «Відвідувачі»
2.2 Розробка інтерфейсу користувача
Створення інтерфейсу користувача на базі Web-технологій вимагає знання мови розмітки сторінок (HTML), а також взаємодією з каскадними листами стилів (CSS).
2.2.1 Планування інтерфейсу та розробка макету майбутнього сайту
Класичний інтерфейс Web-Додатків складається із трьох частин:
-
Заголовок сайту – по можливості повинен давати користувачеві інформацію про призначення сайту.
-
Меню першого рівня – також надає користувачеві додаткову інформацію про функціональність і можливості сайту.
-
Вміст сайту – основний (найбільший) блок у якім безпосередньо відображається наповнення сайту.
2.2.2 Створення макету сайту
Сайт ІС «Каталог відеоігор» буде мати наступну структуру:
-
Заголовок: напис «Охорона підприємства» - назва інтернет-каталогу, буде зроблено великим шрифтом та розташовано на видному місці.
-
Меню сайту: «Співробітники», «Відвідувачі», «Ресурси», «Інформація для співробітників». Демонстрація зображень сайту наведена на рис. 15-20.
-
Вміст сайту: буде відображати вміст поточної сторінки згідно запиту користувача.
Рисунок 15 – Меню сайту
Рисунок 16 – Співробітники
Рисунок 17 – Відвідувачі
Рисунок 18 – Ресурси
Рисунок 19 – Авторизація як адміністратор
Рисунок 20 – Сторінка адміністратора
2.2.3 Опис створення сторінок
Для оформлення стилів (фон та блоки) веб-сайту використано наступну стильову специфікацію:
Рисунок 21 – Код стильової специфікації CSS для створення фону та блоків
Для побудови меню сайту навігаційні елементи у комбінації з посиланнями укладеними у блочні конструкції.
Рисунок 22 – Код написаний мовою HTML для створення меню веб-сайту
2.3 Розробка сценаріїв серверної частини ІС
2.3.1 Компонування сценаріїв
Існує два базових підходи компонування коду серверних сценаріїв:
1. Весь код фізично знаходиться у одному файлі, та в залежності від дій користувача – генерує різний вміст (контент).
2. Код розподіляється по окремим файлам, в залежності від завдань.
3. Гібридний підхід, довільна комбінація перших двох.
З метою вивчення процесу створення серверних сценаріїв, для початківців рекомендується використовувати другий підхід, і розподіляти логічно різні блоки коду по фізично різних файлах, що надалі полегшує налагодження й пошук помилок.
У випадку наявності ділянок коду, що дублюються в усіх (або багатьох) файлах, питання вирішується використанням оператора require і вилучення повторюваного коду в окремий файл.
У моєму курсовому проекті я використовую гібридний підхід, на рисунку 23 продемонстрований другий підхід, коли код розподіляється по окремим файлам, в залежності від завдань, як це продемонстровано на рисунку 23.
Рисунок 23 – Створення окремого файлу для підключення бази даних
На рисунку 24 продемонстрований перший підхід, коли весь код знаходиться у одному файлі, і в залежності від дій користувача – генерує різний зміст.
Рисунок 24 – Демонстрація першого підходу
2.3.2 Сторінка «Головна»
На сторінці «Головна» відображається інформація про відомості бази даних.
2.3.3 Сторінка «Співробітники»
Сторінка «Співробітники» містить всю актуальну інформацію про інтернет магазин. Демонстрацію наведено на рисунку 25. Користувач має можливість видалити співробітника.
Рисунок 25 – Сторінка «Співробітники»
2.3.4 Сторінка «Відвідувачі»
Сторінка «Відвідувачі» відображає всі відомості про відвідувачів охоронного підприємства. Користувач має можливість видалити відвідувача.
Демонстрацію наведено на рисунках 26.
Рисунок 26 – Сторінка «Відвідувачі»
2.3.5 Сторінка «Ресурси»
Сторінка «Ресурси» відображає всю актуальну інформацію про наявні ресурси. Користувач має можливість видалити ресурси. Демонстрація сторінки наведена на рисунку 27.
Рисунок 27 – Сторінка «Ресурси»
Висновки
В даному курсовому проекті приведена розробка Web-сайту інформаційної системи за допомогою технологій: HTML, CSS, PHP та MySQL.
В загальній частині розкрито загальні відомості про технології створення Web-сайтів. Розглянуто функції PHP. Аргументи та повернуті значення.
В спеціальній частині розглянуто створення Інформаційної системи на мові PHP зі зберіганням інформації у СУБД MySQL. В результаті чого для користувача генеруються Web-сторінки на мові гіперпосилань HTML з взаємодією каскадних таблиць CSS.
У процесі роботи над курсовим проектом були освоєні методи:
-
взаємодії із системою керування базами даних MySQL;
-
основи створення серверних сценаріїв мовою PHP.
Були закріплені знання з:
-
верстки Web-сторінок мовою розмітки гіпертексту HTML;
-
оформлення зовнішнього вигляду HTML сторінки за допомогою каскадних листів стилів.
Розроблений сайт у разі необхідності дозволяє проводити подальше вдосконалення та доробку, тобто є відкритим програмним продуктом.
Перелік посилань
1. Гармаш К.В., Методичні рекомендації до виконання курсового проекту з дисципліни «Технологія та мови створення WEB-сайтів» для студентів напрямку підготовки спеціальності 122 Комп’ютерні науки – Кам’янське: «Кам’янський енергетичний фаховий коледж, 2023 р.
2. Павленко Т.І., Стандарт установи. Загальні вимоги і правила оформлення документації. – Дніпродзержинськ, ДЕТ, 2013р.
3. Основи будування сайтів / В. Манако, Д. Манако, О. Данилова, О. Войченко. – К. : Вид. дім «Шкіл, світ»: Вид. Л.Галіцина, 2006. – 120 с.
4. Пасічник О. В., Пасічник В. В. Веб-дизайн: підручник – Львів: «Магнолія 2006», 2017. – 520 с.
5. Васильєв О. Програмування мовою PHP: навч. посіб. – К.: Вид-во: «Ліра-К», 2022. – 368 с.
6. Тег [Електронний ресурс]. – Режим доступу: https://www.w3schools.com/tags/tag_mark.asp
7. Тег [Електронний ресурс]. – Режим доступу: https://www.w3schools.com/tags/tag_pre.asp#::text=The%20tag%20defines%20preformatted,in%20the%20HTML%20source%20code.
8. та [Електронний ресурс]. – Режим доступу: https://css.in.ua/html/tag/em
9. та [Електронний ресурс]. – Режим доступу: https://css.in.ua/html/tag/b
10. та [Електронний ресурс]. – Режим доступу: https://developer.mozilla.org/ru/docs/Web/HTML/Element/del
11. Логічні теги гіпертекстової розмітки [Електронний ресурс]. – Режим доступу: http://www.webremeslo.ru/html/glava14.html
Додаток А
Лістинг створення бази даних.
create DATABASE ohoronapidriemstva
Лістинг створення таблиць та їх заповнення.
Таблиця «Співробітники» і її заповнення.
CREATE TABLE employees ( employee_id INT NOT NULL AUTO_INCREMENT,first_name VARCHAR(50) NOT NULL,last_name VARCHAR(50) NOT NULL,job_title VARCHAR(100) NOT NULL,department VARCHAR(100) NOT NULL, hire_date DATE NOT NULL, PRIMARY KEY (employee_id));
INSERT INTO employees (first_name, last_name, job_title, department, hire_date)
VALUES ('John', 'Doe', 'Security Guard', 'Security', '2022-01-01'), ('Jane', 'Smith', 'Patrol Officer', 'Security', '2022-02-15'), ('Bob', 'Jones', 'IT Specialist', 'IT', '2021-05-20'), ('Alice', 'Lee', 'Office Manager', 'Administration', '2021-06-01');
Таблиця «Рівень доступу» і її заповнення.
CREATE TABLE access_levels ( access_level_id INT NOT NULL AUTO_INCREMENT, level_name VARCHAR(50) NOT NULL, description VARCHAR(200) NOT NULL, PRIMARY KEY (access_level_id));
INSERT INTO access_levels (level_name, description) VALUES ('Level 1', 'Basic access level with limited access to facilities'), ('Level 2', 'Standard access level with access to most facilities'), ('Level 3', 'Advanced access level with access to all facilities');
Таблиця «Ресурси» і її заповнення.
CREATE TABLE resources ( resource_id INT NOT NULL AUTO_INCREMENT, resource_name VARCHAR(100) NOT NULL, location VARCHAR(100) NOT NULL, access_level_id INT NOT NULL, PRIMARY KEY (resource_id), FOREIGN KEY (access_level_id) REFERENCES access_levels(access_level_id) );
INSERT INTO resources (resource_name, location, access_level_id)
VALUES ('Server Room', 'Basement', 3), ('Main Entrance', 'Front of building', 1), ('Executive Office', '5th Floor', 3), ('Production Line', '3rd Floor', 2);
Таблиця «Права доступу» і її заповнення.
CREATE TABLE access_grants ( grant_id INT NOT NULL AUTO_INCREMENT,
resource_id INT NOT NULL, employee_id INT NOT NULL, grant_date DATE NOT NULL, PRIMARY KEY (grant_id), FOREIGN KEY (resource_id) REFERENCES resources(resource_id), FOREIGN KEY (employee_id) REFERENCES employees(employee_id));
INSERT INTO access_grants (resource_id, employee_id, grant_date)VALUES (1, 1, '2022-01-15'), (3, 2, '2022-03-01'),(4, 3, '2021-06-15'), (2, 4, '2021-06-01'), (1, 2, '2022-03-15');
Таблиця «Відвідувачі» і її заповнення.
CREATE TABLE visitors ( visitor_id INT NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL, surname VARCHAR(50) NOT NULL, company_name VARCHAR(100) NOT NULL, purpose VARCHAR(200) NOT NULL, visit_date DATETIME NOT NULL, PRIMARY KEY (visitor_id));
INSERT INTO visitors (name, surname, company_name, purpose, visit_date) VALUES ('Mary', 'Jones', 'ABC Corp', 'Business meeting', '2022-03-15 10:30:00'), ь('Tom', 'Smith', 'XYZ Inc', 'Tour of facilities', '2022-03-17 14:00:00'), ('Sarah', 'Lee', '123 Industries', 'Delivery of supplies', '2022-03-20 09:00:00');
Таблиця «Логи доступу» і її заповнення.
CREATE TABLE access_logs ( log_id INT NOT NULL AUTO_INCREMENT, visitor_id INT NOT NULL, resource_id INT NOT NULL, access_time DATETIME NOT NULL, PRIMARY KEY (log_id), FOREIGN KEY (visitor_id) REFERENCES visitors(visitor_id), FOREIGN KEY (resource_id) REFERENCES resources(resource_id));
INSERT INTO access_logs (visitor_id, resource_id, access_time) VALUES (1, 1, '2022-03-15 11:00:00'), (1, 2, '2022-03-15 12:00:00'), (2, 2, '2022-03-17 15:30:00'), (3, 3, '2022-03-20 09:30:00'), (3, 2, '2022-03-20 10:00:00');
ALTER TABLE resources ADD COLUMN access_level_id INT NOT NULL, ADD CONSTRAINT fk_resources_access_levels FOREIGN KEY (access_level_id) REFERENCES access_levels(level_id);
INSERT INTO resources (resource_name, location, access_level_id) VALUES ('Server room', 'Basement', 5), ('Conference room A', '4th floor', 3), ('Janitorial closet', '1st floor', 1), ('Executive lounge', '6th floor', 4), ('Front lobby', '1st floor', 2);
Додаток Б
Лістинг створення веб-сторінок «Охоронна підприємства».
Реалізація лістингу створення веб-сторінки «Ресурси» (resources.php).
Інформація
-
Співробітники
Співробітники нашого охоронного підприєсмтва.
Переглянути
-
Відвідувачі
Відвідувачі нашого охоронного підприєсмтва.
Переглянути
-
Ресурси
Ресурси нашого охоронного підприєсмтва.
Переглянути
-
Інформація для співробітників
Переглянути