Электронный научно-практический журнал «Современные научные исследования и инновации» » Шаяхметов Марк Назарович https://web.snauka.ru Sat, 18 Apr 2026 09:41:14 +0000 ru hourly 1 http://wordpress.org/?v=3.2.1 Интерактивное изменение данных с помощью Ajax https://web.snauka.ru/issues/2025/11/103862 https://web.snauka.ru/issues/2025/11/103862#comments Sat, 01 Nov 2025 13:03:10 +0000 Шаяхметов Марк Назарович https://web.snauka.ru/issues/2025/11/103862 Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал

Введение

Современные веб-приложения требуют высокой интерактивности и отзывчивости интерфейсов. Одной из ключевых технологий, обеспечивающих бесшовное взаимодействие пользователя с приложением, является Ajax (Asynchronous JavaScript and XML). В рамках данной лабораторной работы мы реализуем систему интерактивного редактирования табличных данных.

Цели работы

- Освоить принципы работы Ajax

- Реализовать интерактивное редактирование табличных данных

- Обеспечить безопасность при работе с базой данных

- Создать пользовательский интерфейс с мгновенным откликом

Архитектура решения

Технологический стек

- **Frontend:** HTML5, CSS3, JavaScript (jQuery)

- **Backend:** PHP 7.4+

- **База данных:** MySQL 5.7+

- **Протокол:** HTTP/HTTPS

Компоненты системы

1. **Клиентская часть** – интерактивная таблица с возможностью редактирования

2. **Серверная часть** – PHP-скрипты для обработки запросов

3. **База данных** – хранение и управление данными

Практическая реализация

1. Подготовка базы данных

“`sql

CREATE TABLE students (

id INT PRIMARY KEY AUTO_INCREMENT,

first_name VARCHAR(50) NOT NULL,

last_name VARCHAR(50) NOT NULL,

age INT,

group_name VARCHAR(20),

email VARCHAR(100)

);

 

INSERT INTO students (first_name, last_name, age, group_name, email) VALUES

(‘Иван’, ‘Иванов’, 20, ‘ИТ-101′, ‘ivan@mail.ru’),

(‘Петр’, ‘Петров’, 21, ‘ИТ-102′, ‘petr@mail.ru’),

(‘Мария’, ‘Сидорова’, 19, ‘ИТ-101′, ‘maria@mail.ru’);

“`

 

2. Структура HTML-документа

 

“`html

<!DOCTYPE html>

<html lang=”ru”>

<head>

<meta charset=”UTF-8″>

<title>Ajax Table Editing</title>

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>

<style>

.dynamic { cursor: pointer; background-color: f0f8ff; }

.dynamic:hover { background-color: e0f0ff; }

.editing { background-color: fffacd; }

input.dynamic-input { width: 100%; border: 1px solid 007bff; padding: 2px; }

</style>

</head>

<body>

<div id=”table-container”></div>

<script src=”script.js”></script>

</body>

</html>

“`

 

3. Подключение к базе данных (connect.php)

 

“`php

<?php

$host = ‘localhost’;

$dbname = ‘university’;

$user = ‘username’;

$pass = ‘password’;

 

try {

$pdo = new PDO(“mysql:host=$host;dbname=$dbname;charset=utf8″, $user, $pass);

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

die(“Connection failed: ” . $e->getMessage());

}

?>

“`

 

4. JavaScript-логика интерактивного редактирования

 

Основной функционал реализован в файле `script.js`:

 

“`javascript

$(document).ready(function() {

    loadTable();

    

    function loadTable() {

        $.ajax({

            url: ‘load_table.php’,

            type: ‘GET’,

            success: function(response) {

                $(‘table-container’).html(response);

                initDynamicCells();

            }

        });

    }

    

    function initDynamicCells() {

        $(‘.dynamic’).off(‘click’).on(‘click’, function() {

            var $cell = $(this);

            var currentValue = $cell.text().trim();

            var field = $cell.data(‘field’);

            var id = $cell.data(‘id’);

            var table = $cell.data(‘table’);

            

            var $input = $(‘<input>’, {

                type: ‘text’,

                value: currentValue,

                class: ‘dynamic-input’

            });

            

            $cell.html($input).addClass(‘editing’);

            $input.focus();

            

            $input.off(‘blur keypress’).on(‘blur keypress’, function(e) {

                if (e.type === ‘blur’ || (e.type === ‘keypress’ && e.which === 13)) {

                    var newValue = $input.val().trim();

                    if (newValue !== currentValue) {

                        saveData(id, field, newValue, table, $cell);

                    } else {

                        $cell.text(currentValue).removeClass(‘editing’);

                    }

                }

            });

        });

    }

    

    function saveData(id, field, value, table, $cell) {

        $.ajax({

            url: ‘itable_save.php’,

            type: ‘POST’,

            data: {

                id: id,

                field: field,

                value: value,

                table: table

            },

            success: function(response) {

                if (response.success) {

                    $cell.text(value).removeClass(‘editing’);

                    showMessage(‘Данные успешно сохранены!’, ‘success’);

                } else {

                    showMessage(‘Ошибка сохранения: ‘ + response.error, ‘error’);

                }

            },

            error: function() {

                showMessage(‘Ошибка соединения с сервером’, ‘error’);

            }

        });

    }

});

“`

 

5. Генерация таблицы (load_table.php)

 

“`php

<?php

include ‘connect.php’;

 

$stmt = $pdo->query(“SELECT * FROM students ORDER BY id”);

$students = $stmt->fetchAll(PDO::FETCH_ASSOC);

?>

 

<table border=”1″ id=”dynamic-table”>

    <thead>

        <tr>

            <th>ID</th>

            <th>Имя</th>

            <th>Фамилия</th>

            <th>Возраст</th>

            <th>Группа</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <?php foreach($students as $student): ?>

        <tr>

            <td><?= htmlspecialchars($student['id']) ?></td>

            <td data-id=”<?= $student['id'] ?>”

                data-field=”first_name” data-table=”students”>

                <?= htmlspecialchars($student['first_name']) ?>

            </td>

            <td data-id=”<?= $student['id'] ?>”

                data-field=”last_name” data-table=”students”>

                <?= htmlspecialchars($student['last_name']) ?>

            </td>

            <td data-id=”<?= $student['id'] ?>”

                data-field=”age” data-table=”students”>

                <?= htmlspecialchars($student['age']) ?>

            </td>

            <td data-id=”<?= $student['id'] ?>”

                data-field=”group_name” data-table=”students”>

                <?= htmlspecialchars($student['group_name']) ?>

            </td>

            <td data-id=”<?= $student['id'] ?>”

                data-field=”email” data-table=”students”>

                <?= htmlspecialchars($student['email']) ?>

            </td>

        </tr>

        <?php endforeach; ?>

    </tbody>

</table>

“`

 

6. Обработчик сохранения данных (itable_save.php)

 

“`php

<?php

header(‘Content-Type: application/json’);

include ‘connect.php’;

 

$id = $_POST['id'] ?? null;

$field = $_POST['field'] ?? null;

$value = $_POST['value'] ?? null;

$table = $_POST['table'] ?? null;

 

// Валидация и безопасность

$allowed_tables = ['students', 'teachers'];

$allowed_fields = ['first_name', 'last_name', 'age', 'group_name', 'email'];

 

if (!$id || !$field || !$table ||

!in_array($table, $allowed_tables) ||

!in_array($field, $allowed_fields)) {

echo json_encode(['success' => false, 'error' => 'Неверные параметры']);

exit;

}

 

try {

$sql = “UPDATE $table SET $field = :value WHERE id = :id”;

$stmt = $pdo->prepare($sql);

$stmt->execute([':value' => $value, ':id' => $id]);

echo json_encode(['success' => $stmt->rowCount() > 0]);

} catch(PDOException $e) {

echo json_encode(['success' => false, 'error' => $e->getMessage()]);

}

?>

“`

 

Меры безопасности

1. Защита от SQL-инъекций

Использование подготовленных запросов (prepared statements) полностью исключает возможность SQL-инъекций:

 

“`php

$sql = “UPDATE $table SET $field = :value WHERE id = :id”;

$stmt = $pdo->prepare($sql);

$stmt->execute([':value' => $value, ':id' => $id]);

“`

 

2. Валидация входных данных

 

Ограничение допустимых таблиц и полей через белые списки:

 

“`php

$allowed_tables = ['students', 'teachers'];

$allowed_fields = ['first_name', 'last_name', 'age', 'group_name', 'email'];

“`

 

3. Экранирование вывода

Предотвращение XSS-атак через `htmlspecialchars()`:

“`php

<?= htmlspecialchars($student['first_name']) ?>

“`

 

Пользовательский опыт

Визуальные индикаторы

- **Обычное состояние:** Светло-голубой фон ячеек

- **Ховер-эффект:** Усиление цвета при наведении

- **Режим редактирования:** Желтый фон с полем ввода

- **Уведомления:** Всплывающие сообщения о статусе операций

Удобство использования

- Редактирование по клику

- Сохранение при потере фокуса или нажатии Enter

- Визуальная обратная связь

- Отмена редактирования при нажатии Escape

Тестирование функциональности

Сценарии тестирования

1. **Редактирование текстовых полей**

- Ввод корректных данных

- Ввод специальных символов

- Пустые значения

 

2. **Обработка ошибок**

- Потеря соединения

- Неверные параметры запроса

- Ошибки базы данных

 

3. **Производительность**

- Время отклика сервера

- Плавность интерфейса

- Обработка одновременных запросов

 

Расширение функциональности

Возможные улучшения

1. **Валидация данных на стороне клиента**

“`javascript

function validateField(field, value) {

const validators = {

‘email’: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,

‘age’: /^\d+$/,

‘first_name’: /^[A-Za-zА-Яа-я\s]+$/

};

return !validators[field] || validators[field].test(value);

}

“`

 

2. **История изменений**

“`sql

CREATE TABLE change_log (

id INT PRIMARY KEY AUTO_INCREMENT,

table_name VARCHAR(50),

record_id INT,

field_name VARCHAR(50),

old_value TEXT,

new_value TEXT,

changed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,

changed_by VARCHAR(100)

);

“`

 

3. **Конфликт параллельного редактирования**

“`php

// Проверка версии записи

$current_version = get_record_version($id);

if ($current_version != $_POST['version']) {

echo json_encode(['success' => false, 'error' => 'Запись была изменена']);

}

“`

 

Заключение

В ходе лабораторной работы была успешно реализована система интерактивного редактирования табличных данных с использованием технологии Ajax. Основные достижения:

1. **Интерактивность:** Пользователи могут редактировать данные непосредственно в таблице

2. **Производительность:** Отсутствие перезагрузки страницы экономит время

3. **Безопасность:** Реализованы меры защиты от основных уязвимостей

4. **Удобство:** Интуитивно понятный интерфейс с обратной связью

Практическая значимость

Разработанное решение может быть использовано в различных веб-приложениях:

- Системы управления контентом (CMS)

- Административные панели

- Системы учета и отчетности

- Образовательные платформы

 Перспективы развития

Для промышленного использования систему можно дополнить:

- Ролевой моделью доступа

- Расширенной валидацией данных

- Системой уведомлений

- Поддержкой различных типов полей (выпадающие списки, даты)

]]> https://web.snauka.ru/issues/2025/11/103862/feed 0 Проектирование и реализация базы данных для магазина кошек: практическое руководство https://web.snauka.ru/issues/2025/11/103854 https://web.snauka.ru/issues/2025/11/103854#comments Tue, 18 Nov 2025 07:38:11 +0000 Шаяхметов Марк Назарович https://web.snauka.ru/issues/2025/11/103854 Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал

Введение

В современном мире домашние животные становятся неотъемлемой частью многих семей, а кошки — одними из самых популярных питомцев. С развитием специализированной розничной торговли возникает необходимость в эффективном управлении данными о животных, клиентах и продажах.

Архитектура базы данных

Концептуальная модель

База данных строится на основе трехуровневой архитектуры, включающей:

1. Таблица `cat` — основная сущность, содержащая информацию о кошках

2. Таблица `flea` — сущность клиентов (в контексте задачи использовано стилизованное название)

3. Таблица `cat_flea` — связующая таблица для отношения «многие-ко-многим»

Физическая модель данных

Таблица CAT (Кошки)

| Поле | Тип данных | Обязательное | Описание |

|——|————|—————|———-|

| `id_cat` | INT PRIMARY KEY | Да | Уникальный идентификатор |

| `name` | VARCHAR(50) | Да | Кличка животного |

| `breed` | VARCHAR(50) | Да | Порода |

| `age` | INT | Да | Возраст в месяцах |

| `price` | DECIMAL(10,2) | Да | Стоимость в рублях |

| `weight` | DECIMAL(4,2) | Да | Вес в килограммах |

| `birth_date` | DATE | Да | Дата рождения |

| `color` | VARCHAR(30) | Да | Окрас |

| `vaccinated` | BOOLEAN | Нет | Статус вакцинации |

| `description` | TEXT | Нет | Дополнительное описание |

 

Таблица FLEA (Клиенты)

| Поле | Тип данных | Обязательное | Описание |

|——|————|—————|———-|

| `id_flea` | INT PRIMARY KEY | Да | Уникальный идентификатор |

| `first_name` | VARCHAR(50) | Да | Имя клиента |

| `last_name` | VARCHAR(50) | Да | Фамилия клиента |

| `email` | VARCHAR(100) | Нет | Электронная почта |

| `phone` | VARCHAR(20) | Нет | Контактный телефон |

| `registration_date` | DATE | Да | Дата регистрации |

| `address` | TEXT | Нет | Адрес проживания |

| `discount` | INT | Нет | Размер скидки в % |

Таблица CAT_FLEA (Покупки)

| Поле | Тип данных | Обязательное | Описание |

|——|————|—————|———-|

| `id_cat` | INT | Да | Внешний ключ на таблицу CAT |

| `id_flea` | INT | Да | Внешний ключ на таблицу FLEA |

| `count` | INT | Да | Количество приобретенных животных |

| `purchase_date` | DATE | Да | Дата совершения покупки |

| `total_price` | DECIMAL(10,2) | Да | Общая стоимость покупки |

 

Реализация на SQL

 

Создание таблиц

 

“`sql

Таблица кошек

CREATE TABLE cat (

id_cat INT PRIMARY KEY AUTO_INCREMENT,

name VARCHAR(50) NOT NULL,

breed VARCHAR(50) NOT NULL,

age INT NOT NULL,

price DECIMAL(10,2) NOT NULL,

weight DECIMAL(4,2) NOT NULL,

birth_date DATE NOT NULL,

color VARCHAR(30) NOT NULL,

vaccinated BOOLEAN DEFAULT FALSE,

description TEXT

);

 

Таблица клиентов

CREATE TABLE flea (

id_flea INT PRIMARY KEY AUTO_INCREMENT,

first_name VARCHAR(50) NOT NULL,

last_name VARCHAR(50) NOT NULL,

email VARCHAR(100),

phone VARCHAR(20),

registration_date DATE NOT NULL,

address TEXT,

discount INT DEFAULT 0

);

 

Таблица покупок

CREATE TABLE cat_flea (

id_cat INT,

id_flea INT,

count INT NOT NULL DEFAULT 1,

purchase_date DATE NOT NULL,

total_price DECIMAL(10,2) NOT NULL,

PRIMARY KEY (id_cat, id_flea, purchase_date),

FOREIGN KEY (id_cat) REFERENCES cat(id_cat),

FOREIGN KEY (id_flea) REFERENCES flea(id_flea)

);

 

Наполнение данными

База данных заполнена реалистичными данными, включающими 10 записей о кошках различных пород (британские, мейн-куны, хаусы, манулы и др.) и 10 записей о клиентах из разных городов России.

Пример данных из таблицы CAT:

| ID | Имя | Порода | Возраст | Цена | Вес |

|—-|—–|——–|———|——|—–|

| 1 | Мурзик | Британский | 12 | 15000.00 | 4.5 |

| 3 | Вася | Хаус | 6 | 8000.00 | 3.8 |

| 5 | Рыжик | Манул | 18 | 50000.00 | 7.1 |

 

 Отношение «многие-ко-многим»

Ключевым аспектом проекта является реализация отношения «многие-ко-многим» между кошками и клиентами через таблицу `cat_flea`. Это позволяет:

- Одному клиенту покупать нескольких кошек

- Одну кошку продавать нескольким клиентам (в случае покупки животных одного помета)

- Учитывать количество приобретаемых животных

- Фиксировать дату и стоимость каждой покупки

Пример из задания: Клиент Иванова Мария приобрела 3 кошек породы “хаус” и 2 кошек породы “манул”, что отражено в двух записях таблицы `cat_flea`.

Практическое применение

Аналитические запросы

sql

Топ-5 самых популярных пород

SELECT c.breed, SUM(cf.count) as total_sold

FROM cat_flea cf

JOIN cat c ON cf.id_cat = c.id_cat

GROUP BY c.breed

ORDER BY total_sold DESC

LIMIT 5;

 

Выручка по месяцам

SELECT YEAR(purchase_date) as year,

MONTH(purchase_date) as month,

SUM(total_price) as monthly_revenue

FROM cat_flea

GROUP BY YEAR(purchase_date), MONTH(purchase_date)

ORDER BY year, month;

 

Операционные отчеты

База данных позволяет генерировать:

- Отчеты по продажам

- Статистику популярности пород

- Информацию о клиентской базе

- Финансовые отчеты

Заключение

Разработанная база данных демонстрирует классический подход к проектированию реляционных баз данных для предметной области розничной торговли. Использование отношения «многие-ко-многим» обеспечивает гибкость учета продаж, а разнообразие типов данных в таблицах соответствует реальным бизнес-требованиям.

Архитектура базы может быть расширена дополнительными таблицами (поставщики, ветеринарные услуги, корма), что делает ее хорошей основой для полноценной системы управления зоомагазином.

]]> https://web.snauka.ru/issues/2025/11/103854/feed 0