Spaces:

DocSA
/

mysql-itud

Sleeping

App Files Files Community

DocUA commited on Feb 26, 2025

Commit

21fefa5

1 Parent(s): 467c2f8

Альтернативний варіант

Browse files

Files changed (9) hide show

Dockerfile +11 -12
app.py +122 -85
requirements.txt +2 -1
start.sh +16 -8
static/style.css +62 -0
templates/error.html +23 -0
templates/index.html +133 -0
templates/result.html +77 -0
templates/table.html +140 -0

Dockerfile CHANGED Viewed

@@ -12,25 +12,24 @@ RUN mkdir -p /docker-entrypoint-initdb.d
 # Копіювання SQL файлу ініціалізації
 COPY init.sql /docker-entrypoint-initdb.d/
-# Створення директорії для веб-додатку
-WORKDIR /app
-# Копіювання файлів веб-додатку
-COPY app.py requirements.txt /app/
-# Встановлення необхідних пакетів для веб-інтерфейсу, без використання репозиторію MySQL
 RUN rm -f /etc/apt/sources.list.d/mysql.list && \
     apt-get update && \
     apt-get install -y python3 python3-pip && \
-    pip3 install --no-cache-dir -r requirements.txt && \
     rm -rf /var/lib/apt/lists/*
-# Скрипт для запуску обох сервісів
 COPY start.sh /start.sh
 RUN chmod +x /start.sh
-# Відкриття портів (MySQL на 443 замість 3306)
-EXPOSE 443 7860
-# Запуск обох сервісів
 CMD ["/start.sh"]

 # Копіювання SQL файлу ініціалізації
 COPY init.sql /docker-entrypoint-initdb.d/
+# Встановлення необхідних пакетів для API
 RUN rm -f /etc/apt/sources.list.d/mysql.list && \
     apt-get update && \
     apt-get install -y python3 python3-pip && \
+    pip3 install --no-cache-dir flask mysql-connector-python && \
     rm -rf /var/lib/apt/lists/*
+# Копіювання файлів API
+COPY app.py /app.py
+COPY static /static
+COPY templates /templates
+# Скрипт для запуску MySQL та API
 COPY start.sh /start.sh
 RUN chmod +x /start.sh
+# Відкриття порту для API
+EXPOSE 7860
+# Запуск сервісів
 CMD ["/start.sh"]

app.py CHANGED Viewed

@@ -1,100 +1,137 @@
-from flask import Flask, render_template_string
-import socket
 app = Flask(__name__)
 @app.route('/')
 def index():
-    """Головна сторінка з інформацією про MySQL сервер"""
-    # HTML шаблон
-    template = """
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <title>MySQL Server для навчальних цілей</title>
-        <style>
-            body {
-                font-family: Arial, sans-serif;
-                margin: 0;
-                padding: 20px;
-                line-height: 1.6;
-            }
-            .container {
-                max-width: 800px;
-                margin: 0 auto;
-                background-color: #f5f5f5;
-                padding: 20px;
-                border-radius: 5px;
-                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-            }
-            h1 {
-                color: #333;
-                border-bottom: 1px solid #ddd;
-                padding-bottom: 10px;
-            }
-            .status {
-                padding: 10px;
-                margin: 10px 0;
-                border-radius: 4px;
-                background-color: #dff0d8;
-                border: 1px solid #d6e9c6;
-                color: #3c763d;
-            }
-            pre {
-                background-color: #f8f8f8;
-                border: 1px solid #ddd;
-                padding: 10px;
-                border-radius: 4px;
-                overflow-x: auto;
-            }
-            .connection-info {
-                background-color: #e8f4f8;
-                border: 1px solid #bce8f1;
-                padding: 15px;
-                margin-top: 20px;
-                border-radius: 4px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <h1>MySQL Сервер 8.0.22 для навчальних цілей</h1>
-            <div class="status">
-                <strong>Статус MySQL:</strong> Запущено
-            </div>
-            <div class="connection-info">
-                <h3>Параметри підключення:</h3>
-                <p><strong>Хост:</strong> {{ host }}</p>
-                <p><strong>Порт:</strong> 443</p>
-                <p><strong>Користувач:</strong> test_user</p>
-                <p><strong>Пароль:</strong> test_password</p>
-                <p><strong>База даних:</strong> test_db</p>
-            </div>
-            <h3>Практичне заняття №1:</h3>
-            <p>Для виконання тестового завдання підключіться до серверу та виконайте наступний SQL скрипт:</p>
-            <pre>-- Нереформатований скрипт
-create table if not exists test (numbers int, words varchar (10));
--- Відформатований скрипт
-CREATE TABLE IF NOT EXISTS test (
-    numbers INT,           -- Поле для цілих чисел
-    words VARCHAR(10)      -- Поле для текстових значень максимум 10 символів
-);</pre>
-        </div>
-    </body>
-    </html>
-    """
-    # Отримання імені хоста для підключення
-    hostname = socket.gethostname()
-    host = socket.gethostbyname(hostname)
-    return render_template_string(template, host=host)
 if __name__ == '__main__':
-    # Запускаємо веб-сервер на порту 7860 (стандартний для Hugging Face Spaces)
     app.run(host='0.0.0.0', port=7860)

+from flask import Flask, request, jsonify, render_template
+import mysql.connector
+import json
+import os
+import time
 app = Flask(__name__)
+def get_db_connection():
+    # Спробуємо підключитися кілька разів (може знадобитися, якщо MySQL ще запускається)
+    for i in range(5):
+        try:
+            return mysql.connector.connect(
+                host="localhost",
+                user="test_user",
+                password="test_password",
+                database="test_db"
+            )
+        except Exception as e:
+            if i < 4:  # Якщо це не остання спроба
+                time.sleep(2)  # Чекаємо 2 секунди
+            else:
+                raise e  # Перекидаємо помилку далі
+def get_mysql_status():
+    try:
+        conn = get_db_connection()
+        cursor = conn.cursor()
+        cursor.execute("SELECT VERSION()")
+        version = cursor.fetchone()[0]
+        cursor.close()
+        conn.close()
+        return {"status": "online", "version": version}
+    except Exception as e:
+        return {"status": "offline", "error": str(e)}
 @app.route('/')
 def index():
+    # Перевіряємо статус MySQL
+    status = get_mysql_status()
+    # Отримуємо списки баз даних і таблиць, якщо MySQL онлайн
+    databases = []
+    tables = []
+    if status["status"] == "online":
+        try:
+            conn = get_db_connection()
+            cursor = conn.cursor()
+            # Отримання списку баз даних
+            cursor.execute("SHOW DATABASES")
+            databases = [db[0] for db in cursor.fetchall()]
+            # Отримання списку таблиць у поточній базі даних
+            cursor.execute("SHOW TABLES FROM test_db")
+            tables = [table[0] for table in cursor.fetchall()]
+            cursor.close()
+            conn.close()
+        except Exception as e:
+            print(f"Помилка: {e}")
+    return render_template('index.html', status=status, databases=databases, tables=tables)
+@app.route('/execute', methods=['POST'])
+def execute_query():
+    if request.content_type == 'application/json':
+        data = request.json
+        query = data.get('query', '')
+    else:
+        query = request.form.get('query', '')
+    if not query:
+        return jsonify({'error': 'Запит не може бути порожнім'}), 400
+    try:
+        conn = get_db_connection()
+        cursor = conn.cursor(dictionary=True)
+        cursor.execute(query)
+        if query.lower().strip().startswith('select'):
+            result = cursor.fetchall()
+            conn.close()
+            # Якщо запит з веб-форми, повертаємо HTML
+            if request.content_type != 'application/json':
+                return render_template('result.html', results=result, query=query)
+            else:
+                return jsonify({'result': result})
+        else:
+            conn.commit()
+            affected_rows = cursor.rowcount
+            conn.close()
+            # Якщо запит з веб-форми, повертаємо HTML
+            if request.content_type != 'application/json':
+                return render_template('result.html',
+                                       affected_rows=affected_rows,
+                                       query=query)
+            else:
+                return jsonify({'affected_rows': affected_rows})
+    except Exception as e:
+        error_msg = str(e)
+        # Якщо запит з веб-форми, повертаємо HTML
+        if request.content_type != 'application/json':
+            return render_template('result.html', error=error_msg, query=query)
+        else:
+            return jsonify({'error': error_msg}), 500
+@app.route('/table/<table_name>')
+def show_table(table_name):
+    try:
+        conn = get_db_connection()
+        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()
+        conn.close()
+        return render_template('table.html',
+                              table_name=table_name,
+                              columns=columns,
+                              data=data)
+    except Exception as e:
+        return render_template('error.html', error=str(e))
 if __name__ == '__main__':
+    # Чекаємо кілька секунд для повного запуску MySQL
+    time.sleep(2)
     app.run(host='0.0.0.0', port=7860)

requirements.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- flask==2.0.1


1	+ flask==2.0.1
2	+ mysql-connector-python

start.sh CHANGED Viewed

@@ -1,16 +1,24 @@
 #!/bin/bash
-# Змінюємо порт MySQL на 443
-sed -i 's/port.*=.*3306/port = 443/' /etc/mysql/mysql.conf.d/mysqld.cnf
 # Запуск MySQL у фоновому режимі
-echo "Запуск MySQL на порту 443..."
 /entrypoint.sh mysqld &
 # Чекаємо, поки MySQL запуститься
 echo "Очікування запуску MySQL..."
-sleep 10
-# Запуск веб-сервера
-echo "Запуск веб-інтерфейсу на порту 7860..."
-python3 /app/app.py

 #!/bin/bash
 # Запуск MySQL у фоновому режимі
+echo "Запуск MySQL..."
 /entrypoint.sh mysqld &
 # Чекаємо, поки MySQL запуститься
 echo "Очікування запуску MySQL..."
+sleep 15
+# Перевірка, чи запустився MySQL
+echo "Перевірка стану MySQL..."
+for i in {1..10}; 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..."
+python3 /app.py

static/style.css ADDED Viewed

	@@ -0,0 +1,62 @@

+body {
+    background-color: #f5f5f5;
+}
+.card {
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+.card-header {
+    border-top-left-radius: 8px !important;
+    border-top-right-radius: 8px !important;
+}
+pre {
+    background-color: #f8f9fa;
+    padding: 15px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    font-size: 14px;
+}
+code {
+    color: #007bff;
+}
+.table-responsive {
+    max-height: 400px;
+    overflow-y: auto;
+}
+thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+.bg-success.text-white {
+    transition: all 0.3s ease;
+}
+.btn-outline-primary {
+    margin-top: 10px;
+}
+textarea {
+    font-family: monospace;
+}
+/* Мобільні адаптації */
+@media (max-width: 768px) {
+    pre {
+        font-size: 12px;
+        padding: 10px;
+    }
+    .container {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}

templates/error.html ADDED Viewed

	@@ -0,0 +1,23 @@

+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Помилка</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="container mt-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>Помилка</h1>
+            <a href="/" class="btn btn-primary">Назад</a>
+        </div>
+        <div class="alert alert-danger">
+            <h4 class="alert-heading">Виникла помилка!</h4>
+            <p>{{ error }}</p>
+        </div>
+    </div>
+</body>
+</html>

templates/index.html ADDED Viewed

	@@ -0,0 +1,133 @@

+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MySQL 8.0.22 для навчальних цілей</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="container mt-4">
+        <h1 class="mb-4">MySQL Сервер 8.0.22 для навчальних цілей</h1>
+        <!-- Статус сервера -->
+        <div class="card mb-4">
+            <div class="card-header {% if status.status == 'online' %}bg-success text-white{% else %}bg-danger text-white{% endif %}">
+                <h5>Статус MySQL: {% if status.status == 'online' %}Онлайн{% else %}Офлайн{% endif %}</h5>
+            </div>
+            <div class="card-body">
+                {% if status.status == 'online' %}
+                    <p><strong>Версія MySQL:</strong> {{ status.version }}</p>
+                {% else %}
+                    <p class="text-danger"><strong>Помилка:</strong> {{ status.error }}</p>
+                {% endif %}
+            </div>
+        </div>
+        <!-- Параметри підключення -->
+        <div class="card mb-4">
+            <div class="card-header bg-info text-white">
+                <h5>Параметри підключення через API</h5>
+            </div>
+            <div class="card-body">
+                <p>Для виконання SQL запитів надсилайте POST запити на <code>/execute</code> з JSON тілом:</p>
+                <pre><code>{
+    "query": "ваш SQL запит"
+}</code></pre>
+                <p>Приклад використання з curl:</p>
+                <pre><code>curl -X POST https://mysql-itud-docsa.hf.space/execute \
+    -H "Content-Type: application/json" \
+    -d '{"query":"SELECT * FROM test"}'</code></pre>
+            </div>
+        </div>
+        <!-- SQL Консоль -->
+        <div class="card mb-4">
+            <div class="card-header bg-primary text-white">
+                <h5>SQL Консоль</h5>
+            </div>
+            <div class="card-body">
+                <form action="/execute" method="post">
+                    <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>
+                    </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>Немає доступних баз даних або MySQL не запущено</p>
+                        {% endif %}
+                    </div>
+                </div>
+            </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">
+                                        <a href="/table/{{ table }}">{{ table }}</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% else %}
+                            <p>Немає доступних таблиць або MySQL не запущено</p>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Практичне завдання -->
+        <div class="card mb-4">
+            <div class="card-header bg-dark text-white">
+                <h5>Практичне заняття №1</h5>
+            </div>
+            <div class="card-body">
+                <p>Для виконання завдання 1.3 виконайте наступний SQL скрипт:</p>
+                <pre><code>-- Нереформатований скрипт
+create table if not exists test (numbers int, words varchar (10));
+-- Відформатований скрипт
+CREATE TABLE IF NOT EXISTS test (
+    numbers INT,           -- Поле для цілих чисел
+    words VARCHAR(10)      -- Поле для текстових значень максимум 10 символів
+);</code></pre>
+                <button class="btn btn-outline-primary" onclick="copyToQueryConsole('create table if not exists test (numbers int, words varchar (10));')">Копіювати до консолі</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        function copyToQueryConsole(sql) {
+            document.getElementById('query').value = sql;
+            document.getElementById('query').focus();
+        }
+    </script>
+</body>
+</html>

templates/result.html ADDED Viewed

	@@ -0,0 +1,77 @@

+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Результат SQL запиту</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="container mt-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>Результат запиту</h1>
+            <a href="/" class="btn btn-primary">Назад</a>
+        </div>
+        <!-- Виконаний запит -->
+        <div class="card mb-4">
+            <div class="card-header bg-secondary text-white">
+                <h5>SQL запит</h5>
+            </div>
+            <div class="card-body">
+                <pre><code>{{ query }}</code></pre>
+            </div>
+        </div>
+        <!-- Результат або помилка -->
+        {% if error %}
+            <div class="alert alert-danger">
+                <h4 class="alert-heading">Помилка!</h4>
+                <p>{{ error }}</p>
+            </div>
+        {% elif affected_rows is defined %}
+            <div class="alert alert-success">
+                <h4 class="alert-heading">Запит виконано успішно!</h4>
+                <p>Змінено рядків: {{ affected_rows }}</p>
+            </div>
+        {% elif results %}
+            <div class="card">
+                <div class="card-header bg-success 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>
+                                    {% for column in results[0].keys() %}
+                                        <th>{{ column }}</th>
+                                    {% endfor %}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for row in results %}
+                                    <tr>
+                                        {% for value in row.values() %}
+                                            <td>{{ value }}</td>
+                                        {% endfor %}
+                                    </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <p class="mb-0">Знайдено записів: {{ results|length }}</p>
+                </div>
+            </div>
+        {% else %}
+            <div class="alert alert-info">
+                <h4 class="alert-heading">Запит виконано успішно</h4>
+                <p>Запит не повернув результатів.</p>
+            </div>
+        {% endif %}
+    </div>
+</body>
+</html>

templates/table.html ADDED Viewed

	@@ -0,0 +1,140 @@

+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Таблиця {{ table_name }}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="container mt-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>Таблиця: {{ table_name }}</h1>
+            <a href="/" class="btn btn-primary">Назад</a>
+        </div>
+        <!-- Структура таблиці -->
+        <div class="card mb-4">
+            <div class="card-header bg-info 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>Null</th>
+                                <th>Ключ</th>
+                                <th>За замовчуванням</th>
+                                <th>Додатково</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for column in columns %}
+                                <tr>
+                                    <td>{{ column.Field }}</td>
+                                    <td>{{ column.Type }}</td>
+                                    <td>{{ column.Null }}</td>
+                                    <td>{{ column.Key }}</td>
+                                    <td>{{ column.Default }}</td>
+                                    <td>{{ column.Extra }}</td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <!-- Дані таблиці -->
+        <div class="card">
+            <div class="card-header bg-success text-white">
+                <h5>Дані таблиці (перші 100 рядків)</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>
+                                {% for column in columns %}
+                                    <th>{{ column.Field }}</th>
+                                {% endfor %}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for row in data %}
+                                <tr>
+                                    {% for column in columns %}
+                                        <td>{{ row[column.Field] }}</td>
+                                    {% endfor %}
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="card-footer">
+                <p class="mb-0">Показано записів: {{ data|length }} (максимум 100)</p>
+            </div>
+        </div>
+        <!-- SQL генератор -->
+        <div class="card mt-4">
+            <div class="card-header bg-primary text-white">
+                <h5>SQL запити для таблиці {{ table_name }}</h5>
+            </div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <h6>SELECT всіх даних</h6>
+                    <div class="input-group">
+                        <input type="text" class="form-control" value="SELECT * FROM {{ table_name }}" readonly id="select-query">
+                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('select-query')">Копіювати</button>
+                        <a href="/execute?query=SELECT * FROM {{ table_name }}" class="btn btn-primary" target="_blank">Виконати</a>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <h6>INSERT новий запис</h6>
+                    <div class="input-group">
+                        <input type="text" class="form-control" value="INSERT INTO {{ table_name }} ({% for column in columns %}{{ column.Field }}{% if not loop.last %}, {% endif %}{% endfor %}) VALUES (/* значення */);" readonly id="insert-query">
+                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('insert-query')">Копіювати</button>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <h6>UPDATE запис</h6>
+                    <div class="input-group">
+                        <input type="text" class="form-control" value="UPDATE {{ table_name }} SET /* поле = значення */ WHERE /* умова */" readonly id="update-query">
+                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('update-query')">Копіювати</button>
+                    </div>
+                </div>
+                <div>
+                    <h6>DELETE запис</h6>
+                    <div class="input-group">
+                        <input type="text" class="form-control" value="DELETE FROM {{ table_name }} WHERE /* умова */" readonly id="delete-query">
+                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('delete-query')">Копіювати</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        function copyToClipboard(elementId) {
+            const element = document.getElementById(elementId);
+            element.select();
+            document.execCommand('copy');
+            // Додати підсвічування для зворотного зв'язку
+            element.classList.add('bg-success', 'text-white');
+            setTimeout(() => {
+                element.classList.remove('bg-success', 'text-white');
+            }, 500);
+        }
+    </script>
+</body>
+</html>