Тема, мета, місце розташування сайту та звіту

Тема: Вибір предметної області. Аналіз, моделювання та розроблення адаптивного web-застосунку.

Мета: Спроєктувати та розробити клієнтську частину (фронтенд) адаптивного веб-застосунку для інтернет-магазину кімнатних рослин, який забезпечить зручний пошук товарів, оформлення замовлень та коректне відображення на різних типах пристроїв. Сформулювати ключові складові опису інформаційної системи (вимоги, бізнес-логіку) та побудувати Use-case і ER-діаграми.

Посилання на виконані завдання:

Репозиторій власного веб-застосунку (GitHub): [https://github.com/lerakovaliuk/ecoplant-shop]
Власний веб-застосунок (Жива сторінка): [https://lerakovaliuk.github.io/ecoplant-shop/]
Репозиторій звітного документа (GitHub): [https://github.com/lerakovaliuk/IS-32_appRECORD-KovaliukValeriia-FIOT-2026]
Звітний документ (Жива сторінка): [https://lerakovaliuk.github.io/IS-32_appRECORD-KovaliukValeriia-FIOT-2026/]

Опис предметного середовища та бізнес-логіки

Актуальність теми

У сучасному світі зростає попит на озеленення домашнього та робочого простору. Кімнатні рослини покращують мікроклімат та знижують рівень стресу. Проте покупцям часто важко обрати рослину під свої умови (освітлення, вологість). Розробка спеціалізованого адаптивного веб-застосунку для продажу рослин з фільтрами за рівнем догляду є актуальним рішенням, яке спростить процес вибору для клієнтів та автоматизує продажі для бізнесу.

Об’єкт та предмет роботи

Об’єкт роботи: Веб-застосунок (інформаційна система) для організації електронної комерції (інтернет-магазин).
Предмет роботи: Властивості, характеристики та процеси розробки адаптивного інтерфейсу і бізнес-логіки інтернет-магазину рослин.

Бізнес-логіка роботи

Правило замовлення: Користувач не може оформити замовлення, якщо кошик порожній або загальна сума менша за мінімальну.
Правило наявності: Якщо кількість одиниць товару на складі дорівнює нулю, товар автоматично отримує статус «Немає в наявності», і кнопка додавання в кошик стає неактивною.
Правило скасування: Замовлення автоматично скасовується системою, якщо оплата не надійшла протягом 24 годин.

Вимоги до інформаційної системи

Функціональні вимоги

Система повинна дозволяти користувачу переглядати каталог кімнатних рослин у вигляді інформаційних карток із фотографією, назвою та ціною товару.
Система повинна надавати можливість фільтрувати рослини за категоріями (наприклад: “Сукуленти”, “Тіньолюбні”).
Система повинна дозволяти користувачу додавати обрані товари до кошика та видаляти їх звідти.
Система повинна автоматично обчислювати загальну суму замовлення в кошику.
Система повинна мати панель адміністратора для додавання та редагування карток товарів.

Нефункціональні вимоги

Адаптивність: Інтерфейс веб-застосунку повинен коректно відображатися на десктопних, планшетних та мобільних пристроях за допомогою Flexbox, Grid та медіа-запитів.
Продуктивність: Час завантаження сторінки каталогу не повинен перевищувати 2-3 секунди.
Безпека: Доступ до панелі адміністратора повинен бути захищений авторизацією.
Надійність: Система повинна обробляти помилки користувача (спроба оформити порожній кошик) та виводити зрозумілі повідомлення.

Аналіз та моделювання системи (Діаграми)

1. Use-case діаграма

Діаграма прецедентів демонструє сценарії взаємодії між системою та її акторами (Гість, Клієнт, Адміністратор).

Use-case діаграма

2. ER-діаграма даних

Діаграма відображає логічну структуру майбутньої бази даних, що складається із сутностей: Користувач, Категорія, Товар, Замовлення та Деталі замовлення.

ER діаграма

Структура проєкту та робота з Git

Проєкт має логічно організовану файлову структуру, де HTML-документи, каскадні таблиці стилів (CSS), скрипти (JS) та графічні ресурси (assets) зберігаються у відповідних директоріях. Для розробки використовувалася система контролю версій Git із дотриманням конвенцій написання комітів (Conventional Commits).

Файлова структура проєкту

Файлова структура

Історія комітів (GitHub)

Історія комітів

Скріншоти розробленого інтерфейсу

1. Головна сторінка (Десктопна версія)

Головна сторінка

2. Сторінка каталогу з сіткою товарів

Каталог

3. Адаптивність: Мобільна версія та “Бургер-меню”

4. Модальне вікно кошика (Інтерактивність JS)

Модальне вікно кошика

Фрагменти вихідного коду

Нижче наведено основні фрагменти коду, що демонструють реалізацію структурних компонентів інтерфейсу (header, main, footer), адаптивної сітки (CSS Grid), медіа-запитів та інтерактивних елементів (JavaScript).

1. Головна сторінка (index.html)

Цей файл містить основну семантичну розмітку, шапку з навігацією, банер (Hero) та приховане модальне вікно кошика.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoPlant - Твій зелений простір</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="logo">EcoPlant</div>
        <nav class="nav-menu">
            <ul>
                <li><a href="index.html" class="active-link">Головна</a></li>
                <li><a href="catalog.html">Каталог</a></li>
                <li><a href="care.html">Догляд</a></li>
            </ul>
        </nav>
        <div class="cart-wrapper">
            <button class="cart-btn" aria-label="Відкрити кошик">
                Кошик <span class="cart-counter">0</span>
            </button>
            <button class="burger-menu" aria-label="Меню">
                <span></span><span></span><span></span>
            </button>
        </div>
    </header>

    <main>
        <section class="hero-section">
            <div class="hero-content">
                <h1>Оживи свій простір з EcoPlant</h1>
                <p>Найкращі кімнатні рослини з доставкою до ваших дверей. Знайдіть свого ідеального зеленого друга вже сьогодні.</p>
                <a href="catalog.html" class="primary-btn">Перейти в каталог</a>
            </div>
        </section>

        <section class="featured-section">
            <h2 class="section-title">Популярні рослини</h2>
            <div class="cards-container">
                <article class="card">
                    <img src="assets/plant1.jpg" alt="Монстера" class="card-img">
                    <div class="card-info">
                        <h3>Монстера Деліціоза</h3>
                        <p class="price">450 грн</p>
                        <button class="buy-btn">В кошик</button>
                    </div>
                </article>
                </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <p>&copy; 2026 EcoPlant. Всі права захищено.</p>
            <p>Контакти: info@ecoplant.ua | +38 (099) 123-45-67</p>
        </div>
    </footer>

    <div id="cart-modal" class="modal-overlay">
        <div class="modal-content">
            <span class="close-cart">&times;</span>
            <h2>Ваш кошик</h2>
            <div class="cart-items">
                <p>Поки що тут порожньо.</p>
            </div>
            <div class="cart-footer">
                <h3>Всього: <span id="total-price">0</span> грн</h3>
                <button class="checkout-btn">Оформити замовлення</button>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
</body>
</html>

2. Каскадні таблиці стилів (css/style.css)

Тут реалізовано використання відносних одиниць вимірювання (rem, %), CSS Grid для побудови сітки карток, анімації та медіа-запити для адаптації під мобільні пристрої.

:root {
    --primary-color: #2e7d32;
    --bg-color: #f5f5f5;
    --text-color: #333;
    --card-bg: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: var(--card-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0; z-index: 100;
}

/* Адаптивна сітка контенту */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* Анімація появи карток */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 0.8s ease-out forwards;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Медіа-запити для мобільних пристроїв */
@media screen and (max-width: 768px) {
    .burger-menu { display: flex; }
    
    .nav-menu {
        position: absolute;
        top: 100%; left: -100%; width: 100%;
        background-color: var(--card-bg);
        flex-direction: column;
        text-align: center;
        transition: left 0.4s ease;
    }
    .nav-menu.active { left: 0; }
    .nav-menu ul { flex-direction: column; padding: 2rem 0; gap: 1.5rem; }
}

3. JavaScript логіка (js/app.js)

Скрипт відповідає за відкриття/закриття адаптивного меню на мобільних пристроях та керування модальним вікном кошика.

// Логіка Бургер-меню
const burgerBtn = document.querySelector('.burger-menu');
const navMenu = document.querySelector('.nav-menu');

burgerBtn.addEventListener('click', () => {
    navMenu.classList.toggle('active');
});

// Логіка Модального вікна кошика
const cartBtn = document.querySelector('.cart-btn');
const cartModal = document.getElementById('cart-modal');
const closeCartBtn = document.querySelector('.close-cart');

cartBtn.addEventListener('click', () => {
    cartModal.style.display = 'flex';
});

closeCartBtn.addEventListener('click', () => {
    cartModal.style.display = 'none';
});

window.addEventListener('click', (event) => {
    if (event.target === cartModal) {
        cartModal.style.display = 'none';
    }
});

Висновки

Під час виконання лабораторної роботи було успішно виконано всі поставлені завдання та отримано практичні навички з проєктування і розробки клієнтської частини інформаційної системи.

Набуті навички: Опановано процес аналізу предметної області, формулювання мети, бізнес-логіки, а також функціональних та нефункціональних вимог до системи. Отримано досвід побудови Use-case діаграм для визначення сценаріїв взаємодії користувачів та ER-діаграм для проєктування логічної структури бази даних. Закріплено навички створення семантичної верстки HTML5, реалізації адаптивного дизайну за допомогою CSS (Flexbox, Grid, media queries) та написання базових скриптів на JavaScript для роботи модальних вікон і мобільного меню. Також було вдосконалено навички роботи з системою контролю версій Git згідно з конвенціями оформлення комітів.

Узагальнення отриманих результатів: В результаті роботи спроєктовано та розроблено клієнтську частину (фронтенд) адаптивного веб-застосунку для інтернет-магазину кімнатних рослин “EcoPlant”. Створено три логічно пов’язані сторінки з коректним відображенням на пристроях з різною роздільною здатністю, реалізовано модальне вікно кошика та інтерактивне навігаційне меню. Файлова структура проєкту логічно організована та розміщена у віддаленому репозиторії GitHub.

Напрями удосконалення: Як можливі напрями подальшого удосконалення розробленого інтерфейсу та системи загалом можна відзначити розробку серверної частини (бекенду) для динамічного завантаження карток товарів з бази даних, реалізацію повноцінної логіки роботи кошика (з підрахунком загальної суми та передачею даних на сервер), додавання системи реєстрації/авторизації користувачів, а також інтеграцію платіжного шлюзу для онлайн-оплати замовлень.