Readme

Dockerfile

@@ -1,36 +1,29 @@
-FROM mysql:8.0.22
+FROM python:3.9-slim
 
-# Встановлення змінних середовища
-ENV MYSQL_ROOT_PASSWORD=root_password
-ENV MYSQL_DATABASE=test_db
-ENV MYSQL_USER=test_user
-ENV MYSQL_PASSWORD=test_password
-
-# Створення директорії для ініціалізаційних скриптів
-RUN mkdir -p /docker-entrypoint-initdb.d
+# Встановлення необхідних пакетів
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    default-mysql-client \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
 
-# Копіювання SQL файлу ініціалізації
-COPY init.sql /docker-entrypoint-initdb.d/
+# Встановлення бібліотек Python
+RUN pip install --no-cache-dir flask mysql-connector-python
 
-# Встановлення необхідних пакетів
-RUN rm -f /etc/apt/sources.list.d/mysql.list && \
-    apt-get update && \
-    apt-get install -y wget python3 python3-pip && \
-    pip3 install --no-cache-dir flask mysql-connector-python && \
-    apt-get clean && \
-    rm -rf /var/lib/apt/lists/*
+# Створення директорій для застосунку
+WORKDIR /app
 
-# Копіювання файлів веб-додатку
+# Копіювання файлів
 COPY app.py /app.py
 COPY templates /templates
 COPY static /static
-
-# Скрипт для запуску
 COPY start.sh /start.sh
+
+# Права на виконання
 RUN chmod +x /start.sh
 
-# Відкриття порту для API
+# Відкриття порту
 EXPOSE 7860
 
-# Запуск сервісів
+# Запуск веб-інтерфейсу
 CMD ["/start.sh"]

app.py

@@ -5,14 +5,21 @@ import time
 
 app = Flask(__name__, template_folder='/templates', static_folder='/static')
 
-def get_db_connection():
+# Параметри підключення до віддаленої бази даних
+DB_CONFIG = {
+    "host": "mysql-emploees-zabolotniua-5b91.c.aivencloud.com",
+    "port": 12374,
+    "user": "avnadmin",
+    "password": "AVNS_rccbF_so2YPvPk3zg0z",
+    "ssl_mode": "REQUIRED"
+}
+
+def get_db_connection(database=None):
     try:
-        return mysql.connector.connect(
-            host="localhost",
-            user="test_user",
-            password="test_password",
-            database="test_db"
-        )
+        config = DB_CONFIG.copy()
+        if database:
+            config["database"] = database
+        return mysql.connector.connect(**config)
     except Exception as e:
         print(f"Error connecting to MySQL: {e}")
         raise e
@@ -33,18 +40,106 @@ def index():
         cursor.execute("SHOW DATABASES")
         databases = [db[0] for db in cursor.fetchall()]
         
+        cursor.close()
+        conn.close()
+        
+        # Перевіряємо наявність бази даних employees
+        employees_exists = "employees" in databases
+        
+        return render_template('index.html', 
+                              status=status, 
+                              databases=databases, 
+                              tables=[], 
+                              employees_exists=employees_exists,
+                              remote_connection=True,
+                              connection_info=DB_CONFIG)
+    except Exception as e:
+        print(f"Error: {e}")
+        return render_template('index.html', 
+                              status={"status": "offline", "error": str(e)}, 
+                              databases=[], 
+                              tables=[],
+                              employees_exists=False,
+                              remote_connection=True,
+                              connection_info=DB_CONFIG)
+
+@app.route('/database/<database>')
+def show_database(database):
+    try:
+        conn = get_db_connection(database)
+        cursor = conn.cursor()
+        
         # Отримуємо списки таблиць
-        cursor.execute("SHOW TABLES")
+        cursor.execute(f"SHOW TABLES FROM `{database}`")
         tables = [table[0] for table in cursor.fetchall()]
         
+        # Закриваємо з'єднання і створюємо нове для кожної таблиці
         cursor.close()
         conn.close()
+        
+        # Отримуємо інформацію про таблиці
+        table_info = []
+        
+        for table in tables:
+            try:
+                conn = get_db_connection(database)
+                cursor = conn.cursor()
+                
+                # Отримуємо кількість рядків
+                cursor.execute(f"SELECT COUNT(*) FROM `{database}`.`{table}`")
+                count = cursor.fetchone()[0]
+                
+                table_info.append({
+                    'name': table,
+                    'count': count,
+                    'size': 'N/A'  # Розмір не можемо отримати з віддаленої бази
+                })
+                
+                cursor.close()
+                conn.close()
+            except Exception as e:
+                print(f"Error getting info for table {table}: {e}")
+                table_info.append({
+                    'name': table,
+                    'count': 'Error',
+                    'size': 'Error'
+                })
+        
+        return render_template('database.html', 
+                              database=database,
+                              tables=table_info,
+                              remote_connection=True)
     except Exception as e:
-        print(f"Error: {e}")
-        databases = []
-        tables = []
-    
-    return render_template('index.html', status=status, databases=databases, tables=tables)
+        return render_template('error.html', error=str(e))
+
+@app.route('/table/<database>/<table_name>')
+def show_table(database, table_name):
+    try:
+        conn = get_db_connection(database)
+        cursor = conn.cursor(dictionary=True)
+        
+        # Отримуємо структуру таблиці
+        cursor.execute(f"DESCRIBE `{table_name}`")
+        columns = cursor.fetchall()
+        
+        # Отримуємо дані таблиці
+        cursor.execute(f"SELECT * FROM `{table_name}` LIMIT 100")
+        data = cursor.fetchall()
+        
+        # Отримуємо загальну кількість рядків у таблиці
+        cursor.execute(f"SELECT COUNT(*) as count FROM `{table_name}`")
+        total_count = cursor.fetchone()['count']
+        
+        conn.close()
+        return render_template('table.html', 
+                              database=database,
+                              table_name=table_name, 
+                              columns=columns, 
+                              data=data,
+                              total_count=total_count,
+                              remote_connection=True)
+    except Exception as e:
+        return render_template('error.html', error=str(e))
 
 @app.route('/execute', methods=['POST'])
 def execute_query():
@@ -52,65 +147,122 @@ def execute_query():
     if request.content_type == 'application/json':
         data = request.json
         query = data.get('query', '')
+        database = data.get('database', 'employees')
     else:
         query = request.form.get('query', '')
+        database = request.form.get('database', 'employees')
     
     if not query:
         return jsonify({'error': 'Запит не може бути порожнім'}), 400
     
     try:
-        conn = get_db_connection()
+        conn = get_db_connection(database)
         cursor = conn.cursor(dictionary=True)
         cursor.execute(query)
         
         if query.lower().strip().startswith('select'):
             result = cursor.fetchall()
             conn.close()
-            return render_template('result.html', results=result, query=query)
+            return render_template('result.html', 
+                                 results=result, 
+                                 query=query,
+                                 database=database,
+                                 remote_connection=True)
         else:
             conn.commit()
             affected_rows = cursor.rowcount
             conn.close()
-            return render_template('result.html', affected_rows=affected_rows, query=query)
+            return render_template('result.html', 
+                                 affected_rows=affected_rows, 
+                                 query=query,
+                                 database=database,
+                                 remote_connection=True)
             
     except Exception as e:
         error_msg = str(e)
-        return render_template('result.html', error=error_msg, query=query)
-
-@app.route('/download_employees', methods=['GET'])
-def download_employees():
-    return render_template('download.html')
+        return render_template('result.html', 
+                              error=error_msg, 
+                              query=query, 
+                              database=database,
+                              remote_connection=True)
 
-@app.route('/import_employees', methods=['POST'])
-def import_employees():
+@app.route('/employees')
+def employees_info():
     try:
-        # Створюємо тимчасову директорію
-        os.system("mkdir -p /tmp/employees")
+        conn = get_db_connection('employees')
+        cursor = conn.cursor(dictionary=True)
         
-        # Завантажуємо базу даних
-        os.system("cd /tmp/employees && wget -q https://github.com/datacharmer/test_db/archive/master.zip")
-        os.system("cd /tmp/employees && apt-get update && apt-get install -y unzip && unzip -q master.zip")
+        # Отримуємо інформацію про таблиці
+        cursor.execute("SHOW TABLES FROM employees")
+        tables = [table['Tables_in_employees'] for table in cursor.fetchall()]
         
-        # Імпортуємо базу даних
-        import_result = os.system("cd /tmp/employees/test_db-master && mysql -u root -proot_password < employees.sql")
+        tables_info = []
+        for table in tables:
+            cursor.execute(f"SELECT COUNT(*) as count FROM employees.{table}")
+            count = cursor.fetchone()['count']
+            tables_info.append({
+                'table_name': table,
+                'employee_count': count,
+                'total_size_mb': 'N/A'  # Не можемо отримати розмір з віддаленої бази
+            })
         
-        # Надаємо права користувачу test_user
-        grant_result = os.system("mysql -u root -proot_password -e \"GRANT ALL PRIVILEGES ON employees.* TO 'test_user'@'%';\"")
-        os.system("mysql -u root -proot_password -e \"FLUSH PRIVILEGES;\"")
+        # Отримуємо загальну кількість співробітників
+        cursor.execute("SELECT COUNT(*) as count FROM employees")
+        total_employees = cursor.fetchone()['count']
         
-        # Видаляємо тимчасові файли
-        os.system("rm -rf /tmp/employees")
+        # Отримуємо кількість департаментів
+        cursor.execute("SELECT COUNT(*) as count FROM departments")
+        total_departments = cursor.fetchone()['count']
         
-        if import_result == 0 and grant_result == 0:
-            return render_template('import_success.html')
-        else:
-            return render_template('import_error.html', 
-                                  error=f"Import result: {import_result}, Grant result: {grant_result}")
-    
+        # Отримуємо діапазон дат
+        cursor.execute("SELECT MIN(hire_date) as min_date, MAX(hire_date) as max_date FROM employees")
+        date_range = cursor.fetchone()
+        
+        # Отримуємо кількість чоловіків і жінок
+        cursor.execute("""
+            SELECT 
+                gender, 
+                COUNT(*) as count,
+                ROUND(COUNT(*) * 100.0 / (SELECT COUNT(*) FROM employees), 2) as percentage
+            FROM 
+                employees 
+            GROUP BY 
+                gender
+        """)
+        gender_stats = cursor.fetchall()
+        
+        # Отримуємо топ департаментів за кількістю співробітників
+        cursor.execute("""
+            SELECT 
+                d.dept_name,
+                COUNT(de.emp_no) as employee_count
+            FROM 
+                departments d
+            JOIN 
+                dept_emp de ON d.dept_no = de.dept_no
+            WHERE 
+                de.to_date = '9999-01-01'
+            GROUP BY 
+                d.dept_name
+            ORDER BY 
+                employee_count DESC
+            LIMIT 5
+        """)
+        top_departments = cursor.fetchall()
+        
+        conn.close()
+        
+        return render_template('employees.html',
+                               tables_info=tables_info,
+                               total_employees=total_employees,
+                               total_departments=total_departments,
+                               date_range=date_range,
+                               gender_stats=gender_stats,
+                               top_departments=top_departments,
+                               remote_connection=True)
     except Exception as e:
-        return render_template('import_error.html', error=str(e))
+        return render_template('error.html', error=str(e))
 
 if __name__ == '__main__':
-    # Чекаємо кілька секунд для повного запуску MySQL
-    time.sleep(5)
+    # Запуск веб-сервера
     app.run(host='0.0.0.0', port=7860)

start.sh

@@ -1,24 +1,5 @@
 #!/bin/bash
 
-# Запуск MySQL у фоновому режимі
-echo "Запуск MySQL..."
-/entrypoint.sh mysqld &
-
-# Чекаємо, поки MySQL запуститься
-echo "Очікування запуску MySQL..."
-sleep 15
-
-# Перевірка, чи запустився MySQL
-echo "Перевірка стану MySQL..."
-for i in {1..5}; do
-    if mysqladmin ping -h localhost -u root -proot_password --silent; then
-        echo "MySQL успішно запущено"
-        break
-    fi
-    echo "Очікування..."
-    sleep 3
-done
-
 # Запуск Flask API
-echo "Запуск API на порту 7860..."
+echo "Запуск веб-інтерфейсу на порту 7860..."
 python3 /app.py

templates/employees.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>База даних Employees</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <style>
+        body { 
+            font-family: Arial, sans-serif; 
+            padding: 20px;
+        }
+        .card {
+            margin-bottom: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .stats-card {
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .big-number {
+            font-size: 2rem;
+            font-weight: bold;
+            color: #007bff;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>База даних "Employees"</h1>
+            <a href="/" class="btn btn-primary">На головну</a>
+        </div>
+        
+        <!-- Загальні статистики -->
+        <div class="card mb-4">
+            <div class="card-header bg-primary text-white">
+                <h5>Загальна інформація</h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="stats-card text-center">
+                            <div class="big-number">{{ total_employees }}</div>
+                            <div>Співробітників</div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="stats-card text-center">
+                            <div class="big-number">{{ total_departments }}</div>
+                            <div>Департаментів</div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="stats-card text-center">
+                            <div class="big-number">{{ tables_info|length }}</div>
+                            <div>Таблиць</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mt-3">
+                    <h5>Діапазон дат найму</h5>
+                    <p>З {{ date_range.min_date }} по {{ date_range.max_date }}</p>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Гендерна статистика -->
+        <div class="card mb-4">
+            <div class="card-header bg-info text-white">
+                <h5>Гендерний розподіл</h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    {% for stat in gender_stats %}
+                        <div class="col-md-6">
+                            <div class="stats-card text-center">
+                                <h5>{{ 'Чоловіки' if stat.gender == 'M' else 'Жінки' }}</h5>
+                                <div class="big-number">{{ stat.count }}</div>
+                                <div>{{ stat.percentage }}% від загальної кількості</div>
+                                <div class="progress mt-2">
+                                    <div class="progress-bar {{ 'bg-primary' if stat.gender == 'M' else 'bg-danger' }}" 
+                                         role="progressbar" 
+                                         style="width: {{ stat.percentage }}%" 
+                                         aria-valuenow="{{ stat.percentage }}" 
+                                         aria-valuemin="0" 
+                                         aria-valuemax="100">{{ stat.percentage }}%</div>
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        
+        <!-- Топ департаментів -->
+        <div class="card mb-4">
+            <div class="card-header bg-success text-white">
+                <h5>Топ департаментів за кількістю співробітників</h5>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th>Департамент</th>
+                                <th>Кількість співробітників</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for dept in top_departments %}
+                                <tr>
+                                    <td>{{ dept.dept_name }}</td>
+                                    <td>{{ dept.employee_count }}</td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Інформація про таблиці -->
+        <div class="card mb-4">
+            <div class="card-header bg-secondary text-white">
+                <h5>Таблиці в базі даних</h5>
+            </div>
+            <div class="card-body p-0">
+                <div class="table-responsive">
+                    <table class="table table-striped table-bordered mb-0">
+                        <thead class="table-dark">
+                            <tr>
+                                <th>Назва таблиці</th>
+                                <th>Кількість рядків</th>
+                                <th>Дії</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for table in tables_info %}
+                                <tr>
+                                    <td>{{ table.table_name }}</td>
+                                    <td>{{ table.employee_count }}</td>
+                                    <td>
+                                        <a href="/table/employees/{{ table.table_name }}" class="btn btn-sm btn-primary">Переглянути</a>
+                                        <button class="btn btn-sm btn-success" onclick="copyToQueryConsole('SELECT * FROM {{ table.table_name }} LIMIT 10;')">Запит SELECT</button>
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Приклади запитів -->
+        <div class="card">
+            <div class="card-header bg-dark text-white">
+                <h5>Корисні SQL запити</h5>
+            </div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <h6>1. Середня зарплата за департаментами</h6>
+                    <pre><code>SELECT d.dept_name, ROUND(AVG(s.salary), 2) as avg_salary
+FROM salaries s
+JOIN dept_emp de ON s.emp_no = de.emp_no
+JOIN departments d ON de.dept_no = d.dept_no
+WHERE s.to_date = '9999-01-01' AND de.to_date = '9999-01-01'
+GROUP BY d.dept_name
+ORDER BY avg_salary DESC;</code></pre>
+                    <button class="btn btn-sm btn-outline-primary" onclick="copyToQueryConsole('SELECT d.dept_name, ROUND(AVG(s.salary), 2) as avg_salary FROM salaries s JOIN dept_emp de ON s.emp_no = de.emp_no JOIN departments d ON de.dept_no = d.dept_no WHERE s.to_date = \'9999-01-01\' AND de.to_date = \'9999-01-01\' GROUP BY d.dept_name ORDER BY avg_salary DESC;')">Копіювати до консолі</button>
+                </div>
+                
+                <div class="mb-3">
+                    <h6>2. Топ-10 найвищеоплачуваних співробітників</h6>
+                    <pre><code>SELECT e.first_name, e.last_name, s.salary, d.dept_name
+FROM employees e
+JOIN salaries s ON e.emp_no = s.emp_no
+JOIN dept_emp de ON e.emp_no = de.emp_no
+JOIN departments d ON de.dept_no = d.dept_no
+WHERE s.to_date = '9999-01-01' AND de.to_date = '9999-01-01'
+ORDER BY s.salary DESC
+LIMIT 10;</code></pre>
+                    <button class="btn btn-sm btn-outline-primary" onclick="copyToQueryConsole('SELECT e.first_name, e.last_name, s.salary, d.dept_name FROM employees e JOIN salaries s ON e.emp_no = s.emp_no JOIN dept_emp de ON e.emp_no= de.emp_no JOIN departments d ON de.dept_no = d.dept_no WHERE s.to_date = \'9999-01-01\' AND de.to_date = \'9999-01-01\' ORDER BY s.salary DESC LIMIT 10;')">Копіювати до консолі</button>
+                </div>
+                
+                <div class="mb-3">
+                    <h6>3. Кількість співробітників за роками найму</h6>
+                    <pre><code>SELECT 
+    YEAR(hire_date) as hire_year,
+    COUNT(*) as employee_count
+FROM 
+    employees
+GROUP BY 
+    hire_year
+ORDER BY 
+    hire_year;</code></pre>
+                    <button class="btn btn-sm btn-outline-primary" onclick="copyToQueryConsole('SELECT YEAR(hire_date) as hire_year, COUNT(*) as employee_count FROM employees GROUP BY hire_year ORDER BY hire_year;')">Копіювати до консолі</button>
+                </div>
+                
+                <div>
+                    <h6>4. Менеджери департаментів</h6>
+                    <pre><code>SELECT 
+    d.dept_name,
+    CONCAT(e.first_name, ' ', e.last_name) as manager_name,
+    dm.from_date as start_date,
+    CASE
+        WHEN dm.to_date = '9999-01-01' THEN 'Current'
+        ELSE dm.to_date
+    END as end_date
+FROM 
+    dept_manager dm
+JOIN 
+    departments d ON dm.dept_no = d.dept_no
+JOIN 
+    employees e ON dm.emp_no = e.emp_no
+ORDER BY 
+    d.dept_name, dm.from_date;</code></pre>
+                    <button class="btn btn-sm btn-outline-primary" onclick="copyToQueryConsole('SELECT d.dept_name, CONCAT(e.first_name, \' \', e.last_name) as manager_name, dm.from_date as start_date, CASE WHEN dm.to_date = \'9999-01-01\' THEN \'Current\' ELSE dm.to_date END as end_date FROM dept_manager dm JOIN departments d ON dm.dept_no = d.dept_no JOIN employees e ON dm.emp_no = e.emp_no ORDER BY d.dept_name, dm.from_date;')">Копіювати до консолі</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        function copyToQueryConsole(sql) {
+            // Передаємо SQL запит на головну сторінку
+            window.localStorage.setItem('query_to_execute', sql);
+            window.location.href = '/#sql-console';
+        }
+    </script>
+</body>
+</html>

templates/index.html

@@ -34,21 +34,44 @@
             <div class="card-body">
                 {% if status.status == 'online' %}
                     <p><strong>Версія MySQL:</strong> {{ status.version }}</p>
+                    
+                    {% if remote_connection %}
+                        <div class="alert alert-info">
+                            <h5>Підключено до віддаленої бази даних</h5>
+                            <p>Ви підключені до віддаленого сервера MySQL з базою даних "Employees".</p>
+                        </div>
+                    {% endif %}
+                    
+                    {% if employees_exists %}
+                        <div class="alert alert-success">
+                            <h5>База даних "Employees" доступна!</h5>
+                            <p>Ви можете виконувати SQL-запити до бази даних employees.</p>
+                            <a href="/employees" class="btn btn-sm btn-outline-success">Переглянути деталі</a>
+                        </div>
+                    {% endif %}
                 {% else %}
                     <p class="text-danger"><strong>Помилка:</strong> {{ status.error }}</p>
                 {% endif %}
             </div>
         </div>
         
-        <!-- Завдання 1.2 (Імпорт бази Employees) -->
+        <!-- Параметри підключення -->
         <div class="card mb-4">
-            <div class="card-header bg-primary text-white">
-                <h5>Завдання 1.2 - Імпорт бази даних "Employees"</h5>
+            <div class="card-header bg-info text-white">
+                <h5>Параметри підключення</h5>
             </div>
             <div class="card-body">
-                <p>Для виконання завдання 1.2 вам потрібно завантажити і імпортувати базу даних "Employees".</p>
-                <a href="/download_employees" class="btn btn-success">Завантажити і імпортувати базу Employees</a>
-                <p class="mt-3">Процес імпорту може зайняти кілька хвилин. Після успішного імпорту база даних "employees" з'явиться у списку доступних баз даних.</p>
+                <p>Для підключення до бази даних з локального комп'ютера використовуйте ці параметри:</p>
+                <ul>
+                    <li><strong>Хост:</strong> {{ connection_info.host }}</li>
+                    <li><strong>Порт:</strong> {{ connection_info.port }}</li>
+                    <li><strong>Користувач:</strong> {{ connection_info.user }}</li>
+                    <li><strong>Пароль:</strong> {{ connection_info.password }}</li>
+                    <li><strong>SSL-режим:</strong> {{ connection_info.ssl_mode }}</li>
+                </ul>
+                
+                <p>Команда для підключення через термінал:</p>
+                <pre><code>mysql -h {{ connection_info.host }} -P {{ connection_info.port }} -u {{ connection_info.user }} -p --ssl-mode=REQUIRED employees</code></pre>
             </div>
         </div>
         
@@ -59,53 +82,43 @@
             </div>
             <div class="card-body">
                 <form action="/execute" method="post">
+                    <div class="mb-3">
+                        <label for="database" class="form-label">Виберіть базу даних:</label>
+                        <select class="form-select" id="database" name="database">
+                            {% for db in databases %}
+                                <option value="{{ db }}" {% if db == 'employees' %}selected{% endif %}>{{ db }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
                     <div class="mb-3">
                         <label for="query" class="form-label">Введіть SQL запит:</label>
-                        <textarea class="form-control" id="query" name="query" rows="6" placeholder="SELECT * FROM test"></textarea>
+                        <textarea class="form-control" id="query" name="query" rows="6" placeholder="SELECT * FROM employees LIMIT 10"></textarea>
                     </div>
                     <button type="submit" class="btn btn-primary">Виконати</button>
                 </form>
             </div>
         </div>
         
-        <!-- Список баз даних і таблиць -->
-        <div class="row">
-            <div class="col-md-6">
-                <div class="card mb-4">
-                    <div class="card-header bg-secondary text-white">
-                        <h5>Бази даних</h5>
-                    </div>
-                    <div class="card-body">
-                        {% if databases %}
-                            <ul class="list-group">
-                                {% for db in databases %}
-                                    <li class="list-group-item">{{ db }}</li>
-                                {% endfor %}
-                            </ul>
-                        {% else %}
-                            <p>Немає доступних баз даних</p>
-                        {% endif %}
-                    </div>
-                </div>
+        <!-- Список баз даних -->
+        <div class="card mb-4">
+            <div class="card-header bg-secondary text-white">
+                <h5>Доступні бази даних</h5>
             </div>
-            
-            <div class="col-md-6">
-                <div class="card mb-4">
-                    <div class="card-header bg-secondary text-white">
-                        <h5>Таблиці в test_db</h5>
-                    </div>
-                    <div class="card-body">
-                        {% if tables %}
-                            <ul class="list-group">
-                                {% for table in tables %}
-                                    <li class="list-group-item">{{ table }}</li>
-                                {% endfor %}
-                            </ul>
-                        {% else %}
-                            <p>Немає доступних таблиць</p>
-                        {% endif %}
+            <div class="card-body">
+                {% if databases %}
+                    <div class="list-group">
+                        {% for db in databases %}
+                            <a href="/database/{{ db }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+                                {{ db }}
+                                {% if db == 'employees' %}
+                                    <span class="badge bg-success">Навчальна база</span>
+                                {% endif %}
+                            </a>
+                        {% endfor %}
                     </div>
-                </div>
+                {% else %}
+                    <p>Немає доступних баз даних або неможливо з'єднатися з сервером</p>
+                {% endif %}
             </div>
         </div>
         
@@ -127,6 +140,47 @@ CREATE TABLE IF NOT EXISTS test (
                 <button class="btn btn-outline-primary" onclick="copyToQueryConsole('create table if not exists test (numbers int, words varchar (10));')">Копіювати до консолі</button>
             </div>
         </div>
+        
+        <!-- Приклади запитів -->
+        <div class="card mb-4">
+            <div class="card-header bg-success text-white">
+                <h5>Приклади SQL запитів до бази "Employees"</h5>
+            </div>
+            <div class="card-body">
+                <p>Спробуйте наступні запити:</p>
+                
+                <div class="mb-3">
+                    <h6>1. Перегляд структури таблиць</h6>
+                    <pre><code>SHOW TABLES FROM employees;</code></pre>
+                    <button class="btn btn-sm btn-outline-primary" onclick="copyToQueryConsole('SHOW TABLES FROM employees;')">Копіювати до консолі</button>
+                </div>
+                
+                <div class="mb-3">
+                    <h6>2. Перегляд співробітників</h6>
+                    <pre><code>SELECT emp_no, first_name, last_name, gender, hire_date 
+FROM employees 
+LIMIT 10;</code></pre>
+                    <button class="btn btn-sm btn-outline-primary" onclick="copyToQueryConsole('SELECT emp_no, first_name, last_name, gender, hire_date FROM employees LIMIT 10;')">Копіювати до консолі</button>
+                </div>
+                
+                <div class="mb-3">
+                    <h6>3. Перегляд департаментів</h6>
+                    <pre><code>SELECT * FROM departments;</code></pre>
+                    <button class="btn btn-sm btn-outline-primary" onclick="copyToQueryConsole('SELECT * FROM departments;')">Копіювати до консолі</button>
+                </div>
+                
+                <div class="mb-3">
+                    <h6>4. Запит з JOIN</h6>
+                    <pre><code>SELECT e.emp_no, e.first_name, e.last_name, d.dept_name
+FROM employees e
+JOIN dept_emp de ON e.emp_no = de.emp_no
+JOIN departments d ON de.dept_no = d.dept_no
+WHERE de.to_date = '9999-01-01'
+LIMIT 10;</code></pre>
+                    <button class="btn btn-sm btn-outline-primary" onclick="copyToQueryConsole('SELECT e.emp_no, e.first_name, e.last_name, d.dept_name FROM employees e JOIN dept_emp de ON e.emp_no = de.emp_no JOIN departments d ON de.dept_no = d.dept_no WHERE de.to_date = \'9999-01-01\' LIMIT 10;')">Копіювати до консолі</button>
+                </div>
+            </div>
+        </div>
     </div>
     
     <script>