Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал
Введение
Современные веб-приложения требуют высокой интерактивности и отзывчивости интерфейсов. Одной из ключевых технологий, обеспечивающих бесшовное взаимодействие пользователя с приложением, является 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)
- Административные панели
- Системы учета и отчетности
- Образовательные платформы
Перспективы развития
Для промышленного использования систему можно дополнить:
- Ролевой моделью доступа
- Расширенной валидацией данных
- Системой уведомлений
- Поддержкой различных типов полей (выпадающие списки, даты)
Библиографический список
- Get started with WebGL [Электронный ресурс] / Microsoft. – Электрон. текстовые дан. – Режим доступа: http://msdn.microsoft.com/ruru/Library/dn385807(v=vs.85).aspx, свободный. – Загл. с экрана.
- Three.js – JavaScript 3D library [Электронный ресурс] / Mr.doob. – Электрон. текстовые дан. – Режим доступа: http://threejs.org, свободный. – Загл. с экрана.
- Вильданов А.Н. 3D-моделирование на WebGL с помощью библиотеки Three.js: учебное пособие. - Уфа: РИЦ БашГУ, 2014. – 114 с. – ISBN: 987-5- 7477-3560-6.
- Вильданов, А. Н. Разработка класса Eventcontrols для создания интерактивных трехмерных приложений в web с помощью Three. Js / А. Н. Вильданов // Дневник науки. – 2023. – № 7(79). – DOI10.51691/2541-8327_2023_7_2. – EDN SSDKQF.